@charset "utf-8";
/* ########################################################
** #### Standard CSS-Layout (c) by Dennis Osterkamp #######
** ########################################################
**
** File: 		 	layout.css
** Description: 	Main Layout Stylesheet for My-SAD.de
** Author:		 	Dennis Osterkamp 
** Version:			1.0.6
** Last changes: 	28.07.2008
**

*/
/* #######################################
 	###### 1. GENERAL XHTML ELEMENTS ######
	#######################################
*/
	body { background-image: url(gfx/SAD/Background/bgBody.png);  background-color: #c9d7e3; }
	
/* #################################
	###### 2. STANDARD CLASSES ######
/* #################################
*/
	.dotHr { background-image: url(gfx/SAD/Background/bgBlueDotHorizontal.png); }

/* ############################
	###### 3. TYPOGRAPHY  ######
	############################
*/	
	body { color: #555045; }
	
	a:link {color: #0033CC;text-decoration: none;} 
	a:visited {color: #0033CC;/*color: #990099;*/text-decoration: none;} 
	a:hover, a:active  {text-decoration: underline;} 
	
	h2 { color: #5d5d5d; }
	h3 { color: #555045; }
	h4 { color: #667777; }	
	h5 { color: #777; }
	
	.hxNorm { color: #121212; font-size: 1em; margin: 1em 0 .15em; padding: 0;} 
	
	h3.shop, h3.ucp { background-image: url(gfx/SAD/Background/bgH3UCP.png); }
	
/* 	#########################################
	###### 4. CONTENT & LAYOUT WRAPPER ######
	#########################################
*/	
	#headerWrapper 				{ background-image: url(gfx/SAD/Background/bgHeader.png); border-color: #cedde8; }
	#contentHeader, #content	{ border-color: #aebac5; }
	#contentFooter 				{ background-image: url(gfx/SAD/Background/bgContentFooter.png); background-color: transparent; }
	#content					{ background-image: url(gfx/SAD/Background/bgContent.png); }
	
	/** Combined Classes **/
	#headerWrapper,
	#contentHeader,
	#content { background-color: #fff; }
	
	#contentHeader { background: white url(gfx/SAD/Background/bgContentHeader.png) top left repeat-x; border-bottom: 0 none; }
	
/* 	################################
	###### 5. HEADER ###############
	################################
*/
	/*** Page Logo ***/
	h1 a { 
		background-image: url(gfx/SAD/Background/bgLogo.png);
		width: 120px; height: 50px;
		top: 14px; left: 30px;
	}
		
	/*** 5.1 Navi ***/
	#navi		{ background-image: url(gfx/SAD/Background/bgNaviLeft.png); } 
	#navi ul 	{ background-image: url(gfx/SAD/Background/bgNaviRight.png); }	
	#navi a 	{ background-image: url(gfx/SAD/Background/bgNaviSpacer.png); }	
	
	/** Combined Classes **/
	h1 a,
	#navi,
	#navi ul,
	#navi a 	{ background-color: transparent; }
	
	/*** Header Tog Box ***/
	.togBox .tab, .togBox ul { border-color: #cedde8; }
	.togBox a.exp 	{ background-image: url(gfx/SAD/Other/bgExpand.png); }
	.togBox a.exp:hover, .togBox a.exp:active, .togBox a.exp:focus { background-image: url(gfx/SAD/Other/bgExpandHover.png); }
	.togBox ul a:hover, .togBox ul a:active { background-color: #4487b8; color: white; }

	/** Combined Classes **/
	.togBox .tab,
	.togBox a.exp,
	.togBox a.exp:hover, 
	.togBox a.exp:active, 
	.togBox a.exp:focus, 
	.togBox ul { background-color: #fff; }
	
/* 	############################
	###### 6. NAVIGATION  ######
	############################
*/
	#navigation {padding-top: 39px;}
	#navigation a, #navigation span {color: #fff;}
	
	#navigation a {background-position:0% -200px;}
	#navigation span {background-position:100% -200px}
	
	/**** 6.1 Hover Effects ****/
	#navigation a:hover, #navigation a:active, #navigation .current a {background-position:0% -400px;border-color:#e5f1fb;}
	#navigation a:hover span, #navigation a:active span, #navigation .current a span {background-position:100% -400px;color: #556677; }	
	
	.popMenu {background-image:url(gfx/SAD/SoftwareOverlay/bgNavOverlay.png);border-color:#cedde8;}
	.popMenu a:hover, .popMenu a:active { background: #0069b2; color: #fff;}		
	.popMenu .topList {background-image:url(gfx/SAD/Background/bgBlueDotVertical.png)}	
	.popMenu .end { background-image: none;}
	
	
/* 	#########################
	##### 7. CONTENT  #######
	#########################
*/
	.spacer 	{ background-image: url(gfx/SAD/Background/bgDetailSpacer.png); }
	.spacerLong { background-image: url(gfx/SAD/Background/bgDetailSpacerLong.png); }	

	#searchHolder .relHolder {
		background-image:url(gfx/SAD/Background/bgSearch.png);
	}

	/** Search Bar **/
	#searchBar 			{ background: transparent url(gfx/SAD/Background/bgSearchBar.png) 0 0 repeat-x; border-color: #aebac5; }
	#searchBar label	{ color: #556677; }
	#searchBar small a	{ color: #888; }		

	/** Search Tags **/
	#searchTags 		{ color: #556677; }
	#searchTags a.exp 	{ background-image: url(gfx/SAD/Other/bgExpand.png); }
	#searchTags a.exp:hover, #searchTags a.exp:active, #searchTags a.exp:focus { background-image: url(gfx/SAD/Other/bgExpandHover.png); }
	
	/** Tag Box **/
	#togTagBox { border-color: #ebdcaa; background-color: #f8f2d6; background-image: url(gfx/Common/Background/bgSearchTags.png); }

	/** Top Produkte auf der Startseite **/
	#topHome {
		background-color: #fff;
		background-image: url(gfx/SAD/Background/bgTopProducts.png);
		border-color: #aebac5;
	}
	
	#topHome h2 { color: #6688aa; }	

	/** DESC: Definitionen für die einzelnen Top-Produkte **/
	#topHome li { background-image: url(gfx/SAD/Background/bgTopProductsSpacer.png); }
	#topHome .priceHolder,#topHome .priceHolder a {color:#fff;}
	html > body #topHome .priceHolder {background-image:url(gfx/SAD/Other/icoPrice50.png);}
	* html #topHome .priceHolder {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../css/gfx/SAD/Other/icoPrice50.png', sizingMethod='image'); }	

	/** Produkt-Detailseite **/
	#details .prodGFX, #details #flashVideo { border-color: #ccc; background-color: #fff; }
	#details .sbBox { border-right-color: #f1f1f1; }

	.systemInfo { border-color: #82b9e0; background: #eee; }
	
	#details .detailBox { background-image: url(gfx/SAD/Background/bgDetailSpacer.png); }
	#details .testResult, #details .testSource { 
		border-color: #e1e1e1; 
		background-color: #f7f498; background-image: url(gfx/SAD/SoftwareOverlay/product.png);
	}
	
	#details .testSource img { border-color: #ededed; background-color: #fff; }
	#details .screens li  	 { background: white; border-color: #ccc; }
	
	
	/**** Sidebar ****/	
	#sidebar 			{ background-color: #fff; }
	.sbBox		 		{ background-color: #f1f1f1; }
	.boxGreen  .sbBox	{ background-color: #b7c46a; }
	.boxBlue   .sbBox	{ background-color: #82b9e0; }
	.boxOrange .sbBox	{ background-color: #F2BC64; }
	.boxCont 			{ background-color: #fff; }
	
	.boxLinks a.togDown, .boxLinks a.togUp { color: white; }
	.boxCont .current a { color: #666; }

	.sbBox h3 { color: #414141; }	
	.boxGreen h3, .boxBlue h3, .boxOrange h3 { color: #fff; }
	.sbBox h4 { color: #cc7722; border-bottom-color: #ccc; }

	.catProdDesc 			 { border-color: #ddd; }
	.catProd h4  			 { color: #cc7722; }
	.catProd .catProdDesc h3 { color: #336699; }

	/** Presse Übersichtsseiten Formatierungen **/
	.post 				{ border-color: #ddd; }
	.post .newsImg img 	{ border-color: #d1e6ee; }
	.post small			{ color: #999; }

	.indexBox .boxL { border-right-color: #eee; }
	.indexPost 		{ background-color: #fff; background-image: url(gfx/SAD/Background/bgBlueDotHorizontal.png); }
	.indexPost .imgHolder { background-color: white; border-color: #d1e6ee; }

/* 	########################
	###### 8. FOOTER  ######
	########################
*/	
	#footer { 
		background-color: #fff; background-image: url(gfx/SAD/Background/bgFooter.png); 
		border-color: #aebac5;
		border-top-color: #d1e6ee;
	}
	
	.footerContent {border-color: #aebac5; border-top-color: #D1E6EE; background: #f5f5f5;}
	.footerContent .topList { background-image: url(gfx/SAD/Background/bgBlueDotVertical.png);}
	.footerContent .topList li {background-image: url(gfx/SAD/Background/bgBlueDotHorizontal.png);}
	.footerContent .end { background: none; }

/* 	#################################
	###### 9. Software Overlay ######
	#################################
*/	
	#softwareOverlay { background-image: url(gfx/SAD/SoftwareOverlay/left.png); color: #222; }	
	#bgContainer { background-image: url(gfx/SAD/SoftwareOverlay/right.png); }
	#overlayCategories { background-image: url(gfx/SAD/SoftwareOverlay/spacer.png); }
	#overlayCategories h2 { color: #f7f499; }
	#overlayCategories a { color: white; }

	#overlayCategories a:hover, #overlayCategories a:active, #overlayCategories .current {
		background-image: url(gfx/SAD/SoftwareOverlay/catHover.png); color: black;
	}

	#overlayProducts { border-color: #f2e1c4; background-color: #f7f498; background-image: url(gfx/SAD/SoftwareOverlay/product.png); }
	#overlayProducts ul { background-image: url(gfx/SAD/SoftwareOverlay/spacerProd.png); }
	#overlayProducts h2 { color: #e89e32 }
	#overlayProducts li a:link, #overlayProducts li a:visited {color: #222;}	
	#overlayProducts li a:hover, #overlayProducts li a:active, #overlayProducts li a:focus  {background-color: #eee;}
	
		
	#navOverlay {border:1px solid #cfdbe5;background:url(gfx/SAD/SoftwareOverlay/bgNavOverlay.png) top left repeat-x;}
	#navOverlay a {background: transparent url(gfx/SAD/Background/bgBlueDotHorizontal.png) bottom left repeat-x; color:#556677;}
	#navOverlay a:hover {background: #3182bc url(gfx/SAD/Background/bgBlueDotHorizontal.png) bottom left repeat-x; color:#fff;}
	
/* 	#########################
	######  IMAGES  #########
	#########################
*/		
	img.framed, .framed img { background-color: white; border-color: #ccc; }

/* 	#####################################
	###### 11. Formular Elements  ######
	####################################
*/		
	/** UCP Link Back Button **/
	.btnBack 		{ color: #556677 !important; background-image: url(gfx/SAD/Form/btnBackLeft.png); }
	.btnBack span 	{ background-image: url(gfx/SAD/Form/btnBackRight.png);	}
	
	fieldset h3	  	  { border-bottom-color: #ddd; }
	fieldset li label { color: #777; }
	fieldset li small { color: #888; }		
	
	.input, .inputLong, .inputMid, .inputShort { border-color: #ccc; }
	.input:focus 	{ background-color: #fff9da; }
	input[disabled] { background-color: #ddd; }
	
	/** Allover Button **/
	.btnGo { background-image: url(gfx/SAD/Form/bgButtonGo.png); }
	.btnDlBlue, .btnSbYellowSmall, .btnCartGo, .btnSbGreenSmall, .btnNormGrey, btnSbYellowXSmall, .btnBlueXSmall { color: #414141; }	
	.btnBlueSmall, .btnXSmallGrey { color: #556677; }

	.btnGo 				{ background-image: url(gfx/SAD/Form/bgButtonGo.png); }	
	.btnDlBlue 			{ background-image: url(gfx/SAD/Form/btnDownloadBlue.png); }
	.btnSbYellowSmall	{ background-image: url(gfx/SAD/Form/btnSidebarYellowSmall.png); }
 	.btnSbYellowXSmall 	{ background-image: url(gfx/SAD/Form/btnXSmallOrange.png); }
 	.btnBlueXSmall 		{ background-image: url(gfx/SAD/Form/btnXSmallBlue.png); }
 	.btnSbGreenSmall 	{ background-image: url(gfx/SAD/Form/btnSidebarGreenSmall.png); color: white; }	
 	.btnSbGreenXSmall 	{ background-image: url(gfx/SAD/Form/btnSidebarGreenXSmall.png); color: white; }
	.btnXSmallGrey 		{ background-image: url(gfx/SAD/Form/btnXSmallGrey.png); }
	.btnNormGrey 		{ background-image: url(gfx/SAD/Form/btnNormalGrey.png); }
	.btnBlueSmall 		{ background-image: url(gfx/SAD/Form/btnSmallBlue.png); }	
	.btnSbYellow 		{ background-image: url(gfx/SAD/Form/btnSidebarYellow.png); color: #414141; }
	.btnSbGreen 		{ background-image: url(gfx/SAD/Form/btnSidebarGreen.png); color: white; }
	.btnSmallOrange 	{ background-image: url(gfx/SAD/Form/btnSmallOrange.png); }
	.btnSmallGrey 		{ background-image: url(gfx/SAD/Form/btnSmallGrey.png); }
	
/* 	####################################
	#####  TABLES  #####################
	####################################
*/
	.odd td { background: #eee; }

	.tblList th, .tablesorter th { background-color: #f7f6e0; background-image: url(gfx/SAD/Background/bgTh.png); border-bottom-color: #e6e79e; }
	.tblList th a, .tablesorter th a { color: #556677; }	
	.tblList th div, .tablesorter th div  { border-top-color: #fff; }
	.tblList .even td, .tblList .odd td, .tablesorter .even td, .tablesorter .odd td { border-top-color: #fff; border-bottom-color: #ccc; }
	.tblList .shop td, .tablesorter .shop td { background-color: #fff9d4; color: #444; }

	.faq a:hover, .faq a:active { background-color: #eedd77; }
	.faq a, .faq div { background-color: white; }
	.faq div { border-color: #eee; }

/* 	##################################
	######  CART  ####################
	##################################
*/			
	#cart .floatBox, #cart .infoBox { background: white; }	
	#cart .infoBox td 	{ border-right-color: ccc; }
	#cart .sbBox 		{ border-right-color: #B0D7F2; }
	#cart h2 			{ color: #227799;}	

	#cart .cart_step1 { background-image: url(gfx/SAD/Shop/h2CartStep1.png); }
	#cart .cart_step2 { background-image: url(gfx/SAD/Shop/h2CartStep2.png); }
	#cart .cart_step3 { background-image: url(gfx/SAD/Shop/h2CartStep3.png); }
	#cart .cart_step4 { background-image: url(gfx/SAD/Shop/h2CartStep4.png); }
	#cart .cart_step5 { background-image: url(gfx/SAD/Shop/h2CartStep5.png); }	
	#cart .cart_step6 { background-image: url(gfx/SAD/Shop/h2CartStep6.png); }
	#cart .cart_step7 { background-image: url(gfx/SAD/Shop/h2CartStep7.png); }

	#cartNav 			{ color: #b0d7f2; background-color: #fff; background-image: url(gfx/SAD/Background/bgBlueDotHorizontal.png); }
	#cartNav .dot_top	{ background-image: url(gfx/SAD/Background/bgBlueDotHorizontal.png); }
	#cartNav ul			{ background-image: url(gfx/SAD/Shop/ulCartNavDott.png); }
	#cartNav .act span, #cartNav .act span a { color: #227799; }

	#cartNav .cartNav_1 { background-image: url(gfx/SAD/Shop/liCartNav_1.png); }
	#cartNav .cartNav_2 { background-image: url(gfx/SAD/Shop/liCartNav_2.png); }
	#cartNav .cartNav_3 { background-image: url(gfx/SAD/Shop/liCartNav_3.png); }
	#cartNav .cartNav_4 { background-image: url(gfx/SAD/Shop/liCartNav_4.png); }
	#cartNav .cartNav_5 { background-image: url(gfx/SAD/Shop/liCartNav_5.png); }
	#cartNav .cartNav_6 { background-image: url(gfx/SAD/Shop/liCartNav_6.png); }

	#cartNav li.act .cartNav_1 { background-image: url(gfx/SAD/Shop/liCartNav_1_act.png); }
	#cartNav li.act .cartNav_2 { background-image: url(gfx/SAD/Shop/liCartNav_2_act.png); }
	#cartNav li.act .cartNav_3 { background-image: url(gfx/SAD/Shop/liCartNav_3_act.png); }
	#cartNav li.act .cartNav_4 { background-image: url(gfx/SAD/Shop/liCartNav_4_act.png); }
	#cartNav li.act .cartNav_5 { background-image: url(gfx/SAD/Shop/liCartNav_5_act.png); }
	#cartNav li.act .cartNav_6 { background-image: url(gfx/SAD/Shop/liCartNav_6_act.png); }	

	#cartNav .liTop		 { background-image: url(gfx/SAD/Shop/liCartNav_top.png); }
	#cartNav .liBot 	 { background-image: url(gfx/SAD/Shop/liCartNav_bot.png); }
	#cartNav .act .liBot { background-image: url(gfx/SAD/Shop/liCartNav_bot_act.png); }

	.smallBox { color: white; background: #bbcc66; }	
	.smallBox h3,.smallBox h4 { color: #227799; }

/*  ##################################
	######  USER  ####################
	##################################
*/	
	#user .boxBlue .sbBox 	{ border-right-color: #82b9e0; }
	#user .boxGreen .sbBox 	{ border-right-color: #b7c46a; }
	#user .boxOrange .sbBox { border-right-color: #F2BC64; }
	#user .sbBox 			{ border-right-color: #f1f1f1; }
		
/* 	##################################
	######  COMBINED CLASSES  ########
	##################################
*/	
	/*** DESC: Container für den grafischen Banner der einzelnen Produkte ***/
	#prodImage {
	 	background-color: #def0fa; 
		background-image: url(gfx/SAD/Background/bgTopProductsBanner.png);
		border-color: #aebac5;
	}

	/** Stepcarousel **/
	.stepcarousel .panel img { background-color: #fff; border-color: #ccc; }

	html > body .panel button { background-image: url(gfx/SAD/Form/btnMoreInfosTop.png) }
	* html .panel button { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../css/gfx/SAD/Form/btnMoreInfosTop.png', sizingMethod='image'); }

	.sortASC { background-image: url(gfx/Icons/8/bullet_arrow_top.png) !important; }
	.sortDESC { background-image: url(gfx/Icons/8/bullet_arrow_bottom.png) !important; }

	.player-controls, a.player-btn-product{
		position: absolute;
		bottom: 8px;
		left: 8px;
	}
	
	/* hide time and controls in Apple look */
	div#controls div.time, div#controls div.track {
		display:none;
	}
	
	div#controls .play, div#controls .pause, div#controls .mute, div#controls .unmute {
		display: block; float: left;
		width: 32px; height: 32px;
		margin: 0 5px 0 0;
		background: transparent url(gfx/SAD/Other/bg-player-btn.png) scroll 0 0 no-repeat;
		cursor: pointer;
		text-indent: -999em;
	}
	
	div#controls .play { background-position: 0 0; }
	div#controls .pause { background-position: 0 -32px; }
	div#controls .mute { background-position: 0 -64px; }
	div#controls .unmute { background-position: 0 -96px; }

	a.player-btn-product { 
		display: block; 
		right: 8px;
		left: auto;
		width: 158px; height: 35px;
		background: transparent url(gfx/SAD/Other/bg-player-btn-product.png) scroll 0 0 no-repeat;
		text-indent: -999em;
	}

	/** Page bar **/	
	.pageBar { background-image: url(gfx/SAD/Background/bgPageBar.png); }
	.pageBar .inactive { color: #999; }
	.pageBar strong	{ color: #000; }
	.pageBar a:hover, .pageBar a:active { border-color: #e5e79e; background-color: #fff; }
	
/* 	#####################
	######  UCP  ########
	#####################
*/
	#ucpTabBox li a:hover 	{ background: #fff9da; }
	#ucpTabBox li span 		{ background-image: url(gfx/SAD/Background/bgBlueDotHorizontal.png); }
	.sbNav span 			{ background-image: url(gfx/SAD/Background/bgBlueDotHorizontal.png); }
	
/* 	####################################
	######  Search  ####################
	####################################
*/	
	#search .result { background-image: url(gfx/SAD/Background/bgOrangeDotHorizontal.png); }
	
	/** Tag Clouds **/
	#tagCloud a 		 { color: #666; }
	#tagCloud a.cloud_0, #tagCloud a.cloud_1, #tagCloud a.cloud_2, #tagCloud a.cloud_3, #tagCloud a.cloud_4,
	#tagCloud a.cloud_5, #tagCloud a.cloud_6, #tagCloud a.cloud_7, #tagCloud a.cloud_8, #tagCloud a.cloud_9 { color: #999; }
	#tagCloud a.cloud_26, #tagCloud a.cloud_27, #tagCloud a.cloud_28, #tagCloud a.cloud_29, #tagCloud a.cloud_30 { color: #0489B7; }
 	#tagCloud a:hover 	 { background-color: #0086c6; color: #fff; }
	
/* 	###################################
	######  Newsletter  ###############
	###################################
*/		
	#newsletter .newslBox .sbBox { border-right-color: #f1f1f1; }
	#newsletter .leftInfo		 { border-right-color: #ccc;  }
	#newsletter .rightInfo 		 { background-color: white; }
	
/* ########################################
 	###### HIDING ELEMENTS ################
	#######################################
*/
	#siteSwitch a.sad-link, .ph { display: none; }
	
	/*** Head.css ***/ 
	#wrapLogo h1 a { background: url(gfx/SAD/Background/bgLogo.png) top left no-repeat; }

	.wrapHead { background: url(gfx/SAD/Background/bgCartHead.png) bottom right no-repeat; }
	.wrapBox { border-bottom-color: #026cb3; }	
	
	/*** Index.css ***/ 
	#homeTop .infos { background: #eaf8ff url(gfx/SAD/Background/bgIndexTop.png) top left repeat-x; }