@charset "utf-8";

@font-face {
    font-family: 'OpenSansCondensedLight';
    src: url('../fonts/OpenSans-CondLight-webfont.eot');
    src: url('../fonts/OpenSans-CondLight-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-CondLight-webfont.woff') format('woff'),
         url('../fonts/OpenSans-CondLight-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-CondLight-webfont.svg#OpenSansCondensedLight') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'AmbleLight';
    src: url('../fonts/Amble-Light-webfont.eot');
    src: url('../fonts/Amble-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Amble-Light-webfont.woff') format('woff'),
         url('../fonts/Amble-Light-webfont.ttf') format('truetype'),
         url('../fonts/Amble-Light-webfont.svg#AmbleLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
	margin: 0;
	padding: 0;
	width:100%;
	background:#444;
}
#page{
	background:#fff;
	width:100%;
	margin:0;
	padding:0;
}
.ribbon {
	margin: 0;
	padding: 0;
	width:100%;
	height: 40px;
	background:#444;
}

.ribbon .content {
	width: 960px;
	margin: 0 auto;
	padding: 6px 0 0 0;
	height:auto;
}

.header {
	margin:0;
	padding:12px 0 0 0;
	width: 100%;
	display: block;
	clear:both;
}

.logo-main {
	margin: 0;
	padding: 0;
	width:450px;
	height: 90px;
	float:left;
	background-color: #fff;
	display:block;
	border:none;
}

.header a:link, .header a:visited, .header a:hover, .header a:active, .header a:focus {
	text-decoration:none;
	border-bottom:none;
}
.address{
	margin: 0;
	padding: 0;
	width:380px;
	height: 90px;
	float:right;
	background-color: #fff;
}
.mainNav {background:#fff;}

/* ~~ Dieser Container mit fester Breite umschließt die anderen div-Tags. ~~ */
.container {
	width: 960px;
	background-color: #FFF;
	margin: 0 auto; /* Der mit der Breite gekoppelte automatische Wert an den Seiten zentriert das Layout. */
}

/* ~~ Dies sind die Layoutinformationen. ~~ 

1) Eine Auffüllung wird nur oben und/oder unten im div-Tag positioniert. Die Elemente innerhalb dieses div-Tags verfügen über eine seitliche Auffüllung. Dadurch müssen Sie keine Box-Modell-Berechnungen durchführen. Zu beachten: Wenn Sie dem div-Tag eine seitliche Auffüllung oder einen Rahmen hinzufügen, werden diese zu der festgelegten Breite addiert und ergeben die *gesamte* Breite. Sie können auch die Auffüllung für das Element im div-Tag entfernen und ein zweites div-Tag ohne Breite und mit der gewünschten Auffüllung im ersten div-Tag einfügen.

*/

.content {
	padding: 0;
	  margin: 36px 0 0 0;
	width: 960px;
}

/* ~~ Fußzeile ~~ */
.footer {
	margin-top:9px;
	padding: 0;
	background-color: #444;
	color: #ccc;
}
.legal {
	width:345px;
	float:left;
}
.design {
	width:145px;
	float:left;
}
.copyright{
	margin-left:0px;
	margin-right:0;
	padding: 0;
	width: 245px;
	float:left;
}
.W3C-html{
	margin-left:0;
	margin-right:0;
	padding: 0;
	width:100px;
	float:left;
}
.W3C-css{
	margin-left:0;
	margin-right:0;
	padding: 0;
	width: 50px;
	float:left;
}

/* ~~ Verschiedene float/clear-Klassen ~~ */
.fltrt {  /* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts fließen lassen. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* Mit dieser Klasse können Sie ein Element auf der Seite nach links fließen lassen. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* Diese Klasse kann in einem <br />-Tag oder leeren div-Tag als letztes Element nach dem letzten fließenden div-Tag (im #container) platziert werden, wenn #footer entfernt oder aus dem #container herausgenommen wird. */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/* Grid 960px, margin 20px - Keine margins in den äussersten Spalten
   ----------------------------------------------------------------- */
.grid_3,
.grid_4,
.grid_6,
.grid_8,
.grid_9,
.grid_12 {
	margin-left: 0;
	margin-right: 20px;
	float:left;
	margin-top:20px;
}
.grid_3 { width: 225px; }
.grid_4 { width: 306px; margin-right:21px;}
.grid_6 { width: 470px; }
.grid_8 { width: 633px; }
.grid_9 { width: 715px; }
.grid_12 { width: 960px; }


.last_col {margin-right:0;}