.plain ol > li 
{
 line-height: .8em;     
}
.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:absolute;
top:-2px;
left:-2em;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:2em;
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;
}
/* 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;
}
/* 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 */
margin-bottom: 0px;
}
/* item  */
.rectangle-list ol > li
{
position: relative;
list-style:none; /* Disable the normal item numbering */
}
.rectangle-list ol li a:hover{
    color:#fff;
}
/* item hover */
.rectangle-list p
{
display: block;
padding: .4em .4em .4em .8em;
margin: .1em 0 .1em 2em;
background: #f7f7f7;
border: 1px rgba(0,0,0,.08) solid;
height:49px;
overflow:hidden;
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;
color:#fff;
}	
/* number  */
.rectangle-list p:before
{
content: counter(li);
counter-increment: li;
position: absolute;	
left: -1px;
top: 50%;
margin-top: -1em;
background: #fa8072;
color: #fff;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
.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);
}