/* ============================================================================================================
    CAL3 - Master CSS
    Description: This stylesheet looks after the core styling properties of CAL3 main website.
   ============================================================================================================ */

body {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 10pt;
    background-color: #fff;
    margin: 0px;
    padding: 9px;
}

/* --------------- Text Styling --------------- */
h1, h2, h3, h4, h5 {
    font-weight: lighter;
    color: #A6003E;
}

.row.box h1, .row.box h2, .row.box h3 {
    margin: 3px;
}

h1 {
    font-size: 2.2em;
}

h2 {
    font-size: 1.4em;
}

h3 {
    font-size: 1.2em;
    font-weight: lighter;
}

h4 {
    line-height: 0.8em;
}

.pointer {
    background: url('../Images/pointer.gif') no-repeat 0 0;
    padding-left: 15px;
}

.inline {
    display: inline !important;
}

.h2sub {
    font-size: 1.0em; /*10pt;*/ /*font-weight:normal;*/
}

.strikethrough {
    text-decoration: line-through;
}

.lefttext {
    text-align: left;
}

.centertext {
    text-align: center;
}

.righttext {
    text-align: right;
}

.subtext {
    font-size: small;
}

.ProductInfo {
    margin-left: 5px;
    margin-right: 25px; /* font-weight:bold; */ /* padding-left:5px;*/
}

.h2Special {
    margin-left: -5px;
}

.rowInRow {
    margin-left: 5px;
}

.h4sub {
    line-height: inherit;
    margin-top: 2px;
    margin-bottom: 5px;
}

.ds3 {
    margin: 0 !important;
}

.errorMessageText {
    font-size: 8pt;
    color: #FF0000;
}

.activeText {
    font-weight: bold;
    color: #006600; /* green */
}

.inactiveText {
    font-weight: bold;
    color: #FF0000; /* bright red */
}

.red {
    color: #A8003E;
}

.blue {
    color: #0033CC;
}

.inactiveTextNormal {
    color: #FF0000; /* bright red */
}

.pink {
    background-color: #F0BFF0 !important;
}

.redbackground {
    background-color: #FF0000;
}

.greenbackground {
    background-color: #73C109;
}

.amberbackground {
    background-color: #FFCC66;
}

.greybackground {
    background-color: #C0C0C0;
}

.whitebackground {
    background-color: #FFFFFF;
}
/* Hyperlink Colours Master Default */
a {
    color: Black;
    text-decoration: none;
    cursor: pointer;
    outline: 0;
}

    a.visited {
        color: Black;
    }

    a:hover {
        text-decoration: underline;
        outline: 0;
    }

    a:active {
        outline: 0;
    }

.aforcedUnderline {
    text-decoration: underline !important;
    outline: 0;
}

ul {
    z-index: 1000;
}

    ul.info {
        padding: 5px 0px 0px -15px;
        line-height: 1.5em;
        position: inherit;
    }

li {
    font-size: 1.2em;
    color: #565556;
    padding: 20px;
}

.tab ul.login li {
    text-align: left;
    font-size: 1.0em;
}

.ulreports {
    z-index: 1000;
}

.ul_reports_info {
    padding: 5px 0px 0px -15px;
    line-height: 1.5em;
    position: inherit;
}

.lireports {
    font-size: 1.2em;
    color: #565556;
    padding: 10px;
}



/* --------------- Diagnostic Menu --------------- */
#calMenu ul {
    float: left;
    width: 95%;
    list-style-type: none;
}

#calMenu li {
    font-size: 9px;
    text-align: center;
    /*width: 90px; vs2017*/
    /*height: 24px; vs2017 */
    display: inline-block;
    margin-right: -4px;
    zoom: 1; /* Fixes the IE7 issues */
    *display: inline; /* Fixes the IE7 issues */
}


/* --------------- Login/Change Password Form Control -------------- */
#login_form, #change_password_form {
    height: auto;
    width: 350px;
    font-size: 14px;
    background: #fff;
    border: 1px solid #CCCCCC;
    display: block;
    margin-left: auto; /* leave these on auto to centralise the div. */
    margin-right: auto; /* leave these on auto to centralise the div. */
    margin-bottom: 60px;
    clear: both;
}

    #login_form h2, #change_password_form h2 {
        display: block;
        margin: 0;
        font-size: 12pt;
        color: #FFFFFF;
        background-color: #A8003E; /* BC Red */
        height: 25px;
        line-height: 25px;
        width: 100%;
        text-align: center;
    }

