Team:Cornell/stylesheets/app

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
-
/* --------------------------------------------------
 
-
Table of Contents
 
-
-----------------------------------------------------
 
-
::iGEM Reset
 
-
::Fonts and Icons
 
-
::Shared Styles
 
-
::Header & Footer
 
-
::Homepage
 
-
*/
 
-
/* -----------------------------------------
+
{{:Team:Cornell/templates/header}} <!-- paulirish.com/2008/conditional-stylesheets-vs-css-
-
iGEM Reset
+
hacks-answer-neither/ -->
-
----------------------------------------- */
+
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
-
#globalWrapper {
+
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
-
background-color: transparent;
+
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
-
border: none;
+
<!--[if gt IE 8]><!-->
-
margin: 0;
+
<html class="no-js" lang="en">
-
padding: 0;
+
<!--<![endif]-->
-
width: 100%;
+
<div class="row">
-
height: 100%;
+
<div class="two columns">
-
}
+
<ul class="side-nav">
-
#content {
+
<li>
-
background-color: transparent;
+
<h6>Dry Lab</h6>
-
border: none;
+
</li>
-
padding: 0;
+
<li class="divider"></li>
-
margin: 0;
+
<li class ="active">
-
width: 100%;
+
<a href="https://2012.igem.org/Team:Cornell/project/drylab">How It Works</a>
-
overflow: visible;
+
</li>
-
height: 100%;
+
<li>
-
}
+
<a href="https://2012.igem.org/Team:Cornell/project/drylab/functional_requirements">Functional Requirements</a>
-
#bodyContent {
+
</li>
-
border: none;
+
<li>
-
padding: 0;
+
<a href="https://2012.igem.org/Team:Cornell/project/drylab/components">Components</a>
-
margin: 0;
+
</li>
-
width: 100%;
+
<li>
-
height: 100%;
+
Modeling
-
}
+
<ul>
-
#top-section {
+
<li>
-
height: 15px;
+
<a href="https://2012.igem.org/Team:Cornell/project/drylab/modeling/deployment">Deployment</a>
-
margin: 0px;
+
</li>
-
margin-left: auto;
+
<li>
-
margin-right: auto;
+
<a href="https://2012.igem.org/Team:Cornell/project/drylab/modeling/time_response">Time Response</a>
-
margin-bottom: 0 !important;
+
</li>
-
padding: 0;
+
</ul>
-
border: none;
+
</li>
-
font-size: 10px;
+
<li>
-
}
+
<a href="https://2012.igem.org/Team:Cornell/project/drylab/status">Device Status</a>
-
#p-logo {
+
</li>
-
height: 1px;
+
<li>
-
overflow: hidden;
+
<a href="https://2012.igem.org/Team:Cornell/project/drylab/3dmodel">3D Model</a>
-
display: none;
+
</li>
-
}
+
</ul>
-
#search-controls {
+
</div>
-
overflow: hidden;
+
<div class="ten columns team-bios-container">
-
display: block;
+
<div class="row">
-
background: none;
+
<div class="twelve columns">
-
position: absolute;
+
<h2 class="centered">How It Works</h2>
-
top: 100px;
+
</div>
-
right: 40px;
+
</div>
-
}
+
<div>
-
.left-menu {
+
<b>Scroll over each number to find out more about the components of our device!</b>
-
width: 500px !important;
+
</div>
-
display: block;
+
<div class="row last-ele overflow">
-
margin-top: -80px;
+
<div class="twelve columns centered overflow no-pad" style="position:relative;">
-
border: none;
+
<div class="device-position" style="position:absolute;left:103px;top:98px">
-
text-align: right;
+
<div class="device-hover" >
-
}
+
<div class="device-hover-pic" style="position:absolute;left:-103px;top:-98px">
-
.left-menu ul {
+
<img class="inline" src="https://static.igem.org/mediawiki/2012/d/d3/DeviceParts1.png">
-
border: none;
+
</div>
-
}
+
</div>
-
#menubar.right-menu {
+
<div class="device-desc">
-
display: block;
+
<h5>Inlet</h5>
-
width: 300px;
+
Water flows into our system, providing a sample to test water quality.
-
float: left;
+
</div>
-
margin-top: 2px;
+
</div>
-
margin-right: 0px;
+
<div class="device-position" style="position:absolute;left:253px;top:283px">
-
border: none;
+
<div class="device-hover" >
-
}
+
<img src="https://static.igem.org/mediawiki/2012/9/91/TransBlock.png">
-
.right-menu ul {
+
</div>
-
width: 300px;
+
<div class="device-desc">
-
margin: 0px;
+
<h5>Filter</h5>
-
visibility: hidden;
+
Prevents foreign microbes from entering and contaminating our reactor.
-
}
+
</div>
-
.right-menu ul li a {
+
</div>
-
background: none;
+
<div class="device-position" style="position:absolute;left:333px;top:174px">
-
color: #666;
+
<div class="device-hover" >
-
}
+
<img src="https://static.igem.org/mediawiki/2012/9/91/TransBlock.png">
-
.right-menu:hover ul {
+
</div>
-
visibility: visible;
+
<div class="device-desc">
-
}
+
<h5>Pumps</h5>
-
#footer-box {
+
Move water and food to and from the reactor.
-
width: 100%;
+
</div>
-
margin: -10px auto 0 auto;
+
</div>
-
padding: 20px 0;
+
<div class="device-position" style="position:absolute;left:352px;top:82px">
-
}
+
<div class="device-hover" >
-
.visualClear {
+
<img src="https://static.igem.org/mediawiki/2012/9/91/TransBlock.png">
-
display: none;
+
</div>
-
}
+
<div class="device-desc">
-
#footer {
+
<h5>Piping and Calibration</h5>
-
border: none;
+
Resist corrosion and set flow rates to the optimal level.
-
width: 965px;
+
</div>
-
margin: 0 auto;
+
</div>
-
padding: 0;
+
<div class="device-position" style="position:absolute;left:248px;top:84px">
-
}
+
<div class="device-hover" >
-
.firstHeading {
+
<img src="https://static.igem.org/mediawiki/2012/9/91/TransBlock.png">
-
display: none;
+
</div>
-
}
+
<div class="device-desc">
-
#f-list a {
+
<h5>Reactors</h5>
-
color: #333;
+
House bacteria that produce electrical current in response to toxins.
-
font-size: 10px;
+
</div>
-
}
+
</div>
-
#f-list a:hover {
+
<div class="device-position" style="position:absolute;left:398px;top:299px">
-
color: #666;
+
<div class="device-hover" >
-
}
+
<img src="https://static.igem.org/mediawiki/2012/9/91/TransBlock.png">
-
.printfooter {
+
</div>
-
display: none;
+
<div class="device-desc">
-
}
+
<h5>Food Tanks</h5>
-
#footer ul {
+
Supply our bacteria with lactate to keep them alive.
-
margin: 0;
+
</div>
-
padding: 0;
+
</div>
-
}
+
<div class="device-position" style="position:absolute;left:189px;top:73px">
-
#footer ul li {
+
<div class="device-hover" >
-
margin-top: 0;
+
<img src="https://static.igem.org/mediawiki/2012/9/91/TransBlock.png">
-
margin-bottom: 0;
+
</div>
-
margin-left: 10px;
+
<div class="device-desc">
-
margin-right: 10px;
+
<h5>Electronics</h5>
-
padding: 0;
+
Record bacterial current and transmit data wirelessly to the user.
-
}
+
</div>
-
#search-controls {
+
</div>
-
display: none;
+
<div class="device-position" style="position:absolute;left:359px;top:251px">
-
}
+
<div class="device-hover" >
-
h3#siteSub {
+
<img src="https://static.igem.org/mediawiki/2012/9/91/TransBlock.png">
-
display: none;
+
</div>
-
}
+
<div class="device-desc">
-
#contentSub {
+
<h5>Battery</h5>
-
display: none;
+
Keeps our device running.
-
}
+
</div>
-
p:first-child {
+
</div>
-
display: none;
+
<div class="device-position" style="position:absolute;left:395px;top:6px">
-
}
+
<div class="device-hover" >
-
#catlinks {
+
<img src="https://static.igem.org/mediawiki/2012/9/91/TransBlock.png">
-
display: none;
+
</div>
-
}
+
<div class="device-desc">
-
#footer-box {
+
<h5>Solar Panel</h5>
-
width: 977px;
+
Extends the longevity of our device by providing extra power.
-
margin-bottom: 20px;
+
</div>
-
}
+
</div>
-
 
