#promoBannerContainer{
	margin-bottom:5px;
}

#hpAccordion {
    height: 817px;
    overflow: hidden;
    position: relative;
    font-family: Lato, Arial, sans-serif;
    font-size: 14px;
	line-height: 18px;
	color:#373B3C;
}

#hpAccordion div.pane {
    background-repeat: no-repeat;
    width: 25%;
}
#hpAccordion #hpAccPane1 {
    background-image: url(/smg/templateFramework/images/microSites/RUP/HomePage/accordion/bg1.jpg);
    height: 100%;
    position: absolute;
}

#hpAccordion #hpAccPane2, #hpAccordion #hpAccPane3, #hpAccordion #hpAccPane4 {
    border-left: solid 1px #ffffff;
    height: 100%;
    position: absolute;
}
#hpAccordion #hpAccPane2 {
    background-image: url(/smg/templateFramework/images/microSites/RUP/HomePage/accordion/bg2.jpg);
    left: 25%;
}
#hpAccordion #hpAccPane3 {
    background-image: url(/smg/templateFramework/images/microSites/RUP/HomePage/accordion/bg3.jpg);
    left: 50%;
}
#hpAccordion #hpAccPane4 {
    background-image: url(/smg/templateFramework/images/microSites/RUP/HomePage/accordion/bg4.jpg);
    left: 75%;
}
#hpAccordion  img.accordionClose {
    cursor: pointer;
    display: none;
    position: absolute;
    right: 15px;
    top: 12px;
}

#hpAccordion div.default, #hpAccordion div.collapsed {
    cursor: pointer;
}

#hpAccordion div.expanded {
    cursor: default;
}

#hpAccordion div.expanded img.accordionClose {
    display: block;
}

#hpAccordion div.hotspot {
    background: url(/smg/templateFramework/images/microSites/RUP/HomePage/accordion/hotspots/hotspot-tile.png);
    cursor: pointer;
    display: none;
    height: 60px;
    position: absolute;
    width: 60px;
}

#hpAccordion div.hotspot.weeds {
    background-position: -60px 0;
}

#hpAccordion div.expanded div.hotspot {
    display: block;
}

#hpAccordion div.hotspotContainer {
    background: #ffffff;
    display: none;
    margin-right: 15px;
    max-width: 602px;
    /*padding: 25px 20px 5px 20px;*/
    /*padding: 32px 28px 28px 28px;*/
	padding: 18px 5px 5px 5px;
    position: absolute;
}

#hpAccordion div.hotspotContainer p {
    margin: 0 0 16px 0;
}

#hpAccordion div.hotspotContainer img {
    margin: 0;
}

#hpAccordion div.hotspotContainer h4 {
    font-size: 30px;
    /*margin: 0 0 25px 0;*/
    margin: 10px 0 10px 0;
	font-family:Open Sans Condensed, Arial, sans-serif;
    max-width: 560px;
	font-weight:bold;
	line-height:35px;
}

#hpAccordion .modalTopContainer {
	margin-left:15px;
	margin-right:15px;
}

/* the area in the modals that has a light gray bg */

#hpAccordion div.hotspotContent {
    background-color: #edf0f1;
    margin-top: 20px;
    padding: 10px 20px 10px 15px;
}

#hpAccordion div.hotspotContent h4 {
    font-size: 24px;
    margin: 0 0 5px 0;
	font-family:Open Sans Condensed, Arial, sans-serif;
	font-weight:bold;
}

#hpAccordion img.hotspotClose {
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 20px;
}

#hpAccordion div.triangle {
    border-color: transparent white transparent transparent;
    border-style: solid;
    border-width: 46px 46px 46px 46px;
    height: 0;
    margin: -16px 0 0 20px;
    position: absolute;
    width: 0;
}

#hpAccordion div.triangle.right {
    border-color: transparent transparent transparent white;
    margin-left: -50px;
}

#hpAccordion a.panelBtn {
    background: #5FB061;
    color: #ffffff;
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    padding: 10px 8px;
    text-decoration: none;
	font-family:Cabin, Arial, sans-serif;
	letter-spacing:.35px;
}
#hpAccordion a.panelBtn:hover {
	background:#959393;
}

#hpAccordion div.defaultTitles {
    color: #ffffff;
    display: none;
    font-family: Open Sans Condensed, Verdana, sans-serif;
    font-size: 49px;
	line-height:49px;
    font-weight: bold;
	letter-spacing:-1px;
    left: 36px;
    position: relative;
    text-shadow: 0 1px 6px #000;
    top: 55px;
}

#hpAccordion div.defaultTitles span {
    white-space: nowrap;
}

#hpAccordion div.default > div.defaultTitles, 
#hpAccordion div.default > div[data-linkcontainer] > div.defaultTitles,
#hpAccordion div.expanded > div.defaultTitles,
#hpAccordion div.expanded > div[data-linkcontainer] > div.defaultTitles {
    display: block;
}

#hpAccordion .hideUntilLoad{
	display:none !important;
}

#hpAccordion div.productDetails {
    display: inline-block;
    min-width: 100px;
    width: 54%;
}
#hpAccordion div.productDetailImg {
    float: right;
    margin-right: 20px;
}
#hpAccordion img.productFactImg {
    float: left;
}

