/* --------------------- MAIN STYLESHEET -------------------------------

COLOR DEFINITION
----------------
background:								#fff
color:									#8c8c8c
simple links							#088ac0
	hover:								#0379aa
featurebox:								#e9fdcf, #e5f3ca #b0bf95
side h2:								#bab9b9
headlines:								#000, #bab9b9
searchbutton:							#006087
navigationbox:							#e2e2e1, #eeeeed, #a5a5a4
categorynav:							#fff, #4387a2, #78a7ba, #4a7d91
	hover:								#22789a
attributenav:							#74a6b9, #98bcca, #6e94a3
	hover:								#599db7
table th								#c2bebe
table even								#f5f5f5
table recommendation					#fffaf0, #e0ac2f
table headlines							#8c8c8c
table code background:					#dde0e4, #cfccc8
teaser									#ebeee9

TABLE OF CONTENTS
-----------------
	- base
	- grid
	- header
	- side content
	- main content
	- fontsizes and lineheights



BROWSERMATRIX
-------------
ie6 (Win2000)
ff2 (Win2000)
ie7 (Vista)
Opera 9.x (OSX, Vista)
FF3.0 (Vista)
FF3.5x (OSX)
Safari 4 (OSX, Vista) 

-----------------------------------------------------------------------*/


/* --- RESET (from the blueprint-framework)--- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight:400; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a img { border: none; }
a { outline: none; }
legend, caption { display: none; }


/* --- base --- */
body {
	background: #fff;
	color: #666666;
	font: 12px "Lucida Sans", "Lucida Grande", Helvetica, Arial, sans-serif;
	text-align: center;
}
a {
	color: #088ac0;
}
		a:hover {
			color: #0379aa;
		}
p {
	margin: 0 20px 15px 20px;
}


/* --- grid --- */
.grid-head-wrap {
	background: url(../images/layout/bg_grey_gradient.gif) repeat-x left top;
	margin: 0 auto;
}
.grid-head {
	background: url(../images/layout/spr_bg_single.png) no-repeat right -90px;
	height: 110px;
	margin: 0 auto;
	padding-top: 27px;
	text-align: left;
	width: 940px;
}
.grid-content {
	margin: 0 auto;
	overflow: auto;
	padding-bottom: 20px;
	text-align: left;
	width: 960px;
}
		.grid-content-main {
			float: left;
			width: 770px;
		}
		.grid-content-side {
			float: right;
			width: 190px;
		}


/* --- header --- */
.grid-head h1 {
	background: url(../images/layout/spr_bg_single.png) no-repeat 0 0;
	display: block;
	height: 48px;
	margin-left: 11px;
	padding-top: 27px;
	text-indent: -8000px;
	width: 292px;
}


/* --- side content --- */
/* - featured shop - */
.grid-content-side .feature {
	background: url(../images/layout/bg_green.gif) repeat-x left top #e9fdcf;
	border-top: 2px solid #e5f3ca;
	border-right: 2px solid #b0bf95;
	border-bottom: 2px solid #bccba5;
	border-left: 2px solid #e5f3ca;
	margin-top: 15px;
	padding: 0 5px 10px 0;
}
		.feature h3 {
			background: url(../images/layout/spr_bg_single.png) no-repeat left -239px;
			display: block;
			height: 25px;
			margin: 0 5px 10px 10px;
			text-indent: -8000px;
			width: 172px;
		}
		.feature img {
			float: left;
			margin: 0 8px 20px 10px;
		}

		.feature a.link-detail {
			display: block;
			text-align:right;
			margin: 5px 0px 0px 0px;
		}
/* - headline - */
.grid-content-side h2 {
	color: #bab9b9;
	text-align: right;
	font-style: italic;
	margin: 3px 0;
}
/* - navigation box with search form - */
.navigation {
	background: #e2e2e1;
	border-top: 2px solid #eeeeed;
	border-right: 2px solid #a5a5a4;
	border-bottom: 2px solid #a5a5a4;
	border-left: 2px solid #eeeeed;
	padding: 6px 5px 6px 8px;
}
		.navigation h3 {
			background: url(../images/layout/bg_dotongrey.gif) repeat-x left bottom;
			color: #006087;
			margin: 6px 0;
			padding: 0 1px 5px;
		}
