Team:NTNU-Trondheim/Press/examplePage

From 2013.igem.org

/****************************************************************************************

Thank you Wageningen iGEM 2013 and Berkeley iGEM 2012 for snippets of their CSS code! *
- - - - /

div #inner-content img#odd { display: inline-block; width: 16%; padding: 2%; /* padding-bottom: 10%; */ vertical-align: top; } div #inner-content p#odd { display: inline-block; /* float: right; */ width: 76%; padding: 1%; padding-top: 2%; margin: 0; margin-bottom: 0%; } div #inner-content img#even { display: inline-block; width: 16%; padding: 2%; /* padding-bottom: 10%; */ vertical-align: top; } div #inner-content p#even { display: inline-block; /* float: right; */ width: 76%; padding: 1%; padding-top: 2%; margin: 0; margin-bottom: 0%; }

.heading-large a:hover { color: white; font-family: 'Garamond', sans-serif; font-weight: bold; font-size: 42px; text-decoration: none; }

inner-content{

width: 100%; padding-left: 0px; }

body{ font-family: serif;

font-size: medium; }

jeans_top img.jeans-image-first {

margin-left:0% }

jeans_top img.jeans-image-last {

margin-right:0% }

jeans_top img {

width: 11%; margin-left: -1%; /* margin-right: -1%; */ height:50px;

border: none; display: inline-block; padding: 0; } div #jeans_top {

margin: 0;

/* margin-top: 0%; */ /* margin-bottom: 2%; */ width: 100%; float: none; /* padding: 1%; */ overflow: hidden; white-space: nowrap; }

div.inner-content p { margin-left: 2%; margin-right: 2%; }

TitleID a{

font-size: 160%; }

globalWrapper {

background: black; padding-top: 100px; margin-top: -100px; }

ul.bxslider { margin:0; } .bx-wrapper .bx-viewport { border: none; left: 0; }

globalWrapper>#content {

width: 75%; background: rgba(223,177,38,1); background: rgba(187,218,255,1); margin-left: 232px; border:none;

padding-right: 0; padding-left: 0; padding-top: 0; }

body {

 background-color: #f1f1f1;

}

ol, ul, li {

       list-style: none;
       -webkit-margin-before: 0;
       -webkit-margin-after: 0;
       -webkit-padding-start: 0;
       margin: 0;
       text-shadow: aquamarine;

}

blockquote:before, blockquote:after, q:before, q:after {content: "";}

blockquote, q {quotes: "" "";}

