/****** ##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%;
	}

	body {		
		text-align: center;
		margin: 0px;
		padding: 0px; 
		background: #000000;
		border: none; 
		height: 100%;
		width: 100%;
	}
	
	
	body,table, tr,td {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 11px;
	}
	
	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: #aaaaaa;
		text-decoration: none;
	}
	
	a:visited {
		text-decoration: none;
		color: #cccccc;
	}
	
	a:hover {
		text-decoration: none;
		color: #777777;
	}
	
	a:active {
		text-decoration: none;
		color: #cccccc;
	}

	a:focus { outline: none; }
		
	a img {
		border: none; 
		background: transparent;
	}	


/*end*/

	
/*
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
||
||			Container Styles
||
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
*/
	
	/* Site Container */	
	#centerCon {
		text-align: center;
		height: 100%;
		width: 100%;
		
	}
	
	
	.preloader {
		line-height: 0px; 		
		height: 0px; 		
		overflow: hidden; 
		
	}
	
	/* Site Container */	
	#siteCon {
		position: relative;
		background: #ffffff;
		margin: auto;
		padding: 0px; 
		width: 647px;
		height: 100%;
		min-height: 100%;
		border: none;
		overflow: visible;
	}
	
	div > #siteCon {
		height: auto;
	}
	
	
	
	
	
	
/*
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
||
||			Header
||
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
*/
		#headerCon {
			position: relative;
			width: 647px;
			height: 130px;
			
			background: url(../images/template/revelation_clouds.jpg) top center no-repeat;
		}	
		
		
		
	
/*
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
||
||			Menus
||
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
*/		
		
		
	/* Top Menu */
	
		#topMenuCon {
			position: relative;
			width: 647px;
			text-align: left;
			padding-top: 13px; 
			
		}	
		
			#revelation, #news, #portfolio, #about, #contact {
				position: relative; 
				display: block; 
				left: 15px; 
			}
		
			#revelation {
				
				width: 471px; 
				height: 81px; 
				background: url(../images/template/main_menu/revelation.gif) left  0px no-repeat;
			}
				
			#news {
				
				width: 485px; 
				height: 65px; 
				background: url(../images/template/main_menu/news.gif) top no-repeat;
			}
				#news:hover {
					background: url(../images/template/main_menu/news_rollover.gif) top no-repeat;
				}
				
				
				
			#portfolio {
				 
				width: 485px; 
				height: 97px; 
				background: url(../images/template/main_menu/p_and_a.gif) top left no-repeat;
			}
				#portfolio:hover {
					background-image: url(../images/template/main_menu/p_and_a_portfolio_rollover.gif) top no-repeat;
				}
			
			#about {
				
				width: 485px; 
				height: 61px; 
				background: url(../images/template/main_menu/p_and_a.gif) bottom left  no-repeat;
			}
				#about:hover {
					background: url(../images/template/main_menu/p_and_a_about_rollover.gif) bottom no-repeat;
				}
			
			#contact {
				
				width: 485px; 
				height: 70px; 
				background: url(../images/template/main_menu/contact.gif) top no-repeat;
			}
				#contact:hover {
					background: url(../images/template/main_menu/contact_rollover.gif) top no-repeat;
				}
			
			
		
	/* Side Menu */			
	
		#sideMenuCon {
			position: relative;
			
			width: 170px;
			text-align: left;
			float: left;
		}	
		
		
			
/*
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
||
||			Body
||
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
*/	

		
	
		#centerBodyCon {
			position: relative;
			
		}	

					
			#bodyCon {
				position: relative;
				text-align: left;
				color: #444444;
			
			}
			
				#portfolio_content {
					text-align: center; 
					width: 470px; 				
					overflow: hidden;
					float: right; 
					
					padding-top: 10px; 
				}
				
				
				
				.news div {
					
					margin: 20px;
					padding: 20px 0px 20px 0px; 
					
					border-style: dotted;
					border-width: 1px 0px 1px 0px;
					border-color: #b31442;
					
					font-weight: bold;
				}
				
					.news div p {
						padding-left: 62px;
						font-weight: normal;
					}
					
			
			
		form {
			margin: 0px; 
			padding: 0px; 			
		}
		
	
		
/*
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
||
||			Footer
||
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
*/	
		
		#footerCon {
			width: 647px;
			height: 20px;
			clear: both;
			color: #ffffff;
			text-align: center;
		}	
		
		#footerCon a {
			color: #ffffff;
		}
		
		
		
	
/*
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
||
||			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: #cccccc;
	}
	
	h1 {
		font-size: 16px; 
	}
	h2 {
		font-size: 14px; 
	}
	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: 2px solid #333333;
		padding: 2px;
	}		
	
/* 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.	
*/
 
 
 
 
#page_1 { 
	display: block; 
	width: 170px; 
	height: 16px; 
	background: url(../images/template/page_numbers/page_1.gif) -5px center no-repeat; 
} 

	#page_1:hover { 
		background: url(../images/template/page_numbers/page_1_rollover.gif) -0px center no-repeat; 
 	}
 	
