@import url("reset.css");
@charset "UTF-8";
/* CSS Document */


/**************************************************************************************************************************************************
 * Farben
 * 
 * blau		#556e88
 * grün		#bbcc33
 *  
 * Schrift
 * Finnegan W02 / Regular 400 normal / Bold Italic 700 italic
 * 
 **************************************************************************************************************************************************/

/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

* {margin:0;padding:0;} 

/* Du musst margin auf 0 fÃ¼r alle Elemente setzen und immer padding statt margin
fÃ¼r vertikale AbstÃ¤nde (top und bottom) verwenden, anderenfalls werden diese margin-
Werte zur GesamthÃ¶he addiert und der Footer wird zu weit nach unten geschoben, was
vertikale Scrollbalken im Browser erzeugt. */

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 30px;}  /* Muss genau so hoch sein wie der Footer */

footer {
	position: relative;
	margin-top: -30px; /* Negativer Wert der Footer-HÃ¶he */
	height: 30px;
	clear:both;
}

/* CLEAR FIX */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {display: inline-block;}

/* Bereich nicht fÃ¼r IE-mac Anfang \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* Bereich nicht fÃ¼r IE-mac Ende */


/**************************************************************************************************************************************************
 * Stylesheets 
 **************************************************************************************************************************************************/
body {
	background: #f9fbeb;
	font-family: "Finnegan W02", sans-serif;
	color: #333;
	font-size: 17px;
	line-height: 1.5em;
}

header, footer, article, nav {display: block;}
h1 {display: none;}
h2 {font-size: 147.05882352941176%; color: #556e88; font-weight: 700; font-style: italic; padding: 10px 0;}
h2 span {padding: 0 23px 0px 0; background: url(../zub/blatt.png) no-repeat 100% 90%;}
h3 {font-weight: 700; font-style: italic; color: #556e88; font-size: 110%; padding-top: 10px;}
h4 {font-weight: 700; font-style: italic; color: #556e88; font-size: 100%; padding-top: 10px;}
a {text-decoration: none;}
a:focus {outline: none;}
.versalien {font-size: 90%; letter-spacing: 0.05em;}
.none {display: none;}
.nowrap {white-space: nowrap;}
strong {color: #556e88;}

/**************************************************************************************************************************************************
 * Navigation 
 **************************************************************************************************************************************************/
nav {
	position: fixed;
	z-index: 100;
	left: 0; top: 0;
	width: 100%;
	background: #556e88;
	text-align: center;
}
	
	nav ul li {
		display: inline-block;
		margin: 0 1%;
	}
	
	nav ul li a {
		color: #fff;
		opacity: 0.85;
		filter:  alpha(opacity = 85);  
		-ms-filter: "alpha(opacity = 85)";	
		font-size: 94.11764705882353%;
		padding: 5px 0 2px 0;
		display: inline-block;
		border-bottom: 3px solid #556e88;;
	}
	
	nav ul li a:hover {
		opacity: 1.0;
		filter:  alpha(opacity = 100);  
		-ms-filter: "alpha(opacity = 100)";	
		border-bottom: 3px solid #bbcc33;
	}

	nav ul li.current a {
		border-bottom: 3px solid #bbcc33;
	}


/**************************************************************************************************************************************************
 * Facebooklink 
 **************************************************************************************************************************************************/	
	.facebooklink {
		position: absolute;
		right: 30%; top: 5px;
	}
	
	.facebooklink a {
		opacity: 0.6;
		filter:  alpha(opacity = 60);  
		-ms-filter: "alpha(opacity = 60)";	
	}
	
	.facebooklink a:hover {
		opacity: 0.8;
		filter:  alpha(opacity = 80);  
		-ms-filter: "alpha(opacity = 80)";	
	}
	
	
/**************************************************************************************************************************************************
 * Content 
 **************************************************************************************************************************************************/
#content {
	margin: 0px auto;
	padding-bottom: 30px;
	width: 60%;
}

	article {
		padding-top: 60px;
		height: 100%;
	}
	
	article p,
	h2, h3, h4, 
    article ul {
		width: 80%;
		margin: 10px auto;
		max-width: 750px;
	}
	
    article ul li {
        list-style-type: circle;
        margin-left: 20px;
    }

	article a {
		color: #333;
	}
	
	article a:before {
		content: "→";
		padding-right: 2px;
	}
	
	article p.top a:before {
		content: "↑";
	}
	
	article a:hover {
		color: #556e88;
		border-bottom: 1px solid #556E88;
	}

/**************************************************************************************************************************************************
 * Start 
 **************************************************************************************************************************************************/
.logo {
	margin: 0px auto 20px auto;
	width: 45%; height: auto;
	padding-top: 50px;
}

.headerimage {
	margin: 20px auto;
	width: 100%; height: auto;
	position: relative;
}

	.headerimage.mitpostit {
		height: 300px;
	}

	.headerimage img,
	.logo img {
		width: 100%; height: auto;
	}
	

	.headerimage img:nth-child(2) {
		position: absolute;
		top: -30px; left: 5%;
		width: 300px; height: auto;
	}

/**************************************************************************************************************************************************
 * Footer mobile 
 **************************************************************************************************************************************************/
footer.mobile {
	background: #556e88;
	text-align: center;
	display: none;
}
	
	
/**************************************************************************************************************************************************
 * Mediaqueries 
 **************************************************************************************************************************************************/
@media only screen and (max-width: 1200px) {
	#content {width: 70%;}
	.facebooklink {right: 25%;}
}

@media only screen and (max-width: 950px) {
	.facebooklink {right: 20%;}
}

@media only screen and (max-width: 800px) {
	body {font-size: 16px;}
	.logo {width: 50%;}
	#content {width: 80%;}
	article {padding-top: 30px;}
	.facebooklink {right: 15%;}
}

@media only screen and (max-width: 600px) {
	body {font-size: 15px;}
	.logo {width: 55%;}
	article p, h2, h3, h4, ul {width: 90%;}
	.facebooklink {right: 3%;}
}

@media only screen and (max-width: 400px) {
	#content {width: 90%;}
	.logo {width: 70%;}
	.desktop {display: none;}
	nav ul li {margin: 0 1.5%;}
	footer.mobile nav {position: absolute;}
	footer.mobile {display: block;}
}

@media only screen and (max-width: 320px) {
	#content {width: 98%;}
	.logo {margin-bottom}
	.facebooklink {right: 2%; top: 6px;}
	nav {text-align: left;}
	nav ul {width: 96%; margin-left: 2%;}
	nav ul li a {padding: 7px 0 4px 0;}
}