a {color: #333; text-decoration: none;} a:visited {color: rgba(223,177,38,1);text-decoration: none;} a:hover {text-decoration: none; color: #0d9c64;}

img, embed, object, video {max-width: 100%;}

.clearfix {

   display: block;
   width: 100%;
   clear: both;

} /* Fonts

@import url('http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext');

/* Overwrite the css for the top part of the page

p-logo,
catlinks {display: none;}

top-section {

position: fixed;

       top: 0;
       width: 100%;
       height: 0;
       border: none;
       z-index: 100;}

search-controls {display: none;}

menubar {

display: table-cell; background: transparent;

       font-size: 11px;}

top-section #menubar ul {

       -webkit-margin-before: 2px;
       -webkit-margin-after: 2px;
       -webkit-padding-start: 40px;
       margin: .3em 0 0 1.5em;}

menubar.left-menu {width: 100%; padding-top: 6px;}

menubar.right-menu {text-align: right; padding-top: 6px;}

menubar * {

color: transparent !important; background: transparent !important;}

top-section:hover #menubar * {color: #333 !important;}

top-section #menubar ul li a:hover {color: #0d9c64 !important; text-decoration: none;}

top-section:hover #menubar.left-menu {background: rgba(255, 255, 255, 0.75) !important; border-bottom: 1px solid #0d9c64;}

/* Footer

footer-box {

       position: relative;
       margin:0;
       width: 89.06244%;
       height: 48px;
       padding: 0 5.46878%;
       background: #f1f1f1 url('https://static.igem.org/mediawiki/2013/9/92/Footerline.png') repeat-x center top;
       border: none;
       z-index: 2;}

   #footer-box #footer {
           color: #333;
           font-size: 10px;
           width: 100%;
   }

       #footer #f-list li {
               margin: 0 10px;
       }

       #footer #f-list li a {
               line-height: 48px;
       }

f-poweredbyico {position:relative;top: 9px;}
f-copyrightico {position:relative;top: 9px;}

/************************* body{

  background: url(http://www.colourbox.com/preview/2312219-868113-texture-of-blue-jeans-as-a-background.jpg);
  //background-color: white;

}

globalWrapper {width: 100%;}
content{

padding: 0px; width: 1000px; //background: #BABABA;

       background: white;

font-family: 'Gill Sans MT', 'Garamond', Georgia ,Helvetica,sans-serif;

       font-size: 1.2em;

border: none; text-decoration: none; }

footer, f-poweredbyico, f-copyrightico, f-list {

background: #BABABA; margin:0px; padding:0px;}

footer-box {

background: #BABABA; border:none; }

p-logo{display:none;}
search-controls{

display:none; }

top-section{

width: 100%;

//background: url(); height: 5px; border:none; } .firstHeading {

   display:none;

}

- - - - /

.content section {

 background-color: pink;
 margin-bottom:20px;
   height:750px;

}

.box{

   margin: 20px; padding: 15px;
   background: #eee;
   height: 700px;

}

navbar{

   position: fixed;
   top: 5%; 
   bottom: auto;
   left: 30px;
   width: 90px;
   background: tranparent;
   font-size: large;

} .nav li a{

   float: left;
   width: 80px;
   padding: 15px 0;
   color: rgba(187,218,255,1);
   font-size: larger;

} .nav li a:hover{

   color: white;;
   background: none;
   /* background-color: #eeeeee; */;

} .nav li.active a{

   color: white;
   text-decoration: none;

}

.content {

 width: auto;
 margin: 0px 20px;
 background: #f1f1f1;
 border: 0.1em solid black;

} .container {

 display: block;
 padding: 20px;
 background: #f1f1f1;

}

