/*  =========================================================
Datei: customize.css
Media: screen, projection

Datum: 21. September 2006
Geaendert:
Autor: Michael Degener
Mail: degener@infomax-it.de

Plegbare Schrifttypen und Farbwelten:
0. Größe und Geruest fuer Teaser
1. Allgemeine Selektoren
2. Navigation
3. Breadcrumb-Navigation
4. Buttons
5. Links
6. Formular Suchmasken
7. Liste Suchergbebnis, Liste Zimmer Detailseite
8. Detailseite Header
9. Verfuegbarkeit/Kalender
10. Warenkorb Tabelleninhalt
11. Daten bestaetigen
12. Detailinfos Zimmer
13. Liste Suchergebnis Prospekte
16. Tab-Navigation
17. Teaser

========================================================== */

/*=======================================================================
	0. Größe und Geruest fuer Teaser
========================================================================*/

body {
 /* !!!! KEINE WERTE KLEINER ALS 540px EINGEBEN !!!! */
 width: 750px; /* absolute Breite des Inhalts */
 /* !!!! KEINE WERTE KLEINER ALS 540px EINGEBEN !!!! */
 font-family: verdana, arial, helvetica, sans-serif; /* Schrifttyp */
 color: #000;  /* Schriftfarbe */
 background-color: #fff; /* Hintergurndfarbe der Seite */
 }

/* rahmen-container fuer inhalt */
#container_content {
 width: 540px;
}
/* rahmen-container fuer teaser unterhalb der Seite */
#container_teaser {
 width: 540px;
}
/* rahmen-container fuer teaser rechte spalte */
#container_context {
 width: 200px;
}


/*=======================================================================
        1. Allgemeine Selektoren
========================================================================*/

h1 {
 color: #0094D8; /*Schriftfarbe Ueberschriften 1. Ordnung, 2. 0rdnung */
 }
h2 {
 color: #000; /*Schriftfarbe Ueberschriften 2. Ordnung */
 }

/* farbig gestaltete Textpassagen */
#container h2, #container h2.normal, #roomlist .room h3, #verteilung .room h3, #roomlist .room p, #verteilung .room p, #roomlist .room li.belegung, #verteilung .room li.belegung, #roomlist .room li.preis, #verteilung .room li.preis, #auftraggeber span.entry, #reise span.entry, #prospekte legend.org {
 color: #0094D8;
 }


/*=======================================================================
        2. Navigation
========================================================================*/
#navigation {
 background-color: #0026D8;  /* Hintergrundfarbe Top-Navigation */
 }
#navigation li {
 border-right: 1px solid #fff;  /* Trennungstrich Navigation */
 }
#navigation a, #navigation a:visited {
 color: #fff;  /* Schriftfarbe Navigationspunkt */
 text-decoration: none;
 background-color: transparent;
 }
#navigation a:hover, #navigation a:active, #navigation a:focus {
 color: #0094D8;  /* Schriftfarbe Navigationspunkt bie mouseover */
 background-color: #8BC5DF; /* Hintergrundfarbe Navigationspunkt bie mouseover */
 }
#navigation li.warenkorb a, #navigation li.warenkorb a:visited {
 background: transparent url(/TPortal/TPortalRegion/img/objects/warenkorb_0.gif) no-repeat 98% 50%; /* Grafik Warenkorb */
 }
#navigation li.warenkorb a:hover, #navigation li.warenkorb a:active, #navigation li.warenkorb a:focus {
 color: #0094D8;
 background: #8BC5DF url(/TPortal/TPortalRegion/img/objects/warenkorb_1.gif) no-repeat 98% 50%;
 }


/*=======================================================================
        3. Breadcrumb-Navigation
========================================================================*/
#breadcrumb .hint, #breadcrumb li {
 color: #818181; /* Schriftfarbe breadcrumb */
 }
#breadcrumb li a, #breadcrumb li a:visited {
 color: #0026D8;  /* Schriftfarbe navigationspunkt breadcrumb */
 text-decoration: underline;
 background-color: transparent;
 }
