@import url("zoom.css"); 
@import url("topnavigation.css"); 
a, abbr, address, article, aside, audio, b, blockquote, body, button, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav,  object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1em;
	font-weight: inherit;
	font-style: inherit;
	vertical-align: baseline;
	text-indent: 0;
}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }
a{ text-decoration: none; }
a:focus{ overflow: hidden; }
ul, ol { list-style: none; }
table { border-spacing: 0; border-collapse: collapse; }
caption, th { text-align: left; }

body { font-size: 75%;line-height: 137%; }
html>body { font-size: 12px; }

body,h1,h2,h3,h4,h5,h6,input,select,textarea,button{font-family: Arial,Helvetica,sans-serif;}
p{padding: 1px 3px;}
img{vertical-align: middle;}

/* basics */
body{color: #888888;}
.left{float: left;}
.right{float: right}
.cl{clear: both;}
.include, .hide{display: none;}
a{color: #888888; color: inherit;}

/* -- reset --*/
.summary a, .summary a:hover, .description a, .description a:hover{text-decoration: none; border-bottom: 1px dashed;}
.summary a:hover, .description a:hover { border-bottom: 1px solid;}

/* -- basic layout -- */

html, body{
	position: relative;
	width: 100%;
	height: 100%;
}
body {
	text-align: center;
}
#wrapper {
	position: relative;
	width:980px;
	min-height:300px;
	margin: 0 auto;
	text-align: left;
	z-index: 2;
	overflow: auto;
}
#footer{
	clear: both;
}
#wrapper{
	padding-bottom: 20px;
}
/* -- header -- */
#header{
	height: 140px;
	margin-bottom: 10px;
	position: relative;
	color: #222222;
	font-size: 0.9em;
}
#logo{
	position: absolute;
	display: block;
	left:15px;
	top:0;
	width:100px;
	height:92px;
	background: url('bonprix_logo.gif') no-repeat 50% 0;
}
.menu{
	position:relative;
	top:81px;
	float: right;
	color: #ffffff;
}
.menu li{
	float: left;
	margin-left: 1px;
}
.menu a{
	padding:5px 20px;
	background: #C3C3C3;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	-khtml-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
	border: 1px solid #C3C3C3;
	color: #ffffff;
	font-weight: bold;
	text-transform: uppercase;
}
.menu a.red {
	background: #DA002F;
	border-color: #DA002F;
}
#headerLinks{
	position: absolute;
	top: 10px;
	right: 0;
}
#headerLinks li{
	float: left;
}
#headerLinks a{
	background: url("points.gif") no-repeat 100% -3px;
	padding-right: 10px;
	margin: 5px 10px 0 0;
	display: block;
}
#headerLinks a.last{ background: transparent;}
#headerLinks a.kosik{
	background: url("header_cart_info_icon.gif") no-repeat 0 0;
	font-weight: bold;
	margin-left: 14px;
	padding-left: 23px;
	margin-left: 170px;
}
.greetings_container{
	position: absolute;
	top: 12px;
	left: 130px;
	overflow: hidden;
	width: 182px;
}
.greetings_container a{
	text-decoration: underline
}
.submenu{
	position:relative;
	top:104px;
}
.submenu #navigation_bar_container{
	height: 36px;
}
#search{
	position: absolute;
	right: 0;
	top: 50px;
	background: #D7D7D7;
	padding: 5px;
}
#search .text{
	border: 0 none;
	background: #ffffff;
	color: #666666;
	cursor: text;
	height: 25px;
	line-height: 25px;
	padding-left: 10px;
	width: 300px;
}
#search button{
	background: #7B7B7B url('search.gif') no-repeat 7px 50%;
	-moz-border-radius: 15px;
	border-radius: 15px;
	border: 1px solid #7B7B7B;
	padding: 0 5px 0 20px;
	color: #ffffff;
	font-weight: bold;
	margin-left: 5px;
	font-size: 1.3em;
}
#search button:hover{
	background-color: #5A5A5A;
	border-color: #5A5A5A;
}

