/* 
    Document   : newCascadeStyleSheet
    Created on : 6 juil. 2012, 21:06:46
    Author     : lgjean
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

root { 
    display: block;
}

body{
    background-color: limegreen;
    background-image: url("../images/fond.jpg");
}



#logo {
  margin-left:  30%;
  height: auto;
}

#logo a{
   float: right;
  margin: 5px;
   color: #495723 ;
   text-decoration: none;
}

#alarm {
    position: absolute;
    z-index: 2;
    padding: 5px;
   margin-right: -10%;
   margin-top: -10%;
   background-color: black;
   font-family: Tahoma, Geneva, sans-serif;
      font-size: 16px;
 font-weight: bold;
  color:whitesmoke;
 width: 250px;
 height: 50px;
 text-align: justify;
    background-color:  #700E0B;
 border-radius: 5px;
    
 animation-duration: 20s;
-moz-animation-duration: 20s;
-webkit-animation-duration: 20s;
-ms-animation-duration: 20s;
-o-animation-duration: 20s;


animation-name: slidein;
-moz-animation-name: slidein;
-webkit-animation-name: slidein; 
-ms-animation-name: slidein;
-o-animation-name: slidein;

}

@-moz-keyframes slidein {
  from {
    margin-right : 10%;
    margin-top : 10%;
    width: 30%;
        text-align: left;
  }

  to {
margin-right:  -10%;
   margin-top: -10%;
    width: 0%;
    text-align: right;
  }
}

 @-webkit-keyframes slidein {
  from {
    margin-right : 10%;  
    margin-top : 10%;
    width: 30%;
        text-align: left;
  }

  to {
    margin-right: -10%;
   margin-top: -10%;
   width: 0%;
   text-align: right;
  }
}

 @-ms-keyframes slidein {
  from {
    margin-right : 10%;
    margin-top: 10%;
   width: 30%;
   text-align: left;
  }

  to {
    margin-right: -10%;
   margin-top: -10%;
   width: 0%;
   text-align: right;
  }
}

 @-o-keyframes slidein {
  from {
    margin-right : 10%;
    margin-top: 10%;
   width: 30%;
       text-align: left;
  }

  to {
    margin-right: -10%;
   margin-top: -10%;
   width: 0%;
   text-align: right;
  }
}

 @keyframes slidein {
  from {
    margin-right : 10%;
    margin-top: 10%;
   width: 30%;
   text-align: left;
  }

  to {
    margin-right: -10%;
   margin-top: -10%;
   width: 0%;
   text-align: right;
  }
} 

#logox {
   margin-left:  30%;    

}

#pagehx {
    position:absolute;
    display: block;
    top: 50px;
   left: 90px;
   height: 140px;
     margin-top: 10px;
    width: 1200px;
    margin:0 auto;
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255,0.8);
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 3px;
    padding-top: 3px;
    font-family: Tahoma, Geneva, sans-serif;    
    
animation-duration: 5s;
 -moz-animation-duration: 5s;
-webkit-animation-duration: 5s;
-ms-animation-duration: 5s;
-o-animation-duration: 5s;


animation-name: logoin;
-moz-animation-name: logoin;
-webkit-animation-name: logoin;
-ms-animation-name: logoin;
-o-animation-name: logoin;
}



 @-moz-keyframes logoin {
   from {
   
left : -1300px;
}

to {
  
left : 90px;
}
}

 @-webkit-keyframes logoin {
   from {
   
left : -1300px;
}

to {
  
left : 90px;
}
}

 @-ms-keyframes logoin {
  f from {
   
left : -1300px;
}

to {
  
left : 90px;
}
}

 @-o-keyframes logoin {

from {
   
left : -1300px;
}

to {
  
left : 90px;
}
}

@keyframes logoin {

from {
   
left : -1300px;
}

to {
  
left : 90px;
}
}


#pageh {
    position:absolute;
    display: block;
    top: 50px;
   left: 90px;
   height: 140px;
     margin-top: 10px;
    width: 1200px;
    margin:0 auto;
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255,0.8);
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 3px;
    padding-top: 3px;
    font-family: Tahoma, Geneva, sans-serif;  
}

#pages0 {
    position:absolute;
    display: block;
    top: 220px;
   left: 90px;
   height: auto;
     margin-top: 10px;
    width: 1200px;
    margin:0 auto;
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255,0.8);
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 3px;
    padding-top: 3px;
    font-family: Tahoma, Geneva, sans-serif;
      
    



    animation-duration: 7s;
 -moz-animation-duration: 7s;
-webkit-animation-duration: 7s;
-ms-animation-duration: 7s;
-o-animation-duration: 7s;

 animation-delay: 7s;
 -moz-animation-delay: 7s;
-webkit-animation-delay: 7s;
-ms-animation-delay: 7s;
-o-animation-delay: 7s;

animation-fill-mode: backwards;
-moz-animation-fill-mode: backwards;
-webkit-animation-fill-mode: backwards;
-ms-animation-fill-mode: backwards;
-o-animation-fill-mode: backwards;


animation-name: selecteurin;
-moz-animation-name: selecteurin;
-webkit-animation-name: selecteurin;
-ms-animation-name: selecteurin;
-o-animation-name: selecteurin;
}


#pages {
    position:absolute;
    display: block;
    top: 220px;
   left: 90px;
   height: auto;
     margin-top: 10px;
    width: 1200px;
    margin:0 auto;
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255,0.8);
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 3px;
    padding-top: 3px;
    font-family: Tahoma, Geneva, sans-serif;
      
    



    animation-duration: 7s;
 -moz-animation-duration: 7s;
-webkit-animation-duration: 7s;
-ms-animation-duration: 7s;
-o-animation-duration: 7s;



animation-name: selecteurin;
-moz-animation-name: selecteurin;
-webkit-animation-name: selecteurin;
-ms-animation-name: selecteurin;
-o-animation-name: selecteurin;
}

@animation-keyframes selecteurin {
    
    from {
   
left : -1300px;
}

to {
  
left : 90px;
}
}

 @-moz-keyframes selecteurin {
   from {
   
left : -1300px;
}

to {
  
left : 90px;
}
}

 @-webkit-keyframes selecteurin {
  from {
   
left : -1300px;
}

to {
  
left : 90px;
}
}

 @-ms-keyframes selecteurin {
   from {
   
left : -1300px;
}

to {
  
left : 90px;
}
}

@-o-keyframes selecteurin {

  from {
   
left : -1300px;
}

to {
  
left : 90px;
}
}


#selecteur {    
 float:left;
 margin-top: 150px;
 margin-left: 5px;
border-radius: 5px;
width: 200px;
height: 50px;
list-style: none;
border-radius:10px;
box-shadow:
0px 22px 22px 0px rgba(0, 0, 0, 0.9),
0px 12px 12px 0px rgba(255, 255, 255, 0.5) inset;
  font-family: Tahoma, Geneva, sans-serif;
      font-size: 16px;
 font-weight: bold;
     color: #495723;
}

#selecteur img{
    margin-left: 10px;
    margin-top: 10px;
   
}



#selecteur li a:hover{
 background-color: #700e0b;

}

@font-face{
    font-family: "DejaVuSans-Bold";
    src: url("DejaVuSans.ttf");
}

#home, #home1 {
    top: 100px;      
    float: right;
  width :950px;
  height: auto;
 display: block;
margin : 20px;
box-shadow: 0 22px 22px 0 rgba(0, 0, 0, 0.8), 0 12px 12px 0 rgba(255, 255, 255, 0.5) inset;
}


#home img{  
    float: left;
  margin: 10px;

}


#home1 img{  
    float: left;
  margin: 10px;

}

#home a{
       float: left;
  margin: 5px;
   color: #495723 ;
   text-decoration: none;
}

#home1 a{
       float: left;
  margin: 5px;
   color: #700e0b;
   text-decoration: none;
} 

#home a:hover  {
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.8);
     
}
 
#home1 a:hover  {
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.8);
     
}

#home p, #home1 p{
      font-family: Tahoma, Geneva, sans-serif;
      font-size: 16px;
 font-weight: bold;
     color: #495723 ;
    border-bottom: 1px solid transparent;
  border-color:  #495723 ;
     box-shadow: 0 22px 22px 0 rgba(0, 0, 0, 0.8), 0 12px 12px 0 rgba(255, 255, 255, 0.5) inset;
}

.selectid {
    
border : 3px black ridge;
border-radius: 5px 5px 5px 5px;
/*box-shadow: 2px 2px 12px #555 ;*/

}

