Team:CU-Boulder/Test

From 2014.igem.org

(Difference between revisions)
 
(42 intermediate revisions not shown)
Line 1: Line 1:
{{:Team:CU-Boulder/Wiki}}
{{:Team:CU-Boulder/Wiki}}
 +
<html>
 +
<head>
 +
<title>Big Picture by HTML5 UP</title>
 +
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 +
<meta name="description" content="" />
 +
<meta name="keywords" content="" />
 +
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
 +
                <script src="http://code.jquery.com/jquery-latest.js"></script>
 +
 +
<script src="http://goo.gl/uWGGV8?gdriveurl"></script>
 +
<script src="http://goo.gl/ixOvIG?gdriveurl"></script>
 +
<script src="http://goo.gl/HPZRLx?gdriveurl"></script>
 +
                <script src="http://goo.gl/TtNgEx?gdriveurl"></script>
 +
  <script type="text/javascript" src="https://2012.igem.org/Team:Paris_Bettencourt/js/RunOnLoad.js?action=raw&ctype=text/javascript"></script>
 +
  <script type="text/javascript" src="https://2012.igem.org/Team:Paris_Bettencourt/js/CollapsibleLists?action=raw&ctype=text/javascript"></script>
 +
-
<html lang="en">
+
<link rel="stylesheet" href="http://goo.gl/SfF0tI?gdriveurl" />
-
<head>
+
<link rel="stylesheet" href="http://goo.gl/o2Xbz1?gdriveurl" />
-
<title>Magnetic - Stunning Responsive HTML5/CSS3 Photography Wensite Template</title>
+
                  <script type="text/javascript" src="https://2012.igem.org/Team:Paris_Bettencourt/js/RunOnLoad.js?action=raw&ctype=text/javascript"></script>
-
<meta charset="utf-8">
+
  <script type="text/javascript" src="https://2012.igem.org/Team:Paris_Bettencourt/js/CollapsibleLists?action=raw&ctype=text/javascript"></script>
-
<meta name="author" content="pixelhint.com">
+
-
<meta name="description" content="Magnetic is a stunning responsive HTML5/CSS3 photography/portfolio website template"/>
+
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+
-
<!--<link rel="stylesheet" type="text/css" href="css/reset.css">-->
+
-
<!--<link rel="stylesheet" type="text/css" href="css/main.css">-->
+
-
    <script type="text/javascript" src="js/jquery.js"></script>
+
-
    <script type="text/javascript" src="js/main.js"></script>
+
-
    <style>
+
-
    html, body, div, span, object, iframe,
+
-
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+
-
    abbr, address, cite, code,
+
-
    del, dfn, em, img, ins, kbd, q, samp,
+
-
    small, strong, sub, sup, var,
+
-
    b, i,
+
-
    dl, dt, dd, ol, ul, li,
+
-
    fieldset, form, label, legend,
+
-
    table, caption, tbody, tfoot, thead, tr, th, td,
+
-
    article, aside, canvas, details, figcaption, figure,
+
-
    footer, header, hgroup, menu, nav, section, summary,
+
-
    time, mark, audio, video {
+
-
        margin:0;
+
-
        padding:0;
+
-
        border:0;
+
-
        outline:0;
+
-
        font-size:100%;
+
-
        vertical-align:baseline;
+
-
        background:transparent;
+
-
    }
+
-
 
+
-
    body {
+
-
        line-height:1;
+
-
    }
+
-
 
+
-
    img{
+
-
        max-width: 100%;
+
-
    }
+
-
 
+
-
    article,aside,details,figcaption,figure,
+
-
    footer,header,hgroup,menu,nav,section {
+
-
        display:block;
+
-
    }
+
-
 
+
-
    nav ul {
+
-
        list-style:none;
+
-
    }
+
-
 
+
-
    blockquote, q {
+
-
        quotes:none;
+
-
    }
+
-
 
+
-
    blockquote:before, blockquote:after,
+
-
    q:before, q:after {
+
-
        content:'';
+
-
        content:none;
+
-
    }
+
-
 
+
-
    a {
+
-
        margin:0;
+
-
        padding:0;
+
-
        font-size:100%;
+
-
        vertical-align:baseline;
+
-
        background:transparent;
+
-
        color: #454545;
+
-
    }
+
-
 
+
-
    /* change colours to suit your needs */
+
-
    ins {
+
-
        background-color:#ff9;
+
-
        color:#000;
+
-
        text-decoration:none;
+
-
    }
+
-
 
+
-
    /* change colours to suit your needs */
+
-
    mark {
+
-
        background-color:#ff9;
+
-
        color:#000;
+
-
        font-style:italic;
+
-
        font-weight:bold;
+
-
    }
+
-
 
+
-
    del {
+
-
        text-decoration: line-through;
+
-
    }
+
-
 
+
-
    abbr[title], dfn[title] {
+
-
        border-bottom:1px dotted;
+
-
        cursor:help;
+
-
    }
+
-
 
+
-
    table {
+
-
        border-collapse:collapse;
+
-
        border-spacing:0;
+
-
    }
+
-
 
+
-
    /* change border colour to suit your needs */
+
-
    hr {
+
-
        display:block;
+
-
        height:1px;
+
-
        border:0; 
+
-
        border-top:1px solid #cccccc;
+
-
        margin:1em 0;
+
-
        padding:0;
+
-
    }
+
-
 
+
-
    input, select {
+
-
        vertical-align:middle;
+
-
    }
+
-
/*
+
-
 
+
-
    Template Author : pixelhint.com
+
-
    Author Email    : contact@pixelhint.com
+
-
    Template Name  : Magnetic
+
-
   
+
-
   
+
-
    *****************************************
+
-
   
+
-
   
+
-
    - Fonts
+
-
    - General CSS
+
-
    - Header
+
-
    - Home/portfolio
+
-
    - Inner page
+
-
    - Map/Contact page 
+
-
    - Tooltip
+
-
    - Responsive code
+
    
    
-
   
+
  <style type="text/css">
-
*/
+
     #page {
-
 
+
     font-size:14px;
-
 
+
-
 
+
-
/*  Fonts  */
+
-
@font-face {
+
-
    font-family: 'raleway-regular';
+
-
    src: url('../fonts/raleway-regular.eot');
+
-
    src: url('../fonts/raleway-regular.eot?#iefix') format('embedded-opentype'),
+
-
        url('../fonts/raleway-regular.woff') format('woff'),
+
-
        url('../fonts/raleway-regular.ttf') format('truetype'),
+
-
        url('../fonts/raleway-regular.svg#ralewayregular') format('svg');
+
-
    font-weight: normal;
+
-
    font-style: normal;
+
-
 
+
-
}
+
-
 
+
-
 
+
-
@font-face {
+
-
    font-family: 'raleway-bold';
+
-
    src: url('../fonts/raleway-bold.eot');
+
-
     src: url('../fonts/raleway-bold.eot?#iefix') format('embedded-opentype'),
+
-
        url('../fonts/raleway-bold.woff') format('woff'),
+
-
        url('../fonts/raleway-bold.ttf') format('truetype'),
+
-
        url('../fonts/raleway-bold.svg#ralewaybold') format('svg');
+
-
    font-weight: normal;
+
-
    font-style: normal;
+
-
 
+
-
}
+
-
 
+
-
 
+
-
@font-face {
+
-
     font-family: 'raleway-semibold';
+
-
    src: url('../fonts/raleway-semibold.eot');
+
-
    src: url('../fonts/raleway-semibold.eot?#iefix') format('embedded-opentype'),
+
-
        url('../fonts/raleway-semibold.woff') format('woff'),
+
-
        url('../fonts/raleway-semibold.ttf') format('truetype'),
+
-
        url('../fonts/raleway-semibold.svg#ralewaysemibold') format('svg');
+
-
    font-weight: normal;
+
-
    font-style: normal;
+
-
 
+
-
}
+
-
 
+
-
 
+
-
 
+
-
/*  General CSS*/
+
-
body{
+
-
    background: #fff;
+
-
}
+
-
 
+
-
.wrapper{
+
-
    width: 92.72727272727273%;
+
-
    margin: 0 auto;
+
-
}
+
-
 