/* --------------- Page Layout Properties --------------- */
/* page is the content container */
#page {
    behavior: url('../Scripts/PIE.htc'); /* Fixes early IE Issues. It is IE specific property, so will cause W3C validation errors */
    width: 960px; /* Width of main page form. */
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    background-color: #ffffff;
    border: 1px solid #CCCCCC;
    -moz-box-shadow: 0 0 6px #999;
    -webkit-box-shadow: 0 0 6px #999;
    box-shadow: 0 0 6px #999;
}

/* | My Details | Change Password | Log Off | */
#account {
    float: right;
    padding: 10px 30px 0px 0px;
    font-size: 12px;
    text-align: right;
}

#stats {
    position: absolute;
    top: 10px;
    left: 400px;
    /* padding:10px 30px 0px 0px;*/
    /* font-size:12px;*/
    /*text-align:right;*/
}

/* Create a box around content. Just add this as an additional class! */
.box {
    margin: 5px;
    padding: 8px; /* padding: 8px; */
    border: 1px solid #A9A9A9;
    /*border-radius: 6px;*/
}

.bBoxStandard {
    margin: 2px;
    height: 285px;
}

.bBoxTall {
    margin: 2px;
    height: 350px;
}

.whitebox {
    margin: 5px;
    padding: 8px;
    border: 1px solid #fff;
}

.whiteboxcompact {
    margin: 0px;
    padding: 8px;
    border: 1px solid #fff;
}

.whiteboxcompactheight {
    margin: 0px 0px 0px 5px;
    padding: 8px;
    border: 1px solid #fff;
}

.greybox {
    margin-top: 5px;
    margin-bottom: 5px;
}

.greyboxlabelz {
    margin-top: 5px;
    margin-bottom: 5px;
}

.row .greybox {
    background: #e6e6e6;
    padding: 2px;
}

.row .greyboxlabelz {
    /*background: #e6e6e6;*/
    padding-top: 2px;
    padding-bottom: 2px;
}

.greyboxcompact {
    margin-top: 0px;
    margin-bottom: 0px;
}

.row .greyboxcompact {
    background: #e6e6e6;
    padding: 2px;
}

.row .whitebox {
    background: #fff;
    padding: 2px;
}

.row .whiteboxcompact {
    background: #fff;
    padding: 2px;
}

.row .whiteboxcompactheight {
    background: #fff;
    padding: 2px;
}

.redbox {
    margin: 5px;
    padding: 8px;
    border: 1px solid #FF0000;
}

.centrebox {
    text-align: center;
}

.cell24 { height:24px;
          vertical-align:middle;
          line-height:24px;

}
/* Use this to create a div based table layout. Useful for fluid forms, data, etc */
.row {
    padding: 4px;
    display: block;
    clear: both;
}

.col-2 {
    width: 2%;
    float: left;
}

.col-3 {
    width: 3%;
    float: left;
}

.col-4 {
    width: 4%;
    float: left;
}

.col-5 {
    width: 5%;
    float: left;
}

.col-6 {
    width: 6%;
    float: left;
}

.col-7 {
    width: 7%;
    float: left;
}

.col-8 {
    width: 8%;
    float: left;
}

.col-10 {
    width: 10%;
    float: left;
}

.col-12 {
    width: 12%;
    float: left;
}

.col-13 {
    width: 13%;
    float: left;
}

.col-15 {
    width: 15%;
    float: left;
}


.col-20 {
    width: 20%;
    float: left;
}

.col-22 {
    width: 22%;
    float: left;
}

.col-23 {
    width: 23%;
    float: left;
}

.col-24 {
    width: 24%;
    float: left;
}

.col-25 {
    width: 25%;
    float: left;
}

.col-27 {
    width: 27.5%;
    float: left;
}

.col-30 {
    width: 30%;
    float: left;
}

.col-33 {
    width: 33.33%;
    float: left;
}

.col-35 {
    width: 35%;
    float: left;
}

.col-37 {
    width: 37%;
    float: left;
}

.col-40 {
    width: 40%;
    float: left;
}

.col-41 {
    width: 41%;
    float: left;
}

.col-42 {
    width: 42%;
    float: left;
}

.col-43 {
    width: 43%;
    float: left;
}

.col-44 {
    width: 44%;
    float: left;
}


