/* CSS Document */

* { margin:0; padding:0; }

a img {border:0;}

body {
	text-align: center;
	font: 0.75em Verdana, Arial, Helvetica, sans-serif;
	color:#663300;
	background-color: #333;
	}

#page {
	position: relative;
	width: 760px;
	margin: 20px auto 0 auto ;
	text-align: left;
	background: url(images/footer.gif) bottom no-repeat #FFEBCD;
	}
	
#head { 
	height:18em;
	background: url(images/header.jpg) no-repeat #FFEBCD;
	}

#global {
	margin-top:20px;
	clear:both;
	}

#main {
	width: 500px;
	margin: 0px 20px 0 220px;
	padding-bottom: 0em;
	} 	
	
#footer, #footer p {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 760px;
	height: 50px;
	margin-top: 10px;
	clear:both;
	color: #666666;
	text-align: center;
	}


.cadre {
margin: 0 0 2em 0;
padding:0 1em;
	background-color:#FFEFD5;
	border: 1px solid #FFFFFF;
	}

#colg { 
float:left; 
display:inline;  
width: 200px; 
margin: 0 0 0 0px; 
}


#colg ul li{
list-style-type: none;
margin:0 0 1em 1em;

}

#colg h2 {
font-size:1em;
margin: 0 0 1em 1em;
}



/*****************               ***************************/

#evitement {
	margin-left:1em;
	}

#evitement li {
	list-style-type: none;
	display: inline;
	color:#99CDFF;
	color:#FFF;
	line-height:1.5em;
	}

#evitement li a {
	color:#FFF;
	text-decoration:none;
	}	

#evitement li a:hover{
	color:#000;
	text-decoration:underline;
	}

/******************            *****************************/


#mentions p { 
	text-align:center;
	margin: 1em auto;
	color: #FFEBCD;
	}


#player1 {
	background: #FFEBCD;
	}


#video { 
	border: 1px solid #000;
	width:450px;
	background: #000;
	margin-bottom:2em;
	}

/*****************   TYPO *********************************/

h1 {
	position: absolute;
	margin: 140px 0 0 0;
	width: 720px;
	font: bold italic 2em Verdana, Arial, Helvetica, sans-serif;
	color: #663300;;
	text-align: right;
	text-decoration:underline;
	}
	
h2 {   
	font-size: 1.5em; 
	margin: 1em 0 1em 0;
	color: #1A508F;
	border-bottom: 2px solid 
	}

h2 a, h3 a {
text-decoration:none;
}

h3 {
	margin: 0 0 1em 0;
	}

p { 
	line-height:1.5em ;
	margin: 0 0 1em 0;
	}


a { color:#1A508F; }

/****************            ******************************/


	
a.lien_ext:after {
	content: "\0000a0[\2197]";
	}

dl { 
	margin: 0 0 1em 0;
	}
	
dt { 
	border-bottom: 1px solid #663300; 
	margin: 2em 0 1em 0; 
font-weight:bold ;

	}
	
dd {
display: list-item;
	margin: 0 0 0 2em; 
list-style-type:disc; 
	}
	
#main ul { 
	margin:0 0 1em 2em; 
	}



a.info {
	position: relative;
	text-decoration: none;
	color: black;
	border-bottom: 1px gray dotted;
	}
	
a.info span {
	display: none;
	}
	
a.info:hover {
	background: none; /* correction d'un bug IE */
	z-index: 500;
	cursor : help;
	}
	
a.info:hover span {
	display: block;
	position: absolute;
	top: -6em;
	left:2em;
	width:200px;
	background: #FFEBCD;
	border: 1px solid #000;
	color: black;
	padding: 1em;
	}


kbd {
	font-size : 1.2em;
	padding: 0px 1px;
	border: 1px solid #E2F576;
	border-right: 1px solid #9BB50C;
	border-bottom: 1px solid #9BB50C;
	background: #FFFFC4;
}
	
/* ################      MENUS      ################ */
	
ul#menu { 
	padding-left: 100px;
	margin: 10px 0 0 40px;
	height: 6.4em;
	background: url("images/road-book.gif") no-repeat 0px 20px;
	}

#menu li{ 
	display: inline;
	float: left;
	width: 8.6em;
	height: 6.4em;
	}

