/* ------------------------- 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%;
}
bigger{
    font-size: 35px;
}
article_nm {
    position: absolute;
    display: block;
    font-size: 80%;
    padding-right:47px;
    line-height: 16px;
    font-family: pill300_light;
    right: 0px;
    text-align: right;
    width: 300px;


}
sup{
  position: relative;
  top: 4px;
  vertical-align: top;
  font-size: 44%;
}
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: 300px;
    height: 600px;
    left:0px;
    top:0px;
    opacity: 0.0;
    
}
#clickBtn{
    position: absolute;
    display: block;
    width: 300px;
    height: 600px;
    opacity: 0.0;
    background-color: #ff0000;
}
#brder{
    position: absolute;
    display: none;
    width: 298px;
    height: 598px;
    top:0px;
    left:0px;
    opacity: 0;
    border: 1px solid ;
}
.frm{
    position: absolute;
    display: block;
    width: 300px;
    height: 600px;
    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;
}
/*.hTxt{
    position: absolute;
    display: block;
    width: 300px;
    text-align: center;
}*/
.frm_img{
    position: absolute;
    display: block;
    width: 300px;
    left:0px;
    bottom:0px;
    opacity: 1.0;
}
#frm_1_overlay{
    position: absolute;
    display: block;
    width: 300px;
    left:0px;
    top:0px;
}
#frm_1_cta{
    position: absolute;
    display: block;
    width: 300px;
    text-align: center;
    font-family: pill300_light;
    letter-spacing: 2px;
    font-size: 14px;
    top: 7px;
    font-weight: bold;
    color: #006699;
}
/* ------------------------- elements in the cta section, js adjusts the width and height for frm1 cta which is unique  ------------------------- */
.ctaHold{
    position: absolute;
    display: block;
    width: 300px;
    height:20px;
    left:0px;
    top:347px;
}
.ctaBG{
    position: absolute;
    display: block;
    width: 300px;
    height:20px;
    left:0px;
    top:0px;
}
.ctaTxt{
    position: absolute;
    display: block;
    height:20px;
    width: 300px;
    text-align: center;
    font-family: pill300_light;
    font-size: 14px;
    font-weight:bold;
    letter-spacing: 2px;
    top: 4px;
    color: rgb(0, 102, 153);
}

/* ------------------------- 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
 ------------------------- */

.footerBG{
    position: absolute;
    display: block;
    width: 300px;
    height:233px;
    left:0px;
    top:367px;
}

.footerHold{
    position: absolute;
    display: block;;
    width: 300px;
    height:46px;
    left:0px;
    top:430px;

}
.wraper{
    width: 100%;
}
.wraper2{
    display: table;
    width: 100%;
    height: 233px;
}
.foot2{
    display: table-cell;
    vertical-align: middle;
    padding: 0px;
    width: 100%;
}
.foot3{
    display: table-cell;
}
.footCenter{
    display: block;
    position: absolute;
    width: 300px;
    text-align: center;
    font-family: pill300_light;
    padding: 0px;
    margin: 0px;
}
.footPriceCenter{
    display: block;
    position: absolute;
    padding: 0px;
    margin: 0px;
    width: 300px;
    text-align: center;
    font-size: 36px;
    letter-spacing: 1px;
    font-family: pill300_light;
}
/*.legalTxt{
    position: absolute;
    display: block;
    width: 300px;
    text-align: center;
    font-family: pill300_regular;
    letter-spacing:0px;
    font-size: 10px;

}*/
/* ------------------------- 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: 100%;
    top:70px;
    height: 130px;
}
#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: 300px;
    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:300px;
    top:368px;
    height: 232px;
}
.footer_wrapper{
    position: absolute;
    display: block;
    width: 100%;
    top:425px;
    height: 175px;
}
.f_holder{

    display: table;
    height: 100%;
    width: 100%;
}
.f_wrap_out{
    display: table-cell;
    width: 100%;
    vertical-align: middle;
    position: relative;

}
.f_wrap_inner{
    display: table-cell;
    width: 100%;
    vertical-align: middle;

}
.price_{
    font-family: pill300_light;
    font-size: 35px;
    letter-spacing: 1px;
}

.fTxt{
    width: 300px;
    text-align: center;
    font-size: 17px;
    font-family: pill300_light;
}
.legalTxt{
    width: 300px;
    text-align: center;
    font-size: 10px;
    font-family: pill300_regular;
}

/*#frm_3_footer_txt {
    position: relative;
    top: 3px;
}

#frm_3_footer_hold {
    top:384px !Important;
}

#frm_3_legal_txt p {
    padding-top:2px !important;
}

#frm_4_footer_hold {
    top:390px !important;
}*/