body {
	margin: 0;
	padding: 0;
	border: 0;			/* This removes the border around the viewport in old versions of IE */
	width: 100%;
	background-color: #fff;
	min-width: 600px;		/* Minimum width of layout - remove line if not required */
					/* The min-width property does not work in old versions of Internet Explorer */
	font-size: 0.8em;
	font-family: Verdana, Arial, San Serif;
}

a {
	color:#336699;
}

a img {
	border: 0;
}

/* --- [?] help links --- */

a.help {
	text-decoration: none;
}

a.imglink {
	background: none;
	margin: 0;
	padding: 0;
}

a.imglink:hover,
#footer a.imglink:hover {
	background: none;
}

a:hover {
	color: #fff;
	background-color: #336699;
	text-decoration: none;

}

/* --- stop anchors within page from having hover effects --- */

a.anchor[name]:hover {
	background-color: #fff;
	color: #336699;
}

/* --- styles for all centre column h1 --- */

div.col1 h1 {
	color: #fff;
	text-align: center;
	padding: 10px;
	margin-bottom: 0;
}

/* --- pop up help boxes --- */

#helpbox {
	position:absolute;
	top: 0;
	background-color: lightyellow;
	width: 150px; /*Default width of hint.*/ 
	padding: 3px;
	border:1px solid black;
	line-height:18px;
	z-index:100;
	border-right: 3px solid black;
	border-bottom: 3px solid black;
	visibility: hidden;
	font-size: 0.85em;
	z-index: 9999;
}

/* --- eventsummary - single accident map --- */

div#accidentmap {
	width: 100%;
	height: 300px;
	margin: 0;
	padding: 0;
}

/* --- accident summary column --- */

div#accidentsummary {
	border: 1px solid #00809A;
	float: left;
	width: 40%;
	text-align: center;
	padding: 5px 2% 10px 2%;
	margin: 5px 0 30px 0;
}

/* --- crumbtrail box--- */

div#crumbtrail {
	font-size: 0.8em;
	font-weight: bold;
	color: #666;
}

/* --- document summary column --- */

div#docsummary {
	border: 1px solid #00809A;
	float: left;
	width: 40%;
	text-align: center;
	padding: 5px 2% 10px 2%;
	margin: 5px 4% 5px 0;
}

/* --- document timeline column --- */

div#doctimeline {
	border: 1px solid #990033;
	float: right;
	width: 40%;
	text-align: center;
	padding: 5px 2% 10px 2%;
	margin: 5px 4% 5px 0;
}

/* --- listing filters - hide by default --- */

div#filters {
	display: none;
}

/* --- eventimages - gallery image container --- */

div#gallery {
	border: 1px solid #00809A;
	padding: 20px 2%;
	clear: both;
}

div#gallery img {
	margin:5px 2%; 
	padding: 0;
	vertical-align: top;
	border: 1px solid #000;
}

/* --- eventedit - gallery image container --- */

div#editgallery {
	border: 1px solid #00809A;
	padding: 20px 2%;
	vertical-align: top;
	margin: 10px 0;
	clear: both;
}

div#editgallery a, div#editgallery img {
	margin: 5px 5% 5px 0;
	padding: 0;
}

div#googlemap,
div#OSmap {
	width: 99%;
	height: 400px;
	margin: 0;
	padding: 0;
	border: 1px solid black;
	z-index: 1;
}

div#mapwrapper {
	width: 50%;
	margin-left: 50%;
	padding: 5px 0;
	margin-right: 0;
	margin-top: 5px;
	text-align: center;
}

div#OSmap img {
	margin: 0;
}

/* --- compliment quote boxes --- */

div.complimentbox {
	width: 48%;
	padding: 0;
	margin: 0;
}

div.compliment {
	border: 1px solid #00809A;
	width: 86%;
	text-align: center;
	padding: 5px 4%;
	margin: 15px 3%;
	font-style: italic;
}

/* --- event images --- */

div.eventimage {
	padding: 5px 4%;
	
}

/* --- index - div containing photo and copyright statement --- */

div.floatright {
	text-align: center;
	margin-left: 2%;
}

/* --- floated form elements --- */

