@import url('https://fonts.googleapis.com/css?family=Orbitron|Sniglet|Kodchasan');
* {
margin: 0;
padding: 0;
} /* hebt StandardFormatierung aller Browser auf, ANSI-KODIERT Version 7.1 !!! */
/* ### box-sizing: content-box - Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included ### */
/* ### border-box - The width and height properties (and min/max properties) includes content, padding and border ### */
/* ### initial - Sets this property to its default value. https://www.w3schools.com/cssref/css_initial.asp ### */
/* ### inherit -  Inherits this property from its parent element. https://www.w3schools.com/cssref/css_inherit.asp ### */
html { box-sizing: content-box;} /* fuer html, alle Elemente erben den Wert des Elternelementes */
*, ::before, ::after {box-sizing: content-box;} /* inherit vererbt box-sizing des Elternelementes */
/*  F A R B E N  */
/* Blue +0000ff 0,0,255 DarkBlue +00008b 0,0,139 DodgerBlue3 +1874cd 24,116,205 MediumBlue +0000cd 0,0,205 Gelb +ffff00 255,255,0 DarkGoldenRod2 +eead0e 238,173,14 Chokolate +d2691e 210,105,30 Green3 +00cd00 0,205,0 ForestGreen +228b22 34,139,34 LimeGreen +32cd32 50,205,50 DarkGreen +006400 0,100,0 Orange +ffa500 255,165,0 Red3 +cd0000 205,0,0 Indigo+4b0082 75,0,130 BlauViolett+8a2be2 138,43,226 LightViolett+96c 153,102,204 DarkViolett+9400d3 148,0,211 BlauLila+90f  153,0,255  Traube+639 102,51,153 LightPink +ffb6c1 255,182,193 PaleViolettRed +db7093 219,112,147 HotPink3 +cd6090 205,96,144 DeepPink4 +8b0a50 139,10,80 LightPink+ffb6c1 255,182,193 MediumOrchid+ba55d3 186,85,211 DarkOrchid+9932cc 153,50,204 DarkOrchid3 +9a32cd 154,50,205 MediumPurple+9370db 147,112,219  Orange+fc6  255,204,102 Blue4 +00008b 0,0,139 RoyalBlue +4169e1 65,105,225 LightSteelBlue +b0c4de 176,196,222 LightSteelBlue4 +6e7b8b 110,123,139 SkyBlue1 +87ceff 135,206,255 LightCyan4 +7a8b8b 122,139,139 Azure4 +838b8b 131,139,139 Gray40 +666 102,102,102 Gray25 +404040 64,64,64 */
/*   S E I T E N A U F B A U    */
body {
text-align: center; /* zentriert die Elemente in alten Browsern */
background-color: #ee9; 
background-image: url(script/pics/bkgr/backgr.jpg); /* Hintergrund gesamter Bildschirm relative von css */
background-repeat: round;
/*	background-size: cover; */
background-attachment: fixed;
font-family: 'Kodchasan', serif;
color: #ffff8b; /* hellgelb */
}
h1 { font-size:2.0em; font-weight:bold; color:#00008b; }
h2 { font-size:1.7em; font-weight:bold; color:#00008b; }
h3 { font-size:1.4em; color:#00008b; }
h4 { font-size:1.2em; color:#00008b; }
p { font-size:1.0em; color:#00008b; }
/* die Schriftart wird global fuer alle Arrays schon in body definiert */
/* Internetexplorer 10 und 11 kennen das main-Element nicht, benoetigt die zusaetzliche CSS-Angabe */
header, main, nav, footer, aside, section, article {
display: block;
}
/* wrapper umschlieszt den durch <div> umschlossenen Bereich, width, margin, background  */
#wrapper {
width: 1200px;
margin: 0 auto; /* top+bottom, left+right .. zentriert den ganzen umschlossenen Bereich */
text-align: left; /* hebt align-center von body wieder auf */
}
/* 	H E A D E R   Kopfbereich, groszes Bild, LOGO NUR LAYOUT */
header {
box-sizing: content-box;
position: relative; /* erforderlich, um die Elemente darin absolut zu positionieren */	
height: 190px; /* Hoehe des heaeders */
text-align: left;
margin: 2px; /* trennt die Fenster im Abstand voneinander */
padding: 0px;
/* background-image: url(../script/pics/bkgr/headbackgr.jpg); background-repeat:no-repeat; background-size: 1200px auto; background-position: -0px -10px; /* Pfad relative von css */
/* background-color: rgba(131,139,139,0.5); /* Azure4 50% */
/* background size= Breite in px, Höhe automatisch, Position= minus px nach links, 0px von oben */
/* border: silver outset 3px; */
/* border-radius: 20px; /* rundet die Ecken des section-Fensters ab */
/*	-webkit-border-radius: 20px; */
/*	-moz-border-radius: 20px;*/
}
/* StandardHintergrund AlbumHead */
.bgrheadimg {
background-image: url(script/pics/bkgr/headbkgr.gif);
background-repeat: no-repeat;
position: relative;
background-size: 1200px 200px;
background-position: 0px 0px; /* unbedingt anpassen */
z-index: -5;
border: silver outset 3px;
border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}
/* ErsterAndererHintergrund AlbumHead */
.bgrheadeins {
background-image: url(script/pics/bkgr/headbkgreins.jpg);
background-repeat: no-repeat;
position: relative;
background-size: 1200px 125px;
background-position: 0px 0px; /* unbedingt anpassen */
z-index: -5;
border : silver outset 3px;
border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}
/* ZweiterAndererHintergrund AlbumHead */
.bgrheadzwei {
background-image: url(script/pics/bkgr/headbkgrzwei.jpg);
background-repeat: no-repeat;
position: relative;
background-size: 1200px 125px;
background-position: 0px 0px; /* unbedingt anpassen */
z-index: -5;
border : silver outset 3px;
border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}
/* DritterAndererHintergrund AlbumHead */
.bgrheaddrei {
background-image: url(script/pics/bkgr/headbkgrdrei.jpg);
background-repeat: no-repeat;
position: relative;
background-size: 1200px 125px;
background-position: 0px 0px; /* unbedingt anpassen */
z-index: -5;
border : silver outset 3px;
border-radius: 20px; /* rundet die Ecken des section-Fensters ab */
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}
/* VierterAndererHintergrund AlbumHead */
.bgrheadvier {
background-image: url(script/pics/bkgr/headbkgrvier.jpg);
background-repeat: no-repeat;
position: relative;
background-size: 1200px 300px; /* unbedingt anpassen */
background-position: 0px 0px; /* unbedingt anpassen */
z-index: -5;
border : silver outset 3px;
border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}
/* FuenfterAndererHintergrund AlbumHead */
.bgrheadfuenf {
background-image: url(script/pics/bkgr/headbkgrfuenf.jpg); 
background-repeat: no-repeat;
position: relative;
background-size: 1200px 200px; /* unbedingt anpassen */
background-position: 0px -70px; /* unbedingt anpassen */
z-index: -5;
border : silver outset 3px;
border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}
/* Hallo Nickname Text wird im header positioniert */
#nicktext {
color: #00008b;
background-color: #ccc;
position: absolute;	bottom: 0; left: 0; /* positioniert das Element im umgebenden Element ( wichtig hier position relative! header) unten rechts */
padding: 3px 3px 3px 7px; /* oben rechts unten links */
border: silver outset 3px;
border-radius: 0px 13px 0px 13px;
	-webkit-border-radius: 0px 13px 0px 13px;
	-moz-border-radius: 0px 13px 0px 13px;
font-family: Arial,sans-serif;
font-size:14px;
font-weight:bold;
z-index:6; 
}
/* Besucherzaehler, wird fixiert rechts oben in header positioniert */
#hcount {
color: #00008b;
background-color: #ccc;
position: absolute;	top: 0; right: 0; /* positioniert das Element im umgebenden Element ( wichtig hier position relative! header) unten rechts */
padding: 3px 9px 3px 9px; /* Zahl im Fenster */
border: silver outset 3px;
border-radius: 0px 13px 0px 13px;
	-webkit-border-radius: 0px 13px 0px 13px;
	-moz-border-radius: 0px 13px 0px 13px;
font-family: Arial,sans-serif;
font-size:14px;
font-weight:bold;
z-index:6; 
}
/* Datei-Aenderungsdatum, wird fixiert rechts positioniert */
#filedate {
color: #00008b;
background-color: #ccc;
position: absolute;	bottom: 0; right: 0; /* positioniert das Element im umgebenden Element ( wichtig hier position relative! header) unten rechts */
padding: 3px 9px 3px 9px; /* oben rechts unten links */
border: silver outset 3px;
border-radius: 13px 0px 13px 0px;
	-webkit-border-radius: 13px 0px 13px 0px;
	-moz-border-radius: 13px 0px 13px 0px;
font-family: Arial,sans-serif;
font-size:14px;
font-weight:bold;
z-index:6; 
}
/* N A V menu horizontal oben KOMPLETTE Definition hier  */
#menuhori {
box-sizing: border-box;	
background-color: rgba(131,139,139,0.5); /* Azure4 50% */
height: 32px; /* Hoehe der Navigationsleiste */
border: silver outset 2px;
border-radius: 13px;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
margin: 3px 3px 3px 3px; /* oben rechts unten links,  trennt die Fenster im Abstand voneinander */
padding: 0px 0px 0px 150px; /* rueckt die link-Elemente vom linken Rand weg ueber den section-Bereich */	
}
#menuhori p {
background-color: rgba(65,105,225,0.5); /* Cyan 50% */
display: block; /* link-Tag ist ein inline Element, das mit block eine Breite bekommen kann */
float: left; /* erst mit float nebeneinander angeordnet */
margin-left: -150px;
padding: 0px 8px 2px 8px; /* oben rechts unten links */
border: silver outset 2px;
border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
text-align: center; /* zentriert die Schrift mittig */
color: #b0c4de; /* Schriftfarbe der Schaltelemente */
font-weight: bold;
z-index:6;
}
#menuhori a {
background-color: rgba(65,105,225,0.5); /* Cyan 50% */
display: block; /* link-Tag ist ein inline Element, das mit block eine Breite bekommen kann */
float: left; /* erst mit float nebeneinander angeordnet */
border: silver outset 2px;
border-radius: 13px;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
text-align: center; /* zentriert die Schrift mittig */
color: #00008b; /* Schriftfarbe der Schaltelemente */
font-weight: bold;
text-decoration: none; /* keine link-Unterstreichung */
padding: 0px 8px 2px 8px; /* oben rechts unten links */
line-height: 22px; /* gleiche Hoehe fuer die link-Elemente */
}
#menuhori a:hover {
background-color: rgba(108,166,205,0.5); /* Azure4 50% Schaltflaechenfarbe aendert sich bei Mouseover */
border-radius: 13px;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
padding: 25px 8px 2px 8px; /* oben rechts unten links - schiebt die Schaltflaeche langsam nach unten max 25px bei section padding-top 7px */
	-webkit-transition: padding 1s; /* Safari */
