/*==================== Hero Styles ====================*/
.hero_wrapper{
	float:right;
	padding: 0; margin: 0;
	height: auto;
	position: relative;
	line-height: 0;
}
.hero_wrapper span, .hero_wrapper .dynamic_btn{line-height: 1em;}

.heroAjaxIncluded { zoom:1; }

.hero_wrapper.rotator{ 
	height: 420px; 
	margin-top: 31px;
}

/* Used only for rotating hero */
.hero_slide{
	padding: 0; margin: 0;
	width: 766px; height: 310px;
	/*position:absolute;*/
	display: none;
}

.hero_wrapper.rotator ul.linkList {
	margin: 15px 0 0 20px;
}

.hero_slide.active{ display:block;}

/* thd Slider initial Styles */
.ie.lte10 .container_30 .mainContent .slider .row{
	width: auto;
}
.ie.lte10.container_30 .mainContent .slider.vert .row {
	width: 100%;
}
/*==================== Hero Info Styles ====================*/
.hero_info {
	position: absolute;
	width: auto; height: auto; /* QC 14950 */
	top : 30px; left: 30px;
	color: white;
	text-shadow: 1px 2px 4px #333;
	line-height: 2.1em;
}
.hero_info h2 {
	letter-spacing: -1pt;
	line-height: 0.9;
}

.hero_subtitle h3 { margin-bottom: 10px; } /* QC 14950 */
.hero_info h4 { line-height:1; margin-bottom: 10px; } /* QC 14950 */

.hero_list_wrapper{
	position: absolute;
	top : 250px; margin-left : 30px;
	width: auto; height: auto;
	left:0;
}

.hero_list_wrapper .hero_list{
	float: left; 
	width: 160px; 
	margin-right: 15px;
}

.hero_list li, .hero_list li a{
	color: #fff;
	line-height: 1em;
}

.ctaSpacer{
	display: block;
	margin-bottom: 0px; /* QC 14950 */
}
/*=================Dogear styles=================*/
.dogear_wrapper {
	position: absolute;
	top : 30px;
	width: 180px; height: auto;
	top : 15px; right: -10px;
}

.dogear_wrapper.inset{
	right:0;
}

.dogear{
	float: left;
	position: relative;
	margin : 0 0 15px;
	width: 180px; height: auto;
	-moz-box-shadow: -1px 1px 4px #333; -webkit-box-shadow: -1px 1px 4px #333; box-shadow: -1px 1px 4px #333;
}

.dogear a { float: none; cursor : pointer;}

.dogear img {
	border: none;
	float: left;
	margin: 0; padding: 0;
}

.dogear_corner {
	width: 10px; height: 12px;
	line-height: 0;
	position: absolute;
	background:url("/static/images/corner_right.gif") no-repeat;
	top: 100%; right: 0;
}

.dogear_wrapper.inset .dogear_corner{display:none}
/*==================== Hero Button Styles ====================*/
.hero_wrapper .dynamic_btn{margin-top:10px;}  /* QC 14950 */

/*==================== Hero Thumbs Styles ====================*/
.heroSlideThumbs {
	width: 960px;
}

.heroSlideThumbs ul {
	margin: -11px 15px;
}

.heroSlideThumbs li {	
	float:left;
	padding: 16px 15px 14px 15px;
	color: #000;
	position: relative;
	cursor: pointer;
}
.heroSlideThumbs li:hover {
	background: #f96302;
}

.heroSlideThumbs li img {
	width:156px; height:100px;
}

.heroSlideThumbs li.active {
	background: #ccc;
}

