/*STP Form*/
form input::-webkit-validation-bubble-message, 
form select::-webkit-validation-bubble-message,
form textarea::-webkit-validation-bubble-message {
display:none;
} 
.linkage {
    text-decoration: underline;
}
.chevvy-txt {
    width: 100%;
    height: 35px;
    background: #FCCD00;
    float: left;
    font-size: 12px;
    top: 25px
}
.chevvy-left {
    width: 5px;
    height: 35px;
    float: left;
}
.chevvy-top {
    height: 11px
}
.chev-text {
    color: #dbad02;
}
.chev-text-selected {
    color: #000;
}
.chev-title {
    font-size: 16px;
    margin: 10px 0 15px 5px;
    color: #FFCF02
}
.chev-subtitle {
    font-size: 12px;
    margin: 0 0 20px 5px;
}
.chev-subtitle2 {
    font-size: 12px;
    margin: 0 0 5px 5px;
}
.bottom-bar {
    height: 60px;
    margin-top: 10px;
    display: block;
    margin-left: 195px;
    position: static
}
.stp-title-confirm {
    font-size: 16px;
    color: #FFCF02
}
.confirm-title {
    font-size: 16px;
    margin: 10px 0 5px 5px;
    color: #FFCF02
}
.confirm-title2 {
    font-size: 16px;
    padding: 10px 10px 2px 10px;
    color: #000
}
.confirm-subtitle2a {
    font-size: 12px;
    padding: 0 10px 10px 10px;
    font-weight: lighter;
    line-height: 16px
}
.confirm-subtitle {
    font-size: 12px;
    margin: 0 0 20px 5px;
    font-weight: lighter;
    line-height: 16px
}
.confirm-subtitle2 {
    font-size: 14px;
    margin: 0 0 20px 5px;
    font-weight: lighter;
}
.confirm-subtitle3 {
    font-size: 14px;
    margin: 0 0 20px 0;
    font-weight: lighter;
}
.confirm-subtitle4 {
    font-size: 20px;
    margin-left: 80px;
    font-weight: lighter;
}
.content-sidebar {
    margin: 10px;
    font-size: 10px;
    line-height: 14px;
}
.outer-box {
    margin: 10px;
    -webkit-box-shadow: 0px 0px 5px 0px #e6e6e6;
    -moz-box-shadow: 0px 0px 5px 0px #e6e6e6;
    box-shadow: 0px 0px 5px 0px #e6e6e6;
    background: rgba(245,245,245,1);
    background: -moz-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(245,245,245,1)), color-stop(50%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#ffffff', GradientType=0 );
    position: relative;
	border-radius:4px;
}
.upload-title {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    margin: 10px 0 5px 0;
    color: #FFCF02;
    text-align: left
}
.upload-subtitle {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: left;
    display:block;
}
.add-upload {
    color: #FDCE29;
    text-decoration: underline;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.add-upload a:hover {
    text-decoration: none;
 }
.bottom-bar2 {
    height: 60px;
    margin-top: 0;
    display: block;
    float:right;
    width: 100%;
    margin-right:75px;
    margin-bottom:20px;
}
.right {
    right: 0;
    float: right;
    margin-right: 10px;
}
.right-1button {
    right: 0;
    float: right;
    margin-right: 80px;
}
.right-edge {
    right: 0;
    float: right;
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.side-title {
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
	padding: 10px;
    background: #ffc600;
    font-size: 16px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    width: 100%;
    line-height: 20px;
}
.side-title2 {
    padding: 10px;
    background: #ffc600;
    font-size: 15px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    line-height: 20px;
	border-radius:4px;
}
.listing {
    margin-left: 20px;
}
.italic-stp {
    font-size: 10px;
    font-style: italic;
    font-weight: lighter;
    line-height: 10px;
    margin-left: 5px;
}
.margin-sec {
    display: block;
    margin-right: 30px;
    float: right;
    top: 0px;
}

/*!
Pure v0.6.0
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
https://github.com/yahoo/pure/blob/master/LICENSE.md
*/
/*csslint box-model:false*/
/*
Box-model set to false because we're setting a height on select elements, which
also have border and padding. This is done because some browsers don't render
the padding. We explicitly set the box-model for select elements to border-box,
so we can ignore the csslint warning.
*/

.stp-form input[type="text"], .stp-form input[type="password"], .stp-form input[type="email"], .stp-form input[type="url"], .stp-form input[type="date"], .stp-form input[type="month"], .stp-form input[type="time"], .stp-form input[type="datetime"], .stp-form input[type="datetime-local"], .stp-form input[type="week"], .stp-form input[type="number"], .stp-form input[type="search"], .stp-form input[type="tel"], .stp-form input[type="color"], .stp-form select, .stp-form textarea {
    padding: 0.9em 0.9em;
    display: inline-block;
    border: 1px solid #ccc;
    /*    box-shadow: inset 0 1px 3px #ddd;
*/    border-radius: 4px;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.stp-form input:not([type]) {
    padding: 0.5em 0.6em;
    display: inline-block;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 3px #ddd;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */
/* May be able to remove this tweak as color inputs become more standardized across browsers. */
.stp-form input[type="color"] {
    padding: 0.2em 0.5em;
}
.stp-form input[type="text"]:focus, .stp-form input[type="password"]:focus, .stp-form input[type="email"]:focus, .stp-form input[type="url"]:focus, .stp-form input[type="date"]:focus, .stp-form input[type="month"]:focus, .stp-form input[type="time"]:focus, .stp-form input[type="datetime"]:focus, .stp-form input[type="datetime-local"]:focus, .stp-form input[type="week"]:focus, .stp-form input[type="number"]:focus, .stp-form input[type="search"]:focus, .stp-form input[type="tel"]:focus, .stp-form input[type="color"]:focus, .stp-form select:focus, .stp-form textarea:focus {
    outline: 0;
    border-color: #129FEA;
}
/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.stp-form input:not([type]):focus {
    outline: 0;
    border-color: #129FEA;
}
.stp-form input[type="file"]:focus, .stp-form input[type="radio"]:focus, .stp-form input[type="checkbox"]:focus {
    outline: thin solid #129FEA;
    outline: 1px auto #129FEA;
}
.stp-form .stp-checkbox, .stp-form .stp-radio {
    margin: 0.5em 0;
    display: block;
}
.stp-radio-stp {
    margin: 0px 1em 0px 0px !important;
    display: block;
    width: 80px !important;
}
.stp-form input[type="text"][disabled], .stp-form input[type="password"][disabled], .stp-form input[type="email"][disabled], .stp-form input[type="url"][disabled], .stp-form input[type="date"][disabled], .stp-form input[type="month"][disabled], .stp-form input[type="time"][disabled], .stp-form input[type="datetime"][disabled], .stp-form input[type="datetime-local"][disabled], .stp-form input[type="week"][disabled], .stp-form input[type="number"][disabled], .stp-form input[type="search"][disabled], .stp-form input[type="tel"][disabled], .stp-form input[type="color"][disabled], .stp-form select[disabled], .stp-form textarea[disabled] {
    cursor: not-allowed;
    background-color: #eaeded;
    color: #cad2d3;
}
/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.stp-form input:not([type])[disabled] {
    cursor: not-allowed;
    background-color: #eaeded;
    color: #cad2d3;
}
.stp-form input[readonly], .stp-form select[readonly], .stp-form textarea[readonly] {
    background-color: #eee; /* menu hover bg color */
    color: #777; /* menu text color */
    border-color: #ccc;
}
 .stp-form input:focus:invalid, .stp-form textarea:focus:invalid, .stp-form select:focus:invalid {
 color: #b94a48;
 border-color: #e9322d;
}
.stp-form input[type="file"]:focus:invalid:focus, .stp-form input[type="radio"]:focus:invalid:focus, .stp-form input[type="checkbox"]:focus:invalid:focus {
 outline-color: #e9322d;
}
.stp-form select {
    /* Normalizes the height; padding is not sufficient. */
    height: 3.25em;
    border: 1px solid #ccc;
    background-color: white;
    background-image: url(../../../maybank_gif/image/arrow-stp.png), -webkit-linear-gradient(#FFF, #FFF 40%, #FFFFFF);
    background-position: 95% center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-appearance: button;
}
.stp-form select[multiple] {
    height: auto;
}
.stp-form label {
    margin: 0.5em 0 0.2em;
}
.stp-form fieldset {
    margin: 0;
    padding: 0.35em 0 0.75em;
    border: 0;
}
.stp-form legend {
    display: block;
    width: 100%;
    padding: 0.3em 0;
    margin-bottom: 0.3em;
    color: #333;
    border-bottom: 1px solid #e5e5e5;
}
.stp-form-stacked input[type="text"], .stp-form-stacked input[type="password"], .stp-form-stacked input[type="email"], .stp-form-stacked input[type="url"], .stp-form-stacked input[type="date"], .stp-form-stacked input[type="month"], .stp-form-stacked input[type="time"], .stp-form-stacked input[type="datetime"], .stp-form-stacked input[type="datetime-local"], .stp-form-stacked input[type="week"], .stp-form-stacked input[type="number"], .stp-form-stacked input[type="search"], .stp-form-stacked input[type="tel"], .stp-form-stacked input[type="color"], .stp-form-stacked input[type="file"], .stp-form-stacked select, .stp-form-stacked label, .stp-form-stacked textarea {
    display: block;
    margin: 0.25em 0;
}
/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.stp-form-stacked input:not([type]) {
    display: block;
    margin: 0.25em 0;
}
.stp-form-aligned input, .stp-form-aligned textarea, .stp-form-aligned select, /* NOTE: pure-help-inline is deprecated. Use .stp-form-message-inline instead. */
.stp-form-aligned .pure-help-inline, .stp-form-message-inline {
    display: inline-block;
 *display: inline;
 *zoom: 1;
    vertical-align: middle;
}
.stp-form-aligned textarea {
    vertical-align: top;
}
/* Aligned Forms */
.stp-form-aligned .stp-control-line {
    margin-bottom: 1.5em;
}
.stp-left {
    margin-left: 1.2em;
}
.stp-form-aligned .stp-control-line label {
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    width: 90%;
    margin: 0 1em 10px 10px;
    font-size: 13px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.stp-form-aligned .stp-controls {
    margin: 1.5em 0 0 11em;
}
/* Aligned Forms */
.stp-form-aligned .stp-control-group {
    margin-bottom: 1.5em;
}
.stp-form-aligned .stp-control-group label {
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    width: 13em;
    margin: 0 1em 0 10px;
    font-size: 13px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.stp-form-aligned .stp-controls {
    margin: 1.5em 0 0 11em;
}
/* Rounded Inputs */
.stp-form input.stp-input-rounded, .stp-form .stp-input-rounded {
    border-radius: 2em;
    padding: 0.5em 1em;
}
/* Grouped Inputs */
.stp-form .stp-group fieldset {
    margin-bottom: 10px;
}
.stp-form .stp-group input, .stp-form .stp-group textarea {
    display: block;
    padding: 10px;
    margin: 0 0 -1px;
    border-radius: 0;
    position: relative;
    top: -1px;
}
.stp-form .stp-group input:focus, .stp-form .stp-group textarea:focus {
    z-index: 3;
}
.stp-form .stp-group input:first-child, .stp-form .stp-group textarea:first-child {
    top: 1px;
    border-radius: 4px 4px 0 0;
    margin: 0;
}
.stp-form .stp-group input:first-child:last-child, .stp-form .stp-group textarea:first-child:last-child {
    top: 1px;
    border-radius: 4px;
    margin: 0;
}
.stp-form .stp-group input:last-child, .stp-form .stp-group textarea:last-child {
    top: -2px;
    border-radius: 0 0 4px 4px;
    margin: 0;
}
.stp-form .stp-group button {
    margin: 0.35em 0;
}
.stp-form .stp-input-1 {
    width: 100%;
}
.stp-form .stp-input-2-3 {
    width: 66%;
}
.stp-form .stp-input-1-2 {
    width: 50%;
}
.stp-form .stp-input-1-3 {
    width: 33%;
}
.stp-form .stp-input-1-4 {
    width: 25%;
}
.stp-form .stp-input-1-4a {
    width: 24.3%;
}
.stp-form .stp-input-1-5 {
    width: 15.55%;
}
.stp-form .stp-input-90 {
    width: 94%;
}

.stp-form .stp-input-1b {
    width: 90%;
}

.stp-form .stp-input-2-3b {
    width: 64%;
}

.stp-form .stp-input-1-3b {
    width: 29%;
}

.stp-form .stp-input-1-2b {
    width: 47%;
}

/* Inline help for forms */
/* NOTE: stp-help-inline is deprecated. Use .stp-form-message-inline instead. */
.stp-form .stp-help-inline, .stp-form-message-inline {
    display: inline-block;
    padding-left: 0.3em;
    color: #666;
    vertical-align: middle;
    font-size: 0.875em;
}
/* Block help for forms */
.stp-form-message {
    display: block;
    color: #666;
    font-size: 0.875em;
}
 @media only screen and (max-width : 480px) {
.stp-form button[type="submit"] {
    margin: 0.7em 0 0;
}
.stp-form input:not([type]),  .stp-form input[type="text"],  .stp-form input[type="password"],  .stp-form input[type="email"],  .stp-form input[type="url"],  .stp-form input[type="date"],  .stp-form input[type="month"],  .stp-form input[type="time"],  .stp-form input[type="datetime"],  .stp-form input[type="datetime-local"],  .stp-form input[type="week"],  .stp-form input[type="number"],  .stp-form input[type="search"],  .stp-form input[type="tel"],  .stp-form input[type="color"],  .stp-form label {
    margin-bottom: 0.3em;
    display: block;
}
.stp-group input:not([type]),  .stp-group input[type="text"],  .stp-group input[type="password"],  .stp-group input[type="email"],  .stp-group input[type="url"],  .stp-group input[type="date"],  .stp-group input[type="month"],  .stp-group input[type="time"],  .stp-group input[type="datetime"],  .stp-group input[type="datetime-local"],  .stp-group input[type="week"],  .stp-group input[type="number"],  .stp-group input[type="search"],  .stp-group input[type="tel"],  .stp-group input[type="color"] {
    margin-bottom: 0;
}
.stp-form-aligned .stp-control-line label {
    margin-bottom: 0.3em;
    text-align: left;
    display: block;
    width: 100%;
}
.stp-form-aligned .stp-control-group label {
    margin-bottom: 0.3em;
    text-align: left;
    display: block;
    width: 100%;
}
.stp-form-aligned .stp-controls {
    margin: 1.5em 0 0 0;
}
/* NOTE: stp-help-inline is deprecated. Use .stp-form-message-inline instead. */
.stp-form .stp-help-inline,  .stp-form-message-inline,  .stp-form-message {
    display: block;
    font-size: 0.75em;
    /* Increased bottom padding to make it group with its related input element. */
    padding: 0.2em 0 0.8em;
}
}

/*.stp-button {
    display: inline-block;
    zoom: 1;
    line-height: normal;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}*/

/* Firefox: Get rid of the inner focus border */
.stp-button::-moz-focus-inner {
 padding: 0;
 border: 0;
}
/*csslint outline-none:false*/

.stp-button {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px;
    padding: 0.5em 2em;
    color: #444; /* rgba not supported (IE 8) */
    color: rgba(0, 0, 0, 0.80); /* rgba supported */
    border: 1px solid #999;  /*IE 6/7/8*/
    border: none rgba(0, 0, 0, 0);  /*IE9 + everything else*/
    background-color: #fdce2a;
    text-decoration: none;
    border-radius: 4px;
}
.stp-button-hover, .stp-button:hover, .stp-button:focus {
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10)));
    background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
    background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.10));
    background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
    background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
}
.stp-button:focus {
    outline: 0;
}
.stp-button-active, .stp-button:active {
    box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
    border-color: #000\9;
}

/* Firefox: Get rid of the inner focus border */
.stp-button2::-moz-focus-inner {
 padding: 0;
 border: 0;
}
/*csslint outline-none:false*/

.stp-button2 {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding: 8px 8px;
    color: #444; /* rgba not supported (IE 8) */
    color: rgba(0, 0, 0, 0.80); /* rgba supported */
    border: 1px solid #999;  /*IE 6/7/8*/
    border: none rgba(0, 0, 0, 0);  /*IE9 + everything else*/
    background-color: #fdce2a;
    text-decoration: none;
    border-radius: 4px;
}
.stp-button2:hover, .stp-button2:focus {
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10)));
    background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
    background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.10));
    background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
    background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
}
.stp-button2:focus {
    outline: 0;
}
.stp-button[disabled], .stp-button-disabled, .stp-button-disabled:hover, .stp-button-disabled:focus, .stp-button-disabled:active {
    border: none;
    background-image: none;
 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    filter: alpha(opacity=40);
    -khtml-opacity: 0.40;
    -moz-opacity: 0.40;
    opacity: 0.40;
    cursor: not-allowed;
    box-shadow: none;
}
.stp-button-hidden {
    display: none;
}