+
<div class="device-position" style="position:absolute;left:475px;top:230px">
-
/* -----------------------------------------
+
<div class="device-hover" >
-
Fonts and Icons
+
<img src="https://static.igem.org/mediawiki/2012/9/91/TransBlock.png">
-
----------------------------------------- */
+
</div>
-
 
+
<div class="device-desc">
-
@font-face {
+
<h5>Filter</h5>
-
font-family: 'Foro-LightRegular';
+
Prevents our microbes from leaving the device.
-
src: url('https://dl.dropbox.com/u/3824307/iGEM/fonts/forolig-webfont.eot');
+
</div>
-
src: url('https://dl.dropbox.com/u/3824307/iGEM/fonts/forolig-webfont.eot?#iefix') format('embedded-opentype'), url('https://dl.dropbox.com/u/3824307/iGEM/fonts/forolig-webfont.woff') format('woff'), url('https://dl.dropbox.com/u/3824307/iGEM/fonts/forolig-webfont.ttf') format('truetype'), url('https://dl.dropbox.com/u/3824307/iGEM/fonts/forolig-webfont.svg#Foro-LightRegular') format('svg');
+
</div>
-
font-weight: normal;
+
<div class="device-position" style="position:absolute;left:522px;top:112px">
-
font-style: normal;
+
<div class="device-hover" >
-
}
+
<img src="https://static.igem.org/mediawiki/2012/9/91/TransBlock.png">
-
 
+
</div>
-
@font-face {
+
<div class="device-desc">
-
font-family: 'Droid Sans';
+
<h5>Outlet</h5>
-
font-style: normal;
+
Water flows back to the source.
-
font-weight: 400;
+
</div>
-
src: local('Droid Sans'), local('DroidSans'), url(http://themes.googleusercontent.com/static/fonts/droidsans/v3/s-BiyweUPV0v-yRb-cjciBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
+
</div>
-
}
+
<div class="device-position" style="position:absolute;left:543px;top:323px">
-
 
+
<div class="device-hover" >
-
@font-face {
+
<img src="https://static.igem.org/mediawiki/2012/9/91/TransBlock.png">
-
font-family: 'Droid Sans';
+
</div>
-
font-style: normal;
+
<div class="device-desc">
-
font-weight: 700;
+
<h5>Support</h5>
-
src: local('Droid Sans Bold'), local('DroidSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/droidsans/v3/EFpQQyG9GqCrobXxL-KRMQFhaRv2pGgT5Kf0An0s4MM.woff) format('woff');
+
Keeps the device safe from weather, rocks, and, of course, bears.
-
}
+
</div>
-
/* -----------------------------------------
+
</div>
-
Lightbox
+
<div class="device-position" style="position:absolute;left:651px;top:42px">
-
----------------------------------------- */
+
<div class="device-hover" >
-
/* line 6, ../sass/lightbox.sass */
+
<img src="https://static.igem.org/mediawiki/2012/9/91/TransBlock.png">
-
#lightboxOverlay {
+
</div>
-
position: absolute;
+
<div class="device-desc">
-
top: 0;
+
<h5>The Full Device</h5>
-
left: 0;
+
In all of its glory.
-
z-index: 9999;
+
</div>
-
background-color: black;
+
</div>
-
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
+
<!-- <div class="device-position" style="position:absolute;left:103px;top:98px;z-index:6">
-
opacity: 0.85;
+
<div class="device-hover" >
-
display: none;
+
<div class="device-hover-pic" style="position:absolute;left:-103px;top:-98px">
-
}
+
<img class="inline" src="https://static.igem.org/mediawiki/2012/d/d3/DeviceParts1.png">
-
 
+
</div>
-
/* line 15, ../sass/lightbox.sass */
+
</div>
-
#lightbox {
+
<div class="device-desc">
-
position: absolute;
+
<h5>Inlet</h5>
-
left: 0;
+
Water flows into our system, providing a sample to test water quality.
-
width: 100%;
+
</div>
-
z-index: 10000;
+
</div>
-
text-align: center;
+
<div class="device-position" style="position:absolute;left:253px;top:283px;z-index:11">
-
line-height: 0;
+
<div class="device-hover" >
-
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
+
<img src="https://static.igem.org/mediawiki/2012/9/91/TransBlock.png">
-
font-weight: normal;
+
</div>
-
}
+
<div class="device-desc">
-
/* line 24, ../sass/lightbox.sass */
+
<h5>Filter</h5>
-
#lightbox img {
+
Prevents foreign microbes from entering and contaminating our reactor.
-
width: auto;
+
</div>
-
height: auto;
+
</div>
-
}
+
<div class="device-position" style="position:absolute;left:333px;top:174px;z-index:8">
-
/* line 27, ../sass/lightbox.sass */
+
<div class="device-hover" >
-
#lightbox a img {
+
<img src="https://static.igem.org/mediawiki/2012/9/91/TransBlock.png">
-
border: none;
+
</div>
-
}
+
<div class="device-desc">
-
 
