/**
 * core.css
 * Core Stylesheet for whitecloudcharter.com
 * @author Tony Collings, Hayley King
 * @version 1.0, September 2009
 *
 *
 * NOTES: DarkBlue = #000e30; LightBlue = #50b1e3; GreyText = #e1e1e1;
 * TOP NAV & LightBg: #4fb0e1;
 * DARK: lightblue link & blue border = #53aedd;
 * All overlays must have bgcolor = #000e30; 
 */

/*	HTML OVERRIDES
	------------------------------------------------------------- */

	body { font: 12px/18px Trebuchet MS, Verdana, Arial, Helvetica, sans-serif; color: #e1e1e1;
	text-align: center; margin: 0px; padding: 0px; background-color: #0c132d;  }
	
	
	a:link, a:visited {color:#1a7499; text-decoration: none; }
	a:hover, a:active {color:#1a7499; text-decoration: underline; }
	
	/* Light Links */
	.light a:link, .light a:visited {color: #fbe233; text-decoration: none; }
	.light a:hover, .light a:active {color: #fbe233; text-decoration: underline; }
	
	/* Dark Links */
	.dark a:link, .dark a:visited {color: #53aedd; text-decoration: none; }
	.dark a:hover, .dark a:active { color: #53aedd; text-decoration: underline; }	
	
	h1,h2,h3 { font-weight: normal; margin: 0px; }
	h1 { font-size: 22px; }
	h1.page-title { text-transform: uppercase; color: #f1e38a; letter-spacing: 5px; display: block; clear: both; margin-bottom: 13px; font-weight: normal; /* was looking too "fat" in certain browsers */ } 
	h2 { color: #000e30; margin-top: 6px; font-size: 14px; font-weight: bold;  }
	h2.page-sub-title { color: #f1e38a; margin: 6px 0px 11px 0px; font-size: 18px; letter-spacing: 1px; font-weight: normal; } /* pages that have subheadings need less space between heading and copy - override on specific pages (about and jet fleet) */
	
	ul, li { margin: 0px; padding: 0px; }
	
	p { margin: 4px 0px 8px 0px; }
	
	/* Want to buy CSS3 support in all browsers. background-size: property would have made this a WHOLE lot easier! */
	img#clouds-background-image { width: 100%; position: fixed; bottom: 0px; } /* This is the main background-image, injected via. Javascript */
	
	/* No Javascript Warning */
	div#no-javascript {padding: 10px 20px 10px 10px; background-color: #990033; color: #fff; position: relative; text-align: right; padding-left: 260px; /* Width of logo */ }
	
	/* themes */
	.dark div#content { background-color: #000e30; }
	.light div#content { background-color: #4fb0e2; }
 
/*	MODIFIERS
	------------------------------------------------------------- */
	.clear { clear:both; line-height: 1px; height: 1px; font-size: 1px; }
	
	.gold { color: #f1e38a; /* 'Gold' */}
	
	.grey-border { border: 2px solid #c4b89e; }
	

	/* The Halo effect on Quick View (Will not show on IE6 (_background: none) this is deliberate) */
	.halo-bg{
		position:				absolute;
		width:					33px;
		height:					40px;
	}
	
	.halo-bg-n{
		left:					0;
		top:					-40px;
		width:					100%;
		background:				url("img/halo/bg_n.png") repeat-x;
		_background: none; 
	
	}
	.halo-bg-ne{
		right:					-33px;
		top:					-40px;
		background:				url("img/halo/bg_ne.png") no-repeat;
		_background: none; 
	
	}
	.halo-bg-e{
		right:					-33px;
		top:					0;
		height:					100%;
		background:				url("img/halo/bg_e.png") repeat-y;
		_background: none; 
	
	}
	.halo-bg-se{
		right:					-33px;
		bottom:					-40px;
		background:				url("img/halo/bg_se.png") no-repeat;
		_background: none; 
	}
	.halo-bg-s{
		left:					0;
		bottom:					-40px;
		width:					100%;
		background:				url("img/halo/bg_s.png") repeat-x;
		_background: none; 
	}
	.halo-bg-sw{
		left:					-33px;
		bottom:					-40px;
		background:				url("img/halo/bg_sw.png") no-repeat;
		_background: none; 
	}
	.halo-bg-w{
		left:					-33px;
		top:					0;
		height:					100%;
		background:				url("img/halo/bg_w.png") repeat-y;
		_background: none; 
	}
	.halo-bg-nw{
		left:					-33px;
		top:					-40px;
		background:				url("img/halo/bg_nw.png") no-repeat;
		_background: none; 
	
	}


/*	LAYOUT
	------------------------------------------------------------- */
	/* 	GLOBAL */
	div#page-wrapper { text-align: left; }


	/*	HEADER */
	#header-logo { z-index: 100; position: absolute; width: 250px; height: 84px;  }
	#header { z-index: 100; background-color: #000e30; text-align: left; color: #4fb0e1; }
	#header a:link, #header a:visited,
	#header a:hover, #header a:active { z-index: 100; color: #4fb0e1; text-decoration: none; }
	body#homepage #header { z-index: 100; background-color: #000E30; color: #4FB0E1; }
	body#homepage #header a { z-index: 100; color: #4FB0E1; }
	
	#header-spacer { z-index: 100; height: 50px; padding: 0px; margin: 0px; } /* Adds a spacer between the menu and the main content to prevent the overlayed logo overlaying primary content */
	
	#header-spacer.light { z-index: 100; background-color: #50b1e3; }
	#header-spacer.dark { z-index: 100; background-color: #000e30; }
	
	/*	CONTENT */
		
	div#homepage-image-wrapper {width: 950px; height: 630px; overflow: hidden; text-align: center; z-index: 0; background-color: #000e30; }
	span#homepage-image-txt { position: absolute; left: 0px; top: 481px; }
	
	div#inner-wrapper {
		width: 950px; 
		position: absolute; /* Must be absolute for Halo effect */ 
		top: 0px; left: 50%; 
		margin-left: -475px; 
	}
	div#banner {/*border-top: 1px solid #1a7499;*/ border-bottom: 4px solid #53aedd; position: relative; /* added after the spec roll up/down */ }
	
	div#spec-tab { right: 0px; bottom: 0px; /*left: 726px; top: 543px;*/ position: absolute; background: url("../images/specs/specs_tab_closed.png") no-repeat; width: 224px; height: 42px; z-index: 20; }
	div#spec-wrapper { overflow: hidden !important; position: absolute !important; bottom: 0px; right: 0px; z-index: 15;}
	
	div#spec-content-top { position: relative; background: url("../images/specs/specs_yellow_top.png") no-repeat; width: 224px; height: 16px; }
	div#spec-content { padding-bottom: 50px; background-color: #f4e787; width: 224px; height: auto; }
	
	div#spec-specs { padding-left: 30px; padding-top: 5px; font-family:Helvetica; font-size: 11px; color: #000000; }
	div#spec-amenities { padding-left: 30px; padding-top: 6px; padding-bottom: 24px; font-family:Helvetica; font-size: 11px; color: #000000; }
	#spec-title { font-size: 12px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; }
	
	div#seating-chart { margin: 0 auto; text-align: center; width: auto; height: auto; padding: 10px; }
	
	span#virtual-tour-url { text-align: right; left: 860px; top: 598px; position: absolute; }	
	
	div#content { padding: 40px 50px 25px 50px; }
	div#content ul { margin: 0px 0px 10px 15px; }
	
	div#container { width: 500px; height: 400px; }


	/*div#vr-overlay {
		position : absolute; 
		color: #fff;
		cursor: pointer; 
		background-color: #000e30; 
		border: 1px solid #e7d476; 
		padding: 10px;
		cursor: move; 
	}
	*/

	div#iphone-overlay { position : absolute; color: #fff; cursor: pointer; background-color: #000e30; border: 1px solid #e7d476; padding: 10px; cursor: move; text-align: center; z-index: 4000; width: 510px; top: 100px; left: 50%; margin-left: -250px; visibility: hidden; opacity: 0; }
	div#iphone-overlay-wrapper { text-align:center; clear:both; }

	.left-col { float: left; width: 570px; padding-right: 30px; }
	.right-col { float: right; width: 240px; }

	.sitemap-left-col { float: left;  padding-right: 30px; width: 375px; }
	.sitemap-right-col { float: right; margin-right: 193px; width: 240px; }
	
	/*	FOOTER */
	/* 2 Themes. light/dark, default = dark... , set using SMARTY variable $sTheme, this will inject a class name reflective of name */
	div#footer { text-align: center; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }
	#footer ul { display: block; padding: 10px 8px; /*text-transform:uppercase;*/ margin: 0px auto; }
	#footer ul li { list-style-type: none; display: inline; padding: 0px 13px;  }
	#footer ul li.lastitem { border-right: none; }
	
	/* Light (NOTE: Preserve id.class spacing... ) */	
	#footer.light { background-color: #50b1e3; color: #000e30; }
	#footer.light a:link, #footer.light a:visited { color: #000e30; text-decoration: none; }
	#footer.light a:hover, #footer.light a:active { color: #000e30; text-decoration: underline; }
	/* Dark */
	#footer.dark { background-color: #000e30; color: #53aedd; }
	#footer.dark a:link, #footer.dark a:visited { color: #53aedd; text-decoration: none; }
	#footer.dark a:hover, #footer.dark a:active { color: #53aedd; text-decoration: underline; }
	
	
	/*	PAGE SPECIFIC
		---------------------------------------------------------- */
		
	/* Home */
	body#homepage #content { padding: 0px; }
		
	/* 	Sitemap */
	body#sitemap div#content ul { float: left; margin-left: 0px; margin-right: 30px; list-style-type: none; }
	body#sitemap div#content ul ul { margin-left: 20px; list-style-type: circle; float: none; }
	body#sitemap div#content li { line-height: 25px; }
	
	body#sitemap ul#top-nav-map li a.submenu { cursor: default; }
	body#sitemap ul#top-nav-map li a.submenu:hover { text-decoration: none; }

	
	/* Affiliations */
	div.aff-logo { margin-bottom: 35px; }
	body#affiliations .left-col, 
	body#affiliations .right-col { width: 410px; }
	
	/* Safety */
	body#safety div#wyvern, body#safety div#passready { float: right; clear: right; padding: 10px 0px 10px 25px; }
	
	
	/*	Pilots/Personnel */
	div#pilots-wrapper { width: 850px; margin-left: 10px; }  /* Width of content 950 total.width - 100px content.padding */
	div.pilot { height: 280px; width: 206px; margin-bottom: 10px; padding-left: 5px; float:left; position: relative; }
	
	div.pilot-left { width: 100px; float: left; } /* Width of Image = 90px; (Added a bit extra for padding) */
	div.pilot-right { margin-left: 10px; width: 290px; /* 400px-100px(left)-10px margin */  float: left;   }
	
	span.pilot-name { color: #f1e38a; font-weight: bold; display: block; clear: both; line-height: 14px; padding-left: 20px; padding-top: 10px; font-size: 15px; }
	span.pilot-jobtitle { color: #f1e38a; display: block; clear: both; line-height: 17px; font-size: 13px; padding-left: 20px; }
	span.pilot-url { display: block; clear: both; line-height: 17px; padding-left: 20px; }
	span.pilot-bio p { margin-top: 5px; }




	
	.bioWrapper-outer {overflow: hidden !important; left: -15px !important; bottom: 30px !important; z-index: 15; position: absolute !important; /* padding-bottom: 52px; */ margin-left: -14px; }
	.bioWrapper { }
	.bioInfo-top    { background: url("../images/bios/bio_box_top.png") no-repeat; position: relative;  width: 232px; height: 15px; z-index: 40; }
	.bioInfo    	   { background: url("../images/bios/bio_box.png") repeat-y scroll 0 0 transparent;  width: 232px; height: auto; z-index: 41; }
	div#bioInfo-text   { width: 170px; padding-left: 30px; padding-bottom: 15px; padding-top: 15px; }
	.bioInfo-bottom { background: url("../images/bios/bio_box_bottom.png") no-repeat; position: relative; width: 232px; height: 15px; /* visibility: hidden; */ z-index: 42; }
	
	
	
		
	/*
	div#spec-tab { right: 0px; bottom: 0px; background: url("../images/specs/specs_tab_closed.png") no-repeat; width: 224px; height: 42px; z-index: 20; }
	div#spec-wrapper { overflow: hidden !important; position: absolute; bottom: 0px; right: 0px; z-index: 15;}
	div#spec-content-top { position: relative; background: url("../images/specs/specs_yellow_top.png") no-repeat; width: 224px; height: 16px; }
	div#spec-content { padding-bottom: 50px; background-color: #f4e787; width: 224px; height: auto; }
	*/
	
	
	/* FAQ */
	body#info_faq #content { }
	div#faqs-wrapper { width: 840px; /* 950px - 40px   padding: 20px;*/ }
	div#faqs-wrapper ul { display: block; margin-left: 0px; }
	div#faqs-wrapper ul li {display: block; clear: both; padding: 8px 8px 8px 2px; color: #000f30; font-weight: bold; }
	div#faqs-wrapper ul li.selected { background-color: #3097d6 !important; /* To ensure Mootools effects don't override this use !important */ }

	div#faqs-wrapper ul li a { color: #000f30; text-decoration: none; font-weight: normal;  }
	div#faqs-wrapper ul li a:hover { color: #000f30; text-decoration: underline; font-weight: normal;   }
	/*
	div#faqs-wrapper ul li:hover { text-decoration: underline; } 
	*/
	div#faq-left { float: left; width: 420px; /* 840px/2 width - 16px li padding */  }
	div#faq-right { float: right; width: 380px; /* 840px/2-40 padding - left ( */ background-color: #3298d8; padding: 0px 20px;  /* Height attribute dynamically set through JS */  }
	div.answer { display: block; clear: both; }
	

	/* About Us */
	body#about h1.page-title { margin-bottom: 8px; }
	body#about h2.page-sub-title {  } 
		
	/* Get Quote width = 910/2 */
	body#quote #content { }
	body#quote .left-col { float: left; width: 400px;  text-align: left;  }
	body#quote .right-col { float: left; width: 420px; text-align: left; }
	
	div#success-panel { height: 450px; }
	
	/* Handled with JavaScript now .... */	
	/*
	span.calendar-icon {padding-left: 8px;  }
	span.calendar-icon img {vertical-align: top; }
	*/
	
	
	/* Planes */
	body.plane-info {}
	body.plane-info #content { padding-right: 30px; /* override 50px on right */}
	.plane-info h1.page-title { margin-bottom: 8px; /* overriding general margin-bottom - same as about us */ }
	div.plane-details { width: 850px; margin: 0px; padding: 0px; } /* Details Wrapper */
	
	div.plane-details div.left-col { float: left; width: 575px; text-align: left; padding-right: 0px; /*padding-left: 20px; only on 450 */ }
	div.plane-details div.right-col { float: left;  width: 275px; /* 950 - (535left+40leftpadding) */ text-align: left; }
	
	dl#plane-data { clear: both; }
	dl#plane-data dt { margin: 0px; padding: 0px; float: left; width: 100px; display: block; }
	dl#plane-data dd { margin: 0px; padding: 0px; float: left; width: 170px; display: block; }
	
	/* PANOS */ 
	div#vr-overlay {
		position : absolute; 
		color: #fff;
		cursor: pointer; 
		background-color: #000e30; 
		border: 1px solid #e7d476; 
		padding: 10px;
		cursor: move; 
	}
	div#vr-overlay-wrapper {clear: both; }
	#vr-swf-file {cursor: pointer; }
	
	/* plane specific */
	#fal900-details div#virtual-tour-url { margin-top: -94px; margin-left: 190px; }
	#g150-details div#virtual-tour-url { margin-top: -73px; margin-left: 140px; }
	
	/* For alternative Pano' action */	
	div#close-button {background-color: #000; width: 100px; padding: 10px; position: absolute;  }
	
	
	/* DIRECTIONS : NOTE: Overall width = 950px - content w/40px padding = 910px */
	#directions h1.page-title { text-transform: none; letter-spacing: 1px; line-height: 24px; }
	body#directions .left-col {/*width: 651px;  910px - 239px (right) - 20px (Gap between cols) */ }
	body#directions .right-col {/*width: 239px; Width of Image */ text-align: right; }
	#google-map { height: 340px; }
	#google-map-directions { width: 500px; height: 500px; margin: 0px; }
	#directions-btn { position: relative; z-index: 300; top: 37px; left: 15px; width: 90px; } /* Relative to Google-map */
	#directions-btn a {color: #000e30; text-decoration: none; }
	#directions-btn a:hover {color: #000e30; text-decoration: underline; }
	
	div.directions-col { float: left; width: 300px; }
	div.map-col { float: left; padding-top: 19px; padding-left: 40px; width: 500px; }
	div#did-you-mean a{}
	div#did-you-mean a:hover {}

	
/*	FORMS
	--------------------------------------------------------------- */

	/* FORMS (GLOBAL) */
	form { margin: 0px; padding: 0px;  }
	form label { font-size: 13px; }
	form input,
	form textarea,
	form select,
	button{
		font-size: 11px; padding: 6px; color: #000e30; 
	}
	form textarea { font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif; width: 285px; }
	div.form-buttons { clear: both; } /* Wrapper around form-buttons */
	input.form-button { padding: 4px; } /* Individual buttons */ 
	p.field-row {display: block; clear: both; margin-bottom: 10px; } /* Margin between fields */
	
	/* FORMS (TARGETTED) */
	form#contact_form { }
	form#contact_form label, form#quote_form label { display: block; } 
	form div.opt-in-field { margin-bottom: 10px; font-size: 10px; }
	form div.opt-in-field input { float: left; margin-top: 2px; }
	form div.opt-in-field label { float: left; margin-left: 5px; font-size: 11px; }
	
	form#quote_form select { width: 60px; }
	
	
	/* ERRORS */
	/* #ffcccc; = pink... Yup!, don't ask me! */ 
	.errors {color: #ffcccc; }
	input.errors,
	textarea.errors { background-color: #ffcccc; color:#000e30; }
	ul.errors li{ color: #ffcccc; list-style-type: none; }
	

	
	
	
/*	HIDDEN PANELS
	--------------------------------------------------------- */
	#overlay-mask{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%; 
		height: 2000%; 
		/* background: #070f21 url("img/overlay_bg.jpg") top left no-repeat; */
		background-color: #000e30; 
		filter:alpha(opacity=80);
		-moz-opacity: 0.8;
		opacity: 0.8;
		line-height: 0px; 
		z-index: 2000; 
	}

	#pilot-overlay-wrapper {
		position: absolute; 
		top: 0px; 
		left: 0px; 
		z-index: 3000; 
		background-color: #000e30; border: 2px solid #f1e38a; width: 340px; 
		padding: 25px 30px 0px 30px; /* bottom padding in JS */
		
	}
	img.ajax-loader { margin-right: 10px; vertical-align: middle; }
	
	body#personnel #pilot-content { text-align: left; }