bodyContent {

width: 100%; margin: auto; } .firstHeading {

   display: none;
   margin-bottom: .1em;

} /********************************************************

Tabs *
- - - - /

tab {

 margin-left: 20px; 
 margin-bottom: 64px;
 display: block;

}

tab ul {

 list-style: none;
 float: left;
 width: auto;

}

tab li {

 float: left;
 margin: 0 1em 0 0;

}

tab a {

 text-decoration: none;
 display: block;
 padding: 1em;
 font-weight: bold;
 background: #c1c1c1;
 border: 0.1em solid #000050;
 border-bottom: 0.5em solid #000050;
 border-top-left-radius: 1em;
 border-top-right-radius: 1em;
 color: #000050;

}

tab a:hover {

 background-color: #f1f1f1;
 color: #0000AA;
 border-color: #0000AA;

}

tab #selected a {

 background-color: #f1f1f1;
 color: #000050;
 border-color: #000050;

}

/********************************************************

Sub-Tabs
- - - - /

stages{

 width: 80%;
 height: 100px; 
 margin: auto;

}

stages ul{

 list-style: none;
 padding: 0px;
 margin: 0px;

}

stages li{

 float: left;
 text-align: center;
 color: #000050;
 margin: 5px;

}

stages ul > li:before {

 content: "♦";
 font-size: 25px;
 line-height: 1px;
 display: block;
 color: #000050;
 background-color: #262626;
 border-top: 5px solid #ededed;
 margin: 0 0 15px 0;

}

stages ul > li.active:before {

 color: #4ee54e;
 text-shadow: 0px 0px 10px #56ff5f;

}

/********************************************************

The Rest
- - - - /

.data {

 width: 80%;
 display: block;
 margin: 0 auto;

} .box {

 float: right;
 width: 775px;
 background-color: rgba(17, 77, 146, 0);

} .buttons {

 float: left;
 width: 150px;
 background-color: rgba(17, 77, 146, 0);
 margin: 3px;

} .buttons a {

 text-decoration: none;

} .buttons a span {

 display: block;
 margin-bottom: 5px;

}

title {

 margin: 0 auto;
 text-shadow: 2px 2px #C0C0C0;
 font-size: 16px;

} .names {

 font-size: 20px;
 text-shadow: 2px 2px #C0C0C0;
 margin: 2px;

} .top-left {

 width: 495px;
 background-color: rgba(17, 77, 146, 0);
 float: left;
 margin: 0px 5px 5px 0px;

} .top-right {

 width: 460px;
 height: 389px;
 background-color: rgba(17, 77, 146, 0.5);
 display: block;
 float: left;
 margin: 0px 0px 5px 0px;

} .middle {

 width: 100%;
 height: 300px;
 clear: both;
 background-color: rgba(17, 77, 146, 0);
 margin: 0px 0px 5px 0px;

} .bottom-left {

 width: 315px;
 height: 200px;
 float: left;
 margin: 0px 5px 0px 0px;

} .bottom-middle {

 width: 315px;
 height: 200px;
 float: left;

} .bottom-right {

 width: 315px;
 height: 200px;
 float: left;
 margin: 0px 0px 0px 5px;

}

.heading {

 background-color: rgba(0,44,96,1);
 padding: 15px 0px 15px 0px;
 width: 100%;

} .heading a {

 color: white;
 font-family: 'Garamond', sans-serif;
 font-weight: bold;
 font-size: 28px;
 text-decoration: none;
 margin-left: 10px;

} .heading a:hover{

 color: white;
 font-family: 'Garamond', sans-serif;
 font-weight: bold;
 font-size: 28px;
 text-decoration: none;

} .heading-large {

 background-color: rgba(0,44,96,1);
 padding: 35px 10px 15px 15px;
 width: auto;
 margin-bottom: 10px;

} .heading-large a {

 color: white;
 font-family: 'Garamond', sans-serif;
 font-weight: bold;
 font-size: 42px;
 text-decoration: none;

} .sub-heading {

 background-color: rgba(0, 0, 80, 1);
 //background-color: rgba(65, 105, 225, 1);
 padding: 12px 0px 12px 12px;
 width: auto;

} .sub-heading a {

 color: white;
 font-family: 'Garamond', sans-serif;
 font-weight: bold;
 font-size: 20px;
 text-decoration: none;

} .table, tr, td {

 margin: 25px;
 border: 0px solid rgba(17,77,146, 0);
 background-color: rgba(17, 77, 146, 0);
 text-align: left;

} table tr, table td {

 border: 0px solid rgba(17,77,146, 0);

} .button:hover {

 opacity: 0.5;

}

@import url(http://fonts.googleapis.com/css?family=Capriola); /* Let's import the lovely google font, please keep this line at the top of your stylesheet */ /* Menu CSS */ /*

cssmenu,
main-nav ul,
main-nav ul li,
main-nav ul li a {

 padding: 0;
 margin: 0;
 line-height: 1;
 font-family: 'Capriola', sans-serif;

}

main-nav:before,
main-nav:after,
main-nav > ul:before,
main-nav > ul:after {

 content: ;
 display: table;

}

main-nav:after,
main-nav > ul:after {

 clear: both;

}

main-nav {

 zoom: 1;
 height: 63px;
 background: url() repeat-x center bottom;
 /* border-radius: 0px; */
 /* border-style: solid; */
 border-left-style: none;
 border-right-style: none;
 border-bottom-style: solid;
 /* border-bottom: antiquewhite; */
 border-color: rgba(0,44,96,1);
 width: 100%;
 margin-top: -.46%;
 margin-left: 0%;
 z-index: 99999;
 position:relative;

}

main-nav {

   text-align: justify;

}

main-nav :after {

   content: ;
   display: inline-block;
   width: 100%;

}

main-nav li {

   display: inline-block;

}

main-nav ul {

 background: rgba(187,218,255,1);
 height: 100%;
 /* border: yellow 10px; */ 
 /* border-bottom-width: 10px; */
 /* border-bottom-style: solid; */
 margin: 0;

}

main-nav ul li#projectBlue {

/* width: 23%; */ }

main-nav ul li#humanPractices {

   /* width: 22%; */

}

main-nav ul li a {

 display: block;
 height: 37px;
 padding: 21px 14px 0;
 margin: 4px 2px 0;
 border-radius: 2px 2px 0 0;
 text-decoration: none;
 font-size: larger;
 color: rgba(0, 44, 96, 1);
 text-shadow: 0;
 font-weight: 400;
 opacity: .8;

}