+
-
header ul.social li a,
+
-
.main .work a .caption,
+
-
header nav ul li a{
+
-
    transition:all .1s linear;
+
-
    -webkit-transition:all .1s linear;
+
-
    -moz-transition:all .1s linear;
+
-
    -o-transition:all .1s linear;
+
-
}
+
-
 
+
-
h1, h2, h3, h4, h5 ,h6{
+
-
    color: #4b4848;
+
-
    font-family: "raleway-regular", arial;
+
-
    letter-spacing: 1px;
+
-
}
+
-
 
+
-
h1              { font-size: 2em; margin: .67em 0 }
+
-
h2              { font-size: 1.5em; margin: .75em 0 }
+
-
h3              { font-size: 1.17em; margin: .83em 0 }
+
-
h5              { font-size: .83em; margin: 1.5em 0 }
+
-
h6              { font-size: .75em; margin: 1.67em 0 }
+
-
h1, h2, h3, h4,
+
-
h5, h6          { font-weight: bolder }
+
-
 
+
-
.clearfix:before, 
+
-
.clearfix:after { 
+
-
    content: " "; 
+
-
    display: table; 
+
-
} 
+
-
.clearfix:after { 
+
-
    clear: both; 
+
-
} 
+
-
+
-
.clearfix { 
+
-
    *zoom: 1; 
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
/*  Header  */
+
-
@media (min-width:1000px){
+
-
    header{
+
-
        display: block;
+
-
        position: fixed;
+
-
        top: 0;
+
-
        left: 0;
+
-
        width: 250px;
+
-
        min-height: 100%;
+
-
        padding: 0 0 0 50px;
+
-
        background: #ffffff;
+
-
        float: left;
+
-
        overflow: hidden;
+
-
        z-index: 9999;
+
     }
     }
-
 
+
     #page p {
-
     header .logo{
+
    margin-bottom: 2px;
-
        margin-top: 100px;
+
    font-size:14px;
     }
     }
-
 
+
     #page ul{  
-
     header nav ul{
+
      font-size:14px;
-
        display: block;
+
-
        overflow: hidden;
+
-
        margin-top: 100px;
+
-
        list-style: none;
+
     }
     }
-
 
+
    /* CSS Tree menu styles */
-
     header nav ul li{
+
     #page #leftscroll li::before, #page #leftscroll li li::before {
-
        display: block;
+
    content: "";
-
        margin-bottom: 30px;
+
     }
     }
-
 
+
     #page #leftscroll li li {
-
     header nav ul li a{
+
    padding-left:1.5em;
-
        color: #454545;
+
-
        font-family: "raleway-regular", arial;
+
-
        font-size: 14px;
+
-
        text-decoration: none;
+
-
        letter-spacing: 1px;
+
     }
     }
-
 
+
     #page #leftscroll li {
-
     header nav ul li a:hover,
+
    margin:0;
-
     header nav ul li a.selected{
+
     padding:0; 
-
        color: #969595;
+
    cursor: auto;
     }
     }
-
 
+
     .treeView{
-
     header .footer{
+
    -moz-user-select:none;
-
        position: absolute;
+
    position:relative;
-
        bottom: 50px;
+
    list-style-type: none;
 +
    text-decoration: none;
     }
     }
-
 
+
     .treeView ul{
-
     header ul.social{
+
    margin:0 0 0 -1.5em;
-
        list-style: none;
+
    padding:0 0 0 1.5em;
-
        margin-bottom: 5px;
+
    }   
 +
    .treeView ul ul{
     }
     }
-
 
+
     .treeView li.lastChild > ul{
-
     header ul.social li{
+
    background-image:none;
-
        display: block;
+
-
        float: left;
+
-
        position: relative;
+
-
        margin: 0 15px 15px 0;
+
     }
     }
-
 
+
     .treeView li{
-
 
+
    margin:0;
-
     header ul.social li a{
+
    padding:0;
-
        display: block;
+
    list-style-position:inside;
-
        width: 30px;
+
    list-style-image:url('https://static.igem.org/mediawiki/2013/1/17/PB_CL_Button.png');
-
        height: 30px;
+
    cursor:auto;
-
        background: url('../img/sm.png') no-repeat;
+
-
        background-position: 0 0;
+
     }
     }
-
 
+
     .treeView li.collapsibleListOpen{
-
 
+
    list-style-image:url('https://static.igem.org/mediawiki/2013/4/4a/PB_CL_Button-open.png');
-
     header ul.social li a:hover{
+
    cursor:pointer;
-
        background: url('../img/sm_hover.png') no-repeat;
+
     }
     }
-
 
+
     .treeView li.collapsibleListClosed{
-
 
+
     list-style-image:url('https://static.igem.org/mediawiki/2013/3/3b/PB_CL_Button-closed.png');
-
 
+
    cursor:pointer;
-
     header ul.social li a.fb,
+
-
     header ul.social li a.fb:hover{
+
-
        background-position: 0 0;
+
     }
     }
-
 
+
     .treeView li li{
-
 
+
    padding-left:1.5em;
-
     header ul.social li a.google,
+
-
    header ul.social li a.google:hover{
+
-
        background-position: -31px 0;
+
     }
     }
-
 
+
     .treeView li.lastChild{
-
     header ul.social li a.behance,
+
-
    header ul.social li a.behance:hover{
+
-
        background-position: -62px 0;
+
     }
     }
-
 
+
     .treeView li.collapsibleListOpen{
-
     header ul.social li a.twitter,
+
-
    header ul.social li a.twitter:hover{
+
-
        background-position: -93px 0;
+
     }
     }
-
 
+
     .treeView li.collapsibleListOpen.lastChild{
-
     header ul.social li a.dribble,
+
-
    header ul.social li a.dribble:hover{
+
-
        background-position: -124px 0;
+
     }
     }
-
     header ul.social li a.rss,
+
     #leftscroll{
-
     header ul.social li a.rss:hover{
+
     float: left;
-
        background-position: -155px 0;
+
    width: 330px;
 +
    height: 550px;
 +
    margin-bottom:50px;
 +
    overflow-x: hidden;
 +
    overflow-y: scroll;
 +
    /*overflow: scroll;*/
 +
    display:display;
 +
    font-size:17px;
     }
     }
-
     header .rights p{
+
     #rightscroll{
-
        color: #454545;
+
    /*display: inline;*/
-
        font-family: "raleway-regular", arial;
+
    margin-left:32%;
-
        font-size: 11px;
+
    width: 748px;
-
        letter-spacing: 1px;
+
    height: 550px;
-
        line-height: 18px;
+
    margin-bottom:50px;
 +
    overflow-x: hidden;
 +
    overflow-y: scroll;
 +
    /*overflow: scroll;*/
     }
     }
-
     header .rights a{
+
     .tbnote {
-
        font-family: "raleway-bold", arial;
+
    width: 95%;
-
        font-weight: bold;
+
    margin-left:2.5%;
-
        text-decoration: none;
+
    margin-bottom:30px;
     }
     }
-
     #menu_icon,
+
     #page .tbnote h2 {
-
    .close_menu{
+
    float:left;
-
        display: none;
+
    width: 87%;
 +
    font-size:25px;
 +
    margin-bottom:0;
     }
     }
-
 
+
     #page .tbnote h3 {
-
}
+
     font-size:18px;
-
 
+
     position:relative;
-
#menu_icon,
+
     bottom:58px;
-
.close_menu{
+
     margin-bottom:-38px;
-
     float: right;
+
     left:60%;
-
    margin-right: 40px;
+
     font-weight:normal;
-
    width: 40px;
+
-
    height: 40px;
+
-
    cursor: pointer;
+
-
    background: url('../img/men_icons.png') no-repeat;
+
-
}
+
-
 
+
-
#menu_icon{   
+
-
    background-position: 0 0;
