/* Default text sizes */
* {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	color: black;
}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1em; }

/* Anchors */
a			{ color: blue; font-size: inherit; }
a:hover		{ text-decoration: underline; }
a:visited	{ color: purple; }


/* Body: grey background */
body {
	margin-top: 1%;
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 10%;
	background: #EEE;
	color: black
}

/* Inside body */
#wrapper {
	margin: 0px;
	border: solid black 1px;
	padding: 0px;
	background: white;
}

#header {
	border-bottom: solid black 1px;
}

#sidebar-and-body {
	display: table;
	width: 100%;
	margin: 0px;
	border: none;
	padding: 0px;
}

#test-area {
	background: darkred;
	color: yellow;
	text-align: center;
	font-size: 75%;
	font-weight: bold;
	padding-top: 2px;
	padding-bottom: 2px
}

#sidebar-area {
	display: none;
	border-right: solid black 1px;
}

#body-area {
	display: table-cell;
	padding: 0px 5px 10px 5px;
	vertical-align: top;
	background: white;
}

#footer {
	clear: both;
}


/* Strict rendering mode seems to display some images with a 3 pixel bottom
margin when it's the last element in a DIV, so we force class="border" to sit
on the bottom of its containing box */
img.border {
	position: relative;
	bottom: -3px;
	width: 100%;
}

/* Generic boxed area */
div.boxed {
	margin: 5px;
	border: solid #999 1px;
	padding: 5px;
	background: white;
}

/* Warning box (yellow background, red border */
div.warning {
	text-align: center;
	background: yellow;
	margin: 2px;
	border: solid red 1px;
	padding: 2px;
}

/* Maps get a box around them */
img.map {
	border: solid black 1px;
}

/* Text styles */
td.prompt-right {
	font-weight: bold;
	text-align: right;
	padding-right: 10px;
}

.title {
	font-size: 150%;
	font-weight: bold;
}

.required {
	font-weight: bold;
	color: red;
}

input.total-cost { text-align: right; }

/* Tables: Give headers an orange background */
th			{ background: orange; }

/* Table odd and even rows */
td.odd-row	{ background: #DDD; padding-left: 2px; padding-right: 2px; }
td.even-row	{ background: #BBB; padding-left: 2px; padding-right: 2px; }


/* Styles for the information table presented at the top of each page */
td.top_info_name {
	color: green;
	font-style: italic;
	padding-right: 5px;
}
td.top_info_value {
}
	td.top_info_link {
	text-align: right;
}

/* Styles for the HHW facility Select Appointment Time table */
td.date			{ background: orange; }
td.morning		{ background: lightyellow; font-weight: bold; text-align: center }
td.afternoon	{ background: lightyellow; font-weight: bold; text-align: center; }
td.open			{ background: lightgreen; text-align: right; }
  .available	{ background: lightgreen; font-weight: bold; text-align: right; }
  .booked		{ background: pink; text-align: right; }
  .this_appt	{ background: yellow; font-weight: bold; text-align: right; }
  .unavailable	{ background: lightgrey; text-align: right; }
td.closed		{ background: lightgrey; text-align: center; }

/* For a booked appointment time, pink is all right as a background colour on
the 'Select Facility' page, but it's pretty ugly on the Admin 'Appointments
List' page */
table#appointments-list td.booked { background: aqua; }


/* Styles for the Materials table. Note that the table is set up as <table
class="materials"> and not <table id="materials">, since the table can occur
more than once on the Admin/Show Appointments page */

table.materials { margin-left: 10px; }
table.materials td.material-name 	{ font-weight: bold; }
table.materials td.bringing			{ text-align: center; }
table.materials td.quantity			{ text-align: center; }
table.materials td.total-cost 		{ text-align: right; font-weight: bold; }

table.materials td.group {
	background: lightyellow;
	font-weight: bold;
	text-align: center;
}


.facility-info-text{}

/* f-select-facility-text come from facilities.f_select_facility_text and
appears only on the SelectFacility page */
div.f-select-facility-text {
	display: block;
}

/* f-select-materials-text comes from facilities.f_select_materials_text and
appears in the following places: SelectMaterials and ThankYou pages, and the
email sent to the customer */
div.f-select-materials-text {
	display: block;
}

/* Area that isn't displayed on-screen but is printed */
.for-print {
	display: none;
}