div.form {
	margin-right: 2%;
}

/* --- library maps --- */

div.librarymap {
	float: left;
	margin: 5px 4% 5px 0;
	border: 1px solid black;
}

/* --- updates.php - box containing individual document --- */

div.updatebox {
	margin: 0;
	padding: 0;
	width: 99%;
}

form input,
form select {
	margin-bottom: 10px;
}

h1, h2, h3 {
	font-family: Arial, Verdana, San Serif;
	margin: .8em 0 .2em 0;
	padding: 0;
}

h1 {
	font-size: 1.4em;
}

/* --- float rss and PDF links inside h1s and h2s --- */

h1 a {
	float: right;
	margin-left: 2%;
}

/* --- header for accident alerts --- */

h1#accident,
h2#moreaccidents {
	background-color: #990033;
}

h1#featured {
	background-color: #990033;
	color: #fff;
	margin-top: 0;
}

/* --- header for latest documents and general titles --- */

h1#latestdocs,
h2#moredocs,
h1#centretitle {
	background-color: #00809a;
}

/* --- header for accident lists --- */

h1#accidentlist {
	background-color: #990033;
}

/* --- general title header --- */

h1#centretitle {
	margin-bottom: 20px;
}

/* --- general title image links --- */

h1#centretitle a.imglink {
	margin-right: 5px;
}

/* --- document title header --- */

h1#doctitle {
	background-color: #00809a;
	padding-left: 0;
	margin-bottom: 20px;
	text-align: left;
}

/* --- site news title header --- */

h1#sitenewstitle {
	padding-left: 2%;
	margin-bottom: 20px;
	text-align: left;
}

/* --- accident title header --- */

h1#accidenttitle {
	background-color: #990033;
	margin-bottom: 20px;
	text-align: center;
}

/* --- error title header --- */

h1#error {
	margin-bottom: 20px;
	background-color: #cc0000;	
}

/* --- header for accident alerts --- */

h1#sitenews,
h1#sitenewstitle,
h2#sitenews {
	background-color: #cc6666;
}

/* --- h2s --- */

h2 {
	font-size: 1.2em;
	color: #00809a;
}

/* --- remove underline from h2 links --- */

h2 a {
	text-decoration: none;
}


/* --- styles for all centre column h2 --- */

h2.more {
	color: #fff;
	text-align: right;
	margin-left: 50%;
	padding: 10px;
	margin-top: 0;
	margin-bottom: 50px;
}

/* --- updates.php - change dates --- */

h2.additiondate {
	width: 18%;
}

h3,
label {
	font-size: 1em;
	color: #666633;
	font-weight: bold;
}

/* --- horizontal rules --- */

hr {
	color: #666633;
	background-color: #666633;
	height: 1px;
	margin-top: 2%;
	margin-bottom: 2%;
	border: 0px solid #666633;
}

/* --- horizontal rule for end of tables --- */

hr.table {
	color: #cccc99;
	background-color: #cccc99;
	height: 1px;
	margin-top: 2%;
	margin-bottom: 2%;
	border: 0px solid #cccc99;
}

/* --- horizontal rule for blue items --- */

hr.blue {
	color: #00809A;
	background-color: #00809A;
	height: 1px;
	margin-top: 2%;
	margin-bottom: 2%;
	border: 0px solid #00809A;
}

img {
	margin: 10px 0 5px;
}

/* --- images - make inline with text --- */

img.inline {
	float: right;
	margin-right: 2px;
}

/* --- images for keys --- */

img.key {
	margin-right: 5px;
	float: left;
}

/* --- images with border --- */

img.border {
	border: 1px solid #000;
}


/* --- doclisting.inc - sort images in table header --- */

img.sort {
	margin: 0;
	padding: 0;
}

input {
	margin-bottom: 10px;
}

/* --- left.inc - donate image --- */

input.donate {
	float: right;
	margin: 0 0 3px 10%;
}

/* --- newsupdate.php - make buttons inline --- */

input.inline {
	float: right;
	margin-left: 2%;
}

p {
	margin: .4em 0 .8em 0;
	padding: 0;
}

/* --- italics for "added" paras --- */

p.added {
	font-style: italic;
}