transition: padding 1s;
}
#menuhori a:active {
background-color: #87ceeb; /* Azure4 50% Schaltflaechenfarbe aendert sich bei Click */
border-radius: 13px;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
border: #4169e1 inset 2px;
padding: 35px 8px 2px 8px;
}
#menuhori ul {
list-style-type: none;
}
#menuhori li {
display: inline; /* ordnet die List-Elemente nebeneinander an */
}
/* E N D E - N A V horizontal */
/* N A V menulinks vertikale Navigation linker Bereich */	
#menulinks {
clear: all; /* hebt float-left vom vorherigen Element wieder auf */
box-sizing: border-box;
position: absolute;
width: 140px; /* Platz fuer die Fensterbreite, wird in section freigegeben */
margin: 1px 0px 5px 5px; /* oben rechts unten links, trennt die Fenster im Abstand voneinander */
float: left; /* Schalt-Elemente werden nach links plaziert */
text-align: left; /* Text der Schaltelemente */
padding: 2px 2px 2px 5px; /* oben rechts unten links */
font-size: 14px;
font-weight: bold;
background-color: rgba(131,139,139,0.5); /* Azure4 50% */
border: silver outset 3px;
border-radius: 13px; /* rundet die Ecken des section-Fensters ab */
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
}
#menulinks img {
width: 107px;
/* height: 107px; */
border: silver outset 3px;	
border-radius: 13px;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
margin: 2px 0px 0px 0px;
}
#menulinks a img {
border: silver outset 0px;	
border-radius: 13px;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
}
#menulinks p {
background-color: rgba(188,210,238,0.5); /* LightSteelBlue2 50% */
color: #bfefff; /* Schriftfarbe der Schaltelemente */
display: block; /* link-Tag ist ein inline Element, das mit block eine Breite bekommen kann */
font-size: 14px;
font-weight: bold;
text-align: left; /* Text der Schaltelemente */
width: 127px;
margin-left: 0px;
padding: 2px 2px 2px 5px; /* oben rechts unten links */
border: silver outset 2px;
border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}
#menulinks a {
display: block; /* link-Tag ist ein inline Element, das mit block eine Beite bekommen kann */
color: #22a; 
background-color: #b0c4de; /* Schaltelemente Backgr LightSteelBlue*/
text-decoration: none; /* keine link-Unterstreichung */
list-style-type: none;
border: silver outset 3px;
border-radius: 20px; /* rundet die Ecken des section-Fensters ab */
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
font-size: 14px;
font-weight: bold;
width: 110px;
margin-left: 0px;
padding: 2px 2px 2px 5px; /* oben rechts unten links */
}
#menulinks a:hover {
background-color: rgba(108,166,205,0.5); /* Schriftfarbe der Schaltelemente */
color: #22a;
width: 150px;
text-align: right;
padding: 2px 10px 2px 70px; /* oben rechts unten links */
	-webkit-transition: padding 2s, width 2s, text-align 1s; /* Safari */
