/* Remise a zero */
* {
    margin      : 0;
    padding     : 0;
}

/* Elements de base */
html {
    width       : 100%;
    height      : 100%;
}

body{
 font-family:Arial, Helvetica, sans-serif;
 background-color:white;
 height: 8.5in;
 overflow-x : hidden;
 overflow-y : hidden;
 color:#0f6fa4;
 width: 100%;
 height: 100%;
}

a {
 text-decoration:none;
}

a:hover {
 text-decoration:underline;
}

ul{
 margin-left:60px;
 list-style-type:square;
}

legend{
 font-weight:bolder;
 padding-left: 10px;
 padding-right: 10px;
}

input[type="submit"] {
 font-weight:bolder;
 padding-top: 3px;
 padding-left: 10px;
 padding-bottom: 3px;
 padding-right: 10px;
}

input[type="text"], textarea, select{
 filter:alpha(opacity=80);
 opacity: 0.8;
 -moz-opacity:0.8;
}

/* Configuration des cases*/
#case-disponibilite{
  text-align: center;
  vertical-align:middle;
  position: fixed;
  height: 111px;
  width: 199px;
  top: 191px;
  right: 0;
  bottom: auto;
  left: 0;
  background-color: #2E77A2;
  background-image: url(image/degrade-offre.gif);
  background-repeat:repeat-x;  
}

#case-logo{
  text-align: center;
  position: fixed;
  height: 159px;
  top: 0;
  right: 61px;
  bottom: auto;
  left: 201px; 
  background-color: #F1F5F7;
}

#case-logo-droite{
  text-align: center;
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  height: 159px;
  width: 59px;
  background-color: #C3DEED;
}

#case-logo-gauche{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  position: fixed;
  height: 28px;
  width: 199px;
  top: 161px;
  right: auto;
  bottom: auto;
  left: 0; 
  background-color: #C4CED3;
  font-size:15px;
  font-style:italic;
  line-height: 28px;
}

#case-menu{
  text-align: center;
  position: fixed;
  height: 28px;
  top: 161px;
  right: 61px;
  bottom: auto;
  left: 201px; 
  background-color: #5B5B5B;
}

#case-menu-droite{
  text-align: center;
  position: fixed;
  height: 28px;
  width: 59px;
  top: 161px;
  right: 0;
  bottom: auto;
  left: auto; 
  background-color: #C4CED3;
}

#case-cliquez{
  text-align: center;
  position: fixed;
  height: 159px;
  width: 199px;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  background-color: #2E77A2;
  background-image: url(image/cliquez-ici.png);
  vertical-align: bottom;
}

#case-titre{
  color: white;
  padding: 0;
  vertical-align:middle;
  text-align: center;
  position: fixed;
  height: 111px;
  top: 191px;
  right: 61px;
  bottom: auto;
  left: 201px; 
  background-color: #2E77A2;
  background-image: url(image/degrade-offre.gif);
  background-repeat:repeat-x;
}

#case-titre-droite{
  text-align: center;
  position: fixed;
  height: 111px;
  width: 59px;
  top: 191px;
  right: 0;
  bottom: auto;
  left: auto; 
  background-color: #2E77A2;
  background-image: url(image/degrade-offre.gif);
  background-repeat:repeat-x;
}

#case-actualite{
  position: fixed;
  padding:0;
  margin:0;
  width: 199px;
  top: 304px;
  right: auto;
  bottom: 21px;
  left: 0; 
  overflow:auto;
  font-size: 0.5em;
  text-align: left;
  background-color: #C4CED3;
}

#case-contenu{
  position: fixed;
  background-image: url(image/filigrane.jpg);
  background-repeat:no-repeat;
  background-position:center center;
  top: 304px;
  right: 61px;
  bottom: 21px;
  left: 201px; 
  background-color: #F1F5F7;
  color: gray;
  overflow:auto;
}

#contenu{ 
 margin: 0;
 padding: 20px;
 z-index : 0;
}

body#page-accueil #contenu, body#page-faq #contenu{
 /* height:100%; Priority on first column fill */
 -moz-column-width: 20em;
 -moz-column-gap: 1.5em;
 -moz-column-rule: medium solid;
 column-width: 20em;
 column-gap: 1.5em;
 column-rule: medium solid;
}

body#page-accueil #contenu h2{
 -moz-column-span: all;
 column-span: all;
}

body#page-accueil #contenu p, body#page-accueil #contenu div,
body#page-faq #contenu p, body#page-faq #contenu div{
 -moz-column-break-inside: avoid;
 column-break-inside: avoid;
}

#options{
  text-align: center;
  position: fixed;
  width:59px;
  top: 304px;
  right: 0;
  bottom: 21px;
  left: auto; 
  background-color: #C4CED3;
}

#case-bas-gauche{
  text-align: center;
  position: fixed;
  height: 19px;
  width: 199px;
  top: auto;
  right: auto;
  bottom: 0;
  left: 0; 
  background-color: #C4CED3;
}

