Difference between revisions of "Team:Pasteur Paris/ExperimentsExperiment"

Line 191: Line 191:
 
                     margin:2em;
 
                     margin:2em;
 
                     position:relative;
 
                     position:relative;
 +
                    display: inline-block;
 
                 }
 
                 }
 
   
 
   
−
                #vign_1 {
 
−
                    left: 23em;
 
−
                    bottom : 27em;
 
−
                }
 
  
 
                 .vignette_for {              /*foreground part of the vignettes, gets transparent*/
 
                 .vignette_for {              /*foreground part of the vignettes, gets transparent*/
Line 256: Line 253:
  
 
                 .panel {
 
                 .panel {
 +
                    position: relative;
 +
                    display: inline-block;
 +
                    width: 90%;
 
                     padding: 0px 18px;
 
                     padding: 0px 18px;
 
                     background-color: white;
 
                     background-color: white;
Line 309: Line 309:
  
  
 +
    <style>
  
  
  
  
 +
        @media screen and (min-width: 911px){
  
 +
        #naviconwrapper {
 +
        height: 100%;
 +
            margin: 0px ;    /*auto centers wrapper*/
 +
            min-width: 900px;
 +
            z-index: -100;
 +
        }
  
 +
        #naviconbar {
 +
        height: 100%;
 +
            min-width: 900px;
 +
            background-image:  linear-gradient(to right, rgb(168, 48, 91), rgb(161, 47, 92), rgb(128, 52, 110),rgb(84, 59, 126),rgb(52, 82, 146));
 +
            z-index: -60;
 +
            text-align: center;
 +
        }
 +
           
  
 +
        /* ==== BEGIN: Settings Main Menu Icons ==== */
 +
        #navicons {
 +
            width: 840px;
 +
            background-color:  linear-gradient(to right, rgb(161, 47, 92), rgb(128, 52, 110),rgb(84, 59, 126));
 +
            z-index: -20;    /*defines color behind icons */
 +
            display: inline-block;
 +
        vertical-align: middle;
 +
        height: 100%;
 +
        }
  
−
<style>
+
        #navicons ul {
 +
        margin: 0px;
 +
        height: 100%;
 +
            width: 100%;
 +
            position: relative;  /*makes chip go directly behind home from left corner*/
  
 +
        }
  
 +
        #navicons ul li {
 +
            list-style: none;
 +
            /*display: block;*/
 +
            float: left;
 +
            position: relative;
 +
            font-family: sans-serif;
 +
            font-size: 12px;
 +
            background-color: rgba(161, 47, 92, 0.0);
 +
            /*border: 1px solid #5781BD;*/
 +
            z-index: 100;
 +
            height: 90%;
 +
        }
  
 +
        #navicons ul li a {
  
−
@media screen and (min-width: 911px){
+
            width: 120px;
 +
            display: block;
 +
            text-decoration: none;
 +
            /*color: #FFF;*/
 +
            text-align: center;
 +
            text-transform: uppercase;
 +
            z-index: 50;
 +
            padding-top: 45%;
  
−
#naviconwrapper {
+
        }
−
height: 100%;
+
−
    margin: 0px ;    /*auto centers wrapper*/
+
−
    min-width: 900px;
+
−
    z-index: -100;
+
−
}
+
  
−
#naviconbar {
+
        #navicons ul a:hover {  
−
height: 100%;
+
        }     
−
    min-width: 900px;
+
        /* ==== END: Settings Main Menu Icons ==== */
−
    background-image:  linear-gradient(to right, rgb(168, 48, 91), rgb(161, 47, 92), rgb(128, 52, 110),rgb(84, 59, 126),rgb(52, 82, 146));
+
         
−
    z-index: -60;
+
−
    text-align: center;
+
−
}
+
−
   
+
  
−
/* ==== BEGIN: Settings Main Menu Icons ==== */
+
        /* ==== classes for icons ==== */
−
#navicons {
+
        #project {
−
    width: 840px;
+
            background: url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;  