/* --- error message --- */

p.error,
span.error {
	color: #cc0000;
	font-weight: bold;
}

/* --- small text paras --- */

p.small,
span.small,
ol.small {
	font-size: 0.8em;
}

/* --- updates.php - float pdf links within paras --- */

p.updates {
	float: right;
	width: 90%;
}

/* --- strike-out text --- */

span.strikeout {
	text-decoration: line-through;
}

/* --- table --- */

table {
	font-size: 1em;
	border-collapse: collapse;
	width: 100%;
	margin: 10px 0;
}

textarea {
	width: 95%;
}

/* --- table headers --- */

th {
	background-color: #666633;
	vertical-align: middle;
	text-align: center;
	padding: 5px 2%;
	color: #fff;
	margin: 5px 0;
}

th.dockey {
	width: 15%;
}

th.eventkey {
	width: 150px;
}

/* --- wideventlisting.inc, widedoclisting.inc - score column --- */

th.score,
td .score {
	width: 10%;
	padding-left: 2%;
	padding-right: 2%;
}

/* --- doc table - date column --- */

th.docdate,
td.docdate {
	width: 25%;
	text-align: center;
	vertical-align: middle;
}

/* --- news table --- */

th.newslink,
td.newslink {
	width: 70%;
}

/* --- links in table headers --- */

th a {
	color: #fff;
	margin: 0;
	padding: 0;
	text-decoration: none;
}

th a img {
	margin: 0;
	padding: 0;
}

th a:hover {
	background-color: #666633;
}

th.dockey a:hover,
th.eventkey a:hover {
	color: #666633;
	background-color: #fff;
}

/* --- table cells --- */

td {
	padding: 4px 1%;
	border-bottom: 1px solid #666633;
	vertical-align: middle;	
}

/* --- news listing table cells --- */

td.news {
	padding: 10px 1%;
}

/* --- eventlisting.inc - accident image icons --- */
td.accidenticons img {
	padding: 0 1%;
}

/* --- doc and accident keys --- */

ul.key {
	width: 100%;
	margin: 5px 0;
	padding: 0;
}

ul.key li {
	width: 100%;
	height: 40px;
	margin: 10px 0;
	vertical-align: middle;
	list-style: none;
}

/* --- block titles in columns --- */

.col2 h1,
.col3 h1 {
	color: #000;
	background-color: #cccc99;
	text-align: center;
	padding: 10px;
	margin-top: 40px;
	margin-bottom: 0;
}

.col1 h1 {
	margin-top: 20px;	
}

/* --- h2s in right column --- */

.col3 h2 {
	color: #000;
}

/* --- general class to clear floating images - e.g. maps --- */

.clear {
	clear: both;
}

/* --- text blocks in left and right columns --- */

.featuredblock {
	border: 1px solid #990033;
	background-color: #fff;
}

.leftblock,
.featuredblock,
.rightblock {
	margin-top: 0;
}

.leftblock,
.featuredblock {
	padding: 5%;
}

.leftblock,
.rightblock {
	border-left: 1px solid #cccc99;
	border-right: 1px solid #cccc99;
	border-bottom: 1px solid #cccc99;	
}

.leftblock h1 {
	color: #000;
	background-color: #cccc99;
	text-align: center;
	padding: 10px;
}

.rightblock {
	padding: 5px 5%;
	background-color: #fff;
}

/*-------- updates.php - floats document links right --------*/

.latestdocs {
	width: 80%;
	float: right;
}

/*-------- vote.php - voting bars --------*/

.votebox {
	border-left: 1px solid #990033;
	border-bottom: 1px solid #990033;
	padding: 5px 0 5px 0;
	margin: 5px 0 5px 0;
}

.votebar {
	background-repeat: repeat-x;
	height: 20px;
	margin-bottom: 2%;
	padding-right: 1%;
	color:#fff;
	font-weight: normal;
	text-align: right;
	overflow: hidden;
}

.votebarblue {
	background-image: url(./siteimages/barBlue.jpg);
}

.votebargreen {
	background-image: url(./siteimages/barGreen.jpg);
}

/* --- menu for accident listing page --- */

#accidentlistmenu ul {
	list-style-type: none;
}

