/* common.css */

#banner, #event_banner {
        width: 100%;
        margin: 0px auto;
        z-index: 1;
}

#banner img {
        display: block;
        margin: auto;

        background-color: #FEFEFE;
        border-radius: 3px;
        box-shadow: 0 3px 6px rgba(0,0,0,0.9);
}

#event_banner img {
        display: block;
        margin: auto;

        background-color: #FEFEFE;
        border-radius: 10px;
        box-shadow: 0 3px 6px rgba(0,0,0,0.9);
}

.logout {
        display: block;
        position: relative;
        width: 300px;

        margin-top: 60px;
        margin-left: auto;
        margin-right: auto;
}

input[type=button] { white-space: normal; }
input[type=submit] { white-space: normal; }

.logout input[type=submit] {
        font-family: "Roboto", sans-serif;
        /*text-transform: uppercase;*/
        outline: 0;
        background: #FF2323; 
        width: 100%;
        border-radius: 10px;
        border: 0;
        padding: 15px;
        color: #FFFFFF;
        font-size: 14px;
        -webkit-appearance: none;
        -webkit-transition: all 0.3 ease;
        transition: all 0.3 ease;
        cursor: pointer;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

.logout input[type=submit]:hover,
.logout input[type=submit]:active { background: #C41B1B; }
.logout input[type=submit]:active { box-shadow: none; }

.return-bttn
{
        display: block;
        position: relative;
        z-index: 1;
        max-width: 300px;
        margin: 25px auto 25px;
}

.return-bttn input[type=button]
{
        font-family: "Roboto", sans-serif;
        outline: 0;
        background: #6CB33F;
        width: 100%;
        border-radius: 10px;
        border: 0;
        padding: 15px;
        font-weight: bold;
        color: #FFFFFF;
        font-size: 14px;
        -webkit-appearance: none;
        -webkit-transition: all 0.3 ease;
        transition: all 0.3 ease;
        cursor: pointer;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

.return-bttn input[type=button]:hover,
.return-bttn input[type=button]:active { background: #568F32; }
.return-bttn input[type=button]:active { box-shadow: none; }

.return-bttn input[type=submit]
{
        font-family: "Roboto", sans-serif;
        outline: 0;
        background: #6CB33F;
        width: 100%;
        border-radius: 10px;
        border: 0;
        padding: 15px;
        font-weight: bold;
        color: #FFFFFF;
        font-size: 14px;
        -webkit-appearance: none;
        -webkit-transition: all 0.3 ease;
        transition: all 0.3 ease;
        cursor: pointer;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

.return-bttn input[type=submit]:hover,
.return-bttn input[type=submit]:active { background: #568F32; }
.return-bttn input[type=submit]:active { box-shadow: none; }

.top-bar-no-credit {
        display: block;
        position: relative;
        max-width: 1540px;
        z-index: 1;
        margin: 20px auto;
        padding: 5px;
        background: #FFFFFF;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

.top-bar-name-txt {
        display: inline-block;
        max-width: 600px;
        padding: 10px;

        text-align: center;
        font-weight: bold;

        background: #6CB33F;
        border-radius: 10px;
}

.top-bar {
        display: block;
        max-width: 1550px;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-right: 10px;
        padding-left: 10px;

        z-index: 1;

        margin: 20px auto;
        background: #FFFFFF;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);

        /* this basically tells the browser to include the padding in the width */
        -webkit-box-sizing: border-box; /* <=iOS4, <= Android  2.3 */
        -moz-box-sizing: border-box; /* FF1+ */
        box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
}

.bar-content-wrapper {
        display: table;
        table-layout: fixed;
        width: 100%;
}

.bar-name {
        display: table-cell;
        max-width: 600px;
        font-weight: bold;
        text-align: left;
        vertical-align: middle;
        line-height: 38px;
}

.bar-credit-cell {
        display: table-cell;
        vertical-align: middle;
        text-align: right;
}

.bar-credit, .bar-attendance {
        display: inline-block;

        padding: 10px;

        font-weight: bold;
        color: #FFFFFF;
        text-align: right;

        background: #6CB33F;
        border-radius: 10px;
}

.credit-num {
        display: inline;

        border-right: 1px solid;

        margin: 0px;

        padding-right: 5px;
        padding-top: 2px;
        padding-bottom: 2px;
}

.total-txt {
        display: inline;
        margin-left: 0px;
}

.bar-no-credit {
        display: inline-block;

        float: right;
        max-width: 300px;
        padding: 10px;
        font-weight: bold;
        text-align: right;
        color: #FF0000;
        background: #329FFF;
        border-radius: 10px;
}

body {
        background: #CEE0EE; /* for old browsers */
        background: -webkit-linear-gradient(right, #CEE0EE, #FFFFFF);
        background: -moz-linear-gradient(right, #CEE0EE, #FFFFFF);
        background: -o-linear-gradient(right, #CEE0EE, #FFFFFF);
        background: linear-gradient(to left, #CEE0EE, #FFFFFF);
        font-family: "Roboto", sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;      
}

@media screen and (max-width:959px){
        #banner, #event_banner { width: 100%; }
        .top-bar { width: 100%; }
}

@media screen and (max-width:700px){
        .bar-content-wrapper {
                display: block;
        }

        .top-bar {
                padding-top: 10px;
                padding-bottom: 10px;
        }

        .bar-name {
                display: block;
                margin: auto;
                text-align: center;
        }

        .bar-credit-cell {
                display: block;
                text-align: center;
        }

        .bar-credit {
                text-align: center;
                margin-top: 5px;
        }

        .bar-attendance {
                text-align: center;
                margin: 5px auto;
        }
}

@media screen and (max-width:450px){
        #banner img, #event_banner img { width:100%; }
}

@media screen and (max-width: 320px){
        #banner, #event_banner { width: 300px; }
        .top-bar { width: 300px; }
}