/* outer framing effect */
html, body {
	background: #8f8f8f;
	color: #000;
	padding: 0;
	margin: 0;
}
body {
	padding: 8px;
	margin: 0 auto;
	max-width: 80em;
}

/* heading and top */
h1 {
	background: #22437f url(images/cloudsback.jpg) repeat-x scroll 0 0;
	color: #c5ccdb;
	border-right: 5px solid #555;
	padding: 164px 4px 4px;
	margin: 0;
	text-align: center;
}

/* navigation */
#navig {
	padding: 1px 0 0.4em;
	float: left;
	width: 200px;
	background-color: #f0f0f0;
	border-bottom: 5px solid #555;
	overflow: hidden; /* stop IE and opera overlaying everything with alt text when images are disabled */
}
#navig h3 ~ h3 ~ h3 {
	border-top: 1px solid #ccc;
}
#navig ul, #navig form, #navig h2, #navig h3, #navig p.error, #navig p.accessible {
	margin-left: 0.4em;
	margin-right: 0.4em;
}
#navig h3, #navig p, #navig form, #navig fieldset {
	margin-top: 0.2em;
	margin-bottom: 0.2em;
}
#navig fieldset {
	padding: 0 2px;
}
#navig .searchbut {
	width: 50px;
}
#navig .searchbybut {
	width: 110px;
}
#navig fieldset {
	padding: 0 2px;
	border: 1px solid #555;
}
/* tree view */
#navig ul {
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
	list-style-type: none;
}
#navig ul ul, #navig li, #navig fieldset ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#navig ul ul { padding-left: 0.3em; }
#navig ul ul li {
	border-left: 1px solid #000;
	padding-left: 10px;
	text-align: left;
	background: url(images/treehoriz.gif) scroll no-repeat 0 0.6em;
}
#navig ul ul li.last {
	border-left-width: 0px;
	padding-left: 11px;
	background: url(images/treeangle.gif) scroll no-repeat left top;
}
#navig a {
	text-decoration: none;
}
#navig a:hover {
	text-decoration: underline;
}
#navig a.hidden:hover {
	text-decoration: none;
}
#regionlist a {
	color: green;
}
#regionlist li li a {
	color: red;
}
#regionlist li li li a {
	color: blue;
}

/* main content */
#content {
	background: #fff;
	padding: 1px 8px 8px 8px;
	margin-left: 200px;
	border: solid #555;
	border-width: 0 5px 5px 0;
}
body.dependent #content {
	margin-left: 0;
}
table {
	/* border-spacing not supported in IE 7-, but the effect is harmless */
	border-spacing: 1px;
	background: #fff;
}
table, th, td {
	border: none;
}
th {
	background: #e5e4e3;
	text-align: center;
}
thead th {
	background: #555;
	color: #fff;
}
tbody th {
	text-align: left;
}
th, td {
	padding: 2px;
	empty-cells: show;
}
tr.even td {
	background: #f4f6f9;
}
table.cavetable td:first-child + td + td, table.cavetable td:first-child + td + td + td, table.cavetablenorank td:first-child + td, table.cavetablenorank td:first-child + td + td {
	text-align: center;
}
table.formatted tbody td {
	vertical-align: top;
	white-space: pre;
}
a {
	color: #00c;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
a:visited {
	color: #336;
}
img {
	border: none;
	vertical-align: middle;
}
img.withcaption {
	display: block;
}
p.error {
	color: red;
}
fieldset {
	padding: 8px;
	border: 1px solid #555;
}
input.visib {
	background: #ff0;
}
input.changed {
	color: blue;
	font-style: italic;
}
#content fieldset ul, #content fieldset li, #content fieldset p {
	margin: 0;
	padding: 0;
	display: block;
	list-style-type: none;
}
#content fieldset li {
	margin: 2px 0;
	padding: 4px;
	background: #f4f6f9;
	border: 1px solid #ccc;
}
#content fieldset li li {
	margin: 0;
	padding: 0;
	border: none;
}
#content fieldset label {
	display: block;
	cursor: pointer;
}
#content input[maxlength="100"], #content input[maxlength="1024"] {
	width: 50em;
}
#content input[maxlength="50"] {
	width: 25em;
}
#content textarea, #content select, #content input {
	max-width: 95%;
}
#content textarea.flexible {
	width: 95%;
}

/* edit links */
.directedit {
	float: right;
}
.directedit a {
	text-decoration: none;
}

/* meta information for caves */
dl.cavemeta, dl.cavemeta dt, dl.cavemeta dd {
	margin-left: 0;
	margin-right: 0;
}
dl.cavemeta dt {
	float: left;
	width: 8em;
	font-weight: bold;
}
dl.cavemeta dd {
	/* just in case some stupid browser makes the bold font use more line height in the dt */
	padding-bottom: 0.2em;
}

