@charset "utf-8";
/* CSS Document */

* {margin:0; padding:0; border:0;} /*zero-out margin, padding, and border since browsers may not have the same defaults*/
p, h1, h2, h3, h4, h5, h6 {margin:1em 0;} /*add margin back to p*/

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#00f;
	background:#31353d url(../images/global/layout/background.jpg) repeat-x;
	text-align:center; /*force IE 5.x to center the layout-container*/
}
a:hover {
	background-color:#ffc;
}

/*********** HEADING STYLES ***********/
h1 {
	font-size:36px;
	font-weight:bold;
}
h1#pageTitle {
	font-size:16px;
	color:#ccc;
	margin-bottom:10px;
}
h2 {
	font-size:24px;
}
h2#pageDescription {
	font-size:12px;
	margin-bottom:10px;
}
h2#articleTitle, .articleTitle {font-size:18px; font-weight:400; color:#0d66d0; text-align:center;}
/* Note: H3 is used in the HTML of the listing details, and it needs to match the H2 used in other areas of the site - so H2 & H3 need to be the same */
h3 {
	font-size:24px;
}
h4 {
	font-size:16px;
}
h5 {
	font-size:14px;
	font-weight:bold;
}

/*********** LAYOUT STYLES ***********/
/*#bannerad {
	width:468px;
	height:60px;
	z-index:5;
	left:153.5px;
	top:25px;
	margin:0px;
	padding:0px;
	position:absolute;
}*/
#layout-center {
	margin:0 16px;
}
#layout-container {
	/*height:100%;
	min-height:100%;*/
	width:1000px;
	background-color:#fff;
	background:url(../images/global/layout/bkgrndContainer.jpg) repeat-y;
	text-align:left; /*realign text to left - after body 'text-align:center' hack for IE 5.x*/
	margin:0 auto; /*center in browser window*/
	padding:0;
}
/*#layout-content-abovebody {
	padding-top:10px;
}*/
#layout-content-body ul {
	margin:20px
}
#layout-content-container {
	width:748px;
	margin:0 200px 0 0;
	padding:10px;
}
#layout-footer {
	height:75px;
	color:#ffffff;
	text-align:center;
	background:url(../images/global/layout/footer.jpg) no-repeat bottom;
	margin:0 16px;
}
#layout-footer td, #layout-footer a:link, #layout-footer a:visited {
	color:#fff;
}
#layout-footer a:hover, #layout-footer a:active {
	color:#fff;
	background:none;
}
#layout-header {
	height:145px;/*was 229px, before removing hiding menu, then was 175 before reducing header image height from 150 to 120*/
}
#layout-header img {
	height:120px;
}
#layout-header-banner {
	height:120px;
}
#layout-header-bottom {
	color:#ffffff;
	font-size:14px;
	height:25px;
	text-align:center;
	font-weight:bold;
	margin:0 16px;
	background:url(../images/global/layout/backgroundHeaderBottom.jpg) no-repeat top;
}
#layout-menu-primary {
	height:54px;
	width:968px;
	margin:0 16px;
	background:url(../images/global/layout/backgroundMainMenu.jpg) no-repeat bottom;
}
#layout-sidebar-1 {
	width:190px;
	padding:5px;
	float:left;
	display:none;
}
#layout-sidebar-2 {
	width:190px;
	padding:5px;
	float:right;
}

/*********** IMAGE STYLES ***********/
.imgLeft {
	float:left;
	border:2px solid #C0C0C0;
	margin:2px 4px 2px 2px;
}
.imgRight {
	float:right;
	border:2px solid #C0C0C0;
	margin:2px 4px 2px 2px;
}