−
    background-color: linear-gradient(to right, rgb(161, 47, 92), rgb(128, 52, 110),rgb(84, 59, 126));
+
            height: 60px;
−
    z-index: -20;    /*defines color behind icons */  
+
            background-position: center;
−
    display: inline-block;
+
        }
−
vertical-align: middle;
+
−
height: 100%;
+
−
}
+
  
−
#navicons ul {
+
        #project a {
−
margin: 0px;
+
            color: #ffffff;
−
height: 100%;
+
        }
−
    width: 100%;
+
−
    position: relative;  /*makes chip go directly behind home from left corner*/
+
  
−
}
+
        #labwork {
 +
            background: url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
 +
            height: 60px;
 +
            background-position: center;
 +
        }
  
−
#navicons ul li {
+
        #labwork a {
−
    list-style: none;
+
            color: #ffffff;
−
    /*display: block;*/
+
        }
−
    float: left;
+
−
    position: relative;
+
−
    font-family: sans-serif;
+
−
    font-size: 12px;
+
−
    background-color: rgba(161, 47, 92, 0.0);
+
−
    /*border: 1px solid #5781BD;*/
+
−
    z-index: 100;
+
−
    height: 90%;
+
−
}
+
  
−
#navicons ul li a {
+
        #parts {
 +
            background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
 +
            height: 60px;
 +
            background-position: center;
 +
        }
  
−
    width: 120px;
+
        #parts a {
−
    display: block;
+
            color: #ffffff;
−
    text-decoration: none;
+
        }
−
    /*color: #FFF;*/
+
−
    text-align: center;
+
−
    text-transform: uppercase;
+
−
    z-index: 50;
+
−
    padding-top: 45%;
+
  
−
}
+
        #modelling {
 +
            background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
 +
            height: 60px;
 +
            background-position: center;
 +
        }
  
−
#navicons ul a:hover {  
+
        #modelling a {
−
}     
+
            color: #ffffff;
−
/* ==== END: Settings Main Menu Icons ==== */
+
        }
−
 
+
  
−
/* ==== classes for icons ==== */
+
        #achievements {
−
#project {
+
            background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png)no-repeat;  
−
    background: url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;  
+
            height: 60px;
−
    height: 60px;
+
            background-position: center;
−
    background-position: center;
+
        }
−
}
+
  
−
#project a {
+
        #achievements a {
−
    color: #ffffff;
+
            color: #ffffff;
−
}
+
        }
  
−
#labwork {
+
        #hp {
−
    background: url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;  
+
            background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;  
−
    height: 60px;
+
            height: 60px;
−
    background-position: center;
+
            background-position: center;
−
}
+
        }
  
−
#labwork a {
+
        #hp a {
−
    color: #ffffff;
+
            color: #ffffff;
−
}
+
        }
  
−
#parts {
+
        #aboutus {
−
    background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;  
+
            background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;  
−
    height: 60px;
+
            height: 60px;
−
    background-position: center;
+
            background-position: center;
−
}
+
        }
  
−
#parts a {
+
        #aboutus a {
−
    color: #ffffff;
+
            color: #ffffff;
−
}
+
        }
 +
        /* ==== End classes for icons ==== */
  
−
#modelling {
+
        /* ==== Begin running chip ==== */
−
    background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;  
+
        /* == Begin Chip Design == */
−
    height: 60px;
+
        #runningchip {
−
    background-position: center;
+
            position: absolute;
−
}
+
            width: 90px;
 +
            height: 120%;
 +
            left: 2.1%;
 +
            -webkit-transition: all 300ms ease-out;
 +
            -moz-transition: all 300ms ease-out;
 +
            transition: all 300ms ease-out;
 +
            z-index: 0;
 +
          border-bottom-left-radius: 5px;
 +
          border-bottom-right-radius: 5px;
 +
          background: #000000;
 +
        }
  
−
#modelling a {
+
        /* == End Chip Design == */
−
    color: #ffffff;
+
−
}
+
  
−
#achievements {
 
