html { height: 100%; }

body {
	background-color: #e6e7e8;
	color: #0e191a;
	font-size: 16px;
	font-family: Raleway, sans-serif;
	height: 100%;
	min-height: 100%;
}

@media screen and ( max-width: 640px ) {
	body { font-size: 11px; }
}

/*
font-family:'Century Gothic W01';
font-family:'CenturyGothicW01-Italic';
font-family:'Century Gothic W01 Bold';
font-family:'CenturyGothicW01-BoldIt';
*/

a, a:hover, a:focus, a:active, a:visited { color: #be1e2d; }

.error { color: #be1e2d; }

#page {
	height: 100%;
	position: relative;
}

/*
header {
	position: absolute;
	top: 0;
	z-index: 10;
}
*/
#masthead {
	z-index: 10;
	background-color: white;
}

#content {
	min-height: 100%;
	display: block;
}

p,
#frmSignUp,
.tml p {
	line-height: 1.5em;
	margin: 1em 0;
}

.content ul {
	line-height: 1.5em;
}

	.content li{
		margin: 0.5em 0;
	}

.content h3 {
	margin: 1.5em 0 1em;
	font-weight: bold;
}	

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    border-top-left-radius: 0;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    border-top-right-radius: 0;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    border-bottom-left-radius: 0;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 0;
}


.accordion .ui-accordion-header,
.ui-accordion .ui-accordion-header {
	color: white;
	font-size: 1.125em;
	text-transform: uppercase;
	padding: 0.389em 7.5%;
	margin: 0;
	font-family: Ubuntu, sans-serif;
	font-weight: 400;
}

	.accordion .show-canada .ui-accordion-header .minor,
	.ui-accordion .show-canada .ui-accordion-header .minor { float: left; } /* to remove the space between "Show" and "Canada" */

	.accordion .ui-accordion-header .major,
	.ui-accordion .ui-accordion-header .major { font-weight: 700; }

	.accordion .ui-accordion-header-active,
	.ui-accordion .ui-accordion-header-active {
		font-size: 1.25em !important;
		padding: 1em 7.5% 0 !important;
		color: #be1e2d;
	}

	.accordion .ui-accordion-header-active .major,
	.ui-accordion .ui-accordion-header-active .major { font-weight: normal; }

	.accordion .ui-accordion-header a,
	.ui-accordion .ui-accordion-header a { color: white; }


	/*
	.accordion-closed .accordion .ui-accordion-header,
	.accordion-closed .ui-accordion .ui-accordion-header {
		font-size: 2em;
		padding: 0.19em 1em;
	}
	*/

.accordion .ui-accordion-content,
.ui-accordion .ui-accordion-content {
	padding: 0 7.5%;
}

