/* BigGrassField's header: the logo, and what is placed around it. Linked by Index.aspx after the shared
   css/index*.css and css/menu.css, which hold the bar and the buttons. ScaleFarm has its own copy.

   The logo is Images/BigGrassFieldLogo.png (414x422) at every width. Desktop (wider than 1000px): a 120px
   badge over the header and the menu bar, with the menu items moved along to clear it. Where the Menu button
   shows (1000px and narrower): as big as the buttons, then 14px, then the Menu button. The search box starts
   16px after the logo or the Menu button; css/index.css centres it in the space before the buttons. */

#hdr-logo {
    background-image: url("../../Images/BigGrassFieldLogo.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

@media (min-width: 1001px) {
    #hdr-logo {
        top: 4px;
        left: 14px;
        width: 118px;
        height: 120px;
    }

    #menu #menu-left { /* beats css/index.css's "#menu ul { padding: 0 }" */
        padding-left: 146px;
    }

    #search {
        left: 148px; /* the logo ends at 132px */
    }
}

/* The 78px header: 60px buttons */
@media (max-width: 1000px) and (min-width: 841px) {
    #hdr-logo {
        top: 9px;
        left: 12px;
        width: 60px;
        height: 60px;
    }

    #hdr-menu {
        left: 86px;
    }

    #search {
        left: 162px;
    }
}

/* The 62px bar: 52px buttons (css/index-medium.css sets the logo's top, left and height) */
@media (max-width: 840px) {
    #hdr-logo {
        width: 52px;
    }

    #hdr-menu {
        left: 72px;
    }
}

@media (max-width: 840px) and (min-width: 601px) {
    #search {
        left: 140px;
    }
}

/* Help moves into the menu before the Search button would reach the Menu button */
@media (max-width: 369px) {
    #hdr-help {
        display: none;
    }

    #hdr-search {
        right: 114px;
    }

    #menu-help {
        display: list-item;
    }
}