/**********************************************
 ******************* MASTER *******************
**********************************************/

/* Created: 21 Sep 2009 & 11am
 * Author: Joshua Deidun <www.ivt.com.au>
*/

/*	TOC
 *	1. Colors
 *	2. Reset
 *	3. Links
 *	4. Typography
 *	5. Structure
*/


/*	1. COLORS
 *	----------------------------------------------
 *	blue		=		#1c3664
 *	grey		=		#999
 * 	drk grey	=		#777
 * 	orange		=		#ff9900
*/


/*	2. RESET - do not remove or modify
 *	----------------------------------------------
*/
	
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 
		margin: 0; 
		padding: 0; 
		border: 0; 
		outline: 0; 
		font-size: inherit; 
		font-family: inherit; 
		list-style: none; 
		}	
 	
	table { 
		border-collapse: collapse; 
		border-spacing: 0; 
		}

	ol, ul { 
		list-style: none; 
		}

	q:before, q:after, blockquote:before, blockquote:after { 
		content: ""; 
		}
		
	:focus {
		outline: 0;
		}
		
	legend {
		display: none;
		}
		
	hr {
		height: 1px;
		border: 1px solid #CCC;
		}
		
	/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
	.clearfix:after {
		clear: both;
		content: ' ';
		display: block;
		font-size: 0;
		line-height: 0;
		visibility: hidden;
		width: 0;
		height: 0;
		}

	.clearfix {
		display: inline-block;
		}

	* html .clearfix {
		height: 1%;
		}

	.clearfix {
		display: block;
		}


/*	3. LINKS
 *	----------------------------------------------
*/

	a:link, a:active, a:visited, a:hover {
		color: #ff9900;
		outline: none;
		}
		
	a:hover {
		text-decoration: none;
		}

		
/*	4. TYPOGRAPHY
 *	----------------------------------------------
*/


	h1, h2, h3, h4, h5, h6 {
		color: #1c3664;
		font-weight: normal;
		}
		
	h1 {
		font-size: 3.5em; 
		line-height: 1.2;
		}
		
	h2 {
		text-transform: uppercase;
		font-size: 1.2em;
		line-height: 1;
		margin: 0 0 1em;
		}	
		
	p, label {
		font-size: 1.1em;
		}
		
	p { margin: 0 0 1em; }					
		

