/* general styles */
/* ========================================================================== */

html, body {
    margin: 0px;
    padding: 0px;
    min-width: 1000px; /* STOP ELEMENT WRAPING*/
    background: #F2F5F7;
}

body {
    display: block;
    float: none;
    font-family: arial;
    font-size: 11px;
    color: #000000;
    margin: 0px;
    padding: 0px;
}

hr {
    height: 1px;
    color: #000000;
}

a, .hyperlinkFaux {
    color: blue;
    text-decoration: none;
}

    a:hover, .hyperlinkFaux:hover {
        text-decoration: underline;
        color: blue;
    }

.pageDiv {
    /* Outer page container - think of the entire form. SW11381 05/07/2010 */
    display: block;
    width: 100%;
    padding-top: 0px;
    margin: 0px;
}






/*
    Portal Floating menu
    Is now optional, not much use in most cases.
*/





/* 
   
Portal heading style elements

*/

h1.header {
    display: inline-block;
    float: none;
    width: 100%;
    color: #3A637A;
    vertical-align: top;
    text-align: left;
    text-indent: 5px;
    font-size: 24px !important;
    vertical-align: bottom;
    background-repeat: no-repeat;
    background-position: right top;
    line-height: 34px;
    border-bottom: solid 1px;
    font-weight: bold;
    clear: both;
    margin-top: 0px;
    margin-bottom: 20px;
}




h2, .headerDiv {
    display: inline-block;
    float: none;
    width: 100%;
    background-color: #3A637A;
    vertical-align: top;
    text-align: left;
    text-indent: 5px;
    color: #FFFFFF;
    font-size: 11px;
    vertical-align: bottom;
    background-image: url(../Images/triangw.gif);
    background-repeat: no-repeat;
    background-position: right top;
    line-height: 20px;
    font-weight: bold;
    clear: both;
    margin-top: 0px;
}

    .headerDiv label {
        display: inline-block;
        float: left;
        width: auto;
    }

    h2.tableHead, .headerDiv.tableHead {
        margin-bottom: 0px;
        padding-left: 2px;
    }

    .headerDiv span {
        display: inline-block;
        float: right;
        font-size: 10px;
        color: White;
        margin-right: 25px;
    }

.SubHeaderDiv {
    display: block;
    float: left;
    width: 100%;
    height: auto;
    background-color: #DCDCDC;
    border-left: 1px solid #9F9F9F;
    border-right: 1px solid #9F9F9F;
}



.heading_cell /* need to phase heading cells out.. convert to h2 or headDiv*/ {
    display: block;
    float: left;
    min-height: 20px;
    width: 100%;
    background-color: #3A637A;
    text-align: left;
    color: #FFFFFF;
    font-size: 11px;
    text-indent: 5px;
    background-image: url(../Images/triangw.gif);
    background-repeat: no-repeat;
    background-position: right;
    background-position: top right;
    line-height: 20px;
    padding-left: 1px;
}

    .heading_cell span {
        display: inline-block;
        float: left;
        margin-right: 25px;
    }


/* heading labels (students, classes, results). SW 26/2/08 */

.heading_label /* tab_hdr */ {
    font-size: 14px;
    font-weight: bold;
}

.heading_cell .showResultsButtons { 
    display: inline-block;
    float: left;
    width: 100px;
    margin-right: 25px;
}

    .heading_cell .showResultsButtons input {
        margin-left: 30px;
    }

/*
    Page Layout styles
*/

.bodyDiv {
    display: inline-block;
    float: left;
    width: 100%;
    vertical-align: top;
    /*text-align: left;*/
    border: 0px;
    margin: 0;
}

.leftColumn {
    display: table-cell;
    float: none;
    min-width: 760px;
    width: auto;
    padding: 0px 5px 10px 10px;
    overflow: hidden;
}

    .leftColumn .customHTML {
        display: inline-block;
        float: left;
        min-width: 600px;
        width: 100%;
        margin-top: 10px;
        margin-bottom: 20px;
        clear: both;
    }

.rightColumn {
    float: none;
    width: 200px;
    max-width: 200px;
    padding: 10px 0 5px 5px;
    vertical-align: top;
}
/* 
    Portal column framwork for left column elements.
*/
.column_one, .column_two, .column_three, .column_four, .column_five, column_six, column_seven, column_Max {
    display: inline-block;
    float: left;
    margin: 0px;
    clear: none;
    margin-right: 5px;
    margin-left: 5px;
}

.column_two {
    width: 200px;
}

.column_three {
    width: 300px;
}

.column_four {
    width: 400px;
}

.column_five {
    width: 500px;
}

.column_six {
    width: 600px;
}

.column_seven {
    width: 700px;
}

.column_MaxMinWdith {
    width: 750px;
}

.column_Max {
    width: 100%;
}

.column_one h2, .column_two h2, .column_three h2, .column_four h2, .column_five h2, column_six h2, column_seven h2, column_Max h2 {
    width: 100%;
}

.alpha {
    margin-left: 0px;
}

.omega {
    margin-right: 0px;
}

/* columns with the Omega class  get an extra 60 pixes so we make the most of our space. */
.column_two.omega {
    width: 250px;
}

.column_three.omega {
    width: 350px;
}

.column_four.omega {
    width: 450px;
}

.column_five.omega {
    width: 550px;
}

.column_six.omega {
    width: 650px;
}

.column_seven.omega {
    width: 750px;
}




.columnVertDivider /* Space out regions verticly*/ {
    display: block;
    float: none;
    clear: both;
    width: auto;
    margin-bottom: 10px;
}


/* Local system messages style */

.localSystemMessage {
    display: block;
    float: none;
    width: 200px;
    min-height: 20px;
    line-height: 20px;
    margin: 0px auto;
}

    .localSystemMessage .heading_cell {
        background-color: #990000;
    }


    .localSystemMessage ul {
        margin: 0px;
        text-align: left;
        padding-left: 12px;
        padding-top: 5px;
    }

        .localSystemMessage ul li {
            margin-bottom: 5px;
        }

    .localSystemMessage .messageBox {
        display: block;
        float: none;
        width: auto;
        min-height: 20px;
        line-height: 15px;
        border: 1px solid #990000;
        background-color: White;
        color: #990000;
        font-size: 11px;
        padding: 5px;
        clear: both;
        text-align: center;
        margin-bottom: 10px;
    }


/*
    LoginPage Sytles
*/
.loginPageContainer {
    display: block;
    float: left;
    width: 100%;
    height: auto;
}

    .loginPageContainer .centerPanel {
        display: block;
        float: none;
        width: 960px;
        margin: 0px auto;
    }



.BodyDivVertical {
    /* Body container (for vertical menu only) 		- think of the body of the web page eg if a client turns off header and menu then this is all that will be displayed. SW11381 05/07/2010  	*/
    float: left;
    vertical-align: top;
    height: 100%;
    text-align: left;
    border: 0px;
    width: 90%;
}


/* Entire Page Container - now sitting inside the BodyDiv */
.page_tbl_container /* gnrl_tbl */ {
    width: 100%;
    padding-top: 10px;
}

/* header container: used for the container of the customhtml and the student names */
.hdr_tbl_container /* hdr_tbl */ {
    width: 100%;
    height: 100%;
    border: 0px;
}

/* Body Container Everything under the Header and Error Areas - used in contacts, email, fin, login, pti, stures, tmtbl */
.body_tbl_outer_container /* hdr_btm */ {
    height: 100%;
    width: 100%;
    vertical-align: top;
}


.body_tbl_outer_container_loginPanel {
    display: block;
    float: none;
    width: auto;
    margin: auto auto;
}



/* Top Menu Button (is actually a TableCell. SW 19/2/08 */
.mnu_btn_cell /* lnk_drk_row */ {
    background-color: #3A637A;
}

/* Table row above the Top Menu Buttons (is a TableCell). SW 19/2/08 */
.mnu_btn_cell_top /* lnk_drk_row_top */ {
    background-color: #3A637A;
    font-size: 1px;
}

/* header area - used in hdr1.html. SW 26/2/08 */
.html_hdr_top /* hdr_top */ {
    vertical-align: top;
    text-align: center;
}

/* highlighted student name eg. Mandy Adamski, Guy Adamski on top right hand corner. SW 26/2/08 */
.selected_student_name {
    background-color: #3A637A;
    vertical-align: top;
    text-align: left;
    color: #FFFFFF;
    font-size: 11px;
    vertical-align: inherit;
    padding-right: 5px;
    padding-left: 5px;
}


.right_body_container {
    min-width: 450px;
    width: 1em;
    color: Green;
}

/* In the Results and contacts pages - everything under the headings (eg. information and calender). SW 26/2/08 */
.tableBlackTopBorder /* cla_tab */ {
    border: 0;
    border-top: black solid 1px;
    padding-top: 2px;
    width: 100%;
}





/************************* 
	Weekly Timetable
*************************/
#TimetableWeekly {
    width: 100%;
}

    #TimetableWeekly table {
        border-collapse: collapse;
        border-spacing: 2px 2px;
        font-family: arial;
        font-size: 11px;
        padding-top: 2px;
        width: 100%;
    }

        #TimetableWeekly table tr th {
            background-color: #E4E4E4;
            font-size: 12px;
            padding: 5px;
        }

        #TimetableWeekly table tr td {
            background: url(../images/dotted.gif) repeat-x bottom;
            height: 30px;
            padding: 2px 5px 2px 5px;
            vertical-align: inherit; /*word-break: break-all;*/
            text-align: center;
        }

#Timetable_CustomHTML {
}

/* Weekly Timetable - Header Cells */
.time_whc_cell {
    color: Red;
    text-align: center;
    background: url("../images/dotted.gif") repeat-x scroll center bottom transparent;
}

.time_wh_cell {
    color: #000000;
    text-align: center;
    background: url("../images/dotted.gif") repeat-x scroll center bottom transparent;
    font-weight: bold;
    background-color: #E4E4E4;
}

/* Weekly Timetable - Regular Cells */
.time_wtc_cell {
    font-weight: bold;
    background-color: #EBECED;
}

.time_wdc_cell {
    background-color: #EBECED;
}

.time_wt_cell {
    font-weight: bold;
}

.time_wd_cell {
}

.res_tab, fin_tab {
    border: 0;
    border-top: black solid 1px;
    padding-top: 2px;
}


.res_tab_nl, .fin_tab_nl {
    border: 0;
    padding-top: 2px;
    position: relative;
}

.res_tab, .res_tab_nl {
    width: 100%;
}


/* Textual Hyperlink on each Tab eg Results, Interviews, Contact Us ... */
.lnk_btn {
    font-size: 14px;
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
    color: #FFFFFF;
}

/* The current page Textual Hyperlink on each Tab eg Results, Interviews, Contact Us ... */
.lnk_btn_highlight {
    font-size: 14px;
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
    color: #BCFBFF; /* light blue */
}

.lnk_btn:hover {
    text-decoration: none;
}

/*
    Error Message styles
*/

.portalErrorMessage {
    display: block;
    width: 100%;
    height: auto;
    text-align: center;
    margin: 10px 0px;
    color: red;
    font-weight: bold;
}

    .portalErrorMessage.big {
        color: white;
        background-color: Red;
        font-weight: bold;
    }

/*
    OLD error message styles, PHASE OUT!
*/
.error_message_div {
    display: block;
    float: left;
    width: 100%;
    height: auto;
    text-align: center;
    margin: 10px 0px;
}

.err_mes {
    color: red;
    font-weight: bold;
}

.err_mes_big {
    color: white;
    background-color: Red;
    font-weight: bold;
}

.portal_booking_closed_msg {
    /* Change the Web booking closed message in PTI. SW8921 10/09/2010 */
    color: white;
    background-color: Red;
    font-weight: bold;
}

.pti_err_mes {
    /* Now that I have made the messages configurable - they may also want to change the styling on error label at top of page. SW8085 10/09/2010 */
    color: red;
    font-weight: bold;
}
/* result cells */
/* ================================================================================ */

/* used in tchr lables etc. */
.gray_lbl {
    color: gray;
    font-size: 10px;
}

.blnk_lft_cell /* the blank Cell to the left of the Assessment Area. SW 28/11/08 */ {
    width: 5%;
}

.res_ttl_cell /* Results Maintenance: Assessment Area description cell with dotted underline */ {
    padding-bottom: 1px;
    border-bottom: 1px dotted black;
    width: 70%;
}

.res_grd_cell /* Results Maintenance: Grade/Actual Result Cell. SW7447 28/11/08 */ {
    font-weight: bold;
    width: 20%;
    vertical-align: bottom;
}

.res_date_cell /* Result date cell after result cell in Results Maintenance. SW7447 28/11/08 */ {
    font-weight: normal;
    width: 5%;
}

.blnk_rght_cell {
    width: 5%;
}

/* Student name Cell in Results when showing all students. SW 29/2/08 */
.name_cell {
    width: 100%;
    font-weight: bold;
    font-size: 12px;
    background-color: #E4E4E4;
    padding: 3px;
}

/* Class Assessment area Table Cell (in Information section). SW 29/2/08 */
.class_type_cell {
    width: 100%;
    font-weight: bold;
    font-size: 12px;
    background-color: #E4E4E4;
    padding: 3px;
}

.prepost_hdr_cell {
    /* Pre and Post reports header (results page) - by default they are the same as the Class type cells eg Academic, Sports, Arts [class_type_cell]. SW 26/5/09 */
    width: 100%;
    font-weight: bold;
    font-size: 12px;
    background-color: #E4E4E4;
    padding: 3px;
}

/* When showing all students - the colour of the Class type Cell (in Information Section). SW 29/2/08 */
.class_type_cell_allstudents {
    width: 100%;
    font-weight: bold;
    font-size: 12px;
    background-color: white; /* #E4E4E4; */
    padding: 3px;
}


.hdr_type_cell {
    font-weight: bold;
    font-size: 12px;
    background-color: #E4E4E4;
    padding: 3px;
}

.time_h_cell /* The Daily Timetable header Cells */ {
    font-weight: bold;
    font-size: 12px;
    background-color: #E4E4E4;
    padding: 5px;
}


.time_wh_cell_sub {
    font-weight: bold;
    font-size: 12px;
    background-color: #EDEDED;
    padding: 5px;
    text-align: center;
}

.time_wh_non_aca /* Weekly Timetable, colourise non-academic classes */ {
    color: Blue;
}

.pti_inac {
    color: #808080;
}

.pti_lnk {
    color: #8DAD78;
    text-decoration: none;
}

    .pti_lnk:hover {
        text-decoration: underline;
    }

.pti_green {
    color: #8DAD78;
}

.pti_red {
    color: red;
}

