/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/
/* Table of Contents
==================================================
    #JC Stuff
	#Base 960 Grid
    #Tablet (Portrait)
    #Mobile (Portrait)
    #Mobile (Landscape)
    #Clearing */
/* #JC Stuff
================================================== */
#header {
    background: #DDD;
    padding: 10px;
    margin: 0 -10px
    }
.hed {
    padding: 10px 0;
    margin: 0
    }
#logox {
    position: relative;
    margin: 0;
    padding: 0
    }
#logox img {
    max-width: 100%;
    height: auto
    }
.soknet {
    padding-top: 10px
    }
#navlist {
    margin: 0;
    padding: 5px;
    white-space: normal
    }
#navlist li {
    display: inline;
    list-style-type: none;
    padding: 0 5px;
    border-right: 1px solid white
    }
#navlist li.last {
    border-right: none
    }
#blackstripe {
    background-color: #670108;
    color: #eee
    }
#blackstripe a {
    color: #eee
    }
#blackstripe a:hover {
    color: #fff
    }
#nextbit img {
    width: 100%;
    max-width: 100%;
    height: auto
    }
.cart-summary {
    float: right;
    margin-top: 5px;
    padding-right: 10px
    }
.cart-summary a {
    text-decoration: none
    }
.textleft {
    text-align: left
    }
.sbsec {
    font-size: 75%;
    text-align: center
    }
.undred img {
    max-height: 100%;
    max-width: 100%;
    height: auto
    }
.pic img {
    width: 100%;
    max-width: 100%;
    height: auto
    }
.picninety img {
    width: 90%;
    max-width: 90%;
    height: auto
    }
.ninetyfive img {
    width: 95%;
    max-width: 95%;
    height: auto
    }
.ninetyfivebsl img {
    max-width: 95%;
    height: auto;
    max-height: 150px
    }
.ninetyfivebsl {
    text-align: center
    }
.ninetyfivex img {
    max-width: 95%;
    height: auto
    }
.panel {
    display: none;
    width: 220px;
    padding: 20px;
    background-color: #333;
    color: #fff;
    border: 1px solid #333;
    box-shadow: inset 0 0 5px 5px #222;
    outline: 1px solid transparent;
    overflow: scroll
    }
a.shb {
    display: block;
    outline: none;
    cursor: pointer;
    width: 65px;
    height: 20px;
    border: none;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin: 0;
    padding: 4px 0;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.5), 0 0 1px 1px rgba(255, 255, 255, 0.8), 0 0 0 6px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(0, 0, 0, 0.1);
    font-weight: bold;
    text-decoration: none;
    background-color: #e1e1e1;
    float: left
    }
.nameheight {
    height: 63px;
    min-height: 63px
    }
.nameheightnp {
    height: 100px;
    min-height: 100px
    }
.boxformatsec {
    border: 1px solid #c0c0c0;
    padding: 5px 0;
    margin: 0;
    text-align: center
    }
.boxformatsec img {
    max-height: 100px !important
    }
.boxformatrvp {
    border: 1px solid #c0c0c0;
    padding: 5px 0
    }
.boxformatrvp img {
    max-height: 65px !important;
    max-width: 100%
    }
/*** SUPERFISH ***/
/*** ESSENTIAL STYLES ***#015656 #009999*/
.sf-menu, .sf-menu * {
    margin: 0;
    padding: 0;
    list-style: none
    }
.sf-menu li {
    position: relative
    }
.sf-menu ul {
    position: absolute;
    display: none;
    top: 100%;
    left: 0;
    z-index: 99
    }
.sf-menu > li {
    float: left
    }
.sf-menu li:hover > ul, .sf-menu li.sfHover > ul {
    display: block
    }
.sf-menu a {
    display: block;
    position: relative
    }
.sf-menu ul ul {
    top: 0;
    left: 100%
    }
/*** DEMO SKIN ***/
.sf-menu {
    float: left;
    margin-bottom: 1em
    }
.sf-menu ul {
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
    min-width: 12em;
    /* allow long menu items to determine submenu width */
    /* no auto sub width for IE7, see white-space comment below */
    }
.sf-menu a {
    border-left: 1px solid #fff;
    border-top: 1px solid #670108;
    /* fallback colour must use full shorthand */
    border-top: 1px solid rgba(103, 1, 8, 0.5);
    padding: 0.75em 1em;
    text-decoration: none;
    zoom: 1;
    /* IE7 */
    color: #670108 !important
    }
