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

 
(9 intermediate revisions by 2 users not shown)
Line 187: Line 187:
  
 
                 .vignette {                            /*element that contains ONE vignette*/
 
                 .vignette {                            /*element that contains ONE vignette*/
−
                     height:25em;
+
                     height:20em;
−
                     width:25em;
+
                     width:20em;
−
                     margin:2em;
+
                     margin:0;
 
                     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*/
−
                     width: 20em;
+
                     width: 15em;
−
                     height: 21em;
+
                     height: 16em;
 
                     position:absolute;
 
                     position:absolute;
 
                     left:2.5em;
 
                     left:2.5em;
Line 220: Line 217:
  
 
                 .vignette_back {          /*background part of the vignettes, picture*/
 
                 .vignette_back {          /*background part of the vignettes, picture*/
−
                     width: 20em;
+
                     width: 15em;
−
                     height: 21em;
+
                     height: 16em;
 
                     position:absolute;
 
                     position:absolute;
 
                     left:2.5em;
 
                     left:2.5em;
Line 236: Line 233:
  
 
                 .vignette_text {            /*small panel that slides down on the vignettes*/
 
                 .vignette_text {            /*small panel that slides down on the vignettes*/
−
                     width: 22em;
+
                     width: 17em;
 
                     height: 3em;
 
                     height: 3em;
 
                     position:absolute;
 
                     position:absolute;
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 264: Line 264:
 
                     -o-transition: max-height 0.7s ;
 
                     -o-transition: max-height 0.7s ;
 
                     transition: max-height 0.7s ;
 
                     transition: max-height 0.7s ;
−
                     border: 10px solid transparent;
+
                     border: 5px solid transparent;
 
                     -moz-border-image: -moz-linear-gradient(left, #C6234A 0%, #3C519F 100%);
 
                     -moz-border-image: -moz-linear-gradient(left, #C6234A 0%, #3C519F 100%);
 
                     -webkit-border-image: -webkit-linear-gradient(left, #C6234A 0%, #3C519F 100%);
 
                     -webkit-border-image: -webkit-linear-gradient(left, #C6234A 0%, #3C519F 100%);
Line 277: Line 277:
 
                     z-index:6;
 
                     z-index:6;
 
                     position:relative;
 
                     position:relative;
−
                     top: 1em;
+
                     float: right;
−
                     left: 70em;
+
                     margin-top: 1em;
−
 
+
 
                     background-image: url("https://static.igem.org/mediawiki/2018/d/d3/T--Pasteur_Paris--Cross.png");
 
                     background-image: url("https://static.igem.org/mediawiki/2018/d/d3/T--Pasteur_Paris--Cross.png");
 
                     background-size:100%;
 
                     background-size:100%;
Line 302: Line 301:
 
                 }
 
                 }
  
−
</style>
+
                #vign_0 {
 +
                    order:3;
 +
                }
 +
                #vign_1 {
 +
                    order:4;
 +
                }
 +
                #vign_2 {
 +
                    order:5;
 +
                }
 +
                #vign_3 {
 +
                    order:9;
 +
                }
  
  
 +
                #pan_0 {
 +
                    order:6;
 +
                }
 +
                #pan_1 {
 +
                    order:7;
 +
                }
 +
                #pan_2 {
 +
                    order:8;
 +
                }
  
 +
                @media screen and (max-width: 850px) and (min-width: 572px) {
  
 +
                    #pan_0 {
 +
                        order: 5;
 +
                    }
 +
                    #pan_1 {
 +
                        order: 6;
 +
                    }
  
 +
                    #vign_2 {
 +
                        order: 7;
 +
                    }
 +
                }
  
 +
</style>
  
  
Line 315: Line 346:
  
  
 +
    <style>
  
  
−
<style>
 
  
  
 +
        @media screen and (min-width: 911px){
  
 +
        #naviconwrapper {
 +
        height: 100%;
 +
            margin: 0px ;    /*auto centers wrapper*/
 +
            min-width: 900px;
 +
            z-index: -100;
 +
        }
  
−
@media screen and (min-width: 911px){
+
        #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;
 +
        }
 +
           
  
−
#naviconwrapper {
+
        /* ==== BEGIN: Settings Main Menu Icons ==== */
−
height: 100%;
+
        #navicons {
