/* =================================================
02 Stylesheet für Erfassung Mehrkampf Tablettversion
03 Stand: Stylesheet 
04 Datei: bildschirmm.css
05 Datum: 2018-07-04
06 Autor: Martin Blunier
07 Aufbau: 1. Kalibrierung und Restauration
08         2. Allgemeine Styles
09         3. Styles für Layoutbereiche
10         4. Sonstige Styles
11 ================================================== */

 /* ======================================
14 1. Kalibrierung und Restauration
15 ====================================== */
 /* Reset - alle Abstände auf NULL */
 * { padding: 0; margin: 0; }
 

/* Abstand nach unten */
h2, p, ul, ol { margin-bottom: 1em; }

/* Verschachtelte Listen ohne Abstand */
ul ul { margin-bottom: 0; }

/* Abstand von links */
li { margin-left: 2em; }




 

 /* ======================================
 2. Allgemeine Styles
 ====================================== */
 body {
   background-color: #d8d5e0;
   color: black;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: small; /* Schriftgröße */
 }

 h1 { font-size: 150%; }
 h2 { font-size: 130%; }
 h3 { font-size: 110%; }
 h4 { font-size: 100%; }
 h5 { font-size: 80%; }
 h6 { font-size: 60%; }
  
 
/* Gestalte die Grafik mit id="logo" */
img#logo { 
  background-color: white;
  color: black;
     img-position: center top;

}

address {
  text-align: center; /* zentrieren */
  font-size: 50%; /* etwas kleiner als der Rest */
  font-style: normal; /* normale Schrift, nicht kursiv */
  letter-spacing: 2px; /* Abstand zwischen den Buchstaben */
  line-height: 1.5; /* Zeilenabstand, ohne Einheit */
}

input#wert1,
text {
  text-align: center; /* zentrieren */
  font-size: 150%; /* etwas kleiner als der Rest */
  font-style: normal; /* normale Schrift, nicht kursiv */
  letter-spacing: 2px; /* Abstand zwischen den Buchstaben */
  line-height: 1.5; /* Zeilenabstand, ohne Einheit */
}

a { text-decoration: none; } /* Unterstreichung entfernen */


 a:link { color: #d900000; }
 a:visited { color: #cc6666; }
 a:hover,
 a:focus {
   border-bottom: 1px solid #d90000;
 }
 a:active {
   color: white;
   background-color: #d90000;
 }


 /* ======================================
66 3. Styles für die Layoutbereiche
67 ====================================== */
 
/* Gestalte das div mit id="wrapper" */
div#wrapper {
  background-color: #d4d4d4;
  color: black;
  width: auto;
  margin-top: 1px;
  margin-right: 2px; /* Abstand rechts */
  margin-bottom: 3px;
  margin-left: 2px; /* Abstand links */
}

div#kopfbereich {
  background-color: #FFFFFF; /* weiss */
  color: white;

  background-position: left top;

  padding-top: 1px;
  padding-right: 1px;
  padding-bottom: 0;
  padding-left: 1px;
}

div#kopfbereich p span {
  color: #ff0000; /* Schriftfarbe */
}

div#kopfbereich p {
  color: #000000; /* Schriftfarbe */
    border-left: 100px solid #FFFFFF;
}




div#auswahlbereich {   /* weiss */
  background-color: #9F81F7; /*   */
  color: white;

  background-position: left top;

  padding-top: 1px;
  padding-right: 1px;
  padding-bottom: 0;
  padding-left: 1px;
  height: auto;
  width:  auto; 
  vertical-align:top;
}

div#auswahlbereich p span {
  color: #000000; /* Schriftfarbe */
}

div#auswahlbereich p {
  color: #000000; /* Schriftfarbe */
    border-left: 100px solid #FFFFFF;
}




#navibereichko {
  text-align: right; /* Kopfbereich rechtsbündig */
  color: black;
 
  padding: 1px 1px 1px 1px;
 /* border-bottom: 1px solid #8c8c8c; */
}

