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

 
(14 intermediate revisions by 2 users not shown)
Line 30: Line 30:
 
left: 0%;
 
left: 0%;
 
width: 100%;
 
width: 100%;
−
z-index: 2;
+
z-index: 10;
 
}
 
}
  
Line 40: Line 40:
 
left: 0%;
 
left: 0%;
 
width: 100%;
 
width: 100%;
−
z-index: 2;
+
z-index: 10;
 
border-bottom-left-radius: 15px;
 
border-bottom-left-radius: 15px;
 
border-bottom-right-radius: 15px;
 
border-bottom-right-radius: 15px;
Line 185: Line 185:
 
#banner h1 {padding-top: 100px;}
 
#banner h1 {padding-top: 100px;}
 
}
 
}
−
 
−
 
  
 
                 .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:absolute;
+
                     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;
 
                     top:2em;
 
                     top:2em;
  
−
                     z-index: 2;
+
                     z-index:2;
 
                     border: 1px solid #333;
 
                     border: 1px solid #333;
 
                     border-radius:20px;
 
                     border-radius:20px;
Line 216: Line 216:
 
                 }
 
                 }
  
−
 
−
       
 
 
                 .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 234: Line 232:
 
                 }  
 
                 }  
  
 +
                .vignette_text {            /*small panel that slides down on the vignettes*/
 +
                    width: 17em;
 +
                    height: 3em;
 +
                    position:absolute;
 +
                    top:5em;
 +
                    left:1.5em;
  
 +
                    z-index: 3;
 +
                    border: 1px solid #333;
 +
                    background-color:white;
 +
                    box-shadow: 2px 2px 3px grey;
 +
                    opacity: 0.8;
  
 +
                    pointer-events:none;
 +
                    -webkit-transition: top 0.7s, opacity 0.7s;
 +
                    -moz-transition: top 0.7s, opacity 0.7s;
 +
                    -o-transition: top 0.7s, opacity 0.7s;
 +
                    transition: top 0.7s, opacity 0.7s;
 +
                }
  
−
              .vignette_text {            /*small panel that slides down on the vignettes*/
+
                .panel {
−
                  width: 22em;
+
                    position: relative;
−
                  height: 3em;
+
                    display: inline-block;
−
                  position:absolute;
+
                    width: 90%;
−
                  top:5em;
+
                    padding: 0px 18px;
−
                  left:1.5em;
+
                    background-color: white;
 +
                    max-height: 0;
 +
                    overflow: hidden;
 +
                    -webkit-transition: max-height 0.7s;
 +
                    -moz-transition: max-height 0.7s ;
 +
                    -o-transition: max-height 0.7s ;
 +
                    transition: max-height 0.7s ;
 +
                    border: 5px solid transparent;
 +
                    -moz-border-image: -moz-linear-gradient(left, #C6234A 0%, #3C519F 100%);
 +
                    -webkit-border-image: -webkit-linear-gradient(left, #C6234A 0%, #3C519F 100%);
 +
                    -o-border-image: -webkit-linear-gradient(left, #C6234A 0%, #3C519F 100%);
 +
                    border-image: linear-gradient(to right, #C6234A 0%, #3C519F 100%);
 +
                    border-image-slice: 1;
 +
                }
  
−
                  z-index: 3;
+
                .close_button {
−
                  border: 1px solid #333;
+
                    width:3em;
−
                  background-color:white;
+
                    height:3em;
−
                  box-shadow: 2px 2px 3px grey;
+
                    z-index:6;
−
                  opacity: 0.8;
+
                    position:relative;
 +
                    float: right;
 +
                    margin-top: 1em;
 +
                    background-image: url("https://static.igem.org/mediawiki/2018/d/d3/T--Pasteur_Paris--Cross.png");
 +
                    background-size:100%;
 +
                    opacity:0.3;
 +
                    border-radius:4px;
  
−
                  pointer-events:none;
+
                    cursor:pointer;
−
                  -webkit-transition: top 0.7s, opacity 0.7s;
+
                }
−
                  -moz-transition: top 0.7s, opacity 0.7s;
+
−
                  -o-transition: top 0.7s, opacity 0.7s;
+
                .close_button:hover {
−
                  transition: top 0.7s, opacity 0.7s;
+
                    opacity:1;
−
              }
+
                }
  
−
</style>
+
                .close_button:active {
 +
                    background-color:#3C519F;
 +
                    opacity:0.2;
 +
                }
  
 +
                .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 272: Line 346:
  
  
−
<style>
+
    <style>
  
  
  
  
−
@media screen and (min-width: 911px){
+
        @media screen and (min-width: 911px){
  
−
#naviconwrapper {
+
        #naviconwrapper {
−
height: 100%;
+
        height: 100%;
−
    margin: 0px ;    /*auto centers wrapper*/
+
            margin: 0px ;    /*auto centers wrapper*/
−
    min-width: 900px;
+
            min-width: 900px;
−
    z-index: -100;
+
            z-index: -100;
−
}
+
        }
  
−
#naviconbar {
+
        #naviconbar {
−
height: 100%;
+
        height: 100%;
−
    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));
+
            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;
+
            z-index: -60;
−
    text-align: center;
+
            text-align: center;
−
}
+
        }
