/******* global definitions *******/
* { /* exclude browser incompatibilities */
	margin: 0;
	padding: 0;
}
body {
	font-family: Trebuchet MS, Verdana, Helvetica, sans-serif;
	font-size: 70%;
	color: #000000;
	text-align: center; /* ie5: set to get centered layout */
}
textarea { /* set overwrite default browser font-family */
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
}

/******* global font definition concept *******/
/* 1st - set global */
h1 {
	clear: both; /* always create a new line */
	color: #000;
	font-size: 1.3em;
}
h2, h3, h4, h5 {
	clear: both; /* always create a new line */
	font-size: 1em;
}
p, a, li, th, td, dd, dt, label, input, select, textarea, sup {
	font-size: 0.75em;
}

li {
  list-style: none;
}
/* 2nd - reset individual to avoid Inheritance (http://www.w3.org/TR/CSS1#inheritance or http://www.w3.org/TR/CSS21/cascade.html) */
/* reset links */
h1 a, h2 a, h3 a, div a, p a, li a, li li, li li a, th a, th, td, td a, dd a { 
	font-size: 100%;
}
/* reset forms */
form label, form input, form select, form textarea, th label, td label, p input {
	font-size: 100%;
}
/* reset all other elements */
div p, div li, li h1, li h2, li h3, li p {
	font-size: 100%;
}

/******* images *******/
img {
	border: 0 solid; /* no border around images */
	background: #fff; /* set background according to body */
}

/******* links *******/
a, a:link, a:visited {
	color: #d88400;
	font-weight: bold;
	text-decoration: none;
}
a:hover, a:active, a:focus {
	color: #ad1817;
	font-weight: bold;
	text-decoration: underline;
}
a img { /* there are borders around product images, so do not define a:hover img, a:active img, a:focus img and set border to "0" */
	border: 0 solid; /* no border around linked images */
	background: #fff;
	color: #fff;
}

/******* tables: remember, tables are used for data! *******/
table {
	clear: both; /* always create a new line */
	border-collapse: collapse; /* "no cellpadding and cellspacing" */
	border-spacing: 0;
}
/* tables with attribute names and attribute values (only 2 columns, except product compare) */
table.attributes { 
	/* define specific */
}
table.attributes th { /* <th> is mostly hidden from viewport */
	padding: 0 8px 0 8px;
	background: #ccc;
	color: #333;
	font-weight: bold;
}
table.attributes td.name { /* e.g. attribute name */
}
table.attributes td.name, table.attributes td.value { /* td.value: e.g. attribute value */
	vertical-align: top;
}
/* table with more columns and rows (e.g. product listing within basket) */
table.listing {
	width: 100%; /* default width */
}
table.listing.editable { /* if this <table> contains items/products that can be edit, the table gets a border */
	border-right: 1px solid #ccc; /* border is applied to the whole <table>, no border-top not to set <th></th> 1px to high */
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
}
table.listing td.n { /* border north */
	border-top: 1px solid #ccc;
}
table.listing td.e { /* border east */
	border-right: 1px solid #ccc;
}
table.listing td.s { /* border south, not used yet but defined */
	border-bottom: 1px solid #ddeeee;
}
table.listing td.w { /* border west, not used yet but defined */
	border-left: 1px solid #ddeeee;
}

/******* scrollAble div *******/
.scrollAble {
  overflow: auto;
  padding: 3px;
}

