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

 
(13 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;
 
                 }
 
                 }
 +
  
 
                 .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 215: 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 231: 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 251: Line 253:
  
 
                 .panel {
 
                 .panel {
 +
                    position: relative;
 +
                    display: inline-block;
 +
                    width: 90%;
 
                     padding: 0px 18px;
 
                     padding: 0px 18px;
 
                     background-color: white;
 
                     background-color: white;
Line 259: 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 270: Line 275:
 
                     width:3em;
 
                     width:3em;
 
                     height:3em;
 
                     height:3em;
−
                    position:absolute;
 
−
                    right: 1em;
 
−
                    top:1em;
 
 
                     z-index:6;
 
                     z-index:6;
−
 
+
                    position:relative;
 +
                    float: right;
 +
                    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 289: Line 293:
 
                 .close_button:active {
 
                 .close_button:active {
 
                     background-color:#3C519F;
 
                     background-color:#3C519F;
−
                     opacity:0.6;
+
                     opacity:0.2;
 
                 }
 
                 }
  
−
</style>
+
                .protocol_box {
 +
                    border: 0.2em solid #AF3D57;
 +
                    width:15em;
 +
                }
  
 +
                #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 306: Line 346:
  
  
 +
    <style>
  
−
<style>
 
  
  
  
 +
        @media screen and (min-width: 911px){
  
−
@media screen and (min-width: 911px){
+
        #naviconwrapper {
 +
        height: 100%;
 +
            margin: 0px ;    /*auto centers wrapper*/
 +
            min-width: 900px;
 +
            z-index: -100;
 +
        }
  
−
#naviconwrapper {
+
        #naviconbar {
−
height: 100%;
+
        height: 100%;
−
    margin: 0px ;    /*auto centers wrapper*/
+
            min-width: 900px;
−
    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: -100;
+
            z-index: -60;
−
}
+
            text-align: center;
 +
        }
 +
           
  
−
#naviconbar {
+
        /* ==== BEGIN: Settings Main Menu Icons ==== */
−
height: 100%;
+
        #navicons {
−
    min-width: 900px;
+
            width: 840px;
−
    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));
+
            background-color:  linear-gradient(to right, rgb(161, 47, 92), rgb(128, 52, 110),rgb(84, 59, 126));
−
    z-index: -60;
+
            z-index: -20;   /*defines color behind icons */
−
    text-align: center;
+
            display: inline-block;
−
}
+
        vertical-align: middle;
−
   
+
        height: 100%;
 +
        }
  
−
/* ==== BEGIN: Settings Main Menu Icons ==== */
+
        #navicons ul {
−
#navicons {
+
        margin: 0px;
−
    width: 840px;
+
        height: 100%;
−
    background-color: linear-gradient(to right, rgb(161, 47, 92), rgb(128, 52, 110),rgb(84, 59, 126));
+
            width: 100%;
−
    z-index: -20;   /*defines color behind icons */  
+
            position: relative;  /*makes chip go directly behind home from left corner*/
−
    display: inline-block;
+
−
vertical-align: middle;
+
−
height: 100%;
+
−
}
+
  
−
#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 {
+
        #navicons ul li a {
−
    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 {
+
            width: 120px;
 +
            display: block;
 +
            text-decoration: none;
 +
            /*color: #FFF;*/
 +
            text-align: center;
 +
            text-transform: uppercase;
 +
            z-index: 50;
 +
            padding-top: 45%;
  
−
    width: 120px;
+
        }
−
    display: block;
+
−
    text-decoration: none;
+
−
    /*color: #FFF;*/
+
−
    text-align: center;
+
−
    text-transform: uppercase;
+
−
    z-index: 50;
+
−
    padding-top: 45%;
+
  
−
}
+
        #navicons ul a:hover {
 +
        }    
 +
        /* ==== END: Settings Main Menu Icons ==== */
 +
         
  
−
#navicons ul a:hover {
+
        /* ==== classes for icons ==== */
−
}     
+
        #project {
−
/* ==== END: Settings Main Menu Icons ==== */
+
            background: url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
−
 
+
            height: 60px;
 +
            background-position: center;
 +
        }
  
−
/* ==== classes for icons ==== */
+
        #project a {
