Difference between revisions of "Team:Toulouse/Description"

Line 1: Line 1:
−
{{Toulouse}}
+
{{Template:Toulouse/fontsome}}
 +
{{Template:Toulouse/framework}}
 +
 
 
<html>
 
<html>
−
<head>
 
−
<meta charset="utf-8">
 
−
<title>iGEM Toulouse 2015</title>
 
−
<link rel="icon" href="https://static.igem.org/mediawiki/2015/2/2e/TLSE_ApiColi.png" type="image/png" style="width:10%;"/>
 
−
 
−
</head>
 
−
<body id="top">
 
−
<!-- ################################################################################################ -->
 
−
<!-- ################################################################################################ -->
 
−
<!-- ################################################################################################ -->
 
−
 
 
<script>
 
<script>
−
var myurl = "https://2015.igem.org/Team:Toulouse/Descrition";
+
var shiftWindow = function() { scrollBy(0, -30) };
−
var elementId = "project";
+
if (location.hash) shiftWindow();
 +
window.addEventListener("hashchange", shiftWindow);
 
</script>
 
</script>
 +
<style>
 +
@charset "utf-8";
 +
#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: #817E8B; ;
 +
}
 +
#globalWrapper {
 +
    font-size: 78%;
 +
    position:absolute;
 +
}
  
−
</html>{{Toulouse/nav}}<html>
+
#content {
 +
    width:100%;
 +
}
  
−
+
h1, h2, h3, h4, h5, h6 { border-bottom: 0px transparent;
  
−
   
+
margin-bottom: none;
−
    <!-- ################################################################################################  
+
  }
