/******************************
layout.css
Stylesheet-Datei

Autor:      Carsten Witt 
Version:    2009-05-20
******************************

0.	Grundlegendes

1.  Layout / Typographie
1.1	Ueberschriften
1.2	Text
1.3	Links
1.4	Listen
1.5	Tabellen
1.6	Formulare
1.7	Bilder

2.  Bestimmte Seiten

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

/*******************************
0. 		Grundlegendes
******************************/

.hover {
    cursor:pointer;   
}

hr {
    display: none;   
}

body {
    position: relative;
}

@media screen {
    body {
        background: #586970 url(Bilder/background.gif) repeat-x;    
    }
}

@media print {
    body {    
        background-color: white;
        background-image: none;
    }
}

#layout {
    background-color: white;
    padding: 16px 0px;
}

#header { position: relative; }


@media screen {
    #layout {
        width: 400px;
        margin-left: 303px;
        background-image: url(Bilder/claim.gif);
        background-repeat: no-repeat;
        padding-top: 74px;
    }
    


    #leftsidebar {
        position: absolute;
        width: 302px;
        height: 732px;
        background-image: url(Bilder/dreiecke-links.png);
        background-image: url(Bilder/dreiecke-links-trans.png) !important;
        background-repeat: no-repeat;
    }

} /* screen */



#layout #content_wrapper { 
    padding: 0px 8px; 

}
#layout #content { margin: 0px 8px; }


#content ul,
#content ol,
#content p {
    margin-bottom: 10px;
}

h2,
.js #pagecontent h1,
div.exposenavigation p,
div.exposenavigation div,
div.exposenavigation h3,
#content div.vcard,
p.category_filter,
div.partnerliste p {
    background: transparent url(Bilder/linie-h.gif) repeat-x;
    padding-top: 16px;
}  


div.category_filter {
    background: transparent url(Bilder/linie-h.gif) repeat-x;    
    background-position: 0px bottom;    
    padding-bottom: 6px;
    margin: 16px 0px 16px;
}   

div.category_filter p {
    margin-bottom: 0px;   
}


.expose #content div.vcard {
    padding-top: 30px;
}

#content div.vcard {
    clear: both;
}

@media screen {

    #menubar {
        position: absolute;
        left: 120px;
        top: 240px;
    }
    #second_menubar {
        position: absolute;
        top: 0px;
        left: 715px;
    }    
    
    #header,
    div.exposefoto {
        position: relative;
        left: -8px;
        margin-bottom: 12px;
    }
    
    
    .expose #header { display: none; } 

    div.navigation { padding: 5px 0px; }    
}

@media print {
    #menubar,
    #second_menubar {
        display: none;   
    }   
}

div.exposefoto.details { clear: both;  }



/*******************************
1.1		Ueberschriften
******************************/
h1 {
    padding: 0px 0px 6px;
}

.js #pagecontent h1 {
    margin-top: 15px;
    padding-top: 36px;
}


@media print {
    #hausdetails h1.page {
        display: none;   
    }
}

div.expose h2 {
    background-image: none;
    padding-top: 0px;
    margin-bottom: 10px;
}




.js #pagecontent h2 {
    margin-top: 15px;
    /*    */
}


.js #pagecontent h2.hover { 
    text-decoration: underline; 
    color: #777; 
}

.js #pagecontent h2 span {
    padding: 0px 16px;
    background: white url(Bilder/dreieck-grau-rechts.gif) no-repeat;
    background-position: 8px 5px;
}

.js #pagecontent h2.hover span,
.js #pagecontent h2.active span {
    background-image: url(Bilder/dreieck-gelb-rechts.gif);
}


h3 { margin-top: 1.5em; }

.details h3 { margin-top: 0em; }

div.exposenavigation h3 {  margin-bottom: 6px; }

@media screen {
    div.navigation h3 { display: none; }
}

/*******************************
1.2		Text
******************************/
.messagestack.info {
   padding: 10px 15px;
   background-color: #ddf;
   background-color: #fff;
   border: 1px solid #aac;
   border-width: 0px;
   margin: 23px 0px 45px;
}
 
@media screen {

    p.jumpnavi,
    #content .vcard div.web,
    #content .vcard span.country-name,
    #content .vcard div.claim { display: none; }

    #content .vcard div.street-address { display: inline; }
    #content .vcard div.street-address:after { content: " . "; }    
}

@media print {
    .jumpnavi, .totop { display: none; }
}

div.description {
    margin: 20px 0px;
}

div.details,
div.description {
    position: relative;
    left: -16px;
    padding: 12px 16px 8px;
    background-color: #dce0e1;   
    margin-bottom: 4px;    
}

@media screen {
    
     div.details,
     div.description {
        width: 368px;
     }
   
    
}

div.exposenavigation { margin-top: 20px; clear: both; }

@media print {
    div.exposenavigation { display: none; }
}


div.exposenavigation.erster { margin-top: 30px; }

.expose .exposenavigation p {  clear: both; }

p.category_filter { margin-top: 10px; }


.partnerliste h2 {
    clear: both;   
}

.partnerliste p {
    padding-left: 180px;
    min-height: 180px !important;
    height: 180px;
}

