/* ==========================================================================
   CSS of the test page for the W3DevCampus
   ========================================================================== */


/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

a:focus {
	outline: 4px dotted #c33;
  outline-offset: 4px;
  background: #ffa;
}
/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}


/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */



	html {
		overflow-y:scroll;
	}
	body {
		font: 16px/26px 'Droid Sans', Arial, Helvetica, sans-serif;
		line-height: 1.4;
	}

	h1, h2, h3 {
		clear: both;
		font-family: 'Paprika', Droid Sans, Arial, Helvetica, sans-serif;
		font-weight: normal; /* steht hier wegen Safari, der default: bold setzt */

		text-rendering: optimizeLegibility;
		/*-webkit-font-feature-settings: "liga"; Currently broken in Chrome >= v22. Falls back to text-rendering. Safari is unaffected. */
		-moz-font-feature-settings: "liga=1";
		-moz-font-feature-settings: "liga";
		-ms-font-feature-settings: "liga" 1;
		-o-font-feature-settings: "liga";
		font-feature-settings: "liga";
		-webkit-font-smoothing: antialiased;
	}
	
	h1 {
		color: #3FB0DA;
	}
	h2 {
		color: #253B47;
		font-size: 1.2em;
	}
	p {
		color: #253B47;
	}
	a {
		color: #CC3333;
		text-decoration: underline;
		
		-webkit-transition: all 0.8s ease;
		-moz-transition:  all 0.8s ease;
		-ms-transition:  all 0.8s ease;
		-o-transition:  all 0.8s ease;
		transition:  all 0.8s ease;
	}
	/*a:visited {
		color: #175f7a;
		text-decoration: underline;
	} lokal ist alles visited??? */
	a:hover, a:focus {
		color: #3FB0DA;
		text-decoration: none;
	}
	a:active {
		color: #175f7a;
		text-decoration: none;
	}
	
	img {
		max-width: 100%;
	}
	
	/* Specials */
	.assistive-text {
		clip: rect(1px, 1px, 1px, 1px);
		position: absolute !important;
	}
	
	
/* ====================================
    Highlighting for structure elements
   ==================================== */
	.highlight section:hover, .highlight header:hover, .highlight footer:hover {
		background: #e0f1f7;
	}

	.highlight article:hover, .highlight aside:hover, .highlight figure:hover, .highlight nav:hover, .highlight hgroup:hover {
		background: #eef7fb;
	}
	
	
/* =======================
    Header + hgroup + nav
   ======================= */

	#branding {
		/*border-bottom: 40px solid #3FB0DA; */
		position: relative;	
	}

	#branding:after{
		width:100%;
		height:40px;
		background: #3FB0DA;

		-moz-box-shadow: 0 8px 10px -9px rgba(26, 42, 51, 0.7);
		-webkit-box-shadow: 0 8px 10px -9px rgba(26, 42, 51, 0.7);
		-ms-box-shadow: 0 8px 10px -9px rgba(26, 42, 51, 0.7);
		-o-box-shadow: 0 8px 10px -9px rgba(26, 42, 51, 0.7);
		box-shadow: 0 8px 10px -9px rgba(26, 42, 51, 0.7);

		}
	


	#branding h1 {
		text-shadow: -1px 1px 0 rgba(255, 255, 255, 0.5);
		position: relative;
		margin: 2em 0 0;
	}
	#branding h1 span {
		margin-left: 4em;
	}
	#branding h1 img {
		margin: -1.2em 0 -.75em 0;
		padding: .1em .5em .5em .1em;
		border-radius: 50%;
		border-width: 1px 0 0 2px;
		border-style: solid;
		border-color: #94d3ea;
		position: absolute;

		background: #cdebf5; /* Old browsers */
		background: -moz-linear-gradient(-45deg,  #cdebf5 0%, #ffffff 55%, #ffffff 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#cdebf5), color-stop(55%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(-45deg,  #cdebf5 0%,#ffffff 55%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(-45deg,  #cdebf5 0%,#ffffff 55%,#ffffff 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(-45deg,  #cdebf5 0%,#ffffff 55%,#ffffff 100%); /* IE10+ */
		background: linear-gradient(135deg,  #cdebf5 0%,#ffffff 55%,#ffffff 100%); /* W3C */
		/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdebf5', endColorstr='#ffffff',GradientType=1 );  IE6-9 fallback on horizontal gradient */

	}
	#branding h1 a {
		color: #3FB0DA;
		text-decoration: none;
	}
	
	#branding h2 {
		font-size: 1.2em;
		color: #94d3ea;
		margin-top: 2em;
	}
	
	.site-title, nav {
		margin: 0 5%;
		display: block;
	}
	

	/* Social nav */
	nav.social {
		position: absolute;
		display: inline-block;
		width: auto;
		right: 5%;
		top: -6em;
		margin: 0;
		background: transparent;
	}
	.social a:hover {
		text-decoration: none;
	}
	.ss-twitter:before, .ss-facebook:before {
		font-size: 2em;

	}
	.middle {
		position: absolute;
		text-indent: -9999px;
		padding: 0;
	}