−
    margin: 0px ;     /*auto centers wrapper*/
+
            width: 840px;
−
    min-width: 900px;
+
            background-color: linear-gradient(to right, rgb(161, 47, 92), rgb(128, 52, 110),rgb(84, 59, 126));
−
    z-index: -100;
+
            z-index: -20;    /*defines color behind icons */  
−
}
+
            display: inline-block;
 +
        vertical-align: middle;
 +
        height: 100%;
 +
        }
  
−
#naviconbar {
+
        #navicons ul {
−
height: 100%;
+
        margin: 0px;
−
    min-width: 900px;
+
        height: 100%;
−
    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));
+
            width: 100%;
−
    z-index: -60;
+
            position: relative; /*makes chip go directly behind home from left corner*/
−
    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%;
+
−
}
+
  
−
#navicons ul {
+
        #navicons ul li {
−
margin: 0px;
+
            list-style: none;
−
height: 100%;
+
            /*display: block;*/
−
    width: 100%;
+
            float: left;
−
    position: relative; /*makes chip go directly behind home from left corner*/
+
            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 {
  
−
#navicons ul li {
+
            width: 120px;
−
    list-style: none;
+
            display: block;
−
    /*display: block;*/
+
            text-decoration: none;
−
    float: left;
+
            /*color: #FFF;*/
−
    position: relative;
+
            text-align: center;
−
    font-family: sans-serif;
+
            text-transform: uppercase;
−
    font-size: 12px;
+
            z-index: 50;
−
    background-color: rgba(161, 47, 92, 0.0);
+
            padding-top: 45%;
−
    /*border: 1px solid #5781BD;*/
+
−
    z-index: 100;
+
−
    height: 90%;
+
−
}
+
  
−
#navicons ul li a {
+
        }
  
−
    width: 120px;
+
        #navicons ul a:hover {
−
    display: block;
+
        }     
−
    text-decoration: none;
+
        /* ==== END: Settings Main Menu Icons ==== */
−
    /*color: #FFF;*/
+
         
−
    text-align: center;
+
−
    text-transform: uppercase;
+
−
    z-index: 50;
+
−
    padding-top: 45%;
+
  
−
}
+
        /* ==== classes for icons ==== */
 +
        #project {
 +
            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 {  
+
        #project a {
−
}     
+
            color: #ffffff;
−
/* ==== END: Settings Main Menu Icons ==== */
+
        }
−
 
+
  
−
/* ==== classes for icons ==== */
+
        #labwork {
−
#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 {
+
        #labwork a {
−
    color: #ffffff;
+
            color: #ffffff;
−
}
+
        }
  
−
#labwork {
+
        #parts {
−
    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 {
+
        #parts a {
−
    color: #ffffff;
+
            color: #ffffff;
−
}
+
        }
  
−
#parts {
+
        #modelling {
−
    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 {
+
        #modelling a {
−
    color: #ffffff;
+
            color: #ffffff;
−
}
+
        }
  
−
#modelling {
+
        #achievements {
−
    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;
−
}
+
        }
  
−
#modelling a {
+
        #achievements a {
−
    color: #ffffff;
+
            color: #ffffff;
−
}
+
        }
  
−
#achievements {
+
        #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;
−
}
+
        }
  
−
#achievements a {
+
        #hp a {
−
    color: #ffffff;
+
            color: #ffffff;
−
}
+
        }
  
−
#hp {
+
        #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;
−
}
+
        }
  
−
#hp a {
+
        #aboutus a {
−
    color: #ffffff;
+
            color: #ffffff;
−
}
+
        }
 +
        /* ==== End classes for icons ==== */
  
−
#aboutus {
+
        /* ==== 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;
 +
        }
  
−
#aboutus a {
+
        /* == End Chip Design == */
−
    color: #ffffff;
+
−
}
+
−
/* ==== End classes for icons ==== */
+
  
−
/* ==== Begin running chip ==== */
 
−
/* == Begin Chip Design == */
 
−
#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 == */
+
        /* == Begin Chip Movement == */
 +
        #project:hover ~ #runningchip {
 +
            left: 15px;
 +
        }
  
 +
        #labwork:hover ~ #runningchip {
 +
            left: 135px;
 +
        }
  
