@charset "UTF-8";
/* created december 09
design with darkblue header, comes with add7.css for rounded corners and add7nobg.css for a different background and no corners

 */

body  {
	 font-family:  "HelveticaNeue-Light", "Helvetica Neue Light","Helvetica Neue", Helvetica, 'Lucida Grande','Lucida Sans',  Verdana, Arial, sans-serif;
	 font-weight: 300;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #9ea4b0; /* very light gray-blue*/
	color:#8a91a1;
	color:#51626f;
	font-size: 12px;
}
.twoColFixLtHdr #container {
	width: 830px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	/*border: 1px solid #000000;*/
	text-align: left; /* this overrides the text-align: center on the body element. */
	text-align: justify;
} 
.twoColFixLtHdr #header {
	background: #10244b;
	padding: 0 14px 0 14px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	height: 88px;
	/*
	background-image: url(img/logo.jpg);
	background-repeat: no-repeat;
	*/
} 
.twoColFixLtHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.twoColFixLtHdr #sidebar1 {
	float: left; /* since this element is floated, a width must be given */
	width:170px;  /* grows to 180 due to the 10px from the right padding! */
	margin:0px 0 0 0px;
	padding:22px 0px 20px 10px;/* zuvor: 20er höhe und 10er breite links */

	/*background-color: lightgray;*/
}
.twoColFixLtHdr #mainContent { 
	margin: 0 0 0 190px; /* starts 10px after the end of sidebar1 */
	padding: 20px 0px 0px 0px; /* top should be 20, but 14 looks more symmetric to the left menue */
	line-height:18px;
	letter-spacing: 1px; 	
	/*background-color: lightgray;*/
	
} 
.twoColFixLtHdr #footer { 
	padding: 0 0px 0 0px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	/*background:#10244b; */
} 
.twoColFixLtHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
	
	/*background:#10244b; 
	color:white;*/
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

/*  MENUES  */
/* =======*/

#header_menues /* contains menue1 & menue2 */
{
	padding-top: 5px;
	text-align:right; 
	color:white;	
	
}

#menue1, #menue1 a   /* topmenue small, contains the divs langselect & menue1_div */
{
	text-align: right;
	font-size:10px;
	text-decoration:none;
	display: inline;
	text-transform: lowercase;
	color:white;	
}

#menue2 /*topmenue big*/
{
		text-align:right;
		padding:0px; margin:0px;
		padding-top: 8px;
		padding-top: 0px;
		font-size:12px;
		text-transform:uppercase;
}

#menue2 li, #menue2 a
{
	display: inline;
	color:#FFF;
	list-style-position:inside;
	list-style-type:none;
	/*padding-left:20px;
	vertical-align:bottom;
	*/
	margin-left:20px;
	text-decoration:none;
}

#menue2 li:hover
{
	color:#9ea4b0;
	cursor:pointer;
	text-decoration:none; 
}

#menue2 a:hover, #menue1 a:hover, #menue1 li:hover
{
	color:#9ea4b0;
	text-decoration:none;

}

#menue2active, #sidebar1active
{
	font-weight:bold;
}

ul /*ul´s are always inlines*/
{
	list-style-position:inside;
	list-style-type:none;
	padding: 0px;
	margin:0px;
}

#sidebar1 li, #navigation li
{
	padding:0 0 12px 0; 
	margin:0px;
	font-size:10px;
	text-transform:uppercase;
	cursor:pointer;
	
}

#sidebar1 li:hover
{
	/*color: #10244b;*/ /*formerly used dark blue*/
	/*color:#9ea4b0;*/
	
	
	background:url(img/sidebar_bg_short.jpg);
	background-repeat:no-repeat;
	
	cursor:auto;
}

#sidebar1 li.long:hover
{
	/*color: #10244b;*/ /*formerly used dark blue*/
	/*color:#9ea4b0;*/
	
	background:url(img/sidebar_bg_long.jpg);
	background-repeat:no-repeat;
}


#sidebar1 li.vshort:hover
{
	/*color: #10244b;*/ /*formerly used dark blue*/
	/*color:#9ea4b0;*/
	
	background:url(img/sidebar_bg_veryshort.jpg);
	background-repeat:no-repeat;
}

#sidebar1 a
{
	text-decoration:none;
	display:block;
}

#sidebar1 a:hover
{
	color:#51626f;
	/*border-bottom: 1px dotted;*/
	/*background:url(img/sidebar_bg1.jpg);
	background-repeat:no-repeat;
	*/
}




