Team:SydneyUni Australia/Templates/Nav-CSS
From 2013.igem.org
C.Squirrel (Talk | contribs) |
C.Squirrel (Talk | contribs) |
||
Line 1: | Line 1: | ||
- | # | + | /*hide default igem banner and reformat style into blank slate*/ |
- | + | #globalWrapper {width: 100%;} | |
- | # | + | #search-controls {display:none;} |
- | + | ||
- | + | #twitter-widget-0 { margin-left:20px;float:right;} | |
- | # | + | |
- | + | .printfooter {display:none;} | |
- | / | + | #footer-box {border:none;} |
- | # | + | #catlinks {display:none;} |
- | + | .firstHeading {display:none;} | |
- | + | #content {width: 100%; border:none;} | |
- | # | + | #bodyContent {border:none;} |
- | + | body {width: 967px; margin:auto;background-color:white;} | |
+ | |||
+ | .headerpic{ | ||
+ | position:absolute; | ||
+ | z-index:-1; | ||
+ | } | ||
+ | |||
+ | .editsection{display:none;} | ||
+ | |||
+ | #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); | ||
+ | } | ||
+ | |||
+ | #cf img.opaque { | ||
+ | opacity:1; | ||
+ | -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | ||
+ | filter: alpha(opacity=1); | ||
+ | } | ||
+ | |||
+ | #cssmenu ul { | ||
+ | list-style-type:none; | ||
+ | width:auto; | ||
+ | position:relative; | ||
+ | display:block; | ||
+ | height:32px; | ||
+ | font-size:.7em; | ||
+ | background:url(https://static.igem.org/mediawiki/igem.org/2/25/Bg_blue.png) repeat-x top left; | ||
+ | font-family:Verdana,Helvetica,Arial,sans-serif; | ||
+ | border:1px solid #000; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | #cssmenu li { | ||
+ | display:block; | ||
+ | float:left; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | #cssmenu li a { | ||
+ | float:left; | ||
+ | color:#527dff; | ||
+ | text-decoration:none; | ||
+ | height:24px; | ||
+ | padding:9px 15px 0; | ||
+ | font-weight:600; | ||
+ | |||
+ | } | ||
+ | |||
+ | #cssmenu li a:hover, | ||
+ | #cssmenu .active { | ||
+ | color:#fff; | ||
+ | background:url(https://static.igem.org/mediawiki/igem.org/2/25/Bg_blue.png) repeat-x top left; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | #cssmenu .active a { | ||
+ | color:#fff; | ||
+ | font-weight:700; | ||
+ | } | ||
+ | |||
+ | |||
+ | #cssmenu ul{ | ||
+ | background-color:#527dff; | ||
+ | } | ||
+ | #cssmenu li a:hover, | ||
+ | #cssmenu li.active { | ||
+ | background-color:#fff; | ||
+ | } | ||
+ | |||
+ | #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; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | #cf img.top { | ||
+ | animation-name: cfFadeInOut; | ||
+ | animation-timing-function: ease-in-out; | ||
+ | animation-iteration-count: infinite; | ||
+ | animation-duration: 10s; | ||
+ | animation-direction: alternate; | ||
+ | } |
Latest revision as of 02:54, 24 July 2013
/*hide default igem banner and reformat style into blank slate*/
- globalWrapper {width: 100%;}
- search-controls {display:none;}
- twitter-widget-0 { margin-left:20px;float:right;}
.printfooter {display:none;}
- footer-box {border:none;}
- catlinks {display:none;}
.firstHeading {display:none;}
- content {width: 100%; border:none;}
- bodyContent {border:none;}
body {width: 967px; margin:auto;background-color:white;}
.headerpic{ position:absolute; z-index:-1; }
.editsection{display:none;}
- 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);
}
- cf img.opaque {
opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=1);
}
- cssmenu ul {
list-style-type:none; width:auto; position:relative; display:block; height:32px; font-size:.7em; background:url() repeat-x top left; font-family:Verdana,Helvetica,Arial,sans-serif; border:1px solid #000; margin:0; padding:0; }
- cssmenu li {
display:block; float:left; margin:0; padding:0; }
- cssmenu li a {
float:left; color:#527dff; text-decoration:none; height:24px; padding:9px 15px 0; font-weight:600;
}
- cssmenu li a:hover,
- cssmenu .active {
color:#fff; background:url() repeat-x top left; text-decoration:none; }
- cssmenu .active a {
color:#fff; font-weight:700; }
- cssmenu ul{
background-color:#527dff; }
- cssmenu li a:hover,
- cssmenu li.active {
background-color:#fff; }
- 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; } }
- cf img.top {
animation-name: cfFadeInOut; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 10s; animation-direction: alternate; }