−
    background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png)no-repeat;
 
−
    height: 60px;
 
−
    background-position: center;
 
−
}
 
  
−
#achievements a {
+
        /* == Begin Chip Movement == */
−
    color: #ffffff;
+
        #project:hover ~ #runningchip {
−
}
+
            left: 15px;
 +
        }
  
−
#hp {
+
        #labwork:hover ~ #runningchip {
−
    background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
+
            left: 135px;
−
    height: 60px;
+
        }
−
    background-position: center;
+
−
}
+
  
−
#hp a {
+
        #parts:hover ~ #runningchip {
−
    color: #ffffff;
+
            left: 255px;
−
}
+
        }
  
−
#aboutus {
+
        #modelling:hover ~ #runningchip {
−
    background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
+
            left: 375px;
−
    height: 60px;
+
        }
−
    background-position: center;
+
−
}
+
  
−
#aboutus a {
+
        #achievements:hover ~ #runningchip {
−
    color: #ffffff;
+
            left: 495px;
−
}
+
        }
−
/* ==== End classes for icons ==== */
+
  
−
/* ==== Begin running chip ==== */
+
        #hp:hover ~ #runningchip {
−
/* == Begin Chip Design == */
+
            left: 615px;
−
#runningchip {
+
        }
−
    position: absolute;
+
−
    width: 90px;
+
−
    height: 120%;
+
−
    left: 2.1%;
+
−
    -webkit-transition: all 300ms ease-out;
+
−
    -moz-transition: all 300ms ease-out;
+
−
    transition: all 300ms ease-out;
+
−
    z-index: 0;
+
−
  border-bottom-left-radius: 5px;
+
−
  border-bottom-right-radius: 5px;
+
−
  background: #000000;
+
−
}
+
  
−
/* == End Chip Design == */
+
        #aboutus:hover ~ #runningchip {
 +
            left: 735px;
 +
        }
 +
        /* == End Chip Movment == */
 +
        /* ==== End running chip ==== */
  
  
−
/* == Begin Chip Movement == */
+
        /* ==== Begin Settings Submenu Level 1 ==== */
−
#project:hover ~ #runningchip {
+
        #navtextwrapper {               /*define background box*/
−
    left: 15px;
+
            margin: 0 auto;
−
}
+
            padding: 0px;
 +
            top: -2px;
 +
            height: 24px;
 +
            width: 840px;
 +
            position: relative;
 +
            /*border: 2px solid #000;*/
 +
        }
  
−
#labwork:hover ~ #runningchip {
+
        #navtext {
−
    left: 135px;
+
            text-align: center;
−
}
+
            font-family: Roboto,sans-serif;
 +
            font-size: 16px;
 +
            z-index: 600;
 +
        }
  
−
#parts:hover ~ #runningchip {
+
        #navtext ul {
−
    left: 255px;
+
            margin: 0px auto;
−
}
+
            top: -8px;
 +
            padding: 0px;
 +
            position: absolute;
 +
            z-index: 600;
 +
        }
  
−
#modelling:hover ~ #runningchip {
+
        #navtext li {
−
    left: 375px;
+
            margin: 0px auto;        /*centers text*/
−
}
+
            list-style: none;
 +
            display: block;        /*makes items go horizontal and centers them*/
 +
            /*float: left;*/                /*makes items go horizontal*/
 +
            position: relative;
 +
            z-index: 600;
 +
            height: 10px;
 +
        }  
  
−
#achievements:hover ~ #runningchip {
+
        #navtext ul li a {
−
    left: 495px;
+
            margin-top: 2px;
−
}
+
            height: 24px;
 +
            padding-left: 10px;
 +
            padding-right: 10px;
 +
            text-decoration: none;
 +
            color: #FFF;
 +
            display: block;
 +
            text-align: center;
 +
            border-radius: 8px;
 +
            z-index: 600;
 +
        }
  
−
#hp:hover ~ #runningchip {
+
        #navtext ul li:hover > a {
−
    left: 615px;
