/* -----------------------------------------
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
----------------------------------------- */
/* 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, caption, tbody, tfoot, thead, th {
	background: 		transparent;
	border: 			0;
	margin: 			0;
	padding:          	0;
	font-size: 			100%;
	outline: 			0;
	vertical-align: 	baseline;
}
html {
	height:			100%;
}
body {
	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;
}
.alignright {
	float:				right;
}
.alignleft {
	float:				left;
}
.center {
	text-align:			center;
}
.orange {
	color:				#f2a733;
}
/*----------------- Body ---------------- */
body {
	background:			#000;
	min-height:			600px;
	margin: 			0;
	padding: 	    	0;
	font: 				14px/16px Arial, Helvetica, sans-serif;
	color:				#FFF;
}
#background {
	position:			fixed;
	top: 				0px;
	left: 				0px;
	margin: 			0;
	padding: 	        0;
	width: 				100%;
	height: 			100%;
	text-align: 		center;
	background:			#000;
}
#flash-container {
	height: 			100%;
	width: 				100%;
	overflow: 			visible;
	background:			#000;
}
	
#gradient-wrapper {
}

#gradient {
	background:			url(../../images/bgs/footer-bg.png) repeat-x;
	width: 				100%;
	height: 			300px;
	position: 			absolute;
	bottom:	 			0px;
	left: 				0px;
}
/*-------------- Wrapper ---------------- */
#wrapper {
	width:				901px;
	margin:         	0px auto;
	margin-top:			12px;
	padding:            0px;
	position:       	relative;
	z-index:			10;
}
/*-------------- Typography ------------- */
h1 span, h2 span, h3 span {
	display: 			none;
}
h2 {
	margin-bottom:		14px;
	font-size:			18px;
	font-weight:		bold;
}


	
/*-------------- Header Section --------- */
#header {
	height:				297px;
	width:				auto;
	background:			url(../../images/interface/header-border.gif) no-repeat;
	display:			block;
	position:			relative;
	z-index:			20;
}
#logo {
	height:				153px;
	width:				203px;
	position:			absolute;
	top:				35px;
	left:				45px;
	z-index: 			45;
}
#phone {
	position: 			absolute;
	top:				55px;
	right:				10px;
	z-index: 			25;

}
#slogan {
	position: 			absolute;
	top:				175px;
	left:				264px;
	color:				#FFF;
	font-size:			24px;
	font-weight:		bold;
	z-index: 			25;
}
#background-image {
	z-index: 			-100;
	position: 			absolute;
	background: 		#000;
	top: 				10px;
	left: 				12px;
	z-index:			20;
}
/*----------- HOVER BUTTONS -------- */

#res {
	position:			absolute;
	top:				15px;
	right:				150px;
	height: 			33px;
	width: 				124px;
	background: 		url(../../images/interface/residential.gif) no-repeat;
}
#res span {
	display:			none;
}
#res a {
	height: 			34px;
	display: 			block;
}
.res {
	left:				0px;
	width:				124px;
}
.res a:hover, .res .selected {
	color:#FFF;
	background:transparent url(../../images/interface/residential.gif) 0px -33px no-repeat;
}
#com {
	position:			absolute;
	top:				15px;
	right:				15px;
	height: 			33px;
	width: 				124px;
	background: 		url(../../images/interface/commercial.gif) no-repeat;
}
#com span {
	display:			none;
}
#com a {
	height: 			34px;
	display: 			block;
}
.com {
	left:0px;
	width:124px;
}
.com a:hover, .com .selected {
	color:#FFF;
	background:transparent url(../../images/interface/commercial.gif) 0px -33px no-repeat;
}


#request-quote {
	position:			absolute;
	top:				-10px;
	right:				17px;
	height: 			31px;
	width: 				157px;
	background: 		url(../../images/interface/request-quote.gif) no-repeat;
}
#request-quote span {
	display:			none;
}
#request-quote a {
	height: 			31px;
	display: 			block;
}
.request-quote {
	left:				0px;
	width:				157px;
}
.request-quote a:hover, .request-quote .selected {
	color:#FFF;
	background:transparent url(../../images/interface/request-quote.gif) 0px -31px no-repeat;
}


