KMBS hotspot recreation

by fezec

HTML

<div class="hot-spot-fold-out">
<div class="hot-spot-pill-button">
    <span class="left-end-cap pill"><img src="http://konicaminoltait.vertic-qa.com/img/images/hotspot-foldout-icon.png"></span>
    <span class="right-end-cap pill">Learn More</span>
</div>
<span class="hot-spot-teaser-text">place your information here place your information here</span>
</div>

SCSS

/*http://konicaminoltait.vertic-qa.com/img/images/hotspot-icon_2.png
http://konicaminoltait.vertic-qa.com/img/images/hotspot-foldout-icon.png
http://konicaminoltait.vertic-qa.com/img/images/hotspot-circle.png
http://konicaminoltait.vertic-qa.com/img/images/hotspot-foldout-gradient.png
http://konicaminoltait.vertic-qa.com/img/images/hotspot-foldout-c2a-gradient.png
*/
.hot-spot-fold-out{
   

    width:400px;
    overflow:hidden;

}

.hot-spot-teaser-text{
  display:block;
   background:url(http://konicaminoltait.vertic-qa.com/img/images/hotspot-foldout-gradient.png) repeat-x left top;
    overflow:hidden;
    padding:0 35px;

}

.hot-spot-pill-button{
  float:right;
   margin-left:-25px;
}

.pill{
 background-image:url(http://konicaminoltait.vertic-qa.com/img/images/hotspot-foldout-c2a-gradient.png);   
 display:block;
 height:44px;
 float:left;
 background-position:left -10px;
 line-height:44px;

}



img{
    vertical-align:middle;
    position:relative;
    top:-2px;
    margin-right:10px;
}

.left-end-cap{
 background-position:left -73px;
 padding-left:20px;
 width:auto;
}

.right-end-cap{
    padding-right:30px;
    background-position:right -10px;
}


body{
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}