#breadcrumb li a:hover, #breadcrumb li a:active, #breadcrumb li a:focus {
 text-decoration: none;
 }
#breadcrumb li a.active { /* Schriftfarbe aktiver navigationspunkt breadcrumb */
 color: #0094D8;
 text-decoration: none !important;
 background-color: #F0F0F0 !important;
 border-width: 0 1px 1px 0;
 border-color: #B3B3B3;
 }


/*=======================================================================
        4. Buttons
========================================================================*/

.formHeader {
border-color: #E6E6E6;
background-color: #F9F9F9;
}

#form input.buttonstyle, #list .listentry .einheit .form input.buttonstyle, #bcontainer input.buttonstyle, #buttons a.buttonstyle, #buttons a.buttonstyle:visited, #buttons2 a.buttonstyle, #buttons2 a.buttonstyle:visited, #bcontainerp input.buttonstyle, #bcontainerp input.buttonstyle:visited {
 color: #fff;
 border-color: #8BC5DF #0026D8 #0026D8 #8BC5DF;
 background-color: #0094D8;
 }
#form input.buttonstyle:hover, #form input.buttonstyle:active, #form input.buttonstyle:focus, #bcontainer input.buttonstyle:hover, #bcontainer input.buttonstyle:active, #bcontainer input.buttonstyle:focus, #buttons a.buttonstyle:hover, #buttons a.buttonstyle:active, #buttons a.buttonstyle:focus, #buttons2 a.buttonstyle:hover, #buttons2 a.buttonstyle:active, #buttons2 a.buttonstyle:focus, #bcontainerp input.buttonstyle:hover, #bcontainerp input.buttonstyle:active, #bcontainerp input.buttonstyle:focus {
 color: #fff;
 border-color: #000 #8BC5DF #8BC5DF #000;
 background-color: #0094D8;
 }

/* button 'weitere Infos' Liste Suchergebnis/Liste Detailseite */
#list .infos a, #list .infos a:visited, #list .einheit li.zimmerlink a, #list .einheit li.zimmerlink a:visited, #roomlist input.buttonstyle, #roomlist .room li.zimmerlink a, #roomlist .room li.zimmerlink a:visited, #verteilung .room li.zimmerlink a, #verteilung .room li.zimmerlink a:visited, #schliessen a, #schliessen a:visited {
 color: #fff;
 text-decoration: none;
 border: 1px solid #0026D8;
 background-color: #0094D8;
 }
#list .infos a:hover, #list .infos a:active, #list .infos a:focus, #list .einheit li.zimmerlink a:hover, #list .einheit li.zimmerlink a:active, #list .einheit li.zimmerlink a:focus, #roomlist input.buttonstyle:hover, #roomlist input.buttonstyle:active, #roomlist input.buttonstyle:focus, #roomlist .room li.zimmerlink a:hover, #roomlist .room li.zimmerlink a:active, #roomlist .room li.zimmerlink a:focus, #verteilung .room li.zimmerlink a:hover, #verteilung .room li.zimmerlink a:active, #verteilung .room li.zimmerlink a:focus, #schliessen a:hover, #schliessen a:active, #schliessen a:focus {
 color: #fff;
 border: 1px solid #000;
 background-color: #0026D8;
 }


/*=======================================================================
        5. Links
========================================================================*/
#container .address a, #container .address a:visited, .jump a, .jump a:visited, #icons p a, #icons p a:visited,#list .address h3 a, #list .address h3 a:visited, #list .einheit li.beschreibung h4 a, #list .einheit li.beschreibung h4 a:visited, .print a, .print a:visited, #bildw a, #bildw a:visited, #bildz a, #bildz a:visited, #panorama a, #panorama a:visited, #unit .schliessen a, #unit .schliessen a:visited, #form label.auto2 a, #form label.auto2 a:visited, #form div.calendar a, #form div.calendar a:visited, #form2 div.calendar a, #form2 div.calendar a:visited, #form div.map a, #form div.map a:visited, #more a, #more a:visited, #result p a, #result p a:visited, #list .listright li a, #list .listright li a:visited, #detailheader .detaillinks li a, #detailheader .detaillinks li a:visited, #roomlist .explanation a, #roomlist .explanation a:visited, #versicherung a, #versicherung a:visited, #prospekte .itemcontent a, #prospekte .itemcontent a:visited {
 color: #0026D8;
 text-decoration: none;
 }
