/* BASIC STRUCTURE */

html, body {
    height: 100%;
    width: 100%;
}

body {
    padding: 0;
    text-align: center;
    margin: 0 auto;
}

.mainBg {
    background: url(../images/layout/learningYellow.png);
    background-attachment: fixed;
    background-color: #0d212f;
    background-position: top center;
    background-repeat: no-repeat;
    margin: 0 auto;
}

div#page {
    /*width: 960px;*/
    margin: 0px auto 0 auto;
    padding: 0px 0px 0px 0px;
    position: relative;
    text-align: center;
    height: auto !important;
}


div#TopName h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 42px;
    font-weight: normal;
    color: #fffa7c;
    text-align: center;
    line-height: normal;
    text-shadow: 2px 2px 5px #646001;
}




#container {
    margin: 0px auto 0 auto;
    padding: 0px 0px 0px 0px;
    width: 990px;
    height: auto;
    min-height: 760px;
    /*   background-color:#f6e8a0;*/
    background-color: #ffffff;
    -moz-box-shadow: 0 0 15px #000;
    -webkit-box-shadow: 0 0 15px #000;
    box-shadow: 0 0 15px #000;
    position: relative;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
}


/* HEADINGS   
----------------------------------------------------------*/
/* HEADER */

/*div#header
{
    min-height: 2%;
    width: 960px;
    margin: 10px auto 0 auto;
    padding: 0 20px;
    position: relative;
    text-align: center;
    background: url(../images/layout/topBg.jpg) no-repeat;
    	-moz-box-shadow: 0 0 15px #000;
	-webkit-box-shadow: 0 0 15px #000;
box-shadow: inset 0 15px 15px -15px black;
}

div#branding
{
    background: url(../images/layout/HamptonBanner.png) no-repeat;
    height: 190px;
	border-bottom:5px solid #0092be;
    men
}*/



/* TAB MENU   
----------------------------------------------------------*/
div#TopMenu {
    padding: 0;
    text-align: center;
    margin: 0 auto;
    width: 100%;
    height: 100%;
}

div#MemberName {
    position: absolute;
    top: 4em;
    right: 1em;
}
/* MISC  
----------------------------------------------------------*/

/* Grid */


.Grid {
    text-align: center;
    margin: 0 auto;
    color: #ffffff;
    font-weight: normal;
    font-size: small;
}

.GridXSmall {
    text-align: center;
    margin: 0 auto;
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: x-small;
    border-color: #184885;
}

.GridSmall {
    text-align: center;
    margin: 0 auto;
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: normal;
    border-color: #184885;
}

.fpsmallheaderstyle {
    background-color: #184885;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    color: #FFFFFF;
    text-decoration: none;
}

    .fpsmallheaderstyle a {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-style: normal;
        font-weight: normal;
        color: #FFFFFF;
        text-decoration: none;
    }



/* Button */

.colorbutton {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: normal;
    color: #FFFFFF;
    background-color: #646001;
    border-color: #000000;
    border-style: solid;
    border-width: 1px;
    text-decoration: none;
}

.colorbutton12 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    color: #FFFFFF;
    background-color: #646001;
    border-color: #000000;
    border-style: solid;
    border-width: 1px;
    text-decoration: none;
}


/* Labels */

.label14 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    color: #000000;
}



.label14Bold {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: Bold;
    text-decoration: none;
    color: #000000;
}

.label12 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    color: #000000;
}

.label12Bold {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    color: #000000;
}

.label10 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    color: #000000;
}



.label18Bold {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
}
.label16Bold {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    color: #000000;
    text-decoration: none;
}



.label14Red {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    color: #FF0000;
    text-decoration: none;
}

.label12Red {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    color: #FF0000;
    text-decoration: none;
}

.label10Red {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: normal;
    color: #FF0000;
    text-decoration: none;
}

.label14RedBold {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    color: #FF0000;
    text-decoration: none;
}

.label16Red {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    color: #ff0000;
    text-decoration: none;
}

.label16RedBold {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    color: #ff0000;
    text-decoration: none;
}

