﻿/**
 * style.css 
 *
 * Cascading Style Sheets file with styles for screen design and content.
 * 
 * LICENSE: GNU General Public License Version 2
 *
 * @author		   Daniel Fuhrmannek (danfuh.de)
 * @copyright	   Daniel Fuhrmannek (c) October, 2009
 * @license		   URL to license used (http://www.gnu.org/licenses/gpl-2.0.html)
 * @license_terms  Only to be used as a design of dupp GmbH. 
 *                 Delivery or adjustment to customers are not allowed.
 * @version		   1.0
 * @platform	   Website Baker 2.8.x
*/

/***************************************************************
************************* Screen CSS ***************************
****************************************************************

/*****************************************
* EN: START  - general formatting        *
* DE: ANFANG - allgemeine Formatierungen *
******************************************/
body {
	color: #323232;
	font-size:80%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin:0px;
	padding:0px;
	background: #8c8c8c url(../images/bg.jpg) no-repeat center top;
}

	/*************************
	* EN: START  - forms     *
	* DE: ANFANG - Formulare *
	**************************/
	#content_inner input, #content_inner textarea, #content_inner select {
		background: #ffffff url(../images/input-shadow.jpg) no-repeat -5px -5px;
		border: 1px solid #aaaaaa;
	}
	#content_inner textarea, #content_inner select {
		width: 590px;
	}
	#content_inner select {
		width: 592px;
	}
	#content_inner input:focus, #content_inner textarea:focus, #content_inner select:focus  {
		border: 1px solid #cc0000;
	}
	#content_inner input[type=text] {
		height: 20px;
		width: 486px;
		padding: 3px 0 0 4px;
	}
	#content_inner input[type=submit], #content_inner input[type=reset] {
		background: #484848 url(../images/button-bg.jpg) repeat-x;
		height: 22px;
		color: #ffffff;
		padding-bottom: 2px;
		border: 1px solid #aaaaaa;
	}
	#content_inner input[type=submit]:hover, #content_inner input[type=reset]:hover {
		color: #000000;
		background-position: 0 -22px;
		border: 1px solid #484848;
	}
	#content_inner input[type=radio], #content_inner input[type=checkbox] {
		border: 0px;
		background-image: none;
	}

	#content_inner td.field_title {
		width: 150px;
	}
	/***********************
	* EN: END  - forms     *
	* DE: ENDE - Formulare *
	***********************/

/***************************************
* EN: END  - general formatting        *
* DE: ENDE - allgemeine Formatierungen *
***************************************/

/*************************************************
* EN: START  - design specific formating         *
* DE: ANFANG - Design-spezifische Formatierungen *
*************************************************/

/* EN: div outer - DE: äußeres div */
#all_outer {
	width: 1000px;
	margin: 0 auto;
	padding:0px;
	clear: both;
}

	/* EN: div inner over all - DE: inneres div alles umschließendumschließend */
	#all_inner {
		width: 1000px;
		margin: 0 auto;
		padding:0px;
	}
	
	/* EN: header - DE: Kopfzeile */
	#header {
		height: 122px;
		background: #dddddd url(../images/header.jpg) no-repeat;
	}
/* Logo */
		#logo {float: left; width: auto; margin-top: 1px; margin-left: 10px;}



