@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Lobster);
@import url(http://fonts.googleapis.com/css?family=Pacifico);

@media screen and (min-width:1000px){


header
	{
	width: 800px;
	height: 100px;
	background-color:;
	margin-left: auto;
	margin-right: auto;
	font-family: 'Pacifico', cursive;
	text-align: center;
	font-size: 60px;
	background-image:;
	background-repeat: no-repeat;
	color:#CCC;	
	}

nav
	{
		width: 800px;
		height: 20px;
		background-color:;
		margin-top: 10px;
		margin-left: auto;
		margin-right: auto;
		text-align:center;
	}

nav li
	{
		float: left;					
	}
	
nav a {
		display:block;
		width: 199px;
		height:20px;
		border-right:solid 1px #000; text-decoration: none;
	  }

nav a:link { background-image: url(sprite.png);}
nav a:hover { background-position: -255; background-repeat: no-repeat;}
nav a:visited {}
nav a:active { background-position: -510; background-repeat: no-repeat;}

#page_index nav #nav_index a:link, #page_news nav #nav_news a:link, 
#page_portfolio nav #nav_portfolio a:link, #page_about nav #nav_about a:link, 
#page_contact nav #nav_contact a:link{
	background-position: -765px;
	background-repeat: no-repeat;}
	
	
#page_index nav #nav_index a:active, #page_news nav #nav_news a:active, 
#page_portfolio nav #nav_portfolio a:active, #page_about nav #nav_about a:active, 
#page_contact nav #nav_contact a:active{
	background-position: -510px;
	background-repeat: no-repeat;}
	
#page_index nav #nav_index a:hover, #page_news nav #nav_news a:hover, 
#page_portfolio nav #nav_portfolio a:hover, #page_about nav #nav_about a:hover, 
#page_contact nav #nav_contact a:hover{
	background-position:-255px;
	background-repeat: no-repeat;}




 
#container
	{
		width: 800px;
		height: px;
		
		margin-top:px;
		margin-left: auto;
		margin-right: auto;
		position: relative;

	}


section
	{
	width: 600px;
	padding:;
	/*background-color: #909;*/
	background-image: url(landscape.jpg);
	margin-top: 10px;
	margin-left:;
	margin-right: px;
	font-size: 15px;
	font-family: 'Lobster', cursive;
	padding: 5px;
	/*background-image:url(section.png);
	background-repeat: no-repeat;*/
	color: #CCC;
	
	

	}


aside
	{
		width: 150px;
		height: auto;
		/*background-color: #ccc;*/
		margin-top:;
		margin-left: px;
		margin-right:;
		float: right;
		/*background-color:#c81773;*/
		color:#CCC;
		font-size:24px;
		/*font-family: 'Pacifico', cursive;*/
		padding:5px;
		margin-left:750px;

	}

footer
	{
		width: 800px;
		height: 30px;
		background-color:;
		margin-top: 10px;
		margin-left: auto;
		margin-right: auto;
		text-align:center;
		font-family: 'Pacifico', cursive;
		/*background-image:url(header.png);*/
		font-size:14px;
		color:#CCC;
	
		
		
	}
aside{
	text-align:center;
}
aside p{margin-bottom:10px;margin-left:110px;}
.social{
	margin-bottom:10px;
	background:#66f;border-radius:20px;
	color:#fff;text-align:center;
}

aside p{margin-bottom:10px;}
aside{
	width:150px;
	height:auto;
	position: absolute;right:105px;top:140px; 
	margin-left:-750px;
	margin-top:-150px;
}

.social{width:100px;height:60px;margin-right:auto;padding-top:40px;margin-left:110px;}
}