−
+
h3 {color:#90A83E;}
−
    <!-- ################################################################################################ -->
+
@charset "utf-8";
−
 
+
/*
 +
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
 +
*/
  
−
<!-- ################################################################################################ -->
+
@import url("fontawesome-4.2.0.min.css");
−
<!-- ################################################################################################ -->
+
@import url("framework.css");
−
<!-- ################################################################################################ -->
+
−
<div class="wrapper row0 bgded" style="background-image:url('  https://static.igem.org/mediawiki/2015/f/f5/TLSE_bg_1.png')">
+
−
 
+
  
−
 
 
−
 
 
−
  <div class="shout">
 
−
   
 
−
    <div class="shout-content clear">
 
−
      <div class="maintitle">
 
−
    <center> <h3>Project description</h3> </center>
 
−
    </div>
 
−
  <center><img src="https://static.igem.org/mediawiki/2015/7/70/TLSE_context_BG.png"></center>
 
−
 
 
−
</div>
 
  
−
  </div>
+
/* Rows
−
 
+
---------------------------------------------------------------------------------------------------------------*/
−
+
.row0{border-bottom:0px 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 class="title">
 
−
      <a href="#main1"><h3>Context</h3></a>
 
−
    </div>
 
−
<center> 
 
−
    <div id="breadcrumb" class="clear" style="float: center;" >
 
−
  <ul>
 
−
        <li><a href="#domBee">- Domestic bees</a></li>
 
−
        <li><a href="#CCD">- Collapse of bees</a></li>
 
−
        <li><a href="#varroa"><i>- Varroa destructor</i></a></li>
 
−
        <li><a href="#outB">- Outbreak of <i> Varroa destructor </i> </a></li>
 
−
<li><a href="#fight">- Ways to fight <i>Varroa destructor</i></a></li>
 
−
      </ul>
 
−
    </div>
 
  
−
</center>
+
/* Shout - Call To Action
−
<div class="title">
+
---------------------------------------------------------------------------------------------------------------*/
−
+
.shout{padding:650px 0 0 0; text-transform:uppercase;}
−
      <a href="#main2"><h3>Strategy</h3></a>
+
.shout.inner{padding-top:120px;}
−
    </div>
+
.shout p{margin:0; padding:0;}
−
<center> 
+
.shout p:first-of-type{/*margin-top:10px;*/ text-transform:none;}
−
    <div id="breadcrumb" class="clear" style="float: center;" >
+
.shout-content img{
−
  <ul>
+
max-height:160px;
−
        <li><a href="#part1">- Introducing ApiColi</a></li>
+
}
−
        <li><a href="#part2">- It’s a TrapiColi!</a></li>
+
.shout .shout-content{padding:15px 30px; border-radius:50px 50px 5px 5px; font-size:1.2rem; margin:auto;}
−
        <li><a href="#part3">- Apicoli circadian rhythm</a></li>
+
.row0 .shout .shout-content{padding:15px 30px; border-radius:50px 50px 5px 5px; font-size:1.2rem;margin-top:-218px;}
−
      </ul>
+
/* Page Header
−
    </div>
+
--------------------------------------------------------------------------------------------------------------- */
−
<hr style="width:66%;height:2px;border:none;color:rgba(29, 5, 79, 1);background-color:rgba(29, 5, 79, 1); z-index:50; position:relative;">
+
#pageintro{padding:180px 0 0 0;}
−
</center>
+
#pageintro .title{margin:0 0 50px 0;}
−
  <!--   ################################################################################################ -->
+
#pageintro .title :first-of-type{font-size:32px;}
−
 
+
  
−
    <!-- FIRST PARAGRAPH -->
 
−
 
−
<center><div class="title" >  
 
−
<h3>Context: Bees and pollination</h3>
 
−
</div></center>
 
  
−
<div class="group center">
+
/* Latest
−
        <p align="justify" style="font-size:15px;">
+
---------------------------------------------------------------------------------------------------------------*/
−
+
.latest{display:block; width:100%; min-width:978px; max-width:2000px; margin:0 auto;}
−
Bees excel in pollination and thus play an essential role in maintaining ecosystems by participating to the production of seeds.  
+
.latest *{margin:0; padding:0;}
−
Bees harvest pollen and use proteins to feed their offspring. Moreover, 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.  
+
.latest ul, .latest ul li{border:solid; margin-bottom:15px;}
−
Among all bees, the domestic bee, <i>Apis mellifera</i>, which builds its swarm in hives provided
+
.latest ul{border:solid; border-width:1px 0;}
−
by man, is directly responsible for the production of honey, wax and propolis.  
+
.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>
+
/* Clients
−
      </div>
+
---------------------------------------------------------------------------------------------------------------*/
−
+
.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;}
−
  <div class="group center">
+
.clients ul li:first-child, .clients ul li:nth-child(5n+1){clear:left;}
−
<br>
+
.clients ul li *{width:100%; opacity:.5;}
−
  <img src="https://static.igem.org/mediawiki/2015/3/37/TLSE_context_fig1.png" />
+
.clients ul li *:hover{opacity:1;}
−
</div>
+
−
<div class="group center">
+
−
<br>
+
−
<p>Figure 1: Examples of products dependent on bee pollination</p>
+
−
</div>
+
−
+
−
+
−
<div class="group center"> <!-- FIRST PARAGRAPH -->
+
−
        <p align="justify" style="font-size:15px;">
+
−
According to the French INRA (National Institute of Agricultural Research),
+
−
the bee extinction would represent an economical worldwide loss of 163 billion USD.  
+
−
This huge number reflects the importance of the bees in the global ecosystem.
+
  
  
−
<div id="domBee"></div>
+
/* Content Area
−
</p>
+
---------------------------------------------------------------------------------------------------------------*/
−
      </div>
+
.container{padding:30px;padding-bottom:80px;}
−
 
+
  
−
 
+
/* Content */
−
<div class="subtitle">  
+
.container #content{}
−
<h3>Domestic bees</h3>
+
−
</div>
+
  
 +
.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
+
−
to clean the beehive cells, ventilate the
+
−
beehive, cap the beehive cells containing
+
−
the bee eggs, feed the larvae, gather pollen and defend the colony.
+
−
<!-- ANCHOR CCD --> </p> <div id="CCD"><!-- ANCHOR CCD --></div>  <p align="justify" style="font-size:15px;">
+
−
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>
+
#footer .title{margin:0 0 30px 0; padding:0 0 8px 0; border-bottom:1px solid; font-size:16px; text-transform:uppercase;}
−
</div>
+
  
 +
#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;}
  
 +
#footer input, #footer button{border:none; border-radius:5px;}
 +
#footer input{display:block; width:100%; padding:8px;}
 +
#footer button{padding:6px 12px; font-weight:bold; text-transform:uppercase; cursor:pointer;}
  
−
<div class="group center">
 
−
      <div class="one_half first">
 
−
<img src="https://static.igem.org/mediawiki/2015/1/14/TLSE_context_fig1bis2.png" style="width:60%;">  
 
−
      </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 the situation appears. 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 <!-- ANCHOR varroa --> <i id="varroa">Varroa destructor</i> is one of the bees 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>
+
/* Copyright
−
      </div>
+
---------------------------------------------------------------------------------------------------------------*/
−
 
+
#copyright{padding:30px 0;}
−
 
+
#copyright p{margin:0; padding:0;}
−
 
+
−
  <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><b>Figure 2: Synchronized life cycle of Honeybees and <i>Varroa destructor</i></b>. Phoretic phase is the phase were varroa is fixed on an adult bee. This phase is followed by the reproductive phase which takes place in bee broods. Phoretic phase then restarts when the imago (last embryonic stage of the bee) emerges from the brood.</p>
+
−
</div>
+
−
 
+
−
<div class="group center"> <!-- FIRST PARAGRAPH -->
+
−
        <p align="justify" style="font-size:15px;">
+
−
+
−
The bee infestation by varroa occurs between the egg laying of the queen bee in beehive cells and the encapsulation of the bee larva inside the beehive cell. After feeding off the larva the founder will start laying varroa eggs. The newborn varroas will develop themselves, go through different stages and will reproduce within the brood cell.
+
−
When the mature bee finally emerges from the brood cell, female varroas will stick themselves to it therefore becoming “phoretic”.
+
−
The <i>Varroa destructor</i> itself is of significant danger. However it is the association with the Deformed Wing Virus (DWV) that makes him one of the most virulent threats for honeybees. The study of the interplay between the mite and the DWV shows that an intense viral replication is triggered by the mite feeding off the bee, leading to a devastating viral outbreak.
+
  
−
</p>
 
−
      </div>
 
−
 
 
−
    <div class="group center">
 
−
<br>
 
−
  <img src="https://static.igem.org/mediawiki/2015/6/6b/TLSE_context_fig3.png" style="width:75%;height:55%;" />
 
−
</div>
 
−
<!-- ANCHOR outB--><div id="outB"></div>
 
−
<div class="group center">
 
−
<br>
 
−
<p><b>Figure 3: Effects exerted by <i>Varroa destructor</i> on honeybee and their hypothetical consequences, source [4]. </b> The parasite may weaken the immune system allowing the proliferation of DWV (Deformed Wing Virus) amoung bees. This proliferation may cause disorders responsible of physical and cognitive impairement.
 
−
</p>
 
  
−
</div>
+
/* Back to Top
−
+
---------------------------------------------------------------------------------------------------------------*/
−
<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 was originally an ectoparasite
 
−
of <i>Apis cerana</i>, the Asian honey bee. The first
 
−
contact between varroa and <i>Apis mellifera</i>
 
−
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. </p> <!-- ANCHOR fight--> <div id="fight"></div>   <p align="justify" style="font-size:15px;">In Asia on the contrary, <i>Apis cerana</i>
 
−
and <i>Varroa destructor</i> co-evolved over the centuries
 
−
and reached a certain balance. Interestingly, the Asian
 
−
honeybee is capable of detecting the parasite’s presence
 
−
and getting rid of it.
 
  
 +
/* Transition Fade
 +
--------------------------------------------------------------------------------------------------------------- */
 +
.row0, .faico a, #mainav *, .shout-content, .overlay ::before, .overlay ::after, .boxedicon a, .clients ul li *, }
  
−
</p>
 
−
</div>
 
  
−
<div class="one_half">
+
/*-------------------------------------------------------------------------------------------------------------*/
 +
/*-------------------------------------------------------------------------------------------------------------*/
 +
/*-------------------------------------------------------------------------------------------------------------*/
 +
/*-------------------------------------------------------------------------------------------------------------*/
 +
/*-------------------------------------------------------------------------------------------------------------*/
  
−
<img src="https://static.igem.org/mediawiki/2015/a/a6/TLSE_context_fig3bis.png" style="width:50%;">
 
−
</div>
 
  
−
</div>
+
/* Navigation
−
<div class="subtitle">
+
---------------------------------------------------------------------------------------------------------------*/
−
+
nav ul, nav ol{margin:0; padding:0; list-style:none;}
−
<h3>Means to fight <i>Varroa destructor</i></h3>
+
−
</div>
+
  
 +
#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;}
  
−
<div class="group">
+
/* Top Navigation */
−
        <p align="right" style="font-size:15px;">
+
#mainav{margin-bottom:-1px; }
−
There are three types of methods used to limit varroas impact:
+
#mainav ul{text-transform:uppercase;margin-top:-1px;}
−
</p>
+
#mainav ul ul{z-index:9999; position:absolute; width:160px; text-align:left; text-transform:none;}
−
</div>
+
#mainav ul ul ul{left:150px; top:0;}
−
<div class="group center">
+
#mainav li{display:inline-block; position:relative; margin:0 10px 0 0; padding:0;}
−
<p align="justify" style="font-size:15px;">
+
#mainav li:last-child{margin-right:0;}
−
<b> &#9830; </b>Search of tolerant or resistant bees through selection
+
#mainav li li{width:100%; margin:0;}
−
<br> <b> &#9830; </b>    Use of “zoo-technic” or “bio-technic” means (Trapping of varroas in empty male broods or installation of fenced entries)
+
#mainav li a{display:block; padding:25px 10px;}
−
<br> <b> &#9830; </b>        Use of chemical treatments
+
#mainav li li a{border:solid; border-width:0 0 1px 0;font-size:12px;}
−
</p>
+
#mainav .drop{padding-left:15px; margin-top:20px;}
−
</div>
+
#mainav li li a, #mainav li li .drop{display:block; margin:0px; padding:10px 15px;}
−
<div class="group center">
+
#mainav .drop::after, #mainav li li .drop::after{content:"";}
−
<p align="justify" style="font-size:15px;">
+
#mainav .drop::after{top:30px; left:5px;}
−
This last type is the most effective, however it is limited and their
+
#mainav li li .drop::after{top:15px; left:5px;}
−
use is complicated since bees generate consumable
+
#mainav ul ul{visibility:hidden; opacity:0;}
−
products. The lack of effectiveness of those treatments allows enough varroa to decrease
+
#mainav ul li:hover > ul{visibility:visible; opacity:1;}
−
bee population in hives, beyond dangerous thresholds. The use of such treatments (usually yearly) can eliminate
+
−
up to 90% of the varroa population,
+
−
which is insufficient to maintain the plague at safe levels.<br><br>
+
−
On top of that, such treatments may have serious disadvantages:
+
−
</p>
+
−
</div>
+
  
−
<div class="group center" style="margin-right:40px;margin-left:40px;">
+
/* Breadcrumb */
−
<p align="justify" style="font-size:15px;">
+
#breadcrumb{display:block; padding:15px 20px; border-radius:5px 5px 0 0;}
−
<br><b> &#9830; </b>It has been shown that some miticide or
+
#breadcrumb ul{margin:0; padding:0; list-style:none;}
−
degradation metabolites from these molecules accumulate in beewax. <br>
+
#breadcrumb li{display:inline-block; margin:0 6px 0 0; padding:0;}
−
This long term accumulation could explain the emergence of resistant
+
#breadcrumb li a{display:block; position:relative; margin:0; padding:0 12px 0 0; font-size:13px;color:rgba(29, 5, 79, 1);}
−
parasites.
+
#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;}
  
−
<br><br> <b> &#9830; </b>    Some treatments were shown to have detrimental effects on bees. <br>
+
/* Sidebar Navigation */
−
Those effects are usually increased if the treatments are misused.
+
.sidebar nav{display:block; width:100%;}
 +
.sidebar nav li{margin:0 0 3px 0; padding:0;}
 +
.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;}
  
