body, html {
    margin: 0;
    padding:0;
    font-family:helvetica;
    font-size: 1em;
    line-height: 1.4;
    color:#444;
    background: #fff;
}
#main{padding:10px;font-family:inherit;}
figure {
    margin: 0;
}
select:focus{ outline:none; }
/* prevent zooming in iphone: */
input[type='text'],input[type='number'],textarea, select {font-size:16px;}

@media
only screen and (max-width: 640px),
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px), /* bug fix */
only screen and (   -moz-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px)
{




    #menu_wrapper{
        display:block;
        z-index: 100;
        position: relative;
        font-family:helvetica;
    }

    #menu_bar_wrapper{

        position: relative;
        margin-left:-3px; /*  removes the drop shadow gap */
        padding: 7px 8px 10px 12px;    
        height: 55px;
        z-index: 100;
        
        border-top:1px solid #444;
        border-bottom:1px solid #444;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(80%,rgba(255,255,255,1)), color-stop(100%,rgba(242, 242, 242, 1)));
        background: -webkit-linear-gradient(top, rgba(255,255,255,1) 80%,rgba(242, 242, 242, 1) 100%);
        background: -moz-linear-gradient(top, rgba(255,255,255,1) 80%,rgba(242, 242, 242, 1) 100%);
-webkit-box-shadow:3px 3px 3px rgba(0, 0, 0, .1);
   -moz-box-shadow:3px 3px 3px rgba(0, 0, 0, .1);
        box-shadow:3px 3px 3px rgba(0, 0, 0, .1);
        
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
-webkit-text-size-adjust: none;
        
        font-family: helvetica;
        font-size: 16px;
        line-height: 42px;
        color:#787878;
        text-shadow: 1px 1px 1px #f6f6f6;
        
    }

    .menu_bar{
        overflow:hidden;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }

    .bar-left, .bar-center{
        float:left;
    }
    .bar-center{
        margin-left: 10px;
    }
    .bar-right{
        float:right;
    }
    .menu_bar > div > div{
        float:left;
        margin-left:5px;
    }

    .btn{

        background-color: #9ad41f;
        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.6)), color-stop(0.49, rgba(255, 255, 255, 0.3)), color-stop(0.51, rgba(255, 255, 255, 0.0)), to(rgba(255, 255, 255, 0.2)));
        background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%);
        background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%);
        background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%);
        background-image: linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%);

-webkit-border-radius: 4px;
   -moz-border-radius: 4px;
        border-radius: 4px;
        height:40px;
        text-align: center;

        padding:0 9px;
        font-size: 14px;
        text-shadow: none;
        color:white;
        font-weight:bold;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        
        min-width:20px;    

    }
    .btn.open, 
    .btn.openAndroid{
        background-color: #9ad41f;
        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255, 0.6)));
        background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.6) 100%);
        background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.6) 100%);
        background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.6) 100%);
        background-image: linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.6) 100%);
    }

    .menu_icon{
    }
    .menu_icon:before{
        content:'\2261';
/*        content:'\2605';*/
        font-weight:100;
        font-family:arial;
        font-size:22px;
        line-height:42px;
    }

    .back_icon:before{
        content: '\25C0';
        font-weight:500;
        font-family:arial;
        font-size: 15px;
        line-height: 37px;
    }

    .search_icon{
        padding: 10px;
        background: url(../images/search-icon.png) center center no-repeat;
        background-size: 24px 40px;
    }

    .search_icon:before{
    }
    
    .love_icon:before{
        content: '\2665';
        line-height: 40px;
        font-size: 20px;
        font-family: georgia;
    }
    

    .bar_title{
        font-size: 13px;
        white-space: nowrap;
        float: left;
        margin: 0;
        padding: 0;
    }

        

        /* flip */

    #nav_outer {
        background-color:black;
        position: relative;
        height: 0;

        overflow:hidden;

-webkit-transition: all .5s ease;
   -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
     -o-transition: all .5s ease;
        transition: all .5s ease;
-webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
     -o-transform-style: preserve-3d;
        transform-style: preserve-3d;


-webkit-perspective: 800px;
   -moz-perspective: 800px;
    -ms-perspective: 800px;
     -o-perspective: 800px;
        perspective: 800px;


        background-image: url(../images/Skulls_and_Crossbones_pink.png);
        background-size:contain;
        background-repeat: no-repeat;
        background-position: 50%;
    }
    #nav_outer.open,
    #nav_outer.openAndroid{

        height:345px;
        
    }

    #nav_inner{
        display:block;
        width: 100%;
        height: 100%;
        position: absolute;
        
-webkit-transition: -webkit-transform .5s;
   -moz-transition: -moz-transform .5s;
    -ms-transition: -moz-transform .5s;
     -o-transition: -o-transform .5s;
        transition: transform .5s;
-webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
     -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