.pti_red_bold {
    color: red;
    font-weight: bold;
}

.pti_conf_red /* Cancel message in PTI page. SW8085 10/09/2010 */ {
    color: red;
    font-weight: bold;
    font-size: 15px;
}

.pti_clash_msg /* Clash message in PTI page. SW8085 10/09/2010 */ {
    color: red;
    font-weight: bold;
    font-size: 15px;
}

.pti_conf /* Confirm message in PTI page. SW8085 10/09/2010 */ {
    font-weight: bold;
    font-size: 15px;
}

.sessionContainer {
    display: block;
    padding-bottom: 25px;
}

    .sessionContainer table {
        /*display: block;*/
    }

#pti_InterviewsGrid .portal_booking_closed_msg {
    margin-bottom: 0;
}

#pti_InterviewsGrid .sessionLinks .item {
    float: left;
    margin-right: 15px;
    margin-left: 0;
    list-style-type: none;
}

#pti_InterviewsGrid .sessionLinks {
    clear: both;
    padding: 0;
    margin-top: 10px;
}

/* Interview Request synergymeanings*/
#pti_InterviewsGrid .REQUIRE {
}

#pti_InterviewsGrid .REQUEST {
}

#pti_InterviewsGrid .NOTREQ {
}

#pti_InterviewsGrid .NOTAVAIL {
}

.upsize {
    font-size: 15px;
}

.pti_lnk_app, .pti_lnk_app_thn {
    color: red;
    text-decoration: none;
}

    .pti_lnk_app:hover, .pti_lnk_app_thn:hover {
        text-decoration: underline;
    }

.pti_print_button {
    margin: 5px;
}

#pti_ConfirmLabel {
    text-align: center;
    padding-top: 20px;
}

#pti_ConfirmYesNoButtons {
    text-align: center;
}

/* Print and Close buttons on the 'Print PTI List' screen */
#PTIPrintAndClose {
    text-align: right;
}

#PTIPrintPrint, #PTIPrintClose {
}

.hdr_cell {
    width: 100%;
    font-weight: bold;
}

.time_t_cell /* the time cell of the Daily Timetable HTMLTable */ {
    font-weight: bold;
    padding: 5px;
    background: url(../images/dotted.gif) repeat-x bottom;
    width: 60px;
}

.time_d_cell /* the other cells of the daily timetable HTMLTable */ {
    padding: 5px;
    background: url(../images/dotted.gif) repeat-x bottom;
    text-align: center;
}

.time_d_cell_pti_print {
    padding: 5px;
    background: url(../images/dotted.gif) repeat-x bottom;
    font-size: 16px !important;
}

.rands_w {
    color: gray;
    font-size: 10px;
}

.time_tr_cell {
    font-weight: bold;
    padding: 5px;
    background: url(../images/dotted.gif) repeat-x bottom;
    width: 60px;
    color: red;
}

.time_dr_cell {
    padding: 5px;
    background: url(../images/dotted.gif) repeat-x bottom;
    color: red;
}

.desc_cell {
    width: 100%;
    text-align: justify;
    padding-bottom: 5px;
}

#TimetableCalendar {
    float: left;
}

#TimetableDaily {
    display: inline-block;
    float: none;
    padding-left: 10px;
    width: 100%;
}

#TimetableWeekly {
    padding-top: 20px; /*clear: both;*/
}

/* Student Results Page (stures) Styles */

#res_CustomHTML {
    display: inline-block;
    float: left;
    min-width: 600px;
    width: 100%;
    margin-bottom: 20px;
}

#res_LeftMenu {
    float: left;
}

#res_ClassesTable {
    float: none;
    min-width: 250px;
    padding-right: 20px;
}

#res_ResultsTable {
    display: inline-block;
    float: left;
    min-width: 450px;
}

#res_Results {
    display: block;
    float: left;
    clear: both;
    width: 100%;
}

#res_HeadingCell {
    float: left;
}

.res_last_printed /* Last printed string (under pdf) in Results screen. SW7447 27/11/08 */ {
    color: gray;
    font-size: 10px;
}

.res_syllabus_ctrl /* results Syllabus Text Control */ {
    font-weight: normal;
    color: Black;
    font-size: 11px;
    padding-left: 20px;
    text-align: left;
}

.comnt_cell {
    width: 100%;
    font-style: italic;
    padding-top: 10px;
    padding-bottom: 5px;
}

.comnt_txt /* Results Maintenance: Topic comment text under the Assessment Area. SW7447 28/11/08 */ {
    font-style: italic;
    font-weight: normal;
    color: maroon;
    margin-left: 10px;
    margin-right: 10px;
}

.class_cell /* Results Maintenance: Class Heading on right Hand Results side. SW7447 27/11/08 */ {
    width: 100%;
    font-weight: bold;
    color: maroon;
    border-bottom: #000000 solid 1px;
    padding-top: 10px;
}

.class_overview_cell {
    width: 100%;
    color: maroon;
}

.overall_comm_cell {
    padding: 20px;
}

.overall_comm {
    border: #000000 solid 1px;
    padding: 5px;
}

.markbook_heading_cell {
    width: 100%;
    font-weight: bold;
}

.top_brd_cell {
    border-top: black solid 1px;
}

.tt_no_students_class /* green_text */ {
    color: Green;
}

.tt_subst_teach_class /* regred_text */ {
    color: Red;
}

.tt_subst_diffteach_class /* blackitalic_text */ {
    color: Black;
    font-style: italic;
}

.tt_recess_lunch_class /* gray_text */ {
    color: Gray;
}

.tt_staff_schedule_class /* blueitalic_text */ {
    color: Blue;
    font-style: italic;
}

.smallred_text {
    color: Red;
    font-size: 9px;
}

.tt_med_inc_text {
    color: Maroon;
}

/* PTI */
/* ================================================================================ */
/* PTI screen classes */
.kid_lbl {
    color: red;
    font-size: 10px;
}

.kid_lbl_bld {
    color: red;
    font-size: 12px;
    font-weight: bold;
}

.kid_lbl_up {
    color: gray;
    font-size: 10px;
}

/* Rubric */
/* ================================================================================ */
/* rubric classes */
.rubric_tab {
}

.rubric_hdr_cell {
    border: 1px solid black;
    padding-right: 10px;
    padding-left: 10px;
    font-weight: bold;
    background-color: #E4E4E4;
}

.rubric_cell {
    border: 1px solid black;
    padding-right: 10px;
    padding-left: 10px;
}
/* when have Assessment area of RUBRIC+COMMENT then RUBRIC we must show an extra column "Topic Comment" then show topiComment for line 1 but blank for line 2 - this is the styling for line 2. SW8507 01/06/09 */
.rubric_noTopicComment_cell {
    /*   border:1px solid black;  background-color: Gray;  */
    border-left: 1px solid black;
    border-bottom: none;
    border-right: none;
    border-top: none;
    padding-right: 10px;
    padding-left: 10px;
}

/* Table cell between each Menu Cell. SW 19/2/08 */
.mnu_mid_img_cell /* mid_img_cell */ {
    background: url(../images/mnu_mid.gif);
    width: 21px;
    height: 21px;
}
/* End Table cell after all Menu Cells. SW 19/2/08 */
.mnu_end_img_cell /* end_img_cell */ {
    background: url(../images/mnu_lst.gif);
    width: 21px;
    height: 21px;
}
/* right hand Cell after HeaderCell eg Available Results/Information. SW 19/2/08 */
.tbl_hdr_end_img_cell /* triang_cell */ {
    background: url(../images/triang.gif);
    width: 21px;
    height: 21px;
}

.vercont {
    font-size: 8px;
}
/* Top right TableCell of each page (New Container for the StudentNames). SW 29/07/08 */
.stuNamesContainer {
    display: block;
    vertical-align: top;
}
/* CustomHTML top left TableCell of each page (where the CustomHTML is displayed). Note the StuNamesContainer is the right hand cell roughly 20% */
.CustomTopHTMLContainer {
    vertical-align: top;
}
/* Contact details html table in the MyAccount page. SW6818 13/8/08 */
.contact_details_table {
    color: Black;
    width: 500px;
}
/* The Contact details label cell in the MyAccount page. SW6818 13/8/08 */
.contact_label_cell {
    color: Fuchsia;
}

.contact_textbox_cell {
    width: 600px;
}
/* The Contact details textbox cell in the MyAccount page. SW6818 13/8/08 */
.contact_textbox {
    width: 200px;
}
/* sinlge line Freetext textbox eg Notes in the MyAccount page. SW6818 14/08/08 */
.contact_freetext_textbox {
    width: 500px;
}
/* multiline Freetext textbox eg Notes in the MyAccount page. SW6818 14/08/08 */
.contact_freetextmultiline_textbox {
    font-family: arial;
    font-size: 11px;
    color: #000000;
    width: 500px;
    height: 80px;
}
/* Label that says "an email with your contact details has been sent to support@cda.com.au" */
.contact_email_notify_lbl, .notifyText {
    color: Blue;
}

#acc_CustomHTMLTop, #acc_emailResponseLabel, #acc_customHTMLBottom {
}

#acc_DetailsPlaceHolder {
    margin-top: 10px;
}


.abs_asptable /* Absences HTML/ASPTable that contain all the Absence headings and Absence records. SW7447 01/12/08*/ {
    border: 0;
    border-top: black solid 1px;
    padding-top: 2px;
}

.abs_grd_hdr_cell /* Absences HTML/ASPTable header cells. SW7447 01/12/08 */ {
    /* width:100%; */
    font-weight: bold;
    font-size: 12px;
    background-color: #E4E4E4;
    padding: 3px;
}

.abs_grd_hdr_eventtype_cell {
    font-weight: bold;
    font-size: 12px;
    background-color: #E4E4E4;
    padding: 3px;
    width: 80px;
}

.abs_grd_hdr_out_cell {
    font-weight: bold;
    font-size: 12px;
    background-color: #E4E4E4;
    padding: 3px;
    width: 90px;
}

.abs_grd_hdr_in_cell {
    font-weight: bold;
    font-size: 12px;
    background-color: #E4E4E4;
    padding: 3px;
    width: 90px;
}

.abs_grd_hdr_type_cell {
    font-weight: bold;
    font-size: 12px;
    background-color: #E4E4E4;
    padding: 3px;
    width: 100px;
}

.abs_grd_hdr_reason_cell {
    font-weight: bold;
    font-size: 12px;
    background-color: #E4E4E4;
    padding: 3px;
    width: 70px;
}

.abs_grd_hdr_comment_cell {
    font-weight: bold;
    font-size: 12px;
    background-color: #E4E4E4;
    padding: 3px;
    width: 150px;
}

.abs_grd_hdr_approved_cell {
    font-weight: bold;
    font-size: 12px;
    background-color: #E4E4E4;
    padding: 3px;
    width: 20px;
}

.abs_grd_hdr_late_cell {
    font-weight: bold;
    font-size: 12px;
    background-color: #E4E4E4;
    padding: 3px;
    width: 20px;
}

.abs_grd_hdr_note_cell {
    font-weight: bold;
    font-size: 12px;
    background-color: #E4E4E4;
    padding: 3px;
    width: 40px;
}

.abs_grd_eventtype_cell /* Absences Grid: Event Type cell. SW7447 01/12/08 */ {
    font-weight: normal;
    text-align: left;
    padding-bottom: 1px;
    padding-left: 3px;
    background: url(../images/dotted.gif) repeat-x bottom; /* width:20px; */
}

.abs_grd_out_cell /* Absences Grid: Out cell. SW7447 01/12/08 */ {
    font-weight: normal;
    text-align: left;
    padding-bottom: 1px;
    padding-left: 3px;
    background: url(../images/dotted.gif) repeat-x bottom; /* width:15px; */
}

.abs_grd_in_cell /* Absences Grid: In cell. SW7447 01/12/08 */ {
    font-weight: normal;
    text-align: left;
    padding-bottom: 1px;
    padding-left: 3px;
    background: url(../images/dotted.gif) repeat-x bottom; /* width:15px; */
}

.abs_grd_type_cell /* Absences Grid: Type cell. SW7447 01/12/08 */ {
    font-weight: normal;
    text-align: left;
    padding-bottom: 1px;
    padding-left: 3px;
    background: url(../images/dotted.gif) repeat-x bottom; /* width:20px; */
}

.abs_grd_reason_cell /* Absences Grid: reason cell. SW7447 01/12/08 */ {
    font-weight: normal;
    text-align: left;
    padding-bottom: 1px;
    padding-left: 3px;
    background: url(../images/dotted.gif) repeat-x bottom; /* width:30px; */
}

.abs_grd_eventcomment_cell /* Absences Grid: event comment cell. SW7447 01/12/08 */ {
    font-weight: normal;
    text-align: left;
    padding-bottom: 1px;
    padding-left: 3px;
    background: url(../images/dotted.gif) repeat-x bottom; /* width:60px; */
}

.abs_grd_approved_cell /* Absences Grid: approved cell. SW7447 01/12/08 */ {
    font-weight: normal;
    text-align: left;
    padding-bottom: 1px;
    padding-left: 3px;
    background: url(../images/dotted.gif) repeat-x bottom; /* width:10px; */
}

.abs_grd_late_cell /* Absences Grid: late cell unticked. SW7447 01/12/08 */ {
    font-weight: normal;
    text-align: left;
    padding-bottom: 1px;
    padding-left: 3px;
    background: url(../images/dotted.gif) repeat-x bottom; /* width:10px; */
}

.abs_grd_note_cell /* Absences Grid: note cell. SW7447 01/12/08 */ {
    font-weight: normal;
    text-align: left;
    padding-bottom: 1px;
    padding-left: 3px;
    background: url(../images/dotted.gif) repeat-x bottom; /* width:10px; */
}

#abs_AbsenceTable {
    margin-top: 10px;
}


#ctl00_masterPageContentPlaceHolder_yearTextBox {
    width: 50px;
    margin-right: 15px;
}


.abs_CriteriaSelection {
    display: block;
    float: none;
    margin-bottom: 5px;
}

.absencesAspTable {
    display: block;
    width: 740px;
}

#ctl00_masterPageContentPlaceHolder_absencesAspTable {
    width: 740px;
}

.att_asptable /* Attendances -- layout based on Absences YS8568 21/07/09 16:12*/ {
    border: 0;
    border-top: black solid 1px;
    padding-top: 2px;
}

.dxgvHeader {
    /*    font-weight: bold;     font-size:12px;     background-color:#E4E4E4;      padding:3px;      border:0;*/
}

.dxgvGroupRow {
    background: #FAFAFA;
    border: none;
}

