body {background-color: #ebf5d7;
grid-gap: 5px;
display:grid;
grid-template-columns: 10% 72% 17%;
grid-template-areas:
"header header header"
"nav nav nav"
"linkBox linkBox linkBox"
"main main main"
"infoBox infoBox infoBox"
"footer footer footer";
}
@media (min-width: 80em) {
body {
display: grid;
grid-template-columns: 10% 72% 17%;
grid-gap: 5px;
grid-template-areas:
"header header header"
"nav nav nav"
"linkBox main infoBox"
"footer footer footer";
}
}
@media (min-width: 37em) { body { display: grid;
grid-template-columns: 10% 72% 17%;
grid-template-areas:
"header header header"
"nav nav nav"
"linkBox main main"
"footer footer footer";
}
}
body > header { grid-area: header;
background-image: url("/Bilder/home.png"); padding: 80px;
}
body > nav { grid-area: nav;
background-color: #d2f5c4;
}
body > #externalLinks {
grid-area: linkBox;
background-color: #d2f3c6;
;
}
body > main { grid-area: main;
background-color: #eaf6e5;
}
body > #furtherInformation {
grid-area: infoBox;
background-color: #d2f3c6;
}
body > footer { grid-area: footer;
background-color: #99ee7a;
}
/* Nav */
nav {background-color: #d2f5c4;}
nav a{ color: black;
text-decoration: none;
display: inline;
padding: 0px 8px;
font-size: 17px;
font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
}
nav ul {list-style-type: none;}
nav li {display: block;display:inline-block;}
/* ExternalLinks */
#externalLinks a {
text-decoration: none;
display: block;
text-align: center;
font-size: 15px;
font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
}
#externalLinks ul {
list-style-type: none;
margin: 5px;
padding: 0;
}
#externalLinks li{float: left}
/* Geben an Link1, link2, link3 ; Farbe , Padding, .... */
li a, .dropbtn { display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn { background-color: #f1ebeb;}
.dropdown-content { display: none; /* display wird ausgeschaltet ,aber erlaubt die anderen elemente, position ,background ,.... */
font-size: 12px;
position: absolute; /* die stellung folgt der Erste Link(li) */
background-color: #f1f1f1 ;
min-width: 160px; /* macht größer die Inneren Links */
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Bau ein Schatte und geben an dem Schatten Farbe */
z-index: 1; /* Zeigen die Ordnung wie die Links gezeigt werden... */
}
.dropdown-content a { color: black;
padding: 12px 16px;
text-decoration: none; /* Bekomme die Liks keine Unten Stricht ....*/
display: block;
}
.dropdown-content a:hover {background-color: #9f9e9e;
}
/* Offnen die Innere Links */
.dropdown:hover .dropdown-content { display: block;
left: 112px; /* zeigt wo dem innere link fenster gezeigt wird */
top: 250px; /* zeigt wo dem innere link fenster gezeigt wird */
}
/* Main */
input, textarea{ background:#d9d9d9;
border:1px solid rgba(220,220,220,0.75);
font:inherit;
border-radius:0.2941em;/*5px;*/
padding:0.4118em;/*7px;*/
/*farbigen Rahmen in Chrome und Safari abschalten.*/
outline:none;
}
input:focus, textarea:focus{ background:#fff;
border:1px solid #000;
outline: none; /* einige Browser add line auf input , das verhindert es... */
}
input[type=submit]{ background:#be633c;
border:none;
color:#fff;
border-radius:50% 50%;
box-shadow:inset 0 0 1em #fb9d23;
padding:0.5882em;/*10px*/
}
input[type=submit]:focus, input[type=submit]:active{ background-color:#A33202;
}
/* Old links */
.link_wechsel ul {
list-style-type: none;
}
.link_wechsel a {
display: inline;
text-decoration: none;
border: 1px solid gray;
background-color: #00ff00;
color: black;
padding: 8px;
opacity: 0.5;
font-family: "Times New Roman";
}
.link_wechsel li a:hover {
background-color: #9f9e9e;
}
.link_wechsel li {
margin-left: 300px;
}
/* Footer */
#copry {
overflow: auto;
font-size: 2px;
list-style-type: none;
font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
}
#img1 {float: left;margin-bottom: 3px;}
#copry a {text-decoration: none;margin-bottom: 3px;}
#copry p {font-size: 10px;margin-bottom: 0;}
/* Komment Button */
#comment:hover { box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
#comment {font-size: 11px;} /* Button from comment */
#form {font-size: 14px;} /* size from comment window */
#adderiren { /* Farbe für 'Add a new comment' */
width: 50px;
color:#006600;
padding: 8px 0px 5px 5px;
}
/* Links wechsel */
.link_change ul {
list-style-type: none;
margin-left: 340px;
}
.link_change li {
display: inline;
}
.link_change a {
display: inline;
text-decoration: none;
border: 1px solid gray;
background-color: #FE2E64;
color: black;
padding: 8px;
opacity: 0.5;
font-family: Times New Roman;
}
.link_change a:hover {
background-color: #9f9e9e;
}
.link_change a[aria-current=page] {
background-color: green;
}
