/* The CSS. Mobile first! */

/* === Reset === */

* { box-sizing:border-box; border:0; margin:0; padding:0; font-size:1em; }
html { width:100%; height:100%; }
body { padding:1em; padding-top:6em; width:100%; min-height:100%; background:rgb(255,255,255); color:rgb(0,0,0); font-family: 'Helvetica', 'Arial', sans-serif; font-weight:normal; font-style:normal; }
#body-inner { width:100%; min-height:100%; }

/* === Default Styles === */

/* Links */
a { color:rgb(0,0,255); text-decoration:none; }
a:hover { text-decoration:underline; }

/* Headings */
h1 { font-size:1.5em; font-weight:bold; margin-bottom:0.67em; }
h2 { font-size:1.25em; font-weight:bold; margin-bottom:0.8em; }

/* Paragraphs */
p { margin-bottom:1em; }

/* Lists */
ul { margin-bottom:1em; padding-left:1em; list-style-position:outside; }
li { margin-bottom:0.5em; }

/* Images */
img { max-width:100%; vertical-align:bottom; object-fit:contain; }

/* Inputs */
input[type=text] { border:solid 1px lightgrey; padding:0.25em; width:100%; }
textarea { border:solid 1px lightgrey; padding:0.25em; width:100%; height:5em; }
input[type=button], input[type=submit] { background:rgb(0,0,0); padding:0; padding:0.5em 1em; color:white; text-transform:uppercase; cursor:pointer; }
input[type=button]:hover, input[type=button]:active, input[type=submit]:hover, input[type=submit]:active { background:rgb(128,128,128); }

/* === Custom Styles === */

.block { margin-bottom:1em; }
.field { margin-bottom:1em; }

.off { display:none !important; }
.wait { color:orange; font-weight:bold; }
.err { color:red; font-weight:bold; }
.success { color:green; font-weight:bold; }

/* YouTube Embed */
.video-wrapper { margin-bottom:1em; }
.video-wrapper-inner { position:relative; padding-bottom: 56.25%; /* 16:9 */ height:0; }
.video-wrapper iframe { position:absolute; top:0; left:0; width:100%; height:100%; }

#ad_top { text-align:center; margin-bottom:1rem; }

/* === Layout - Header Section === */

header { z-index:999; position:fixed; left:0; top:0; right:0; bottom:auto; max-height:100%; padding:1em; padding-bottom:0; background:white; }
/* Make header scrollable but hide ScrollBar/// */
header { overflow-y:scroll; }
header { scrollbar-width:none; -ms-overflow-style:none; }
header::-webkit-scrollbar { width:0; height: 0; }
/* ///Make header scrollable but hide ScrollBar */
#site-title-menu-toggle { display:flex; padding-bottom:1em; border-bottom:solid 1px lightgrey; }
#site-title { display:inline-block; text-align:left; margin-right:auto; }
#site-title a { display:block; text-decoration:none; color:rgb(182,182,182); }
#site-title h1 { display:block; font-size:1em; margin-bottom:0; } /* Note: Site title is only wrapped in h1 on the home page */

#menu-toggle { display:flex;align-items:center; padding-left:0.5em; }
#menu-toggle-btn { display:inline-block; background-color:transparent; background-image:url('../img/triple-bar.png'); background-size:100% 100%; width:2em; height:1.43em; padding:0; color:transparent; cursor:pointer; }

/* === Layout - Nav === */

nav { width:100%; padding-top:1em; padding-bottom:1em; border-bottom:solid 1px lightgrey; margin-bottom:1em; text-align:center; }
nav#nav-off-mobile { display:none; }
nav * { margin:0; padding:0; text-transform:uppercase; }

nav a, nav a span { color:rgb(96,96,96); }
nav a:hover, nav a:hover span { color:rgb(0,0,0); text-decoration:none; }
nav li { display:block; margin-bottom:1em; }
nav li:last-child { margin-bottom:0; }

#nav { margin-bottom:1em;}
#nav ul { display:block; }
#nav li.active a { color:rgb(128,128,128); }
#nav a { display:block; }
#nav-active a { font-weight:bold; }

#soc { margin-bottom:1em; }
#soc ul { display:inline-block; }
#soc li { display:block; }
#soc a { display:flex; align-items:center; }
#soc img { width:2em; height:2em; margin-right:0.5em; }

#banner {}
#banner > .items {}
#banner > .items > .item {}
#banner > .items > .item > a {  }
#banner > .items > .item > a > img { width:240px; }

/* === Layout - Main Section === */

/* Nothing here yet! */

/* === Gallery === */

