/* VERSIONS
/* 1_0: First Release [Authors: Nick Hall, Alex Bradley]
/* 1_1: Added .to-top-tray & .to-bottom-tray for moving content to responsive tray [Author: Corbin Bentley]

----------------------------------------------------------------------------- */
/*
-----------------------------------------------------------------------------
 =Empty queries - grab when needed
----------------------------------------------------------------------------- */
@media screen and (max-width: 950px) {
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 530px) {
}
/* hide stuff */
@media screen and (max-width: 950px) {
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 530px) {
	#header-hd-inner,
	h2.section{ display: none;}
}


/*
-----------------------------------------------------------------------------
 =Visibility on Desktop Tablet Phone
----------------------------------------------------------------------------- */
.visible-phone { display: none !important; }
.visible-tablet { display: none !important; }
.hidden-desktop { display: none !important; }


@media screen and (max-width: 950px) {
	.visible-tablet { display: inherit !important; }
	.hidden-tablet { display: none !important; }
	.hidden-desktop { display: inherit !important; }
	.visible-desktop { display: none !important; }
}

@media screen and (max-width: 767px) {
	.visible-phone { display: inherit !important; }
	.hidden-phone { display: none !important; }
	.hidden-desktop { display: inherit !important; }
	.visible-desktop { display: none !important; }
}

@media screen and (max-width: 530px) {
	.visible-phone { display: inherit !important; }
	.hidden-phone { display: none !important; }
	.hidden-desktop { display: inherit !important; }
	.visible-desktop { display: none !important; }
}

/*
-----------------------------------------------------------------------------
 =High Resolution Images
----------------------------------------------------------------------------- */
@media screen and (-webkit-min-device-pixel-ratio: 1.3),
screen and (min--moz-device-pixel-ratio: 1.3),
screen and (-o-min-device-pixel-ratio: 2 / 1),
screen and (min-device-pixel-ratio: 1.3),
screen and (min-resolution: 192dpi),
screen and (min-resolution: 2dppx) {
	#masthead #site-name a {
		background-image: url(/images/common/bg-logo@2x.png);
		-webkit-background-size: 435px 100px; /* set to dimensions of bg-logo.png */
		-moz-background-size: 435px 100px;
		-o-background-size: 435px 100px;
		background-size: 435px 100px;
	}
}

@media screen and (-webkit-min-device-pixel-ratio: 1.3) and (max-width: 320px),
screen and (min--moz-device-pixel-ratio: 1.3) and (max-width: 320px),
screen and (-o-min-device-pixel-ratio: 2 / 1) and (max-width: 320px),
screen and (min-device-pixel-ratio: 1.3) and (max-width: 320px),
screen and (min-resolution: 192dpi) and (max-width: 320px),
screen and (min-resolution: 2dppx) and (max-width: 320px) {
	#masthead #site-name a {
	}
}
/*
-----------------------------------------------------------------------------
 =Header
----------------------------------------------------------------------------- */
@media screen and (min-width: 951px){
	#masthead-container.sticky {
	 	position: fixed;
		top: 0;
	}
}
@media screen and (max-width: 767px) {
	#masthead { height: 120px; padding-top: 16px;}
	#masthead #site-name{ position: relative;}
	#masthead #site-name a { margin: 0 auto; width: 282px; position: relative;}
}

/*
-----------------------------------------------------------------------------
 =Navigation
----------------------------------------------------------------------------- */
@media screen and (max-width: 950px) {
	#nav-main  {	margin: 107px 0 0 292px;	}
	#nav-main > ul {width: auto;}
	#nav-main-alt {   margin: 50px 0 0 0; right:10px;}
}
@media screen and (max-width: 767px) {
	#breadcrumbs { display: none;}
	#nav-main  {  margin: 0;}
	#nav-main > ul{ margin: 10px 0 0 0;}
	#nav-main > ul > li > a {
		color: #fff;
		display: block;
		float: left;
		font-size: 1.5em;
		line-height: 30px;
		padding: 0 0 0 18px;
		text-decoration: none;
		text-transform: uppercase;
		width: 180px;
	}
	#nav-util > ul > li > a { padding: 0 14px;}
	#nav-const-left { margin-left: 50px;}
	#nav-main-alt {
		margin: 20px 0 0;
		right: auto;
	}
	#nav-main-alt ul li { margin: 0 0 10px 0;	}

}

@media screen and (max-width: 530px) {
	#breadcrumbs-container{ display: none;}
	#const-top{ display: none;}
	#nav-const-left { margin-left: 0px;}

}

/*
-----------------------------------------------------------------------------
 =Search
----------------------------------------------------------------------------- */
@media screen and (max-width: 950px) {
	div.site-search {  width: 82%;}
	div.site-search > div {   margin: 0;}
}
@media screen and (max-width: 767px) {
	.site-search #q {width: 70% !important; margin: 0 !important}
}