/* - search - */
.navigation legend {
	text-indent: -8000px;
}
.navigation fieldset {
	background: url(../images/layout/bg_dotongrey.gif) repeat-x left bottom;
	margin-bottom: 7px;
	padding-bottom: 7px;
}
		.navigation label {
			color: #000;
		}
		.navigation .text {
			float: left;
			padding: 1px 0;
			width: 115px;
		}
		.navigation .submit {
			background: url(../images/layout/spr_buttons.png) no-repeat left -1px;
			border: none;
			color: #006087;
			cursor: pointer;
			height: 23px;
			float: right;
			padding-bottom: 4px;
			width: 51px;
		}
/* - navigation category */
h3.headline-category {
	background: url(../images/layout/spr_bg_single.png) no-repeat left -272px;
	clear: both;
	display: block;
	height: 22px;
	margin-bottom: 1px;
	text-indent: -8000px;
	width: 170px;
}
.navigation-main {
	list-style: none;
	width: 172px;
}
		.navigation-main a {
			color: #fff;
			display: block;
			margin-bottom: 1px;
			padding: 2px 10px;
			text-decoration: none;
		}
		.category a {
			background: #4387a2;
			border-top: 1px solid #78a7ba;
			border-right: 1px solid #4a7d91;
			border-bottom: 1px solid #4a7d91;
			border-left: 1px solid #78a7ba;
		}
				.category a:hover {
					background: #22789a;
				}
/* - navigation attributes - */
h3.headline-attribute {
	background: url(../images/layout/spr_bg_single.png) no-repeat left -304px;
	clear: both;
	display: block;
	height: 33px;
	margin-bottom: 1px;
	text-indent: -8000px;
	width: 170px;
}
		.attribute a {
			background: #74a6b9;
			border-top: 1px solid #98bcca;
			border-right: 1px solid #6e94a3;
			border-bottom: 1px solid #6e94a3;
			border-left: 1px solid #98bcca;
		}
				.attribute a:hover {
					background: #599db7;
				}
/* - footer - */
.grid-footer h3 {
	background: url(../images/layout/bg_dotlightonwhite.gif) repeat-x left bottom;
	color: #000;
	margin: 28px 0 0 8px;
	padding-bottom: 6px;
}
.grid-footer ul {
	list-style: none;
	margin-left: 8px;
}
		.grid-footer a {
			background: url(../images/layout/bg_dotlightonwhite.gif) repeat-x left bottom;
			display: block;
			padding: 6px 0;
			text-decoration: none;
		}


/* --- main content --- */
.grid-content-main h2 {
	color: #666666;
	font-style: italic;
	margin: 8px 0 10px 20px;
}
		.grid-content-main h2 span {
			color: #000 ;
		}

.grid-content-main h3 {
	color: #666666;
	font-style: italic;
	margin: 13px 0 10px 20px;
}
		.grid-content-main h3 span {
			color: #000 ;
		}
		
.grid-content-main h4 {
	color: #666666;
	font-style: italic;
	margin: 5px 0 0 20px;
}
/* - table - */
table {
	border: 0;
	border-collapse: collapse;
	padding: 0;
	table-layout: fixed;
	width: 750px;
}
table th {
	background: url(../images/layout/bg_tablehead.gif) repeat-x left top;
	color: #c2bebe;
	height: 20px;
	vertical-align: middle;
}
		th.recommendation {
			background: none;
			width: 21px;
		}
		th.logo { width: 160px; }
		th.shop { width: 190px; }
		th.attributes {}
		th.coupon { width: 95px; }
				td {
					background: url(../images/layout/bg_dotonwhite.gif) repeat-x left bottom;
					padding-top: 10px;
					vertical-align: top;
				}
						.even td {
							background-color: #f5f5f5;
						}
						.recommendation td {
							background-color: #fffaf0;
						}
								.empty {
									background: #fff !important;
								}
				td.recommendation {
					background: #e0ac2f;
				}
				td.recommendation span {
					background: url(../images/layout/spr_buttons.gif) no-repeat left -34px;
					display: block;
					height: 92px;
					padding: 3px 0;
					width: 21px;
					text-indent: -8000px;
				}
				td.logo {
					margin-top: 16px;
					text-align: center;
				}
				td.shop {
					padding-right: 20px;
				}
						.shop h3 { /* overwrites cascade */
							color: #666666;
							font-style: normal;
							font-weight: 700;
							margin: 0;
						}
						.shop p {
							margin: 0;
							display: inline;
						}
						.shop a {
							display: block;
							margin-bottom: 5px;
						}
				td.attributes {
					width: 140px;
				}
						.attributes li {
							background: url(../images/layout/spr_listitems.png) no-repeat left top;
							list-style: none;
							margin-bottom: 2px;
							padding-left: 15px;
						}
								.additional {
									background: none !important;
								}
				td.coupon {
					font-weight: 700;
				}
						dd.code {
							background: #dde0e4;
							border: 1px solid #cfccc8;
							margin: 2px 0 10px;
							text-align: center;
							
						}
						dd.discount {
							margin: 0 0 10px 0;
							text-align: center;
						}
				