/*  h1-h6  */
/* =======*/
h1,h2,h3,h4
{
	font-family:  "HelveticaNeue-Ultralight", "HelveticaNeue-Light", "Helvetica Neue Light","Helvetica Neue",  Helvetica, 'Lucida Grande','Lucida Sans', Verdana, Arial, sans-serif; 
	font-weight:100; 
	margin:0px;
	padding:0px;
}

h1
{
	font-size: 32px;
	/*text-transform:uppercase;*/
	text-transform:lowercase;
	padding-bottom:10px;
}


#teaser /* for headlines which are over a teaser picture */
{
	margin: 0 0 0 0;
	padding: 10px 0 0 10px;
	height: 190px;
	background-repeat: no-repeat;  
	display: block;
}

#iteaser /* newsletter & index pages */
{
	margin: 0 0 0 0;
	padding: 0px 0 0 0;
	background-repeat: no-repeat;  
	height:400px;
	width:640px;
	display:block;
}

td.iteaserBox
{
	padding-top: 3px;
	width: 33%;
	font-size: 9px;
	text-align:center;
	cursor:auto;
	height: 150px;
	vertical-align: top;
	padding-bottom: 0px; margin-bottom: 0px;
}

td.iteaserBox a
{
	text-decoration:none;
}

h2 /*topheadlines which are not the title*/
{
/*
	font-size:24px;
	text-transform:uppercase;
	*/
	font-size:18px;
	font-weight:bold;
	font-weight:300;
	padding-bottom:20px;
	padding-top:12px;
	font-weight: 100;
}

h2.style
{
	font-size: 24px;
	padding-top: 10px;
	padding-bottom: 8px;
}

/*not used*/
h2.designer{
	font-size:24px;
	padding-bottom:5px;
	padding-top:3px;
	margin:0px;
	font-weight: bold;
	text-transform:lowercase;
}

.lowerc
{
	text-transform:lowercase;
}

h2 a {text-decoration: none;}
h2 a:hover {text-decoration: none;}

h3 /* used for headlines in the text and in tables*/
{
	font-size:18px;
	padding-bottom:3px;
	padding-top:5px;
	text-transform:lowercase;
	/*padding-top:22px;
	*/
}

h4 /*used for centered headlines like for New Products, it´s like a centered h3*/
{
	text-align: center;
    margin:0px;
	text-transform:lowercase;
	font-size:18px;
	padding:18px 0 0 0 ; 
}

#sidebar1 h3 /*sidebar headlines*/
{

	padding:0 0 12px 0; 
	margin:0px;
	text-transform:uppercase;
	font-weight:bold;
	font-size:12px;
	/*font-weight:bold;
	*//*padding-top:22px;
	*/
}

th /* used for headlines in tables*/
{
	font-size:12px;
	font-weight:bold;
	padding-bottom:2px;
}

p
{
	line-height:18px;
	letter-spacing: 1px;
	margin-right: 14px;
	margin-right: 0px;
	/*font-weight:300;*/
}

hr
{	
	display:block; margin:0; padding:0;
	border: none 0;  border-top: 1px solid #d6dae7; color:#d6dae7; height: 1px; width:100%;
}


#footer p, small, .inputRequirement
{
	text-align:center; font-size:9px;
	font-weight: 300;
	font-family:  "Helvetica Neue", Helvetica,  'Lucida Grande','Lucida Sans', Verdana, Arial, sans-serif; 
	line-height:normal;
	}

#footer_logos
{
	background: url(img/footer_logos.jpg);
	background-repeat: no-repeat;
	width: 267px;
	height: 64px;
	padding: 0px; margin: 0px;
	padding-bottom: 7px;
}
	
/* PRODUCT LIST VIEW */
/* ============== */
div.productlist
{
	width:100%;
	display:block;
}

ulpl
{
	float:left;
}


li.pl /* product list item */
{
	padding:0; margin:0;
	color:black;
	list-style-position:inside;
	list-style-type:none;
	 /*total width of content area is 640, so it´s  (150+10)x4 
	 where 10 is the sum of the paddings left & right */
	float:left;
	text-align:center;
	cursor:auto;
padding: 0px; margin:0px;
	/* new for img which are 169px wide, 3 a row */
	/*width: 169px;
	margin: 10px 22px 22px 22px;
	wurde geändert um mehr text anzeigen zu können, der linke bildrand wird nun 
	*/
	height: 188px; /* very important to keep row effect in IE */
	
	/*kästen jetzt breiter um mehr text anzeigen zu können*/
	width:179px;
	margin:10px 17px 22px 17px; /* 177 instead of 169 width */
}

