@charset "utf-8";
@import url("reset.css");

/* Standard Tags */
html, body { height: 100% }
body { font: 12px/20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; background: #000 url("images/body_bg.png") }
h1, h2, h3, h4, h5 {  }
h1 { font: 25px/30px "Transit", "Arial Narrow", sans-serif; text-transform: uppercase; font-weight: bold; margin: 15px 0; width: 685px; height: 30px }
h2 { font: 14px/20px "Arial Narrow", sans-serif; font-weight: bold; text-transform: uppercase; margin: 0.75em 0 }
h3 { font-size: 1.4em; margin: 0.75em 0 }
h4 { font-size: 1.2em; margin: 0.75em 0 }
h5 { font-size: 1.1em; margin: 0.75em 0 }
em { font-style: italic }
strong { font-weight: bold }
p { margin-bottom: 0.5em }

/* Allgemein */
.link { font-family: Arial, Helvetica, sans-serif; font-size: 1.3em; line-height: 1.2em }
.clr { clear: both }

/* Wrapper */
#wrapper { position: relative; margin: 0 auto; width: 1220px }

/* Header */
#header { position: relative; height: 170px; width: 1220px }
#header .text { position: absolute; top: 98px; left: 295px; color: #ee0000; font: 12px/12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 0.05em }
#header .image { position: absolute; top: 68px; left: 20px; width: 230px; height: 42px; background: transparent url("images/logo_24.png") no-repeat 0 0; display: block } 

/* Content */
#content { position: relative; left: 40px; width: 735px; margin: 0 auto }
#content a { font: 12px/20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; text-transform: uppercase; color: #000; text-decoration: none }
#content a:hover { color: #ee0000 }
#content ul { margin-bottom: 0.5em; overflow: hidden }
#content li { text-indent: 15px; background: transparent url("images/bullet.png") no-repeat 0 9px }  

#topimage { width: 735px; height: 200px; overflow: hidden; margin-bottom: 5px }
#topimage.start { height: 450px }
#contentintro, #contentbody { position: relative; color: #3c3c3c }
#content h1.start { background: #fff; padding: 0 20px 0 30px; position: relative; left: -30px }
#content .text { padding: 15px 20px; width: 695px; position: relative; background: #dcdcdc }
#content .linie { position: absolute; left: 10px; background: #fff; height: 5px; width: 715px }
#content .top { top: 0 }
#content .bottom { bottom: 0 }
#content .thin { height: 1px }
#content .teaserimage { float: left; width: 238px; height: 178px; overflow: hidden; border: 1px solid #fff; margin: 0 15px 15px 0 }
#content .kontaktimage { float: left; width: 148px; height: 133px; overflow: hidden; border: 1px solid #fff; margin: 0 15px 0 0 }
#content .person { width: 320px; margin-right: 25px; float: left }
/* Kontakt */
#content .kontakt { overflow: hidden; margin-bottom: 20px }
#content .kontakt h2 { margin: 0 }
#content .kontakt .position { font-size: 11px; font-weight: normal; text-transform: uppercase; margin-bottom: 20px }
#content .kontakt .daten { margin: 20px 0 }
#content .kontakt .label { width: 30px; display: block; float: left }
/* Abschnitt */
#content .linkkat, #content .linktop { width: 735px; height: 35px; position: relative; left: -10px; background: #dcdcdc }
#content .linkkat .linie, #content .linktop .linie { left: 20px }
#content .toplink, #content .kategorielink, #content .referenzlink { position: relative; top: 7px; left: 30px; background: transparent url("images/pfeile_v.png") no-repeat 0 3px; padding-left: 40px }
#content .ui-state-active .kategorielink { background: transparent url("images/pfeile_v.png") no-repeat 0 -40px }
#content .toplink { background: transparent url("images/pfeile_v.png") no-repeat 0 -40px }
/* Referenzen */
#content .referenz { width: 336px; float: left; margin-right: 10px; position: relative; top: -50px }
#content .referenz p { margin-left: 10px }
#content .referenzlink { left: 0; display: block; margin-bottom: 14px; background-position: 0 6px }
/* Kontakt */
#content .adresse { line-height: 25px; padding: 5px 0 0 }
#kontaktForm { position: relative }
#kontaktForm input, #kontaktForm textarea { border: 1px solid #FFF; background: #f7f7f7; padding: 2px; font-size: 12px }
#kontaktForm p { margin-bottom: 10px }
#kontaktForm textarea { height: 159px }
#kontaktForm fieldset { width: 695px }
#kontaktForm #vorname, #kontaktForm #name { width: 334px }
#kontaktForm #vorname { float: left; margin-right: 15px }
#kontaktForm #strasse, #kontaktForm #ort { width: 240px }
#kontaktForm #nummer, #kontaktForm #plz { width: 73px }
#kontaktForm #strasse, #kontaktForm #nummer, #kontaktForm #plz { float: left; margin-right: 15px }

#kontaktForm #telefon, #kontaktForm #email, #kontaktForm #betreff, #kontaktForm #nachricht { width: 689px }
#kontaktForm #submit { background: #ee0000; color: #fff; border: none; width: 80px; float: right }
#kontaktForm #telefon, #kontaktForm #email, #kontaktForm #betreff, #kontaktForm #nachricht { width: 689px }
#kontaktForm .errors { width: 683px; border: 1px solid #ee0000; margin-bottom: 10px; background: #edd5d5; color: #000; padding: 2px 5px }
#kontaktForm .required, #kontaktForm .invalid { border: 1px solid #ee0000 }

#maps #map1 { margin-bottom: 20px }
#maps h1#krefeld { margin-top: 35px } 

/* Footer */
#footer { position: relative; left: 40px; width: 715px; clear: both; margin: 15px auto 0; text-align: left; height: 20px; color: #fff }
#footer p { position: relative; background: #222121; padding: 5px 160px 5px 10px; line-height: 20px; font: 11px/11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 0.05em }
#footer a { color: #fff; text-transform: uppercase; text-decoration: none }
#footer .link { color: #ee0000 }
#footer #search { position: absolute; right: 5px; top: 3px; width: 155px }
#footer fieldset { display: inline; height: 1.3em; position: relative }
#footer #ajaxSearch_input { float: left; height: 1.3em; background: #000; border: 1px solid #6d6d6d; color: #fff; padding: 1px; width: 80px; margin-top: 2px }
#footer #ajaxSearch_submit { font: 11px/11px "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif; text-transform: uppercase; height: 19px; background: #222121; border: 1px solid #222121; color: #fff; padding: 0 }
#footer .label { text-indent: -10000px; width: 0px; overflow: hidden; float: left }

/* Menu */
#menu { position: absolute; z-index: 10; width: 250px; overflow: hidden; background: #000; border-top: 2px solid #5a5a5a; font: 12px/25px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 0.05em }
#menu ul li { border-bottom: 2px solid #5a5a5a }
#menu ul li a { color: #fff; text-decoration: none; padding-left: 20px }
#menu ul li a:hover {color: #ee0000 }
#menu ul ul li { border-bottom: none } 
#menu ul ul li a { color: #b4b4b4; padding-left: 50px; background: transparent url("images/pfeile_menu.png") no-repeat 20px 1px } 
#menu ul ul li a:hover, #menu ul ul li a.active { background-position: -280px 1px; color: #fff }
#menu ul ul ul li { background: #222121 } 
#menu ul ul ul li a { padding-left: 80px; background: transparent url("images/pfeile_menu.png") no-repeat 50px 1px } 
#menu ul ul ul li a:hover, #menu ul ul ul li a.active { background-position: -250px 1px }

/* Infobox */
#infobox { position: absolute; top: 20px; right: 0 }
#infobox a { text-transform: none }
#infobox p { margin-bottom: 0; overflow: hidden }
#infobox .contentouter { width: 310px; overflow: hidden }
#infobox .content { position: relative; left: 0; padding: 10px 10px 20px; margin-left: 10px; background: transparent url("images/info_bg.png") repeat 0 0 }
#infobox .tab { text-indent: -10000px; background: transparent url("images/info_tab.png") no-repeat 0 0; width: 25px; height: 50px; position: absolute; right: -25px; top: 0 }
#infobox .inactive { background-position: -25px 0 }
#infobox .title { background: #ee0000; color: #fff; font-weight: bold; text-transform: uppercase; position: relative; left: -20px; top: 0px; padding: 0 0 0 20px; width: 290px; height: 20px; font-size: 14px } 

/* Galerie */
#gallery { width: 714px; overflow: hidden }
#gallery a { text-transform: none }
#gallery .product { width: 238px; float: left }
#gallery .thumbnail { width: 158px; height: 148px; border: 1px solid #fff }
#gallery .caption { width: 160px; height: 30px; display: block; border-bottom: 5px solid #fff; margin-bottom: 45px; line-height: 26px }
#gallery .link { color: #ee0000 }
.referenz img { display: block; width: 233px; height: 191px; border: 1px solid #fff }

#picture { width: 570px; padding: 25px 30px; background: transparent url("images/popup_bg.png") repeat 0 0 }
#picture .logo { width: 138px; height: 27px; margin-bottom: 20px; background: transparent url("images/popup_logo.png") no-repeat 0 0 }
#picture .imageview { width: 570px; height: 535px; border: 1px solid #fff }
#picture .navigation { float: right; width: 90px; position: relative; text-align: center }
#picture .navigation a, #picture .navigation span { background: transparent url("images/pfeile_h.png") no-repeat; width: 18px; height: 10px; text-indent: -10000px; overflow: hidden; display: block; margin: 4px }
#picture .navigation a.prev_enable { background-position: 0 0px; float: left }
#picture .navigation a.next_enable { background-position: 0 -40px; float: right }
#picture .navigation span.prev_disable { background-position: 0 -80px; float: left }
#picture .navigation span.next_disable { background-position: 0 -120px; float: right }
#picture .title { font: 14px/20px "Arial Narrow", sans-serif; font-weight: bold; text-transform: uppercase; margin: 0.75em 0 }

#picture.noscript { width: 695px; background: none; padding: 0 }
#picture.noscript .imageview { width: 693px; height: 458px }

/* Bilder */
.bild_normal, .bild_links { width: 238px; height: 192px; border: 1px solid #fff }
.bild_links { float: left; margin: 0 10px 10px 0 }
.bild_breit { width: 674px; height: 192px; border: 1px solid #fff }
.bild_normal { width: 238px; height: 192px; border: 1px solid #fff }