html{ 
     background-color: #50586b; 
     margin: 0; padding: 0; 
     }

body{ font-weight: normal; text-decoration: none; position: relative; }         

.nav{ background-image: url(../imgs/btnav.png); 
      background-repeat: no-repeat; 
      position: absolute; 
      top: 3px; 
      left: 3px; 
      width: 45px; 
      height: 45px; 
      display: block; 
      }

.nav:link{ background-image: url(../imgs/btnav.png); 
       background-repeat: no-repeat; 
       position: absolute; 
       top: 3px; 
       left: 3px; 
       width: 45px; 
       height: 45px; 
       display: block; 
       }  


.menu{ color: #fff; background-image: url(../imgs/backblack.png); 
       background-repeat: repeat; 
       position: fixed; 
       top: 70px; 
       left: 0; 
       width: 390px; 
       height: 280px; 
       z-index: 999; 
       margin-right: 8px; 
       margin-left: 8px; 
       padding: 10px; 
       display: block; 
       }

.deva{ 
     background-color: #3c9d12; 
     background-repeat: repeat; 
     text-align: left; 
     position: absolute; 
     top: 0; 
     left: 410px; 
     width: 650px; 
     float: left; 
     margin-left: 5px; 
     padding: 10px 10px 10px 20px; 
     -webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.53);
     -moz-box-shadow:    4px 4px 5px 0px rgba(50, 50, 50, 0.53);
     box-shadow:         4px 4px 5px 0px rgba(50, 50, 50, 0.53);
     }
     