@media screen and (max-width:999px){

body
	{
		margin: 0px;
	}
	

header
{width:400px; height: 100px;
	background-color:;
	margin-left: auto;
	margin-right: auto;
	font-family: 'Pacifico', cursive;
	text-align: center;
	font-size: 60px;
	background-image:;
	background-position:center;
	background-repeat: no-repeat;
	color:#CCC;				
}
nav{width:400px; height: 20px;
		background-color:;
		margin-top: 2px;
		margin-left: auto;
		margin-right: auto;
		text-align:center;}
nav a{width:400px;height:20px; display:block;
	  border-top:solid 1px #000; text-decoration: none;}
nav a:link { background-image:url(link.png);}
nav a:hover { background-image:url(hover.png); background-repeat: no-repeat;}
nav a:visited { background-image:url(visited.png); background-repeat:no-repeat;}
nav a:active { background-image:url(active.png); background-repeat: no-repeat;}
footer{width:400px;
		height: 30px;
		background-color:;
		margin-top: 2px;
		margin-left: auto;
		margin-right: auto;
		text-align:center;
		font-family: 'Pacifico', cursive;
		/*background-image:url(header.png);*/
		font-size:14px;
		color:#CCC;}
#container{width:400px; 
		height: auto;
		margin-left: auto;
		margin-right: auto;
		
	}
section{width:390px;
		margin-top:60px;
		background-color:;
		font-family: 'Lobster', cursive;
		padding: 5px;
		color: #CCC;
		position: relative;
		font-size: 15px;
	}
	
aside{
	text-align:center;
}
aside p{margin-bottom:10px;}
.social{
	margin-bottom:10px;
	background:#66f;border-radius:20px;
	color:#fff;text-align:center;
}

	
aside{width:400px;height:140px;}
.social{width:100px;height:60px;float:left;margin-left:25px;padding-top:40px;}





#page_index nav #nav_index a:link, #page_news nav #nav_news a:link, 
#page_portfolio nav #nav_portfolio a:link, #page_about nav #nav_about a:link, 
#page_contact nav #nav_contact a:link{
		background-image:url(link.png);
		background-repeat: no-repeat;}
	
	
#page_index nav #nav_index a:active, #page_news nav #nav_news a:active, 
#page_portfolio nav #nav_portfolio a:active, #page_about nav #nav_about a:active, 
#page_contact nav #nav_contact a:active{
		background-image:url(active.png);
		background-repeat: no-repeat;}
	
#page_index nav #nav_index a:hover, #page_news nav #nav_news a:hover, 
#page_portfolio nav #nav_portfolio a:hover, #page_about nav #nav_about a:hover, 
#page_contact nav #nav_contact a:hover{
		background-image:url(hover.png);
		background-repeat: no-repeat;}

}
                                      
