@import url('popupthumb.css');

/*=== banner Start Here ===*/
.inner_banner {
    margin:0px; padding:8px 0 0 0; 
}
.inner_bannerin {
    margin:0px; padding:0px; background:url(../images/products/inner_banner_bg.jpg) top left; 
}
.inner_topbg {
    margin:0px; padding:0px; background:url(../images/products/inner_banner_topbg.jpg) top left no-repeat; 
}
.inner_bottombg {
    margin:0px; padding:0px; background:url(../images/products/inner_banner_bottombg.jpg) bottom left no-repeat; 
}


.inner_banner_left {
    margin:0px; padding:0px; width:578px; float:left; 
}
.inner_banner_leftin {
    margin:0px; padding:0 0 0 30px; 
}
.inner_banner_left h3 {
    margin:0px; padding:28px 0 0 0; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:40px; color:#FFF; font-weight:normal;
}
.inner_banner_left .strong {
    margin:0px; padding:12px 0 0 0; color:#FFF; font-size:12px;
}
.inner_banner_left .p {
    margin:0px; padding:21px 0 0 0; color:#FFF; 
}
.inner_banner_left .prod_btn {
    margin:0px; padding:21px 0 12px 0; 
}
.inner_banner_left .prod_btn a {
    display:inline-block; margin:0px; padding:0 7px 0 0; 
}
.inner_banner .message {
    margin:0px; padding:10px 0 12px 0; text-align:right; color:#F00; width:580px; 
}


.inner_banner_slider {
    margin:0px; padding:11px 6px 0 0; border: solid 0px #F00; float:right; position:absolute; right:5px; 
}
.inner_banner_slider .banner_slider_bg{
    margin:0px; padding:0px;
    /*
     * The background is a white box with transparency on left, right, and bottom.
     * The left and right transparent "margin" is 4px. On the bottom it's
     * 11 pixels. The exact dimensions are 375w x 281h.
     * Therefore, the dimension for centering inside
     * the frame is 375-((4+5)x2)=357px wide x 281-(5+5+11)=260px high
     * allowing an even white border of 5px all around.
     *
     * The _orig version is just a white frame with transparency.
     * I don't quite understand why the designer did that.  On the iPad
     * we sometimes get bleed through of the background, and getting the
     * image scaled exactly right can cause issues.  So, I added
     * a white area inside, and that's the backgroud we use.
    */
    background:url(../images/products/slider_box_white.png) top left no-repeat;
    width:375px; height:281px; 
}
.inner_banner_slider .banner_slider_bg .banner_slider_bgin {
    margin:0px; padding:5px 0 0 9px; 
}

/*=== banner Start Close ===*/

.dottedline {
    clear:both; margin:0px; padding:0px; height:1px; background:url(../images/products/dotted_line.jpg) top left repeat-x;
}

.prod_content {
    margin:0px; padding:0px; border: solid 0px #F00; width:578px; float:left; 
}
.prod_contentin {
    margin:0 0 0 0px; padding:0px; 
}

/*
 * RJR 5-Oct-11; renamed to "benefits" from "service".
 * Also, improved styling structure to be more logical.
*/
/*========================== Benefits box start here ==========================*/
.prod_contentin .benefits {
    margin:0px; padding:0px; 
}

.prod_contentin .benefits .benefits_box_left {
    margin:0px; padding:5px 0 20px 0; width:280px; min-height:127px; background:url(../images/products/dotted_h_line.gif) top right no-repeat; border: solid 0px #F00; float:left 
}

.prod_contentin .benefits .benefits_box_right {
    margin:0px; padding:5px 0 20px 0; width:280px; min-height:127px; border: solid 0px #F00; float:right; 
}

.prod_contentin .benefits h4 {
    margin:19px 0 0 6px; padding:15px 0 15px 65px; float:left; font-size:12px; color:#a35716; 
}

.prod_contentin .benefits p {
    clear:both; display:block; margin:0px; padding:10px 14px 0 4px; font-size:12px; line-height:18px; color:#333; 
}

.prod_contentin .benefits h4.free {
    background:url(../images/products/icon_free.jpg) center left no-repeat; 
}

