/****** ##LOG: 
Author:  Dan Urquhart
Version: 1.0

This template has been made to be as simple to use as possible. Everything does have a place! Make sure you put things where they need to be.

Some rules:

-try not make multiple references o single elements: keeping all the stlyes of an element in one place keeps it from getting over styled or overlooked. 
-try to comment on what does what

Created: March 2007
******/
	
/*
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
||
||			IMPORTANT BODY TAGS!!!!
||
||			***PUT THE BODY TAGS HERE AND NOT IN THE MAIN FILES!!***
||
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
*/

html {
		border: none; 
		margin: 0px; 
		padding: 0px;
		height: 100%; 
		width: 100%;
		
	}
	 
	* html html { overflow: auto; }
	

	body {		
		text-align: center;
		margin: 0px;
		padding: 0px; 
		background: #000000 url(../images/template/background.gif) scroll top center repeat-x;
		border: none; 
		height: 100%;
		width: 100%;
		
	}
	
	
	body,table, tr,td, ul, li {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
		color: #ffffff; 
	}
	
	p {
		margin: 0px; 
		padding: 0px; 
		margin-top: 5px; 
		
	}
	
	
/*		
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
||
||			LINKS
||
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
* When adding links make sure you include all 4 link stages 
	(normal,hover,visited,visited:hover)
*/
	
	
/*		
	THE FOLLOWING STYLES ARE FOR ALL LINKS ON THE SITE!!!
*/
	a:link {
		color: #dddddd;
		text-decoration: none;
	}
	
	a:visited {
		text-decoration: none;
		color: #cccccc;
	}
	
	a:hover {
		text-decoration: none;
		color: #ffffff;
	}
	
	a:active {
		text-decoration: none;
		color: #cccccc;
	}


	a:focus { outline: none; }
		


/*end*/

	
/*
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
||
||			Container Styles
||
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
*/
	
	/* Site Container */	
	#centerCon {
		text-align: center;
		height: 100%;
		width: 100%;		
		overflow: visible; 
	}
	
	
	
	/* Site Container */	
	#siteCon {
		position: relative;
		background: #7b7c77 url(../images/template/bodybg.jpg) center 183px no-repeat;
		margin: auto;
		padding: 0px; 
		width: 800px;
		height: 100%;
		min-height: 100%;
		border: none;
		overflow: visible;
	}
	
	div > #siteCon {
		height: auto;
	}
	
	
/*
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
||
||			Header
||
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
*/
		#headerCon {			
			width: 100%;
			height: 183px;
			background: #777777 url(../images/template/background.gif) top center repeat-x;
			
			text-align: center; 
		}	
		
			#headerCon img, #headerCon a, #headerCon a img  {
				border: none; 
			}
			#header, #header:link, #header:active, #header:visited, #header:hover, #header:focus {
				border: none; 
				display: block; 
				height: 150px; 
				background: url(../images/template/header.jpg) center top no-repeat; 
			}
		
		
		
	
/*
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
||
||			Menus
||
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
*/		
		
		
	/* Top Menu */
	
		#topMenuCon {	
			margin: auto; 
			width: 504px;	
			height: 33px; 
			line-height: 33px; 
			text-align: center;
			background: #444444 url(../images/template/background.gif) 0px -150px repeat-x;
			border: none; 
			
			border-right: 1px solid #333333; 

		}	
		
			#topMenuCon a, #topMenuCon a:link, #topMenuCon a:active, #topMenuCon a:visited {
				color: #ffffff; 
				font-weight: bold; 
				font-size: 14px; 
				line-height: 32px; 
				height: 32px;
				margin-top: 1px; 
				width: 125px; 
				float: left; 
				display: block; 
				border-top: none; 
				border-left: 1px solid #333333; 
			
				text-align: center;
			}
				
			#topMenuCon a:hover {
				color: #ffffff; 
				background: #222222; 
			}
				
	
			
