/* RESET */

html, body {height: 50%;}
* html #global{height: 100%;}
#global {min-height: 100%; margin-bottom:23px;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
a:hover, a:active, a:focus { outline: none; }
.clear {clear:both;}
	
/* STRUCTURE --------------------------------------------------------------------------------------------------------------------*/

	body		{ background: #660000; margin:auto; width:100%;    }
	#global		{ position: relative; min-height: 669px; height: auto !important; height: 669px; width: 100%; margin: auto; background: url(/interface/global.jpg) no-repeat top center;  }
	#header		{ position: relative; z-index: 100; width: 966px; height: 250px; margin: auto;  }
	#nav		{
	width: 966px;
	position: absolute;
	top: 200px;
	left: 3px;
}
	#center		{ width: 100%; background: url(/interface/center.jpg) repeat-y top center; margin:auto; }
	#footer 	{ clear: both;  width:100%; height: 278px; position: relative; background: url(/interface/footer.jpg) no-repeat top center; margin: auto; }
		
/* H1 ----------------------------------------------------------------------------------------------------------------------------*/	
	
	#header #headerElements #logoH1 {}

	#header #headerElements h1 a	{ text-indent:-9999px; overflow:hidden; display:block; width: 966px; height: 250px; background: url(/interface/h1.jpg) no-repeat top left;}
	#header #headerElements h1		{ position:relative; }

/* REGLAGES CONTENT  -------------------------------------------------------------------------------------------------------------*/

	#content 	{ position: relative; min-height: 419px; height:auto !important; height: 419px; width: 100%; margin:auto; text-align: justify; padding-bottom: 5px; font-size: 0.9em; background: url(/interface/content.jpg) no-repeat top center; }
		  	
	#contenu { width:966px; margin:auto;}
		 
	#col-gauche		{ width:260px; border-right:#F63 solid 2px; float:left; margin-top:10px; padding-left:50px;}
	#texte			{ width:580px;  float:right; padding-top:10px; padding-left: 15px; padding-right: 40px; color:#320000; }	
	
	#col-diapo		{ width:400px; float:left; margin-top:10px; margin-left:50px; margin-right:20px; }
	#col-droite		{ width:435px; float:left; margin-top:10px; padding-left:20px; color:#320000; border-left:#F63 solid 2px;}
	
	#texte-large2	{ width:500px; float:left; padding-top:10px; padding-left: 40px; padding-right: 40px; color:#320000; }	
	#texte-large3	{ width:600px; float:left; padding-top:10px; margin-left: 190px;  color:#320000; }	
	#plan-acces 	{ width:890px;  padding-top:10px; margin-left: 50px;  color:#320000; }	
	
	#galerie-gauche			{ width:150px; float:left;  margin-left:50px;}
		#galerie-gauche	img		{ margin:10px 5px 100px 0; border:#F63 solid 1px; }
		#galerie-gauche	img:hover	{	opacity:0.8; filter:alpha(opacity=80); }
	#galerie-droite			{ width:150px; float:left; }
		#galerie-droite	img		{ margin:10px 5px 100px 0; border:#F63 solid 1px; }
		#galerie-droite	img:hover	{	opacity:0.8; filter:alpha(opacity=80); }


/* NAVIGATION  ------------------------------------------------------------------------------------*/

	#nav ul   		{ padding-top:8px; margin-left:70px; }
	#nav li   		{ float: left; text-align: center; }
	#nav li a 		{ color: #660000; float: left; padding-left: 35px; padding-right: 35px; font-size: 18px; }	
	#nav li a:hover { color: #F63; text-decoration: none;}	
	
	.sep 			{ color:#F63; margin-top:5px;}

	
	/* BOUTONS ACTIFS ------------------------------------------------------------------------------*/
	#accueil #nav li.accueil a,
	#domaine #nav li.domaine a,
	#vins #nav li.vins a,
	#contact #nav li.contact a,
	#plan #nav li.plan a { text-decoration: none; color:#A56B6A; }

	#nav li.plan a	{ border-right-style:none; }
	
/* NAVIGATION FOOTER ----------------------------------------------------------------------------------------------------------------*/

	#footer #footerElements 			{ width: 900px; margin: auto; padding-top: 18px; text-align:center; font-size:0.9em;
										  height:auto !important; min-height: 230px; height: 230px; position: relative; } 

/* AUTRES -------------------------------------------------------------------------------------------------------------------------*/
	.left 	{ float: left;  margin:0 20px 10px 0;}
	.right 	{ float: right; margin:0 0 10px 20px; }
	
	.clear 	{ clear: both; }


		 		
/* EFFET POP IMAGES -------------------------------------------------------------------------------------------------------------------------*/

.vignette {	position:relative; width:300px; height:200px; display:block; z-index:1;	} 
.vignette img {	position:relative; width:300px; height:200px; border:1px outset #FFF;} 
.vignette:hover img { position:absolute; width:600px; height:400px; top: 0px; left:-50%; border:2px outset #FFF; z-index:2;}
.vignette:hover { z-index:2; } 

.vignette2 { position:relative; width:100px; height:100px; display:block; z-index:1; margin:0 10px 10px 10px; 	} 
.vignette2 img { position:relative; width:100px; height:100px; border:1px outset #FFF;} 
.vignette2:hover img { position:absolute; width:260px; height:260px; top: -60px; right:-2px; border:2px outset #FFF; z-index:2;}
.vignette2:hover { z-index:2; }