/*
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 : 20.12.2016, 18:16:47
    Author     : Rhodan59
*/

*  {
    outline: 0; /* entfernt blauen Rahmen um Eingabefelder (beim Safari) */
    margin: 0; /* entfernt alle Randabstände von Tags */
    padding: 0; /* entfernt alle Randabstände von Tags */
    border: 0; /* entfernt alle Rahmen z.B. bei einem Input-Feld */
}

html, body {
    height: 100%;
}

BODY {
    background: url(../pic/hg_iran.jpg) no-repeat center center fixed lightgray;
    background-size: cover; /* damit wird das Hintergrundbild immer an das Browserfenster angepaßt */
    font-family: 'Arima Madurai', Tahoma, Arial, sans-serif, cursive;
    color: darkgreen;
    font-size: 1.1em;
	/* fixed verhindert, dass das Bild bei scrollen verschoben wird */
	/* no-repeat verhindert, dass das Bild gekachelt wird */
}


h1, h2, h3, h4 {
    font-family: 'Arima Madurai', Tahoma, Arial, sans-serif, cursive;
    color: darkgreen;
    text-align: center;
}

h1 {
    font-size: 2.1em;
}
h2 {
    font-size: 1.6em;
}
h3 {
    font-size: 1.4em;
}

h4 {
    font-size: 1.2em;
    text-align: left;
    padding-top: 10px;
}

.td_kopf {
    font-family: 'Shojumaru', cursive;
    color: darkorange;
    font-size: 3em;
    text-shadow: 2px 2px 1px black, 1px -1px 1px white, -2px 2px 1px white, -1px -1px 1px white; /* erzeugt schwarzen Rand um den Text */
}

P {
    ~moz-hyphens: auto;	/* für Mozilla */
    ~webkit-hyphens: auto;	/* für Chrome und Safari */
    ~o-hyphens: auto;	/* für Opera */
    ~ms-hyphens:        auto;	/* für MS Internet Explorer */
    hyphens: auto;	/* für den Rest */
    margin-bottom: 15px;
    margin-left: 1px;
    margin-right: 10px;
    margin-top: 1px;
    text-align: justify;
}

#toprand {
    width: 100%;
    height: 60px;	
    background: url(../pic/hg_nav_main.jpg) repeat steelblue;
    border-top: 1px solid green;
    border-bottom: 1px solid green;
    box-shadow: 0 0 5px 2px green; 
    position: fixed; 			/* Box wird auf eine bestimmte Position fixiert in absoluten Positionsangaben */
    top: 1px;
    left: 0;	/* obere Kante der Box beginnt bei 10 Pixel von oben */
    z-index: 5;
}

#daymenu {
    color: white;
    width: 400px;
    border-top: 1px solid darkgreen;
    border-right: 1px solid darkgreen;
    border-bottom: 1px solid darkgreen;
    box-shadow: 0 2px 5px 2px green; 
    position: fixed;
    top: 120px;
    left: -370px;
    border-radius: 0 100px 100px 0;
    padding-right: 30px;
    box-sizing: border-box;
    background: url(../pic/daymenu.png) no-repeat center right rgba(21,109,26,0.7);
    transition: all 0.4s;
    z-index: 5;
}

#daymenu:hover {
    left: 0px;
}

#daymenu P {
    margin: 0;
    width: 100%;
}

.daymenu_liste {
    background: rgba(21,109,26,0.7);
    font-size: 0.7em;
    padding: 10px 10% 10px 10%;
    border-radius: 0 70px 70px 0;
    line-height: 1.2em;
    list-style: url(../pic/bullet.png);
}

.daymenu_liste a:link, .daymenu_liste a:visited {
    color: white;
    text-decoration: none;
}

.daymenu_liste a:hover, .daymenu a.aktuell	{
    text-decoration: underline;
    color: darkorange;
}

.zentriert{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#inhalt {
    width: 900px;
    min-height: 600px;
    border-radius: 20px;
    border: 1px solid green;
    overflow: hidden;
    padding: 0px;
    box-sizing: border-box;

    position: absolute;
    top: 70px;
    left: 50%;
    margin-left: -450px;
    z-index: 4;
}

nav {
    width: 900px;
    max-height: 50px;
    overflow: hidden;
    padding: 5px 0 0 0;
    box-sizing: border-box;
    /*        background-image: linear-gradient(darkgreen, darkgreen, transparent); 
    Artikel verschwindet langsam unter Menu, dazu muss top-nav=60 und top-inhalt=70 und max-height-nav muss min-height sein */
    background: darkgreen;
    position: fixed;
    top: 60px;
    left: 50%;
    margin-left: -450px;
    z-index: 4;
}


.hauptmenu {                        /*so steuert man die ul an*/
    list-style: none;
    text-align: right;
    position: relative;
    top: 0;
    text-align: center;
}

.hauptmenu li {
    display: inline-block;
    font-size: 1.0em;
}
	
.hauptmenu a:link, .hauptmenu a:visited {
    color: whitesmoke;
    text-decoration: none;
    padding: 0 12px 0 8px;
    border-right: 2px solid whitesmoke;
}

.hauptmenu a:hover {
    color: darkorange;
}

.aktuell {
    text-decoration: underline;
    color: darkorange;
    font-weight: bold;
}

.tagesdaten {
    padding-bottom: 15px;
}
.tagesdaten li {
    margin-left: 25px;
    list-style: circle; 
    line-height: 1.2em;

}

article {
    width: 90%;
    min-height: 450px;
    float: left;
    box-sizing: border-box;
    padding: 40px 3% 0 3%;
}

.pic_links {
    width: auto;
    padding: 3px;
    border: 1px solid darkgreen;
    border-radius: 50px 8px 8px 8px;
    float: left;
    margin-right: 10px;
}

.rund_links {
    border-radius: 45px 0 0 0;
}
.rund_links:hover {
    opacity: 0.9;
    background: rgba(40,163,58,0.3);
    box-shadow: 0 0 8px 3px rgba(40,163,58,0.9);
}

figcaption {
    color: darkgreen;
    font-style: italic;
    font-size: 0.7em;
}

.pic_rechts {
    width: auto;
    padding: 5px;
    border: 1px solid darkgreen;
    border-radius: 8px 50px 8px 8px;
    float: right;
    margin-left: 10px;
}
.rund_rechts {
    border-radius: 0 45px 0 0;
}
.rund_rechts:hover {
    opacity: 0.9;
    background: rgba(40,163,58,0.3);
    box-shadow: 0 0 8px 3px rgba(40,163,58,0.9);
}

footer {
    width: 900px;
    max-height: 20px;
    overflow: hidden;
    padding: 1px;
    box-sizing: border-box;
    background: darkgreen;

    position: fixed;
    bottom: 0;
    left: 50%;
    margin-left: -450px;
    z-index: 4;
}

.footermenu {
    list-style: none;
    text-align: right;
    position: relative;
    top: -6px;
    text-align: center;
}

.footermenu li {
    display: inline-block;
    font-size: 0.7em;
}

.footermenu a:link, .footermenu a:visited {
    color: whitesmoke;
    text-decoration: none;
    padding: 0 12px 0 8px;
    border-right: 2px solid whitesmoke;
}
.footermenu li:last-child a:link {
    border: 0;
}

.footermenu a:hover {
    color: darkorange;
}

.jahreszahl {
    color: DarkGreen;
    cursor: auto;
    font-size: 9pt;
    font-style: normal;
    text-align: left;
    text-transform: none;
}

.ereignis {
    color: DarkGreen;
    cursor: auto;
    font-size: 8pt;
    font-style: normal;
    text-align: left;
    text-transform: none;
}