/* ######## Allgemeine Klassen #######################################
   ###################################################################
*/
/* Versteckte Zusätzlichen Angaben (z.B. innerhalb der Seitenwahl) */
.hide {
	display:		none;
}

/* Zeige keinen Rahmen um verlinkte Gästebuchbanner an (vor allem in alten Browsern). */
img {
	border: 0;
}

/* Meldungen direkt am oberen Rand anzeigen. */
body {
	margin: 0;
    font-family: 'Source Sans Pro', sans-serif;
    
}


/* ######## Formattierung des Seitenaufbaus ##########################
   Es gibt verschiedene Individual-Formate,
   die im Gästebuch definiert sind:
   1) #banner:			Bereich mit dem Gästebuchbild
   2) #kopfbereich:		Bereich mit dem Gästebuchtitel, dem Untertitel, und den Statistiken
   3) #menue_oben:		Menü oben (Einträge ansehen, Eintrag schreiben)
   
   4) #vorschau:		Bereich der Eintragsvorschau
   5) #eingabeformular:	Bereich des Eingabeformulars
   6) #eintraege:		Bereich, in dem Seitenwahl und Gästebucheinträge angezeigt werden
   
   7) #menue_unten:		Menü unten (Einträge ansehen, Eintrag schreiben)
   ###################################################################
*/
div#kopfbereich,
div#eingabeformular,
div#eintraege,
div#vorschau,
div#menue_oben,
div#menue_unten,
address {
	text-align:		left;
	width:			70%;
	margin-left:	auto;
	margin-right:	auto;
}

div#banner,
div#kopfbereich,
div#menue_oben,
div#menue_unten,
address {
	text-align:		center;
}

/* Gästebuchbanner mit einem Abstand zum oberen Rand der Seite anzeigen. */
div#banner{
	margin-top:		1em;
}

div#kopfbereich {
	margin-top:		1em;
}

div#eingabeformular {
	width:			100%;
	max-width:		33em;
}

div#eintraege h2 {
	display:		none;
}

div#menue_unten {
	font-size:		1.25em;
	font-weight:	bold;
	margin-bottom:	2em;
}

div#menue_oben {
	font-size:		1.25em;
	font-weight:	bold;
	margin-top:		2em;
}

address {
	margin-bottom:	3em;
}

/* ######## Formattierung der Seitenwahl #############################
   ###################################################################
*/
div#indexleiste_oben ol,
div#indexleiste_unten ol {
	list-style:	none;
	display:	inline;
	margin:		0;
	padding:	0;
}

div#indexleiste_oben li,
div#indexleiste_unten li {
	display:	inline;
}


div#indexleiste_oben {
	margin:		1.5em 0 4em 0;
}

div#indexleiste_unten {
	margin:		4em 0 1.5em 0;
}


/* ######## Formattierung der Liste mit Gästebucheinträgen ###########
   ###################################################################
*/
div.trennlinie {
	margin-top:		1.25em;
	text-align:		center;
}

div#vorschau dl,
div#eintraege dl {
		text-align:		left;
}

div#vorschau dt,
div#eintraege dt {
		font-weight:	bold;
		margin-left:	0;
}

div#vorschau dd,
div#eintraege dd {
		margin-bottom:	1.75em;
		margin-left:	0;
}



/* ######## Formattierung der Gästebucheinträge ######################
   ###################################################################
*/
table {
	border-collapse:	collapse;
}

td {
	padding-top:	.25em;
}

td.key {
	vertical-align:	top;
	font-weight:	bold;
}

td.value {
	width:			100%;
	padding-left:	.5em;
}
tr.email		td.value:before { content: url(./_bilder/gb_email.gif)" "; }
tr.homepage		td.value:before { content: url(./_bilder/gb_homepage.gif)" ";}
tr.icq			td.value:before { content: url(./_bilder/gb_icq.gif)" "; }
tr.aim			td.value:before { content: url(./_bilder/gb_aim.gif)" "; }
tr.yim			td.value:before { content: url(./_bilder/gb_yim.gif)" "; }
tr.msn			td.value:before { content: url(./_bilder/gb_msn.gif)" "; }
tr.image		td.value,
tr.kommentar	td.value {
	text-align: center;
}

tr.eingabe		td.key,
tr.eingabe		td.value {
	padding-top: 1em;
}

tr.kommentar	td.value > div {
	margin:		1em auto;
	padding:	1em;
	width:		70%;
	border:		2px dotted #ccc;
}



/* ######## Formattierung des Eingabeformulars #######################
   ###################################################################
*/
/* Schriftart und Schriftgröße des Elternelementes sollen auch in den Eingabefeldern verwendet werden */
form, input, textarea, fieldset {
	font-family:	inherit;
	font-size:		inherit;
   
}

/* Haupt-Fieldset des Eingabe-Bereiches */
form > fieldset {
	margin-bottom:	4em;
}

fieldset legend {
	display:		none;
}

fieldset {
	border:			0;
	margin:			.5em 0 0 0;
	padding:		.5em 0 0 0;
}

fieldset fieldset {
	border-top:		2px groove white;
}

div.form_submit {
	text-align:		center;
}

label {
	display:		block;
	font-weight:	normal;
}

div.form_duo span.descr {
	display:		block;
	float:			left;
	width:			10em;
	text-align:		left;
}

div.form_duo span.input,
div.form_duo div.input {
	display:		block;
	margin-left:	11em;
	text-align:		left;
}

div.form_mono {
	padding-left:	4em;
}

/* Markierung eines Fehlers im Formular */
div.form_error {
	border-left:	.5em solid #f00; 
	border-right:	.5em solid #f00; 
}



/* ######## Formattierung der Meldungen ##############################
   Dazu gehören
   1) Fehlermeldungen	(z.B. "Die eingegebene E-Mail-Adresse ist nicht korrekt.")
   2) Erfolgsmeldungen	(z.B. "Der Eintrag wurde erfolgreich in das Gästebuch gespeichert.")
   3) Systemmeldungen	(z.B. "Der Eintrag muss vom Beitzer des Gästebuches aktiviert werden, bevor er angezeigt wird.")
   ###################################################################
*/
div#meldung_fehler div,
div#meldung_erfolg div,
div#meldung_system div {
	color:				#000;
	width:				70%;
	margin-left:		auto;
	margin-right:		auto;
}

div#meldung_fehler h1,
div#meldung_erfolg h1,
div#meldung_system h1 {
	font-size:			1.5em;
	margin:				.2em;
}

div#meldung_fehler ol,
div#meldung_erfolg ol,
div#meldung_system ol {
	margin-top:			.5em;
}

div#meldung_fehler {
	background-color:	#faa; 
	border:				2px dotted #f00;
}

div#meldung_erfolg {
	background-color:	#afa; 
	border:				2px dotted #0a0;
}

div#meldung_system {
	background-color:	#aaf; 
	border:				2px dotted #00f;
}


/*
	(Fehler)Meldungen innerhalb des Gästebuches
	(z.B. "Es sind keine aktiven Einträge vorhanden.")
*/
strong.meldung {
	display:	block;
	text-align: center;
	margin:		3em 0;
}

/* ######################################################## */