Team:Calgary/Sandbox3

From 2011.igem.org

(Difference between revisions)
 
(48 intermediate revisions not shown)
Line 1: Line 1:
-
{{Team:Calgary/Main_Header|}}
 
-
 
<html>
<html>
-
 
<head>
<head>
 +
<!--jQuery and jQuery-UI additions-->
 +
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.js"></script>
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 +
 +
<!--JQuery Cycle Plugin-->
 +
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
 +
 +
<!--JQuery Easing Plugin-->
 +
<script type="text/javascript">
 +
/*
 +
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
 +
*
 +
* Uses the built in easing capabilities added In jQuery 1.1
 +
* to offer multiple easing options
 +
*
 +
* TERMS OF USE - jQuery Easing
 +
*
 +
* Open source under the BSD License.
 +
*
 +
* Copyright © 2008 George McGinley Smith
 +
* All rights reserved.
 +
*
 +
* Redistribution and use in source and binary forms, with or without modification,
 +
* are permitted provided that the following conditions are met:
 +
*
 +
* Redistributions of source code must retain the above copyright notice, this list of
 +
* conditions and the following disclaimer.
 +
* Redistributions in binary form must reproduce the above copyright notice, this list
 +
* of conditions and the following disclaimer in the documentation and/or other materials
 +
* provided with the distribution.
 +
*
 +
* Neither the name of the author nor the names of contributors may be used to endorse
 +
* or promote products derived from this software without specific prior written permission.
 +
*
 +
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
 +
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 +
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
 +
*  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 +
*  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
 +
*  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
 +
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 +
*  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
 +
* OF THE POSSIBILITY OF SUCH DAMAGE.
 +
*
 +
*/
 +
 +
// t: current time, b: begInnIng value, c: change In value, d: duration
 +
jQuery.easing['jswing'] = jQuery.easing['swing'];
 +
 +
jQuery.extend( jQuery.easing,
 +
{
 +
def: 'easeOutQuad',
 +
swing: function (x, t, b, c, d) {
 +
//alert(jQuery.easing.default);
 +
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
 +
},
 +
easeInQuad: function (x, t, b, c, d) {
 +
return c*(t/=d)*t + b;
 +
},
 +
easeOutQuad: function (x, t, b, c, d) {
 +
return -c *(t/=d)*(t-2) + b;
 +
},
 +
easeInOutQuad: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t + b;
 +
return -c/2 * ((--t)*(t-2) - 1) + b;
 +
},
 +
easeInCubic: function (x, t, b, c, d) {
 +
return c*(t/=d)*t*t + b;
 +
},
 +
easeOutCubic: function (x, t, b, c, d) {
 +
return c*((t=t/d-1)*t*t + 1) + b;
 +
},
 +
easeInOutCubic: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t*t + b;
 +
return c/2*((t-=2)*t*t + 2) + b;
 +
},
 +
easeInQuart: function (x, t, b, c, d) {
 +
return c*(t/=d)*t*t*t + b;
 +
},
 +
easeOutQuart: function (x, t, b, c, d) {
 +
return -c * ((t=t/d-1)*t*t*t - 1) + b;
 +
},
 +
easeInOutQuart: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
 +
return -c/2 * ((t-=2)*t*t*t - 2) + b;
 +
},
 +
easeInQuint: function (x, t, b, c, d) {
 +
return c*(t/=d)*t*t*t*t + b;
 +
},
 +
easeOutQuint: function (x, t, b, c, d) {
 +
return c*((t=t/d-1)*t*t*t*t + 1) + b;
 +
},
 +
easeInOutQuint: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
 +
return c/2*((t-=2)*t*t*t*t + 2) + b;
 +
},
 +
easeInSine: function (x, t, b, c, d) {
 +
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
 +
},
 +
easeOutSine: function (x, t, b, c, d) {
 +
return c * Math.sin(t/d * (Math.PI/2)) + b;
 +
},
 +
easeInOutSine: function (x, t, b, c, d) {
 +
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
 +
},
 +
easeInExpo: function (x, t, b, c, d) {
 +
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
 +
},
 +