−
   
+
           
  
−
/* ==== BEGIN: Settings Main Menu Icons ==== */
+
        /* ==== BEGIN: Settings Main Menu Icons ==== */
−
#navicons {
+
        #navicons {
−
    width: 840px;
+
            width: 840px;
−
    background-color:  linear-gradient(to right, rgb(161, 47, 92), rgb(128, 52, 110),rgb(84, 59, 126));
+
            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 */  
+
            z-index: -20;    /*defines color behind icons */  
−
    display: inline-block;
+
            display: inline-block;
−
vertical-align: middle;
+
        vertical-align: middle;
−
height: 100%;
+
        height: 100%;
−
}
+
        }
  
−
#navicons ul {
+
        #navicons ul {
−
margin: 0px;
+
        margin: 0px;
−
height: 100%;
+
        height: 100%;
−
    width: 100%;
+
            width: 100%;
−
    position: relative;  /*makes chip go directly behind home from left corner*/
+
            position: relative;  /*makes chip go directly behind home from left corner*/
  
−
}
+
        }
  
−
#navicons ul li {
+
        #navicons ul li {
−
    list-style: none;
+
            list-style: none;
−
    /*display: block;*/
+
            /*display: block;*/
−
    float: left;
+
            float: left;
−
    position: relative;
+
            position: relative;
−
    font-family: sans-serif;
+
            font-family: sans-serif;
−
    font-size: 12px;
+
            font-size: 12px;
−
    background-color: rgba(161, 47, 92, 0.0);
+
            background-color: rgba(161, 47, 92, 0.0);
−
    /*border: 1px solid #5781BD;*/
+
            /*border: 1px solid #5781BD;*/
−
    z-index: 100;
+
            z-index: 100;
−
    height: 90%;
+
            height: 90%;
−
}
+
        }
  
−
#navicons ul li a {
+
        #navicons ul li a {
  
−
    width: 120px;
+
            width: 120px;
−
    display: block;
+
            display: block;
−
    text-decoration: none;
+
            text-decoration: none;
−
    /*color: #FFF;*/
+
            /*color: #FFF;*/
−
    text-align: center;
+
            text-align: center;
−
    text-transform: uppercase;
+
            text-transform: uppercase;
−
    z-index: 50;
+
            z-index: 50;
−
    padding-top: 45%;
+
            padding-top: 45%;
  
−
}
+
        }
  
−
#navicons ul a:hover {  
+
        #navicons ul a:hover {  
−
}       
+
        }       
−
/* ==== END: Settings Main Menu Icons ==== */
+
        /* ==== END: Settings Main Menu Icons ==== */
−
 
+
         
  
−
/* ==== classes for icons ==== */
+
        /* ==== classes for icons ==== */
−
#project {
+
        #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 {
+
        #project a {
−
    color: #ffffff;
+
            color: #ffffff;
−
}
+
        }
  
−
#labwork {
+
        #labwork {
−
    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 {
+
        #labwork a {
−
    color: #ffffff;
+
            color: #ffffff;
−
}
+
        }
  
−
#parts {
+
        #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;
−
}
+
        }
  
−
#parts a {
+
        #parts a {
−
    color: #ffffff;
+
            color: #ffffff;
−
}
+
        }
  
−
#modelling {
+
        #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;
−
}
+
        }
  
