Team:Grenoble/Projet/Intro

From 2011.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{:Team:Grenoble/Templates/Current}}
+
/* I <3 Paris */
 +
#globalWrapper {/* le wiki */
 +
    background-color: #ffffff;
 +
    -bottom:0px;
 +
}
-
<!--
+
#top-section{/* la barre titre (baniere igem+ menu haut)*/
-
{{:Team:Grenoble/Templates/Team:Grenoble_Rawhide}}
+
    height: auto;
-
-->
+
    margin-top: 0 px;
 +
    margin-left: 0 px;
 +
    margin-right: auto;
 +
    margin-bottom: 0 ;
 +
   
 +
    border: none;
 +
    display: display;
 +
}
-
<html>
+
#p-logo{/*le conteneur de la banière igem avec un lien vers igem*/
 +
    display:none;
 +
    border:none;
 +
    margin:none;
 +
}
-
<div class="left">
+
#menubar a{/*les lien de la barre de menu du haut */
 +
    margin:5px 5px 0 0;
 +
    text-decoration:none;
 +
    color:#FFFFFF;
 +
}
 +
 
 +
.legend{
 +
 
 +
font:normal 12px Arial, Helvetica, sans-serif;
-
<div class="body">
+
font-style:italic;
 +
 
 +
color:#0F174D;
-
<h1>The Project, Mercuro-Coli</h1>
+
text-align: center;
-
+
-
<div class="blocbackground">
+
-
+
-
<h2>Introduction :</h2>
+
-
+
-
<p>
+
-
With industries growth, wastes are accumulating and presence of pollutant and toxic products is becoming an international concern.
+
-
</p>
+
-
<p>
+
-
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 :
+
-
</p>
+
-
<a href="https://static.igem.org/mediawiki/2011/5/58/Dispositif.png"><img src="https://static.igem.org/mediawiki/2011/5/58/Dispositif.png" class="centerwide"/></a>
+
-
+
-
<ul>
+
-
<li>deally, 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>
+
-
<li>Comparative measure :</li>
+
-
</ul>
+
-
<table class="nobordure">
+
-
<tr>
+
-
<td><a href="https://static.igem.org/mediawiki/2011/8/8d/Toggle3.png"><img src="https://static.igem.org/mediawiki/2011/8/8d/Toggle3.png" alt="" title="" width="400"></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 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>
+
-
</div>
+
-
+
-
</div>
+
-
+
-
</div>
+
-
</html>
+
}
 +
body {
 +
margin:0;
 +
 +
padding:0;
 +
 +
width:100%;
 +
 +
 +
 +
}
 +
 +
html {
 +
 +
padding:0;
 +
 +
margin:0;
 +
 +
}
 +
 +
 +
 +
/* utilisé dans la banière */
 +
img.blabla  {
 +
 +
width:100%;
 +
 +
height:auto;
 +
 +
}
 +
 +
 +
h1 {
 +
 +
margin:0;
 +
 +
padding:30px 0 30px 32px;
 +
 +
color:#9c9c9c;
 +
 +
font:bold 45px/1.1em Arial, Helvetica, sans-serif;
 +
 +
text-transform:uppercase;
 +
 +
letter-spacing:-3px;
 +
 +
background:#000000 url(http://farm4.static.flickr.com/3067/3084131521_36c059f6f0_b.jpg) no-repeat top left;
 +
 +
}
 +
 +
h1 a, h1 a:hover {
 +
 +
color:#9c9c9c;
 +
 +
text-decoration:none;
 +
 +
}
 +
 +
h1 span {
 +
 +
font-weight:bold;
 +
 +
/*
 +
color:#8fc400; vert ici, bleu en dessous
 +
*/
 +
 +
color:#2F48EE;
 +
}
 +
 +
/* in tartiflette we trust */
 +
h1 small {
 +
 +
font:normal 13px/1.2em Arial, Helvetica, sans-serif;
 +
 +
color:#888;
 +
 +
letter-spacing:normal;
 +
 +
}
 +
 +
 +
/* ---------------------- Dolphin nav ---------------------- */
 +
