/***********************************************/
/* Default.css                                 */
/* Set as the StyleSheetTheme in web.config.   */
/* Loaded for all clients and overridden by    */
/* SuperClient specific CSS in their Theme.    */
/***********************************************/

/***********************************************/
/* HTML tag styles                             */
/***********************************************/

/*margins set to 0 in order to eliminate default margins in IE, Firefox, Mozilla and Netscape*/
/*padding set to "0" in order to eliminate default padding in Opera*/

/***********************************************/
/* HTML tag styles                             */
/***********************************************/

html {
    font-size: 100.01%;
    height: 100%;
}

/* If the client wants to use the background gradient image, set it in #outercontainer so that it centers propertly. */
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    background-color: #f2f4fa;
    color: #333333;
    margin: 0;
    padding: 0;
    border: none;
    height: 100%;
}

a:link {
    color: #336699;
    text-decoration: none;
    padding: 0;
    border: none;
    margin: 0;
}

a:visited {
    color: #660099;
    text-decoration: none;
    padding: 0;
    margin: 0;
    border: none;
}

a:hover {
    color: #6699FF;
    text-decoration: underline;
    padding: 0;
    margin: 0;
    border: none;
}

p {
    color: #333333;
    padding: 0 0 5px 4px;
    margin: 0;
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    line-height: 1.3em;
}

/* Heading Levels 
---------------------------------------------------------------------------------------------------------------------------*/
h1 {
    font: bold 1.1em arial, Helvetica, sans-serif;
    text-transform: none;
    text-align: left;
    color: #003366;
    margin: 0;
    border: none;
    padding: 10px 0 5px 4px;
}

h2 {
    text-transform: none;
    text-align: left;
    color: #336699;
    padding: 5px 0 3px 4px;
    margin: 0 0 5px 0;
    border: none;
    font-family: arial, sans-serif;
    font-size: 1em;
    font-weight: bold;
}

h3 {
    text-transform: none;
    text-align: left;
    color: #1A1A1A;
    font-family: arial, sans-serif;
    font-size: 0.9em;
    font-weight: bold;
    margin: 0;
    padding: 5px 0 3px 4px;
    border: none;
}

h4 {
    margin: 0;
    padding: 5px 0 3px 4px;
    font: normal .8em arial, sans-serif;
    text-transform: none;
    text-align: left;
    color: #003366;
}

/* Header and Page Containers - organizers of content
---------------------------------------------------------------------------------------------------------------------------*/
/* outercontainer is used in place of the body to center the background image on the page, 
	 then the #container is centered within this.  This method is used to avoid the 1 pixel alignment "jog"
	 that is caused by the non-standard ways that browsers round the width while centering.
	 Remove the 3 background-* styles if you are not using the background image. */
#outercontainer {
    min-height: 100%;
    width: 1040px;
    background-image: url(../../Images/gradient.jpg);
    background-repeat: repeat-y;
    background-position: center top;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}

#container {
    width: 1004px;
    left: 0px;
    top: 0px;
    background-color: #FFFFFF;
    position: relative;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding: 0;
    border: none;
}

/*  Add background-image if the client has a background image for their banner.
		The background-color may also be set to match the client's banner.  */
.header {
    margin: 0;
    padding: 0;
    height: 100px;
    width: 1004px;
    z-index: 1;
    color: #333333;
    background-color: #FFFFFF;
    /*background-image: url(Images/bannerImage.jpg);
	background-repeat: no-repeat; */
    border-bottom-width: 5px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-bottom-color: #336699;
}

/* Adjust left/top according to client's logo */
.headerLogo {
    left: 50px;
    top: 3px;
    position: absolute;
}

.headerWelcome {
    font-size: 0.7em;
    color: #003366;
    text-align: right;
    margin-top: 0px;
    margin-left: 5px;
}

.headerUserName {
    font-size: 0.7em;
    color: #003366;
    text-align: left;
    font-weight: bold;
    margin-top: 15px;
    margin-left: 5px;
}

.headerUserID {
    font-size: 1.1em;
    color: #333333;
    text-align: left;
    left: 210px;
    top: 20px;
    position: absolute;
    width: 500px;
    height: 20px;
    padding: 0px;
}

/*  adjust top/left depending on banner 
		change color as needed */
.headerTitle {
    font-size: 1.1em;
    color: #333333;
    text-align: left;
    left: 210px;
    top: 20px;
    position: absolute;
    width: 500px;
    height: 20px;
    padding: 0px;
}

/*  adjust top/left depending on banner 
		change color as needed */
.headerSubTitle {
    font-size: 1.5em;
    color: #333333;
    text-align: left;
    left: 210px;
    top: 45px;
    position: absolute;
    width: 500px;
    height: 20px;
    padding: 0px;
    font-weight: bold;
}