+
          /* background-color: #6696c7;  /*makes a link stay in a certain color when hovering over it and then looking throught its subitems */
−
}
+
            color: #345292; /* couleur du sous titre quand tu passes dessus*/
 +
        }
  
−
#aboutus:hover ~ #runningchip {
+
        #project-sub {
−
    left: 735px;
+
            display: none;
−
}
+
            left: -120px;
−
/* == End Chip Movment == */
+
        }
−
/* ==== End running chip ==== */
+
  
 +
        #labwork-sub {
 +
            display: none;
 +
            left: 0px;
 +
        }
  
−
/* ==== Begin Settings Submenu Level 1 ==== */
+
        #parts-sub {
−
#navtextwrapper {               /*define background box*/
+
            /*background-color: #ac34fe;*/
−
    margin: 0 auto;
+
            display: none;
−
    padding: 0px;
+
            left: 120px;
−
    top: -2px;
+
        }
−
    height: 24px;
+
−
    width: 840px;
+
−
    position: relative;
+
−
    /*border: 2px solid #000;*/
+
−
}
+
  
−
#navtext {
+
        #modelling-sub{
−
    text-align: center;
+
            display: none;
−
    font-family: Roboto,sans-serif;
+
            left: 240px;
−
    font-size: 16px;
+
        }
−
    z-index: 600;
+
−
}
+
  
−
#navtext ul {
+
        #achievements-sub{
−
    margin: 0px auto;
+
            display: none;
−
    top: -8px;
+
            left: 360px;
−
    padding: 0px;
+
        }
−
    position: absolute;
+
−
    z-index: 600;
+
−
}
+
  
−
#navtext li {
+
        #hp-sub{
−
    margin: 0px auto;        /*centers text*/
+
            display: none;
−
    list-style: none;
+
            left: 480px;
−
    display: block;       /*makes items go horizontal and centers them*/
+
        }
−
    /*float: left;*/                /*makes items go horizontal*/
+
        #aboutus-sub{
−
    position: relative;
+
            display: none;
−
    z-index: 600;
+
            left: 600px;
−
    height: 10px;
+
        }
−
}  
+
  
−
#navtext ul li a {
+
        .chip_gap {
−
    margin-top: 2px;
+
            content: none;
−
    height: 24px;
+
        }
−
    padding-left: 10px;
+
−
    padding-right: 10px;
+
−
    text-decoration: none;
+
−
    color: #FFF;
+
−
    display: block;
+
−
    text-align: center;
+
−
    border-radius: 8px;
+
−
    z-index: 600;
+
−
}
+
  
−
#navtext ul li:hover > a {
+
        .navsub1 {
−
  /* background-color: #6696c7; /*makes a link stay in a certain color when hovering over it and then looking throught its subitems */
+
            background-color: #000000;
−
    color: #345292; /* couleur du sous titre quand tu passes dessus*/
+
        opacity: 1;
−
}
+
        } 
 +
        /* ==== End Settings Submenu Level 1 ==== */
  
−
#project-sub {
+
        #smallnav{
−
    display: none;
+
            display: none;
−
    left: -120px;
+
        }
−
}
+
  
−
#labwork-sub {
+
        } /* end media query*/
−
    display: none;
+
−
    left: 0px;
+
−
}
+
  
−
#parts-sub {
+
        @media screen and (max-width: 910px){
−
    /*background-color: #ac34fe;*/
+
            #header{
−
    display: none;
+
                top: -9000px;
−
    left: 120px;
+
                opacity: 0;
−
}
+
            }
  
−
#modelling-sub{
+
        /* avoid space to content box */
−
    display: none;
+
            .content_background_wrapper{
−
    left: 240px;
+
                padding-top: 20px;
−
}
+
            }
  
−
#achievements-sub{
+
        }
−
    display: none;
+
−
    left: 360px;
+
−
}
+
  
−
#hp-sub{
+
        /* Styles for smallnav */
−
    display: none;
+
−
    left: 480px;
