Team:SYSU-Software/overview.css

From 2014.igem.org

Revision as of 15:58, 16 October 2014

@charset "UTF-8";*{margin:0;padding:0}#globalWrapper{height:100%}#content{height:100%}#bodyContent{width:100%;height:100%;overflow:hidden;position:relative}html{width:100%;height:100%;overflow:hidden}body{width:100%;height:100%;background:-webkit-gradient(linear,left top,left bottom,from(#1b0634),color-stop(#2d4292),to(#3494d8));background:-webkit-linear-gradient(top,#1b0634,#2d4292,#3494d8);background:-moz-linear-gradient(top,#1b0634,#2d4292,#3494d8);background:-ms-linear-gradient(top,#1b0634,#2d4292,#3494d8);background:linear-gradient(top,#1b0634,#2d4292,#3494d8)}#menubar>ul>li:nth-child(7){color:transparent}#bodyContent{background:-webkit-gradient(linear,left top,left bottom,from(top),color-stop(#1b0634),color-stop(#2d4292),to(#3494d8));background:-webkit-linear-gradient(top,#1b0634,#2d4292,#3494d8);background:-moz-linear-gradient(top,#1b0634,#2d4292,#3494d8);background:-ms-linear-gradient(top,#1b0634,#2d4292,#3494d8);background:linear-gradient(top,#1b0634,#2d4292,#3494d8)}#bodyContent.hm-part1,body.hm-part1{background:-webkit-gradient(linear,left top,left bottom,from(#1b0634),color-stop(#2d4292),to(#3494d8));background:-webkit-linear-gradient(top,#1b0634,#2d4292,#3494d8);background:-moz-linear-gradient(top,#1b0634,#2d4292,#3494d8);background:-ms-linear-gradient(top,#1b0634,#2d4292,#3494d8);background:linear-gradient(top,#1b0634,#2d4292,#3494d8)}#bodyContent.hm-part2,body.hm-part2{background:-webkit-gradient(linear,left top,left bottom,from(top),color-stop(#1a0a30),to(#40b63c));background:-webkit-linear-gradient(top,#1a0a30,#40b63c);background:-moz-linear-gradient(top,#1a0a30,#40b63c);background:-ms-linear-gradient(top,#1a0a30,#40b63c);background:linear-gradient(top,#1a0a30,#40b63c)}#bodyContent.hm-part3,body.hm-part3{background:-webkit-gradient(linear,left top,left bottom,from(#150348),to(#d04c59));background:-webkit-linear-gradient(top,#150348,#d04c59);background:-moz-linear-gradient(top,#150348,#d04c59);background:-ms-linear-gradient(top,#150348,#d04c59);background:linear-gradient(top,#150348,#d04c59)}#bodyContent.hm-part4,body.hm-part4{background:-webkit-gradient(linear,left top,left bottom,from(top),color-stop(#2b1340),to(#42bdbd));background:-webkit-linear-gradient(top,#2b1340,#42bdbd);background:-moz-linear-gradient(top,#2b1340,#42bdbd);background:-ms-linear-gradient(top,#150348,#d04c59);background:linear-gradient(top,#2b1340,#42bdbd)}.hm-part{visibility:hidden;-webkit-perspective:1px;-moz-perspective:1px;perspective:1px;-webkit-perspective-origin:50% 50%;-moz-perspective-origin:50% 50%;perspective-origin:50% 50%}.hm-part1 .hm-light,.hm-part1 .scrollPosition{visibility:visible}.hm-part1 #hm-part1,.hm-part3 #hm-part3{visibility:visible;-webkit-perspective:2000px;-moz-perspective:2000px;perspective:2000px;-webkit-transition:-webkit-perspective 2s ease-in;-moz-transition:-moz-perspective 2s ease-in;transition:perspective 2s ease-in}.hm-part2 #hm-part2{-webkit-perspective:10000px;-moz-perspective:10000px;perspective:10000px;visibility:visible;-webkit-perspective-origin:39% 50%;-moz-perspective-origin:39% 50%;perspective-origin:39% 50%;-webkit-transition:-webkit-perspective 2s ease-in;-moz-transition:-moz-perspective 2s ease-in;transition:perspective 2s ease-in}.hm-part4 #hm-part4{visibility:visible;-webkit-perspective-origin:56% 81%;-moz-perspective-origin:56% 81%;perspective-origin:56% 81%;-webkit-perspective:1000px;-moz-perspective:1000px;perspective:1000px;-webkit-transition:-webkit-perspective 2s ease-in;-moz-transition:-moz-perspective 2s ease-in;transition:perspective 2s ease-in}.hm-light{width:912px;height:390px;position:fixed;bottom:0;left:50%;visibility:hidden;background-image:url(https://static.igem.org/mediawiki/2014/7/74/Overview-BgLight.png);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.screenCenter{width:912px;height:500px;position:absolute;top:45%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.hm-part1-header{text-align:center;-webkit-transform:translateZ(10px);-moz-transform:translateZ(10px);transform:translateZ(10px)}#showpics{margin-top:-80px;position:relative;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d}.hm-part1 .rotate#showpics{-webkit-animation:rotate 20s linear 2.1s infinite;-moz-animation:rotate 20s linear 2.1s infinite;animation:rotate 20s linear 2.1s infinite}.showpic{position:absolute;top:0;left:0}#showparts{-webkit-transform:translateZ(10px);-moz-transform:translateZ(10px);transform:translateZ(10px)}#showdna{left:-150px;top:120px;-webkit-transform:translateZ(100px);-moz-transform:translateZ(100px);transform:translateZ(100px)}#showvector{left:150px;top:140px;-webkit-transform:translateZ(150px);-moz-transform:translateZ(150px);transform:translateZ(150px)}.scrollPosition{position:fixed;visibility:hidden;left:50%;bottom:15px;-webkit-transform:translate(0,0) translateX(-50%);-moz-transform:translate(0,0) translateX(-50%);-ms-transform:translate(0,0) translateX(-50%);transform:translate(0,0) translateX(-50%)}.scrolltip{width:40px;height:63px;background-image:url(https://static.igem.org/mediawiki/2014/2/2f/Overview-roll.png);-webkit-animation:float 2s infinite alternate;-moz-animation:float 2s infinite alternate;animation:float 2s infinite alternate}.hm-line{width:2500px;height:3px;margin-top:250px;margin-left:-794px;background-color:#9ff70f}.hm-line-star img{margin-top:-66px;margin-left:-564px}.hm-part2 .hm-line-star img{-webkit-animation:line-star 1s .5s;-moz-animation:line-star 1s .5s;animation:line-star 1s .5s;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards}.hm-doors-perspective{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:scale(.7);-moz-transform:scale(.7);-ms-transform:scale(.7);transform:scale(.7);margin-top:-200px}.hm-doors{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;position:relative;-webkit-animation:doors 10s linear infinite;-moz-animation:doors 10s linear infinite;animation:doors 10s linear infinite}.hm-door{width:424px;height:424px}.hm-door.and{background-image:url(https://static.igem.org/mediawiki/2014/3/32/And.png);-webkit-transform:translateZ(212px);-moz-transform:translateZ(212px);transform:translateZ(212px)}.hm-door.or{position:absolute;top:211px;background-image:url(https://static.igem.org/mediawiki/2014/c/c3/Or.png);-webkit-transform:rotateX(-90deg);-moz-transform:rotateX(-90deg);transform:rotateX(-90deg)}.hm-door.nand{position:absolute;top:-211px;background-image:url(https://static.igem.org/mediawiki/2014/8/83/Nand.png);-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);transform:rotateX(90deg)}.hm-door.nor{background-image:url(https://static.igem.org/mediawiki/2014/0/08/Nor.png);position:absolute;top:0;-webkit-transform:translateZ(-212px) rotateX(180deg);-moz-transform:translateZ(-212px) rotateX(180deg);transform:translateZ(-212px) rotateX(180deg)}.hm-door.empty{background-image:url(https://static.igem.org/mediawiki/2014/d/d6/Door-empty.png);position:absolute;top:0;left:211px;-webkit-transform:rotateY(-90deg);-moz-transform:rotateY(-90deg);transform:rotateY(-90deg);-webkit-backface-visibility:visible;-moz-backface-visibility:visible;backface-visibility:visible}.hm-part2-circle{width:850px;height:850px;background-image:url(https://static.igem.org/mediawiki/2014/2/28/Part2-circle.png);position:absolute;top:-180px;left:150px;-webkit-animation:circle 2.5s linear infinite;-moz-animation:circle 2.5s linear infinite;animation:circle 2.5s linear infinite}.hm-part2-header{position:absolute;top:164px;left:550px;-webkit-transform:translateZ(400px);-moz-transform:translateZ(400px);transform:translateZ(400px)}.hm-part3-axis{width:1px;height:1px;position:absolute;bottom:-60px;left:200px;-webkit-transition:width 2s,height 2s;-moz-transition:width 2s,height 2s;transition:width 2s,height 2s;overflow:hidden}.hm-part3 .hm-part3-axis{width:888px;height:585px}.hm-part3-axis img{position:absolute;bottom:0;left:0}.hm-part3-header{position:absolute;left:-152px;top:270px;-webkit-transform:translateZ(50px);-moz-transform:translateZ(50px);transform:translateZ(50px)}.hm-part3-line{position:absolute;top:10px;left:270px;opacity:0}.hm-part3 .hm-part3-line{opacity:1;-webkit-transition:opacity 2s 2s;-moz-transition:opacity 2s 2s;transition:opacity 2s 2s}.hm-part3-ball{position:absolute;left:249px;top:470px}.hm-part3 .hm-part3-ball{-webkit-animation:ball-y 2.5s 3s linear infinite;-moz-animation:ball-y 2.5s 3s linear infinite;animation:ball-y 2.5s 3s linear infinite}.hm-part3 .hm-part3-ball img{-webkit-animation:ball-x 2.5s 3s linear infinite;-moz-animation:ball-x 2.5s 3s linear infinite;animation:ball-x 2.5s 3s linear infinite}.hm-part3-fx{position:absolute;left:450px;top:150px}#hm-part3-fx-25{position:absolute;left:120px;top:-30px;left:122px;top:-24px;-webkit-transform-origin:-6% 66%;-moz-transform-origin:-6% 66%;-ms-transform-origin:-6% 66%;transform-origin:-6% 66%;-webkit-animation:uncircle 2s 1s linear infinite;-moz-animation:uncircle 2s 1s linear infinite;animation:uncircle 2s 1s linear infinite}#hm-part4>div{position:absolute}.hm-part4-require{top:-20px;left:0;-webkit-transform:translateZ(2px);-moz-transform:translateZ(2px);transform:translateZ(2px)}.hm-part4-doc{top:310px;left:-97px;-webkit-transform:translateZ(20px);-moz-transform:translateZ(20px);transform:translateZ(20px)}.hm-part4-proj{top:74px;left:133px;-webkit-transform:translateZ(50px);-moz-transform:translateZ(50px);transform:translateZ(50px)}.hm-part4-policy{top:370px;left:517px;-webkit-transform:translateZ(20px);-moz-transform:translateZ(20px);transform:translateZ(20px)}.hm-part4-team{top:330px;left:709px;-webkit-transform:translateZ(50px);-moz-transform:translateZ(50px);transform:translateZ(50px)}.hm-part4-header{top:213px;left:515px;-webkit-transform:translateZ(50px);-moz-transform:translateZ(50px);transform:translateZ(50px)}.hm-part4-download{left:445px;top:10px;-webkit-transform:translateZ(70px);-moz-transform:translateZ(70px);transform:translateZ(70px)}@-webkit-keyframes ball-x{from{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(700px);transform:translateX(700px)}}@-moz-keyframes ball-x{from{-moz-transform:translateX(0);transform:translateX(0)}to{-moz-transform:translateX(700px);transform:translateX(700px)}}@keyframes ball-x{from{-webkit-transform:translateX(0);-moz-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(700px);-moz-transform:translateX(700px);transform:translateX(700px)}}@-webkit-keyframes ball-y{0%{-webkit-transform:translateY(0);transform:translateY(0)}5%{-webkit-transform:translateY(-110px);transform:translateY(-110px)}10%{-webkit-transform:translateY(-200px);transform:translateY(-200px)}20%{-webkit-transform:translateY(-300px);transform:translateY(-300px)}30%{-webkit-transform:translateY(-360px);transform:translateY(-360px)}40%{-webkit-transform:translateY(-400px);transform:translateY(-400px)}50%{-webkit-transform:translateY(-435px);transform:translateY(-435px)}70%{-webkit-transform:translateY(-470px);transform:translateY(-470px)}90%{-webkit-transform:translateY(-489px);transform:translateY(-489px)}100%{-webkit-transform:translateY(-480px);transform:translateY(-480px)}}@-moz-keyframes ball-y{0%{-moz-transform:translateY(0);transform:translateY(0)}5%{-moz-transform:translateY(-110px);transform:translateY(-110px)}10%{-moz-transform:translateY(-200px);transform:translateY(-200px)}20%{-moz-transform:translateY(-300px);transform:translateY(-300px)}30%{-moz-transform:translateY(-360px);transform:translateY(-360px)}40%{-moz-transform:translateY(-400px);transform:translateY(-400px)}50%{-moz-transform:translateY(-435px);transform:translateY(-435px)}70%{-moz-transform:translateY(-470px);transform:translateY(-470px)}90%{-moz-transform:translateY(-489px);transform:translateY(-489px)}100%{-moz-transform:translateY(-480px);transform:translateY(-480px)}}@keyframes ball-y{0%{-webkit-transform:translateY(0);-moz-transform:translateY(0);transform:translateY(0)}5%{-webkit-transform:translateY(-110px);-moz-transform:translateY(-110px);transform:translateY(-110px)}10%{-webkit-transform:translateY(-200px);-moz-transform:translateY(-200px);transform:translateY(-200px)}20%{-webkit-transform:translateY(-300px);-moz-transform:translateY(-300px);transform:translateY(-300px)}30%{-webkit-transform:translateY(-360px);-moz-transform:translateY(-360px);transform:translateY(-360px)}40%{-webkit-transform:translateY(-400px);-moz-transform:translateY(-400px);transform:translateY(-400px)}50%{-webkit-transform:translateY(-435px);-moz-transform:translateY(-435px);transform:translateY(-435px)}70%{-webkit-transform:translateY(-470px);-moz-transform:translateY(-470px);transform:translateY(-470px)}90%{-webkit-transform:translateY(-489px);-moz-transform:translateY(-489px);transform:translateY(-489px)}100%{-webkit-transform:translateY(-480px);-moz-transform:translateY(-480px);transform:translateY(-480px)}}@-webkit-keyframes circle{from{-webkit-transform:rotateY(0deg) rotateZ(0deg);transform:rotateY(0deg) rotateZ(0deg)}to{-webkit-transform:rotateY(0deg) rotateZ(360deg);transform:rotateY(0deg) rotateZ(360deg)}}@-moz-keyframes circle{from{-moz-transform:rotateY(0deg) rotateZ(0deg);transform:rotateY(0deg) rotateZ(0deg)}to{-moz-transform:rotateY(0deg) rotateZ(360deg);transform:rotateY(0deg) rotateZ(360deg)}}@keyframes circle{from{-webkit-transform:rotateY(0deg) rotateZ(0deg);-moz-transform:rotateY(0deg) rotateZ(0deg);transform:rotateY(0deg) rotateZ(0deg)}to{-webkit-transform:rotateY(0deg) rotateZ(360deg);-moz-transform:rotateY(0deg) rotateZ(360deg);transform:rotateY(0deg) rotateZ(360deg)}}@-webkit-keyframes uncircle{from{-webkit-transform:rotateY(0deg) rotateZ(0deg);transform:rotateY(0deg) rotateZ(0deg)}to{-webkit-transform:rotateY(0deg) rotateZ(-360deg);transform:rotateY(0deg) rotateZ(-360deg)}}@-moz-keyframes uncircle{from{-moz-transform:rotateY(0deg) rotateZ(0deg);transform:rotateY(0deg) rotateZ(0deg)}to{-moz-transform:rotateY(0deg) rotateZ(-360deg);transform:rotateY(0deg) rotateZ(-360deg)}}@keyframes uncircle{from{-webkit-transform:rotateY(0deg) rotateZ(0deg);-moz-transform:rotateY(0deg) rotateZ(0deg);transform:rotateY(0deg) rotateZ(0deg)}to{-webkit-transform:rotateY(0deg) rotateZ(-360deg);-moz-transform:rotateY(0deg) rotateZ(-360deg);transform:rotateY(0deg) rotateZ(-360deg)}}@-webkit-keyframes doors{from{-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}to{-webkit-transform:rotateX(360deg);transform:rotateX(360deg)}}@-moz-keyframes doors{from{-moz-transform:rotateX(0deg);transform:rotateX(0deg)}to{-moz-transform:rotateX(360deg);transform:rotateX(360deg)}}@keyframes doors{from{-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform:rotateX(0deg)}to{-webkit-transform:rotateX(360deg);-moz-transform:rotateX(360deg);transform:rotateX(360deg)}}@-webkit-keyframes line-star{from{-webkit-transform:translateX(0px);transform:translateX(0px)}to{-webkit-transform:translateX(884px);transform:translateX(884px)}}@-moz-keyframes line-star{from{-moz-transform:translateX(0px);transform:translateX(0px)}to{-moz-transform:translateX(884px);transform:translateX(884px)}}@keyframes line-star{from{-webkit-transform:translateX(0px);-moz-transform:translateX(0px);transform:translateX(0px)}to{-webkit-transform:translateX(884px);-moz-transform:translateX(884px);transform:translateX(884px)}}@-webkit-keyframes rotate{from{-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}to{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}}@-moz-keyframes rotate{from{-moz-transform:rotateY(0deg);transform:rotateY(0deg)}to{-moz-transform:rotateY(360deg);transform:rotateY(360deg)}}@keyframes rotate{from{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);transform:rotateY(0deg)}to{-webkit-transform:rotateY(360deg);-moz-transform:rotateY(360deg);transform:rotateY(360deg)}}@-webkit-keyframes float{0%{-webkit-transform:translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1)}50%{-webkit-transform:translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1)}100%{-webkit-transform:translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1)}}@-moz-keyframes float{0%{-moz-transform:translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1)}50%{-moz-transform:translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1)}100%{-moz-transform:translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1)}}@keyframes float{0%{-webkit-transform:translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);-moz-transform:translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1)}50%{-webkit-transform:translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);-moz-transform:translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1)}100%{-webkit-transform:translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);-moz-transform:translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1)}}.hm-sequence{position:fixed;right:3%;top:40%}.hm-sequence div{width:10px;height:10px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background-color:white;opacity:.2}.hm-sequence div+div{margin-top:12px}.hm-part1 #hm-sequence1,.hm-part2 #hm-sequence2,.hm-part3 #hm-sequence3,.hm-part4 #hm-sequence4{opacity:.9}