/*------------------------------------------------------------------------
# DIPPSite Design 1.0 - September 2008
# ------------------------------------------------------------------------
# Copyright (C) 2008 Association DIPP. All Rights Reserved.
# @license - - cc - Merci de conserver le nom de l'auteur original pour toute réutilisation de cette feuille de style !
# Author: F. TISSOT, Association DIPP
# Websites:  http://www.dippsite.fr -  http://www.vlipp.fr
-------------------------------------------------------------------------*/

/*  MERCI DE RESPECTER LA SÉMANTIQUE DES ÉLÉMENTS LORS DE L'AJOUT / MODIFICATION DE RÈGLES CSS ! */

/* Corps du site 
--------------------------------------*/
html, body, form, fieldset {
	margin: 0;
	padding: 0;
}

body{
	background: #E6E6E6;
	color: #333333;
	font-family: "Lucida Grande", Arial, sans-serif;
	line-height: 1.6;
}

body.fs1 {
	font-size: 9px;
}

body.fs2 {
	font-size: 10px;
}

body.fs3 {
	font-size: 11px;
}

body.fs4 {
	font-size: 12px;
}

body.fs5 {
	font-size: 13px;
}

body.fs6 {
	font-size: 14px;
}

/* ACCESIBILITE
--------------------------------------------------------- */
ul.accessibilite {
	position: absolute;
	top: -100%;
	display: none;
}