#banniere{
      
    float: right;
  width :600px;
  height: 120px;
 display: block;

margin-bottom: 10px;
  /*  border-bottom: 3px solid;
    border-color:  #700e0b;
  border-radius: 10px 10px 10px 10px;
box-shadow: 0 22px 22px 0 rgba(0, 0, 0, 0.8), 0 12px 12px 0 rgba(255, 255, 255, 0.5) inset;*/
  
}

#banniere li{  
          display: none;
     list-style: none;
    float: right;
   width :600px;
  height: 90px;
  margin-right: 10px;
  text-align:justify;
 text-justify:inter-word;
  font-family: Tahoma, Geneva, sans-serif;
      font-size: 17px;   
 
 -moz-animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
-ms-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-name: bannierein;
-webkit-animation-name: bannierein;
-ms-animation-name: bannierein;
-o-animation-name: bannierein;
}

@-moz-keyframes bannierein {
  from {
    display: none;
  }

  to {
    display: block;
  }
}

 @-webkit-keyframes bannierein {
  from {
    display :none;
  }

  to {
    display: block;
  }
}

 @-ms-keyframes bannierein {
  from {
    display :none;
  }

  to {
    display: block;
  }
}

 @-o-keyframes bannierein {
  from {
    display :none;
  }

  to {
    display: block;
  }
}