/*
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
||
||			Body
||
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
*/	

		
	
		#centerBodyCon {
			position: relative;
			width: 800px;			
						
			margin: auto; 
			
			
		}	
			

					
			#bodyCon {
				position: relative;
				text-align: left;
				padding: 30px;
				width: 740px;					
				
			}
			
			#bodyCon img {
				display: block; 
				margin: auto; 
				border: 1px solid #999999; 		 
				
				
			}
			
			.hero {
				display: block; 
				margin: auto; 
				border: 1px solid #777777; 			
			}
			
			.largeCopy {
				
				font-size: 12px; 
				font-weight: bold; 
			}	
			
			
			
			label {
				width: 300px;
				 
				text-align: left; 
				display: block; 
				
			}
			.formfields {
				display: block; 
				width: 290px; 
							
			}
			
						
			
			select {
				width: 290px; 				
			}
			
			#option1, #option2, #option3, #option4, #option5, #option6, #option7, #option8, #option9 {
				width: 15px; 
				height: 15px; 
				overflow: auto; 
				display: block; 
				float: left;				
				
				padding: 0px; 
				margin: 2px; 
				
				
			}
			
			.inlineCheckbox {
				width: 271px; 
				float: left; 
			}
			
			#submit {
				
				clear: both; 
			}
			
			
			#rightCol {
				width: 250px; 
				padding-left: 52px; 
				padding-right: 90px; 
				text-align: center; 
				float: left; 
				line-height: 12px; 
				
			}
			
			
			.colConBare {
				width: 370px; 
				float: left;
				
			}
			
			.listCol {			
				
				width: 44%; 
				float: right; 
				margin-bottom: 7px; 
			}
			
			.colCon {					
				width: 335px; 
				float: left;				
				padding: 10px 17px 10px 17px; 
			}
			
			#footerImg {
				border: none; 
				border: 1px solid red; 
			}
			
		form {
			margin: 0px; 
			padding: 0px; 			
		}
		
		input, textarea {
			border-left: 1px solid #222222;
			border-top:  1px solid #222222;
			border-right: 1px solid #cccccc;
			border-bottom: 1px solid #cccccc;
			background: #dddddd;
			overflow: auto;
		}
	
		
		#submit {
			background: #eeeeee;
			border-left: 1px solid #cccccc;
			border-top:  1px solid #cccccc;
			border-right: 1px solid #222222;
			border-bottom: 1px solid #222222;
			
		}
/*
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
||
||			Footer
||
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
*/	
		
		#footerCon {
			clear: both; 
			color: #cccccc; 
			height: 20px; 
			margin-top: 20px; 
			padding-top: 20px; 
			line-height: 20px; 
			text-align: center; 
			width: 100%; 
		}	
		
		
		
		
		
	
/*
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
||
||			HEADERS
||
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
*/

	h1,h2,h3,h4,h5,h6 {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		padding: 0px; 
		margin: 0px;
		margin-bottom: 10px; 
		margin-top: 15px; 
		color: #ffffff;
	}
	
	h1 {
		text-align: center; 
		font-size: 16px; 
	}
	h2 {
		font-size: 14px; 
		text-align: center; 
	}
	h3 {
		font-size: 12px; 
	}
	
	
/*
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
||
||			ADDITIONAL STYLES
||
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]



		
	/* Small Text */		
		.smallText, .textSmall {
		font-size: smaller;
		}
		
	/* Required Text */	
	/* Use to denote user alert text. eg required fields in forms, this should be set smaller than the normal font*/	
		.textReqd, .requiredStar {
		color: #ff0000;
		font-size: 0.8em;
		}		
		
	
	/* Footer Text */	
		.textFooter {
		font-size : 0.8em;
		color: #000000;
		font-weight: bold;
		}	
	
	

	

	
/*
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
||
||			OTHER STYLES - MODIFIERS
||
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
*/	
	
	
	
/* Horizontal Rule */
	hr {
		background-color: #000000; 
		border: 0px; 
		height: 1px;
		color: #000000;
	}			
	
/* Unordered List */	
	ul {
		color: #000000;
		list-style-type : disc;
	}
	
/* Ordered List */	
	ol {
		color: #000000;
	}
	
/* Add cursor to elements */
	.cursor { cursor: pointer; }
	
		
/*
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
||
||			QUICK STYLES - MODIFIERS
||			Use these instead of inlines to make sure the same style works across the whole site
||
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
*/		
	
	
/* Clear Both VERY IMPORTANT */	
	.clearBoth {
		clear: both;	
	}
	
/* Style / Border Images */	
	.styleImg {
		border: 1px solid #777777; 				
		
	}		
	
/* Float Left */	
	.floatLeft {
		float: left;
	}
	
/* Pad Left */
	.paddLeft {
		margin-left: 4px;
	}
	
/* Pad Right */
	.paddRight {
		margin-right: 12px;
	}

	
	
	
	

		
/*
If you are putting somthing into this sytle sheet page then it more than
likely has a home. 
				
don't simple include it at the bottom of the page.
				
Have a look at the page and look for the proper place for the variable that 
you are including.
				
If you can not find a place that looks right for the variable you are including
then create a spot for it somewhere that seems to fit and remember to include a 
header for your new section as well as remembering to comment what your variable 
is used for.	
*/