/* 
    Created on : 31.10.2017, 16:31:02
    Author     : Sören Dietz
*/
/*
    responsive
*/
@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"
}
.container2
{
    display: grid;
    grid-template-rows: 15em 5em 1fr 1fr 1fr 5em;
    grid-template-columns: 100%;
    align-content: center;
    grid-template-areas:
        "header"
        "nav"
        "stp1"
        "stp2"
        "werder"
        "footer"
}
.container3
{
    display: grid;
    grid-template-rows: 15em 5em 6em 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 5em;
    grid-template-columns: 50% 50%;
    align-content: center;
    z-index: 0;
    grid-template-areas:
        "header header"
        "nav nav"
        "lizenz lizenz"
        "b1 b2"
        "b3 b4"
        "b5 b6"
        "b7 b8"
        "b9 b10"
        "b11 b12"
        "b13 b14"
        "b15 b16"
        "b17 b18"
        "b19 b20"
        "b21 b22"
        "b23 b24"
        "b25 b26"
        "b27 b28"
        "b29 b30"
        "b31 b32"
        "b33 b34"
        "b35 b36"
        "footer footer"
}
.bilder
{
    grid-row: 4 / 22;
    grid-column: 1 / 3; 
    align-items: center;
}
header
{
    font-size: 15pt;
}
}
@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"
}
.container2
{
    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"
        "stp1 stp2 werder"
        "footer footer footer"
}
.container3
{
    display: grid;
    grid-template-rows: 250px 40px 90px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 25px;
    grid-template-columns: 25% 25% 25% 25%;
    z-index: 0;
    grid-template-areas:
        "header header header header"
        "nav nav nav nav"
        "lizenz lizenz lizenz lizenz"
        "b1 b2 b3 b4"
        "b5 b6 b7 b8"
        "b9 b10 b11 b12"
        "b13 b14 b15 b16"
        "b17 b18 b19 b20"
        "b21 b22 b23 b24"
        "b25 b26 b27 b28"
        "b29 b30 b31 b32"
        "b33 b34 b35 b36"
        "footer footer footer footer"
}
.bilder
{
    grid-row: 4 / 13;
    grid-column: 1 / 5; 
    align-items: center;
}
header
{
    font-size: 20pt;
}
}
@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"
}
.container2
{
    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"
        "stp1 stp2 . werder"
        "footer footer footer footer"
}
.container3
{
    display: grid;
    grid-template-rows: 250px 40px 60px 1fr 1fr 1fr 1fr 1fr 1fr 25px;
    grid-template-columns: 17% 16% 17% 17% 16% 17%;   
    z-index: 0;
    grid-template-areas:
        "header header header header header header"
        "nav nav nav nav nav nav"
        "lizenz lizenz lizenz lizenz lizenz lizenz"
        "b1 b2 b3 b4 b5 b6"
        "b7 b8 b9 b10 b11 b12"
        "b13 b14 b15 b16 b17 b18"
        "b19 b20 b21 b22 b23 b24"
        "b25 b26 b27 b28 b29 b30"
        "b31 b32 b33 b34 b35 b36"
        "footer footer footer footer footer footer"
}
.bilder
{
    grid-row: 4 / 10;
    grid-column: 2 / 6;
    align-items: center;
}
header
{
    font-size: 30pt;
}
}