−
#modelling a {
+
        #modelling a {
−
    color: #ffffff;
+
            color: #ffffff;
−
}
+
        }
  
−
#achievements {
+
        #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;
−
}
+
        }
  
−
#achievements a {
+
        #achievements a {
−
    color: #ffffff;
+
            color: #ffffff;
−
}
+
        }
  
−
#hp {
+
        #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;
−
}
+
        }
  
−
#hp a {
+
        #hp a {
−
    color: #ffffff;
+
            color: #ffffff;
−
}
+
        }
  
−
#aboutus {
+
        #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;
−
}
+
        }
  
−
#aboutus a {
+
        #aboutus a {
−
    color: #ffffff;
+
            color: #ffffff;
−
}
+
        }
−
/* ==== End classes for icons ==== */
+
        /* ==== End classes for icons ==== */
  
−
/* ==== Begin running chip ==== */
+
        /* ==== Begin running chip ==== */
−
/* == Begin Chip Design == */
+
        /* == Begin Chip Design == */
−
#runningchip {
+
        #runningchip {
−
    position: absolute;
+
            position: absolute;
−
    width: 90px;
+
            width: 90px;
−
    height: 120%;
+
            height: 120%;
−
    left: 2.1%;
+
            left: 2.1%;
−
    -webkit-transition: all 300ms ease-out;
+
            -webkit-transition: all 300ms ease-out;
−
    -moz-transition: all 300ms ease-out;
+
            -moz-transition: all 300ms ease-out;
−
    transition: all 300ms ease-out;
+
            transition: all 300ms ease-out;
−
    z-index: 0;
+
            z-index: 0;
−
  border-bottom-left-radius: 5px;
+
          border-bottom-left-radius: 5px;
−
  border-bottom-right-radius: 5px;
+
          border-bottom-right-radius: 5px;
−
  background: #000000;
+
          background: #000000;
−
}
+
        }
  
−
/* == End Chip Design == */
+
        /* == End Chip Design == */
  
  
−
/* == Begin Chip Movement == */
+
        /* == Begin Chip Movement == */
−
#project:hover ~ #runningchip {
+
        #project:hover ~ #runningchip {
−
    left: 15px;
+
            left: 15px;
−
}
+
        }
  
−
#labwork:hover ~ #runningchip {
+
        #labwork:hover ~ #runningchip {
−
    left: 135px;
+
            left: 135px;
−
}
+
        }
  
−
#parts:hover ~ #runningchip {
+
        #parts:hover ~ #runningchip {
−
    left: 255px;
+
            left: 255px;
−
}
+
        }
  
−
#modelling:hover ~ #runningchip {
+
        #modelling:hover ~ #runningchip {
−
    left: 375px;
+
            left: 375px;
−
}
+
        }
  
−
#achievements:hover ~ #runningchip {
+
        #achievements:hover ~ #runningchip {
−
    left: 495px;
+
            left: 495px;
−
}
+
        }
  
−
#hp:hover ~ #runningchip {
+
        #hp:hover ~ #runningchip {
−
    left: 615px;
+
            left: 615px;
−
}
+
        }
  
−
#aboutus:hover ~ #runningchip {
+
        #aboutus:hover ~ #runningchip {
−
    left: 735px;
+
            left: 735px;
−
}
+
        }
−
/* == End Chip Movment == */
+
        /* == End Chip Movment == */
−
/* ==== End running chip ==== */
+
        /* ==== End running chip ==== */
  
  
−
/* ==== Begin Settings Submenu Level 1 ==== */
+
        /* ==== Begin Settings Submenu Level 1 ==== */
−
#navtextwrapper {                /*define background box*/
+
        #navtextwrapper {                /*define background box*/
−
    margin: 0 auto;
+
            margin: 0 auto;
−
    padding: 0px;
+
            padding: 0px;
−
    top: -2px;
+
            top: -2px;
−
    height: 24px;
+
            height: 24px;
−
    width: 840px;
+
            width: 840px;
−
    position: relative;
+
            position: relative;
−
    /*border: 2px solid #000;*/
+
            /*border: 2px solid #000;*/
−
}
+
        }
  
−
#navtext {
+
        #navtext {
−
    text-align: center;
+
            text-align: center;
−
    font-family: Roboto,sans-serif;
