/* ###################################################################### **
** ######################## Navigation ################################## **
** ###################################################################### */

#topnav {
	position:relative;
	top: 10px;
	right: 10px;
	color: #fff;
	background: transparent;
	text-align: right; /* Erforderlich, damit im Opera 6 wirklich rechts plaziert ! */
}

#nav { clear:both; width: auto; z-index: 100;}
/* ###################################################################### **
** ########################Grundformatierung ############################ **
** ###################################################################### */

#main_,#main_left,#main_right,#main_leftright,#main_middle,#main_middleleft,
#main_middleright,#main_middleleftright {	clear:both; width: auto; z-index: 10; color: #000; background: #fff ; padding: 1em 0 0 0;}

/* ##################################################################### **
** ### 3 Spalten Layout col1 = links, col2 = rechts, col 3 = center #### **
** ##################################################################### */

#main_middleleftright #col1 {
	float: left; width: 200px; 
}

#main_middleleftright #col2 {
	float:right; width: 200px; 
}

#main_middleleftright #col3
{
	width:auto;	margin-left: 200px; 
	margin-right: 200px; border-left: 2px dotted #ddd; border-right: 2px dotted #ddd; 
	padding: .5em;
}
/* ##################################################################### **
** ############################ 3 Spalten Layout Ende ################## **
** ##################################################################### */

/* ##################################################################### **
** ### 2 Spalten Layout col1 = links, col3 = center #################### **
** ##################################################################### */

#main_middleleft #col1 { float: left; width: 200px;}
#main_middleleft #col2 { display: none; }
#main_middleleft #col3 { width:730px; max-width: 100%;  margin-left: 210px; margin-right: 5px; border-left: 2px dotted #ddd;
}

/* ##################################################################### **
** ############################ 2 Spalten Layout Ende ################## **
** ##################################################################### */

/* ##################################################################### **
** ### 2 Spalten col2 = rechts, col3 = center ########################## **
** ##################################################################### */

#main_middleright #col2 {
	float: right; width: 200px; 
}

#main_middleright #col3
{
	width:auto; margin-right: 200px; border-right: 2px solid #ddd; padding: .5px;
}
/* ##################################################################### **
** ############################ 2 Spalten Layout Ende ################## **
** ##################################################################### */

/* ##################################################################### **
** ### 1 Spalten Layout col3 = center ################################## **
** ##################################################################### */

#main_middle #col3
{
	width:100%;
   margin-left: 5px; 
   margin-right: 5px; 
	padding: .5px;
}
/* ##################################################################### **
** ### 1 Spalten Layout Ende ########################################### **
** ##################################################################### */


/* Der z-Index verhindert, dass im Falle des noch bestehenden IE-Bugs die Texte vor 
** dem Spaltenhintergrund erscheinen. */

#col1 {z-index: 3;}
#col2 {z-index: 5;}
#col3 {z-index: 1;}
#col1_content {z-index: 4;}
#col2_content {z-index: 6;}
#col3_content {z-index: 2;}

#col1, #col2, #col3 { position: relative;}
#col1_content, #col2_content, #col3_content { position: relative;}

#footer { clear:both; width:auto; font-size: smaller; text-align: center; }

/* ########################################################################## **
** ### Markupfreie CSS-Floatclearing-Lösungen ############################### **
** ########################################################################## */


	/* Clearfix-Methode zum Clearen der Float-Umgebungen */
	 .clearfix:after {
		content: "."; 
		display: block; 
		height: 0; 
		clear: both; 
		visibility: hidden;
	}
	
	/* Diese Angabe benötigt der Safari-Browser zwingend !! */
	.clearfix { display: block; } 
	
	/* Overflow-Methode zum Clearen der Float-Umgebungen */
	.floatbox { overflow:hidden; }
	
	/* IE-Clearing: Benötigt nur der Internet Explorer und über iehacks.css zugeschaltet */
	#ie_clearing { display: none }

/* ######################################################################### **
** ### Standard-Formatierungen für Listen & Zitate ######################### **
** ######################################################################### */

ul, ol, dl { margin: 0 0 1em 0; }
li { margin-left: .5em; line-height: 1.5em; }

dt { font-weight: bold; margin: 0 0 1em 2em;}
dd { margin: 0 0 1em 2em; }

blockquote, cite { margin: 0 0 1em 1.5em; font-size: 0.93em; width: auto;}

/* ########################################################################### **
** ### Skiplink-Navigation ################################################### **
** ########################################################################### */

@media screen, print
{
.skip {
	position: absolute;
	left: -1000em; 
	width: 20em;
}

}

/* ########################################################################### **
** ### Rand um das Layout #################################################### **
** ########################################################################### */

#page{ border: 1px #667 solid; background: #fff; }
#page_margins {border: 1px #000 solid; min-width: 756px; width: 980px; max-width: 80em; margin:auto; padding: 0;}

/* ########################################################################### **
** ### Formatierung der Kopfbereiches ######################################## **
** ########################################################################### */

#header { position:relative; height: 140px; color: #fff; background: #1f1e2e url(images/opn_bg.png) repeat-x top; margin: 0;}
#header img {position:absolute; top: 48px; left: 40px; font-size:208%;}

/* ########################################################################### **
** ### Erzeugen der Abstaende in den Spalten ################################# **
** ########################################################################### */

#col1_content {	padding-top:1.5em; margin-left: 1em; margin-right: 1em; }
#col2_content {	padding-top:1.5em; margin-left: 1em; margin-right: 1em; }
#col3_content { 	padding-top:1.5em; margin-left: 1em; margin-right: 1em; }

/* ########################################################################### **
** ### Formatierung der Fußzeile ############################################# **
** ########################################################################### */
 
#footer { color:#888; background:#fff; margin: 1em; padding: 1em 0 0 0; border-top: 1px #ddd solid; line-height: 2em;}