.heroSlideThumbs li.active .heroThumbArrow {
	width: 51px;
	height: 30px;
	background: url('/static/images/heroThumbArrow.png');
	position: absolute;
	top: -26px;
	left: 67px;
}
/*==================== Social Media Cartridge ====================*/
/* SOCIAL MEDIA NEEDED STYLES START HERE */
		#social_media_content {
			margin: 0 auto;
			width: 928px;
		}
		.push5 { padding-left: 5px; }
		
		#facebookPod, #forumPod, #blogPod, #facebookPodWide, #forumPodWide, #blogPodWide { overflow: hidden; float: left; line-height: 18px; min-height: 500px;}
		/*#forumPosts, #blogPosts { height: 358px; background: #efefef; overflow: hidden; overflow-y: auto; clear: both; }*/
		
		#forumPosts, #blogPosts { height: 358px; background: #efefef; overflow: hidden; overflow-y: scroll; clear: both; }
		
		.socialBtn { float: right; }
		img.socialBtnImg { padding-top: 15px; border: none; }
		.socialTitle { margin: 0; padding: 0; display: block; }
		.socialHeader { background: #dedede; height: 27px; font-size: 10px; }
		.socialLeftCol { margin: 0; padding: 10px 10px 0 14px; float: left; }
		.socialRightCol { margin: 0; padding: 10px 0 0 0; float: left; }
		.socialListItem { padding-bottom: 7px; font-size: 12px; color: #858585; line-height: 13px; }
		.socialBorderBottom { border-bottom: solid 1px #DDD; }
		.socialDivider {
			height: 500px;
			padding-left: 15px;
			margin-right: 15px;
			float: left;
			border-right: 2px solid #EEE;
		}
		
		/* FACEBOOK STYLES */
		#facebookPod { width: 256px; float: left; }
		#facebookPod iframe, #facebookPodWide iframe { background: #efefef; }
		
		#facebookPodWide { width: 448px; float: left; }
		
		/* FORUM STYLES */
		#forumPod { width: 352px; }
		#forumPosts .loader { margin: 135px 0 0 165px; }
		#forumPod .socialLeftCol { width: 205px; }
		#forumPod .socialRightCol { width: 123px; }
		#forumPod #forumPosts .socialListItem { width: 352px; }
		
		#forumPodWide { width: 448px; }
		#forumPodWide #forumPosts .loader { margin: 135px 0 0 205px; }
		#forumPodWide .socialLeftCol { width: 268px; }
		#forumPodWide .socialRightCol { width: 156px; }
		#forumPodWide #forumPosts .socialListItem { width: 448px; }
		
		/* BLOG STYLES */
		#blogPod { width: 256px; }
		#blogPosts .loader { margin: 135px 0 0 115px; }
		#blogPod .socialLeftCol { width: 129px; }
		#blogPod .socialRightCol { width: 102px; }
		#blogPod #blogPosts .socialListItem { width: 257px; }
		
		#blogPodWide { width: 448px; }
		#blogPodWide #blogPosts .loader { margin: 135px 0 0 210px; }
		#blogPodWide .socialLeftCol { width: 292px; }
		#blogPodWide .socialRightCol { width: 132px; }
		#blogPodWide #blogPosts .socialListItem { width: 448px; }



/*================Leap Frog Grid CSS*=====================*/

.IFrame_grid {
  display:inline;
  float: left;
  position: relative;
  border-width: 0 1px;
}
 
.container_30 .IFrame_grid { width:255px; }
 
.IFrame_1col_grid {
  display:inline;
  float: left;
  position: relative;
  border-width: 0 1px;
}
 
.container_30 .IFrame_1col_grid { width:500px; }

/*================End Leapfrog CSS=========================*/



/*================ HotSpots CSS*=================*/

.hotspots{
   position : absolute;
   top : 0; left : 0;
}
 
.hotspots a{
   width : 30px;
   height : 30px;    
   position: absolute;
   background-image: url("/static/images/btns/hotspots_sprite.png");
   background-position: -6px -16px;
}
.hotspots a:hover{background-position: -61px -16px}
 
.hotspots a.hotVideo{
   background-image: url("/static/images/btns/hotspots_sprite.png");
   background-position: -6px 48px;
}
.hotspots a.hotVideo:hover{background-position: -61px 48px;}

/* Holiday1 Hot Spots */
body[class*=transparent1] .hotspots a, body[class*=transparent1] .hotspots a.hotVideo{
	background-image: url("/static/images/btns/hotspots_holiday1_sprite.png");
}
/* Holiday2 Hot Spots */
body[class*=transparent2] .hotspots a, body[class*=transparent2] .hotspots a.hotVideo{
	background-image: url("/static/images/btns/hotspots_holiday2_sprite.png");
}
/* Holiday3 Hot Spots */
body[class*=transparent3] .hotspots a, body[class*=transparent3] .hotspots a.hotVideo{
	background-image: url("/static/images/btns/hotspots_holiday3_sprite.png");
}


/*================ End HotSpots CSS*=================*/


/*================ DCTM Jump Menu CSS *=================*/
div.jumpMenu{z-index: 10;}
div.jumpNav{
    color: #777777;
    font-size: 12px;
    line-height: 18px;    
    position: relative;
    z-index: 10;
    float: left;
}
div.jumpNav .jnSelect{
	cursor: pointer;
	background: #eee;
	background: -moz-linear-gradient(top,  #ffffff 0%, #eeeeee 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eeeeee));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#eeeeee 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#eeeeee 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#eeeeee 100%);
	background: linear-gradient(top,  #ffffff 0%,#eeeeee 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
	border-radius: 2px 2px 2px 2px;
	border: 1px solid #CCCCCC;    
	padding: 4px 10px 4px 10px;
	width: auto;
	float: left;
}
div.jumpNav ul.linkList{
    border-radius: 2px 2px 2px 2px;
    border: 1px solid #CCCCCC;
    background: #eee;
	background: -moz-linear-gradient(top,  #ffffff 0%, #eeeeee 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eeeeee));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#eeeeee 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#eeeeee 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#eeeeee 100%);
	background: linear-gradient(top,  #ffffff 0%,#eeeeee 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
	display: none;
	z-index: 90000;
	top: 28px;
	left: 0;
	position: absolute;
	width: auto;
}
div.jumpNav:hover ul.linkList{display: block;}
div.jumpNav ul.linkList li { border-bottom: 1px solid #CCCCCC; padding: 0 10px 3px; margin: 5px 0 0;}
.hero_info div.jumpNav {
    text-shadow: none;
}
/*================ End DCTM Jump Menu CSS *=================*/

/*================ Start DCTM vertical-navigation CSS *=================*/
.vertical-navigation {
  background: #fff;
}
.vertical-navigation .title {
  margin: 0 0 0 -15px;
  background: #f96302;
  color: #fff;
  font-weight: bold;
  padding: 10px 15px 10px 0;
  position: relative;
  float: left;
  width: 100%;
}
.vertical-navigation .title a {
  color: #fff;
  display: block;
}
.vertical-navigation .title span {
  padding: 0 0 0 15px;
}
.vertical-navigation .title img {
  border: none;
  height: 28px;
  width: 28px;
  vertical-align: middle;
  margin: 0 0 0 15px;
}
.vertical-navigation .title img + span {
  padding: 0 0 0 5px;
}
.vertical-navigation .title .dogear-corner {
	width: 10px; height: 12px;
	line-height: 0;
	position: absolute;
	background:url("/static/images/corner_left.png") no-repeat;
	top: 100%; left: 0;
}
.vertical-navigation .title + ul {
  margin: 5px 0 0 0;
}
.vertical-navigation > ul {
  padding: 0 0 10px;
  margin: 0 0 10px;
  float: left;
  width: 100%;
}
.vertical-navigation > ul > li {
  display: block;
  position: relative;
  font-weight: bold;
}

.vertical-navigation > ul > li a {
  display: block;
  padding: 8px 0;
  position: relative;
  overflow: hidden;
}

.vertical-navigation > ul > li a.active {
  background: #666;
  color: #fff;
  text-decoration: none;
  overflow: visible;
}
.vertical-navigation > ul > li a:hover {
  background: #666;
  color: #fff;
  text-decoration: none;
  overflow: visible;
}
.vertical-navigation > ul > li a::after {
  content: '';
  position: absolute;
  right: -16px;
  top: 0;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 16px solid #666;
  z-index: 3;
}
.vertical-navigation > ul > li a span {
  padding: 0 0 0 20px;
}
.vertical-navigation > ul > li > .content {
  background: #fff;
  padding: 0 10px;
}
.vertical-navigation > ul > li > .content a {
  display: block;
  font-weight: normal;
}
.vertical-navigation > ul > li > .content a:hover {
  color: #000;
  font-weight: bold;
}
.vertical-navigation > ul > li > .content ul li {
  padding: 0 0 0 10px;
}
.vertical-navigation > ul > li > .content ul li a:hover {
  background: none;
  font-weight: bold;
  overflow: hidden;
}
/*================ End DCTM vertical-navigation CSS *=================*/


/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	/************* Vertical Nav - Start ********************/
	.related-resource-accordian .title{background-color:#F96302;color: #ffffff;margin: 0px;padding: 15px 18px 8px 8px;margin-left: -5px;margin-bottom: 5px;}
	.related-resource-accordian .title span{padding:0 0px 0 20px;vertical-align:top;}
	.related-resource-accordian .title img{vertical-align:top;}
	.related-resource-accordian ul{display:none;}
	.vertical-navigation > ul > li a{border-bottom: 1px solid #ccc;}
	.vertical-navigation > ul > li > .content li a{padding-left: 25px;border-bottom:none;background-image: url("/static/images/mobile/images/Mobile_Sprite.png");background-repeat: no-repeat;background-position: right -295px;}
	.vertical-navigation > ul > li > .content li a:hover{background-image: url("/static/images/mobile/images/Mobile_Sprite.png");background-repeat: no-repeat;background-position: right -295px;}
	.vertical-navigation > ul{padding: 0px;}
	.vertical-navigation > ul > li a:after{border-left: 0px;}
	.vertical-navigation > ul > li > .content{padding: 0px;}
	.vertical-navigation > ul > li > .content ul li {padding: 0px !important;border-bottom: 1px solid #ccc;}
	.vertical-navigation > ul > li a span{padding: 0 0 0 10px}
	.vertical-navigation > ul > li > .content ul li a:hover {font-weight:normal !important;font-size: 12px !important;}
	.vertical-navigation > ul > li > .content ul li a{font-size: 12px;}
	.vertical-navigation .title + ul { display: none; margin: 0px 0 0 0;}
	.vertical-navigation .title a{background-image: url("/static/images/mobile/images/menu-icon.png");background-repeat: no-repeat; background-position: right;}
	.vertical-navigation .title img {margin: 0 0 0 20px;}
	.vertical-navigation > ul > li a {padding: 10px 0px 9px 0px;}
	.vertical-navigation li a span.accordian-notification{display:none;}
	.white > li:first-child {border-top: none;}
}


/*================ Content Article header CSS *=================*/

#content_article{
padding : 0 20px;
font-size: 14px;
margin: 0 10px 10px 0;
background: url("http://www.homedepot.com/hdus/en_US/DTCCOM/common/Themes/transparentHT/wood/podBG.png") repeat fixed left top transparent;
}

#content_article ul, #content_article ol {
    list-style: disc outside none;
    margin: 10px 0 10px 15px;
}
#content_article .dogear_wrapper{
	right: 0px;
}
#content_article  .dogear{
	float: right;
	width: auto;
}
#content_article .dogear_wrapper ul, #content_article .dogear_wrapper ol{
	list-style: none;
	margin: 0;
}
#content_article .dogear_wrapper li {
	margin-bottom: 2px;
}

.article_info{
	padding: 15px 0;
	float: left;
	width: 100%;
}

.article_title{
	color: #000000;
	font-size: 21px;
}

#article_ratings{
	color: #ffffff;
	text-align:right;
	font-size: 12px;
}

#article_ratings a{
	color: #fff;
}

.publish_date{
	color: #777;
	font-size: 11px;
}

.publish_date span{
	color:#F96302;
}

.ratings_info {
	background-color: #827564;
	padding: 10px 25px 10px 10px;
}

.article_titleinfo{
	padding-bottom: 10px;
}

#content_article .socialmedia_icons a {
	float: left;
}

.ratings_value {
	font-size:14px;
	font-weight:bold;
}

.reviews {
	margin:0px;
}

.reviews .stars {
	margin-bottom: 0px;
}

.ratings_head, div#content_article .dogear a, .ratings_data > span{
	float:left;
}

