/* Test css file for maquette 480px 
	Marco Barnig
	29.3.2012 
	*/
	/* narrow */
		html, body {width:100%; border:0; margin:0; padding:0; font-family:sans-serif; font-size:1em; background-color:#90715c; color:#ffffff; text-align:center;}
		#overall {max-width:480px; margin:0 auto; text-align:left; background-color:#7d796d;}
		#wrapper { }
		/* Navigation */
		#nav {background-color:#90715c; }
		.run, .pause, .mute, .loud, #facebook, #breadcrumb {display:none;}
		#article {}
		#aside {display:none;}
		#header { }
		#fond {display:none; }
		#slideshow { }
		#slides {display:none;}
		#content { }
		.section {margin-bottom:1%;}
		.w10,.w2l,.w4l,.w6l,.w8l,.w2r,.w4r,.w6r,.w8r {width:100%; background-color:#90715c;}
		#footer {display:none; }
	
	/* links */
		a {color:#ffffff; text-decoration:underline;}
		a:visited {color:#daa520; }
		a:hover {color:#000000; text-decoration:underline;}
		a:active {color:#ffffff; text-decoration:none; }
				
	/* images */
		/* text-decoration:none to avoid link border in IE */
		#header img {width:100%; text-decoration:none; border:0;}
		#content img {max-width:96%; margin:2%;}
		
			
	/* narrow - medium */
	/* windows >= 320 pixels */
		@media screen and (min-width:320px) 
		{
		#nav ul {margin:0; padding:0; list-style-type:none;}
		#welcome, #castle, #history, #houses, #leisure, #reservation, #deutsch, #francais, #english {float:left; margin:5px;}
		#nav:after {content:"."; visibility:hidden; display:block; height:0; clear:both;}
		.w10,.w2l,.w4l,.w6l,.w8l,.w2r,.w4r,.w6r,.w8r {width:92%; margin:0 2% 1em 2%; border-radius:10px; border:5px solid #daa520;}
		#footer {display:block; clear:both; width:96%; margin:0 auto; border-radius:10px; border:5px solid #daa520; background-color:#90715c; color:#fff; font-size:.7em; text-align:center;}
		/* Utilities */
		.present {color:#000;}
		.picture {text-align:center;}
		/* text styles */
		p {padding:.5em; border:0; margin:0; }
		#content p:first-letter {color:#daa520; font-size:1.3em;}
		/* footer */
		#footer li {display:inline;}
		#footer li a {color:#daa520; text-decoration:none; padding:.5em;}
		#footer li a:hover {color:#000000; text-decoration:underline;}	
		}
		
		/* windows >= 480 pixels */
		@media screen and (min-width:480px) 
		{
		/* Navigation */
		.run, .pause, .mute, .loud {display:list-item; float:left; margin:5px;}
		#header {position:relative; width:100%; margin:0 0 2% 0;}
		#fond {position:relative; z-index:20; display:block; outline: none; border:0;}
		#slideshow {position:absolute; top:0; width:85.4%; z-index:10;}
		#slides {display:block; margin:0; padding:0; list-style:none; }
		/* li width necessary to assure responsive slides in Safari and Chrome */
		#slides li {width:100%;}
		}