/* les couleurs
  violet: #2B014B
  marron brou: #3F2204
  marron sienne: #967C5C
  vert absinthe: #7FDD4C
  gris perle: #CECECE
  gris: #3c3636
  violet clair : #766277
  orange logo: FAB259
  vert logo: 578020
*/


body{ 
    font-family: "Trebuchet Ms", Arial, Helvetica;
    color: #000000;
    background: #000000 no-repeat top url(images/logo.jpg);
    margin: 0 auto;
    padding:0;
}

/* ############## HEADER ############## */

#header{
    position:relative;
    top:0;
    left:0;
    width:960px;
    margin: 10px auto 0;
    padding:145px 0px 0px 0px;
    font-size:0.7em;
    color: #DDDDDD;
}

/* ############## MENTIONS LEGALES ############## */

#mentions_legales{
    position:relative;
    top:0;
    left:0;
    width:800px;
    margin: 10px auto 0;
    padding:145px 0px 0px 0px;
    font-size:0.7em;
    color: #DDDDDD;
}

/* ############## PAGE ############## */

#page{
    width:940px;
    margin:auto;
    padding: 10px 10px 15px;
    background:#ececec;
    font-size: 12px;
}

/* ############## MENU ############## */

#menu {
    margin: 0 auto;
    padding:0px;
    text-transform:uppercase;
    background:#2c2c2c url(images/menu.jpg) no-repeat;
    /*border:2px solid #ECECEC;*/
    height:36px;
    width:960px;
}

#menu img{
    border : 0 none;
}

#page-bar {
    padding:0px;
    margin:0px;
}

#page-bar ul {
    list-style: none;
}

#page-bar li {
    float:left;
    list-style:none;
    cursor: pointer;
    display:block;
    border-right:1px solid #333;
}

#page-bar li:hover {
    background: #578020;
}


#page-bar a, #page-bar a:visited {
    margin: 0px;
    padding:10px 20px 10px 20px;
    font-weight:bold;
    color: #FAB259;
    display:block;
}

#page-bar a:hover {
    text-decoration:none;
    display:block;
}

#page-bar li {
    float: left;
    margin: 0px;
    padding: 0px;
}
	
#page-bar li li {
    float: left;
    margin: 0px;
    padding: 0px;
    width: 122px;
    text-transform:none;
}
	
#page-bar li li a, #page-bar li li a:link, #page-bar li li a:visited {
    background: #2B2B2B;
    width: 122px;
    float: none;
    margin: 0px;
    padding: 5px 10px 5px 18px;
    border-top: 1px solid #C0C0C0;
 }
	
#page-bar li li a:hover, #page-bar li li a:active {
    background: #666666;
    padding: 5px 10px 5px 18px;
}

#page-bar li ul {
    position: absolute;
    width: 10em;
    left: -999em;
}

#page-bar li:hover ul {
    left: auto;
    display: block;
}
    
#page-bar li:hover ul, #page-bar li.sfhover ul {
    left: auto;
}

/* ############## MENU BAS ############## */

#menu_bas {
    margin: 0 auto;
    padding: 10px 0;
    height: 25px;
    width:955px;
}

#menu_bas img{
    border : 0 none;
}

#barre_bas {
    padding:0px;
    margin:0px;
}

#barre_bas ul {
    list-style: none;
}

#barre_bas li {
    float:left;
    list-style:none;
    cursor: pointer;
    display:block;
}
/*
#barre_bas li:hover {
    background: #fab259;
}
*/

#barre_bas a, #barre_bas a:visited {
    margin: 0px;
    padding:10px 20px 5px 20px;
    /*color: #FAB259;*/
    display:block;
}

#barre_bas a:hover {
    text-decoration:none;
    display:block;
}

#barre_bas li {
    float: left;
    margin: 0px;
    padding: 0px;
}
	
#barre_bas li li {
    float: left;
    margin: 0px;
    padding: 0px;
    width: 122px;
    text-transform:none;
}
	
#barre_bas li li a, #barre_bas li li a:link, #barre_bas li li a:visited {
    width: 122px;
    float: none;
    margin: 0px;
    padding: 5px 10px 5px 18px;
 }
	
#barre_bas li li a:hover, #barre_bas li li a:active {
    padding: 5px 10px 5px 18px;
}

#barre_bas li ul {
    position: absolute;
    width: 10em;
    left: -999em;
}

#barre_bas li:hover ul {
    left: auto;
    display: block;
}
    
#barre_bas li:hover ul, #barre_bas li.sfhover ul {
    left: auto;
}


/* ############## ENCARTS ############## */
#encarts{
    /*on donne une postion relative pour le placement de la div "banniere_petit" en absolu*/
    position: relative;
    margin: 0 0 10px;
    padding: 0;
    /* on déterme un width pour IE 6*/
    width : 940px;
}

/* ############## BANNIERE PETIT ############## */
#banniere_petit{
    /* en absolue pour sortir du flux et se positionner en haut à gauche de son conteneur*/
    position : absolute;
    /* on précise top et left pour IE*/
    top: 0;
    left: 0;
    width: 200px;
    height: 90px;
    background-color: #fab259;
}

#switcher{
    margin: 10px;
}

#download{
    margin: 10px;
}

/* ############## BANNIERE ############## */
#banniere {
    background: #ececec url(images/banniere.jpg) no-repeat scroll 0 0;
    /* pour se positionner à droite de la div "banniere_petit"*/
    margin-left: 210px;
    width: 730px;
    height:90px;
}

#banniere img{
    border: 0 none;
}

/* ############## CONTENEUR ############## */
#conteneur{
    /*pour que la div s'adapte à la largeur de son contenu*/
    overflow: hidden;
}


/* ############## COLONNE GAUCHE ############## */
#col_gauche{
    float:left;
    width: 610px;
}