.sf-menu a:hover {
    color: #B2010E
    }
.sf-menu ul li a {
    color: #015656 !important
    }
.sf-menu ul li a:hover {
    color: #B2010E
    }
.sf-menu ul ul li a {
    color: #670108
    }
.sf-menu ul ul li a:hover {
    color: #B2010E
    }
.sf-menu li {
    background: #C6B887;
    white-space: normal;
    /* no need for Supersubs plugin */
    /* ...unless you support IE7 (let it wrap) */
    -webkit-transition: background 0.2s;
    transition: background 0.2s
    }
.sf-menu ul li {
    background: #DED6BA
    }
.sf-menu ul ul li {
    background: #EEEADC
    }
.sf-menu li:hover, .sf-menu li.sfHover {
    background: #CEC298;
    /* only transition out, not in */
    -webkit-transition: none;
    transition: none
    }
/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
    padding-right: 2.5em;
    /* no CSS arrows for IE7 (lack pseudo-elements) */
    }
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1em;
    margin-top: -3px;
    height: 0;
    width: 0;
    /* order of following 3 rules important for fallbacks to work */
    border: 5px solid transparent;
    border-top-color: #dFeEFF;
    /* edit this to suit design (no rgba in IE8) */
    border-top-color: rgba(255, 255, 255, 0.5)
    }
.sf-arrows > li > .sf-with-ul:focus:after, .sf-arrows > li:hover > .sf-with-ul:after, .sf-arrows > .sfHover > .sf-with-ul:after {
    border-top-color: white;
    /* IE8 fallback colour */
    }
/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
    margin-top: -5px;
    margin-right: -3px;
    border-color: transparent;
    border-left-color: #dFeEFF;
    /* edit this to suit design (no rgba in IE8) */
    border-left-color: rgba(255, 255, 255, 0.5)
    }
.sf-arrows ul li > .sf-with-ul:focus:after, .sf-arrows ul li:hover > .sf-with-ul:after, .sf-arrows ul .sfHover > .sf-with-ul:after {
    border-left-color: white
    }
/*** Vertical ***/
/* adding sf-vertical class in addition to sf-menu creates a vertical menu */
/* eg. <ul class="sf-menu sf-vertical"> ... */
.sf-vertical {
    width: 100%;
    /* If you want the width of the closed menu to expand to its
      widest top-level menu item (like its "Supersubs" submenus do),
      replace the width rule above with the following two rules. */
    /*
      min-width: 12em;
      *width: 12em;
      */
    }
.sf-vertical ul {
    left: 100%;
    top: 0
    }
.sf-vertical > li {
    float: none
    }
.sf-vertical li {
    width: 100%
    }
/*** alter arrow directions ***/
.sf-vertical.sf-arrows > li > .sf-with-ul:after {
    margin-top: -5px;
    margin-right: -3px;
    border-color: transparent;
    border-left-color: #dFeEFF;
    /* edit this to suit design (no rgba in IE8) */
    border-left-color: rgba(255, 255, 255, 0.5)
    }
.sf-vertical.sf-arrows li > .sf-with-ul:focus:after, .sf-vertical.sf-arrows li:hover > .sf-with-ul:after, .sf-vertical.sf-arrows .sfHover > .sf-with-ul:after {
    border-left-color: white
    }
#helloworld {
    display: none;
    z-index: 10000;
    text-align: left;
    background-color: #C6AB87
    }
#byeworld {
    display: block
    }
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .fancybox-image {
        width: 768px
        }
    }
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .fancybox-image {
        width: 420px
        }
    }
@media only screen and (max-width: 767px) {
    .fancybox-image {
        width: 300px
        }
    }
/* ### Normal ### */
.bworld {
    display: block
    }
.hworld {
    display: none
    }
/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait) {
    .bworld {
        display: none
        }
    .hworld {
        display: block
        }
    #navlist {
        font-size: 80%
        }
    .nameheight, .nameheightnp {
        height: auto;
        min-height: 20px
        }
    }
/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape) {
    .bworld {
        display: none
        }
    .hworld {
        display: block
        }
    #navlist, .cart-summary {
        font-size: 80%
        }
    .nameheight, .nameheightnp {
        height: auto;
        min-height: 20px
        }
    }
