/* Lists
---------------------------------------------------------------------------------------- //// */

/*
anchors
categories
featured
headlines
legal
document lists
expandable
tree
section navigation
thumbs
	thumbs_details
	thumbs_popover
*/

/* basic ----------------------------------------- //// */
ul.basic li {
	padding:0 0 0 18px;
	background:url(/static/images/global/bullet.gif) no-repeat 5px .65em}

/* anchors ----------------------------------------- //// */
.anchors {
	overflow:hidden;
	margin:0 0 2em;
	padding:1.5em 20px 1em;
	background:#f1f1f1}
.ie6 .anchors {
	height:1%}

.anchors ul {
	float:left;
	clear:none;
	margin:0;
	width:303px}
.anchors li {
	margin:0 0 .75em;
	background:none}

/* categories ----------------------------------------- //// */
.categories li {
	margin-bottom:2.571429em; /* 36px */}
.categories h2 {
	margin-bottom:.5em; /* 12px */}
.categories p {
	margin:0;
	color:#000;
	font-weight:normal;
	line-height:1.214; /* 17px */}
.categories a:hover span,
.categories a:focus span,
.categories a:active span {
	background:#2B8815;
	color:#fff}

/* featured ----------------------------------------- //// */
.featured li {
	position:relative;
	margin:0 0 1.5em;
	padding:0 0 0 153px;
	min-height:143px}
.featured h4 {
	margin:0 0 .5em;
	font-weight:bold;
	line-height:1.429; /* 20px */}
.featured img {
	position:absolute;
	top:0;
	left:0;
	max-width:143px}

/* headings ----------------------------------------- //// */
ul.headlines {
	margin:2em 0 .25em;
	padding:0 0 2em}
ul.headlines a {
	font-weight:bold;
	font-size:1.1em}
ul.headlines span.pub_date {
	padding:0 .25em;
	color:#8b8078;
	white-space:nowrap}
ul.headlines span.author {
	font-weight:bold;
	white-space:nowrap}

/* legal ----------------------------------------- //// */
.legal {
	font-weight:bold;
	text-transform:uppercase}

ol.legal {
	list-style:decimal}
ol.legal ol {
	list-style:upper-alpha}
ol.legal ol ol {
	list-style:lower-roman}
ol.legal ol ol ol {
	list-style:lower-alpha}

/* documents lists ----------------------------------------- //// */

.documents p {
	margin:0 0 .25em}
.documents p strong {
	font-size:1.2857em; /* 18px */
	line-height:1.3333 /* 24px */}

.documents a {
	padding:.2em .25em .2em 30px;
	background-image:url(/static/images/icon_document.gif);
	background-repeat:no-repeat;
	background-position:3px 50%}
.documents a[href$=".pdf"],
.documents a.pdf {
	background-image:url(/static/images/icon_pdf.gif)}
.documents a span {
	color:#53534a}

/* expandable ----------------------------------------- //// */
h3.expandable {
	margin:0}
h3.expandable a,
.js h3.expandable a.expanded {
	display:block;
	padding:.5em 28px;
	background-image:url(/static/images/expandable.png);
	background-repeat:no-repeat;
	background-position:-583px 50%;
	font-weight:bold;
	font-size:1.286em; /* 18px */}

.js h3.expandable a {
	background-position:9px 50%}
.js h3.expandable a:hover,
.js h3.expandable a:focus {
	background-position:-287px 50%}
.js h3.expandable a.expanded:hover,
.js h3.expandable a.expanded:focus {
	background-position:-879px 50%}

h3.expandable a span {
	display:block;
	width:0;
	height:0;
	overflow:hidden}

/* default expandable link ----------------------------------------- */
a.expandable {
	padding:0 0 0 20px;
	background-image:url(/static/images/expandable.png);
	background-repeat:no-repeat;
	background-position:-1182px 50%}
a.expandable:hover,
a.expandable:focus {
	background-position:-1450px 50%}

a.expandable.expanded {
	background-position:-1718px 50%}
a.expandable.expanded:hover,
a.expandable.expanded:focus {
	background-position:-1986px 50%}

/* expandable details ----------------------------------------- */
.js .expandable_details {
	display:none}

.expandable_details:focus {
    outline: none;
}

/* expandable list ----------------------------------------- */
ol.expandable {
	margin:0 0 3em;
	padding:.75em 0;
	overflow:hidden}
.js ol.expandable {
	display:none}

ol.expandable li {
	list-style:none}
ol.expandable a {
	padding:0 28px;
	font-size:1em;
	line-height:1.2}

ol.expandable ol {
	margin-bottom:.5em}

/* tree list ----------------------------------------- //// */

/* level 1 ----------------------------------------- */
ol.tree li {
	margin:0 0 0 25px;
	padding:1px 0}
ol.tree li a {
	display:block;
	margin:0 22px 0 0;
	padding:2px 0 3px 20px;
	font-weight:bold}
ol.tree li a.parent {
	color: #2B8815;
	background:url(/static/images/expandable.png) no-repeat -1182px 50%}
ol.tree li a.parent:hover,
ol.tree li a.parent:focus {
	color: #fff;
	background-color:#2B8815;
	background-position:-1450px 50%}
ol.tree li a.parent.expanded {
	background-position:-1718px 50%}
ol.tree li a.parent.expanded:hover,
ol.tree li a.parent.expanded:focus {
	background-position:-1986px 50%}

/* level 2 ----------------------------------------- */
ol.tree li li {
	margin-left:18px}
ol.tree li li a {
	padding-left:17px;
	font-weight:normal}

/* level 3 ----------------------------------------- */
ol.tree li li li a {
	padding-left:12px}

/* section navigation ----------------------------------------- //// */
.section_navigation {
	margin:2.75em 0 2em;
	padding:1em 12px;
	background:#1e1e1e}
.ie6 .section_navigation {
	zoom:1}

.section_navigation h3 {
	margin:0 0 .5em;
	color:#fff;
	font-weight:bold;
	font-size:1.571em; /* 22px */
	line-height:1; /* 22px */
	text-transform:uppercase}
.section_navigation ul {
	margin:0;
	line-height:1.2857 /* 18px */}
.section_navigation li {
	margin:0 0 .7143em; /* 0 0 10px */}
.section_navigation li a,
.section_navigation li a:visited {
	color:#fff;
	font-weight:bold}
.section_navigation .selected a,
.section_navigation .selected a:visited {
	color:#ccc}
.section_navigation .selected a:hover,
.section_navigation .selected a:focus {
	color:#fff}

/* Thumbs Lists ----------------------------------------------- //// */
.thumbs {
	position:relative;
	line-height:1.1429; /* 16px */}
.thumbs li {
	margin-bottom:.714286em; /* 10px */
	padding-top:1.428571em; /* 20px */}

.thumbs li > a,
.thumbs .item {
	display:block}
.thumbs a {
	cursor:pointer}
.thumbs dl {
	position:relative;
	margin:0}
.thumbs dd {
	margin:0;
	padding:.25em 0 0}

/* ---- caption ---- */
.thumbs dd.caption {
	position:absolute;
	top:-1.428571em; /* -20px */
	right:0;
	left:0;
	padding:.285714em 0; /* 4px 0 */
	width:100%;
	max-width:144px;
	background:#1e1e1e;
	color:#71b43a;
	font-size:.8571em; /* 12px */
	line-height:1; /* 12px */
	text-align:center}

/* ---- anchor states ---- */
.thumbs li > a:hover,
.thumbs li > a:focus,
.thumbs li > a:active {
	background-color:transparent}
.thumbs a:hover span,
.thumbs a:focus span,
.thumbs a:active span {
	background-color:#2B8815}

/* thumbs_details ----------------------------------------------- */
.thumbs_details li {
	margin-bottom:3.428571em /* 48px */}

.thumbs_details dt {
	position:relative;
	min-height:120px}
.thumbs_details dt strong {
	position:absolute;
	bottom:3px;
	left:0;
	width:100%;
	background:#fff}

.thumbs_details dd {
	font-weight:normal}

/* ---- family ---- */
.thumbs_details dd.family {
	border-top:1px solid #1e1e1e}
.thumbs_details a:hover dd.family,
.thumbs_details a:focus dd.family,
.thumbs_details a:active dd.family {
	color:#fff}

/* ---- shared planet ---- */
.thumbs_details img.shared_planet {
	float:right;
	padding:0 5px 0 0}

/* thumbs_popover ----------------------------------------------- */
.thumbs_popover dt {
	position:relative;
}

.thumbs_popover dt img.moreDetails {
	display:none}

.thumbs_popover .type {
	margin-bottom:.2em;
	padding:.25em .4em;
    max-width:134px;
	background:#000;
	color:#fff;
	font-size:.857143em; /* 12px */
	line-height:1; /* 12px */
	text-transform:uppercase}

.thumbs_popover .blonde {
	background:#e6a513}
.thumbs_popover .medium {
	background:#b15b11}
.thumbs_popover .dark {
	background:#7a003c}

.thumbs_popover .multipleBrewMethods {
	color:#999;
	font-weight:normal;
	font-size:.928571em /* 13px */}

.thumbs_popover a:hover .type,
.thumbs_popover a:focus .type,
.thumbs_popover a:hover span,
.thumbs_popover a:focus span {
	background:#2B8815}

/* thumbs_popover details pop-over ----------------------------------------------- */
.thumbs_popover .coffeeDetails {
	display:none;
	position:absolute;
	z-index:10000;
	padding:12px 8px;
	width:305px;
	border:1px solid #dedede;
	background:#fff;
	-moz-box-shadow:   0 3px 6px rgba(0,0,0,.2);
	-webkit-box-shadow:0 3px 6px rgba(0,0,0,.2);
	box-shadow:        0 3px 6px rgba(0,0,0,.2)}

.thumbs_popover .coffeeDetails .close {
	position:absolute;
	top:.2em;
	right:.2em;
	padding:.25em .5em;
	color:#000}
.thumbs_popover .coffeeDetails .close:hover,
.thumbs_popover .coffeeDetails .close:focus,
.thumbs_popover .coffeeDetails .close:active {
	color:#fff}

.thumbs_popover .coffeeDetails .stamp {
	float: left}

.thumbs_popover .coffeeDetails .details {
	float: left;
	width: 170px;
	margin-left: 10px}

.thumbs_popover .coffeeDetails .details h3.productname {
	margin: 15px 0 7px;
	font-size: 1em;
	line-height: 1.1}

.thumbs_popover .coffeeDetails .details .roast {
	margin:8px 0;
	padding:2px 0 2px 5px;
	color:#fff}

.thumbs_popover .coffeeDetails .details dl {
	margin:8px 0;
	height:auto;
	line-height:1}
.thumbs_popover .coffeeDetails .details dt {
	margin:2px 0}
.thumbs_popover .coffeeDetails .details dd {
	padding:0 0 4px}


.thumbs_select > li{
	float: left;
	margin-right: 1em;
	margin-bottom: 1em;
}

.thumbs_select:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.thumbs_select input[type=radio],
.thumbs_select input[type=checkbox] {
	display: none;
}

.ie8 .thumbs_select input[type=radio],
.ie8 .thumbs_select input[type=checkbox] {
	display: inline;
	line-height: 4em;
	vertical-align: 50%
}

.thumbs_select input[type=radio] + label,
.thumbs_select input[type=checkbox] + label {
	display: inline-block;
	padding: 1em;
    padding-top: 1.75em;
}

.thumbs_select input[type=radio]:checked + label,
.thumbs_select input[type=radio]:checked + image,
.thumbs_select input[type=checkbox]:checked + label,
.thumbs_select input[type=checkbox]:checked + image {
	-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
	-moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
	box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
	background-color: green;
	color: white;
}

.thumbs_select input[type=radio] + label > img,
.thumbs_select input[type=checkbox] + label > img {
	display: block;
	margin: auto;
}

.thumbs_select label > .top_thumb_label{
    text-align: center;
    margin-top: -1.75em;
}

/* MEDIA QUERY: 769px
---------------------------------------------------------------------------------------- //// */
@media (min-width:769px) {
	/* Thumbs Lists ----------------------------------------------- //// */

	/* thumbs_popover ----------------------------------------------- */
	.thumbs_popover dt img.moreDetails {
		display:block;
		position:absolute;
		right:4px;
		bottom:4px;
		padding:4px;
		background:#000;
		background:rgba(0,0,0,.7)}
	.thumbs_popover dt img.moreDetails:hover {
		background:#000}
}
@media (min-width: 992px) {
    .thumbs_popover dt {
        text-align: center;
    }
    .thumbs_popover dt img {
        width: 100%;
    }
    .thumbs_popover dt img.moreDetails {
        width: auto;
    }
    .thumbs_popover .type {
        max-width: none;
    }
}