@import url(..http://fonts.googleapis.com/css?family=Open+Sans);

.t-center
{
    text-align: center !important;
}

.w100
{
    width: 100% !important;
}

body
{
    margin: 0;
    background-color: black;
    font-family: Roboto;
}

.container
{
    width: 488px;
    margin: auto;
}

.header
{
    padding: 15px 0;
    text-align: center;
    background: url(../images/header-bg.png);
    background-size: cover;
}

.logo
{
}

    .logo img
    {
        width: 35%;
    }

.hr img
{
    width: 50%;
}

.slt img
{
    width:10%;
    margin:2% 5% 0 5%;
}

.slt .sltLang
{
    padding: 10px 0;
    width: 32%;
    background-color: transparent;
    border: 0px;
    color: white;
}

    .slt .sltLang option
    {
        color: black;
    }

.viewopt
{
    font-size: 0px;
    padding: 12px 0;
    background: url(../images/view-bg.png);
    background-size: cover;
    border-bottom: 3px solid #c89d4c;
}

    .viewopt .version
    {
        display: inline-block;
        width: 50%;
        text-align: center;
    }

    .viewopt .version
    {
        cursor: pointer;
    }

        .viewopt .version img
        {
            height: 30px;
        }

        .viewopt .version span
        {
            display: inline-block;
            font-size: 13px;
            color: white;
            padding-top: 8px;
            font-family: Roboto
        }

.user
{
    padding: 22px 20px;
    background-color: #050d31;
}

    .user .user-container
    {
        border-radius: 10px;
        border: 5px solid white;
        padding: 10px;
        background-color: #061127;
    }

        .user .user-container > *
        {
            display: inline-block;
            width: 100%;
            margin-bottom: 7px;
        }

input[type='text'], input[type='password'], button
{
    line-height: 35px;
    border-radius: 5px;
    border: 0;
    padding: 0 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

input[type='checkbox']
{
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

.rMe
{
    display: inline-block;
    color: white;
    vertical-align: middle;
    margin-left: 5px;
    font-size: 14px;
}

#btnSignIn
{
    background: #155995;
    background: -moz-linear-gradient(top, #155995 0%, #213b7e 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #155995), color-stop(100%, #213b7e));
    background: -webkit-linear-gradient(top, #155995 0%, #213b7e 100%);
    background: -o-linear-gradient(top, #155995 0%, #213b7e 100%);
    background: -ms-linear-gradient(top, #155995 0%, #213b7e 100%);
    background: linear-gradient(to bottom, #155995 0%, #213b7e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#155995', endColorstr='#213b7e', GradientType=0 );
    font-size: 20px;
    font-weight: bold;
    color: #ebca5a;
    text-shadow: 2px 2px #0000008c;
    box-shadow: inset 1px 1px #ffffff6b;
}

a
{
    border-bottom: 1px solid #ffffff47;
    color: white;
    font-size: 15px;
    text-decoration: none;
}

.images
{
    text-align: center;
}

    .images img
    {
        width: 80%;
        margin-top: 20px;
    }

.footer
{
    background-color: #050d31;
    text-align: center;
    padding: 10px 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

    .footer .link
    {
        display: inline-block;
        padding: 5px 10px;
        color: white;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

        .footer .link img
        {
            height: 30px;
            vertical-align: middle;
            margin-right: 5px;
        }

a.tnc
{
    border: 0;
    font-size: 11px;
    color: #ffffffd1;
}

.footer .restriction
{
    margin: 10px 0;
}

    .footer .restriction img
    {
        width: 20%;
    }

.footer .copyright p
{
    color: #9cb6dc;
    font-size: 12px;
    margin:0;
}

.footer-nav
{
    background:url(../images/footnav-bg.png);
    background-size:cover;
    padding:10px 0;
    position:fixed;
    bottom:0;
    width:inherit;
}

    .footer-nav ul
    {
        margin:0;
        padding:0;
        font-size:0px;
    }

        .footer-nav ul li
        {
            display:inline-block;
            list-style:none;
            width:20%;
            text-align:center;
        }

            .footer-nav ul li:hover
            {
                cursor:pointer;
            }

            .footer-nav ul li img
            {
                height:50px;
            }

@media screen and (max-width: 480px)
{
    .container
    {
        width: 100%;
    }
}