/*
  Ce fichier est la propriété exclusive de ATM-PRO. 
  Toute reproduction ou diffusion de quelque article, titre, application,
  logiciel, code, mise en page, logo, image, marque, ou information est interdit,
  sauf accord préalable écrit de ATM-PRO.
  
  This file is the exclusive property of ATM-PRO. 
  Any reproduction or diffusion of some article, title, application,
  software, code, design, logo, image, mark, or information is forbidden, 
  except written prior agreement of ATM-PRO.
*/

/* ---------------------------------------- VALEURS  GÉNÉRALES ---------------------------------------- */
body{
  text-align: center;
  background-color: #395573;
  font-family: arial, sans-serif;
  margin-top: 0;
}

h1{
  font-size: 1.6em;
  margin: 1.0em 0 1em 240px !important;
  margin: 2.4em 0 1em 240px;
  color: #444;
}
h2, h3, h4, h5, h6{
  margin: 0 0 0 0;
}
a{
  color: #000;
}
a:hover{
  text-decoration: none;
}

a img{
  border: none;
}

.center_align{
  text-align: center;
}

.big{
  font-size: 1.2em;
  font-weight: bold;
}
.small{
  font-size: 0.9em;
}
.blue{
  color: navy;
}
.italic{
  font-style: italic;
}
table{
	border-collapse: collapse;
  width: 99%;
  margin: 0.5em 0;
  text-align: center;
}
table tr td{
	border: 1px solid #999;
	padding: 2px 3px;
  font-size: 0.8em;
}

table.petit tr td{
  font-size: 0.6em;
}
table.moyen tr td{
  font-size: 0.7em;
}

table.none {
  text-align: left;
  border: none;
}
table.none tr td{
  text-align: left;
  border: none;
}

table.classic {
  text-align: left;
}

table.classic td.prix{
  text-align: right;
  padding-right: 1em;
}
table.classic td.head{
  font-size: 0.9em;
  font-weight: bold;
}
table.classic tr.head td{
  font-size: 0.9em;
  font-weight: bold;
}


table.simple td.gauche{
  border: none;
  border-right: 1px solid #CCC;
  text-align: right;
  padding-right: 1em;
}
table.simple td.droite{
  border: none;
  text-align: left;
  padding-left: 1em;
}

table.bleu td{
  background-color: #395573;
  color: #FFF;
  border: none;
  text-align: left;
}
table.bleu td a{
  color: #FFF;
}

table.links td{
  background-color: #EEE;
  color: #000;
  border: 2px solid #FFF;
  text-align: left;
  padding: 4px 2px;
}
table.links td a{
  color: #000;
}
table.links tr.pair td{
  background-color: #DDD;
}

ul li{
  list-style-type: square;
}

.needed_option{
  color: red;
  font-weight: bold;
}

.cadre_rouge{
  border: 3px double red;
  padding: 0.5em;
}

/* ---------------------------------------- CONTENEUR PRINCIPAL ---------------------------------------- */
#page{
  text-align: justify;
  width: 980px;
  margin: auto;
}

/* ---------------------------------------- EN-TÊTE ---------------------------------------- */
#header{
  background-image: url('img/system/header2.png');
  background-repeat: no-repeat;
  height: 150px;
  width: 100%;
  margin: 0 0 -52px !important;
  margin: 0 0 -20px;
  padding-top: 2em;
}
#header #header_menu{
  font-size: 0.7em;
  float: right;
  margin: 0.4em 0.4em 0 0;
  text-align: right;
}
#header #warning_JS{
  border: 1px solid red;
  color: red;
  background-color: #FDD;
  padding: 1px;
  font-size: 0.8em;
  text-align: justify;
  margin-top: 4px;
}

/* ---------------------------------------- SECTION SOUS L'EN-TÊTE ---------------------------------------- */
#main{
  width: 99% !important;
  width: 100%;
  background-color: #FFF;
  padding: 0.5em 0.5%;
  margin-top: -1px;
}

/* ---------------------------------------- ONGLETS DU HAUT ---------------------------------------- */
#menutop{
  padding: 0 0 0 15%;
}
#menutop ul {
  padding: 0;
  margin: 0;
}

#menutop li {
    padding: 0;
    display: inline;
    font-size: 0.7em;
}

#menutop li a:link, #menutop li a:visited {
    display: block;
    float: left;
    height: 18px;
    width: 90px;
    line-height: 18px;
    text-decoration: none;
    text-align: center;
    background:#fff url('img/system/onglet.png');
    padding: 0;

}

