/******************/
/*Elements de base*/
/******************/
html, body, div, span, img, ul, li, h1, h2, h3, a, table, td, th, tr{
	margin: 0;
	padding: 0;
	border: none;
	font-weight: normal;
  font-family:   arial, helvetica, sans-serif;
  text-decoration: none;
}

body{
  background: url(../images/layout/background.jpg) top left repeat-y;
}

a{
  color: #464748;
}

a:hover{
  color:white;
}

ul{
  list-style-type: none;
}

/****************/
/*Elements a ID */
/****************/
#page{
  width: 760px;
  margin: 15px auto;
}

div#menu{
  position: absolute;
  left: 0;
  margin: 0;
  padding: 5px 10px;
  color: #ccc;
  float: left;
  width: 160px;
  text-transform: uppercase;
}

div#menu img{
  margin-left: 10px;
  margin-bottom: 5px;
}

div#menu ul{
  margin-left: 10px;
}

div#menu ul a{
  color: #696969;
  font-weight: bold;
}

div#menu ul.categorie a{
  color: #c4c4c4;
  font-weight: bold;
}

div#menu ul.categorie{
  margin-left: 20px;
  font-size: .8em;
}

div#menu ul ul.categorie{
  margin-left: 10px;
  margin-bottom: 0px;
  font-size: .8em;
}

div#menu ul.categorie li, div#menu ul ul.categorie li{
  padding: .1em 0;
}

div#menu ul ul.categorie a{
  color:#969696;
}

div#menu ul.categorie a.unselectedProject{
  color:#464748;
}

div#menu ul ul.categorie a.dark{
  color: #333;
}

div#menu a.courant, div#menu ul.categorie a.courant, 
div#menu ul ul.categorie a.courant, 
div#menu ul a:hover, 
div#menu ul ul a:hover, 
div#menu ul ul.categorie a.dark:hover, 
div#menu ul.categorie a.unselectedProject:hover{
  color: white;
}

div#menu h1{
    margin: 50px 0 10px 0;
    font-size: 1.4em;
    padding-left: 10px;
    color :white;
    font-weight: bold;
}

/**********************************/
/* Corps et contexte de formatage */
/**********************************/
div#formatContext{
  margin-left: 235px;
}

div#corps{
  width: 500px;
  margin-top: 5px;
}

div.image_contener{
  margin-bottom:5px;
}

div#imageManipulation{
  border-bottom: #ccc 1px solid;
  padding: 5px;
  height: 520px;
  width: 500px;
  display: table-cell;
  vertical-align: middle;   
  text-align: center;
}

div#corps div#navImages +h1{
  margin-top: 1em;
  clear: both;
}

div#corps div#imageManipulation img{
  width: 480px;
  max-height: 500px;
}

div#corps h1{
  margin-bottom: 20px;
}

div#corps p{
  text-align: justify;
  font-size: smaller;
  margin: .5em 0;
}

div#corps a{
  font-size: smaller;
  font-weight: bold;
  color: #666;
}

div#corps a:visited{
    color: #666;
}

div#corps a:hover{
  color: #c2f63b;
}

div#corps p.description{
  margin-top: 1em;
  font-size: .9em;
}

div#corps p.description img{
  margin-left: 200px;
}

div#corps a.mail{
  font-size: 1em;
}

/*************************/
/*Elements de navigation */
/*inter-images et        */
/* legendes              */
/*************************/
div#legend{
  float: left;
  width: 40%;
}

div#legend p{
  font-style: italic;
  margin: 0;
  padding: 0;
}

div#navImages{
  float: right;
  width: 40%;
  text-align: right;
}

div#corps a.navLink, div#corps small.passive{
  padding: 1px 3px;
}

div#corps a.toProjets{
  padding: 0px 5px;
  line-height: 20px;
  text-decoration: none;
}

div#corps a.navLink, div#corps small.passive, div#corps a.navLink:visited{
  color: white;
  background-color: black;
  border: 1px solid white;
}

div#corps a.toProjets, div#corps a.toProjets:visited, div#corps a.navLink:hover{
  background-color: white;
  border: 1px solid black;
  color: black;
}

div#corps a.toProjets:hover{
  color: white;
  background-color: black;
  border: 1px solid black;
}

div#corps a.passive, div#corps a.passive:visited, div#corps small.passive{
  background-color: #696969;
}

div#corps a.passive:hover{
  background-color: #696969;
  border: 1px white solid;
  color: white;
}

div#corps a#masqInfo{
  font-size: 1em;
  color: #5d8015;
}

div#corps a#masqInfo:hover{
  color: #c2f63b;
}