/* - ruler - */
.hr,
.hr-last {
	background: url(../images/layout/bg_dotonwhite.gif) repeat-x left top;
	height: 1px;
	margin: 25px 20px 15px;
}
.hr-last {
	margin: 15px 20px 25px;
}
		hr {
			display: none;
		}
/* - boxes content - */
.teaser {
	background: #f8faf6;
	margin: 0 20px 0 21px;
	padding: 20px 0;
}
		.teaser .content {
			border-right: 1px solid #e2e2e1;
			float: left;
			padding: 0 35px 0 20px;
			width: 42%;
		}
		
				.last { /* overwrites previous styles */
					border-right: 0 !important;
					float: right !important;
				}
				
.teaser h4 {
	background: url(../images/layout/bg_dotdarkonwhite.gif) repeat-x left bottom;
	color: #000;
	padding-bottom: 10px;
	margin-bottom: 5px;
}
.navigation-teaser {
	list-style: none;
	margin-top: 5px;
}
		.navigation-teaser li {
			background: url(../images/layout/spr_listitems.png) no-repeat left -146px;
			margin-bottom: 5px;
		}
				.navigation-teaser a {
					display: block;
					padding: 0 0 1px 25px;
					text-decoration: none;
				}
/* - static content - */
.static {
	background: #f8faf6;
	color: #2d3236;
	margin: 0 20px 0 21px;
	padding: 20px 0;
}
		.static h5  {
			color: #000;
			font-weight: 700;
			margin: 0 0 5px 22px;
			padding-bottom: 10px;
		}
		.static a {
			display: block;
			margin: 5px 22px;
		}
		.navigation-listlink {
			list-style: none;
			margin-top: 5px;
		}
				.navigation-listlink li {
					margin-bottom: 5px;
				}
						.navigation-listlink a {
							margin: 0;
							padding: 0 0 1px 20px;
							text-decoration: none;
						}
/* - shopdetails - */
.box-wrap {
	background: url(../images/layout/bg_dotonwhite.gif) repeat-x left bottom #f8faf6;
	padding-bottom: 1px;
	margin: 0 20px;
}
.details {
	background: url(../images/layout/bg_dotonwhite.gif) repeat-x left top #f8faf6;
	color: #898585;
}
		.details .content {
			border-right: 1px solid #e2e2e1;
			float: left;
			margin: 20px 0;
			min-height: 283px;
			padding: 0 20px 0 25px;
			width: 27%;
		}
		
		.details .content-product {
			border-right: 1px solid #e2e2e1;
			float: left;
			margin: 20px 0;
			padding: 0 20px 0 25px;
			width: 27%;
		}
				.details p {
					margin: 18px 0 0;
					padding: 0;
				}
				.details .hr {
					margin-left: 0;
				}
				.details .attributes {
					margin-bottom: 10px;
				}
				.details h4 {
					color: #000;
					margin: 3px 0 15px;
				}
				.data-contact {
					margin-top: 20px;
				}
						.details .last {
							text-align: center;
						}
				.details a.link-detail {
					background: url(../images/layout/spr_buttons.png) no-repeat left -133px;
					display: block;
					height: 24px;
					margin: 20px auto;
					text-align: center;
					text-indent: -8000px;
					width: 102px;
				}