transition: padding 2s, width 2s, text-align 1s;
}
#menulinks a:active {
background-color: #87ceeb; /* Azure4 */
border: silver inset 3px;
}
#menulinks ul {
padding-left: 1.5em;
padding-top: 5px;
list-style-type: none;
}
#menulinks ul ul {
list-style-type: none;
}
#menulinks li {
padding-bottom: 0.5em;
list-style-type: none;
}
/* Klasse fuer Fixierung des NaviMenues oben durch JavaScript */
.fest {position: fixed; top: 0px;}
/* Klassen fuer MenueHintergrundFarbe */
.bgmaroon {
background-color: rgba(176,48,96,0.7); /* Maroon */
margin: -5px -5px -5px -8px; /* oben rechts unten links */
padding: 0 0 0 8px;
border: #cd0000 outset 2px;
border-radius: 13px;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
}
.bgred {
background-color: rgba(255,182,193,0.7); /* LightPink */
margin: -5px -5px 1px -8px; /* oben rechts unten links */
padding: 0;
border: #8b2252 outset 3px; /* VioletRed4 */
border-radius: 13px;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
}
.bggelb {
background-color: rgba(255,204,102,0.4); /* HellOrange */
margin: -5px -5px 1px -8px; /* oben rechts unten links */
padding: 0;
border: #cdcd00 outset 2px;
border-radius: 13px;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
}
.bgblau {
background-color: rgba(65,105,225,0.4); /* RoyalBlue */
margin: -5px -5px 1px -8px; /* oben rechts unten links */
padding: 0;
border: #0000cd outset 2px;
border-radius: 13px;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
}
.bggreen {
background-color: rgba(50,205,50,0.4); /* LimeGreen */
margin: -5px -5px 1px -8px; /* oben rechts unten links */
padding: 0;
border: #228b22 outset 2px; /* ForestGreen */
border-radius: 13px;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
}
/* Klasse fette rote MenueSchrift */
.menured { 
text-align: center;
font-size: 16px;
font-weight: bold;
color: #8b0000;
}
.menusave {
background-color:#b30; 
margin: 0em;
padding: 0.3em;
border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
border: yellow outset 3px;
}
/* Ende Menuelinks */
/* definiert das HAUPTFENSTER in der Mitte, muss links und rechts Platz machen fuer die Seitenbereiche  */
section {
/* color nicht festgelegt */
box-sizing: content-box;
display: block;
background-color: rgba(224,255,255,0.8); /* LightCyan 80% */
margin-left: 147px; /* Platz fuer menulinks */
margin-right: 3px; /* KEIN aside */
margin-top: 3px; /* Platz oben fuer Hover-Effekt der Navi-Leiste */
border: silver outset 3px;
border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
padding: 7px 5px 5px 7px; /* oben rechts unten links -top mind 7px fuer Platz transition menue-hori */
}
section p, h1, h2, h3, h4 , h5, h6 {
text-align: justify;
padding: 10px 10px 5px 10px; /*oben rechts unten links*/
}
/* Listen Formatierung speziell und anders als andere css */
section ul {
padding:0;
margin:0;
list-style-type:none;
}
section ul li{
padding: 3px;
background-color:#ebebeb;
border:1px solid #ccc;
float:left;
margin:0 10px 10px 0;
}
section ul li:hover{
border:1px solid #333;
}
section ul li span{
display:block;
text-align:center;
font-size:10px;
}
section ul li a img{
border:none;
}
section a img{
border:1px solid #ccc;
padding: 3px;
}
/* ENDE Listen Formatierung*/
/* in SafeAlbumCss ist hier die section-Formatierung links mitte rechts */
/* in SAFE ist hier die Definition Copyright Hinweis unten rechts in section */ 
/* Definitionen F O T O S */
/* Positionierung von 2x2 kleinen Bildern links, einem groszen rechts daneben */
#albumpic {
box-sizing: content-box; /* vererbt margin und padding nicht */
float: left;
color: #00008b;	
	/* position: center; */