+
−
}
+
−
#aboutus-sub{
+
−
    display: none;
+
−
    left: 600px;
+
−
}
+
  
−
.chip_gap {
+
        /* Clearfix */
−
    content: none;
+
        .clearfix:before,
−
}
+
        .clearfix:after {
 +
            content: " ";
 +
            display: table;
 +
        }
 +
        .clearfix:after {
 +
            clear: both;
 +
        }
 +
        .clearfix {
 +
            *zoom: 1;
 +
        }
  
−
.navsub1 {
 
−
    background-color: #000000;
 
−
opacity: 1;
 
−
} 
 
−
/* ==== End Settings Submenu Level 1 ==== */
 
  
−
#smallnav{
+
        /* Basic Styles */
−
    display: none;
+
−
}
+
  
−
} /* end media query*/
+
        #smallnav {
 +
            height: 40px;
 +
            width: 100%;
 +
            background: #0051A2;
 +
            font-size: 11pt;
 +
            font-family: 'PT Sans', Arial, sans-serif;
 +
            font-weight: bold;
 +
            position: fixed;
 +
            border-bottom: 2px solid #CFCFCF;
 +
            z-index: 3000;
 +
            opacity: 0.9;
 +
        }
 +
        #smallnav ul {
 +
            padding: 0;
 +
            margin: 0 auto;
 +
            width: 720px;
 +
            height: 40px;
 +
        }
 +
        #smallnav li {
 +
            display: inline;
 +
            float: left;
 +
        }
 +
        #smallnav a {
 +
            color: #fff;
 +
            display: inline-block;
 +
            width: 120px;
 +
            text-align: center;
 +
            text-decoration: none;
 +
            line-height: 40px;
 +
        }
 +
        #smallnav li a {
 +
            box-sizing:border-box;
 +
            -moz-box-sizing:border-box;
 +
            -webkit-box-sizing:border-box;
 +
        }
 +
        #smallnav li:last-child a {
 +
            border-right: 0;
 +
        }
 +
        #smallnav a:hover, #smallnav a:active {
 +
            background-color: #1D629F;
 +
        }
 +
        #smallnav a#pull {
 +
            display: none;
 +
        }
  
−
@media screen and (max-width: 910px){
+
        /*Styles for screen 600px and lower*/
−
    #header{
+
        @media screen and (max-width: 720px) {
−
        top: -9000px;
+
            #smallnav {  
−
        opacity: 0;
+
                height: auto;
−
    }
+
                background: #3B7EBF;
 +
            }
 +
            #smallnav ul {
 +
                width: 100%;
 +
                display: block;
 +
                height: auto;
 +
            }
 +
            #smallnav li {
 +
                width: 50%;
 +
                float: left;
 +
                position: relative;
 +
                margin-bottom: 0;
 +
            }
  
−
/* avoid space to content box */
+
            #smallnav a {
−
    .content_background_wrapper{
+
                text-align: left;
−
        padding-top: 20px;
+
                width: 100%;
−
    }
+
                text-indent: 25px;
 +
            }
  
−
}
+
            #smallnav {
 +
                border-bottom: 0;
 +
            }
 +
            #smallnav ul {
 +
                display: none;
 +
                height: auto;
 +
            }
 +
            #smallnav a#pull {
 +
                display: block;
 +
                background-color: #0051A2;
 +
                width: 100%;
 +
                position: relative;
 +
            }
 +
            #smallnav a#pull:after {
 +
                content:"";
 +
                background: url('https://static.igem.org/mediawiki/2015/e/e0/Freiburg_menu_button_white.png') no-repeat;
 +
                background-size: auto 90%;
 +
                width: 30px;
 +
                height: 30px;
 +
                display: inline-block;
 +
                position: absolute;
 +
                right: 15px;
 +
                top: 5px;
 +
            }
  
−
/* Styles for smallnav */
 
  
−
/* Clearfix */
+
        /* ==== classes for icons ==== */
−
.clearfix:before,
+
        #home_small {
