Team:UCSF/Home1

From 2013.igem.org

(Difference between revisions)
(Created page with "<html> <!-- * Markup for jQuery Orbit Plugin 1.2.3 * www.ZURB.com/playground * Copyright 2010, ZURB * Free to use under the MIT license. * http://www.opensource.org/lice...")
Line 1: Line 1:
<html>
<html>
 +
<style type="text/css">
 +
/* hiding the top section*/
 +
body{position:absolute; top:0px; width:100%; height:1259px;}
 +
#top-section{
 +
  height:0px;
 +
    border:none;
 +
    width:980px;
 +
    margin:0 auto;
 +
    padding:0 0 0 0;
 +
    background-color:transparent;
 +
    overflow:hide;
 +
}
 +
#p-logo{display:none;}
 +
#search-controls{display:none;}
 +
#top{display:none;}
 +
.firstHeading{display:none;}
 +
/* end of hiding the top section*/
 +
/* global setting*/
 +
#globalWrapper{position:absolute; top:0px;left:0px; width:100%; background-image:url(https://static.igem.org/mediawiki/igem.org/a/aa/Metal.jpg); padding:0 0 0 0;margin:0 0 0 0;height:100%}
 +
#content{
 +
    background-color:transparent;
 +
    border:none;
 +
    width:980px;
 +
    height:700px;
 +
    marign:0 auto;
 +
    padding:0 0 0 0;
 +
    top:-40px;
 +
    }
 +
#bodyContent{
 +
    background-color:transparent;
 +
    border:none;
 +
   
 +
    }
 +
siteSub{
 +
    display:none;
 +
    border:none;
 +
    }
 +
contentSub{
 +
    display:none;
 +
    }
 +
/* end of global setting*/
-
<!--
+
/*hiding the footer-box*/
-
* Markup for jQuery Orbit Plugin 1.2.3
+
#footer-box{display:none;}
-
* www.ZURB.com/playground
+
#catlinks{display:none;}
-
* Copyright 2010, ZURB
+
/*end of hiding the footer book*/
-
* Free to use under the MIT license.
+
-
* http://www.opensource.org/licenses/mit-license.php
+
-
-->
+
-
+
-
+
-
+
-
<head>
+
-
<meta charset="utf-8" />
+
-
<title>Stanford-Brown iGEM</title>
+
-
+
-
<!-- Attach our CSS -->
+
-
  <!-- <link rel="stylesheet" href="../orbit-1.2.3.css">
+
-
  <link rel="stylesheet" href="demo-style.css">
+
-
  -->
+
-
<!-- Attach necessary JS --><!--
+
-
<script type="text/javascript" src="../jquery-1.5.1.min.js"></script>
+
-
<script type="text/javascript" src="../jquery.orbit-1.2.3.min.js"></script>
+
-
-->
+
-
<!-- Attach our CSS -->
+
/* menu (page, edit ...) */
-
  <link rel="stylesheet" href="http://www.stanford.edu/~sryoung/cgi-bin/igem/orbit-1.2.3.css">
+
#menubar {
-
  <link rel="stylesheet" href="http://www.stanford.edu/~sryoung/cgi-bin/igem/demo/demo-style.css">
+
    background-color:transparent;
-
 
+
    position: relative;
-
<!-- Attach necessary JS -->
+
    float:left;
-
<script type="text/javascript" src="http://www.stanford.edu/~sryoung/cgi-bin/igem/jquery-1.5.1.min.js"></script>
+
    white-space: nowrap;
-
<script type="text/javascript" src="http://www.stanford.edu/~sryoung/cgi-bin/igem/jquery.orbit-1.2.3.min.js"></script>
+
    top:-6px;
-
+
    width: 490px;
-
+
    z-index: 5;
-
<!--[if IE]>
+
    font-family: sans-serif;
-
    <style type="text/css">
+
    font-size: 95%;
-
        .timer { display: none !important; }
+
    line-height: 1em;
-
        div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
+
    z-index:99;
-
    </style>
+
}
-
<![endif]-->
+
-
+
-
<!-- Run the plugin -->
+
-
<script type="text/javascript">
+
-
$(window).load(function() {
+
-
$('#featured').orbit();
+
-
});
+
-
</script>
+
 +
.left-menu, .left-menu a {
 +
    text-align: left;
 +
    color:#999999;
 +
    text-transform: lowercase;
 +
}
-
<!-- Stuff from Calgary -->
+
.left-menu:hover {
 +
    color: #D00000;
 +
    background-color: transparent;
 +
}
-
<link rel='stylesheet' type='text/css' href="https://2012.igem.org/Team:Calgary/static/basicpageglobal.css?action=raw&ctype=text/css" />
+
.right-menu{width:400px; float:right}
-
 
+
.right-menu, .right-menu a {
-
<style>
+
    right: 0px;
-
/*======
+
    text-align: right;
-
Desktop Styling
+
    color: #999999;
-
======*/
+
-
+
-
/***Body styling***/
+
-
h1{
+
-
font-size: 2.5em;
+
}
}
-
h2{
+
#menubar ul {
-
font-size: 1.8em;
+
    color: #999999;
 +
    list-style: none;
}
}
-
 
+
#menubar li {
-
#box1{
+
    display: inline;
-
width: 968px;
+
    position: relative;
-
margin-top: -8px;
+
    cursor: pointer;
-
background: threedface;
+
    padding-left: 0px;
-
float: left;
+
    padding-right: 0px;
