html {min-width: 321px;}

img {max-width: 100%;}

#devbanner {
    display: none ;
}

#header {
    height: auto;
    padding: 0;
    width: 100%;
}

#navigation {
    position: static;
    width:100%;
    padding:0;
}

#logo {
    display: block;
    width: 100% ;
    float: none;
    height: 44px;
/*
    background-size: cover ;
*/

    background-size: auto 44px ;
    background-repeat: no-repeat ;
    background-position: 43px top;

/*
    margin-left: 43px ;
*/
}

#hpic {
    display: none
}

#container {
    min-width: 321px ;
    /* font-size: 125% ; */
}

#leftbar, #rightbar, #content {
    position: static ;
    float: none ;
    width: 100% ;
    left: 0px ;
    right: 0px ;
    top: 0px ;
    bottom: 0px ;
/*
    background: white ;
    position: absolute ;
    top: 50px ;
    top: -50px ;
    width: 80% ;
    z-index: 100 ;
    border-top: 1px solid black ;
    border-bottom: 1px solid black ;
*/
}

#leftbar {
    display: none ;
    border-bottom: 1px solid black ;
}

#rightbar {
    border-top: 1px solid black ;
}

/* redo the 3 bar layout, left bar is a left popup, right bar is a right
 * popup, container is 100% width now, we'll float and abs-position the
 * bars and hide them initially 
 *
 *  content-wide is the normal 2 col layout, it is missing if there is a
 * rightbar */
#container.content-wide #content, #content, #rightbar-background, #content-background, #leftbar-background {
    /* position: static ; */
    overflow: auto ;
    left: 0px ;
    right: 0px ;
    width: 100% ;
}

/* hide the vertical bars */
#navigation .navdivider {
    display: none ;
}

#navigation a, #responsive-search {
    display: block ;
    text-align: center ;
    font-weight: bold ;
    width: 100% ;
    border-bottom: 1px solid white ;
    padding-top: 5px ;
    padding-bottom: 5px ;
}

/* the left/right bars are popups in small device view */
/*
.pop-leftbar, .pop-navbar {
    display: inline ;
}
*/

.navmore, #navigation .navmore {
    display: none ;
}

.footer-department {
    width: 100%;
}

#footer-logo, #footer-warehouse {
    width: 100%;
}

/*
#footer-logo {
    max-width: 100%;
    height: auto;
}
*/

#generic-links {
    display: block;
    float:none;
    text-align: right;
    height: 50px;
}

/* orders/cart buttons */
.extra-button {
    display: block !important;
    width: 49% !important;
    float: left !important;
    margin: 0 auto !important;
    border-right: 0 !important;
}

/* un-fake float it in small view, see the main css for info */
#interface-bar .extra-button {
    position: inherit;
}

#interface-bar .extra-button span {
    display: inline;
    position: inherit;
    top:inherit;
    left:inherit;
    width:100%;
    border-left:none;
    border-right:none;
}

#leftbar-popper {
    display: block ;
    position: absolute ;
    top: 0px ;
    left: 0px ;
    background: url( '../image/menu.png' );
    background-color: #0d519a;
    background-size: cover ;
    width: 44px ;
    height: 44px ;
}

/* unfloat 2col inside content areas */
.col2-left, .col2-right, .col2, .col3-left, .col3-center, .col3-right, .col3 {
    float: none !important;
    width: 100% !important;
}

/* hide timestamp it wraps */
#timestamp {
    display: none ;
}

/* by default responsive-show are hidden, they show in small screen
 * mode.  The toggle stuff that gets hidden as a responsive-hide, which
 * would be extra info that doesn't need to show by default in responsive
 * mode */
.responsive-show {
    display: inherit;
    display: initial;
}

.responsive-hide {
    display: none !important
}

.form-2col label {
    width: 100%;
}