/* ########################################### */
/* ----------- ARTICLE STYLESHEET ------------ */
/* ########################################### */

/* ======== support content promos ============*/
/* All the classes are duplicated because we're using them to style the tinymce */
/* The ones using the ID's are the ones used in the front end and the others in the CMS */

@media all {

 .articlePromoImage,
 .articlePromoImageTitleText,
 .articlePromoTitleText,
 .articlePromoImageTitle,
 #mainContent #supportContent .articlePromoImage,
 #mainContent #supportContent .articlePromoImageTitleText,
 #mainContent #supportContent .articlePromoTitleText,
 #mainContent #supportContent .articlePromoImageTitle {
	width:187px; 
	background:none;
	margin:0 0 9px 0;
	padding-top:0;
}
 .articlePromoBottom,
 #mainContent #supportContent .articlePromoBottom {
	clear:both;
	float:left;
	width:187px;
	background: url(/_hbi_ui/_BR/_images/bkg/bkgRelatedArticleBottom.png) no-repeat left bottom;
	padding-bottom:15px;
	line-height:0;
	font-size:0;
}
 .articlePromoTitleText h3,
 .articlePromoImageTitleText h3,
 .articlePromoImageTitle h3,
 #mainContent #supportContent .articlePromoTitleText h3,
 #mainContent #supportContent .articlePromoImageTitleText h3,
 #mainContent #supportContent .articlePromoImageTitle h3 {
		font-size:1.2em;
		display:block;
		color:#395998;
		width:181px;
		margin:0 0 5px 0;
		padding:0 3px;
		background:none;
		text-transform:none;
	}
	 .articlePromoImageTitleText h3 a,
	 .articlePromoTitleText h3 a,
	 .articlePromoImageTitle h3 a,
	 #mainContent #supportContent .articlePromoImageTitleText h3 a,
	 #mainContent #supportContent .articlePromoTitleText h3 a,
	 #mainContent #supportContent .articlePromoImageTitle h3 a {
		color:#395998;
		text-decoration:none;
		font-weight:700;
		padding-left:0;
	}
	 .articlePromoImageTitleText h3 a:hover,
	 .articlePromoTitleText h3 a:hover,
	 .articlePromoImageTitle h3 a:hover,
	 #mainContent #supportContent .articlePromoImageTitleText h3 a:hover,
	 #mainContent #supportContent .articlePromoTitleText h3 a:hover,
	 #mainContent #supportContent .articlePromoImageTitle h3 a:hover {
		text-decoration:underline;
	}
 .articlePromoImageTitleText a img,
 .articlePromoImageTitle a img,
 #mainContent #supportContent .articlePromoImageTitleText a img,
 #mainContent #supportContent .articlePromoImageTitle a img {
	float:left;
	margin:0;
	width:185px;
	display:block;
	border:none;
	position:relative;
}	

.articlePromoTitleText {
	overflow: hidden;
}
 .articlePromoTitleText p,
 #mainContent #supportContent .articlePromoTitleText p {
	margin:0;
	padding:0 3px;
	color:#000;
}
 .articlePromoImageTitleText p,
 .articlePromoTitleText p,
 #mainContent #supportContent .articlePromoImageTitleText p,
 #mainContent #supportContent .articlePromoTitleText p {
	margin:0;
	padding:0 3px;
}
 .articlePromoImageTitleText,
 .articlePromoImageTitle,
 #mainContent #supportContent .articlePromoImageTitleText,
 #mainContent #supportContent .articlePromoImageTitle {
	position:relative;
	overflow:hidden;
}

 .articlePromoImageTitleText p,
 #mainContent #supportContent .articlePromoImageTitleText p{
	color:#fff;
	background:#000;
	padding:10px;
	width:165px;
	display:block;
	margin:0;
}

 .articlePromoImageTitleText a,
 .articlePromoImageTitleText a img,
 #mainContent #supportContent .articlePromoImageTitleText a,
 #mainContent #supportContent .articlePromoImageTitleText a img{
	display:block;
}

 .articlePromoImageTitleText p a,
 .articlePromoImageTitleText p a:hover,
 #mainContent #supportContent .articlePromoImageTitleText p a,
 #mainContent #supportContent .articlePromoImageTitleText p a:hover{
	display:block;
	text-decoration:none;
	color:#fff;
	font-weight:400;
}

}/* closes @media */