@import url(http://fonts.googleapis.com/css?family=Raleway);

div#first {
    width: 60%;
    height: auto;
    background-color: #FAFAFA;
    margin: 80px 0 0 80px;
    position:absolute;
}
div#second {
    width: 424px;
    height: 744px;
    margin-left: 75%;
    position:relative;
}
.add{
    margin-top:19%;
}   






.list-type1{
    width:100%;
  

}
.list-type1 ol{
    counter-reset: li;
    list-style: none;
    *list-style: decimal;
    font-size: 15px;
    font-family: 'Raleway', sans-serif;
    padding: 0;
    margin-bottom: 4em;

}
.list-type1 ol ol{
    margin: 0 0 0 2em;
}

.list-type1 a{
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    background: #e67b2d;
    color: #efefef;
    text-decoration: none;
    -moz-border-radius: .3em;
    -webkit-border-radius: .3em;
    border-radius: 10em;
    transition: all .2s ease-in-out; 
}

.list-type1 a:hover{
    background: #AA2B32;
    text-decoration:none;
    transform: scale(1.1);
}
.list-type1 a:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;	
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background:#e67b2d;
    height: 2em;
    width: 2em;
    line-height: 1.2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    -moz-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
    color:#FFF;
}



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

.list-type2{
    width:400px;
    margin:0 auto;

}
.list-type2 ol{
    counter-reset: li;
    list-style: none;
    *list-style: decimal;
    font-size: 15px;
    font-family: 'Raleway', sans-serif;
    padding: 0;
    margin-bottom: 4em;

}
.list-type2 ol ol{
    margin: 0 0 0 2em;
}

.list-type2 a{
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    background: #FC756F;
    color: #444;
    text-decoration: none;


    transition: all .2s ease-in-out; 
}

.list-type2 a:hover{
    background: #d6d4d4;
    text-decoration:none;
    transform: scale(1.1);
}
.list-type2 a:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;	
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background:#FC756F;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;

    color:#FFF;
}

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

.list-type3{
    margin:0 auto;
    width:500px;
}
.list-type3 li, .list-type3  a{
    float:left;
    height:35px;
    line-height:35px;
    position:relative;
    font-size:15px;
    margin-bottom: 12px;
    font-family: 'Raleway', sans-serif;
    transition: background-color 1.5s ease;
}
.list-type3  a{

    padding:0 60px 0 12px;
    background:#222;
    color:#fff;
    text-decoration:none;
    -moz-border-radius-bottomright:4px;
    -webkit-border-bottom-right-radius:4px;	
    border-bottom-right-radius:4px;
    -moz-border-radius-topright:4px;
    -webkit-border-top-right-radius:4px;	
    border-top-right-radius:4px;	

} 
.list-type3  a:before{
    content:"";
    float:left;
    position:absolute;
    top:0;
    left:-12px;
    width:0;
    height:0;
    border-color:transparent #E67B2D transparent transparent;
    border-style:solid;
    border-width: 18px 12px 18px 0;

}
.list-type3  a:after{
    content:"";
    position:absolute;
    top:15px;
    left:0;
    float:left;
    width:6px;
    height:6px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    background:#fff;
    -moz-box-shadow:-1px -1px 2px #004977;
    -webkit-box-shadow:-1px -1px 2px #004977;
    box-shadow:-1px -1px 2px #004977;
}
.list-type3 a:hover{background:#555;}	

.list-type3 a:hover:before{border-color:transparent #AA2B32 transparent transparent;}

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

.list-type4{

    width:410px;
    margin:0 auto;

}

.list-type4 ol{
    counter-reset: li;
    list-style: none;
    *list-style: decimal;
    font-size: 15px;
    font-family: 'Raleway', sans-serif;
    padding: 0;
    margin-bottom: 4em;

}
.list-type4 a{
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    background: #5975D9;
    color: white;
    text-decoration: none;
    box-shadow:inset 0.5em 0 black;
    -webkit-transition: box-shadow 1s; /* For Safari 3.1 to 6.0 */
    transition: box-shadow 1s;

}

.list-type4 a:hover{

    box-shadow:inset 2em 0 black;;      
}
/**-------------------------------*/


.list-type5{

    width:410px;
    margin:0 auto;

}


.list-type5 ol {
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/

    margin: 0;
    margin-left: 1em;
    padding: 0;

    counter-reset: li-counter;
}
.list-type5 ol  li{
    position: relative;
    margin-bottom: 1.5em;
    padding: 0.5em;
    background-color: #F0D756;


    padding-left: 58px;
}
.list-type5 a{
    text-decoration:none;
    color:black;
    font-size:15px;  
    font-family: 'Raleway', sans-serif;
}


.list-type5 li:hover{
    box-shadow:inset -1em 0 #6CD6CC;
    -webkit-transition: box-shadow 0.5s; /* For Safari 3.1 to 6.0 */
    transition: box-shadow 0.5s;


}

.list-type5 ol  li:before {
    position: absolute;
    top: -0.3em;
    left: -0.5em;
    width: 1.8em;
    height: 1.2em;

    font-size: 2em;
    line-height: 1.2;
    font-weight: bold;
    text-align: center;
    color: white;
    background-color: #6CD6CC;

    transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    z-index: 99;
    overflow: hidden;

    content: counter(li-counter);
    counter-increment: li-counter;
}

.list-type6{

    width:410px;
    margin:0 auto;

}		/* LIST #8 */
.list-type6 {  }
.list-type6 ul { list-style:none; }
.list-type6 ul li { font-size:15px;  
                    font-family: 'Raleway', sans-serif;}
.list-type6 ul li a { 
    display:block;
    width:390px; 
    margin-left: -40px;
    height:24px; 
    background-color:#03B3CB; 
    border-left:5px solid #222; 
    border-right:5px solid #222; 
    padding-left:10px;
    padding-top:7px;
    text-decoration:none;
    color:white;
    margin-bottom: 7px;
    transition: all .2s ease-in-out;
}
.list-type6 ul li a:hover {
    -moz-transform:rotate(-5deg); 
    -moz-box-shadow:10px 10px 20px #000000;
    -webkit-transform:rotate(-5deg);
    -webkit-box-shadow:10px 10px 20px #000000;
    transform:rotate(-5deg); 
    box-shadow:10px 10px 20px #000000;

}