/*
Theme Name: my-punked
Layout: Content-Sidebar
*/

.site-main {
    padding-bottom: 1em;
}
.single .site-content,
.page .site-content { 
    background: #fff; 
    background: hsl(0, 0%, 100%);
}

.site-content .widget-area {
    width: 380px;
    float: right;
    padding: 5.3rem 0 0 !important;
    background: #fff;
    background: hsl(0, 0%, 100%);
}
.site-footer {
    clear: both;
    width: 100%;
}

.entry-header,
.entry-content,
.entry-footer,
.tag-links,
.post-navigation,
.comments-area,
.paging-navigation,
.page-header {
    position: relative;
    max-width: 1000px;
    max-width: 100rem;
    padding: 0 ;
    margin: 0 auto;
}

.index-box {
    max-width: 780px;
    max-width: 78rem;
    padding: 1em 0 2em;
    margin: 0 auto 2em;
    background: #fff;
    background: hsl(0, 0%, 100%);
}

.index-box blockquote.alignleft,
.index-box blockquote.alignright {
    background: #fff;
    background: hsl(0, 0%, 100%);
    border: none;
}

@media screen and (min-width: 1820px) {
    .index-box blockquote.alignright { padding-right: 2em; }
}

@media screen and (min-width: 1320px) {
    .index-box blockquote.alignleft { padding-left: 2em; }
}

@media screen and (min-width: 1540px) {
    .content-area {
        float: left;
        width: 100%;
        padding-top: 2rem;
    }
}

@media screen and (min-width: 280px) and (max-width: 1539px) {
    .content-area {
        width: 100%;
        float: left;
        padding: 2rem;
    }
    
    .entry-header,
    .entry-content,
    .entry-footer,
    .tag-links,
    .post-navigation,
    .comments-area,
    .paging-navigation,
    .index-box,
    .page-header { 
        margin-right: 0; 
    }
    
}
@media screen and (max-width:800px) {
    .rebox-next { right: 5%; }
    .rebox-prev { left: 5%;  }
}
@media screen and (max-width: 999px) {  
    .site-content .widget-area {
        width: 100%;
        max-width: 780px;
        float: none;
        margin: 1em auto 0;
    }
    .wrapperContent {
        width: 100%;
}
.content-area {
        padding: 2rem 1rem;
    }
.rebox-next { right: 25%;  }
.rebox-prev { left: 25%; }
.wrapperContentFull #main
{
    width: 100%;
}
.wrapperContent #main
{
    width: 100%;
}
.wrapperContent .widget-area
{
    width: 90% !important;
    padding: 0 5%;
}
}
@media screen and (max-width: 639px) { 
    .main-navigation ul {
    width: 96%;
    padding: 0 2%;
}

.pindex h2 a
{
    letter-spacing: 0px !important;
}

.cartholder
{
    position: relative;
    float: left;
    clear: both;
    left: 5px;
    top: 5px;
}
.topActions
{
    position: relative;
    width: 100%;
    float: left;
    top: 0rem;
    left: 0;
}
ul.socialList
{
    float: right;
    right: 5px;
    top: 5px;
    margin: 0 !important;
    display: inline-block;
    text-align: center;
    z-index: 10000;
    position: relative;
}
#site-logo img
{
    position: relative;
    z-index: 1;
}
ul.socialList li
{
    float: none;
    display: inline-block;
    position: relative;
    min-width: 1.6rem;
}
ul.socialList li a
{
    font-size: 130%;
}
.socialWrap
{
    float: right;
    position: relative;
}
span.wpcf7-form-control-wrap
{
    padding: 0 !important;
}
} 
@media only screen and (max-width:400px)
{
    .pindex
{
    width: 100%;
    height: auto;
    margin: 0  !important;
    float: left;
}
.pindex h2 a
{
    letter-spacing: 0px !important;
}
.site-info p
{
    font-size: 80%;
}
}
@media only screen and (max-width:479px)
{
    #site-logo img
{
    width: 90% !important;
    padding: 0 5%;
}
.site-footer
{
    padding:2em 0em !important;
    font-size: 80% !important;
}
}
.page-header,
.paging-navigation {
    padding-top: 1em;
    padding-bottom: 1em;
    margin-bottom: 2em;
    list-style-type: none;
    background: #fff;
}
/* START Make the cart table responsive */
 /* http://css-tricks.com/responsive-data-tables/ */

