@charset "UTF-8";

/* <![CDATA[ */

/**
 * Allgemeine Vorgaben
 * prolog.css beachten!
 */
 
html, body { height: 99%; }
body {
	font: 0.9em 'Century Gothic', Verdana, 'Deja Vu Sans', 'Bitstream Vera Sans', Arial, Helvetica, sans-serif;
	color: black;
	background-color: white;
	padding: 0 1.5em;
}

h1, h2, h3, h4, h5, h6 {
	margin: 1em auto 1em 1em;		
	text-align: left;
	border: none; 
}	
h1 { font-size: 200%; margin-top: 2em; /* letter-spacing: 1em;  */ }
h2 { font-size: 150%; border-bottom: 2px solid gray; }
h3 { font-size: 125%; border-bottom: 2px solid gray; }	
h4 { font-size: 125%; border-bottom: 1px solid gray; }
p {
	margin: auto 2em 1em 2em;
	text-align: justify;
}
a {
	text-decoration: none;
	border-bottom: 1px dotted;
}
a:hover {
	text-decoration: none; /* underline; */
	border-bottom: 1px solid;
}

/**
 * Auf mehreren/allen Seiten verwendete Elemente
 */
.clear { clear: both; }
.nowrap { white-space: nowrap; }
.b { font-weight: bold; }
.f75 { font-size: 75% }
.f100 { font-size: 100% }
.f125 { font-size: 125% }
.f150 { font-size: 150% }
.r { text-align: right; }
.l { text-align: left; }


/**
 * Dekoration von Links abhängig vom Link-Ziel
 */
a[href^="http:"] {
	background: transparent url('/b/icn-externerlink-grau.png') center right no-repeat;
	padding-right: 16px;
}
a[href^="http:"]:hover {
	background: transparent url('/b/icn-externerlink.png') center right no-repeat;
	padding-right: 16px;
}
a[href^="http://de.wikipedia.org"],
a[href^="http://en.wikipedia.org"] {
	background: transparent url('/b/icn-wikipedia-extern-grau.png') center right no-repeat;
	padding-right: 21px;
}
a[href^="http://de.wikipedia.org"]:hover,
a[href^="http://en.wikipedia.org"]:hover {
	background: transparent url('/b/icn-wikipedia-extern.png') center right no-repeat;
	padding-right: 21px;
}
a[href^="http://dev.mysql.com"] {
	background: transparent url('/b/icn-mysql-extern-grau.png') center right no-repeat;
	padding-right: 20px;
}
a[href^="http://dev.mysql.com"]:hover {
	background: transparent url('/b/icn-mysql-extern.png') center right no-repeat;
	padding-right: 20px;
}

/**
 * Die grauen Streifen links und rechts als überlagernde DIVs statt padding im Body. Auf diesem Weg leichter umzusetzen.
 */
div#lira, div#rera { position: fixed; top: 0; width: 1em; height: 100%; background-color: #EEE; }
div#lira { left: 0; border-right: 1px solid #AAA; }
div#rera { right: 0; border-left: 1px solid #AAA; }

/**
 * Der Quickie-Link oben rechts auf (fast) jeder Seite. (_q_uicky _l_ink)
 */
div#ql { color: green; background: transparent; float: right; border-right: 0.25em solid green; padding-right: 0.5em; }
div#ql a { color: green; background: transparent; text-decoration: none; border-bottom: none; }
div#ql a:hover { text-decoration: underline; }

/**
 * Der Quickie selber, per Vorgabe erstmal nur als Definition List
 */
dl.quickie { margin-left: 2em; margin-right: 2em; border-left: 0.25em solid green; padding-left: 1em; }
dl.quickie dt { font-size: 110%; font-weight: bold; }
dl.quickie dd { margin-left: 2em; display: list-item; list-style-type: square; }

/**
 * Die Kopfzeile mit den Überschriften
 */
div#zurueckstart { float: right; margin-top: 0.25em; padding-right: 0.5em; border-right: 0.25em solid #1E90FF; }
div#zurueckstart a, div#zurueckstart a:hover, div#zurueckstart a:visited { color: inherit; }
div#zurueckstart a {
	background: transparent url('/b/tango/places-start-here.png') center right no-repeat;
	padding-right: 20px;
	border-bottom: none;
}
div#zurueckstart a:hover { text-decoration: underline; }

div#seitenueberschrift { margin-top: 1em; }
div#seitenueberschrift div { float: left; margin: 0 0.5em; font-size: 150%; }
div#seitenueberschrift a, div#seitenueberschrift a:hover, div#seitenueberschrift a:visited { color: inherit; }
div#seitenueberschrift a:hover { text-decoration: underline; }
div#seitenueberschrift h1, div#seitenueberschrift h2 { font-size: 150%; margin-top: 0; border-bottom: 3px solid gray; }
div#seitenueberschrift h1 { float: left;  }

