/* General */ *, *:before, *:after, body, div, h1, h2, h4, h5, h6, img, img a, a img, form, fieldset, blockquote { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; *behavior: url(scripts/boxsizing.htc); font-family: 'Lato', sans-serif; font-weight: 400; font-size: 13px; } body, h2, p { margin: 0; color: #333333; } .btn, p.edit, p.add, .userSelect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } html { overflow-y: scroll; } body { background-color: #E2E2E7; } h2 { font-size: 19px; } input:focus { outline: 0; } .page>h2 { font-weight: 600; } .page.singleColumnMode>h2 { display: none; } .clear { clear: both; } .floatRight { float: right; } .floatLeft { float: left; } .btn, .btn.qq-upload-button-hover { background: #fff; } .btn, .ui-datepicker-buttonpane button { padding: 0; cursor: pointer; -webkit-border-radius: 3px; -moz-border-radius : 3px; -o-border-radius : 3px; -ms-border-radius : 3px; border-radius : 3px; -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.23); -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.23); box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.23); } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 0; } .btn.qq-upload-button-hover input { cursor: pointer; } .btn.left { float: left; margin-right: 30px; } .btn.right { float: right; margin-left: 30px; } .btn p { padding: 12px 15px; color: #666; font-size: 14px; min-width: 97px; text-align: center; } .btn:active, .ui-datepicker-buttonpane button { -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.15); -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.15); box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.15); -webkit-transform: translate(1px,1px); -moz-transform: translate(1px,1px); -ms-transform: translate(1px,1px); -o-transform: translate(1px,1px); transform: translate(1px,1px); } .ui-datepicker-buttonpane button { padding: 12px 15px; color: #FFF; } .ui-datepicker .ui-datepicker-buttonpane button { margin: .5em .4em; padding: .4em .7em .35em; } .btnLabel { height: 41px; line-height: 41px; margin-right: 20px; font-weight: 600; } .btn.popupAction, .btn.start, .btn.cvUploadBtn, .btn.uploadCompleteClose, .btn.appFormProgressBtn.complete, .btn.nextQuestion { background-color: #56D037; } .btn.appFormProgressBtn { margin-top: -9px; } .btn.popupAction.loading { background-image: url(ap_images/btn_loading_green.gif); background-repeat: no-repeat; background-position: center; } .btn.popupAction.loading p { visibility: hidden; } .btn.popupAction p, .btn.start p, .btn.cvUploadBtn p, .btn.uploadCompleteClose p, .btn.appFormProgressBtn.complete p, .btn.nextQuestion p, .btn.nextSec.p { color: #fff; } .btn.nextQuestion { width: 120px; margin: 40px auto 0 auto; } .btn.uploadCompleteClose { width: 97px; float: none !important; margin: 0 auto; } .btn.cvUploadBtn { width: 145px; margin: 40px auto; } .btn.uploadCV { position: relative; margin-left: 20px; margin-top: -9px; } .btn.uploadCV.complete p { padding-right: 42px; } .btn.uploadCV p.complete { display: none; } .btn.uploadCV.complete p.incomplete { display: none; } .btn.uploadCV.complete p.complete { display: block; } .btn.uploadCV.complete { cursor: default; } .btn.uploadCV.complete:after { content: ''; width: 23px; height: 23px; display: block; position: absolute; left: 100%; background-image: url(ap_images/complete_tick.png); background-repeat: no-repeat; background-position: center; margin: -32px 0 0 -38px; } .tick { background-image: url(ap_images/complete_tick_large.png); background-repeat: no-repeat; background-position: center; margin: 0 auto 20px; width: 150px; height: 150px; } .popupFormWrapper.cvUpload .popupFormContent p.cvSkip { float: right; color: #AAA; text-align: right; cursor: pointer; padding: 0; margin: 0; } .popupFormWrapper.cvUpload .qq-upload-list li { background-color: transparent; padding: 0; } .popupFormWrapper.cvUpload .qq-upload-list li>p { display: none; } .popupFormWrapper.cvUpload .progressBarWrapper { background-color: #E8E8E8; box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.23); } .popupFormWrapper.cvUpload .progressBarWrapper, .popupFormWrapper.cvUpload .progressBarWrapper .qq-progress-bar { -webkit-border-radius: 9px; -moz-border-radius : 9px; -o-border-radius : 9px; -ms-border-radius : 9px; border-radius : 9px; height: 18px; display: block !important; -webkit-transition: width .2s ease-out; -moz-transition : width .2s ease-out; -o-transition : width .2s ease-out; -ms-transition : width .2s ease-out; transition : width .2s ease-out; } .popupFormWrapper.cvUpload .progressBarWrapper .qq-progress-bar { background: #56D037; } p.cvSkip:after { content: '\00BB'; font-size: 150%; line-height: auto; padding-left: 3px; } .btn.start { width: 97px; } .formColumn>div>.btnToolbar .btn { padding: 0; } .btn.popupAction a, .btn.start a { color: #fff; padding: 12px 15px; } .btn a { display: block; width: 100%; height: 100%; color: #666666; font-size: 14px; text-decoration: none; text-align: center; } .staticPageWrapper { width: 100%; height: auto; overflow: hidden; } .mover { width: 200%; } .newPage, .oldPage { width: 50%; float: left; } /* Pagetop */ header { width: 100%; height: 89px; background-color: #fff; } header .logo { position: absolute; margin: 14px 12px; } header .logo a { display: block; height: 100%; width: 100%; } header .user { margin-top: 14px; right: 28px; position: absolute; z-index: 2; } ul.pageTopNavigationMenu { list-style: none; padding: 0; margin: 0; width: 100%; height: 100%; padding-left: 115px; padding-right: 250px; } ul.pageTopNavigationMenu li { height: 100%; display: none; float: left; position: relative; } ul.pageTopNavigationMenu li.active { display: block; } ul.pageTopNavigationMenu li.pageTopMore { line-height: 86px; color: #666666; font-size: 14px; padding: 0 17px 0 0; text-decoration: none; position: relative; cursor: pointer; } ul.pageTopNavigationMenu li.pageTopMore > a { padding: 0 17px 0 0; background-image: url(ap_images/u_select_arrow.png); background-repeat: no-repeat; background-position: center right 14px; } ul.pageTopNavigationMenu li.register { display: block; } /*body.loggedIn ul.pageTopNavigationMenu li { display: block; }*/ ul.pageTopNavigationMenu li a { width: 100%; height: 100%; display: block; text-decoration: none; } ul.pageTopNavigationMenu li a p { line-height: 86px; color: #666666; font-size: 14px; padding: 0 17px; text-decoration: none; position: relative; } ul.pageTopNavigationMenu li.on a p { color: transparent; } ul.pageTopNavigationMenu li a p span { position: absolute; left: 0; padding: 0 15px; font-size: 14px; color: transparent; font-weight: 600; } ul.pageTopNavigationMenu li.on a p span { color: #000; } ul.pageTopNavigationMenu li.on a:after { display: block; content: ''; width: 100%; background-color: red; height: 3px; } ul.pageTopNavigationMenu li.complete a:before { content: ''; width: 23px; height: 23px; display: block; margin-left: -11.5px; background-image: url(ap_images/complete_tick.png); background-repeat: no-repeat; background-position: center; position: absolute; left: 50%; top: 56px; } ul.pageTopNavigationMenu li.on.complete a:after { background-color: #56D037; } .userAvatar { width: 0; height: 0; overflow: hidden; } .userAvatarInner { width: 57px; height: 57px; -webkit-border-radius: 50%; -moz-border-radius : 50%; -o-border-radius : 50%; -ms-border-radius : 50%; border-radius : 50%; overflow: hidden; } body.loggedIn .userAvatar { width: 57px; height: 57px; } body.loggedIn .userSelect { overflow:visible; } .userSelect { margin: 0 20px 0 0; height: 57px; padding: 20px 0; background-image: url(ap_images/u_select_arrow.png); background-position: top 26px right 10px; background-repeat: no-repeat; padding-right: 30px; cursor: pointer; overflow: hidden; } .userSelect.open { background-position: top -25px right 10px; } body.loggedIn .userSelect { cursor: default; background: transparent; padding-right: 0px; } .userSelect p { font-weight: 600; font-size: 14px; } body.rco_application_queue_new.editingEnabled .userSelect span.registrationName { cursor: pointer; } body.rco_application_queue_new.editingEnabled .userSelect span.registrationName:hover { text-decoration: underline; } body.loggedOut ul.pageTopNavigationMenu .pageTopMore { display: none; } .pageTopMoreMenu { position: absolute; opacity: 0; pointer-events: none; padding: 0; margin-top: -50px; background-color: #FFF; padding: 10px 0; width: 220px; box-shadow: 0px 9px 14px -4px rgba(0,0,0,0.45); z-index: 1; margin-left: -110px; left: 50%; text-align: center; cursor: default; -webkit-transition: margin-top .2s, opacity .2s; -moz-transition : margin-top .2s, opacity .2s; -o-transition : margin-top .2s, opacity .2s; -ms-transition : margin-top .2s, opacity .2s; transition : margin-top .2s, opacity .2s; } .pageTopMore.hover .pageTopMoreMenu { opacity: 1; margin-top: 0; pointer-events: auto; -webkit-transition: margin-top .15s, opacity .15s; -moz-transition : margin-top .15s, opacity .15s; -o-transition : margin-top .15s, opacity .15s; -ms-transition : margin-top .15s, opacity .15s; transition : margin-top .15s, opacity .15s; } ul.pageTopNavigationMenu ul.pageTopMoreMenu li { float: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } ul.pageTopNavigationMenu ul.pageTopMoreMenu li.on { background-color: #F0F0F0; pointer-events: none; } ul.pageTopNavigationMenu ul.pageTopMoreMenu li a { padding: 6px 15px; line-height: 20px; position: relative; } ul.pageTopNavigationMenu ul.pageTopMoreMenu li a:hover { background-color: #F0F0F0; } ul.pageTopNavigationMenu li.pageTopMore span { position: absolute; left: 0; top: 5px; padding: 0 15px; font-size: 14px; color: transparent; font-weight: 600; width: 100%; } ul.pageTopNavigationMenu ul.pageTopMoreMenu li.complete a:before { background-size: 65%; position: absolute; right: 0px; left: auto; top: 50%; margin: -12px 0 0 0; } ul.pageTopNavigationMenu ul.pageTopMoreMenu li.complete a:after { top: 0; left: 0; width: 4px; height: 100%; position: absolute; } ul.pageTopNavigationMenu ul.pageTopMoreMenu li.on a:after { top: 0; left: 0; width: 4px; height: 100%; position: absolute; } /* Page */ .page { max-width: 1150px; width: 90%; margin: 0 auto; padding: 30px 0 4px 0; } /* Assessment Page */ .page.assessment { text-align: center; position: relative; } .page.assessment h1 { font-size: 30px; font-weight: 600; margin: 110px 0 50px 0; } .page.assessment p { font-size: 19px; } .page.assessment p strong { font-weight: 600; font-size: 19px; margin: 35px 0; display: block; } .page.assessment .btn.start { margin: 30px auto 0 auto; } #timer { margin: -2px 0 0 -1px; width: 112px; height: 112px; position: relative; z-index: 1; } #timer>div { height: 45px; display: inline-block; margin: 36px 0 0 0; } #timer>div:first-child p { width: 43px; font-size: 33px; font-weight: 300; text-align: right; } #timer>div:first-child { left: 8px; width: 43px; bottom: 37px; } #timer>div:last-child p { width: 25px; font-size: 15px; font-weight: 300; } #timer>div:last-child { right: 19px; width: 25px; text-align: left; } .radial-progress { margin: -111px 0 40px -1px; width: 112px; height: 112px; background-color: #56D037; border-radius: 50%; -webkit-transition: background-color .6s; -moz-transition : background-color .6s; -o-transition : background-color .6s; -ms-transition : background-color .6s; transition : background-color .6s; } .mask, .fill { width: 112px; height: 112px; position: absolute; border-radius: 50%; } .mask, .fill { -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: -webkit-transform 1.5s linear; transition: -ms-transform 1.5s linear; transition: transform 1.5s linear; } .mask { clip: rect(0px, 112px, 112px, 56px); } .fill { clip: rect(0px, 56px, 112px, 0px); background-color: #FFFFFF; } .inset { width: 100px; height: 100px; position: absolute; margin-left: 6px; margin-top: 6px; background-color: #FFFFFF; border-radius: 50%; } .timerWrapper { width: 110px; height: 110px; margin: 0 auto 0px auto; overflow: hidden; -webkit-border-radius: 50%; -moz-border-radius : 50%; -o-border-radius : 50%; -ms-border-radius : 50%; border-radius : 50%; -webkit-transition: transform .2s, opacity .2s; -moz-transition : transform .2s, opacity .2s; -o-transition : transform .2s, opacity .2s; -ms-transition : transform .2s, opacity .2s; transition : transform .2s, opacity .2s; } .timerWrapper.shrink { -webkit-transform: scale(0.3); -moz-transform: scale(0.3); -ms-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); opacity: 0; -webkit-transition: transform .3s, opacity .3s; -moz-transition : transform .3s, opacity .3s; -o-transition : transform .3s, opacity .3s; -ms-transition : transform .3s, opacity .3s; transition : transform .3s, opacity .3s; } .assessment>ul { list-style: none; padding: 0; margin-top: 50px; } .assessment>ul li { cursor: default; display: inline-block; margin: 0 15px 0 15px; width: 32px; height: 32px; text-align: center; line-height: 32px; background-color: #DADADA; font-weight: 600; color: #fff; -webkit-border-radius: 50%; -moz-border-radius : 50%; -o-border-radius : 50%; -ms-border-radius : 50%; border-radius : 50%; } .assessment>ul li.on { background-color: #56D037; } .assessment>ul li:first-child { margin: 0 15px 0 0; } .assessment>ul li:last-child { margin: 0 0 0 15px; } .assessment>ul li:before { content: ''; display: block; width: 30px; height: 3px; position: absolute; margin: 14px 0 0 -30px; background-color: #DADADA; } .assessment>ul li.on:before { background-color: #56D037; } .assessment>ul li:first-child:before { display: none; } .assessment h1 span { font-size: inherit; font-weight: inherit; color: #56D037; } .page.assessment.question h1 { margin-top: 80px; } .page.assessment.question input { margin-top: 50px; height: 50px; line-height: 50px; width: 240px; border: 1px solid #BFBFBF; font-size: 19px; padding: 10px; text-align: center; } .page.assessment.question p strong { margin: 0; } /* General Form */ .popupFormWrapper, .popupWindow { background-color: #fff; pointer-events: auto; margin: 137px auto 0 auto; max-width: 668px; width: 83.5%; /*position: relative;*/ opacity: 1; -webkit-border-radius: 2px; -moz-border-radius : 2px; -o-border-radius : 2px; -ms-border-radius : 2px; border-radius : 2px; -webkit-transition: opacity .2s, transform .2s; -moz-transition : opacity .2s, transform .2s; -o-transition : opacity .2s, transform .2s; -ms-transition : opacity .2s, transform .2s; transition : opacity .2s, transform .2s; } .popupFormWrapper.documentSigning { max-width: none; width: auto; min-width: 0; min-height: 500px; position: absolute; top: 99px; bottom: 20px; left: 20px; right: 20px; margin: 0; } .popupFormWrapper.hidden { -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -ms-transform: scale(0.6); -o-transform: scale(0.6); transform: scale(0.6); opacity: 0; /* removed because it makes tooltips stay above contained select dropdowns z-index: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: opacity .2s, transform .2s; -moz-transition : opacity .2s, transform .2s; -o-transition : opacity .2s, transform .2s; -ms-transition : opacity .2s, transform .2s; transition : opacity .2s, transform .2s; */ } .jqueryPopup .popupFormWrapper, .jqueryPopup .popupWindow { -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.45); -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.45); box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.45); } .formHeader, .popupFormContent, .btnToolbar { padding: 30px; } .cvUploadComplete .btnToolbar { padding-bottom: 0; height: auto; } .cvUploadComplete p { text-align: center; } .labelCheckbox.cvInstructions p { height: auto; line-height: 18px; width: 458px; margin-left: 10px; } .labelCheckbox.cvInstructions.on p { font-weight: bold; } .popupFormWrapper.registrationForm, .popupFormWrapper.passwordSetupOrResetForm { max-width: 789px; margin-top: 50px; } .registrationForm .popupFormContent, .passwordSetupOrResetForm .popupFormContent { width: auto; overflow: hidden; } .formHeader { background-color: #777; color: #fff; } .formClose { font-weight: 800; margin: 30px; cursor: pointer; width: 14px; height: 23px; background-image: url(ap_images/form_close.png); background-repeat: no-repeat; background-position: center; } .btnToolbar { height: 101px; } .btnToolbar .popupAction { margin-left: 20px; } .btnToolbar .btn { float: right; } div.popupFormWrapper:not(.popupFormWrapper-3) .nextPrevMode .btnToolbar .btn.submit { float: none; margin: 0 auto; width: 97px; } .nextPrevMode .btnToolbar .btn.prev { float: left; } .nextPrevMode .btnToolbar .btn.next { float: right; } .formColumn>div>.btnToolbar { padding: 40px 10px 0 0; height: 84px; } .formColumn>div>.btnToolbar .btn { opacity: 0; -webkit-transition: opacity .15s; -moz-transition : opacity .15s; -o-transition : opacity .15s; -ms-transition : opacity .15s; transition : opacity .15s; } .formColumn>div:hover>.btnToolbar .btn { opacity: 1; } .popupFormContent>.select, .popupFormContent>input, /*.popupFormContent>p,*/ .popupFormContent .uploadInstructionsWrapper>.select, .popupFormContent .uploadInstructionsWrapper>input, .popupFormContent .uploadInstructionsWrapper>p { float: left; margin: 0 4px 7px 0; height: 30px; line-height: 30px; } .popupFormWrapper.submitApplication .popupFormContent p.loading { height: 24px; line-height: 24px; background-image: url(ap_images/page_loading.gif); background-repeat: no-repeat; background-position: left center; padding-left: 34px; } .popupFormContent>p, .popupFormContent .uploadInstructionsWrapper>p { margin: 0 10px 7px 2px; } .popupFormWrapper.cvUpload .popupFormContent .uploadInstructionsWrapper>p { float: none; } .popupFormWrapper.cvUpload { height: 368px; overflow: hidden; } .popupFormWrapper.cvUpload .cvUploadDropzone { width: 100%; height: 368px; display: block !important; margin-bottom: -368px; } .popupFormWrapper.cvUpload .cvUploadDropzone.qq-upload-drop-area-active { background-color: #56D037; } .popupFormWrapper.cvUpload .cvUploadDropzone.qq-upload-drop-area-active .cvDragHideWrapper { display: none; } .popupFormWrapper.cvUpload .cvUploadDropzone .cvDragShowWrapper { display: none; } .popupFormWrapper.cvUpload .cvUploadDropzone.qq-upload-drop-area-active .cvDragShowWrapper { display: block; } .popupFormWrapper.cvUpload .cvUploadDropzone .cvDragShowWrapper p { color: #FFF; font-size: 19px; margin: 0; font-family: 'Lato', sans-serif; font-weight: 400; width: 100%; height: 285px; line-height: 285px; text-align: center; } .popupFormContent>.divider { margin: 25px 0; height: 1px; width: 100%; background-color: #999999; } .popupFormContent input, .popupFormContent select { padding: 0 10px; font-size: 13px; font-weight: 600; border: 1px solid #C9C9C9; height: 30px; line-height: 30px; } .popupFormContent textarea { display: block; width: 348px; padding: 6px 10px; font-weight: 600; border: 1px solid #C9C9C9; min-height: 66px; max-height: 130px; line-height: 17px; resize: vertical; } .popupFormContent input:hover, .popupFormContent select:hover, .popupFormContent textarea:hover { border: 1px solid #ACACAC; } .popupFormContent select { padding-left: 6px; } .popupFormContent input:focus, .popupFormContent select:focus, .popupFormContent textarea:focus { outline: 0; } .popupFormContent option { background-color: #fff; } .popupFormContent option:hover { background-color: #ddd; } .popupFormContent option:first-child { margin-top: 2px; } .popupFormContent option:last-child { margin-bottom: 2px; } ::-webkit-input-placeholder { color: #999999; font-weight: 400; } :-moz-placeholder { color: #999999; font-weight: 400; } ::-moz-placeholder { color: #999999; font-weight: 400; } :-ms-input-placeholder { color: #999999; font-weight: 400; } p.add { font-weight: 600; color: #327CF8; cursor: pointer; margin-top: 27px; display: block; float: left; clear: both; } p.add:hover { color: #6DA1F8; } .benefits { float: right; width: 326px; padding: 30px 0 0; margin-left: 53px; } .benefitsTitle { font-weight: bold; font-size: 14px; content: #333; padding: 0; margin: 0 0 38px; } ul.benefitsList { list-style: none; padding: 0; margin: 0; } ul.benefitsList li { list-style: none; font-size: 14px; color: #666; padding: 0 0 0 30px; height: 12px; line-height: 12px; margin: 0 0 14px; background-image: url(ap_images/benefits_list_tick.png); background-repeat: no-repeat; background-position: 0px center; } /* Application Form */ .quickStart, .toolbarTop { height: 41px; } .formColumn { width: 49%; padding: 30px 0; float: left; } .page.singleColumnMode .formColumn { margin: 0 auto; float: none; } .formColumn.onlyColumn, .formColumn.onlyColumn:first-child { margin: 0 auto; float: none; } .formColumn.emptyColumn { display: none; } .formColumn:first-child { margin-right: 2%; } .formColumn>div { background-color: #fff; padding: 25px; margin-top: 22px; border-top: 3px solid red; -webkit-border-radius: 1px; -moz-border-radius : 1px; -o-border-radius : 1px; -ms-border-radius : 1px; border-radius : 1px; } .formColumn>div:first-child { margin-top: 0; } .formColumn>div.complete, body.appFormSubmitted .formColumn>div { border-top: 3px solid #56D037; } .formColumn>div table { border-spacing: 0; float: none; width: 100%; margin-top: 37px; } .formColumn>div table:first-child { margin-top: 0; } .formColumn tr.blockDivider { height: 15px; } .formColumn>div tr p { margin-top: 12px; } .formColumn>div tr:first-child p { margin-top: 0; } .formColumn>div td { padding: 0; vertical-align: top; width: 70%; padding-left: 2%; } .formColumn>div td:first-child { width: 28%; min-width: 130px; padding-left: 0; } .formColumn>div td:first-child p { font-weight: 800; width: 100%; } .formColumn>div td img { margin: 0 auto; display: block; } .avatarImage { border-radius:100%; } body.editingEnabled .avatarImage { cursor: pointer; } body.appFormSubmitted .avatarImage { cursor: default; } .dividerWrapper { cursor: pointer; } body.editingDisabled .dividerWrapper { cursor: default; } .formColumn>div h2 { color: #666666; margin-bottom: 37px; position: relative; float: left; } .formColumn>div.complete h2:before, body.appFormSubmitted .formColumn>div h2:before { content: ''; width: 23px; height: 23px; display: block; position: absolute; left: 100%; margin-left: 12px; background-image: url(ap_images/complete_tick.png); background-repeat: no-repeat; background-position: center; } .editStyle { text-decoration:none; margin-top:9px; } p.edit { width: 25px; } p.edit, p.addFieldsBtn, .editStyle { font-weight: 600; color: #327CF8; display: block; } p.edit, p.addFieldsBtn { cursor: pointer; margin-top: 27px; } p.edit:hover, .editStyle:hover { color: #6DA1F8; } .formColumn>div td:first-child p.uploadText { font-weight: 400; width: 339px; display: block; margin: 20px auto 0 auto; text-align:center; } body.editingEnabled .formColumn>div td:first-child p.uploadText { cursor: pointer; } .avatarArea { cursor:default; } /* ToolTips */ .tooltip { position: absolute; z-index: 10; padding: 0 0 10px; background-color: #CCC; pointer-events: none; } .tooltip .tooltipInner { height: 66px; min-width: 41px; padding: 0 20px; background-color: #CCC; -webkit-border-radius: 6px; -moz-border-radius : 6px; -o-border-radius : 6px; -ms-border-radius : 6px; border-radius : 6px; } .tooltip .tooltipInner p { height: 66px; line-height: 66px; font-size: 19px; font-family: 'Viga', Arial, sans-serif; color: #FFF; } .tooltip.rc_erac { background-color: transparent; margin: 0; padding: 0; } .tooltip.rc_erac .tooltipInner { background-color: #FFF; border: 1px solid #333; height: auto; min-width: 0; padding: 0px 10px; margin: 0; } .tooltip.rc_erac .tooltipInner p { height: auto; line-height: 1; color: #333; height: 35px; line-height: 35px; font-size: 13px; margin: 0; padding: 0; } /* jQuery Popup */ .jqueryPopupBG, .jqueryPopup { position: fixed; width: 100%; height: 100%; top: 0; left: 0; display: none; } .jqueryPopupBG { cursor: pointer; background-color: #fff; z-index: 99998; opacity: 0; } .jqueryPopup { z-index: 99999; pointer-events: none; } .jqueryPopup.notFixed { position: absolute; height: auto; } .jqueryPopup * { pointer-events: auto; } /* Form Styling */ #ui-datepicker-div {display: none;}/*fix datepicker glitch*/ .checkbox, .checkbox *, .labelCheckbox, .labelCheckbox *, .select, .select *, .radio, .radio *, .btn, .btn * { -webkit-touch-callout: none; -webkit-user-select : none; -khtml-user-select : none; -moz-user-select : none; -ms-user-select : none; user-select : none; } p.formLoadingMessage { background-image: url(ap_images/form_loading.gif); background-repeat: no-repeat; background-position: 0px center; height: 24px; line-height: 24px; padding: 0 0 0 34px; margin: 0; } .select, .select *, .checkbox, .checkbox *, .radio, .radio * { -webkit-user-select: none; -moz-user-select : none; -ms-user-select : none; -o-user-select : none; user-select : none; } input.styled { background-image: url(images/gradient_bg.png); background-repeat: repeat-x; background-position: 0px -39px; background-color: #DDD; padding: 0 12px; width: 240px; height: 39px; line-height: 39px; margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #008FCE; border: 1px inset #CCC; -webkit-border-radius: 3px; -moz-border-radius : 3px; -o-border-radius : 3px; -ms-border-radius : 3px; border-radius : 3px; -webkit-transition: background-color .2s, color .2s; -moz-transition: background-color .2s, color .2s; -o-transition: background-color .2s, color .2s; -ms-transition: background-color .2s, color .2s; transition: background-color .2s, color .2s; } input.styled.left { float: left; } input.styled.right { float: right; } input.styled:focus { background-color: #FFF; outline: none; color: #000; } input.narrow { width: 164px; } input.styled.hint_text { color: #8F8F8F; } .labelCheckbox { display: block; line-height: 16px; color: #4F4F4F; font-size: 12px; margin: 0; font-family: Arial, Helvetica, sans-serif; padding: 0; cursor: pointer; } .labelCheckbox * { cursor: pointer; margin-top: 3px; } .labelCheckbox.on { font-weight: bold; } .checkbox { width: 16px; height: 16px; cursor: pointer; margin: 10px 4px 10px 5px; border: 1px solid #C9C9C9; background-position: -9999px -9999px; background-repeat: no-repeat; background-image: url(ap_images/checkbox_tick.png); } .checkbox:hover { border: 1px solid #ACACAC; } .checkbox.on { background-position: 0 0; } .labelCheckbox .checkbox { float: left; margin: 10px 3px 10px 3px; } .labelCheckbox p { float: left; height: 30px; line-height: 30px; margin-right: 8px; } .checkboxLabel { margin-right: 7px; } .labelCheckbox.terms, .termsLink { margin: 27px 0; float: left; line-height: 16px; } .termsLink a { padding-left: 5px; text-decoration: none; color: red; } .termsLink a:hover { text-decoration: underline; } .labelRadio { display: block; width: 51px; height: 13px; line-height: 13px; font-family: Arial, Helvetica, sans-serif; color: #4B4B4B; font-size: 10px; padding: 0 0 0 11px; margin: 0; float: left; cursor: pointer; } .radio { width: 13px; height: 13px; background-image: url(images/form_radio.png); background-repeat: no-repeat; background-position: 0px top; cursor: pointer; margin: 0 3px 0 0; } .radio:hover, .labelRadio:hover .radio { background-position: -13px top; } .radio.on { background-position: -26px top; } .radio.on:hover, .labelRadio:hover .radio.on { background-position: -39px top; } .labelRadio .radio { float: left; } /*** select dropdowns start ***/ .select { padding: 0; margin: 3px 3px; width: auto; height: 30px; min-width: 71px; float: left; } .select.always_open { height: auto; } .select.always_open.enabled { cursor: default; } .select.always_open.enabled .option { cursor: pointer; } .select.always_open .optgroup .optgroupLabel { background-color: #f2f2f2; position: sticky; box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.15); z-index: 2; } .select.always_open .optgroup .optgroupLabel { top: 0; } .select.always_open .optgroup .optgroup .optgroupLabel { top: 30px; } .select.always_open.fs_searchable .optgroup .optgroupLabel { top: 30px; } .select.always_open.fs_searchable .optgroup .optgroup .optgroupLabel { top: 60px; } .select.always_open .optgroup .optgroupLabel p { font-weight: bold; padding-left: 10px; font-size: 14.5px; } .select.always_open .optgroup .optgroup .optgroupLabel { z-index: 1; background-color: #e0e0e0; } .select.always_open .optgroup .optgroup .optgroupLabel p { font-size: 14px; } .select.always_open .optgroup .optgroup .optgroupLabel { padding-left: 12px; } .select.always_open .optgroup .optgroup .option { padding-left: 15px; } .select.enabled { cursor: pointer; } .select.disabled { cursor: default; opacity: 0.7; } .selectWrapper.title .select { width: 79px !important; } .popupFormContent .slim { width: 79px !important; } .popupFormContent .standard { width: 171px !important; } .popupFormContent .double { max-width: 346px; width: 100%; clear: both; } html.mobile.ios .select div, html.mobile.android .select div { pointer-events:none; } .selectGhost { position: absolute; opacity: 0; z-index: 4; } .select.left { margin: 0; float: left; } .select.narrow { width: 140px; } .select p { padding: 0 10px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .select.narrow p { overflow: hidden; } .select.right { margin-right: 0; } .select * { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .select:focus { outline: 0; } .selectButton { float: right; width: 30px; height: 30px; background-image: url(ap_images/form_dropdown_arrow.png); background-position: center -5px; background-repeat: no-repeat; } .select.open .selectButton { background-position: center -45px; } .selectedOption, .option { font-size: 13px; color: #333; } .option { border-top: 1px solid #EFEFEF; } .option:first-child { border-top: 0; } .selectedOption { height: 30px; line-height: 30px; border: 1px solid #C9C9C9; -webkit-transition: border-color .1s, box-shadow .1s, color .2s, -webkit-border-radius .2s; -moz-transition : border-color .1s, box-shadow .1s, color .2s, -moz-border-radius .2s; -o-transition : border-color .1s, box-shadow .1s, color .2s, -o-border-radius .2s; -ms-transition : border-color .1s, box-shadow .1s, color .2s, -ms-border-radius .2s; transition : border-color .1s, box-shadow .1s, color .2s, border-radius .2s; } .selectedOption.placeholder p { font-weight: 400; color: #999999; } .select.open .selectedOption { border: 1px solid #ACACAC; } .select.enabled .selectedOption:hover { border: 1px solid #ACACAC; } .selectedOption p { font-weight: 600; } .select p { height: 30px; line-height: 30px; } .select.off { cursor: default; } .select.open.off .selectButton { background-position: center -5px; } .select.off .selectedOption { opacity: 0.5; } .select.off .selectedOption p { font-weight: 400; color: #999999; } .select.off .selectedOption:hover { border: 1px solid #C9C9C9; } .select.off .selectOptionWrapper { display: none; } .optgroupLabel { cursor: default; } .optgroupLabel p { font-weight: bold; } .option, .optgroupLabel { padding: 0; height: 30px; line-height: 30px; } .option.hide, .optgroup.hide { display: none; } .select.always_open .option.last { border-bottom: 0; } .option.hovered, .select.always_open .option:hover { background-color: rgba(0,0,0,0.05); color: #000; } .optgroup .option p { padding-left: 34px; } .option p span.selectFiltered { background-color: yellow; } .select.multiple .checkbox { margin: 7px 0 0 7px; float: left; } .select.multiple .option p { padding-left: 10px; } .select.always_open .selectOptionWrapper { overflow-y: auto; -webkit-border-radius: 3px; -moz-border-radius : 3px; -o-border-radius : 3px; -ms-border-radius : 3px; border-radius : 3px; } .select .selectOptionWrapper { position: absolute; overflow: hidden; background-color: #FFF; box-shadow: 0px 3px 6px -1px rgba(0,0,0,0.3); /*max-height: 150px !important;*/ } .select.always_open .selectOptionWrapper { background-image: none; box-shadow: none; position: static; overflow: hidden; } .select.always_open .selectOptionWrapper { border: 1px solid #C9C9C9; } .select.always_open .optgroupLabel, .select.always_open .option { border-right: 0; border-left: 0; } .select.open .selectOptionWrapper { z-index: 16000; } .select.small, .select.small .selectedOption, .select.small .option, .select.small .selectButton { height: 26px; line-height: 26px; } .select.small { margin: 0 16px 0 0; float: right; border-right: 1px solid #999; border-bottom: 1px solid #999; width: 197px; } .select.small .selectButton { width: 26px; background-position: center -6px; } .select.open.small .selectButton { width: 26px; background-position: center -45px; } .select.small .option { width: 173px; border-right: 1px solid #999; border-bottom: 1px solid #999; } .fs_select_search_wrapper { height: 30px; position: sticky; top: 0px; z-index: 3; background-color: #FFF; padding: 2px 0 0 2px; } p.fs_no_results_text { display: none; } p.fs_no_results_text.show { display: inline; } .fs_select_search_wrapper input, .fs_select_search_wrapper .clearSearch, .fs_select_search_wrapper .btn.search { float: left; } .fs_select_search_wrapper .clearSearch { cursor: pointer; opacity: 0.3; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: opacity .2s; -moz-transition : opacity .2s; -o-transition : opacity .2s; -ms-transition : opacity .2s; transition : opacity .2s; } .fs_select_search_wrapper .clearSearch:hover { opacity: 1; } .fs_select_search_wrapper .clearSearch, .fs_select_search_wrapper .clearSearch p { width: 26px; height: 26px; line-height: 26px; margin: 0; padding: 0; text-align: center; } .fs_select_search_wrapper input[type="text"] { height: 26px; line-height: 26px; margin: 0 -26px 0 0; padding: 0 26px 0 6px; width: 100%; max-width: 150px; } /*** select dropdowns end ***/ .checkbox.cpFormsInvalid, input.cpFormsInvalid, textarea.cpFormsInvalid, .select.cpFormsInvalid .selectedOption { -webkit-transition: border-color .2s, box-shadow .2s; -moz-transition : border-color .2s, box-shadow .2s; -o-transition : border-color .2s, box-shadow .2s; -ms-transition : border-color .2s, box-shadow .2s; transition : border-color .2s, box-shadow .2s; } .checkbox.cpFormsInvalid, input.cpFormsInvalid, .registerSignInFormWrapper input.cpFormsInvalid, .passwordSetupOrResetFormWrapper input.cpFormsInvalid, textarea.cpFormsInvalid, .select.cpFormsInvalid .selectedOption { border: 1px solid red; box-shadow: 0px 0px 1px red; } .select.always_open.cpFormsInvalid .selectOptionWrapper { border: 1px solid red; box-shadow: 0px 0px 1px red; } .btn.cpFormUploadBtn.cpFormsInvalid { box-shadow: 0px 0px 9px red; } .qtip-default { border-width: 2px; } .qtip-default.cpErrorTooltip { border-color: red; background-color: #FFF; } .qtip-shadow { -webkit-box-shadow: 1px 1px 3px 1px rgba(0,0,0,.3); -moz-box-shadow : 1px 1px 3px 1px rgba(0,0,0,.3); box-shadow : 1px 1px 3px 1px rgba(0,0,0,.3); } .set_fieldtype_form_range_date td.rowFormComponents { padding-bottom: 10px; } .set_fieldtype_form_range_date input[type="text"] { width: 107px; } .set_fieldtype_form_range_date .labelCheckbox { display: inline-block; width: 76px; height: 30px; line-height: 30px; vertical-align: middle; margin: -8px 0 0 5px; } .set_fieldtype_form_range_date .labelCheckbox .checkbox { float: none; display: inline-block; vertical-align: middle; } .set_fieldtype_form_range_date .labelCheckbox p { float: none; display: inline-block; margin: 0; padding: 0; line-height: 30px; vertical-align: middle; } .set_fieldtype_form_range_date .rowFormComponents > p { display: inline-block; padding: 0 8px; margin: 0; line-height: 30px; } /* set_fieldtype_form_month start */ .set_fieldtype_form_month td.rowFormComponents { padding: 2px 0; } .set_fieldtype_form_month .select { display: inline-block; line-height: 35px; vertical-align: middle; margin: 0 0 5px; padding: 0; } .set_fieldtype_form_month .select.month { width: 120px; margin-right: 2px; } .set_fieldtype_form_month .select.year { width: 90px; } /* set_fieldtype_form_month end */ /* set_fieldtype_form_range_month start */ .set_fieldtype_form_range_month td.rowFormComponents { padding-bottom: 10px; } .set_fieldtype_form_range_month p.from, .set_fieldtype_form_range_month p.to, .set_fieldtype_form_range_month .select { display: inline-block; line-height: 30px; vertical-align: middle; margin: 0; padding: 0; } .set_fieldtype_form_range_month p.dash { width: 0; height: 0; font-size: 0; clear: both; } .set_fieldtype_form_range_month p.from, .set_fieldtype_form_range_month p.to { width: 41px; } .set_fieldtype_form_range_month .select { float: none; } .set_fieldtype_form_range_month .select.month { width: 120px; } .set_fieldtype_form_range_month .select.from { margin-bottom: 5px; } .set_fieldtype_form_range_month .select.year { width: 90px; } .set_fieldtype_form_range_month .labelCheckbox { display: inline-block; width: 76px; height: 30px; line-height: 30px; vertical-align: middle; margin: -2px 0 0 5px; } .set_fieldtype_form_range_month .labelCheckbox .checkbox { float: none; display: inline-block; vertical-align: middle; } .set_fieldtype_form_range_month .labelCheckbox p { float: none; display: inline-block; margin: 0; padding: 0; line-height: 30px; vertical-align: middle; } /* set_fieldtype_form_range_month end */ /* set_fieldtype_form_year start */ .set_fieldtype_form_year td.rowFormComponents { padding: 2px 0; } .set_fieldtype_form_year .select { display: inline-block; line-height: 35px; vertical-align: middle; margin: 0 0 5px; padding: 0; width: 90px; } /* set_fieldtype_form_year end */ .set_fieldtype_form_range_year { margin: 0; } .set_fieldtype_form_range_year td>* { float: left; } .set_fieldtype_form_range_year td>p { height: 30px; line-height: 30px; margin: 0 5px; } .cpValueWrapper td.rowLabel label { width: 100px; } .cpValueWrapper.cpFormCommentRow td { padding: 12px 0; } .cpValueWrapper.cpFormCommentRow td p { line-height: 1.5; } .labelCheckbox .checkbox { float: left; margin: 10px 3px; } .cpValueWrapper.set_fieldtype_form_checkbox .checkbox, .cpValueWrapper.set_fieldtype_form_yesno .checkbox { margin-left: 0; } .set_fieldtype_form_range_year .labelCheckbox .checkbox { margin: 7px 4px 0 9px; } .set_fieldtype_form_range_year .labelCheckbox p { height: 26px; line-height: 26px; } .cpValueWrapper.set_fieldtype_form_range_year td .select { width: 79px !important; } .cpValueWrapper.set_fieldtype_form_range_year td .select.from { width: 78px !important; } .cpValueWrapper.set_fieldtype_form_select td .select, .cpValueWrapper.set_fieldtype_form_select_multiple td .select { min-width: 171px; } .set_fieldtype_bank_sort_code input[type="text"], .set_fieldtype_bank_sort_code input[type="number"] { width: 37px; } .set_fieldtype_form_largetext input { width: 348px; } .popupFormContent .blockDivider { float: none; width: 100%; display: block; height: 30px; margin: 0 0 30px 0; clear: both; border-bottom: solid 1px #999999; } .cpValueWrapper td .select { margin: 0; } .set_fieldtype_form_checkbox td, .set_fieldtype_form_yesno td { /*width: auto;*/ /*min-width: 323px;*/ padding: 0 3px; /*white-space: nowrap;*/ } .registerSignInFormWrapper, .passwordSetupOrResetFormWrapper { width: 410px; padding: 30px 0 30px 30px; } .registerSignInFormWrapper input, .passwordSetupOrResetFormWrapper input { padding: 0 10px; border: 1px solid #C9C9C9; height: 30px; line-height: 30px; font-weight: 600; font-size: 13px; } .registerSignInFormWrapper .select.collapsable, .passwordSetupOrResetFormWrapper .select.collapsable { width: 171px; max-width: 171px; min-width: 171px; } .registerSignInFormWrapper .labelCheckbox .checkbox, .passwordSetupOrResetFormWrapper .labelCheckbox .checkbox { margin: 0 10px 0 3px; } .registerSignInFormWrapper .btn.submit, .passwordSetupOrResetFormWrapper .btn.submit { margin-right: 29px; } .ui-datepicker { width: 18em; } .set_fieldtype_form_checkbox .labelCheckbox .checkbox, .set_fieldtype_form_yesno .labelCheckbox .checkbox { margin-right: 8px; } .set_fieldtype_form_checkbox, .set_fieldtype_form_yesno { clear: both; } p.addFieldsBtn { cursor: pointer; margin-top: 20px; width: 50px; } .btn.cpFormUploadBtn { float: left; } .removeBlockBtn, .cpFormUploadRemoveBtn { width: 25px; height: 25px; background-image: url(ap_images/form_remove.png); background-repeat: no-repeat; background-position: right center; cursor: pointer; } .cpFormUploadRemoveBtnWrapper { width: 25px; } .cpFormUploadRemoveBtn { margin: 0; background-position: center; } .removeBlockBtn { position: absolute; margin: 5px 0 0 -30px; } .subFormWrapper .removeBlockBtn { margin: 6px 0 0 -28px; } /**********************************/ /****** End Candidate Search ******/ /**********************************/ /**********************************/ /********* Avatar Uploader ********/ /**********************************/ div.jsac_div.syu_bl_avatar { height: auto; position:relative; } div.jsac_div.syu_bl_avatar label { line-height: 27px; display: block; padding-left:5px; } div.jsac_div.syu_bl_avatar label.topLabel { padding-top: 30px; } div.jsac_div.syu_bl_avatar label span.outerUploadButton { background-color:#E8E8E8; padding:4px 6px 4px 6px; font-weight:700; } div.jsac_div.syu_bl_avatar label span.outerFacebookButton { color:#254B97; font-weight:700; } #facebookUploaderContainer { position:relative; } #facebookUploaderContainer p { text-align:left; width:200px; margin-left:auto; margin-right:50px; padding-top:10px; padding-bottom:10px; color:#7F7F7F; line-height:17px; } #fbPhotoButton, .fb_iframe_widget { /* position:absolute !important; right:10px; top:20px;*/ display:block !important; height:31px; margin-left:auto; margin-right:50px; width:200px; } .cc_avatar .indvUploaderBtn#fileUploadBtn, body.cc_avatar .qq-upload-list { display: none; } body.cc_avatar .qq-upload-list { padding: 0; } body.cc_avatar { padding: 30px; } .cc_avatar .qq-upload-button { background-color:#5ABC2C !important; width:200px; margin-left:auto; margin-right:50px; margin-top:30px; } .cc_avatar .avatarInfoBox { position:absolute; left:30px; top:30px; max-width:225px; display:block; } .cc_avatar .avatarInfoTitle { color:#242C86; font-weight:700; font-size:15px; padding-bottom:5px; text-align:left; position:relative; display:block; } .cc_avatar .avatarInfoText { text-align:left; position:relative; display:block; color:#7F7F7F; line-height:17px; } .popupWindow.cpPicker.cc_avatar .cpCropper, .popupWindow.cpPicker.cc_avatar .cropper-container { overflow: visible !important; } .popupWindow.cpPicker.cc_avatar .cpCropper { height: 300px; text-align: center; overflow: hidden; background-color: #999; border: 1px solid #666; display: block; } .popupWindow.cpPicker.cc_avatar { width: 570px; } .popupWindow.cpPicker.cc_avatar, .popupWindow.cpCropperPopup.cc_avatar .popupWindowBody { height: auto; position: relative; } .popupWindowHeader { padding: 30px; background-color: red; } .popupWindowHeader h3 { font-size: 19px; margin: 0; line-height: 23px; color: #FFF; } .popupWindowHeader .btn { background-color: transparent; box-shadow: none; color: transparent; width: 14px; height: 23px; min-width: 0; padding: 0; margin: 0; background-image: url(ap_images/form_close.png); background-repeat: no-repeat; background-position: center; } .popupWindowHeader .btn p { display: none; } .popupWindow.cpPicker.cpCropperPopup.cc_avatar .actionsWrapper { background-color: white; width: 176px; height: 176px; padding: 40px 0 0; margin: 12px auto 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; } .popupWindow.cpPicker.cc_avatar .btn.right.pickerChoose { position: absolute; margin: 135px 0 0 270px; float: none; } .popupWindow.cpPicker.cc_avatar .cpCropPreview { float: left; margin: 12px 0 0 12px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100%; overflow:hidden; } .popupWindow.cpPicker.cc_avatar { width:600px; background-color: #FFF; } .popupWindow.cpPicker.cpCropperPopup.cc_avatar .actionsWrapper { padding-top:0px; margin-bottom:10px; border: 1px solid gray; height: 178px; } .iframeWrapper iframe { width:100%; height: 320px; } .popupFormWrapper.documentSigning .iframeWrapper { display: block; background-image: url(cp_images/loading_large_grey_on_white.gif); background-repeat: no-repeat; background-position: center; position: absolute; height: auto; bottom: 0; top: 0; left: 0; right: 0; margin-top: 95px; margin-bottom: 12px; margin-right: 12px; margin-left: 12px; } .popupFormWrapper.documentSigning .iframeWrapper iframe { width:100%; height: 100%; } .cpCropperPopup .instructions { display: none; } .cropper-container { margin-top: -1px; height: 335px; } .cpCropper { background-color: #111; } .cpCropPreview { overflow: hidden; -webkit-border-radius: 50%; -moz-border-radius : 50%; -o-border-radius : 50%; -ms-border-radius : 50%; border-radius : 50%; margin: 30px auto 0 auto; border: 1px dashed #A1A1A1; width: 165px; height: 165px; } .pickerChoose { background-color: #56D037; position: absolute; right: 30px; margin: 0; bottom: 0; } .pickerChoose p { color: #FFF; } .previewTitle { margin: 9px auto 30px auto; text-align: center; font-size: 16px; } .actionsWrapper { position: relative; } /**********************************/ /******* End Avatar Uploader ******/ /**********************************/ /*Login form*/ .signUpPageFormWrapper.signin { position:absolute; left:-250px; width:320px; background-color:white; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px; margin-top:0px; height:0px; padding: 5px 10px; cursor: default; z-index: 1; overflow:hidden; -webkit-transition: height .1s ease-out; -moz-transition : height .1s ease-out; -o-transition : height .1s ease-out; -ms-transition : height .1s ease-out; transition : height .1s ease-out; } .signUpPageFormWrapper.signin.open { -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.45); -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.45); box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.45); height:170px; -webkit-transition: height .1s ease-out; -moz-transition : height .1s ease-out; -o-transition : height .1s ease-out; -ms-transition : height .1s ease-out; transition : height .1s ease-out; } #loginSubmitBtnEmployer { float:right; margin-right:6%; margin-top:6px; background-color: #56D037; } #loginSubmitBtnEmployer p { color:white; font-weight:500; } #jobseekerSignin { cursor:default; } .signUpPageFormWrapper input.styled.top { margin-top:2px; } .signUpPageFormWrapper input.styled { padding: 0 10px; font-size: 13px; font-weight: 600; border: 1px solid #C9C9C9; height: 30px; line-height: 30px; width:88%; margin:0 auto 6px auto; display:block; background-image:none; background-color:white; color:black; -webkit-border-radius: 0px; -moz-border-radius: 0px; -o-border-radius: 0px; -ms-border-radius: 0px; border-radius: 0px; } .loginForgotPasswordBtn { float: right; margin-right: 6%; margin-top: 6px; } .loginForgotPasswordBtn p span { font-weight: inherit; } .userSelect { margin:0; padding:0; } .signInDropDown { height: 57px; padding: 20px 30px 20px 10px; } p.loginError { text-align:center; margin-top:2px; margin-bottom:2px; } .loggedIn .userSelect { margin: 0 20px 0 0; padding: 20px 30px 20px 0px; } /* End login form */ .loggedOutHeader { width:100%; text-align:center; font-family: 'Lato', sans-serif; margin-top:30px; } .greenPulse { -webkit-animation-name: greenPulse; -webkit-animation-duration: .26s; -webkit-animation-iteration-count: 9; animation-name: greenPulse; animation-duration: .26s; animation-iteration-count: 9; background-color: #56D037; } .greenPulse p { color:white; } @-webkit-keyframes greenPulse { from { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } 25% { -webkit-transform:rotate(5deg); -moz-transform:rotate(5deg); -ms-transform:rotate(5deg); -o-transform:rotate(5deg); transform:rotate(5deg); } 50% { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } 75% { -webkit-transform:rotate(-5deg); -moz-transform:rotate(-5deg); -ms-transform:rotate(-5deg); -o-transform:rotate(-5deg); transform:rotate(-5deg); } to { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } } @keyframes greenPulse { from { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } 25% { -webkit-transform:rotate(5deg); -moz-transform:rotate(5deg); -ms-transform:rotate(5deg); -o-transform:rotate(5deg); transform:rotate(5deg); } 50% { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } 75% { -webkit-transform:rotate(-5deg); -moz-transform:rotate(-5deg); -ms-transform:rotate(-5deg); -o-transform:rotate(-5deg); transform:rotate(-5deg); } to { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } } .borderPulse { -webkit-animation-name: borderPulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-name: borderPulse; animation-duration: 2s; animation-iteration-count: infinite; animation-direction: alternate; } @-webkit-keyframes borderPulse { from { border-bottom: 0px solid green;} to { border-bottom: 89px solid green;} } @keyframes borderPulse { from { border-bottom: 0px solid green;} to { border-bottom: 89px solid green;} } .ui-datepicker-prev.ui-corner-all, .ui-datepicker-next.ui-corner-all { display: none; } .ui-datepicker .ui-datepicker-title { margin:0; } .ui-datepicker .ui-datepicker-header { border-radius:0px; border:none; background:#ededed; padding:5px; } .ui-datepicker-month, .ui-datepicker-year { border:none; background-color:transparent; } table.ui-datepicker-calendar { width:95%; margin-left:2.5%; } .ui-datepicker { padding:0px; width:20em; border: 0; border-radius: 0; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.45); } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background: #EDEDED; } .userClose { margin-right: 20px; overflow: hidden; } .userClose, .userClose p { height: 57px; line-height: 57px; } .userClose a { color: #666666; text-decoration: none; } body.loggedOut .userClose { display: none; } .userLogout { margin-right: 20px; overflow: hidden; } .userLogout, .userLogout p { height: 57px; line-height: 57px; } .userLogout a { color: #666666; text-decoration: none; } body.loggedOut .userLogout { display: none; } .page.applicationFormComplete { background-color: #FFF; } .page.applicationFormComplete h2, .page.applicationFormComplete p { text-align: center; margin: 20px auto; } .pageLoader { background-color: rgba(255,255,255,0.75); position: absolute; z-index: 3; top: 89px; bottom: 0px; width: 100%; background-image: url(ap_images/page_loading.gif); background-repeat: no-repeat; background-position: center 38px; } .pageLoader:before { content: 'Please wait...'; display: block; text-align: center; margin: 19px auto 0; } .checkbox.cpFormsInvalid.yesNoToggle { border: 0; box-shadow: 0px 0px 6px 0px red; } .checkbox.yesNoToggle { width: 70px; height: 24px; border: 0; background: transparent; background-image: none; overflow: hidden; white-space: nowrap; -webkit-border-radius: 12px; -moz-border-radius : 12px; -o-border-radius : 12px; -ms-border-radius : 12px; border-radius : 12px; } .checkbox.yesNoToggle:before { content: "Yes"; background-color: #56D037; margin-left: -52px; padding-left: 10px; -webkit-transition: margin .2s; -moz-transition : margin .2s; -o-transition : margin .2s; -ms-transition : margin .2s; transition : margin .2s; } .checkbox.yesNoToggle:after { content: "No"; background-color: red; padding-left: 27px; } .checkbox.yesNoToggle:before, .checkbox.yesNoToggle:after { display: inline-block; vertical-align: top; width: 70px; height: 24px; line-height: 24px; text-transform: uppercase; font-size: 10px; color: #FFF; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); } .checkbox.yesNoToggle .checkboxInner { display: block; margin: -24px 0 0 -1px; z-index: 2; position: absolute; width: 38px; height: 24px; box-shadow: inset -1px -1px 1px rgba(0,0,0,0.2); -webkit-border-radius: 12px; -moz-border-radius : 12px; -o-border-radius : 12px; -ms-border-radius : 12px; border-radius : 12px; -webkit-transition: margin .2s, background .2s; -moz-transition : margin .2s, background .2s; -o-transition : margin .2s, background .2s; -ms-transition : margin .2s, background .2s; transition : margin .2s, background .2s; background: #F3F3F3; /* Old browsers */ background: -moz-linear-gradient(top, rgba(249,249,249,1) 0%, rgba(219,219,219,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,249,249,1)), color-stop(100%,rgba(219,219,219,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(249,249,249,1) 0%,rgba(219,219,219,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(249,249,249,1) 0%,rgba(219,219,219,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(249,249,249,1) 0%,rgba(219,219,219,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(249,249,249,1) 0%,rgba(219,219,219,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#dbdbdb',GradientType=0 ); /* IE6-9 */ } .checkbox.yesNoToggle:hover .checkboxInner, .checkbox.yesNoToggle:active .checkboxInner { background: #F3F3F3; /* Old browsers */ background: -moz-linear-gradient(top, rgba(256,256,256,1) 0%, rgba(225,225,225,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(256,256,256,1)), color-stop(100%,rgba(225,225,225,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(256,256,256,1) 0%,rgba(225,225,225,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(256,256,256,1) 0%,rgba(225,225,225,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(256,256,256,1) 0%,rgba(225,225,225,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(256,256,256,1) 0%,rgba(225,225,225,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#dbdbdb',GradientType=0 ); /* IE6-9 */ } .checkbox.yesNoToggle.on:before { margin-left: 0; } .checkbox.yesNoToggle.on .checkboxInner { margin-left: 33px; } /* Media Queries */ @media screen and (max-width: 1380px) { ul.pageTopNavigationMenu { width: 100%; padding-left: 115px; padding-right: 250px; } ul.pageTopNavigationMenu li:first-child a, ul.pageTopNavigationMenu li:first-child a span { padding-left: 15px; } } @media screen and (max-width: 980px) { .formColumn { width: 100%; max-width: 564px; margin: 0 auto; float: none !important; } .toolbarTop { width: 100%; max-width: 564px; margin: 0 auto; } .formColumn:first-child { margin-right: auto; } } @media screen and (max-width: 930px) { .select, .set_fieldtype_form_text, .set_fieldtype_form_date, .set_fieldtype_form_date_of_birth, .set_fieldtype_form_date_of_birth_18, .set_fieldtype_form_telephone, .set_fieldtype_form_largetext, .set_fieldtype_form_email, .set_fieldtype_form_consent_email, .set_fieldtype_nmc_hpc_pin, .set_fieldtype_form_ni_number .set_fieldtype_form_range_year { float: none; } } @media screen and (max-width: 720px) { .benefits { float: none; width: 100%; padding: 30px 30px 0; margin-left: 0; } .select, .set_fieldtype_form_text, .set_fieldtype_form_date, .set_fieldtype_form_date_of_birth, .set_fieldtype_form_date_of_birth_18, .set_fieldtype_form_telephone, .set_fieldtype_form_largetext, .set_fieldtype_form_email, .set_fieldtype_form_consent_email, .set_fieldtype_nmc_hpc_pin, .set_fieldtype_form_ni_number, .set_fieldtype_form_range_year { float: left; } .set_fieldtype_form_range_month .select { float: right !important; display: block; width: 120px !important; } .set_fieldtype_form_range_month .range_month_wrapper { width: 163px; } .set_fieldtype_form_range_month .labelCheckbox { display: block; margin-left: 41px; height: auto; } .set_fieldtype_form_range_date .labelCheckbox { display: block; margin-left: -3px; height: auto; } .set_fieldtype_form_range_year .labelCheckbox { clear: both; float: none; margin-left: -8px; } } @media screen and (max-width: 520px) { body { min-width: 315px; } .registerSignInFormWrapper, .passwordSetupOrResetFormWrapper { width: 100%; padding: 30px; } .select, .set_fieldtype_form_text, .set_fieldtype_form_date, .set_fieldtype_form_date_of_birth, .set_fieldtype_form_date_of_birth_18, .set_fieldtype_form_telephone, .set_fieldtype_form_largetext, .set_fieldtype_form_email, .set_fieldtype_form_consent_email, .set_fieldtype_nmc_hpc_pin, .set_fieldtype_form_ni_number, .set_fieldtype_form_range_year { float: none; width: 100%; margin: 6px 0; } .registerSignInFormWrapper input, .passwordSetupOrResetFormWrapper input { width: 100%; height: 40px; line-height: 40px; } .registerSignInFormWrapper .select, .passwordSetupOrResetFormWrapper .select { max-width: 100%; min-width: 100%; position: relative; height: 40px; } .registerSignInFormWrapper .selectedOption, .passwordSetupOrResetFormWrapper .selectedOption , .registerSignInFormWrapper .select p, .passwordSetupOrResetFormWrapper .select p , .registerSignInFormWrapper .selectButton, .passwordSetupOrResetFormWrapper .selectButton , .registerSignInFormWrapper .option, .passwordSetupOrResetFormWrapper .option , .registerSignInFormWrapper .optgroupLabel, .passwordSetupOrResetFormWrapper .optgroupLabel { height: 40px; line-height: 40px; } .registerSignInFormWrapper .selectButton, .passwordSetupOrResetFormWrapper .selectButton { background-position: center 0px; } .registerSignInFormWrapper .select.open .selectButton, .passwordSetupOrResetFormWrapper .select.open .selectButton { background-position: center -41px; } .registerSignInFormWrapper .selectOptionWrapper, .passwordSetupOrResetFormWrapper .selectOptionWrapper { min-width: 100%; max-width: 100%; max-height: 200px; } .popupFormWrapper { margin: 8.25%; } .registerSignInFormWrapper, .passwordSetupOrResetFormWrapper { text-align: center; } .registerSignInFormWrapper .btn, .passwordSetupOrResetFormWrapper .btn { float: none; display: inline-block; margin: 0 auto; } .registerSignInFormWrapper .btn.submit, .passwordSetupOrResetFormWrapper .btn.submit { margin-right: 5px; } .registerSignInFormWrapper .select, .passwordSetupOrResetFormWrapper .select { text-align: left; } ul.benefitsList li { height: auto; line-height: 17px; background-position: 0px 3px; } ul.pageTopNavigationMenu { padding-left: 85px; } .signUpPageFormWrapper.signin { width: 250px; left: -171px; } .signUpPageFormWrapper input.styled { height: 40px; line-height: 40px; } .signUpPageFormWrapper.signin.open { height: 190px; } .ui-datepicker, .ui-datepicker * { font-size: 14px; } #ui-datepicker-div { width:100% !important; left:0px !important; position:fixed !important; top:auto !important; bottom:0px !important; } .ui-datepicker td span, .ui-datepicker td a { text-align: center; padding: .5em .2em; } .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { height: 30px; } } .subFormAnimWrapper { position: relative; overflow: visible; } tr.subFormWrapper.off > td > .subFormAnimWrapper, div.subFormWrapper.off { height: 0; padding-top: 0; padding-bottom: 0; border: 0; overflow: hidden; } tr.subFormWrapper > td > .subFormAnimWrapper > table, div.subFormWrapper { border: 1px solid #D0D0D0; border: 1px solid rgba(0,0,0,0.06); padding: 3px 10px 3px 15px; margin: 5px 0 7px 0; border-radius: 8px; background-color: rgba(0,0,0,0.08); } .cpFormWrapper table { width: 100%; } .cp_form_doc_upload_drop_zone .qq-upload-list li { background: transparent; } .cp_form_doc_upload_drop_zone .qq-upload-list li .qq-progress-bar { background: #56D037; height: 10px; -webkit-border-radius: 5px; -moz-border-radius : 5px; -o-border-radius : 5px; -ms-border-radius : 5px; border-radius : 5px; } .cp_form_doc_upload_drop_zone .qq-upload-list li .qq-upload-spinner , .cp_form_doc_upload_drop_zone .qq-upload-list li .qq-upload-size { display: none !important; } .cpFormUploadFilename { max-width: 270px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .ui-datepicker-current { display: none; } .ui-widget-content { border: 1px solid #EAEAEA; } .signInDivider { width: auto; border-top: 1px dashed #FFF; margin: 10px 30px; } .signInDivider p { margin: -10px auto 0; padding: 0; text-align: center; color: #FFF; background-color: #1EA8DA; width: 40px; font-weight: 600; } .appFormProgressBarWrapper span { display: none; } .popupWindowBody { padding: 20px; } .passwordResetPopupWindow label { width: 370px; display: block; } .passwordResetPopupWindow label p { line-height: 39px; } .passwordResetPopupWindow input.styled { float: right; } p.signUpError { color: red; padding: 10px 0; } body.ap_avatar .indvUploaderBtn p { padding: 0 6px; } .cpFormWrapper span.uploadBtnText.fieldTitle, .cpFormWrapper span.uploadBtnText.custom { display: none; } /* footer */ .siteFooterWrapper { float: none; width: auto; padding: 30px 30px 30px 10px; } .siteFooterWrapper ul, .siteFooterWrapper ul li { list-style: none; margin: 0; padding: 0; } .siteFooterWrapper ul { float: right; } p.default_copyright { float: left; } .siteFooterWrapper ul li, .siteFooterWrapper ul li a, .siteFooterWrapper p.default_copyright { color: #777; } .siteFooterWrapper ul li a { text-decoration: none; } .siteFooterWrapper ul li p { font-size: 11px; text-decoration: none; } .siteFooterWrapper ul li { display: inline-block; margin-left: 20px; } @import 'cp_form_fields/CPFormFieldAddressLookup'; .cp_form_field_address_lookup_wrapper { & , input[type="text"] , input[type="search"] { width: 100%; max-width: 244px; } }