+
<h5>Pumps</h5>
-
/* line 30, ../sass/lightbox.sass */
+
Move water and food to and from the reactor.
-
.lb-outerContainer {
+
</div>
-
position: relative;
+
</div>
-
background-color: white;
+
<div class="device-position" style="position:absolute;left:352px;top:82px;z-index:4">
-
*zoom: 1;
+
<div class="device-hover" >
-
width: 250px;
+
<img src="https://static.igem.org/mediawiki/2012/9/91/TransBlock.png">
-
height: 250px;
+
</div>
-
margin: 0 auto;
+
<div class="device-desc">
-
-webkit-border-radius: 4px;
+
<h5>Piping and Calibration</h5>
-
-moz-border-radius: 4px;
+
Resist corrosion and set flow rates to the optimal level.
-
-ms-border-radius: 4px;
+
</div>
-
-o-border-radius: 4px;
+
</div>
-
border-radius: 4px;
+
<div class="device-position" style="position:absolute;left:248px;top:84px;z-index:5">
-
}
+
<div class="device-hover" >
-
/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
+
<img src="https://static.igem.org/mediawiki/2012/9/91/TransBlock.png">
-
.lb-outerContainer:after {
+
</div>
-
content: "";
+
<div class="device-desc">
-
display: table;
+
<h5>Reactors</h5>
-
clear: both;
+
House bacteria that produce electrical current in response to toxins.
-
}
+
</div>
-
 
+
</div>
-
/* line 39, ../sass/lightbox.sass */
+
<div class="device-position" style="position:absolute;left:398px;top:299px;z-index:12">
-
.lb-container {
+
<div class="device-hover" >
-
padding: 10px;
+
<img src="https://static.igem.org/mediawiki/2012/9/91/TransBlock.png">
-
}
+
</div>
-
 
+
<div class="device-desc">
-
/* line 42, ../sass/lightbox.sass */
+
<h5>Food Tanks</h5>
-
.lb-loader {
+
Supply our bacteria with lactate to keep them alive.
-
position: absolute;
+
</div>
-
top: 40%;
+
</div>
-
left: 0%;
+
<div class="device-position" style="position:absolute;left:189px;top:73px;z-index:3">
-
height: 25%;
+
<div class="device-hover" >
-
width: 100%;
+
<img src="https://static.igem.org/mediawiki/2012/9/91/TransBlock.png">
-
text-align: center;
+
</div>
-
line-height: 0;
+
<div class="device-desc">
-
}
+
<h5>Electronics</h5>
-
 
+
Record bacterial current and transmit data wirelessly to the user.
-
/* line 51, ../sass/lightbox.sass */
+
</div>
-
.lb-nav {
+
</div>
-
position: absolute;
+
<div class="device-position" style="position:absolute;left:359px;top:251px;z-index:10">
-
top: 0;
+
<div class="device-hover" >
-
left: 0;
+
<img src="https://static.igem.org/mediawiki/2012/9/91/TransBlock.png">
-
height: 100%;
+
</div>
-
width: 100%;
+
<div class="device-desc">
-
z-index: 10;
+
<h5>Battery</h5>
-
}
+
Keeps our device running.
-
 
+
</div>
-
/* line 59, ../sass/lightbox.sass */
+
</div>
-
.lb-container > .nav {
+
<div class="device-position" style="position:absolute;left:395px;top:6px;z-index:1">
-
left: 0;
+
<div class="device-hover" >
-
}
+
<img src="https://static.igem.org/mediawiki/2012/9/91/TransBlock.png">
-
 
+
</div>
-
/* line 62, ../sass/lightbox.sass */
+
<div class="device-desc">
-
.lb-nav a {
+
<h5>Solar Panel</h5>
-
outline: none;
+
Extends the longevity of our device by providing extra power.
-
}
+
</div>
-
 
+
</div>
-
/* line 65, ../sass/lightbox.sass */
+
<div class="device-position" style="position:absolute;left:475px;top:230px;z-index:9">
-
.lb-prev, .lb-next {
+
<div class="device-hover" >
-
width: 49%;
+
<img src="https://static.igem.org/mediawiki/2012/9/91/TransBlock.png">
-
height: 100%;
+
</div>
-
background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
+
<div class="device-desc">
-
/* Trick IE into showing hover */
+
<h5>Filter</h5>
-
display: block;
+
Prevents our microbes from leaving the device.
-
}
+
</div>
-
 
