/*********************************************************************
 ******************* TOP BOTTOM ARTICLE GALERIE **********************
 *********************************************************************/
 
@import url(galerie.css);


/*********************************************************************
 ****************************** GENERAL ******************************
 *********************************************************************/
 
body, html {
 padding: 0;
 margin: 0;
 font-family: "Arial", sans-serif;
 font-size: 12px;
 color:#666666
 
}
body {
	background:url(../img/bandeau.jpg) no-repeat top center;
}
img {
 border: none;
}

a {
 text-decoration: none;
 color: #1995EE;
}

*:focus {
 outline: none;
}

/* ------ MENU ACCORDEON ------ */

.acc_toggler {
 margin: 0;
 padding: 0;
 cursor: pointer;
 font-weight:normal
} 
.acc_toggler a {
	color:#2A5477;
	font:normal 14px/31px Arial;
	display:block;
	height:31px;
	padding-right:29px;
	text-align:right
}
.acc_toggler a:hover {
	background:url("../img/menu.png") no-repeat left -500px ;
	color:#fff
}
.acc_element {
background:url("../img/trait.png") no-repeat left bottom ;
}
.acc_element h3 {
 margin: 0;
 padding: 0;
 font-weight:normal
} 
 .acc_element h3 a {
	color:#fff;
	font:normal 12px/24px Arial;
	display:block;
	height:24px;
	padding-right:29px;
	text-align:right;
	background:url("../img/menus.png") no-repeat left -25px ;
}
.acc_element h3 a:last-child {
	margin-bottom:2px
}
.acc_element h3  a:hover {
	background-position:left top ;
	color:#072548
}
/* ------ ACTUALITES ------ */
 .actus {
 background:url(../img/actubg.png) no-repeat left top;
 width:189px;
 height:423px;
 
}
/* ------ GALERIES ------ */

div.galeries {
}

div.galerie {
 display: block;
 clear: both;
 margin: 10px 0 10px 0;
}

h2.galerie, h2.article, .center h2 {
 background: url('../img/titre_article.png') no-repeat top left;
 color: #fff;
 font-size: 14px;
 padding: 0 0 0 72px;
 width:465px;
 height:31px;
 font:normal 13px/31px Arial
}

div.photos {
 display: block;
}

div.photo {
 float: left;
 margin: 0 32px 8px 0;
 text-align: center;
 width: 147px;
 height: 98px;
}

img.photo {
 max-width: 147px;
 max-height: 98px;
}

div.photo div.photoName {
 padding: 6px 0;
}

/* ------ CONTACT ------ */

div.contact_frame {
}

div.contact_line {
 padding: 6px 6px 10px 6px;
}

div.contact_line div.contact_field_name {
 float: left;
 width: 150px;
 padding: 7px 0 0 0;
 font-weight: bold;
}

div.contact_line div.contact_field_value {
 margin-left: 160px;
}

span.contact_field_cross {
 color: #c00;
 font-weight: bold;
}

div.contact_line.highlight {
 
}

div.contact_line input , div.contact_line textarea {
 margin-top: 3px;
}

div.contact_submit {
 float: right;
 margin: 10px 8px 0 0;
}

div.contact_error {
 
 padding: 3px 6px;
 color: #a00;
 font-size: 11px;
 
 margin: 4px 0 0 0;
 font-weight: bold;

 
}

/* ------ STRUCTURE DE LA PAGE (DECOUPAGE) ------ */

h1 {
 text-indent: -9999px; 
 margin: 0;
 padding: 0;
}

h2.block {
 margin: 0px;
 padding: 3px 5px 1px 5px;
 background: #aaa;
 color: #000;
 font-size: 15px;
}

div.block {
 padding: 5px;
}

h3 {
 margin: 0;
 padding: 0;
 font-size: 14px;
}

#conteneur {
 width:100%;
 background:url(../img/bgTop.jpg) no-repeat top center
}

#page {
 width: 980px;
 margin: auto;
}

