Team:Shenzhen/css/nav.css

From 2012.igem.org

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

Title: front.css Team: Shenzhen Author: BGI_K2 Twitter: @BGI_K2 Email: im.ss.kk@gmail.com

Please contact me if you would like to use this script

*/

@font-face {

   font-family: 'WebSymbolsRegular';
   src: url('http://reinkk.my3gb.com/igem/css/websymbols/websymbols-regular-webfont.eot');
   src: url('http://reinkk.my3gb.com/igem/css/websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('http://reinkk.my3gb.com/igem/css/websymbols/websymbols-regular-webfont.woff') format('woff'),
       url('http://reinkk.my3gb.com/igem/css/websymbols/websymbols-regular-webfont.ttf') format('truetype'),
       url('http://reinkk.my3gb.com/igem/css/websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
   font-weight: normal;
   font-style: normal;

}

.content{ MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

.ca-menu{

   padding:0;

top:20px; left:-5px; height:220px;

   margin:4px auto;

   width:1038px;

position: relative; }

.ca-menu li{

   overflow: hidden;
   -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
   -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
   box-shadow: 1px 1px 2px rgba(0,0,0,0.2);

   -webkit-transition: all 300ms linear;
   -moz-transition: all 300ms linear;
   -o-transition: all 300ms linear;
   -ms-transition: all 300ms linear;
   transition: all 300ms linear;

}

sub1, #sub2,#sub3,#sub4,#sub5,#sub6,#sub7,#sub8{

display:none; z-index:9999999; }

sub1{

left:235px; }

sub2{

left:335px; }

sub3{

left:435px; }

sub4{

left:535px; }

sub5{

left:635px; }

sub6{

left:735px; }

sub7{

left:835px; }

sub8{

left:935px; }

subs1:hover #sub1{

display:block ; }

subs2:hover #sub2{

display:block ; }

subs3:hover #sub3{

display:block ; }

subs4:hover #sub4{

display:block ; }

subs5:hover #sub5{

display:block ; }

subs6:hover #sub6{

display:block ; }

subs7:hover #sub7{

display:block; }

subs8:hover #sub8{

display:block; }

.submenu{ position: relative; top:197px; }

.ca-sub{ height:25px; line-height:25px; width: 100px;

   margin-top: 1px;

border:5px; position: relative; background-color:#666; text-align:center; }

.ca-sub a{ color:#ccc ; }

.ca-sub:hover{ background-color:#333; } .ca-green { background: #8CC541; height: 180px; } .ca-orange { background: #FBB042; height: 160px; } .ca-yellow { background: #FFDD0F; height: 200px; } .ca-yellow,.ca-orange,.ca-green { bottom: 20px; margin-right: 4px;

   margin-bottom: 4px;

position: absolute;

   width: 105px;

}

logo{

position:absolute; top:-20px; z-index:1000000; }

ca-green1{

left: 235px; }

ca-orange1{

   left:335px;

}

ca-yellow1{

   left:435px;

}

ca-green2{

   left:535px;

}

ca-orange2{

   left:635px;

}

ca-green3{

   left:735px;

}

ca-yellow2{

   left:835px;

}

ca-orange3{

   left:935px;

} .ca-yellow:last-child,.ca-orange:last-child,.ca-green:last-child{

   margin-right: 0px;

} .ca-yellow a,.ca-orange a,.ca-green a{ width: 100%; height: 70px; display: block; color: #333; position: absolute; } .ca-icon{

   font-family: 'WebSymbolsRegular', cursive;
   font-size: 60px;

top:10px;

   color: #333;
   text-shadow: 0px 0px 1px #333;
   line-height: 150px;
   position: absolute;
   width: 100%;
   height: 50%;
   left: 0px;
   text-align: center;
   -webkit-transition: all 400ms linear;
   -moz-transition: all 400ms linear;
   -o-transition: all 400ms linear;
   -ms-transition: all 400ms linear;
   transition: all 400ms linear;

}

.ca-content{

   position: absolute;
   left: 0px;
   width: 100%;

top:20px; }

.ca-main{

   font-size: 18px;
   opacity: 0.8;
   text-align: center;
   -webkit-transition: all 200ms linear;
   -moz-transition: all 200ms linear;
   -o-transition: all 200ms linear;
   -ms-transition: all 200ms linear;
   transition: all 200ms linear;

}

backtotop {

display:block; position: fixed; right:15px; bottom:15px; }

sub1 li:hover,.ca-menu li:hover{

   background-color: #000;

} .ca-menu li:hover .ca-icon{

   color: #fff;
   font-size: 90px;

} .ca-menu li:hover .ca-main{

   color: #7FCFD4;
   -webkit-animation: moveFromLeftRotate 300ms ease;
   -moz-animation: moveFromLeftRotate 300ms ease;
   -ms-animation: moveFromLeftRotate 300ms ease;

}

@-webkit-keyframes moveFromLeftRotate{

   from {
       -webkit-transform: translateX(-100%) rotate(-90deg);
   }
   to {
       -webkit-transform: translateX(0%) rotate(0deg);
   }

} @-moz-keyframes moveFromLeftRotate{

   from {
       -moz-transform: translateX(-100%) rotate(-90deg);
   }
   to {
       -moz-transform: translateX(0%) rotate(0deg);
   }

} @-ms-keyframes moveFromLeftRotate{

   from {
       -ms-transform: translateX(-100%) rotate(-90deg);
   }
   to {
       -ms-transform: translateX(0%) rotate(0deg);
   }

}

@-webkit-keyframes moveFromBottom {

   from {
       -webkit-transform: translateY(100%);
   }
   to {
       -webkit-transform: translateY(0%);
   }

} @-moz-keyframes moveFromBottom {

   from {
       -moz-transform: translateY(100%);
   }
   to {
       -moz-transform: translateY(0%);
   }

} @-ms-keyframes moveFromBottom {

   from {
       -ms-transform: translateY(100%);
   }
   to {
       -ms-transform: translateY(0%);
   }

}