@charset "iso-8859-2";
/*
* Responsive Design Framework
* Ein Raster der die Seitenbreite der Browserbreite anpasst
*
* SIEMAX.at - Benjamin Widmann
*
*/



/* 1200px Grundraster - große Monitore */
.aussenbox									{ position: relative; width: 1200px; margin: 0 auto; padding: 0; text-align: left; }
.aussenbox .spalte, .aussenbox .spalten		{ float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.gruppe										{ margin-bottom: 20px; margin-right: -10px; margin-left: -10px; }

.aussenbox .eine.spalte,
.aussenbox .eine.spalten					{ width: 80px;  }
.aussenbox .zwei.spalten					{ width: 180px; }
.aussenbox .drei.spalten					{ width: 280px; }
.aussenbox .vier.spalten					{ width: 380px; }
.aussenbox .fuenf.spalten					{ width: 480px; }
.aussenbox .sechs.spalten					{ width: 580px; }
.aussenbox .sieben.spalten					{ width: 680px; }
.aussenbox .acht.spalten					{ width: 780px; }
.aussenbox .neun.spalten					{ width: 880px; }
.aussenbox .zehn.spalten					{ width: 980px; }
.aussenbox .elf.spalten						{ width: 1080px; }
.aussenbox .zwoelf.spalten					{ width: 1180px; }

.aussenbox .eine-spalte-versetzen			{ padding-left: 100px; }
.aussenbox .zwei-spalten-versetzen			{ padding-left: 200px; }
.aussenbox .drei-spalten-versetzen			{ padding-left: 300px; }
.aussenbox .vier-spalten-versetzen			{ padding-left: 400px; }
.aussenbox .fuenf-spalten-versetzen			{ padding-left: 500px; }
.aussenbox .sechs-spalten-versetzen			{ padding-left: 600px; }
.aussenbox .sieben-spalten-versetzen		{ padding-left: 700px; }
.aussenbox .acht-spalten-versetzen			{ padding-left: 800px; }
.aussenbox .neun-spalten-versetzen			{ padding-left: 900px; }
.aussenbox .zehn-spalten-versetzen			{ padding-left: 1000px; }
.aussenbox .elf-spalten-versetzen			{ padding-left: 1100px; }

/* 960px Raster - kleine Monitore */
@media only screen and (min-width: 960px) and (max-width: 1199px) {
	.aussenbox								{ position: relative; width: 960px; margin: 0 auto; padding: 0; }

	.aussenbox .eine.spalte,
	.aussenbox .eine.spalten				{ width: 60px;  }
	.aussenbox .zwei.spalten				{ width: 140px; }
	.aussenbox .drei.spalten				{ width: 220px; }
	.aussenbox .vier.spalten				{ width: 300px; }
	.aussenbox .fuenf.spalten				{ width: 380px; }
	.aussenbox .sechs.spalten				{ width: 460px; }
	.aussenbox .sieben.spalten				{ width: 540px; }
	.aussenbox .acht.spalten				{ width: 620px; }
	.aussenbox .neun.spalten				{ width: 700px; }
	.aussenbox .zehn.spalten				{ width: 780px; }
	.aussenbox .elf.spalten					{ width: 860px; }
	.aussenbox .zwoelf.spalten				{ width: 940px; }
		
	.aussenbox .eine-spalte-versetzen		{ padding-left: 80px;  }
	.aussenbox .zwei-spalten-versetzen		{ padding-left: 160px; }
	.aussenbox .drei-spalten-versetzen		{ padding-left: 240px; }
	.aussenbox .vier-spalten-versetzen		{ padding-left: 320px; }
	.aussenbox .fuenf-spalten-versetzen		{ padding-left: 400px; }
	.aussenbox .sechs-spalten-versetzen		{ padding-left: 480px; }
	.aussenbox .sieben-spalten-versetzen	{ padding-left: 560px; }
	.aussenbox .acht-spalten-versetzen		{ padding-left: 640px; }
	.aussenbox .neun-spalten-versetzen		{ padding-left: 720px; }
	.aussenbox .zehn-spalten-versetzen		{ padding-left: 800px; }
	.aussenbox .elf-spalten-versetzen		{ padding-left: 880px; }
}

/* 768px Raster - Tablets */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.aussenbox								{ position: relative; width: 768px; margin: 0 auto; padding: 0; }

	.aussenbox .eine.spalte,
	.aussenbox .eine.spalten				{ width: 44px;  }
	.aussenbox .zwei.spalten				{ width: 108px; }
	.aussenbox .drei.spalten				{ width: 172px; }
	.aussenbox .vier.spalten				{ width: 236px; }
	.aussenbox .fuenf.spalten				{ width: 300px; }
	.aussenbox .sechs.spalten				{ width: 364px; }
	.aussenbox .sieben.spalten				{ width: 428px; }
	.aussenbox .acht.spalten				{ width: 492px; }
	.aussenbox .neun.spalten				{ width: 556px; }
	.aussenbox .zehn.spalten				{ width: 620px; }
	.aussenbox .elf.spalten					{ width: 684px; }
	.aussenbox .zwoelf.spalten				{ width: 748px; }
		
	.aussenbox .eine-spalte-versetzen		{ padding-left: 64px;  }
	.aussenbox .zwei-spalten-versetzen		{ padding-left: 128px; }
	.aussenbox .drei-spalten-versetzen		{ padding-left: 192px; }
	.aussenbox .vier-spalten-versetzen		{ padding-left: 256px; }
	.aussenbox .fuenf-spalten-versetzen		{ padding-left: 320px; }
	.aussenbox .sechs-spalten-versetzen		{ padding-left: 384px; }
	.aussenbox .sieben-spalten-versetzen	{ padding-left: 448px; }
	.aussenbox .acht-spalten-versetzen		{ padding-left: 512px; }
	.aussenbox .neun-spalten-versetzen		{ padding-left: 576px; }
	.aussenbox .zehn-spalten-versetzen		{ padding-left: 640px; }
	.aussenbox .elf-spalten-versetzen		{ padding-left: 704px; }
}