/**
 * Das Inhaltsverzeichnis am Anfang einzelner Seiten
 */
div#inhalt { margin: 0 2em 1em 2em; text-align: center; }
div#inhalt a { white-space: nowrap; }
div#inhalt a.na { color: #AAA; text-decoration: line-through; border-bottom: none; }

/**
 * Kopf- und Fußzeile über allen Seiten
 */
div#kopfzeile {
	position: fixed; top: 2px; left: 2px; right: 2px;
	margin: 2px auto auto auto; padding: 5px;
	color: Black; background: #EEF;
	font-size: 0.7em;
	text-align: left;
	white-space: nowrap; 
	border: 1px solid black;
	
	-moz-border-radius: 0.25%;
	-khtml-border-radius: 0.25%;
	opacity: 0.5;
}
div#kopfzeile:hover {
	color: Black;
	opacity: 1.0;
}
div#fusszeile {
	position: fixed; bottom: 2px; left: 2px; right: 2px;
	margin: auto auto 2px auto; padding: 5px;
	color: #666; background: #FFD;
	font-size: 0.7em;
	text-align: right;
	white-space: nowrap; 
	border: 1px solid #666;

	-moz-border-radius: 0.25%;
	-khtml-border-radius: 0.25%;
	opacity: 0.5;
}
div#fusszeile:hover {
	color: inherit;
	opacity: 1.0;
}
div#fusszeile a, div#kopfzeile a {
	color: inherit;
	background: transparent;
	text-decoration: none;
	border-bottom: none;
}
div#fusszeile a:hover, div#kopfzeile a:hover {
	color: Black;	
	text-decoration: underline;
}
div#afuze /* AbstandFUssZEile ;-) */ { margin-top: 2em; }

/**
 * Für Quelltexte und Entwicklung genutze allgemeine Vorgaben
 */
