/* ------------------------- fonts -- should keep to 3 or fewer, due to file size considerations
<-- the footer text elements use float methods. An older solution style 'footerTxtR' and 'footerPriceR' are no longer
in use, but should be kept in case
<-- most styles are class but a few like container clicktag and brdr are elementID selectors

<---------- FONTS -- should keep to 3 or fewer, due to file size considerations ------------------------- */

@font-face{
  font-family: "pill300_regular";
  src:  url(../fonts/pillgothic300mg-regular-webfont.woff);
}
@font-face{
  font-family: "pill300_light";
  src:  url(../fonts/pillgothic300mg-light-webfont.woff);
}
@font-face{
    font-family: "pill300_light_obliq";
    src:  url(../fonts/pillgothic300mg-lightobliq-webfont.woff);
}
/* ------------------------- font styles set in-line in the IA var text settings  ------------------------- */
reg{
    font-family: pill300_regular;
}
lght{
    font-family: pill300_light;
}
lghtObl{
    font-family: pill300_light_obliq;
}
reduce{
    font-size: 86%;
}
article_nm {
    font-size: 78%;
    font-family: pill300_light;

}
rght{

    display: block;
    text-align: right;
    padding-right: 30px;
}
sup{
  position: relative;
  top: 3px;
  vertical-align: top;
  font-size: 41%;
}
sup2{
    position: relative;
    top: 0px;
    vertical-align: top;
    font-size: 90%;
}
/* ------------------------- elementID selector elements *brder element can be set to 'none' or '' in ia var to leave display none hex color in ia var sets display to true in js ------------------------- */
#container{
    position: absolute;
    display: block;
    width: 728px;
    height: 90px;
    left:0px;
    top:0px;
    opacity: 0.0;
    
}
#clickBtn{
    position: absolute;
    display: block;
    width: 728px;
    height: 90px;
    opacity: 0.0;
    background-color: #ff0000;
}
#brder{
    position: absolute;
    display: none;
    width: 726px;
    height: 88px;
    top:0px;
    left:0px;
    opacity: 0;
    border: 1px solid ;
}
.frm{
    position: absolute;
    display: block;
    width: 728px;
    height: 90px;
    left:0px;
    top:0px;
    opacity: 0.0;
}
/* ------------------------- general classes to set elements, hTxt and #frm_1_overlay make up unique layout for frm 1  ------------------------- */
.abso{
    position: absolute;
    display: block;
    left:0px;
    top:0px;
}
.frm_img{
    position: absolute;
    display: block;
    right:0px;
    bottom:0px;
    opacity: 1.0;
}
#frm_1_overlay{
    position: absolute;
    display: block;
    width: 160px;
    height: 90px;
    left:0px;
    top:0px;
}

/* ------------------------- elements in the cta section, js adjusts the width and height for frm1 cta which is unique  ------------------------- */
.ctaHold{
    position: absolute;
    display: block;
    width: 312px;
    height:20px;
    right:0px;
    top:70px;

}
.ctaBG{
    position: absolute;
    display: block;
    width: 312px;
    height:20px;
    left:0px;
    top:0px;
}
.ctaTxt{
    position: absolute;
    display: block;
    height:20px;
    text-align: right;
    padding-right: 14px;
    font-family: pill300_light;
    font-size: 12px;
    letter-spacing: 2px;
    width: 292px;
    top: 4px;
    right: 0;
    color: rgb(0, 102, 153);
    font-weight:bold;
}
.legalTxt{
    position: absolute;
    display: block;
    width: 312px;
    height:20px;
    left:5px;
    top:5px;
    font-family: pill300_regular;
    letter-spacing:0px;
    font-size: 10px;


}

#frm_3_footer_txt,
#frm_4_footer_txt{
    padding-bottom: 18px;
    height: auto;
}
/* ------------------------- footer elements in frm 2-4
<-- by wrapping elements for price and text into float divs the price can be shorter longer and the copy will expand/contract
    as needed
<-- for future RL you could easily switch the float to left and
 ------------------------- */



/* ------------------------- New style...
<-- wrapping allows for vertical centering of the divs in a relative way rather than fixed or using pixel height
 ------------------------- */
#h_wrapper{
    position: absolute;
    display: block;
    width: 256px;
    top:0px;
    left: 160px;
    height: 90px;
}
#h_holder{

    display: table;
    height: 100%;
    width: 100%;
}
#h_wrap_out{
    display: table-cell;
    width: 100%;
    vertical-align: middle;
}
#h_wrap_inner{
    display: table-cell;
    width: 100%;
    vertical-align: middle;
}


.hTxt{
    width: 256px;
    text-align: center;

    font-size: 14px;


}
/* ------------------------- New style...
<-- wrapping allows for vertical centering of the divs in a relative way rather than fixed or using pixel height

 ------------------------- */

.footerBG{
    position: absolute;
    display: block;
    width: 256px;
    height:90px;
    left:160px;
    top:0px;
}

/*                            */
.footer_wrapper{
    position: absolute;
    display: block;;
    width: 256px;
    height:90px;
    left:160px;
}
.f_holder{
    display: table;
    height: 100%;
    width: 256px;

}
.f_wrap_out{
    display: table-cell;
    padding-right: 8px;
    float: right;
}
.floatFootR{
    display: table-cell;
    text-align: right;

    letter-spacing: 0px;
    height: 90px;
    vertical-align: middle;
    font-family: pill300_light;
    font-size:15px;
}
.floatFootPriceR{
    display: table-cell;
    text-align: right;
    padding-left:6px;;
    height: 90px;
    vertical-align: middle;

    font-size: 55px;
    letter-spacing: 1px;
    font-family: pill300_light;
}