@import url(lib/cleanslate.css);


/* Snoopy-specific CSS
============================================== */

#snpy {
    background: rgba(0,0,0,0.9) !important;
    color: #EEE !important;
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    margin: 1% !important;
    -webkit-border-radius: 6px !important;
    z-index: 2147483647 !important; /* maximum cross-browser z-index */
    max-width: 98% !important;
}

#snpy > div {
    margin: 0 10px !important;
}

#snpy.closed {
    display: none !important;
}

#snpy a:link,
#snpy a:visited,
#snpy a:hover,
#snpy a:active {
    color: #FFA800 !important;  
}

/* head */

#snpy .head {
    position: relative !important;
    padding: 12px 0 5px 0 !important;
}

#snpy h1 {
    font-size: 15px !important;
    font-weight: normal !important;
    margin-bottom: 10px !important;
    color: #FFF !important;
    position: relative !important;
    width: 70% !important;
    color: #FFA800 !important;
    font-family: Georgia, Palatino, 'Palatino Linotype', serif !important;
    padding-top: 2px !important;
}

#snpy h1 .version {
    font-family: Georgia, Palatino, 'Palatino Linotype', serif !important;
    color: #666 !important;
    font-size: 11px !important;
    margin-left: 5px !important;
}

#snpy .head .close {
    font-family: Helvetica, Arial, sans-serif !important;
    position: absolute !important;
    right: 0 !important;
    top: 12px !important;
    padding: 6px 10px !important;
    background: #555 !important;
    color: #999 !important;
    display: inline-block;
    -webkit-border-radius: 6px !important;
    font-size: 12px !important;
    text-decoration: none !important;
}

#snpy .head .close:hover,
#snpy .head .close:active {
    color: #FFA800 !important;
}

#snpy .head .close:before {
    content: "\2715 \00a0" !important;
}

/* platform/device specific tips */

#snpy .tip {
    font-size: 12px !important;
    font-style: italic !important;
    margin-bottom: 10px !important;
    font-family: Georgia, Palatino, 'Palatino Linotype', serif !important;
    color: #888 !important;
    display: none !important;
}

#snpy.MobileSafari .tip.MobileSafari {
    display: block !important;
}

/* tabs and panels */

#snpy .tabs li {
    display: inline-block !important;
}

#snpy .tabs a {
    display: inline-block !important;
    padding: 8px 10px !important;
    text-transform: lowercase !important;
    color: #777 !important;
}

#snpy .tabs a:hover {
    color: #FFF !important;
    text-decoration: none !important;
}

#snpy .tabs li.active a {
    background: #444 !important;
    color: #FFF !important;
}

#snpy .panel {
    background: #444 !important;
    padding: 10px !important;
    display: none !important;
}

#snpy .panel.active {
    display: block !important;
}

/* modules */

#snpy .module {
    margin-bottom: 10px !important;
    padding: 5px 0 0 0 !important;
    overflow: hidden;
}

#snpy .module.empty {
    display: none !important;
}

#snpy .module h2 {
    font-size: 14px !important;
    font-weight: normal !important;
    border-bottom: 1px solid #555 !important;
    padding-bottom: 6px !important;
    margin-bottom: 10px !important;
    color: #999 !important;
    position: relative !important;
    font-family: Georgia, Palatino, 'Palatino Linotype', serif !important;
    font-style: italic !important;
}

#snpy_overview {
    max-width: 300px !important;
}

/* test result lists */

#snpy .tests {
    overflow: hidden !important;
}

#snpy .tests li {
    margin-bottom: 2px !important;
    padding: 3px 5px !important;
    overflow: hidden !important;
}

#snpy .tests li:hover {
    background-color: #4F4F4F !important;
}

#snpy .tests li.negative {
    color: #888 !important;
    display: none !important;
}

#snpy .output_version .tests li.negative .test_for:before {
    content: "\2715 \00a0" !important;
}

#snpy .output_version .tests li.positive .test_for:before {
    content: "\2713 \00a0" !important;
}

#snpy p.no_results {
    color: #888 !important;
    margin-bottom: 8px !important;
}

#snpy p.no_results:before {
    content: "\2715 \00a0" !important;
}

#snpy .test_for {
    display: block !important;
    width: 50% !important;
    float: left !important;
}

#snpy .test_result {
    display: block !important;
    float: right !important;
    width: 48% !important;
    text-align: right !important;
}

#snpy .output_version .test_result.true:before {
    content: 'v' !important;
}

#snpy .true_no_detail {
    color: #888 !important;
}

/* source code viewers */

#snpy pre.source {
    background: #233143 !important;
    color: #9FBFDD !important;
    width: 98% !important;
    line-height: 1.3 !important;
    font-family: 'Bitstream Vera Sans Mono', 'Courier', monospace !important;
    overflow: auto !important;
    white-space: pre-wrap !important; 
    white-space: -moz-pre-wrap !important;
    padding: 10px 1% !important;
    display: block !important;
}

#snpy pre.source code {
    padding: 0 10px !important;
    white-space: pre-wrap !important; 
    white-space: -moz-pre-wrap !important;
    display: block !important; 
}

/* footer */

#snpy .footer {
    padding: 10px 0 12px 0 !important;
    font-size: 11px !important;
    color: #555 !important;
    text-transform: lowercase !important;
    font-family: Georgia, Palatino, 'Palatino Linotype', serif !important;
}

#snpy .footer a {
    color: #555 !important;
}

#snpy .footer a:hover {
    color: #888 !important;
}

/* Syntax hilight styles
============================================== */

#snpy .bracket   { color: #39DEFF !important; }
#snpy .tag       { color: #39DEFF !important; }
#snpy .attribute { color: #FFF !important; }
#snpy .value     { color: #0ECC1B !important; }
#snpy .comment   { color: #428BDD !important; }


/* Styles for mobile-optimised sites
============================================== */

/* TODO: lots of overlap here, need to implement this more efficiently... */

@media only screen and (max-width: 320px) {
    
    #snpy {
        width: 100% !important;
        margin: 0 !important;
    }
    
    #snpy h1 {
        margin-left: 10px !important;
    }
    
    #snpy > div {
        margin: 0 5px !important;
    }
    
    #snpy_overview {
        max-width: 300px !important;
    }
        
    #snpy pre.source code {
        width: auto !important;
        font-size: 12px !important;
    }
    
    #snpy .no320 {
        display: none !important;
    }
    
}

@media only screen and (max-width: 480px) {
    
    #snpy {
        width: 100% !important;
        margin: 0 !important;
    }
    
    #snpy h1 {
        margin-left: 10px !important;
    }
    
    #snpy > div {
        margin: 0 5px !important;
    }
    
    #snpy_overview {
        max-width: 460px !important;
    }
    
    #snpy pre.source code {
        width: auto !important;
        font-size: 11px !important;
    }
    
    #snpy .no480 {
        display: none !important;
    }
    
}