.col-45 {
    width: 45%;
    float: left;
}

.col-46 {
    width: 46%;
    float: left;
}

.col-47 {
    width: 47%;
    float: left;
}

.col-48 {
    width: 48%;
    float: left;
}

.col-49 {
    width: 49%;
    float: left;
}

.col-50 {
    width: 50%;
    float: left;
}

.col-55 {
    width: 55%;
    float: left;
}

.col-60 {
    width: 60%;
    float: left;
}

.col-62 {
    width: 62%;
    float: left;
}

.col-65 {
    width: 65%;
    float: left;
}

.col-66 {
    width: 66%;
    float: left;
}

.col-70 {
    width: 70%;
    float: left;
}

.col-75 {
    width: 75%;
    float: left;
}

.col-80 {
    width: 80%;
    float: left;
}

.col-90 {
    width: 90%;
    float: left;
}

.col-93 {
    width: 93%;
    float: left;
}

.col-95 {
    width: 95%;
    float: left;
}

.col-96 {
    width: 96%;
    float: left;
}

.col-97 {
    width: 96%;
    float: left;
}

.col-98 {
    width: 98%;
    float: left;
}

.col-100 {
    width: 100%;
    float: left;
}

.h-32 {
    height: 32px;
}

.h-28 {
    height: 28px;
}

.fltrt {
    float: right;
}

.fltlt {
    float: left;
}

.clearboth {
    clear: both;
}

.thin {
    font-size: 30%;
}

.taller {
    padding-bottom: 20px;
}

.h-95 {
    height: 95%;
    float: left;
}

.td-20 {
    width: 20px;
}
/* --------------- Header Properties --------------- */
#header {
    height: 95px;
    padding-top: 5px;
    position: relative;
    border: none;
    color: #000;
}

.homeHeader, h2.homeHeader {
    margin: 0;
    font-size: 2.0em;
    font-weight: lighter;
    background: #F3F2F1;
    border: 1px solid #A9A9A9; /* Dark Grey */
    padding: 5px;
    color: #666666;
}

.homeHeadermh, h2.homeHeadermh {
    margin: 0;
    font-size: 2.0em;
    font-weight: lighter;
    background: #F3F2F1;
    border: 1px solid #A9A9A9; /* Dark Grey */
    padding: 5px;
    color: #666666;
    min-height: 20px;
}

.formHeader, h2.formHeader {
    margin: 0;
    font-size: 1.4em; /*2.0em*/
    background: #A8003E; /* BC Red */
    border-color: #000;
    border-style: solid;
    border-width: 1px;
    padding: 5px;
    color: #fff;
}

/* pages where there are controls inline with the heading */
h2.withControls {
    float: left;
    width: 60%;
}

.headerControls {
    float: right;
    margin: 2px;
    width: 20%;
}

.homeheaderControls {
    float: right;
    margin: 2px;
}

h2.withControlsx2 {
    float: left;
    width: 50%;
}

.headerControlsx2 {
    float: right;
    margin: 2px;
    width: 40%;
}

.logo {
    position: absolute;
    top: 10px;
    left: 15px;
}

/* --------------- Footer Properties --------------- */
#footer {
    padding: 0;
    margin: 0;
    margin-left: -1px;
    width: 960px;
    color: #fff; /* Font Color white */
    background: #333333; /* Charcoal Background */
    border-color: #A9A9A9; /*Dark Grey */
    border-style: solid;
    border-width: 1px;
    height: 120px;
}

#footer_logo {
    background: none;
    border: none;
    width: 170px;
    height: 50px;
    margin: 10px;
    float: left;
}

#footer_links {
    background: none;
    border: none;
    width: 170px;
    height: 50px;
    margin: 10px;
    float: left;
}

#footer_info {
    width: 500px;
    border: none;
    height: auto;
    text-align: right;
    margin: 10px;
    float: right;
    font-size: 11px;
}

#footer_logolinks {
    margin-top: 5px;
    float: left;
    font-size: 10px;
}

#footer_info a {
    color: #fff;
    text-decoration: none;
}

    #footer_info a:hover {
        color: #fff;
        text-decoration: underline;
    }

#footer_logo a {
    color: #fff;
    text-decoration: none;
    font-size: 10px;
}

    #footer_logo a:hover {
        color: #fff;
        text-decoration: underline;
    }



