html, body {
	margin: 0;
	padding: 0;
	background: url(../img/layout/Wasser-mit-Wellen.jpg) fixed no-repeat bottom;
	}


/* --- Fonts --- */

@font-face {
	font-family: "Futura";
	src: url(../inc/Futura_LT.otf) format("opentype");
	}

* {
	color: #000;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 1em;
	line-height: 160%;
	}

hr {
	border: #97abd8;
	background-color: #97abd8;
	color: #97abd8;
	height: 1px;
	}


/* --- Titles --- */

h1 {
	color: #97abd8;
	font-family: "Futura", Arial, sans-serif;
	font-size: 2em;
	font-weight: bold;
	}

h2 {
	color: #01499d;
	font-family: "Futura", Arial, sans-serif;
	font-size: 1.5em;
	font-weight: normal;
	}

h3 {
	font-family: "Futura", Arial, sans-serif;
	font-size: 1em;
	font-weight: bold;
	}


/* --- Links --- */

a:link, a:visited {
	color: #01499d;
	text-decoration: none;
	}

a:hover, a:active {
	text-decoration: underline;
	}

main a[href^='http:'] {
	display: inline-block;
	line-height: 18px;
	padding-left: 20px;
	background: transparent url(../img/icon/external_link.gif) center left no-repeat;
	}

a[href^='mailto:'] {
	display: inline-block;
	line-height: 18px;
	padding-left: 20px;
	background: transparent url(../img/icon/mail.gif) center left no-repeat;
	}

a[href$='.pdf'] {
	display: inline-block;
	line-height: 18px; /* check your icon height */
	padding-left: 20px;
	background: transparent url(../img/icon/pdf.gif)  center left no-repeat;
	}


/* --- Hochgestellt --- */

sup {
	font-size: 0.8em;
	}


/* --- Images --- */

img {
	max-width: 100%;
	height: auto;
	}


/* --- Tables --- */

table.underline td {
	border-bottom: 1px solid #97abd8;
	}

table.fotos a[href^='http:'] {
	line-height: normal;
	padding-left: 0;
	background: none;
	}


/* --- Navigation --- */

nav {
	position: fixed;
	top: 0px;
	width: 100%;
	z-index: 4;

	border-bottom: 1px solid #97abd8;
	background-color: #FFF;

	box-shadow: inset 0 2em 3em -2em white, inset 0 -2em 3em -2.5em #01499d;
	-o-box-shadow: inset 0 2em 3em -2em white, inset 0 -2em 3em -2.5em #01499d;
	-moz-box-shadow: inset 0 2em 3em -2em white, inset 0 -2em 3em -2.5em #01499d;
	-webkit-box-shadow: inset 0 2em 3em -2em white, inset 0 -2em 3em -2.5em #01499d;
	}

nav ul {
	list-style-type: none;
	display: table;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding: 0;

	border-left: 1px solid #FFF;
	}

nav li {
	display: table-cell;
	padding: 0;
	}

nav li a {
	display: block;
	height: 100%;
	padding: 5px 0;

	color: #01499d;
	font-weight: bold;
	font-size: 1.2em;

	text-decoration: none;
	text-align: center;
/*	text-shadow: rgba(0, 0, 0, 0.8) 1px 1px 1px; /* Text Schatten: Farbe - Versatz links - Versatz oben - Unschärfe (Blur) */

	border-right: 1px solid #FFF;

	transition: 0.25s;	
	-webkit-transition: 0.25s;
	}

nav li a:hover, nav li a.active {
	background-color: #97abd8;
	text-decoration: none;
	
	-o-box-shadow: inset 0 2em 3em -2em white, inset 0 -2em 3em -2.5em #01499d;
	-moz-box-shadow: inset 0 2em 3em -2em white, inset 0 -2em 3em -2.5em #01499d;
	-webkit-box-shadow: inset 0 2em 3em -2em white, inset 0 -2em 3em -2.5em #01499d;
	}

nav a#pull {
	display: none;
	}


/* --- Section --- */

