/*
	AUTOR: Karl Schwaier

	FARBWELT
	Links und Überschriften: #e30043 (rot)
	Text: #303030 (schwarz)

	INHALTSVERZEICHNIS
	- Grundlegendes
	- Klassen

	- Header
	- Body
		- Top bar
		- Side bar
		- Content
		- Footer

	- home
	- heads_content
	- heads_customer
	- heads_project
	- heads_team
*/



/* Grundlegendes
---------------------------------------------------------------------------------------------------------*/
body {
	background-color: #fff;
	background-image: url(/live/bh/gfx/bg_stripes.png);
	color: #303030;
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: 62.5%; /* 62.5% der Default-Schriftgröße sind ca. 10px */
	padding-bottom: 30px;
}
ul:after { /* Volle Höhe einer Liste mit gefloateten Elementen erzwingen (nur für FF, IE macht das fälschlicherweise richtig) */
	clear: left;
	content: "";
	display: block;
}
div#wrapper {
	background-color: #fff;
	border: 1px solid #ccc;
	border-top: 0;
	margin: 0 auto;
	width: 948px;
}
img#logo-print, div#current-url {
	display: none;
}


/* Klassen
---------------------------------------------------------------------------------------------------------*/
.clear {
	clear: both;
}

/* Links */
a.more, a.list, a.arrow {
	background-position: left center;
	background-repeat: no-repeat;
	padding: 1px 0px 1px 15px;
}
a.more:hover, a.list:hover, a.arrow:hover {
	border-bottom: 0 !important;
}
a.more {
	background: transparent url(/live/bh/gfx/icons.gif) 0 -17px no-repeat;
}
a.list {
	background: transparent url(/live/bh/gfx/icons.gif) 0 -79px no-repeat;
}
a.arrow {
	background: transparent url(/live/bh/gfx/icons.gif) 0 -48px no-repeat;
}

/* Floaten (von Bildern) */
.float-left {
	float: left;
	margin-right: 7px;
	margin-top: 3px;
}
.float-right {
	float: right;
	margin-left: 7px;
	margin-top: 3px;
}


/* Artikelliste */
ul.article-list li {
	border-bottom: 1px solid #eeeff3;
	clear: both;
	cursor: pointer;
	height: 90px;
	margin-bottom: 12px;
	padding-bottom: 12px;
}
ul.article-list li.hover div.text {
	background-color: #f8f8f8;
}
ul.article-list div.teaserimage {
	background: transparent url(/live/bh/gfx/rahmen_teaser.gif) left top no-repeat;
	float: left;
	height: 83px;
	padding: 4px 0 0 4px;
	width: 106px;
}
ul.article-list div.text {
	height: 86px;
	margin-left: 120px;
	padding: 3px 13px 0 5px;
	position: relative;
}
ul.article-list h3 {
	color: #e30043;
	font-size: 1.3em;
	font-weight: bold;
}
ul.article-list h3 a:hover {
	border-bottom: 0 !important;
}
ul.article-list h4 {
	font-weight: bold;
	margin-top: 2px;
}
ul.article-list p {
	bottom: 4px;
	padding-right: 10px;
	position: absolute;
}

/* Pagination */
div.pagination {
	color: #999;
	text-align: center;
}
div.pagination a {
	margin: 0 1px;
	padding: 1px 2px;
}
div.pagination a:hover, div.pagination a:hover span {
	border-bottom: 0 !important;
}
div.pagination a.prev-page {
	margin-right: 20px;
}
div.pagination a.next-page {
	margin-left: 20px;
}
div.pagination a.prev-page span, div.pagination a.next-page span {
	margin: 0 5px;
	text-decoration: underline;
}
div.pagination span.current-page {
	color: #000;
	padding: 1px 3px;
}