#hpAccordion div.productFacts {
    display: inline-block;
    left: 30px;
    position: relative;
    width: 57%;
}

#hpAccordion div.videoContainer {
    padding: 10px 0;
    text-align: center;
}

#hpAccordion div.videoContainerNonCentered {
	text-align:left;
}

#hpAccordion div.topImageContainer {
    padding-bottom: 10px;
}

#hpAccordion div.topImageContainerSmallPad {
    padding-bottom: 0px;
}

#hpAccordion .IE_CTA{
	font-size:.35em;
	text-shadow:none;
	line-height:1.25em;
	letter-spacing:normal;
	margin-top:5px;
	display:none;
}
#hpAccordion .IE_CTA a{
	font-size:.8em;
	color:#FFFFFF;
	margin-top:10px;
	display:block;
}

/* hot spot trigger positions */
#hpAccordion #patio-1-trigger {left: 203px; top: 437px;}
#hpAccordion #patio-2-trigger {left: 188px; top: 658px;}
#hpAccordion #patio-3-trigger {left: 701px; top: 471px;}

#hpAccordion #rockbeds-1-trigger {left: 207px; top: 499px;}
#hpAccordion #rockbeds-2-trigger {left: 720px; top: 725px;}
#hpAccordion #rockbeds-3-trigger {left: 693px; top: 460px;}

#hpAccordion #mulch-1-trigger {left: 138px; top: 703px;}
#hpAccordion #mulch-2-trigger {left: 233px; top: 512px;}
#hpAccordion #mulch-3-trigger {left: 688px; top: 489px;}
#hpAccordion #mulch-4-trigger {left: 458px; top: 495px;}

#hpAccordion #fence-1-trigger {left: 61px; top: 685px;}
#hpAccordion #fence-2-trigger {left: 178px; top: 641px;}
#hpAccordion #fence-3-trigger {left: 692px; top: 552px;}

/* hot spot dialog positions */
#hpAccordion #patio-2 {left: 300px; top: 64px;}
#hpAccordion #patio-1 {left: 313px; top: 66px;}
#hpAccordion #patio-3 {left: 51px; top: 45px; max-width:590px;}

#hpAccordion #rockbeds-3 {left: 43px; top: 43px; max-width:590px;}
#hpAccordion #rockbeds-2 {left: 70px; top: 125px; max-width:590px;}
#hpAccordion #rockbeds-1 {left: 317px; top:53px;}

#hpAccordion #mulch-1 {left: 248px; top: 160px;}
#hpAccordion #mulch-2 {left: 342px; top: 22px;}
#hpAccordion #mulch-3 {left: 38px; top: 27px; max-width:590px;}
#hpAccordion #mulch-4 {left: 302px; top: 25px;}

#hpAccordion #fence-1 {left: 171px; top: 298px;}
#hpAccordion #fence-2 {left: 289px; top:43px;}
#hpAccordion #fence-3 {left: 45px; top: 64px; max-width:590px;}

/* hot spot empty modals (old) */
/*.patio-1-emptyModal { height:440px !important; width:458px !important;}
.patio-2-emptyModal { height:660px !important; width:468px !important;}
.patio-3-emptyModal { height:490px !important; width:595px !important;}

.rockbeds-1-emptyModal { height:520px !important; width:452px !important;}
.rockbeds-2-emptyModal { height:682px !important; width:595px !important;}
.rockbeds-3-emptyModal { height:475px !important; width:595px !important;}

.mulch-1-emptyModal { height:615px !important; width:520px !important;}
.mulch-2-emptyModal { height:550px !important; width:428px !important;}
.mulch-3-emptyModal { height:550px !important; width:595px !important;}
.mulch-4-emptyModal { height:550px !important; width:495px !important;}

.fence-1-emptyModal { height:450px !important; width:595px !important;}
.fence-2-emptyModal { height:685px !important; width:478px !important;}
.fence-3-emptyModal { height:550px !important; width:595px !important;}*/

/* hot spot empty modals */
#hpAccordion .emptyModal {
	height:190px !important; width:190px !important;
}

#hpAccordion .patio-1-emptyModal { top:361px !important;}
#hpAccordion .patio-2-emptyModal { top:582px !important;}
#hpAccordion .patio-3-emptyModal { top:395px !important; left:452px !important;}

#hpAccordion .rockbeds-1-emptyModal { top:423px !important;}
#hpAccordion .rockbeds-2-emptyModal { top:609px !important; left:470px !important;}
#hpAccordion .rockbeds-3-emptyModal { top:384px !important; left:444px !important;}

#hpAccordion .mulch-1-emptyModal { top:594px !important;}
#hpAccordion .mulch-2-emptyModal { top:436px !important; }
#hpAccordion .mulch-3-emptyModal { top:413px !important; left:438px !important;}
#hpAccordion .mulch-4-emptyModal { top:486px !important; }

#hpAccordion .fence-1-emptyModal { top:599px !important;}
#hpAccordion .fence-2-emptyModal { top:565px !important;}
#hpAccordion .fence-3-emptyModal { top:476px !important; left:442px !important;}

@media( max-width: 1140px ) {
    #hpAccordion div.default div.defaultTitles { font-size: 38px; width: 190px; line-height:38px;}
	#hpAccordion .IE_CTA {font-size:.4em;)
}