/*	5. STRUCTURE
 *	----------------------------------------------
*/	


	body {
		font: 62.5%/1.6 "Trebuchet MS", "Lucida Grande", Arial, Helvetica;
		color: #999;
		background-color: #1c3664;
		/*3d2e33  or   88bfc6 */
		}
		
	#container {
		position: relative;
		width: 980px;
		margin: 0 auto;
		padding: 0;
		font-size: 1.1em;
		background: #fff;
		}
	
	#header {
		position: relative;
		height: 70px;
		padding: 30px 20px;
		background: #fff;
		border-bottom: 4px solid #d0cece;
		}	
	
	#outside {
		overflow: hidden;
		margin: 0;
		padding: 0;
		}
		
	#outside .fadeArea {
		position: absolute;
		top: 134px;
		right: 0;
		width: 980px;
		height: 499px;
		z-index: 2;
		overflow: hidden;
		}
		
	#content {
		position: relative;
		background: #fff url(../images/bg-content.gif) repeat-y; 
		margin: 190px auto 0;
		padding: 0;
		width: 940px;
		min-height: 311px;
 		height: auto !important;
  		height: 311px;
		z-index: 99;
		}				
		
	#footer {
		background: url(../images/base.png) top left no-repeat;
		font-size: 1.1em;
		color: #fff;
		padding: 25px;
		margin: 0 auto;
		width: 930px; 
		}
		
		/* << ----------- HEADER --------------- */						
		
		#header h1 {
			float: left;
			margin: 6px 15px;
			}
		
		#header h1 span {
			position: absolute;
			left: -999em;
			}
			
		#header ul#extras {
			float: right;
			padding: 0;
			margin: 0;
			}
			
		#header ul#extras li {
			float: left;
			padding: 4px 6px 2px 11px;
			}
		
		#header ul#extras a {
			color: #999;
			}	
			
		#header ul#extras li#divider { 
			background: url(../images/divider.gif) 0 10px no-repeat;
			}
			
		#header ul#extras li#search { 
			padding: 0;
			}
			
		#header ul#extras li#search form {
			width: 184px; background: url(../images/bg-search.gif) no-repeat; 
			height: 27px;
			margin: 0 0 0 8px;
			}
			
		#header ul#extras li#search input {
			width: 150px;
			background: 0;
			margin: 0;
			border: 0;
			padding: 8px 5px 5px 24px;
			font-style: italic;
			line-height: 1;
			}
			
		#header p.phone {
			position: absolute;
			bottom: 25px;
			right: 20px;
			font-weight: bold;
			font-style: italic;
			font-size: 1.2em;
			color: #777;
			}					
			
		/* << ----------- NAVIGATION ----------- */			
		
		ul#nav { 
			position: absolute;
			bottom: 0;
			right: 0;
			}
		
		ul#nav li {
			float: left;
			}
		
		ul#nav li a { 
			float: left;
			display: block;
			height: 35px;
			background: url(../images/nav-bg.gif) no-repeat;
			text-indent: -999em;
			cursor: pointer;
			}
			
			
			/* << --------- NAVIGATION ON STATE --------- */
			
			ul#nav li a#menu1 { 
				width: 74px; 
				background-position: 0 -70px; 
				}
				
			/* << --------- NAVIGATION HOVER STATE --------- */
			
			ul#nav li a#menu2:hover { 
				width: 97px; 
				background-position: -138px 0; 
				}
				
			ul#nav li a#menu3:hover { 
				width: 155px; 
				background-position: -235px 0; 
				}
				
			ul#nav li a#menu4:hover { 
				width: 142px; 
				background-position: -390px 0; 
				}
				
			ul#nav li a#menu5:hover { 
				width: 74px; 
				background-position: -532px 0; 
				}			
		
			/* << --------- NAVIGATION OFF STATE --------- */	
				
			ul#nav li a#menu2 { 
				width: 97px; 
				background-position: -138px -35px; 
				}
				
			ul#nav li a#menu3 { 
				width: 155px; 
				background-position: -235px -35px; 
				}
				
			ul#nav li a#menu4 { 
				width: 142px; 
				background-position: -390px -35px; 
				}
				
			ul#nav li a#menu5 { 
				width: 74px; 
				background-position: -532px -35px; 
				}			
			
	/* << ------------- CONTENT ------------ */			
	
	#content .col {
		float: left;
		width: 252px;
		padding: 30px 30px 15px;
		margin: 0;
		font-size: 1.1em;
		}
		
	#content ul {
		margin: 0;
		padding: 0;
		}
		
	#content ul li {
		padding: 4px 5px 4px 22px;
		background: url(../images/bullet.gif) 4px 9px no-repeat; 	
		}	
		
	#content .col p.more { 
		margin: 25px 0 0;
		}
	
	#content .col #contact {
		font-style: italic;
		font-weight: bold;
		font-size: 1.2em;
		color: #777;
		}
		
	#content .emergency img {
		margin: 15px 0 0;
		}
		
	#content .contact {
		float: right;
		}		
		
	#content .contact p.map {
		float: left;
		margin-bottom: 25px;
		}	
		
	#content .contact p.map a {
		padding: 0 25px 0 0;
		background: url(../images/popup-icon.gif) 65px 1px no-repeat; 
		}
		
	#content img.wamc {
		float: right;
		}						
		
		h2#welcomeTitle { 
			position: relative; 
			width: 112px; 
			height: 16px; 
			}
			
		h2#welcomeTitle span {
			position: absolute;
			width: 100%; 
			height: 100%; 
			background: url(../images/h2-welcome.gif) no-repeat; 
			}
		
		h2#emergencyTitle { 
			position: relative; 
			width: 256px; 
			height: 16px; 
			}
		
		h2#emergencyTitle span { 
			position: absolute; 
			width: 100%; 
			height: 100%; 
			background: url(../images/h2-emergency-contacts.gif) no-repeat; 
			}
		
		h2#contactTitle { 
			position: relative; 
			width: 136px; 
			height: 16px; 
			}
		
		h2#contactTitle span { 
			position: absolute; 
			width: 100%; 
			height: 100%; 
			background: url(../images/h2-contact-us.gif) no-repeat;
			}	
		
		/* HIDDEN ELEMENTS */
		
		.path {
			display: none;
			}			
			
		/* << ----------- FOOTER ---------------- */ 	
			
		#footer p#ivt {
			float: right;
			}			
		
		#footer p#copyright {
			float: left;
			}
		#footer a, #footer strong {
			color: #fff;
			}