/*****************************************************/
/*   Design:  zenrace gmbh                           */
/*            Stylesheet for screen rendering        */
/*---------------------------------------------------*/
/*   Author:  AS				                     */
/*   Email:   contact@zenrace.com                    */
/*   Date:    20061018                               */
/*****************************************************/

/*-----------------------------------------------------------------------*/
/* REMARK: FONT-SIZE DEFINITIONS                                         */
/*-----------------------------------------------------------------------*/
/* Relative font-sizes in "em" are used where necessary. To make the     */
/* "em"-units normed, the incoming font sizes are set to 1.0 em. The     */
/* font-size variations throughout the webpage are then expressed in     */
/* percentage values respective to the incoming font-size. To make       */
/* calculations easier, the font definition in "body" is such that       */
/* 1.0em = 10px. This makes life a real breeze!                          */
/*-----------------------------------------------------------------------*/

/*************************/
/* SECTION 1 - MAIN BODY */
/*************************/

/*-------------------------------*/
/* USED COLORS					 */
/*-------------------------------*/
/* MAIN RED						 */
/*-------------------------------*/
/* dark red		#990066			 */
/* medium red	#CC0099			 */
/* medium red	#FF33CC			 */
/* bright red	#FF66CC          */
/*-------------------------------*/
/* Additional red				 */
/* red 100%	#990066         	 */
/* red 90%	#A31A76         	 */
/* red 80% 	#AD3385         	 */
/* red 70% 	#B84D94         	 */
/* red 60% 	#C266A3         	 */
/* red 50% 	#CC7FB2         	 */
/* red 40% 	#D699C2         	 */
/* red 30% 	#E0B2D1         	 */
/* red 20% 	#EBCCE0         	 */
/* red 10% 	#F5E5EF         	 */
/*--------------------------------------------------*/
/* MAIN GREY				                        */
/*--------------------------------------------------*/
/* grey 100%	#000000, rgb(00,00,00)          	*/
/* grey 90%		#191919, rgb(19,19,19)          	*/
/* grey 80% 	#333333, rgb(51,51,51)          	*/
/* grey 70% 	#4C4C4C, rgb(76,76,76)          	*/
/* grey 60% 	#666666, rgb(102,102,102)          	*/
/* grey 50% 	(08)	#7F7F7F, rgb(127,127,127)   */
/* grey 40% 	(07)	#999999, rgb(178,178,178)   */
/* grey 30% 	(06)	#B2B2B2, rgb(178,178,178)   */
/* grey 20% 	(04)	#CCCCCC, rgb(204,204,204)   */
/* grey 10% 	(02)	#E5E5E5, rgb(229,229,229)   */
/* grey 5%		(01)	#F2F2F2, rgb(242,242,242)   */
/*--------------------------------------------------*/


/*-------------------------------*/
/* Section 1.1 - Page definition */
/*-------------------------------*/

body {
	font-size: 62.5%;
	margin: 0em auto;
	padding: 0em;
	font-family: "trebuchet ms", verdana, arial, sans-serif;
	background: url(../media/bg.gif) top left repeat-x;
	background-color: #333333;
}

#page-container {
	width: 900px;
	margin: 0px auto;
	padding: 0px;
	border-left: solid 1px #990066;
	border-right: solid 1px #990066;
	background-color: #D699C2;	/* Navigation Background */
}

/**********************/
/* SECTION 2 - HEADER */
/**********************/

.logo  {
	clear: both;
	float: left; 
	position: absolute; 
	z-index: 2;
	width: 107px;
	height: 72px;
	top: 25px;
	margin: 0px;
	padding-left: 35px;
	background-color: transparent;
}

.img-header {
	clear: both; float: left; width: 900px; height: 120px; margin: 0px; padding: 0px;
}

/* HEADER PRINT*/

.headerprint{
	width: auto;	/* NEW FOR PRINT */
	height: 100px;
	margin: 0px;
	padding: 0px;
	border-bottom: 1px solid #6F79BC;
	display: none; /* FOR PRINT */
}

.adressprint{
	float: left;
	margin: 10px 0px 10px 10px;
	text-align: left;
	display: none; /* FOR PRINT */
}