easeOutExpo: function (x, t, b, c, d) {
 +
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
 +
},
 +
easeInOutExpo: function (x, t, b, c, d) {
 +
if (t==0) return b;
 +
if (t==d) return b+c;
 +
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
 +
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
 +
},
 +
easeInCirc: function (x, t, b, c, d) {
 +
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
 +
},
 +
easeOutCirc: function (x, t, b, c, d) {
 +
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
 +
},
 +
easeInOutCirc: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
 +
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
 +
},
 +
easeInElastic: function (x, t, b, c, d) {
 +
var s=1.70158;var p=0;var a=c;
 +
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
 +
if (a < Math.abs(c)) { a=c; var s=p/4; }
 +
else var s = p/(2*Math.PI) * Math.asin (c/a);
 +
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 +
},
 +
easeOutElastic: function (x, t, b, c, d) {
 +
var s=1.70158;var p=0;var a=c;
 +
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
 +
if (a < Math.abs(c)) { a=c; var s=p/4; }
 +
else var s = p/(2*Math.PI) * Math.asin (c/a);
 +
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
 +
},
 +
easeInOutElastic: function (x, t, b, c, d) {
 +
var s=1.70158;var p=0;var a=c;
 +
if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
 +
if (a < Math.abs(c)) { a=c; var s=p/4; }
 +
else var s = p/(2*Math.PI) * Math.asin (c/a);
 +
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 +
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
 +
},
 +
easeInBack: function (x, t, b, c, d, s) {
 +
if (s == undefined) s = 1.70158;
 +
return c*(t/=d)*t*((s+1)*t - s) + b;
 +
},
 +
easeOutBack: function (x, t, b, c, d, s) {
 +
if (s == undefined) s = 1.70158;
 +
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
 +
},
 +
easeInOutBack: function (x, t, b, c, d, s) {
 +
if (s == undefined) s = 1.70158;
 +
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
 +
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
 +
},
 +
easeInBounce: function (x, t, b, c, d) {
 +
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
 +
},
 +
easeOutBounce: function (x, t, b, c, d) {
 +
if ((t/=d) < (1/2.75)) {
 +
return c*(7.5625*t*t) + b;
 +
} else if (t < (2/2.75)) {
 +
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
 +
} else if (t < (2.5/2.75)) {
 +
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
 +
} else {
 +
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
 +
}
 +
},
 +
easeInOutBounce: function (x, t, b, c, d) {
 +
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
 +
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
 +
}
 +
});
 +
 +
/*
 +
*
 +
* TERMS OF USE - EASING EQUATIONS
 +
*
 +
* Open source under the BSD License.
 +
*
 +
* Copyright © 2001 Robert Penner
 +
* All rights reserved.
 +
*
 +
* Redistribution and use in source and binary forms, with or without modification,
 +
* are permitted provided that the following conditions are met:
 +
*
 +
* Redistributions of source code must retain the above copyright notice, this list of
 +
* conditions and the following disclaimer.
 +
* Redistributions in binary form must reproduce the above copyright notice, this list
 +
* of conditions and the following disclaimer in the documentation and/or other materials
 +
* provided with the distribution.
 +
*
 +
* Neither the name of the author nor the names of contributors may be used to endorse
 +
* or promote products derived from this software without specific prior written permission.
 +
*
 +
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
 +
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 +
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
 +
*  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 +
*  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
 +
*  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
 +
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 +
*  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
 +
* OF THE POSSIBILITY OF SUCH DAMAGE.
 +
*
 +
*/
 +
</script>
 +
<!--Script to activate dropdown menu function. Uses jQuery syntax.-->
 +
<script type="text/javascript">
 +
$(document).ready(function () {
 +
$(‘.dropdown’).each(function () {
 +
$(this).parent().eq(0).hover(function () {
 +
$(‘.dropdown:eq(0)’, this).show();
 +
}, function () {
 +
$(‘.dropdown:eq(0)’, this).hide();
 +
});
 +
});
 +
});
 +
 +
</script>
 +
