/* DENIM FIT GUIDE */
/* 
	---- !!!!! DIE FARBEN DER ELEMENTE FÜR DEN DENIM FIT GUIDE WERDEN IM CMS DEFINIERT. 
	     DIE CSS DEKLARATIONEN BEFINDEN SICH IN DER KOMPONENTE header_denimguide !!!!! ----
*/	     
.denimguide-head {
	margin: 22px 0 0 12px;
	float: left;
	}
	* html .denimguide-head {
		position: relative;
		left: -3px;
		}
#content_spalte_denimguide .denimguide-head {
	margin-left: 0;
	position: relative;
	margin-bottom: 40px;
	}
	#content_spalte_denimguide .denimguide-head a.teaser-denimguide {
		position: absolute;
		left: 654px;
		top: 0;
		}	
	* html 	#content_spalte_denimguide .denimguide-head a.teaser-denimguide {
		position: absolute;
		left: 652px;
		top: 0;
		}	
	.denimguide-head img {
		float: left;
		border-right: none;	
		zoom: 1;	
		margin: 0;
		padding:0;
		border: 2px solid #313c4f;
		border-right: 1px solid #313c4f;
		}
		* html.denimguide-head img {
			position: relative;
			left: -2px;
			}
			
#denimguide_home_keyvisual {
	width: 652px;
	height: 400px;
	float: left;
	margin-top: 24px;
	position: relative;
	}
	* html #denimguide_home_keyvisual {
		width: 654px;
		}
		
	#denimguide_home_keyvisual h1,
	#denimguide_home_keyvisual h2,
	#denimguide_home_keyvisual p {
		display: none;
		}
	
	#denimguide_home_links {
		float: right;
		margin: 267px 30px 0 0;
		}	
	#denimguide_home_links a.contentlink {
		display: block;
		width: 265px;
		height: 21px;
		margin-top: 8px;
		}	
		#denimguide_home_links a.contentlink img,
		#denimguide_home_links a.contentlink span {
			display: none;
			}
		#denimguide_home_links a.contentlink:hover img {
			position: absolute;
			display: block;
			top: 254px;
			left: 30px;
			z-index: 5;
			}
			

		.denim_2010 #denimguide_home_links {
			margin-top:252px;
		}
			
		.denim_2010 #denimguide_home_links a.contentlink {
			width:267px;
			height:64px;
			margin-top:0;
			margin-bottom:-3px;
			text-indent:-9999em;
			cursor:pointer;
		}
		
			
	#denimguide_home_right {
		margin-top: 24px;
		}
	#denimguide_home_teaser {
		position: absolute;
		top: 256px;
		left: 30px;
		}
	#denimguide_home_teaser a.teaserlink {
		display: block;
		width: 108px;
		height: 108px;
		float: left;
		margin-right: 20px;
		position: relative;
		z-index: 2;
		}	
		
		#denimguide_home_teaser a.teaserlink span,
		#denimguide_home_teaser a.teaserlink img {
			display: none;
			position: absolute;
			z-index: 999;
			width: 210px;
			height: 210px;
			left: 40px;
			top: -90px;
			}
		#denimguide_home_teaser a.teaserlink:hover  {
			background-color: transparent;
			}
			* html #denimguide_home_teaser a.teaserlink:hover {
				text-decoration: none;
				}
			
			
			
#content_spalte_denimguide {
	float: left;
	min-height: 256px;
	margin-left: 12px;
	width: 827px;
	}	
	* html 	#content_spalte_denimguide {
		height: 256px;
		}
a.teaser-denimguide {
	display: block;
	width: 170px;
	height: 200px;
	text-decoration: none;
	float: left;		
	margin: 0;
	padding:0;
	
	border: 2px solid #313c4f;
	border-left: 1px solid #313c4f;
	}
	* html a.teaser-denimguide {
		width: 173px;
		height: 204px;	
		zoom: 1;
		position: relative;
		left: -4px;	
		}
			
			
	#denimguide_home_right a.teaser-denimguide {
		height: 199px;
		}
	* html #denimguide_home_right a.teaser-denimguide {
		height: 200px;
		left: 0;
		}		
	a.teaser-denimguide h4,
	a.teaser-denimguide p {
		display: none;
		}
		
 /*.content_denimguide_images {
 	float: right;
 	width: 442px;
 	position: relative;
 	margin-top: 50px;
 	}
 	.content_denimguide_images img {
 	 	float: right;
 	 	margin-left: 8px;
 	 	}
 	.styling img {
 		float: left;
 		} 	*/
 	 	
 .content_denimguide_inner {
 	float: left;
 	width: 819px;
 	display: inline;
 	margin: 20px 4px 0 4px;
 	}	
 .content_denimguide_content_inner {
 	float: left;
 	width: 336px;
 	display: inline;
 	margin: 16px 0 10px 4px;
 	}
 	.content_denimguide_content_inner h1,
	.content_denimguide_inner h2 {
 		text-transform: uppercase;
 		font-weight: bold;
 		font-size: 14px;
 		padding-bottom: 4px;
 		margin-left: 0;
 		padding-left: 0;
 		}
	.content_denimguide_content_inner h1.passform,
	.content_denimguide_inner h3,
	.content_denimguide_inner h3 span {
 		text-transform: uppercase;
 		font-weight: bold;
 		font-size: 20px;
		padding-bottom: 4px;
 		margin-left: 0;
 		padding-left: 0;
 		}
 	.content_denimguide_content_inner p {
 		margin-top: 10px;
 		} 
			
.content_denimguide_outfits {
	width: 255px;
	float: left;
	display: inline;
	position: relative;
	}
	.denim-abstand {
		margin: 0 0 0 27px;
		}