.logoprint{
	float: right;
	margin: 10px 10px 10px 0px;
	text-align: right;
	display: none; /* FOR PRINT */
}

/*------------------------------------*/
/* Section 2.1 - Top navigation menu */
/*------------------------------------*/

/* * * * * * * * * * * * * * * * * * *  START TOP NAVIGATION * * * * * * * * * * * * * * * * * * */

#topnav-container {
	clear: both;
	width: 900px;
	height: 26px;
	border-top: solid 1px #FFFFFF;
	border-bottom: solid 1px #FFFFFF;
	background-color: #990066;
	}
	
.topnav-left {
	float: left;
	width: 730px;
    margin: 0px;
	padding: 4px 0 4px 0;
}

.topnav-left ul {	
	list-style: none; margin: 0px; padding: 0px; font-weight: bold;
}	

.topnav-left li {
	float: left; display: block; white-space: nowrap; background-color: inherit;
}

.topnav-left a.topnavinactive {
	color: #FFFFFF;
	margin: 0px; 
	padding: 0px 10px 0px 10px;
	border-left: solid 1px #990066;
	border-right: solid 1px #FFFFFF;
	text-decoration: none;
	font-size: 130%;
	background-color: transparent;
}

.topnav-left a.topnavinactive:hover {
	color: #990066;
	margin: 0px; 
	padding: 0px 10px 0px 10px;
	border-left: solid 1px #EBCCE0;	/* wie bg-color für IE */
	border-right: solid 1px #FFFFFF;
	text-decoration: none;
	font-size: 130%;
	background-color: #EBCCE0;
}

.topnav-left a.topnavactive, .topnav-left a.topnavactive:hover {
	color: #990066;
	margin: 0px; 
	padding: 0px 10px 0px 10px;
	border-left: solid 1px #FFFFFF;	/* wie bg-color für IE */
	border-right: solid 1px #FFFFFF;
	text-decoration: none;
	font-size: 130%;
	background-color: #FFFFFF;
}

.topnav-right {
	float: right;
	width: 170px;
    margin: 0px;
	padding: 4px 0 4px 0;
}

.topnav-right ul {	
	list-style: none;
	margin: 0px;
	padding: 0px;
	font-weight: bold;
}	

.topnav-right li {
	float: left;
	display: block;
	white-space: nowrap;
	background-color: inherit;
}

.topnav-right a.topnavinactive {
	color: #FFFFFF;
	margin: 0px; 
	padding: 0px 10px 0px 10px;
	border-left: solid 1px #FFFFFF;
	border-right: solid 1px #990066;
	text-decoration: none;
	font-size: 130%;
	background-color: transparent;
}

.topnav-right a.topnavinactive:hover {
	color: #990066;
	margin: 0px; 
	padding: 0px 10px 0px 10px;
	border-left: solid 1px #FFFFFF;
	border-right: solid 1px #EBCCE0;	/* wie bg-color für IE */
	text-decoration: none;
	font-size: 130%;
	background-color: #EBCCE0;
}

.topnav-right a.topnavactive, .topnav-right a.topnavactive:hover {
	color: #990066;
	margin: 0px; 
	padding: 0px 10px 0px 10px;
	border-left: solid 1px #FFFFFF;
	border-right: solid 1px #FFFFFF;	/* wie bg-color für IE */
	text-decoration: none;
	font-size: 130%;
	background-color: #FFFFFF;
}

/* * * * * * * * * * * * * * * * * * * END TOP NAVIGATION * * * * * * * * * * * * * * * * * * */


/******************************/
/* SECTION 3 - MAIN-NAVIGATION */
/******************************/

/*--------------------*/
/* Section 3.1 - Size */
/*--------------------*/

.nav-sub {
	clear: both;
	min-height: 400px;
	float: left;
	width: 180px;
	margin: 0px;
	padding: 0px;
	color: rgb(110,110,110);
}

/* IE6-hack for min-height. Also works for IE7-Beta2 */
* html .nav-sub {
	height: 400px;
} 
/* End IE-Hack */