/* -- main -- */
/* -- footer -- */
#footer {
	font-size: 0.9em;
}

.banners{
	overflow: auto;
	margin: 5px 0;
}
.banners img{
	margin-bottom: 5px;
}
#footable{
	background-color:white;
	border:1px solid #D2D2D2;
	border-collapse:collapse;
	border-spacing:0;
	margin-bottom:5px;
	position:relative;
	width:980px;
	font-family: Verdana,Helvetica,sans-serif;
	font-size: 10px;
	line-height: 17px;
}
#footable td{
	border:1px solid #D2D2D2;
	padding:10px 0 10px 15px;
	text-align:left;
	vertical-align:top;
}
#footable, #footable a{
	color: #000000;
}
#footable #news_text{
	margin-left: 70px;
}
#footable #news_text strong {
	font-size:12px;
	font-weight:normal;
	text-transform:uppercase;
}
#footable #news_links{
	border-right-color: #FFFFFF !important;
}
#footable #news_rechts{
	border-left-color: transparent !important;
	padding:9px 0;
	text-align:center;
}
#footable .katalog #katalogText a{
	text-decoration:none;
}
#footable .service a, #footable .katalog a{
	color:#676767;
	display:inline;
	font-weight:normal;
	text-decoration:underline;
}
#footable .hackenliste li{
	background: url("hacken.gif") no-repeat 0 100%;
	padding-left: 20px;
}
#footable #news .text{
	color: #888888;
	display: inline;
	float: left;
	font-size: 11px !important;
	height: 14px;
	width: 85%;
}
#footable .col{
	float: left;
	overflow: visible;
}
#katalogBild {
	border: medium none;
	display: block;
	width: 50px;
}
#news_img{
	margin-top:-8px;
	position:absolute;
}

.copy{
	clear: both;
	float: right;
}
/*-e404-*/
#info{
	padding:40px;
	text-align: center;
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.5;
}
#info a{ border-bottom: 1px dotted #000000; }

/**/

#ifr{
	width: 1px;
	height: 1px;
	visibility: hidden;
}
/*-- multi --*/
#p_headline{
	font-size:1.4em;
	font-weight:bold;
	line-height:1.2;
}
#p_welcome{
	position: relative;
}
#p_welcome.index{
	min-height: 75px;
}
#p_welcome p{}
#p_welcome h3{
	font-weight: bold;
	font-size: 1.2em;
}
#p_image{
	text-align: center;
}
.go{
	background: #ffffff url("arrows.gif") no-repeat -105px -6px;
	width:80px;
	line-height:20px;
	font-weight: bold;
	padding-left: 18px;
	margin:5px;
	text-decoration: underline;
	float: right;
}
.price{
	font-size: 1.4em;
	font-weight: bold;
	margin: 5px;
}
.price .prefix{
	margin-right: 5px;
	font-weight: normal;
	font-size: 0.8em;
}
.price .suffix{ margin-left: 5px}
.price.old{
	color: #000000;
	text-decoration: line-through;
}
.zoom{
	line-height:20px;
	margin-bottom: 5px;
	padding-left: 20px;
	min-width:100px;
	background: url("zoom.gif") no-repeat 0 0;
	cursor: pointer;
}
/* bestsellers */

.p40{
	overflow:auto;
	clear: both;
	padding: 2px 20px
}
.p40 li{   
	float: left;
	margin:0 20px;
	width:116px;
	position: relative;
}
.p40 .fn{
	position: absolute;
	top: 170px;
}
.p40 .image{
	display: block;
	width: 114px;
	height: 160px;
	padding-bottom: 45px;
}
.p40 .photo{
	max-width: 114px;
	max-height: 160px;
	border: 1px solid #C3C3C3;
}
.p40 .photo:hover{
	border: 1px solid #F96B00;
}
.p40 .summary{
	display: none;
}
.p40 .price{
	margin-top: 3px;
	display: block;
}
.p40 .old{
	font-size:1.1em;
	margin-top:0;
	padding-left:18px;
}
.p40 .old + .price{
	margin-top: 0;
}
/* -- rank / full -- */

