Team:Berkeley/Notebooks

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
{{Team:Berkeley/header}}
{{Team:Berkeley/header}}
 +
{{Team:Berkeley/navigation}}
 +
{{Team:Berkeley/css}}
-
<html>
+
<html xmlns="http://www.w3.org/1999/xhtml">
-
<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Template:Team:Berkeley/foundation?action=raw&ctype=text/css" />
+
-
<link rel="stylesheet2" type="text/css" href="https://2013.igem.org/Template:Team:Berkeley/css?action=raw&ctype=text/css" />
+
<div id="fb-root"></div>
 +
<script>(function(d, s, id) {
 +
  var js, fjs = d.getElementsByTagName(s)[0];
 +
  if (d.getElementById(id)) return;
 +
  js = d.createElement(s); js.id = id;
 +
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
 +
  fjs.parentNode.insertBefore(js, fjs);
 +
}(document, 'script', 'facebook-jssdk'));</script>
-
<div class = "content">
+
<link rel="stylesheet" href="https://2012.igem.org/Template:Team:Berkeley/nivocss?action=raw&ctype=text/css" type="text/css"/>
-
<div class = "heading"><a name="Undergraduates">Notebook</a></div>
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 +
<script type="text/javascript" src="https://2012.igem.org/Template:Team:Berkeley/javascript/javanivoslider?action=raw&ctype=text/javascript"></script>
 +
</script>
 +
 
 +
<script>
 +
$("#slideshow > div:gt(0)").hide();
 +
setInterval(function() {
 +
  $('#slideshow > div:first')
 +
    .fadeOut(1000)
 +
    .next()
 +
    .fadeIn(1000)
 +
    .end()
 +
    .appendTo('#slideshow');
 +
},  3000);
 +
</script>
 +
 
 +
 
 +
<div class="row">
 +
<div class="col12" id="spacer4" >
 +
<div class="col12" id="spacer4">
</div>
</div>
-
    
+
<img src="https://static.igem.org/mediawiki/2012/3/37/Home_header1.jpg" width="980">
 +
</div>
 +
<div class="row">
 +
<div class="col12" id="spacer2"></div>
 +
<div class="row-end"> </div>
 +
</div>
 +
 
 +
 
 +
<div class="row">
 +
<div class="col6" align="justify" >
 +
<p>
 +
Many applications in synthetic biology demand precise control over subcellular localization, cell morphology, motility, and other such phenotypes that are only observable via microscopy. At present, engineering these properties is challenging due in large part to the inherent throughput limitation imposed by microscopy. We have developed a strategy that enables high-throughput library screening with microscopy by coupling a unique fluorescence signature with each genotype present in a library. These MiCodes (microscopy barcodes) are generated by targeting combinations of fluorophores to several organelles within yeast, and they eliminate the need to isolate and observe clonal populations separately. MiCodes can potentially scale to library sizes of 10^6 or more, and their analysis can be largely automated using existing image processing software. As a proof of principle, we applied MiCodes to the problem of finding unique pairs of protein-protein interaction parts.
 +
 
 +
<br>
 +
<br>
 +
<p>
 +
To learn more, visit the <a href="https://2012.igem.org/Team:Berkeley/Project">Project subpage</a> or jump straight to the section that interests you via the boxes below.
 +
</p>
 +
 
 +
 
 +
<br>
 +
<div class="fb-like" data-href="https://www.facebook.com/pages/UC-Berkeley-iGEM-2012/196465580443607" data-send="true" data-width="450" data-show-faces="true"></div>
 +
 
 +
</div>
 +
<div id = "spacer4">
 +
</div>
 +
<div class="col6" align="right">
 +
