Difference between revisions of "Team:Virginia/Description"

Line 1: Line 1:
−
{{Virginia/body}}
+
{{Virginia/menubar}}
 +
{{Virginia/stylesheet}}
 
<html>
 
<html>
−
<body>
+
<head>
 +
<meta name=viewport content="width=device-width, initial-scale=1">
 +
<style>
  
 +
/********************************* DEFAULT WIKI SETTINGS  ********************************/
  
−
<div class="maindiv">
+
#sideMenu, #top_title {display:none;}
 +
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
 +
body {background-color:#ffffff;}
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
  
−
<!-----------------------------------Space reserved for menu and footer------------------------------------>
+
/********************************* MENU ********************************/
−
<div id="menuspace"></div>
+
 
 +
/*Contains the entire page and everything in it*/
 +
.maindiv {
 +
background-color:#ffffff;
 +
min-height:98vh;
 +
width:100%;
 +
position:absolute;
 +
display:block;
 +
}
 +
 
 +
/*Space reserved for the menubar*/
 +
#menuspace {
 +
background-color:none;
 +
width:1200px;
 +
height:48px;
 +
margin:0 auto;
 +
}
 +
 
 +
 
 +
/*All of the text, images, etc. of our page goes in this div*/
 +
.container {
 +
/*Padding and margin are a trick to prevent margins collapsing*/
 +
padding-top:1px;
 +
padding-bottom:1px;
 +
 
 +
margin:9px auto 14px auto;
 +
position:relative;
 +
display:block;
 +
background-color:white;
 +
width:1200px;
 +
min-height:80vh;
 +
}
 +
 
 +
/*Image section at the top of the page*/
 +
.imagearea {
 +
width:100%;
 +
text-align:center;
 +
height:300px;
 +
background-color:white;
 +
margin: -1px auto 15px auto;
 +
}
 +
 
 +
/*When text is used in the imagearea*/
 +
.imagearea h1 {
 +
font-size:110px;
 +
text-align:center;
 +
color:white;
 +
}
 +
 
 +
/*Specifications for image at top of page*/
 +
.mainimage {
 +
height:300px;
 +
}
 +
 
 +
/*Page title*/
 +
.pagetitle {
 +
margin:0 0 20px 50px;
 +
width:1170px;
 +
height:30px;
 +
}
 
 
−
</div>
+
/*Box for content on page*/
 +
.content {
 +
width:1100px;
 +
min-height:100px;
 +
margin:25px auto 25px 50px;
 +
        padding-bottom: 35px;
 +
        display:inline-block;
 +
 
 +
}
 +
   
 +
/*Paragraph styling*/
 +
.p {
 +
font-family:Sspr;
 +
font-size:17px;
 +
}
 +
 
 +
/*Paragraph title styling*/
 +
.ptitle {
 +
font-family:Lato, sans-serif;
 +
font-size:24px;
 +
font-weight:700;
 +
        text-align:left;
 +
 
 +
}
 +
 
 +
.stitle {
 +
        font-family:Aleo;
 +
font-size:18px;
 +
font-weight:700;
 +
 
 +
}
 +
 
 +
.f {
 +
        font-family:Lato, sans-serif;
 +
        font-size:15px;
 +
        text-align:center;
 +
}
 +
 
 +
/*Reference box formatting*/
 +
.references {
 +
position:relative;
 +
color:blue;
 +
}
 +
 
 +
.refbox {
 +
position:absolute;
 +
bottom:26px;
 +
left:50%;
 +
margin-left:-117px;
 +
width:260px;
 +
padding:10px 15px 10px 15px;
 +
background-color:#99d6ff;
 +
color:black;
 +
visibility:hidden;
 +
font-size:12px;
 +
}
 +
 
 +
.references:hover .refbox {
 +
visibility:visible;
 +
}
 +
 
 +
.references:hover {
 +
text-decoration:underline;
 +
}
 +
 
 +
/*Bottom arrow on refbox*/
 +
.references .refbox::after {
 +
content:" ";
 +
position:absolute;
 +
top:100%;
 +
left:112px;
 +
border-width:5px;
 +
border-style:solid;
 +
border-color:#99d6ff transparent transparent transparent;
 +
}
 +
 
 +
/*Image formatting*/
 +
.floatright {
 +
float:right;
 +
background-color:#cce5ff;
 +
padding:15px;
 +
margin-left:10px;
 +
margin-top:3px;
 +
margin-bottom:5px;
 +
}
 +
 
 +
.floatleft {
 +
float:left;
 +
background-color:#cce5ff;
 +
padding:15px;
 +
margin-right:10px;
 +
margin-top:3px;
 +
margin-bottom:5px;
 +
}
 +
 
 +
.capright {
 +
float:right;
 +
padding:15px 15px 4px 15px;
 +
background-color:#cce5ff;
 +
text-align:center;
 +
font-family:Lato, sans-serif;
 +
font-size:15px;
 +
margin-top:3px;
 +
margin-left:10px;
 +
margin-bottom:2px;
 +
line-height:23px;
 +
}
 +
 
 +
