Difference between revisions of "Team:Toulouse France/Notebook"

 
(33 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{Template:Toulouse_France/fontsome}}
+
{{Toulouse_France}}
 +
{{Toulouse_France/menu}}
  
 
<html>
 
<html>
  
  
−
 
−
<style>
 
−
 
−
@charset "utf-8
 
−
 
−
/* Framework
 
−
--------------------------------------------------------------------------------------------------------------- */
 
−
/* ------------------------------------------------------------------------------------------------------------ */
 
  
−
*, *::before, *::after{box-sizing:border-box;}
+
<div class="page" style="background-image:url('https://static.igem.org/mediawiki/2016/6/65/Toulouse_France_PhotoblousesNotebook.jpg');">
  
−
.bold{font-weight:bold;}
 
−
.center{text-align:center;}
 
−
.right{text-align:right;}
 
−
.uppercase{text-transform:uppercase;}
 
−
.capitalise{text-transform:capitalize;}
 
−
.hidden{display:none;}
 
−
.nospace{margin:10px; padding:10px; list-style:none;}
 
−
.block{display:block;}
 
−
.inline *{display:inline-block;}
 
−
.inline *:last-child{margin-right:0;}
 
−
.pushright li{margin-right:20px;}
 
−
.pushright li:last-child{margin-right:0;}
 
−
.borderedbox{border:1px solid;}
 
−
.overlay{position:relative; z-index:1;}
 
−
.overlay::after{display:block; position:absolute; top:0; left:0; width:100%; height:100%; content:""; z-index:-1;}
 
−
.bgded{background-position:top center; background-repeat:no-repeat; background-size:cover;}
 
−
.bgded2{background-position:top center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed;}
 
−
.page{background-position:top center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed;}
 
−
.circle{border-radius:50%; background-clip:padding-box;}
 
  
−
.btn{display:inline-block; padding:10px 20px 12px; text-transform:uppercase; border:1px solid;}
+
<!-- ################################################################################################ -->
−
 
+
<!-- ################################################################################################ -->
−
blockquote{display:block; position:relative; width:100%; margin:0; padding:30px; line-height:1.4; z-index:1;}
+
<!-- ################################################################################################ -->
−
blockquote::before{display:block; position:absolute; top:0; left:0; font-family:"FontAwesome"; font-size:60px; line-height:60px; content:""; z-index:-1;}
+
−
 
+
−
.clear, .group{display:block;}
+
−
.clear::before, .clear::after, .group::before, .group::after{display:table; content:"";}
+
−
.clear, .clear::after, .group, .group::after{clear:both;}
+
−
 
+
−
a{outline:none; text-decoration:none;}
+
−
 
+
−
.fl_left, .imgl{float:left;}
+
−
.fl_right, .imgr{float:right;}
+
−
 
+
−
img{width:auto; max-width:100%; height:auto; margin:0; padding:0; border:none; line-height:normal; vertical-align:middle;}
+
−
.imgl{margin:0 15px 10px 0; clear:left;}
+
−
.imgr{margin:0 0 10px 15px; clear:right;}
+
−
 
+
−
 
+
−
/* Fonts
+
−
--------------------------------------------------------------------------------------------------------------- */
+
−
body, input, textarea, select{font-family:Verdana, Geneva, sans-serif;}
+
−
h1, h2, h3, h4, h5, h6, .heading{font-family:Georgia, "Times New Roman", Times, serif;}
+
−
 
+
−
 
+
−
/* Forms
+
−
--------------------------------------------------------------------------------------------------------------- */
+
−
form, fieldset, legend{margin:0; padding:0; border:none;}
+
−
legend{display:none;}
+
−
label, input, textarea, select, button{display:block; resize:none; outline:none; color:inherit; font-size:inherit; font-family:inherit; vertical-align:middle;}
+
−
label{margin-bottom:5px;}
+
−
:required, :invalid{outline:none; box-shadow:none;}
+
−
 
+
−
 
+
−
/* Generalise
+
−
--------------------------------------------------------------------------------------------------------------- */
+
−
h1, h2, h3, h4, h5, h6, .heading{margin:0 0 20px 0; font-size:28px; line-height:normal; font-weight:normal; text-transform:capitalize;}
+
−
 
+
−
address{font-style:normal; font-weight:normal;}
+
−
hr{display:block; width:100%; height:1px; border:solid; border-width:1px 0 0 0;}
+
−
 
+
−
.font-xs{font-size:.8rem;}
+
−
.font-x1{font-size:1.2rem;}
+
−
.font-x2{font-size:1.8rem;}
+
−
.font-x3{font-size:2.8rem;}
+
−
 
+
−
 
+
−
+
−
/*
+
−
The "hoc" class is a generic class used to centre a containing element horizontally
+
−
It should be used in conjunction with a second class or ID
+
−
*/
+
−
.hoc{display:block; margin:0 auto;}
+
−
 
+
−
 
+
−
/* HTML 5 Overrides
+
−
--------------------------------------------------------------------------------------------------------------- */
+
−
address, article, aside, figcaption, figure, footer, header, main, nav, section{display:block; margin:0; padding:0;}
+
−
 
+
−
 
+
−
/* Grid
+
−
--------------------------------------------------------------------------------------------------------------- */
+
−
.one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter{display:inline-block; float:left; margin:0 0 0 3.06748466257669%; list-style:none;}
+
−
 
+
−
.first{margin-left:0; clear:left;}
+
−
 
+
−
.one_quarter{width:22.69938650306748%;}
+
−
.one_third{width:25%;}
+
−
.one_half, .two_quarter{width:48.46625766871166%;}
+
−
.two_third{width:65.6441717791411%;}
+
−
.three_quarter{width:74.23312883435584%;}
+
−
 
+
−
 
+
−
/* Spacing
+
−
--------------------------------------------------------------------------------------------------------------- */
+
−
.btmspace-10{margin-bottom:10px;}
+
−
.btmspace-15{margin-bottom:15px;}
+
−
.btmspace-30{margin-bottom:30px;}
+
−
.btmspace-50{margin-bottom:50px;}
+
−
.btmspace-80{margin-bottom:80px;}
+
−
 
+
−
.inspace-5{padding:5px;}
+
−
.inspace-10{padding:10px;}
+
−
.inspace-15{padding:15px;}
+
−
.inspace-30{padding:30px;}
+
−
.inspace-50{padding:50px;}
+
−
.inspace-80{padding:80px;}
+
−
+
 
 
 +
<div id="pageintro" class="hoc clear" style="padding:300px 0px;">
 +
<p class="sec_title" style="background-color:rgba(1,1,1,0.5);">Notebook</p>
 +
 +
</div>
 
 
−
/* ------------------------------------------------------------------------------------------------------------ */
 
−
/* ------------------------------------------------------------------------------------------------------------ */
 
−
/* ------------------------------------------------------------------------------------------------------------ */
 
−
/* ------------------------------------------------------------------------------------------------------------ */
 
−
/* ------------  CSS  ---------------------------------------------------------------------------------------- */
 
−
 
 
 
−
/* ------------------------------------------------------------------------------------------------------------ */
+
</div>
−
/* ------------------------------------------------------------------------------------------------------------ */
+
<!-- ################################################################################################ -->
  
 
 
−
/* Top Bar
+
<div style="background-color:#fff; padding:90px 0px; height:800px; font-weight: normal;">
−
--------------------------------------------------------------------------------------------------------------- */
+
<div style="width:auto;">
−
#topbar{padding:8px 15px; font-size:.9rem; text-transform:uppercase;}
+
<div id="notebook_2">
−
#topbar *{margin:0;}
+
<div class="clearfix course_nr">
−
#topbar ul li{display:initial; margin-right:10px; padding-right:10px; border-right:1px solid;}
+
<ul class="course_nr2">
−
#topbar ul li:last-child{margin-right:10px; padding-right:10px; border-right:none;}
+
−
#topbar i{margin:0px 5px 0px 0px; line-height:normal;}
+
<li id="shiji_1">
 +
<p class="month"> June</p>
 +
<div class="shiji">
 +
12
 +
</div>
 +
</li>
 +
 +
<li id="shiji_2">
 +
<div class="shiji">
 +
26
 +
</div>
 +
</li>
 +
 +
<li id="shiji_3">
 +
<p class="month"> July</p>
 +
<div class="shiji">
 +
10
 +
</div>
 +
</li>
 
 
−
/* Top Bar Colour */
+
<li id="shiji_4">
−
#topbar{color:#CBCBCB; background-color:#000000;}
+
<div class="shiji">
−
#topbar ul li{border-color:rgba(255,255,255,.2);}
+
24
−
#topbar > div:last-of-type li:first-child a{color:#66CCCC;}
+
</div>
−
 
+
</li>
−
/* ------------------------------------------------------------------------------------------------------------ */
+
−
/* ------------------------------------------------------------------------------------------------------------ */
+
 
 
 +
<li id="shiji_5">
 +
<p class="month"> August</p>
 +
<div class="shiji">
 +
7
 +
</div>
 +
</li>
 
 
−
#navi{position:fixed; z-index:4}
+
<li id="shiji_6">
−
 
+
<div class="shiji">
−
/* Navigation
+
21
−
--------------------------------------------------------------------------------------------------------------- */
+
</div>
−
nav ul, nav ol{margin:0; padding:0; list-style:none;}
+
</li>
−
 
+
−
#mainav, nav{line-height:normal;}
+
−
 
+
−
/* Top Navigation */
+
−
#mainav{}
+
−
#mainav ul.clear{margin-top:0px;}
+
−
#mainav ul{text-transform:uppercase; font-size:16px;}
+
−
#mainav ul ul{z-index:9999; position:absolute; width:230px; text-transform:none;}
+
−
#mainav ul ul ul{left:180px; top:0;}
+
−
#mainav li{display:inline-block; position:relative; margin:0 8px 0 0; padding:0;}
+
−
#mainav li:last-child{margin-right:0;}
+
−
#mainav li li{width:100%; margin:0;}
+
−
#mainav li a{display:block; padding:12px 8px;}
+
−
#mainav li li a{border:solid; border-width:0 0 1px 0;}
+
−
#mainav li li a, #mainav li li .drop{display:block; margin:0; padding:10px 15px;}
+
−
#mainav li li .drop::after{top:15px; left:5px;}
+
−
#mainav ul ul{visibility:hidden; opacity:0;}
+
−
#mainav ul li:hover > ul{visibility:visible; opacity:1;}
+
−
 
+
−
#mainav form{display:none; margin:0; padding:0;}
+
−
#mainav form select, #mainav form select option{display:block; cursor:pointer; outline:none;}
+
−
#mainav form select{width:100%; padding:5px; border:none;}
+
−
#mainav form select option{margin:5px; padding:0; border:none;}
+
−
 