@media screen and (max-device-width:480px){
	
	
body
	{
		margin: 0px;
		background-color:;
	}
	

header{width:300px;height: 100px;
	background-color: #ccc;
	margin-left: auto;
	margin-right: auto;
	font-family: 'Pacifico', cursive;
	text-align: center;
	font-size: 60px;
	background-image: url(header.png);
	background-position:center;
	background-repeat: no-repeat;
	color:#CCC;				}
nav{width:300px; height:81px;
		background-color: #ccc;
		margin-top: 2px;
		margin-left: auto;
		margin-right: auto;
		text-align:center;}
nav a{	width:150px;height:30px;padding-top:10px;margin-bottom:1px;font-size:18px;
		display:block;border-top:solid 1px #000; text-decoration: none;}	


nav a:link { background-image:url(link.png);}
nav a:hover { background-image:url(hover.png); background-repeat: no-repeat;}
nav a:visited { background-image:url(visited.png); background-repeat:no-repeat;}
nav a:active { background-image:url(active.png); background-repeat: no-repeat;}
footer{width:300px;
		height: 30px;
		background-color: #909;
		margin-top: 2px;
		margin-left: auto;
		margin-right: auto;
		text-align:center;
		font-family: 'Pacifico', cursive;
		/*background-image:url(header.png);*/
		font-size:14px;
		color:#CCC;}
#container{width:300px; 
		height: auto;
		margin-left: auto;
		margin-right: auto;}
section{width:290px;font-size:16px;
		background-color: #909;
		margin-top: -75px;
		color: #FFF;	
		font-family: 'Lobster', cursive;
		padding: 5px;
		color: #CCC;}
	
aside{
	text-align:center;
}
aside p{margin-bottom:10px;}
.social{
	margin-bottom:10px;
	background:#66f;border-radius:20px;
	color:#fff;text-align:center;
}
	
aside{width:300px;height:140px;}
.social{width:90px;height:60px;float:left;margin-left:7px;padding-top:30px;}
}
/****************************************************************/
/* règles CSS pour iphone en mode paysage  */
@media screen and (max-device-width:480px) and (orientation:landscape){

body
	{
		margin: 0px;
		background-color: #909;
	}
	
header{width:500px; height: 100px;
	background-color: #ccc;
	margin-left: auto;
	margin-right: auto;
	font-family: 'Pacifico', cursive;
	text-align: center;
	font-size: 60px;
	background-image: url(header.png);
	background-position:center;
	background-repeat: no-repeat;
	color:#CCC;				}
nav{width:500px; height:40px;
		background-color: #ccc;
		margin-top: 2px;
		margin-left: auto;
		margin-right: auto;
		text-align:center;}
nav a{	width:150px;height:30px;padding-top:10px;margin-bottom:1px;font-size:18px;
		display:block;border-top:solid 1px #000; text-decoration: none;}	


nav a:link { background-image:url(link.png);}
nav a:hover { background-image:url(hover.png); background-repeat: no-repeat;}
nav a:visited { background-image:url(visited.png); background-repeat:no-repeat;}
nav a:active { background-image:url(active.png); background-repeat: no-repeat;}
footer{width:500px
		height: 30px;
		background-color: #909;
		margin-top: 2px;
		margin-left: auto;
		margin-right: auto;
		text-align:center;
		font-family: 'Pacifico', cursive;
		/*background-image:url(header.png);*/
		font-size:14px;
		color:#CCC;}
#container{width:500px;
		height: auto;
		margin-left: auto;
		margin-right: auto;}
section{width:490px;font-size:16px;
		background-color: #909;
		margin-top: -75px;
		color: #FFF;	
		font-family: 'Lobster', cursive;
		padding: 5px;
		color: #CCC;}
	
aside{
	text-align:center;
}
aside p{margin-bottom:10px;}
.social{
	margin-bottom:10px;
	background:#66f;border-radius:20px;
	color:#fff;text-align:center;
}
	
aside{width:300px;height:140px;}
.social{width:90px;height:60px;float:left;margin-left:7px;padding-top:30px;}








nav a{width:125px;height:30px;padding-top:10px;margin-bottom:0;font-size:16px;}	
aside{width:500px;height:140px;}
.social{width:100px;height:60px;float:left;margin-left:50px;padding-top:40px;}








}



#qrcode{
	display:none; 
	width:50%;
}
#qrcode img{float:left;margin-right:5pt;}



@media print{
	body{font-family:georgia,serif;font-size:12pt;}
	header{height:30pt;}
	p{margin-bottom:14pt;}
	nav, aside{display:none;}
	section{width:100%;}
	#container{width:70%;margin-left:20%;}
	#qrcode{display:block;font-size:10pt;}
	footer{
		width:70%;margin-left:20%;margin-top:20pt;
		border-top:solid 1px #000;
	}
}



html{
	background-image: url(landscape2.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
	
	height: 100%;
	width: 100%;
	
	}
	
	
	body
	{
		margin: 0px;
		/*background-color: #909;*/
		
	height: 100%;
	width: 100%;

	}
	
	#autre{
	height: 100%;
	width: 100%;
	box-shadow: 0 0 300px #000 inset;
	position:fixed;
	top:0;
	z-index:-10;
	}
	
	
	
	
	#toto{
		width: 800px;
		height: 500px;
		margin-top: 100px;
		margin-left: 100px;
		
		box-shadow: 0 2px 9px rgba(0,0,0,7);
		border-radius: 15px;
		
		background-image: url(landscape2.jpg);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		background-attachment: fixed;
		}


#container, section{		
font-size: 15px;
}

footer{
	
font-size: 15px;
}

header, nav, footer, #container, section, nav a, .social, aside{transition:all 3s ease-in-out 0s;}