﻿
/*****************************************************
*   Global Settings
*****************************************************/
html {font-size: 100.01%; height:100%; }
body{ font-family:Arial, Helvetica, sans-serif;margin:0;padding:0;height:100%;}
div { position:relative;}

/********** Backward compatibility for one-off pages (i.e. Privacy and Refund Policy) **********/
#form1 {height:100%;}
#form1 div {position:static;}

/* IE Doesn't play well with disabled textboxes and forces a gray color; setting the readonly attribute to false 
	mimicks the uneditable function of the textbox without the enforced gray color. This however has a downside
	since the browser still submits readonly textboxes vs disabled where the form fully ignores the control.  */
input[type="text"][readonly],
input[type="tel"][readonly],
input[type="number"][readonly],
input[type="email"][readonly]{border:0px none;width:100%;height:auto;padding:0px;font-size:inherit;}

/* hides the spin-button */
input[type=number] {-moz-appearance:textfield;}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none;margin: 0;}

/*****************************************************
*   Color Schemes 
*****************************************************/

/********** Background Color **********/
body {background-color: #f2f4fa;}
#aspnetForm,.rows_odd,.popup,.progressOff,.progressNext,.magnifiedImage  {background-color:#FFFFFF;}
div,tableForm,input[type="text"][readonly],input[type="email"][readonly],input[type="number"][readonly],input[type="tel"][readonly] {background-color:transparent;}
.button_main[disabled], .button_secondary[disabled],.button_tertiary[disabled] {background-color:#CCCCCC;}
.rows_even {background-color: #e5e8f5;}
.PagerStyle{background-color:#e0ddd5;}
.button_main,.progressOn {background-color: #003366;}
.button_secondary,th,.collapsePanelHeader {background-color: #336699;}
.button_tertiary {background-color: #666666;}
.menu a[disabled], .menu a[disabled] li, .menu a[disabled]:hover li {background-color: #e8f2fc;}
.message, .confirmation, .info, .warning {background-color: #FFFFCC;}
.modalBackground {background-color: Gray;}
.UpdateProgressBackground{background-color: #EEEEEE;}

/********** Border Color **********/
input[type="text"][readonly],input[type="email"][readonly],input[type="number"][readonly],input[type="tel"][readonly] {border-color:transparent;}
.tableForm,.popup,.TermsAndConditionsControl .divTermsAndConditions,.TermsAndConditionsControl .divTermsAndConditionsFrame{border-color: #CCCCCC;}
.highlightBorder{border-color:#FF0000;}
.button_main,.button_secondary,.button_tertiary,.button_optional { border-color:#515151;}
.mainPage, .menu ul,.CellSeparator,.header ,.info,.warning{border-color:#336699;}
.magnifiedImage,.popup,.progressNext {border-top-color:#336699;}
.center,.right {border-color:#b2bbe3;}
.message {border-color:#990000;}
.info, .warning {border-top-color:#336699;}
.confirmation {border-color: #009933;}
.button_main[disabled], .button_secondary[disabled],.button_tertiary[disabled],.progressOff  {border-color:#999999;}
.progressOn {border-color:#003366;}

/********** Text Color **********/
h1,h4,.navigation, .menu a,.menu a:hover, .menu a:visited , .menu a[disabled], .menu a[disabled] li  {color: #003366;}
h3 {color: #1A1A1A;}
h2,a:link,.headerLink a:visited, .headerLink a:hover,.menu a:hover,.progressNext {color: #336699;}
a:visited{color:#660099;}
th a:hover,a:hover {color: #6699FF;}
body, p, table,.textLink a:link, .textLink a:visited, .textLink a:hover,.labels,.message li, .confirmation li, .info li,.popup {color: #333333;}
.highlight{color:#FF0000;}
th, th a:link, th a:visited,.button_main, .button_secondary, .button_tertiary, .button_optional,.progressOn,.collapsePanelHeader {color: #FFFFFF;}
.message .boldTxt,.confirmation .boldTxt,.info .boldTxt, .message .icon, .info li {color: #000000;}
.button_main[disabled], .button_secondary[disabled],.button_tertiary[disabled] ,.popup p {color: #666666;}
.progressOff {color: #999999;}

/*****************************************************
*   Text Schemes
*****************************************************/
/********** Global Font Sizes **********/
body.view-lg,.headerLink, .headerLogout {font-size:0.8em;}
.header {font-size:1.25em;}

/********** Links **********/
a:link, a:visited, a:hover {text-decoration: none;padding: 0;border: none;margin: 0;}
a:hover{text-decoration: underline;}
.NavigationLink:link {padding-left:10px;padding-right:10px;}
.textLink a{outline:none;}
.textLink a:link, .textLink a:visited, .textLink a:hover{text-decoration: none;margin: 0;cursor: default;} 

/********** Paragraph **********/
p {padding: 0 0 5px 2px;margin: 0;line-height: 1.3em;}

/********** Headings **********/
h1,h2,h3,h4 { text-transform:none; text-align:left;font-weight:bold; margin:0px;border:none;padding: 5px 0 3px 2px;}
h1 {padding: 20px 0 5px 4px;font-size:1.1em;}
.mainPage h1 {font-size:1.375em;}
h2 {font-size:1.25em;}
h3 {font-size: 0.9em;}
.mainPage h3{font-size:1.125em;}
h4 {font-size:1em;font-weight:normal;}

/********** Display Items Highlight  **********/
#DisplayItems .DisplayItem14, #DisplayItems .DisplayItem14 input[readonly],  /* Scheduled Date */
#DisplayItems .DisplayItem8, #DisplayItems .DisplayItem8 input[readonly] /* Total Amount */
{ font-weight:bold;}
#DisplayItems .valueColumn {white-space:nowrap;}
#DisplayItems .detailsColumn {width:45%;}

/********** Custom Text Classes  **********/
.boldTxt {font-weight: bold;}
.wrap, .wrap a:link{text-wrap:normal;white-space:pre-wrap;}
.center,.right {padding-right: 3px;margin: 0;border-right-width:1px;border-right-style:solid;}
.center {text-align:center;}
.right {text-align:right;}
.required{font-size: 1.2em;font-weight: bold;color: #990000;text-align:center;}
.highlightBorder{border-width:2px;border-style:solid;padding:2px;}

/*****************************************************
*   Tables and Grids
*****************************************************/

/* backward compatibility; this should be removed later on once clean up is done */
.column5percent { width:5%;}
.column7percent { width:7%;}
.column10percent { width:10%;}
.column12percent { width:12%;}
.column15percent { width:15%;}
.column16percent { width:16%;}
.column20percent { width:20%;}
.column25percent { width:25%;}
.column30percent { width:30%;}
.column35percent { width:35%;}
.column40percent { width:40%;}
.column45percent { width:45%;}
.column50percent { width:50%;}
.column55percent { width:55%;}
.column60percent { width:60%;}
.column65percent { width:65%;}
.column70percent { width:70%;}
.column75percent { width:75%;}
.column80percent { width:80%;}
.column85percent { width:85%;}
.column90percent { width:90%;}
.column95percent { width:95%;}
.column100percent { width:100%;}

table {margin:0px;padding:0px;}
th {font-weight: bold;text-align: left;margin: 0px;padding:2px 3px;}
th .center {text-align: center;}
td {padding: 2px;}

.tableForm, .tableForm th { vertical-align:middle;}
.tableForm {border-width:1px;border-style:solid;width: 98%;margin: 0px 0px 5px 0px;padding:3px 5px;}
.tableForm tr {padding:0px 3px;}
.tableForm td {padding:5px 0px 5px 3px;border:none;}

.tableForm .labels {padding-left: 5px;}
.tableForm .subLabels {	font-size: 0.9em;font-weight: normal;}

.tableForm .verticalAlign {vertical-align: text-top;}
.tableForm .creditcards {vertical-align: middle;padding: 3px;}
.tableForm .tableWidth {width: 98%;margin: 0px;}
.tableForm .tableWidth td {padding-top:3px;padding-bottom:3px;}
.tableForm .tableMax, .tableMax {width: 100%;margin: 0px;padding: 0px;border:none;}

/*.parentTable td {font-size:1em;margin:0px;padding:0px;}
.parentTable .tableWidth td {font-size:0.8em;}*/

.tableWidth { width:98%;}
.rows_even,.rows_odd {margin: 0;padding-top: 2px 0px 2px 2px;}

.PagerStyle td{text-align:center;}
.paging table{margin: 0px;padding:0px;}  
.paging td {padding: 2px 3px 1px;}
.paging td a:visited,.paging td a:hover {text-decoration: underline;}
.PagerStyle td a:link, .PagerStyle td a:hover, .PagerStyle td a[disabled=disabled] {padding-left: 2px; padding-right: 2px;}

.ActionHeader,.ActionColumn,.ViewColumn,.RadioButtonColumn,.EditColumn,.DeleteColumn,.MakePaymentColumn,.APSColumn {text-align:center;}
.CellSeparator {border-left-width:1px;border-left-style:solid;}
.headerRow, .headerRow td, .tableForm tr.headerRow, .tableWidth tr.headerRow td { height:0px;margin:0px;padding:0px;}

.divSection {display:block;width:100%;overflow:hidden;padding:2px 0px;}
.divCell{display:inline-block;padding:3px 0px;vertical-align:middle;*float:left;}
.divLineBreak {height:1em;}
div.divSection.option .description {width:90%;}

.labelColumn,.validatorColumn,.valueColumn,.commentsColumn,.separatorColumn {vertical-align:middle;}
.ScheduledDateRow .labelColumn {vertical-align:top;}
.labelColumn {width:25%;}
.validatorColumn {width:25px;}
.separatorColumn {width:1%;}
.valueColumn {width:auto;}
.commentsColumn {width:auto;}

.detailsColumn {width:70%;}
.buttonsColumn {width:28%;}

.col-left,.col-right {width:50%;*width:49%;height:100%;float:left;}
.col-right{float:right;}

/** Hides rows that are not editable **/
.RowDisabled, .RowDisabled .required, .RowDisabled input[type="text"],.RowDisabled input[type="email"],.RowDisabled input[type="tel"],.RowDisabled input[type="number"]{display:none;}
/** Always display the Payment Row even if not editable **/
.PaymentRow{}

.GridView .GridRow {width:100%;margin-left:auto;margin-right:auto;display:block;}
.GridView .GridCell { display:block;float:left;padding:0px 2px 0px 0px;word-wrap:break-word;}
.GridView .ActionColumn {float:right;display:table-column-group;}
.GridView .ActionColumn .GridCell {float:right;padding-right:5px;}
.GridView .ActionColumn .GridCell a[disabled] {visibility:hidden;}

.GridView th .GridCell a:link {white-space:pre-wrap;*white-space:normal;}
.GridView th .GridCell img.Sort {vertical-align:middle;}

/* Hide the ExtendedGridView Sorting Arrows */
.GridView th img:not(.Sort) {display:none;}
.GridView th img {*display:none;}
.GridView th img.Sort{*display:inline-block;}

/*****************************************************
*   Images
*****************************************************/
img {border: none;margin: 0;padding: 0;}
.icon {vertical-align:middle;}
.message .icon, .confirmation .icon, .info .icon, .warning .icon {width:22px;height:22px;}
.ArrowUpImage{width:11px;height:13px;}
.ArrowDownImage{width:11px;height:14px;}
.ArrowNeutralImage{width:12px;height:13px;}
.EditImage{width:3px;height:18px;}
.DeleteImage{height:18px;width:14px;}
.ViewImage{height:14px;width:14px;}
.eBillAlertImage{height:14px;width:14px;}
.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;}
.MakePaymentImage {width:16px;height:18px;}
.AutoPayImage {width:16px;height:16px;}
.iconCentered {vertical-align:middle;text-align:center;padding:10px 5px;}
.AutoPayImage,.MakePaymentImage,.EditImage, .DeleteImage, .eBillAlertImage, .MakePaymentImage,.AutoPaymImage,.CloneImage, .WarningImage {margin-right:2px;padding-right:3px;}
.magnifiedImage {position:absolute;z-index:100;top:0px;left:0px; border-width:2px; border-style:groove;}

/*****************************************************
*   Custom Buttons 
*****************************************************/
.buttonPosition, .buttonPositionLeft, .buttonPositionCenter,.buttonPositionBottomCenter {width:100%;}
.buttonPosition {text-align: right;}
.buttonPositionLeft {text-align:left;}
.buttonPositionCenter,.buttonPositionBottomCenter {text-align: center;}
.buttonPositionBottomCenter {position:absolute;bottom:10px;left:0px;}

.button_main,.button_secondary,.button_tertiary,.button_optional {border-width:1px;border-style:solid;padding:4px;margin:4px 2px 4px 0px; cursor:pointer;}
.button_optional{display:none;}

/*****************************************************
*   Print Controls 
*****************************************************/
#PrintFooter, #PrintHeader{ display:none;}
.PrintControls img {width:1.1em;height:1.1em;margin-right:5px;}


/*****************************************************
*   Message Areas 
*****************************************************/
.message, .confirmation, .info, .warning {
	width: 98%;
  margin:5px 0px;
	border-top-width:2px;
  border-top-style:solid;
	background-image: url(../../Images/messages.gif);
	background-position: bottom;
	background-repeat: repeat-x;
	padding: 5px;
	outline:none;
  padding-bottom:15px;
}
.message ul, .confirmation ul, .info ul, .warning ul {display:inline-block;width:80%;*float:left;*margin-top:15px;*padding-bottom:15px;}
.message li, .confirmation li,.info li, .warning li {line-height: 1.5em;text-align: left;}
.message .icon,.confirmation .icon,.info .icon,.warning .icon  {display:inline-block;margin-left:25px;padding:15px 0px;vertical-align:top;*float:left;}
.message ul{list-style-type: disc;}
.confirmation ul, .info ul, .warning ul{list-style-type: none;}
.warning input[type="button"] {margin-left:95px;}
.mobileLabel {display:none;}