/* -----
    nav
   ----- */

	nav ul {
		float: left; 
		margin: 0;
		padding: 0;
		position: relative;
	}

	nav a, nav span {
		display: block;
		padding: 5px 15px;
		text-decoration: none;
		font-weight: bold;
		color: #fff;
		background: #253B47;
	}

	nav a:hover,
	nav a:visited,
	nav a:focus {
		color: #fff;
	}

	nav a:hover,
	nav a:focus {
		text-decoration: underline;
	}

/* Funktionsbutton für mobile Navigation verstecken */
	nav .mobileMenu {
		display: none;
	}


/* Normal status */
	nav li.menu-item {
		float: left;
		list-style: none;
		width: auto; 
		min-width: 10em; 
		margin-right: .5em;
	}
	nav li.menu-item a, nav li.menu-item span {
		color: #94D3EA;
		height: 2em;
		line-height: 2em; 
		text-shadow: -1px -1px 0 #000; 
		-moz-border-radius: 10px 10px 0 0;
		-webkit-border-radius: 10px 10px 0 0;
		-o-border-radius: 10px 10px 0 0;
		-ms-border-radius: 10px 10px 0 0;
		border-radius: 10px 10px 0 0;
	}
/* Aktiv status Level 0 */
	nav li.current-item a, nav li.current-item span {
		text-decoration: none; 
		color: #fff;
		background: #3FB0DA;
		text-shadow: -1px -1px 0 #175f7a; 
	}



/* Hiding sub-menu  */
	nav ul.sub-menu {
		overflow: hidden; 
		position: absolute; 
		float: none; 
		top: 100%; 
		width: 0; 
		height: auto; 
		background: #1a2a33; 
		padding: 0 0 1em 0; 
		margin: 0; 
		z-index: 110; 
		-moz-border-radius: 0 0 10px 10px;
		-webkit-border-radius: 0 0 10px 10px;
		-o-border-radius: 0 0 10px 10px;
		-ms-border-radius: 0 0 10px 10px;
		border-radius: 0 0 10px 10px;
		
		-moz-box-shadow: 0 8px 10px -9px rgba(26, 42, 51, 0.7);
		-webkit-box-shadow: 0 8px 10px -9px rgba(26, 42, 51, 0.7);
		-ms-box-shadow: 0 8px 10px -9px rgba(26, 42, 51, 0.7);
		-o-box-shadow: 0 8px 10px -9px rgba(26, 42, 51, 0.7);
		box-shadow: 0 8px 10px -9px rgba(26, 42, 51, 0.7);

		opacity: 0;
		-webkit-transition: opacity 0.5s ease, width 0.5s ease-out;
		-moz-transition:  opacity 0.5s ease, width 0.5s ease-out;
		-ms-transition:  opacity 0.5s ease, width 0.5s ease-out;
		-o-transition:  opacity 0.5s ease, width 0.5s ease-out;
		transition:  opacity 0.5s ease, width 0.5s ease-out;
	} 