.headerLink {
    font-size: 0.8em;
    text-align: right;
    float: right;
    padding-top: 75px;
    padding-right: 10px;
    text-decoration: none;
}

    /*  headerLink link and visited colors should be the same.  Hover should be different. */
    .headerLink a:link {
        color: #336699;
        text-decoration: none;
        font-size: 0.9em;
        padding: 2px 0 2px 3px;
    }

    .headerLink a:visited {
        color: #336699;
        text-decoration: underline;
        font-size: 0.9em;
        padding: 2px 0 2px 3px;
    }

    .headerLink a:hover {
        color: #6699FF;
        text-decoration: underline;
        font-size: 0.9em;
        padding: 2px 0 2px 3px;
    }

.headerLogout {
    font-size: 0.8em;
    text-align: right;
    float: right;
    left: 945px;
    top: 15px;
    position: absolute;
    width: 45px;
    height: 20px;
}

.column20 {
    background-color: #FFFFFF;
    width: 204px;
    position: static;
    left: 0px;
    float: left;
    margin: 0;
    padding: 0;
    border: none;
}

.column80 {
    width: 797px;
    position: static;
    left: 0px;
    float: left;
    margin: 0;
    padding: 0;
    border: none;
    background-color: #FFFFFF;
}

.column80top {
    width: 98%;
    position: static;
    left: 0px;
    float: left;
    margin: 0 0 10px 0;
    padding: 0px;
    background-color: #FFFFFF;
    border-bottom: 2px solid #336699;
    border-top: 2px solid #336699;
    border-right-style: none;
    border-left-style: none;
    width: 797px;
}

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

.column80TopRight {
    float: right;
    width: 80%;
}

.data20Left {
    background-color: #FFFFFF;
    width: 199px;
    position: static;
    overflow: auto;
    clear: right;
    border: none;
    padding-top: 3px;
    padding-right: 0;
    padding-bottom: 5px;
    margin-top: 0;
    margin-right: 0px;
    margin-bottom: 0;
    margin-left: 5px;
}

.data20Right {
    background-color: #FFFFFF;
    width: 190px;
    position: static;
    float: right;
    padding: 3px 2px 5px 0;
    margin: 0;
}


.data30Left {
    background-color: #e5e8f5;
    width: 280px;
    position: static;
    clear: right;
    float: left;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 10px;
    padding-left: 5px;
    margin-top: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-left: 0px;
}

.data30Right {
    background-color: #FFFFFF;
    width: 260px;
    position: static;
    float: right;
    padding-top: 5px;
    padding-right: 0px;
    padding-bottom: 10px;
    padding-left: 5px;
    margin: 5px;
}

.column30percent {
    width: 30%;
}

.data40Left {
    background-color: #FFFFFF;
    width: 380px;
    position: static;
    float: left;
    padding: 3px 2px 5px 0;
    margin: 0;
    border: none;
    clear: both;
}

.data40Right {
    background-color: #FFFFFF;
    width: 380px;
    position: static;
    float: right;
    padding: 3px 5px 5px 2px;
    margin: 0;
    border: none;
}

.data60 {
    background-color: #FFFFFF;
    width: 575px;
    position: static;
    clear: both;
    float: left;
    padding-top: 5px;
    padding-right: 0px;
    padding-bottom: 10px;
    padding-left: 5px;
    border: 1px solid #CCCCCC;
    margin: 5px 5px 10px 5px;
}

.data60noBorder {
    background-color: #FFFFFF;
    width: 575px;
    position: static;
    clear: both;
    float: left;
    padding-top: 5px;
    padding-right: 0px;
    padding-bottom: 10px;
    padding-left: 0px;
    margin-top: 10px;
    margin-right: 5px;
    margin-bottom: 10px;
    margin-left: 5px;
}

.data70 {
    background-color: #FFFFFF;
    width: 780px;
    position: static;
    border: 1px solid #cccccc;
    padding-top: 5px;
    padding-right: 3px;
    padding-bottom: 5px;
    padding-left: 3px;
    margin-top: 5px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}

.data80 {
    background-color: #FFFFFF;
    width: 790px;
    margin: 0px;
    position: static;
    padding: 5px 2px 5px 0;
}

.data100 {
    width: 992px;
    border: none;
    padding: 3px 2px 5px 4px;
    margin: 0;
    float: none;
}

/* Left navigation styles */

