Team:Grenoble/Projet/Intro

From 2011.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{:Team:Grenoble/Templates/Current}}
+
/*
 +
Enlever l'entête et le pied de page wiki, ainsi que les bords:
 +
(ce code garde les liens pour éditer le wiki)
 +
*/
 +
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo
 +
{
 +
    display:none;
 +
}
-
<!--
+
#top-section
-
{{:Team:Grenoble/Templates/Team:Grenoble_Rawhide}}
+
{
-
-->
+
    border: none;
 +
    height: 0px;
 +
}
 +
   
 +
#content
 +
{
 +
    border: none;
 +
}
-
<html>
+
/*
 +
Coloration du menu en bleu, fond blanc ou transparent ? en tout cas menu invisible sauf si on passe dessus avec la souris
 +
*/
-
<div class="left">
+
.left-menu:hover
 +
{
 +
    background-color: transparent;
 +
}
 +
 
 +
#menubar:hover
 +
{
 +
    color: #0F174D;
 +
}
 +
 
 +
#menubar li a
 +
{
 +
    background-color: transparent;
 +
    color: transparent;
 +
}
 +
 
 +
#menubar:hover li a
 +
{
 +
    color: #0F174D;
 +
}
 +
 
 +
/*
 +
Enlever le "teams" de la bare wiki qui sert à rien, enlève également le Deconnexion
 +
*/
 +
 
 +
#menubar > ul > li:last-child
 +
{
 +
    display: none;
 +
}
 +
 
 +
 
 +
/*
 +
Mise en page, en-tête, couleur de fond, bannière, etc...
 +
*/
 +
 
 +
body,#content
 +
{
 +
/*
 +
    background: #ADD1FF;
 +
*/
 +
    background: #002657;
 +
/*
 +
    background: #FFFFFF;
 +
*/
 +
/*
 +
background: url("http://www.downloadfreebackgrounds.net/backgrounds/ice-mountains-canada-background.jpg");
 +
*/
 +
}
 +
 
 +
#header
 +
{
 +
    background: url("https://static.igem.org/mediawiki/2011/2/20/Banderolle_wiki.png") no-repeat #ADD1FF;
 +
    height: 160px;
 +
    margin-left: 68px;
 +
    margin-top: -24px;
 +
    width: 829px;
 +
    border: 1px solid #477CBF;
 +
   
 +
    -webkit-box-shadow: #666666 0px 2px 3px;
 +
-moz-box-shadow: #666666 0px 2px 3px;
-
<div class="body">
+
-webkit-border-radius: 8px;
 +
-moz-border-radius: 8px;
 +
border-radius: 8px;
 +
}   
 +
   
 +
/*
 +
#innercontent {
 +
    padding: 1px;} Important!
 +
*/
 +
 
 +
 
 +
/*
 +
*
 +
*
 +
* Diaporama
 +
*
 +
*
 +
* 
 +
*/
 +
 
 +
.position_diapo
 +
{
 +
position: relative;
 +
overflow :hidden;
 +
    margin-top: 14px;
 +
    width: 963px;
 +
    height: 370px;
 +
   
 +
    border: 1px solid #477CBF;
 +
   
 +
    -webkit-box-shadow: #666666 0px 2px 3px;
 +
-moz-box-shadow: #666666 0px 2px 3px;
-
<h2>The Project, Mercuro-Coli</h1>
+
-webkit-border-radius: 8px;
-
+
-moz-border-radius: 8px;
-
<div class="blocbackground">
+
border-radius: 8px;
-
+
 
-
<h2>Introduction :</h2>
+
background: #FFFFFF;
-
+
}
-
<p>
+
   