#droits{
  vertical-align:middle;
  font-variant:small-caps;  
  font-size: 14px;
  text-align: right;
  padding-right:10px;
  position: fixed;
  height: 19px;
  top: auto;
  right: 61px;
  bottom: 0;
  left: 201px; 
  background-color: #5B5B5B;
  color: white;
}

#case-bas-droite{
  text-align: center;
  position: fixed;
  height: 19px;
  width: 59px;
  right: 0;
  bottom: 0;
  top: auto;
  left: auto; 
  background-color: #C4CED3;
}




/* Rafinement des cases */

#case-logo a img, #case-disponibilite a img {
 border: none;
}

#case-titre div{
 display:block;
 position:relative;
 padding:0;
 margin:0;
 width:100%;
 height:100%;
 vertical-align:middle;
 font-size:45px;
 background-image: url(image/fond-offre.jpeg);
 background-repeat:no-repeat;
 background-position: top left;
 text-align:left;
}

#case-titre div h1{
 display:block;
 position:relative;
 padding:0;
 top:30px;
 left:150px;
 margin:0;
 width:100%;
 height:100%;
 vertical-align:middle;
 font-family:"Georgia","Times New Roman", Times, serif;
 font-size:45px;
}

#case-cliquez #onglet span {
 left: 0;
 top: 0;
 bottom: 0;
 right: 0;
}

#case-cliquez a{
 display:block;
 height: 188px;
 width: 199px;
 font-size:1px;
 font-weight:bold;
 text-decoration:none;
 content:"";
}

#case-actualite h2{
 padding:0;
 margin:0;
 float:none;
 top:0;
 width:100%;
 height:25px;
 color:white;
 background-image: url(image/degrade-actualite.gif);
 background-repeat:repeat-y;
 border-bottom: thin dotted white;
 font-size:20px;
 text-indent: 10px;
}



/* Decoration des menus */

#menu-offre{
 background-image: url(image/coin-offre.gif);
 background-repeat:no-repeat;
 background-position:top right;
 border-right: thin dotted #007abd;
}

#menu-aide{
 background-image: url(image/coin-aide.gif);
 background-repeat:no-repeat;
 background-position:top right;
 border-right: thin dotted #d32939;
}

#menu-compte{
 background-image: url(image/coin-compte.gif);
 background-repeat:no-repeat;
 background-position:top right;
 border-right: thin dotted #9f8093;
}

#menu-societe{
 background-image: url(image/coin-societe.gif);
 background-repeat:no-repeat;
 background-position:top right;
 border-right: thin dotted #fca309;
}

#menu-faq{
 background-image: url(image/coin-faq.gif);
 background-repeat:no-repeat;
 background-position:top right;
}

/* Menu horizontal */

ul.menu-horizontal{
 display:table;
 font-weight:bold;
 margin: 0;
 padding: 0;
 text-align:left;
 width: 100%;
 height: 100%;
}

ul.menu-horizontal li{
 display:table-cell;
 margin: 0;
 padding: 0;
 width:20%;
 text-align:center;
 vertical-align:middle;
}

ul.menu-horizontal li a{
 margin: 0;
 padding: 0;
 font-size: 15px;
 color: white;
 white-space:nowrap;
}

/* Definition zones */
dl.menu-liste{
 padding: 0;
 margin: 0;
 margin-left: 5px;
 margin-right: 5px;
 font-size: 1.8em;
}

dl.menu-liste dt{
 padding-top: 5px;
 padding-left: 2px;
 font-weight: bold;
 font-style: italic;
 font-size: larger;
}

dl.menu-liste dd {
 padding: 0;
 margin:0;
 text-align:justify;
}

dl.menu-liste a {
 color:#0f6fa4; 
}

dl.menu-liste dd::after {
 padding-left: 5px;
 display: inline;
 content: url(image/puce.gif);
 vertical-align:middle;
}

/* Vertical menu */

ul.menu-liste{
 width:100%;
 float:left;
 padding:0;
 margin:0;
 display:table;
}

ul.menu-liste li{
 list-style-type:none;
 display:table-row;
}

ul.menu-liste li a{
 display:table-cell; 
 padding: 0;
 margin: 0;
 font-size:12px;
 color: black;
}

ul.menu-liste li a#contacter::before {
 padding: 0;
 margin-top:10px;
 display: block;
 content: url(image/courriel.png);
}

ul.menu-liste li a#imprimer::before {
 padding: 0;
 margin-top:10px;
 display: block;
 content: url(image/imprimer.png);
}

/* Rules for the page section features */

body#page-offre #menu-offre, body#page-aide #menu-aide, body#page-compte #menu-compte, body#page-societe #menu-societe, body#page-faq #menu-faq {
 background-color: gray;
}

body#page-offre #case-titre div{
 background-image: url(image/fond-offre.jpeg);
}