.leftNav {
    margin: 10px 0 0 0;
    padding: 0px;
    display: block;
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    color: #003366;
}

    .leftNav ul {
        list-style-type: none;
    }

    .leftNav li {
        color: #333333;
        font-weight: normal;
        line-height: 1.2em;
        text-align: left;
        text-indent: 0px;
        clear: right;
        padding-bottom: 10px;
    }

        .leftNav li a:link {
            color: #003366;
            display: block;
            margin: 0;
            padding: 2px 0 2px 5px;
            vertical-align: middle;
            text-decoration: none;
        }

        .leftNav li a:visited {
            color: #003366;
            display: block;
            margin: 0;
            padding: 2px 0 2px 5px;
            vertical-align: middle;
            text-decoration: none;
        }

        .leftNav li a:hover {
            color: #336699;
            display: block;
            margin: 0;
            padding: 2px 0 2px 5px;
            vertical-align: middle;
            text-decoration: underline;
        }

    .leftNav .on {
        color: #003366;
        background-color: #e8f2fc;
        font-weight: bold;
        vertical-align: middle;
        margin-bottom: 5px;
        padding: 2px 0 2px 0;
    }

/* Top Nav
----------------------------*/

.topNav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 0.8em;
    font-family: Arial, Helvetica, sans-serif;
    color: #003366;
}

    .topNav ul {
        height: 80px;
        width: 100%;
        margin: auto;
    }

    .topNav li {
        float: left;
        padding-top: 10px;
        padding-right: 10px;
    }

        .topNav li a:link {
            color: #003366;
            display: block;
            margin: 0;
            padding: 2px 0 2px 5px;
            vertical-align: middle;
            text-decoration: underline;
        }

        .topNav li a:visited {
            color: #003366;
            display: block;
            margin: 0;
            padding: 2px 0 2px 5px;
            vertical-align: middle;
            text-decoration: underline;
        }

        .topNav li a:hover {
            color: #336699;
            display: block;
            margin: 0;
            padding: 2px 0 2px 5px;
            vertical-align: middle;
            text-decoration: underline;
        }

    .topNav .on {
        color: #003366;
        background-color: #e8f2fc;
        font-weight: bold;
        vertical-align: middle;
        /*margin-bottom: 5px;*/
        /*padding: 2px 0 2px 0;*/
    }

/* Progress Bar
---------------------------------------------------------------------------------------------------------------------------*/

#progress, .progress {
    margin-top: 15px;
    margin-bottom: 25px;
    padding-bottom: 25px;
    clear: both;
    float: none;
}

    #progress li, .progress li {
        list-style-type: none;
        white-space: nowrap;
        float: left;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.8em;
    }

.progressOn {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    color: #FFFFFF;
    padding: 5px;
    margin-right: 3px;
    background-color: #003366;
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: #003366;
    border-top-width: 1px;
    border-right-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    border-top-color: #003366;
    border-right-color: #003366;
    border-left-color: #003366;
}

.progressOff {
    background-color: #FFFFFF;
    font-size: 0.8em;
    padding: 5px;
    margin-right: 3px;
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: #999999;
    border-top-width: 1px;
    border-right-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    border-top-color: #999999;
    border-right-color: #999999;
    border-left-color: #999999;
    font-family: Arial, Helvetica, sans-serif;
    color: #999999;
}

.progressNext {
    background-color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    color: #336699;
    padding: 5px;
    margin-right: 3px;
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: #336699;
    border-top-width: 1px;
    border-right-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    border-top-color: #336699;
    border-right-color: #336699;
    border-left-color: #336699;
}

#progress a, .progress a {
    background-color: #FFFFFF;
    text-align: center;
    display: block;
    height: 31px;
    width: 110px;
    padding-top: 10px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #000099;
    color: #FF3300;
    text-decoration: none;
}

    #progress a:visited, .progress a:visited {
        color: #660099;
        text-decoration: none;
        border-bottom-width: 2px;
        border-bottom-style: solid;
        border-bottom-color: #999999;
    }

    #progress a:hover, #progress a:active, .progress a:hover, .progress a:active {
        color: #4b4b4b;
        text-decoration: none;
        background-color: #FFCC00;
        border-bottom-width: 2px;
        border-bottom-style: solid;
        border-bottom-color: #FF6600;
    }

#progressOn a:link, #progressOn a:hover, #progressOn a:active {
    background-color: #FFCC00;
}

#progressOff a:visited {
    background-color: #333333;
}

/* Tables
---------------------------------------------------------------------------------------------------------------------------*/

table {
    border: none;
    margin-top: 0;
    margin-right: 5px;
    margin-bottom: 10px;
    margin-left: 5px;
    padding-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
    font-family: Arial, Helvetica, sans-serif;
}

th {
    background-color: #336699;
    font-weight: bold;
    color: #FFFFFF;
    text-align: left;
    font-size: 0.8em;
    margin: 0;
    border: 0;
    padding-top: 2px;
    padding-right: 3px;
    padding-bottom: 2px;
    padding-left: 3px;
    text-decoration: none;
}

    th .center {
        text-align: center;
    }

    th a:link {
        color: #FFFFFF;
    }

    th a:visited {
        color: #FFFFFF;
    }

    th a:hover {
        color: #6699FF;
    }

td {
    font-size: 0.8em;
    padding: 2px;
}