body
{
   background: #494746;
   
}
header 
{
    grid-area: header;
    background: #494746;
    background-image: url(../images/stadion.jpg);
    background-position: left;
    background-repeat: no-repeat;
    color: #fff;
    text-align: end;
    font-family: 'Love Ya Like A Sister', cursive;
}
nav
{
    grid-area: nav;
    background: #494746;
    color: #fff;
}
article
{
    grid-area: content;
    background: #c8c2be;
    color: black;
}
article a
{
    color: darkred;
    text-decoration: none;
}
aside
{
    grid-area: sidebar;
    background: #8b8988;
    color: #fff;
    display: table;
    
}
aside a
{
    color: darkred;
    text-decoration: none;
}
footer
{
    grid-area: footer;
    background: #494746;
    color: #fff;
}
footer a
{
    color: #fff;
    text-decoration: none;
}
footer a:hover
{
    color: darkred;
}
nav ul 
{
    list-style-type: none;
    vertical-align: middle;
    float: left;
    position: relative;
}
nav ul a
{
    color: #fff;
    text-decoration: none;
}
nav ul a:hover
{
    color: darkred;
}
nav ul li 
{
    width: 9em;
    float: left;
    position: relative;
    font-variant: small-caps;
    height: 100%;
    top: -5px;
}
nav ul li :hover
{
    color: darkred;
}
nav ul li ul
{
   position: absolute;
    left: -10px;
    padding: 8px 10px 3px 10px;
    background: #494746;
    color: #FFF;
    height: auto;
    width: 8em;
    float: none;
    border-radius: 5px; 
}
nav ul li ul :hover
{
height: auto;
}
nav ul li>ul
{
    display: none;
}
nav ul li:hover>ul
{
    display: block;
}
nav ul li ul li
{
    width: 100%;
    display: block;
    float: none
}
nav ul li ul li:hover
{
    background-color: #ccc;
    color: darkred;
}
nav ul li ul li a
{
    text-decoration: none;
    color: #FFF;
}
nav ul li ul li a:hover
{
    color: darkred;
}
.unav
{
    display: table-cell;
    vertical-align: middle;
}
.clock
{
    display: table-cell;
    align: end;
    vertical-align: bottom;
}
/* rss-layout*/
#spiegel-rss
{
    background-image: url(../images/logo_spon.jpg);
    background-repeat: no-repeat;
    background-position: right;
    height: 60px;
    padding: 10px 0 0 20px;
}
#ts-rss
{
    background-image: url(../images/logo_ts.jpg);
    background-repeat: no-repeat;
    background-position: right;                    
    height: 60px; 
    padding: 10px 0 0 20px;   
}
#kicker-rss
{
    background-image: url(../images/logo_kicker.png);
    background-repeat: no-repeat;
    background-position: right;
    height: 60px;
    padding: 10px 0 0 20px;
}
#heise-rss
{
    background-image: url(../images/heise.png);
    background-repeat: no-repeat;
    background-position: right;
    height: 60px;
    padding: 10px 0 0 20px;
}
/*Fussi-Seite*/
fcstp1
{
    grid-area: stp1;
    background-color: #874B15;
    color: #fff;
}
fcstp1 a
{
    color: #E9B96E;
    text-decoration: none;
}
fcstp1 a:hover
{
    background-color: #fff;
    color: #874B15;
}
fcstp2
{
    grid-area: stp2;
    background-color: #874B15;
    border: 12px solid #874B15;
}
werder
{
    grid-area: werder;
    background-color: green;
    color: #fff;
}
werder a
{
    color: lime;
    text-decoration: none;
}
werder a:hover
{
    color: green;
    background-color: #fff;
}
/*Bildergalerie*/
lizenz
{
    grid-area: lizenz;
    background-color: #494746;
    color: #fff;
}
lizenz a
{
    text-decoration: none;
    color: #fff;
}
lizenz a:hover
{
    background-color: #fff;
    color: darkred;
}
.bildpu
{
    position: relative;
    display: none;
    z-index: 2;    
    align-items: center;
}
#bildbg
{
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: fixed;
    background-color: #808080;
    display: none;
    opacity: 0.7;
    z-index: 1;
}
#xbu
{
    height: 30px;
    width: 30px;
    position: absolute;
    top: 320px;
    right: 50px;
    background: url(../images/xbu.jpg);
    background-repeat: no-repeat;
    display: none;
    z-index: 3;
}
#lbu
{
    height: 30px;
    width: 30px;
    background: url(../images/lbu.jpg);
    background-repeat: no-repeat;
    position: absolute;
    top: 70%;
    left: 5%;
    display: none;
    z-index: 3;
}
#rbu
{
    height: 30px;
    width: 30px;
    background: url(../images/rbu.jpg);
    background-repeat: no-repeat;
    position: absolute;
    top: 70%;
    left: 95%;
    display: none;
    z-index: 3;
}
bild1
{
    grid-area: b1;
    border: 12px solid #494746;
}
bild2
{
    grid-area: b2;
    border: 12px solid #494746;
}
bild3
{
    grid-area: b3;
    border: 12px solid #494746;
}
bild4
{
    grid-area: b4;
    border: 12px solid #494746;
}
bild5
{
    grid-area: b5;
    border: 12px solid #494746;
}
bild6
{
    grid-area: b6;
    border: 12px solid #494746;
}
bild7
{
    grid-area: b7;
    border: 12px solid #494746;
}
bild8
{
    grid-area: b8;
    border: 12px solid #494746;
}
bild9
{
    grid-area: b9;
    border: 12px solid #494746;
}
bild10
{
    grid-area: b10;
    border: 12px solid #494746;
}
bild11
{
    grid-area: b11;
    border: 12px solid #494746;
}
bild12
{
    grid-area: b12;
    border: 12px solid #494746;
}
bild13
{
    grid-area: b13;
    border: 12px solid #494746;
}
bild14
{
    grid-area: b14;
    border: 12px solid #494746;
}
bild15
{
    grid-area: b15;
    border: 12px solid #494746;
}
bild16
{
    grid-area: b16;
    border: 12px solid #494746;
}
bild17
{
    grid-area: b17;
    border: 12px solid #494746;
}
bild18
{
    grid-area: b18;
    border: 12px solid #494746;
}
bild19
{
    grid-area: b19;
    border: 12px solid #494746;
}
bild20
{
    grid-area: b20;
    border: 12px solid #494746;
}
bild21
{
    grid-area: b21;
    border: 12px solid #494746;
}
bild22
{
    grid-area: b22;
    border: 12px solid #494746;
}
bild23
{
    grid-area: b23;
    border: 12px solid #494746;
}
bild24
{
    grid-area: b24;
    border: 12px solid #494746;
}
bild25
{
    grid-area: b25;
    border: 12px solid #494746;
}
bild26
{
    grid-area: b26;
    border: 12px solid #494746;
}
bild27
{
    grid-area: b27;
    border: 12px solid #494746;
}
bild28
{
    grid-area: b28;
    border: 12px solid #494746;
}
bild29
{
    grid-area: b29;
    border: 12px solid #494746;
}
bild30
{
    grid-area: b30;
    border: 12px solid #494746;
}
bild31
{
    grid-area: b31;
    border: 12px solid #494746;
}
bild32
{
    grid-area: b32;
    border: 12px solid #494746;
}
bild33
{
    grid-area: b33;
    border: 12px solid #494746;
}
bild34
{
    grid-area: b34;
    border: 12px solid #494746;
}
bild35
{
    grid-area: b35;
    border: 12px solid #494746;
}
bild36
{
    grid-area: b36;
    border: 12px solid #494746;
}
#b1
{
    display: none;
}
#b2
{
    display: none;
}
#b3
{
    display: none;
}
#b4
{
    display: none;
}
#b5
{
    display: none;
}
#b6
{
    display: none;
}
#b7
{
    display: none;
}
#b8
{
    display: none;
}
#b9
{
    display: none;
}
#b10
{
    display: none;
}
#b11
{
    display: none;
}
#b12
{
    display: none;
}
#b13
{
    display: none;
}
#b14
{
    display: none;
}
#b15
{
    display: none;
}
#b16
{
    display: none;
}
#b17
{
    display: none;
}
#b18
{
    display: none;
}
#b19
{
    display: none;
}
#b20
{
    display: none;
}
#b21
{
    display: none;
}
#b22
{
    display: none;
}
#b23
{
    display: none;
}
#b24
{
    display: none;
}
#b25
{
    display: none;
}
#b26
{
    display: none;
}
#b27
{
    display: none;
}
#b28
{
    display: none;
}
#b29
{
    display: none;
}
#b30
{
    display: none;
}
#b31
{
    display: none;
}
#b32
{
    display: none;
}
#b33
{
    display: none;
}
#b34
{
    display: none;
}
#b35
{
    display: none;
}
#b36
{
    display: none;
}