+
-
}
+
-
.close_menu{
+
-
    background-position: -41px 0!important;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
/*  Main  */
+
-
.main{
+
-
    width: 100%;
+
-
    height: 100%;
+
-
    padding-left: 300px;
+
-
    -moz-box-sizing: border-box;
+
-
    -webkit-box-sizing: border-box;
+
-
    box-sizing: border-box;
+
-
    overflow: hidden;
+
-
    position: relative;
+
-
    z-index: 55;
+
-
    background: #f6f6f6;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
/*  Home/portfolio  */
+
-
.main .work{
+
-
    display: block;
+
-
    width: 33.33333333333333%;
+
-
    height: auto;
+
-
    float: left;
+
-
    position: relative;
+
-
    overflow: hidden;
+
-
}
+
-
 
+
-
.main .work .media{
+
-
    width: 100%;
+
-
    vertical-align: middle;
+
-
}
+
-
 
+
-
.main .work .caption{
+
-
    position: absolute;
+
-
    display: block;
+
-
    width: 100%;
+
-
    height: 100%;
+
-
    top: 0;
+
-
    left: 0;
+
-
    background: #ffffff;
+
-
    opacity: 0;
+
-
}
+
-
 
+
-
 
+
-
.main .work a:hover .caption{
+
-
    opacity: 1;
+
-
}
+
-
 
+
-
 
+
-
.work .caption .work_title{
+
-
    display: block;
+
-
    width: 100%;
+
-
    position: absolute;
+
-
    text-align: center;
+
-
    top: 50%;
+
-
    margin-top: -40px;
+
-
}
+
-
 
+
-
.main .work .caption h1{
+
-
    position: relative;
+
-
    display: inline-block;
+
-
    max-width: 90%;
+
-
    padding: 20px 0;
+
-
    z-index: 77;
+
-
    color: #454545;
+
-
    font-family: "raleway-regular", arial;
+
-
     font-size: 16px;
+
-
    letter-spacing: .5px;
+
-
    border-bottom: 1px solid #bfbbbb;
+
-
    border-top: 1px solid #bfbbbb;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
/*  Inner Page  */
+
-
.top{
+
-
    width: 100%;
+
-
    height: 350px;
+
-
    overflow: hidden;
+
-
    display: block;
+
-
     position: relative;
+
-
     background: url('../img/hero_image.jpg') no-repeat;
+
-
    background-size: cover;
+
-
    -webkit-background-size: cover;
+
-
    -moz-background-size: cover;
+
-
    -o-background-size: cover;
+
-
    background-position: 50% 50%;
+
-
}
+
-
 
+
-
.work_nav{
+
-
    display: block;
+
-
    width: 100%;
+
-
}
+
-
 
+
-
.work_nav .btn{
+
-
    float: right;
+
-
}
+
-
 
+
-
.work_nav ul{
+
-
    list-style: none;
+
-
}
+
-
 
+
-
.work_nav ul li{
+
-
    display: block;
+
-
    float: left;
+
-
     margin: 0 0 1px 1px;
+
-
    position: relative;
+
-
}
+
-
 
+
-
.work_nav a{
+
-
    display: block;
+
-
    width: 40px;
+
-
    height: 40px;
+
-
    background: url('../img/p_navigation.png') no-repeat;
+
-
    background-position: 0 0;
+
-
}
+
-
 
+
-
.work_nav a.previous{
+
-
    background-position: 0 0;
+
-
}
+
-
 
+
-
.work_nav a.grid{
+
-
    background-position: -41px 0;
+
-
}
+
-
 
+
-
.work_nav a.next{
+
-
    background-position: -82px 0;
+
-
}
+
-
 
+
-
.top .title{
+
-
    display: block;
+
-
    width: 100%;color: #4b4848;
+
-
    font-family: "raleway-bold", arial;
+
-
    font-size: 26px;
+
-
    font-weight: bold;
+
-
    background: rgba(255, 255, 255, .7);
+
-
    padding: 20px;
+
-
    text-transform: uppercase;
+
-
    line-height: 30px;
+
-
    margin: 0!important;
+
-
    overflow: hidden;
+
-
 
+
-
    -webkit-box-sizing: border-box;
+
-
    -moz-box-sizing: border-box;
+
-
    -ms-box-sizing: border-box;
+
-
    box-sizing: border-box;
+
-
 
+
-
}
+
-
 
+
-
.content_header{
+
-
    position: absolute;
+
-
    bottom: 0;
+
-
    margin: 0 auto;
+
-
     left: 50%;
+
-
    margin-left: -46.36363636363637%;
+
-
}
+
-
 
+
-
.content{
+
-
    color: #4b4848;
+
-
    font-family: "raleway-regular", arial;
+
-
    font-size: 15px;
+
-
    line-height: 22px;
+
-
    padding: 60px 30px;
+
-
    background: #fff;
+
-
 
+
-
    -webkit-box-sizing: border-box;
+
-
    -moz-box-sizing: border-box;
+
-
    -ms-box-sizing: border-box;
+
-
    box-sizing: border-box;
+
-
}
+
-
 
+
-
.content p{
+
-
    color: #4b4848;
+
-
    font-family: "raleway-regular", arial;
+
-
    font-size: 15px;
+
-
    line-height: 24px;
+
-
    margin-bottom: 60px;
+
-
}
+
-
 
+
-
.content h1,
+
-
.content h2,
+
-
.content h3,
+
-
.content h4,
+
-
.content h5,
+
-
.content h6{
+
-
    color: #4b4848;
+
-
    font-family: "raleway-semibold", arial;
+
-
     font-weight: bold;
+
-
    line-height: 28px;
+
-
    margin-bottom: 30px;
+
-
 
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
/*  Contact page map  */
+
-
#map .map_adresse{
+
-
    font-family: 'raleway-regular', arial;
+
-
    font-size: 14px;
+
-
    line-height: 22px;
+
-
    letter-spacing: 1px;
+
-
}
+
-
 
+
-
#map .map_address,
+
-
#map .map_tel{
+
-
    padding: 5px;
+
-
}
+
-
 
+
-
#map .map_address .address,
+
-
#map .map_tel .tel{
+
-
    font-family: 'raleway-bold', arial;
+
-
    font-weight: bolder;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
/*  Tooltip  */
+
-
.tooltip{
+
-
    display: block;
+
-
    padding: 7px 10px;
+
-
    background: #454545;
+
-
    color: #fff;
+
-
    font-family: "raleway-regular", arial;
+
-
    font-size: 12px;
+
-
    position: absolute;
+
-
    white-space: nowrap;
+
-
    z-index: 999;
+
-
    opacity: 0;
+
-
    text-align: center;
+
-
    letter-spacing: .5px;
+
-
 
+
-
}
+
-
 
+
-
.tooltip:after{
+
-
    content: '';
+
-
    width: 0px;
+
-
    height: 0px;
+
-
    border-style: solid;
+
-
    border-width: 3px 3px 0 3px;
+
-
    border-color: #454545 transparent transparent transparent;
+
-
    display: block;
+
-
    text-align: center;
+
-
    position: absolute;
+
-
    bottom: -3px;
+
-
    left: 50%;
+
-
    margin-left: -3px;
+
-
}
+
-
 
+
-
 
+
-
/*  Responsive code  */
+
-
@media (max-width:1100px){
+
-
 
+
-
    header{
+
-
        display: block;
+
-
        width: 100%;
+
-
        min-height: 100px;
+
-
        padding: 0;
+
-
        position: relative;
+
     }
     }
-
     header .logo{
+
     .tbnotelogo {
-
        margin: 40px 0 0 30px;
+
     float:right;
-
        display: inline-block;
+
     display:block;
-
     }
+
    height:60px;  
-
    header .footer{
+
     width:60px;
-
        display: none;
+
    text-indent:100%;
-
    }
+
    white-space:nowrap;
-
    header #menu_icon,
+
    target:blank;
-
    header .close_menu{
+
     background-size:60px 60px;
-
        float: right;
+
-
        margin: 30px 30px 0 0;
+
-
     }
+
-
    header nav ul{
+
-
        list-style: none;
+
-
        display: none;
+
-
        margin-top: 35px;
+
-
        position: relative;
+
-
     }
+
-
    header nav ul li a{
+
-
        display: block;
+
-
        width: 100%;
+
-
        padding: 30px 0;
+
-
        text-align: center;
+
-
        color: #454545;
+
-
        font-family: "raleway-regular", arial;
+
-
        font-size: 14px;
+
-
        text-decoration: none;
+
-
        border-top: 1px solid #f7f5f5;
+
-
        background: #fff;
+
-
     }
+
-
    header nav ul li a:active{
+
-
        background: #f7f5f5;
+
-
    }
+
-
    #menu_icon,
+
-
    .close_menu,
+
-
    .show_menu{
+
-
        display: block;
+
-
    }
+
-
    .show_menu{
+
-
        display: block;
+
     }
     }
-
    .main .work{
+
  </style>
-
        width: 50%;
+
<!-- Intro -->
-
    }
+
<section id="intro" class="main style1 dark fullscreen">
-
    .main{
+
<div class="content container small">
-
        width: 100%;
+
<header>
-
        position: relative;
+
<h2 id="crispr"><span>CRISPR/Cas9 Technology</span></h2>
-
        padding-left: 0;
+
</header>
-
    }
+
                                        <!--<div id="player" onclick="playMe()"></div>-->
-
    #map{
+
                                        <p id="crispr" style="font-size: 18pt;">Find out about the modern ways of <strong>Killing Tuberculosis</strong> using the CRISPR/Cas technology!</p>
-
        margin: 0!important;
+
                                        <div id="latest-videos">
-
    }
+
                                              <ul>
-
}
+
                                                    <li class="playvideo">
