/*********************************************/
/* PHYDRO S.A.S. - Feuille de style CSS2     */
/* Copyright PHYDRO S.A.S. - Fabien Crespel  */
/* Version MEDIA=SCREEN                      */
/*********************************************/


/*******************************************************/
/* Arriere-plan du site, conteneur de la page centrale */
/*******************************************************/

html, body {
	border: none;
	height: 100%; /* HTML et BODY etendus a tout l'espace visible */
	margin: 0;
	padding: 0;
}
body {
	background-color: #234775;
	background-image: url(style/bg_site.gif);
	background-position: center;
	background-repeat: repeat-y;
	color: #FFFFFF;
	text-align: center; /* Centrage non conforme (pour IE rendu Quirk) */
}

#mainContainer {
	background-color: #FFFFFF;
	color: #000000;
	margin: 0 auto; /* Centrage conforme aux standards */
	height: 100%;
	padding: 0;
	position: relative;
	text-align: left; /* Retablissement de l'alignement apres le centrage non conforme dans Body */
	width: 780px;
}


/****************************/
/* En-tete avec logo PHYDRO */
/****************************/

#header {
	background-color: #5779B5;
	background-image: url(style/bg_header.jpg);
	background-repeat: no-repeat;
	color: #FFFFFF;
	height: 170px;
	margin: 0;
}
/* Texte de remplacement pour les navigateurs sans CSS */
#header h1 {
	display: none;
}
/* Conteneur flash */
#headerflash {
	display: block;
}

/*****************/
/* Barre de menu */
/*****************/
#bar {
	background-image: url(style/bg_barre.gif);
	background-repeat: repeat-x;
	height: 30px;
	margin: 0;
	position: relative;
}
#imgbarre {
	background-image: url(style/img_barre.gif);
	background-repeat: no-repeat;
	height: 30px;
	left: 0;
	position: absolute;
	top: 0;
	width: 334px;
}
/* Texte de remplacement pour les navigateurs sans CSS */
#bar h2 {
	display: none;
}

/* Menu deroulant */
#menu {
	height: 30px;
	left: 334px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 170px;
	width: 446px;
	z-index: 100; /* Rester au dessus des autres DIV (notamment #content) */
}
/* Elements du menu (premier niveau uniquement) */
#menu .menuItem {
	float: left;
	height: 30px;
	position: relative;
}
#menu .menuItem:hover > ul { /* Activation des sous-menus (ne marche pas sous IE<7 sans le patch JavaScript) */
	display: block;
}
#menu .menuLink { /* Liens du menu (premier niveau) */
	display: block;
	height: 100%;
	overflow: hidden;
	text-indent: -9000px; /* Cacher le texte (pour navigateurs sans CSS), on utilise des images d'arriere-plan */
}
/* Bouton Qui sommes-nous */
#menu #item1 {
	background-image: url(style/menu_aboutus.gif);
	width: 135px;
}
#menu #item1:hover {
	background-image: url(style/menu_aboutus_hover.gif);
}
/* Bouton Nos metiers */
#menu #item2 {
	background-image: url(style/menu_metiers.gif);
	width: 91px;
}
#menu #item2:hover {
	background-image: url(style/menu_metiers_hover.gif);
}
/* Bouton News */
#menu #item3 {
	background-image: url(style/menu_news.gif);
	width: 48px;
}
#menu #item3:hover {
	background-image: url(style/menu_news_hover.gif);
}
/* Bouton Contacts */
#menu #item4 {
	background-image: url(style/menu_contacts.gif);
	width: 71px;
}
#menu #item4:hover {
	background-image: url(style/menu_contacts_hover.gif);
}
/* Bouton Recrutement */
#menu #item5 {
	background-image: url(style/menu_recrutement.gif);
	width: 101px;
}
#menu #item5:hover {
	background-image: url(style/menu_recrutement_hover.gif);
}
/* Sous-menus (second niveau) */
#menu .sousMenu {
	background-color: #C9CDD5;
	background-image: url(style/bg_sousmenu.gif);
	background-repeat: repeat-x;
	border-bottom: 1px solid #8C8F95;
	border-left: 1px solid #8C8F95;
	border-right: 1px solid #8C8F95;
	display: none;
	left: 0;
	list-style-type: none;
	margin: 0;
	padding: 2px;
	position: absolute;
	top: 100%;
	width: 150px;
}
#menu #dernierMenu {
	left: auto;
	right: 0;
}
#menu .sousMenu li { /* Elements des sous-menus (second niveau) */
	margin: 0;
	padding: 1px;
}
#menu .sousMenu li:hover { /* Survol des elements du menu (second niveau) */
	background-color: #D0D7E6;
	border: 1px solid #7E8695;
	padding: 0;
}
#menu .sousMenu li a { /* Liens du menu (second niveau) */
	color: #000000;
	display: block;
	padding: 2px;
	text-decoration: none;
}


