Z-Archive » Maybank Projects » M2U UPASS Project

/* resets */

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

margin:0;padding:0;border:0;outline:0;

vertical-align:baseline;

}

h2 {font-family:Arial;line-height:normal;text-align:left;color:#8B3E2F;background:#fff;}

ol, ul {list-style:none;}

table {border-collapse:separate;border-spacing:0;}

caption, th, td {text-align:left;font-weight:normal;}

a {text-decoration:none;color:blue;}

big {font-size:13px;color:#666;}

small {font-size:11px;color:#666;}

/* reusable classes */

.floatLeft {float:left;margin-right:5px;}

.floatRight {float:right;margin-left:5px;}

.right {text-align:right;}

.justify {text-align:justify}

input.button {cursor:pointer;}

input.transparent {background:transparent;color:blue;border:0;padding:0;font-size:12px;}

input.fullWidth {width:95%;}

select.fullWidth {width:90%;}

.success {color:green;font-size:13px;}

.fail, .alert, .error {color:#FF0000;}

span.label {width:100px;display:block;float:left;}

p.option {margin:5px 0;}

        p.option select {width:100%;}

.highlight {background:#000;color:#FFFFFF;font-weight:bold;font-style:normal;padding:2px 5px;}

.required {color:#FF0000;font-weight:bold;}

.red {color:#FF0000;}

.valignTop {vertical-align:top;}

input, textarea, select {margin:0 auto !important;} /* overright blueprint css method */

textarea{width:300px; height:100px;}

#h5.breadCrumb{background-color:#f1f1ee;padding:4px;}

#h5.breadCrumb a{text-decoration:none;color:#666;}

/* button */

#buttons {text-align:right;direction:rtl}

        #buttons #flowright {float:right;}

/* layout */

body {font-size:12px;font-family:Arial,sans-serif;line-height:normal;text-align:left;color:#000;background:#f1f1ee url(../images/background.jpg) repeat-x top ;}

.container{

                        background:#fff url(../images/bottomFade.jpg) bottom left repeat-x;

                        padding:0 40px 100px 40px;

                }

div.banner{

                        background-image:url(../images/background.jpg) top;

                        width:1000px;

                        height:140px;

                        padding:10px 10px 0 10px;

                        margin:0 auto;

                }

h3.mainTitle{

                        font-family:Helvetica, sans-serif;

                        font-size:25px;

                        color: #fff;

                        margin:15px 0 0 50px !important;

                        position:absolute;

                }

h3.title{color:#8B814C}

div.welcomeUser{padding-left:10px;color:#888;border: 1px solid red;}

div.logout{text-align:right;}

div.content{margin-top:30px;background-color:#ddd;}

div.mainContent{}

div.red{background-color:red;}

/* Display steps for each module */

.stepTable{}

#steps {padding:0px;margin:10px 0 7px 0;font-weight:bold;text-align:right;display:block;}

        #steps span {border-bottom:1px solid #e48f00;border-right:1px solid #e48f00;background-color:#f49900;padding:5px 5px 5px 5px; color:#000;}

#navigation {color:#000;position:relative;font-size:11px;}

        #navigation ol#mainNav {list-style:none;}

                #navigation ol#mainNav li {float:left;margin-right:3px;}

                        #navigation ol#mainNav li a {float:left;padding:5px;

                                background:url(../images/navShadow.jpg) top right repeat-x;

                                border-top:1px solid #ccc;

                                border-left:1px solid #ccc;

                                border-bottom:1px solid #ccc;

                                border-right:1px solid #ccc;color:#666;}

                        #navigation ol#mainNav li a:hover {background:url("../images/navSelected.jpg");color:#000;}

        .topLinkSelected a{color:#fff !important;font-weight: bold;background:#ff0001 url(../images/navRed.jpg) top right repeat-x !important;}

        #navigation ol#mainNav li.mNavLast {float:left;padding:5px;width:70px;

                        border-top:1px solid #ccc;

                        border-left:1px solid #ccc;

                        border-bottom:1px solid #ccc;

                        border-right:1px solid #ccc;}

/* tab navigation */

#tabNavi {color:#fff;position:relative;font-size:11px;}

        #tabNavi ol#mainNav {list-style:none;}

                #tabNavi ol#mainNav li {float:left;margin-right:3px;margin-bottom:-1px;z-index: 100;}

                        #tabNavi ol#mainNav li a {float:left;padding:5px;

                                background-color:#cccccc;

                                border-top:1px solid #ccc;

                                border-left:1px solid #ccc;

                                border-right:1px solid #ccc;color:#000;}

                        #tabNavi ol#mainNav li a:hover {background:#f49900;color:#000;}

                        #tabNavi ol#mainNav li.tabSelected a {

                                                                                        border-top:1px solid #cccccc !important;

                                                                                        border-left:1px solid #cccccc !important;

                                                                                        border-right:1px solid #cccccc !important;

                                                                                        background:#fafafa !important;

                                                                                        color:#000 !important;

                                                                                        }

#tabBody{ border:1px solid #cccccc; padding:10px 10px 30px 10px !important; background-color:#fafafa;}

body.mNav0 li.mNav0 a,   /* newly added */

body.mNav1 li.mNav1 a, body.mNav2 li.mNav2 a, body.mNav3 li.mNav3 a,

body.mNav4 li.mNav4 a, body.mNav5 li.mNav5 a, body.mNav6 li.mNav6 a,

body.mNav7 li.mNav7 a, body.xNav8 li.xNav8 a

{background:gold !important;color:#000 !important;border:1px solid #f0c400 !important;}

/* Navigation (sdmenu) */

div.sdmenu ul li a {font-size:12px;padding:5px 9px 5px 12px;cursor:pointer;margin-left:10px;}

ul#navigation, ul#navigation ul {

        list-style-type:none;

        margin: 0;

        padding: 0;

        width: 180px;

}

ul#navigation a {

        display: block;

        text-decoration: none;

}

ul#navigation li {

        margin-top: 1px;

}

ul#navigation li a {

        background: url(../images/navMain.jpg) top right repeat-x;

        color: #000;

        border:1px solid #aaa;

}

ul#navigation li a:hover,

ul#navigation li a.selected {

        background: url(../images/navMainSelected.jpg) top right repeat-x;

        color: #fff;

}

ul#navigation li ul.submenu li { }

ul#navigation li ul.submenu li a {

        background: url(../images/navShadow.jpg) top right repeat-x;

        /*background: #fdf5cc;*/

        border:1px solid #eee;

        color: #666666;

        display: block;

        height: auto;

        padding: 5px 5px 5px 10px;

}

ul#navigation li ul.submenu li a:hover{background:#f49900;}

ul#navigation li ul.submenu li a.selected {

        background:#f49900; /* background: url(../images/navSelected.jpg) top right repeat-x;

        background: #fdf5cc; */

        color: #000000;

}

/* side navigation matrix */

body.sLink1 li.sLink1 a, body.sLink2 li.sLink2 a, body.sLink3 li.sLink3 a,

body.sLink4 li.sLink4 a, body.sLink5 li.sLink5 a, body.sLink6 li.sLink6 a,

body.sLink7 li.sLink7 a, body.sLink8 li.sLink8 a, body.sLink9 li.sLink9 a,

body.sLink10 li.sLink10 a, body.sLink11 li.sLink11 a, body.sLink12 li.sLink12 a,

body.sLink13 li.sLink13 a, body.sLink14 li.sLink14 a, body.sLink15 li.sLink15 a,

body.sLink16 li.sLink16 a, body.sLink17 li.sLink17 a, body.sLink18 li.sLink18 a,

body.sLink19 li.sLink19 a, body.sLink20 li.sLink20 a, body.sLink21 li.sLink21 a,

body.sLink22 li.sLink22 a, body.sLink23 li.sLink23 a, body.sLink24 li.sLink24 a,

body.sLink25 li.sLink25 a, body.sLink26 li.sLink26 a, body.sLink27 li.sLink27 a,

body.sLink28 li.sLink28 a, body.sLink29 li.sLink29 a, body.sLink30 li.sLink30 a,

body.sLink31 li.sLink31 a, body.sLink32 li.sLink32 a, body.sLink33 li.sLink33 a,

body.sLink34 li.sLink34 a, body.sLink35 li.sLink35 a, body.sLink36 li.sLink36 a,

body.sLink37 li.sLink37 a, body.sLink38 li.sLink38 a

{color:white !important;margin-right:-1px;margin-left:10px;border-right:1px solid #fff;font-weight:bold;background-color:#cf0000 !important;background:url(../images/selected.png) center right no-repeat;}

a strong {color:#01663e;}

h3.welcome {font-size:14px;margin-bottom:10px;}

p.lastLogin {font-weight:bold;font-size:11px;}

h3.head {font-size:14px;padding:10px 5px;}

h4.subHead {font-size:12px;padding:0 5px;}

p.explanation {margin:0 5px 10px;}

ul.tableLink {list-style:none;margin:0 0 10px 5px;}

        ul.tableLink li {display:inline;margin-right:5px;}

blockquote.note {background:#FBF5E6;border:1px solid #CD3333;margin:10px;width:679px;padding:5px;}

blockquote.note table{width:682px;}

        blockquote.note ul {list-style-type:disc;list-style-position:outside;}

        blockquote.note ol {list-style-type:decimal;list-style-position:outside;}

                blockquote.note li {margin-left:15px;}

dl.defList {}

        dl.defList dt {font-weight:bold;}

        dl.defList dd {}

ul.list {margin:5px 0;}

table tr.even td,table tr.even th{background:#fff;}

table tr.alt {background:#eee;}

table tr.borderTop td {border-top:1px double #666;}

table tr.borderBottom td {border-bottom:1px double #666;}

table td.valignBottom {vertical-align:bottom;}

table.tabularData {background-color:#de0000;border:1px solid #CDC9A5;margin:10px 0 10px 0;}

        table.tabularData thead th,table.tabularData thead tr{background-color:#f49900;color:#000 !important;}

        table.tabularData tr.header {background-color:black;}

        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;}

        table.tabularData td h3 {font-size:12px;}

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;}

div.tableWrap p.submit {text-align:right;padding:20px 5px;}

table.tabularForm{width:100%;margin:10px 0 10px 0;padding:5px;background:#f1f1ee url(../images/formBg.jpg) top left repeat-x;}

        table.tabularForm td {padding:3px;}

        table.tabularForm tr td {padding:3px !important;margin:1px !important;}

.btnToLink{

        border:0;background-color:transparent;color:blue;

}

.btnToLink:HOVER{

        cursor: pointer;color:black;

}

ul.treeHierarchy, ul.treeHierarchy ul { list-style-type: none; background: url(../images/treeLine.png) repeat-y; margin: 0; padding: 0; }

ul.treeHierarchy ul { margin-left: 6px; }

ul.treeHierarchy li { margin: 0; padding: 0 12px; line-height: 22px; background: url(../images/treeCrossLine.png) no-repeat;}

ul.treeHierarchy li.lastLine {background:#f1f1ee url(../images/treeLastLine.png) no-repeat;}

.securityMsg {padding:0 20px;color:#707070;margin: 0 auto;font-family:Arial, Helvetica, sans-serif;}

#footer {vertical-align:bottom;height:141px;font-size:11px;color:#FFFFFF;background:url(../images/footer.gif);}

#footer a{color:#FFFFFF;}

/* clearfix */

.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}

.clearfix {display:inline-table;min-height:1%;}

/* Hides from IE-mac \*/

* html .clearfix {height:1%;} .clearfix {display:block;}

/* End hide from IE-mac */

div.overlay {

 max-width:988px;

 min-width:760px;

 position:absolute;

 background-color: transparent;

/* opacity:0.75;*/

 z-index:100;

}

div.overlayBox

{

 position:fixed;

 z-index:99;

 visibility:hidden;

 width:400px;

}

div.overlayBox p

{

 text-align: center;

 padding: 20px;

 font-size: 18px;

}

/*paging*/

ul.previousNext {list-style:none;padding:10px 0;text-align:right;}

ul.previousNext li {display:inline;}

#errorTable {margin:8px 0px 0px 8px;}

/* CSS for Tabs */

.shadetabs{

padding: 3px 0;

margin-left: 10px;

margin-top: 12px;

margin-bottom: 0;

font-family: Arial, Helvetica, sans-serif;

font-size: 11px;

font-weight: bold;

list-style-type: none;

text-align: left; /*set to left, center, or right to align the menu as desired*/

}

.shadetabs li{

display: inline;

margin: 0;

}

.shadetabs li a{

text-decoration: none;

padding: 3px 7px;

margin-right: 3px;

border: 1px solid #778;

color: #2d2b2b;

background: white url(shade.gif) top left repeat-x;

}

.shadetabs li a:visited{

color: #2d2b2b;

}

.shadetabs li a:hover{

text-decoration: underline;

color: #2d2b2b;

}

.shadetabs li.selected{

position: relative;

top: 1px;

}

.shadetabs li.selected a{ /*selected main tab style */

background-image: url(shadeactive.gif);

border-bottom-color: white;

}

.shadetabs li.selected a:hover{ /*selected main tab style */

text-decoration: none;

}

.contentstyle{

border-top: 1px solid gray;

width: 690px;

margin-left: 10px;

padding: 1px;

}

/*passwordStrength*/

.textColor0

{

}

.textColor1

{

        color:#ff0000;

}

.textColor2

{

        color:#ff5f5f;

}

.textColor3

{

        color:#56e500;

}

.textColor4

{

        color:#4dcd00;

}

.textColor5

{

        color:#399800;

        font-size: 11px;

}

.strength0

{

        width:0px;

}

.strength1

{

        width:30px;

        background:#ff0000;

}

.strength2

{

        width:60px;

        background:#ff5f5f;

}

.strength3

{

        width:90px;

        background:#56e500;

}

.strength4

{

        background:#4dcd00;

        width:120px;

}

.strength5

{

        background:#399800;

        width:165px;

}