* {
    margin: 0;
    padding: 0;
}

body {
    text-align: center;
    background-image: url(../Images/sky.jpg);
    background-attachment: fixed;
    font-family: Arial, sans-serif;
}

header, nav, footer, aside, section {
    display: block;
}

#wrapper {
    /* background-color: #eeeeee; */
    width: 900px;
    /* border: 2px solid red; */
    margin: 0 auto;
    text-align: left; 
    background-image: url(../Images/durchsichtig8.png);   
}

header {
    /* background-color: yellow; */
    /*background-image: url(../Images/);*/
    height: 150px;
    width: 900px;
    margin: 0 auto;
}

header p {
    /* background-color: orange; */
    text-align: right;
    padding-right: 15px;
}

header a {
    color: white;
}

#logotext {
    padding-top: 50px;
    font-size: 20pt;
    color: white;
}

#steuerungoben {
    /* background-color: red; */
    background-image: url(../Images/grau-50.png);
    height: 24px;
}

#steuerungoben ul {
    list-style-type: none;
}

#steuerungoben li {
    display: inline;
}

#steuerungoben a {
    display: block;
    width: 230px;
    /* background-color: yellow; */
    float: left;
    /* border-right: 1px solid red; */
    text-align: center;
    line-height: 24px;
    color: white;
    text-decoration: none;
}

#steuerungoben a:hover {
    background-image: url(../Images/grau-50.png);
} 

#steuerunglinks {
    /* background-color: green; */
    width: 220px;
    float: left;
}

#steuerunglinks ul {
    padding-left: 2em;
    padding-top: 20px;
    list-style-type: none;
}

#steuerunglinks ul ul {
    list-style-type: square;
}

#steuerunglinks li {
    padding-bottom: 0.5em;
}

/***Style the unordered list with the class 'enlarge'***/
ul.enlarge{
  list-style-type:none; /*remove the bullet point*/
}
ul.enlarge li{
  display:inline-block; /*places the images in a line*/
  position: relative; /*allows precise positioning of the popup image when used with position:absolute - see support section */
  z-index: 0; /*resets the stack order of the list items - we'll increase in step 4. See support section for more info*/
  margin:10px 40px 0 20px; /*space between the images*/
}

ul.enlarge span{
position:absolute; /*see support section for more info on positioning*/
left: -9999px; /*moves the span off the page, effectively hidding it from view*/
}

ul.enlarge img{
/*give the thumbnails a frame*/
background-color:#eae9d4; /*frame colour*/
padding: 6px; /*frame size*/
/*add a drop shadow to the frame*/
-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
/*and give the corners a small curve*/
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

 ul.enlarge li:hover{
z-index: 50; /*places the popups infront of the thumbnails, which we gave a z-index of 0 in step 1*/
cursor:pointer; /*changes the cursor to a hand*/
}
/***We bring the large image back onto the page by reducing left from -9999px (set in step 2) to figures below***/
ul.enlarge li:hover span{ /*positions the <span> when the <li> (which contains the thumbnail) is hovered*/
top: -300px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: -280px; /*distance from the left of the thumbnail to the left of the popup image*/
}
/***To make it look neater we used :nth-child to set a different left distance for each image***/
ul.enlarge li:hover:nth-child(2) span{
left: -100px;
}
ul.enlarge li:hover:nth-child(3) span{
left: -200px;
}

aside {
    /* background-color: #808000; */
    width: 175px;
    float: right;
}

aside p {
    margin-top: 20px;
    margin-left: 10px;
}

aside img {
    /* margin-left: 10px; */ 
    border:1px solid silver;
}

section {
    /* background-color: orange; */
    margin-left: 250px;
    margin-right: 195px;
}

section h1 {
    padding-top: 20px;
    padding-bottom: 0.4em;
    color: #dd9661;
}

section h2 {
    color: #dd9661;
    padding-top: 1em;
    padding-bottom: 0.6em;
    font-size: 14pt;
}

section p {
    padding-bottom: 1em;
}

section ul, section ol  {
    padding-left: 3em;
}

section li {
    padding-bottom: 0.5em;
}

footer {
    /* background-color: brown; */
    background-image: url(../Images/grau-50.png);
    color: white;
    text-align: center;
    clear: both;
}