/* Nautralization */ body { background-color: #f8f4f1; padding: 0; margin: 0; -ms-overflow-style: scrollbar; font-size: 13px; line-height: 1.2; } body > .fixed_width { width: 1260px; margin: 0 auto; } body.medium { font-size: 15px; line-height: 1.3; } body.large { font-size: 17px; line-height: 1.4; } body.large .btn_font_fix, body.medium .btn_font_fix, .btnsubmit{ font-size: 15px; } body.large input[type="button"], body.large input[type="submit"], body.medium input[type="button"], body.medium input[type="submit"]{ font-size: 15px; } body.large .button-large, body.medium .button-large{ font-size: 15px; } h1, h2, h3, h4, h5, h6 { margin: 0; margin-bottom: 20px; } p { margin: 0; margin-bottom: 10px; } h2:not(.no-padding), .h2:not(.no-padding), .faq-answer { margin-top: -100px; padding-top: 100px; } .submit_mask{ background: grey; z-index: 2147483647; position: fixed; width: 100%; top: 0px; left: 0px; display: block; height: 1000px; opacity: 0.7; } .submit_mask_msg{ z-index: 2147483647; position: fixed; width: 100%; top: calc(50% - 20px); font-size: 2em; text-align: center; } body > .flexible_width { width: 1260px; margin: 0 auto; } body > .flexible_width + footer .footer-wrapper { min-width: 1260px; } body.medium > .flexible_width { width: 1440px; margin: 0 auto; } body.medium > .flexible_width + footer .footer-wrapper { min-width: 1440px; } body.large > .flexible_width { width: 1600px; margin: 0 auto; } body.large > .flexible_width + footer .footer-wrapper { min-width: 1600px; } /* Fonts*/ /* is required! */ /*@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url(fonts/montserrat-400.eot); src: local('Montserrat-Regular'), url(fonts/montserrat-400.eot) format('embedded-opentype'), url(fonts/montserrat-400.woff) format('woff'); }*/ @font-face { font-family: 'FBL-nav'; src: url(data:x-font-otf;base64,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); font-weight: 400; } @font-face { font-family: 'noto-sans-en'; src: url("/fonts/NotoSans-Regular.woff2") format("woff2"), url("/fonts/NotoSans-Regular.woff") format("woff"), url("/fonts/NotoSans-Regular.ttf") format("truetype"); font-weight: 400; } @font-face { font-family: 'noto-sans-tc'; src: url("/fonts/NotoSansCJKtc-Regular.woff2") format("woff2"), url("/fonts/NotoSansCJKtc-Regular.woff") format("woff"), url("/fonts/NotoSansCJKtc-Regular.otf") format("opentype"); font-weight: 400; } @font-face { font-family: 'noto-sans-sc'; src: url("/fonts/NotoSansCJKsc-Regular.woff2") format("woff2"), url("/fonts/NotoSansCJKsc-Regular.woff") format("woff"), url("/fonts/NotoSansCJKsc-Regular.otf") format("opentype"); font-weight: 400; } .font-size-nav,.lang-nav { font-family: FBL-nav,Sans-Serif; } body { font-family: noto-sans-en,Sans-Serif; } :lang(zh-Hant) { font-family: noto-sans-tc,Sans-Serif; } :lang(zh-Hans) { font-family: noto-sans-sc,Sans-Serif; } /* Nautralization End*/ h1, .h1 { font-size: 1.5em; color: #078297; font-weight: 700; } h2, .h2 { font-size: 1.5em; color: #282828; font-weight: 700; } h3, .h3 { font-size: 1.2em; color: #A0695A; font-weight: 700; } h4, .h4 { font-size: 1em; color: #000; font-weight: 700; } :not(div.form-control) > p { font-size: 1em; color: #4d4d4f; font-weight: 400; } a { color: #067184; text-decoration: underline; cursor: pointer; } a:hover, a:focus { color: #055866; transition: 0.4s; } ul { font-size: 1em; padding-left: 18px; margin-bottom: 18px; } /* Update For List Style */ ul.l1 { position: relative; list-style: none; } li.l1::before { display: block; content: ''; position: relative; top: 0.8em; left: -1em; width: 6px; height: 6px; background-color: #078297; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } ul.l2 li { position: relative; list-style: none; } li.l2::before { display: block; content: ''; position: relative; top: 0.85em; left: -1em; width: 6px; height: 6px; border-right: 1px solid #078297; border-bottom: 1px solid #078297; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } ul.l3 { position: relative; list-style: none; } li.l3::before { display: block; content: ''; position: relative; top: 0.8em; left: -1em; width: 6px; height: 6px; background-color: #078297; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } /* Update For List Style */ ul li p { color: #4d4d4f; margin-bottom: 10px; } ol, ul { font-size: 1em; padding-left: 20px; margin-bottom: 20px; } ol li, .form-control > ul li, .content-label > ul li { padding-left: 10px; margin-bottom: 10px; } ol li ul { margin-top: 15px; margin-bottom: 40px; } a.button-large { display: inline-block; font-size: 1em; min-width: 120px; text-align: center; padding: 12px 18px; margin: 0; color: #fff; background-color: #078297; text-decoration: none; cursor: pointer; } a.button-large:hover, a.button-large:focus { background-color: #00606B; transition: 0.4s; } .font-italic { font-style: italic; } /* Wrapper width for Responsive */ #main { margin-top: -100px; padding-top: 160px; } .main-page-wrapper { max-width: 1260px; padding: 20px; margin: 0 auto; } .navbar-inverse { border: none; border-bottom: 1px solid #eee; } header { display: block; position: fixed; top: 0; width: 100%; height: 60px; background-color: #fff; border-bottom: 1px solid #ddd; z-index: 990; } .header-wrapper { position: relative; max-width: 1260px; height: 60px; margin: 0 auto; } .section-wrapper { width: 100%; margin-bottom: 30px; padding: 40px; padding-top: 60px; /* background: #fff url("Images/middleTop.png") repeat-x top; */ background: #fff url("Images/middleTop_contd.png") repeat-x top left; background-size: 50%; } .section-wrapper.disable-bg { padding-top: 40px; background: none; } .section-wrapper section { margin-bottom: 60px; } .section-wrapper section:last-child { margin-bottom: 0; } .sub-wrapper { margin-bottom: 60px; } .full-width-wrapper { width: 100%; padding: 40px; background: #fff url("Images/middleTop_contd.png") repeat-x left top; background-size: 50%; } .full-width-wrapper .inner-wrapper { max-width: 1260px; padding: 20px 60px; margin: 0 auto; } .full-width-wrapper .inner-wrapper.first-wrapper { margin-top: 20px; } .full-width-wrapper .inner-wrapper.last-wrapper { padding-bottom: 0; } .footer-wrapper { width: 100%; padding: 40px; padding-top: 0px; background: #fff; background-size: 50%; } .fixed_width + footer .footer-wrapper{ min-width: 1260px; } .footer-wrapper .inner-wrapper { max-width: 1260px; padding: 20px 60px; margin: 0 auto; } @media screen and (max-width: 1170px) { .section-wrapper { background-size: 620px; } .full-width-wrapper { padding: 20px; } .full-width-wrapper .inner-wrapper { padding: 20px 40px; } .footer-wrapper { padding: 20px; padding-top: 0px; } .footer-wrapper .inner-wrapper { padding: 20px 40px; } } @media screen and (max-width: 750px) { .main-page-wrapper { padding: 20px 10px; margin: 0 auto; } .full-width-wrapper .inner-wrapper { padding: 20px 0; } .footer-wrapper .inner-wrapper { padding: 20px 10px; margin: 0 auto; } } .footer .disclaimer{ text-align: center; } .footer .modify { float: right; } @media screen and (max-width: 1000px) { .footer .disclaimer { display: block; width: 100%; } .footer .modify { display: block; padding-top: 20px; float: none; } } /* Header & Nav */ header { font-size: 15px; line-height: 1; } .main-menu { background-color: transparent; } .navbar-toggle { position: absolute; top: 8px; right: 200px; } .site-branding { position: absolute; height: 50px; top: 5px; left: 20px; } /* Nav menu position */ @media screen and (max-width: 1170px) { .font-size-nav { top: 20px !important; /*margin-bottom: 15px !important;*/ } .lang-nav { top: 60px !important; } .infoIcon { top: 100px !important; } } .main-nav { position: absolute; top: 20px; left: 300px; } .font-size-nav { position: absolute; top: 20px; right: 350px; } .lang-nav { position: absolute; top: 20px; right: 220px; } .infoIcon { position: absolute; top: 4px; right: 138px; } .infoIcon img{ width: 50px; padding: 5px; } .header-btn { text-align: center; color: black; font-size: 1em; border-bottom: 2px solid transparent; cursor: pointer; padding: 5px 5px; margin-right: 30px; text-decoration: none; } .header-btn:hover, .header-btn:focus { color: #055866; border-bottom: 2px solid #055866; transition: 0.4s; text-decoration: none; } .header-btn.active { border-bottom: 2px solid #078297; text-decoration: none; } .font-size-nav .header-btn, .lang-nav .header-btn { margin: 0 4px; } .loginButton { position: absolute; right: 20px; top: 10px; background-color: #078297; } .loginButton a { display: inline-block; font-size: 1em; min-width: 80px; text-align: center; vertical-align: middle; padding: 12px; margin: 0; border: none; color: #fff; text-decoration: none; cursor: pointer; } .loginButton a:hover, .loginButton a:focus { background-color: #00606B; transition: 0.4s; } .usermenu{ position: absolute; right: 30px; top: 5px; padding-left: 5px; cursor: pointer; } .usermenu ul{ list-style-type: none; } .usermenu a { display: inline-block; font-size: 1em; min-width: 80px; text-align: center; vertical-align: middle; padding: 15px 12px; margin: 0; border: none; color: #fff; text-decoration: none; cursor: pointer; } .usermenu a:hover, .usermenu a:focus { background-color: #078297; transition: 0.4s; cursor: pointer; color: white; } .usermenu_content{ display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; right: 0; } .usermenu:hover .usermenu_content, .usermenu:focus .usermenu_content { display: block; padding: 0; margin: 0 auto; } .usermenu_content ul{ margin: 0 auto; padding: 0; } .usermenu_content ul li a{ color: black; width: 100%; } .usermenu_content ul li input{ display: inline-block; font-size: 1em; text-align: center; vertical-align: middle; padding: 15px 12px; margin: 0; border: none; color: black; text-decoration: none; cursor: pointer; width: 100%; background-color: transparent; } .usermenu_content ul li input:hover, .usermenu_content ul li input:focus { background-color: #078297; transition: 0.4s; cursor: pointer; color: white; } .inboxIcon_wrapper { display: inline; position: absolute; right: 83px; top: 4px; } .inboxIcon_wrapper img{ padding: 5px; width: 50px; } .inboxIcon_wrapper #div_inbox_cnt { display: none; position: absolute; right: 0px; top: 5px; width: 16px; height: 16px; background: #EE0000; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; line-height: 16px; text-align: center; color: white; font-size: 12px !important; } .nav-toggle-btn { display: none; position: absolute; top: 10px; right: 20px; width: 40px; height: 40px; padding: 10px; margin: 0; color: white; font-size: 1em; text-align: center; text-decoration: none; background-color: #078297; border: none; cursor: pointer; } .nav-toggle-btn img { width: 100%; } .nav-toggle-btn:focus { outline: 0; } .nav-toggle-btn:hover, .nav-toggle-btn:focus { background-color: #00606B; transition: 0.4s; } /* Responsive */ @media screen and (max-width: 1170px) { .nav-toggle-btn { display: block; } .usermenu{ right: 80px; } .inboxIcon_wrapper{ right: 140px; } .loginButton { position: absolute; right: 70px; top: 10px; } .main-menu { display: none; padding-top: 60px; background-color: #fff; } .main-menu.responsive { /*height: 520px !important;*/ min-height: 300px !important; max-height: 520px !important; height: 520px !important; } .main-menu.responsive { display: block; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } .main-menu.responsive .main-nav, .main-menu.responsive .font-size-nav, .main-menu.responsive .lang-nav, .main-menu.responsive .infoIcon { position: relative; top: 0; left: 0; } .main-menu.responsive .header-btn { padding: 15px; margin: 10px; } .main-menu.responsive .form-group { width: 300px; display: block; text-align: center; margin: 20px auto; } .main-menu.responsive .form-group:first-child { margin-top: 0; } .main-menu.responsive .form-group:last-child { padding-bottom: 20px; } .main-menu.responsive .form-group span { position: relative; display: inline-block; } .main-menu.responsive .main-nav .header-btn { border-color: #ddd; } .main-menu.responsive .main-nav .header-btn.active { border-color: #078297; } .main-menu.responsive .main-nav .header-btn:hover, .main-menu.responsive .main-nav .header-btn:focus { border-color: #055866; transition: 0.4s; } .main-menu.responsive .infoIcon{ text-align: center; } .mask { -webkit-transition: opacity 300ms; transition: opacity 300ms; background: rgba(0, 0, 0, 0.5); visibility: hidden; position: fixed; opacity: 0; z-index: 99; bottom: 0; right: 0; left: 0; top: 0; height: 100%; width: 100%; } .mask.mask-active { visibility: visible; opacity: 1; } } @media screen and (max-width: 360px) { .site-branding { height: 40px; } } @media screen and (max-width: 750px) { .nav-toggle-btn { right: 10px; } .loginButton { right: 60px; } .site-branding { left: 10px; } } /* Banner */ .jumbotron { margin-bottom: 0; } .jumbotron h1, .jumbotron .h1 { font-size: 2.13em; } .jumbotron p { width: 50%; font-size: 1em; color: #fff !important; margin-bottom: 35px; } @media screen and (max-width: 1170px) { .jumbotron p { width: 75%; } } @media screen and (max-width: 750px) { .jumbotron p { width: 100%; } } /* How to Apply */ .inner-wrapper:after, .app-wrapper:after, .col-wrapper:after, .sub-menu:after { display: table; content: " "; clear: both; } .col-app { width: 33.33%; float: left; display: inline-block; position: relative; margin-bottom: 40px; } .col-app .app-content { margin-right: 20px; border: 1px solid #cdcdcd; max-width: 375px; } body .col-app .app-content .app-desc { height: 230px; padding: 20px 15px; margin-bottom: 20px; } body.medium .col-app .app-content .app-desc { height: 280px; padding: 20px 15px; margin-bottom: 20px; } body.large .col-app .app-content .app-desc { height: 350px; padding: 20px 15px; margin-bottom: 20px; } .col-app .app-content h1, .col-app .app-content .h1 { text-align: center; } .col-info { width: 33.33%; float: left; display: inline-block; position: relative; margin-bottom: 40px; } .app_btn { bottom: 10px; height: 60px; text-align: center; } .info-wrapper { padding: 20px; } .info-wrapper h3, .info-wrapper .h3 { color: #282828; } /* List of App Extra Download */ ul.arrowUl { margin-top: 24px; margin-bottom: 44px; list-style: none; padding-left: 0px; } ul.arrowUl li { position: relative; font-size: 1.2em; margin-left: 2px; /*list-style-image: url("Images/arrow.png");*/ margin-bottom: 0.85em; line-height: 100%; } ul.arrowUl li:before { position: relative; top: -0.1em; display: inline-block; width: 8px; height: 8px; border-right: 1px solid #078297; border-bottom: 1px solid #078297; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); content: ""; margin-right: 0.4em; } ul.arrowUl li a { text-decoration: none; transition: 0.4s; } ul.arrowUl li a:hover, ul.arrowUl li a:focus { text-decoration: underline; /* padding: 0 20px; */ } ul.arrowUl2 { margin-top: 0.85em; list-style: none; } ul.arrowUl2 li { font-size: 1em; } .foot-note { padding: 20px; width: 100%; background-color: #f0f0f0; } .foot-note p { font-weight: bold; margin: 0; } @media screen and (max-width: 1170px) { .col-app { width: 50%; } .col-info { width: 100%; margin-bottom: 0; } .info-wrapper { padding: 20px 0; } } @media screen and (max-width: 750px) { .col-app { width: 100%; } .col-app .app-content { margin: 0; } body .col-app .app-content .app-desc, body.medium .col-app .app-content .app-desc, body.large .col-app .app-content .app-desc { height: auto; } } app_btn .block-button a { margin: 0 auto; font-size: 1.2em } /* Enquiry */ .col-4 { width: 33.33%; float: left; } .enquiry-table { width: 100%; display: table; } .enquiry-table p { text-align: left; margin: 0; } .enquiry-column { display: table-cell; vertical-align: middle; } .enquiry-icon, .enquiry-detail { height: 90px; padding-right: 30px; display: table-cell; vertical-align: middle; } .enquiry-icon { width: 45px; } @media screen and (max-width: 900px) { .col-4 { width: 100%; margin-bottom: 20px; } .enquiry-icon, .enquiry-detail { height: auto; } .enquiry-detail { margin: 0; } } /* Assessment Panel */ .apanel h1, .apanel .h1 { margin-bottom: 40px; } .apanel h2, .apanel .h2 { font-size: 1.2em; margin-bottom: 50px; } .apanel h3, .apanel .h3 { margin-bottom: 10px; } .apanel p { margin-bottom: 50px; } /* FAQ */ .sub-menu { margin-bottom: 40px; } .faq-tab { padding: 10px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .faq-tab span { margin-right: 20px; } .faq-tab span a { color: #4d4d4f; text-decoration: none; } .faq-tab span a:hover, .faq-tab span a:focus { color: #078297; text-decoration: none; } .faq h2, .faq .h2 { margin-bottom: 30px; } .faq h4, .faq .h4 { display: inline-block; margin-bottom: 10px; } .faq h4:after, .faq .h4:after { content: " "; padding-right: 30px; } .faq .faq-question { margin-bottom: 10px; } .faq-question h4 span.faq-number, .faq-question .h4 span.faq-number { display: inline-block; width: 30px; } .faq .faq-answer { padding-left: 30px; margin-bottom: 50px; } /* Floating button */ .btn-go-top { position: fixed; bottom: 20px; right: calc((100% - 1240px)/2); width: 45px; height: 45px; box-shadow: 0 2px 10px #ccc; z-index: 100; } .btn-go-top a { display: inline-block; width: 100%; height: 100%; color: #fff; background-color: #000; border: 1px solid #fff; opacity: 0.3; text-decoration: none; cursor: pointer; transition: 0.4s; /* content: url("Images/arrow-top.svg"); */ } .btn-go-top a img { width: 100%; height: 100%; padding: 8px; } .btn-go-top a:hover, .btn-go-top a:focus { background-color: #078297; opacity: 0.5; } a.button-large:hover, a.button-large:focus { background-color: #00606B; transition: 0.4s; } @media screen and (max-width: 1260px) { .btn-go-top { right: 20px; } } @media screen and (max-width: 790px) { .faq-tab span { display: block; margin-right: 0; margin-bottom: 20px; } .faq-tab span:last-child { margin-bottom: 0; } } @media screen and (max-width: 750px) { .faq .faq-answer { padding-left: 0; } .btn-go-top { right: 10px; } } /* Button Toggle 'Show / Hide' */ /* reset font size for toggle buttons */ .btn-hide, .btn-show { font-size: 11px; line-height: 1.2; display: inline-block; font-weight: 700; text-align: center; color: #A0695A; min-width: 115px; padding: 4px 8px; border: 2px solid #e5d5d1; border-radius: 15px; cursor: pointer; transition: 0.4s; } .btn-hide.no-line, .btn-show.no-line, .btn-hide[no-line], .btn-show[no-line] { text-decoration: none; } .btn-hide:hover, .btn-show:hover, .btn-hide:focus, .btn-show:focus { color: #A0695A; } .btn-hide .arrow img { height: 1.2em; float: right; transform: rotate(0deg); -ms-transform: rotate(0deg); /* IE 9 */ -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */ transition: 0.4s; } .btn-hide:hover, .btn-hide:focus { border-color: #A0695A; transition: 0.4s; } .btn-show .arrow img { height: 1.2em; float: right; transform: rotate(180deg); -ms-transform: rotate(180deg); /* IE 9 */ -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ transition: 0.4s; } .btn-show:hover, .btn-show:focus { border-color: #A0695A; transition: 0.4s; } /* Button Hide Languages */ /* EN */ :lang(en) .btn-hide .text:after { content: "Hide Answer"; } :lang(en) .btn-show .text:after { content: "Show Answer"; } /* TC */ :lang(zh-Hant) .btn-hide .text:after { content: "\96b1\85cf\7b54\6848"; /* 隱藏答案 */ } :lang(zh-Hant) .btn-show .text:after { content: "\986f\793a\7b54\6848"; /* 顯示答案 */ } /* SC */ :lang(zh-Hans) .btn-hide .text:after { content: "\9690\85cf\7b54\6848"; /*隐藏答案*/ } :lang(zh-Hans) .btn-show .text:after { content: "\663e\793a\7b54\6848"; /*显示答案*/ } /* End Button Toggle 'Show / Hide' */ .btn-collapse, .btn-show-all { font-size: 11px; line-height: 1.2; display: inline-block; font-weight: 700; text-align: center; color: #A0695A; min-width: 115px; padding: 4px 8px; border: 2px solid #e5d5d1; border-radius: 15px; cursor: pointer; transition: 0.4s; } .btn-collapse.no-line, .btn-show-all.no-line, .btn-collapse[no-line], .btn-show-all[no-line] { text-decoration: none; } .btn-collapse:hover, .btn-show-all:hover, .btn-collapse:focus, .btn-show-all:focus { color: #A0695A; } .btn-collapse .arrow img { height: 1.2em; float: right; transform: rotate(0deg); -ms-transform: rotate(0deg); /* IE 9 */ -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */ transition: 0.4s; } .btn-collapse:hover, .btn-collapse:focus { border-color: #A0695A; transition: 0.4s; } .btn-show-all .arrow img { height: 1.2em; float: right; transform: rotate(180deg); -ms-transform: rotate(180deg); /* IE 9 */ -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ transition: 0.4s; } .btn-show-all:hover, .btn-show-all:focus { border-color: #A0695A; transition: 0.4s; } /* Button Collapse All / Show All Languages */ /* EN */ :lang(en) .btn-collapse .text:after { content: "Collapse All"; } :lang(en) .btn-show-all .text:after { content: "Show All"; } /* TC */ :lang(zh-Hant) .btn-collapse .text:after { content: "\96b1\85cf\5168\90e8"; /* 隱藏全部 */ } :lang(zh-Hant) .btn-show-all .text:after { content: "\986f\793a\5168\90e8"; /* 顯示全部 */ } /* SC */ :lang(zh-Hans) .btn-collapse .text:after { content: "\9690\85cf\5168\90e8"; /* 隐藏全部 */ } :lang(zh-Hans) .btn-show-all .text:after { content: "\663e\793a\5168\90e8"; /* 显示全部 */ } .flowChart-desktop { display: block; width: 100%; margin-top: 20px; } .flowChart-mobile { display: none; width: 100%; max-width: 300px; margin-top: 20px; } .toggle-button-right { padding: 5px; text-align: right; } @media screen and (max-width: 1199px) { .toggle-button-right { margin-top: 10px; text-align: left; } } @media screen and (max-width: 900px) { .flowChart-desktop { display: none; } .flowChart-mobile { display: block; } } /* Footer */ footer { width: 100%; min-height: 100px; background-color: white; padding 20px; border-spacing: collapse; } hr { margin-top: inherit; margin-bottom: inherit; } /* Others */ .jumbotron { background: url("Images/banner.jpg") no-repeat center center; background-color: rgba(0,0,0,.1) !important; color: white; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; } .jumbotron h1, .jumbotron .h1 { text-shadow: 0 0 2px black, 0 0 5px black, 1px 1px 0 black; } .jumbotron p { text-shadow: 0 0 2px black, 0 0 5px black, 1px 1px 0 black; } .ITBName { color: black; } /* Div Table */ .css-table { display: table; } .css-table .thead { display: table-header-group; } .css-table .tbody { display: table-row-group; } .css-table .tr { display: table-row; } .css-table .th, .css-table .td { display: table-cell; text-align: justify; } /* Div Table */ /* Print style */ @media print { header { position:relative; } a[href]:after { content: none!important; } } /*Modal*/ .modal-dialog { overflow-y: initial !important } .modal-body { /* 100% = dialog height, 120px = header + footer */ max-height: calc(100% - 140px); overflow-y: auto; } /* Message Background*/ .message-wrapper { width: 100%; padding: 60px 40px; background: #fff url('/Content/Images/middleTop_contd.png') repeat-x top left; background-size: 50%; } .field-validation-error { color: #EE0000; } #modal-error .modal-dialog,#modal-error .modal-content,#modal-prop-error .modal-dialog,#modal-prop-error .modal-content { /* 80% of window height */ height: 85%; } .btnClose{ float: right; } /*#modal-inbox .modal-footer{ position: absolute; bottom: 0; width: 100%; }*/ .modal-footer .inbox_btn_wrapper a{ margin-top: 0; } .modal-footer .inbox_btn_wrapper{ float: right; } .modal-content .inbox_btn_wrapper a { background-color: #078297; font-size: 1em; text-align: center; vertical-align: middle; border: none; color: #fff; text-decoration: none; cursor: pointer; padding: 10px 20px; margin-top: 10px; width: auto; float: left; margin-right: 14px; } .modal-content .inbox_btn_wrapper a:hover, .modal-content .inbox_btn_wrapper a:focus { background-color: #00606B; transition: 0.4s; } .modal-dialog .btn-primary { background-color: #078297; color: #fff; border: 0px; } .modal-dialog .btn-primary:hover, .modal-dialog .btn-primary:focus { background-color: #00606B; transition: 0.4s; } .modal-footer .btn-primary { float: right; margin-left: 8px; } .modal-title { font-size: 18px; white-space: pre-wrap; } /*Model end*/ /*tool tips*/ .more_info { /*border-bottom: 1px dotted #000;*/ position: relative; cursor: pointer; } .more_info .popup { position: absolute; top: 15px; /*must overlap parent element otherwise pop-up doesn't stay open when rolloing over '*/ background: #fff; border: 1px solid #ccc; padding: 8px; left: 0; /*max-width: 480px;*/ min-width: 360px; z-index: 100; display: none; } /* pager */ .pager_wrapper{ text-align: center; position: relative; } .pager_wrapper > div, .PageSize{ margin: 20px 0; position: absolute; right: 0; top: 0; } .pager_wrapper .item_out_of_all{ right:auto; } .pager_wrapper .pagination > li > a, .pager_wrapper .pagination > li > span{ color: #078297; border: 1px solid #C0C0C0; } .pager_wrapper .pagination > .active > a, .pager_wrapper .pagination > .active > span, .pager_wrapper .pagination > .active > a:hover, .pager_wrapper .pagination > .active > span:hover, .pager_wrapper .pagination > .active > a:focus, .pager_wrapper .pagination > .active > span:focus{ background-color: #078297; border-color: #078297; color: #fff; } /* Captcha*/ .captcha_wrapper{ padding-left: 0!important; width: 280px; } .captcha_wrapper > div:first-child{ padding-bottom: 8px; } .captcha_wrapper > div{ display: block!important; } .captcha_wrapper .BDC_CaptchaDiv{ display: inline-flex; padding-left: 0!important; } .captcha_wrapper .BDC_CaptchaDiv div{ padding-left: 0!important; } .captcha_wrapper .actions{ padding-top: 10px; } .captcha_wrapper .actions input{ width: 100%; } /* Captcha end*/ /* Inbox */ #modal-inbox .modal-body{ overflow-y: hidden; } #modal-inbox .modal-body table{ width: 100%; } #modal-inbox .modal-body td{ padding-top: 5px; padding-bottom : 5px; } #modal-inbox .modal-body td input[type='text'], #modal-inbox .modal-body td textarea{ width: 100%; } #modal-inbox .modal-body td:first-child { width: 20%; padding-right: 10px; } #modal-inbox .modal-body td[colspan="2"]:first-child { width: 100%; padding-right: 0; } #div_reply_attachment img, #div_attachment img{ width: 12px; } /* Inbox end */ .btnStyle1{ display: inline-block; font-size: 1em; min-width: 80px; text-align: center; vertical-align: middle; padding: 12px; margin: 0; border: none; color: #fff; text-decoration: none; cursor: pointer; background-color: #00a1b2; } .btnStyle1:hover, .btnStyle1:focus { background-color: #2cc3d3; transition: 0.4s; text-decoration: none; color: white; } .btnWrapper_hori{ display: inline-flex; } .btnWrapper_hori > *{ margin-left: 10px; } .btnWrapper_hori > *:first-child{ margin-left: 0; } .btnWrapper_vert{ display: inline-block; } .btnWrapper_vert > *{ margin-top: 10px; } .btnWrapper_vert > *:first-child{ margin-top: 0; } .btnWrapper_vert .btnStyle1{ width: 100%; } .modal-ajax-loader { display: none; position: fixed; z-index: 1000; top: 0; left: 0; height: 100%; width: 100%; background: rgba( 255, 255, 255, .7 ) url('Images/ajax-loader.gif') 50% 50% no-repeat; } /* When the body has the loading class, we turn the scrollbar off with overflow:hidden */ body.loading { overflow: hidden; } /* Anytime the body has the loading class, our modal element will be visible */ body.loading .modal-ajax-loader { display: block; }