<div class="slider-wrapper theme-default">
 +
            <div class="ribbon"></div>
 +
            <div id="slider" class="nivoSlider">
 +
                <img src="https://static.igem.org/mediawiki/2012/c/ce/Slideshow1.jpg"/>
 +
                <img src="https://static.igem.org/mediawiki/2012/e/ea/Slideshow2.jpg"/>
 +
                <img src="https://static.igem.org/mediawiki/2012/d/db/Slideshow3.jpg"/>
 +
                <img src="https://static.igem.org/mediawiki/2012/d/db/Slideshow4.jpg"/>
 +
                <img src="https://static.igem.org/mediawiki/2012/d/d0/Slideshow5.jpg"/>
 +
                <img src="https://static.igem.org/mediawiki/2012/2/2c/Slideshow6.jpg"/>
 +
                <img src="https://static.igem.org/mediawiki/2012/f/f5/Slideshow7.jpg"/>
 +
                <img src="https://static.igem.org/mediawiki/2012/0/0d/Slideshow8.jpg"/>
 +
                <img src="https://static.igem.org/mediawiki/2012/3/39/Slideshow9.jpg"/>
 +
                <img src="https://static.igem.org/mediawiki/2012/b/b2/Slideshow10.jpg"/>
 +
                <img src="https://static.igem.org/mediawiki/2012/9/94/Slideshow11.jpg"/>
 +
                <img src="https://static.igem.org/mediawiki/2012/2/28/Slideshow12.jpg"/>
 +
                <img src="https://static.igem.org/mediawiki/2012/9/9b/Slideshow13.jpg"/>
 +
                <img src="https://static.igem.org/mediawiki/2012/b/b5/Slideshow14.jpg"/>
 +
                <img src="https://static.igem.org/mediawiki/2012/7/71/Slideshow15.jpg"/>
 +
                <img src="https://static.igem.org/mediawiki/2012/c/cc/Slideshow16.jpg"/>
 +
                <img src="https://static.igem.org/mediawiki/2012/1/17/Slideshow17.jpg"/>
 +
                <img src="https://static.igem.org/mediawiki/2012/1/17/Slideshow18.jpg"/>
 +
                <img src="https://static.igem.org/mediawiki/2012/a/aa/Slideshow19.jpg"/>
 +
                <img src="https://static.igem.org/mediawiki/2012/e/e2/Slideshow20.jpg"/>
 +
                <img src="https://static.igem.org/mediawiki/2012/6/65/Slideshow21.jpg"/>
 +
                <img src="https://static.igem.org/mediawiki/2012/2/2d/Slideshow22.jpg"/>
 +
                <img src="https://static.igem.org/mediawiki/2012/3/34/Slideshow23.jpg"/>
 +
          </div>
 +
    </div>
 +
   <script type="text/javascript">
 +
  $(window).load(function() {
 +
        $('#slider').nivoSlider();
 +
    });
 +
    </script>
 +
 
 +
 
 +
<div class="row">
 +
<div class="col12" id="spacer4"></div>
 +
<div class="row-end"> </div>
 +
</div>
 +
</div>
 +
 
 +
 
 +
<div class="row">
 +
<div class="col12" id="spacer4"></div>
 +
<div class="row-end"> </div>
 +
</div>
 +
</div>
 +
 
 +
 
 +
<div class="row">
 +
<div class="col" align = "center">
 +
<a href="https://2012.igem.org/Team:Berkeley/Project">
 +
<img src="https://static.igem.org/mediawiki/2012/d/db/Home_header2.jpg" width="980">
 +
</a></div>
 +
<div class="row-end" ></div>
 +
</div>
 +
 
 +
<div class="row">
 +
<div class="col12" id="spacer3"></div>
 +
<div class="row-end"> </div>
 +
</div>
 +
 
 +
<div class="row" align="center">
 +
<div class="col3-2"style="background-color:#101a4d;">
 +
<a href="https://2012.igem.org/Team:Berkeley/Project/Localization">
 +
<img src="https://static.igem.org/mediawiki/2012/9/9e/Home_subheader1.jpg"
 +
onmouseover="this.src='https://static.igem.org/mediawiki/2012/e/e0/Home_subheader1_hover.jpg'"
 +
onmouseout="this.src='https://static.igem.org/mediawiki/2012/9/9e/Home_subheader1.jpg'" width="230"></a>
 +