/*--------------------*/
/* Section 4.2 - Menu */
/*--------------------*/

/* * * * * * * * * * * * * * * * * * *  START MAIN NAVIGATION * * * * * * * * * * * * * * * * * * */

#nav {
	font-size: 10pt;
	font-weight: bolder;
	letter-spacing: 1pt;
	line-height: 14pt;
	float: left;
	text-align: left;
	font-weight: bold;
	width: 180px;
	margin: 0px 0px 0px 0px;
	padding: 40px 0px 0px 0px;
}

#nav a, nav a.activelevel_0, nav a.inactivelevel_0, nav a:hover, nav a.activelevel_0, nav a:hover.inactivelevel_0, nav a.activelevel_1, nav a.inactivelevel_1, nav a:hover, nav a.activelevel_1, nav a:hover.inactivelevel_1 {
	display: block;
	padding: 5px 0px 5px 30px;
	margin: 0px 0px 0px 0px;
	text-decoration: none;
}

#nav a.activelevel_0 {
	color: #990066;
	background-color: #FFFFFF;
}

#nav a.inactivelevel_0 {
	color: #FFFFFF;
}

#nav a:hover.activelevel_0 {
	/* color: #3C409B; */
	/* border-left: 10px solid #FFFFFF; */
	/* background-color: #DADAEB; */
	color: #990066;
	background-color: #FFFFFF;
}

#nav a:hover.inactivelevel_0 {
	color: #990066;
	background-color: #FFFFFF;
}

/* * * * * * * * * * * * * * * * * * * * * * 2te Stufe*/

#nav a.activelevel_1 {
	color: #990066;
	background-color: #F5E5EF;
}

#nav a.inactivelevel_1 {
	color: #990066;
	background-color: #EBCCE0;
}

#nav a:hover.activelevel_1 {
	color: #990066;
	background-color: #F5E5EF;
}

#nav a:hover.inactivelevel_1 {
	color: #FFFFFF;
	background-color: #990066;
}

/* * * * * * * * * * * * * * * * * * * END MAIN NAVIGATION * * * * * * * * * * * * * * * * * * */

.container-content-sidebar {
   float: left;
	 width: 720px;	/* Breite */
	 min-height: 400px;
	 margin: 0px;
	 padding: 0px 0px 20px 0px;
	 background-color: #FFFFFF;
}

/* IE6-hack for min-height. Also works for IE7-Beta2 */
* html .container-content-sidebar {
	height: 400px;
} 
/* End IE-Hack */

/* Put a buffer between sub-navigation column and      */
/* main-navigation so that the global page background  */
/* color does not come through in this place           */

.buffer {
 	float: left; width: 160px; height: 20px; margin: 0px; padding: 0px; background-color: transparent;	
}

/***********************/
/* SECTION 4 - CONTENT */
/***********************/

/*--------------------*/
/* Section 4.1 - Size */
/*--------------------*/

.content {
	float: left;
	width: 620px; /* Breite */
	margin: 0px;	 
	padding: 30px 50px 0px 50px;
	/* background-color: yellow;	*/
}

/* Heading */

h1 {
	clear: left;
	margin: 1.0em 0px 1.0em 0px;
	font-weight: bold;
	font-size: 150%;
	color: rgb(51,51,51);
}

h2 {
	clear: left;
	margin: 2em 0px 1.0em 0px;
	font-weight: bold;
	font-size: 140%;
	color: rgb(89,89,89);
}

h3 {
	clear: left;
	margin: 2em 0px 0.6em 0px;
	font-weight: bold;
	font-size: 130%;
	color: rgb(102,102,102);
}

h4 {
	clear: left; margin: 0.5em 0px 0.5em 0px; font-weight: bold; font-style: italic; font-size: 130%;
}

.note {
	color: rgb(191,191,191);
	font-size: 8pt;
	font-weight: lighter;
}

.comment {
	font-size: 10pt;
	font-weight: lighter;
}

.important {
	font-size: 10pt;
	font-weight: bolder;
}

.listprice {
	font-size: 10pt;
	font-weight: bolder;
	color: #000000;
}

.italic {
	font-style: italic;
}