−
/* == Begin Chip Movement == */
+
        #parts:hover ~ #runningchip {
−
#project:hover ~ #runningchip {
+
            left: 255px;
−
    left: 15px;
+
        }
−
}
+
  
−
#labwork:hover ~ #runningchip {
+
        #modelling:hover ~ #runningchip {
−
    left: 135px;
+
            left: 375px;
−
}
+
        }
  
−
#parts:hover ~ #runningchip {
+
        #achievements:hover ~ #runningchip {
−
    left: 255px;
+
            left: 495px;
−
}
+
        }
  
−
#modelling:hover ~ #runningchip {
+
        #hp:hover ~ #runningchip {
−
    left: 375px;
+
            left: 615px;
−
}
+
        }
  
−
#achievements:hover ~ #runningchip {
+
        #aboutus:hover ~ #runningchip {
−
    left: 495px;
+
            left: 735px;
−
}
+
        }
 +
        /* == End Chip Movment == */
 +
        /* ==== End running chip ==== */
  
−
#hp:hover ~ #runningchip {
 
−
    left: 615px;
 
−
}
 
  
−
#aboutus:hover ~ #runningchip {
+
        /* ==== Begin Settings Submenu Level 1 ==== */
−
    left: 735px;
+
        #navtextwrapper {                /*define background box*/
−
}
+
            margin: 0 auto;
−
/* == End Chip Movment == */
+
            padding: 0px;
−
/* ==== End running chip ==== */
+
            top: -2px;
 +
            height: 24px;
 +
            width: 840px;
 +
            position: relative;
 +
            /*border: 2px solid #000;*/
 +
        }
  
 +
        #navtext {
 +
            text-align: center;
 +
            font-family: Roboto,sans-serif;
 +
            font-size: 16px;
 +
            z-index: 600;
 +
        }
  
−
/* ==== Begin Settings Submenu Level 1 ==== */
+
        #navtext ul {
−
#navtextwrapper {               /*define background box*/
+
            margin: 0px auto;
−
    margin: 0 auto;
+
            top: -8px;
−
    padding: 0px;
+
            padding: 0px;
−
    top: -2px;
+
            position: absolute;
−
    height: 24px;
+
            z-index: 600;
−
    width: 840px;
+
        }
−
    position: relative;
+
−
    /*border: 2px solid #000;*/
+
−
}
+
  
−
#navtext {
+
        #navtext li {
−
    text-align: center;
+
            margin: 0px auto;        /*centers text*/
−
    font-family: Roboto,sans-serif;
+
            list-style: none;
−
    font-size: 16px;
+
            display: block;       /*makes items go horizontal and centers them*/
−
    z-index: 600;
+
            /*float: left;*/                /*makes items go horizontal*/
−
}
+
            position: relative;
 +
            z-index: 600;
 +
            height: 10px;
 +
        }  
  
−
#navtext ul {
+
        #navtext ul li a {
−
    margin: 0px auto;
+
            margin-top: 2px;
−
    top: -8px;
+
            height: 24px;
−
    padding: 0px;
+
            padding-left: 10px;
−
    position: absolute;
+
            padding-right: 10px;
−
    z-index: 600;
+
            text-decoration: none;
−
}
+
            color: #FFF;
 +
            display: block;
 +
            text-align: center;
 +
            border-radius: 8px;
 +
            z-index: 600;
 +
        }
  
−
#navtext li {
+
        #navtext ul li:hover > a {
−
    margin: 0px auto;        /*centers text*/
+
          /* background-color: #6696c7; /*makes a link stay in a certain color when hovering over it and then looking throught its subitems */
−
    list-style: none;
+
            color: #345292; /* couleur du sous titre quand tu passes dessus*/
−
    display: block;        /*makes items go horizontal and centers them*/
+
        }
−
    /*float: left;*/                /*makes items go horizontal*/
+
−
    position: relative;
+
−
    z-index: 600;
+
−
    height: 10px;
+
−
}  
+
  
−
#navtext ul li a {
+
        #project-sub {
−
    margin-top: 2px;
+
            display: none;
−
    height: 24px;
+
            left: -120px;
−
    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 {
+
        #labwork-sub {
−
  /* background-color: #6696c7; /*makes a link stay in a certain color when hovering over it and then looking throught its subitems */
+
            display: none;
−
    color: #345292; /* couleur du sous titre quand tu passes dessus*/
+
            left: 0px;
−
}
+
        }
  