.prod_contentin .benefits h4.lowcost {
    padding:17px 0 17px 60px;
    background:url(../images/products/icon_lowcost.jpg) center left no-repeat; 
}

.prod_contentin .benefits h4.antispam {
    padding:18px 0 17px 65px;
    background:url(../images/products/icon_spam.jpg) center left no-repeat; 
}

.prod_contentin .benefits h4.secure {
    padding:22px 0 15px 65px;
    background:url(../images/products/icon_secure.jpg) center left no-repeat; 
}

.prod_contentin .benefits h4.support {
    padding:17px 0 15px 60px;
    background:url(../images/products/icon_support.jpg) center left no-repeat; 
}

.prod_contentin .benefits .benefits_box_wide {
    margin:0px; padding:0px;
}
.prod_contentin .benefits .benefits_box_wide p {
    line-height:20px; 
}

.prod_contentin .benefits ul {
    clear:both;
    padding-top:10px;
}
/*========================== Benefits box close here ==========================*/

/*========================== Feature box start here ==========================*/
.feature {
    margin:0px; padding:0px; 
}
.feature h4 {
    margin:0px; padding:14px 0; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:24px; font-style:italic; font-weight:normal; color:#000000; 
}
.feature h5 {
    margin:0px; padding:20px 0; font-size:11px; font-weight:bold;   
}
.feature .feature_box {
    margin:0px; padding:0px;
    background:url(../images/products/feature_centerbg.gif) top left repeat-y;
    width:571px;
}
.feature .feature_topbg {
    margin:0px; padding:0px;
    background:url(../images/products/feature_topbg.gif) top left no-repeat; 
}
.feature .feature_bottombg {
    margin:0px; padding:0px; 
    background:url(../images/products/feature_bottombg.gif) bottom left no-repeat; 
}
.feature ul {
    margin:0px; padding:0 0 23px 12px; list-style:inside
}
.feature ul li {
    margin:0px; padding:23px 0 0 0; color:#000; 
}

/*========================== Special info start here ==========================*/
.special_info {
    margin:0px; padding:0px; 
}
.special_infoin {
    margin:0px; padding:0px; 
}
.special_infoin h4 {
    margin:0px; padding:15px 0; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:24px; font-style:italic; font-weight:normal; color:#000000; 
}
.special_infoin .special_info_cont {
    margin:0px; padding:15px 0 0 0; 
}

.special_info_cont_left {
    margin:0px; padding:0px; width:315px; float:left; 
}
.special_info_cont_left .special_info_cont_leftin {
    margin:0px; padding:0px; 
}
.special_info_cont_left .special_info_cont_leftin h6  {
    margin:0px; padding:0px; font-size:12px; color:#a35716; 
}
.special_info_cont_left .special_info_cont_leftin p  {
    margin:0 0 1em 0; padding:0 55px 0 0; font-size:12px; line-height:18px;

}

.special_info_cont_right {
    margin:0px; padding:0px; width:256px; float:left;  
}
.special_info_cont_right .special_info_cont_rightin h6  {
    margin:0px; padding:0px; font-size:12px; color:#a35716; 
}
.special_info_cont_right .special_info_cont_rightin p  {
    margin:0 0 1em 0; padding:0 2px 0 0; font-size:12px; line-height:18px; 
}


.getitnow {
    margin:0px; padding:0px;
}
.getitnow .getitnowin {
    margin:0px; padding:0px;
}
.getitnow .getitnowin h4 {
    margin:0px; padding:15px 0; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:24px; font-style:italic; font-weight:normal; color:#000000; 
}
.getitnow .getitnowin .button {
    margin:0px; padding:60px 0;
}
.getitnow .getitnowin .button img {
    display:inline-block; margin:0px; padding:0 30px;
}


/*========================== Special info close here ==========================*/


/*=================================*/
.prod_right {
    margin:0px; padding:0px; float:right; width:380px; 
}
.prod_rightin {
    margin:0 18px 0 0; padding:0px; 
}
.prod_rightin .award {
    margin:8px 0 0 0; padding:0px;
    text-align:center;
}
.prod_rightin .award a {
    display:inline-block;
}
.prod_rightin .award .award_img {
    display:inline-block; margin:0px; padding:0 18px 0 0;
}
.prod_rightin .award .award_img_last {
}

