body {
        font-family         : comic sans ms,verdana;
        font-size           : 8pt;
        padding             : 0;
        margin              : 0;

    }
    
    p.titreDetail {
        font-weight         : bold;
        width               : 520px;
        padding             : 10px 0 3px 0;
        font-family         : verdana;
        font-size           : 10pt;
    }

@media screen {
    body {
        background          : #fffc95 url(../imgs/body_fond.jpg);
    }
    
    div, p, img, ul {
        padding             : 0;
        margin              : 0;
        border              : 0px solid #ff0000;
    }
    
    a, a:visited, a:hover {
        text-decoration     : none;
        color               : #00f;
    }
    
    ul {
        list-style-type     : circle;
        margin              : 10px 0 20px 0;
    }
    
    ul.tarifs {
        list-style-type     : none;
    }
    
    li {
        margin-left         : 20px;
    }
    
    #wrapper {
        width               : 955px;
        height              : 800px;
        margin              : 5px auto 0 auto;
        border              : 1px solid #ad330c;
    }
    
    div#diapo {
        position            : relative;
        float               : left;
        width               : 380px;
        height              : 230px;
        padding             : 0 12px 0 12px;
        text-align          : center;
        z-index             : 1;
    }
    
    img.diapo {
        width               : 380px;
        height              : 230px;
        border              : 1px solid #ddd;
    }
    
    div.survol {
        position            : relative;
        float               : left;
        width               : 100%;
        padding             : 40px 0 0 0;
        text-align          : center;
    }
    
    div.survolp {
        position            : relative;
        float               : left;
        width               : 100%;
        padding             : 0;
        text-align          : center;
    }
    
    span.survol, a.rejouer {
        color               : #d98f08;
    }
    
    span.survol {
        cursor              : help;
        font-size           : 8pt;
        font-family         : verdana;
    }

    /****************************************************/
    /*** dans wrapper ***********************************/
    #header {
        position            : relative;
        float               : left;
        width               : 955px;
        height              : 155px;
    }
    
    #boder {
        position            : relative;
        float               : left;
        width               : 955px;
        height              : 645px;
    }
    
    #footer {
        position            : relative;
        float               : left;
        width               : 955px;
        height              : 20px;
        text-align          : center;
    }
        
    /****************************************************/
    /*** dans header ************************************/
    #header1 {
        position            : relative;
        float               : left;
        width               : 155px;
        height              : 100%;
    }
    
    #header2 {
        position            : relative;
        float               : left;
        width               : 800px;
        height              : 100%;
    }
    
    #headerFerme {
        position            : absolute;
        bottom              : 20px;
        left                : 20px;
        border              : 1px solid #ddd;
    }
    
    /****************************************************/
    /*** dans boder *************************************/
    #menu {
        position            : relative;
        float               : left;
        width               : 130px;
        height              : 645px;
        padding             : 0 0 0 25px;
        list-style-type     : none;
    }
    
    #corps {
        position            : relative;
        float               : left;
        width               : 800px;
        height              : 635px;
        padding             : 10px 0 0 0;
        background-color    : #ffff99;
    }
    
    /****************************************************/
    /*** dans menu **************************************/
    li.menu,li.menuMaj {
        height              : 90px;
        margin              : 0 0 10px 0;
    }
    
    li.menuliensamis {
        margin              : 0 0 10px 0;
    }
    
    a.menu {
        color               : #ffffff;
        font-size           : 8pt;
    }
    
    img.menu {
        width               : 105px;
        height              : 75px;
        border              : 1px solid #000;
    }

    a.menuliensamis {
        font-style          : italic;
    }

    /****************************************************/
    /*** dans corps *************************************/
    span.titre {
        padding-left        : 10px;
        font-weight         : bold;
        vertical-align      : 100%;
        font-size           : 12pt;
        font-family         : verdana;
    }

    span.icones {
        padding             : 0 0 10px 10px;
    }

    a.lienFiche {
        color               : #0000ff;
        font-size           : 8pt;
        font-weight         : normal;
    }

    #detail {
        position            : absolute;
        top                 : 50px;
        left                : 0px;
        width               : 400px;
        border              : 1px solid #000;
        padding             : 10px;
        visibility          : hidden;
        background-color    : #eeeeee;
        z-index             : 2;
    }

    div.encart {
        position            : relative;
        float               : left;
        width               : 550px;
        margin              : 0 0 0 65px;
    }

    p.encartTitre {
        font-weight         : bold;
        width               : 520px;
        padding             : 10px 0 10px 10px;
        font-family         : verdana;
        font-size           : 8pt;
    }

    p.encartTexte {
        text-align          : justify;
        padding             : 0 20px 0 20px;
    }
    
    span.encartSoustitre {
        font-style          : italic;
    }

    #savoirPlus {
        /*font-style          : italic;*/
        height              : 10px;
    }


    li.detailSacoches {
        list-style-type     : none;
        }

    /****************************************************/
    /*** dans corps de index.html ***********************/
    p.haut {
        width               : 600px;
        padding             : 0 100px 20px 100px;
        text-align          : center;
        font-weight         : bold;
    }

    div.cotes {
        position            : relative;
        float               : left;
        width               : 210px;
        height              : 320px;
        padding             : 0 20px 0 20px;
        text-align          : justify;
        font-size           : 8pt;
    }

    p.cotesTitre {
        padding-left        : 20px;
    }

    a.cotesTitreG {
        font-weight         : bold;
        color               : #000;
    }

    a.cotesTitreD {
        font-weight         : bold;
        color               : #000;
    }
    p.cotesTexte {
    }

    .cotesDiapo {
        position            : relative;
        float               : left;
        width               : 180px;
        text-align          : justify;
        border              : 0px solid #f00;
        margin              : 45px 0 0 10px;
    }

    img.cotes {
        width               : 210px;
        height              : 130px
    }

    div.intro {
        position            : relative;
        float               : left;
        text-align          : center;
    }

    p.intro {
        font-size           : 7pt;
        text-align          : center;
    }

    p.bas {
        padding             : 20px 100px 0 100px;
        text-align          : center;
        font-weight         : bold;
    }

    /****************************************************/
    /*** dans corps de miel.html ************************/
    table#miels td {
        vertical-align      : top;
    }
    
    table#miels img.mielType {
        width               : 60px;
        height              : 40px;
    }
    
    div#mielMiel, div#mielCadeaux, div#mielProduits {
        position            : absolute;
        top                 : 145px;
        left                : 40px;
        width               : 730px;
        height              : 455px;
        margin              : 30px 0 0 0;
        border              : 1px solid #cccccc;
        background-color    : #ffff99;
    }
    
    div#mielCadeaux, div#mielProduits {
        visibility          : hidden;
    }
    
    div#mielMiel {
        visibility          : visible;
    }
    
    /****************************************************/
    /*** dans corps de gazette.html ********************/
    
    /*** 1 - RAJOUTER ICI LE GAZETTE N+1 AVEC UNE VIRGULE DEVANT *******/
    #gazette1, #gazette2 , #gazette3, #gazette4 {
        position            : absolute;
        top                 : 0;
        left                : 0;
        width               : 550px;
        height              : 315px;
        margin              : 30px 0 0 0;
        border              : 1px solid #cccccc;
        background-color    : #eeeeee;
    }

    /*** ICI LA GAZETTE VISIBLE AU DEBUT ***************************/
    #gazette1 {
        visibility          : visible;
    }

    /*** 2 - ICI LES AUTRES GAZETTES QUI SERONT VUES A LA DEMANDE ******/
    #gazette2 , #gazette3, #gazette4 {
        visibility          : hidden;
    }
    /*** C'EST TOUT !!! *******/

    /****************************************************/
    /*** dans corps de sacoches.html ********************/
    #sacochesDimensions, #sacochesRigidite, #sacochesEtancheite,
    #sacochesErgonomie,  #sacochesSolidite, #sacochesCommande,
    #sacochesTarifs,     #sacochesPeau  {
        position            : absolute;
        top                 : 0;
        left                : 0;
        width               : 550px;
        height              : 230px;
        margin              : 30px 0 0 0;
        border              : 1px solid #cccccc;
        background-color    : #eeeeee;
    }
    
    #sacochesDimensions, #sacochesRigidite, #sacochesEtancheite,
    #sacochesErgonomie,  #sacochesSolidite, #sacochesCommande,
    #sacochesTarifs {
        visibility          : hidden;
    }
    
    #sacochesPeau {
        visibility          : visible;
    }
    
    #survolPeau {
        color               : #8F5B00;
    }
    
    table.dimensions {
        margin-left         : 40px;
    }
    
    td.ligneDimensions {
        width               : 140px;
        padding-left        : 20px;
        border              : 1px solid #888;
        font-weight         : bold;
    }
    
    td.titreDimensions {
        width               : 100px;
        padding-left        : 20px;
        border              : 1px solid #888;
        font-weight         : bold;
    }
    
    td.colonneDimensions {
        padding-left        : 30px;
        border              : 1px solid #888;
        font-style          : italic;
    }
    
    td.celluleDimensions {
        padding-left        : 30px;
        border              : 1px solid #888;
    }
    
    
    /****************************************************/
    /*** dans corps de randonnee.html *******************/
    p#randonneeTexte1 {
        margin-top          : 55px;
        margin-bottom       : 75px;
    }
    
    p#randonneeTexte2 {
        margin-top          : 55px;
        margin-bottom       : 121px;
    }
    
    div#randonneePrecautions, div#randonneeApprentissage,
    div#randonneeReservation, div#randonneeTarifs,
    div#randonneeNiveau {
        position            : absolute;
        top                 : 0;
        left                : 0;
        width               : 550px;
        height              : 250px;
        margin              : 30px 0 0 0;
        border              : 1px solid #cccccc;
        background-color    : #eeeeee;
    }
    
    div#randonneePrecautions, div#randonneeApprentissage,
    div#randonneeReservation, div#randonneeTarifs {
        visibility          : hidden;
    }
    
    div#randonneeNiveau {
        visibility          : visible;
    }
    
    #survolNiveau {
        color               : #8F5B00;
    }
    
    div#tarifsGauche, div#tarifsDroite {
        position:relative;
        float:left;
        border:0px solid #f00;
    }
    
    div#tarifsGauche {
        width:250px;
    }
    div#tarifsDroite {
        width:280px;
    }

    /****************************************************/
    /*** dans corps de activites.html *******************/
    p#activitesTexte1 {
        margin-top          : 55px;
        margin-bottom       : 75px;
    }
    
    p#activitesTexte2 {
        margin-top          : 55px;
        margin-bottom       : 121px;
    }
    
    div#activitesEducation,    div#activitesGouter, div#activitesAccueilGroupes,
    div#activitesCentresAeres, div#activitesManifestationsdiv,
    #activitesPension {
        position            : absolute;
        top                 : 0;
        left                : 0;
        width               : 550px;
        height              : 250px;
        margin              : 30px 0 0 0;
        border              : 1px solid #cccccc;
        background-color    : #eeeeee;
    }
    
    div#activitesEducation,    div#activitesGouter, div#activitesAccueilGroupes,
    div#activitesCentresAeres, div#activitesManifestations {
        visibility          : hidden;
    }
    
    div#activitesPension {
        visibility          : visible;
    }
    
    #survolPension {
        color               : #8F5B00;
    }
    
    /****************************************************/
    /*** dans corps de liensamis.html *****************/
    div.liensamis {
        margin              : 10px 100px 20px 30px;
    }
    
    a.liensamis {
        color               : #0000ff;
        font-weight         : bold;
    }
    
    /****************************************************/
    /*** dans corps de plancontact.html *****************/
    img.maison {
        position            : relative;
        float               : left;
        width               : 400px;
        height              : 300px;
        border              : 1px solid #ddd;
        margin              : 55px 10px 0 10px;
    }
    
    p.itineraire {
        position            : relative;
        float               : left;
        width               : 300px;
        text-align          : justify;
    }
    
    p.adresse, p.telephone, p.mail, p.gps {
        position            : relative;
        float               : left;
        width               : 350px;
        text-align          : left;
    }
    
    p.telephone, p.mail, p.gps {
        padding-bottom      : 10px;
    }
}


