Template:UalbertaHeader2
From 2012e.igem.org
(Difference between revisions)
(4 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
<head> | <head> | ||
+ | |||
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz&subset=latin,latin-ext' rel='stylesheet' type='text/css'> | <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz&subset=latin,latin-ext' rel='stylesheet' type='text/css'> | ||
+ | <script type="text/javascript" src="http://www.2createawebsites.com/resources/mikemenuhover.js"></script> | ||
+ | <a href="http://www.2createawebsites.com/"> | ||
+ | <link href='http://fonts.googleapis.com/css?family=Lato|Gentium+Basic' rel='stylesheet' type='text/css' /> | ||
+ | <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" /> | ||
+ | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> | ||
+ | <script src="https://2012e.igem.org/wiki/index.php?title=Team:Alberta/application.js&action=raw&ctype=text/javascript" type="text/javascript"></script> | ||
- | < | + | <img src="http://www.2createawebsites.com/resources/createawebsitelink.gif?" style="display: none;" border="0" height="1" width="1" alt="Create a Website"/></a> |
- | + | ||
- | / | + | <style type="text/css"> |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
#contentSub { | #contentSub { | ||
Line 269: | Line 244: | ||
#nav{float:left;font-family:'Droid Sans',Verdana,Tahoma,sans-serif;text-align:center;} | #nav{float:left;font-family:'Droid Sans',Verdana,Tahoma,sans-serif;text-align:center;} | ||
#nav ul{list-style:none;margin:30px 30px 26px 20px;} | #nav ul{list-style:none;margin:30px 30px 26px 20px;} | ||
- | #nav ul li{background:none!important;display:inline-block;text-align: | + | #nav ul li{background:none!important;display:inline-block;text-align:right;height:auto;line-height:25px;margin-bottom:0;margin-left:20px;position:relative;} |
#nav ul li a{color:#446912;display:block;font-size:12px;padding-top:0;text-transform:uppercase;} | #nav ul li a{color:#446912;display:block;font-size:12px;padding-top:0;text-transform:uppercase;} | ||
#nav ul li a:hover{color:#446912;} | #nav ul li a:hover{color:#446912;} | ||
#nav ul li a.current{color:#446912;} | #nav ul li a.current{color:#446912;} | ||
+ | |||
+ | /* Project Navigation Menu*/ | ||
+ | div#menu-position { top:545px; width:950px; margin-left: 20px; margin-top: 5px; margin-bottom: 40px; background-color:transparent;} | ||
+ | |||
+ | #CrystalMenu { margin: 0; padding: 0; z-index: 30} | ||
+ | #CrystalMenu li { margin: 0; padding: 0; list-style: none; float: left; font: bold 12px Arial} | ||
+ | #CrystalMenu li a { display: block; margin: 0 1px 0 0; padding: 8px 5px; width: 140px; background: #4B8A08; color: #ffffff; text-align: center; text-decoration: none} | ||
+ | #CrystalMenu li a:hover { background: #4B91AA; color: #ffffff} | ||
+ | #CrystalMenu div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #4B91AA;border: 1px solid #ffffff} | ||
+ | #CrystalMenu div a { position: relative; display: block; margin: 0; padding: 5px 10px; width: 118px; white-space: nowrap; text-align: left; text-decoration: none; background: #333399; color: #FFFFFF; font: 12px Arial} | ||
+ | #CrystalMenu div a:hover { background: #4B91AA; color: #FFFFFF} | ||
+ | |||
/* Columns */ | /* Columns */ | ||
- | |||
- | |||
#trio1{float:left;width:10%;} | #trio1{float:left;width:10%;} | ||
#trio2{float:left;width:45%;} | #trio2{float:left;width:45%;} | ||
Line 309: | Line 294: | ||
*:first-child+html .clearfix{min-height:1%;} | *:first-child+html .clearfix{min-height:1%;} | ||
- | + | /* Main wrappers */ | |
- | + | #wrapper1240{margin:20px auto;width:1240px;} | |
- | + | #wrapper960{margin:20px auto;width:960px;} | |
- | + | #wrapper760{margin:20px auto;width:760px;} | |
- | + | #wrapper600{margin:0 auto;width:600px;} | |
- | + | #wrapperfluid{margin:0 auto;max-width:1260px;} | |
+ | #wrapper1240,#wrapper960,#wrapper760,#wrapper600,#wrapperfluid{background:#fff url(https://static.igem.org/mediawiki/2012e/4/4e/Contentbg2.jpg) top left;box-shadow:#111 0 0 20px;} | ||
+ | |||
+ | /* | ||
+ | * jQuery Nivo Slider v3.1 | ||
+ | * http://nivo.dev7studios.com | ||
+ | * | ||
+ | * Copyright 2012, Dev7studios | ||
+ | * Free to use and abuse under the MIT license. | ||
+ | * http://www.opensource.org/licenses/mit-license.php | ||
+ | */ | ||
+ | |||
+ | /* The Nivo Slider styles */ | ||
+ | .nivoSlider { | ||
+ | position:relative; | ||
+ | width:100%; | ||
+ | height:auto; | ||
+ | overflow: hidden; | ||
} | } | ||
- | + | .nivoSlider img { | |
- | . | + | position:absolute; |
- | + | top:0px; | |
- | + | left:0px; | |
- | + | max-width: none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .nivo-main-image { | |
- | + | display: block !important; | |
- | + | position: relative !important; | |
+ | width: 100% !important; | ||
} | } | ||
- | . | + | /* If an image is wrapped in a link */ |
- | + | .nivoSlider a.nivo-imageLink { | |
+ | position:absolute; | ||
+ | top:0px; | ||
+ | left:0px; | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | border:0; | ||
+ | padding:0; | ||
+ | margin:0; | ||
+ | z-index:6; | ||
+ | display:none; | ||
} | } | ||
- | + | /* The slices and boxes in the Slider */ | |
- | + | .nivo-slice { | |
- | + | display:block; | |
+ | position:absolute; | ||
+ | z-index:5; | ||
+ | height:100%; | ||
+ | top:0; | ||
} | } | ||
- | + | .nivo-box { | |
- | + | display:block; | |
- | . | + | position:absolute; |
- | + | z-index:5; | |
- | + | overflow:hidden; | |
} | } | ||
+ | .nivo-box img { display:block; } | ||
- | . | + | /* Caption styles */ |
- | + | .nivo-caption { | |
- | + | position:absolute; | |
- | + | left:0px; | |
+ | bottom:0px; | ||
+ | background:#000; | ||
+ | color:#fff; | ||
+ | width:100%; | ||
+ | z-index:8; | ||
+ | padding: 5px 10px; | ||
+ | opacity: 0.8; | ||
+ | overflow: hidden; | ||
+ | display: none; | ||
+ | -moz-opacity: 0.8; | ||
+ | filter:alpha(opacity=8); | ||
+ | -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ | ||
+ | -moz-box-sizing: border-box; /* Firefox, other Gecko */ | ||
+ | box-sizing: border-box; /* Opera/IE 8+ */ | ||
} | } | ||
- | + | .nivo-caption p { | |
- | . | + | padding:5px; |
- | + | margin:0; | |
+ | } | ||
+ | .nivo-caption a { | ||
+ | display:inline !important; | ||
+ | } | ||
+ | .nivo-html-caption { | ||
+ | display:none; | ||
+ | } | ||
+ | /* Direction nav styles (e.g. Next & Prev) */ | ||
+ | .nivo-directionNav a { | ||
+ | position:absolute; | ||
+ | top:45%; | ||
+ | z-index:9; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | .nivo-prevNav { | ||
+ | left:0px; | ||
+ | } | ||
+ | .nivo-nextNav { | ||
+ | right:0px; | ||
+ | } | ||
+ | /* Control nav styles (e.g. 1,2,3...) */ | ||
+ | .nivo-controlNav { | ||
+ | text-align:center; | ||
+ | padding: 15px 0; | ||
+ | } | ||
+ | .nivo-controlNav a { | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | .nivo-controlNav a.active { | ||
+ | font-weight:bold; | ||
} | } | ||
- | . | + | /* |
- | + | Skin Name: Nivo Slider Default Theme (modified) | |
- | + | Skin URI: http://nivo.dev7studios.com | |
- | + | Skin Type: flexible | |
- | + | Description: The default skin for the Nivo Slider, modified to work with the Inland Forest One template. | |
- | + | Version: 1.2 | |
- | + | Author: Gilbert Pellegrom (modified by Andreas Viklund) | |
- | + | Author URI: http://dev7studios.com | |
- | } | + | */ |
+ | .slider-wrapper .nivoSlider{height:313px;width:1000px;background:#1a1a1a url(https://static.igem.org/mediawiki/2012e/4/42/Loading.gif) no-repeat 50% 50%;margin-bottom:0px;} | ||
+ | .slider-wrapper .nivoSlider img{position:absolute;top:0;left:0;display:none;} | ||
+ | .slider-wrapper .nivoSlider a{border:0;display:block;} | ||
+ | .slider-wrapper .nivo-controlNav{position:absolute;left:50%;top:415px;margin-left:-48px;z-index:9999;/* Tweak this to center bullets */} | ||
+ | .slider-wrapper .nivo-controlNav a{display:block;width:22px;height:22px;background:url(https://static.igem.org/mediawiki/2012e/c/c3/Bullets.png) no-repeat;text-indent:-9999px;border:0;margin-right:3px;float:left;} | ||
+ | .slider-wrapper .nivo-controlNav a.active{background-position:0 -22px;} | ||
+ | .slider-wrapper .nivo-directionNav a{display:block;width:30px;height:30px;background:url(https://static.igem.org/mediawiki/2012e/f/f0/Arrows.png) no-repeat;text-indent:-9999px;border:0;} | ||
+ | .slider-wrapper a.nivo-nextNav{background-position:-30px 0;right:15px;} | ||
+ | .slider-wrapper a.nivo-prevNav{left:15px;} | ||
+ | .slider-wrapper .nivo-caption{font-family:'Lato',Helvetica,Arial,sans-serif;background:rgba(0, 0, 0, 0.2);text-align:center;text-shadow:0 0 4px #111;} | ||
+ | .slider-wrapper .nivo-caption a{color:#fff;border-bottom:1px dotted #fff;} | ||
+ | .slider-wrapper .nivo-caption a:hover{color:#fff;} | ||
- | |||
- | |||
- | |||
</style> | </style> | ||
+ | |||
</head> | </head> | ||
+ | |||
+ | <script type="text/javascript"> | ||
+ | $(window).load(function() { | ||
+ | $('#slider').nivoSlider({ | ||
+ | effect: 'slideInLeft', // Specify sets like: 'fold,fade,sliceDown' | ||
+ | slices: 15, // For slice animations | ||
+ | boxCols: 8, // For box animations | ||
+ | boxRows: 4, // For box animations | ||
+ | animSpeed: 500, // Slide transition speed | ||
+ | pauseTime: 7500, // How long each slide will show | ||
+ | startSlide: 0, // Set starting Slide (0 index) | ||
+ | directionNav: true, // Next & Prev navigation | ||
+ | controlNav: true, // 1,2,3... navigation | ||
+ | controlNavThumbs: false, // Use thumbnails for Control Nav | ||
+ | pauseOnHover: true, // Stop animation while hovering | ||
+ | manualAdvance: false, // Force manual transitions | ||
+ | prevText: 'Prev', // Prev directionNav text | ||
+ | nextText: 'Next', // Next directionNav text | ||
+ | randomStart: false, // Start on a random slide | ||
+ | beforeChange: function(){}, // Triggers before a slide transition | ||
+ | afterChange: function(){}, // Triggers after a slide transition | ||
+ | slideshowEnd: function(){}, // Triggers after all slides have been shown | ||
+ | lastSlide: function(){}, // Triggers when last slide is shown | ||
+ | afterLoad: function(){} // Triggers when slider has loaded | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
<div id="top-spacer"></div> | <div id="top-spacer"></div> | ||
Line 380: | Line 475: | ||
<h1><a href="https://2012e.igem.org/wiki/index.php/Team:Alberta-North-RBI_E">Upcycled Aromatics</a></h1> | <h1><a href="https://2012e.igem.org/wiki/index.php/Team:Alberta-North-RBI_E">Upcycled Aromatics</a></h1> | ||
</div> | </div> | ||
+ | |||
<img src="https://static.igem.org/mediawiki/2012e/0/02/A%2B.png" style="margin:10px;" height="60px"> | <img src="https://static.igem.org/mediawiki/2012e/0/02/A%2B.png" style="margin:10px;" height="60px"> | ||
<a href="https://2012e.igem.org/"><img src="https://static.igem.org/mediawiki/2012e/8/8e/IGemE.png" style="float:right;height:66px;width:100px;margin:20px;"></a> | <a href="https://2012e.igem.org/"><img src="https://static.igem.org/mediawiki/2012e/8/8e/IGemE.png" style="float:right;height:66px;width:100px;margin:20px;"></a> | ||
- | |||
- | |||
- | |||
<div id="nav" class="clearfix"> | <div id="nav" class="clearfix"> | ||
- | + | <ul> | |
- | <li><a href="https://2012e.igem.org/wiki/index.php/Team:Alberta-North-RBI_E">Home</a | + | <li><a href="https://2012e.igem.org/wiki/index.php/Team:Alberta-North-RBI_E">Home</a> |
<li><a href="https://2012e.igem.org/wiki/index.php/Team:Alberta-North-RBI_E/Team">Team</a></li> | <li><a href="https://2012e.igem.org/wiki/index.php/Team:Alberta-North-RBI_E/Team">Team</a></li> | ||
<li><a href="https://2012e.igem.org/wiki/index.php/Team:Alberta-North-RBI_E/Project">Project</a></li> | <li><a href="https://2012e.igem.org/wiki/index.php/Team:Alberta-North-RBI_E/Project">Project</a></li> | ||
<li><a href="https://2012e.igem.org/wiki/index.php/Team:Alberta-North-RBI_E/Business_Plan">Business Plan</a></li> | <li><a href="https://2012e.igem.org/wiki/index.php/Team:Alberta-North-RBI_E/Business_Plan">Business Plan</a></li> | ||
<li><a href="https://2012e.igem.org/wiki/index.php/Team:Alberta-North-RBI_E/Source_Data">Source Data</a></li> | <li><a href="https://2012e.igem.org/wiki/index.php/Team:Alberta-North-RBI_E/Source_Data">Source Data</a></li> | ||
- | + | <li><a href="https://2012e.igem.org/wiki/index.php/Team:Alberta-North-RBI_E/Achievements">Achievements/Attributions</a></li> | |
- | <li><a href="https://2012e.igem.org/wiki/index.php/Team:Alberta-North-RBI_E/Achievements">Achievements</a></li> | + | |
<li><a href="https://2012e.igem.org/wiki/index.php/Team:Alberta-North-RBI_E/Outreach">Outreach</a></li> | <li><a href="https://2012e.igem.org/wiki/index.php/Team:Alberta-North-RBI_E/Outreach">Outreach</a></li> | ||
</ul> | </ul> | ||
Line 400: | Line 492: | ||
</div> | </div> | ||
- | <div class=" | + | <body> |
- | + | <div class="slider-wrapper"> | |
- | </div> | + | <div id="slider" class="nivoSlider"> |
+ | <img src="https://static.igem.org/mediawiki/2012e/b/bd/Slider1.jpg" alt="" /> | ||
+ | <img src="https://static.igem.org/mediawiki/2012e/c/c4/Slider2.jpg" alt="" /> | ||
+ | <img src="https://static.igem.org/mediawiki/2012e/9/99/Slider3.jpg" alt="" /> | ||
+ | <img src="https://static.igem.org/mediawiki/2012e/5/5f/Slider4.jpg" alt="" /> | ||
+ | </div> | ||
+ | </div> | ||
- | + | ||
- | < | + | <script type="text/javascript"> |
+ | $(window).load(function() { | ||
+ | $('#slider').nivoSlider(); | ||
+ | }); | ||
+ | </script> | ||
+ | </body> | ||
+ | <div id="main-content" class="clearfix"> | ||
- | < | + | <div id="menu-position"> |
+ | <ul id="CrystalMenu"> | ||
- | <div | + | <li><a onmouseover="mopen('m1')" onmouseout="mclosetime()">Problem/Opportunity</a> |
+ | <div id="m1" | ||
+ | onmouseover="mcancelclosetime()" | ||
+ | onmouseout="mclosetime()" style="position:absolute;z-index:9999"> | ||
+ | <a href="https://2012e.igem.org/Team:Alberta-North-RBI_E/SpecialtyChemicals">Specialty Chemicals</a> | ||
+ | <a href="https://2012e.igem.org/Team:Alberta-North-RBI_E/CaseStudy"> Case Study</a> | ||
+ | <a href="https://2012e.igem.org/Team:Alberta-North-RBI_E/Biomass"> Biomass Utilization</a> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li><a href="https://2012e.igem.org/Team:Alberta-North-RBI_E/projectsolution" onmouseover="mopen('m2')" onmouseout="mclosetime()">Our Solution</a> | ||
+ | <div id="m2" | ||
+ | onmouseover="mcancelclosetime()" | ||
+ | onmouseout="mclosetime()" style="position:absolute;z-index:9999"> | ||
+ | <a href="https://2012e.igem.org/Team:Alberta-North-RBI_E/process">Process</a> | ||
+ | <a href="https://2012e.igem.org/Team:Alberta-North-RBI_E/genetics">Genetics</a> | ||
+ | </div> | ||
+ | </li> | ||
- | + | ||
- | + | <li><a href="https://2012e.igem.org/Team:Alberta-North-RBI_E/projectlandscape" onmouseover="mopen('m3')" onmouseout="mclosetime()">The Competition</a> | |
- | + | <div id="m3" | |
- | + | onmouseover="mcancelclosetime()" | |
- | + | onmouseout="mclosetime()" style="position:absolute;z-index:9999"> | |
- | + | </div> | |
- | + | </li> | |
- | + | ||
- | + | ||
- | <div | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | </ | + | <li><a href="https://2012e.igem.org/Team:Alberta-North-RBI_E/projectadvantage" onmouseover="mopen('m4')" onmouseout="mclosetime()">Our Advantage</a> |
+ | <div id="m4" | ||
+ | onmouseover="mcancelclosetime()" | ||
+ | onmouseout="mclosetime()" style="position:absolute;z-index:9999"> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li><a onmouseover="mopen('m5')" onmouseout="mclosetime()">Significance</a> | ||
+ | <div id="m5" | ||
+ | onmouseover="mcancelclosetime()" | ||
+ | onmouseout="mclosetime()" style="position:absolute;z-index:9999"> | ||
+ | <a href="https://2012e.igem.org/Team:Alberta-North-RBI_E/environment">Environmental Impact</a> | ||
+ | <a href="https://2012e.igem.org/Team:Alberta-North-RBI_E/social">Social Impact</a> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li><a href="https://2012e.igem.org/Team:Alberta-North-RBI_E/futuredirection" onmouseover="mopen('m3')" onmouseout="mclosetime()">Future Direction</a> | ||
+ | <div id="m6" | ||
+ | onmouseover="mcancelclosetime()" | ||
+ | onmouseout="mclosetime()" style="position:absolute;z-index:9999"> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div id="text-content" class="clearfix"> | ||
+ | |||
</html> | </html> |
Latest revision as of 22:32, 26 October 2012