−
#project {
+
            color: #ffffff;
−
    background: url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
+
        }
−
    height: 60px;
+
−
    background-position: center;
+
−
}
+
  
−
#project a {
+
        #labwork {
−
    color: #ffffff;
+
            background: url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
−
}
+
            height: 60px;
 +
            background-position: center;
 +
        }
  
−
#labwork {
+
        #labwork a {
−
    background: url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
+
            color: #ffffff;
−
    height: 60px;
+
        }
−
    background-position: center;
+
−
}
+
  
−
#labwork a {
+
        #parts {
−
    color: #ffffff;
+
            background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
−
}
+
            height: 60px;
 +
            background-position: center;
 +
        }
  
−
#parts {
+
        #parts a {
−
    background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
+
            color: #ffffff;
−
    height: 60px;
+
        }
−
    background-position: center;
+
−
}
+
  
−
#parts a {
+
        #modelling {
−
    color: #ffffff;
+
            background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
−
}
+
            height: 60px;
 +
            background-position: center;
 +
        }
  
−
#modelling {
+
        #modelling a {
−
    background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
+
            color: #ffffff;
−
    height: 60px;
+
        }
−
    background-position: center;
+
−
}
+
  
−
#modelling a {
+
        #achievements {
−
    color: #ffffff;
+
            background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png)no-repeat;
−
}
+
            height: 60px;
 +
            background-position: center;
 +
        }
  
−
#achievements {
+
        #achievements a {
−
    background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png)no-repeat;
+
            color: #ffffff;
−
    height: 60px;
+
        }
−
    background-position: center;
+
−
}
+
  
−
#achievements a {
+
        #hp {
−
    color: #ffffff;
+
            background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
−
}
+
            height: 60px;
 +
            background-position: center;
 +
        }
  
−
#hp {
+
        #hp a {
−
    background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
+
            color: #ffffff;
−
    height: 60px;
+
        }
−
    background-position: center;
+
−
}
+
  
−
#hp a {
+
        #aboutus {
−
    color: #ffffff;
+
            background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
−
}
+
            height: 60px;
 +
            background-position: center;
 +
        }
  
−
#aboutus {
+
        #aboutus a {
−
    background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;  
+
            color: #ffffff;
−
    height: 60px;
+
        }
−
    background-position: center;
+
        /* ==== End classes for icons ==== */
−
}
+
  
−
#aboutus a {
+
        /* ==== Begin running chip ==== */
−
    color: #ffffff;
+
        /* == Begin Chip Design == */
−
}
+
        #runningchip {
−
/* ==== End classes for icons ==== */
+
            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;
 +
        }
  
−
/* ==== Begin running chip ==== */
+
        /* == End Chip Design == */
−
/* == 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;
 +
        }
  
−
/* == Begin Chip Movement == */
+
        #labwork:hover ~ #runningchip {
−
#project:hover ~ #runningchip {
+
            left: 135px;
−
    left: 15px;
+
        }
−
}
+
  
−
#labwork:hover ~ #runningchip {
+
        #parts:hover ~ #runningchip {
−
    left: 135px;
+
            left: 255px;
−
}
+
        }
  
−
#parts:hover ~ #runningchip {
+
        #modelling:hover ~ #runningchip {
−
    left: 255px;
+
            left: 375px;
−
}
+
        }
  
−
#modelling:hover ~ #runningchip {
+
        #achievements:hover ~ #runningchip {
−
    left: 375px;
+
            left: 495px;
−
}
+
        }
  
−
#achievements:hover ~ #runningchip {
+
        #hp:hover ~ #runningchip {
−
    left: 495px;
+
            left: 615px;
−
}
+
        }
  
−
#hp:hover ~ #runningchip {
+
        #aboutus:hover ~ #runningchip {
−
    left: 615px;
+
            left: 735px;
−
}
+
        }
 +
        /* == End Chip Movment == */
 +
        /* ==== End running chip ==== */
  
−
#aboutus:hover ~ #runningchip {
 
−
    left: 735px;
 
−
}
 
−
/* == End Chip Movment == */
 
