/* ### www.esprit-public.fr ###*/
/* ### SCREEN stylesheet ###*/
/* ### Esprit Public - 2007 ### */
/* ### (feu) Didier Llopis, (feu) France Corbel, Franck Grenier ### */


/* ###################### SOMMAIRE (mettre à jour) ###### */
/* $1. Balises de base */
/* $2. Styles de formulaires */
/* $3. Blocs de mise en page */
/* $4. Menu principal */
/* $5. Sous-menus : niveaux 2 et 3 */
/* $6. Menu pratique et menu bas de page */
/* $7. Contenu principal */
/* $8. Contenu contextuel */
/* $9. Contenu Accueil */
/* $10. Styles Tooltip Mootools (info bulle JS) */
/* ###################################################### */



/* ###################### $1. Balises de base ############################## */
@import url(reset.css);

body {
	font-family:Verdana, Arial ,sans-serif;
	font-size:62.5%;
	line-height:1.5em;
	color:#f4f4f4;
	background:#000;
}

/* BALISES BLOCK ******************* */

h1,h2,h3,h4,h5,h6 {
	font-family:"Arial",sans-serif;
	font-weight:bold;
	clear:both;
}

h1 {
	
}

h2 {
	color:#ff0;
	font-size:1.7em;
	font-weight:normal;
	line-height:1.2em;
	padding:0 0 4px 10px;
	margin:0 0 20px 0;
	border-bottom:#ff0 solid 1px;
	background:url(../img/puce_h1.gif) no-repeat 0% 10px;
}

h3 {
	color:#ff0;
	font-size:1.3em;
	margin:0 0 10px 0;
	clear:none;
}

h4 {
	font-size:1.1em;
	margin:0 0 5px 0;
}


p, ul, ol, table {
	margin-bottom:20px;
}

ul {
	margin:10px 15px 20px 15px;
}

li {
	padding:0 0 0 15px;
	margin:2px 0 2px 0;
	background:#000 url(../img/puce_liste.gif) no-repeat 0% 0.5em;
}

ul ul {
	margin:5px 15px 10px 5px;
}

ul ul li {
	background:#000 url(../img/puce_sous_liste.gif) no-repeat 0% 0.5em;
}

abbr, acronym {
	cursor:help;
	border-bottom:1px dotted #dedede;
}

#footer abbr, #footer acronym {
	cursor:help;
	border-bottom:0;
}

table {
	border:1px solid #edd4d3;
	border-collapse:collapse;
}

table td, table th {
	padding:10px;
	vertical-align:baseline;
	border:1px solid #edd4d3;
}

table th {
	font-size:1em;
	color:#999;
	background-color:inherit;
}

caption {
	display:none;
}

form input {
	padding:2px 5px 1px 5px;
	background:#fff;
}

form input.submit {
	color:#fff;
	font-size:1.1em;
	font-weight:bold;
	padding:1px 5px 1px 5px;
	background:#999798;
}

form input.submit:hover {
	color:#999798;
	background:#ff0;
}

form p {
	margin-bottom:5px;
}


/* BALISES INLINE ****************** */
a {
	color:#f4f4f4;
	background-color:inherit;
	text-decoration:underline;
}

a:hover, a.actif {
	color:#ff0;
}

strong {
	font-weight:bold;
}

em {
	font-style:italic;
}

sub {
	font-size:0.7em;
	position:relative;
	top:0.3em;
}

sup {
	font-size:0.7em;
	position:relative;
	top:-0.3em;
}

blockquote {
	float:right;
	text-align:right;
	font-size:1.2em;
	width:180px;
	padding:0 18px 0 18px;
	text-indent:-18px;
	background:url(../img/close-quote.gif) no-repeat right bottom;
}

blockquote:first-letter {
	font-size:1.4em;
	padding-left:18px;
	background:url(../img/open-quote.gif) no-repeat left top;
}

img {
	float:left;
	padding:1px;
	margin:0.5em 1em 5px 0;
	border:1px #fff solid;
}


/* CLASSES GENERIQUES ************** */

.noDisplay {
	position:absolute;
	left:0;
	top:-500px;
	width:1px;
	height:1px;
	overflow:hidden;
}

.noFloat {
	clear:both;
}