#accidentlistmenu ul li {
	display: inline;
	padding-top: 0px;
	padding-right: 0.5em;
	padding-bottom: 0px;
	padding-left: 0.5em;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #666633;
	font-size: 0.9em;
}

#accidentlistmenu ul li.first {
	border-left-width: 0px;
	border-left-style: none;
}

/* --- eventmap.inc - map for multiple accidents --- */

#allaccidentsmap {
	width: 100%;
	height: 800px;
}

/*--- fixed "back to top" footer --- */
/*--- DOES NOT WORK IN IE6 BUT DEGRADES OK --- */

#fixedfooter {
	position: fixed;
	bottom: 0;
	right: 0;
	border-top-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-left-style: solid;
	border-top-color: #666;
	border-left-color: #666;
	padding: 5px 1%;
	background-color: #fff;
	font-weight: bold;
	width: 17%;
}

#fixedfooter a {
	display: block;
}

/* --- Header at top of page --- */

#header {
	margin: 0;
	padding: 0;
	clear: both;
	float: left;
	width: 100%;
	background-color: #cccc99;
	border-bottom: 1px solid #000;
}
#header p,
#header h1,
#header h2 {
	padding: .4em 15px 0 15px;
	margin: 0;
}

/* --- logout link in header --- */

#logout {
	position: absolute;
	left: 500px;
	top: 75px;
	font-size: 0.9em;
	font-weight: bold;
	color: #cc0000;
}

/* --- main site logo in header --- */

#mainlogo {
	margin: 0;
	padding: 0;
	vertical-align: top;
}

/* --- stats in header --- */

#stats {
	position: absolute;
	left: 350px;
	top: 5px;
	font-size: 0.9em;
	font-weight: bold;
}

#stats p {
	color: #fff;
}

/* --- top menu in header and bottom menu in footer --- */

#topmenu {
	height: 100px;
	top: 5px;
	right: 0px;
	text-align: right;
	line-height: 2em;
	width: 100%;
}

#bottommenu {
	margin-top: 5px;
	line-height: 2em;
}

#topmenu form {
	position: absolute;
	top: 60px;
	right: 0px;
}

/* --- wide search text box --- */

form#widesearch input#search.textbox {
	width: 80%;
}

#topmenu ul,
#bottommenu ul {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0.5%;
	padding-left: 0.5%;
	list-style-type: none;
	right: 0;
}

#topmenu ul li,
#bottommenu ul li {
	display: inline;
	padding-top: 0px;
	padding-right: 0.5em;
	padding-bottom: 0px;
	padding-left: 0.5em;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #666633;
	font-size: 0.9em;
	margin-left: 0;
}

#topmenu ul li.first,
#bottommenu ul li.first {
	border-left-width: 0px;
	border-left-style: none;
}

#topmenu a,
#footer a,
#logout a {
	color: #666633;
	font-weight: normal;
}

#topmenu li a.bold,
#logout a.bold {
	font-weight: bold;
}


/* --- top.inc, footer.inc - link hovers --- */

#topmenu a:hover,
#footer a:hover,
#logout a:hover {
	color: #fff;
	background-color: #666633;
}

/* --- left.inc - more tools and admin dropdowns --- */

#toolsmenu,
#adminmenu {
	margin: 20px 0 0 0;
}

#toolsmenu select,
#adminmenu select {
	font-size: 1.2em;
	font-weight: bold;
	font-family: arial, verdana;
}

#toolsmenu select {
	background-color: #fff;
	color: #666633;	
}

#adminmenu select {
	background-color: #fff;
	color: #990033;	
}

/* --- 'on this day' optional banner in header --- */

#onthisday {
	clear: both;
	color: #fff;
	background-color: #666633;
	border-top: 1px solid #000;
	margin: 0;
	padding: 6px 15px !important;
}

#onthisday a {
	color: #fff;
}

#onthisday a:hover {
	color: #666633;
	background-color: #fff;
}

/* --- primary navigation --- */

#primarynav {
	margin: 0px;
	padding: 6px 0 0 0;
	list-style-type: none;
}