/* MISE EN PAGE PRINCIPALE DIVS
--------------------------------------------------------- */
#conteneurWrap {
}

	/* HAUT : LOGO + MENU
	--------------------------------------------------------- */
	#headerWrap {
		clear: both;
	}
	
	#header {
		width: 950px;
		margin: 0 auto;
		clear: both;
	}

	.narrow #header {
		width: 740px;
		margin: 0 auto;
		clear: both;
	}
	
		div#speedLinkWrap {
			position: relative;
			clear: both;
			padding: 10px 0 0;
		}
		
		div#speedLink {
			padding: 0;
			position: relative;		
		}

		div#speedLink ul {
			margin: 0;
			padding: 0;
			float: right;
		}

		div#speedLink li {
			display: inline;
			margin: 0;
			padding: 0;
			line-height: 1.6;
			background: url("../images/speed_ul.gif") no-repeat center left;
		}

		div#speedLink li a {
			display: inline;
			padding: 0 10px;
			color: #1C64A5;
			font-size: 85%;
		}

		div#bannersWrap {
			position: relative;
			clear: both;
			padding: 10px 0 0;
		}
			
		div#banners{
			padding: 0;
			float: right;
		}
	
		h1.logo a {
			position: absolute;
			background: url("../images/logo_dippsite.png") no-repeat;
			height: 120px;
			width: 250px;
			margin-top:-20px;
		}

		h1.logo a span {
			position: absolute;
			top: -1000px;
		}
	
	/* MENU PRINCIPAL
	--------------------------------------------------------- */
	#menuConteneur {
		margin: 0 auto;
		padding: 0;
		width: 950px;
	}
	
	.narrow #menuConteneur {
		width: 740px;
		margin: 0 auto;
		padding: 0;
	}
	
		#menuPrincipalWrap {
			color: #CCCCCC;
			height: 50px;
			background: url("../images/main_tr.gif") no-repeat top right #000001;
		}

			#menuPrincipal {
				background:transparent url("../images/main-tl.gif") no-repeat scroll left top;
				height:100px;
				left:170px;
				line-height:normal;
				margin-right:40px;
				position:relative;
				z-index:999;
			}

			#menuPrincipal a{
				outline: none;
			}
		
			#menuPrincipalBottom {
				background-color: #000001;
				background-position: 0 100%;
				background-repeat: repeat-x;
				background-image: url("../images/draft_header_nightblue.gif");
				padding: 0 0 1.5em 0;

			}
			
		/* OUTILS SITE
		--------------------------------------------------------- 
		#outilsSite {
			width: 950px;
			margin: 0 auto;
			clear: both;
		}

		.narrow #outilsSite {
			width: 770px;
			margin: 0 auto;
			clear: both;
		}
		
		#outilsSite ul {
			float: right;
			margin: 0;
			padding: 4px 5px 2px;
		}

		#outilsSite li {
			background: none;
			display: block;
			float: left;
			line-height: normal;
			margin: 0;
			padding: 0;
		}

		#outilsSite img {
			padding: 0 2px;
		}	*/
		
		
		/* CONTENU PRINICPAL
		--------------------------------------------------------- */		
		
		/*div.shadowRight {
			padding-right: 20px;
			background: url("../images/shadow_right.gif") repeat-y top right;
			overflow: hidden;
		}

			div.shadowLeft {
				padding-left: 20px;
				background: url("../images/shadow_left.gif") repeat-y top left;
				overflow: hidden;
			}	*/
			
	#contentConteneurWrap {
		clear: both;
	}
	
		#contentConteneur{
			width: 950px;
			margin: 0 auto;
			clear: both;
			background: url(../images/grad1.gif) repeat-x top #FFFFFF;
		}
		
		.narrow #contentConteneur{
			width: 740px;
			margin: 0 auto;
			clear: both;
		}
	
			#mainWrap {
				color: #FFF;
				background-color: #4f7a8e;
				background-image: url("../images/draft_usertop_nightblue.gif");
				background-position: 0 100%;
				background-repeat: repeat-x;
				padding: 0 0 1.5em 0;
			}

			.line #mainWrap { 
				background-image: none !important; 
			}
			
				/* RUBRIQUES HAUT (Slideshow + EPAD)
				--------------------------------------------------------- */	
				#rubriquesHaut ul {
					margin: 0;
					padding: 0;
				}

				#rubriquesHaut li {
					margin: 0;
				}	
				
				#rubriquesHaut div.boiteBr {
					background: url("../images/topsl-br.gif") no-repeat bottom right;
					margin: 0;
					overflow: hidden;
					padding: 0;
					margin-top:10px;
				}

					#rubriquesHaut div.boiteBl {
						background: url("../images/topsl-bl.gif") no-repeat bottom left;
						padding: 0;
					}

						#rubriquesHaut div.boiteTr {
							background: url("../images/topsl-tr.gif") no-repeat top right;
							padding: 0;
						}

							#rubriquesHaut div.boiteTl {
								background: url("../images/topsl-tl.gif") no-repeat top left;
								padding: 10px;
							}
				
					#rubriqueHautGauche .slideshow_module {
						margin-top: 2.3%;
						padding-left: 10px;
						padding-right: 0;
					}						
						.slideshow-mask {
							width: 100%;
							display: block;
							background: url("../images/header-mask.png") no-repeat;
							position: absolute;
							top: 0;
							left: 0;
							height: 250px;
							z-index: 100;
						}
					
					#rubriqueHautDroite div.video_module  {
						padding: 0;
						margin: 0 8px 0 10px;
					}

					#rubriqueHautDroite div.video_module h3 {
						border: 1px solid #DDDDDD;
						margin: 0 0 -12px;
						padding: 0 10px;
						color:#A62651;
						font-size: 110%;
						background: url("../images/icon-video.gif") no-repeat 95% 50%;
						font-family: "Trebuchet MS", Arial, sans-serif;
						text-transform: uppercase;
					}
					#rubriqueHautDroite div.video_module p.more_about {
						margin: -4px 0 0 0 ;
						float:right;
						padding: 0 0 0 20px;
						color:#A62651;
						background: url("../images/icon-arrow.gif") no-repeat 0% 50%;
						text-decoration: none;
					}
			
			/* CONTENEURS
			--------------------------------------*/
			div#global {
				background: #FFFFFF;
			}
			
			div#global2 {
				width: 950px;
				margin: 0 auto;
			}	
			
				#contenuWrap {					
					padding-top: 20px;
				}				
				
					#contenu {
						padding-bottom: 20px;
					}
					
						#colonneGauche{
							float:left;
							width:315px;
							margin:0;
							margin-left:10px;
							background: url("../images/right_bkgmiddle.gif") repeat-y 0 0;
						}

						div.colonneGaucheTop { 
							background: url(../images/right_bkgtop.gif) no-repeat 0 0; 
						}
						
							div.colonneGaucheBottom {
								background-position: 0 100%;
								background-repeat: no-repeat;
								padding: 5em 2em 5em 2em;
								background-image: url(../images/right_bkgbottom_nightblue.gif);
							}
								div.motsCles{
									position:relative; 
									margin:0 0 60px 15px;								
								}
							
						
						#contenuPrincipal{
							overflow:hidden !important;
							height:auto !important;
							overflow:visible;
							height:1%;
							padding-bottom:30px;
							padding:3px;
							padding-left:10px;
							padding-right:10px;
						}
						
						#filArianeWrap {
							font-size: 1em;
							background-repeat: no-repeat;
							background-position: 0 50%;
							background-image: url(../images/pathway.png);						
							padding: 0 0 0 10px;
							color: #1B1710 !important;
							font-weight: bold;
							/*background: url("../images/h3-bg-hilite.gif") no-repeat left center #00B0DB;*/
							margin: 0 5px 10px 10px;
							white-space: nowrap;
							overflow: hidden;
							display: block;
							height: 30px;
						}

						#filAriane {
							padding: 0;
							display: block;
							float: left;
							width: 100%;
							/*background: url("../images/h3-bg-hilite.gif") no-repeat right center;*/
							margin: 0;
							height: 30px;
						}

						#filAriane div.innerpad {
							padding-top: 7px;
							line-height: normal;
						}

						#filAriane strong {
							margin-right: 5px;
						}

						#filAriane a {
							color: #1B1710 !important;
							text-decoration: none;
						}

						#filAriane a:hover {
							text-decoration: underline;
						}

						#filAriane img.icon_pathway {
							margin: 0 1px;
						}