-
padding-bottom: 20px;
+
-
margin-bottom: 13px;
+
}
}
-
#box1 h2{
+
.left-menu li a {
-
padding: 20px 20px 20px 20px;
+
    padding: 0px 10px 0px 0px;
-
}
+
-
#box1 p{
+
-
padding: 0px 20px 0px 20px;
+
-
font-size: 1.1em;
+
-
}
+
-
 
+
-
#FredOscarFlag{
+
-
display: block;
+
-
float: left;
+
-
width: 250px;
+
-
height: 274px;
+
-
background: url('https://static.igem.org/mediawiki/2012/0/0b/UCalgary2012_FRED_and_OSCAR_Main_Page.png');
+
-
background-position: top;
+
-
margin: 15px;
+
-
}
+
-
#FredOscarFlag:hover{
+
-
background-position: bottom;
+
-
}
+
-
+
-
 
+
-
#box2{
+
-
width: 968px;
+
-
background: #C68DD8;
+
-
float: left;
+
-
margin-bottom: 13px;
+
}
}
-
#box2 h2{
+
.left-menu .selected {
-
padding: 20px 20px 20px 20px;
+
#   color: #999999;
-
color: white;
+
-
}
+
-
#box2 p{
+
-
padding: 0px 20px 0px 20px;
+
-
font-size: 1.1em;
+
-
color: white;
+
-
}
+
-
#box2 img{
+
-
float: left;
+
-
margin: 15px;
+
-
height: 110px;
+
-
}
+
-
#box2:hover{
+
-
background: #D79EE9;
+
-
}
+
-
+
-
/***positioning of elements in ZE EPIC BOX***/
+
-
#epicbox{
+
-
margin-top: 4px;
+
}
}
 +
#.left-menu .selected:hover {
 +
#    color: #999999;
 +
#}
-
#boximgcontainer{
+
.left-menu:hover a {
-
float: left;
+
    color: #999999;;
-
width: 644px;
+
-
height: 655px;
+
-
}
+
-
#boximgcontainer div{
+
-
float: left;
+
-
position: relative;
+
-
}
+
-
#orangebox{
+
-
margin-bottom: 4px;
+
-
}
+
-
#orangebox .imgbox{
+
-
width: 644px;
+
-
height: 215px;
+
-
top: 108px;
+
-
// background: #F6A82D;
+
-
//background: #33CC33;
+
-
background: #555555;
+
-
margin-bottom: 4px;
+
-
}
+
-
.oblank{
+
-
width: 644px;
+
-
height: 104px;
+
-
//background: #FFE485;
+
-
//background: #33EE33;
+
-
background: #888888;
+
-
position: relative;
+
-
top: -219px;
+
-
}
+
-
#orangebox:hover .oblank, .oblank:hover{
+
-
display: none;
+
-
}
+
-
#orangebox .iconcontainer{
+
-
position: relative;
+
-
display: none;
+
-
left: auto;
+
-
top: -219px;
+
-
}
+
-
.iconbox div, .iconbox{
+
-
width: 104px;
+
-
height: 104px;
+
-
margin-right: 4px;
+
-
}
+
-
a.obox1 div{
+
-
background: #BBBBBB;
+
-
}
+
-
a.obox2 div{
+
-
background: #AAAAAA;
+
-
}
+
-
a.obox3 div{
+
-
background: #999999;
+
-
}
+
-
a.obox4 div{
+
-
background: #888888;
+
-
}
+
-
a.obox5 div{
+
-
background: #777777;
+
-
}
+
-
a.obox6 div{
+
-
background: #666666;
+
-
margin-right: 0;
+
-
}
+
-
#orangebox div:hover, #orangebox div.iconbox:hover div{
+
-
background: #DDDDDD;
+
-
}
+
-
#orangebox:hover .iconcontainer{
+
-
display: block;
+
-
background: transparent;
+
-
}
+
-
+
-
+
-
#greenbox .imgbox{
+
-
width: 320px;
+
-
height: 215px;
+
-
//background: #58CD45;
+
-
//background: #888888;
+
-
//background: #33CC33;
+
-
background: #663399;
+
-
}
+
-
.gblank{
+
-
width: 320px;
+
-
height: 104px;
+
-
//background: #B6FFA3;
+
-
//background: #BBBBBB;
+
-
//background: #33EE33;
+
-
background: #9933FF;
+
-
position: relative;
+
-
top: 219px;
+
-
left: -320px;
+
-
}
+
-
#greenbox .iconcontainer{
+
-
position: relative;
+
-
margin-top: 4px;
+
-
left: -999em;
+
-
z-index: 1;
+
-
}
+
-
a.gbox1 div{
+
-
background: #9933FF;
+
-
}
+
-
a.gbox2 div{
+
-
background: #9900FF;
+
-
}
+
-
a.gbox3 div{
+
-
background: #660099;
+
-
}
+
-
a.gbox4 div{
+
-
background: #663399;
+
-
}
+
-
#greenbox div:hover, #greenbox div.iconbox:hover div{
+
-
//background: #94FF7D;
+
-
background: #9933FF;
+
-
z-index: 99; /*hovers are not overridden by OSCAR boxes*/
+
-
}
+
-
#greenbox:hover .gblank, .gblank:hover{
+
-
display: none;
+
-
}
+
-
#greenbox:hover .iconcontainer{
+
-
left: auto;
+
-
background: transparent;
+
-
}
+
-
+
-
#bluebox{
+
-
position: relative;
+
-
top: -323px;
+
-
left: 320px;
+
-
}
+
-
#bluebox .imgbox{
+
-
width: 320px;
+
-
height: 215px;
+
-
//background: #5BB5E8;
+
-
background: #660000;
+
-
margin-left: 4px;
+
-
}
+
-
.bblank{
+
-
width: 320px;
+
-
height: 104px;
+
-
//background: #C5F0F0;
+
-
background: #996666;
+
-
position: relative;
+
-
top: 219px;
+
-
left: -320px;
+
-
z-index: 0;
+
-
}
+
-
#bluebox .iconcontainer{
+
-
position: relative;
+
-
margin-top: 4px;
+
-
left: -999em;
+
-
z-index: 0;
+
-
}
+
-
a.bbox1 div{
+
-
background: #993333;
+
-
}
+
-
a.bbox2 div{
+
-
background: #993300;
+
-
}
+
-
a.bbox3 div{
+
-
background: #990033;
+
-
}
+
-
a.bbox4 div{
+
-
background: #990000;
+
-
}
+
-
a.bbox5 div{
+
-
background: #990066;
+
-
}
+
-
a.bbox6 div{
+
-
background: #993366;
+
-
margin: 0;
+
-
}
+
-
#bluebox div:hover, #bluebox .iconbox:hover div{
+
-
//background: #7DD7FF;
+
-
background: #993333;
+
-
z-index: 99; /*hovers are not overridden by FRED boxes*/
+
-
}
+
-
#bluebox:hover .bblank, .bblank:hover{
+
-
display: none;
+
-
}
+
-
#bluebox:hover .iconcontainer{
+
-
left: -212px;
+
-
background: transparent;
+
-
}
+
-
+
-
#boxinfo{
+
-
float: right;
+
-
position: relative;
+
-
width: 320px;
+
-
left: 3px;
+
-
// background: #555555;
+
-
background: #33CC33;
+
-
height: 650px;
+
-
margin-bottom: 12px;
+
-
}
+
-
#boxinfo h2{
+
-
color: white;
+
-
padding: 20px 20px 0px;
+
-
}
+
-
#boxinfo p{
+
-
color: white;
+
-
padding: 10px 20px 20px;
+
-
font-size: 1.2em;
+
-
}
+
-
/*initial boxinfo appearance settings*/
+
-
#boxinfo div.orangebox, #boxinfo div.obox1, #boxinfo div.obox2, #boxinfo div.obox3, #boxinfo div.obox4, #boxinfo div.obox5, #boxinfo div.obox6{
+
-
display: none;
+
-
}
+
-
#boxinfo div.greenbox, #boxinfo div.gbox1, #boxinfo div.gbox2, #boxinfo div.gbox3, #boxinfo div.gbox4,
+
-
#boxinfo div.bluebox, #boxinfo div.bbox1, #boxinfo div.bbox2, #boxinfo div.bbox3, #boxinfo div.bbox4, #boxinfo div.bbox5{
+
-
position: relative;
+
-
padding-top: 320px;
+
-
display: none;
+
-
}
+
-
/*bold colours for FRED and OSCAR*/
+
-
#boxinfo div.greenbox b{
+
-
color: #72E85B;
+
-
}
+
-
#boxinfo div.bluebox b{
+
-
color: #5EB7F0;
+
-
}
+
-
.threeboxes{
+
-
clear: both;
+
-
position: relative;
+
-
width: 968px;
+
-
margin-bottom: 12px;
+
}
}
-
.threeboxes a, .threeboxes a div{
 
-
width: 320px;
 
-
height: 155px;
 
-
float: left;
 
-
margin-bottom: 12px;
 
-
}
 
