Template:Queens Canada/Headernojs
From 2012.igem.org
(Difference between revisions)
Line 18: | Line 18: | ||
<style type="text/css"> | <style type="text/css"> | ||
- | + | #ca-container h3 | |
{ | { | ||
- | + | font-family: 'Merienda One', cursive; | |
- | + | ||
- | + | ||
} | } | ||
- | + | #ca-container h6 | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
{ | { | ||
- | + | font-family: 'Merienda One', cursive; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | font-family: | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
#footer | #footer | ||
{ | { | ||
width:1000px; | width:1000px; | ||
- | |||
} | } | ||
body | body | ||
Line 405: | Line 35: | ||
z-index:-99; | z-index:-99; | ||
} | } | ||
- | + | #menu { position: relative; top: 0; left: 0; overflow: hidden; height: 98px;} | |
- | #menu { position: relative; top: 0; left: 0; overflow: hidden; height: | + | #menu .colourful { display: block; position: absolute; background: #f0ad22; height: 68px; width: 85px; top: 4px; left: -100px; } |
- | #menu .colourful { display: block; position: absolute; background: #f0ad22; height: | + | #menu ul { margin: 0; padding: 0; list-style: none; float: left; position: relative; top: 0; left: 0; z-index: 1; } |
- | #menu ul { margin: 0; padding: 0; list-style: none; float: left; position: | + | #menu li { float: left; margin: 0 1px 0 0; } |
- | #menu li { float: left; } | + | #menu a:link, #menu a:visited, #menu a:hover, #menu a:active { color: #000; text-align: center; display: block; border: solid; border-width: 4px 0 0; line-height: 40px; width: 85px; height: 60px; } |
- | #menu a:link, #menu a:visited, #menu a:hover, #menu a:active { color: #000; text-align: center; display: block; border: solid; border-width: 4px 0 0; line-height: 40px; width: 85px; height: | + | |
#menu li a:hover { text-decoration: none; color: #fff; text-shadow: 0 0 1px #999; } | #menu li a:hover { text-decoration: none; color: #fff; text-shadow: 0 0 1px #999; } | ||
Line 800: | Line 429: | ||
float:left; | float:left; | ||
margin-top: 50px; | margin-top: 50px; | ||
- | |||
- | |||
- | |||
} | } | ||
#twitter_wrapper | #twitter_wrapper | ||
Line 888: | Line 514: | ||
margin-left:auto; | margin-left:auto; | ||
margin-right:auto; | margin-right:auto; | ||
- | margin-top: | + | margin-top: 150px; |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | |||
} | } | ||
#topbarcontainer | #topbarcontainer | ||
Line 926: | Line 545: | ||
{ | { | ||
position:absolute; width:75px; right:0px; top:0px; | position:absolute; width:75px; right:0px; top:0px; | ||
+ | } | ||
+ | .ca-container{ | ||
+ | position:relative; | ||
+ | margin:25px auto 20px auto; | ||
+ | width:990px; | ||
+ | height:450px; | ||
+ | background-color: #138A53; | ||
+ | } | ||
+ | .ca-wrapper{ | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | position:relative; | ||
+ | } | ||
+ | .ca-item{ | ||
+ | position:relative; | ||
+ | float:left; | ||
+ | width:330px; | ||
+ | height:100%; | ||
+ | text-align:center; | ||
+ | } | ||
+ | .ca-more{ | ||
+ | position: absolute; | ||
+ | bottom: 10px; | ||
+ | right:0px; | ||
+ | padding:4px 15px; | ||
+ | font-weight:bold; | ||
+ | background: #ccbda2; | ||
+ | text-align:center; | ||
+ | color: white; | ||
+ | font-family: "Georgia","Times New Roman",serif; | ||
+ | font-style:italic; | ||
+ | text-shadow:1px 1px 1px #897c63; | ||
+ | } | ||
+ | .ca-close{ | ||
+ | position:absolute; | ||
+ | top:10px; | ||
+ | right:10px; | ||
+ | background:#fff url('https://photos-2.dropbox.com/btj/fb944905/MtnDr20-rnUT6e81x8dYhcU0Gmu0f1ylMwkTjp1s2UQ/cross.png') no-repeat center center; | ||
+ | width:27px; | ||
+ | height:27px; | ||
+ | text-indent:-9000px; | ||
+ | outline:none; | ||
+ | -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2); | ||
+ | -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2); | ||
+ | box-shadow:1px 1px 2px rgba(0,0,0,0.2); | ||
+ | opacity:0.7; | ||
+ | } | ||
+ | .ca-close:hover{ | ||
+ | opacity:1.0; | ||
+ | } | ||
+ | .ca-item-main{ | ||
+ | padding:20px; | ||
+ | position:absolute; | ||
+ | top:5px; | ||
+ | left:5px; | ||
+ | right:5px; | ||
+ | bottom:5px; | ||
+ | background:#fff; | ||
+ | overflow:hidden; | ||
+ | -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2); | ||
+ | -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2); | ||
+ | box-shadow:1px 1px 2px rgba(0,0,0,0.2); | ||
+ | } | ||
+ | .ca-icon{ | ||
+ | width:189px; | ||
+ | height:189px; | ||
+ | position:relative; | ||
+ | margin:0 auto; | ||
+ | background:transparent url('http://dl.dropbox.com/u/46807995/QGEM%202012%20Logo3.png') no-repeat center center; | ||
+ | } | ||
+ | .ca-item-2 .ca-icon{ | ||
+ | background-image:url('http://dl.dropbox.com/u/46807995/QGEM%202012%20Logo3.png'); | ||
+ | } | ||
+ | .ca-item-3 .ca-icon{ | ||
+ | background-image:url(../images/animal3.png); | ||
+ | } | ||
+ | .ca-item-4 .ca-icon{ | ||
+ | background-image:url(../images/animal4.png); | ||
+ | } | ||
+ | .ca-item-5 .ca-icon{ | ||
+ | background-image:url(../images/animal5.png); | ||
+ | } | ||
+ | .ca-item-6 .ca-icon{ | ||
+ | background-image:url(../images/animal6.png); | ||
+ | } | ||
+ | .ca-item-7 .ca-icon{ | ||
+ | background-image:url(../images/animal7.png); | ||
+ | } | ||
+ | .ca-item-8 .ca-icon{ | ||
+ | background-image:url(../images/animal8.png); | ||
+ | } | ||
+ | .ca-item h3{ | ||
+ | font-family: 'Coustard', sans-serif; | ||
+ | text-transform:uppercase; | ||
+ | font-size:30px; | ||
+ | color:#000; | ||
+ | margin-bottom:20px; | ||
+ | height:85px; | ||
+ | text-align:center; | ||
+ | text-shadow: 0px 1px 1px #e4ebe9; | ||
+ | } | ||
+ | .ca-item h4{ | ||
+ | font-family: 'Philosopher', sans-serif;; | ||
+ | font-style:italic; | ||
+ | font-size:12px; | ||
+ | text-align:left; | ||
+ | border-left:10px solid #b0ccc6; | ||
+ | padding-left:10px; | ||
+ | line-height:24px; | ||
+ | margin:10px; | ||
+ | position:relative; | ||
+ | } | ||
+ | .ca-item h4 span{ | ||
+ | text-indent:40px; | ||
+ | display:block; | ||
+ | } | ||
+ | .ca-item h4 span.ca-quote{ | ||
+ | color:#f4eee3; | ||
+ | font-size:100px; | ||
+ | position:absolute; | ||
+ | top:20px; | ||
+ | left:0px; | ||
+ | text-indent:0px; | ||
+ | } | ||
+ | .ca-content-wrapper{ | ||
+ | background:#b0ccc6; | ||
+ | position:absolute; | ||
+ | width:0px; /* expands to width of the wrapper minus 1 element */ | ||
+ | height:440px; | ||
+ | top:5px; | ||
+ | text-align:left; | ||
+ | z-index:10000; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | .ca-content{ | ||
+ | width:660px; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | .ca-content-text{ | ||
+ | font-size: 14px; | ||
+ | font-style: italic; | ||
+ | font-family: "Georgia","Times New Roman",serif; | ||
+ | margin:10px 20px; | ||
+ | padding:10px 20px; | ||
+ | line-height:24px; | ||
+ | list-style-type: none; | ||
+ | } | ||
+ | .ca-content-text p{ | ||
+ | padding-bottom:5px; | ||
+ | } | ||
+ | .ca-content h6{ | ||
+ | margin:25px 20px 0px 35px; | ||
+ | font-size:32px; | ||
+ | padding-bottom:5px; | ||
+ | color:#000; | ||
+ | font-family: 'Coustard', sans-serif; | ||
+ | color:#60817a; | ||
+ | border-bottom:2px solid #99bcb4; | ||
+ | text-shadow: 1px 1px 1px #99BCB4; | ||
+ | } | ||
+ | .ca-content ul{ | ||
+ | margin:20px 35px; | ||
+ | height:30px; | ||
+ | list-style:none; | ||
+ | } | ||
+ | .ca-content ul li{ | ||
+ | float:left; | ||
+ | margin:0px 2px; | ||
+ | } | ||
+ | .ca-content ul li a{ | ||
+ | color:#fff; | ||
+ | background:#000; | ||
+ | padding:3px 6px; | ||
+ | font-size:14px; | ||
+ | font-family: "Georgia","Times New Roman",serif; | ||
+ | font-style:italic; | ||
+ | } | ||
+ | .ca-content ul li a:hover{ | ||
+ | background:#fff; | ||
+ | color:#000; | ||
+ | text-shadow:none; | ||
+ | } | ||
+ | .ca-nav span{ | ||
+ | width:25px; | ||
+ | height:38px; | ||
+ | background:transparent url('https://photos-1.dropbox.com/btj/4159138c/aALpyYLbAaADO2-Ebio68A3s-L7ioYLKSv_9ocokcRY/arrows.png?size=1024x768') no-repeat top left; | ||
+ | position:absolute; | ||
+ | top:50%; | ||
+ | margin-top:-19px; | ||
+ | left:-40px; | ||
+ | text-indent:-9000px; | ||
+ | opacity:0.7; | ||
+ | cursor:pointer; | ||
+ | z-index:100; | ||
+ | } | ||
+ | .ca-nav span.ca-nav-next{ | ||
+ | background-position:top right; | ||
+ | left:auto; | ||
+ | right:-40px; | ||
+ | } | ||
+ | .ca-nav span:hover{ | ||
+ | opacity:1.0; | ||
} | } | ||
.ca-container{ | .ca-container{ | ||
Line 1,125: | Line 946: | ||
.ca-nav span:hover{ | .ca-nav span:hover{ | ||
opacity:1.0; | opacity:1.0; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
</style> | </style> | ||
Line 1,196: | Line 962: | ||
<ul class="menulist"> | <ul class="menulist"> | ||
- | <li class=" | + | <li class="menuitem"> |
<a href="https://2012.igem.org/Team:Queens_Canada">Home </a> | <a href="https://2012.igem.org/Team:Queens_Canada">Home </a> | ||
+ | <div class="subs"> | ||
+ | |||
+ | </div> | ||
</li> | </li> | ||
</li> | </li> | ||
- | <li class=" | + | <li class="menuitem"> |
<a href="https://2012.igem.org/Team:Queens_Canada/Team">Team</a> | <a href="https://2012.igem.org/Team:Queens_Canada/Team">Team</a> | ||
- | <div class="subs | + | <div class="subs"> |
</div> | </div> | ||
</li> | </li> | ||
<li class="menuitem"> | <li class="menuitem"> | ||
- | <a href=""> | + | <a href="">Project</a> |
+ | <ul class="subs"> | ||
+ | <li> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</li> | </li> | ||
</ul> | </ul> | ||
</li> | </li> | ||
<li class="menuitem"> | <li class="menuitem"> | ||
- | <a href="https://2012.igem.org/Team:Queens_Canada/Notebook"> | + | <a href="https://2012.igem.org/Team:Queens_Canada/Notebook">Notebook</a> |
- | <ul class="subs | + | <ul class="subs"> |
<li> | <li> | ||
Line 1,236: | Line 995: | ||
<li class="menuitem"> | <li class="menuitem"> | ||
<a href="https://2012.igem.org/Team:Queens_Canada/SynthetiQ">SynthetiQ</a> | <a href="https://2012.igem.org/Team:Queens_Canada/SynthetiQ">SynthetiQ</a> | ||
- | <ul class="subs | + | <ul class="subs"> |
<li> | <li> | ||
+ | |||
</li> | </li> | ||
</ul> | </ul> | ||
Line 1,243: | Line 1,003: | ||
<li class="menuitem"> | <li class="menuitem"> | ||
<a href="https://2012.igem.org/Team:Queens_Canada/Partners">Partners</a> | <a href="https://2012.igem.org/Team:Queens_Canada/Partners">Partners</a> | ||
- | <ul class="subs | + | <ul class="subs"> |
<li> | <li> | ||
Line 1,250: | Line 1,010: | ||
</li> | </li> | ||
<li class="menuitem"> | <li class="menuitem"> | ||
- | <a href=" | + | <a href="#">Extras</a> |
- | <ul class="subs | + | <ul class="subs"> |
<li> | <li> | ||
- | + | ||
</li> | </li> | ||
</ul> | </ul> | ||
Line 1,260: | Line 1,020: | ||
</div> | </div> | ||
<div id="igemlogocontainer"> | <div id="igemlogocontainer"> | ||
- | <a | + | <a href="https://2012.igem.org/Main_Page"> <img src="https://static.igem.org/mediawiki/2012/e/e2/Igemlogo.png" width=75> </a> |
</div> | </div> | ||
Line 1,277: | Line 1,037: | ||
Control | Control | ||
</div> | </div> | ||
+ | <script type="text/javascript"> | ||
+ | |||
+ | $('.menuitem').hover( | ||
+ | function() | ||
+ | { | ||
+ | $(this).children().delay(300).fadeIn(500); | ||
+ | } | ||
+ | , | ||
+ | function() | ||
+ | { | ||
+ | $(".subs").delay(300).fadeOut(500); | ||
+ | } | ||
+ | ); | ||
+ | </script> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
Line 1,305: | Line 1,079: | ||
}); | }); | ||
</script> | </script> | ||
- | |||
</html> | </html> |
Revision as of 15:18, 24 September 2012
Control