.accordion .page {
	/* to avoid vertical margin collapse, for BGs */
	padding-bottom: 1px;
	margin-bottom: -1px;
	background-size: cover;

	min-height: 0;
	/* transition: min-height 0.125s; */

	box-shadow: 0 0 0.75em rgba(0,0,0,0.5);
	position: relative;
}
	 .home.page .accordion .page { visibility: hidden; } /* for initial load */


	.accordion .page:nth-child(1) { box-shadow: none; }

	.accordion .page:nth-child(1) { z-index: 9; }
	.accordion .page:nth-child(2) { z-index: 8; }
	.accordion .page:nth-child(3) { z-index: 7; }
	.accordion .page:nth-child(4) { z-index: 6; }
	.accordion .page:nth-child(5) { z-index: 5; }
	.accordion .page:nth-child(6) { z-index: 4; }
	.accordion .page:nth-child(7) { z-index: 3; }
	.accordion .page:nth-child(8) { z-index: 2; }
	.accordion .page:nth-child(9) { z-index: 1; }

	.accordion .page.expanded {
		/*
		background-attachment: fixed;
		background-position: 0 0 !important;
		transition: background-position 0.5s;
		*/
		background: white !important;
		padding-top: 1.5em;
		padding-bottom: 2.0em !important;
	}

	.accordion .page.home-page             { background-image: url('BGHome.jpg'); background-position: 0 -7em; }
	.accordion .page.membership            { background-image: url('BGMembers.jpg'); background-position: 0 -3em; }
	.accordion .page.regional-associations { background-image: url('BGRegionalAssociations.jpg'); background-position: 0 -10em; }
	.accordion .page.show-canada           { background-image: url('BGShowCan2018.jpg'); background-position: 0 -33em; }
	.accordion .page.links                 { background-image: url('BGLinks.jpg'); background-position: 0 -25em; }
	.accordion .page.news-press            { background-image: url('BGNews.jpg'); }
	.accordion .page.international-representation,
	.accordion .page.statistics            { background-image: url('BGInternational.jpg'); background-position: 0 -10em; }
	.accordion .page.government-relations,
	.accordion .page.online-courses        { background-image: url('BGGovernmentRelations.jpg'); }

	@media screen and ( max-width: 1280px ) {
		.accordion .page.home-page             { background-image: url('BGHome_1024.jpg'); }
		.accordion .page.membership            { background-image: url('BGMembers_1024.jpg'); }
		.accordion .page.regional-associations { background-image: url('BGRegionalAssociations_1024.jpg'); }
		.accordion .page.show-canada           { background-image: url('BGShowCan2018_1024.jpg'); }
		.accordion .page.links                 { background-image: url('BGLinks_1024.jpg'); }
		.accordion .page.news-press            { background-image: url('BGNews_1024.jpg'); }
		.accordion .page.international-representation,
		.accordion .page.statistics            { background-image: url('BGInternational_1024.jpg'); }
		.accordion .page.government-relations,
		.accordion .page.online-courses        { background-image: url('BGGovernmentRelations_1024.jpg'); }
	}

	/*
	.accordion-closed .accordion .page {
		padding-top: 1.5em;
		padding-bottom: 1.5em;
		transition: padding 0.125s;
	}
	*/

#masthead { width: 100%; }
/* body.admin-bar #masthead { top: 32px; } */

