* {
    font-family: arial, sans-serif;
    font-size: 9pt;
    color: #2C2C2C;
}
body {
    margin:0; 
    padding:0;
    /* background-image: url('img/fondgrain.jpg');  */
}

img {
    border: none;
}
ul {
    margin-top: 0em;
}
sup {
    vertical-align: 15%;
}
select {
    color: #2C2C2C;
    background-color: #ffffff;
}


/*-----------------------------*/
/* Tooltips (aide en ligne)    */
/*-----------------------------*/

a.info {
    position:relative;
    z-index:24;
    text-decoration:none;
    border: 1px solid #777;
    background-color: #BBBBFF;
    font-weight: bold;
    padding: 1px 4px;
    margin-left: 1em;
    font-size: 90%;
    color: #339;
}
a.info:hover {
    z-index:25;
    background-color: darkblue;  /* à redéfinir, sinon bug ie6 */
/*    font-size: 120%; */
    color: yellow;
}
a.info span {
    display: none
}
a.info:hover span img {  /* icone dans un tooltip */
    float: left;
/*    margin-left: 0.2em;
    margin-right:0.8em;*/
}
a.info:hover span { 
    display: block;
    position: absolute;
    padding: 5px;
    top:  -6em;
    left: -8em;
    width: 22em;
    border: 3px solid #0A6699;
    background-color: #fffad2;
    color: #830B0A;
    text-align: left;
    
    background-image: url('img/walter_seul_petit.gif');
    padding-left: 44px;
    background-repeat:no-repeat;
    background-position: 2px center;
}
a.info:hover.gauche span {  /* tooltip décalé vers la gauche */
    left: -16em;
}
a.info:hover.droite span {  /* tooltip décalé vers la droite */
    left: 5em;
}
a.info:hover.basdroite span {  /* tooltip décalé vers la droite */
    left: 3em;
    top: -2em;
}

a.info:hover.haut span {  /* tooltip avec plus de lignes */
    top: -10em;
}

a.info.decale {
    margin-left: 7em;
}
a.info:hover.decale span {  /* tooltip un peu plus décalé vers la droite */
    top: -8em;
    left: 10em;
}

/* symbole plus petit */
a.info.petit {
    font-size: 80%;
    padding: 0px 2px;
    margin-left: 0.5em;
}

.soustitre {
    margin: 0.5em 0 0.5em 0;
    font-size:140%;
    font-weight: bold;
    padding-left : 32px;
    background-image: url(img/puces_arbres2.gif);
    background-repeat:no-repeat;
}

/*--------------------------*/
hr {
    margin-top:    5px;
    margin-bottom: 5px;
    color:#AAA;
}
hr.separ {
    visibility: hidden;
    margin: 0;
    margin-top:  10px;
    clear: both;
}

h1 {font-size:135%;
    font-weight: bold;
}
h2 {font-size:130%;
    font-weight: bold;
    margin-top: 6px;
    margin-bottom: 6px;
}
h3 {font-size:120%;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
}
h4 {font-size:110%;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
}
h5 {font-size:102%;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
}
h6 {font-size:100%;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
}

.petittexte {
    font-size:80%;
}

/*------------------------------*/
/* Bouton de mode Expert/Normal */
/*------------------------------*/
#div_choix_expert {
    float: right;
    border: 1px solid #777;
    padding: 1px 4px 2px 4px;
    background-color: #FFCCAA;
    text-align:center;
    width: 9.8em;
}
.labelexp {
    margin: 0;
    font-weight: bold;
    font-size:95%;
}
#div_choix_expert hr {
    margin:4px;
}

#div_choix_expert input {
    padding: 0em 1em;
}

/*--------------------------*/
/* Entête des pages         */
/*--------------------------*/
#entete {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:80px;
    border-bottom: 1px solid #777;
    background-image:url(img/degrade1.jpg);
}
#entete .logo {
    position: absolute;
    top: 6px;
    left: 50px;
}
#entete .logo img {
    border: 1px solid #777;
}
#entete p {
    margin: 10px 0 0 0;
}
#entete .titre {
    position: absolute;
    top: 0px;
    left: 50%;
    width: 26em;
    margin-left: -13em;
    font-size: 120%;
    color: #336;
    text-align: center;
}

/*--------------------------*/
/* Contenu de la page       */
/*--------------------------*/
#contenu {
    position: absolute;
    /* top: 85px; */
    top: 0px;
    left: 0px;
    width:100%;
}

/*--------------------------*/
/* Colonne gauche (menu)    */
/*--------------------------*/
#barremenus {
    position: absolute;
    top:  0px;
    left: 0px;
    width:11em;
}
    
/*--------------------------*/
/* Colonne de droite        */
/*--------------------------*/
#principal {
    position: absolute;
    top:   0px;
    right: 0px;
    left: 0px;
    overflow:auto;
}

/*--------------------------*/
/* Titre d'une page         */
/*--------------------------*/
.titrepage {
    position: relative;
    font-size:130%;
    font-weight: bold;
    text-align: center;
    margin: 0 0 0.6em 0;
    padding: 6px;
    border: 1px solid #777;
    color: #FFF5EE;
    background-image:url(img/degrade-oie.jpg);
    background-repeat: repeat-y;
    background-color: #830B0A;
}

/*-----------------------------*/
/* Zone réservée aux experts   */
/*-----------------------------*/
.expert {
    margin: 0.5em;
    width: 50em;
    padding: 2px;
    background-color: #FFCCAA;
    border: 1px solid #777;
}
.expert h5 {
    font-size: 110%;
    text-align: center;
    margin: 0;
    padding: 5px 10px;
    border: 1px solid #777;
    background-color: #830B0A;
    color: #FFF5EE;
}