.label24Red {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: normal;
    color: #ff0000;
    text-decoration: none;
}

.label16Success {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    color: #646001;
    text-decoration: none;
}
.LabelTheme22 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: bold;
    color: #000000;
    text-decoration: none;
    text-transform: uppercase;
}
/* Textbox */


.textbox14 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    border-color: #000000;
    border-width: 1px;
}

.textbox14Red {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    border-color: #FF0000;
    border-width: 1px;
}


.textbox12 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    border-color: #0092be;
    border-style: solid;
}

.textbox12Red {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    border-color: #FF0000;
}

.textbox10 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    border-color: #184885;
}

.textbox10Red {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    border-color: #FF0000;
}

/* Tables / Td */




.tdColor {
    background-color: #646001;
}

.tdLightColor {
    background-color: #dcdcdc;
}

.tdlargerLabel {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    color: #ffffff;
    text-decoration: none;
    background-color: #5f7faf;
}
/* clearing */
.stretch, .clear {
    clear: both;
    height: 1px;
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1px;
}

.clearfix:after {
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
    content: ".";
}

.clearfix {
    display: inline-block;
}
/* Hide from IE Mac \*/
.clearfix {
    display: block;
}
/* End hide from IE Mac */
/* end clearing */

/* FOOTER */

div#footer {
    color: #0092be;
    width: 960px;
    margin: 0 auto;
    padding: 30px 20px 20px 20px;
    font-weight: normal;
    font-style: normal;
    text-align: center;
    /*background: url(../images/layout/footerBg.jpg) no-repeat;*/
}


#footer a, #footer a:link, #footer a:active {
    color: #5f7ba0;
    padding: 0;
    text-decoration: none;
}

    #footer a:visited {
        color: white;
    }

    #footer a:hover {
        text-decoration: none;
        color: #0092be;
    }

.TableBorder {
    border-color: #184885;
    border-style: solid;
    border-width: 2px;
}

/* END FOOTER */


/*Calendar Css Classes*/



.watermarked2 {
    color: #184885;
    font-style: italic;
    text-decoration: none;
    border-color: #0092be;
    border-style: solid;
}

.watermarked {
    color: #dcdcdc;
    font-size: small;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: italic;
    border-color: #184885;
}


/*Calendar Control CSS*/

.custom-calendar .ajax__calendar_container {
    background-color: #ffffff; /* pale yellow */
    border: groove 3px #184885;
    width: 200px;
}

.custom-calendar .ajax__calendar_title {
    background-color: #184885; /* pale green */
    height: 20px;
    color: #fff;
    border-bottom-color: #184885;
    border-bottom-style: groove;
    border-bottom-width: 2px;
}

.custom-calendar .ajax__calendar_prev {
    background-color: #184885; /* darker gray */
    height: 20px;
    width: 20px;
    border-bottom-color: #184885;
    border-bottom-style: groove;
    border-bottom-width: 2px;
    background-image: url(../images/arrow-left.png);
}

.custom-calendar .ajax__calendar_next {
    background-color: #184885; /* darker gray */
    height: 20px;
    width: 20px;
    border-bottom-color: #184885;
    border-bottom-style: groove;
    border-bottom-width: 2px;
    background-image: url(../images/arrow-right.png);
}

.custom-calendar .ajax__calendar_today {
    background-color: #184885; /* pale blue */
    height: 20px;
    border-top-color: #184885;
    border-top-style: groove;
    border-top-width: 2px;
    color: #ffffff;
    font-weight: bold;
}

.custom-calendar .ajax__calendar_days table thead tr td {
    padding-top: 5px; /* dark yellow */
    color: #000000;
    font-size: 12px;
}

.custom-calendar .ajax__calendar_day {
    color: #000000; /* normal day - darker gray color */
    font-size: 12px;
}

.custom-calendar .ajax__calendar_other .ajax__calendar_day {
    color: #dcdcdc; /* day not actually in this month - lighter gray color */
}

.custom-calendar .ajax__calendar_body {
    padding: 0px,0px,0px,0px;
    border-spacing: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    width: 200px;
}