/* --------------- Web Quote Footer Properties --------------- */
#web_quote_footer {
    padding: 0;
    margin: 0;
    margin-left: -1px;
    width: 960px;
    color: #fff; /* Font Color white */
    background: #333333; /* Charcoal Background */
    border-color: #A9A9A9; /*Dark Grey */
    border-style: solid;
    border-width: 1px;
    height: 60px;
}

#web_quote_footer_logo {
    background: none;
    border: none;
    width: 170px;
    height: 50px;
    margin: 10px;
    float: left;
}

#web_quote_footer_info {
    width: 500px;
    border: none;
    height: auto;
    text-align: right;
    margin: 5px;
    float: right;
    font-size: 11px;
}

    #web_quote_footer_info a {
        color: #fff;
        text-decoration: none;
    }

        #web_quote_footer_info a:hover {
            color: #fff;
            text-decoration: underline;
        }

    #web_quote_footer_info p {
        margin-top: 2px;
        margin-bottom: 2px;
    }

.vcenter {
    vertical-align: middle;
}


.iconitem {
    display: block; /* Since IE7 doesn't support Inline-block. We will use block and use float to force it to the same line.*/
    float: left;
    width: 24px;
    height: 24px;
    border: none;
    background: none; /* reset the background */
    text-indent: -9999px; /* make sure the text is truly hidden */
    /*cursor:pointer;*/
}

    .iconitem.winner {
        background: url('../Images/prize_winner.png') no-repeat 0 0;
    }

.winnermarker {
    float: right;
    background: url('../Images/prize_winner.png') no-repeat right center;
    display: block;
}

.statstable {
    border-style: none;
    font-size: 9.5pt;
}
/*.statstable tr { padding:2px; vertical-align:middle;  background-color:Aqua; }*/
.statustable tr {
    height: 20px;
}

.statstable td {
    height: 20px;
    width: 70px; /*padding:0px;*/
}

.statstable .headerrow {
    font-weight: bold;
}

.statstable .datafigures {
    vertical-align: middle;
    font-size: 14px;
}

.statstable .datamarker {
    vertical-align: middle;
    width: 24px;
    height: 24px;
    padding: 0px;
}

.statstable .datatype {
    width: 5px;
    vertical-align: middle;
    font-size: 14px;
}

/* --------------- Table Properties --------------- */
/* -- AC Has it's own version of default table in the theme -- */
/* Default Table */
.defaultTable {
    width: 100%;
    border-style: none;
    font-size: 9.5pt;
}

    /* Change the table header properties */
    .defaultTable th {
        background: #A8003E;
        color: #fff;
    }
        /* White on BC Red */
        .defaultTable th a {
            color: #fff;
        }

            .defaultTable th a:hover {
                text-decoration: underline;
            }

            .defaultTable th a:visited {
                color: #fff;
            }

    .defaultTable td {
        padding: 2px;
        vertical-align: middle;
    }

    /* You need to declare this in the <TR class> tag to use this */
    .defaultTable .alternatingRow {
        background: #e6e6e6;
    }

    /* When the user hovers over a row in the table, change to these properties... */
    .defaultTable tr:hover {
        background: #CCCCCC;
    }

    .defaultTable a {
        color: #5D1A6B;
    }

        .defaultTable a:hover {
            text-decoration: underline;
        }

.defaultSubTable th {
    background: #CCCCCC;
    color: #000000;
    border-bottom-style: solid;
    border-bottom-width: thin;
    border-bottom-color: #808080;
}
    /* White on BC Red */
    .defaultSubTable th a {
        color: #fff;
    }

        .defaultSubTable th a:hover {
            text-decoration: underline;
        }

        .defaultSubTable th a:visited {
            color: #fff;
        }



tr.bottomBorder td {
    border-bottom: 1px,;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #C0C0C0;
    /*background-color: #FF00FF;*/
}

.heading {
    font-size: 12pt;
    color: #FFFFFF;
    background-color: #A8003E;
    height: 25px;
    box-shadow: 2px 2px 1px #888888;
}

/* Milestone Table */
.milestoneTable {
    width: 100%;
    border: none;
}

    .milestoneTable th {
        background: #A8003E;
        color: #fff;
        text-align: left;
        padding: 5px;
    }

    .milestoneTable tr {
        border: none;
        background: #e6e6e6;
        border-spacing: 5px;
    }

        .milestoneTable tr:hover {
            background-color: #CCCCCC;
        }

    .milestoneTable .whiteOut {
        background: #fff;
        color: #333333;
    }