/* EN: header text - DE: Text in der Kopfzeile */
		#header_text {
			float: left;
			height: 54px;
			width: 744px;
			font-size: 1.3em;
			padding: 8px;
			margin-top: 40px;
			text-align: center;
		}

	/**************************************
	* EN: START  - horizontal main menu   *
	* DE: ANFANG - horizontales Hauptmenü *
	***************************************/
	#menu {
		background: #666666 url(../images/menu-bar.jpg) repeat-x;
		height: 28px;
	}
	#menu span a {
		display: block;
		background: #666666 url(../images/menu.jpg) no-repeat 100% 0px;
		height: 28px;
		line-height: 25px;
		font-size: 1.0em;
		font-weight: bold;
		color: #ffffff;
		text-decoration: none;
		float: left;
		padding: 0 8px 0 8px;
		border-right: 2px solid #323232;
		width: auto;
	}
	#menu span a:hover {
		background-position: 100% -28px;
		background-color: #cc0000;
		color: #FFFFFF;
	}
	#menu span.menu-current a, #menu span.menu-parent a {
		background-position: 100% -28px;
		color: #FFFFFF;
	}
	#menu span.menu-current a:hover, #menu span.menu-parent a:hover {
		background-position: 100% -28px;
		text-decoration: underline;
	}
	/**************************************
	* EN: START  - horizontal main menu   *
	* DE: ANFANG - horizontales Hauptmenü *
	***************************************/
	
	/* EN: shadow under horizontal main menu - DE: Schatten unter dem horizontalen Hauptmenü */
	#shadow_top {
		height: 10px;
		/*float: left;*/
		width: 100%;
	
	}
	#shadow_top_content {
		background: #cc0000 url(../images/shadow-top-content.jpg) repeat-x bottom;
		width: 780px;
		height: 10px;
		float: left;
	}
	#shadow_top_menu {
		background: #cc0000 url(../images/shadow-top-menu.jpg) repeat-x bottom;
		width: 220px;
		height: 10px;
		float: left;
	}

	/* EN: middle part of the design - DE: mittlerer Teil des Designs */
	#main {
		background: #ffffff url(../images/main-bg.jpg) repeat-y;
		float: left;
		width: auto;
	}
	
		/* EN: main content outer - DE: Hauptinhalt aussen */
		#content {
			background-color: #ffffff;
			width: 780px;
			float: right;
			min-height: 400px;
		}

			/* EN: main content inner - DE: Hauptinhalt innen */
			#content_inner {
				margin: 0 8px 8px 10px;
				overflow: auto;
			}
			/* IE6 Hack */
			* html #content_inner {
				width: 760px;
			}
				
				/**********************************************
				* EN: START  - Formatting in the main content *
				* DE: ANFANG - Formatierungen im Hauptinhalt  *
				**********************************************/
							
				/* EN: headings - DE: Überschriften */
				#content_inner h1 {
					font-size: 2.0em;
					margin: 8px 0 5px 0;
				}
				#content_inner h2 {
					font-size: 1.7em;
					margin: 6px 0 4px 0;
				}
				#content_inner h3 {
					font-size: 1.5em;
					margin: 5px 0 3px 0;
				}
				#content_inner h4 {
					font-size: 1.3em;
					margin: 4px 0 2px 0;
				}
				#content_inner h5 {
					font-size: 1.1em;
					margin: 3px 0 1px 0;
				}
				#content_inner h6 {
					font-size: 0.9em;
					margin: 2px 0 0 0;
				}
				#content_inner p {
					margin: 6px 0 6px 0;
				}

				/* EN: quotations - DE: Zitate */
				#content_inner blockquote, #content_inner cite {
					margin: 6px 2px 6px 40px;
					padding-left: 5px;
					display: inline-block;
					border-left: 5px solid #cc0000;
				}
				/* EN: pre - DE: pre */
				#content_inner pre {
					/*position: relative;
					left: 0px;*/
					overflow: auto;
				}
				/* IE6 Hack */
				* html #content_inner pre  {
					overflow: scroll;
				}

				/* EN: code - DE: Code */
				#content_inner code {
					font-family: "Times New Roman", Times, serif;
					font-size: 1.1em;
					display: block;
					border: 1px solid #cc0000;
					background-color: #efefef;
					padding: 5px;
					margin: 4px 0 4px 0;
				}

				/* EN: person - DE: Personen */
				#content_inner person {
					font-style: italic;
					font-weight: bold;
				}

				/* EN: address - DE: Adresse */
				#content_inner address {
					border: 1px solid #bbbbbb;
					background-color: #ffe3e3;
					width: auto;
					margin: 4px;
					padding: 5px;
					font-style: italic;
				}

				/* EN: horizontal line - DE: horizontale Linie */
				#content_inner hr {
					border: 1px dashed #cc0000;
				}

				/* EN: links - DE: Links */
				#content_inner a {
					color: #850000;
					font-weight: bold;
					text-decoration: none;
					font-size: 1.0em;
				}
				#content_inner a:hover {
					text-decoration: underline;
					color: #cc1000;
				}
				
				/* EN: images - DE: Bilder */
				#content_inner img {
					border: 1px solid #bbbbbb;
					padding: 8px;
					background-color: #eeeeee;
					margin: 2px;
					max-width: 740px;
				}
				/* EN: linked images - DE: verlinkte Bilder */
				#content_inner a img {
					border: 1px solid #850000;
				}
				#content_inner a:hover img {
					border: 1px solid #cc0000;
					background-color: #ffe3e3;
				}
				
				/* EN: breadcrumb navigation - DE: Brotkrumenavigation */
				#breadcrumb {
					font-size: 0.8em;
				}
				#breadcrumb img {
					padding: 0px;
					margin: 0px;
					border: 0px solid;
				}
				/********************************************
				* EN: END  - Formatting in the main content *
				* DE: ENDE - Formatierungen im Hauptinhalt  *
				********************************************/

			/* EN: footer - DE: Fußzeile */
			#content_footer {
				text-align: center;
				height: 100%;
				padding-top: 20px;
			}

		/****************************
		* EN: START  - sidebar      *
		* DE: ANFANG - Seitenleiste *
		****************************/
		#sidebar {
			background-color: #d7d7d7;
			width: 220px;
			/*float: left;*/
			float: left;
			/*height: 100%;*/
		}
		
			/* EN: sidebar headings - DE: Überschriften in der Seitenleiste */
			#sidebar h3 {
				padding: 0px;
				margin: 0px;
				font-size: 1.2em;
				color: #555555;
				margin-bottom: 2px;
			}
			
			/* EN: line under sidebar sections - DE: Linie unter den Seitenleisten-Abschnitten */
			#sidebar_search, #sidebar_menu, #menuside_login {
				border-bottom: 1px solid #484848;
				padding-bottom: 5px;
			}
				
			/* EN: START search - DE: ANFANG Suche */	
			#sidebar_search {
				float: left;
				margin: 8px;
				width: 205px;
			}
			/* IE6 Hack */
			* html #sidebar_search {
				margin: 4px;
				width: 200px;
			}
			#sidebar_search div.search {
				border: 1px solid #484848;
				width: 203px;
				background-color: #ffffff;
				padding: 0px;
				height: 24px;
			}
			/* IE6 Hack */
			* html #sidebar_search div.search {
				width: 200px;
			}
			#sidebar_search_form {
				border: 1px solid #ffffff;
				width: 165px;
				z-index: 1;
			}
			/* IE6 Hack */
			* html #sidebar_search_form {
				width: 160px;
			}
			#sidebar_search_submit {
				border: 0px;
				background: #ffffff url(../images/search-button.jpg) no-repeat;
				width: 22px;
				height: 22px;
				position: relative;
				left: 8px;
				top: 1px;
				z-index: 2;
			}
			#sidebar_search_submit:hover {
				background-position: 0 -22px;
			}
			/* EN: END search - DE: ENDE Suche */	

			/* EN: START login - DE: ANFANG Login */
			#menuside_login {
				margin: 8px;
			}		
			#menuside_login a {
				color: #850000;
				font-weight: bold;
				text-decoration: none;
				font-size: 0.9em;
			}
			#menuside_login a:hover {
				text-decoration: underline;
			}
			#sidebar_login_name, #sidebar_login_pass {
				border: 1px solid #484848;
				width: 200px;
			}

			#sidebar_login_name:focus, #sidebar_login_pass:focus {
				border: 1px solid #cc0000;
			}
			#sidebar_login_submit {
				background: #676767 url(../images/button-bg.jpg) repeat-x 0 -22px;
				height: 22px;
				padding-bottom: 2px;
				border: 1px solid #aaaaaa;
				color: #000000;
				border: 1px solid #484848;
				margin-bottom: 5px;
				margin-top: 6px;
			}
			#sidebar_login_submit:hover {
				color: #ffffef;
				background-position: 0 0;
				border: 1px solid #cc0000;
			}
			/* EN: END login - DE: ENDE Login */	

			/******************************************************************
			* EN: START  - Submenu items of the main menu in the sidebar      *
			* DE: ANFANG - Untermenüpunkte des Hauptmenüs in der Seitenleiste *
			******************************************************************/
			#sidebar_menu {
				margin: 8px;	
			}
			/* IE6 Hack */
			* html #sidebar_menu {
				margin-left: 8px;	
			}
			#sidebar_menu ul {
				list-style: none;
				padding: 0px;
				margin: 0px;
			}
			/* Menu level 10 */
			#sidebar_menu ul ul ul ul ul ul ul ul ul a {
				width: 153px;
				margin-left: 40px;
				background-position: -48px 0px;
			}
			/* IE6 Hack */
			* html #sidebar_menu ul ul ul ul ul ul ul ul ul a {
				width: 150px;
			}
			/* Menu level 9 */
			#sidebar_menu ul ul ul ul ul ul ul ul a {
				width: 158px;
				margin-left: 35px;
				background-position: -43px 0px;
			}
			/* IE6 Hack */
			* html #sidebar_menu ul ul ul ul ul ul ul ul a {
				width: 155px;
			}
			/* Menu level 8 */
			#sidebar_menu ul ul ul ul ul ul ul a {
				width: 163px;
				margin-left: 30px;
				background-position: -38px 0px;
			}
			/* IE6 Hack */
			* html #sidebar_menu ul ul ul ul ul ul ul a {
				width: 160px;
			}
			/* Menu level 7 */
			#sidebar_menu ul ul ul ul ul ul a {
				width: 168px;
				margin-left: 25px;
				background-position: -33px 0px;
			}
			/* IE6 Hack */
			* html #sidebar_menu ul ul ul ul ul ul a {
				width: 165px;
			}
			/* Menu level 6 */
			#sidebar_menu ul ul ul ul ul a {
				width: 173px;
				margin-left: 20px;
				background-position: -28px 0px;
			}
			/* IE6 Hack */
			* html #sidebar_menu ul ul ul ul ul a {
				width: 170px;
			}
			/* Menu level 5 */
			#sidebar_menu ul ul ul ul a {
				width: 178px;
				margin-left: 15px;
				font-size: 0.8em;
				background-position: -23px 0px;
			}
			/* IE6 Hack */
			* html #sidebar_menu ul ul ul ul a {
				width: 175px;
			}
			/* Menu level 4 */
			#sidebar_menu ul ul ul a {
				width: 183px;
				margin-left: 10px;
				font-size: 0.9em;
				background-position: -18px 0px;
			}
			/* IE6 Hack */
			* html #sidebar_menu ul ul ul a {
				width: 180px;
			}
			/* Menu level 3 */
			#sidebar_menu ul ul a {
				width: 188px;
				margin-left: 5px;
				font-size: 1.0em;
				background-position: -13px 0px;
			}
			/* IE6 Hack */
			* html #sidebar_menu ul ul a {
				width: 185px;
			}
			/* Menu level 2 */
			#sidebar_menu ul a {
				display: block;
				color: #000000;
				font-size: 1.1em;
				text-decoration: none;
				background: #666666 url(../images/sidebar-menu.jpg) repeat-y  -8px 0px;
				height: auto;
				width: 193px;
				padding: 3px 3px 3px 6px;
				margin-bottom: 2px;
				margin-top: 2px;
				border-left: 4px solid #484848;
			}
			/* IE6 Hack */
			* html #sidebar_menu ul a {
				width: 190px;
			}
			#sidebar_menu ul a:hover,
			#sidebar_menu ul li.menu-current a, 
			#sidebar_menu ul li.menu-current ul li a:hover {
				color: #484848;
				background-position: 100% -210px;
				background-color: #cccccc;
				border-left: 4px solid #cc0000;
			}
			#sidebar_menu ul li.menu-current ul li a {
				color: #000000;
				background-position: -8px 0px;
				background-color: #666666;
				border-left: 4px solid #484848;
			}


			/****************************************************************
			* EN: END  - Submenu items of the main menu in the sidebar      *
			* DE: ENDE - Untermenüpunkte des Hauptmenüs in der Seitenleiste *
			****************************************************************/

			/* EN: print icon - DE: Druck Icon */
			#sidebar #sidebar_print {
				margin: 8px;
				text-align: right;
			}
			#sidebar  #sidebar_print a#print_page img {
				border: 0px;
				border-bottom: 2px solid #d7d7d7;
			}
			#sidebar  #sidebar_print a#print_page:hover img {
				border-bottom: 2px solid #cc0000;
			}

			/* EN: w3c logos - DE: w3c Logos */
			#sidebar #w3logos {
				margin: 30px 8px 8px 8px;
				text-align: center;
			}
			#sidebar #w3logos a img {
				border: 1px solid #d7d7d7;
				width:88px;
				height:31px;
				padding: 6px 2px 6px 6px;
			}
			#sidebar #w3logos a:hover img {
				border: 1px solid #cc0000;
				background-color: #ffffff;
			}
			/******************************************************************
			* EN: START  - Submenu items of the main menu in the sidebar      *
			* DE: ANFANG - Untermenüpunkte des Hauptmenüs in der Seitenleiste *
			******************************************************************/

		/**************************
		* EN: END  - sidebar      *
		* DE: ENDE - Seitenleiste *
		**************************/
		
	/* EN: shadow at the bottom of the main content and the sidebar 
       DE: Schatten unten am Hauptinhalt und der Seitenleiste */
	#shadow_bottom {
		height: 10px;
		float: left;
		width: 100%;
	}
	#shadow_bottom_content {
		background: #cc0000 url(../images/shadow-bottom-content.jpg) repeat-x top;
		width: 780px;
		height: 10px;
		float: left;
	}
	#shadow_bottom_menu {
		background: #cc0000 url(../images/shadow-bottom-menu.jpg) repeat-x top;
		width: 220px;
		height: 10px;
		float: left;
	}

	/*******************************************************
	* EN: START  - Footer-line at the bottom of the design *
	* DE: ANFANG - Fußleiste am unteren Rand des Designs   *
	*******************************************************/
	#bottom {
		background-color: #484848;
		height: 18px;
		float: left;
		width: auto;
	}
	
	/* EN: START footer menu - DE: ANFANG Fusszeilenmenue */
	#footermenu {
		width: 840px;
		float: left;
		font-size: 0.8em;
		font-size: 0.8em;
		text-align: center;
		color: #bbbbbb;
		padding-top: 2px;
		text-indent: 120px;
	}
	#footermenu a {
		color: #ffffef;
		text-decoration: none;
			margin: 0 3px 0 3px;
	}
	#footermenu a:hover {
		color: #ffffef;
		text-decoration: underline;
	}
	/* EN: END footer menu - DE: ENDE Fusszeilenmenue */

	#toplink {
		width: 160px;
		float: left;
		font-size: 0.8em;
		text-align: right;
		padding-top: 2px;
	}
	#toplink a {
		color: #ffffef;
		margin-right: 8px;
		text-decoration: underline;
	}
	#toplink a:hover {
		color: #ffffef;
		text-decoration: none;
	}
	/*****************************************************
	* EN: END  - Footer-line at the bottom of the design *
	* DE: ENDE - Fußleiste am unteren Rand des Designs   *
	*****************************************************/