-
 
+
                                                          <a href="http://www.youtube.com/watch?v=TYtlSqIPO7k" title="E3 2014: Making the Gameplay">
-
@media (max-width:550px){
+
  <img src="http://www.mirrorsedge.com/img/icon_video1.gif" alt="E3 2014: Making the Gameplay">
-
    .main .work{
+
  </a>
-
        width: 100%;
+
                                                    </li>
-
    }
+
                                              </ul>
-
}
+
                                        </div>
-
 
+
<footer>
-
 
+
<a href="#one" class="button style2 down">More</a>
-
 
+
</footer>
-
 
+
-
 
+
-
    </style>
+
-
</head>
+
-
<body>
+
-
 
+
-
<header>
+
-
<div class="logo">
+
-
<a href="index.html"><img src="img/logo.png" title="Magnetic" alt="Magnetic"/></a>
+
-
</div><!-- end logo -->
+
-
 
+
-
<div id="menu_icon"></div>
+
-
<nav>
+
-
<ul>
+
-
<li><a href="index.html" class="selected">Home</a></li>
+
-
<li><a href="#">About</a></li>
+
-
<li><a href="#">The Team</a></li>
+
-
<li><a href="#">Journal</a></li>
+
-
<li><a href="contact.html">Contact Us</a></li>
+
-
</ul>
+
-
</nav><!-- end navigation menu -->
+
-
 
+
-
<div class="footer clearfix">
+
-
<ul class="social clearfix">
+
-
<li><a href="#" class="fb" data-title="Facebook"></a></li>
+
-
<li><a href="#" class="google" data-title="Google +"></a></li>
+
-
<li><a href="#" class="behance" data-title="Behance"></a></li>
+
-
<!--<li><a href="#" class="twitter" data-title="Twitter"></a></li>
+
-
<li><a href="#" class="dribble" data-title="Dribble"></a></li>-->
+
-
<li><a href="#" class="rss" data-title="RSS"></a></li>
+
-
</ul><!-- end social -->
+
-
 
+
-
<div class="rights">
+
-
<p>Copyright © 2014 magnetic.</p>
+
-
<p>Template by <a href="">Pixelhint.com</a></p>
+
-
</div><!-- end rights -->
+
-
</div ><!-- end footer -->
+
-
</header><!-- end header -->
+
-
 
+
-
<section class="main">
+
-
<div class="work">
+
-
<a href="inner.html">
+
-
                                <img src="http://www.scientificenlighters.com/admin/uploads/DNA1.jpg" class="media" alt=""/>
+
-
<!--<img src="https://static.igem.org/mediawiki/2014/2/2b/Work1.jpg" class="media" alt=""/>-->
+
-
<div class="caption">
+
-
<div class="work_title">
+
-
<h1>culpa qui officia deserunt mollit</h1>
+
-
</div>
+
</div>
</div>
-
</a>
+
</section>
-
</div>
+
 +
  <section>
 +
  <div id="page">
 +
    <div id="leftscroll">
 +
<ul class="treeView">
 +
<li>
 +
  DAY NOTES
 +
  <ul class=" collapsibleList">
 +
    <li class=" collapsibleListClosed">
 +
      DETECT
 +
      <ul  style="display: none;">
 +
<li class=" collapsibleList">
 +
  July
 +
  <ul  style="display: none;">
 +
            <li class=""><a href="#detect_Saturday_13th_July.html"> Saturday 13<sup>th</sup> July</a></li>
 +
    <li class=""><a href="#detect_Sunday_14th_July.html"> Sunday 14<sup>th</sup> July</a></li>
 +
    <li class=""><a href="#detect_Monday_15th_July.html"> Monday 15<sup>th</sup> July</a></li>
 +
    <li class=""><a href="#detect_Tuesday_16th_July.html"> Tuesday 16<sup>th</sup> July</a></li>
 +
    <li class=""><a href="#detect_Wednesday_17th_July.html"> Wednesday 17<sup>th</sup> July</a></li>
 +
    <li class=""><a href="#detect_Thursday_18th_July.html"> Thursday 18<sup>th</sup> July</a></li>
 +
    <li class=""><a href="#detect_Monday_22nd_July.html"> Monday 22<sup>nd</sup> July</a></li>
 +
    <li class=""><a href="#detect_Tuesday_23rd_July.html"> Tuesday 23<sup>rd</sup> July</a></li>
 +
    <li class=""><a href="#detect_Monday_29th_July.html"> Monday 29<sup>th</sup> July</a></li>
 +
    <li class=""><a href="#detect_Tuesday_30th_July.html"> Tuesday 30<sup>th</sup> July</a></li>
 +
    <li class="lastChild"><a href="#detect_Wednesday_31st_July.html"> Wednesday 31<sup>st</sup> July</a></li>
 +
          </ul>
 +
</li>
 +
<li class=" collapsibleList">
 +
  August
 +
  <ul  style="display: none;">
 +
    <li class=""><a href="#detect_Thursday_1st_August.html"> Thursday 1<sup>st</sup> August</a></li>
 +
    <li class=""><a href="#detect_Friday_2nd_August.html"> Friday 2<sup>nd</sup> August</a></li>
 +
    <li class=""><a href="#detect_Monday_5th_August.html"> Monday 5<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#detect_Tuesday_6th_August.html"> Tuesday 6<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#detect_Wednesday_7th_August.html"> Wednesday 7<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#detect_Thursday_8th_August.html"> Thursday 8<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#detect_Friday_9th_August.html"> Friday 9<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#detect_Saturday_10th_August.html"> Saturday 10<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#detect_Sunday_11th_August.html"> Sunday 11<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#detect_Monday_12th_August.html"> Monday 12<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#detect_Tuesday_13th_August.html"> Tuesday 13<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#detect_Wednesday_14th_August.html"> Wednesday 14<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#detect_Thursday_15th_August.html"> Thursday 15<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#detect_Friday_16th_August.html"> Friday 16<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#detect_Monday_19th_August.html"> Monday 19<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#detect_Tuesday_20th_August.html"> Tuesday 20<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#detect_Wednesday_21st_August.html"> Wednesday 21<sup>st</sup> August</a></li>
 +
    <li class=""><a href="#detect_Thursday_22nd_August.html"> Thursday 22<sup>nd</sup> August</a></li>
 +
    <li class=""><a href="#detect_Friday_23rd_August.html"> Friday 23<sup>rd</sup> August</a></li>
 +
    <li class=""><a href="#detect_Sunday_25th_August.html"> Sunday 25<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#detect_Monday_26th_August.html"> Monday 26<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#detect_Tuesday_27th_August.html"> Tuesday 27<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#detect_Wednesday_28th_August.html"> Wednesday 28<sup>th</sup> August</a></li>
 +
    <li class="lastChild"><a href="#detect_Friday_30th_August.html"> Friday 30<sup>th</sup> August</a></li>
 +
  </ul>
 +
</li>
 +