/* show sub-menu with :hover */
	nav li:hover ul.sub-menu{
		overflow: visible; 
		width: 15em; 
		opacity: 1;
	}


	nav ul.sub-menu li {
		display: block; 
		float: none; 
		position: relative; 
		width: auto; 
		font-size: .813em; 
		color: #dcf0f8; 
		background: transparent; 
		border: none;
		margin: 0;

		-moz-box-shadow: 0 1px 4px -2px rgba(170, 217, 234, 0.7);
		-webkit-box-shadow: 0 1px 4px -2px rgba(170, 217, 234, 0.7);
		-ms-box-shadow: 0 1px 4px -2px rgba(170, 217, 234, 0.7);
		-o-box-shadow: 0 1px 4px -2px rgba(170, 217, 234, 0.7);
		box-shadow: 0 1px 4px -2px rgba(170, 217, 234, 0.7);
	}

	nav ul.sub-menu li a {
		display: block; 
		float: none;
		height: auto; 
		width: auto;
		color: #dcf0f8; 
		background: transparent; 
		margin: 0; 
		padding: .3em 1.2em; 
		text-decoration: none; 
		border: none; 
		outline-color: #466f86; 
		-moz-border-radius: 0;
		-webkit-border-radius: 0;
		-o-border-radius: 0;
		-ms-border-radius: 0;
		border-radius: 0;
	}


/* Hover for links in sub-menu */
		nav ul.sub-menu li a:hover, nav ul.sub-menu li a:focus {
		color: #fff; 
		background: #6ac2e2; 
		text-decoration: none;
		text-shadow: -1px -1px 0 #175f7a; 
} 
/* keep background color in :hover for parent element */
		nav li:hover > a {
		color: #d6e7f0; 
		text-decoration: none; 
		background: #1a2a33; 
		margin: 0; 
}

/* show active sub-menu */
		nav li.current-item ul.sub-menu {
		position: absolute; 
		display: block; 
		float: left; 
		left: 0; 
		width: 100%; 
		height: 40px; /* height of #branding:after */
		list-style: none; 
		background: transparent; 
		padding: 0; 
		margin: 0 0 0 -1px; 
		z-index: 100; 
		
		/* reset :hover for sub-menu */
		opacity: 1 ;		
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		-ms-box-shadow: none;
		-o-box-shadow: none;
		box-shadow: none;

}
	nav li.current-item ul.sub-menu li {
		display: block; 
		float: left; 
		font-size: .813em; 
		color: #dcf0f8; 
		min-width: auto; /* reset min-width from nav li.menu-item */
		margin: 0; 
		padding: 0; 
		position: relative; 
}
	nav li.current-item ul.sub-menu li a {
		display: block; 
		font-weight: normal; 
		color: #fff; 
		background: transparent; 
		margin: 0; 
		padding: 0 1.2em; 
		text-decoration: none; 
		height: 40px; /* height of #branding:after */
		line-height: 40px;
}
	nav li.current-item ul.sub-menu li a:hover, 
	nav li.current-item ul.sub-menu li a:focus { 
		display: block; 
		color: #fff; 
		background: transparent; 
		padding: 0 1.2em; 
		text-decoration: underline; 
		border: none; 
}



/* --------------------------------------------------------------------
    Wrap the section + aside
   -------------------------------------------------------------------- */
   #wrapper {
		width: 90%;
		margin: 0 5%;
		min-height: 500px;
	}