/* Lead- & Body-Text */
div.leadtext , div.bodytext  {
	padding-bottom: 1px; /* falls Links am Ende stehen, damit IE die Unterstreichung auch anzeigt */
}
div.leadtext p, div.bodytext p {
	margin-bottom: 15px;
}
div.leadtext img, div.bodytext img {
/* 	padding: 5px; */ /* Abstände durch alignment --> Klassen .float-left und .float-right */
}
div.leadtext ul, div.bodytext ul {
	margin-bottom: 15px;
	margin-left: 5px;
}
div.leadtext li, div.bodytext li {
	background: transparent url(/live/bh/gfx/pfeilchen_rot.gif) 0 0.5em no-repeat;
	padding-left: 15px;
}

/* Slider */
div.slider {
	background-color: #f7f7f7;
	background-image: url(/live/bh/gfx/slider_bg.gif);
	border: 1px solid #e9e9e9;
	height: 18px;
	overflow: hidden;
	position: relative;
}
div.ui-slider-handle {
	background: transparent url(/live/bh/gfx/slider_right.png) top right no-repeat;
	cursor: pointer;
	height: 14px;
	left: 0;
	padding-right: 10px;
	position: absolute;
	top: 2px;
	width: 50%;
}
div.ui-slider-handle div {
	background: transparent url(/live/bh/gfx/slider_left.png) top left no-repeat;
}

/* Fehler */
div.error {
	color: #e30043;
	font-weight: bold;
	margin-bottom: 15px;
}

/* Content-Navigation (bei Agentur > Dienstleistungen) */
div.contentnav {
	border-top: 1px solid #d8d9d3;
	margin-top: 25px;
	padding-top: 5px;
	width: 480px;
}
div.contentnav div {
	float: left;
	width: 240px;
}
div.contentnav div.next {
	text-align: right;
}


/* Header
---------------------------------------------------------------------------------------------------------*/
div#header {
	background: #fff url(/live/bh/gfx/header_kl.jpg) top left no-repeat;
	height: 160px;
	position: relative;
}
div#logo {
	right: 32px;
	top: 0;
	position: absolute;
}

/* Hauptnavigation */
ul#main-nav {
	bottom: 18px;
	left: 15px;
	position: absolute;
	text-align: center;
}
ul#main-nav li {
	float: left;
}
ul#main-nav li a {
	display: block;
	padding-right: 10px;
}
ul#main-nav li a span {
	display: block;
}
/* - Sliding doors */
ul#main-nav li.highlighted a , ul#main-nav li.current a  {
	background: transparent url(/live/bh/gfx/mainnav_bg_right.png) top right no-repeat;
}
ul#main-nav span.door-left {
	padding-top: 5px;
}
ul#main-nav li.highlighted span.door-left, ul#main-nav li.current span.door-left {
	background: transparent url(/live/bh/gfx/mainnav_bg_left.png) top left no-repeat;
}
/* - Sprites */
ul#main-nav li a span.sprite {
	margin-left: 10px;
	padding: 0 5px;
}
ul#main-nav li.highlighted a span.sprite, ul#main-nav li.current a span.sprite {
	background-image: url(/live/bh/gfx/mainnav_icons_default.png);
	background-repeat: no-repeat;
}
span#sprite1 {
	background-position: center -10px;
}
span#sprite2 {
	background-position: center -85px;
}
span#sprite3 {
	background-position: center -160px;
}
span#sprite4 {
	background-position: center -235px;
}
span#sprite5 {
	background-position: center -310px;
}
/* - Schrift */
ul#main-nav li img {
	padding-top: 67px;
}
ul#main-nav li img.navimage {
	display: block;
}
ul#main-nav li img.navimage-hover {
	display: none;
}
ul#main-nav li.highlighted img.navimage {
	display: none;
}
ul#main-nav li.highlighted img.navimage-hover {
	display: block;
}
/* bei Mouseover über aktuellem Menüpunkt nicht austauschen */
ul#main-nav li.current img.navimage {
	display: block !important;
}
ul#main-nav li.current img.navimage-hover {
	display: none !important;
}