.gallery .thumbs { display:flex; flex-wrap:wrap; }
.gallery .thumbs .col { flex:100%; max-width:100%; }
.gallery .thumbs .col a { pointer-events:none; }
.gallery .thumbs .col img { margin-bottom:0.5em; vertical-align:middle; width:100%; }

/* === Contact Form === */

.contact-form {  }
.contact-form .send { display:flex; align-items:center; }
.contact-form .send-btn { margin-right:1em; }

/* === Tutorial Listings - On tutorials index === */

#tutorial-listings { border-top:solid 1px rgb(182,182,182); padding-top:0.5em; margin-bottom:1em; }
.tutorial-listing { display:flex; flex-direction:row; text-decoration:none; color:black; padding-bottom:0.5em; border-bottom:solid 1px rgb(182,182,182); margin-bottom:0.5em; }
.tutorial-listing-left { display:flex; align-items:center; justify-content:center; margin-right:0.5em; }
.tutorial-listing-thumb { max-width:128px; }
.tutorial-listing-right { flex:1; display:flex; align-items:center; justify-content:flex-start; margin-left:0.5em; }
.tutorial-listing-heading { color:rgb(103,111,171); text-decoration:underline; margin-bottom:1em; }

/* === Quick Tip Listings - On quick tip tutorial pages === */