/* Firefox: Get rid of the inner focus border */
.stp-button::-moz-focus-inner {
 padding: 0;
 border: 0;
}
.stp-button-primary, .stp-button-selected, a.stp-button-primary, a.stp-button-selected {
    background-color: #fdce2a;
    color: #000;
}
.stp-header {
    padding: 10px;
    font-size: 15px;
    font: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    background: #bebebe;
    color: #555555;
    width: 94%;
    border-radius: 4px;
}
.stp-header-upload {
    padding: 10px 0;
    font-size: 15px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #555555;
    width: 94%;
    border-radius: 4px;
    text-align: left;
}
.stp-header-confirm {
    padding: 10px;
    font-size: 15px;
    font: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    background: #fcfcfc;
    width: 94%;
    border-radius: 4px;
    border: 1px solid #d8d8d8;
    color: #555555;
}
.stp-select-ph {
    color: #F00;
}
input[type=radio]:checked + label:before {
    color: #f3f3f3;
    font-size: 20px;
    text-align: center;
    line-height: 18px;
}
.meter {
    height: 3px;  /* Can be anything */
    position: relative;
    padding: 0px;
    margin-bottom:10px;
    width: 97%;
    background: #dddddd;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.meter > span {
    display: block;
    height: 3px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    background-color:#3ADF00;
    background-image: linear-gradient(  center bottom,  rgb(43,194,83) 37%,  rgb(84,240,84) 69%  );
    position: relative;
    overflow: hidden;
}

