.plain ol > li 
{
 line-height: .8em;     
}


/* -------------------------------------- */    
/* underlined list stle                   */

.underlined ol 
{
counter-reset:li; /* Initiate a counter */
margin-left:0; /* Remove the default left margin */
padding-left:0; /* Remove the default left padding */
}

.underlined	ol > li 
{
position:relative; /* Create a positioning context */
margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
padding:4px 8px; /* Add some spacing around the content */
list-style:none; /* Disable the normal item numbering */
border-top:2px solid #666;
background:#f6f6f6;
}

.underlined ol > li:before 
{
content:counter(li); /* Use the counter as content */
counter-increment:li; /* Increment the counter by 1 */
/* Position and style the number */
position:absolute;
top:-2px;
left:-2em;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:2em;
/* Some space between the number and the content in browsers that support
generated content but not positioning it */
margin-right:8px;
padding:4px;
border-top:2px solid #666;
color:#fff;
background:#666;
font-weight:bold;
font-family:"Helvetica Neue", Arial, sans-serif;
text-align:center;
}

.underlined li ol,
.underlined li ul 
{
margin-top:6px;
}

.underlined ol ol li:last-child 
{
margin-bottom:0;
}

/* -------------------------------------- */    
/* rounded  list style                    */ 		

/* list */
.rounded-list ol 
{
counter-reset:li; /* Initiate a counter */
margin-left:0; /* Remove the default left margin */
padding-left:0; /* Remove the default left padding */
}

/* item  */
.rounded-list ol > li
{
position:relative; /* Create a positioning context */
list-style:none; /* Disable the normal item numbering */
background:#f6f6f6; /* Item background color */
margin:0; /* Give each list item a left margin to make room for the numbers */
padding-left: 15px; /* Add some spacing around the content */
padding-bottom:0px;
padding-top:0px;
}

/* number  */
.rounded-list ol > li p:before
{
content: counter(li); 
counter-increment: li; 
position: absolute; 
left: -1.3em;
top: 50%;

/* number background */
background: #87ceeb; 
height: 2em;
width: 2em;
margin-top: -1em;
line-height: 1.5em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
border-radius: 2em;
}

/* -------------------------------------- */    
/* rectangle  list style                  */     

/* list */
.rectangle-list ol 
{
counter-reset:li; /* Initiate a counter */
margin-left:0; /* Remove the default left margin */
padding-left:0; /* Remove the default left padding */
}

/* item  */
.rectangle-list ol > li
{
position: relative;
list-style:none; /* Disable the normal item numbering */
}

/* item hover */
.rectangle-list p
{
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 2.5em;
background: #ddd;
color: #444;
text-decoration: none;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;	
}

/* item hover */
.rectangle-list p:hover
{
background: #fa8072;
}	

/* number  */
.rectangle-list p:before
{
content: counter(li);
counter-increment: li;

position: absolute;	
left: -2.5em;
top: 50%;
margin-top: -1em;

background: #fa8072;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}

/* number hover */
.rectangle-list p:after
{
position: absolute;	
left: -1em;
top: 50%;
margin-top: -.5em;

content: '';
border: .5em solid transparent;

-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;				
}

.rectangle-list p:hover:after
{
left: -.5em;
border-left-color: #fa8072;				
}

/* -------------------------------------- */

.circle-list li
{
padding: 2.5em;
border-bottom: 1px dashed #ccc;
}

.circle-list h2
{
position: relative;
margin: 0;
}

.circle-list p
{
margin: 0;
}

.circle-list h2:before
{
content: counter(li);
counter-increment: li;
position: absolute;    
z-index: -1;
left: -1.3em;
top: -.8em;
background: #f5f5f5;
height: 1.5em;
width: 1.5em;
border: .1em solid rgba(0,0,0,.05);
text-align: center;
font: italic bold 1em/1.5em Georgia, Serif;
color: #ccc;
-moz-border-radius: 1.5em;
-webkit-border-radius: 1.5em;
border-radius: 1.5em;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;    
}

.circle-list li:hover h2:before{
background-color: #ffd797;
border-color: rgba(0,0,0,.08);
border-width: .2em;
color: #444;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}