−
.clearfix:after {
+
            background-color: #3673AF;
−
    content: " ";
+
−
    display: table;
+
−
}
+
−
.clearfix:after {
+
−
    clear: both;
+
−
}
+
−
.clearfix {
+
−
    *zoom: 1;
+
−
}
+
  
 +
        }
  
−
/* Basic Styles */
+
        #home_small a {
 +
            background: url(https://static.igem.org/mediawiki/2015/1/15/Freiburg_icon_home_white_03.png) no-repeat;
 +
            background-position: left;
 +
            background-size: auto 100%;
 +
            background-repeat: no-repeat;
 +
            padding-left: 40px;
 +
            color: #FFF;
 +
        }
  
−
#smallnav {
+
        #project_small {
−
    height: 40px;
+
            background-color: #3673AF;
−
    width: 100%;
+
−
    background: #0051A2;
+
−
    font-size: 11pt;
+
−
    font-family: 'PT Sans', Arial, sans-serif;
+
−
    font-weight: bold;
+
−
    position: fixed;
+
−
    border-bottom: 2px solid #CFCFCF;
+
−
    z-index: 3000;
+
−
    opacity: 0.9;
+
−
}
+
−
#smallnav ul {
+
−
    padding: 0;
+
−
    margin: 0 auto;
+
−
    width: 720px;
+
−
    height: 40px;
+
−
}
+
−
#smallnav li {
+
−
    display: inline;
+
−
    float: left;
+
−
}
+
−
#smallnav a {
+
−
    color: #fff;
+
−
    display: inline-block;
+
−
    width: 120px;
+
−
    text-align: center;
+
−
    text-decoration: none;
+
−
    line-height: 40px;
+
−
}
+
−
#smallnav li a {
+
−
    box-sizing:border-box;
+
−
    -moz-box-sizing:border-box;
+
−
    -webkit-box-sizing:border-box;
+
−
}
+
−
#smallnav li:last-child a {
+
−
    border-right: 0;
+
−
}
+
−
#smallnav a:hover, #smallnav a:active {
+
−
    background-color: #1D629F;
+
−
}
+
−
#smallnav a#pull {
+
−
    display: none;
+
−
}
+
  
−
/*Styles for screen 600px and lower*/
+
         }
−
@media screen and (max-width: 720px) {
+
−
    #smallnav {
+
−
         height: auto;
+
−
        background: #3B7EBF;
+
−
    }
+
−
    #smallnav ul {
+
−
        width: 100%;
+
−
        display: block;
+
−
        height: auto;
+
−
    }
+
−
    #smallnav li {
+
−
        width: 50%;
+
−
        float: left;
+
−
        position: relative;
+
−
        margin-bottom: 0;
+
−
    }
+
  
−
    #smallnav a {
+
        #project_small a {
−
        text-align: left;
+
            background: url(https://static.igem.org/mediawiki/2015/7/76/Freiburg_icon_project_white_03.png) no-repeat;
−
        width: 100%;
+
            background-position: left;
−
        text-indent: 25px;
+
            background-size: auto 90%;
−
    }
+
            background-repeat: no-repeat;
 +
            padding-left: 40px;
 +
            color: #FFF;
 +
        }
  
−
    #smallnav {
+
         #team_small {
−
         border-bottom: 0;
+
            background-color: #3673AF;
−
    }
+
−
    #smallnav ul {
+
−
        display: none;
+
−
        height: auto;
+
−
    }
+
−
    #smallnav a#pull {
+
−
        display: block;
+
−
        background-color: #0051A2;
+
−
        width: 100%;
+
−
        position: relative;
+
−
    }
+
−
    #smallnav a#pull:after {
+
−
        content:"";
+
−
        background: url('https://static.igem.org/mediawiki/2015/e/e0/Freiburg_menu_button_white.png') no-repeat;
+
−
        background-size: auto 90%;
+
−
        width: 30px;
+
−
        height: 30px;
+
−
        display: inline-block;
+
−
        position: absolute;
+
−
        right: 15px;