.meter-dot-yellow {
    float: right;
    background: url('../../../maybank_gif/image/dotted-black.png') right no-repeat transparent;
    height: 20px;
    position: absolute;
    z-index: 10;
    top: -8px;
    width: 10px;
	left:5px;
}
.meter-dot-green {
    float: right;
    background: url('../../../maybank_gif/image/dotted-green.png') right no-repeat transparent;
    height: 20px;
    position: absolute;
    z-index: 10;
    top: -8px;
    width: 10px;
	left:5px;
}
.meter-dot-1 {
    float: right;
    background: url('../../../maybank_gif/image/dotted.png') right no-repeat transparent;
    height: 20px;
    position: absolute;
    z-index: 10;
    top: -8px;
    width: 10px;
	left:5px;
}
.meter-dot-2 {
    float: right;
    background: url('../../../maybank_gif/image/dotted-2.png') right no-repeat transparent;
    height: 20px;
    position: absolute;
    z-index: 10;
    top: -8px;
    width: 10px;
	left:5px;
}

.meter-dot-3 {
    float: right;
    background: url('../../../maybank_gif/image/dotted-3.png') right no-repeat transparent;
    height: 20px;
    position: absolute;
    z-index: 10;
    top: -8px;
    width: 10px;
	left:5px;
}

.meter-dot-4 {
    float: right;
    background: url('../../../maybank_gif/image/dotted-4.png') right no-repeat transparent;
    height: 20px;
    position: absolute;
    z-index: 10;
    top: -8px;
    width: 10px;
	left:5px;
}

.meter-dot-5 {
    float: right;
    background: url('../../../maybank_gif/image/dotted-5.png') right no-repeat transparent;
    height: 20px;
    position: absolute;
    z-index: 10;
    top: -8px;
    width: 10px;
	left:5px;
}

.meter-dot-black-1 {
    float: right;
    background: url('../../../maybank_gif/image/dotted-black-1.png') right no-repeat transparent;
    height: 20px;
    position: absolute;
    z-index: 10;
    top: -8px;
    width: 10px;
	left:5px;
}
.meter-dot-black-2 {
    float: right;
    background: url('../../../maybank_gif/image/dotted-black-2.png') right no-repeat transparent;
    height: 20px;
    position: absolute;
    z-index: 10;
    top: -8px;
    width: 10px;
	left:5px;

}

.meter-dot-black-3 {
    float: right;
    background: url('../../../maybank_gif/image/dotted-black-3.png') right no-repeat transparent;
    height: 20px;
    position: absolute;
    z-index: 10;
    top: -8px;
    width: 10px;
	left:5px;
}

.meter-dot-black-4 {
    float: right;
    background: url('../../../maybank_gif/image/dotted-black-4.png') right no-repeat transparent;
    height: 20px;
    position: absolute;
    z-index: 10;
    top: -8px;
    width: 10px;
	left:5px;
}

.meter-dot-black-5 {
    float: right;
    background: url('../../../maybank_gif/image/dotted-black-5.png') right no-repeat transparent;
    height: 20px;
    position: absolute;
    z-index: 10;
    top: -8px;
    width: 10px;
	left:5px;
}

.meter-dot-green-1 {
    float: right;
    background: url('../../../maybank_gif/image/dotted-green-1.png') right no-repeat transparent;
    height: 20px;
    position: absolute;
    z-index: 10;
    top: -8px;
    width: 10px;
	left:5px;
}
.meter-dot-green-2 {
    float: right;
    background: url('../../../maybank_gif/image/dotted-green-2.png') right no-repeat transparent;
    height: 20px;
    position: absolute;
    z-index: 10;
    top: -8px;
    width: 10px;
	left:5px;

}

.meter-dot-green-3 {
    float: right;
    background: url('../../../maybank_gif/image/dotted-green-3.png') right no-repeat transparent;
    height: 20px;
    position: absolute;
    z-index: 10;
    top: -8px;
    width: 10px;
	left:5px;
}

.meter-dot-green-4 {
    float: right;
    background: url('../../../maybank_gif/image/dotted-green-4.png') right no-repeat transparent;
    height: 20px;
    position: absolute;
    z-index: 10;
    top: -8px;
    width: 10px;
	left:5px;
}

.meter-dot-green-5 {
    float: right;
    background: url('../../../maybank_gif/image/dotted-green-5.png') right no-repeat transparent;
    height: 20px;
    position: absolute;
    z-index: 10;
    top: -8px;
    width: 10px;
	left:5px;
}



a.tooltips {
    position: relative;
    display: inline;
    color: #FFF;
    font-weight: bold;
    font-size: 12px;
	text-decoration:none !important;
}
a.tooltips span {
    position: absolute;
    width: 200px;
    color: #FFFFFF;
    background: #000000;
    line-height: 20px;
    text-align: center;
    visibility: hidden;
    border-radius: 3px;
    padding: 10px;
    text-align: left;
	text-decoration:none !important;
}
a.tooltips span:after {
    content: '';
    position: absolute;
    top: 100%;
    right: 90%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-top: 8px solid #000000;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
	text-decoration:none !important;
}
a:hover.tooltips span {
    visibility: visible;
    opacity: 0.9;
    bottom: 40px;
    left: 50%;
    margin-left: -16px;
    z-index: 999;
	text-decoration:none !important;
}
.stp-tooltip {
    padding: 0.1em;
    display: inline-block;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
input[type=checkbox]:not(old), input[type=radio ]:not(old) {
    width : 0;
    margin : -8px;
    padding : 0;
    opacity : 0;
}
input[type=radio ]:not(old) + label {
    display : inline-block;
    margin-left : -28px;
    padding-left : 28px;
    background : url('../../../maybank_gif/image/checks.png') no-repeat 0 0;
    line-height : 17px;
    height: 24px;
    padding-top: 3px;
}
input[type=checkbox]:not(old) + label {
    display : inline-block;
    margin-left : -28px;
    padding-left : 28px;
    background : url('../../../maybank_gif/image/checks2.png') no-repeat 0 0;
    line-height : 17px;
    height: 24px;
    padding-top: 3px;
}
input[type=checkbox]:not(old):checked + label {
    background-position : 0 -24px;
}
input[type=radio]:not(old):checked + label {
    background-position : 0 -48px;
}
.stp-table-info {
    font-size: 12px;
 color:# 333;
    border-collapse: collapse;
    width: 100%;
}
.stp-table-info td {
    padding: 14px;
    border: 1px solid #fff;
}
.blue {
    border: 2px solid #1ABC9C;
}
.blue thead {
    background: #1ABC9C;
}
.purple {
    border: 2px solid #9B59B6;
}
.purple thead {
    background: #9B59B6;
}
.stp-table-info thead {
    color: white;
}
.stp-table-info th, td {
    text-align: left;
    padding: 5px 0;
}
.stp-table-info tbody tr:nth-child(even) {
    background: #f8f8f8;
}
.stp-table-info tbody tr:hover {
    background: #BDC3C7;
    color: #FFFFFF;
}
section {
    width: 100%;
    height: 135px;
    margin: auto;
}
div#one {
    width: 220px;
    height: 135px;
    float: left;
}
div#two {
    margin-left: 15%;
    height: 135px;
}
.right_wrap {
    width: 64%;
    float: left;
    margin-left: 15px;
}
.upload-frame {
    padding: 0 30px;
    background: #fcfcfc;
}
#content #sideBar-stp {
    position: absolute;
    top: 420px;
    left: 565px;
    width: 165px;
}
#content #sideBar-stp2 {
    position: absolute;
    top: 47px;
    left: 565px;
    width: 165px;
}
#content #sideBar-stp3 {
    position: absolute;
    top: 280px;
    left: 565px;
    height: auto
}
#content #sideBar-stp4 {
    position: absolute;
    top: 425px;
    left: 565px;
    height: auto
}
.outer-img {
    padding: 1px 3px;
}
/* ======================================================== sideBar items */

#sideBar-stp div.item {
    margin-bottom: 20px;
    line-height: 1.2;
}
#sideBar-stp div.item h3 {
    font-size: 1.2em;
    color: #333;
    margin-bottom: 6px;
}
#sideBar-stp div.item h4 {
    font-size: 1.2em;
    height: 20px;
    margin-bottom: 6px;
}
#sideBar-stp div.item h4.icon {
    font-size: 1.2em;
    padding-left: 20px;
    background-repeat: no-repeat;
}
#sideBar-stp div.item p {
    line-height: 1.3;
    font-size: 1.1em;
}
#sideBar-stp div.item p img {
    float: right;
    margin-left: 5px;
}
#sideBar-stp div.item ul {
    list-style: none;
    font-size: 1.1em;
}
#sideBar-stp div.item ul li {
    line-height: 1.3;
}
/* ======================================================== sideBar items */