#container .address a:hover, #container .address a:active, #container .address a:focus, .jump a:hover, .jump a:active, .jump a:focus, #icons p a:hover, #icons p a:active, #icons p a:focus, #list .address h3 a:hover, #list .address h3 a:active, #list .address h3 a:focus, #list .einheit li.beschreibung h4 a:hover, #list .einheit li.beschreibung h4 a:active, #list .einheit li.beschreibung h4 a:focus, .print a:hover, .print a:active, .print a:focus, #bildw a:hover, #bildw a:active, #bildw a:focus, #bildz a:hover, #bildz a:active, #bildz a:focus, #panorama a:hover, #panorama a:active, #panorama a:focus, #unit .schliessen a:hover, #unit .schliessen a:active, #unit .schliessen a:focus, #form label.auto2 a:hover, #form label.auto2 a:active, #form label.auto2 a:focus, #form div.calendar a:hover, #form div.calendar a:active, #form div.calendar a:focus, #form2 div.calendar a:hover, #form2 div.calendar a:active, #form2 div.calendar a:focus, #form div.map a:hover, #form div.map a:active, #form div.map a:focus, #more a:hover, #more a:active, #more a:focus, #result p a:hover, #result p a:active, #result p a:focus, #list .listright li a:hover, #list .listright li a:active, #list .listright li a:focus, #detailheader .detaillinks li a:hover, #detailheader .detaillinks li a:active, #detailheader .detaillinks li a:focus, #roomlist .explanation a:hover, #roomlist .explanation a:active, #roomlist .explanation a:focus, #versicherung a:hover, #versicherung a:active, #versicherung a:focus, .jump a.active, #prospekte .itemcontent a:hover, #prospekte .itemcontent a:active, #prospekte .itemcontent a:focus, p a:focus {
 color: #fff !important;
 }


/* links mit unterstreichung */
#form label.auto2 a, #form label.auto2 a:visited, #form div.calendar a, #form div.calendar a:visited, #form2 div.calendar a, #form2 div.calendar a:visited, #form div.map a, #form div.map a:visited, #more a, #more a:visited, #result p a, #result p a:visited, #list .listright li a, #list .listright li a:visited, #detailheader .detaillinks li a, #detailheader .detaillinks li a:visited, #roomlist .explanation a, #roomlist .explanation a:visited, #versicherung a, #versicherung a:visited {
 text-decoration: underline;
 }
#form label.auto2 a:hover, #form label.auto2 a:active, #form label.auto2 a:focus, #form div.calendar a:hover, #form div.calendar a:active, #form div.calendar a:focus, #form2 div.calendar a:hover, #form2 div.calendar a:active, #form2 div.calendar a:focus, #form div.map a:hover, #form div.map a:active, #form div.map a:focus, #more a:hover, #more a:active, #more a:focus, #result p a:hover, #result p a:active, #result p a:focus, #list .listright li a:hover, #list .listright li a:active, #list .listright li a:focus, #detailheader .detaillinks li a:hover, #detailheader .detaillinks li a:active, #detailheader .detaillinks li a:focus, #roomlist .explanation a:hover, #roomlist .explanation a:active, #roomlist .explanation a:focus, #versicherung a:hover, #versicherung a:active, #versicherung a:focus {
 text-decoration: none;
 }