#menutop li a:hover {
   background:#fff url('img/system/onglet_moyen.png');
}

#menutop li a#thispage {
   background:#fff url('img/system/onglet_clair.png');
}

/* ---------------------------------------- COLONNE GAUCHE ---------------------------------------- */
#left{
  font-size: 0.75em;
  float: left;
  width: 15%;
}
#left ul{
  margin-top: 0;
  margin-bottom: 0;
}
#left ul li{
	list-style-type: none;
  margin: 2px 2px 2px -3.2em;
}

#left a {
  width: 98%; 
  height: 18px;
  display: block;
  text-decoration: none;
  background-color: #EEE;
  border: 1px outset #CCC;
}
	 
#left a:hover {
  /* background: #395573;
  color: #EEE; */
  border: 1px inset #CCC;
}

/* ---------------------------------------- COLONNE CENTRALE ---------------------------------------- */
#center{
  font-size: 0.8em;
  float: left;
  padding: 0 2%;
  width: 66% !important;
  width: 70%;
  background-color: #FFF;
  font-size: 0.9em;
  border-right: 1px solid #999;
}

#center #where{
  float: left;
  font-size: 0.7em;
}
#center #where a{
  text-decoration: underline;
}
#center #where a:hover{
  text-decoration: none;
}
#center #cmd{
float: right;
margin-right: -10px;
}

#center h2{
  text-align: center;
}

#center .small_logo_left{
  float: left;
  width: 20%;
  text-align: left;
  margin: 1.5em 0 1.5em;
}
#center .titre{
  float: left;
  width: 60%;
  text-align: center;
  height: 49px;
  margin: 1.5em 0 1.5em;
}
#center .titre h2{
	margin: 0;
	padding-top: 0.7em;
	font-size: 1.4em;
}
#center .with_bg{
  background-image: url('img/system/banner.png');
  background-repeat: no-repeat;
  background-position: center;
}
#center .small_logo_right{
  float: right;
  width: 20%;
  text-align: right;
  margin: 1.5em 0 1.5em;
}

#center #content{
  height: 500px;
  overflow: auto;
  margin-right: -1.4em !important;
  margin-right: -1.0em;
  padding-right: 1em;
  font-size: 0.8em;
}
#center #content .text{
  float: left;
  width: 78%;
}

#center #content .illustrations{
  float: right;
  width: 20%;
}
#center #content .illustrations img{
  width: 100%;
  padding: 0.5em 0 0.5em;
}

#center #content h3{
  position: relative;
  font-size: 1.2em;
  margin: 2em 0 1em !important;
  margin: 1em 0 1em;
  border-bottom: 1px solid #999;
  border-left: 1px solid #999;
  padding-left: 0.4em;
  color: #395573;
}

#center #content h3.last{
  border-left: none;
}

#center #content h3 .lien_top a{
  font-size: 0.8em;
  text-decoration: none;
  position: absolute;
  left: 600px;
  background-image: url(img/system/top.png);
  background-repeat: no-repeat;
  background-position: center right;
  padding-right: 10px;
}
#center #content h3 .lien_top_back{
  font-size: 0.8em;
  position: absolute;
  left: 554px;
  background-image: url(img/system/top.png);
  background-repeat: no-repeat;
  background-position: center right;
  padding-right: 10px;
}
#center #content h3 .lien_top_back a{
  text-decoration: none;
}

#center #content h4{
  margin-top: 1em;
}


#right{
  font-size: 0.7em;
  float: left;
  width: 13%;
  background-color: #FFF;
  margin-left: 1%;
}
#right h2{
  font-size: 1.4em;
  margin: 1.2em 0 0.5em 0;
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
}
#right p{
  text-align: justify;
  padding-bottom: 0.5em;
}

#right #salons{
  height: 255px;
  padding-bottom: auto;
}

#footer{
  text-align: center;
  font-size: 0.7em;
  margin: 1em 0 1em 0;
  color: #EEE;
}
#footer a{
  color: #EEE;
}

hr{
  border: 0;
}

/*
 ------------------------------------------------------------------ Formulaires
*/
/* Classique */
form{
  text-align: left;
}
form textarea{
  width: 300px;
  height: 80px;
}
form input.text_form , form input.password{
  width: 300px;
}
form label{
  display: block;
}