body {
margin:0;
padding:0;
font: 12px/1em Verdana;
height: 100%;
}

li
{
font-family:    Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
 FONT-SIZE: 14px;
 color: black; 
 line-height: 1.2em;
 list-style-type: none;
 background-image: url(../img/compteur_nb.png);
 background-repeat: no-repeat;
 background-position: 0 0.32em;
 padding-left: 18px;
}

.img-rounded {
  -webkit-border-radius: 6px;
  border-radius: 6px;
  }
  
.bas_droite {
 position: absolute;
 width:auto;
 right:1px;
 bottom:1px;
 margin: auto; 
}
.bas_gauche {
 position: absolute;
 width:auto;
 left:1px;
 bottom:1px;
 margin: auto; 
}

.bas_centre {
 position: absolute;
 left:33%;
 width:34%;
 height:0px;  
 bottom:4px;
 margin: auto; 
}

.bas_centre_centre {
 position: absolute;
 left:30%;
 bottom:32px;
 width:40%;
 height:auto;
 margin: auto;
 border-radius:3px;
 z-index:0;
}

.bas_bottom {
 position: absolute;
 left:33%;
 width:34%;
 bottom:1px;
 margin: auto; 
}
.centre {
 position: absolute;
 left:33%;
 top:33%;
 width:34%;
 }
.centre_haut {
 position: absolute;
 left:45%;
 top:1px;
 width:auto;
 }
 
.centre_centre {
 position: absolute;
 left:35%;
 top:40%;
 width:30%;
 margin: auto;
 z-index:0;
 }

.centre_centre_centre {
 position: absolute;
 left:33%;
 top:50%;
 width:34%;
 margin: auto;
 z-index:0;
 }
  
 .centre_bord_gauche {
 position: absolute;
 left:1px;
 top:33%;
 width:auto;
 margin: auto;
 } 

.centre_bord_droite {
 position: absolute;
 right:1px;
 top:33%;
 width:auto;
 margin: auto;
 }
  
.gauche_haut {
 position: absolute;
 left:3%;
 top:2%;
 width:40%;
 }
.haut {
 position: absolute;
 top:1px;
 right:10px;
}
.haut_acceuil {
 margin-left: auto;
 margin-right: auto;
 top:5px;
 width: 444;
}
.left {
 position: absolute;
 margin-left: auto;
 margin-right: auto;
 top:4px;
 left:16px;
}

.right {
 position: absolute;
 margin-left: auto;
 margin-right: auto;
 top:4px;
 right:16px;
}

.left_bas {
 position: absolute;
 margin-left: auto;
 margin-right: auto;
  width:auto;
 bottom:1px;
 left:1px;
}
.demo {
 position: absolute;
 top:40px;
 left:30px;
}
.demo_titre {
 position: absolute;
 top:2px;
 left:30px;
 z-index:1;
}

.milieu_droite {
 position: absolute;
 right:4px;
 top:33%;
 margin: auto; 
}

.arriere_plan{
width:100%;
height:100%;
background-color: #ADD8E6;
  filter:alpha(opacity=80);
  -moz-opacity:0.8;
  opacity:0.8;
}

.cercle168 {
width: 168px;
height: 168px;
background-color: #C7C7C7;
border: 0px solid #E7E7E7;
-webkit-border-radius: 84px;
-khtml-border-radius: 84px;
border-radius: 84px;}

.cercle168:hover {
width: 168px;
height: 168px;
background-color: transparent;
border: 0px solid #E7E7E7;
-webkit-border-radius: 84px;
-khtml-border-radius: 84px;
border-radius: 84px;}

.cercle168:active {
width: 168px;
height: 168px;
background-color: #C7C7C7;
border: 0px solid #E7E7E7;
-webkit-border-radius: 84px;
-khtml-border-radius: 84px;
border-radius: 84px;}

.cercle168:visited {
width: 168px;
height: 168px;
background-color: #C7C7C7;
border: 0px solid #E7E7E7;
-webkit-border-radius: 84px;
-khtml-border-radius: 84px;
border-radius: 84px;}

.cerclenav {
width: 48px;
height: 48px;
background-color: #C7C7C7;
border: 0px solid #C7C7C7;
color: #000;
-webkit-border-radius: 24px;
-khtml-border-radius: 24px;
border-radius: 24px;
border-radius: 24px;}

.cerclenav:hover {
width: 48px;
height: 48px;
background-color: #E7E7E7;
border: 0px solid #4277AC;
color: RED;
-webkit-border-radius: 24px;
-khtml-border-radius: 24px;
border-radius: 24px;
border-radius: 24px;}

