@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;

}
	/*	==========================================  *\
	 	0. INITIALISATION ========================  
	\*	==========================================  */


body{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
	background:	url(images/html5-css3-tag.png)no-repeat, url(images/fond-navigateur.png) repeat-x;
	background-color:#385b5e; } 
		
body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, form{ 
margin:0; 
padding:0;}


	/*	==========================================  *\
	 	1. MISE EN PAGE ==========================  
	\*	==========================================  */
img.html5-css3-tag{
	position:absolute;
	left:0px;
	top:0px;
}

header{
	height:120px; 
	width:760px; 
	margin:0px auto 10px auto; 
	background-color:#a9c13d; 
	box-shadow: 0px 3px 15px 2px #000 inset, 0px 0px 10px #fff;
}

nav{
	width:100%; 
	background:#425267; 
	height:34px;
	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 */
}

main{
	width:760px; 
	margin:40px auto 10px auto;
	}
	
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;
	}

aside{
	width:212px; 
	background-color:rgba(0, 0, 0, 0.5); 
	min-height:350px; 
	float:right; 
	margin:0 0 0 0;
	border-radius: 0px 0px 140px 0px;
	}

div#contenu div#col-left{
	width:310px;
	float:left;
	margin:10px;
	min-height:250px;
}

div#contenu section{
	width:153px;
	float:right;
	margin:10px;
	min-height:350px;
}
div#footer{
	clear:both;
	color:#fff;
	font-size:11px;
}

.clear{clear:both;}
			
			
	/*	==========================================  *\
	 	2. MISE EN FORME =========================  
	\*	==========================================  */


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

header h1{
	font-size:24px; 
	color:#000; 
	font-weight:normal; 
	line-height:25px; 
	padding:40px 0px 0 0px; 
	margin:0px 20px 0px 30px;
}
header h1 span{
	font-size:44px;
	color:#fff;
}
header h2{
	font-size:14px; 
	color:#433832;
	margin:0px 5px 0px 20px;
	padding:25px 15px; 
	width:177px;
	height:70px; 
	float:right;
	background-color:#839430;
	letter-spacing:2px;
	text-align:left;
	line-height:15px;
}
header h2 span{
	font-style:italic;
	font-weight:normal;
}
	
	
/*	2.2 Section (colonne 1) ------------------ 
	------------------------------------------ */

div#col-left article{
	padding:17px 0 7px 0;
	border-bottom:1px solid #ccc; 
	border-top:1px solid #fff; 
}
div#col-left article:first-child{
	padding-top:0px;
	border-top:0px;
}
div#col-left article:last-child{
	border-bottom:0px;
}
div#col-left article h1{
	font-size:18px;
	margin:0 0 15px 0;
}
div#col-left article p{
	font-size:11px;
	margin-bottom:7px;
}

figure{
	width:225px;
	margin:20px auto;
	border-top:5px solid #fff;
	border-left:5px solid #fff;
	border-right:5px solid #fff;
	border-bottom:5px solid #fff;
	overflow:hidden;
	box-shadow: 0px 5px 5px #bbb;
	-o-transform:rotate(-5deg);
	-moz-transform:rotate(-5deg);
	-webkit-transform:rotate(-5deg);
	transform:rotate(-5deg);
}

div.figure img{
	display:block;
}

figure figcaption{
	font-size:9px;
	background-color:#FFF;
	text-align:center;
	color:#666;
}

			
/*	2.3 Section (colonne 2) ------------------ 
	------------------------------------------ */

section form{
	font-size:11px;
	font-weight:bold;
	color:#365533;
}
section h3{
	font-size:18px;
	line-height:18px;
	font-weight:normal;
	color:#433832;
}
section h4{
	font-size:13px; 
	font-weight:bold;
	color:#365533;
	margin:10px 0 0 0;
	border-bottom:1px solid #5a8156;
}
section label{
	margin:10px 0px 0px 0px; 
	display:block;
}
section input{
	font-size:11px; 
	padding:3px 4px; 
	border-color:#5a8156;
	border-style:solid;
	border-width:1px 1px 0 0;
	color:#222;
	border-radius: 8px;
}

section input type="number"}{width:10px;}
section input type="date"}{width:80px;}
section input type="ntime"}{width:70px;}
section input type="color"}{width:95%;}
section input type="url"}{width:95%;}
section input type="email"}{width:95%;}
section input type="text"}{width:95%;}
section input type="submit"}{
	font-size:11px;
	font-weight:bold;
	color:#fff;  
	background-color:#433832; 
	border-width:1px; 
	border-style:solid; 
	border-color:#433832;
	cursor:pointer; 
	margin:20px 0px;
	padding:0px 15px; 
	display:block; 
	height:26px;
	line-height:26px;
}

input#nbheuresslide{
	vertical-align:middle;
}
	
			
/*	2.4 Aside (colonne 3) ------------------ 
	------------------------------------------ */
		
aside h3{
	font-size:14px; 
	padding:10px 10px;  
	background:#2b313d; 
	color:#fff;
}

aside h4{
	font-size:12px;
	padding:10px 5px;
	color:#fff;
	
}

aside div.article{
	border:0;
}

aside div.section{
	margin:10px 5px 140px 5px;
}

aside audio{
	width:180px;
}

aside video{			/* Remplacer la video */
	margin:50px 0 50px 0px;
	position:relative;
	left:-40px;
	-o-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	transform:rotate(90deg);
}

aside ul{
	list-style:none;
	font-size:11px;
	margin:0px 2px;
}

aside ul li{
	color:#fff;
	height:22px;
	line-height:22px;
	padding:0px 5px;
	background-color:#000;
}
	

aside ul li:nth-child(odd){   /* (2n+1) (-n+3) http://www.w3schools.com/cssref/sel_nth-child.asp  ou   css-tricks.com */ 
	background-color:#444;
	opacity:0.5;
}
		
		
	
	/*	==========================================  *\
	 	3. MENU ==================================  
	\*	==========================================  */	
					
nav ul {
	font-family: 'grupporegular';
	list-style:none; 
	margin:0 auto; 
	width:760px;
}

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;
}