body {font-family:Verdana,Helvetica,Arial; font-size:10pt; color: #003399;}
td {padding:5px 5px 5px 5px;}
h1 {font-family: 'Sofadi One', cursive; Font-Size: 20pt; font-weight:bold; Font-Style: normal; text-decoration:none; line-height:25px;}
h2 {font-family: 'Sofadi One', cursive; Font-Size: 20pt; font-weight:bold; Font-Style: normal; text-decoration:none; line-height:25px;}
.h3 {Font-Size: 32pt; Color: #333399; font-weight: bold; Font-Style: italic; text-shadow:black 3px 2px 4px; }
.h4 {Font-Size: 14pt; Color: #FF9900; font-weight: bold; Font-Style: normal; text-shadow:black 3px 2px 4px; }
.tx {Font-Size: 12pt; Color: #000000; font-weight: normal; Font-Style: normal; text-align: justify}
.txinv {Font-Size: 12pt; Color: #ffffff; font-weight: normal; Font-Style: normal;}
.at {Font-Size: 18pt; Color: #FF0000; font-weight:bold; }
.oh {Font-Size:18pt;  Color: #FFff00; text-shadow:blue 3px 2px 4px; position:absolute; top:200px; z-index:1; text-align:center;}
#bodyar {position:absolute; top:185px; margin:0px 0px 0px 0px; width:100%; border-style:solid; border-width:0px; z-index:0;  }
#content { position:relative; top:0px; margin:0px 10px -200px 30px; border-style:solid; border-width:0px; z-index:0; }
#footer { color:#FFF0C2; padding: 0px 0px 0px 0px; text-align:left; border-width:0px;  }
#wrapfl	{ position:fixed; top: 5px; right:10px; width: 150px; text-align:right; border: 0px solid #CCC6B8; display:block; z-index:110;} 
.clearer{ clear: both; }
.weather { position: absolute; top: 145px; right: 5px; height: 10px; font-size: 0em; z-index:200; }
.centerI { text-align: center; border:solid 0px #00ff00; margin-left: auto; margin-right: auto;}

div.menuO { display:table-cell; width:100%; top:-110px; height:30px; font-family: 'Sofadi One', cursive; font-size:16pt; font-weight:bold; white-space: nowrap; cursor:pointer; padding:0px 30px; z-index:11; text-decoration:none; border: solid 0px #ff0000; }
div.menu  { position: fixed; width: 100%; height:40px; font-family: 'Sofadi One', cursive; font-size:16pt; top:130px; padding:0px 0px 0px 0px;  background-Image:url(../pix/goldbar.gif); background-position:0px 10px; background-repeat: repeat-x; border-style:solid; border-width: 0px; border-color:#ffff00;}
div.smenu { position: fixed; text-align: center; left:20px; top:10px; margin: 0px auto 0px auto; font-family: 'Sofadi One', cursive; font-size:16pt; font-size: 16pt; padding:0px; z-index:1110;  border-style:solid; border-width:0px; z-index:2; }
a { text-decoration: none;}
.nbutt, .abutt, .ibutt, .lbutt { white-space:nowrap; background-color:#ffffff; cursor:pointer;  background-repeat: no-repeat; height:30px; line-height: 30px; /*float:left;*/ margin:0px 2px; padding:0px 10px 0px 10px; vertical-align: text-bottom; font-weight: bold; border: solid 3px #F3DC86; border-radius:20px; box-shadow:5px 5px 20px 0px rgba(0,0,0,0.9);}
.nbutt:hover, .nbutt a:hover { color: #0049d4; background-color: #fffbb5; }
.lbutt {width:80%; position:relative; left:-10px; font-family: 'Sofadi One', cursive; font-size: 150%; }
.abutt		{ color:#850303; background-color:#ffe7a6; }
.abutt:hover	{ color:#0000ff; background-color:#ffe7a6; }
.ibutt		{ color:#bbbbbb; background-color:#eeeeee; }
.ibutt:hover	{ color:#000000; }

.ftab {display: inline-table;}
.frow {display: table-row; border: 0px solid #0000ff;}
.fcel {display: table-cell; padding: 0px 5px; border: 0px solid #0000ff;}
div.show {position:relative; display:block; left:0px; top:0px; width:800px; height:100%; background-color:#ffffff; border-style:solid; border-width:0px; border-color:#ff0000;}
div.gall {position:relative; float:left; display:block; width:290px; height:270px; border-style:solid; border-width:0px; border-color:#ffff00;}
div.totx { position:absolute; top:160px; left:1px; padding:0px 20px 0px 20px; Font-Size: 14pt; Color: #f90; font-weight: bold; Font-Style: normal; background-color:#339; border-style:solid; border-width:3px; border-style:ridge; border-color:#ff9900; border-radius:15px; box-shadow:10px 15px 50px 0px rgba(0,0,0,0.9); }
div.picbtx {position:relative; width: 100%; height:100%; text-align:center; margin: 0px auto 20px auto; top:10px; padding:0px 0px 0px 0px; border-style:solid; border-width: 0px; border-color:#ffff00;}

/* Die folgende Zeile formatiert die Thumbs.  Und den z-index auch der großen. Trans bringt hier nix! */
a.p1 {
	position: relative;
	color: #25257e;
	cursor: default;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	text-decoration: none;
	padding: 5px;
/*	float: left;		*/
	z-index: 50;
	-webkit-transition: opacity 0.8s ease-in-out;
	-moz-transition: opacity 0.8s ease-in-out;
	-o-transition: opacity 0.8 ease-in-out;
	-ms-transition: opacity 0.8s ease-in-out;
	transition: opacity 0.8s ease-in-out;
}
/* Die folgende Zeile bildet die Rahmen und den Schatten für Thumbs! */
a.p1 img {
/*	display: block;		*/
	border: 3px solid #cccccc; 
	border-radius: 10px; 
	box-shadow:5px 5px 8px 0px rgba(0,0,0,0.4);
}
/* Das wird mit bg-im zum kleinen Rechteck ausschliesslich (!) unter dem kleinen Bild! Das Kommando bewirkt nur die Darstellung des großen Bildes ÜBER den Thumbs! */
a.p1:hover {
	z-index:500;
}
/* Ganz wichtig! Nur damit werden die großen Bilder versteckt. Wenn die folgende Zeile nicht da ist, ist es so als ob alles dargsetellt wird! Die Trans wirkt hier NUR beim aufgehen! */
a.p1 b {
	display: block;
	position: fixed;
/*	left: -9999px;		*/
/*	padding:0px;		*/
/*	padding-top: 35%;	*/
	opacity:0;
	border-radius:20px;
	box-shadow:10px 15px 50px 0px rgba(0,0,0,0.9);
	-webkit-transition: opacity 0.8s ease-in-out;
	-moz-transition: opacity 0.8s ease-in-out;
	-o-transition: opacity 0.8 ease-in-out;
	-ms-transition: opacity 0.8s ease-in-out; 
	transition: opacity 0.8s ease-in-out;
}
/* Ohne das gibt es keine Pop-Ups! */
/*a.p1:hover b { top:5px; left:50%; margin-left: -360px; padding:0px; border:0px solid #ddd; background:white; text-align:center; opacity:1.0; }*/
a.p1:hover b { 
	width: 100%;
	top: 5px;
	left: 50%; 
	transform: translate(-50%, 0%);
/*	margin-left: -50%;	*/
/*	margin-left: auto;	*/
/*	margin-right: auto;	*/
	background-repeat: no-repeat; 
	border: 5px solid #ddd; 
/*	text-align: center;	*/
	opacity:1.0; 
}
a.p1:hover b:before {
	content: ''; 
	float: left; 
}
a.p1:hover b:after {
	content: '';
	display: table;
	clear: both;
}
/*31.7.2015!  Juchuuu!  Die Zeile läßt das große Bild bei Klicken darauf verschwinden! ..aber leider auch das Kleine! */
a.p1:active b {
	display:block;
	position:fixed;
	top: -9999px;
	left: -9999px;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
/* ok, iPad - aber nicht nötig - getest mit Jules- iPhone */
img.iPad {position:fixed; left:0; top:0; width:100%; height:100%; display:none; z-index:10;}
a.p1:hover ~ img.iPad {display:block;}
.pictxt { 
	margin: 0px auto; 
	width: 96%; 
	position: relative; 
	top: 94%; 
	background: white; 
	border:2px solid #ddd; 
	text-align:center; 
	opacity: 0.8; 
	border-radius:10px;
}
.contentbox { background:#ff9900; padding:5px; margin:5px; border-radius:5px; box-shadow:10px 10px 20px -10px rgba(0,0,0,0.9); }
.contentboxadd { max-width:500px; min-width:300px; width: 100%; }
.cleft, .cright { width: 49%; border:solid 0px #000000; margin:0px; padding:0px;}
.cleft, .cright { float: left;}

/*article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }*/
#page-wrap { width: 100%; margin: 10px auto; position: relative; border-style:solid; border-width:1px; border-color:#00ffff;}
#logo { position: absolute; top: 0; left: 50%; margin-left: -320px; }
#logo1 {top: 0px; width: 100%; max-width:800px; max-height: 100px; min-width: 200px; border-style:solid; border-width:0px; border-color:#ff0000; }
#title {position: fixed; left: -1000px;}
#leer {width: 10px; height: 10px; border-width: 0px;}

div.smts01 { display:table; padding:5px; min-height:200px; border: solid 0px #00ff00; }

/* position:fixed */
.outer { position:fixed; top:0; left:0; width:100%; height:100%; border:solid 0px #ff0000; z-index:0;}
/* certering */
.middle { width:100%; height:100%; /*display:table;*/ margin:0 auto; border:solid 0px #00ff00;}
.inner { vertical-align:top; /*display:table-cell;*/  border: solid 0px #0000ff;}
 
/* position:fixed */
.outer2 { position:fixed; top:0; left:0; width:100%; height:150px; border:solid 0px #ff0000; z-index:10; }
/* certering 
background: #FBFEFF url(../images/bg/<yabb tmplk>.jpg) center top fixed ; 
*/
.middle2 { width:100%; display:table; margin:0px auto 0px auto; border:solid 1px #00ff00; }
.inner2 { vertical-align:top; width:100%; text-align: center; margin:0px auto 0px auto; /*display:table-cell;*/ border:solid 0px #0000ff; }

.container { width: 94%; padding: 5px; padding-top: 0px; padding-bottom: 10px; margin: auto; margin-top: 180px; margin-bottom: 20px; }
.main {	margin: auto; width: 99%; max-width: 1000px; border:solid 0px #0000ff;}
.main2 { position: absolute; top: 100px;  margin: auto; height: 280px; width: 99%; border:solid 1px #0000ff;}
.content { padding: 20px; text-align: justify; background: #eeeeee; background-repeat:repeat; border: solid 5px  #cccccc; border-radius:15px; box-shadow:10px 15px 50px 0px rgba(0,0,0,0.9); }
.headline { /*white-space:nowrap;*/ position:relative; top: -10px; width: 100%; min-width: 300px; font-family: 'Sofadi One', cursive; border:solid 0px #ff0000; line-height:32px; Font-Size: 24pt; font-weight:normal; Font-Style: normal; text-decoration:none; color:#FFD47E; text-shadow: 0px 0px 4px #C48345, 0px 0px 4px #C48345, 0px 0px 4px #C48345, 0px 0px 4px #C48345, 0px 0px 4px #C48345, 0px 0px 4px #C48345, 0px 0px 4px #C48345, 0px 0px 4px #C48345;}
.footer {
	z-index: 100;
	position: fixed; 
	bottom: 0; 
	text-align: center; 
	width: 100%; 
	padding-top: 0px; 
	padding-bottom: 0px; 
	color: #000000; 
	background: transparent; 
	margin: auto;
	margin-top: 2px; 
/*	border: solid 3px  #cccccc; 
	border-top-left-radius:15px; 
	border-top-right-radius:15px; 
	box-shadow:10px 15px 50px 0px rgba(0,0,0,0.9); */
}
.footer a { color: #000000; font-size: 11px; font-weight: bold; }
.footer a:hover { text-decoration: underline; }

.form_row { height: 27px; width: 100px; }
.form_box { width: 300px; padding: 3px; border: 0px solid #4b2355; background: #F3F3F3; color: #000000; }
.form_button { background: #6886a1; color: #ffffff; padding: 3px; padding-left: 5px; padding-right: 5px; margin-top: 7px; width: 170px; background: url(../images/send_button.png) no-repeat left top; }
.form_table { background: url(../images/form_bg.jpg) no-repeat right top; }

article {
  -webkit-column-width: 400px;
     -moz-column-width: 400px;
          column-width: 400px;
  -webkit-column-rule: 2px solid #ddd;
     -moz-column-rule: 2px solid #ddd;
          column-rule: 2px solid #ddd;
  -webkit-column-gap: 24px;
     -moz-column-gap: 24px;
          column-gap: 24px;
}