+
</div>
-
/* line 72, ../sass/lightbox.sass */
+
<div class="device-position" style="position:absolute;left:522px;top:112px;z-index:7">
-
.lb-prev {
+
<div class="device-hover" >
-
left: 0;
+
<img src="https://static.igem.org/mediawiki/2012/9/91/TransBlock.png">
-
float: left;
+
</div>
-
}
+
<div class="device-desc">
-
 
+
<h5>Outlet</h5>
-
/* line 76, ../sass/lightbox.sass */
+
Water flows back to the source.
-
.lb-next {
+
</div>
-
right: 0;
+
</div>
-
float: right;
+
<div class="device-position" style="position:absolute;left:543px;top:323px;z-index:13">
-
}
+
<div class="device-hover" >
-
 
+
<img src="https://static.igem.org/mediawiki/2012/9/91/TransBlock.png">
-
/* line 81, ../sass/lightbox.sass */
+
</div>
-
.lb-prev:hover {
+
<div class="device-desc">
-
background: url(https://static.igem.org/mediawiki/2012/3/33/Ucl2012-lightbox-Prev.png) left 48% no-repeat;
+
<h5>Support</h5>
-
}
+
Keeps the device safe from weather, rocks, and, of course, bears.
-
 
+
</div>
-
/* line 85, ../sass/lightbox.sass */
+
</div>
-
.lb-next:hover {
+
<div class="device-position" style="position:absolute;left:651px;top:42px;z-index:2">
-
background: url(https://static.igem.org/mediawiki/2012/4/4c/Ucl2012-lightbox-Next.png) right 48% no-repeat;
+
<div class="device-hover" >
-
}
+
<img src="https://static.igem.org/mediawiki/2012/9/91/TransBlock.png">
-
 
+
</div>
-
/* line 88, ../sass/lightbox.sass */
+
<div class="device-desc">
-
.lb-dataContainer {
+
<h5>The Full Device</h5>
-
margin: 0 auto;
+
In all of its glory.
-
padding-top: 5px;
+
</div>
-
*zoom: 1;
+
</div>
-
width: 100%;
+
--> <span id="device1" style="position:absolute;left:0;top:0;width:783;height:489;opacity:0;-webkit-transition:opacity 0.5s"></span>
-
-moz-border-radius-bottomleft: 4px;
+
<img class="inline stacked" id="device1" src="https://static.igem.org/mediawiki/2012/d/d3/DeviceParts1.png" style="margin:0px">
-
-webkit-border-bottom-left-radius: 4px;
+
<!-- <img class="inline stacked" id="device1" src="https://static.igem.org/mediawiki/igem.org/4/48/DeviceParts2.png" style="margin:0px">
-
-ms-border-bottom-left-radius: 4px;
+
<img class="inline stacked" id="device1" src="https://static.igem.org/mediawiki/igem.org/8/8e/DeviceParts3.png" style="margin:0px">
-
-o-border-bottom-left-radius: 4px;
+
<img class="inline stacked" id="device1" src="https://static.igem.org/mediawiki/igem.org/d/d4/DeviceParts4.png" style="margin:0px">
-
border-bottom-left-radius: 4px;
+
<img class="inline stacked" id="device1" src="https://static.igem.org/mediawiki/igem.org/d/d3/DeviceParts5.png" style="margin:0px">
-
-moz-border-radius-bottomright: 4px;
+
<img class="inline stacked" id="device1" src="https://static.igem.org/mediawiki/igem.org/a/a7/DeviceParts6.png" style="margin:0px">
-
-webkit-border-bottom-right-radius: 4px;
+
<img class="inline stacked" id="device1" src="https://static.igem.org/mediawiki/igem.org/8/85/DeviceParts7.png" style="margin:0px">
-
-ms-border-bottom-right-radius: 4px;
+
<img class="inline stacked" id="device1" src="https://static.igem.org/mediawiki/igem.org/8/8f/DeviceParts8.png" style="margin:0px">
-
-o-border-bottom-right-radius: 4px;
+
<img class="inline stacked" id="device1" src="https://static.igem.org/mediawiki/igem.org/a/a3/DeviceParts9.png" style="margin:0px">
-
border-bottom-right-radius: 4px;
+
<img class="inline stacked" id="device1" src="https://static.igem.org/mediawiki/igem.org/e/ee/DeviceParts10.png" style="margin:0px">
-
}
+
<img class="inline stacked" id="device1" src="https://static.igem.org/mediawiki/igem.org/d/d1/DeviceParts11.png" style="margin:0px">
-
/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
+
<img class="inline stacked" id="device1" src="https://static.igem.org/mediawiki/igem.org/d/df/DeviceParts12.png" style="margin:0px">
-
.lb-dataContainer:after {
+
<img class="inline stacked" id="device1" src="https://static.igem.org/mediawiki/igem.org/9/97/DeviceParts13.png" style="margin:0px">
-
content: "";
+
--> <img class="inline" src="https://static.igem.org/mediawiki/2012/5/5d/DeviceParts0.png" style="margin:0px">
-
display: table;
+
</div>
-
clear: both;
+
</div>
-
}
+
<!-- <div class="row last-ele overflow">
-
 
+
<div class="twelve columns centered overflow no-pad" style="position:relative;">
-
/* line 95, ../sass/lightbox.sass */
+
<img class="inline" ismap="ismap" usemap="#devicemap" src="https://static.igem.org/mediawiki/2012/5/5d/DeviceParts0.png" style="margin:0px">
-
.lb-data {
+
<map name="devicemap">
-
padding: 0 10px;
+
<area id="device1" shape="circle" coords="126,127,23" href="">
-
color: #bbbbbb;
+
<area id="device2" shape="circle" coords="276,310,23" href="">
-
}
+
<area id="device3" shape="circle" coords="356,201,23" href="">
-
/* line 98, ../sass/lightbox.sass */
+
<area id="device4" shape="circle" coords="375,109,23" href="">
-
.lb-data .lb-details {
+
<area id="device5" shape="circle" coords="271,111,23" href="">
-
width: 85%;
+
<area id="device6" shape="circle" coords="421,326,23" href="">
-
float: left;
+
<area id="device7" shape="circle" coords="212,100,23" href="">
-
text-align: left;
+
<area id="device8" shape="circle" coords="382,278,23" href="">
-
line-height: 1.1em;
+
<area id="device9" shape="circle" coords="418,33,23" href="">
-
}
+
<area id="device10" shape="circle" coords="498,257,23" href="">
-
/* line 103, ../sass/lightbox.sass */
+
<area id="device11" shape="circle" coords="545,139,23" href="">
-
.lb-data .lb-caption {
+
<area id="device12" shape="circle" coords="566,350,23" href="">
-
font-size: 13px;
+
<area id="device13" shape="circle" coords="674,69,23" href="">
-
font-weight: bold;
+
</map>
-
line-height: 1em;
+
<ul id="deviceOver">
-
}
+
<li id="device1"><a>1</a></li>
-
/* line 107, ../sass/lightbox.sass */
+
<li id="device2"><a>2</a></li>
-
.lb-data .lb-number {
+
<li id="device3"><a>3</a></li>
-
display: block;
+
<li id="device4"><a>4</a></li>
-
clear: left;
+
<li id="device5"><a>5</a></li>
-
padding-bottom: 1em;
+
<li id="device6"><a>6</a></li>
-
font-size: 11px;
+
<li id="device7"><a>7</a></li>
-
}
+
<li id="device8"><a>8</a></li>
-
/* line 112, ../sass/lightbox.sass */
+
<li id="device9"><a>9</a></li>
-
.lb-data .lb-close {
+
<li id="device10"><a>10</a></li>
-
width: 35px;
+
<li id="device11"><a>11</a></li>
-
float: right;
+
<li id="device12"><a>12</a></li>
-
padding-bottom: 0.7em;
+
<li id="device13"><a>13</a></li>
-
outline: none;
+
</ul>
-
}
+
--> </div>
-
/* line 117, ../sass/lightbox.sass */
+
</div>
-
.lb-data .lb-close:hover {
+
<!-- <div class="ten columns centered">
-
cursor: pointer;
+
<div id="homepage-slideshow">
-
}
+
<img class="inline" src="https://static.igem.org/mediawiki/2012/5/5d/DeviceParts0.png">
-
 
+
<img class="inline" src="https://static.igem.org/mediawiki/2012/d/d3/DeviceParts1.png">
-
/* -----------------------------------------
+
<img class="inline" src="https://static.igem.org/mediawiki/igem.org/4/48/DeviceParts2.png">
-
Shared Styles
+
<img class="inline" src="https://static.igem.org/mediawiki/igem.org/8/8e/DeviceParts3.png">
-
----------------------------------------- */
+
<img class="inline" src="https://static.igem.org/mediawiki/igem.org/d/d4/DeviceParts4.png">
-
 
+
<img class="inline" src="https://static.igem.org/mediawiki/igem.org/d/d3/DeviceParts5.png">
-
body {
+
<img class="inline" src="https://static.igem.org/mediawiki/igem.org/a/a7/DeviceParts6.png">
-
background: #f2f2f2;
+
<img class="inline" src="https://static.igem.org/mediawiki/igem.org/8/85/DeviceParts7.png">
-
font-family: 'Droid Sans', Helvetica, sans-serif;
+
<img class="inline" src="https://static.igem.org/mediawiki/igem.org/8/8f/DeviceParts8.png">
-
font-size: 15px;
+
<img class="inline" src="https://static.igem.org/mediawiki/igem.org/a/a3/DeviceParts9.png">
-
line-height: 23px;
+
<img class="inline" src="https://static.igem.org/mediawiki/igem.org/e/ee/DeviceParts10.png">
-
}
+
<img class="inline" src="https://static.igem.org/mediawiki/igem.org/d/d1/DeviceParts11.png">
-
 
+
<img class="inline" src="https://static.igem.org/mediawiki/igem.org/d/df/DeviceParts12.png">
-
h1, h2, h3, h4, h5, h6 {
+
<img class="inline" src="https://static.igem.org/mediawiki/igem.org/9/97/DeviceParts13.png">
-
font-family: 'Foro-LightRegular', serif;
+
</div>
-
color: #000;
+
</div> -->
-
border-bottom: none;
+
</div>
-
margin-bottom: none;
+
</div>
-
}
+
<script src="https://2012.igem.org/Team:Cornell/javascripts/foundation.min?action=raw&amp;ctype=text/javascript"></script>
-
 
+
<script src="https://2012.igem.org/Team:Cornell/javascripts/app?action=raw&amp;ctype=text/javascript"></script>
-
h1.centered, h2.centered, h3.centered, h4.centered, h5.centered, h6.centered {
+
<script src="https://2012.igem.org/Team:Cornell/javascripts/lightbox?action=raw&amp;ctype=text/javascript"></script>
-
text-align: center;
+
<script type="text/javascript">
-
}
+
$(window).load(function() {
-
 
+
$('li.pg-project_drylab').addClass('active');
-
div.clearfix {
+
});
-
content: ".";
+
</script>
-
display: block;
+
</body>
-
clear: both;
+
</html>
-
visibility: hidden;
+
-
line-height: 0;
+
-
height: 0;
+
-
}
+
-
 
+
-
div.twelve.columns.no-pad {
+
-
padding: 0px;
+
-
}
+
-
 
+
-
.off-canvas {
+
-
width: 100%;
+
-
}
+
-
 
+
-
a, a:visited {
+
-
color: #b31b1b;
+
-
text-decoration: none;
+
-
}
+
-
 
+
-
a:hover {
+
-
color: #871414;
+
-
text-decoration: none;
+
-
}
+
-
 
+
-
.button {
+
-
background: #b31b1b;
+
-
border: 1px solid #691010;
+
-
color: #fff;
+
-
}
+
-
 
+
-
a.button, a.button:hover {
+
-
color: #fff;
+
-
}
+
-
 
+
-
.button:hover {
+
-
background-color: #871414;
+
-
}
+
-
 
+
-
.button:focus {
+
-
-webkit-box-shadow: 0 0 4px #b31b1b, 0 1px 0 rgba(255,255,255,0.5) inset;
+
-
-moz-box-shadow: 0 0 4px #b31b1b, 0 1px 0 rgba(255,255,255,0.5) inset;
+
-
box-shadow: 0 0 4px #b31b1b, 0 1px 0 rgba(255,255,255,0.5) inset;
+
-
}
+
-
 
+
-
.nav-bar {
+
-
background: #b31b1b;
+
-
}
+
-
 
+
-
.nav-bar > li {
+
-
border: 1px solid #871414;
+
-
}
+
-
 
+
-
.nav-bar > li:last-child {
+
-
border-right: solid 1px #871414;
+
-
}
+
-
 
+
-
.nav-bar > li.active {
+
-
background: #4c0b0b;
+
-
border-color: #4c0b0b;
+
-
}
+
-
 
+
-
.nav-bar > li.active:hover {
+
-
background: #4c0b0b;
+
-
}
+
-
 
+
-
.nav-bar > li:hover {
+
-
background: #871414;
+
-
}
+
-
 
+
-
.nav-bar a {
+
-
color: #f2f2f2;
+
-
}
+
-
 
+
-
ul.side-nav li.divider {
+
-
border-top: 1px solid #ddd;
+
-
}
+
-
 
+
-
dl.tabs.pill dd a {
+
-
background: #ddd;
+
-
color: #000;
+
-
}
+
-
 
+
-
dl.tabs.pill dd.active a {
+
-
background-color: #b31b1b;
+
-
color: #e6e6e6;
+
-
}
+
-
 
+
-
iframe.slides {
+
-
width: 577px;
+
-
height: 476px;
+
-
margin: 5px auto;
+
-
}
+
-
/* -----------------------------------------
+
-
Header & Footer
+
-
----------------------------------------- */
+
-
 
+
-
div.row.header {
+
-
background: #b31b1b;
+
-
margin: 0px auto 40px;
+
-
}
+
-
 
+
-
div#header-wrapper {
+
-
width: 940px;
+
-
margin: 0px auto;
+
-
}
+
-
 
+
-
div#logo-wrapper {
+
-
position: absolute;
+
-
top: -20px;
+
-
left: 0px;
+
-
background: green;
+
-
border: 10px solid #b31b1b;
+
-
height: 80px;
+
-
}
+
-
 