/* GridView */
.gridTable td {
    font-size: 9px;
}

.gridTable tr:hover {
    background-color: #E6E6E6;
}

.gridTable th {
    background: #A8003E;
}

.gridTableButton {
    cursor: pointer;
    background: none;
    color: #fff;
}

.searchResultsAlternatingRows {
    background-color: #e6e6e6;
}

.searchResultsRows {
    background-color: #fff;
}
/*.searchResultsHeaderRow {} vs2017 */
/*.searchResultsHeaderRow th {} vs2017 */

.pagerControl {
    background: #fff;
    color: #A8003E;
    font-size: 12pt;
}

    .pagerControl table td, .pagerControl table tr, .pagerControl table tr:hover {
        font-size: 12pt;
        background: #fff;
    }
/* This is required to solve early IE issues. */

.pagerControlCurrentPage {
    /*font-weight: bold;*/
    background: #fff;
    color: black;
    font-size: 12pt;
}

/* Table Sort Direction icons */
th.sortasc {
    display: block;
    padding: 0 4px 0 15px;
    background: url('../Images/asc.png') no-repeat;
}

th.sortdesc {
    display: block;
    padding: 0 4px 0 15px;
    background: url('../Images/desc.png') no-repeat;
}

th, td {
    margin: 0px;
    padding: 2px;
    border: 0px;
    outline: none;
}

/* --------------- Form Properties --------------- */
input[type="text"], input[type="date"], input[type="datetime"], input[type="email"],
input[type="number"], input[type="search"], input[type="time"], input[type="url"],
input[type="password"], textarea, select {
    font-family: inherit; /* Make sure all the controls use the same font. i.e. Text Area is usually Courier New. */
    display: block;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    padding: 1px;
    border: 1px solid #CCCCCC;
}

input[type="submit"] {
    border: none;
}

input {
    margin: 0px;
    padding: 2px;
}

.whitebox .txt-input, .whitebox .dropdown-input {
    margin-top: -2px;
}

.info-input {
    margin: 0px 0px 0px 4px;
    padding: 0px;
    vertical-align: middle;
}

.info-img {
    margin: 0px 0px 0px 4px;
    padding: 0px;
    vertical-align: middle;
}

fieldset {
    border: 1px solid #CCCCCC;
}

/* For use with textboxes and listboxes */
.txt-input, .list-input {
    width: 100%;
    font: inherit;
    border: 1px solid #CCCCCC;
}

/* For use with form buttons */
.btn-input {
    font: inherit;
}

/* Dropdown lists */
.dropdown-input {
    font: inherit;
}

/* Checkboxes */
.checkbox-input label {
    display: inline-block;
    margin: 0 5px 0 5px;
    padding: 0;
}

.checkbox-input input {
    line-height: 100%;
    vertical-align: text-bottom;
}


.checkbox-input2 input[type=checkbox] {
    margin-top: 4px;
    /*line-height: 100%;
    vertical-align: text-bottom;*/
}

.checkbox-input3 
{ display: inline-block; 


}

.checkbox-input3 label {
    display: inline-block;
    margin: 0px 0px 0 5px;
    padding: 0;
}

table.checkbox-input {
    margin: 0;
    padding: 0;
    border-spacing: 0;
}
/* Browser alignment Fix for ASP checkbox button lists */
.checkbox-input td {
    margin: 0;
    padding: 0;
    border-spacing: 0;
}
/* Browser alignment Fix for ASP checkbox button lists */
.checkbox-table-input {
    margin: 2px 0 0 0;
}
/* Radio Buttons */
.rad-input label {
    display: inline-block;
    vertical-align: middle;
    margin: 0 8px 0 4px; /* was 0 12px 0 4px. */
    padding: 0;
}

.rad-input input {
    vertical-align: middle;
    margin: 0;
    padding: 0;
}

table.rad-input {
    margin: 0;
    padding: 0;
    border-spacing: 0;
}
/* Browser alignment Fix for ASP radio button lists */
.rad-input td {
    margin: 0;
    padding: 0;
    border-spacing: 0;
}
/* Browser alignment Fix for ASP radio button lists */


/* Radio Button fix for Referral Fee on Quotestep2. A one-off fix to get radio buttons in one BIG line. */
.rad-shoehorn label {
    margin: 0 8px 0 4px !important;
    font-size: 9pt;
}




