/*-- Alles was Struktur macht --*/

html {margin:0;padding:0;height:100%;}
	
body {margin:0;padding:0 3%; 
	height:100%; /* needed for container min-height */ 
	background:#000000 /*#27323D*/; 
	font-family:Verdana, Geneva, sans-serif; font-size:62.5%; color:#0E2D2A;
	display: flex; display: -webkit-flex;flex-flow: row wrap;-webkit-flex-flow: row wrap;}

header {
	min-width:300px; 
	max-width:2500px; 
	background: none;
	border-radius: 0.5em;
	margin:0.25em 0; 
	padding:0; 
	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
}

aside {
	display:flex; 
	min-width:60px;
	max-width:2000px;
	margin: 0;
	padding: 0;
	background:none /*#27323D*/;
	flex: 1 1 auto;
	flex-flow: row;
}

nav {
	min-width:60px; 
	max-width:2000px;
	font-size: 1.3em;
	margin: 0;
	padding: 0 0.25em 0 0;
	background:none /*#27323D*/;
	flex: 1 1 auto;
}

section {
	display: flex;
	flex-flow: column wrap;
	width:100%;	
	margin: 0;
	padding: 0;
	flex: 1 1 auto;	
}
	
section.foot {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-end;
	justify-content: flex-end;
	width:100%;
	min-width:60px; 
	max-width:12em;
	margin: 0;
	padding: 0 0.25em 0 0;
	flex: 1 1 auto;
	align-self: flex-end;
}

main {
	display: flex;
	flex-flow: column wrap;
	justify-content:flex-start;
	align-content: flex-start;
	min-width:300px; 
	max-width:1500px; 
	margin:0; 
	padding:0.25em 1em 0 1em; 
	border-radius: .5em;
	background:#abc0d6;
	<---background-image: linear-gradient(45deg, #fd1afc, #0163ff, #09f9dd, #ff2303, #f6e505, #999eee, #26fc7e );--->
	
	flex:1 1 100%;
	text-align: justify;
	font-size: 1.3em;
}

main.eingang {
	display: flex;
	flex-flow: column wrap;
	justify-content:center;
	align-content:center;
	justify-items:center;
	min-width:300px; 
	max-width:1500px; 
	margin:0; 
	padding:0; 
	border-radius: 0;
	background:none;  
	flex:1 1 100%;
	text-align: center;
	font-size: 1.3em;
}

article.row{
	display: flex;
	flex-flow: row wrap;
	flex:1 1 auto;
	text-align: justify;
	margin:0; 
	padding:0;
	justify-content:space-between;
	justify-items:space-around;
}

article.rowwrap{
	display: flex;
	flex-flow: row wrap;
	text-align: right;
	margin:0; 
	padding:0;
	justify-content:space-between;
	align-content:flex-start;
	flex: 1 2 auto;
}

.iframe{
	display: flex;
	flex-flow: column wrap;
	flex:1 2 100%;
	margin:0; 
	padding:0;
}	

.column1 {
	display: flex;
	flex-flow: column wrap;
	flex:2 1 auto;
	text-align: justify;
	margin:0; 
	padding:0 1em 0 0;
}

.column2 {
	display: flex;
	flex-flow: column wrap;
	flex:2 1 100%;
	text-align: justify;
	margin:0; 
	padding:0 0 0 1em;
}

.column3 {
	display: flex;
	flex-flow: column wrap;
	flex:1 1 auto;
	text-align: justify;
	margin:0; 
	padding:0 1em 0 1em;
}

footer {
	border-radius: .25em;
	min-width:300px; 
	max-width:2000px; 
	margin:1em 0; 
	padding:1em; 
	background:none /*#27323D*/;
	color: #abc0d6;
	text-align: right;
	flex:1 1 100%;
}


/*--- Bilder ---*/

#head_bg{
	background: url("wolki_header_trans.png")  no-repeat; 
	background-size: 100% auto; 
	width: 100%; 
	height: 0; 
	padding-top: 36.0%; /* (img-height / img-width * width) *//* (900 / 2500 * 100) */}	
	
img {
	border:none;
}

img#foot {
	width: inherit;
	height:auto;
	margin: 3% 2% 1% 1%;
	transform: scaleX(-1);
}

