/* Layout: "Grumme 2"
	 Datum: Februar 2015
	 Datei: mobile.css
	 Author: Thorsten Gumball
	 Authorenwebseite: http://mozilo-layouts.thorstn.com
	 
	 ACHTUNG: Die Autorenhinweise müssen in den CSS-Dateien und in der template.html
	 					sowie der gallerytemplate.html stehen bleiben!
	 					Auch der Autorenhinweis "Layout by Thorstn" MUSS im Footer bestehen bleiben!
	 
	 */

/* Maximal Größe: 980 Pixel */

		@media screen and (max-width: 980px) {
			
			#content {
				margin:0 auto;
				-webkit-box-shadow:none;
      	-moz-box-shadow:none;
      	box-shadow:none;
			}
			
			#topheader {
				margin-top:0;
			}
			
			#footer {
				margin-bottom:0;
			}
			
			#fotogalerie .thumbnail {
				margin:10px 15px 10px 5px;
			}
			
		}
		
		
		
/* Maximal Breite: 768 Pixel */		
		
		@media screen and (max-width: 768px) {
			body {
				color:#222;
			}
			.searchdiv {
			padding-right:0;
			padding-bottom:20px;
		}
		
		input.searchtextfield {
			max-width:220px;
		}
		
					
			#topheader {
			}
			#topheadername {
			}
			
			#mainmenu {
				display:none;
			}
			#detailmenu {
				display:none;
			}
			
			#maincontent-left div {
				display:none;
			}
			#maincontent-right {
				margin-left:0;
				width:95%;
				padding:20px 10px;
			}
			
			#menu-res {
				display:block;
				margin:0 auto;
				width:100%;
				text-align:left;
				z-index:10;
			}
			#menu-res-open {
				display:block;
				width:100%;
				background:#fff;
				padding:10px 0;
				text-align:right;
			}
			#menu-res-open a {
				display:block;
				color:#555;
				font-size:34px;
				line-height:30px;
				font-weight:bold;
				text-decoration:none;
				padding-right:30px;
			}
			#menu-res-nav {
				background:#000;
				display:block;
				position:absolute;
				top:-9999px;
				left:0;
				width:100%;
				min-height:30px;
				z-index:20;
			}
			
						
			a.submenu, a.submenuactive {
				font-size:17px;
			}
			a.submenu:before {
				 content:"» "
				}
				
			a.submenuactive:before {
				 content:"» "
				}
			
			ul.mainmenu {
			}
			li.mainmenu {
				float:none;
				display:block;
				margin:0;
				font-size:17px;
				line-height:28px;
				padding:0;
			}
			li.mainmenu:first-child {
				margin-top:20px;
			}
			
			li.mainmenu:last-child {
				margin-bottom:0px;
			}
			
			a.menu {
				display:block;
				background:#000;
				border:none;
				color:#eee;
				font-weight:normal;
				padding:3px 10px;
				border:none;
				border-bottom:1px #333 solid;
			}
			a.menu:hover {
				background:#444;
				color:#eee;
				border-bottom:1px #333 solid;
			}
			a.menuactive {
				display:block;
				background:#444;
				color:#eee;
				font-weight:normal;
				border:none;
				border-bottom:1px #333 solid;
				padding:3px 10px;
			}
			a.menuactive:hover {
				background:#666;
				color:#eee;
			}
			
			li.mainmenu li.detailmenu {
				float:none;
				display:block;
				font-size:17px;
				margin:0;
			}
			li.mainmenu li.detailmenu:first-child {
				margin-top:0;
			}
			li.mainmenu li.detailmenu a {
				color:#fff;
				padding:3px 5px 3px 30px;
				margin:0;
			}
			li.mainmenu li.detailmenu a:hover {
				text-decoration:none;
			}
			
			ul.detailmenu {
				margin:0;
			}
			li.detailmenu a.submenu {
				margin:0;
			}
			 
			
			
			a.submenu {
				display:block;
				background:#000;
				border:none;
				margin:0;
				color:#eee;
				padding:3px 10px;
				border:none;
				border-bottom:1px #333 solid;
			}
			
			a.submenu:hover {
				background:#444;
				border-bottom:1px #333 solid;
			}
			a.submenuactive {
				display:block;
				background:#444;
				color:#eee;
				border:none;
				border-bottom:1px #333 solid;
				padding:3px 10px;
			}
			a.submenuactive:hover {
				background:#666;
			}
			
			
			
			
						
			#menu-res-nav:target {
				top:0px;
				
			}
			
			#menu-res-nav ul li.close {
				display:block;
				width:100%;
			}
			
			#nav-close {
				padding:15px 10px 25px 30px;
			}
			#nav-close a, #nav-close a:hover {
				display:block;
				font-size:17px;
				font-weight:normal;
				line-height:24px;
				padding:5px 10px;
				color:#ddd;
				text-decoration:none;
			}
			
			#mainmenu li.detailmenu {
			display:block;
		}
			
			
			#fotogalerie .thumbnail {
				margin:15px;
			}
		}
		

/* Maximal Breite: 500 Pixel */

		@media screen and (max-width: 500px) {
			body {
				background:#fff;
			}
			
			#topheadername {
				margin-right:5px;
			}
			
			
			h1 {
			font-size:22px;
			margin-bottom:8px;
			}
			h2 {
				font-size:18px;
				margin-bottom:8px;
			}
			h3 {
				font-size:15px;
			}
			
			.suche {
				margin-left:20px;
			}
			
		}
		
		@media screen and (max-width: 420px) {
			
		#topheader {
			padding:10px 10px 20px 10px;
		}
		
		input.searchtextfield {
			max-width:180px;
		}
		
		#fotogalerie .thumbnail {
				margin:10px;
			}
		
	}
		
		@media screen and (max-width: 360px) {
			#topheader {
				padding:10px 10px 30px 10px;
				text-align:center;
			}
					
		}