#site-navigation {
	position: relative;
	margin: auto;
	float: none;
	box-shadow: 0 0 1em rgba(0,0,0,0.5);
	background-color: #707070;
	color: white;

	border-bottom: 2.125em solid transparent; /* so that the background image doesn't need to cover the menu bar */
	background-size: cover;
	background-image: url('seatsBG.jpg');
}

	@media screen and ( max-width: 1280px ) { #site-navigation { background-image: url('seatsBG_1024.jpg'); } }

	#site-navigation a {
		display: inline-block;
		color: white;
	} /* override base template, which sets these to block */

	#site-navigation .smallLinks {
		float: right;
		padding: 6.625em 7.5% 0 0;
		font-size: 0.6875em;
		text-transform: uppercase;
		font-family: Ubuntu, sans-serif;
	}

		#site-navigation .smallLinks a::after { content: '\00a0\00a0|\00a0\00a0'; }
		#site-navigation .smallLinks a:last-child::after { content: ''; }

		#site-navigation .smallLinks a:hover { color: #be1e2d; }
		#site-navigation .smallLinks a:hover::after { color: white; }

	#site-navigation .logoArea {
		position: relative;
		z-index: 1;
		padding: 2.75em 0 1.25em 7.5%;
		display: inline-block;
		letter-spacing: 0.0375em;
		font-family: 'Century Gothic W01', sans-serif;
	}

		#site-navigation .logoArea > * { vertical-align: bottom; }

		#site-navigation .logo {
			display: block;
			width: 13em;
			height: 3.0625em;
			box-sizing: content-box;
			padding-right: 0.875em;
			margin-right: 0.8125em;
			border-right: 1px solid rgba(255, 255, 255,0.5);
		}

		#site-navigation .tagline {
			display: inline-block;
			line-height: 1em;
			font-size: 0.9375em;
			padding-bottom: 0.25em;
		}

	#site-navigation .burger { display: none; }
	#site-navigation .tagLineBar { display: none; }

	#site-navigation ul,
	#site-navigation .tagLineBar {
		background-color: #404040;
		margin: 0;
		font-size: 0.75em;
		height: 2.833em;

		/* to push it outside of the area with the background image */
		position: absolute;
		top: 100%;
		width: 100%;
	}

		#site-navigation ul {
			text-align: justify;
			font-size: 0.75em;
			font-family: Ubuntu, sans-serif;
			height: 2.833em;
			padding: 0 7.5%;
		}

		#site-navigation .tagLineBar {
			text-align: center;
			font-size: 1.3125em;
			height: 1.619em;
			letter-spacing: 0.05em;
			font-family: 'Century Gothic W01', sans-serif;
			padding: 0;
		}

		/* http://css-tricks.com/equidistant-objects-with-css/ */
		#site-navigation ul:after {
			width: 100%;
			content: '';
			display: inline-block;
		}

		#site-navigation ul li {
			display: inline;
			float: none;
			margin: 0;
			white-space: nowrap;
			text-transform: uppercase;
			font-style: normal;
		}

			#site-navigation ul li.smallLink { display: none; }

			#site-navigation ul li a {
				padding: 0.667em 0 0.5em;
				border-bottom: 0.167em solid transparent;
			}
			#site-navigation ul li a:hover { border-bottom-color: #be1e2d; }

	#site-navigation .navbgBar { display: none; } /* not used in this template */

	/* @media screen and ( max-width: 992px ) { */
	@media screen and ( max-width: 1023px ) {

		#site-navigation {
			width: auto;
			z-index: 100; /* this is really for flagging the use of this media query in JS */
		}

			#site-navigation .logoArea {
				padding: 2em 7.75em 1.625em;
				width: 100%;
				text-align: center;
			}

				#site-navigation .logo {
					width: 18em;
					height: 4.1875em;
					padding: 0;
					margin: 0 auto;
					border-right: none;
				}

				#site-navigation .tagline { display: none; }

			#site-navigation .smallLinks { display: none; }

			#site-navigation ul {
				display: none;
				width: 17em;
				right: 1.25em;
				top: -0.2038em;
				padding: 0.2038em 0 0;
				left: auto;
				text-align: left;
				z-index: 3;
				height: auto;
				margin: 0;
				-webkit-box-shadow: 0.2308em 0.2308em 1px 0 rgba(65, 64, 66,0.6); /* 1px spread for Safari 6, iOS 6 and Android 2, per http://caniuse.com/#feat=css-boxshadow */
				-moz-box-shadow:    0.2308em 0.2308em 0 0 rgba(65, 64, 66,0.6);
				box-shadow:         0.2308em 0.2308em 0 0 rgba(65, 64, 66, 0.6);
			}

				#site-navigation ul li {
					float: right;
					clear: right;
					white-space: normal;
					margin: 0;
					font-size: 1.5em;
					line-height: 1.125em;
					width: 100%;
				}

					#site-navigation ul li.smallLink { display: inline; }

					#site-navigation ul li a {
						margin: 0 0.5em;
						padding: 0.5em 0;
						color: white;
						border-bottom: none;
					}

					#site-navigation ul li a.profile,
					#site-navigation ul li a.register,
					#site-navigation ul li a.signIn,
					#site-navigation ul li a.signOut,
					#site-navigation ul li a.langLink {
						color: #bbb;
					}

					#site-navigation ul li:hover { background-color: white; }
					#site-navigation ul li:hover a,
					#site-navigation ul li:hover a:hover { color: rgb(190, 30, 45); }

			#site-navigation .tagLineBar {
				display: block;
				text-align
			}

			#site-navigation .burger {
				position: absolute;
				display: block;
				top: 0;
				right: 0;
				z-index: 2;
				padding: 3.25em 2.875em 2.3125em;
				cursor: pointer;
			}

				#site-navigation .burger div {
					width: 2.625em;
					height: 0.25em;
					-moz-box-shadow: inset -0.125em 0.125em 0.125em rgba(255, 255, 255, .5), inset 0.125em -0.125em 0.125em rgba(0, 0, 0, .5);
					-webkit-box-shadow: inset -0.125em 0.125em 0.125em rgba(255, 255, 255, .5), inset 0.125em -0.125em 0.125em rgba(0, 0, 0, .5);
					box-shadow: inset -0.125em 0.125em 0.125em rgba(255, 255, 255, .5), inset 0.125em -0.125em 0.125em rgba(0, 0, 0, .5);
					margin: 0 0.3125em 0.3125em;
					background-color: white;
				}

				#site-navigation .burger span {
					display: block;
					position: absolute;
					z-index: 2;
					left: 0;
					right: 0;
					top: 0;
					text-transform: uppercase;
					text-align: center;
					line-height: 4.2em;
					font-size: 1.375em;
				}

	}

	@media screen and ( max-width: 640px ) {
		#site-navigation .logoArea,
		#site-navigation .burger {
			font-size: 1.455em;
		}
		#site-navigation .tagLineBar {
			font-size: 1.909em;
		}
	}

	@media screen and ( max-width: 576px ) {
		#site-navigation .logoArea {
			padding-left: 2em;
			padding-right: 9em;
			text-align: left;
		}
	}

	@media screen and ( max-width: 486px ) {
		#site-navigation .logoArea {
			padding-right: 7.25em;
		}
		#site-navigation .burger {
			padding-left: 2em;
			padding-right: 2em;
		}
		#site-navigation .tagLineBar {
			font-size: 1.454em;
			height: 2.125em;
			line-height: 2.125em;
		}
	}

	@media screen and ( max-width: 440px ) {
		#site-navigation .logo {
			font-size: 0.75em;
		}
		#site-navigation .burger {
			padding-top: 2.75em;
			padding-bottom: 1.8125em;
		}
	}

	@media screen and ( max-width: 368px ) {
		#site-navigation .logoArea {
			font-size: 12px;
			padding: 2.667em 7.25em 2.167em 2em;
		}
		#site-navigation .burger {
			padding-top: 2.25em;
			padding-bottom: 1.5em;
		}
		#site-navigation .tagLineBar {
			font-size: 14px;
			height: 2.429em;
			line-height: 2.429em;
		}
	}

