/* Quelques réglages et outils */


p, h1, h2, h3, h4, h5, h6, div, /*label, input,
textarea, legend, fieldset,*/ table, tr, td,
ul, ol, li, dt, dl, dd, img, form {
    margin 		: 0;
    padding 	: 0;
    font-family : Arial, Geneva, Helvetica, Sans-Serif;
    font-size 	: 12px;
    font-weight : normal;
}

img {
  border : 0;
}

html {
  overflow-x : auto; /* fixes MSIE scrollbar bug DO NOT REMOVE, has no effect in Mozilla, or Opera */
}

body {
  text-align : center;
  padding    : 0 0 1em 0;
  margin     : 0;
  background : #fff;
}

.spacer {
    float : left;
    clear : both;
    width : 100%;
    height : 0;
    margin: 0;
    padding: 0;
}


a {
    text-decoration : none;
    color : #F68B1E;
}

a:hover {
    text-decoration : underline;
}


p a {
    text-decoration : underline;
}


h1 {
    display : block;
    width : 100%;
    text-align : left;
    clear : both;
    color : #990000;
    font-weight : bold;
    font-size : 1.2em;
    padding : 0 0 0 30px;
    margin : 0;
    text-align : left;
    background : url(../img/fleche_rouge.gif) 12px 50% no-repeat;
}


h2 {
    display : block;
    clear : both;
    font-size : 1em;
    color : #505050;
    font-weight : bold;
    padding : 1em 0 .6em 12px;
}



h3 {
    display : block;
    width : 100%;
    clear : both;
    font-size : 1em;
    color : #196A8D;
    font-weight : bold;
}



ul, ol {
    display : block;
    clear : both;
    width : 100%;
    overflow : hidden;
    list-style-type : none;
}


div {
    display : block;
    width : 100%;
    overflow : hidden;
}


p {
    display : block;
    width : 100%;
    clear : both;
    margin : 0;
    padding : .4em 0;
    overflow : hidden;
    font-size : .9em;
    line-height : normal;
    color : #091F28;
}


p.bleu {
    color : #196A8D;
}

p.noir {
    color : #091F28;
}



/**
 * Liste à puce classique
 */

ul.classique {
    margin : 0;
    padding : .6em 0 1em 2em;
}

ul.classique li {
    background : url(../img/gabarit/puce_carre_noir.gif) center left no-repeat;
    color : #091F28;
    margin : 0;
    padding : 0 0 0 9px;
    font-size : .9em;
}


ul.classique li a {
    text-decoration : underline;
}


/* Description de la page */

#corps-page {
    display : block;
    width : 994px;
    overflow : hidden;
    margin : 0 auto;
    text-align : left;
}




/* ------------------ Tetiere -------------------- */

#tetiere {
    display : block;
    float : left;
    overflow : visible;
    position : relative;
    clear : both;
    width : 100%;
    height : 160px;
    padding : 0;
    background : #DBD3CE; /* url(../img/tetiere_bandeau.jpg) top center no-repeat;*/
    margin : 0 0 7px 0;
}



/* Panorama */
#panorama {
  position:relative;
  height:160px;
  padding : 7px 0 0 16px;
}

#panorama img {
  position:absolute;
  top : 7px;
  left : 16px;
}

#masque-bandeau {
    position : absolute;
    top : 0;
    left : 0;
    width : 100%;
    height : 161px;
    background : url(../img/tetiere_bandeau_masque.gif) 9px 0 no-repeat;
    z-index : 1;
}

#masque-bandeau h1 {
    position : absolute;
    top : 56px;
    left : 85px;
    font-size : 2.5em;
    color : #990000;
    font-weight : normal;
    background : transparent;
    z-index : 10;
    padding : 0;
    margin : 0;
}

#masque-bandeau h2 {
  position : absolute;
  top : 55px;
  left : 82px;
  font-size : 2.6em;
  color : #fff;
  font-weight : normal;
  background : transparent;
  padding : 0;
  margin : 0;
}
/*
#masque-bandeau h3 {
  position : absolute;
  top : 55px;
  left : 81px;
  font-size : 2.6em;
  color : #fff;
  font-weight : normal;
  background : transparent;
  padding : 0;
  margin : 0;
}*/

#tetiere a#lien-accueil {
      position : absolute;
      top : 0;
      left : 0;
    float : left;
    width : 445px;
    height : 120px;
    z-index : 10;
}


#tetiere p.localisation {
    float : left;
    overflow : hidden;
    position : absolute;
    left : 202px;
    top : 89px;
    color : #fff;
    font-size : .8em;
    text-align : left;
    width : auto;
    padding : 0;
    margin : 0;
}


#versions-site {
    float : left;
    width : 80px;
    overflow : hidden;
    position : absolute;
    right : 6px;
    top : 118px;
    z-index : 10;
}