div#infoSup ul{
  font-size: .8em;
}


/*************************/
/*logo gris */
/*************************/
div#corps img#logoGris{
  border: none;
  width: 345px;
}


/*************************/
/*liste projets */
/*************************/
div#liste h2{
  border-top: 1px solid #ccc;
  margin-top: 1.2em;
  padding-top: .2em;
  margin-bottom: .2em;
}

div#liste li{
  margin: .4em 0 .4em 2em;
}

div#liste a{
  /*color: white;*/
  font-size: 1em;
}

div#liste a:hover{
  color: black;
}

div#liste + a, div#corps form + a{
  display: block;
  margin-top: 3em;
  padding: .4em 0 .5em 2em;
  border-top: 1px solid #ccc;
  color: #5d8015;
  font-weight: normal;
}

div#liste + a:visited, div#corps form + a:visited{
  color: #5d8015;
}

div#liste + a:hover, div#corps form + a:hover{
  color: black;
}


/*************************/
/* liste utilisateurs    */
/*************************/
#liste #eric {
	background: url(../images/users/eric.jpg) right 5px no-repeat;
}


/*************************/
/*      formulaires      */
/*************************/
div#corps form{
  border: 1px solid #ccc;
  margin: 1em auto;
  padding: 10px;
  width: 340px;
  line-height: 1.2em;
}

div#corps form p{
  margin-top: 0;
}

div#corps form input[type=text]{
  width: 210px;
}

div#corps form textarea{
  width: 310px;
  height: 160px;
}

div#corps form strong{
  color: red;
}

div#corps a.aboveForm{
  display: block;
  margin-left: 70px; 
  padding:5px 0 5px 30px;
  background: url(../images/layout/changeImage.png) center left no-repeat;
}

div#corps h1.formSubTitle{
  margin: .4em auto;
  width: 400px;
  padding: 0;
  text-align: center;
}

div#corps h2.formSubTitle{
  width: 340px;
  margin: .8em auto .4em auto;
  font-size: 1.4em;
}

div#corps h2.formSubTitle + ul{
  width: 340px;
  margin: 0 auto;
}

div#corps p.buttons strong{
  color: red;
}

div#corps p.buttons em{
  display: block;
  text-align: center;
  margin-top: 1em;
}

div.buttons, div#corps p.buttons{
  text-align: right;
  margin-right: 30px;
  margin-bottom: 0;
}

div#facultatif p, div#bureauEtudes p{
  text-align: right;
}

div#facultatif p.comment{
  text-align: left;
  margin-top: 1em;
}

div#obligatoire label[for=annee]{
  margin-left: 20px;
}


/*************************/
/*Admin */
/*************************/
div#admin{
  margin: 60px 10px 0 10px;
}

div#admin a, div#admin a:visited{
  color: #ccc;
  font-size: 1.6em;
  font-weight: bold;
  text-align: right;
  border: 1px white;
}

div#admin a:hover{
    color: #ccc;
}

div#admin a#telechargement{
  font-size: .9em;
}

div#message{
  font-size: .6em;
  background-color: #ccc;
  padding: .5em;
  width: 340px;
  margin: 0 auto;
}

div#message p{
  color: #333;
  padding: 3px ;
  font-size: 1.6em;
  font-style: normal;
  border-bottom: 1px white solid;
}

div#message em{
  font-weight: bold;
}

em.error{
  font-style: normal;
  color: red;
}

em.success{
  font-style: normal;
  color: green;
}

div#corps a.adminForm{
  display: block;
  width: 340px;
  margin: 1em auto;
}

/*************************/
/*Ajout Images           */
/*************************/
div#corps p.infosProjet{
  font-size: .8em;
  width: 340px;
  text-align: justify;
  margin: 0 auto;
}

div#corps ul.infosProjet li{
  font-size: .8em;
}

div#corps input[name=legende]{
  margin-left: 30px;
}

div#corps input[name=nomFichier]{
  width: 310px;
}

/*************************/
/*Ajout Actualites       */
/*************************/
div#corps p.aligneSurLaGauche{
  text-align: left;
  margin: 1.5em 0;
}

div.legend{
  margin: 0 auto;
  width: 290px;
}

div.legend p{
  font-style: italic;
}

div.image_actu{
  padding: 1px;
  margin: 0 auto;
  text-align: center;
}

div.image_actu img{
  max-height: 300px;
  max-width:290px ;  
}

div.actualite{
  margin-bottom: 3em;
  border-bottom: #ccc 1px solid;
}

div.actualite h2{
  margin-bottom: .6em;
}