/* Unterhalb des Designs Autor text und Links */
		#licenselink {text-align: center; font-size: 0.8em; color: #444444; padding: 5px; float: left; width: 960px;}
		#licenselink a {color: #444444; text-decoration: underline;}
		#licenselink a:hover {color: #444444; text-decoration: none;}
		
		
	/********************************************************
	* EN: END  - Below the designs (autor text and links)   *
	* DE: ENDE - Unterhalb des Designs Autor text und Links *
	********************************************************/

	/***********************
	* EN: START  - Blocks  *
	* DE: ANFANG - Blöcke  *
	************************/
	#block2output, #block3output {
		border: 1px solid #cc0000;
		background-color: #efefef;
		padding: 5px;
		margin: 5px 0 5px 0;
	}
	#block4output {
		text-align: center;
		color: #ffffef;
	}
	#block4output a {
		color: #feb200;
		text-decoration: none;
		font-weight: bold;
	}
	#block4output a:hover {
		text-decoration: underline;
	}
	#block5output, #block6output, #block7output, #block8output {
		margin: 8px;
	}
	#block5output, #block6output, #block8output {
		border-bottom: 1px solid #484848;
		padding-bottom: 5px;
	}
	/*********************
	* EN: END  - Blocks  *
	* DE: ENDE - Blöcke  *
	**********************/
	
