.list ul {
margin: 0;
padding: 0;
}
.submit {
width: 700px;
}

.list li {
display: inline;
padding: 2px;
margin: 2px;
}

#events {
font-size: 0.8em;
border: 1px solid black;
padding: 10px;
margin: 10px;
background: #CAE8FF;
}

.legend {
border: 1px dashed black;
margin: 10px;
padding: 10px;
float: left;
}

.legend span {
font-size: 0.7em;
border: 1px solid black;
margin: 5px;
padding: 5px;
}

.previousButton {float: left;}
.nextButton {float: right;}
.theCalendar {float: left;}
#controls {float: left; margin: 0 10px 0 10px; width: 700px;}

table.calendar {
font-size: 0.8em;
float: left; 
margin: 5px; 
border: 1px solid black;
font-family: sans-serif;
border-collapse: collapse;
}

.calendarHeader {
font-size: 0.9em;
font-weight: bold;
background: black;
color: white;
text-align: center;
}

.calendar td {
text-align: center;
width: 30px;
overflow: hidden;
}

.calendar td a {
display: block;
text-decoration: none;
color: black;
}

.calendar td a:hover {
background: green;
color: black;
}

.calendar td a:visited {
color: black;
}

.instructions {
margin: 5px;
background: yellow;
padding: 5px;
border: 1px solid gray;
}

.problems  {
background: red;
padding: 5px;
border: 1px solid gray;
}

.theCalendar {
border: 1px solid black;
margin: 10px 5px 10px 5px;
padding: 5px;
}

.reasonForProblem {
border: 2px solid red;
padding: 10px;
background: white;
clear: both;
}

.bookingForm {
border: 2px solid green;
padding: 10px;
background: white;
clear: both;
}



a.button  {
border: 3px outset black;
text-decoration: none;
color: black;
padding: 4px;
background: white;
}

a:hover.button {
background: yellow;
border: 3px inset black;
}


/* These are the very important styles which show the different states for the calendar */
.med {background: #87a4ef;}
.low {background: #c5e6ff;}
.peak {background: #3b5597;}

/* booking colors */
.booked {background: red; font-weight: bold;}
.provisional {background: red;}
.changeIn {font-style: italic; background: transparent url('/img/changeIn.png') 0 0 no-repeat}
.changeOut {font-style: italic; background: transparent url('/img/changeOut.png') 0 0 no-repeat}

.crossOver {font-style: italic; background: transparent url('/img/changeInOut.png') 0 0 no-repeat}

.start {background: green; border-left: 1px solid black; border-top: 1px solid black; border-bottom: 1px solid black;}
.end {background: green;  background-image: none;  border-right: 1px solid black; border-top: 1px solid black; border-bottom: 1px solid black}
.interim {background: green;  background-image: none;   border-top: 1px solid black; border-bottom: 1px solid black;}

.grayedout {
color: #B0B0B0;
}


#booking-form {
text-align: left;
margin-top: 10px;
border: 1px solid black;
padding: 10px;
background: #ffff99;
}

#booking-form label{
font-weight: bold;
vertical-align: top;
}

#booking-form h3 {
padding: 0;
margin: 0;
}

#booking-form ul, #booking-form li {
margin: 0; padding: 0;
list-style: none;
}

#booking-form li {
margin: 0 0 5px 0; 
}


#page {
width: 750px;
padding: 10px;
}
.error {
color: red;
font-weight: bold;
padding-left: 10px;
font-size: 0.9em;
}