/* Sorry for the awful markup this uses, but this is what happens when the dominant browser fails to support SVG. */

html {
	font-family: Helvetica, Verdana, 'Arial New', Arial, sans-serif;
	color: #000;
	background: #47b;
	margin: 0;
	padding: 8px;
}
body {
	background: #edf2f8;
	margin: 0 auto;
	padding: 8px;
	border-right: 5px solid #257;
	border-bottom: 4px solid #257;
	border-radius: 8px 10px 20px 20px;
}
body.withhead {
	background-repeat: repeat-x;
	padding-top: 180px;
}
h1 {
	color: #eff;
	background-color: #257;
	margin: 0px;
	padding: 3px 3px 0px 3px;
	display: inline;
}
h1 + p {
	font-size: smaller;
	color: #777;
	margin: 0px 0px 8px;
	padding-left: 4em;
	border-bottom: 1px solid #789;
	border-right: 10px solid #257;
	border-top: 2px solid #257;
}

/* links and related */

a {
	font-size: 0.8em;
	color: #257;
	padding: 1px 3px;
	text-decoration: none;
	border-bottom: 1px solid #adb2b8;
	border-right: 10px solid #adb2b8;
}
a:hover {
	background-color: #dde2e8;
	border-right-color: #257;
	border-bottom-color: #257;
}

/* header/footer */

ul.bot-link, ul.bot-link li, ul.top-link, ul.top-link li {
	margin-left: 0;
	padding-left: 0;
}

ul.bot-link li, ul.top-link li {
	display: inline;
	padding: 0 0.5em 0 0.9em; /* right padding is also beside a space, so left padding must be bigger */
	border-left: 1px solid black;
}

ul.bot-link li:first-child, ul.top-link li:first-child {
	padding-left: 0.5em; /* reset it on the first one so it's balanced with the last one */
	border-left-width: 0;
}

li.current a {
	background-color: #dde2e8;
	border-right-color: #257;
	border-bottom-color: #257;
}

/* stop various browsers reformatting */
@media handheld, tv {}
img {
	max-width: none !important;
}

/* positioning of labels relative to image */
.labelledimage, .unlabelledimage { cursor: pointer; }
.labelledimage {
	font-family: serif;
	position: relative;
	overflow: hidden;
}
.labelledimage div div { position: absolute; }
.unlabelledimage div div { display: none; }

/* class names are colours because they need to contrast with the image colours beneath them, so the only reason to give them a class is to colour them so that they contrast */
.cfuchsia { color: fuchsia; }
.cred { color: red; }
.corange { color: orange; }
.cyellow { color: yellow; }
.colive { color: olive; }
.clime { color: lime; }
.cgreen { color: green; }
.cteal { color: teal; }
.caqua { color: aqua; }
.cblue { color: blue; }
.cnavy { color: navy; }
.cpurple { color: purple; }
.cmaroon { color: maroon; }
.cblack { color: black; }
.cgrey { color: gray; }
.csilver { color: silver; }
.cwhite { color: white; }

/* say what side has a border */
.left {
	border-left: 1px solid;
	width: 0; /* default to 0 width - will be overridden if it uses more than one border */
}
.right { border-right: 1px solid; }
.top { border-top: 1px solid; }

/* progress for animated images */

.progressouter {
	width: 200px;
	height: 20px;
	background: #dde2e8;
	border-right: 1px solid #257;
	border-bottom: 1px solid #257;
}

.progressinner {
	height: 20px;
	background: #47b;
}

/* location maps */