+
−
 
+
−
 
+
−
/* Navigation Colour */
+
−
#mainav{color:#FFFFFF; background-color:rgba(1,1,1,.5);}
+
−
#mainav li a{color:inherit;}
+
−
#mainav .active a, #mainav a:hover, #mainav li:hover > a{color:#66CCCC; background-color:inherit;}
+
−
#mainav li li a, #mainav .active li a{color:#FFFFFF; background-color:rgba(0,0,0,.7); border-color:rgba(0,0,0,.8);}
+
−
#mainav li li:hover > a, #mainav .active .active > a{color:#FFFFFF; background-color:#66CCCC;}
+
−
#mainav form select{color:#FFFFFF; background-color:#000000;}
+
−
 
+
−
 
+
−
 
+
−
/* ------------------------------------------------------------------------------------------------------------ */
+
−
/* ------------------------------------------------------------------------------------------------------------ */
+
−
 
+
−
/* Page Intro
+
−
--------------------------------------------------------------------------------------------------------------- */
+
−
#pageintro{padding:100px 0px 60px 0px;}
+
−
 
+
−
#pageintro article{max-width:100%;}
+
−
#pageintro article *{text-transform:uppercase;}
+
−
#pageintro article .heading{margin:0 0 50px 0; padding:0; line-height:1; font-size:32px;}
+
−
#pageintro article p{margin:0;}
+
−
#pageintro article h2{font-size:28px;}
+
−
#pageintro article p:first-of-type{margin-bottom:35px; font-size:32px; letter-spacing:5px;}
+
−
#pageintro article footer{margin-top:60px;}
+
 
 
−
/* Page Intro Colour
+
<li id="shiji_7">
−
---------------------------------------------------------------------------------------------------------------*/
+
<p class="month"> September</p>
−
#pageintro{color:#FFFFFF;}
+
<div class="shiji">
−
#pageintro article h2{color:#FFFFFF;}
+
4
 +
</div>
 +
</li>
 
 
 +
<li id="shiji_8">
 +
<div class="shiji">
 +
18 
 +
</div>
 +
</li>
 
 
−
/* ------------------------------------------------------------------------------------------------------------ */
+
<li id="shiji_9">
−
/* ------------------------------------------------------------------------------------------------------------ */
+
<p class="month"> October</p>
−
+
<div class="shiji">
−
/* Segments (3 segments) ne marche pas
+
2
−
---------------------------------------------------------------------------------------------------------------*/
+
</div>
−
#main article {border-style:solid; border-width: 10px; position:relative; margin-left:auto; margin-right:auto;}
+
</li>
−
#main article .heading2{margin:0; padding:0; line-height:1; font-size:22px; position:relative;}
+
 +
<li id="shiji_10">
 +
<div class="shiji">
 +
19
 +
</div>
 +
</li>
  
 +
</ul>
 +
</div>
 +
 +
<div id="shiji_1p">
 +
<div style="margin:0px 15px 15px 15px;">
 +
<br><b>Dry lab:</b><br><br> Now that the subject is defined, and that the bibliography is done, let’s prepare our constructions! What we have done:
 +
<ul>
 +
<li>selected and adapted genes</li>
 +
<li>designed primers</li>
 +
<li>ordered gBlocks</li>
 +
<li>ordered the material (enzymes, kit…)necessary for the project</li>
 +
</ul>
 +
</div>
 +
</div>
 +
 +
 +
<div id="shiji_2p">
 +
<div style="margin:0px 15px 15px 15px;">
 +
<br><b>Wet lab:</b><br><br>
 +
Having a good control of the basic experiments, as enzymatic digestion or transformation for example, is important to ensure the lab work during the summer. We have done PCR, digestion, ligation, and transformation for clonings during a week, being supervised by PhD students.
 +
 +
<br><br><b>Dry lab:</b><br><br>
 +
In parallel, we finished ordering gBlocks from IDT, and we refined the gene design.
 +
</div>
 +
</div>
 +
 +
<div id="shiji_3p">
 +
<div style="margin:0px 15px 15px 15px;">
 +
<br><b>Wet lab:</b><br><br>
 +
First of all, we had to digest the backbone pSB1C3, which have to received each of our parts. Thus we obtained high quantity of pSB1C3 plasmids with RFP insert due to cultures, and we purified and digested it with the enzymes EcoRI and PstI. As the gBlocks were received, we did PCR to amplify them and create a stock. Most of the PCR worked, but not all of them. Thus, we start trying to clone the good amplicons in the backbone pSB1C3, but it fail because of a lack of genetic material.
 +
<br>We asked to iGEM Munich 2012 to send us four shuttle backbones, that can be used in <i>E. Coli</i> as well as in <i>B. subtilis</i>. We amplified them and stocked them. In parallel, we have done petri dishes with several antibiotic resistances to have it in advance in stock.
 +
<br>In 2014, the iGEM Toulouse team worked on fungi, and constructed strains able to secrete antifungals. We used these strains in order to: have a positive control when our bacteria will be functional, test the efficiency of the antifungals, and find the best temperature, medium and technique. We also determined what was the more efficient between using the supernatant, the bacteria, or a mix of both. All these tests were performed on a fungi mat.
 +
 +
<br><br><b>Dry lab:</b><br><br>
 +
We decided to create a device to confine our modified bacteria. We designed it using Blender.
 +
</div>
 +
</div>
 +
 +
<div id="shiji_4p">
 +
<div style="margin:0px 15px 15px 15px;">
 +
<br><b>Wet lab:</b><br><br>
 +
The transformation of <i>E. coli</i> with the construction of a NagA inducible promoter in pSB1C3 worked, it was the first big step! However, transformation with our antifungals and toxin genes did not work. As the cloning with pNagA is validated, we started trying to clone this insert in the shuttle plasmid pSB0K-P from 2012 iGEM Munich team, and to transform it in <i>E. coli</i>.
 +
<br>Some gBlocks were still in process to be amplified by PCR. We tried different programs, by modifying the elongation time or the hybridization temperature.
 +
<br>The genes (<i>sdp</i> and <i>skf</i>) for our predation module should be cloned by the Gibson method. The clonings did not work.
 +
 +
<br><br><b>Dry lab:</b><br><br>
 +
As the PCR of gBlocks do not work very well, we designed other primers to improve the compatibility between the template and the primers.
 +
<br>For the modelling, we designed the prey-predator model to have a simulation of the activity of our modified <i>B. subtilis</i>.
 +
</div>
 +
</div>
 +
 +
 +
<div id="shiji_5p">
 +
<div style="margin:0px 15px 15px 15px;">
 +
<br><b>Wet lab:</b><br><br>
 +
We continued trying to clone our insert pNagA in the shuttle plasmid pSB0K-P, using different strategies. Indeed, we tried to digest the DNA fragments with different enzymes. Nevertheless this plasmid is quite big (>9 kbp) and thus it is harder to clone than a smallest plasmid. As a consequence, we thought about a strategy to reduce the size of this plasmid.
 +
<br>The cloning of some gBlocks in pSB1C3 worked! They are an antifungals part and toxin/antitoxin genes. We started to clone it in pSB0K-P and to transform it in <i>E. coli</i>.
 +
<br>We also had problem with the Gibson cloning.
  
−
+
−
+
<br><br><b>Dry lab:</b><br><br>
−
+
Moreover, in order to reduce the size of our replicative plasmid pSB0K-P, we designed primers that were supposed to amplify both the origin of replication and the antibiotic resistance gene for <i>B. subtilis</i> and <i>E. coli</i>.
−
/* Clients
+
</div>
−
---------------------------------------------------------------------------------------------------------------*/
+
</div>
−
.clients{}
+
−
.clients *{margin:0; padding:0;}
+
<div id="shiji_6p">
−
.clients ul li{display:block; float:left; width:12%; padding:0 5px; box-sizing:border-box;}
+
<div style="margin:0px 15px 15px 15px;">
−
.clients ul li *{width:100%; opacity:.6;}
+
<br><b>Wet lab:</b><br><br>
−
.clients ul li *:hover{opacity:1;}
+
The bacteria we are modifying is supposed to improve the predation capacity of <i>B. subtilis</i>. In order to determine if our bacteria is more efficient than the wild type bacteria, we have done predation tests by using the strain WT 168. The bacteria that our <i>B. subtilis</i> is supposed to limit the growth is <i>Pseudomonas fluorescens</i> SBW25.
 +
<br>We have done PCR on the big pSB0K-P plasmid to reduce its size, from 9,3 kbp to 5,7 kbp, hoping the cloning will become easier. We started to clone our gBlocks pNagA, mazF and AfA in this plasmid.
 +
<br>Problems with the cloning in pSB1C3 of our predation genes were still present.  
  
 +
<br><b>Dry lab:</b><br><br>
 +
We designed new primers to optimize the Gibson cloning of our predation genes.
 +
</div>
 +
</div>
 +
 +
 +
<div id="shiji_7p">
 +
<div style="margin:0px 15px 15px 15px;">
 +
<br><b>Wet lab:</b><br><br>
 +
The iGEM Imperial College of London asked us to collaborate with them. We had to determine the optimum growth conditions (pH and temperature) of <i>Bacillus subtilis</i> and <i>Pseudomonas fluorescens</i>. We have done experiments realizing cultures in different conditions during the all day, and we measured the OD every hour. Due to these data we determined the doubling time of each conditions, and we selected the best one.
 +
<br>Now that the small version of the plasmid pSB0K-P is circularized, we transformed it in <i>Bacillus subtilis</i>. The cloning of our three inserts in the pSB0K-Mini worked, and we also succeed in transforming <i>B. subtilis</i> with these constructions.
 +
</div>
 +
</div>
 +
 +
 +
<div id="shiji_8p">
 +
<div style="margin:0px 15px 15px 15px;">
 +
<br><b>Wet lab:</b><br><br>
 +
The problems with the Gibson cloning are still present, but the origin of the disturbance is unknown.
 +
<br>We started to test our promoter pNagA in <i>B. subtilis</i>. It was supposed to be inducible in presence of NagA, and then give off RFP. In parallel, we tried to test the efficiency of our antifungal operon. It was useful to determine if our <i>B. subtilis</i> is able to affect the growth of other bacteria.
 +
</div>
 +
</div>
 +
 +
 +
<div id="shiji_9p">
 +
<div style="margin:0px 15px 15px 15px;">
 +
<br><b>Wet lab:</b><br><br>
 +
