@charset 'utf-8';
/*
	STYLESHEET: screen.css
	--------------------------------------------------------------

	Media Type: 	Screen
	Copyright:		(c)2009, bionic
	Updated: 		2009-02-06

------------------------------------------------------------------

__________________01. GLOBAL
__________________02. HEADER
__________________03. NAVIGATION
__________________04. META
__________________05. HEADLINE
__________________06. CONTENT
__________________07. SIDEBAR
__________________08. MAIN
__________________09. FOOTER
__________________10. MODULES
__________________10.01 News
__________________10.02 Impressum
__________________10.03 Regular Text
__________________10.04 AGB
__________________10.05 Produktübersicht
__________________10.06 Liegenvergleich
__________________10.07 Form
__________________10.08 Produktübersicht
__________________10.09 Distributoren
__________________10.10 Index
__________________10.11 Login


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


/* Import default Stylesheets
------------------------------------------------------------------*/
@import url(reset.css); 	/* Resets all Styles */
@import url(base.css);		/* Basic Styles (margins, font size, ect.)



/* 01. GLOBAL
------------------------------------------------------------------*/
html, body {
	color: #777;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	line-height: 1.4em;
	font-size: 85%;
	background: #e7e8ec url(../images/bg_body.jpg) left top repeat-x;
}

p {line-height: 1.5em}
.print {display:none}
.left {float:left}
.right {float:right}
.normal {font-weight:normal}
.bold {font-weight:bold; color:#0d4671}
.highl {margin-bottom:0.3em; font-weight:bold}

/* Default link styles */
a:link {color:#0d476f; text-decoration:none;}
a:visited {color:#0d476f; text-decoration:none;}
a:active {color:#0d476f; text-decoration:none;}
a:hover {color:#0d476f; text-decoration:underline;}

#container {
	width: 900px;
	margin: 0 auto;
}



/* 02. HEADER
------------------------------------------------------------------*/
#header {
	padding-top: 19px;
	background: url(../images/bionic_header.jpg) center top no-repeat;
}
/* Logo replacement */
#header #logo {
	margin: 0 0 18px 0;
	height: 48px;
}
#header #logo a {
	display: block;
	width: 130px;
	height: 48px;
	text-indent: -999em;
	background: url(../images/bionic_logo.png) left top no-repeat;
	margin-left: 21px;
}
#navbar {
	height: 45px;
	line-height: 45px;
	background: url(../images/bg_navbar.gif) left top no-repeat;
	position: relative;
}



/* 03. NAVIGATION
------------------------------------------------------------------*/
#navigation {
	margin: 0;
	padding: 0;
	float: left;
}
#navigation li {
	list-style: none;
	float: left;
	margin: 0 0 0 0;
}
#navigation a {
	color: #deecf7;
	display: block;
	height: 45px;
	padding: 0 21px 0 20px;
	background: url(../images/bg_li.gif) right top no-repeat;
}



/* 04. META
------------------------------------------------------------------*/
#meta {
	position: absolute;
	top: 7px;
	right: 7px;
	height: 32px;
	line-height: 32px;
	color: #dfedf8;
	width: 230px;
}
#meta p {margin:0; line-height:32px}
#meta .left {background: url(../images/bg_meta_left.gif) left top no-repeat; padding-left:12px; float:right}
#meta .right {background: url(../images/bg_meta_right.gif) right top no-repeat; padding:0 12px; float:right}
#meta img {margin:0 0 -2px 3px}
#meta .left img {margin:0 0 -1px 3px}



/* 05. HEADLINE
------------------------------------------------------------------*/
#headline {
	color: #b0b7c1;
	margin: 27px 0 8px 20px;
}
#headline h1 {margin:0 0 4px 0;color: #fff;font-weight:bold;font-size:1.em;}
#headline p {margin:0; padding:0}



/* 06. CONTENT
------------------------------------------------------------------*/
#content-out {
	width: 938px;
	margin-left: -19px;
}
#content-top {
	background: url(../images/bg_content_top.png) left top no-repeat;
	height: 23px;

}
#content-bottom {
	background: url(../images/bg_content_bottom.png) left bottom no-repeat;
	height: 30px;

}
#content {
	background: url(../images/bg_content_middle_2cols.png) left top repeat-y;
	padding: 0 19px;
}