/*********** CONTENT STYLES ***********/
#content-layout-tile, #content-layout-membershipTile {width:710px; margin:20px auto; overflow:auto;}
#content-layout-tile-left, #content-layout-membershipTile-left {width:335px; margin:auto 10px; float:left;}
#content-layout-tile-right, #content-layout-membershipTile-right {width:335px; margin:auto 10px; float:left;}
#content-sidebar-2 {
	position:fixed;
	/*top:240px;*/
	right:50%;
	margin-right:-475px;
	width:190px;
	/*height:200px;*/
	z-index:8;
	padding:0px;
	border:0px;
	/*background-color:#ff9;*/
	top:expression(window.scrollTop + "px");
}
.contentBox {padding:4px; border-top:1px solid #00c; border-bottom:1px solid #00c; border-style:dotted; color:#000; background-color:#ccc; text-align:center;}
.contentBox :is(ol,ul) {display:inline-block; text-align:left;}/* Related URL: https://www.w3schools.com/howto/howto_css_center-list.asp */

/*********** FORM LAYOUT STYLES ***********/
.formLayoutGroup {display:flex; justify-content:space-between; margin:8px 0; align-items:flex-start;}
/* Related URL: https://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element-has */
.formLayoutItem:only-child {width:100%;}
.formLayoutItem:first-child:nth-last-child(2), .formLayoutItem:first-child:nth-last-child(2) ~ .formLayoutItem {width:49%;}
.formLayoutItem:first-child:nth-last-child(3), .formLayoutItem:first-child:nth-last-child(3) ~ .formLayoutItem {width:32%;}
.formLayoutItem:first-child:nth-last-child(4), .formLayoutItem:first-child:nth-last-child(4) ~ .formLayoutItem {width:24%;}
.formLayoutItem:first-child:nth-last-child(5), .formLayoutItem:first-child:nth-last-child(5) ~ .formLayoutItem {width:19%;}
.formLayoutItem:first-child:nth-last-child(6), .formLayoutItem:first-child:nth-last-child(6) ~ .formLayoutItem {width:16.5%;}
.formLayoutItem:first-child:nth-last-child(7), .formLayoutItem:first-child:nth-last-child(7) ~ .formLayoutItem {width:14%;}
.formLayoutItem:first-child:nth-last-child(8), .formLayoutItem:first-child:nth-last-child(8) ~ .formLayoutItem {width:12.5%;}
.formLayoutItem:first-child:nth-last-child(9), .formLayoutItem:first-child:nth-last-child(9) ~ .formLayoutItem {width:11.11%;}
.formLayoutItem:first-child:nth-last-child(10), .formLayoutItem:first-child:nth-last-child(10) ~ .formLayoutItem {width:10%;}

/*********** FORM STYLES ***********/
button, input, select, textarea {box-sizing:border-box; padding:.5em; border:1px solid #bbb; border-radius:0px; background-color:#ccc; font-family:inherit; font-size:inherit;}
button, input[type="submit"], input[type=button] {border:none; color:#fff; background-color:#00f;}
button, label, input:not([type="checkbox"]):not([type="image"]):not([type="radio"]), select, textarea {display:block; width:100%;}
button:hover, input[type="button"]:hover, input[type="submit"]:hover {background-color:#00c; cursor:pointer;}
button:has(> i) {display:unset; width:unset; color:unset; background-color:unset;}
button:has(> i):hover {background-color:unset;}
fieldset {padding:4px; border:1px solid #00c;}
input:focus, textarea:focus {outline:2px solid #00c;}
input:focus::placeholder, textarea:focus::placeholder {color:#ccc;}
input:placeholder-shown, textarea:placeholder-shown {font-style:italic;}
input[type="checkbox"], input[type="radio"] {margin:4px;}
label {font-weight:bold;}
legend {padding:2px 6px;}
summary {cursor:pointer;}
summary > label {display:unset; pointer-events:none;}
textarea {min-height:95px;}
.requiredAsterisk::after {content:"*"; color:#f00;}
:is(input[type="checkbox"], input[type="radio"]) + label {display:unset; width:unset;}

#contactForm-headerMenu {display:flex; justify-content:space-between; margin-bottom:1em; border-bottom:2px solid #ccf;}
#contactForm-headerMenu > div {width:calc((100% / 3) - 6px); height:3em; text-align:center;}
.contactForm-headerMenuOption-active {display:flex; flex-direction:column; justify-content:center; background-color:#ccf; font-size:1.2em;}
.contactForm-headerMenuOption-inactive > a:first-child {display:flex; flex-direction:column; justify-content:center; width:100%; height:100%; background-color:#00c; color:#fff; text-decoration:none;}
.contactForm-headerMenuOption-inactive > a:first-child:hover {background-color:#ccf; color:unset;}
#loginForm-container, #changePasswordForm-container, #resetPasswordForm-container, #changeUsernameForm-container, #adminAdvancedSearchForm-container {width:50%; margin:auto;}
#sidebarContainer #adminAdvancedSearchForm-container {width:unset;}

.contactForm-heading {
	margin-top:10px; margin-bottom:0px; padding:5px;
	border-radius:25px 25px 0 0;
}
.contactForm-heading-inactive {
	margin-top:10px; margin-bottom:0px; padding:5px;
	border-radius:25px 25px 0 0;
}

option:checked {
	background-color:#00f;
	color:#fff;
}
.form {
	background-color:#d7dae3;
}
.formElement {
	overflow:auto;
	padding:5px;
	margin:5px 0;
	background-color:#d7dae3;
}
.formElementRequired {
	color:red;
	font-weight:bold;
}
.formElement label {
	width:200px;
	display:block;
	float:left;
	text-align:right;
	margin-right:5px;
	font-weight:bold;
	background-color:#e4e6ef;
}
#searchGlobalContainer {margin-bottom:10px; text-align:right;}
#searchGlobalContainer form {display:inline-block;}
#searchGlobalContainer fieldset {border:none;}
#searchGlobalContainer input[type="search"] {background:rgba(178,202,250,0.25);}
#searchGlobalContainer button {display:inline-block;}


.submit input {/*TODO: Phase this out?*/
	margin-left:4.5em;
}
.requiredField {/*TODO: Phase this out*/
	color:#f00;
	font-weight:bold;
}

/*********** FORM STYLES CFGRID ***********/
#layout01FilterAndSearch button, #layout01FilterAndSearch label, #layout01FilterAndSearch input:not([type="checkbox"]):not([type="radio"]), #layout01FilterAndSearch select, #layout01FilterAndSearch textarea {width:75%;}

/*********** FORM STYLES IOS ***********/
input:not([type="checkbox"]):not([type="radio"]) {-webkit-appearance:none; border-radius:0px;}/* because iOS */

/*********** PANEL STYLES ***********/
.panelLayoutGroup {display:flex; justify-content:space-between; margin:8px 0; align-items:flex-start;}
/* Related URL: https://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element-has */
.panelLayoutItem:only-child {width:100%;}
.panelLayoutItem:first-child:nth-last-child(2), .panelLayoutItem:first-child:nth-last-child(2) ~ .panelLayoutItem {width:49%;}
.panelLayoutItem:first-child:nth-last-child(3), .panelLayoutItem:first-child:nth-last-child(3) ~ .panelLayoutItem {width:32%;}
.panelLayoutItem:first-child:nth-last-child(4), .panelLayoutItem:first-child:nth-last-child(4) ~ .panelLayoutItem {width:24%;}
.panel {margin:24px 4px; padding:8px; border-radius:10px; background-color:#b9dafa; font-size:1.2em;}
.panel a {text-decoration:none;}
.panel li {padding:4px; list-style-position:inside;}
.panelName {text-align:center; font-weight:bold;}

/*********** WEBSOCKET STYLES ***********/
#voicemailPhoneEventAlert {background-color:#f00;}
#voicemailPhoneEventAlert a {color:#fff;}
#voicemailPhoneEventAlert a:hover, #voicemailPhoneEventAlert a:active {background:none;}

/*********** OTHER STYLES ***********/
.clear {
     clear:both; 
     height:0; 
     margin:0;
     font-size:1px;
     line-height:0px;
}
th {
	color:#fff;
	background:#036;
	text-align:center;
}
th.calhead, th.calweekdaycell {color:#000; background:#fff;}
hr {
	height:2px;
	/* color is for IE */
	color:#ccc;
	/* background is for all other web browsers */
	background-color:#ccc;
	/* border:0 removes the shading in most web browsers */
	border:0;
	/* A zero-margin aligns it in most web browsers */
	margin:0;
	/* Aligns it in IE */
	text-align:left;
}
td {
	color:#006;
}
.imgThumb {
	border:1px solid #00f;
}
.tableAboveHeader {
	background-color:#eeeff7;
}
.textAlert {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#f00;
	font-weight:normal;
}
.textAnnouncement {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#f00;
	font-weight:normal;
}
.textDateStamp {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:0000CC;
}
.textMenu {
	color:#00c;
	text-decoration:none;
}
.textSlogan {
	font-size:18px;
	color:#784953;
	text-align:center;
}

.alert {color:#f00; font-weight:bold;}
.inputResponse {padding:4px; margin:25px auto; text-align:center; font-weight:bold;}

.dataTable {width:100%; border:none; padding:4px;}
.dataTable th {color:white; background-color:#435778;}
.dataTable td {color:blue; padding:4px;}

.dataNameValueGroup {display:flex;}
.dataNameValueItem {display:flex; margin:4px;}
.dataName {margin-right:2px; font-weight:bold;}

.captchaImage {width:100%; height:auto;}

.navigationLinks {display:flex; justify-content:space-between;}

.searchResult {margin:30px 0;}
/*.searchResultHeader {}*/
.searchResultTitle {font-size:18px; font-weight:400; color:#0d66d0;}
.searchResultBody {display:flex; gap:10px; margin:8px;}
/*.searchResultImage {}*/
.searchResultFooter {color:silver;}
.searchResultURL {color:grey;}
.searchContextHighlight, .searchTip {background:#ff9;}
.searchResultType-Cart {background-color:lightblue;}
.searchResultType-Order {background-color:blue; color:white;}
.searchResultType-Shipment {background-color:green; color:white;}
.searchResultType-TrackerIssue {background-color:black; color:white;}
.searchResultType-TrackerComment {background-color:darkgrey; color:white;}
.searchResultType-PRForumTopic {background-color:red; color:white;}
.searchResultType-PRForumComment {background-color:#ff6666; color:white;}

#merchQOHSummary-container {display:flex;}
#merchQOHSummary-container > div {margin:4px;}
#merchQOHSummary-container .dataNameValueGroup:nth-of-type(3) {font-size:24px;}