#versions-site p {
    float : left;
    width : auto;
    clear : none;
    background : url(../img/tetiere_drapeau_fr.gif) top left no-repeat;
    padding : 0;
    margin : 0;
}


#versions-site p.francais {

}


#versions-site p.anglais {
    background : url(../img/tetiere_drapeau_en.gif) top left no-repeat;
}

#versions-site p.allemagne {
    background : url(../img/tetiere_drapeau_de.gif) top left no-repeat;
}

#versions-site p a {
    float : left;
    width : 24px;
    height : 11px;
    padding : 0;
    margin : 0;
}



/* ------------------ Visuel du menu de la tétière -------------------- */

#tetiere ul {
    float : left;
    overflow : visible;
    position : absolute;
    left : 141px;
    top : 125px;
    width : auto;
    padding : 0;
    margin : 0;
    z-index : 10;
}

#tetiere li {
    position : relative;
    float : left;
    width : auto;
    clear : none;
    padding : 4px 0;
    overflow : visible;
    color : #505050;
    font-size : .9em;
}


#tetiere li.dernier {
    padding-right : 16px;
}

#tetiere li.premier {
    padding-left : 16px;
}


#tetiere li.recherche {
    padding-left : 2.4em;
    padding-right : 1.5em;
}

#tetiere li.carnet-de-voyage {
    padding-left : 21px;
    background : url(../img/tetiere_icone_carnet.gif) 0 2px no-repeat;
}

#tetiere li.actif {
    background : url(../img/fleche_rouge.gif) 17px 52% no-repeat;
    /*padding-left : 0 !important;*/
}

#tetiere li.actif.premier {
    background-position : 3px 52%;
    padding-left : 19px;
}


#tetiere li a {
    color : #505050;
    /*font-size : .9em;*/
}

#tetiere li.actif a {
    font-weight : bold;
}

#tetiere li span {
      float : left;
    color : #7F7F7F;
    padding : 0 .9em;
    font-size : 1.1em;
    margin : 0;
}

#tetiere li.actif span {
    margin-right : 1.3em;
}

#tetiere li input {
    float : left;
}

#tetiere li input.champ-texte {
    border : 1px solid #A7A7A7;
    color : #A7A7A7;
    height : 14px;
    width : 98px;
    padding : 0px 4px;
    margin : 0 .2em 0 0;
    font-size : .9em;
}


#tetiere ul li .sous-menu {
    position : absolute;
    top : 20px;
    left : 12px;
    display : none;
    width : 204px;
    background : #fff;
    padding : 1em 0 1em 0;
    z-index : 100;
}
#tetiere ul li.affiche-sousmenu .sous-menu { display : block; }

#tetiere ul li.premier .sous-menu { left : 0px; }

#tetiere ul li .sous-menu p {
    font-style : italic;
    font-size : .8em;
    color : #505050;
    padding : 0 0 0 1em;
    width : 90%;
}

#tetiere ul li .sous-menu ol {
    padding : 1em 1em;
}


#tetiere ul li .sous-menu ol li {
    float : left;
    clear : both;
    width : 80%;
    padding : 2px 0 2px 20px;
    border-top : 1px solid #E9E9E8;
}

#tetiere ul li .sous-menu ol li.actif {
    background : url(../img/fleche_rouge.gif) 0px 5px no-repeat;
}


#tetiere ul li .sous-menu ol li a {
    /*font-size : .9em;*/
    color : #505050;
    text-decoration : none;
    font-weight : normal;
}
#tetiere ul li .sous-menu ol li a:hover { text-decoration : underline; }


#tetiere ul li .sous-menu ol li.actif a {
    font-weight : bold;
}




/* ------------------ Colonne de gauche (menu) -------------------- */



#colonne-gauche {
    float : left;
    width : 144px;
    padding : 70px 0 0 0;
    margin : 0 0 8px 0;
    background : url(../img/colg_illustration.jpg) top left no-repeat;
    border : 6px solid #D4D3D2;
}


#colonne-gauche ol {
    background : #E5E3E2;
}


#colonne-gauche ol li {
    width : 100%;
    padding-bottom : 1em;
}


#colonne-gauche ol li h2 {
    color : #505050;
    padding : 5px 0 5px 21px;
    background : #fff url(../img/colg_developper.gif) 10px 8px no-repeat;
    border-bottom : 1px solid #D4D3D2;
    cursor : pointer;
}


#colonne-gauche ol li.afficher h2 {
    background : #fff url(../img/colg_reduire.gif) 10px 11px no-repeat;
}



#colonne-gauche ol li a {
    color : #505050;
}


#colonne-gauche ol ul {
    display : none;
    padding : .4em 0 0 0;
}

#colonne-gauche ol li.afficher ul {
    display : block;
}