−
/* ==== End running chip ==== */
 
  
 +
        /* ==== Begin Settings Submenu Level 1 ==== */
 +
        #navtextwrapper {                /*define background box*/
 +
            margin: 0 auto;
 +
            padding: 0px;
 +
            top: -2px;
 +
            height: 24px;
 +
            width: 840px;
 +
            position: relative;
 +
            /*border: 2px solid #000;*/
 +
        }
  
−
/* ==== Begin Settings Submenu Level 1 ==== */
+
        #navtext {
−
#navtextwrapper {               /*define background box*/
+
            text-align: center;
−
    margin: 0 auto;
+
            font-family: Roboto,sans-serif;
−
    padding: 0px;
+
            font-size: 16px;
−
    top: -2px;
+
            z-index: 600;
−
    height: 24px;
+
        }
−
    width: 840px;
+
−
    position: relative;
+
−
    /*border: 2px solid #000;*/
+
−
}
+
  
−
#navtext {
+
        #navtext ul {
−
    text-align: center;
+
            margin: 0px auto;
−
    font-family: Roboto,sans-serif;
+
            top: -8px;
−
    font-size: 16px;
+
            padding: 0px;
−
    z-index: 600;
+
            position: absolute;
−
}
+
            z-index: 600;
 +
        }
  
−
#navtext ul {
+
        #navtext li {
−
    margin: 0px auto;
+
            margin: 0px auto;       /*centers text*/
−
    top: -8px;
+
            list-style: none;
−
    padding: 0px;
+
            display: block;       /*makes items go horizontal and centers them*/
−
    position: absolute;
+
            /*float: left;*/                /*makes items go horizontal*/
−
    z-index: 600;
+
            position: relative;
−
}
+
            z-index: 600;
 +
            height: 10px;
 +
        }  
  
−
#navtext li {
+
        #navtext ul li a {
−
    margin: 0px auto;       /*centers text*/
+
            margin-top: 2px;
−
    list-style: none;
+
            height: 24px;
−
    display: block;       /*makes items go horizontal and centers them*/
+
            padding-left: 10px;
−
    /*float: left;*/                /*makes items go horizontal*/
+
            padding-right: 10px;
−
    position: relative;
+
            text-decoration: none;
−
    z-index: 600;
+
            color: #FFF;
−
    height: 10px;
+
            display: block;
−
}  
+
            text-align: center;
 +
            border-radius: 8px;
 +
            z-index: 600;
 +
        }
  
−
#navtext ul li a {
+
        #navtext ul li:hover > a {
−
    margin-top: 2px;
+
          /* background-color: #6696c7; /*makes a link stay in a certain color when hovering over it and then looking throught its subitems */
−
    height: 24px;
+
            color: #345292; /* couleur du sous titre quand tu passes dessus*/
−
    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 {
+
        #project-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: -120px;
−
}
+
        }
  
−
#project-sub {
+
        #labwork-sub {
−
    display: none;
+
            display: none;
−
    left: -120px;
+
            left: 0px;
−
}
+
        }
  
−
#labwork-sub {
+
        #parts-sub {
−
    display: none;
+
            /*background-color: #ac34fe;*/
−
    left: 0px;
+
            display: none;
−
}
+
            left: 120px;
 +
        }
  
−
#parts-sub {
+
        #modelling-sub{
−
    /*background-color: #ac34fe;*/
+
            display: none;
−
    display: none;
+
            left: 240px;
−
    left: 120px;
+
        }
−
}
+
  
−
#modelling-sub{
+
        #achievements-sub{
−
    display: none;
+
            display: none;
−
    left: 240px;
+
            left: 360px;
−
}
+
        }
  
−
#achievements-sub{
+
        #hp-sub{
−
    display: none;
+
            display: none;
−
    left: 360px;
+
            left: 480px;
−
}
+
        }
 +
        #aboutus-sub{
 +
            display: none;
 +
            left: 600px;
 +
        }
  
−
#hp-sub{
+
        .chip_gap {
−
    display: none;
+
            content: none;
−
    left: 480px;
+
        }
−
}
+
−
#aboutus-sub{
+
−
    display: none;
+
−
    left: 600px;
+
−
}
+
  