#sideBar-stp div.item {
    margin-bottom: 20px;
    line-height: 1.2;
}
#sideBar-stp div.item h3 {
    font-size: 1.2em;
    color: #333;
    margin-bottom: 6px;
}
#sideBar-stp div.item h4 {
    font-size: 1.2em;
    height: 20px;
    margin-bottom: 6px;
}
#sideBar-stp div.item h4.icon {
    font-size: 1.2em;
    padding-left: 20px;
    background-repeat: no-repeat;
}
#sideBar-stp div.item p {
    line-height: 1.3;
    font-size: 1.1em;
}
#sideBar-stp div.item p img {
    float: right;
    margin-left: 5px;
}
#sideBar-stp div.item ul {
    list-style: none;
    font-size: 1.1em;
}
#sideBar-stp div.item ul li {
    line-height: 1.3;
}
.stp-intro-banner {
    width: 97%;
    margin: 10px 5px;
}
.stp-intro-banner2 {
    padding: 10px 10px 0 10px;
}
.stp-yellow {
    background-color: #ffc600;
}
.stp-intro-box {
    background: rgba(245,245,245,1);
    background: -moz-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(245,245,245,1)), color-stop(50%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#ffffff', GradientType=0 );
    -webkit-box-shadow: 0px 0px 5px 0px #e6e6e6;
    -moz-box-shadow: 0px 0px 5px 0px #e6e6e6;
    box-shadow: 0px 0px 5px 0px #e6e6e6;
    border: 1px solid #e6e6e6;
    width: 97%;
    margin: 10px;
	border-radius: 6px;
}
.stp-intro-title {
    background: #ffc500;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    padding-left: 15px;
}
.stp-intro-title2 {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding: 15px;
    color: #1b1b1b;
}
.stp-intro-title3 {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 16px;
    padding: 15px 25px;
    color: #1b1b1b;
}
.stp-intro-box2 {
    text-align: center;
    vertical-align: top;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 15px;
}
.stp-number-button {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 16px;
    padding: 0 5px;
    color: #1b1b1b;
}
/*Expand & Collapse*/

.yellowbar {
    margin: 0;
    padding: 0;
    width: 98%; /*width of menu*/
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.gmenu {
    padding-top: 12px;
}
.yellowbar a.menuitem {
    background: #ffc500;
    font-size: 15px;
    font-weight: bold;
    color: black;
    display: block;
    position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
    height: 40px;
    padding-left: 10px;
    text-decoration: none;
    border: solid 1px #fff;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.yellowbar a.menuitem:visited, .yellowbar .menuitem:active {
    color: #555555;
}
.yellowbar a.menuitem .statusicon { /*CSS for icon image that gets dynamically added to headers*/
    border: 0px;
    position: absolute;
    float: right;
    right: 10px;
    top: 10px;
}
.yellowbar a.menuitem:hover {
    background: #FC0;
}
.yellowbar div.submenu2 { /*DIV that contains each sub menu*/
    font: 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #333;
    padding: 0;
    text-align: left;
    background: #FCFCFC;
}
.yellowbar div.submenu2 ul { /*UL of each sub menu*/
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.yellowbar div.submenu2 ul li {
}
.yellowbar div.submenu2 ul li a {
    font: 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: black;
    text-decoration: underline;
}
.yellowbar div.submenu2 ul li a:hover {
    background: #DFDCCB;
    color: white;
}
.yellowbar div.submenu2 a {
    color: #00F;
    text-decoration: underline;
}
.yellowbar div.submenu2 a:hover {
    text-decoration: underline;
}
.glossymenu {
    margin: 5px 0;
    padding: 0;
    width: 360px;
    background: #f5f5f5;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.glossymenu a.menuitem {
    background: white url(../../../maybank_gif/image/yell01.html) repeat-x bottom left;
    font: bold 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: black;
    display: block;
    position: relative;
    width: auto;
    padding: 14px 0;
    padding-left: 10px;
    text-decoration: none;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 0px 1px 3px #ccc;
    -webkit-box-shadow: 5px 5px 5px #ccc;
    box-shadow: 0px 1px 3px #ccc;
    margin-bottom: 5px;
    text-shadow: 1px 1px 1px #ffe37a;
}
.glossymenu a.menuitem:visited {
    color: #000;
}
.glossymenu .menuitem:active {
    background: white url(../../../maybank_gif/image/yell03.jpg) repeat-x bottom left;
    text-shadow: 1px 1px 1px #1f1f1f;
}
.glossymenu a.menuitem .statusicon {
    position: absolute;
    top: 4px 0;
    right: 5px;
    border: none;
}
.glossymenu a.menuitem:hover {
    background-image: url(../../../maybank_gif/image/yell02.jpg);
    color: #fff;
    text-shadow: 1px 1px 1px #1f1f1f;
}
.glossymenu div.submenu {
    background: #f5f5f5;
    font: 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #3a3a3a;
    margin: 10px 10px;
    text-align: justify;
    padding-bottom: 10px;
}
.glossymenu div.submenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.glossymenu div.submenu ul li {
    list-style-type: none;
    margin-left: 18px;
    color: #333;
    padding-bottom: 5px;
    list-style-image: url(26.html);
    font-size: 11px;
}
.glossymenu div.submenu ul li a {
    display: block;
    font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
    color: black;
    text-decoration: none;
    padding: 2px 0;
    padding-left: 10px;
}
.glossymenu div.submenu ul li a:hover {
    background: #DFDCCB;
    color: white;
}
.main3 {
    width: 170px;
}
.table02 {
    width: 175px;
    height: 230px;
    background-image: url(../../../maybank_gif/image/bgob03.png);
    background-repeat: no-repeat;
    margin-top: -10px;
    margin-left: -2px;
    border: 0;
}
.floatr {
    float: right;
}
.floatl {
    float: left;
}
.left {
    text-align: left;
}
.width90 {
    width: 90%;
    margin: 0 10px;
    padding: 6px 0;
}
.width112 {
    width: 105px;
}
.width58 {
    width: 58px;
}
.bold {
    font-weight: bold;
}
.medium {
    font-size: 14px;
}
.position2 {
    position: relative;
    top: -105px;
    left: 10px;
    text-align: left;
}
.clear {
    clear: both;
}
.bumpright {
    position: relative;
    left: 0px;
    top: -3px;
}
.bumpup {
    margin-top: -5px;
    margin-bottom: 4px;
}
.bumpleft {
    margin-top: 6px;
    line-height: 10px;
}
.t1 {
    font: bold 12px Arial, Verdana, Helvetica, sans-serif;
    letter-spacing: -0.5px;
    color: #115dc3;
    text-decoration: none;
}
.t1:hover {
    color: #900;
    text-decoration: none;
}
.t2 {
    color: #797979;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 11px;
    font-weight: normal;
    text-decoration: none;
    line-height: 10px;
}
.t2:hover {
    text-decoration: none;
}
#t3 {
    font: bold 12px "Trebuchet MS", Arial, sans-serif;
    color: #f9c700;
    text-decoration: none;
    text-shadow: 1px 1px 0px #555555;
    padding-bottom: 4px;
}
#txt {
    color: #797979;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 11px;
    font-weight: normal;
    text-decoration: none;
    line-height: 11px;
    padding-bottom: 5px;
}
#link01 {
    padding-bottom: 2px;
}
#boximg {
    width: 181px;
    height: 70px;
    background-image: url(../../../maybank_gif/image/bgob.html);
    background-repeat: no-repeat;
    background-position: left top;
    margin-bottom: -5px;
    margin-left: -3px;
}
#inside, #aSide {
    display: table-cell;
}
#inside {
    float: left;
    height: 69px;
    position: relative;
}
.txtins {
    width: 123px;
    position: relative;
    font: bold 12px Arial, "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
    color: #000;
    letter-spacing: -0.8px;
    text-shadow: 1px 1px 1px #fff;
    text-decoration: none;
    float: right;
    top: 17px;
}
#txtins2 {
    width: 123px;
    position: relative;
    font: bold 12px Arial, "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
    color: #000;
    letter-spacing: -0.8px;
    text-shadow: 1px 1px 1px #fff;
    text-decoration: none;
    float: right;
    top: 17px;
}
#outer01 {
    width: 175px;
    height: 50px;
    background-image: url(../../../maybank_gif/image/bgob02.png);
    background-repeat: no-repeat;
    margin-left: -2px;
}
#outerico, #txtob01 {
    display: table-cell;
}
#outerico {
    position: relative;
    width: 60px;
    height: 48px;
    top: -3px;
    float: left;
    background-image: url(../../../maybank_gif/image/demo.html);
    background-repeat: no-repeat;
}
#txtob01 {
    width: 110px;
    padding: 5px 0;
    padding-left: 1px;
    float: left;
    position: relative;
}
.ifracc {
    margin-top: -15px;
    margin-left: -2px;
    width: 170px;
}
#content #main #mainColomn #col1st {
    width: 175px;
    float: left;
    border-right: 1px solid #fff;
    min-height: 300px;
    height: auto !important;
    height: 300px;
}
#content #main #mainColomn #col2nd {
    width: 185px;
    float: left;
    border-right: 1px solid #fff;
    min-height: 300px;
    height: auto !important;
    height: 300px;
}
.homeCol h2.bigicon img {
    float: left;
    margin-right: 4px;
    margin-bottom: -20px;
    margin-top: -0px;
}
#col1st ul.homeList {
    list-style: none;
    margin-bottom: 0px;
    clear: both;
}
#col2nd ul.homeList {
    list-style: none;
    margin-bottom: 0px;
    margin-left: 2px;
    clear: both;
}
ul.homeList li {
    width: 180px;
    line-height: 0px;
    font-size: 0px;
    float: none;
}
/**
* @file: highslide.css 
* @version: 4.1.9
*/
.highslide-container div {
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 12px;
    color: #666;
    list-style-position: inside;
    list-style-type: decimal;
    list-style-image: none;
    clear: both;
}
.highslide-container table {
    background: none;
}
.highslide {
    outline: none;
    text-decoration: none;
}
.highslide img {
    border: 2px solid silver;
}
.highslide:hover img {
    border-color: gray;
}
.highslide-active-anchor img {
    visibility: hidden;
}
.highslide-gallery .highslide-active-anchor img {
    border-color: black;
    visibility: visible;
    cursor: default;
}
.highslide-image {
    border-width: 2px;
    border-style: solid;
    border-color: white;
}
.highslide-wrapper, .highslide-outline {
    background: white;
}
.glossy-dark {
    background: #111;
}
.highslide-image-blur {
}
.highslide-number {
    font-weight: bold;
    color: gray;
    font-size: .9em;
}
.highslide-caption {
    display: none;
    font-size: 1em;
    padding: 5px;/*background: white;*/
}
.highslide-heading {
    display: none;
    font-weight: bold;
    margin: 0.4em;
}
.highslide-dimming {
    /*position: absolute;*/
    background: black;
}
a.highslide-full-expand {
    background: url(../../../maybank_gif/image/fullexpand.html) no-repeat;
    display: block;
    margin: 0 10px 10px 0;
    width: 34px;
    height: 34px;
}
.highslide-loading {
    display: block;
    color: black;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    padding: 3px;
    border: 1px solid white;
    background-color: white;
    padding-left: 22px;
    background-image: url(../../../maybank_gif/image/loader.white.html);
    background-repeat: no-repeat;
    background-position: 3px 1px;
}
a.highslide-credits, a.highslide-credits i {
    padding: 2px;
    color: #000;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    background-color: white;
    text-align: left;
}
a.highslide-credits:hover, a.highslide-credits:hover i {
    background-color: white;
}
.highslide-move, .highslide-move * {
    cursor: move;
}
.highslide-viewport {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: none;
    left: 0;
    top: 0;
}
.highslide-overlay {
    display: none;
}
.hidden-container {
    display: none;
}
/* Example of a semitransparent, offset closebutton */
.closebutton {
    position: relative;
    top: -15px;
    left: 15px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background: url(../../../maybank_gif/image/close.html);/* NOTE! For IE6, you also need to update the highslide-ie6.css file. */
}
/*****************************************************************************/
/* Styles for the HTML popups                                                */
/* Remove these if you are not using Highslide HTML                          */
/*****************************************************************************/
.highslide-maincontent {
    display: none;
}
.highslide-html {
    background-color: white;
}
.highslide-html-content {
    display: none;
    width: 400px;
    padding: 0 5px 5px 5px;
}
.highslide-header {
    padding-bottom: 5px;
}
.highslide-header ul {
    margin: 0;
    padding: 0;
    text-align: left;
}
.highslide-header ul li {
    display: inline;
    padding-left: 1em;
}
.highslide-header ul li.highslide-previous, .highslide-header ul li.highslide-next {
    display: none;
}
.highslide-header a {
    font-weight: bold;
    color: gray;
    text-transform: uppercase;
    text-decoration: none;
}
.highslide-header a:hover {
    color: black;
}
.highslide-header .highslide-move a {
    cursor: move;
}
.highslide-footer {
    height: 16px;
}
.highslide-footer .highslide-resize {
    display: block;
    float: right;
    margin-top: 5px;
    height: 11px;
    width: 11px;
    background: url(../../../maybank_gif/image/resize.html) no-repeat;
}
.highslide-footer .highslide-resize span {
    display: none;
}
.highslide-body {
    margin-top: 5px;
    text-align: left;
    margin-left: 5px;
}
.highslide-resize {
    cursor: nw-resize;
}
/*****************************************************************************/
/* Styles for the Individual wrapper class names.                            */
/* See www.highslide.com/ref/hs.wrapperClassName                             */
/* You can safely remove the class name themes you don't use                 */
/*****************************************************************************/