The plasmid pSB0K-Mini can be replicated in <i>E. coli</i>, but the antibiotic resistance functional in this bacterium is the ampicillin. One of our objective was to modify it to remplace the ampicillin resistance gene by a chloramphenicol resistance. By amplifying by PCR pSB0K-P to select only the kanamycine gene and the replication origin in <i>B. subtilis</i>, and by ligating it with pSB1C3, we should obtain a plasmid replicative in <i>E. coli</i> and in <i>B. subtilis</i>. In addition, the antibiotic resistance genes would be the one expected: chloramphenicol for <i>E. coli</i>, and kanamycine for <i>B. subtilis</i>.
 +
</div>
 +
</div>
 +
 +
 +
<div id="shiji_10p" style="font-size:22px; text-align:center;">
 +
<div style="margin:15px 15px 15px 15px;">WIKI FREEZE</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
  
  
−
 
+
<center><img src="https://static.igem.org/mediawiki/2016/5/54/Toulouse_France_PhotoNotebook.jpg" style="width:60%;" /></center>
−
/* Header
+
−
--------------------------------------------------------------------------------------------------------------- */
+
−
#header{align-content:center;}
+
−
 
+
−
#header #logo{margin-top:0px;}
+
−
#header #logo *{margin:0px; padding:0px; line-height:1px;}
+
−
#header #logo h1{font-size:16px; font-variant:small-caps;}
+
−
#header #logo p{font-size:14px; text-transform:lowercase;}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
/* Content Area
+
−
--------------------------------------------------------------------------------------------------------------- */
+
−
.container{padding:0px 0;}
+
−
 
+
−
/* Content */
+
−
.container .content{}
+
−
 
+
−
.excerpt{display:inline-block; width:100%; max-width:320px; padding-bottom:10px;}
+
−
.excerpt img{}
+
−
.excerpt .excerpttxt{display:block; position:relative; max-width:90%; margin:-40px auto; padding:20px;}
+
−
.excerpt .heading{margin:0 0 5px 0;}
+
−
.excerpt .heading2{margin:0 0 5px 0;}
+
−
.excerpt p:last-of-type{margin:0; padding:0;}
+
−
 
+
 
 
−
 
−
/* Footer
 
−
--------------------------------------------------------------------------------------------------------------- */
 
−
#footer{padding:0px 0;}
 
−
 
−
#footer .title{margin:0 0 0 0; padding:0; font-size:1.2rem;}
 
−
 
−
#footer .linklist li{display:block; position:relative; margin-bottom:2px; padding:0 0 20px 0; border-bottom:1px solid; text-align:center;}
 
−
#footer .linklist li:last-child{margin:0; padding:0; border:none;}
 
−
#footer .linklist li::before, #footer .linklist li::after{display:table; content:"";}
 
−
#footer .linklist li, #footer .linklist li::after{clear:both;}
 
−
 
−
#footer .contact{}
 
−
#footer .contact.linklist li, #footer .contact.linklist li:last-child{position:relative; padding:0 0 20px 0; text-align:center;}
 
−
#footer .contact li *{margin:0; padding:0; line-height:1.6;}
 
−
#footer .contact li i{display:block; position:absolute; top:0; left:0; width:20px; font-size:14px; text-align:center;}
 
−
 
−
 
−
/* Copyright
 
−
--------------------------------------------------------------------------------------------------------------- */
 
−
#copyright{padding:10px 0;}
 
−
#copyright *{margin:0; padding:0;}
 
−
 
−
#copyright{color:#FFFFFF; background-color:rgba(0,0,0,.5); text-align:center;}
 
−
#copyright a{color:inherit;}
 
−
#copyright p{float:middle;}
 
−
 
−
 
−
 
−
/* Transition Fade
 
−
--------------------------------------------------------------------------------------------------------------- */
 
−
*, *::before, *::after{transition:all .3s ease-in-out;}
 
−
#mainav form *{transition:none;!important}
 
−
 
 
 
 
 
−
/* ------------------------------------------------------------------------------------------------------------ */
+
<script>
−
/* ------------------------------------------------------------------------------------------------------------ */
+
−
/* ------------------------------------------------------------------------------------------------------------ */
+
−
/* ------------------------------------------------------------------------------------------------------------ */
+
−
/* ------------------------------------------------------------------------------------------------------------ */
+
−
/* ------------------------------------------------------------------------------------------------------------ */
+
−
/* ------------------------------------------------------------------------------------------------------------ */
+
−
/* ------------------------------------------------------------------------------------------------------------ */
+
−
/* ------------------------------------------------------------------------------------------------------------ */
+
−
/* ------------------------------------------------------------------------------------------------------------ */
+
  
−
 