ul.ratings_info, ul.ratings_info > li {
	float: right;
}

#content_article .save_myproject {
	margin-bottom: 10px;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	#content_article {
		padding : 0 10px;
		margin: 0 0 10px 0;
	}

	#content_article .dogear_corner {
		display: none;
	}
}

.content_image{
	line-height: 0;
}
.content_image span, .content_image .dynamic_btn{line-height: 1em;}


/*================ End Content Article header CSS *=================*/

/*================ Start Youtube embed CSS *=================*/

.embed-video-wrapper{position: relative; padding-bottom: 56.25%; padding-top: 30px; height : 0; overflow: hidden;}
.embed-video-wrapper iframe, .embed-video-wrapper .object, .embed-video-wrapper embed{ position: absolute; top:0; left : 0; width : 100%; height: 100%;}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	.embed-video-wrapper iframe, .embed-video-wrapper .object, .embed-video-wrapper embed{ width : 320px;}
}	

/*================ End Youtube embed CSS *===================*/
/*======== Negative Margins Initial Styles =================*/
.negMargin {display: none;}

/* added for ION-125 ZipCode */
#searchShedProductsForm { float: left; padding-left: 15px; }
#searchShedProductsForm p { margin-bottom: 5px; }
#searchShedProductsForm .negpadright { margin-right: 50px; float: right; }
#searchShedProductsForm #zip { width: 43px !important; }

.vertical-navigation .accordion-notification{top: 8px}
.vertical-navigation .active .accordion-notification{top: 8px}