.cerclenav:active {
width: 48px;
height: 48px;
background-color: #4277AC;
border: 0px solid #4277AC;
-webkit-border-radius: 24px;
-khtml-border-radius: 24px;
border-radius: 24px;
border-radius: 24px;}

.cerclenav:visited {
width: 48px;
height: 48px;
background-color: #4277AC;
border: 0px solid #4277AC;
-webkit-border-radius: 24px;
-khtml-border-radius: 24px;
border-radius: 24px;}


.cerclenav32 {
width: 32px;
height: 32px;
background-color: #4277AC;
border: 0px solid #4277AC;
color: #FFF;
-webkit-border-radius: 16px;
-khtml-border-radius: 16px;
border-radius: 16px;}

.cerclenav32:hover {
width: 32px;
height: 32px;
background-color: #99FF33;
border: 0px solid #4277AC;
color: #FFF;
-webkit-border-radius: 16px;
-khtml-border-radius: 16px;
border-radius: 16px;}


table
{
border-spacing: 0px;
}

table {
  max-width: 98%;
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
}

.table {
  width: 98%;
  margin-bottom: 20px;
}

.table th,
.table td {
  padding: 8px;
  line-height: 20px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #838383;
  
}

.table th {
  font-weight: bold;
}

.table thead th {
  vertical-align: bottom;
}

.table caption + thead tr:first-child th,
.table caption + thead tr:first-child td,
.table colgroup + thead tr:first-child th,
.table colgroup + thead tr:first-child td,
.table thead:first-child tr:first-child th,
.table thead:first-child tr:first-child td {
  border-top: 0;
}

.table tbody + tbody {
  border-top: 0px solid #838383;
}

.table-condensed th,
.table-condensed td {
  padding: 0px;
}

.table-bordered {
  border: 1px solid #838383;
  border-collapse: separate;
  *border-collapse: collapse;
  border-left: 0;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

.table-bordered th,
.table-bordered td {
  border-left: 1px solid #838383;
}

.table-bordered caption + thead tr:first-child th,
.table-bordered caption + tbody tr:first-child th,
.table-bordered caption + tbody tr:first-child td,
.table-bordered colgroup + thead tr:first-child th,
.table-bordered colgroup + tbody tr:first-child th,
.table-bordered colgroup + tbody tr:first-child td,
.table-bordered thead:first-child tr:first-child th,
.table-bordered tbody:first-child tr:first-child th,
.table-bordered tbody:first-child tr:first-child td {
  border-top: 0;
}

#global800 { 
  position:absolute; 
  left: 50%;  
  top: 50%; 
  width: 800px; 
  height: 600px; 
  margin-top: -300px; /* moitiÈ de la hauteur */ 
  margin-left: -400px; /* moitiÈ de la largeur */ 
  border: 4px solid orange; 
}

#global {   
position:absolute;   
left: 50%;    
top: 50%;   
width: 880px;   
height: 400px;   
margin-top: -200px; /* moitiÈ de la hauteur */   
margin-left: -440px; /* moitiÈ de la largeur */   
border: 0px solid #000; }

.wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: auto;
}

a.info {
  position:relative;
  font-family:     Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
  font-size:14px;
  font-weight:normal;
  color: black;
  text-decoration:none;
  background: none;
  text-align:left;
  padding:3px;
  z-index: 0;
}
a.info:hover {
   background: none; 
   z-index: 0;
   cursor: pointer;  
}
a.info span {display: none; background: none;}
a.info:hover span {
   display: inline;
   position: absolute;
   white-space: normal;
   top: 25px; /* positions et dimensions du calque, que vous pouvez changer choisir */
   left: -50px;
   width: 400px;
   height: auto;
   font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
   font-size:16px;
   font-weight:normal;
   color: black;
   text-decoration:none;
   text-align:left;
   background: white;
   padding:8px;
   border: 1px dotted black;
   border-top: 3px solid grey;
   border-bottom: 1px solid black;
   z-index: 0;
}


a.info_court {
  position:relative;
  font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
  font-size:14px;
  font-weight:normal;
  color: black;
  text-decoration:none;
  background: none;
  text-align:left;
  padding:3px;
  z-index: 0;
}
a.info_court:hover {
   background: none;  
   z-index: 100;
   cursor: cursor;  
}
a.info_court span {display: none; background: none;}
a.info_court:hover span {
   display: inline;
   position: absolute;
   white-space: normal;
   top: 25px; 
   left: -100px;
   width: 360px;
   height: auto;
   line-height:1.2em;
   z-index: 0;
   font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
   font-size:16px;
   font-weight:normal;
   color: black;
   text-decoration:none;
   text-align:left;
   background: white;
   background-image: url(../img/arrplanmain.png);
   background-repeat: repeat;
   padding:8px;
   border: 1px solid black;
   border-radius:6px
   
}