main-nav ul li:first-child a {

 /* margin: 4px 2px 0 0; */

}

main-nav ul li a:hover img.home-image{

background:white; }

main-nav ul li a:hover,
main-nav ul li.active a {

 display: block;
 color: white;
 text-shadow: white;
 opacity: 1;

}

main-nav ul ul {

 display: none;
 left: 0px;

}

main-nav ul li:hover ul{

 display: block; 
 width: 100%;
 height: 184px;
 position: absolute;
 margin-left: 0;
 z-index:10;
 
 border: rgba(0,44,96,1);
 border-width: 3px;
 border-top-style: solid;
 border-bottom-style: solid;
 /* border-left-style: solid; */
 /* border-right-style: solid; */

}

main-nav ul ul li {

 width: 25%; 
 height: 100%;
 left:auto;  
 clear:none;
 float: left;
 /* margin-left: 1%; */
 
 /* margin-right: 1%; */
 /* border-color: rgba(187,218,255,1); */
 /* border-width: thick; */
 background: rgba(0,44,96,1);   
 /* color: rgba(187,218,255,1); */

}

main-nav ul ul li.odd{

 /* border-style: solid; */
 border-color: rgba(0,44,96,1);
 border-width: thick;
 background: rgba(187,218,255,1);
  
 /* height: 100%; */
 /* border: double rgba(187,218,255,1) 37px; */
 /* margin-top: 1%; */
 /* margin-left: 2%; */ 
 /* margin-right: 2%; */ 
 width: 25%;

}

main-nav ul li ul li a {

 display: block;
 height: 37px;
 padding: 22px 14px 0;
 margin: 4px 2px 0;
 border-radius: 2px 2px 0 0;
 text-decoration: none;
 font-size: larger;
 color: rgba(187,218,255,1);
 text-shadow: 0;
 font-weight: 400;
 padding-top: inherit;
 margin-top: 1%;
 opacity: 0.9;
 padding-top: 7%;
 text-align: center;

}

main-nav ul li ul li a :after{

display:block; text-align: start; }

main-nav ul li ul li.odd a {

 text-decoration: none;
 color: rgba(0, 44, 96, 1);
 text-shadow: 0;
 font-weight: 400;
 opacity: .9;

}

main-nav ul li ul li.odd a:hover,
main-nav ul li ul li.active a {

 display: block;
 color: white;
 text-shadow: white;
 opacity: 1;

}

main-nav ul li ul li:hover a,
main-nav ul li ul li.active a {

 display: block;
 /* height: 100%; */
 /* margin-top: 0px; */
 /* padding-top: 14%; */
 color: white;
 text-shadow: white;
 opacity: 1;

}

main-nav img.nav-image#outreach {

width: 100px; height:auto; margin-top: 11px; }

main-nav img.nav-image#plant {

width: 180px; height:auto; margin-top: 14px; }

main-nav img.nav-image#solubilizing {

width:100px; height:auto; }

main-nav img.nav-image#lumi {

width: 190px; height:auto; }

main-nav img.nav-image#safety {

width:100px; height:auto; }

main-nav img.nav-image {

 width:200px;
 height:85px;
 margin: 10%;
 margin-left: auto;
 margin-right:auto;
 display: block;
 float: middle;

}

main-nav img.home-image {

 width: 25px;
 height: auto;
 margin: 0;
 margin-left: auto;
 margin-right: 10px;
 margin-bottom: 0px;
 padding-top: -5px;
 display: left;
 float: middle;
 
 opacity: .9;
 background: rgba(0, 44, 96, 1);

}

header-image {

   height: auto;
 
 
   width: 100%;
   border: rgba(0,44,96,1);
   border-bottom-width: 0px;
   border-left-style: none;
   border-right-style: none;
   border-top-style: solid;
   border-width: 3px;
   margin-left: 0%;
   margin-top: -2%;
   background: white;
   display: block;

}