−
.chip_gap {
+
        .navsub1 {
−
    content: none;
+
            background-color: #000000;
−
}
+
        opacity: 1;
 +
        }
 +
        /* ==== End Settings Submenu Level 1 ==== */
  
−
.navsub1 {
+
        #smallnav{
−
    background-color: #000000;
+
            display: none;
−
opacity: 1;
+
        }
−
}
+
−
/* ==== End Settings Submenu Level 1 ==== */
+
  
−
#smallnav{
+
        } /* end media query*/
−
    display: none;
+
−
}
+
  
−
} /* end media query*/
+
        @media screen and (max-width: 910px){
 +
            #header{
 +
                top: -9000px;
 +
                opacity: 0;
 +
            }
  
−
@media screen and (max-width: 910px){
+
        /* avoid space to content box */
−
    #header{
+
            .content_background_wrapper{
−
        top: -9000px;
+
                padding-top: 20px;
−
        opacity: 0;
+
            }
−
    }
+
  
−
/* avoid space to content box */
+
         }
−
    .content_background_wrapper{
+
−
         padding-top: 20px;
+
−
    }
+
  
−
}
+
        /* Styles for smallnav */
  
−
/* Styles for smallnav */
+
        /* Clearfix */
 +
        .clearfix:before,
 +
        .clearfix:after {
 +
            content: " ";
 +
            display: table;
 +
        }
 +
        .clearfix:after {
 +
            clear: both;
 +
        }
 +
        .clearfix {
 +
            *zoom: 1;
 +
        }
  
−
/* Clearfix */
 
−
.clearfix:before,
 
−
.clearfix:after {
 
−
    content: " ";
 
−
    display: table;
 
−
}
 
−
.clearfix:after {
 
−
    clear: both;
 
−
}
 
−
.clearfix {
 
−
    *zoom: 1;
 
−
}
 
  
 +
        /* Basic Styles */
  
−
/* Basic Styles */
+
        #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;
 +
        }
  
−
#smallnav {
+
        /*Styles for screen 600px and lower*/
−
    height: 40px;
+
        @media screen and (max-width: 720px) {
−
    width: 100%;
+
            #smallnav {  
−
    background: #0051A2;
+
                height: auto;
−
    font-size: 11pt;
+
                background: #3B7EBF;
−
    font-family: 'PT Sans', Arial, sans-serif;
+
            }
−
    font-weight: bold;
+
            #smallnav ul {
−
    position: fixed;
+
                width: 100%;
−
    border-bottom: 2px solid #CFCFCF;
+
                display: block;
−
    z-index: 3000;
+
                height: auto;
−
    opacity: 0.9;
+
            }
−
}
+
            #smallnav li {
−
#smallnav ul {
+
                width: 50%;
−
    padding: 0;
+
                float: left;
−
    margin: 0 auto;
+
                position: relative;
−
    width: 720px;
+
                margin-bottom: 0;
−
    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 a {
−
@media screen and (max-width: 720px) {
+
                text-align: left;
−
    #smallnav {  
+
                width: 100%;
−
        height: auto;
+
                text-indent: 25px;
−
        background: #3B7EBF;
+
            }
−
    }
+
−
    #smallnav ul {
+
−
        width: 100%;
+
−
        display: block;
+
−
        height: auto;
+
−
    }
+
−
    #smallnav li {
+
−
        width: 50%;
+
−
        float: left;
+
−
        position: relative;
+
−
        margin-bottom: 0;
+
−
    }
+
  
−
    #smallnav a {
+
            #smallnav {
−
        text-align: left;
+
                border-bottom: 0;
−
        width: 100%;
+
            }
−
        text-indent: 25px;
+
            #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;
 +
            }
  
−
    #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;
 
−
    }
 
  
 +
        /* ==== classes for icons ==== */
 +
        #home_small {
 +
            background-color: #3673AF;
  
−
/* ==== classes for icons ==== */
+
        }
−
#home_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;
 +
        }
  
−
#home_small a {
+
        #project_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;
+
  
−
}
+
        #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;
 +
        }
  
−
#project_small a {
+
        #team_small {
−
    background: url(https://static.igem.org/mediawiki/2015/7/76/Freiburg_icon_project_white_03.png) no-repeat;
+
            background-color: #3673AF;
−
    background-position: left;
+
−
    background-size: auto 90%;
+
−
    background-repeat: no-repeat;
+
−
    padding-left: 40px;
+
−
    color: #FFF;
+
−
}
+
  
