/*
  960 Grid System ~ Core CSS.
  Learn more ~ http://960.gs/

  Licensed under GPL and MIT.
*/

/*
  Forces backgrounds to span full width,
  even if there is horizontal scrolling.
  Increase this if your layout is wider.

  Note: IE6 works fine without this fix.
*/

body {
  min-width: 960px;
}

/* `Container
----------------------------------------------------------------------------------------------------*/

.container_12 {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}

/* `Grid >> Global
----------------------------------------------------------------------------------------------------
Hier werden die Klassen für die einzelnen DIV-Boxen generell definiert.
*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}


/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------
Die beiden folgenden Klassen werden benötigt, um DIV-Boxen (grid 1-12) innerhalb einer anderen DIV-
Box (grid 1-11) zu platzieren. Die erste muss mit der Klassenbezeichnung ".alpha", die letzte mit ".omega"
versehen werden, damit sich die Abstände der eingeschachtelten DIV-Boxen links und rechts nicht mit jenen
ihres übergeordneten DIV-Box addieren. */

.alpha {
  margin-left: 0;
}

.omega {
  margin-right: 0;
}

/* `Grid >> 12 Columns
----------------------------------------------------------------------------------------------------
Hier werden die Breiten den DIV-Boxen für die unterschiedlichen Grössen definiert. */

.container_12 .grid_1 {
  width: 60px;
}

.container_12 .grid_2 {
  width: 135px;
}

.container_12 .grid_3 {
  width: 220px;
}

.container_12 .grid_4 {
  width: 300px;
}

.container_12 .grid_5 {
  width: 380px;
}

.container_12 .grid_6 {
  width: 460px;
}

.container_12 .grid_7 {
  width: 540px;
}

.container_12 .grid_8 {
  width: 620px;
}

.container_12 .grid_9 {
  width: 700px;
}

.container_12 .grid_10 {
  width: 780px;
}

.container_12 .grid_11 {
  width: 860px;
}

.container_12 .grid_12 {
  width: 940px;
}


/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */
/* Die folgende Klassendefinition dient dazu, innerhalb eines Containers eine vorangegangene float-Anweisung aufzuheben, 
   damit das nachfolgende Element unterhalb des letzten gefloateten Elements (quasi auf einer neuen Zeitel)
   dargestellt wird. Die Klasse ".clear" muss daher einer leeren DIV-Box zugewiesen werden, da sie unsichtbar sein wird. */
   

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

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
/* Die folgende Klassendefinition dient dazu, einem Container, der gefloatete Kind-Elemente beinhaltet, 
   die richtigen Ausmasse zuzuweisen, indem mit "::after" unten an die gefloateten Elemente ein Pseudo-Element angefügt wird,
   das die float-Eigenschaft aufhebt ("cleared", wie oben). */

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after,
.container_12:before,
.container_12:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

.clearfix:after,
.container_12:after {
  clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix,
.container_12 {
  zoom: 1;
}

img{
  display: block;
}