/*
   CSS für tischlerei-dukatz.de
   Webdesign & Internetconsulting
   Christian Fischer
   www.c-fischer.com
*/





/* .............................................................................. reset'em all */
* {
  margin: 0;
  padding: 0;
}


/* .............................................................................. Basics */
body {
  background-color: #E8E7E1;
  color: #473C36;
  font-family: verdana, arial, helvetica, swiss, sans-serif;
  font-size: 11px;
  height: 100%;
}

img {
  border: none;
}

hr {
  margin: 0 0 -1px 0;
  width: 1px;
  height: 1px;
  border: none;
  visibility: hidden;
  clear: both;
}

/* .............................................................................. Layout */
#page {
  position: absolute;
  margin-top: -310px;
  margin-left: -488px;
  top: 49%;
  left: 50%;
  width: 977px;
  height: 625px;
  background-color: #fff;
  background-image: url(../images/back-page.gif);
  }



#navi {
  margin: 20px 0 0 113px;
  height: 31px;
/*  width: 637px;*/
  width: 850px;
  float: left;
/*  background-color: #cfcfcf;*/
}
	#navi ul li ul {
           display: none;
         }
         #navi ul li:hover ul, #navi ul li.active ul {
           display: block;
         }
#logo {
  margin: 119px 0 0 756px;
}

#content {
  margin: 28px 0 0 113px;
  width: 830px;
  height: 351px;
}
#footer {
  margin: 13px 0 0 0;
}

#preload {
  display: none;
}


/* .............................................................................. Links */
a {
  color: #000;
  text-decoration: none;
}

a:hover {
  border-bottom: 1px dotted #473C36;
}

#navi a:hover, #logo a:hover, #footer a:hover {
  border: none;
}


/* .............................................................................. Contentbereich */
#col1 {
  float: left;
  height: 351px;
  overflow: hidden;
}
#col2 {
  margin: 0 0 0 9px;
  height: 351px;
  float: left;
  overflow: hidden;
}


.narrow {
  width: 337px;
}
.wide {
  width: 484px;
}
.unarrow {
  width: 292px;
}
.uwide {
  width: 529px;
}

#col2.wide, #col2.narrow, #col2.uwide, #col2.unarrow {
/*  margin: 0 0 0 9px;*/
}

.grey {
  background-color: #D1D0D3;
}

/*  Karten */
#mapwide, #mapnear {
  width: 529px;
  height: 351px;
}
#mapwide {
  margin-top: -351px;
}


/* Referenzen */
#refnavi {
  padding: 11px 20px;
  border-top: 5px solid #fff;
  text-align: right;
  color: #8C8684;
}
	#refnavi ul {
           list-style-type: none;
           float: right;
         }
         #refnavi ul li {
           position: relative;
           margin: 1px 0 0 7px !important;
           float: left;
           width: 13px !important;
           height: 13px !important;
           overflow: hidden;
         }
         #refnavi ul li.first {
           width: 80px !important;
           font-size: 10px;
         }
         #refnavi ul li span {
           position: absolute;
           top: 0;
           left: 0;
           background-color: #D10024;
           width: 13px !important;
           height: 13px  !important;
           cursor: pointer;
         }
         #refnavi ul li.active span, #refnavi ul li a:hover span {
           background-color: #8C8684;
         }

         #refnavi p {
           margin: 2px 0 0 0!important;
           padding: 0 !important;
           float: left;
           font-size: 10px;
           text-align: left;
           line-height: 11px !important;
         }

/* .............................................................................. Text */
#content p {
  margin: 0 20px 17px 20px;
  line-height: 17px;
}
#content h2 {
  position: relative;
  margin: 0 0 36px 0;
  font-size: 16px;
  height: 74px;
  color: #D1D0D3;
}
#content h2 span {
  position: absolute;
  z-index:2;
  top: 0;
  left: 0;
  height: 74px;
}
#content .narrow h2, #content .narrow span {
  width: 337px;
}
#content .wide h2, #content .wide span {
  width: 484px;
}


/* .............................................................................. Navigation */
#navi ul {
  list-style-type: none;
}
	#navi ul li {
           margin: 0 9px 0 0;
           padding: 13px 0 0 0;
           float: left;
           background-repeat: no-repeat;
         }
         #unternehmen {
           background-image: url(../images/navi/back-unternehmen-f.gif);
         }
         #unternehmen:hover, #unternehmen.active {
           background-image: url(../images/navi/back-unternehmen.gif);
         }
         #produkte {
           background-image: url(../images/navi/back-produkte-f.gif);
         }
         #produkte:hover, #produkte.active {
           background-image: url(../images/navi/back-produkte.gif);
         }
         #leistungen {
           background-image: url(../images/navi/back-leistungen-f.gif);
         }
         #leistungen:hover, #leistungen.active {
           background-image: url(../images/navi/back-leistungen.gif);
         }
         #planer {
           background-image: url(../images/navi/back-planer-f.gif);
         }
         #planer:hover, #planer.active {
           background-image: url(../images/navi/back-planer.gif);
         }
         #kontakt {
           background-image: url(../images/navi/back-kontakt-f.gif);
         }
         #kontakt:hover, #kontakt.active {
           background-image: url(../images/navi/back-kontakt.gif);
         }

         #sprachwahl {
           margin: 0;
           padding: 0 !important;
         }

         #navi ul li ul {
           margin-top: 7px;
         }
         #navi ul li ul li {
           margin: 0 0 0px 0;
           padding: 0;
           float: none;
         }
         #navi ul li ul li img {
          opacity: 0.6;
          -moz-opacity: 0.6;
          filter: alpha(opacity=60);
         }
         #navi ul li ul li:hover img, #navi ul li li.active img {
          opacity: 1;
          -moz-opacity: 1;
          filter: alpha(opacity=100);
         }