@charset "UTF-8";
body  {
	margin: 0; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
	padding: 0;
	text-align: center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	background-image: url(../bilder/bg_kachel.gif);
	background-repeat: repeat;
    }
    .twoColAbsHdr #container {
	position: relative; /* Durch Hinzufügen von position: relative können Sie die beiden Randleisten im Verhältnis zu diesem Container positionieren. */
	width: 860px;  /* Mit einer Breite, die 20 Pixel unter der vollen Breite von 800 Pixel liegt, können Sie dem Browser-Chrome Rechnung tragen und gleichzeitig eine horizontale Bildlaufleiste vermeiden. */
	height: 500px; /* Durch automatische Ränder (in Verbindung mit einer Breite) wird die Seite zentriert. */
	border: 0px;
	text-align: left;
	background-image: url(../bilder/bg_container.jpg);
	background-repeat: no-repeat;
	top: 100px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	z-index:1;
    } 
    
    /* Tipps für absolut positionierte Randleisten mit Kopf- und Fußzeile:
    1. Für absolut positionierte (AP) Elemente müssen Sie einen oberen (top) und einen seitlichen (right oder left) Positionswert angeben. Wenn der Wert für top fehlt, beginnt das AP-Element standardmäßig direkt nach dem letzten Element in der Quellenabfolge der Seite. Wenn also die Randleisten in der Quellenabfolge des Dokuments die ersten Elemente im #container sind, erscheinen sie ganz oben im #container, auch wenn für sie kein top-Wert angegeben wurde. Falls sie aber später in der Quellenabfolge an eine andere Stelle verschoben werden sollten, benötigen sie einen top-Wert, damit sie an der gewünschten Position stehen.
    2. Absolut positionierte (AP) Elemente werden aus dem Dokumentfluss herausgenommen. Dies bedeutet, dass den benachbarten Elementen ihre Existenz unbekannt ist und dass sie nicht berücksichtigt werden, wenn diese Elemente den ihnen zugedachten Platz auf der Seite einnehmen. Ein AP-div sollte daher nur als Randspalte eingesetzt werden, wenn Sie sicher sind, dass das mittlere #mainContent-div immer die größte Inhaltsmenge hat. Sollte eine der Randleisten eine größere Inhaltsmenge aufweisen, würde diese Randleiste uneingeschränkt über das Ende des übergeordneten div sowie in diesem Fall auch über das Ende der Fußzeile hinauslaufen.
    3. Sofern die oben genannten Bedingungen erfüllt sind, können Sie mit absolut positionierten Randleisten die Quellenabfolge in Dokumenten auf einfache Weise steuern.
    4. Bei einer Änderung der Quellenabfolge sollte der top-Wert mit der Höhe der Überschrift übereinstimmen, weil dadurch die Spalten und die Überschrift visuell einheitlicher wirken.
    */
    .twoColAbsHdr #header {
	height: 120px;
	padding: 0 0 0 0;
    } 
    .twoColAbsHdr #header h1 {
	margin: 0; /* Wenn Sie den Rand des letzten Elements im #header-div auf 0 einstellen, können Sie das Auftreten unerwarteter Abstände zwischen divs vermeiden. Wenn das div einen Rahmen hat, ist dies unnötig, weil dieser Rahmen die gleiche Wirkung hat. */
	padding: 0px; /* Durch die Verwendung der Auffüllung anstelle von Rändern lässt sich gewährleisten, dass das Element die Kanten des div nicht berührt. */
    }
    .twoColAbsHdr #sidebar1 {
	position: absolute;
	width: 430px; /* Die tatsächliche Breite dieses div umfasst in standardgerechten Browsern bzw. im Standardmodus von Internet Explorer außer der Breite auch die Auffüllung und den Rahmen. */
	height: 400px; /* Mit der Auffüllung wird gewährleistet, dass der Inhalt des div die Kanten nicht berührt. */
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	overflow: hidden;
	top: 0px;
	left: 0px;
    }
	.twoColAbsHdr #mainContent {
	width: 420px;
	height: 280px; /* padding (Auffüllung) bezeichnet den Innenabstand und margin (Rand) den Außenabstand der div -Box. */
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 430px;
	vertical-align: top;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 0px;
    }
	.twoColAbsHdr #textfeld {
	width: 380px;
	height: 260px; /* padding (Auffüllung) bezeichnet den Innenabstand und margin (Rand) den Außenabstand der div -Box. */
	overflow: auto;
	margin-top: 0px;
	margin-right: 30px;
	margin-bottom: 10px;
	margin-left: 0px;
	vertical-align: top;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 0px;
    }
	.twoColAbsHdr #guestbook {
	width: 320px;
	height: 260px; /* padding (Auffüllung) bezeichnet den Innenabstand und margin (Rand) den Außenabstand der div -Box. */
	overflow:none;
	margin-top: 0px;
	margin-right: 30px;
	margin-bottom: 10px;
	margin-left: 0px;
	vertical-align: top;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 0px;
    }
    .twoColAbsHdr #footer {
	padding: 0 0 0 0;
	height: 50px;
    }
	
	.twoColAbsHdr #links {
	height: 50px;
	padding-top: 0;
	padding-right: 15px;
	padding-bottom: 0;
	padding-left: 15px;
	border:none;
	} 
	
	
	.twoColAbsHdr #player {
	position: absolute;
	width: 140px;
	height: 30px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	top: 450px;
	align-right: 0px;
	z-index:1;
	left: 718px;
	border:1px solid #000000;
	background-color: #ffffff;
    }
	#bottom-right { /* unten rechts. bleibt fest veranktert. z-index sorgt dafür, dass das bild beim scrollen hinter dem container bleibt. */
	position:fixed;
	right:0;
	bottom:0
	;z-index:0;
	}
	#bottom-left { /* unten rechts. bleibt fest veranktert. z-index sorgt dafür, dass das bild beim scrollen hinter dem container bleibt. */
	position:fixed;
	left:0;
	bottom:0
	;z-index:0;
	}
    #top-right { /* oben rechts. bleibt fest veranktert. z-index sorgt dafür, dass das bild beim scrollen hinter dem container bleibt. */
	position:fixed;
	right:0;
	top:0
	;z-index:-1;
	}
	#top-left { /* oben links. bleibt fest veranktert. z-index sorgt dafür, dass das bild beim scrollen hinter dem container bleibt. */
	position:fixed;
	left:0;
	top:0
	;z-index:-1;
	}
	.fltrt { /* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts fließen lassen. Das floatende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { /* Mit dieser Klasse können Sie ein Element auf der Seite nach links fließen lassen. */
    	float: left;
    	margin-right: 8px;
    }
	.headline {
	font-family: arial, serif;
	font-size: 20px;
	color: #000000;
	text-align:left;
	font-style:normal;
	font-weight:bold;
	text-transform:lowercase;
    } 
	.fliesstext,table,tr,td	{
	font-family:arial, serif;
	font-size: 12px;
	color:#000000;
	text-transform:lowercase;
	text-align:justify;
	vertical-align:top;
	}


	a, a:link, a:visited  {color:#000000; text-decoration:underline;}
	a:active, a:hover, a:focus  {color:#d8182c; text-decoration:none;} 
	
	
/* GB <div> element */
/* gästebuch text in l18n.xml bearbeiten */
#guestbook {
	margin: 0;
	padding: 0 0 0 0;
	text-align: center;
	font-size: 12px;
	font-family:arial, serif;
	color:#000000;
	text-transform:lowercase;
}

/* images in text always vertically centered */
#guestbook img {
	vertical-align: middle;
}