width: 237px;
height: 162px;
margin: 0.3em 0.1em 0.3em 0.3em; /* oben rechts unten links */
padding: 0.3em 0.3em 0.7em 0.0em; /* oben rechts unten links */	
font-family: Arial,sans-serif;
font-size:14px;
font-weight:bold;
z-index:6; 
}
#startpic {
box-sizing: content-box; /* vererbt margin und padding nicht */
color: #00008b;	
	/* position: center; */
border: silver outset 2px;
border-radius: 13px; /* rundet die Ecken des Fensters ab */
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
font-family: Arial,sans-serif; font-size:14px; font-weight:bold; z-index:6; 
}
		/* ### erste Reihe links ### */
.pos1 { /* berbea64 */
	/* clear: left; */
	/* float: left; */
	/* background-color: rgba(153,102,51,0.5); Braun 0% */
	/* background size= Breite in px, Höhe automatisch, Position= minus px nach links, 0px von oben */
background-image: url(/public/user/berbea64/img/backpic.jpg); background-repeat:no-repeat; background-size: 368px auto; background-position: -10px -30px;
	/* margin: 0.3em 0.1em 0.3em 0.3em; oben rechts unten links */
	/* padding: 0.3em 0.3em 0.7em 0.3em; oben rechts unten links */
width: 268px;
height: 170px;
}
.pos2 { /* wasmar56 */
	/* clear: left; */
	/* float: left; */
	/* background size= Breite in px, Höhe automatisch, Position= minus px nach links, 0px von oben */
	/* background-color: rgba(153,0,255,0.5); BlauLila 0% */
	/* background size= Breite in px, Höhe automatisch, Position= minus px nach links, 0px von oben */
background-image: url(/public/user/wasmar56/img/headbckgr.jpg); background-repeat:no-repeat; background-size: 368px auto; background-position: -5px -70px;
	/* margin: 0.3em 0.1em 0.3em 0.3em; oben rechts unten links */
	/* padding: 0.3em 0.3em 0.7em 0.3em; oben rechts unten links */
width: 268px;
height: 183px;
}
/* ### rechtes groszes Fenster ### */
.pos3 { /* album */
	/* clear: left; */
	/* float: left; */
	/* background-color: rgba(24,116,205,0.5); DodgerBlue 0% */
	/* background size= Breite in px, Höhe automatisch, Position= minus px nach links, 0px von oben */
background-image: url(/public/user/album/img/backpic.jpg); background-repeat:no-repeat; background-size: 700px auto; background-position: -190px -0px;
	/* margin: 0.3em 0.1em 0.3em 0.3em; oben rechts unten links */
	/* padding: 0.3em 0.3em 0.7em 0.3em; oben rechts unten links */
width: 438px;
height: 372px;
}
/* ### zweite Reihe links ### */
.pos4 { /* clipper */
clear: left;
float: left;
	/* background-color: rgba(0,205,0,0.5); Green3 0% */
	/* background size= Breite in px, Höhe automatisch, Position= minus px nach links, 0px von oben */
background-image: url(/public/user/clipper/img/backpic.jpg); background-repeat:no-repeat; background-size: 288px auto; background-position: -10px -10px;
margin: 0.3em 0.3em 0.3em 0.3em; /* oben rechts unten links */
padding: 0.3em 0.3em 0.7em 0.3em; /* oben rechts unten links */
width: 268px;
height: 170px;
	}