<p style="text-align:center; color:#cccccc;">Localization tags, promoter optimization, and promoter characterization.</p> </div>
 +
 
 +
<div class="col3-2"style="background-color:#333333;">
 +
<a href="https://2012.igem.org/Team:Berkeley/Project/Construction">
 +
<img src="https://static.igem.org/mediawiki/2012/9/96/Home_subheader2.jpg"
 +
onmouseover="this.src='https://static.igem.org/mediawiki/2012/9/90/Home_subheader2_hover.jpg'"
 +
onmouseout="this.src='https://static.igem.org/mediawiki/2012/9/96/Home_subheader2.jpg'" width="230"> </a>
 +
<p style="text-align:center; color:#FFFFFF;">MiCode construction using Golden Gate Assembly.</p></div>
 +
 
 +
<div class="col3-2" style="background-color:#101a4d">
 +
<a href="https://2012.igem.org/Team:Berkeley/Project/Automation">
 +
<img src="https://static.igem.org/mediawiki/2012/1/18/Home_subheader3.jpg"
 +
onmouseover="this.src='https://static.igem.org/mediawiki/2012/1/1d/Home_subheader3_hover.jpg'" width="230"
 +
onmouseout="this.src='https://static.igem.org/mediawiki/2012/1/18/Home_subheader3.jpg'" width="230"></a>
 +
<p style="text-align:center; color:#cccccc;">Automation techniques for image acquisition and cell identification with Matlab and Cell Profiler.</p></div>
 +
 
 +
<div class="col3-2"style="background-color:#333333">
 +
<a href="https://2012.igem.org/Team:Berkeley/Project/Zippers">
 +
<img src="https://static.igem.org/mediawiki/2012/a/a7/Home_subheader4.jpg"
 +
onmouseover="this.src='https://static.igem.org/mediawiki/2012/5/58/Home_subheader4_hover.jpg'"
 +
onmouseout="this.src='https://static.igem.org/mediawiki/2012/a/a7/Home_subheader4.jpg'" width="230"></a>
 +
<p style="text-align:center; color:#FFFFFF;">Leucine Zippers affinity assay.</p></div>
 +
<div class ="row-end"> </div>
 +
</div>
 +
 
 +
 
 +
<br>
 +
<div class="row">
 +
<div class="col" align = "center">
 +
<img src="https://static.igem.org/mediawiki/2012/9/99/Home_header3.jpg" width="980">
 +
<div class ="row-end"></div>
 +
</div>
 +
 
 +
<div class="row">
 +
<div class="col1" align="justify" >
 +
<p>The UC Berkeley iGEM team would like to thank Agilent and the Synthetic Biology Institute for their financial support, Synberc for their administrative support, and IDT for discounted oligos. </p>
 +
</div>
 +
 
 +
<div class = "row">
 +
<div class="col1" align="center">
 +
<a href="http://www.home.agilent.com/agilent/home.jspx?cc=US&lc=eng">
 +
<img src="https://static.igem.org/mediawiki/2012/6/6b/Agilent_logo.png" width="800" ></a>
 +
<a href="http://synbio.berkeley.edu/">
 +
<img src="https://static.igem.org/mediawiki/2012/0/05/SynBioInst_logo.png" width="800"></a>
 +
<a href="http://www.synberc.org/">
 +
<img src="https://static.igem.org/mediawiki/2012/6/67/SynBERC_logo.png" width="300" > </a>
 +
<a href="http://www.nsf.gov/">
 +
<img src="https://static.igem.org/mediawiki/2012/7/7e/NSF_logo.png" width="250"></a>
 +
<a href="http://www.idt.com/">
 +
<img src="https://static.igem.org/mediawiki/2012/0/0a/IDT_logo_trans.png" width="300"></a>
 +
 
 +
 
 +
<div class="row-end">
 +
</div>
 +
</div>
 +
 
 +
 
 +
<img src="http://hitwebcounter.com/counter/counter.php?page=4590797&style=0024&nbdigits=5&type=ip&initCount=149" title="Go http://www.hitwebcounter.com/" Alt="Go http://www.hitwebcounter.com/"  border="0" >
 +