+
-
div#logo-wrapper img {
+
-
height: 60px;
+
-
}
+
-
 
+
-
div#igem-attr {
+
-
position: absolute;
+
-
top: -12px;
+
-
left: 147px;
+
-
height: 60px;
+
-
transition: transform 0.5s;
+
-
-moz-transition: -moz-transform 0.5s; /* Firefox 4 */
+
-
-webkit-transition: -webkit-transform 0.5s; /* Safari and Chrome */
+
-
-o-transition: -o-transform 0.5s; /* Opera */
+
-
}
+
-
 
+
-
div#igem-attr:hover {
+
-
transform: rotate(-15deg);
+
-
-ms-transform: rotate(-15deg); /* IE 9 */
+
-
-webkit-transform: rotate(-15deg); /* Safari and Chrome */
+
-
-o-transform: rotate(-15deg); /* Opera */
+
-
-moz-transform: rotate(-15deg); /* Firefox */
+
-
}
+
-
 
+
-
div#igem-attr img {
+
-
height: 60px;
+
-
}
+
-
 
+
-
div#header-wrapper .nav-bar {
+
-
float: right;
+
-
margin: 0px;
+
-
}
+
-
 
+
-
div.main-image > div {
+
-
padding: 0px;
+
-
}
+
-
 
+
-
a.gallery-button {
+
-
position: absolute;
+
-
right: 20px;
+
-
bottom: 10px;
+
-
}
+
-
 
