Difference between revisions of "Template:Toulouse"

Line 1: Line 1:
−
{{Toulouse}}
+
{{Template:Toulouse/fontsome}}
 +
{{Template:Toulouse/framework}}
 
<html>
 
<html>
−
<head>
+
<p></p>
−
<meta charset="utf-8">
+
<style>
−
<title>iGEM Toulouse 2015</title>
+
@charset "utf-8";
−
<link rel="icon" href="https://static.igem.org/mediawiki/2015/2/2e/TLSE_ApiColi.png" type="image/png" style="width:10%;"/>
+
#mainav li li a, #mainav li li .drop
 +
address, article, aside, figcaption, figure, footer, header, main, nav, section{display:block; margin:0; padding:0;}
 +
html, body{
 +
overflow-x: hidden;
 +
    overflow-y: scroll;
 +
}
 +
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo{
 +
    display:none;}
 +
#top-section {
 +
    border: none;
 +
    height: 0px;}
 +
#content {
 +
    border: none;
 +
    padding: 0px 0px 0px 0px;
 +
background-color:black;
 +
}
 +
#globalWrapper {
 +
    font-size: 78%;
 +
    position:absolute;
 +
}
  
−
</head>
+
#content {
−
<body id="top">
+
    width:100%;
−
<!-- ################################################################################################ -->
+
}
−
<!-- ################################################################################################ -->
+
−
<!-- ################################################################################################ -->
+
  
−
+
h1, h2, h3, h4, h5, h6 { border-bottom: 0px transparent;
−
</html>{{Toulouse/nav}}<html>
+
  
−
   
+
margin-bottom: none;
−
<div class="wrapper row2 bgded" style="background-image:url('https://static.igem.org/mediawiki/2015/0/03/TLSE_bakcground.png');">
+
  }
−
  <div id="pageintro">