−
<br><br> <b> &#9830; </b>        Some treatments can contaminate the production of bees and impact the quality of the products.
+
/* Pagination */
 +
.pagination{display:block; width:100%; text-align:center; clear:both;}
 +
.pagination li{display:inline-block; margin:0 3px 0 0;}
 +
.pagination li:last-child{margin-right:0;}
 +
.pagination a, .pagination strong{display:block; padding:8px 11px; border:1px solid; font-weight:normal;}
  
−
</p>
 
−
</div>
 
  
−
<div class="group center">
+
/* Forms
−
<div class="three_quarter first">
+
---------------------------------------------------------------------------------------------------------------*/
−
<p align="justify" style="font-size:15px;">
+
form, fieldset, legend{margin:0; padding:0; border:none;}
−
Bees are probably one of the most valuable animal species to mankind through
+
legend{display:none;}
−
their unique role in pollination. The speed at which they disappear is alarming
+
label, input, textarea, select{display:block; resize:none; font-size:inherit; box-sizing:border-box;}
−
and considering the emergency of the situation our team decided to use the tools
+
label{margin-bottom:5px;}
−
offered by synthetic biology to fight <i>Varroa destructor</i>.
+
−
</p>
+
−
</div>
+
−
<div class="one_quarter">
+
−
+
−
<img src="https://static.igem.org/mediawiki/2015/f/f6/TLSE_context_fig4.png" style="width:50%;">
+
−
</div>
+
−
<div id="main2"><!-- ANCHOR main2 --></div>
+
−
</div>
+
  
