/* #######################################################
   ##########       DEFAULT ENDUSER STYLE       ##########
   ####################################################### */
   
/* #########   BANNER   ######### */
/* ## The banner that contains the logo and menu (menu visible after login) ## */
.bannerStyle {width: 100%; height: 84px; border: 0px; padding: 0 0 0 0; border-collapse: collapse;
}
/* ## Company Logo style ## */
.logoStyle {width: 100%; height: 77px;
background: url(../img/genericLogo.jpg); /* default company logo */
background-repeat: no-repeat;
}

/* #########   ALL PAGES STYLES   ######### */
/* ## Page background, white ## */
body {
    background-color: white;
    padding: 0; margin: 0;  
    
	/* Part of IE hack to fix its inability to center elements using CSS (i.e. "margin: 0 auto") */
    text-align: center; 
    /* We use text-align center here to center element in IE.
       IE incorrectly centers block-level elements if the element that they’re contained in has text-align: center applied.
    */
}
/* ## Field label, grey ## */
.label {
    font-size:16px; font-family:Arial,Verdana,Geneva,sans-serif; color:#696969; font-weight:medium; font-style:normal;
}
/* ## Message/action result to user, grey ## */
.message {
    font-size:17px; font-family:Geneva; color:#696969; font-weight:medium; font-style:normal;
}
/* ## Title of screen, grey ## */
.title {
    font-size:20px; font-family:Garamond; color:#696969; font-weight:bold;
}
/* ## Note at bottom of screen, grey ## */
.note {
    font-size:14px; font-family:Arial,Verdana,Geneva,sans-serif; color:#696969; font-weight:medium; font-style:italic;
}
/* ## Error messages to the user, red ## */
.error {
    font-family: Arial, Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: red; 
    font-style: italic; 
    font-weight: normal;
}
.errorMessage {
    color:red;
    font-weight:bold;
    text-align:center;
    font-style:italic;
}
/* ## asterisk color for required field, red ## */
.required {
    color:red;
}

/* #########   LINK STYLES   ######### */
/* ## link style for login screen "Forgot Password?", "Not yet registered?", ##
   ## and cvv and avs link on reload prepaid card screen 					 ## */
a.small:link {
    font-size:13px; font-style: italic; color:#696969; text-decoration: none;
}
a.small:visited {
    font-size:13px; font-style: italic; color:#696969; text-decoration: none;
}
a.small:hover {
    font-size:13px; font-style: italic; color:#ff6600; text-decoration: none;
}
a.small:active{
    font-size:13px; font-style: italic; color:#696969; text-decoration: none;
}
/* ## Policy link style, currently used in footer of the reload prepaid card screen ## */
a.small_policy:link { 
    font-size:13px; font-style: italic; color:#696969; text-decoration: underline;
}
a.small_policy:visited { 
    font-size:13px; font-style: italic; color:#696969; text-decoration: underline;
}
a.small_policy:hover { 
    font-size:13px; font-style: italic; color:#ff6600; text-decoration: underline;
}
a.small_policy:active{ 
    font-size:13px; font-style: italic; color:#696969; text-decoration: underline;
}
/* ## Other links, currently only used in the "disable reload screen" ## */
a.normal:link {
    font-size:16px; font-weight:medium; font-style:italic; color:#696969; text-decoration: none;
}
a.normal:visited {
    font-size:16px; font-weight:medium; font-style:italic; color:#696969; text-decoration: none;
}
a.normal:hover {
    font-size:16px; font-weight:medium; font-style:italic; color:#ff6600; text-decoration: none;
}
a.normal:active{
    font-size:16px; font-weight:medium; font-style:italic; color:#696969; text-decoration: none;
}

/* #########   TABLE STYLES   ######### */
/* ## Form tables ## */
.userFormTable {
border: 1px solid #666;
background-color: #F5F5F5; /* light grey */
}
/* ## To fix IE bug. Without this IE sometimes does not display the length of the textfield correctly ## */
input {
font-family: Arial, Verdana, Geneva, sans-serif;
}
/* ## User History detail table ## */
/* Table  */
.reportTable {
	background-color: #F5F5F5;
	border: 1px solid #666;
	font-size: 10pt;
	font-family: Arial, Verdana, Geneva, sans-serif;
	color: black;
}
/* Table header */
.reportTableHeader {
	font-size: 10pt;
	font-family: Arial, Verdana, Geneva, sans-serif;
	background-color: #B0C4DE; /* blue */
	color: black;
	font-weight: bold;
}
/* Normal table row */
.reportTableRow {
	background-color: #F5F5F5; /* this should be the same as reportTable above */
	color: black; /* needs to be the same as reportTable above */
}
/* Highlighted table row */
.reportTableRowH {
	background-color: #FFD700; /* medium grey */
	color: black; /* text color when highlighted */
}

/* #########   FOOTER   ######### */
/* ## Style for legal and copyright footer division ## */
.footer_div {
	padding: 0; margin: 0;
    text-align: left;
}
/* ## Style for footer paragraph ## */
.footer_p {
    text-align: center; padding-top: 0px; margin-top: 6px;
    font-size:12px; font-family:Arial,Verdana,Geneva,sans-serif; 
	color: #696969; 
	font-weight:medium; font-style:italic;
}
/* ## Style for legal and copyright ruler, light grey ## */
.footer_hr {
	color: #BBB; 
	background-color: #696969; 
    padding: 0 0 0 0;
	margin: 0 0 0 0;
}

/* ######### Style used to position elements in a form, should not need to customize ######### */
.tablePosition {
    position: relative; top: 30px;
	margin: 0px auto; /* Horizontal centering with CSS, by setting its right and left margin widths to auto */
	text-align:left;  /* applies text-align attribute to block-level elements to counter the text-align center in body for the IE 'hack'*/
	padding: 5px; 
}
p {
    margin: 0; padding: 0;
}
ul {margin: 0; padding: 0; 
}
li {margin: 0; padding: 0;  
}
div.logo img { /* for card LOGO in reload screen */
  vertical-align: middle;
  border: 0;
}
div.errorRow{
  clear: both; /*  No floating elements allowed  */
  margin: 0;
  padding: 0;
}
/* ## Used in most of the forms to create a single row container ## */
div.row {
  clear: both; /*  No floating elements allowed  */
  padding-top: 5px;
  padding-bottom: 10px;    
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}
.wholewidth { /* Create a column that use up the whole width of a row (the row container) */
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: left;
}
/* ## Table with 2 columns (used in registration form, profile form) ## */
div.row span.fieldLabel {
  float: left;
  width: 108px;
  text-align: left; /* to counter the text-align center in body for the IE 'hack' */
  padding: 0;
}
div.row span.fieldInput{
  float: left;
  width: 240px;
  text-align: left; /* to counter the text-align center in body for the IE 'hack' */
  padding: 0;
}
/* ## Table with 3 columns (used in login screen) ## */
div.row span.col0 {
  float: left;
  width: 150px;
  text-align: left; /* to counter the text-align center in body for the IE 'hack' */
  padding: 0;
}
div.row span.col1 {
  float: left;
  width: 200px;
  text-align: left; /* to counter the text-align center in body for the IE 'hack' */
  padding: 0;
} 
div.row span.col2 {
  float: left;
  width: 130px;
  text-align: left; /* to counter the text-align center in body for the IE 'hack' */
  padding: 0;
}