html{
    height:100%;
}

body{
    font-size:12px; 
    text-align:left; 
    font-family:verdana; 
    background-color:white;
    background-image:url(../image/headerbg.png);
    background-repeat:repeat-x;
    height:100%;
    margin:0px 0px 0 0;
}

a{
    color:black;
    text-decoration:none;
}

a:hover{
    font-weight:bold;
}

.input{
    text-overflow:ellipsis;
    width:200px;
    border:1px solid #cccccc;
    height:18px;
    font-size:12px;
    border-radius:2px;
    -webkit-border-radius:2px;
    padding:0 0 2px 2px;
    font-style:italic;
}

.input:hover{
    border:1px solid #df7925;
}

.select{
    width:205px;
    border:1px solid #cccccc;
    height:20px;
    font-size:12px;
    border-radius:2px;
    -webkit-border-radius:2px;
}

.select:hover{
    border:1px solid #df7925;
}

.textarea{
    border:1px solid #dddce1;
    font-size:12px;
    border-radius:2px;
    -webkit-border-radius:2px;
    padding:0 0 2px 2px;
    font-family:verdana; 
}

.radio{
    margin:0 5px 0 15px;
}

.checkbox{
    margin:0 5px 0 15px;
}

.textarea:hover{
    border:1px solid #df7925;
}

.required, #required{
    background-color:transparent;
    background-image:url("../image/obligatoire.png");
    background-repeat:no-repeat;
    background-attachment:scroll;
    background-position:left top;
    padding-left:10px;
}

fieldset{
    border:1px #dddce1 solid;
}

h1{
    margin:10px 0 20px 0;
}

h2{
    font-size:15px;
    margin:20px 0 20px 0;
    padding:5px 0 0 10px;
    background-image:url("../image/bg-sstitre.jpg");
    height:23px;
    width:403px;
    color:#5c514e;
}

h3{
    margin:0px 0 20px 0;
}

h2 a{
    color:#5c514e;
}
hr{
    color:#FFF;
    border-top:solid 1px #FFF;
    text-align:left;
    margin:10px 0 10px 0;
}
hr.style1{
    color:#2d3870;
    border-top:solid 1px #CCCCCC;
    text-align:left;
    margin:10px 0 10px 0;
}

.bouton{
    width:120px;
    height:22px;
    background-color:#dddce1;
    color:#888888;
    margin:15px 0 5px 0px;
    cursor:pointer;
}

.bouton:hover{
    border:1px solid #df7925;
    color:black;
}

table td{
    height:22px;
    padding:0 10px 0 15px;
}

table.table{
    border-collapse: collapse;
    text-align:center;
    margin:0px;
    clear:both;
}

table.table tbody{
    margin:0px;
}

table.table th{
    height:25px;
    text-align:center;
    border:1px black solid;
    color:white;
    background-color:#5c514e;
    padding:0 10px 0 10px;
}

table.table td{
    border:1px black solid;
    color:black;
}

table.table td img{
    padding:5px;
}

fieldset.fieldset{
    width:760px;
    padding:10px;
}	
/*************************
   GLOBAL
*************************/
#global{
    min-height:100%;
    height: auto !important;
    margin:0px auto 0 auto;
}

/*************************
   BANNIERE
*************************/
#banniere{
    height:137px;
    padding: 0 100px;
    width: 800px;
    background-image:url(../image/banner-public.jpg);
    background-repeat:no-repeat;
    background-position:center; 
    margin: 0 auto;
    position: relative;
}

#banniere-public{
    height:137px;
    padding: 0 100px;
    width: 800px;
    background-position:center; 
    background-image:url(../image/banner-public.jpg);
    background-repeat:no-repeat;
    margin: 0 auto;
    position: relative;
}

#logo{
    z-index:2;
    margin:30px 0 0 15px;
    float:left;
}

#flash{
    margin:0 0 0 500px;
    z-index:1;
}

/*************************
        CONTENT
*************************/
#content{
    width:800px;
    background:url(../image/bg.png);
    background-repeat:no-repeat;
    margin:0 auto 0 auto;
    padding:0 100px 0 100px;
    background-position:0 35px;
}

/*************************
   COLONNE
*************************/
#col_top{
    width:800px;
    height:35px;
    background-image:url(../image/menubg.png); 
}