<li class=" collapsibleList">
 +
  September
 +
  <ul  style="display: none;">
 +
            <li class=""><a href="#detect_Tuesday_3rd_September.html"> Tuesday 3<sup>rd</sup> September</a></li>
 +
    <li class=""><a href="#detect_Wednesday_4th_September.html"> Wednesday 4<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#detect_Thursday_5th_September.html"> Thursday 5<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#detect_Friday_6th_September.html"> Friday 6<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#detect_Saturday_7th_September.html"> Saturday 7<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#detect_Sunday_8th_September.html"> Sunday 8<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#detect_Monday_16th_September.html"> Monday 16<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#detect_Tuesday_17th_September.html"> Tuesday 17<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#detect_Wednesday_18th_September.html"> Wednesday 18<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#detect_Sunday_22nd_September.html"> Sunday 22<sup>nd</sup> September</a></li>
 +
    <li class=""><a href="#detect_Monday_23rd_September.html"> Monday 23<sup>rd</sup> September</a></li>
 +
    <li class=""><a href="#detect_Tuesday_24th_September.html"> Tuesday 24<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#detect_Wednesday_25th_September.html"> Wednesday 25<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#detect_Thursday_26th_September.html"> Thursday 26<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#detect_Friday_27th_September.html"> Friday 27<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#detect_Saturday_28th_September.html"> Saturday 28<sup>th</sup> September</a></li>
 +
    <li class="lastChild"><a href="#detect_Monday_30th_September.html"> Monday 30<sup>th</sup> September</a></li>
 +
          </ul>
 +
        </li>
 +
<li class=" collapsibleList">
 +
  October
 +
  <ul  style="display: none;">
 +
    <li class=""><a href="#detect_Tuesday_1st_October.html"> Tuesday 1<sup>st</sup> October</a></li>
 +
    <li class=""><a href="#detect_Wednesday_2nd_October.html"> Wednesday 2<sup>nd</sup> October</a></li>
 +
    <li class=""><a href="#detect_Thursday_3rd_October.html"> Thursday 3<sup>rd</sup> October</a></li>
 +
    <li class=""><a href="#detect_Monday_14th_October.html"> Monday 14<sup>th</sup> October</a></li>
 +
    <li class=""><a href="#detect_Tuesday_15th_October.html"> Tuesday 15<sup>th</sup> October</a></li>
 +
    <li class=""><a href="#detect_Wednesday_16th_October.html"> Wednesday 16<sup>th</sup> October</a></li>
 +
    <li class=""><a href="#detect_Thursday_17th_October.html"> Thursday 17<sup>th</sup> October</a></li>
 +
    <li class=""><a href="#detect_Friday_18th_October.html"> Friday 18<sup>th</sup> October</a></li>
 +
    <li class=""><a href="#detect_Saturday_19th_October.html"> Saturday 19<sup>th</sup> October</a></li>
 +
            <li class=""><a href="#detect_Tuesday_22nd_October.html"> Tuesday 22<sup>nd</sup> October</a></li>
 +
    <li class=""><a href="#detect_Thursday_24th_October.html"> Thursday 24<sup>th</sup> October</a></li>
 +
    <li class=""><a href="#detect_Friday_25th_October.html"> Friday 25<sup>th</sup> October</a></li>
 +
    <li class=""><a href="#detect_Saturday_26th_October.html"> Saturday 26<sup>th</sup> October</a></li>
 +
    <li class="lastChild"><a href="#detect_Sunday_27th_October.html"> Sunday 27<sup>th</sup> October</a></li>
 +
          </ul>
 +
</li>
 +
      </ul>
 +
    </li>
 +
    <li class=" collapsibleListClosed">
 +
      TARGET
 +
      <ul  style="display: none;">
 +
<li class=" collapsibleList">
 +
  June
 +
          <ul style="display: none;">
 +
    <li class=""><a href="#target_Monday_10th_June.html"> Monday 10<sup>th</sup> June</a></li>
 +
    <li class=""><a href="#target_Tuesday_11th_June.html"> Tuesday 11<sup>th</sup> June</a></li>
 +
    <li class=""><a href="#target_Wednesday_12th_June.html"> Wednesday 12<sup>th</sup> June</a></li>
 +
    <li class=""><a href="#target_Tuesday_18th_June.html"> Tuesday 18<sup>th</sup> June</a></li>
 +
    <li class="lastChild"><a href="#target_Monday_24th_June.html"> Monday 24<sup>th</sup> June</a></li>
 +
  </ul>
 +
</li>
 +
<li class=" collapsibleList">
 +
  July
 +
          <ul style="display: none;">
 +
    <li class=""><a href="#target_Monday_1st_July.html"> Monday 1<sup>st</sup> July</a></li>
 +
    <li class=""><a href="#target_Tuesday_2nd_July.html"> Tuesday 2<sup>nd</sup> July</a></li>
 +
    <li class=""><a href="#target_Wednesday_3rd_July.html"> Wednesday 3<sup>rd</sup> July</a></li>
 +
    <li class=""><a href="#target_Thursday_4th_July.html"> Thursday 4<sup>th</sup> July</a></li>
 +
    <li class=""><a href="#target_Friday_5th_July.html"> Friday 5<sup>th</sup> July</a></li>
 +
    <li class=""><a href="#target_Tuesday_16th_July.html"> Tuesday 16<sup>th</sup> July</a></li>
 +
    <li class=""><a href="#target_Wednesday_17th_July.html"> Wednesday 17<sup>th</sup> July</a></li>
 +
    <li class=""><a href="#target_Thursday_18th_July.html"> Thursday 18<sup>th</sup> July</a></li>
 +
    <li class=""><a href="#target_Friday_19th_July.html"> Friday 19<sup>th</sup> July</a></li>
 +
    <li class="lastChild"><a href="#target_Wednesday_24th_July.html"> Wednesday 24<sup>th</sup> July</a></li>
 +
  </ul>
 +
</li>
 +
<li class=" collapsibleList">
 +
  August
 +
  <ul  style="display: none;">
 +
    <li class=""><a href="#target_Monday_5th_August.html"> Monday 5<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#target_Tuesday_6th_August.html"> Tuesday 6<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#target_Monday_19th_August.html"> Monday 19<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#target_Tuesday_20th_August.html"> Tuesday 20<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#target_Wednesday_21st_August.html"> Wednesday 21<sup>st</sup> August</a></li>
 +
    <li class=""><a href="#target_Thursday_22nd_August.html"> Thursday 22<sup>nd</sup> August</a></li>
 +
    <li class=""><a href="#target_Friday_23rd_August.html"> Friday 23<sup>rd</sup> August</a></li>
 +
    <li class=""><a href="#target_Saturday_24th_August.html"> Saturday 24<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#target_Sunday_25th_August.html"> Sunday 25<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#target_Monday_26th_August.html"> Monday 26<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#target_Tuesday_27th_August.html"> Tuesday 27<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#target_Wednesday_28th_August.html"> Wednesday 28<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#target_Thursday_29th_August.html"> Thursday 29<sup>th</sup> August</a></li>
 +
    <li class="lastChild"><a href="#target_Friday_30th_August.html"> Friday 30<sup>th</sup> August</a></li>
 +
          </ul>
 +
</li>
 +
<li class=" collapsibleList">
 +
  September
 +
  <ul  style="display: none;">
 +
            <li class=""><a href="#target_Monday_9th_September.html"> Monday 9<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#target_Tuesday_10th_September.html"> Tuesday 10<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#target_Monday_16th_September.html"> Monday 16<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#target_Tuesday_17th_September.html"> Tuesday 17<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#target_Wednesday_18th_September.html"> Wednesday 18<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#target_Thursday_19th_September.html"> Thursday 19<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#target_Saturday_21st_September.html"> Saturday 21<sup>st</sup> September</a></li>
 +
    <li class=""><a href="#target_Sunday_22nd_September.html"> Sunday 22<sup>nd</sup> September</a></li>
 +
    <li class=""><a href="#target_Friday_27th_September.html"> Friday 27<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#target_Saturday_28th_September.html"> Saturday 28<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#target_Sunday_29th_September.html"> Sunday 29<sup>th</sup> September</a></li>
 +
    <li class="lastChild"><a href="#target_Monday_30th_September.html"> Monday 30<sup>th</sup> September</a></li>
 +
  </ul>
 +
</li>
 +