/* images that are clickable links without border (so contact icons lose their borders) */
#guestbook a img {
	border: none;
}

#guestbook a:link {
	text-decoration: none;
	color: #000000;
}


/* menue row */
#guestbook .menue {
	margin: 0 0 1.5em;
	border-top: 0px solid #000000;
	border-bottom: 0px solid #000000;
	text-align: center;
}

/* international support */
#guestbook .menue select {
	border: 1px solid #000000;
}
	a.new-entry:link  {color:#000000 !important; text-decoration:underline !important; }
	a.new-entry:visited  {color:#000000 !important; text-decoration:underline !important; } 
	a.new-entry:focus  {color:#d8182c !important; text-decoration:none !important;} 
	a.new-entry:hover  {color:#d8182c !important; text-decoration:none !important;} 
	a.new-entry:active  {color:#d8182c !important; text-decoration:none !important;} 
	
	a.newer-entries:link  {color:#000000 !important; text-decoration:underline !important; }
	a.newer-entries:visited  {color:#000000 !important; text-decoration:underline !important; } 
	a.newer-entries:focus  {color:#d8182c !important; text-decoration:none !important;} 
	a.newer-entries:hover  {color:#d8182c !important; text-decoration:none !important;} 
	a.newer-entries:active  {color:#d8182c !important; text-decoration:none !important;} 

	a.older-entries:link  {color:#000000 !important; text-decoration:underline !important; }
	a.older-entries:visited  {color:#000000 !important; text-decoration:underline !important; } 
	a.older-entries:focus  {color:#d8182c !important; text-decoration:none !important;} 
	a.older-entries:hover  {color:#d8182c !important; text-decoration:none !important;} 
	a.older-entries:active  {color:#d8182c !important; text-decoration:none !important;} 


#guestbook .menue input {
	background: ButtonFace url(images/refresh.gif) 10px center no-repeat;
	cursor: pointer;
}

/* special links in menue */
#guestbook .menue .new-entry {
	padding-left: 18px;
}

#guestbook .menue .older-entries {
	padding-right: 22px;
}

#guestbook .menue .newer-entries {
	padding-left: 22px;	
}


/* the form */
#guestbook form {
	text-align: left;
	padding: 0;
}

/* paragraphs inside a form */
#guestbook form p {
	text-align: left;
}


/* there is a <div> around the input fields during the first entry */
#guestbook form #userinput {
	float: left;
	width: 50%;
}

#guestbook form #userinput p {
	text-align: left;
}

#guestbook form #userinput p img {
	padding-right: 0px;
}

#guestbook form #userinput input {
	border: 1px solid #000000;
	background: #ffffff url(images/text_bg.gif) 0px 0px;
}

/* IE can't do this so in IE the input fields aren't as long as possible */
#guestbook form #userinput p input[type=text] {
	width: 100%;
}

/* input fields during preview */
#guestbook form #userinput2 {
	float: left;
	width: 50%;
}

#guestbook form #userinput2 p {
	text-align: right;
	margin: 0;
	padding: 0;
}

#guestbook form #userinput2 p img {
	padding-right: 0px;
}

#guestbook form #userinput2 p input[type=text] {
	width: 100%;
}

