/******************************************************************************/
/***** Start: Grundeinstellungen **********************************************/
/******************************************************************************/ 
html *  
 {
  margin: 0;  
  padding: 0; 
 } 
  
html, body { height: 100%; }  
  
body
 {
  font-family: 'Droid Sans', Arial, Verdana, sans-serif;
  font-size: 100.01%;
  background: #fce285;
  color: #58301b;
 }



 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/******************************************************************************/
/***** Start: Allgemeingueltige Klassen und Definitionen **********************/ 
/******************************************************************************/ 
.beendeFluss { clear: both; }
.clear       { clear: both; }
.clean       { clear: both; }

.unsichtbar { width:0px; height:0px; left:-12000px; top:-12000px; position:absolute; overflow:hidden; display:inline; white-space: nowrap; } 
.invisible  { width:0px; height:0px; left:-12000px; top:-12000px; position:absolute; overflow:hidden; display:inline; white-space: nowrap; } 
#clear      { width:0px; height:0px; left:-12000px; top:-12000px; position:absolute; overflow:hidden; display:inline; white-space: nowrap; } 
.hidden { visibility: hidden; }   
   
.ohneRand { border: 0; }  

.error { color: #eb4409; } 
.confirm { padding: 10px 0px 10px 0px; font-weight: bold; color: #1a5d3b; } 
 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/******************************************************************************/ 
/****** Start: Globale Element-Definitionen ***********************************/
/******************************************************************************/
div#wrapper { font-size: 12px; }

h1 { padding: 0px 0px 20px 0px; font-size: 32px; color: #ff8c40; font-weight: normal; } 
h2 { padding: 0px 0px 20px 0px; font-size: 32px; color: #ff8c40; font-weight: normal; }  
h3 { padding: 0px 0px 15px 0px; font-size: 18px; color: #ff8c40; font-weight: normal; }
h4 { padding: 0px 0px 15px 0px; font-size: 12px; color: #d65e1f; font-weight: normal; text-transform: uppercase; }
h5 { padding: 0px 0px 15px 0px; font-size: 12px; color: #d65e1f; font-weight: normal; }
h6 { padding: 0px 0px 15px 0px; font-size: 12px; color: #000000; font-weight: bold; text-transform: uppercase; } 

p { padding: 0px 0px 10px 0px; line-height: 1.4em; }

ul { padding: 0px 0px 10px 25px; list-style-type: square; }
ul ul { padding: 0px 0px 0px 25px; }
ul li { }

ol { padding: 0px 0px 10px 25px; }
ol ol{ padding: 0px 0px 0px 25px; }
ol li { }

a img { border: 0; } 

a         { color: #ff5600; text-decoration: none; border-bottom: 1px dotted #ff5600; padding: 0px 6px 0px 0px; background: url(../img/symbols/arrow_var1.png) center right no-repeat;  }
a:link    { color: #ff5600; text-decoration: none; border-bottom: 1px dotted #ff5600; }
a:visited { color: #ff5600; text-decoration: none; border-bottom: 1px dotted #ff5600; }
a:focus   { color: #58301b; text-decoration: none; border-color: #000000; }
a:hover   { color: #58301b; text-decoration: none; border-color: #000000; }
a:active  { color: #58301b; text-decoration: none; border-color: #000000; }

form { padding: 0px 0px 10px 0px; }

form input.text       { color: #838383; font-size: 1em; border: 1px solid #ffffff; width: 200px; padding: 2px 5px 2px 5px; background: #ffffff; background: rgba(255,255,255,0.65); border-radius: 5px; font-family: 'Droid Sans', Arial, Verdana, sans-serif; }
form input.text:focus { border: 1px solid #000000; color: #000000; }

form input.captcha       { color: #838383; font-size: 1em; border: 1px solid #ffffff; width: 35px; padding: 2px 5px 2px 5px; background: #ffffff; background: rgba(255,255,255,0.65); border-radius: 5px; font-family: 'Droid Sans', Arial, Verdana, sans-serif; }
form input.captcha:focus { border: 1px solid #000000; color: #000000; }

form textarea.textarea       { color: #838383; font-size: 1em; border: 1px solid #ffffff; width: 644px; padding: 2px 5px 2px 5px; height: 140px; font-family: arial, verdana, sans-serif; background: #ffffff; background: rgba(255,255,255,0.65); border-radius: 5px; font-family: 'Droid Sans', Arial, Verdana, sans-serif; }
form textarea.textarea:focus { border: 1px solid #000000; color: #000000; }

form select.select       { color: #838383; font-size: 1em; border: 1px solid #ffffff; width: 210px; padding: 2px 5px 2px 5px; background: #ffffff; background: rgba(255,255,255,0.65); border-radius: 5px; font-family: 'Droid Sans', Arial, Verdana, sans-serif; }
form select.select:focus { border: 1px solid #000000; color: #000000; }
 
form input.submit        
 {  
  font-family: 'Droid Sans', Arial, Verdana, sans-serif;
  font-weight: normal;
  font-size: 12px;
  color: #ffffff;
  height: 25px;
  line-height: 25px;
  background: #d65e1f;
  border: 0;
  border-radius: 5px;
  padding: 0px 10px 0px 10px;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid #ffffff;
 }
 
form input.submit:focus  { background: #58301b; }
form input.submit:hover  { background: #58301b; }
form input.submit:active { background: #58301b; }

form label { display: block; padding: 10px 0px 5px 0px; color: #000000; }

form fieldset { padding: 0px 0px 10px 0px; margin: 0px; border: 0 }
form fieldset legend { padding: 0px 10px 5px 10px; font-weight: bold; color: #000000; }

form span.mandatory { color: #eb4409; }

form div.form_element { padding: 0px 0px 5px 0px; }

form p.error { clear: both; padding: 5px 0px 5px 0px; font-style: italic; }

form div.submit_container { padding: 10px 0px 10px 0px; }


/* Spezielle Form-Elemente */
form label.select_var1 { display: block; float: left; padding: 20px 5px 0px 0px; margin: 0; }
form select.select_var1 { width: 60px; float: left; display: block; margin-top: 15px; }

form textarea.textarea_var1 { width: 200px; }

form label.datePicker { display: block; width: 30px; padding: 0px 5px 0px 0px; float: left; }
form input.datePicker { width: 100px; float: left; }
form a.datePickerLink { border: 0; background: 0; padding: 0; float: left; display: block; padding: 0px 0px 0px 5px; cursor: pointer; }

/* Formular: Datum-Auswahl (Ausfuehrung mit Select-Feldern) */
form fieldset.var1 { width: 216px; float: left; margin: 0px 10px 0px 0px; }
form fieldset.var1 legend { padding: 0px 10px 0px 10px; margin: 0; font-size: 0.8em; }
form fieldset.var1 div.form_element { margin: 0px 10px 0px 0px; float: left; padding: 0; }
form fieldset.var1 div.form_element label { font-size: 0.8em; text-transform: uppercase; display: none; }
form fieldset.var1 div.form_element select.select_var1 { width: 50px; } 
form fieldset.var1 div.form_element select.select_var2 { width: 70px; } 
form fieldset.var1 div.form_element select.select_var3 { width: 60px; } 

/* HG-Varianten (wenn z.B. body-Klasse oder Element-Klasse gesetzt ist... */
.bgvar2 form input.text { border: 1px solid #d6d6d6; background: #f2f2f2; }
.bgvar2 form select.select { border: 1px solid #d6d6d6; background: #f2f2f2; }
.bgvar2 form input.captcha { border: 1px solid #d6d6d6; background: #f2f2f2; }
.bgvar2 form textarea.textarea { border: 1px solid #d6d6d6; background: #f2f2f2; }
.bgvar2 form label { color: #af9d97; }

table { border-spacing: 1px; border-collapse: collapse; margin: 0px 0px 10px 0px; width: 100%; } 
table tr td { padding: 5px; border: 1px solid #bdbcbc; vertical-align: top; background: #f2f2f2; background: rgba(242,242,242,0.65); border-radius: 2px; }
table tr th { padding: 5px; vertical-align: top; font-weight: normal; border: 1px solid #bdbcbc; text-align: left; vertical-align: top; background: #f2f2f2; background: rgba(242,242,242,0.65); text-transform: uppercase; border-radius: 2px; font-size: 16px; }
 
/* List Var1 */  
ul.var1 { list-style: none; padding: 0; margin: 0; }
ul.var1 li { padding: 0px 0px 0px 10px; background: url(../img/symbols/arrow_var1.png) center left no-repeat; }
 
/* List Var2 (list on details page) */ 
/*ul.var2 { list-style: none; padding: 0; margin: 0; }
ul.var2 li { padding: 0px 0px 10px 25px; background: url(../img/symbols/arrow_var2.png) 0px 2px no-repeat; color: #d65e1f; font-size: 14px; } 
*/

/* List Var3 (list un footer area) */ 
ul.var3 { list-style: none; padding: 0; margin: 0; }
ul.var3 li { padding: 0px 0px 10px 0px; } 
 
table.var1 { width: 100%; border-spacing: 1px; border-collapse: collapse; margin: 0px 0px 10px 0px; } 
table.var1 tr td { color: #ff8c40; background: none; border: 0; padding: 10px 20px 10px 5px; border-bottom: 1px solid #f3e8c0; }
table.var1 tr td.col_0 { font-size: 14px; } 
table.var1 tr td.col_0 strong { color: #58301b; text-transform: uppercase; font-weight: normal; }

.box_var1 { border: 0; margin: 0px 0px 20px 0px; }
.box_var1 .image_container a { border: 0; padding: 0; background: none; display: block; }
.box_var1 .image_container img { display: block; border: 1px solid #8a661a; display: block; width: 448px; overflow: hidden; }
.box_var1 .link { border: 1px solid #8a661a; background: #ffffff; padding: 20px; text-align: center; font-size: 16px; line-height: 25px; } 
.box_var1 .link strong { font-size: 24px; font-weight: normal; color: #FF5600; } 
.box_var1 .link a { margin: 0px 10px 0px 0px; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/******************************************************************************/  
/***** Start: Grundgeruest der Seite ******************************************/
/******************************************************************************/ 
div#wrapper { width: 100%; position: relative; min-height: 100%; padding-bottom: 250px; }

div#header { width: 100%; background: url(../img/css/header.png) top left repeat-x; } 
div#header div.inside { width: 980px; height: 222px; margin: 0 auto; position: relative; z-index: 15; background: url(../img/css/header_inside.png) bottom left no-repeat; } 

/* HG-Varianten */
body.usedom div#header   { background-image: url(../img/css/header_hg_usedom.png); }
body.ligurien div#header { background-image: url(../img/css/header_hg_ligurien.png); }

div.custom div#Zusatzspalte { width: 980px; margin: 0 auto;  }
div.custom div#Zusatzspalte div.inside { padding: 0px 0px 0px 20px; margin: 10px 0px 10px 0px } 

div#container { width: 980px; margin: 0 auto; position: relative; z-index: 10; }    

/* Var1: Zweispaltig 470 40 470 */
body.var1 div#left { width: 470px; float: left; }
body.var1 div#left div.inside { padding: 20px 0px 20px 20px; }

body.var1 div#right { width: 470px; float: right; }
body.var1 div#right div.inside { padding: 20px 20px 20px 0px; }

/* Var2: Zweispaltig 736 26 216 */
body.var2 div#left { width: 736px; float: left; }
body.var2 div#left div.inside { padding: 20px 20px 20px 20px; }

body.var2 div#right { width: 216px; float: right; }
body.var2 div#right div.inside { padding: 20px 0px 20px 0px; }

/* Var2: Zweispaltig 0 100% 20 */
body.var3 div#left { width: 0px; float: left; }
body.var3 div#left div.inside { padding: 20px 20px 20px 20px; }

body.var3 div#right { width: 0px; float: right; }
body.var3 div#right div.inside { padding: 20px 0px 20px 0px; }

div#main { clear: both; width: 980px; margin: 0 auto; }
div#main div.inside { padding: 0px 20px 20px 20px; }

div#footer { width: 100%; position: absolute; z-index: 15; bottom: 0px; background: url(../img/css/footer.png) top left repeat-x;  }
div#footer div.inside { width: 980px; z-index: 15; overflow: hidden; height: 215px; margin: 0 auto; position: relative; background: url(../img/css/footer_inside.png) top left no-repeat; }

div#footer div.inside div.row_0 div.col_0 { position: absolute; top: 40px; left: 20px; width: 340px; }
div#footer div.inside div.row_0 div.col_1 { position: absolute; top: 40px; left: 420px; width: 300px; }
div#footer div.inside div.row_0 div.col_2 { position: absolute; top: 40px; right: 0px; width: 220px; }

/* HG-Varianten */
body.bgvar1 div#container { background: url(../img/css/container.jpg) 488px 0px no-repeat; min-height: 650px; } /* HG fuer die Startseite */ 
body.bgvar2 div#container{ background: #ffffff; }

/* Spezial-CSS-Definitionen (z.B. auf der Startseite die Brotkruemelnavigation ausblenden */
body.spvar1 div.custom { width:0px; height:0px; left:-12000px; top:-12000px; position:absolute; overflow:hidden; display:inline; white-space: nowrap; }
































/******************************************************************************/  
/***** Start: Inhalte auf der Webseite ****************************************/
/******************************************************************************/ 
div#wrapper { font-size: 13px; }



/***** Start: Logo/H1 im Seitenkopf *******************************************/
h1#logo { height: 81px; overflow: hidden; position: absolute; top: 84px; left: 336px; padding: 0; margin: 0; }
h1#logo a { display: block; padding: 0; margin: 0; background: 0;  }
h1#logo a img { display: block; vertical-align: top; }



/***** Start: Hauptmenue ******************************************************/
div#header div.mod_navigation { position: absolute; top: 164px; left: 224px; font-size: 16px; } 
div#header div.mod_navigation ul { list-style: none; padding: 0; margin: 0; }
div#header div.mod_navigation ul li { display: inline; }
div#header div.mod_navigation ul li a { display: block; float: left; border: 0; border-right: 1px solid #ffcfaf; margin-right: 20px; padding: 10px 10px 5px 10px; background: url(../img/symbols/arrow_var1.png) 0px 22px no-repeat; width: 90px; }
div#header div.mod_navigation ul li a span { padding-bottom: 1px; border-bottom: 1px dotted #ec8832; line-height: 26px; }  

div#header div.mod_navigation ul li a.usedom    { background: url(../img/symbols/usedom_inactive.png) 0px 0px no-repeat; padding-left: 50px; width: 70px; }
div#header div.mod_navigation ul li a.ligurien  { background: url(../img/symbols/ligurien_inactive.png) 0px 0px no-repeat; padding-left: 50px; width: 71px; }

div#header div.mod_navigation ul li a         { color: #fab07f; text-decoration: none; }
div#header div.mod_navigation ul li a:link    { color: #fab07f; text-decoration: none; }
div#header div.mod_navigation ul li a:visited { color: #fab07f; text-decoration: none; }
div#header div.mod_navigation ul li a:focus   { color: #fab07f; text-decoration: none; }
div#header div.mod_navigation ul li a:hover   { color: #fe9a58; text-decoration: none; }
div#header div.mod_navigation ul li a:active  { color: #fe9a58; text-decoration: none; }
div#header div.mod_navigation ul li a.active  { color: #fe9a58; text-decoration: none; font-weight: bold; } 

div#header div.mod_navigation ul li a.usedom:focus   { background-image: url(../img/symbols/usedom_active.png);}
div#header div.mod_navigation ul li a.usedom:hover   { background-image: url(../img/symbols/usedom_active.png); }
div#header div.mod_navigation ul li a.usedom:active  { background-image: url(../img/symbols/usedom_active.png); }
div#header div.mod_navigation ul li a.usedom.active  { background-image: url(../img/symbols/usedom_active.png); } 

div#header div.mod_navigation ul li a.ligurien:focus   { background-image: url(../img/symbols/ligurien_active.png);}
div#header div.mod_navigation ul li a.ligurien:hover   { background-image: url(../img/symbols/ligurien_active.png); }
div#header div.mod_navigation ul li a.ligurien:active  { background-image: url(../img/symbols/ligurien_active.png); }
div#header div.mod_navigation ul li a.ligurien.active  { background-image: url(../img/symbols/ligurien_active.png); } 



/***** Start: Brotkruemelnavigation *******************************************/
div.mod_breadcrumb { color: #ff8c40; font-size: 13px; } 

div.mod_breadcrumb a         { color: #ff8c40; text-decoration: none; border-bottom: 0; padding: 0; background: 0; }
div.mod_breadcrumb a:link    { color: #ff8c40; text-decoration: none; border-bottom: 0; }
div.mod_breadcrumb a:visited { color: #ff8c40; text-decoration: none; border-bottom: 0; } 
div.mod_breadcrumb a:focus   { color: #58301b; text-decoration: none; }
div.mod_breadcrumb a:hover   { color: #58301b; text-decoration: none; }
div.mod_breadcrumb a:active  { color: #58301b; text-decoration: none; }

div.mod_breadcrumb a.active     { color: #58301b; text-decoration: none; } 
div.mod_breadcrumb span.active  { color: #58301b; text-decoration: none; } 

div.mod_breadcrumb a.first { background: url(../img/symbols/house.png) center left no-repeat; padding: 0px 0px 0px 20px; } 



/***** Start: FeWo-Subnavigation **********************************************/
div.custom div.mod_customnav { }
div.custom div.mod_customnav ul { list-style: none; padding: 0; margin: 0; }
div.custom div.mod_customnav ul li { display: inline; margin: 0px 20px 0px 0px; }

div.custom div.mod_customnav a         { color: #ff8c40; text-decoration: none; }
div.custom div.mod_customnav a:link    { color: #ff8c40; text-decoration: none; }
div.custom div.mod_customnav a:visited { color: #ff8c40; text-decoration: none; } 
div.custom div.mod_customnav a:focus   { color: #58301b; text-decoration: none; }
div.custom div.mod_customnav a:hover   { color: #58301b; text-decoration: none; }
div.custom div.mod_customnav a:active  { color: #58301b; text-decoration: none; }


.var3 .level_1 {
    line-height: 25px;
}

/***** Start: Reservierungsplan ***********************************************/
.mod_dlh_minireservationplan { margin: 0px 0px 20px 0px; }
.mod_dlh_minireservationplan table { border-spacing: 1px; border-collapse: collapse; margin: 0px 0px 10px 0px; width: 216px; }
.var3 .mod_dlh_minireservationplan table { border-spacing: 1px; border-collapse: collapse; margin: 0px 0px 10px 0px; width: 100%; }

.mod_dlh_minireservationplan table thead th { text-align: center; background: none; border: 0; color: #000000; margin: 0px 3px 3px 0px; }
.mod_dlh_minireservationplan table thead th.head { color: #000000; }
.mod_dlh_minireservationplan table thead th a         { color: #000000; text-decoration: none; background: none; padding: 0; border: 0; }
.mod_dlh_minireservationplan table thead th a:link    { color: #000000; text-decoration: none; }
.mod_dlh_minireservationplan table thead th a:visited { color: #000000; text-decoration: none; }
.mod_dlh_minireservationplan table thead th a:focus   { color: #000000; text-decoration: none; }
.mod_dlh_minireservationplan table thead th a:hover   { color: #000000; text-decoration: none; }
.mod_dlh_minireservationplan table thead th a:active  { color: #000000; text-decoration: none; }

.mod_dlh_minireservationplan table tbody td.days { background: #84ac32; text-align: center; border: 1px solid #fce285; color: #000000; }
.mod_dlh_minireservationplan table tbody td.blocked { background: #fc7d37; }
.mod_dlh_minireservationplan table tbody td.reserved { background: url(../img/content/halber_tag2.png) top left no-repeat #fc7d37  !important ; }
.mod_dlh_minireservationplan table tbody td.active  { background: #fc7d37;  }
.mod_dlh_minireservationplan table tbody td.empty { background: none; }



/***** Start: Tab-Box *********************************************************/
div.tabbox {  padding: 0px 0px 20px 0px; margin: 0px 0px 20px 0px;  }

div.tabbox div.tabmenu { height: 30px; }
div.tabbox div.tabmenu ul { list-style: none; padding: 0; margin: 0; position: relative; }
div.tabbox div.tabmenu ul li { display: block; }
div.tabbox div.tabmenu ul li a { display: block; float: left; line-height: 30px; padding: 0px 10px 0px 10px; margin: 0px 0px 0px 5px; border: 0; background: #fff9e4; cursor: pointer; font-size: 13px; }
 
div.tabbox div.tabmenu ul li a         { color: #d48e60; text-decoration: none; } 
div.tabbox div.tabmenu ul li a:link    { color: #d48e60; text-decoration: none; }
div.tabbox div.tabmenu ul li a:visited { color: #d48e60; text-decoration: none; }
div.tabbox div.tabmenu ul li a:focus   { color: #ff8c40; text-decoration: none; } 
div.tabbox div.tabmenu ul li a:hover   { color: #ff8c40; text-decoration: none; }
div.tabbox div.tabmenu ul li a:active  { color: #ff8c40; text-decoration: none; }

div.tabbox div.tabmenu ul li:first-child a { margin-left: 20px; }

/* Aktive Tabs-Menuepunkte */
div.tabbox div.tabmenu ul li a.active { color: #ff8c40; text-decoration: none; background: #ffffff; }
div.tabbox div.tabmenu ul li a.tabmenu_element_active { color: #ff8c40; text-decoration: none; background: #ffffff; }

/* Tab-Inhaltscontainer */
div.tabbox div.tabcontent { padding: 20px; background: #ffffff; }
div.tabbox div.tabcontent div.tabcontent_element { height: auto; background: #ffffff; padding: 20px; width: 656px; } 

.var3 .tabcontent {
   background-color: white;
    padding: 20px;
    float: left;
    width: 100%;
    display: block;
}

/* Ein- und Ausblenden der Tabs */
div.tabbox div.tabcontent div.tabcontent_element { position: absolute; left: -20000px; display: block; /* Anpassung wg. GoogleMapsBug, eigentlich display: none */ } 
div.tabbox div.tabcontent div.tabcontent_element_active { position: absolute; left: 20px; display: block; }



/***** Start: Galerie *********************************************************/
div.ce_gallery { margin: 0px 0px 20px 0px; }
div.ce_gallery table { border: 0; border-collapse: collapse; width: 100%; }
div.ce_gallery table td { text-align: left; padding: 0px 10px 10px 0px; border: 0; background: none; }
div.ce_gallery table td.col_last { padding-right: 0; }
div.ce_gallery a { background: none; border: 0; padding: 0; display: block; box-shadow: 0px 0px 5px rgba(66,66,66, 0.40);  }
div.ce_gallery a:hover { box-shadow: 0px 0px 5px rgba(66,66,66, 0.90); }
div.ce_gallery a img { display: block; }



/***** Start: Newsletter registrieren *****************************************/
div.mod_subscribe { }
div.mod_subscribe input.submit { margin: 5px 0px 0px 0px; }



/***** Start: Kommentare ******************************************************/
div.ce_comments { margin: 0px 0px 20px 0px;  }
div.ce_comments div.comment_default { border-bottom: 1px solid #d6d6d6; padding: 10px 0px 10px 0px; }
div.ce_comments div.comment_default p.info { color: #000000; font-weight: bold; }
div.ce_comments div.reply { color: #666666; } 
div.ce_comments div.reply p.info { color: #666666; }



/***** Start: Googlemaps ******************************************************/
div.mod_dlh_googlemaps { margin: 0px 0px 20px 0px; }
div.mod_dlh_googlemaps a { border: 0; padding: 0; background: none; }
div.mod_dlh_googlemaps .routinglink { clear: left; }
div.mod_dlh_googlemaps input.text { border: 1px solid #eca6a6; }



/***** Start: Akkordeon *******************************************************/
div.ce_accordion { margin: 0px 0px 20px 0px; }
div.ce_accordion div.toggler { cursor: pointer; }
div.ce_accordion div.active a { background-image: url(../img/symbols/arrow_var1a.png); padding-right: 10px; }



/***** Start: Ueberschrift in der Zusatzspalte ********************************/
div#Zusatzspalte h2 { padding: 20px 0px 10px 0px; margin: 0; }



/***** Start: Textarea in der linken und rechten Spalte (HG VAR 1, 2) *********/
body.var1 div#left form textarea.textarea { width: 436px; }
body.var1 div#right form textarea.textarea { width: 436px; }

body.var2 div#right form textarea.textarea { width: 200x; }




























/* DatePicker by Arian Stolwijk, <http://mootools.net/forge/p/mootools_datepicker>, MIT license */
.datepicker { position: absolute; z-index: 3003; border: 2px solid #003300; border-radius: 5px; font-size: 11px; width: 200px; box-shadow: 0px 0px 2px #666666; padding: 2px; height: 222px; background: #ffffff; background: rgba(255,255,255, 0.70); } 

.datepicker.column_2 { width: 400px; }
.datepicker.column_3 { width: 600px; }
.datepicker.column_4 { width: 800px; }
.datepicker.column_5 { width: 980px; }

/* header */
.datepicker .header { position: relative; background: #ffffff; height: 20px; overflow: hidden; color: #000000; font-weight: bold; }
.datepicker .header .title { text-align: center; line-height: 20px; }
.datepicker .header .next, .datepicker .header .previous, .datepicker .header .closeButton { position: absolute; top: 0px; width: 20px; height: 20px; text-align: center; line-height: 15px; cursor: pointer; font-size: 12px; line-height: 20px; }
.datepicker .header .next:hover, .datepicker .header .previous:hover, .datepicker .header .closeButton:hover { background: #000000; }
.datepicker .header .next:focus, .datepicker .header .previous:focus, .datepicker .header .closeButton:focus { background: #000000; }
.datepicker .header .previous { left: 5px; }
.datepicker .header .next { right: 30px; }
.datepicker .header .closeButton { right: 5px; }

/* body */
.datepicker .body { position: relative; top: 2px; left: 0px; height: 200px; overflow: hidden; }

/* Columns */
.datepicker .body .column { float: left; width: 200px; min-height: 200px; }
.datepicker .body .column.column_1 { margin-left: 0; }
.datepicker .titleText .column { float: left; width: 194px; margin-left: 5px; }
.datepicker .titleText .column.column_1 { margin-left: 0; }

/* Footer */
.datepicker.footer { height: 280px; }
.datepicker .footer { margin-top: 3px; padding: 15px 5px; height: 26px; }

/* time */
.datepicker .time { width: 100%; height: 100%; background: #eee;}
.datepicker .time .hour, .datepicker .time .separator, .datepicker .time .minutes { border: 1px solid #ccc; background: #fff; width: 50px; font-size: 32px; position: absolute; top: 50px; text-align: center; padding: 2px; }
.datepicker .time .hour { left: 30px; }
.datepicker .time .separator { background: transparent; border: 0px; width: 10px; left: 91px; }
.datepicker .time .minutes { left: 110px; }
.datepicker .time .ok { position: absolute; top: 105px; width: 136px; left: 30px; font-size: 20px; }

/* days-grid */
.datepicker .days .day { float: left; background: #ffffff; color: #333333; cursor: pointer; border: 1px solid #888888; border-radius: 2px 2px 2px 2px; text-align: center; width: 24px; overflow: hidden; height: 24px; margin: 0 3px 3px 0; font-size: 11px; line-height: 24px; }
.datepicker .days .day0 { margin-right: 0; }

.datepicker .days .title { background: #333333; font-size: 9px; font-weight: bold; color: #fff; cursor: default; border-color: #000000; }
.datepicker .days .otherMonth { background: #eee; color: #aaa; }

.datepicker .days .week5 .day { margin-bottom: 0; }

/* months */
.datepicker .months .month { float: left; background: #eee; color: #333333; cursor: pointer; border: 1px solid #888888; border-radius: 2px 2px 2px 2px; text-align: center; overflow: hidden; width: 62px; height: 30px; line-height: 30px; margin: 0 4px 4px 0; }
.datepicker .months .month3, .datepicker .months .month6, .datepicker .months .month9, .datepicker .months .month12 { margin-right: 0; }

/* years */
.datepicker .years .year { float: left; background: #eee; color: #333333; border: 1px solid #888888; border-radius: 2px 2px 2px 2px; cursor: pointer; text-align: center; width: 45px; overflow: hidden; height: 25px; line-height: 25px; margin: 0 4px 4px 0; }
.datepicker .years .year3,.datepicker .years .year7,.datepicker .years .year11,.datepicker .years .year15,.datepicker .years .year19 { margin-right: 0; }

/* global
********************************************************/
.datepicker .selected { background: #193253 !important; color: #fff !important; border-color: #000000 !important;}
.datepicker .days .otherMonth.selected { }
.datepicker .unavailable,.datepicker .body .days .week .day.unavailable:hover { background: #fba678 !important; color: #8e3200 !important;  cursor: progress !important;}
.datepicker .days .week .day:hover,.datepicker .months .month:hover,.datepicker .years .year:hover { background: #193253 !important; color: #fff !important; border-color: #000000 !important; }
.datepicker .days.weeknumbers .day { }
.datepicker .days.weeknumbers .day.weeknumber,.datepicker .days.weeknumbers .day.weeknumber:hover { background: #193253 !important; color: #fff !important; border-color: #000000 !important; }
.datepicker table { border-spacing: 0; border-collapse: collapse; border: 0; }
.datepicker th,.datepicker td { padding: 0;}

/* Belegungsübersicht floating */
	
.colspan-6 {
    float: left;
    padding-left: 35px;
    width: 40%;
    padding-bottom: 20px;
    padding-right: 55px;
}