/******************************************************
	Typography  CSS document 
	Marius Nel	
	- KRAZYBOYZ digital	-
******************************************************/

/* Code to make web page 100% height  in browser window	*/ 
html, body{height:100%;} 

html>body #siteWrapper
{
	height: auto;
} 

/* Code to reset elements margin and padding to zero  */ 
* {
	margin: 0;
	padding: 0;
	}
	
a img {
	border: none;
	}

body {
	background: transparent top left repeat-x url(../img/masthead_bg.gif);
	}
	
div#siteWrapper {
	position: relative;
	margin: 0 auto;
	width: 948px;
	/* Footer Clearing Code */
	margin-bottom: -75px !important;
	height: 100%;
	min-height: 100%;
	z-index: 999;
	}
		
	table#header {
		height: 100px;
		width: 948px;
		position: relative;
		z-index: 999;
		}
		
		a img.logo {
			padding-left: 11px;
			}
			
		* html a img.logo {
			padding-left: 10px;
			}
			
		img.name {
			padding-top: 35px;
			}
			
	table#intro {
		height: 189px;
		width:948px;
		zbackground: transparent top left no-repeat url(../img/intropic.jpg);
		color: #000;
		}
		
		table#intro td p {
			margin: 10px 0 0 0;
			width: 680px;
			}
			
		table.login, table.search {
			border-top: 1px solid #E8ECF2;
			border-right: 1px solid #E8ECF2;
			border-left: 1px solid #E8ECF2;
			}
			
			table.login, table.search { height: 30px; }
			
			table#intro table.login td img, table#intro table.search td img, input.go {
				padding-top: 0;
				margin: 0 5px !important;
				}
				
		table.search {
			margin-left: 10px;
			}
		
	div#contentWrapper {
		position: relative;
		clear: both;
		z-index: 0;
		display: block;
		visibility:visible;
		}
		
	div.pageContent {
		float: left;
		position: relative;
		clear: both;
		background: transparent top left no-repeat url(../img/content_top_bg.jpg);
		width: 924px;
		padding: 12px;
		}
	
	table th.highlighted {
		height: 20px;
		padding-left: 10px;
		background-color: #D1DCBE;
		color: #6B8047;
		font-size: 12px;
	}
	
	table td.highlighted {
		border: 1px solid #D1DCBE;
		background-color: #F1F7E6;
		padding: 10px;
	}
	
	div .gallery {
		float: left;
		position: relative;
		clear: left;
		width: 150px;
	}
		
	table.threeCol {
		width: 924px;
		}
		
	div.wrapper {
		position: relative;
		zfloat: left;
		margin-bottom: 2em;
		width: 297px;
		}
		
		div.section { 
			border: 1px solid #E9D8B9;
			float: left;
			padding: 4px 8px 20px 8px;
			width: 280px;
			background: #FFF;
			margin-bottom: -7px;
			text-align: left;
			font-size: 10px;
			z-index: -1;
			}
			
			div.dash {
				position: relative;
				height: 1px;
				border-bottom: 1px dashed #D9D9D9;
				width: 100%;
				margin-bottom: 1em;
				}
			
			a.link {
				padding: 3px;
				background: #F8F8EC;
				border: 1px solid #E9D8B9;
				margin: 0 auto !important;
				position: relative;
				text-align: center;
				z-index: 9;
				}
 
		a img.block {
			padding: 5px !important;
			border: 1px solid #E6E5E5;
			position: relative;
			clear: both;
			background-color: #FFF;
			}
			
			.block {
				padding: 5px !important;
				border: 1px solid #E6E5E5;
				position: relative;
				clear: both;
				margin-bottom: 2em;
				background-color: #FFF;
				}
			
			.inner {
				background: inherit;
				padding: 5px;
				text-align: left;
				font-size: 10px;
				}
				
			.copy {
				padding-right: 20px;
				}
			
			td.copy table.hL, div.section table.hL {
				width:100%;
				clear:both;
			}

		.thumbs {
			padding: 5px !important;
			border: 1px solid #E6E5E5;
			position: relative;
			float: left;
			margin: 0 2px;
			background-color: #FFF;
			}
			
		table.Output {
			padding: 5px !important;
			border: 1px solid #E6E5E5;
			position: relative;
			clear: both;
			width: 298px;
			margin-bottom: -7px;
			background-color: #FFF;
			}
			
		table.panel {
			padding: 5px !important;
			border: 1px solid #E6E5E5;
			position: relative;
			clear: both;
			width: 298px;
			background-color: #FFF;
			}
			
			table.panel td.copy { padding-bottom: 17px !important; }
			
		.yelloBlock {
			padding: 10px 25px;
			border-top: 1px dashed #D9D9D9;
			border-bottom: 1px dashed #D9D9D9;
			margin-bottom: 2em;
			background-color: #F9F9F0;
			}
			
		.copyBlock  {
			position: relative;
			border-bottom: 1px solid #EEE;
			float: left;
			clear: both;
			margin-bottom: 10px;
			width: 100%;
			}
			
		table.Output td.copy, table.panel td.copy {
			padding: 10px;
			text-align:left !important;
			}
		
		th {
			width: 100%;
			text-align: left;
			}
			
		table.stats {
			margin-bottom: 1em;
			}
			
		table.stripeMe, table.stripeMe2, table.blueStripe {
			margin-bottom: 2em;
			position: relative;
			float: left;
			width: 100%;
			}
			
		table.stripeMe td, table.stripeMe2 td, table.blueStripe td, div.blueStripe, div.header, div.gen  {
			padding: 12px 9px;
			}
			
		table.formStructure td {
			padding: 3px !important;
			}
			
		table.formStructure table.form td {	padding: 0 !important; margin: 0 !important; }
		
		.blueStripe, div.header, div.gen { width: 570px; }
		
		.blueStripe table td { padding: 0 !important; margin: 0 !important; }
		
		div.blueStripe { width: 570px; }
			
		.focus { background-color: #F0F5F4 !important;	}
		.hidden, hide { display: none;}
		
		td.hidden { width: 100%; }
		
		div.staffInfo {
			margin-bottom: 2.5em;
			padding-bottom: 1em;
			}
		
		img.staff {
			float: left;
			margin: 0 8px 8px 0;
			background-color: #FFF;
			border: 1px solid #BFD0CD !important;
			padding: 1px;
			}
			
		div.staffInfo div.hidden { clear: both; }

		div .galleryWrapper {
			width: 500px;
		}

		div.galleryItemOld {
			float: left;
			margin: 0 50px 20px 10px;
			}
		div .galleryItem {
			float: left;
			position: relative;
			zclear: left;
			width: 150px;
			padding: 5px;
		}
		
			div.galleryItem img {
				background-color: #FFF;
				border: 1px solid #BFD0CD !important;
				padding: 1px;
				margin-bottom: 4px;
				}
				
		div .galleryItem .caption {
			width: 150px;
		}			
		
		table.faqBlock {
			position: relative;
			float: left;
			clear: both;
			}
		
		table.faqBlock td { 
			border: 1px solid #E0E0E0; 
			background: #4A7972;
			color: #FFF;
		
			}
		
		table.faqBlock td.copy{ 	
			padding: 10px 8px;
			color: #FFF;
			}
			
		table td.navblock {
			zbackground-color: #F3F5F5;
			padding: 5px;
			}
			
	.rightPic {
		padding: 1px;
		background: #FFF;
		border: 1px solid #497973;
		float: right;
		margin-left: 15px;
		margin-bottom: 10px;
		}
		
	.subNav {
		margin-top: 20px;
		clear: both !important;
		}
			
	div#footer {
		width: 945px;
		height: 156px;
		display: block;
		background: transparent top left no-repeat url(../img/footer_bg.jpg);
		margin: 0 auto;
		position: relative;
		}
		
	div#footerLinks {
		margin: 0 auto;
		}
	
	#clearBottom {/*needed to make room for footer*/
		clear: both;
		height: 50px;
		}