#navibereichko ul { margin-bottom: 0; }
#navibereichko li {
  display: inline;
  list-style-type: none;
    margin: 0; /*  
}
#navibereichko a { color: black;
  background-color: #ffeda0;
  padding: 1px 1px 1px 1px;
   border: 1px solid #8c8c8c;  

 }

#navibereichko a:hover,
#navibereichko a:focus {
  color: black;
  background-color: white;
  border-bottom-color: white; /* war #d90000 */
}
#navibereichko a:active {
  color: black;
  background-color: white;
  border-bottom-color: white;
}




 /* "Sie sind hier" */

 #startseite #navi01 a,
 #kontaktseite #navi02 a {
   color: black;
   background-color: white;
   border-bottom-color: white;
 }








#navibereich {
  text-align: right; /* rechtsbündig */
  color: #f7f7f7;
 
  padding: 5px 10px 4px 10px;
  border-bottom: 1px solid #8c8c8c;
}

#navibereich ul { margin-bottom: 0; }
#navibereich li {
  display: inline;
  list-style-type: none;
    margin: 0; /*  
}
#navibereich a { color: black;
  background-color: #ffeda0;
  padding: 4px 8px 4px 8px;
  border: 1px solid #8c8c8c;

 }

#navibereich a:hover,
#navibereich a:focus {
  color: black;
  background-color: white;
  border-bottom-color: white; /* war #d90000 */
}
#navibereich a:active {
  color:  #f7f7f7;
  background-color: white;
  border-bottom-color: white;
}

 /* "Sie sind hier" */

 #startseite #navi01 a,
 #kontaktseite #navi02 a {
   color: black;
   background-color: white;
   border-bottom-color: white;
 }


 

ul#navi , ul#navi ul {
 width:9.375em;  /* entspricht einer Breite von 150px (150 / 16 )*/
 float:left;
 background:transparent;
}


ul#navi  li  {
 position:relative;
}


ul#navi a {
 display:block;
 padding:0px;
 color:#fff;
 font-weight:bold;
}

ul#navi ul  ,                     /* 1. Ebene verschieben */
ul#navi  li:hover ul ul ,         /* 2. Ebene verschieben */
ul#navi  li:hover  ul ul ul       /* 3. Ebene verschieben */
ul#navi  li:hover  ul ul ul ul {  /* 4. Ebene verschieben */
 position:absolute;
 left:-9999px;
 top:0;
 background:#000;
}

ul#navi li:hover ul ,
ul#navi ul  li:hover  ul , 
ul#navi ul  ul li:hover  ul 
ul#navi ul  ul ul li:hover  ul 
    {
 left:9.375em; /* entspricht 150px */
 }


ul#navi li:hover > a , 
ul#navi  ul li:hover  > a, 
ul#navi ul  ul  li:hover  > a, 
ul#navi ul  ul ul  li:hover  > a 
ul#navi ul  ul ul ul li:hover  > a 
 {
  background:transparent;
  color:#fff;
}




div#textbereich {
  padding-top: 20px ;
  padding-right: 10px;
  padding-bottom: 20px;
  padding-left: 20px;
}



nav {
    width: 100%;
    background-color: #e6e6e6;
	    color: #919191;
}
nav ul {
    padding: 0px;
    margin: 0px;

    box-shadow: 1px 1px 1px #dfdfdf;
    -moz-box-shadow: 1px 1px 1px #dfdfdf;
    -webkit-box-shadow: 1px 1px 1px #dfdfdf;
}

nav ul:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}

nav ul,nav ul li{
    background-color: transparent;
}
nav ul li {
    list-style: none;
    float:left;

    border-right: 1px solid #fdfdfd;
}
nav ul li a {
    text-decoration: none;
    display: block;
    color: #919191;
    padding: 5px 10px 5px 10px;

    transition: background 0.3s ease-out; /* explorer 10 */
    -webkit-transition: background 0.3s ease-out; /* chrome & safari */
    -moz-transition: background 0.3 ease-out; /* firefox */
    -o-transition: background 0.3 ease-out; /* opera */
}