img.sig {
	margin:0 -1.5em 0 0;
}

img.side {
	width:inherit;
	max-width:100%;
	height:inherit;
	max-height:100%;
}

img.middle {
	width:auto;
	max-width:100%;
	height:auto;
	max-height:100%;
}

img.border {
	border: solid 0.15em #2d214f;
}

img.ref{
	height:150px;
	max-width:100%;
}

figure.img {
	display: flex;
	margin:0;
	padding:0;
    border: none;
	align-items:space-between;
	justify-content: center;
	flex: 1 1 auto;	
}

figure.img div {
	width:100%;
	text-align:center;
	margin:0;
	padding:0;
}

img.enter {
	width:500px;
	height:356px;
}

figure.enter {
	display:flex;
	align-items: center;
	justify-content: center;
	align-content:center;
}


/*Schrift etc.*/

h1 {
	color:#32440B; 
	font-style:normal; 
	font-variant:small-caps; 
	font-weight:700; 
	font-size:1.5em; 
	font-family: Arial, Helvetica, sans-serif; 
	text-decoration:none; 
	letter-spacing: 0.2em; 
	text-transform:none; 
	text-indent:0; 
	background-color:transparent; 
	padding:0.1em 0; 
	margin:1.5em 0; 
	border-width:0px; 
	border-bottom-width:0.1em; 
	border-bottom-color:#62743B; 
	border-style:solid;
}

h2 {
	color:#641001; 
	font-style:normal; 
	font-variant:small-caps; 
	font-weight:700; 
	font-size:1.1em; 
	font-family: Arial, Helvetica, sans-serif; 
	text-decoration:none; 
	letter-spacing: 0.1em; 
	text-transform:none; 
	text-indent:0; 
	background-color:transparent; 
	padding:0.1em 0; 
	margin:1em 0; 
	border-width:0px; 
	border-bottom-width:0.1em; 
	border-bottom-color:#f4a001; 
	border-style:solid;
}
	
h3 {
	color:#cc0066; 
	font-style:normal; 
	font-variant:small-caps; 
	font-weight:normal; 
	font-size:1em; 
	font-family: Arial, Helvetica, sans-serif;
	text-decoration:underline; 
	text-indent:0;
	letter-spacing:0.1em; 
	 
	margin: 0;
	padding: 0.1em 0;
}

h6 {
	font-family:Verdana, Geneva, sans-serif;
	color:#2E0D6A;
	font-style:normal; 
	font-variant:none; 
	font-weight:normal; 
	font-size:1em; 
	display: block;
    margin-top: 0.8em;
    margin-bottom: 0.8em;
    margin-left: 0;
    margin-right: 0;
	text-indent: 0;
	letter-spacing:normal;
	line-height: 1em;
}

a {
	color:#AE0503;
	text-decoration: none;
}

a.light {
	color:#de3533;
}

i {
	font-style: oblique;
	color:#003268;
}

i.sig {
	font-style:oblique;
	color: #205288;
	text-shadow: 0.1em 0.1em 0.3em #ffffbe;
}

b {
	color:#3a9325; 
	font-style:normal; 
	font-variant:normal; 
	font-weight:bold; 
	text-decoration:none; 
	text-transform:none;
}

.right{
	text-align: right;
}

.center {
	text-align:center;
	margin:0;
}
.re {
		color:#2E0D6A;
}

span.gal{
	color: #abc0d6;
    background-color: #222222;
    border: solid 3px #67727D;
    padding: 0.5em 1.5em;
	line-height: 300%;
    border-radius: 0.1em;
    text-decoration: none;
}

ul {
	text-indent: 0%;
	list-style-type:circle;
	text-align:left;
}

ul ul{
	text-indent: 0%;
	list-style-type:"✓";
}

li {
	color:#0f006a; 
	font-style:normal; 
	font-variant:normal; 
	font-weight:normal; 
	font-family: Verdana, Geneva, sans-serif;
	text-indent:0px; 
	text-align:left; 
	text-decoration:none; 
	text-transform:capitalize;
}


hr {
	color:#9c0036;
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 0.1em;
	width:100%;
} 

