// Model // ------------------------------ ------------------------------- // --------------------------- language bar ---------------------------- // ---------------------------- container ------------------------------ // ------------------------------ top -------------------------------- // ----------------------------- banner ------------------------------ // ---------------------------- main-body ---------------------------- // ---------------------- main ----------------------- --- right --- // -------------------- header --------------------- // ----- header-title ----- ---- header-step ---- // ---------------- main-content ---------------- @page-width: 939px; @content-width: 919px; @main-width: 657px; @header-title-width: 435px; @header-height: 46px; @header-step-width: @main-width - @header-title-width; .dotted-link { a { color: #333; border-bottom: 1px dotted #333; text-decoration: none; } a:hover { color: #E21A03; border-bottom: none; text-decoration: underline; } } .dotted-link { a.disabled, a.disabled:hover { color: #ccc; border:0px; text-decoration:none; cursor:wait; } } .display-inline-block { display: inline-block; zoom: 1; // IE hack to trigger hasLayout *display: inline; // IE hack to achieve inline-block behavior } * { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box } body, textarea { font-family: Arial,PMingLiU,Helvetica,sans-serif; font-size:12px; resize: none; } body.lang-tc, .lang-tc { font-family: PMingLiU, Helvetica, sans-serif; } textbox { resize: none; } .textbox-disabled { background-color:#dedede;} #language-bar { padding:10px; width:@page-width; height:30px; } #switch-lang { float:right; background: url(lang.gif) no-repeat; } #switch-lang img { width: 150px; height: 14px; border:none; } #container { border: 1px solid #ccc; padding:10px; width:@page-width; background: url(prof-integrity-en.gif) no-repeat right bottom; } .lang-tc #container { background: url(prof-integrity-tc.gif) no-repeat right bottom; } #top { width:@content-width; height:60px; background: url(ebsi-logo.gif) no-repeat -10px 0px; } #banner { width:@content-width; height:185px; background: url(banner-en.jpg) no-repeat; margin-bottom: 10px;} .lang-tc #banner { background-image:url(banner-tc.jpg) } #main-body { width:@content-width; } #main { width:@main-width; float:left; } #header { height:@header-height; } #header-title { width:@header-title-width; height:@header-height; float:left; background: url(header-en.png) no-repeat } .lang-tc #header-title { background-image: url(header-tc.jpg); } #header-step div { width:@header-step-width; height:@header-height; float:right; background: url(header-step-en.jpg) no-repeat; } .lang-tc #header-step div { background-image: url(header-step-tc.jpg) ; } #header-step.step1 div { background-position:0 0; } #header-step.step2 div { background-position:-@header-step-width 0; } #header-step.step3 div { background-position:-@header-step-width*2 0; } #right { width:252px; float:right; border:1px solid #ccc; padding:10px; background:url(right-bg.jpg); } #right-needhelp { font-size:16pt; padding:5px 0px 10px 0px; } #right-hotline { font-size:18pt; color:#e21a03; padding:10px 0px 5px 40px; background: url(icon-phone.gif) no-repeat 0px 10px; font-family: Arial;} #right-fax { padding:5px 0px 0px 0px; } #right-email { padding:5px 0px; } #right-email a { color:#999; } #right-email a:hover, a:active { color:#E21A03; } .right-sep { margin: 5px 0px 10px 0px; hr { color:#ccc; height:1px; border-width:1px 0px 0px 0px; border-style: thin; } } .right-label { display: inline-block; width:60px; } #right-download { border:1px solid #aaa; padding:10px; background:#ebebeb; } .right-download-title { font-weight: bold; padding:0px 5px 5px 0px; } .right-download-file { padding-left:24px; background:url(icon-pdf.gif) no-repeat 0px 2px; } .right-download-file { .dotted-link } #bottom { clear:both; height: 40px; width:100%; padding-top:20px; } #bottom-disclaimer { float:left; } #bottom-disclaimer a { color:black; text-decoration:none; } #bottom-copyright { margin:0px auto; width:600px; text-align:center; } .ui-widget-overlay { background:#333; opacity:0.9; } .button-l { float:left; width:7px; height:19px; background-position:top left; background-repeat: no-repeat; } .left-button .button-l { width:16px; cursor: pointer; } .button-c { float:left; height:19px; padding:2px; background-position: -7 0; background-repeat: no-repeat; text-decoration:none; color:white; font-weight:bold; cursor:pointer; a, a:active { color:white; } } .lang-tc .button-c { padding-top:4px \9; } .button-r { float:left; width:7px; height:19px; background-position:top right; background-repeat: no-repeat; } .right-button .button-r { width:16px; cursor: pointer; } .button-container { float:left; outline:none; } .grey-button { .button-container; } .grey-button .button-l, .grey-button .button-c, .grey-button .button-r { background-image: url(grey-button.gif); } .grey-button .button-c { color: #e5e5e5; a, a:active, a:hover {color: #e5e5e5;}} .red-button { .button-container; } .red-button .button-l, .red-button .button-c, .red-button .button-r { background-image: url(red-button.gif); } .black-button { .button-container; } .black-button .button-l, .black-button .button-c, .black-button .button-r { background-image: url(black-button.gif); } .red-button.disabled .button-l, .black-button.disabled .button-l { .grey-button .button-l; } .red-button.disabled .button-c, .black-button.disabled .button-c { .grey-button .button-c; } .red-button.disabled .button-c a, .black-button.disabled .button-c a { cursor: default; } .red-button.disabled .button-r, .black-button.disabled .button-r { .grey-button .button-r; } .left-button.red-button .button-l { background-image: url(red-btn-left-arrow.gif); } .left-button.grey-button .button-l { background-image: url(grey-btn-left-arrow.gif); cursor: default; } .left-button.black-button .button-l { background-image: url(black-btn-left-arrow.gif); } .left-button.red-button.disabled .button-l { .left-button.grey-button .button-l; } .left-button.grey-button.disabled .button-l { .left-button.grey-button .button-l; } .left-button.black-button.disabled .button-l { .left-button.grey-button .button-l; } .right-button.red-button .button-r { background-image: url(red-btn-right-arrow.gif); } .right-button.grey-button .button-r { background-image: url(grey-btn-right-arrow.gif); cursor: default; } .right-button.black-button .button-r { background-image: url(black-btn-right-arrow.gif); } .right-button.red-button.disabled .button-r { .right-button.grey-button .button-r; } .right-button.grey-button.disabled .button-r { .right-button.grey-button .button-r; } .right-button.black-button.disabled .button-r { .right-button.grey-button .button-r; } // center align a div .center-align { clear:both; float:none; .display-inline-block; } #main-content span.label { font-weight:bold; } .content-body { background:#ebebeb; padding:15px; } .row { background:url(row-bg.jpg); padding:5px; } .row span { margin-left: 10px; } input.text-input { overflow-y:visible; padding:5px; border:1px solid #aaa; outline:none; } input.required { background:#feeded; } .error-msg { color:#e21a03; } .content-msg { padding-top: 0px; ul { margin: 0px 5px; } li { padding: 2px; } a { color: #333333; } a:hover { color: #e21a03; } } label, input[type='radio'], input[type='checkbox'] { vertical-align: middle; } input[type='checkbox'], input.checkbox-input { margin: 0px 5px 0px 0px; } @nav-button-top-margin: 10px; .wp7-loading { width: 316px; height:9px; background:url(wait-indicator.gif) no-repeat; .center-align; } .nav-button-row { text-align:center; width: 100%; float:left; margin-top: @nav-button-top-margin; } .nav-button { margin-top: -14px; } .loading { float: left; width: 100%; margin-top: 5px; } // gogreen specific #step-acct { span.label { display: inline-block; width:130px; } input.text-input { width:320px; } #acct-more { color:#e21a03; text-decoration:none; padding-left:8px; background: url(icon-arrow.gif) no-repeat 0px 3px; } #acct-more:hover { text-decoration:underline; } //#btn-acct-next { float:right; margin-top: @nav-button-top-margin; } #acct-row1 span { .dotted-link; a, a:hover {cursor: help; }} #btn-acct-next { .nav-button; float:right; } } .acct-locate-dialog { border: 1px solid #cc0000; border-radius:0px; padding:0px; overflow:idden; .ui-dialog-content { background-image:url(acct-locate-dialog-bg-en.png); padding:0px;} .dialog-tips { width:310px; height:73px; margin-top:85px; margin-left:362px; padding:1px; background:#E10915; color: #fff; vertial-align:middle; } .ui-widget-header { border:0px; background:#cc0000; background-image:url(dialog-header-bg.gif); background-repeat:repeat-x; font-size:14px; font-weight: bold; line-height:1.4em; } .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon-closethick { background-color:#cc0000; background-image:url(dialog-header-icon-close.gif); background-repeat:no-repeat; background-position:0px 0px; display:block; text-indent:-99999px; overflow: hidden; } .ui-state-hover, .ui-widget-content .ui-state-hover{ background:transparent; border:none; padding:0px; margin:-9px -1px 0px 0px; } .ui-corner-all { border-radius:0; } } #step-sendpin { span.label { display: inline-block; width:60px; margin-left:0px;} input.text-input { width:180px; } //#btn-sendpin-prev { margin-top: @nav-button-top-margin; } //#btn-sendpin-next { float:right; margin-top: @nav-button-top-margin; } #btn-sendpin-prev { .nav-button; } #btn-sendpin-next { .nav-button; float:right; } } .lang-tc #step-sendpin { span.label { width:80px;} } #step-verpin { span.label { display: inline-block; width:100px;} input.text-input { width:60px; } //#btn-verpin-prev { margin-top: @nav-button-top-margin; } //#btn-verpin-next { float:right; margin-top: @nav-button-top-margin; } #btn-verpin-prev { .nav-button; } #btn-verpin-next { .nav-button; float:right; } .resend-link { .dotted-link; } } .lang-tc #step-verpin { span.label { width:60px; } } #step-summary { background: #eee; border: 1px solid #ccc; } #step-summary { padding: 10px; .content-body, .content-msg { padding-left: 0px; padding-right: 0px; } .summary-row { padding: 5px 0px; span.label { display: inline-block; width:160px; } input.text-input { width:320px; padding:3px; margin:-4px 0px; } span.watermark{ color:#BDBDBD; } } .summary-row-change-email { padding-left: 160px; height: 30px; } .summary-changing-section { .summary-changing-section-button-row { margin-left: 160px; height: 30px; } .red-button { margin-left: 10px; } } .summary-acct { border: 1px solid #aaa; margin:10px 0px; padding:10px; background:white; } .summary-title { color:#e21a03; font-size: 10pt; font-weight:bold; margin-bottom:5px; padding-bottom:10px; border-bottom: 1px solid #ccc; } #summary-disclaimer { width: 100%; height: 100px; border: 1px solid #ccc; background: #fff; overflow-x:hidden; overflow-y:auto; padding: 5px; line-height: 1.4; p { margin: 6px 0px; } p.update-date { text-align: right; } } #btn-summary-accept-disclaimer { float: left; } #summary-accept-disclaimer-text { display: block; margin-left: 20px; } #summary-nav-button-row { text-align:center; width:90%; float:left; margin-top: @nav-button-top-margin * 2; } #btn-summary-prev, #btn-summary-next { .center-align; margin-left: 10px; } } #step-thankyou { background: #eee; border: 1px solid #ccc; padding: 10px; #thankyou-text { border: 1px solid #aaa; padding:10px; background:white; color:#333333; height:185px;} }