Template:Queens Canada/Notebook
From 2012.igem.org
(Difference between revisions)
(116 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
+ | {{Template:Queens_Canada/Headernojs}} | ||
<html> | <html> | ||
<head> | <head> | ||
- | + | ||
- | <script | + | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> |
- | <script src=" | + | <script type="text/javascript" src="https://2012.igem.org/Team:Queens_Canada/Javascript/Smoothscroll?action=raw&ctype=text/js"> </script> |
- | <script type="text/javascript" src="https://2012.igem.org/Team:Queens_Canada/Javascript/ | + | <script type="text/javascript" src="https://2012.igem.org/Team:Queens_Canada/Javascript/easing?action=raw&ctype=text/js"> </script> |
- | <script type="text/javascript" src="https://2012.igem.org/Team:Queens_Canada/Javascript/ | + | <script type="text/javascript" src="https://2012.igem.org/Team:Queens_Canada/Javascript/Init?action=raw&ctype=text/js"> |
+ | |||
+ | |||
+ | </script> | ||
+ | |||
+ | <script type="text/javascript" src="https://2012.igem.org/Team:Queens_Canada/Javascript/jquerykwicks?action=raw&ctype=text/js"></script> | ||
+ | |||
<script type="text/javascript"> | <script type="text/javascript"> | ||
- | + | $().ready(function() { | |
$('.kwicks').kwicks({ | $('.kwicks').kwicks({ | ||
- | max : | + | max : 650, |
- | duration: | + | duration: 1000, |
easing: 'easeOutQuint' | easing: 'easeOutQuint' | ||
}); | }); | ||
- | + | }); | |
+ | |||
</script> | </script> | ||
- | |||
- | |||
<style type="text/css"> | <style type="text/css"> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
#NotebookNav | #NotebookNav | ||
Line 66: | Line 37: | ||
background-color: white; | background-color: white; | ||
padding: 15px 15px 15px 15px; | padding: 15px 15px 15px 15px; | ||
- | width: | + | width: 970px; |
background-color: transparent; | background-color: transparent; | ||
border:none; | border:none; | ||
Line 109: | Line 80: | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | } | |
- | # | + | #teamtable |
{ | { | ||
+ | font-family:"Trebuchet MS", Helvetica, sans-serif; | ||
+ | font-size:12px; | ||
+ | text-align: center; | ||
+ | background:none; | ||
+ | border-spacing:20pt; | ||
+ | border:0pt; | ||
} | } | ||
- | + | #teamtd, #teamth | |
- | + | { | |
- | + | border:30px; | |
- | + | width:170px; | |
- | + | vertical-align:top; | |
- | + | } | |
+ | #teamth | ||
+ | { | ||
+ | text-align:left; | ||
+ | font-size:20px; | ||
+ | color:gray; | ||
+ | } | ||
+ | .kwicks_container | ||
+ | { | ||
+ | width: 1000px; | ||
+ | margin-left: 2.5px; | ||
+ | margin-right: 2.5px; | ||
+ | } | ||
+ | .kwicks { | ||
+ | list-style: none; | ||
+ | position: relative; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | width:100%; | ||
+ | height:50px; | ||
+ | z-index:2; | ||
+ | border-width: 10; | ||
+ | -khtml-border-radius: 10px; | ||
+ | -moz-border-radius: 10px; | ||
+ | border-radius: 10px; | ||
} | } | ||
+ | .kwicks li { | ||
+ | display: block; | ||
+ | float: left; | ||
+ | overflow: hidden; | ||
+ | padding: 0; | ||
+ | cursor: pointer; | ||
+ | width: 500px; | ||
+ | height: 35px; | ||
+ | z-index:2; | ||
+ | cursor:pointer; | ||
+ | border-left-width: 2.5px; | ||
+ | border-left-style: solid; | ||
+ | border-left-color: transparent; | ||
+ | border-right-color: transparent; | ||
+ | border-right-width: 2.5px; | ||
- | |||
- | |||
- | |||
} | } | ||
+ | .kwicks li a { | ||
+ | background-image:url(images/sprites_menu.png); | ||
+ | background-repeat:no-repeat; | ||
+ | font-family: "Lucida Grande", "Lucida Sans Unicode", Arial; | ||
+ | font-size: 1.5em; | ||
+ | letter-spacing: -0.07em; | ||
+ | color: #ffffff; | ||
+ | height: 40px; | ||
+ | outline:none; | ||
+ | display:block; | ||
+ | z-index:100; | ||
+ | cursor:pointer; | ||
+ | text-transform: uppercase; | ||
+ | font-weight: bold; | ||
+ | line-height: 37px; | ||
+ | margin-left: 5px; | ||
+ | text-decoration: none; | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | .kwicks li h3 { | ||
+ | position: absolute; | ||
+ | width: 120px; | ||
+ | font-family: "Lucida Grande", "Lucida Sans Unicode", Arial; | ||
+ | font-size: 10px; | ||
+ | color: #FF6600; | ||
+ | letter-spacing: -0.02em; | ||
+ | outline:none; | ||
+ | z-index:0; | ||
+ | cursor:pointer; | ||
+ | text-transform: uppercase; | ||
+ | font-weight: normal; | ||
+ | margin-left: 5px; | ||
+ | text-decoration: none; | ||
+ | left: 0px; | ||
+ | top: 5px; | ||
+ | right: 0px; | ||
+ | bottom: 0px; | ||
+ | } | ||
+ | #kwick_1, #kwick_2, #kwick_3, #kwick_4, #kwick_5, #kwick_6, #kwick_7 { | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | display: inline; | ||
+ | width: 50%; | ||
} | } | ||
+ | #kwick_1 { | ||
+ | left: 0px; | ||
+ | border-width: 0px 0px 0px 0px; | ||
+ | border-right-color: black; | ||
+ | width: 498px; | ||
+ | background-color: crimson; | ||
- | + | -webkit-border-radius: 10px; | |
- | + | -khtml-border-radius: 10px; | |
- | + | -moz-border-radius: 10px; | |
- | + | border-radius: 10px; | |
+ | } | ||
+ | #kwick_2 { | ||
+ | background-color: coral; | ||
+ | width: 498px; | ||
+ | border-right-width:2.5px; | ||
+ | -webkit-border-radius: 10px; | ||
+ | -khtml-border-radius: 10px; | ||
+ | -moz-border-radius: 10px; | ||
+ | border-radius: 10px; | ||
} | } | ||
- | + | #kwick_1 li a { | |
- | { | + | background-position:0px 0px; |
- | + | border-width: 0px 0px 0px 0px; | |
- | + | border-right-color: | |
- | + | } | |
- | + | ||
+ | #kwick_1 li a:hover { | ||
+ | background-position:0px 0px; | ||
+ | border-width: 0px 0px 0px 0px; | ||
+ | border-right-color: black; | ||
} | } | ||
- | + | #kwick_2 li a, a:hover, a:active | |
{ | { | ||
- | + | border-left-color: black; | |
- | + | ||
- | + | ||
} | } | ||
- | + | .kwicks a:hover, .kwicks #active { | |
- | + | color: #ffffff; | |
- | a { | + | |
- | + | ||
} | } | ||
- | + | .kwicks li a:hover h3, .kwicks li #active h3 { | |
- | # | + | color: #999999; |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #kwick_2 a { | |
- | { | + | background-position:0px -50px; |
- | + | ||
} | } | ||
- | + | #kwick_3 a { | |
- | + | background-position:0px -192px; | |
} | } | ||
- | + | #kwick_4 a { | |
- | + | background-position:0px -100px; | |
- | + | ||
} | } | ||
- | # | + | #kwick_5 a { |
- | + | background-position:0px -150px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #kwick_6 a { | |
- | + | background-position:0px -250px; | |
- | + | ||
} | } | ||
- | + | #kwick_7 a { | |
- | + | background-position:0px -300px; | |
- | + | ||
- | + | ||
} | } | ||
- | + | p fade1 { position:inline; } | |
- | + | ul fade2 { position:inline; | |
- | + | font-size:36px; text-align:center; | |
- | + | color:yellow; background:red; | |
- | + | padding-top:25px; | |
- | + | top:0; left:0; display:none; } | |
- | + | span { display:none; } | |
- | padding-top: | + | #notebook |
- | + | { | |
- | + | border-width: 10px; | |
- | + | border-color: black; | |
- | + | ||
- | + | ||
} | } | ||
- | # | + | #labcontent |
{ | { | ||
- | |||
- | |||
- | |||
-khtml-border-radius: 10px; | -khtml-border-radius: 10px; | ||
-moz-border-radius: 10px; | -moz-border-radius: 10px; | ||
Line 230: | Line 270: | ||
-webkit-box-shadow: 3px 3px 4px #000; | -webkit-box-shadow: 3px 3px 4px #000; | ||
box-shadow: 3px 3px 4px #000; | box-shadow: 3px 3px 4px #000; | ||
- | + | margin-bottom: 10px; | |
- | + | ||
- | + | ||
background-color: white; | background-color: white; | ||
+ | margin-top: 125px; | ||
+ | width: 1000px; | ||
+ | height: auto; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
} | } | ||
- | + | #labcontent h1, h2, h3, h4, h5 | |
- | h1, h2, h3, h4, h5 | + | |
- | + | ||
- | + | ||
- | + | ||
{ | { | ||
- | + | padding-top: 0px; | |
+ | padding-bottom:0px; | ||
+ | padding-left: 10px; | ||
+ | padding-right: 10px; | ||
+ | margin-top:0px; | ||
+ | margin-bottom: 0px; | ||
+ | font-family: "Trebuchet MS", Helvetica, sans-serif; | ||
+ | line-height: normal; | ||
} | } | ||
- | + | #notebookcontent h1 | |
{ | { | ||
- | font-size: | + | font-size: 2em; |
- | + | color:grey; | |
+ | padding-top: 5px; | ||
} | } | ||
- | + | #notebookcontent h2 | |
- | + | ||
{ | { | ||
- | color: black | + | font-size: 1.1em; |
+ | color:black; | ||
} | } | ||
- | + | #protocolcontent | |
- | + | ||
{ | { | ||
- | + | display:none; | |
- | + | ||
} | } | ||
- | + | #NotebookTitle | |
{ | { | ||
- | color: | + | background-color: MediumTurquoise; |
+ | -webkit-border-radius: 10px 10px 0px 0px ; | ||
+ | -khtml-border-radius: 10px 10px 0px 0px ; | ||
+ | -moz-border-radius: 10px 10px 0px 0px ; | ||
+ | border-radius: 10px 10px 0px 0px ; | ||
+ | padding-left: 10px; | ||
+ | margin-bottom: 0px; | ||
+ | border-bottom: 0px; | ||
+ | margin-top: -212px; | ||
} | } | ||
- | + | #NotebookTitle p | |
{ | { | ||
- | color: | + | color:white; |
+ | font-size: 2em; | ||
+ | font-family: "Trebuchet MS", Helvetica, sans-serif; | ||
+ | text-decoration: bold; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</style> | </style> | ||
- | + | </head> | |
- | < | + | <body> |
- | + | <!-- | |
- | + | <div id="pagecontent"> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | < | + | |
- | < | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | <div id=" | + | |
- | + | ||
<div id="NotebookNav" > | <div id="NotebookNav" > | ||
<div class="menu"> | <div class="menu"> | ||
Line 350: | Line 355: | ||
</div> | </div> | ||
</div> | </div> | ||
+ | |||
+ | </div> | ||
+ | <script type="text/javascript"> | ||
+ | var maxHeight = ("#notebookcontent").height(); | ||
+ | |||
+ | $("#procotolcontent").css("height", maxHeight); | ||
+ | |||
+ | |||
+ | |||
+ | </script> | ||
+ | --> | ||
+ | </body> | ||
</html> | </html> |
Latest revision as of 05:59, 16 August 2012
Control