.capleft {
 +
float:left;
 +
padding:15px 15px 4px 15px;
 +
background-color:#cce5ff;
 +
text-align:center;
 +
font-family:Lato, sans-serif;
 +
font-size:15px;
 +
margin-top:3px;
 +
margin-right:10px;
 +
margin-bottom:2px;
 +
line-height:23px;
 +
}
 +
 
 +
/*Footer*/
 +
.footerspace {
 +
position:fixed;
 +
background-color:#235c81;
 +
left:50%;
 +
margin-left:-600px;
 +
width:1200px;
 +
height:35px;
 +
bottom:-1px;
 +
z-index:50;
 +
}
 +
 
 +
.footerright {
 +
float:right;
 +
margin-right:10px;
 +
}
 +
 
 +
.footerleft {
 +
float:left;
 +
margin-left:10px;
 +
}
 +
 
 +
.footerleft, .footerright {
 +
margin-top:7px;
 +
text-decoration:none;
 +
font-family:Lato, sans-serif;
 +
font-size:17px;
 +
color:white;
 +
}
 +
 
 +
.footerleft:hover, .footerright:hover {
 +
text-decoration:underline;
 +
}
 +
 
 +
.footerleft:link, .footerright:link, .footerleft:visited, .footerright:visited {
 +
color:white;
 +
}
  
−
<!-----------------------------------Container div---------------------------------------------->
 
−
<div class="container">
 
  
−
<!---------------------------Top image on page------------------------------------------>
+
/*Anders' attempt at making clickable links over the p&p infographic*/
−
+
  
 +
div.abs1{position: absolute;
 +
    top: 75px;
 +
    right: 875px;
 +
    width: 120px;
 +
    height: 140px;
 +
  }
  
−
<!---------------------------Page title area-------------------------------------------->
+
div.abs2{position: absolute;
−
+
    top: 10px;
 +
    right: 530px;
 +
    width: 150px;
 +
    height: 100px;
 +
    border: none;
 +
z-index:10;
 +
}
  
 +
div.abs3{position: absolute;
 +
    top: 95px;
 +
    right: 235px;
 +
    width: 120px;
 +
    height: 175px;
 +
  }
  
 +
div.abs4{position: absolute;
 +
    top: 340px;
 +
    right: 195px;
 +
    width: 150px;
 +
    height: 100px;
 +
  }
  
−
<!---------------------------Main content section of page------------------------------->
+
div.abs5{position: absolute;
−
<div class="content">
+
    top: 548px;
−
<center><img src="https://static.igem.org/mediawiki/2016/4/46/T--Virginia--Project_Description.png" style="position: relative;top:-10px;float:center;width:900px;height:900px;"></center>
+
    right: 200px;
 +
    width: 155px;
 +
    height: 135px;
 +
    }
  
 +
div.abs6{position: absolute;
 +
    top: 585px;
 +
    right: 850px;
 +
    width: 100px;
 +
    height: 145px;
 +
    }
  
 +
div.abs7{position: absolute;
 +
    top: 670px;
 +
    right: 420px;
 +
    width: 260px;
 +
    height: 107px;
 +
    }
  
  
 +
div.public{position: absolute;
 +
    top: 560px;
 +
    right: 715px;
 +
    width: 300px;
 +
    height: 300px;
 +
    border: none;
 +
}
  
−
<!----------CLICKADLE DIV BUTTONS THAT TAKE YOU THROUGH THE PROJECT SECTIONS------------------------------------>
+
div.outreach{position: absolute;
 +
    top: 560px;
 +
    right: 120px;
 +
    width: 300px;
 +
    height: 300px;
 +
    border: none;
 +
}
  
  
−
<a href="https://2016.igem.org/Team:Virginia/Experiments">
 
−
    <span style="display: block"><div class="project1"></div>
 
−
    </span>
 
−
</a>
 
  
−
<a href="https://2016.igem.org/Team:Virginia/Model">
 
−
    <span style="display: block"><div class="project2"></div>
 
−
    </span>
 
−
</a>
 
  
−
<a href="https://2016.igem.org/Team:Virginia/ProjectDesign">
+
div.project1{position: absolute;
−
  <span style="display: block"> <div class="project3"></div>
+
    top: 70px;
−
     </span>
+
     right: 350px;
−
</a>
+
    width: 175px;
 +
    height: 175px;
 +
    border:none;
 +
z-index:10;
 +
    border: 5px solid red;
 +
}
  
−
<a href="https://2016.igem.org/Team:Virginia/Parts">
+
div.project2{position: absolute;
−
     <span style="display: block"><div class="project4"></div>
+
     top: 190px;
−
     </span>
+
     right: 515px;
−
</a>
+
    width: 175px;
 +
    height: 175px;
 +
    border: none;
 +
z-index:10;
 +
    border: 5px solid red;
 +
}
  
−
<a href="https://2016.igem.org/Team:Virginia/Summary">
+
div.project3{position: absolute;
−
     <span style="display: block"><div class="project5"></div>
+
     top: 260px;
−
     </span>
+
     right: 720px;
−
</a>
+
    width: 175px;
 +
    height: 175px;
 +
  border: 5px solid red;
 +
z-index:10;
 +
}
  
 +
