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

    two-b Stylesheet
    von Carsten Peters
    06.02.2009

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



/* body
---------------------------------------------------------------------------*/

* { padding: 0; margin: 0; }
body { font: 62.5%/1.68em Verdana, Arial, Helvetica, sans-serif; background: #013334; color: #f5f0df; }


/* links 
---------------------------------------------------------------------------*/

a, a:link, a:visited { text-decoration: none; color: #f5f0df; }
a:hover, a:active, a:focus { text-decoration: none; outline: none; color: #f5f0df; }
    a img, :link img, :visited img, :hover img, :active img { border: none; }

        
/* paragraphs 
---------------------------------------------------------------------------*/

p, pre { margin: 0 0 10px 0; }
em, address { font-style: italic; }


/* listen 
---------------------------------------------------------------------------*/

ul, li { list-style: none; }


/* misc 
---------------------------------------------------------------------------*/

abbr, acronym { border-bottom: 1px dotted #f5f0df; cursor: help; }

.none { display: none; }
.clear { clear: both; height: 0; line-height: 0; }

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

html, body { height: 100%; } /* Das will der IE. */ 
html>body { height: auto; min-height: 480px; min-width: 780px; } /* Das will der Rest. Safari kann kein min-height, daher wird hier eventuell etwas abgeschnitten */ 
#box { height: 480px; width: 780px; position: absolute; top: 50%; left: 50%; margin-top: -240px;  /* = halbe Boxhöhe. */ margin-left: -385px; /* = halbe Boxbreite. */ }


/* headlines 
---------------------------------------------------------------------------*/

h2, h3, h4, h5, h6 { color: #f5f0df; font: 2em Arial, Helvetica, sans-serif; font-weight: normal; }
h3 { margin: 25px 0 5px 0; font-size: 1.2em; font-weight: bold; }
.accordion h3 { margin: 15px 0 5px 0; cursor: pointer; }
h4 { font-size: 1.1em; margin: 20px 0 5px 0; font-weight: bold; }
h5 { font-size: 1em; font-weight: bold; }
h6 { font-size: 1em; font-weight: bold; }

h1 a { position: absolute; text-indent: -9999px; display: block; background: url(../upload/css_img/logo.gif) no-repeat; top: 170px; left: 340px; height: 83px; width: 83px; } 
h2 { position: absolute; top: 198px; right: 480px; text-indent: -9999px; display: block; width: 116px; height: 27px; } 
#agentur h2 { background: url(../upload/css_img/h2_agentur.gif) no-repeat; }
#aktuell h2 { background: url(../upload/css_img/h2_aktuell.gif) no-repeat; }
#galerie h2 { background: url(../upload/css_img/h2_galerie.gif) no-repeat; }
#referenzen h2,
#referenzen-list h2 { background: url(../upload/css_img/h2_referenzen.gif) no-repeat; }
#impressum h2 { background: url(../upload/css_img/h2_impressum.gif) no-repeat; }
#leistungen h2 { background: url(../upload/css_img/h2_leistungen.gif) no-repeat; }
#philosophie h2 { background: url(../upload/css_img/h2_philosophie.gif) no-repeat; }

h3 { text-indent: -9999px; display: block; width: 116px; height: 19px; } 
h3#gestalten { background: url(../upload/css_img/h3_gestalten.gif) no-repeat; }
h3#planen { background: url(../upload/css_img/h3_planen.gif) no-repeat; }
h3#beraten { background: url(../upload/css_img/h3_beraten.gif) no-repeat; }
h3#kontakt { background: url(../upload/css_img/h3_kontakt.gif) no-repeat; }


/* hilfsnavigation 
---------------------------------------------------------------------------*/

#navigation { position: absolute; top: 420px; left: 30px; }
    #navigation li { float: left; display: inline; }
        #navigation li a { text-transform: lowercase; float: left; width: 90px; line-height: 16px; height: 16px; color: #f5f0df; display: block; text-align: center; border-right: 1px solid #fff; }
	#navigation li a#id_7 { }

/*#galerie #navigation { margin: 410px 110px 0 0; }*/
      
        
/* content 
---------------------------------------------------------------------------*/

.ligallery { position: absolute; width: 300px; height: 280px; top: 0px; left: 460px; }
#impressum .ligallery { top: 0px; left: 442px; margin: -160px 0 0 0; }

#text { position: absolute; width: 300px; height: 240px; top: 40px; left: 460px; }
#start #text { top: 10px; }
#galerie #text,
#referenzen-list #text { height: auto; }
#agentur #text { top: 120px; }
#impressum #text { top: 80px; }
#philosophie #text { top: 120px; }

#search { position: absolute; top: 421px; left: 680px;}
#searchterm { border: none; width: 90px; background: #013334; color: #f5f0df; font: 1em  Verdana, Arial, Helvetica, sans-serif; }
#searchterm:focus { background: #fff; color: #000; padding: 1px; font-size: 1.1em; }

.accordion { height: 340px; overflow: hidden; scroll: auto; }

#ref-logo { opacity: 0; position: absolute; top: 105px; right: 460px; text-align: center; color: #013334; }
#start #ref-logo { top: 5px; right: 460px; }

#text a,
#text a:link,
#text a:visited { border-bottom: 1px dotted #f5f0df;  }
#text a:hover,
#text a:active,
#text a:focus { border-bottom: 1px solid #f5f0df; }
#galerie #text a,
#galerie-list #text a:link,
#galerie-list #text a:visited,
#referenzen-list #text a,
#referenzen-list #text a:link,
#referenzen-list #text a:visited { border-bottom: none; }

#text img.image_rechts { float: right; display: inline; margin: 5px 0 5px 10px; }
#text img.image_links { float: left; display: inline; margin: 5px 10px 5px 0; }
#text ul { padding: 0 0 10px 8px; }
#text ol { padding: 0 0 10px 16px; }
#text ul li { padding: 2px 0 2px 10px; background: url(../upload/css_img/dot.gif) no-repeat 0 10px; }
#text ol li { margin: 2px 0 2px 10px; list-style-type: decimal; }
#text ul ul li { background-image: url(../upload/css_img/dot_2.gif); }


/* easyscroll 
---------------------------------------------------------------------------*/

#easyscroll { background: #013334; margin: 1em 0; top: 70px; left: 460px; width: 300px; } 
#easyscrollnav { }
#easyscrollnav li { background: #013334; margin-right: 10px; padding: 0 10px; color: #f5f0df; cursor: pointer; }
#easyscrollnav li.over { color: #999; text-decoration: underline; }
#easyscrollnav li#btnUp { position: absolute; top: 55px; left: 458px; text-indent: -9999px; display: block; background: url(../upload/css_img/up.gif) no-repeat top; }
#easyscrollnav li#btnDown { position: absolute; top: 355px; left: 458px; text-indent: -9999px; display: block; background: url(../upload/css_img/down.gif) no-repeat top; }
#easyscrollnav li#btnReset { display: none; }

#referenzen-scroll #easyscroll { top: 25px; left: 0; width: 400px; } 
#referenzen-scroll #easyscrollnav li#btnUp { top: 20px; left: 15px; }
#referenzen-scroll #easyscrollnav li#btnDown { top: 385px; left: 15px; }