+
// JavaScript Document
−
/* Colours
+
$(function(){
−
--------------------------------------------------------------------------------------------------------------- */
+
−
body{color:#CBCBCB; background-color: #000000;}
+
−
a{color:#000000;}
+
−
a:active, a:focus{background:transparent;}/* IE10 + 11 Bugfix - prevents grey background */
+
−
hr, .borderedbox{border-color:#D7D7D7;}
+
−
label span{color:#FF0000; background-color:inherit;}
+
−
input:focus, textarea:focus, *:required:focus{border-color:#66CCCC;}
+
−
.overlay{color:#FFFFFF; background-color:inherit;}
+
−
.overlay::after{color:inherit; background-color:rgba(0,0,0,.4);}
+
−
 
+
−
.inherit{color:inherit;}
+
−
 
+
−
.btn, .btn.inverse:hover{color:#FFFFFF; background-color:#66CCCC; border-color:#66CCCC;}
+
−
.btn:hover, .btn.inverse{color:inherit; background-color:transparent; border-color:inherit;}
+
−
 
+
−
blockquote::before{color:rgba(255,255,255,.5);}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
/* Sonsor */
+
−
.sponsor{margin:20px 0px 10px 0px;}
+
−
.sponsor, .sponsor a{color:#FFFFFF; background-color:#FFFFFF;}
+
−
 
+
−
 
+
−
/* Header */
+
−
#header #logo h1 a{color:inherit;}
+
−
 
+
−
 
+
−
/* Content Area */
+
−
.excerpt .excerpttxt{color:inherit; background-color:#FFFFFF;}
+
−
 
+
−
 
+
−
/* Footer */
+
−
#footer .title{color:#FFFFFF;}
+
−
#footer .linklist li{border-color:rgba(255,255,255,.4);}  /* couleur des barres séparatrices */
+
−
#footer .footertxt{background-color:rgba(255,255,255,.3);}
+
−
 
+
−
+
−
 
+
−
/* back to top */
+
−
+
−
.anchor {
+
−
height: 30px;
+
−
position: fixed;
+
−
bottom: 20px;
+
−
right: 30px;
+
−
z-index: 1000;
+
−
cursor: pointer;
+
−
-webkit-transition: all ease 0.4s;
+
−
-moz-transition: all ease 0.4s;
+
−
-ms-transition: all ease 0.4s;
+
−
-o-transition: all ease 0.4s;
+
−
transition: all ease 0.4s;
+
−
}
+
−
 
+
−
 
+
−
+
−
/* Social Icons
+
−
---------------------------------------------------------------------------------------------------------------*/
+
−
.faico{margin:0px; padding:0; list-style:none;}
+
−
.faico li{display:inline-block; margin:0 2px 0 0; padding:0; line-height:10px;}
+
−
.faico li:last-child{margin-right:0;}
+
−
.faico a{display:inline-block; width:auto; height:auto; line-height:20px; border-radius:5px; font-size:16px; text-align:center;}
+
−
.faico img{width: 2%;}
+
−
+
−
.faico a{color:inherit; }
+
−
.faico a:hover{color:#FFFFFF;}
+
−
+
−
.faico2{margin:0px; padding:0; list-style:none;}
+
−
.faico2 li{display:inline-block; margin:0 2px 0 0; padding:0; line-height:10px;}
+
−
.faico2 li:last-child{margin-right:0;}
+
−
.faico2 a{display:inline-block; width:auto; height:auto; line-height:20px; border-radius:5px; font-size:16px; text-align:center;}
+
−
.faico2 img{width: 20%; margin:15px;}
+
−
+
−
.faico2 a{color:inherit; }
+
−
.faico2 a:hover{color:#FFFFFF;}
+
−
+
−
+
−
+
−
+
−
+
−
+
−
/* ------------------------------------------------------------------------------------------------------------ */
+
−
/* ------------------------------------------------------------------------------------------------------------ */
+
−
/* ------------------------------------------------------------------------------------------------------------ */
+
−
/* ------------------------------------------------------------------------------------------------------------ */
+
−
/* ------------------------------------------------------------------------------------------------------------ */
+
−
+
−
+
−
/* index bordereau */
+
−
+
−
/* ------------------------------------ gallerie ----*/
+
−
 
+
−
.gallerie-project{
+
−
margin: 5% 15%;
+
−
padding: 0px;
+
−
margin-top:40px;
+
−
margin-bottom:40px;
+
−
}
+
−
 
+
−
.line-gallerie-project{
+
−
background-color:#f0f0f0;
+
−
height:310px;
+
−
width:100%;
+
−
padding: 2px 0px;
+
−
}
+
−
 
+
−
.part-little-projet{
+
−
background-color:#a59999;
+
−
display: block;
+
−
position: relative;
+
−
height:310px;
+
−
width: 30%;
+
−
float:left;
+
−
}
+
−
 
+
−
.part-little-projet:hover{
+
−
background-color:#400000;
+
−
}
+
−
 
+
−
.title-part-projet{
+
−
position: absolute;
+
−
top:40px;
+
−
left:33px;
+
−
font-size:24px;
+
−
color:white;
+
−
}
+
−
 
+
−
.part-large-projet{
+
−
display: block;
+
−
position: relative;
+
−
height:310px;
+
−
width: 70%;
+
−
float:left;
+
−
opacity:0.9;
+
−
}
+
−
 
+
−
.part-large-projet:hover{
+
−
opacity:1;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
/* Human Practice */
+
−
+
−
 
+
−
 
+
−
/* Subpanels */
+
−
+
−
 
+
−
/* Panels */
+
−
.panel {
+
−
    width:1100px;
+
−
    height:528px;
+
−
    margin:0;
+
−
    margin-bottom:0px;
+
−
    color: rgb(30,39,43);
+
−
    font-family: 'Yanone Kaffeesatz', sans-serif;
+
−
}
+
−
.panel a {
+
−
    color: rgb(46,43,52);
+
−
    text-decoration:none;
+
−
}
+
−
/* Subpanels */
+
−
.narrowimg {/* Subpanels background*/
+
−
    /*position:absolute;*/
+
−
    z-index:2;
+
−
    opacity:0.3;
+
−
    filter: alpha(opacity=30);
+
−
}
+
−
.titlebox {/* Subpanels Title*/
+
−
    z-index:1;
+
−
    position:relative;
+
−
    bottom:480px;
+
−
    background:transparent;
+
−
}
+
−
/* Project Panels*/
+
−
.subpanel1 { /* Overview */
+
−
    float:left;
+
−
    width:535px;
+
−
    height:428px;
+
−
    margin-top:0;
+
−
    margin-right:20px;
+
−
    margin-bottom:12px;
+
−
    border-radius:7px;
+
−
    background:rgb(252,250,229);
+
−
}
+
−
.spdesc { /* Overview content */
+
−
    display:none;
+
−
    height:100px;
+
−
    color:rgb(30,39,43);
+
−
}
+
−
.cont { /* Overview content */
+
−
    width:90%;
+
−
    height:auto;
+
−
    margin-left:5%;
+
−
    margin-top:5%;
+
−
    background:transparent;
+
−
}
+
−
.cont p {
+
−
    line-height:28px;
+
−
    width:auto;
+
−
    height:auto;
+
−
    margin:5% 2%;
+
−
}
+
−
.subpanel2 { /* Projects */
+
−
    float:left;
+
−
    width:125px;
+
−
    height:492px;
+
−
    font-size:22px;
+
−
    text-align:center;
+
−
    margin-top:0;
+
−
    margin-right:11px;
+
−
    border-radius:7px;
+
−
    overflow:hidden;
+
−
}
+
−
.subpanel2:hover{
+
−
    font-weight:bold;
+
−
}
+
−
.subpanel2:hover .narrowimg {
+
−
    opacity:0.8;
+
−
    filter: alpha(opacity=80);
+
−
}
+
−
.subpanel3 { /* Results */
+
−
    float:left;
+
−
    width:535px;
+
−
    height:50px;
+
−
    font-size:30px;
+
−
    text-align:left;
+
−
    line-height:50px;
+
−
    background:rgb(30,39,43);
+
−
    color:white;
+
−
    border-radius:7px;
+
−
    position:relative;
+
−
    bottom:50px;
+
−
    font-family: 'Great Vibes', cursive;
+
−
    font-size: 35px;
+
−
}
+
−
+
−
+
−
+
−
+
−
/* results */
+
−
+
−
#timeline .timeline-item:after,#timeline .timeline-item:before {
+
−
content: '';
+
−
display: block;
+
−
width: 100%;
+
−
clear: both;
+
−
}
+
−
.containerA {
+
−
max-width: 1100px;
+
−
margin: 0 auto;
+
−
}
+
−
.containerA h1{
+
−
width:18%;
+
−
margin:15px auto 10px;
+
−
padding: 15px 0 15px 0;
+
−
text-align: center;
+
−
font-size: 50px;
+
−
color:#fff;
+
−
}
+
−
 
+
−
#timeline {
+
−
width: 90%;
+
−
margin: 30px auto;
+
−
position: relative;
+
−
-webkit-transition: all 0.4s ease;
+
−
-moz-transition: all 0.4s ease;
+
−
-ms-transition: all 0.4s ease;
+
−
transition: all 0.4s ease;
+
−
}
+
−
#timeline:before {
+
−
content: "";
+
−
width: 3px;
+
−
height: 100%;
+
−
background: #ffffff;
+
−
left: 50%;
+
−
top: 0;
+
−
position: absolute;
+
−
}
+
−
#timeline:after {
+
−
content: "";
+
−
clear: both;
+
−
display: table;
+
−
width: 100%}
+
−
#timeline .timeline-item {
+
−
margin-bottom: 50px;
+
−
position: relative;
+
−
}
+
−
#timeline .timeline-item .timeline-icon {
+
−
background:rgba(20,10,11,0.75);
+
−
width: 50px;
+
−
height: 50px;
+
−
position: absolute;
+
−
top: 0;
+
−
left: 50%;
+
−
overflow: hidden;
+
−
margin-left: -23px;
+
−
-webkit-border-radius: 50%;
+
−
-moz-border-radius: 50%;
+
−
-ms-border-radius: 50%;
+
−
border-radius: 50%}
+
−
 
+
−
#timeline .timeline-item .timeline-content {
+
−
width: 35%;
+
−
background: #fff;
+
−
padding: 20px;
+
−
-webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
+
−
-moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
+
−
-ms-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
+
−
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
+
−
-webkit-border-radius: 5px;
+
−
-moz-border-radius: 5px;
+
−
-ms-border-radius: 5px;
+
−
border-radius: 5px;
+
−
-webkit-transition: all 0.3s ease;
+
−
-moz-transition: all 0.3s ease;
+
−
-ms-transition: all 0.3s ease;
+
−
transition: all 0.3s ease;
+
−
}
+
−
#timeline .timeline-item .timeline-content h2 {
+
−
padding: 15px;
+
−
background:rgba(20,10,11,1);
+
−
color: #fff;
+
−
margin: -20px -20px 0 -20px;
+
−
font-weight: 600;
+
−
-webkit-border-radius: 3px 3px 0 0;
+
−
-moz-border-radius: 3px 3px 0 0;
+
−
-ms-border-radius: 3px 3px 0 0;
+
−
border-radius: 3px 3px 0 0;
+
−
}
+
−
#timeline .timeline-item .timeline-content p {
+
−
font-size:18px;
+
−
font-family:"Lucida Bright", "DejaVu Serif", Georgia, serif;
+
−
line-height:1.2em;
+
−
padding:8px 0px;
+
−
}
+
−
 
+
−
#timeline .timeline-item .timeline-content:before {
+
−
content: '';
+
−
position: absolute;
+
−
left: 45%;
+
−
top: 20px;
+
−
width: 0;
+
−
height: 0;
+
−
border-top: 7px solid transparent;
+
−
border-bottom: 7px solid transparent;
+
−
border-left: 7px solid rgba(153,80,84,1.00);
+
−
}
+
−
#timeline .timeline-item .timeline-content.right {
+
−
float: right;
+
−
}
+
−
#timeline .timeline-item .timeline-content.right:before {
+
−
content: '';
+
−
right: 45%;
+
−
left: inherit;
+
−
border-left: 0;
+
−
border-right: 7px solid rgba(153,80,84,1.00);
+
−
}
+
−
+
−
@media screen and (max-width: 768px) {
+
−
#timeline {
+
−
margin: 30px;
+
−
padding: 0;
+
−
} 
+
−
#timeline:before {
+
−
left: 0;
+
−
}
+
−
#timeline .timeline-item .timeline-content {
+
−
width: 90%;
+
−
float: right;
+
−
}
+
−
#timeline .timeline-item .timeline-content:before, #timeline .timeline-item .timeline-content.right:before {
+
−
left: 10%;
+
−
margin-left: -6px;
+
−
border-left: 0;
+
−
border-right: 7px solid #ee4d4d;
+
−
}
+
−
#timeline .timeline-item .timeline-icon {
+
−
left: 0;
+
−
}
+
−
}
+
−
.timeline-content p{
+
−
color:rgba(114,111,119,1.00);
+
−
}
+
−
+
−
+
−
.la-ball-atom,
+
−
.la-ball-atom > div {
+
−
position: relative;
+
−
-webkit-box-sizing: border-box;
+
−
  -moz-box-sizing: border-box;
+
−
box-sizing: border-box;
+
−
}
+
−
.la-ball-atom {
+
−
display: block;
+
−
font-size: 0;
+
−
color: #fff;
+
−
}
+
−
.la-ball-atom > div {
+
−
display: inline-block;
+
−
float: none;
+
−
background-color: currentColor;
+
−
border: 0 solid currentColor;
+
−
}
+
−
.la-ball-atom {
+
−
position: absolute;
+
−
top:9px;
+
−
left:9px;
+
−
width: 32px;
+
−
height: 32px;
+
−
}
+
−
.la-ball-atom > div:nth-child(1) {
+
−
position: absolute;
+
−
top: 50%;
+
−
left: 50%;
+
−
z-index: 1;
+
−
width: 60%;
+
−
height: 60%;
+
−
background: #aaa;
+
−
border-radius: 100%;
+
−
-webkit-transform: translate(-50%, -50%);
+
−
  -moz-transform: translate(-50%, -50%);
+
−
-ms-transform: translate(-50%, -50%);
+
−
-o-transform: translate(-50%, -50%);
+
−
transform: translate(-50%, -50%);
+
−
-webkit-animation: ball-atom-shrink 4.5s infinite linear;
+
−
  -moz-animation: ball-atom-shrink 4.5s infinite linear;
+
−
-o-animation: ball-atom-shrink 4.5s infinite linear;
+
−
animation: ball-atom-shrink 4.5s infinite linear;
+
−
}
+
−
.la-ball-atom > div:not(:nth-child(1)) {
+
−
position: absolute;
+
−
left: 0;
+
−
z-index: 0;
+
−
width: 100%;
+
−
height: 100%;
+
−
background: none;
+
−
-webkit-animation: ball-atom-zindex 1.5s 0s infinite steps(2, end);
+
−
  -moz-animation: ball-atom-zindex 1.5s 0s infinite steps(2, end);
+
−
-o-animation: ball-atom-zindex 1.5s 0s infinite steps(2, end);
+
−
animation: ball-atom-zindex 1.5s 0s infinite steps(2, end);
+
−
}
+
−
.la-ball-atom > div:not(:nth-child(1)):before {
+
−
position: absolute;
+
−
top: 0;
+
−
left: 0;
+
−
width: 10px;
+
−
height: 10px;
+
−
margin-top: -5px;
+
−
margin-left: -5px;
+
−
content: "";
+
−
background: currentColor;
+
−
border-radius: 50%;
+
−
opacity: .75;
+
−
-webkit-animation: ball-atom-position 1.5s 0s infinite ease, ball-atom-size 1.5s 0s infinite ease;
+
−
  -moz-animation: ball-atom-position 1.5s 0s infinite ease, ball-atom-size 1.5s 0s infinite ease;
+
−
-o-animation: ball-atom-position 1.5s 0s infinite ease, ball-atom-size 1.5s 0s infinite ease;
+
−
animation: ball-atom-position 1.5s 0s infinite ease, ball-atom-size 1.5s 0s infinite ease;
+
−
}
+
−
.la-ball-atom > div:nth-child(2) {
+
−
-webkit-animation-delay: .75s;
+
−
  -moz-animation-delay: .75s;
+
−
-o-animation-delay: .75s;
+
−
animation-delay: .75s;
+
−
}
+
−
.la-ball-atom > div:nth-child(2):before {
+
−
-webkit-animation-delay: 0s, -1.125s;
+
−
  -moz-animation-delay: 0s, -1.125s;
+
−
-o-animation-delay: 0s, -1.125s;
+
−
animation-delay: 0s, -1.125s;
+
−
}
+
−
.la-ball-atom > div:nth-child(3) {
+
−
-webkit-transform: rotate(120deg);
+
−
  -moz-transform: rotate(120deg);
+
−
-ms-transform: rotate(120deg);
+
−
-o-transform: rotate(120deg);
+
−
transform: rotate(120deg);
+
−
-webkit-animation-delay: -.25s;
+
−
  -moz-animation-delay: -.25s;
+
−
-o-animation-delay: -.25s;
+
−
animation-delay: -.25s;
+
−
}
+
−
.la-ball-atom > div:nth-child(3):before {
+
−
-webkit-animation-delay: -1s, -.75s;
+
−
  -moz-animation-delay: -1s, -.75s;
+
−
-o-animation-delay: -1s, -.75s;
+
−
animation-delay: -1s, -.75s;
+
−
}
+
−
.la-ball-atom > div:nth-child(4) {
+
−
-webkit-transform: rotate(240deg);
+
−
  -moz-transform: rotate(240deg);
+
−
-ms-transform: rotate(240deg);
+
−
-o-transform: rotate(240deg);
+
−
transform: rotate(240deg);
+
−
-webkit-animation-delay: .25s;
+
−
  -moz-animation-delay: .25s;
+
−
-o-animation-delay: .25s;
+
−
animation-delay: .25s;
+
−
}
+
−
.la-ball-atom > div:nth-child(4):before {
+
−
-webkit-animation-delay: -.5s, -.125s;
+
−
  -moz-animation-delay: -.5s, -.125s;
+
−
-o-animation-delay: -.5s, -.125s;
+
−
animation-delay: -.5s, -.125s;
+
−
}
+
−
 