−
#project-sub {
+
        #parts-sub {
−
    display: none;
+
            /*background-color: #ac34fe;*/
−
    left: -120px;
+
            display: none;
−
}
+
            left: 120px;
 +
        }
  
−
#labwork-sub {
+
        #modelling-sub{
−
    display: none;
+
            display: none;
−
    left: 0px;
+
            left: 240px;
−
}
+
        }
  
−
#parts-sub {
+
        #achievements-sub{
−
    /*background-color: #ac34fe;*/
+
            display: none;
−
    display: none;
+
            left: 360px;
−
    left: 120px;
+
        }
−
}
+
  
−
#modelling-sub{
+
        #hp-sub{
−
    display: none;
+
            display: none;
−
    left: 240px;
+
            left: 480px;
−
}
+
        }
 +
        #aboutus-sub{
 +
            display: none;
 +
            left: 600px;
 +
        }
  
−
#achievements-sub{
+
        .chip_gap {
−
    display: none;
+
            content: none;
−
    left: 360px;
+
        }
−
}
+
  
−
#hp-sub{
+
        .navsub1 {
−
    display: none;
+
            background-color: #000000;
−
    left: 480px;
+
        opacity: 1;
−
}
+
        }
−
#aboutus-sub{
+
        /* ==== End Settings Submenu Level 1 ==== */
−
    display: none;
+
−
    left: 600px;
+
−
}
+
  
−
.chip_gap {
+
        #smallnav{
−
    content: none;
+
            display: none;
−
}
+
        }
  
−
.navsub1 {
+
        } /* end media query*/
−
    background-color: #000000;
+
−
opacity: 1;
+
−
}
+
−
/* ==== End Settings Submenu Level 1 ==== */
+
  
−
#smallnav{
+
        @media screen and (max-width: 910px){
−
    display: none;
+
            #header{
−
}
+
                top: -9000px;
 +
                opacity: 0;
 +
            }
  
−
} /* end media query*/
+
        /* avoid space to content box */
 +
            .content_background_wrapper{
 +
                padding-top: 20px;
 +
            }
  
−
@media screen and (max-width: 910px){
+
         }
−
    #header{
+
−
         top: -9000px;
+
−
        opacity: 0;
+
−
    }
+
  
−
/* avoid space to content box */
+
        /* Styles for smallnav */
−
    .content_background_wrapper{
+
−
        padding-top: 20px;
+
−
    }
+
  
−
}
+
        /* Clearfix */
 +
        .clearfix:before,
 +
        .clearfix:after {
 +
            content: " ";
 +
            display: table;
 +
        }
 +
        .clearfix:after {
 +
            clear: both;
 +
        }
 +
        .clearfix {
 +
            *zoom: 1;
 +
        }
  
−
/* Styles for smallnav */
 
  
−
/* Clearfix */
+
        /* Basic Styles */
−
.clearfix:before,
+
−
.clearfix:after {
+
−
    content: " ";
+
−
    display: table;
+
−
}
+
−
.clearfix:after {
+
−
    clear: both;
+
−
}
+
−
.clearfix {
+
−
    *zoom: 1;
+
−
}
+
  
 +
        #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;
 +
        }
  
−
/* Basic Styles */
+
        /*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 {
+
            #smallnav a {
−
    height: 40px;
+
                text-align: left;
−
    width: 100%;
+
                width: 100%;
−
    background: #0051A2;
+
                text-indent: 25px;
−
    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*/
+
            #smallnav {
−
@media screen and (max-width: 720px) {
+
                border-bottom: 0;
−
    #smallnav {  
+
            }
−
        height: auto;
+
            #smallnav ul {
−
        background: #3B7EBF;
+
                display: none;
−
    }
+
                height: auto;
−
    #smallnav ul {
+
            }
−
        width: 100%;
+
            #smallnav a#pull {
−
        display: block;
+
                display: block;
−
        height: auto;
+
                background-color: #0051A2;
−
    }
+
                width: 100%;
−
    #smallnav li {
+
                position: relative;
−
        width: 50%;
+
            }
−
        float: left;
+
            #smallnav a#pull:after {
−
        position: relative;
