/* MISE EN PAGE GÉNÉRALE  */ 
html {color:black; background-color:#fff;}
/*a:link {color:#191970; background-color:#ffe4c4;}*/
/*a:visited {color:#c71585; background-color:#fff6a1;}*/
/*#exhover:hover {color:#ad4430;background-color:#00cccc;}*/


body {color:black;
    width:95%; 
    background-color:#fff; 
    margin: -15px 5px 5px 5px;
    padding: 2%;
/*    font-family:Verdana, Arial, Helvetica, sans-serif;*/
}
#leftMenu>ul>li>a.menu>img {
border:none;
}

#haut {
    background-color:#5a5d52;   
    background-image: url(../images/encadrement/essai.gif);
    background-position: right;
    float:right;
    width:900px;
    height:50px;    
    background-repeat:no-repeat;
    padding: 20%;
    margin-top:0px;
    margin-left:50px;
    margin-right:15px;
    text-align: left;   
    font-size: 3em;
    color: white;
}
#pied { 
    text-align: center;
    font-size: 0.7em;
}
#partiegauche { 
    width:  95%;
    float: left;
}
#leftMenu { 
    float:left;
   /*min-height: 400px;*/
    width: 18%;
    font-family:arial, sans-serif;
    font-size: 18px;
    margin-top:0px;
}
#leftMenu ul{ 
    list-style-type:none;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
 }



body, #haut, #pied, #partiegauche, #leftMenu {
    padding:2%;
}

#pied, #partiegauche {
    margin: 5px;
}

#content { 
    width: 75%;
    float: right;
    text-align:justify;
    padding:1%;
}
.clearer { 
    height: 0px;
    clear: both; 
}

/* STYLES DES MENUS ET LIENS */ 

/* STYLES POUR LA PAGE D'ACCUEIL et ECOLE*/ 
#blocaccueil {
     float: left;
     width:70%;
     padding:1%;
     margin:2px;
}
.blocgauche,.blocdroit {
     float:left;
     padding:1%;
     width:25%;
     margin:2px;
     font-family:times, sans-serif;
     text-align:left;
     font-size:1em;
     line-height:18px;
}
#bas {
     float:left;
     padding:1%;
     margin:2px;
     width:90%;
     line-height:18px;
     font-family:times, sans-serif;
     font-size:1em;
}
#cotedroit { 
    float: right;
    padding: 10px;
    height: 400px;
    w\idth: 21%;
    font-family:"Times New Roman", times, sans-serif;
    font-size: 1.5em;
    background-image: url(../images/grandes/eglise4.jpg);

}
#cotedroitecole { 
    margin-right:5px;
    float: right;
    padding: 2%;
    w\idth: 38%;
    border:solid 1px;
    font-size:0.8em;
}
#cotedroitecole>h3 {
    color:#25828a;
    background-color:white;
}
span.rouge {
    color:red;
    background-color:white;
}

/* STYLES POUR LA PAGE AUTOCAR */


#journal img {
    cursor: pointer;
    width: 100px;
    float:left;
    padding:0.5em;
    border-color : white;    
}

#autocar>div>h2 {
    text-align:center;
}
#autocar>div>div>h3 {
    font-size:0.8em;
}

#autocar {
    text-align:left; 
    width:50%;
    height:320px;
    padding:2px;
    margin:2px;
} 

#autocar>div {
    border: 1px solid black;
    text-align:left; 
    width:35%;
    height:80%;
    margin:20px;
} 
#autocar>div>div {
    width:35%;
    height:60%;
    margin:2px;
} 
#autocar>div>div, #autocar>div{
    color:#696969;
    float:left;
    padding:0.9em;
    font-family:times, sans-serif;
    background-color:#ffe4c4;
    
}
/* STYLES POUR LA PAGE HISTOIRE*/ 
#blochistoire {
    padding:2em;
}

/* STYLES POUR LE FORMULAIRE */ 
#blocgaucheformulaire, #blocdroitformulaire{
    float:left;
    width:40%;
}
#blocgaucheformulaire {
    text-align:right;
    padding:0.8em;
    line-height:22px;
}
#blocdroitformulaire{
    padding:0.5em;
}
#valid{
    text-align:center;
}
input.bouton {
border:2px outset red;
font-weight:bold;
cursor:pointer;
}
input.bouton:hover {
background-color:white;
color:red;
}
input.bouton:active {
border:2px inset #d05858;
background-color:#a72e52;
color:white;
} 

/* STYLES POUR LES PHOTOS */