.content_denimguide_outfits img {
	margin-top: 10px;
	margin-bottom: 10px;
	}
	
.content_denimguide_outfits p,
.content_denimguide_outfits p strong {
	color: #454546 !important;
	}

/* layer für denimguide outfit */	
	.denim_outfitLayer {
		position: absolute !important;
		height: 401px !important;
		width: 301px !important;
		border: 1px solid #373737;
		}
	.denim_passformLayer {
		height: 301px !important;
		width: 500px !important;
		position: absolute !important;
		border: 1px solid #373737;
		}
		a.closelink,
		a.closelink:hover,
		a.closelink:visited {
			float: right !important;
			display: block !important;
			/*width: 20px !important;
			height: 20px !important;*/
			padding: 5px !important;
			text-decoration: none !important;
			/*font-weight: bold !important;*/
			}	
			
		a.closelink span {
			display: none !important;
			}

/****** aufzählung der artikel unter den denim outfits ******/															
.content_denimguide_articles {
	clear: both; 
 	margin: 0 0 0 0;
	}
	* html .content_denimguide_articles {
		margin-top: 0;
		}
	.denimguide_article {
 		width: 255px;
 		float: left;
 		margin-bottom: 10px;
		/*padding-left: 58px;*/
 		}		
 	.denimguide_article h3 {
 		/*width: 207px;*/
 		font-size: 11px;
 		font-weight: bold;
 		margin-bottom: 3px;
 		}
	.denimguide_article h4 {
 		/*width: 207px;*/
 		font-size: 11px;
		color:#787878;
 		font-weight: bold;
 		margin-bottom: 5px;
 		}	
 	.denimguide_article p {
 		/*margin-right: 20px;*/
 		line-height: 15px;
 		margin-bottom: 4px;
 		} 
 	.denimguide_article p span {
 		line-height: 20px !important;
 		}  		
 	.denimguide_article a {
		display: block;
		font-size: 10px;
		line-height:16px;
		/*margin: 3px 10px 0 0;*/
 		}
		
		
		
		
.content_denimguide_inner_full {
	margin-top:20px;
}
		
#typeListing {
	list-style:none;
	margin-bottom:20px;
	}
	#typeListing li {
		float:left;
		margin:0 23px 20px 0;
		}
		#typeListing li.noMargin {
			margin-right:0;
		}
		#typeListing h2 {
			font-size:24px;
			font-weight:bold;
			color:#283b60;
			letter-spacing:-1px;
			}
			#typeListing li span {
				font-size:18px;
			}
		.cufon-active #typeListing h2 {
			font-size:32px;
			text-transform:uppercase;
			letter-spacing:0;
			}
			.cufon-active #typeListing h2 span {
				font-size:20px;
			}
			
		#typeListing li img {
			border:1px solid #7c8588;
		}
		
		
		
.articleSliderHead {
	color:#283b60;
	margin-bottom:5px;
	padding-left:2px;
}
.articleSliderWrap {
	border:1px solid #99bfd8;
	border-width:1px 0;
}
.articleSlider {
	float:left;
	position:relative;
	overflow:hidden;
	width: 753px;
	height:124px;
	}
	.articleSlider .items {
		/* this cannot be too large */
		width:20000em;
		position:absolute;
		
		list-style:none;
	}
	.articleSlider .items li {
		padding:8px 0 8px 8px;
		float:left;
		width:243px;
		border-right:1px solid #caddeb;
		background:#fbfcfe;
		}
		* html .articleSlider .items li {
			width:252px;
		}
		
		.articleSlider .items li a {
			color:#283b60;
			}
		.articleSlider .items li img,
		.articleSlider .items li .articleName {
			float:left;
		}
		.articleSlider .items li img {
			border:1px solid #c6d2d9;
			overflow:hidden;
		}
		
		.articleSlider .items li .articleName {
			padding-left:7px;
			width:140px;
			text-decoration:underline;
			line-height:16px;
		}
		.articleSlider .items li .fitTypeInfo {
			clear:left;
			color:#283b60;
			line-height:16px;
			padding-top:5px;
			}
			* html .articleSlider .items li .fitTypeInfo { padding-top:0; }
			* + html .articleSlider .items li .fitTypeInfo { padding-top:0; }
			
			#typeListing li h2 span.stretch,
			.articleSlider .fitTypeInfo span.stretch {
				color:#ee7100;
			}
		
/* buttons */
.articleSliderWrap .next,
.articleSliderWrap .prev {
	float:left;
	border:1px solid #99bfd8;
	border-width:0 1px;
	height:124px;
	width:35px;
	cursor:pointer;
	
	text-indent:-9999em;
	background:url(../images/arrows_articleSlider.gif) no-repeat #e0ecf3;
	}
	
	.articleSliderWrap .prev {
		background-position:-33px center;
		}
		.articleSliderWrap .prev:hover {
			background-color:#e7f0f4;
			background-position:17px center;
		}
	.articleSliderWrap .next {
		background-position:-133px center;
		float:right;
		}
		.articleSliderWrap .next:hover {
			background-color:#e7f0f4;
			background-position:-83px center;
		}
	
	
/* no js styles */
.nojs .articleSliderWrap {
	border:0;
}
.nojs .articleSliderWrap .next,
.nojs .articleSliderWrap .prev {
	display:none;
}
.js .articleSliderWrap .next,
.js .articleSliderWrap .prev {
	display:block;
}
.nojs .articleSlider {
	width:827px;
	height:auto;
	overflow:visible;
	}
	.nojs .articleSlider .items {
		width:100%;
		position:static;
	}
	.nojs .articleSlider .items li {
		border:1px solid #caddeb;
		margin:0 20px 20px 0;
	}