+
                content:"";
−
        margin-bottom: 0;
+
                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;
 +
            }
  
−
    #smallnav a {
 
−
        text-align: left;
 
−
        width: 100%;
 
−
        text-indent: 25px;
 
−
    }
 
  
−
    #smallnav {
+
         /* ==== classes for icons ==== */
−
         border-bottom: 0;
+
         #home_small {
−
    }
+
            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 ==== */
+
        #home_small a {
−
#home_small {
+
            background: url(https://static.igem.org/mediawiki/2015/1/15/Freiburg_icon_home_white_03.png) no-repeat;
−
    background-color: #3673AF;
+
            background-position: left;
 +
            background-size: auto 100%;
 +
            background-repeat: no-repeat;
 +
            padding-left: 40px;
 +
            color: #FFF;
 +
        }
  
−
}
+
        #project_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 {
+
        #project_small a {
−
    background-color: #3673AF;
+
            background: url(https://static.igem.org/mediawiki/2015/7/76/Freiburg_icon_project_white_03.png) no-repeat;
 +
            background-position: left;
 +
            background-size: auto 90%;
 +
            background-repeat: no-repeat;
 +
            padding-left: 40px;
 +
            color: #FFF;
 +
        }
  
−
}
+
        #team_small {
 +
            background-color: #3673AF;
  
−
#project_small a {
+
        }
−
    background: url(https://static.igem.org/mediawiki/2015/7/76/Freiburg_icon_project_white_03.png) no-repeat;
+
−
    background-position: left;
+
−
    background-size: auto 90%;
+
−
    background-repeat: no-repeat;
+
−
    padding-left: 40px;
+
−
    color: #FFF;
+
−
}
+
  
−
#team_small {
+
        #team_small a {
−
    background-color: #3673AF;
+
            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 {
 +
            background-color: #3673AF;
  
−
#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 {
+
        #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;
 +
        }
  
−
#results_small a {
+
        #policy_small a {
−
    background: url(https://static.igem.org/mediawiki/2015/1/1e/Freiburg_icon_results_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;
−
}
+
        }
  
−
#policy_small {
+
        #notebook_small {
−
    background-color: #3673AF;
+
            background-color: #3673AF;
−
}
+
        }
  
−
#policy_small a {
+
        #notebook_small a {
−
    color: #FFF;
+
            background: url(https://static.igem.org/mediawiki/2015/9/99/Freibur_icon_notebook_white_03.png) no-repeat;  
−
    padding-left: 40px;
+
            background-position: left;
−
    background-image: url(https://static.igem.org/mediawiki/2015/f/f9/Freiburg_icon_policy_white_03.png);
+
            background-size: auto 90%;
−
    background-position: left;
+
            background-repeat: no-repeat;
−
    background-size: auto 90%;
+
            padding-left: 40px;
−
    background-repeat: no-repeat;
+
            color: #FFF;
−
}
+
        }
 +
        /* ==== End classes for icons ==== */
  
−
#notebook_small {
 
−
    background-color: #3673AF;
 
−
}
 
  
−
#notebook_small a {
+
        }/* end media query
−
    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 ==== */
+
  
 +
        /*Smartphone*/
 +
        @media only screen and (max-width : 320px) {
 +
            #smallnav li {
 +
                display: block;
 +
                float: none;
 +
                width: 100%;
 +
            }
 +
        }
  
−
}/* end media query
+
     </style>
−
 
+
−
/*Smartphone*/
+
−
@media only screen and (max-width : 320px) {
+
−
     #smallnav li {
+
−
        display: block;
+
−
        float: none;
+
−
        width: 100%;
+
−
    }
+
−
}
+
−
 
+
−
</style>
+
  
  
Line 850: Line 879:
  
 
<header id="MenuIgem">
 
<header id="MenuIgem">
−
 
 
</header>
 
</header>
  
Line 977: Line 1,005:
 
             </div>
 
             </div>
 
   
 
   
−
             <div class="block full">
+
             <div class="block full" style="display:flex;flex-flow: row wrap;justify-content:center;">
  
−
                 <h2 style="text-align: left;">Microfluidics</h2>
+
                 <h2 style="order:1">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 style="text-indent:0px;order:2;">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. Also, we explain how our molds and chips were fabricated.</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 993: Line 1,020:
  
 
                     <div class="vignette_text">
 
                     <div class="vignette_text">