/* 07. SIDEBAR
------------------------------------------------------------------*/
#sidebar {
	width: 245px;
	float: left;
}
#prodimage {margin:14px 0 15px 12px}
#prodimage img {display:block}

#subnav-head {
	font-weight: bold;
	color: #0c4773;
	margin: 25px 0 12px 13px;
}
#subnav {
	margin: 0;
	padding: 1px 0 0 0;
	border-top: 1px solid #d1d3d8;
}
#subnav li {
	list-style: none;
	line-height: 32px;
	border-bottom: 1px solid #fff;
}
#subnav a {
	display: block;
	padding: 0 0 0 25px;
	background: url(../images/bg_subnav_li.gif) left bottom no-repeat;
	color: #777;
	line-height: 32px;
}


/* 08. MAIN
------------------------------------------------------------------*/
#main {margin-left:246px}
#main h2 {
	margin: 0;
	padding: 0;
	font-size: 1em;
	color: #0d4671;
}
#main h2.main-head {border-bottom:1px solid #d0d3d8}
#main.text {
	margin: 0 0 220px 280px;
	padding-top: 35px;
	width: 470px;
}

#main img#textflow {
	float: right;
	margin: -40px -100px 10px 10px;
}
#main hr.spacer {
	height: 1px;
	border: 0;
	border-top: 1px solid #d8d8d8;
	margin: 28px 0 1.5em 0;
}
#main h3 {
	margin: 0;
	color: #0d4671;
}
#main ul {margin:0.8em 0 0 0; padding:0}
#main li {list-style:none; background:url(../images/bg_subnav_a.gif) 1px center no-repeat; padding:0 0 0 8px}
#main ul a {color:#777;}



/* 09. FOOTER
------------------------------------------------------------------*/
#footer {
	background: url(../images/bg_footer.png) left top no-repeat;
	height: 35px;
	color: #e7e8ec;
	margin: 18px 0 18px 0;
	padding: 0 20px;
}
#footer p {
	margin: 0;
	line-height: 35px;
}
#footer a {color:#e7e8ec;padding-right:10px;}

#quicknav{margin:0 20px 50px 20px;}

/* 10. MODULES
------------------------------------------------------------------*/

/* 10.01 News
------------------------------------------------------------------*/
#main.news .main-head {
	margin: 0 -30px 0 -35px;
	height: 28px;
	padding: 26px 0 0 35px;
}
#main.news {
	margin: 0 0 220px 280px;
	width: 590px;
}
img.left.border {
	float: left;
	padding: 3px;
	margin-right: 25px;
}
img.border {
	border: 1px solid #c1c1c1;
	padding: 5px;
}
p.date {color:#0d4673; margin:12px 0 1.5em 0}
p.date-less {color:#0d4673; margin:5px 0 1.5em 0}
#main.news h3 {margin:1.5em 0 0 0}
#main.news .limited {width:480px}
.go a, a.go {
	color: #787878;
	background: url(../images/bg_subnav_a.gif) left center no-repeat;
	padding-left: 10px;
}
p.date-fair {color:#0d4673; margin:5px 0 5px 0}


/* 10.02 Impressum
------------------------------------------------------------------*/
#main.text.impressum {padding-top:5px}
#main.text.impressum h2 {margin:2em 0 0.5em 0}


/* 10.03 Regular Text
------------------------------------------------------------------*/
#main.text.image h2 {margin:-10px 0 2em 0}
dl {margin:20px 0 0 0; padding:0}
dt {font-weight:bold; color:#0e4470; float:left;width:30px; margin:0 5px 0 0}
dd { margin-bottom:5px;}


/* 10.04 AGB
------------------------------------------------------------------*/
#download {
	color: #0e4772;
	padding: 14px;
}


/* 10.05 Produktübersicht
------------------------------------------------------------------*/
#main.ansicht {margin:0 0 75px 246px}
#main.ansicht h2 {margin:0 0 15px 0}
#main.ansicht .padding {padding:30px 18px 0 18px}
#main.ansicht .padding p {margin:0; width:450px}
#flash {width:600px; margin-left:20px}

#fotos {margin:0; padding:13px 0 0 9px; height:117px;}
#fotos #gallscroll {width:604px;height:120px;overflow:hidden;float:left;}
#fotos #gallery{float:left;}
#fotos .foto-box {
	display: block;
	float: left;
	width: 135px;
	margin: 0 16px 0 0;
}
#fotos .foto-box img {
	padding:5px;
	margin-bottom:1px;
	border:1px solid #d0d0d0;
}
#fotos .foto-box .foto-titel {margin:0; background:url(../images/bg_fotos_title.gif) left top no-repeat}
#fotos .foto-box .foto-titel a {display:block; line-height:22px; padding-left:10px; width:125px; color:#787878}
#fotos #back, #fotos #forward {
	float: left;
	height: 117px;
	width: 15px;
	margin-right: 8px;
}
#fotos #forward {margin:0 0 0 -7px;}
#fotos #back img, #fotos #forward img {margin-top:50px}