-
With industries growth, wastes are accumulating and presence of pollutant and toxic components is becoming an international concern.
+
.style_diapo .items
-
</p>
+
{
-
<p>
+
/* this cannot be too large */
-
Our project is oriented in this problematic, Mercuro-Coli is a mercury biosensor which allows to detect and quantify mercury contained into polluted water. Intended to fieldwork studies, the device should be very easy to used :
+
width: 50000px;
-
</p>
+
position: absolute;
-
<div class="centering">
+
}
-
<a href="https://static.igem.org/mediawiki/2011/5/58/Dispositif.png"><img src="https://static.igem.org/mediawiki/2011/5/58/Dispositif.png" width=600px/></a>
+
-
</div>
+
-
<ul>
+
-
<li>Ideally, the device should be a plate carried into a packaging.</li>
+
-
<li>Once unpacked, the sample just has to be added.</li>
+
-
<li>Finally, the result would be given by a red strip : its presence testifying that the sample contains mercury and its position on the plate acquainting about the quantity.</li>
+
-
</ul>
+
-
+
-
</div>
+
-
+
-
<div class="blocbackground">
+
-
+
-
<h2>Specifications :</h2>
+
-
+
-
<p>
+
-
At the beginning of the project, specifications were defined about the final device. To get a better understanding on how the device should run, those are going to be taken back step by step.
+
-
</p>
+
-
<ul>
+
-
<li>Operating living cell : E. Coli: BW 25 113</li>
+
-
<li>Only one type of bacteria :</li>
+
-
<p>Once our genetic circuit achieved, it will be introduce to our E. Coli strain. Newly obtained bacteria strain will be then spread on the plate forming a bacteria film on the top of it.</p>
+
-
</ul>
+
-
+
-
<a href="https://static.igem.org/mediawiki/2011/c/c5/1_type_bacteria.png"><img src="https://static.igem.org/mediawiki/2011/c/c5/1_type_bacteria.png" width=600px/></a>
+
-
+
-
<ul>
+
-
<li>Comparative measure :</li>
+
-
</ul>
+
-
+
-
<table class="nobordure">
+
-
<tr>
+
-
<td><a href="https://static.igem.org/mediawiki/2011/7/7d/Comparaison.png"><img src="https://static.igem.org/mediawiki/2011/7/7d/Comparaison.png"  height="300px"></a></td>
+
-
<td>
+
-
<p>
+
-
The comparative measure will be made by comparing mercury concentration to IPTG concentration. IPTG concentration will is the reference.
+
-
</p>
+
-
<p>
+
-
So, an IPTG gradient concentration will be made beforehand in the plate constituting our scale of quantification.
+
-
</p>
+
-
</td>
+
-
</tr>
+
-
</table>
+
-
+
-
<p>
+
-
By adding uniformly the polluted sample, two different bacteria behaviors will come up depending on the predominant concentration :
+
-
</p>
+
-
+
-
<table class="nobordure">
+
-
<tr>
+
-
<td>
+
-
<ul>
+
-
<li>
+
-
On the left side, where the mercury concentration is prevailing, bacteria with a <strong>sending</strong> behavior will appear. They have the ability to release in the external medium Quorum Sensing molecules, AHL, thanks to the expression of the CinI protein.
+
-
</li>
+
-
<li>
+
-
On the right, where the IPTG concentration is dominant, bacteria with a <strong>receiving</strong> behavior will come up. They express CinR protein, a cytoplasmic receptor for Quorum Sensing.
+
-
</li>
+
-
</ul>
+
-
</td>
+
-
<td>
+
-
<a href="https://static.igem.org/mediawiki/2011/8/81/Receiving_secr_bacteria.svg.png"><img src="https://static.igem.org/mediawiki/2011/8/81/Receiving_secr_bacteria.svg.png"  width="350px"></a>
+
-
</td>
+
-
</tr>
+
-
<tr>
+
-
<td>
+
-
<p>
+
-
So, we will have the emergence of two distinctive areas separated by one boundary that can appear closer to one side or the other depending on the quantity of mercury. For example, if the sample contains less mercury the boundary will appear closer to the left side.
+
-
</p>
+
-
</td>
+
-
<td>
+
-
<a href="https://static.igem.org/mediawiki/2011/d/d8/Border_movement.png"><img src="https://static.igem.org/mediawiki/2011/d/d8/Border_movement.png"  width="350px"></a>
+
-
</td>
+
-
</tr>
+
-
</table>
+
-
<p>So, the location of that boundary represents our point of interest that we will try to visualize.</p>
+
-
+
-
+
-
<ul>
+
-
<li>A visual result :</li>
+
-
</ul>
+
-
+
-
<p>The two different behaviors were chosen in purpose.</p>
+
-
+
-
<table class="nobordure">
+
-
<tr>
+
-
<td>
+
-
<a href="https://static.igem.org/mediawiki/2011/0/02/Coloration.png"><img src="https://static.igem.org/mediawiki/2011/0/02/Coloration.png"  width="300px"></a>
+
-
</td>
+
-
<td>
+
-
<a href="https://static.igem.org/mediawiki/2011/c/c2/Complex.png"><img src="https://static.igem.org/mediawiki/2011/c/c2/Complex.png"  width="260px"></a>
+
-
</td>
+
-
</tr>
+
-
</table>
+
-
+
-
<p>
+
-
At the boundary,Quorum Sensing molecule, AHL, released by sending bacteria will be received by the front of receiving bacteria. The complex formed by AHL molecule and CinR protein will then induce the coloration of the front receiving bacteria.
+
-
</p>
+
-
<p>
+
-
Let's go further to understand how such evolution of this system is possible with only one strain ?
+
-
</p>
+
-
</div>
+
-
+
-
</div>
+
-
+
-
</div>
+
-
<script>
+
.items div
-
document.getElementById('submenu').innerHTML = '<h3><span class="vert">Le Projet:</span> Bio</h3><ul><li><a href="https://2011.igem.org/Team:Grenoble/Projet/Intro">Introduction</a></li><li><a href="https://2011.igem.org/Team:Grenoble/Projet/Device">The device</a></li><li><a href="https://2011.igem.org/Team:Grenoble/Projet/Design">The genetic circuit :</a></li><ol><li><a href="https://2011.igem.org/Team:Grenoble/Projet/Design/toggle">The toggle switch</a></li><li><a href="https://2011.igem.org/Team:Grenoble/Projet/Design/quorum">The quorum sensing</a></li><li><a href="https://2011.igem.org/Team:Grenoble/Projet/Design/quorum#color">The coloration</a></li><li><a href="https://2011.igem.org/Team:Grenoble/Projet/regulation">Post-transcriptional regulation</a></li></ol><li><a href="https://2011.igem.org/Team:Grenoble/Projet/Modelling">Modelling</a></li><li><a href="https://2011.igem.org/Team:Grenoble/Projet/Results">Results</a></li><li><a href="https://2011.igem.org/Team:Grenoble/Projet/Biobricks">Biobricks</a></li></ul>'
+
{
-
</script>
+
float: left;
 +
width: 963px;
 +
height: 370px;
 +
}
 +
 +