/* Use this for mandatory fields = pink */
.mandatory {
    background: #FDB3AB;
}

/* use this for error labels, such as regex validators */
.errormessage {
    color: Red;
}

/* jQuerty date picker */
.datepicker {
    z-index: 9999 !important;
}

.SimpleButtonTable {
    margin-top: 0px !important;
    padding-top: 0px !important;
    padding: 0px !important;
}

.SimpleDataTableWithButtons {
    margin-bottom: 0px !important;
}


/* Roll-over Menu Button */
#calMenu a {
    border-style: none;
    border-color: inherit;
    border-width: medium;
    padding: 0px 10px;
    /*behavior: url('../Scripts/PIE.htc');        /* Fixes early IE Issues. It is IE specific property, so will cause W3C validation errors */
    display: inline-block;
    height: 28px; /* Fix the height of the button */
    outline: none;
    background-color: #F3F2F1;
    width: 110px;
    color: #000; /* Text colour = White */
    font-size: 12px;
    line-height: 28px; /* Make sure the text is vertically in middle. Must equal height of button! */
    text-align: center; /* Make sure the text is always in the middle */
    text-decoration: none; /* Resets any styling that might be present */
    /* Make sure if this class is used with any input tags, ignore them! */
    /* Make sure if this class is used with any input tags, ignore them! */
    /* If the button stretches, give the text space */
    /* If the button stretches, give the text space */
    margin: 0px !important; /* Reset any margins that might get inherited. */
    border-radius: 2px; /* This will work in early IE provided PIE.htc is used */
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    /* Add drop shadow to button. (Horizontal, Vertical, Blur, Colour) */
    box-shadow: 0px 1px 2px #323232; /* This will work in early IE provided PIE.htc is used */
    -webkit-box-shadow: 0px 1px 2px #323232;
    -moz-box-shadow: 0px 1px 2px #323232;
    cursor: pointer;
}

    /* On mouse-over of button, change these properties... */
    #calMenu a:hover {
        background-color: #fff;
    }


.calButtonAccompanyingLabel {
    line-height: 28px; /* Make sure the text is vertically in middle. Must equal height of button! */
    vertical-align: middle; /* Make sure the text is always in the middle */
}


/* Roll-over CAL Button */
.calButton {
    border-style: none;
    border-color: inherit;
    border-width: medium;
    padding: 0px 10px;
    /*behavior: url('../Scripts/PIE.htc');        /* Fixes early IE Issues. It is IE specific property, so will cause W3C validation errors */
    display: inline-block;
    min-width: 100px; /* Let the button stretch with text, but give it a minimum size */
    /* Fix the height of the button */
    outline: none;
    background-color: #A8003E; /* Button colour = Red */
    color: #fff; /* Text colour = White */
    font-size: 14px;
    line-height: 28px; /* Make sure the text is vertically in middle. Must equal height of button! */
    text-align: center; /* Make sure the text is always in the middle */
    text-decoration: none; /* Resets any styling that might be present */
    /* Make sure if this class is used with any input tags, ignore them! */
    /* Make sure if this class is used with any input tags, ignore them! */
    /* If the button stretches, give the text space */
    /* If the button stretches, give the text space */
    margin: 0px !important; /* Reset any margins that might get inherited. */
    border-radius: 7px; /* This will work in early IE provided PIE.htc is used */
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    /* Add drop shadow to button. (Horizontal, Vertical, Blur, Colour) */
    box-shadow: 0px 2px 3px #323232; /* This will work in early IE provided PIE.htc is used */
    -webkit-box-shadow: 0px 2px 3px #323232;
    -moz-box-shadow: 0px 2px 3px #323232;
    cursor: pointer;
}

    /* On mouse-over of button, change these properties... */
    .calButton:hover {
        background-color: #CC004B; /* Lighter Red */
        text-decoration: none;
    }

.calButtonMini {
    min-width: 70px;
    line-height: 22px;
}
/* Paging Buttons for things such as repeaters, listviews, etc */
.calPageButton {
    width: 30px;
    height: 28px;
    border: none;
    background: none;
    color: #A8003E;
    font-size: 12px;
    line-height: 28px;
    vertical-align: middle;
    cursor: pointer;
}

    .calPageButton:hover {
        color: #000;
    }


