@charset "utf-8";
html {height: 101%} /*damit ein Scrollbalken erzwungen wird und die Seiten nicht hüpfen*/

body  {
    	font: 100% Trebuchet, Verdana, Arial, Helvetica, sans-serif;
    	background: #FFE4C4;
		background-image: url(../images/cosmaten_bg.gif);
    	margin: 0;
    	padding: 0;
    	text-align: center;
    	color: #666666;
    }
    .thrColElsHdr #container { 
    	width: 52em;  /* ca 900 Pixel */
    	background: #FFFFFF;
    	margin: 0 auto;
    	border: 1px solid #000000;
    	text-align: left;
    } 
/* ############################## HEADER ##################################*/
    .thrColElsHdr #header { 
    	background: #FFFFFF; 
    	padding: 0;
		border-bottom: 1px solid #000000;
    } 
    .thrColElsHdr #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: 10px 0; /* 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. */
		font-size: 0.8em;
		font-style: italic;
		margin-left: 31em;
    }
	#outer-image {
		height: 199px;
		background-image: url(../images/cosmaten_a.jpg);
		background-repeat: repeat-x;
		background-position: center top;
		}
	#inner-image {
		text-align: center;
		background-image: url(../images/cosmaten_i.jpg)
	}   
/* ############################## SIDEBAR ##################################*/
	
    .thrColElsHdr #sidebar1 {
    	float: left; 
    	width: 11em; /* Da es sich hier um ein floatendes Element handelt, muss eine Breite angegeben werden. */
    	background: #EBEBEB; /* Die Hintergrundfarbe wird nur für die Länge des Spalteninhalts angezeigt. */
    	padding: 10px 0; /* Durch die Auffüllung oben und unten entsteht in diesem div ein visueller Leerraum. */
    }
    .thrColElsHdr #sidebar1 a {
	font-size: 0.75em;
	}
    .thrColElsHdr #sidebar1 h3 {
	font-size: 0.9em;
	font-weight: bold;
	letter-spacing: 1px;
	}
    .thrColElsHdr #sidebar1 h4 {
	font-size: 0.75em;
	margin-top: 40px;
	margin-left: 10px;
	}
/* ############################# HAUPTNAVIGATION ##############################*/

	ul.hauptnavigation {
		list-style:none;
		margin: 0;
		padding: 0;
	}
		
	ul.hauptnavigation li {
		font-family: Trebuchet, Verdana, Arial, Helvetica, sans-serif;
		font-size: 1.1em;
		padding-bottom: 6px;
	}
	ul.hauptnavigation li a {
		padding-right: 12px;
		display: block;
		background-color: #CCCCCC;
	}
	
	ul.hauptnavigation li a:link {
		color: #000000;
		text-decoration: none;
	}
	
	ul.hauptnavigation li a:visited {
		color: #000000;
		text-decoration: none;
	}
	
	ul.hauptnavigation li a:active {
		color: #990000;
		text-decoration: none;
	}
	
	ul.hauptnavigation li a:hover {
		color: #FFFFFF;
		background-color: #800000;
		text-decoration: none;
	
	}
	
