@font-face {
    font-family: 'grupporegular';
    src: url('fonts/gruppo-regular-webfont.eot');
    src: url('fonts/gruppo-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/gruppo-regular-webfont.woff') format('woff'),
         url('fonts/gruppo-regular-webfont.ttf') format('truetype'),
         url('fonts/gruppo-regular-webfont.svg#grupporegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

 
body{
	background: #112628; /* Old browsers */
	background: -moz-linear-gradient(top,  #112628 0%, #0385b5 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#112628), color-stop(100%,#0385b5)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #112628 0%,#0385b5 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #112628 0%,#0385b5 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #112628 0%,#0385b5 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #112628 0%,#0385b5 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#112628', endColorstr='#0385b5',GradientType=0 ); /* IE6-9 */	
}

body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, form{ 
margin:0; padding:0;
}

/*img.html5-css3-tag{
	position:absolute;
	left:0px;
	top:0px;
}*/

header{
	height:145px; 
	width:960px; 
	margin:0px auto 10px auto; 
	background-color:112628; 
	box-shadow: 0px 3px 15px 2px #000 inset, 0px 5px 10px #000;
}

nav{
	width: 100%;
	background: #425267;
	height: 34px;
	margin-bottom: 90px;
	background: #aebcbf; /* Old browsers */
	background: #606c88; /* Old browsers */
	background: -moz-linear-gradient(top, #606c88 0%, #3f4c6b 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#606c88), color-stop(100%,#3f4c6b)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #606c88 0%,#3f4c6b 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #606c88 0%,#3f4c6b 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #606c88 0%,#3f4c6b 100%); /* IE10+ */
	background: linear-gradient(to bottom, #606c88 0%,#3f4c6b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
}

div .contenu{
	width: 517px;
	float: left;
	background-color: #fff;
	background: url(images/fond-contenu.png) repeat-y -10px 0px;
	border: 10px solid #fff;
	background-color: #fff;
	}
	
.contenu h3{
	color: #FFFFFF;
	margin-left: 370px;
	margin-top:50px;
	font-size: 24px;
	}
	
/*A PROPOS*/
div#apropos{width:760px; min-height:250px; border:1px solid #ccc; padding:50px; margin:10px auto; text-align:left; box-shadow: 1px 1px 6px #aaa; background-color:#fff;}

/*Z-INDEX*/
div#zindex {width:760px; min-height:350px; border:1px solid #ccc; padding:50px; margin:10px auto; text-align:left; box-shadow: 1px 1px 6px #aaa; background-color:#fff;}

div#bloc_1{
	width:50px; 
	background:#FF0000;
	height:50px;
	border-right:50px solid #fff;
	border-top:50px solid #fff;
	box-shadow:0 0 4px #000;
	position:absolute;
	z-index:2;
	top:555px;
	left:685px;
}
div#bloc_2{
	width:50px; 
	background:#FF0000;
	height:50px;
	border-left:50px solid #fff;
	border-bottom:50px solid #fff;
	box-shadow:0 0 4px #000;
	position:absolute;
	z-index:1;
	top:505px;
	left:735px;
}
div#bloc_3{
	width:200px; 
	background: #FF0000;
	height:200px;
	position:absolute;
	top:480px;
	left:660px;
	}
	
	
/*OVERFLOW & FLOAT*/	
div#overflow {
	width:270px;
	border:1px solid #ccc;
	padding:50px;
	margin:10px auto;
	text-align:left;
	box-shadow: 1px 1px 6px #aaa;
	background-color:#fff;
	overflow:auto;}


div#float {
	width:270px;
	border:1px solid #ccc;
	padding:50px;
	margin:10px auto;
	text-align:left;
	box-shadow: 1px 1px 6px #aaa;
	background-color:#fff;
}

div#colonne_1{
	width:90px; 
	background: #FF0000;
	height:150px;
	float:left;
}
div#colonne_2{
	width:90px; 
	background:#FF6600;
	height:150px;
	float:left;
}
div#colonne_3{
	width:90px; 
	background:#FFA500;
	height:150px;
	float:left;
}

div#colonne_4{
	width:90px; 
	background:#000000;
	height:150px;
	float:left;
}
div#colonne_5{
	width:90px; 
	background:#38A33D;
	height:150px;
	float:left;
}
div#colonne_6{
	width:90px; 
	background: #0200FF;
	height:150px;
	float:left;
}
.clear{
	clear:both;
}


/*INLIGNE BLOCK*/
div#inligneblock {
	width:270px; 
	border:1px solid #ccc; 
	padding:50px; 
	margin:10px auto; 
	text-align:left; 
	box-shadow: 1px 1px 6px #aaa; 
	background-color:#fff; 
	text-align:center;}

div.colonne{
    width:90px; 
    background: #FFA500;
    min-height:50px;
    margin:0 0 5px 0;
    padding:5px;
	display:inline-block;
	vertical-align:top;
}