/* ###################### $2. Styles de formulaires ######################## */
input, select, textarea {
	font-family:"Arial",sans-serif;
	font-size:1em;
	color:#444;
	background-color:#fff;
	padding:2px;
	margin:2px 0 2px 0;
	vertical-align:middle;
	border:1px solid #999;
}

input:hover, select:hover, textarea:hover {
	border:1px solid #ff0;
	background: #F5F5DC;
	color: #444;
}

input:focus, select:focus, textarea:focus {
	border:1px solid #ff0;
}

input.focus {	/*** Mise en avant des champs en cours d'utilisation ***/
	background: #F5F5DC;
	color: #444;
	border:1px solid #ff0;
}

input.normal {	/*** Retour à l'état normal après l'utilisation ***/
	background: #FFF;
	color: #444;
	border:1px solid #999;
}

input.submit {
	color:#fff;
	font-size:1.1em;
	font-weight:bold;
	padding:1px 5px 1px 5px;
	background:#999798;
	border:0;
}

input.submit:hover {
	color:#999798;
	background:#ff0;
}

textarea {
	width:300px;
	height:90px;
	margin:0 0 10px 0;
}

textarea.focus {	/*** Mise en avant des champs en cours d'utilisation ***/
	background: #F5F5DC;
	color: #444;
	border:1px solid #ff0;
}

textarea.normal {	/*** Retour à l'état normal après l'utilisation ***/
	background: #FFF;
	color: #444;
	border:1px solid #999;
}

input.texte {
	width:85px;
}

#contact input.texte {
	width:200px;
	margin:0 0 10px 0;
}

#contact input.message {
	width:450px;
	height:300px;
}

 * html legend {margin-left:-6px;}

legend {
	display:none;
	position:absolute;
	left:0;
	top:-500px;
	width:1px;
	height:1px;
	overflow:hidden;
}

label:hover {
	cursor: pointer;	/*** Petite astuce pour apprendre aux utilisateurs à cliquer sur les intitulés ***/
}

label {	/*** Mise en forme des intitulés de champs ***/
	display:block;
	float: left;	/*** Très important, ne pas suprimer ! ***/
	width: 15%;	/*** Les intitulés prennent 1/3 de la largeur totale du formulaire... ***/
	text-align: right;	/*** ... et ils sont alignés à droite... ***/
	margin: 0;
	padding: 0 .5em 0 0;
	line-height: 1.8;	/*** ... et centrés verticalement. ***/
}

.requis {
	color:#f00;
}


/* ###################### $3. Blocs de mise en page ######################## */

* html body #colPrincipal {
	margin:0 0 0 15px;
}

#cadre {
	width:920px;
	margin:auto;
	padding:10px;
}

#header {
	margin-bottom:20px;
}

html:first-child #header {
	margin-bottom:40px;
}

#colGauche {
	float:left;
	width:140px;
}

#colDroite #articles_atelier {
	margin:0;
}

#colDroite #articles_atelier ul {
	list-style-type:none;
	margin:0;
	padding:0;
}

#colDroite #articles_atelier ul li {
	color:#999;
	padding:0 0 5px 0;
	background:#000 none;
	float:left;
	display:block;
	width:100%;
	border-bottom:1px solid #999999;
}

#colDroite #articles_atelier ul li a {
	height:auto;
	margin-right:0;
	background-image:none;
	text-decoration:none;
}

#colDroite #articles_atelier ul li a:hover {
	text-decoration:none;
	color:#FFFF00;
}

#cadreContenu {
	font-size:1.15em;
	line-height:1.6em;
	padding:0 0 100px 0;
	background-position:100% 100%;
	background-repeat:no-repeat;
	width:100%;
	overflow:auto;

}

/** html #cadreContenu {
	border:1px solid #000000;
}*/

.style1 {
	background:url(../img/courbes_fond_1.gif) right bottom no-repeat;
}

.style2 {
	background:url(../img/courbes_fond_2.gif) right bottom no-repeat;
}

.style3 {
	background:url(../img/courbes_fond_3.gif) right bottom no-repeat;
}

.style4 {
	background:url(../img/courbes_fond_4.gif) right bottom no-repeat;
}

#colPrincipal {
	float:left;
	padding:0 20px 10px 0;
	margin:0 20px 0 20px;
	width:480px;
}

* html #colPrincipal {
	width:485px;
	margin:0 40px 0 20px;
}