.markedimage {
	font-family: serif;
	position: relative;
	cursor: crosshair;
}
ul.mappoint, ul.mappoint li {
	display: block;
	margin: 0;
	padding: 0;
}
ul.mappoint a {
	position: absolute;
	width: 5px;
	height: 5px;
	background: yellow;
	border: 1px solid red;
	margin: -3px 0 0 -3px;
	padding: 0;
	top: 950px;
}
ul.mappoint a:hover, ul.mappoint a:focus, ul.mappoint a.simfocus {
	width: 11px;
	height: 11px;
	border: 2px solid red;
	margin: -6px 0 0 -6px;
	z-index: 2;
}
ul.mappoint li.disabl a {
	background: #ffffaa;
	border-color: #ffaaaa;
}
ul.mappoint li.isable a {
	background: #ffffff;
	border-color: #ccaaaa;
	opacity: 0.5;
	filter: alpha(opacity=50);
}
ul.mappoint a span {
	display: none;
	position: absolute;
	white-space: nowrap;
	background: white;
	padding: 1px;
	border: 1px solid black;
	top: 0;
	left: 20px;
}
ul.mappoint a:hover span, ul.mappoint a:focus span, ul.mappoint a.simfocus span {
	display: block;
}
.marksample {
	display: inline-block;
	width: 5px;
	height: 5px;
	background: yellow;
	border: 1px solid red;
}
li.rank6 a {
	width: 1px;
	height: 1px;
	margin: -1px 0 0 -1px;
}
li.rank7 a {
	width: 3px;
	height: 3px;
	margin: -2px 0 0 -2px;
}
li.rank8 a {
	width: 5px;
	height: 5px;
	margin: -3px 0 0 -3px;
}
li.rank9 a {
	width: 7px;
	height: 7px;
	margin: -4px 0 0 -4px;
}
li.rank10 a {
	width: 9px;
	height: 9px;
	margin: -5px 0 0 -5px;
}

/* the index list on the left */

ul.scriptedlist {
	display: none;
	position: fixed;
	top: 1.1875em;
	bottom: 1.1875em;
	left: 0;
	width: 15em;
	background-color: #edf2f8;
	margin: 0;
	padding: 0;
	overflow: auto;
	z-index: 3;
	border-right: 1px solid #257;
}
html.withscriptedlist ul.scriptedlist {
	display: block;
}
ul.scriptedlist li {
	margin: 0 0 0 1.5em;
	padding: 1px 1px 0;
}
.failedsearch {
	display: none;
}
ul.scriptedlist a {
	border: none;
	border-bottom: 1px solid #edf2f8;
	padding: 0;
	margin: 0;
	display: block;
}
ul.scriptedlist a:hover {
	border-bottom: 1px solid #257;
}
html.withscriptedlist {
	padding-left: 15.6em;
}
h2.indexhead {
	position: fixed;
	top: 0;
	left: -14em;
	width: 15em;
	background-color: #edf2f8;
	z-index: 3;
	font-size: 1em;
	line-height: 1.125em;
	margin: 0;
	color: #257;
	border-bottom: 1px solid #257;
	border-right: 1px solid #257;
	padding: 0;
	text-align: center;
}
html.withscriptedlist h2.indexhead {
	left: 0;
	border-bottom-width: 1em; /* index overlaps it so it only looks like 1px - needed to allow for em-px rounding errors */
}
h2.indexhead a {
	float: right;
	min-width: 15px;
	border: 1px solid #257;
	border-width: 0 0 0 1px;
	padding: 0;
	text-align: center;
}
div.quickfind {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 15em;
	background-color: #edf2f8;
	z-index: 3;
	font-size: 1em;
	height: 1.125em;
	margin: 0;
	border-top: 1em solid #257; /* index overlaps it so it only looks like 1px - needed to allow for em-px rounding errors */
	border-right: 1px solid #257;
}
html.withscriptedlist div.quickfind {
	display: block;
}
div.quickfind input {
	display: block;
	width: 13.5em;
	margin: 0;
	padding: 0 1px 0 0;
	font-size: 1em;
	line-height: 1.1em;
	height: 1.1em;
	border: none;
	color: #999;
	background-color: transparent;
}
div.quickfind a {
	float: right;
	min-width: 15px;
	margin: 0;
	padding: 0;
	font-size: 1em;
	line-height: 1.1em;
	height: 1.1em;
	text-align: center;
	color: #999;
	border: none;
	border-left: 1px solid #999;
}
div.quickfind input:focus {
	color: #000;
}
div.overnotice {
	position: fixed;
	bottom: 2.5em;
	left: 0.5em;
	width: 13em;
	background-color: #edf2f8;
	z-index: 4;
	font-size: 1em;
	margin: 0;
	border: 1px solid #257;
	cursor: pointer;
	display: none;
}
html.withscriptedlist div.overnotice {
	display: block;
}
div.overnotice a {
	float: right;
	margin: 0 0 0.2em 0.2em;
	padding: 0 0.2em;
	font-size: smaller;
	color: #999;
	border: none;
	border-left: 1px solid #999;
	border-bottom: 1px solid #999;
}
div.flashnotice {
	background-color: #fff;
}