@charset "UTF-8";
/*
	Inpes sample css

	Template : .couleur .contenu
		- 8 couleurs relatives aux rubriques
		+ 2 structures de contenu
			- Texte à gauche et navigation à droite
			- Texte à droite et navigation à gauche

	Exemple pour la rubrique Le salon -> template : .c1.s1
		- Couleur orange
		- Texte à gauche et navigation à droite
*/


/* Import css */
	@import url(reset-min.css);
	@import url(fonts-min.css);
/* */
#htmlContent {
	background-color: #FFFFFF;
	border:1px solid #9498a4;
	width: 854px;
	margin-top: 50px;
	margin-left: 50px;
	padding: 20px;
	overflow: hidden;
	color: #2a2e32;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
}
/* no Flash */
#noflash {
	background-color: #FFFFFF;
	border:1px solid #9498a4;
	width: 854px;
	margin-top: 50px;
	margin-left: 50px;
	padding: 20px;
	overflow: hidden;
	color: #2a2e32;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
}
#noflash a {
	color:#a00;
	text-decoration: underline;
}
#noflash p.title {
	font-weight:bold;
	font-size: 13px;
	margin-top: 2px;
	margin-bottom: 7px;
}
#noflash p.message {
	line-height:18px;
}
#noflash img {
	float: left;
	margin-right: 30px;
}


/* Défaut */
	body{
		background:#B7CCF7 url('../img/background_loop.png') repeat-x;
		text-align:center;
		font:70% Verdana,Arial,sans-serif;
		color:#000
	}
	h1{
		float:left;
		font-size:2.5em;
		color:#fff
	}
	h1 strong span{color:#1b4fab}

	h2{
		font-weight:bold;
		margin-bottom:1.4em
	}
	
	h3{
		font-size:1.6em;
		font-weight:bold;
		color:#fff
	}
	
	h4{
		padding:.5em .2em .5em 1.5em;
		font-size:1.3em;
		font-weight:bold;
		color:#fff;
		text-align:center;
		background:url('../img/icon-01.gif') no-repeat scroll .6em .7em;
		font-size:1.3em;
		font-weight:bold;
		color:#fff
	}
	a{text-decoration:none}
	a:hover{text-decoration:underline}
	strong{font-weight:bold}


/* Squelette */
	#wrapper{
		width:960px;
		margin:0 auto;
		padding:10px 0 80px;
		text-align:left
	}
	#content{position:relative, height:610px}
	#footer{clear:both}

	
	/* Haut de page */
		/* Boutons */
			#heading{float:right;margin-top:1em}
			#heading li{display:inline}
			#heading li a{
				float:left;
				margin-left:.3em;
				padding:.5em 1.5em .7em;
				text-align:center;
				color:#fff;
				font-size:1.3em
			}

	
	/* Contenu de page */
		/* Menu */
			#menu{
				width:930px;
				float:left;
				margin-top:4.8em
			}
			#menu li{display:inline}
			#menu li a{
				float:left;
				margin-right:.3em;
				padding:.5em 1.5em .7em;
				text-align:center;
				color:#fff;
				font-size:1.3em
			}
		
		
		/* Sous-menu */
			#smenu{
				width:910px;
				float:left;
				padding:10px 0 10px 20px
			}
			#smenu li{float:left}
			#smenu li a{
				float:left;
				padding:.5em;
				font-size:1.1em;
				color:#fff
			}


		/* Contenu */
			#topics{float:left;margin-top:2em;background:#fff}

			/* Titre */
				#title{
					padding:.5em 1.3em;
					font-size:1.6em;
					font-weight:bold;
					color:#fff
				}

		
			/* Colonne de gauche */
				#text{
					width:685px;
					padding:30px 5px 20px 25px;
					float:left
				}
				#text dl{margin:1.4em 0}

				#textbox{
					margin-top:3em;
					padding:.8em 1.2em 2em
				}
				#textbox p{color:#fff}
				#textbox #list{padding-left:20px}
				#textbox #list li{list-style-type:disc;margin-top:1.2em;color:#fff}

			
			/* Colonne de droite */
				#aside{
					width:150px;
					padding:30px 25px 20px;
					float:right
				}
				#aside .unitlink{padding:.5em 0;}
				#aside a{color:#000}
			 
	
	/* Bas de page */
		#footer a{float:right;margin:1em 1.6em 0 0}

		#footer #navcnt{float:left;padding-left:3.6em;margin-top:0}
		#footer #navcnt li{float:left;padding-left:1em}
		#footer #navcnt li a{float:left;font-family:Arial,Verdana,sans-serif;font-size:1em;color:#000}
		#footer #navcnt li a.btn{
			padding:.4em 1em .4em;
			margin:.4em 0 0 0;
			text-align:center;
			color:#fff;
			font-size:1em;
			font-family:Verdana,Arial,sans-serif
		}		
	
