/*
html und body sind in style.css spezifiziert
*/
/*
html {
overflow-y: scroll;
}

body {
margin: 0;
padding: 0;
overflow-x: hidden;
font-family: Arial;
font-size: 18px;
}
*/
/*
Header is relative so z-index: 1 guarantees always displayed on top
*/
header {
background-color: #AE0018;
padding: 10px;
text-decoration: none;
position: fixed;
width: 100%;
z-index: 1;
-webkit-box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
}
/*
using background color is important to cover the menu
position absolute isset to cover the whole viewport
*/
#content {
background-color: #FFFFFF;
padding: 52px 10px 10px 10px;
position: relative;
width: auto;
height: 100%;
-webkit-box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4);
box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4);
}
/*
the hamburger button with a little gradient effekt
*/
#hamburger {
border: 1px solid #A00016;
border-radius: 3px 3px 3px 3px;
cursor: pointer;
display: block;
height: 24px;
padding: 3px 4px 3px;
position: relative;
width: 25px;
background: #B1B1B1;
background: -moz-linear-gradient(top, #B1B1B1 0%, #959595 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #B1B1B1), color-stop(100%, #959595));
background: -webkit-linear-gradient(top, #B1B1B1 0%, #959595 100%);
background: -o-linear-gradient(top, #B1B1B1 0%, #959595 100%);
background: -ms-linear-gradient(top, #B1B1B1 0%, #959595 100%);
background: linear-gradient(to bottom, #B1B1B1 0%, #959595 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#B1B1B1', endColorstr='#959595', GradientType=0);
}
/*
The white stripes in the hamburger button
*/
#hamburger div {
background-color: #fff;
border: 1px solid #eee;
border-radius: 2px 2px 2px 2px;
height: 2px;
margin-top: 3px;
width: 90%;
}
/*
The navigation container in the background
*/
nav {
opacity: 0;
left: 0px;
top: 0px;
position: fixed;
z-index: 0;
width: 60%;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
background: #3e3c3d;
background: -moz-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e3c3d), color-stop(100%, #2d2c2d));
background: -webkit-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: -o-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: -ms-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: linear-gradient(to bottom, #3e3c3d 0%, #2d2c2d 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3e3c3d', endColorstr='#2d2c2d', GradientType=0);
}
/*
Style the navigation menu
*/
nav ul {
list-style: none;
margin: 0;
width: 100%;
padding: 0;
}
nav li {
position: relative;
font-size: 1em;
font-weight: bold;
border-bottom: 1px solid #222222;
border-top: 1px solid #444444;
padding: 15px;
}
nav li a {
color: #ffffff;
text-decoration: none;
}
/*
The Layer that will be layed over the content
so that the content is unclickable while menu is shown
*/
#contentLayer {
display: none;
height: 400%;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
right: 0;
top: 0;
width: 50%;
z-index: 5;
}