@charset "utf-8";
/**
 * Standard CSS-Layout (c) by Dennis Osterkamp 
 * 
 * @author		 	Dennis Osterkamp <info@doitmax.de>
 * @see				http://www.doitmax.de
 * @copyright		Copyright (c) 2008 by do:media Dennis Osterkamp
 * @lastmodified	2008-05-13
 * @version			1.0
 */

/**#########################
 * #### 1. Global Reset ####
 * #########################
 *
 * @section 	 Global Reset
 * @description Resetting all elements for same style in all browser
 */
	 * { margin: 0; padding: 0; line-height: 1; font-size: 1em; list-style: none; }

	html { min-height: 100.01% }

/**################################
 * #### 2. Main Element Styles ####
 * ################################
 *
 * @section 	 Body and HTML
 * @description Format for the main elements of the website
 */
	body { 
		font: 13px/20px Georgia, "Times New Roman", Times, serif;
		color: #898378;
		line-height: 1.6em;
		background: url(gfx/Background/bgBody.png) top left repeat;
	}

	html { overflow-y: scroll; }

	a:link, a:visited { color: #0489b7; text-decoration: none; }
	a:hover, a:active, a:focus { text-decoration: underline; }	

	h1, h2, h3, h4, h5, h6 {
		font-family: Georgia, "Times New Roman", Times, serif;
		font-weight: normal;
	}
	
	h2 { color: #4b4740; font-size: 38px; line-height: 48px; letter-spacing: -1px; margin-top: .5em; }
	h3 { color: #4b4742; font-size: 19px; line-height: 29px; margin-bottom: 1.8em; letter-spacing: -1px; }	
	h4 { color: #746e65; font-size: 19px; line-height: 23px; margin: 1em 0 .5em 0; letter-spacing: -1px; }
	h5 { font-size: 16px; line-height: 24px; }
	#footer h5 { color: #ecbb8c; }
	
	.lineDivider { clear: both; display: block; border: 0 none; border-bottom: 1px solid #eee; background: none; margin: 1em 0; color: white; }

	div[class="lineDivider"] { margin: 2em 0; }

/**################################
 * #### 3. Standard Classes ####
 * ################################
 *
 * @section 	 Standard Classes
 * @description Same formats for every project. Replacing existing html attributes troughout CSS.
 */	
	/*** Replacing standard html alignments	***/
	.align-right 	{ text-align: right; }
	.align-left 	{ text-align: left; }	
	.center			{ text-align: center; }
	
	.float-left  { float: left; }
	.float-right { float: right; }	

	.float-left .framed 	{ margin-right: 2em; }
	.float-right .framed	{ margin-left: 2em; }

	.marg_auto { margin-left: auto; margin-right: auto; }

	.notype { list-style-type: none !important; list-style: none !important; }

	strong { font-weight: bold; }
	em, i  { font-style: italic; }

	big 	{ font-size: 1.25em; }
	.xbig	{ font-size: 1.40em; }
	big.first { font-size: 2em; letter-spacing: 1px }
	
	small, .small, .xsmall { font-family: Verdana, Arial, Helvetica, sans-serif; }
	small, .small { font-size: 11px; }
	.xsmall { font-size: 10px; }
	
	p 	{ padding-bottom: 1em; line-height: 21px; }
	
	/*** Different line-height settings	***/
	.lhs { line-height: 1.3; }
	.lhm { line-height: 1.5; }
	.lhl { line-height: 1.7; }

	/*** Defining the main colors	***/
	.black 	{ color: #333; }
	.red		{ color: #990000; }
	.grey, .grey a	{ color: #777; }
	.xgrey	{ color: #999; }
	.orange 	{ color: #cc7722; }
	.yellow 	{ color: #ffdd11; }
	.blue		{ color: #336699; }
	.green	{ color: #009933; }
	
	.hidden { display: none; }
	
	a img { border: 0 none; }

	.framed { background: white; padding: 3px; border: 1px solid #ccc; }

	/*** Hiding skiplinks for CSS-View ***/
	#quickskip li { position: absolute;	visibility: hidden;	}		

	.marg_auto  { margin: auto; }

	.w_perc_90 { width: 88%; }
	.w_perc_85 { width: 83%; }
	.w_perc_80 { width: 78%; }
	.w_perc_75 { width: 74%; }
	.w_perc_70 { width: 68%; }
	.w_perc_65 { width: 64%; }
	.w_perc_60 { width: 58%; }
	.w_perc_55 { width: 53%; }
	.w_perc_50 { width: 48%; }
	.w_perc_48 { width: 46%; }
	.w_perc_45 { width: 44%; }
	.w_perc_40 { width: 38%; }
	.w_perc_35 { width: 33%; }
	.w_perc_33 { width: 30%; }
	.w_perc_30 { width: 28%; }
	.w_perc_25 { width: 24%; }
	.w_perc_20 { width: 18%; }
	.w_perc_15 { width: 13%; }
	.w_perc_10 { width:  8%; }
	.w_perc_5  { width:  3%; }	
		
/**################################
 * #### 4. Clearfix Hack ##########
 * ################################
 *
 * @section 	 Clearfix Hack
 * @description Resetting floating elements
 */	
 	.clearfix:after {
		content: "."; 
		display: block; 
		height: 0; 
		clear: both; 
		font-size: 0.1em;
		visibility: hidden;
	}	

	/* Workaround: Clearfix-Anpassung für diverse IE-Versionen */
	/* 
	** IE5.x/Mac - x
	** IE7       - x
	*/	
	.clearfix { display: inline-block; }  /* ... Clearing für IE5/Mac und IE7 */

	/*
	** IE5.x/Win - x
	** IE6       - x
	*/	
	/* Hides from IE-mac \*/
	* html .clearfix { height: 1%; }   /* ... für IE5 + IE6/Win | IE-Clearing aktivieren */
	.clearfix { display: block; }      /* ... für IE5,IE6,IE7 | Mac-Einstellungen für IE/Win zurücksetzen */
	/* End hide from IE-mac */

/**####################################
 * #### 5. Standard Layout Wrapper ####
 * ####################################
 *
 * @section 	 Standard Layout Wrapper
 * @description Formats for the main layout wrapper
 */  
 	#pageBG		 { position: relative; background: url(gfx/Background/bgPageBg.png) top left repeat-x; }
	#pageWrapper { position: relative; width: 800px; margin: 0 auto; }
	#header 		 { position: relative; height: 144px; }
	
/**####################################
 * #### 6. Header Layout ##############
 * ####################################
 *
 * @section 	 Header Layout
 * @description Layout for elements within the #header wrapper
 */
	/*** Logo Replacement ***/
	h1   { position: absolute; top: -18px; z-index: 300; }
	* html h1 { top: -18px; }	
	h1 a { display: block; height: 190px; width: 215px; background: url(gfx/Background/bgLogo.jpg) top left no-repeat; text-indent: -9999px; }
	
	#chips { 
		position: absolute; 
		right: -59px; top: -36px; 
		width: 244px; 
		height: 160px; 
		background: url(gfx/Background/bgChips.jpg) top right no-repeat; 
		text-indent: -9999px; 
		z-index: 100;
	}
	
	/*** Navigation ***/
	#navigation {
		position: absolute; 
		bottom: -7px; 
		left: 0; 
		height: 45px; 
		width: 780px; 
		margin: 0 10px; 
		background: url(gfx/Background/bgNavigation.png) top left repeat-x;
		z-index: 200;
	}
	#navigation ul { margin-left: 205px; }
	#navigation li { float: left; list-style-type: none; }
	#navigation li a { 
		float: left;
		display: block; 
		padding: 8px .75em; 
		color: white; 
		font-size: 15px; 
		font-style: italic;
		background-image: url(gfx/Background/bgNavigationA.png);
		background-repeat: repeat-x;
		background-color: transparent;
	}

	#navigation li a:hover 	 { background-position: 0 -45px; text-decoration: none; }
	#navigation li.current a { background-position: 0 -90px; color: #14522e; }

	/*** Navi ***/	
	#navi 	{ position: relative; height: 36px; z-index: 200; }
	#navi ul { position: absolute; right: 20px;  }
	#navi li { float: left; list-style-type: none; padding: 11px 0; color: white; }
	#navi a	{ color: white; }
	#navi a:link, #navi a:visited { text-decoration: none; }
	#navi a:hover, #navi a:focus, #navi a:active { text-decoration: underline; }	
	
	/*** Strip ***/
	#strip a { 
		position: absolute; 
		right: -70px; top: 50px;
		background-repeat: no-repeat; 
		background-position: top left;
		background-color: transparent;
		width: 202px; height: 229px; 
		text-indent: -9999px; 
		z-index: 200;
	}
	
	html > body #strip a { background-image: url(gfx/Background/bgStrip.png); }
	* html body #strip a { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../css/gfx/Background/bgStrip.png', sizingMethod='image'); cursor: pointer; }	
	
	
/**####################################
 * #### 7. Content Layout #############
 * ####################################
 *
 * @section 	 Content Layout
 * @description Layout for elements within the #content wrapper
 */	
	#contentWrapper { background: url(gfx/Background/bgContentRepeat.png) top center repeat-y; }
	#content  { margin: 0 50px 60px; padding: 30px 0 0; }
	
	/** Links in Text **/
	ul.inTextLinks li 	 { float: left; margin: .5em 1em .5em 0; }
	ul.inTextLinks li.end { margin-right: 0; }
	
	/** Img Replacement on Index Page **/
	.bgIndexScreen { width: 330px; height: 270px; background: url(gfx/Background/bgIndexScreen.jpg) top center no-repeat; }
	.bgIndexScreen span { display: block; text-indent: -9999px; }
	
	/** Index columns **/
	.colLeft  { float: left; width: 330px; margin-right: 20px; }
	.colRight { float: right; width: 330px; margin-left: 20px; }
	* html .colRight { margin-left: 10px; }		
	
	blockquote	{ margin-top: 1em; padding-bottom: 20px; background: url(gfx/Background/bgBlockquote.png) bottom center no-repeat; }
	blockquote em { font-size: 18px; line-height: 32px; text-align: center; }
	
	hr { width: 80%; border: 0 none; background-color: #d5d4b4; margin: .75em auto; color: #d5d4b4; height: 1px; border-bottom: 1px solid #d5d4b4; }
	
	/** Index info boxes **/
	.infoBox { position: relative; width: 330px; height: 170px; margin: 1em 0; background: transparent url(gfx/Background/bgInfoBox.jpg) top center no-repeat; }

	.infoBox .badge1, .infoBox .badge2, .infoBox .badge3, .infoBox .badge4, .infoBox .badgeDL { 
		position: absolute; 
		top: 0; left: 0; 
		width: 50px; height: 50px; 
		text-indent: -9999px; 
		background-color: transparent;
		background-position: top left;
		background-repeat: no-repeat;
	}
	
	.infoBox .badge1  { background-image: url(gfx/Background/bgInfoBoxBadge1.jpg); } 
	.infoBox .badge2  { background-image: url(gfx/Background/bgInfoBoxBadge2.jpg); } 
	.infoBox .badge3  { background-image: url(gfx/Background/bgInfoBoxBadge3.jpg); }
	.infoBox .badge4  { background-image: url(gfx/Background/bgInfoBoxBadge4.jpg); } 
	.infoBox .badgeDL { background-image: url(gfx/Background/bgInfoBoxBadgeDl.jpg); }

	.infoBox .more { 
		position: absolute; 
		bottom: 0; 
		display: block; 
		height: 36px; width: 330px;
		background: transparent url(gfx/Background/bgInfoBoxMore.jpg) top center no-repeat; 
		text-indent: -9999px; 
	}
	
	.infoBox .text {
		position: absolute; top: 30px;
		display: block; 
		font-size: 19px;
		width: 170px;
		line-height: 26px; 
		letter-spacing: -1px;
		text-align: right;
		color: #4b4740; 
		margin-left: 1em;
	}
	
	.dl		  { margin: 0 auto; }
	.dl .text { padding: .25em 0; font-size: 23px; width: 190px }
	.dl .text small { font-family: Georgia, "Times New Roman", Times, serif; line-height: 1.25em; font-size: .6em; }
	
	.infoBox .screen1, .infoBox .screen2, .infoBox .screen3, .infoBox .screen4, .infoBox .screenDLMac a, .infoBox .screenDLWin a { 
		position: absolute; 
		top: 27px; left: 204px;
		width: 107px; height: 108px; 
		text-indent: -9999px; 
		background-color: transparent;
		background-position: top left;
		background-repeat: no-repeat;
	}

	.infoBox .screenDLWin a, .infoBox .screenDLMac a { left: 220px; }
	
	.infoBox .screen1 { background-image: url(gfx/Background/bgInfoBoxScreen1.jpg); } 
	.infoBox .screen2 { background-image: url(gfx/Background/bgInfoBoxScreen2.jpg); } 
	.infoBox .screen3 { background-image: url(gfx/Background/bgInfoBoxScreen3.jpg); }
	.infoBox .screen4 { background-image: url(gfx/Background/bgInfoBoxScreen4.jpg); }
	.infoBox .screenDLWin a { background-image: url(gfx/Background/textScreenDlWin.jpg); }
	.infoBox .screenDLMac a { background-image: url(gfx/Background/textScreenDlMac.jpg); }
	
	/** Text Box **/	
	.textBox	{ margin-bottom: 1em; }
	.textBox h4 strong { font-size: 40px; float: left; margin-right: .35em; padding-bottom: 0em; color: #acc55d;  }
	.textBox .text { width: 400px; }
	.textBox .float-left { margin-right: 1em; }
	.textBox .float-right { margin-left: 1em; }
	
	 .textBox .screen1, .textBox .screen2, .textBox .screen3, .textBox .screen4 { 
	 	width: 250px; 
		height: 300px; 
		background-color: transparent; 
		background-repeat: no-repeat; 
		background-position: center left; 
		text-indent: -9999px;
	}
	 
	 .textBox .screen1 { background-image: url(gfx/Background/textScreen1.jpg); }
	 .textBox .screen2 { background-image: url(gfx/Background/textScreen2.jpg); }
	 .textBox .screen3 { background-image: url(gfx/Background/textScreen3.jpg); }
	 .textBox .screen4 { background-image: url(gfx/Background/textScreen4.jpg); }
	 

	/** Packshots **/
	.coverMid { display: block; width: 185px; height: 265px; background: url(gfx/Background/bgCoverMid.jpg) top left no-repeat; text-indent: -9999px; }
	 
	#content ul.list { line-height: 1.5em; margin: 0 2em 2em; }
	#content ul.list li { padding: .5em 0; margin: 0 1em; list-style: square; line-height: 1.6em; }
	
/**####################################
 * #### 8. Footer Layout ##############
 * ####################################
 *
 * @section 	 Footer Layout
 * @description Layout for elements within the #footer wrapper
 */
 	#footer 		{ position: relative; padding: 15px 30px 0; background: url(gfx/Background/bgFooter.png) top left no-repeat; height: 297px; }
	#footer h5 		{ padding: 0 3px; margin: 0 0 .35em }
	#footer #logo a { position: absolute; 
		left: 30px; 
		bottom: 15px; 
		background: url(gfx/Background/bgFootLogo.png) top left no-repeat; 
		width: 86px; 
		height: 35px;
		text-indent: -9999px;
	}
	
	
	/** Footer link design **/
	#footer .sect 			{ float: left; width: 40%; margin-right: 2em; }
	#footer .sect ul		{ margin-left: 1em; }
	#footer .sect li 		{ background: url(gfx/Background/bgDot_horizontal.png) bottom center repeat-x; padding-bottom: 1px; }	
	#footer .sect a 		{ display: block; color: #838371; text-decoration: none; padding: .5em 3px; }
	* html #footer .sect a { width: 100%; white-space: nowrap; }
	#footer .sect a span { display: block; color: #efdbca; text-decoration: none; margin-bottom: .75em; }
	#footer .sect a:link, #footer .sect a:visited { background-color: transparent; }
	#footer .sect a:hover, #footer .sect a:hover span, #footer .sect a:active span, #footer .sect a:active { background-color: #838371; color: #efdbca; }

	/** Chips Bottom **/
	#chipsBottom { 
		position: absolute; 
		left: 0; top: -110px;
		width: 155px; 
		height: 110px; 
		background: url(gfx/Background/bgChipsBottom.jpg) top left no-repeat; 
		text-indent: -9999px; 
		z-index: 100;
	}
	
	#validation { position: absolute; bottom: 15px; right: 20px; }


	.infoSpecBox { border: 1px solid #ccc; background: #ffffcc; padding: 13px; margin-bottom: 21px; }
	.infoSpecBox h3 { font-size: 18px; color: #414141; color: #990000; margin: 0 0 13px; }

/* ########################################################################
/* ###### MICROSITES ######################################################
/* ########################################################################
*/				
	#microLinks			{ 
		clear: both; 
		font-size: 11px; 
		border-top: 0; 
		width: 780px; 
		margin: 1em auto 0; 
		font-family: Verdana, Arial, Helvetica, sans-serif; 
		padding: 1em 0; 
		color: white; 
	}
	#microLinks p 		{ clear: both; font-size: 11px; padding: 1em 0; margin: 1em 0; }
	#microLinks ul, #microLinks li { list-style: none; margin: 0; padding: 0; white-space: nowrap; line-height: 1.45; }
	#microLinks li 	 { float: left; border: 0 none; }
	#microLinks li a { display: inline; padding: 0; color: #f9f8db; text-decoration: underline; }

	#microLinks .en { display: none; }