section {
	width: 80%;
	text-align: left;
	margin: 80px auto; /* margin: 80px auto 200px auto; */
	padding: 0;

	background: #FFF;
	
	border: 20px solid rgba(0,0,0,0.3);	
	
	-moz-background-clip: border;     /* Firefox 3.6 */
	-webkit-background-clip: border;  /* Safari 4? Chrome 6? */
	background-clip: border-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
				
	-moz-background-clip: padding;     /* Firefox 3.6 */
	-webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
	background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
				
	-moz-background-clip: content;     /* Firefox 3.6 */
	-webkit-background-clip: content;  /* Safari 4? Chrome 6? */
	background-clip: content-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */

	border-radius: 15px;
	-o-border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	}


/* --- Main --- */

main {
	padding: 5%;
	}

#main a img.border {
	border: 1px solid #CCC;
	padding: 8px;
	}


/* --- Left, Right, Clear --- */

#left {
	float: left;
	width: 47%;
	}

#right {
	float: right;
	width: 47%;
	}

#clear {
	clear: both;
	}


/* --- Aside --- */

aside {
	clear: both;
	}


/* --- Footer --- */

footer {
	clear: both;
	font-size: 0.8em;
	}

footer p, footer a:link, footer a:visited  {
	color: #FFF;	
	}

footer a:hover {
	text-decoration: underline;
	}


/* --- Formmailer --- */

input, textarea {
	width: 90%;
	color: #000;
	font-size: 1em;
	border: 1px solid #DDD;
    padding: 0.5em;
}

input.error, textarea.error {
	border: 1px solid #BE0A26;
	background-color: #F8E0E0;
	}

button {
	color: #01499d;
	background-color: #FFF;
	font-size: 1.5em;
	font-weight: normal;
	vertical-align: middle;
	border: 1px solid #97abd8;
	padding: 1% 5%;

	-o-box-shadow: inset 0 2em 3em -2em white, inset 0 -2em 3em -2.5em #01499d;
	-moz-box-shadow: inset 0 2em 3em -2em white, inset 0 -2em 3em -2.5em #01499d;
	-webkit-box-shadow: inset 0 2em 3em -2em white, inset 0 -2em 3em -2.5em #01499d;

	border-radius: 5px;
	-o-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	}

button:hover {
	color: #01499d;
	background-color: #97abd8;
	cursor: pointer;
	transition: 0.25s;
	-webkit-transition: 0.25s;
	}


/* --- Screen > 800px (float all left) --- */

@media screen and (max-width: 800px) {

#left {
	float: left;
	width: 100%;
	}

#right {
	float: left;
	width: 100%;
	}
}


/* --- Screen > 1000px (Two Row Menu) --- */

@media screen and (max-width: 1000px) {

section{
	margin-top: 130px;
	}

nav { 
	height: auto;
  	}

nav ul {
	width: 100%;
	display: block;
	height: auto;
  	}

nav li {
	width: 25%;
	float: left;
	position: relative;
  	}
  	
nav li a {
	border-bottom: 1px solid #97abd8;
	border-right: 1px solid #97abd8;
	}
  
nav a {
  	text-align: left;
  	width: 100%;
  	}
}


/* --- Screen > 480px (SlideDown Menu) --- */

@media only screen and (max-width: 650px) {

section{
	margin-top: 60px;
	}

nav ul {
	display: none; /* Blendet Links aus */
	height: auto;
	width: 100%;
	}

nav li {
	display: block;
	float: none;
	width: 100%;
	}

nav li a {
	border-bottom: 1px solid #97abd8;
	}

nav a#pull {
	position: relative;
	display: block;
	width: 100%;
	color: #97abd8;
	text-decoration: none;
	padding: 6px;
	}
	
nav a#pull:hover {
	color: #01499d;
	}

nav a#pull:after {
	content: "";
	background: url('../img/icon/Menu-Blau.png') no-repeat;
	width: 30px;
	height: 30px;
	display: inline-block;
	position: absolute;
	right: 15px;
	top: 10px;
	}
}