html {min-width: 321px;}

body {
    font-size: 100% ;
}

img {max-width: 100%;}

* {
    max-width: 100% ;
}


h1#header, div#small_header {
    height: 44px ;
    margin: 0px ;
    padding: 0px ;
    margin-left: 44px ;
}

div#large_header {
    display:none ;
}

div#small_header {
    display:block;
    width: 100% ;
    background-size: auto 44px ;
    background-repeat: no-repeat ;
  /*  left: 43px ; */
}

#devbanner {
    display: none ;
}

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

#cbar1, #cbar2, #cbar3, #leftbar, #rightbar, #content, #navigation,
        #navigation_links, #navigation li {
    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 ;
*/
}

#content {
    background: white
}

#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% ;
}

#navigation a {
    background: none ;
    width: auto ;
}

#navigation, #navigation ul, #navigation_links {
    height: auto ;
    padding: 0px ;
    margin: 0px ;
}

#navigation li {
    height: 25px ;
    text-align: center ;
}

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

#navigation li, #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 ;
}
*/

#navigation .navmore {
    display: none ;
}

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

/* unfloat 2col inside content areas */
.col2left, .col2right, .col2 {
    float: none ;
    width: 100% ;
}

/* 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: initial
}

.responsive-hide {
    display: none
}