−
#team_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;
 +
        }
  
−
#team_small a {
+
        #results_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;
+
  
−
}
+
        #results_small a {
 +
            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;
 +
        }
  
−
#results_small a {
+
        #policy_small {
−
    background: url(https://static.igem.org/mediawiki/2015/1/1e/Freiburg_icon_results_white_03.png) no-repeat;
+
            background-color: #3673AF;
−
    background-position: left;
+
        }
−
    background-size: auto 90%;
+
−
    background-repeat: no-repeat;
+
−
    padding-left: 40px;
+
−
    color: #FFF;
+
−
}
+
  
−
#policy_small {
+
        #policy_small a {
−
    background-color: #3673AF;
+
            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;
 +
        }
  
−
#policy_small a {
+
        #notebook_small {
−
    color: #FFF;
+
            background-color: #3673AF;
−
    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 {
+
        #notebook_small a {
−
    background-color: #3673AF;
+
            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 ==== */
  
−
#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
  
−
}/* end media query
+
        /*Smartphone*/
 +
        @media only screen and (max-width : 320px) {
 +
            #smallnav li {
 +
                display: block;
 +
                float: none;
 +
                width: 100%;
 +
            }
 +
        }
  
−
/*Smartphone*/
+
     </style>
−
@media only screen and (max-width : 320px) {
+
−
     #smallnav li {
+
−
        display: block;
+
−
        float: none;
+
−
        width: 100%;
+
−
    }
+
−
}
+
−
 
+
−
</style>
+
  
  
Line 840: Line 879:
  
 
<header id="MenuIgem">
 
<header id="MenuIgem">
−
 
 
</header>
 
</header>
  
Line 967: 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 983: 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>
 +
 +
                <div class="vignette" id="vign_1">
 +
                    <div class="vignette_for">
 +
                    </div>
 +
       
 +
                    <div class="vignette_back" id="back_1">
 +
                    </div>
 +
       
 +
                    <div class="vignette_text">
 +
                        <p style="margin:auto; text-align:center;font-weight:bold;">PDMS Chip Demolding</p>
 +
                    </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 class="panel" id="pan_0">
 
                 <div class="panel" id="pan_0">
Line 993: Line 1,056:
 
                     <h3>Materials</h3>
 
                     <h3>Materials</h3>
 
                     <ul>
 
                     <ul>
−
                         <li> Sylgard 184 Elastomer Kit  </li>
+
                         <li> Sylgard 184 Elastomer Kit  (Sigma-aldrich, Sylgard 184, 761036-5EA)  </li>
−
                         <li> Razor blade  </li>
+
                         <li> Vacuum pump unit (Vacuubrand PC 3 RZ 2.5) </li>
−
                         <li> 4mm Biopsy Puncher  </li>
+
                         <li> Stove (Memmert UM 400) </li>
−
                        <li> Isopropanol </li>
+
 
                     </ul>
 
                     </ul>
 
                     <br>
 
                     <br>
Line 1,003: Line 1,065:
 
                     HardwarespecsPDMS.pdf">manufacturer's instruction</a>. <br>  
 
                     HardwarespecsPDMS.pdf">manufacturer's instruction</a>. <br>  
 
                     <ul>
 
                     <ul>
−
                         <li> Mix monomer and curing agent (10:1 proportion) for 30 seconds, according to   </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 oven at 70 degrees Celsius for 3 hours </li>
+
                         <li> Put mixture+mold in stove at 70 degrees Celsius for 3 hours </li>
−
                        <li> Use a razor blade or scalpel to cut the borders of the chip and extract the chipfrom its mold </li>
+
−
                        <li> Use biopsy puncher to drill input and output holes </li>
+
−
                        <li> Clean chip with isopropanol </li>
+
 
                     </ul>  
 
                     </ul>  
 
                     <br>
 
                     <br>
−
                     <p> Get full protocol here </p>
+
                     <div class="protocol_box">
 +
                        <p> Get full protocol here </p>
 +
                    </div>
 
                     <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,081: 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