+
            font-family: Roboto,sans-serif;
−
    font-size: 16px;
+
            font-size: 16px;
−
    z-index: 600;
+
            z-index: 600;
−
}
+
        }
  
−
#navtext ul {
+
        #navtext ul {
−
    margin: 0px auto;
+
            margin: 0px auto;
−
    top: -8px;
+
            top: -8px;
−
    padding: 0px;
+
            padding: 0px;
−
    position: absolute;
+
            position: absolute;
−
    z-index: 600;
+
            z-index: 600;
−
}
+
        }
  
−
#navtext li {
+
        #navtext li {
−
    margin: 0px auto;        /*centers text*/
+
            margin: 0px auto;        /*centers text*/
−
    list-style: none;
+
            list-style: none;
−
    display: block;        /*makes items go horizontal and centers them*/
+
            display: block;        /*makes items go horizontal and centers them*/
−
    /*float: left;*/                /*makes items go horizontal*/
+
            /*float: left;*/                /*makes items go horizontal*/
−
    position: relative;
+
            position: relative;
−
    z-index: 600;
+
            z-index: 600;
−
    height: 10px;
+
            height: 10px;
−
}     
+
        }     
  
−
#navtext ul li a {
+
        #navtext ul li a {
−
    margin-top: 2px;
+
            margin-top: 2px;
−
    height: 24px;
+
            height: 24px;
−
    padding-left: 10px;
+
            padding-left: 10px;
−
    padding-right: 10px;
+
            padding-right: 10px;
−
    text-decoration: none;
+
            text-decoration: none;
−
    color: #FFF;
+
            color: #FFF;
−
    display: block;
+
            display: block;
−
    text-align: center;
+
            text-align: center;
−
    border-radius: 8px;
+
            border-radius: 8px;
−
    z-index: 600;
+
            z-index: 600;
−
}
+
        }
  
−
#navtext ul li:hover > a {
+
        #navtext ul li:hover > a {
−
  /* background-color: #6696c7;  /*makes a link stay in a certain color when hovering over it and then looking throught its subitems */
+
          /* 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*/
+
            color: #345292; /* couleur du sous titre quand tu passes dessus*/
−
}
+
        }
  
−
#project-sub {
+
        #project-sub {
−
    display: none;
+
            display: none;
−
    left: -120px;
+
            left: -120px;
−
}
+
        }
  
−
#labwork-sub {
+
        #labwork-sub {
−
    display: none;
+
            display: none;
−
    left: 0px;
+
            left: 0px;
−
}
+
        }
  
−
#parts-sub {
+
        #parts-sub {
−
    /*background-color: #ac34fe;*/
+
            /*background-color: #ac34fe;*/
−
    display: none;
+
            display: none;
−
    left: 120px;
+
            left: 120px;
−
}
+
        }
  
−
#modelling-sub{
+
        #modelling-sub{
−
    display: none;
+
            display: none;
−
    left: 240px;
+
            left: 240px;
−
}
+
        }
  
−
#achievements-sub{
+
        #achievements-sub{
−
    display: none;
+
            display: none;
−
    left: 360px;
+
            left: 360px;
−
}
+
        }
  
−
#hp-sub{
+
        #hp-sub{
−
    display: none;
+
            display: none;
−
    left: 480px;
+
            left: 480px;
−
}
+
        }
−
#aboutus-sub{
+
        #aboutus-sub{
−
    display: none;
+
            display: none;
−
    left: 600px;
+
            left: 600px;
−
}
+
        }
  
−
.chip_gap {
+
        .chip_gap {
−
    content: none;
+
            content: none;
−
}
+
        }
  
−
.navsub1 {
+
        .navsub1 {
−
    background-color: #000000;
+
            background-color: #000000;
−
opacity: 1;
+
        opacity: 1;
−
}   
+
        }   
−
/* ==== End Settings Submenu Level 1 ==== */
+
        /* ==== End Settings Submenu Level 1 ==== */
  
−
#smallnav{
+
        #smallnav{
−
    display: none;
+
            display: none;
−
}
+
        }
  
−
} /* end media query*/
+
        } /* end media query*/
  
−
@media screen and (max-width: 910px){
+
        @media screen and (max-width: 910px){
−
    #header{
+
            #header{
−
        top: -9000px;
+
                top: -9000px;
−
        opacity: 0;
+
                opacity: 0;
−
    }
+
            }
  
