@charset "UTF-8";
/* CSS Document */

/* @override 
	http://localhost:8888/jo_metson_scott/css/screen.css
	http://www.voodoo6.com/jo_metson_scott/css/screen.css
*/

/* The Malarkey Method: MIR Image replacement Technique*/
.mir { letter-spacing : -1000em; }
/* Be nice to Opera, but hide from MacIE.*/
/*\*/html>body .mir { letter-spacing : normal; text-indent : -999em; overflow : hidden;}
/* end hack */


html {
	text-align: center;
	background-color: #ffffff;
}

body {
	width: 800px;
	margin: 0 auto;
	position: relative;
	text-align: left;
	font: small "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", "Lucida", sans-serif; 
	line-height: 150%;
	color: #6b6b6b;
	background-color: #ccc;
}

html>body {  /* be nice to opera */
	font-size: small;
}

div#content {
	position: relative;
	top: 20px;
	background-color: #fff;
	/* does this now need the blue anvil float clearance? (1% height, overflow:hidden etc) */
	padding: 10px 10px 10px 10px;
	margin-bottom: 50px;
}

a:link {
	color: #000000;
	text-decoration: none;
}

a:visited {
	color: #000000;
	text-decoration: none;
}

a:hover {
	color:#990000;
  	text-decoration: none;
}

a:active {
  outline: none;
}

#link_column {
	position: absolute;
	width: 190px;
	height: 500px;
	left: 10px;
}

/* dual state image used to prevent flicker happening as the hover swaps the images - only the position is changed, not the whole image, in effect preloading them. NOTE: see IE only file for IE fix */
.branding a {
	background: url(img/branding_dual_state.gif) no-repeat left top;
	display: block;
	width: 78px;
	height: 38px;
}

.branding a:hover  {
	background: url(img/branding_dual_state.gif) no-repeat right top;
	width: 78px;
	height: 38px;
}

#nav {
width:250px;
height:300px;
}

#nav a:link {
	color: #000000;
	text-decoration: none;}

#nav a:hover {
	color:#990000;
  	text-decoration: none;}

#nav a:visited {
	text-decoration: none;}



h2.nav_sub_head {
color:#000000;
font-family:"Trebuchet MS";
font-size:12px}

ul.nav_links {
	font-weight: bold;
	width: 145px;
}

ul.nav_links li a {
	text-decoration: none;
	color: #c0c0c0;
}

ul.nav_links li a:hover {
	text-decoration: none;
	color: #cbdbbb;
}

#image_display_area {
	position: relative;
	left: 230px;
	height: 500px;
	width: 500px;
	background-color: #e5e5e5;
	line-height: 495px;
	border: none;
}

#image_display_area img {  /* to centre image in box - needs the line-height to be set above - not sure why it has to be 495 as opposed to 500 to it to sit perfect centre? */
	vertical-align: middle;
}

#image_caption {
	position: absolute;
	left: 240px;
	top: 545px;
	width: 500px;
	font-size: 85%;
	line-height: 100%;
	padding: 0 0 0 0;
}

#contact_info {
	font-size: 87%;
	line-height: 100%;
	position: absolute;
	bottom: 0;
}

#contact_info p {
	padding: 3px 0 0 0;
}

#thumb_block {
	position: absolute;
	bottom: 0;
	width: 192px;
}

#thumb_block img {
	float: left;
	margin: 2px 2px 0 0;
	width: 62px;
	height: 62px;
}

#footer {
	position: absolute;
	left: 0px;
	top: 525px;
	font-size: 85%;
	line-height: 100%;
	color: #6b6b6b;
}

#footer p {
	margin: 0 0 -3px 10px;
	float: left;
}