−
<center><div class="title">  
+
/* Comment Area */
−
<h3>Strategy: An ounce of prevention is worth a pound of cure
+
#comments form{display:block; width:100%;}
−
</h3>
+
#comments input, #comments textarea{width:100%; padding:10px; border:1px solid;}
−
</div></center>
+
#comments textarea{overflow:auto;}
 +
#comments div{margin-bottom:15px;}
 +
#comments input[type="submit"], #comments input[type="reset"]{display:inline-block; width:auto; min-width:150px; margin:0; padding:8px 5px; cursor:pointer;}
  
−
<div class="group center">
 
−
<div class="tow_third first">
 
−
        <p align="justify" style="font-size:15px;">
 
  
−
+
/* Tables
−
Given the
+
---------------------------------------------------------------------------------------------------------------*/
−
influence of the varroa mite in bee population decline,
+
table.df th td{border:1px solid; border-collapse:collapse; vertical-align:top; box-sizing:border-box;}
−
we wanted our project to fit into the fight against varroa.
+
table.df th{table-layout:auto;}
−
<b>Current chemical treatments</b> used to fight varroa are not
+
table.df{width:100%; margin-bottom:15px;}
−
satisfying since they are <b>harmful for bees</b> and human health,
+
table.df th td{padding:10px 15px;}
−
and beekeepers relate a <b>lack of effectiveness</b>.
+
table.df td{border-width:0 1px;}
−
</p><div id="part1"><!-- ANCHOR 1--></div>
+
−
<p align="justify" style="font-size:15px;">
+
−
Our project, ApiColi, is an <b>alternative solution</b> in the
+
−
fight against varroa in order to <b>establish a balance</b>
+
−
between <i>Apis mellifera</i> and <i>Varroa destructor</i>
+
−
and thus contribute to the preservation of ecosystems.
+
−
</p>
+
−
</div>
+
  
  
 +
