body {
  background-image: url(/images/bluegradient.gif);
  background-repeat: repeat-y;
  background-color: #000F40;
}

#side-image {
    position: absolute;
    bottom: 100px;
    left: 0px;
    z-index: 0;
}

#trim-area {
    background-color: #D0CBE0;
    position: absolute;
    top: 20px;
    left: 180px;
    width: 690px;
}

#landing-area {
    font-family: arial, sans-serif;
    background-color: white;
    border: 2px solid black;
    margin-top: 10px;
    margin-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
}

#border-area {
    background-color: white;
    width: 650px;
    padding-bottom: 10px;
    opacity: 1.0;
    margin: 20px;
}

#intro-area {
    color: #355CF7;
    font-family: verdana, arial, sans-serif;
    border-bottom: 1px dotted gray;
}

#intro-area .title {
    color: #355CF7;
    font-size: 28px;
    padding-top: 4px;
    padding-bottom: 10px;
    height: 20px;
    position: relative;
    left: 30px;
}

#intro-area .subtitle {
    color: #355CF7;
    font-size: 22px;
    padding-top: 4px;
    padding-bottom: 10px;
    height: 20px;
    text-align: center;
}

#intro-area .slogan {
    font-family: times, serif;
    font-style: italic;
}

#intro-area .phone {
    font-size: 14px;
    padding-top: 5px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 20px;
}

#intro-area .phone img {
    float: left;
    margin: 0px;
    padding-left: 175px;
    padding-top: 4px;
    padding-right: 5px;
}

#intro-area .phone p {
    margin: 5px;
    padding-top: 7px;
}

#intro-area img {
    padding-left: 50px;
    padding-top: 15px;
    margin-top: 0px;
}

#content-area {
  font-family: verdana, arial, sans-serif;
  font-size: 12px;
  color: black;
  background-color: white;
  width: 600px;
  margin-left: 25px;
  height: 90%;
}

.header {
  font-size: 14px;
  font-weight: bold;
  color: #355CF7;
}

.search h3 {
    text-align: center;
    color: #355CF7;
    font-family: times, serif;
    font-size: 24px;
    font-style: italic;
    margin-top: 5px;
}

.search .directions {
    font-weight: bold;
}

.establishment {
    padding: 5px;
}

.establishment .main-photo {
    float: left;
    margin-right: 10px;
    padding: 0px;
}

.establishment .main-photo img {
}

.establishment .main-photo .caption {
    margin-bottom: 5px;
    text-align: center;
}

.establishment .search-photo {
    float: left;
    margin-right: 10px;
    padding: 0px;
}

.establishment .search-photo img {
    border: 1px solid black;
}

.room {
    margin-top: 30px;
    width: 450px;
    margin-left: 70px;
    padding-bottom: 25px;
}

.room-name {
  margin-bottom: 4px;
  color: white;
  background-color: #355CF7;
  font-weight: bold;
  padding: 0.5em;
  width: 450px;
}

.room-name-brief {
  margin-left: 155px;
  margin-right: -5px;	
  margin-bottom: 4px;
  color: white;
  background-color: #355CF7;
  font-weight: bold;
  padding: 0.5em;
}

.room-info {
    margin-right: 0px;
    padding-right: 0px;
    width: 450px;
}

.room-info-brief {
    margin-left: 170px;
    padding-right: 0px;
}

.room-stats {
    margin-top: 0px;
    line-height: 2em;
    margin-bottom: 0px;
}

.room-info .room-calendar {
    width: 450px;
    position: relative;
    bottom: 50px;
}

.room-info .vacancy-legend {
    position: relative;
    left: 25px;
}

.establishment .vacancy-calendars {
}


.vacancy-calendars .left-icon {
    margin: 0px;
    padding: 0px;
    height: 28px;
    width: 40px;
    background-color: transparent;
}


.vacancy-calendars .right-icon {
    margin: 0px;
    padding: 0px;
    height: 28px;
    width: 40px;
    background-color: transparent;
}


.book-this-room {
    position: relative;
    left: 60px;
}

.availability-calendar .monthName {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}

.availability-calendar tbody td {
    width: 30px;
    height: 25px;
    vertical-align: center;
    text-align: center;
    font-size: 14px;
}