<br/>
 +
 
 +
 
 +
 
 +
 
 +
<div class="row">
 +
<div class="col12" id="spacer4"></div>
 +
<div class="row-end">
 +
</div>
 +
 
 +
</body>
 +
 
</html>
</html>

Revision as of 22:57, 2 September 2013

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


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; }

  1. inner-content{

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

body{ font-family: serif;

font-size: medium; }

  1. jeans_top img.jeans-image-first {

margin-left:0% }

  1. jeans_top img.jeans-image-last {

margin-right:0% }

  1. 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%; }

  1. TitleID a{

font-size: 160%; }

  1. globalWrapper {

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

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

  1. 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

*/
  1. p-logo,
  2. catlinks {display: none;}
  1. top-section {

position: fixed; 

       top: 0;
       width: 100%;
       height: 0;
       border: none;
       z-index: 100;}
  1. search-controls {display: none;}
  1. menubar {

display: table-cell; background: transparent; 

       font-size: 11px;}
  1. top-section #menubar ul { 
       -webkit-margin-before: 2px;
       -webkit-margin-after: 2px;
       -webkit-padding-start: 40px;
       margin: .3em 0 0 1.5em;}
  1. menubar.left-menu {width: 100%; padding-top: 6px;}
  1. menubar.right-menu {text-align: right; padding-top: 6px;}
  1. menubar * {

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

  1. top-section:hover #menubar * {color: #333 !important;}
  1. top-section #menubar ul li a:hover {color: #0d9c64 !important; text-decoration: none;}
  1. top-section:hover #menubar.left-menu {background: rgba(255, 255, 255, 0.75) !important; border-bottom: 1px solid #0d9c64;}

/* Footer

*/
  1. 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;
       }
  1. f-poweredbyico {position:relative;top: 9px;}
  2. 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;

}

  1. globalWrapper {width: 100%;}
  2. 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; }

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

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

  1. footer-box {

background: #BABABA; border:none; }

  1. p-logo{display:none;}
  2. search-controls{

display:none; }

  1. top-section{

width: 100%;

//background: url(Noise_pattern_8.jpg); 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;

}

  1. 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;

}

  1. bodyContent {

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

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

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

/*

  1. tab { 
 margin-left: 20px; 
 margin-bottom: 64px;
 display: block;

}

  1. tab ul { 
 list-style: none;
 float: left;
 width: auto;

}

  1. tab li { 
 float: left;
 margin: 0 1em 0 0;

}

  1. 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;

}

  1. tab a:hover { 
 background-color: #f1f1f1;
 color: #0000AA;
 border-color: #0000AA;

}

  1. tab #selected a { 
 background-color: #f1f1f1;
 color: #000050;
 border-color: #000050;

}

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

/*

  1. stages{ 
 width: 80%;
 height: 100px; 
 margin: auto;

}

  1. stages ul{ 
 list-style: none;
 padding: 0px;
 margin: 0px;

}

  1. stages li{ 
 float: left;
 text-align: center;
 color: #000050;
 margin: 5px;

}

  1. 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;

}

  1. stages ul > li.active:before { 
 color: #4ee54e;
 text-shadow: 0px 0px 10px #56ff5f;

}

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

.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;

}

  1. 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 */ /*


  1. cssmenu,
  2. main-nav ul,
  3. main-nav ul li,
  4. main-nav ul li a { 
 padding: 0;
 margin: 0;
 line-height: 1;
 font-family: 'Capriola', sans-serif;

}

  1. main-nav:before,
  2. main-nav:after,
  3. main-nav > ul:before,
  4. main-nav > ul:after { 
 content: ;
 display: table;

}

  1. main-nav:after,
  2. main-nav > ul:after { 
 clear: both;

}


  1. main-nav { 
 zoom: 1;
 height: 63px;
 background: url(Nav_whxite.png) 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;

}

  1. main-nav { 
   text-align: justify;

}

  1. main-nav :after { 
   content: ;
   display: inline-block;
   width: 100%;

}

  1. main-nav li { 
   display: inline-block;

}

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

}

  1. main-nav ul li#projectBlue {

/* width: 23%; */ }

  1. main-nav ul li#humanPractices { 
   /* width: 22%; */

}

  1. 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;

}

  1. main-nav ul li:first-child a { 
 /* margin: 4px 2px 0 0; */

}

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

