/*
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 : 09.11.2017, 19:39:38
    Author     : Sören Dietz
*/
@media screen and (max-width:600px){
.container
{
    display: grid;
    grid-template-rows: 15em 5em 4fr 1fr 5em;
    grid-template-columns: 100%;
    align-content: center;
    grid-template-areas:
        "header"
        "nav"
        "content"
        "sidebar"
        "footer"
}
header-start
{
    font-size: 15pt;
}
ansage
{
    font-size: 13pt;
}
}
@media screen and (min-width:600px) and (max-width:1200px) {
.container
{
    display: grid;
    grid-template-rows: 250px 40px 1fr 25px;
    grid-template-columns: 33% 33% 33%;
    align-content: center;
    grid-template-areas:
        "header header header"
        "nav nav nav"
        "content content sidebar"
        "footer footer footer"
}
header-start
{
    font-size: 20pt;
}
ansage
{
    font-size: 18pt;
}
}
@media screen and (min-width:1200px) {
.container
{
    display: grid;
    grid-template-rows: 250px 40px 1fr 25px;
    grid-template-columns: 25% 25% 25% 25%;
    
    grid-template-areas:
        "header header header header"
        "nav nav nav nav"
        "content content content sidebar"
        "footer footer footer footer"
}
header-start
{
    font-size: 30pt;
}
ansage
{
    font-size: 20pt;
}
}

body
{
   background: #494746; 
}
#start
{
    background-color: #716256;
    background-image: url(../images/background-image.jpg);
    background-repeat: no-repeat;
}
ansage
{
    grid-row: 3 / 4;
    grid-column: 1 / 3;
    color: #fff;
    font-size: 20pt;
    font-family: 'Love Ya Like A Sister', cursive;
}
ansage table
{
    font-size: 16pt;
}
sidebar
{
    grid-area: sidebar;
    color: #fff;
    text-align: end;
    font-size: 18pt;
    font-family: 'Love Ya Like A Sister', cursive;
}

header-start 
{
    grid-area: header;
    color: #fff;
    text-align: end;
    font-family: 'Love Ya Like A Sister', cursive;
}
footer-start
{
    grid-area: footer;
    color: #fff;
    text-decoration: none;
}
footer-start a
{
    text-decoration: none;
    color: #fff;
}

footer-start a:hover
{
    text-decoration: none;
    color: darkred;
}
snav
{
    grid-area: nav;
    background: #876951;
    color: #fff;
}
snav ul 
{
    list-style-type: none;
    vertical-align: middle;
    float: left;
    position: relative;
}
snav ul a
{
    color: #fff;
    text-decoration: none;
}
snav ul a:hover
{
    color: darkred;
}
snav ul li 
{
    width: 9em;
    float: left;
    position: relative;
    font-variant: small-caps;
    height: 100%;
    top: -5px;
}
snav ul li :hover
{
    color: darkred;
}
snav ul li ul
{
   position: absolute;
    left: -10px;
    padding: 8px 10px 3px 10px;
    background: #876951;
    color: #FFF;
    height: auto;
    width: 8em;
    float: none;
    border-radius: 5px; 
}
snav ul li ul :hover
{
height: auto;
}
snav ul li>ul
{
    display: none;
}
snav ul li:hover>ul
{
    display: block;
}
snav ul li ul li
{
    width: 100%;
    display: block;
    float: none
}
snav ul li ul li:hover
{
    background-color: #fff;
    color: darkred;
}
snav ul li ul li a
{
    text-decoration: none;
    color: #FFF;
}
snav ul li ul li a:hover
{
    color: darkred;
}
input[type="submit"]
{
    background-color:#876951;
    color: white;
    border: 2px solid #876951;
    padding: 8px;
    font-size:20px;
    cursor:pointer;
    border-radius: 5px;
    margin-bottom: -12px;
}