+
−
        top: 5px;
+
−
    }
+
  
 +
        }
  
−
/* ==== classes for icons ==== */
+
        #team_small a {
−
#home_small {
+
            background: url(https://static.igem.org/mediawiki/2015/4/42/Freiburg_icon_team_white_03.png) no-repeat;
−
    background-color: #3673AF;
+
            background-position: left;
 +
            background-size: auto 90%;
 +
            background-repeat: no-repeat;
 +
            padding-left: 40px;
 +
            color: #FFF;
 +
        }
  
−
}
+
        #results_small {
 +
            background-color: #3673AF;
  
−
#home_small a {
+
        }
−
    background: url(https://static.igem.org/mediawiki/2015/1/15/Freiburg_icon_home_white_03.png) no-repeat;
+
−
    background-position: left;
+
−
    background-size: auto 100%;
+
−
    background-repeat: no-repeat;
+
−
    padding-left: 40px;
+
−
    color: #FFF;
+
−
}
+
  
−
#project_small {
+
        #results_small a {
−
    background-color: #3673AF;
+
            background: url(https://static.igem.org/mediawiki/2015/1/1e/Freiburg_icon_results_white_03.png) no-repeat;
 +
            background-position: left;
 +
            background-size: auto 90%;
 +
            background-repeat: no-repeat;
 +
            padding-left: 40px;
 +
            color: #FFF;
 +
        }
  
−
}
+
        #policy_small {
 +
            background-color: #3673AF;
 +
        }
  
−
#project_small a {
+
        #policy_small a {
−
    background: url(https://static.igem.org/mediawiki/2015/7/76/Freiburg_icon_project_white_03.png) no-repeat;  
+
            color: #FFF;
−
    background-position: left;
+
            padding-left: 40px;
−
    background-size: auto 90%;
+
            background-image: url(https://static.igem.org/mediawiki/2015/f/f9/Freiburg_icon_policy_white_03.png);
−
    background-repeat: no-repeat;
+
            background-position: left;
−
    padding-left: 40px;
+
            background-size: auto 90%;
−
    color: #FFF;
+
            background-repeat: no-repeat;
−
}
+
        }
  
−
#team_small {
+
        #notebook_small {
−
    background-color: #3673AF;
+
            background-color: #3673AF;
 +
        }
  
−
}
+
        #notebook_small a {
 +
            background: url(https://static.igem.org/mediawiki/2015/9/99/Freibur_icon_notebook_white_03.png) no-repeat;
 +
            background-position: left;
 +
            background-size: auto 90%;
 +
            background-repeat: no-repeat;
 +
            padding-left: 40px;
 +
            color: #FFF;
 +
        }
 +
        /* ==== End classes for icons ==== */
  
−
#team_small a {
 
−
    background: url(https://static.igem.org/mediawiki/2015/4/42/Freiburg_icon_team_white_03.png) no-repeat;
 
−
    background-position: left;
 
−
    background-size: auto 90%;
 
−
    background-repeat: no-repeat;
 
−
    padding-left: 40px;
 
−
    color: #FFF;
 
−
}
 
  
−
#results_small {
+
        }/* end media query
−
    background-color: #3673AF;
+
  
−
}
+
        /*Smartphone*/
 +
        @media only screen and (max-width : 320px) {
 +
            #smallnav li {
 +
                display: block;
 +
                float: none;
 +
                width: 100%;
 +
            }
 +
        }
  
−
#results_small a {
+
     </style>
−
     background: url(https://static.igem.org/mediawiki/2015/1/1e/Freiburg_icon_results_white_03.png) no-repeat;
+
−
    background-position: left;
+
−
    background-size: auto 90%;
+
−
    background-repeat: no-repeat;
+
−
    padding-left: 40px;
+
−
    color: #FFF;
+
−
}
+
−
 
+
−
#policy_small {
+
−
    background-color: #3673AF;
+
−
}
+
−
 
+
−
#policy_small a {
+
−
    color: #FFF;
+
−
    padding-left: 40px;
