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

@import url(encp0100.css);

ul.producttabs {
	clear: left!important;
	float: right!important;
	margin-bottom: -50px!important;
}

li.alc.active a, li.alc.active a:visited {
	background-color: rgb(0,53,173)!important;
}

table.products {
	clear: both;
	margin-bottom: 1em;
}

table.products th, table.products td {
	vertical-align: middle;
	text-align: center;
	padding: 0.25em 0.5em;
	border-top: 1px solid rgb(220,220,220);
}

table.products th {
	font-family: DIN, "Trebuchet MS", sans-serif;
	font-weight: bold;
	line-height: 1.2em;
	text-transform: uppercase;
	padding: 0.5em;
}

table.products th div.note {
	text-transform: none;
	line-height: 1.1em;
}

table.products.bev { border-bottom: 14px solid rgb(255,159,0); }
table.products.milk { border-bottom: 14px solid rgb(108,171,231); }
table.products.elec { border-bottom: 14px solid rgb(102,155,63); }
table.products.alc { border-bottom: 14px solid rgb(0,53,173); }

table.products.bev th {	background-color: rgb(255,159,0); }
table.products.milk th { background-color: rgb(108,171,231); }
table.products.elec th { background-color: rgb(102,155,63); color: white; }
table.products.alc th {
	color: white;
	background-color: rgb(0,53,173);
}

td.material span { cursor: help; }

td.sizes { white-space: nowrap; }

table.products tr.group td { border-top: 3px solid rgb(220,220,220); }

table.products caption { padding-top: 10px; }

table.products td.title { font-weight: bold; }

table.products td.picture { width: 60px; }

table.products.milk td.tips {
	width: 15em;
	/* text-align: left; */
}

table.products.elec td.body {
	width: 30%;
	text-align: left;
}
table.products.elec td.list {
	width: 25%;
	text-align: left;
}
table.products.elec td.ehf {
	width: 10em;
}

table.products td ul {
	line-height: 1.3em;
	margin: 0em;
	padding: 0em;
}

table.products td li {
	margin-left: 1.5em;
	padding: 0em;
}

table.products img.example {
	cursor: help;
	padding: 10px;
}

table.products div.subtitle {
	font-weight: bold;
	margin: 0.5em 0em;
}

table.products .highlight {
	background-color: rgb(255,255,103)!important;
	color: black;
	font-weight: bold;
}

p.poplink {
	display: none;
	font-size: 0.8em;
	color: rgb(0,53,173);
	text-decoration: underline;
	cursor: pointer;
}

p.morelink {
	display: none;
	color: rgb(0,53,173);
	text-decoration: underline;
	cursor: pointer;
	text-align: right;
}

div.popup {
	position: absolute;
	left: 120px;
	width: 720px;
	background-color: white;
	text-align: center;
	border: 1px solid #aaa;
	z-index: 7000;
	-moz-box-shadow: 0 4px 7px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 4px 7px rgba(0, 0, 0, 0.2);
	box-shadow: 0 4px 7px rgba(0, 0, 0, 0.2);
}

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

	ul.producttabs {
		float: none!important;
		margin-bottom: 0px!important;
	}

	table.products {
		width: 100%!important;
	}

	table.products tbody,
	table.products td,
	table.products tr {
		box-sizing: border-box;
		display: block;
		border-collapse: collapse;
		text-align: left;
		width: 100%!important;
		border: none!important;
	}

	table.products thead,
	table.products td.teaser,
	table.products.bev td.body,
	table.products.alc td.body {
		display:none;
	}

	table.products.elec td.body {
		overflow: visible;
	}

	table.products.elec td.title {
		background: rgb(206,218,237);
		padding: 0.5em;
	}

	table.products td.material,
	table.products td.sizes,
	table.products td.deposit,
	table.products td.crf,
	table.products td.ehf,
	table.products td.tips {
		background: #eaeef6;
		padding: 0em 0.5em;
	}

	table.products td.picture {
		padding-top: 10px;
		border-top: 3px solid rgb(220,220,220)!important;
	}
	
	table.products td.material {
		padding-top: 5px;
		border-top: 2px solid white!important;
	}

	table.products td.ehf { padding: 0.5em; }

	table.products td.tips {
		color: #cb553d;
		font-weight: bold;
		padding-bottom: 0.5em;
	}

	table.products td:last-child {
		padding-bottom: 0.5em;		
	}
	
	table.products td.material:before { content: "Container Type: "; } 
	table.products td.sizes:before { content: "Size: "; }
	table.products td.deposit:before { content: "Deposit Value: "; }
	table.products td.crf:before { content: "Container Recycling Fee: "; }
	table.products td.ehf:before { content: "Electronics Handling Fee: "; }
	table.products td.tips:before { content: "How To Recycle: "; }

	table.products td.material:before,
	table.products td.sizes:before,
	table.products td.deposit:before,
	table.products td.crf:before,
	table.products td.ehf:before,
	table.products td.tips:before {
		display: inline-block;
		width: 14em;
		font-size: 0.8em;
		line-height: 1em;
		text-transform: uppercase;
	}

	table.products.elec p.poplink, table.products.elec p.morelink {
		display: inline-block;
		background-color: rgb(102,155,63);
		color: white;
		font-family: DIN, "Trebuchet MS", sans-serif;
		font-weight: bold;
		font-size: 12px;
		line-height: 1.2em;
		text-transform: uppercase;
		text-decoration: none;
		padding: 0.6em 1em 0.4em;
	}

	table.products.elec div.popup {
		width: 95%;
		left: 2%;
	}
	
	table.products.elec div.popup img {
		max-width: 95% !important;
		height: auto;
	}
	
}

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

	ul.producttabs li {
		width: 100%!important;
		margin-right: 0px;
		margin-bottom: 2px!important;
	}

	ul.producttabs li a, ul.producttabs li a:visited {
		text-align: left!important;
		margin-bottom: 0px!important;
		margin-right: 2px;
	}

	ul.producttabs li a::before {
		content: '';
		position: absolute;
		right: 10px;
		top: 50%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		height: 18px;
		width: 18px;
		background-color: rgba(0,0,0,0.1);
		color: white;
		border-radius: 9px;
		margin-top: -9px;
	}

	ul.producttabs li a::after {
		content: '';
		position: absolute;
		right: 16px;
		top: 50%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		height: 8px;
		width: 8px;
		border-top: 3px solid white;
		border-right: 3px solid white;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
		margin-top: -4px;
	}

	ul.producttabs li.active a::after {
		right: 15px;
		top: 10px;
		-webkit-transform: rotate(135deg);
		-moz-transform: rotate(135deg);
		-ms-transform: rotate(135deg);
		-o-transform: rotate(135deg);
		transform: rotate(135deg);
	}
	
}