.deva a{ color: #fff; font-size: 16px; }

.deva a:link{ color: #fff; font-size: 16px; }

.deva a:hover{ color: #000; }     

.devb{ 
     background-color: #deaf39; 
     background-repeat: repeat; 
     text-align: left; 
     position: absolute; 
     top: 0; 
     left: 410px; 
     width: 650px; 
     float: left; 
     margin-left: 5px; 
     padding: 10px 10px 10px 15px; 
     -webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.53);
     -moz-box-shadow:    4px 4px 5px 0px rgba(50, 50, 50, 0.53);
     box-shadow:         4px 4px 5px 0px rgba(50, 50, 50, 0.53);
     }

.devb a{ color: #fff; font-size: 16px; }

.devb a:link{ color: #fff; font-size: 16px; }

.devb a:hover{ color: #000; font-size: 16px; }



.devc{ width: 10%; float: left; padding: 10px; }           
       
 a{color: #fff; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; } 
 
 a:link{color: #fff; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
 
 a:hover{color: #ccc; }
 
 ul{ margin: 0 0 0 20px; padding: 0; } 
 
 li{ 
      font-size: 18px; 
      font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; 
      font-weight: normal; 
      font-style: normal; 
      margin: 5px 0 0; 
      padding: 0; 
      list-style-type: decimal; 
      list-style-position: outside; 
      }    
       
       
 .acceuil a{
    color: #fff;
 
 
 }      
       
       
       
.title{ color: #2e2f34; font-size: 28px; font-family: Helvetica, Arial, Geneva, SunSans-Regular, sans-serif; font-weight: normal; font-style: normal; text-decoration: none; text-align: center; width: 780px; margin: auto; padding: 13px 10px 12px; }



.logo{ background-image: url(../imgs/LogoBCS.png); 
       background-repeat: no-repeat; 
       position: absolute; 
       top: 0; right: 10px; 
       width: 50px; 
       height: 49px; 
       margin-top: 2px; 
       display: block; 
       }

.logo:link{

}


.logo:hover{

}


.header{ background-color: #cee6e9; position: relative; height: 55px; display: block; }

       .contener{ 
          background-image: url(../imgs/bassins-versants.png); 
          background-repeat: no-repeat; 
          background-position: 15px 0; 
          position: relative; width: 1000px; 
          height: 620px; 
          margin: 10px auto auto; 
          padding: 30px; 
          display: block; 
          }
       
       
       .bt { color: #fff; 
          font-size: 30px; 
          font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif; 
          font-weight: lighter; 
          font-style: normal; 
          line-height: normal; 
          background-image: url(../imgs/Sprite.png); 
          background-repeat: no-repeat; 
          background-position: -6px -92px; 
          text-decoration: none; 
          text-align: center; 
          left: 130px; 
          width: 60px; 
          height: 42px; 
          vertical-align: middle; 
          padding-top: 10px; 
          display: block; 
          }
       
       .bt:link { 
            color: #fff; 
            font-size: 30px; 
            font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif; 
            font-weight: lighter; 
            font-style: normal; 
            line-height: normal; 
            background-image: url(../imgs/Sprite.png); 
            background-repeat: no-repeat; 
            background-position: -6px -92px; 
            text-decoration: none; 
            text-align: center; 
            left: 130px; 
            width: 60px; 
            height: 42px; 
            vertical-align:middle; 
            padding-top: 10px; 
            display: block; 
            } 
       
       .bt:hover { 
           color: #fff; 
           font-weight: lighter; 
           background-image: url(../imgs/Sprite.png); 
           background-repeat: no-repeat; 
           background-position: -77px -92px; 
           text-decoration: none; 
           display: block; 
           }
  
       /*POSITIONS*/
       #bt1{ position: absolute; font-weight: 400; top: 435px; left: 155px; z-index: 99; }
  
       #bt2{ position: absolute; font-weight: 400; top: 385px; left: 210px; z-index: 99; }
       
       #bt3{ position: absolute; font-weight: 400; top: 400px; left: 430px; z-index: 99; }
       
       #bt4{ position: absolute; font-weight: 400; top: 330px; left: 450px; z-index: 99; }
       
       #bt5{ position: absolute; font-weight: 400; top: 310px; left: 400px; z-index: 99; }
       
       #bt6{ position: absolute; font-weight: 400; top: 292px; left: 115px; z-index: 99; }
       
       #bt7{ position: absolute; font-weight: 400; top: 259px; left: 188px; z-index: 99; }
       
       #bt7b{ position: absolute; font-weight: 400; top: 330px; left: 83px; z-index: 99; }
       
       #bt8{ position: absolute; font-weight: 400; top: 110px; left: 815px; z-index: 99; }
       
       #bt9{ position: absolute; font-weight: 400; top: 287px; left: 784px; z-index: 99; }
       
       #bt10{ position: absolute; font-weight: 400; letter-spacing: -5px; top: 200px; left: 660px; z-index: 99; }
       
       
       .btb { 
         color: #000; 
         font-size: 30px; 
         font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif; 
         font-weight: lighter; 
         font-style: normal; 
         background-image: url(../imgs/Sprite.png); 
         background-repeat: no-repeat; 
         background-position: -12px -14px; 
         text-decoration: none; 
         text-align: center; 
         vertical-align: middle; 
         left: 130px; width: 50px; 
         height: 42px; 
         padding-top: 9px; 
         display: block; 
         }
        
       .btb:link { 
          color: #000; 
          font-size: 30px; 
          font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif; 
          font-weight: lighter; 
          font-style: normal; 
          background-image: url(../imgs/Sprite.png); 
          background-repeat: no-repeat; 
          background-position: -12px -14px; 
          text-decoration: none; 
          text-align: center; 
          left: 130px; 
          width: 50px; 
          height: 42px; 
          padding-top: 9px; 
          display: block; 
          }  
          
       .btb:hover { 
          font-weight: lighter; 
          font-style: normal;
          background-image: url(../imgs/Sprite.png); 
          background-repeat: no-repeat; 
          background-position: -83px -14px; 
          text-decoration: none; 
          display: block; 
          }      
  
          
      #bt11{ position: absolute; font-weight: 400; top: 380px; left: 40px; z-index: 99; }
      
      #bt12{ position: absolute; font-weight: 400; top: 285px; left: 255px; z-index: 99; }
      
      #bt13{ position: absolute; font-weight: 400; top: 210px; left: 320px; z-index: 99; }
      
      #bt14{ position: absolute; font-weight: 400; top: 180px; left: 450px; z-index: 99; }
      
      #bt15{ position: absolute; font-weight: 400; top: 263px; left: 710px; z-index: 99; }
      
      #bt16{ position: absolute; font-weight: 400; top: 193px; left: 544px; z-index: 99; }
      
      #bt17{ position: absolute; font-weight: 400; top: 156px; left: 739px; z-index: 99; }
      
      
     /* Class popup  */
     .popup{ 
          background-image: url(../imgs/back20.png); 
          background-repeat: repeat; 
          position: fixed; 
          top: 0; 
          left: 0; 
          width: 100%; 
          height: 100%; 
          z-index: 999; 
          }
     
     .popinfos{ 
         background-image: url(../imgs/backblack.png); 
         background-repeat: repeat; 
         position: absolute; 
         right: 30px; 
         bottom: 100px; 
         width: 350px; 
         z-index: 30; 
         padding: 20px; 
         cursor: default; 
         display: block; 
         }
     
     .popgreen{ 
         background-color: #3c9d12; 
         background-repeat: repeat; 
         position: absolute; 
         top: 70px; 
         left: 25px; 
         width: 600px; 
         height: 560px; 
         z-index: 980; 
         padding: 10px; 
         cursor: default; 
         display: block; 
         -webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.53);
         -moz-box-shadow:    4px 4px 5px 0px rgba(50, 50, 50, 0.53);
         box-shadow:         4px 4px 5px 0px rgba(50, 50, 50, 0.53);
         
         
         
         }
     
     .popred{ background-color: #deaf39; background-repeat: repeat; position: absolute; top: 70px; left: 25px; width: 600px; height: 600px; z-index: 980; padding: 10px; cursor: default; display: block; -webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.53); -moz-box-shadow:    4px 4px 5px 0px rgba(50, 50, 50, 0.53); box-shadow:         4px 4px 5px 0px rgba(50, 50, 50, 0.53); }
    
    
     .btcloseinfos{ 
          background-image: url(../imgs/btclose.png); 
          background-repeat: no-repeat; 
          position: absolute; 
          right: 8px; 
          bottom: 20px; 
          width: 50px; 
          height: 50px; 
          z-index: 99; 
          display: block; 
          }
     
     .btclose{ color: #50586b; font-size: 20px; font-family: Helvetica, Arial, Geneva, SunSans-Regular, sans-serif; font-weight: bold; font-style: normal; background-color: #fff; background-image: url(../imgs/close.png); background-repeat: no-repeat; background-position: -8px -8px; text-decoration: none; text-align: center; vertical-align: middle; position: absolute; right: 8px; bottom: 20px; width: 20px; height: 20px; z-index: 9999; padding: 5px; display: block; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; }

     .btclose:link{ font-size: 20px; font-family: Helvetica, Arial, Geneva, SunSans-Regular, sans-serif; font-weight: bold; font-style: normal; background-color: #fff; background-image: url(../imgs/close.png); background-repeat: no-repeat; background-position: -8px -8px; text-decoration: none; text-align: center; vertical-align: middle; position: absolute; right: 8px; bottom: 20px; width: 20px; height: 20px; z-index: 9999; padding: 5px; display: block; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; }
     
     .btclose:hover{ font-style: normal; background-image: url(../imgs/close.png); background-repeat: no-repeat; background-position: -8px -8px; z-index: 9999; }
     
     h1{ font-size: 25px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: normal; font-style: normal; text-decoration: none; margin-left: 50px; }
     
     h2{ font-size: 18px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: normal; font-style: normal; text-decoration: none; margin: 0; padding: 0; }
     
     h3{ font-size: 22px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: normal; font-style: normal; text-decoration: none; margin: 0 0 10px; padding: 0; }
     
     p{ color: #000; font-size: 20px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: normal; text-decoration: none; margin-left: 50px; }
     
     span{font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;font-weight: normal; text-decoration: none;}
     
     
     
     .numbred{ 
           color: #000; 
           font-size: 27px; 
           font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif; 
           font-weight: lighter; 
           font-style: normal; 
           text-decoration: none; 
           text-align: center; 
           vertical-align: middle; 
           position: absolute; 
           top: 20px; 
           left: 10px; 
           width: 35px; 
           height: 32px; 
           padding-top: 3px;
           border: solid 3px; 
           display: block; 
           -webkit-border-radius: 50px; 
           -moz-border-radius: 50px; 
           border-radius: 50px; 
           }
     
     .numbgreen{ 
           color: #fff; 
           font-size: 27px; 
           font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif; 
           font-weight: lighter; 
           text-decoration: none; 
           text-align: center; 
           vertical-align: middle; 
           position: absolute; 
           top: 20px; 
           left: 10px; 
           width: 35px; 
           height: 32px; 
           padding-top: 3px; 
           border: solid 3px; 
           display: block; 
           -webkit-border-radius: 50px; 
           -moz-border-radius: 50px; 
           border-radius: 50px; 
           }

    .trouge{ color: #deaf39; }
    
    .tvert{ color: #5fe448; }
    
    .tr{ color: #deaf39; }
    
    .tv{ color: #6fc830; }
    
    img{ margin-right: 10px; }
    
    .legende { color: #fff; font-size: 16px; }
    
    .blanc{ color: #fff; }
    
    .dev { }
    
    .sousmenu { 
       color: #fff; 
       font-size: 18px; 
       font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; 
       width: 100%; 
       margin-top: 10px; 
       margin-bottom: 10px; 
       padding-top: 20px; 
       }
       
     .credit { background-image: url(../imgs/backblack.png); text-decoration: none; position: absolute; top: -10px; left: 420px; width: 500px; height: 300px; margin-top: 10px; margin-bottom: 10px; padding: 10px; display: block; }   
      
     .credit p{ color: #fff; font-size: 15px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: normal;} 
       
     .btretour{ background-color: #fff; background-image: url(../imgs/tetour.png); background-repeat: no-repeat; position: absolute; right: 50px; bottom: 20px; width: 29px; height: 29px; z-index: 999; border: solid 1px #fff; display: block; }  
       
     .btretourr{ background-color: #fff; background-image: url(../imgs/tetour.png); background-repeat: no-repeat; position: absolute; right: 50px; bottom: 20px; width: 29px; height: 29px; z-index: 999; border: solid 1px #fff; display: block; }


#preloader  { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #fefefe; width: 100% !important; z-index: 999; height: 100%; }

#status  {
     width: 200px;
     height: 200px;
     position: absolute;
     left: 50%;
     top: 50%;
     background-image: url(../imgs/loader.gif);
     background-repeat: no-repeat;
     background-position: center;
     margin: -100px 0 0 -100px;
 }
 
 
 @media screen and (max-width: 1024px) {
  .popinfos{ position: absolute; top: 380px; left: 650px; width: 350px; height: 180px; z-index: 99; }
  
  .popgreen { 
    background-color: #3c9d12; 
    background-repeat: repeat; 
    box-shadow: 4px 4px 5px 0 rgba(50, 50, 50, 0.53); 
    cursor: default; 
    display: block; 
    height: 580px; 
    left: 8px; 
    position: absolute; 
    top: 70px; 
    width: 600px; 
    z-index: 980; 
    padding: 5px 5px 5px 10px; 
    }
    
    .popred {
    background-color: #eb0000;
    background-repeat: repeat;
    box-shadow: 4px 4px 5px 0 rgba(50, 50, 50, 0.53);
    cursor: default;
    display: block;
    height: 580px;
    left: 7px;
    padding: 5px;
    position: absolute;
    top: 70px;
    width: 600px;
    z-index: 980;
    }
  
  p{ font-size: 18px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; }
  
  .deva { background-color: #3c9d12; background-repeat: repeat; box-shadow: 4px 4px 5px 0 rgba(50, 50, 50, 0.53); float: left; left: 410px; margin-left: 5px; position: absolute; text-align: left; top: 0; width: 580px; padding: 10px 10px 10px 15px; }
    
    .deva a {
    color: #fff;
    font-size: 14px;
    }
    
    .deva a:link {
    color: #fff;
    font-size: 14px;
    }
    
   .devb { background-color: #deaf39; background-repeat: repeat; box-shadow: 4px 4px 5px 0 rgba(50, 50, 50, 0.53); float: left; left: 410px; margin-left: 5px; position: absolute; text-align: left; top: 0; width: 500px; padding: 10px 10px 10px 15px; }
    
    .title{ color: #2e2f34; font-size: 28px; font-family: Helvetica, Arial, Geneva, SunSans-Regular, sans-serif; font-weight: normal; font-style: normal; text-decoration: none; text-align: center; margin: auto; padding: 13px 10px 12px; }
    .contener { background-image: url(../imgs/bassins-versants.png); background-position: 15px 0; background-repeat: no-repeat; display: block; height: 620px; position: relative; width: 1000px; margin-top: -30px; margin-left: -25px; padding: 30px; } 
    
    .logo{ background-image: url(../imgs/LogoBCS.png); 
       background-repeat: no-repeat; 
       position: absolute; 
       top: 0; right: 10px; 
       width: 50px; 
       height: 49px; 
       margin-top: 2px; 
       display: block; 
       }
    .header{ background-color: #cee6e9; position: relative; width: 1024px; height: 55px; display: block; }
    
    
         .numbred{ 
           color: #fff; 
           font-size: 27px; 
           font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif; 
           font-weight: lighter; 
           font-style: normal; 
           text-decoration: none; 
           text-align: center; 
           vertical-align: middle; 
           position: absolute; 
           top: 20px; 
           left: 10px; 
           width: 35px; 
           height: 32px; 
           padding-top: 0px;
           border: solid 3px; 
           display: block; 
           -webkit-border-radius: 50px; 
           -moz-border-radius: 50px; 
           border-radius: 50px; 
           }
     
     .numbgreen{ 
           color: #fff; 
           font-size: 27px; 
           font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif; 
           font-weight: lighter; 
           text-decoration: none; 
           text-align: center; 
           vertical-align: middle; 
           position: absolute; 
           top: 20px; 
           left: 10px; 
           width: 35px; 
           height: 32px; 
           padding-top: 0px; 
           border: solid 3px; 
           display: block; 
           -webkit-border-radius: 50px; 
           -moz-border-radius: 50px; 
           border-radius: 50px; 
           }
  
}