.dxgvLoadingPanel {
    border: solid 1px #ddd;
    background-color: #fff;
    font: 12px Arial;
    color: #303030;
}

    .dxgvLoadingPanel td {
        white-space: nowrap;
        text-align: center;
        padding: 12px 12px 12px 12px;
    }

.dxgvLoadingPanelStatusBar {
    background-color: Transparent;
    font: 12px Arial;
}

    .dxgvLoadingPanelStatusBar td {
        white-space: nowrap;
        text-align: center;
        padding: 0px 2px 0px 2px;
    }

/* Login Page- DIV sections */

.Login_Panel {
    width: 500px;
    margin: 0px auto;
}

.loginHeaderMessage {
    display: block;
    float: none;
    margin: 0px auto;
    text-align: center;
}

.loginErrorDiv {
    display: block;
    float: none;
    margin: 0px auto;
    text-align: center;
}

.Login_FooterMessage_Label {
    display: block;
    float: none;
    text-align: center;
}

.Login_Panel_Username_Label, .Login_Panel_Password_Label, .Login_Panel_NewPassword_Label, .Login_Panel_ConfirmNewPassword_Label {
    width: 150px;
    float: left;
    line-height: 22px;
    margin: 5px;
    text-align: right;
}

.Login_Panel_Username_TextBox, .Login_Panel_Password_TextBox, .Login_Panel_NewPassword_TextBox, .Login_Panel_ConfirmNewPassword_TextBox {
    width: 190px;
    float: left;
    height: 16px;
    margin: 5px;
}

.Login_Panel_LoginButton {
    width: 100px;
    margin: 10px;
}

#Login_Panel_ChangeOrForgotPassword .alink {
    display: inline-block;
    padding: 0px 10px;
}


#Login_Panel_Username, #Login_Panel_Password {
}

#Login_Panel_ChangeOrForgotPassword {
    text-align: center;
}

#Login_Panel_NewPassword, #Login_Panel_ConfirmNewPassword {
}

#Login_Panel_LoginButtonDiv {
    text-align: center;
}

#clear, .clr {
    clear: both;
    float: none !important;
}


/*
    System Messages login page.
*/
.systemMessagesDiv {
    display: block;
    float: none;
    width: 600px;
    margin: 10px auto;
    min-height: 60px;
    padding-right: 55px;
    font-size: 11px;
    font-family: Arial;
}

    .systemMessagesDiv ul {
        margin: 0px;
        list-style: none;
    }

    .systemMessagesDiv li {
        padding: 0px;
        margin-bottom: 4px;
        text-align: center;
    }

        .systemMessagesDiv li.systemMessagesHead {
            font-size: 11px;
            color: Red;
            text-align: center;
        }

/*
    System messages into page.
*/
.introSystemMessages ul {
    padding-left: 10px;
}

    .introSystemMessages ul li {
        margin-bottom: 3px;
    }

.introSystemMessages li.systemMessagesHead {
    font-size: 11px;
    color: Red;
    list-style: none;
    padding: 0px;
    margin-left: 0px;
    margin-left: -12px;
}

/* Attendances - DIV sections */

/* Attendances - Headers */

#att_GridHeader {
    width: 220px;
}

.att_grd_hdr {
    cursor: pointer;
    font-weight: bold;
    font-size: 12px;
    background-color: #E4E4E4;
    padding: 3px;
    border: 0;
}

.att_grd_hdr_Date {
    width: 180px;
}

.att_grd_hdr_Period {
    width: 20px;
}

.att_grd_hdr_Attended {
    width: 20px;
}

.att_grd_hdr_Class {
    width: 50px; /*	display:none;*/
}

.att_grd_hdr_ClassDescription {
    width: 200px;
}

.att_grd_hdr_PossDescription {
    width: 20px;
}

.att_grd_hdr_Reason {
    width: 200px;
}

.att_grd_hdr_LateArrive {
    width: 20px;
}

.att_grd_hdr_Time {
    width: 20px;
}

.att_grd_hdr_EarlyDepart {
    width: 20px;
}

.att_grd_hdr_Homework {
    width: 20px;
}

.att_grd_hdr_DressCode {
    width: 20px;
}

.att_grd_hdr_FullDayAbsentCount {
    width: 50px;
}

/* Attendances - Cells */
.att_grd_cell {
    font-weight: normal;
    text-align: left;
    padding-bottom: 1px;
    padding-left: 10px;
    border-bottom: 1px dotted black !important;
}

.att_grd_cell_Date, .att_grd_cell_Period, .att_grd_cell_Attended, .att_grd_cell_Class, .att_grd_cell_ClassDescription, .att_grd_cell_Reason, .att_grd_cell_FullDayAbsentCount {
}

/* Attendance Summary Headers*/
.att_grd_hdr_summary, .att_grd_hdr_summary_Class, .att_grd_hdr_summary_ClassDescription, .att_grd_hdr_summary_AbsentCount {
}

/* Attendance Summary Cells*/

.att_grd_cell_summary {
}

.att_grd_cell_summary_Class {
    width: 50px;
}

.att_grd_cell_summary_ClassDescription {
    width: 200px;
}

.att_grd_cell_summary_AbsentCount {
}

/* Attendance DIVs */

#att_Selection {
}

#att_YearOption {
    float: left;
}

#att_SemesterOption {
    padding-left: 10px;
    float: left;
}

#att_ClassOption {
    padding-left: 10px;
    float: left;
    display: none;
}

#att_CheckBoxes {
    padding-left: 10px;
    float: left;
}

#att_CheckBox_Label {
    padding-left: 10px;
    float: left;
}

#att_CheckBox_Attended {
}

#att_CheckBox_NotAttended {
}

#att_RefreshOption {
    padding-left: 10px;
    float: left;
}

.checkB {
    position: relative;
    top: -2px;
}

    .checkB label {
        position: relative;
        top: -3px;
    }

#att_Custom {
}

#att_Selection {
    display: block;
    float: left;
    height: 25px;
}

    #att_Selection .floatOptionLeft {
        display: inline-block;
        float: left;
        height: 25px;
        width: auto;
        clear: none;
    }

#att_MainColumnsToolTip {
}

#att_Main {
    float: left;
    padding-bottom: 20px;
}

#att_Summary {
    float: left;
}

#att_Summary_Header {
    font-weight: bold;
}

#att_Summary_Body {
}

#att_SummaryFullDayAbsentCount {
}

#att_SummaryFullDayAbsentCount_Header {
}

#att_SummaryFullDayAbsentCount_Body {
}


/* Finance Page- Tabulated Classes */

.fin_UserIDCell {
    text-decoration: underline;
    font-weight: bold;
}

.fin_InstallmentModificationHeader {
    font-weight: bold;
}

.fin_InstallmentSelect {
}

.fin_InstallmentTuition {
}

.fin_InstallmentTuitionSaveButton {
}

.fin_TotalOwingHeader, .fin_ChargesNotYetNotifiedHeader, .fin_OverallBalanceHeader, .fin_PrepaidHeader, .fin_InstalmentsNotChargedHeader, .fin_LastStatementDateHeader, .fin_LastStatementAmountHeader {
}

.fin_TotalOwingCell, .fin_ChargesNotYetNotifiedCell, .fin_OverallBalanceCell, .fin_PrepaidCell, .fin_InstalmentsNotChargedCell, fin_LastStatementDateCell, fin_LastStatementAmountCell {
}

.fin_ReceiptDateHeader, .fin_PaymentMethodHeader, .fin_ReceiptNumberHeader, .fin_ReceiptAmountHeader, .fin_ReceiptDescriptionHeader, .fin_ReceiptPrintHeader, .fin_StatementDateHeader, .fin_StatementNumberHeader, .fin_StatementDueDateHeader, .fin_StatementBalanceHeader, .fin_StatementDescriptionHeader, .fin_StatementPrintHeader {
    background-color: #E4E4E4;
    font-size: 12px;
    font-weight: bold;
    padding: 3px;
}


.fin_ReceiptDateHeader, .fin_ReceiptAmountHeader, .fin_StatementDateHeader, .fin_StatementDueDateHeader, .fin_StatementBalanceHeader {
    width: 120px;
}

.fin_ReceiptNumberHeader, .fin_StatementNumberHeader {
    width: 50px;
}

.fin_ReceiptDescriptionHeader, .fin_StatementDescriptionHeader {
    width: 250px;
}

.financeTableRow {
    display: table-row;
    background: url("../images/dotted.gif") repeat-x scroll center bottom transparent;
    height: 18px;
    line-height: 18px;
}

    .financeTableRow:hover {
        background-color: #cccccc;
        color: blue;
    }

.financeTableRowHeader {
    background-color: #E4E4E4;
}

.fin_ReceiptDateHeader, .fin_ReceiptNumberHeader, .fin_ReceiptAmountHeader, .fin_StatementDateHeader, .fin_StatementNumberHeader, .fin_StatementDueDateHeader, .fin_StatementBalanceHeader {
    text-align: center;
}

.fin_ReceiptDateCell, .fin_ReceiptNumberCell, .fin_ReceiptAmountCell, .fin_ReceiptDescriptionCell, .fin_ReceiptPrintCell, .fin_StatementDateCell, .fin_StatementNumberCell, .fin_StatementDueDateCell, .fin_StatementBalanceCell, .fin_StatementDescriptionCell, .fin_StatementPrintCell {
    padding-bottom: 1px;
}

.fin_ReceiptDateCell, .fin_ReceiptNumberCell, .fin_ReceiptAmountCell, .fin_StatementDateCell, .fin_StatementNumberCell, .fin_StatementDueDateCell, .fin_StatementBalanceCell {
    text-align: center;
}

.fin_ReceiptDateHeader, .fin_ReceiptNumberHeader, .fin_ReceiptAmountHeader, .fin_StatementDateHeader, .fin_StatementNumberHeader, .fin_StatementDueDateHeader, .fin_StatementBalanceHeader {
    width: 80px;
}

.fin_ReceiptDescriptionHeader, .fin_StatementDescriptionHeader {
    display: inline-block;
    width: 300px;
}

.fin_StatementNumberCell .dxeHyperlink, .fin_StatementNumberCell .dxeHyperlink:visited {
    color: blue;
}

.lastViewed, .reportIconLink {
    display: table-cell;
    float: none;
    clear: none;
    text-align: center;
}

.lastViewed {
    width: 50px;
}

.reportIconLink {
    width: 60px;
}

/* Finance Page- DIV sections */

#fin_Overview {
    width: 300px;
}

#fin_ReceiptHistory {
}


.sectionHeadings label {
    font-size: 14px;
    font-weight: bold;
}

#fin_ReceiptHistoryHeader {
    float: none;
    min-width: 180px;
}

    #fin_ReceiptHistoryHeader select, .selectionHeadings select {
        float: right;
        margin-top: 1px;
        margin-right: 4px;
    }

    #fin_ReceiptHistoryHeader input {
        float: right;
    }

#fin_StatementHistory {
    margin-top: 10px;
}

#fin_StatementHistoryHeader {
    float: none;
    min-width: 180px;
}

    #fin_StatementHistoryHeader select, .selectionHeadings select {
        float: right;
        margin-top: 1px;
        margin-right: 4px;
    }


#fin_TransactionHistoryHeader {
    float: none;
    min-width: 180px;
    background-color: red;
}

    #fin_TransactionHistoryHeader select, .selectionHeadings select {
        float: right;
        margin-top: 1px;
        margin-right: 4px;
    }


#fin_LastDebtorStatementButton {
    width: 145px;
    margin: 5px;
}

#fin_PaymentWindow {
    font-size: 11px;
    font-family: Arial;
    width: 400px;
    font-size: 11px;
}

#fin_MakePaymentLabel {
    margin-top: 15px;
    float: left;
    text-align: right;
    line-height: 18px;
}

#fin_MakePaymentTextbox {
    margin-top: 15px;
    float: left;
}

#fin_MakePayment {
    margin-top: 15px;
    float: right;
}

.fin_MakePaymentButton {
    margin: 5px;
    float: left;
}

/*
    Finance Page - DataView - CSS Framwork.
    The idea is to craete framework to replace the current tables on this page and have a standard set of styles for using across Community Portal.
*/

.dataView {
    /* Container for div elements that construct a collection of data*/
    display: inline-block;
    float: left;
    width: 770px;
    margin-bottom: 10px;
    min-height: 20px;
    line-height: 20px;
    font-family: Arial;
    font-size: 11px;
}

    .dataView .tabRow {
        width: 100%;
        vertical-align: top;
        text-align: left;
        vertical-align: bottom;
    }

    .dataView .titleRow {
        width: 100%;
        height: 20px;
        background-color: #3A637A;
        vertical-align: top;
        text-align: left;
        color: #FFFFFF;
        font-size: 14px;
        font-weight: bold;
        vertical-align: bottom;
        padding-right: 25px;
        padding-left: 5px;
        background-image: url(../Images/triangw.gif);
        background-repeat: no-repeat;
        background-position: right;
    }

        .dataView .titleRow .smallDetail {
            font-size: 11px;
            font-weight: normal;
            float: right;
            margin-top: 1px;
            margin-right: 4px;
        }


        .dataView .titleRow SELECT {
            float: right;
            margin-top: 1px;
            margin-right: 4px;
        }

        .dataView .titleRow INPUT {
            float: right;
            margin-right: 4px;
            height: 20px;
            padding-top: 2px;
        }

    .dataView .columnTitleRows {
        display: inline-block;
        width: 100%;
        background-color: #E4E4E4;
        font-size: 12px;
        font: Tahoma;
        font-weight: bold;
        line-height: 20px;
        height: 20px;
    }

        .dataView .columnTitleRows LABEL {
            float: left;
            width: 100px;
            margin-right: 8px;
            padding: 0px 4px;
            padding-top: 1px;
            text-align: center;
        }

    .dataView .dataRow {
        display: inline-block;
        width: 100%;
        float: left;
        background: url("../images/dotted.gif") repeat-x scroll center bottom transparent;
        font-family: Arial;
        font-size: 11px;
    }

        .dataView .dataRow LABEL {
            float: left;
            width: 100px;
            margin-right: 8px;
            padding: 0px 4px;
            text-align: center;
        }

        .dataView .dataRow:hover {
            background-color: #cccccc;
            color: blue;
        }

/* Styling for the docman grid and the columns. SW7012 30/06/09 */
.docman_grd_hdr_cell /* Docman GridView header cells. SW7012 30/06/09 */ {
    /* width:100%; */
    font-weight: bold;
    font-size: 12px;
    background-color: #E4E4E4;
    padding: 3px;
    text-align: left;
}

.docman_gridview {
    padding: 4px;
    color: #333333;
}