/* -----------
    section
   ----------- */
   
	section {
		float: left;
		margin: 2em 0 6em;
		padding: 0;
		width: 62%;
	}
	article {
		margin-right: 4em;
	}
	
	.item header {
		margin-top: 3em;
	}
	.item h1 {
		font-size: 1.4em;
	}
	.item h2 {
		font-size: 1.1em;
	}
	.item img {
		background: #e0f1f7;
		border: 1px solid #AAD9EA;
		padding: 5px;
	}

	.item-content {
		overflow: hidden;

		/*-moz-column-count: 3; 
		-webkit-column-count: 3; 
		column-count: 3;*/
		
		-moz-column-width: 200px;
		-webkit-column-width: 200px;
		column-width: 200px;
		
		-moz-column-gap:40px; 
		-webkit-column-gap:40px; 
		column-gap:40px;	
		
		-moz-column-rule: 2px dashed #DAF0F7;
		-webkit-column-rule: 2px dashed #DAF0F7;
		column-rule: 2px dashed #DAF0F7;
		
		-moz-column-break-inside:avoid;
		-webkit-column-break-inside:avoid;
		column-break-inside:avoid;
	}
	.item-content h2 {
		-moz-column-span: all;
		-webkit-column-span: all; /* only Chrome */
		column-span: all;
	}
	.item-content p {
		/* In columns the element containing the text must not have a margin- oder padding-top!!! */
		margin: 0 0 2em; 
	}
	.button {
		display: block;
		position: relative;
		color: #fff;
		background: #3FB0DA;
		margin: 0 .5em 1em 0;
		padding: 10px;
		text-decoration: none;
		float: left;
		height: 2em;
		width: 2em;
		border: 1px solid #118DD1;

		box-shadow: inset 2px 2px 5px -2px rgba(255, 255, 255, 0.5), 1px 1px 3px -1px rgba(0, 0, 0, 0.3);

		-moz-border-radius: 10px;
		-webkit-border-radius: 5px;
		-o-border-radius: 5px;
		-ms-border-radius: 5px;
		border-radius: 50%;
	}
	.button:hover, .button:focus {
		color: #3FB0DA;
		background: #C2E4F0;
		border-color: #2597c1;
		outline: none;

		box-shadow: inset 1px 1px 3px -1px rgba(0, 0, 0, 0.3), inset -1px -1px 3px -1px rgba(255, 255, 255, 0.7 );

	}

	.floatleft {
		float: left;
		max-width: 30%;
		margin: 0 1em 0 0;
	}
	figcaption {
		font-style: italic;
		font-size: 90%;
	}

	.notification {
		color: #cc3333;
		font-size: 80%;
	}
	/* Forms */
	#formholder {
		padding: 2px;
		margin: .5em 1em 1em;
		background: transparent;
		border: none;
	}
	#formholder *:focus { 
		outline: 4px dotted #c33;
		outline-offset: 4px; 
	}

	/*#formholder input:optional {border: 2px solid #008000;}*/
	
	#formholder input:required{background: url(../img/asterisk.png) no-repeat 98% 5px;}
	#formholder input:required:valid, #formholder input:valid { background:#fff url(../img/checked.png) no-repeat 98% 5px;}
	#formholder input:focus:invalid { background: #fde2e2 url(../img/invalid.png) no-repeat 98% 5px; border: 1px solid #cc3333;
  outline: 4px dotted #c33;
  outline-offset: 4px;
	}
	
	#formholder .form_hint {
		background: #d45252;
		border-radius: 3px 3px 3px 3px;
		color: #fff;
		font-size: .813em;
		margin: 0 0 0 40px;
		padding: 1px 6px;		
		z-index: 999; /* hints stay above all other elements */
		position: absolute; 
		top: 1.8em;
		left: 28%;
		display: block;
		opacity: 0;

		-moz-transition: opacity .5s;
		-webkit-transition: margin .5s;
		-o-transition: margin .5s;
		transition: opacity .5s;	
		}
	#formholder .form_hint::before {
		content: "\25B2"; 
		color:#d45252;
		position: absolute;
		top:-10px;
		left:6px;
	}
	#formholder input:focus + .form_hint {display: inline; opacity: 1;}
	#formholder input:required:valid + .form_hint{background: #28921f;} 
	#formholder input:required:valid + .form_hint::before {color:#28921f;} 	
	

	#formholder p {
		clear: both;
		position: relative; 
		font-size: 1em;
		line-height: 125%;
		padding-bottom:5px; 
		margin: 0;
	}

	#formholder form {
		padding-bottom: 2em;
	}
	#formholder fieldset {
		background: #E0F1F7;
		margin: 1em 0 1em 0;
		padding: .5em;
		border: 1px solid #3FB0DA;
		text-align: left;
		width: auto;
		
		-moz-border-radius: 10px; 
		-webkit-border-radius: 10px; 
		border-radius: 10px;
	}
	#formholder fieldset:first-child {
		margin-top: 0;
	}
	#formholder legend {
		font-weight: bold;
		font-size: .813em;
		color: #fff;
		background: #3FB0DA;
		padding: .5em;
		margin-bottom: 1em;
		border:1px solid #3FB0DA;

		-moz-border-radius: 10px; 
		-webkit-border-radius: 10px; 
		border-radius: 10px;
		
		-moz-box-shadow: 0 8px 10px -9px rgba(26, 42, 51, 0.7);
		-webkit-box-shadow: 0 8px 10px -9px rgba(26, 42, 51, 0.7);
		-ms-box-shadow: 0 8px 10px -9px rgba(26, 42, 51, 0.7);
		-o-box-shadow: 0 8px 10px -9px rgba(26, 42, 51, 0.7);
		box-shadow: 0 8px 10px -9px rgba(26, 42, 51, 0.7);
	}
	#formholder label{
		float: left;
		display: block;
		width: 24%;
		min-width: 8em;
		min-height: 1.5em;
		font-size: .75em;
		font-weight: bold;
		text-align: right;
		margin: 0 1% 0 0;
		padding: .2em 0 0 0;
	}
	#formholder label.checkbox {
		width: auto; 
		min-width: auto; 
		text-align: left; 
		margin-top: 0;
	}

	#formholder input {
		font-size: .938em;
		padding:2px;
		margin: 0;
		margin-bottom: 5px;
		color: #253B47;
		background: #E0F1F7;
		border:1px solid #3FB0DA;
		width: 50%;
	}
	#formholder select {
		border:1px solid #3FB0DA;
		padding:2px;
		margin: 0;
	}
	#formholder textarea {
		color: #253B47;
		background: #E0F1F7;
		padding:2px;
		margin: 0;
		margin-bottom:5px;
		border: 1px solid #3FB0DA;
		width: 50%;
	}
	#formholder .checkbox  {
		float: left;
		width: auto;
		border: none;
		margin-top: .3em; margin-right: .5em;
	}