#page_2 { 
	display: block; 
	width: 170px; 
	height: 16px; 
	background: url(../images/template/page_numbers/page_2.gif) -5px center no-repeat; 
} 

	#page_2:hover { 
		background: url(../images/template/page_numbers/page_2_rollover.gif) -0px center no-repeat; 
 	}

#page_3 { 
	display: block; 
	width: 170px; 
	height: 16px; 
	background: url(../images/template/page_numbers/page_3.gif) -5px center no-repeat; 
} 

	#page_3:hover { 
		background: url(../images/template/page_numbers/page_3_rollover.gif) -0px center no-repeat; 
 	} 	
 	
 	
 	
 	
 	
 	
 	
 	
 	
 	
 	
 	
 
 
 
#above_bored { 
	display: block; 
	width: 170px; 
	height: 16px; 
	background: url(../images/template/portfolio_menu/above_bored.gif) -7px center no-repeat; 
} 

	#above_bored:hover { 
		background: url(../images/template/portfolio_menu/above_bored_rollover.gif) -7px center no-repeat;
 	}

#adage { 
	display: block; 
	width: 170px; 
	height: 16px; 
	background: url(../images/template/portfolio_menu/adage.gif) -7px center no-repeat; 
} 

	#adage:hover { 
		background: url(../images/template/portfolio_menu/adage_rollover.gif) -7px center no-repeat;
 	}

#adelaide { 
	display: block; 
	width: 170px; 
	height: 16px; 
	background: url(../images/template/portfolio_menu/adelaide.gif) -7px center no-repeat; 
} 

	#adelaide:hover { 
		background: url(../images/template/portfolio_menu/adelaide_rollover.gif) -7px center no-repeat;
 	}

#barron { 
	display: block; 
	width: 170px; 
	height: 16px; 
	background: url(../images/template/portfolio_menu/barron.gif) -7px center no-repeat; 
} 

	#barron:hover { 
		background: url(../images/template/portfolio_menu/barron_rollover.gif) -7px center no-repeat;
 	}

#breathe { 
	display: block; 
	width: 170px; 
	height: 16px; 
	background: url(../images/template/portfolio_menu/breathe.gif) -7px center no-repeat; 
} 

	#breathe:hover { 
		background: url(../images/template/portfolio_menu/breathe_rollover.gif) -7px center no-repeat;
 	}

#c_kennedy { 
	display: block; 
	width: 170px; 
	height: 16px; 
	background: url(../images/template/portfolio_menu/c_kennedy.gif) -7px center no-repeat; 
} 

	#c_kennedy:hover { 
		background: url(../images/template/portfolio_menu/c_kennedy_rollover.gif) -7px center no-repeat;
 	}

#carlton { 
	display: block; 
	width: 170px; 
	height: 16px; 
	background: url(../images/template/portfolio_menu/carlton.gif) -7px center no-repeat; 
} 

	#carlton:hover { 
		background: url(../images/template/portfolio_menu/carlton_rollover.gif) -7px center no-repeat;
 	}

#ebm { 
	display: block; 
	width: 170px; 
	height: 16px; 
	background: url(../images/template/portfolio_menu/ebm.gif) -7px center no-repeat; 
} 

	#ebm:hover { 
		background: url(../images/template/portfolio_menu/ebm_rollover.gif) -7px center no-repeat;
 	}

#er { 
	display: block; 
	width: 170px; 
	height: 16px; 
	background: url(../images/template/portfolio_menu/er.gif) -7px center no-repeat; 
} 

	#er:hover { 
		background: url(../images/template/portfolio_menu/er_rollover.gif) -7px center no-repeat;
 	}

#evan { 
	display: block; 
	width: 170px; 
	height: 16px; 
	background: url(../images/template/portfolio_menu/evan.gif) -7px center no-repeat; 
} 

	#evan:hover { 
		background: url(../images/template/portfolio_menu/evan_rollover.gif) -7px center no-repeat;
 	}

#francess { 
	display: block; 
	width: 170px; 
	height: 16px; 
	background: url(../images/template/portfolio_menu/francess.gif) -7px center no-repeat; 
} 

	#francess:hover { 
		background: url(../images/template/portfolio_menu/francess_rollover.gif) -7px center no-repeat;
 	}

#healthy { 
	display: block; 
	width: 170px; 
	height: 16px; 
	background: url(../images/template/portfolio_menu/healthy.gif) -7px center no-repeat; 
} 

	#healthy:hover { 
		background: url(../images/template/portfolio_menu/healthy_rollover.gif) -7px center no-repeat;
 	}