h1 {
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
FONT-SIZE: 14px;
color: black;            
text-align: center;         
}
h2 {
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
color: black;
FONT-SIZE: 14px;
margin: 0px;
padding: 0px 0px 0px 0px;
text-align: center;
}

h3 {

font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
FONT-SIZE: 12px;
color: black;
}

h4 {

font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
FONT-SIZE: 12px;
color: black;
margin: 1px;
padding: 1px;
}

img {
border: none;
z-index:0;
max-width: 80vw; 
max-height: 60vw;
}

.blow_up{
margin: 20px;
}

.titrefondbleu {
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
FONT-SIZE: 12px;
COLOR: #FFFFFF;
BACKGROUND-COLOR: #4682b4;
font-size-adjust: inherit;
padding: 2px 2px 2px 2px;
border-top: thin outset grey;
border-bottom: thin outset grey;
border-left: thin outset grey;
border-right: thin outset grey;
}
.titrefondmain {
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
FONT-SIZE: 14px;
COLOR: #FFFFFF;
BACKGROUND-COLOR: #4682b4;
font-size-adjust: inherit;
padding: 3px;
}
.titrefondmainindex {
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
FONT-weight: bold;
COLOR: black;
BACKGROUND-COLOR: transparent;
font-size-adjust: inherit;
letter-spacing : 4px;
border-style:none;
border-color:#b0c4de;
padding: 16px;
margin:auto;
}

.titrefondmaingris {
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
FONT-SIZE: 12px;
COLOR: #000;
BACKGROUND-COLOR: #CCCCCC;
font-size-adjust: inherit;
padding: 6px 4px 6px 8px;
  margin-left:1px;
}

.titrefondmaingris14 {
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
FONT-SIZE: 14px;
FONT-WEIGHT: BOLD;
COLOR: #000;
BACKGROUND-COLOR: #D7D7D7;
font-size-adjust: inherit;
padding: 6px 4px 6px 8px;
}

.harmonica{
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
FONT-SIZE: 12px;
FONT-WEIGHT: bold;
COLOR: #FFF;
BACKGROUND-COLOR: #4277AC;
letter-spacing : 3px;
padding: 4px 1px 4px 1px;
border-top: solid 2px #FFF;
border-bottom: solid 3px silver;
font-size-adjust: inherit; }

.titrefondgris{
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
FONT-SIZE: 14px;
COLOR: black;
BACKGROUND-COLOR: #E9E9E9;
font-size-adjust: inherit;
padding: 4px;
border: thin outset #FFA500;/*#FFA500 = orange*/
border-top: thin outset #FFA500;
border-bottom: thin outset #FFA500;
}
.titrefondorange{
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
FONT-SIZE: 16px;
COLOR: darkslategray;
BACKGROUND-COLOR: transparent;
font-size-adjust: inherit;
padding: 3px 24px 3px 24px;
border: 0px outset lightslategray;/*#FFA500 = orange*/
border-top: 0px outset lightslategray;
border-bottom: thin dotted darkslategray;
}

.titrefondquestel {
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
FONT-SIZE: 14px;
COLOR: black;
BACKGROUND-COLOR: #e7d743;
font-size-adjust: inherit;
padding: 2px 2px 2px 2px;
border-top: thin outset grey;
border-bottom: thin outset grey;
border-left: thin outset grey;
border-right: thin outset grey;
}


.titrefondgrisgrand{
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
FONT-SIZE: 14px;
COLOR: #FFF;
BACKGROUND-COLOR: transparent;
font-size-adjust: inherit;
padding: 4px  ;
border: 1px;
}

.titre
{
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
FONT-SIZE: 11px;
COLOR: #373737;
font-size-adjust: inherit; }

.textecourant
{
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
FONT-SIZE: 12px;
text-decoration: none;
color: black;
font-size-adjust: inherit;
}

a.textecourant:visited{
FONT-SIZE: 12px;
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
text-decoration: none;
color: black;
font-size-adjust: inherit; }
a.textecourant:active{
FONT-SIZE: 12px;
font-family:     Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
color: #373737;
font-size-adjust: inherit;
}

a.textecourant:hover{
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
FONT-SIZE: 12px;
text-decoration: none;
color: #990033;
font-size-adjust: inherit;
background-color:transparent;
}