/*	#formholder input[type="text"]:hover, #formholder input[type="url"]:hover, #formholder input[type="email"]:hover, #formholder input[type="password"]:hover, #formholder input[type="textarea"]:hover, 
	#formholder input[type="text"]:focus, #formholder input[type="url"]:focus, #formholder input[type="email"]:focus, #formholder input[type="password"]:focus, #formholder input[type="textarea"]:focus {	
		
	}*/


	#formholder input[type="submit"] {
		float:right; 
		display: block; 
		width: auto; 
		min-width: 8em;
		text-align: center; 
		color: #fff; 
		font-size: 1em; 
		margin: 0 1em 1em; 
		padding: .5em 1em; 
		text-decoration: none;	
		background: #2597c1;
		border: 1px solid #258cda;
		background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5bbcdf), color-stop(100%, #2597c1));
		background-image: -webkit-linear-gradient(#5bbcdf, #2597c1);
		background-image: -moz-linear-gradient(#5bbcdf, #2597c1);
		background-image: -o-linear-gradient(#5bbcdf, #2597c1);
		background-image: linear-gradient(#5bbcdf, #2597c1);
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		-o-border-radius: 5px;
		-ms-border-radius: 5px;
		-khtml-border-radius: 5px;
		border-radius: 5px;
		-moz-box-shadow: inset 0 1px 0 0 #85b9e0;
		-webkit-box-shadow: inset 0 1px 0 0 #85b9e0;
		-o-box-shadow: inset 0 1px 0 0 #85b9e0;
		box-shadow: inset 0 1px 0 0 #85b9e0;
	}
	#formholder input[type="submit"]:hover, #formholder  input[type="submit"]:focus {
		background: #228cb3;
		background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #228cb3), color-stop(100%, #4db6dd));
		background-image: -webkit-linear-gradient(#228cb3, #4db6dd);
		background-image: -moz-linear-gradient(#228cb3, #4db6dd);
		background-image: -o-linear-gradient(#228cb3, #4db6dd);
		background-image: linear-gradient(#228cb3, #4db6dd);
		-moz-box-shadow: inset 0 1px 0 0 #75acd7;
		-webkit-box-shadow: inset 0 1px 0 0 #75acd7;
		-o-box-shadow: inset 0 1px 0 0 #75acd7;
		box-shadow: inset 0 1px 0 0 #75acd7;
	}



/* -------------
    Googlel Maps
   ------------- */
	#msg {
		margin: 5px 0 0 25% !important;
		font-size: .813em !important;
	}
	#map_canvas {
		margin: 10px 0 10px 25%;
		width: 72%;
		height: 250px;
		font-size: .813em;
	}
	
	#map_canvas img{
		max-width: none;
		background: transparent;
	}
	
/* -----------
    canvas
   ----------- */
   
	canvas {
		margin: 0 auto;
		display: block;
	}

/* -----------
    aside
   ----------- */
   
	aside {
		float: right;
		margin: 2em 0;
		padding: 0 0 0 4%;
		width: 34%;
		min-height: 20em;
		color: #253B47;
		background: #AAD9EA;
		position: relative;
		
		-moz-border-radius: 20px 10em 20px 20px;
		-webkit-border-radius: 20px 10em 20px 20px;
		-o-border-radius: 20px 10em 20px 20px;
		-ms-border-radius: 20px 10em 20px 20px;
		border-radius: 20px 10em 20px 20px;
	}
	.sidebar section {
		width: 80%;
		margin: 2em 0;
	}

	#flip {
		position: relative;
		height: 250px;
		width: 100%;
		margin: 0;
	}
	#flip img {
		position: absolute;
		left: 0;
		-moz-transition: all 1s ease-in-out;
		-webkit-transition: all 1s ease-in-out;
		-o-transition: all 1s ease-in-out;
		transition: all 1s ease-in-out;
	}
	#flip img.top {
		-moz-transform: scale(0,0);
		-webkit-transform: scale(0,0);
		-o-transform: scale(0,0);
		transform:scale(0,0);
		opacity: 0;
	}
	#flip:hover img.top, #flip:focus img.top {
		opacity: 1;
		-moz-transform: scale(1,1);
		-moz-transform-origin: top right;
		-webkit-transform: scale(1,1);
		-webkit-transform-origin: top right;
		-o-transform: scale(1,1);
		-o-transform-origin: top right;
		transform: scale(1,1);
		transform-origin: top right;
	}
	#flip:hover img.bottom, #flip:focus img.bottom {
		-moz-transform: scale(0,0);
		-moz-transform-origin: bottom left;
		-webkit-transform: scale(0,0);
		-webkit-transform-origin: bottom left;
		-o-transform: scale(0,0);
		-o-transform-origin: bottom left;
		transform: scale(0,0);
		transform-origin: bottom left;
	}