* > html #clearBottom {float:left; width: 100%;}/* ie mac styles */	

.clr {
	clear: both !important;
	position:relative;
	margin-top: 10px;
	}

.margT {
	margin-top: 2em !important;
	}
.margB {
	margin-bottom: 0.5em;
	}
.margL {
	margin-left: 25px;
	}
.pad {
	padding: 5px;
	}
	
	
.bordr {
	border: 1px solid #E6E5E5;
	}
.floatR {
	float: right !important;
	}
.rght {
	float: right !important;
	clear: right;
	}	

.yello {
	background-color: #F9E3A9;
	}
.cream {
	background-color: #FCF0D0;
	}
.blue {
	background-color: #C2CEDC;
	}
.lghtBlue {
	background-color: #DEE4EC;
	}
.turq {
	background-color: #497973;
	}	
.odd {
	background-color: #F9F9F0;
	border-bottom: 1px dashed #D9D9D9;
	border-top: 1px dashed #D9D9D9;
	}
	
.formStructure td.odd {
	background-color: #F9F9F0;
	}	
	
.indent { margin-left: 42px; }
	
.plain {
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	border-bottom: none !important;
	}
	
.hide { display: none; }
.visible { display: inline; }
	
.bottom {
	border: none !important;
	background: transparent center left repeat-x url(../img/line.png) !important;
	}
.paginator {
	border: none !important;
	background: transparent center;
	}
.lines {
	padding: 7px 0;
	border-top: 1px solid #E5DFD1;
	border-bottom: 1px solid #E5DFD1;
	width: 100%;
	margin-bottom: 2em;
	}

.Output {
	float: left;
	}

.topB {
	border-top: 1px solid #CCC;
	}
	
.dashed { 	border-top: 1px dashed #D9D9D9; }

.clearR { clear: right; }

.active {
	font-weight:bold;
}