/* 
	DEFAULT STYLESHEET
	All pages inherrit from this stylesheet, so anything reusable, 
	site-wide or generic goes here.
*/

/* ------------------------------------------------------------------------
	HTML BODY tag and Page div
------------------------------------------------------------------------ */

body
{
	color:#333;
	margin:0;
  	padding:0;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	background:#d5e1e9;	
}


#container
{
	width:955px;
	margin:0 auto;
	text-align:left;
}

/* ----------------------------
   Globals
---------------------------- */

h1
{
	font-size:1.4em;
	margin:0;
	color:#000;
	padding:0 0 20px 9px;
}

h2
{
	font-size:1.3em;
	margin:0;
	color:#000;
	padding:0 0 15px 9px;
}

h3
{
	font-size:1.1em;
	margin:0;
	color:#000;
	padding:0 0 2px 9px;
}

p
{
	font-size:1em;
	color:#000;
	margin:0;
	padding:0 0 17px 9px;
	line-height:1.4em;
	text-align:justify;
}

input, select
{font-family: Arial, Helvetica, sans-serif;}

.gras
{font-weight:bold;}

.italic
{font-style:italic;}

.souligne
{text-decoration:underline;}

.avertissement
{
	color:#CA0021;
	font-size:1em;
}

.vert
{color:#88d90e;}

/* --------------------------------------------------------------- */
/* ---- Corps ---------------------------------------------------- */

/* --------------------------------------------------------------- */
/* -- entête ----------------------------------------------------- */

#entete
{
	width:955px;
	background:url(images/entete_bg.jpg) no-repeat top left;
}

div#entete
{height:137px;}

html>body div#entete
{
	height:auto;
	min-height:137px;
}

/* --- logo --------------------------------- */

div#logoCompagnie
{
	float:left;
	width:340px;
	margin:37px 0 0 3px;
}

div#logoCompagnie img.logo
{
	display:block;
	margin:0;
}

#logoPrint
{display: none;}

/* --- zone log -------------------------------- */

#zoneLog
{
	width:400px;
	float:right;
	padding:18px 27px 0 0;
}
#zoneLog h1
{
	color:#fff;
	text-align:right;
	font-size:1.1em;
	padding:0 0 3px 0;
}
#zoneLog p
{
	color:#fff;
	text-align:right;
	font-size:1.1em;
	padding:0 0 8px 0;
}

#zoneLog img.bMoncompte
{margin:0 0 10px 0;}

/* --------------------------------------------------------------- */
/* -- menu principal --------------------------------------------- */

#menuPrincipal
{
	width:955px;
	background:url(images/menuprincipal_bg.gif) repeat top left;
	padding:10px 0 8px 0;
}

#menuPrincipal img{display:block;}

#menuPrincipal ul
{
	list-style:none;
	margin:0 0 0 34px;
	padding:0;	
}

#menuPrincipal ul li
{
	float:left;
	font-size:1em;	
	margin:0;
	padding:0;	
}

/* --------------------------------------------------------------- */
/* -- Zone de contenu -------------------------------------------- */

#zoneContenu
{
	width:955px;
	background:#fff;
	padding:25px 0 0 0;
}

.contenu
{padding:0 34px 0 32px;}

/* --- zone de titre principal ----------------------- */

.titre
{
	background:url(images/pixel_bleu.gif) repeat-x 0 16px;
	padding:0 0 20px 0;
}

.bordTop
{
	width:340px;
	background:#fff url(images/pixel_bleu.gif) repeat-x top left;
	margin:0 auto;
	text-align:center;
}
.bordDr
{background:url(images/pixel_bleu.gif) repeat-y top right;}
.bordBas
{background:url(images/pixel_bleu.gif) repeat-x bottom left;}
.bordGau
{background:url(images/pixel_bleu.gif) repeat-y top left;}

.coinTG
{background:url(images/coinGau_top.gif) no-repeat top left;}
.coinTD
{background:url(images/coinDr_top.gif) no-repeat top right;}
.coinBD
{background:url(images/coinDr_bas.gif) no-repeat bottom right;}
.coinBG
{background:url(images/coinGau_bas.gif) no-repeat bottom left;}

.coinBG h1
{
	font-size:1.5em;
	color:#2483b4;
	text-align:center;
	padding:5px 0;
	margin:0;
}

/* --- tableaux ------------------------------------------ */

.tabDonnees
{margin:0 0 20px 0;}

.tabStations
{margin:0 0 36px 0;}

.tabDonnees th
{
	background:#23588a;
	text-align:center;
	color:#fff;
	font-size:1em;
	padding:14px 0 0 0;
	margin:0;
}

.tabStations th
{
	background:#23588a;
	text-align:center;
	color:#fff;
	font-size:1em;
	padding:3px 0 0 0;
	margin:0;
}

.tabDonnees .bordDr_blanc, .tabStations .bordDr_blanc
{border-right:1px solid #fff;}
.tabDonnees .bordBas_blanc, .tabStations .bordBas_blanc
{border-bottom:1px solid #fff;}

.tabDonnees td, .tabStations td
{
	font-size:1em;
	padding:10px 10px 7px 10px;
	margin:0;
	border-bottom:1px solid #ababab;
	text-align:justify;
}

.tabDonnees td.nomStation h1
{
	padding:0 0 0 1px;
	font-size:1em;
}

.tabDonnees .vert
{color:#6fa121;}
.tabDonnees .centrer
{text-align:center;}
.tabDonnees .bg, .tabStations .bg
{background:#eff3f7;}

.tabDonnees .txt-petit, .tabStations .txt-petit
{font-size:0.9em;}

.tabStations td.gradient1, .tabStations td.gradient2, .tabStations td.gradient3
{text-align:center !important;}

.tabDonnees td.celluleBoutons
{
	padding:5px 0;
	text-align:center;
}
/* --- zone légende ------------------------------------------ */

#zonelegende
{
	width:880px;
	margin:0 0 40px 0;
	background:url(images/menuprincipal_bg.gif);
}

#zonelegende_coinBG
{background:url(images/legende_coinBG.gif) no-repeat bottom left;}
#zonelegende_coinBD
{background:url(images/legende_coinBD.gif) no-repeat bottom right;}

div#zonelegende_coinBD
{height:69px;}

html>body div#zonelegende_coinBD
{
	height:auto;
	min-height:69px;
}

#zonelegende_coinBD h1
{
	color:#fff;
	text-align:center;
	font-size:1em;
	padding:9px 0;
}

#zonelegende_coinBD div
{margin:0 0 0 14px;}

/* --------------------------------------------------------------- */
/* -- Section Pages Intérieures ---------------------------------- */

#colGau
{
	float:left;
	width:180px;
}

#colDr
{
	float:left;
	width:697px;
	margin:0 0 0 12px;
}

/* ------------------------------------------- */
/* -- Colonne gauche ------------------------- */

/* -- menu colonne gauche ------------- */

.menuColGau
{
	width:180px;
	background:url(images/menuprincipal_bg.gif);
	margin:0 0 10px 0;
	position:relative;
}

.menuColGau_coinBD
{background:url(images/legende_coinBD.gif) no-repeat bottom right; padding:0 0 15px 0;}
.menuColGau_coinBG
{background:url(images/legende_coinBG.gif) no-repeat bottom left;}
.menuColGau_coinTG
{background:url(images/menuColGau_coinTG.gif) no-repeat top left;}
.menuColGau_coinTD
{background:url(images/menuColGau_coinTD.gif) no-repeat top right; padding:5px 0 0 0; width:180px;}


.menuColGau h1
{
	color:#fff;
	font-size:1em;
	padding:10px 0 10px 18px;
	border-bottom:1px solid #fff;
	text-align:left;
}

.noborder
{border:none !important;}

.menuColGau a:link, .menuColGau a:visited, .menuColGau a:active, #menuStations a:link, #menuStations a:visited, #menuStations a:active
{
	color:#fff !important;
	text-decoration:none !important;
}
.menuColGau a:hover, #menuStations a:hover
{text-decoration:underline !important;}

/* -- icônes ------- */
#iconDetails
{
	position:absolute;
	top:12px;
	left:-18px;
}

#iconParametres
{
	position:absolute;
	top:47px;
	left:-13px;
}

#iconHistorique
{
	position:absolute;
	top:84px;
	left:-13px;
}

#iconHistoriquePublique
{
	position:absolute;
	top:10px;
	left:-13px;
}

#iconHydrologiques
{
	position:absolute;
	top:120px;
	left:-9px;
}

#iconSaisie
{
	position:absolute;
	top:157px;
	left:-11px;
}

#iconMeteo
{
	position:absolute;
	top:-34px;
	left:-18px;
	_left:-27px;
}
/* ------------------- */
.boxMeteo
{
	padding:0 0 0 9px;
	position:relative;
}

.boxMeteo h2
{
	color:#fff;
	padding:5px 0;
	font-size:1em;
}

.boxMeteo ul
{
	list-style:none;
	margin:0;
	padding:15px 0 5px 0;
}
.boxMeteo ul li
{
	margin:0;
	padding:0 0 7px 20px;
	color:#fff;
	font-size:0.8em;
	background:url(images/icon_rss.gif) no-repeat 0 0;
}

.bMeteoMedia
{
	margin:0 0 0 5px;
	display:block;
}

/* -- menu stations ------------------- */

#menuStations
{
	width:180px;
	background:url(images/stations_bg.gif);
	margin:0 0 10px 0;
}

#station_coinTG
{background:url(images/stations_coinTG.gif) no-repeat top left;}
#station_coinTD
{background:url(images/stations_coinTD.gif) no-repeat top right;}
#station_coinBG
{background:url(images/stations_coinBG.gif) no-repeat bottom left;}
#station_coinBD
{background:url(images/stations_coinBD.gif) no-repeat bottom right; width:180px;}

#menuStations h1
{
	color:#fff;
	font-size:1.2em;
	padding:10px 0 5px 13px;
	border-bottom:1px solid #fff;
}

#menuStations ul
{
	list-style:none;
	margin:0;
	padding:7px 0 5px 13px;
}

#menuStations ul li
{
	margin:0;
	padding:0 0 10px 0;
	color:#fff;
}

/* ------------------------------------------- */
/* -- Colonne droite ------------------------- */

#zoneAlerte
{
	width:697px;
	margin:0 0 10px 0;
}


/* -- cotes ---------------------------- */

/* -- cote élevée -------- */
.coteNormale
{
	background:url(images/coteNormal_bg.gif) no-repeat top left;
	padding:19px 0 0 0;
}

div.coteNormale
{height:50px;}
html>body div.coteNormale
{
	height:auto;
	min-height:50px;
}

/* -- cote élevée -------- */
.coteMoyenne
{
	background:url(images/coteMoyenne_bg.gif) no-repeat top left;
	padding:19px 0 0 0;
}

div.coteMoyenne
{height:50px;}
html>body div.coteMoyenne
{
	height:auto;
	min-height:50px;
}

/* -- cote élevée -------- */
.coteElevee
{
	background:url(images/coteElevee_bg.gif) no-repeat top left;
	padding:19px 0 0 0;
}

div.coteElevee
{height:50px;}
html>body div.coteElevee
{
	height:auto;
	min-height:50px;
}

/* -- cote élevée -------- */
.coteInondation
{
	background:url(images/coteInondation_bg.gif) no-repeat top left;
	padding:19px 0 0 0;
}

/* -- avis citoyen -------- */
.avisCitoyenHaut
{
	background:url(images/coteElevee_bg_Haut.gif) no-repeat top left;
	padding:0 0 0 0;
}

.avisCitoyenBas
{
	background:url(images/coteElevee_bg_Bas.gif) no-repeat top left;
	padding:0 0 0 0;
}


div.coteInondation
{height:50px;}
html>body div.coteInondation
{
	height:auto;
	min-height:50px;
}

/* -- cote élevée -------- */
.coteTresElevee
{
	background:url(images/coteTresElevee_bg.gif) no-repeat top left;
	padding:19px 0 0 0;
}

div.coteTresElevee
{height:50px;}
html>body div.coteTresElevee
{
	height:auto;
	min-height:50px;
}

/* ------------------------------------- */

#zoneAlerte h1
{
	float:left;
	padding:0 22px;
	margin:0;
	color:#000;
	font-size:1em;
}
#zoneAlerte p
{
	float:left;
	padding:0;
	margin:0;
	color:#000;
}
#zoneAlerte p span
{
	margin:0 0 0 20px;
}

/* --- Éléments de contenus des pages intérieures -------------- */

.contenuInt h1
{text-decoration:underline;}
.contenuInt a:link, .contenuInt a:visited, .contenuInt a:active, .contenu a:link, .contenu a:visited, .contenu a:active
{color:#23588a;}
.contenuInt a:hover, .contenu a:hover
{text-decoration:none;}

/* --- Formulaires ------------------------------ */

.champs
{margin:2px 0 13px 9px;}

.champs label
{
    vertical-align: middle;
	font-weight:bold;
}

.champs input
{
	width:200px;
	margin:2px 0 0 0;
}

.champs select
{margin:2px 0 0 0;}

.champs input.idonnees
{
	width:80px;
	margin:2px 2px 0 0;
	vertical-align:middle;
}

.champs input.ititreDoc
{width:300px;}

.champs input.ibEnregistrer, .champs input.ibEnvoyer
{width:116px;}

.champs input.ibModifier
{width:124px;}

.champs input.icaseCoche
{
	width:20px;
	vertical-align:middle;
	margin:-2px 0 0 0;
}

.champs input.idateDebut
{width:150px;}
.champs input.idateFin
{width:150px;}
/* --- Zone Caméra ------------------------------ */

#zoneCamera
{
	float:right;
	width:314px;
	margin:0 0 10px 0;
}

#zoneCamera p
{
	font-size:0.8em;
	color:#8b8b8b;
	text-align:right;
	padding:0;
}

.bCamera
{margin:6px 12px 0 19px;}

/* -- Section Liens Utiles ----------------------------- */

#zoneLiensUtiles
{width:880px;}

#liensUtiles_colGau
{
	float:left;
	width:430px;
	margin:0 20px 0 0;
}
#liensUtiles_colDr
{
	float:left;
	width:430px;
}
.bAcceder
{margin:4px 0 0 0;}

/* --- Section Stations ------------------------------------- */

#boxPrevisionHydro
{
	border-bottom:5px solid #2483b4;
	margin:0 0 20px 0;
}

#resultats
{
	border-top:2px solid #dcdcdc;
	padding:20px 0 10px 0;
}

/* -- Échelle de cote -------------------------------------------- */

#echelleCote
{
	width:707px;
	position:relative;
	margin:0px 0 0 0px;
}

#echelleCote h3
{
	text-align:center;
	font-size:1em;
}

.iEchelleCote
{
	margin:36px 0 0 0;
}


/* -- Toutes les données modifiables -------------------------------- */

/* -- cote maximum -------------- */
#coteMaximum
{
	position:absolute;
	top:45px;
	/*left:88px;*/
	right:482px;
}
#coteMaximum h3
{
	float:left;
	padding:0 24px 0 0;
	font-weight:normal;
}
#coteMaximum p
{
	float:left;
	padding:1px 0 0 0;
	font-size:0.8em;
}

/* -- cote 100 ans -------------- */
#cote100ans
{
	position:absolute;
	top:67px;
	/*left:94px;*/
	right:482px;
}
#cote100ans h3
{
	float:left;
	padding:0 26px 0 0;
	font-weight:normal;
}
#cote100ans p
{
	float:left;
	padding:1px 0 0 0;
	font-size:0.8em;
}

/* -- cote 20 ans -------------- */
#cote20ans
{
	position:absolute;
	top:108px;
	/*left:97px;*/
	right:482px;
}
#cote20ans h3
{
	float:left;
	padding:0 30px 0 0;
	font-weight:normal;
}
#cote20ans p
{
	float:left;
	padding:1px 0 0 0;
	font-size:0.8em;
}

/* -- cote 2 ans -------------- */
#cote2ans
{
	position:absolute;
	top:161px;
	/*left:100px;*/
	right:482px;
}
#cote2ans h3
{
	float:left;
	padding:0 34px 0 0;
	font-weight:normal;
}
#cote2ans p
{
	float:left;
	padding:1px 0 0 0;
	font-size:0.8em;
}

/* -- cote très élevée -------------- */
#tresElevee
{
	position:absolute;
	top:186px;
	left:491px;
	z-index:10;
}
#tresElevee h3
{
	float:right;
	margin:0 6px 0 0;
	padding:3px 8px;
	font-weight:normal;
	border:1px solid #da3427;
	background:#fff;
	text-align:center;
}
#tresElevee p
{
	float:left;
	padding:4px 5px;
	font-size:0.8em;
	border:1px solid #da3427;
	background:#fff;
	text-align:center;
}

/* -- cote inondation -------------- */
#inondation
{
	position:absolute;
	top:218px;
	left:491px;
	z-index:20;
}
#inondation h3
{
	float:right;
	margin:0 6px 0 0;
	padding:3px 11px;
	font-weight:normal;
	border:1px solid #e3aa36;
	background:#fff;
	text-align:center;
}
#inondation p
{
	float:left;
	padding:4px 5px;
	font-size:0.8em;
	border:1px solid #e3aa36;
	background:#fff;
	text-align:center;
}

/* -- cote Préalerte -------------- */
#prealerte
{
	position:absolute;
	top:262px;
	right:482px;
}
#prealerte h3
{
	float:left;
	padding:0 24px 0 0;
	font-weight:normal;
}
#prealerte p
{
	float:left;
	padding:1px 0 0 0;
	font-size:0.8em;
}

/* -- cote élevée -------------- */
#elevee
{
	position:absolute;
	top:282px;
	left:491px;
	z-index:40;
}
#elevee h3
{
	float:right;
	margin:0 6px 0 0;
	padding:3px 22px;
	font-weight:normal;
	border:1px solid #f3f028;
	background:#fff;
	text-align:center;
}
#elevee p
{
	float:left;
	padding:4px 5px;
	font-size:0.8em;
	border:1px solid #f3f028;
	background:#fff;
	text-align:center;
}

/* -- cote Moyenne -------------- */
#moyenne
{
	position:absolute;
	top:327px;
	left:491px;
	z-index:50;
}
#moyenne h3
{
	float:right;
	margin:0 6px 0 0;
	padding:3px 15px 3px 16px;
	font-weight:normal;
	border:1px solid #77c422;
	background:#fff;
	text-align:center;
}
#moyenne p
{
	float:left;
	padding:4px 5px;
	font-size:0.8em;
	border:1px solid #77c422;
	background:#fff;
	text-align:center;
}

/* -- Fond de rivière -------------- */
#fondRiviere
{
	position:absolute;
	top:455px;
	/*left:74px;*/
	right:482px;
}
#fondRiviere h3
{
	float:left;
	padding:0 10px 0 0;
	font-weight:normal;
}
#fondRiviere p
{
	float:left;
	padding:1px 0 0 0;
	font-size:0.8em;
}

/* -- Minimum -------------- */
#minimum
{
	position:absolute;
	top:481px;
	/*left:90px;*/
	right:482px;
}
#minimum h3
{
	float:left;
	padding:0 24px 0 0;
	font-weight:normal;
}
#minimum p
{
	float:left;
	padding:1px 0 0 0;
	font-size:0.8em;
}

/* -- Couleurs du graphique représentant les niveaux d'eau -------------------------------- */

/* -- Niveau actuel -------------------------- */
#niveauActuel
{
	position:absolute;
	top:337px;
	left:225px;
	width:266px;
	z-index:100;
	background:url(images/niveau_actuel.gif);
	height:126px;
}

#niveauActuel h1
{
	color:#fff;
	text-align:center;
	font-size:1em;
	padding:5px 0px 0px 0px;
}

/* -- Moyenne -------------------------- */
#moyenne_graph
{
	position:absolute;
	top:292px;
	left:225px;
	width:266px;
	z-index:200;
	background:url(images/moyenne_bg.gif);
	height:45px;
}

/* -- Élevée -------------------------- */
#elevee_graph
{
	position:absolute;
	top:228px;
	left:225px;
	width:266px;
	z-index:300;
	background:url(images/elevee_bg.gif);
	height:64px;
}

/* -- Inondation -------------------------- */
#inondation_graph
{
	position:absolute;
	top:196px;
	left:225px;
	width:266px;
	z-index:400;
	background:url(images/inondation_bg.gif);
	height:32px;
}

/* -- Inondation -------------------------- */
#tresElevee_graph
{
	position:absolute;
	top:168px;
	left:225px;
	width:266px;
	z-index:500;
	background:url(images/tresElevee_bg.gif);
	height:28px;
}

/* -- Fond de la rivière -------------------------- */
#fondRiviere_graph
{
	position:absolute;
	top:196px;
	left:225px;
	width:266px;
	z-index:600;
	background:url(images/fondRiviere.gif);
	height:28px;
}

/* ------------------------------------------------------------------- */

/* -- Boîte du graphique -------------- */

#boxGraphique img
{
	position:absolute;
	top:7px;
	left:224px;
	z-index:1;
}
/* -- Élévation colonne droite du graphique -------------- */
#colElevationDr
{padding:19px 0 0 0;}

#colElevationDr p
{
	padding:0 0 50px 0;
	_padding:0 0 50px 0;
}

/* --------------------------------------------------------------- */
/* -- Zone des logos --------------------------------------------- */

#zoneLogos
{
	width:955px;
	margin:15px 0 0 0;
	padding:20px 0 32px 0;
	border-top:1px solid #ddd;
	background:#fff;
}

/* --------------------------------------------------------------- */
/* -- Zone pied -------------------------------------------------- */

#pied
{
	width:955px;
	background:url(images/pied_bg.gif) no-repeat bottom left;
	height:57px;
	margin:0 0 5px 0;
}
#pied ul
{
	list-style:none;
	margin:0;
	padding:16px 0 0 10px;
}

#pied ul li
{
	color:#fff;
	float:left;
	margin:0;
	padding:0 17px 0 0;
}

#pied h1
{
	font-size:0.7em;
	visibility:hidden;
}

#pied img
{display:block;}

#pied ul li.realisePar
{padding:11px 17px 0 0;}

/* --------------------------------------------------------------- */
/* -- boîte login ------------------------------------------------ */

#login-bordTop
{
	width:400px;
	background:#eff3f7 url(images/pixel_gris.gif) repeat-x top left;
	margin:20px 0 30px 245px;
}
#login-bordDr
{background:url(images/pixel_gris.gif) repeat-y top right;}
#login-bordBas
{background:url(images/pixel_gris.gif) repeat-x bottom left;}
#login-bordGau
{background:url(images/pixel_gris.gif) repeat-y top left;}

#login-coinTG
{background:url(images/login_coinTG.gif) no-repeat top left;}
#login-coinTD
{background:url(images/login_coinTD.gif) no-repeat top right;}
#login-coinBD
{background:url(images/login_coinBD.gif) no-repeat bottom right;}
#login-coinBG
{background:url(images/login_coinBG.gif) no-repeat bottom left;}

#boxlogin
{padding:15px 20px;}

#boxlogin h1
{
	font-size:1.2em;
	padding:0 0 5px 0;
}

#boxlogin p
{padding:0 0 5px 0;}

#boxlogin table
{margin:0;}
#boxlogin table td
{padding:0 0 10px 0;}

#boxlogin input#connexion
{margin:0 0 0 175px;}