#who-we-are {
	position:			absolute;
	top:				-10px;
	right:				180px;
	height: 			31px;
	width: 				139px;
	background: 		url(../../images/interface/who-we-are.gif) no-repeat;
}
#who-we-are span {
	display:			none;
}
#who-we-are a {
	height: 			31px;
	display: 			block;
}
.who-we-are {
	left:				0px;
	width:				139px;
}
.who-we-are a:hover, .who-we-are .selected {
	color:#FFF;
	background:transparent url(../../images/interface/who-we-are.gif) 0px -31px no-repeat;
}
/*----------- Navigation Section -------- */
#nav {
	height:				34px;
	width:				auto;
	background:			url(../../images/interface/navigation.png) no-repeat;
	position:			absolute;
	right: 				8px;
	bottom: 			35px;
	z-index:			30;
}
#nav ul {
	height:				34px;
	width:				705px;
	display:			block;
}
#nav ul li {
	margin:				0px;
	padding:          	0px;
	float:				left;
	list-style-type:	none;
}
#nav ul li span {
	display:			none;
}
#nav ul li a {
	height: 			34px;
	display: 			block;
}
.home {
	left:0px;
	width:100px;
}
.about {
	left:100px;
	width:100px;
}
.services {
	left:200px;
	width:100px;
}
.before-after {
	left:300px;
	width:100px;
}
.equipment {
	left:400px;
	width:100px;
}
.testimonials {
	left:500px;
	width:100px;
}
.contact {
	left:600px;
	width:100px;
}
.home a:hover, .home .selected {
	color:#FFF;
	background:transparent url(../../images/interface/navigation.png) 0px -34px no-repeat;
}
.about a:hover, .about .selected {
	color:#FFF;
	background:transparent url(../../images/interface/navigation.png) -100px -34px no-repeat;
}
.services a:hover, .services .selected {
	color:#FFF;
	background:transparent url(../../images/interface/navigation.png) -200px -34px no-repeat;
}
.before-after a:hover, .before-after .selected {
	color:#FFF;
	background:transparent url(../../images/interface/navigation.png) -300px -34px no-repeat;
}
.equipment a:hover, .equipment .selected {
	color:#FFF;
	background:transparent url(../../images/interface/navigation.png) -400px -34px no-repeat;
}
.testimonials a:hover, .testimonials .selected {
	color:#FFF;
	background:transparent url(../../images/interface/navigation.png) -500px -34px no-repeat;
}
.contact a:hover, .contact .selected {
	color:#FFF;
	background:transparent url(../../images/interface/navigation.png) -600px -34px no-repeat;
}
/*--Nav Drop Downs--*/ 
#nav li ul {
	width:				200px;
	height: 			auto;
	position:			absolute;
	top:				34px;
	left:				200px;
	display:			none;
	background: 		#000;
	border-left:		1px solid #848484;
	border-right:		1px solid #848484;
	border-top:		1px solid #848484;
	z-index:			99;
}
#nav li ul li {
	border-bottom: 		1px solid #848484;
}
#nav li ul li a {
	color: 				#FFFFFF;
	text-decoration:	none;
	font-size:			12px;
	font-weight: 		normal;
	width: 				180px;
	height:				15px;
	padding: 			5px 10px 5px 10px;
	display: 			block;
	background: 		#000;
	text-align:			left;
}
#nav li ul li a:hover {
	color:				#FFF;
	background: 		#2f2f2f;
	height: 			15px;
}
#nav li:hover ul, #nav li.over ul {
	display: 			block;
}
#nav li:hover ul, #nav li.over ul {
	display: 			block;
}
/*-------------- Content Section -------- */