#dolphincontainer{
 +
    position:relative;
 +
    height:70px;
 +
    color:#000000;
 +
    background:#F4F6FD;
 +
    width:100%;
 +
    font-family:Helvetica,Arial,Verdana,sans-serif;
 +
}
 +
 +
#dolphinnav{
 +
    position:relative;
 +
    height:33px;
 +
    font-size:12px;
 +
    text-transform:uppercase;
 +
    font-weight:bold;
 +
/*
 +
    background:#fff url(https://static.igem.org/mediawiki/2011/b/b7/Dolphin_bg.png) repeat-x bottom left;
 +
*/
 +
    background:#fff url(https://static.igem.org/mediawiki/2011/a/a4/Dolphin_bg_blue.png) repeat-x bottom left;
 +
   
 +
    padding:0 0 0 3px;
 +
   
 +
}
 +
   
 +
#dolphinnav ul{
 +
    margin:0;
 +
    padding:0;
 +
    list-style:none;
 +
    width:auto;
 +
    float:left;
 +
   
 +
}
 +
 +
#dolphinnav ul li{
 +
    display:block;
 +
    float:left;
 +
    margin:0 1px;
 +
   
 +
}
 +
 +
#dolphinnav ul li a{
 +
    display:block;
 +
    float:left;
 +
    color:#EAECF8;
 +
    text-decoration:none;
 +
    /*padding:12px 20px 0 20px;*/
 +
    height:33px;
 +
   
 +
}
 +
 +
#dolphinnav .scriptina{
 +
 +
    font-family:vivaldi,scriptina, Helvetica,Arial,Verdana,sans-serif;
 +
}
 +
 +
#dolphinnav ul li li a{
 +
color:#5F5F5F;
 +
}
 +
 +
#dolphinnav ul li a.level1{
 +
 
 +
    padding:12px 20px 0 20px;
 +
   
 +
}
 +
 +
#dolphinnav ul li.sfhover ul li a.level2{
 +
   
 +
   
 +
color:#5F5F5F;
 +
    margin: 5px 5px 15px 5px;
 +
    font-size:16px;
 +
 +
}
 +
 +
#dolphinnav ul li.sfhover ul li a.level2:hover{
 +
   
 +
color:#8F8F8F;
 +
/*
 +
font-size:18px;
 +
*/
 +
font-size:16px;
 +
 +
 +
}
 +
 +
#dolphinnav ul li ul{
 +
    position: absolute;
 +
    left: -999em;
 +
}
 +
 +