/*=======================================================================
        6. Formular Suchmasken
========================================================================*/
#form .formcontainer, #form .mcontainer, #form2 .formcontainer, #form3 .formcontainer {
 border: 1px solid #406794;  /* rahmenfarbefarbe */
 background-color: #8BC5DF;  /* hintergrundfarbe */
 }
#form .grau {
 background-color: #E6E6E6;  /* hintergrundfarbe versicherung */
 border: 1px solid #808080;  /* rahmenfarbe versicherung */
 }
#form .mcontainer {
 background-color: #F2F5F8;  /* hintergrundfarbe container weitere merkmale */
 }


/*=======================================================================
        7. Liste Suchergbebnis, Liste Zimmer Detailseite
========================================================================*/
#list .listentry, #roomlist, #verteilung .roomunit {
 border: 1px solid #406794; /* rahmenfarbe listeneintrag */
 background-color: #8BC5DF; /* hintergrundfarbe listeneintrag */
 }
#list .hell {
 background-color: #F2F5F8; /* hintergrundfarbe hell listeneintrag */
 }

/* einheit zimmer/fewo/artikel */
#list .einheit, #roomlist .room, #verteilung .room {
 background-color: #fff; /* hintergrundfarbe */
 }

/*=======================================================================
        8. Detailseite Header
========================================================================*/
#detailheader {
 border-color: #E6E6E6 #808080 #808080 #E6E6E6; /* rahmenfarbe */
 background-color: #E6E6E6;  /* hintergrundfarbe */
 }
#detailheader .detailimg {
 border-left: 1px solid #fff; /* rahmenfarbe bild */
 }


/*=======================================================================
        9. Verfuegbarkeit/Kalender
========================================================================*/
#roomlist .room .zeit, #verteilung .room .zeit, #list .listentry .zeit {
 border-color: #E6E6E6;    /* rahmenfarbe kalender */
 background-color: #F9F9F9; /* hintergrundfarbefarbe kalender */
 }
#roomlist .room .zeit span, #verteilung .room .zeit span, #list .listentry .zeit span {
 color: #303030; /* schriftfarbe kalender */
 }


/*=======================================================================
        10. Warenkorb Tabelleninhalt
========================================================================*/
#warenkorb th, #versicherung th {
 color: #fff;   /* schriftfarbe spaltenueberschrift */
 background-color: #0094D8; /* hintergrundfarbe spaltenueberschrift */
 }
#versicherung th {
 color: #000;  /* schriftfarbe spaltenueberschrift versicherung */
 background-color: #E6E6E6; /* hintergrundfarbe spaltenueberschrift versicherung */
 }

#warenkorb td, #versicherung td  {
 color: #595959; /* schriftfarbe tabellenzelle */
 border-bottom: 1px solid #818181; /* rahmenfarbe tabellenzelle */
 }
#warenkorb td.dunkel  {
 background-color: #8BC5DF; /* hintergrundfarbe dunkel tabellenzelle */
 }
#warenkorb td.hell {
 background-color: #F3F5F8; /* hintergrundfarbe hell tabellenzelle */
 }
#versicherung td.dunkel  {
 color: #000;   /* schriftfarbefarbe dunkel tabellenzelle versicherung */
 background-color: #E6E6E6; /* hintergrundfarbe dunkel tabellenzelle versicherung */
 }
#versicherung td.hell {
 color: #595959;  /* hintergrundfarbe hell tabellenzelle versicherung */
 background-color: #F7F7F7; /* hintergrundfarbe hell tabellenzelle versicherung */
 }

/* gesamttotal */
#warenkorb td.totalprice, #versicherung td.totalprice {
 color: #000;
 border-right: 1px solid #818181;
 border-bottom: 1px solid #818181;
 border-left: 1px solid #818181;
 background-color: #EDEDED;
 }


/*=======================================================================
        11. Daten bestaetigen
========================================================================*/
#auftraggeber h2, #reise h2 {
 border-color: #808080;  /* rahmenfarbe ueberschrift */
 background-color: #E6E6E6; /* hintergrundfarbe ueberschrift */
 }