+
−
/*
+
−
* Animations
+
−
*/
+
−
@-webkit-keyframes ball-atom-position {
+
−
50% {
+
−
top: 100%;
+
−
left: 100%;
+
−
}
+
−
}
+
−
@-moz-keyframes ball-atom-position {
+
−
50% {
+
−
top: 100%;
+
−
left: 100%;
+
−
}
+
−
}
+
−
@-o-keyframes ball-atom-position {
+
−
50% {
+
−
top: 100%;
+
−
left: 100%;
+
−
}
+
−
}
+
−
@keyframes ball-atom-position {
+
−
50% {
+
−
top: 100%;
+
−
left: 100%;
+
−
}
+
−
}
+
−
@-webkit-keyframes ball-atom-size {
+
−
50% {
+
−
-webkit-transform: scale(.5, .5);
+
−
transform: scale(.5, .5);
+
−
}
+
−
}
+
−
@-moz-keyframes ball-atom-size {
+
−
50% {
+
−
-moz-transform: scale(.5, .5);
+
−
transform: scale(.5, .5);
+
−
}
+
−
}
+
−
@-o-keyframes ball-atom-size {
+
−
50% {
+
−
-o-transform: scale(.5, .5);
+
−
  transform: scale(.5, .5);
+
−
}
+
−
}
+
−
@keyframes ball-atom-size {
+
−
50% {
+
−
-webkit-transform: scale(.5, .5);
+
−
  -moz-transform: scale(.5, .5);
+
−
-o-transform: scale(.5, .5);
+
−
transform: scale(.5, .5);
+
−
}
+
−
}
+
−
@-webkit-keyframes ball-atom-zindex {
+
−
50% {
+
−
z-index: 10;
+
−
}
+
−
}
+
−
@-moz-keyframes ball-atom-zindex {
+
−
50% {
+
−
z-index: 10;
+
−
}
+
−
}
+
−
@-o-keyframes ball-atom-zindex {
+
−
50% {
+
−
z-index: 10;
+
−
}
+
−
}
+
−
@keyframes ball-atom-zindex {
+
−
50% {
+
−
z-index: 10;
+
−
}
+
−
}
+
−
@-webkit-keyframes ball-atom-shrink {
+
−
50% {
+
−
-webkit-transform: translate(-50%, -50%) scale(.8, .8);
+
−
transform: translate(-50%, -50%) scale(.8, .8);
+
−
}
+
−
}
+
−
@-moz-keyframes ball-atom-shrink {
+
−
50% {
+
−
-moz-transform: translate(-50%, -50%) scale(.8, .8);
+
−
transform: translate(-50%, -50%) scale(.8, .8);
+
−
}
+
−
}
+
−
@-o-keyframes ball-atom-shrink {
+
−
50% {
+
−
-o-transform: translate(-50%, -50%) scale(.8, .8);
+
−
  transform: translate(-50%, -50%) scale(.8, .8);
+
−
}
+
−
}
+
−
@keyframes ball-atom-shrink {
+
−
50% {
+
−
-webkit-transform: translate(-50%, -50%) scale(.8, .8);
+
−
  -moz-transform: translate(-50%, -50%) scale(.8, .8);
+
−
-o-transform: translate(-50%, -50%) scale(.8, .8);
+
−
transform: translate(-50%, -50%) scale(.8, .8);
+
−
}
+
−
}
+
−
 
+
−
+
−
/* safety */
+
−
+
−
 
+
−
.title1{color:#870721; font-family:'Open Sans'; font-weight:600; font-size:24px;  margin:0 0 33px 0; border:none;}
+
−
 
+
−
.title2{color:#5a6060; font-family:'Open Sans'; font-weight:600; font-size:18px; margin:0 0 30px 0; border:none;}
+
−
 
+
−
.title3{color:#7f8c8c; font-family:'Open Sans'; font-weight:400; font-size:16px; margin:0 0 20px 0; border:none;}
+
−
 
+
−
.title4{color:#5a6060; font-family:'Open Sans'; font-weight:700; font-size:15px; margin:0 0 20px 0; border:none;}
+
−
 
+
−
.texte{color:#5a6060; font-family:'Open Sans'; font-size:14px; margin:0 0 50px 0; line-height:24px; text-align:justify;}
+
−
 
+
−
.citation{color:#5a6060; font-family:'Open Sans'; font-size:18px; margin:0 0 50px 0; line-height:24px; font-style: italic; text-align: center;}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
.Title{
+
−
text-shadow: 1px 3px 3px rgba(70, 156, 133, 0.75);
+
−
color: #2CC23E;
+
−
font-size: 50px;
+
−
text-align: center;
+
−
}
+
−
 
+
−
.Sub_title{
+
−
color: #2CC23E;
+
−
font-size: 30px;
+
−
}
+
−
 
+
−
.Article {
+
−
text-align: justify;
+
−
text-indent:15px;
+
−
}
+
−
 
+
−
a.Link {
+
−
font-size:10pt;
+
−
color :#A4A4A4;
+
−
text-decoration:none;
+
−
}
+
−
 
+
−
a.Link:hover{
+
−
text-decoration:underline;
+
−
}
+
 
 
−
/*Overview*/
+
$('.course_nr2 li').hover(function(){
−
.CropImg{
+
$(this).find('.shiji').slideDown(400);
−
position : absolute;
+
},function(){
−
width: 700px;
+
$(this).find('.shiji').slideUp(400);
−
left :50%;
+
});
−
margin-left:-350px;
+
−
height: auto;       
+
−
overflow: hidden;
+
−
display :block;
+
−
 
+
−
}
+
−
 
+
−
table {
+
−
display: table;
+
−
border-collapse: separate;
+
−
border-spacing: 2px;
+
−
border-color: gray;
+
−
}
+
−
 
+
−
table[Attributes Style] {
+
−
border-top-width: 1px;
+
−
border-right-width: 1px;
+
−
border-bottom-width: 1px;
+
−
border-left-width: 1px;
+
−
width: 100%;
+
−
height: 20%;
+
−
}
+
−
 
+
−
#column-left{
+
−
float:left;
+
−
width: 190px;
+
−
float: left;
+
−
padding: 15px 10px 15px 15px;
+
−
border: 1px solid #ccc;
+
−
border-radius: 5px;
+
−
background-color: #eee;
+
−
}
+
−
 
+
−
.fixNavigation{  
+
−
z-index: 9999;
+
−
position: fixed;
+
−
top:15px;
+
−
width:240px;
+
−
}
+
−
 
+
−
ul.menuleft {
+
−
padding-left:10px;
+
−
}
+
−
 
+
−
 
+
−
ul.menuleft li {
+
−
padding-bottom: 10px;
+
−
}
+
−
 
+
−
ul.menuleft li a{
+
−
color:#5a6060;
+
−
font-family:'Open Sans';
+
−
font-size:14px;
+
−
margin:0 0 0 0;
+
−
line-height:24px;
+
−
}
+
−
 
+
−
/* presse */
+
−
 
+
−
 
+
−
.carousel-inner > .item > img,
+
−
.carousel-inner > .item > a > img {
+
−
      width: 100%;
+
−
      height: 100%;
+
−
  }
+
−
 
+
−
 
+
−
 
+
−
.carousel {
+
−
width:100%;
+
−
margin:0 auto;
+
−
}
+
−
 
+
−
 
+
 
 
−
/* HUMAN Practice*/
+
$("#shiji_1").mouseenter(function(){
−
 
+
$("#shiji_1p").slideDown(300);
−
 
+
});
−
 
+
$("#shiji_1").mouseleave(function(){
−
.containerHP{
+
$("#shiji_1p").fadeOut(200);
−
  max-width: 1000px;
+
});
−
}
+
−
 
+
−
p {
+
−
  text-align: justify;
+
−
}
+
−
 
+
−
.jumbotron p {
+
−
  max-width:955px;
+
−
  margin: 0 auto;
+
−
  text-align: center;
+
−
}
+
−
 
+
−
div#white .jumbotron {
+
−
background-color:white;
+
−
}
+
−
 
+
−
div#grey {
+
−
background-color: #eee;
+
−
width:100%;
+
−
padding-bottom:20px;
+
−
}
+
−
div#white {
+
−
background-color:white;
+
−
width:100%;
+
−
padding-bottom:20px;
+
−
}
+
−
 
+
−
*:after, *:before, * {
+
−
  -webkit-box-sizing: border-box;
+
−
  -moz-box-sizing: border-box;
+
−
  box-sizing: border-box;
+
−
}
+
−
 
+
−
 
+
−
.panel-default .panel-heading a{
+
−
text-decoration: none;
+
−
display:block;
+
−
padding:10px;
+
−
}
+
−
.panel-heading.panel-title{
+
−
text-decoration: none;
+
−
padding-top:0px;
+
−
padding-bottom:0px;
+
−
padding-left:0px;
+
−
padding-right:0px;
+
−
}
+
−
a[aria-expanded="true"] {
+
−
background-color:rgba(70, 73, 76, 0.95);
+
−
text-decoration: none;
+
−
color:white;
+
−
}
+
−
 
+
−
.panel-default .panel-heading a[aria-expanded="false"]{
+
−
-o-transition: background-color 1s linear;
+
−
-moz-transition: background-color 1s linear;
+
−
-khtml-transition: background-color 1s linear;
+
−
-webkit-transition: background-color 1s linear;
+
−
-ms-transition: background-color 1s linear;
+
−
transition: background-color 1s linear;
+
−
}
+
−
.panel-default .panel-heading a[aria-expanded="false"]:hover{
+
−
background-color:rgba(70, 73, 76, 0.95);
+
−
text-decoration: none;
+
−
color:white;
+
−
}
+
−
.panel-default .panel-heading a[aria-expanded="true"]{
+
−
-o-transition: opacity 1s linear;
+
−
-moz-transition: opacity 1s linear;
+
−
-khtml-transition: opacity 1s linear;
+
−
-webkit-transition: opacity 1s linear;
+
−
-ms-transition: opacity 1s linear;
+
−
transition: opacity 1s linear;
+
−
}
+
−
.panel-default .panel-heading a[aria-expanded="true"]:hover{
+
−
opacity:0.7;
+
−
}
+
−
 
+
−
 
+
−
.jumbotron#cover {
+
−
  height: 550px;
+
−
  color: white;
+
−
color:rgba(255, 255, 255, 0.8);
+
−
  text-shadow: #44 0 0.7px 0.7px;
+
−
  background: transparent;
+
−
}
+
−
.jumbotron#cover h1{
+
−
border-bottom:0px;
+
−
}
+
−
.containerHP p.lead{font-size:19px;}
+
−
.jumbotron .containerHP p.lead{font-size:21px;}
+
−
 
