@charset "utf-8";
/* CSS Document */

/*generelles Layout*/

* {font-size:1em; padding:0; margin:0;font-family: 'Open Sans', sans-serif;}

header,section,footer,aside,nav,article,figure,figcaption,menu,details,hgroup{display:block;}

.rubrik {font-size:2em;}

.floatimg {float:left; margin-right:1em; }
.floatimg:after {content:"."; display:block; height:0; visibility:hidden; clear:both;}

.aktiv:before{content:">> "}

#wrapper {margin-left:auto; margin-right:auto; width:70%;text-align:center;}

#header {margin:0; margin-top:3em; padding:0;}

nav ul {display:block; list-style:none; line-height:6%;}

nav li {width:13em; text-align:center; line-height:4em;}

#content ul {display:block; list-style:none;}

#content img{box-shadow:5px 5px 5px #777;}

a {text-decoration:none;}

#content a {text-align:left;}
#header a {text-decoration:none;color:#000;font-weight:bold;}

#header li:hover {cursor:pointer;}

#header li:hover a{display:block;}

h1 {margin-bottom:1em; font-size:1.2em;}
h2 {margin-bottom:1em;font-size:1.1em;}

h3 {font-size:0.9em;margin-top: 0.5em;margin-bottom:0.5em;}

h4 {font-size:1.1em;margin-top: 1em; margin-bottom: 1em;}
h5 {font-size:1em;margin-top: 1em; margin-bottom: 1em;}

#blackandwhite {cursor:pointer; border:1px solid #000; background-color:#FFF;padding:0.5em; margin:0.5em; color:#000;}

#casual {cursor:pointer; border:0; background-color:#9CF;padding:0.5em; margin:0.5em; color:#000;}

#matrix {cursor:pointer; border:0; background-color:#000;padding:0.5em; margin:0.5em; color:#0F0;}

.hidden {display:none;}
.hidden:hover {display:block;}
.sidebar {cursor:pointer; border:1px solid #000;position:fixed; height:auto; width:6em;background:rgba(100,100,100,0.80); border-radius:1em 0 0 1em; padding:1em;color:#000;}

#footer{right:0em; top:7em; height:2em;}
#design{right:0em; top:11em; height:2em;}
#impressum{right:0em; top:15em; height:2em;}
#klapp {display:none;right:0em; top:19em; height:2em;}

#footer:hover {height:auto;width:9em;padding:3em;z-index:1000;}
#design:hover {height:auto;width:9em;padding:3em;z-index:1000;}

#footer:hover .hidden {display:block;}
#design:hover .hidden {display:block;}

[title~="Impressum"]{text-decoration:none}

#galerienav {text-align:center; margin:0.5em; font-size:2.4em; font-weight:bold}
.zurueck {display:inline-block; padding-right:20px; cursor:pointer;}
.weiter {display:inline-block; cursor:pointer;}
#section2,#section3 {display:none;}
#sectionw1:hover, #sectionw2:hover, #sectionw3:hover {text-decoration:underline;cursor:pointer;}
#sectionw1, #sectionw2, #sectionw3{font-size:0.9em;text-align:right;}

@media screen and (max-width:940px)
{
	body {font-size:15px;}
	#header {float:left; margin:0em; margin-bottom:3em;}
    #content {width:100%; float:left; margin:0em !important;}
    #content:after {content:"."; display:block; height:0; visibility:hidden; clear:both;}
	#wrapper {margin:0em;}
	/*#header li {width:460px; text-align:center; line-height:4em;}*/
	.blackandwhite #header li {width:460px; padding-left:10%;}
	#header nav ul {display:none;}
	#klapp {display:inline-block;}
	#klapp ul li {display:inline-block;}
	.blackandwhite #klapp ul li {font-weight:bold; text-align:center; border:1px solid #000;}
	.blackandwhite #klapp ul li:hover {padding:0;background-color:#ccc;}
}