/*=======================================================================
        12. Detailinfos Zimmer
========================================================================*/
#unit span.preis {
 color: #9E0B0E; /* schriftfarbe preis */
 }
#unit .condi {
 background-color: #EBEBEB; /* hintergrundfarbe konditionen */
 }


/*=======================================================================
       13. Liste Suchergebnis Prospekte
========================================================================*/
/* hintergrundfarbe listeneinträge  */
#prospekte .hell {
 background-color: #EDEDED;
 }
#prospekte .dunkel {
 background-color: #E6E6E6;
 }

/* rahmen- + hintergrundfarben feld prospektbeschreibung */
#prospekte .listentry {
 border-color: #fff #fff #D4D0C8 #fff;
 }
#prospekte .item {
 border-color: #fff;
 }
#prospekte .itemcontent {
 border-color: #fff;
 }
#prospekte .contentdunkel {
 background-color: #F2F2F2;
 }
#prospekte .contenthell {
 background-color: #FAFAFA;
 }


/*=======================================================================
        16. Tab-Navigation
========================================================================*/
/* rahmenfarbe tab*/
#topnavi li span.mid, #topnavi li span.side b.p1, #topnavi li span.side b.p2, #topnavi li span.side b.p3, #topnavi li span.side b.p4, #topnavi li span, #topnavi li span.side b.p5, #topnavi li span.side b.p6, #topnavi li span.side b.p7, #topnavi li span.side b.p8 {
 border-color: #000;
}
/* hintergrund tab */
#topnavi li span.mid, #topnavi li span.side b.p1, #topnavi li span.side b.p2, #topnavi li span.side b.p3, #topnavi li span.side b.p4, #topnavi li span.side b.p5, #topnavi li span.side b.p6, #topnavi li span.side b.p7, #topnavi li span.side b.p8 {
 background: #0094D8;
}

/* link tab */
#topnavi li a, #topnavi li a:visited {
 color: #FFF;
}
#topnavi li a:hover span.mid, #topnavi li a:active span.mid, #topnavi li a:focus span.mid, #topnavi li a:hover span.side b, #topnavi li a:active span.side b, #topnavi li a:focus span.side b {
 color: #0026D8;
 background-color: #0094D8;
}

/*=======================================================================
        17. Teaser
========================================================================*/
/* gesamtbreite teaser */
#container_teaser .teaser, #container_context .teaser {
 width: 200px;
}
/* breite teaser-header muss immer 20 Pixel
   schmaler sein als gesamtbreite-teaser
*/
div.t_header span.mid {
 width: 180px;
}
/* breite teaser-inhalt muss immer 2 Pixel
   schmaler sein als gesamtbreite teaser
*/
div.t_body {
 width: 198px;
}

/* rand header */
div.t_header span.mid, div.t_header span.side b.p1, div.t_header span.side b.p2, div.t_header span.side b.p3, div.t_header span.side b.p4, div.t_header span, div.t_header span.side b.p5, div.t_header span.side b.p6, div.t_header span.side b.p7, div.t_header span.side b.p8 {
 border-color: #000;
}

/* hintergrund header */
div.t_header span.mid, div.t_header span.side b.p1, div.t_header span.side b.p2, div.t_header span.side b.p3, div.t_header span.side b.p4, div.t_header span.side b.p5, div.t_header span.side b.p6, div.t_header span.side b.p7, div.t_header span.side b.p8 {
 background: #0094D8;
}

/* teaser-ueberschrift */
div.t_header span.mid {
 color: #FFF;
}

/* teaser-inhalt */
div.t_body {
 color: #000;
 background-color: #EEE;
 border-color: #000;
}

/* teaser-link */
div.t_link a, div.t_link a:visited {
 color: #0026D8;
 text-decoration: underline;
}
div.t_link a:hover, div.t_link a:active, div.t_link a:focus  {
 color: #FFF;
 text-decoration: none;
}