/* -----------
    footer
   ----------- */
   /* footer for all */
		.item footer {
			clear: both;
			text-align: right;
			font-style: italic;
			font-size: 90%;
			padding: 2em 0 .2em 0;
			/*background: rgba(63, 176, 218, 0.1) ;*/
			border-bottom: 1px solid #b1dff0;
		}
		.item footer:after {
			content: "";
			display: inline-block;
			height: 20px;
			margin-bottom: -5px;
			padding-left: 0.5em;
			width: 26px;
			background: url(../img/icon_freizeit.png) no-repeat center right;
			background-size: 20px 20px;

		}
		address.vcard {
			display: inline;
		}


/**
 footer - end of page
 */
	#colophon {
		text-align: left;
		font-style: normal;
		color: #fff;
		background: #1A2A33;
	}
	#colophon a {
		color: #fff;
		background: transparent;
	}
	#colophon h2 {
		color: #fff;
	}
	#colophon p {
		color: #fff;
		background: transparent;
		
	}
	.footer-content {
		width: 90%;
		margin: 0 5%;
		padding: 2em 0;
	}
	.footer-item {
		width: auto;
		min-width: 20%;
		max-width: 46%;
		margin-right: 2%;
		float: left;
	}



/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 1281px) {

/* ===============
    Miscellaneous
   =============== */
	#flip {
		height: 400px;
	}
}
@media only screen and (max-width: 1280px) {

/* ===============
    Miscellaneous
   =============== */
	#flip {
		height: 250px;
	}
}

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

/* ===============
    Miscellaneous
   =============== */
	#flip {
		height: 200px;
	}
}

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

/* ====================
    WIDE: CSS3 Effects
   ==================== */


/* ============
    WIDE: Menu
   ============ */
	nav ul {
		font-size: .875em;
	}
	nav ul ul {
		font-size: 1em !important;
	}