-webkit-transform-origin: right center;
   -moz-transform-origin: right center;
    -ms-transform-origin: right center;
     -o-transform-origin: right center;
        transform-origin: right center;
        }

    #nav_inner.open, 
    #nav_inner.openAndroid{
   -webkit-transform: translateX( -100% ) rotateY( -180deg );
      -moz-transform: translateX( -100% ) rotateY( -180deg );
       -ms-transform: translateX( -100% ) rotateY( -180deg );
        -o-transform: translateX( -100% ) rotateY( -180deg );
           transform: translateX( -100% ) rotateY( -180deg );
        }
        .col_1, .col_2{
                float:left;
                width:50%;
                padding:0;
                margin:0;
                list-style: none;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
            -ms-box-sizing: border-box;
         -o-box-sizing: border-box;
                box-sizing: border-box;
                }
        .col_2{
                border-left:1px solid #aaa;
                }

        #nav_inner .col_1 li,
        #nav_inner .col_2 li{
            border-bottom:1px solid #ccc;

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
            padding:10px;
            display:block;

        }
        #nav_inner .col_1 li + li,
        #nav_inner .col_2 li + li{
            border-top:1px solid #fff;
        }


        #nav_inner .col_1 li:hover,
        #nav_inner .col_2 li:hover{
    /*        border-top:1px solid #333;*/
            background-color: #333;
        }


        #nav_inner .col_1 li a,
        #nav_inner .col_2 li a{
            color:#555;
            text-decoration: none;
            font-size: 15px;
            font-weight:bold;
            text-shadow: 1px 1px 1px #fff;
            display:block;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
        }

        #nav_inner .col_1 li:hover a,
        #nav_inner .col_2 li:hover a{
            color: #fff;
            text-shadow: none;
        }
        #nav_outer figure {
            display: block;
            height: 100%;
            width: 100%;
            position: absolute;
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
         -o-backface-visibility: hidden;
            backface-visibility: hidden;
            }

        figure.front {
            background-color: #EEE;
            }

        figure.back {
            background-color:#999;
    -webkit-transform: rotateY( 180deg );
       -moz-transform: rotateY( 180deg );
        -ms-transform: rotateY( 180deg );
         -o-transform: rotateY( 180deg );
            transform: rotateY( 180deg );
            }
        figure.back ul{
                display:block;
                position:absolute;
                background-color:#999;
                height:100%;
                width:100%;
                margin:0;
                padding:0;
                list-style: none;
                left:0;
            }


        figure.back li{
            float: left;
            display:block;
            margin: 0;

            list-style: none;
            width: 50%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
            border-bottom: 1px solid #aaa;
        }
        #menu_wrapper figure.back li a{
            color:white;
            display: block;
            text-decoration: none;
            padding: 10px 15px;
            font-weight:bold;
        }
        figure.back li.even{
            clear:left;
            border-right:1px solid #aaa;
        }
        figure.back li.odd{
/*            border-left:1px solid #888;*/
        }
        figure.back li a:hover{
            background-color:#444;
        }

            
            .nav_btn{
                float: right;
                width: 44px;
                height: 41px;
                display: inline-block;
                background: #eee url(../images/icon-sprite.png) 100% -162px no-repeat;
                margin-top: -31px;
                margin-right:-10px;
                cursor: pointer;
                border-left:1px solid #ddd;
            }
            .nav_btn:hover{
                background-color:#444;
            /*    background-position: 100% -283px;*/
                background-position: 100% -192px;
            }

            #search_outer{
                background-color: #eee;
                display:block;
                position: relative;
                height: 0;
        
                overflow: hidden;
                
                padding:0;
        -webkit-transition: all .5s ease;
           -moz-transition: all .5s ease;
            -ms-transition: all .5s ease;
             -o-transition: all .5s ease;
                transition: all .5s ease;
        -webkit-transform-style: preserve-3d;
           -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
             -o-transform-style: preserve-3d;
                transform-style: preserve-3d;
            }
            #search_outer.open,
            #search_outer.openAndroid{
                height:55px;
                
                border-bottom: 1px solid #AAA;
            }

            #search_inner{
                padding:10px;
                overflow:hidden;
            }
            #search-field{
        -webkit-appearance: none;
        -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, .3);
           -moz-box-shadow: inset 0 0 4px rgba(0, 0, 0, .3);
                box-shadow: inset 0 0 4px rgba(0, 0, 0, .3);
                background-color: white;
                border: 1px solid #BBB;
        -webkit-border-radius: 3px;
           -moz-border-radius: 3px;
                border-radius: 3px;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
                width: 100%;
                padding: 8px;
                display: block;
                font-size: 16px;
                font-family: inherit;
                font-weight: normal;
            }

            #extra_outer {
                position: relative;
                height: 0;
        
                overflow: hidden;

        -webkit-transition: all .5s ease;
           -moz-transition: all .5s ease;
            -ms-transition: all .5s ease;
             -o-transition: all .5s ease;
                transition: all .5s ease;
        -webkit-transform-style: preserve-3d;
           -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
             -o-transform-style: preserve-3d;
                transform-style: preserve-3d;
                
                background-color: #444;
                color:white;
            }

            #extra_outer.open, 
            #extra_outer.openAndroid {
                height: 171px;
                
                border-bottom: 1px solid #AAA;
            }

            .extra_inner {
                display: block;
                width: 100%;
                height: 100%;
                position: absolute;
                padding: 10px;

        -webkit-transition: all .5s ease;
           -moz-transition: all .5s ease;
            -ms-transition: all .5s ease;
             -o-transition: all .5s ease;
                transition: all .5s ease;
        -webkit-transform-style: preserve-3d;
           -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
             -o-transform-style: preserve-3d;
                transform-style: preserve-3d;

                background-image: url(../images/old-spice.gif);
                background-size:contain;
                background-repeat: no-repeat;
                background-position: 50%;
            }



}