@charset "utf-8";

html, body { margin:0px; padding:0px; width:100%; height:100%; }
body { 
	background-color:#fff; background-image:url(../images/bg_browser.gif); background-repeat:repeat; 
	line-height:100%; 
	font-family:Arial, Helvetica, sans-serif; font-size:12px; position:relative;
}

div { margin:0px; padding:0px; float:left; overflow:hidden; position:relative; }
p { margin:0px 0px 15px 0px; padding:0px; }
a { text-decoration:none; color:#000; }

#res { position:absolute; left:50%; top:50%; margin:-60px 0px 0px -218px; z-index:100; display:none; }

.overall_wrapper { width:903px; height:529px; position:absolute; left:50%; top:50%; margin:-270px 0px 0px -451px; z-index:200; background-color:#fff; }

.left_wrapper  { float:left; width:269px; height:529px; background-color:#000; }
.left_wrapper_start { float:left; width:450px; height:529px; background-color:#000; }

.right_wrapper { float:left; width:634px; height:529px; background-color:#fff; background-position:0px 66px; background-repeat:no-repeat; }
.right_wrapper_start { float:left; width:453px; height:529px; background-color:#fff; background-position:0px 66px; background-repeat:no-repeat; }
.right_wrapper .text, .right_wrapper .text2 { line-height:18px; color:#72777b; position:absolute; }

img.logo_left { position:absolute; left:0px; bottom:46px; }
img.logo_left_start { position:absolute; left:128px; top:195px; }

#trommel_animiert { position:absolute; left:32px; top:232px; width:175px; height:47px; }
#trommel_animiert.trommel { background-image:url(../images/trommel_animiert.gif); }

.start_heine { font-size:9px; width:220px; height:40px; line-height:40px; padding-left:60px; background-image:url(../images/trommel.png); background-repeat:no-repeat; position:absolute; left:120px; bottom:0px; display:none; }
#start_headline-wrapper { position:absolute; left:30px; top:180px; width:390px; height:160px; }


.audio_switch { position:absolute; right:0px; top:0px; }
a#audio_switch { display:block; width:34px; height:12px; background-repeat:no-repeat; }
a#audio_switch.active { background-image:url(../images/btn_audio_active.gif); }
a#audio_switch.active:hover { background-image:url(../images/btn_audio_active_hover.gif); }
a#audio_switch.inactive { background-image:url(../images/btn_audio_inactive.gif); }
a#audio_switch.inactive:hover { background-image:url(../images/btn_audio_inactive_hover.gif); }

/* Overlays */
#overlay { position:absolute; left:0px; top:0px; background-color:#000; width:100%; height:100%; opacity: .5; filter: alpha(opacity=50); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=50); z-index:300; }
.overlay { position:absolute; left:50%; top:50%; border:solid 1px #000; background-color:#fff; z-index:400; }
.overlay .text { margin:25px; line-height:14px; overflow-y:auto; font-size:11px; }
.overlay a.schliessen { position:absolute; right:29px; top:6px; display:block; width:79px; height:9px; background-image:url(../images/btn_schliessen.gif); }
.overlay a.schliessen:hover { background-position:0px -9px; }
.overlay .text h1 { margin:0px 0px 18px 0px; padding:0px; line-height:100%; font-size:12px; }
.overlay .text h2 { margin:0px 0px 18px 0px; padding:0px; line-height:100%; font-size:12px; }
.overlay.impressum   { width:308px; height:260px; margin:-130px 0px 0px -154px; }
.overlay.haftung     { width:308px; height:418px; margin:-209px 0px 0px -154px; }
.overlay.haftung .text { margin-right:0px; padding-right:25px; height:368px; text-align:justify; }

.overlay a.zurueck { position:absolute; left:30px; bottom:10px; display:block; width:56px; height:10px; background-image:url(../images/btn_zurueck.gif); display:none; }
.overlay a.zurueck:hover { background-position:0px -10px; }
.overlay a.weiter { position:absolute; right:30px; bottom:10px; display:block; width:54px; height:10px; background-image:url(../images/btn_weiter.gif); display:none; }
.overlay a.weiter:hover { background-position:0px -10px; }

.overlay.zoom       { width:355px; height:484px; margin:-243px 0px 0px -170px; background-color:#e6e6e7; padding:0px; }
.overlay.zoom img { position:absolute; left:30px; top:30px; }
.overlay.zoom.a3       { width:653px; margin:-243px 0px 0px -327px; background-color:#e6e6e7; padding:0px; }
.overlay.zoom.a3 img { position:absolute; left:30px; top:30px; width:594px; height:418px; }



/* Navigation */
ul.nav { margin:25px 0px 0px 0px; padding:0px; width:166px; list-style-type:none; list-style:none; }
ul.nav li { width:166px; height:17px; overflow:hidden; clear:left; margin:0px 0px 5px 0px; padding:0px; }
ul.nav li.trenner { width:166px; height:2px; overflow:hidden; clear:left; margin:6px 0px 0px 0px; padding:0px; background-image:url(../images/topnav/trenner.gif); background-repeat:no-repeat; }
ul.nav li a { display:block; width:166px; height:17px; overflow:hidden; clear:left; padding:100px 0px 0px 0px; background-repeat:no-repeat; background-position:0px 0px; }
ul.nav li.active a { background-position:0px -17px; }
ul.nav li a:hover { background-position:0px -17px; }
ul.nav li a.company   { background-image:url(../images/topnav/company.gif); }
ul.nav li a.codex     { background-image:url(../images/topnav/codex.gif); }
ul.nav li a.portfolio { background-image:url(../images/topnav/portfolio.gif); }
ul.nav li a.clients   { background-image:url(../images/topnav/clients.gif); }
ul.nav li a.contact   { background-image:url(../images/topnav/contact.gif); }

/* Navigation Start */
ul.nav_start { margin:0px 0px 0px 0px; padding:0px; width:166px; list-style-type:none; list-style:none; position:absolute; left:198px; top:240px; }
ul.nav_start li { width:166px; height:17px; overflow:hidden; clear:left; margin:0px 0px px 0px; padding:0px; }
ul.nav_start li a { display:block; width:166px; height:17px; overflow:hidden; clear:left; padding:100px 0px 0px 0px; background-repeat:no-repeat; background-position:0px 0px; }
ul.nav_start li.active a { background-position:0px -17px; }
ul.nav_start li a:hover { background-position:0px -17px; }
ul.nav_start li a.company   { background-image:url(../images/topnav_start/company.gif); }
ul.nav_start li a.codex     { background-image:url(../images/topnav_start/codex.gif); }
ul.nav_start li a.portfolio { background-image:url(../images/topnav_start/portfolio.gif); }
ul.nav_start li a.clients   { background-image:url(../images/topnav_start/clients.gif); }
ul.nav_start li a.contact   { background-image:url(../images/topnav_start/contact.gif); }

/* Navigation 2 */
ul.nav2 { margin:26px 0px 0px 0px; padding:0px; width:166px; list-style-type:none; list-style:none; }
ul.nav2 li { width:166px; height:10px; overflow:hidden; clear:left; margin:0px 0px 6px 0px; padding:0px; }
ul.nav2 li a { display:block; width:166px; height:10px; overflow:hidden; clear:left; padding:100px 0px 0px 0px; background-repeat:no-repeat; background-position:0px 0px; }
ul.nav2 li a:hover { background-position:0px -10px;}
ul.nav2 li a.google   { background-image:url(../images/topnav/contact_google.gif); }
ul.nav2 li a.haftung     { background-image:url(../images/topnav/contact_haftung.gif); }
ul.nav2 li a.impressum { background-image:url(../images/topnav/contact_impressum.gif); }


/* Subnavigation */
ul.subnav { margin:0px; padding:0px; list-style-type:none; list-style:none; position:absolute; left:41px; top:0px; display:none; }
ul.subnav.start { display:block; }
ul.subnav li { margin:0px; padding:0px; float:left; width:25px; height:25px; }
ul.subnav li a { display:block; overflow:hidden; line-height:100%; margin:0px; padding:12px 0px 0px 0px; color:#000; border:none; float:left; width:25px; height:25px; background-image:url(../images/bg_subnav_norm.gif); background-repeat:no-repeat; text-align:center; }
ul.subnav li a.linkback { display:block; overflow:hidden; line-height:100%; margin:0px; padding:0px; width:25px; height:25px; background-image:url(../images/btn_subnav_back.gif); background-repeat:no-repeat; text-align:center; }
ul.subnav li a.linkback:hover { background-position:0px -25px; }
ul.subnav li a:hover { color:#8eb2d3; }
ul.subnav li.active a { background-image:url(../images/bg_subnav_high.gif); }

/* Content */

.right_wrapper.portfolio img { position:absolute; }
.right_wrapper.portfolio.detail img#portfolio_detail { position:absolute; left:0px; top:66px; }
.right_wrapper.portfolio a#zoom { position:absolute; display:none; overflow:hidden; width:45px; height:9px; background-image:url(../images/btn_zoom.gif); line-height:100px; }
.right_wrapper.portfolio a#zoom:hover { background-position:0px -9px; } 
.right_wrapper.portfolio a#online { position:absolute; display:none; overflow:hidden; width:51px; height:9px; background-image:url(../images/btn_online.gif); line-height:100px; }
.right_wrapper.portfolio a#online:hover { background-position:0px -9px; } 


.right_wrapper.clients #box { width:253px; height:463px; position:absolute; right:-255px; bottom:0px; }
.right_wrapper.clients #box .bg { width:253px; height:463px; position:absolute; left:0px; top:0px; z-index:100; background-color:#f5f6f6; opacity: 0.8; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); }
.right_wrapper.clients #box .trenner { width:230px; height:2px; position:absolute; left:24px; top:414px; background-image:url(../images/clients/trenner.gif); z-index:300; }
.right_wrapper.clients #box a { display:block; position:absolute; background-repeat:no-repeat; overflow:hidden; line-height:100px; }
.right_wrapper.clients #box a.schliessen { width:79px; height:9px; left:152px; top:3px;   z-index:201; background-image:url(../images/clients/schliessen.gif); background-position:0px 0px; }
.right_wrapper.clients #box a.schliessen:hover { background-position:0px -9px; }
.right_wrapper.clients #box a.statement  { width:78px; height:9px; left:24px;  top:434px; z-index:202; background-image:url(../images/clients/statement.gif); display:none; }
.right_wrapper.clients #box a.statement:hover { background-position:0px -9px; }
.right_wrapper.clients #box a.info       { width:40px; height:9px; left:24px;  top:434px; z-index:202; background-image:url(../images/clients/info.gif); display:none; }
.right_wrapper.clients #box a.info:hover { background-position:0px -9px; }
.right_wrapper.clients #box a.portfolio  { width:75px; height:9px; left:156px; top:434px; z-index:203; background-image:url(../images/clients/portfolio.gif); display:none; }
.right_wrapper.clients #box a.portfolio:hover { background-position:0px -9px; }
.right_wrapper.clients #box .text 				{ width:210px; height:360px; left:24px; top:43px; z-index:400; background:none; line-height:18px; text-align:left; }
.right_wrapper.clients #box .text h1 			{ font-size:12px; font-weight:bold; line-height:100%; margin:0px 0px 10px 0px; padding:10px 0px 0px 0px; }
.right_wrapper.clients #box .text p 			{ margin:0px 0px 10px 0px; padding:0px; }
.right_wrapper.clients #box .text_statement 	{ width:210px; height:360px; left:24px; top:43px; z-index:400; background:none; display:none; line-height:18px; text-align:left; }
.right_wrapper.clients #box .text_statement h1 	{ font-size:12px; font-weight:bold; line-height:100%; margin:0px 0px 10px 0px; padding:10px 0px 0px 0px; }
.right_wrapper.clients #box .text_statement p 	{ margin:0px 0px 25px 0px; padding:0px; }
.right_wrapper.clients #box .text_statement img { float:left;  }
.right_wrapper.clients #box .text_statement .bildunterschrift { float:left; padding:34px 0px 0px 9px; }

.right_wrapper.clients .client_infos { display:none; }

ul.clients { margin:0px; padding:0px; list-style:none; list-style-type:none; background:none; }
ul.clients li { clear:left; margin:0px 0px 21px 0px; padding:0px 12px 0px 0px; height:12px; line-height:100%; list-style:none; list-style-type:none; background:none; }
ul.clients li span { padding:0px 12px 0px 0px; height:12px; background-position:right 2px; background-repeat:no-repeat; }
ul.clients li span.active { background-image:url(../images/clients/arrow_blue.jpg); }
ul.clients li a:hover, ul.clients li a:active { color:#8eb2d3; outline:none; }
ul.clients li span.active a { font-weight:bold; color:#8eb2d3; }


/* Contact Form */
form.contactform { overflow:hidden; width:240px; margin:0px; padding:0px; }
form.contactform input 	  { font-size:9px; height:12px; width:232px; line-height:100%; border:solid 1px #e4e5e6; background-color:#f9f9f9; margin:0px 0px 4px 0px; padding:2px; }
form.contactform input.error	  { border-color:#a73639; }
form.contactform textarea { font-size:10px; height:110px; width:232px; line-height:100%; border:solid 1px #e4e5e6; background-color:#f9f9f9; margin:0px 0px 20px 0px; padding:2px; font-family:Arial, Helvetica, sans-serif; }
form.contactform textarea.error	  { border-color:#a73639; }
form.contactform input.submit { width:105px; height:16px; border-color:#b7bfc4; padding: 0px; float:left; cursor:pointer; }
form.contactform input.submit:hover { color:#8eb2d3; }
form.contactform input.reset  { width:117px; height:16px; border-color:#b7bfc4; padding: 0px; float:left; margin-left:15px; cursor:pointer; }
form.contactform input.reset:hover { color:#8eb2d3; }

#form_hint { position:absolute; left:0px; top:211px; font-size:9px; color:#a73639; display:none; }