+
-
div.missing {
+
-
margin: auto;
+
-
position: relative;
+
-
top: 50%;
+
-
width: 193px;
+
-
}
+
-
div.missing a {
+
-
height: 63px;
+
-
position: relative;
+
-
top: -31px;
+
-
}
+
-
div.missing img {
+
-
border-width: 0px;
+
-
}
+
-
div#unityPlayer {
+
-
cursor: default;
+
-
height: 600px;
+
-
width: 960px;
+
-
}
+
-
 
+
-
/* -----------------------------------------
+
-
Home Page
+
-
----------------------------------------- */
+
-
 
+
-
div#homepage-slideshow {
+
-
margin-bottom: 30px;
+
-
}
+
-
 
+
-
div.homepage-section {
+
-
padding: 10px;
+
-
}
+
-
 
+
-
div.homepage-force {
+
-
height: 174px;
+
-
}
+
-
 
+
-
div.controls {
+
-
position: absolute;
+
-
bottom: 0px;
+
-
}
+
-
 
+
-
div.controls a.button {
+
-
float: right;
+
-
}
+
-
 
+
-
div.homepage-section.tl {
+
-
border-bottom: 1px solid #ddd;
+
-
border-right: 1px solid #ddd;
+
-
padding-top: 0px;
+
-
padding-left: 0px;
+
-
}
+
-
 
+
-
div.homepage-section.tr {
+
-
border-bottom: 1px solid #ddd;
+
-
padding-top: 0px;
+
-
padding-right: 0px;
+
-
}
+
-
 