.rows_even {
    background-color: #e5e8f5;
    margin: 0;
    border: none;
    padding-top: 2px;
    padding-right: 0;
    padding-bottom: 2px;
    padding-left: 2px;
}

.rows_odd {
    background-color: #FFFFFF;
    margin: 0;
    border: none;
    padding-top: 2px;
    padding-right: 0;
    padding-bottom: 2px;
    padding-left: 2px;
}

.icon {
    margin: 0;
    border: none;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0;
    padding-left: 0px;
    vertical-align: middle;
    text-align: right;
}

.iconCentered {
    text-align: center;
    vertical-align: middle;
    padding-top: 10px;
    padding-right: 5px;
    padding-bottom: 10px;
    padding-left: 5px;
    margin-right: 40px;
}

img {
    border: none;
    margin: 0;
    padding: 0;
}

/* Alignment for tables only. Use .iconCentered to position icons within tables to avoid extra border. */

.center {
    text-align: center;
    padding-right: 3px;
    margin: 0;
    border-right: 1px solid #b2bbe3;
}

.right {
    text-align: right;
    padding-right: 3px;
    margin: 0;
    border-right: 1px solid #b2bbe3;
}

/* Forms organization and styling + message bars (for errors and confirmations)
---------------------------------------------------------------------------------------------------------------------------*/

.feeMessage {
    /* cascade as needed */
}

.message {
    background-color: #FFFFCC;
    width: 98%;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 5px;
    margin-left: 0;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    background-image: url(../../Images/messages.gif);
    background-position: bottom;
    background-repeat: repeat-x;
    border-top-width: 2px;
    border-top-color: #990000;
    padding: 5px;
    outline: none;
}

    .message ul {
        list-style-type: disc;
        padding-left: 5px;
        margin-left: 50px;
    }

    .message li {
        color: #333333;
        font-weight: normal;
        line-height: 1.5em;
        text-align: left;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.8em;
    }

    .message .icon {
        width: 25px;
        float: left;
        clear: right;
        color: #000000;
        text-align: center;
        vertical-align: sub;
        margin-right: 20px;
        margin-top: 14px;
    }

    .message .boldTxt {
        font-weight: bold;
        color: #000000;
    }

.confirmation {
    background-color: #FFFFCC;
    width: 98%;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 5px;
    margin-left: 0;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    background-image: url(../../Images/messages.gif);
    background-position: bottom;
    background-repeat: repeat-x;
    border-top-width: 2px;
    border-top-color: #009933;
    padding: 5px;
}

    .confirmation ul {
        list-style-type: none;
        padding-left: 5px;
        margin-left: 50px;
    }

    .confirmation li {
        color: #333333;
        font-weight: normal;
        line-height: 1.5em;
        text-align: left;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1em;
    }

    .confirmation .icon {
        width: 25px;
        float: left;
        clear: right;
        text-align: center;
        vertical-align: sub;
        margin-right: 20px;
        margin-top: 14px;
    }

    .confirmation .boldTxt {
        font-weight: bold;
        color: #000000;
    }

.info {
    background-color: #FFFFCC;
    width: 98%;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 5px;
    margin-left: 0;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    background-image: url(../../Images/messages.gif);
    background-position: bottom;
    background-repeat: repeat-x;
    border-top-width: 2px;
    border-top-color: #336699;
    padding: 5px;
}

    .info ul {
        list-style-type: none;
        padding-left: 5px;
        margin-left: 50px;
    }

    .info li {
        color: #000000;
        font-weight: normal;
        line-height: 1.5em;
        text-align: left;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.8em;
    }

    .info .icon {
        width: 25px;
        float: left;
        clear: right;
        text-align: center;
        vertical-align: sub;
        margin-right: 20px;
        margin-top: 14px;
    }


.warning {
    background-color: #FFFFCC;
    width: 98%;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 5px;
    margin-left: 0;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    background-image: url(../../Images/messages.gif);
    background-position: bottom;
    background-repeat: repeat-x;
    border-top-width: 2px;
    border-top-color: #336699;
    padding: 5px;
    margin-top: 5px;
}

    .warning .icon {
        width: 25px;
        float: left;
        clear: right;
        text-align: center;
        vertical-align: sub;
        margin-right: 20px;
        margin-top: 14px;
    }

    .warning .button_main {
        margin-bottom: 10px;
        margin-left: 54px;
    }

.info .boldTxt {
    font-weight: bold;
    color: #000000;
}

.tableForm {
    border: 1px solid #CCCCCC;
    vertical-align: middle;
    width: 98%;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 5px;
    margin-left: 0px;
    background-color: #FFFFFF;
    padding: 3px;
}

    .tableForm th {
        border: none;
        vertical-align: middle;
    }

    .tableForm tr {
        border: none;
        padding-top: 0;
        padding-right: 3px;
        padding-left: 3px;
        margin-top: 0;
        margin-right: 0;
    }

    .tableForm td {
        margin: 0;
        border: none;
        padding-top: 5px;
        padding-right: 0;
        padding-bottom: 5px;
        padding-left: 3px;
    }