<!--Circle effects. jQuery custom functions make all of us happy. ^_^ -->
 +
<script type="text/javascript">
 +
$(document).ready(function(){
 +
 +
jQuery.fn.setcircle = function(){
 +
this.css({
 +
"display":"block",
 +
"position":"absolute",
 +
"margin-left":790,
 +
"margin-top":-250,
 +
});
 +
}
 +
 +
jQuery.fn.resetcircle = function(){
 +
this.hide();
 +
$('#home #circle0').show();
 +
$('#team #circle1').show();
 +
$('#project #circle2').show();
 +
$('#parts #circle3').show();
 +
$('#notebook #circle4').show();
 +
$('#outreach #circle5').show();
 +
$('#sponsors #circle6').show();
 +
}
 +
//homebutton set
 +
$('#homebutton').mouseover(function(){
 +
$('.headercircle').hide();
 +
$('#circle0').show();
 +
$('#circle0').setcircle();
 +
});
 +
$('#homebutton').mouseout(function(){
 +
$('#circle0').resetcircle();
 +
});
 +
 +
//teambutton set
 +
$('#teambutton').mouseover(function(){
 +
$('.headercircle').hide();
 +
$('#circle1').show();
 +
$('#circle1').setcircle();
 +
});
 +
$('#teambutton').mouseout(function(){
 +
$('#circle1').resetcircle();
 +
});
 +
 +
//projectbutton set
 +
$('#projectbutton').mouseover(function(){
 +
$('.headercircle').hide();
 +
$('#circle2').show();
 +
$('#circle2').setcircle();
 +
});
 +
$('#projectbutton').mouseout(function(){
 +
$('#circle2').resetcircle();
 +
});
 +
 +
//partsbutton set
 +
$('#partsbutton').mouseover(function(){
 +
$('.headercircle').hide();
 +
$('#circle3').show();
 +
$('#circle3').setcircle();
 +
});
 +
$('#partsbutton').mouseout(function(){
 +
$('#circle3').resetcircle();
 +
});
 +
 +
//notebookbutton set
 +
$('#notebookbutton').mouseover(function(){
 +
$('.headercircle').hide();
 +
$('#circle4').show();
 +
$('#circle4').setcircle();
 +
});
 +
$('#notebookbutton').mouseout(function(){
 +
$('#circle4').resetcircle();
 +
});
 +
 +
//outreachbutton set
 +
$('#outreachbutton').mouseover(function(){
 +
$('.headercircle').hide();
 +
$('#circle5').show();
 +
$('#circle5').setcircle();
 +
});
 +
$('#outreachbutton').mouseout(function(){
 +
$('#circle5').resetcircle();
 +
});
 +
 +
//sponsorsbutton set
 +
$('#sponsorsbutton').mouseover(function(){
 +
$('.headercircle').hide();
 +
$('#circle6').show();
 +
$('#circle6').setcircle();
 +
});
 +
$('#sponsorsbutton').mouseout(function(){
 +
$('#circle6').resetcircle();
 +
});
 +
 +
//igembutton set
 +
$('#igembutton').mouseover(function(){
 +
$('.headercircle').hide();
 +
$('#circle7').show();
 +
$('#circle7').setcircle();
 +
});
 +
$('#igembutton').mouseout(function(){
 +
$('#circle7').resetcircle();
 +
});
 +
});
 +
</script>
 +
 +
 +
<style>
<style>
 +
/***Master styling of text components, because we like consistency***/
-
h1, h2, h3, h4, h5{
+
h1, h2, h3, h4, h5, p, a{
text-decoration: none;
text-decoration: none;
border: 0;
border: 0;
 +
font-family: Arial;
}
}
-
#titlebar{
+
a{
 +
color: #0063bd;
 +
}
 +
 
 +
#sidetext a, #sidetext p, #sidetext li a{
 +
color: white;
 +
font-family: Arial;
 +
}
 +
 
 +
a, a:visited{
 +
color: #0063bd;
 +
}
 +
 
 +
table tr{
 +
margin-top: 5px;
 +
margin-bottom: 5px;
 +
}
 +
 
 +