/* Content                       */	
#content {
	min-height:       	620px;/*Real browsers will read this for Min-Hieght*/
	height:				auto !important;
	height:				620px;/*Hack to make this work in IE6*/
	background:			#474747;
	width:				650px;
	padding:          	0px 25px 0px 25px;
	position:			relative;
	float:				left;
	margin-top:			33px;
	margin-bottom:		42px;
	background:			url(../../images/interface/content-bg.png) repeat-y;
}
#content p {
	margin-bottom: 		18px;
	line-height:		22px;
}
#content h1 {
	font-size:			21px;
	font-family:		"Arial Black", Gadget, sans-serif;
	color:				#f2a733;
	margin-bottom:		12px;
}
#content h2 {
	font-size:			18px;
	font-family:		"Arial Black", Gadget, sans-serif;
	color:				#f6e6cd;
	margin-bottom:		12px;
}
#content h3 {
	font-size:			16px;
	font-family:		"Arial", Gadget, sans-serif;
	color:				#f2a733;
	margin-bottom:		12px;
}
#content ul li {
	line-height: 		125%;
}

/*#content .request-quote {
	position: 			absolute;
	top: 				-10px;
	right: 				17px;
}
#content .who-we-are {
	position:			absolute;
	top: 				-10px;
	right:				180px;
}*/
#content a, a:visited {
	color: 				#fff;
	text-decoration: 	none;
}
#content a:hover {
	color: 				#f2a733;
}

#content h2 a {
	font-size:			14px;
	font-family:		"Arial Black", Gadget, sans-serif;
	color:				#f6e6cd;
	margin-bottom:		12px;
}
/* Sidebar                       */	
#side {
	width: 				191px;
	height: 			680px;
	background: 		url(../../images/interface/side-bg.png) repeat-y;
	float: 				right;
	margin-top: 		8px;
	color: 				#848484;
}
#side .header {
	width: 			    173px;
	height: 			13px;
	padding: 	        10px 5px 10px 12px;
	background: 		#000;
	color: 				#FFF;
	font-weight:		bold;
	font-size: 			14px;
	border-bottom: 		1px solid #6c6c6c;
}
#side ul {
	margin-bottom: 		20px;
}
#side ul li {
	border-bottom: 		1px solid #6c6c6c;
	padding: 	        9px;
}
#side a, a:visited {
	color:				#FFF;
	font-size: 			14px;
	text-decoration: 	none;
	font-weight: 		normal;
}
#side a:hover {
	color: 				#e49d31;
	font-weight: 		normal;
}
#side .side-testimonial {
	font-size: 			12px;
	padding: 	        10px;
}
#side .side-testimonial .leftquote {
	padding: 	        0px 0px 7px 0px;
}
#side .side-testimonial .rightquote {
	float: 				right;
	padding:            7px 0px 0px 0px;
}

/*------------- Gallery Section ---------- */

#category {
	width:				615px;
	height:				auto;
	padding: 	       40px 0px 40px 40px;
	clear:				both;
}
#category li {
	width:				159px;
	height:				104px;
	float:				left;
	background:			url(../../images/interface/gallery-bg.gif) no-repeat;
	padding:        	6px;
	margin-right:		31px;
	margin-bottom:		60px;
	position:			relative;
}
#category a {
	display: 			block;
	width: 				159px;
	height: 			104px;
	text-decoration: 	none;
}
#category .title {
	width: 				145px;
	height:				30px;
	padding: 	        10px;
	position: 			absolute;
	left: 				0px;
	top: 				108px;
	text-align: 		center;
	background: 		#FFF;
	color: 				#000;
}
#category .title a, a:visited {
	color: 				#000;
	font-size: 			12px;
	font-weight:		bold;
	height: 			10px;
	width: 				100%;
	text-align: 		center;
}
/*------------- Before After Gallery Section ---------- */


