/* Beverage Container Recycling Network of Canada - Main Website Layout CSS */
/* Last Updated: 2021.07.20 ET */

/* Basic elements */

body {
	overflow-x: hidden;
	margin: 0;
}

/* Universal classes */

.relative {
	position: relative;
	overflow: hidden;
}

.help { cursor: help; }

.haslayout {
	position: relative;
	overflow: hidden;
}

.flexrow {
	clear: both;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-direction: row;
	-webkit-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

.flexwrap {
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

.flexcol {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
}

.flexgrow {
	-webkit-flex-grow: 1;
	flex-grow: 1;
}

.backlink {
	font-weight: bold;
	font-size: 0.96rem;
	margin: 2em 0 0;
}

.backlink::before {
	content: '\25C0';
	color: #1d70b7;
	font-size: 0.76em;
	margin-right: 0.5em;
}

.nextlink {
	display: block;
	float: right;
}

.adminonly {
	background-color: rgba(255,159,0,0.2);
}

span.adminonly {
	display: inline-block;
	padding: 0.1em 0.7em;
	margin: 0em 1em;
}

.adminlink {
	color: #999 !important;
	font-size: 0.76rem;
	line-height: 1rem;
}

.adminlink a,
.adminlink a:visited {
	color: #fc7d00 !important;
	text-decoration: underline !important;
	border: none !important;
}

.adminlink a:hover {
	color: #82bc00 !important;
	border: none !important;
}

ul.childnav span.adminlink {
	visibility: hidden;
	float: right;
}

ul.childnav li:hover span.adminlink {
	visibility: visible;
}

.pagebreak {
	border-top: none;
	background-image: none;
	padding-top: 0px;
}

.htmlarea .toolbar td {
	padding: 0px;
}

/* Element classes */

div.scrollcontainer {
	overflow: auto;
}

img.inlineimage {
	vertical-align: middle;
}

/* Headings */

/* Page layout */

#page {
	position: relative;
	overflow: hidden;
	margin-bottom: 20px;
}

.master_container {
	width: 56.47em;
	margin: 0px auto;
}

	/* Left Column */

	.left_column {
		width: 14.59em;
		float: left;
		margin-right: 2px;
	}

		.main_logo {
			width: 14.59em;
			height: 6.70em;
			background: white;
			border-bottom: 2px solid #fff;
		}

			.main_logo_container {
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				text-align: center;
				padding-top: 1.5em;
			}

			.main_logo_container a { border:none; }

			.main_logo_container img {
				width: 90%;
				height: 70%;
				object-fit: contain;
			}

		.mobile_main_nav_button_container {
			display: none;
		}

		.mobile_main_nav {
			display: none;
		}

		.recycle_search_container {
			min-height: 16em;
			background: #184f7f;
			position: relative;
			overflow: hidden;
		}

			.recycle_search_content {
				max-width: 18em;
				padding-top: 2em !important;
				margin-left: auto;
				margin-right: auto;
			}

			.recycle_search_title {
				background: url('/images/bcsf_icon_search.png') left center no-repeat !important;
				color: #fff;
				font-weight: bold;
				font-size: 14px;
				line-height: 1.2;
				text-transform: uppercase;
				padding-left: 34px;
				margin-top: 20px;
			}

			.recycle_search_content {
				padding: 10px;
				position: relative;
			}

			.recycle_search_content select {
				display: block;
				width: 100%;
				height: 40px;
				background: #184f7f url('/images/bcsf_icon_down_arrow.png') right 10px center no-repeat !important;
				color: #fff;
				font-size: 16px;
				text-overflow: ellipsis;
				padding: 10px;
				border: 1px solid white;
				border-radius: 10px;
				margin-top: 20px;
			}

			.recycle_search_content select:hover,
			.recycle_search_content select.selected {
				background-color: #1d70b7 !important;
			}

			.recycle_search_content select.selected {
				background-image: none !important;
			}

			.recycle_search_content select.required {
				background-color: red !important;
			}

			.recycle_search_content select.required::before {
				content: 'Required...';
				display: block;
				color: red;
			}

			.recycle_search_content select option {
				/* background: #184f7f; */
				padding: 0.2em 0.5em;
			}

			.recycle_search_content a.search_submit,
			.recycle_search_content button.search_submit {
				display: block;
				float: right;
				background: #184f7f;
				color: white;
				width: 120px;
				font-weight: bold;
				font-size: 0.84em;
				text-align: center;
				text-decoration: none;
				padding: 4px;
				margin: 20px 0 40px;
				border: 2px solid white;
				border-radius: 4px;
			}

			.recycle_search_content a.search_submit.ready {
				background-color: #82bc00;
			}

			.recycle_search_content a.search_submit:hover,
			.recycle_search_content button.search_submit:hover {
				background-color: #fc7d00;;
			}

		.addthis_toolbox {
			width: 250px;
			margin: 16px auto;
			position: relative;
			overflow: hidden;
		}

			.addthis_toolbox a {
				margin: 0 2px 0 0;
				padding: 0;
				display: block;
				float: left;
				border: none;
			}

				.addthis_toolbox img {
					width: 48px;
					height: 48px;
				}

			.addthis_toolbox a.last {
				margin: 0;
			}

		.promo_container {
			position: relative;
			overflow: hidden;
			font-size: 0.9em;
			line-height: 19px;
			padding-bottom: 16px;
			border-bottom: 1px solid #dfdfdf;
			margin-top: 16px;
		}

		.promo_container:first-child {
			padding-top: 16px;
			border-top: 1px solid #dfdfdf;
		}

		.promo_container h4 {
			margin: 0 0 0.5em;
		}

		.promo_container a {
			border: none;
		}

		.promo_icon {
			position: relative;
			overflow: hidden;
			width: 51px;
			float: left;
			margin-right: 10px;
		}

		.promo_content {
			position: relative;
			overflow: hidden;
		}

		.promo_content a:hover {
			border-bottom: 1px solid #fc7d00;
		}

		.promo_content .recycling_promo_info {
			margin-top: 5px;
			margin-bottom: 5px;
		}

	/* Right Column */

    .right_column {
		width: 41.76em;
		float: left;
	}

		.member_login_container {
			width: 41.76em;
			height: 55px;
			background: #5f8608;
			margin-bottom: 2px;
		}

			.member_login_container a.button,
			.member_login_container a.button:visited {
				display: block;
				float: right;
				background: #5f8608;
				color: white;
				font-weight: bold;
				font-size: 0.84em;
				text-align: center;
				text-decoration: none;
				padding: 4px 14px;
				border: 2px solid white;
				border-radius: 4px;
				margin: 10px 10px 10px 0;
			}

			.member_login_container a.button.secure,
			.member_login_container a.button.secure:visited {
				background-image: url('/images/bcsf_icon_key.png');
				background-position: 10px center;
				background-repeat: no-repeat;
				padding: 4px 14px 4px 60px;
			}

			.member_login_container a.button:hover {
				background-color: #fc7d00;
			}

		.main_nav_container {
			width: 41.76em;
		}

			.main_nav_container table {
				width: 100%;
				margin: 0;
				padding: 0;
			}

			.main_nav_container table tr td {
				background: #1d70b7;
				border-right: 2px solid white;
				border-bottom: 2px solid white;
				text-align: center;
				vertical-align: middle;
				max-width: 100px;
				margin: 0;
				padding: 0;
			}

			.main_nav_container table tr td:last-child { border-right: none; }

			.main_nav_container table tr td a {
				display: block;
				height: 100%;
				background: #1d70b7;
				color: #fff;
				font-weight: bold;
				font-size: 14px;
				line-height: 1.2;
				text-transform: uppercase;
				text-decoration: none;
				padding: 12px 10px 10px 10px;
				border: none;
			}

			.main_nav_container table tr td a:hover,
			.main_nav_container table tr td a.active {
				background: #184f7f url('/images/nav_arrow.png') bottom center no-repeat !important;
			}

			.secondary_nav_container {
				box-sizing: border-box;
				width: 41.76em;
				background: #1d70b7;
				padding: 13px;
				display: none;
				text-align: center;
				color: #fff;
				position: absolute;
				top: 112px;
				z-index: 5;
				border-bottom: 2px solid #fff;
			}

				.secondary_nav_container a {
					color: #fff;
					text-decoration: none;
					font-weight: bold;
					font-size: 0.94em;
					border: none;
				}

				.secondary_nav_container a:not(:last-child)::after {
					content: '|';
					padding-left: 14px;
					padding-right: 10px;
				}

				.secondary_nav_container a:hover {
					text-decoration:underline;
				}

			.main_banner {
				/* background: url('/images/bcsf_grfx_steward-logos.gif') 0 0 no-repeat; */
				margin: 30px auto 16px;
				position: relative;
				width: 650px;
			}

			.main_content_container {
				width: 41.76em;
			}

			.main_content_container .content_icon {
				width: 10.25em;
				height: 10.375em;
				float: left;
				margin-top: 3em;
			}

			.main_content_container .content_icon img {
				display: block;
				margin: 0px auto;
			}

			.main_content_container .main_content {
				width: 90%;
				min-height: 12em;
				float: left;
				margin-top: 0.7em;
				margin-left: 6%;
			}

			.main_content_container .content_icon + .main_content {
				width: 75%;
				margin-left: 0;
			}

			.about_stewards_container {
				position: relative;
				float: left;
				width: 45%;
				border-top: 1px solid #c7c2bc;
				margin-top: 2em;
				margin-left: 5%;
			}

				.about_stewards_content {
					font-size: 0.94em;
					padding: 0.625em 10px;
				}

			.footer_container {
				border-top: 1px solid #c7c2bc;
				float: left;
				width: 50%;
				margin-top: 2em;
			}

				 .footer_content {
					font-size: 0.94em;
					padding: 0.625em 10px;
					border-left: 1px solid #c7c2bc;
				}

					.footer_content a { border: none; }
					.footer_content a:hover { text-decoration: underline; }

/* Modal dialogs */

div.dialog {
	display: none;
	position: fixed;
	width: 80vw;
	height: 45vw;
	left: 50vw;
	top: 50vh;
	margin-left: -40vw;
	margin-top: -23vw;
	background-color: white;
	-webkit-box-shadow: 1px 1px 20px black;
	-moz-box-shadow: 1px 1px 20px black;
	box-shadow: 1px 1px 20px black;
}

div.dialog iframe {
	display: block;
	width: 80vw;
	height: 45vw;
	border: none;
}

div.dialog.video16x9 {
	background-color: black;
	max-height: 80vh !important;
}

span.closer,
a.closelink {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: absolute;
	top: -15px;
	right: -15px;
	display: block;
	width: 32px;
	height: 32px;
	background-color: black;
	border: 2px solid white;
	border-radius: 16px;
	cursor: pointer;
}

span.closer::before,
a.closelink::before {
	content: '×';
	position: absolute;
	top: 0px;
	width: 28px;
	color: white;
	font-weight: bold;
	font-size: 24px;
	line-height: 28px;
	text-align: center;
}

/* Navigation lists */

ul.tabbar {
	position: relative;
	overflow: hidden;
	list-style: none;
	background-color: white;
	margin: 0em;
	padding: 0em;
}

ul.tabbar li {
	float: left;
	margin: 0em;
	padding: 0em;
	margin-right: 2px;
}

ul.tabbar li a,
ul.tabbar li a:visited {
	display: block;
	position: relative;
	overflow: hidden;
	color: white;
	background-color: rgb(0,53,173);
	font-weight: bold;
	font-size: 14px;
	line-height: 14px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	padding: 11px 14px 7px 14px;
	margin-bottom: 2px;
}

ul.tabbar li a:hover {
	background-color: rgb(144,144,144) !important;
	-moz-transition: background-color 0.5s;
	-webkit-transition: background-color 0.5s;
	-o-transition: background-color 0.5s;
	transition: background-color 0.5s;
}

ul.tabbar li.active a {
	padding-right: 40px;
}



ul.tabbar li.active a,
ul.tabbar li.active a:visited { background-color: rgb(255,159,0); }

/* Other lists */

ul.selcblist {
	background-color: transparent;
	background-image: url(../images/encp_2011_bkgd_input-text.gif);
	list-style-type: none;
	height: 8.5em;
	overflow: auto;
	padding: 4px 0.5em !important;
	margin: 0em;
}

ul.selcblist li {
	margin-bottom: 0em;
	white-space: nowrap;
}

/* Tables */

table.data td {
	font-size: 9pt;
	line-height: 11pt;
	padding: 0.25em 0.5em;
}

table.data th {
	background-color: rgb(248,213,131);
	font-weight: normal;
	font-size: 9pt;
	line-height: 11pt;
	padding: 0.25em 0.5em;
}

table.data td.total,
table.data tr.total td {
	font-weight: bold;
	color: rgb(0,53,173);
	border-top: 1px solid rgb(255,159,0);
}

table.data td.sectionhead {
	padding-left: 0em;
	padding-top: 1em;
	font-size: 13pt;
	font-weight: bold;
	color: rgb(255,140,0);
}

table.data tr.sect td {
	padding-top: 1em;
}

table.data th.hzsep,
table.data td.hzsep {
	border-left: 6px solid white;
}

table.data td.note {
	font-size: 80%;
}

table.data + h3 {
	margin-top: 1.5em;
}

table.loginform div.note { margin-top: 0.5em; }

table.adminreportform {
	margin-bottom: 2em;
}

table.adminreportform tfoot th,
table.adminreportform tfoot td {
	padding-top: 1em;
}

/* jQuery UI */

/* Required to hide the initial container, otherwise it appears empty at a random point across the page */
#ui-datepicker-div { display: none; }

div.ui-datepicker {
	background-color: white;
	padding: 5px;
	box-shadow: 0px 0px 6px rgba(0,0,0,0.4);
	margin-top: 5px;
}

a.ui-datepicker-prev {
	float: left;
	cursor: pointer;
}

a.ui-datepicker-next {
	float: right;
	cursor: pointer;
}

div.ui-datepicker-title {
	font-weight: bold;
	text-align: center;
	width: 50%;
	margin: 0 25%;
}

table.ui-datepicker-calendar th {
	background-color: rgb(255,159,0);
	padding: 0.25em 0.5em;
	width: 14.3%;
}

table.ui-datepicker-calendar td {
	padding: 0em;
	width: 14.3%;
}

table.ui-datepicker-calendar tr:nth-child(odd) td {
	background-color: rgb(245,245,245);
}

table.ui-datepicker-calendar tr:nth-child(even) td {
	background-color: rgb(225,225,225);
}

table.ui-datepicker-calendar td > a {
	display: block;
	padding: 0.25em 0.5em;
	text-decoration: none;
	color: black;
}

table.ui-datepicker-calendar td > a:hover {
	color: white;
	background-color: rgb(0,53,173);
}

input.datepicker {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAMAAAAR8Wy4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphN2JiZjg5OS0wZGIwLTRkZDQtOTFhMy1lN2M3MzkxNmE4ZTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkJFNkRDNkFGRUFCMTFFNTg4OUJDMTUxOEYxN0E4NkIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkJFNkRDNjlGRUFCMTFFNTg4OUJDMTUxOEYxN0E4NkIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphN2JiZjg5OS0wZGIwLTRkZDQtOTFhMy1lN2M3MzkxNmE4ZTciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6YTdiYmY4OTktMGRiMC00ZGQ0LTkxYTMtZTdjNzM5MTZhOGU3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Jv8LsAAAACFQTFRF/89/ADWt/58A+/v75eXl09PTqqqqvr6+4+PjZmZm////ri6EaAAAADhJREFUeNpi4EIDDFyMjFxcnGDABWIzYKpgYmJAQkABDg5mJAQUYGNjRUJAAXZ2FiRENy1oACDAAOt0BjlSSq8iAAAAAElFTkSuQmCC');
	background-repeat: no-repeat;
	background-position: center right 3px;
	padding-right: 26px;
}

/* Specific ID elements */

#modal {
	display: none;
	position: fixed;
	z-index: 9000;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-color: rgba(0,0,0,0.5);
}

