/* Datepicker Calendars */
div.calendar-container {
	overflow: hidden;
	width: 100%;
}

div.calendar-container #datepicker-start {
	width: 45%;
	float: left;
}

div.calendar-container #datepicker-end {
	width: 45%;
	float: right;
}

.reserved-date {background-color: red; opacity:0.5;}
td.reserved-date span {color: red !important; font-weight:bold !important;}
.ui-state-active, .ui-state-highlight {border:1px solid green !important;}

/* Validation Error Styling */
.field-with-errors {
  padding: 2px;  
  display:block;  
}
 
#errorExplanation {  
  border: 2px solid red;
  padding: 7px;  
  background-color: #f0f0f0;
}
 
#errorExplanation h2 {
display:none;
}
 
#errorExplanation p {
  color: #333;
  margin-bottom: 0;
  padding: 0px 5px;
  text-decoration: underline;
}

#errorExplanation ul {
	list-style: decimal;
}
 
#errorExplanation ul li {
  font-size: 12px;
  list-style: decimal;
}

#errorExplanation ul li label.invalid {
  float: none !important;
  line-height: normal !important;
  margin-right: none !important;
  padding-top: none !important;
  font-size: 12px;
  font-weight: normal !important;
  width: 100% !important;
  list-style: decimal;
}

/* -------------------------------------------------------------- 
   
   forms.css
   * Sets up some default styling for forms
   * Gives you classes to enhance your forms
   
   Usage:
   * For text fields, use class .title or .text
   
-------------------------------------------------------------- */

label, #check-in-preview, #check-out-preview, #charge-preview {display: block; float: left; line-height: 1.0em; margin-right: 10px; padding-top: 12px; text-align: left; font-weight: bold; width: 120px;}
fieldset    { padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; width:450px;}
legend      { font-weight: bold; font-size:1.2em; }
 
 
/* Form fields
-------------------------------------------------------------- */

#reservation_submit {float:right; padding-right:40px;}
.field, #check-in-preview, #check-out-preview {clear:both; overflow: hidden !important; margin-bottom: 5px;}
#check-in-preview, #check-out-preview {width:100%; font-weight: normal !important;}
 

input.text, input.title,
textarea, select {
  margin:0.5em 0;
  border:1px solid #bbb;
}

#charge-preview, #amount-preview {margin:0.5em 0;}
#amount-preview, #date-preview {padding: 10px 0 0 0 !important;}

.field-title{
  margin:0.5em 0;
  padding:15px 5px;
}

 
input.text:focus, input.title:focus,
textarea:focus, select:focus {
  border:1px solid #666;
}

#amount-preview, 
#date-preview,
input.text, 
input.title   { width: 300px; padding:5px; }
input.title   { font-size:1.5em; }
textarea      { width: 390px; height: 250px; padding:5px; }