.partnerliste img,
.partnerliste a.img {
    display: block;
    float: left;
}
.partnerliste a.img img {
    float: none;   
}


@media print {
    div.haus_lage {
        page-break-before:always;   
    }
}


#content form p.success {
    background-color: #dfd;
    padding: 12px 24px;
    border: 2px solid #afa;
    margin: 12px 0px;
}

#content form p.error {
    background-color: #fdd;
    padding: 12px 24px;
    border: 2px solid #faa;
    margin: 12px 0px;    
}

/*******************************
1.3		Links
******************************/

#mainnavi a,
#metanavi a,
#zusatzinfo a,
#teasernavi a { outline: none; }

@media screen {
    a { outline: none; }
    
    #mainnavi ul li a,
    #zusatzinfo ul li a { 
        display: block; 
        padding-right: 13px;
    }

    #mainnavi ul li.active > a,
    #mainnavi ul li.super > a,    
    #zusatzinfo ul li.active > a,
    #mainnavi ul li a:hover,
    #mainnavi ul li a:active,
    #mainnavi ul li a:focus,
    #zusatzinfo ul li a:hover,
    #zusatzinfo ul li a:active,
    #zusatzinfo ul li a:focus  { background: transparent url(Bilder/navi-hover.png) no-repeat; }

    #mainnavi ul li.active a,
    #zusatzinfo ul li.active a,
    #mainnavi ul li.active a:hover,
    #zusatzinfo ul li.active a:hover,
    #mainnavi ul li.active a:active,
    #zusatzinfo ul li.active a:active,
    #mainnavi ul li.active a:focus,
    #zusatzinfo ul li.active a:focus  {  background-position: right center; }

    #mainnavi ul li a:hover,
    #mainnavi ul li a:active,
    #mainnavi ul li a:focus,
    #zusatzinfo ul li a:hover,
    #zusatzinfo ul li a:active,
    #zusatzinfo ul li a:focus  { background-position: left center; }

    #mainnavi ul li.active a,
    #zusatzinfo ul li.active a { cursor: default; }    
    
}


ul.hausfotos li div.overlay a {
    background: transparent url(Bilder/lupe-trans2.gif) right bottom no-repeat; 
    /* background: transparent url(Bilder/lupe.gif) right bottom no-repeat; */
    background-image: url(Bilder/lupe-trans2.png);
    text-indent: -999em;
}

.exposenavigation a {
    background: transparent url(Bilder/dreieck-gelb.gif) no-repeat;
    padding-left: 16px;
}

.exposenavigation a.totop {
    background-image: url(Bilder/dreieck-gelb-oben.gif);
    background-position: 0px 5px;
}


.category_filter .qp_counter,
.category_filter a {
    background-color: #ebeaeb;
    padding: 3px 6px 4px;  
    text-decoration: none;
    color: #a0adb0; 
}


.category_filter .qp_next,
.category_filter .qp_counter { margin-right: 3px; }

.category_filter a.active { background-color: #fecb00; color: #496268; }

.category_filter a.qp_disabled { display: none; }

.category_filter a:hover,
.category_filter a:active,
.category_filter a:focus {
    color: #496268;   
    text-decoration: underline;
}

.category_filter a.active:hover,
.category_filter a.active:active,
.category_filter a.active:focus {
    color: #496268;   
    text-decoration: none;
}


#homelink {
    position: absolute;
    top: 0px;
    left: -710px;
    display: block;
    width: 200px;
    height: 170px;
    text-indent: -999em;
}

@media print {
    #homelink {
        display: none;
    }
}


#ListNavigation {
    padding-bottom: 16px;   
}

@media print {
    #ListNavigation { display: none;   }
}


/*******************************
1.4		Listen
******************************/

ul, ol { list-style-position: inside; }

@media screen {
   div.exposenavigation ul,
   div.exposenavigation li,
    div.navigation ul,
    div.navigation li { list-style-type: none; }

    #mainnavi,
    #zusatzinfo,
    #zusatzinfo > ul { background: transparent url(Bilder/linie-h.gif) repeat-x; }

    #zusatzinfo > ul {
        background-position: 0px bottom;
        padding: 2px 0px 7px;
    }
}


#mainnavi .subnavi { margin-left: 16px; }

#metanavi ul li { 
    display: inline;
    margin-right: 9px;
}

#teasernavi { margin-top: 40px; }

#teasernavi ul,
#teasernavi ul li { list-style-type: none; }
#teasernavi ul li { margin-bottom : 12px; }
#teasernavi ul li.active { display: none; }

.haus_beschreibung ul {  margin-right: 10%; }


@media screen {
    ul.hauskategorien,
    ul.hausfotos {
        position: relative;
        left: -16px;
        width: 411px;
    }
    
}


ul.hauskategorien,
ul.hauskategorien li,
ul.hausfotos,
ul.hausfotos li { list-style-type: none; }

ul.hausfotos li,
ul.hauskategorien li {
    float: left;
    width: 195px;
    margin-right: 10px; 
    margin-top: 7px;
    position: relative;
}

