/* Reset
------------------------------------------------------------ */
* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
a, img { outline: none; border:none;}
aside {font-size: 0.9em;}
p {line-height: normal;}

body {
	font-family: Frutiger, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-stretch: condensed;
	color: #FFF;
	}


/* Styles */

header a {
	color: #FFFFFF;
	font-size: 18px;
	text-decoration: none;
	}

section a {
	color: #FFFFFF;
	font-size: 18px;
	text-decoration: none;
	line-height: 1.3em;
	}
	
aside a {
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	}

/* Structure */

#wrapper {
	width: 96%;	
	min-height: 1000px;
	height: 100%;
	max-width: 1200px;
	margin: 0px auto;
	padding: 0px;
	background: #FFFFFF;
	} 

/* Header */

#top-header {
	width: 98%;
	clear: both;
	margin: 0px auto;
	padding: 1%;
	background: #CC0000;
	font-size: 32px;
	}
	
#top-header a {
	font-size: 32px;
	color: #FFFFFF;
	margin-right: 20px;
	text-decoration: none;
}

#top-header img {
	vertical-align: sub;
	margin-top: -3px;
	margin-bottom: 3px;
	}


	
	
/* Nav */
header nav {
	width: 98%;
	margin: 0px;
	padding: 1%; 
	background: #CC0000;
	font: 16px;
	text-align: right;
}
	
header nav li {
		display: inline;
		margin-left: 15px;
		}
		
/* Navigation
--------------------------------------------- */

nav {
	width: 98%;
	margin: 0px;
	padding: 1%; 
	background: #CC0000;
	font: 16px;
	float: right;
	text-align: right;
	}
	
/*
nav ul li {
	padding: 5px;
}

nav ul li a {
	text-decoration: none;
	color: #ffffff;
	font-size: 1.2em;
}

nav ul li a:hover {
	color: #000000;
	text-decoration: none;
}
*/

/* Headings
--------------------------------------------- */

h1 {
	font-size: 40px;
}

h2 {
	font-size: 30px;
	}

h3 {
	font-size: 24px;
	}

h4 {
	font-size: 20px;
}

h5 {
	font-size: 24px;
}

h6 {
	font-size: 48px;
}



/* Menu Déroulant
--------------------------------------------- */

#menu {
			display: block;
			width: 100%;
			float: right;
			margin: 0;
			padding: 0;
			background-color: #CC0000;
			}

#hor-menu{
			background-color: #CC0000;
			position: relative;
			display: block;
			float: right;
			margin-right: 5%;

			 }
 
/*Style for horizontal CSS menu*/
ul {
	list-style-type:none;
	position: absolute;
	margin:0px;
	padding-right:2%;
	font-size: 18px;
	 }
	 
li {
	display: inline-block;
	}

li a { 
	width: auto;
	min-width: 80px;
	display: block;
	text-decoration: none;
	height: 25px;
	padding: 2% 8%;
	text-align: left;
	vertical-align: middle;
	background: #CC0000;
	color: #FFFFFF;
	}
	
li:hover a {
	background: #CC0000;
	}

li:hover ul a {
	background: #CC0000;
	color: #FFFFFF;
	line-height: 35px;
	height: 35px;
	}
	
li:hover ul a:hover {
	background: darkred;
	color: #ffffff;
	}

li ul {
	display: none;
	}
	
li ul li {
	display: block;
	float: none;
	}
	
li ul li a {
	width: auto;
	min-width: 130px;
	padding: 0 10px;
	}

ul li a:hover + .sub-menu, .sub-menu:hover { 
	display: block;
	font-size: 14px;
}


#skipTo {
	display: none;
	}
	
#skipTo li {
	background: #333333;
		}

#skipTo a { 
	color: #eeeeee;
		}

/* Banner */			
#banner {
	width: 100%;
	background: #CC0000;
	}

#banner img {
	width: 100%;
	height: auto;
		}


		
#content {
		width: 100% -1px;
		margin: 0px auto;
		padding: 0px;
		background: #CCC;
		color: #333;
		border: solid 1px darkgrey;
	}
		


#content_title {
	font-size: 30px;
	letter-spacing: 1px;
	padding: 5% 2% 1% 2%;
	background-color: #CCCCCC;
	}

#content h1, h2, h3, h4, h5, h6 {
	margin: 10px 0px 5px 0px;
	}