/* LIENS
--------------------------------------*/									

div#links{
	width:96%;
	margin:auto;
	margin-top:10px;
	margin-bottom:10px;
	padding-top:2px;
	padding-bottom:4px;
	color:#FFFFFF;
	font-weight:bold;
}

/* LOGIN FORMULAIRE
--------------------------------------*/	
#login {
	position: absolute;
	top: 25px;
	right: 0;
	background: url("../images/login-bg.gif") no-repeat;
	height: 22px;
	width: 333px;
}

#login form {
	float: left;
}

#login form label {
	float: left;
}

label.login-user span,
label.login-password span {
	display: none;
}

#login form input.button {
	font-size: 11px !important;
	float: left;
	background: none;
	border: none;
}

#login form #mod_login_username,
#login form #mod_login_password {
	width: 100px;
	margin: 3px 0 0 22px;
	font-size: 11px !important;
	padding: 2px;
	background: none;
	border: none;
}

#login form #mod_login_password {
	margin: 3px 18px 0 35px;
}

#login form a {
	padding: 0 8px 0 13px;
	text-decoration: none;
	font-size: 10px;
	background: url("../images/arrow.png") no-repeat left center;
}

#login form a:hover,
#login form a:active,
#login form a:focus {
	text-decoration: underline;
}

.login-links {
	display: block;
	clear: both;
	padding-top: 8px;
}

/* FOOTER
--------------------------------------------------------- */
/* SPOTLIGHT
--------------------------------------------------------- */

/* Bot spotlight */

#gotop {
	width:16px;
	margin:0 auto;
	clear: both;
}

.clear {
	clear: both;
}

/* USERS MODULES after CONTENT */
#bottomSite {
	color: #FFF;
	background: #392936 url(../images/bottomsite.gif) repeat-x 0 0;
}
#bottomSite a { color: #8A91B8; }
#bottomSite a.mainlevel { background: url(../images/arrow_nightblue.png); }

#bottomSite .global_content { 
	padding: 2em 0 1em 0; 
}
#bottomSite .Ubottom-1, 
#bottomSite .Ubottom-2 { 
}

#bottomSite .leftmodules, 
#bottomSite .rightmodules,
#bottomSite .floatmodule { 
	float: left; 
}

#bottomSite .Ubottom-1 .leftmodules {
 	width: 100%; 
}

#bottomSite .Ubottom-1 .rightmodules {
	width: 100%; 
}
#bottomSite .Ubottom-2 .leftmodules {
width: 61%;
}

#bottomSite .Ubottom-2 .rightmodules {
	width: 39%;
}

