@import url('popupbox.css');
@import url('basis.css');

/* Aufbau                                                                        */
/* 1.) Geometrie  und Design       Zeile 20 - 75        */
/* 2.) Farben                                    Zeile 80 - 100      */
/* 3.) Grafiken  und Buttons          Zeile 100 - 180    */
/* 4.) Suchmasken                         Zeile 180 - 190    */
/* 5.) Regionenseite                      Zeile 190 - 210     */
/* 6.) Angebotsseite                      Zeile 210 - 240     */
/* 7.) Hotelseite                              Zeile 240 - 275     */
/* 8.) Flugseite                               Zeile 275 - 300      */
/* 9.) Buchungsformular              Zeile 300 - 400      */
/* 10.) Bestaetigungsseite           Zeile 400 - 430     */
/* 11.) CSS3-Addons                   Zeile 430 - 475      */

/* ############################################################################################# */
/* ##### 1. Geometrie IBE UND DESIGN ############################################################## */
/* ############################################################################################# */
#page_margins,#frame {width: 730px; margin: 0 auto;}
#page			{margin: 5px;}

/* ##### Design IBE ############################################################################ */

body	{font-family: "Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",arial,sans-serif; font-size: 0.8em;
		 background-color: #eeeeee;	color: #333333;}
#page	{background-color: #ffffff; border: solid 1px #666666; padding-bottom: 10px;}
#frame  {background-color: #FFFFFF; padding: 2px; border: 1px solid #000000;}

/* ##### Allgemein ############################################################################# */

/*  BreadCrumbTrail */
#bct ul{width: 100%; float:left;}
#bct ul li {float: left;}
#bct ul a {display: block;}

/* Einrückung der Wochentage */
#hot .c2 i,#hot .c3 i ,#flug .c2 i {float: left; display: block; width: 30px;}

/* Bewertungen */
.b4 {width: 80px; padding: 2px; display: none; text-align: center;}
.b4 .cnt a {display: block;}
.b4 .scr {display: block;}

/*  Buttons  */
.more {height: 20px; padding: 2px 0px;}
.back, .forw, .next, .check, #g4 .c4  a{padding: 1px 5px !important;	font-weight: bold; font-size: 11px;}
.more a  {padding: 0px 3px !important;	font-size: 9px;}
.check  {display: block; width: 75px; text-align: center; float: right;}
.book  {display: block; width: 200px; text-align: center; font-size: 1.4em; margin: 0 auto;}

/*  Thumbs  */
.thumbs {text-align: center; float: left; width: 82px; height: 74px; overflow: hidden; cursor: pointer; border: solid 1px #666; margin: 2px; padding: 3px;}

/* ### 2.) Semantikblöcke ########################################################################## */
h1 {font-size: 1.25em; padding: 10px;}
h2 {font-size: 1.60em; padding: 10px;}
#pagination { text-align: right; height: 20px; padding: 5px;}

.sort {padding: 5px;}
.hinweis {padding: 10px; font-size: 0.8em; color: #666;}
.error  {border: solid 1px #c00; padding: 10px; font-weight: bold; }
.vakanz {border: solid 1px #090; padding: 10px 10px 10px 50px !important; font-weight: bold;}
.preis {font-weight: bold; color: #000 !important;}
.thumbs {font-size: 0.8em; color:#666; line-height: 160%; cursor: pointer;}
#Gebiete, #Karte{width: 600px;text-align: center;}
#elem1, #elem3, #elem5, #elem7, #elem9, #elem11, #elem13{float: left; font-weight: bold;width:180px;}
#elem2, #elem4, #elem6, #elem8, #elem10, #elem12, #elem14{float: clear; font-weight: bold; width:380px;}
#label, .label{width:120px;background-color:#C00; margin-left:20px;}
#p2{float: clear; margin-top:10px;}

/* ### BreadCrumbTrail ######################################################################### */
#bct ul a {padding: 0 20px 0 24px; line-height: 30px; background: url("images/item_blau2.gif") no-repeat 7px;}
#bct ul a.curr {font-weight: bold;}
#bct ul a.none {color: #cccccc;}
#bct ul a.none:hover, #bct ul a.curr:hover {cursor: default;}



/* ############################################################################################# */
/* ### 2. FARBEN ################################################################################ */
/* ############################################################################################# */

.odd, .r, .thumbs			{background-color: #ffffff;}
.even, #thx_inf .b1			{background-color: #e8f3ff;}
.hover						{background-color: #d2e7ff;}
#reg_rz						{background-color: #c4ddfa;}
h1, .sort,
#bct ul a.curr				{background-color: #6699cc !important; color: #ffffff;}
#pagination, th				{background-color: #336699; color: #ffffff;}

.highlight					{background-color: #c4ddfa !important;}

#F legend, #meldung th		{color:#0f73af;}

.error						{background-color: #ffeeee; color: #cc0000;}
.formerror					{background-color: #ffeeee; color: #cc0000;}
.ok							{background-color: #00cc00 !important;}
.formok						{background-color: #eeffee !important;}
.vakanz						{background:url("images/progress.gif") no-repeat scroll 10px center #eeffee; color: #009900;}

.b4							{background-color: #a9daf8; color: #ffffff;}
.b4 a						{color: #0f73af;}

/* ############################################################################################# */
/* ### 3. GRAFIKEN UND BUTTONS ################################################################## */
/* ############################################################################################# */

/* ### Buttons ################################################################################# */
 .back, .forw,  .more a, .book {border: solid 1px #0f73af; background: url("images/button_blau.png") repeat-x scroll center center; color: #ffffff;}
.next:hover, .back:hover, .forw:hover, .check:hover, .more a:hover, .book:hover, #g4 .c4 a:hover  {background: url("images/button_blau.png") repeat-x scroll center -2px; color: #ffffff;}

/* ### Symbole ################################################################################## */

.stars {background:url("images/stars.png") no-repeat scroll left center transparent;}
.stars.kat- {width: 0px;}
.stars.kat1 {width: 16px;}
.stars.kat2 {width: 32px;}
.stars.kat3 {width: 48px;}
.stars.kat4 {width: 64px;}
.stars.kat5 {width: 85px;}

.mietwagen {
background:url("images/mw.gif") no-repeat scroll left center transparent;
width: 32px; height: 20px;
}
i.mietwagen {
display: block; float:left;
background:url("images/mw.gif") no-repeat scroll left center transparent;
width: 32px; height: 20px;
}

/* ### Bewertungen ############################################################################# */
.b4 .cnt a {font-size: 0.8em; text-decoration: underline; font-weight: bold;}
.b4 .scr {font-weight: bold; font-size: 1.6em;}

/* Suchmaske */
/* ##### Suchmaske ############################################################################## */

#mod_form  {
	display: none;
	background:url("../images/bg_termine_erondo.jpg") repeat-x bottom  transparent;
	}

#mod_form  h2 {background:url("../images/th_erondo.gif") repeat 0  transparent;}

#mod_form #p1 {margin-left: 30px;}
#mod_form #p1 .elem	{width: 310px; float: left; padding: 5px 10px;}
#mod_form #p1 label		{width: 120px; float: left; display: block;}
#mod_form #p1 select, #p1 input	{width: 180px;}

#mod_form #p2 {margin-left: 20px;}
#mod_form #p2 .elem	{width: 160px; float: left; padding: 5px 5px;}
#mod_form #p2 label		{width: 130px; float: right; display: block;margin-top: 2px;}
#mod_form #p2 input		{margin-top: 2px;}

#mod_form #submit {position: relative; top: -10px; left: 520px; width: 200px;}
#mod_form #submit  a {font-size: 18px;}


#mask_margins {margin: 0 auto; border: solid 1px #cccccc;}
#mask #p1		{background-color: #ffffff;}
#mask #p2		{background-color: #eeeeee;}
#mask #submit	{padding: 10px;text-align: right;}




/* ##### Regionen ############################################################################## */
/*  Info */
#reg_inf {border-top: solid 1px #666666;}

/*  Regionen */
#reg_rz .r1>td	{border-top: solid 1px #ffffff; cursor: pointer ;}

/*  Ziele */
#reg_tz td.c1, #reg_rz .r td.c1 {padding-left: 10px;}
#reg_rz td.c1 a,#reg_tz td.c1 a {font-weight: bold; color: #333333;}
#reg_rz td.c2 a,#reg_tz td.c2 a {background: url("images/wiki.png") no-repeat; padding-left: 18px;}
#reg_rz td.c3 i,#reg_tz td.c3 i {background: url("images/fz.png")   no-repeat; padding-left: 18px;}
#reg_rz td.c4 i,#reg_tz td.c4 i {background: none; padding-left: 1px;}
#reg_rz td.c5 i,#reg_tz td.c5 i {background: none; padding-left: 1px;}

/* ##### Angebote ############################################################################## */

/*  Hotelbild b1 */
#ang .b1 {border: solid 1px #666; background-color: #fff;}
#ang .b1 .info {border: solid 1px #fff; font-size: 10px; position: absolute; bottom: 0px; left: 5px; background-image: url("images/icon12_info.png"); background-repeat: no-repeat; background-color: #fff; color: #666; background-position: 2px 1px; padding: 0px 2px 0px 16px; display: none;}
#ang .b1 .label {background-image: url("images/icon_top.png"); background-repeat: no-repeat; height: 43px; width: 59px; font-size: 10px; position: absolute; top: -1px; left: -1px; display: none;}

/*  Hoteldaten b2 */
#ang .b2 .hotel {font-size: 14px; font-weight: bold;}
#ang .b2 .ort {font-size: 10px; font-weight: bold;}

/*  Veranstalter b3 */
#ang .b3 .pv a {display: block; font-size: 10px; text-decoration: underline; }
#ang .b3 .vc img {max-width: 60px;}
#ang .b3 .vn {display: none;}

/*  Tabelle t1 */
#ang .t1 .r1>td { border-bottom: dotted 1px #999999;}

/* ### Hotelseite ### */
/*  Info */
#hot_inf .b2 .hotel {font-size: 18px; font-weight: bold;}
#hot_inf .b3 .vc img {max-width: 60px;}
#hot_inf .b3 .vn {display: none;}
#hot_inf {background:url("images/bg_beach.jpg") no-repeat bottom right transparent;}

/*#t1 {background: url("") repeat-x bottom ;}*/
#t1 .b5 .p	{display: block; font-weight: bold; float: left; width: 100px; clear: left;}
#t1 .b5 .v	{display: block;}
#t1 .b6		{padding: 5px;}
#t1 .c1 .b1 .info	{ font-size: 10px; background-image: url("images/icon12_info.png"); background-repeat: no-repeat; background-color: #fff; color: #666; background-position: 2px 1px; padding: 0px 2px 0px 18px;}
#hot_inf .c1 .b1 .label	{background-image: url("images/icon_top.png"); background-repeat: no-repeat; height: 43px; width: 59px;}

/* ############################################################################################# */
/* ### 4. SUCHMASKEN ########################################################################### */
/* ############################################################################################# */
#TabSuche{	width: 730px; }



/* ############################################################################################# */
/* ##### 5. REGIONENSEITE  ####################################################################### */
/* ############################################################################################# */


/* Spaltenbreiten */
#reg_tz td.c1, #reg_rz td.c1 {width:auto;}
#reg_tz td.c2, #reg_rz td.c2 {width:70px;}
#reg_tz td.c3, #reg_rz td.c3 {width:70px;}
#reg_tz td.c4, #reg_rz td.c4 {width:70px;}
#reg_tz td.c5, #reg_rz td.c5 {width:70px;}
#reg_tz td.c6, #reg_rz td.c6 {width:60px;}
#reg_tz td.c7, #reg_rz td.c7 {width:80px;}
#reg_tz td.c8, #reg_rz td.c8 {width:80px;}

/* Zellenpadding */
#reg_tz td,#reg_rz td,#reg_tz th,#reg_rz th,#reg_inf {padding: 3px;}



/* ############################################################################################# */
/* ##### 6. ANGEBOTSSEITE  ####################################################################### */
/* ############################################################################################# */

/* Infobox */
#ang_inf {padding: 5px;}
#ang_inf p {margin: 5px;}

/* Zeilen */
#ang .c0 {position: relative; min-height: 120px; padding-left: 5px;} 
/* !!! padding wg. IE7 float-bug siehe margin #ang .b1  !!! */
#ang .b1 {float: left; position: relative; margin: 5px 5px 5px 0px; width: 114px; height: 88px; background-repeat: no-repeat; background-position: center; }
#ang .b2 {float: left; position: relative; margin: 5px 5px 0px 0px; width: 130px;}
#ang .b3 {float: left; position: absolute; margin: 5px 5px 0px 0px; width: 100px; padding: 2px; left: 225px; top: 0px; min-height: 50px; text-align: center;}
#ang .b4 {float: left; position: absolute; margin: 5px 5px 0px 0px; left: 225px; top: 60px;}
#ang .t1, .more {float: right; position: relative; width:400px; }
#ang .t1 td {vertical-align: top;}

#ang .t1 td.c1 {width:auto;}
#ang .t1 td.c2 {width:90px;}
#ang .t1 td.c3 {width:20px;}
#ang .t1 td.c4 {width:80px;}
#ang .t1 td.c5 {width:50px;}

#ang .t1 td {padding: 3px;}
#ang .t1 th {padding: 3px;}




/* ############################################################################################# */
/* ##### 7. HOTELSEITE  ########################################################################## */
/* ############################################################################################# */

/* Infobox */
#hot_inf .b2 {float: left; margin: 5px; position: relative; width: auto;}
#hot_inf .b3 {float: left; margin: 5px; position: relative; width: 90px; padding: 2px; text-align: center;}
#hot_inf .b4 {float: right; margin: 5px 5px 0px 0px; position: relative;}
#hot_inf .b7 {float: left; margin: 5px; position: relative; width: auto; padding: 2px; text-align: center;}

#hot_inf #t1 {border:0 ; margin:0;}

#hot_inf #t1 .c1			{vertical-align: top; width: 320px; position: relative;}
#hot_inf #t1 .c1 .b1		{position: relative;}
#hot_inf #t1 .c1 .b1 .info	{float: left; position: absolute; display: none; bottom: 0px ;}
#hot_inf .c1 .b1 .label		{float: left; position: absolute; display: none; top: 0px ;}

#hot_inf #t1 .c2			{vertical-align: top; width: auto;}
#hot_inf #t1 .c2 .b5		{padding: 5px;}

/* Tabelle Spaltenbreiten */
#hot td.c1 {width:200px;}
#hot td.c2 {width:130px;}
#hot td.c3 {width:130px;}
#hot td.c4 {width:auto;}
#hot td.c5 {width:70px;}
#hot td.c6 {width:90px; padding-left: 10px;}
#hot .v td {vertical-align: top;}

/* Tabelle Zellenpadding */
#hot td, #hot th {padding: 3px;}
#hot .r .c4, #hot th.c4 {text-align: center;}



/* ############################################################################################# */
/* ##### 8. FLUGSEITE ############################################################################ */
/* ############################################################################################# */

/* Tabelle Spaltenbreiten */
#flug td.c1 {width:auto;}
#flug td.c2 {width:120px;}
#flug td.c3 {width:40px;}
#flug td.c4 {width:100px;}
#flug td.c5 {width:100px;}
#flug td.c6 {width:60px;}
#flug td.c7 {width:90px; padding-left: 10px;}
#flug .v td {vertical-align: top;}

/* Tabelle Zellenpadding */
#flug td, #flug th {padding: 3px;}
#flug .r .c3, #flug th.c3,#flug .r .c5, #flug th.c5 {text-align: center;}
#flug .r {height: 36px;}


/* noch keine Wochentage */
#flug .c2 i {display: none;}


/* ############################################################################################# */
/* ##### 9. BUCHUNGSFORMULAR ################################################################## */
/* ############################################################################################# */

#book_inf .t2 {float: right; position: relative; width:400px; margin: 5px 0; }
#book_inf .t2 th {padding: 2px; border-bottom: dotted 1px #999999; background-color: transparent; color: #333333;}
#book_inf .t2 td {padding: 2px; border-bottom: dotted 1px #999999;}

#tod {margin: 10px;}

#meldung {margin: 10px; width: auto;}
#meldung th {font-size: 1.25em; background-color: transparent;}
#meldung pre {font-size: 12px; border: solid 1px #cccccc; padding: 5px;}

#F fieldset {margin: 10px; padding: 10px; border: solid 1px #cccccc;}
#F legend {font-weight: bold;font-size: 1.25em;}
#F select {border: solid 1px #cccccc;}
#F input  {border: solid 1px #cccccc; padding: 1px;}
#F input:focus, #F select:focus {border: solid 1px #666666;}
#F p, #g1 .col1, #g1 .col2, #g3 .dr, #g3 .c1, #g5 .c1 {margin:5px;}
#F label>em, #g7 em  {font-weight: bold; color: #cc0000;}

/* g1 Reiseanmelder */

#g1 label {float: left; width: 100px;}
#g1 ul {list-style-type: square; margin: 10px 20px;}

#g1 .col1{float: left; width: 48%; clear:left;}
#g1 .col2{float: left; width: 48%;}

#g1 input#R_PLZ {width: 40px; margin-right: 2px;}
#g1 input#R_ORT {width: 146px;}

#g1 select {width: 200px;}
#g1 input  {width: 196px;}


/* g2 Reiseteilnehmer */
#g2 .dh, #g2 .dr {clear: left; padding: 2px;}
#g2 .dr .c1 i {display: block; margin: 1px; width: 16px; text-align: center; font-weight: bold; background-color: #cc0000; color: #ffffff;}

#g2 .dh .c1 {width:30px; float: left;}
#g2 .dh .c2 {width:300px; float: left;}
#g2 .dh .c3 {width:220px; float: left;}
#g2 .dh .c4 {width:50px; float: left;}

#g2 .dr .c1 {width:30px; float: left;}
#g2 .dr .c2 {width:300px; float: left;}
#g2 .dr .c3 {width:220px; float: left;}
#g2 .dr .c4 {width:50px; float: left;}

#g2 .c2 select  {width: 70px;}
#g2 .c2 input {width: 200px;}
#g2 .c3 input {width: 200px;}
#g2 .c4 input {width: 40px;}

/* g3 Reiseversicherung */
#g3 .dr {clear: left;}

#g3 .c1 {font-weight: bold;}
#g3 .c2 {float: left; margin-top: 2px;}
#g3 .c3 {padding-left: 20px; float: left;}
#g3 .c3 a {text-decoration: underline;}
#g3 .c4 {float: right; margin-right: 70px; font-weight: bold;}

/* g4 Mietwagen */

#g4 .dr {clear: left;}

#g4 .c1 {font-weight: bold;}
#g4 .c2 {float: left; margin-top: 2px;}
#g4 .c3 {padding-left: 20px; float: left;}
#g4 .c4 {text-align: center; padding: 20px;}

#g4 .col1 { width: 300px; margin: 0 0 0 30px; padding: 10px 0; clear: left;}
#g4 .col2 { width: 300px; float:right; clear: both;}
#g4 .col2>p { font-weight: bold;}

#g4 {background:url("images/scar.gif") no-repeat scroll right top transparent;}

/* g5 Zahlung */
#g5 .dr {margin-bottom: 10px; clear: left;}

#g5 .col,#g5 .col2 {float: left; margin-right: 10px;}
#g5 .col label, #g5 .col2 label {float: left; font-size: 0.8em;}
#g5 .col input {float: left; clear: left;}
#g5 .col2 span {float: left; clear: left;}

#g5 .c1 {font-weight: bold;}
#g5 .c2 {float: left; margin-top: 2px;}
#g5 .c3 {padding-left: 30px;}
#g5 .c4 {font-size: 0.8em; padding-left: 27px; clear: left;}

/* g6 Geschäftsbedingungen */
#g6 .dr {margin-bottom: 10px;}
#g6 .c2 {float: left; margin-top: 2px;}
#g6 .c3 {padding-left: 30px;}
#g6 .c3 a {text-decoration: underline;}

/* g7 buchen */
#g7 .dr {margin-bottom: 10px;}
#g7 .c2 {float: left; margin-top: 2px;}
#g7 .c3 {padding-left: 30px;}

#datacheck  {border: solid 1px #cc0000; margin: 5px; height: 100px; overflow: auto; display: none;}
#booking	{background-color: #eeeeee; margin: 5px; padding: 5px; }

/* ############################################################################################# */
/* ##### 10. BUCHUNGSBESTAETIGUNGSSEITE ######################################################## */
/* ############################################################################################# */
#thx_inf {margin: 10px;}
#thx_inf p {margin: 10px 0;}
#thx_inf .b1 {padding: 10px; overflow: hidden;}
#thx_inf .b2, #thx_inf .b3 {margin: 10px 0;}

#thx_inf .col1{float: left; width: 20%; clear:left;}
#thx_inf .col2{float: left; width: 20%;}
#thx_inf .col3{float: left; width: 20%; margin-left: 30px;}
#thx_inf .col4{float: left; width: 20%;}

#thx_inf .col1 .c1, #thx_inf .col1 .c2, #thx_inf .col1 .c3, #thx_inf .col1 .c4, #thx_inf .col1 .c5,
#thx_inf .col3 .c1, #thx_inf .col3 .c2, #thx_inf .col3 .c3, #thx_inf .col3 .c4, #thx_inf .col3 .c5
{font-weight: bold; border-bottom: dotted 1px #999999;}

#thx_inf .col2 .c1, #thx_inf .col2 .c2, #thx_inf .col2 .c3, #thx_inf .col2 .c4, #thx_inf .col2 .c5,
#thx_inf .col4 .c1, #thx_inf .col4 .c2, #thx_inf .col4 .c3, #thx_inf .col4 .c4, #thx_inf .col4 .c5
{ border-bottom: dotted 1px #999999;}

#vgnr {font-weight: bold; font-size: 1.4em; display: block;}

/* ############################################################################################# */
/* ##### 11. CSS3 ADDONS ######################################################################## */
/* ############################################################################################# */

#page{
    -webkit-border-radius:	7px;
    -moz-border-radius:		7px;
    border-radius:			7px;
    -webkit-box-shadow:	2px 1px 6px #aaa;
    -moz-box-shadow:	2px 1px 6px #aaa;
    box-shadow:			2px 1px 6px #aaa;
}

 .back, .forw, .more a {
    -webkit-border-radius:	2px;
    -moz-border-radius:		2px;
    border-radius:			2px;
}

 .more a, #ang .b4, #hot_inf .b4, #ang .b1,.thumbs {
    -webkit-box-shadow:	2px 1px 3px #aaa;
    -moz-box-shadow:	2px 1px 3px #aaa;
    box-shadow:			2px 1px 3px #aaa;
}

#ang .b4,#hot_inf .b4, #ang .b1 ,.thumbs {
    -webkit-border-radius:	5px;
    -moz-border-radius:		5px;
    border-radius:			5px;
}
  .back, .forw, .more a {
    -webkit-text-shadow:	1px 1px 1px #666;
    -moz-text-shadow:		1px 1px 1px #666;
    text-shadow:			1px 1px 1px #666;
}

.print {
font-size:12px;
padding:5px;
}
.print a {
color:#079FE8;
text-decoration:none;
}