/*
 * blue-grey stylesheet
 */
body {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 100%;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 0px;
}

a {
    text-decoration: none;
    font-size: 100%;
    color: #0404cc;
}
a:visited { color: #0404cc; }
a:hover { color: #0000ff; }
a:active { color: #0000ff; }

textarea {
    font-family: monospace;
    font-size: 90%;
}

table {
    border: none;
}

pre {
    padding-top: 1em;
    font-family: monospace;
    font-size: 1.1em;
}

tt {
    font-family: monospace;
    font-size: 1.1em;
}

/* blue top part with logos
 * TODO: remove #header and #bmrb_footer once people's caches have updated
 * */
header, #header, footer, #bmrb_footer {
    width: 100%;
    margin-top: 0.7em;
    background-color: #cbdbff;
    border: solid 2px #33527b;
    border-spacing: 0;

    -webkit-border-radius: 5px 5px 5px 5px;
     -khtml-border-radius: 5px 5px 5px 5px;
       -moz-border-radius: 5px 5px 5px 5px;
            border-radius: 5px 5px 5px 5px;
}

/* Fix the border corner radius */
footer, #bmrb_footer {
    padding: 1em;
    margin-bottom: 0.7em;

    -webkit-border-radius: 5px 5px 5px 5px;
     -khtml-border-radius: 5px 5px 5px 5px;
       -moz-border-radius: 5px 5px 5px 5px;
            border-radius: 5px 5px 5px 5px;
}

section {
    width: 100%;
    padding: 0;
    border-spacing: 0;
}

/*
 * left-side column w/ nav menu
 */
#bmrb_navmenucolumn {
    margin: 0 0 0 0;
    padding: 1em 1em 0.5em 10px;
    text-align: left;
    background-color: #ededed;
    border: solid #33527b;
    border-width: 0px 2px 2px 2px;

    -webkit-border-radius: 0px 0px 5px 5px;
     -khtml-border-radius: 0px 0px 5px 5px;
       -moz-border-radius: 0px 0px 5px 5px;
            border-radius: 0px 0px 5px 5px;
}

/* Fixes divs on the page from overlapping. */
div, header, footer {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

/* Automatically put some padding around all content so that
 * individual pages don't need to set class="contentWrap" or
 * style="padding-left: 1em" etc. */
#bmrb_pagecontentcolumn {
    padding: 1em 1em 1em 2em;
}

/* thin grey frame with rounded corners */
.box_grey_rndcnr {
    margin: 0.5em;
    padding: 0 1em 1em 1em;
    border: solid 1px #cbcbcb;

    -webkit-border-radius: 3px;
     -khtml-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
}

/* Search box style */
.instant_search {
    border: solid #33527b;
    border-width: 0px 2px 2px 0px;
    border-radius: 0px 0px 5px 0px;
    text-align: left;
    background-color: #cbdbff;
}

/* Instant search should scroll */
.ui-autocomplete {
    max-height: 500px;
    min-width: 400px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    padding-right: 20px;
}

.instant_search p {
    margin: 0em 1em 0em 1em;
    margin-left: 5em;
}

#random_image {
    width: 95%;
}

/* for Wisharts servers page */
.progname {
    font-size: 120%;
    font-weight: bold;
}
.progname:hover {
    color: #0000ff;
}

/* basic text alignment */
.top { vertical-align: top; }
.middle { vertical-align: middle; }
.bottom { vertical-align: bottom; }
.center { text-align: center; }
.right { text-align: right; }
.left { text-align: left; }

table.content{
    width: 90%;
}

/* Prevent autocomplete box from going off screen */
.ui-autocomplete {
    font-size: 90% !important;
}

/*
 * Let's make the text boxes and buttons a little more stylish
 */

/* The :not(.gsc-input) prevents the google search box from having these rules applied to it */
input[type="text"]:not(.gsc-input), input[type="text"]:not(.combobox), input:not([type]), textarea {
    border-radius: 3px;
    transition: all 0.5s ease;
    background: #EDEDED;
    border: 1px solid #C8C8C8;
    color: #777777;
    margin: 7px 5px 7px 0;
    padding: 5px 3px 5px 3px;
}

input[type="text"]:focus:not(.gsc-input), input:not([type]):focus, textarea:focus {
    box-shadow: 0 0 2px #666666 inset;
    background-color: #FFFFFF;
    border: 1px solid #666666;
    outline: none;
}

