/* css file for walks section of site (screen - media) Version 1.0 28.11.2011 */

body 
{
	background-image: url("jacombsback.jpg");
	background-repeat: repeat;
	background-attachment: fixed;
	font-family: calibri, "gill sans mt", sans-serif;
	font-size: medium;
}
a 
{
	text-decoration: none;
}
.middle 
{
	text-align: center;
}

.super 
{
	vertical-align: super;
	font-size: 0.7em;
}

.direction
{
	clear: left;
	padding-top: 1em;
}
.heavy
{
	font-weight:bold;
}

/* The navigation area fixed on the left hand side of each page */

div#nav 
{
	position: fixed;
	width: 10.5em;
	height: 100%;
	margin: 0;
	top: 0;
	left: 0;
	border-right: ridge 2px blue;
	border-bottom: ridge 2px blue;
	background-color: #efefef;
	text-align: center;
}
div#nav ul 
{
	list-style-type: none;
	padding-left: 1em;
	margin-left: 0;
	margin-top: 0.2em;
}
div#nav li 
{
	background-color: blue;
	font-size: 1.1em;
	font-weight: bold;
	color: white;
	width: 7.5em;
	margin: 0.15em;
	border: solid thin navy;
	padding: 0:
}
div#nav li:hover 
{
	background-color: red;
}
div#nav #logoimg 
{
	width: 9em;
	padding: 0.5em;
	border-bottom: ridge 2px blue;
}
div#nav a 
{
	color: white;
}
div#nav .contact a 
{
	color: blue;
}
div#nav .contact a:hover
{
	color: red;
}

/* The permananent logo which floats over the detailed information as it scrolls up and down the page */

div#banner 
{
	position: fixed;
	left: 10.5em;
	top: 0;
	right: 0;
	text-align: center;
	background-color: transparent;
	z-index: 1;
	margin: 0;
	padding-top: 1em;
}
div#banner .printhead 
{
	display: none;
}

/* The body division forms the background in whiuch the information division floats */

div#body 
{
	position: absolute;
	left: 11em;
	right: 1em;
}

/* all the actual information is displayed in the info division */

div#info 
{
	position: relative;
	margin: auto;
	text-align: left;
	margin-top: 10em;
	width: 60em;	
	background-color: #fffbe0;
	border: solid thin blue;
	padding: 0.5em;
}
div#info a
{
	font-weight: bold;
	color: blue;
}
div#info a:hover 
{
	color: red;
}
div#info h1 
{
	font-size: 1.5em;
	margin: 0;
	color: #b22222;
}
div#info p 
{
	margin: 0.2em;
}
div#info .inlay
{
		margin-left: 2em;
}
div#info .boldhead
{
	font-weight: bold;	
}
div#info ul.bullet
{
	list-style-type: square;
	list-style-position: inside;
}
div#info .iindent
{
	margin-left: 2em;	
}
div#info ul 
{
	margin-left: 0;
	padding-left: 0;
}
div#info ol.bullet
{
	list-style-type: none;
}
div#info ul li.reserve 
{
	float: left;
	margin-right: 0.5em;
}
div#info dl > dt
{
	font-weight: bold;
}
div#info p.dateline 
{
	border-top: dotted thin #686969;
	text-align: center;
	font-size: 0.8em;
	color: #686969;
	padding-top: 0.3em;
	margin-top: 1em;
	clear: left;
}

div#info .footnote 
{
	margin-top: 2em;
	font-size:0.8em;
}
div#info .footnote + .footnote
{
	margin-top: 0;
}

div#info .floatl 
{
	float: left;
	margin-right: 3em;
	margin-bottom: 0.6em;
}
div#info h3       
{                 
	font-size: 1.2em;
	color: #b22222;  
}
div#info img.maplong
{
	width: 26em;
	border-style: solid;
	border-width: medium;
	border-color: blue;
	float: left;
	margin-right: 3em;
	margin-left: 1em;
	margin-bottom: 1.5em;
}
div#info img.mapwide
{
	width: 54em;
	border-style: solid;
	border-width: medium;
	border-color: blue;
	float: left;
	margin-right: 3em;
	margin-left: 1em;
	margin-bottom: 1.5em;
}
div#info img.photo
{
	width: 26em;
	border-style: solid;
	border-width: thin;
	border-color: blue;
	margin: 1em;
}
div#info img.photodetail
{
	width: 20em;
	border-style: solid;
	border-width: thin;
	border-color: blue;
	margin: 1em;
	float: right;
}
div#info p.walksummary
{
	border-bottom: solid medium blue;
	margin-bottom: 1em;
}
div#longmapphot
{
	position: absolute;
	top: 20em;
	left: 33em;
	width: 28em;
	font-size: 0.9em;
	text-align: center;
}
div#longmap
{
	position: relative;
	width: 60em;
}
div#longmaptext
{
	position: absolute;
	top: 0em;
	width: 28em;
	left: 31em;
}
div#info p.walkdetail
{
	clear: both;
	border-top: solid medium blue;
	margin-top: 1em;	
}
div#widemap
{
	position: relative;
	width: 60em;
	clear: both;
}
div#widemapphot
{
	width: 27em;
	font-size: 0.9em;
	text-align: center;
	margin-left: 1em;
}
div#widemaptext
{
	position: absolute;
	width: 31em;
	left: 29em;
}
div#info span.button {
	font-weight: bold;
}
div#info table
{
	width: 95%;
	margin-left: 1em;
}
div#info table col.num
{
	width: 5%;
}
div#info table col.grid
{
	width: 15%;
}
div#info table col.details
{
	width: 80%;
}
div#info table thead
{
	font-weight: bold;
}
div#info table td
{
	border-bottom: thin dotted black;
	vertical-align: text-top;
}
div#info .indent
{
	margin-left: 2em;
}