/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; }
mark, rp, rt, ruby, summary, time{ display: inline }

	/* Site-wide properties ======================================================== */
	body{
	    font: normal normal 10px/10px LatoRegular, Tahoma, Arial, Helvetica, Verdana, sans-serif; color: #333;}
	    

	    
	    
	    /* Fibonacci based heading scale ratio */
	    nav{ font-size: 1.6em; font-weight: bold; font-family: 'ArvoBold', serif; }
	    h1{ font-size: 3em; font-family: 'ArvoBold', serif; padding: 7px 0 25px; line-height: 1.2em }
	    h2{ font-size: 2.5em; font-family: 'ArvoBold', serif; padding: 3px 0 20px; color: rgba(15,40,40,0.7); line-height: 1.2em; text-shadow: 0px 2px 3px #9f9e9e;}
	    h3 { font-family: 'ArvoBold', sans-serif; font-size: 1.7em; padding: 2px 0 15px; color: rgba(15,40,40,0.7); line-height: 1.2em; }
	    h4{ font-size: 1.6em; font-weight: bold; font-family: 'LatoBold', sans-serif; padding-bottom: 10px; line-height: 1.4em;color: #333; }
	    #footerbox h4 {color: #eee;}
	    p{ font-size: 1.3em; font-weight: normal; font-family: 'LatoRegular', sans-serif; line-height: 1.5em; padding-bottom: 25px; list-style-type: none; }
	    p + p { margin-top: -15px; }
	    #content a{ color: rgba(15,40,40,0.5); font-weight: bold; font-family: 'LatoBold', sans-serif;  line-height: 1.5em; }
	    #content a:hover { color: rgba(15,40,40,0.75); }
	    #content li { font-family: 'LatoRegular',sans-serif; font-size: 1.3em; font-weight: normal; line-height: 1.5em; list-style-type: inherit; margin-left: 2%;}
	    footer a { color: rgba(255,255,255,0.75); display: block; font-family: 'LatoBold', sans-serif; font-weight: bold; line-height: 1.5em; text-decoration: none;  }
	    footer a:hover { color: white; }
   	    footer li{ font-size: 1.3em; font-weight: normal; font-family: 'LatoRegular', sans-serif; line-height: 1.5em; list-style-type: none; }
	    
	
	/* Reusable classes ============================================================ */
	
	/* Left & Right alignment */
	.left{ float: left; }
	.right{ float: right; }
	
	/* The inside class provides consistent padding. To be used often! */
	.inside{ padding: 2%; }
	
	/* Basic Structure ============================================================= */
		
	  /* Header */
		#wrap > header {
		    background-color: rgba(22, 63, 63, 0.5);
		    height: 126px;
		}
		
		#logo {
			width: 960px;
			margin: 0 auto;
		}
		#logo img {
		    position: absolute;
		    z-index: 1100;
		    margin-top: -2.8em;
		    width: auto;
		}
	    nav{
	    	width: 960px;
			margin: 0 auto;
	    }
		#navbox {
		    background-color: rgba(61, 81, 81, 0.5);
		    float: left;
		    margin-top: 4.5em;
		    width: 100%;
		    height: 37px;
		}
		nav select { display: none;	} /* -- Ausblenden des Navigations-Selektors -- */
		nav ul {
		    float: right;
		    margin: -4px 0;
		}
		nav ul li {
		    display: inline-block;
		    padding: 13px 0;
		    margin: 4px 0;
		    -webkit-transition: all .2s ease-in;  
			-moz-transition: all .2s ease-in;  
			-o-transition: all .2s ease-in;  
			-ms-transition: all .2s ease-in;  
			transition: all .2s ease-in;  
		}
		/* dropdown */
		nav li ul span{
			display: none;
		}
		#spacer{
			display: none;
		}
		nav li ul {
			float: left;
			opacity: 0;
			position: absolute;
			top: -200px;
		}
		nav li:hover ul {
		    background-color: rgba(255, 255, 255, 0.6);
		    -webkit-box-shadow: 2px 0px 3px -1px rgba(0, 0, 0, 0.75);
			box-shadow: 2px 0px 3px -1px rgba(0, 0, 0, 0.75); 
		    display: inline;
		    z-index: 1000;
		    padding: 0;
		    position: absolute;
		    top: 89px;
		    z-index: 1;
		    opacity: 1;
		    -webkit-transition: opacity .2s ease-in-out;  
			-moz-transition: opacity .2s ease-in-out;  
			-o-transition: opacity .2s ease-in-out;  
			-ms-transition: opacity .2s ease-in-out;  
			transition: opacity .2s ease-in-out;  
		}
		nav li li, nav li li:hover {
			display: block;
			-webkit-box-shadow: none;
			box-shadow: none;
		}
		.menubutton{
			display: none;
		}
	  /* Content */
	    #slider {
		    margin: 0 auto 0;
		    width: 960px;
		}
	    #slider header{
	    	display: none;
	    }
	    #slider DIV.csc-textpic .csc-textpic-imagewrap .csc-textpic-image {
		    margin-top: 20px;
		    margin-bottom: 0;
		}
	    featured{
	    	margin: 0 auto;
	    }
	    #rootline {
		    margin: 15px 0 10px;
		    padding-left: 2%;
		    font-size: 1.1em;
		}
		#rootline ul {
			list-style-type:none;
			margin:0;
			padding:0;
		}
		#rootline ul li {
		    background: url("../img/nav-footer-arrow.gif") no-repeat scroll 0 50% transparent;
		    display: inline;
		    font-size: 1em;
		    margin-left: 0;
		    padding: 0 1em 0 1.25em;
		}
		#rootline ul li.first {
			background: 0;
			padding:0;
		    padding-right:1em;
			display: none;
		}
		#roothome {
		    float: left;
		    padding-right: 1em;
		    font-size: 1.1em;
		}
		#content {
		    background-color: rgba(140, 140, 100, 0.5);
		    min-height: 200px;
		    text-align: center;
		    width: 100%;
		}
		#contentbox {
		    display: inline-block;
		    margin: 0 auto;
		    text-align: left;
		    width: 960px;
		}
	    article{
	    	float: left;
		   	color: rgba(15,40,40,0.8);
	    }
	    article header, article hr{
	    	background: transparent;
	    	height: auto;
	    	text-align: center;
	    	color: rgba(15,40,40,0.5);
	    	line-height: 1em;
		    margin-bottom: 2em;
	    }
		.headline {
		    margin: 10px 0 32px;
		}
		.title {
		    padding: 6px 0 18px;
		}
	    aside{
	    	float: left;
	    	margin-bottom: 1em;
	    }
      
    
    #full 
      
	    /* Flexslider - Style */
	    .flexslider .slides > li {
		    margin-top: 20px;
		}
	    
	    /* Fancybox - Style */
	    .fancybox-title-float-wrap {
		    margin-bottom: 2%;
		}
		.fancybox-skin {
		    padding: 2%;
		}
		.fancybox-title-float-wrap {
		    margin-bottom: 2%;
		    max-width: 100%;
		}
		.fancybox-inner !important {  }
		.fancybox-title-over-wrap {
		    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
		    bottom: 0;
		    color: #FFFFFF;
		    left: 0;
		    margin-bottom: 1%;
		    padding: 4px 0;
		    position: absolute;
		    text-align: center;
		    width: 100%;
		}

		/* Kontaktformular */
		div.csc-mailform li label {
		    height: 2.5em;
		}
		label em, legend em {
	    	margin: -21px 0 0 40px;
		    position: absolute;
		}
		label strong, legend strong {
		    color: #CC0000;
		    display: block;
		    font-size: 75%;
		    font-weight: normal;
		    line-height: 1.1em;
		    margin: -80px 0 0;
		    position: absolute;
		    text-transform: uppercase;
		}
		.form textarea {  background-color: #ededed; border: 1px solid #394545; padding:5px; }
    .form textarea:hover {border: 1px solid #ededed;}
    .form textblock { margin-left: 185px; }
		.form input[type=text] { width: 240px; margin-bottom: 1em; height: 25px; background-color: #ededed; border: 1px solid #394545; padding-left:5px; }
    .form input:hover[type=text] {border: 1px solid #ededed; }
		.form input[type=submit] { 
      margin-top: 5px; 
      margin-left: 185px;	
      font-family: 'ArvoBold', serif;
      font-size: 14px;
      color: #ffffff;
      padding: 10px 20px;
      background-color: #394545;
       }
      
      .form input:hover[type=submit] { 
      margin-top: 5px; 
      margin-left: 185px;	
      font-family: 'ArvoBold', serif;
      font-size: 14px;
      color: #ffffff;
      padding: 10px 20px;
      background-color: #0d2525;
         }
  
		/* OpenStreetMap */ 
		#OpenLayers.Map_3_events{ z-index: 0; }
		.tx-odsosm-pi1 { margin-top: 20px; }
		#slider .leaflet-container !important { height: 200px; }
		/* 100% - Sidebar unten */
		.once article{
	        width: 100%;
		}
	    .once article .headline{
	    	float: left;
	    	height: auto;
	    	width: 30%;
		}
		.once article .title{
			width: 40%;
			float: left;
		}
	    .once aside{
	        width: 100%; 
		}
		/* ⅔ - ⅓ */
		.twothirds > .inside {
			float: left;
			width: 62%;
		}
		
     #full .twothirds > .inside {width: 97%;}
    
    
		.twothirds article .headline{
	    	float: left;
	    	height: auto;
	    	width: 19%;
		}
		.twothirds article .title{
			width: 60%;
			float: left;
		}
		.twothirds aside{
			width: 30%;
			padding: 2%;
		}
		img, embed, object, video {
			max-width: 100%;
			height: auto;
			width: 100%;
		}
		DIV.csc-textpic-above DIV.csc-textpic-imagewrap,
			DIV.csc-textpic-below DIV.csc-textpic-imagewrap,
			DIV.csc-textpic DIV.csc-textpic-imagewrap UL LI,
			DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image {
			float: none;
		}
	  	  
	  /* Footer */
		footer {
	    	background-color: rgba(15, 45, 45, 0.5);
	    	float: left;
	    	width: 100%;
	    	line-height: 1.5em;
		}
		#footerbox {
	    	margin: 0 auto;
	    	width: 960px;
		}
		.thirds {
	    	float: left;
	    	height: auto;
	    	padding: 40px 2%;
	    	width: 29.3%;
	    	color: rgba(225,225,225,0.8);
		}
	/* CE Elemente ============================================================= */
	
	
	div.sidebarBox {background-color: rgba(255, 255, 255, 0.6);padding: 15px;
	-webkit-box-shadow:0px 0px 16px 2px #969696;
-moz-box-shadow:0px 0px 16px 2px #969696;
-o-box-shadow:0px 0px 16px 2px #969696;
-ms-box-shadow:0px 0px 16px 2px #969696;
box-shadow:0px 0px 16px 2px #969696;
margin-bottom: 20px;

overflow: auto;

}
	
	/* Bildelemente */
	
	/* The fraction classes are useful for column lists */
	
	
	#whitebox .full, .half, .third, .quarter, .fifth, .sixth{ width: 100%; }
	#whitebox .half, .third , .quarter , .fifth , .sixth { float: left; }
	#whitebox .full  { margin: 1.25%; padding: 1.25%; width: 95%; }
	#whitebox .half  { margin: 1.25%; padding: 1.25%; width: 45%; }
	#whitebox .third {  margin: 1.25%; padding: 1.25%; width: 28.3% }
	#whitebox .quarter {  margin: 1.25%; padding: 1.25%; width: 20% }
	#whitebox .fifth {  margin: 1.25%; padding: 1.25%; width: 15% }
	#whitebox  {
	    background-color: rgba(255, 255, 255, 0.8);
	    list-style: none outside none;
		margin-left: 0;
		font-size: 1em;
		opacity: 0.9;
	}
	#whitebox:hover {
	    background-color: rgba(255, 255, 255, 0.8);
	    opacity: 1;
	}
	#whitebox DIV.csc-textpic .csc-textpic-imagewrap .csc-textpic-image {
	    margin-bottom: 0;
	}
	#whitebox FIGCAPTION.csc-textpic-caption {
	    display: table-caption;
	    padding: 10px 0 5px;
	    font-size: 1.1em;
	}
	#whitebox p {
	    font-size: 1.3em;
	    margin: 2%;
	} 
	#whitebox header {
	    font-size: 1em;
	    margin: 2% 2% -10px;
	}
	/* 3 Spalten */
	
	.ce-thirds {
	    float: left;
	    margin: 0 2% 0 0;
	    width: 31%;
	}
	/* 2 Spalten */
	
	.ce-half {
	    float: left;
	    margin: 0 2% 0 0;
	    width: 48%;
	}
	
	    
	/* Project specifics =========================================================== */
	body{
		background-image: url(../img/background.png);
	}
	nav a {
	    color: #0D2525;
	    
	    padding: 9px 15px;
	    text-decoration: none;
	}
	nav .navactive{
		color: white;
	}
	#updateyourbrowser {display: none;}
	
	/* Superfish ================================================================= */
 
	/*** ESSENTIAL STYLES ***/
	.sf-menu, .sf-menu * {
		margin:			0;
		padding:		0;
		list-style:		none;
	}
	.sf-menu {
		line-height:	0.8;
	}
	.sf-menu ul {
		position:		absolute;
		top:			-999em;
		width:			12em; /* left offset of submenus need to match (see below) */
	}
	.sf-menu ul li {
		width:			100%;
	}
	.sf-menu li:hover {
		visibility:		inherit; /* fixes IE7 'sticky bug' */
	}
	.sf-menu li {
		float:			left;
		position:		relative;
	}
	.sf-menu a {
		display:		block;
		position:		relative;
	}
	.sf-menu li:hover ul,
	.sf-menu li.sfHover ul {
		left:			0;
		top:			37px; /* match top ul list item height */
		z-index:		99;
	}
	ul.sf-menu li:hover li ul,
	ul.sf-menu li.sfHover li ul {
		top:			-999em;
	}
	ul.sf-menu li li:hover ul,
	ul.sf-menu li li.sfHover ul {
		left:			15em; /* match ul width */
		top:			0;
	}
	ul.sf-menu li li:hover li ul,
	ul.sf-menu li li.sfHover li ul {
		top:			-999em;
	}
	ul.sf-menu li li li:hover ul,
	ul.sf-menu li li li.sfHover ul {
		left:			10em; /* match ul width */
		top:			0;
	}
	 
	/*** DEMO SKIN ***/
	.sf-menu {
		float: right;
	}
	.sf-menu a {
		border-left:	0 none;
		padding: 		12px 14px;
		text-decoration:none;
		font-weight:bold;
	}
	.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
		color: #0D2525;
	}
	.sf-menu li {
		background: transparent;
	}
	.sf-menu li li {
		border-bottom: 1px solid #ccc;
	}
	.sf-menu li:hover {
		outline: 0;
		background-color: hsla(180,0%,100%,0.6);
	}
	.sf-menu li:hover #aktiv{
		background-color: none;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	.sf-menu li #aktiv{
		background-color: #394545;
		color: #fff;
	}
	
	/*** arrows **/
	.sf-menu a.sf-with-ul {
		padding-right: 	2.25em;
		min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
	}
	.sf-sub-indicator {
		position:		absolute;
		display:		block;
		right:			.75em;
		top:			1.05em; /* IE6 only */
		width:			10px;
		height:			10px;
		text-indent: 	-999em;
		overflow:		hidden;
		background:		url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
	}
	a > .sf-sub-indicator {  /* give all except IE6 the correct values */
		top:			1.3em;
		background-position: 0 -100px; /* use translucent arrow for modern browsers*/
	}
	/* apply hovers to modern browsers */
	a:focus > .sf-sub-indicator,
	a:hover > .sf-sub-indicator,
	a:active > .sf-sub-indicator,
	li:hover > a > .sf-sub-indicator,
	li.sfHover > a > .sf-sub-indicator {
		background-position: -10px -100px; /* arrow hovers for modern browsers*/
	}
	 
	/* point right for anchors in subs */
	.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
	.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
	/* apply hovers to modern browsers */
	.sf-menu ul a:focus > .sf-sub-indicator,
	.sf-menu ul a:hover > .sf-sub-indicator,
	.sf-menu ul a:active > .sf-sub-indicator,
	.sf-menu ul li:hover > a > .sf-sub-indicator,
	.sf-menu ul li.sfHover > a > .sf-sub-indicator {
		background-position: -10px 0; /* arrow hovers for modern browsers*/
	}
	 
	/*** shadows for all but IE6 ***/
	.sf-shadow ul {
		background:	url('../images/shadow.png') no-repeat bottom right;
		padding: 0 8px 9px 0;
		-moz-border-radius-bottomleft: 17px;
		-moz-border-radius-topright: 17px;
		-webkit-border-top-right-radius: 17px;
		-webkit-border-bottom-left-radius: 17px;
	}
	.sf-shadow ul.sf-shadow-off {
		background: transparent;
	}