table td{
 +
margin-left: 5px;
 +
margin-right: 5px;
 +
}
 +
 
 +
#sponsors table tr td img{
 +
width: 200px;
 +
padding-right: 30px;
 +
padding-left: 10px;
 +
}
 +
 
 +
/***End master styling***/
 +
 
 +
 
 +
/***
 +
Minimal header: removes the search bar and header image and readjusts font colours in the menus.
 +
 
 +
Thanks a lot to the 2011 Brown-Stanford iGEM team for snippets of their code!
 +
Check out their wiki at https://2011.igem.org/Team:Brown-Stanford
 +
***/
 +
 
 +
div#top-section{ /*the div containing the entire top bar*/
 +
height: 20px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
margin-bottom: 0px !important;
 +
margin-top: -14px;
 +
padding:0px 0px 0px 0px;;
 +
border: none;
 +
width: 100%;
 +
background: none;
 +
color: black;
 +
position:absolute;
 +
}
 +
 
 +
#p-logo { /*the header image*/
 +
height:0px;
 +
overflow:hidden;
 +
border:none;
 +
}
 +
 
 +
#content{
 +
margin-top: 14px;
 +
}
 +
 
 +
#search-controls {
 +
overflow:hidden;
 +
display:none;
 +
background: none;
 +
position: absolute;
 +
top: 170px;
 +
right: 40px;
 +
}
 +
 
 +
 
 +
div#header {
 +
width: 975px;
 +
text-align: left;
 +
margin-left: auto;
 +
margin-right: auto;
 +
margin-bottom: 0px !important;
 +
 +
 
 +
#menubar {
 +
position: absolute;
 +
background: none;
 +
color: black;
 +
}
 +
 
 +
.left-menu, .right-menu{
 +
position: absolute;
 +
background: none;
 +
color: white;
 +
}
 +
 
 +
.left-menu li, .right-menu li a {
 +
color: transparent !important;
 +
}
 +
 
 +
 
 +
.left-menu ul li, .right-menu ul li a{
 +
background: none;
 +
color: white;
 +
}
 +
 
 +
.right-menu li a:hover, .right-menu li a:visited, .right-menu li a:active {
 +
    color: white !important;
 +
}
 +
 
 +
/***End minimal header***/
 +
 
 +
 
 +
/***Now for our own stuff: personalized header images and navbar***/
 +
 
 +
#headercontainer{
 +
margin-left: 30px;
 +
}
 +
 
 +
#headerbar{
 +
width: 842px;
 +
height: 48px;
 +
background-image: url(https://static.igem.org/mediawiki/2011/e/ef/UCalgary_HeaderBarNew.png);
 +
position: absolute;
 +
margin-top: -25px;
 +
z-index: 99;
 +
}
 +
 
 +
/*div containing menu bar*/
 +
ul#topnav{
 +
display: table;
 +
margin: 0;
 +
padding: 0;
 +
left: 15px;
 +
top: 15px;
 +
list-style: none;
position: relative;
position: relative;
-
margin-top: 10px;
+
z-index: 100;
-
margin-left: 10px;
+
-
z-index: 1;
+
}
}
-
#pagetitle{
+
ul#topnav a.navtext{
-
position: absolute;
+
position: relative;
-
color: white;
+
display: block;
-
margin-left: 30px;
+
background-position: left top;
-
margin-top: -50px;
+
margin-right: 12px;
-
z-index: 1;
+
margin-left: 12px;
-
}
+
}
-
#bodycontainer{
+
ul#topnav li{
 +
margin: 0;
 +
padding: 0;
 +
list-style: none;
 +
display: table-cell;
 +
float: left;
position: relative;
position: relative;
-
margin-top: -30px;
 
-
margin-left: 10px;
 
-
z-index: 0;
 
}
}
-
#bodycontainer img{
+
ul#topnav li a{
-
z-index: 0;
+
padding: 0;
 +
display: block;
 +
color: #f0f0f0;
 +