+
h3 {color:#90A83E;}
−
    <!-- ################################################################################################ -->
+
@charset "utf-8";
−
    <div class="title">
+
/*
−
      <h2>Context</h2>
+
Template Name: Fertile
 +
Author: <a href="http://www.os-templates.com/">OS Templates</a>
 +
Author URI: http://www.os-templates.com/
 +
Licence: Free to use under our free template licence terms
 +
Licence URI: http://www.os-templates.com/template-terms
 +
File: Layout CSS
 +
*/
  
−
    </div>
+
@import url("fontawesome-4.2.0.min.css");
−
+
@import url("framework.css");
−
    <div id="breadcrumb" class="clear">
+
−
      <ul>
+
−
        <li><a href="#">foo</a></li>
+
−
        <li><a href="#">2-Collapse of Bees</a></li>
+
−
        <li><a href="#"><i>3-Varroa destructor</i></a></li>
+
−
        <li><a href="#">4-Outbreak of Varroa</a></li>
+
−
<li><a href="#">5-Means to fight Varroa</a></li>
+
−
      </ul>
+
−
    </div>
+
−
    <!-- ################################################################################################ -->
+
−
  </div>
+
−
</div>
+
−
<!-- ################################################################################################ -->
+
−
<!-- ################################################################################################ -->
+
−
<!-- ################################################################################################
+
−
<div class="wrapper row0 bgded" style="background-image:url('https://static.igem.org/mediawiki/2015/0/03/TLSE_bakcground.png')">
+
−
 
+
  
−
 
 
−
 
 
−
  <div class="shout">
 
−
   
 
−
    <div class="shout-content clear">
 
−
      <div class="title">
 
−
    <center> <h2>Context</h2> </center>
 
−
    </div>
 
−
  <center><img src="https://static.igem.org/mediawiki/2015/7/70/TLSE_context_BG.png"></center>
 
−
 
 
−
</div>
 
  
−
  </div>
+
/* Rows
−
 
+
---------------------------------------------------------------------------------------------------------------*/
−
+
.row0{border-bottom:1px solid; margin-top:5px;}
−
+
.row1, .row1 a{}
−
</div>
+
.row2, .row2 a{}
−
################################################################################################ -->
+
.row3, .row3 a{}
−
<!-- ################################################################################################ -->
+
.row4, .row4 a{}
−
<!-- ################################################################################################ -->
+
.row5, .row5 a{}
 +
.row6{border-top:1px solid;}
  
−
<div class="wrapper row3">
 
  
−
<br>
+
/* Header
−
  <main class="container clear">
+
---------------------------------------------------------------------------------------------------------------*/
−
 
+
#header{text-transform:uppercase; font-size:13px;}
−
+
#header *{margin:0;}
−
   
+
#header #logo{margin-top:-20px; margin-left:-10px; margin-top:15px;}
−
    <!-- container body -->
+
#header #logo h1{    text-transform:capitalize; font-variant:small-caps;}
−
    <!-- ################################################################################################ -->
+
#header #logo h1::first-letter{}
−
 
+
−
  <div>
+
−
 
+
−
<p class="title">  
+
  
−
</p>
 
−
</div>
 
  
−
<!--
+
/* Shout - Call To Action
−
<a href="#varroa" style="font-size:20px;">link1</a><br><br>
+
---------------------------------------------------------------------------------------------------------------*/
−
<a href="#varroa2" style="font-size:20px;">link2</a>
+
.shout{padding:650px 0 0 0; text-transform:uppercase;}
−
-->
+
.shout.inner{padding-top:100px;}
 +
.shout p{margin:0; padding:0;}
 +
.shout p:first-of-type{/*margin-top:10px;*/ text-transform:none;}
 +
.shout-content img{
 +
max-height:160px;
 +
}
 +
.shout .shout-content{padding:15px 30px; border-radius:50px 50px 5px 5px; font-size:1.2rem; margin:auto;}
 +
.row0 .shout .shout-content{padding:15px 30px; border-radius:50px 50px 5px 5px; font-size:1.2rem;margin-top:-250px;}
 +
/* Page Header
 +
--------------------------------------------------------------------------------------------------------------- */
 +
#pageintro{padding:180px 0 0 0;}
 +
#pageintro .title{margin:0 0 50px 0;}
 +
#pageintro .title :first-of-type{font-size:32px;}
  
−
    <div class="group center"> <!-- FIRST PARAGRAPH -->
 
−
        <p align="justify" style="font-size:15px;">
 
−
 
−
Bees excel in pollination and thus play an essential role in maintaining ecosystems.
 
−
By gathering pollen, they allow the reproduction of 84% of the plants that grow in Europe.
 
−
Bees are also responsible for the production of 35% of edible fruits and vegetables. Without
 
−
bees, tomatoes, apples, vines and many more would be as good as gone (see Figure 1 for some examples).
 
−
Among all bees, the domestic bee, <i>Apis mellifera</i>, which builds its swarm in hives provided
 
−
by man, is directly responsible for the production of honey, wax and propolis. Very often,
 
−
the swarms are selected for their honey production yield.
 
  
 +
/* Latest
 +
---------------------------------------------------------------------------------------------------------------*/
 +
.latest{display:block; width:100%; min-width:978px; max-width:2000px; margin:0 auto;}
 +
.latest *{margin:0; padding:0;}
 +
.latest ul, .latest ul li{border:solid; margin-bottom:15px;}
 +
.latest ul{border:solid; border-width:1px 0;}
 +
.latest ul li{display:block; float:left; width:20%; border-width:0 0 0 1px; box-sizing:border-box;}
 +
.latest ul li:first-child{border-left:none;}
 +
.latest ul li:first-child, .latest ul li:nth-child(5n+1){clear:left;}
 +
.latest ul li *{width:100%; box-sizing:border-box;}
  
−
</p>
 
−
      </div>
 
−
 
 
−
 
 
−
 
 
−
  <div class="group center">
 
−
<br>
 
−
  <img src="https://static.igem.org/mediawiki/2015/3/37/TLSE_context_fig1.png" />
 
−
</div>
 
−
<div class="group center">
 
−
<br>
 
−
<p>Figure 1: Examples of products dependent of bee pollination to reproduce</p>
 
−
</div>
 
−
 
−
 
−
<div class="group center"> <!-- FIRST PARAGRAPH -->
 
−
        <p align="justify" style="font-size:15px;">
 
−
According to the French INRA (Institut National de la Recherche Agronomique),
 
−
the bee extinction would represent an economical worldwide loss of 163 billion USD.
 
−
This huge number reflects the bees’ importance in the global ecosystem.
 
  
 +
/* Clients
 +
---------------------------------------------------------------------------------------------------------------*/
 +
.clients{padding:30px 0;}
 +
.clients *{margin:0; padding:0;}
 +
.clients ul li{display:block; float:left; width:20%; padding:0 15px; box-sizing:border-box;}
 +
.clients ul li:first-child, .clients ul li:nth-child(5n+1){clear:left;}
 +
.clients ul li *{width:100%; opacity:.5;}
 +
.clients ul li *:hover{opacity:1;}
  
  
−
</p>
+
/* Content Area
−
      </div>
+
---------------------------------------------------------------------------------------------------------------*/
−
 
+
.container{padding:80px 0;}
−
<div>
+
−
 
+
−
<div class="subtitle">  
+
−
<h3>Domestic bees</h3>
+
  
−
</div>
+
/* Content */
 +
.container #content{}
  
 +
.boxedicon{display:inline-block; width:70px; height:70px; line-height:70px; margin-bottom:50px; text-align:center;}
 +
.boxedicon a{display:block; width:100%; height:100%; border:2px solid;}
 +
.boxedicon a i{line-height:inherit;}
  
 +
.testimonial em{display:block; margin:0; padding:0; font-style:normal; font-size:.8rem;}
  
 +
/* Comments */
 +
#comments ul{margin:0 0 40px 0; padding:0; list-style:none;}
 +
#comments li{margin:0 0 10px 0; padding:15px;}
 +
#comments .avatar{float:right; margin:0 0 10px 10px; padding:3px; border:1px solid;}
 +
#comments address{font-weight:bold;}
 +
#comments time{font-size:smaller;}
 +
#comments .comcont{display:block; margin:0; padding:0;}
 +
#comments .comcont p{margin:10px 5px 10px 0; padding:0;}
  
−
<div class="group center">
+
/* Sidebar */
−
      <div class="one_half first">
+
.container .sidebar{}
−
  <p align="justify" style="font-size:15px;">
+
−
  <br>
+
−
    There are three types of bees
+
−
living in a beehive: the worker
+
−
bees, the queen bee and the male
+
−
bees. In the colony, the work is
+
−
divided in such a way that each
+
−
caste is specialized in its activities.
+
−
The worker bees are infertile female
+
−
and represent the most numerous caste
+
−
in the beehive. Their main activities are
+
−
cleaning the beehive cells, ventilate the
+
−
beehive, cap the beehive cells containing
+
−
the bee eggs, feed the larvae, gather pollen and defend the colony.
+
−
The queen bee ensures the renewal of
+
−
the bee colony.
+
−
The male bees represent the infertilized eggs.
+
−
Their main activity is the reproductive function with the queen bee outside of the beehive.
+
−
</p>  
+
−
      </div>
+
  
−
      <div class="one_half">
+
.sidebar .sdb_holder{margin-bottom:50px;}
−
     
+
.sidebar .sdb_holder:last-child{margin-bottom:0;}
−
<img src="https://static.igem.org/mediawiki/2015/2/28/TLSE_context_fig1bis.png">
+
−
<p>The Queen, a Worker and a male (coming soon)
+
−
</p>
+
−
+
−
          </div>
+
−
  </div>
+
−
+
−
+
−
+
  
  
 +
/* Footer
 +
---------------------------------------------------------------------------------------------------------------*/
 +
#footer{padding:0 0 80px 0; color:white;}
  
−
+
#footer .shout{margin:0 0 80px 0; padding:0;}
−
 
+
#footer .shout .shout-content{border-radius:0 0 50px 50px;}
−
<div class="subtitle">  
+
−
<h3>Collapse of Bees</h3>
+
−
</div>
+
  
 +
#footer .title{margin:0 0 30px 0; padding:0 0 8px 0; border-bottom:1px solid; font-size:16px; text-transform:uppercase;}
  
 +
#footer .linklist li {margin-bottom:10px;}
 +
#footer .linklist li:last-child{margin-bottom:0;}
 +
#footer .linklist li a{color:white;/*font-size: 12px*/}
  
 +
#footer .smallfont{font-size:.8em; margin:0;}
  
−
<div class="group center">
+
#footer input, #footer button{border:none; border-radius:5px;}
−
      <div class="one_half first">
+
#footer input{display:block; width:100%; padding:8px;}
−
<img src="https://static.igem.org/mediawiki/2015/1/14/TLSE_context_fig1bis2.png" style="width:60%;">  
+
#footer button{padding:6px 12px; font-weight:bold; text-transform:uppercase; cursor:pointer;}
−
      </div>
+
  
−
      <div class="one_half">
 
−
<p align="justify" style="font-size:15px;">
 
−
  <br>
 
−
Over the last few decades, a decline in the honeybee population has been observed. In Europe 24%
 
−
of the domestic bee species are threatened of extinction. The more indicators you consider, the
 
−
more alarming appears the situation. The bee loss has a multifactorial origin. Among these factors,
 
−
the <b>Colony Collapse Disorder</b> (CCD) is one of the most important. CCD corresponds to a massive loss
 
−
of bee colonies. The causes of this syndrome are numerous: pesticides, viruses, parasites… among those,
 
−
a mite wisely named <i id="varroa">Varroa destructor</i> is one of the bee’s fiercest enemies.
 
−
</p>
 
−
          </div>
 
−
  </div>
 
−
<div class="subtitle">  
 
−
<h3><i>Varroa destructor</i></h3>
 
−
</div>
 
−
  <div class="group center"> <!-- FIRST PARAGRAPH -->
 
−
        <p align="justify" style="font-size:15px;">
 
−
 
−
<i>Varroa destructor</i> is an obligatory ectoparasite
 
−
of bees. This means it is an external parasite
 
−
and it cannot survive without its host, the bee.
 
−
The varroa development cycle takes place in the
 
−
beehive cells in parallel of the bee development
 
−
cycle. The key individual of the varroa development
 
−
cycle is the adult female commonly named “founder”.
 
−
The founder reproduces exclusively in a brood cell
 
−
that represents the beehive cell containing a bee
 
−
larva. The founder reproduction occurs during the
 
−
phoretic phase where the varroa is moved from one
 
−
bee colony to the other by an adult bee.
 
  
−
</p>
 
−
      </div>
 
−
 
 
−
 
 
−
 
 
−
  <div class="group center">
 
−
<br>
 
−
  <img src="https://static.igem.org/mediawiki/2015/f/f2/TLSE_context_fig2.png" style="width:85%;height:55%;" />
 
−
</div>
 
−
<div class="group center">
 
−
<br>
 
−
<p>Figure 2: Synchronized life cycle of Honeybees and <i>Varroa destructor</i>.</p>
 
−
</div>
 
−
 
 
−
<div class="group center"> <!-- FIRST PARAGRAPH -->
 
−
        <p align="justify" style="font-size:15px;">
 
−
 
−
The mite varroa is originally an ectoparasite of Apis cerana, the Asian honey bee.
 
−
The first contact between varroa and Apis mellifera occurred in the 1950s in Asia.
 
−
During the following years, the infestation spread to Europe, Africa and America.
 
−
The first signs of this infestation were observed in Europe and North America in
 
−
the early 1980s.
 
−
The varroa mite is a particularly virulent parasite of Apis mellifera since the
 
−
European honeybee did not have time to develop an adaptive response to it. In
 
−
Asia on the contrary, Apis cerana and Varroa destructor co-evolved over the
 
−
centuries and reached a certain balance. Interestingly, the Asian honeybee is
 
−
capable of detecting the parasite’s presence and of getting rid of it.
 
  
−
</p>
+
/* Copyright
−
      </div>
+
---------------------------------------------------------------------------------------------------------------*/
−
 
+
#copyright{padding:30px 0;}
−
    <div class="group center">
+
#copyright p{margin:0; padding:0;}
−
<br>
+
−
  <img src="https://static.igem.org/mediawiki/2015/6/6b/TLSE_context_fig3.png" style="width:75%;height:55%;" />
+
−
</div>
+
−
<div class="group center">
+
−
<br>
+
−
<p>Figure 3: Effects exerted by Varroa destructor on honeybee and their consequences.
+
−
</p>
+
−
</div>
+
−
+
−
<div class="subtitle">  
+
−
<h3>Outbreak of <i>Varroa destructor</i> in the Western World</h3>
+
−
</div>
+
  
−
<div class="group center">
 
−
<div class="one_half first">
 
−
<p align="justify" style="font-size:15px;">
 
−
 
−
The mite varroa is originally an ectoparasite
 
−
of Apis cerana, the Asian honey bee. The first
 
−
contact between varroa and Apis mellifera
 
−
occurred in the 1950s in Asia. During the
 
−
following years, the infestation spread to
 
−
Europe, Africa and America. The first signs
 
−
of this infestation were observed in Europe
 
−
and North America in the early 1980s.
 
−
The varroa mite is a particularly virulent
 
−
parasite of Apis mellifera since the European
 
−
honeybee did not have time to develop an adaptive
 
−
response to it. In Asia on the contrary, Apis cerana
 
−
and Varroa destructor co-evolved over the centuries
 
−
and reached a certain balance. Interestingly, the Asian
 
−
honeybee is capable of detecting the parasite’s presence
 
−
and of getting rid of it.
 
  
 +
/* Back to Top
 +
---------------------------------------------------------------------------------------------------------------*/
  
−
</p>
 
−
</div>
 
  
−
<div class="one_half">
+
/* Transition Fade
 +
--------------------------------------------------------------------------------------------------------------- */
 +
.row0, .faico a, #mainav *, .shout-content, .overlay ::before, .overlay ::after, .boxedicon a, .clients ul li *, }
  
−
<img src="https://static.igem.org/mediawiki/2015/a/a6/TLSE_context_fig3bis.png" style="width:50%;">
 
−
</div>
 
−
</div>
 
  
−
<div class="subtitle">  
+
/*-------------------------------------------------------------------------------------------------------------*/
−
<h3>Means to fight <i>Varroa destructor</i></h3>
+
/*-------------------------------------------------------------------------------------------------------------*/
−
</div>
+
/*-------------------------------------------------------------------------------------------------------------*/
 +
/*-------------------------------------------------------------------------------------------------------------*/
 +
/*-------------------------------------------------------------------------------------------------------------*/
  
−
<div class="group center">
 
−
<table class="df">
 
−
<tr>
 
−
    <td>
 
−
<p align="justify" style="font-size:15px;">  
 
−
Search of tolerant or resistant bees through selection.
 
−
</p>
 
−
</td>
 
−
<td>
 
−
<p  align="justify" style="font-size:15px;">  
 
−
TODO commentary
 
−
</p>
 
−
</td>
 
−
</tr>
 
−
<tr>
 
−
    <td>
 
−
<p  align="justify" style="font-size:15px;">  
 
−
Those two types of methods are insufficient to totally eliminate varroas from a hive.
 
−
</p>
 
−
</td>
 
−
<td>
 
−
<p  align="justify" style="font-size:15px;">  
 
−
Those two types of methods are insufficient to totally eliminate varroas from a hive.
 
−
TODO commentary
 
−
</p>
 
−
</td>
 
−
</tr>
 
−
<tr>
 
−
    <td>
 
−
<p align="justify" style="font-size:15px;">  
 
−
Use of chemical treatments.
 
−
</p>
 
−
</td>
 
−
<td>
 
−
<p align="justify" style="font-size:15px;">
 
−
This last type is the most effective
 
−
however none of the treatments has
 
−
a 100% effectiveness and their use
 
−
is often limited since bees generate
 
−
consumable products.
 
−
</p>
 
−
</td>
 
−
</tr>
 
−
</table>
 
−
</div>
 
−
</div>
 
−
 
−
<!--
 
−
        <p align="justify" style="font-size:15px;">
 
−
<ul style="font-size:15px;">
 
−
<li>
 
−
Search of tolerant or resistant bees through selection.
 
−
</li>
 
−
<li>
 
−
Use of “zoo-technique” or “bio-technique” means.
 
−
</li>
 
−
<li>
 
−
Use of chemical treatments.
 
−
</li>
 
−
</ul>
 
  
−
This last type is the most effective however none of the treatments has a 100% effectiveness and their use is often limited since bees generate consumable products. The lack of effectiveness of those treatments (not to mention the resistance phenomena excepted) induces the presence in hives of enough Varroa to allow the population to grow beyond the dangerous threshold for a bee colony. And when  any other treatment is used (usually annual treatments), they only eliminate 90% of the varroa population, which is insufficient to maintain the epidemic at safe levels.
+
/* Navigation
 +
---------------------------------------------------------------------------------------------------------------*/
 +
nav ul, nav ol{margin:0; padding:0; list-style:none;}
  
 +
#mainav .drop::after, #mainav li li .drop::after, #breadcrumb li a::after, .sidebar nav a::after{position:absolute; font-family:"FontAwesome"; font-size:50px; line-height:10px;}
  
 +
/* Top Navigation */
 +
#mainav{margin-bottom:-1px; }
 +
#mainav ul{text-transform:uppercase;margin-top:-1px;}
 +
#mainav ul ul{z-index:9999; position:absolute; width:160px; text-align:left; text-transform:none;}
 +
#mainav ul ul ul{left:150px; top:0;}
 +
#mainav li{display:inline-block; position:relative; margin:0 10px 0 0; padding:0;}
 +
#mainav li:last-child{margin-right:0;}
 +
#mainav li li{width:100%; margin:0;}
 +
#mainav li a{display:block; padding:25px 10px;}
 +
#mainav li li a{border:solid; border-width:0 0 1px 0;font-size:12px;}
 +
#mainav .drop{padding-left:15px; margin-top:20px;}
 +
#mainav li li a, #mainav li li .drop{display:block; margin:0px; padding:10px 15px;}
 +
#mainav .drop::after, #mainav li li .drop::after{content:"";}
 +
#mainav .drop::after{top:30px; left:5px;}
 +
#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;}
  
−
</p>
+
/* Breadcrumb */
−
-->
+
#breadcrumb{display:block; padding:15px 20px; border-radius:5px 5px 0 0; text-transform:uppercase;}
−
      </div>
+
#breadcrumb ul{margin:0; padding:0; list-style:none;}
−
  </main>
+
#breadcrumb li{display:inline-block; margin:0 6px 0 0; padding:0;}
−
</div>
+
#breadcrumb li a{display:block; position:relative; margin:0; padding:0 12px 0 0; font-size:13px;color:black;}
−
<!-- ################################################################################################ -->
+
#breadcrumb li a::after{top:5px; right:0; content:"";}
−
<!-- ################################################################################################ -->
+
#breadcrumb li:last-child a{margin:0; padding:0;}
−
<!-- ################################################################################################ -->
+
#breadcrumb li:last-child a::after{display:none;}
  
−
<!-- ################################################################################################ -->
+
/* Sidebar Navigation */
−
<!-- ################################################################################################ -->
+
.sidebar nav{display:block; width:100%;}
−
<!-- ########################### SPONSORS ###################################################################### -->
+
.sidebar nav li{margin:0 0 3px 0; padding:0;}
−
<div class="wrapper row4">
+
.sidebar nav a{display:block; position:relative; margin:0; padding:5px 10px 5px 15px; text-decoration:none; border:solid; border-width:0 0 1px 0;}
 +
.sidebar nav a::after{top:9px; left:5px; content:"";}
 +
.sidebar nav ul ul a{padding-left:35px;}
 +
.sidebar nav ul ul a::after{left:25px;}
 +
.sidebar nav ul ul ul a{padding-left:55px;}
 +
.sidebar nav ul ul ul a::after{left:45px;}
  
−
<div class="container clear" style="padding-top:30px;">
+
/* Pagination */
−
<center><p class="maintitle">  
+
.pagination{display:block; width:100%; text-align:center; clear:both;}
−
References
+
.pagination li{display:inline-block; margin:0 3px 0 0;}
−
</p></center>
+
.pagination li:last-child{margin-right:0;}
−
<br>
+
.pagination a, .pagination strong{display:block; padding:8px 11px; border:1px solid; font-weight:normal;}
−
<div class="clear">
+
−
<ul>
+
−
<li>
+
−
[1] Boecking O, Genersch E. 2008. Varroosis – the Ongoing Crisis in Bee Keeping. J. Verbr. Lebensm. 3:221–228.</li>
+
  
−
<li>
 
−
[2] Le Conte Y, Arnold G, Trouiller J, Masson C, Chappe B, Ourisson G. 1989. Attraction of the parasitic mite varroa to the drone larvae of honey bees by simple aliphatic esters. Science 245:638–639.</li>
 
  
−
<li>
+
/* Forms
−
[3] Methods for attracting honey bee parasitic mites. [accessed 2015 Jul 24].
+
---------------------------------------------------------------------------------------------------------------*/
−
</li>
+
form, fieldset, legend{margin:0; padding:0; border:none;}
 +
legend{display:none;}
 +
label, input, textarea, select{display:block; resize:none; font-size:inherit; box-sizing:border-box;}
 +
label{margin-bottom:5px;}
  
−
<li>
+
/* Comment Area */
−
[4] Louis P, Flint HJ. 2009. Diversity, metabolism and microbial ecology of butyrate-producing bacteria from the human large intestine. FEMS Microbiol. Lett. 294:1–8.
+
#comments form{display:block; width:100%;}
−
</li>
+
#comments input, #comments textarea{width:100%; padding:10px; border:1px solid;}
−
[5] Atsumi S, Cann AF, Connor MR, Shen CR, Smith KM, Brynildsen MP, Chou KJY, Hanai T, Liao JC. 2008. Metabolic engineering of Escherichia coli for 1-butanol production. Metabolic Engineering 10:305–311.
+
#comments textarea{overflow:auto;}
−
<li>
+
#comments div{margin-bottom:15px;}
−
[6] Wallace KK, Bao Z-Y, Dai H, Digate R, Schuler G, Speedie MK, Reynolds KA. 1995. Purification of Crotonyl-CoA Reductase from Streptomyces collinus and Cloning, Sequencing and Expression of the Corresponding Gene in Escherichia coli. European Journal of Biochemistry 233:954–962.
+
#comments input[type="submit"], #comments input[type="reset"]{display:inline-block; width:auto; min-width:150px; margin:0; padding:8px 5px; cursor:pointer;}
−
</li>
+
−
</ul>
+
−
</div>
+
−
<br>
+
−
</div>
+
−
</div>
+
−
<!-- ################################################################################################ -->
+
−
<!-- ################################################################################################ -->
+
−
<!-- #######################        FOOTER        ######################################################################### -->
+
  
−
</html>{{Toulouse/footer}}<html>
 
  
 +
/* Tables
 +
---------------------------------------------------------------------------------------------------------------*/
 +
table.df th td{border:1px solid; border-collapse:collapse; vertical-align:top; box-sizing:border-box;}
 +
table.df th{table-layout:auto;}
 +
table.df{width:100%; margin-bottom:15px;}
 +
table.df th td{padding:5px 8px;}
 +
table.df td{border-width:0 1px;}
  
  
−
</body>
+
/* Gallery
 +
---------------------------------------------------------------------------------------------------------------*/
 +
#gallery{display:block; width:100%; margin-bottom:50px;}
 +
#gallery figure figcaption{display:block; width:100%; clear:both;}
 +
#gallery li{margin-bottom:30px;}
 +
 
 +
.overlay ul li a{display:block; position:relative;}
 +
.overlay ul li a::before{display:block; position:absolute; top:0; left:0; width:100%; height:100%; content:"";}
 +
.overlay ul li a::after{display:block; position:absolute; top:50%; left:50%; width:40px; height:40px; line-height:40px; margin:-18px 0 0 -18px; padding:0; border-radius:50%; font-family:"FontAwesome"; content:""; font-size:18px; text-align:center;}
 +
.overlay ul li a::before, .overlay ul li a::after{opacity:0;}
 +
.overlay ul li a:hover::before, .overlay ul li a:hover::after{opacity:1;}
 +
 
 +
 
 +
/* Font Awesome Social Icons
 +
---------------------------------------------------------------------------------------------------------------*/
 +
.faico{margin:40px; padding:0; list-style:none;}
 +
.faico li{display:inline-block; margin:0 2px 0 0; padding:0; line-height:normal;}
 +
.faico li:last-child{margin-right:0;}
 +
.faico a{display:inline-block; width:30px; height:30px; line-height:30px; border-radius:5px; font-size:16px; text-align:center;}
 +
 
 +
.faico a{color:inherit; }
 +
.faico a:hover{color:#FFFFFF;}
 +
 
 +
.faicon-facebook:hover{background-color:#3B5998;}
 +
.faicon-google-plus:hover{background-color:#DB4A39;}
 +
.faicon-instagram:hover{background-color:#3F729B;}
 +
.faicon-linkedin:hover{background-color:#0E76A8;}
 +
.faicon-tumblr:hover{background-color:#34526F;}
 +
.faicon-twitter:hover{background-color:#00ACEE;}
 +
 
 +
 
 +
/*-------------------------------------------------------------------------------------------------------------*/
 +
/*-------------------------------------------------------------------------------------------------------------*/
 +
/*-------------------------------------------------------------------------------------------------------------*/
 +
/*-------------------------------------------------------------------------------------------------------------*/
 +
/*-------------------------------------------------------------------------------------------------------------*/
 +
 
 +
 
 +
/* Colours
 +
---------------------------------------------------------------------------------------------------------------*/
 +
body{color:black; background-color:#817E8B;}
 +
 
 +
hr, .borderedbox{border-color:#EDEDED;}
 +
label span{color:#FF0000; background-color:inherit;}
 +
.btn{color:#FFFFFF;}
 +
.font_xxl:after{color:inherit; background-color:rgba(9, 181, 31, 0.32);}
 +
 
 +
 
 +
/* Rows */
 +
/* Structure des rows, le row0 est la barre de nav */
 +
.row0{color:#101132; background-color:rgba(245, 245, 245, 1); border-color:rgba(29, 5, 79, 0.81); border-width:3px; max-height:630px}
 +
.row0:hover{background-color:rgba(245, 245, 245, 1);}
 +
.row1, .row1 a{color:#FFFFFF; background-color:#000000;}
 +
.row2, .row2 a{color:#FFFFFF; background-color:#000000;}
 +
.row3{color:#888888; background-color:white;}
 +
.row4, .row4 a{color:#B4B4B4; background-color:#EDEDED;}
 +
.row5{color:white; background-color:#817E8B;}
 +
.row6, .row6 a{color:#B4B4B4; background-color:#817E8B;}
 +
.row6{border-color:#3C3C3C;}
 +
 
 +
 
 +
/* Header */
 +
#header #logo h1 a{color:inherit;}
 +
 
 +
 
 +
/* Shout */
 +
.shout .shout-content{color:inherit; background-color:rgba(251, 255, 245, 0.53);max-width:800px;max-height:300px;}
 +
.shout .shout-content:hover{background-color:rgba(247, 244, 255, 0.48);}
 +
 
 +
 
 +
/* Latest Work */
 +
.latest ul, .latest ul li{border-color:#EDEDED;}
 +
 
 +
 
 +
/* Content */
 +
.boxedicon a{color:#56AED4; }
 +
.boxedicon a:hover{color:#FFFFFF;}
 +
 
 +
 
 +
/* Footer */
 +
/* Couleur de la barre du footer */
 +
#footer .shout .shout-content, #footer .shout .shout-content:hover{color:rgba(8, 44, 47, 0.82); background-color:#EDEDED; border-bottom: 7px solid rgba(46, 29, 89, 0.88);}
 +
#footer .title{color:#FFFFFF; border-color:#3C3C3C;} /* Couleur des textes */
 +
#footer input{color:#FFFFFF; background-color:#3C3C3C;}
 +
#footer button{color:#FFFFFF;}
 +
e-block;}
 +
 
 +
/*Back to Top*/
 +
 
 +
 
 +
/* Navigation */
 +
 
 +
#mainav li a{color:inherit;} /* Couleur des textes de la barre nav */
 +
#mainav.active a, #mainav a:hover, #mainav li:hover > a{; background-color:inherit;} /* Couleur de fond lors d'un mouseover du texte */
 +
#mainav li li a, #mainav .active li a{color:black; background-color:rgba(236, 255, 226, 0.9); border-color:rgba(236, 255, 226, 0.6);} /* Gestion de la couleur des onglets */
 +
#mainav li li:hover > a, #mainav .active .active > a{color:#FFFFFF; background-color:rgba(29, 5, 79, 0.81);border-color:rgba(29, 5, 79, 0.81);font-size:12px;}/* Gestion couleur des onglets lors d'un mouseover */
 +
#mainav li a.set{color:#90A83E;font-size:15px;} /*classe active qui s'appelle pas active parceque active ?a marchait pas */
 +
/* J'ai toujours pas trop compris */
 +
#breadcrumb{color:inherit; background-color:rgba(252, 255, 206, 0.4);}
 +
#breadcrumb a{background-color:inherit;}
 +
 
 +
.container .sidebar nav a{color:inherit; border-color:#EDEDED;}
 +
.container .sidebar nav a:hover{color:#56AED4;}
 +
 
 +
.pagination a, .pagination strong{border-color:#EDEDED;}
 +
.pagination .current{color:#B9D94A;}
 +
 
 +
/*ALL TABLE ATTRIBUTES*/
 +
/* Tables + Comments
 +
df for default style table*/
 +
table.df th td, #comments .avatar, #comments input, #comments textarea{border-color:#EDEDED;}
 +
table.df th{color:#FFFFFF; background-color:#373737;}
 +
table.df tr, #comments li, #comments input[type="submit"], #comments input[type="reset"]{color:inherit; background-color:#FBFBFB;}
 +
table.df tr:nth-child(even), #comments li:nth-child(even){color:inherit; background-color:#F7F7F7;}
 +
table.df a, #comments a{background-color:inherit;}
 +
 
 +
 
 +
/* Gallery */
 +
.overlay ul li a::before{background-color:rgba(236, 255, 226, 0.6);}
 +
.overlay ul li a::after{color:#FFFFFF; }
 +
 
 +
/* */
 +
a:link {color: rgba(29, 5, 79, 0.81);}
 +
a:visited {color: rgba(29, 5, 79, 0.81);}
 +
a:hover {color:rgba(22, 19, 29, 0.95);}
 +
a:active {color:rgba(29, 5, 79, 0.81);}
 +
img
 +
{
 +
    filter: type(value);
 +
}
 +
img
 +
{
 +
    filter: type(value);
 +
    -webkit-filter: type(value);
 +
    -moz-filter: type(value);
 +
    -ms-filter: type(value);
 +
    -o-filter: type(value);
 +
}
 +
.grayscale img:hover
 +
{
 +
        filter: grayscale(0);
 +
        -webkit-filter: grayscale(0);
 +
        -moz-filter: grayscale(0);
 +
        -o-filter: grayscale(0);
 +
        -ms-filter: grayscale(0);
 +
}
 +
.grayscale img
 +
{
 +
        filter: grayscale(1);
 +
        -webkit-filter: grayscale(1);
 +
        -moz-filter: grayscale(1);
 +
        -o-filter: grayscale(1);
 +
        -ms-filter: grayscale(1);
 +
}
 +
 
 +
.subtitle{
 +
right: 5px;
 +
margin-top:30px;
 +
margin-bottom:-40px;
 +
}
 +
 
 +
.subtitle h3{
 +
color:#90A83E;
 +
font-size:25px;
 +
}
 +
/*
 +
.maintitle{
 +
font-weight:bold;
 +
font-size:30px;
 +
color:rgba(29, 5, 79, 0.81);
 +
}
 +
*/
 +
p.legend{
 +
font-size:78%;
 +
margin-bottom:20px;
 +
padding-bottom:10px;
 +
}
 +
 
 +
 
 +
table.team{
 +
text-align:center;
 +
background-color:rgb(0,0,0,0); /*transparent*/
 +
 
 +
}
 +
 
 +
table.team td {
 +
padding-top: 15px;
 +
padding-bottom: 15px;
 +
width:472px;
 +
height:327px;
 +
}
 +
 
 +
 
 +
 
 +
table.team td img{
 +
width:472px;
 +
height:327px;
 +
}
 +
 
 +
/* SLIDESHOW */
 +
 
 +
    .contener_slideshow
 +
    {
 +
      width:800px;
 +
      height:600px;
 +
      overflow: hidden;
 +
      position: relative;
 +
      background-image: url(YOUR-URL-IMAGE.png);
 +
    }
 +
    .slid_1, .slid_2, .slid_3
 +
    {
 +
      position: absolute;
 +
      width:800px;
 +
      height:600px;
 +
    }
 +
    .slid_1{left: 0;}
 +
    .slid_2{left: 800px;}
 +
    .slid_3{left: 1600px;}
 +
    .contener_slide
 +
    {
 +
      width: 2400px;
 +
      height: 600px;
 +
      left:0px;
 +
      position: absolute;
 +
      -webkit-animation-duration: 10s;
 +
      -webkit-animation-iteration-count:infinite;
 +
      -webkit-animation-name: anim_slide;
 +
      -moz-animation-duration: 10s;
 +
      -moz-animation-iteration-count:infinite;
 +
      -moz-animation-name: anim_slide;
 +
      -ms-animation-duration: 10s;
 +
      -ms-animation-iteration-count:infinite;
 +
      -ms-animation-name: anim_slide;
 +
      animation-duration: 10s;
 +
      animation-iteration-count:infinite;
 +
      animation-name: anim_slide;
 +
    }
 +
    @-webkit-keyframes anim_slide
 +
    {
 +
      0% {left:0px;}
 +
      22% {left:0px;}
 +
      33% {left:-800px;}
 +
      45% {left:-800px;}
 +
      66% {left:-1600px;}
 +
      90% {left:-1600px;}
 +
    }
 +
    @-moz-keyframes anim_slide
 +
    {
 +
      0% {left:0px;}
 +
      22% {left:0px;}
 +
      33% {left:-800px;}
 +
      45% {left:-800px;}
 +
      66% {left:-1600px;}
 +
      90% {left:-1600px;}
 +
    }
 +
    @-ms-keyframes anim_slide
 +
    {
 +
      0% {left:0px;}
 +
      22% {left:0px;}
 +
      33% {left:-800px;}
 +
      45% {left:-800px;}
 +
      66% {left:-1600px;}
 +
      90% {left:-1600px;}
 +
    }
 +
    @keyframes anim_slide
 +
    {
 +
      0% {left:0px;}
 +
      22% {left:0px;}
 +
      33% {left:-800px;}
 +
      45% {left:-800px;}
 +
      66% {left:-1600px;}
 +
      90% {left:-1600px;}
 +
    }
 +
 
 +
</style>
 
</html>
 
</html>

Revision as of 13:55, 20 August 2015