#col_gauche p{
    text-align: justify;
    margin : 10px;
}


/* ############## COLONNE DROITE ############## */
#col_droite{
    /* pour se positionner à droite de la colonne gauche */
    margin-left: 635px;
}

#col_droite p{
    text-align: left;
}

/*index.php*/
.p_col_index{
    padding : 13px;
    color: #ECECEC;
}

/*realisation.php*/
.p_col_realisations{
    padding : 5px;
    color: #ECECEC;
}

#fin_col_droite{
    margin: 30px auto;
}

#col_droite_part1{
    background : #ececec url(images/fond_colDroite.png) no-repeat;
    width:300px;
    height: 350px;    
}

#partage{
    margin: 10px;
}
/* ############## TITRE ############## */
#titre{
    width : 630px;
    height : 30px;
    background: #2c2c2c url(images/barre_titre.jpg) no-repeat;
}

/* ############## CONTENU ############## */
#contenu{
    background:#ffffff none repeat scroll 0 0;
    border:1px solid #CCCCCC;
    font-size:12px;
    line-height:1.3em;
    margin:0;
    padding: 5px 10px;
    width:608px;
}


#navigateur ul {
    list-style: none;
}

navigateur li{
    display: block;
    list-style: none;
}
#navigateur img{
    border : 0 none;
    width : 25px;
    height: 25px;
    margin : 2px;
}

#liens {
    margin: 0 0 0 10px;
}


#liens li {
    cursor: pointer;
    list-style-image: url(images/flecheD_orange.png);
    padding : 0px;
    margin : 0px;
}

#liens li:hover {
    background: #567F21;
}


#liens a, #liens a:visited {
    margin: 0px;
    padding: 5px;
    font-weight:bold;
    color: #ffffff;
    display:block;
}


#liens a:hover {
    text-decoration:none;
    display:block;
}

#liens li li a, #liens li li a:link, #liens li li a:visited {
	background: #2B2B2B;
	width: 122px;
	float: none;
	margin: 0px;
	padding: 5px ;
	border-top: 1px solid #C0C0C0;
	}
	
#liens li li a:hover, #liens li li a:active {
	background: #666666;
	padding: 5px ;
	}
	
/* ############## UL page GRAPHISME ############## */	

#liens_graphisme li {
    list-style-image: url(images/flecheD_verte.png);
}

/* ############## UL page SITE INTERNET ############## */	

#liens_siteInternet li {
    list-style-image: url(images/flecheD_verte.png);
}

#liens_siteInternet1 a {
    color : #ECECEC;
}

#liens_siteInternet1 li {
    list-style-image: url(images/flecheD_orange.png);
}

/* ############## UL page REALISATIONS ############## */	

#liens_realisations li {
    list-style-image: url(images/flecheD_orange.png);
}

/* ############## UL page CHARTE ############## */	

#bleues li {
    list-style-image: url(images/flecheD_bleue.png);
}

#vertes li {
    list-style-image: url(images/flecheD_verte.png);
}

#oranges li {
    list-style-image: url(images/flecheD_orange.png);
}

/* ############## UL THEMES ############## */
#themes {
    margin: 30px 0 0 220px;
}

#themes li {
    list-style-image: url(images/flecheD_bleue.png);
}


/* ############## FOOTER ############## */

#footer{
    background:#000000 url(images/logo_bas.jpg) no-repeat scroll center bottom;
    font-size: 0.7em;
    height:310px;
    margin:auto;
}

#footer a{
    color: #7FDD4C;
}

#details_footer{
    position:relative;
    color: #fab259;
    background: #2c2c2c url(images/menu.jpg) no-repeat;
    width: 940px;
    height: 80px;
    border:2px solid #ECECEC;
    padding:0 8px;
}

#centre_footer{
    width : 30%;
}

#gauche_footer{
    position: absolute;
    top: 65%;
    left: -3%;
    width: 30%
}

#droite_footer{
    position: absolute;
    top: 65%;
    right: 1%;
    width: 30%
}

#liensDroits_footer li{
    display: inline;
    margin: 2px;
}

#liensDroits_footer{
    text-align: right;
}

#liensGauches_footer li{
    display: inline;
    margin: 2px;
}

#liensGauches_footer{
    text-align: left;
}




/* ############## GALERIE DIAPORAMA ############## */
#diaporama{
    margin-left: 5px;
}

/* ############## GENERAL ############## */

a{
    color : #578020;
    text-decoration: underline;
}

h1{
    margin-left: 115px;
    padding: 5px;
    color:  #fab259;
    font-size: 14px;
}

h2{
    font-size : 13px;
    color : #578020;
    text-decoration: underline;
}

h4{
    padding: 5px 10px 0 10px;
    margin : 0;
    font-size : 12px;
}

h5{
    margin: 10px;
    text-decoration: underline
}

blockquote{    
    margin: 10px 40px 10px 40px;
    color: #578020;
    font-size: 12px;
}

label{
    margin : 5px;
}

td{
    padding : 5px;
    /*alignement du contenu de la cellule*/
    vertical-align: middle;
}

input:focus, textarea:focus
/* Quand le curseur est sur un champ (ne marche pas sur IE) */
{
   background-color: #fab259;
}

img{
    border: 0 none;
}

.vert{
    color: #578020;
    font-weight: bolder;
}

.orange{
    color: #FAB259;
    font-weight: bolder;
}

.black{
    color: #000000;
}

.grey{
    color: #ECECEC;
}

.succes{
    color: #FAB259;
    font-weight: bolder;
}

.erreur{
    color: red;
    font-weight: bolder;
}

.float_left{
    float: left;
}

.float_right{
    float: right;
}

.fin_float{
    clear:both;
}