text-decoration: none;
}
}
-
#bodyboxtext{
+
ul#topnav li:hover, ul#topnav a:hover{
-
background-image: url(https://static.igem.org/mediawiki/2011/1/1e/UCalgary_BodyBoxRepeater.png);
+
background-position: left bottom;
-
background-repeat: repeat-y;
+
}
-
padding-left: 20px;
+
-
padding-top: 2px;
+
-
padding-bottom: 2px;
+
-
padding-right: 280px;
+
-
float: left;
+
-
z-index: 0;
+
-
}
+
-
#sidebar{
+
/*Subnavigation*/
-
float: right;
+
ul.dropdown{
-
margin-top: -190px;
+
margin: 0;
-
z-index: 1;
+
padding: 0;
 +
padding-bottom: 10px;
 +
padding-top: 7px;
 +
display: block;
 +
position: absolute;
 +
z-index: 999;
 +
width: 200px;
 +
display: none;
 +
left: 0;
 +
/*Background of subnav*/
 +
background-color: #00365E;
 +
opacity: 0.77;
}
}
-
#sidebar img{
+
ul.dropdown li{
-
z-index: 1;
+
margin: 0;
 +
padding: 0;
 +
width: 150px;
 +
float: none;
position: relative;
position: relative;
 +
list-style: none;
 +
display: block;
}
}
-
#sidetitle{
+
ul.dropdown li a{
-
z-index: 1;
+
display: block;
-
color: white;
+
}
-
background-image: url(https://static.igem.org/mediawiki/2011/6/69/UCalgary_SidebarRepeater.png);
+
-
background-repeat: repeat-y;
+
-
position: relative;
+
-
padding-left: 20px;
+
-
padding-right: 20px;
+
-
padding-bottom: 10px;
+
-
margin-top: -7px;
+
-
}
+
-
#sidetext{
 
-
z-index: 1;
 
-
color: white;
 
-
background-image: url(https://static.igem.org/mediawiki/2011/6/69/UCalgary_SidebarRepeater.png);
 
-
background-repeat: repeat-y;
 
-
position: relative;
 
-
width: 238px;
 
-
padding-left: 20px;
 
-
padding-right: 20px;
 
-
padding-top: 2px;
 
-
padding-bottom: 2px;
 
-
margin-top: -12px;
 
-
}
 
-
#sidetext p{
+
/*Establish sprites for each individual button*/
-
padding-right: 35px;
+
#homebutton a{
-
}
+
background-image: url(https://static.igem.org/mediawiki/2011/1/1d/UCalgary_MenuHome.png);
 +
width: 51px;
 +
height: 16px;
 +
}
-
</style>
+
#teambutton a{
-
</head>
+
background-image: url(https://static.igem.org/mediawiki/2011/4/4f/UCalgary_MenuTeam.png);
 +
width: 48px;
 +
height: 16px;
 +
margin-bottom: 17px;
 +
}
-
<body>
+
#projectbutton a{
 +
background-image: url(https://static.igem.org/mediawiki/2011/f/f0/UCalgary_MenuProject.png);
 +
width: 62px;
 +
height: 19px;
 +
margin-bottom: 14px;
 +
}
-
<img id="titlebar" src="https://static.igem.org/mediawiki/2011/4/42/UCalgary_TitleBar.png"></img>
+
#partsbutton a{
-
<h1 id="pagetitle"></html>{{{title|Page Title}}}<html></h1>
+
background-image: url(https://static.igem.org/mediawiki/2011/e/e4/UCalgary_MenuParts.png);
 +
width: 45px;
 +
height: 16px;
 +
margin-bottom: 17px;
 +
}
 +
#notebookbutton a{
 +