.docman_rowstyle {
    background-color: #F7F6F3;
    color: #333333;
}

    /*  
    Document Manager custom column width Classes
*/

    .docman_rowstyle td {
        padding: 1px;
    }

.docman_gridview .colDescription, .docman_gridview .colHeaderDescription {
    display: block;
    float: none;
    width: 300px;
    padding: 4px;
}

.docman_gridview .colDocumentType, .docman_gridview .colHeaderDocumentType {
    width: 40px;
    padding: 4px;
}

.docman_gridview .colDocumentCreatedDate, .docman_gridview .colHeaderDocumentCreatedDate {
    width: 120px;
    padding: 4px;
}







.lbl_needs_padding {
    padding-bottom: 4px;
}

.alt_row {
    background-color: #E4E4E4;
}

.docman_grd_hdr_nameinternal_cell .docman_grd_hdr_createddate_cell .docman_grd_hdr_classification_cell .docman_grd_hdr_desc_cell .docman_grd_hdr_type_cell .docman_grd_hdr_source_cell {
}

#docman_StoredDocuments {
}

#docman_StoredDocumentSelection {
    margin: 5px;
}

#docman_CustomHTML {
}


/*
  Email.aspx 
*/
#EmailForm {
    display: block;
    width: 600px;
    margin-left: 40px;
}

    #EmailForm .EmailFormRow {
        display: block;
        float: left;
        min-height: 22px;
        width: 800px;
        clear: both;
    }

        #EmailForm .EmailFormRow label {
            display: inline-block;
            float: left;
            text-align: right;
            padding: 2px;
            width: 60px;
            margin-right: 3px;
        }


        #EmailForm .EmailFormRow .EmailField {
            display: inline-block;
            float: left;
            width: auto;
            padding: 2px;
        }

            #EmailForm .EmailFormRow .EmailField.CommunityName {
                display: inline-block;
                float: left;
                width: 250px;
            }

        #EmailForm .EmailFormRow .sendButton {
            margin-left: 420px;
        }



/* Payment Receipt Styles */
#PaymentReceiptTable label {
    font-weight: bold;
}

#PaymentReceiptTable .row:hover {
    background-color: #D1D1D1;
}

#PaymentReceiptTable .rowBreak {
    padding-top: 0;
}

/* Header Cell Styles */

.HeaderHTML {
    display: block;
    float: left;
    width: 100%;
    margin: 0px;
    padding: 0px;
    background-color: #D3E2E6;
}

.HeaderLeft {
    float: left;
    width: 20%;
}

    .HeaderLeft img {
        float: left;
        padding: 15px;
    }

.HeaderCentre {
    float: left;
    width: 60%;
    text-align: center;
    vertical-align: bottom;
}

.HeaderTitle {
    font-size: 36px;
}

.HeaderRight {
    float: right;
    width: 20%;
    text-align: left;
}

    .HeaderRight img {
        float: right;
    }



/* New Menu Implementation. SW11381 05/07/2010 */
#MenuListItems a {
    background: #3A637A url(../images/left-tab.gif) left top no-repeat;
    font-size: 16px;
    text-decoration: none;
    padding-left: 15px;
}

#MenuListItems li span firsttab a {
    background: #3A637A url(../images/start-tab.gif) left top no-repeat;
    list-style: none;
}

#MenuListItems a span {
    background: url(../images/right-tab.gif) right top no-repeat;
    padding-right: 15px;
}

#MenuListItems a, #MenuListItems a span {
    display: block;
    float: left;
}

    /* Hide from IE5-Mac \*/
    #MenuListItems a, #MenuListItems a span {
        float: none;
    }
        /* End hide */

        #MenuListItems a:hover {
            background: #98BBCD url(../images/left-tab.gif) left top no-repeat;
            padding-left: 15px;
        }

            #MenuListItems a:hover span {
                background: url(../images/right-tab.gif) right top no-repeat;
                padding-right: 15px;
                text-align: left;
            }

#MenuListItems ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: Red;
}

#MenuListItems li {
    font: Verdana, Geneva, sans-serif;
    list-style: none;
    float: left;
    margin: 0;
}

.MenuListItemClass {
}

.MenuListItemSpanClass {
}

/* Make same as MenuListItemClass if MenuListItemClass is used\*/
.MenuListItemCurrentClass {
}

.MenuListItemLinkClass {
    color: #ffffff;
}

/* Make same as MenuListItemLinkClass if MenuListItemLinkClass is used\*/
.MenuListItemLinkCurrentClass {
    color: #000000;
}

.attendance2FocusedRow {
    font-weight: bold;
    color: black;
    background: #E1F5F7;
}

.financeSubMenu {
    display: inline-block;
    float: right;
}

/* Style for right hand side sub menus that use list items to format.*/
.ulSideMenu {
    padding-top: 4px;
    padding-left: 0px;
    margin: 0px;
}

    .ulSideMenu ul, .ulSideMenu li {
        margin: 0px;
        padding: 0px;
        width: 200px;
    }

    .ulSideMenu li {
        list-style: none;
        text-align: left;
    }

        .ulSideMenu li.head {
            margin-bottom: 4px;
            border-bottom: solid 1px #000;
        }

        .ulSideMenu li.althead {
            margin-bottom: 4px;
            border-bottom: solid 1px #000;
            margin-top: 8px;
        }

        .ulSideMenu li .selected {
            background-color: #D4D7D9;
            color: black !important;
        }

        .ulSideMenu li a.selected {
            background-color: #D4D7D9;
            color: Black !important;
        }

        .ulSideMenu li.menuDivider {
            height: 2px;
            border-bottom: solid 1px #000;
            margin-bottom: 8px;
        }

        .ulSideMenu li a:link {
            display: block;
            width: 195px;
            height: auto;
            font-size: 11px;
            line-height: 15px;
            color: blue;
            font-weight: normal;
            margin-bottom: 0px;
            line-height: 16px;
            padding-left: 4px;
        }

        .ulSideMenu li a:hover {
            background-color: gray;
            color: white;
            text-decoration: none;
            height: auto;
        }

/*
    Dev Xpress overrides
*/
.dxtcPageContent {
    background-color: Transparent;
    font-size: 11px;
    font-weight: inherit;
    font-family: arial;
    font-weight: normal;
    color: #000000;
}


/*
    System Messages
*/

.sysMessages {
    display: block;
    float: left;
    width: 300px;
    min-height: 150px;
    padding: 0px;
}

    .sysMessages .message {
        display: block;
        float: left;
        width: 300px;
        width: inherit;
        min-height: 20px;
        padding: 0px;
    }

        .sysMessages .message h1 {
            display: block;
            float: left;
            width: 300px;
            min-height: 16px;
            font-size: 14px;
            line-height: 16px;
            margin: 0px;
            padding: 0px;
        }

        .sysMessages .message h2 {
            display: block;
            float: left;
            width: 300px;
            min-height: 12px;
            font-size: 10px;
            line-height: 12px;
            margin: 0px 0px 10px 0px;
            padding: 0px;
            color: Gray;
            text-indent: 2px;
        }

        .sysMessages .message p {
            display: block;
            float: none;
            width: 270px;
            font-size: 11px;
            font-family: Arial;
            line-height: 15px;
            padding: 5px;
            padding-bottom: 0px;
            margin-top: 0px;
        }

    .sysMessages .message {
        display: block;
        float: left;
        width: 300px;
        min-height: 24px;
        clear: both;
    }

        .sysMessages .message .shutdownMessage {
            color: Red;
            padding: 5px;
        }


    .sysMessages .logOut {
        display: block;
        float: left;
        width: 300px;
        min-height: 24px;
    }

        .sysMessages .logOut .countDownRow {
            display: block;
            float: left;
            width: 300px;
            height: 24px;
            line-height: 24px;
            margin-bottom: 10px;
            margin-left: 40px;
            margin-top: 10px;
            padding-left: 12px;
        }

            .sysMessages .logOut .countDownRow .textSpan {
                display: inline-block;
                float: left;
                height: 24px;
                line-height: 24px;
            }

            .sysMessages .logOut .countDownRow .counter {
                display: inline-block;
                float: left;
                height: 24px;
                width: 24px;
                text-align: center;
                line-height: 24px;
                color: Red;
            }

        .sysMessages .logOut .ButtonRow {
            display: inline-block;
            float: left;
            width: 100%;
            min-height: 24px;
            padding-left: 35px;
        }

            .sysMessages .logOut .ButtonRow .button {
                display: inline-block;
                float: left;
                margin-right: 5px;
            }

    .sysMessages .rotator {
        display: inline-block;
        float: left;
        margin: 0px;
    }

        .sysMessages .rotator .messageControls {
            display: inline-block;
            float: left;
            width: 300px;
            height: 18px;
            line-height: 18px;
        }

            .sysMessages .rotator .messageControls label, .sysMessages .rotator .messageControls label {
                display: inline-block;
                float: left;
                height: 18px;
                line-height: 18px;
                margin-right: 6px;
            }

        .sysMessages .rotator ul {
            list-style: none;
            padding: 0px;
        }

            .sysMessages .rotator ul li {
                list-style: none;
                overflow: scroll;
                overflow-x: hidden;
                min-height: 100px;
                max-height: 200px;
                width: 280px;
                border: 1px solid grey;
                padding: 5px;
                padding-right: 14px;
            }


        /* Paging classes not generated by devexpress*/
        .sysMessages .rotator .nextButton {
            height: 17px;
            width: 16px;
            background-image: url('~/DXR.axd?r=1_12');
            background-position: -81px 0;
        }

        .sysMessages .rotator .previousButton {
            height: 17px;
            width: 16px;
            background-image: url('~/DXR.axd?r=1_12');
            background-position: -105px -0px;
        }

        .sysMessages .rotator .nextButtonDisabled {
            background-image: url('~/DXR.axd?r=1_12');
            background-position: -105px -25px;
            height: 17px;
            width: 16px;
        }

        .sysMessages .rotator .previousButtonDisabled {
            background-image: url('~/DXR.axd?r=1_12');
            background-position: -81px -25px;
            height: 17px;
            width: 16px;
        }


.portalStackTraceMessage {
    display: none;
    float: none;
    text-align: left;
    width: 90%;
    height: auto;
    clear: both;
    background-color: White;
    color: Black;
    padding: 4px;
    border: 1px solid black;
    margin: 10px;
}

    .portalStackTraceMessage .line {
        color: blue;
    }

    .portalStackTraceMessage .aspx {
        color: Green;
    }

    .portalStackTraceMessage .manager {
        color: #ff0000;
    }


/* 
    Misc Helpers-Overrrides & Extenders 
*/
.floatRight {
    float: right;
}

.floatLeft {
    float: left;
}

.inlineBlock {
    display: inline-block;
}

.clear {
    display: block;
    float: none;
    clear: both;
    width: 100%;
    min-height: 4px;
}

    .clear.content {
        margin-bottom: 10px;
    }

.minWidth600 {
    min-width: 600px;
    float: left; /*need to float left so that width values will apply*/
}

.margineLeft20 {
    margin-left: 20px;
}
/* 
  BAD Misc Helpers-Overrrides & Extenders
  Styles here are more one off helperss to override and help clunky css design.
*/
.pagePaddingLeft40 {
    padding-left: 20px;
}


/*
    For admin page
*/

#admin_CustomHTML {
}


/* Change password user control */
#changePasswordControl {
    min-width: 300px;
    margin: auto auto;
}

#changePasswordForm {
    display: block;
    float: left;
    margin: auto auto;
}

#changePasswordControl .headerMessage {
    float: left;
    width: 300px;
    text-align: center;
    margin-bottom: 10px;
}

#changePasswordForm .formlablel {
    display: inline-block;
    float: left;
    margin-right: 10px;
    text-align: right;
    width: 120px;
    margin-bottom: 10px;
}

#changePasswordForm input {
    display: inline-block;
    float: left;
    clear: right;
    width: 150px;
}

#changePasswordForm .clear {
    width: inherit;
    clear: both;
    height: 0px;
    margin-bottom: 10px;
}

#changePasswordControl .errorMessage {
    display: block;
    float: left;
    min-height: 10px;
    width: 300px;
    margin-top: 5px;
    color: Red;
}

    #changePasswordControl .errorMessage li {
        margin-top: 5px;
    }

#changePasswordControl .buttonRow {
    display: inline-block;
    float: left;
    width: 290px;
    height: 25px;
    margin-bottom: 10px;
}

    #changePasswordControl .buttonRow .button {
        float: right;
        margin-right: 6px;
    }

        #changePasswordControl .buttonRow .button.floatLeft {
            float: left;
            margin-left: 0px;
        }

.bodytext *, body_text * {
    font-size: 11px;
    font-family: Arial;
}



.infoTxt {
    margin-bottom: 1EX;
    display: block;
}

.buttonRow {
    display: block;
    width: 100%;
    min-height: 24px;
    float: none;
    margin-top: 5px;
    clear: both;
}

    .buttonRow .btn {
        margin: 0px 4px;
    }

/*
  CDA Button baseline styles
*/
.cdaButton {
    margin: 0px 4px;
}





/* e-commerce payment */
.payment {
}


    .payment h1 {
        display: inline-block;
        float: none;
        width: 100%;
        color: #3A637A;
        vertical-align: top;
        text-align: left;
        text-indent: 5px;
        font-size: 24px !important;
        vertical-align: bottom;
        background-repeat: no-repeat;
        background-position: right top;
        line-height: 34px;
        border-bottom: solid 1px;
        font-weight: bold;
        clear: both;
        margin-top: 0px;
        margin-bottom: 5px;
    }

    .payment p {
        padding-left: 7px;
    }

    .payment #creditCardPlaceholder, .payment #directDebitPlaceholder {
        display: none;
    }

    .payment h2 {
        margin-bottom: 5px;
    }


.paymentContainer {
    margin-bottom: 10px;
}

.payment .resultInfoTable {
    margin-top: 1EM;
    margin-bottom: 1EX;
}

.payment .paymentType {
    margin-bottom: 1EX;
}

.payment .row {
    background-color: #D1D1D1;
    border-radius: 0 10px 0 10px;
    border: 2px solid #D1D1D1;
    padding: 5px;
}

.payment .row, .payment .rowBreak {
    padding-top: 1EM;
    margin-bottom: 1EM;
    clear: both;
}

.payment .selectedRow {
    /*background-color: orange !important;*/
}

.payment .row .field, .payment .rowBreak .field {
    float: left;
    margin-right: 2EM;
}

.payment .row .inputType, .payment .rowBreak .field {
    margin-top: 2px;
}

.payment .dxeErrorCell {
    padding-top: 5px;
}