/* Body
---------------------------------------------------------------------------------------------------------*/
div#body {
	font-size: 1.2em;
	margin: 0 32px;
}
div#body a {
	color: #e30043;
	text-decoration: none;
}
div#body a:hover, div#body a:hover span {
	border-bottom: 1px dotted #e30043;
}
div#body a.imagelink:hover {
	border-bottom: 0 !important;
}


/* Top bar
---------------------------------------------------------------------------------------------------------*/
div#topbar {
	border-bottom: 1px solid #d8d9e3;
	margin-bottom: 33px;
	padding-bottom: 5px;
	position: relative;
}

/* Breadrcumb */
div#breadcrumb {
	font-size: 0.9em;
	padding-bottom: 1px; /* IE braucht das, um die Unterstreichung anzuzeigen */
}
div#breadcrumb span.path {
	color: #e30043;
}

/* Link zum Drucken */
a#print-link {
	background: transparent url(/live/bh/gfx/icons.gif) 0 -109px no-repeat;
	font-size: 0.9em;
	padding: 1px 0 1px 15px;
	position: absolute;
	right: 0;
	top: 0;
}
a#print-link span {
	color: #41435a;
}
a#print-link:hover {
	border-bottom: 0 !important;
}
a#print-link:hover span {
	border-bottom-color: #41435a !important;
}


/* Side bar
---------------------------------------------------------------------------------------------------------*/
div#sidebar {
	float: left;
	margin-right: 36px;
	width: 133px;
}

#neu_adresse a, #neu_adresse a:hover {
      text-decoration:none;
}
div#sub-nav {
	background: #fff url(/live/bh/gfx/subnav_bg.gif) top left repeat-y;
}
div#sub-nav-top {
	background: transparent url(/live/bh/gfx/subnav_top.gif) top left no-repeat;
	padding-top: 11px;
}
div#sub-nav-bottom {
	background: transparent url(/live/bh/gfx/subnav_bottom.gif) bottom left no-repeat;
	padding-bottom: 40px; /* subnav_bottom.gif ist 21px hoch */
}
div#sub-nav h1 {
	color: #fff;
	font-size: 1.4em;
	font-weight: bold;
	margin-bottom: 10px;
	margin-left: 24px;
}
/* Level 1 */
div#sub-nav ul.level1 {
	margin-left: 10px;
}
div#sub-nav ul.level1 a {
	color: #fff;
	padding-left: 15px;
}
div#sub-nav ul.level1 a:hover, div#sub-nav a.current {
	background: transparent url(/live/bh/gfx/subnav_pfeilchen.gif) 0 5px no-repeat;
	font-weight: bold;
}
/* Level 2 (Spezial-SubNav: customer categories) */
div#sub-nav ul.level2 {
	margin-bottom: 5px;
	margin-left: 20px !important;
	width: 100px;
}
div#sub-nav ul.level2 li {
	background: transparent url(/live/bh/gfx/subnav_pfeilchen.gif) -5px 3px no-repeat;
	font-size: 0.9em;
	line-height: 1.2em;
	margin-bottom: 3px;
	padding-left: 5px;
}
div#sub-nav ul.level2 a {
	padding-left: 0;
}
div#sub-nav ul.level2 a:hover, div#sub-nav ul.level2 li.current a {
	background: none;
	font-weight: normal;
	text-decoration: underline;
}
/* Sprechblasentext auf der Startseite */
/* wird jetzt als Grafik dargestellt
div#sub-nav div.message {
	color: #fff;
	font-size: 1.3em;
	font-weight: bold;
	margin: 13px 5px 0 5px;
	text-align: center;
}
*/

/* Lady */
img#lady {
	margin-left: 15px;
	margin-top: 5px;
}


/* Content
---------------------------------------------------------------------------------------------------------*/
div#content {
	float: left;
	width: 715px;
}
div#content div#col1 {
	float: left;
	width: 390px;
}
div#content div#col2 {
	float: right;
	width: 305px;
}
div#content h2 {
	font-size: 1.5em;
	font-weight: bold;
	margin-bottom: 17px;
}