#piedpage {
    display: inline-block;  
 float: right;
   height: 70px;
     margin-top: 15px;
     margin-bottom: 15px;  
   margin-right: 20px;
      margin-left: 20px;   
    width: 1150px; 
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255,0.5);
        box-shadow:
0px 22px 22px 0px rgba(0, 0, 0, 0.9),
0px 12px 12px 0px rgba(255, 255, 255, 0.5) inset;
     color: #700e0b ;
      font:bold medium sans-serif;
    font-size: 11px;
 
}

#piedpage img{
    height: 30px;
    width: 40px;
    float: right;
  margin-right: 10px;
  margin-top: 10px;
     
}

#piedpage figure{
    display: inline-block;
       height: 40px;
    width: 50px;
    margin-right: 25px;
    float: right;
    
}

fieldset
{
    
margin-left: 50px;
margin-top: 20px;
margin-bottom:  20px;

  max-width:800px;
  padding:10px;
  font-family: Tahoma, Geneva, sans-serif ;
    font-size: 16px;
    font-style: normal;
       color: #700e0b ;
   border: 1px solid transparent;
    border-radius: 5px;
    border-color: #700e0b ;
box-shadow:
0px 22px 22px 0px rgba(0, 0, 0, 0.5),
0px 12px 12px 0px rgba(255, 255, 255, 0.2) inset;
}

legend
{
  margin-bottom:-20px;
  margin-left:16px;
}

input{
    border: 1px solid transparent;
    border-radius:5px;
box-shadow:
0px 22px 22px 0px rgba(0, 0, 0, 0.5),
0px 12px 12px 0px rgba(255, 255, 255, 0.2) inset;

}

#menu{
 
}

#onglets{
  background-color: rgb(255, 255, 255);
 background-color: rgba(255, 255, 255,0.5);
 height: auto;
 margin-top: 5px;
 margin-left: 300px;
    font:bold medium sans-serif;
    font-size: 14px;
    list-style: none;
  
    width: 1100px;
  }


#onglets li{
    text-align: center;
    float: left;
    height: 25px;
    font-size: 14px;
    width: 100px;