.payment #newPayment .dxeErrorCell {
    padding-top: 0;
}

.payment td.dx {
    height: 17px !important;
}

.payment table.dxeButtonEdit img {
    display: block;
}


.payment .row .field label {
    /*font-weight: bold;*/
    display: block;
    padding-left: 2px;
    margin-bottom: 0px;
    height: 18px;
    line-height: 18px;
}

.payment .row .field .creditCardNumber, .payment .row .field .ccvLabel {
    display: inline;
}

.payment .dxpcContent {
    height: 100% !important;
}

/*.payment .customHTML
{
    margin: 1EM 0 1EM 0;
    padding: 0 5px;
}*/

.payment .row .field .previousCardNumberHint {
    margin-left: 3px;
    vertical-align: bottom;
}

.buttonRow .prevBtn {
    float: left;
}

.buttonRow .nextBtn {
    float: right;
}

.buttonRow .lastBtn,
.buttonRow .lastBtn .dxbButton {
    margin-right: 0 !important;
}

.buttonRow .prevBtn .btn {
    margin-left: 0;
}

.buttonRow .nextBtn .btn {
    margin-right: 0;
}


#directDebitBtnContainer .btn {
    width: auto !important;
}

#paymentResult {
    width: 500px;
}

.payment .resultInfoTable .label {
    font-weight: bold;
    text-align: right;
}

.payment .resultInfoTable .value {
    padding-left: 1EX;
}

.payment .paymentGrid .dxgvSelectedRow,
.payment .paymentGrid .active {
    background-color: orange;
    color: black;
}

.displayNone,
.payment #newPayment, .payment #adhocPayment, .payment #saveDetailsPayment {
    display: none; /* Hide/show down in JS*/
}

.payment #existingPayment {
    margin-top: 1EM;
}

.payment .container {
    margin-top: 2EM;
    display: none; /* Hide/show in JS */
}

.payment #pageHeading {
    margin-top: 24px;
}

/* Stops weird flickering on page load */

.makePayment, .tableStoredCardsLayout,
#paymentReceipt {
    width: 800px;
}

.tableStoredCardsLayout, .paymentBreadCrumbs {
    float: left;
}

.manageStoredCards .paymentBreadCrumbs .leftVertMenu {
    float: none;
    margin-top: 0;
}


.makePayment .buttonRow .nextBtn {
    display: none;
}

.buttonRow .nextButton {
    float: right;
    display: block;
}

.payment .transactionRef {
    font-weight: bold;
    font-size: 12px;
}

.makePayment #topControls {
    margin-bottom: 2EM;
}


.payment .userPaymentRow {
    clear: both;
}

    .payment .userPaymentRow .amountToRowContainer {
        /*float: left;*/
        width: 100%;
    }

.payment .ticketReservedTimerContainer {
    float: right;
}

.payment .paymentInformation {
    width: auto;
}

.payment .paymentDescription,
.payment .userPaymentRow .amount {
    font-weight: bold;
}

.payment .userPaymentRow label {
    width: 100px;
    text-align: right;
    margin-right: 5px;
    display: block;
    float: left;
}

.payment .userPaymentRow .amount {
    float: left;
    text-align: right;
    width: 50px;
}

/* end  e-commerce payment */

.hideVisibilityAndHeight {
    visibility: hidden !important;
    height: 1px;
}

.resultBox .box {
    border-width: 3px;
    border-style: solid;
    padding: 5px;
    border-radius: 0 10px 0 10px;
}

.resultBox .heading {
    font-size: 14px;
    font-weight: bold;
}

.resultBox .success {
    border-color: green;
    background-color: #0d4e0d;
    color: #FFF;
}

.resultBox .fail {
    border-color: #c70101;
    background-color: maroon;
    color: #FFF;
}

.resultBox {
    width: auto;
    margin-top: 1EM;
    margin-bottom: 1EM;
}

.payment .portalForm .row {
    padding-right: 0;
    padding-left: 0;
}

.fin_PaymentWindow .buttonRow .btn {
    margin-bottom: 0;
}

.portalForm .fin_PaymentWindow .comment {
    width: 65%;
}

.fin_PaymentWindow .feeTypeTable .feeTypeTableRow {
    clear: both;
}

.portalForm .fin_PaymentWindow .row label {
    width: 200px;
}

.portalForm .fin_PaymentWindow .row .TotalOwingOverdueLabel,
.portalForm .fin_PaymentWindow .row .labelContributionAmount {
    text-align: right;
    width: 80px;
}

.portalForm .fin_PaymentWindow .row .labelIncludeAmountToPay {
    float: left;
    width: 180px;
    text-align: left;
}

.portalForm .fin_PaymentWindow .row .rowVoluntary {
    clear: both;
}

.portalForm .fin_PaymentWindow .dialectVoluntary .labelIncludeAmountToPay {
    margin-left: 10px;
    width: auto;
}

.portalForm .fin_PaymentWindow .row .labelContributionAmount,
.portalForm .fin_PaymentWindow .row .checkBoxVoluntaryContribution {
    float: left;
}

.portalForm .fin_PaymentWindow .row .checkBoxVoluntaryContribution {
    margin-left: 1EX;
}

.disabledText, .disabledText input {
    color: #ACACAC !important;
}

.eventsExcursions .synWebForm .row .dxic input[type="text"],
.portalForm .fin_PaymentWindow .row .dxic input[type="text"] {
    line-height: 13px !important;
}

#eventsExcursionsTopCustomHTML {
    margin-bottom: 0;
}

#paymentOptionLevel2Description {
    margin-bottom: 20px;
}

.hyperlinkFaux {
    cursor: pointer;
}

.payment .dxgvDataRow td.dxgvIndentCell, .payment .dxgvGroupRow td.dxgvIndentCell, .payment .dxgvGroupFooter td.dxgvIndentCell {
    background-color: transparent;
}

.payment .dxgvGroupRow {
    /*font-weight: bold;*/
    background-color: #DCDCDC;
}

/*Events and Excurions start*/
.eventsExcursions #filterBar label {
    width: auto;
}

.eventsExcursions .detailRow {
    padding-left: 16px; /* Same as devexpress's */
}

.eventsExcursions .locationTab .synWebForm {
    width: auto;
}

.eventsExcursions .webComment {
    margin-bottom: 5px;
    background-color: #E4E4E4;
    border: 1px solid #9F9F9F;
    padding: 5px;
}

.portalForm .fin_PaymentWindow .rowEventTicket {
    clear: both;
}

    .portalForm .fin_PaymentWindow #eventContainer .ticketsHeader div,
    .portalForm .fin_PaymentWindow .rowEventTicket .quantity,
    .portalForm .fin_PaymentWindow .rowEventTicket .price,
    .portalForm .fin_PaymentWindow .rowEventTicket .equals,
    .portalForm .fin_PaymentWindow .rowEventTicket .cost,
    .portalForm .fin_PaymentWindow .rowEventTicket .quantityTextbox,
    .portalForm .fin_PaymentWindow .rowEventTicket .quantity .buttons,
    .portalForm .fin_PaymentWindow .rowEventTicket .totalCost,
    .portalForm .fin_PaymentWindow .rowEventTicket .quantityAlreadyPurchased {
        float: left;
    }

.portalForm .fin_PaymentWindow #rowAmountToPay .textboxAmountToPay,
.portalForm .fin_PaymentWindow #rowAmountAlreadyPaid .alreadyPaid,
.portalForm .fin_PaymentWindow .totalAmount {
    text-align: right;
    width: 80px;
}

.portalForm .fin_PaymentWindow #eventContainer .ticketsHeader .price,
.portalForm .fin_PaymentWindow .rowEventTicket .price {
    text-align: center;
    width: 50px;
}

.portalForm .fin_PaymentWindow #eventContainer .ticketsHeader .totalCost,
.portalForm .fin_PaymentWindow .rowEventTicket .totalCost {
    text-align: right;
    width: 70px;
}

.portalForm .fin_PaymentWindow #eventContainer .ticketsHeader div,
.portalForm .fin_PaymentWindow .rowEventTicket .price,
.portalForm .fin_PaymentWindow .rowEventTicket .totalCost,
.portalForm .fin_PaymentWindow .rowEventTicket .quantity {
    margin-left: 2EM;
}

    .portalForm .fin_PaymentWindow .rowEventTicket .quantity .buttons {
        margin-left: 1EM;
    }

.portalForm .fin_PaymentWindow .rowEventTicket .quantityTextbox {
    text-align: right;
}

.portalForm .fin_PaymentWindow #eventContainer .ticketsHeader .quantity,
.portalForm .fin_PaymentWindow #eventContainer .ticketsHeader .additionalQuantity,
.portalForm .fin_PaymentWindow .rowEventTicket .quantity {
    width: 130px;
}

.portalForm .fin_PaymentWindow .rowEventTicket .quantityTextbox {
    width: 45px;
}

.portalForm .fin_PaymentWindow #eventContainer .ticketsHeader {
    font-weight: bold;
}

.portalForm .fin_PaymentWindow #eventContainer .eventStatus {
    margin-bottom: 10px;
}

.portalForm .fin_PaymentWindow .eventContainer .ticketsHeader .price .portalForm .fin_PaymentWindow .rowEventTicket .price {
    margin-left: 10px;
}

.portalForm .fin_PaymentWindow #eventContainer .ticketsHeader .quantity,
.portalForm .fin_PaymentWindow .rowEventTicket .quantity {
    margin-left: 0;
}

.portalForm .fin_PaymentWindow #eventContainer .ticketsHeader .quantityAlreadyPurchased,
.portalForm .fin_PaymentWindow .rowEventTicket .quantityAlreadyPurchased {
    width: 100px;
    text-align: right;
}

.portalForm .fin_PaymentWindow #eventContainer #eventInviteeDetailDescription .description {
    width: 100%;
}

.portalForm .fin_PaymentWindow .rowEventCheckbox {
    padding-left: 200px;
}

.portalForm .fin_PaymentWindow .alreadyPaid,
.portalForm .fin_PaymentWindow .totalAmount {
    float: left;
    display: block;
}


/*Events and Excurions end*/


.paymentListing .icon, .paymentListing .description {
    float: left;
    font-size: 16px;
}

.paymentListing .icon {
    margin-right: 10px;
}

    .paymentListing .icon div {
        width: 40px;
        height: 40px;
        background-repeat: no-repeat;
    }

    .paymentListing .item {
        display:flex;
        align-items:center;
    }

     .paymentListing .icon > div {
        background-size:100%!important;
     }

    .paymentListing .icon .EVT {
        background-image: url(../Images/payment_icons/abc.png);
    }

    .paymentListing .icon .GL {
        background-image: url(../Images/payment_icons/general-ledger-modern.png);
    }

    .paymentListing .icon .DON {
        background-image: url(../Images/payment_icons/donation-modern.png);
    }

    .paymentListing .icon .DEB {
        background-image: url(../Images/payment_icons/dollar.png);
    }

    .paymentListing .icon .PLREC {
        background-image: url(../Images/payment_icons/pledgeReceipt-modern.png);
    }

    .paymentListing .icon .EXC {
        background-image: url(../Images/payment_icons/excursions.png);
    }

.paymentListing .item {
    margin-bottom: 5px;
}

.attributesSummary .summaryRow {
    clear: both;
}

.attributesSummary .description {
    width: 200px;
}

.attributesSummary .total {
    width: 100px;
    text-align: right;
}

.attributesSummary .qty {
    width: 70px;
    text-align: right;
}

.attributesSummary .price {
    width: 50px;
    text-align: right;
}

.attributesSummary .summaryRow div,
.attributesSummary .header div {
    float: left;
    margin-right: 10px;
}

.attributesSummary .header div {
    font-weight: bold;
    text-align: right;
}

.attributesSummary .inviteeDetails {
    clear: both;
}

    .attributesSummary .inviteeDetails .label,
    .attributesSummary .inviteeDetails .value {
        float: left;
    }

    .attributesSummary .labelComment,
    .attributesSummary .inviteeDetails .value {
        margin-left: 10px;
    }

.attributesSummary .invitee {
    margin-bottom: 10px;
}

.attributesSummary .section {
    margin-bottom: 10px;
}

.eventsExcursions .actionButtonRow {
    display: table-cell;
    vertical-align: middle;
}

    .eventsExcursions .actionButtonRow .button {
        float: left;
        line-height: 0;
        height: 25px;
        margin-right: 5px;
        width: 70px;
    }

        .eventsExcursions .actionButtonRow .button table {
            width: 70px;
        }

    .eventsExcursions .actionButtonRow .last {
        width: auto;
        margin-right: 0;
    }

.ticketsErrorMsg {
    padding-left: 205px;
}

.divNonLayoutContent {
    margin-bottom: 10px;
}

.highlight {
    background-color: orange;
}


/*
    New menu container    
 */


.menuContainer {
    display: block;
    float: left;
    width: 100%;
    height: auto;
}

    .menuContainer .columnTitleRows {
        display: block;
        float: left;
        margin-right: 10px;
        background-color: red;
    }


    .menuContainer a.dxeHyperlink.PortalHyperLink {
        display: block;
        float: left;
        padding: 0px 7px;
        color: white;
        font: 11px;
        font-family: Arial;
        font-weight: bold;
        border-right: solid 1px white;
    }
/*.menuContainer a .last
{
    border-right:none
}


.menuContainer a.PortalHyperLink a:hover
{
    text-decoration:none;
    background-color:#E4E4E4;
    color:black;
}*/

ul.menuContainer {
    margin: 0px;
    padding: 0px;
}

    ul.menuContainer li {
        display: block;
        float: left;
        padding: 0px;
        margin: 0px;
    }

.loggedOutMessage {
    display: block;
    float: none;
    width: 400px;
    height: auto;
    margin: 10px auto;
    padding: 8px;
    background-color: #D3E2E6;
    border: solid 1px #767676;
}


    .loggedOutMessage h1 {
        display: block;
        width: 100%;
        height: auto;
        padding: 4px 0px;
        background-color: #3A637A;
        margin: 0px;
        color: white;
        margin-bottom: 16px;
        font-size: 16px;
    }

    .loggedOutMessage span {
        padding: 10px;
        color: black;
        font-size: 11px;
        line-height: 15px;
    }

    .loggedOutMessage a {
        padding: 5px;
        color: blue;
        font-size: 12px;
        font-weight: bold;
    }

    .loggedOutMessage strong.systemMessages {
        color: red;
        margin-bottom: 8px;
        display: block;
        float: none;
        width: 100%;
    }

.dxeButtonEditSys td.dxic {
    padding: 0 3px;
}

/*
    Portal Payment Plans
*/


