﻿
.img_boxed {
    padding: 6px;
    background-color: White;
    border: 1px solid #ddd;
}

.img_btn {
    position: absolute;
    cursor: pointer;
    border-radius: 50%;
    color: #fff;
    font-size: 2rem;
    height: 4rem;
    width: 4rem;
    line-height: 4rem;
    text-align: center;
    background-color: #282828;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }


/* --- PRODUCT FEATURES --- */

div.product_feature {
    margin-top: 30px;
    margin-bottom: 50px;
    min-height: 10px;
    margin-left: 10px;
    margin-right: 80px;
    position: relative;
}


/* text wrappers */
div.product_feature_all {
    min-height: 10px;
    margin-left: 20px;
    margin-right: 20px;
}

div.product_feature_left {
    min-height: 100px;
    margin-left: 160px;
    margin-right: 20px;
}

div.product_feature_right {
    min-height: 100px;
    margin-left: 20px;
    margin-right: 160px;
}


/* image wrappers */
div.product_feature_left_img {
    float: left;
    margin-top: 5px;
    margin-left: 20px;
    min-width: 100px;
    min-height: 10px;
}

    div.product_feature_left_img img.nextimg {
        margin-top: 20px;
    }

div.product_feature_right_img {
    float: right;
    margin-top: 5px;
    margin-right: 20px;
    min-width: 100px;
    min-height: 10px;
}

    /* image wrapper image */
    div.product_feature_left_img img,
    div.product_feature_right_img img {
        background-color: #eee;
        width: 100px;
        height: 100px;
        border: none;
        box-shadow: 0 0 4px #ccc;
        -moz-border-radius: 5px;
        border-radius: 5px;
        overflow: hidden;
    }

div.product_feature h2 {
    margin-top: 0px;
}

div.product_feature_expanded h2 {
    margin-top: 1.6em;
}

div.product_feature_header {
    margin-left: 30px;
    margin-right: 30px;
}

    div.product_feature_header h2 {
        font-weight: 400;
    }

.section_main_feature div.product_feature_header h2 {
    margin-top: 0em;
}

.bordered_block {
    margin: 0 0 20px 0;
    clear: both;
    overflow: auto;
    border: 1px solid #e4e4e4;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.bordered_block_bg {
    margin: 0 0 20px 0;
    padding: 20px;
    clear: both;
    overflow: auto;
    border: 1px solid #e4e4e4;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fafafa), to(1, #dddddd) );
    background: -moz-linear-gradient(top, #fafafa 5%, #dddddd);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#dddddd');
}

.bordered_block h3 {
    margin-top: 1em;
}




/* --------------- section ------------------ */

.tab_wrapper.features {
    padding: 0px;
    display: block;
}

    .tab_wrapper.features.group {
        margin-top: -20px;
    }


.tab_wrapper.wifi {
    padding: 30px;
    display: block;
}



/* --- HALF WIDTH FEATURE --- */
.tab_wrapper.features .feature_full_width {
    max-width: 550px;
    min-height: 120px;
    padding-left: 115px;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
}

.tab_wrapper.features .feature_full_width h3 {
   margin-top: 12px;
}
    /* --- HALF WIDTH FEATURE --- */
    .tab_wrapper.features .feature_half_width {
    max-width: 220px;
    min-height: 120px;
    padding-left: 115px;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
}


.tab_wrapper.features .noimg {
    width: 320px;
    padding-left: 0px;
}

.tab_wrapper.features .feature_half_width.noimg {
    min-height: 60px;
    max-width: 335px;
}

.tab_wrapper.features .feature_half_width h3 {
    margin: 0px;
    font-weight: 500;
}

.tab_wrapper.features .feature_half_width p {
    font-size: 1.15rem;
    line-height: 1.4em;
    color: #999999;
    margin-top: 5px;
}

.tab_wrapper.features .feature_half_width li {
    font-size: 12px;
    line-height: 1.4em;
    color: #999999;
}

.tab_wrapper.features .feature_half_width ol.nomarginleft {
    padding: 0px 0px 0px 20px;
}

.tab_wrapper.features .feature_half_width ul.nomarginleft li {
    list-style-position: outside;
}

.tab_wrapper.features .feature_half_width .feature_image,
.tab_wrapper.features .feature_full_width .feature_image
{
    background-position: left top;
    position: absolute;
    left: -10px;
    top: -10px;
    width: 120px;
    height: 120px;
    background-image: url('/images/feature_image_bg.png');
    background-repeat: no-repeat;
}

    .tab_wrapper.features .feature_half_width .feature_image img,
    .tab_wrapper.features .feature_full_width .feature_image img {
        width: 92px;
        height: 92px;
        position: absolute;
        left: 14px;
        top: 14px;
    }



/* --- Feature BUTTON --- */

#m_content .feature_button {
    display: inline-block;
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
    padding: 5px 10px 5px 10px;
    margin: 0px 5px 5px 0px;
    outline: none;
    box-shadow: inset 0px 1px 0px 0px #e4e4e4;
    text-align: center;
    text-decoration: none;
    color: #333 !important;
    font-size: 13px;
    text-shadow: 1px 1px 0px #e4e4e4;
    border: 1px solid #e4e4e4;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #f1f1f1;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f1f1f1), to(#dddddd) );
    background: -moz-linear-gradient(top, #f1f1f1 5%, #dddddd);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1', endColorstr='#dddddd');
    cursor: pointer;
}

    #m_content .feature_button:hover {
        text-decoration: none;
        color: #dddddd;
        background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dddddd), to(#f1f1f1) );
        background: -moz-linear-gradient(top, #dddddd 5%, #f1f1f1);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#f1f1f1');
        background-color: #dddddd;
    }

    #m_content .feature_button:active {
        position: relative;
        top: 1px;
    }



/* --- BACK TO TOP BUTTON --- */

.top_button {
    background-position: center bottom;
    position: absolute;
    right: 20px;
    top: 0px;
    display: block;
    background-image: url('/images/top_button.png');
    width: 70px;
    height: 25px;
    text-indent: -9999px;
}

    .top_button:hover {
        background-position: center top;
    }



/* --- OTHER FEATURES BOX --- */

div#other_features {
    background: #EEE;
    border-style: solid;
    border-width: 1px;
    border-color: #ddd #eee #eee #ddd;
    width: 600px;
    padding: 10px;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background: url('/images/global/section_nav_selected_bg.gif');
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

    div#other_features .white_button {
        margin-left: 5px;
        margin-right: 5px;
    }