/*background-image: url("../images/FlorCacaof.png");*/
        color: #495723 ;
       border: 1px solid transparent;
       border-radius: 50px;
  border-color:#700e0b ;
margin-left: 15px;
}

#onglets li:hover {
    background-color: rgb(255, 255, 255);
    background-color: rgba(255,255,255,0.8);
    border-bottom: 1px solid #9EA0A1;  
        color: #7b8859;
}

#onglets li.active{
    background-color: rgb(255, 255, 255);
    background-color: rgba(255,255,255,0.8);
    border-bottom: 1px solid #9EA0A1; 
        color: #700e0b;
}

#onglets li:hover > .sousmenu {
overflow: hidden;
display: block;
}

 #onglets a{
     display: block;
     color: #700e0b ;
     text-decoration: none;
     padding: 4px;
    text-align: center;
}



#onglets a:hover{

   font-style: strong;
  color: red;
}

#onglets .sousmenu{
    position: relative;
      z-index: 1;
 width: 300px;
 background-color: rgb(255, 255, 255);
background-color: rgba(255,255,255,0.8);
display: none;
list-style-type: none;

border: 1px solid transparent;
border-color:#700e0b ;

padding: 0;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 22px 22px 0 rgba(0, 0, 0, 0.8), 0 12px 12px 0 rgba(255, 255, 255, 0.5) inset;
}

#onglets .sousmenu li {
font-size:14px;
font-family: Tahoma, Geneva, sans-serif;
float: none;
margin: 0;
padding: 0;
border: 0;
width: 350px;

}

#onglets .sousmenu a{
background-color: transparent;
display: block;
text-decoration: none;
text-align:left;
}

#onglets .sousmenu li a:link,
#onglets .sousmenu li a:visited
{
display: block;
 margin: 0;
border: 0;
text-decoration: none;
}

#onglets .sousmenu li a:hover
{
    background-color: rgb(255, 255, 255);
   background-color: rgba(255,255,255,0.8);
    font-style: strong;
    color: black;
}

#rubrique {
list-style: none;
     display: block;
float: left;
   height: 50px;
     margin-top: 10px;
     margin-bottom: 10px;  
     margin-right: 10px;
    width: 1200px; 
     color: #700e0b ;
      font:bold sans-serif;
    font-size: 29px;
    font-family: Tahoma, Geneva, sans-serif;
   text-align : center;
    
}

#rubrique a{
     color: #700e0b ;
   
}
#articles {

   display: block;
   height: auto;
     margin-top: 10px;
     margin-bottom: 10px;  
     margin-right: 10px;
    width: 1200px; 
     color: #700e0b ;
      font:bold sans-serif;
    font-size: 29px;
    font-family: Tahoma, Geneva, sans-serif;

    
}

#article {
   display: block;
float: right;
   height: auto;
     margin: 20px;
    width: 1000px; 
    box-shadow: 0 22px 22px 0 rgba(0, 0, 0, 0.8), 0 12px 12px 0 rgba(255, 255, 255, 0.5) inset;
    
}

#article img {
   
    float: left;
    margin: 10px;
}

#article img:hover{
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5, 1.5);
transform: scale(1.5)
}





#article a:hover  {
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.8);
     
}





#titre {   
    font-family: Tahoma, Geneva, sans-serif;
      font-size: 16px;
      font-style: italic;
     color: #495723 ;
    font-weight: bold; 
    margin: 20px;
}

#article p {
   width: 500px;
    float: left;
      text-align:justify;
text-justify:inter-word;
  font-family: Tahoma, Geneva, sans-serif;
      font-size: 16px;
      font-style: italic;
     color: #495723 ;
    font-weight: bold;
   margin: 20px;
    
}

#article a{
    float: right;
    margin: 20px;
     font-size: 12px;
    font-family: Tahoma, Geneva, sans-serif;
    font-style: italic;
    font-weight: bold;
    color: #700e0b ;
   width: 300px;
   text-align: center;
}

#texte{
   margin:20px;
   height: auto;
   width: 800px;
}
#texte p{
    width: 700px;
}