/* 
Template: Listing Template
Description: bricked background and single product style
Version: 1.2
*/
/* 
Template: Test First Template
Description: 
Version: 1.2
*/

/* IMPORT FONTS */ 
/*===================== Trade Gothic FONT ==============================================*/
@font-face {
    font-family: "Trade Gothic Medium";
    src: url("http://marqueeposter.com/wp-content/themes/ns69-wp-theme/theme/assets/fonts/tradegothic-medium.eot");
    src: url("http://marqueeposter.com/wp-content/themes/ns69-wp-theme/theme/assets/fonts/tradegothic-medium.eot#iefix") format("embedded-opentype"), url("http://marqueeposter.com/wp-content/themes/ns69-wp-theme/theme/assets/fonts/tradegothic-medium.woff") format("woff"), url("http://marqueeposter.com/wp-content/themes/ns69-wp-theme/theme/assets/fonts/tradegothic-medium.ttf") format("truetype"), url("http://marqueeposter.com/wp-content/themes/ns69-wp-theme/theme/assets/fonts/tradegothic-medium.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Trade Gothic Light";
    src: url("http://marqueeposter.com/wp-content/themes/ns69-wp-theme/theme/assets/fonts/tradegothic-light.eot");
    src: url("http://marqueeposter.com/wp-content/themes/ns69-wp-theme/theme/assets/fonts/tradegothic-light.eot#iefix") format("embedded-opentype"), url("http://marqueeposter.com/wp-content/themes/ns69-wp-theme/theme/assets/fonts/tradegothic-light.woff") format("woff"), url("http://marqueeposter.com/wp-content/themes/ns69-wp-theme/theme/assets/fonts/tradegothic-light.ttf") format("truetype"), url("http://marqueeposter.com/wp-content/themes/ns69-wp-theme/theme/assets/fonts/tradegothic-light.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Trade Gothic Bold";
    src: url("http://marqueeposter.com/wp-content/themes/ns69-wp-theme/theme/assets/fonts/tradegothic-boldtwo.eot");
    src: url("http://marqueeposter.com/wp-content/themes/ns69-wp-theme/theme/assets/fonts/tradegothic-boldtwo.eot#iefix") format("embedded-opentype"), url("http://marqueeposter.com/wp-content/themes/ns69-wp-theme/theme/assets/fonts/tradegothic-boldtwo.woff") format("woff"), url("http://marqueeposter.com/wp-content/themes/ns69-wp-theme/theme/assets/fonts/tradegothic-boldtwo.ttf") format("truetype"), url("http://marqueeposter.com/wp-content/themes/ns69-wp-theme/theme/assets/fonts/tradegothic-boldtwo.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Trade Gothic Medium Italic";
    src: url("http://marqueeposter.com/wp-content/themes/ns69-wp-theme/theme/assets/fonts/tradegothic-medium-italic.eot");
    src: url("http://marqueeposter.com/wp-content/themes/ns69-wp-theme/theme/assets/fonts/tradegothic-medium-italic.eot#iefix") format("embedded-opentype"), url("http://marqueeposter.com/wp-content/themes/ns69-wp-theme/theme/assets/fonts/tradegothic-medium-italic.woff") format("woff"), url("http://marqueeposter.com/wp-content/themes/ns69-wp-theme/theme/assets/fonts/tradegothic-medium-italic.ttf") format("truetype"), url("http://marqueeposter.com/wp-content/themes/ns69-wp-theme/theme/assets/fonts/tradegothic-medium-italic.svg") format("svg");
    font-weight: normal;
    font-style: italic;
}

    /* user colors */
    #wpl_store_header .hotline {
        color: $hotline_color;
        background-color: $hotline_bgcolor;
        display: $display_hotline;
    }
    
    #wpl_wrapper {
        background: url('http://marqueeposter.com/sandbox/marqueeposter/wp-content/themes/ns69-wp-theme/theme/assets/images/marqueebg.jpg');
    }

    #wpl_wrapper .wpl_description h2 {
        color: $title_color;
    }

    #wpl_wrapper h3.bar {
        color: $section_head_color;
        background-color: $section_head_bgcolor_top;
        background-image: -webkit-gradient(linear, left top, left bottom, from($section_head_bgcolor_top), to($section_head_bgcolor_bottom));
        background-image: -webkit-linear-gradient(top, $section_head_bgcolor_top, $section_head_bgcolor_bottom);
        background-image:    -moz-linear-gradient(top, $section_head_bgcolor_top, $section_head_bgcolor_bottom);
        background-image:     -ms-linear-gradient(top, $section_head_bgcolor_top, $section_head_bgcolor_bottom);
        background-image:      -o-linear-gradient(top, $section_head_bgcolor_top, $section_head_bgcolor_bottom);
        background-image:         linear-gradient(to bottom, $section_head_bgcolor_top, $section_head_bgcolor_bottom);
    }

    /* layout */
    #wpl_wrapper {
        width: 780px;
        margin-right: auto;
        margin-left: auto;
        margin-top: 30px;
        margin-bottom: 20px;
        padding: 0;
        font-size: 14px;
        font-family:Arial,Helvetica,sans-serif;
    }
    
    #wpl_header{
        background:#000;
        padding:10px;
    }
    
    #wpl_body{
        padding:10px;
    }

    #wpl_store_header {       
        width:100%;
        overflow: hidden;
    }

    .wpl_description {
        padding: 0 30px 10px 0;
    }

    #wpl_main_image {
        width:370px;
        height:auto;
    }
    
    .wpl_shadow_wrap{
        -webkit-box-shadow: 5px 5px 5px 0px #cccccc;
        -moz-box-shadow: 5px 5px 5px 0px #cccccc;
        -o-box-shadow: 5px 5px 5px 0px #cccccc;
        -ms-box-shadow: 5px 5px 5px 0px #cccccc;
        box-shadow: 5px 5px 5px 0px #cccccc;
    }
    
    .wpl_frame_poster{
        border: 10px solid #bcbdc0;
        border-image-source: url("http://marqueeposter.com/wp-content/themes/ns69-wp-theme/theme/assets/images/marqueeframe.jpg");
        border-image-slice: 10 10;
    }

    #wpl_main_image img {
        max-width: 326px;
        margin-top: 0px;
        width: 100%;
        border: 12px solid #262626;
        height: auto !important;
    }

    /* image thumbnails - 3 columns */
    #wpl_list_images {
        text-align:center;
        margin-top:10px;
    }

    #wpl_list_images a {
        float: left;
        display: block;
        border: 1px solid #ccc;
        margin-left: 0px;
        margin-right: 20px;
        margin-bottom: 20px;
        padding: 12px;
    }

    #wpl_list_images img {
        border:none;
        max-height: 75px;
        max-width: 75px;
        width: auto;
    } 
        
    #wpl_wrapper h2 {
        font-size: 24px;
        line-height: 30px;
    }
    
    #wpl_wrapper .info-box h2, #wpl_wrapper .info-box h3{
        font-family: "Trade Gothic Bold", sans-serif;
        font-size:21px;
        font-weight:300;
        line-height:26px;
        margin:3px 0;



    }
    
    #wpl_wrapper .info-box h2{margin:3px 0 15px 0;}
    #wpl_wrapper .info-box h3{margin:3px 0 10px 0;font-size:17px;}
    #wpl_wrapper .info-box p{
        font-family:"Trade Gothic Medium", sans-serif;
        font-size:16px;
        line-height:20px;
        margin:0;
    } 

    #wpl_wrapper .product-details h3,
    #wpl_wrapper .extrainfo-section h3{
        overflow: hidden;
        position: relative;
        padding-bottom: 12px;
        color: #fff;
        font-weight: 800;
        text-align: center;
        display: table;
        width: 100%;
        margin:10px 0;
    }
    #wpl_wrapper .product-details h3 .underline,
    #wpl_wrapper .extrainfo-section h3 .underline{
        display: table-cell;
        border-bottom: 1px solid #ffffff;
        width: 50%;
    }
    #wpl_wrapper .product-details h3 > span,
    #wpl_wrapper .extrainfo-section h3 > span{
        white-space: nowrap;
        padding-left: 5px;
        padding-right: 5px;
        font-family:"Trade Gothic Medium", sans-serif;
        font-weight:800;
        font-size:21px;
        line-height:30px;
    }
    
    #wpl_store_header .logo {
        float: left;    
    }
    #wpl_store_header .hotline {
        float: right;
        height: 40px;
        font-size: 16px;
        line-height: 40px;
        font-weight: bold;
        padding-right: 20px;
        padding-left: 20px;
        margin-top: 7px;
        -webkit-border-radius: $border_radius;
        -moz-border-radius: $border_radius;
        border-radius: $border_radius;
        text-decoration: none;
        text-shadow: 2px 2px 4px #713803;
        filter: dropshadow(color=#713803, offx=0, offy=1);
    }
    #wpl_wrapper .clearfix {
        clear:both;
    }

    #wpl_wrapper .main_section{
        margin-bottom:20px;
        display: table-cell;
    }

    #wpl_wrapper .main_section .primary{
        width: 50%;
        vertical-align: top;
        padding-right: 10px;
        text-align: center;
    }
    #wpl_wrapper .main_section .secondary{
        width: 50%;
        vertical-align: top;
        padding-right: 10px;
        font-size: 16px;
    }

    #wpl_wrapper .section p {
        padding-left: 10px;
        padding-right: 10px;
        /* fix for firefox: */
        line-height: 1.2em;
        margin: 1em 0;
    }

    #wpl_wrapper .section big {
        font-size: 18px;
        font-weight: bold;
    }

    #wpl_wrapper .alignleft {
        float: left;
    }
    #wpl_wrapper .alignright {
        float: right;
    }

    /* these only apply in preview to override default styles from wp-admin */
    body.wp-admin #wpl_wrapper ul {
        list-style: disc inside none;
    }
    body.wp-admin #wpl_wrapper ul li {
        padding-left: 2em;
    }

    .main-image {
        width: 49%;
        margin-right: 3%;
        display: inline-block;
        vertical-align: bottom;
        margin-top:20px;
        margin-bottom:20px;
    }
    
    .info-box {
        display: inline-block;
        width: 47.4%;
        background: #fff;
        color: #646464;
        margin-top:20px;
        margin-bottom:20px;
        -webkit-box-shadow: 5px 5px 5px 0px #cccccc;
        -moz-box-shadow: 5px 5px 5px 0px #cccccc;
        -o-box-shadow: 5px 5px 5px 0px #cccccc;
        -ms-box-shadow: 5px 5px 5px 0px #cccccc;
        box-shadow: 5px 5px 5px 0px #cccccc;
    }
    .info-box-content{
        padding:20px 15px;
    }
    .product-details, .extrainfo-section {
        clear: both;
        background: rgba( 0, 0, 0, 0.6 );
        padding: 15px 15px 25px 15px;
        color: #ffffff;
        font-family: "Trade Gothic Medium", sans-serif;
        font-size: 16px;
    }
    
    .extrainfo-section{
        margin-top: 25px;
    }
    
    .product-details p, .extrainfo-section p{
        margin:0;
        line-height: 23px;
    }

    .extrainfo-section p,
    .long-description p{
        margin: 0 0 8px 0;
    }
    .long-description{
        margin-top:10px;
    }
    .extrainfo-section ul{
        padding-left: 25px;
        line-height: 23px;
        margin-top: 0px;
        margin-bottom: 8px;
    }