/* hs.wrapperClassName = 'draggable-header' */
.draggable-header .highslide-header {
    height: 18px;
    border-bottom: 1px solid #dddddd;
}
.draggable-header .highslide-heading {
    position: absolute;
    margin: 2px 0.4em;
}
.draggable-header .highslide-header .highslide-move {
    cursor: move;
    display: block;
    height: 16px;
    position: absolute;
    right: 24px;
    top: 0;
    width: 100%;
    z-index: 1;
}
.draggable-header .highslide-header .highslide-move * {
    display: none;
}
.draggable-header .highslide-header .highslide-close {
    position: absolute;
    right: 2px;
    top: 2px;
    z-index: 5;
    padding: 0;
}
.draggable-header .highslide-header .highslide-close a {
    display: block;
    height: 16px;
    width: 16px;
    background-image: url(../../../maybank_gif/image/closeX.html);
}
.draggable-header .highslide-header .highslide-close a:hover {
    background-position: 0 16px;
}
.draggable-header .highslide-header .highslide-close span {
    display: none;
}
.draggable-header .highslide-maincontent {
    padding-top: 1em;
}
/* hs.wrapperClassName = 'titlebar' */
.titlebar .highslide-header {
    height: 18px;
    border-bottom: 1px solid #dddddd;
}
.titlebar .highslide-heading {
    position: absolute;
    width: 90%;
    margin: 1px 0 1px 5px;
    color: #666666;
}
.titlebar .highslide-header .highslide-move {
    cursor: move;
    display: block;
    height: 16px;
    position: absolute;
    right: 24px;
    top: 0;
    width: 100%;
    z-index: 1;
}
.titlebar .highslide-header .highslide-move * {
    display: none;
}
.titlebar .highslide-header li {
    position: relative;
    top: 3px;
    z-index: 2;
    padding: 0 0 0 1em;
}
.titlebar .highslide-maincontent {
    padding-top: 1em;
}
/* hs.wrapperClassName = 'no-footer' */
.no-footer .highslide-footer {
    display: none;
}
/* hs.wrapperClassName = 'wide-border' */
.wide-border {
    background: white;
}
.wide-border .highslide-image {
    border-width: 10px;
}
.wide-border .highslide-caption {
    padding: 0 10px 10px 10px;
}
/* hs.wrapperClassName = 'borderless' */
.borderless .highslide-image {
    border: none;
}
.borderless .highslide-caption {
    border-bottom: 1px solid white;
    border-top: 1px solid white;
    background: silver;
}
/* hs.wrapperClassName = 'outer-glow' */
.outer-glow {
    background: #444;
}
.outer-glow .highslide-image {
    border: 5px solid #444444;
}
.outer-glow .highslide-caption {
    border: 5px solid #444444;
    border-top: none;
    padding: 5px;
    background-color: gray;
}
/* hs.wrapperClassName = 'colored-border' */
.colored-border {
    background: white;
}
.colored-border .highslide-image {
    border: 2px solid green;
}
.colored-border .highslide-caption {
    border: 2px solid green;
    border-top: none;
}
/* hs.wrapperClassName = 'dark' */
.dark {
    background: #111;
}
.dark .highslide-image {
    border-color: black black #202020 black;
    background: gray;
}
.dark .highslide-caption {
    color: white;
    background: #111;
}
.dark .highslide-controls, .dark .highslide-controls ul, .dark .highslide-controls a {
    background-image: url(../../../maybank_gif/image/controlbar-black-border.html);
}
/* hs.wrapperClassName = 'floating-caption' */
.floating-caption .highslide-caption {
    position: absolute;
    padding: 1em 0 0 0;
    background: none;
    color: white;
    border: none;
    font-weight: bold;
}
/* hs.wrapperClassName = 'controls-in-heading' */
.controls-in-heading .highslide-heading {
    color: gray;
    font-weight: bold;
    height: 20px;
    overflow: hidden;
    cursor: default;
    padding: 0 0 0 22px;
    margin: 0;
    background: url(../../../maybank_gif/image/icon.html) no-repeat 0 1px;
}
.controls-in-heading .highslide-controls {
    width: 105px;
    height: 20px;
    position: relative;
    margin: 0;
    top: -23px;
    left: 7px;
    background: none;
}
.controls-in-heading .highslide-controls ul {
    position: static;
    height: 20px;
    background: none;
}
.controls-in-heading .highslide-controls li {
    padding: 0;
}
.controls-in-heading .highslide-controls a {
    background-image: url(../../../maybank_gif/image/controlbar-white-small.html);
    height: 20px;
    width: 20px;
}
.controls-in-heading .highslide-controls .highslide-move {
    display: none;
}
.controls-in-heading .highslide-controls .highslide-previous a {
    background-position: 0 0;
}
.controls-in-heading .highslide-controls .highslide-previous a:hover {
    background-position: 0 -20px;
}
.controls-in-heading .highslide-controls .highslide-previous a.disabled {
    background-position: 0 -40px !important;
}
.controls-in-heading .highslide-controls .highslide-play a {
    background-position: -20px 0;
}
.controls-in-heading .highslide-controls .highslide-play a:hover {
    background-position: -20px -20px;
}
.controls-in-heading .highslide-controls .highslide-play a.disabled {
    background-position: -20px -40px !important;
}
.controls-in-heading .highslide-controls .highslide-pause a {
    background-position: -40px 0;
}
.controls-in-heading .highslide-controls .highslide-pause a:hover {
    background-position: -40px -20px;
}
.controls-in-heading .highslide-controls .highslide-next a {
    background-position: -60px 0;
}
.controls-in-heading .highslide-controls .highslide-next a:hover {
    background-position: -60px -20px;
}
.controls-in-heading .highslide-controls .highslide-next a.disabled {
    background-position: -60px -40px !important;
}
.controls-in-heading .highslide-controls .highslide-full-expand a {
    background-position: -100px 0;
}
.controls-in-heading .highslide-controls .highslide-full-expand a:hover {
    background-position: -100px -20px;
}
.controls-in-heading .highslide-controls .highslide-full-expand a.disabled {
    background-position: -100px -40px !important;
}
.controls-in-heading .highslide-controls .highslide-close a {
    background-position: -120px 0;
}
.controls-in-heading .highslide-controls .highslide-close a:hover {
    background-position: -120px -20px;
}
/*****************************************************************************/
/* Styles for text based controls.                                           */
/* You can safely remove this if you don't use text based controls           */
/*****************************************************************************/

