/* -----------------------------------------
NAVIGATOR MULTIMEDIA INC CSS PAGE STRUCTURE
Designed by: Chris Satterthwaite
Modified By: Chris Satterthwaite
Date Modified: Oct.02.2009
--------------------------------------------
TABLE OF CONTENTS
--------------------------------------------
Reset: 
Body:
Wrapper:
Typography:
Header Section:
Navigation Section:
Content Section:
Footer Section:
Hacks/Fixes:
--------------------------------------------
STYLE RULES
--------------------------------------------
Box
			hieght
			width
			background
			border
			margin
			padding
			display
			
Position
			position
			top
			left
			float
			z-index
			
Font
			color
			font family
			font size
			line hieght
----------------------------------------- */
/* CSS Constants (works in IE6+, FF2+, Opera, Safari and CSS1+)
 * ------------------------------------------------------------
 * Variables like: $variable = 'value';
 * Import this css as:
 * <style type="text/css">
 *		@import '{path-to-cssconst.php}cssconst.php?c={path-to-this-css-file}&{var1}={value1}...';
 * </style> 
 * Comment out constants: replace $ with #

#colour2 = '#2f9a9e';  

*/

/* Reset                                  */
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, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	background: 			transparent;
	border: 				0;
	margin: 				0;
	padding:          		0;
	font-size: 				100%;
	outline: 				0;
	vertical-align: 		baseline;
}
body {
	height:					100%;
}
html {
	height:					100%;
}
ol, ul {
	list-style: 		  	none;
}
blockquote, q {
	quotes: 				none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: 				'';
	content: 				none;
}
/* remember to define focus styles! */
:focus {
	outline: 				0;
}
/* remember to highlight inserts somehow! */
ins {
	text-decoration: 		none;
}
del {
	text-decoration: 		line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: 		collapse;
	border-spacing: 		0;
}
/*----------------- Fonts ---------------- */
@font-face {
 	font-family: 			'Lumpy';
 	src: 					url(../fonts/lumpyregular.eot);
	src: 					local('Lumpy'), url(../fonts/lumpyregular.ttf) format('opentype');
}

/*----------------- Body ---------------- */
body {
	background:				#a04910 url(../../images/interface/background.jpg) no-repeat center top;
	margin: 				0px;
	padding: 	    	  	0px;
	font: 					14px/16px Segoe UI, Arial, Helvetica, sans-serif;
	color:					#FFF;
}
/*-------------- Wrapper ---------------- */
#wrapper {
	width:					991px;
	margin:					0px auto;
	padding:          	    0px;
	position:       		relative;
	z-index:				10;
}
/*-------------- Header Section --------- */
#header {
	height:					578px;
	width:					auto;
	display:				block;
	position:				relative;
	z-index:				20;
}
#logo {
	height:					237px;
	width:					206px;
	position:				absolute;
	top:					0px;
	left:					0px;
}
#photo {
	width:					800px;
	height:					500px;
	position:				absolute;
	right:					0px;
	bottom:					0px;
	z-index:				50;
	background:				url(../../images/interface/photo-bg-index.png) no-repeat;
}
#images {
	z-index: 30;
	width: 720px;
	height: 235px;
	position: absolute;
	right: 37px;
	top: 110px;
}
#images li {
	list-style: none;
	margin: 0px;
}
/*----------- Navigation Section -------- */
#nav {
	height:					77px;
	width:					auto;
	background:				url(../../images/interface/navigation.jpg) no-repeat;
	z-index:				20;
	position:				absolute;
	top:					34px;
	left:					212px;
}
#nav ul {
	height:					77px;
	width:					746px;
	display:				block;
}
#nav ul li {
	margin:					0px;
	padding:          		0px;
	position:				absolute;
	float:					left;
	list-style-type:		none;
}
#nav ul li span {
	display:				none;
}
#nav ul li a {
	height: 				77px;
	display: 				block;
}
.about {
	left:0px;
	width:101px;
}
.location {
	left:101px;
	width:108px;
}
.our-cheese {
	left:209px;
	width:110px;
}
.tour {
	left:316px;
	width:106px;
}
.news-events {
	left:422px;
	width:107px;
}
.media {
	left:529px;
	width:107px;
}
.contact-us {
	left:636px;
	width:110px;
}