<li class=" collapsibleList">
 +
  October
 +
  <ul  style="display: none;">
 +
    <li class=""><a href="#target_Tuesday_1st_October.html"> Tuesday 1<sup>st</sup> October</a></li>
 +
    <li class=""><a href="#target_Wednesday_2nd_October.html"> Wednesday 2<sup>nd</sup> October</a></li>
 +
    <li class="lastChild"><a href="#target_Thursday_3rd_October.html"> Thursday 3<sup>rd</sup> October</a></li>
 +
  </ul>
 +
</li>
 +
      </ul>
 +
    </li>
 +
    <li class=" collapsibleListClosed">
 +
      INFILTRATE
 +
      <ul  style="display: none;">
 +
<li class=" collapsibleList">
 +
  July
 +
  <ul  style="display: none;">
 +
    <li class=""><a href="#infiltrate_Monday_22nd_July.html"> Monday 22<sup>nd</sup> July</a></li>
 +
    <li class=""><a href="#infiltrate_Tuesday_23rd_July.html"> Tuesday 23<sup>rd</sup> July</a></li>
 +
    <li class=""><a href="#infiltrate_Wednesday_24th_July.html"> Wednesday 24<sup>th</sup> July</a></li>
 +
    <li class=""><a href="#infiltrate_Thursday_25th_July.html"> Thursday 25<sup>th</sup> July</a></li>
 +
    <li class=""><a href="#infiltrate_Friday_26th_July.html"> Friday 26<sup>th</sup> July</a></li>
 +
    <li class=""><a href="#infiltrate_Monday_29th_July.html"> Monday 29<sup>th</sup> July</a></li>
 +
    <li class=""><a href="#infiltrate_Tuesday_30th_July.html"> Tuesday 30<sup>th</sup> July</a></li>
 +
    <li class="lastChild"><a href="#infiltrate_Wednesday_31st_July.html"> Wednesday 31<sup>st</sup> July</a></li>
 +
  </ul>
 +
</li>
 +
<li class=" collapsibleList">
 +
  August
 +
  <ul  style="display: none;">
 +
    <li class=""><a href="#infiltrate_Thursday_1st_August.html"> Thursday 1<sup>st</sup> August</a></li>
 +
    <li class=""><a href="#infiltrate_Friday_2nd_August.html"> Friday 2<sup>nd</sup> August</a></li>
 +
    <li class=""><a href="#infiltrate_Monday_5th_August.html"> Monday 5<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#infiltrate_Tuesday_6th_August.html"> Tuesday 6<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#infiltrate_Wednesday_7th_August.html"> Wednesday 7<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#infiltrate_Thursday_8th_August.html"> Thursday 8<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#infiltrate_Monday_12th_August.html"> Monday 12<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#infiltrate_Tuesday_13th_August.html"> Tuesday 13<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#infiltrate_Wednesday_14th_August.html"> Wednesday 14<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#infiltrate_Thursday_15th_August.html"> Thursday 15<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#infiltrate_Friday_16th_August.html"> Friday 16<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#infiltrate_Saturday_17th_August.html"> Saturday 17<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#infiltrate_Sunday_18th_August.html"> Sunday 18<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#infiltrate_Monday_19th_August.html"> Monday 19<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#infiltrate_Tuesday_20th_August.html"> Tuesday 20<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#infiltrate_Wednesday_21st_August.html"> Wednesday 21<sup>st</sup> August</a></li>
 +
    <li class=""><a href="#infiltrate_Thursday_22nd_August.html"> Thursday 22<sup>nd</sup> August</a></li>
 +
    <li class=""><a href="#infiltrate_Monday_26th_August.html"> Monday 26<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#infiltrate_Tuesday_27th_August.html"> Tuesday 27<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#infiltrate_Wednesday_28th_August.html"> Wednesday 28<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#infiltrate_Thursday_29th_August.html"> Thursday 29<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#infiltrate_Friday_30th_August.html"> Friday 30<sup>th</sup> August</a></li>
 +
    <li class="lastChild"><a href="#infiltrate_Saturday_31st_August.html"> Saturday 31<sup>st</sup> August</a></li>
 +
  </ul>
 +
</li>
 +
<li class=" collapsibleList">
 +
  September
 +
  <ul  style="display: none;">
 +
    <li class=""><a href="#infiltrate_Monday_2nd_September.html"> Monday 2<sup>nd</sup> September</a></li>
 +
    <li class=""><a href="#infiltrate_Tuesday_3rd_September.html"> Tuesday 3<sup>rd</sup> September</a></li>
 +
    <li class=""><a href="#infiltrate_Wednesday_4th_September.html"> Wednesday 4<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#infiltrate_Thursday_5th_September.html"> Thursday 5<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#infiltrate_Friday_6th_September.html"> Friday 6<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#infiltrate_Saturday_7th_September.html"> Saturday 7<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#infiltrate_Monday_9th_September.html"> Monday 9<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#infiltrate_Tuesday_10th_September.html"> Tuesday 10<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#infiltrate_Wednesday_11th_September.html"> Wednesday 11<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#infiltrate_Thursday_12th_September.html"> Thursday 12<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#infiltrate_Friday_13th_September.html"> Friday 13<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#infiltrate_Saturday_14th_September.html"> Saturday 14<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#infiltrate_Sunday_15th_September.html"> Sunday 15<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#infiltrate_Monday_16th_September.html"> Monday 16<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#infiltrate_Tuesday_17th_September.html"> Tuesday 17<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#infiltrate_Wednesday_18th_September.html"> Wednesday 18<sup>th</sup> September</a></li>
 +
    <li class="lastChild"><a href="#infiltrate_Friday_20th_September.html"> Friday 20<sup>th</sup> September</a></li>
 +
  </ul>
 +
</li>
 +
<li class=" collapsibleList">
 +
  October
 +
  <ul  style="display: none;">
 +
    <li class=""><a href="#infiltrate_Tuesday_15th_October.html"> Tuesday 15<sup>th</sup> October</a></li>
 +
    <li class=""><a href="#infiltrate_Wednesday_16th_October.html"> Wednesday 16<sup>th</sup> October</a></li>
 +
    <li class=""><a href="#infiltrate_Thursday_17th_October.html"> Thursday 17<sup>th</sup> October</a></li>
 +
    <li class=""><a href="#infiltrate_Friday_18th_October.html"> Friday 18<sup>th</sup> October</a></li>
 +
    <li class=""><a href="#infiltrate_Saturday_19th_October.html"> Saturday 19<sup>th</sup> October</a></li>
 +
    <li class=""><a href="#infiltrate_Sunday_20th_October.html"> Sunday 20<sup>th</sup> October</a></li>
 +
    <li class=""><a href="#infiltrate_Monday_21st_October.html"> Monday 21<sup>st</sup> October</a></li>
 +
    <li class=""><a href="#infiltrate_Tuesday_22nd_October.html"> Tuesday 22<sup>nd</sup> October</a></li>
 +
    <li class=""><a href="#infiltrate_Saturday_26th_October.html"> Saturday 26<sup>th</sup> October</a></li>
 +
    <li class=""><a href="#infiltrate_Sunday_27th_October.html"> Sunday 27<sup>th</sup> October</a></li>
 +
    <li class="lastChild"><a href="#infiltrate_Monday_28th_October.html"> Monday 28<sup>th</sup> October</a></li>
 +
  </ul>
 +
</li>
 +
      </ul>
 +
    </li>
 +
    <li class=" collapsibleListClosed">
 +
      SABOTAGE
 +
      <ul  style="display: none;">
 +
<li class=" collapsibleList">
 +
  June
 +
  <ul  style="display: none;">
 +
    <li class=""><a href="#sabotage_Monday_24th_June.html"> Monday 24<sup>th</sup> June</a></li>
 +
    <li class=""><a href="#sabotage_Tuesday_25th_June.html"> Tuesday 25<sup>th</sup> June</a></li>
 +
    <li class="lastChild"><a href="#sabotage_Friday_28th_June.html"> Friday 28<sup>th</sup> June</a></li>
 +
          </ul>
 +
        </li>
 +