#main.ansicht #large {margin:30px 0 0 0; text-align:center}


/* 10.06 Liegenvergleich
------------------------------------------------------------------*/
#vergleich td img {display:block}
th, td {border:0; padding:8px 8px}
#vergleich td {
	border-right: 1px solid #e5e6ea;
	border-bottom: 1px dotted #b7b7b7;
	color: #767676;
}
#vergleich th {
	color: #0d476f;
	text-align: left;
	border-right: 1px solid #e5e6ea;
	padding-left: 15px;
	border-bottom: 1px dotted #b7b7b7;
}
#vergleich .background th {background:#f7f7f7 url(../images/bg_table.gif) left top no-repeat}
#vergleich .background td {background:#f7f7f7}
#vergleich th.center {text-align:center}
#vergleich .top th {border-right:0; border-bottom:1px solid #e5e6ea; padding:0; height:42px}
#vergleich .top th img {display:block; margin:14px 0 14px 15px}
#vergleich caption {display:none}
#vergleich .bottom th, #vergleich .bottom td {height:100px; border-bottom:0}


/* 10.07 Form
------------------------------------------------------------------*/
#main.form {
	margin: 0 0 220px 280px;
	padding: 25px 0 0 0;
}
#contact-form label {
	float: left;
	width: 145px;
	font-weight: bold;
	color: #0c4773;
	padding-top: 1px;
}
#contact-form input, #contact-form textarea, #contact-form select {color:#787878; font-family:Arial, Helvetica, sans-serif; font-size:1em; padding:1px; border:1px solid #b8bdc3}
#contact-form input {width:215px; padding:2px}
#contact-form textarea {width:420px}
#contact-form #frm-send, #contact-form #frm-reset{background:url(../images/bg_button.gif) left top repeat-x;
	border: 0;
	color: #fff;
	font-weight: bold;
	font-size: 1em;
	padding: 0px 12px 5px 12px;width:100px;}

/* 10.08 Produktübersicht
------------------------------------------------------------------*/
#content-out.plain {}
.plain #content-top {background:url(../images/bg_content_top_plain.png) left top no-repeat}
.plain #content-bottom {background:url(../images/bg_content_bottom_plain.png) left bottom no-repeat}
.plain #content {background:url(../images/bg_content_middle_plain.png) left top repeat-y}
#overview {
	background: url(../images/bg_overview_top.gif) left top repeat-x;
	margin: -5px 0 0 0;
}
#overview th {background:url(../images/bg_overview_th.gif) right bottom no-repeat; height:23px; padding:0; text-align:left}
#overview th img {margin:15px 0 10px 20px; padding:0}
#overview td {background:url(../images/bg_overview_td.gif) right bottom no-repeat; padding:9px 20px}
#overview td a{color:#777;}
#overview .detailsbg td {background:url(../images/bg_overview_td_details.gif) right bottom no-repeat}
#overview .details {background:url(../images/bg_showdetails.gif) left top no-repeat; display:block; height:24px; width:92px; color:#fff; font-size:90%; line-height:24px; text-align:center}
#overview .rightborder, #overview .detailsbg .rightborder {background-position:1px bottom}
#overview .detailsbg.bottomborder td {background-position:right -1px}
#overview .detailsbg.bottomborder td.rightborder {background-position:1px -1px}


