@charset "UTF-8";
/*------------------------------------------------------------------ 
[Inhalt] 
0. Initialisierung
1. Body  / body #wrapper
2. Header / #header 
3. Navigation / #nav 
4. Content / #content 
5. Left column / #left 
6. Right column / #right 
7. Footer / #footer
8. Search / #search
9. Specials / z. b. jQuery-Plugins 

[Farben]
mittelgrau --- #666 ------ typo text, tabellenlinien, visited (content-link)
hellgrau ----- #999 ------ typo breadcrumb, navigation, content-link
oliv --------- #  Alternative: # 86AA48 oder # 127A6F --- typo heads ohne h1, content-img-border
orange ------- #FF8200 --- typo h1, active (navigation, breadcrumb), hover (toolbar, breadcrumb, navigation, content-link, footer)
? ------------ #ECF3F9 --- form input-bg
? ------------ #D9E6F3 --- form input-bg-focus

[Typo]
Verdana
 -------------------------------------------------------------------*/

/*------------------------------------------------------------------ 
-0. Initialisierung
 -------------------------------------------------------------------*/
/* reset styles */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, a, abbr, acronym, del, dfn, em, font, img, small, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0; margin: 0; padding: 0; vertical-align: baseline;}
ol, ul {list-style: none;}
table {border-collapse: separate; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}

