/*********************
Title: Template 12 CSS 
Author: James Barwell  
Date: February 2008    
*********************/

/* INDEX 

1= : HEADER
2= : BODY
3= : FOOTER
4= : TYPOGRAPHY
5= : NAVIGATION
*/


* {margin:0; padding:0;}

body {
	font: 68.75% verdana, arial, sans-serif;
	background: #1D1D1D url(../images/bgheader.gif) 0 0 repeat-x;
	color: #333333;

}

html>body {
	font-size: 11px;
	line-height: 2em;
}


/*** 1= : HEADER ***/

#header {
	width: 768px;
	height: 110px;
}

/* Image replacement for header */
	#header #logotext {
		float: left;
		height: 110px;
		width: 403px;
		text-indent: -5000px;
		background: url(../images/logo.jpg) 0 0 no-repeat;
	}
	
	#header #introtext {
		float: left;
		height: 110px;
		width: 364px;
		text-indent: -5000px;
		background: url(../images/introtext.jpg) 0 0 no-repeat;
	}


/*** 2= : BODY ***/

#contentcontainer {
	background: #FFFFFF url(../images/bgcontent.gif) repeat-x; /* blue gradient */
	width: 100%;

}

		#content {
			width: 726px;
			padding-top: 2em;
			margin-left: 42px;
		}
	
		#navigation {
			float: right;	
			width: 190px;
			margin-top: 0;
			
			/* Set bottom margin to 3em if menu contains an odd number of items */
			margin-bottom: 2em;
			margin-left: 20px;
			margin-right: 10px;
			background: url(../images/bgmenu.gif) top no-repeat;
			overflow: hidden;
		}
		
		#navigation ul {
			background: url(../images/bgmenubottom.gif) bottom no-repeat;
		}
	
		#alpha_col {
			float: left;
			width: 343px;
			padding-right: 20px;
			/* Photo at bottom of column. This can be moved to beta if required. Adjust padding to control distance of photo from text*/
			padding-bottom: 140px;
			background: url(../images/alpha_image.jpg) bottom no-repeat;
			/*display: none;*/
		}
		
		#beta_col {
			float: left;
			width: 343px;
			padding-right: 20px;
			/*display: none;*/
		}

		#gamma_col {
			display: none;
			/*
			min-height: 200px;
			float: left;
			width: 706px;
			padding-right: 20px;
			margin-top: 20px;
			*/		
		}


/*** 3= : FOOTER **/

#footer {
	clear: left;
	background: #1D1D1D url(../images/bgfooter.gif) 0 0 repeat-x;
	width: 100%;
	padding-top: 14px;
}

	#footer p {
		margin: 40px 0 0 405px;
		color: #cccccc;
		display: inline;
	}
	

/*** 4= : TYPOGRAPHY ***/

/* h1 used for page title image replacement */

h2 {
	font-size: 1.818em; /* 20px */
	line-height: 1.1em;
	margin-bottom: 1.1em;
}

h3, h4, h5, h6 {
	font-size: 1.454em; /* 16px */
	line-height: 1.375em;
}

	h3 {
		padding-left: 13px;
		background: url(../images/bullet_square.gif) 0  no-repeat;
	}

#content p {
	font-size: 1em; /* 11px */
	line-height: 2em;
	margin-bottom: 2em;
}

a {
	color: #cccccc;
	text-decoration: none;
}

	a:hover {
		color: #00CCFF;
	}


/*** 5= : NAVIGATION ***/

#navigation ul {
	list-style: none;
	margin-top: 1em; 
	padding-bottom: 1em; 
}

	#navigation li a {	
		display: block;
		margin-left: 15px;
		padding-left: 13px;
		font-size: 1.454em; /* 16px */
		line-height: 2.062em;
		color: #FFFFFF;
		text-decoration: none;
	}
	
	#navigation li a.active, #navigation li a:hover {
		background: url(../images/bullet_square.gif) 0  no-repeat;
		color: #00CCFF;
	}