Team:Berkeley

From 2013.igem.org

Revision as of 00:04, 20 August 2013 by HojaeLee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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

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;

}

<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Template:Team:Berkeley/css?action=raw&ctype=text/css">

Project Description

Some of the most major advances in synthetic biology involve the ability to use microorganisms to synthesize compounds that are difficult or costly to produce chemically. Our team hopes to exploit this familiar application of synthetic biology for the production of indigo in E. Coli.

Indigo, the very dye used to dye jeans around the world, is produced in quantities up to tens of thousands of tons every year. The chemical process involves converting vast quantities of aniline into indigo. Because indigo is extremely insoluble, this product must be reduced to leuco-indigo, a white soluble substance, using sodium dithionite. Upon immersing the cotton in leuco-indigo and exposing the coated cloth to air, indigo is allowed to reform, covalently bonding with the cloth. The wastes from this process are often discarded in large amounts - potentially altering the pH and stability of surrounding environments. Moreover, the process to produce analine is itself fraught with many unfriendly chemicals including sulfuric acid and nitric acid. With this chemical process in mind, our team seeks to improve titers of indigo using a bacterial system, thus bypassing several steps in the currently popular chemical synthesis process.

Retrieved from "http://2013.igem.org/Team:Berkeley"