/* css file 
	Marco Barnig
	16.5.2015 
	*/
	/* 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:1200px; 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 */
		/* mod 6 : avoid link borders for images = outline none*/
		a {color:#ffffff; text-decoration:underline; outline:none;}
		a:visited {color:#daa520; }
		a:hover {color:#000000; text-decoration:underline;}
		a:active {color:#ffffff; text-decoration:none; }
		/* mod 6 : avoid link borders for images = border none */
		a img {border:none;}
				
	/* images */
		#header img {width:100%; }
		/* mod 6 : avoid link borders for images */
		#header img {text-decoration:none; border:0;}
		#content img {max-width:96%; margin:2%;}
	
	/* text styles */
		/* mod 5 : add p padding for narrow screens */
		p {padding:.25em; border:0; margin:0; }
			
	/* 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; }
		#content p:first-letter {color:#daa520; font-size:1.3em;}
		/* footer */
		#footer li {display:inline;}
		/* mod 1 : color changed in footer */
		#footer li a {color:#daa520; text-decoration:none; padding:.5em;}
		#footer li a:hover {color:#000000; text-decoration:underline;}	
		}
		
	/* iPhone */
		@media screen and (device-width:320px) and (-webkit-min-device-pixel-ratio: 2)
		{
		/* Navigation */
		#nav {position:relative; display:block; width:320px; height:76px; 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:120px; height:26px; font-size:.8em; }
		.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:46px; left:4px;}
		#deutsch {position:absolute; top:44px; left:206px;}
		#francais {position:absolute; top:44px; left:242px;}
		#english {position:absolute; top:44px; left:278px;}
		#facebook {position:absolute; top:4px; left: 226px;}
		.run, .pause {position:absolute; top:44px; left: 134px;}
		.loud, .mute {position:absolute; top:44px; left: 170px;}
		#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 0; }
		#deutsch {background:url(../images/navigation_icons_new.jpg) -320px 0; }
		}
			
	/* 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 {width:100%;}
		#nav span {display:none;}
		#welcome, #castle, #history, #houses, #leisure, #reservation, #deutsch, #francais, #english {display:block; width:32px; height:32px; margin:6px 0 8px 6px;  }
		#castle a, #history a, #houses a, #leisure a, #reservation a, #deutsch a, #english a, #francais a {display:block; width:32px; height:32px;}
	
		.run, .pause, .loud, .mute {display:block; float:left; width:32px; height:32px; margin:6px 0 8px 6px; }
		.run a, .pause a, .loud a, .mute a {display:block; width:32px; height:32px;}
		#facebook {display:block; width:90px; height:20px; float:right; margin:6px 6px 8px 6px; padding:0; }
		#welcome {background:url(../images/navigation_icons_new.jpg) 0 -32px; margin-left:8px; }
		#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; }
		.pause {background:url(../images/navigation_icons_new.jpg) -192px 0; }
		.mute {background:url(../images/navigation_icons_new.jpg) -224px 0; }
		.loud {background:url(../images/navigation_icons_new.jpg) -224px -32px; }
		
		#francais {background:url(../images/navigation_icons_new.jpg) -256px 0; float:right;}
		#english {background:url(../images/navigation_icons_new.jpg) -288px 0; float:right; }
		#deutsch {background:url(../images/navigation_icons_new.jpg) -320px 0; float:right; }
		
		#castle a:hover {background:url(../images/navigation_icons_new.jpg) -32px -32px; }
		#history a:hover {background:url(../images/navigation_icons_new.jpg) -64px -32px; }
		#houses a:hover {background:url(../images/navigation_icons_new.jpg) -96px -32px; }
		#leisure a:hover {background:url(../images/navigation_icons_new.jpg) -128px -32px; }
		#reservation a:hover {background:url(../images/navigation_icons_new.jpg) -160px -32px; }
		.run a:hover {background:url(../images/navigation_icons_new.jpg) -192px 0; }
		.pause a:hover {background:url(../images/navigation_icons_new.jpg) -192px -32px; }
		.mute a:hover {background:url(../images/navigation_icons_new.jpg) -224px -32px; }
		.loud a:hover {background:url(../images/navigation_icons_new.jpg) -224px 0; }
		
		#francais a:hover {background:url(../images/navigation_icons_new.jpg) -256px -32px; }
		#english a:hover {background:url(../images/navigation_icons_new.jpg) -288px -32px; }
		#deutsch a:hover {background:url(../images/navigation_icons_new.jpg) -320px -32px;  }
		
		#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; }
		}
	/* panorama */
		/* panorama windows >= 1080 pixels */
		@media screen and (min-width:1080px) 
		{
		#breadcrumb {display:block; float:left; width:220px; height:26px; margin:6px 0 8px 6px; padding:6px 0 0 8px; overflow:hidden; font-size:.8em;}
		#article {float:left; width:80%; max-width:1024px;}
		#aside {display:block; float:right; background-color:#7d796d; width:18%; }
		.section_aside {float:right; width:70%; margin:5% 12% 5% 0; background-color:#90715c; border-radius:10px; border:5px solid #daa520;}
		.section_aside img {width:90%; margin:5% 5% 2% 5%;}
		}