/* Unordered list */

.content ul {
	width:95%;
	margin: 0px;
	padding: 0px 0px 10px 20px;
	list-style-type: square;
	list-style-position: outside;
	font-size: 130%;
}

.content li {
	text-indent: 0px;
	margin: 0px;
	padding: 0px 0px 10px 0px;
}

/* Ordered List */
.content ol {
	margin: 0px 0px 0px 10px;
	padding: 0px 0px 10px 0px;
	list-style-type: decimal;
	list-style-position: inside;
	font-size: 130%;
}

.tworow {
	float: left;
	width: 620px;
	margin: 0px;
	padding: 0px;
}

.leftrow {
	clear: both;
	font-weight: bold;
	font-size: 130%;
	float: left;
	text-align: right;
	width: 250px;
	margin: 0px 0px 10px 0px;
	padding: 0px 10px 0px  0px;
}

.rightrow {
	font-weight: normal;
	font-size: 130%;
	float: right;
	text-align: left;
	width: 349px;
	border-left: 1px solid #CCCCCC;
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 0px  10px;
}

/* formular */

.formlinewrapper {
	clear: both;
	width: 400px;
	height: 25px;
	font-size: 10pt;
}

.formlinename {
	float: left;
	width: 100px;
	height: 20px;
	padding: 5px 0px 0px 0px;
	color: #333333;
}

.formlineinput {
	float: right;
	width: 300px;
	height: 25px;
}

.formlineinputfield {
	width: 200px;
	color: #990066;
}

.formlinemessage {
	float: left;
	width: 300px;
	width: 200px;
	color: #990066;
}

.formlinemessagefield {
	color: #990066;
}

/*----------------------*/
/* Section 4.2 - Images */
/*----------------------*/

/* No border */
.img-left-border {
	float: left; margin: 0.3em 7px 3px 0px; border: solid 1px rgb(150,150,150)
}

.img-right-border {
	float: right; margin: 0.3em 0px 3px 7px; border: solid 1px rgb(150,150,150)
}

/* Border */
.img-left-border {
	float: left; margin: 0.3em 7px 3px 0px; border: solid 1px rgb(150,150,150);
}

.img-right-border {
	float: right; margin: 0.3em 0px 3px 7px; border: solid 1px rgb(150,150,150);	
}

.image {
	clear: both;
	border: 1px solid #666666;
}

.centerpos {
	clear: both;
	text-align:center
}

.box {
	margin: 0px 0px 20px 0px;
	padding: 10px;
}

.border-red {
	border: 1px solid #990066;
}

.border-grey {
	border: 1px solid #999999;
}

/**********************/
/* SECTION 5 - FOOTER */
/**********************/


.footer {
	color:	#666666;
	font-size: 8pt;
	clear: both;
	width: 900px;
	margin: 0em 0px 0px 0px;
	padding: 5px 0px 5px 0px; 
	border-top: solid 1px #990066;
	border-bottom: solid 1px #990066;
	background-color: rgb(255,255,255);
	text-align: center;	
}

.copyright {
	font-size: 8pt;
	letter-spacing: 1pt;
	margin-left: auto;
	margin-right: auto;
	width: 900px;
	padding: 5px 0px 5px 0px;
	background-color: transparent;
	text-align: center;
}

/***************************************************/
/* SECTION 6 - HYPERLINKS FOR NON-NAVIGATION TEXTS */
/***************************************************/

.content a:visited.spezial {
	color: #990066;
	text-decoration: underline;
}

.content a.spezial {
	color: #990066;
	text-decoration: underline;
}

.content a:hover.spezial {
	color: #990066;
	text-decoration: none;
}

.content a:visited.usual {
	color: rgb(76,76,76);
	text-decoration: underline;
}

.content a.usual {
	color: rgb(76,76,76);
	text-decoration: underline;
}

.content a:hover.usual  {
	color: rgb(76,76,76);
	text-decoration: none;
}

.footer a {
	color: rgb(150,150,150); text-decoration: underline;
}

.footer a:hover {
	color: #990066; text-decoration: none;
}

.copyright a:visited {
	color: #666666; 
	text-decoration: underline;
}

