/*	################################################################################ 

	Gridsystem WideDesktop
	Web-Grid für Desktop-Only-Webpräsentationen
	Automatisches Umschalten zwischen traditonellen Standard-Desktops
	und modernen breiten Bildschirmen
	
	Getestet: FF (2014-1Jahr), Chrome (2014-1Jahr), IE9+
	IE8 and kleiner zeigen Standard-Breite der Seite
	Nicht optimiert für Handhelds

	Development and all rights reserved by:
	Wulf Neubacher - dermarketingmacher.com / Hilden, Germany
	
	Funkitonsprinzip inspiriert (aber komplett abgewandelter) Code durch das Responsive-Grid-System:
	Bootstrap 3 / http://getbootstrap.com/
	
	################################################################################ */
	



	
/* 01 Grundeinstellung Border-Box  
 * ****************************************************** */ 

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}





/* 02 Helpers Grid  
 * ****************************************************** */ 


 
/* Ausrichtung Elemente (Bilder, Boxen, etx) im Text */ 

html body .links {
	float: left;
	margin-right: 30px;
	margin-bottom: 20px;
}

html body .rechts {
	float: right;
	margin-left: 30px;
	margin-bottom: 20px;
}
 


/* Helpers: Clearings */

/* Clear-Element: Nach Abschluss eines Bereichs
   http://sonspring.com/journal/clearing-floats
   für Clearenden DIV-Container <div class="clear"></div> */

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* Clearfix für Elemente, die in der Höhe ausdehnen sollen und nach denen automatisch gecleart werden soll
   Achtung: In diesem Grid ist Clearfix in den Elementen Zentrierer und Reihe bereits fest eingebunden
   http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after {
	content: '\0020';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
.clearfix:after {
	clear: both;
}
/*	The following zoom:1 rule is specifically for IE6 + IE7. Move to separate stylesheet if invalid CSS is a problem. */
.clearfix {
	zoom: 1;
}





/* 03 Grid  - Responsive-Angaben: Grundbreite
 * ****************************************************** */ 

/*	##############  Erläuterung:
	Variationen für Breite der Seite in Abhängikeit von der Bildschirmgröße hier  vornehmen ######################################
	Standardvorgaben für alle Browser --> Wide-Screen nicht für ältere IEs
*/



/* Standard */
.zentrierer {
	width: 960px;
}



/* WideScreens - nicht IE8 und kleiner! */
@media (min-width: 1100px) {
	.zentrierer {
	width: 1060px;
	}

	#animation #bx-pager a {
		margin-left: 90px !important;
	}  

  
}




 
/* 04 Grid  - Definition der Struktur-Elemente
 * ****************************************************** */ 
 
 
/* Zentrierer --> Seiten-Positionierer */