background-image: url(https://static.igem.org/mediawiki/2011/8/84/UCalgary_MenuNotebook.png);
 +
width: 84px;
 +
height: 16px;
 +
margin-bottom: 17px;
 +
}
-
<div id="bodycontainer">
+
#outreachbutton a{
-
<img src="https://static.igem.org/mediawiki/2011/e/ed/UCalgary_BodyBoxTop.png"></img>
+
background-image: url(https://static.igem.org/mediawiki/2011/9/96/UCalgary_MenuOutreach.png);
-
<div id="bodyboxtext">
+
width: 80px;
-
<p></html>{{{bodytext|Body text will go here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut placerat iaculis iaculis. Sed tincidunt dignissim tempus. In sem nisi, ultrices sed vehicula a, posuere sed turpis. Nullam venenatis gravida suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam cursus auctor accumsan. Cras augue sapien, bibendum at commodo aliquam, mollis eu erat. Vestibulum in justo ut purus porttitor rhoncus at ac dolor. Integer lacinia risus in sem fringilla lacinia. Fusce varius, dolor vel lobortis aliquam, justo mi vehicula risus, sed tempor dui lectus eget justo. Donec nec odio ante, quis blandit dui.}}}<html></p>
+
height: 17px;
-
</div>
+
margin-bottom: 16px;
 +
}
-
<img src="https://static.igem.org/mediawiki/2011/c/cb/UCalgary_BodyBoxBottom.png"></img>
+
#sponsorsbutton a{
 +
background-image: url(https://static.igem.org/mediawiki/2011/5/51/UCalgary_MenuSponsors.png);
 +
width: 84px;
 +
height: 20px;
 +
margin-bottom: 13px;
 +
}
 +
#igembutton a{
 +
background-image: url(https://static.igem.org/mediawiki/2011/4/49/UCalgary_MenuiGEM.png);
 +
width: 46px;
 +
height: 17px;
 +
margin-bottom: 16px;
 +
}
 +
 +
.navtext{
 +
text-indent: -99999px; /*Shoots all HTML text buttons off the page*/
 +
}
 +
 +
/*Adjusting the subnavigation menu*/
 +
ul#topnav li#teambutton ul li a,
 +
ul#topnav li#projectbutton ul li a,
 +
ul#topnav li#partsbutton ul li a,
 +
ul#topnav li#notebookbutton ul li a,
 +
ul#topnav li#outreachbutton ul li a,
 +
ul#topnav li#sponsorsbutton ul li a{
 +
height: 35px;
 +
background-image: none;
 +
font-family: Arial;
 +
font-size: 17px;
 +
font-weight: 400;
 +
}
 +
 +
ul#topnav li ul li a{
 +
display: inline; /*correction of previous link style*/
 +
background-image: url(https://static.igem.org/mediawiki/2011/6/69/UCalgary_SubNavRepeater.png);
 +
background-repeat: repeat-x;
 +
padding-left: 12px;
 +
padding-right: 12px;
 +
}
 +
 +
/*Rollover settings*/
 +
ul#topnav li:hover ul{
 +
display: block;
 +
z-index: 999;
 +
}
 +
 +
ul#topnav li ul li a:hover{
 +
color: #49f0ff;
 +
}
 +
 +
/*Active state settings*/
 +
#home li#homebutton a,
 +
#team li#teambutton a,
 +
#project li#projectbutton a,
 +
#parts li#partsbutton a,
 +
#notebook li#notebookbutton a,
 +
#outreach li#outreachbutton a,
 +
#sponsors li#sponsorsbutton a{
 +
background-position: left bottom;
 +
}
 +
 +
/*Hide all circles*/
 +
img.headercircle{
 +
display: none;
 +
z-index: 250;
 +
}
 +
 +
/*Active circle showing*/
 +
#home #circle0,
 +
#team #circle1,
 +
#project #circle2,
 +
#parts #circle3,
 +
#notebook #circle4,
 +
#outreach #circle5,
 +
#sponsors #circle6{
 +
display: block;
 +
position: absolute;
 +
margin-left: 790px;
 +
margin-top: -250px;
 +
}
 +
 +
/***End menu stuff. Onto the rest of the header!***/
 +
 +
.firstHeading{
 +
text-indent: -99999px;
 +
}
 +
 +
#headbanner, #headbanner img{
 +
width: 906px;
 +
height: 216px;
 +
z-index: 0;
 +
}
 +
 +
#fb-button{
 +
position: absolute;
 +
margin-left: 872px;
 +