.pfad, 
.code { font-family: /*'Lucida Console', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono',*/ 'Courier New', Courier, monospace; white-space: nowrap; text-align: left; }
.code .indent { margin-left: 1em; }
.code .comment { color: #156F15; background-color: transparent; font-style: italic; } 
.code .section { color: navy; background-color: transparent; font-weight: bold; }
.code .skipped { color: silver; background-color: transparent; font-style: italic; }
.code .keyword { color: black; background-color: transparent; font-weight: bold; }
.code .value { color: teal; background-color: transparent;  }

/**
 * Für Quelltexte und Entwicklung genutze Blockelemente
 */
p.code, div.code { font-size: 80%; background-color: #FAFAFA; border: 1px solid #CCC; margin: auto 2em 1em 2em; padding: 0 0.5em; }
div.screen-rechts { float: right; text-align: center;	font-size: 70%; padding: 5px; margin-left: 1em; margin-right: 2em; }
div.screen-links { float: left; text-align: center;	font-size: 70%; padding: 5px; margin-left: 2em; margin-right: 1em; }
div.screen-rechts:hover, div.screen-links:hover { border: 1px solid gray; padding: 4px; }

/**
 * Allgemeine Sonderformate
 */
p.achtung {
	border-left: 0.25em solid red; padding-left: 0.5em;
}



/**
 * Der Baustellen-Hinweis
 */
div.baustelle {
	width: 80%;
	margin: auto;
	padding: 0.5em;
	color: Black;
	background: #FFFFC4;
	font-size: 100%;		
	border: 1px solid #A52A2A;
	
	-moz-border-radius: 0.5em;
	-khtml-border-radius: 0.5em;
}
div.baustelle h2 { font-size: 125%; border-bottom: none; margin-bottom: auto; margin-top: auto; }
div.baustelle p { margin-bottom: 0; }











/**
 * Besonderheiten für einzelne Seiten
 * hier werden die oben festgelegten allgemeinen Vorgaben überschrieben
 */
 
/**
 * Startseite - /index.php
 */
body.intro {
	height: auto;
	color: black; background-color: #EEE;
	font: 1em Verdana, 'Deja Vu Sans', 'Bitstream Vera Sans', Arial, Helvetica, sans-serif;
	font-weight: normal;
}
body.intro p {
	margin: 0 auto;
	text-align: left;
}
body.intro ul {
	height: auto;		
	width: 50%;
	padding: 10px 10px 10px 255px; /* verschobenes Hintergrundbild (250px) zzgl. Abstand (5px) */
	margin: 5% auto auto auto;
	text-align: left;
	font-size: 0.9em;
	color: Black;			
	background: #FEFEFE url(/b/thoralf-startseite.jpg) no-repeat -50px top;
	border: 1px outset #AAA;

	-moz-border-radius: 0.5em;
	-khtml-border-radius: 0.5em;
}
body.intro ul li {
	list-style: none;		
	margin: 0;
	padding: 2px 6px 3px; /* 1px/5px/2px padding + je 1px border bei hovering */
	background-color: inherit;
	border: none;
}
body.intro ul li:hover {
	padding: 1px 5px 2px; /* 1px/5px/2px padding + je 1px border bei hovering */
	border: 1px outset #888;
	background-color: #90EE90;
	
	-moz-border-radius: 0.25em;
	-khtml-border-radius: 0.25em;
}
body.intro ul li p {
	padding: 0 0.1em;
	font-weight: normal; 
	font-size: 0.75em;
	text-align: left;
}
body.intro ul li p:first-child {
	font-size: 1.25em;
}
body.intro ul li.c, body.intro ul li.c:hover {
	padding: 0.25em 0.1em 0 0.1em;
	text-align: right;
	font-size: 0.6em;
	color: #AAA;
	background: transparent;
	border: none;
}
body.intro ul a {
	color: inherit;			
	text-decoration: none;
	border-bottom: none;
}
body.intro ul a:hover {
	text-decoration: underline;
}

body.intro ul .na { /* noch nicht aktive Einträge*/
	color: #AAA;
	background-color: transparent;
}
body.intro ul .na:hover { /* noch nicht aktive Einträge*/
	color: #666;
	text-decoration: line-through;
	background-color: #BDDABD;
}


/**
 * TechTipps - /techtipps/
 */
.techtipps h3 { margin-top: 0; }
.techtipps ul { margin-left: 2.5em; margin-right: 2em; margin-bottom: 1em; }
.techtipps ul li { margin-left: 1em; display: list-item; list-style-type: square; }
.techtipps .hinweis { color: #888; font-style: italic; }

.techtippsindex dl { margin: auto 2em 1em 2em; text-align: justify; }
.techtippsindex dl dt { 
	margin-bottom: 0.5em; font-weight: bold; 
	padding-left:18px;background: transparent url('/b/tango/dialog-information.png') center left no-repeat;
}
.techtippsindex dl dd { margin-left: 1em; margin-bottom: 0.5em; }
.techtippsindex dl dt a { border-bottom: 1px dotted black; }


/**
 * Über diese Seite - /ueber/
 */
body.ueber h2 { font-size: 125%; border-bottom-width: 2px; margin-bottom: 0.25em; }
body.ueber h3 { font-size: 110%; border-bottom-width: 1px; margin-bottom: 0.25em; margin-left: 1.5em; }
body.ueber div#seitenueberschrift, body.ueber div#seitenueberschrift h1 { margin-bottom: 0.25em; }

/**
 * Über mich - /person.php
 */
body.person h3 { margin-top: 2.5em; }


/**
 * Der Textfluss um die Bildkonturen herum
 */
body.person div.fll /* _FL_uss _L_inks */ 
{ padding: 0; margin: 0; margin-left: 2em; clear: left; float: left; width: 220px; height: 25px; min-height: 25px; }
body.person div.fllc /* _FL_uss _L_inks _C_ontainer */
{ margin: 0; padding: 0; background-color: transparent; background-repeat: no-repeat; background-position: 2em 50px; text-align: justify; }
body.person div.fllo /* _FL_uss _L_inks _O_beres Bild */
{ margin: 0 0 0 2em; padding: 0; background-color: transparent; background-repeat: no-repeat; background-position: 0 0; min-height: 50px; height: 50px; }

body.person div.flr /* _FL_uss _R_echts */ 
{ padding: 0; margin: 0; clear: right; float: right; width: 220px; height: 25px; min-height: 25px; }
body.person div.flrc /* _FL_uss _R_echts _C_ontainer */
{ margin: 0; padding: 0; background-color: transparent; background-repeat: no-repeat; background-position: 100% 50px; text-align: justify; }
body.person div.flro /* _FL_uss _R_echts _O_beres Bild */
{ margin: 0 0 0 2em; padding: 0; background-color: transparent; background-repeat: no-repeat; background-position: 100% 0; min-height: 50px; height: 50px; }








.develop { font-size: 125%; color: red; background-color: #FFFFC4; }

div.ein-ausblenden {
		padding: 0.25em 0.5em; 
		margin-bottom: 0;
		border-bottom: none;
background-color: #E5E5E5;		
}



/*

.error-module, .warning-module {
background:-moz-linear-gradient(center top , #FFFFCA, #FFEC96) repeat scroll 0 0 transparent;
border-color:#FFDB63;
}

*/

/* ]]> */