/* @font-face */
@font-face {
	font-family: 'DroidSansRegular';
	src: url('fonts/DroidSans-webfont.eot');
	src: local('☺'), url('fonts/DroidSans-webfont.woff') format('woff'), url('fonts/DroidSans-webfont.ttf') format('truetype'), url('fonts/DroidSans-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}


/* ---------------- wrapper ------------------- */
#wrapper {background: url(../images/basic/bg-content-1000.png) repeat-y #FFF; color: #666; font-size: 1.1em; margin-left: auto; /*  3 zeilen hack fuer zentrierung */ margin-right: auto; text-align: left; width: 1000px;}


/* ---------------- skip navigation ------------------- */
#skipnav {left: -1000px; overflow: hidden; position: absolute; top: -100px; width: 10em; z-index: 2;}
#skip1 a:focus, #skip1 a:active {background: #FFF; color: #000; text-decoration: underline; z-index: 99;}
#blah:active {}


/*------------------------------------------------------------------ 
-1. Body
 -------------------------------------------------------------------*/
body {background: url(../images/basic/bg-browser.png) repeat-x #B0E8EB; color: #666; font: 62.5%/75% 'DroidSansRegular', Verdana, Arial, Helvetica, sans-serif; /* ab jetzt ist 1 em = 10px */ letter-spacing: 0.02em; text-align: center; /*  hack fuer zentrierung */}
	
p, h1, h2, h3, h4, h5, h6, ul, ol {margin-bottom: 15px;}

h1, h2, h3, h4, h5, h6 {color: #8A9E66;}
h1 {color: #FF8200; font-size: 2.1818em; font-weight: normal; line-height: 1; margin-bottom: 5px; }
h2 {font-size: 1.4545em; font-weight: normal; line-height: 1.3; margin: 40px 0 5px;}
h2.subline {margin: 0 0 30px;}
h3 {font-size: 1.1818em; font-weight: normal; margin: 30px 0 5px;}
h4 {font-size: 1.0909em; font-weight: normal; margin-bottom: 0;}
p {font-size: 1.0909em; line-height: 1.5;}

strong {font-weight: bold; letter-spacing: 0;}
strong.important {color: #8A9E66; font-size: 1.1em; font-weight: normal;}
em {font-style: italic;}

table {border-collapse: collapse; border-spacing: 5px;}
td, th {border-bottom: 1px solid #666; padding-left: 0; text-align: left; vertical-align: top;}
th {font-weight: bold;}

form label {cursor: pointer; display: block; margin: 20px 0 -10px;}
textarea, input {background: #ECF3F9; width: 400px;}
textarea, input {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em;}
input#reset, input#submit {background: none; margin-right: 20px; margin-top: 20px; width: auto;}
input:focus, select:focus, textarea:focus {background: #D9E6F3;}

img {border: none; font: 80%/100% Verdana, Arial, Helvetica, sans-serif;} /* fuer browser ohne bilddarstelllung */
a img {border: none; color: #666;}
abbr[title] {border-bottom: 1px #666 dotted; cursor: help;}


/*------------------------------------------------------------------ 
-2. Header
 -------------------------------------------------------------------*/
#header {background: url(../images/basic/bg-header-1000.jpg) no-repeat #FFF; height: 120px;}
#logo {padding: 20px 0 0 20px; position: relative; z-index: 1;}
#logo h3 {color: #FFF; display: inline; font-size: 1.1818em; font-weight: normal; left: 5px; position: relative; top: 26px; vertical-align: top; z-index: 2;}

#toolbar {color: #FFF; margin-left: 720px;}
#toolbar a:link, #toolbar a:visited {color: #FFF; text-decoration: none;}
#toolbar a:hover {color: #FF8200; text-decoration: none;}

#breadcrumb {color: #999; font-size: 1em; margin-top: 30px; margin-left: 310px;}
#breadcrumb span.active {color: #FF8200;}
#breadcrumb a {color: #999; font-weight: normal; text-decoration: none;}
#breadcrumb a:hover {color: #FF8200; text-decoration: none;}

	
/*------------------------------------------------------------------ 
-3. Navigation
 -------------------------------------------------------------------*/
#nav {background-color: #FFF; color: #999; font-size: 1.1818em; /*1em = 11px*/ float: left; line-height: 1.2; margin: 122px 0 30px 10px; width: 270px;}
#nav ul.landing-nav {margin-top: 20px;}

#nav ul {list-style-type: none; margin: -5px 0 10px 0px;}
#nav li {margin-bottom: 5px;}
#nav ul li a {display: block; margin-left: 60px;}
#nav ul ul {margin: 5px 0 0;}
#nav ul ul li a {display: block; margin-left: 75px;}
#nav ul ul li span.nolink {display: block; margin-left: 75px;}

#nav a:link, #nav a:visited {color: #999; text-decoration: none;}
#nav a:hover {color: #FF8200; text-decoration: none;}
		
#nav ul li.naviactive {background: url(../images/basic/bg-nav-level1.gif) no-repeat 0px 4px;} /* aktives level 1 */
#nav ul li.naviactive a {color: #FF8200;} /* aktives level 1 */
#nav ul li.naviactive ul li a {color: #999;} /* level-2-links bei aktivem level 1*/
#nav ul li.naviactive ul li a:hover {color: #FF8200; text-decoration: none;} /* level-2-links bei aktivem level 1*/
#nav ul ul li.subnaviactive {background: url(../images/basic/bg-nav-level2.gif) no-repeat 0 4px; color: #FF8200;} /* aktives level 2 */
#nav ul li.navspacer {border-top: 1px solid #CCC; margin-top: 20px; padding-top: 15px;}


/*------------------------------------------------------------------ 
-4. Content
 -------------------------------------------------------------------*/
#content {background-color: #FFF; float: left; font-size: 1.0833em; line-height: 1.5em; margin: 30px 0 50px 30px; width: 570px;}
#content.marginlayout {width: 500px;}
	
#content a:link {border-bottom: 1px dotted #999; color: #999; text-decoration: none;}
#content a:visited {border-bottom: 1px dotted #999; color: #666; text-decoration: none;}
#content a:hover {border-bottom: 1px dotted #FF8200; color: #FF8200; text-decoration: none;}

#content a.btn_intern {background-color: #FF8200; border-bottom: none; color: #FFF; padding: 1px 4px 2px; 
	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,.3);
	-moz-box-shadow: 1px 1px 4px rgba(0,0,0,.3);
	box-shadow: 1px 1px 4px rgba(0,0,0,.3);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	background: -webkit-gradient(linear, left top, left bottom, from(#FFAC55), to(#FF8200));
	background: -moz-linear-gradient(top,  #FFAC55,  #FF8200);
	text-shadow: 0 1px 1px rgba(0,0,0,.3);}
	
#content .caption {font-size: 0.8181em; line-height: 1em;}
#content .totop {clear: both; display: block; font-size: 1em; margin-top: 20px;}
#content .totop a:link {font-weight: normal;}

#content .smallspace {margin-bottom: 5px;}
#content .bigspace {height: 130px;}

#content img {border: 1px solid #8A9E66; border-bottom: 0; border-right: 0; margin-bottom: 20px; vertical-align: top;}
#content img.inline {display:inline; border: none;}
#content img.imgrow, #content img.imgpur {border: none; margin-bottom: 10px;} 
#content img.imgrow {margin-right: 15px;}
#content a.imglink {border-bottom: none;}
#content img.subline {margin-bottom: 0;}
#content img.shadow {border: none; 
	-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,.3);
	-moz-box-shadow: 2px 2px 6px rgba(0,0,0,.3);
	box-shadow: 2px 2px 6px rgba(0,0,0,.3);}

#content span.subline {display: block; font-size: 0.8181em;}
#content .small {font-size: 0.8181em;}

#content ul {font-size: 1.0909em; list-style-image: url(../images/basic/bullet.gif); margin: 5px 0 10px 15px;}
#content li {line-height: 1.4; margin-bottom: 5px;}
#content ul.nobullet {list-style-image: none; margin: 5px 0 10px 0;}
#content ul.nobullet li {margin-bottom: 20px;}
#content ul.nobullet li h3 {font-weight: normal; margin: 0;}

#content .row {margin-bottom: 20px; overflow: auto;}
#content .row .leftcol {float: left; text-align: left; width: 250px;}
#content .row .rightcol {float: right; text-align: left; width: 250px;}

/* to-top-button */
#content #back-top {bottom: 60px; margin-left: -120px; position: fixed;}
#content #back-top a {border-bottom: none; display: block; text-align: center; text-decoration: none; width: 80px;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	}
#content #back-top a:hover {color: #FF8200;}
/* arrow icon (span tag) */
#content #back-top span {background: url(../images/basic/button-to-top.png) no-repeat 0 0; display: block; height: 30px; margin: 0 auto 7px; width: 28px;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	}
#content #back-top a:hover span {background-color: #FF8200;}

.addspace {margin-top: 30px;}
iframe.piwikoptout {border: 1px solid #999; overflow: visible; margin-bottom: 20px;}


/*------------------------------------------------------------------ 
-5. Left column
 -------------------------------------------------------------------*/
#left {float: left; width: 280px;}
#left p {font-size: 1em; line-height: 1.4; margin-left: 70px;}
#left p img {margin: 0;}
#left p a {color: #999; text-decoration: none;}
#left p a:hover {color: #FF8200;}


/*------------------------------------------------------------------ 
-6. Right column
 -------------------------------------------------------------------*/
 /* special-navigation auf home: subrubriken der kundenbereiche */
#right ul.specialnav {background-color: #C9CAB5; color: #FFF;}
#right ul.specialnav li {border-bottom: 1px solid #FFF; color: #FFF; padding: 3px 3px 3px 7px;}
#right ul.specialnav li a {background-color: transparent; color: #FFF; display: block; padding-bottom: 3px;}
#right ul.specialnav li a:visited {color: #FFF; text-decoration: none;}
#right ul.specialnav li:hover {background-color: #FF8200; text-decoration: none;}
 
#right {float: right; line-height: 1.2; margin-right: 40px; margin-top: 98px; width: 140px;}
#right ul {line-height: 1.2;}
#right ul li {padding-bottom: 7px;}
#right a:link, #right a:visited {background-color: #FFF; color: #999; text-decoration: none;}
#right a:hover {color: #FF8200; text-decoration: none;}


/*------------------------------------------------------------------ 
-7. Footer
 -------------------------------------------------------------------*/
#footer {background: url(../images/basic/bg-footer-1000.png) #CFCF85; clear: both; color: #FFF; height: 60px; margin-top: 80px;}
#footer p {font-size: 1.091em; line-height: 1; margin-left: 310px; padding-top: 10px;}
#footer a:link, #footer a:visited {color: #FFF; text-decoration: none;}
#footer a:hover {color: #FF8200; text-decoration: none;}


/*------------------------------------------------------------------ 
-8. Search
 -------------------------------------------------------------------*/
 
 
 /*------------------------------------------------------------------ 
-9. Specials
 -------------------------------------------------------------------*/ 
/* ---------- galleriffic ---------- */
/* css in der externen dd-galleriffic.css-datei (noch z.T.) */
/* basis-layout */
#portfolio {font-size: 1em; line-height: 1.5; margin-left: 60px; margin-top: 30px; width: 870px;}
#portfolio h1, #portfolio h2, #portfolio h3, #portfolio h4, #portfolio p {padding-left: 10px;}
#portfolio h4 {margin-top: 5px; margin-bottom: 2px;}
#portfoliobox {background: url(../images/basic/bg-portfolio.png) top left no-repeat; height: 450px;}

.gallery-content {
	/* The display of content is enabled by a javascript generated style on the page. This is so that the slideshow content won't display unless javascript is enabled. */
	display: none; float: left; width: 630px;}

/* navigation unterhalb des hauptbildes, für dd-portfolio deaktiviert */
/*.gallery-content a, .gallery-navigation a {color: #999; text-decoration: none;}
.gallery-content a:focus, .gallery-content a:hover, .gallery-content a:active {text-decoration: underline;}
#controls {width: 630px;}
.controls {padding: 0;}
#portfolio .controls a:link {border-bottom: none;}
.ss-controls {float: left;}
.nav-controls {float: right;}*/

#loading .loader {background-image:  url('loader.gif'); background-position: center; background-repeat: no-repeat; height: 410px; width: 580px;}
#slideshow {height: 410px; margin: 20px 0 0 20px;}
#portfolio .slideshow {clear: both;}
#portfolio .slideshow span.image-wrapper {float: left; width: 580px;}
#portfolio .slideshow a.advance-link {display: block; text-decoration: none;}
#portfolio .slideshow img {border: none; display: block; margin-bottom: 5px;}
/*.embox {clear: both; font-size: 1em;}*/

/* formatierung der captions */
#portfolio #caption {float: left; margin-bottom: 50px; margin-top: 5px; width: 600px;}
#portfolio #caption h2 {font-size: 1.4545em;}
#portfolio #caption p {font-size: 1.1818em;}
#portfolio #captionmargin {float: right; margin-bottom: 50px; margin-top: 5px; width: 235px;}
#portfolio #captionmargin h2 {font-size: 1.4545em; margin-left: 25px;}
#portfolio #captionmargin ul.checklist {margin: 0 0 0 10px;}
#portfolio #captionmargin ul.checklist li {background: url(../images/basic/check.gif) 0 0 no-repeat; font-size: 1.1818em; padding: 0 0 5px 25px;}
#portfolio #caption a:link, #portfolio a:link.back, #portfolio a:visited.back {border-bottom: 1px dotted #999; color: #999; text-decoration: none;}
#portfolio #caption a:visited {border-bottom: 1px dotted #999; color: #666; text-decoration: none;}
#portfolio #caption a:hover, #portfolio a:hover.back {border-bottom: 1px dotted #FF8200; color: #FF8200; text-decoration: none;}

#portfolio a.back {margin-left: 668px;}

.gallery-navigation {/* The navigation style is set by a javascript generated style on the page. This is so that the javascript specific styles won't be applied unless javascript is enabled. */}

/* thumbs-navigation bei mehr thumbs als für eine seite vorgesehen: seite 1, 2, etc. */
#portfolio #thumbs .top {display: none;}

/* thumbs-styles */
a.thumb {border: 3px solid #FFF; display: block;}
a.thumb:focus {outline: none;}
#portfolio ul.thumbs {clear: both; margin: 0; padding: 0;}
#portfolio #thumbs ul.thumbs img {/*border: none;*/ display: block;}
#portfolio ul.thumbs li {float: left; list-style: none; padding: 0; padding-left: 24px; padding-bottom: 24px;}
#portfolio ul.thumbs li.selected a.thumb, a.thumb:hover {border: 3px solid #FF8200;}
#portfolio ul.thumbs li.selected a.thumb img {}

/* für dd-portfolio deaktiviert */
/*.pagination {clear: both;}
.gallery-navigation div.top {height: 11px; margin-bottom: 12px;}
.gallery-navigation div.bottom {margin-top: 12px;}
.pagination a, .pagination span.current {border: 1px solid #ccc; display: block; float: left; margin-right: 2px; padding: 4px 7px 2px 7px;}
.pagination a:hover {background-color: #eee; text-decoration: none;}
.pagination span.current {background-color: #000; border-color: #000; color: #fff; font-weight: bold;}*/

/* Minimal Gallery Styles */
/*#thumbs-min ul.thumbs li {float: none; list-style: none; margin: 0; padding: 0;}
#thumbs-min a.thumb {border: none; display: inline; padding: 0px;}
#thumbs-min ul.thumbs li.selected a.thumb {background: inherit; color: #000; font-weight: bold;}*/

/* ende galleriffic */


/* ---------- jquery-ui-tabs ---------- */
#content .ui-widget {font-family: 'DroidSansRegular', Verdana, Arial, Helvetica, sans-serif; font-size: 1.2em;}
#content div#tabs {background-color: #FCFFED; border: none; margin: 50px 0;}
#content div#tabs h4 {font-size: 1.093em;}
#content div#tabs div {background-color: #FCFFED;}
#content div#tabs ul.tabslist {list-style-image: none; margin: 0;} /* von mir vergebene klasse, zur unterscheidung zu listen in den einzelnen tabs */
#content div.ui-tabs, #content ul.ui-tabs-nav {padding: 0;}
#content div.ui-tabs p {color: #666; font-size: 1em;}
#content .ui-tabs, #content .ui-tabs-nav li {margin: 0;}
#content .ui-tabs-nav li a:link {border-bottom: none; color: #8A9E66;}
#content .ui-widget-header {background-image: none; background-color: #FFF; border: none;}
#content .ui-state-active, #content .ui-widget-content, #content .ui-state-active {background-image: none; background-color: #FCFFED;}
#content .ui-tabs-panel {border: 1px solid #AAAAAA; border-top: none;}
#content .ui-tabs-selected {padding-bottom: 0;}
#content div#tabs ul {color: #666; font-size: 0.909em; list-style-image: url(../images/basic/bullet.gif); margin: 5px 0 10px 15px;}
 

/* ---------- jQuery Carousel ---------- */
 /* dd-korrektur */
#content ul#slideshow {margin: 0; padding: 0;}
#content .jcarousel-container img {border: none;}
.jcarousel-container {/*border: 1px solid #8A9E66;*/}

/* css3 dd */
.jcarousel-container {-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,.3);
	-moz-box-shadow: 2px 2px 6px rgba(0,0,0,.3);
	box-shadow: 2px 2px 6px rgba(0,0,0,.3);}

/* This <div> element is wrapped by jCarousel around the list and has the classname "jcarousel-container" */
.jcarousel-container {margin-left: 0px; padding-top: 0px; position: relative;}
.jcarousel-clip {overflow: hidden; padding: 0; position: relative; margin: 0; z-index: 2;}
.jcarousel-list {overflow: hidden; left: 0; padding: 0; position: relative; margin: 0; top: 0; z-index: 1;}
.jcarousel-list li, .jcarousel-item {float: left; list-style: none;/* We set the width/height explicitly. No width/height causes infinite loops. */ height: 280px; width: 520px;}

/* The buttons are added dynamically by jCarousel before the <ul> list (inside the <div> described above) and have the classnames "jcarousel-next" and "jcarousel-prev" */
.jcarousel-next, .jcarousel-prev {z-index: 3; display: none;}

/* end jQuery Carousel */
 
/* jQuery Carousel skin */
.jcarousel-skin-cool .jcarousel-container {background: transparent;}
.jcarousel-skin-cool .jcarousel-container-horizontal {width: 520px;}
.jcarousel-skin-cool .jcarousel-clip-horizontal {width: 520px; height: 280px;}
.jcarousel-skin-cool .jcarousel-item {width: 520px; height: 280px;}
.jcarousel-skin-cool .jcarousel-item-horizontal {margin-right: 0;}
.jcarousel-skin-cool .jcarousel-item-placeholder {background: #FFF; color: #000;}

/* Buttons */
.jcarousel-skin-cool .jcarousel-next-horizontal {background: transparent url(skins/cool/next-horizontal.png) no-repeat 0 0; cursor: pointer; height: 32px; position: absolute; right: 10px; top: 120px; width: 32px;}
.jcarousel-skin-cool .jcarousel-next-horizontal:hover {background-position: -32px 0;}
.jcarousel-skin-cool .jcarousel-next-horizontal:active {background-position: -64px 0;}
.jcarousel-skin-cool .jcarousel-next-disabled-horizontal,
.jcarousel-skin-cool .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-cool .jcarousel-next-disabled-horizontal:active {background-position: -96px 0; cursor: default;}

.jcarousel-skin-cool .jcarousel-prev-horizontal {background: transparent url(skins/cool/prev-horizontal.png) no-repeat 0 0; cursor: pointer; height: 32px; left: 10px; position: absolute; top: 120px; width: 32px;}
.jcarousel-skin-cool .jcarousel-prev-horizontal:hover {background-position: -32px 0;}
.jcarousel-skin-cool .jcarousel-prev-horizontal:active {background-position: -64px 0;}

.jcarousel-skin-cool .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-cool .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-cool .jcarousel-prev-disabled-horizontal:active {background-position: -96px 0; cursor: default;}
 /* end jQuery Carousel skin */