/* Footer
---------------------------------------------------------------------------------------------------------*/
div#footer {
	border-top: 1px solid #e3e2e2;
	color: #707281;
	font-size: 0.9em;
	line-height: 1.7em;
	margin-top: 15px;
	padding: 15px 0;
	position: relative;
	text-align: center;
}
/* Pfeil um nach oben zu kommen */
div#footer a.arrow-top {
	position: absolute;
	right: 0;
	top: -8px;
}
div#footer a.arrow-top img {
	display: block;
}
div#footer a.arrow-top:hover {
	border-bottom: 0;
}


/* HOME
---------------------------------------------------------------------------------------------------------*/
div.home h1 {
	color: #e30043;
	font-size: 1.3em;
	font-weight: bold;
	margin-bottom: 20px;
}
div.home h2 {
	font-size: 1em !important;
}

/* Showcase */
div.home div#showcase {
	background-color: #f0f0f0;
	height: 223px;
	padding: 17px 0 10px 16px;
	position: relative;
	width: 699px;
}
div.home div#showcase div.project {
	left: 17px;
	position: absolute;
	top: 17px;
}
div.home div#showcase div.text {
	float: left;
	margin-right: 40px;
	margin-top: 33px;
	width: 210px;
}
div.home div#showcase h2 {
	margin-bottom: 8px;
}
div.home div#showcase div.bodytext {
	margin-bottom: 15px;
}
div.home div#showcase a.more, div.home div#showcase a.arrow {
	display: block;
	margin-bottom: 3px;
}
div.home div#showcase div.switch {
	bottom: 5px;
	left: 265px;
	position: absolute;
}
div.home div#showcase div.switch a {
	cursor: default;
	margin: 0 2px;
}
div.home div#showcase div.switch a:hover {
	border-bottom: 0;
}

/* Boxen */
div.home div.box {
	border-top: 1px solid #d8d9e3;
	float: left;
	height: 24em; /* damit der Footer nicht zittert, wenn das News-Box-Akkordeon benutzt wird */
	margin-top: 20px;
	padding: 9px 10px 0 15px;
	width: 197px;
}
div.home div.box h1 {
	margin-bottom: 13px;
}
/* Box 1: Services */
div#box-services {
	margin-right: 24px;
}
div#box-services a {
	color: #000;
	line-height: 1.7em;
}
div#box-services a:hover {
	color: #e30043;
}
/* Box 2: Software */
div#box-software {
	margin-right: 24px;
}
div#box-software h2 {
	margin-bottom: 12px;
}
div#box-software p {
	margin-bottom: 10px;
}
/* Box 3: News */
div#box-news {
	padding-left: 0;
	padding-right: 0;
	width: 221px;
}
div#box-news h1 {
	margin-left: 10px;
}
div#box-news ul {
	margin-top: -7px;
}
div#box-news li {
	border-bottom: 1px solid #d8d9e3;
	padding: 0 3px 5px 10px;
}
div#box-news li h2 {
	cursor: pointer;
	margin-bottom: 0;
	padding: 5px 0;
}
div#box-news li div {
	padding-bottom: 5px;
}
div#box-news li a.more {
	display: block;
	margin-top: 5px;
}
div#box-news li.active {
	background-image: url(/live/bh/gfx/bg_stripes_news.gif);
}


/* HEADS_CONTENT
---------------------------------------------------------------------------------------------------------*/
/* Listenansicht */
div.heads_content ul.article-list li {
	height: auto;
}
div.heads_content ul.article-list div.text {
	height: auto;
	margin-left: 0;
	padding-right: 180px;
}
div.heads_content ul.article-list div.text p {
	margin-top: 7px;
	position: static;
}
div.heads_content div.pagination {
	padding-right: 180px;
}

/* Artikelansicht */
div.heads_content h2, div.heads_content div.bodytext, div.heads_content div.leadtext {
	width: 480px;
}
div.heads_content div.leadtext {
	font-weight: bold;
	margin-bottom: 15px;
}