#container {
    color:black;
    background-color:white;
    position:relative;
    float:left;
    width:90%;
    padding:0.5em;
    margin:2px auto 0 auto;
    background:url(../images/grandes/eglise2.jpg) no-repeat 8em;
}
#container ul {width:198px; height:386px; padding:0; margin:1px; list-style-type:none; float:right;background-color:white;color:black;}

#container li {float:left;}
#container a.gallery {
    display:block;
    color:#fbfafe;
    background-color:#e2f7e4;
    text-decoration:none; 
    border:1px solid #000;
    margin:1px 2px 1px 2px; 
    text-align:center; 
    cursor:pointer;
}
#container a.gallery:visited {
    display:block;
    color:#fbfafe;
    background-color:#e2f7e4;
    text-decoration:none; 
    border:1px solid #000;
    margin:1px 2px 1px 2px; 
    text-align:center; 
    cursor:pointer;
}

#container a.slidea {background:url(../images/vignettes/clocher.jpg)no-repeat; height:93px; width:60px;}
#container a.slideb {background:url(../images/vignettes/eglise3.jpg)no-repeat; height:93px; width:60px;}
#container a.slidec {background:url(../images/vignettes/eglise4.jpg)no-repeat; height:93px; width:60px;}
#container a.slided {background:url(../images/vignettes/eglise1.jpg)no-repeat; height:60px; width:93px;}
#container a.slidee {background:url(../images/vignettes/ver8.jpg)no-repeat; height:60px; width:93px;}
#container a.slidef {background:url(../images/vignettes/ver5.jpg)no-repeat; height:60px; width:93px;}
#container a.slideg {background:url(../images/vignettes/village.jpg)no-repeat; height:60px; width:93px;}
#container a.slideh {background:url(../images/vignettes/ver1.jpg)no-repeat; height:93px; width:60px;}
#container a.slidei {background:url(../images/vignettes/puit.jpg)no-repeat; height:93px; width:60px;}
#container a.slidej {background:url(../images/vignettes/ver6.jpg)no-repeat; height:93px; width:60px;}
#container a.slidek {background:url(../images/vignettes/ver3.jpg)no-repeat; height:60px; width:93px;}
#container a.slidel {background:url(../images/vignettes/ver4.jpg)no-repeat; height:60px; width:93px;}

/*la vignette qui se trouve sur le passage de la souris*/
#container a.gallery:hover {border:1px solid #fff;}

a.slidea>span>img {border:none;}
a.slideb>span>img {border:none;}
a.slidec>span>img {border:none;}
a.slided>span>img {border:none;}
a.slidee>span>img {border:none;}
a.slidef>span>img {border:none;}
a.slideg>span>img {border:none;}
a.slideh>span>img {border:none;}
a.slidei>span>img {border:none;}
a.slidej>span>img {border:none;}
a.slidek>span>img {border:none;}
a.slidel>span>img {border:none;}


/*ce qui contient l'image qui s'affiche au survole des miniatures*/
#container a.gallery span {
     position:absolute;
     width:1px; 
     height:1px; 
     top:5px;   
     left:5px; 
     color:red;
     background-color:white;
     overflow:hidden;}

#container a.gallery:hover span {
    position:absolute;
    width:372px;
    height:372px;
    padding:1em;
    margin: 5px;
    color:#000;
    background-color:white;
    font-family:georgia, sans-serif;  
    font-size:1em;
}

#container a.gallery img {
    width : 100%;
    padding:0.5em;
}


/* STYLES POUR LE JOURNAL */ 

#journal img {
  cursor: pointer;
    width: 12%;
    float:left;
    padding:1%;
    border-color : white;    
}

#zoom {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 800px;
  min-height: 800px;
  background-color: black;
  color: white;
  padding: 2%;
  font-family: arial, helvetica, sans-serif;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  margin: auto;
  visibility: hidden;
}
#zoom>img {
    cursor: pointer;
    width: 60%;
    padding:5%;
    border-color : white;    
}
/* = = = = = = = = = = = = = =
   Formulaires
   = = = = = = = = = = = = = = */
.erreur {
  color:red;
  height:10px;
/*  font-size: small;*/
}
.champ {
  clear: both;
  padding: 3px;
}

.texte {
  float: left;
  width: 30%;
  text-align: right;
  font-size: 0.8em;
}


input, textarea { 
  padding: 2px;
 }

input[type="hidden"] { 
  padding: 0px;
 }

form div { 
  clear: both;
  padding: 3px;
}

form div > span { 
  float: right;
  width: 80%;
  text-align: right;
}
form div span+span { 
  float: left;
  width: 65%;
  text-align: left;
  padding-left: 2px;
}

input[type="text"], textarea { 
  width: 70%;
}



/* les span des erreurs de formulaire */
form >span { 
}