.FeeContainer {
    display: block;
    float: left;
    width: 700px;
}


.PortalPaymentPlans {
    margin-left: 15px;
    display: inline-block;
    float: left;
    width: 960px;
}


    .PortalPaymentPlans .planNote {
        color: black;
        font-weight: bold;
    }


    .PortalPaymentPlans .content {
        width: 740px;
    }

        .PortalPaymentPlans .content p {
            margin-left: 5px;
        }



.paymentOptions {
    display: block;
    float: left;
    line-height: 20px;
    font-size: 11px;
    width: 740px;
}

    .paymentOptions .paymentOption {
        display: block;
        float: left;
        width: 100%;
        min-height: 20px;
        margin-bottom: 10px;
        -webkit-border-radius: 0px 10px 0px 10px;
        -moz-border-radius: 0px 10px 0px 10px;
        border-radius: 0px 10px 0px 10px;
        border: 2px solid #D1D1D1;
        cursor: pointer;
    }

        .paymentOptions .paymentOption .row {
            display: block;
            float: left;
            width: 700px;
            height: auto;
            clear: both;
        }

            .paymentOptions .paymentOption .row .discountYes, .paymentOptions .paymentOption .row .discountNo {
                display: inline-block;
                float: left;
                width: 250px;
                height: 50px;
                margin-left: 10px;
            }

                .paymentOptions .paymentOption .row .discountYes .row, .paymentOptions .paymentOption .row .discountNo .row {
                    width: inherit;
                }

                .paymentOptions .paymentOption .row .discountYes label, .paymentOptions .paymentOption .row .discountNo label {
                    display: inline-block;
                    float: left;
                    height: 20px;
                    line-height: 20px;
                    cursor: pointer;
                }




.expiredPlans, .activePlans {
    display: block;
    float: left;
    width: 100%;
}

.noSelectablePlans {
    display: block;
    width: 100%;
    text-align: center;
    font-weight: bold;
}


.paymentOptions .paymentOption label {
    display: inline-block;
    float: left;
    width: 50px;
    min-height: 20px;
    margin-left: 5px;
    cursor: pointer;
}

.paymentOptions .paymentOption .selectionBox {
    display: inline-block;
    float: left;
    width: 80px;
    cursor: pointer;
}


    .paymentOptions .paymentOption .selectionBox input {
        display: inline-block;
        float: left;
        height: 10px;
        margin-top: 4px;
        cursor: pointer;
    }

    .paymentOptions .paymentOption .selectionBox label {
        display: inline-block;
        float: left;
        text-align: right;
        height: 20px;
        line-height: 20px;
        width: 50px;
        font-weight: bold;
        cursor: pointer;
    }

.paymentOptions .paymentOption.NotSelected {
    background-color: #D1D1D1;
    cursor: pointer;
}

    .paymentOptions .paymentOption.NotSelected:hover {
        background-color: yellow;
        cursor: pointer;
    }

.paymentOptions .paymentOption.Selected {
    background-color: orange;
    cursor: pointer;
}
/* 
    Selected Plans whose publish dates have expired. 
*/
.expiredPlans .paymentOptions .paymentOption {
    color: white;
    cursor: auto;
}


    .expiredPlans .paymentOptions .paymentOption label {
        display: inline-block;
        float: left;
        width: 50px;
        min-height: 20px;
        margin-left: 5px;
        cursor: auto;
    }

        .expiredPlans .paymentOptions .paymentOption label.active {
            color: white;
            cursor: auto;
        }

    .expiredPlans .paymentOptions .paymentOption .selectionBox {
        display: inline-block;
        float: left;
        width: 80px;
        cursor: auto;
    }


        .expiredPlans .paymentOptions .paymentOption .selectionBox input {
            display: inline-block;
            float: left;
            height: 10px;
            margin-top: 4px;
            cursor: auto;
        }

        .expiredPlans .paymentOptions .paymentOption .selectionBox label {
            display: inline-block;
            float: left;
            text-align: right;
            height: 20px;
            line-height: 20px;
            width: 50px;
            font-weight: bold;
            cursor: auto;
        }

    .expiredPlans .paymentOptions .paymentOption.NotSelected {
        background-color: #057605;
        cursor: auto;
    }


.paymentOption.noCurrentPlans {
    background-color: lightgray;
    cursor: auto;
    text-align: center;
}










/* Credit options */
.creditOptions {
    display: block;
    float: left;
    line-height: 20px;
    font-size: 11px;
    width: 700px;
}

    .creditOptions .creditOption {
        display: inline-block;
        float: left;
        line-height: 20px;
        font-size: 11px;
        margin-right: 5px;
        width: 290px;
        -webkit-border-radius: 0px 10px 0px 10px;
        -moz-border-radius: 0px 10px 0px 10px;
        border-radius: 0px 10px 0px 10px;
        border: 2px solid #D1D1D1;
        cursor: pointer;
        margin-bottom: 10px;
    }



        .creditOptions .creditOption ul {
            list-style: none;
        }


        .creditOptions .creditOption.NotSelected {
            background-color: #D1D1D1;
            cursor: pointer;
        }

        .creditOptions .creditOption.Selected {
            background-color: orange;
            cursor: pointer;
        }

        .creditOptions .creditOption:hover {
            background-color: Yellow;
        }

    .creditOptions .debitFrom {
        display: block;
        float: left;
        width: 700px;
        background-color: #D1D1D1;
        margin-bottom: 10px;
        -webkit-border-radius: 0px 10px 0px 10px;
        -moz-border-radius: 0px 10px 0px 10px;
        border-radius: 0px 10px 0px 10px;
        border: 2px solid #D1D1D1;
        margin-bottom: 10px;
    }


    .creditOptions .creditForm {
        display: block;
        float: left;
        width: 700px;
        background-color: #D1D1D1;
        margin-bottom: 10px;
        -webkit-border-radius: 0px 10px 0px 10px;
        -moz-border-radius: 0px 10px 0px 10px;
        border-radius: 0px 10px 0px 10px;
        border: 2px solid #D1D1D1;
    }

        .creditOptions .creditForm.Selected, .creditOptions .debitFrom.Selected {
            background-color: Orange;
        }

        .creditOptions .creditForm .row, .creditOptions .debitFrom .row {
            display: block;
            float: left;
            width: 100%;
            min-height: 45px;
            height: auto;
            padding-bottom: 5px;
            margin-bottom: 5px;
        }

            .creditOptions .creditForm .row p, .creditOptions .debitFrom .row p {
                width: 90%;
                margin: 0px auto;
                padding-top: 5px;
            }

        .creditOptions .creditForm .vertField, .creditOptions .debitFrom .vertField {
            display: inline-block;
            float: left;
            height: 45px;
            width: 50px;
            margin-right: 5px;
            margin-left: 5px;
        }

            .creditOptions .creditForm .vertField label, .creditOptions .debitFrom .vertField label {
                display: block;
                float: left;
                width: 100%;
                margin-bottom: 1px;
                clear: both;
                font-weight: bold;
            }

.balance {
    display: block;
    float: left;
}

    .balance .row {
        display: block;
        width: 100%;
        height: auto;
        line-height: 20px;
        margin-bottom: 5px;
        clear: both;
    }

        .balance .row ul {
            list-style: none;
        }

            .balance .row ul li label {
                width: 5px;
            }

        .balance .row label {
            display: inline-block;
            float: left;
            height: auto;
            width: 60px;
            line-height: 20px;
            min-height: 20px;
            text-align: right;
            margin-right: 5px;
        }

        .balance .row span {
            display: inline-block;
            float: left;
            font-weight: bold;
            font-size: 20px;
            line-height: 20px;
        }

        .balance .row .cssBalanceText {
            display: inline-block;
            float: left;
            font-weight: normal;
            font-size: 11px;
            line-height: 20px;
        }

.TermsAndCondtions {
    display: block;
    float: left;
    width: 650px;
    height: 100px;
    overflow: scroll;
    clear: both;
    margin-left: 20px;
    border: 1px solid gray;
    margin-bottom: 10px;
    padding: 5px;
    font-family: Arial;
    font-size: 12px;
    line-height: 18px;
}

    .TermsAndCondtions li {
        margin-bottom: 15px;
    }

    .TermsAndCondtions label {
        display: block;
        width: 100%;
        height: 16px;
        line-height: 16px;
        text-decoration: underline;
        padding-bottom: 8px;
    }

.ThankYou {
    display: block;
    float: left;
    width: 700px;
}

.postHeaderText {
    margin: 5px;
}

.PortalPaymentPlans .divPopupReview {
    display: block;
    float: left;
    width: 100%;
    margin-bottom: 10px;
}

.PortalPaymentPlans .divConfirmSelectionText {
    font-size: 13px;
    line-height: 19px;
    text-align: left;
}

    .PortalPaymentPlans .divConfirmSelectionText p {
        width: 90%;
        float: none;
        margin: 0px auto;
        padding: 5px 0px;
    }


    .PortalPaymentPlans .divConfirmSelectionText strong {
    }

.TableBalance td {
    padding: 0px;
    margin: 0px;
}


#emailRequirementCustomHTML {
    min-width: 0;
}



/*
 Portal banner styles.
 Warning Messages styles       
*/

.headerBanner {
    display: block;
    float: none;
    width: 100%;
    min-height: 12px;
}

    .headerBanner .divBannerContainer.warning {
        margin: 0px auto;
        width: 100%;
        background-color: #b53b3b;
        border-bottom: 2px solid darkgrey;
        padding: 4px 0px 4px 0px;
        min-height: 12px;
    }

    .headerBanner .divBannerContainer .divIcon.warning {
        display: block;
        float: left;
        width: 16px;
        height: 16px;
        background-image: url('../images/16x16RedAttention.gif');
        border: none;
        margin-right: 5px;
        margin-left: 20px;
    }

    .headerBanner .divBannerContainer.warning .divMessage {
        margin: 0px auto;
        color: wheat;
        font-size: 12px;
        font-family: arial;
        line-height: 16px;
    }

    .headerBanner .divBannerContainer.maintenance {
        margin: 0px auto;
        width: 100%;
        background-color: orange;
        border-bottom: 2px solid darkgrey;
        padding: 4px;
        min-height: 12px;
    }

    .headerBanner .divBannerContainer .divIcon.maintenance {
        display: block;
        float: left;
        width: 16px;
        height: 16px;
        background-image: url('/images/settingsCogWheel.png');
        border: none;
        margin-right: 5px;
        margin-left: 20px;
    }

    .headerBanner .divBannerContainer.maintenance .divMessage {
        margin: 0px auto;
        color: black;
        font-size: 12px;
        font-family: arial;
        line-height: 16px;
    }

    .headerBanner .divBannerContainer.reminder {
        margin: 0px auto;
        width: 100%;
        background-color: green;
        border-bottom: 2px solid darkgrey;
        padding: 4px;
        min-height: 12px;
    }

    .headerBanner .divBannerContainer .divIcon.reminder {
        display: block;
        float: left;
        width: 16px;
        height: 16px;
        background-image: url('/images/16x16favourite.gif');
        border: none;
        margin-right: 5px;
        margin-left: 20px;
    }

    .headerBanner .divBannerContainer.reminder .divMessage {
        margin: 0px auto;
        color: wheat;
        font-size: 12px;
        font-family: arial;
        line-height: 16px;
    }

#selfAssessmentContainer .item {
    margin-top: 20px;
}



/* v66+ */
/* -- ASPxTabControl lite -- */
.dxtcLite > .dxtc-stripContainer .dxtc-text,
.dxtcLite > .dxtc-stripContainer .dxtc-leftIndent,
.dxtcLite > .dxtc-stripContainer .dxtc-rightIndent {
    color: #333333;
    font-family: Arial;
    font-size: 11px;
    text-decoration: none;
    white-space: nowrap;
}

.dxtcLite > .dxtc-content {
    font-family: Arial;
    font-size: 11px;
    color: black;
    background-color: #FFFFFF;
    float: left;
    clear: left;
    border: 1px solid #A8A8A8;
    overflow: hidden;
    padding: 11px;
}

.dxbButton {
    font-family: Arial;
    font-size: 11px;
    border: 1px solid #7F7F7F;
    padding: 1px;
}

input.dxbButton {
    padding: 5px 8px;
}

.dxpcLite .dxpc-mainDiv,
.dxpcLite.dxpc-mainDiv,
.dxdpLite .dxpc-mainDiv,
.dxdpLite.dxpc-mainDiv {
    top: 0;
    left: 0;
    font-family: Arial;
    font-size: 11px;
    color: black;
    background-color: white;
    border: 1px solid #8B8B8B;
}

.makePaymentButtonContainer {
    margin-top: 5px;
    margin-bottom: 5px;
    clear: both;
    /*float: none;*/
    /*display:block;*/
    text-align: right;
}

ul.noDecorations li {
    list-style-type: none;
}

/* myDetails  */

#myDetails {
    padding: 10px 0 20px 0;
    border-bottom: solid 1px #ccc;
    margin-bottom: 140px;
    margin-left: 20px;
}

.myDetails .group {
    border-top: dotted 1px #ccc;
    margin-top: 20px;
}

.myDetails table#syn_TitleCode,
.myDetails table#syn_Gender_LP {
    width: 100px;
}

.myDetails .row .value {
    float: left;
    width: 100%;
}

.myDetails .row {
    clear: both;
    margin-bottom: 15px;
}

.myDetails .fieldsyn_HomeAddressSameFlag label {
    float: left;
    line-height: 1.5;
}

.myDetails .dxeErrorCell {
    padding: 5px;
    background: #FFC8C8;
}

.myDetails table.dxeErrorFrame td.dxeControlsCell {
    border: solid 1px #FF8383;
}

.myDetails input#syn_HomeAddressSameFlag {
    float: left;
}

.myDetails .unactionedIcon {
    margin-left: 5px;
}

.portalPanels .dxeTextBoxSys td.dxic,
.portalPanels .dxeButtonEditSys td.dxic {
    padding: 0px;
    overflow: hidden;
}


.myDetails h2 {
    font-size: 24px;
    color: #222;
    font-weight: normal;
    margin: 15px 0;
    background: none;
    text-indent: 0;
}

.myDetails .portalPanels section {
    float: left;
}

#myDetails .unactionedIcon {
    background-image: url(../images/tooltip_icon_i.png);
    width: 16px;
    height: 16px;
    float: left;
}

#myDetails > div.unactionedWarning {
    font-size: 12px;
    color: #5F5F5F;
}

.portalPanels .dxeTextBox,
.portalPanels .dxeMemo,
.portalPanels .dxeButtonEdit {
    background-color: transparent !important;
    border: none !important;
}

