/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 06.03.2020
    Author     : Lars
*/

/****** nav ******/

nav{
    margin-left:auto; 
    margin-right:auto;
    width: 60%;
}

@media only screen and (max-width: 1080px){
    nav{
        width: 100%;
    }
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: lightblue;
}

nav li {
    float: right;
    border-left: 1px solid black;
}

nav li a {
    display: block;
    color: black;
    text-align: center;
    padding: 10px 16px;
    text-decoration: none;
}

nav li a:hover {
    background-color: #4da6ff;
}

/****** header ******/

header{
    background: darkblue;
    color: white;
    text-shadow: 1px 1px black;
    font-family: "Courier New", monospace;
    font-weight: bold;
    text-align: center;
    padding: 5px;
    height: 100px;
    font-size: 16pt;
    margin-left:auto; 
    margin-right:auto;
    width: 60%;
}

@media only screen and (max-width: 1080px){
    header{
        width: 100%;
    }
	
}

header img{
    
    height: 100%;
    width: auto;
    float:right;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width: 1080px){
    img{
        width: 10%;
    }
}

/****** footer ******/

footer {
    background: whitesmoke;
    color: black;
    font-family: "Courier New", monospace;
    text-align: center;
    padding: 5px;
    bottom: 20px;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    
}

@media only screen and (max-width: 1080px){
    footer{
        width: 100%;
    }
}

footer a:link, a:visited {
  text-decoration: none;
  color: black;
}

footer a:hover, a:active {
  text-decoration: underline;
  color: darkgray;
}

/****** main ******/

main{
    margin-left:auto; 
    margin-right:auto;
    width: 60%;
}

@media only screen and (max-width: 1080px){
    main{
        width: 100%;
    }
}

/****** sections ******/

section.Datenschutz{
    margin-left:auto; 
    margin-right:auto;
    width: 100%;
    text-align: justify;
}

/****** form ******/

form{
    margin-left:auto; 
    margin-right:auto;
    width: 80%;
}

@media only screen and (max-width: 1080px){
    form{
        margin-left:auto; 
        margin-right:auto;
        width: 90%;
    }
}

form input[type=submit]{
    border-radius: 4px;
    border: none;
    font-size: 24px;
    align-content: center;
    vertical-align: middle;
    color: black;
    background-color: lightblue;
    width:100%;
}

form input[type=submit]:hover{
    border-radius: 4px;
    border: none;
    font-size: 24px;
    align-content: center;
    vertical-align: middle;
    color: black;
    background-color: #4da6ff;
    width:100%;
}

form input[type=submit]:disabled{
    border-radius: 4px;
    border: none;
    font-size: 24px;
    align-content: center;
    vertical-align: middle;
    color: darkgray;
    background-color: lightgray;
}

input:required + label::after{
    color:red; content: " *";
}

form fieldset{
    width: 90%;
}

form fieldset.abschicken{
    align-content: center;
}

input[type=text], [type=date], [type=tel], [type=password], select, textarea {
    width: max-content;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
    max-width:60%;
}

input[type=email] {
    width: max-content;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

input[type=text].longtext {
    width: 90%;
    
}

form label {
    padding: 12px 12px 12px 0;
    display: inline-block;
}

legend{
    font-size: 120%;
    border: 1px solid;
}


table {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #DCE6EE;
    margin-left:auto; 
    margin-right:auto;
    width: 90%;
}

@media only screen and (max-width: 1080px){
    table {
        width: 100%;
    }
}

table td, table th {
    padding: 5px 2px;
}


table tr:nth-child(even) {
    background: white;
}

table td.submitBtn{
    width: 100%;
    text-align: center;
}