#col_bot{
    width:790px;
    padding:0 0 100px 10px;
    min-height:600px;
}

/*************************
   MENU
*************************/
ul#menu {
    height:35px;
    width:800px;
    list-style:none;
    float:left;
}

ul#menu  li{
    margin: 0;
    padding: 0;
    list-style: none;
    display: table-cell;
    float: left;
    position: relative;
}

ul#menu  a{
    cursor:pointer;
    position: relative;
    padding: 10px 15px 10px 15px;
    color: #fff;
    display: block;
    text-decoration: none;
    text-align:center;
    float: left;
    height:15px;
}

ul#menu  li.current{
    height:35px;
    background-image:url(../image/menubgvisited.png);
}

ul#menu  li#current a:hover{
    background: none;
    background-color:#e59344;
}

ul.sous_menu{
    padding: 0;
    display: block;
    position: absolute;
    z-index: 999;
    top: 100%;
    display: none;
    left: 0;
}

ul.sous_menu ul.sous_menu{
    top: 0;
    left: 95%;
}

ul.sous_menu li{
    float: none;
    position: relative;
    list-style: none;
    display: none;
    background-color:#2d2724;
}

ul#menu li a:hover{
    font-weight:normal;
    background-color:#444444;
}

ul#menu li#current a:hover{
    font-weight:normal;
    background-color:#444444;
}

ul#menu .sous_menu a{
    text-align:left;
    width:150px;
}

ul.sous_menu li a{
    font-style:none;
    height:20px;
}

div#infos_connexion{
    width:245px;
    height:35px;
    margin:0px 0 0 -10px;
    background-image:url(../image/connectzone.png);
    float:right;
}

div#infos_connexion a{
    font-size:11px;
    margin:12px 13px 0 0;
    padding:0;
    color:black;
}

div#infos_connexion a span{
    font-size:10px;
    margin:0 0 0 5px;
    float:left;
    width:130px;
    text-align:center;
    font-weight:bold;
}

div#infos_connexion a:hover{
    font-weight:normal;
    color:#888888;
}

div#new_connexion{
    width:197px;
    height:35px;
    line-height: 35px;
    background-image:url(../image/connectzone.png);
    text-align:center;
    bottom: 5px;
    position: absolute;
    bottom: 0;
    right: 100px;  
    display: inline-block;
}

div#new_connexion span{
    display:inline-block;
    vertical-align:middle;
}

div#new_connexion a{
    font-size:10px;
    color:black;
}

div#new_connexion a:hover{
    font-weight:normal;
    color:#777777;
}

/*************************
   FOOTER
*************************/
#footer{
    clear:both;
    width:100%;
    color:white;
    height:80px;
    margin:-81px 0 0 0;
    font-size:10px;
    border-top:1px solid black;
    background-image:url(../image/footer.png); 
    background-repeat:repeat-x;
    background-color:#302b28;
    text-align:center;
}

#footercontent{
    width:1000px;
    text-align:center;
    margin:0 auto 0 auto;
    padding:10px 0 0 0;
}

#footer span{
    margin:2px 0 0 100px;
    float:left;
}

#footer ul li{
    text-align:left;
}

#footer ul li a{
    border:0; 
    text-decoration:none;
    color:white;
    text-align:left;
}

#footer img{
    border:0; 
    margin:-2px 0 0 5px; 
    float:left;
}

#footer img.barre{
    float:left;
    margin:2px 5px 0 10px;
}

#footer-left{
    float:left;
    width:180px;
    margin:15px 0 0 0;
}

#footer-teamp{
    text-align:left;
    float:left;
    margin:0 150px 0 0;
}

#footer-center{
    float:left;
    width:70px;
}

#footer-mc2{
    text-align:left;
    float:left;
    margin:0 135px 0 0;
}

#footer-right{
    float:left;
    margin:0px 0 0 0;
}

/*************************
  ADMIN
*************************/
#connexion, #forgot, #recovery{
    width:500px;
    margin-top:100px;
    margin-left: auto;
    margin-right: auto;
}

#connexion fieldset, #forgot fieldset, #recovery fieldset {
    border:1px solid #cccccc;
    background:white;
    border-radius:5px;
    -webkit-border-radius:5px;
    z-index:1;
    padding:0.5em 1em 1em;
    margin-bottom:0.5em;
}

