Template:Queens Canada/Notebook
From 2012.igem.org
(Difference between revisions)
(132 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
+ | {{Template:Queens_Canada/Headernojs}} | ||
<html> | <html> | ||
<head> | <head> | ||
- | |||
- | |||
+ | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> | ||
+ | <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/easing?action=raw&ctype=text/js"> </script> | ||
+ | <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"> | ||
+ | $().ready(function() { | ||
+ | $('.kwicks').kwicks({ | ||
+ | max : 650, | ||
+ | duration: 1000, | ||
+ | easing: 'easeOutQuint' | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | </script> | ||
<style type="text/css"> | <style type="text/css"> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
#NotebookNav | #NotebookNav | ||
Line 56: | 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 99: | 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; | |
- | width: | + | |
-webkit-border-radius: 10px; | -webkit-border-radius: 10px; | ||
-khtml-border-radius: 10px; | -khtml-border-radius: 10px; | ||
-moz-border-radius: 10px; | -moz-border-radius: 10px; | ||
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 | |
- | + | ||
{ | { | ||
- | color: black | + | border-left-color: black; |
} | } | ||
- | + | .kwicks a:hover, .kwicks #active { | |
- | { | + | color: #ffffff; |
- | color: | + | |
- | + | ||
} | } | ||
- | + | .kwicks li a:hover h3, .kwicks li #active h3 { | |
- | { | + | color: #999999; |
- | color: | + | |
} | } | ||
- | + | #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; } | ||
+ | #notebook | ||
{ | { | ||
- | color: black; | + | border-width: 10px; |
+ | border-color: black; | ||
} | } | ||
- | # | + | #labcontent |
{ | { | ||
- | |||
-khtml-border-radius: 10px; | -khtml-border-radius: 10px; | ||
-moz-border-radius: 10px; | -moz-border-radius: 10px; | ||
Line 269: | 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; | |
- | + | margin-top: 125px; | |
+ | width: 1000px; | ||
+ | height: auto; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | } | ||
+ | #labcontent 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: 2em; | |
- | font-size: | + | color:grey; |
- | + | padding-top: 5px; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | # | + | #notebookcontent h2 |
{ | { | ||
- | + | font-size: 1.1em; | |
- | + | color:black; | |
- | + | ||
} | } | ||
- | # | + | #protocolcontent |
{ | { | ||
- | + | display:none; | |
- | + | ||
- | + | ||
} | } | ||
- | # | + | #NotebookTitle |
- | + | { | |
- | + | 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: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 424: | 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