/* @group global styles
--------------------------------------------------------------------------------------------- */
body {
    font-size: .8em;
    color: #5a4b4b;
    font-family: Tahoma;
    background: #EFEBEF;
}

.bold {
    font-weight: bold;
}

/* font color */
.tColor1 {
    color: #870a3c!important;
}

.tColor2 {
    color: #BDBEBD;
}

.tColor3 {
    color: #ffffff;
}

.tColor4 {
    color: #666666;
}

.alert {
    color: #ff0000;
}

/* Blue & Blue */
a:link,a:visited {
    color: #f0325a;
}

a:hover {
    /* color: #003366; */
}
/* Black & White */
.lColor1:link,.lColor1:visited {
    color: #000000;
}

.lColor1:hover {
    color: #ffffff;
}
/* Black & Blue */
.lColor2:link,.lColor2:visited {
    color: #000000;
}

.lColor2:hover {
    color: #00A4E8;
}
/* Blue & Black */
.lColor3,.lColor3:link,.lColor3:visited {
    color: #00A4E8;
}

.lColor3:hover {
    color: #000000;
}
/* White & White */
.lColor4:link,.lColor4:visited {
    color: #ffffff;
}

.lColor4:hover {
    color: #ffffff;
}

/* Blue & White */
.lColor5:link,.lColor5:visited {
    color: #00A4E8;
}

.lColor5:hover {
    color: #ffffff;
}

/* Gray & Blue */
.lColor6:link,.lColor6:visited {
    color: #BDBEBD;
}

.lColor6:hover {
    color: #00A4E8;
}

/* Blue & Blue */
.flColor:link,.flColor:visited {
    color: #003366;
}