input[type="submit"], input[type="reset"], input[type="button"], input[type="file"], input[type="checkbox"], select, button {
    text-decoration: inherit;
    border-radius: 3px;
    border: 1px solid #C8C8C8;
    padding: 5px 10px 5px 10px;
    cursor: pointer;
    display: inline-block;
    background: #EDEDED;
}

input[type="checkbox"] {
    margin-left: 1em;
}
/* Don't show the transition for textareas - it looks weird. */
textarea {
    transition: all 0s;
}

/* Show the dark grey outline for all form elements on hover */
input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, input[type="file"]:hover, input[type="checkbox"]:hover, select:hover, textarea:hover, input[type="text"]:not(.gsc-input):hover, input:not([type]):hover, button:hover {
    transition: all 0.5s ease;
    box-shadow: 0 0 2px #666666 inset;
    border: 1px solid #666666;
    outline: none;
}

/* Fix the padding around the google search box. */
.cse .gsc-control-cse, .gsc-control-cse {
    padding: 0em !important;
}

/* Use these to style tables nicely */
table.alternating tr:nth-child(even) {
    background-color: #CBDBFF;
}

table.alternating tr:nth-child(odd) {
    background-color: #FFFFFF;
}

table.alternating td{
    padding-top: 0.25em;
    padding: 0.25em;
    text-align: left;
    vertical-align: top;
}

table.alternating {
    width: 100%;
}

table.alternating th {
    padding-top: 0.25em;
    padding: 0.25em;
    font-size: 130%;
    text-align: left;
    background-color: #CBDBFF;
}

table.alternating tfoot {
    font-size: 110%;
    background-color: #CBDBFF;
}

table.alternating tr:hover {
    border: 1px solid #C8C8C8;
    background: #EDEDED;
}

/* Text align center for the query grid */
table.query_grid {
    text-align: center;
}

table.query_grid th {
    text-align: center;
}


/*
 *
The following two classes support the entry view page
 */
.entry_details_box {
    display: block;
    border: solid 2px #33527b;
    padding: 0 1em 1em 1em;
    margin-top: 1em;
    background-color: #fdfdfe;
    border-radius: 5px;
}

.entry_info_float {
    float:left;
    width: 30%;
    min-width: 30%;
    padding-left: 1em;
    text-align: center;
}

/* The following makes the selected and not selected buttons out of elements.
 * This is used on the entry summary page and the metabolomics pages.
 * */
.active_tab, .other_tab, .active_tab:visited, .other_tab:visited {
    color: #333333;
    text-decoration:none;
    font-weight: bold;

    border-radius: 3px;
    border: 1px solid #C8C8C8;
    padding: 5px 10px 5px 10px;
    display: inline-block;
}

.other_tab:hover {
    box-shadow: 0 0 2px #666666 inset;
    border: 1px solid #666666;
    outline: none;
}

.other_tab {
    background-color:#ededed;
}

.active_tab {
    background-color: transparent;
}

/* For expandingMenu */
.expandingHeader {
    cursor: pointer;
    color: #0404cc;
}

/*
 * For jquery-based navigation bar
 */

#accordion_sidebar.ui-accordion {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 100%;
    color: #0000ff;
    background: white !important;
    border: 0 !important;
}

#accordion_sidebar .ui-state-default {
    color: #0000ff;
    background: white !important;
    border: 0 !important;
}

#accordion_sidebar .ui-state-active {
    color: #0000ff;
    background: white !important;
    border: thin solid rgb( 185, 185, 185 ) !important;
}

#accordion_sidebar .ui-state-highlight {
    color: #0000ff;
    border: thin solid rgb( 185, 185, 185 ) !important;
    background: white !important;
}

#accordion_sidebar .ui-accordion-header  {
    padding-top: 0.1em !important;
    padding-bottom: 0.1em !important;
}

#accordion_sidebar .sidebar-menu-single-item .ui-icon {
    display : none !important;
}

#accordion_sidebar .sidebar-submenu {
    display: block;
    padding: 0.5em 0.5em 0.5em 1em !important;
    margin: 0;
    background: white !important;
}

#accordion_sidebar .sidebar-submenu-item  {
    color: #0000ff !important;
    background: white !important;
}

#accordion_sidebar li .sidebar-submenu-item:hover {
    display: block;
    background: rgb( 225, 225, 225 ) !important;
}

/*
 * center column w/ content
 */
#bmrb_pagecontentcolumn {
    margin: 0;
    vertical-align: top;
}