.availability-calendar tbody td a:link {
    color: black;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 7px;
    padding-right: 7px;
}

.availability-calendar tbody td a:visited {
    color: black;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 7px;
    padding-right: 7px;
}

.availability-calendar tbody td a:active {
    color: black;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 7px;
    padding-right: 7px;
}

.availability-calendar tbody td a:hover {
    color: black;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 7px;
    padding-right: 7px;
}

.availability-calendar tbody th {
    width: 30px;
    height: 25px;
}

.calendar {
    background-color: white;
    border: 1px solid #EDEADC;
}

.availability-calendar .vacant {
    color: gray;
    background-color: #D2F2CE;
    border: 1px solid #EDEADC;
}

.availability-calendar .shared {
    color: gray;
    background-color: #FEEA9B;
    border: 1px solid #EDEADC;
}

.availability-calendar .filled {
    color: gray;
    background-color: #EEB9BB;
    border: 1px solid #EDEADC;
}

.availability-calendar .unavailable {
    color: #515151;
    background-color: #CFCFCF;
    border: 1px solid #EDEADC;
}

.availability-calendar .desired_vacant {
    background-color: #66FF66;
    border-bottom: 2px solid black;
}

.availability-calendar .desired_shared {
    background-color: #FED94E;
    border-bottom: 2px solid black;
}

.availability-calendar .desired_filled {
    background-color: #D65155;
    border-bottom: 2px solid black;
}

.availability-calendar .selected_vacant {
    background-image: url(/images/circled.gif);
    background-repeat: no-repeat;
    background-color: white;
    font-weight: bold;
}

.availability-calendar .selected_filled {
    background-image: url(/images/circled.gif);
    background-repeat: no-repeat;
    background-color: #D65155;
    font-weight: bold;
}

.availability-calendar .color1 {
    color: gray;
    background-color: yellow;
    border: 1px solid #EDEADC;
}

.availability-calendar .color2 {
    color: gray;
    background-color: blue;
    border: 1px solid #EDEADC;
}

.availability-calendar .color3 {
    color: gray;
    background-color: green;
    border: 1px solid #EDEADC;
}

.availability-calendar .color4 {
    color: gray;
    background-color: red;
    border: 1px solid #EDEADC;
}

.caption {
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
}

.vacancy {
    background-color: #66FF66;
    border: 1px solid black;
    width: 50px;
    height: 10px;
    margin-right: 5px;
    line-height: 20px;
}

.shared-vacancy {
    background-color: #FED94E;
    border: 1px solid black;
    width: 50px;
    height: 10px;
    margin-right: 5px;
    line-height: 20px;
}

.no-vacancy {
    background-color: #D65155;
    border: 1px solid black;
    width: 50px;
    height: 10px;
    margin-right: 5px;
    line-height: 20px;
}

.not-available {
    background-color: #CFCFCF;
    border: 1px solid black;
    width: 50px;
    height: 10px;
    margin-right: 5px;
    line-height: 20px;
}

.color1 {
    background-color: yellow;
    border: 1px solid black;
    width: 50px;
    height: 10px;
    margin-right: 5px;
}

.color2 {
    background-color: blue;
    border: 1px solid black;
    width: 50px;
    height: 10px;
    margin-right: 5px;
}

.color3 {
    background-color: green;
    border: 1px solid black;
    width: 50px;
    height: 10px;
    margin-right: 5px;
}

.color4 {
    background-color: red;
    border: 1px solid black;
    width: 50px;
    height: 10px;
    margin-right: 5px;
}

.night-table {
    background-color: white;
    border: 1px solid black;
    width: 540px;
    margin-bottom: 20px;
}

.even {
    background-color: #DFF0F7;
}

.odd {
    background-color: #FFFFFF;
}

.blank-row {
    height: 20px;
}

.reserve-brief {
/*    border-bottom: 1px solid black;
    padding-bottom: 10px;
*/}

.reserve-brief .photo {
    height: 110px;
    width: 150px;
    padding: 0px;
    float: right;
}

.reserve-brief .info {
    height: 115px;
}

.reserve-brief .info .name {
    color: #355CF7;
    margin-bottom: 15px;
}

