@charset "utf-8";
/* CSS Document */

/* styles common to all maggie sites will go in here.  Specifically for the headers and footers */
#centralHeader, #centralFooter {
	clear: both !important;
	position: relative !important;
	color: white !important;
	font-family: Tahoma, Geneva, sans-serif !important;
	font-size: 1em;
	line-height: normal !important;
	letter-spacing:normal !important;
	word-spacing:normal !important;
/* any reason for the h&f to have a z-index?  Reduced from 999 to 100 to fix forum */
	z-index: 100 !important;
	max-width: 1500px; margin: auto;
}
#centralHeader a, #centralFooter a { text-decoration: none !important; color: white !important; }
#centralHeader a:hover, #centralFooter a:hover { text-decoration:underline !important; }

#centralHeader { font-weight: normal !important; height: 25px; 
background:#333;
box-shadow:2px 2px 2px #000 inset;
 }
/* Simon testing
#centralHeader ul { top: 5px; position: relative; }
#centralHeader ul, #centralHeader li { list-style:none; display:inline; margin-left: 20px; margin-right: 5px; padding-left: 0; white-space:nowrap; }
*/
#centralHeader #companyButton { position: absolute; top: 0; left: 0; font-size: 0.9em !important; font-weight: normal !important; }
.sf-menu a {border-left:1px solid #777 !important;}
#centralFooter { width: 100%; 
padding:0 10%;
background: rgb(3,29,64); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(3,29,64,1) 0%, rgba(93,142,186,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(3,29,64,1)), color-stop(100%,rgba(93,142,186,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(3,29,64,1) 0%,rgba(93,142,186,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(3,29,64,1) 0%,rgba(93,142,186,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(3,29,64,1) 0%,rgba(93,142,186,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(3,29,64,1) 0%,rgba(93,142,186,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#031d40', endColorstr='#5d8eba',GradientType=0 ); /* IE6-9 */
 }
#centralFooter #centralFooterTitle { clear: both; font-weight:bold !important; padding: 10px; font-size: 14px !important; text-align:center; }
#centralFooter .footerColumn { width: 23%; position: relative; float: left; margin-right:10px; }
#centralFooter .footerColumn p { margin-bottom: 5px; }
#centralFooter .footerColumn ul { margin-top: 0; margin-bottom: 5px;}
#centralFooter .footerColumn ul li { list-style:none;}
#centralFooter #centralFooterBase { clear: both; padding: 5px; text-align: center; }
#centralFooter #centralFooterBase ul, #centralFooter #centralFooterBase li { list-style:none; display:inline; margin-left: 15px; margin-right: 15px; padding: 0; }


/* Simon testing */
/* begin css tabs */
/* Header tabs will not be required once all sites have switched over to dropdown menus (incl shop, forum, etc.)
*/
ul#headerTabs { /* general settings */
text-align: right; /* set to left, right or center */
margin: 0 0 0 0; /* set margins as desired */
font: normal 12px Lucida Grande, Lucida Sans, Arial, sans-serif !important; /* set font as desired */
color: #fff;
border-bottom: 1px solid #708791; /* set border COLOR as desired */
list-style-type: none;
padding: 7px 10px 2px 10px; /* THIRD number must change with respect to padding-top (X) below */
}

ul#headerTabs li { /* do not change */
display: inline;
line-height: normal;
}

ul#headerTabs li.selected li { /* settings for selected tab */
/* border-bottom: 1px solid red; /* set border color to page background color */
background-color: #fff; /* set background color to match above border color */
}

ul#headerTabs li.selected a { /* settings for selected tab link */
background-color: #c4e4f2; /* set selected tab background color as desired */
color: #000 !important; /* set selected tab link color as desired */
position: relative;
padding-top: 4px;
}
ul#headerTabs li a { /* settings for all tab links */
padding: 2px 15px; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */
border: 1px solid #708791; /* set border COLOR as desired; usually matches border color specified in #headerTabs */
border-right: 2px solid #586b73;
border-bottom: none;
background-color: #87a4b0; /* set unselected tab background color as desired */
color: #fff !important; /* set unselected tab link color as desired */
margin-left: -5px; /* set additional spacing between tabs as desired */
text-decoration: none;
}

ul#headerTabs a:hover { /* settings for hover effect */
background: #a7c2ce; /* set desired hover color */
color: black !important; 
text-decoration: none !important;
padding-top: 3px;
}

/* end css tabs */


/* misc styles */
.hideMe { display:none; }
/* hide everything classed as print */
.screen { }
.print { display:none; }
/* end of misc styles (thought there might be more than that) */