/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px) {
    .bworld {
        display: none
        }
    .hworld {
        display: block
        }
    #navlist, .cart-summary {
        font-size: 80%
        }
    .nameheight, .nameheightnp {
        height: auto;
        min-height: 20px
        }
    }
/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
    .bworld {
        display: none
        }
    .hworld {
        display: block
        }
    #navlist, .cart-summary {
        font-size: 80%
        }
    .nameheight, .nameheightnp {
        height: auto;
        min-height: 20px
        }
    }
/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .bworld {
        display: block
        }
    .hworld {
        display: none
        }
    #navlist, .cart-summary {
        font-size: 100%
        }
    }
/*=== New iPhone Stuff ===*/
/* Sort of new catch all */
@media screen and (max-device-width: 414px) {
    .bworld {
        display: none
        }
    .hworld {
        display: block
        }
    #navlist, .cart-summary {
        font-size: 80%
        }
    .nameheight, .nameheightnp {
        height: auto;
        min-height: 20px
        }
    div.sh {
        display: none
        }
    #helloworld {
        display: block
        }
    #byeworld {
        display: none
        }
    .sticky-nav {
        width: 100%;
        margin: 0 auto;
        height: 40px
        }
    .sticky-nav.stuck {
        position: fixed;
        top: 0;
        height: 40px;
        width: 100%
        }
    }
/*– iPhone 5, iPod Touch 5Gen–*/
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 1136px) {
    .bworld {
        display: none
        }
    .hworld {
        display: block
        }
    #navlist, .cart-summary {
        font-size: 80%
        }
    .nameheight, .nameheightnp {
        height: auto;
        min-height: 20px
        }
    div.sh {
        display: none
        }
    #helloworld {
        display: block
        }
    #byeworld {
        display: none
        }
    .sticky-nav {
        width: 100%;
        margin: 0 auto;
        height: 40px
        }
    .sticky-nav.stuck {
        position: fixed;
        top: 0;
        height: 40px;
        width: 100%
        }
    }
/*– iPhone 5, iPod Touch 5Gen–*/
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 1136px) and (orientation: landscape) {
    .bworld {
        display: none
        }
    .hworld {
        display: block
        }
    #navlist, .cart-summary {
        font-size: 80%
        }
    .nameheight, .nameheightnp {
        height: auto;
        min-height: 20px
        }
    div.sh {
        display: none
        }
    #helloworld {
        display: block
        }
    #byeworld {
        display: none
        }
    .sticky-nav {
        width: 100%;
        margin: 0 auto;
        height: 40px
        }
    .sticky-nav.stuck {
        position: fixed;
        top: 0;
        height: 40px;
        width: 100%
        }
    }
/*– iPhone 4, 4S, 5, iPod Touch 4Gen, 5Gen–*/
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 640px) and (orientation: portrait) {
    .bworld {
        display: none
        }
    .hworld {
        display: block
        }
    #navlist, .cart-summary {
        font-size: 80%
        }
    .nameheight, .nameheightnp {
        height: auto;
        min-height: 20px
        }
    div.sh {
        display: none
        }
    #helloworld {
        display: block
        }
    #byeworld {
        display: none
        }
    .sticky-nav {
        width: 100%;
        margin: 0 auto;
        height: 40px
        }
    .sticky-nav.stuck {
        position: fixed;
        top: 0;
        height: 40px;
        width: 100%
        }
    }
/*iPhone 6 (Standard View) and iPhone 6 Plus (Zoom View):*/
@media screen and (max-device-width: 375px) and (max-device-height: 667px) {
    .bworld {
        display: none
        }
    .hworld {
        display: block
        }
    #navlist, .cart-summary {
        font-size: 80%
        }
    .nameheight, .nameheightnp {
        height: auto;
        min-height: 20px
        }
    div.sh {
        display: none
        }
    #helloworld {
        display: block
        }
    #byeworld {
        display: none
        }
    .sticky-nav {
        width: 100%;
        margin: 0 auto;
        height: 40px
        }
    .sticky-nav.stuck {
        position: fixed;
        top: 0;
        height: 40px;
        width: 100%
        }
    }