+
-
div.homepage-section.bl {
+
-
border-right: 1px solid #ddd;
+
-
padding-bottom: 0px;
+
-
padding-left: 0px;
+
-
}
+
-
 
+
-
div.homepage-section.br {
+
-
padding-bottom: 0px;
+
-
padding-right: 0px;
+
-
}
+
-
 
+
-
div.homepage-thumb {
+
-
margin-bottom: -6px;
+
-
}
+
-
 
+
-
div.sponsors-wrapper {
+
-
margin-top: 20px;
+
-
}
+
-
 
+
-
div.sponsors-wrapper ul {
+
-
padding: 5px 0px;
+
-
}
+
-
 
+
-
div.sponsors-wrapper ul li {
+
-
padding: 5px 10px;
+
-
display: inline-block;
+
-
list-style: none;
+
-
}
+
-
 
+
-
div.sponsors-wrapper ul li img {
+
-
height: 105px;
+
-
display: block;
+
-
margin: 5px auto;
+
-
}
+
-
 
+
-
/* -----------------------------------------
+
-
Team Page
+
-
----------------------------------------- */
+
-
 
+
-
div.team-bios-container div.row {
+
-
padding: 0px 0px 10px;
+
-
border-bottom: 1px solid #ddd;
+
-
}
+
-
 
+
-
div.team-bios-container div.last-ele {
+
-
border-bottom: none;
+
-
}
+
-
 
+
-
div.team-bios-container img {
+
-
max-height: 166px;
+
-
margin: 29px 0px;
+
-
}
+
-
 
+
-
div.team-bios-container img.inline {
+
-
max-height: none;
+
-
}
+
-
 
+
-
div#grd-members, div#fac-members {
+
-
margin-top: 80px;
+
-
}
+
-
 
+
-
div.bio-pic-container {
+
-
position: relative;
+
-
margin: 29px 0px;
+
-
height: 166px;
+
-
}
+
-
 
+
-
div.bio-pic-container img {
+
-
position: absolute;
+
-
margin: 0px;
+
-
top: 0px;
+
-
z-index: 2;
+
-
}
+
-
 
+
-
div.bio-pic-container img.bio-pic-bw {
+
-
z-index: 5;
+
-
}
+
-
/* -----------------------------------------
+
-
Notebook Page
+
-
----------------------------------------- */
+
-
 
+
-
ul.side-nav h6 {
+
-
margin: 47px 0px 0px;
+
-
}
+
-
 
+
-
ul.side-nav.ntbk-nav h6 {
+
-
margin: 87px 0px 0px;
+
-
}
+
-
 
+
-
table.check-off img {
+
-
height: 20px;
+
-
width: 20px;
+
-
margin: auto;
+
-
}
+
-
 
+
-
/* -----------------------------------------
+
-
Gallery Page
+
-
----------------------------------------- */
+
-
 
+
-
div.main-gallery ul {
+
-
list-style: none;
+
-
}
+
-
 
+
-
div.main-gallery ul li {
+
-
display: inline-block;
+
-
margin: 0px 5px;
+
-
}
+
-
 
+
-
div.main-gallery ul li img {
+
-
height: 80px;
+
-
margin: 0px;
+
-
}
+
-
 
+
-
/* -----------------------------------------
+
-
Functional Requirement Hover-overs
+
-
----------------------------------------- */
+
-
 
+
-
div.overflow {
+
-
overflow: visible;
+
-
}
+
-
 
+
-
div.func-req-position {
+
-
position: absolute;
+
-
background: #e2e2e2;
+
-
border-radius: 300px;
+
-
width: 100px;
+
-
height: 100px;
+
-
background: #f2f2f2;
+
-
color: white;
+
-
opacity: 1;
+
-
}
+
-
 
+
-
div.func-req-hover {
+
-
width: 100px;
+
-
border-radius: 300px;
+
-
}
+
-
 
+
-
div.func-req-hover img {
+
-
height: 100px;
+
-
margin-top: -4px;
+
-
opacity: 0.5;
+
-
-webkit-transition: opacity 0.75s;
+
-
}
+
-
 
+
-
div.func-req-hover:hover img {
+
-
opacity: 1;
+
-
-webkit-transition: opacity 0.75s;
+
-
}
+
-
 
+
-
div.func-req-desc {
+
-
position: absolute;
+
-
left: -75px;
+
-
top: 100px;
+
-
width: 250px;
+
-
padding: 7px;
+
-
background: #1A1A1A;
+
-
border-radius: 5px;
+
-
color: white;
+
-
opacity: 0;
+
-
-webkit-transition: opacity 0.75s;
+
-
}
+
-
 
+
-
div.func-req-hover:hover + div.func-req-desc {
+
-
opacity: 1;
+
-
-webkit-transition: opacity 0.75s;
+
-
}
+
-
 
+
-
div.func-req-desc h5 {
+
-
text-align: center;
+
-
color: white;
+
-
}
+
-
 
+
-
img.stacked {
+
-
position: absolute;
+
-
left: 0px;
+
-
top: 0px;
+
-
}
+
-
 
+
-
div.device-position {
+
-
position: absolute;
+
-
border-radius: 300px;
+
-
width: 55px;
+
-
height: 55px;
+
-
opacity: 1;
+
-
}
+
-
 
+
-
div.device-hover {
+
-
width: 55px;
+
-
height: 55px;
+
-
z-index: 3;
+
-
border-radius: 300px;
+
-
}
+
-
 
+
-
div.device-hover img {
+
-
width: 783px;
+
-
height: 489px;
+
-
margin-top: 0px;
+
-
opacity: 0;
+
-
-webkit-transition: opacity 0.75s;
+
-
}
+
-
 
+
-
div.device-hover-pic {
+
-
width: 783px;
+
-
height: 489px;
+
-
z-index: 1;
+
-
opacity: 0;
+
-
-webkit-transition: opacity 0.5s;
+
-
}
+
-
 