−
/* avoid space to content box */
+
        /* avoid space to content box */
−
    .content_background_wrapper{
+
            .content_background_wrapper{
−
        padding-top: 20px;
+
                padding-top: 20px;
−
    }
+
            }
  
−
}
+
        }
  
−
/* Styles for smallnav */
+
        /* Styles for smallnav */
  
−
/* Clearfix */
+
        /* Clearfix */
−
.clearfix:before,
+
        .clearfix:before,
−
.clearfix:after {
+
        .clearfix:after {
−
    content: " ";
+
            content: " ";
−
    display: table;
+
            display: table;
−
}
+
        }
−
.clearfix:after {
+
        .clearfix:after {
−
    clear: both;
+
            clear: both;
−
}
+
        }
−
.clearfix {
+
        .clearfix {
−
    *zoom: 1;
+
            *zoom: 1;
−
}
+
        }
  
  
−
/* Basic Styles */
+
        /* Basic Styles */
  
−
#smallnav {
+
        #smallnav {
−
    height: 40px;
+
            height: 40px;
−
    width: 100%;
+
            width: 100%;
−
    background: #0051A2;
+
            background: #0051A2;
−
    font-size: 11pt;
+
            font-size: 11pt;
−
    font-family: 'PT Sans', Arial, sans-serif;
+
            font-family: 'PT Sans', Arial, sans-serif;
−
    font-weight: bold;
+
            font-weight: bold;
−
    position: fixed;
+
            position: fixed;
−
    border-bottom: 2px solid #CFCFCF;
+
            border-bottom: 2px solid #CFCFCF;
−
    z-index: 3000;
+
            z-index: 3000;
−
    opacity: 0.9;
+
            opacity: 0.9;
−
}
+
        }
−
#smallnav ul {
+
        #smallnav ul {
−
    padding: 0;
+
            padding: 0;
−
    margin: 0 auto;
+
            margin: 0 auto;
−
    width: 720px;
+
            width: 720px;
−
    height: 40px;
+
            height: 40px;
−
}
+
        }
−
#smallnav li {
+
        #smallnav li {
−
    display: inline;
+
            display: inline;
−
    float: left;
+
            float: left;
−
}
+
        }
−
#smallnav a {
+
        #smallnav a {
−
    color: #fff;
+
            color: #fff;
−
    display: inline-block;
+
            display: inline-block;
−
    width: 120px;
+
            width: 120px;
−
    text-align: center;
+
            text-align: center;
−
    text-decoration: none;
+
            text-decoration: none;
−
    line-height: 40px;
+
            line-height: 40px;
−
}
+
        }
−
#smallnav li a {
+
        #smallnav li a {
−
    box-sizing:border-box;
+
            box-sizing:border-box;
−
    -moz-box-sizing:border-box;
+
            -moz-box-sizing:border-box;
−
    -webkit-box-sizing:border-box;
+
            -webkit-box-sizing:border-box;
−
}
+
        }
−
#smallnav li:last-child a {
+
        #smallnav li:last-child a {
−
    border-right: 0;
+
            border-right: 0;
−
}
+
        }
−
#smallnav a:hover, #smallnav a:active {
+
        #smallnav a:hover, #smallnav a:active {
−
    background-color: #1D629F;
+
            background-color: #1D629F;
−
}
+
        }
−
#smallnav a#pull {
+
        #smallnav a#pull {
−
    display: none;
+
            display: none;
−
}
+
        }
  
−
/*Styles for screen 600px and lower*/
+
        /*Styles for screen 600px and lower*/
−
@media screen and (max-width: 720px) {
+
        @media screen and (max-width: 720px) {
−
    #smallnav {  
+
            #smallnav {  
−
        height: auto;
+
                height: auto;
−
        background: #3B7EBF;
+
                background: #3B7EBF;
−
    }
+
            }
−
    #smallnav ul {
+
            #smallnav ul {
−
        width: 100%;
+
                width: 100%;
−
        display: block;
+
                display: block;
−
        height: auto;
+
                height: auto;
−
    }
+
            }
−
    #smallnav li {
+
            #smallnav li {
−
        width: 50%;
+
                width: 50%;