/* ============
    WIDE: Main
   ============ */
	section {
		float: none;
		margin: 2em 0;
		padding: 0;
		width: 96%;
	}
	
	aside {
		float: none;
		margin: 1em 0 2em;
		padding: 4%;
		width: 92%;
		display: block;
		position: static;

		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;
		-o-border-radius: 20px;
		-ms-border-radius: 20px;
		border-radius: 20px;
	}
	
/* ===============
    Miscellaneous
   =============== */
	#flip {
		height: 320px;
		width: 400px;
	}
	
	.social {
		top: 2em !important;
	}

}




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

/* ====================
    INTERMEDIATE: Menu
   ==================== */

/* Funktionsbutton "Navigation" in mobiler Navigation sichtbar machen. */
	nav .mobileMenu {
		display: block;
		width: 10em;
		max-width: 100%;
		
		-moz-border-radius: 20px 20px 0 0;
		-webkit-border-radius: 20px 20px 0 0;
		-o-border-radius: 20px 20px 0 0;
		-ms-border-radius: 20px 20px 0 0;
		border-radius: 20px 20px 0 0;
	}
/* Sichtbarkeit des Navigationsblocks wird vom JS gesteuert */
	.js #branding nav ul   { 
		/* Wird per JS auf display: block gesetzt und damit sichtbar */
		display: none; 
		/* Mit absoluter Positionierung liegt das aufgeklappt Menü über dem Inhalt. Ist kein JS vorhanden, greift die relative Positonierung aus dem Normal-Status, damit das Menü den Inhalt nicht verdeckt. */
		position: absolute;
	}
	.no-js #branding nav ul {
		display: block;
		position: relative;
		height: auto;
	}

	nav ul {
		font-size: 1.1em;
	}

    nav li.menu-item {
        float: none;
        width: 100%;
    }

	nav li.menu-item a, nav li.menu-item span {
		-moz-border-radius: 0;
		-webkit-border-radius: 0;
		-o-border-radius: 0;
		-ms-border-radius: 0;
		border-radius: 0;
		
	}
/* Normalstatus */
	nav li.menu-item {
		float: none;
		min-width: 12em;
		max-width: 100%;
		width: auto;
	}
	nav li.menu-item a, nav li.menu-item span {
		-moz-border-radius: 0;
		-webkit-border-radius: 0;
		-o-border-radius: 0;
		-ms-border-radius: 0;
		border-radius: 0;
	}


/* Untermenü verstecken  */
	nav ul.sub-menu {
		overflow: visible; 
		position: relative !important; 
		float: none; 
		top: 0; 
		width: auto; 
		height: auto !important; 
		-moz-border-radius: 0;
		-webkit-border-radius: 0;
		-o-border-radius: 0;
		-ms-border-radius: 0;
		border-radius: 0;
		
		opacity: 1;
	} 

/* Untermenü mit :hover sichtbar machen */
	nav li:hover ul.sub-menu{
		width: auto; 
	}



/* Hover für die Links im Untermenü */
		nav ul.sub-menu li a:hover, nav ul.sub-menu li a:focus {
		-moz-transform: none; 
		-webkit-transform: none; 
		-o-transform: none; 
		-ms-transform: none; 
		transform: none;
} 


/* aktives Untermenue anzeigen */
		nav li.current-item ul.sub-menu {
		position: relative; 
		float: none; 
		height: auto; 
		
}
	nav li.current-item ul.sub-menu li {
		float: none; 
}
	nav li.current-item ul.sub-menu li a {
		height: auto; 
		line-height: auto;
}



/* ========================
    INTERMEDIATE: IE Fixes
   ======================== */

    nav ul li {
        display: block;
    }

    .oldie nav a {
        margin: 0 0.7%;
    }

	/* ===============
    Miscellaneous
   =============== */
	#searchform {
		right: .5em;
		top: 13.5em;
		width: 50%
	}

	.social {
		top: .5em;
		right: 0;
	}
	
	
	aside {
		padding: 2em 0 2em 2em;
	}
	
	#flip {
		height: 260px;
		width: 100%;
	}

	.footer-item {
		width: 96%;
		max-width: 96%;
		margin-right: 2%;
		float: none;
	}
}

@media only screen and (min-width: 1140px) {

/* ===============
    Maximal Width
   =============== */

    .wrapper {
        width: 1026px; /* 1140px - 10% for margins */
        margin: 0 auto;
    }
}
/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}