#bottomSite .leftmodules {
	width: 61%;
}

#bottomSite .rightmodules { 
	width: 39%; 
}

.UbottomCol-1 .floatmodule {
	width: 100%;
}
.UbottomCol-2 .floatmodule {
	width: 50%;
}
.UbottomCol-3 .floatmodule {
	width: 33%;
}

#bottomSite .moduletable {
	margin: 0 3em 1em 0;
}

#bottomSite h3 {
	color: #CCCCCC;
	font-size: 125%;
	background: none;
	border: none;
	margin: 5px 0;
	padding: 0;
	height: auto;
}
#bottomSite a {
	text-decoration: none;
	background-repeat: repeat-x;
	background-position: 0 100%;
}
#bottomSite a:hover, #bottomSite a:active, #bottomSite a:focus {
	color: #FFFFFF;
	text-decoration: none;
	background-image: none; 
}

#bottomSite a:hover {
	text-decoration: underline;
}

#bottomSite ul{
	margin: 5px 0;
	padding: 0;
}

#bottomSite li {
	margin: 0 0 0 18px;
	padding: 0;
	list-style-type:none;
}

#bottomSite ul li {
	margin: 0;
	padding: 0 0 0 25px;
	background: url(../images/bottom.png) no-repeat 10px 7px;
}

#bottomSite li a {
	color: #FFFFFF;
}

/* FOOTER */
div#footerwrap {
	padding: 0;
	background: #333333;
}

div#footer {
	color: #6D635C;
	padding: 10px 0 30px;
	position: relative;
	background: #1B1710 url(../images/draft_footer.gif) repeat-x 5% 0;
}

div#footerurl {
	padding:0;
	position: relative;
	background: #1B1710 url(../images/draft_footer.gif) repeat-x 5% 0;
}

div#footer small {
	position: absolute;
	top: 15px;
	left: 10px;
	color: #6D635C;
	font-size: 100%;
}

div#footer p.pwd {
	position: absolute;
	top: 25px;
	right: 10px;
	color: #6D635C;
	font-size: 80%;
}

div#footer ul, div#footerurl  ul {
	position: absolute;
	top: 15px;
	right: 0;
	margin: 0;
	padding: 0;
	line-height: normal;
}

div#footer li, div#footerurl li {
	display: inline;
	margin: 0;
	padding: 0;
	background: url("../images/vline.gif") no-repeat center left;
}

div#footer a:hover, div#footer a:active, #footer a:focus  {
	color: #6D635C;
}
div#footer a  {
	color: #FFFFFF;
}

div#footer li a, div#footerurl li a {
	display: inline;
	line-height: normal;
	padding: 0 15px;
	color: #FFFFFF;
}

/*
.f-normal #footer, .f-normal #footer h1 { 	font-size: 0.95em; }
.f-large #footer, .f-large #footer h1 { 	font-size: 0.85em; }

#footer {
	padding: 1em 0;
	background: #1B1710 url(../images/draft_footer.gif) repeat-x 5% 0;
	color: #6D635C;
}
#footer,
#footer h1 {
	font-weight: normal;
	font-size: 1em;
}
#footer .leftmodule, #footer .rightmodule { 
	float: left; 
	width: 50%;
}
#footer .leftmodule .moduletable { 		float: left; }
#footer .rightmodule .moduletable { 	float: right; }

#footer .moduletable { margin: 0 0 0.5em 0; }
#footer .moduletable table { width: auto !important; }

#footer a {
	font-weight: normal;
	color: #6D635C;
}
#footer a:hover {	color: #6D635C; }
#footer div { text-align: left; }

#footer a.mainlevel { text-decoration: none; }
#footer a.mainlevel:hover {
	color: #FFF;
	text-decoration: none;
}
div#footerimg img {
	filter : alpha(opacity=60);
	-moz-opacity: 0.6;
}
div#footerimg a:hover img {
	filter : alpha(opacity=100);
	-moz-opacity: 1.0;
}
li.firstitem {
	background: none !important;
}

.footurl {
	float: none;
	clear: both;
}
*/

/* Clearfix */
.clearfix:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

* html > body .clearfix {
	display: block;
	width: 100%;
}

* html .clearfix {
	height: 1%;
}