/* Encorp Pacific (Canada) 2011 Site Design (2015 Responsive Revision) - News Page CSS */
/* Last Updated: 2016.01.28 ET */

@import url(encp0100.css);

ul.newslist {
	list-style: none;
	line-height: 1.2em;
	margin: 0em;
	padding: 0em;
}

ul.newslist li {
	position: relative;
	overflow: hidden;
}

ul.newslist li img {
	float: left;
}

ul.newslist li a, ul.newslist li a:visited {
	color: black;
	text-decoration: none;
}

ul.newslist li a:hover {
	color: rgb(0,53,173);
	text-decoration: underline;
}

ul.newslist div {
	font-weight: bold;
	margin-left: 70px;
}

ul.newslist div.headline {
	padding-top: 0.5em;
	border-top: 2px solid rgb(220,220,220);
}

ul.newslist div.teaser {
	font-size: 0.9em;
	font-weight: normal;
	margin-top: 0.1em;
}

ul.newslist div.morelink {
	color: rgb(0,53,173);
	text-decoration: underline;
	text-align: right;
}

ul.newslist.applinks div.headline {
	clear: left;
	float: left;
}

#vidplayer {
	position: relative;
	overflow: hidden;
	width: 400px;
	height: 225px;
	float: right;
	margin-left: 10px;
}

#mainbanner, div.slidebanner {
	position: relative;
	overflow: hidden;
	min-height: 360px;
}

div.slideshow {
	position: absolute;
	overflow: hidden;
	top: 10px;
	bottom: 10px;
	left: 10px;
	right: 10px;
	background-color: rgb(206,218,237);
}

div.slide {
	position: absolute;
	overflow: hidden;
	top: 0px;
	bottom: 0px;
	width: 100%;
	left: 100%;
	margin: 0px;
	padding: 0px;
	background-size: cover;
/*	-moz-transition: left 0.5s, background-position 6s;
	-webkit-transition: left 0.5s, background-position 6s;
	-o-transition: left 0.5s, background-position 6s;
	transition: left 0.5s, background-position 6s; */
	-moz-transition: left 0.5s;
	-webkit-transition: left 0.5s;
	-o-transition: left 0.5s;
	transition: left 0.5s;
}

div.slide.anchor_tl { background-position: 20% 20%; }
div.slide.anchor_tc { background-position: 50% 20%; }
div.slide.anchor_tr { background-position: 80% 20%; }
div.slide.anchor_ml { background-position: 20% 50%; }
div.slide.anchor_mc { background-position: 50% 50%; }
div.slide.anchor_mr { background-position: 80% 50%; }
div.slide.anchor_bl { background-position: 20% 80%; }
div.slide.anchor_bc { background-position: 50% 80%; }
div.slide.anchor_br { background-position: 80% 80%; }

div.slide > a, div.slide > a:visited, div.slide > a:hover {
	position: absolute;
	overflow: hidden;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	color: black!important;
}

div.slide > span.adminlink {
	position: absolute;
	background-color: rgba(255,255,255,0.5);
	text-shadow: 1px 1px 0px white;
	padding: 0.2em;
}

div.slide img.overlay {
	display: block;
	-webkit-filter: drop-shadow (8px 8px 4px rgba(0,0,0,0.5));
	filter: drop-shadow(8px 8px 4px rgba(0,0,0,0.5));
}

div.slide img.overlay.anchor_tl { margin: 14px auto auto 2%; }
div.slide img.overlay.anchor_tc { margin: 14px auto auto auto; }
div.slide img.overlay.anchor_tr { margin: 14px 2% auto auto; }


ul.slidenav {
	position: absolute;
	list-style: none;
	margin: 0px;
	padding: 0px;
	background-color: white;
	right: -10px;
	bottom: -7px;
	padding: 7px;
	z-index: 500;
}

input.slideselector { display: none; }

ul.slidenav li {
	background-color: rgb(255,159,0);
	font-family: DIN, "Trebuchet MS", sans-serif;
	font-weight: bold;
	font-size: 18px;
	float: left;
	margin: 0px;
	margin-right: 3px;
	padding: 0px;
}

ul.slidenav li.milk { background-color: rgb(108,171,231); }
ul.slidenav li.elec { background-color: rgb(102,155,63); }

ul.slidenav li label {
	background-color: rgb(0,53,173);
	color: white;
	display: block;
	text-decoration: none;
	padding: 0.6em 0.7em 0.4em;
}

ul.slidenav li label:hover {
	background-color: rgba(255,159,0,0);
	-moz-transition: background-color 0.5s;
	-webkit-transition: background-color 0.5s;
	-o-transition: background-color 0.5s;
	transition: background-color 0.5s;
}

.for_1:checked ~ .id_1 { left: 0% }
.for_2:checked ~ .id_2 { left: 0% }
.for_3:checked ~ .id_3 { left: 0% }
.for_4:checked ~ .id_4 { left: 0% }
.for_5:checked ~ .id_5 { left: 0% }
.for_6:checked ~ .id_6 { left: 0% }
.for_7:checked ~ .id_7 { left: 0% }
.for_8:checked ~ .id_8 { left: 0% }