margin-top: -170px;
 +
}
 +
 +
#twitter-button{
 +
position: absolute;
 +
margin-left: 898px;
 +
margin-top: -170px;
 +
}
 +
 +
 +
/*...Not much, was there.*/
 +
 +
 +
</style>
 +
 +
</head>
 +
 +
<body id="</html>{{{1}}}<html>">
 +
 +
<div id="headercontainer">
 +
<div id="headerbar">
 +
<ul id="topnav">
 +
<li id="homebutton"><a class="navtext" href="https://2011.igem.org/Team:Calgary">Home</a></li>
 +
<li id="teambutton">
 +
<a class="navtext" href="https://2011.igem.org/Team:Calgary/Team">Team</a>
 +
<ul class="dropdown">
 +
<li><a href="https://2011.igem.org/Team:Calgary/Team/Biographies">Biographies</a></li>
 +
<li><a href="https://2011.igem.org/Team:Calgary/Team/Facilitators">Facilitators</a></li>
 +
<li><a href="https://2011.igem.org/Team:Calgary/Team/About_The_University">The University</a></li>
 +
<li><a href="http://ung.igem.org/Team.cgi?id=640">Official Profile</a></li>
 +
</ul>
 +
</li>
 +
<li id="projectbutton">
 +
<a class="navtext" href="https://2011.igem.org/Team:Calgary/Project">Project</a>
 +
<ul class="dropdown">
 +
<li><a href="https://2011.igem.org/Team:Calgary/Project">Overview</a></li>
 +
<li><a href="https://2011.igem.org/Team:Calgary/Project/Promoter">Promoter</a></li>
 +
<li><a href="https://2011.igem.org/Team:Calgary/Project/Reporter">Reporter</a></li>
 +
<li><a href="https://2011.igem.org/Team:Calgary/Project/Chassis">Chassis</a></li>
 +
                        <li><a href="https://2011.igem.org/Team:Calgary/Project/DataPage">Data Page</a></li>
 +
                        <li><a href="https://2011.igem.org/Team:Calgary/Project/Acomplishments">Accomplishments</a></li>
 +
<li><a href="https://2011.igem.org/Team:Calgary/Project/Future_Directions">Future Directions</a></li>
 +
<li><a href="https://2011.igem.org/Team:Calgary/Project/References">References</a></li>
 +
</ul>
 +
</li>
 +
<li id="partsbutton">
 +
<a class="navtext" href="https://2011.igem.org/Team:Calgary/Parts">Parts</a>
 +
<ul class="dropdown">
 +
<li><a href="https://2011.igem.org/Team:Calgary/Parts">Parts Submitted</a></li>
 +
<li><a href="https://2011.igem.org/Team:Calgary/Parts/Characterization">Characterization</a></li>
 +
                        <li><a href="https://2011.igem.org/Team:Calgary/Notebook/Attributions">Attributions</a></li>
 +
</ul>
 +
</li>
 +
<li id="notebookbutton">
 +
<a class="navtext" href="https://2011.igem.org/Team:Calgary/Notebook">Notebook</a>
 +
<ul class="dropdown">
 +
<li><a href="https://2011.igem.org/Team:Calgary/Notebook/Calendar">Journal</a></li>
 +
<li><a href="https://2011.igem.org/Team:Calgary/Notebook/Protocols">Protocols</a></li>
 +
<li><a href="https://2011.igem.org/Team:Calgary/Safety">Safety</a></li>
 +
</ul>
 +
</li>
 +
<li id="outreachbutton">
 +
<a class="navtext" href="https://2011.igem.org/Team:Calgary/Outreach">Outreach</a>
 +
<ul class="dropdown">
 +
<li><a href="https://2011.igem.org/Team:Calgary/Outreach/Human">Human Practices</a></li>
 +
<li><a href="https://2011.igem.org/Team:Calgary/Notebook/Conferences">Conferences</a></li>
 +
<li><a href="https://2011.igem.org/Team:Calgary/Outreach/Follow">Follow Us!</a></li>
 +
</ul>
 +
</li>
 +