@media screen and (-webkit-min-device-pixel-ratio:0)
{
	img, embed, object, video {
		max-width: 100%;
		height: auto;
		width: auto;
	}
	.sf-menu {
	  line-height:0.85;
	}
}

/* For iPads and other Tablets or Displays less then 1080px ======================== */
  @media screen and (max-width: 1080px){  
  /* Header */

	#wrap > header{
	    height: 212px;
	}	
	#navbox{
	    margin-top: 13em;
	    height: 37px;
	}
	nav {
	    height: 37px;
	    width: 100%;
	    text-align: center;
	}
	.sf-menu {
	    display: inline-block;
	    float: none;
	}
	nav ul {
	    float: none;
	    position: relative;
	    top: 19px;
	    text-align: left;
	}
	nav li:hover ul {
	    top: 48px;
	    display: table;
	}
	nav li:hover #spacer {
	    top: 41px;
	}
	.menubutton{
		display: none;
	}
	#logo{
		width: 100%;
		text-align: center;
	}
	#logo img {
	    position: relative;
	    z-index: 1100;
	    display: block;
	    margin: 0 auto;
		margin-top: -11em;
	}
  /* Content */
    #contentbox{
		width: 100%;
	}
	article header{
		line-height: 2.5em;
		margin-bottom: 2em;
	}
	.title {
	    padding: 6px 0 18px;
	}
	#content article .headline{
		display: none;
	}
	#content article .title{
		width: 100%;
		float: left;
	}
  /* Sidebar */

        
  /* Footer */
  	#footerbox{
		width: 100%;
	}
	
}
/* For Smartphones, Tablets or other Displays less then 768px ====================== */
@media screen and (max-width: 768px){
  /* Header */
	#navbox{
	    margin-top: 13em;
	    height: 37px;
	}
	nav { 
		text-align: center; 
		width: 100%;
	}
	nav select {
	    background-color: rgba(255, 255, 255, 0.6);
	    border: medium none;
	    color: #0D2525;
	    display: block;
	    font-family: 'Arvo Bold',serif;
	    font-size: 100%;
	    font-weight: bold;
	    margin: 0 auto;
	    min-width: 260px;
	    position: relative;
	    top: 25px;
	    width: 60%;
	    height: 25px;
	}

	.sf-menu {
	    display: none;
	}

  /* Content */
  	article header{
  		text-align: left;
  		line-height: 3em;
  	}
	.twothirds article{
		width: 100%;
	}
	#content article .headline{
		display: none;
	}
	#content article .title{
		width: 100%;
	}
    
  /* Sidebar */
	.twothirds > .inside, .twothirds aside{
		width: 96%;
	}
	
  	#full .twothirds aside {display: none;}

    /* make all pictures at least half */
    .third li{  margin: 1.25%; padding: 1.25%; width: 45%; }
	.quarter li{  margin: 1.25%; padding: 1.25%; width: 45%; }
	.fifth li{  margin: 1.25%; padding: 1.25%; width: 45%; }
	
  /* Footer */
  	footer .thirds {
	    border-bottom: 1px solid lightgray;
	    float: left;
	    height: auto;
	    line-height: 15px;
	    padding: 10px 2%;
	    text-align: center;
	    width: 96%;
	}
	
	/* CE Elemente */
	/* 3 Spalten */
	
	.ce-thirds {
		margin: 0; 
	    width: 100%;
	}
  
  
  	.form input[type=submit] {  margin-left: 0px;}

}


/* make all pictures full */
@media screen and (max-width: 479px){
    .half li{  margin: 1.25%; padding: 1.25%; width: 95%; }
    .third li{  margin: 1.25%; padding: 1.25%; width: 95%; }
	.quarter li{  margin: 1.25%; padding: 1.25%; width: 95%; }
	.fifth li{  margin: 1.25%; padding: 1.25%; width: 95%; }
}
/* responsibility des Sliders */
@media screen and (max-width: 960px){
    #shadow img{
    	width: 100%;
    }
    #slider {
    	width: 95%;
    }
}


div.sideBarInner .clearfix {margin: auto; width: 103%;}
  #full .sidebarBox { padding: 30px;}

div.csc-mailform ol li {
	display: block!important;
}