#menu li a { 
	display: block; 
	width:100%;
	height:100%;
	width: 8.6em;
	height: 6.4em;
	font: bold 1em Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
	color: #663300;
	text-decoration:none;
	background: url("images/btn.gif") no-repeat center center;
	}
	
#menu a:hover {  
	display: block;
	width: 8.6em;
	height: 6.4em;
	color: #663300;
	text-decoration:underline;
	background: url("images/btn_on.gif") no-repeat center center;
	} 

#menu_video a img{
	border: 2px solid #996633 ;
}


#colg #menu_video {
margin-left:0;
width:200px;
}

#colg #menu_video li, #menu_video li{
	display:inline;
	float:left;
	margin: 20px 0 20px 40px;
	width:100px;
	height:120px;
	text-align:center;
	}

#menu_video {
margin-left:220px;
width:500px;
}

#main #menu_video {
margin-left:0;
}


/* ################# FORMULAIRE ################## */

#formulaire { 
	width: 336px; 
	margin-left: 320px;
	}

fieldset { 
	width: 336px;
	margin: 20px 0 0 0;	
	padding: 1em; 
	border-color: #3366FF ;
	}
	
legend {
	font: bold 1em Verdana, Arial, Helvetica, sans-serif;
	}
	
label { 
	display: inline;
	float: left;
	width: 100px;
	margin-top: 5px;
	} 

input {
	width: 160px;
	font: 1em Verdana, Arial, Helvetica, sans-serif;
	margin-top: 6px;
	}

select {
	width: 164px;
	font: 1em Verdana, Arial, Helvetica, sans-serif;
	margin-top: 6px;
	}
	
textarea { 
	margin: 10px 0 10px 0 ; 
	width: 330px; 
	font: 1em Verdana, Arial, Helvetica, sans-serif; 
	}

#envoimail { 
	margin-left: 0px; 
	width: 330px; 
	background-color:#6699CC; 
	}

#formgood { 
	width: 336px;
	height: 300px;
	margin: 20px 0 0 380px;	
	}


/* ################# GALERIE ################## */

div#galerie {
	width: 710px ;
	height:360px;
	background: #eed ;
	border: 1px solid #dcb ;
	padding: 10px ;
	margin: 15px 10px ;
	text-align:center;
	}

ul#galerie_mini {
	position:absolute;
	left:20px;
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
	width:250px;
	}

ul#galerie_mini li {
	float: left ;
	width: 48px;  /* bug ie mac */
	height:48px;
	}

ul#galerie_mini li a{
	display:block;
	width: 40px;
	height:40px;  
	}

ul#galerie_mini li a img {
	border-top: 1px solid #fff ;
	border-left: 1px solid #fff ;
	border-bottom: 1px solid #000 ;
	border-right: 1px solid #000 ;
	width:40px;
	height:40px;
	}

ul#galerie_mini li a:hover img {
	border-top: 2px solid #000 ;
	border-left: 2px solid #000 ;
	border-bottom: 1px solid #fff ;
	border-right: 1px solid #fff ;

	}

dl#photo {
	margin-left:250px;
	}

dl#photo dt {
	font: italic 2.2em Verdana, Arial, Helvetica, sans-serif;
	margin: 0 0 0.2em 0;
	}

dl#photo dd#desc {
	margin: 0 ;
	background-color: none;
	}

dl#photo dd {
	margin: 0 ;
	background-color: #000;
list-style-type:none;
	}

dl#photo img {  
	margin:20px;
	border: 1px solid #fff;
	}
		

/* ################# ######## ################## */

#colg p { text-align:left;}
#colg1 { float:left;  width: 220px; height: 300px; background-image: url("images/accueil.jpg"); }
#colg2 { float:left;  width: 220px; width: 220px; height: 300px; background-image: url("images/raid.jpg"); }
#colg3 { float:left;  width: 220px; width: 220px; height: 300px; background-image: url("images/extreme.jpg"); }
#colg4 { float:left;  width: 220px; width: 220px; height: 300px; background-image: url("images/assistance.jpg"); }
#colg5 { float:left;  width: 220px; width: 220px; height: 300px; background-image: url("images/contact.jpg"); }