/* ---------------- Speech bubble buttons ---------------- */
.bubbleButton /* This creates the foundation for the button. Then by adding the colour class, changes the colour of the button */ {
    margin: 2px;
    text-transform: uppercase;
    line-height: 63px;
    color: #fff;
    text-align: center;
    display: inline-block;
    height: 64px;
    width: 173px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.bubbleButtonSmallFont /* This creates the foundation for the button. Then by adding the colour class, changes the colour of the button */ {
    font-size: 10px !important;
}

a.bubbleButton:hover {
    text-decoration: none;
}

.bubbleButton.red {
    background: url('../Images/Buttons/buttonred2.jpg') no-repeat 0 0px;
}

    .bubbleButton.red:hover {
        background: url('../Images/Buttons/buttonred2.jpg') no-repeat 0 -70px;
    }

.bubbleButton.pink {
    background: url('../Images/Buttons/buttonpink2.jpg') no-repeat 0 0px;
}

    .bubbleButton.pink:hover {
        background: url('../Images/Buttons/buttonpink2.jpg') no-repeat 0 -70px;
    }


.bubbleButton.purple {
    background: url('../Images/Buttons/buttonpurple2.jpg') no-repeat 0 0px;
}

    .bubbleButton.purple:hover {
        background: url('../Images/Buttons/buttonpurple2.jpg') no-repeat 0 -70px;
    }

.bubbleButton.blue {
    background: url('../Images/Buttons/buttonblue2.jpg') no-repeat 0 0px;
}

    .bubbleButton.blue:hover {
        background: url('../Images/Buttons/buttonblue2.jpg') no-repeat 0 -70px;
    }

.bubbleButton.orange {
    background: url('../Images/Buttons/buttonorange2.jpg') no-repeat 0 0px;
}

    .bubbleButton.orange:hover {
        background: url('../Images/Buttons/buttonorange2.jpg') no-repeat 0 -70px;
    }

.bubbleButton.green {
    background: url('../Images/Buttons/buttongreen2.jpg') no-repeat 0 0px;
}

    .bubbleButton.green:hover {
        background: url('../Images/Buttons/buttongreen2.jpg') no-repeat 0 -70px;
    }

.bubbleButton.silver {
    background: url('../Images/Buttons/buttonsilver2.jpg') no-repeat 0 0px;
}

    .bubbleButton.silver:hover {
        background: url('../Images/Buttons/buttonsilver2.jpg') no-repeat 0 -70px;
    }

.bubbleButton.darkblue {
    background: url('../Images/Buttons/buttondarkblue2.jpg') no-repeat 0 0px;
}

    .bubbleButton.darkblue:hover {
        background: url('../Images/Buttons/buttondarkblue2.jpg') no-repeat 0 -70px;
    }


.bubbleButtonTall {
    line-height: 63px;
    height: 110px;
}

.bubbleDescription {
    display: inline-block;
    color: #CC8F43;
    line-height: normal;
    margin-top: 2px;
    padding: 5px;
    border: 2px solid #CC8F43;
    width: 159px;
    height: auto;
    background: #fff;
    text-align: center;
    font-size: 12px;
    font-weight: normal;
    text-transform: none;
}

.bubbleDescriptionPurple {
    display: inline-block;
    color: #682785;
    line-height: normal;
    margin-top: 2px;
    padding: 5px;
    border: 2px solid #682785;
    width: 159px;
    height: auto;
    background: #fff;
    text-align: center;
    font-size: 12px;
    font-weight: normal;
    text-transform: none;
}

.bubbleSubtext {
    display: block;
    font-size: 0.9em; /*0.8 if bubbleButton at 14px*/
    line-height: 0.9em;
    margin-top: -23px;
    font-weight: normal;
    text-transform: none;
}

/* ---------------- Icon Buttons ---------------- */
.iconbutton {
    display: block; /* Since IE7 doesn't support Inline-block. We will use block and use float to force it to the same line.*/
    float: left;
    width: 24px;
    height: 24px;
    border: none;
    background: none; /* reset the background */
    text-indent: -9999px; /* make sure the text is truly hidden */
    cursor: pointer;
}

    .iconbutton.accept {
        background: url('../Images/accept.png') no-repeat 0 0;
    }
    .iconbutton.unlock {
        background: url('../Images/unlock.png') no-repeat 0 0;
    }

    .iconbutton.acceptuser {
        background: url('../Images/accept_user.png') no-repeat 0 0;
    }

    .iconbutton.add {
        background: url('../Images/add.png') no-repeat 0 0;
    }

    .iconbutton.cancel {
        background: url('../Images/cancel.png') no-repeat 0 0;
    }

    .iconbutton.copypaste {
        background: url('../Images/copy_paste.png') no-repeat 0 0;
    }

    .iconbutton.delete {
        background: url('../Images/delete.png') no-repeat 0 0;
    }

    .iconbutton.deleteuser {
        background: url('../Images/delete_user.png') no-repeat 0 0;
    }

    .iconbutton.edit {
        background: url('../Images/edit.png') no-repeat 0 0;
    }

    .iconbutton.greenarrowleft {
        background: url('../Images/green_arrow_left.png') no-repeat 0 0;
    }

    .iconbutton.greenarrowright {
        background: url('../Images/green_arrow_right.png') no-repeat 0 0;
    }

    .iconbutton.idcard {
        background: url('../Images/id_card.png') no-repeat 0 0;
    }

    .iconbutton.webquotes {
        background: url('../Images/text_page.png') no-repeat 0 0;
    }

    .iconbutton.mailsend {
        background: url('../Images/mail_send.png') no-repeat 0 0;
    }

    .iconbutton.refresh {
        background: url('../Images/refresh.png') no-repeat 0 0;
    }

    .iconbutton.save {
        background: url('../Images/save.png') no-repeat 0 0;
    }

    .iconbutton.searchdatabase {
        background: url('../Images/search_database.png') no-repeat 0 0;
    }

    .iconbutton.zoomin {
        background: url('../Images/zoom_in.png') no-repeat 0 0;
    }

    .iconbutton.zoomout {
        background: url('../Images/zoom_out.png') no-repeat 0 0;
    }

    .iconbutton.poundsign {
        background: url('../Images/pound_sign.png') no-repeat 0 0;
    }

    .iconbutton.new {
        background: url('../Images/new.png') no-repeat 0 0;
    }

    .iconbutton.remove {
        background: url('../Images/delete_user.png') no-repeat 0 0;
    }

    .iconbutton.winner {
        background: url('../Images/prize_winner.png') no-repeat 0 0;
    }

    .iconbutton.centerfix {
        float: none !important;
        margin: auto;
    }

.desc-text {
    font-size: 11px;
}

.summary {
    border: solid 3px #CC004B;
    font-size: 14px;
    color: #88001E;
    padding: 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

    .summary ul li {
        font-size: 12px;
        color: Red;
        padding: 5px !important;
    }

.nopadding {
    padding: 0px;
}

.cb-spacing label {
    margin-left: 10px;
}

.full-w {
    width: 100%;
}

.label-inline {
    display: inline-block;
    /*float: left; vs2017 */
}

.ui-dialog.ui-dialog-announcement {
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.0em;
}

#contactasddialog .ui-widget-header {
    background-color: Blue;
}

.ui-dialog-announcement .ui-widget-header {
    background: #A8003E;
    color: white;
    font-size: 1.2em;
}

.wqbackground {
    background: url('../Images/globe_bg.png') no-repeat;
    background-position: center;
    width: 24px;
    height: 24px;
    margin: auto;
    text-align: center;
}

.infoTable {
    border-collapse: collapse;
    
}

    .infoTable td {
        vertical-align: top;
        text-align: justify;
        padding: 5px;
        border: 1px solid #ccc;
    }

.statsTable {
    border-collapse: collapse;
}

    .statsTable td {
        vertical-align: top;
        text-align: center;
        padding: 5px;
        border: 1px solid #ccc;
        /*cellspacing: "0"; 
        cellpadding: "1";*/
    }

.strong {
    font-weight: bold;
}

.feelabel {
    vertical-align: top;
    /*font-weight: bold;*/
}

.buttonLabel {
    vertical-align: middle;
    /*background-color: gray;*/
}

.introlhfeeactive {
    width: 10%;
}

.introlhfeehidden {
    width: 0%;
}

.statsHeaderBox {
    text-align: center;
    width: 170px;
    border: 1px solid black;
    display: inline-block;
    font-size: medium;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.statsBox {
    text-align: center;
    /*width: 173px;*/
    border: 1px solid black;
    display: inline-block;
    font-size: x-large;
    margin-top: 0px;
    margin-bottom: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
}