#before-after-gallery {
	width:				400px;
	height:				auto;
	padding: 	        40px 0px 40px 40px;
	margin:				auto;
}
#before-after-gallery li {
	width:				159px;
	height:				104px;
	float:				left;
	background:			url(../../images/interface/gallery-bg.gif) no-repeat;
	padding:        	6px;
	margin-right:		25px;
	margin-bottom:		60px;
	position:			relative;
}
#before-after-gallery a {
	display: 			block;
	width: 				159px;
	height: 			104px;
	text-decoration: 	none;
}
#before-after-gallery .title {
	width: 				125px;
	padding: 	        20px;
	position: 			absolute;
	left: 				0px;
	text-align: 		center;
	background: 		#FFF;
	color: 				#000;
}
#before-after-gallery .pictitle {
	width: 				145px;
	padding: 	        10px;
	position: 			absolute;
	font-size: 			12px;
	font-weight:		bold;
	left: 				0px;
	top: 				108px;
	text-align: 		center;
	background: 		#FFF;
	color: 				#000;
}
#before-after-gallery .pictitle a, a:visited {
	color: 				#000;
	font-size: 			12px;
	font-weight:		bold;
	height: 			10px;
	width: 				100%;
	text-align: 		center;
}


/*------------- Every Other Gallery Section ---------- */

#gallery {
	width:				600px;
	height:				auto;
	padding: 	        40px 0px 40px 40px;
	margin:				auto;
}

#gallery li {
	width:				159px;
	height:				104px;
	float:				left;
	background:			url(../../images/interface/gallery-bg.gif) no-repeat;
	padding:        	6px;
	margin-right:		25px;
	margin-bottom:		60px;
	position:			relative;
}

#gallery a {
	display: 			block;
	width: 				159px;
	height: 			104px;
	text-decoration: 	none;
}

#gallery .title {
	width: 				125px;
	padding: 	        20px;
	position: 			absolute;
	left: 				0px;
	text-align: 		center;
	background: 		#FFF;
	color: 				#000;
}

#gallery .pictitle {
	width: 				145px;
	padding: 	        10px;
	position: 			absolute;
	font-size: 			12px;
	font-weight:		bold;
	left: 				0px;
	top: 				108px;
	text-align: 		center;
	background: 		#FFF;
	color: 				#000;
}
#gallery .pictitle a, a:visited {
	color: 				#000;
	font-size: 			12px;
	font-weight:		bold;
	height: 			10px;
	width: 				100%;
	text-align: 		center;
}

/*------------- Testimonial Section ---------- */

.testimonial {
	width: 				100%;
	height: 			auto;
	padding: 	        10px 0px 10px 0px;
	border-bottom: 		1px solid #2c2925;
}
/*------------- Equipment Section ---------- */


#equipment li {
	list-style: 		disc;
	margin-left: 		15px;
	padding:	        2px;
}
/*------------- Contact Us Section ---------- */

.input {
	background: 		#272727;
	border: 			1px solid #2c2925;
	color: 				#FFF;
	width: 				260px;
	font-size: 			14px;
}
textarea {
	background: 		#272727;
	border: 			1px solid #2c2925;
	color: 				#FFF;
	width: 				260px;
	height: 			75px;
	font-family: 		Arial, Helvetica, sans-serif;
	font-size: 			14px;
	overflow: 			auto;
}
select {
	background: 		#272727;
	border: 			1px solid #2c2925;
	color: 				#FFF;
	width: 				260px;
	font-size: 			14px;
}
.row {
	width: 				100%;
	height: 			35px;
	display: 			block;
}
.left {
	float: 				left;
	width: 				175px;
	text-align:			right;
}
.mid {
	float: 				left;
	width: 				40px;
	text-align:			center;
}
.right {
	float: 				left;
	width: 				263px;
	display: 			block;
	text-align:			left;
}
.content {
	width: 				490px;
}

.over {
	border: 			1px solid #f2a733;
	width: 				auto;
}
/*------------- Footer Section ---------- */
#footer-wrapper {
	height:				146px;
	width:				auto;
	margin-top:			46px;
	clear:				both;
	color:				#FFF;
	position:			relative;
}
#footer {
	height:				146px;
	width:				901px;
	margin:         	0px auto;
	padding:        	0px;
	position:       	relative;
	z-index:			20;
}
#logos {
	width:				690px;
	height:				90px;
	float:				left;
	margin-bottom:		15px;
}
#logos a {
	margin-right: 		10px;
}
#contact {
	width:				208px;
	height:				90px;
	float:				right;
	margin:          	0px;
	text-align:			right;
	font-size:			12px;
}

