/*
	CSS2 stylesheet devised/coded by Andrew Beveridge <webmaster@andrewthecoder.co.uk>
	Copyright � 2008 Andrew Beveridge
*/

/* Important positional rules, including body and container div blocks */
body {
background: #FFFFFF;
color:#000;
font:100% Tahoma, Verdana, Arial;
height:100%;
margin:0;
padding:0;
width:100%;
}

#container {
position:absolute;
top: 0px;
height:100%;
width:100%;
margin:0 auto;
padding:0;
}

#content {
position:relative;
width:750px;
height:auto;
margin:0 auto;
padding:0;
padding-top: 20px;
color:#000;
text-align: left;
overflow: hidden;
}

/* 
	Specific rules for tier-2 div blocks...
	Including basic positional and aesthetic attributes
	Rough description of each tier-2 block:
	Header block is for main site logo - at very top, can be resized height-wise
	Top block if for main links - can be resized height-wise for different link button styling
	Middle block is for main site content - includes two tier-three div blocks. Resizes relatively.
	Bottom block is for footer, including a tier-3 div block for links. Resizes height-wise for different link button styling etc.
*/

#header, #middle, #footer {
position: relative;
width:100%;
height: auto;
overflow: hidden;
}


/* 
	Specific rules for various tier-3 elements...
	Including basic positional and aesthetic attributes
*/

#logo {
background: transparent url(images/logo.jpg);
height: 60px;
width:100%;
}

.nav {
	height: 20px;
	margin: 0 auto;
	line-height: 185%;
	font-size: 0.6em;
	font-weight: bold;
	background: transparent url(images/nav_bg.gif);
	overflow: hidden;
	text-align: left;
}

.nav img {
	margin-left: 10px;
	padding-left: 5px;
	padding-right: 2px;
	vertical-align: middle;
	border: none;
}

.nav_header {
	padding-left: 30px;
}

#spacer_header {
height: 40px;
background: transparent url(images/spacer_header.gif);
}

#middle {
background: transparent url(images/middle.gif);
}

#middle_container {
padding-left: 60px;
padding-right: 60px;
}

#spacer_footer {	
height: 40px;
background: transparent url(images/spacer_footer.gif);
}

#footer {
color: #FFF;
}

.float_right {
	float: right;
	width: 330px;
	text-align: right;
	padding-right: 20px;
	overflow: hidden;
}

.float_left {
	float: left;
	width: 330px;
	text-align: left;
	font-size: 0.6em !important;
	font-weight: normal !important;
	padding-left: 20px;
	padding-top: 3px;
	overflow: hidden;
}

#contacts_footer {
	height: 30px;
	margin: 0 auto;
	background: transparent url(images/contacts_footer.gif) top no-repeat;
	font-size: 11px;
	font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	text-align: center;
	text-transform: uppercase;
	padding-top: 8px;
	color: #FFF;
}

/* -------------------------------------------- */
/*  classes useful for many positions  */
/* -------------------------------------------- */

.center {
	text-align: center;
	margin: 0 auto;
}

.left {
	text-align: left;
}

/* -------------------------------------------- */
/*	Front page Web 2.0 buttons	*/
/* -------------------------------------------- */

.o5x2 {
	width: 500px;
	height: 200px;
	margin: 0 auto;
	background: transparent url(images/o5x2.jpg);
	overflow: hidden;
}

.o5x2 a {
	display: block;
	width: 500px;
	height: 200px;
}

.o5x2 a:hover {margin: 2px 0 0 2px;}

.work {background: transparent url(images/work.gif) no-repeat center center;}
.bios {background: transparent url(images/bios.gif) no-repeat center center;}


	/* --------------------------------------------- */
	/*    AJAX Mailing List Signup Form    */
	/* --------------------------------------------- */

		#mailinglistdiv {
			width: 470px;
			margin: 20px auto;
			padding: 10px 20px;
			border:1px solid lightgrey;	
			background: #d6e6f1;
			text-align: left;
			font: 16px/18px "Lucida Grande", Geneva, Arial, Verdana, sans-serif;
			color:#333;
		}
		
		#mailinglistdiv input[type=text], #mailinglistdiv textarea {
			background:#FFFFFF no-repeat scroll 8px 9px;
			border:1px dashed lightgrey;
			font-family:tahoma,verdana,arial,sans-serif;
			font-size:14px;
			padding:4px 3px 5px 3px;
			margin: 0 auto;
		}
		
		#mailinglistdiv input[type=text] {
			width: 250px;
		}

		#mailinglistdiv input[type=submit] {
			background-color:#333;
			border-color:#D9DFEA rgb(14, 31, 91) rgb(14, 31, 91) rgb(217, 223, 234);
			border-style:double;
			border-width:1px;
			color:#FFFFFF;
			font-family:tahoma,verdana,arial,sans-serif;
			font-size:14px;
			padding:4px 15px 5px;
			text-align:center;
			margin: 2px 0 0 0;
			height:30px;
		}
		
		.mailinglistdiv-loading {
			padding: 30px !important;
			background: transparent url("images/icons/loading.gif") center center no-repeat !important;
		}
		
		.mailinglistdiv-loaded {
		}
		
/* --------------------------------------- */
/* ------ Body Parts Image etc. ---- */
/* --------------------------------------- */

#bodypartname {
width: 260px;
padding: 20px;
border:1px solid lightgrey;	
background: #d6e6f1;
color: #009900;
font-weight: bold;
font-size: 16;
margin: 0 auto;
text-transform: capitalize;
}

img[usemap] {
border: 1px dashed #000;
}

/* --------------------------------------- */		
/* --------------- Links ---------------- */
/* --------------------------------------- */

a:link {
	color: #FFF;
	text-decoration: none;
}
a:visited {
	color: #FFF;
	text-decoration: none;
}
a:hover {
	color: #B3D9FF;
	text-decoration: none;
}

a.on:link { 
	color: #B3D9FF; 
	text-decoration: none; 
}
a.on:visited { 
	color: #B3D9FF; 
	text-decoration: none; 
}
a.on:hover { 
	color: #FFF; 
	text-decoration: none;
}

#middle a:link { 
	color: #002f60; 
	text-decoration: none; 
}
#middle a:visited { 
	color: #002f60; 
	text-decoration: none; 
}
#middle a:hover { 
	color: #FFF; 
	text-decoration: none;
}