.for_1:checked ~ ul.slidenav > .nav_1 > label { background-color: rgba(255,159,0,0); text-decoration: underline; }
.for_2:checked ~ ul.slidenav > .nav_2 > label { background-color: rgba(255,159,0,0); text-decoration: underline; }
.for_3:checked ~ ul.slidenav > .nav_3 > label { background-color: rgba(255,159,0,0); text-decoration: underline; }
.for_4:checked ~ ul.slidenav > .nav_4 > label { background-color: rgba(255,159,0,0); text-decoration: underline; }
.for_5:checked ~ ul.slidenav > .nav_5 > label { background-color: rgba(255,159,0,0); text-decoration: underline; }
.for_6:checked ~ ul.slidenav > .nav_6 > label { background-color: rgba(255,159,0,0); text-decoration: underline; }
.for_7:checked ~ ul.slidenav > .nav_7 > label { background-color: rgba(255,159,0,0); text-decoration: underline; }
.for_8:checked ~ ul.slidenav > .nav_8 > label { background-color: rgba(255,159,0,0); text-decoration: underline; }

/* For full right-to-left (rather than in-and-out from right only) sliding:
.for_2:checked ~ .id_1, .for_3:checked ~ .id_1, .for_4:checked ~ .id_1, .for_5:checked ~ .id_1, .for_6:checked ~ .id_1, .for_7:checked ~ .id_1, .for_8:checked ~ .id_1 { left: -100% }
.for_3:checked ~ .id_2, .for_4:checked ~ .id_2, .for_5:checked ~ .id_2, .for_6:checked ~ .id_2, .for_7:checked ~ .id_2, .for_8:checked ~ .id_2 { left: -100% }
.for_4:checked ~ .id_3, .for_5:checked ~ .id_3, .for_6:checked ~ .id_3, .for_7:checked ~ .id_3, .for_8:checked ~ .id_3 { left: -100% }
.for_5:checked ~ .id_4, .for_6:checked ~ .id_4, .for_7:checked ~ .id_4, .for_8:checked ~ .id_4 { left: -100% }
.for_6:checked ~ .id_5, .for_7:checked ~ .id_5, .for_8:checked ~ .id_5 { left: -100% }
.for_7:checked ~ .id_6, .for_8:checked ~ .id_6 { left: -100% }
.for_8:checked ~ .id_7 { left: -100% }
*/

/* Animation Test */

/* .for_2:checked ~ .id_2 { background-position: 80% 20%!important; } */

div.slidecaption {
	position: absolute;
	bottom: 0px;
	background-color: white;
	width: 38%;
	max-width: 300px;
	padding: 10px 10px 0px 0px;
}

div.slidecaption h1 {
	background-color: rgb(255,159,0);
	color: white;
	font-family: DIN, "Trebuchet MS", sans-serif;
	font-weight: bold;
	font-size: 2.6em;
	line-height: 1em;
	text-transform: uppercase;
	padding: 0.5em 18px 0.3em;
	margin-bottom: 10px;
}
div.slidecaption.milk h1 { background-color: rgb(108,171,231); }
div.slidecaption.elec h1 { background-color: rgb(102,155,63); }

div.slidecaption h1.long { font-size: 2em; }

div.slidecaption p {
	font-size: 1.2em;
	margin: 1em 18px 0em;
}

div.fb-page {
	width: 100%!important;
	overflow-x: scroll;
	margin-bottom: -10px;
}

div.videosummary {
	position: relative;
	overflow: hidden;
	margin-bottom: 10px;
	border-bottom: 3px solid rgb(220,220,220);
}

.bannerlist {
	padding: 0em;
	margin: 1em 0em;
}

.bannerlist li {
	margin: 0em 0em 0.5em 1.5em;
}

.bannerlist > li.inactive {
	background-color: rgba(255,0,0,0.1);
	font-style: normal!important;
	padding: 0.25em 0.5em;
}

.bannerlist > li.inactive::before {
	content: 'Inactive';
	color: rgb(255,0,0);
	float: right;
	margin-left: 0.5em;
}

.bannerlist > li.expired, h3.expired {
	background-color: rgba(255,255,0,0.2);
	padding: 0.25em 0.5em;
}

.bannerlist > li.expired::before {
	content: 'Expired';
	float: right;
}

.bannerlist > li.upcoming, h3.upcoming {
	background-color: rgba(0,255,0,0.2);
	padding: 0.25em 0.5em;
}

.bannerlist > li.upcoming::before {
	content: 'Upcoming';
	float: right;
}

.bannerlist > li > a, .bannerlist > li > a:visited { font-weight: bold; }

.bannerlist > li > label {
	float: right;
	margin-left: 1em;
}

.bannerlist dl {
	position: relative;
	overflow: hidden;
	font-size: 0.8em;
	line-height: 1.2em;
	padding: 0em;
	margin: 0.5em 0em;
}

.bannerlist dl > dt {
	float: left;
	clear: left;
	width: 8em;
	margin-bottom: 0.2em;
}

.bannerlist dl > dd {
	padding: 0em 0em 0em 9em;
	margin: 0em 0em 0.2em 0em;
}

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

	div.halfblock div.slidecaption h1 {
		font-size: 2vw;
	}

	div.halfblock div.slidecaption p {
		font-size: 14px;
	}
}

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

	div.threequarterblock div.slidecaption h1 {
		font-size: 3vw;
	}

	div.threequarterblock div.slidecaption p {
		font-size: 14px;
	}
}

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

	div.fullblock div.slidecaption h1 {
		font-size: 4vw;
	}

	div.fullblock div.slidecaption p {
		font-size: 14px;
	}
}