.facebook {
	height: 30px;
	width: 208px;
	display: block;
	margin-top: 10px;
}

.facebook img {
	vertical-align:middle;
}

#contact a, a:visited{
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
}

#copyright {
	width:				451px;
	float:				left;
}
#webdesign {
	width:				450px;
	float:				left;
	text-align:			right;
}
#copyright a, #webdesign a {
	color:				#FFF;
	font-size:			10px;
	text-decoration:	none;
}

/* Pagination
--------------------------------------------------------------------------------------- */

#paging_content {
	min-height: 		20px;
	width: 				100%;
	padding: 	        5px 2px;
	margin-top: 		0.5em;
	color: 				#fff;
	border-bottom: 		1px solid gray;
}
.paging_leftdiv {
	float: 				left;
	width: 				50%;
	text-align: 		left;
	padding-left: 		5px;
}
.paging_rightdiv {
	float: 				left;
	width: 				48%;
	text-align: 		right;
	padding-left:	    5px;
}
.paging_rightdiv span {
	font-weight: 		bold;
}
.paging_rightdiv input {
	background-color: 	#000000;
	border: 			1px solid #fff;
	color: 				#f2a733;
}
.paging_rightdiv a, a:hover, a:visited {
	padding:	        0;
	margin: 			0;
	font-weight: 		normal;
}
#paging_recbuttons {
	clear: 				both;
	width: 				98%;
	text-align: 		right;
	padding-top: 		5px;
	margin-right: 		0;
}

/* Light Box 
--------------------------------------------------------------------------------------- */
#jquery-overlay {
	position:			absolute;
	top: 				0;
	left: 				0;
	z-index: 			99;
	width: 				100%;
	height: 			500px;
}
#jquery-lightbox {
	position: 			absolute;
	top: 				0;
	left: 				0;
	width: 				100%;
	z-index: 			100;
	text-align: 		center;
	line-height: 		0;
}
#jquery-lightbox a img {
	border: 			none;
}
#lightbox-container-image-box {
	position: 			relative;
	background-color: 	#fff;
	width: 				250px;
	height: 			250px;
	margin: 			0 auto;
}
#lightbox-container-image {
	padding: 	        10px;
}
#lightbox-loading {
	position: 			absolute;
	top: 				40%;
	left: 				0%;
	height: 			25%;
	width: 				100%;
	text-align: 		center;
	line-height: 		0;
}
#lightbox-nav {
	position: 			absolute;
	top: 				0;
	left: 				0;
	height: 			100%;
	width: 				100%;
	z-index: 			10;
}
#lightbox-container-image-box > #lightbox-nav {
	left: 				0;
}
#lightbox-nav a {
	outline: 			none;
}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 				49%;
	height: 			100%;
	display: 			block;
}
#lightbox-nav-btnPrev {
	left: 				0;
	float: 				left;
}
#lightbox-nav-btnNext {
	right: 				0;
	float: 				right;
}
#lightbox-container-image-data-box {
	font: 				10px Verdana, Helvetica, sans-serif;
	background-color: 	#fff;
	margin: 			0 auto;
	line-height: 		1.4em;
	overflow:			auto;
	width: 				100%;
	padding: 	        0 10px 0;
}
#lightbox-container-image-data {
	padding:            0 10px;
	color: 				#666;
}
#lightbox-container-image-data #lightbox-image-details {
	width:				70%;
	float: 				left;
	text-align: 		left;
}
#lightbox-image-details-caption {
	font-weight: 		bold;
}
#lightbox-image-details-currentNumber {
	display: 			block;
	clear: 				left;
	padding-bottom: 	1.0em;
	padding-top:		1.0em;
}
#lightbox-secNav-btnClose {
	width: 				66px;
	float: 				right;
	padding-bottom: 	0.7em;
}
/*------------- 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%;
}