/**********************/
/* Contenu de la page */
/**********************/

#content {
	background-color: #FFFFFF;
	background-image: url(style/bg_page.gif);
	background-repeat: repeat-x;
	color: #000000;
	position: relative;
}
#imgpage {
	background-image: url(style/img_page.gif);
	background-repeat: no-repeat;
	height: 78px;
	left: -81px;
	position: absolute;
	top: 0;
	width: 273px;
}
#content a {
	color: #31558F;
}
#content a:hover {
	color: #0000FF;
}
.prop {
	height: 200px; /* hauteur minimum du contenu */
	float: right;
	width: 1px;
}
/* Titre de la page */
#titre {
	height: 120px;
	margin: 0 0 20px 20px; /* IE fait des trucs bizarres si on utilise une forme abregee ici ?! */
	position: relative;
	width: 740px;
}
#titre h2 {
	bottom: 10px;
	color: #31558F;
	font-size: 20pt;
	margin: 0;
	padding: 0 40px;
	position: absolute;
}
#titre .soustitre {
	color: #7992B4;
	font-style: italic;
}
#titre #fond_gauche {
	background-image: url(style/bg_titre_gauche.gif);
	background-repeat: no-repeat;
	bottom: 0;
	height: 15px;
	left: 0;
	position: absolute;
	width: 50px;
}
#titre #fond_milieu {
	background-image: url(style/bg_titre_milieu.gif);
	background-repeat: repeat-x;
	bottom: 0;
	height: 15px;
	left: 50px;
	position: absolute;
	width: 640px;
}
#titre #fond_droite {
	background-image: url(style/bg_titre_droite.gif);
	background-repeat: no-repeat;
	bottom: 0;
	height: 15px;
	position: absolute;
	right: 0;
	width: 50px;
}
/* Section Voir aussi (sous-categories) */
#voiraussi {
	margin-left: 60px;
}
/* Texte de la page */
#texte {
	margin: 30px 40px 0 40px;
	text-align: justify;
}
#texte h3 {
	background-image: url(style/puce.gif);
	background-repeat: no-repeat;
	background-position: center left;
	border-bottom: 1px dotted #888888;
	color: #31558F;
	font-size: 12pt;
	font-style: italic;
	font-weight: bold;
	margin: 30px 0 10px 0;
	padding-left: 20px;
}
#texte .soustitre {
	color: #7992B4;
	font-style: normal;
}
#texte p {
	margin: 0 0 10px 0;
	padding: 0;
	text-indent: 20px;
}
#texte .retrait {
	margin-bottom: 20px;
	margin-left: 40px;
}
#texte .retrait p {
	text-indent: 0;
}
#texte ul {
	margin: 0 0 10px 35px;
	padding: 0;
}
#texte li {
	margin-bottom: 5px;
}
#texte address {
	margin: 0 0 20px 40px;
}
#texte .imgContainer {
	margin: 20px 0 20px 0;
}
#texte .imgContainer img {
	margin-left: 20px;
	margin-right: 20px;
}
#texte .imgContainerGauche {
	margin-right: 20px;
	width: 200px;
}
#texte .imgContainerGauche img {
	margin-top: 7px;
	margin-bottom: 7px;
}
#texte .imgContainerDroite {
	margin-left: 20px;
	width: 200px;
}
#texte .imgContainerDroite img {
	margin-top: 7px;
	margin-bottom: 7px;
}
/* Formulaires */
form {
	margin: 0 20px;
	padding: 0;
}
form fieldset {
	border: none;
	border-top: 1px solid #CCCCCC;
	margin: 20px 0;
	padding: 5px 20px;
}
form legend {
	font-style: italic;
	font-weight: bold;
	margin: 0;
	padding: 0 5px;
}
.ligneForm {
	margin: 5px 5px 5px 155px; /* Laisser de la place pour les labels */
	padding: 2px;
	position: relative;
}
label.titre {
	display: block;
	left: -155px; /* Placer les labels - seule methode qui marche avec tous les navigateurs actuels */
	margin: 2px;
	padding: 0;
	position: absolute;
	text-align: right;
	top: 2px;
	width: 150px;
}
input[type=button], input[type=file], input[type=password], input[type=reset], input[type=text], textarea, select {
	border: 1px solid #999999;
}
input[type=submit] {
	background-color: #CCCCCC;
	border: 1px solid #999999;
	color: #000000;
}

/* Bandeau menu et copyright */
#bandeau {
	background-color: #DBE6F4;
	background-image: url(style/bg_bandeau.gif);
	background-repeat: repeat-x;
	border-bottom: 1px solid #7992B4;
	border-top: 1px solid #7992B4;
	font-size: 8pt;
	height: 48px;
	margin-top: 40px;
	text-align: center;
}
#bandeau p {
	margin: 7px;
}