.pos5 { /* computer */
	/* clear: left; */
float: left;
	/* background-color: rgba(205,0,0,0.5); Red3 0% */
	/* background size= Breite in px, Höhe automatisch, Position= minus px nach links, 0px von oben */
background-image: url(/public/user/computer/img/backpic.jpg); background-repeat:no-repeat; background-size: 368px auto; background-position: -20px -30px;
	/* position: center; */
margin: 0.3em 0.0em 0.3em 0.3em;  /* oben rechts unten links */
padding: 0.0em 0.3em 0.0em 0.3em;  /* oben rechts unten links */
width: 268px;
height: 183px;
}
/* Ende Position 5 Bilder */
/* ### StartSeite mit 5 wechselnden Fotos css3 Diashow mit FadeEffekt ### */
#stapel {
height:360px;
width: 640px;
margin: 5px auto 5px; /* oben mittig unten */
border: silver outset 5px;
border-radius: 13px;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
box-shadow: 1px 1px 5px 2px #777;
}
#stapel img {
position: absolute;
height:360px;
width: 640px;
border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
opacity: 0;
}
#stapel img:nth-of-type(1) {
animation: fade 30s ease-in-out infinite;
}
#stapel img:nth-of-type(2) {
animation: fade 30s 6s ease-in-out infinite;
}
#stapel img:nth-of-type(3) {
animation: fade 30s 12s ease-in-out infinite;
}
#stapel img:nth-of-type(4) {
animation: fade 30s 18s ease-in-out infinite;
}
#stapel img:nth-of-type(5) {
animation: fade 30s 24s ease-in-out infinite;
}
@keyframes fade {
6.66%, 20%          {opacity:1;}
   0%, 26.66%, 100% {opacity:0;}
}
/* ### ENDE  css3 Diashow mit FadeEffekt ### */
/* Copyright Hinweis unten rechts in section */
#cprsect {
background-color: rgba(255,204,102,0.5); /* Orange 50% */
color: #00008b;
/* position: absolute;	bottom: 0; right: 0; /* positioniert das Element im umgebenden Element ( wichtig hier position relative! header) unten rechts */
margin: 20px 30px 3px 30px;
padding: 3px 9px 3px 9px; /* oben rechts unten links */
border: silver outset 3px;
border-radius: 13px; /* rundet die Ecken des Fensters ab */
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
text-align: center;
font-family: Arial,sans-serif;
font-size: 14px;
font-weight: bold;
z-index: 6; 
}
#footmsg a{
color: #8b0099;
text-decoration: underline;
}
#footmsg a:hover{
color: lightblue;
}
/* Fotos UpLoad */
#upimgcenter {
// height:310px;
width: 486px;
margin: 5px auto 5px; /* oben mittig unten */
// border-radius: 13px; /* rundet die Ecken des Fensters ab */
//	-webkit-border-radius: 13px;
//	-moz-border-radius: 13px;
// box-shadow: 1px 1px 5px 2px #777;
}
#upimgcenter img {
//position: absolute;
height:206px;
// width: 486px;
border: silver outset 5px;
border-radius: 10px; /* rundet die Ecken des Fensters ab */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}
#imgcenter {
height:310px;
width: 486px;
margin: 5px auto 5px; /* oben mittig unten */
border: silver outset 5px;
border-radius: 13px; /* rundet die Ecken des Fensters ab */
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
box-shadow: 1px 1px 5px 2px #777;
}
#imgcenter img {
position: absolute;
height:310px;
width: 486px;
border-radius: 10px; /* rundet die Ecken des Fensters ab */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}
/* Ende Fotos UpLoad */
/* ### nur mit css3 Bilder mit Unterschriften positionieren ### */	
figure { /* Bilder positionieren css3 */
position: relative;
margin: 0;
padding: 10px;
width: 470px;
border: 1px solid gainsboro;
background: white;
}
figcaption { /* BildUnterschriften css3 */
padding: 10px;
text-align: center;
}
/* ### ENDE  mit css3 Bilder mit Unterschriften positionieren ### */
/* Definition fuer AlbumImg */
#albumimg {
vertical-align: top; /*positioniert die Bilder alle nach oben */
border: silver outset 2px;
margin: 0px 0px 5px 0px; /* Abstand der Bilderreihen zur darueberliegenden Reihe */
border-radius: 13px;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
}
#albumig span {
display: block;
text-align: center;
font-size: 10px;
}
div.albumimg {
border: silver outset 2px;
border-radius: 13px;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
}
div.albumig span {
display: block;
text-align: center;
font-size: 10px;
}
.landscape {
/* width: 243px; proportional je nach Bildformat */
height: 150px;
}
.portrait {
width: 150px;
/* height: 240px; proportional je nach Bildformat */
}
/* Ende Definition fuer AlbumImg */
/* nur fuer mixed.php */
div.galerie {
width: 295px; /* notwendig, damit wahlweise der Inhalt der TextDatei darunter passt - in polaroid.php image-Breite 290px */
padding: 3px;
background-color: #ebebeb;
border: #ccc solid 1px;
float: left;
margin:10px 10px 0  0;
font-family: Arial, Helvetica, sans-serif;	
}
div.galerie:hover {
border: #333 solid 1px;
}
div.galerie span{
color:#00008b;
display: block;
text-align: center;
font-size: 10px;
}
div.galerie a img{
border: none;
}
div.file {
padding: 4px 4px 4px 30px;
}
div.file.even {
background-color: #ebebeb;
}
div.file a {
text-decoration: none;
}
div.file:hover {
background-color: #ccc;
}
/* Ende NUR mixed.php */
/* Foto bei hover mit Text-Fade in der Bildmitte 				*/
/* im body des scriptes : 										*/
	/*	<div class="imgcontainer">								*/
	/*	<img src="img_avatar.png" alt="Avatar" class="image">	*/
	/* 		<div class="imgoverlay">							*/
	/*			<div class="imgtext">Hello World</div>			*/
	/*  </div>													*/
	/*	</div>													*/
 /* Ende des scriptes 											*/