div.project4{position: absolute;
 +
    top: 425px;
 +
    right: 550px;
 +
    width: 175px;
 +
    height: 175px;
 +
    border: 5px solid red;
 +
z-index:10;
 +
}
  
 +
div.project5{position: absolute;
 +
    top: 640px;
 +
    right: 575px;
 +
    width: 175px;
 +
    height: 175px;
 +
  border: 5px solid red;
 +
z-index:10;
 +
}
  
  
  
 +
div.policy{position: absolute;
 +
    top: 340px;
 +
    right: 715px;
 +
    width: 300px;
 +
    height: 300px;
 +
    border: none;
 +
}
  
 +
div.industry{position: absolute;
 +
    top: 340px;
 +
    right: 190px;
 +
    width: 300px;
 +
    height: 300px;
 +
    border: none;
 +
}
  
  
−
<!----END clickable div button code------>
 
  
  
  
−
<!----- start project page labels------->
 
  
 +
div.fox1{position: absolute;
 +
    top: 120px;
 +
    right: 50px;
 +
    width: 300px;
 +
    height: 100px;
 +
   
 +
}
  
−
<div class="fox1"><p class="fox" style="font-size:40px; font-family:Aleo">&nbsp;&nbsp; Experiments</p></span></div>
+
div.fox2{position: absolute;
 +
    top: 280px;
 +
    right: 760px;
 +
    width: 300px;
 +
    height: 100px;
 +
   
 +
}
  
−
<div class="fox2"><p class="fox" style="font-size:40px; font-family:Aleo">Design</p></div>
+
div.fox3{position: absolute;
 +
    top: 690px;
 +
    right: 660px;
 +
    width: 300px;
 +
    height: 100px;
 +
   
 +
}
  
−
<div class="fox3"><p class="fox" style="font-size:40px; font-family:Aleo">Summary</p></div>
+
div.fox4{position: absolute;
 +
    top: 470px;
 +
    right: 210px;
 +
    width: 300px;
 +
    height: 100px;
 +
   
 +
}
  
−
<div class="fox4"><p class="fox" style="font-size:40px; font-family:Aleo">Parts</p></div>
+
div.fox5{position: absolute;
 +
    top: 120px;
 +
    right: 560px;
 +
    width: 300px;
 +
    height: 100px;
 +
   
 +
}
  
−
<div class="fox5"><p class="fox" style="font-size:40px; font-family:Aleo">Modeling</p></div>
 
  
−
<p class="fox"> </p>
 
  
 +
.fox{
 +
font-family:Aleo;
 +
font-size:20px;
 +
font-weight:100;
 +
        text-align:left;
 +
color:#235c81;
 +
}
  
  
  
 +
.3col{column-count:3;}
  
−
<span class="stitle">Abstract</span><br><br>
+
#vgemcollaboration {
 +
background-image:url('https://static.igem.org/mediawiki/2016/d/de/T--Virginia--collabopen.png');
 +
background-size:180px 220px; /*Adjust background-size and the width and height properties here if you wish to resize the icon*/
 +
width:180px;
 +
height:220px;
 +
z-index:20;
 +
    padding:1px
 +
background-color:#ffffff;
 +
margin-top:2px;
 +
margin-left:2px;
 +
margin-bottom:2px;
 +
    top:200px;
 +
}
  
−
<p><span class="p"> Synthetic biologists struggle to prevent the proliferation of genetically engineered organisms (GEOs) in natural systems. Containment methods that operate in ecological settings must provide security comparable to physical containment. Current methods fail to effectively inhibit horizontal gene transfer and environmental supplementation, and impose evolutionary pressure through the propagation of spontaneous revertants. Synthetic Translational Control (STC) currently utilizes a redesigned leucyl-tRNA synthetase and cleavage enzyme in an<i> E. coli</i> chassis to confer metabolic dependence on a synthetically modified leucine capable of conversion to L-leucine. Due to the semi-semantic property of this device, organisms cannot metabolically bypass our constraints using environmental supplementation and will display greater resistance to evolutionary escape relative to traditional synthetic auxotrophs. Our work provides advancement in biosafety by isolating GEOs from the environment via a reliance on modified metabolites. STC will become a benchmark for biocontainment devices and will allow for countless new applications in synthetic biology.
+
#vgemcollaboration:hover{
−
</span></p>
+
background-image:url('https://static.igem.org/mediawiki/2016/a/a5/T--Virginia--collabclosed.png');
−
<br><br><br>
+
}
−
<span class="stitle">Gold Requirement: BioBrick Part Improvement</span><br><br>
+
−
<p><span class="p">Describe, or link to modeling section</span></p>
+
  
 +
#vgemcollaboration a{
 +
display:inline-block;
 +
width:100%;
 +
height:100%;
 +
}
  
  
  
−
</div>
+
</style>
 +
</head>
  
−
</div>
 
−
</div>
 
−
</body>
 
 
</html>
 
</html>

Revision as of 10:58, 19 October 2016