#modifier_formulaire table{
    margin:10px 0 10px 0;
}

#modifier_formulaire .text_formulaire{
    border:1px dashed gray;
    padding:2px 3px;
    vertical-align:top;
    cursor:default;
    background-color:#f0f0f0;
    width:200px;
    font-size:12px;
    text-align:center;
}

#modifier_formulaire .textarea_formulaire{
    border:1px dashed gray;
    padding:2px 3px;
    vertical-align:top;
    cursor:default;
    background-color:#f0f0f0;
    width:600px;
    height:50px;
    font-size:12px;
}

#modifier_formulaire .textarea_formulaire span{
    margin:15px 0 0 250px;
    float:left;
}

#modifier_formulaire .radio_formulaire span{
    margin:0 10px 0 0;
    font-size:12px;
}

#modifier_formulaire .checkbox_formulaire span{
    margin:0 10px 0 0;
    font-size:12px;
}

#modifier_formulaire .select_formulaire span{
    margin:0 10px 0 0;
    font-size:12px;
}

#supprimer{
    background-color:white;
    margin:0 0 0 30px;
    width:34px;
    height:34px;
    border:1px solid #bcc7d4;
    cursor:pointer;
    -webkit-border-radius:2px;
    border-radius:2px;
    border-radius:2px
}

#supprimer img{
    margin:4px 0 0 4px;
}

#supprimer_hover{
    background-color:#f38621;
}

#niveau_admin{
    margin:20px 0 0 0;
}

#ajout{
    margin:0 0 20px 0;
}

/*************************
  DIVERS
*************************/
#pagination {
    margin-top:10px;
}

.paginationpic {
    margin: 0 10px -4px 10px;
}

#pagination a:hover{
    font-weight:normal;
    color:#888888;
}

.returnbutton{
    display:block;
    margin:20px 0 0 0;
}

.returnbuttontop{
    display:block;
    float:right;
    margin:-40px 20px 0 0;
    padding:3px 0 0 25px;
    height:30px;
    color:#5c514e;
    background-image:url(../image/return.png);
    background-repeat:no-repeat;
}

.returnbuttontop:hover{
    background-image:url(../image/returnhover.png);
    background-repeat:no-repeat;
    font-weight:normal;
    color:#555555;
}

#print{
    margin:680px 0 0 1250px;
    position:absolute;
    display:none;
}

.addButton{
    background-image:url(../image/addButtonempty.png);
    background-repeat:no-repeat;
    font-size:12px;
    padding:5px 16px 6px 30px;
    color:#444444;
}

.addButton:hover{
    background-image:url(../image/addButtonEmptyHover.png);
    width:90px;
    height:25px;
    font-weight:normal;
    color:#666666;
}

.webcam{
    margin:auto;
}

#supervision_cam{
    /*
position:absolute;
top:180px;
margin:0 0 0 -410px;
width:390px;
    */
}

#menu_visualisation{
    width:600px;
    margin:0 0 0 20px;
}

#menu_visualisation a button{
    margin:20px 40px 0 10px;
}

.button{
    height:35px;
    cursor:pointer;
    background-color:white;
    color:#336699;
    padding: 0 20px 0 0;
}

.button:hover{
    color:#529214;
}

#text-content{
    padding:10px 80px 0 40px;
}

#accordion{
    margin-right:20px;
    width:700px;
}

#bottomlink{
    margin:40px 0px 0px 30px;
}

#bottomlink a{
    color:#1c94c4;
    font-family:Trebuchet MS, Tahoma, Verdana, Arial, sans-serif;
}

#contact-info{display:block; float:left; width:370px; padding-left:30px; margin: 30px 0 0 0;}
#contact-info p{}
#contact-info img{float:right; margin-right:80px;}
#contact-form{display:block; float:left; width:370px; margin: 30px 0 0 0;}

/*************************
  L�gende
*************************/
#legend{
    position:fixed;
    height:40px;
    width: 100%;
    bottom:0;
    background-color:#CCCCCC;
}

.legend-item{
    margin:2px 0 0 10px;
    float:left;
}

#name_item{
    margin:7px 10px 0 0; 
    float:left;
}