.text-controls .highslide-controls {
    width: auto;
    height: auto;
    margin: 0;
    text-align: left;
    background: none;
}
.text-controls ul {
    position: static;
    background: none;
    height: auto;
    left: 0;
}
.text-controls .highslide-move {
    display: none;
}
.text-controls li {
    background-image: url(../../../maybank_gif/image/controlbar-text-buttons.html);
    background-position: right top !important;
    padding: 0;
    margin-left: 15px;
    display: block;
    width: auto;
}
.text-controls a {
    background: url(../../../maybank_gif/image/controlbar-text-buttons.html) no-repeat;
    background-position: left top !important;
    position: relative;
    left: -10px;
    display: block;
    width: auto;
    height: auto;
    text-decoration: none !important;
}
.text-controls a span {
    background: url(../../../maybank_gif/image/controlbar-text-buttons.html) no-repeat;
    margin: 1px 2px 1px 10px;
    display: block;
    min-width: 4em;
    height: 18px;
    line-height: 18px;
    padding: 1px 0 1px 18px;
    color: #333;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}
.text-controls .highslide-next {
    margin-right: 1em;
}
.text-controls .highslide-full-expand a span {
    min-width: 0;
    margin: 1px 0;
    padding: 1px 0 1px 10px;
}
.text-controls .highslide-close a span {
    min-width: 0;
}
.text-controls a:hover span {
    color: black;
}
.text-controls a.disabled span {
    color: #999;
}
.text-controls .highslide-previous span {
    background-position: 0 -40px;
}
.text-controls .highslide-previous a.disabled {
    background-position: left top !important;
}
.text-controls .highslide-previous a.disabled span {
    background-position: 0 -140px;
}
.text-controls .highslide-play span {
    background-position: 0 -60px;
}
.text-controls .highslide-play a.disabled {
    background-position: left top !important;
}
.text-controls .highslide-play a.disabled span {
    background-position: 0 -160px;
}
.text-controls .highslide-pause span {
    background-position: 0 -80px;
}
.text-controls .highslide-next span {
    background-position: 0 -100px;
}
.text-controls .highslide-next a.disabled {
    background-position: left top !important;
}
.text-controls .highslide-next a.disabled span {
    background-position: 0 -200px;
}
.text-controls .highslide-full-expand span {
    background: none;
}
.text-controls .highslide-full-expand a.disabled {
    background-position: left top !important;
}
.text-controls .highslide-close span {
    background-position: 0 -120px;
}
/*Overlay*/
/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    overflow: hidden;
}
#cboxWrapper {
    max-width: none;
}
#cboxOverlay {
    position: fixed;
    width: 100%;
    height: 100%;
}
#cboxMiddleLeft, #cboxBottomLeft {
    clear: left;
}
#cboxContent {
    position: relative;
}
#cboxLoadedContent {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
#cboxTitle {
    margin: 0;
}
#cboxLoadingOverlay, #cboxLoadingGraphic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
    cursor: pointer;
}
.cboxPhoto {
    float: left;
    margin: auto;
    border: 0;
    display: block;
    max-width: none;
    -ms-interpolation-mode: bicubic;
}
.cboxIframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    padding: 0;
    margin: 0;
}
#colorbox, #cboxContent, #cboxLoadedContent {
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
}
/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay {
    background: #000;
    opacity: 0.5;
    filter: alpha(opacity = 50);
}
#colorbox {
    outline: 0;
}
#cboxTopLeft {
    width: 21px;
    height: 21px;
    background: url(../../../maybank_gif/image/controls.png) no-repeat -101px 0;
}
#cboxTopRight {
    width: 21px;
    height: 21px;
    background: url(../../../maybank_gif/image/controls.png) no-repeat -130px 0;
}
#cboxBottomLeft {
    width: 21px;
    height: 21px;
    background: url(../../../maybank_gif/image/controls.png) no-repeat -101px -29px;
}
#cboxBottomRight {
    width: 21px;
    height: 21px;
    background: url(../../../maybank_gif/image/controls.png) no-repeat -130px -29px;
}
#cboxMiddleLeft {
    width: 21px;
    background: url(../../../maybank_gif/image/controls.png) left top repeat-y;
}
#cboxMiddleRight {
    width: 21px;
    background: url(../../../maybank_gif/image/controls.png) right top repeat-y;
}
#cboxTopCenter {
    height: 21px;
    background: url(../../../maybank_gif/image/border.png) 0 0 repeat-x;
}
#cboxBottomCenter {
    height: 21px;
    background: url(../../../maybank_gif/image/border.png) 0 -29px repeat-x;
}
#cboxContent {
    background: #fcfcfc;
    ;
    overflow: hidden;
}
.cboxIframe {
    background: #fcfcfc;
}
#cboxError {
    padding: 50px;
    border: 1px solid #ccc;
}
#cboxLoadedContent {
    margin-top: 20px;
}
#cboxTitle {
    position: absolute;
    top: 2px;
    left: 0;
    text-align: center;
    width: 100%;
    color: #949494;
}
#cboxCurrent {
    position: absolute;
    bottom: 4px;
    left: 58px;
    color: #949494;
}
#cboxLoadingOverlay {
    background: url(../../../maybank_gif/image/loading_background.png) no-repeat center center;
}
#cboxLoadingGraphic {
    background: url(../../../maybank_gif/image/loading.gif) no-repeat center center;
}
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
    border: 0;
    padding: 0;
    margin: 0;
    overflow: visible;
    width: auto;
    background: none;
}
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {
    outline: 0;
}
#cboxSlideshow {
    position: absolute;
    bottom: 4px;
    right: 30px;
    color: #0092ef;
}
#cboxPrevious {
    position: absolute;
    top: 0;
    left: 0;
    background: url(../../../maybank_gif/image/controls.png) no-repeat -75px 0;
    width: 25px;
    height: 25px;
    text-indent: -9999px;
}
#cboxPrevious:hover {
    background-position: -75px -25px;
}
#cboxNext {
    position: absolute;
    top: 0;
    left: 27px;
    background: url(../../../maybank_gif/image/controls.png) no-repeat -50px 0;
    width: 25px;
    height: 25px;
    text-indent: -9999px;
}
#cboxNext:hover {
    background-position: -50px -25px;
}
#cboxClose {
    position: absolute;
    top: 0;
    right: 0;
    background: url(../../../maybank_gif/image/controls.png) no-repeat -25px 0;
    width: 25px;
    height: 25px;
    text-indent: -9999px;
}
#cboxClose:hover {
    background-position: -25px -25px;
}
/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft, .cboxIE #cboxTopCenter, .cboxIE #cboxTopRight, .cboxIE #cboxBottomLeft, .cboxIE #cboxBottomCenter, .cboxIE #cboxBottomRight, .cboxIE #cboxMiddleLeft, .cboxIE #cboxMiddleRight {
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF);
}
/* range slider */