+
−
    background-image: url(https://static.igem.org/mediawiki/2015/f/f9/Freiburg_icon_policy_white_03.png);
+
−
    background-position: left;
+
−
    background-size: auto 90%;
+
−
    background-repeat: no-repeat;
+
−
}
+
−
 
+
−
#notebook_small {
+
−
    background-color: #3673AF;
+
−
}
+
−
 
+
−
#notebook_small a {
+
−
    background: url(https://static.igem.org/mediawiki/2015/9/99/Freibur_icon_notebook_white_03.png) no-repeat;
+
−
    background-position: left;
+
−
    background-size: auto 90%;
+
−
    background-repeat: no-repeat;
+
−
    padding-left: 40px;
+
−
    color: #FFF;
+
−
}
+
−
/* ==== End classes for icons ==== */
+
−
 
+
−
 
+
−
}/* end media query
+
−
 
+
−
/*Smartphone*/
+
−
@media only screen and (max-width : 320px) {
+
−
    #smallnav li {
+
−
        display: block;
+
−
        float: none;
+
−
        width: 100%;
+
−
    }
+
−
}
+
−
 
+
−
</style>
+
  
  
Line 850: Line 842:
  
 
<header id="MenuIgem">
 
<header id="MenuIgem">
−
 
 
</header>
 
</header>
  
Line 981: Line 972:
 
                 <h2 style="text-align: left;">Microfluidics</h2>
 
                 <h2 style="text-align: left;">Microfluidics</h2>
  
−
                 <p>PDMS (Polydimethylsiloxane) is a widely used polymer in microfluidics, for its biocompatibility and transparence, among other qualities. Here we show how to prepare PDMS for  
+
                 <p>PDMS (Polydimethylsiloxane) is a widely used polymer in microfluidics, for its biocompatibility and transparence, among other qualities. Here we show how to prepare PDMS for microfluidic chips, as well as how to demold them, bond them to other surfaces and treat them for neuron growth.</p>                             
−
                                    microfluidic chips, as well as how to demold them, bond them to other surfaces and treat them for neuron growth.</p>                             
+
  
  
−
                 <div class="vignette" id=""vign_0">
+
                 <div class="vignette" id="vign_0">
 
                     <div class="vignette_for">
 
                     <div class="vignette_for">
 
                     </div>
 
                     </div>
Line 1,007: Line 997:
 
                         <p style="margin:auto; text-align:center;font-weight:bold;">Chip Bonding</p>
 
                         <p style="margin:auto; text-align:center;font-weight:bold;">Chip Bonding</p>
 
                     </div>
 
                     </div>
−
 
 
                 </div>
 
                 </div>
  

Revision as of 12:35, 13 August 2018

Training

PROTOCOLS

Microfluidics

PDMS (Polydimethylsiloxane) is a widely used polymer in microfluidics, for its biocompatibility and transparence, among other qualities. Here we show how to prepare PDMS for microfluidic chips, as well as how to demold them, bond them to other surfaces and treat them for neuron growth.

PDMS Chips

Chip Bonding


Materials

  • Sylgard 184 Elastomer Kit (Sigma-aldrich, Sylgard 184, 761036-5EA)
  • Razor blade (OEMTOOLS 25181 Razor Blades, 100 Pack)
  • 4mm Biopsy Puncher (Kai Biopsy Punch 4mm )
  • Isopropanol (Fisherbrand, CAS number 67-63-0)
  • Vacuum pump unit (Vacuubrand PC 3 RZ 2.5)

Protocol

According to manufacturer's instruction.

  • Mix monomer and curing agent (10:1 proportion) for 30 seconds
  • Use a vacuum machine to extract air bubbles until the mixture is clear
  • Pour mixture onto mold
  • Put mixture+mold in stove at 70 degrees Celsius for 3 hours
  • Use razor blade to cut the borders of the chip and extract the chip from its mold
  • Use biopsy puncher to drill input and output holes
  • Clean chip with isopropanol

Get full protocol here