/* 300px Raster - Smartphones */
@media only screen and (max-width: 767px) {
	.aussenbox								{ width: 300px; }
	.aussenbox .spalte,	.aussenbox .spalten	{ margin: 0; }
	
	.gruppe 								{ margin: 0; }
		
	.aussenbox .eine.spalte,
	.aussenbox .eine.spalten,
	.aussenbox .zwei.spalten,
	.aussenbox .drei.spalten,
	.aussenbox .vier.spalten,
	.aussenbox .fuenf.spalten,
	.aussenbox .sechs.spalten,
	.aussenbox .sieben.spalten,
	.aussenbox .acht.spalten,
	.aussenbox .neun.spalten,
	.aussenbox .zehn.spalten,
	.aussenbox .elf.spalten,
	.aussenbox .zwoelf.spalten				{ width: 300px; }
	
	.aussenbox .eine-spalte-versetzen,
	.aussenbox .zwei-spalten-versetzen,
	.aussenbox .drei-spalten-versetzen,
	.aussenbox .vier-spalten-versetzen,
	.aussenbox .fuenf-spalten-versetzen,
	.aussenbox .sechs-spalten-versetzen,
	.aussenbox .sieben-spalten-versetzen,
	.aussenbox .acht-spalten-versetzen,
	.aussenbox .neun-spalten-versetzen,
	.aussenbox .zehn-spalten-versetzen,
	.aussenbox .elf-spalten-versetzen		{ padding-left: 0; }
}

/* 420px Raster - Smartphones horizontal */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.aussenbox								{ width: 420px; }

	.aussenbox .eine.spalte,
	.aussenbox .eine.spalten,
	.aussenbox .zwei.spalten,
	.aussenbox .drei.spalten,
	.aussenbox .vier.spalten,
	.aussenbox .fuenf.spalten,
	.aussenbox .sechs.spalten,
	.aussenbox .sieben.spalten,
	.aussenbox .acht.spalten,
	.aussenbox .neun.spalten,
	.aussenbox .zehn.spalten,
	.aussenbox .elf.spalten,
	.aussenbox .zwoelf.spalten				{ width: 420px; }
}

/* Aufräumer */
.aussenbox:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

/* Entweder jede Gruppe (mit mehrereren Spalten in ein DIV das als ".gruppe" definiert ist, oder mit ".clearfix" beenden */
.clearfix:before,
.clearfix:after,
.gruppe:before,
.gruppe:after {
	content: '\0020';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
.gruppe:after,
.clearfix:after {
	clear: both;
}
.gruppe,
.clearfix {
	zoom: 1;
}

/* Oder mit "<br class="clear" />" den float beenden */
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* Bilder die selbst kleiner werden sollten */
img {
	max-width: 100%;
	height: auto;
}