.imgcontainer {
position: relative;
width: 100%;
border: 0px transparent;
}
.image {
display: block;
/* width: 220px; */
/* height: 150px; */
width: 100%;
height: auto;
border: 0px transparent;
}
.imgoverlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(153,0,255,0.0); /* BlauLila 0% */
overflow: hidden;
width: 100%;
height: 100%;
border: 0px transparent;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
transform: scale(0);
  -webkit-transition: .3s ease;
transition: .3s ease;
}
.imgcontainer:hover .imgoverlay {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
transform: scale(1);
}
.imgtext {
font-family: "Comic Sans MS", serif;
color: #fc0;
font-size: 30px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
border: 0px transparent;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
/* E n de  - Foto bei hover mit Text-Fade in der Bildmitte */
/* F O O T E R  */
footer {
clear: both; /* notwendig, damit bei zu wenig Inhalt im mittleren Bereich die Fuszzeile NICHT nach oben in den Inhalt floatet */
/*	background-color: transparent; */
box-sizing: border-box;
background-color: rgba(131,139,139,0.5); /* Azure4 50% */	
height: 33px; /* Hoehe der Navigationsleiste */
margin: 5px 0px 5px 147px;
padding-left: 150px; /* rueckt die link-Elemente vom linken Rand weg ueber den section-Bereich */	
border: silver outset 2px;
border-radius: 13px;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
}
footer p {
background-color: rgba(65,105,225,0.5); /* Cyan 50% */
display: block; /* link-Tag ist ein inline Element, das mit block eine Breite bekommen kann */
float: left; /* erst mit float nebeneinander angeordnet */
margin-left: -186px;
margin-top: -4px;
padding: 2px 8px; /* oben/unten rechts/links */
border: silver outset 2px;
border-radius: 13px;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
text-align: center; /* zentriert die Schrift mittig */
color: #b0c4de; /* Schriftfarbe der Schaltelemente */
font-weight: bold;
}
footer a {
background-color: rgba(65,105,225,0.5); /* Cyan 50% */
display: block; /* link-Tag ist ein inline Element, das mit block eine Breite bekommen kann */
float: left; /* erst mit float nebeneinander angeordnet */
border: silver outset 3px;
border-radius: 13px;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
text-align: center; /* zentriert die Schrift mittig */
color: #00008b; /* Schriftfarbe der Schaltelemente */
font-weight: bold;
text-decoration: none; /* keine link-Unterstreichung */
margin-right: 3px;
padding: 0px 8px 2px 8px; /* oben rechts unten links */
line-height: 23px; /* gleiche Hoehe fuer die link-Elemente */
text-decoration: none; /* keine link-Unterstreichung */
}
footer a:hover {
background-color: rgba(108,166,205,0.5); /* Azure4 50% Schaltflaechenfarbe aendert sich bei Mouseover */
border-radius: 13px;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
}
footer a:active {
background-color: #87ceeb; /* Schaltflaechenfarbe aendert sich bei Click */
border: #4169e1 inset 3px;
}
footer ul {
list-style-type: none;
}
footer li {
display: inline; /* ordnet die List-Elemente nebeneinander an */
}
/* Copyright Hinweis unten rechts in section */
#footmsg {
background-color: rgba(255,204,102,0.5); /* Orange 50% */
color: #00008b;
position: absolute;	bottom: 0; right: 0; /* positioniert das Element im umgebenden Element ( wichtig hier position relative! header) unten rechts */
padding: 3px 9px 3px 9px; /* oben rechts unten links */
border: silver outset 3px;
border-radius: 13px 0px 13px 0px; /* rundet die Ecken des Fensters ab */
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
font-family: Arial,sans-serif;
font-size: 14px;
font-weight: bold;
z-index: 6; 
}
#footmsg a{
color: #8b0099;
text-decoration: underline;
}
#footmsg a:hover{
color: lightblue;
}
/* ENDE FOOTER */
/* Hier ist in SAFE die komplette Definition fuer Formularfelder und MailFormular */
/* Formular mit fieldset legend label Anzeige links neben Formularfeld */
fieldset {
padding: 5px;
width: 570px; /* Breite des Eingabefeldes */
color:#f7c600;
border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
border: #f7c600 solid 4px;	
}
legend {
font-size: 12px;
padding: 5px 10px 5px 75px;
color:#f7c600;
/*	text-transform: lowercase; */
}
label {
float: left;
width: 170px; /* Breite der Benamung */
padding-top: 5px;
text-align: right;
margin-right: 1.5em;
}
input {
display: block;
font-size: 16px;
margin-bottom: 10px;
border: #f7c600 inset 2px;
padding: 4px;
width: 300px;
}
/* Ende Formular mit fieldset legend label Anzeige links neben Formularfeld */
/* Fuer FileUplodJavaScript */
.fileupload {
color: red;
background-color: #fc9; /* sand */
margin: 5px 13px 5px 13px; /* oben rechts unten links */
padding:5px 13px 5px 13px; /* oben rechts unten links */
width: 400px; /* Breite des Eingabefeldes */	
border: silver outset 3px;
border-radius:15px;
	-webkit-border-radius:15px;
	-moz-border-radius:15px;
}
/* Ende FileUplodJavaScript */
.inputField {
border: #f7c600 solid 1px;
width: 250px;
color: #209;
font-size: 1.2em;
background-color: #ddf;
}
.errorField {
border: #755 solid 1px;
width: 250px;
color: #222;
font-size: 1.2em;
background-color: #dd0;
}
.errorRed {
color: #ed4;
padding: 4px 25px 6px 25px;
border: 2px solid #d44;
}
.errorGreen {
color: #5e5;
padding: 2px 2px 2px 35px;	
border: #5e5 solid 2px;
}	
/* DIV-ARRAY fuer MAIL-FORMULAR */
#mailformular {
text-shadow:0 1px 0 orange;
}
/* link-Farben */
section a {
color: #f7c600;
font-weight:bold;
text-decoration:none;
}
section a:link {
color: #ffc;
}
/* section a:visited { color: #dda; } */
section a:active {
color: #f00;
}
section a:hover {
color: #00f;
}
/* ENDE Div Array Mailformular */