.flColor:hover {
    color: #003366;
}
.content img{
padding: 90px 0px 0px 150px;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
a .content{
color: #333333;}
.clearfix {
    display: inline-block;
}
/*Hide form IE-mac \*/
* html .clearfix {
    height: 1%
}

.clearfix {
    display: block;
}
/*End hide form IE-mac*/

/* @group font-size & color
--------------------------------------------------------------------------------------------- */
.font1 {
    font-size: 2em;
}

.font2 {
    font-size: 1.8em;
}

.font3 {
    font-size: 1.5em;
}

.font4 {
    font-size: 1.2em;
}

.font5 {
    font-size: 1em;
}

.font6 {
    font-size: .8em;
}

/* @group page structure
--------------------------------------------------------------------------------------------- */
.header {
    margin: 0 auto;
    position: relative;
    width: 998px;
    vertical-align: middle;
}

.nav {
    margin: 0 auto;
    position: relative;
    width: 998px;
    padding: 5px 0 0 50px;
    top: -10px;
    z-index: 93;
}

.frame {
    margin: 0 auto;
    position: relative;
    width: 1024px;
    top: -20px;
    overflow: hidden;
}

.frame .left {
    width: 40px;
    padding-bottom: 1000px;
    margin-bottom: -980px;
    background: url(../../im/login/cornerWithShadow.jpg) 2px 0 no-repeat;
}

.frame .middle {
    padding-bottom: 1000px;
    margin-bottom: -980px;
    margin-top: 15px;
    background: white url(../../im/login/login-background.png) repeat-x;
}

.frame .right {
    width: 40px;
    padding-bottom: 1000px;
    margin-bottom: -980px;
    /*background: url(../../im/login/cornerWithShadow.jpg) -38px 0 no-repeat;*/
}

.footer {
    clear: both;
    margin: 0 auto;
    position: relative;
    width: 970px;
    top: -20px;
    overflow: hidden;
}

.footer .left {
    width: 13px;
    background: url(../../im/login/footerCorner.png) no-repeat;
}

.footer .middle {
    background: white url(../../im/login/footerBackground.png) repeat-x;
}

.footer .right {
    width: 13px;
    background: url(../../im/login/footerCorner.png) -13px no-repeat;
}

/* @group general styles
--------------------------------------------------------------------------------------------- */

/* A link style with blue/black/left arrow @ 25/08/2011 14:28 */
a.blue_black {
    padding-left: 15px;
    background: url(../../im/login/arrow_blue_black.png) -5px -2px
        no-repeat;
}

a.blue_black:hover {
    color: #000;
    background: url(../../im/login/arrow_blue_black.png) -5px -18px
        no-repeat;
}

.footer ul {
    margin: 10px;
}

.footer li {
    display: inline;
    padding: 3px;
    font-size: 11px
    font-family: 'Source Sans Pro Semibold';
}

.footer li a {
    color: #036;
}

.footer li a:hover {
    color: #036;
}

.footer h5 {
    margin: 10px 0;
    color: #036;
}

.footer h5 img {
    padding: 0 10px;
}

/* @group helper styles
--------------------------------------------------------------------------------------------- */
.currencyBold {
    font-weight: bold;
}

.divider {
    width: 1px;
    height: 10px;
}

/************************************************************************
 * @name: grid helper
 * @author: Eric Chen
 * @version: 0.0.1
 * @description: help to fix the layout
 ************************************************************************/
.alpha_0,.alpha_1,.alpha_2,.alpha_3,.alpha_4,.alpha_5,.alpha_7,.alpha_8,.alpha_10
    {
    display: inline;
    float: left;
    /*border:1px solid #f90;*/
}

.omega_0,.omega_1,.omega_2,.omega_3,.omega_4,.omega_5,.omega_7,.omega_8,.omega_10
    {
    display: inline;
    float: right;
    /*border:1px solid #369;*/
}

.alpha_1,.omega_1 {
    WIDTH: 60px
}

.alpha_2,.omega_2 {
    WIDTH: 140px
}

.alpha_3,.omega_3 {
    WIDTH: 220px
}

.alpha_4,.omega_4 {
    WIDTH: 300px
}

.alpha_5,.omega_5 {
    WIDTH: 380px
}

.alpha_7,.omega_7 {
    WIDTH: 540px
}

.alpha_8,.omega_8 {
    WIDTH: 620px
}

.alpha_10,.omega_10 {
    WIDTH: 780px
}
/* @group general components
--------------------------------------------------------------------------------------------- */
.unitBox {
    width: 230px;
}

.unitBox .uTop {
    background: url(../../im/login/unitWithShadow_header.png) top center
        no-repeat;
    height: 50px;
}
.unitBox .uTop img {
    margin: 12px 0 0 15px;
}

.unitBox .uTop span {
    line-height: 50px;
    padding: 0 10px;
}

.unitBox .uMiddle {
    background: url(../../im/login/unitWithShadow_bg.png) repeat-y bottom
        center;
}

.unitBox .uMiddle ul {
    margin: auto;
    width: 215px;
}

.unitBox .uMiddle li {
    clear: both;
    padding: 5px 0;
    line-height: 15px;
    background: url(../../im/login/bg_li.png) repeat-x bottom center;
}

.unitBox .uMiddle li p {
    font-size: 10px;
    padding: 0 10px;
    text-shadow: 1px 1px 1px #ccc;
}

.unitBox .uMiddle li p a {
    float: right;
    text-shadow: 0 0 .1em hsla(210, 75%, 75%, 1);
}

.unitBox .uMiddle h5 {
    padding: 0 20px;
    font-weight: bold;
}

.unitBox .uBottom {
    height: 13px;
    background: url(../../im/login/unitWithShadow_footer.png) no-repeat top
        center;
}

/* unitBox use in Left */
.unitRightBox {
    width: 224px;
}

.unitRightBox .uTitle {
    cursor: pointer;
    padding: 5px 0 5px 15px;
    height: 26px;
    font-weight: bold;
    background: url(../../im/login/collapse_menu.png) no-repeat top center;
}

.unitRightBox .expanded {
    height: 22px;
    background-position: left -36px;
}

.unitRightBox .uContent {
    padding: 5px 8px;
    background: url(../../im/login/collapse_bg.png) no-repeat bottom center;
}

.topDotLine {
    margin-top: 10px;
    padding-top: 10px;
    background: url(../../im/lightbox/dot_line.png) left top repeat-x;
}

.birFormRow {
    padding: 4px 2px;
}

.birInput {
    display: inline-block;
    margin: 0 5px;
    background: url(../../im/login/inputLeft.png) left no-repeat;
}

.birInput input {
    border: 0;
    height: 28px;
    margin-left: 5px;
    background: url(../../im/login/input.png) right no-repeat;
}

.birCheckBox {
    vertical-align: middle;
    position: relative;
    display: inline-block;
    margin: 0 5px;
}

.birCheckBox label {
    height: 25px;
    line-height: 25px;
    margin-left: 5px;
}

.birRadioBox {
    vertical-align: middle;
    position: relative;
    display: inline-block;
    margin: 0 5px;
}

.birRadioBox label {
    height: 25px;
    line-height: 25px;
    margin-left: 5px;
}

/* blue button with right arrow */
a.btn01 {
    float: left;
    position: relative;
    display: block;
    line-height: 21px;
    margin-left: 10px;
    padding: 0 24px 0 0;
    background: url(../../im/login/button.png) no-repeat right top;
    font-weight: bold;
}

a.btn01 em {
    position: absolute;
    top: 0;
    left: -10px;
    width: 10px;
    height: 21px;
    background: url(../../im/login/button.png) no-repeat left top;
}

a.btn01:hover {
    background-position: right -21px;
}

a.btn01:hover em {
    background-position: left -21px;
}

/*
.inputMoney {
    float: left;
    position: relative;
    width: 291px;
    background: url(../../image/inputMoney.png) no-repeat;
}

.inputMoney span {
    float: left;
    width: 40px;
    height: 46px;
    line-height: 46px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

.inputMoney input {
    border: 0;
    float: right;
    width: 220px;
    height: 46px;
    line-height: 46px;
    font-size: 20px;
    font-weight: bold;
    margin-right: 10px;
    background: url(../../image/inputMoneyBg.png) repeat-x;
}
*/

/* @group overrides
--------------------------------------------------------------------------------------------- */

/*--------------------------------------------------------------------------
    Main Button Definitions
----------------------------------------------------------------------------*/
.btn.fr { /* floats a single button to the righthand side of module */
    float: right;
    margin-top: 10px;
}

.btn.fl { /* floats a single button to the righthand side of module */
    float: left;
    margin-top: 5px;
}

.btn {
    margin: 0 5px 0 5px;
    cursor: pointer;
    position: relative;
    line-height: 15px;
}

.btn a {
    position: relative;
    font-weight: bold;
    border: 0;
    display: block;
    float: left;
    min-height: 16px;
}

.btn a.short {
    padding: 2px 10px 2px 10px;
}

* html .btn a {
    height: 16px;
}

.btn a.reverse {
    padding: 2px 10px 2px 22px;
}

/*--------------------------------------------------------------------------
 Base Corner Styles
----------------------------------------------------------------------------*/
.btn em {
    display: block;
    overflow: hidden;
    position: absolute;
    height: 10px;
    width: 9px;
    background-repeat: no-repeat;
    z-index: 1;
}

/*left:-6px and right:-6px*/
.btn .tl {
    background-position: 0 0;
    top: 0;
    left: -6px;
}

.btn a:hover .tl {
    background-position: 0 -10px;
}

.btn .tr {
    background-position: -27px 0;
    top: 0;
    right: -6px;
}

.btn a:hover .tr {
    background-position: -27px -10px;
}

* html .btn .tr,* html .btn .br {
    margin-right: -1px;
}

.btn .bl {
    background-position: -9px 0;
    bottom: 0;
    left: -6px;
}

.btn a:hover .bl {
    background-position: -9px -10px;
}

.btn .br {
    background-position: -18px 0;
    bottom: 0;
    right: -6px;
}

.btn a:hover .br {
    background-position: -18px -10px;
}

/*------------Base Icon Styles----------------------------------------------

----------------------------------------------------------------------------*/
.btn .icon {
    display: block;
    overflow: hidden;
    position: absolute;
    top: 50%;
    right: 0;
    height: 19px;
    width: 19px;
    margin-top: -9px;
    background-repeat: no-repeat;
    z-index: 2;
    background-position: 0 0;
}

/* for back button*/
.btn .reverse .icon {
    right: auto;
    left: 0;
}
/*end of Base Icon Styles*/

/*----------4.login and logout--------------------------------------------------
a. Actional Variation ,purple button :logout,on every page.
----------------------------------------------------------------------------*/
.btn a.actional {
    background: #016BA8 url(../../im/butt/functional-grad.gif) repeat-x 0 0;
    /*color: #fff;*/
    text-transform: capitalize;
    text-decoration: none;
}

.actional em {
    background-image: url(../../im/butt/functional-btn-corners.gif);
}

.actional .lock {
    background-image: url(../../im/butt/default-icon-lock.gif);
}
/*-----------------4.login and logout---------------------------------------
 b.Functional Variation specially for login an logout page's blue button
----------------------------------------------------------------------------*/
.btn a.functional {
    background: #016BA8 url(../../im/butt/functional-grad.gif) repeat-x 0 0;
    /*color: #fff;*/
    text-transform: capitalize;
    text-decoration: none;
}

.functional em {
    background-image: url(../../im/butt/functional-btn-corners.gif);
}

.functional .arrow {
    background-image: url(../../im/butt/functional-icon-arrow.gif);
}

/*--------------------4.login and logout--------------------------------------
c. Directional0 Variation  specail for login and register pages' green button
----------------------------------------------------------------------------*/
.btn a.directional_0 {
    background: #006900 url(../../im/butt/directional-grad.gif) 0 0 repeat-x;
    /*color: #fff;*/
    text-transform: capitalize;
    text-decoration: none;
}

a.directional_0 {
    background: #006900 url(../../im/butt/directional-grad.gif) 0 0 repeat-x;
    /*color: #fff;*/
    text-transform: capitalize;
    text-decoration: none;
}

.directional_0 em {
    background-image: url(../../im/butt/directional-btn-corners.gif);
}

.directional_0 .lock {
    background-image: url(../../im/butt/directional-icon-lock.gif);
}

.directional_0 .arrow {
    background-image: url(../../im/butt/directional-icon-arrow.gif);
}
/*-------4.login and logout--------------------
d.  Hover Hooks
-------------------------------------------  */
a:hover.functional .arrow,a:hover.functional .close,a:hover.actional .lock,a:hover.directional_0 .arrow,a:hover.directional_0 .lock
    {
    background-position: -19px 0;
}

a:hover.functional,a:hover.actional,a:hover.directional_0 {
    /*color: #FFFFFF;*/
    background: #036;
    text-decoration: none;
    cursor: pointer;
}

/*end of button in login and logout*/

/*--------------------5.content-----------------------------------------------
a. Directional Variation ,  for content blue button
----------------------------------------------------------------------------*/
.btn a.directional {
    background: #016BA8 url(../../im/butt/functional-grad.gif) repeat-x 0 0;
    /*color: #fff;*/
    text-transform: capitalize;
    text-decoration: none;
}

.directional em {
    background-image: url(../../im/butt/functional-btn-corners.gif);
}

.directional .arrow {
    background-image: url(../../im/butt/functional-icon-arrow.gif);
}

/*----------------------5.content-----------------------------------------------
b. Default Variation : for the button back in content
----------------------------------------------------------------------------*/
.btn a.default {
    background: #fff;
    /*color: #00A4E8;*/
    text-transform: capitalize;
    text-decoration: none;
}

.default .arrow {
    background-image: url(../../im/butt/default-icon-arrow.gif);
}

.reverse .arrow {
    background-image: url(../../im/butt/default-icon-arrow-reverse.gif);
}

/*-------------------5.content-------------------------------------------------
c. Navigational Variation : special for white button and  blue word
----------------------------------------------------------------------------*/
.btn a.navigational {
    background: #F2EEEF url(../../im/butt/navigational-grad.gif) 0 0 repeat-x;
    /*color: #00A3E6;*/
    border-bottom: 1px solid #CDCDCD;
    border-left: 1px solid #CDCDCD;
    border-right: 1px solid #CDCDCD;
    padding-bottom: 1px;
    text-transform: capitalize;
    text-decoration: none;
}

.btn a.navigational .bl {
    bottom: -1px;
    left: -1px;
}

.btn a.navigational .br {
    bottom: -1px;
    right: -1px;
}

* html .btn a.navigational .bl,* html .btn a.navigational .br {
    bottom: -2px;
}

.btn a.navigational .icon {
    margin-top: -8px;
}

.btn a.navigational .tl {
    left: -1px;
}

.btn a.navigational .tr {
    right: -1px;
}

.navigational em {
    background-image: url(../../im/butt/navigational-btn-corners.jpg);
}

.navigational .arrow {
    background-image: url(../../im/butt/navigational-icon-arrow.gif);
}

/*  spacially for white button
--------------------------------  */
a:hover.navigational { /*color: #FFFFFF;*/
    background: #036;
    border-bottom: 1px solid #036;
    border-left: 1px solid #036;
    border-right: 1px solid #036;
    text-decoration: none;
    cursor: pointer;
}

/* #WriteToBank a:hover.navigational {
	color: #FFFFFF;
} */

/* for other buttons
--------------------------------  */
a:hover.navigational .arrow,a:hover.directional .arrow,a:hover.directional .close
    {
    background-position: -19px 0;
}

/* for ARIA
--------------------------------  */
.hiddenLabel {
    display: none;
}

/**
* Error Message Style Start
*/
/*Error Message Style for Summary Start*/
div.errorSummary p {
  background: url(../../im/arrow-white-sprite.gif) no-repeat -115px -962px;
  padding: 0 0 0.2em 2.08em;
  color: #CC3333;
  font-family: 'Expert sans light', arial, helvetica, verdana, sans-serif;
}
div.errorSummary {
	/*background-color: #FFFFD6;* /*12 Jan*/
   background-color: #fcf5f5;
   border: solid 1px #cc3333;
   border-radius: 5px;
	padding:0.83em 0 0.83em 1.25em;
}

/*Error Message Style for Summary End*/
/*Error Message Style for Details Start*/
tr.errorDetails td p{
   color: #CC3333;
    font-family: 'Expert sans light', arial, helvetica, verdana, sans-serif;
    position: relative;
    top: 0px;
}
tr.errorDetails td{
   /*background-color: #FFFFD6;* /*12 Jan*/
   background-color: #fcf5f5;
   border: solid 1px #cc3333;
   border-radius: 5px;
   padding: 0.83em 0 0.83em 1.25em;
}
/*Error Message Style for Details End*/
/*Error Field Style Start*/
.errorField {
  /*background-color: #FFFFD6;* /*12 Jan*/
   background-color: #fcf5f5;
   /*border: solid 1px #cc3333;*/
   border-radius: 5px;
}

/**css for si, leftLabel **/
table.ssc_form_table tr td.ssc_form_label h2{
	font-weight:bold;
	float:left;
	font-size:1.17em;
	color: #003366;
	padding:2px 0px 4px 0px;
}

.ssc_input_required {
  color: #FF0000;
  padding-left: 3px;
}

.ssc_form_label {
  text-align: left;
}