Template:Queens Canada/Header
From 2012.igem.org
(Difference between revisions)
Line 6: | Line 6: | ||
<style type="text/css"> | <style type="text/css"> | ||
+ | #nav,#nav ul { | ||
+ | list-style: none outside none; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | background-color: white; | ||
+ | font-family: Tahoma, Geneva, sans-serif; | ||
+ | } | ||
+ | #nav { | ||
+ | background-color: white; | ||
+ | clear: both; | ||
+ | font-size: 12px; | ||
+ | height: 58px; | ||
+ | padding: 0 0 0 9px; | ||
+ | position: relative; | ||
+ | width: 745px; | ||
+ | left: 200px; | ||
+ | top: 146px; | ||
+ | } | ||
+ | #nav ul { | ||
+ | background-color: #222; | ||
+ | border:1px solid #222; | ||
+ | border-radius: 0 5px 5px 5px; | ||
+ | border-width: 0 1px 1px; | ||
+ | box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); | ||
+ | left: -9999px; | ||
+ | overflow: hidden; | ||
+ | position: absolute; | ||
+ | top: -9999px; | ||
+ | z-index: 2; | ||
+ | |||
+ | -moz-transform: scaleY(0); | ||
+ | -ms-transform: scaleY(0); | ||
+ | -o-transform: scaleY(0); | ||
+ | -webkit-transform: scaleY(0); | ||
+ | transform: scaleY(0); | ||
+ | |||
+ | -moz-transform-origin: 0 0; | ||
+ | -ms-transform-origin: 0 0; | ||
+ | -o-transform-origin: 0 0; | ||
+ | -webkit-transform-origin: 0 0; | ||
+ | transform-origin: 0 0; | ||
+ | |||
+ | -moz-transition: -moz-transform 0.1s linear; | ||
+ | -ms-transition: -ms-transform 0.1s linear; | ||
+ | -o-transition: -o-transform 0.1s linear; | ||
+ | -webkit-transition: -webkit-transform 0.1s linear; | ||
+ | transition: transform 0.1s linear; | ||
+ | font-family: Tahoma, Geneva, sans-serif; | ||
+ | } | ||
+ | #nav li { | ||
+ | background: url('menu_line.png') no-repeat scroll right 5px transparent; | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | } | ||
+ | #nav li a { | ||
+ | color: #000000; | ||
+ | display: block; | ||
+ | float: left; | ||
+ | font-weight: normal; | ||
+ | height: 30px; | ||
+ | padding: 23px 20px 0; | ||
+ | position: relative; | ||
+ | text-decoration: none; | ||
+ | background-color: white; | ||
+ | } | ||
+ | #nav li:hover > a { | ||
+ | color: #333333; | ||
+ | } | ||
+ | #nav li:hover, #nav a:focus, #nav a:hover, #nav a:active { | ||
+ | background: none repeat scroll 0 0 #cccccc; | ||
+ | outline: 0 none; | ||
+ | } | ||
+ | #nav li:hover ul.subs { | ||
+ | left: 0; | ||
+ | top: 53px; | ||
+ | width: 180px; | ||
+ | |||
+ | -moz-transform: scaleY(1); | ||
+ | -ms-transform: scaleY(1); | ||
+ | -o-transform: scaleY(1); | ||
+ | -webkit-transform: scaleY(1); | ||
+ | transform: scaleY(1); | ||
+ | } | ||
+ | #nav ul li { | ||
+ | background: none; | ||
+ | width: 100%; | ||
+ | } | ||
+ | #nav ul li a { | ||
+ | float: none; | ||
+ | } | ||
+ | #nav ul li:hover > a { | ||
+ | background-color: #cccccc; | ||
+ | color: #333333; | ||
+ | } | ||
+ | #lavalamp { | ||
+ | background: url('lavalamp.png') no-repeat scroll 0 0 transparent; | ||
+ | height: 16px; | ||
+ | left: 13px; | ||
+ | position: absolute; | ||
+ | top: 0px; | ||
+ | width: 64px; | ||
+ | |||
+ | -moz-transition: all 300ms ease; | ||
+ | -ms-transition: all 300ms ease; | ||
+ | -o-transition: all 300ms ease; | ||
+ | -webkit-transition: all 300ms ease; | ||
+ | transition: all 300ms ease; | ||
+ | } | ||
+ | #lavalamp:hover { | ||
+ | -moz-transition-duration: 3000s; | ||
+ | -ms-transition-duration: 3000s; | ||
+ | -o-transition-duration: 3000s; | ||
+ | -webkit-transition-duration: 3000s; | ||
+ | transition-duration: 3000s; | ||
+ | } | ||
+ | #nav li:nth-child(1):hover ~ #lavalamp { | ||
+ | left: 13px; | ||
+ | } | ||
+ | #nav li:nth-child(2):hover ~ #lavalamp { | ||
+ | left: 90px; | ||
+ | } | ||
+ | #nav li:nth-child(3):hover ~ #lavalamp { | ||
+ | left: 170px; | ||
+ | } | ||
+ | #nav li:nth-child(4):hover ~ #lavalamp { | ||
+ | left: 250px; | ||
+ | } | ||
+ | #nav li:nth-child(5):hover ~ #lavalamp { | ||
+ | left: 330px; | ||
+ | } | ||
+ | #nav li:nth-child(6):hover ~ #lavalamp { | ||
+ | left: 410px; | ||
+ | } | ||
+ | #nav li:nth-child(7):hover ~ #lavalamp { | ||
+ | left: 490px; | ||
+ | } | ||
+ | #nav li:nth-child(8):hover ~ #lavalamp { | ||
+ | left: 565px; | ||
+ | } | ||
+ | |||
#globalWrapper | #globalWrapper | ||
{ | { | ||
Line 25: | Line 165: | ||
#search-controls { overflow:hidden; display:block; background: none; position: absolute; top: 100px; right: 40px;} | #search-controls { overflow:hidden; display:block; background: none; position: absolute; top: 100px; right: 40px;} | ||
+ | |||
#content | #content | ||
{ | { | ||
Line 31: | Line 172: | ||
background-color: transparent; | background-color: transparent; | ||
} | } | ||
+ | |||
#bodyContent { border: none; padding:0; margin:0; width: 975px; height:100%; | #bodyContent { border: none; padding:0; margin:0; width: 975px; height:100%; | ||
} | } | ||
.firstHeading { display: none;} | .firstHeading { display: none;} | ||
+ | |||
#content2 | #content2 | ||
{ | { | ||
Line 172: | Line 315: | ||
padding-top: 5px; | padding-top: 5px; | ||
padding-bottom: 5px; | padding-bottom: 5px; | ||
- | |||
line-spacing: 100%; | line-spacing: 100%; | ||
text-align: center; | text-align: center; | ||
- | + | background-image:url('https://static.igem.org/mediawiki/2012/9/99/Chimeriq_logo_1.png'); | |
+ | background-repeat:no-repeat; | ||
+ | background-color:#ffffff; | ||
} | } | ||
#headerfont1 | #headerfont1 | ||
Line 193: | Line 337: | ||
} | } | ||
+ | |||
+ | #qboxlink { | ||
+ | position: absolute; | ||
+ | top:18px; | ||
+ | left:669px; | ||
+ | width:90px; | ||
+ | height:65px; | ||
+ | background-color: transparent; | ||
+ | border: none; | ||
+ | } | ||
+ | #iboxlink { | ||
+ | position: absolute; | ||
+ | top:66px; | ||
+ | left:843px; | ||
+ | width:110px; | ||
+ | height:85px; | ||
+ | background-color: transparent; | ||
+ | border: none; | ||
+ | } | ||
+ | |||
h2{color:#96d446; } | h2{color:#96d446; } | ||
- | + | h2,h4, h5, h2.noline, h2.topheader{font-family:"Segoe WP", serif; font-size:200%; line-height:35px; border-bottom:0; margin-bottom:5px; border-top:0px; margin-top:10px; padding-top:30px; font-weight:light;} | |
h2.noline{ border-top:0; margin-top:0; padding-top:0; margin-bottom:0; line-height:20px; padding-top:2px; font-size:20px;} | h2.noline{ border-top:0; margin-top:0; padding-top:0; margin-bottom:0; line-height:20px; padding-top:2px; font-size:20px;} | ||
h2.topheader{border-top:0; padding-top:0; margin-top:5px; font-weight:normal} | h2.topheader{border-top:0; padding-top:0; margin-top:5px; font-weight:normal} | ||
+ | |||
+ | h1 | ||
+ | { | ||
+ | font-family: "Trebuchet MS", Helvetica ,sans-serif; | ||
+ | border:none | ||
+ | } | ||
+ | |||
+ | h3 | ||
+ | { | ||
+ | font-family: "Trebuchet MS", Helvetica ,sans-serif; | ||
+ | } | ||
+ | |||
#catlinks | #catlinks | ||
{ | { | ||
Line 295: | Line 471: | ||
font-size: 3em; | font-size: 3em; | ||
} | } | ||
+ | #contentmain | ||
+ | { | ||
+ | margin-bottom: 10px; | ||
+ | width:745px; | ||
+ | |||
+ | background-color: white; | ||
+ | padding: 10px 10px 10px 10px | ||
+ | display:inline; | ||
+ | float:left; | ||
+ | } | ||
+ | #twitter_wrapper | ||
+ | { | ||
+ | width: 200px; | ||
+ | background-color: white; | ||
+ | right: 0px; | ||
+ | display:inline; | ||
+ | float:right; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
</style> | </style> | ||
</head> | </head> | ||
<div id="header"> | <div id="header"> | ||
- | < | + | <a id="qboxlink" href="http://www.queensu.ca/"></a> |
- | < | + | <a id="iboxlink" href="https://2012.igem.org/Main_Page"></a> |
- | <a href="https://2012.igem.org/Team:Queens_Canada"> | + | <ul id="nav"> |
- | + | <li><a href="https://2012.igem.org/Team:Queens_Canada">Home</a></li> | |
- | </a> | + | <li><a class="hsubs" href="#">Project</a> |
- | </ | + | <ul class="subs"> |
- | </ | + | <li><a href="#">Chimeric Flagella</a></li> |
- | </div> | + | <li><a href="#">Ligation Method</a></li> |
+ | </ul> | ||
+ | </li> | ||
+ | <li><a class="hsubs" href="https://2012.igem.org/Team:Queens_Canada/Notebook/Week1">Notebook</a> | ||
+ | |||
+ | </li> | ||
+ | <li><a class="hsubs" href="#">Human Practices</a> | ||
+ | </li> | ||
+ | <li><a href="https://2012.igem.org/Team:Queens_Canada/SynthetiQ">SynthetiQ</a></li> | ||
+ | <li><a class="hsubs" href="#">Partners</a> | ||
+ | <li><a class="hsubs" href="#">Extras</a> | ||
+ | <div id="lavalamp"></div> | ||
+ | </ul> | ||
+ | |||
- | |||
- | |||
- | |||
</div> | </div> | ||
- | + | ||
</html> | </html> |
Revision as of 03:03, 12 June 2012