+
−
 
+
 
 
−
+
$("#shiji_2").mouseenter(function(){
−
/* notebook */
+
$("#shiji_2p").slideDown(300);
−
+
});
−
+
$("#shiji_2").mouseleave(function(){
−
.sec_title{
+
$("#shiji_2p").fadeOut(200);
−
width:100%;
+
});
−
height:100px;
+
−
line-height:100px;
+
−
text-align:center;
+
−
background-color:#3A3A3A;
+
−
color:#efefef;
+
−
font-size:42px;
+
−
}
+
−
+
−
.sec_title_trans{
+
−
width:100%;
+
−
height:100px;
+
−
line-height:100px;
+
−
text-align:center;
+
−
background-color:rgba(1,1,1,0.5);
+
−
color:#efefef;
+
−
font-size:42px;
+
−
}
+
−
 
+
−
 
+
−
#notebook_2{
+
−
position:relative;
+
−
width:1100px;
+
−
height:230px;
+
−
margin:0 auto;
+
−
}
+
−
 
+
−
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
+
−
*html .clearfix {zoom:1;}
+
−
*+html .clearfix {zoom:1;}
+
−
 
+
−
.course_nr{height:162px; background:url(https://static.igem.org/mediawiki/2016/c/c7/Toulouse_France_notebookPoint.gif) repeat-x center;}
+
−
.course_nr li{ float:left; background:url(https://static.igem.org/mediawiki/2016/e/ee/Toulouse_France_rondNotebook.png) no-repeat center top; padding-top:30px; width:84px; text-align:center; position:relative; margin-top:69px;}
+
−
.shiji{ position:absolute; width:100%; left:0px; top:-14px; display:none;}
+
−
.shiji{ height:auto; line-height:10px; color:#000000;; font-weight:bold; background:url(https://static.igem.org/mediawiki/2016/4/4f/Toulouse_France_rondNotebook2.png) no-repeat center top; margin-bottom:8px;}
+
−
 
+
−
.month{
+
−
position:absolute;
+
−
top:-50px;
+
−
left:-10px;
+
−
height:49px;
+
−
width:30px;
+
−
color:#fff;
+
−
font-size:11px;
+
−
line-height:30px;
+
−
background-image:url(https://static.igem.org/mediawiki/2016/7/7e/Toulouse_France_notebookBubble.png);
+
−
background-repeat:no-repeat;
+
−
}
+
−
 
+
−
#shiji_1p,#shiji_2p,#shiji_3p,#shiji_4p,#shiji_5p,#shiji_6p,#shiji_7p,#shiji_8p,#shiji_10p,#shiji_11p,#shiji_13p{
+
−
position:absolute;
+
−
top:130px;
+
−
left:150px;
+
−
width:800px;
+
−
height:60px;
+
−
line-height:60px;
+
−
color:rgba(122,122,122,1.00);
+
−
background-color:#efefef;
+
−
font-family: Arial,Helvetica,sans-serif;
+
−
font-size:19px;
+
−
font-weight:600;
+
−
border-radius:50px;
+
−
display:none;
+
−
text-align:center;
+
−
}
+
−
 
+
−
#shiji_9p,#shiji_12p{
+
−
position:absolute;
+
−
top:130px;
+
−
left:0px;
+
−
width:1100px;
+
−
height:60px;
+
−
line-height:60px;
+
−
color:rgba(122,122,122,1.00);
+
−
background-color:#efefef;
+
−
font-family: Arial,Helvetica,sans-serif;
+
−
font-size:19px;
+
−
font-weight:600;
+
−
border-radius:50px;
+
−
display:none;
+
−
text-align:center;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
/* loading */
+
−
 
+
−
 
+
−
/* team */
+
−
.hello{
+
−
padding: 20px 20px 20px 20px;
+
−
background-color:rgba(255,255,255,0.6);
+
−
}
+
−
    .fotorama{
+
−
position:relative;
+
−
z-index:0;
+
−
}
+
 
 
 
 
−
/* dans menu rotate */
+
$("#shiji_3").mouseenter(function(){
 +
$("#shiji_3p").slideDown(300);
 +
});
 +
$("#shiji_3").mouseleave(function(){
 +
$("#shiji_3p").fadeOut(200);
 +
});
 
 
−
.rotating{
+
$("#shiji_4").mouseenter(function(){
−
animation: rotating linear 5s infinite;
+
$("#shiji_4p").slideDown(300);
−
-webkit-animation: rotating linear 5s infinite;
+
});
−
+
$("#shiji_4").mouseleave(function(){
−
}
+
$("#shiji_4p").fadeOut(200);
−
@keyframes rotating {
+
});
−
0% {
+
−
transform: rotate(0deg);
+
−
}
+
−
+
−
100% {
+
−
transform: rotate(-360deg);
+
−
}
+
−
}
+
−
 
+
−
@-webkit-keyframes rotating {
+
−
0% {
+
−
-webkit-transform: rotate(0deg);
+
−
}
+
−
100% {
+
−
-webkit-transform: rotate(-360deg);
+
−
}
+
−
}
+
 
 
 
 
−
#globalWrapper {
+
$("#shiji_5").mouseenter(function(){
−
    margin: -6px 0px;
+
$("#shiji_5p").slideDown(300);
−
    padding: 0;
+
});
−
    padding-bottom: 0px;
+
$("#shiji_5").mouseleave(function(){
−
}
+
$("#shiji_5p").fadeOut(200);
 +
});
 
 
−
/********************************* DEFAULT WIKI SETTINGS  ********************************/
+
$("#shiji_6").mouseenter(function(){
−
 
+
$("#shiji_6p").slideDown(300);
−
#sideMenu, #top_title {display:none;}
+
});
−
#content {padding:0px; width:auto; margin-top:-7px;margin-left:0} /*J'ai regle les marges */
+
$("#shiji_6").mouseleave(function(){
−
#body {padding: -2px 0px ;width: 100% ; height: 100% ; font-family: Raleway,"Helvetica Neue",Helvetica,Arial,sans-serif; color: #000;  background-color: #d4dce4;}
+
$("#shiji_6p").fadeOut(200);
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin: 0 0 35px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px;} /*Ca tu peux changer la police*/
+
});
−
 
+
−
/*Là y avait le CSS du menu d'iGEM, j'ai enlevé */
+
−
 
+
−
/********************************* CONTENT OF THE PAGE ********************************/
+
−
 
+
−
 
+
 
 
 +
$("#shiji_7").mouseenter(function(){
 +
$("#shiji_7p").slideDown(300);
 +
});
 +
$("#shiji_7").mouseleave(function(){
 +
$("#shiji_7p").fadeOut(200);
 +
});
 
 
−
/* Wrapper for the content */
 
−
.content_wrapper {
 
−
width: 85%;
 
−
margin-left:150px;
 
−
padding:10px 0px;
 
−
float:left;
 
−
background-color:white;
 
−
}
 
−
 
−
/*LAYOUT */
 
−
.column  {
 
−
padding: 10px 0px;
 
−
float:left;
 
−
background-color:white;
 
−
}
 
−
 
−
.full_size {
 
−
width:100%;
 
−
}
 
−
 
−
.full_size img {
 
−
padding: 0px 0px;
 
−
width:96.5%;
 
−
}
 
−
 
−
.half_size {
 
−
width: 50%;
 
−
}
 
−
.half_size img {
 
−
padding: 10px 15px;
 
−
width: 93%;
 
−
}
 
−
 
−
 
−
 
−
.highlight {
 
−
width: 90%;
 
−
margin: auto;
 
−
padding: 15px 5px;
 
−
background-color: #f2f2f2;
 
−
}
 
−
 
−
.judges-will-not-evaluate {
 
−
border: 4px solid #72c9b6;
 
−
display: block;
 
−
margin: 5px 15px;
 
−
width: 95%;
 
−
font-weight:bold;
 
−
}
 
−
 
−
 
−
/*STYLING */
 
−
 
−
/* styling for the titles */
 
−
.content_wrapper h1, .content_wrapper h2 {
 
−
padding:5px 15px;
 
−
border-bottom:0px;
 
−
color:#72c9b6;
 
−
 
−
}
 
−
.content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 {
 
−
padding:5px 15px;
 
−
border-bottom:0px;
 
−
color: #000000; 
 
−
}
 
−
 
−
 
−
/* font and text */
 
−
.content_wrapper p {
 
−
padding:0px 15px;
 
−
font-size: 13px;
 
−
font-family:Tahoma, Geneva, sans-serif;
 
−
}
 
−
 
−
/* Links */
 
−
.content_wrapper a {
 
−
font-weight: bold;
 
−
text-decoration: underline;
 
−
text-decoration-color:#72c9b6;
 
−
color: #72c9b6;
 
−
-webkit-transition: all 0.4s ease;
 
−
-moz-transition: all 0.4s ease;
 
−
-ms-transition: all 0.4s ease;
 
−
-o-transition: all 0.4s ease;
 
−
transition: all 0.4s ease;
 
−
}
 
−
 
−
/* hover for the links */
 
−
.content_wrapper a:hover {
 
−
text-decoration:none;
 
−
color:#000000;
 
−
}
 
−
 
−
/* non numbered lists */
 
−
.content_wrapper ul {
 
−
padding:0px 20px;
 
−
font-size: 13px;
 
−
font-family:Tahoma, Geneva, sans-serif;
 
−
}
 
−
 
−
/* numbered lists */
 
−
.content_wrapper ol {
 
−
padding:0px;
 
−
font-size: 13px;
 
−
font-family:Tahoma, Geneva, sans-serif;
 
−
}
 
−
 
−
/* Table */
 
−
.content_wrapper table {
 
−
width: 97%;
 
−
margin:15px 10px;
 
−
border: 1px solid #d3d3d3;
 
−
border-collapse: collapse;
 
−
}
 
−
 
−
/* table cells */
 
−
.content_wrapper  td {
 
−
padding: 10px;
 
−
vertical-align: text-top;
 
−
border: 1px solid #d3d3d3;
 
−
border-collapse: collapse;
 
−
}
 
−
 
−
/* table headers */
 
−
.content_wrapper th {
 
−
padding: 10px;
 
−
vertical-align: text-top;
 
−
border: 1px solid #d3d3d3;
 
−
border-collapse: collapse;
 
−
background-color:#f2f2f2;
 
−
}
 
−
 
−
/* Button class */
 
−
.button_click {
 
−
margin: 10px auto;
 
−
padding: 15px; width:12%; 
 
−
text-align:center;
 
−
font-weight:bold;
 
−
background-color: #72c9b6;
 
−
cursor:pointer; 
 
−
-webkit-transition: all 0.4s ease;
 
−
-moz-transition: all 0.4s ease;
 
−
-ms-transition: all 0.4s ease;
 
−
-o-transition: all 0.4s ease;
 
−
transition: all 0.4s ease;
 
−
}
 
−
 
−
/* button class on hover */
 
−
.button_click:hover { 
 
−
background-color:#000000;
 
−
color:#72c9b6;
 
−
}
 
−
 
−
/********************************* RESPONSIVE STYLING ********************************/
 
−
 
−
/* IF THE SCREEN IS LESS THAN 1000PX */
 
−
 
−
@media only screen and (max-width: 1000px) {
 
−
 
−
#content {width:100%; }
 
−
.menu_wrapper {width:15%;}
 
−
.content_wrapper {margin-left: 15%;}
 
−
.menu_item {display:block;}
 
−
.icon {display:none;}
 
−
.highlight {padding:10px 0px;}
 
−
}
 
−
 
−
 
−
/* IF THE SCREEN IS LESS THAN 680PX */
 
−
 
−
@media only screen and (max-width: 680px) {
 
−
.collapsable_menu_control { display:block;}
 
−
.menu_item {display:none;}
 
−
.menu_wrapper { width:100%; height: 15%; position:relative;}
 
−
.content_wrapper {width:100%; margin-left:0px;}
 
−
.column.half_size {width:100%; }
 
−
.column img { width: 100%; padding: 5px 0px;}
 
−
.icon {display:block;}
 
−
.highlight {padding:15px 5px;}
 
−
}
 
 
 
 +
$("#shiji_8").mouseenter(function(){
 +
$("#shiji_8p").slideDown(300);
 +
});
 +
$("#shiji_8").mouseleave(function(){
 +
$("#shiji_8p").fadeOut(200);
 +
});
 
 
 +
$("#shiji_9").mouseenter(function(){
 +
$("#shiji_9p").slideDown(300);
 +
});
 +
$("#shiji_9").mouseleave(function(){
 +
$("#shiji_9p").fadeOut(200);
 +
});
 
 
 
 
 +
$("#shiji_10").mouseenter(function(){
 +
$("#shiji_10p").slideDown(300);
 +
});
 +
$("#shiji_10").mouseleave(function(){
 +
$("#shiji_10p").fadeOut(200);
 +
});
 
 
 
 
−
+
});
−
+
−
/* -----------------------------------------------------------------------------
+
−
--------------------------------------------------------------------------------
+
−
--------------------------------------------------------------------------------
+
−
*/
+
  
−
/* Team page */
+
</script>
−
#teamGallery {
+
−
  width: 100%;
+
−
  height: 100%;
+
−
  background-color: transparent;
+
−
}
+
−
#teamGallery .box {
+
−
  width: 35%;