@media screen and (max-width: 530px) {
	#searchcontainer {   height: 62px; display: block; position: absolute; right: 0; top: 0; height: auto; border-bottom: none;
		width: 80%;
		}
	#toggle-vert,
	#searchtoggle{ display: none;}
	.search-mobile {display: block;}

	div.site-search {width: 90%; display: none;}
	div.site-search > div {   margin: 0; padding: 8px 0 0 0;}
	.site-search #q {
		 font-size: 20px;
			height: 37px;
			margin: 0;
			padding: 0.2em;
			width: 76% !important;
	}
	.site-search #searchButton {width: 37px;}
	div.site-search {   height: 57px;}

}

/*
-----------------------------------------------------------------------------
 =Block Sizes
----------------------------------------------------------------------------- */
@media screen and (max-width: 950px) {
}

@media screen and (max-width: 767px) {
	.block5,
	.block4,
	.block3 { width: 100%; }
	.sc .block1 { min-width: 50%; }
}

@media screen and (max-width: 530px) {
	.block3 { min-width: 68%; }
	.block2 { min-width: 53%; }
	.block1 { min-width: 40%; }
}



/*
-----------------------------------------------------------------------------
 =appendAround.js
----------------------------------------------------------------------------- */
#PrimaryZone:after {
	clear: both;
	content: "";
	display: table;
	}

#below-content,
#above-content {
	/* Suggest using .pc values */
	font-size: 1.2em;
	line-height: 1.5;
	}

/* Content is only in .pc, .tc, .sc, responsivetray */
#above-primary, #above-secondary, #above-tertiary,
#below-primary, #below-secondary, #below-tertiary,
#above-content, #below-content, #nav-sub-container,
#above-tray, #below-tray { display: none; }

/*ECFS custom*/
#top-responsivetray, #const-responsivetray, #bottom-responsivetray { display: none; }

@media screen and (max-width: 950px) {
	#content { padding-right: 1%; padding-left: 1%; }
	#masthead-container, #breadcrumbs-container { padding-right: 1%; padding-left: 1%; }
	#nav-social {right: 1%;}
}

@media screen and (max-width: 767px) {
	/*ECFS custom*/
	#main-toggle { display: block; }


	/* Three col layouts content is only in .tc and .pc, hide .sc */
	.layout-n1-p1-s1 .sc,
	.layout-n1-p1-s1-above .sc,
	.layout-n1-p1-s0-c .sc { display: none; }

	/* .sc-catching containers */
	#below-primary,
	#below-tertiary { display: block; }

	#above-primary, #above-secondary, #above-tertiary,
	#below-primary, #below-secondary, #below-tertiary,
	#above-content { display: inherit; }

	#above-tray, #below-tray { display: none; }

}

@media screen and (max-width: 530px) {
	/*ECFS custom*/
	.nav-const-container,
	.nav-sub-container,
	.nav-social-container { display: none;}
	/*ECFS custom*/
	#top-responsivetray,
	#const-responsivetray,
	#bottom-responsivetray { display: block; }

	/* Views as one column, show .sc and hide .tc */
	.layout-n1-p1-s1 .sc,
	.layout-n0-p1-s1 .sc,
	.layout-n1-p1-s1-top .sc { display: block; }

	/* .sc-catching containers */
	#below-primary,
	#below-tertiary { display: none; }

	.above-tray-wrapper,
	.below-tray-wrapper,
	.tc { display: none; }

	/* .tc catching containers */
	#nav-sub-container,
	#below-content { display: block; }

	#above-tray, #below-tray { display: block; }

	.pc, .sc, .tc {
		width: auto !important;
		float: none;
		margin: 0 !important;
		padding-right: 0;
		padding-left: 0;
		}


}


/*
-----------------------------------------------------------------------------
 =Forms
----------------------------------------------------------------------------- */

@media screen and (max-width: 950px) {
}