/* --- SEC EXPAND --- */
.sec_exp_feature {
    margin-top: 4px;
    min-width: 92px;
    display: inline-block;
    background: #e3e3e3;
    border: 1px solid #bbb;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
    -moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
    -ms-box-shadow: inset 0 0 1px 1px #f6f6f6;
    -o-box-shadow: inset 0 0 1px 1px #f6f6f6;
    box-shadow: inset 0 0 1px 1px #f6f6f6;
    color: #333 !important;
}

    .sec_exp_feature:hover {
        border: 1px solid #3c7fb1;
        background: #eaf6fd; /* #d9d9d9 */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaf6fd', endColorstr='#afdef8');
        background: -webkit-gradient(linear, left top, left bottom, from(#eaf6fd), to(#afdef8));
        background: -webkit-linear-gradient(top, #eaf6fd, #afdef8);
        background: -moz-linear-gradient(top, #eaf6fd, #afdef8);
        background: -ms-linear-gradient(top, #eaf6fd, #afdef8);
        background: -o-linear-gradient(top, #eaf6fd, #afdef8);
        background: linear-gradient(top, #eaf6fd, #afdef8);
        cursor: pointer;
        color: #222 !important;
        cursor: pointer;
    }

    .sec_exp_feature p {
        margin: 0;
        padding: 0 8px 0 22px;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
    }

        .sec_exp_feature p.collapsed {
            background-image: url(/images/arrow_down.png);
            background-position: 7px 7px;
            background-repeat: no-repeat;
        }

        .sec_exp_feature p.expanded {
            background-image: url(/images/arrow_up.png);
            background-position: 7px 7px;
            background-repeat: no-repeat
        }


.section .pageright.onedge {
    margin-right: -30px;
    padding-bottom: 0px;
}




/* MOBILE SITE */

@media (max-width: 560px) {
    .mob div.series-feature div.section img.photo-border-r {
        margin: 0px 0px 15px 0;
    }

    .mob .tab_wrapper.features .feature_half_width {
        max-width: 100%;
    }
}

@media screen and (max-width: 960px) {
    .mob .tab_wrapper.features .section {
        padding: 35px 5px 10px 5px;
    }

        .mob .tab_wrapper.features .section:first-child {
            padding-top: 10px;
        }

    .mob .tab_wrapper.features .section {
        xdisplay: none;
    }

        .mob .tab_wrapper.features .section p.summarytext,
        .mob .tab_wrapper.features .section ul.summarytext,
        .mob .tab_wrapper.features .noimg {
            width: auto;
            font-size: 1.25rem;
            line-height: 1.5em;
        }

        .mob .tab_wrapper.features .section p.halfwidth {
            width: auto;
        }


    .mob div.product_feature_all {
        margin: 0px;
    }

    .mob #m_content .feature_button {
        display: block;
        margin: 5px 0 0 0;
    }

    .mob .tab_wrapper.features .feature_half_width {
        width: auto;
        padding-left: 0px;
    }

        .mob .tab_wrapper.features .feature_half_width .feature_image {
            position: inherit;
            top: 0px;
            left: 0px;
        }

        .mob .tab_wrapper.features .feature_half_width p {
            font-size: 1em;
            line-height: 1.4em;
            color: inherit;
        }

    .mob h2.product_feature_header {
        margin-left: 5px;
        margin-right: 5px;
    }

    .mob div.product_feature_header {
        margin-left: auto;
        margin-right: auto;
        margin-top: 15px;
    }

    .mob .tab_wrapper.features div.series-feature div.section .banner,
    .mob div.series-feature div.section .banner {
        margin: -35px -5px 30px -5px;
        max-width: 105% !important;
    }
}