textarea.links {color:#0f006a; font-size:100%; background-color:#e6eaf1;}


form textarea {
    resize: none;
}


/* We rely on source order for mobile-first approach
 * in this case:
 * 1. header
 * 2. nav
 * 3. main
 * 4. footer
 */
 
 
 /* Medium screens */  /* We tell both sidebars to share a row */
@media all and (min-width: 600px) {
  aside {
	flex-flow: column wrap;
	flex: 0 1 auto;}
  section.foot {
	  justify-content: flex-start;}
  main {flex: 1 2 0px;}
  article.row{
	display: flex;
	flex-flow: row nowrap;
	}
  img#foot {transform: none;}
  }



/*Navigation mit Checkboxes*/

#accordion input {
	display: none;}
#accordion label {
	max-width: 9em;
	background: #abc0d6;
	border-radius: .25em;
	cursor: pointer;
	display: block;
	margin-bottom: .125em;
	padding: .3em 1em;
	z-index: 20;}
#accordion label:hover {
	background:#cbe0f6;}
#accordion input:checked + label {
	background: #cbe0f6;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	color: none /*#27323D*/;
	margin-bottom: 0;}
#accordion article {
	max-width:11em;
	background: #ebffff;
	height:0px;
	overflow:hidden;
	z-index:10;}
#accordion article p {
	padding: 0em 1em;}
#accordion article h6 {
	padding: 0em 1em;}
#accordion input:checked article {}
#accordion input:checked ~ article {
	border-bottom-left-radius: .25em;
	border-bottom-right-radius: .25em;
	height: auto;
	margin-bottom: .125em;}
	
	
/* --------------------------LIGHTBOX-------------------------*/
.thumb {
	display: flex;
	margin:0.1em auto;
	padding:0;
    height: 150px;
	width:150px;
    border: solid 0.1em #420066;
	align-items:center;
	justify-content: center;
	flex: 0 0 auto;	
}

