css动画效果

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{

    /* A simple page reset */

    margin:0px;

    padding:0px;

}

body{

    color:white;

    font-size:13px;

    background: url(img/bg.jpg) repeat-x #003951;

    font-family:Arial, Helvetica, sans-serif;

        

    text-shadow:2px 2px 5px #333333;

}

.tut-title{

    font-size:20px;

    font-weight:bold;

}

.tut-description{

    color:#DDDDDD;

    font-family:Arial,Helvetica,sans-serif;

    font-size:11px;

    padding-top:5px;

}

.tut-img{

    border:1px solid white;

    float:left;

    margin:0 15px 0 0;

    

    width:100px;

    height:100px;

    overflow:hidden;

    

    /* CSS3 Box Shadow */

    -moz-box-shadow:2px 2px 3px #333333;

    -webkit-box-shadow:2px 2px 3px #333333;

    box-shadow:2px 2px 3px #333333;

    cursor:n-resize;

    position:relative;

}

.drag-label{

    /* The DRAG label that scrolls into visibility on hover */

    background:url(img/label_small.png) no-repeat;

    width:71px;

    height:25px;

    position:relative;

    margin-left:25px;

}

a.button{

    /* The pretty buttons on the bottom are actually hyperlinks.. */

    color:#434343 !important;

    display:block;

    float:left;

    font-size:10px;

    font-weight:bold;

    height:23px;

    margin:10px;

    padding:12px 10px 0 12px;

    position:relative;

    text-shadow:none;

    text-transform:uppercase;

    /* This is the left part of the button background image */

    background:transparent url(img/button_gray_bg.png) no-repeat;

}

a.button:hover{

    text-decoration:none !important;

    background-position:bottom left;

}

a.button:active{

    /* Offsetting the text 1px to the bottom on mouse-click*/

    padding-top:13px;

    height:22px;

}

a.button span{

    /* This span holds the right part of the button backgound */

    background:transparent url(img/button_gray_bg.png) no-repeat right top;

    height:35px;

    position:absolute;

    right:-2px;

    top:0;

    width:10px;

    display:block;

}

a.button:hover span{

    background-position:bottom right;

}

.button-holder{

    padding-left:107px;

}

ul.sort{

    /* This UL gets converted to a sortable by jQuery */

    font-family:"Myriad Pro",Arial,Helvetica,sans-serif;

    font-size:20px;

}

ul.sort li{

    margin:25px 50px 25px 0;

    height:102px;

    list-style:none;

}

.chart{

    /* Styling the chart container */

    background:#002A3C;

    border:1px solid #005A7F;

    height:300px;

    width:550px;

}

.bar{

    /* Each bar in the chart is a div. Colors and width are assigned later */

    height:17px;

    margin:15px;

    overflow:hidden;

    padding:15px 10px 10px;

    text-shadow:none;

    white-space:nowrap;

}

.bar a, .bar a:visited{

    color:white;

    font-size:12px;

}

.tot-votes{

    float:right;

    font-size:10px;

    font-weight:bold;

    position:relative;

    right:50px;

    text-transform:uppercase;

    top:18px;

}

/* General styles for the demo page */

h1{

    /* The title of the page */

    color:white;

    font-family:"MyRiad Pro",Arial,Helvetica,sans-serif;

    font-size:38px;

    font-weight:normal;

}

h2{

    /* The subtitle */

    font-family:"MyRiad Pro","Arial Narrow",Arial,Helvetica,sans-serif;

    font-size:16px;

    font-weight:normal;

    letter-spacing:1px;

    padding-left:2px;

    text-transform:uppercase;

    white-space:nowrap;

    margin:10px 0 25px;

}

#orig{

    /* The link that is positioned above the title */

    font-family:"MyRiad Pro",Arial;

    font-size:10px;

    letter-spacing:1px;

    padding-bottom:15px;

    text-transform:uppercase;

}

hr{

    /* The horizontal ruler */

    background-color:#BBBBBB;

    border:medium none;

    color:#BBBBBB;

    height:1px;

    margin:30px auto;

    width:450px;

}

.clear{

    /* The clearfix hack */

    clear:both;

}

#main{

    /* The main container */

    width:600px;

    margin:30px auto;

}

a img{

    border:none;

}

a, a:visited {

    color:#00BBFF;

    text-decoration:none;

    outline:none;

}

a:hover{

    text-decoration:underline;

}

.tutorial-info{

    text-align:center;

    padding:10px;

}