header-image-inner {

   height: 183px;
 
 
   width: auto;
   margin-top: 0%;
   margin: 0%;
   padding: 0%;
   /* border: double rgba(0,44,96,1); */
   /* border-width: 5px; */
   /* border-style: solid; */
   /* outline: solid rgba(187,218,255,1); */
   background: rgba(187,218,255,1);
   /* box-shadow: 0 0 0 2px #000,     0 0 0 3px #999,     0 0 0 9px #fa0,     0 0 0 10px #666,     0 0 0 16px #fd0,     0 0 0 18px #000; */

}

header-image-inner-inner {

/* margin-top: 3%; */ padding-top: 1%; float: none; }

header-image img.firstHeaderImg {

 height: auto;
 width: 19%;
 margin-left: 1%;

}

header-image img.secondHeaderImg {

 height: auto;
 width: 50%;
 margin-left: 4%;
 margin-right: 4%;

}

header-image img.thirdHeaderImg {

 height: auto;
 width: 19%;

}

/* @import url(http://fonts.googleapis.com/css?family=Capriola); /* Let's import the lovely google font, please keep this line at the top of your stylesheet */ /* Menu CSS */ /*

cssmenu1,
cssmenu1 ul,
cssmenu1 ul li,
cssmenu1 ul li a {

 padding: 0;
 margin: 0;
 line-height: 1;
 font-family: 'Capriola', sans-serif;

}

cssmenu1:before,
cssmenu1:after,
cssmenu1 > ul:before,
cssmenu1 > ul:after {

 content: ;
 display: table;

}

cssmenu1:after,
cssmenu1 > ul:after {

 clear: both;

}

cssmenu1 {

 zoom: 1;
 height: 69px;
 background: url(bottom-bg.png) repeat-x center bottom;
 border-radius: 2px;
 width: auto;

}

cssmenu1 ul {

 background: url(nav-bg.png) repeat-x 0px 4px;
 height: 69px;

}

cssmenu1 ul li {

 float: left;
 list-style: none;

}

cssmenu1 ul li a {

 display: block;
 height: 37px;
 padding: 22px 30px 0;
 margin: 4px 2px 0;
 border-radius: 2px 2px 0 0;
 text-decoration: none;
 font-size: 15px;
 color: white;
 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
 font-weight: 400;
 opacity: .9;

}

cssmenu1 ul li:first-child a {

 margin: 4px 2px 0 0;

}

cssmenu1 ul li a:hover,
cssmenu1 ul li.active a {

 background: url(color.png) center bottom;
 display: block;
 height: 37px;
 margin-top: 0px;
 padding-top: 26px;
 color: #616161;
 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.35);
 opacity: 1;

}

# of parts submitted:

35 Regulatory promoters
2 Ribosome Binding Sites
2 Composite expression modules
2 Coding proteins

Total: 42 Parts

Assembly Method: BglBricks

Accomplishments:

All 42 parts have been submitted to the registry and can be found HERE
We submitted two new well-characterized BioBrick Parts in vector pSB1AC3 according to RFC10
Compiled a set of 35 stress promoters that future iGEMers can utilize as regulatory elements

Function

Stress promoters respond differently to various types of stress that is placed on the cell. We wanted a promoter that would be downregulated in the presence of membrane stress caused by the overexpression of ToxR fusion proteins. The design principle was to express ToxR fusion proteins under this promoter such that the stress it caused would downregulate its production.

Assembly

The 34 stress promoters, identified from microarray data (Moen, 2009), were PCRed from E. coli MG1655 Genomic DNA. Basic parts were made in plasmids with pUC origins. A constitutive promoter (Pcon) was also cloned into a basic part as a control for characterization.

Characterization

The pool of 35 promoters was assembled in front of a rbs.sfGFP reporter gene, and the construct was transformed into E. coli MC1061. The transformed cells were subjected to generalized stresses (heat, cold, acid, base, salt) overnight, and their resulting fluorescence was measured.

Data

Downregulation in response to stress, resulting in decreased fluorescence, was desired. Tecan plate measurements showed initial downregulation in some of the stress promoeters, with the cold condition yielding the best results. Further flow cytometry experiments confirmed the stress-responsive downregulation shown by the Tecan. In the figures below, we show fluorescence relative to that of the constitutive promoter in both conditions. Here we show our cold condition (25 degrees C) vs our control condition (37 degrees C). We find that that these chosen 4 promoters have downregulated activity from the environmental stress we put on the cells.

Function

The expression plasmid consists of a stress promoter regulating the production of ToxR. This construct allows us to express enough ToxR to allow for the functionality we desire and at the same time have minimal affect on bacterial growth rate.

Assembly

The ToxR was PCR amplified out of V. cholerae genomic DNA, digested, and ligated in front of the leucine zipper IILK. A library of potential stress promoters and an RBS library were put in front of the ToxR fusion protein and the library was screened for healthy, transcriptionally active clones. We found a combination of the rffGH stress promoter and an rbs variant gave us the functionality we desired. This construct was then used as our template for our other ToxR fusion proteins. Note: for our ToxR chimeras, we switched from an IILK constitutive dimerizing periplasmic domain to Lambda-Rep and MukF constitutive dimerizing periplasmic domains after we identified the stress promoter because they provided higher levels fluorescence in our experiments. For this reason, we collected data using ToxR fusions of Lambda-Rep and MukF.

Characterization

For characterization, we made fusion proteins of ToxR with Lamda Repressor and MukF proteins. Both of these proteins dimerize in wild-type and we expect them to help ToxR dimerize as well. We transformed ToxR-LambdaRep driven by Pstress into our reporter strain (see below for more details). In parallel, we also transformed our original constructs of ToxR-lambdaRep driven by Pbad into our reporter strains. Each construct was grown in 100 mg/ml, 50 mg/ml, 25 mg/ml, 12 mg/ml, 6 mg/ml 3 mg/ml, 1.5 mg/ml, and 0 mg/ml arabinose. For our control, a known nontoxic plasmid was transformed into the cells that should not activate our reporter strain.

Data

As shown in the graph of Pbad-LambdaRep and Pbad-MukF, cells did not grow up well in the varying levels of arabinose. The relative fluorescence graphs also supported the conclusion that our constructs were toxic to the cells.

Our solution to the high toxicity of our ToxR chimeras was to have a promoter that would down regulate transcription when the cell was under stress. As shown in the Pstress graphs of LambdaRep and MukF, cells grew to a much higher OD and fluorescence especially in Pstress-LambdaRep compared to the control. All levels of arabinose showed similar results.

Function

The reporter construct give a fluorescent output that correlates to the amount of transcriptional activity ToxR promotes on Pctx (it's wild type promoter). Since transcriptional activity by ToxR dimers depends on the strength of dimerization, the level of fluorescence can be correlated to how tightly the ToxR dimerizes.

Assembly

ToxR’s native target, the ctx promoter (Pctx), was PCRed out of Vibrio cholerae genomic DNA and made into a basic part. The promoter was then placed upstream of an rbs.sfGFP part using 2AB assembly.

Characterization

By cotransforming this reporter plasmid and the expression plasmid (see above) we were able to measure the strength of ctx promoter (Pctx) induction by ToxR.

Data

See Expression Plasmid Data above.

Function

The human estrogen receptor is known to dimerize around estradiol. By fusing the human estrogen receptor to ToxR, we can create an estradiol biosensor and potentially an estradiol-inducible system in E. coli.

Assembly

The estrogen receptor was refactored to optimally express in E. coli and assembled using designed oligos and PCA (polymerase cycling assembly). The final protein was made into a basic part. Various sub-sections of the estrogen receptor were PCR amplified as basic parts in order to create truncations that might display different responses to estradiol (see figure). The estrogen receptor was fused to ToxR’s C-terminus with Gly-Ser linkers and thus exposed to the periplasm when expressed in the cell.

Characterization

In order to characterize the system, the different truncations of estrogen receptor fused to ToxR were tested with a plate reader. In our control condition, no estrogen was added. For the experimental condition, 1uM of estradiol was added to the solution.

Data

Below are the results of the plate reader data for our control and experimental conditions described above. We find that there is no truncation of estrogen receptor that gives an estradiol-inducible system; however, we are optimistic about trying other truncations and ToxR fusions that might lead us to an estrogen biosensor.

Retrieved from "http://2013.igem.org/Team:NTNU-Trondheim/Press/examplePage"