@media screen and (max-width: 600px) {

/* Force table to not be like tables anymore */
 .woocommerce-page table.shop_table,
 .woocommerce-page table.shop_table thead,
 .woocommerce-page table.shop_table tbody,
 .woocommerce-page table.shop_table th,
 .woocommerce-page table.shop_table td,
 .woocommerce-page table.shop_table tr {
     display: block;
 }

/* Hide table headers (but not display: none;, for accessibility) */
 .woocommerce-page table.shop_table thead tr {
     position: absolute;
     top: -9999px;
     left: -9999px;
 }

.woocommerce-page table.shop_table tr {
     /*border: 1px solid #d2d3d3; */
 }

.woocommerce-page table.shop_table td {
     /* Behave like a "row" */
     border: 1px solid #d2d3d3;
     position: relative;
     padding-left: 30% !important;
 }

.woocommerce-page table.shop_table {
     border: none;
 }

.woocommerce-page table.shop_table td.product-spacer {
     border-color: #FFF;
     height: 10px;
 }

.woocommerce-page table.shop_table td:before {
     /* Now like a table header */
     position: absolute;
     /* Top/left values mimic padding */
     top: 6px;
     left: 6px;
     width: 25%;
     padding-right: 10px;
     white-space: nowrap;
 }

/*
 Label the data
 */
 .woocommerce-page table.shop_table td.product-remove:before {
     content: "DELETE";
 }

.woocommerce-page table.shop_table td.product-thumbnail:before {
     content: "IMAGE";
 }

.woocommerce-page table.shop_table td.product-name:before {
     content: "PRODUCT";
 }

.woocommerce-page table.shop_table td.product-price:before {
     content: "PRICE";
 }

.woocommerce-page table.shop_table td.product-quantity:before {
     content: "QUANTITY";
     margin-top: 10px;
 }

.woocommerce-page table.shop_table td.product-subtotal:before {
     content: "SUBTOTAL";
     margin-top: 20px;
 }
.woocommerce-page table.shop_table td.product-subtotal, 
.woocommerce-page table.shop_table td.product-quantity,
.woocommerce-page table.shop_table td.product-name,
.woocommerce-page table.shop_table td.product-price
 {
      min-height: 60px;
 }

tr.cart_item td span
{
    text-align: right;
    float: right;
}	
.woocommerce-page table.shop_table td.product-total:before {
     content: "TOTAL";
 }

.woocommerce .quantity,
 .woocommerce #content .quantity,
 .woocommerce-page .quantity,
 .woocommerce-page #content .quantity {
     margin: 0;
 }

.woocommerce-page table.cart td.actions,
 .woocommerce-page #content table.cart td.actions {
     text-align: left;
     border:0;
     padding-left: 6px !important;
 }

.woocommerce-page table.cart td.actions .button.alt,
 .woocommerce-page #content table.cart td.actions .button.alt {
     float: left;
     margin-top: 10px;
 }

.woocommerce-page table.cart td.actions div,
 .woocommerce-page #content table.cart td.actions div,
 .woocommerce-page table.cart td.actions input,
 .woocommerce-page #content table.cart td.actions input {
     margin-bottom: 10px;
 }

.woocommerce-page .cart-collaterals .cart_totals {
     float: left;
     width: 100%;
     text-align: left;
 }

.woocommerce-page .cart-collaterals .cart_totals th,
 .woocommerce-page .cart-collaterals .cart_totals td {
     border:0 !important;
 }

