"

From 2014.igem.org

/* ---Calvin Hue

• /

 @-webkit-keyframes cssAnimation {
   from { -webkit-transform: rotate(0deg) scale(0.799) skew(1deg) translate(0px); }
   to { -webkit-transform: rotate(360deg) scale(0.799) skew(1deg) translate(0px); }
   }
   @-moz-keyframes cssAnimation {
   from { -moz-transform: rotate(0deg) scale(0.799) skew(1deg) translate(0px); }
   to { -moz-transform: rotate(360deg) scale(0.799) skew(1deg) translate(0px); }
   }
   @-o-keyframes cssAnimation {
   from { -o-transform: rotate(0deg) scale(0.799) skew(1deg) translate(0px); }
   to { -o-transform: rotate(360deg) scale(0.799) skew(1deg) translate(0px); }
   }

1. navb, .dl-back {

display:none; }

1. igemlogo {

width:56px; height:56px; text-indent:-9999px; margin-top: -170px; position: absolute; left: 95%;

background : url('https://static.igem.org/mediawiki/2014/4/43/NCTU_logo1.png') no-repeat scroll 8px 8px / 40px 40px transparent; }

1. igemlogo2 {

width: 56px; height: 56px; text-indent: -9999px; margin-top: -125px; position: absolute; left: 95%;

background : url('https://static.igem.org/mediawiki/2014/0/08/NCTU_logo2.png') no-repeat scroll 8px 8px / 40px 40px transparent; }

1. igemlogo3 {

width: 56px; height: 56px; text-indent: -9999px; position: absolute; left: 95%; background : url('https://static.igem.org/mediawiki/2014/d/db/NCTU_logo3.png') no-repeat scroll 8px 8px / 40px 40px transparent; margin-top: -80px; }

1. main-wrapper {

margin: auto 0; }

1. slogo{

   width: 210px;
   height: 80px;
   
   margin: 0px auto 9px;

}

1. slogo2{

display:none;

   width: 214px;
   height: 214px;
   z-index:-1 ;
   margin: 0px auto 9px;
-webkit-animation: cssAnimation 2.3372s 16 ease-in-out;
   -moz-animation: cssAnimation 2.3372s 16 ease-in-out;
   -o-animation: cssAnimation 2.3372s 16 ease-in-out;

} nav { display:block; width:1480px; padding:0; overflow: visible; margin: 0 auto; } .nav { font-size: 0;

 text-align: center;
 width: 100%;

position: relative; } .nav > li{ display:block; float:left; width:8.8%; height:30px;

vertical-align: middle; }

li.block{ display:block; float:left; width:12%; height:30px;

vertical-align: middle; }

.nav li, .nav li a { text-transform:uppercase; list-style: none; font:18px Quicksand; font-weight:700; } .nav > li a { border: 3px orange solid; color: white; line-height:30px; background: black; display: block; position: relative; width:100%; float: left; height:130%; text-decoration: none;

-webkit-transition: .7s; -moz-transition: .7s; -o-transition: .7s; -ms-transition: .7s; transition: .7s; } .nav > li logo{ color: white; line-height:30px; display: block; position: relative; width:100%; float: left; height:100%; text-decoration: none;

-webkit-transition: .7s; -moz-transition: .7s; -o-transition: .7s; -ms-transition: .7s; transition: .7s; } .nav > li:nth-child(5) a { //padding-top:3px; } .nav > li a:hover { color :#006FFF; }

.effect {

 position: absolute;
 left: 6.25%;
 -webkit-transition: 0.7s ease-in-out;
 -moz-transition: 0.7s ease-in-out;
 -o-transition: 0.7s ease-in-out;
 -ms-transition: 0.7s ease-in-out;
 transition: 0.7s ease-in-out;
 width: 12.5%;
 height: 3px;

// top: 30px;

// background: yellow;
 margin-left:-54px;

} .nav li:nth-child(1):hover ~ .effect { left: 6.25%; } .nav li:nth-child(2):hover ~ .effect { left: 18.75%; } .nav li:nth-child(3):hover ~ .effect { left: 31.25%; } .nav li:nth-child(4):hover ~ .effect { left: 43.75%; } .nav li:nth-child(5):hover ~ .effect { left: 56.25%; } .nav li:nth-child(6):hover ~ .effect { left: 68.75%; } .nav li:nth-child(7):hover ~ .effect { left: 81.25%; } .nav li:nth-child(8):hover ~ .effect { left: 93.75%; } .nav li:nth-child(5) a { //line-height:12px; } .nav li:nth-child(11) a { width:auto; }

ul.nav li:nth-child(5) ul { //margin-top:-3px; } ul.nav li {position:relative;} ul.nav li ul { z-index:5;

 padding: 0;

position: absolute; top: 100%;

 left: 0;

margin-top: 10px;

 width: 275px;

-moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000;

 display: none;
 visibility: hidden;
 -webkit-transiton: opacity 0.5s;
 -moz-transition: opacity 0.5s;
 -ms-transition: opacity 0.5s;
 -o-transition: opacity 0.5s;
 -transition: opacity 0.5s;

} ul.nav li ul:before { content:;

   display:block;
   width:0;
   height:0;
   position:absolute;
   pointer-events: none;    
   border-left: 8px solid transparent;
   border-right: 8px solid transparent; 
   border-bottom:8px solid orange;
   left:30px;
   top:-4px;

} ul.nav li ul li a { position:relative; text-transform:none;

 display: block; 
 color: #fff;
 font-size:14px!important;

line-height:200%!important;

 padding-bottom:0px;
 text-shadow: 0 -1px 0 #000;

} ul.nav li ul li:nth-child(2n) a {

 background: #555; 

} ul.nav li ul li:nth-child(2n+1) a {

 background: #5f5f5f; 

} ul.nav li ul li a:hover { background: #888; color: #fff; } ul.nav li:hover ul {

 display: block;
 visibility: visible;

}