.outstand {
	background: url(../images/layout/bg_dotonwhite.gif) repeat-x left top  #f1f2f0;
	padding: 1px 0 20px;
}
		.outstand .content-text {
			float: left;
			padding: 15px 0 5px;
			width: 39%;
		}
		
		.outstand .content-text-rating {
			float: left;
			padding: 15px 0 5px;
			width: 58%;
		}
		
				.content-text li {
					background: url(../images/layout/spr_listitems.png) no-repeat left -68px;
					list-style: none;
					padding-left: 14px;
				}
				.outstand .content-image {
					float: left;
					padding: 15px 0 5px 25px;
					width: 19%;
				}
						.wide {
							width: 28% !important;
						}
				.outstand .content-code {
					float: left;
					padding: 15px 0 5px;
					width: 16%;
				}
				.outstand .content-link {
					float: left;
					padding: 25px 0 15px 35px; 
					width: 17%;
				}
				.outstand .content-link-rating {
					float: left;
					padding: 35px 0 15px 5px; 
					width: 17%;
				}
		.award {
			display: block;
			float: left;
			margin: 10px 20px;
		}
		.link-button {
			
		}
		a.link-button:hover {
			background: url(../images/layout/bg_bankbutton_ov.png) no-repeat left top;
		}


/* --- register form --- */
.form-wrap {
	background: url(../images/layout/bg_dotonwhite.gif) repeat-x #f8faf6 left top;
	padding-top: 1px;
	width: 730px;
}

.form {
	background: url(../images/layout/bg_dotonwhite.gif) repeat-x #f8faf6 left bottom;
	color: #2d3236;
	padding-left: 20px;
	padding-top: 10px;
	
}
		.form form {
			display: block;
		}

.form .content {
	border-right: 1px solid #e2e2e1;
	float: left;
	padding: 0 35px 0 20px;
	width: 42%;
}
.form-row {
	width: 297px;
}
		.form-column {
			float: left;
		}
.form-row-last {
	text-align: right;
	width: 100%;
}
		.secondary {
			float: right !important;
		}
.form label,
.form .label {
	display: block;
	margin: 15px 0 11px;
}
		.hint {
			color: #868484 !important;
			margin: 5px 0 10px;
		}
		.additional {
			display: block;
		}
		.emphasized {
			font-weight: 700;
		}
		.hide {
			display: none !important;
		}
.form input,
.form textarea,
.form select {
	background: #f5f5f5;
	border: 1px solid #8e8e8e;
}
		input:focus,
		textarea:focus {
			background: #fff;
		}
		.form .text {
			width: 292px;
		}
		.form .figure {
			width: 71px;
		}
		.form .phone,
		.form .street,
		.form .city {
			width: 203px;
		}
select {
	float: left;
	margin-right: 7px;
	font-style: italic;
	width: 30%;
}
		.year {
			float: right;
			margin-right: 15px;
		}
		select.category {
			width: 283px;
		}
.shortdesc {
	height: 60px;
	width: 283px;
}
.longdesc {
	height: 90px;
	width: 283px;
}
.form .submit {
	background: url(../images/layout/spr_buttons.png) no-repeat left -214px;
	border: 0;
	height: 26px;
	margin: 40px 40px 20px 0;
	width: 236px;
}
.error {
	color: #c90900;
}
input.error,
textarea.error,
select.error {
	border: 1px solid #c90900;
	color: #2d3236;
}
.form p {
	margin-bottom: 10px;
	text-align: center;
}


/* --- fontsizes and line-heights --- */
.feature,
th,
td,
.form span.additional,
span.additional					{ font-size: .83em;}
.grid-content-main td h3		{ font-size: 1em; }
.teaser h4						{ font-size: 1.09em; }
.teaser h5						{ font-size: 0.99em; }
.static-content-teaser h5		{ font-size: 0.99em; }
.grid-content-side h2,
.grid-content-main h2,
.grid-content-main h3			{ font-size: 1.5em; }
.grid-content-main h4			{ font-size: 0.83em; }


/* --- helper --- */
.hidden {
	text-indent: -8000px;
}
.clear:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}