﻿/*
body {
  background: #212121;
  font-size: 1em;
  line-height: 32px;
  color: #ffffff;
  margin: 0;
  padding: 0;
  word-wrap: break-word !important;
  font-family:"Calibri Light",'roboto', sans-serif;
}
*/

h1 {
  font-size: 1.5em;
  text-align: center;
  color: #FFF;
}

h3 {
  font-size: 1.25em;
  line-height: 34px;
  text-align: center;
  color: #FFF;
}

h3 a { color: #FFF; }

.headerText {
	color: white; /*#3366CC;*/
}
nav a { color: #FFF; }

h1 {
  margin-top: 100px;
  text-align: center;
  font-size: 60px;
  line-height: 70px;
  font-family: 'Calibri Light','roboto', sans-serif;
}

#container {
  margin: 0 auto;
  max-width: 890px;
}

p { text-align: center; }
 .toggle, [id^=drop] {
 display: none;
}

nav {
  margin: 0;
  padding: 0;
  background-color: #4F81BD /*#6388FF; /*#254441;*/

}

#logo {
  display: block;
  padding: 0 30px;
  float: left;
  font-size: 1.2em;
  line-height: 60px;
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

nav ul {
  float: left;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  z-index:10;
}

nav ul li {
  margin: 0px;
  display: inline-block;
  float: left;
  background-color: #4F81BD; /*#6388FF; /*#254441;*/
  z-index:10;
  /* NEW */
  border-bottom:1px solid silver;
}

nav a {
  display: block;
  padding: 0 15px;
  color: #FFF;
  font-size: 1.0em;
  line-height: 40px;/*50px; /*60px*/
  text-decoration: none;
}

nav ul li ul li:hover { background:darkgray; /* #000000;*/ }

nav a:hover { background:darkgray; /* #000000;*/ }

nav ul ul {
  display: none;
  position: absolute;
  top:40px;/*50px;/* 60px;*/
  z-index:10;
}

nav ul li:hover > ul { display: inherit; }

nav ul ul li {
  width: 220px;/*170px; - Achtung Abhängigkeiten!!*/
  float: none;
  display: list-item;
  position: relative;
  z-index:10;
}

nav ul ul ul li {
  position: relative;
  top:-40px;/*-50px;/* -60px;*/
  left: 220px; /*170px;*/
  z-index:10;
}

/* li > a:after { content: ' +'; } - original */
li > a:after { content: ' +'; }

li > a:only-child:after { content: ''; }


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 768px) {

#logo {
  display: block;
  padding: 0;
  width: 100%;
  text-align: center;
  float: none;
}

nav { margin: 0; }

/* New - mobile Menü aktivieren */
label[for=drop] {
	background: #4F81BD; /*#6388FF; /*black*/
	color:white;
	/*New */ /*line-height:80px;  */
}


label[for=drop]:hover {
	background-color:darkgray; /*#333333; */
}

.toggle + a,
 .menu { display: none; }

.toggle {
  display: block;
  background-color:#4F81BD; /*#6388FF;/* #254441;*/
  padding: 0 20px;
  color: #FFF;
  font-size: 1em;
  line-height:40px; /* 60px; */
  text-decoration: none;
  border: none;
}

.toggle:hover { background-color:darkgray;/* #000000;*/ }

[id^=drop]:checked + ul { display: block; }

nav ul li {
  display: block;
  width: 100%;
}

nav ul ul .toggle,
 nav ul ul a { padding: 0 40px; }

nav ul ul ul a { padding: 0 80px; }

/* New - 3rd level li? Test */
nav ul ul ul li a:hover {
	background-color:#333333;
}

nav a:hover,
 nav ul ul ul a { background-color:darkgray;/* #000000;*/ }

nav ul li ul li .toggle,
 nav ul ul a { background-color:silver;/* #212121;*/ }

nav ul ul {
  float: none;
  position: static;
  color: #ffffff;
}

nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }

nav ul ul li {
  display: block;
  width: 100%;
}

nav ul ul ul li { position: static;

}

/* Headertext ausblenden */
.headerText {
	display:none;
}

.headerAppTitle {
	font-family: "Calibri light",Tahoma,Segoe UI;
	font-size: 1.1em;
	float: left;
	padding-top: 20px;
	margin-left: 1em;
	display:inline-block;
}

@media all and (max-width : 460px) {

nav ul li {
  display: block;
  width: 94%;
}

.headerAppTitle {
	font-family: "Calibri Light",Tahoma,Segoe UI;
	font-size: 1.0em;
	float: left;
	/*margin-left: 180px;*/
	display:block;
	/*margin-top:20px;*/
	margin-top:50px;
	/*position:relative;*/
	position:absolute;
	clear:both;
	color:white; /*#3366CC;*/
}

.header {
	height:100px;
}

.logo {
	height:60px;
	width:auto;
}

}