#cadreContenu #colPrincipal {
	background-color:#000;
}

#deuxColonnes #colPrincipal {
	width:720px;
	background:none;
}

#colPrincipal_port {
	width:720px;
	background:none;
	margin:0pt 20px;
	padding:0pt 20px 10px 0px;
	float:left;
}

#accueil #colPrincipal {
	width:450px;
}

#accueil #colDroite {
	width:250px;
}

#colDroite {
	float:left;
	width:220px;
	padding:0 10px 0 10px;
	background:#000;
}

#cadreContenu #colPrincipal #colDroite #docs {
	background:#000;
}

#footer {
	font-size:0.9em;
	margin:20px 0 0 0;
	background-color:#000;
}


/* ###################### $4. Header ####################################### */
#header h1 {
	float:left;
	border:0;
	background:none;
}

#header h1 a {
	display:block;
	width:139px;
	height:118px;
	margin:10px 0 0 0;
	background:url(../img/logoEp.gif) no-repeat;
}

#menuPratique {
	float:right;
	width:280px;
	height:30px;
	color:#999;
	position:relative;
	/*overflow:auto;*/
	text-align:right;
}

 * html #menuPratique {
	width:285px;
}


#menuPratique form {
	float:right;
	width:132px;
	height:22px;
	/*overflow:auto;*/
}


#menuPratique ul {
	float:left !important;
	margin:2px 5px 0 0 !important;
}

#menuPratique li {
	display:block;
	float:left;
	padding:0;
	margin:3px 4px 0 4px;
	background:none;
}

#menuPratique li a {
	/*float:left;*/
	display:block;
	height:15px;
	width:15px;
	background-repeat:no-repeat;
}

#mPratAccueil a {background-image:url(../img/pictoHome.gif);}
#mPratAccessib a {background-image:url(../img/pictoAccess.gif);}
#mPratContact a {background-image:url(../img/pictoContacts.gif);}
#mPratPrint a {background-image:url(../img/pictoPrint.gif);}
#mPratTup a {background-image:url(../img/pictoTup.gif);}
#mPratTdown a {background-image:url(../img/pictoTdown.gif);}

#mPratAccueil a:hover {background-image:url(../img/pictoHome_ov.gif);}
#mPratAccessib a:hover {background-image:url(../img/pictoAccess_ov.gif);}
#mPratContact a:hover {background-image:url(../img/pictoContacts_ov.gif);}
#mPratPrint a:hover {background-image:url(../img/pictoPrint_ov.gif);}
#mPratTup a:hover {background-image:url(../img/pictoTup_ov.gif);}
#mPratTdown a:hover {background-image:url(../img/pictoTdown_ov.gif);}

#mPratAccueil a.actif {background-image:url(../img/pictoHome_ov.gif);}
#mPratAccessib a.actif {background-image:url(../img/pictoAccess_ov.gif);}
#mPratContact a.actif {background-image:url(../img/pictoContacts_ov.gif);}

#police {
	float:right !important;
	list-style-type:none !important;
	list-style:none !important;
}

#police li {
	background:none !important;
	display:block;
	float:right;
	margin: 3px 4px 0pt !important;
}

#animFlash {
	float:right;
	width:760px;
	height:240px;
	background-color:#fff;
	color:inherit;
}


/* ###################### $5. Menu principal ############################### */
#menuPrincipal {
	position:relative;
	float:right;
	width:760px;
	height:75px;
	margin:29px 0 2px 0;
}

#menuPrincipal ul {
	margin:0;
}

#menuPrincipal li {
	display:inline;
	color:#999;
	padding:0;
	background:#000 none;
	
}

#menuPrincipal li a {
	float:left;
	display:block;
	height:15px;
	margin-right:10px;
	background-repeat:no-repeat;
}

#menuPrincipal #mPrincAgence a {background-image:url(../img/menuAgence.gif); width:60px;}
#menuPrincipal #mPrincActiv a {background-image:url(../img/menuActivites.gif); width:65px;}
#menuPrincipal #mPrincMetiers a {background-image:url(../img/menuMetiers.gif); width:53px;}
#menuPrincipal #mPrincRefs a {background-image:url(../img/menuRefs.gif); width:79px;}
#menuPrincipal #mPrincAtelier a {background-image:url(../img/menuAtelier.gif); width:50px;}
#menuPrincipal #mPrincContacts a {background-image:url(../img/menuContacts.gif); width:63px;}