#primarynav a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.4em;
	font-style: normal;
	font-weight: bold;
	color: #ffffff;
	text-decoration: none;
	background-color: #666633;
	display: block;
	margin: 0px;
	width: 88%;
	padding-top: 6px;
	padding-right: 6%;
	padding-bottom: 6px;
	padding-left: 6%;
/* HACK: IE-WIN - this is necessary to prevent unwanted gap at bottom of a block */
	line-height: 1.5;
}

#primarynav a:hover {
	color: #eeeeee;
	background-color: #cccc99;
}

#primarynav li {
	display: block;
	border-top-width: 0px;
	border-top-style: solid;
	border-top-color: #cccc99;
	margin-top: 10px;
}

.latest a.imglink,
#doctitle a.imglink,
#doctitle img.imglink {
	float: left;
	margin-right: 5%;
}

.featuredblock a.imglink {
	float: right;
}

h1 a img,
h2 a img {
	padding: 0;
	margin: 0 0 0 20%;
}

h1 img {
	padding: 0;
	margin: 0 0 0 2%;
}

/* --- header for featured document --- */



/* --- latest document title --- */

div.latest h2 {
	color: #00809a;
}

/* --- blocks for more... links --- */

h2.more a {
	color: #fff;
	text-decoration: none;
	display: block;
}

h2.more a:hover {
	background: none;
}

/* --- all blocks in centre column --- */

.centreblock  {
	margin-top: 0;
	padding: 2%;
}

/* --- latest document blocks in centre column --- */

.latest {
	border-bottom: 1px solid #00809a;
}

.accident {
	border-bottom: 1px solid #990033;
}

/* --- accident title, timeline title --- */

div.accident h2,
div.accident h2 a,
div#doctimeline h2 {
	color: #990033;
}

/* --- accident map - float right --- */

div.accident img.map,
div .accident img.photo {
	float: right;
	margin-left: 3%;
	margin-right: 0;
	border: solid 1px #000;
}

/* --- rail news title - centre --- */

div.rightblock h2 {
	text-align: left;
}

/* --- form textboxes --- */

.textbox {
	/* --- NEED TO STYLE THIS --- */
}

/* --- form buttons --- */

.button {
	font-family: Arial, Verdana, Helvetica;	
	font-size: small;
	font-style: normal;
	font-weight: bold;
	color: #fff;
	background-color: #990033;
	padding: 2px;
	border: 0;
	cursor: pointer;
}

/* -------------- Master Page Layout ------------------------ */

/* column container */
.colmask {
	position:relative;	/* This fixes the IE7 overflow hidden bug */
	clear:both;
	float:left;
	width:100%;			/* width of whole page */
	overflow:hidden;		/* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
	float:left;
	width:100%;			/* width of page */
	position:relative;
}

.col2 {
	float: left;
	position: relative;
	padding: 0 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead 
					only padding top and bottom is included here, make it whatever value you need */
	overflow:hidden;
}

.col1,
.col3 {
	float: left;
	position: relative;
	padding: 20px 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead 
					only padding top and bottom is included here, make it whatever value you need */
	overflow:hidden;
	margin-bottom: 50px;
}


/* 3 Column settings */
.threecol {
	background:#eee;		/* right column background colour */
}
.threecol .colmid {
	right:20%;			/* width of the right column */
	background:#fff;		/* center column background colour */
}
.threecol .colleft {
	right:60%;			/* width of the middle column */
	background:#eee;	/* left column background colour */
}
.threecol .col1 {
	width:52%;			/* width of center column content (column width minus padding on either side) */
	left:104%;			/* 100% plus left padding of center column */
}
.threecol .col2 {
	width:16%;			/* Width of left column content (column width minus padding on either side) */
	left:30%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
	width:16%;			/* Width of right column content (column width minus padding on either side) */
	left:94%;			/* Please make note of the brackets here:
					(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}

/* --- Footer styles ------------------------------------------- */

#footer {
	clear: both;
	float: left;
	width: 100%;
	border-top: 1px solid #000;
	background-color: #cccc99;
}

#footer p {
	padding:10px;
	margin:0;
}

/* --- Validator image links - float right --- */

#validators,
.floatright {
	float: right;
}

.floatleft {
	float: left;
}