#dolphinnav ul li.sfhover a.level1{
 +
    color:#5F5F5F;
 +
    padding:0 20px 0 20px;
 +
    background: #EEF0FC;
 +
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEF0FC), to(#F4F6FD));
 +
background: -webkit-linear-gradient(#F4F6FD, #F4F6FD);
 +
background: -moz-linear-gradient(#F4F6FD, #F4F6FD);
 +
background: -ms-linear-gradient(#F4F6FD, #F4F6FD);
 +
background: -o-linear-gradient(#F4F6FD, #F4F6FD);
 +
background: linear-gradient(#F4F6FD, #F4F6FD);
 +
 +
 +
/*
 +
    border: 1px solid #696;
 +
*/
 +
    border: 1px solid #525D9E;
 +
    border-bottom: none;
 +
 +
 +
    -moz-box-shadow: -2px -2px 2px #888;
 +
    -webkit-box-shadow: -2px -2px 2px #888;
 +
    box-shadow: -2px -2px 2px #888;
 +
 +
-webkit-border-radius: 5px 5px 0 0 ;
 +
-moz-border-radius: 5px 5px 0 0 ;
 +
border-radius: 5px 5px 0 0 ;
 +
 +
    line-height:275%;
 +
}
 +
 +
 +
 +
#dolphinnav ul li.sfhover ul{
 +
 +
        left: 0;
 +
        min-height: 0;
 +
height: 23px;
 +
background: #F4F6FD;
 +
color:#5F5F5F;
 +
margin: 43px 0 0 0 ;
 +
overflow: hidden;
 +
 +
}
 +
 +
 +
 +
/* ---------------------- END Dolphin nav ---------------------- */
 +
/*en cas d'emmerde avec image flottante*/
 +
.clearboth {
 +
clear:both;
 +
}
 +
 +
.body {
 +
 +
margin:0;
 +
 +
padding:0;
 +
 +
}
 +
 +
 +
.blocbackground {
 +
 
 +
border: 1px solid #666D99;
 +
 +
 +
margin: 5px 0 20px 0;
 +
padding: 0 0 20px 5px;
 +
 +
-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: #EEF0FC;
 +
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEF0FC), to(#FFFFFF));
 +
background: -webkit-linear-gradient(#EEF0FC, #FFFFFF);
 +
background: -moz-linear-gradient(#EEF0FC, #FFFFFF);
 +
background: -ms-linear-gradient(#EEF0FC, #FFFFFF);
 +
background: -o-linear-gradient(#EEF0FC, #FFFFFF);
 +
background: linear-gradient(#EEF0FC, #FFFFFF);
 +
 +
}
 +
 +
/*
 +
.blocbackground img {
 +
width="610"
 +
 +
J'ai mesuré sur une capture d'écran une largeure de 626 pixels pour le blocbackground, donc on peut mettre un peu plus
 +
 +
}
 +
*/
 +
 +
.body h1 {
 +
 +
font:bold 34px Arial, Helvetica, sans-serif;
 +
 +
color:#060D58;
 +
 +
padding:10px 5px;
 +
 +
margin:5px 2px 12px 0;
 +
 +
background : none;
 +
 +
}
 +
 +
.body h2 {
 +
 +
font:bold 24px Arial, Helvetica, sans-serif;
 +
 +
color:#323a3f;
 +
 +
padding:10px 5px;
 +
 +
margin:5px 2px 12px 0;
 +
 +
}
 +
 +
.body h2 span {
 +
 +
float:right;
 +
 +
color:#959595;
 +
 +
font:normal 12px Arial, Helvetica, sans-serif;
 +
 +
}
 +
 +
.body h3 {
 +
 +
font:bold 24px Arial, Helvetica, sans-serif;
 +
 +
color:#323a3f;
 +
 +
padding:10px 5px;
 +
 +
margin:5px 0 10px 0;
 +
 +
}
 +
 +
.body h3 span.vert{
 +
 +
color:#2038D8;
 +
 +
text-decoration:none;
 +
 +
}
 +
 +
 +
 +
.body p{
 +
 +
font:normal 13px Arial, Helvetica, sans-serif;
 +
 +
color:#0F174D;
 +
 +
padding:5px 15px;
 +
 +
margin:0px 5px;
 +
 +
line-height:1.8em;
 +
 +
text-indent: 30px;
 +
 +
text-align: justify;
 +
 +
}
 +
 +
.noindent p{
 +
 +
text-indent: 0px;
 +
}
 +
 +
.body img.centerwidenoshadow {
 +
 +
        width:90%;
 +
 +
height:auto;
 +
 +
        /*margin:5px 10px 5px 10px;*/
 +
 +
padding:0;
 +
 +
 +
-webkit-border-radius: 8px;
 +
-moz-border-radius: 8px;
 +
border-radius: 8px;
 +
 +
 +
}
 +
 +
.body img.centerwide{
 +
 +
 +
        width:90%;
 +
 +
height:auto;
 +
 +
-webkit-border-radius: 8px;
 +
-moz-border-radius: 8px;
 +
border-radius: 8px;
 +
 +
-webkit-box-shadow: #666666 0px 2px 3px;
 +
-moz-box-shadow: #666666 0px 2px 3px;
 +
}
 +
 +
/*exemple: photo memnbre équipe, c'est un flottant, utiliser .clearboth en cas de besoin*/
 +
 +
.body img.icon {
 +
 
 +
 +
float:left;
 +
 +
margin: 8px 5px 2px 0;
 +
 +
width:80px;
 +
 +
height:auto;
 +
 +
border: 1px solid #666D99;
 +
 +
-webkit-border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
border-radius: 5px;
 +
 +
-webkit-box-shadow: #666 0px 2px 3px;
 +
-moz-box-shadow: #666 0px 2px 3px;
 +
 +
}
 +
/*
 +
pour renbdre flottant une image qui n'est pas flottante si elle n'est pas un icon car .body img luiu met le clearboth du coup elle est plus flottante*/
 +
 +
.body img.floated {
 +
 +
float:left;
 +
 +
margin:5px 10px 5px 0;
 +
 +
padding:0;
 +
 +
width:auto;
 +
 +
height:auto;
 +
 +
}
 +
 +
.body a {
 +
 +
color:#5060C9;
 +
 +
text-decoration:underline;
 +
 +
}
 +
 +
.body a.menu {
 +
 +
font:bold Arial, Helvetica, sans-serif;
 +
 +
margin-left:10px;
 +
 
 +
color:#060D58;
 +
 +
text-decoration:none;
 +
 +
}
 +
 +
.body a:hover {
 +
 +
color:#182AA3;
 +
 +
text-decoration:underline;
 +
 +
}
 +
 +
/*marge à vérif*/
 +
 +
.body h2.lien:hover{
 +
 +
background-color: #5769EA;
 +
 +
}
 +
 +
/*
 +
limite taille de l'intérieur de la page pour pas dépasser sur le menu/colonne de droite*/
 +
 +
.left {
 +
 +
float:left;
 +
 +
width:65%;
 +
 +
margin:10px 0px 10px 25px;
 +
 +
padding: 0 25px;
 +
 +
}
 +
 +
 +
.left ul {
 +
/*
 +
list-style-image: url("https://static.igem.org/mediawiki/2011/0/08/Igem_logo.png");
 +
*/
 +
 +
list-style-image: url("https://static.igem.org/mediawiki/2011/5/5f/Puce.png");
 +
 +
padding:0px 0px 0px 5px;
 +
 +
margin: 0px 0px 0px 10px;
 +
 +
clear:both;
 +
}
 +
 +
.left ul ul{
 +
list-style: circle;
 +
 +
clear:both;
 +
}
 +
 +
.left ul, .left li, .left dl, .left ol {
 +
font:normal 13px Arial, Helvetica, sans-serif;
 +
 +
color:#0F174D;
 +
 +
padding:3px;
 +
 +
line-height:1.8em;
 +
}
 +
 +
table {
 +
border: none;
 +
 +
border-collapse: collapse;
 +
 +
width: 615px;
 +
 +
font:normal 13px Arial, Helvetica, sans-serif;
 +
 +
color:#0F174D;
 +
 +
padding:3px;
 +
 +
line-height:1.8em;
 +
 +
}
 +
 +
th {
 +
font-family: monospace;
 +
 +
border: thin solid #6495ed;
 +
 +
padding: 5px;
 +
 +
background-color: #D0E3FA;
 +
 +
}
 +
 +
td {
 +
border: thin solid #6495ed;
 +
 +
padding: 5px;
 +
 +
text-align: center;
 +
 +
background-color: #ffffff;
 +
 +
}
 +
 +
table.nobordure td, table.nobordure th, table.nobordure
 +
{
 +
  border: none;
 +
/*
 +
  background-color: none;
 +
*/
 +
  background: none;
 +
}
 +
 +
/*
 +
width: alloue une certaine portion de la pge, un cadre possiblement rempli (calculé à partir de la gauche probablement du au float lefgt) les marges réduise l'occupation dans ce cadre*/
 +
 +
.right {
 +
 +
float:right;
 +
 +
width:20%;
 +
 +
margin:10px 10px 0 0;
 +
 +
padding:0 25px;
 +
 +
position:relative;
 +
 +
/*
 +
right:0;
 +
*/
 +
 +
z-index:2;
 +
 +
}
 +
 +
.right ul {
 +
 +
list-style:none;
 +
 +
margin:5px 0;
 +
 +
padding:5px 0px 5px 0px;
 +
 +
 +
 +
}
 +
 +
.right li {
 +
 +
background:10px 10px no-repeat;
 +
 +
font:normal 14px Arial, Helvetica, sans-serif;
 +
 +
color:#464646;
 +
 +
padding:5px 0;
 +
 +
margin:3px 0;
 +
 +
}
 +
 +
.right li a {
 +
 +
padding:0 0 0 5px;
 +
 +
margin:0;
 +
 +
font:bold 17px Arial, Helvetica, sans-serif;
 +
 +
color:#464646;
 +
 +
text-decoration:none;
 +
 +
}
 +
 +
.right li a:hover {
 +
 +
color:#001CD5;
 +
 +
}
 +
 +
.right ul ol li a{
 +
 +
padding:0 0 0 3px;
 +
 +
margin:0;
 +
 +
font: normal 13px Arial, Helvetica, sans-serif;
 +
 +
color:#38427D;
 +
 +
}
 +
 +
.right ul ol ol li a{
 +
 +
padding:0 0 0 3px;
 +
 +
margin:0;
 +
 +
font: normal 11px Arial, Helvetica, sans-serif;
 +
 +
color:#2A3996;
 +
 +
}
 +
 +
h3 .monthbook a{
 +
 +
text-decoration: none;
 +
 +
font:bold 24px Arial, Helvetica, sans-serif;
 +
 +
color:#0B1971;
 +
}
 +
h3 .monthbook a:hover{
 +
 +
color:#001CD5;
 +
 +
}
 +
/*
 +
Cadre du bas :
 +
*/
 +
 +
.bottom {
 +
 +
position:relative;
 +
 +
bottom:0;
 +
 +
z-index:1;
 +
 +
text-align:center;
 +
 +
float:center;
 +
 +
width:98%;
 +
 +
height:5%;
 +
margin:0px 15px 0 0px;
 +
padding:0 5px;
-
<!--
+
}
-
<div class="blocbackground">
+
-
+
-
<h2> Abstract</h2>
+
-
+
-
<p>
+
-
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.
+
-
</p>
+
-
<p>
+
-
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.
+
-
</p>
+
-
<p>
+
-
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!
+
-
</p>
+
-
+
-
</div>
+
-
-->
+

Revision as of 22:24, 21 September 2011

/* I <3 Paris */

  1. globalWrapper {/* le wiki */ 
    background-color: #ffffff;
   -bottom:0px;

}

  1. top-section{/* la barre titre (baniere igem+ menu haut)*/ 
   height: auto;
   margin-top: 0 px;
   margin-left: 0 px;
   margin-right: auto;
   margin-bottom: 0 ;
   
   border: none;
   display: display;

}

  1. p-logo{/*le conteneur de la banière igem avec un lien vers igem*/ 
   display:none;
   border:none;
   margin:none;

}

  1. menubar a{/*les lien de la barre de menu du haut */ 
   margin:5px 5px 0 0;
   text-decoration:none;
   color:#FFFFFF;

}

.legend{

font:normal 12px Arial, Helvetica, sans-serif;

font-style:italic;

color:#0F174D;

text-align: center;

}

body {

margin:0;

padding:0;

width:100%;


}

html {

padding:0;

margin:0;

}


/* utilisé dans la banière */ img.blabla {

width:100%;

height:auto;

} 


h1 {

margin:0;

padding:30px 0 30px 32px;

color:#9c9c9c;

font:bold 45px/1.1em Arial, Helvetica, sans-serif;

text-transform:uppercase;

letter-spacing:-3px;

background:#000000 url(http://farm4.static.flickr.com/3067/3084131521_36c059f6f0_b.jpg) no-repeat top left;

}

h1 a, h1 a:hover {

color:#9c9c9c;

text-decoration:none;

}

h1 span {

font-weight:bold;

/* color:#8fc400; vert ici, bleu en dessous

  • /

color:#2F48EE; }

/* in tartiflette we trust */ h1 small {

font:normal 13px/1.2em Arial, Helvetica, sans-serif;

color:#888;

letter-spacing:normal;

}


/* ---------------------- Dolphin nav ---------------------- */

  1. dolphincontainer{ 
   position:relative;
   height:70px;
   color:#000000;
   background:#F4F6FD;
   width:100%;
   font-family:Helvetica,Arial,Verdana,sans-serif;

}

  1. dolphinnav{ 
   position:relative;
   height:33px;
   font-size:12px;
   text-transform:uppercase;
   font-weight:bold;

/* 

   background:#fff url(Dolphin_bg.png) repeat-x bottom left;
  • / 
   background:#fff url(Dolphin_bg_blue.png) repeat-x bottom left;
   
   padding:0 0 0 3px;

}

  1. dolphinnav ul{ 
   margin:0;
   padding:0;
   list-style:none;
   width:auto;
   float:left;

}

  1. dolphinnav ul li{ 
   display:block;
   float:left;
   margin:0 1px;

}

  1. dolphinnav ul li a{ 
   display:block;
   float:left;
   color:#EAECF8;
   text-decoration:none;
   /*padding:12px 20px 0 20px;*/
   height:33px;

}

  1. dolphinnav .scriptina{ 
   font-family:vivaldi,scriptina, Helvetica,Arial,Verdana,sans-serif;

}

  1. dolphinnav ul li li a{

color:#5F5F5F; }

  1. dolphinnav ul li a.level1{ 
   padding:12px 20px 0 20px;

}

  1. dolphinnav ul li.sfhover ul li a.level2{


color:#5F5F5F; 

   margin: 5px 5px 15px 5px;
   font-size:16px;

}

  1. dolphinnav ul li.sfhover ul li a.level2:hover{

color:#8F8F8F; /* font-size:18px;

  • /

font-size:16px;


}

  1. dolphinnav ul li ul{ 
   position: absolute;
   left: -999em;

}

  1. dolphinnav ul li.sfhover a.level1{ 
   color:#5F5F5F;
   padding:0 20px 0 20px;
   background: #EEF0FC;

background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEF0FC), to(#F4F6FD)); background: -webkit-linear-gradient(#F4F6FD, #F4F6FD); background: -moz-linear-gradient(#F4F6FD, #F4F6FD); background: -ms-linear-gradient(#F4F6FD, #F4F6FD); background: -o-linear-gradient(#F4F6FD, #F4F6FD); background: linear-gradient(#F4F6FD, #F4F6FD);


/* 

   border: 1px solid #696;
  • / 
   border: 1px solid #525D9E;
   border-bottom: none;



    -moz-box-shadow: -2px -2px 2px #888;
    -webkit-box-shadow: -2px -2px 2px #888;
    box-shadow: -2px -2px 2px #888;

-webkit-border-radius: 5px 5px 0 0 ; -moz-border-radius: 5px 5px 0 0 ; border-radius: 5px 5px 0 0 ; 

   line-height:275%;

}


  1. dolphinnav ul li.sfhover ul{ 
       left: 0;
       min-height: 0;

height: 23px; background: #F4F6FD; color:#5F5F5F; margin: 43px 0 0 0 ; overflow: hidden;

}


/* ---------------------- END Dolphin nav ---------------------- */ /*en cas d'emmerde avec image flottante*/ .clearboth { clear:both; }

.body {

margin:0;

padding:0;

}


.blocbackground {

border: 1px solid #666D99;


margin: 5px 0 20px 0; padding: 0 0 20px 5px;

-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: #EEF0FC; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEF0FC), to(#FFFFFF)); background: -webkit-linear-gradient(#EEF0FC, #FFFFFF); background: -moz-linear-gradient(#EEF0FC, #FFFFFF); background: -ms-linear-gradient(#EEF0FC, #FFFFFF); background: -o-linear-gradient(#EEF0FC, #FFFFFF); background: linear-gradient(#EEF0FC, #FFFFFF);

}

/* .blocbackground img { width="610"

J'ai mesuré sur une capture d'écran une largeure de 626 pixels pour le blocbackground, donc on peut mettre un peu plus

}

  • /

.body h1 {

font:bold 34px Arial, Helvetica, sans-serif;

color:#060D58;

padding:10px 5px;

margin:5px 2px 12px 0;

background : none;

}

.body h2 {

font:bold 24px Arial, Helvetica, sans-serif;

color:#323a3f;

padding:10px 5px;

margin:5px 2px 12px 0;

}

.body h2 span {

float:right;

color:#959595;

font:normal 12px Arial, Helvetica, sans-serif;

}

.body h3 {

font:bold 24px Arial, Helvetica, sans-serif;

color:#323a3f;

padding:10px 5px;

margin:5px 0 10px 0;

}

.body h3 span.vert{

color:#2038D8;

text-decoration:none;

}


.body p{

font:normal 13px Arial, Helvetica, sans-serif;

color:#0F174D;

padding:5px 15px;

margin:0px 5px;

line-height:1.8em;

text-indent: 30px;

text-align: justify;

}

.noindent p{

text-indent: 0px; }

.body img.centerwidenoshadow { 

       width:90%;

height:auto; 

       /*margin:5px 10px 5px 10px;*/

padding:0;


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


}

.body img.centerwide{ 


       width:90%;

height:auto;

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

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

/*exemple: photo memnbre équipe, c'est un flottant, utiliser .clearboth en cas de besoin*/

.body img.icon {


float:left;

margin: 8px 5px 2px 0;

width:80px;

height:auto;

border: 1px solid #666D99;

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

-webkit-box-shadow: #666 0px 2px 3px; -moz-box-shadow: #666 0px 2px 3px;

} /* pour renbdre flottant une image qui n'est pas flottante si elle n'est pas un icon car .body img luiu met le clearboth du coup elle est plus flottante*/

.body img.floated {

float:left;

margin:5px 10px 5px 0;

padding:0;

width:auto;

height:auto;

}

.body a {

color:#5060C9;

text-decoration:underline;

}

.body a.menu {

font:bold Arial, Helvetica, sans-serif;

margin-left:10px;

color:#060D58;

text-decoration:none;

}

.body a:hover {

color:#182AA3;

text-decoration:underline;

}

/*marge à vérif*/

.body h2.lien:hover{

background-color: #5769EA;

}

/* limite taille de l'intérieur de la page pour pas dépasser sur le menu/colonne de droite*/

.left {

float:left;

width:65%;

margin:10px 0px 10px 25px;

padding: 0 25px;

}


.left ul { /* list-style-image: url("Igem_logo.png");

  • /

list-style-image: url("Puce.png");

padding:0px 0px 0px 5px;

margin: 0px 0px 0px 10px;

clear:both; }

.left ul ul{ list-style: circle;

clear:both; }

.left ul, .left li, .left dl, .left ol { font:normal 13px Arial, Helvetica, sans-serif;

color:#0F174D;

padding:3px;

line-height:1.8em; }

table { border: none;

border-collapse: collapse;

width: 615px;

font:normal 13px Arial, Helvetica, sans-serif;

color:#0F174D;

padding:3px;

line-height:1.8em;

}

th { font-family: monospace;

border: thin solid #6495ed;

padding: 5px;

background-color: #D0E3FA;

}

td { border: thin solid #6495ed;

padding: 5px;

text-align: center;

background-color: #ffffff;

}

table.nobordure td, table.nobordure th, table.nobordure { 

  border: none;

/* 

  background-color: none;
  • / 
  background: none;

}

/* width: alloue une certaine portion de la pge, un cadre possiblement rempli (calculé à partir de la gauche probablement du au float lefgt) les marges réduise l'occupation dans ce cadre*/

.right {

float:right;

width:20%;

margin:10px 10px 0 0;

padding:0 25px;

position:relative;

/* right:0;

  • /

z-index:2;

}

.right ul {

list-style:none;

margin:5px 0;

padding:5px 0px 5px 0px;


}

.right li {

background:10px 10px no-repeat;

font:normal 14px Arial, Helvetica, sans-serif;

color:#464646;

padding:5px 0;

margin:3px 0;

}

.right li a {

padding:0 0 0 5px;

margin:0;

font:bold 17px Arial, Helvetica, sans-serif;

color:#464646;

text-decoration:none;

}

.right li a:hover {

color:#001CD5;

}

.right ul ol li a{

padding:0 0 0 3px;

margin:0;

font: normal 13px Arial, Helvetica, sans-serif;

color:#38427D;

}

.right ul ol ol li a{

padding:0 0 0 3px;

margin:0;

font: normal 11px Arial, Helvetica, sans-serif;

color:#2A3996;

}

h3 .monthbook a{

text-decoration: none;

font:bold 24px Arial, Helvetica, sans-serif;

color:#0B1971; } h3 .monthbook a:hover{

color:#001CD5;

} /* Cadre du bas :

  • /

.bottom {

position:relative;

bottom:0;

z-index:1;

text-align:center;

float:center;

width:98%;

height:5%;

margin:0px 15px 0 0px;

padding:0 5px;

}

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