-
.threeboxes div h2{
 
-
padding: 20px 20px 0px;
 
-
position: relative;
 
-
top: -155px;
 
-
}
 
-
.threeboxes div p{
 
-
padding: 0px 20px;
 
-
position: relative;
 
-
top: -155px;
 
-
}
 
-
#greybox1, #greybox6{
 
-
margin-right: 4px;
 
-
//background: #58CD45;
 
-
                        background: #3399FF;
 
-
}
 
-
#greybox1:hover, #greybox6:hover{
 
-
background: #94FF7D;
 
-
}
 
-
#greybox2, #greybox5{
 
-
margin-right: 4px;
 
-
background: #5BB5E8;
 
-
                     
 
-
}
 
-
#greybox2:hover, #greybox5:hover{
 
-
background: #7DD7FF;
 
-
}
 
-
#greybox3, #greybox4{
 
-
margin: 0;
 
-
//background: #F6A82D;
 
-
                        background: #00CCFF;
 
-
}
 
-
#greybox3:hover, #greybox4:hover{
 
-
background: #FFE44F;
 
-
}
 
-
#greybox4 {
+
.left-menu li a:hover {
-
background: #CCFFFF;
+
    color: #D00000;
-
}
+
    text-decoration: underline;
-
#greybox5 {
+
-
background: #CCFFFF;
+
-
}
+
-
#greybox6 {
+
-
background: #CCFFFF;
+
-
}
+
-
#greybox1:hover, #greybox2:hover, #greybox3:hover {
+
-
background: #00CC00;
+
}
}
-
 
+
.right-menu li {
-
 
+
#   background-color: transparent;
-
#greybox4:hover, #greybox5:hover, #greybox6:hover {
+
-
background: #66FFFF;
+
}
}
-
 