output {
    display: block;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin: 0 0 20px 0;
    padding: 10px;
    width: 80px;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    color: #3c3c3c !important;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid #ffffff;
    -webkit-box-shadow: 0px 0px 5px 0px #e6e6e6;
    -moz-box-shadow: 0px 0px 5px 0px #e6e6e6;
    box-shadow: 0px 0px 5px 0px #e6e6e6;
	z-index:100;
}
.rangeslider,
.rangeslider__fill {
  background: #e6e6e6;
  display: block;
  height: 20px;
  width: 100%;
  -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.rangeslider {
  position: relative;
}

.rangeslider--disabled {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  opacity: 0.4;
}

.rangeslider__fill {
    background: #00ff00;
    background: rgba(255,197,0,1);
    background: -moz-linear-gradient(left, rgba(255,197,0,1) 0%, rgba(255,47,0,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,197,0,1)), color-stop(100%, rgba(255,47,0,1)));
    background: -webkit-linear-gradient(left, rgba(255,197,0,1) 0%, rgba(255,47,0,1) 100%);
    background: -o-linear-gradient(left, rgba(255,197,0,1) 0%, rgba(255,47,0,1) 100%);
    background: -ms-linear-gradient(left, rgba(255,197,0,1) 0%, rgba(255,47,0,1) 100%);
    background: linear-gradient(to right, rgba(255,197,0,1) 0%, rgba(255,47,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc500', endColorstr='#ff2f00', GradientType=1 );
    position: absolute;
    z-index: 2;
}

.rangeslider__handle {
    cursor: pointer;
    display: inline-block;
    width: 30px;
    height: 30px;
    position: absolute;
    top: -5px;
    z-index: 3;
    background-image: url(../../../maybank_gif/image/handle-stp.png);
    background-position: center;
    background-repeat: no-repeat
}
.rangeSlider__handle:after {
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    top: -5px;
    z-index: 3;
    background-image: url(../../../maybank_gif/image/handle-stp.png);
    background-position: center;
    background-repeat: no-repeat
}
.rangeSlider__handle:active {
    width: 30px;
    height: 30px;
    position: absolute;
    top: -5px;
    z-index: 3;
    background-image: url(../../../maybank_gif/image/handle-stp.png);
    background-position: center;
    background-repeat: no-repeat
}
input[type="range"]:focus + .rangeslider .rangeslider__handle {
  -moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
  -webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
  box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
}
.rangeSlider__buffer {
    z-index: 1;
    position: absolute;
    top: 8px;
    height: 2px;
    background: #747474;
    border-radius: 10px;
}
#range-slider {
    padding: 0 50px 30px 50px;
}
.line {
    background-color: #e4e4e4;
    width: 95%;
	height:1px;
	margin-left:auto;
	margin-right:auto;
}
.line2 {
    border: 1px solid #e4e4e4;
    margin: 0 15px 30px 15px
}
/* boxes */

#wrap {
    width: 100%;
    margin: 0 auto;
}
.box {
    float: left;
    width: 30%;
    height: 330px;
    background: orange;
    border: 2px solid #999;
    margin: 10px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid #ffffff;
    -webkit-box-shadow: 0px 0px 5px 0px #e6e6e6;
    -moz-box-shadow: 0px 0px 5px 0px #e6e6e6;
    box-shadow: 0px 0px 5px 0px #e6e6e6;
    background: rgba(245,245,245,1);
    background: -moz-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(245,245,245,1)), color-stop(50%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#ffffff', GradientType=0 );
    position: relative;
}
.box:hover {
    background: rgba(255,197,0,1);
    background: -moz-linear-gradient(top, rgba(255,197,0,1) 0%, rgba(255,239,0,1) 82%, rgba(255,239,0,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,197,0,1)), color-stop(82%, rgba(255,239,0,1)), color-stop(100%, rgba(255,239,0,1)));
    background: -webkit-linear-gradient(top, rgba(255,197,0,1) 0%, rgba(255,239,0,1) 82%, rgba(255,239,0,1) 100%);
    background: -o-linear-gradient(top, rgba(255,197,0,1) 0%, rgba(255,239,0,1) 82%, rgba(255,239,0,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,197,0,1) 0%, rgba(255,239,0,1) 82%, rgba(255,239,0,1) 100%);
    background: linear-gradient(to bottom, rgba(255,197,0,1) 0%, rgba(255,239,0,1) 82%, rgba(255,239,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc500', endColorstr='#ffef00', GradientType=0 );
}
.box2 {
    float: left;
    width: 30%;
    height: 800px;
    background: orange;
    border: 2px solid red;
    margin: 10px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid #ffffff;
    -webkit-box-shadow: 0px 0px 5px 0px #e6e6e6;
    -moz-box-shadow: 0px 0px 5px 0px #e6e6e6;
    box-shadow: 0px 0px 5px 0px #e6e6e6;
    background: rgba(245,245,245,1);
    background: -moz-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(245,245,245,1)), color-stop(50%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#ffffff', GradientType=0 );
    position: relative;
}
.box3 {
    float: left;
    width: 45.5%;
    height: 250px;
    background: orange;
    border: 2px solid red;
    margin: 10px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid #ffffff;
    -webkit-box-shadow: 0px 0px 5px 0px #e6e6e6;
    -moz-box-shadow: 0px 0px 5px 0px #e6e6e6;
    box-shadow: 0px 0px 5px 0px #e6e6e6;
    background: rgba(245,245,245,1);
    background: -moz-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(245,245,245,1)), color-stop(50%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#ffffff', GradientType=0 );
    position: relative;
}
.box3:hover {
    background: rgba(255,197,0,1);
    background: -moz-linear-gradient(top, rgba(255,197,0,1) 0%, rgba(255,239,0,1) 82%, rgba(255,239,0,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,197,0,1)), color-stop(82%, rgba(255,239,0,1)), color-stop(100%, rgba(255,239,0,1)));
    background: -webkit-linear-gradient(top, rgba(255,197,0,1) 0%, rgba(255,239,0,1) 82%, rgba(255,239,0,1) 100%);
    background: -o-linear-gradient(top, rgba(255,197,0,1) 0%, rgba(255,239,0,1) 82%, rgba(255,239,0,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,197,0,1) 0%, rgba(255,239,0,1) 82%, rgba(255,239,0,1) 100%);
    background: linear-gradient(to bottom, rgba(255,197,0,1) 0%, rgba(255,239,0,1) 82%, rgba(255,239,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc500', endColorstr='#ffef00', GradientType=0 );
}
.checkbox-crd {
    display: block;
    margin-left: 45px;
    margin-top: 5px;
}
.box-img-crd {
    width: 160px;
    height: 110px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}
.box-img-crd2 {
    width: 220px;
    height: 135px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    margin-top: 20px
}
.box-title-crd {
    font-size: 17px;
    font-weight: bold;
    margin: 0 15px;
    text-align: left;
    line-height: 19px;
    height: 60px;
}
.box-title-crd2 {
    font-size: 17px;
    font-weight: bold;
    margin: 0 15px;
    text-align: left;
    line-height: 19px;
    height: 20px;
    color:#333;
}
.box-subtitle-crd {
    font-size: 13px;
    margin: 5px 15px;
    text-align: left;
    color: #5f5f5f;
    line-height: 16px;
}
.box-compare {
    font-size: 13px;
    margin: 5px 15px;
    text-align: left;
    color: #5f5f5f;
    line-height: 16px;
    height: 250px;
    border-bottom: 1px solid #eaeaea;
}
.box-compare-2 {
    font-size: 13px;
    margin: 20px 15px;
    text-align: left;
    color: #5f5f5f;
    line-height: 16px;
}
.box-social-crd {
    font-size: 13px;
    margin: 0 15px 0;
    text-align: left;
    display: block;
    bottom: 10px;
    position: absolute;
    height: 30px;
    width: 100px;
}
.fb-stp {
    float: left;
    margin-right: 5px;
}
.tweet-stp {
    float: left;
    margin-right: 5px;
}
/* sticky */

/* aside */
aside {
    float: left;
    max-width: 170px;
    position: absolute;
    z-index: 2;
	
}
.inside {
    background-color: #f4f4f4;
    padding: 10px;
	}
	
.inside3 {
    background-color: #f4f4f4;
    padding: 10px;
    border: 1px solid #ffffff;
    -webkit-box-shadow: 0px 0px 5px 0px #e6e6e6;
    -moz-box-shadow: 0px 0px 5px 0px #e6e6e6;
    box-shadow: 0px 0px 5px 0px #e6e6e6;
    background: rgba(245,245,245,1);
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;}
	
.inside2 {
    padding: 10px;
    background: none;
	margin-left:10px;
	}

#sidebar.sticky {
    float: none;
    position: fixed;
    top: 150px !important;
    z-index: 6;
    margin-left: 745px;
	
}
#imagedrop {
    width: 80px;
    height: 55px;
    margin:10px auto;
    background-image: url(../../../maybank_gif/image/card-stp-container.png);
    background-position: center;
    background-repeat: no-repeat;
}
.list-benefit-stp {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.list-benefit-stp li {
    background-image: url(../../../maybank_gif/image/tick-stp.png);
    background-repeat: no-repeat;
    background-position: 0px top;
    padding: 0 0 20px 25px;
}

.find-more {
    float: right;
    bottom: 20px;
    font-size: 12px;
    background-image: url("../../../maybank_gif/image/arrow-stp-blue.png");
    background-repeat: no-repeat;
    background-position: 80px 2px;
    width: 90px;
    position: absolute;
    right: 15px;
}

.logo { float:left; display:block; clear: both}
.upload-title { display:block; float:left; }
.bgyellow { background:#FFCC01; color:#000; padding:3px 5px;text-decoration:none;}
.bgyellow a { text-decoration:none;}

.ref-no {
    font-size: 16px;
    font-weight: bold;
    color:#000
}
.title-top { font-size:18px; font-weight:bold;}
#imgChk {
    display: none;
}
#imgChk2 {
    display: none;
}
#imgChk3 {
    display: none;
}
#imgChk4 {
    display: none;
}
#imgChk5 {
    display: none;
}
#imgChk6 {
    display: none;
}
.card1{
    width: 80px;
    height: 55px;
    margin:10px auto;
    background-image: url(../../../maybank_gif/image/stp-img-m2c-premier-s.png);
    background-position: center;
    background-repeat: no-repeat;
}
.card2{
    width: 80px;
    height: 55px;
    margin:10px auto;
    background-image: url(../../../maybank_gif/image/stp-img-visa-signature-s.png);
    background-position: center;
    background-repeat: no-repeat;
}
.card3{
    width: 80px;
    height: 55px;
    margin:10px auto;
    background-image: url(../../../maybank_gif/image/stp-img-visa-infinite-s.png);
    background-position: center;
    background-repeat: no-repeat;
}
.card4{
    width: 80px;
    height: 55px;
    margin:10px auto;
    background-image: url(../../../maybank_gif/image/stp-img-mastercard-plat-s.png);
    background-position: center;
    background-repeat: no-repeat;
}
.card5{
    width: 80px;
    height: 55px;
    margin:10px auto;
    background-image: url(../../../maybank_gif/image/stp-img-amex-plat-s.png);
    background-position: center;
    background-repeat: no-repeat;
}
.card6{
    width: 80px;
    height: 55px;
    margin:10px auto;
    background-image: url(../../../maybank_gif/image/stp-img-visa-plat-s.png);
    background-position: center;
    background-repeat: no-repeat;
}
.insideheight {
	min-height:60px;
    background-image: url(../../../maybank_gif/image/card-stp-container.png);
    background-position: top;
    background-repeat: no-repeat;}
	
