/* Général */
html {
font-size: 100%; 
}
body {
background: #f5f5f5;
color: #F0E39E;
font: .8em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;	
line-height: 1.25; 
margin: 0;
padding: 20px 5px;
}
a {
color: #FF6533;
}
a:hover, a:focus {
color: #000;
}
/* Page */
#global {
width: 900px;
background: #fff;
border-left: 1px outset #e6e6e6;
margin-left: auto;
margin-right: auto;
-moz-box-shadow: 1px 1px 12px #555;
-webkit-box-shadow: 1px 1px 12px #555;
filter: progid:DXImageTransform.Microsoft.Shadow (color='#aaaaaa', Direction=135, Strength=10); 
zoom: 1; 
}
/* entete */
#entete {
background: url('../../images/ban.gif');
margin-bottom: 20px;
padding: 80px 0;
}
/* Conteneur et bloc central */
#centre {
width: 100%;
overflow: hidden;
margin: -10px 0 0 0;
}
#centre  .img{
margin: 0px 0 0 100px;
}
/* Menu de navigation */
div#menu {
float: left;
width: 180px;
margin: 30px 0 0 4px;
}
div#menu  .img{
float: left;
margin: 10px 0 0 2px;
border: 0px;
}
div#menu a {
color: #000
}
/* fond blanc pour le menu */ 
div#menu ul {
background: #fff;
border: 0px solid; 
width: 180px; 
margin: 0px; 
padding: 0; 
}
/* fond different au survol de la souris pour les sous menu et les "basiques"*/ 
div#menu li:hover {
background: #f5f5f5;
}
div#menu li.sousmenu:hover {
background: #f5f5f5;
}
div#menu li.sousmenu {
background: #fff;
}
div#menu ul li {
position: relative; 
list-style: none; 
border-bottom: 1px solid #d6d6d6;
}
div#menu ul ul {
font: .8em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
position: absolute;
background: #f5f5f5;
border: 1px solid #d6d6d6;
top: -1px; 
left: 180px; 
display: none;
}
/* on rajoute une bordure a gauche et des padding, on doit donc réajuster la taille 100-(8 de bordure + 8 de padding) =84 */ 
div#menu li a {
width: 200px;
display: block;
border-left: 8px solid #0a5751; 
text-decoration: none; 
padding: 4px 0 4px 8px; 
}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2, 
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {
display: block;
}
/* la bordure de chaque hauteur a une couleur de survol */ 
div#menu li a:hover {
border-left-color: #841025;
}
div#menu ul ul li a:hover {
border-left-color: #18C9BB;
}
div#menu ul ul ul li a:hover {
border-left-color: #0000FF;
}
/* Contenu principal */
#principal {
float: left;
width: 480px;	
background: #fffff0;
border: 1px solid #d6d6d6;
color: #000;
margin:  0 0 0 7px;
padding: 10px 20px;
}
#principalsearch{
float: left;
width: 800px;	
background: #fffff0;
border: 1px solid #d6d6d6;
color: #000;
margin:  0 0 0 27px;
padding: 10px 20px;
}
#principal a {
font: bold 1em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
color: #555;
}
#principal a:hover, #principal a:focus {
color: #841025;
}
#principal .top {
font: bold .85em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
color: #555;
margin: 0 0 0 400px;
}
#principal .top:hover, #principal .top:focus {
color: #d6d6d6;
}
#principal strong {
color: #000;
margin: 0px;
}
#principal > :first-child {
margin-top: 10px;
}
#principal p, #principal li {
line-height: 1.35;
}
#principal img {
float: right;
padding: 8px;
}
#principal .imgautres{
float: right;
padding-bottom: 30px;
}
#principal .imagesecu {
float: left;
padding: 2px;
}
#principal .cadre {
background: #f6f6f6;
border: 1px solid #888;
font: bold .8em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
color: #555;
padding: 2px;
}
#principal .plan {
border-bottom: 4px double #888;
margin: 10px 0 30px 0;
padding: 2px;
}
/* Contenu secondaire */
#secondaire {
background: #0a5751;
border: 2px solid #000;
margin-left: 720px;
margin-right: 10px;
padding: 12px 0;
}
#secondaire  p,strong {
color: #555;
text-align: left;
margin: 10px 6px 6px 6px;
}
#secondaire  strong {
margin: 0px;
}
/* secondaire information */
#secondaire  .info {
background: #fff;
border: 2px solid #000;
margin: -8px 2px 10px 2px;
padding: 6px;
}
#secondaire  .tel {
font: bold .85em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
color: #000;
margin:-25px 0 8px 30px;
}
#secondaire  .plan {
margin: -25px 0 10px 30px;
}
#secondaire  .face{
margin: -25px 0 10px 35px;
}
/* secondaire meteomedia */
#secondaire  .meteo {
float: right;
margin: -8px -8px 0 4px;
padding: 6px;
}
#secondaire a {
font: bold .85em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
color: #000;
text-decoration: none;
}
#secondaire a:hover, #secondaire a:focus {
color: #841025;
text-decoration: underline;
}
#secondaire img  {
margin: 2px 0 4px 0px;
}
#secondaire .img  {
background: #fff;
margin: 4px 6px 8px 6px;
padding: 6px;
}
#secondaire .float {
float: right;
margin: 4px;
padding: 0px;
}
/* Contenu menu droite */
#droite {
background: #599011;
border: 2px solid #000;
margin-left: 720px;
margin-right: 10px;
padding: 12px 0;
}
#droite  p {
font: .85em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
color: #fff;
text-align: left;
margin: 10px 10px 20px 10px;
}
/* secondaire zone animation */
#zone {
width: 155px;
height: 278px;
margin: 0 0 10px 4px;
}
/* date */
#date {
position: absolute;
width: 171px;
background: #f6f6f6;
border: 1px solid #555;
border-top: 2px solid #377164;
font: .85em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
color: #000;
text-align: center;
margin: 0px 0 0 5px;
padding: 4px;
}
/* Pied de page */
#pied {
background: #377164;
border-bottom: 8px solid #fff;
margin: 6px;
padding: 0px;
}
#pied  p {
font: .85em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
color: #fff;
text-align: justify;
margin: 10px 10px 10px 10px;
}
#pied  .menubas {
font: .85em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
color: #fff;
text-align: center;
margin: 10px 10px 10px 10px;
padding: 6px;
}
#pied a {
color: #fff;
text-decoration: underline;
padding: 2px;
}
#pied a:hover, #pied a:focus {
color: #fff;
text-decoration: none;
}
/* Mention de copyright */
#copyright {
margin: 20px 0 5px 0;
padding-top: 6px;
}
#copyright a {
color: #fff;
text-decoration: underline;
}
#copyright a:hover, #copyright a:focus {
color: #fff;
text-decoration: none;
}
/* zone page d'erreur */
#pageerreur {
background: #fff;
width: 650px;
height: 330px;
margin: 30px auto;
border: 6px solid #075650;
font-size: 1.2em;
text-align: center;
}
#pageerreur p {
font: bold .85em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
color: #181A12;
text-align: center;
padding: 4px;
}
/* menu information */
#margeinfo {
margin: 10px 0 30px 0px;
}
#margeinfo a {
color: #555;
text-decoration: underline;
padding: 4px;
}
#margeinfo a:hover, #margeinfo a:focus {
color: #904811;
text-decoration: none;
}
/* form youtube */
.formyoutube{
float: right;
border: 2px solid #555;
margin: 0px -15px 0 40px;
padding: 2px;
}
/* barre de recherche google */
.form {
float: right;
margin: 44px 0 0 20px;
padding: 6px;
}
/* formulaire de contact */
.formcontact {
background: #f4f4f4;
border: 1px solid #555;
margin: 20px 10px 20px 10px;
padding: 6px;
}
/* les input en css */
input[type=submit], input[type=reset] {
background: #e6e6e6;
border: 1px outset #000;
font: bold .85em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
padding: 2px;
cursor: pointer;
}
input[type=submit]:hover, input[type=reset]:hover {
background: #fff;
border: 1px outset #000;
}
input[type=submit]:active, input[type=reset]:active {
border: 1px inset #a6bede;
background: #a6bede;
color: #000;
}