@charset "UTF-8";

/**
 stylesheet for http://www.wambi.de
 © Maximilian Wambach, http://www.der-gestalt.de

***/

/*************************************************************************/

/**
*
* Tags
*
**/
* {margin: 0;padding: 0;}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin: 0;padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: inherit; font-family: inherit; vertical-align:  baseline;}

body {background: #000000 url('_img/background.gif') repeat-x left top;  font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif; font-size: 90%; height: 100%;color: #EDEDED; line-height: 1.2em;}
li {list-style-type: none;}
a {color: #CCCCCC; text-decoration: none;}

#wrapper {width: 1074px; position: relative; margin: 25px auto 0 auto;}
#wrapper h1 {margin-left: 50px;}
#wrapper h1 a {display: block; background: transparent url('_img/logo.png') no-repeat left top; text-indent: -9999px; width: 410px; height: 56px;}
#wrapper a.contact_link {display: block; background: transparent url('_img/contact.png') no-repeat left top; text-indent: -9999px; width: 100px; height: 29px; position: absolute; right: 35px; top: 0;}

ul.navi {width: 1074px; height: 135px; margin-top: 20px;}
ul.navi li {float: left;}
ul.navi a {display: block; background: transparent url('_img/navi.png') no-repeat left top; text-indent: -9999px; height: 135px;}
*html ul.navi a {display: block; background: transparent url('_img/navi.gif') no-repeat left top; text-indent: -9999px; height: 135px;}
ul.navi li.start a {background-position: 0 0; width: 257px;}
ul.navi li.panda a {background-position: -257px 0; width: 183px;}
ul.navi li.comm a {background-position: -440px 0; width: 171px;}
ul.navi li.fine a {background-position: -611px 0; width: 162px;}
ul.navi li.contact a {background-position: -773px 0; width: 300px;}
ul.navi a:hover, ul.navi a.selected {background-image: url('_img/navi_hover.png');}
*html ul.navi a:hover, *html ul.navi a.selected {background-image: url('_img/navi_hover.gif');}

.more:hover {text-decoration: underline; cursor: pointer;}
.more {display: block; background: transparent url('_img/bg_small_teaser.png') no-repeat left top; height: 110px; width: 342px; color: #333333; padding: 22px 0 23px 24px;}
.more p a {color: #333333;}
*html .more {height: 65px;}

.more p {font-size: 80%; width: 300px;}
#content {margin: 60px 0 0 50px;}
#content h2.slogan {display: block; background: transparent url('_img/slogan.png') no-repeat left top; text-indent: -9999px; height: 99px; width: 555px; float: left;}
#content .teaser {display: block; height: 308px; margin-bottom: 63px;}
#content .teaser p {text-align: center;}
#content .teaser li {float: left; margin-right: 38px; position: relative; height: 323px; overflow: hidden; display: block; width: 222px;}
#content .teaser li.last {float: right; margin-right: 17px;}
#content .teaser span {	position: absolute; width: 222px;}
#content .teaser img { margin: 25px 0 0 7px; position: absolute;}
#content .teaser a {height: 308px; width: 223px; display: block; background: transparent url('_img/bg_teaser.png') no-repeat left top;}
#content .more { float: right;}

.commercial #thumbs {margin-top: 0;}
.commercial #controls .ss-controls {bottom: -297px;}

.two_column .subnavi {width: 235px; font-size: 80%;}
.two_column .subnavi li {background-color:#DDDDDD;display:block;height:35px;margin-bottom:1px;text-align:center;}
.two_column .subnavi li:hover, .two_column .subnavi li:hover a, .two_column .subnavi li.selected, .two_column .subnavi li.selected a {background-color:#808080; color: #EDEDED;}
.two_column .subnavi li a {display: block; padding-top: 8px; color: #808080;}
.loader {background: transparent url("_img/ajax-loader.gif") no-repeat left top; display: none; width: 220px; height: 32px; top: 350px; position: absolute; left: 590px; padding: 0;}
.slide_container {width: 700px;height: auto;float: right;}
#thumbs {width: auto;float: left; clear: left; position: relative; margin-top: 24px;}
div.categories .category {font-size: 250%; color: #CCCCCC; margin-bottom: 10px;}
#thumbs .pagination {bottom: 0; font-size: 80%; position: absolute;}
*html #thumbs .pagination {position: relative; }
*:first-child+html #thumbs .pagination {position: relative;}

#thumbs .pagination span.current {background-color:#EEEEEE;border-color:#EEEEEE;color:#333333;font-weight:bold;}
#thumbs .pagination a, #thumbs .pagination span {border:1px solid #EEEEEE;display:block;float:left;margin-right:2px;padding:0 6px; text-decoration: none;}
#thumbs .pagination a:hover {background-color: #EEEEEE;color:#333333;}
#controls {clear:both; display: block; height: 30px;margin-bottom: 10px; font-size: 106%;}
.slides {width: 700px; float: right; margin-right: 27px;}
#slideshow a.advance-link {color:#FFFFFF;display:block;text-align:center;width:700px;}
div.slideshow span.image-wrapper {display:block;}

#controls .ss-controls {position: absolute; bottom: -263px; font-size: 80%; left: 50px;}
*:first-child+html #controls .ss-controls {bottom: 300px;}
*html #controls .ss-controls {bottom: 300px;}

#controls .nav-controls {float: right;margin-right: 173px; width: 327px;}
#controls .nav-controls .next {background: transparent url('_img/right.png') no-repeat 0 0; display: block; width: 115px; height: 30px;padding-left: 42px; float: right;}
*html #controls .nav-controls .next {background: transparent url('_img/right.gif') no-repeat 0 0;}

#controls .nav-controls .prev {background: transparent url('_img/left.png') no-repeat right top; display: block; width: 130px; height: 30px;padding-right: 10px; float: left;}
*html #controls .nav-controls .prev {background: transparent url('_img/left.gif') no-repeat right top;}

#controls a {text-decoration: none;}
#controls a:hover {text-decoration: underline;}
#controls a.play, #controls a.pause {background: transparent url('_img/slideshow.png') no-repeat 0 0; display: block; width: 138px; height: 24px;padding:4px 0 0 37px;}
*html #controls a.play, *html #controls a.pause {background: transparent url('_img/slideshow.gif') no-repeat 0 0;}

ul.thumbs li {float: left; margin: 0 5px 5px 0;}

.two_column .left {float: left; width: 227px;}
*html .two_column .left {clear: right;}
.two_column .right {float: right; width: 720px; }
*html .two_column .right {clear: left;}
#content .right h2 {color: #808080; font-size: 130%;}
 #content .left h2 {font-size: 130%;}
#content .right p {font-size: 80%; margin-top: 20px; line-height: 1.8em;}
#content .right .more:hover {text-decoration: none;}
#content .right .more {float: none; margin-top: 20px; position: relative;}
#content .right .more p {margin:0; width: 200px; color: #808080;}
#content .right .more a {color: #000000; display: block; position: absolute; bottom: 71px; right: 40px; text-decoration: underline; background: transparent url('_img/arrow.png') no-repeat right center; padding: 0 16px 2px 0;}
*html #content .right .more a {background-image: url('_img/arrow.gif');}
#content .right .more a:hover {text-decoration: none;}

.contact .left {width: 50%;}
*html .contact .left {width: 500px;}
*:first-child+html .contact .left {width: 400px;}
.contact .right {width: 50%;}
*html .contact .right {width: 400px;}
*:first-child+html .contact .right {width: 400px;}
.contact .loader {background: transparent url("_img/ajax-loader.gif") no-repeat left top; display: block; width: 220px; height: 32px; position: absolute; left: 281px; top:  0; padding: 0;}
.contact .contactform h3.error_msg {position:absolute;right:26px;top:89px;width:200px;}
.contact .contactform label.error {width: 200px; margin-left: 20px;}
.contact .contactform input.error, .contact .contactform textarea.error {background-color: #DDDDDD;}
.contact dl {float: left; width: auto; margin: 0 95px 20px 20px;}
.contact dt {font-size: 130%; margin-bottom: 30px; }
.contact dd {font-size: 85%; line-height: 1.3; margin: 5px 0;}
.contact .contactform {display: block; width: 570px; height: 240px; margin: 50px auto 100px auto; position: relative;}
.contact .contactform form {position: relative; height: 240px;}
.contact .contactform .row {display: block; width: 570px; position: relative; clear: both; height: 20px; margin-bottom: 10px;}
.contact .contactform label {font-size: 85%; float: left; width: 75px;}
.contact .contactform input, .contact .contactform textarea {float: left; border: 1px solid #333333; font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif; font-size: 90%;}
.contact .contactform textarea {width: 250px; height: 140px;}
.contact .contactform p {font-size: 80%; color: #CCCCCC; clear: both;}
.contact .contactform .send_btns {bottom: 0; position: absolute; right: 0; width: 149px; right: 55px;}
.contact .contactform .send_btns input {margin-bottom: 5px;}
.contact .contactform input.reset {background-color:  #333333; display: block; width: 80px; height: 25px; border: none; cursor: pointer;-moz-border-radius:2px 2px 2px 2px; color: #DDDDDD;}
.contact .contactform input.reset:hover {background-color: #DDDDDD; color: #333333;}
.contact .contactform input.submit {background-color: #DDDDDD;display: block; width: 130px; height: 25px; border: none; cursor: pointer; color: #333333; -moz-border-radius:2px 2px 2px 2px;}
.contact .contactform input.submit:hover {background-color:  #333333; color: #DDDDDD;}
h3.answer_text {display: block; position: absolute; width: 200px; font-size: 90%; right: 56px;}