/* Orima_Wordmark logo dimensions: w=400, h=103*/


/* mobile layout*/
@media (max-width: 419px) {
    div.logo-bar {
        height: 55px;
    }

    div.logo-bar #left-logo {
        top: 10px;
        left: 0;
        width: 328px;
        height: 100px;
        background-image: url('/_resources/images/logos/Dept_of_Education.png'); /* dimensions of logo = 400 x 200   */
    }

    div.logo-bar #right-logo {
        display: none;
    }

    #page-top div.title-bar { /* to improve presentation of logo bar at small screen */
        width: 98%;
    }
}

/* wider screen mobile layout*/
@media (min-width: 420px) {
    div.logo-bar {
        height: 55px;
    }

    div.logo-bar #left-logo {
        top: 10px;
        left: 0;
        width: 328px;
        height: 100px;
        background-image: url('/_resources/images/logos/Dept_of_Education.png'); /* dimensions of logo = 400 x 200   */
    }

    div.logo-bar #right-logo {
        display: none;
    }
}

/* smallscreen layout*/
@media (min-width: 600px) {
    div.logo-bar {
        height: 70px;
    }

    div.logo-bar #left-logo {
        top: 10px;
        left: 10px;
        width: 285px;
        height: 86px;
        background-image: url('/_resources/images/logos/Dept_of_Education.png'); /* dimensions of logo = 400 x 200   */
    }

    div.logo-bar #right-logo {
        top: 30px;
        right: 0;
        width: 200px;
        height: 52px;
        background-image: url('/_resources/images/Orima_Logo.png'); /*  dimensions of logo = 400 x 103  */
        display: inline-block;
    }
}

/* desktop layout  */
@media (min-width: 800px) {
    div.logo-bar {
        height: 90px; /* set height to accommodate size of logos */
    }

    div.logo-bar #left-logo {
        top: 20px;
        left: 20px;
        width: 320px;
        height: 86px;
        background-image: url('/_resources/images/logos/Dept_of_Education.png'); /* dimensions of logo = 400 x 200   */
    }

    div.logo-bar #right-logo {
        top: 40px; /* set top to balance against client logo */
        right: 20px;
        width: 250px;
        height: 64px;
        background-image: url('/_resources/images/Orima_Logo.png'); /*  dimensions of logo = 400 x 103  */
    }
}
