/*	Premise is to lay out all of the common parameters first: fonts and colors, anything general.
Follow this with by-size parameters. Nifty. */
body { padding: 0px; margin: 0px; background: #f0f0f0; font-family: Helvetica, Verdana, Arial, "Sans Serif"; font-size: 0.625em; color: #000; }
img { border: 0px; }
h1, h2, h3 { font-weight: normal; }
h1, h2 { text-align: left; border: 1px solid #000; border-width: 0px 0px 1px 0px; }
p { margin: 0px; padding: 0px 0px 10px 0px; }
table { border-collapse: collapse; }
.masthead { width: 100%; margin: 0px; position: fixed; top: 0px; height: 100px; }
.mastheadInner { }
td { vertical-align: top; }
.contact_us { background: #000; color: #ffe5cc; font-weight: bold; font-style: normal; padding: 15px 0px; margin: 0px; }
#navigation { position: fixed; margin: 0px; padding: 0px; width: 100%; }
#navigation_plate a, #navigation_plate a:link, #navigation_plate a:visited { text-decoration: none; padding: 7px 12px 5px 12px; color: #666; }
#navigation_plate a:hover { color: #fff; background: #666; }
#navigation_plate { padding: 7px 0px 5px 0px; background: #fff; color: #666; font-style: normal; font-weight: bold; margin-bottom: 10px; }
.menuSelected { background: #7F2F01; color: #fff !important; }
#main_plate { background: #fff; }
#footer { color: #fff; }
#footer_plate, #main_plate, #navigation_plate { box-shadow: 0px 2px 5px rgba(33, 33, 33, 0.6); }
#footer_plate { background: #AD6E15; }
#footer_plate a, #footer_plate a:link, #footer_plate a:visited { color: #cce3e3; text-decoration: none; }
#footer_plate a:hover { color: #fff; background: #000; }
a:link, a:visited { color: #296fda; }
a:hover { color: #f99; }
#main a, #main a:link { color: #296fda; }
#main a:visited { color: #296fda; }
#main a:hover { color: #000; }
.eventTeaser, .eventBox { width: 80%; margin: 10px 5%; padding: 10px 5%; box-shadow: 0px 2px 5px rgba(33, 33, 33, 0.6); cursor: pointer; }
.eventBox { display: none; }
.eventTeaser img, .eventBox img { float: right; }
.eventTeaser p, .eventBox p { line-height: 1.3; margin-bottom: 0px; }

.xqztThumbH { background-color: #cce3e3; cursor: pointer; width: 18.8%; margin: 13px 0% 10px 1%; padding: 0px; box-shadow: 0px 2px 5px rgba(33, 33, 33, 0.6); float: left; text-align: center; }
.xqztH { cursor: pointer; width: 30%; margin: 13px 35% 10px 35%; padding: 0px; box-shadow: 0px 2px 5px rgba(33, 33, 33, 0.6); float: left; }
.xqztThumbH img, .xqztH img { width: 100%; }
.xqztThumbH a, .xqztThumbH a:link, .xqztThumbH a:visited { color: #000 !important; text-decoration: none; font-size: 1.6em; }
.xqztThumbH:hover { background-color: #fff; box-shadow: 0px 0px 0px; }
#xqztOther { text-align: right; padding: 5px 2% 5px 0px; border: 1px solid #8ea5a4; border-width: 0px 0px 1px 0px; margin-bottom: 10px; }
#xqztHeading { margin: 5px 1%;}

.contactTablePrompt { text-align: right; }
.contactTableRow { clear: both; position: relative; }
.footerCopyright { text-align: right; padding-right: 5px; }
.footer_col p { line-height: 1.2em; }

.text_page img { float: right; padding: 3px; border: 1px solid #ccc; }

.masthead { z-index: 2; }
#swiper_area { z-index: 1; }
#navigation { z-index: 3; }
#mNavigation { z-index: 3; }
#calPopUpContainer { z-index: 4; }

.alert { font-weight: bold; color: #900; padding-top: 10px; }

/* Video styles */
#videoContainer { text-align: center; width: 100%; }
#videoTitle { font-size: 2.0em; padding-top: 20px; }
#videoContainer iframe { border: 0px solid transparent; padding: 0px; margin: 0px; }

.popUpMenu { position: absolute; background: #fff; display: none; box-shadow: 0px 5px 5px rgba(33, 33, 33, 0.6); color: #000; }
.popUpLink { cursor: pointer; padding: 5px 10px; font-size: 1.5em; }
.popUpLink:hover { color: #fff; background: #666; }

/* Social links box at the top right, check breakpoint 481-999 for change to right margin */
.socialLinks { position: absolute; top: 0px; right: 10%; }
.social_header_link { background: #999; cursor: pointer; }
.social_header_link:hover { background: #333; }
.blog_list img { max-width: 100%; }
.blogDate { text-align: right; font-style: italic; }

.pressItem { text-align: center; font-size: 14px; float: left; padding: 0px 5px 10px 0px;}
.pressItem img { border: 1px solid #999; padding: 0px; margin: 0px 0px 5px 0px; }

audio { width: 100%; margin: 5px 0% 20px 0%; }

@media screen and (max-width: 480px) {
	.masthead { height: 60px; }
	.homeInHeader { height: 60px; width: 100%; }
	.mastheadInner { height: 60px; background: #f0f0f0 url("../images/masthead.small.png") no-repeat bottom left; box-shadow: 0px 2px 5px rgba(33, 33, 33, 0.6);}
	#navigation { top: 60px; }	/* This follows the height of a position:fixed masthead */
	#navigation_plate { text-align: center; padding: 1px 0px 1px 0px; }
	.text_page, .wide_column, .half_column, .wider_column { width: 95%; margin: 0px 1% 3px 1%; padding: 5px 1% 5px 2%; background: #fff; }
	.text_page img { max-width: 150px; }
	h1 { font-size: 1.8em; }
	h2 { font-size: 1.6em; }
	h3 { font-size: 1.5em; }
	.hrules { display: none; }
	p, li, td { line-height: 1.3; font-size: 1.4em; margin: 0px; padding: 0px 0px 8px 0px; }
	.class1, .class2, .class12 { display: none; }	/* Idea to select which navigation to use based on size */
	/* Links */
	.button_fat { font-size: 12pt; padding: 2px 0px; color: #000; }
	.button_fat { padding: 7px 6px; background: #d9c4b8;
		border: 1px solid #000; border-width: 0px 0px 1px 0px;
		margin: 0px;
	}
	.button_live { background: #fff; text-shadow: 0 0px 0px; color: #000 !important; }
	.button_arrow { float: right; }
	.button_arrow_l { float: left; }
	#mNavigation { position: absolute; top: 62px; left: -75%; width: 75%; opacity:0.92; filter:alpha(opacity=92); }
	.toggleMenuButton { position: absolute; top: 5px; right: 2px; color: #fff; }
	.contactTableHeading, .contactTablePrompt, .contactTableInput { width: 100%; }
	#footer { background: #36231c; }
	#footer_plate { width: 96%; margin-left: 0%; padding: 5px 2% 5px 2% }
	.footer_col { padding: 0px 0px 5px 0px; }
	.xqztThumbH {  width: 32%; margin: 7px 0% 0px 1%; }
	.xqztH { width: 60%; margin: 13px 20% 10px 20%; }
	#xqztOther { font-size: 1.6em; }

	.googleMap { float: none; }
	.googleMapFrame { height: 300px; width: 300px; }
	
	.contactTablePrompt { text-align: left; }
	
	.eventBox a { padding: 2px; background-color: #fff; border: 1px solid #999; }

}

@media screen and (min-width: 481px) and (max-width: 999px) {
	.masthead { height: 100px; background: #f0f0f0 }
	.mastheadInner { margin-left: 5%; width: 90%; height: 100px; background: #f0f0f0 url("../images/masthead.big.png") no-repeat top left;}
	.wide_column, .wider_column { width: 90%; margin: 0px auto 10px auto; padding: 10px 0px; }
	.half_column { width: 44%; margin: 10px 3%; padding: 0px; float: left; }
	h1 { font-size: 2.0em; padding: 0px; margin: 0px 0px 5px 0px; }
	h2 { font-size: 1.8em; margin: 0px; padding: 0px; }
	h3 { font-size: 1.5em; margin: 0px; padding: 0px; }
	.homeInHeader { height: 100px; width: 100%; }
	.logoAddress { position: absolute; right: 5%; bottom: 5px; }
	#navigation { top: 100px; }
	#navigation_plate { width: 90%; margin: 0px 5% 10px 5%; font-size: 1.3em; }
	#navigation_plate p { font-size: 1.0em; margin: 0px; padding: 0px 0px 3px 0px; line-height: 1.3; }
	#navigation_plate a, #navigation_plate a:link, #navigation_plate a:visited { padding: 7px 4px 5px 4px; }
	#main_plate { width: 90%; margin-left: 5%; }
	#footer_plate { width: 86%; margin-left: 5%; padding: 10px 2% 5px 2% }
	.footer_col { width: 33%; float: left; }
	p, li, .contactTableHeading, .contactTablePrompt, td { line-height: 1.4; font-size: 1.3em; }
	.class1, .class3 { display: none; }	/* Idea to select which navigation to use based on size */
	.text_column { width: 55%; padding: 10px 2%; float: right; margin: 10px 2% 10px 0px; }
	.text_page img { max-width: 300px; }
	.support_column { width: 25%; padding: 10px 2%; float: left; margin: 10px 0px 10px 5%; }
	.rightImg { padding: 2px; margin: 0px 0px 10px 5px; }
	.googleMapFrame { height: 300px; width: 300px; }
	.xqztH { width: 40%; margin: 13px 30% 10px 30%; }

	.text_page { width: 72%; margin: 0px 8% 20px 8%; padding: 10px 5%; background: #fff; }
	.popUpLink { font-size: 1.3em; }
	.eventTeaser:hover, .eventBox:hover { background-color: #ffeacc; }
	.socialLinks { right: 5%; }
	.blog_article { width: 62%; margin: 0px; padding: 0px; float: left; }
	.blog_list { width: 32%; margin: 0px; padding: 0px; float: right; }

	#xqztBigPhoto { width: 48%; height: 400px; }
}

@media screen and (min-width: 1000px) {
	.wide_column { width: 80%; margin: 0px auto 0px auto; padding: 10px 0px;  }
	.half_column { width: 44%; margin: 10px 3%; padding: 0px; float: left; }
	.wider_column { width: 90%; margin: 0px 5% 10px 5%; padding: 10px 0px;  }
	h1 { font-size: 2.4em; padding: 0px; margin: 10px 0px 10px 0px; }
	h2 { font-size: 2.0em; padding: 0px; margin: 10px 0px 10px 0px; }
	h3 { font-size: 1.6em; margin: 0px; padding: 3px 0px 0px 0px; }
	.masthead { height: 100px; background: #f0f0f0 }
	.mastheadInner { margin-left: 10%; width: 80%; height: 100px; background: #f0f0f0 url("../images/masthead.big.png") no-repeat top left; }
	.homeInHeader { height: 100px; width: 100%; }
	.logoAddress { position: absolute; right: 10%; bottom: 5px; }
	#navigation { top: 100px; }
	#navigation_plate { width: 80%; margin: 0px 10% 10px 10%; font-size: 1.4em; }
	#main_plate { width: 80%; margin-top: 0px; margin-left: 10%; }
	#footer_plate { width: 76%; margin-left: 10%; padding: 10px 2% 5px 2% }
	.footer_col { width: 33%; float: left; }
	p, li, .contactTableHeading, .contactTablePrompt, td { line-height: 1.5; font-size: 1.4em; }
	.upcoming p { line-height: 1.3; }
	.class3, .class2, .class23 { display: none; }	/* Idea to select which navigation to use based on size */
	.text_column { width: 55%; padding: 20px 3%; float: right; margin: 10px 2% 10px 0px; }
	.support_column { width: 25%; padding: 20px 2%; float: left; margin: 10px 0px 10px 5%; }
	.rightImg { padding: 3px; margin: 0px 0px 10px 10px; }
	.googleMapFrame { height: 400px; width: 400px; }
	.contactTableHeading { width: 95%; padding-left: 5%; clear: both; }
	.contactTablePrompt { width: 30%; padding-left: 5%; float: left; clear: left; }
	.contactTableInput { width: 60%; padding-right: 5%; float: right; }
	
	.text_page { width: 64%; margin: 0px 18% 20px 18%; padding: 15px 0px; background: #fff; }
	.eventTeaser:hover, .eventBox:hover { background-color: #ffeacc; }
	.blog_article { width: 62%; margin: 0px; padding: 0px; float: left; }
	.blog_list { width: 32%; margin: 0px; padding: 0px; float: right; }
	
	/* Catalog and Items for 1000px+ */
	#xqztBigPhoto { width: 48%; height: 450px; }

}