/*
li.pl img{ border:0px;position:absolute; bottom: 0px; left: 5px; }
li.pl:hover{ opacity: 0.60;-moz-opacity:0.6; -khtml-opacity:0.6; filter:alpha(opacity=60); }
*/
.pimg /*div around product image in list view*/
{
	width: auto;
	width: 179px;
	height: 130px;
 	position: relative;
 	text-align: center;
 	cursor: pointer;
 	z-index: 1;
	margin: 0 auto;
	/*
	margin: 0;padding: 0;
	border: 1px solid black;*/

}

li.pl span
{
	margin-top: 5px;
	display:block;
	position:relative;
}

li.pl a
{
	text-decoration:none;
}

li.pl a:hover
{
	
}

/* !Product LI Table Items */
table.plta
{
	width: 100%;
}

td.pli /* the image */
{
	vertical-align: bottom;
	height: 130px;
	text-align: center;
}

div.sale2  /* for new table li */
{
z-index: 5;
position: inherit;
position: absolute;
margin-left: 120px;
margin-top: 100px;
width:32px;
height: 32px;
background-image: url(img/sale10.png);
		background-repeat: none;	
}

td.plt /* info text */
{
	padding-top: 5px;
	text-align: center;
}

/* STYLE LIST VIEW */
/* ============ */
li.style /* product list item */
{
	padding:0; margin:0;
	list-style-position:inside;
	list-style-type:none;
	float:left;
	text-align:left; 
	cursor:auto;
	padding: 0px; margin:0px;
	height: 300px; /* very important to keep row effect in IE */
	width:300px;
	/*margin:10px 17px 22px 17px;*/
	/*border: #f0f1f5 1px solid;
	padding:9px;*/
	margin-bottom: 25px;
	margin-top: 5px;
}


/* PRODUCT DETAIL VIEW */
/* ============== */

div.productblock /* contains productpicture & producttext */
{
	background-color: silver;
	display: block;	
}

div.productpicture
{
	float:left;
	width:300px;
	width:320px;
	text-align:center;
	background-color: lime;
}

div.producttext
{
	margin: 0 0 0 344px;
	position:relative;
	background-color: gray;
}

td.productpicture
{
	width:325px;
	text-align:center;
	vertical-align: text-top;
	vertical-align: top;
/*	background-color: lime;*/
}

td.producttext
{
	padding-left: 19px;
	vertical-align: top;
/*	background-color: gray;*/
	
}

span.price, span.Price
{}

u.striked
{
	text-decoration: line-through;
}

/* ROOT TAG DEFINITIONS */
/* =================*/


select, input, checkbox, textarea, radio, .button, .datatable
 {  

	     font-family:  "HelveticaNeue-Light", "Helvetica Neue Light","Helvetica Neue",  'Lucida Grande','Lucida Sans', Helvetica, Verdana, Arial, sans-serif;
	  color: #9ea4b0;
	  color:#51626f;
	  font-size: 12px;
	 font-style:normal;
	  border: 1px solid;
	  border-color:#aaa;
	  /*border-color:#10244b;
	  border-color:#51626f;
	  */
	  border-color:#d6dae7; 
	  -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px;

}


.datatable, table.ListHeader
{

	padding:5px 15px 5px 15px;
	margin-bottom:10px;
	
	-moz-box-shadow: 1px 2px 8px #D4D4D4;  
	-khtml-box-shadow: 1px 2px 8px #D4D4D4; 
	-webkit-box-shadow: 1px 2px 8px #D4D4D4;  
	/*filter: DropShadow(color=#D4D4D4, offx=2, offy=3);*/
	box-shadow: 1px 2px 8px #D4D4D4;
	border: 0px;
	
	-moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px;
}

/* formerly used */
table.List1{}
table.List2{}
td.tdRight{}

td{ font-size: 12px;  vertical-align: top; }

input[type=text], input[type=password], select
{
	padding:0px 4px 0px 4px;
}

/* you can use the class button for input but also for type, 
it nearly looks the same (a is a litte bit wider) - overally input button looks better in Browsers, 
so it should be prefered */
a.button
{
	background-color:white;
	cursor:pointer;
	text-decoration:none;
	padding: 3px;
	margin: 0px;
	font-style:normal;
	line-height:normal;
	letter-spacing:1px;
}

.button
{
	background-color:white;
	cursor:pointer;
	text-decoration:none;
	text-transform:lowercase;
}

.button:hover
{
	background-color:#9ea4b0;
	background-color: #ced1d6;
	background-color:#e3e7ed;
	background-color:#eaeaeb;
	background-color:#e5e7ec;
	text-decoration:none;
	color:#51626f;
	
}

span.Price
{
	font-weight:bold;
}