/* central shadow container - currently only used on shop, but will be rolled out to other sites */
.shadowContainer { position: relative; width: 970px; margin-left: -500px; left: 50%; padding: 15px; }
.shadowContainer .shadow { position: absolute; }
.shadowContainer .shadowEdge { left: 25px; right: 25px; height: 25px; }
.shadowContainer .shadowSide { top: 25px; bottom: 25px; width: 25px; }
.shadowContainer .shadowTop { top: 0; background-image:url(http://key.aero/images/shadow/t.png); }
.shadowContainer .shadowBottom { bottom: 0; background-image:url(http://key.aero/images/shadow/b.png); }
.shadowContainer .shadowLeft { left: 0; background-image:url(http://key.aero/images/shadow/l.png); }
.shadowContainer .shadowRight { right: 0; background-image:url(http://key.aero/images/shadow/r.png); }
.shadowContainer .shadowCorner { width: 25px; height: 25px; }
.shadowContainer .shadowTL { top: 0; left: 0; background-image:url(http://key.aero/images/shadow/tl.png);  }
.shadowContainer .shadowTR { top: 0; right: 0; background-image:url(http://key.aero/images/shadow/tr.png); }
.shadowContainer .shadowBL { bottom: 0; left: 0; background-image:url(http://key.aero/images/shadow/bl.png); }
.shadowContainer .shadowBR { bottom: 0; right: 0; background-image:url(http://key.aero/images/shadow/br.png); }
.shadowContainer .shadowContent { position: relative; }
/* End of shadow container */

.noSho { display: none; }

/* images within articles */
.leftImageDiv IMG, .rightImageDiv IMG, .fullImageDiv IMG { border: 1px solid black; }
.leftImageDiv, .rightImageDiv, .fullImageDiv { margin-top: 0px; margin-bottom: 5px; }
.leftImageDiv, .rightImageDiv { width: 225px; }
.rightImageDiv { margin-left: 10px; margin-right: 2px; float:right; }
.leftImageDiv { margin-right: 10px; margin-left: 2px; float:left; }
.fullImageDiv { width: 468px; margin-right: 0px; margin-left: 0px; float:left; clear: both; }

/* please wait overlay div (copied from Maggie NOTE: there is an extra style in the maggie stylesheet and div in header just for the maggie site) */
#waitingDiv { position: fixed; display: none; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; z-index:1000; min-height: 100%;
	cursor: default;
	-ms-user-select: none; /* IE 10+ */
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}
#waitingDiv #waitingBG {
	width: 100%; height: 100%; position: absolute; 
/*	was: background: #2e6e9e; opacity:0.3; filter:alpha(opacity=30); /* For IE8 and earlier */
/*	http://www.colorzilla.com/gradient-editor/... */
	background: -moz-radial-gradient(center, ellipse cover,  rgba(46,110,158,0.25) 0%, rgba(46,110,158,0.25) 1%, rgba(46,110,158,0.8) 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(46,110,158,0.25)), color-stop(1%,rgba(46,110,158,0.25)), color-stop(100%,rgba(46,110,158,0.8))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(46,110,158,0.25) 0%,rgba(46,110,158,0.25) 1%,rgba(46,110,158,0.8) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover,  rgba(46,110,158,0.25) 0%,rgba(46,110,158,0.25) 1%,rgba(46,110,158,0.8) 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover,  rgba(46,110,158,0.25) 0%,rgba(46,110,158,0.25) 1%,rgba(46,110,158,0.8) 100%); /* IE10+ */
	background: radial-gradient(ellipse at center,  rgba(46,110,158,0.25) 0%,rgba(46,110,158,0.25) 1%,rgba(46,110,158,0.8) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#402e6e9e', endColorstr='#cc2e6e9e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#waitingDiv #waitingBox { position: relative; width: 250px; padding: 3px; left: 50%; margin-left: -125px; top: 40%; display: none;
	-webkit-box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.1);
}
#waitingDiv .ui-widget-header { padding: 5px; }
#waitingDiv .waitingBody { margin: 15px; text-align: center; }
#waitingDiv .waitingBody img { margin-bottom: 10px; }
#waitingDiv #waitingMsg p { margin-top: 10px; padding-top: 10px; border-top: 1px dotted black; }

/* Login form */
ul#accountList { list-style:none; }
#accountList li { padding:5px;}
#formLogin input { padding: 5px; border-radius: 5px; font-size: 1.1em; }
#formLogin label { margin-right: 10px; font-size: 1em; }

/* Page border */
#shadow { 	box-shadow: 1px 1px 15px #999; 	width:970px;  	background:#FFF; 	margin:20px 10px; 	}

/****************
* Shadow Styles *
****************/
/* These are in three sections.  One that can be used in all situations, one that over-rides position styles, and a misc */

/* 1. Standard Shadows
**********************/
.standard-shadow {
	-webkit-box-shadow: 0 10px 6px -6px rgba(0,0,0,0.25);
	box-shadow: 0 10px 6px -6px rgba(0,0,0,0.25);
}

.shallow-shadow { 
	-webkit-box-shadow: 0 8px 4px -8px rgba(0,0,0,0.25);
	box-shadow: 0 8px 8px -8px rgba(0,0,0,0.30);
}

.raised-shadow {
	-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.25);
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.30);
}


/* 2. Position-dependant Shadows
********************************/
/* {this sets the position of the container to relative, which may affect your display */
.curled-shadow { position: relative; }
.curled-shadow:before, .curled-shadow:after {
	z-index: -1;
	position: absolute;
	content: "";
	bottom: 15px;
	left: 10px;
	width: 50%;
	top: 80%;
	max-width:300px;
	background: #777;
	-webkit-box-shadow: 0 15px 10px #777;
	-moz-box-shadow: 0 15px 10px #777;
	box-shadow: 0 15px 10px #777;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
}
.curled-shadow:after {
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
	right: 10px;
	left: auto;
}

/* the two bulging shadows look better on wider (landscape) containers */
.bulged-shadow { position:relative; }
.bulged-shadow:before, .bulged-shadow:after {
	content:"";
	position:absolute; 
	z-index:-1;
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
	box-shadow:0 0 20px rgba(0,0,0,0.8);
	top:0;
	bottom:0;
	left:10px;
	right:10px;
	-moz-border-radius:100px / 10px;
	border-radius:100px / 10px;
} 
.bulged-shadow:after {
	right:10px; 
	left:auto;
	-webkit-transform:skew(8deg) rotate(3deg); 
	-moz-transform:skew(8deg) rotate(3deg);     
	-ms-transform:skew(8deg) rotate(3deg);     
	-o-transform:skew(8deg) rotate(3deg); 
	transform:skew(8deg) rotate(3deg);
}

.bulged-bottom-shadow { position:relative; }
.bulged-bottom-shadow:before, .bulged-bottom-shadow:after {
	content:"";
	position:absolute; 
	z-index:-1;
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
	box-shadow:0 0 20px rgba(0,0,0,0.8);
	top:50%;
	bottom:0;
	left:10px;
	right:10px;
	-moz-border-radius:100px / 10px;
	border-radius:100px / 10px;
} 
.bulged-bottom-shadow:after {
	right:10px; 
	left:auto;
	-webkit-transform:skew(8deg) rotate(3deg); 
	-moz-transform:skew(8deg) rotate(3deg);     
	-ms-transform:skew(8deg) rotate(3deg);     
	-o-transform:skew(8deg) rotate(3deg); 
	transform:skew(8deg) rotate(3deg);
}

/* 3. Misc Shadows
******************/
/* give inner shades to the div */
/* NOTE: Can't use in conjunction with other shadows */
.vignette-shadow {
	-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
/* End of Shadow styles */

/**************
* Form Styles *
**************/
/* Currently all forms have to opt in to the styles (have classes added.  This may be changed in future, but it's applied as styles are rolled out */
.formMe label {
	display: block;
	font-weight: bold;
	font-size: 0.95em;
	margin-top: 5px;
	margin-bottom: 2px;
}
.formMe label.chk { /* over-ride for checkboxes */
	font-weight: normal;
	font-size: 1em;
	margin-top: 5px;
	margin-bottom: 5px;

    padding-left: 15px;
    text-indent: -15px;
}
.formMe label .note { /* put a span inside a label for extra non-bold information */
	font-weight: normal;
}
.formMe label.radio { /* over-ride for radio buttons (specifically buttonset) */
	display: inline-block;
}
.formMe input[type="text"], .formMe input[type="email"], .formMe input[type="url"], .formMe input[type="tel"], .formMe input[type="date"], .formMe input[type="number"], .formMe input[type="file"], .formMe input[type="password"], 
.formMe select, .formMe textarea {
	width: 100%;
}
.formMe .dt { /* over-ride for date fields with icon to the right */
	width: 95% !important; /* fallback if needed */
	width: calc(100% - 24px) !important;
}
.formMe .clearDate { cursor:pointer; width: 16px; height: 16px; border: none; margin-left: 4px; }

.formMe input[type="checkbox"] {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0; margin-right: 3px;
    vertical-align: bottom;
    position: relative;
    top: -1px;
    *overflow: hidden;	
}
.formMe input[type="text"], .formMe input[type="email"], .formMe input[type="url"], .formMe input[type="tel"], .formMe input[type="date"], .formMe input[type="number"], .formMe input[type="file"], .formMe input[type="password"], .formMe select, .formMe textarea {
	-webkit-border-radius: 4px;
	border-radius: 3px;
	padding: 6px;
	border: 1px solid #999;
	-moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5); 
	-webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5); 
	box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
	color: #000;
	font-weight: 400;
	font-size: 1.1em;
	margin-bottom: 5px;

	/* get select to be 100% */
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.formMe input[type="text"]:focus, .formMe input[type="email"]:focus, .formMe input[type="url"]:focus, .formMe input[type="tel"]:focus, .formMe input[type="date"]:focus, .formMe input[type="date"]:focus, .formMe input[type="file"]:focus, .formMe input[type="checkbox"]:focus, .formMe input[type="password"]:focus, .formMe select:focus, .formMe textarea:focus {
	border:solid 1px #000; 
	-moz-box-shadow: none; 
	-webkit-box-shadow: none; 
	box-shadow: none;
	outline: none;

    border:1px solid #555; 
    box-shadow: 0 0 5px 1px #5c9ccc;
}

.formMe input[type="text"]:disabled, .formMe input[type="email"]:disabled, .formMe input[type="url"]:disabled, .formMe input[type="tel"]:disabled, .formMe input[type="date"]:disabled, .formMe input[type="number"]:disabled, .formMe input[type="file"]:disabled, .formMe input[type="checkbox"]:disabled, .formMe input[type="password"]:disabled, .formMe select:disabled, .formMe textarea:disabled {
	border:solid 1px #000; 
	-moz-box-shadow: none; 
	-webkit-box-shadow: none; 
	box-shadow: none;
	outline: none;

    border:1px solid #ccc; 
	color: #ccc;
}

.formMe fieldset {
	border-radius: 3px;
    border:1px solid #999; 
	margin: 10px 0;
	padding-left: 15px;
	padding-right: 15px;

	-moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5); 
	-webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5); 
	box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
}
.formMe legend {
	padding: 0 7px;
	margin: 0;
}
.formMe h5 { margin-bottom: 0; }

.formMe hr { /* copied from flatplan - make central? */
	border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.55), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0.55), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0.55), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0.55), rgba(0,0,0,0)); 	
}
.formMe .width-override { width: auto !important; } /* used when you don't want 100% wide */
.formMe .display-override { display: inline-block !important; } /* used when you don't want labels to be on separate lines */
.formMe .margin-override { margin: 1px 0 !important; } /* used when you don't want space between fields */
.formMe .buttonset { font-size: 1.1em !important; display: inline-block !important; margin-top: 0 !important } /* apply to label - to patch up buttonsets (combination of parts of other styles above */
/* End of form styles */



/* when there's an error or notification... */
.alert-box {
	padding: 0 .7em;
	margin: auto;
	z-index: 1;
	position: relative;
}
.alert-box .ui-icon { float: left; margin-right: .3em; }

/* links for buy now and sub */
a.buy-now:active, a.buy-now:visited, a.buy-now:link, a.sold-out:active, a.sold-out:visited, a.sold-out:link, a.subscribe:active, a.subscribe:visited, a.subscribe:link, a.online-content:active, a.online-content:visited, a.online-content:link {
	display:block;
	width:132px;
	height:34px;
	margin:2px;	
}
a.buy-now:hover, a.sold-out:hover, a.subscribe:hover, a.online-content:hover {
	border:none;
	text-decoration:none;
}

a.buy-now:active, a.buy-now:visited, a.buy-now:link { background: url(/central/images/shop/buy-now-btn.png) no-repeat; text-decoration:none;
 }
a.buy-now:hover { background: url(/central/images/shop/buy-now-btn-d.png) no-repeat; }

a.sold-out:active, a.sold-out:visited, a.sold-out:link { background: url(/central/images/shop/sold-out-btn.png) no-repeat; text-decoration:none;
}
a.sold-out:hover { background: url(/central/images/shop/sold-out-btn-d.png) no-repeat; }

a.subscribe:active, a.subscribe:visited, a.subscribe:link { background: url(/central/images/shop/subscribe-btn.png) no-repeat; 	text-decoration:none;
}
a.subscribe:hover { background: url(/central/images/shop/subscribe-btn-d.png) no-repeat; }

a.online-content:active, a.online-content:visited, a.online-content:link { background: url(/central/images/shop/online-content.png) no-repeat; text-decoration:none;
 }
a.online-content:hover { background: url(/central/images/shop/online-content-d.png) no-repeat; }

/* end of buy now and sub links */

@media screen and (max-width:675px){
	#centralFooter .footerColumn{
		width:100%;
		font-size:1.4em;
		float:none;
		padding:0px 20px;
	}
	#centralFooter #centralFooterBase li{
		display:block;
	}
	.sf-menu{
		display:none;
	}
}