+
−
  padding-bottom: 35%;
+
−
  position: relative;
+
−
  float: left;
+
−
}
+
−
#teamGallery .innerBox {
+
−
  position: absolute;
+
−
  left: 3px;
+
−
  right: 3px;
+
−
  bottom: 3px;
+
−
  top: 3px;
+
−
  background-color: ##000000;
+
−
}
+
  
−
#teamGallery .innerBox img {
+
<script>
−
  width: 100%;
+
function ToBeBlock()
−
  height: 100%;
+
{
−
  position: relative;
+
document.getElementById('light').style.display='block';
−
}
+
document.getElementById('fade').style.display='block';
−
#teamGallery .innerBox a {
+
}
−
  width: 100%;
+
function ToBeNone()
−
  height: 100%;
+
{
−
  display: block;
+
document.getElementById('light').style.display='none';
−
  position: relative;
+
document.getElementById('fade').style.display='none';
−
}
+
}
−
#teamGallery .innerBox a:hover .ptext {
+
function ToBeBlock_info()
−
  padding-top: 5%;
+
{
−
  padding-bottom: 3%;    
+
document.getElementById('light_info').style.display='block';
−
}
+
document.getElementById('fade_info').style.display='block';
−
#teamGallery .innerBox a:hover {
+
}
−
  text-decoration: none;
+
function ToBeNone_info()
−
}
+
{
 +
document.getElementById('light_info').style.display='none';
 +
document.getElementById('fade_info').style.display='none';
 +
}
  
  
 +
function adjust(){
 +
var content=document.getElementById('index_content');
 +
var h= document.documentElement.clientHeight;
 +
content.style.height=h+'px';
  
−
.descriptionArea {
+
var content1=document.getElementById('click_me');
−
  width: 99%;
+
content1.style.top=h/2-219+'px';
−
  width: calc(100% - 20px);
+
−
  display: none;
+
−
  color: black;
+
−
}
+
−
.descriptionArea.show {
+
−
  display: block;
+
−
}
+
−
.descriptionArea img {
+
−
  display: block;
+
−
  width: 100%;
+
−
  margin-top: 40px;
+
−
  padding: 3px;
+
−
}
+
−
+
  
−
/* Title styling */
+
var content2=document.getElementById('detail');
−
.textContent h1 {
+
content2.style.top=h/2-200+'px';
−
font-size: 33px;
+
}
−
font-weight: bold;
+
window.onload=adjust;
−
margin: 20px;
+
</script>
−
margin-left: 0;
+
−
height: 33px;
+
−
/*font-family: 'Libertinagec', serif;*/
+
−
}
+
−
.textContent h2 {
+
−
font-size: 25px;
+
−
font-weight: bold;
+
−
margin-bottom: 15px;
+
−
margin-top: 30px;
+
−
border-bottom: 1px solid black;
+
−
/*font-family: 'Libertinagec', serif;*/
+
−
width: 100%;
+
−
}
+
−
.textContent h3 {
+
−
font-size: 20px;
+
−
font-weight: bold;
+
−
margin-top: 20px
+
−
/*font-family: 'Libertinagec', serif;*/
+
−
}
+
−
.textContent h4 {
+
−
font-size: 18px;
+
−
font-weight: bold;
+
−
margin-bottom: 10px;
+
−
margin-top: 8px;
+
−
/*font-family: 'Libertinagec', serif;*/
+
−
}
+
−
.textContent h5 {
+
−
font-size: 18px;
+
−
text-decoration: underline;
+
−
margin-bottom: 10px;
+
−
margin-top: 8px;
+
−
/*font-family: 'Libertinagec', serif;*/
+
−
}
+
  
 +
</html>
  
−
/* Lists styling */
 
−
.textContent ul, ol {
 
−
display: block;
 
−
margin-top: 5px;
 
−
margin-bottom: 5px;
 
−
padding-left: 20px;
 
−
list-style-type: disc;
 
−
}
 
  
−
.textContent ul li ul {
+
{{Toulouse_France/Sponsors}}
−
padding-left: 40px;
+
−
list-style-type: circle;
+
−
}
+
−
+
−
/* Paragraphs and columns */
+
−
.textContent p {
+
−
margin-top: 5px;
+
−
margin-bottom: 10px;
+
−
text-align: justify;
+
−
line-height: 25px;
+
−
}
+
−
.textContent {
+
−
line-height: 25px;
+
−
}
+
  
−
.textContent div.column-left {
+
<html>
−
float: left;
+
−
width: 48%;
+
−
}
+
−
.textContent div.column-right {
+
−
width: 48%;
+
−
float: right;
+
−
}
+
−
.textContent #clear {
+
−
clear: both;
+
−
height: 10px;
+
−
}
+
  
 +
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
 +
<!-- #####################  PIED DE PAGE    ##################################################### -->
 
 
−
/* Responsive design! */
 
−
@media only screen and (max-width : 600px) {
 
−
  /* Small screens: two columns become one! */
 
−
  .textContent div.column-left,
 
−
  .textContent div.column-right {
 
−
float: none;
 
−
width: 100%;
 
−
  }
 
−
}
 
−
 
−
.textContent hr {
 
−
border: 0;
 
−
border-bottom: 1px solid grey;
 
−
margin-left: 100px;
 
−
margin-right: 100px;
 
−
margin-bottom: 50px;
 
−
margin-top: 50px;
 
−
}
 
−
 
−
.textContent a {
 
−
  color: #636363;
 
−
}
 
−
.textContent a:hover {
 
−
  color: #909090;
 
−
}
 
−
 
−
 
−
/* -----------------------------------------------------------------------------
 
−
--------------------------------------------------------------------------------
 
−
--------------------------------------------------------------------------------
 
−
*/
 
−
 
−
</style>
 
−
 
−
<script src="https://2016.igem.org/Team:Toulouse_France/jqueryNotebook" type="text/javascript" ></script>
 
 
 
−
<script src="https://2016.igem.org/wiki/index.php?title=Template:Toulouse_France/backtotop&action=submit"></script>
+
<!-- Footer Background Image Wrapper -->
−
<script src="https://2016.igem.org/wiki/index.php?title=Template:Toulouse_France/min&action=submit"></script>
+
−
<script src="https://2016.igem.org/wiki/index.php?title=Template:Toulouse_France/mobilemenu&action=submit"></script>
+
−
<script src="https://2016.igem.org/wiki/index.php?title=Template:Toulouse_France/a&action=submit"></script>
+
 
 
−
<script>
 
  
−
// This is the jquery part of our template.
+
<!-- ################################################################################################ -->
 +
