/*
 * Global
 */
 
html { height: 100%; }
body { height: 100%; background-color: #C4C4C4; }

body /*other? */ {

 	font-family:  Verdana, Arial, Helvetica, Sans-Serif;
	/* optional: Arial, Verdana, Georgia */
	font-size: 12px;
	
	/* background:#fff url(../images/bg.gif) repeat-x top left; */
 
 /* background-color: #EFEFEF; */
} 

/*
 * Heading, Überschriften 
 */
h1 {
	/* Todo warum nich global? */
	font-family: Helvetica, Sans-Serif;
	/* Todo: Angabe als em! */
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 1px;
	/* Todo Farbe als HEX */
	border-bottom: 1px solid rgb( 230, 230, 230 );
	margin: 28px 0px 18px 0px;	
}
h1:first-child {
		margin: 4px 0px 18px 0px;	
}
/*
 * http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm
 */
h2 {
	/* Todo, warum nicht global? */
	font-family: Helvetica, Sans-Serif;
	/* Todo Angabe als em! */
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #CDCDCD;
	
	padding: 22px 0px 6px 0px;
}
h2:first-child {
	padding: 10px 0px 6px 0px;
}

h3 {
	font-size: 1.0em;
	font-style: italic;
	font-weight: normal;
	text-decoration: underline;
	padding: 12px 0px 0px 0px;
}

/* 
 * Paragraph, Absatz 
 */
p {
	line-height: 18px;
	text-align: justify;
	
	padding-top: 4px;
	padding-bottom: 2px;
	margin: 4px 0px 2px 0px;
}

code {
	color: #666;
	font-size: 0.9em;
	font-family: monaco, courier, monospace; 
	font-weight: normal;
}

blockquote {
	font-style: italic;
	text-align: justify;

	color: #6F6F6F;
	border-left: 2px solid #BBBBBB;

	padding: 14px;
	padding-right: 35px;
	
	margin-top: 12px;
	margin-left: 45px;
	margin-bottom: 10px;	
}

/* 
 * Tables, Tabellen 
 *
 * http://de.selfhtml.org/html/tabellen/aufbau.htm
 * http://de.selfhtml.org/html/tabellen/gestaltung.htm
 * http://de.selfhtml.org/css/eigenschaften/tabellen.htm
 */

/*
 * Todo: Spalten formatieren: 
 * http://www.teialehrbuch.de/Kostenlose-Kurse/HTML-CSS/20771-Formatierung-von-Spalten-und-Spaltengruppen-bei-Tabellen.html
 */
table {
	width: 95%;

	border-spacing: 0px 0px; 
	border-collapse: collapse;
	
	margin-top: 10px;
	margin-left: 15px;
	margin-bottom: 8px;
}

caption {
	text-align: left;
	font-style: italic;
	
	padding-top: 12px;
	margin-left: 15px;	
	padding-bottom: 12px;
}

tr.css_row1 {
	background-color: #FFFFFF;
}
tr.css_row2 {
	/* background-color: #C2D5FC;*/
	 background-color: #EFEFEF;
}

td, th {
	padding: 4px;
}

th {
	text-align: left;
	border-width: 0px;
	border-bottom-width: 2px;	
}

tbody td {
	border-bottom-width: 1px;
}

tfoot td {
	font-weight: bold;
	border-top-width: 2px;
}

/*
 * Forms, Formulare
 */
 
 form {
 	background-color: #F9F9F9;
 
	border-top: 2px solid #973DC4;
	border-bottom: 2px solid #973DC4;
	
	padding-top: 8px;
	padding-bottom: 4px;
	
	margin-top: 12px;
	margin-bottom: 8px;
}

fieldset {
	border-style: none;
	
	padding: 8px;
	padding-top: 10px;
	padding-bottom: 10px;
	
	margin: 5px;
	
	border-top: 1px dotted #D4D4D4; 
}

fieldset:first-child {
	margin-top: 2px;
	margin-bottom: 2px;
	
	border-top: 0px solid #D4D4D4; 
}

.css_field_info {
	font-style: italic;
	
	padding-top: 2px;
	padding-bottom: 6px;
	
	margin-top: 4px;
	margin-bottom: 4px;
}

.css_label {
	float: left;
	
	width: 150px;
	height: 20px;
	
	padding-top: 2px;
	padding-bottom: 2px;
}

.css_required {
	font-weight: bold;
}
.css_control {
	height: 20px;
	
	padding-top: 2px;
	padding-bottom: 2px;
}

/* 
 * Images, Bilder, Icons
 *
 * http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=image
 */

img {
	padding: 2px;
	padding-top: 8px;
	
	border: 0px;
}
img.css_icon {
	border-width: 0px;
}

img.css_left {
	float: left;
	padding: 4px 16px 12px 0px;
}
img.css_right {
	float: right;
	padding: 4px 0px 12px 16px;
}
img.css_frame  {
 	text-align: center;
  	background: #fff;
  	border: 1px solid #973DC4;
  	padding: 5px;
}

/* Todo: verschieben! */
img.css_banner {
	padding: 0px;
	margin:0px;
}



/* 
 * Structure, Struktur
 */

* { padding: 0; margin: 0; }

/*
 * Container to center the whole page
 */
#css_container { 
	/* BEGIN Full Size Switch */
	width: 780px;
	margin: 0 auto;
	/* /END FUll Size Switch */

	min-width: 775px;
	min-height: 100%; 
	
	background-color: white;
}