#siteindicator {
	position: fixed;
	top: 8px;
	left: 8px;
	width: 100px;
	background-color: rgb(255,0,0);
	color: white;
	font-weight: bold;
	font-size: 14px;
	line-height: 1.2em;
	text-align: center;
	text-transform: uppercase;
	padding: 0.2em 1em;
	border: 1px solid black;
	z-index: 400;
}


#appfooter {
	width: 75em;
	margin: 1em auto;
	color: #666;
	font-size: 0.76em;
}

#appfooter {
	clear: both;
	margin-top: 20px;
	position: relative;
	overflow: hidden;
}

#appfooter ul.adminlink {
	position: fixed;
	bottom: 0px;
	width: 44rem;
	list-style: none;
	background-color: rgba(255,255,255,0.8);
	text-align: right;
	padding: 0;
	padding-bottom: 5px;
	border-top: 2px solid rgba(255,255,255,0.4);
	margin: 0;
	margin-left: 16rem;
}

#appfooter ul.adminlink li {
	display: inline-block;
	background-color: #fff;
	padding: 0 0.5em 0 0.3em;
	border-right: 1px solid #999;
	margin: 0;
}

#appfooter ul.adminlink li:first-child {
	padding-left: 0.6em;
	border-left: 1px solid #999;
}

/* Media and capability hiders */

.printonly { display: none; }

.jsonly { display: none; }