.about a:hover, .about .selected {
	color:#FFF;
	background:transparent url(../../images/interface/navigation.jpg) 0px -77px no-repeat;
}
.location a:hover, .location .selected {
	color:#FFF;
	background:transparent url(../../images/interface/navigation.jpg) -101px -77px no-repeat;
}
.our-cheese a:hover, .our-cheese .selected {
	color:#FFF;
	background:transparent url(../../images/interface/navigation.jpg) -209px -77px no-repeat;
}
.tour a:hover, .tour .selected {
	color:#FFF;
	background:transparent url(../../images/interface/navigation.jpg) -316px -77px no-repeat;
}
.news-events a:hover, .news-events .selected {
	color:#FFF;
	background:transparent url(../../images/interface/navigation.jpg) -422px -77px no-repeat;
}
.media a:hover, .media .selected {
	color:#FFF;
	background:transparent url(../../images/interface/navigation.jpg) -529px -77px no-repeat;
}
.contact-us a:hover, .contact-us .selected {
	color:#FFF;
	background:transparent url(../../images/interface/navigation.jpg) -636px -77px no-repeat;
}

/*------------- Footer Section ---------- */
#footer-wrapper {
	height:					224px;
	width:					100%;
	padding:	            0px 0px 10px 0px;
	margin:                 0;
	color:					#FFF;
	clear:					both;
}
#footer {
	height:					224px;
	width:					1000px;
	margin:         		0px auto;
	padding:        		0px;
	position:       		relative;
	z-index:				20;
}

#callouts {
	width: 1000px;
	height: 165px;
	margin: auto;
	padding: 20px 10px;
}
	
.fcol1 {
	height:					167px;
	width:					243px;
	float:					left;
}
.fcol2 {
	height:					167px;
	width:					249px;
	float:					left;
}
.fcol3 {
	height:					167px;
	width:					251px;
	float:					left;
}
.fcol4 {
	height:					167px;
	width:					244px;
	float:					left;
}
#copyright {
	width:					500px;
	float:					left;
}
#webdesign {
	width:					500px;
	float:					left;
	text-align:				right;
}
#copyright a, #webdesign a {
	color:					#FFF;
	font-size:        		10px;
	text-decoration:		none;
}
/*------------- Hacks/Fixes ------------- */
/* Fire Fox Float Fix                     */
.clearfix:after {
	height:					0;
	visibility: 			hidden;
	display: 				block;
	clear: 					both;
	content: 				".";
	line-height: 			0;
}
.clearfix {
	display: 				block;
}
html[xmlns] .clearfix {
	display:				block;
}
* html .clearfix {
	height: 				1%;
}
/*-------------- Side-Nav Section -------- */
#index-side{
position:absolute; top:0px; left:0px; z-index:20; width:181px;}
#index-side #side-nav {
	width: 					181px;
	height: 				260px;
	
	position: 				absolute;
	left: 					-3px;
	top: 					396px;
	z-index: 				10;
}
#index-side .side-nav-border {
	width: 					32px;
	height: 				260px;
	background:				url(../../images/interface/side-nav-shadow.png) no-repeat;

	position: 				absolute;
	left: 					150px;
	top: 					379px;
	z-index: 				20;
}
#index-side #side-nav ul {
	margin: 				0px;
	list-style: 			none;
}
#index-side #side-nav ul li {
	margin: 				0px;

	padding: 	            4px 0px 0px 0px;
	text-align: 			center;
}
#index-side #side-nav ul li:hover {
	position: 				relative;
	right: 					10px;
}
#index-side #side-nav .green {
	width: 					184px;
	height: 				33px;
	background:				url(../../images/interface/side-nav-green.png);
}
#index-side #side-nav .blue {
	width: 					184px;
	height: 				35px;
	background:				url(../../images/interface/side-nav-blue.png);
}
#index-side #side-nav .red {
	width: 					184px;
	height: 				36px;
	background:				url(../../images/interface/side-nav-red.png);
}
#index-side #side-nav a {
	color: 					#f4ebc6;
	font-family: 			"Lumpy", Lucida Grande, Arial;
	font-size: 				14px;
	text-decoration: 		none;
}