.headerRow, .headerRow td {
    height: 0px;
    margin: 0px;
    padding: 0px;
}

.tableForm .boldTxt {
    font-weight: bold;
    color: #333333;
}

.formHeader {
}

.tableForm td.boldRedBorder {
    border: 2px solid red;
}

.tableForm .labels {
    font-size: 0.8em;
    font-weight: normal;
    color: #333333;
    padding-left: 5px;
}

.tableForm .subLabels {
    font-size: 0.9em;
    font-weight: normal;
}

.tableForm .verticalAlign {
    font-weight: normal;
    vertical-align: text-top;
}

.tableForm .creditcards {
    vertical-align: middle;
    padding: 3px;
}

.tableForm .tableWidth {
    width: 98%;
    margin: 0px;
}

.tableForm .tableMax {
    width: 100%;
    margin: 0px;
    padding: 0px;
}

form {
    padding: 0;
    margin: 0;
    border: none;
}

.required {
    text-align: center;
    border: none;
    font-size: 1.2em;
    font-weight: bold;
    color: #990000;
}

/*label {
	color: #333333;
	padding: 0 0 0 2px;
	margin: 0;
	border: none;
}*/

label {
    font-weight: normal;
    color: #333333;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
}

.boldTxt {
    font-weight: bold;
    color: #333333;
}

/* align save profile checkbox with debit checkbox */
.saveProfileCheckBox label {
    padding-left: 10px;
}

/* align text that wraps next to a checkbox 
.alignWrap input {
	float:left;
	display:block;
}

.alignWrap label {
	float:left;
	display:block;
	width:740px;
	margin-left:1px;
}*/

.scheduleDateColumn1 {
    width: 20%;
}

.scheduleDateColumn2 {
    width: 80%;
    font-size: 0.71em;
}

.paymentConfColumn1 {
    width: 30%;
}

.paymentAmountConfColumn1 {
    width: 15%;
}

.paymentAmountConfColumn2 {
    width: 85%;
    font-size: 0.71em;
}

.column05percent {
    width: 5%;
}

.column15percent {
    width: 15%;
}

.column20percent {
    width: 20%;
}

.column25percent {
    width: 25%;
}

.column35percent {
    width: 35%;
}

.column30percent {
    width: 30%;
    border: none;
}

.column40percent {
    width: 40%;
}

.column45percent {
    width: 45%;
}

.column50percent {
    width: 50%;
}

.column60percent {
    width: 60%;
}

.column65percent {
    width: 65%;
}

.column70percent {
    width: 70%;
}

.column80percent {
    width: 80%;
}

.column100percent {
    width: 100%;
}

/* Alignment for forms only - positions icons creates no border*/

.center_form {
    text-align: center;
    padding: 0 2px 0 2px;
    margin: 0;
    border: none;
}

.right_form {
    text-align: right;
    padding: 0 2px 0 2px;
    margin: 0;
    border: none;
}

/* Horizontal rule to use on any page to help visually separate groups of information */

.separator {
    clear: both;
    border-top: 1px solid #336699;
    border-right: none;
    border-bottom: none;
    border-left: none;
    width: 98%;
    margin-top: 5px;
}

/* Buttons */

.buttonPosition {
    text-align: right;
    clear: both;
    width: 100%;
}

.buttonPositionLeft {
    text-align: left;
    clear: both;
    width: 100%;
}

.buttonPositionCenter {
    text-align: center;
    clear: both;
    width: 100%;
}

.buttonPositionBottomCenter {
    text-align: center;
    clear: both;
    width: 100%;
    position: absolute;
    bottom: 10px;
    left: 0px;
}

.button_main {
    color: #FFFFFF;
    background-color: #003366;
    border: 1px solid #515151;
    padding: 4px;
    clear: both;
    margin-top: 4px;
    margin-right: 2px;
    margin-bottom: 4px;
    margin-left: 0;
    cursor: hand;
    cursor: pointer;
}

.button_secondary {
    color: #FFFFFF;
    background-color: #336699;
    border: 1px solid #515151;
    padding: 4px;
    clear: both;
    margin-top: 4px;
    margin-right: 2px;
    margin-bottom: 4px;
    margin-left: 0;
    cursor: hand;
    cursor: pointer;
}

.button_tertiary {
    color: #FFFFFF;
    background-color: #666666;
    border: 1px solid #515151;
    padding: 4px;
    clear: both;
    margin-top: 4px;
    margin-right: 2px;
    margin-bottom: 4px;
    margin-left: 0;
    cursor: hand;
    cursor: pointer;
}

    .button_main[disabled], .button_secondary[disabled], .button_tertiary[disabled] {
        color: #666666;
        background-color: #CCCCCC;
        border: 1px solid #999999;
        padding: 4px;
        clear: both;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        margin-top: 4px;
        margin-right: 2px;
        margin-bottom: 4px;
        margin-left: 0;
    }