.thumb:hover {border:1px solid #E6EBF2;}

.thumb a {
	display:flex;
}

.lightbox {
    position: fixed;
    z-index: 999;
    height: 0;
    width: 0;
    text-align: center;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0;
}

.lightbox img {
    max-width: 90%;
    max-height: 80%;
    margin-top: 2%;
    opacity: 0;
}

.lightbox h6 span {
    display:none;
}

.lightbox:target {
    /** Remove default browser outline */
    outline: none;

    width: 100%;
    height: 100%;
    opacity: 1 !important;
    
}

.lightbox:target img {
    border: solid 1.5em rgba(171, 192, 214, 0.8);
	border-radius: 0.2em;
    opacity: 1;
    webkit-transition: opacity 0.6s;
    transition: opacity 0.6s;
}

.lightbox:target h6 span {
    display: inline;
}

.light-btn {
    color: #abc0d6;
    background-color: #222222;
    border: solid 3px #67727D;
    padding: 0.5em 1.5em;
    border-radius: 0.1em;
    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;
    position: absolute;
    top: 45%;
    z-index: 100;
}

.light-btn:hover {
    background-color: #111111;
}

.btn-prev {
	position:absolute;
    left: 2%;
}

.btn-next {
	position:absolute;
    right: 2%;
}

.btn-close {
    position: absolute;
    right: 2%;
    top: 2%;
    color: #fafafa;
    background-color: #92001d;
    border: solid 0.4em #ef4036;
    padding: 1em 1.5em;
    border-radius: 0.1em;
    text-decoration: none;
}

.btn-close:hover {
    background-color: #740404;
}

	
	/*--------


body{background-color:#e6eaf1;
background-image: url("bg_2012_pixel.gif"); 
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0px 0px;
background-size: 1305px 777px;
color:#0f006a; font-style:normal; font-variant:normal; font-weight:normal; font-size:100%; font-family: georgia, garamont, "times new roman", serif; text-indent:10px; text-align:justify; vertical-align:top; text-decoration:none; text-transform:none;  z-index:1;}

#Nav {position:absolute; top:0px; left:0px; width:1305px; height:777px; border:none;  z-index:2;}

#falter{position: absolute; top:47px; left:555px; width:375px; height:117px; z-index:3;}
#home{position: absolute; top:134px; left:186px; width:116px; height:85px; z-index:4;}
#rpg{position: absolute; top:384px; left:96px; width:48px; height:74px; z-index:5;}
#lauch{position:absolute; top:480px; left:99px; width:57px; height:58px; z-index:6;}
#layout{position:absolute; top:291px; left:59px; width:53px; height:66px; z-index:7;}
#photo{position:absolute; top:558px; left:48px; width:49px; height:50px; z-index:8;}
#wud{position:absolute; top:380px; left:24px; width:59px; height:80px; z-index:9;}
#sbt{position:absolute; top:548px; left:135px; width:48px; height:75px; z-index:10;}
#kunst{position:absolute; top:634px; left:63px; width:55px; height:53px; z-index:11;}
#link{position:absolute; top:707px; left:59px; width:66px; height:30px; z-index:12;}
#kontakt{position:absolute; top:701px; left:127px; width:64px; height:33px; z-index:13;}

img{border:none;}
img.ganz{width:100%; height:100%;}
img.rpgbild{width:250px; height:100%;}
img.wesen{border-width:1px; border-color:#03352a; border-style:solid;}
img.inline{width:702px; height:100%;}
img.ref{max-width:100%; height:150px;}
img.cl{width:200px; height:100%; float:left;}
img.cr{width:200px; height:100%; float:right;}

div.content {color:#0f006a; font-style:normal; font-variant:normal; font-weight:normal; font-size:100%; font-family: georgia, garamont, "times new roman", serif; text-indent:0px; text-align:justify; text-decoration:none; text-transform:none; width:760px; height:469px; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border:none; background-color:transparent; position:relative; top:213px; left:188px; overflow:auto;  z-index:14;}

div.contentmap {color:#0f006a; font-style:normal; font-variant:normal; font-weight:normal; font-size:100%; font-family: georgia, garamont, "times new roman", serif; text-indent:0px; text-align:center; vertical-align:middle; text-decoration:none; text-transform:none; width:760px; height:469px; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border:none; background-color:transparent; position:relative; top:213px; left:188px; overflow:auto;  z-index:14;} <----???--->

#refmap{position:auto; width:100%; height:auto;}

div.counter {text-align:right; background-image:none; width:59px; height;10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border:none; position: absolute; top: 195px; left: 943px; height:10px; width:10px; z-index:15;}


h1 {color:#911c37; font-style:normal; font-variant:small-caps; font-weight:bold; font-size:98%; font-family: arial, verdana, sans-serif; text-decoration:none; letter-spacing:1px; text-transform:none; text-indent:0px; background-color:transparent; padding-top: 3px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-bottom:3px; border-width:0px; border-bottom-width:1px; border-bottom-color:#911c37; border-style:solid;}

h2 {color:#0f006a; font-style:normal; font-variant:small-caps; font-weight:bold; font-size:93%; font-family: arial, verdana, sans-serif; text-decoration:underline; letter-spacing:1px; text-indent:0px; margin-right: 20px; margin-left: 20px;}

h2.cl {color:#0f006a; font-style:normal; font-variant:small-caps; font-weight:bold; font-size:93%; font-family: arial, verdana, sans-serif; text-decoration:underline; letter-spacing:1px; text-indent:0px; margin-right: 20px; margin-left: 20px; clear:left;}

h2.cr {color:#0f006a; font-style:normal; font-variant:small-caps; font-weight:bold; font-size:93%; font-family: arial, verdana, sans-serif; text-decoration:underline; letter-spacing:1px; text-indent:0px; margin-right: 20px; margin-left: 20px; clear:right;}

h3 {color:#0f006a; font-style:oblique; font-variant:small-caps; font-weight:normal; font-size:93%; font-family: arial, verdana, sans-serif; text-decoration:underline; letter-spacing:1px; text-indent:0px; margin-right: 20px; margin-left: 20px;}

p {color:#0f006a; font-style:normal; font-variant:normal; font-weight:normal; font-size:88%; font-family: georgia, garamont, "times new roman", serif; text-indent:0px; text-align:justify; text-decoration:none; text-transform:none;  margin-top: 15px; margin-right: 20px; margin-bottom: 15px; margin-left: 20px;}

p.beg {color:#0f006a; font-style:normal; font-variant:normal; font-weight:normal; font-size:88%; font-family: georgia, garamont, "times new roman", serif; text-indent:0px; text-align:center; text-decoration:none; text-transform:none;  margin-top: 15px; margin-right: 20px; margin-bottom: 15px; margin-left: 20px;}

p.sig {color:#0f006a; font-style:normal; font-variant:normal; font-weight:normal; font-size:88%; font-family: georgia, garamont, "times new roman", serif; text-indent:0px; text-align:right; text-decoration:none; text-transform:none;  margin-top: 15px; margin-right: 60px; margin-bottom: 15px; margin-left: 0px;}

p.help {color:#0f006a; font-style:normal; font-variant:normal; font-weight:normal; font-size:60%; font-family: georgia, garamont, "times new roman", serif; text-indent:0px; text-align:right; text-decoration:none; text-transform:none;  margin-top: 0px; margin-right: 20px; margin-bottom: 0px; margin-left: 0px;}

h2.head {color:#68228B; background-image: url("http://img122.imageshack.us/img122/268/backyhashe2.png"); border:0pt; font-style:normal; font-variant:small-caps; font-weight:bold; font-size:93%; font-family: arial, verdana, sans-serif; text-decoration:underline; letter-spacing:1px; text-indent:0px; margin-right: 20px; margin-left: 20px;} <---Hassiej!--->

table, tr, td, script {color:#0f006a; font-style:normal; font-variant:normal; font-weight:normal; font-size:88%; font-family: georgia, garamont, "times new roman", serif; text-align:justify; vertical-align:top; text-decoration:none; text-transform:none;}


i {color:#6fb19c; font-style:italic; font-variant:normal; font-weight:normal; font-size:99%; font-family: "courier new", courier, monospace; text-decoration:none; text-transform:none;}
b {color:#570108; font-style:normal; font-variant:normal; font-weight:bold; font-size:100%; font-family: georgia, garamont, "times new roman", serif; text-decoration:none; text-transform:none;}
u {color:#17638c; font-style:normal; font-variant:normal; font-weight:normal; font-size:100%; font-family: georgia, garamont, "times new roman", serif; text-decoration:underline; text-transform:none;}
s {color:#877f7f; font-style:normal; font-variant:normal; font-weight:normal; font-size:100%; font-family: georgia, garamont, "times new roman", serif; text-decoration:line-through; text-transform:none;}

a, a:link {color:#297293; font-style:normal; font-variant:normal; font-weight:normal; font-size:100%; font-family: georgia, garamont, "times new roman", serif; text-decoration:none; text-transform:none;}
a:visited  {color:#58329B; font-style:normal; font-variant:normal; font-weight:normal; font-size:100%; font-family: georgia, garamont, "times new roman", serif; text-decoration:none; text-transform:none;}
a:active {color:#297293; font-style:normal; font-variant:normal; font-weight:normal; font-size:100%; font-family: georgia, garamont, "times new roman", serif; text-decoration:none; text-transform:none;}
a:hover {color:#a31226; font-style:normal; font-variant:normal; font-weight:normal; font-size:100%; font-family: georgia, garamont, "times new roman", serif; text-decoration:none; text-transform:none;}



li {color:#0f006a; font-style:normal; font-variant:normal; font-weight:normal; font-size:88%; font-family: georgia, garamont, "times new roman", serif; text-indent:0px; text-align:justify; text-decoration:none; text-transform:capitalize;}
li.text {color:#0f006a; font-style:normal; font-variant:normal; font-weight:normal; font-size:88%; font-family: georgia, garamont, "times new roman", serif; text-indent:0px; text-align:justify; text-decoration:none; text-transform:none;}

table.lk {color:#0f006a; font-style:normal; font-variant:normal; font-weight:normal; font-size:88%; font-family: georgia, garamont, "times new roman", serif; text-indent:0px; text-align:center; text-decoration:none; text-transform:none;  margin-top: 15px; margin-right: 20px; margin-bottom: 15px; margin-left: 20px; border:none;}

div.pet {color:#0f006a; font-style:normal; font-variant:normal; font-weight:normal; font-size:88%; font-family: georgia, garamont, "times new roman", serif; text-indent:0px; text-align:center; text-decoration:none; text-transform:none;  height:250px; width:600px; overflow:auto;}



.re {color:#17638c; font-style:normal; font-variant:normal; font-weight:normal; font-size:100%; font-family: georgia, garamont, "times new roman", serif; text-decoration:none; text-transform:none;}

**/