@CHARSET "ISO-8859-1";

body {margin:10px; padding:0;}

/** The container for the box that holds the day's view */
.dayview {width:390px; padding:5px;display:block;clear:both;}
.oneday {width:390px; padding:5px; display:block; text-align: center;}


/** bookable defines the width and padding for a time period of availability*/
.oneday   .bookable{ float:left; width:92px; margin:1px; }
.onemonth .bookable{ float:left; width:55px; margin:1px; }

/** The seven days flat view is a single column */
.sevendaysflat .oneday {width:330px; margin:0 auto; padding:5px;float:none; text-align:left;}
.sevendaysflat .oneday .date {font-size: 0.8em; font-weight: bold;  text-align: center; }
.sevendaysflat .oneday .bookable{float:none; width:300px; display:block; margin:5px auto;}

.sevendaysflat .bookable .time {text-align: center; float:left;}
.sevendaysflat .bookable .available .status {text-align: center; display:inline; float:right;}

/** The available and not available styles should define the colours for those boxes */
.bookable .available    {background-color:#99ccdd; color:#222222; padding:3px 5px; font-weight: bold;}
.bookable .notavailable {background-color:#cccccc; color:#999999; padding:3px 5px;}


/** Then how do each of the pieces get displayed? */
.bookable {text-align: center;}

/** These can be tweaked, if necessary */
.onemonth .bookable .available {font-weight:normal;}
.onemonth .bookable .time {display:none;}
.onemonth .bookable .price {display:none;}

/** These can be tweaked, if necessary */
.oneday .bookable .date {display:none;}
.oneday .bookable .price {display:none;}

h3 {margin-top:25px;}

.button {background-color:#99ccdd;}