#home_base { 
	display: block; 
	width: 168px; 
	height: 16px; 
	background: url(../images/template/portfolio_menu/home_base.gif) -7px center no-repeat; 
} 

	#home_base:hover { 
		background: url(../images/template/portfolio_menu/home_base_rollover.gif) -7px center no-repeat;
 	}

#journey { 
	display: block; 
	width: 170px; 
	height: 16px; 
	background: url(../images/template/portfolio_menu/journey.gif) -7px center no-repeat; 
} 

	#journey:hover { 
		background: url(../images/template/portfolio_menu/journey_rollover.gif) -7px center no-repeat;
 	}

#konstruct { 
	display: block; 
	width: 170px; 
	height: 16px; 
	background: url(../images/template/portfolio_menu/konstruct.gif) -7px center no-repeat; 
} 

	#konstruct:hover { 
		background: url(../images/template/portfolio_menu/konstruct_rollover.gif) -7px center no-repeat;
 	}

#lawley { 
	display: block; 
	width: 170px; 
	height: 16px; 
	background: url(../images/template/portfolio_menu/lawley.gif) -7px center no-repeat; 
} 

	#lawley:hover { 
		background: url(../images/template/portfolio_menu/lawley_rollover.gif) -7px center no-repeat;
 	}

#lexus { 
	display: block; 
	width: 170px; 
	height: 16px; 
	background: url(../images/template/portfolio_menu/lexus.gif) -7px center no-repeat; 
} 

	#lexus:hover { 
		background: url(../images/template/portfolio_menu/lexus_rollover.gif) -7px center no-repeat;
 	}

#looking_glass_films { 
	display: block; 
	width: 168px; 
	height: 16px; 
	background: url(../images/template/portfolio_menu/looking_glass_films.gif) -7px center no-repeat; 
} 

	#looking_glass_films:hover { 
		background: url(../images/template/portfolio_menu/looking_glass_films_rollover.gif) -7px center no-repeat;
 	}

#osram { 
	display: block; 
	width: 170px; 
	height: 16px; 
	background: url(../images/template/portfolio_menu/osram.gif) -7px center no-repeat; 
} 

	#osram:hover { 
		background: url(../images/template/portfolio_menu/osram_rollover.gif) -7px center no-repeat;
 	}

#p_clinic { 
	display: block; 
	width: 170px; 
	height: 16px; 
	background: url(../images/template/portfolio_menu/p_clinic.gif) -7px center no-repeat; 
} 

	#p_clinic:hover { 
		background: url(../images/template/portfolio_menu/p_clinic_rollover.gif) -7px center no-repeat;
 	}

#rockingham { 
	display: block; 
	width: 170px; 
	height: 16px; 
	background: url(../images/template/portfolio_menu/rockingham.gif) -7px center no-repeat; 
} 

	#rockingham:hover { 
		background: url(../images/template/portfolio_menu/rockingham_rollover.gif) -7px center no-repeat;
 	}

#starsurf { 
	display: block; 
	width: 170px; 
	height: 16px; 
	background: url(../images/template/portfolio_menu/starsurf.gif) -7px center no-repeat; 
} 

	#starsurf:hover { 
		background: url(../images/template/portfolio_menu/starsurf_rollover.gif) -7px center no-repeat;
 	}

#surfing { 
	display: block; 
	width: 170px; 
	height: 16px; 
	background: url(../images/template/portfolio_menu/surfing.gif) -7px center no-repeat; 
} 

	#surfing:hover { 
		background: url(../images/template/portfolio_menu/surfing_rollover.gif) -7px center no-repeat;
 	}

#taksu { 
	display: block; 
	width: 170px; 
	height: 16px; 
	background: url(../images/template/portfolio_menu/taksu.gif) -7px center no-repeat; 
} 

	#taksu:hover { 
		background: url(../images/template/portfolio_menu/taksu_rollover.gif) -7px center no-repeat;
 	}

#trend { 
	display: block; 
	width: 170px; 
	height: 16px; 
	background: url(../images/template/portfolio_menu/trend.gif) -7px center no-repeat; 
} 

	#trend:hover { 
		background: url(../images/template/portfolio_menu/trend_rollover.gif) -7px center no-repeat;
 	}

#wekyso { 
	display: block; 
	width: 170px; 
	height: 16px; 
	background: url(../images/template/portfolio_menu/wekyso.gif) -7px center no-repeat; 
} 

	#wekyso:hover { 
		background: url(../images/template/portfolio_menu/wekyso_rollover.gif) -7px center no-repeat;
 	}

#westwets { 
	display: block; 
	width: 170px; 
	height: 16px; 
	background: url(../images/template/portfolio_menu/westwets.gif) -7px center no-repeat; 
} 

	#westwets:hover { 
		background: url(../images/template/portfolio_menu/westwets_rollover.gif) -7px center no-repeat;
 	}