nav ul li.cat1:hover a, nav ul li.cat1:hover > ul li a  {
    background-color:  #edebeb;
}
nav ul li.cat2:hover a, nav ul li.cat2:hover > ul li a  {
    background-color:  #edebeb;
}
nav ul li.cat3:hover a, nav ul li.cat3:hover > ul li a {
    background-color: #edebeb;
}
nav ul li.cat4:hover a, nav ul li.cat4:hover > ul li a {
    background-color: #edebeb;
}
nav ul li.cat5:hover a, nav ul li.cat5:hover > ul li a {
    background-color: #edebeb;
}
nav ul li.cat6:hover a, nav ul li.cat6:hover > ul li a {
    background-color: #edebeb;
}


nav ul li.cat7:hover a, nav ul li.cat7:hover > ul li a {
    background-color: #edebeb;
}
nav ul li.cat8:hover a, nav ul li.cat8:hover > ul li a {
    background-color: #edebeb;
}
nav ul li.cat9:hover a, nav ul li.cat9:hover > ul li a {
    background-color: #edebeb;
}
nav ul li.cat10:hover a, nav ul li.cat10:hover > ul li a {
    background-color: #edebeb;
}




nav ul li:hover > a {
    color: #AEB404;
}
nav ul li:hover > ul {
    visibility: visible;
}

nav ul li ul{
    display: inline;
    visibility: hidden;
    position: absolute;
    padding:0px;
}
nav ul li ul li{
	float: none;
}
nav ul li ul li a {
    color: #AEB404;
}
nav ul li ul li a:hover{
	color: #000000;
	background-color: #AEB404 !important;
}



div#textbereich a {
  border-bottom: 1px dotted #cc0000;
}
div#textbereich a:hover,
div#textbereich a:focus {
  border-bottom: 1px solid #d90000;
}



div#steuerung {
	background-color: #FFFaFa;
	width: 50em;
        height: auto;
	float:left;
}

div#zweite_spalte {
	background-color: #FFFaFa;
	margin-left: 16em;
}


div#fussbereich {
  background-color: #FFFFFF; 
  color: black;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-top: 50px; /* unterhalb Rahmenlinie */
  border-top: 1px solid #8c8c8c; /* Linie oben */
  margin-top: 20px; /* oberhalb Linie */
}

 div#fussbereich2 {
  background-color: #FFFFFF; 
  color: #FFFFFF;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-top: 50px; /* unterhalb Rahmenlinie */
 
  margin-top: 20px; /* oberhalb Linie */
}

/* ======================================
101 4. Sonstige Styles
102 ====================================== */

 p.infobox {
  color : black;
  background-color: #FFFFFF;
  border: 5px solid #ecf7dd;
  height: 50px;
  width:  150px; 


}




 td.infoboxs1 {
  color : black;
  background-color: #FFFFFF;
  border: 5px solid #ecf7dd;
  height: autopx;
  width:  25%; 
  vertical-align:top;
}

 td.infoboxs2 {
  color : black;
  background-color: #FFFFFF;
  border: 5px solid #ecf7dd;
  height: auto;
  width:  50%; 
  vertical-align:top;
}

 td.infoboxs3 {
  color : black;
  background-color: #edebeb;
  border: 5px solid #ecf7dd;
  height: auto;
  width:  25%; 
  vertical-align:top;
  
}



 tr.infobox {
  color : black;
  background-color: #FFFFFF;
  border: 5px solid #ecf7dd;
  height: 200px;
  width:  350px; 
  vertical-align:top;
}

 tr.infobox2 {
  color : black;
  background-color: #FFFFFF;
  border: 5px solid #ecf7dd;
  height: auto;
  width:  40%; 
  vertical-align:top;
}

 tr.infobox3 {
  color : black;
  background-color: #edebeb;
  border: 5px solid #ecf7dd;
  height: auto;
  width:  30%; 
  vertical-align:top;
  
}




 td.infobox {
  color : black;
  background-color: #FFFFFF;
  border: 5px solid #ecf7dd;
  height: 200px;
  width:  350px; 
  vertical-align:top;
}

 td.infobox2 {
  color : black;
  background-color: #FFFFFF;
  border: 5px solid #ecf7dd;
  height: auto;
  width:  40%; 
  vertical-align:top;
}

 td.infobox3 {
  color : black;
  background-color: #edebeb;
  border: 5px solid #ecf7dd;
  height: auto;
  width:  30%; 
  vertical-align:top;
  
}

