/* 
    Color Keys
    Light Blue: #6dccde;
    Blue: #346e94;
    Dark Blue:  #1e475b;
    Gray: #dedcd8;
    CSS Reset
*/

html, body, div, span, applet, object, iframe, blockquote, pre,
abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd,
fieldset, form, label, legend,
table, caption,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video
{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

strong
{
    font-weight:bold;
}

td
{
    vertical-align: top;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section
{
    display: block;
}

body
{
    line-height: 1;
}

ol, ul
{
    list-style: none;
}

blockquote, q
{
    quotes: none;
}

    blockquote:before, blockquote:after,
    q:before, q:after
    {
        content: '';
        content: none;
    }

table
{
    border-collapse: collapse;
    border-spacing: 0;
}

th
{
    font-weight: bold;
}
/* 
    End of CSS Reset
*/

/*
    Basic Layout
*/
body, html
{
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
    width: 100%;
    font-size: 100%;
    background: #dedcd8;
    color: #333;
}

h1, h2, h3, h4, h5, h6
{
    color: #578baa;
    font-weight: bold;
    padding: 0;
    margin: 5px 0;
}

.title
{
    color: #666;
    font-size: 137.5%;
    padding-bottom: 10px;
}

img
{
    max-width: 100%;
    height: auto;
}

a, a:visited, a:active
{
    color: #666;
    font-weight: bold;
    text-decoration: none;
}

    a:hover
    {
        color: #346e94 !important;
        text-decoration: underline !important;
    }

.lpanel
{
    float: left;
    width: 20%;
    height: 100%;
    display: table;
    position: fixed;
}

.rpanel
{
    padding: 2%;
    height: 100%;
    text-align: left;
    width: 75%;
    float: right;
}

input,textarea, select
{
    border: 1px solid #ccc;
    border-radius: 5px;
}

    input[type="text"],textarea, select
    {
        padding: 5px;
        margin: 10px 0;
        width: 95%;
    }

    input[type="button"], input[type="submit"], a.button2
    {
        background-position: 0% 0%;
        padding: 5px 10px;
        font-size: 87.5%;
        border: 1px solid #1e475b;
        border-radius: 5px;
        color: White;
        font-weight: bold;
        background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.33, rgb(40,92,122)), color-stop(0.84, rgb(61,127,162)) );
        width: 95px;
        background-color: rgb(40,92,122);
        background-repeat: repeat;
        background-attachment: scroll;
    }

#searchBox
{
    border-radius: 5px;
    padding: 5px;
    margin: 1% 0;
    background: white;
    line-height: 100%;
    border: 1px solid #1e475b;
}

    #searchBox input
    {
        border: 0;
        margin: 0;
        vertical-align: middle;
    }

        #searchBox input[type="text"]
        {
            width: 80%;
        }

        #searchBox input[type="image"]
        {
            vertical-align: middle;
            float: right;
        }

input[type="button"]:hover, input[type="submit"]:hover, a.button2:hover
{
    background: rgb(40,92,122);
    cursor: pointer;
    text-decoration: none;
    color: #FFF;
}

/*select
{
    border-radius: 5px;
    padding: 4px;
    margin: 1% 3%;
    background: white;
    line-height: 100%;
    width: 50%;
    border: 1px solid #1e475b;
}*/

ul
{
    list-style-type: none;
    padding: 0 5px;
}

    ul li
    {
        padding: 5px 0;
    }

        ul li:before
        {
            content: "» ";
            font-weight: bold;
            color: #346e94;
        }

