/* Genome Browser CSS
 *      Look and feel based on hgGateway/JWestDesign.com and GB menu styling
 *
 * Copyright (C) 2016 The Regents of the University of California
 */

/* Conventions:
       Group rules by type (e.g. header, footer), then alphabetically within group,
            unless cascade requires otherwise (overrides must be after rules they override)
       Group properties by type (positioning, display, color, text, other)
       Within a group, order properties logically (e.g. padding, border, margin) or alphabetically
       Use CSS shortcuts when available (e.g. padding 1 value (all), 2 values (top+bottom, left+right),
                        3 (top, right+left, bottom), 4 (top, right, bottom, left) 
       Avoid use of id's to style.  
       Avoid qualifying classes by element type.
       Preserve whitespace, naming and case conventions below
*/

/* Colors */

.gbBlueDark {
    background-color: #003a72;
}

.gbBlueDarkColor {
    color: #003a72;
}

.gbBlueLight {
    background-color: #4c759c;
}

.gbGold {
     background-color: #eaca92;
}

.gbGoldLight {
    background-color: #f3e0be;
}

.gbPink {
    color: #f69296;     /* dotted lines in body map */
}

.gbWhiteColor {
    color: white;
}

span.disabled,
input[disabled] {
    opacity: .6;
}

/* Below are from hgGateway/Jeff West styling (jWest.css)
 *      Used with these selector names in inc/gbFooter.html */

/* Miscellany */

.gbAllCapsButton {
    display: inline-block;
    height: 18px;
    vertical-align: top;
    background-color: #003a72;  /* dark blue */
    color: #f9f9f9;
    padding: 5px 10px 1px;
    border-radius: 3px;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
}

.gbClearBoth {
    clear: both;
}

.gbDonateButton {
    width: 60px;
    margin-top: 3px;
}

.gbRow {
    clear: both;
}

/* Footer */

.gbFooterColumn {
    display: inline-block;
    width: 23%;
    border-left: 1px solid black;
    padding-left: 10px;
    text-transform: uppercase;
    font-size: smaller;
    vertical-align: top;
}

.gbFooterContainer {
    background-color: #f9f9f9;
    margin-top: 20px;
    padding: 20px;
    padding-left: 100px;
    font-size: 14px;
}

.gbFooterContainer a, 
.gbFooterContainer a:link, 
.gbFooterContainer a:visited {
    color: #003a72;
    font-weight: bold;
    text-decoration: none;
}

.gbFooterCopyright {
    text-align: center;
    text-transform: uppercase;
    font-size: smaller;
    margin-top: 1.5em;
}

.gbFooterIcons {
    vertical-align: bottom;
}

/* Below are rules used in hgGtexTrackSettings that are fairly generic and candidates
 * for re-use.   WARNING: at this time they are subject to change
 */

/* UCSC bridge logo in menu bar */

span#home-link {
    background-position: 0 0;
    background-size: contain;
    background-image: url("../images/ucscHelixLogo.png");
    background-repeat: no-repeat;
    top: -8px;
    width: 84px;
    height: 32px;
    background-color: white;
    margin-left: -9px;
}

/* Icons */

.gbIconSmall {
    font-size: 70%; /* set info icon smaller than default */
}   

/* This class is recognized by JS, which changes to spinner on form submit */
.gbIconGo {
    color: #003a72;
    vertical-align: -webkit-baseline-middle;
    vertical-align: -moz-middle-with-baseline;
}   

.gbIconArrow {
    cursor: pointer;
}

/* UI controls */

.gbButton {
    display: inline-block;
    vertical-align: top;
    padding: 1px 8px;
    border-radius: 3px;
    background-color: white;
    color: black;
    font-weight: normal;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
}

.gbButtonContainer {
    display: inline-block;
    text-align: right;
    cursor: pointer;
}

.gbButtonGo {
    display: inline-block;
    vertical-align: -webkit-baseline-middle;
    vertical-align: -moz-middle-with-baseline;
    background-color: #003a72; /* dark blue */
    color: white;
    padding: 4px 9px;
    border-radius: 3px;
    font-weight: normal;
    cursor: pointer;
}

/* This class is recognized by JS, which adds click handler to submit form */
.gbButtonGoContainer {
    display: inline-block;
    vertical-align: top;
    margin-top: 2px;
    font-size: 10px;
    cursor: pointer;
}

.gbButtonSetClear {
    width: 5em; /* fixed width for 'set all' and 'clear all' */
}

.gbControl {    /* Checkboxes, radio buttons, inputs */
    margin-top: 4px;
    font-size: 14px;
}

.gbSelect {
    margin: 0 5px;
    color: black;
    font-size: 14px;
    font-weight: normal;
    border-radius: 3px;
    cursor: pointer;
}

.gbInputLabel { /* Text in input boxes */
    padding-top: 10px;
    color: #003a72;     /* dark blue, as above */
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 0.050em;
}

/* Track UI
 *    These are used by hgGtexTrackSettings, but are good candidates for
 *    use by other UI pages.  And other use as well (e.g. static pages)
 */

/* Track Title section */

.gbAssembly {
    margin-left: 6px;
    font-weight: normal;
    font-size: 13px;
    color: #555;
}

.gbTrackName {
    background-color: #f3e0be;  /* light gold */
    padding: 2px 8px;
    margin: -10px;
    font-weight: bold;
    color: #003a72;             /* dark blue */
}

.gbTrackTitleBanner {
    padding: 11px;
    padding-bottom: 6px;
    font-weight: bold;
    font-size: 17px;
    background-color: #eaca92;  /* gold */
    color: black;
}

.gbTrackTitle {                 /* margins assymtrical due to negative mgin on track name (fixme ?) */
    margin: 0 20px 0 40px;
}

.gbSectionBanner {
    padding: 3px;
    margin-top: 6px;
    margin-right: 0;
    background-color: #4c759c;  /* light blue */
    color: white;
    font-weight: bold;
    font-size: 15px;
}

/* Track Description section */

.gbTrackDescription {
    margin-left: 20px;
}

.gbTrackDescription h2 {
    color: #003a72;
    font-size: 24px;
}

.gbTrackDescription h3 {
    display: inline-block;
    padding: 6px 20px;
    color: #003a72;
    background-color: #dddddd;
    font-size: 17px;
    font-weight: bold;
}

.gbTrackDescription *:first-child {
    padding-top: 0;
    margin-top: 15px;
}

.gbTrackDescription img {
    border: 1px solid black;
    margin: 8px;
}

.gbTrackDescriptionPanel {
    padding-bottom: 20px;
    border-bottom: 1px solid lightgray;
    margin-top: 0;
    background-color: #f5f5f5;
}

/* Bulleted list */

.gbTrackDescription ul {
    margin-top: 8px;
    margin-left: 15px;
    list-style-type: none;      /* Use custom icons instead of bullets */
}

.gbTrackDescription ul li {
    position: relative; /* from hgGateway */
}


/* List without bullets */

.gbTrackDescription ul.gbNoBullet {
    padding-left: 20px;
}

.gbTrackDescription ul.gbNoBullet li::before {
    content: none;
}


.gbTrackDescription ul li::before {   /* square bullets, from hgGateway */
    position: absolute;
    top: 0.4em;
    left: -1em;
    width: 8px;
    height: 8px;
    background-color: #7e1f16;  /* dark red */
    content: '';
}