/* Orima_Wordmark logo dimensions: w=400, h=103*/


/* mobile layout*/
@media (max-width: 419px) {
    div.logo-bar {
        height: 110px;
    }

    div.logo-bar #left-logo {
        top: 10px;
        left: 0;
        width: 200px;
        height: 100px;
        background-image: url('../images/client-logo.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%;
    }

    #welcome-container {
        margin-top: -250px !important;
    }

    #logon-container {
        margin-top: -250px !important;
    }

}

/* wider screen mobile layout*/
@media (min-width: 420px) {
    div.logo-bar {
        height: 180px;
    }

    div.logo-bar #left-logo {
        top: 10px;
        left: 0;
        width: 200px;
        height: 100px;
        background-image: url('../images/client-logo.png'); /* dimensions of logo = 400 x 200   */
    }

    div.logo-bar #right-logo {
        display: none;
    }

    #welcome-container {
        margin-top: -230px !important;
    }

    #logon-container {
        margin-top: -230px !important;
    }
}

/* smallscreen layout*/
@media (min-width: 600px) {
    div.logo-bar {
        height: 160px;
    }

    div.logo-bar #left-logo {
        top: 10px;
        left: 10px;
        width: 300px;
        height: 150px;
        background-image: url('../images/client-logo.png'); /* dimensions of logo = 400 x 200   */
    }

    div.logo-bar #right-logo {
        top: 60px;
        right: 0;
        width: 200px;
        height: 52px;
        background-image: url('/_resources/images/Orima_Logo.png'); /*  dimensions of logo = 400 x 103  */
        display: inline-block;
    }

    #welcome-container {
        margin-top: -100px !important;
    }

    #logon-container {
        margin-top: -100px !important;
    }
}

/* desktop layout  */
@media (min-width: 800px) {
    div.logo-bar {
        height: 220px; /* set height to accommodate size of logos */
    }

    div.logo-bar #left-logo {
        top: 10px;
        left: 10px;
        width: 400px;
        height: 180px;
        background-image: url('/_resources/images/logos/csa_logo_medium.png');
    }

    div.logo-bar #right-logo {
        top: 30px;
        right: 0px;
        width: 350px;
        height: 161px;
        background-image: url('/_resources/images/logos/TheSchoolPhotographer.png');
    }

    #welcome-container {
        margin-top: 0 !important;
    }

    #logon-container {
        margin-top: 0 !important;
    }
}


.large-button {
    display: block;
    position:relative;
    padding: 6px;
    width: 210px;
    height: 70px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    cursor: pointer;
}

.large-button .svgIcon {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 15px;
    left: 15px;
    fill: #ffffff;
}
.large-button .txtbox {
    position: absolute;
    width: 140px;
    height:58px;
    /*margin: 4px 0 0 60px;*/
    margin: auto 0 auto 60px;
    padding-top:9px;
    text-align:center;
    font-size:18px;
}


.large-button-blue {
    background-color: #4472C4;
    color: #ffffff;
    font-size: 12px;
}

.large-button-grey {
    background-color: #999;
    color: #ffffff;
    font-size: 12px;
}

.large-button-blue:hover {
    background-color: #2A457A;
}

.large-button .svg {
    position: absolute;
    width: 60px;
    height: 60px;
    margin: 0 0 0 0;
    fill: #ffffff;
}

.large-button .txtbox {
    position: absolute;
    width: 200px;
    height:58px;
    /*margin: 4px 0 0 60px;*/
    margin: auto 0 auto 60px;
    padding-top:9px;
    text-align:center;
    font-size:16px;
}



.table-holder-full .panel-heading .header-text, .form-holder-center .panel-heading .header-text, .form-holder-full .panel-heading .header-text {
    display: inline-block;
}

.table-holder-full .button-icon, .form-holder-center .button-icon, .form-holder-full .button-icon {
    padding: 0;
}

table.workarea {
    border:none;
    border-collapse:collapse;
}
table.workarea th {
    text-align:center;
    padding:6px;
    border-top:1px solid black;
    border-bottom:1px solid black;
    background-color: #f0f0f0;
}
table.workarea td {
    padding:3px;
    border-bottom:1px solid #c9c9c9;
    border-top:1px solid #c9c9c9;
    vertical-align: top;
}
table.workarea tr td:nth-child(even) {
    text-align:center;
}

table.workarea td.empty {
    background-color:#f9f9f9;
    border-bottom:none;
    border-top:none;
}

/* Main container */
#welcome-container{
    width:90%;
    max-width:800px;
    margin:400px auto 0;
    text-align:center;
}

/* Desktop buttons */
#welcome-container a.btn{
    display:inline-block;
    margin:10px auto;
}

/* Inner text */
#welcome-container a.btn > div{
    width:100%;
    text-align:center;
    white-space:normal;
    word-break:break-word;
    box-sizing:border-box;
}

/* Mobile */
@media (max-width:768px){

    #welcome-container{
        margin-top:240px;
        width:95%;
    }

    #welcome-container a.btn{
        display:block;
        width:100% !important;
        max-width:300px !important;
        margin:15px auto;
        padding:0;
    }

    #welcome-container a.btn > div{
        width:100%;
        padding:12px;
        white-space:normal;
        word-break:break-word;
        text-align:center;
        box-sizing:border-box;
    }
}