/* K L A S S E N */
.neonblueshade {
color: #b0c4de; /* LightSteelBlue */
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 10px darkblue;
}
.neonredshade {
color: #ffb6c1; /* LightSteelBlue */
text-shadow: 1px 1px 2px black, 0 0 25px red, 0 0 10px darkred;
}
.errorRed {
color: #ed4;
padding: 2px 2px 2px 35px;
border: #d44 solid 2px;
}
.errorGreen {
color: #5e5;
padding: 2px 2px 2px 35px;	
border: #5e5 solid 2px;
}	
/* DIV-ARRAY fuer MAIL-FORMULAR */
#mailformular {
text-shadow:0 1px 0 orange;
}
.sendbutton {
float: left; /* erst mit float nebeneinander angeordnet */
margin: 0px 10px 10px 10px;
padding: 5px;
cursor: pointer;
	-moz-box-shadow: inset 0px 1px 0px 0px #fce2c1;
	-webkit-box-shadow: inset 0px 1px 0px 0px #fce2c1;
box-shadow: inset 0px 1px 0px 0px #fce2c1;
	/* background: -webkit-gradient( linear, left top, left button, color-stop(0.05, #ffc477), color-stop(1, #fb9e25)); */
	/* background: -mozlinear-gradient( center top, #ffc477 5%, #fb9e25 100%); */
	/* filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='fb9e25'); */
background-color: #ffc477;
	-webkit-border-radius: 16px;
border-radius: 16px;
border: #eeb44f solid 1px;
color: #ffffff;
font-family: Arial;
font-size: 16px;
width: 160px;
font-weight: bold;
text-shadow: 1px 1px 0px #cc9f52;
}
.sendbutton:hover {
	/* background: -webkit-gradient( linear, left top, left button, color-stop(0.05, #fb9e25), color-stop(1, #ffc477)); */
	/* background: -mozlinear-gradient( center top, #fb9e25 5%, #ffc477 100%); */
	/* filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='ffc477'); */
background-color: #fb9e25;
}
/* ENDE Formular und MailFormular */
/* nur fuer mixed.php */
div.galerie {
padding: 3px;
background-color: #ebebeb;
border: #ccc solid 1px;
float: left;
margin:10px 10px 0  0;
font-family: Arial, Helvetica, sans-serif;	
}
div.galerie:hover{
border: #333 solid 1px;
}
div.galerie span{
display: block;
text-align: center;
color: blue;
font-size: 12px;
}
div.galerie a img{
border: none;
}
div.file {
padding:4px 4px 4px 30px;
}
div.file.even{
background-color: #ebebeb;
}
div.file a {
text-decoration:none;
}
div.file:hover {
background-color: #ccc;
}
/* Ende mixed.php */
/* K L A S S E N */	
.startbckgr {
position: relative; top:0px; left:0px; padding:0px; z-index:-3;
}
.startpic {
position: relative; top:15px; left:19px; padding:0px; z-index:3;
}
.startname {
position: relative;
top: -70px;
left: 0px;
font-size: 12px;
background-color: transparent;
color: #cc2222;
text-align: center;
font-weight: bold;
border: #9999dd outset 2px;
padding: 0px;
z-index: 2; 
}
.startlink {
position: relative;
top: 0px;
left: 19px;
padding: 0px;
z-index: 3; 
}
.navig {
background-color: #ccc; 
font-size: 12px;
color: #00b;
text-align: center;
font-weight: bold; 
margin: 2px;
padding: 2px;
}
.navsave {
background-color: transparent; 
color: #f40;
text-align: center;
font-weight: bold; 
margin: 2px;
padding: 2px; 
border:outset 2px; 
}
.save {
background-color: #930; 
font-size: 14px;
text-align: center;
font-weight: bold;
color: #fe3; 
padding: 0px 5px 10px 5px;
border: yellow outset 3px;
}
.gruen {
background-color: #50a180; 
font-size: 14px;
text-align: center;
font-weight: bold;
color: #fe3; 
padding: 0px 5px 10px 5px;
border: yellow outset 3px;
}
.lila {
background-color: #96c; 
font-size: 14px;
text-align: center;
font-weight: bold;
color: #fe3; 
padding: 0px 5px 10px 5px;
border: #99f outset 3px;
}	
.savetrsp { 
background-color: rgba (255,0,0,0,5); /* rot 50% */
font-size: 14px;
color :#bff;
text-align: center;
font-weight: bold; 
margin: 2px;
padding: 2px; 
border:red outset 3px;
}
.greentrsp { 
background-color: rgba (0,255,0,0,5); /* gruen 50% */
font-size: 14px;
color: #074;
font-weight: bold;
text-align: center; 
margin: 2px;
padding: 2px; 
border:green outset 3px;
}		
.headmsg {
text-align: center;
font-size: 1.4em;
font-weight: bold;
color: #f7c600; /*walnut*/
}
.tangerine {
font-family: 'Tangerine', 'Comic Sans MS', sans-serif;
font-size: 60px;
font-weight: bold;
color: #f7c600; /*gelborange*/
text-shadow: 4px 4px 4px #963; /* braun */
}
.tangerineleft {
font-family: 'Tangerine', serif;
font-size: 2.2em;
font-weight: bold;
color: #520; /*dunkelbraun*/
text-shadow: 4px 4px 4px #9f0;
}
.shadowleft {
font-family: 'Tangerine', serif;
font-size: 2.1em;
padding-left: 5px;
font-weight: bold;
color: #520; /*dunkelbraun*/
text-shadow: 4px 4px 4px #9f0;
}
.mtfemadm {
background-color: #b9d; 
font-family: "Comic Sans MS",italic,courier;
font-size: 12px;
color: #312; 
text-align: center;
font-weight: bold; 
padding: 2px;
}
/* ordnet die per div umschlossenen Elemente nebeneinander */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
/*     E N D E     */