/* Classes */
	/* Sélection */
	.selected{font-weight:bold;cursor:default}
	#menu li .selected{padding:.5em 1.3em .7em 1.2em}
	#heading li .selected{padding:0.5em 1.2em 0.7em 1.1em}
	#aside .unitlink li .selected{background:url('../img/icon-02.gif') no-repeat scroll 5px center}
	.selected:hover{text-decoration:none}
	

	/* 8 couleurs relatives aux rubriques */
		/* Liens du menu */
		.c1{background:#ee8e11}/* orange */
		.c2{background:#eeab2d}/* beige */
		.c3{background:#30a9ee}/* bleu */
		.c4{background:#d68df0}/* turquoise */
		.c5{background:#00b3b2}/* rose */
		.c6{background:#cd9946}/* marron */
		.c7{background:#b93aa4}/* violet */
		.c8{background:#ff7723}/* orange foncé */
		
		
		/* Titres et blocs */
		.c1 #smenu,.c1 #title,.c1 h4,.c1 h3,.c1 #textbox{background-color:#ee8e11}/* orange */
			.c1 #aside .unitlink{border-right:1px solid #ee8e11}
		.c2 #smenu,.c2 #title,.c2 h4,.c2 #textbox{background-color:#eeab2d}/* beige */	
			.c2 #aside .unitlink{border-right:1px solid #eeab2d}
		.c3 #smenu,.c3 #title,.c3 h4,.c3 #textbox{background-color:#30a9ee}/* bleu */
			.c3 #aside .unitlink{border-right:1px solid #30a9ee}
		.c4 #smenu,.c4 #title,.c4 h4,.c4 #textbox{background-color:#d68df0}/* turquoise */
			.c4 #aside .unitlink{border-right:1px solid #d68df0}
		.c5 #smenu,.c5 #title,.c5 h4,.c5 #textbox{background-color:#00b3b2}/* rose */
			.c5 #aside .unitlink{border-right:1px solid #00b3b2}
		.c6 #smenu,.c6 #title,.c6 h4,.c6 #textbox{background-color:#cd9946}/* marron */
			.c6 #aside .unitlink{border-right:1px solid #cd9946}
		.c7 #smenu,.c7 #title,.c7 h4,.c7 #textbox{background-color:#b93aa4}/* violet */
			.c7 #aside .unitlink{border-right:1px solid #b93aa4}
		.c8 #smenu,.c8 #title,.c8 h3,.c8 h4,.c8 #textbox{background-color:#ff7723}/* orange */
			.c8 #aside .unitlink{border-right:1px solid #ff7723}

			
	/* 2 structures */
		/* Texte à gauche et navigation à droite */
		.s1 #text{
			width:700px;
			padding:30px 5px 20px 25px;
			float:left
		}
		
		.s1 #aside{
			width:150px;
			float:right
		}	
		.s1 #aside h4{	
			font-weight:bold;
			color:#fff
		}
		.s1 #aside .unitlink{border:none}
		.s1 #aside .unitlink li{margin:.6em 0 0 .5em}

		/* Texte à droite et navigation à gauche */
		.s2 #text{
			width:570px;
			padding:30px 25px 20px 5px;
			float:right
		}
		
		.s2 #aside{
			width:279px;
			float:left
		}
		.s2 #aside h3{background-image:none;padding:.3em .8em;text-align:left;font-size:1em;color:#fff}
		.s2 #aside .unitlink li a{display:block;padding:.2em 1.8em}
		.s2 #aside p{margin-bottom:1em}