.reserve-brief .nightly-rates {
    margin-top: 15px;
}

.reserve-brief .nightly-rates table {
    width: 540px;
}

.reserve-brief .nightly-rates .totals table {
    width: normal;
}

.reserve-brief .rates table {
    width: 540px;
}

.accommodation-title {
    color: #355CF7;
}

.standalone {
    width: 540px;
}

.add-accommodation {
    text-align: right;
}

.totals {
    width: 540px;
    text-align: right;
    margin-top: 10px;
    margin-bottom: 20px;
}

.add-on-night {
	color: gray;
}

.rates-brief {
	margin-top: 30px;
}

.fineprint {
    clear: both;
    text-align: center;
    font-size: 12px;
    color: white;
    font-family: verdana, arial, sans-serif;
    margin-top: 20px;
}

.invoice {
    color: black;
    background-color: white;
    border: 1px solid black;
    padding: 5px;
    width: 525px;
}

.invoice .header {
    text-align: center;
    font-weight: bold;
}

.invoice .header .title {
    color: black;
    font-size: 24px;
}

.invoice .customer-info {
    margin-top: 20px;
    text-align: left;
    margin-bottom: 20px;
}

.invoice .stay-info {
    border-top: 1px solid gray;
    padding-bottom: 10px;
}

.invoice .stay-info .name {
    margin-top: 30px;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.invoice .stay-info .summary {
    margin-bottom: 20px;
}

.invoice .stay-info .nightly-rates table {
    width: 525px;
}

.invoice .stay-info .cost {
    margin-top: 10px;
    text-align: right;
}

.invoice .stay-info .cost .total {
    margin-top: 10px;
}

.invoice .stay-info .stay-line-items table {
    margin-top: 20px;
    width: 525px;
}

.invoice .final-cost {
    border-top: 1px solid gray;
    padding-top: 30px;
    margin-bottom: 30px;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
}

.invoice .cancellation-date {
    font-size: 14px;
    margin: 15px;
}

.invoice .empty-reservation-notice {
    color: black;
    font-size: 24px;
}

#reservation-summary {
    color: #355CF7;
    font-family: verdana, arial, sans-serif;
    font-size: 10px;
    width: 200px;
    padding-top: 20px;
    padding-bottom: 15px;
}

#reservation-summary .header {
    font-size: 18px;
    color: #355CF7;
    text-align: center;
}

#reservation-summary .stay-info .name {
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 5px;
    padding-left: 5px;
}

#reservation-summary .field {
    font-weight: bold;
}

#reservation-summary .stay-info table {
    padding-left: 5px;
    margin-left: 0px;
    margin-top: 5px;
    width: 190px;
}

#reservation-summary .cost {
    padding-top: 3px;
    padding-right: 10px;
    text-align: right;
}

#reservation-summary .summary-buttons {
    margin-left: 30px;
}

.contact-us {
}

.contact-us .name {
    margin-top: 50px;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.contact-us .phone {
   font-size: 16px;
   margin-bottom: 10px;
   margin-left: 40px;
}

.contact-us .info {
    font-size: 14px;
    margin-left: 40px;
}

.login .box {
    font-size: 16px;
    border: 1px solid gray;
    padding: 20px;
    margin-bottom: 30px;
}

.login .instructions {
    margin-top: 30px;
    font-size: 18px;
    margin-bottom: 20px;
    text-align: center;
}

#flash {
    color: red;
    text-align: center;
    font-size: 14px;
}

.fieldWithErrors {
  border-bottom: 4px solid red;
  display: inline;
}

#errorExplanation {
  width: 400px;
  border: 4px solid red;
  padding: 7px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

#errorExplanation h2 {
  display: none;
}

#errorExplanation p {
  color: #333;
  margin-bottom: 0;
  padding: 5px;
}

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

form {
    line-height: 2em;
}

.gradient-button {
    background-image: url(/images/winthropblues/button-gradient.gif);
    background-repeat: repeat-x;
    background-color: #000F40;
    color: white;
    border-top: none;
    border: 1px solid black;
    height: 25px;
    padding-bottom: 2px;
}