+
.right-menu li a {
-
#greybox1 {
+
    padding: 0px 15px 0px 0px;
-
background: #CCFF99;
+
    color: #999999;;
 +
    background-color: transparent;
}
}
-
#greybox2 {
+
.right-menu li a:hover {
-
background: #CCFF99;
+
    color: #D00000;
 +
    text-decoration: underline;
}
}
-
#greybox3 {
+
/* end menu (edit, page ...) */
-
background: #CCFF99;
+
-
}
+
-
+
-
#sponsorsbox{
+
-
clear: both;
+
-
position: relative;
+
-
width: 968px;
+
-
margin: 4px 0px;
+
-
background: #EEEEEE;
+
-
}
+
-
#sponsorsbox h2{
+
-
padding: 20px 20px 0px 20px;
+
-
}
+
-
#sponsorsbox p{
+
-
padding: 0px 20px;
+
-
}
+
-
#sponsorsbox table{
+
-
width: 950px;
+
-
margin-left: auto;
+
-
margin-right: auto;
+
-
background: #EEEEEE;
+
-
}
+
-
#sponsorsbox td{
+
-
padding: 15px 0px;
+
-
width: 300px;
+
-
}
+
-
#sponsorsbox img{
+
-
display: block;
+
-
margin-right: auto;
+
-
margin-left: auto;
+
-
}
+
-
</style>
+
/* navigation bar*/
 +
#navigationblock{background-color:#FFFFFF; position:fixed; top:0px; width:980px; height:150px; overflow:hidden; font-family:Microsoft YaHei,Calieri, Arial; float:left; margin:0px; padding:0px; z-index:1000; border-bottom:1px solid #d3d7d8;}
-
<script>
+
#navbarlogo{position:relative; top:8px; float:left; height:140px;}
-
jQuery(document).ready(function($){
+
#navigationbar{position:absolute; left:380px; top:28px; font-size:13px; font-weight:100; color:#999999;}
-
 
+
#navigationbar > li {display:block; list-style-type:none; float:left; width:80px; height:20px; text-align:center; background-color:transparent;}
-
//eliminate jsnotice
+
-
$('#jsnotice').hide();
+
-
 
+
-
+
-
/*epic box info functionality*/
+
-
//small icons
+
-
$('#boximgcontainer .iconbox').hover(
+
-
function(){
+
-
var className = $(this).attr('class').split(" ");
+
-
var box = className[0];
+
-
clearinfo();
+
-
$('#boxinfo div.' + box).show();
+
-
},
+
-
function(){
+
-
clearinfo();
+
-
$('#boxinfo_default').show();
+
-
});
+
-
//large icons
+
-
$('.imgbox').hover(
+
-
function(){
+
-
var id = $(this).parent().parent().attr('id');
+
-
clearinfo();
+
-
$('#boxinfo div.' + id).show();
+
-
},
+
-
function(){
+
-
clearinfo();
+
-
$('#boxinfo_default').show();
+
-
});
+
-
+
-
/*epic box FRED/OSCAR blank box disappearance*/
+
-
$('#bluebox').hover(
+
-
function(){
+
-
$('.gblank').hide();
+
-
$('.bblank').hide();
+
-
},
+
-
function(){
+
-
$('.gblank').show();
+
-
$('.bblank').show();
+
-
});
+
-
+
-
$('#greenbox').hover(
+
-
function(){
+
-
$('.gblank').hide();
+
-
$('.bblank').hide();
+
-
},
+
-
function(){
+
-
$('.gblank').show();
+
-
$('.bblank').show();
+
-
});
+
-
+
-
});
+
-
 
+
-
function clearinfo(){
+
-
$('#boxinfo div').hide();
+
-
}
+
-
</script>
+
-
 
+
-
<!-- End stuff from Calgary -->
+
 +