#content_text {
	font-size: 16px;
	background-color: #CCCCCC;
	padding: 0% 2% 2% 2%;
	display: table;
	width: 96%;
	}

#content_list {
	font-size: 18px;
	line-height: 2em;
	padding: 0% 2% 2% 2%;
	}

#content_text a {
	font-size: 16px;
	color: darkred;
	}

#content_text hr {
	clear: both;
	margin: 20px 0px;
	}

#content_text img.left{
	float: left;
	margin : 0px 20px 10px 0px;
	}
	
#content_text img.right{
	float: right;
	margin : 0px 0px 10px 20px;
	}

	
#content_text li {
	list-style: none;
	
	}

#content_text_left {
	width : 49%;
	display: table-cell;
	float: left;
		border: solid 1px orange;
	}


#content_text_right{
	width : 49%;
	display: table-cell;
	float: right;
		border: solid 1px lime;
	}
	
#content_text .text_darkred {
	color: darkred;
	}

				
	aside {
		width: 20%; /* de base à 75%*/
		float: right;
		margin: 2%;
		background: #FFFFFF;
		}
	
		
	aside > img {
		width: 90%;
		height: auto;
		margin: 0%;
		}
	
	aside.right {
		width: 20%;
		float: right;
		clear: none;
		margin: 0%;
		}
		
	aside.left {
		width: 20%;
		float: left;
		clear: none;
		margin: 0%;
		}
		
	.div-block {
		display: block;
		margin : 0px auto;
		clear : both;
		}
			
/*	aside.large {
		width: 92%; /* de base à 75%*//*
		float: right;
		padding: 2%;
		background: #FFFFFF;
		}
*
	


/* Footer */			
#footer {
	clear: both;
	width: 96%;
	margin: 0px auto;
	padding: 2%;
	background: #CC0000;
	font-size: small;
	text-align: center;
	}


/* Galleria */


#galleria { height: 650px;
			}			

#galleria-player {
	background: #000;
	color:#999;
	width: 100%;
	height: 50px;
	margin: 0px auto;
	text-align: center;
		}
		
a#play  {
		width: 20px;
		heigth: 20px;
		margin: 10px 0px;		
		background-image: url(../scripts/galleria/player_img/play.png);
		}

a:hover#play  {
		background-image: url(../scripts/galleria/player_img/play-over.png);
		}

a#pause  {
		width: 20px;
		heigth: 20px;
		margin: 10px 0px;		
		background-image: url(../scripts/galleria/player_img/pause.png);
		}

a:hover#pause {
		background-image: url(../scripts/galleria/player_img/pause-over.png);
		}



/* Media Queries */
@media screen and (max-width : 720px){

	#skipTo {
		display: block;
		font-size: 0.8em;
		}
	
	#main/*, aside*/ {
		float: left;
		clear: left;
		margin: 0px; 
		width: 100%;
		}

aside {
	display: none;
	}

	#content  {
		width: 96% -1px;
		margin: 0px auto;
		clear: both;
		padding: 2% 2%;
		}
		
	header img {
	/*height: 100%;*/
	/*width: 90%;*/
	float: left;
	text-indent: -9999px;
	margin-top: 0px;
	margin-right: 10px;
	}


/*Media Query for Responsive Design*/

#menu {
			display: block;
			width: 100%;
			clear: both;
			margin:0px auto;
			padding: 0;
			background-color: #CC0000;
			}

#hor-menu{
			background-color: #CC0000;
			position: relative;
			display: block;
			clear: both;
			margin:0px auto;
 }
			 
ul {
	list-style-type:none;
	position: absolute;
	padding:0%;
	font-size: 18px;
	clear: both;
	 }
	 
li a { 
	display: block;
	text-decoration: none;
	height: 25px;
	padding: 2% 8%;
	text-align: center;
	vertical-align: middle;
	background: #CC0000;
	color: #FFFFFF;
	width: 100%;
	clear: both;
	margin:0px auto;
	}

ul {
	position: relative;
	display: block;
	width: 100%;
	clear: both;
	margin:0px auto;
}
li { margin-bottom: 1px; }
ul li, li a {
	width: 100%;
	clear: both;
	margin:0px auto;
	padding: 0%;}


ul li a:hover { 
	clear: both;
	margin:0px auto;}
 
li:hover ul a:hover {
	background: darkred;
	color: #ffffff;
	clear: both;
	margin:0px auto;
	}


#galleria {height:400px;}		

	
}