#colonne-gauche ol ul li {
      width : 85%;
    padding : .2em 0 0 20px;
    background : url(../img/colg_puce.gif) 15px 7px no-repeat;
}

* html #colonne-gauche ol ul li {
    width : 99%;
}

#colonne-gauche ol ul li a {
    font-size : .9em;
}

#colonne-gauche ol ul li.actif a {
    font-weight : bold;
}


#colonne-gauche ol li.reserver-en-ligne {
    padding : 8px 0 6px 30px;
    margin : 0 0 1em 0;
    background : #990000 url(../img/colg_fleche_reserver.gif) 8px 10px no-repeat;
}

#colonne-gauche ol li.reserver-en-ligne a {
    font-weight : bold;
    color : #fff;
}


#colonne-gauche ol li.sites-accessibles {
    float : left;
    clear : both;
    padding : 8px 0 12px 16px;
    background : #F6F4F3 url(../img/colg_accessible.jpg) 5px 7px no-repeat;
}

#colonne-gauche ol li.sites-accessibles a {
    float : left;
    padding : 3px 0 0 34px;
    font-weight : normal;
    font-size : .8em;
    width : 82px;
    color : #505050;
}





/* ------------------ Pied de page -------------------- */

/*
.spacer {
  display : block;
  overflow : hidden;
  clear : both;
  width : 100%;
  padding : 0;
  margin : 0;
  height : 1px;
  background : red;
}


#wrapper {
  display : block;
  overflow : hidden;
  clear : both;
  width : 100%;
  padding : 0;
  margin : 0;
}*/


#pied-de-page {
    display : block;
    float : left;
    position : relative;
    clear : both;
    overflow : visible;
    width : 100%;
    height : 104px;
    background : #DBD3CE url(../img/pieddepage_ombre.gif) top left repeat-x;
    margin : 8px 0 0 0;
}



.lien-region {
    position : absolute;
    left : 20px;
    top : 25px;
    float : left;
    width : 81px;
    height : 55px;
    background : url(../img/pdp_logo_region.gif) top left no-repeat;
}

.lien-region a {
    display : block;
    width : 100%;
    height : 55px;
}



.lien-ocp {
    position : absolute;
    left : 140px;
    top : 20px;
    float : left;
    width : 61px;
    height : 75px;
    background : url(../img/pdp_logo_ocp2.gif) top left no-repeat;
}

.lien-ocp a {
    display : block;
    width : 100%;
    height : 55px;
}


#pied-de-page p {
    float : left;
    position : absolute;
    /*left : 785px;*/
    left : 330px;
    top : 47px;
    color : #fff;
    font-weight : bold;
    font-size : .9em;
    /*background : url(../img/articledetail_fond_artlies.jpg) no-repeat;*/
}

#pied-de-page p a {
    color : #fff;
    font-weight : bold;
    font-size : 1em;
    text-decoration : underline;
}

#pied-de-page p a:hover{
    color : #9C0224;

}

#pied-de-page ul {
    float : right;
    width : auto;
    height : auto;
    /*position : absolute;
    left : 450px;
    top : 0px;*/
    padding : 0;
    margin : 0;
    overflow : visible;
}

#pied-de-page ul li {
    position : relative;
    overflow : visible;
    float : left;
    clear : none;
    width : auto;
    height : 35px;
    background : url(../img/pdp_bouton_fin.gif) top right no-repeat;
    padding : 0 25px 0 0;
    margin : 0 1em 0 0;
}


#pied-de-page ul li p {
    float : left;
    position : static;
    width : auto;
    height : 35px;
    padding : 0 0 0 25px;
    margin : 0;
    background : url(../img/pdp_bouton_debut.gif) top left no-repeat;
}

#pied-de-page ul li p span,
#pied-de-page ul li p a {
    color : #fff;
    line-height : 30px;
    font-weight : bold;
    font-size : 1.1em;
    padding : 0;
    margin : 0;
}



#pied-de-page ul li .sous-menu {
    position : absolute;
    bottom : 35px;
    left : 1px;
    display : none;
    width : 159px;
    background : #BAB0A9;
    padding : 1em 0 1em 0;
    z-index : 50;
}
#pied-de-page ul li.affiche-sousmenu .sous-menu { display : block; }


#pied-de-page ul li .sous-menu p {
    font-style : italic;
    font-size : .8em;
    color : #505050;
    padding : 0 0 0 1em;
    width : 90%;
}

#pied-de-page ul li .sous-menu ol {
    padding : 0 0 0 7px;
    margin : 0;
}


#pied-de-page ul li .sous-menu ol li {
    float : left;
    clear : both;
    width : 80%;
    height : auto;
    padding : 2px 0 2px 10px;
    border-bottom : 1px solid #C7C2BE;
    margin : 0;
    background : none;
    font-size : .9em;
    line-height : 100%;
    color : #505050;
}

