Team:SydneyUni Australia/Templates/Nav-CSS

From 2013.igem.org

/*hide default igem banner and reformat style into blank slate*/

  1. globalWrapper {width: 100%;}
  2. search-controls {display:none;}
  1. twitter-widget-0 { margin-left:20px;float:right;}

.printfooter {display:none;}

  1. footer-box {border:none;}
  2. catlinks {display:none;}

.firstHeading {display:none;}

  1. content {width: 100%; border:none;}
  2. bodyContent {border:none;}

body {width: 967px; margin:auto;background-color:white;}

.headerpic{ position:absolute; z-index:-1; }

.editsection{display:none;}

  1. cf img {
 -webkit-transition: opacity 0.5s ease-in-out;
 -moz-transition: opacity 0.5s ease-in-out;
 -o-transition: opacity 0.5s ease-in-out;
 transition: opacity 0.5s ease-in-out;
 opacity:0;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);

}

  1. cf img.opaque {
 opacity:1;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 filter: alpha(opacity=1);

}

  1. cssmenu ul {

list-style-type:none; width:auto; position:relative; display:block; height:32px; font-size:.7em; background:url(Bg_blue.png) repeat-x top left; font-family:Verdana,Helvetica,Arial,sans-serif; border:1px solid #000; margin:0; padding:0; }

  1. cssmenu li {

display:block; float:left; margin:0; padding:0; }

  1. cssmenu li a {

float:left; color:#527dff; text-decoration:none; height:24px; padding:9px 15px 0; font-weight:600;

}

  1. cssmenu li a:hover,
  2. cssmenu .active {

color:#fff; background:url(Bg_blue.png) repeat-x top left; text-decoration:none; }

  1. cssmenu .active a {

color:#fff; font-weight:700; }


  1. cssmenu ul{

background-color:#527dff; }

  1. cssmenu li a:hover,
  2. cssmenu li.active {

background-color:#fff; }

  1. cf img {
 -webkit-transition: opacity 1s ease-in-out;
 -moz-transition: opacity 1s ease-in-out;
 -o-transition: opacity 1s ease-in-out;
 transition: opacity 1s ease-in-out;

}

 @keyframes cfFadeInOut {
 0% {
 opacity:1;

} 45% { opacity:1; } 55% { opacity:0; } 100% { opacity:0; } }

  1. cf img.top {

animation-name: cfFadeInOut; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 10s; animation-direction: alternate; }