/*
This file is property of Olaf Hahn and/or the site owner of this domain.
Under Creative Commons, this web page is licensed to Olaf Hahn and or the domain owner, non commercial, no adaptations allowed. 
Copyright (c) 2016, Olaf Hahn
*/
/* 
    Created on : Oct 1, 2016, 1:17:55 PM
    Author     : Olaf Hahn 
*/

/*--- Generelle Konfigurationen ---*/

*{
    padding: 0;
    margin: 0;

}

a, article, aside, footer, header, main, section{
    display: block;
}
    
article{
    background-color: #c8f2ef;
    border-radius: 0.5em;
    padding: 0.3em;
    margin: 1em;
    min-width: 100px;
    line-height: 1.4em;
}

body{
    background-color: #FFE2AA;
    width: 80%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

footer{
    background-color: #AA6A39;
    border-top: solid 3px #FFE2AA;
    color: white;
    font-size: 80%;
    padding: 0.5em;
    bottom: 0;
    position: fixed;
    width: 80%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
footer p{
    padding: 0;
    padding-left: 2em;
    }
footer span a{
    color: #2D4471;
    font-weight: bold;

}

h1, h2, h3, h4, h5{
    text-align: center;
    padding-bottom: 0.3em;
}

header{
    background-color: #AA6A39;
    color: white;
    text-align: center;
    padding: 1em;
    overflow: hidden;
    margin-bottom: 1em;
}   
main{
    float: right;
    width: calc(100% - 180px);
    margin-bottom: 22%;
    }


.nav{
    font-weight: bolder;
    color: #AA6A39;
    font-variant: small-caps;
    font-size: 1.2em;
    padding: 0.2em 0.7em;
    width: 180px;
    font-weight: bolder;
}
#navigation-checkbox{
    display: none;
}
.nav .navigation{
    display: none;
}

.nav ul{
    list-style: none;
    text-align: center;
    position: fixed;
    height: 100%;
    width: 170px;
}
.nav ul li{
    border: #552500 solid thin;
    text-align: center;
    text-decoration: none;       
    margin: 0.4em;
    padding: 0.2em;
    
}
.nav ul li a{
    display: block;
    text-decoration: none;
    color: #AA6A39;
    }

p {
    padding: 1em;
    line-height: 1.4em;
}

section{
    border: #AA6A39 solid thick;
    border-radius: 1em;
    padding: 0.5em;
    font-family: sans-serif, arial;
    color: #553800;
    margin: 1em;
    margin-bottom: 2em;
    min-width: min-content;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

section article{
    background-color: white;
    border: gray solid 1px;
    box-shadow: 0.5em 0.7em 1em darkslategray;
}
section img{
    margin-bottom: 0.5em;
    border-radius: 5px;
    text-align: center;
    width: 100%;
    }
section ul {
    margin-left: 1.5em;
    padding: 0.5em;
    line-height: 1.5em;
}
section table ul{
    list-style: none;
}
section .even{
    background-color: #FAFAFA
}
section .odd{
    background-color: #FFCFAA
}

table {
    border-collapse: collapse;
    vertical-align: top;
    margin: 0.3em;
    width: 98%;
}
table th {
    text-align: left;
    padding: 0.2em 0.7em;

}
table tbody tr {
    vertical-align: top;
}
table tbody tr td{
    padding: 0.2em;
}


/*
##########################
###   Mobile Ansicht   ###
##########################
*/

   
@media (max-width: 670px), (max-height:480px){
            
    body{
        font-size: 80%;
        width: 100%;
        max-width: 670px;
        margin-left: auto;
        margin-right: auto;
    }
    
    footer{
        width: 100%;
        max-width: 670px;
        padding: 0.5em;
        bottom: 0px;
        position: fixed;
        margin-left: auto;
        margin-right: auto;
    }
    header{
        display: none;
        visibility: hidden;
    }
    main{
        width: 100%;
        margin-bottom: 28%;
    }
    .nav {
        width: 99%;
        text-align: center;
        font-size: 1em;
        background-color: #AA6A39;
        color: #FAFAFA;
        
    }
    
	.nav ul {
            display: none; /* hide all <ul> items */
            width: 99%;
            position: relative;
            text-align: center;
            background-color: #AA6A39;
            color: #FAFAFA;
            height: auto;
	}
        .nav ul li{
            left: 0.5em;
        }
	
	.nav a {
		display: block;
                margin-top: 0.3em;
	}
        .nav ul li a{
            color: #FAFAFA;
        }
        
        /* Checkbox Navigation hack */
        .nav .navigation{
            display: block;
        }
        
        input[type=checkbox]{
             display: none;
        }
        label{
            font-size: 1.2em;
        }
        input[type=checkbox]:checked ~ ul{
           display: block;
        }   
	
    section{
        width:90%;
        margin-left: auto;
        margin-right: auto;
    }
    section img {
        width: 100%;
    }
}