/*-------------------------------*/
/* Tableaux dans la zone expert */
/*-------------------------------*/
.tabexpert {
    border-collapse: collapse;
    margin-left: 1em;
    width: 48em;
}
.tabexpert td, .tabexpert th {
    padding: 2px  1em;
    border:1px solid #555;
}
.tabexpert th, .tabexpert th sup {
    font-weight: bold;
    background-color: #DD6666;
    color: white;
}
.tabexpert .r {
    text-align: right;
}

/*--------------------------*/
/* Boutons                  */
/*--------------------------*/
#barremenus li {
    display: block;
    margin: 0;
    padding: 0;
}
#barremenus ul {
    text-align: left;
    list-style: none;
    padding: 0;
    margin: 0 5px;
}
#barremenus a {
    display: block;
    background-color: #BBBBFF;
    color: #555;
    text-decoration: none; 
    font-weight: bold;
    margin: 0px 2px 5px 5px;
    padding:2px 5px;
    width: 8.5em;
    border: 1px solid #777;
}
#barremenus a.courant {
    background-color: #E0F0FD;
    color: black;
}
#barremenus a:hover {
    color: #333;
    background-color:#FFFAAA;
}

/*----------------------------*/
/* Boutons Suivant Précédent  */
/*----------------------------*/
a.btnavig {
    position: absolute;
    color: #444;
    background-color: #FED;
    border: 1px solid #777;
    padding:2px 5px;
    text-decoration: none; 
    font-weight: bold;
    font-size: 80%;
}
a.btnavig:hover {
    color: #333;
    background-color:#E0F0FD;
}
a.precedent {
    left : 5px;
    top: 5px;
}
a.suivant {
    right : 10px;
    top: 5px;
}

.tnavigation {
    margin: 0;
    padding: 0;
    width: 96%;
}
.tnavigation td {
    width: 33%;
}
.tnavigation td.r {
    text-align: right;
}
.tnavigation td.c {
    text-align: center;
}
.tnavigation td.l {
    text-align: left;
}


/*--------------------------*/
/* Tooltips du menu         */
/*--------------------------*/
#barremenus a span {
    position: absolute;
    border: 1px solid #777;
    background-color:#33A;
    color: #FFA;
    padding: 5px;
    visibility: hidden;      /* caché par défaut */
    left : 10px;
    top:   100%;
    margin-top: 1em;
    width: 9.5em;
    text-align: center;
}
#barremenus a:hover span {
    z-index: +9;
    visibility: visible;    /* toltip visible */
}

/*-------------------------------*/
/* Tableaux dans les formulaires */
/*-------------------------------*/
form {
    margin: 0;
    padding: 0;
}

.tabform {
    border-collapse: collapse;
    margin: 0;
}
.tabform td, .tabform th {
    text-align: left;
    padding: 2px 5px;
    border:1px solid #BBB;
    background-color: #F9F9FF;
}
.tabform th {
    text-align: center;
    font-weight: bold;
    padding: 4px 10px;
    background-color: #0A6699;
    color: #FFFFFF;
}
.tabform th sup {
    background-color: #0A6699;
    color: #FFFFFF;
}
.tabform .titretable {
    font-size: 110%;
    background-color: #084466;
    padding:  4px 10px;
}
.tabform .titretable sup {
    background-color: #084466;
}
.tabform.centre td {
    text-align: center;
}
.tabform td.r, .tabform th.r {
    text-align: right;
}
.tabform td.l, .tabform th.l {
    text-align: left;
}

td.marges {
    padding:2px 1em;
}



/*----------------------------------*/
.floatleft {
    float: left;
}

.t10 {
    font-size: 10pt;
}

.rouge {
    color: red;
}

.cadre {
    padding: 5px;
    border:1px solid #777;
}



td.resultat {
    font-weight: bold;
    background-color: #fffad2;
    border-style: solid;
    border-width: 1px;
    padding: 6px 10px;
    text-align: center;    
    font-size: 108%;
}

.lienres {
    font-weight: bold;
    text-decoration: none;
    font-size: 95%;
}
.lienres .blanc {
    color: white;
}
.lienres:hover {
    text-decoration: underline;
}


.fjaune {
    background-color: #FF8;
    color: black;
}

.fbleu {
    background-color: #ffffff;
    color: black;
}

/*-------------------------------*/
.r, td.r, .right {
    text-align: right;
}

.c, td.c, .center {
    text-align: center;
}
.l, td.l, .left {
    text-align: left;
}

b, .bold {
    font-weight: bold;
}
i, .italic {
    font-style: italic;
}
.n, .normal {
    font-style: normal;
    font-weight: normal;
}


/*-------------------------------*/
label {
    margin-left: 1px;
    margin-right: 2em;
}


/* ------------------------ */
a img {border: 0px;}

/* ------------------------ */
/* Graphiques du résultat   */
/* ------------------------ */
.graphe1 {
    position : absolute;
    left : 30em;
    top : 17em;
}


/*-----------------------------------------------*/
/* tabcoul : tableau avec couleurs alternées     */
/*-----------------------------------------------*/
.tabcoul {
    border-collapse: collapse;
    border: 1px solid #777;
    white-space: nowrap;
}
.tabcoul td, .tabcoul th {
    font-size: 8pt;
    border-style: solid;
    border-width: 0px 1px ;
    border-color: #777;
    padding: 0px 4px 0px 2px;
}
.tabcoul th {
    background-color: #FEA;
    font-weight: bold;
    text-align: center;
    border: 1px solid #777;
}
.tabcoul .coul1 {
    background-color: #FFD;
}
.tabcoul .coul2 {
    background-color: #AEF;
}

.toutpetit {
    font-style: normal;
    font-weight: normal;
    font-size:  80%;
}