#header {
 min-height: 308px;
 position:relative
}
.banner {
	position:absolute;
	top:0px;
	left:0px;
}
#header  ul {
	list-style:none;
	margin:0 0 0 45px;
	padding:0
}
	#header  ul  li {
	display:inline;	
	}
		#header  ul  li a {
			color:#fff;
			font:13px/24px Arial;
			display:block;
			float:left;
			height:24px;
			padding:0 25px
		}
		#header  ul  li a.first {
			background:url("../img/sep.jpg") no-repeat right center
		}
		#header  ul  li a:hover{
			color:#ff0000;
			
		}
		.icon {
			position:absolute;
			left:325px;
			top:5px
		}
		.icon a {
			display:block;
			float:left;
			text-indent:-9999px;
			background:url("../img/spritelien.png") no-repeat;
			height:12px;
			margin-right:15px
		}
		.icon a.home {
			width:11px;			
			background-position:0 0;			
		}
		.icon a.home:hover {	
			background-position:0 -12px 
		}
		.icon a.recommande {
			width:13px;			
			background-position:-28px 0
		}
		.icon a.recommande:hover {	
			background-position:-28px -12px 
		}
		.icon a.ajout {
			width:14px;			
			background-position:-56px 0
		}
		.icon a.ajout:hover {	
			background-position:-56px -12px 
		}
		.icon a.plan {
			width:11px;			
			background-position:-85px 0
		}
		.icon a.plan:hover {	
			background-position:-85px -12px 
		}
		
.logo {
			display:block;
			text-indent:-9999px;
			width:320px;
			height:130px;
			position:absolute;
			left:323px;
			top:79px
		}
/* newsletter */
.news {
	height:24px;
	position:absolute;
	right:0px
}
	.news h2 {
		font:normal 13px/24px Arial;
		color:#fff;
		display:block;
		float:left;
		background:url("../img/news.png") no-repeat left center;
		margin:0;
		padding:0 0 0 20px
	}
#newsletter {
	display:block;
	float:left;
	margin:3px 0 0 10px
}
	#newsletter input {
		display:block;
		float:left;
		background:url("../img/inputnews.png") no-repeat;
		height:18px;
		border:none		
	}
	#newsletter input[type="text"] {
		background-position:left top;
		width:161px;
		padding:0 3px;
		color:#fff
	}
	#newsletter input[type="submit"] {
		background-position:right top;
		width:30px;`
		cursor:pointer;
	}

/* Navigation */

.navigation 	{
	background:url(../img/menu.png) no-repeat top left;
	width:208px;
	min-height:300px
}
#body {
 margin:0;
}

#body #wrapper {
 height: 100%;
 float: right; 
 width:772px
}

#body #left {
 width: 208px;
 float: left;
 min-height: 300px;
}

#body #right {
 float: right;
 width: 200px;
 min-height: 300px;
}

#body .center {
 padding:30px 0 0 7px;
 margin: 0;
 width: 537px; /* 980(taille page) - 200(colone gauche) - 200(colone droite) - 20(margin gauche ET droite) */
 float: left;
 min-height: 300px;
}

#arbo {
 padding: 5px 5px 3px 5px;
 background: #aaa;
 display:none
}

#footer {
 background: url(../img/footer.jpg) no-repeat;
  min-height: 158px;
  position:relative
}
#footer strong {
	font:bold 16px Arial;
	display:block;
	position:absolute;
	top:50px;
	left:29px;
	color:#fff
	
}
#footer p {
	font:bold 14px Arial;
	display:block;
	position:absolute;
	top:73px;
	left:139px;
	color:#fff;
	margin:0;
	padding:0
	
}
#footer img.logo2 {
	display:block;
	position:absolute;
	top:31px;
	left:136px;
	margin:0;
	padding:0	
}
#footer .bottomMenu {
overflow:hidden;
position:absolute;
bottom:35px;
}
	#footer  .bottomMenu a {
	display:block;
	float:left;
	color:#999;
	font:normal 11px/13px Arial;
	padding:0 7px;
	background:url(../img/trait2.jpg) no-repeat right center;
	height:13px
	}
	#footer  .bottomMenu a:hover {
		color:#49A5F0;
	}
	#footer  .bottomMenu span {
	display:block;
	float:left;
	color:#999;
	font:normal 11px/13px Arial;
	padding:0 7px;
	}
.copy {
color:#49A5F0;
font:11px Arial;
position:absolute;
right:3px;
top:12px
}
.copy a img {
margin:10px 0 0 41px;
display:block
}

.valid {
background:url("../img/btn.jpg") no-repeat scroll 0 0 transparent;
border:medium none;
color:#FFFFFF;
cursor:pointer;
display:block;
font:11px/18px Arial;
height:18px;
margin-right:58px;
text-align:center;
width:168px;
}
.msg_erreur {
color:#AA0000;
font-size:11px;
font-weight:bold;
margin:4px 0 0;
padding:3px 6px 3px 0;
}

.bouton_suivant {
background:url("../img/savoir.png") no-repeat scroll left top transparent;
color:#FFFFFF;
display:block;
float:right;
font:12px/18px Arial;
height:18px;
margin:15px 13px 0 0;
text-align:center;
text-decoration:none;
width:96px;
}