/* CSS Document */

/* DOCUMENT INFORMATION -----------------------------------

TITLE:			Default screen display styles
LAST UPDATED:	01 May 2007
AUTHOR:			John Arnfield <ja@cleverclover.co.uk>

-- CONTENTS -----------------------------------------------

	=1:		[HTML & BODY, UNDOHTML]
	=2:		[LINKS]
	=3:		[COMMON ELEMENTS]
	=4:		[TOP ELEMENTS]
	=5:		[NAVIGATION]
	=6:		[MAIN COLUMN]
	=7:		[SIDEBAR COLUMN]
	=8:		[FOOTER]
	=9:		[LISTS]
	=10:	[FORMS]
	=11:	[IMAGES]
	=12:	[MISC]
	
-----------------------------------------------------------

NOTES:	Default CSS Template for CleverClover.com..
		Contains a list of default CSS styles for a generic
		site. Uses verdana 10pt by default with an 11pt line
		height.

/*	=1:	[HTML & BODY] -------------------------------------*/

link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:12pt; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }

html {height: 100%; margin-bottom: 1px;}

body {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	text-align: left;
	line-height: 10pt;
	color: #000;
	background-color: #FFF;
	background: url('../images/body-bg.gif') top left repeat-x;
}
	
/*	=2:	[LINKS] -------------------------------------------*/	

/* NOTES: remember LoVe HAte */

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

/*	=3:	[COMMON ELEMENTS] ---------------------------------*/	


h2 {
	text-align: left;
	padding: 8px 5px 2px 5px;
	border-bottom: 1px solid #C0C000;
}

p {
	color: #333333;
	padding: 4px 0 3px 3px;
}

hr {
	height: 2px;
	border: 0;
	background-color: #ababab;
	color: #ababab; 
	width: 90%;
	margin: 5px auto;
}

table {
	margin: 2px auto;
}

td {
	/* text-align: center;
	vertical-align: center; */
}
ul {
	list-style-position: inside;
}

/*	=4:	[TOP ELEMENTS] ------------------------------------*/

#pagewrap {
	margin: 0 auto;
	width: 825px;
}

#pagewrap div.grad {
	width: 20px;
	float: left;
}

#pagewrap div.grad div {
	float: left;
	width: 100%;
}

#pagewrap div.grad.left div.headergrad {
	height: 186px;
	background: url('../images/grad-lhs-green.gif') top right repeat-y;
}

#pagewrap div.grad.right div.headergrad {
	height: 186px;
	background: url('../images/grad-rhs-green.gif') top left repeat-y;
}

#pagewrap div.grad.left div.bodygrad {
	height: 200px;
	background: url('../images/grad-lhs-white.gif') top right no-repeat;
}

#pagewrap div.grad.right div.bodygrad {
	height: 200px;
	background: url('../images/grad-rhs-white.gif') top left no-repeat;
}

#page {
	width: 785px;
	float: left;
}

#header {
	position: relative;
	height: 186px;
	float: left;
	background: url('../images/header-bg.jpg');
	width: 100%;
}

#header img#phone {
	position: absolute;
	bottom: 8px;
	right: 20px;
}

#content {
	float: left;
}

/*	=5:	[NAVIGATION] --------------------------------------*/	

#header ul#nav {
	position: absolute;
	left: 72px;
	bottom: 8px;
}

#header ul#nav li {
	float: left;
	font-weight: bold;
	padding-left: 30px;
	background: url('../images/topnav-bg.gif') top left repeat-y;
}

#header ul#nav li.start {
	background-image: none;
	padding-left: 15px;
}

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

#nav a:hover {
	text-decoration: underline;
}

/*	=6:	[MAIN COLUMN] -------------------------------------*/	

#bodywrap {
	float: left;
	width: 100%;
	background: url('../images/bwrap-bg.gif') top left repeat-y;
}

#bodyLHS {
	float: left;
	width: 597px;
	padding: 8px 4px 10px 12px;
	background: url('../images/bodytl-bg.gif') top left no-repeat;
}

#bodyLHS #advert {
	float: left;
	width: 100%;
	height: 154px;
	position: relative;
	float: left;
	background: url('../images/rocks-bg.jpg');
}

#advert #tlnick {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 100;
}

#advert #brnick {
	position: absolute;
	bottom: 0px;
	right: 0px;
	z-index: 100;
}

#advert #clickhere{
	width: 183px;
	height: 38px;
	background: url('../images/chere-bg.png');
	position: absolute;
	bottom: 0px;
	right: 0px;
	z-index: 1;
}

#advert #clickhere img {
	width: 183px;
	height: 38px;
}

p.topPara {
	font-weight: bold;
}

p#address:first-line {
	font-weight: bold;
}

p.quote {
	position: relative;
	font-style: italic;
	line-height: 15pt;
	padding: 10px 25px 2px 25px;
	color: #000;
}

p.quote img.open {
	position: absolute;
	top: 10px;
	left: 8px;
}

p.quote img.close {
	position: absolute;
	bottom: 10px;
	right: 8px;
}

#content p {
	line-height: 12pt;
}

#content ul {
	margin-left: 10px;
	list-style-type: disc;
	list-style-position: inside;	
}

#content ul li{
	padding: 3px 5px 3px 5px;	
}

/*	=7:	[SIDEBAR COLUMN] ----------------------------------*/	

#bodyRHS {
	float: left;
	width: 162px;
	padding: 8px 4px 10px 4px;
	border-left: 1px solid #cfcfcf;
}

#bodyRHS p {
	font-size: 8pt;
}

#bodyRHS a,#bodyRHS a:visited {
	color: #C0C000;
	text-decoration: none;
}
#bodyRHS a:hover {
	color: #C0C000;
	text-decoration: underline;
}

/*	=8:	[FOOTER] ------------------------------------------*/	

#footer {
	float: left;
	width: 100%;
}

#footer-top {
	float: left;
	width: 100%;
	height: 21px;
	background: url('../images/footertop-bg.gif') top left no-repeat;
}

#footer-bottom {
	width: 100%;
	float: left;
	background: url('../images/footerbottom-bg.gif') top left no-repeat;
	font-size: 7pt;
}

#footer-bottom a#creator {
	margin-left: 25px;
	display: block;
	clear: both;
}

#footer-bottom p {
	margin-top: 5px;
	color: #666666;
}

#footer-bottom img {
	float: right;
	margin: 3px;
}

/*	=9:	[LISTS] -------------------------------------------*/	

/*	=10: [FORMS] ------------------------------------------*/	

form {margin-bottom: 0px;}

#contact {

}
#contact td.label {
	text-align: right;
	vertical-align: top;
	font-weight: bold;
}
#contact td.data {
	text-align: left;
	vertical-align: top;
}
#contact td.data small {
	text-align: center;
}

.gMapWrap {
	padding: 10px 0 10px 10px;
	float: left;
}

#map {
	width: 260px;
	height: 260px;
	border: 1px solid #AAA;
}

/*	=11: [IMAGES] -----------------------------------------*/	

img {border: 0px; display: block;}	
img.inline { display: inline; }

/*	=12: [MISC] -------------------------------------------*/	

.red { color: #cc0000; }
.blue { color: #00FF00; }
.green { color: #0000FF; }
.black { color: #000000; }
.white { color: #FFFFFF; }
.grey { color: #CCCCCC; }