.button_noClick {
    color: #666666;
    background-color: #CCCCCC;
    border: 1px solid #999999;
    padding: 4px;
    clear: both;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    margin-top: 4px;
    margin-right: 2px;
    margin-bottom: 4px;
    margin-left: 0;
}

.button_optional {
    display: none;
}
/* Terms and Conditions Panel
---------------------------------------------------------------------------------------------------------------------------*/

.collapsePanelHeader {
    width: 98%;
    height: 20px;
    color: #FFFFFF;
    background-color: #336699;
    font-weight: bold;
    float: none;
    padding: 5px;
    cursor: pointer;
    vertical-align: middle;
    font-size: .9em;
}

    .collapsePanelHeader label {
        color: #FFFFFF
    }

    .collapsePanelHeader a:link {
        vertical-align: middle;
        font-size: 0.9em;
        color: #FFFFFF;
        text-decoration: none;
    }

    .collapsePanelHeader a:visited {
        vertical-align: middle;
        font-size: 0.9em;
        color: #FFFFFF;
        text-decoration: none;
    }

    .collapsePanelHeader a:hover {
        vertical-align: middle;
        font-size: 0.9em;
        color: #FFFFFF;
        text-decoration: underline;
    }


.collapsePanel {
    width: 640px;
    height: 0px;
    background-color: white;
    overflow: hidden;
}

.collapsePanelTermAndCondition {
    width: 98%;
    height: 0px;
    background-color: white;
}

.LabelTermAndCondition {
    font-weight: normal;
    color: #333333;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
}


/* "hidden link" styles
---------------------------------------------------------------------------------------------------------------------------*/

.textLink a {
    outline: none;
}

    .textLink a:link {
        color: #333333;
        text-decoration: none;
        margin: 0;
        border: none;
        cursor: default;
    }

    .textLink a:visited {
        color: #333333;
        text-decoration: none;
        margin: 0;
        border: none;
        cursor: default;
    }

    .textLink a:hover {
        color: #333333;
        text-decoration: none;
        margin: 0;
        border: none;
    }

/* Pop Ups
---------------------------------------------------------------------------------------------------------------------------*/

.popup {
    border-top-width: 10px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #336699;
    border-right-color: #CCCCCC;
    border-bottom-color: #CCCCCC;
    border-left-color: #CCCCCC;
    font-size: .8em;
    font-weight: normal;
    color: #333333;
    text-decoration: none;
    text-align: left;
    height: 150px;
    width: 400px;
    margin: 5px;
    background-color: #FFFFFF;
}

    .popup p {
        color: #666666;
        text-align: left;
        font-size: 1em;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .popup .icon {
        width: 25px;
        float: left;
        clear: right;
        text-align: center;
        vertical-align: sub;
        margin-right: 20px;
        margin-top: 10px;
        margin-left: 5px;
    }

    .popup .rightCol {
        padding-top: 5px;
        padding-right: 5px;
        padding-bottom: 10px;
        padding-left: 20px;
        margin-left: 30px;
        text-align: left;
        text-indent: 0px;
    }

.modalBackground {
    background-color: Gray;
    filter: alpha(opacity=70);
    opacity: 0.7;
    MozOpacity: 0.0;
}

/* Footer
---------------------------------------------------------------------------------------------------------------------------*/

#footer, .footer {
    clear: both;
    color: #686868;
    text-align: center;
    width: 999px;
    border: none;
    margin: 0px;
    background-color: #FFFFFF;
    font-size: 0.8em;
    padding-top: 30px;
    padding-right: 0;
    padding-bottom: 4px;
    padding-left: 0;
}

.tableForm ul {
    list-style-type: disc;
    margin-left: 5px;
    padding-left: 5px;
}

.tableForm li {
    color: #333333;
    padding: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    line-height: 1em;
}

/* adjustment for nested tables */
tbody tbody td {
    font-size: 1em;
}

tbody tbody tbody td {
    font-size: 1.1em;
}

/* change password
---------------------------------------------------------------------------------------------------------------------------*/
.changePassword {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #333333;
}

/* pagination or paging through multiple screens
---------------------------------------------------------------------------------------------------------------------------*/
.paging table {
    border: none;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    font-family: Arial, Helvetica, sans-serif;
}

.paging td {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    color: #333333;
    padding: 2px 2px 1px 0px;
}

    .paging td a:link {
        color: #336699;
    }

    .paging td a:visited {
        color: #660099;
        text-decoration: underline;
    }

    .paging td a:hover {
        color: #6699FF;
        text-decoration: underline;
    }

