css part 1 (circley destiel)

#destiel {
    color:#878787;
    z-index:3;
    background-color:{color:first circle};
    overflow:hidden;
    position:fixed;
    margin-left:10px;
    margin-top:10px;
    width: 15px;
    height: 15px;
    border:1px solid #eee;
     -moz-border-radius: 50px;
     -webkit-border-radius: 50px;
      -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
     border-radius: 50px;


}

    #destiel:hover {
          background-color:#fff;
        width:100px;
        height:120px;
       -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
     border-radius: 0px;

    }

     #titleyo {
         opacity:0;
         text-align:left;
         line-height:80%;
         font-size:9px;
          -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
     }


    #inside {
        width:90px;
        padding-right:1px;
        opacity:1;
        position:absolute;
        font-size:9px;
        text-align:left;
        line-height:100%;
        padding-left:6px;
        -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
    }



 #destiel2 {
    z-index:2;
    color:#878787;
    background-color:{color:second circle};
    overflow:hidden;
    position:fixed;
    margin-left:10px;
    margin-top:30px;
    width: 15px;
    height: 15px;
    border:1px solid #eee;
     -moz-border-radius: 50px;
     -webkit-border-radius: 50px;
      -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
     border-radius: 50px;


}

    #destiel2:hover {
          background-color:#fff;
        width:100px;
        height:120px;
       -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
     border-radius: 0px;

    }

     #titleyo2 {
         opacity:0;
         text-align:left;
         line-height:80%;
         font-size:9px;
          -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
     }


    #inside2 {
        width:90px;
        padding-right:1px;
        opacity:1;
        position:absolute;
        font-size:9px;
        text-align:left;
        line-height:100%;
        padding-left:6px;
        -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
    }


 #destiel3 {
     color:#878787;
    z-index:1;
    background-color:{color:third circle};
    overflow:hidden;
    position:fixed;
    margin-left:10px;
    margin-top:50px;
    width: 15px;
    height: 15px;
    border:1px solid #eee;
     -moz-border-radius: 50px;
     -webkit-border-radius: 50px;
      -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
     border-radius: 50px;


}

    #destiel3:hover {
          background-color:#fff;
        width:100px;
        height:120px;
       -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
     border-radius: 0px;

    }

     #titleyo3 {
         opacity:0;
         text-align:left;
         line-height:80%;
         font-size:9px;
          -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
     }


    #inside3 {
        width:90px;
        padding-right:3px;
        opacity:1;
        position:absolute;
        font-size:9px;
        text-align:left;
        line-height:100%;
        padding-left:6px;
        -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
    }