/******* lists *******/
ul { /* to be sure not to use a list style */

}
/* link lists: these are lists with pure text links, e.g. #globalNav within #header or the page numbers within .paging,
they can also be used for lists of text links plus a description at each link, e.g. product news, product specifications */
ul.linkList li {
	/* define specific */
}
ul.linkList a, ul.linkList a:link, ul.linkList a:visited {
	/* define specific */
	list-style: none; 
	list-style-type: none;
}
ul.linkList a:hover, ul.linkList a:active, ul.linkList a:focus {
	/* define specific */
	list-style: none; 
	list-style-type: none;
}
/* tab lists: these are lists where you can click the link as a whole block, e.g. main catalogs within #header or tabs within the #productDetail view */
ul.tabList {
	list-style: none; 
	list-style-type: none;
	clear: both; /* always create a new line */
}
ul.tabList li {
	list-style: none; 
	list-style-type: none;
	display: inline;
	white-space: nowrap; /* do not wrap link within itself, show whole link in new line */
}
ul.tabList a, ul.tabList a:link, ul.tabList a:visited {
	list-style: none; 
	list-style-type: none;

	/* display: block;*/ /* not needed */
	/* float: left; is needed to align elements correctly next to each other but doesn't work in mac ie (it has to be hidden from mac ie), 
	   display: inline; is needed for mac ie to be able to align elements next to each other and not under each other and it doesn't effect other browsers */
	display: inline; 
	/* hide from mac ie5 \*/
	float: left; 
	/* end hide from mac ie5 */
	text-decoration: none;
}
ul.tabList a:hover, ul.tabList a:active, ul.tabList a:focus {
	/* define specific */
	list-style: none; 
	list-style-type: none;
}
ul.tabList .active a, ul.tabList .active a:link, ul.tabList .active a:visited {
	list-style: none; 
	list-style-type: none;
}