.noFocus {
    outline: none;
}

.smallBr {
    font-size: 1px;
    line-height: 5px;
}

/* Spinning Graphic to show update panel progress
---------------------------------------------------------------------------------------------------------------------------*/
#updateProgressClearModalBackground {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background-color: #000;
    filter: alpha(opacity=0);
    opacity: 0.0;
    MozOpacity: 0.0;
    z-index: 1000;
}

#updateProgress {
    position: fixed;
    top: 25%;
    left: 50%;
    z-index: 2000;
}

.UpdateProgressBackground {
    margin: 0px;
    padding: 0px;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    position: fixed;
    z-index: 1000;
    background-color: #EEEEEE;
    filter: alpha(opacity=70);
    opacity: 0.7;
}

/* service mark - see also IE code in the MasterPage
---------------------------------------------------------------------------------------------------------------------------*/
.ieSM {
    display: none;
}


/* search box on Multiple Invoice page
---------------------------------------------------------------------------------------------------------------------------*/
.searchBox {
    margin: 0 0 5px 4px;
    font-size: 0.8em;
}


.tableForm .autoCollapseCell, .tableWidth .autoCollapseCell {
    height: auto;
    padding: 0px;
}

.adjustmentForCollapsableCell {
    display: block;
    margin: 5px 0 3px 5px;
}

/*table td table td, th
{
  font-size:0.9em;
}*/

/*#policydetailsview table td, th
{
  font-size:1em;
}*/
.clientReturnLink {
}

.ArrowUpImage {
    width: 11px;
    height: 13px;
}

.ArrowDownImage {
    height: 14px;
    width: 11px;
}

.ArrowNeutralImage {
    height: 13px;
    width: 12px;
}

.EditImage {
    width: 3px;
    height: 18px;
    margin-right: 3px !important;
}

.DeleteImage {
    height: 18px;
    width: 14px;
    margin-right: 3px !important;
}

.tableForm td .noMargins {
    padding: 0px;
    margin: 0px;
}

.noMargins, .noMargins td, .noMargins tr {
    padding: 0px;
    margin: 0px;
}

/* Fees Calculator Pop Up
---------------------------------------------------------------------------------------------------------------------------*/

.feeCalcPopup {
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #336699;
    border-right-color: #CCCCCC;
    border-bottom-color: #CCCCCC;
    border-left-color: #CCCCCC;
    font-size: .8em;
    font-weight: normal;
    color: #333333;
    text-decoration: none;
    text-align: left;
    height: 150px;
    width: 450px;
    margin: 1px;
    background-color: #FFFFFF;
}

input[type="radio"] {
    vertical-align: text-bottom;
    cursor: pointer;
}

/** Disabled Textbox Style (Converts textbox appearance to a regular literal) **/
input[type="text"][disabled] {
    /*color:inherit;*/
    color: #333333 !important;
    border: 0px none transparent;
    background-color: transparent;
}

#AccountInfoDiv .valueFormat {
    font-weight: bold;
}

.SelectedAccountNameFormat,
.ClientAccountNumberFormat,
.MiscDataFormat,
.CustomerNameFormat,
.BillDescriptionFormat,
.BillAmountFormat,
.BillDueDateFormat {
    font-weight: bold;
}


/*****************************************************
*   Transaction History Page
*****************************************************/
.ScheduleDateColumn, .ScheduleDateHeader {
    width: 16%;
}

.PaymentAmountColumn, .PaymentAmountHeader {
    width: 11%;
}

.TransactionTypeDisplayColumn, .TransactionTypeDisplayHeader {
    width: 12%;
}

.ActionHeader, .ActionColumn {
    width: 17%;
}

.ClientAccountNumberColumn, .ClientAccountNumberHeader {
    display: none;
}

#ScheduledPaymentsDiv .ClientAccountNameColumn, #ScheduledPaymentsDiv .ClientAccountNameHeader {
    width: 19%;
}

.PaymentCardTypeColumn, .PaymentCardTypeHeader,
#ScheduledPaymentsDiv .PaymentAccountNumberColumn, #ScheduledPaymentsDiv .PaymentAccountNumberHeader {
    display: none;
}

#ScheduledPaymentsDiv .PaymentAccountNameAndNumberColumn, #ScheduledPaymentsDiv .PaymentAccountNameAndNumberHeader {
    width: 27%;
}


#ScheduledPaymentsDiv .EditColumn {
    width: 7%;
    padding-left: 0px;
}

#ScheduledPaymentsDiv .DeleteColumn {
    width: 8%;
    padding-left: 0px;
}

    #ScheduledPaymentsDiv .EditColumn div, #ScheduledPaymentsDiv .DeleteColumn div {
        text-align: center;
    }

#PaymentHistoryDiv .ClientAccountNameColumn, #PaymentHistoryDiv .ClientAccountNameHeader {
    width: 20%;
}