#img_item{
    margin:0 10px 0 0; 
    float:left;
}

.map{
    clear:both;
    margin:0 0 0 -10px;
}

#map{
    text-align:center;
}

#status_item{
    margin:7px 10px 0 0; 
    float:left; 
    font-weight:bold;
}

#itemform fieldset{
    width:200px;
    height:300px;
    padding:10px;
    position:absolute;
    margin:0 0 0 -250px;
}

#zoneform fieldset{
    width:200px;
    height:200px;
    padding:10px;
    position:absolute;
}

#item_zone_form{
    float:left;
    margin:0 0 0 -230px;
    padding:20px;
    background-color:white;
}

#add_zone{
    float:left; 
}

#add_zone a{
    text-decoration:underline;
}

#form_zone{
    float:left; 
    margin:0 0 0 10px;
}

#form_zone input{
    float:left;
}

.poubelle{
    height:60px;
    background:#ddd;
    -moz-box-shadow:0 0 0.5em #666;
    width:120px;
    opacity:0.6;
    filter : alpha(opacity=60);
    -moz-opacity : 0.6; 
    line-height:60px;
    font-style:italic;
    text-shadow:0 1px 0 #ccc;
    font-size:1.5em;
    background:#eee url(../image/poubelle.png) 2.5em center no-repeat;
    padding-left:100px;
}

.hover{
    opacity:0.7;
    filter : alpha(opacity=70);
    -moz-opacity : 0.7; 
    color:#fff;
    background-color:#cd6a76
}

.deleted{
    background-color:#70cc57;
    opacity:0.7;
    filter : alpha(opacity=70);
    -moz-opacity : 0.7; 
    color:#fff;
}

.buttonlink{
    font-size:13px;
    margin:0px 0px 0px -16px;
    padding:5px 0 0 10px;
    background-image:url("../image/bg-button.png");
    width:180px;
    height:23px;
    color:#5c514e;
    cursor:pointer;
}


.buttonlink a{
    padding:3px 0 5px 0;
    color:#322d29;
}

.currentbuilding{
    background-image:url("../image/bg-button-current.png");
}

.currentbuilding a{
    color:#322d29;
}

.buttonlink:hover{
    background-image:url("../image/bg-button-hover.png");
}

.buttonlink a{
    width:180px;
}

.buttonlink:hover a{
    color:#555555;
    font-weight:normal;
}

/*************************
  Tableau all�g�
*************************/

lighttable td{
    height:22px;
    padding:0 10px 0 15px;
}

lighttable.table{
    border-collapse: collapse;
    text-align:center;
    margin:0px;
    clear:both;
}

lighttable.table tbody{
    margin:0px;
}

lighttable.table th{
    height:25px;
    text-align:center;
    border:none;
    color:white;
    background-color:#5c514e;
    padding:0 10px 0 10px;
}

lighttable.table td{
    border:none;
    color:black;
}

lighttable.table td img{
    padding:5px;
}

/*************************
  DOMOCONSO
*************************/