/* image maps */
/*
  hard coded for each image because they are often wider than the viewport, and this is the only way to get the
    right effect (stretch-to-fit without shrink-to-fit)
  image + image border + nav + content padding + content border
  image + 0 + 200 + 16 + 5
  image + 224
  also IE 6 version needs 3 px more for 3px jog bug
  IE 6 version looks bad on wide screens with narrow images;
    I don't care, get a better browser, and stop forcing me to add stupid workarounds into my pages for you
*/
body.mapassynt { min-width: 816px; }
* html body.mapassynt { width: 819px; }
body.mapclare { min-width: 1184px; }
* html body.mapclare { width: 1187px; }
body.mapoldclare { min-width: 1106px; }
* html body.mapoldclare { width: 1109px; }
body.mapderby { min-width: 852px; }
* html body.mapderby { width: 855px; }
body.mapdevon { min-width: 836px; }
* html body.mapdevon { width: 839px; }
body.mapfermanagh { min-width: 665px; }
* html body.mapfermanagh { width: 668px; }
body.mapmendip { min-width: 1140px; }
* html body.mapmendip { width: 1143px; }
body.mapnorthwales { min-width: 681px; }
* html body.mapnorthwales { width: 684px; }
body.mapukie { min-width: 643px; }
* html body.mapukie { width: 646px; }
body.mapwales { min-width: 1156px; }
* html body.mapwales { width: 1159px; }
body.mapyorks { min-width: 1195px; }
* html body.mapyorks { width: 1198px; }
/* allow objects so the framesetlinks userjs can work */
div.map img, div.map object {
	background: #f9f9f9;
	vertical-align: bottom;
}
#instruction {
	position: absolute;
	background-color: #000000;
	border: 2px solid #ca9702;
	padding: 20px;
	color: #f00;
	font-size: 2em;
	left: 50%;
	margin-left: -9em;
}
#instruction a {
	font-family: sans-serif;
	float: right;
	margin: -20px -18px 0 0.5em;
	font-size: smaller;
	color: #999;
	text-decoration: none;
}
#instruction a:hover {
	color: #fff;
}

/* news */
#news {
	float: right;
	width: 200px;
	margin: 8px 0 8px 8px;
	border-left: 1px solid #eee;
	border-right: 5px solid #999;
	border-bottom: 5px solid #999;
}
#news h2 {
	background: #22437f;
	color: #c5ccdb;
	margin: 0;
	text-align: center;
}
#news dl {
	margin: 0.5em;
	padding: 0;
}
#news dt {
	margin: 0;
	padding: 0 0 0 1em;
	font-style: italic;
	background: #f4f6f9;
}
#news dd {
	margin: 0 0 0.5em;
	padding: 0;
}

/* footer */
#footer {
	clear: both;
	margin-top: 0.5em;
	padding-top: 0.5em;
	border-top: 1px solid #ccc;
	color: #777;
}
#footer p {
	margin: 0;
}
address {
	font-style: italic;
}

/* stuff for media types that do not need accessibility text */
@media screen, projection, tv {
	#navig h2, p.accessible, #content h2.oneitem {
		display: none;
	}
}

/* stuff for printing */
@media print {
	html, body {
		background: #fff;
	}
	body {
		padding: 0;
		margin: 0;
		min-width: 0 !important;
	}
	h1 {
		border-top: 1px solid #22437f;
		border-bottom: 1px solid #22437f;
		border-right: none;
		padding: 0;
		color: #22437f;
		background: transparent;
	}
	#navig, #instruction {
		display: none;
	}
	#content {
		border: none;
		margin-left: 0;
	}
	a, a:visited {
		color: inherit;
		text-decoration: none;
	}
	#footer:after {
		display: block;
		content: "http://www.ukcaves.co.uk/ - the UK Caves database site";
	}
	.cavetable td + td + td + td + td + td + td, .cavetable th + th + th + th + th + th + th, .cavetablenorank td + td + td + td + td + td, .cavetablenorank th + th + th + th + th + th {
		display: none;
	}
	img {
		max-width: 100%;
		page-break-inside: avoid;
	}
	h1, h2, h3, h4, h5, h6 {
		page-break-after: avoid;
	}
}

/* small screens and mobiles - only works in good mobile browsers */
@media handheld and (min-width: 0) {
	/* this stylesheet makes heavy use of media queries -
	handheld browsers that have not yet chosen to implement media queries can fend for themselves */
	html {
		font-family: sans-serif;
		font-size: 11px;
	}
	h1, h2, h3, h4, h5, h6 {
		font-style: normal;
		font-weight: bold;
	}
	h1 {
		font-size: 1.4em;
	}
	h2 {
		font-size: 1.2em;
	}
	h3 {
		font-size: 1.1em;
	}
	h4, h5, h6 {
		font-size: 1em;
	}
}

@media all and (max-width: 750px) {
	#navig {
		float: none;
		width: auto;
		border-bottom: none;
		border-right: 5px solid #555;
	}
	#navig h2, p.accessible, #content h2.oneitem {
		display: block;
	}
	#content {
		margin-left: 0;
	}
	body {
		min-width: 0 !important;
	}
	div.map img {
		background: #fff;
	}
	pre, pre code {
		white-space: pre-wrap;
	}
	.directedit {
		display: none;
	}
}
@media all and (max-width: 550px) {
	h1 {
		padding-top: 0;
		background-image: none;
	}
	table, thead, tbody, tr, th, td {
		display: block;
		text-align: left;
	}
	tr {
		border: 1px solid #333;
		margin: 0.5em 0;
	}
	td, th {
		border: 1px solid #eee;
	}
	#news {
		float: none;
		width: auto;
	}
	dl.cavemeta dt {
		float: none;
		width: auto;
	}
}