.quick-tip-link { display:flex; margin-bottom:1em; border:solid 1px rgb(200,200,200); padding:0.5em 0.65em; border-radius:0.5em; box-shadow: 3px 3px 8px #888888; color:black; text-decoration:none; }
.quick-tip-left { display:flex; align-items:center; width:9.5em; padding-right:0.5em; }
.quick-tip-img { border-radius:0.5em; }
.quick-tip-right { flex:1; display:flex; align-items:center; padding-left:0.5em; }
.quick-tip-title { color:rgb(103,111,171); text-decoration:underline; margin-bottom:1em; }

/* === Disqus === */

.swp-disqus { display:none; }

/* === Shop === */

.shop { }

.shop .shop-item { margin-bottom:1em; }
.shop .shop-item:last-child { margin-bottom:0; }

.shop .shop-item .title { margin-bottom:1em; }
.shop .shop-item .title h2 { text-transform:uppercase; font-size:1.5em; font-weight:normal; }

.shop .shop-item .image { margin-bottom:1em; text-align:center; }

.shop .shop-item .info .price { margin-bottom:1em; }

.shop .shop-item .info .description { margin-bottom:1em; font-size:0.9em; }

@media (min-width: 601px)
{
    .shop .shop-item .image-info { display:flex; }
    .shop .shop-item .image-info .image { flex:1; margin-right:0.5em; max-width:15rem; }
    .shop .shop-item .image-info .info { flex:1; margin-left:0.5em; }
}

/* === Cart box === */

.cartbox { position:fixed; width:100%; max-width:20em; bottom:0; right:0; z-index:1001; padding:0.5em; } /* 1001 puts it over the top of the header element */

/* Actual box with rounded corners */
.cartbox > a { display:flex; align-items:center; background:rgb(0,0,0); padding:1em 1.5em; border-radius:2em; margin-left:auto; cursor:pointer; color:rgb(255,255,255); text-decoration:none; }
.cartbox > a:hover { background:rgb(128,128,128); }
.cartbox > a .icon img { width:20px; height:20px; }
.cartbox > a .items { margin-left:1em; margin-right:1em; flex:1; }

/* === Cart === */

.cart table { font-size:0.8em; }
.cart table { width:100%; border:solid 1px lightgrey; border-collapse:collapse; margin-bottom:1em; }
.cart table td { border:solid 1px lightgrey; padding:0.5em; }

.cart table td.options {}
.cart table td.options input[type=button] { width:auto; }

.cart table td.image {}
.cart table td.image img { max-width:6em; }

.cart table td.name { width:100%; }

.cart table td.price {}

@media (min-width: 601px)
{
    .cart table { font-size:1em; }
}

/* === About Page === */

.about { max-width:500px; }
.about h1 { margin-bottom:2em; }
.coming-soon { display:inline-block; }
.coming-soon h1 { margin-bottom:2em; }
.coming-soon p { text-align:center; font-size:4em; }

/* === Blog Page === */

.blog { text-align:center; }
.blog .top h1 {  }
.blog .top p { margin-bottom:1em; }
.blog .listing { margin-bottom:2em; }
.blog .listing:last-child { margin-bottom:0; }
.blog .listing .date { color:rgb(128,128,128); font-size:0.9em; }

/* === Blog Entry Page === */

.blog-entry .info { margin-bottom:1em; }
.blog-entry .info h1 { margin-bottom:0.1em; }
.blog-entry .info .date { color:rgb(128,128,128); font-size:0.9em; }
.blog-entry .content { margin-bottom:1em; }
.blog-entry .swp-disqus input[type=button] { margin-right:0em; }

/* === Discounts Page === */

.pg-discounts {  }

.pg-discounts .section { margin-bottom:2em; }
.pg-discounts .section:last-child { margin-bottom:0; }
.pg-discounts .section-even { background:rgb(160,160,160); color:rgb(255,255,255); padding:0.5em; }
.pg-discounts .section-inner { margin:0 auto; max-width:900px; }
.pg-discounts .section h1 { text-align:center; }
.pg-discounts .section .two-col { margin-bottom:1em; }
.pg-discounts .section .two-col .left { margin-bottom:1em; }
.pg-discounts .section .buy { text-align:center; }
.pg-discounts .section .buy p { margin-bottom:0.2em; }
.pg-discounts .section .buy a { font-weight:bold; color:red; }
.pg-discounts .section .most { margin-top:1em; font-size:1.25em; }

/* === responsive.js classes (see js/responsive.js === */

.responsive-src { border:solid 1px pink; }
.responsive-dst { border:solid 1px pink; }

/* === Desktop Changes === */
   
@media (min-width: 601px)
{
    body { padding:0; }
    header { position:fixed; left:0; top:0; bottom:0; right:auto; display:flex; padding:0; margin:0; flex-direction:column; justify-content:flex-start; width:18em; max-height:100%; }
    
    #site-title-menu-toggle { display:block; border-bottom:0; padding:2em 2em 0 2em; margin-bottom:2em; }
        #menu-toggle { display:none; }
    nav, nav#nav-off-mobile { flex:1; display:flex; flex-direction:column; border-bottom:0; text-align:left; padding:0; }
        #nav { margin-bottom:2em; padding:0 0.5em 0 0.5em; }
            nav li a { padding-left:1.5em; }
            #nav-active { background-image:url(../img/next.jpg); background-size:auto 90%; background-repeat:no-repeat; background-position:left center; }
            #nav-active a { font-weight:normal; }
        #soc { margin-bottom:2em; padding:0 0.5em 0 0.5em; }
        div#banner { margin:0; margin-bottom:2em; text-align:center; flex:1; }
    
    main { margin-left:18em; padding:2em 2em 2em 0; }
    
    .content-left-align {}
    .content-center { margin:0 auto; max-width:900px; }
    
    /* === Gallery === */
    
    /* --- Thumbs --- */
    
    .gallery .thumbs .col { flex:33.33%; max-width:33.33%; padding:0 0.25em; }
    .gallery .thumbs .col:first-child { padding-left:0; }
    .gallery .thumbs .col:last-child { padding-right:0; }
    .gallery .thumbs .col img { width:100%; }
    .gallery .thumbs .col a { pointer-events:auto; }
    
    /* --- Gallery - View Image --- */

    .gallery .view { z-index:1000; position:fixed; left:0; top:0; right:0; bottom:0;display:flex; flex-direction:column; background:white; padding:1em; }

    .gallery .view .img { flex:1; position:relative; }
    .gallery .view .img-inner { position:absolute; top:0; right:0; left:0; bottom:0; display:flex; align-items:center; justify-content:center; }
    .gallery .view .img-inner img { width:100%; height:100%; }
    
    .gallery .view .controls { position:relative; display:flex; justify-content:center; margin-top:1em; }
    .gallery .view .controls a { display:inline-block; width:2em; height:2em; background-position:center; background-size:100% 100%; color:transparent; cursor:pointer; outline:0; }
    .gallery .view .controls a.prev-btn { background-image:url(../img/prev.jpg); margin-right:2em; }
    .gallery .view .controls a.next-btn { background-image:url(../img/next.jpg); margin-right:2.6em; }
    .gallery .view .controls a.x-btn { background-image:url(../img/exit.jpg); }
    
    /* === Discounts Page === */
    
    .pg-discounts {  }
    
    .pg-discounts .section h1 { font-size:2em; }
    .pg-discounts .section .two-col { display:flex; }
    .pg-discounts .section .two-col .left { width:50%; margin:0; padding-right:0.5em; display:flex; justify-content:center; align-items:center; }
    .pg-discounts .section .two-col .right { width:50%; margin:0; padding-left:0.5em; display:flex; justify-content:center; align-items:center; }
    .pg-discounts .section .buy p { font-size:2em; }
    .pg-discounts .section .buy a { font-weight:normal; }
}

/* ==============
   Closing Styles
   ============== */

*:last-child { margin-bottom:0; }