/* MachineOuterBar.css */

/* Mimic bootstrap container, for the machine outer bar. Avoids bootstrap/divi conflict. */
.machineContainer
{
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}
@media (min-width: 768px)
{
    .machineContainer
    {
        width: 750px;
    }
}
@media (min-width: 992px)
{
    .machineContainer
    {
        width: 970px;
    }
}
@media (min-width: 1200px)
{
    .machineContainer
    {
        width: 1300px;          /* Increased from standard 1200px to handle "shop by your machine" text. */
    }
}

/* Machine selected bar. */
.machineSelectedBar
{
    background-color: #ff7e00;          /* Was blue #1b51b6 */
    padding: 6px 20px 6px 20px;
    width: 100%;
}

.machineSelectedBar .machine
{
    color: #ffffff;
    font-size: 24px;
    font-weight: 300;
    text-transform: uppercase;
}

.machineSelectedBar .removeMachine
{
    font-size: 11px;
    line-height: 11px;
}

.machineSelectedBar .removeMachine span     /* 2 lines in desktop, 1 line in mobile. */
{
    display: block;
}

/* Mobile/Tablet/SmallDesktop. */
@media only screen and (max-width:1199px)
{
    .headerMachine
    {
        margin-top: 14px;       /* Under search bar, since logos are hidden. See below for mobile. */
    }

    .machineSelectedBar
    {
        margin-top: -1px;       /* Under mobile top bar. */
        padding: 4px 20px 4px 20px;     /* Shorter padding, for smaller bar in mobile. */
    }

    .machineSelectedBar .machine
    {
        font-size: 16px;        /* Smaller text for machine name. */
    }

    .machineSelectedBar .changeMachine, .machineSelectedBar .removeMachine      /* Emulate btn-xs in mobile, wtih smaller font. */
    {
        padding: 1px 5px;
        font-size: 11px;
        line-height: 1.5;
        border-radius: 3px;
    }

    .machineSelectedBar .removeMachine span     /* 2 lines in desktop, 1 line in mobile. */
    {
        display: inline;
    }
}

/* Mobile empirical. */
@media only screen and (max-width:479px)
{
    .headerMachine
    {
        margin-top: 0;      /* Something happens at 480, and bumps this down. I think it's the browser wrapping a piece of the search bar. */
    }
}

/* Machine picker. Overrides standard styles. */
.headerMachine .machinePickerOuter
{
    background-color: #ff7e00;          /* Was blue #1b51b6 */
    height: 50px;
    padding: 10px 20px 10px 20px;
    width: 100%;
}

.headerMachine .machinePicker
{
    background-color: #ff7e00;          /* Was blue #1b51b6 */
    padding: 0;
    margin: 0 auto;
    /* Reference for machine history to right-align. This is far up from the history, so take care if a lower position relative gets added.
        Adding it to machineHistory kept it the width of the button only. */
    position: relative;
    width: 100%;
}

.headerMachine .machinePicker .steps
{
    float: left;
    margin: 0 auto;
    max-width: 920px;               /* Avoids individual dropdowns getting too wide, so text to left and right still fit. */
    width: 80%;
}

.headerMachine .machinePicker .step select
{
    padding: 4px 16px 4px 16px;
}

.headerMachine .machinePicker .step select option
{
    padding: 0;         /* Fix for firefox with too big a dropdown height; had no effect on Chrome. */
}

.headerMachine .machinePicker .header
{
    float: left;
    margin-top: -4px;
    margin-right: 4px;
}

.headerMachine .machinePicker .footer
{
    float: left;
    padding: 0;
}

.headerMachine .machinePicker .footer .right
{
    display: none;
}

.headerMachine .machineHistory .listOuter
{
    background-color: #ff7e00;          /* Was blue #1b51b6 */
    position: absolute;
    right: 0;
    padding: 10px;
    z-index: 1;             /* Need this to have it show in desktop, for wordpress design, for unknown reason. It shows ok without it in mobile. */
}


/* Mobile/Tablet. */
@media only screen and (max-width:991px)
{
    /* Stack heading, steps, machine history; when steps stack. */
    .headerMachine .machinePicker .header
    {
        float: none;
        text-align: left;
    }

    .headerMachine .machinePicker .header .fa-angle-down, .headerMachine .machinePicker .header .fa-angle-up
    {
        position: relative;     /* Nudge down. */
        top: 4px;
    }

    .headerMachine .machinePicker .steps
    {
        display: none;                  /* Start collapsed. */
        float: none;
        margin: 0;
        width: 100%;
    }

    .headerMachine .machinePicker .footer
    {
        display: none;                  /* Start collapsed. */
        float: none;
    }

    .headerMachine .machineHistory .listOuter
    {
        position: relative;
    }
}

/* Mobile/Tablet/SmallDesktop. */
@media only screen and (max-width:1199px)
{
    .headerMachine .machinePickerOuter
    {
        height: unset;
        margin-top: -1px;       /* Under mobile top bar. */
        padding: 4px 20px 0px 20px;     /* Shorter padding, but bumps into machine picker padding if any smaller.*/
    }
}