ul#domoconso-header{margin:0 0px 0 -10px; padding:7px 0 0 350px; height:29px; background-image:url(../image/domoconso-menu.png);}
ul#domoconso-header li{display:inline;}
.time{float:left; font-size:60px; padding: 15px 0 0px 15px; width:91px; height:91px; margin:0px 0 10px 0; background-image:url(../image/domoconso-time.png);}
#time table{color:white; margin:10px 0px 0 235px; text-align:center; padding:0px;}
#time table td{padding:5px 0 0 0;}
#hour{text-align:right; padding-right:20px; width:70px;}
#minutes{margin-left:10px;}
#building{padding: 10px 0 0px 10px; width:340px; margin:10px 0 0 0; height:45px; background-image:url(../image/domoconso-building-bg.png);}
#building p{font-size: 17px; margin:-30px 0 0 50px; color:white;}
#date{clear:both;padding: 7px 0 0px 15px; width:335px; margin:10px 0 0 0; height:22px; background-image:url(../image/domoconso-date.png); color:white;}
#weather{padding: 7px 0 0px 15px; width:335px; margin:10px 0 0 0; height:132px; background-image:url(../image/domoconso-weather.png); color:white;}
#weather table{margin:15px 0 0 15px; text-align:center;}
#camera{padding: 7px 0 0px 10px; width:758px; margin:10px auto; height:322px; background-image:url(../image/domoconso-webcam.png); color:white; overflow:hidden;}
#camera img{width: 375px;margin-left:180px;}
#camera ul, #camera li{margin:0;padding:0;list-style:none;}
#pagination2{margin:-20px 0 0 0; color:black;}
#left-column{float:left; width:360px; margin:0px 0px 0 5px;}
#right-column{float:right;}
#lamps{padding: 11px 0 0px 14px; width:386px; margin:20px 15px 0 0px; height:44px; background-image:url(../image/domoconso-right.png); color:white;}
#lamps p.title{font-size:15px; margin:-25px 0 0 50px;}
#lamps table{float:right; margin:-32px 0 0 0; text-align:center;}
#lamps table p{margin:-10px 0 0 0;}
#blinds{padding: 7px 0 0px 14px; width:386px; margin:20px 15px 0 0px; height:44px; background-image:url(../image/domoconso-right.png); color:white;}
#blinds p.title{font-size:15px; margin:-30px 0 0 50px;}
#blinds table{float:right; margin:-32px 0 0 0; text-align:center;}
#blinds table p{margin:-10px 0 0 0;}
#heating{padding: 7px 0 0px 14px; width:386px; margin:20px 15px 0 0px; height:44px; background-image:url(../image/domoconso-right.png); color:white;}
#heating table{margin:-3px 0 0 -15px; float:right; text-align:center;}
#heating table p{margin:-10px 0 0 0; font-size:10px;}
#heating img{width:17px;}

.infiniteCarousel {
    width: 395px;
    height:322px;
    position: relative;
}

.infiniteCarousel .wrapper {
    width: 384px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
    overflow: auto;
    height:322px;
    min-height: 10em;
    position: absolute;
    top: 0;
}

.infiniteCarousel ul a img {
    border: 5px solid #000;
    border-radius: 5px;
    -webkit-border-radius: 5px;
}

.infiniteCarousel .wrapper ul {
    width: 9999px;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute;
    top: 0;
}

.infiniteCarousel ul li {
    display:block;
    float:left;
    padding: 10px;
    height: 85px;
    width: 384px;
}

.infiniteCarousel ul li a img {
    display:block;
}

.infiniteCarousel div.wrapper ul li span{
    width:280px;
    float:left;
}

.infiniteCarousel .arrow {
    display: block;
    height: 36px;
    width: 37px;
    background: url(image/arrow.png) no-repeat 0 0;
    text-indent: -999px;
    position: absolute;
    top: 37px;
    cursor: pointer;
}

.infiniteCarousel .forward {
    background-position: 0 0;
    right: 10px;
}

.infiniteCarousel .back {
    background-position: 0 -72px;
    left: 0;
}

.infiniteCarousel .forward:hover {
    background-position: 0 -36px;
}

.infiniteCarousel .back:hover {
    background-position: 0 -108px;
}

#domoliveflash{
    height:682px;	
}

.info, .success, .warning, .error, .validation {
    border: 1px solid;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
}
.info {
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url('../image/info.png');
}
.success {
    color: #4F8A10;
    background-color: #DFF2BF;
    background-image:url('../image/success.png');
}
.warning {
    color: #9F6000;
    background-color: #FEEFB3;
    background-image: url('../image/warning.png');
}
.error {
    color: #D8000C;
    background-color: #FFBABA;
    background-image: url('../image/error.png');
}

.left-column{float:left; width:360px;}
.right-column{float:right;}
div.clear {
    clear: both;
}

#newlogo {
    /*background-color: red;*/
    height: 190px;
    left: 636px;
    position: absolute;
    top: 376px;
    width: 190px;
}

.bulle{
    height: 172px;
    width: 352px;
    position: relative;
    display: none;
}