.prev
 +
{
 +
background: url(https://static.igem.org/mediawiki/2011/8/81/DTU-Denmark2011-slider-prev.png) no-repeat;
 +
height: 74px;
 +
width: 74px;
 +
float:left;
 +
left:-12px;
 +
position: relative;
 +
margin-top: 148px ;
 +
cursor: pointer;
 +
}
 +
       
 +
.next
 +
{
 +
background: url(https://static.igem.org/mediawiki/2011/5/56/DTU-Denmark2011-slider-next.png) no-repeat;
 +
height: 74px;
 +
width: 74px;
 +
float:right;
 +
right:-12px;
 +
position: relative;
 +
margin-top: 148px ;
 +
cursor: pointer;
 +
}
 +
       
 +
.disabled
 +
{
 +
visibility: hidden;
 +
}
 +
       
 +
/* position and dimensions of the navigator */
 +
.navi
 +
{
 +
    left: -56px;
 +
    margin-left: 50%;
 +
    position: relative;
 +
    width: 112px;
 +
}
 +
   
 +
.navi a  
 +
{
 +
width: 8px;
 +
height: 8px;
 +
float: left;
 +
margin: 3px;
 +
background: url(https://static.igem.org/mediawiki/2011/7/7e/DTU-Denmark2011-slider-navigator-red.png) 0 0 no-repeat;
 +
/*background: url(https://static.igem.org/mediawiki/2011/2/22/DTU-Denmark2011-slider-navigator-dark.png) 0 0 no-repeat;*/
 +
display: block;
 +
font-size: 1px;
 +
}
 +
 +
.navi a:hover
 +
{
 +
background-position: 0 -8px;
 +
}
 +
 +
.navi a.active
 +
{
 +
background-position: 0 -16px;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/*
 +
*
 +
*
 +
* Barre de menu qui suit la fenêtre
 +
*
 +
*
 +
* 
 +
*/
 +
 
 +
.centering
 +
{
 +
    margin: 0 auto;
 +
    width: 965px;
 +
}
 +
 
 +
 
 +
ul.topnav > li > a:hover {
 +
background: url(https://static.igem.org/mediawiki/2011/f/f5/Topnav_hover.gif) no-repeat center -1px;
 +
padding-bottom: 1px;
 +
border-bottom-width: 5px;}
 +
 
 +
.navigation
 +
{
 +
height: 40px;
 +
margin-top: 10px;
 +
border: 1px solid #477CBF;
 +
   
 +
    -webkit-box-shadow: #666666 0px 2px 3px;
 +
-moz-box-shadow: #666666 0px 2px 3px;
 +
 +
-webkit-border-radius: 8px;
 +
-moz-border-radius: 8px;
 +
border-radius: 8px;
 +
 +
background: url("https://static.igem.org/mediawiki/2011/9/94/Menu_blue.png") repeat-x scroll 0 -1px #222222;
 +
    z-index: 1;
 +
    position: relative;
 +
}
 +
 
 +
 
 +
.stickToTop
 +
{
 +
    position: fixed;
 +
    top:0;
 +
    width:100%;
 +
}
 +
 
 +
ul.topnav ul li a
 +
{
 +
text-align: center;
 +
color: #FFFFFF;
 +
}
 +
 
 +
ul.topnav
 +
{
 +
list-style: none;
 +
padding: 0;
 +
margin: 0;
 +
float: left;
 +
width: 100%;
 +
font-size: 15px;
 +
}
 +
 
 +
ul.topnav li {
 +
float: left;
 +
margin: 0;
 +
padding: 0;
 +
position: relative; /*--Declare X and Y axis base for sub navigation--*/
 +
}
 +
ul.topnav li a {
 +
 
 +
padding: 5px 20px 5px 20px;
 +
display: block;
 +
text-decoration: none;
 +
float: left;
 +
}
 +
ul.topnav > li > a  
 +
{
 +
    height: 25px;
 +
    overflow: hidden;
 +
}
 +
 
 +
ul.topnav li:first-child a
 +
{
 +
padding-left: 0;
 +
}
 +
 
 +
/*
 +
ul.topnav li span
 +
{ /*--Drop down trigger styles--*/
 +
/*width: 17px;*/
 +
/*height: 34px;*/
 +
/*float: left;*/
 +
/*background: url(https://static.igem.org/mediawiki/2011/4/45/Subnav_btn.gif) no-repeat center top;*/
 +
/*
 +
        color: #0000FF;
 +
}
 +
*/
 +
 
 +
 
 +
ul.topnav li span.subhover
 +
{
 +
background-position: center bottom;
 +
cursor: pointer;
 +
} /*--Hover effect for trigger--*/
 +
 
 +
ul.topnav li ul.subnav {
 +
    z-index: 1; /*Stay on top of slider*/
 +
list-style: none;
 +
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
 +
left: 0;
 +
top: 35px;
 +
background: #2D48FA;
 +
margin: 0;
 +
padding: 0;
 +
display: none;
 +
float: left;
 +
border: 1px solid #111;
 +
border-radius: 0 0 5px 5px;
 +
}
 +
 
 +
ul.topnav li ul.subnav li
 +
{
 +
margin: 0; padding: 0;
 +
border-top: 1px solid #252525; /*--Create bevel effect--*/
 +
border-bottom: 1px solid #444; /*--Create bevel effect--*/
 +
clear: both;
 +
list-style: none outside none;
 +
}
 +
 
 +
ul.topnav li ul.subnav, ul.topnav li ul.subnav li
 +
{
 +
width: 160px;
 +
}
 +
 
 +
ul.topnav li ul.subnav li:last-child
 +
{
 +
border-radius: 0 0 5px 5px;
 +
}
 +
 
 +
html ul.topnav li ul.subnav li a {
 +
float: left;
 +
/*background: #333 url(https://static.igem.org/mediawiki/2011/4/4b/Dropdown_linkbg.gif) no-repeat 10px center;*/
 +
    padding-left: 10px;
 +
    padding-right: 10px;
 +
    width: 140px;
 +
}
 +
 
 +
html ul.topnav li ul.subnav li a:last-child
 +
{
 +
        border-radius: 0 0 5px 5px;
 +
}
 +
html ul.topnav li ul.subnav li a:hover
 +
{ /*--Hover effect for subnav links--*/
 +
background: #181173 /*url(https://static.igem.org/mediawiki/2011/4/4b/Dropdown_linkbg.gif) no-repeat 10px center*/;
 +
}
 +
 
 +
 
 +
/* Redesigning Table Of Content */
 +
/********************************/
 +
/*
 +
table.toc, #toctitle, .toc #toctitle, #toc .toctitle, .toc .toctitle
 +
{
 +
    text-align: left;
 +
}
 +
 
 +
#toctitle
 +
{
 +
    margin: 5px 0;
 +
}
 +
 
 +
.toc, #toc {
 +
    background-color: #F6F6F6;
 +
    border: 1px solid #CCCCCC;
 +
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15);
 +
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15); /* for the Safari browser
 +
    float: left;
 +
    width: 228px;
 +
    display: block;
 +
    overflow: hidden;
 +
    padding: 0;
 +
}
 +
   
 +
#toc ul, .toc ul
 +
{
 +
    margin: 0 5px 5px 5px;
 +
}
 +
 
 +
.toc ul li  
 +
{
 +
    padding-left: 12px;
 +
    text-indent: -12px;
 +
    /*width: 200px;
 +
}
 +
 
 +
.toc ul li ul li
 +
{
 +
    padding-left: 30px;
 +
    text-indent: -24px;
 +
    /*width: 170px;
 +
}
 +
 
 +
#toc ul ul, .toc ul ul
 +
{
 +
    margin: 0;
 +
}
 +
.toc
 +
{
 +
    margin-left: -250px;
 +
    margin-top: 20px;
 +
}
 +
 
 +
.stickBelowNavigation
 +
{
 +
    position: fixed;
 +
      top: 35px;
 +
      left: 50%;
 +
    margin-left: -462px;
 +
}
 +
 
 +
.tochidden
 +
{
 +
    position: static;
 +
    margin-left: -250px;
 +
}
 +
*/
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
-
</html>
 
 +
/*
 +
*
 +
*
 +
* Pied de page
 +
*
 +
*
 +
* 
 +
*/
 +
#footer-panel {
 +
    background: #000000
 +
    border-top: 1px solid #D9D9D9;}
-
<!--
+
#footer-panel h4 {
-
<div class="blocbackground">
+
    color: #999999;
-
+
    font-weight: bold;}
-
<h2> Abstract</h2>
+
#footer-panel p {
-
+
    color: #CCCCCC;}
-
<p>
+
div.footerBox {
-
Only ranges of pollutant concentration have been measured in the iGEM competition until now. Our goal is to create a simple and accurate, ready-to-use bioquantifier for heavy metals. Simple enough for an easy visual checking and a routine use in the labs. Our system is inspired from Gardner's work on toggle switch biosystem and from former iGem teams' works on quorum sensing communication.
+
    border-right: 1px solid;
-
</p>
+
    float: left;
-
<p>
+
    margin: 10px 20px 10px 0;
-
Our purpose is to add a pollutant to a device containing a bacterial layer on an engineered medium. This engineered medium is an IPTG gradient.Add of that pollutant to our system induces a geographical division of the plate into two areas : one where the IPTG concentration prevails, and the other where the pollutant concentration prevails. Toggle switch is a biological network which allows to lock our biosystem in a specific state. We use it here in association with complementary quorum sensing genes : A sender and a receiver. Thus, at the interface between both, the reception of quorum sensing molecules by the receptors will induce the coloration of the bacteria. Finally we will obtain a colored line from which we can get the unknown concentration of pollutant.
+
    padding: 0 20px 0 0;
-
</p>
+
    width: 294px;
-
<p>
+
    min-height: 270px;}
-
Up to now the quantification of heavy metals requires complex physical and chemical protocols. We propose a new way of quantifying heavy metals, much easier than these ones. A first step to a pure water for everyone!
+
div.footerBox:last-child {
-
</p>
+
    border: none;
-
+
    margin: 10px 0;
-
</div>
+
    padding: 0;}
-
-->
+
img.sponsorImage{
 +
    float: left;
 +
    width: 84px;
 +
    padding: 0;
 +
    margin: 0;
 +
    border: 0px solid #444444;}
 +
img.hasPicOnRight {
 +
    padding-right: 10px;
 +
    border-right-width: 1px;}
 +
img.hasPicOnLeft {
 +
    padding-left: 10px;}
 +
img.hasPicOnTop {
 +
    margin-top: 20px;
 +
}

Revision as of 18:45, 23 October 2011

/* Enlever l'entête et le pied de page wiki, ainsi que les bords: (ce code garde les liens pour éditer le wiki)

  • /
  1. contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo

{ 

   display:none;

}

  1. top-section

{ 

   border: none;
   height: 0px;

}

  1. content

{ 

   border: none;

}

/* Coloration du menu en bleu, fond blanc ou transparent ? en tout cas menu invisible sauf si on passe dessus avec la souris

  • /

.left-menu:hover { 

   background-color: transparent;

}

  1. menubar:hover

{ 

   color: #0F174D;

}

  1. menubar li a

{ 

   background-color: transparent;
   color: transparent;

}

  1. menubar:hover li a

{ 

   color: #0F174D;

}

/* Enlever le "teams" de la bare wiki qui sert à rien, enlève également le Deconnexion

  • /
  1. menubar > ul > li:last-child

{ 

   display: none;

}


/* Mise en page, en-tête, couleur de fond, bannière, etc...

  • /

body,#content { /* 

   background: #ADD1FF;
  • / 
   background: #002657;

/* 

   background: #FFFFFF;
  • /

/* background: url("http://www.downloadfreebackgrounds.net/backgrounds/ice-mountains-canada-background.jpg");

  • /

}

  1. header

{ 

   background: url("Banderolle_wiki.png") no-repeat #ADD1FF;
   height: 160px;
   margin-left: 68px;
   margin-top: -24px;
   width: 829px;
   border: 1px solid #477CBF;
   
   -webkit-box-shadow: #666666 0px 2px 3px;

-moz-box-shadow: #666666 0px 2px 3px;

-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }

/*

  1. innercontent { 
   padding: 1px;} Important!
  • /


/* 

* 
* 
* 	Diaporama
* 
* 
*
  • /

.position_diapo { position: relative; overflow :hidden; 

   margin-top: 14px;
   width: 963px;
   height: 370px;
   
   border: 1px solid #477CBF;
   
   -webkit-box-shadow: #666666 0px 2px 3px;

-moz-box-shadow: #666666 0px 2px 3px;

-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;

background: #FFFFFF; }

.style_diapo .items { /* this cannot be too large */ width: 50000px; position: absolute; }

.items div { float: left; width: 963px; height: 370px; }

.prev { background: url(DTU-Denmark2011-slider-prev.png) no-repeat; height: 74px; width: 74px; float:left; left:-12px; position: relative; margin-top: 148px ; cursor: pointer; }

.next { background: url(DTU-Denmark2011-slider-next.png) no-repeat; height: 74px; width: 74px; float:right; right:-12px; position: relative; margin-top: 148px ; cursor: pointer; }

.disabled { visibility: hidden; }

/* position and dimensions of the navigator */ .navi { 

   left: -56px;
   margin-left: 50%;
   position: relative;
   width: 112px;

}

.navi a { width: 8px; height: 8px; float: left; margin: 3px; background: url(DTU-Denmark2011-slider-navigator-red.png) 0 0 no-repeat; /*background: url(DTU-Denmark2011-slider-navigator-dark.png) 0 0 no-repeat;*/ display: block; font-size: 1px; }

.navi a:hover { background-position: 0 -8px; }

.navi a.active { background-position: 0 -16px; }






/* 

* 
* 
* 	Barre de menu qui suit la fenêtre 
* 
* 
*
  • /

.centering { 

   margin: 0 auto;
   width: 965px;

}


ul.topnav > li > a:hover { background: url(Topnav_hover.gif) no-repeat center -1px; padding-bottom: 1px; border-bottom-width: 5px;}

.navigation { height: 40px; margin-top: 10px; border: 1px solid #477CBF; 

   -webkit-box-shadow: #666666 0px 2px 3px;

-moz-box-shadow: #666666 0px 2px 3px;

-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;

background: url("Menu_blue.png") repeat-x scroll 0 -1px #222222; 

   z-index: 1;
   position: relative;

}


.stickToTop { 

   position: fixed;
   top:0;
   width:100%;

}

ul.topnav ul li a { text-align: center; color: #FFFFFF; }

ul.topnav { list-style: none; padding: 0; margin: 0; float: left; width: 100%; font-size: 15px; }

ul.topnav li { float: left; margin: 0; padding: 0; position: relative; /*--Declare X and Y axis base for sub navigation--*/ } ul.topnav li a {

padding: 5px 20px 5px 20px; display: block; text-decoration: none; float: left; } ul.topnav > li > a { 

   height: 25px;
   overflow: hidden;

}

ul.topnav li:first-child a { padding-left: 0; }

/* ul.topnav li span { /*--Drop down trigger styles--*/ /*width: 17px;*/ /*height: 34px;*/ /*float: left;*/ /*background: url(Subnav_btn.gif) no-repeat center top;*/ /* 

       color: #0000FF;

}

  • /


ul.topnav li span.subhover { background-position: center bottom; cursor: pointer; } /*--Hover effect for trigger--*/

ul.topnav li ul.subnav { 

   z-index: 1; /*Stay on top of slider*/

list-style: none; position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/ left: 0; top: 35px; background: #2D48FA; margin: 0; padding: 0; display: none; float: left; border: 1px solid #111; border-radius: 0 0 5px 5px; }

ul.topnav li ul.subnav li { margin: 0; padding: 0; border-top: 1px solid #252525; /*--Create bevel effect--*/ border-bottom: 1px solid #444; /*--Create bevel effect--*/ clear: both; list-style: none outside none; }

ul.topnav li ul.subnav, ul.topnav li ul.subnav li { width: 160px; }

ul.topnav li ul.subnav li:last-child { border-radius: 0 0 5px 5px; }

html ul.topnav li ul.subnav li a { float: left; /*background: #333 url(Dropdown_linkbg.gif) no-repeat 10px center;*/ 

   padding-left: 10px;
   padding-right: 10px;
   width: 140px;

}

html ul.topnav li ul.subnav li a:last-child { 

       border-radius: 0 0 5px 5px;

} html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/ background: #181173 /*url(Dropdown_linkbg.gif) no-repeat 10px center*/; }


/* Redesigning Table Of Content */ /********************************/ /* table.toc, #toctitle, .toc #toctitle, #toc .toctitle, .toc .toctitle { 

   text-align: left;

}

  1. toctitle

{ 

   margin: 5px 0;

}

.toc, #toc { 

   background-color: #F6F6F6;
   border: 1px solid #CCCCCC;
   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15);
   -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15); /* for the Safari browser
   float: left;
   width: 228px;
   display: block;
   overflow: hidden;
   padding: 0;

}

  1. toc ul, .toc ul

{ 

   margin: 0 5px 5px 5px;

}

.toc ul li { 

   padding-left: 12px;
   text-indent: -12px;
   /*width: 200px;

}

.toc ul li ul li { 

   padding-left: 30px;
   text-indent: -24px;
   /*width: 170px;

}

  1. toc ul ul, .toc ul ul

{ 

   margin: 0;

} .toc { 

   margin-left: -250px;
   margin-top: 20px;

}

.stickBelowNavigation { 

   position: fixed;
      top: 35px;
      left: 50%;
   margin-left: -462px;

}

.tochidden { 

   position: static;
   margin-left: -250px;

}

  • /








/* 

* 
* 
* 	Pied de page
* 
* 
*
  • /
  1. footer-panel { 
   background: #000000
   border-top: 1px solid #D9D9D9;}
  1. footer-panel h4 { 
   color: #999999;
   font-weight: bold;}
  1. footer-panel p { 
   color: #CCCCCC;}

div.footerBox { 

   border-right: 1px solid;
   float: left;
   margin: 10px 20px 10px 0;
   padding: 0 20px 0 0;
   width: 294px;
   min-height: 270px;}

div.footerBox:last-child { 

   border: none;
   margin: 10px 0;
   padding: 0;}

img.sponsorImage{ 

   float: left;
   width: 84px;
   padding: 0;
   margin: 0;
   border: 0px solid #444444;}

img.hasPicOnRight { 

   padding-right: 10px;
   border-right-width: 1px;}

img.hasPicOnLeft { 

   padding-left: 10px;}

img.hasPicOnTop { 

   margin-top: 20px;

}

Retrieved from "http://2011.igem.org/Team:Grenoble/Projet/Intro"