ul.hausfotos li {
    position: relative;
}
ul.hausfotos li div.overlay,
ul.hausfotos li div.overlay a {
    width: 195px;
    height: 146px;
}
ul.hausfotos li div.overlay {
    position: absolute;
    top: 0px;
    left: 0px;
}

ul.hausfotos li div.overlay a {
    display: block;
    height: 143px;
}


ul.hauskategorien li span {
    position: absolute;
    bottom: 0px;
    padding: 2px 0px 5px;
    width: 195px;
    background: transparent url(Bilder/weiss-80-trans.png);
    text-align: center;
    display: block;
}


.expose div.details ul,
.expose div.details ul li,
div.haus_beschreibung ul,
div.haus_beschreibung ul li { list-style-type: square; }

div.haus_beschreibung ul { 
    list-style-position: outside;
    margin-left: 14px;
}



.expose .exposenavigation ul {
    width: 160px;
    display: block;    
}

.expose .exposenavigation ul.one { 
    float: left; 
    margin-left: 16px;    
}

.expose .exposenavigation ul.two { float: right; }


ul.galerie, 
ul.galerie li {
    list-style-type: none;   
    padding: 0px;
    margin: 0px;
}

ul.galerie { 
    position: relative;
    left: -16px;
    margin-bottom: 20px;
}

@media screen {
    ul.galerie { 
        width: 400px;
    }
    
}


ul.galerie li { 
    display: inline;
    position: relative;
    padding: 0px 0px 0px 0px;
}

ul.galerie li img {
    margin: 0px 0px 16px 16px;
}


@media print {
  ul.galerie li {display: block; clear: both; border: solid 1px transparent; height: 670px;}
  ul.galerie li img.foto_screen {display: none}
  ul.galerie li img.foto_print {display: block; width: 660px; height: auto; }
  ul.galerie li span.imgtitle {
      position: absolute;
      margin-left: 16px;
      left: 0px;
      top: 500px;
      border: none;
      display: block;
      width: 400px;
      border: none;
      height: 20px;
      left: 0px;
      bottom: 0px;
      padding: 2px 0px 5px;
      background: transparent url(Bilder/weiss-80-trans.png);
      text-align: center;
  }

}

@media screen {
  ul.galerie li img.foto_screen {}
  ul.galerie li img.foto_print {display: none}
  ul.galerie li span.imgtitle {
      position: absolute;
      left: 10px;
      top: 150px;
      border: none;
      display: block;
      width: 200px;
      height: 20px;
      left: 0px;
      bottom: 0px;
      padding: 2px 0px 5px;
      background: transparent url(Bilder/weiss-80-trans.png);
      text-align: center;
  }
}



ul.galerie li a { position: relative; border: none; display: block; width: 195px; float: left; text-decoration: none}




#teasernavi #bauvorhaben { position: relative; }


/*******************************
1.5		Tabellen
******************************/

div.details table { display: block; }


@media screen {
    div.details table {
        width: 180px;
    }
}
@media print {
    div.details table {
        width: 40%;
    }
}


div.details table.one { float: left; }

@media screen { 
    div.details table.two { float: right; }
}

@media print {
    div.details table.two { float: left; }
}

div.details table td,
div.details table th { padding: 2px 3px; }

@media screen {
    div.details table th { width: 130px; }
}

div.details table td.zahl {
    text-align: right;
    width: 30px;
}


/*******************************
1.6		Formulare
******************************/
fieldset {
    display: block;
    margin: 0px 0px 24px;
    padding: 24px 0px 0px;
    background: transparent url(Bilder/linie-h.gif) repeat-x;   
    position: relative;
}   
form table { display: block;  }
form table td { padding-right: 12px; }
textarea,
input[type='text'] {
    border: 1px solid #ddd;   
}

table textarea,
table input[type='text'] {
    display: block;   
}

textarea:hover,
input[type='text']:hover {
    border: 1px solid black;
}


textarea:focus,
input[type='text']:focus {
    border: 1px solid black;
    background-color: #f4f4f4;   
}



/*******************************
1.7		Bilder
******************************/

#teasernavi img,
ul.galerie li img { vertical-align: bottom; }


div.expose_container {
    display: block;
    position: relative;
    left: -16px;
    margin-bottom: 20px;
}

#content div.exposefoto {
    left: -16px;   
    margin-top: 16px;
}


@media print {
     /* #content div.exposefoto a img {  display: block; width: 100%; height: auto; } */
     #content div.exposefoto a img {  display: block; width: 660px; height: auto; margin-bottom: 40px}
}

div.expose_container img.expose { display: block; }

img.ecke.trans {
    position: absolute;
    top: 0px;
    left: 0px;   
}

#pagecontent div>img { margin: 12px 0px; }


#teasernavi #bauvorhaben img#latest_image { 
    position: absolute;
    top: 5px;
    left: 120px; 
}


/*******************************
2.		Bestimmte Seiten
******************************/

.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 */



/*******************************
   eproducts / lk / 29.07.2010   / Headerbild für die Druckausgabe
******************************/

@media screen {
    #headerimg {
        display: none;
    }
}
@media print {
    #headerimg {
        display: block;
    }
}