/* Spezielle Artikelansicht bei Software */
div#heads_software h2, div#heads_software div.bodytext, div#heads_software div.leadtext {
	width: auto;
}
div#heads_software div#col2 {
	padding-top: 7px;
}
div#heads_software div#col2 h3 {
	font-size: 1.1em;
	font-weight: bold;
	margin-bottom: 15px;
}
div#heads_software div#col2 ul {
	margin-bottom: 35px;
}
div#heads_software div#col2 li {
	background-repeat: no-repeat;
	background-position: 0 2px;
	margin-bottom: 2px;
	padding-bottom: 5px;
	padding-left: 22px;
}
div#heads_software div#col2 ul.finished li {
	background-image: url(/live/bh/gfx/icon_arrow_red.gif);
}
div#heads_software div#col2 ul.under-construction li {
	background-image: url(/live/bh/gfx/icon_arrow_black.gif);
}

/* Kontaktformular */
div#contact h2, div#contact div.bodytext, div#contact div.leadtext {
	width: auto;
}
div#contact legend {
	font-size: 1.1em;
	font-weight: bold;
	margin-bottom: 15px;
}
div#contact form div.block {
	margin-bottom: 5px;
}
div#contact label {
	display: block;
	float: left;
	width: 80px;
}
div#contact label.focus {
	color: #e30043;
}
div#contact form .input {
	border: 1px solid #ccc;
	font-size: 0.9em;
	padding: 0.2em;
	width: 130px;
}
div#contact form input.focus, div#contact form textarea.focus {
	background-color: #f5f5f5;
	border: 1px solid #999;
}
div#contact textarea {
	height: 140px;
	width: 200px !important;
}
div#contact input.submit {
	font-size: 1em;
	margin-left: 80px;
	margin-top: 10px;
	padding: 3px 6px;
}
div#contact div.error {
	margin-bottom: 15px;
}
div#contact div.thanks {
	font-weight: bold;
}


/* HEADS_CUSTOMER
---------------------------------------------------------------------------------------------------------*/
/* Listenansicht */
div.heads_customer ul.article-list div.teaserimage {
	text-align: center;
}
div.heads_customer ul.article-list div.teaserimage img {
	left: -3px; /* Zentrierung korrigieren (wegen Schatten) */
	position: relative;
}

/* Artikelansicht - col1 */
div.heads_customer div#col1 h2 {
	margin-bottom: 3px;
}
div.heads_customer div#col1 div.website {
	margin-bottom: 25px;
}
div.heads_customer div#col1 div.lead {
	font-weight: bold;
}
div.heads_customer div#col1 div.lead img {
	border: 1px solid #d9dae4;
	float: left;
	margin-right: 10px;
	padding: 4px;
}
div.heads_customer div#col1 div.bodytext {
	clear: both;
	padding: 14px 0;
}
/* Artikelansicht - col2 */
div.heads_customer div#col2 h3 {
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 13px;
}
div.heads_customer div#col2 div.projects {
	height: 455px;
	overflow: hidden;
	position: relative;
	width: 305px;
}
div.heads_customer div#col2 div.sliding-container {
	position: relative;
}
div.heads_customer div#col2 ul.article-list {
	position: absolute; /* Positionierung erfolgt über JavaScript */
	width: 305px;
}
div.heads_customer div#col2 ul.article-list div.text {
	padding-right: 5px;
}
div.heads_customer div#col2 ul.article-list div.text p {
	padding-right: 5px;
	position: static;
}
div.heads_customer div#col2 ul.article-list h3 {
	font-size: 1em;
	margin-bottom: 2px;
}
div.heads_customer div#col2 ul.article-list p {
	font-size: 0.9em;
}
div.heads_customer div#col2 div.slider {
	width: 300px; /* slider wird dann per JavaScript auf die richtige Größe von 305px gebracht - Bugfix damit der Handle rechts nich hinaus fährt */
}