.copyright a {
	width: 900px;
	display: block;
	color: #666666; 
	text-decoration: none;
}

.copyright a:hover {
	color: #666666; 
	text-decoration: underline;
}

/********************************/
/* SECTION 7 - GENERIC CLASSES */
/********************************/

/*------------------------------------------*/
/* Section 7.1 - Global default fonts      */
/*------------------------------------------*/
/* Only applied to the main div-statements  */
/* for the basic page regions.              */
/*------------------------------------------*/

.nav-global-font {
	font-size: 1.0em;
}

.nav-sub-font {
	font-size: 1.0em;
}

.content-font {
	font-size: 1.0em; line-height: 1.7em; color: rgb(110,110,110);
}

/*--------------------------------------*/
/* Section 7.2 - Horizontal alignments  */
/*--------------------------------------*/

.align-left {
	text-align: left;
}

.align-right {
	text-align: right;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.padding-left {
	padding-left: 10px;
}

.padding-right {
	padding-right: 10px;
}

.margin-right {
	margin-right: 10px;
}

.v-align-bottom {
	vertical-align: bottom;
}

.padding {
	padding: 20px 0px 20px 0px;
}
.margin {
	margin: 10px 0px 10px 0px;
}

.row {
	font-size: 10pt;
	width: 620px;
	height: auto; /* 8tung IE behält px-höhe, deshalb auto*/
	margin: 0px;
	padding: 0px;
}

.row-end {
	display: block;
	font-size: 10pt;
	width: 620px;
	height: 20px;
	margin-bottom: 10px;
	/*background-color: lime;*/
}

.border-top {
	border-top: 1px solid #CCCCCC;
}

.border-bottom {
	clear: both;
	width: 100%;
	border-bottom: 1px solid #CCCCCC;
}

.column-20 {
	clear: right;
	width: 10px; /* +padding 10 */
}

.column-50 {
	clear: right;
	width: 40px; /* +padding 10 */
}

.column-70 {
	clear: right;
	width: 60px; /* +padding 10 */
}

.column-100 {
	clear: right;
	width: 90px; /* +padding 10 */
}

.column-150 {
	clear: right;
	width: 140px; /* +padding 10 */
}

.column-200 {
	clear: right;
	width: 190px; /* +padding 10 */
}

.column-250 {
	clear: right;
	width: 240px; /* +padding 10 */
}

.column-300 {
	clear: right;
	width: 290px; /* +padding 10 */
}

.column-400 {
	clear: right;
	width: 390px; /* +padding 10 */
}

.column-420 {
	clear: right;
	width: 420px;
}

.column-450 {
	clear: right;
	width: 440px; /* +padding 10 */
}

.column-500 {
	clear: right;
	width: 490px; /* +padding 10 */
}

.column-550 {
	clear: right;
	width: 540px; /* +padding 10 */
}

/* * * * * * * COLUMN WITHOUT PADDING * * * * * * */

.column-10-blank {
	clear: right;
	width: 10px; /* ohne padding */
}

.column-30-blank {
	clear: right;
	width: 30px; /* ohne padding */
}

.column-120-blank {
	clear: right;
	width: 120px; /* ohne padding */
}

.column-200-blank {
	clear: right;
	width: 200px; /* ohne padding */
}


.column-590-blank {
	clear: right;
	width: 590px; /* ohne padding */
}

.column-620-blank {
	clear: right;
	width: 620px; /* ohne padding */
}

/*--------------------------*/
/* Section 7.3  Text colors */
/*--------------------------*/

/* Basic Colors */
.txt-white {
	color: rgb(255,255,255);
}

.txt-black {
	color: rgb(0,0,0);
}

/* Grey */
.txt-grey01 {
	color: rgb(242,242,242);
}

.txt-grey02 {
	color: rgb(230,230,230);
}

.txt-grey03 {
	color: rgb(217,217,217);
}

.txt-grey04 {
	color: rgb(204,204,204);
}

.txt-grey05 {
	color: rgb(191,191,191);
}

.txt-grey06 {
	color: rgb(178,178,178);
}

.txt-grey07 {
	color: rgb(153,153,153);
}

.txt-grey08 {
	color: rgb(127,127,127);
}

.txt-grey09 {
	color: rgb(89,89,89);
}

.txt-grey10 {
	color: rgb(51,51,51);
}

/* RED */

/* MAIN TXT RED */
.txt-mainred01 {
	color: #990066;
}

.txt-mainred02 {
	color: #CC0099;
}

.txt-mainred03 {
	color: #FF33CC;
}

.txt-mainred04 {
	color: #FF66CC;
}

/* ADDITIONAL TXT RED */
.txt-red01 {
	color: #990066;
}

.txt-red02 {
	color: #A31A76;
}

.txt-red03 {
	color: #AD3385;
}

.txt-red04 {
	color: #B84D94;
}

.txt-red05 {
	color: #C266A3;
}

.txt-red06 {
	color: #CC7FB2;
}

.txt-red07 {
	color: #D699C2;
}

.txt-red08 {
	color: #E0B2D1;
}

.txt-red09 {
	color: #EBCCE0;
}

.txt-red10 {
	color: #F5E5EF;
}

/*---------------------------------*/
/* Section 7.4 - Background colors */
/*---------------------------------*/

/* Basic Colors */
.bg-white {
	background-color: rgb(255,255,255);
}

.bg-black {
	background-color: rgb(0,0,0);
}

/* GREY */

.bg-grey01 {
	background-color: rgb(242,242,242);
}

.bg-grey02 {
	background-color: rgb(230,230,230);
}

.bg-grey03 {
	background-color: rgb(217,217,217);
}

.bg-grey04 {
	background-color: rgb(204,204,204);
}

.bg-grey05 {
	background-color: rgb(191,191,191);
}

.bg-grey06 {
	background-color: rgb(178,178,178);
}

.bg-grey07 {
	background-color: rgb(153,153,153);
}

.bg-grey08 {
	background-color: rgb(127,127,127);
}

.bg-grey09 {
	background-color: rgb(89,89,89);
}

.bg-grey10 {
	background-color: rgb(51,51,51);
}

/* RED */

/* MAIN BG RED */

.bg-mainred01 {
	background-color: #990066;
}

.bg-mainred02 {
	background-color: #CC0099;
}

.bg-mainred03 {
	background-color: #FF33CC;
}

.bg-mainred04 {
	background-color: #FF66CC;
}

/* ADDITIONAL BG RED */

.bg-red01 {
	background-color: #990066;
}

.bg-red02 {
	background-color: #A31A76;
}

.bg-red03 {
	background-color: #AD3385;
}

.bg-red04 {
	background-color: #B84D94;
}

.bg-red05 {
	background-color: #C266A3;
}

.bg-red06 {
	background-color: #CC7FB2;
}

.bg-red07 {
	background-color: #D699C2;
}

.bg-red08 {
	background-color: #E0B2D1;
}

.bg-red09 {
	background-color: #EBCCE0;
}

.bg-red10 {
	background-color: #F5E5EF;
}

/******************************/
/* SECTION 11 - MISCELLANEOUS */
/******************************/

/* Paragraph text */
p {
   clear: left; margin: 0em 0px 0.5em 0px; padding: 0px; font-size: 130%;
}

p.note {
   clear: left;
	 margin: 0px;
	 padding: 0px;
	 font-size: 130%;
	 font-style:italic;
}

/* Quote */
p.quote {
   clear: left; margin: 0em 30px 0.6em 30px; line-height: 120%; font-size: 120%;
}

/* Horizontal line */

hr {
	clear: both;
	display: block;
	width: 100%;
	height: 1px;
	margin: 20px 0px 40px 0px;
	border-color: #CCCCCC;
	border-style: dotted;
	border-width: 1px 0px  0px  0px;
	background-color: #FFFFFF;
}

/* HTML-code examples */
.showcode {
  font-family: monospace; font-weight: bold; font-size: 13px; color: rgb(255,0,0);
}

/* Hide HTML-tags. Good when no pagestyle supported by browser */
.hide {
	display: none;
}

br {
	clear: both;
}

b {
font-weight: bold;
}