/*
 *  Load Custom Fonts
 */
@import url(http://fonts.googleapis.com/css?family=Roboto);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:600,400);

/*
 *  General Settings
 */
 

/*
 * Default Margins
 */

    .top-margin-large
    {
        margin-top: 30px;
    }
    
    .top-margin-medium
    {
        margin-top: 20px;
    }
    
    .top-margin-small
    {
        margin-top: 10px;
    }
    
    .bottom-margin-large
    {
        margin-bottom: 30px;
    }
    
    .bottom-margin-medium
    {
        margin-bottom: 20px;
    }
    
    .bottom-margin-small
       {
        margin-bottom: 10px;
    }
    
    
/*
 *  Divider Line Class
 */

    .divider-line
    {
        border-width: 0px 0px 1px 0px;
        border-style: solid;
        border-color: #000000;
        height: 0px;
        margin: 20px 0px 20px 0px;
    }
    
    
/*
 *  Centering classes
 */
    
    .center
    {
        margin-left: auto;
        margin-right: auto;
    }
    
    .vertical-center
    {
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }


/*
 * Button Style
 */

    .navigation-button
    {
        font-size: 16px;
        border: none;
        color: #333333;
        background-color: #E0E0E0;
        width: 150px;
        height: 35px;
        line-height: 35px;
        cursor: pointer;
        padding: 0px;
        font-family: 'Open Sans', sans-serif;
        text-align: center;
    }

    

    
    a:active
    {
        animation-duration: 4s;
        animation-name: navbar-link-dim;
        animation-iteration-count: 10000;
    }
    
    .footer
    {
        height: 70px;
        background-color: #282828;
        line-height: 70px;
        border: none;
        margin: 0px;
        padding: 0px;
    }
    .footer > span
    {
        color: #7C7C7C;
        float: left;
        padding: 0px 0px 0px 20px;
        font-size: 12px;
        cursor: default;
    }
    .footer > div
    {
        color: #7C7C7C;
        float: right;
        font-size: 12px;
        padding: 0px 20px 0px 0px;
    }
    .footer > div > a
    {
        font-size: 12px;
        border-style: solid;
        border-color: #7C7C7C;
        border-width: 0px 1px 0px 0px;
        height: 30px;
        padding: 5px 10px 5px 10px;
        cursor: pointer;
    }
    .footer > div > a:hover
    {
        color: #DFDFDF;
    }
    .footer > div > a:last-child
    {
        border-style: none;
    }
    
    
/*
 * HEADER STYLES
 */

    .heading-container
    {
        width: 100%;
        display: table;
        margin: 0;
        
    }
    
    .header
    {
        width: 100%;
        border-style: none;
        height: 80px;
        display: table;
        background-color: #FF9800;
    }
    .header > div
    {
        display: table-row;
    }
    .header > div > div
    {
        display: table-cell;
        vertical-align: middle;
    }
    .header > div > .header-link-container
    {
        padding-right: 40px;
    }
    .header > div > div > img
    {
        margin: 0px 40px 0px 25px;
        border-style: none;
        border-color: #000;
        border-width: 1px;
        float: left;
        display: block;
        width: 225px;
    }
    .header > div > .header-link-container > a
    {
        font-size: 14px;
        margin: 0px 0px 0px 10px;
        padding: 0px 0px 5px 0px;
        color: #282828;
        border-color: #282828;
        border-style: solid;
        border-width: 0px 0px 1px 0px;
        cursor: pointer;
        text-decoration: none;
        float: right;
    }
    .header > div > .header-link-container > a:hover
    {
        color: #888888;
        border-color: #888888;
    }
    
    
/*
 * NAVBAR STYLES
 */

    .navbar
    {
        border: none;
        color: #FFFFFF;
        background-color: #FB8C00;
        height: 36px;
        line-height: 100%;
        text-align: center;
        padding: 0px 40px 0px 0px;
    }
    .navbar > a
    {
        float: right;
        height: 35px;
        line-height: 36px;
        font-size: 10px;
        cursor: pointer;
        margin: 0px 0px 0px 20px;
        text-decoration: none;
        color: #FFFFFF;
        transition: color 0.6s ease-in;
        
        
    }
    .navbar > a:hover
    {
        color: #000000;
        transition: color 0.6s ease-in;
    }
    
    
/*
 * SIDE MENU STYLES
 */

    .side-menu
    {
        height: 100%;
        width: 250px;
        background-color: #F5F5F5;
        color: #000000;
        float: left;
    }
    
    .side-menu-item
    {
        width: 100%;
        height: 50px;
        line-height: 50px;
        border-style: solid;
        border-width: 0px 0px 1px 0px;
        border-color: #DADADA;
        padding: 0px 0px 0px 10px;
        cursor: pointer;
        background-color: transparent;
    }
    .side-menu-item > div
    {
        display: none;
    }
    .side-menu-item > i
    {
        margin-right: 10px;
        font-size: 20px;
        width: 25px;
    }
    
    .side-menu-item-selected
    {
        width: 100%;
        height: 50px;
        line-height: 50px;
        border-style: solid;
        border-width: 0px 0px 1px 0px;
        border-color: #DADADA;
        padding: 0px 0px 0px 10px;
        cursor: pointer;
        background-color: #81D4FA;
    }
    .side-menu-item-selected > div
    {
        float: right;
        width: 10px;
        height: 26px;
        border: 13px solid transparent;
        border-right-color: #FFFFFF;
        margin-top: 12px;
    }
    .side-menu-item-selected > i
    {
        margin-right: 10px;
        font-size: 20px;
        width: 25px;
    }
    
    
    .panel-container
    {
        display: block;
        width: 100%;
        height: 100%;
        border: none;
        padding: 0;
        margin: 0;
        overflow: scroll;
    }
    
    .visible-panel
    {
        display: block;
        height: 100%;
        width: 100%;
    }
    .hidden-panel
    {
        display: none;
    }
    
/*
 * Text and font classes
 */
    .normal-text
    {
        font-size: 14px;
    }
    
    
/*
 * Navigation pane classes
 */
    



/*
 *  Lightbox
 */    
    
    .lightbox {
        /** Default lightbox to hidden */
        display: none;

        /** Position and style */
        position: fixed;
        z-index: 999;
        width: 100%;
        height: 100%;
        text-align: center;
        top: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
    } 
    
    .lightbox img {
        /** Pad the lightbox image */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .lightbox:target {
        /** Remove default browser outline */
        outline: none;
        
        /** Unhide lightbox **/
        display: block;
    }
    
    
/*
 *  Message Box
 */
.messagebox
{
    width: 400px;
    border: none;
    color: #222222;
    background-color: #FFFFFF;
    
    position: fixed;
    
}
.messagebox-start
{
    opacity: 0.0;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%) scale(0.5) ;
}
.messagebox-in
{
    opacity: 1.0;
    transform: translateY(-50%) translateX(-50%) scale(1.0) ;
    top: 50%;
    left: 50%;
    
    -moz-transition:  all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.messagebox-out
{
    opacity: 0.0;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%) scale(0.5) ;
    
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.messagebox-background
{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: #000000;
}
.messagebox-background-start
{
    opacity: 0.0;
}
.messagebox-background-in
{
    opacity: 0.6;
    
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.messagebox-background-out
{
    opacity: 0.0;
    
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
    

/*
 *  New Registration Form
 */
.course-card-hidden
{
    max-height: 0px;
    overflow: hidden;
    
    transition: max-height 0.3s ease-in;
}
.course-card-registration-visible
{
    max-height: 370px;
    overflow: hidden;
    
    transition: max-height 0.3s ease-in;
}
.course-card-reregistration-visible
{
    max-height: 370px;
    overflow: hidden;
    
    transition: max-height 0.3s ease-in;
}
.course-card-continue-visible
{
    max-height: 180px;
    overflow: hidden;
    
    transition: max-height 0.3s ease-in;
}

.start-registration-button
{
    padding: 0px;
    border-width: 0px 0px 0px 3px;
    border-color: #515553;
    height: 50px;
    outline: none;
    display: block;
    color: #333333;
    font-size: 16px;
    overflow: hidden;
}
.start-registration-button-inactive
{
    height: 50px;
    background-color: #E0E0E0;
    cursor: pointer;
    
    transition: all 0.3s ease-in;
}
.start-registration-button-active
{    
    height: 50px;
    background-color: #B3E5FC;
    cursor: default;
    
    transition: all 0.3s ease-in;
}
.start-registration-button-hidden
{    
    height: 0px;
    background-color: #E0E0E0;
    cursor: pointer;
    
    transition: all 0.3s ease-in;
}