"

From 2013.igem.org

@import url("reset.css") screen; @import url("animation.css") screen;

/* Common */ html, body { background:#eaeaea url(../img/bg.png) repeat; font-size:12px; font-family:"Open Sans", serif; min-width:960px; margin:0; padding:0; color:#aaa; }

.content h1 { font-size:48px; color:#000; text-shadow:0px 1px 1px #f4f4f4; text-align:center; padding:60px 0 30px; }

/* LAYOUT */ .container { margin:0 auto; overflow:hidden; width:960px; }

/* CONTENT SLIDER */

1. content-slider {

width:100%; height:360px; margin:10px auto 0; } /* SLIDER */

1. slider {

background:#000; border:5px solid #eaeaea; box-shadow:1px 1px 5px rgba(0,0,0,0.7); height:320px; width:680px; margin:40px auto 0; overflow:visible; position:relative; }

1. mask {

overflow:hidden; height:320px; }

1. slider ul {

margin:0; padding:0; position:relative; }

1. slider li {

width:680px; height:320px; position:absolute; top:-325px; list-style:none; }

1. slider li.firstanimation {

-moz-animation:cycle 25s linear infinite; -webkit-animation:cycle 25s linear infinite; }

1. slider li.secondanimation {

-moz-animation:cycletwo 25s linear infinite; -webkit-animation:cycletwo 25s linear infinite; }

1. slider li.thirdanimation {

-moz-animation:cyclethree 25s linear infinite; -webkit-animation:cyclethree 25s linear infinite; }

1. slider li.fourthanimation {

-moz-animation:cyclefour 25s linear infinite; -webkit-animation:cyclefour 25s linear infinite; }

1. slider li.fifthanimation {

-moz-animation:cyclefive 25s linear infinite; -webkit-animation:cyclefive 25s linear infinite; }

1. slider .tooltip {

background:rgba(0,0,0,0.7); width:300px; height:60px; position:relative; bottom:75px; left:-320px; -moz-transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; }

1. slider .tooltip h1 {

color:#fff; font-size:24px; font-weight:300; line-height:60px; padding:0 0 0 20px; }

1. slider li#first:hover .tooltip,
2. slider li#second:hover .tooltip,
3. slider li#third:hover .tooltip,
4. slider li#fourth:hover .tooltip,
5. slider li#fifth:hover .tooltip {

left:0px; }

1. slider:hover li,
2. slider:hover .progress-bar {

-moz-animation-play-state:paused; -webkit-animation-play-state:paused; }

/* PROGRESS BAR */ .progress-bar { position:relative; top:-5px; width:680px; height:5px; background:#000; -moz-animation:fullexpand 25s ease-out infinite; -webkit-animation:fullexpand 25s ease-out infinite; }