﻿/* CSS Document */

  /* the clearfix : ------------------ */
	.cf {
	}
	.cf[class] {
	display: block;
	overflow: hidden;
	font-family: Arial, Helvetica, sans-serif;
	}

/* Layout-Formatierung */

* {
	margin:0;
	padding:0;
	font-size: 16px;
	color: #FFFFFF;
	text-decoration: none;
}

html, body{
	background-color: #0A4F92;
	height: 100%;
	width: 100%;
}

#layout{
	background-color: #999999;
	border: thin solid #FFFFFF;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 940px;
	height: 580px;
	margin-left: -470px;
	margin-top: -290px;
}

/* Kopf-Formatierung */

#layout-kopf{
	position: relative;
	width: 940px;
	height: 125px;
	float: left;
	background-color:#FFFFFF;
	overflow: hidden;
}

#kopf-logo{
	position: relative;
	width: 180px;
	height: 125px;
	overflow: hidden;
	float: left;
}

#kopf-ingbuero{
	position: relative;
	width: 760px;
	height: 85px;
	overflow: hidden;
	float: right;
}

/* Kopf-Navigation-Formatierung */

#nav-con {
	padding-left:178px;
	padding-top:85px;
	display:block;
	float:none;
	width:auto;
	height: 40px;
}

.nav {
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	color:#307AA9;
	padding-left:15px;
	float:left;
	width: auto;
}

.nav-hl {
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	color:#888E9E;
	padding-left:15px;
	width:auto;
	float:left;
}
.nav a {
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:normal;
	text-decoration:none;
	color:#094E91;
}

.nav a:hover {
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:normal;
	text-decoration:none;
	color:#888E9E;
}

.nav a:visited {
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:normal;
	text-decoration:none;
	
}

.nav_spacer {
	margin-left:25px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	color:#094E91;
	width:10px;
	float:left;
}

/* Bild-Inhalt-Formatierung */

#layout-inhalt{
	position: relative;
	width: 940px;
	height: 455px;
	float: left;
	background-image:url(layout/bild-bereich-60.jpg);
}

/* Textformatierung linke Seite */

#inhalt-links {
	display:block;
	float:left;
	width:627px;
	height: 455px;
}

#text-links-oben {
	float:left;
	width: 627px;
	height: 125px;
}
#text-links-mitte {
	float:left;
	width: 627px;
	height: 300px;
	background-color: #0A4F92;
	position: relative;
}

#text-links-unten {
	float:left;
	width: 627px;
	height: 30px;
}

/* Textformatierung rechte Seite */

#inhalt-rechts {
	display:block;
	float:left;
	width:313px;
	height: 455px;
}

#text-rechts-oben {
	text-align: right;
	height: 125px;
	float: right;
	width: 313px;
}

#text-rechts-mitte {
	text-align: right;
	height: 300px;
	float: right;
	width: 313px;
}

#text-rechts-unten {
	text-align: right;
	height: 30px;
	float: right;
	width: 313px;
}

/* Impressum */

.impressum-fuss{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	float: right;
	color: #0A4F92;
	padding-top: 9px;
	padding-right: 10px;
	overflow: hidden;
}


@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : landscape) { 

	html, body{
		background-color: #0A4F92;
		height: auto;
		width: auto;
	}
	
	#layout{
		background-color: #999999;
		border: thin solid #FFFFFF;
		position: absolute;
		top: auto;
		left: auto;
		width: 940px;
		height: 580px;
		margin: 0%;
	}
	
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) { 

	html, body{
		background-color: #0A4F92;
		height: auto;
		width: auto;
	}
	
	#layout{
		background-color: #999999;
		border: thin solid #FFFFFF;
		position: absolute;
		top: auto;
		left: auto;
		width: 940px;
		height: 580px;
		margin: 0%;
	}
	
}

@media only screen and (max-device-width: 480px) { 

	html, body{
		background-color: #0A4F92;
		height: auto;
		width: auto;
	}
	
	#layout{
		background-color: #999999;
		border: thin solid #FFFFFF;
		position: absolute;
		top: auto;
		left: auto;
		width: 940px;
		height: 580px;
		margin: 0%;
	}
	
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : landscape) { 

	html, body{
		background-color: #0A4F92;
		height: auto;
		width: auto;
	}
	
	#layout{
		background-color: #999999;
		border: thin solid #FFFFFF;
		position: absolute;
		top: auto;
		left: auto;
		width: 940px;
		height: 580px;
		margin: 0%;
	}
	
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) { 

	html, body{
		background-color: #0A4F92;
		height: auto;
		width: auto;
	}
	
	#layout{
		background-color: #999999;
		border: thin solid #FFFFFF;
		position: absolute;
		top: auto;
		left: auto;
		width: 940px;
		height: 580px;
		margin: 0%;
	}
	
}

@media (max-width: 950px) {

	html, body{
		background-color: #0A4F92;
		height: auto;
		width: auto;
	}
	
	#layout{
		background-color: #999999;
		border: thin solid #FFFFFF;
		position: absolute;
		top: auto;
		left: auto;
		width: 940px;
		height: 580px;
		margin: 0%;
	}
	
}