#myDetails .unactioned {
    padding: 3px;
    color: #000099;
    width: 92%;
    clear: both;
}


    #myDetails .unactioned .field {
        margin-left: 5px;
    }

/* My Details - Grid */


.myDetails .width0 {
    width: 50px;
}

.myDetails .width1 {
    width: 100px;
}

.myDetails .width2 {
    width: 150px;
}

.myDetails .width3 {
    width: 200px;
}

.myDetails .width4 {
    width: 250px;
}

.myDetails .width5 {
    width: 300px;
}

.myDetails .width6 {
    width: 350px;
}

.myDetails .width7 {
    width: 400px;
}

.myDetails .width8 {
    width: 450px;
}

.myDetails .width9 {
    width: 500px;
}

.myDetails .width10 {
    width: 550px;
}

.myDetails .width11 {
    width: 550px;
}

.myDetails .width11 {
    width: 650px;
}

.myDetails .width12 {
    width: 650px;
}

.myDetails .header {
    border-bottom: solid 1px #aaa;
}

    .myDetails .header .heading {
        float: left;
    }

    .myDetails .header .formEdit {
        float: right;
    }

.myDetails.p2 span.panelEdit a {
    display: none; /*initially hide it*/
}

.myDetails .menuPanel,
.myDetails .container {
    float: left;
}

.myDetails .menuPanel {
    margin-right: 20px;
    padding: 0;
}

.myDetails ul.menuPanel li {
    list-style-type: none;
    margin: 0;
    padding: 5px;
    border: 1px solid #ccc;
    min-width: 100px;
}

.myDetails .responseMessages {
    position: relative;
    display: none; /* hide on load */
}

    .myDetails .responseMessages .alert {
        padding: .4em .6em;
    }

        .myDetails .responseMessages .alert.success {
            background: #EAFAEC;
            color: #2ABB3B;
        }

        .myDetails .responseMessages .alert.error {
            background: #FFD3D3;
            color: #d00;
        }

    .myDetails .responseMessages .closeAlert {
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        padding-right: 5px;
        padding-top: 1px;
    }

        .myDetails .responseMessages .closeAlert:after {
            font-size: 20px;
            content: "\00D7";
            height: 10px;
            width: 10px;
        }

table.dxeButtonEdit img {
    display: block;
}

/* Action Centre/Messages */
#divActionCentreTileContainer {
    float: right;
}

.ActionCentreTilePlaceholder {
    float: right;
    width: 24px;
    height: 24px;
}



    .ActionCentreTilePlaceholder .notifyCounter {
        background-color: #FFF;
        float: left;
        position: absolute;
        padding-left: 2px;
        padding-right: 2px;
        font-weight: bold;
        margin-top: 20px;
        font-weight: bold;
    }

.noFlag {
    background-image: url(../Images/ActionCentre/flagGrey24.png);
}

.messageFlag /*blue*/ {
    background-image: url(../Images/ActionCentre/flagBlue24.png);
}

.messageAndTaskFlag /* blue and green*/ {
    background-image: url(../Images/ActionCentre/flagBlueGreen24.png);
}

.messageAndAlertFlag /* blue and red*/ {
    background-image: url(../Images/ActionCentre/flagBlueRed24.png);
}


.taskFlag /*green*/ {
    background-image: url(../Images/ActionCentre/flagGreen24.png);
}

.taskAndAlertFlag /*green and red*/ {
    background-image: url(../Images/ActionCentre/flagGreenRed24.png);
}

.alertFlag /*red*/ {
    background-image: url(../Images/ActionCentre/flagRed24.png);
}

.messageAndTaskAndAlertFlag /*blue, green and red*/ {
    background-image: url(../Images/ActionCentre/flagBlueGreenRed24.png);
}

.ActionCentreTilePlaceholder .interactionBox {
    width: 100%;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    cursor: pointer;
    float: right;
    overflow: hidden;
}

#actionCentreMaint .AlertIcon,
#actionCentreMaint #messageDetails #detail label.alert {
    background-image: url(../Images/ActionCentre/alert16.bmp);
}

#actionCentreMaint .InfoIcon,
#actionCentreMaint #messageDetails #detail label.info {
    background-image: url(../Images/ActionCentre/info16.bmp);
}

#actionCentreMaint .TaskIcon,
#actionCentreMaint #messageDetails #detail label.task {
    background-image: url(../Images/ActionCentre/task16.bmp);
}

#actionCentreMaint .WorkFlowIcon,
#actionCentreMaint #messageDetails #detail label.workflow {
    background-image: url(../Images/ActionCentre/task16.bmp);
}

#actionCentreMaint .AlertDetailIcon {
    background-image: url(../Images/ActionCentre/alert48.png);
}

#actionCentreMaint .InfoDetailIcon {
    background-image: url(../Images/ActionCentre/info48.png);
}

#actionCentreMaint .TaskDetailIcon {
    background-image: url(../Images/ActionCentre/task48.png);
}

#actionCentreMaint .WorkflowDetailIcon {
    background-image: url(../Images/ActionCentre/task48.png);
}

#actionCentreMaint #messageDetails {
    border-top: 2px solid #a9a9a9;
}

#actionCentreMaint .portalForm {
    margin-bottom: 0px !important;
}

#actionCentreMaint .messageTypeIcon {
    float: left;
}

#actionCentreMaint .actionHeader {
    font-weight: bold !important;
    font-size: small !important;
}

.refActionMessageSummaryGridRows, .refActionMessageSummaryGridRows tr td.dxgv {
    background-color: lightyellow;
    color: black;
}

    .refActionMessageSummaryGridRows .dxgvSelectedRow td.dxgv, .refActionMessageSummaryGridRows .dxgvFocusedRow td.dxgv {
        overflow: hidden;
        border-bottom: 1px Solid #CFCFCF;
        border-right: 1px Solid #CFCFCF;
        border-top-width: 0px;
        border-left-width: 0px;
        padding: 3px 6px 4px;
        background-color: #8D8D8D;
    }
/* End Action Centre/Messages */



.PortalPaymentPlans table.summary, .PortalPaymentPlans table .dxgvTable {
    background-color: transparent;
    border: none;
    overflow: visible;
}

.PortalPaymentPlans .summaryRow .amountDescription,
.PortalPaymentPlans .summaryRow .subAmountDescription,
.PortalPaymentPlans .summaryRow .donationDescription {
    text-align: right;
}

.PortalPaymentPlans .summaryRow {
    padding: 4px 0px 4px 0px;
    border-top: solid 1px #cccccc;
    height: 20px;
    line-height: 20px;
}


.PortalPaymentPlans table.summary tr.summaryRow td {
    border: none;
    border-top: solid 1px #cccccc;
}

    .PortalPaymentPlans table.summary tr.summaryRow,
    .PortalPaymentPlans table.summary tr.summaryRow td.dxgv {
        border-top: none;
        overflow: visible !important;
    }



        .PortalPaymentPlans table.summary tr.summaryRow.previousOwning {
            border-top: none;
            font-weight: bold;
            background-color: #ffe7e7;
            color: #700000;
        }



        .PortalPaymentPlans table.summary tr.summaryRow.SubTotal,
        .PortalPaymentPlans table.summary tr.summaryRow.OwningForPlan,
        .PortalPaymentPlans table.summary tr.summaryRow.feesTotal {
            border-top: none;
            font-weight: bold;
            background-color: #DCDCDC;
            color: black;
        }

        .PortalPaymentPlans table.summary tr.summaryRow.SubTotal {
            background-color: lightcyan;
        }

        .PortalPaymentPlans table.summary tr.summaryRow.OwningForPlan {
            background-color: #e8e8e8;
        }

.PortalPaymentPlans .summaryRow .comboboxDonation {
    display: inline-block;
    float: left;
}

.PortalPaymentPlans .summaryRow div.donationInfo {
    display: inline-block;
    float: left;
    width: 16px;
    height: 16px;
    margin-left: 16px;
    margin-top: 2px;
    background-image: url('../images/tooltip_icon_i.png');
    cursor: help;
}

    .PortalPaymentPlans .summaryRow div.donationInfo:hover .infoText {
        display: block;
        cursor: help;
    }


    .PortalPaymentPlans .summaryRow div.donationInfo .infoText {
        display: none;
        position: relative;
        width: 250px;
        height: auto;
        min-height: 60px;
        padding: 4px;
        background: #ffffff;
        left: 36px;
        top: -32px;
        border: 1px solid #3A637A;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 2px 2px 10px 0px #616161;
        -moz-box-shadow: 2px 2px 10px 0px #616161;
        box-shadow: 2px 2px 10px 0px #616161;
    }

        .PortalPaymentPlans .summaryRow div.donationInfo .infoText:after {
            content: "";
            position: absolute;
            top: 26px;
            left: -20px;
            border-style: solid;
            border-width: 13px 20px 13px 0;
            border-color: transparent #3A637A;
            display: block;
            width: 0;
            z-index: 9999;
        }

        .PortalPaymentPlans .summaryRow div.donationInfo .infoText h6 {
            width: 100%;
            margin: 0px 0px 4px 0px;
            font-size: 12px;
            color: black;
            height: 16px;
        }

        .PortalPaymentPlans .summaryRow div.donationInfo .infoText p {
            width: 100%;
            margin: 0px;
            line-height: 13px;
            margin-bottom: 4px;
        }


.PortalPaymentPlans .summaryRow label {
    display: inline-block;
    float: left;
    text-align: right;
    padding-right: 4px;
}

    .PortalPaymentPlans .summaryRow label.SubAmount {
        width: 80px;
    }

    .PortalPaymentPlans .summaryRow label.Amount {
        width: 80px;
        margin-left: 60px; /* right aligns amounts out of sub amounts */
    }


    .PortalPaymentPlans .summaryRow label.moneyValue {
        margin-right: 10px;
    }

    .PortalPaymentPlans .summaryRow label.overdue {
        width: 370px;
        text-align: left;
        float: right;
    }

.PortalPaymentPlans .summaryRow .balanceDivider {
    /*display:none;
    width:300px;
    float:left;
    margin:0px;
    margin-left:60px;*/
    /*
   
    height:1px;
    border-bottom:1px solid gray;
    margin:0px;
   
    clear: both;
    */
}

.PortalPaymentPlans .hiddenValue, .hidden {
    display: none;
}

.PortalPaymentPlans .summaryRow.Amount {
    font-weight: bold;
    color: navy;
}


/*Portal Payment plans discountOptions */

.PortalPaymentPlans .discountOptions {
    display: block;
    float: left;
    line-height: 20px;
    font-size: 11px;
    width: 700px;
}


.PortalPaymentPlans .divPaymentMethod ul {
    margin: 5px;
    padding: 8px;
}


.PortalPaymentPlans .discountOption {
    display: block;
    float: left;
    line-height: 20px;
    font-size: 11px;
    margin: 4px;
    width: 326px;
    -webkit-border-radius: 0px 10px 0px 10px;
    -moz-border-radius: 0px 10px 0px 10px;
    border-radius: 0px 10px 0px 10px;
    border: 2px solid #D1D1D1;
    cursor: pointer;
}

.PortalPaymentPlans ul.discountOption {
    display: block;
    float: left;
    width: 335px;
    list-style: none;
    margin-top: 12px;
}

.PortalPaymentPlans .discountOption.NotSelected {
    background-color: #D1D1D1;
    cursor: pointer;
}

.PortalPaymentPlans .discountOption.Selected {
    background-color: orange;
    cursor: pointer;
}

.PortalPaymentPlans .discountOption.NotSelected:hover {
    background-color: Yellow;
}

.PortalPaymentPlans .discountOption .moneyAlign {
    display: inline-block;
    width: 75px;
    text-align: right;
    text-wrap: avoid;
}


.PortalPaymentPlans .discountOption li.liDiscountOption {
    clear: both;
}

    .PortalPaymentPlans .discountOption li.liDiscountOption .money {
        text-align: right;
    }



    .PortalPaymentPlans .discountOption li.liDiscountOption label,
    .PortalPaymentPlans .discountOption li.liDiscountOption span {
        float: left;
        display: inline-block;
    }

    .PortalPaymentPlans .discountOption li.liDiscountOption.columnCaptions {
        font-weight: bold;
    }

    .PortalPaymentPlans .discountOption li.liDiscountOption label {
        font-weight: bold;
        width: 50px;
    }

    .PortalPaymentPlans .discountOption li.liDiscountOption span.postDiscount {
        width: 160px;
        margin-left: 5px;
    }

    .PortalPaymentPlans .discountOption li.liDiscountOption span.discountValue {
        width: 105px;
        margin-left: 5px;
    }



.PortalPaymentPlans .activePlans span {
    display: inline-block;
    width: 70px;
    float: left;
    margin-left: 4px;
    margin-right: 4px;
}

    .PortalPaymentPlans .activePlans span.checkbox {
        width: 20px;
    }

    .PortalPaymentPlans .activePlans span.planNumber {
        font-weight: bold;
    }



    .PortalPaymentPlans .activePlans span.planFigures {
        color: darkgreen;
        text-decoration: line-through;
        font-weight: bold;
    }

    .PortalPaymentPlans .activePlans span.postDiscount {
        color: navy;
        font-weight: bold;
    }

    .PortalPaymentPlans .activePlans span.voluntaryC {
        min-width: 200px;
        font-weight: bold;
    }

    .PortalPaymentPlans .activePlans span.equals {
        text-align: center;
        width: 14px;
    }

    .PortalPaymentPlans .activePlans span.instalment {
        font-weight: bold;
    }

    .PortalPaymentPlans .activePlans span.planDescription {
        display: inline-block;
        float: right;
        clear: both;
        width: 530px;
    }



/*.PortalPaymentPlans .paymentOptions  .paymentOption .planFigures
 {  
    display:inline-block;
    float:right;
    width:530px;
 }

.PortalPaymentPlans .paymentOptions  .paymentOption .planFigures span
{  
    display:inline-block;
    float:left;
    margin-left:5px;
    color:blue;
}
.PortalPaymentPlans .paymentOptions  .paymentOption .planFigures span.fullAmount
{  
   text-decoration:line-through;
   color:#7d7d7d;
}


*/

/* Sports Page */
.SportsBodyDiv {
    float: left;
}

.SeasonHeaderDiv {
    float: left;
    margin: 30px 0 5px 20px;
    width: 100%;
    border-top: solid 1px #CCC;
    padding: 20px 0 5px;
}

.SeasonDescriptionDiv {
    float: left;
    padding-left: 20px;
    line-height: 1.5;
    max-width: 70em;
    margin-bottom: 5px;
}

