@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: Lucida Grande, Lucida Sans, Arial, sans-serif !important;
	font-size: 12px !important;
	line-height: normal !important;
	letter-spacing:normal !important;
	word-spacing:normal !important;
	z-index: 999 !important;
}
#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: #A7C2CE url(centralBG.png) 50% 50% repeat-x; }
/* 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: 10px !important; font-weight: normal !important; }
#centralHeader #companyButton a { color: black !important; text-decoration:none; }
#centralHeader #companyButton a:hover { color: white !important; }

#centralFooter { width: 100%; background: #A7C2CE; }
#centralFooter #centralFooterTitle { clear: both; font-weight:bold !important; padding: 10px; font-size: 14px !important; text-align:center; }
#centralFooter .footerColumn { width: 25%; position: relative; float: left; }
#centralFooter .footerColumn p { margin-bottom: 5px; margin-left: 20px; }
#centralFooter .footerColumn ul { margin-top: 0; margin-bottom: 5px;}
#centralFooter .footerColumn ul li { margin-left: -10px; list-style:none; text-indent: -10px; }
#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; white-space:nowrap; }


/* 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 auto; 	}

/****************
* 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
**********************/
@media screen {
	.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);
	}
}

@media screen {
	.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);
	}
}

@media screen {
	.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 */
@media screen {
	.curled-shadow { position: relative; }
}
@media screen {
	.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; /* this gives problems in chrome on flatplan mouseover */
		-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);
	}
}
@media screen {
	.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 */
@media screen {
	.bulged-shadow { position:relative; }
}
@media screen {
	.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;
	} 
}
@media screen {
	.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);
	}
}
@media screen {
	.bulged-bottom-shadow { position:relative; }
}
@media screen {
	.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;
	} 
}
@media screen {
	.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 */
@media screen {
	.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 */