/* Gallery
 +
---------------------------------------------------------------------------------------------------------------*/
 +
#gallery{display:block; width:100%; margin-bottom:50px;}
 +
#gallery figure figcaption{display:block; width:100%; clear:both;}
 +
#gallery li{margin-bottom:30px;}
  
−
<div class="one_third">
+
.overlay ul li a{display:block; position:relative;}
−
<img src="https://static.igem.org/mediawiki/2015/1/1b/TLSE_WIP.png" style="width:70%;"/>
+
.overlay ul li a::before{display:block; position:absolute; top:0; left:0; width:100%; height:100%; content:"";}
−
</div>
+
.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;}
  
−
      </div>
 
−
  <div class="subtitle">  
 
−
<h3>Introducing ApiColi
 
−
</h3>
 
−
</div>
 
  
−
<div class="group center">
+
/* Font Awesome Social Icons
−
        <p align="justify" style="font-size:15px;">
+
---------------------------------------------------------------------------------------------------------------*/
−
+
.faico{margin:40px; padding:0; list-style:none;}
−
Our strategy is based on a genetically modified <i>Escherichia coli</i> strain able to <b>alternate a production</b> of two molecules according to a <b>circadian cycle</b>.
+
.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;}
  
−
<b>During the day</b>, while bees are entering or exiting the beehive, <b>butyrate</b> is biosynthesized by our engineered bacteria, ApiColi, in order to <b>attract the varroa</b> fixed on bees. <br>
+
.faico a{color:inherit; }
 +
.faico a:hover{color:#FFFFFF;}
  
−
<b>By night</b>, ApiColi produces <b>formate</b>, a well-known molecule <b>lethal to the varroa</b> attracted during the day.<br>
+
.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;}
  
−
Formic acid is currently used to fight varroa, but at <b>very high doses</b>, that also have an <b>impact on bees</b>.
 
  
−
</p>
+
/*-------------------------------------------------------------------------------------------------------------*/
−
      </div>
+
/*-------------------------------------------------------------------------------------------------------------*/
−
+
/*-------------------------------------------------------------------------------------------------------------*/
−
 
+
/*-------------------------------------------------------------------------------------------------------------*/
−
 
+
/*-------------------------------------------------------------------------------------------------------------*/
−
  <div class="group center">
+
−
<br>
+
−
  <img src="https://static.igem.org/mediawiki/2015/3/38/TLSE_strategy_fig1.png" style="width:66%;height:580px;" />
+
−
</div>
+
−
<div id="part2"><!-- ANCHOR 2--></div>
+
−
<div class="group center">
+
−
<br>
+
−
<p> Figure 1: Circadian rhythm switch strategy</p>
+
−
</div>
+
  
  
 +
/* Colours
 +
---------------------------------------------------------------------------------------------------------------*/
 +