/* the textbox for the actual GB entry */
#guestbook form textarea {
	width: 300px;
	height: 8em;
	border: 1px solid #000000;
	background: #ffffff url(images/text_bg.gif) 0px 0px;
	padding: 1px;
}

/* This is how the GB output is structured. It is a <dl> list where <dt> contains
all about the author and <dd> contains the actual entry. */
#guestbook dl {
	margin: 0 0;
	padding: 0;
}

/* all the info about the author */
#guestbook dt {
	text-align: left;
	margin: 0;
	padding: 0;
	color: #000000;
	border: 0px solid #c0c0c0;
	border-bottom: none;
}

/* the author's name is inside an extra <span> element */
#guestbook dt span {
	font-weight: bold;
}

/* instant messenger icons vertically centered */
#guestbook dt img {
	vertical-align: middle;
}

/* the actual message */
#guestbook dd {
	text-align: left;
	margin: 0;
	padding: 0m;
	margin-bottom: 2.5em;
	border: 0px solid #c0c0c0;
	border-top: none;
}

/* Settings for some notices and stuff */

/* error (<p>-element) */
#guestbook .error {
	width: 80%;
	font-size: 100%;
	display: block;
	margin: 0 auto;
	border: 1px solid black;
	background: #d8182c;
}

/* warning  (<p>-element with problematic user input inside respective <input> element) */
#guestbook .warning {
	color: #FF0000;
}
#guestbook .warning input {
	border: 1px solid black;
	background-color: #d8182c;
}

/* success (<p>-Element) */
#guestbook .success {
	display: block;
	border: 1px solid #00ff00;
	background: #FF0000;
	margin: 1em 2em;
	padding: 0.5em;
}

/* this <div> contains all the contents from "scripts/gb-notice.html" template */
#guestbook #notice {
	float: right;
	position: relative;
	border: solid 1px #000000;
	width: 45%;
	text-align: left;
	margin: 0px auto 20px auto;
	padding: 0.5em;
	background-color: #d8182c;
}

#guestbook #notice h2 {
	font-size: 100%;
}

#guestbook #notice #x {
	display: block;
	position: absolute;
	border: 1px solid black;
	top: -1px;
	right: -1px;
	cursor: pointer;
}

#guestbook #ip-logging-notice span.hovered {
	position: absolute;
	top: 200px;
	right: 20px;
	display: block;
	width: 200px;
	border: 1px solid #000000;
	background-color: #d8182c;
	padding: 15px;
}

#guestbook #ip-logging-notice span.non-hovered {
	display: none;
}


/* This <p> contains a notice after submission if the GB is set to "moderated mode". */
#guestbook #moderated-notice {
	text-align: left;
	width: 75%;
	border: 1px solid black;
	background: #d8182c;
	padding: 5px 15px;
	margin: 0 auto 5px;
}


#guestbook #gb-copyright-message {
	font-size: 75%;
	color:#c0c0c0;
}

    

/* smilies box (<div> element) */
#smilies {	
	float: right;
	width: 45%;
	display:none !important;
}

#guestbook .new-line {
	clear: both;
}

#guestbook span.float-left {
	float: left;
}

#guestbook span.float-right {
	float: right;
}

/* This element should be hidden from human visitors (anti SPAM mechanism) */
#guestbook #sig {
	display: none;
}