.woocommerce-page .cart-collaterals .cart_totals table tr.cart-subtotal td,
 .woocommerce-page .cart-collaterals .cart_totals table tr.shipping td,
 .woocommerce-page .cart-collaterals .cart_totals table tr.total td {
     padding-left: 6px !important;
 }

.woocommerce-page table.shop_table tr.cart-subtotal td,
 .woocommerce-page table.shop_table tr.shipping td,
 .woocommerce-page table.shop_table tr.total td,
 .woocommerce-page table.shop_table.order_details tfoot th,
 .woocommerce-page table.shop_table.order_details tfoot td {
     padding-left: 6px !important;
     border:0 !important;
 }

.woocommerce-page table.shop_table tbody {
     padding-top: 10px;
 }

.woocommerce .col2-set .col-1,
 .woocommerce-page .col2-set .col-1,
 .woocommerce .col2-set .col-2,
 .woocommerce-page .col2-set .col-2,
 .woocommerce form .form-row-first,
 .woocommerce form .form-row-last,
 .woocommerce-page form .form-row-first,
 .woocommerce-page form .form-row-last {
     float: none;
     width: 100%;
 }

.woocommerce .order_details ul,
 .woocommerce-page .order_details ul,
 .woocommerce .order_details,
 .woocommerce-page .order_details {
     padding:0;
 }

.woocommerce .order_details li,
 .woocommerce-page .order_details li {
     clear: left;
     margin-bottom: 10px;
     border:0;
 }

/* make buttons full width, text wide anyway, improves effectiveness */
 #content table.cart td.actions .button,
 .woocommerce #content table.cart td.actions .input-text,
 .woocommerce #content table.cart td.actions input,
 .woocommerce table.cart td.actions .button,
 .woocommerce table.cart td.actions .input-text,
 .woocommerce table.cart td.actions input,
 .woocommerce-page #content table.cart td.actions .button,
 .woocommerce-page #content table.cart td.actions .input-text,
 .woocommerce-page #content table.cart td.actions input,
 .woocommerce-page table.cart td.actions .button,
 .woocommerce-page table.cart td.actions .input-text,
 .woocommerce-page table.cart td.actions input {
     width: 100%;
 }

/* keep coupon at 50% */
 #content table.cart td.actions .coupon .button,
 .woocommerce #content table.cart td.actions .coupon .input-text,
 .woocommerce #content table.cart td.actions .coupon input,
 .woocommerce table.cart td.actions .coupon .button,
 .woocommerce table.cart td.actions .coupon .input-text,
 .woocommerce table.cart td.actions .coupon input,
 .woocommerce-page #content table.cart td.actions .coupon .button,
 .woocommerce-page #content table.cart td.actions .coupon .input-text,
 .woocommerce-page #content table.cart td.actions .coupon input,
 .woocommerce-page table.cart td.actions .coupon .button,
 .woocommerce-page table.cart td.actions .coupon .input-text,
 .woocommerce-page table.cart td.actions .coupon input {
     width: 48%;
 }

/* clean up how coupon inputs display */
 #content table.cart td.actions .coupon,
 .woocommerce table.cart td.actions .coupon,
 .woocommerce-page #content table.cart td.actions .coupon,
 .woocommerce-page table.cart td.actions .coupon {
     margin-top: 1.5em;
 }

#content table.cart td.actions .coupon .input-text,
 .woocommerce table.cart td.actions .coupon .input-text,
 .woocommerce-page #content table.cart td.actions .coupon .input-text,
 .woocommerce-page table.cart td.actions .coupon .input-text {
     margin-bottom: 1em;
 }

/* remove cross sells, they interfere with flow between cart and cart totals + shipping calculator */
 .woocommerce .cart-collaterals .cross-sells,
 .woocommerce-page .cart-collaterals .cross-sells {
     display: none;
 }

}

/* END Make the cart table responsive */

