/* Test css file for maquette iPad 
	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:768px; 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; }
						
	/* 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; margin: 0 1em 0 1em}
		#footer li a {color:#daa520; text-decoration:none padding:.5em;}
		
		}
		
	/* 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%;}
		}
	/* large */
	/* windows >= 680 pixels */
		@media screen and (min-width:680px) 
		{
		#wrapper {float:left; min-height:980px; width:100%; }
		/* Navigation */
		#nav {position:relative; display:block; width:768px; height:40px; background-color:#90715c; padding-bottom:8px;}
		#nav span {display:none;}
		#welcome, #castle, #history, #houses, #leisure, #reservation, #deutsch, #francais, #english {display:block; width:32px; height:32px;}
		#breadcrumb {display:block; width:220px; height:26px; overflow:hidden; font-size:.8em; margin: 14px 0 0 8px;}
		.run, .pause, .loud, .mute {display:block; width:32px; height:32px; }
		.run a, .pause a, .loud a, .mute a {display:block; width:32px; height:32px;}
		#facebook {display:block; width:90px; height:20px; padding:0; }
		#welcome {position:absolute; top:4px; left:4px;}
		#castle {position:absolute; top:4px; left:40px;}
		#history {position:absolute; top:4px; left:76px;}
		#houses {position:absolute; top:4px; left:112px;}
		#leisure {position:absolute; top:4px; left:148px;}
		#reservation {position:absolute; top:4px; left:184px;}
		#breadcrumb {position:absolute; top:4px; left:220px;}
		#deutsch {position:absolute; top:4px; left:560px;}
		#francais {position:absolute; top:4px; left:596px;}
		#english {position:absolute; top:4px; left:632px;}
		#facebook {position:absolute; top:4px; left: 674px;}
		.run, .pause {position:absolute; top:4px; left: 444px;}
		.loud, .mute {position:absolute; top:4px; left: 480px;}
		#welcome a, #castle a, #history a, #houses a, #leisure a, #reservation a, #deutsch a, #francais a, #english a {display:block; width:32px; height:32px;}
		#welcome {background:url(../images/navigation_icons_new.jpg) 0 -32px; }
		#castle {background:url(../images/navigation_icons_new.jpg) -32px 0; }
		#history {background:url(../images/navigation_icons_new.jpg) -64px 0; }
		#houses {background:url(../images/navigation_icons_new.jpg) -96px 0; }
		#leisure {background:url(../images/navigation_icons_new.jpg) -128px 0; }
		#reservation {background:url(../images/navigation_icons_new.jpg) -160px 0; }
		.run {background:url(../images/navigation_icons_new.jpg) -192px -32px; }
		.loud {background:url(../images/navigation_icons_new.jpg) -224px -32px; }
		.pause {background:url(../images/navigation_icons_new.jpg) -192px 0; }
		.mute {background:url(../images/navigation_icons_new.jpg) -224px 0; }
				
		#francais {background:url(../images/navigation_icons_new.jpg) -256px 0; }
		#english {background:url(../images/navigation_icons_new.jpg) -288px -32px; }
		#deutsch {background:url(../images/navigation_icons_new.jpg) -320px 0; }
		
		#content {float:left; width:100%;}
		#article {float:left; width:100%;}
		.w10,.w2l,.w4l,.w6l,.w8l {float:left; }
		.w8r,.w6r,.w4r,.w2r {float:right; }
		.w10 {width:92%; }
		.w2l {width:16%; }
		.w4l {width:33%; }
		.w6l {width:51%; }
		.w8l {width:68%; }
		.w8r {width:68%; }
		.w6r {width:51%; }
		.w4r {width:33%; }
		.w2r {width:16%; }
		.cll:after {content:"."; visibility:hidden; display:block; height:0; clear:both;}
		.clr:after {content:"."; visibility:hidden; display:block; height:0; clear:both;}
		.cll {clear:both;}
		#footer {clear:both; }
		}