#tableContaniner
{
    background: #346e94;
    padding: 5px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

    #tableContaniner table
    {
        width: 100%;
    }

    #tableContaniner th
    {
        padding: 5px;
        color: white;
    }

    #tableContaniner tr td
    {
        padding: 5px;
        background: white;
        border-top: 1px solid #888;
        color: #999;
        font-size: 115%;
        font-weight: bold;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #tableContaniner tr.newItem td
    {
        background: #f9f4cb !important;
        cursor: pointer;
        cursor: hand;
    }

    #tableContaniner tr.oldItem td
    {
        cursor: pointer;
        cursor: hand;
    }

.lpanelContainer
{
    max-width: 300px;
    height: 100%;
    background: url('/Img/lpanelBg.jpg') repeat-y top left;
    min-height: 500px;
}

.lpanel #logo
{
    text-align:center;
    padding: 6%;
}

.lpanel #loginName
{
    color: white;
    font-weight: bold;
    font-size: 112.5%;
}

.lpanel #lastVisited, .rpanel #lastVisited
{
    color: #6dccde;
    font-weight: bold;
    font-size: 85%;
}

.lpanel #loginContainer
{
    padding: 0 20px 30px 20px;
}

.lpanel #navBotton div
{
    vertical-align: middle;
    color: White;
    font-weight: bold;
    padding: 5px 10px;
    border: 2px solid #1e475b;
    border-top: none;
    background: rgb(40,92,122);
    background-image: linear-gradient(bottom, rgb(40,92,122) 33%, rgb(61,127,162) 84%);
    background-image: -o-linear-gradient(bottom, rgb(40,92,122) 33%, rgb(61,127,162) 84%);
    background-image: -moz-linear-gradient(bottom, rgb(40,92,122) 33%, rgb(61,127,162) 84%);
    background-image: -webkit-linear-gradient(bottom, rgb(40,92,122) 33%, rgb(61,127,162) 84%);
    background-image: -ms-linear-gradient(bottom, rgb(40,92,122) 33%, rgb(61,127,162) 84%);
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.33, rgb(40,92,122)), color-stop(0.84, rgb(61,127,162)) );
    color: White;
    font-size: 145%;
    height: 20%;
    line-height: 145%;
}

    .lpanel #navBotton div:after
    {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .lpanel #navBotton div:first-child
    {
        border-top: 2px solid #1e475b;
    }

    .lpanel #navBotton div img
    {
        max-width: 20%;
        height: auto;
        float: left;
        padding: 10px 20px 10px 20px;
    }

.rpanelContent .container
{
    background: rgb(245, 245, 245);
    padding: 2%;
    border-radius: 5px;
    position: relative;
}

/*
    Schedule Page
*/
#schedule .header
{
    line-height: 100%;
}

    #schedule .header input
    {
        vertical-align: middle;
        margin-left: 1%;
    }
/*
    End of Schedule Page
*/

/*
    End of Basic Layout
*/

/*
    Schedule Page
*/
#schedule .header
{
    line-height: 100%;
}

    #schedule .header input
    {
        vertical-align: middle;
        margin-left: 1%;
    }
/*
    Admin Page
*/
#admin ul li
{
    font-size: 125%;
    padding: 10px 0;
}

/*
    End of Admin  Layout
*/


/* #Tablet (Landscape)
================================================== */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
{
    body
    {
        font-size: 90%;
    }
}

/* #Tablet (Portrait)
================================================== */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)
{
    body
    {
        font-size: 80%;
    }
}

/*  #Mobile (Landscape)
================================================== */

/* Note: Design for a width of 320px */

@media only screen and (min-width : 0x)
{
    body
    {
        font-size: 70%;
    }
}


/*  #Mobile (Portrait)
================================================== */

/* Note: Design for a width of 320px */

@media only screen and (max-width: 400px)
{
    body
    {
        font-size: 70%;
    }

    .lpanel, .rpanel
    {
        width: 100%;
        float: none;
        margin: auto;
        height: 100%;
        padding: 0;
        /*position: relative;*/
    }

    .rpanel
    {
        height:auto;
        position:absolute;
        top:200px;
    }

    .rpanelContent
    {
        padding: 5px;
    }

    .lpanelContainer
    {
        max-width: none;
    }
}


#simplemodal-container a.modalCloseImg
{
    background: url(/images/x.png) no-repeat; /* adjust url as required */
    width: 25px;
    height: 29px;
    display: inline;
    z-index: 3200;
    position: absolute;
    top: -15px;
    right: -18px;
    cursor: pointer;
}


.button
{
    border: 1px solid #EBEBEB;
    padding: 10px;
    display: inline-block;
    background-color: #fff;
    padding-bottom: 8px;
}

#tableContaniner tr.Completed td
{
    cursor: pointer;
    cursor: hand;
    background-color: #FFA028;
}

#tableContaniner tr.InProgress td
{
    cursor: pointer;
    cursor: hand;
    background-color: #FFA028;
}

#tableContaniner tr.Pending td
{
    cursor: pointer;
    cursor: hand;
    background-color: #1796B0;
}

#tableContaniner tr.ToBeScheduled td
{
    cursor: pointer;
    cursor: hand;
    background-color: #66C42E;
}




.lbtn
{
    border: 1px solid #ccc;
    border-radius: 5px;
}

.lbtn
{
    padding: 5px;
    margin: 10px 0;
    width: 95%;
}

a.lbtn:link, a.lbtn:visited, a.lbtn:hover, a.lbtn:active
{
    background-position: 0% 0%;
    padding: 5px 10px;
    font-size: 87.5%;
    border: 1px solid #1e475b;
    border-radius: 5px;
    color: White;
    font-weight: bold;
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.33, rgb(40,92,122)), color-stop(0.84, rgb(61,127,162)) );
    width: 88px;
    background-color: rgb(40,92,122);
    background-repeat: repeat;
    background-attachment: scroll;
    text-align: center;
    text-decoration: none;
}