#menuPrincipal #mPrincAgence a:hover, #menuPrincipal #mPrincAgence.actif a {background-image:url(../img/menuAgence_ov.gif);}
#menuPrincipal #mPrincActiv a:hover, #menuPrincipal #mPrincActiv.actif a {background-image:url(../img/menuActivites_ov.gif);}
#menuPrincipal #mPrincMetiers a:hover, #menuPrincipal #mPrincMetiers.actif a {background-image:url(../img/menuMetiers_ov.gif);}
#menuPrincipal #mPrincRefs a:hover, #menuPrincipal #mPrincRefs.actif a {background-image:url(../img/menuRefs_ov.gif);}
#menuPrincipal #mPrincAtelier a:hover, #menuPrincipal #mPrincAtelier.actif a {background-image:url(../img/menuAtelier_ov.gif);}
#menuPrincipal #mPrincContacts a:hover, #menuPrincipal #mPrincContacts.actif a {background-image:url(../img/menuContacts_ov.gif);}

#menuPrincipal ul ul, #menuPrincipal ul ul ul {
	position:absolute;
	top:22px;
	left:0;
	width:760px;
	border-top:1px solid #999;
	padding-top:3px;
}

#menuPrincipal #mPrincAgence.actif li a, #menuPrincipal #mPrincActiv.actif li a, #menuPrincipal #mPrincMetiers.actif li a, 
#menuPrincipal #mPrincRefs.actif li a, #menuPrincipal #mPrincAtelier.actif li a, #menuPrincipal #mPrincContacts.actif li a,
#menuPrincipal #mPrincAgence.actif li a:hover, #menuPrincipal #mPrincActiv.actif li a:hover, #menuPrincipal #mPrincMetiers.actif li a:hover, 
#menuPrincipal #mPrincRefs.actif li a:hover, #menuPrincipal #mPrincAtelier.actif li a:hover, #menuPrincipal #mPrincContacts.actif li a:hover {
	float:none;
	display:inline;
	height:auto;
	margin-right:0;
	background-image:none;
	text-decoration:none;
}
#menuPrincipal img.spip_logos {
	border:0px;
	padding:0 0 0 0;
	margin:0 0 -1px 0;	
	float:none;
}

/* ###################### $6. Menu bas de page ############################# */
#logoGl {
	display:block;
	float:left;
	margin:2px 8px 0 0;
	width:40px;
	height:41px;
	background:url(../img/logoGl.gif) no-repeat;
}

#footer a {
	color:#545454;
}

#footer a:hover {
	color:#fff;
}

#footer li {
	color:#545454;
	padding:0;
	background:none;
}

#footer p {
	color:#545454;
	float:left;
	margin:0 8px 0 0;
	width:165px;
	padding:0;
}

#footer p.petit {width:102px;}
#footer p.grand {width:200px;}

#menuBas {
	float:right;
	width:160px;
	padding:0;
	margin:30px 0 0 0;
}

#menuBas li {
	display:inline;
}


/* ###################### $7. Contenu principal ############################ */
#colPrincipal h2 {
	margin-right:-20px;
}

.vignette {
	width: 80px;
	height: 80px; 
}

#details {
	width:200px;
	float:right;
	padding:0;
	margin-top:10px;
	background:#000;
}

#details p {
	margin:0 0 10px 0;
}

#details h3 {
	margin:0;
}

#details ul {
	padding:0;
	margin:0 0 10px 0;
}

#details li {
	margin:0;
}

#deuxColonnes h3 {
	font-size:1em;
	padding:0 0 0 15px;
	background:url(../img/puceBarresJaune.gif) no-repeat 0% 50%;
}

a.aide {
	text-decoration:none;
	cursor:help;
	float:right;
	margin:-18px 145px 0 0;
}

a.aide img {
	border:none !important;
	margin : 0px !important;
	padding : 0px !important;
}

.chapo {
	font-size:1.2em;
	font-weight:bold;
	margin:0 0 10px 0;
}

.mosaique {
	width:100%;
	margin:0 0 30px 0;
	overflow:auto;
}