/************************************************
* EN: END  - design specific formating          *
* DE: ENDE - Design-spezifischen Formatierungen *
************************************************/

/************************************************
* EN: START  - exemple of a styled table        *
* DE: ANFANG - Muster einer gestalteten Tabelle *
************************************************/
#content_inner table.styled {
	border-collapse: collapse;
}
#content_inner table.styled caption {
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 2px;
}
#content_inner table.styled thead th {
	border: 1px solid #333333;
	padding: 4px;
	background-color: #cc0000;
}
#content_inner table.styled tbody td {
	border: 1px solid #333333;
	background-color: #ffe3e3;
	padding: 4px;
}
#content_inner table.styled tfoot td {
	background-color: #eeeeee;
	padding: 4px;
}
/**********************************************
* EN: END  - exemple of a styled table        *
* DE: ENDE - Muster einer gestalteten Tabelle *
**********************************************/

/********************************************
* EN: START  - exemple of a styled box      *
* DE: ANFANG - Muster einer gestalteten Box *
*********************************************/
#content_inner .styled_box {
	border: 1px solid #cc0000;
	background-color: #efefef;
	padding: 5px;
	margin: 5px 0 5px 0;
}
/******************************************
* EN: END  - exemple of a styled box      *
* DE: ENDE - Muster einer gestalteten Box *
******************************************/