a
{
	color:#10244b; /* former dark blue */
	color: #9ea4b0; /* former light blue */
	color:#51626f;
	text-decoration:none;
	text-decoration:underline;
}

a:hover
{
	
	color:#10244b;
	color: #9ea4b0;
	text-decoration:underline;
}
	
b,strong
{
	font-weight:600;
}

a img 
{
	border:0px;
}

/*    SPECIAL FX & DIVS  */
div.autosize { display: table; width: 1px; }
div.autosize > div { display: table-cell; }

div.langselector
{
	position: absolute;  top: 18px;  left: 50%; margin-left:179px;
 	opacity: 0;-moz-opacity:0; -khtml-opacity:0; filter:alpha(opacity=0);

}


#selector, #selector1, #selector2, #selector3, #selector4 
{
	cursor: pointer;
	display:inline; float: right;
}

#selector ul, #selector1 ul, #selector2 ul, #selector3 ul, #selector4 ul
{
	visibility: hidden; 
}

#selector:hover ul, #selector:focus ul, #selector1:hover ul, #selector1:focus ul, #selector2:hover ul, 
#selector2:focus ul, #selector3:hover ul, #selector3:focus ul, #selector4:hover ul, #selector4:focus ul
{
	visibility: visible;
}

#selector li, #selector1 li, #selector2 li, #selector3 li, #selector4 li
{
	text-transform: lowercase;
}


.startpage {
	margin-top: 16%;
	text-align: center;
}

#comingsoon /*imitates the behaviour of an image, used at index´ categories list*/
{
	background-repeat: no-repeat; background-color: transparent; display: block; 
	background: url(img/comingsoon.jpg);	
	width:120px; height: 100px;

}

.box /*shadow for smaller items like the comingsoon div */
{

	border: 1px solid #ebebeb;
	-moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px;
}

div.shoppingcart
{	
		position: absolute; width: 130px; padding:5px 5px 10px 5px; left: 50%; 
		top: 10px;  margin-left: 433px;
		/*top: 25px;  left: 50%; margin-left:255px; */
		background-color:#FFFFFF;
		text-align: center;
		opacity: 0.9;-moz-opacity:0.9; -khtml-opacity:0.9; filter:alpha(opacity=100);
}

.fadedOut /* init for objects that are faded in after loading, used for shopping_cart fade-in */
{
	opacity: 0; -moz-opacity:0; -khtml-opacity:0; filter:alpha(opacity=0);
}

.fadedIn 
{
	opacity: 1; -moz-opacity:1; -khtml-opacity:1; filter:alpha(opacity=100);
}

.nametitle
{
	display: none;
}

.hidden{ visibility: hidden}


/* IMAGE ALIGNMENT */

img {   border: 0px; }

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-top:4px;
	padding-bottom:4px;
	
	
	}
	
img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	/*border-left:10px;border-top:0px; border-bottom:5px; border-right:0px; border-style:solid; border-color:white;*/
	
}

.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline; 
	
	float: left;
/*	border-left:0px;border-top:0px; border-bottom:5px; border-right:7px; border-style:solid; border-color:white;*/
	}
	
.designer-TD
{
	padding-top: 5px;
	padding-bottom: 20px;
	/*padding-top: 10px;
	padding-bottom: 10px;*/
	
}

div.sale
{
z-index: 5;
position: inherit;
position: relative;
left: 120px;
top:100px;
width:32px;
height: 32px;
}


div.saleBox
{
width:32px;
height: 32px;
float: left;
}

div.sale10
{
		background-image: url(img/sale10.png);
		background-repeat: none;	
}
div.sale20
{
		background-image: url(img/sale20.png);
		background-repeat: none;	
}
div.sale30
{
		background-image: url(img/sale30.png);
		background-repeat: none;	
}
div.sale40
{
		background-image: url(img/deal.png);
		background-repeat: none;	
}
div.sale50
{
		background-image: url(img/sale50.png);
		background-repeat: none;	
}
div.sale60
{
		background-image: url(img/sale60.png);
		background-repeat: none;	
}

div.eco{
		background-image: url(img/eco.jpg);
		background-repeat: no-repeat;
		width: 23;
		height: 17;
}

div.left
{
	float:left;
}

/*small look preview pictures*/
.look{
	cursor:pointer;
	border: 1px solid #d7dbe1;
	margin-top:20px;
	margin-right: 10px;
	opacity: 0.4; -moz-opacity:0.4; -khtml-opacity:0.4; filter:alpha(opacity=50);

}

.look:hover{
		opacity: 1; -moz-opacity:1; -khtml-opacity:1; filter:alpha(opacity=100);
}

/* used at checkout for the red stars */
.missing{
	color:red;
	font-size:16px;
}