a {
	color: #004899;
	text-decoration: none;
}

body {
	font: normal 75% Verdana, Verdana, Geneva, sans-serif;
	font-family: Verdana, Verdana, Geneva, sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	/* setting left and right margins to auto means the whole page
	will be centred, but only if we set the width which we do 
	dynamically
	*/
	margin-left: auto;
	margin-right: auto;
	/* min-width: 966px; */
}

/* ---------------------- */

.clear {
	clear:both;
}

/* ---------------------- */

/* used on all thumbnails */
.photo-link {
	padding:5px;
	margin:5px;
	border:1px solid #ccc;
	display:block;
	width:460px;
	float:left;
	/* background: #aaa;	/* debug */
}

.photo-link:hover {
	/* Reduce margin, increase border size and change border colour */
	margin:4px;
	border:2px solid #888;
}

.photo-link_title {
	padding:5px;
	margin:5px;
	margin-top:-10px;
	margin-bottom:12px;
	display:block;
	width:460px;
	float:left;
	text-align: center;
	/* background: #ddd;	/* debug */
}

/* ---------------------- */

/* initial comment under thumbnail on calendar page */
.initial_comment {
	/* float: left; DO NOT USE THIS UNLESS YOU WANT TO SPEND ANOTHER DAY TRYING TO GET IT TO LOOK CORRECT ON THE iPHONE */
	margin:5px;
	padding: 10px;
	width: 450px;
	/* background: #bbb;	/* debug */
	}

/* optional live link on calendar page */
.live_url_link {
	/*float: left; DO NOT USE THIS UNLESS YOU WANT TO SPEND ANOTHER DAY TRYING TO GET IT TO LOOK CORRECT ON THE iPHONE */
	margin:5px;
	margin-top: 10px;
	padding: 10px;
	text-align: center;
	width: 450px;
	/* background: #aaa;	/* debug */
	}

/* ---------------------- */
/* Live View Page */

.live_box {
	float: left;
	padding:5px;
	border:1px solid #ccc;
	margin-left:5px;
	display:block;
	/* correct the aspect ratio by constraining the height */
	width: 720px;
	height: 405px;
	}

.live_button_bar_table {
	margin-top: 8px;
	margin-left: 5px;
	padding-left: 5px;
	padding-top: 4px;
	padding-bottom: 4px;
	width: 730px;	/* same as live_box */
	table-layout: fixed;	/* not the default !! */
	text-align: center;
	/*background: #ccc;	/* debug */
	}

.live_button_heading {
	font: normal 90% Verdana, Verdana, Geneva, sans-serif;
	padding: 0px;
	padding-bottom: 8px;
	text-align: center;
	/* border:1px solid #ddd;	/* debug */
	/*background: #bbb;		/* debug */
	}

.live_button {
	font: normal 100% Verdana, Verdana, Geneva, sans-serif;
	border:2px solid #aaa;
	border-radius: 9px;
	margin: 2px;
	padding: 6px;
	text-align: center;
	color: #444;			/* Text colour */
	background: #ddd;
	}

.live_button_bar_footer {
	font: normal 75% Verdana, Verdana, Geneva, sans-serif;
	margin-top: 18px;
	text-align: center;
	/*background: #888;	/* debug */
	}

.live_stardot_box {
	float: left;
	padding:5px;
	border:1px solid #ccc;
	margin-left:5px;
	display:block;
	width: 640px;
	height: 480px;
	}

/* ---------------------- */
/* Large image styles */

.image {
	position: absolute;
	left: 0px;
	top: 0px;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	}

.image_buttons_pane {
	position: fixed;
	left: -400px;
	top: 24px;
	width: 68px;
	height: auto;
	background: #023;
	opacity: 0.75;
	}

.image_button {
	float: left;
	font: normal 75% Verdana, Verdana, Geneva, sans-serif;
	border:2px solid #fff;
	margin: 3px;
	padding: 4px;
	width:50px;
	text-align: center;
	color: #ffffff;
	/* opacity: 1.75; */
	}

.image_time {
	float: left;
	font: normal 75% Verdana, Verdana, Geneva, sans-serif;
	margin-left: 8px;
	padding: 1px;
	padding-top: 2px;
	width:50px;
	text-align: center;
	color: #ffffff;
	/* opacity: 1.75; */
	}

/* ---------------------- */

/* comment at top of thumbnail gallery page */
.gallery_day_comment {
	margin:  5px;
	width:	934px;		/* this was 834 */
	text-align: center;
	padding: 10px;
	/* background: #bbb;	/* debug */
	}

/* bar at top and bottom of thumbnail gallery page which hosts gallery buttons */
.gallery_button_bar {
	margin:  5px;
	width:	934px;
	text-align: center;
	padding: 10px;
	padding-top: 20px;
	padding-bottom: 20px;
	/* background: #ddd;	/* debug */
	}

/* buttons at the top and bottom of the thumbnail page */
.gallery_button {
	font: normal 100% Verdana, Verdana, Geneva, sans-serif;
	border:2px solid #aaa;
	margin: 6px;
	padding: 6px;
	width:auto;
	text-align: center;
	color: #444;			/* Text colour */
	background: #eee;
	}

/* Best not to use this. The iPad and iPhone will leave the button
 * highlighted after you click it, which would be fine for the next and
 * previous day buttons, and the 'back to calendar' button, but we don't
 * want it on the 'reverse order' button
 */
.gallery_button_DISABLED:hover {
	/* Reduce margin, increase border size and change border colour */
	margin:5px;
	border:3px solid #888;
}

/* ---------------------- */
/* Calendar classes */

.calendar_nav {
	/* float: left; DO NOT USE THIS UNLESS YOU WANT TO SPEND ANOTHER DAY TRYING TO GET IT TO LOOK CORRECT ON THE iPHONE */
	margin: 5px;
	margin-top: 10px;
	padding: 10px;
	width: 450px;
	/*background: #888;	/* debug */
}

.calendar {
	border: thin solid #000000;
	margin-left: 72px;
	width: 304px;
	text-align: center;
}

/* month(s) bar on calendar */
.calendar_title {
	font-size: 80%;
	background-color: #000000;
	color: #FFFFFF;
	line-height: 160%;
	vertical-align: bottom;
}

.calendar td {
	margin: 0px;
	padding: 0px;
	background-color: #F2F2F2;
	/* background-color: #aaa;		/* debug */
}

.calendar_day_link {
	margin: 0px;
	padding: 1px;
	/* border:1px solid #aaa; */
	font-size: 75%;
	text-align: center;
	background-color: #F2F2F2;
}

.calendar_day_link:hover {
	background-color: #eee;
}

/* day headings on calendar */
.calendar_days {
	font-size: 75%;
	line-height: 120%;
	width: 42px;
	vertical-align: bottom;
}

/* ---------------------- */