body {
    font-family: arial,helvetica,verdana,sans-serif ;
    font-size: 100% ;
    line-height: 1.3 ;
    padding: 0 ;
    margin: 0 ;
}

#container {
    background: white ;
    padding: 0 ;
    margin: 0 auto ;
    text-align: left ;
    width: 100% ;
    /* width: 960px ; */
    /* max-width: 1300px; */
    position: relative ;
    overflow: hidden ;
    /* border-left: 1px solid #bbbbbb ; */
    /* border-right: 1px solid #bbbbbb ; */
}

#content, #leftbar, #rightbar {
    float: left ;
}

#content, #leftbar, #rightbar, #navigation, #footer, #header {
    padding: 0 ;
    margin: 0 ;
}

#navigation {
    position: absolute ;
    bottom: 0;
    right: 0 ;
    text-align: right ;
    padding: 3px ;
}

#content {
    width: 60% ;
}

#leftbar {
    width: 20% ;
}

#rightbar {
    width: 20% ;
}

#header {
    /* there are a couple absolute positioned things in the header right now */
    position: relative ;
    display: block ;
    width: 100% ;
    height: 88px ;
    border: 0px ;
    padding: 0px ;
/*    text-indent: -9999px ; */
}

#footer {
    clear: both ;
}

/* this sets up the 3 color bars */
#rightbar-background {
    float: left ;
    position: relative ;
    /* this is for an ie bug, otherwise overflow is broken and color spills
     * out */
    overflow: hidden ;
    width: 100% ;
}

#content-background {
    float: left ;
    position: relative ;
    background: white ;
    right: 20% ;
    width: 100% ;
}

/* for a 2 column layout add .content-wide to the #container div
 * This makes the content 20% wider and the background
 * is padded 20% on the right so it will cover the right-bar background, 
 * and hides the rightbar  */
/* BAH this fails in IE, you'll need a special rule to white out your
 * right-bar in content-wide mode for now */
/*
#container.content-wide #content-background {
   padding-right: 20%
}
*/

#container.content-wide #content {
    width: 80% ;
}

#container.content-wide #rightbar {
    display: none ;
}

#leftbar-background {
    float: left ;
    position: relative ;
    right: 60% ;
    width: 100% ;
}

/* this moves the content back in place */
#leftbar, #content, #rightbar {
    position: relative ;
    left: 80% ;
}

.footer-department {
    width:19%;
    display:inline-block;
}

.padded {
    padding: 1ex ;
}

/* for hiding default viewed content in large mode with a popup button */
.responsive-show {
    display: none ;
}

.responsive-hide {
}

#navigation, #header, #top, #interface-bar, #userinfo, #footer, #media-bar {
    padding-left: 2%;
    padding-right: 2%;
    width: 96% ;
}

#top {
    padding-top: 10px ;
    padding-bottom: 10px ;
}

#leftbar {
    padding-left: 2% ;
    width: 18% ;
}

@media screen and (min-width: 1366px) {
    #navigation, #header, #top, #interface-bar, #userinfo, #footer, #media-bar {
        padding-left: 8%;
        padding-right: 8%;
        width: 84% ;
    }

    #leftbar {
        padding-left: 8%;
        width: 18%;
    }

    #container.content-wide #content {
        width: 66%;
    }
}


#browse-products-button {
    display: inline-block;
    /* width: 200px ; */
    width: 20%;
    /*
    padding-left: 30px;
    padding-right: 30px;
    font-size: 110% ;
    */
    text-align: center ;
/*
    height: 45px ;
    line-height: 45px ;
*/
    text-decoration: none;
    border: 0;
    padding: 0;
    margin: 0;
}

#interface-bar {
    font-size:110%;
    height: 45px ;
    line-height: 45px;
    border-bottom: 1px solid black
}

#interface-bar input, #interface-bar select {
    display: inline-block;
    font-size: 110% ;
    border: 0px ;
    padding: 0px ;
}

/*
#interface-bar form {
    display: inline-block;
    height: 45px;
    border: 0;
    width: 50%;
}
*/

#interface-bar .extra-button {
    margin-left: auto;
    margin-right: auto;
    display: inline-block;

    position: relative;
/*
    height: 45px ;
    line-height: 45px ;
*/
    /* width: 150px ; */
    width: 15%;
    text-align: center ;
    border-right: 1px solid black ;

}

/* fake float the text over the buttons so wrapping doesn't destroy the
 * interface bar under 1060px wide */
#interface-bar .extra-button span {
    display: block;
    position: absolute;
    top:-29px;
    left:0;
    width:100%;
    border-right: 1px solid black;
    border-left: 1px solid black
}

#interface-bar #top-search-button {
    height: 45px;
    display: inline-block;
    width: 10%;
    border-radius: 0;
    float: right;
/*
    padding-left: 10px;
    padding-right: 10px;
*/
}

#interface-bar #search {
    width: 85%;
}

#interface-bar #search-container {
    background: white;
    display: inline-block;
    border-left:1px solid black;
    text-indent:10px;
    /* width: 49%; */
    width: 46.5%;
    /* line-height: 45px ; */
}


#leftbar .header {
    display: block ;
    height: 35px ;
    line-height: 35px ;
    font-size: 110% ;
    width: 90% ;
    margin-bottom: 10px ;
    padding-left: 20px ;
}

#media-bar {
/*    height: 88px ; */
    text-align: center ;
    font-weight: bold ;
    padding-top: 3ex;
    padding-bottom: 3ex;
}

#media-bar .media-button {
    text-decoration: none;
    color: white;
    display: block;
    width: 75% ;
    /* margin-left: 15% ; */
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px ;
    text-align: center ;
    padding: 10px ;
}

/*
#footer .footer-box a {
    display: block ;
    float: left ;
    width: 23%
}
*/

.form-2col label {
    text-align: right;
    display: inline-block;
    width: 47%;
    padding: 1% 1%;
}

.form-2col label input, label select {
    box-sizing: border-box;
    display: inline-block;
    width: 55%;
}