.custom-calendar td {
    padding: 0px,0px,0px,0px;
    border-spacing: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

.custom-calendar.ajax__calendar_hover .ajax__calendar_day, .custom-calendar .ajax__calendar_hover .ajax__calendar_month, .custom-calendar .ajax__calendar_hover .ajax__calendar_year {
    color: #000000;
    font-weight: bold;
}

.custom-calendar .ajax__calendar_active .ajax__calendar_day, .custom-calendar .ajax__calendar_active .ajax__calendar_month, .custom-calendar .ajax__calendar_active .ajax__calendar_year {
    color: #000000;
    font-weight: bold;
}
/*Report Colors */

div.un_l {
    background: #d3d3d3 url(../images/pcSizeGrip.gif) no-repeat right center;
    clear: both;
    border-bottom: 2px groove #AD0127;
    border-left: 2px groove #AD0127;
    text-align: left;
    color: #AD0127;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
}

a.un_l, a.un_l:visited {
    padding: 2px;
    color: #AD0127;
    text-decoration: none;
    display: block;
}

    a.un_l:hover {
        background: #fff url(../images/pcSizeGrip.gif) no-repeat right center !important;
        color: #AD0127;
        font-weight: bold;
    }


.un_b1 {
    border-top: 2px groove #AD0127;
}

/* -- ASPxMenu -- */


.dxmMenu {
    font-family: Tahoma, Geneva, sans-seri;
    font-size: 20px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    background-color: #646001;
    border-bottom: 1px solid #ffffff;
    padding-bottom: 3px;
    padding-top: 3px;
    padding-right: 10px;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    color: #ffffff;
}


.dxmLite .dxm-main {
    color: #ffffff;
    padding: 5px;
    text-decoration: none;
    background-color: #646001;
}



    .dxmLite .dxm-main .dxm-hovered {
        color: #fffa7c;
        text-decoration: none;
    }


.dxmLite .dxm-popup .dxm-selected {
    color: #ffffff;
    text-decoration: none;
    /*background-color: #ffffdb;*/
}

.dxm-item:hover {
    color: #fffa7c;
    text-decoration: none;
    /*background-color: #ffffdb;*/
}

.dxmLite .dxm-popup .dxm-hovered {
    /*background-color: #ffffdb;*/
    color: #fffa7c;
    text-decoration: none;
}

.dxmLite .dxm-item a.dx {
    text-decoration: none;
}

.dxm-item li:hover {
    color: #fffa7c;
}

.dxmLite ul li {
    list-style: none !important;
}

.ItemSubDefault {
    text-align: left;
    padding: 5px;
    white-space: nowrap;
    color: #ffffff; /*Sub Fonts */
    text-decoration: none;
    background-color: #646001;
    margin: 0px auto 0 auto;
}

    .ItemSubDefault a {
        width: auto;
        text-align: left;
        padding: 0px;
        white-space: nowrap;
        color: #ffffff; /*Sub Fonts */
        text-decoration: none;
        background-color: #646001;
    }



    .ItemSubDefault ul {
        color: #ffffff;
        /*border-color: red;
        border-style: groove;
        border-width: 1px;*/
        font-family: Tahoma, Geneva, sans-seri;
        font-size: 20px;
        font-style: normal;
        font-weight: normal;
    }

        .ItemSubDefault ul li {
            font-family: Tahoma, Geneva, sans-seri;
            font-size: 20px;
            font-style: normal;
            font-weight: normal;
        }


    .ItemSubDefault td:hover {
        color: #fffa7c;
        text-decoration: none;
        /*background-color: #ffffdb;*/
    }
    .ItemSubDefault a:hover {
        color: #fffa7c;
        text-decoration: none;
        /*background-color: #ffffdb;*/
    }

.ItemHover {
    color: #fffa7c;
    /*background-color: #ffffdb;*/
}

    .ItemHover a:hover {
        color: #fffa7c;
        /*background-color: #ffffdb;*/
    }



/*span.dx-vam, span.dx-vat, span.dx-vab, a.dx-vam, a.dx-vat, a.dx-vab {
    color: #ffffff;
    padding-left: 10px;
}*/




/* MISC  
----------------------------------------------------------*/
.divlist {
    position: relative;
    z-index: 10002;
    height: 150px;
    width: 450px;
    margin: 0px auto;
    overflow: auto;
    border-color: #184885;
    border-style: solid;
    border-width: 2px;
}

.overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #44484b;
    width: 100%;
    height: 100%;
    -khtml-opacity: .60;
    -ms-filter: "alpha(opacity=60)";
    -moz-opacity: .60;
    opacity: 0.6; /* transparency */
    filter: alpha(opacity=60); /* IE transparency */
}