article{
	position:relative;
}

footer.site-footer {
	background-color: #e6e7e8;
	color: #180902;
	font-size: 0.75em;
	padding: 1em 7.5% 2em;
	vertical-align: middle;
	line-height: 1.25em;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
}

	footer.site-footer h3 {
		font-size: 1.333em;
		display: inline-block;
		margin-right: 2em;
	}

	footer.site-footer address {
		display: inline-block;
		margin: 0;
		margin-right: 3em;
		vertical-align: middle;
		font-size: 1.125em;
		padding: 2em 0 1em;
		font-weight: 600;
	}

		footer.site-footer address br { display: none; }

		@media screen and ( max-width: 480px ) {
			footer.site-footer address br { display: inline; }
		}

	footer.site-footer .site-info > a {
		float: right;
		padding: 3em 0 0;
	}

	footer.site-footer a {
		color: #180902;
		text-decoration: none;
	}

		footer.site-footer a:hover { text-decoration: underline; }

	footer.site-footer .smallPrint {
		font-size: 0.833em;
		color: #636363;
	}

#recaptcha_area { margin: 1em 0; }
iframe[src="about:blank"]{display:none;} /* reCAPTCHA layout fix, per: http://stackoverflow.com/questions/8155645/recaptcha-creates-iframe-on-page-breaks-styling */

div.page.news-press div.content,
div.page.membership div.content {
	overflow: auto;
}

#primary {
	float: left;
	width: 75%;
	font-size: 0.875em;
}

#secondary {
	float: right;
	font-size: 0.875em;
	max-width: 25%;
}

#main {
	padding-right: 3em;
}

	#main header {
		position: relative;
		top: auto;
	}

		#main > header > h1 {
			font-size: 1.5em;
			margin-bottom: 1.5em;
		}

article.hentry {
	margin: 1.5em 0 2.5em;
}

	article header > h1 {
		/* font-size: 1.143em; */
		font-size: 1.714em;
		margin-bottom: 0.25em;
	}

		article header .entry-meta {
			color: #bbb;
			font-size: 0.857em;
		}

			article header .entry-meta a,
			article header .entry-meta a:visited {
				color: #bbb;
			}

				article header .entry-meta a:hover {
					color: white;
				}

	article .entry-summary,
	article .entry-content {
		margin: 1em 0;
		/* font-size: 1.143em; */
	}

	article footer {
		font-size: 0.857em;
		color: #bbb;
	}

		article footer a,
		article footer a:visited {
			color: #bbb;
		}

			article footer a:hover {
				color: white;
			}