/*iPhone 6 Plus (Standard View):*/
@media screen and (max-device-width: 414px) and (max-device-height: 776px) {
    .bworld {
        display: none
        }
    .hworld {
        display: block
        }
    #navlist, .cart-summary {
        font-size: 80%
        }
    .nameheight, .nameheightnp {
        height: auto;
        min-height: 20px
        }
    div.sh {
        display: none
        }
    #helloworld {
        display: block
        }
    #byeworld {
        display: none
        }
    .sticky-nav {
        width: 100%;
        margin: 0 auto;
        height: 40px
        }
    .sticky-nav.stuck {
        position: fixed;
        top: 0;
        height: 40px;
        width: 100%
        }
    }
/*iPhone 6 (Zoom View):*/
@media screen and (max-device-width: 320px) and (max-device-height: 568px) {
    .bworld {
        display: none
        }
    .hworld {
        display: block
        }
    #navlist, .cart-summary {
        font-size: 80%
        }
    .nameheight, .nameheightnp {
        height: auto;
        min-height: 20px
        }
    div.sh {
        display: none
        }
    #helloworld {
        display: block
        }
    #byeworld {
        display: none
        }
    .sticky-nav {
        width: 100%;
        margin: 0 auto;
        height: 40px
        }
    .sticky-nav.stuck {
        position: fixed;
        top: 0;
        height: 40px;
        width: 100%
        }
    }
/*=== New iPhone Stuff ENDS ===*/
/* #### Desktops #### */
@media screen and (min-width: 1024px) {
    .bworld {
        display: block
        }
    .hworld {
        display: none
        }
    #navlist, .cart-summary {
        font-size: 100%
        }
    }
/* #Base 960 Grid
================================================== */
.container {
    position: relative;
    width: 960px;
    margin: 0 auto;
    padding: 0;
    background: #fff;
    border: 1px solid #fff
    }
.container .column, .container .columns {
    float: left;
    display: inline;
    margin-left: 10px;
    margin-right: 10px
    }
.row {
    margin-bottom: 20px
    }
/* Nested Column Classes */
.column.alpha, .columns.alpha {
    margin-left: 0
    }
.column.omega, .columns.omega {
    margin-right: 0
    }
.column.nuffink, .columns.nuffink {
    margin: 0;
    padding: 0
    }
.column.minus, .columns.minus {
    margin: 0 -10px;
    padding: 0
    }
.column.upsilon, .columns.upsilon {
    margin: 0 -10px 0 0;
    padding: 0
    }
.columns.nobottom {
    margin-bottom: -1em
    }
/* Base Grid */
.container .one.column, .container .one.columns {
    width: 40px
    }
.container .two.columns {
    width: 100px
    }
.container .three.columns {
    width: 160px
    }
.container .tweighty {
    width: 160px
    }
.container .four.columns {
    width: 220px
    }
.container .five.columns {
    width: 280px
    }
.container .six.columns {
    width: 340px
    }
.container .seven.columns {
    width: 400px
    }
.container .eight.columns {
    width: 460px
    }
.container .nine.columns {
    width: 520px
    }
.container .ten.columns {
    width: 580px
    }
.container .eleven.columns {
    width: 640px
    }
.container .twelve.columns {
    width: 700px
    }
.container .thirteen.columns {
    width: 760px
    }
.container .fourteen.columns {
    width: 820px
    }
.container .fifteen.columns {
    width: 880px
    }
.container .sixteen.columns {
    width: 940px
    }
.container .one-third.column {
    width: 300px
    }
.container .two-thirds.column {
    width: 620px
    }
/* Offsets */
.container .offset-by-one {
    padding-left: 60px
    }
.container .offset-by-two {
    padding-left: 120px
    }
.container .offset-by-three {
    padding-left: 180px
    }
.container .offset-by-four {
    padding-left: 240px
    }
.container .offset-by-five {
    padding-left: 300px
    }
.container .offset-by-six {
    padding-left: 360px
    }
.container .offset-by-seven {
    padding-left: 420px
    }
.container .offset-by-eight {
    padding-left: 480px
    }
.container .offset-by-nine {
    padding-left: 540px
    }
.container .offset-by-ten {
    padding-left: 600px
    }
.container .offset-by-eleven {
    padding-left: 660px
    }
.container .offset-by-twelve {
    padding-left: 720px
    }
.container .offset-by-thirteen {
    padding-left: 780px
    }
.container .offset-by-fourteen {
    padding-left: 840px
    }
.container .offset-by-fifteen {
    padding-left: 900px
    }