.zentrierer {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
/* Using traditional Clearfix for Zentrierer: http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.zentrierer:before,
.zentrierer:after {
	content: '\0020';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
.zentrierer:after {
	clear: both;
}
/* The following zoom:1 rule is specifically for IE6 + IE7. Move to separate stylesheet if invalid CSS is a problem. */
.zentrierer {
	zoom: 1;
}



/* Reihe --> Spalten müssen als unmittelbare Kind-Elemente einer Reihe sein */

.reihe {
  margin-left: -15px;
  margin-right: -15px;
}
/* Using traditional Clearfix for Reihe: http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.reihe:before,
.reihe:after {
	content: '\0020';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
.reihe:after {
	clear: both;
}
/* The following zoom:1 rule is specifically for IE6 + IE7. Move to separate stylesheet if invalid CSS is a problem. */
.reihe {
	zoom: 1;
}





/* Spalten --> Breitenraster für den Seitenaufbau */
/* Breite --> Breite zur Positionierung einzelner(!!!) Bilder/Boxen im Text (nur Werte der Breitenangabe) */
.spalte_1, 
.spalte_2, 
.spalte_3, 
.spalte_4, 
.spalte_5, 
.spalte_6, 
.spalte_7, 
.spalte_8, 
.spalte_9, 
.spalte_10, 
.spalte_11, 
.spalte_12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

.spalte_1, 
.spalte_2, 
.spalte_3, 
.spalte_4, 
.spalte_5, 
.spalte_6, 
.spalte_7, 
.spalte_8, 
.spalte_9, 
.spalte_10, 
.spalte_11, 
.spalte_12 {
  float: left;
}
.spalte_12,
.breite_12 {
  width: 100%;
}
.spalte_11,
.breite_11 {
  width: 91.66666666666666%;
}
.spalte_10,
.breite_10 {
  width: 83.33333333333334%;
}
.spalte_9,
.breite_9 {
  width: 75%;
}
.spalte_8,
.breite_8 {
  width: 66.66666666666666%;
}
.spalte_7,
.breite_7 {
  width: 58.333333333333336%;
}
.spalte_6,
.breite_6 {
  width: 50%;
}
.spalte_5,
.breite_5 {
  width: 41.66666666666667%;
}
.spalte_4,
.breite_4 {
  width: 33.33333333333333%;
}
.spalte_3,
.breite_3 {
  width: 25%;
}
.spalte_2,
.breite_2 {
  width: 16.666666666666664%;
}
.spalte_1,
.breite_1 {
  width: 8.333333333333332%;
}


.ziehe_12 {
  right: 100%;
}
.ziehe_11 {
  right: 91.66666666666666%;
}
.ziehe_10 {
  right: 83.33333333333334%;
}
.ziehe_9 {
  right: 75%;
}
.ziehe_8 {
  right: 66.66666666666666%;
}
.ziehe_7 {
  right: 58.333333333333336%;
}
.ziehe_6 {
  right: 50%;
}
.ziehe_5 {
  right: 41.66666666666667%;
}
.ziehe_4 {
  right: 33.33333333333333%;
}
.ziehe_3 {
  right: 25%;
}
.ziehe_2 {
  right: 16.666666666666664%;
}
.ziehe_1 {
  right: 8.333333333333332%;
}
.ziehe_0 {
  right: 0%;
}


.schiebe_12 {
  left: 100%;
}
.schiebe_11 {
  left: 91.66666666666666%;
}
.schiebe_10 {
  left: 83.33333333333334%;
}
.schiebe_9 {
  left: 75%;
}
.schiebe_8 {
  left: 66.66666666666666%;
}
.schiebe_7 {
  left: 58.333333333333336%;
}
.schiebe_6 {
  left: 50%;
}
.schiebe_5 {
  left: 41.66666666666667%;
}
.schiebe_4 {
  left: 33.33333333333333%;
}
.schiebe_3 {
  left: 25%;
}
.schiebe_2 {
  left: 16.666666666666664%;
}
.schiebe_1 {
  left: 8.333333333333332%;
}
.schiebe_0 {
  left: 0%;
}


.einzug_12 {
  margin-left: 100%;
}
.einzug_11 {
  margin-left: 91.66666666666666%;
}
.einzug_10 {
  margin-left: 83.33333333333334%;
}
.einzug_9 {
  margin-left: 75%;
}
.einzug_8 {
  margin-left: 66.66666666666666%;
}
.einzug_7 {
  margin-left: 58.333333333333336%;
}
.einzug_6 {
  margin-left: 50%;
}
.einzug_5 {
  margin-left: 41.66666666666667%;
}
.einzug_4 {
  margin-left: 33.33333333333333%;
}
.einzug_3 {
  margin-left: 25%;
}
.einzug_2 {
  margin-left: 16.666666666666664%;
}
.einzug_1 {
  margin-left: 8.333333333333332%;
}
.einzug_0 {
  margin-left: 0%;
}



/* 04 Spaltensatz im Contentbereich
 * Speziell für mehrspaltigen Aufbau im Contenbereich
 * ****************************************************** */ 

.spaltensatz_halb {
	display: block;
	float: left;
	width: 48.5%;
	margin-right: 3%;
}

.spaltensatz_drittel {
	display: block;
	float: left;
	width: 30%;
	margin-right: 5%;
}

.spaltensatz_viertel {
	display: block;
	float: left;
	width: 21,25%;
	margin-right: 5%;
}

.letzter {
	margin-right: 0;
}

/* Für Bilder, die im Spaltensatz gesetzt werden */
img.spaltensatz_halb,
img.spaltensatz_drittel,
img.spaltensatz_viertel {
	height: auto;
	margin-bottom: 5%;
}