<li id="sponsorsbutton">
 +
<a class="navtext" href="https://2011.igem.org/Team:Calgary/Sponsors">Sponsors</a>
 +
<ul class="dropdown">
 +
<li><a href="https://2011.igem.org/Team:Calgary/Sponsors">Sponsors</a></li>
 +
<li><a href="https://2011.igem.org/Team:Calgary/Sponsors/Acknowledgements">Acknowledgements</a></li>
 +
</ul>
 +
</li>
 +
<li id="igembutton">
 +
<a class="navtext" href="https://2011.igem.org" target="_blank">iGEM</a>
 +
</li>
 +
 +
</ul>
</div>
</div>
-
<div id="sidebar">
+
<div id="headbanner">
-
<img src="https://static.igem.org/mediawiki/2011/c/cc/UCalgary_SidebarTop.png"></img>
+
<img src="https://static.igem.org/mediawiki/2011/1/1c/UCalgary_HeaderImage2.png"></img>
-
<h2 id="sidetitle"></html>{{{sidetitle|Sidebar}}}<html></h2>
+
<img src="https://static.igem.org/mediawiki/2011/0/04/UCalgary2011_MainPageHeaderImage1.png"></img>
-
<div id="sidetext">
+
<img src="https://static.igem.org/mediawiki/2011/9/93/UCalgary2011_HeaderImage3.png"></img>
-
<p></html>{{{links|Various links will go here (In HTML please and thank you!Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut placerat iaculis iaculis. Sed tincidunt dignissim tempus. In sem nisi, ultrices sed vehicula a, posuere sed turpis. Nullam venenatis gravida suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam cursus auctor accumsan. Cras augue sapien, bibendum at commodo aliquam, mollis eu erat. Vestibulum in justo ut purus porttitor rhoncus at ac dolor. Integer lacinia risus in sem fringilla lacinia. Fusce varius, dolor vel lobortis aliquam, justo mi vehicula risus, sed tempor dui lectus eget justo. Donec nec odio ante, quis blandit dui.)}}}<html></p>
+
<img src="https://static.igem.org/mediawiki/2011/d/d5/UCalgary2011_HeaderImage4.png"></img>
-
</div>
+
<img src="https://static.igem.org/mediawiki/2011/f/f6/UCalgary2011_HeaderImage5.png"></img>
-
<img src="https://static.igem.org/mediawiki/2011/a/a6/UCalgary_SidebarBottom.png"></img>
+
</div>
</div>
 +
<!--Header Image Shuffling-->
 +
<script type="text/javascript">
 +
$(document).ready(function(){
 +
$('#headbanner').cycle({
 +
timeout: 10000
 +
});
 +
});
 +
</script>
 +
<!--Circles-->
 +
<img class="headercircle" id="circle0" src="https://static.igem.org/mediawiki/2011/c/c1/UCalgary_CircleHome.png"></img>
 +
<img class="headercircle" id="circle1" src="https://static.igem.org/mediawiki/2011/d/d4/UCalgary_CircleTeam.png"></img>
 +
<img class="headercircle" id="circle2" src="https://static.igem.org/mediawiki/2011/7/7d/UCalgary_CircleProject.png"></img>
 +
<img class="headercircle" id="circle3" src="https://static.igem.org/mediawiki/2011/8/8d/UCalgary_CircleParts.png"></img>
 +
<img class="headercircle" id="circle4" src="https://static.igem.org/mediawiki/2011/0/03/UCalgary_CircleNotebook.png"></img>
 +
<img class="headercircle" id="circle5" src="https://static.igem.org/mediawiki/2011/8/84/UCalgary_CircleOutreach.png"></img>
 +
<img class="headercircle" id="circle6" src="https://static.igem.org/mediawiki/2011/3/3c/UCalgary_CircleSponsors.png"></img>
 +
<img class="headercircle" id="circle7" src="https://static.igem.org/mediawiki/2011/8/85/UCalgary_CircleiGEM.png"></img>
 +
</div>
</body>
</body>
</html>
</html>

Latest revision as of 02:05, 29 September 2011