/* 10.09 Distributoren
------------------------------------------------------------------*/
.dist .row {
	border-top: 1px solid #d0d3d8;
	clear: left;
	margin: 20px 0 0 0;
}
.dist .row .left {width:245px}
.dist .row .right {
	text-align: left;
	float: none;
	margin: 0 0 30px 245px;
}
.dist .row p {margin:0}
/* Row Country Selection */
.dist .row.country {margin-top:0; border-top:0}
.dist .row.country .left {padding:20px 0 0 13px; width:238px}
.dist .row .highl {color:#0d4671; margin-bottom:0.5em}
#frm-country select {font-family:Arial, Helvetica, sans-serif; color:#777; border:1px solid #b8bdc3; font-size:100%; margin:25px 0 0 0; width:150px}
/* Row Dists */
.dist .d-box {border-bottom:1px solid #d0d3d8; padding:18px 27px}
.dist h2 {font-size:1em; color:#0d4671; margin:-27px 0 0 13px; padding:0; position:relative}
.dist h2 img {margin-right:3px}
.dist .hghl {font-weight:bold}
.dist strong {color:#0d4671}
.dist .d-field {float:left; width:150px}

/* 10.10 Index
------------------------------------------------------------------*/
#content.index {position:relative}
.index #main {
	margin: 0 0 0 0;
	width: 900px;
	background: #fff url(../images/bg_index.gif) left top repeat-x;
}
#content-top {height:18px}
.index .row {padding:5px 25px 20px 25px; border-top:1px solid #D2D1D6}
.index #main .left {width:49%}
.index #main .left.padding {padding:30px 0 0}
#index-news h2{margin:-5px -25px 25px -25px; padding:5px 0 5px 25px; background:url(../images/bg_index_h2.gif) left bottom repeat-x}
/* 360 View */
#index-360 {border-top:0; padding-top:10px}
#index-360  h2 {margin:0 0 1em 0; padding:0}
#index-360 img {margin:5px 0 0 -10px}
/* Products */
#index-products h2{}
#index-products p {float:left; margin:0 12px 0 0}
/* News */
#index-news img {margin:0 15px 0 0}
#index-news h3 {margin:0.7em 0}

/* 10.11 Login
------------------------------------------------------------------*/
#main.login .main-head {
	margin: 0 -30px 0 -35px;
	height: 28px;
	padding: 26px 0 0 35px;
}
#main.login {margin:0 0 220px 280px; width:590px}
#sidebar-c {
	border-top: 1px solid #d2d1d6;
	text-align: center;
	margin-top: 54px;
	padding-top: 15px;
}
#frm-login {margin:15px 0 0 0}
#login-username, #login-password {
	border:1px solid #babec1;
	color:#787878;
	font-family:Arial, Helvetica, sans-serif;
	padding:1px 3px;
	width:200px;
	font-size:100%
}
#login-buttons input {
	background:url(../images/bg_button.gif) left top repeat-x;
	border: 0;
	color: #fff;
	font-weight: bold;
	font-size: 1em;
	padding: 0px 12px 5px 12px;
}
#login-send {margin-right:17px}
.login .main-head img {margin-right:5px; vertical-align:middle; padding-bottom:6px}

/* OVERLAY */

#overlay img{ border: none; }

#overlay{ background-image: url(../img/fnd/overlay.png); }

* html #overlay{
	background-color: #333;
	back\ground-color: transparent;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../img/fnd/overlay.png", sizingMethod="scale");
}
ul.pdf-download{border-top:1px solid lightgrey;}
ul.pdf-download li{margin-top:10px;}

/* Slider */

.next, .prev{
	float:left;
	margin-top:13px;
}
.next span, .prev span{
	display:none;
}

#index-products{
	position:relative;
	width:876px;
	padding:0 12px 0 12px;
	margin-bottom:30px;
}
#index-products h2{margin:0px -12px 25px -12px; padding:5px 0 5px 25px; background:url(../images/bg_index_h2.gif) left bottom repeat-x}
#index-products .prev{
	background: url(../img/fnd/btn_prev.gif);
	width:13px;
	height:138px;
}
#index-products .next{
	background: url(../img/fnd/btn_next.gif);
	width:13px;
	height:138px;	
}

#slideshow{
	overflow:hidden;
	width:846px;
	padding:0px;
	float:left;
}

#slideshow ul{
	width:3900px;
	padding-left:225px;
}

#slideshow li{
	float:left;
	margin:0 3px 0 3px;
	padding:0;
}