−
                         <p style="margin:auto; text-align:center;font-weight:bold;" >PDMS Chips</p>
+
                         <p style="margin:auto; text-align:center;font-weight:bold;" >PDMS Chips Fabrication</p>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
Line 1,005: Line 1,032:
 
          
 
          
 
                     <div class="vignette_text">
 
                     <div class="vignette_text">
−
                         <p style="margin:auto; text-align:center;font-weight:bold;">Chip Bonding</p>
+
                         <p style="margin:auto; text-align:center;font-weight:bold;">PDMS Chip Demolding</p>
 
                     </div>
 
                     </div>
 +
                </div>
  
 +
                <div class="vignette" id="vign_2">
 +
                    <div class="vignette_for">
 +
                    </div>
 +
       
 +
                    <div class="vignette_back" id="back_2">
 +
                    </div>
 +
       
 +
                    <div class="vignette_text">
 +
                        <p style="margin:auto; text-align:center;font-weight:bold;">PDMS Chip Bonding</p>
 +
                    </div>
 
                 </div>
 
                 </div>
 +
  
  
Line 1,018: Line 1,057:
 
                     <ul>
 
                     <ul>
 
                         <li> Sylgard 184 Elastomer Kit  (Sigma-aldrich, Sylgard 184, 761036-5EA)  </li>
 
                         <li> Sylgard 184 Elastomer Kit  (Sigma-aldrich, Sylgard 184, 761036-5EA)  </li>
−
                         <li> Razor blade (OEMTOOLS 25181 Razor Blades, 100 Pack) </li>
+
                         <li> Vacuum pump unit (Vacuubrand PC 3 RZ 2.5) </li>
−
                         <li> 4mm Biopsy Puncher (Kai Biopsy Punch 4mm )  </li>
+
                         <li> Stove (Memmert UM 400) </li>
−
                        <li> Isopropanol (Fisherbrand, CAS number 67-63-0)  </li>
+
−
                        <li> Vacuum pump unit (Vacuubrand PC 3 RZ 2.5) </li>
+
 
                     </ul>
 
                     </ul>
 
                     <br>
 
                     <br>
Line 1,029: Line 1,066:
 
                     <ul>
 
                     <ul>
 
                         <li> Mix monomer and curing agent (10:1 proportion) for 30 seconds  </li>
 
                         <li> Mix monomer and curing agent (10:1 proportion) for 30 seconds  </li>
−
                         <li> Use a vacuum machine to extract air bubbles until the mixture is clear </li>
+
                         <li> Use a vacuum pump unit and a  vacuum bell jar to extract air bubbles until the mixture is clear </li>
 
                         <li> Pour mixture onto mold </li>
 
                         <li> Pour mixture onto mold </li>
 
                         <li> Put mixture+mold in stove at 70 degrees Celsius for 3 hours </li>
 
                         <li> Put mixture+mold in stove at 70 degrees Celsius for 3 hours </li>
−
                        <li> Use razor blade to cut the borders of the chip and extract the chip from its mold </li>
 
−
                        <li> Use biopsy puncher to drill input and output holes </li>
 
−
                        <li> Clean chip with isopropanol </li>
 
 
                     </ul>  
 
                     </ul>  
 
                     <br>
 
                     <br>