+
-
div.device-hover-pic img {
+
-
width: 783px;
+
-
height: 489px;
+
-
opacity: 1;
+
-
}
+
-
 
+
-
/*
+
-
div.device-hover:hover img {
+
-
width: 783px;
+
-
height: 489px;
+
-
opacity: 1;
+
-
-webkit-transition: opacity 0.75s;
+
-
}
+
-
*/
+
-
 
+
-
div.device-hover:hover ~ span#device1 {
+
-
opacity: 1;
+
-
}
+
-
 
+
-
div.device-desc {
+
-
position: absolute;
+
-
left: -100px;
+
-
top: 100px;
+
-
width: 250px;
+
-
padding: 7px;
+
-
background: #1A1A1A;
+
-
border-radius: 5px;
+
-
color: white;
+
-
z-index: 2;
+
-
opacity: 0;
+
-
-webkit-transition: opacity 0.75s;
+
-
}
+
-
 
+
-
div.device-hover:hover + div.device-desc, div.device-hover:hover > div.device-hover-pic {
+
-
opacity: 1;
+
-
-webkit-transition: opacity 0.75s;
+
-
}
+
-
 
+
-
div.device-desc h5 {
+
-
text-align: center;
+
-
color: white;
+
-
}
+
-
 
+
-
/* -----------------------------------------
+
-
Device Hover-overs
+
-
----------------------------------------- */
+
-
 
+
-
#deviceOver {
+
-
position: relative;
+
-
width: 783px;
+
-
height: 489px;
+
-
background: #5ae url(https://static.igem.org/mediawiki/2012/5/5d/DeviceParts0.png)
+
-
padding: 0;
+
-
}
+
-
 
+
-
#deviceOver li {
+
-
display: block;
+
-
position: absolute;
+
-
list-style: none;
+
-
margin: 0;
+
-
padding: 0;
+
-
}
+
-
 
+
-
#device1 {
+
-
opacity: 0.0;
+
-
}
+
-
 
+
-
#device2 {
+
-
left: 0px;
+
-
top: 0px;
+
-
}
+
-
 
+
-
#device3 {
+
-
left: 0px;
+
-
top: 0px;
+
-
}
+
-
 
+
-
#device4 {
+
-
left: 0px;
+
-
top: 0px;
+
-
}
+
-
 
+
-
#device5 {
+
-
left: 0px;
+
-
top: 0px;
+
-
}
+
-
 
+
-
#device6 {
+
-
left: 0px;
+
-
top: 0px;
+
-
}
+
-
 
+
-
#device7 {
+
-
left: 0px;
+
-
top: 0px;
+
-
}
+
-
 
+
-
#device8 {
+
-
left: 0px;
+
-
top: 0px;
+
-
}
+
-
 
+
-
#device9 {
+
-
left: 0px;
+
-
top: 0px;
+
-
}
+
-
 
+
-
#device10 {
+
-
left: 0px;
+
-
top: 0px;
+
-
}
+
-
 
+
-
#device11 {
+
-
left: 0px;
+
-
top: 0px;
+
-
}
+
-
 
+
-
#device12 {
+
-
left: 0px;
+
-
top: 0px;
+
-
}
+
-
 
+
-
#device13 {
+
-
left: 0px;
+
-
top: 0px;
+
-
}
+
-
 
+
-
#device1 a {
+
-
width: 738px;
+
-
height: 489px;
+
-
}
+
-
 
+
-
#device2 a {
+
-
width: 738px;
+
-
height: 489px;
+
-
}
+
-
 
+
-
#device3 a {
+
-
width: 738px;
+
-
height: 489px;
+
-
}
+
-
 
+
-
#device4 a {
+
-
width: 738px;
+
-
height: 489px;
+
-
}
+
-
 
+
-
#device5 a {
+
-
width: 738px;
+
-
height: 489px;
+
-
}
+
-
 
+
-
#device6 a {
+
-
width: 738px;
+
-
height: 489px;
+
-
}
+
-
 
+
-
#device7 a {
+
-
width: 738px;
+
-
height: 489px;
+
-
}
+
-
 
+
-
#device8 a {
+
-
width: 738px;
+
-
height: 489px;
+
-
}
+
-
 
+
-
#device9 a {
+
-
width: 738px;
+
-
height: 489px;
+
-
}
+
-
 
+
-
#device10 a {
+
-
width: 738px;
+
-
height: 489px;
+
-
}
+
-
 
+
-
#device11 a {
+
-
width: 738px;
+
-
height: 489px;
+
-
}
+
-
 
+
-
#device12 a {
+
-
width: 738px;
+
-
height: 489px;
+
-
}
+
-
 
+
-
#device13 a {
+
-
width: 738px;
+
-
height: 489px;
+
-
}
+
-
 
+
-
area.device1:hover {
+
-
background: #5ae url(https://static.igem.org/mediawiki/2012/d/d3/DeviceParts1.png);
+
-
-webkit-transition: opacity 0.75s;
+
-
}
+

Revision as of 20:29, 15 November 2012


How It Works

Scroll over each number to find out more about the components of our device!
Inlet
Water flows into our system, providing a sample to test water quality.
Filter
Prevents foreign microbes from entering and contaminating our reactor.
Pumps
Move water and food to and from the reactor.
Piping and Calibration
Resist corrosion and set flow rates to the optimal level.
Reactors
House bacteria that produce electrical current in response to toxins.
Food Tanks
Supply our bacteria with lactate to keep them alive.
Electronics
Record bacterial current and transmit data wirelessly to the user.
Battery
Keeps our device running.
Solar Panel
Extends the longevity of our device by providing extra power.
Filter
Prevents our microbes from leaving the device.
Outlet
Water flows back to the source.
Support
Keeps the device safe from weather, rocks, and, of course, bears.
The Full Device
In all of its glory.

Retrieved from "http://2012.igem.org/Team:Cornell/stylesheets/app"