@import url(bildzoom.css);


/* 
    RALF WEBER grafik | design 2008
    http://www.ralfweber.biz/ 
*/


/* Browser Reset
------------------------------------------------------------ */

html, body, div, span, a,
h1, h2, h3, h4, h5, h6, p, strong, em, blockquote,
dl, dt, dd, ul, ol, li,
form, fieldset, input, textarea, label, legend,
img, noscript, address, abbr, kbd,
table, tt, tr, th, td{
  margin:0;
  padding:0;
  border:0;
  outline:none;
  font-style:normal;
  text-decoration:none;
  vertical-align:baseline;
}


/* HTML Elemente
------------------------------------------------------------ */

html{
  height:100.1%;
  background:#fff;
}

body{
  min-width:992px;
  background:url(../img/body_background.gif) repeat-x 0 0;
  font:13px/18px Arial, Helvetica, Sans, sans-serif;
  color:#676869;
}

a:focus, a:active{
  outline:none;
}

h1{
  position:absolute;
  font-size:8px;
  color:#e3e2d0;
  text-indent:-9999px;
}

h2{
  margin:0 0 13px 0;
  font:bold 15px "Lucida Sans", Lucida, Arial, Helvetica, Sans, sans-serif;
  color:#9d2d40;
  text-transform:uppercase;
  letter-spacing:1px;
  word-spacing:1px;
}

#content_references h2, #content_extra h2{
  margin:0 0 13px 9px;
}

h3{
  position:absolute;
  top:19px;
  left:24px;
  width:481px;
  height:26px;
  background:transparent url(../img/h3_background.gif) no-repeat 0 100%;
  font:bold 14px "Lucida Sans", Lucida, Arial, Helvetica, Sans, sans-serif;
  color:#676869;
  text-indent:12px;
  letter-spacing:0.5px;
}

h4{
  padding:55px 0 13px 0;
  font:bold 14px "Lucida Sans", Lucida, Arial, Helvetica, Sans, sans-serif;
  color:#9d2d40;
}

h5{
  margin:13px 0 0 0;
  font:bold 13px Arial, Helvetica, Sans, sans-serif;
  color:#676869;
}

h6{
  margin:0 0 5px 0;
  font:normal 12px Arial, Helvetica, Sans, sans-serif;
  color:#777879;
}

p{
  margin:0 0 13px 0;
}

#content_references p, #content_extra p{
  margin:0 0 13px 9px;
}

p a:link, p a:visited,
li a:link, li a:visited{
  color:#676869;
  text-decoration:underline;
}

p a:hover, p a:focus,
li a:hover, li a:focus{
  color:#9d2d41;
  outline:none;
}

p a:active,
li a:active{
  color:#9d2d41;
}

ul{
  margin:0 0 13px 0;
  font:13px/18px Arial, Helvetica, Sans, sans-serif;
  color:#676869;
  list-style:none;
}

#skills, #options{
  list-style:none;
}

strong, abbr{
  font-weight:bold;
}

em{
  text-decoration:underline;
}


/* Semantische DIV Elemente
------------------------------------------------------------ */

#wrapper{
  position:relative;
  width:992px;
  margin:0 auto;
}

#site_branding{
  position:relative;
  width:992px;
  height:110px;
  background:transparent url(../img/site_branding_background.jpg) no-repeat 0 0;
}

#site_branding_logo{
  position:absolute;
  left:0;
  top:24px;
}

#navigation{
  position:relative;
  width:992px;
  height:91px;
  background:transparent;
}

#content_text{
  position:relative;
  width:377px;
  padding:48px 0 55px 0;
  margin:0 37px 0 0;
  background:transparent;
  float:left;
}

#content_references, #content_extra{
  position:relative;
  width:530px;
  padding:48px 0 55px 0;
  background:transparent;
  float:left;
}

#siteinfo{
  position:relative;
  width:992px;
  height:89px;
  background:transparent url(../img/siteinfo_background.gif) no-repeat 0 0;
  clear:both;
}

#validation{
  position:absolute;
  left:10px;
  width:367px;
  height:50px;
  padding:13px 0 0 0;
}

#icon_w3c_xhtml, #icon_validome_xhtml,
#icon_w3c_css, #icon_microformats{
  margin:0 2px 0 0;
}

#copyright{
  position:absolute;
  right:56px;
  width:512px;
  height:50px;
  padding:13px 0 0 0;
  font-size:11px;
  color:#777879;
  text-align:right;
  background:transparent;
}

#copyright kbd{
  font:11px Arial, Helvetica, Sans, sans-serif;
}

#copyright a, #copyright a:visited{
  color:#777879;
  letter-spacing:1px;
}

#copyright a:hover, #copyright a:focus{
  text-decoration:underline;
}


/* Semantische CLASS Elemente
------------------------------------------------------------ */

.reference{
  position:relative;
  width:525px;
  height:230px;
  margin:0 0 21px 0;
  background:transparent url(../img/reference_background.jpg) no-repeat 0 0;
}

.reference a:link, .reference a:visited{
  color:#676869;
}

.reference a:hover, .reference a:focus, .reference a:active{
  color:#9d2d42;
}

.project_thumbnail{
  position:absolute;
  left:38px;
  top:56px;
}

.external_link{
  text-decoration:underline;
}

.external_link:before{
  content:url(../img/target_blank.gif)" ";
}


/* Formatierung Tabelle
------------------------------------------------------------ */

table{
  position:absolute;
  left:193px;
  top:60px;
  font:12px/16px Arial, Helvetica, Sans, sans-serif;
  color:#676869;
}