.PreferenceRowDiv {
    float: left;
    width: 100%;
    margin-top: 10px;
    padding-left: 10px;
}

.PreferenceLabelDiv {
    width: 80px;
    color: #222;
    float: left;
    padding-left: 10px;
    padding-top: 10px;
    text-align: right;
}

.PreferenceDropDownDiv {
    float: left;
    padding-top: 7px;
    padding-left: 10px;
}

.ButtonBarDiv {
    padding-top: 30px;
}

#SportsBodyDiv .responseText {
    padding-left: 10px;
    display: inline;
}
/* End Sports Page */

/*Added to fix render problem in IE 11 for cdaCombobox.*/
input[type='text'].dxeEditArea, input[type='password'].dxeEditArea {
    /*line-height:14px !important;*/
}


/* Student Contacts Page Start */
#divParentContactsGrid .parentContactsFilterRow input {
    text-indent: 20px;
}

#divParentContactsGrid .parentContactsFilterRow:before {
    content: url(../Images/search16.png);
    position: absolute;
    padding: 5px;
}

#divParentContactsGrid .shareValue {
    line-height: 20px;
    margin-left: 5px;
}

#divParentContactsGrid .parentContactsGridHeader {
    background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
}

    #divParentContactsGrid .parentContactsGridHeader td:first-child {
        text-decoration: underline;
        font-weight: bold;
    }

    #divParentContactsGrid .parentContactsGridHeader:hover {
        background: linear-gradient(0deg, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
    }

    #divParentContactsGrid .parentContactsGridHeader td:hover {
        color: blue;
    }
/* Student Contacts Page End*/


.SportsBodyDiv {
    font-size: 12px;
    line-height: 1.45;
}

    .SportsBodyDiv .electiveGroup {
        padding: 20px;
        margin: 15px;
        background-color: #FFF;
        box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 4px -1px;
    }

        .SportsBodyDiv .electiveGroup:first-of-type {
            margin-top: 0;
        }

    .SportsBodyDiv .electiveGroupDescription {
        font-size: 16px;
        color: #222;
        margin: 0;
        font-weight: bold;
    }


    .SportsBodyDiv .classCode,
    .SportsBodyDiv .classDescription {
        font-size: 12px;
        font-weight: bold;
        width: auto;
        display: inline-block;
        padding: 0 1em 0 0;
        margin: 0 0 0.2em;
    }

    .SportsBodyDiv .electiveGroupPreference {
        display: block;
        border-bottom: solid 3px #FFF;
        background-color: #eee;
        margin-top: 0;
        padding: 15px;
    }

    .SportsBodyDiv .electiveGroupPublishText {
        margin: 0.5em 0 2em;
    }

    .SportsBodyDiv p.classPortalDescription {
        margin: 0;
        max-width: 80%;
        line-height: 1.5;
        color: #777;
    }

    /* Controls */

    .SportsBodyDiv select {
        font-size: 14px !important;
        min-width: 4em;
        float: right;
        min-width: 60px;
    }

    .SportsBodyDiv input.preferenceSelected {
        float: right;
        width: 13px;
        height: 13px;
        padding: 0;
        margin: 0;
        vertical-align: bottom;
        position: relative;
    }

    .SportsBodyDiv input.preferenceSelected {
        padding: 5px;
        border-bottom: 4px solid red;
    }

    .SportsBodyDiv label.submitted {
        padding-left: 20px;
        color: blue;
        font-size: 11px;
    }

    /* Group code is not required - JM */
    .SportsBodyDiv .electiveGroupCode {
        display: none;
    }

/* Applications Page */
.app_grd_hdr_entryyear_cell {
    font-weight: bold;
    font-size: 12px;
    background-color: #E4E4E4;
    padding: 3px;
    width: 80px;
}

.app_grd_hdr_campus_cell {
    font-weight: bold;
    font-size: 12px;
    background-color: #E4E4E4;
    padding: 3px;
    width: 80px;
}

.app_grd_hdr_yearlevel_cell {
    font-weight: bold;
    font-size: 12px;
    background-color: #E4E4E4;
    padding: 3px;
    width: 80px;
}

.app_grd_hdr_boarder_cell {
    font-weight: bold;
    font-size: 12px;
    background-color: #E4E4E4;
    padding: 3px;
    width: 80px;
}

.app_grd_hdr_applicationdate_cell {
    font-weight: bold;
    font-size: 12px;
    background-color: #E4E4E4;
    padding: 3px;
}

.app_grd_entryyear_cell {
    text-align: left;
    padding-bottom: 1px;
    padding-left: 3px;
    background: url(../images/dotted.gif) repeat-x bottom;
    width: 80px;
}

.app_grd_campus_cell {
    text-align: left;
    padding-bottom: 1px;
    padding-left: 3px;
    background: url(../images/dotted.gif) repeat-x bottom;
    width: 80px;
}

.app_grd_yearlevel_cell {
    text-align: left;
    padding-bottom: 1px;
    padding-left: 3px;
    background: url(../images/dotted.gif) repeat-x bottom;
    width: 80px;
}

.app_grd_boarder_cell {
    text-align: left;
    padding-bottom: 1px;
    padding-left: 3px;
    background: url(../images/dotted.gif) repeat-x bottom;
    width: 80px;
}

.app_grd_applicationdate_cell {
    text-align: left;
    padding-bottom: 1px;
    padding-left: 3px;
    background: url(../images/dotted.gif) repeat-x bottom;
}

.applicationsTableBoldRow {
    font-weight: bold;
}

.hide {
    visibility: hidden;
}

#myDetails .consentsRow.headerRow {
    background-color: white;
}

.Medication .text {
    height: auto !important;
    line-height: normal !important;
}

.stepScroll {
    display: inline-block;
}

.popupInfo {
    font-family: Arial, sans-serif;
    font-size: 12px;
}

.popupIdleTimeout #labelTimeoutCounter,
.popupIdleTimeout #labelTimeoutCounter .dxeBase {
    text-align: center;
    margin: 5px 0;
    color: #f00;
    font-size: 14px;
    font-weight: bold;
}

.labelTimeoutMessage {
    text-align: center;
}

.popupInfo .buttonRow {
    margin-top: 10px;
}

.popupInfo .cdaButton {
    margin: 0;
}

.dxeTextBox, .dxeButtonEdit, .dxeBase, .dxpcLite .dxpc-content {
    font-family: Arial;
    font-size: 11px;
}

.MyDetailsCustomHTMLTop {
    max-width: 1190px;
    box-sizing: border-box;
    margin: 10px 0 5px 20px;
    font-size: 12px;
}

.MyDetailsDisclaimer {
    max-width: 1190px;
    box-sizing: border-box;
    margin: 5px 0 10px 20px;
    font-size: 12px;
    background-color: #F3FEFF;
    display: block;
    padding: 10px 15px;
    color: #006CD5;
    border: solid 1px #AED7FF;
    border-radius: 4px;
    float: left;
    line-height: 1.4;
}

.excursionError {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding: 1em;
    font-size: 14px;
    border-radius: 4px;
    color: #D00;
    clear: both;
    background: #FFDCDC;
}

.excursions .row.buttons {
    float: left;
    margin-bottom: 10px;
}



/* Syn.Dialog styles */
div.dialogBackground {
    display: table-cell;
    position: fixed;
    vertical-align: middle;
    top: 0px;
    left: 0px;
    /*  IMPORTANT
        Use RGB so child element don't inherit opacity
    */
    background-color: rgba(0,0,0,0.5);
    height: 100%;
    width: 100%;
    z-index: 99999;
}


    div.dialogBackground div.dialogBase {
        display: block;
        z-index: 100000;
        float: none;
        width: 400px;
        height: 100px;
        margin: 0px auto;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -200px;
        margin-top: -150px;
    }

div.dialogBase div.dialogHeader {
    display: block;
    clear: both;
    float: left;
    color: #404040;
    background-color: #DCDCDC;
    padding: 4px 12px 4px 12px;
    border-bottom: 1px solid #C9C9C9;
    width: 100%;
}

    div.dialogBase div.dialogHeader div.dialogImageButtonClose {
        background-color: orange;
    }

div.dialogBase div.dialogContent {
    display: block;
    clear: both;
    float: left;
    background-color: white;
    width: 100%;
    height: auto;
    padding: 4px 12px 4px 12px;
    border-top: none;
}

div.dialogBase div.dialogButtonRow {
    display: block;
    float: left;
    background-color: white;
    padding: 4px 12px 8px 12px;
    width: 100%;
    height: 26px;
}

    div.dialogBase div.dialogButtonRow input[type=button] {
        display: inline-block;
        float: right;
        cursor: pointer;
        margin-left: 8px;
        height: 26px;
        padding: 4px 16px 4px 16px;
        border: solid 1px #7F7F7F;
        background-image: url('/DXR.axd?r=1_23-pNp3a');
    }

        div.dialogBase div.dialogButtonRow input[type=button]:hover {
            background-image: url('/DXR.axd?r=1_24-pNp3a');
        }


#divCalendarIcon {
    float: right;
    margin-right: 3px;
}

    #divCalendarIcon #menuCalendarIcon {
        text-align: center;
        font-weight: bold;
        background-color: #424242;
    }

        #divCalendarIcon #menuCalendarIcon .container {
            width: 24px;
            height: 20px;
            padding: 2px;
            cursor: pointer;
        }

        #divCalendarIcon #menuCalendarIcon #calendarIconMonthName {
            background-color: #800000;
            color: #fff;
            padding: 0 0;
            font-size: 8px;
        }

        #divCalendarIcon #menuCalendarIcon #calendarIconMonthDate {
            background-color: #fff;
            color: #000;
            font-size: 8px;
            padding: 1px 0;
        }

#extraMenuDiv {
    float: right;
}

.rowEventTextfield {
    clear: both;
}

/* Admin Configuration */

span.labelReportsSaved, span.labelMaintenanceSaved, span.labelMaintenanceLogoutUserMode {
    margin-top: 1px;
    margin-left: 4px;
}



.versionInfo {
    position: relative;
    display: block;
    height: 0px;
    z-index: 1;
    float: right;
    right: 60px;
    /*margin: 0px auto;*/
    /*top: 0px;
    left: 600px;*/
    color: #dddddd;
    width: 440px;
    font-size: 11px;
    background-color: darkgray;
}

    .versionInfo .Fresh {
        color: #00e900;
    }

    .versionInfo .Fresh.isLogin {
       -webkit-animation: LargeToSmallFresh 2s;
       transform: scale(1);
    }

    .versionInfo .Ok {
        color: greenyellow;
    }
    .versionInfo .Ok.isLogin {
         -webkit-animation: LargeToSmallOk 2s;
        transform: scale(1);
    }
    .versionInfo .Stale {
        color: yellow;
       
    }
    .versionInfo .Stale.isLogin {
         animation: shake 1s cubic-bezier(.36,.07,.19,.97) both;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        perspective: 1000px;
    }

    .versionInfo .GoneBad {
        color: #e04b00;
       
    }
    .versionInfo .GoneBad.isLogin {
        animation: shake 2s cubic-bezier(.36,.07,.19,.97) both;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        perspective: 1000px;

    }


@-webkit-keyframes LargeToSmallFresh {
    from {
        -webkit-transform: scale(1.05);
        color: #00a100;
    }

    to {
        -webkit-transform: scale(1);
        color: #00e900;
    }
}

@-webkit-keyframes LargeToSmallOk {
    from {
        -webkit-transform: scale(1.05);
        color: #00e900;
    }

    to {
        -webkit-transform: scale(1);
        color: greenyellow;
    }
}

@keyframes shake {

    10%, 90% {
        transform: translate3d(-2px, 0, 0);
        -webkit-transform: scale(1.1);
    }

    20%, 80% {
        transform: translate3d(4px, 0, 0);
        -webkit-transform: scale(1.2);
    }

    30%, 50%, 70% {
        transform: translate3d(-8px, 0, 0);
        -webkit-transform: scale(1.2);
    }

    40%, 60% {
        transform: translate3d(8px, 0, 0);
        -webkit-transform: scale(1.1);
    }
}

.versionInfo table {
    margin-top: 12px;
    height: 40px;
    background-color: #464646;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid black;
    padding: 4px;
}

.versionInfo .large {
    font-size: 12px;
    font-weight: bold;
}

.versionInfo label {
    font-weight: bold;
    text-align: right;
    float: right;
}

.excursionConsent .dx-wrap {
    white-space: pre-wrap !important;
}


/* HEADER OVERLAY BANNER (CONFIRMATION OF DETAILS REMINDER)*/

#myDetails .portalDetailsConfirmationBanner {
    display:block;
    font-size:12px;
    color:#958a59;
    background:#fefae8;
    border:solid 1px #cbc4a6;
    border-radius:4px;
    margin-bottom:10px;
    padding:10px 15px;
}
#myDetails .portalDetailsConfirmationBanner h3 {
    font-size:14px;
    margin:0;
}

#myDetails .portalDetailsConfirmationBanner p {
    margin-bottom:0;
}


.siteoverlaybannerWrapper {
    display:-ms-grid;
    -ms-grid-columns:1200px;
    -ms-grid-rows:50px;
    background:rgba(255,255,255,0.97);
    width:100%;
    color:#222;
    position:fixed;
    top:0px;
    left:0px;
    z-index:999999;
    padding:0px;
    box-shadow:0px 1px 5px rgba(30,30,30,0.3);
    -webkit-backface-visibility: hidden;
    backface-visibility:hidden;
}


.siteoverlaybannerWrapper div {
    display:inline-flex;
    display:-ms-inline-flexbox;
    align-items:center;
    justify-content:center;
}

.siteoverlaybannerWrapper .siteoverlaybanner * {
    display:inline-block;
}

.siteoverlaybannerWrapper .siteoverlaybannerIcon {
    width:50px;
    height:50px;
    float: left;
}

.siteoverlaybannerWrapper .siteoverlaybannerIcon img {
    display:inline-block;
    width:22px;
    height:22px;
}
.siteoverlaybannerWrapper .siteoverlaybanner {
    display:inline-flex;
    width:calc(100% - 100px);
    vertical-align:baseline;
    justify-content:flex-start;
    font-size:1rem;
}

.siteoverlaybannerWrapper .overlaybannerclose {
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:16px;
    color:#777;
    cursor:pointer;
    float: right;
    line-height: 50px;
    width: 50px;
}

#myDetails [class="dxpcDropDown dxpclW dxpc-ddSys"] {
    top:5px!important;
}

#divConfirmationEmail {
    padding: 15px !important;
    border: 1px solid;
    border-color: #CCCCCC;
}

#divConfirmationEmailSubject {
    font-weight: bold;
}