background:white; }

  1. main-nav ul li a:hover,
  2. main-nav ul li.active a { 
 display: block;
 color: white;
 text-shadow: white;
 opacity: 1;

}

  1. main-nav ul ul { 
 display: none;
 left: 0px;

}

  1. 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; */

}

  1. 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); */

}

  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%;

}

  1. 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;

}

  1. main-nav ul li ul li a :after{

display:block; text-align: start; }

  1. 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;

}

  1. main-nav ul li ul li.odd a:hover,
  2. main-nav ul li ul li.active a { 
 display: block;
 color: white;
 text-shadow: white;
 opacity: 1;

}

  1. main-nav ul li ul li:hover a,
  2. 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;

}

  1. main-nav img.nav-image#outreach {

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

  1. main-nav img.nav-image#plant {

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

  1. main-nav img.nav-image#solubilizing {

width:100px; height:auto; }

  1. main-nav img.nav-image#lumi {

width: 190px; height:auto; }

  1. main-nav img.nav-image#safety {

width:100px; height:auto; }

  1. main-nav img.nav-image { 
 width:200px;
 height:85px;
 margin: 10%;
 margin-left: auto;
 margin-right:auto;
 display: block;
 float: middle;

}

  1. 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);

}

  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;

}

  1. 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; */

}

  1. header-image-inner-inner {

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


  1. header-image img.firstHeaderImg { 
 height: auto;
 width: 19%;
 margin-left: 1%;

}

  1. header-image img.secondHeaderImg { 
 height: auto;
 width: 50%;
 margin-left: 4%;
 margin-right: 4%;

}

  1. 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 */ /*

  1. cssmenu1,
  2. cssmenu1 ul,
  3. cssmenu1 ul li,
  4. cssmenu1 ul li a { 
 padding: 0;
 margin: 0;
 line-height: 1;
 font-family: 'Capriola', sans-serif;

}

  1. cssmenu1:before,
  2. cssmenu1:after,
  3. cssmenu1 > ul:before,
  4. cssmenu1 > ul:after { 
 content: ;
 display: table;

}

  1. cssmenu1:after,
  2. cssmenu1 > ul:after { 
 clear: both;

}

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

}

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

}

  1. cssmenu1 ul li { 
 float: left;
 list-style: none;

}

  1. 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;

}

  1. cssmenu1 ul li:first-child a { 
 margin: 4px 2px 0 0;

}

  1. cssmenu1 ul li a:hover,
  2. 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;

}

Many applications in synthetic biology demand precise control over subcellular localization, cell morphology, motility, and other such phenotypes that are only observable via microscopy. At present, engineering these properties is challenging due in large part to the inherent throughput limitation imposed by microscopy. We have developed a strategy that enables high-throughput library screening with microscopy by coupling a unique fluorescence signature with each genotype present in a library. These MiCodes (microscopy barcodes) are generated by targeting combinations of fluorophores to several organelles within yeast, and they eliminate the need to isolate and observe clonal populations separately. MiCodes can potentially scale to library sizes of 10^6 or more, and their analysis can be largely automated using existing image processing software. As a proof of principle, we applied MiCodes to the problem of finding unique pairs of protein-protein interaction parts.

To learn more, visit the Project subpage or jump straight to the section that interests you via the boxes below.


Localization tags, promoter optimization, and promoter characterization.

MiCode construction using Golden Gate Assembly.

Automation techniques for image acquisition and cell identification with Matlab and Cell Profiler.

Leucine Zippers affinity assay.


The UC Berkeley iGEM team would like to thank Agilent and the Synthetic Biology Institute for their financial support, Synberc for their administrative support, and IDT for discounted oligos.

Go http://www.hitwebcounter.com/

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