.Navbar_Item a {color:#999999; text-decoration:none;}
 +
.Navbar_Item > ul {display:none; width:500px; height:50px; text-align:center; color:#999999;}
 +
.Navbar_Item > ul > li {float:left; list-style:none; width:100px; text-align:center; background-color:transparent; position:relative; top:10px;}
 +
.Navbar_Item:hover{ border-bottom:1px solid #D00000; color:#D00000}
 +
.Navbar_Item:hover > ul{ display:block;}
 +
.Navbar_Item:hover >a {color:#D00000}
 +
.Navbar_Item > ul > li:hover {border-bottom:1px solid #D00000; color:#D00000}
 +
.Navbar_Item > ul > li:hover >a {color:#D00000}
 +
#Home_Sublist{position:relative; top:0px; left:-50px;}
 +
#Team_Sublist{position:relative; top:0px; left:-60px;}
 +
#Project_Sublist{position:relative; top:0px; left:-100px;}
 +
#Model_Sublist{position:relative; top:0px; left:-140px;}
 +
#Lab_Sublist{position:relative; top:0px; left:-180px;}
 +
#HumanPractice_Sublist{position:relative; top:0px; left:-220px;}
 +
/*end navigation bar*/
 +
/*Major body*/
 +
#MajorBody{position:absolute; top:0px; width:980px; height:1019px;}
 +
#ProjectTitle{position:absolute; background-color:#D00000; width:980px; height:130px; top:120px;}
 +
#ProjectName{position:absolute; left:300px; top:20px; border-bottom:0px; color:#FFFFFF; font-size:45px; font-family:Impact,Arial, Helvetica, sans-serif;}
 +
.slide_container{position:relative; width:980px;}
 +
.slide_container img{position:absolute; top:0px; width:980px;}
 +
.activated_slide{position:absolute; top:227px; width:980px; height:800px; z-index:200;}
 +
.inactivated_slide{position:absolute; top:227px; width:980px; height:800px; z-index:100;}
 +
.transitional_slide{position:absolute; top:227px; width:980px; height:800px; z-index:300;}
 +
.slide_passage{position:absolute; top:500px; background-color:#FFFFFF; width:980px; height:300px; z-index:500; font-family: Arial, Helvetica, sans-serif; font-size:16px; line-height:30px; font-weight:normal;}
 +
#abstract_passage{position:absolute; top:10px; left:20px; width:940px;}
 +
.slide_list_container{position:absolute; left:0px; top:632px; width:980px; height:95px; background-color:transparent; z-index:500;}
 +
.slide_list_background{position:absolute; left:0px; top:0px; width:980px; height:95px; background-color:white; opacity:0.5;}
 +
.slide_list{position:absolute; left:0px; top:0px; width:940px; height:95px; background-color:transparent; list-style:none; list-style-type:none; font-family:Arial, Helvetica, sans-serif;}
 +
.left_slide_list_item{position:absolute; top:35px; left:270px; font-weight:normal; font-size:30px; opacity:0.5; width:130px; text-align:center;}
 +
.left_slide_list_item:hover{opacity:0.8;}
 +
.middle_slide_list_item{position:absolute; top:30px; left:400px; font-weight:bold; font-size:40px; opacity:1; width:200px; text-align:center;}
 +
.right_slide_list_item{position:absolute; top:35px; left:600px; font-weight:normal; font-size:30px; opacity:0.5; width:130px; text-align:center;}
 +
.right_slide_list_item:hover{opacity:0.8;}
 +
/*end of Major body*/
 +
#AcknowledgementBox{ position:absolute; left:0px; top:1027px; width:980px;}
 +
</style>
 +
<!--navigationbar-->
 +
<div id="navigationblock">
 +
<img id="navbarlogo" src="https://static.igem.org/mediawiki/igem.org/c/c9/Peking_Logo.jpg"/>
 +
<ul id="navigationbar">
 +
<li id="PKU_navbar_Home" class="Navbar_Item">
 +
<a href="https://2013.igem.org/Team:Peking">home</a>
 +
<ul id="Home_Sublist" >
 +
<li><a>Item1</a></li>
 +
<li><a>Item2</a></li>
 +
<li><a>Item3</a></li>
 +
</ul>
 +
</li>
 +
<li id="PKU_navbar_Team" class="Navbar_Item">
 +
<a href="https://2013.igem.org/Team:Peking/Team">team</a>
 +
<ul id="Team_Sublist">
 +
<li><a>Item1</a></li>
 +
<li><a>Item2</a></li>
 +
<li><a>Item3</a></li>
 +
</ul>
 +
</li>
 +
<li id="PKU_navbar_Project" class="Navbar_Item">
 +
<a href="https://2013.igem.org/Team:Peking/Project">project</a>
 +
<ul id="Project_Sublist">
 +
<li><a>Item1</a></li>
 +
<li><a>Item2</a></li>
 +
<li><a>Item3</a></li>
 +
</ul>
 +
</li>
 +
<li id="PKU_navbar_Model" class="Navbar_Item">
 +
<a href="https://2013.igem.org/Team:Peking/Model">model</a>
 +
<ul id="Model_Sublist">
 +
<li><a>Item1</a></li>
 +
<li><a>Item2</a></li>
 +
<li><a>Item3</a></li>
 +
</ul>
 +
</li>
 +
<li id="PKU_navbar_Lab" class="Navbar_Item">
 +
<a href="https://2013.igem.org/Team:Peking/Lab">lab</a>
 +
<ul id="Lab_Sublist">
 +
<li><a>Item1</a></li>
 +
<li><a>Item2</a></li>
 +
<li><a>Item3</a></li>
 +
</ul>
 +
</li>
 +
<li id="PKU_navbar_HumanPractice" class="Navbar_Item" style="width:120px">
 +
<a href="https://2013.igem.org/Team:Peking/HumanPractice">human practice</a>
 +
<ul id="HumanPractice_Sublist">
 +
<li><a>Item1</a></li>
 +
<li><a>Item2</a></li>
 +
<li><a>Item3</a></li>
 +
</ul>
 +
</li>
-
</head>
+
</ul>
-
<body>
+
     
 +
</div>
 +
<!--end navigationbar-->
-
<h1>Stanford-Brown iGEM </h1>
+
<!--MajorBody-->
-
+
<div id="MajorBody">
-
<!-- =======================================
+
<div id="ProjectTitle">
-
 
+
<h1 id="ProjectName">Aromatics Busted</h1>
-
THE ACTUAL ORBIT SLIDER CONTENT
+
</div>
-
 
+
<div class="slide_container">
-
======================================= -->
+
<div  id="slide-1" class="inactivated_slide" >
-
<div id="featured">  
+
<img src="https://static.igem.org/mediawiki/igem.org/9/93/%E6%9C%AA%E5%90%8D%E6%B9%961.jpg" />
-
<div class="content" style="">
+
<div class="slide_passage">
-
<h1>Orbit does content now.</h1>
+
-
<h3>Highlight me...I'm text.</h3>
+
</div>
</div>
-
<a href=""><img src="http://www.stanford.edu/~sryoung/cgi-bin/igem/demo/dummy-images/overflow.jpg" /></a>
 
-
<img src="http://www.stanford.edu/~sryoung/cgi-bin/igem/demo/dummy-images/captions.jpg" data-caption="#htmlCaption" />
 
-
<img src="http://www.stanford.edu/~sryoung/cgi-bin/igem/demo/dummy-images/features.jpg"  />
 
</div>
</div>
-
<!-- Captions for Orbit -->
+
<div  id="slide-2" class="activated_slide">
-
<span class="orbit-caption" id="htmlCaption"><strong>I'm A Badass Caption:</strong> I can haz <a href="#">links</a>, <em>style</em> or anything that is valid markup :)</span>
+
<img src="https://static.igem.org/mediawiki/igem.org/d/d7/Abstract.jpg" />
-
+
<div class="slide_passage">
-
+
<p id="abstract_passage">Some prokaryotes, including Escherichia coli and Pseudomonas putida naturally produce enzymes capable of detecting toxic aromatic molecules and regulating the transcription of corresponding catabolic genes. However, these naturally existing biosensors are limited in terms of their detection range, expression leakage, and induction ratio.<br />This year our team designed a series of aromatic sensors and combined them with related enzymes from their original catabolic pathways to increase the number of molecules the sensors can detect. In order to semi-quantitatively measure the concentrations of these compounds, we constructed a biological band-pass circuit, enabling our sensors to detect the concentrations of target compounds within a certain range. Our system is a fast and easy way of detecting aromatic pollution, and another step forward in ensuring water safety.
-
 
+
</p>
-
 
+
</div>
-
 
+
-
+
-
<!-- <div class="container"> -->
+
-
<!-- <h4>ZURB's Orbit Slider</h4>
+
-
<a href="http://www.zurb.com/playground/orbit-jquery-image-slider">View Docs + Playground for Orbit</a> -->
+
-
 
+
-
<br />
+
-
<br />
+
-
 
+
-
<div class="threeboxes">
+
-
<a id="greybox4" href="http://www.youtube.com/watch?v=KHhswxo6xow" style="margin-right:4px;">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/0/02/UCalgary2012_ThreeBoxMusic.png-"></img>
+
-
<h2>Project #1</h2>
+
-
<p>Description</p>
+
</div>
</div>
-
</a>
+
<div  id="slide-3" class="inactivated_slide">
-
<a id="greybox5" href="https://2012.igem.org/Team:Calgary/Project/Synergy-">
+
<img src="https://static.igem.org/mediawiki/igem.org/6/6f/%E6%9C%AA%E5%90%8D%E6%B9%966.jpg" />
-
<div>
+
<div class="slide_passage">
-
<img src="https://static.igem.org/mediawiki/2012/2/20/UCalgary2012_ThreeBoxSynergy.png-"></img>
+
</div>
-
<h2>Project #2</h2>
+
-
<p>Description</p>
+
</div>
</div>
-
</a>
+
<div class="slide_list_container"><div class="slide_list_background"></div>
-
<a id="greybox6" href="http://www.youtube.com/watch?v=vluDpf4ao6c" style="margin:0;">
+
<ul class="slide_list">
-
<div>
+
<li class="left_slide_list_item" id="slide_list-1">Project</li>
-
<img src="https://static.igem.org/mediawiki/2012/b/b1/UCalgary2012_ThreeBoxFilm.png-"></img>
+
<li class="middle_slide_list_item" id="slide_list-2">Abstract</li>
-
<h2>Project #3</h2>
+
<li class="right_slide_list_item" id="slide_list-3">Team</li>
-
<p>Description</p>
+
</ul>
</div>
</div>
-
</a>
+
</div>
-
+
-
</div>
+
-
<div class="threeboxes">
+
</div><!--end of major body-->
-
<a id="greybox1" href="https://2012.igem.org/Team:Calgary/Team">
+
<img id="AcknowledgementBox" src="https://static.igem.org/mediawiki/igem.org/e/e9/Sponsers.jpg">
-
<div>
+
<!--end of acknowledgement box-->
-
<img src="https://static.igem.org/mediawiki/2012/b/b8/UCalgary2012_ThreeBoxTeam.png-"></img>
+
-
<h2>Team</h2>
+
-
<p>Who are we?</p>
+
-
</div>
+
-
</a>
+
-
<a id="greybox2" href="https://2012.igem.org/Team:Calgary/Project/DataPage">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/9/92/UCalgary2012_ThreeBoxData.png-"></img>
+
-
<h2>Data Page</h2>
+
-
<p>Click here to see a summary of all our data collected so far!</p>
+
-
</div>
+
-
</a>
+
-
<a id="greybox3" href="https://2012.igem.org/Team:Calgary/Notebook">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/1/1b/UCalgary2012_ThreeBoxNotebook.png-"></img>
+
-
<h2>Notebook</h2>
+
-
<p>Here is a record of our summer's work. We also want to thank everybody who helped us along the way!</p>
+
-
</div>
+
-
</a>
+
-
</div>
+
-
 
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
-
 
+
<script type="text/javascript">
-
 
+
function ChangeSlide(CurrentSlideId,NewSlideId)
-
 
+
{if(CurrentSlideId!=NewSlideId){
-
<div id="epicbox">
+
$(NewSlideId).fadeOut(0);
-
<div id="boximgcontainer">
+
$(NewSlideId).removeClass("inactivated_slide");
-
<div id="orangebox">
+
$(NewSlideId).addClass("transitional_slide");
-
<a href="https://2012.igem.org/Team:Calgary/Project/HumanPractices">
+
$(NewSlideId).fadeIn(function(){
-
<div class="imgbox">
+
$(CurrentSlideId).removeClass("activated_slide");
-
<img src="https://static.igem.org/mediawiki/2012/9/9e/UCalgary2012_EpicBoxHP_-_Blank.png-"></img>
+
$(CurrentSlideId).addClass("inactivated_slide");
-
</div>
+
$(NewSlideId).removeClass("transitional_slide");
 +
$(NewSlideId).addClass("activated_slide");
 +
});
 +
}
 +
}
 +
function ChangeSlideList(CurrentLeftId,CurrentMiddleId,CurrentRightId,NewMiddleId)
 +
{
 +
if(CurrentLeftId==NewMiddleId)
 +
{
 +
$(CurrentRightId).fadeOut(0);
 +
$(CurrentMiddleId).animate({left:"600px",fontSize:'30px',fontWeight:'normal'},function(){
 +
$(CurrentMiddleId).removeClass("middle_slide_list_item");
 +
$(CurrentMiddleId).css({left:"600px",fontSize:'30px',fontWeight:'normal'});
 +
$(CurrentMiddleId).addClass("right_slide_list_item");
 +
});
 +
$(CurrentLeftId).animate({left:"400px",fontSize:'40px',fontWeight:'bold'},function(){
 +
$(CurrentLeftId).removeClass("left_slide_list_item");
 +
$(CurrentLeftId).css({left:"400px",fontSize:'40px',fontWeight:'bold'});
 +
$(CurrentLeftId).addClass("middle_slide_list_item");
-
<div class="oblank">
+
$(CurrentRightId).removeClass("right_slide_list_item");
-
</div>
+
$(CurrentRightId).css({left:"270px",fontSize:'30px',fontWeight:'normal'});
 +
$(CurrentRightId).addClass("left_slide_list_item");
 +
$(CurrentRightId).fadeIn(0);
 +
});
 +
 +
}
 +
else if(CurrentRightId==NewMiddleId)
 +
{
 +
 +
$(CurrentLeftId).fadeOut(0);
 +
$(CurrentMiddleId).animate({left:"270px",fontSize:'30px',fontWeight:'normal'},function(){
 +
$(CurrentMiddleId).removeClass("middle_slide_list_item");
 +
$(CurrentMiddleId).css({left:"270px",fontSize:'30px',fontWeight:'normal'});
 +
$(CurrentMiddleId).addClass("left_slide_list_item");
 +
});
 +
$(CurrentRightId).animate({left:"400px",fontSize:'40px',fontWeight:'bold'},function(){
 +
$(CurrentRightId).removeClass("right_slide_list_item");
 +
$(CurrentRightId).css({left:"400px",fontSize:'40px',fontWeight:'bold'});
 +
$(CurrentRightId).addClass("middle_slide_list_item");
-
<div class="iconcontainer">
+
$(CurrentLeftId).removeClass("left_slide_list_item");
-
<a class="obox1 iconbox" href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Collaborations">
+
$(CurrentLeftId).css({left:"600px",fontSize:'30px',fontWeight:'normal'});
-
<div>
+
$(CurrentLeftId).addClass("right_slide_list_item");
-
<img src="https://static.igem.org/mediawiki/2012/1/1b/UCalgary2012_IconHP8.png-"></img>
+
$(CurrentLeftId).fadeIn(0);
-
</div>
+
});
-
</a>
+
}
-
<a class="obox2 iconbox" href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Interviews">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/d/d6/UCalgary2012_IconHP3.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="obox3 iconbox" href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Design">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/1/1c/UCalgary2012_IconHP4.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="obox4 iconbox" href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Killswitch">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/6/65/UCalgary2012_IconHP2.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="obox5 iconbox" href="https://2012.igem.org/Team:Calgary/Safety">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/c/c9/UCalgary2012_IconHP5.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="obox6 iconbox" href="https://2012.igem.org/Team:Calgary/Outreach">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/0/0e/UCalgary2012_IconHP6.png-"></img>
+
-
</div>
+
-
</a>
+
-
</div>
+
-
 
+
-
+
-
</a>
+
-
</div>
+
-
<div id="greenbox">
+
}
-
<a href="https://2012.igem.org/Team:Calgary/Project/FRED">
+
-
<div class="imgbox">
+
-
<img src="https://static.igem.org/mediawiki/2012/4/47/UCalgary2012_EpicBoxFRED_-_Blank.png-"></img>
+
$("#slide_list-1").click(function(){
-
</div>
+
ChangeSlide("#"+$(".activated_slide").attr("id"),"#slide-1");
-
+
ChangeSlideList("#"+$(".left_slide_list_item").attr("id"),
-
<div class="gblank">
+
"#"+$(".middle_slide_list_item").attr("id"),
-
</div>
+
"#"+$(".right_slide_list_item").attr("id"),
-
+
"#slide_list-1");
-
<div class="iconcontainer">
+
});
-
<a class="gbox1 iconbox" href="https://2012.igem.org/Team:Calgary/Project/FRED/Detecting">
+
$("#slide_list-2").click(function(){
-
<div>
+
ChangeSlide("#"+$(".activated_slide").attr("id"),"#slide-2");
-
<img src="https://static.igem.org/mediawiki/2012/0/0a/UCalgary2012_IconFRED1.png-"></img>
+
ChangeSlideList("#"+$(".left_slide_list_item").attr("id"),
-
</div>
+
"#"+$(".middle_slide_list_item").attr("id"),
-
</a>
+
"#"+$(".right_slide_list_item").attr("id"),
-
<a class="gbox2 iconbox" href="https://2012.igem.org/Team:Calgary/Project/FRED/Reporting">
+
"#slide_list-2");
-
<div>
+
});
-
<img src="https://static.igem.org/mediawiki/2012/8/8d/UCalgary2012_IconFRED2.png-"></img>
+
$("#slide_list-3").click(function(){
-
</div>
+
ChangeSlide("#"+$(".activated_slide").attr("id"),"#slide-3");
-
</a>
+
ChangeSlideList("#"+$(".left_slide_list_item").attr("id"),
-
<a class="gbox3 iconbox" href="https://2012.igem.org/Team:Calgary/Project/FRED/Modelling">
+
"#"+$(".middle_slide_list_item").attr("id"),
-
<div>
+
"#"+$(".right_slide_list_item").attr("id"),
-
<img src="https://static.igem.org/mediawiki/2012/c/c0/UCalgary2012_IconFRED3.png-"></img>
+
"#slide_list-3");
-
</div>
+
});
-
</a>
+
</script>
-
<a class="gbox4 iconbox" href="https://2012.igem.org/Team:Calgary/Project/FRED/Prototype">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/a/a7/UCalgary2012_IconFRED4.png-"></img>
+
-
</div>
+
-
</a>
+
-
</div>
+
-
</a>
+
-
</div>
+
-
+
-
<div id="bluebox">
+
-
<a href="https://2012.igem.org/Team:Calgary/Project/OSCAR">
+
-
<div class="imgbox">
+
-
<img src="https://static.igem.org/mediawiki/2012/9/94/UCalgary2012_EpicBoxOSCAR_-_Blank.png-"></img>
+
-
</div>
+
-
+
-
<div class="bblank">
+
-
</div>
+
-
+
-
<div class="iconcontainer">
+
-
<a class="bbox1 iconbox" href="https://2012.igem.org/Team:Calgary/Project/OSCAR/Decarboxylation">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/f/f1/UCalgary2012_IconOSCAR1.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="bbox2 iconbox" href="https://2012.igem.org/Team:Calgary/Project/OSCAR/CatecholDegradation">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/0/0c/UCalgary2012_IconOSCAR4.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="bbox3 iconbox" href="https://2012.igem.org/Team:Calgary/Project/OSCAR/FluxAnalysis">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/4/40/UCalgary2012_IconOSCAR6.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="bbox4 iconbox" href="https://2012.igem.org/Team:Calgary/Project/OSCAR/Bioreactor">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/3/3e/UCalgary2012_IconOSCAR5.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="bbox5 iconbox" href="https://2012.igem.org/Team:Calgary/Project/OSCAR/Upgrading">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/4/44/UCalgary2012_IconOSCAR7.png-"></img>
+
-
</div>
+
-
</a>
+
-
</div>
+
-
</a>
+
-
</div>
+
-
</div>
+
-
<div id="boxinfo">
+
-
<div id="boxinfo_default">
+
-
<h2>The Concept</h2>
+
-
<p>The concept</p>
+
-
</div>
+
-
<div class="orangebox">
+
-
<h2>Human Practices</h2>
+
-
<p>Human Practices</p>
+
-
</div>
+
-
<div class="obox1">
+
-
<h2>Initiative</h2>
+
-
<p>Initiative</p>
+
-
</div>
+
-
<div class="obox2">
+
-
<h2>Interviews</h2>
+
-
<p>Interviews</p>
+
-
</div>
+
-
<div class="obox3">
+
-
<h2>Design Considerations</h2>
+
-
<p>Design Considerations</p>
+
-
</div>
+
-
<div class="obox4">
+
-
<h2>Killswitch</h2>
+
-
<p>Kill Switch</p>
+
-
</div>
+
-
<div class="obox5">
+
-
<h2>Safety</h2>
+
-
<p>Safety</p>
+
-
</div>
+
-
<div class="obox6">
+
-
<h2>Community Outreach</h2>
+
-
<p>Community Outreach</p>
+
-
</div>
+
-
<div class="greenbox">
+
-
<h2>Project #1</h2>
+
-
<p>Project #1</p>
+
-
</div>
+
-
<div class="gbox1">
+
-
<h2>Detecting</h2>
+
-
<p>Project #1 Detection</p>
+
-
</div>
+
-
<div class="gbox2">
+
-
<h2>Reporting</h2>
+
-
<p>Project #1 Reporting</p>
+
-
</div>
+
-
<div class="gbox3">
+
-
<h2>Modelling</h2>
+
-
<p>Modelling for Project #1</p>
+
-
</div>
+
-
<div class="gbox4">
+
-
<h2>Prototyping</h2>
+
-
<p>Prototyping for Project #1</p>
+
-
</div>
+
-
<div class="bluebox">
+
-
<h2>Project #2</h2>
+
-
<p>Project #2</p>
+
-
</div>
+
-
<div class="bbox1">
+
-
<h2>Decarboxylation</h2>
+
-
<p>Project #2</p>
+
-
</div>
+
-
<div class="bbox2">
+
-
<h2>Catechol Degradation</h2>
+
-
<p>Project #2</p>
+
-
</div>
+
-
<div class="bbox3">
+
-
<h2>Flux-Variability Analysis</h2>
+
-
<p>Project #2</p>
+
-
</div>
+
-
<div class="bbox4">
+
-
<h2>Bioreactor</h2>
+
-
<p>Project #2</p>
+
-
</div>
+
-
<div class="bbox5">
+
-
<h2>Upgrading</h2>
+
-
<p>Project #2</p>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
 
-
 
-
 
-
 
-
<!-- </div> -->
 
-
</body>
 
</html>
</html>

Revision as of 18:11, 7 August 2013

Aromatics Busted

Some prokaryotes, including Escherichia coli and Pseudomonas putida naturally produce enzymes capable of detecting toxic aromatic molecules and regulating the transcription of corresponding catabolic genes. However, these naturally existing biosensors are limited in terms of their detection range, expression leakage, and induction ratio.
This year our team designed a series of aromatic sensors and combined them with related enzymes from their original catabolic pathways to increase the number of molecules the sensors can detect. In order to semi-quantitatively measure the concentrations of these compounds, we constructed a biological band-pass circuit, enabling our sensors to detect the concentrations of target compounds within a certain range. Our system is a fast and easy way of detecting aromatic pollution, and another step forward in ensuring water safety.

  • Project
  • Abstract
  • Team

Retrieved from "http://2013.igem.org/Team:UCSF/Home1"