div.col_rouge{
    background: #FF0000;
}
div.col_orange{
    background:#FF6600;
}
div.col_jaune{
    background:#FFA500;
}
	


/*CENTRAGE NAVIGATEUR*/
/*div#centrepage {
	border:1px solid #ccc; 
	text-align:left; 
	box-shadow: 1px 1px 6px #aaa; 
	background-color:#fff;
	padding:50px; 
	width:300px; 
	height:300px; 
	position:absolute;
	left:50%;
	margin-left:-200px;
	top:50%;
	margin-top:-200px;
}*/




/*POSITIONNEMENT*/
div#position{width:270px; min-height:300px; border:1px solid #ccc; padding:50px; margin:10px auto; text-align:left; box-shadow: 1px 1px 6px #aaa; background-color:#fff;}	

div#couleurs{margin-top:50px;}
	
div#bloc_rouge{
	width:90px; 
	background: #FF0000;
	height:90px;
	position:relative;
}
div#bloc_orange{
	width:90px; 
	background:#FF6600;
	height:90px;
	position:relative;
}
div#bloc_jaune{
	width:90px; 
	background:#FFA500;
	height:90px;
	position:relative;
}
div.bulle{
	width:52px;
	height:32px;
	background: url(images/bulle.png) no-repeat;
	padding:4px;
	position:absolute;
	top:-25px;
	right:-10px;
}
	


/*ALIGNEMENT*/	
div#alignement {width:270px; min-height:300px; border:1px solid #ccc; padding:50px; margin:10px auto; text-align:left; box-shadow: 1px 1px 6px #aaa; background-color:#fff;}	

img.align_text{
	width:50px;
	height:50px;
	vertical-align:middle;
}
	
img.colle{
	width:50px;
	height:50px;
	float:left; /*on ajoute un float*/
}

.clear{
	clear:both;
}
	
	
	
	
/*COLOR PICKER*/	
div#picker {width:270px; border:1px solid #ccc; padding:50px; margin:10px auto; text-align:left; box-shadow: 1px 1px 6px #aaa; background-color:#fff;}
	
div#colorSelectorDiv{
	position:relative;
}
	
div#colorPicker{
	display:none; /*pour faire disparaitre le colorPicker*/
	background:#FFFFFF;
	box-shadow: 1px 1px 6px #aaa;
	position:absolute;
	top:20px;
	left:20px;
	padding:1px;
}
	
img#imageColour{
	background:#000;
	float:right;
	border:1px solid #fff;
}
	
img.sampleColour{
	float:left;
	border:1px solid #fff;
}

img.sampleColour:hover{
	margin:0;
	border:1px solid #000;
	opacity:0.5;
}
	
div.clear{
	clear:both;
}
	
	
	
		
/*MENU DEROULANT*/
div#container{
	width:1120px; min-height:200px; margin:50px auto;}
ul#navigation{
	list-style:none; background:#6b7aa0; height:64px; border-bottom:1px solid #525E7C}
ul#navigation li{
	position:relative; float:left;}
ul#navigation li a{
	color:#000; text-decoration:none; height:64px; display:block; font-size:16px; line-height:64px; padding:0px 40px; border-right:1px solid #525E7C; border-left:1px solid #525E7C; color:#FFFFFF;}
ul#navigation li a:hover{
	background-color:#525E7C;}
		
ul#navigation li ul.sousmenu{
	list-style:none; display:none; background:#6b7aa0; width:180px; position:absolute; top:64px; border-width:0 1px 1px 1px; border-color:#525E7C; border-style:solid;}
ul#navigation li ul.sousmenu li a{
	background:none; height:40px; width:160px; display:block; font-size:14px; line-height:40px; color:#333; text-decoration:none; padding:0px 10px; border-width:0 0 1px 0; border-style:solid; border-color:#525E7C; color:#FFFFFF;}
ul#navigation li ul.sousmenu li a:hover{
	background:#525E7C;}





/*ACCORDEON*/
div#accordeon{
	width:320px; min-height:300px; margin:40px auto;}
dl{
	width:320px; display:block;}