.textAnnim{
    width: 142px;
    margin-left: 118px;
    font-size: 10px;
    float: left;
    display: none;
}
#annim b{
    font-size: 13px;
}
#bulle1{
    background-image:url('../image/bulle1.png');
    background-repeat: no-repeat;
    background-position: center bottom;
    top: -132px;
    left: 220px;
}
#bulle2{
    background-image:url('../image/bulle2.png');
    background-repeat: no-repeat;
    background-position: left bottom;
    top: -268px;
    left: 456px;
}
#bulle3{
    background-image:url('../image/bulle3.png');
    background-position: left center;
    background-repeat: no-repeat;
    top: -309px;
    left: 523px;
}
#bulle4{
    background-image:url('../image/bulle4.png');
    background-repeat: no-repeat;
    background-position: left top;
    top: -334px;
    left: 501px;
}
#bulle5{
    background-image:url('../image/bulle5.png');
    background-repeat: no-repeat;
    background-position: left top;
    top: -422px;
    left: 402px;
}
#bulle6{
    background-image:url('../image/bulle6.png');
    background-repeat: no-repeat;
    background-position: right top;
    top: -594px;
    left: 46px;

}
#bulle7{
    background-image:url('../image/bulle7.png');
    background-repeat: no-repeat;
    background-position: right top;
    top: -850px;
    left: -52px;
}
#bulle8{
    background-image:url('../image/bulle8.png');
    background-repeat: no-repeat;
    background-position: right center;
    top: -1170px;
    left: -83px;
}
#bulle9{
    background-image:url('../image/bulle9.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    top: -1471px;
    left: -15px;
}

#logocenter{
    width: 190px;
    height: 190px;
    position: relative;
    top: 250px;
    left: 305px;
}

#footer-center {
    float: left;
    width: 157px;
    margin-left:59px;
}
#footer-mc2 {
    float: left;
    margin: 0 120px 0 0;
    text-align: left;
    margin-left : 102px;
}
#footer-teamp {
    float: left;
    margin: 0 2px 0 0;
    text-align: left;
}
#footer-left {
    float: left;
    margin: 0;
    width: 350px;
}
#footercontent {
    margin: 0 auto;
    padding: 10px 0 0;
    text-align: center;
    width: 759px;
}

a.forgot{
    color: -webkit-link;
    text-decoration: underline;
    float:right;
    font-size: 9px;
}

#nav_lang{
    position:absolute;
    top:5px;
    right:100px;
    width: auto !important;
}

#nav_lang li{
    float:left; 
    margin: 0 5px 0 0;
}

/*#nav_en{
    width:16px;
    height:11px;
    background: transparent url('../image/png/uk.png') no-repeat bottom right;
}

#nav_fr{
    width:16px;
    height:11px;
    background: transparent url('../image/png/fr.png') no-repeat bottom right;
}*/

.flag-icon{
    border: none;
    width: 16px;
    height: 11px;
}

b{
    font-weight: bold;
}