.rank, .full{
}
.rank li, .full li{display: -moz-inline-stack; display: inline-block; vertical-align: top;}
.rank li{
	display: expression(/rank/.test(this.parentNode.className)? "inline" : "list-item");
	zoom: 1;
}
.full li{
	display: expression(/full/.test(this.parentNode.className)? "inline" : "list-item");
	zoom: 1;
}
.rank > li, .full > li{
	width:100%;
	margin-bottom: 5px;
}
.rank ul > li, .full ul > li{
	width: 31%;
	padding: 2px 1% 5px;
}
.rank .fancy > a, .full .fancy > a{
	position: absolute;
	display: block;
	width: 100%;
	height: 64px;
	z-index: 3;
}
.rank .fancy img, .full .fancy img{}
.rank .fancy, .full .fancy{}
.rank  h2, .full h2, .full .h2{
	font-size:1.5em;
	font-weight:bold;
	line-height:26px;
	background: #C3C3C3;
	color: #ffffff;
	padding: 0 5px;
}
.rank  h2:first-letter , .full h2:first-letter , .full .h2:first-letter, #p_headline:first-letter {
	text-transform: uppercase;
}
.rank .fancy h2{
	float: right;
	width: 280px;
	padding: 0 5px;
	margin-top: -26px;
	z-index: 1;
	position: relative;
}
.rank  .fn, .full .fn{
	font-weight: bold;
}
#full {}
#full h1{
	font-size: 1.2em;
	font-weight: bold;
}
#full ul{
	overflow:auto;
	padding: 10px 0;
}
#full li{ float: left; margin-left: 10px;}
#full li a{border-right: 1px solid; padding-right: 10px;}
#full li.last a{border: 0 none;}
/* -- prod --*/
.hproduct{
	overflow:auto;
	width: 63%;
	float: left;
	margin-bottom:20px;
}
.hproduct .title, .rp h1{
	font-size: 1.5em;
	margin: 10px;
}
.rp .hproduct .fn{
	margin-left: 250px;
	margin-bottom: 5px;
}
.hproduct .fn{
	display: block;
	font-weight: bold;
	font-size: 1.1em;
	margin-bottom: 10px;
}
.hproduct .image{
	width: 250px;
	float: left;
}
.rp .hproduct .image{
	margin-top: -20px;
}
.hproduct .photo{
	max-width: 250px;
	margin-bottom:5px;
}
.hproduct .zoom{}
.hproduct .zoom span{
	padding-left: 18px;
	background: url("arrows.gif") no-repeat -104px -16px;
	text-decoration: underline;
}
.hproduct .description{
	margin-bottom:20px;
}
.hproduct .price{
	margin: 0 0 0 270px;
	text-align: right;
}
.hproduct .go{
	background: url("go.gif") no-repeat 50% 50%;
	width: 170px;
	height: 36px;
	line-height: 36px;
	font-size: 1.2em;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	padding: 0;
}
.hproduct .go.inactive{
	width: auto;
	height: auto;
	background:transparent;
	color: #888888;
}


/* -- scrollable -- */

/* -- slider -- */
.pp{position: relative; padding-top: 30px;}
.pp #slider{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
#slider{
	height: 30px;
}
#slider .previous{
	float: left;
	padding-left: 26px;
	background: url("arrows_v.gif") no-repeat 0 -71px;
}
#slider .next{
	float: right;
	padding-right: 26px;
	background: url("arrows_v.gif") no-repeat 100% -39px;
}
#slider a{
	text-decoration: underline;
}