body#startseite li#startnavi a, body#argumente li#argumentenavi a, body#referenzen li#referenzennavi a, body#preise li#preisenavi a, body#angebot li#angebotenavi a, body#blog li#blognavi a, body#personen li#personennavi a, body#impressum li#impressumnavi a, body#ueberblick li#ueberblicknavi a {
		background-color:#800000;
		color: #FFFFFF;
}


    .thrColElsHdr #sidebar2 {
    	float: right; 
    	width: 11em; /* Da es sich hier um ein floatendes Element handelt, muss eine Breite angegeben werden. */
    	background: #FFFFFF; /*#EBEBEB;  Die Hintergrundfarbe wird nur für die Länge des Spalteninhalts angezeigt. */
    	padding: 10px 0; /* Durch die Auffüllung oben und unten entsteht in diesem div ein visueller Leerraum. */
    }
    .thrColElsHdr #sidebar1 h3, .thrColElsHdr #sidebar1 p, .thrColElsHdr #sidebar2 p, .thrColElsHdr #sidebar2 h3 {
    	margin-left: 10px; /* Für jedes Element, das in den seitlichen Spalten platziert wird, sollten ein linker und ein rechter Rand angegeben werden. */
    	margin-right: 10px;
    }
    .thrColElsHdr #sidebar1 p {
		font-size: 0.75em;
	}
    .thrColElsHdr #sidebar2 p {
		font-size: 0.75em;
		font-style: italic;
	}
	
    /*Links in der rechten Sidebar*/
	.thrColElsHdr #sidebar2 a.solo:link {
		font-size: 0.8em;
		color: #666666;
		text-align: left;
		text-decoration: underline;
		margin-right: 4px;
	}
	.thrColElsHdr #sidebar2 a.solo:visited {
		font-size: 0.8em;
		color: #666666;
		text-align: left;
		text-decoration: underline;
	}
	.thrColElsHdr #sidebar2 a.solo:hover {
		font-size: 0.8em;
		color: #800000;
		text-align: left;
		text-decoration: underline;
	}
	.thrColElsHdr #sidebar2 a.solo:active {
		font-size: 0.8em;
		color: #800000;
		text-align: left;
		text-decoration: underline;
	}
	.thrColElsHdr #sidebar1 a.switch {
		margin-left: 10px;
		color: #666666;
	}
    
    /* ################################### Tipps für mainContent:
    1. Wenn Sie diesem #mainContent-div nicht denselben Schriftgrößenwert wie dem #sidebar1-div zuweisen, basieren die Ränder des #mainContent div auf der Schriftgröße des #mainContent-div, und die Breite des #sidebar1-div basiert auf der Schriftgröße des #sidebar1-div. Sie sollten die Werte dieser divs anpassen.
    2. Der Abstand zwischen mainContent und sidebar1 entsteht durch den linken Rand des mainContent-div. Der Spaltenbereich bleibt unabhängig von der Inhaltsmenge des sidebar1-div immer gleich. Sie können diesen linken Rand entfernen, falls der Text des #mainContent-div den Bereich von #sidebar1 füllen soll, wenn der Inhalt in #sidebar1 endet.
    3. Zur Vermeidung von Float-Drops müssen Sie gegebenenfalls die ungefähre maximale Bild-/Elementgröße anhand eines Tests ermitteln, weil dieses Layout auf der vom Benutzer angegebenen Schriftgröße und den von Ihnen festgelegten Werten basiert. Wenn der Benutzer die Browser-Schriftgröße aber auf einen Wert eingestellt hat, der unter dem Normalwert liegt, steht im #mainContent-div weniger Platz zur Verfügung als beim Test erkennbar.
    4. Im unten stehenden bedingten Kommentar für Internet Explorer wird die Zoom-Eigenschaft verwendet, um mainContent die Eigenschaft hasLayout zuzuweisen. Dadurch wird das potenzielle Auftreten verschiedener IE-spezifischer Fehler verhindert.
    */
    .thrColElsHdr #mainContent {
     	margin: 3em 13em 0 13em; 
    } 
    .thrColElsHdr #mainContent p {
	font-size: 0.85em;
	}

    .thrColElsHdr #mainContent h1, h2 {
		font-size: 1.15em;
		color: #660000;
		text-align: right;
		font-style: italic;
		letter-spacing: 5px;
	}
    .thrColElsHdr #mainContent h2 {
		font-size: 0.95em;
		text-align: left;
		letter-spacing: 2px;

	}
	.thrColElsHdr #mainContent a.solo:link {
		font-size: 0.9em;
		color: #666666;
		text-align: left;
		text-decoration: underline;
	}
	.thrColElsHdr #mainContent a.solo:visited {
		font-size: 0.9em;
		color: #666666;
		text-align: left;
		text-decoration: underline;
	}
	.thrColElsHdr #mainContent a.solo:hover {
		font-size: 0.9em;
		color: #800000;
		text-align: left;
		text-decoration: underline;
	}
	.thrColElsHdr #mainContent a.solo:active {
		font-size: 0.9em;
		color: #800000;
		text-align: left;
		text-decoration: underline;
	}

	.thrColElsHdr #mainContent a.text:link {
		font-size: 0.85em;
		font-weight: bold;
		color: #800000; /*rot*/
		text-decoration: none;
	}
	.thrColElsHdr #mainContent a.text:visited {
		font-size: 0.85em;
		font-weight: bold;
		color: #666666; /*grau*/
		text-decoration: none;
	}
	.thrColElsHdr #mainContent a.text:hover {
		font-size: 0.85em;
		font-weight: bold;
		color: #800000; /*rot*/
		text-decoration: underline;
	}
	.thrColElsHdr #mainContent a.text:active {
		font-size: 0.85em;
		font-weight: bold;
		color: #800000; /*rot*/
		text-decoration: underline;
	}
	.thrColElsHdr #mainContent a.text-ext:link { /*Kennzeichnung externer Links durch class text-ext*/
		font-size: 0.85em;
		font-weight: bold;
		color: #800000; /*rot*/
		text-decoration: none;
		background: transparent