.label_customer, .label_branch,
.label_workings, .label_url{
  width:65px;
  height:20px;
  font-weight:bold;
}

.customer, .branch,
.workings, .url{
  width:220px;
  height:20px;
}

.label_workings, .workings,
.label_branch, .branch{
  height:40px;
}


/* Microformats
------------------------------------------------------------ */

.vcard p{
  margin:0 13px 0 0;
}

.fn{
  text-transform:uppercase;
}


/* Navigation
------------------------------------------------------------ */

#skiplink{
  position:absolute;
  background:transparent;
  text-indent:-9999px;
}

#skiplink a{
  color:#adac9d;
}

#jumplinks{
  position:absolute;
  left:956px;
  top:190px;
  width:31px;
  height:64px;
  background:transparent;
  z-index:1;
}

a.jumplink_top{
  position:fixed;
  width:31px;
  height:32px;
  background:transparent url(../img/jumplinks_background.gif) no-repeat 0 0;
  text-indent:9999px;
  display:block;
}

a.jumplink_top:hover{
  background:transparent url(../img/jumplinks_background.gif) no-repeat -32px 0;
}

a.jumplink_bottom{
  position:fixed;
  top:332px;
  width:31px;
  height:32px;
  text-indent:9999px;
  background:transparent url(../img/jumplinks_background.gif) no-repeat 0 -32px;
  display:block;
}

a.jumplink_bottom:hover{
  background:transparent url(../img/jumplinks_background.gif) no-repeat -32px -32px;
}

dl{
  position:absolute;
  left:282px;
  top:0;
  width:709px;
  height:55px;
  background:transparent;
  clear:both;
}

dt{
  position:relative;
  width:141px;
  height:55px;
  background:#5f5f55 url(../img/dt_background.gif) no-repeat 0 0;
  font:bold 13px/51px "Lucida Sans", Lucida, Arial, Helvetica, Sans, sans-serif;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:1px;
  float:left;
}

dt a, dt a:visited{
  width:141px;
  height:55px;
  color:#fff;
  display:block;
}

dt a:hover, dt a:focus{
  background:#9d2d40 url(../img/dt_background.gif) no-repeat 0 -55px;
  color:#fff;
  line-height:53px;
}

dt kbd, .accesskey{
  font:bold 13px "Lucida Sans", Lucida, Arial, Helvetica, Sans, sans-serif;
  text-decoration:underline;
}

dd{
  position:absolute;
  left:0;
  top:56px;
  width:705px;
  height:33px;
  background:#fff;
  color:#9d2d40;
  text-align:right;
  line-height:33px;
  display:none;
  overflow:hidden;
}

dt:visited+dd{
  display:none;
}

dt:hover+dd, dt:focus+dd{
  display:block;
}

.ralf_weber #ralf_weber,
.webdesign #webdesign,
.logo_design #logo_design,
.printdesign #printdesign,
.kontakt #kontakt{
  background:#fff url(../img/dt_background.gif) no-repeat 0 -110px;
  color:#41413f;
  line-height:55px;
}


/* Kontaktformular
------------------------------------------------------------ */


#set_01, #set_02{
  position:relative;
  width:487px;
  height:209px;
  padding:21px 0 0 38px;
  margin:0 0 21px 0;
  background:transparent url(../img/reference_background.jpg) no-repeat 0 0;
  display:block;
}

#set_02{
  height:334px;
  margin:0 0 11px 0;
  background:transparent url(../img/fieldset_02_background.jpg) no-repeat 0 0;
}

legend{
  display:none;
}

label{
  width:452px;
  margin:0 0 4px 0;
  background:transparent url(../img/label_background.gif) no-repeat -36px 0;
  font:bold 13px/18px Arial, Helvetica, Sans, sans-serif;
  color:#676869;
  text-indent:24px;
  display:block;
  overflow:auto;
}

label kbd{
  font:bold 13px/18px Arial, Helvetica, Sans, sans-serif;
  text-decoration:underline;
}

#mitteilung{
  width:440px;
  height:132px;
  padding:5px;
  border-top:1px solid #878889;
  border-right:1px solid #eee;
  border-bottom:1px solid #eee;
  border-left:1px solid #878889;
  background:#fff;
  font:13px Arial, Helvetica, Sans, sans-serif;
  color:#676869;
}

#anrede, #vorname, #nachname, #email{
  width:350px;
  margin:0 0 16px 0;
  padding:2px 0 2px 5px;
  border:1px solid #878889;
  border-right:1px solid #eee;
  border-bottom:1px solid #eee;
  border-left:1px solid #878889;
  background:#fff;
  font:13px Arial, Helvetica, Sans, sans-serif;
  color:#676869;
  display:block;
}

#anrede{
  width:357px;
}

#mitteilung:hover, #anrede:hover,
#vorname:hover, #nachname:hover, #email:hover{
  border-color:#9d2d40;
}

#absenden{
  height:26px;
  width:90px;
  margin: 10px 25px 10px 0;
  font:bold 12px/26px "Lucida Sans", Arial, Helvetica, sans-serif;
  color:#e3e2d0;
  background:#5f5f55 url(../img/submit_background.gif) no-repeat 0 0;
}

#absenden:hover{
  color:#fff;
  background:#9d2d39 url(../img/submit_background.gif) no-repeat 0 -26px;
}

.ungueltige_eingabe{
  color:#9d2d40;
  background-position:0 -36px;
}

.gueltige_eingabe{
  color:#363;
  background-position:-18px -18px;
}