/** Masthead/Header
 *
 * Masthead used for the CSS but we are
 * calling it "header" where the user sees
 * most people won't know the term "masthead"
 *
 * Default colors here will be over ridden by
 * the ones choosen in the color settings
 *
 * These styles are loaded for the front-end and admin-settings screen
 *
 -------------------------------------------------- */

/** Featured Posts
 -------------------------------------------------- */
.featured {
	background-color: #666;
	border-bottom: 10px solid #666;
	float: left;
	height: 170px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	width: 310px;
}
#featured-post-1 {
	margin-left: 0;
}
.featured.has-featured-img,
.featured.featured-format-gallery {
	border: 0;
	height: 180px;
}
.featured .gallery-img-excerpt li {
	height: 90px;
}

.featured-title {
	background-color: #666;
	color: #fff;
	display: inline-block;
	font-family: 'Titillium600', Helvetica, Arial, Verdana, sans-serif;
	font-size: 18px;
	line-height: 20px;
	margin: 0 10px 9px 0;
	padding: 5px 15px 8px;
}
.featured-content {
	bottom: 0;
	color: #fff;
	left: 0;
	padding: 15px 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 10;
}
.featured-description,
.featured-description p {
	font-size: 14px;
	line-height: 20px;
}
.featured-description {
	padding: 0 15px;
}
.featured-description p {
	margin-top: 0;
}

/* featured-link, same size as featured box and overlays everything in it */
.featured-link {
	bottom: 0;
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	text-indent: -999em;
	top: 0;
	z-index: 20;
}
/* featured image */
.featured-img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

/** Post Formats
 -------------------------------------------------- */
/* status and quote */
.featured-format-status .featured-description,
.featured-format-status .featured-description p,
.featured-format-quote .featured-description,
.featured-format-quote .featured-description p {
	font-family: Titillium400, Helvetica, Arial, Verdana, sans-serif;
	font-size: 18px;
	line-height: 25px;
}
/* quote */
.featured-format-quote .featured-content .featured-description {
	background-image: url(../img/quote-white.png);
	background-position: 10px 0px;
	background-repeat: no-repeat;
	padding-left: 36px;
}
/* gallery */
.featured .gallery-img-excerpt {
	list-style-type: none;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: relative;
	z-index: 1;
	/**
	 * Give it a bit more than 100%.
	 * Otherwise we get a sliver of black on the right side from browser round-downs.
	 */
	width: 100.5%;
	zoom: 1;
}
.featured .gallery-img-excerpt li {
	float: left;
	margin: 0;
	overflow: hidden;
	padding: 0;
	width: 50%;
}
.featured .gallery-img-excerpt li img {
	display: block;
	height: auto;
	width: 100%;
}
/* video */
.featured-format-video .featured-link {
	background-image: url(../img/play-icon.png);
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
.featured-format-video .featured-link:hover {
	background-image: none;
}
.featured-format-video .featured-description {
	display: none;
}
.featured-format-video:hover .featured-description {
	display: block;
}

/** Hover / rollover
 -------------------------------------------------- */
.has-featured-img .featured-description,
.featured-format-gallery .featured-description {
	display: none;
}
.has-featured-img:hover .featured-description,
.featured-format-gallery:hover .featured-description {
	display: block;
}
/* rollover */
.featured:hover .featured-content {
	background-color: rgb(153,153,153); /* fallback for IE */
	background-color: rgba(153,153,153,.9);
	color: #333;
}