/* HEADS_PROJECT
---------------------------------------------------------------------------------------------------------*/
/* col1 */
div.heads_project div.links a {
	display: block;
}
/* Screenshots */
div.heads_project div#screenshots {
	margin-top: 18px;
}
div.heads_project div#screenshots div.medium {
	background: transparent url(/live/bh/gfx/rahmen_gr.jpg) left top no-repeat;
	height: 302px;
	padding: 3px 0 0 2px;
	width: 387px;
}
div.heads_project div#screenshots div.medium a:hover {
	border-bottom: 0;
}
div.heads_project div#screenshots div.thumbnails {
	display: none;
	height: 155px;
	margin-top: 10px;
	overflow: hidden;
	position: relative;
	width: 390px;
}
div.heads_project div#screenshots div.sliding-container {
	position: relative;
}
div.heads_project div#screenshots div.small {
	background: transparent url(/live/bh/gfx/rahmen_kl.jpg) left top no-repeat;
	height: 146px;
	padding: 4px 0 0 3px;
	position: absolute; /* Positionierung erfolgt über JavaScript */
	width: 186px;
}
div.heads_project div#screenshots div.small img {
	cursor: pointer;
}
div.heads_project div.slider {
	width: 376px; /* slider wird dann per JavaScript auf die richtige Größe von 383px gebracht - Bugfix damit der Handle rechts nich hinaus fährt */
}

/* col2 */
div.heads_project div#col2 div.bodytext {
	margin-bottom: 15px;
	margin-top: 95px;
}
/* Projektteam */
div.heads_project div.team {
	background-color: #f7f7f9;
	border: 1px solid #f1f1f2;
	margin-top: 37px;
	padding: 9px;
}
div.heads_project div.team strong {
	display: block;
	font-size: 1.1em;
	margin-bottom: 5px;
}
div.heads_project div.team div.tooltip { /* versteckter Tooltip mit den Infos */
	display: none;
}
div.team-tooltip { /* wird mit overLib angezeigt - befindet sich dann aber nicht unter div.heads_project im DOM tree */
	background: #fff;
	border: 1px solid #999;
	padding: 5px;
	width: 116px;
}


/* HEADS_TEAM
---------------------------------------------------------------------------------------------------------*/
/* Listenansicht */
div.heads_team h3.group {
	border-bottom: 1px solid #eeeff3;
	clear: both;
	color: #e30043;
	font-size: 0.9em;
	margin-bottom: 17px;
}
/* Team-Liste */
div.heads_team ul.team-list {
	margin-bottom: 10px;
}
div.heads_team ul.team-list li {
	float: left;
	height: 104px;
	margin-right: 10px;
	padding-bottom: 26px; /* bei margin verschlingt der IE den Abstand bei den letzten beiden Elementen der Liste */
	width: 341px;
}
div.heads_team ul.team-list a.foto {
	display: block;
	float: left;
}
div.heads_team ul.team-list a.foto:hover {
	border-bottom: 0 !important;
}
div.heads_team ul.team-list div.text {
	height: 90px;
	margin-left: 126px;
	margin-top: 14px;
	position: relative;
}
div.heads_team ul.team-list div.name {
	font-size: 1.2em;
	font-weight: bold;
}
div.heads_team ul.team-list div.job {
	font-size: 0.8em;
	margin-bottom: 1px;
}
div.heads_team ul.team-list div.email {
	height: 18px;
	overflow: hidden;
}
div.heads_team ul.team-list div.phone {
	margin-top: 1px;
}
div.heads_team ul.team-list a.more {
	bottom: 0;
	position: absolute;
}

/* Artikelansicht */
div.heads_team div.single img#foto {
	float: left;
}
div.heads_team div.single h3 {
	font-size: 1.3em;
	font-weight: bold;
}
div.heads_team div.single h3 span {
	font-size: 0.6em;
}
div.heads_team div.single div.text {
	margin-left: 132px;
}
div.heads_team div.single div.contact {
	border-bottom: 1px solid #d8d9e3;
	border-top: 1px solid #d8d9e3;
	margin-bottom: 17px;
	padding: 15px 0;
}
div.heads_team div.single div.bodytext {
	margin-bottom: 10px;
	width: 460px;
}
div.heads_team div.single div.video {
	margin-bottom: 20px;
}