@charset "utf-8";
/* CSS Document */
html, body{font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#333; margin:0; padding:0; }
html{ background:#FFF ; height:100px; }
#global{background:#E9E6DF url(fete-des-jumeaux/fond-site-x.jpg) repeat-x top; width:100%;}

h1{color:#0A5052; font-size:18px; margin:5px 0;}
h3{ color:#9FB6CC; font-size:24px;}
h2{ margin:5px 0;}
a h2{ margin:5px 0; display:inline;}
h4{ color:#0A2C59; font-size:14px; border-bottom:#0A2C59 dotted 1px; padding:5px; margin:7px 0;}
a{ text-decoration:none;}

p{margin:5px 0;}
/*HEADER----------------------------------------*/
#header{ width:1000px; height:275px; position:relative; margin:0 auto; background:url(fete-des-jumeaux/fond-header.jpg);}
#accueil{ text-indent:-9999px; position:absolute; width:650px; height:250px; left:50px;}
/*MENU*/
#menu{ margin:0 auto; padding:10px 0 0 0; list-style:none; width:950px; position:relative; height:31px; }
#menu li{ margin:0; padding:0; float:left; }
#menu a{font-size:20px; color:#FFF; padding:5px 12px; margin:0; text-decoration:none; }
#menu a:hover{ color: #999; }
#menu-right{ margin:0; position:absolute; right:70px; top:30px;}
#menu-right a{color:#0A5052; font-size:18px;}
#menu-right a:hover{color:#01888F;}
.bord-bs{ border-bottom : #01888F dotted 3px; padding-bottom:10px; margin-bottom:10px;}
.bord-dgt{ border-right : #01888F dotted 3px; border-left : #01888F dotted 3px; padding:0 20px; margin:0 20px;}
/*MENU FIN*/
/*HEADER FIN----------------------------------------*/
#map { float:left; width:650px; height:450px; border:#FFF solid 5px;}
#acces{ margin:0; padding:0; list-style:none;}
#acces li{ margin:10px 0;}
/*CONTENU----------------------------------------*/

#contenu{}
.fond-accueil{ background:url(fete-des-jumeaux/fond-accueil.jpg) no-repeat top center; width:965px;  padding:300px 0 20px 35px; margin:0 auto;  position:relative;}
.fond-accueil div{ width:280px; float:left; text-align:justify; }
.inter{padding:30px 40px 20px 40px; width:920px; margin:0 auto;  position:relative;}
.inter p{ margin:10px 0;}
.text{float:left; width:650px;}
.prog{ float: left; width:440px; margin:10px;}
.bord{ border:#FFF solid 5px; margin:5px 0;}
/*CONTENU FIN----------------------------------------*/

/*FOOTER----------------------------------------*/
#footer{text-align:center; color:#999; background: #FFF url(fete-des-jumeaux/fond-footer-x.jpg) repeat-x top; padding:20px 0; font-size:11px;}
#footer a{ color:#999; }
/*FOOTER FIN----------------------------------------*/

/*CONTACT----------------------------------------*/
#form-contact {	padding:0; list-style:none; margin:0; overflow:auto; float:left; width:650px;}
#form-contact li {margin:0 0 7px 0; padding:0; float:left;}
#form-contact li label {	width:110px; display: inline-block; text-align:right; margin-right:5px; float:left;}
#form-contact li input[type="text"] {	width:170px; }
#form-contact li h1 { width:650px; margin:20px 0 0 0; font-size:18px; border-bottom:#CCC dotted 1px;}
#form-contact li input.grand_input { width:478px;}
#form-contact li div {	width:478px; }
#message { width:490px; height:100px;}
#adresse{ float:left; width:200px; margin:0 0 0 30px;}
/*CONTACT FIN----------------------------------------*/



/* define background image for the expose mask */
#mask {
	background-position:50% -200px;
}

/* general settings for both scrollables */
.items {	
	width:20000em;	
	position:absolute;
	clear:both;
}

/* next/prev buttons */
.navi {
	background-image: url(fete-des-jumeaux/hori_large.png);
	width:30px;
	height:30px;
	float:left;
	margin-top:55px;
}

.navi:hover  		{ background-position:-30px 0; }
.navi:active  		{ background-position:-60px 0; }
.next 				{ background-position: 0 -30px; clear:right; }
.next:hover 		{ background-position:-30px -30px; }
.next:active 		{ background-position:-60px -30px; } 







.navi.disabled {
	visibility:hidden;		
}


/* the thumbnail scrollable */
#thumbnails {
	position:relative;
	overflow:hidden;	 	
	float:left;	
	width: 602px;	
	height:130px;
	margin:15px;
}

#thumbnails .items img {
	padding:5px;
	float:left;		
}


/* overlay styling */
#box {
	background-image: url(js/overlay/white.png);
	width:656px;
	height:524px;
	position:absolute;
	display:none;
}

/* 
	image is contained on the overlay background image. 
	the closing button is thus just a transparent container. 
*/
#box .close {
	position:absolute; right:5px; top:5px;
	cursor:pointer;
	height:35px;
	width:35px;
	background-image:url(js/overlay/close.png)
}

/* overlay scrollable */
#images {	
	position:absolute;
	overflow:hidden;
	margin:50px;
	width:557px;
	height:400px;	
}

#images img {	
	/*width:557px;
	height:400px;*/	
}
/* single image */
#images .items div {
	float:left;
	width:557px;
	height:400px;
	margin-right:30px;
	margin:auto;
}

	

/* override button style on the overlay */
#box .navi {
	position:absolute;
	bottom:33px;
	left:50px;
}

#box .next {
	left:580px;
}