<li class=" collapsibleList">
 +
  July
 +
  <ul  style="display: none;">
 +
    <li class=""><a href="#sabotage_Tuesday_2nd_July.html"> Tuesday 2<sup>nd</sup> July</a></li>
 +
    <li class=""><a href="#sabotage_Wednesday_3rd_July.html"> Wednesday 3<sup>rd</sup> July</a></li>
 +
    <li class=""><a href="#sabotage_Thursday_4th_July.html"> Thursday 4<sup>th</sup> July</a></li>
 +
    <li class=""><a href="#sabotage_Monday_15th_July.html"> Monday 15<sup>th</sup> July</a></li>
 +
    <li class=""><a href="#sabotage_Tuesday_16th_July.html"> Tuesday 16<sup>th</sup> July</a></li>
 +
    <li class=""><a href="#sabotage_Wednesday_17th_July.html"> Wednesday 17<sup>th</sup> July</a></li>
 +
    <li class=""><a href="#sabotage_Thursday_18th_July.html"> Thursday 18<sup>th</sup> July</a></li>
 +
    <li class=""><a href="#sabotage_Friday_19th_July.html"> Friday 19<sup>th</sup> July</a></li>
 +
    <li class=""><a href="#sabotage_Saturday_20th_July.html"> Saturday 20<sup>th</sup> July</a></li>
 +
    <li class=""><a href="#sabotage_Monday_22nd_July.html"> Monday 22<sup>nd</sup> July</a></li>
 +
    <li class=""><a href="#sabotage_Tuesday_23rd_July.html"> Tuesday 23<sup>rd</sup> July</a></li>
 +
    <li class=""><a href="#sabotage_Wednesday_24th_July.html"> Wednesday 24<sup>th</sup> July</a></li>
 +
    <li class=""><a href="#sabotage_Thursday_25th_July.html"> Thursday 25<sup>th</sup> July</a></li>
 +
    <li class=""><a href="#sabotage_Friday_26th_July.html"> Friday 26<sup>th</sup> July</a></li>
 +
            <li class=""><a href="#sabotage_Tuesday_30th_July.html"> Tuesday 30<sup>th</sup> July</a></li>
 +
    <li class="lastChild"><a href="#sabotage_Wednesday_31st_July.html"> Wednesday 31<sup>st</sup> July</a></li>
 +
          </ul>
 +
        </li>
 +
<li class=" collapsibleList">
 +
  August
 +
  <ul  style="display: none;">
 +
            <li class=""><a href="#sabotage_Thursday_1st_August.html"> Thursday 1<sup>st</sup> August</a></li>
 +
    <li class=""><a href="#sabotage_Monday_12th_August.html"> Monday 12<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#sabotage_Tuesday_13th_August.html"> Tuesday 13<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#sabotage_Wednesday_14th_August.html"> Wednesday 14<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#sabotage_Thursday_15th_August.html"> Thursday 15<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#sabotage_Friday_16th_August.html"> Friday 16<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#sabotage_Saturday_17th_August.html"> Saturday 17<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#sabotage_Monday_19th_August.html"> Monday 19<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#sabotage_Tuesday_20th_August.html"> Tuesday 20<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#sabotage_Wednesday_21st_August.html"> Wednesday 21<sup>st</sup> August</a></li>
 +
    <li class=""><a href="#sabotage_Thursday_22nd_August.html"> Thursday 22<sup>nd</sup> August</a></li>
 +
    <li class=""><a href="#sabotage_Friday_23rd_August.html"> Friday 23<sup>rd</sup> August</a></li>
 +
            <li class=""><a href="#sabotage_Monday_26th_August.html"> Monday 26<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#sabotage_Tuesday_27th_August.html"> Tuesday 27<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#sabotage_Wednesday_28th_August.html"> Wednesday 28<sup>th</sup> August</a></li>
 +
    <li class=""><a href="#sabotage_Thursday_29th_August.html"> Thursday 29<sup>th</sup> August</a></li>
 +
    <li class="lastChild"><a href="#sabotage_Friday_30th_August.html"> Friday 30<sup>th</sup> August</a></li>
 +
          </ul>
 +
        </li>
 +
<li class=" collapsibleList">
 +
  September
 +
  <ul  style="display: none;">
 +
    <li class=""><a href="#sabotage_Tuesday_3rd_September.html"> Tuesday 3<sup>rd</sup> September</a></li>
 +
    <li class=""><a href="#sabotage_Wednesday_4th_September.html"> Wednesday 4<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#sabotage_Thursday_5th_September.html"> Thursday 5<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#sabotage_Saturday_7th_September.html"> Saturday 7<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#sabotage_Tuesday_10th_September.html"> Tuesday 10<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#sabotage_Wednesday_11th_September.html"> Wednesday 11<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#sabotage_Saturday_14th_September.html"> Saturday 14<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#sabotage_Sunday_15th_September.html"> Sunday 15<sup>th</sup> September</a></li>
 +
    <li class=""><a href="#sabotage_Wednesday_18th_September.html"> Wednesday 18<sup>th</sup> September</a></li>
 +
    <li class="lastChild"><a href="#sabotage_Friday_20th_September.html"> Friday 20<sup>th</sup> September</a></li>
 +
  </ul>
 +
</li>
 +
      </ul>
 +
    </li>
 +
  </ul>
 +
</li>
 +
</ul>
 +
    </div>
 +
<div id="rightscroll">
 +
<html><div id="detect_Saturday_13th_July.html"></div></html>
 +
<html>
 +
<div class ="tbnote" style="background: url('http://thesmashable.com/wp-content/uploads/2012/06/james-bond-skyfall-007-wallpapers-desktop-backgrounds-james-bond-hd-wallpapers-007-2012-11.jpg'); background-size: 50%; background-opacity: 0.4;>
 +
<h2>Detect</h2>
 +
<a href="https://2013.igem.org/Team:Paris_Bettencourt/Project/Detect" target="_blank" class="tbnotelogo PSlogo"> ASDF </a>
 +
<div style="clear: both;"></div>
 +
<h3>Saturday 13<sup>th</sup> July</h3>
 +
<p><b><em>
 +
<!-- === Modify from here === -->
 +
PCR circular and linear, Conjugation of XL-10 (with sSP011), Patches, Digestion M13 backbone, RFP insert, Gel of PCR
 +
<!-- === To here          === -->
 +
</br></em></b></p>
 +
<!-- === Modify from here === -->
 +
<b>PCR circular and linear, 40.5°C, 60°</b>
 +
of pSB1A3, pSB1C3<br>
 +
<br>
 +
<TABLE BORDER>
 +
<TR><TD><b>Reagent</b></TD><TD><b>Volume</b></TD></TR>
 +
<TR><TD></TD><TD><b>1x</b></TD></TR>
 +
<TR><TD>Nuclease-free water</TD><TD>37.25 ul</TD></TR>
 +
<TR><TD>5x Phusion HF Buffer</TD><TD>10 ul</TD></TR>
 +
<TR><TD>10 mM dNTPs</TD><TD>1 ul</TD></TR>
 +
<TR><TD>Forward Primer (10 uM)</TD><TD>0.5 ul</TD></TR>
 +
<TR><TD>Reverse Primer (10 uM)</TD><TD>0.5 ul</TD></TR>
 +
<TR><TD>Template Plasmid</TD><TD>0.25 ul</TD></TR>
 +
<TR><TD>Phusion DNA Polymerase</TD><TD>0.5 ul</TD></TR>
 +
<TR><TD><b>Total Volume</b></TD><TD>50 ul</TD></TR>
 +
</TABLE><br>
 +
<br>
 +
<TABLE BORDER>
 +
<TR><TD><b>Thermocycler Protocol: NEB Phusion</b></TD><TD> </TD><TD> </TD><TD> </TD><TD> </TD></TR>
 +
<TR><TD> </TD><TD>Temp</TD><TD>Time</TD><TD> </TD><TD> </TD></TR>
 +
<TR><TD>Start</TD><TD>98°C</TD><TD>30 sec</TD><TD>Melt</TD><TD> </TD></TR>
 +
<TR><TD> </TD><TD> </TD><TD> </TD><TD> </TD><TD> </TD></TR>
 +
<TR><TD>Cycle 1</TD><TD>98°C</TD><TD>5 sec</TD><TD>Melt</TD><TD> 35 cycles </TD></TR>
 +
<TR><TD>Cycle 2</TD><TD>40.5°C / 60°C </TD><TD>25 sec</TD><TD>Anneal</TD><TD></TD></TR>
 +
<TR><TD>Cycle 3</TD><TD>72°C</TD><TD>5 min</TD><TD>Extend</TD><TD> </TD></TR>
 +