/* Admin-Links */
#guestbook .menue .admin-settings {
	padding-left: 20px;
	background: url(images/settings.gif) left center no-repeat;
}

#guestbook .admin-links {
	display: block;
	margin: 1em 0px 0px 0px;
	border-top: 1px solid black;
	line-height: 200%;
}

#guestbook .admin-links a:link {
	border: 1px solid #000000;
	background-color: #ffffff;
	margin: 0.5em 10px 0px 0px;
	padding: 2px 4px 2px 22px;
	background-position: 4px 2px;
	background-repeat: no-repeat;
	color: black;
}

#guestbook a.admin-edit {
	background-image: url(images/edit.gif);
}

#guestbook a.admin-kill {
	background-image: url(images/recycle.gif);
}

#guestbook a.admin-ok {
	background-image: url(images/ok.gif);
}

#guestbook  a.logout-link:link {
	padding: 0 1em 0 0;
	color: red;
	font-weight: bold;
}

#guestbook #back-link {
	text-decoration: none;
	font-size: 80%;
	color: black;
	border: 1px solid #000000;
	padding: 2px 5px 2px 25px;
	background: #ffffff url(images/x.gif) no-repeat 6px 2px;
}

#guestbook #admin-kill-button {
	margin: 0 10px;
	padding: 1px 1px 1px 18px;
	background: #ffffff url(images/recycle.gif) 1px 1px no-repeat;
	border: 1px solid #000000;
	cursor: pointer;
}

/* Layout for settings dialogue in the admin area */
#guestbook #settings {
	font-size: 90%;
	margin: 0 50px 50px;
	padding: 20px;
	background: #ffffff;
	border: 1px dotted #000000;
}

#guestbook #settings h2 {
	margin: 0;
	padding: 0 20px;
	background: #ffffff ;
	border: 1px dotted #000000;
	clear: both;
}

#guestbook #settings input {
	border: 1px solid #000000;
	padding: 0 5px;
}

#guestbook #settings #number {
	width: 1.3em;
}

#guestbook #settings #mail {
	background: #ffffff url(images/email.gif) no-repeat 2px center;
	padding: 0 0 0 20px;
	width: 20em;
}

#guestbook #settings select {
	border: 1px dotted #000000;
}

#guestbook #settings #submit {
	float: right;
	padding: 1px 5px 1px 25px;
	background: #000000 url(images/save.gif) no-repeat 5px center;
	cursor: pointer;
}

#guestbook #settings #back-link {
	float: left;
}

#guestbook #settings li span.float-right {
	float: right;
	font-size: 80%;
	line-height: 200%;
	padding: 0;
	margin: -1.5em 0 0 0;
	height: 1em;
	overflow: visible;
}

#guestbook #settings #login-credentials {
	width: 22em;
	margin-right: auto;
	text-align: right;
}

#guestbook #settings span.custom-text-link {
	display: inline-block;
	width: 20px;
	height: 20px;
	cursor: pointer;
	background: #ffffff url(images/edit.gif) no-repeat center center;
}

#guestbook #settings .default-text span {
	font-weight: bold;
}

#guestbook #settings #custom-notice-greeting,
#guestbook #settings #custom-notice-thank-you,
#guestbook #settings #custom-notice-me {
	width: 90%;
}


#guestbook #admin-warning {
	width: 80%;
	margin: 0 auto 15px auto;
	padding: 0 10px;
	border: 1px solid #000000;
	background: #ffffff;
	font-size: 80%;
	text-align: left;
}


#guestbook #language-changer p {
	text-align: center;
}

#guestbook #entry-form-language-changer p {
	float: right;
}

#guestbook #login-form {
	display: block;
	border: 1px solid #000000;
	background: #ffffff;
	width: 400px;
	margin: 0 auto 5em auto;
}

#guestbook #login-form #login-inputs input {
	border: 1px solid #000000;
	margin: 1px;
	background: url(images/text_bg.gif) top left;
	padding: 2px;
}

#guestbook #login-form  p {
	text-align: center;
	padding: 0 25px;
}

#guestbook #login-form  p#login-inputs {
	margin-right: 15%;
	text-align: right;
}

#guestbook #login-form  p#login-back-link {
	text-align: right;
}
.twoColAbsHdr #container #mainContent #textfeld .headline-middle {
	font-size: 14px;
	font-weight: bold;
}
.twoColAbsHdr #container #mainContent #textfeld .headline-13px {
	font-size: 13px;
	font-weight: bold;
	font-variant: small-caps;
}
.twoColAbsHdr #container #mainContent #textfeld .klein {
	font-size: 10px;
}
.twoColAbsHdr #container #mainContent #textfeld .gross {
	font-size: 20px;
}