* html .overlay {
    position: absolute;
}

.loader {
    z-index: 10000;
    position: fixed;
    top: 30%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    /*margin-left: -275px; /* Half the width */
    /*background-color: white;*/
}

* html .loader {
    position: absolute;
}
/*divs List*/
.divMemberlist {
    height: 275px;
    width: 500px;
    margin: 0px auto;
    overflow: auto;
    border-color: #000000;
    border-style: solid;
    border-width: 1px;
    background-color: #ffffff;
    text-align: center;
}

.divlist {
    position: relative;
    z-index: 10002;
    height: 300px;
    width: 550px;
    margin: 0px auto;
    overflow: auto;
    border-color: #000000;
    border-style: solid;
    border-width: 1px;
    background-color: white;
}
/* Progress Bar */

.overlay1 {
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: #FFFFFF;
    width: 100%;
    height: 100%;
    -khtml-opacity: .60;
    -ms-filter: "alpha(opacity=60)";
    -moz-opacity: .60;
    opacity: 0.6; /* transparency */
    filter: alpha(opacity=60); /* IE transparency */
}


* html .overlay1 {
    position: absolute;
    height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
    width: expression(document.body.scrollWidth > document.body.offsetWidth ? document.body.scrollWidth : document.body.offsetWidth + 'px');
}

.loader1 {
    z-index: 100001;
    position: fixed;
    margin-left: -60px;
    top: 50%;
    left: 50%;
}

* html .loader1 {
    position: absolute;
    margin-top: expression((document.body.scrollHeight / 4) + (0 - parseInt(this.offsetParent.clientHeight / 2) + (document.documentElement && document.documentElement.scrollTop || document.body.scrollTop)) + 'px');
}
/* single thumbnail */

a.p1 {
    display: block;
    text-decoration: none;
    background: #fff;
    border: 0;
    float: left;
}

    a.p1 img {
        display: block;
        border: 0;
        vertical-align: bottom;
    }

    a.p1:hover {
        text-decoration: none;
        color: #000;
        position: relative;
        z-index: 500;
    }

    a.p1 b {
        display: block;
        position: absolute;
        left: -9999px;
        padding: 10px;
        opacity: 0;
        -webkit-transition: opacity 0.6s ease-in-out;
    }

    a.p1:hover b {
        top: -20px;
        left: -50px;
        padding: 10px;
        border: 1px solid #aaa;
        background: #fff;
        opacity: 1.0;
    }



.Gridview {
    background-color: #FFFFFF;
    border-color: #000000;
    border-style: solid;
    border-width: 1px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    color: #000000;
    text-decoration: none;
    /*position:relative;
        right:18%;
        display: inline-block*/
}

    .Gridview th {
        padding: 0px 4px 0px 4px;
        text-align: left;
    }



    .Gridview td {
        border: 1px solid #000000;
    }

.Gridheaderstyle {
    background-color: #646001;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    white-space: nowrap;
}

.GridAlternatingRow {
    background-color: lightgray;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    color: #000000;
    text-decoration: none;
}

.Gridheaderstyle2 {
    background-color: #f2dc9b;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    color: #000000;
    text-decoration: none;
    text-align: left;
}

.GridAlternatingRow2 {
    background-color: #ADD8E6;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #000000;
    text-decoration: none;
}



.GridRowStyle {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    color: #000000;
    text-decoration: none;
    white-space: nowrap;
}