−
        float: left;
+
                float: left;
−
        position: relative;
+
                position: relative;
−
        margin-bottom: 0;
+
                margin-bottom: 0;
−
    }
+
            }
  
−
    #smallnav a {
+
            #smallnav a {
−
        text-align: left;
+
                text-align: left;
−
        width: 100%;
+
                width: 100%;
−
        text-indent: 25px;
+
                text-indent: 25px;
−
    }
+
            }
  
−
    #smallnav {
+
            #smallnav {
−
        border-bottom: 0;
+
                border-bottom: 0;
−
    }
+
            }
−
    #smallnav ul {
+
            #smallnav ul {
−
        display: none;
+
                display: none;
−
        height: auto;
+
                height: auto;
−
    }
+
            }
−
    #smallnav a#pull {
+
            #smallnav a#pull {
−
        display: block;
+
                display: block;
−
        background-color: #0051A2;
+
                background-color: #0051A2;
−
        width: 100%;
+
                width: 100%;
−
        position: relative;
+
                position: relative;
−
    }
+
            }
−
    #smallnav a#pull:after {
+
            #smallnav a#pull:after {
−
        content:"";
+
                content:"";
−
        background: url('https://static.igem.org/mediawiki/2015/e/e0/Freiburg_menu_button_white.png') no-repeat;
+
                background: url('https://static.igem.org/mediawiki/2015/e/e0/Freiburg_menu_button_white.png') no-repeat;
−
        background-size: auto 90%;
+
                background-size: auto 90%;
−
        width: 30px;
+
                width: 30px;
−
        height: 30px;
+
                height: 30px;
−
        display: inline-block;
+
                display: inline-block;
−
        position: absolute;
+
                position: absolute;
−
        right: 15px;
+
                right: 15px;
−
        top: 5px;
+
                top: 5px;
−
    }
+
            }
  
  
−
/* ==== classes for icons ==== */
+
        /* ==== classes for icons ==== */
−
#home_small {
+
        #home_small {
−
    background-color: #3673AF;
+
            background-color: #3673AF;
  
−
}
+
        }
  
−
#home_small a {
+
        #home_small a {
−
    background: url(https://static.igem.org/mediawiki/2015/1/15/Freiburg_icon_home_white_03.png) no-repeat;  
+
            background: url(https://static.igem.org/mediawiki/2015/1/15/Freiburg_icon_home_white_03.png) no-repeat;  
−
    background-position: left;
+
            background-position: left;
−
    background-size: auto 100%;
+
            background-size: auto 100%;
−
    background-repeat: no-repeat;
+
            background-repeat: no-repeat;
−
    padding-left: 40px;
+
            padding-left: 40px;
−
    color: #FFF;
+
            color: #FFF;
−
}
+
        }
  
−
#project_small {
+
        #project_small {
−
    background-color: #3673AF;
+
            background-color: #3673AF;
  
−
}
+
        }
  
−
#project_small a {
+
        #project_small a {
−
    background: url(https://static.igem.org/mediawiki/2015/7/76/Freiburg_icon_project_white_03.png) no-repeat;  
+
            background: url(https://static.igem.org/mediawiki/2015/7/76/Freiburg_icon_project_white_03.png) no-repeat;  
−
    background-position: left;
+
            background-position: left;
−
    background-size: auto 90%;
+
            background-size: auto 90%;
−
    background-repeat: no-repeat;
+
            background-repeat: no-repeat;
−
    padding-left: 40px;
+
            padding-left: 40px;
−
    color: #FFF;
+
            color: #FFF;
−
}
+
        }
  
−
#team_small {
+
        #team_small {
−
    background-color: #3673AF;
+
            background-color: #3673AF;
  
−
}
+
        }
  
−
#team_small a {
+
        #team_small a {
−
    background: url(https://static.igem.org/mediawiki/2015/4/42/Freiburg_icon_team_white_03.png) no-repeat;  
+
            background: url(https://static.igem.org/mediawiki/2015/4/42/Freiburg_icon_team_white_03.png) no-repeat;  
−
    background-position: left;
+
            background-position: left;
−
    background-size: auto 90%;
+
            background-size: auto 90%;
−
    background-repeat: no-repeat;
+
            background-repeat: no-repeat;
−
    padding-left: 40px;
+
            padding-left: 40px;
−
    color: #FFF;
+
            color: #FFF;
−
}
+
        }
  