dt{
	border:1px solid #ddd; padding:0 10px; height:40px; line-height:40px; position:relative; top:2px; color:#ECECEC; border-radius:10px 10px 0 0;cursor:pointer;}
dt.active{
	background-color: #888; color:#fff;}
dd{
	padding:10px; margin:0; font-size:16px; border:1px solid #ddd; border-width:0px 1px 1px 1px; color:#FFFFFF;}






/*SLIDESHOW*/	
body{font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:12px;}
#slideshow{width:600px; padding:50px; min-height:300px; margin:10px auto;}

#sliderzone{width:700px;}
div#slider{width:600px;	height:343px; overflow:hidden; display:inline-block; position:relative; box-shadow:0px 0px 5px #444;}
/*#slider ul{margin:0; padding:0; list-style:none; width:750px;}*/
#slider li{margin:0; padding:0; display:block; float:left; position:relative;}
#slider li span{display:block; width:100%; text-align:center; position:absolute; bottom:0px; height:50px; line-height:50px; background:rgba(255, 255, 255, 0.6);}
img.arrow{display:inline-block; margin:0 0 160px 0; cursor:pointer;}

.clear{clear:both;}
h1{margin:0; padding:0;}






/*TRANSFORMATION Hover/Transformation*/
div#transformation{
	width:448px; min-height:448px;
	margin-top: 60px;margin-right: auto;margin-left: auto;margin-bottom: 30px;}
div#transformation img{
	height:50px; width:50px; box-shadow:1px 1px 4px #bbb; padding:1px; border:1px solid #fff; margin:3px;}



/*GALERIE Clic/Suppression*/
div#galerie{
	width: 448px;
	min-height: 448px;
	margin-top: 60px;margin-right: auto;margin-left: auto;margin-bottom: 30px;}
div#galerie img{
	height:50px; width:50px; box-shadow:1px 1px 4px #bbb; padding:1px; border:1px solid #fff; margin:3px;}
div#galerie span{
	display:block; border:1px solid #ddd; font-family:Arial, Helvetica, sans-serif; padding:10px; margin:10px; cursor:pointer; text-align:center; color:#FFFFFF;font-weight: 900;}
		
		
	

		
		
		
		

main{
	width: 50%;
	margin-top: 150px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 10px;
	padding:10px;
	background-color: #11282B;
	}

div#footer{
	clear:both;
	color:#fff;
	font-size:11px;
}

div#footer a{
	font-weight: bold;
	text-decoration: none;
	color: #FFFFFF;
	float:right;
}

.clear{clear:both;}





	/*	==========================================  *\
	 	2. MISE EN FORME =========================  
	\*	==========================================  */


/*	2.1 Header (entete) ----------------------  
	------------------------------------------ */

header h1{
	font-size: 34px;
	color: #0385B5;
	font-weight: normal;
	line-height: 40px;
	padding: 40px 0px 0 0px;
	margin: 0px 20px 0px 30px;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.9);
}

header h1 a{
	text-decoration: none;	
}

header h1 span{
	font-size:44px;
	color:#fff;
	text-shadow:2px 2px 2px rgba(0,0,0,0.9);
}
header h2{
	font-size: 14px;
	color: #FFFFFF;
	margin: 5px;
	padding: 25px 15px;
	width: 277px;
	height: 89px;
	float: right;
	background-color: #102426;
	box-shadow:0px 0px 10px rgba(0,0,0,0.7);
	letter-spacing: 2px;
	text-align: center;
	line-height: 18px;
}
header h2 span{
	font-style: italic;
	font-weight: normal;
	font-size: 12px;
}


#apropos .entree{
	width:300px;
	padding-left:50px;
	float:left;
}

#apropos h2{
	margin-top:50px;
	margin-bottom:20px;
}



	/*	==========================================  *\
	 	3. MENU ==================================  
	\*	==========================================  */	
					
nav ul {
	font-family: 'grupporegular';
	list-style:none; 
	margin:0 auto; 
	width:960px;
}

nav ul li {
	float:left;	
}  

nav ul li a {
	display:block; 
	padding:0px 20px; 
	font-size:16px; 
	font-weight:bold; 
	line-height:34px; 
	height:34px; 
	text-align:center; 
	text-decoration:none; 
	color:#afc1b1;
	background:#425267;
	transition:color 1s background 2s
	
}

nav ul li a:link {
	color:#afc1b1;
	background:#425267;
	background: #606c88; /* Old browsers */
background: -moz-linear-gradient(top, #606c88 0%, #3f4c6b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#606c88), color-stop(100%,#3f4c6b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #606c88 0%,#3f4c6b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #606c88 0%,#3f4c6b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #606c88 0%,#3f4c6b 100%); /* IE10+ */
background: linear-gradient(to bottom, #606c88 0%,#3f4c6b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */ /* http://www.colorzilla.com/gradient-editor/ */
} 
  
nav ul li a:hover {
	color:#fff; 
	background:#67768f;
} 
  
nav ul li a:hover {
	color:#fff; 
	background:#67768f;
} 
 
nav ul li.selected a {
	color:#fff; 
	background:#67768f;
}  
	
nav ul li.last{ 
	float:right;
}

nav ul li form input{ 
	font-size:11px; 
	padding:4px 8px; 
	margin-top:5px; 
	width:162px; 
	background-color:#d9dce2;
	border-color:#111;
	border-style:solid;
	border-width:1px 1px 0 0;
	color:#222;
	border-radius:8px;
}

nav ul li form span{
	color:#afc1b1; 
	cursor:pointer;
	margin:0 8px;
}


div#overflow h1, div#overflow p, div#float h1, div#float p, div#inligneblock h1, div#inligneblock p, div#zindex h1, div#zindex p, div#position h1, div#position p, div#alignement h1, div#alignement p, div#picker h1, div#picker p{
	margin-bottom:20px;
}