/* RJR 10-Oct-11: most testimonial styles moved to tectitestyle.css */
.testimonial {
    background: #eeeeee url(../images/products/testimonial01_bg.gif) top left repeat-x;
    border: solid 1px #cccccc;
}

.testimonial .testimonialin .testimonial_regards {
    /*    border:1px solid blue;*/
    background:url(../images/products/quotation.png) bottom right no-repeat; 
}

.testimonial .testimonialin .testimonial_regards {
    margin:15px 0; padding:0px; 
    /*    border:1px solid blue;*/
} 

.testimonial .testimonialin .testimonial_regards .testimonial_regards_img {
    margin:0px; padding:0px; float:left; 
    display:block;
} 

.testimonial .testimonialin .testimonial_regards .testimonial_regards_text {
    margin:7px 0 0 10px; padding:0px; float:left; 
} 

.resource {
    margin:0px; padding:0px; 
}
.resource .resourcein {
    margin:0px; padding:0px; 
}
.resource .resourcein h4 {
    margin:0px; padding:15px 0; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:24px; font-style:italic; font-weight:normal; color:#000000; 
}

.resource .resourcein ul {
    margin:8px 0 0 10px; padding:0px; list-style:inside; color: #a15514; 
}
.resource .resourcein ul li {
    margin:0px; padding:8px 0; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; color: #a15514; 
}
.resource .resourcein ul li span {
    display:block;  margin:0px; padding:0 0 0 12px; font-weight:normal; color:#000; font-size:11px; 
}

.general_info {
    margin:0px; padding:0px; 
}
.general_info .general_infoin {
    margin:0px; padding:0px; 
}
.general_info .general_infoin h4 {
    margin:0px; padding:15px 0; 
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
    font-size:24px; font-style:italic; 
    font-weight:normal; color:#000000; 
}
.general_info .general_infoin p {
    margin:1em 0 1em 0; padding:0px; line-height:18px; 
}

.banner_slider_bgin .popupthumb span img { /*CSS for enlarged image in the banner_slider */
    border: 4px solid #a15514;
}

.banner_slider_bgin .popupthumb img { /*CSS for thumbnail image in the banner_slider */
    display:block;
    font-size:1px;
    text-align:left;
    width:357px;
    height:260px;
    margin:0;
    padding:0;
}

/*
 * RJR 5-Oct-11; this style is used by the touchable code for popups
*/
span.popuplegend {
    display:block;
    height:24px;
    border:1px solid black;
    position:relative;
    font-size:14px;
    white-space:nowrap;
    font-style:italic;
    font-weight:bold;
    padding:4px;
    color:#a15514;
    background-color:white;
}

/*
 * Pricing table
*/
th.pricing, td.pricing {
    border: #A15514 1px solid;
    vertical-align: middle;
}
p.pricing {
    padding-top: 0;
    padding-bottom: 0;
}
tr.pricing {
    border: #A15514 1px solid;
    vertical-align: middle;
}
table.pricing {
    border: #A15514 1px solid;
}

/*
 * Movies
 */
 a.moviethumb {
    display:block;
    width:94px;
    margin:5px auto;
 }
a.moviethumb img {
    width:90px;
    border: 2px solid #A15514;
}

@media (max-width: 600px) {
    .inner_banner_left {
       width:100%;
    }
    .inner_banner_slider, .inner_banner_slider .banner_slider_bg {
        display:none;
    }
    .inner_banner .message {
        width:90%;
    }
    .banner_slider_bgin .popupthumb img {
        display:none;
    }

    .popupthumb a span {
        display:none;
    }

    .prod_contentin .benefits .benefits_box_left {
        width:90%;
    }

    .prod_right, .prod_contentin .benefits .benefits_box_right {
        float:left;
        width:90%;
    }

    .prod_content {
        width:100%;
    }

    .feature .feature_box {
        width:90%;
    }
}