/****** Common Table ******/
table.commonTable { width: 100%; border: 0px solid #e1e1e1; }
table.commonTable tr { }
table.commonTable tr.commonRowHover { background-color: #fff; color: #ad1817; font-weight: bold; }
table.commonTable tr.commonRowHover:hover { background-color: #fff; color: #ad1817; font-weight: bold; }
table.commonTable tr.backgroundColor { background-color: #eaeaea; }
table.commonTable th { padding: 3px 3px 3px 11px; background-color: #fff; font-weight: bold; color: #222222; font-size: 110% }
table.commonTable th.listing { padding: 3px 3px 3px 11px; background-color: #fff; font-weight: bold; color: #222222; border-left: 0px solid #fff; font-size: 110% }
table.commonTable th.commonHeaderEmphasis { background-color: #fff; }
table.commonTable td { padding: 3px 10px 3px 15px; font-size: 105%; }
table.commonTable td.formBg { background: #fff; color: #222222; font-size: 110%; }
table.commonTable td.formBg a, a:link, a:visited { color: #ad1817; font-weight: bold; }
table.commonTable td.formBg a:hover, a:active, a:focus { color: #ad1817; font-weight: bold; text-decoration: underline; }
table.commonTable td.commonColBorderLeft { border: 1px solid #fff; }
table.commonTable td.lightText { color: #fff; }

table.commonTable .commonCheckbox { margin: 0 6px 1px 0; }

/******* forms *******/
fieldset {
	border: 0 solid;
}
legend { /* not used, it is replaced by <h2> */
}
label {
	display: block; /* create a new line for each label for all forms */
	margin: 0 0 0 0;
}
label.emphasis {
	font-weight: bold;
}
select {
	margin-right: 3px; /* set space to all following elements at right side */
	/* firefox: if you assign a border to <select> it reduces height */
}
select * { /* mozilla: do not place text behind the down arrow within <select> */
	padding-right: 5px;
}
textarea {
	/* space to following elements at right side is not needed */
	border: 1px solid #ccc;
	padding: 2px 2px;
	width: 187px; /* this is the default size */
	height: 55px; /* this is the default height */
}
textarea.inputTextareaDisabled { /* disabled textarea, usage: account / order detail view, class is used in addition to the textarea formatting, it is not formatted yet */
}
textarea.inputTextareaSize1 { /* special size 1, usage: product rating comment, only textarea has height as form field */
	width: 404px;
	height: 138px;
}
textarea.inputTextareaSize2 { /* special size 2, usage: order confirmation, account / order detail view */
	width: 100%;
}
/* the following classes are assigned to be able to format each input type separately (cross browser) */
/* all <input type="text" ... /> have this class assigned */
input.inputText {
	margin-right: 3px; /* set space to all following elements at right side */
	border: 1px solid #ccc; /* if border would be set to "input" as global also checkboxes would have a border, so it's only be assigned to this class */
	padding: 2px 2px;
}
input.inputText.inputTextDisabled {}
input.inputTextSize1 { /* special size 1, usage: basket quantity, auction, validation code */
	width: 48px;
}
input.inputTextSize2 { /* special size 2, usage: username/password/confirm password */
	width: 148px;
}
input.inputTextSize3 { /* special size 3, usage: product rating titel and comment textarea */
	width: 404px;
}
input.inputTextSize4 { /* special size 4, usage: date, time */
	width: 96px;
}
/* all <input type="checkbox" ... /> have this class assigned */
input.inputCheckbox { 
	margin-right: 3px; /* set space to all following elements at right side */
	float: left;
}
/* all <input type="radio" ... /> have this class assigned */
input.inputRadio { 
	margin: 1px 3px 0 0;
	float: left;
	clear: both;
}
input.inputSubmit {}
input.inputSubmitCart {
	margin: 0; /* no margin-left definition */
	border-style: none;
	padding: 0 0 0 20px;
	color: #fff;
	font-weight: bold;
	height: 20px;
	background: #e97d0c url(buttonsubmitcartlist.gif) no-repeat 0 0; /* mozilla: 1px */
}
input.inputSubmit.disabled { }
input.inputSubmitCart.disabled { }
input.inputSubmit.emphasis { }
/* all <input type="submit" ... /> that have to be shown as an image have this class assigned */
input.inputSubmitGo { /* create an image from a submit button and hide submit value text */
	margin: 0; /* no margin-left */
	border-style: none;
	padding: 0; /* do not show text over the image, opera: 15px instead of 14px */
	width: 20px; /* width not to show text that works in all browsers */
	height: 20px;
	background: #e97d0c url(buttonsubmit.gif) repeat-x 0 0; /* mozilla: 1px */
	color: #fff; /* the same color as body background-color to hide text */
	/* font-size: 0; doesn't work because the whole submit button becomes too small */
	/* text-indent: -3000px; could also be possible to hide text but doesn't work in all browsers */
}
* html input.inputSubmitGo { /* ie: format for ie */
	background: transparent url(submit_image.gif) no-repeat 0 0; /* ie: 3px, mozilla: 2px */
}
/* show all form fields more exactly vertically aligned with text (+1px left) */
input.inputText, input.inputCheckbox, input.inputRadio, input.inputSubmit, input.inputSubmitCart, input.inputSubmitGo, select, textarea {
	margin-left: 1px;
}
/* group submit buttons at the end of a form for identical alignment, if you want a submit button right aligned - assign this class to the surrounding element */
.inputSubmitButtons { cursor: pointer; cursor: URL; margin: 0; padding: 0; background: url('img_btn117_bgfff.png') top; width: 117px; height: 28px; color: #353535; border: 0px; }
.inputSubmitButtons:hover { color: #000000; cursor: pointer; cursor: URL; background: url('img_btn117_bgfff.png') bottom; }

.inputSubmitBtn40 { cursor: pointer; cursor: URL; margin: 0; padding: 0; background: url('img_btn40.png') top; width: 40px; height: 28px; color: #353535; border: 0px; }
.inputSubmitBtn40:hover { color: #000000; cursor: pointer; cursor: URL; background: url('img_btn40.png') bottom; }
.inputSubmitBtn75 { cursor: pointer; cursor: URL; margin: 0; padding: 0; background: url('img_btn75.png') top; width: 75px; height: 28px; color: #353535; border: 0px; }
.inputSubmitBtn75:hover { color: #000000; cursor: pointer; cursor: URL; background: url('img_btn75.png') bottom; }
.inputSubmitBtn75bgff { cursor: pointer; cursor: URL; margin: 0; padding: 0; background: url('img_btn75_bgfff.png') top; width: 75px; height: 28px; color: #353535; border: 0px; }
.inputSubmitBtn75bgff:hover { color: #000000; cursor: pointer; cursor: URL; background: url('img_btn75_bgfff.png') bottom; }
.inputSubmitBtn87 { cursor: pointer; cursor: URL; margin: 0; padding: 0; background: url('img_btn87.png') top; width: 87px; height: 28px; color: #353535; border: 0px; }
.inputSubmitBtn87:hover { color: #000000; cursor: pointer; cursor: URL; background: url('img_btn87.png') bottom; }
.inputSubmitBtn100 { cursor: pointer; cursor: URL; margin: 0; padding: 0; background: url('img_btn100.png') top; width: 100px; height: 28px; color: #353535; border: 0px; }
.inputSubmitBtn100:hover { color: #000000; cursor: pointer; cursor: URL; background: url('img_btn100.png') bottom; }
.inputSubmitBtn100bgff { cursor: pointer; cursor: URL; margin: 0; padding: 0; background: url('img_btn100_bgfff.png') top; width: 100px; height: 28px; color: #353535; border: 0px; }
.inputSubmitBtn100bgff:hover { color: #000000; cursor: pointer; cursor: URL; background: url('img_btn100_bgfff.png') bottom; }
.inputSubmitBtn117 { cursor: pointer; cursor: URL; margin: 0; padding: 0; background: url('img_btn117.png') top; width: 117px; height: 28px; color: #353535; border: 0px; }
.inputSubmitBtn117:hover { color: #000000; cursor: pointer; cursor: URL; background: url('img_btn117.png') bottom; }
.inputSubmitBtn125bgff { cursor: pointer; cursor: URL; margin: 0; padding: 0; background: url('img_btn125_bgfff.png') top; width: 125px; height: 28px; color: #353535; border: 0px; }
.inputSubmitBtn125bgff:hover { color: #000000; cursor: pointer; cursor: URL; background: url('img_btn125_bgfff.png') bottom; }

.inputSubmitButtons input.inputSubmit, .inputSubmitButtons input.inputSubmitCart { /* ie: only inputSubmit and inputSubmitCart because "input" only produces spaces for hidden fields */
	margin-left: 3px; /* if they are grouped within this class, all input buttons have a left margin to create spaces between them */
}

* html .inputSubmitButtons { /* ie: reduce 2px gap at right side */
	margin-right: -2px;
}
.inputSubmitButtons form { /* if a <form> is within this class, all elements have to be shown next to each other */
	float: left; /* ie: display: inline would produce spaces between hidden fields */
}
/* special text formatting classes */
.inputMandatory { /* text - mandatory form fields, this class is only assigned to the star "*" */
	color: #D10505;
}
.inputDescription { /* text - form field description, it is positioned next to the label */
	color: #9C9A9A;
}
.inputError { /* text - default highlighting in case of error, usage: <p class="inputError">, <label for="..." class="inputError"> */
	color: #D10505;
	font-weight: bold;
}
p.inputError { /* text - error description highlighting in case of error */

}
.inputConfirm { /* user needs to confirm his input, it's not a <p> because it contains <div class="inputSubmitButtons"> including the submit buttons */
	margin-bottom: 0px;
	padding: 3px 3px 3px 5px;
	background: #eaeaea;
	color: #D10505;
	font-weight: bold;
	border: 1px solid #d6d6d6;
}
.inputConfirm td {
  padding: 3px 6px 3px 6px; 
}

div.errorSubmitBtns {
}

/******* addresses *******/
address { /* usage: checkout, order */
	margin-bottom: 5px;
	font-style: normal;
}

/******* special formatting classes *******/
.active { /* highlight an active element, e.g. within a list */
	font-weight: bold;
}
.emphasis { /* highlight an element in general that is not active or last */
	/* this class is very differently used but used with this name, so it is not formatted here */
}
li.last, td.last, .last a { /* all (!) last list items and <td>'s do not have a border */
	border: 0 solid !important;
}
.skip { /* display an element not within the viewport but show it within html, show it without a stylesheet */
	overflow: hidden;
	position: absolute;
	left: -3000px;
	height: 0;
	font-size: 0; /* netscape: positioning ouside the viewport doesn't work all times (e.g. <th class="skip">) */
}
/* format text with an arrow, usage: checkout, order */
.arrowTextRight1 { /* number is applied to be able to add arrows in future */
	padding: 0 0 0 14px;
	background: transparent url(arrow3_right.gif) no-repeat 0 4px;
}

/******* global alignment definitions *******/
.inline * { /* display all elements inline that are included by this class */
	display: inline;
}
.inline select * { /* mozilla: if not defined, mozilla would display elements within <select> inline */ 
	display: block;
}

/* alignment of the following elements next to each like table cells without effecting the elements in the other block 
   and to avoid "The IE Three Pixel Text-Jog", source and explanation: http://www.positioniseverything.net/explorer/threepxtest.html */
/* ie: hacks to identify ie are directly placed here for better understanding */
* html div.layoutAlignment { /* ie 5: layout alignment is created using <div>'s */
	clear: both;
	display: table-row; /* if you use "table-..." in general: display: table; works better in safari but when you refresh firefox, grouped elements can somtimes not be shown next to each other when using <fieldset> */
	height: 1%; /* ie: if not set, ie creates spaces when used within <fieldset> */
}
*+html div.layoutAlignment { /* ie7: same as above but for ie7 */
	clear: both;
	display: table-row; /* if you use "table-..." in general: display: table; works better in safari but when you refresh firefox, grouped elements can somtimes not be shown next to each other when using <fieldset> */
	height: 1%; /* ie: if not set, ie creates spaces when used within <fieldset> */
}
div.layoutAlignment div.layoutBox1 { 
	/* netscape: display: table-cell; doesn't work */
	float: left; /* ie: table-cell doesn't float per default */
	vertical-align: top; 
}
div.layoutAlignment div.layoutBox2 { 
	display: table-cell; /* treat as a table cell */
	vertical-align: top; 
}
* html div.layoutAlignment div.layoutBox2 { /* ie: table-cell doesn't float per default, can only be used for ie */
	float: left; 
}
*+html div.layoutAlignment div.layoutBox2 { /* ie7: same as above but for ie7 */
	float: left; 
}
* html div.layoutAlignment fieldset { /* ie: if not set, fieldsets are shown above each other */
	float: left; 
}
*+html div.layoutAlignment fieldset { /* ie7: same as above but for ie7 */
	float: left; 
}
.formBoxLeft { width: 200px; }
.formBoxRight {  }

/******* global prices definitions *******/
.priceProduct { /* to be able format product price e.g. within product listing, product detail view */
	color: #005195;
	font-size: 110%;
}
.priceProduct span.emphasis { /* highlight "our price" with another color */
	color: #ff0000;
	/* ie: <p class="priceProduct emphasis">...</p> and .priceProduct.emphasis doesn't work */
}
.priceProductStrike { /* strike price "list price" */
	color: #cccccc;
	text-decoration: line-through;	
	font-weight: bold;
}
.priceTotal {
	/* define specific */
}
.priceAlignment { /* all prices and price table headings are right aligned */
	text-align: right;
	white-space: nowrap; /* prices do not wrap */
}
.priceDescription { /* price description sentence "All prices include..." */
	color: #999;
}

/******* product specific elements *******/
a.productLink, a.productLink:link, a.productLink:visited { /* product link to the product detail view, it is always used for calling the product detail view */
	font-size: 100%;
}
table.listing td a.productLink, table.listing td a.productLink:link, table.listing td a.productLink:visited,
ul.linkList a.productLink, ul.linkList a.productLink:link, ul.linkList a.productLink:visited { /* reset to normal link in these tables and lists */
	font-size: 100%; 
	font-weight: normal;
}
div.productDescription { /* product description is not a <p> because it can contain any html code */
	margin-bottom: 13px;
}
.productImage, .productImageThumbnail, .productImageNotAvailable { /* surrounding element (can be <div> or <td>) for the product image, the product image thumbnail and 
the spacer image (which is shown if no product image is available) */
	padding: 2px;
	text-align: left; /* image is left aligned per default */
}
.productImage img, .productImageThumbnail img, .productImageNotAvailable img { /* the image itself */
	border: 1px solid #cccccc; /* set border as default */
}
.productImage img, .productImageNotAvailable img {
	width: 200px; /* set default width for product image */
}
.productImageThumbnail img { 	/* set default width for product image thumbnail */
	/* width not yet defined */
}
table.listing td.productImage { /* center image within this <table> */
	margin: 0;
	padding: 0;
	text-align: center;
}
table.listing td.productImage img { /* center image within this <table> */
	width: 22px; /* set width for product image */
}
.productLifeCycle { /* show product lifecycle specific elements, e.g. sentences */
	color: #D10505;
	font-weight: bold;	 
}
.productLifeCycle a { /* show product lifecycle specific elements, e.g. sentences */
	color: #D10505;
	font-weight: bold;	 
}