/*
Interface Responsive Design créée par Mirobolus pour  Dominique Pérotin
File: Media Queries CSS
*/

@-ms-viewport{width:device-width;} /* http://msdn.microsoft.com/en-gb/library/ie/hh869615%28v=vs.85%29.aspx */

/* 240 + 320px */

@media screen and (min-width:180px) and (max-width:360px) {
	#header, #topnav, #intro, #container, #footer, #copyright{max-width:95%; margin:0 auto;}
	
	#topnav ul, #header #header3 {display:none;}
	form input[type="submit"]{margin-bottom:10px;}
	
	.one_half, .one_half.nogutter, 
	.one_third, .two_third, .one_third.nogutter, .two_third.nogutter, 
	.one_quarter, .two_quarter, .three_quarter, .one_quarter.nogutter, .two_quarter.nogutter, .three_quarter.nogutter, 
	.one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_fifth.nogutter, .two_fifth.nogutter, .three_fifth.nogutter, .four_fifth.nogutter, 
	.one_sixth, .two_sixth, .three_sixth, .four_sixth, .five_sixth, .one_sixth.nogutter, .two_sixth.nogutter, .three_sixth.nogutter, .four_sixth.nogutter, .five_sixth.nogutter,
	#header #header1, #header #header2 {display:block; float:none; width:auto; margin:0 0 5% 0; padding:0;}

	#header #header2 h1, #header #header2 h2 {text-align:center; padding:0; margin:0;}
	#header #header1, #header #header2 {margin-top:20px; text-align:center; padding:0;}
	#header #header2 {margin:0; padding:0;}

	#erreur{padding:30px 0 0 0;}
	#erreur h1{margin:0 0 20px 0; font-size:7em;}
	#erreur h2{margin:0 0 20px 0; font-size:2em;}
	
	#footer div{margin-bottom:5%;}

	#copyright p{text-align:center;}
	#copyright p:first-child{margin-bottom:8px;}
}

/* 480px et 768px */

@media screen and (min-width:361px) and (max-width:800px) {
	#header, #topnav, #intro, #container, #footer, #copyright{max-width:95%; margin:0 auto;}
	
	#topnav ul, #header #header3 {display:none;}
	form input[type="submit"]{margin-bottom:10px;}

	.one_half, .one_half.nogutter, 
	.one_third, .two_third, .one_third.nogutter, .two_third.nogutter, 
	.one_quarter, .two_quarter, .three_quarter, .one_quarter.nogutter, .two_quarter.nogutter, .three_quarter.nogutter, 
	.one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_fifth.nogutter, .two_fifth.nogutter, .three_fifth.nogutter, .four_fifth.nogutter, 
	.one_sixth, .two_sixth, .three_sixth, .four_sixth, .five_sixth, .one_sixth.nogutter, .two_sixth.nogutter, .three_sixth.nogutter, .four_sixth.nogutter, .five_sixth.nogutter,
	#header #header1, #header #header2 {display:block; float:none; width:auto; margin:0 0 5% 0; padding:0;}

	#header #header2 h1, #header #header2 h2 {text-align:center; padding:0; margin:0;}
	#header #header1, #header #header2 {margin-top:20px; text-align:center; padding:0;}
	#header #header2 {margin:0; padding:0;}
	
	#erreur{padding:30px 0 0 0;}
	#erreur h1{margin:0 0 20px 0; font-size:7em;}
	#erreur h2{margin:0 0 20px 0; font-size:2em;}
	
	#copyright p{text-align:center;}
	#copyright p:first-child{margin-bottom:8px;}
}

/* 960px */

@media screen and (min-width:801px) {
	#header, #topnav, #intro, #container, #footer, #copyright{max-width:95%; margin:0 auto;}
	#topnav {padding-top:20px;}
	#topnav li a{padding:10px 0;}
	#listeHublots a { display:inline-block;  margin:0 0 0 5px; padding:0 0 0 5px;} 
}

/* 1028px */

@media screen and (min-width:1028px) {
	#header, #topnav, #intro, #container, #footer, #copyright{max-width:95%; margin:0 auto;}
	#topnav {padding-top:20px;}
	#topnav li a{padding:10px 0;}
}

/* 1200px */

@media screen and (min-width:1200px) {
	#header, #topnav, #intro, #container, #footer, #copyright, .stretched{max-width:1200px; margin:0 auto;}
}

/* Hide The Jquery Generated Navigation Form from 801px upwards */

@media screen and (min-width:801px) and (max-width:10000px) {
	#topnav form{display:none;}
}