/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .container {
        width: 768px
        }
    .container .column, .container .columns {
        margin-left: 10px;
        margin-right: 10px
        }
    .column.alpha, .columns.alpha {
        margin-left: 0;
        margin-right: 10px
        }
    .column.omega, .columns.omega {
        margin-right: 0;
        margin-left: 10px
        }
    .alpha.omega {
        margin-left: 0;
        margin-right: 0
        }
    .column.nuffink, .columns.nuffink {
        margin: 0;
        padding: 0
        }
    .column.upsilon, .columns.upsilon {
        margin: 0 -10px 0 0;
        padding: 0
        }
    .column.minus, .columns.minus {
        margin: 0 -10px;
        padding: 0
        }
    .columns.nobottom {
        margin-bottom: -1em
        }
    .container .one.column, .container .one.columns {
        width: 28px
        }
    .container .two.columns {
        width: 76px
        }
    .container .three.columns {
        width: 124px
        }
    .container .tweighty {
        width: 124px
        }
    .container .four.columns {
        width: 172px
        }
    .container .five.columns {
        width: 220px
        }
    .container .six.columns {
        width: 268px
        }
    .container .seven.columns {
        width: 316px
        }
    .container .eight.columns {
        width: 364px
        }
    .container .nine.columns {
        width: 412px
        }
    .container .ten.columns {
        width: 460px
        }
    .container .eleven.columns {
        width: 508px
        }
    .container .twelve.columns {
        width: 556px
        }
    .container .thirteen.columns {
        width: 604px
        }
    .container .fourteen.columns {
        width: 652px
        }
    .container .fifteen.columns {
        width: 700px
        }
    .container .sixteen.columns {
        width: 748px
        }
    .container .one-third.column {
        width: 236px
        }
    .container .two-thirds.column {
        width: 492px
        }
    /* Offsets */
    .container .offset-by-one {
        padding-left: 48px
        }
    .container .offset-by-two {
        padding-left: 96px
        }
    .container .offset-by-three {
        padding-left: 144px
        }
    .container .offset-by-four {
        padding-left: 192px
        }
    .container .offset-by-five {
        padding-left: 240px
        }
    .container .offset-by-six {
        padding-left: 288px
        }
    .container .offset-by-seven {
        padding-left: 336px
        }
    .container .offset-by-eight {
        padding-left: 384px
        }
    .container .offset-by-nine {
        padding-left: 432px
        }
    .container .offset-by-ten {
        padding-left: 480px
        }
    .container .offset-by-eleven {
        padding-left: 528px
        }
    .container .offset-by-twelve {
        padding-left: 576px
        }
    .container .offset-by-thirteen {
        padding-left: 624px
        }
    .container .offset-by-fourteen {
        padding-left: 672px
        }
    .container .offset-by-fifteen {
        padding-left: 720px
        }
    }
/*  #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
    .container {
        width: 300px;
        border: 0
        }
    .container .columns, .container .column {
        margin: 0
        }
    .column.upsilon, .columns.upsilon {
        margin: 0 -10px 0 0;
        padding: 0
        }
    .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column {
        width: 300px
        }
    .container .tweighty {
        width: 280px;
        padding-left: 10px
        }
    /* Offsets */
    .container .offset-by-one, .container .offset-by-two, .container .offset-by-three, .container .offset-by-four, .container .offset-by-five, .container .offset-by-six, .container .offset-by-seven, .container .offset-by-eight, .container .offset-by-nine, .container .offset-by-ten, .container .offset-by-eleven, .container .offset-by-twelve, .container .offset-by-thirteen, .container .offset-by-fourteen, .container .offset-by-fifteen {
        padding-left: 0
        }
    }
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .container {
        width: 420px;
        border: 0
        }
    .container .columns, .container .column {
        margin: 0
        }
    .column.upsilon, .columns.upsilon {
        margin: 0 -10px 0 0;
        padding: 0
        }
    .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column {
        width: 420px
        }
    .container .tweighty {
        width: 400px;
        padding-left: 10px
        }
    }
/* #Clearing
================================================== */
/* Self Clearing Goodness */
.container:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
    }
/* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
.clearfix:before, .clearfix:after, .row:before, .row:after {
    content: " ";
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0
    }
.row:after, .clearfix:after {
    clear: both
    }
.row, .clearfix {
    zoom: 1
    }
/* You can also use a <br class="clear" /> to clear columns */
.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0
    }
.centre {
    text-align: center
    }