/* -- list 1 -- */
.l1{clear:both;}
.l1 dt{
	margin: 10px;
}
.l1 dt span{ font-weight: bold; }
.l1 dt a{ text-decoration: underline; }
.l1  > dd {display: -moz-inline-stack; display: inline-block; vertical-align: top;}
.l1 dd{
	display: expression(/l1/.test(this.parentNode.className)? "inline" : "list-item");
	zoom: 1;
}
.l1 dd{
	width: 31%;
	margin: 0 1% 20px;
	position: relative;
}
.l1 .fn{
	font-weight: bold;
	margin-left: 126px;
	margin-bottom: 5px;
}
.l1 .image{
	float: left;
	border: 1px solid #C3C3C3;
	margin-right: 10px;
	margin-top:-20px;
}
.l1 .image:hover{
	border: 1px solid #F96B00;
}
.l1 .photo{}
.l1 .summary{
	margin-bottom:10px;
}
.l1 .price{
	float: left;
	font-size: 1.1em;
}
.l1 .old{ font-size:1em; }
/* -- list 2 -- */

.l2{
	height: auto;
}
.l2.short{
	height:110px;
	overflow: hidden;
	position: relative;
	clear: both;
}
.scroller .l2.short{ position: absolute; }
.l2 li{
	width: 31%;
	height:100px;
	float: left;
	margin: 5px 1%;
}
.l2 .fn{
	font-weight: bold;
}
.l2 .summary{}


/*-- short -- */

.shortme{min-height: 160px;}
#p_welcome.shortme{min-height: 50px;}
.shortened { overflow: hidden;}
.shortened.short {height: 160px;}
#p_welcome.shortened.short {height: 50px;}
.shortened .spacer{float: right; width: 1px; height: 120px;}
#p_welcome.shortened .spacer{height: 20px;}
.shrt_btn{
	background: url("arrows_v.gif") no-repeat -6px 100%;
	height:20px;
	text-indent: 0;
	font-weight: bold;
	padding:6px 6px 6px 18px;
	text-decoration: underline !important;
	float: right;
	clear: right;
	cursor:pointer;
}
.short.shrt_btn, .short .shrt_btn{
	background-position: -6px -32px;
}

/* -- scroll -- */
.scrollable, .scrollable ul{ display: none; clear: both;}
.scrollable.related, .scrollable.bestsellers{
	width: 36%;
	float: right;
	clear: none !important;
	display: block; margin-bottom:10px;
	border: 1px solid #C3C3C3;
	border-top-width: 4px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
}
.scrollable.related ul, .scrollable.bestsellers ul{display: block;}
.ban {
	overflow: hidden;
}
.ban .banner{
	display: block;
	margin-top: 33px;
}
.ban .scrollable.related, .ban .scrollable.bestsellers{
	float:left;
}
.bestsellers dt, .related dt{
	font-weight: bold;
	padding: 10px;
	background: #C3C3C3;
	color: #ffffff;
}
.scroller{
	overflow: hidden;
	position: relative;
	margin-bottom: 10px;
}
.scroller.vertical{
	clear: both;
	height:100px;
	padding: 5px;
	overflow: hidden;
	margin: 5px 0;
}
.sclr-btn{
	display: block;
	width: 29px;
	height: 100%;
	background: #ffffff url("scroll.gif") no-repeat 100% 50%;
	background-color: rgba(255,255,255,0.9);
	position: absolute;
	cursor:pointer;
	z-index: 2;
	border: 1px solid #ffffff;
}
.scroll-left{
	left: 0;
	background-position: 0 50% ;
}
.scroll-right{ right: 0;}
.vertical .sclr-btn{
	width: 32px;
	height: 32px;
	background: url("arrows.gif") no-repeat -32px 0;
	top: auto;
	margin: 0;
}
.vertical .scroll-top{
	top: 0;
	right: 1px;
}
.vertical .scroll-bottom{
	bottom: 0;
	right: 1px;
	background-position: -64px 0;
}


.scroller .disabled{
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	opacity:0.5;
}

/* pages */

.pages{}
.pages a{}
.pages a span{ display: none; }
.pages a.next, .pages a.prev{ position: relative; background: url("arrows.gif") no-repeat 36px -21px}
.pages a.next{background-position: 100% -1px; padding-right: 12px}
.pages a.prev{ padding-left: 50px;}
.pages a.prev:hover{background-position: 0 -21px;  padding-left: 12px;}
.pages a.next:hover span, .pages a.prev:hover span{
	display: inline;
}
.pages .current{ font-weight: bold;}