input[type="submit"] {
	display: inline-block;
	padding: 0.05em 0.15em;
	-webkit-box-shadow: 0.1875em 0.1875em 1px 0 rgba(0, 0, 0, 0.6); /* 1px spread for Safari 6, iOS 6 and Android 2, per http://caniuse.com/#feat=css-boxshadow */
	-moz-box-shadow:    0.1875em 0.1875em 0 0 rgba(0, 0, 0, 0.6);
	box-shadow:         0.1875em 0.1875em 0 0 rgba(0, 0, 0, 0.6);
	background-color: rgb(190, 30, 45);
	text-transform: uppercase;
	font-family: Ubuntu, sans-serif;
	text-decoration: none;
	font-style: normal;
	cursor: pointer;
	border: none;
	border-radius: 0;
	color: white;
	text-shadow: none;
	font-size: 1.4286em;
	line-height: 1.3em;
	margin-right: 0.1875em;
}

	input[type="submit"]:hover {
		background-color: #888 !important;
		color: black;
		-webkit-box-shadow: 0.1875em 0.1875em 1px 0 rgba(0, 0, 0, 0.6); /* 1px spread for Safari 6, iOS 6 and Android 2, per http://caniuse.com/#feat=css-boxshadow */
		-moz-box-shadow:    0.1875em 0.1875em 0 0 rgba(0, 0, 0, 0.6);
		box-shadow:         0.1875em 0.1875em 0 0 rgba(0, 0, 0, 0.6);
		border: none;
	}

#registerForm {
}

	#registerform label {
		width: 35%;
		display: inline-block;
		text-align: right;
		margin-right: 1em;
	}

		#registerform label.cimy_uef_label_checkbox { float: left; } /* because plugin "Cimy User Extra Fields" puts checkboxes before the label on the registration form (but not the "my profile" form) */

		#registerform p:after { /* float clearing for above */
			content: "";
			display: table;
			clear: both;
		}

	#your-profile .form-table th {
		width: 35%;
		text-align: right;
		font-weight: normal;
		padding-right: 1em;
		padding-top: 0.5em;
		padding-bottom: 0.5em;
	}

	#your-profile .form-table .description {
		font-size: 0.75em;
		color: #555;
	}

	#your-profile .form-table td {
		padding-left: 0;
		padding-top: 0.5em;
		padding-bottom: 0.5em;
	}

	#your-profile .form-table td,
	#your-profile .form-table input {
		font-size: 1em;
		line-height: 1.429em;
	}

	#pass-strength-result { color: black; }

.loginFormWrapper,
.registerButtonWrapper,
#lostpasswordform,
#registerform,
#your-profile {
	display: inline-block;
	padding: 0 1em;
	margin: 0 1em 1em 0;
	vertical-align: top;
	background-color: rgb(230, 231, 232);
}

	@media screen and ( max-width: 386px ) {
		#registerform {
			margin-left: -1em;
			margin-right: -1em;
		}
		.g-recaptcha {
			margin: 0 -1.5em;
		}
	}

	.loginFormWrapper #loginform { text-align: right; }

	.registerButtonWrapper li a {
		display: inline-block;
		padding: 0.05em 0.15em;
		-webkit-box-shadow: 0.1875em 0.1875em 1px 0 rgba(0, 0, 0, 0.6); /* 1px spread for Safari 6, iOS 6 and Android 2, per http://caniuse.com/#feat=css-boxshadow */
		-moz-box-shadow:    0.1875em 0.1875em 0 0 rgba(0, 0, 0, 0.6);
		box-shadow:         0.1875em 0.1875em 0 0 rgba(0, 0, 0, 0.6);
		background-color: #be1e2d;
		font-family: Ubuntu, sans-serif;
		text-transform: uppercase;
		text-decoration: none;
		font-style: normal;
		cursor: pointer;
		color: white;
	}

		.registerButtonWrapper li a {
			font-size: 1.25em;
			margin-bottom: 1em;
		}

		.registerButtonWrapper li a:hover {
			background-color: #888 !important;
			color: black;
		}

		.loginFormWrapper .login-submit {
			margin-bottom: 1.4286em;
		}

#primary p { font-size: 1em; }


.links h3 {
	margin-top: 2em;
	margin-bottom: 1em;
}

.linkLogo {
	display: inline-block;
	width: 170px;
	margin: 0 1em 1em 0;
	text-decoration: none;
	text-align: center;
	vertical-align: top;
	font-size: 0.875em;
	color: black !important;
	background-color: white;
	padding: 0.5em;
	box-sizing: content-box;
	height: 150px;
}

	.linkLogo:hover { background-color: #eee; }

	.linkLogo img {
		width: 170px;
		height: 110px;
	}