/*****************************************************************************/
@media print {
    .textePeau, texteRigidite, texteEtancheite, texteErgonomie, texteSolidite, #detail, #footer {
        display             : block;
    }
    
    img.header1 {
        border              : 0;
    }

    p.titre {
        position            : relative;
        float               : left;
        width               : 100%;
        font-family         : verdana;
        font-weight         : bold;
        font-size           : 12pt;
    }
    
    li#majSite {
        visibility          : visible;
        list-style-type     : none;
        width               : 100px;
    }
    
    .sacochesTexte {
        width               : 760px;
    }
    
    div.liensamis {
        margin              : 10px 60px 20px 30px;
    }
    
    a.liensamis {
        color               : #0000ff;
        font-weight         : bold;
    }
    
    img.diapo {
        width               : 380px;
        height              : 230px;
        border              : 1px solid #ddd;
    }
    
    #detail {
        position            : relative;
        float               : left;    
        visibility          : visible;
        width               : 600px;
        border              : 0;
        padding             : 0 10px 0 10px;;
    }
    
    p.encartTexte {
        text-align          : justify;
        padding             : 0 20px 0 20px;
    }
    
    .textePeau {
    
    }
    
    .texteRigidite {
    
    }
    
    .texteEtancheite {
    
    }

    .texteErgonomie {

    }

    .texteSolidite {
    
    }
    
    #footer {
        position            : absolute;
        top                 : 20px;
        left                : 250px;
        width               : 400px;
    }
    
    #coordonnees1 {
        position            : absolute;
        top                 : 0;
    }
    #coordonnees2 {
        position            : absolute;
        top                 : 15px;
    }
    #coordonnees3 {
        position            : absolute;
        top                 : 30px;
    }
    #coordonnees4 {
        position            : absolute;
        top                 : 45px;
    }
    #coordonnees5 {
        position            : absolute;
        top                 : 60px;
    }
    #coordonnees6 {
        position            : absolute;
        top                 : 75px;
    }
    #coordonnees7 {
        position            : absolute;
        top                 : 90px;
    }
    #header2, li.menu, li.menuliensamis, .icones, .lienDetailFiche, #diapo,
    .survol, a.detail, .maison, span.tiret, .mielType {
        display             : none;
    }
    
}
/*******************************/