@charset "UTF-8";

/* ------------------------------------------
  RESET
--------------------------------------------- */

body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, dl, dt, dd, ol, ul, li, hr,
fieldset, form, label, legend, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section,
summary, hgroup {
  margin: 0;
  padding: 0;
  border: 0;
}

a:active,
a:hover {
  outline: 0;
}

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

/* ------------------------------------------
  BASE STYLES
--------------------------------------------- */

html {
    background: #f4f4f4;
    height: 100%;
}

body {
  max-width: 920px;      
  margin: 0 auto;
  color: #797979;
  height: 100%;
  font-family: Verdana, sans-serif;
  font-size: 90%;
}

#page {
    width: auto;
    min-height: 100%;
    position: relative;
    background: #fff;
    margin: 0 auto;
}

/* ----- HEADER ----- */
#header_large {
  display: none;
    height: 323px;
    width: 100%;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #ff309b;
    background: #8c8c8c;
}

#header_small{
    height: 120px;
    width: 100%;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #ff309b;
    background: #fff url('../images/logo.jpg') no-repeat top right;
    }

div.toptext1{
  text-decoration: capitalize;
  color: #ff0084;
  font-size: 160%;
  font-weight: normal;
  padding: 0px 0px 0px 5px;
}

div.toptext2{
  color: #ff0084;
  font-size: 90%;
  font-weight: normal;
  padding: 0px 0px 0px 5px;
}

div.toptext3{
  text-decoration: capitalize;
  color: #4c4c4c;
  font-size: 100%;
  font-weight: normal;
  padding: 5px 0px 0px 5px;
}

/* ----- TOPMENU (MAIN) ----- */

/** Formatierung für mobile Ansicht **/

/** Top-Navigation wird als vertikale Liste über die komplette Breite dargestellt **/

#topmenu {
  display: inline;
	width: 100%;
	padding: 0;
	margin-top: 0;
	height: 35px;
  border-bottom: 1px solid #ff309b;
	background-color: #8c8c8c;
	color: #ffffff;
}

#topmenu nav {
	display: none;
}

#topmenu nav ul {
 	padding: 0px;
 	margin: 0px;
 	width: auto;
}
 
#topmenu nav ul {
	padding: 10px 0;
	border-bottom: 1px solid #ff309b;
	background: #8c8c8c; /* Old browsers */
  }

#topmenu nav ul li a
    {
  color: #ffffff;
	text-decoration: none;
}

#topmenu nav ul li a:active,
#topmenu nav ul li a.aktuell,
#topmenu nav ul li a:hover
    {
    color: #ffdaef;
}



/** Anpassungen Checkbox+Label (Button) **/

#topmenu input#open-menu {
	display: none;
}

#topmenu input[type=checkbox]:checked ~ nav {
    display: block;
}
	
#topmenu label.open-menu-label {
	padding: 10px 0px 10px 10px;
	display: block;
	border-bottom: 1px solid #ff309b;
	background: #8c8c8c; /* Old browsers */
}

/* ----- FOOTER ----- */
#footer {
		display: block;
    text-align: center;
		width: 100%;
		padding: 10px 0px 10px 0px;
		min-height: 30px;
		clear: both;
    background-color: #797979;
    border-top: 1px solid #ff309b;
		color: #fff;
		float: left;
    font-size: 90%;
	}

#footer a{
		color: #fff;
}

/* ----- CONTENT ----- */
#content {
    width: 100%;
    padding: 20px 0px 10px 0px;
    float: right;
    font-size: 90%;
    background: #fff;
}

#content h1{
    font-size: 120%;
    text-decoration: underline;
    margin: 0px 0px 15px 0px;
    color: #797979;
}

#content h2{
    font-size: 100%;
    text-decoration: underline;
    margin: 0px 0px 15px 0px;
    color: #ff309b;
}

#content a{
    color: #797979;
}

#content a.toggle{
    text-decoration: none;
}

#content div.toggle{
    padding: 0px 0px 0px 20px;
}

#content p{
    padding: 0px 0px 10px 0px;
}

#content ul{
    margin: 0px 0px 0px 10px;
    padding: 0px 0px 0px 10px;
}

#container{
    width: 98%;
    margin: 0 auto;
}

#contenttext{
    padding: 0;
    width: 100%;
}

#contentbilder{
    padding: 0;
    width: 100%;
}

#contentbilder a{
    text-decoration: none;
    display: block;
}

#contentbilder img{
  border: 1px solid #8c8c8c
}

#contenttext ul li {
		padding: 0px 0px 0px 5px;
		margin: 0px 0px 0px 30px;
	}

#content table{
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

#content td {
    border: 0px solid #8c8c8c; 
    text-align: left; 
    vertical-align: top;
    padding: 0;    
}

#content td.rahmen {
    border: 1px solid #8c8c8c; 
    text-align: left; 
    vertical-align: top;
    padding: 1px 1px 1px 1px;    
}

#content td.datum {
    font-weight: bold;    
    width: 100px;
}

#content td.text {
    width: auto;
}

#content td.bild {
    width: auto;
}

#content td.datumteam {
    font-weight: normal;    
    width: 100px;
}

#contentbilder div.subnavi{
   color: #797979;
    padding: 0;
    margin: 0;
}

#contentbilder div.subnavi div {
    width: 150px;
    color: #8c8c8c;
    margin-bottom: 10px;
    border-bottom: 1px solid #8c8c8c; 
}

#contentbilder div.subnavi a.subaktuell {
    width: 150px;
    background-color: #8c8c8c;
    color: #ffdaef;
}

#contentbilder div.subnavi img {
    display: none;
}

img.rahmen{
  border: 1px solid #8c8c8c
}

ol{
  margin-left: 20px;
}

/** Formatierung für Tablet und Desktopansicht **/

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

	/** Top-Navigation wird horizontal dargestellt / Sub-Navigation vertikal**/

  #header_large {
    display: block;
  }

  #header_small{
    display: none;
  }

  #topmenu {
    display: block;
    }
    
	#topmenu nav {
		display: block;
		float: center;
		width: 650px;
		margin: 0 auto;
		background: #8c8c8c; /* Old browsers */
	}

	#topmenu ul {
		display: inline;
		float: center;
		margin-top: 0px;
		list-style: none;
		background: #8c8c8c; /* Old browsers */
	}

	#topmenu nav ul li {
		padding: 0;
		border: 0px solid white;
		float: left;
		list-style: none;
	}

	#topmenu nav a {
		text-decoration: none;
		display: block;
		padding: 7px 8px;
		font-weight: normal;
		color: #ffffff;
	}
	
	/** Label wird ausgeblendet **/
	#topmenu label.open-menu-label {
		display: none;
	}

  #container{
    width: 90%;
    margin: 0 auto;
  }
  
  #content {
    background: #fff url('../images/balkenlinks.jpg') repeat-y top left;
  }

  #content td {
    padding: 2px 5px 2px 5px;    
}

  #content td.bild {
      width: 150px;
}

  #contentbilder{
      display: block;
      padding: 20px 0px 5px 0px;
      width: 20%;
      float: left;
  }
  
  #contentbilder img{
      display: block;
      border: 1px solid #8c8c8c
  }
  
#contentbilder div.subnavi img {
    display: block;
}

  #contenttext{
      padding: 20px 0px 5px 0px;
      width: 70%;
      float: right;
  }

}