/* -----------------------------------------
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 {
	line-height: 			1;
}
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;
}
/*----------------- Body ---------------- */
@font-face {
 font-family: 'Segoe UI';
 src: url(../fonts/segoeui.eot);
 src: local('Segoe UI'), url(../fonts/segoeui.ttf) format('opentype');
}

body {
	background:				#050505;
	margin: 				0px;
	padding: 	    	  	0px;
	font: 					12px/16px "Segoe UI", Arial, Helvetica, sans-serif;
	color:					#FFF;
}
/*-------------- Wrapper ---------------- */
#wrapper {
	width:					900px;
	height:					660px;
	margin:         		14px auto 0px auto;
	padding:          	    0px;
	position:       		relative;
	z-index:				10;
}
/*-------------- Typography ------------- */
h1 span, h2 span, h3 span {
	display: 				none;
}

h1 {
	color: #d4dc14;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 14px;
}

h2 {
	margin-bottom:			16px;
	font-size:				16px !important;
	font-weight:			bold;
	color:					#d4dc14;
}

h3 {
	margin-bottom:			12px;
	color:					#d4dc14;
	font-size:				14px;
	font-weight:			bold;
}

p {
	margin-bottom:			14px;
	color:					#FFF;
}

#content a, a:visited {
	color:					#d4dc14;
	text-decoration:		none;
	font-size:				12px;
	font-weight:			normal;
	display:				inline;
}

#content a:hover {
	text-decoration: underline;
}

ul {
	list-style: disc;
	padding-bottom: 5px;
	margin: 0px 0px 14px 35px;
	color: #FFF;
}

ol {
	list-style: decimal;
	padding-bottom: 5px;
	margin: 0px 0px 14px 35px;
	color: #FFF;
}

.imgright {
	float: right;
	margin-left: 5px;
	border: 2px solid #FFF;
}
.imgleft {
	float: left;
	margin-right: 5px;
	border: 2px solid #FFF;
}

.spacer{
	margin: 20px 0px;
	
}
/*-------------- Header Section --------- */
#header {
	height:					660px;
	width:					460px;
	display:				block;
	position:				relative;
	float:					left;
	z-index:				20;
}

/*----------- Navigation Section -------- */

#nav {
	float:					right;
	width:					197px;
	height:					660px;
	background:				url(../../images/interface/light-trans-bg.png);
	padding-top:            50px;
}

#nav ul li {
	list-style: none;
	display: block;
	padding: 7px;
	text-align: right;
	margin-bottom: 5px;
}

#nav ul li:hover {
	background:url(../../images/interface/nav-underline.png) no-repeat right bottom;
}

#nav a, a:visited {
	color: #FFF;
	font-size: 13px;
	text-decoration: none;
	text-shadow: -2px 1px 0px #000;
	display: block;
	font-weight: bold;
}

#nav a:hover {
	color: #d4dc14;
	text-decoration: none;
}

#nav .selected {
	color: #d4dc14;
	font-size: 15px;
}

/*----------- Images Section -------- */

#images {
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 510px;
	height: 70px;
}

#images li {
	display: block;
	float: left;
	height: 65px;
	width: 100px;
	position: relative;
	margin-left: 10px;
	border: 2px solid #FFF;
}

#images a {
	display: block;
	height: 65px;
	width: 100px;
}

#images li .arrow {
	display: block;
	width:10px;
	height:7px;
	position: absolute;
	bottom: -9px;
	left: 45px;
	background:url(../../images/interface/arrow.gif) no-repeat;
}

/*-------------- Content Section -------- */
#logo {
	height:					79px;
	width:					313px;
	position:				absolute;
	top:					20px;
	left:					20px;
}

#content {
	height:       			690px;
	width:					440px;
	float:					right;
	background:				url(../../images/interface/dark-trans-bg.png);
	position:				relative;
}

#content #text {
	width: 					400px;
	height:					465px;
	padding-top:            110px;
	margin:					auto;
}
#content .km {
	font-size: 10px;
}
/*-------------- Form/Book Now Section -------- */

input {
	background: #FFF;
	color: #000;
	width: 225px;
	border: none;
	font-family: Segoe UI, Arial;
	font-size: 12px;
}

textarea {
	background: #FFF;
	color: #000;
	width: 225px;
	height: 40px;
	border: none;
	font-family: Segoe UI, Arial;
	font-size: 12px;
	overflow: hidden;
}

.checkbox {
	width: 20px;
	background: none;
}

.submit {
	width: 94px;
	height: 36px;
	background:url(../../images/interface/submit.gif) no-repeat;
	border: none;
	cursor: pointer;
}
.submit:hover {
	background:url(../../images/interface/submit.gif) no-repeat 0px -36px;
}
/*------------- Footer Section ---------- */
#footer-wrapper {
	height:					111px;
	width:					auto;
	color:					#FFF;
	clear:					both;
}
#footer {
	height:					111px;
	width:					900px;
	margin:         		0px auto;
	padding:        		30px 0px 0px 0px;
	position:       		relative;
	z-index:				20;
}

#footer-content {
	width: 					900px; 
	height: 				60px; 
	display: 				block;
	padding: 	            0px 0px 20px 0px;
}

#footer-content #wells-gray {
	position: absolute;
	top: 5px;
	left: 0px;
}

#footer-content #buttons {
	float: 					right; 
	text-align:				center; 
	width: 					450px; 
	height: 				40px;
	position: 				relative;
}

#footer-content #buttons .book-now a{
	height: 36px; 
	width: 136px;
	background:url(../../images/interface/book-now.gif) no-repeat;
	position: absolute;
	left: 50px;
}

#footer-content #buttons .view-rates a{
	height: 36px; 
	width: 193px;
	background:url(../../images/interface/view-rates.gif) no-repeat;
	position: absolute;
	right: 45px;
}

#footer-content #buttons .book-now a:hover {
	background:transparent url(../../images/interface/book-now.gif) no-repeat 0px -36px;
}

#footer-content #buttons .view-rates a:hover {
	background:transparent url(../../images/interface/view-rates.gif) no-repeat 0px -36px;
}

#copyright {
	width:					450px;
	float:					left;
}
#webdesign {
	width:					450px;
	float:					left;
	text-align:				right;
}
#copyright a, #webdesign a {
	color:					#FFF;
	font-size:        		10px;
	font-weight:			normal;
	text-decoration:		none;
}
#copyright a:hover, #webdesign a:hover {
	color:					#d4dc14;
}
/*------------- 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%;
}

/*------------- JQUERY CSS ------------- */
/*jScroll*/
.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
}
.jScrollPaneDrag {
	position: absolute;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	background:url(../../images/interface/up-arrow.gif) no-repeat;
	height: 17px;
	width: 25px;
}
a.jScrollArrowUp:hover {
	/*background-color: #f60;*/
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	background:url(../../images/interface/down-arrow.gif) no-repeat;
	height: 17px;
	width: 25px;
}
a.jScrollArrowDown:hover {
	/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	/*background-color: #f00;*/
}
/* 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: #3a3a3a;
	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: 		#3a3a3a;
	margin: 				0 auto;
	line-height: 			1.4em;
	overflow:				auto;
	width: 					100%;
	padding: 	            0 10px 0;
}
#lightbox-container-image-data {
	padding:                                0 10px; 
	color: 					#FFF; 
}

#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;	
}			
#lightbox-secNav-btnClose {
	width: 					66px; 
	float: 					right;
	padding-bottom: 			0.7em;	
}