#loader{
    zoom:1;/* Increase this for a bigger symbole*/

    display:block;

    width:16px;
    height:16px;

    margin:20px auto;

    animation: wait .80s steps(1, start) infinite;
    -webkit-animation: wait .80s steps(1, start) infinite;

    background: linear-gradient(0deg, #f4f5fa 1px, transparent 0, transparent 8px, #f4f5fa 8px),   /* 6  */
        linear-gradient(90deg, #f4f5fa 1px, #f6f9fb 0, #f6f9fb 3px, #f4f5fa 3px),

        linear-gradient(0deg, #ececf5 1px, transparent 0, transparent 8px, #ececf5 8px),   /* 5  */
        linear-gradient(90deg, #ececf5 1px, #f2f3f9 0, #f2f3f9 3px, #ececf5 3px),

        linear-gradient(0deg, #e7eaf4 1px, transparent 0, transparent 8px, #e7eaf4 8px),   /* 4  */
        linear-gradient(90deg, #e7eaf4 1px, #eef1f8 0, #eef1f8 3px, #e7eaf4 3px),

        linear-gradient(0deg, #b9bedd 1px, transparent 0, transparent 10px, #b9bedd 10px), /* 3  */
        linear-gradient(90deg, #b9bedd 1px, #d0d5e8 0, #d0d5e8 3px, #b9bedd 3px),

        linear-gradient(0deg, #9fa6d2 1px, transparent 0, transparent 15px, #9fa6d2 15px), /* 2  */
        linear-gradient(90deg, #9fa6d2 1px, #c0c5e1 0, #c0c5e1 3px, #9fa6d2 3px),

        linear-gradient(0deg, #8490c6 1px, transparent 0, transparent 15px, #8490c6 15px), /* 1  */
        linear-gradient(90deg, #8490c6 1px, #aeb5da 0, #aeb5da 3px, #8490c6 3px);  

    background-repeat: no-repeat;

    background-size: 4px 9px,   /* 6 */
        4px 9px,

        4px 9px,   /* 5 */
        4px 9px,

        4px 9px,   /* 4 */
        4px 9px,

        4px 11px,  /* 3 */
        4px 11px,

        4px 16px,  /* 2 */
        4px 16px,

        4px 16px,  /* 1 */
        4px 16px;

    background-position:-4px 3px, -4px 3px, -4px 3px, -4px 3px, -4px 3px, -4px 3px, -4px 2px, -4px 2px, -4px 0, -4px 0, -4px 0, -4px 0;

}
@keyframes wait{
    12.5%{
        background-position:   -4px,  /* 6 */
            -4px,

            -4px,  /* 5 */
            -4px,

            -4px,  /* 4 */
            -4px,

            -4px,  /* 3 */
            -4px,

            -4px,  /* 2 */
            -4px,

            0 ,  /* 1 */
            0 ;
    }
    25%{
        background-position: -4px,  /* 6 */
            -4px,

            -4px,  /* 5 */
            -4px,

            -4px,  /* 4 */
            -4px,

            -4px,  /* 3 */
            -4px,

            0,  /* 2 */
            0,

            6px,  /* 1 */
            6px;
    }
    37.5%{
        background-position: -4px,  /* 6 */
            -4px,

            -4px,  /* 5 */
            -4px,

            -4px,  /* 4 */
            -4px,

            0,  /* 3 */
            0,

            6px,  /* 2 */
            6px,

            12px,  /* 1 */
            12px;
    }
    50%{
        background-position: -4px,  /* 6 */
            -4px,

            -4px,  /* 5 */
            -4px,

            0,  /* 4 */
            0,

            6px,  /* 3 */
            6px,

            12px,  /* 2 */
            12px,

            -4px,  /* 1 */
            -4px;
    }
    62.5%{
        background-position: -4px,  /* 6 */
            -4px,

            0,  /* 5 */
            0,

            6px,  /* 4 */
            6px,

            12px,  /* 3 */
            12px,

            -4px,  /* 2 */
            -4px,

            -4px,  /* 1 */
            -4px;
    }
    75%{
        background-position:     0,  /* 6 */
            0,

            6px,  /* 5 */
            6px,

            12px,  /* 4 */
            12px,

            -4px,  /* 3 */
            -4px,

            -4px,  /* 2 */
            -4px,

            -4px,  /* 1 */
            -4px;
    }
    87.5%{
        background-position:   6px,  /* 6 */
            6px,

            12px,  /* 5 */
            12px,

            -4px,  /* 4 */
            -4px,

            -4px,  /* 3 */
            -4px,

            -4px,  /* 2 */
            -4px,

            -4px,  /* 1 */
            -4px;
    }
    100%{
        background-position:    12px,  /* 6 */
            12px,

            -4px,  /* 5 */
            -4px,

            -4px,  /* 4 */
            -4px,

            -4px,  /* 3 */
            -4px,

            -4px,  /* 2 */
            -4px,

            -4px,  /* 1 */
            -4px;
    }
}
@-webkit-keyframes wait{
    12.5%{
        background-position:   -4px,  /* 6 */
            -4px,

            -4px,  /* 5 */
            -4px,

            -4px,  /* 4 */
            -4px,

            -4px,  /* 3 */
            -4px,

            -4px,  /* 2 */
            -4px,

            0 ,  /* 1 */
            0 ;
    }
    25%{
        background-position: -4px,  /* 6 */
            -4px,

            -4px,  /* 5 */
            -4px,

            -4px,  /* 4 */
            -4px,

            -4px,  /* 3 */
            -4px,

            0,  /* 2 */
            0,

            6px,  /* 1 */
            6px;
    }
    37.5%{
        background-position: -4px,  /* 6 */
            -4px,

            -4px,  /* 5 */
            -4px,

            -4px,  /* 4 */
            -4px,

            0,  /* 3 */
            0,

            6px,  /* 2 */
            6px,

            12px,  /* 1 */
            12px;
    }
    50%{
        background-position: -4px,  /* 6 */
            -4px,

            -4px,  /* 5 */
            -4px,

            0,  /* 4 */
            0,

            6px,  /* 3 */
            6px,

            12px,  /* 2 */
            12px,

            -4px,  /* 1 */
            -4px;
    }
    62.5%{
        background-position: -4px,  /* 6 */
            -4px,

            0,  /* 5 */
            0,

            6px,  /* 4 */
            6px,

            12px,  /* 3 */
            12px,

            -4px,  /* 2 */
            -4px,

            -4px,  /* 1 */
            -4px;
    }
    75%{
        background-position:     0,  /* 6 */
            0,

            6px,  /* 5 */
            6px,

            12px,  /* 4 */
            12px,

            -4px,  /* 3 */
            -4px,

            -4px,  /* 2 */
            -4px,

            -4px,  /* 1 */
            -4px;
    }
    87.5%{
        background-position:   6px,  /* 6 */
            6px,

            12px,  /* 5 */
            12px,

            -4px,  /* 4 */
            -4px,

            -4px,  /* 3 */
            -4px,

            -4px,  /* 2 */
            -4px,

            -4px,  /* 1 */
            -4px;
    }
    100%{
        background-position:    12px,  /* 6 */
            12px,

            -4px,  /* 5 */
            -4px,

            -4px,  /* 4 */
            -4px,

            -4px,  /* 3 */
            -4px,

            -4px,  /* 2 */
            -4px,

            -4px,  /* 1 */
            -4px;
    }
}

.loader {
    /* background-color: grey; */
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0.5;

    /* background: #161616 url('../image/pattern_40.gif') top left repeat; */
    margin: 0;
    padding: 0;
    font: 12px normal Verdana, Arial, Helvetica, sans-serif;
    height: 100%;
}

.circle_load {
    background-color: rgba(0,0,0,0);
    border: 5px solid rgba(0,183,229,0.9);
    opacity: .9;
    border-right: 5px solid rgba(0,0,0,0);
    border-left: 5px solid rgba(0,0,0,0);
    border-radius: 50px;
    box-shadow: 0 0 35px #2187e7;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    -moz-animation: spinPulse 1s infinite ease-in-out;
    -webkit-animation: spinPulse 1s infinite linear;
}

.circle1_load {
    background-color: rgba(0,0,0,0);
    border: 5px solid rgba(0,183,229,0.9);
    opacity: .9;
    border-left: 5px solid rgba(0,0,0,0);
    border-right: 5px solid rgba(0,0,0,0);
    border-radius: 50px;
    box-shadow: 0 0 15px #2187e7;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    position: relative;
    top: -50px;
    -moz-animation: spinoffPulse 1s infinite linear;
    -webkit-animation: spinoffPulse 1s infinite linear;
}

@-moz-keyframes spinPulse {
    0% {
        -moz-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #2187e7;
    }

    50% {
        -moz-transform: rotate(145deg);
        opacity: 1;
    }

    100% {
        -moz-transform: rotate(-320deg);
        opacity: 0;
    };
}

@-moz-keyframes spinoffPulse {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    };
}

@-webkit-keyframes spinPulse {
    0% {
        -webkit-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #2187e7;
    }

    50% {
        -webkit-transform: rotate(145deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: rotate(-320deg);
        opacity: 0;
    }
}

@-webkit-keyframes spinoffPulse {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}
#talarmes{
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-right: 0px;
    margin: 0px;
    margin-top: 3px;
    margin-right: 0px;
    margin-left: 5px;
}
#talarmes td{
    padding: 4px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin: 0px;
    margin-right: 0px;
    color: white ;
    height: 0px;
    width: 0px;
    text-align: center;
}
#talarmes td a{
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-right: 0px;
    margin: 0px;
    margin-right: 0px;
    color: white ;
    height: 5px;
    width: 15px;
}
.cercle{
    border-radius:50%;
    width:13px;
    height:13px;
    border: 1px solid black;
    padding: 0px ;
    margin: 0px;
}
#rouge{
    background:red ;
}

#vert{
    background: lawngreen ;
}

#orange{
    background: #FFA500 ;
}