a.tooltips2 {
    position: relative;
    display: inline;
    color: #FFF;
    font-weight: bold;
    font-size: 12px;
}
a.tooltips2 span {
    position: absolute;
    min-width: 100px;
	max-width:120px;
    color: #FFFFFF;
    background: #000000;
    line-height: 15px;
    text-align: center;
    visibility: hidden;
    border-radius: 3px;
    padding: 5px 7px;
    text-align: center;
}
a.tooltips2 span:after {
    content: '';
    position: absolute;
    top: 100%;
    right: 50%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-top: 8px solid #000000;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}
a:hover.tooltips2 span {
    visibility: visible;
    opacity: 0.9;
    bottom: 40px;
    left: 10px;
    margin-left: -45px;
    z-index: 999;
}
.close-x {
	right: -330px;
	display: block;
	width: 20px;
	height: 20px;
	top: 0px;
	position: relative;
	top: -52px;
}
.trash {
	position: relative;
  z-index: 5;
  margin-top: -38px;
  right: -10px;
}
.myButton {
	background-color:#c74545;
	-moz-border-radius:42px;
	-webkit-border-radius:42px;
	border-radius:42px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:12px;
	padding:3px 6px;
	text-decoration:none;
}
.myButton:hover {
	background-color:#bd2a2a;
}
.myButton:active {
	position:relative;
	top:1px;
}
.sym {
	position:absolute; 
	font-size:16px; 
	margin-top:-50px; 
	left:335px;
	font-size: 20px;
    font-weight: bold;
}
.value1 {
	width:150px; 
	z-index:9; 
	position:relative; 
	bottom:115px; 
	margin-left:auto;
	margin-right:auto;
	font-size:17px;
	color:#FDCE29;
	display:block;
	text-align:center;}
.bx1 {
	display:block;
	}
		
.confirm-subtitle5 {
    font-size: 20px;
	text-align:center
}
.text-casa {
    font-size: 12px;
    font-weight: lighter;
	text-align:center;
	padding:15px 10px 0 10px;
	line-height:14px;
}
.blueline {
	color:#06C;
	text-decoration:underline;
	font-weight:bold;}
	
	
.print-button {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #444; /* rgba not supported (IE 8) */
    color: rgba(0, 0, 0, 0.80); /* rgba supported */
    border: 1px solid #999;  /*IE 6/7/8*/
    border: none rgba(0, 0, 0, 0);  /*IE9 + everything else*/
    background-color: #fdce2a;
    text-decoration: none;
    border-radius: 4px;
}
.print-button-hover, .print-button:hover, .print-button:focus {
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10)));
    background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
    background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.10));
    background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
    background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
}
.print-button:focus {
    outline: 0;
}
.print-button-active, .print-button:active {
    box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
    border-color: #000\9;
}
.print {
    font-size: 14px;
    padding: 0.5em 0em;
    color: #444; /* rgba not supported (IE 8) */
    text-decoration: none;
	
}

.upload-newtitle {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 15px;
    margin: 10px 0 5px 0;
    color:#333;
    text-align: left
}

.value1-n {
	width:150px; 
	z-index:9; 
	position:relative; 
	bottom:115px; 
	margin-left:100px;
	margin-right:auto;
	font-size:20px;
	color:#222222;
	display:block;
	text-align:left;}

/*.title-status {
	width:180px; 
	z-index:9; 
	position:relative; 
	bottom:110px; 
	margin-left:50px;
	font-size:20px;
	color:#FDCE29;
	display:block;
	text-align:left;}*/
	
.title-status {
    width: 180px;
    z-index: 9;
    position: relative;
    bottom: 120px;
    margin-left: 60px;
    font-size: 17px;
    color: #FDCE29;
    display: block;
    text-align: left;
}	
	
/*.status-value {
	width:180px; 
	z-index:9; 
	position: absolute; 
	bottom:245px; 
	margin-left:50px;
	font-size:16px;
	color:#333;
	display:block;
	text-align:left;
	height:20px}*/

.status-value {
    width: 180px;
    z-index: 9;
    position: absolute;
    bottom: 255px;
    margin-left: 60px;
    font-size: 14px;
    color: #333;
    display: block;
    text-align: left;
    height: 20px;
}

.status-value2{
	width:180px; 
	z-index:9; 
	position: absolute; 
	bottom:245px; 
	margin-left:50px;
	font-size:16px;
	color:#333;
	display:block;
	text-align:left;
	height:20px}

/*Added by venkat to mark the label red when error*/
.fail, .alert, .error {color:#FF0000;}
.my-placeholder { color: #aaa; }

/*Added by madhusudan */
div.tableWrap {padding:0 5px 10px 5px;background:#fff;}
table.tabularData {background:#fff;border:0;border-top:1px dotted #666;border-bottom:1px dotted #666;}
	table.tabularData td {border:0;}
	table.tabularData thead th {background:#333333;color:#eeeeee;}
	table.tabularData tr.header td {background:#ffc;}
	table.tabularData th, table.tabularData td {padding:5px;}
	table.tabularData th {font-weight:bold;}
	table.tabularData .account {}
	table.tabularData .balance {width:90px;text-align:center;}
		table.tabularData th.balance span {display:block;}
	table.tabularData .select {width:150px;}
	table.tabularData th.select span {padding-left:10px;}
		table.tabularData .select form.quickLink p {text-align:right;}
		table.tabularData .select form.quickLink select {width:139px;font-size:11px;}
			table.tabularData .select form.quickLink select option {width:150px;}
		table.tabularData .select form.quickLink input.go {cursor:pointer;margin-top:3px;font-size:11px;}
	table.tabularData td h3 {font-size:12px;}
	
table.tabularDataFloat {background:#ffc;border-top:1px dotted #666;padding:10px 5px 15px;}
	table.tabularDataFloat td.floatDetails {font-size:14px;padding-bottom:5px;}
		table.tabularDataFloat td.floatDetails span {padding-left:10px;}
	table.tabularDataFloat td.floatShowHide {text-align:right;}
	table.tabularDataFloat td.right {padding-right:5px;}
table.tabularDataTransfers {background:#fff;border-top:1px dotted #666;}
	table.tabularDataMenu td {border-bottom:1px dotted #666;width:25%;}
		table.tabularDataMenu td a {display:block;padding:5px 10px;}
		table.tabularDataMenu td a:hover {background:#ffc;}
			table.tabularDataMenu td strong {font-size:14px;display:block;margin-bottom:5px;}
			table.tabularDataMenu td em {font-style:normal;display:block;margin-bottom:10px;}
			table.tabularDataMenu td span {color:#333;}
table.tabularDataCheque tbody td {background:#ffc;border-top:1px dotted #666;border-bottom:1px dotted #666;padding:20px 5px;}
table.tabularDataStatus {border-top:1px dotted #666;}
	table.tabularDataStatus td {border-bottom:1px dotted #666;padding:20px 5px;}
table.tabularDataEdit {background:#ffc;border-top:1px dotted #666;padding:10px 0;}
	table.tabularDataEdit td {padding:0 5px;}

table.tabularData tr.even td ol, table.tabularData tr.alt td ol {margin:10px 0 10px 35px;list-style-type:decimal;}
table.tabularData tr.even td ul, table.tabularData tr.alt td ul {margin:10px 0 10px 35px;list-style-type:square;}

tr.padding td {padding:20px 5px;}
tr.paddingTop td {padding-top:20px;}
tr.paddingBottom td {padding-bottom:20px;}
tr.bt td {border-top:1px dotted #666;}
tr.bb td {border-bottom:1px dotted #666;}
td.note i {background:#333;color:#fff;font-weight:bold;font-style:normal;padding:0 5px;}
div.tableWrap p.submit {text-align:right;padding:20px 5px;}

/* end by madhusudan */
	
.box-compare-2 ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.box-compare-2 li {
    background-image: url(../../../maybank_gif/image/tick-stp.png);
    background-repeat: no-repeat;
    background-position: 0px top;
    padding: 0 0 20px 25px;
}

/* Add by jet */

.open-ex { /*class added to contents of 2nd demo when they are open*/
background-image:url("../../../maybank_gif/image/minus.png") !important;
background-repeat: no-repeat !important;
background-position: 98% center !important;
}

.closed-ex { /*class added to contents of 2nd demo when they are closed*/
background-image: url("../../../maybank_gif/image/plus.png") !important;
background-repeat: no-repeat !important;
background-position: 98% center !important;
}

option { border-right:2px solid #bebebe;}

.more-new {
    display: block;
    bottom: 15px;
    position: absolute;
}

.bottom-bar3 {
    height: 80px;
    display: block;
    position: static;
    margin-right: 120px;
}

#disable-select {
    /* Normalizes the height; padding is not sufficient. */
    height: 3.25em;
    border: 1px solid #ccc;
    background-image: none;
    overflow: hidden;
    padding: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-appearance: button;
}

.status-value2-new {
    width: 180px;
    z-index: 9;
    /* position: absolute; */
    /* top: 330px; */
    margin-left: 50px;
    font-size: 16px;
    color: #333;
    display: block;
    text-align: left;
    height: 20px;
    margin-bottom: 60px;
    margin-top: -100px;
}
	
.bx1-new {
	display:block;
	margin-left:50px;
	}