.back-to-availability {
    background-image: url(/images/back-to-availability.gif);
    background-repeat: no-repeat;
    background-color: white;
    border: none;
    height: 35px;
    width: 205px;
}

.add-to-itinerary {
    background-image: url(/images/add-to-itinerary.gif);
    background-repeat: no-repeat;
    background-color: white;
    border: none;
    height: 35px;
    width: 205px;
}

.add-another-hut{
    border: none;
    height: 35px;
    width: 205px;
}

.review-reservation {
    background-image: url(/images/review-reservation.gif);
    background-repeat: no-repeat;
    background-color: white;
    border: none;
    height: 35px;
    width: 205px;
}

.submit-reservation {
    background-image: url(/images/submit-reservation.gif);
    background-repeat: no-repeat;
    background-color: white;
    border: none;
    height: 35px;
    width: 205px;
}


.ice-link {
    background-image: url(/images/button-background.gif);
    background-repeat: repeat-x;
    background-color: white;
    border: 1px solid gray;
    height: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    cursor: pointer;
}

.ice-link:link {
    color: black;
    text-decoration: none;
}

.ice-link:active {
    color: black;
    text-decoration: none;
}

.ice-link:visited {
    color: black;
    text-decoration: none;
    position: relative;
}

.ice-link:hover {
    color: black;
    text-decoration: none;
}

.availability-matrix {
    width: 530px;
}

.availability-matrix .directions {
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    margin-bottom: 10px;
}

.availability-matrix .legend {
    text-align: right;
    margin-bottom: 20px;
}

.availability-matrix .legend .label {
    margin-left: 5px;
    margin-right: 20px;
}

.availability-matrix-season {
    text-align: right;
    margin-top: 0px;
    margin-bottom: 10px;
    position: relative;
    right: 150px;
}

.availability-matrix-rooms {
    float: left;
    text-align: right;
    padding-top: 19px;
}

.availability-matrix-rooms .name {
    font-size: 14px;
    height: 41px;
}

.matrix-scrollarea {
    overflow: auto;
    float: right;
    width: 400px;
    text-align: right;
}

.availability-matrix td {
    height: 40px;
    width: 45px;
}

.availability-matrix .vacant {
    color: gray;
    background-color: #92F57F;
    border: 1px solid #EDEADC;
}

.availability-matrix .shared {
    color: gray;
    background-color: #ECDA0F;
    border: 1px solid #EDEADC;
}

.availability-matrix .filled {
    color: gray;
    background-color: #FBB8BB;
    border: 1px solid #EDEADC;
}

.availability-matrix .unavailable {
    color: #515151;
    background-color: #CFCFCF;
    border: 1px solid #EDEADC;
}

.availability-matrix .desired_vacant {
    background-color: #AAF3A1;
    border-bottom: 2px solid black;
}

.availability-matrix .desired_shared {
    background-color: #FED94E;
    border-bottom: 2px solid black;
}

.availability-matrix .desired_filled {
    background-color: #FBB8BB;
    border-bottom: 2px solid black;
}

.availability-matrix .selected_vacant {
    background-image: url(/images/circled.gif);
    background-position: 6px 5px;
    background-repeat: no-repeat;
    background-color: #92F57F;
    border: 1px solid #EDEADC;
}

.availability-matrix .selected_filled {
    background-image: url(/images/circled.gif);
    background-position: 6px 5px;
    background-repeat: no-repeat;
    background-color: #FBB8BB;
    border: 1px solid #EDEADC;
}

.availability-matrix .selected_shared {
    background-image: url(/images/circled.gif);
    background-position: 5px 5px;
    background-repeat: no-repeat;
    background-color: #ECDA0F;
    border: 1px solid #EDEADC;
}

.availability-matrix .day {
    font-size: 10px;
    color: black;
}

.availability-matrix .saturday {
    font-size: 10px;
    color: blue;
    font-weight: bold;
}

.availability-matrix .cell-contents {
    line-height: 10px;
    color: black;
    width: 35px;
}

.spacer {
    height: 20px;
    clear: both;
}

.booking-error {
    color: red;
    padding-left: 10px;
}

.edit-box {
    margin-top: 20px;
    border: 1px solid gray;
    padding: 10px;
    width: 545px;
}