url('../images/extern.gif') 100% 50% no-repeat;
		padding-right: 1.3em;
	}
		.thrColElsHdr #mainContent a.text-ext:visited {
		font-size: 0.85em;
		font-weight: bold;
		color: #666666; /*grau*/
		text-decoration: none;
		background: transparent
url('../images/extern.gif') 100% 50% no-repeat;
		padding-right: 1.3em;
	}
	.thrColElsHdr #mainContent a.text-ext:hover {
		font-size: 0.85em;
		font-weight: bold;
		color: #800000; /*rot*/
		text-decoration: underline;
		background: transparent
url('../images/extern.gif') 100% 50% no-repeat;
		padding-right: 1.3em;
	}
	.thrColElsHdr #mainContent a.text-ext:active {
		font-size: 0.85em;
		font-weight: bold;
		color: #800000; /*rot*/
		text-decoration: underline;
		background: transparent
url('../images/extern.gif') 100% 50% no-repeat;
		padding-right: 1.3em;
	}

/* ############################## FOOTER ##################################*/

    .thrColElsHdr #footer { 
    	padding: 0 10px; /* Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. */
    	background:#FFFFFF;
		border-top: 1px solid #000000;
    } 
    .thrColElsHdr #footer p {
    	margin: 0; /* Wenn Sie die Ränder des ersten Elements in der Fußzeile auf 0 einstellen, können Sie unerwartete Abstände zwischen divs vermeiden. */
    	padding: 10px 0; /* Durch die Verwendung der Auffüllung bei diesem Element entsteht genau wie bei einem Rand ein Leerraum, aber ohne die potenziellen Abstandsprobleme. */
		font-size: 0.7em;
		font-weight: bold;
		font-style: italic;
		color: #000000;
		text-align: right;
		margin-right: 2em;
    }
    
    /* Verschiedene wieder verwertbare Klassen */
    .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;
    }
    .clearfloat { /* Diese Klasse sollte in einem div- oder break-Element platziert werden und das letzte Element vor dem Schließen eines Containers sein, der wiederum einen vollständigen Float enthalten sollte. */
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
	
	.titlespan {
		border-bottom: 1px dotted #800000;
	}
/*##################### aus dem alten Stylesheet 

a {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 0.8em;
color: #666666;}

a.mit:link {
color: #000000;
background-color: #DEB887;
text-decoration: none;}

a.mit:visited {
color: #666666;
text-decoration: none;
background-color: #FFFFFF;}

a.mit:hover {
color: #A0522D;
background-color: #FFDEAD;}

a.mit:active {
background-color: #FFDEAD;}

a.ohne {
font-size: 0.9em;
}

a.ohne:link {
color: #000000;
text-decoration: underline;}

a.ohne:visited {
color: # 666666;
text-decoration: underline;
background-color: #FFFFFF;}

a.ohne:hover {
color: #A0522D;
background-color: #FFDEAD;}

a.ohne:active {
background-color: #FFDEAD;}

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

#screenshot{
	width: 160px;
	position:absolute;
	padding:5px;
	display:none;
	color:#fff;
	}