<div class="bgded2" style="background-image:url('https://static.igem.org/mediawiki/2016/6/65/Toulouse_France_PhotoblousesNotebook.jpg');">
  
−
$(document).ready(function() {
 
  
−
$("#HQ_page").attr('id','');
+
<footer id="footer" class="hoc clear">
−
 
+
<!-- ################################################################################################ -->
−
 
+
<div style="margin: 5% 40%;  background-color:rgba(1,1,1,0.3);">
−
if ( wgPageName.substring( 0,  8) == "Template")  {  // if the page is a template it displays the full name in a single line
+
−
$("#team_name").html( wgPageName );
+
−
}
+
−
 
+
−
else if (  ( (wgPageName.match(/\//g) || []).length ) == 0 ) {  // if it is the home page , just print the team's name
+
−
$("#team_name").html( wgPageName.substring( 5, wgPageName.length ) );  
+
−
}
+
−
 
+
−
else {
+
−
// this adds the team's name as an h1
+
−
$("#team_name").html( wgPageName.substring( 5 , wgPageName.indexOf("/") ) );
+
−
 
+
−
// this adds the page's title as an h4
+
−
$("#page_name").html (    ( wgPageName.substring( wgPageName.indexOf("/") + 1, wgPageName.length ) ).replace( /\/|_/g , " ")  );
+
−
}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
$('#accordion').find('.menu_item').click(function(){
+
−
 
+
−
//Expand or collapse this panel
+
 
 
−
submenu = $(this).find('.submenu');
 
−
submenu.toggle();
 
  
−
icon = $(this).find('.icon');
+
 +
<h6 class="title" style="color:rgb(255,255,255);">Contacts</h6>
 +
 +
<ul class="nospace linklist contact" style="color:rgb(255,255,255);">
 +
<address>
 +
&#127968;
 +
INSA Toulouse<br>
 +
135, Avenue de Rangueil<br>
 +
31077 TOULOUSE Cedex 4<br>
 +
France<br>         
 +
</address>
 +
</li>
 +
<li>&#9742; +00 (33) 6 13 64 89 40<br></li>
 +
<li>&#9993; igemtoulouse2016@gmail.com</li>
 +
</ul>
 +
 +
 +
 +
</div>
 +
<!-- ################################################################################################ -->
 +
</footer>
  
−
if ( !$( submenu ).is(':visible') ) {
+
<a class="anchor" href="#top"><img align="right" style="width:40px;" src="https://static.igem.org/mediawiki/2016/b/b6/Toulouse_France_backtotop.png" /></a>
−
icon.removeClass("less").addClass("plus");
+
−
}
+
−
else {
+
−
icon.removeClass("plus").addClass("less");
+
−
}
+
  
−
//Hide the other panels
 
−
 
−
$(".submenu").not(submenu).hide();
 
−
$(".icon").not(icon).removeClass("less").addClass("plus");
 
−
});
 
  
 +
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
 +
<!-- #################################  FIN    ############################################## -->
  
−
$(".collapsable_menu_control").click(function() {
+
<div id="copyright" class="hoc clear">
−
$(".menu_item").toggle();
+
<center>
−
});
+
<p>Website by <a href="https://2016.igem.org/Team:Toulouse_France">Team iGEM Toulouse 2016</a></p>
 +
</center>
 +
</div>
  
−
$( window ).resize(function() {
+
</div>
−
$(".menu_item").show();
+
−
});
+
  
−
 
−
});
 
−
 
−
</script>
 
−
 
−
<script type='text/javascript'> $(function(){
 
−
$(window).scroll(function () {
 
−
if ($(this).scrollTop() > 250) {
 
−
$('#column-left').addClass("fixNavigation");
 
−
} else {
 
−
$('#column-left').removeClass("fixNavigation");
 
−
}
 
−
});
 
−
});
 
−
</script>
 
−
 
−
 
−
 
−
 
−
 
−
<script>
 
−
$(document).ready(function(){$('div .igemlogo').mouseover(function(){div = $('.left-menu'); div.fadeIn(1);}).mouseout(function(){div.fadeOut(100);});});
 
−
$(document).ready(function(){$('div #pspanel').mouseover(function(){div = $('#psdesc');div.fadeIn(1);}).mouseout(function(){div.fadeOut(1);});});
 
−
$(document).ready(function(){$('div #dspanel').mouseover(function(){div = $('#dsdesc');div.fadeIn(1);}).mouseout(function(){div.fadeOut(1);});});
 
−
$(document).ready(function(){$('div #thpanel').mouseover(function(){div = $('#thdesc');div.fadeIn(1);}).mouseout(function(){div.fadeOut(1);});});
 
−
$(document).ready(function(){$('div #tcpanel').mouseover(function(){div = $('#tcdesc');div.fadeIn(1);}).mouseout(function(){div.fadeOut(1);});});
 
−
</script>
 
−
 
−
 
 
</html>
 
</html>

Latest revision as of 23:26, 18 October 2016

iGEM Toulouse 2016

Notebook

  • June

    12
  • 26

  • July

    10
  • 24

  • August

    7
  • 21

  • September

    4
  • 18

  • October

    2
  • 19

Dry lab:

Now that the subject is defined, and that the bibliography is done, let’s prepare our constructions! What we have done:
  • selected and adapted genes
  • designed primers
  • ordered gBlocks
  • ordered the material (enzymes, kit…)necessary for the project

Wet lab:

Having a good control of the basic experiments, as enzymatic digestion or transformation for example, is important to ensure the lab work during the summer. We have done PCR, digestion, ligation, and transformation for clonings during a week, being supervised by PhD students.

Dry lab:

In parallel, we finished ordering gBlocks from IDT, and we refined the gene design.

Wet lab:

First of all, we had to digest the backbone pSB1C3, which have to received each of our parts. Thus we obtained high quantity of pSB1C3 plasmids with RFP insert due to cultures, and we purified and digested it with the enzymes EcoRI and PstI. As the gBlocks were received, we did PCR to amplify them and create a stock. Most of the PCR worked, but not all of them. Thus, we start trying to clone the good amplicons in the backbone pSB1C3, but it fail because of a lack of genetic material.
We asked to iGEM Munich 2012 to send us four shuttle backbones, that can be used in E. Coli as well as in B. subtilis. We amplified them and stocked them. In parallel, we have done petri dishes with several antibiotic resistances to have it in advance in stock.
In 2014, the iGEM Toulouse team worked on fungi, and constructed strains able to secrete antifungals. We used these strains in order to: have a positive control when our bacteria will be functional, test the efficiency of the antifungals, and find the best temperature, medium and technique. We also determined what was the more efficient between using the supernatant, the bacteria, or a mix of both. All these tests were performed on a fungi mat.

Dry lab:

We decided to create a device to confine our modified bacteria. We designed it using Blender.

Wet lab:

The transformation of E. coli with the construction of a NagA inducible promoter in pSB1C3 worked, it was the first big step! However, transformation with our antifungals and toxin genes did not work. As the cloning with pNagA is validated, we started trying to clone this insert in the shuttle plasmid pSB0K-P from 2012 iGEM Munich team, and to transform it in E. coli.
Some gBlocks were still in process to be amplified by PCR. We tried different programs, by modifying the elongation time or the hybridization temperature.
The genes (sdp and skf) for our predation module should be cloned by the Gibson method. The clonings did not work.

Dry lab:

As the PCR of gBlocks do not work very well, we designed other primers to improve the compatibility between the template and the primers.
For the modelling, we designed the prey-predator model to have a simulation of the activity of our modified B. subtilis.

Wet lab:

We continued trying to clone our insert pNagA in the shuttle plasmid pSB0K-P, using different strategies. Indeed, we tried to digest the DNA fragments with different enzymes. Nevertheless this plasmid is quite big (>9 kbp) and thus it is harder to clone than a smallest plasmid. As a consequence, we thought about a strategy to reduce the size of this plasmid.
The cloning of some gBlocks in pSB1C3 worked! They are an antifungals part and toxin/antitoxin genes. We started to clone it in pSB0K-P and to transform it in E. coli.
We also had problem with the Gibson cloning.

Dry lab:

Moreover, in order to reduce the size of our replicative plasmid pSB0K-P, we designed primers that were supposed to amplify both the origin of replication and the antibiotic resistance gene for B. subtilis and E. coli.

Wet lab:

The bacteria we are modifying is supposed to improve the predation capacity of B. subtilis. In order to determine if our bacteria is more efficient than the wild type bacteria, we have done predation tests by using the strain WT 168. The bacteria that our B. subtilis is supposed to limit the growth is Pseudomonas fluorescens SBW25.
We have done PCR on the big pSB0K-P plasmid to reduce its size, from 9,3 kbp to 5,7 kbp, hoping the cloning will become easier. We started to clone our gBlocks pNagA, mazF and AfA in this plasmid.
Problems with the cloning in pSB1C3 of our predation genes were still present.
Dry lab:

We designed new primers to optimize the Gibson cloning of our predation genes.

Wet lab:

The iGEM Imperial College of London asked us to collaborate with them. We had to determine the optimum growth conditions (pH and temperature) of Bacillus subtilis and Pseudomonas fluorescens. We have done experiments realizing cultures in different conditions during the all day, and we measured the OD every hour. Due to these data we determined the doubling time of each conditions, and we selected the best one.
Now that the small version of the plasmid pSB0K-P is circularized, we transformed it in Bacillus subtilis. The cloning of our three inserts in the pSB0K-Mini worked, and we also succeed in transforming B. subtilis with these constructions.

Wet lab:

The problems with the Gibson cloning are still present, but the origin of the disturbance is unknown.
We started to test our promoter pNagA in B. subtilis. It was supposed to be inducible in presence of NagA, and then give off RFP. In parallel, we tried to test the efficiency of our antifungal operon. It was useful to determine if our B. subtilis is able to affect the growth of other bacteria.

Wet lab:

The plasmid pSB0K-Mini can be replicated in E. coli, but the antibiotic resistance functional in this bacterium is the ampicillin. One of our objective was to modify it to remplace the ampicillin resistance gene by a chloramphenicol resistance. By amplifying by PCR pSB0K-P to select only the kanamycine gene and the replication origin in B. subtilis, and by ligating it with pSB1C3, we should obtain a plasmid replicative in E. coli and in B. subtilis. In addition, the antibiotic resistance genes would be the one expected: chloramphenicol for E. coli, and kanamycine for B. subtilis.
WIKI FREEZE


Contacts
    🏠 INSA Toulouse
    135, Avenue de Rangueil
    31077 TOULOUSE Cedex 4
    France
  • ☎ +00 (33) 6 13 64 89 40
  • ✉ igemtoulouse2016@gmail.com