Line 1,042: Line 1,076:
 
                     <br>  
 
                     <br>  
 
                 </div>
 
                 </div>
 +
 +
                <div class="panel" id="pan_1">
 +
                    <div class="close_button">
 +
                    </div>
 +
                    <br>
 +
                    <h3>Materials</h3>
 +
                    <ul>
 +
                        <li> Razor blade (OEMTOOLS 25181 Razor Blades, 100 Pack)  </li>
 +
                        <li> Biopsy puncher (Kai Biopsy Punch 4mm )  </li>
 +
                    </ul>
 +
                    <br>
 +
                    <h3>Protocol</h3>
 +
                    <br>
 +
                    <ul>
 +
                        <li> Cut the borders of the chip with the razor blade  </li>
 +
                        <li> Extract the chip from its mold </li>
 +
                        <li> Drill input and output holes with the biopsy puncher </li>
 +
                    <br>
 +
                    <div class="protocol_box">
 +
                        <p> Get full protocol here </p>
 +
                    </div>
 +
                    <br>
 +
                </div>
 +
 +
                <div class="panel" id="pan_2">
 +
                    <div class="close_button">
 +
                    </div>
 +
                    <br>
 +
                    <h3>Materials</h3>
 +
                    <ul>
 +
                        <li>  Plasma cleaner (Diener Pico PCCE)  </li>
 +
                        <li>  Distilled water (Fisherbrand, CAS number 7732-18-5)  </li>
 +
                        <li>  Isopropanol (Fisherbrand, CAS number 67-63-0)  </li>
 +
                        <li>  Office duct tape </li>
 +
                        <li>  Vertical laminar airflow cabinets (Euroclone aura vertical S.D.4) </li>
 +
                    </ul>
 +
                    <br>
 +
                    <h3>Protocol</h3>
 +
                    <br>
 +
                    <ul>
 +
                        <li> Take chip and the surface it needs to be bonded to in the airflow cabinet  </li>
 +
                        <li> Clean chip with duct tape and isopropanol </li>
 +
                        <li> Put the chip and the surface into the plasma cleaner. </li>
 +
                        <li> Expose chip and surface 30 seconds to plasma. </li>
 +
                        <li> Take the chip and the surface back in the airflow cabinet </li>
 +
                        <li> Press the microfluidic chip against the surface </li>
 +
                        <li> Insert distilled water into chip circuitry </li>
 +
 +
                    <br>
 +
                    <div class="protocol_box">
 +
                        <p> Get full protocol here </p>
 +
                    </div>
 +
                    <br>
 +
                </div>
 +
 +
 +
                <div class="vignette" id="vign_3">
 +
                    <div class="vignette_for">
 +
                    </div>
 +
       
 +
                    <div class="vignette_back" id="back_3">
 +
                    </div>
 +
       
 +
                    <div class="vignette_text">
 +
                        <p style="margin:auto; text-align:center;font-weight:bold;">PDMS Chip Treatment for Nerve Growth</p>
 +
                    </div>
 +
                </div>
 +
  
 
             </div>                           
 
             </div>                           
Line 1,108: Line 1,210:
 
                     vignFor.style.opacity = 0;
 
                     vignFor.style.opacity = 0;
 
                     vignText.style.opacity = 1;
 
                     vignText.style.opacity = 1;
−
                     vignText.style.top = "20em";
+
                     vignText.style.top = "15em";
 
                 }  
 
                 }  
 
             });
 
             });

Latest revision as of 12:37, 16 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. Also, we explain how our molds and chips were fabricated.

PDMS Chips Fabrication

PDMS Chip Demolding

PDMS Chip Bonding


Materials

  • Sylgard 184 Elastomer Kit (Sigma-aldrich, Sylgard 184, 761036-5EA)
  • Vacuum pump unit (Vacuubrand PC 3 RZ 2.5)
  • Stove (Memmert UM 400)

Protocol

According to manufacturer's instruction.

  • Mix monomer and curing agent (10:1 proportion) for 30 seconds
  • Use a vacuum pump unit and a vacuum bell jar 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

Get full protocol here



Materials

  • Razor blade (OEMTOOLS 25181 Razor Blades, 100 Pack)
  • Biopsy puncher (Kai Biopsy Punch 4mm )

Protocol


  • Cut the borders of the chip with the razor blade
  • Extract the chip from its mold
  • Drill input and output holes with the biopsy puncher

    • Get full protocol here



Materials

  • Plasma cleaner (Diener Pico PCCE)
  • Distilled water (Fisherbrand, CAS number 7732-18-5)
  • Isopropanol (Fisherbrand, CAS number 67-63-0)
  • Office duct tape
  • Vertical laminar airflow cabinets (Euroclone aura vertical S.D.4)

Protocol


  • Take chip and the surface it needs to be bonded to in the airflow cabinet
  • Clean chip with duct tape and isopropanol
  • Put the chip and the surface into the plasma cleaner.
  • Expose chip and surface 30 seconds to plasma.
  • Take the chip and the surface back in the airflow cabinet
  • Press the microfluidic chip against the surface
  • Insert distilled water into chip circuitry

    • Get full protocol here


PDMS Chip Treatment for Nerve Growth