body
{
	margin: 0;
	padding: 0;
	background-image: url(../dhpics/fond.png);
	background-repeat: repeat-x;
	background-color: #b9b9b9;
}

/*
** Répétitions
*/
	/* Largeur 1100 */
	.conteneur, #header
	{ width: 1100px; }
	
	/* Largeur 800 */
	.conteneur-texte, #titre
	{ width: 800px; }
	
	/* Margin auto */
	.conteneur, .conteneur-texte, .contenu, .contenu-flash
	{ margin: auto; }
	
	/* Float right */
	#menu, .contenu-droite, .ecriture-gauche
	{ float: right; }
	
	/* Float left */
	.contenu-gauche, .ecriture-droite
	{ float: left; }
	
	/* Overflow hidden */
	.contenu, .contenu-gauche, .contenu-droite, .conteneur, .conteneur-texte
	{ overflow: hidden; }
/*
** Divs
*/
	#header
	{
		background-image: url(../dhpics/hechter-accueil.png);
		height: 634px;
	}
	
		.conteneur-texte
		{
			width: 800px;
		}
		
			#titre
			{
				padding-top: 8px;
				height: 22px;
				margin-bottom: 20px;
			}
			
			.contenu
			{
				width: 800px;
			}
			
			.contenu-flash
			{
				width: 800px;
				padding-left: 10px;
			}
			
			.contenu-gauche
			{
				width: 260px;
				margin-right: 10px;
			}
				.ecriture-gauche
				{
					width: 250px;
				}
				
			.contenu-droite
			{
				width: 510px;
			}
				.ecriture-droite
				{
					width: 490px;
				}			
	
	#menu
	{
		width: 650px;
		text-align: left;
		padding-top: 75px;
		padding-right: 100px;
	}	
	
/*
** Styles
*/
	/* Sizes */
	.s08, .contenu
	{ font-size: 0.8em; }
	
	.s10
	{ font-size: 1.2em; }
	
	/* Font */
	.treb 
	{ font-family: trebuchet ms, verdana, arial, sans-serif; }
	
	.georgia, .contenu
	{ font-family: georgia, trebuchet ms, arial, sans-serif; }
	
	.arial, #titre
	{ font-family: arial, sans-serif; }
	
	/* Color */
	.blanc
	{ color: #fff; }
	
	.noir, .contenu, #titre
	{ color: #000; }
	
	/* Divers */
	.bolder
	{ font-weight: bolder; }
	
	.maj
	{ text-transform: uppercase; }
	
	.ecrire-milieu
	{
		width: 100%;
		text-align: center;
	}
	
/*
** Lava
*/
	#lava {
		/* you must set it to relative, so that you can use absolute position for children elements */
		position:relative; 
		text-align:left; 
		width:650px; 
		height:40px;
	}
	
	#lava a
	{
		color: #000;
		text-decoration: none;
	}
	
	#lava ul {
		/* remove the list style and spaces*/
		margin:0; 
		padding:0; 
		list-style:none; 
		display:inline;
				
		/* position absolute so that z-index can be defined */
		position:absolute; 
		
		/* center the menu, depend on the width of you menu*/
		top:0; 
		
		/* should be higher than #box */
		z-index:100;

	}
	
	#lava ul li {
		
		/* give some spaces between the list items */
		margin:4px 15px; 
		
		/* display the list item in single row */
		float:left;
	}
	
	#lava #box {
		
		/* position absolute so that z-index can be defined and able to move this item using javascript */
		position:absolute; 
		left:0; 
		top:0; 
		
		/* should be lower than the list menu */
		z-index:50; 

		/* image of the right rounded corner */
		background:url(../dhpics/tail.png) no-repeat right center; 
		height:26px;
		/* add padding 8px so that the tail would appear */
		padding-right:12px;
		
		/* self-adjust negative margin to make sure the box display in the center of the item */
		margin-left:-12px;
	}
	
	#lava #box .head {
		/* image of the left rounded corner */
		background:url(../dhpics/head.png) no-repeat 0 0; 
		height:26px;

		/* self-adjust left padding to make sure the box display in the center of the item */
		padding-left:12px;
	}