−
#results_small {
+
        #results_small {
−
    background-color: #3673AF;
+
            background-color: #3673AF;
  
−
}
+
        }
  
−
#results_small a {
+
        #results_small a {
−
    background: url(https://static.igem.org/mediawiki/2015/1/1e/Freiburg_icon_results_white_03.png) no-repeat;  
+
            background: url(https://static.igem.org/mediawiki/2015/1/1e/Freiburg_icon_results_white_03.png) no-repeat;  
−
    background-position: left;
+
            background-position: left;
−
    background-size: auto 90%;
+
            background-size: auto 90%;
−
    background-repeat: no-repeat;
+
            background-repeat: no-repeat;
−
    padding-left: 40px;
+
            padding-left: 40px;
−
    color: #FFF;
+
            color: #FFF;
−
}
+
        }
  
−
#policy_small {
+
        #policy_small {
−
    background-color: #3673AF;
+
            background-color: #3673AF;
−
}
+
        }
  
−
#policy_small a {
+
        #policy_small a {
−
    color: #FFF;
+
            color: #FFF;
−
    padding-left: 40px;
+
            padding-left: 40px;
−
    background-image: url(https://static.igem.org/mediawiki/2015/f/f9/Freiburg_icon_policy_white_03.png);
+
            background-image: url(https://static.igem.org/mediawiki/2015/f/f9/Freiburg_icon_policy_white_03.png);
−
    background-position: left;
+
            background-position: left;
−
    background-size: auto 90%;
+
            background-size: auto 90%;
−
    background-repeat: no-repeat;
+
            background-repeat: no-repeat;
−
}
+
        }
  
−
#notebook_small {
+
        #notebook_small {
−
    background-color: #3673AF;
+
            background-color: #3673AF;
−
}
+
        }
  
−
#notebook_small a {
+
        #notebook_small a {
−
    background: url(https://static.igem.org/mediawiki/2015/9/99/Freibur_icon_notebook_white_03.png) no-repeat;  
+
            background: url(https://static.igem.org/mediawiki/2015/9/99/Freibur_icon_notebook_white_03.png) no-repeat;  
−
    background-position: left;
+
            background-position: left;
−
    background-size: auto 90%;
+
            background-size: auto 90%;
−
    background-repeat: no-repeat;
+
            background-repeat: no-repeat;
−
    padding-left: 40px;
+
            padding-left: 40px;
−
    color: #FFF;
+
            color: #FFF;
−
}
+
        }
−
/* ==== End classes for icons ==== */
+
        /* ==== End classes for icons ==== */
  
  
−
}/* end media query
+
        }/* end media query
  
−
/*Smartphone*/
+
        /*Smartphone*/
−
@media only screen and (max-width : 320px) {
+
        @media only screen and (max-width : 320px) {
−
    #smallnav li {
+
            #smallnav li {
−
        display: block;
+
                display: block;
−
        float: none;
+
                float: none;
−
        width: 100%;
+
                width: 100%;
−
    }
+
            }
−
}
+
        }
  
−
</style>
+
    </style>
  
  
Line 805: Line 879:
  
 
<header id="MenuIgem">
 
<header id="MenuIgem">
−
 
 
</header>
 
</header>
  
Line 932: Line 1,005:
 
             </div>
 
             </div>
 
   
 
   
−
             <div class="block full" style="background-color:yellow;">
+
             <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">
+
                 <div class="vignette" id="vign_0">
 +
                    <div class="vignette_for">
 +
                    </div>
 +
 
 +
                    <div class="vignette_back" id="back_0">
 +
                    </div>
 +
 
 +
                    <div class="vignette_text">
 +
                        <p style="margin:auto; text-align:center;font-weight:bold;" >PDMS Chips Fabrication</p>
 +
                    </div>
 +
                </div>
  
 +
                <div class="vignette" id="vign_1">
 
                     <div class="vignette_for">
 
                     <div class="vignette_for">
 
                     </div>
 
                     </div>
 
          
 
          
−
                     <div class="vignette_back" id="back_0">