body#page-aide #case-titre div{
 background-image: url(image/fond-aide.jpeg);
}

body#page-compte #case-titre div{
 background-image: url(image/fond-compte.jpeg);
}

body#page-societe #case-titre div{
 background-image: url(image/fond-societe.jpeg);
}

body#page-faq #case-titre div{
 background-image: url(image/fond-faq.jpeg);
}

body#page-aide #case-titre, body#page-aide #case-titre-droite, body#page-aide #case-disponibilite{
  background-image: url(image/degrade-aide.gif);
}

body#page-compte #case-titre, body#page-compte #case-titre-droite, body#page-compte #case-disponibilite{
  background-image: url(image/degrade-compte.gif);
}

body#page-societe #case-titre, body#page-societe #case-titre-droite, body#page-societe #case-disponibilite{
  background-image: url(image/degrade-societe.gif);
}

body#page-faq #case-titre, body#page-faq #case-titre-droite, body#page-faq #case-disponibilite{
  background-image: url(image/degrade-faq.gif);
}


/* Règles pour l'affichage du contenu */

#contenu h2{
 padding:0;
 margin:0;
 font-size:85%;
 text-transform:uppercase;
 color:#0f6fa4;
}

#contenu p{
 text-align:justify;
 /*font-size: small;*/
}

#contenu p:first-letter{
 /*font-size:x-large;*/
 font-size:150%;
 line-height:80%;
 font-weight:bolder;
}

#contenu form {
 text-align: center;
}

#contenu form table td {
 text-align: left;
 padding: 5px;
}
#contenu form table tr td:first-child {
 text-align: right;
}

#contenu fieldset{
 margin-bottom: 10px;
 font-size:80%;
}

#contenu form label{
 width: 50%;
}
#contenu form label:first-child::after{
 content: " :";
}


#contenu form input[type="submit"]{
 margin-left: 20%;
}

/* Gestion d'erreur */
.error{
 color: red;
 font-weight: bold;
}

span.error{
 padding-left: 10px;
}

#case-disponibilite div{
 display:block;
 position:relative;
 margin-top:35px;
 font-size:16px;
}

#service-label{
 color: white;
}

#disponibilite-immediate{
 display:block;
 color: #97D92F;
 font-weight:bold;
 text-transform:uppercase;
 line-height:2em;
}

form#paiement{
 display:inline;
}
#droits a{
 color: white;
 font-style:italic;
}

#contenu p{
 margin-top: 10px;
 margin-bottom: 10px;
}

#contenu ol, #contenu ul, #contenu dd {
 margin-left:40px;
}

#contenu dt:first-letter{
 font-size:x-large;
 line-height:80%;
 font-weight:bolder;
}

#contenu dt{
 font-weight:bolder;
}


.table-matieres > ol > li {
 margin-bottom: 10px;
 list-style-type:upper-alpha;
} 

dl.question-reponse{
 margin-top: 30px ;
}

dl.question-reponse dt{
 margin-top: 10px ;
}


#conditions-vente{
 height: 150px;
 overflow-y:scroll;
}

/*
.highlighted { 
  background-color: #999999;
  color:white;
}*/

dt.highlighted, dt:target { 
  background-color: #999999;
  color:white;
/*  border-top: thick dashed white;*/
}
dt.highlighted + dd, dt:target + dd {
 background-color: #CCCCCC;
 color:black;
 border-bottom: 2px dashed black;
}

div.important {
  color:black;
  background-color:yellow;
  padding: 3px;
  margin-bottom: 10px;
  margin-top: 10px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight: bolder;
  font-variant:small-caps;
  border-top:medium dashed black;
  border-bottom:medium dashed black;
  text-align:center;
}

body#page-accueil dt.important, body#page-aide dt.important, body#page-faq dt.important {
  color:black;
  background-color:yellow;
  padding-top: 3px;
  margin-top: 10px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight: bolder;
  font-variant:small-caps;
  border-top:medium dashed black;
  text-align:center;
}
body#page-accueil dd.important, body#page-aide dd.important, body#page-faq dd.important {
  color:black;
  background-color:yellow;
  padding-bottom: 3px;
  margin-bottom: 10px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight: bolder;
  font-variant:small-caps;
  border-bottom:medium dashed black;
  text-align:center;
}


/* Ombrages CSS2 */
#menu-offre a, #menu-aide a, #menu-compte a, #menu-societe a, #menu-faq a, #case-actualite h2, #case-disponibilite{
 text-shadow: #333333 4px 4px 4px;
 /* filter: progid:DXImageTransform.Microsoft.Shadow(Color=#333333, Direction=135, Strength=4); specifique pour IE, berk ! */
}
#case-titre {
 text-shadow: #333333 6px 6px 4px;
 filter: shadow(Color=#333333, Direction=135, Strength=4);
}
#contenu, #case-logo{
 cursor: url('image/fleche-noire.cur'), default;
}