#pied-de-page ul li .sous-menu ol li.actif {
    background : url(../img/fleche_rouge.gif) 19px 50% no-repeat;
}


#pied-de-page ul li .sous-menu ol li a {
    display : inline;
    padding : 0;
    margin : 0;
    /*font-size : .9em;
    line-height : 100%;*/
    color : #505050;
    text-decoration : none;
    font-weight : normal;
}
#pied-de-page ul li .sous-menu ol li a:hover { text-decoration : underline; }


#pied-de-page ul li .sous-menu ol li.actif a {
    color : #fff;
    font-weight : bold;
}









/* ------------------ Fil d'ariane -------------------- */

#fil-ariane {
    float : left;
    clear : both;
    border : none;
    width : auto;
    margin : 1.5em 0 2em 0;
    padding : 0;
    background : url(../img/gabarit/fil_ariane_fleche.gif) center left no-repeat;
}

#fil-ariane ul {
    float : left;
    width : auto;
    padding : 0 0 0 15px;
    margin : 0;
    background : url(../img/gabarit/fil_ariane_bg.gif) top left repeat-x;
}

#fil-ariane li {
    float : left;
    width : auto;
}

#fil-ariane span,
#fil-ariane a {
    float : left;
    width : auto;
    line-height : 37px;
    color : #F68B1E;
}

#fil-ariane span {
    padding : 0 4px 0 4px;
}


#fil-ariane li.actif a {
    font-weight : bold;
}


#fil-ariane li.fin-fil-ariane {
    float : left;
    width : 50px;
    height : 37px;
    background : url(../img/gabarit/fil_ariane_bout.gif) top right no-repeat;
}


/* ------------------ Bouton "ajouter au carnet de voyage" -------------------- */

.bouton-ajout-carnet {
    float : left;
    clear : both;
    color : #990000;
    font-weight : normal;
    font-size : .9em;
    background : #fff url(../img/bouton_ajout_carnet.gif) 5px 9px no-repeat;
    border : 1px solid #fff;
    padding : 10px 0 10px 25px;
    text-align : left;
    text-decoraton : none;
}

.bouton-ajout-carnet:hover {
   /*border : 1px solid #990000;*/
   text-decoration : underline;
}

/* ------------------ Bouton pour l'impression -------------------- */
/*

div.bouton-imprimer {
  position : absolute;
  right : 0;
  top : 0;
  width : auto;
  height : 15px;
  background : #D4D3D2 url(../img/icone_imprimer.gif) top left no-repeat;
  padding : 0 8px 0 22px;
}

div.bouton-imprimer a {
  text-decoration : none;
  font-size : .9em;
  font-weight : normal;
  color : #990000;
  line-height : 15px;
  padding : 0;
}
div.bouton-imprimer a:hover { text-decoration : underline; }

*/
/* ------------------ Spécial impression des pages -------------------- */


#infos-impression {
    display : none;
    width : 90%;
    overflow : hidden;
    clear : both;
    padding : 1em;
}

#infos-impression p {
  font-size : 1.3em;
  color : #000;
  font-weight : bold;
}


@media print {

   #corps-page {
      display: inline;
      float: none;
      overflow: visible;
      page-break-inside: auto;
      margin: 0;
      padding: 0;
   }

   #colonne-contenu {
      display: inline;
      float: none;
      overflow: visible;
      page-break-inside: auto;
      width: 100%;
      height: auto;
      margin: 0;
      padding: 0;
   }

    #tetiere,
    #colonne-gauche,
    #pied-de-page,
    #special-debug-code,
    .bouton-imprimer {
       display : none !important;
  }



    #colonne-contenu {
       width : 100% !important;
    }

    #infos-impression {
       display : block;
    }

}




/* ------------------ iframe du CDT -------------------- */

#colonne-contenu.pagecdt {
    float : left;
    width : 824px;
    padding : 0 0 9px 7px;
    margin : 0;
}

#cdtframe {
    width: 100%;
    height: 800px;
}


/* ------------  Tableau de l'éditeur html  ------------------------ */


table.tableau-editeur {
   border : 1px solid #FFFFFF /* #EAEAEA #a5a5a5*/;
   border-collapse : collapse;
   margin : 0.2em auto; /* 1em en haut et en bas, "auto" à gauche et à droite pour centrer => Vérifier sous ie */
   /*float : left;*/ /* alignement à gauche, à utiliser avec une marge != "auto" pour la gauche et la droite */
}



#colonne-contenu table.tableau-editeur td,
table.tableau-editeur td {
   font-size: 0.9em;
   /*color : #091F28;*/
   color : #505050;
   padding : 0.8em;
   border : 1px solid #FFFFFF;  /*#EAEAEA #a5a5a5*/
}

#colonne-contenu table.tableau-editeur td p,
table.tableau-editeur td p {
	float : left;
	font-size : 1em;
	color : #505050;
}