.textecourant16
{
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
FONT-SIZE: 16px;
text-decoration: none;
color: black;
font-size-adjust: inherit;
}

a.textecourant16:visited{
FONT-SIZE: 16px;
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
text-decoration: none;
color: black;
font-size-adjust: inherit; }

a.textecourant16:active{
FONT-SIZE: 16px;
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
color: black;
font-size-adjust: inherit;
}

a.textecourant16:hover{
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
FONT-SIZE: 16px;
text-decoration: none;
color: #990033;
font-size-adjust: inherit;
background-color:transparent;
}


.menu
{
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
FONT-SIZE: 14px;
text-decoration: none;
color: #373737;
font-size-adjust: inherit;

}

a.menu:visited{
FONT-SIZE: 14px;
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
text-decoration: none;
color: #373737;
font-size-adjust: inherit; }
  
a.menu:active{
FONT-SIZE: 14px;
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
text-decoration: none;
color: #373737;
font-size-adjust: inherit;
}

a.menu:hover{
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
FONT-SIZE: 14px;
text-decoration: none;
color: #b22222;
font-size-adjust: inherit;
}

.textecourant8px
{
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
FONT-SIZE: 4px;
text-decoration: none;
color: black;
 }

.textecourant11px
{
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
FONT-SIZE: 11px;
text-decoration: none;
color: black;
 }

SELECT
{
BACKGROUND-COLOR: #F7F7F7;
border: 1px solid silver;
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
font-size: 12px;
padding: 2px 2px 2px 2px;
font-size-adjust: inherit;
}
INPUT
{
BACKGROUND-COLOR: #F7F7F7;
border: 1px solid silver;
border-radius:4px;
COLOR: black;
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
font-size: 12px;
padding: 2px 2px 2px 2px;
font-size-adjust: inherit;
}

CHECKBOX
{
BACKGROUND-COLOR: #F7F7F7;
border: 1px solid silver;
COLOR: black;
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
font-size: 12px;
padding: 0px 0px 0px 0px;
font-size-adjust: inherit;
}

TEXTAREA
{
BACKGROUND-COLOR: #F7F7F7;
border: 1px solid silver;
border-radius:4px;
overflow: auto;
padding: 1px 1px 1px 1px;
COLOR: black;
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
font-size: 12px;
font-size-adjust: inherit;
}

.textecourantpetit
{

font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
FONT-SIZE: 11px;
text-decoration: none;
color: black;
padding: 1px 1px 1px 1px;
line-height: 100%;
BACKGROUND-COLOR: transparent;
font-size-adjust: inherit; }

a.textecourantpetit:visited{
FONT-SIZE: 11px;
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
text-decoration: none;
color: #373737;
padding: 1px 1px 1px 1px;
BACKGROUND-COLOR: transparent;
font-size-adjust: inherit; }
a.textecourantpetit:active{
FONT-SIZE: 11px;
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
text-decoration: none;
color: #373737;
padding: 1px 1px 1px 1px;
BACKGROUND-COLOR: transparent;
font-size-adjust: inherit; }

a.textecourantpetit:hover{
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
FONT-SIZE: 11px;
text-decoration:none;
padding: 1px 1px 1px 1px;
color:white;
BACKGROUND-COLOR: transparent;
font-size-adjust: inherit; }


.textecourant11
{
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
FONT-SIZE: 12px;
text-decoration: none;
color: #373737;
padding: 1px 1px 1px 1px;
BACKGROUND-COLOR: snow;
font-size-adjust: inherit;
}

a.textecourant11:visited{
FONT-SIZE: 11px;
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
text-decoration: none;
color: #373737;
padding: 1px 1px 1px 1px;
BACKGROUND-COLOR: white;
font-size-adjust: inherit;
}
a.textecourant11:active{
FONT-SIZE: 11px;
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
text-decoration: none;
color: #373737;
padding: 1px 1px 1px 1px;
BACKGROUND-COLOR: white;
font-size-adjust: inherit; }

a.textecourant11:hover{
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
FONT-SIZE: 11px;
text-decoration:none;
color: Darkmagenta;
padding: 1px 1px 1px 1px;
font-size-adjust: inherit; }

.textecourantprint
{
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
FONT-SIZE: 14px;
color: #000;
text-align:left;
margin-left:12px;
line-height:1.2em;
}



.compteur {
font-family:Calibri,Candara, Verdana,"Trebuchet MS",  Arial, Times,Tahoma, sans-serif;
FONT-SIZE: 1em;
color: #373737;
text-decoration: none;            
text-align: center;         
}