/*
 * Banner 
 */
#css_banner {
	height: 25px;
	/* background: #000066; */
}

/*
 * Top 
 */
#css_top {
	text-align: right;
	padding-top: 24px;
}

#css_top a {
	color: #858585;
	font-size: 0.95em;
	text-decoration: none;
	
	padding-left:3px;
	padding-right: 3px;
}

/*
 * Header
 */
#css_header {
	/* height: 110px; */
	/* background-color: #34721E; */
	/* background-image: url('../images/header.png');*/
}
	#css_header .css_title  {
		display: block;

		color: #FFFFFF;
		font-size: 1.9em;
	
		padding-top: 24px;
		padding-left: 35px;
	}
	
	#css_header .css_subtitle {
		display: block;
		
		color: #FFFFFF;
		font-size: 1.3em;
		
		padding-top: 2px;
		padding-left: 35px;
	}

/*
 * Content 
 */
#css_content {
	clear: both;
	width: 780px;
	margin: 0 auto;
	padding: 20px 0;
}

	#css_left { 
		float: left;
		width: 155px;	

		padding: 10px;
		margin: 0px 5px 5px 0px;
		
		/* Todo hex code */
		border-right: 1px solid rgb( 230, 230, 230 );;	
	}
	
		/* 
		 * Title 
		 * = Menu Level 1
		 */
		
		#css_left h2 {
			font-size: 1.0em;
			color: #000000;
			
			padding: 2px 2px 0px 2px;	
		}	
	
		/* 
		 * Navigation 
		 *
		 * http://de.selfhtml.org/css/layouts/navigationsleisten.htm
		 */
		
		.css_menu_title {
			font-weight:bold;
			margin-left: 8px;
		}
		
		#css_left ul {
			margin: 5px 0px 15px 8px;
		}
		#css_left ul li {
			list-style: none;	
			/* 
			background-image: url(../images/bullet.gif);
			background-position: left;
			background-repeat: no-repeat;
			*/ 
			margin-left: 2px;
			border: 1px solid #FFFFFF;
		}
		
		/* if you want to add lines */
		#css_left ul li:first-child {
		}
		
		#css_left ul li a {
			display:block;
			color: black;	
			text-decoration: none; 
			padding: 2px 2px 2px 10px;
			margin: 0px;
			
		}
		#css_left ul a:hover {
			color: red;
		}
		#css_left ul a:visited {
		}
		#css_left ul a.css_selected {
			color: red;
		}

	#css_right {
		float: right;
		/* Todo: umstellen auf % und "Shell" ! */
		width: 550px; /* = with - padding - margin - border (left/right) */

		color: #333;
		background: #FFFFFF;	
		/* border-left: 1px solid #CCCCCC; */
		/* border: 1px solid #CCCCCC; */

		padding: 10px;
		padding-left: 25px;
		padding-right: 15px;

		margin: 0px 0px 25px 0px;
	}
		/* 
		 * Info, Help, Warning/Error
		 */
		
		.css_msg_ok {
			color: #000000;
			background-color: #cbffcb;	
			border-top: 1px solid #18CB00;
			border-bottom: 1px solid #18CB00;
			
			padding: 6px;
			margin: 12px 0px 2px 0px;
		
		}
		.css_msg_error {
			color: #000000;
			background-color: #FFCBCB;
			
			border-top: 1px solid #FF0000;
			border-bottom: 1px solid #FF0000;
			
			padding: 6px;
			margin: 12px 0px 2px 0px;
		
		}		 
	
		.css_info {
			background-color: #F5F5F5;
			
			border-top: 1px solid #BBBBBB;
			border-bottom: 1px solid #BBBBBB;
			
			padding: 12px;
			margin: 12px 0px 2px 0px;
		
		}
		.css_help {
			background-color: #FFFF99;
			
			border-top: 1px solid #FFCC00;
			border-bottom: 1px solid #FFCC00;
			
			padding: 12px;
			margin: 12px 0px 2px 0px;
		
		}
		.css_warning {
			background-color: #FFCBCB;
			
			border-top: 1px solid #FF0000;
			border-bottom: 1px solid #FF0000;
			
			padding: 12px;
			margin: 12px 0px 2px 0px;
		
		}
		.css_timestamp {
			color: #6F6F6F;
			font-size: 0.9em;
		}
	
		/* 
		 * Links
		 */
		#css_right a.css_text {
			color: #0000FF;
			background: #EFEFEF;
			text-decoration: none;
			border-bottom: 1px dotted #ABABAB;
			
			background-image: url('../images/ico_link.png');
			background-repeat: no-repeat;
			background-position: left center;
		
			padding-left: 10px;
			padding-right: 2px;
		}
		#css_right p a.css_text:hover {
			color: #FF0000;
			border-bottom: 1px solid #ABABAB;
		}
		#css_right p a.css_text:visited {
			color: #0000FF;
		}
				
		/* 
		 * Bulltes Numbering
		 *
		 * http://de.selfhtml.org/css/eigenschaften/listen.htm
		 */
		#css_right ul {
			list-style-type: square; 
			list-style-image: url(../images/bullet_square.png);
			margin: 6px 0px 4px 18px;
		}
		#css_right ul ul { 
			margin: 0px 0px 4px 18px;
		}
		#css_right ul li {
			padding: 2px 0px 2px 0px;	
		}

		#css_right ol {
			margin: 18px 0px 4px 28px;
		}
		#css_right ol li {
			list-style-type: decimal;
			padding: 2px 0px 2px 0px;
		}

		
		/*
		 * TODO: check!
		 */
		
		.css_topLink {
			clear: both;
			text-align: right;
			
			margin-top: 10px;
			margin-right: 5px;
		}
		
		/*
		 * Index.php
		 * Todo: Prüfe!
		 */
		.css_contactTitle {
			color: black;
			font-weight: bold;
			padding-top: 12px;
			padding-left:15px;
		}

		.css_contactType {
			/* color: #1786B3; */
			color: #973DC4;
			font-weight: bold;
			padding-top: 10px;
			padding-left:15px;
		}

		.css_contactInformation {
			color: black;
			padding-left:15px;
		}
		
		
		/*
		 * 2 spaltiger Contents
		 * 50/50, 33/66 and 38/62 (Goldener Schnitt)
		 * http://www.yaml.de/de/dokumentation/anwendung/subtemplates.html
		 */
		
		/* Container */
		.css_column_layout { width: 100%; overflow: hidden;  line-height: 18px; margin-top: 18px; margin-bottom: 12px;}
		
		/* Spaltenlayout */
		.css_column_left_28, .css_column_left_33, .css_column_left_38, .css_column_left_50, .css_column_left_62, .css_column_left_66, .css_column_left_72 { float: left; }
		.css_column_right_28, .css_column_right_33, .css_column_right_38, .css_column_right_50, .css_column_right_62, .css_column_right_66, .css_column_right_72  { float: right; }

		.css_column_left_50, .css_column_right_50 { width: 50.0%; }
		
		.css_column_left_33, .css_column_right_33 { width: 33.3%; }
		.css_column_left_66, .css_column_right_66 { width: 66.6%; }
		
		.css_column_left_38, .css_column_right_38 { width: 38.2%; }
		.css_column_left_62, .css_column_right_62 { width: 61.8%; }
		
		.css_column_left_28, .css_column_right_28 { width: 28.0%; }
		.css_column_left_72, .css_column_right_72 { width: 72.0%; }
		
		
		/* Innerer Div für Abstände und Rahmen */
		.css_column_left { text-align:justify; padding: 0px 0px 0px 0px; margin: 0px 10px 0px 0px; }
		.css_column_left_box { text-align:justify; padding: 4px 8px 4px 8px; margin: 0px 10px 0px 0px; border: 1px solid #BBBBBB; background-color: #F5F5F5; }
		.css_column_left_line { text-align:justify; padding: 0px 14px 0px 0px; margin: 0px 0px 0px 0px; border-right: 1px solid #BBBBBB; }
		
		.css_column_right { text-align:justify; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 10px;}
		.css_column_right_box { text-align:justify; padding: 4px 8px 4px 8px; margin: 0px 0px 0px 10px; border: 1px solid #BBBBBB; background-color: #F5F5F5;}
		.css_column_right_line { text-align:justify; padding: 0px 0px 0px 14px; margin: 0px 0px 0px 0px; border-left: 1px solid #BBBBBB;}

/* 
 * Footer
 */

#css_footer {
	clear: both;
	color: #858585;
	font-size: 0.95em;
	border-top: 1px solid #CCCCCC;
	padding-top: 6px;
	margin-top: 30px;
}

#css_footer a {
	color: #858585;
	font-size: 1.0em;
	text-decoration: none;
}
 
/* 
 * Debug
 */
#css_debug {
	clear: both;
	color: green;
	border-left: 1px solid green;
	font-family: Courier;	
	font-size: 0.95em;
	padding: 5px;
	margin-top: 10px;
}

/*
 * General
 */

/* todo
 * wird das benutzt?
 */
.css_left {
	text-align: left;
	padding-top: 12px;
	padding-bottom: 12px;
} 
.css_right {
	text-align: right;
	padding-top: 12px;
	padding-bottom: 12px;	
}
.css_center {
	text-align: center;
	padding-top: 12px;
	padding-bottom: 12px;	
}

.css_col_left_50 {
	width: 50%;
	float: left;
	padding-right: 10px;
}
.css_col_right_50 {
	width: 50%;
	float: right;
}

.css_italic {
	font-style: italic;
}

.css_bold {
	font-weight: bold;
}
.css_textmarker_green {
	background-color: #81fc81;
	padding-left: 2px;
	padding-right: 2px;
}
.css_textmarker_yellow {
	background-color: #fbfc81;
	padding-left: 2px;
	padding-right: 2px;
}


/* Website specifics */

.css_titel { font-weight: bold; padding-top: 10px; }
.css_subtitel { font-style: italic;}
.css_format { padding-top: 15px;}
.css_technik { }
.css_preis { padding-top: 15px; padding-bottom: 10px}
.css_kommentar { }