+
                     <div class="vignette_back" id="back_1">
 
                     </div>
 
                     </div>
 
          
 
          
 
                     <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 Chip Demolding</p>
 
                     </div>
 
                     </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 class="panel" id="pan_0">
 +
                    <div class="close_button">
 +
                    </div>
 +
                    <br>
 +
                    <h3>Materials</h3>
 +
                    <ul>
 +
                        <li> Sylgard 184 Elastomer Kit  (Sigma-aldrich, Sylgard 184, 761036-5EA)  </li>
 +
                        <li> Vacuum pump unit (Vacuubrand PC 3 RZ 2.5) </li>
 +
                        <li> Stove (Memmert UM 400) </li>
 +
                    </ul>
 +
                    <br>
 +
                    <h3>Protocol</h3>
 +
                    <p>According to <a href="https://static.igem.org/mediawiki/igem.org/2/29/T--Technion_Israel-
 +
                    HardwarespecsPDMS.pdf">manufacturer's instruction</a>. <br>
 +
                    <ul>
 +
                        <li> Mix monomer and curing agent (10:1 proportion) for 30 seconds  </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> Put mixture+mold in stove at 70 degrees Celsius for 3 hours </li>
 +
                    </ul>
 +
                    <br>
 +
                    <div class="protocol_box">
 +
                        <p> Get full protocol here </p>
 +
                    </div>
 +
                    <br>
 +
                </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>                         
+
                <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>
 
         </div>
Line 969: Line 1,156:
 
</body>
 
</body>
  
 +
<script>
 +
         
 +
        var acc = document.getElementsByClassName("vignette_back");
 +
        var i;
 +
 +
        for (i = 0; i < acc.length; i++) {
 +
            acc[i].addEventListener("click", function() {
 +
 +
                /*get clicked element index*/
 +
                var index = String(this.id).substring(5,6);
 +
 +
                /*locate elements to move*/
 +
                var panel = document.getElementById("pan_"+index);
 +
                var vignFor = this.previousElementSibling;
 +
                var vignText = this.nextElementSibling;
 +
                /*move it*/
 +
                if (panel.style.maxHeight){
 +
 +
                    /*close it*/
 +
                    panel.style.maxHeight = null;
 +
                    vignFor.style.opacity = 1;
 +
                    vignText.style.opacity = 0.8;
 +
                    vignText.style.top = "5em";
 +
                }
 +
                else {
 +
                   
 +
                    /*find active element*/
 +
                    var j;
 +
                    var index_act = -1 ;
 +
                    var el_foc;
 +
                    for (j = 0; j < acc.length; j++) {
 +
                        el_foc=document.getElementById("pan_"+j);
 +
                        if (el_foc.style.maxHeight != 0) {
 +
                            index_act=j;
 +
                            break;
 +
                        }
 +
                    }
 +
                    if (index_act != -1) {
 +
                        /*close active element*/
 +
                        var panel_act = document.getElementById("pan_"+index_act);
 +
                        var back_act = document.getElementById("back_"+index_act);
 +
                        var for_act=back_act.previousElementSibling;
 +
                        var text_act=back_act.nextElementSibling;
 +
                        panel_act.style.maxHeight = null;
 +
                        for_act.style.opacity = 1;
 +
                        text_act.style.opacity = 0.8;
 +
                        text_act.style.top = "5em";
 +
                    }
 +
 
 +
 +
                    /*open clicked element*/
 +
                    panel.style.maxHeight = panel.scrollHeight + "px";
 +
                    vignFor.style.opacity = 0;
 +
                    vignText.style.opacity = 1;
 +
                    vignText.style.top = "15em";
 +
                }
 +
            });
 +
        }
 +
 +
        var acc = document.getElementsByClassName("close_button");
 +
 +
        for (i = 0; i < acc.length; i++) {
 +
            acc[i].addEventListener("click", function() {
 +
                var panel = this.parentElement;
 +
                var index = String(panel.id).substring(4,5);
 +
                var vignBack = document.getElementById("back_"+index);
 +
                var vignFor = vignBack.previousElementSibling;
 +
                var vignText = vignBack.nextElementSibling;
 +
                panel.style.maxHeight = null;
 +
                vignFor.style.opacity = 1;
 +
                vignText.style.opacity = 0.8;
 +
                vignText.style.top = "5em";
 +
            });
 +
        }
 +
</script>
  
  

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