@media screen and (max-width: 767px) {

	/* TODO  cleanup, despecify, lose importants */
	.formviewer { padding: 0 0 5px; }
		.formviewer .hd h2,
		.formviewer div span.error { display: none !important; }
		.formviewer fieldset,
		fieldset {
			padding: 2%;
			margin: 0 0 1em 0 !important;
			background: none !important;
			border: none;
			width: 100%;
			overflow: hidden;
			}
			form fieldset legend {
				padding-top: 0 !important;
				padding-bottom: 0 !important;
				display: block;
				position: relative; top: -3px;
				}
			form fieldset div {
				min-height: 0px !important;
				margin: 2% 0px !important;
				}
				form fieldset div label,
				form fieldset div div.checklabel {
					width: 100% !important;
					text-align: left !important;
					font-size: 1em !important;
					line-height: 1.6 !important;
					margin: 0 0 1% 3% !important;
					}
				form fieldset div textarea,
				input[type="text"],
				input[type="number"],
				input[type="email"],
				input[type="url"],
				input[type="submit"],
				form a.button {
					width: 94% !important;
					font-size: 16px;
					margin: 0 3%;
					}
				form fieldset div textarea,
				input[type="text"],
				input[type="number"],
				input[type="email"],
				input[type="url"] { padding: 3px; }
				form fieldset div textarea { height: 90px }
				form fieldset .short {
					width: 40% !important;
					margin-right: 50%;
					clear: right;
					}
					form fieldset div select {
						width: 85% !important;
						margin: 0 0 0 10px;
						font-size: 1em;
						}
					form fieldset div p { font-size: 90%; margin: 5px 10px 10px; }
					#CCExpireMonth,
					#CCExpireYear {
						width: auto !important;
						margin-right: 0;
						clear: none;
						}
					#CCExpireYear { margin-left: 0; }
					form fieldset div ul.checkwrap {
						width: 85% !important;
						position: relative;
						top: -10px;
						margin: 0 0 0 3% !important;
						}
						form fieldset div ul.checkwrap li {
							list-style: none;
							padding: .5em  0 0 0 !important;
							}
						.formviewer fieldset div ul.checkwrap li {
							padding: 0 !important;
							margin: 5px 0px; !important;
							}
							.formviewer fieldset div ul.checkwrap li input { font-size: 16px; }
						form fieldset div.col2 ul.checkwrap li,
						form fieldset div.col3 ul.checkwrap li { width: 100%; }
						div.columns div.col1,
						div.columns div.col2 {
							float: none;
							width: 100%;
							}
						div span.error {
							display: block;
							background: none;
							position: relative;
							left: auto;
							top: auto;
							margin: 2px 0 0 10px !important;
							padding-left: 0;
						}
						span.error[htmlfor="CCExpireMonth"] { display: none !important; }
						input.error,
						select.error
						textarea.error,
						textarea.error:focus,
						input[type="text"].error:focus,
						select.error:focus { border-color: #900 !important; }
						#validationsummary { color: #900; padding: 0 10px; height: 20px; }
						.formviewer .native-reset { float: right; margin: 10px 25px; }
						form fieldset #submit { padding-left: 10px; }
						form fieldset #submit input#Captcha { margin: 0; }
						form fieldset #submit img { width: 222px !important; }
						form fieldset #submit p { margin-left: 0; padding-left: 0; }
}

@media screen and (max-width: 530px) {
}



/*
-----------------------------------------------------------------------------
 =Content Elements
----------------------------------------------------------------------------- */
@media screen and (max-width: 950px) {
}

@media screen and (max-width: 767px) {
}

@media screen and (max-width: 530px) {
}

@media screen and (max-width: 320px) {
	table.styled { word-break: break-all; }
}


/*
-----------------------------------------------------------------------------
 =Modules
----------------------------------------------------------------------------- */
@media screen and (max-width: 950px) {
}

@media screen and (max-width: 950px) and (min-width: 767px) {
	.sc .calendar .list dl.calendar-day dt,
	.tc .calendar .list dl.calendar-day dt { float: none; margin: 0 auto 1em; }
	.sc .calendar .list dl.calendar-day dd,
	.tc .calendar .list dl.calendar-day dd { margin-left: 0; }
	.pc .calendar .list dl.calendar-day .thumb {
		float: none;
		margin-left: 0;
		margin-right: 0;
		width: auto;
		}
	.sc .views a,
	.tc .views a,
	.sc .actions a,
	.tc .actions a {
		display: block;
		margin-bottom: .5em;
		text-align: center;
		}
}

@media screen and (max-width: 767px) {
	.sc .module .list .thumb,
	.tc .module .list .thumb {
		float: none!important;
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		height: auto;
		}
}

@media screen and (max-width: 530px) {
	.map .bd > div { height: 250px !important; } /* TODO  important necessary? */
}

@media screen and (max-width: 320px) {
	.module .list .thumb {
		float: none!important;
		margin-left: 0;
		margin-right: 0;
		width: auto;
		height: auto;
		}

	/* Tabs
	----------------------------------------------------------------------------- */
	.tab-row ul li,
	.module .bd .tab-row ul li { width: auto; }

	.tab-row ~ div[id*="_content"],
	.ui-accordion-content {
		max-height: 200px;
		overflow: auto;
		}
		.tab-row ~ div[id*="_content"] { margin-bottom: 1.8em; }

	/* HTML Button
	----------------------------------------------------------------------------- */
	.pc .text-button { width: auto; }
	.text-button.left,
	.text-button.right { float: none; }

}