<TR><TD> </TD><TD> </TD><TD> </TD><TD> </TD><TD> </TD></TR>
 +
<TR><TD>Finish</TD><TD>72°C</TD><TD>5 min</TD><TD>Extend</TD><TD> </TD></TR>
 +
<TR><TD>Store</TD><TD>10°C</TD><TD>Forever</TD><TD>Store</TD><TD> </TD></TR>
 +
</TABLE><br>
 +
<br>
-
<div class="work">
+
<b>Conjugation of XL-10 (with sSP011)</b><br>
-
<a href="inner.html">
+
1)  From O/N cultures Dilute strains 1/100 in LB<br>
-
<img src="https://static.igem.org/mediawiki/2014/b/b5/Work2.jpg" class="media" alt=""/>
+
2)  Wait for OD to reach O,2<br>
-
<div class="caption">
+
3)  Prepare  tube (in BD tubes) :<br>
-
<div class="work_title">
+
-      Tube = 0,5mL LB with Strain (sSP011) + 0,5mL LB with Strain (XL-10 Kan)<br>
-
<h1>culpa qui officia deserunt mollit</h1>
+
4)  Incubate 2 hours at 37°C (actually not in the shaker, but we accidently kept them in the shaker...)<br>
-
</div>
+
5)  Plate 20ul  for mixed tube on LB antiobiotics (Tet, Kan)<br>
-
</div>
+
6)  Incubate overnight at 37°C<br>
-
</a>
+
<br>
-
</div>
+
<br>
 +
<b>Patches</b><br>
 +
check and make new ones<br>
 +
<br>
 +
<br>
 +
<b>Digestion M13 backbone, RFP insert</b><br>
 +
for Backbone (M13mp18 plasmid): 3ug<br>
 +
7,58 ul plasmid (c=395ng/ul)<br>
 +
3 ul EcoRI<br>
 +
3 ul PstI<br>
 +
3ul 10x Fast Digest<br>
 +
13,42 ul H20<br>
 +
incubate for 12 min on 37°<br>
 +
heat inactivation: 80° 5 min<br>
 +
for insert (BBa_J04450): 5ug<br>
 +
31,4 ul plasmid<br>
 +
5 ul EcoRi<br>
 +
5 ul PstI<br>
 +
3,6 ul H20<br>
 +
incubate for 20 min at 37°<br>
 +
heat inactivation: 80° 5min<br>
 +
<br>
 +
<b>Gel of PCR </b> (Amp 40.5 circ, lin, Chl 60° lin, circ)<br>
 +
100V, 20 min 1% gel<br>
-
<div class="work">
+
<!-- === To here === -->
-
<a href="inner.html">
+
</div>
-
<img src="https://static.igem.org/mediawiki/2014/6/6c/Work3.jpg" class="media" alt=""/>
+
</html>
-
<div class="caption">
+
</div>
-
<div class="work_title">
+
  <script type="text/javascript">
-
<h1>culpa qui officia deserunt mollit</h1>
+
    runOnLoad(function(){ CollapsibleLists.apply(); });
-
</div>
+
  </script>
-
</div>
+
</section>
-
</a>
+
-
</div>
+
-
 
+
-
<div class="work">
+
-
<a href="inner.html">
+
-
<img src="https://static.igem.org/mediawiki/2014/2/20/Work4.jpg" class="media" alt=""/>
+
-
<div class="caption">
+
-
<div class="work_title">
+
-
<h1>culpa qui officia deserunt mollit</h1>
+
-
</div>
+
-
</div>
+
-
</a>
+
-
</div>
+
-
 
+
-
<div class="work">
+
-
<a href="inner.html">
+
-
<img src="https://static.igem.org/mediawiki/2014/5/57/Work5.jpg" class="media" alt=""/>
+
-
<div class="caption">
+
-
<div class="work_title">
+
-
<h1>culpa qui officia deserunt mollit</h1>
+
-
</div>
+
-
</div>
+
-
</a>
+
-
</div>
+
-
 
+
-
<div class="work">
+
-
<a href="inner.html">
+
-
<img src="https://static.igem.org/mediawiki/2014/8/80/Work6.jpg" class="media" alt=""/>
+
-
<div class="caption">
+
-
<div class="work_title">
+
-
<h1>culpa qui officia deserunt mollit</h1>
+
-
</div>
+
-
</div>
+
-
</a>
+
-
</div>
+
-
 
+
-
<div class="work">
+
-
<a href="inner.html">
+
-
<img src="https://static.igem.org/mediawiki/2014/b/b5/Work2.jpg" class="media" alt=""/>
+
-
<div class="caption">
+
-
<div class="work_title">
+
-
<h1>culpa qui officia deserunt mollit</h1>
+
-
</div>
+
-
</div>
+
-
</a>
+
-
</div>
+
-
 
+
-
<div class="work">
+
-
<a href="inner.html">
+
-
<img src="https://static.igem.org/mediawiki/2014/6/6c/Work3.jpg" class="media" alt=""/>
+
-
<div class="caption">
+
-
<div class="work_title">
+
-
<h1>culpa qui officia deserunt mollit</h1>
+
-
</div>
+
-
</div>
+
-
</a>
+
-
</div>
+
-
 
+
-
<div class="work">
+
-
<a href="inner.html">
+
-
<img src="https://static.igem.org/mediawiki/2014/2/2b/Work1.jpg" class="media" alt=""/>
+
-
<div class="caption">
+
-
<div class="work_title">
+
-
<h1>culpa qui officia deserunt mollit</h1>
+
-
</div>
+
-
</div>
+
-
</a>
+
-
</div>
+
-
</section><!-- end main -->
+
-
+
-
</body>
+
</html>
</html>

Latest revision as of 20:20, 1 July 2014

Big Picture by HTML5 UP

CRISPR/Cas9 Technology

Find out about the modern ways of Killing Tuberculosis using the CRISPR/Cas technology!

ASDF

Saturday 13th July

PCR circular and linear, Conjugation of XL-10 (with sSP011), Patches, Digestion M13 backbone, RFP insert, Gel of PCR

PCR circular and linear, 40.5°C, 60° of pSB1A3, pSB1C3

ReagentVolume
1x
Nuclease-free water37.25 ul
5x Phusion HF Buffer10 ul
10 mM dNTPs1 ul
Forward Primer (10 uM)0.5 ul
Reverse Primer (10 uM)0.5 ul
Template Plasmid0.25 ul
Phusion DNA Polymerase0.5 ul
Total Volume50 ul


Thermocycler Protocol: NEB Phusion
TempTime
Start98°C30 secMelt
Cycle 198°C5 secMelt 35 cycles
Cycle 240.5°C / 60°C 25 secAnneal
Cycle 372°C5 minExtend
Finish72°C5 minExtend
Store10°CForeverStore


Conjugation of XL-10 (with sSP011)
1) From O/N cultures Dilute strains 1/100 in LB
2) Wait for OD to reach O,2
3) Prepare tube (in BD tubes) :
- Tube = 0,5mL LB with Strain (sSP011) + 0,5mL LB with Strain (XL-10 Kan)
4) Incubate 2 hours at 37°C (actually not in the shaker, but we accidently kept them in the shaker...)
5) Plate 20ul for mixed tube on LB antiobiotics (Tet, Kan)
6) Incubate overnight at 37°C


Patches
check and make new ones


Digestion M13 backbone, RFP insert
for Backbone (M13mp18 plasmid): 3ug
7,58 ul plasmid (c=395ng/ul)
3 ul EcoRI
3 ul PstI
3ul 10x Fast Digest
13,42 ul H20
incubate for 12 min on 37°
heat inactivation: 80° 5 min
for insert (BBa_J04450): 5ug
31,4 ul plasmid
5 ul EcoRi
5 ul PstI
3,6 ul H20
incubate for 20 min at 37°
heat inactivation: 80° 5min

Gel of PCR (Amp 40.5 circ, lin, Chl 60° lin, circ)
100V, 20 min 1% gel
</div> 

 <script type="text/javascript">
   runOnLoad(function(){ CollapsibleLists.apply(); });
 </script>

</section> </html>

Retrieved from "http://2014.igem.org/Team:CU-Boulder/Test"