@import url('/fonts/stylesheet.css');

html 			{ margin: 0; padding: 0; }
body.mainbody 	{ padding: 0 10px; background: #4B4B4B; font-family: Arial;}
.mainbody, .mainbody * { font-family: Arial !important; }

#mainheader, #content, #mainfooter { max-width: 1180px; }

/* HEADER */
#mainheader 				{ position: relative; margin-bottom: -10px; min-height: 135px; background: white;}
#mainheader img.head-maske 	{ position:relative; top:0; left:0; z-index: 50; }
#mainheader img.head-img	{ position: absolute; top: 0; left: 0; z-index: 40; }

	/* links */
	#moblogos { background: white; width: 100%; position: relative; min-height: 100px;  }
	.logo-bzl { position: absolute; left: 0; top: 20%; }
	.logo-schulen { position: absolute; right: 0; bottom: -20px; }
	.logolink { display: none; }
	#mainheader .homelink 	{ display: block; width: 200px; height: 75%; position: absolute; top: 0; left: 0; z-index: 60; }	

	@media only screen and (min-width: 321px) {
		img.header-320 { display: none!important; }
	}
	
	@media only screen and (max-width: 320px) {
		img.head-maske, img.head-img { display: none!important; }
		.homelogo { width: 100px; margin-right: 10px!important;}
		.mainbody .inner p { line-height: 140%; font-size: 12px; }
	}

/* CONTENT */
#content 			{ background: #708a9d url(../images/zagge-intro.jpg) left 10px repeat-x; padding-top: 30px; padding-bottom: 30px; margin-bottom: -10px;  }

.homebox			{ padding: 0 10px 9px 10px; width: 100%; }
.homebox .arrow 	{ background-image: url(../images/mob-start-arrow-white.png); background-repeat:no-repeat; background-position: 98% center; overflow: hidden; }
.homebox .inner		{ border: 2px solid white;  }
.homebox .inner p 	{ color: white; margin: 7px 0 0 0; padding: 0;  }
.homebox .homelogo	{ margin-right: 15px; }		
.homebox a:hover 	{ text-decoration: none; }
.homebox a:hover span.homelink, .homebox span.homelink  { color: white; font-family:Arial; font-weight: bold; }

/* FOOTER */
#mainfooter 			 { background:url(../images/mob-start-footer.png) transparent repeat-x left top; height: 180px; position: relative;}
#footercontent			{ padding: 15px 10px;}
#mainfooter #copyright 	 { position: absolute; top: 200px; left: 0; color: white; font-family: Arial; }
#mainfooter #copyright a { color: white; font-family: Arial;}

@media only screen and (max-width: 480px) {
	.homebox .arrow 	{ background-image: url(../images/mob-start-arrow-white-transparent.png)!important; }
}

@media only screen and (min-width: 481px) {
	#mainfooter 			 { height: 140px; }
	#mainfooter #copyright 	 { top: 160px; }
}

@media only screen and (min-width: 768px) {
	
	body#main { font-size: 12px; }
	#mainheader { background: none; }
	.bzl-link 				{ display: block; width: 21%; height: 50px; position: absolute; right: 74.5%; bottom: 0; z-index: 60; }	
	.gymo-link 				{ display: block; width: 21%; height: 50px; position: absolute; right:51%; bottom: 0; z-index: 60; }	
	.bfsl-link 				{ display: block; width: 21%; height: 50px; position: absolute; right: 28%; bottom: 0; z-index: 60; }	
	.verein-link 			{ display: block; width:22%; height: 50px; position: absolute; right: 4%; bottom: 0; z-index: 60; }	
	#mainheader .homelink { width: 27%; }
	
	/* CONTENT */
	#content 		{ padding: 0 30px 0; background-image: none; }

	.homebox		{ width:25%; float:left; }
	.homebox .arrow { background-image: none; }
	.homebox .inner { height: 370px; padding-top: 40px; height: 410px; border-top: none; border-bottom: none;}
	.homebox .inner p { padding: 0 10px;  }
	.homelink 		{ display: block; font-size: 15px; padding: 25px 10px;} 
	
	/* FOOTER */
	#mainfooter 				{ height: 120px; margin-top: -15px; }
	#mainfooter #footercontent 	{ padding: 18px 40px; }
	#mainfooter #copyright 		{ top: 130px; width: 100%; }
	.metaleft 					{ float: left; }
	.metaleft span				{ display: block; float: left; }
	.metaright { float: right; }
	#copyright p { font-size: 11px; }
	
}


@media screen and (min-width: 992px) {
	  	  .homebox{
		  	  	margin-left:80px;
			  }
}
	

@media only screen and (min-width: 989px){
	
	#mainheader, #content, #mainfooter { position: relative; margin-left:auto; margin-right: auto;  }
	#mainfooter #footercontent 	{ padding: 18px 100px 0 120px; }

	/* CONTENT */
	#content 		{ padding: 0 100px 0; }
/* 	.homebox		{ padding: 0; width: 21.5%; margin: 0 2%;  } */
	.homebox		{ padding: 0; width: 21.5%;  }
	.homebox.last	{ margin-right:0;}
	
	.bzl-link 				{ width: 18%; right: 66.5%;	}
	.gymo-link 				{ width: 18%; right: 42%; }
	.bfsl-link 				{ width: 18%; right: 18%;}
/* 	.verein-link 			{ width:18%; right: 9%; }
	 */
	

}