/** Main.css**/
/** Layout **/


html {
  overflow-y: scroll;
  height: 100%;
  font-size: 16px;
  line-height: 24px;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  border-top: 4px solid #9f111b;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 1em;
  line-height: 1.5;
  color: #292c37;
}

/* Anpassen Boxmodel */
* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

*:before,
*:after{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

/* Headlines */
h1, h2, h3, h4 {
  font-weight: 700;
}

h1 {
  font-size: 2.375em;
  line-height: 1.26315789em;
  margin-top: 1.5em;
  margin-bottom: 1.2631579em;
  color: #9f111b;
}

h2 {
  font-size: 1.75em;
  line-height: 1.71428571em;
  margin-top: 0.85714286em;
  margin-bottom: 0.85714286em;
}

h3 {
  font-size: 1.3125em;
  line-height: 1.14285714em;
  margin-top: 1.14285714em;
  margin-bottom: 0em;
}
h4,
h5,
h6 {
  font-size: 1em;
  line-height: 1.5em;
  margin-top: 1.5em;
  margin-bottom: 0em;
}

/* sonstige Abstände und Elemente */
p, ul, ol, pre, table, blockquote {
  margin-top: 0em;
  margin-bottom: 1.5em;
}
ul ul, ol ol, ul ol, ol ul {
  margin-top: 0em;
  margin-bottom: 0em;
}

ul {
  list-style: square;
}

ol {
  list-style: decimal;
}

li {
  margin-left: 2em;
}

hr {
  border: 1px solid #292c37;
  margin: -1px 0;
}

/* Links */
a,
a:visited {
	color: #9f111b;
	text-decoration: underline;
}

a:hover,
a:focus,
a:active {
	color: #710c13;
  outline: 0;
}

a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

/** Layout **/
#wrapper {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

/** Navigations css **/

@media screen {
/* ====================================
   Horizontale Navigation – Erste Ebene 
   ==================================== */
#header .mod_navigation {
  background: #ADCBE6;
  color: #000;
  padding: 0 15px;
  margin-top: 12px;
}
#header .mod_navigation ul {
  float: left;
  width: auto; /* schrumpft die Liste */
  margin-bottom: 0;
}
#header .mod_navigation li {
  float: left;
  width: auto; /* schrumpft die Listenelemente */
  list-style-type: none;
  border-right: 1px solid #89adcd; /* Trennstriche rechts */
  margin: 0 ;
}
#header .mod_navigation li.first {
  border-left: 1px solid #89adcd; /* Trennstrich am Anfang */
}
#header .mod_navigation a,
#header .mod_navigation span {
  display: block;
  min-width: 78px;
  background-color: transparent; color: #000;
  text-align: center; text-decoration: none;
  padding: 8px;
}
#header .mod_navigation .active,
#header .mod_navigation .trail {
  background-color:#2D5B85; color: #fff;
}
#header .mod_navigation a:hover,
#header .mod_navigation a:focus {
  background-color: #2D5B85; color: #fff;
}

/* ======================================
   Horizontale Navigation – Zweite Ebene
   ====================================== */
/* Möglichkeit 1: Zwei horizontale Ebenen */
/*
#container {
  padding-top: 1.5em;
}
#header ul.level_2 {
  position: absolute;
  left: auto;
  top: auto;
  background-color: #ddd;
}
#header .level_2 li,
#header .level_2 li.first {
  border: none;
}
*/

/* Möglichkeit 2: Dropdown-Navigation */ 
/* Listenelemente zweite Ebene untereinander */
#header .level_2 li {
  clear: both;
  border: none;
}
/* Zweite Ebene ausblenden */
#header .level_2 {
  position: absolute;
  left: –9999px;
  top: –9999px;
  overflow: hidden;
  display: inline;
  width: 0;
  height: 0;
  z-index: 1; /* "nach vorne", über den Inhaltsbereich */
}
/* Zweite Ebene bei MouseOver einblenden */
#header li:hover .level_2 {
  left: auto;
  top: auto;
  overflow: auto;
  display: block;
  width: auto;
  min-width: 78px;
  height: auto;
  background-color: #ADCBE6;
  border-bottom: 1px solid #2D5B85;
}
#header .level_2 li.first { border: none; }

/* Optional: Zweite Ebene linksbündig ausrichten */ 
/* #header .level_2 li a { text-align: left; } */


/* ====================
   Vertikale Navigation 
   ==================== */
#left div.mod_navigation {
  float: left;
  width: 142px;
  font-size: 12px;
  margin: 32px 0;
}
#left .mod_navigation ul{
  background-color: #fff;
  padding: 0;
  margin: 0;
}
#left .mod_navigation li{
  margin: 0;
  list-style-type: none;
}
/* Menüpunkte gestalten */
#left .mod_navigation a,
#left .mod_navigation span {
  display: block;
  text-decoration: none;
  background-color: #89adcd;
  color: #000;
  padding: 8px 8px 8px 18px;
  border-top: 1px solid #fff;
}
/* Rollover und TAB-Fokus */
#left .mod_navigation a:hover,
#left .mod_navigation a:focus {
  background: #2D5B85;
  color: #fff;
}
/* Aktiven Menüpunkt hervorheben */
#left .mod_navigation span.active,
#left .mod_navigation .trail {
  background: #2D5B85;
  color: #fff;
}

/* Vertikale Navigation 
   Zweite Navigationsebene */

/* Unterpunkte links einrücken */
#left .mod_navigation li li a,
#left .mod_navigation li li span {
  margin-left: 18px;
}
/* Hervorhebung für Unterpunkte */
#left .mod_navigation li li a:hover,
#left .mod_navigation li li a:focus {
  background-color: #2D5B85;
  color: #fff;
}
/* Alle Links im aktiven Listenelement einfärben */
#left .mod_navigation .submenu a {
  background-color: #ADCBE6;
  color: #000;
}


} /* Ende @media */