/* Formulaf */ 
form {
  background-color: #eee;
  width: auto; /* Breite des Formulars */
  padding: 20px;
  border: 1px solid #8c8c8c;
}
label { /* Beschriftung auf eigener Zeile */
  display: block;
 
  cursor: pointer; /* Mauszeiger wird zur Hand */
}
input#absender,
textarea {
  
  border: 1px solid #8c8c8c;
  margin-bottom: 1em;
}
textarea {
 
}

input:focus,
textarea:focus {
  background-color: #d9d9d9;
}

 input#wert1,
 text {
  width: 80px;
   height: 2em;
   padding-top: 10px; /* unterhalb Rahmenlinie */
   border: 2px solid #8c8c8c;
   margin-bottom: 1em;
   font-size: 110%;

}

 
 

}
text {
  height: 20em;
}




 




 










 /* =======================================
107 E N D E   D E S   S T Y L E S H E E T S
108 ======================================= */







.layout {
  display: flex;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
  background: #fafcfa;
}
 
.layout > * {
  padding: 5px;
  flex: 1 100%;
}
 
.topnavigation {
  background: #98FB98;
}
 
.navigation {
  list-style: none;
  margin: 0;
  display: flex;
  justify-content: flex-end;
}
 
.topnavigation a {
  text-decoration: none;
  display: block;
  padding: 0.2em;
  color: black;
}
 
.topnavigation a:hover {
  text-decoration: none;
  display: block;
  color: violet;
}
 
aside ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  flex-flow: column wrap;
}
 
aside a {
  text-decoration: none;
  display: block;
  padding: 0.2em;
  color: black;
}
 
aside a:hover {
  text-decoration: none;
  display: block;
  color: black;
}
 
.left li {
  border: 1px solid black;
  margin-bottom: 2px;
  width: auto;
  height: auto;
}
 
.left li:first-of-type {
  margin-top: 10px;
}
 
.header {
  background-color: #FFFFFF; /* weiss */
  color: white;

  background-position: left top;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 0;
  padding-left: 20px;
}

.header p span {
  color: #ff0000; /* Schriftfarbe */
}

.header p {
  color: #000000; /* Schriftfarbe */
    border-right: 10px  solid #FFFFFF;
}
 
.footer {
  background: #FFFFFF;
  text-align: center;
  color: grey;
}
 
.content {
  
  text-align: left;
  background: #fafcfa ;
  color: black;
}
 
 


.left {
   	
  text-align: left;
  background: #fcf3f2;
  color: black;
}
 
.right {
 
  text-align: left;
  background: #fcf3f2;
  color: black;
}

 
 
@media all and (min-width: 600px) {
  .left, .right {
     flex: 1 auto;
  }
} 
 
@media all and (max-width: 600px) {
  .navigation {
      flex-flow: column wrap;
      padding: 0;
  }
 
  .topnavigation {
      padding: 0px;
  }
 
  .topnavigation a {
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
  }
} 


@media all and (max-width: 797px) {
  .navigation {
    justify-content: space-around;
  }
 
  .right {
    border-top: 1px solid black;
  }
 
  .left li {
    border: 0;
    margin-bottom: 2px;
    height: auto;
  }
 
  .left li:first-of-type {
    margin-top: 5px;
  }
}
 
 
 @media all and (min-width: 797px) {
  .content {
    width: 80%;	  
	    flex: 3 1px;
    order: 2;
 
  }

 
 
  .left {
	    width: 10%;	
        order: 1;
		right:0;
		margin-left:0;	 
        border: 1px solid black;
		 
  }
 
  .right {
	 width: 10%;		 
    order: 3;
    border: 1px solid black;
	     
  }

 

  .footer {
    order: 5;
  }
}
 
 
 
body {
  padding: 2em;
}

 

#article {
    margin: 0 auto;
    width: 75%; 
    column-count: 5;
      -moz-column-count: 5;
      -webkit-column-count: 5;
}