#PaymentHistoryDiv .PaymentAccountNumberColumn, #PaymentHistoryDiv .PaymentAccountNumberHeader {
    width: 24%;
}

/*****************************************************
*   SSO Return To Client Page
*****************************************************/
.ssoreturnh2 {
    text-transform: none;
    text-align: center;
    color: #336699;
    padding: 5px 0 3px 4px;
    margin: 0 0 5px 0;
    border: none;
    font-family: arial, sans-serif;
    font-size: 1.2em;
    font-weight: bold;
}

.ssoreturnp {
    text-align: center;
    color: #333333;
    padding: 0 0 5px 4px;
    margin: 0;
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.0em;
    line-height: 1.3em;
}

.ssoreturnd {
    text-align: center;
    color: #333333;
    padding: 0 0 5px 4px;
    margin: 0;
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    line-height: 1.3em;
}

/*****************************************************
*   Find Your Account Link / Panel
*****************************************************/
.FindAccountLink img /** icon **/ {
    border-width: 2px !important;
    border-color: Black;
    border-style: groove;
    width: 30px;
    max-height: 25px;
}

#FindAccountPanel /** container for the hover image **/ {
    z-index: 100;
    position: absolute;
    top: 100px;
    left: 400px;
}

    #FindAccountPanel img /** hover image **/ {
        max-height: 550px;
        border-width: 2px !important;
        border-color: Gray;
        border-style: groove;
    }
/*****************************************************
*   Find Your Account Link / Panel
*****************************************************/
.FindMiscDataLink img /** icon **/ {
    border-width: 2px !important;
    border-color: Black;
    border-style: groove;
    width: 30px;
    max-height: 25px;
}

#FindMiscDataPanel /** container for the hover image **/ {
    z-index: 100;
    position: absolute;
    top: 100px;
    left: 400px;
}

    #FindMiscDataPanel.displayed {
        display: block;
    }

    #FindMiscDataPanel.hidden {
        display: none;
    }

    #FindMiscDataPanel img /** hover image **/ {
        max-height: 550px;
        border-width: 2px !important;
        border-color: Gray;
        border-style: groove;
    }

#FindAccountPanel.displayed {
    display: block;
}

#FindAccountPanel.hidden {
    display: none;
}

.verticalAlignTop,
.verticalAlignTop td,
.verticalAlignTop label,
.verticalAlignTop span {
    vertical-align: top;
}

.TotalFooterStyle {
    border-top-style: solid !important;
    border-top-width: 1px;
    border-top-color: Black;
    text-align: center;
}

.CheckBoxHeaderStyle {
    text-align: center;
}

.PagerStyle {
    background-color: #e0ddd5;
}

    .PagerStyle td {
        text-align: center !important;
    }

#step4ConfirmationDiv .donebutton {
    display: none;
    position: absolute;
}

#step4Div .PrintControls {
    margin: 0px;
    padding: 0px;
    position: absolute;
    left: 750px;
    font-size: 0.9em;
}

.PrintControls img {
    width: 17px;
    height: 17px;
}

/***** Payment Control Rows Start **************/

/** Hides rows that are not editable **/
.RowDisabled {
    display: none;
}

    /** Hides the required field indicator if not editable **/
    .RowDisabled .required {
        display: none;
    }

    /** Bolds the text for disabled rows (i.e. payment amount and schedule date) **/
    .RowDisabled input[type="text"] {
        font-weight: bold;
    }

/** Always display the Payment Row even if not editable **/
.PaymentRow {
    display: table-row;
    *display: block; /* IE 7 Hack */
}

/***** Payment Control Rows End **************/

#PrintFooter, #PrintHeader {
    display: none;
}

.MakePaymentImage {
    width: 16px;
    height: 18px;
    vertical-align: text-top !important;
    margin-right: 3px !important;
}

.eBillAlertImage {
    width: 16px;
    height: 18px;
    vertical-align: text-top !important;
    margin-right: 3px !important;
}

.AutoPayImage {
    width: 16px;
    height: 16px;
    vertical-align: text-top !important;
    margin-right: 3px !important;
}

.NavigationLink:link {
    padding-left: 10px;
    padding-right: 10px;
}

.ImageSpacing {
    margin-left: 5px !important;
}

.CellSeparator {
    border-left: 1px solid #336699;
}

.wrap, .wrap a:link {
    text-wrap: normal;
    white-space: pre-wrap;
}

/****** Payment Cards *******/
.AMX {
    width: 39px;
    height: 25px;
}

.VIS, .VID {
    width: 46px;
    height: 25px;
}

.DCV {
    width: 52px;
    height: 25px;
}

.MST, .MSD {
    width: 45px;
    height: 25px;
}

.CHK, .SAV, .EFT {
    width: 69px;
    height: 25px;
}
/****** End Payment Cards *******/