body{color:black; background-color:#817E8B;}
  
−
<div class="subtitle">  
+
hr, .borderedbox{border-color:#EDEDED;}
−
<h3>It’s a TrapiColi!
+
label span{color:#FF0000; background-color:inherit;}
 +
.btn{color:#FFFFFF;}
 +
.font_xxl:after{color:inherit; background-color:rgba(9, 181, 31, 0.32);}
  
−
</h3>
 
−
</div>
 
  
−
<div class="group center">
+
/* Rows */
−
        <p align="justify" style="font-size:15px;">
+
/* Structure des rows, le row0 est la barre de nav */
−
In our project, the engineered bacteria ApiColi will be placed at the bottom of a trap, called <b>TrApiColi</b>,  
+
.row0{color:#101132; background-color:rgba(245, 245, 245, 1); border-color:rgba(29, 5, 79, 0.81); max-height:650px;}
−
positioned at the entrance of the hive. Varroas will be <b>attracted</b> and killed there, leaving the <b>bee colony
+
.row0:hover{background-color:rgba(245, 245, 245, 1);}
−
less exposed </b>to both chemicals, and particularly formic acid.  
+
.row1, .row1 a{color:#FFFFFF; background-color:#000000;}
−
</p>
+
.row2, .row2 a{color:#FFFFFF; background-color:#000000;}
−
</div>
+
.row3{color:#888888; background-color:white;}
−
<div id="part3"><!-- ANCHOR 3--></div>
+
.row4, .row4 a{color:#B4B4B4; background-color:#EDEDED;}
−
<div class="group center">
+
.row5{color:white; background-color:#817E8B;}
−
  <p align="justify" style="font-size:15px;">
+
.row6, .row6 a{color:#B4B4B4; background-color:#817E8B;}
−
Furthermore, at the moment, beehives are only treated with formic acid during <b>spring</b> and <b>fall</b>, when no
+
.row6{border-color:#3C3C3C;}
−
honey is being made. This is due to the fact that formic acid weakens bees, but also that when varroa have entered the
+
−
brood, they are <b>not affected by the miticide</b>. <br>
+
−
The attraction power of ApiColi will enable us to prevent most varroas from entering the beehive and reaching the brood.  
+
−
This way, our treatment would be <b>usable</b> even <b>during summer</b>.
+
−
</p>
+
−
      </div>
+
  
−
<div class="subtitle">  
 
−
<h3>Apicoli circadian rhythm
 
  
−
</h3>
+
/* Header */
−
</div>
+
#header #logo h1 a{color:inherit;}
  
−
<div class="group">
 
−
        <p align="justify" style="font-size:15px;">
 
−
 
−
With our project, we want to protect bee colonies from infestation by <i>Varroa destructor</i>. To achieve the establishment of the balance between the mite and honey bees, we need to <b>attract varroas prior their entrance in the beehive</b>, and to kill them. The molecules we chose to do so are butyric acid and formic acid (<i>See sections Attract and Eradicate</i>).
 
−
Indeed it was shown that <b>butyric acid</b> is one of the molecules produced by bee's larvae in the brood and has an <b>attractive power</b> towards varroas (based on the Patent <i>Methods for attracting honey bee parasitic mites</i>, US 8647615 B1).
 
  
−
</p>
+
/* Shout */
−
</div>
+
.shout .shout-content{color:inherit; background-color:rgba(247, 244, 255, 0.48);max-width:800px;max-height:300px;}
 +
.shout .shout-content:hover{background-color:rgba(247, 244, 255, 0.48);}
  
−
<div class="group center">
 
−
<p class="text">
 
  
−
Concerning <b>formic acid</b>, it is currently used by beekeepers as a treatment against varroa infestation but only during spring and fall and at high doses. Thus it has deleterous effects on bees and beekeepers.
+
/* Latest Work */
−
We also know that bees have a lifecycle based on the sunlight. As we explain above, during the day, bees are active and come in and out of the hive to gather pollen. This is when they bring back the varroas to the hive. During the night on the contrary, bees are less active and stay in the hive.  
+
.latest ul, .latest ul li{border-color:#EDEDED;}
  
−
</p>
 
−
</div>
 
  
−
<div class="group center">
+
/* Content */
−
<p class="text">
+
.boxedicon a{color:#56AED4; }
−
With all these data, we have been able to design a perfect solution fighting <i>Varroa destructor</i>. A trap containing the engineered bacteria (ApiColi) will be placed at the entrance of the beehive. <b>During the day</b>, Apicoli will <b>produce butyric acid</b> which will diffuse up to where the bees enter the hive. The varroas will be attracted and drop into the trap through a grid. Thus they will never come inside the hive.
+
.boxedicon a:hover{color:#FFFFFF;}
−
</p>
+
−
</div>
+
−
+
−
<div class="group center">
+
−
<p class="text">
+
−
To be respectful of the bees lifecycle, our bacteria will only <b>produce formic acid at night</b>. This way, the bees will be much less exposed to it since it will be confined to the trap and at much lower doses.
+
−
Finally, we do not know if these two molecules effect can interfere, but we do know that they can be harmful to ApiColi if accumulated. That is why alternating production of both acids according to a circadian rhythm will enable us to have a more controlled use of the carbon source, and thus a longer culture length and trap efficiency.
+
−
<br>
+
−
To do so, based on a paper published in Nature by Levskaya et al., Synthetic biology: engineering <i>E. coli </i> (2005), we used a <b>light switch system </b> composed of two membrane proteins:</p>
+
−
</div>
+
  
−
<div class="group">
 
−
        <ul style="font-size:15px;">
 
−
<li>PCB (chromophore phycocyanobilin)</li>
 
−
<li>Cph8 : an hybrid protein</li>
 
−
<ul style="font-size:15px;">
 
−
<li>This protein results from the fusion of red light response domain from Cph1
 
−
(phytochrome-like protein cph1) and the intracellular histidin kinase EnvZ (osmolarity sensor protein) from <i>E. coli</i></li>
 
−
</ul>
 
−
</ul>
 
−
</div>
 
  
−
<center>
+
/* Footer */
−
<div class="title">
+
/* Couleur de la barre du footer */
−
<h3>READ MORE</h3>
+
#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);}
−
</div> </center>
+
#footer .title{color:#FFFFFF; border-color:#3C3C3C;} /* Couleur des textes */
 +
#footer input{color:#FFFFFF; background-color:#3C3C3C;}
 +
#footer button{color:#FFFFFF;}
 +
e-block;}
  
−
<div class="group center">
+
/*Back to Top*/
−
<div style="width:20%;">
+
−
<a href="https://2015.igem.org/Team:Toulouse/Description/Attract">
+
−
<div class="title">
+
−
<h3>Attract</h3>
+
−
</div>
+
−
</a>
+
−
</div>
+
−
<div style="width:20%;">
+
−
<a href="https://2015.igem.org/Team:Toulouse/Description/Eradicate">
+
−
<div class="title">
+
−
<h3>Eradicate</h3>
+
−
</div>
+
−
</a>
+
−
</div>
+
−
<div style="width:20%;">
+
−
<a href="https://2015.igem.org/Team:Toulouse/Description/Regulation">
+
−
<div class="title">
+
−
<h3>Regulation</h3>
+
−
</div>
+
−
</a>
+
−
</div>
+
−
<div style="width:20%;">
+
−
<a href="https://2015.igem.org/Team:Toulouse/Design">
+
−
<div class="title">
+
−
<h3>Device: TrApiColi</h3>
+
−
</div>
+
−
</a>
+
−
</div>
+
−
<div style="width:20%;">
+
−
<a href="https://2015.igem.org/Team:Toulouse/Results">
+
−
<div class="title">
+
−
<h3>Results</h3>
+
−
</div>
+
−
</a>
+
−
</div>
+
−
</div>
+
  
  
−
  </main>
+
/* Navigation */
−
</div>
+
−
<!-- ################################################################################################ -->
+
−
<!-- ################################################################################################ -->
+
−
<!-- ################################################################################################ -->
+
  
−
<!-- ################################################################################################ -->
+
#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 */
−
<!-- ########################### SPONSORS ###################################################################### -->
+
#mainav li li a, #mainav .active li a{color:black; background-color:rgb(205, 215, 117); border-color:rgb(205, 215, 117);} /* Gestion de la couleur des onglets */
−
<div class="wrapper row4">
+
#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(255, 255, 255, 0.7);}
 +
#breadcrumb a{background-color:inherit;}
  
−
<div class="container clear" style="padding-top:30px;">
+
.container .sidebar nav a{color:inherit; border-color:#EDEDED;}
−
<center><p class="maintitle">  
+
.container .sidebar nav a:hover{color:#56AED4;}
−
References
+
−
</p></center>
+
−
<br>
+
−
<div class="clear">
+
−
<ul>
+
−
<li>
+
−
[1] Yves Le Conte, Marion Ellis, Wolfgang RITTER. Varroa mites and honey bee health: can Varroa explain part of the colony losses? Apidologie, Springer Verlag (Germany), 2010, 41 (3), <10.1051/apido/2010017>.</li>
+
  
−
<li>
+
.pagination a, .pagination strong{border-color:#EDEDED;}
−
[2] Sammataro, D., Gerson, U., Needham, G., 2000. Parasitic mites of honey bees life history implications and impact. Annual Review of Entomology 45, 519-548
+
.pagination .current{color:#B9D94A;}
−
</li>
+
  
−
<li>
+
/*ALL TABLE ATTRIBUTES*/
−
[3] Peng, Y-S., Fang, Y., Xu, S., Ge, L., 1987. The resistance mechanism of the Asian honey bee, Apis cerana Fabr., to an ectoparasitic mite, Varroa jacobsoni Oudemans. Journal of invertebrate pathology 49, 54-60.
+
/* Tables + Comments
−
</li>
+
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:rgba(29, 5, 79, 1);font-size:15px;}
 +
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;}
  
−
<li>
 
−
[4] S, L, P Wendling. 2012. Varroa destructor (ANDERSON ET TRUEMAN, 2000), UN ACARIEN ECTOPARASITE DE L’ABEILLE DOMESTIQUE Apis mellifera LINNAEUS, 1758. REVUE BIBLIOGRAPHIQUE ET CONTRIBUTION À L’ÉTUDE DE SA REPRODUCTION.</li>
 
  
 +
/* Gallery */
 +
.overlay ul li a::before{background-color:rgba(236, 255, 226, 0.6);}
 +
.overlay ul li a::after{color:#FFFFFF; }
  
−
<li>
+
/* */
−
[5] Yves Le Conte, Marion Ellis, Wolfgang RITTER. Varroa mites and honey bee health: can Varroa explain part of the colony losses? Apidologie, Springer Verlag (Germany), 2010, 41 (3), <10.1051/apido/2010017>.</li>
+
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);
 +
}
  
−
<li>
+
.group {padding-top:10px;}
−
[6] Sammataro, D., Gerson, U., Needham, G., 2000. Parasitic mites of honey bees life history implications and impact. Annual Review of Entomology 45, 519-548
+
−
</li>
+
  
−
<li>
+
p.text{
−
[7] Peng, Y-S., Fang, Y., Xu, S., Ge, L., 1987. The resistance mechanism of the Asian honey bee, Apis cerana Fabr., to an ectoparasitic mite, Varroa jacobsoni Oudemans. Journal of invertebrate pathology 49, 54-60.  
+
font-size:15px;
−
</li>
+
text-align:justify;
 +
}
 +
.title{
 +
margin-top:60px;
 +
color:rgba(29, 5, 79, 0.81);
 +
}
  
−
<li>
+
.title h3{
−
[8] S, L, P Wendling. 2012. Varroa destructor (ANDERSON ET TRUEMAN, 2000), UN ACARIEN ECTOPARASITE DE L’ABEILLE DOMESTIQUE Apis mellifera LINNAEUS, 1758. REVUE BIBLIOGRAPHIQUE ET CONTRIBUTION À L’ÉTUDE DE SA REPRODUCTION.</li>
+
color:rgba(29, 5, 79, 1);
 +
font-size:25px;
 +
}
  
−
<li>
+
.subtitle{
−
[9] Peter EA Teal, Adrian J. Duehl, Mark J. Carroll. The United States Of America, As Represented By The Secretary Of Agriculture. 2014. Methods for attracting honey bee parasitic mites, US 8647615 B1. </li>
+
right: 5px;
−
</ul>
+
padding-top:30px;
−
</div>
+
margin-top:30px;
−
<br>
+
}
−
</div>
+
  
−
</div>
+
.subtitle h3{
−
<!-- ################################################################################################ -->
+
color:#90A83E;
−
<!-- ################################################################################################ -->
+
font-size:20px;
−
<!-- #######################        FOOTER        ######################################################################### -->
+
}
 +
 
 +
.subsubtitle{
 +
margin-left: 10px;
 +
margin-top:30px;
 +
}
 +
 
 +
.subsubtitle h3{
 +
color:#90A83E;
 +
font-size:15px;
 +
}
 +
 
 +
.maintitle{
 +
color:rgba(29, 5, 79, 0.81);
 +
}
 +
 
 +
.maintitle h3{
 +
color:rgba(29, 5, 79, 1);
 +
font-size:25px;
 +
}
 +
 
 +
p.legend{
 +
font-size:12px;
 +
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;
 +
}
 +
 
 +
 
 +
 
 +
table.result{
 +
  display: block;
 +
  font-family: sans-serif;
 +
  -webkit-font-smoothing: antialiased;
 +
  font-size: 115%;
 +
  overflow: auto;
 +
  width: auto;
 +
  }
 +
 +
table.result th {
 +
    background-color: rgba(29, 5, 79, 1);
 +
    color: white;
 +
    font-weight: normal;
 +
    padding: 20px 30px;
 +
    text-align: center;
 +
  }
 +
 
 +
table.result  td {
 +
    background-color: rgb(238, 238, 238);
 +
    color: rgb(111, 111, 111);
 +
    padding: 20px 30px;
 +
  }
 +
 
  
−
</html>{{Toulouse/footer}}<html>
 
  
 +
.anchor {
 +
    height: 30px;
 +
    position: fixed;
 +
    bottom: 30px;
 +
    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;
 +
}
 +
/* 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;}
 +
    }
  
−
</body>
+
</style>
 
</html>
 
</html>

Revision as of 17:00, 16 September 2015