#rotator {
	position:relative;
	width:477px;
	height:188px;
	padding:2px;
	margin:0 0 20px 0;
	border:1px solid #fff;
	cursor:default;
	overflow:hidden;
}

#rotator img {
	position:absolute;
	display:none; /* On cache les images, c'est X fade qui prend le relai */
	margin:0px;
	padding:0;
	width:477px;
	border:0;
}

#non_rotator {
	width:486px;
	float:left;
}

#non_rotator img {
	margin-bottom:10px;
	padding:0;
	width:486px;
	border:0;
	border:1px solid #fff;
	
}

#rotator.ref {
	width:486px;
	float:left;
	margin-right:20px;
}


/* ###################### $8. Contenu contextuel ########################### */
#colGauche #newsletter h2 {
	color:#ef037f;
	padding:0 0 4px 0;
	border-bottom:1px solid #ef037f;
	background:none;
}

#colDroite #articles_atelier h2 {
	color:#FFFF00;
	padding:0 0 4px 0;
	border-bottom:1px solid #FFFF00;
	background:none;
}

#colDroite h2 {
	color:#01a0c7;
	padding:0 0 4px 0;
	border-bottom:1px solid #01a0c7;
	background:none;
}

#colDroite a {
	font-size:0.9em;
}

#colDroite a:hover {
	color:#01a0c7;
}

#docs li {
	padding:0;
	background:none;
}

#docs a {
	text-decoration:none;
	padding:0 0 0 20px;
	background:#000 url(../img/pictoDoc.gif) no-repeat 0% 0%;
}

#docs a:hover {
	background:#000 url(../img/pictoDoc_ov.gif) no-repeat 0% 0%;
}


/* ###################### $9. Contenu accueil ############################## */
#accueil h2 {
	padding:0 0 4px 0;
	background:none;
}

#accueil p {
	padding:0;
	margin:0 0 5px 0;
}

#accueil #cadreContenu {
	padding:0;
}

#newsletter input {
	font-size:0.90em;
}


#newsletter input.focus {
	width:85px !important;
}

#newsletter input.normal {
	width:85px !important;
}

#menuPratique input.focus {
	width:85px !important;
}

#menuPratique input.normal {
	width:85px !important;
}

#menuPratique input {
	font-size:100% !important;
}
.actualites img {
	float:left;
	padding:0;
	margin-top:1px;
	border:0;
}

.hidden {
	display:none;
}

.actu {
	margin:0 -20px 20px 0;
}

.actu p {
	margin:0 0 5px 0;
}

a.suite {
	display:block;
	width:6em;
	color:#999;
	text-decoration:none;
	padding:0 0 0 12px;
	float:right;
	clear:left;
}

.actu a.suite {
	background:#000 url(../img/pictoPlus_jaune.gif) no-repeat 0% 60%;
}

#atelier a.suite {
	background:#000 url(../img/pictoPlus_bleu.gif) no-repeat 0% 60%;
}

.actu a.suite:hover {
	color:#ff0;
}

.actu h3 {
	color:#999;
	padding:0;
	margin:0 0 5px 0;
	clear:none;
}

.icon-rss {
	float:right;
	margin-top:-35px;
}

#colPrincipal .icon-rss{
	margin-right:-20px;
}
.icon-rss a ,.icon-rss img {
	padding:0;
	margin: 0;
	border:0px;
}

#atelier ul {
	padding:0;
	margin:0;
}

#atelier li {
	width:100%;
	padding:0;
	margin:0 0 10px 0;
	overflow:auto;
}

#atelier h3 {
	color:#fff;
	font-size:1em;
	padding:0 0 0 15px;
	margin:0 0 5px 0;
	background:#000 url(../img/puceBarresBleu.gif) no-repeat 0% 50%;
}

#atelier p {
	margin:0;
}

.meta {
	color:#777;
}

.metaAtelier {
	color:#777;
	margin:-15px 0 20px 0;
}

.signature {
	text-align:right;
}



/* ###################### $10. Styles Tooltip Mootools ############################## */
.tool-tip {
	color:#333;
	padding:5px 10px 5px 10px;
	z-index: 13000;
	background:#fff;
	border:2px #ff0 solid;
}
 
.tool-title {
	font-weight:bold;
	font-size:1em;
}
 
.tool-text {
	font-size:0.9em;
}