@charset "UTF-8"; /* CSS Document - Thankyou Payroll Global styles 1.0.2 */ /*--- LOAD CUSTOM FONT-FACE ---*/ /*@license MyFonts Webfont Build ID 908113, 2011-08-04T15:08:24-0400 The fonts listed in this notice are subject to the End User License Agreement(s) entered into by the website owner. All other parties are explicitly restricted from using the Licensed Webfonts(s). You may obtain a valid license at the URLs below. Webfont: Museo Slab 900 URL:http://new.myfonts.com/fonts/exljbris/museo-slab/900/ Foundry: exljbris Copyright: Copyright (c) 2009 by Jos Buivenga. All rights reserved. License: http://www.myfonts.com/viewlicense?1056 Licensed pageviews: 10,000/month CSS font-family: MuseoSlab-900 CSS font-weight: normal CSS font-style: normal Webfont: Museo Slab 500 URL:http://new.myfonts.com/fonts/exljbris/museo-slab/500/ Foundry: exljbris Copyright: Copyright (c) 2009 by Jos Buivenga. All rights reserved. License: http://www.myfonts.com/viewlicense?1056 Licensed pageviews: unlimited/month CSS font-family: MuseoSlab-500 CSS font-weight: normal CSS font-style: normal (c) 2011 Bitstream Inc */ @font-face {font-family: 'MuseoSlab-900';src: url('webfonts/eot/style_183114.eot?#iefix') format('embedded-opentype'),url('webfonts/woff/style_183114.woff') format('woff'),url('webfonts/ttf/style_183114.ttf') format('truetype'),url('webfonts/svg/style_183114.svg#MuseoSlab-900') format('svg');} @font-face {font-family: 'MuseoSlab-500';src: url('webfonts/eot/style_183117.eot?#iefix') format('embedded-opentype'),url('webfonts/woff/style_183117.woff') format('woff'),url('webfonts/ttf/style_183117.ttf') format('truetype'),url('webfonts/svg/style_183117.svg#MuseoSlab-500') format('svg');} /*--- RESET ---*/ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;} /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} body {line-height:1; background-color:#fff;} ol, ul {list-style:none;} blockquote, q {quotes:none;} blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;} table {border-collapse:collapse; border-spacing:0;} /*--- CORE STRUCTURE ------------------------------------------------------------------------------------------------------------------*/ body { background:url(../images/bgx_header_home.gif) repeat-x left top; } #container, #container_pp { width:955px; margin:0 auto; } /*--- GENERAL TYPOGRAPHY --------------------------------------------------------------------------------------------------------------*/ /*--- RULES ---*/ body { font-family:'Lucida Grande','Helvetica Neue', Helvetica, Arial, sans-serif; font-size:.75em; color:#4e5753; line-height:1.6em; } h1, h2 { font-family:'MuseoSlab-500', Georgia; padding:.3em 0; line-height:1.4em;} h3, h4 { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif, 'Lucida Grande'; padding:.3em 0; line-height:1.4em; } h1 { font-family:'MuseoSlab-900'; } h1 { color:#606966; font-size:2.4em; } h2 { color:#5da9dd; font-size:2em; } h3 { color:#c8c07b; font-size:1.6em; } h3 strong { color:#8e7922; } h4 { color:#8e7922; font-size:1.3em; } h5 { color:#8e7922; font-size:1.1em; } #main_alert h1 { font-size:2em; } #left_col_forms h1, #left_col.forms h1 { padding-bottom:0.7em; } p {padding:.5em 0;} strong {font-weight:bold;} em {font-style:italic;} #right_col h1, #right_col h2, #right_col h3, #right_col h4 { color:#606966; } #right_col h3 {font-family:MuseoSlab-900;} p.float_left { float:left; } /*--- COMMON ELEMENTS ----------------------------------------------------------------------------------------------------------------*/ /* common page element containers */ /* the .page_object class provides a common invisible container, which will fill the width of the parent block that it sits in */ .page_object { position:relative; float:left; clear:left; margin:10px 0 25px 0; width:100%; } .page_object_img { float:left; margin-right:20px; margin-bottom:25px; background:#faf9eb; padding:10px; border:1px solid #e6e4cd; -webkit-box-shadow:0 0 2px 0px rgba(0,0,0,0.1); box-shadow:0 0 2px 0px rgba(0,0,0,0.1); } /* floaters */ .go_left { float:left; clear:left; } .go_right { float:right; clear:right; } .no_clear { clear:none !important; } /* text alignment */ .text_left { text-align:left; } .text_right { text-align:right; } .text_center { text-align:center; } .clearme { clear:both; } /* columns */ .columns, .column { float:left; } .columns { width:100%; } /* column containing block */ .column { clear:none !important; } .col_x2 .column { width:47.5%; margin-right:5%; } .col_x3 .column { width:30%; margin-right:2%; } /* column widths */ .col_x4 .column { width:22%; margin-right:2%; } .col_x5 .column { width:18%; margin-right:2%; } .col_x4 .column.span_2 { width:45%; } /* element that spans 2 columns in a 4 column layout */ .col_x2 .column.col_2, .col_x3 .column.col_3, .col_x4 .column.col_4, .col_x5 .column.col_5 { margin-right:0 !important; } /* remove 'gutter' on last column - must be set or last col will be too wide. */ #container ul.column { padding-left: 0; } /* removes default list padding */ .col_x2 .f_field.column { width:45%; margin-right:5%; clear:none; } .col_x2 .f_field.column.col_2 { width:40%; } .about_page col_x2 .column { margin-right:3%; } /* generic width definers */ .w40 { width:40px; } .mw40 { min-width:40px; } .w60 { width:60px; } .mw60 { min-width:60px; } .w80 { width:80px; } .mw80 { min-width:80px; } .w90 { width:90px; } .mw90 { min-width:90px; } .w100 { width:100px; } .mw100 { min-width:100px; } .w120 { width:120px; } .mw120 { min-width:120px; } .w150 { width:150px; } .mw150 { min-width:150px; } .w200 { width:200px; } .mw200 { min-width:200px; } .w220 { width:220px; } .mw220 { min-width:220px; } .w250 { width:250px; } .mw250 { min-width:250px; } .w300 { width:300px; } .mw300 { min-width:300px; } .w350 { width:350px; } .mw350 { min-width:350px; } .w400 { width:400px; } .mw400 { min-width:400px; } .w500 { width:500px; } .mw500 { min-width:500px; } .w600 { width:600px; } .mw600 { min-width:600px; } .wp100 { width:100%; } .wp75 { width:75%; } .wp66 { width:66%; } .wp50 { width:50%; } .wp33 { width:33%; } .wp25 { width:25%; } /* generic height definers */ .mh450 { min-height:450px; } /* generic margin adjusters */ .mt-20px { margin-top:-20px; } .mt-10px { margin-top:-10px; } .mt0px { margin-top:0px; } .mt10px { margin-top:10px; } .mt20px { margin-top:20px; } .mt30px { margin-top:30px; } .ml10px { margin-left:10px; } .ml15px { margin-left:15px; } .ml20px { margin-left:20px; } .ml25px { margin-left:25px; } /*--- GENERIC PAGE STRUCTURE ---*/ /*--- PAGE HEADER ---*/ #header, header { height:135px; position:relative; font-size:110%; overflow:visible; margin-bottom:2.2em; } .dashboard header { margin-bottom:2em; } #logo { position:absolute; left:0; top:0; } /*-- new login/signin/signout buttons (in conjunction with ) --*/ #but_login, #but_signup, #but_welcome, #but_logout { position:absolute; top:10px; } #but_welcome, #but_login { right:100px; } #but_signup, #but_logout { right:10px; } #but_login a, #but_welcome a { background:#a6a6a6; } #but_welcome a { cursor:default; } /*--- SITE NAV - PUBLIC and CLIENT sites ---*/ ul#site_nav { width:680px; position:absolute; right:0; bottom:17px; z-index:3000; padding:0; margin:0; } #site_nav li { position:relative; float:left; padding:0; margin:0; background:url(../images/bgno_nav_div.gif) no-repeat left center; list-style:none; } #site_nav a { float:left; padding:8px 12px; color:#68aeff; font-size:15px; border-bottom:3px solid #dde89f; } #site_nav a:hover, #site_nav a:active, #site_nav a:focus { color:#388ff5; border-color:#e0f1ff; } /*-- drop-down hover stuff --*/ #site_nav li.sub a { padding-right:24px; background:url(../images/bgno_navarrow.png) no-repeat right center; } #site_nav li.sub a:hover { background-image:url(../images/bgno_navarrow_hover.gif); } #site_nav li.sub li a, #site_nav li.sub li a:hover { background-image:none; padding-right:12px; } #site_nav li ul { position:absolute; left:-9999px; top:35px; z-index:120; border:3px solid #dde89f; border-top:none; font-size:100%; } #site_nav li:hover ul, #site_nav li ul:hover, #site_nav li:hover li ul a { left:0; } #site_nav li ul a { display:block; float:left; padding:6px 12px; } #site_nav li:hover ul li a { color:rgb(104,174,255); } #site_nav li ul li a, #site_nav li ul li a:hover { border:none; color:rgb(56,143,245); } #site_nav li ul li { background:#fff; width:170px; } #site_nav li ul li:last-child a { padding-bottom:12px; } /*-- nav (CLIENT SITE additional) --*/ #site_nav.payroll { width:680px; } #site_nav.payroll a { color:#979797; font-size:15px; } #site_nav.payroll a:hover, #site_nav.payroll a:active, #site_nav.payroll a:focus { color:#4e4e4e; border-color:#4e4e4e; } /*-- drop-down hover stuff --*/ #site_nav.payroll li:hover ul li a { color:#979797; } #site_nav.payroll li ul li a, #site_nav.payroll li ul li a:hover { color:#4e4e4e; } /*-- offset classes for right side drop-down elements --*/ #site_nav li.center:hover ul { left:-33% } #site_nav li.left:hover ul { left:-100%; } /*-- V --old nav for cached browsers that are misbehaving... remove in October 2013 -- V --*/ /*--- SITE NAV payroll ---*/ #site_nav_payroll {width:680px; margin-left:-2px; position:absolute; right:0; bottom:26px; z-index:3000;} #site_nav_payroll li {float:left; border-left:2px solid #dbdedd; position:relative;} #site_nav_payroll li:first-child {border-left:0;} #site_nav_payroll a {padding:2px; margin:0 10px; color:#979797; font-size:15px; border-bottom:2px solid #fff;} #site_nav_payroll a:hover, #site_nav_payroll a:active, #site_nav_payroll a:focus {color:#4e4e4e; border-color:#4e4e4e;} /*-- drop-down hover stuff --*/ #site_nav_payroll li.sub {padding-right:8px; background:url(../images/bgno_navarrow_payroll.gif) no-repeat right center;} #site_nav_payroll li.sub:hover {background-image:url(../images/bgno_navarrow_hover_payroll.gif);} #site_nav_payroll li ul {position:absolute; left:-9999px; top:20px; z-index:120; padding-top:12px; font-size:100%;} #site_nav_payroll li:hover ul, #site_nav_payroll li ul:hover, #site_nav_payroll li:hover li ul a {left:0;} #site_nav_payroll li ul a {display:block; float:left; color:rgba(104,174,255,0); -moz-transition:all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out;} #site_nav_payroll li:hover ul li a { color:#979797;} #site_nav_payroll li ul li a, #site_nav_payroll li ul li a:hover {border:none; color:#4e4e4e;} #site_nav_payroll li ul li {background:#f1f8fe; width:170px; padding-top:3px; padding-bottom:3px; border-top:1px solid #dad49d; border-left:1px solid #dad49d !important; border-right:1px solid #dad49d;} #site_nav_payroll li ul li:last-child {border-bottom:1px solid #dad49d;} /*--- HEADER balances ---*/ .hdr_dsh_balances { float:right; margin-top:10px; margin-bottom:5px; margin-right:8%; } .hdr_balances { width:100%; float:right; padding:6px 10px; border-radius:3px; background:#dde89f; } .hdr_balances:hover { background:#c6d37c; } .hdr_balance { width:100%; float:right; clear:right; } .hdr_balance .bal_fees { border-top:1px solid rgba(0,0,0,0.1); } .hdr_balance p { width:100%; float:left; clear:left; padding:0; margin:0; font-size:0.9em; } .hdr_balance p a { float:left; width:100%; color:#555; color:rgba(0,0,0,0.5); } .hdr_balance p a:link { color:#777; color:rgba(0,0,0,0.5); } .hdr_balance p a:hover { color:#000; color:rgba(0,0,0,0.8); } .hdr_bal_type { float:left; } .hdr_bal_amount { float:right; } .client_logout { float:right; top:10px !important; right:0 !important; } .client_logout a.custom.logout { height:100%; padding:6px 10px; margin:0; margin-left:5px; border:none; font-size:.9em; font-weight:normal; text-shadow:none; border-radius:3px !important; box-shadow:none; } /*--- RIGHTCOL content elements ---*/ article.pagetsr {background:#faf9eb; padding:20px; border-top:8px solid #eae4b2; margin-bottom:2em;} #right_col article.blue {border-color:#c0e2ff;} #right_col .pagetsr h4 {color:#a6882e;} #right_col li {color:#8e7922;} article.pagecalc {background:#fcf8c3; border-top:8px solid #dbf298; margin-bottom:2em; padding:20px;} /*--- FOOTER ---*/ #footer_nav { border-top:4px solid #e0f1ff; border-bottom:4px solid #e0f1ff; clear:both; float:left; width:100%; padding:8px 0; } #footer_nav li { float:left; border-left:2px solid #959a98; } #footer_nav a { padding:2px 12px; display:block; color:#297bda; } #footer_nav a:hover, #footer_nav a:active, #footer_nav a:focus { color:#68aeff; } #footer_nav li:first-child { border:none; } #footer, footer { clear:both; height:50px; padding-top:15px; } div.twtr { padding:10px 0 10px 50px; background:url(../images/bgno_tweet.gif) no-repeat left center; } div.fcbk { padding:10px 0 10px 50px; } .calltocall { padding:.3em 0; line-height:1.2em; color:#7a557e; font-size:1.6em; font-weight:bold; } .phonedetails { padding:.3em 0; line-height:1.2em; color:#4e5753; font-size:1.6em; } .emailus { padding:.3em 0; line-height:1.2em; color:#5da9dd; font-size:1.2em; } .foot_social { display:inline-block; float:left; } .foot_social .fb-like { float:none; margin-top:0; } /* image hanndling */ .page_object .img200 { padding:10px 5px 5px; margin-right:1.5%; border:1px solid rgba(0,0,0,0.1); text-align:center; } /*--- PUBLIC SITE PAGES / CONTENT ---*/ /*-- homepage --*/ #feature { width:955px; height:315px; float:left; background:#e2ddb5; margin:-13px 0 4px 0; } .slider_container { width:955px; height:315px; overflow:hidden; } .slider_container .slide { height:315px; } .slide1 { background:url(../images/bgno_slide_team2013.jpg) no-repeat left top; } .slide2 { background:url(../images/bgno_slide_typxero.jpg) no-repeat left top; } .slide3 { background:url(../images/bgno_slide_ceo_happyzine_lo.jpg) repeat-x left top; } /* text aligned to right */ .slide4 { background:url(../images/bgno_slide_newtimesheet.jpg) no-repeat left top; } /* .slide5 { background:url(../images/bgno_slide_fb_0813.jpg) no-repeat left top; } */ .slide1 .feature_text h3 span, .homepage .slide2 .feature_text h2 span { background:transparent; } .slide1 .feature_text h3 span { color:#fff; } .slide2 .feature_text { width:600px; } .slide3 .feature_text { width:600px; } .slide1 .feature_text, .slide4 .feature_text { width:940px; } .feature_text { width:460px; float:left; } .feature_text span { display:block; float:left; clear:left; padding:6px 10px; background:#fff; } .feature_text h1 { padding:0 0 0 20px; margin-top:50px; line-height:1.0em; color:#4e5753; overflow:hidden; font-size:2.8em; } .feature_text h1 br { line-height:.6em; } .feature_text h1, .feature_text h1 { font-family:museoSlab-900; } .feature_text h2 { color:#562f5f; padding:4px 6px 4px 30px; font-size:1.8em; margin-top:8px; } .feature_text h3 { color:#4e5753; font-family:'MuseoSlab-500'; padding-left:30px; font-size:1.2em; margin-top:8px; } .feature_right { float:right; width:auto; height:315px; text-align:right; } .feature_right span { float:right; text-align:right; } #media { width:420px; height:230px; float:right; margin:53px 27px 0 0; background:#fff; border:1px solid #ccc688;} #working { background:#97a94d; height:44px; clear:both; margin-bottom:20px; border:1px solid #8b9c47; border-top-color:#a4b073; -moz-border-radius-bottomleft:14px; -moz-border-radius-bottomright:14px; -webkit-border-bottom-left-radius:14px; -webkit-border-bottom-right-radius:14px; -o-border-bottom-left-radius:14px; -o-border-bottom-right-radius:14px; border-bottom-left-radius:14px; border-bottom-right-radius:14px; behavior: url(../scripts/PIE.htc); } #working h4 { width:280px; float:left; padding:12px 0 4px 22px; color:#f2efca; } #working_table { width:620px; float:right; margin:6px 22px 4px 4px; padding:1px; border:none; } #working_table td { padding:6px; text-align:center; width:25%; font-size:14px; } #working_table td.description { color:#fff; background:#91c044; } #working_table td.figure { background:#fff; color:#91c044; } /*--- ALERT MSG ---*/ .alert_msg { padding:16px; margin-bottom:20px; border:3px dotted #c1a530; color:#333; font-size:1.1em; border-radius:8px; -webit-border-radius:8px; background:#e6e0c9 url(../images/bgxy_paneltexture01.png) repeat left top; } .alert_msg.alert { background:#366ba7 url(../images/bgxy_linetxtr_white05.png) repeat left top; border-color:#043062; font-size:1.3em; color:#fff; } .alert_msg.alert strong { color:#fff; } .alert_msg.warning { background:#953f2e url(../images/bgxy_linetxtr_white05.png) repeat left top; border-color:#6f1402; font-size:1.3em; color:#fff; } /*--- aleart msg ends ---*/ .home_col { width:298px; float:left; margin-right:30px; border-top:8px solid #e0f1ff; padding:1em 0 3em 0; } #home_cols article.last { margin-right:0; } .home_col1 { width:955px; margin:0; clear:left; } .home_col2, .home_col4 { width:462px; margin:0 30px 0 0; } .home_col3, .home_col5 { width:463px; margin:0; } .home_col4 p, .home_col5 p { width:280px; } .home_col h2 { color:#91c044; } #home_cols div.last h2 { color:#4e5753; } .home_col h3 { color:#877114; } #home_cols .last h3 { color:#76587d; } .home_col p { color:#4e5753; float:left; } /* 2nd col list of goodness */ ol.ol_nos li { padding:2px 0 7px 35px; font-size:1.1em; font-weight:500; color:#877114; } li.ol_1 { background:url(../images/bgno_ol1.png) no-repeat left top; } li.ol_2 { background:url(../images/bgno_ol2.png) no-repeat left top; } li.ol_3 { background:url(../images/bgno_ol3.png) no-repeat left top; } li.ol_4 { background:url(../images/bgno_ol4.png) no-repeat left top; } li.ol_5 { background:url(../images/bgno_ol5.png) no-repeat left top; } li.ol_6 { background:url(../images/bgno_ol6.png) no-repeat left top; } li.ol_7 { background:url(../images/bgno_ol7.png) no-repeat left top; } li.ol_8 { background:url(../images/bgno_ol8.png) no-repeat left top; } li.ol_9 { background:url(../images/bgno_ol9.png) no-repeat left top; } li.ol_10 { background:url(../images/bgno_ol10.png) no-repeat left top; } /* facebook like button */ .fb-like { float:right; margin-top:-40px; } p.more_button { float:right; clear:both; padding-right:16px; background:url(../images/bgno_hmcol_more.gif) no-repeat right center; text-align:right; } #hm_plans { position:relative; font-size:1.3em; margin:0.3em 0; padding-top:7px; } #ribbon { position:absolute; left:20px; top:0px; width:66px; height:62px; z-index:15; background:url(../images/bgno_plan_ribbon.png) no-repeat center center; text-indent:-9999px; } #hm_plans span { display:block; color:#fff; font-family:'MuseoSlab-500'; } #plan1, #plan2, #plan3 { position:relative; width:298px; height:50px; margin-left:0 !important; overflow:hidden; margin-bottom:14px; -moz-box-shadow:0px 0px 3px rgba(0,0,0,0.25); -webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.25); box-shadow:0px 0px 3px rgba(0,0,0,0.25); behavior: url(../scripts/PIE.htc); } .public_site .plan1, .public_site .plan2, .public_site .plan3 { float:left; margin-right:30px; } .public_site .plan3 { margin-right:0px; } /* rule --*/ article.testml, article.benft {padding-bottom:1.4em; margin-top:2em; border-bottom:1px solid #dde89f;} dl.statbox {width:120px; padding:5px; margin-top:-20px; float:right; background:#a3d3f2; font-family:'MuseoSlab-500'; color:#fff; -moz-border-radius:5px; -webkit-border-radius:5px; -o-border-radius:5px; border-radius:5px; -moz-box-shadow:0px 0px 3px rgba(0,0,0,0.25); -webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.25); box-shadow:0px 0px 3px rgba(0,0,0,0.25);} .statbox dt {float:left; clear:left;} .statbox dd {float:left; padding-left:5px;} /*-- Benefits page --*/ .benft h3 {color:#98bc52;} /*-- how it works page [diagram] --*/ #hiw_setup, #hiw_eachpay, #hiw_wepay {float:left; padding:0 0 0.5em 75px; clear:left;} #hiw_setup {margin-top:2em;} .hiw fig {width:220px; float:left; padding:0 15px;} .hiw h2, .hiw p {text-align:center;} .hiw h2 {font-family:'museoSlab-900'; color:#91c044;} .hiw fig {text-align:center;} .nextfig {float:left; padding-top:140px;text-indent:-9999px;} .plus1, .plus2 {width:30px; height:30px; background:url(../images/bgno_plus_1to2to3.gif) no-repeat center center;} h4.payperiod {width:50px; padding:70px 25px 0 0; margin-left:-60px; float:left; background:url(../images/bgno_eachpay.gif) no-repeat right bottom;} #fig1 h2 {margin-top:-48px; padding-bottom:12px; color:#fff;} .next3 {width:100%; height:70px; background:url(../images/bgno_nextfig_1to4.gif) no-repeat 120px top; padding-top:0; margin-top:-20px;} .next4, .next5 {width:40px; height:40px; background:url(../images/bgno_nextfig_4to5to6.gif) no-repeat center center;} .next6 {float:right; width:590px; padding-top:100px; height:48px; background:url(../images/bgno_nextfig_5to7.gif) no-repeat left center;} #fig6 h2 {margin-top:-82px;} #fig7 {clear:left; margin-top:20px; margin-left:10px;} #fig8,#fig9 {margin-right:55px;} #hiw_wepay {padding-top:100px; margin-top:20px; background:url(../images/bgno_nextfig_lastrow.gif) no-repeat 190px 0;} #followup {clear:both; padding-top:2em;} /*-- Plans & Pricing page --*/ article.plan {padding:0; margin:1.5em 0 3em 0; float:left; clear:both; position:relative;} article.plan h3 {font-size:2em; font-family:"MuseoSlab-900"; text-shadow:2px 2px rgba(0,0,0,0.25); padding:15px 0 5px 20px; height:43px; color:#fff;} article.plan h4 {float:right; width:150px; border:1px solid #fff; background-color:#90bf44; color:#fff; margin:-50px 25px 0 0; text-align:center; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; -moz-transition: all 0.3s ease-out; -o-transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -ms-transition:all 0.3s ease-out; transition:all 0.3s ease-out; behavior:url(../scripts/PIE.htc);} .plan h4:hover {background-color:#97d335;} article.plan h4 a {color:#fff; padding:5px;} ul.plan_features {float:left; width:220px; border-top:3px solid #d7dc9e; background:#f5f4d9 url(../images/bgno_plan_ribbon.gif) no-repeat center bottom; padding:25px 10px 4em 20px !important; font-weight:bold;} div.plan_content {float:right; width:330px; padding:20px 10px 0 30px;} .public_site .two_day {background:url(../images/bgno_article_plan1.gif) no-repeat left top;} .public_site .one_day {background:url(../images/bgno_article_plan2.gif) no-repeat left top;} .public_site .overnight {background:url(../images/bgno_article_plan3.gif) no-repeat left top;} .public_site .direct_debits {background:url(../images/bgno_article_plan4.gif) no-repeat left top;} .banks li {display:inline; list-style:none; margin-left:5px !important;} .or_markit {color:#127ea5; font-weight:bold;} /*-- faq page --*/ .faq_fee_type {width:80%; color:#4b82b5;} .faq_fee_amount {text-align:right; width:20%;} .faq_tot {font-weight:bold;} h4.inpagenav {text-indent:-9999em; height:25px; width:117px; margin-left:-52px; background:url(../images/bgno_faq_inpagenav.gif) no-repeat left top;} #left_col ul.inpage_nav {padding-bottom:2em;} .faqpage #left_col p {padding-bottom:2em;} .faqpage #left_col h2 {border-bottom:1px solid #e5dea5; margin-bottom:1.2em; color:#8bb149;} /*-- more detail page --*/ ol.detail li, ol.detail h3 {color:#8bb149; font-size:1.2em;} ol.detail li {border-bottom:1px solid #ede8c0; padding-bottom:1em; margin-bottom:1.3em;} ol.detail p, ol.detail ol li, ol.detail ul li {color:#4e5753; font-size:.85em; border-bottom:0; margin-left:-0.7em;} ol.detail ol li, ol.detail ul li {padding-bottom:0.5em; margin-bottom:0;} p.typ {background:url(../images/bgno_mngd_tick.gif) no-repeat left center; padding:0 0 0 40px; height:21px; overflow:hidden;} p.typ strong {background:url(../images/bgno_mngd_tail.gif) no-repeat right center; padding:4px 30px 4px 0; color:#997e9e;} /*-- terms & conditions / privacy policy --*/ ol.policy li, ol.policy h3 {color:#8bb149; font-size:1.2em;} ol.policy li {border-bottom:1px solid #ede8c0; padding-bottom:1em; margin-bottom:1.3em;} ol.policy p, ol.policy ol li, ol.policy ul li {color:#4e5753; font-size:.85em; border-bottom:0; margin-left:-0.7em;} ol.policy ol li, ol.policy ul li {padding-bottom:0.5em; margin-bottom:0;} /*-- email referral landing page --*/ .referral_landing .form_object { width:95%; padding:15px 0 25px 5%; background:#edeace; } .referral_landing fieldset.column { width:45%; } .referral_landing fieldset.full { width:95%; } .referral_landing .f_textarea { width:92%; margin-right:10px; } .referral_landing .f_textarea .f_field { width:95% } .referral_landing .f_textarea textarea { width:94%; padding:2.5%; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:1.1em; border:1px solid rgba(0,0,0,0.2); } .referral_landing .f_fields { background:#faf9de; } .referral_landing input:focus, .referral_landing text_area:focus { background:#f4fbd0; } /*--- Integration pages (front-end) ---*/ .integration.public #left_col h2 { padding-top:0.9em; clear:both; } img.hm_integration_logo { float:right; } /*--- testimonial quotes ---*/ blockquote { padding:0 0 10px 40px; background:url(../images/bgno_quote_begin.gif) no-repeat left top; margin:2em 0; } blockquote p { background:url(../images/bgno_quote_end.gif) no-repeat right bottom; padding-right:30px; } .testml blockquote { width:480px; margin-bottom:.5em; } .testml_tsr blockquote { margin-bottom:0; } .testml_tsr p.more { padding-top:5px; text-align:right; } /*--- friends of typ page ---*/ /* also uses blockquotes */ .friends { } .friends.col_x4 .column { width:23.1%; margin-right:2.2%; } .friends.col_x4 .column.span_2 { width:48.4%; } .friend { position:relative; min-height:220px; margin-bottom:30px; border:1px solid rgba(200,200,200,1); } .friend:hover { box-shadow:0 0 10px rgba(0,0,0,0.3); } .friend a { display:block; position:relative; float:left; background:#999; width:220px; height:220px; overflow:hidden; } .friend.span_2 a { width:460px; } .friend img { display:block; position:absolute; top:-220px; left:0; } .friend img:hover { display:block; position:absolute; top:0px; left:0; } .friend .read_more { width:88%; padding:4%; font-family:'MuseoSlab-500'; font-size:.9em; overflow:hidden; } /* will display on click */ /* slider */ .typ_friends #feature { margin-bottom:35px; } .fslide a:link, .fslide a:visited { color:#243a53; } .fslide a:hover { color:#2378da; } .fslide blockquote { display:block; float:right; width:30%; padding:20px; margin:20px 25px 0 0; font-size:1.4em; font-family:'MuseoSlab-500'; line-height:1.4em; background:rgba(255,255,255,0.8); } .fslide blockquote p { background:none; padding-right:0; } /* customisation */ .fslide.dowse blockquote { width:420px; margin-top:55px; } .fslide.findlay blockquote { float:left; width:420px; margin-left:25px; margin-top:100px; } .fslide.sidekick blockquote { margin-top:15px; margin-right:240px; background:transparent; font-size:1.3em; } .fslide.willbuck blockquote { float:left; width:500px; margin-top:85px; margin-left:25px; } .fslide.yorke blockquote { width:420px; margin-top:45px; margin-right:150px; } .fslide.beyond blockquote { width:20%; margin-top:60px; } a p.friendlink { padding-left:20px; background:url(../images/bgno_flink_arrow_off.gif) no-repeat left center; } a:hover p.friendlink { background:url(../images/bgno_flink_arrow_on.gif) no-repeat left center; } /* holiday calendar - for pay days around the stat holidays #container.public_holiday */ div.holiday { display:block; float:left; width:100%; border-radius:5px; } div.month_container, .calendar h3, .calendars h3 { /*display:inline-block;*/ float:left; clear:left; position:relative; width:100%; padding-left:10px; margin-bottom:5px; color:#fff; cursor:pointer; z-index:2; background-color: #74b3de; background-image: -webkit-gradient(linear, left top, right top, from(#74b3de), to(#b9d7ed)); background-image: -webkit-linear-gradient(left, #74b3de, #b9d7ed); background-image: -moz-linear-gradient(left, #74b3de, #b9d7ed); background-image: -o-linear-gradient(left, #74b3de, #b9d7ed); background-image: linear-gradient(to right, #74b3de, #b9d7ed); border-radius:10px; } .calendars h3:focus, .calendars h3:active { outline-style:none; box-shadow:none; border-color:transparent; } .calendars h3 { display:none; } .calendars h3.ui-accordion-header-active, .calendar h3 { border-bottom-left-radius:0; border-bottom-right-radius:0; margin-bottom:0; } div.month_container { padding:25px 0 20px 10px !important; margin-bottom:5px; } div.month_container.ui-accordion-content-active, div.month_container.typical { height:200px; border-top-left-radius:0; border-top-right-radius:0; } /* ids called just below because original list rules use them too, so a need to be in quite deep in terms of specificity - not my best work early on... */ #left_col ol.month { float:left; margin:15px 0 0 20px !important; padding-left:0; z-index:4; } .month_container h3 { float:left; width:90%; margin:15px 20px; clear:none; color:#fff; } #left_col li.work_day, #left_col li.non_work_day, #left_col li.key_block { float:left; list-style:none; margin:0; padding:10px; } #left_col li.work_day { background-color:#b9d7ed; } #left_col li.non_work_day { background-color:#d1e09c; } #left_col li.pub_hol { background-color:#b6c972; } li.week_start, li.weekend_start { -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } li.week_end, li.weekend_end { -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } /* for KEY - not used on generic holidays page */ li.key_block.day { width:auto; height:22px; padding:10px; } /* for calendar days */ div.day { position:relative; float:left; width:105px; min-height:60px; padding-top:10px; padding-bottom:10px; border:1px solid rgba(0,0,0,0.2); border-radius:3px; text-align:center; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } div.day.pubhol { /* border thingo? */ } div.payday:hover { border:1px solid #cc6a02; box-shadow:0 0 2px rgba(150,100,0,0.4),0 0 10px rgba(150,100,0,0.3) inset; cursor:pointer; } .calendar_key div.day { width:130px; padding:10px; min-height:20px; text-align:left; } .day span { display:block; font-size:0.9em; } .day span.date_num { font-size:1.7em; } .day span.date_day { font-size:1.1em; } .day span.hol_name, .day span.tempmsg { display:inline-block; font-size:0.9em; color:rgba(78,87,83,0); border-bottom:1px solid rgba(78,87,83,0); margin:23px 10px 0; transition:all 0.2s ease-out; } .day:hover span.tempmsg { color:rgba(78,87,83,1); border-bottom:1px solid rgba(78,87,83,1); } .day span.month_name { background: #b9d7ed none repeat scroll 0 0; color: #333; font-size: 1em; left: -11px; padding: 3px 10px; position: absolute; text-align: left; top: -28px; border-top-left-radius: 10px; border-top-right-radius: 10px; } .non_work_day span.month_name { background:#d1e09c; } .pub_hol span.month_name { background:#b6c972; } /* grey calendars that have past */ .calendars h3.done, div.month_container.done, div.month_container.done ul, div.month_container.done li { background:#ddd !important; color:#bbb !important; } .month_container.done span { background:#ddd; color:#bbb; } div.month_container.done li, .done span.month_name, .done span.month_name { background:#d0d0d0 !important; } .done span.date_day, .done span.hol_name { background:transparent; } tr.done td span { background:rgba(0,0,0,0.2); color:rgba(0,0,0,0.8); } #container.public_holidays .non_pay { background:#f2f2f2 url(../images/bgno_redcross16_off.png) no-repeat center center; color:#555; /*background-color:#8eab27 !important;*/ } /* #container.calendar div.wknd { background:#c5c5c5 url(../images/bgxy_linetxtr_white10.png) repeat left top; } */ #container.public_holidays .payday, #container.public_holidays .payday_lite { background:#f2f2f2 url(../images/bgno_greentick16_off.png) no-repeat center center; color:#3a78a2; } ul.calendar_key li { margin-left:0 !important; margin-right:10px; } ol.month li { position:relative; } .transfloat { opacity:0; position:absolute; bottom:5px; left:15px; z-index:0; width:96px; height:37px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } li.trans_on .transfer_on { opacity:1; z-index:100; } li.trans_1d .transfer_1d { opacity:1; z-index:100; } li.trans_2d .transfer_2d { opacity:1; z-index:100; } /* hidden grinch easter egg for the festive season calendar edition - not always in use (see 'summer2015-2016.html') */ div.grinch { position:absolute; top:225px; right:300px; width:88px; height:115px; opacity:0; -webkit-transition: all 0.15s ease-out; transition: all 0.15s ease-out; } table.calendar { background:none; border:none; } table.calendar td { padding:5px 5px 5px 20px; } table.calendar span { padding:6px; border-radius:3px; line-height:2.2em; font-size:1.1em; } table.calendar thead { font-size:1.3em; } span.holname { background-color:#4787BC; color:#fff; } span.holdate { background-color:#d1e09c; } span.holdate.actual { } span.holdate.observed { background-color:#b6c972; } span.holdate.next_payday { background-color:rgba(200,60,80,0.55); color:#222; } .calendar tr.done span { background-color:#ddd; color:#bbb; } .public_holidays .calendar { } .public_holidays img.hover_flag { position:absolute; top:-10px; right:-20px; z-index:105; } span.leave_q { font-weight:bold; } span.leave_a { } .payday_key { display:block; float:right; margin-right:40px; clear:both; margin-bottom:15px; } .payday_key span { display:inline-block; color:#3a78a2; margin-left:5px; padding:8px 15px 8px 35px; border-radius:20px; background:rgba(255,255,255,0.6) no-repeat 3px center; } .payday_key span.payday_cross { background-image: url(../images/bgno_redcross16_off.png); } .payday_key span.payday_tick { background-image: url(../images/bgno_greentick16_off.png); } /*--- partner page (1% collective etc..) ---*/ .partners { float:left; width:100%; } .partner { float:left; width:232px; margin-right:5px; overflow:hidden; webkit-box-shadow:0 0 45px 0 rgba(0,0,0,0.1) inset; box-shadow:0 0 45px 0 rgba(0,0,0,0.1) inset; background-color:rgba(0,0,0,0.05); } .partner.last { margin-right:0; } .partner_logo { margin-top:-10px; } .partner_image { border-bottom:5px solid #fff; } .partner_text { display:none; } /* hidden for now (actually commented out on the page too) */ .partner:hover { background-color:transparent; } /*--- about page ---*/ .about_page h3 { color:#8e7922; font-family:'MuseoSlab-500', Georgia; padding:.3em 0; line-height:1.4em; } .about_page .col_x2 .column { width:48.5%; margin-right:3%; } .about_page article { border-top:1px solid #dde89f; } .about_page .page_object { margin-top:0; padding-top:10px; } /*--- contact page ---*/ .contact_page input.textfield, .contact_page input.textfield { width:100%; } /*--- CONTENT LISTS ---*/ #left_col ul, #right_col ul #left_col ol, #right_col ol { padding:.5em 0 1.2em .8em; } #left_col li, #right_col li { margin-left:1.2em; } #left_col ul li, #right_col ul li { list-style-image:url(../images/bgno_bullet1.gif); } #left_col ol { padding:.5em 0 1em 1em; } #left_col ol li { list-style-type:decimal; } #left_col ol li ol li { list-style-type:lower-alpha; } .inpage_nav li { font-size:1.1em; font-weight:bold; list-style:none !important; margin-left:0 !important; } /*--- CONTENT LINKS ---*/ a { color:#68aeff; text-decoration:none; } a:link, a:visited { color:#68aeff; } a:hover, a:active, a:focus {color:#2378da; } /*--- CONTENT VIDEO ---*/ .content_video.sys_update { width:720px; height:792px; border:4px solid #bfd979; float:left; clear:left; margin:20px 0; } /*--- CONTENT TABLES ---*/ table {width:95%; margin-bottom:2em; border:1px solid rgba(0,0,0,0.1); background:#e4f1fc;} tr {border-bottom:0;} tr:last-child {border-bottom:0;} td, th {padding:10px; border-right:1px solid rgba(0,0,0,0.1);} td:last-child {border-right:0;} #admin_table th {background:#adcfeb; font-size:1.1em; font-weight:900;} #admin_table tr:nth-child[odd] {background:rgba(0,0,0,0.05);} .timesheet table th, .dashboard table th, tr.date_row td { font-size:1.2em; color:#292d2b; } /*--- LOGIN SIGNUP MODALS ---*/ .modal {background:#fff;} .su {background:url(../images/bgx_modal_signup.gif) repeat-x left top;} .su h1 {background:url(../images/bgno_h1_switch.gif) no-repeat left top; padding:35px 0 0 80px; height:50px; color:#fff; -moz-text-shadow:1px 1px 2px rgba(0,0,0,0.25); -webkit-text-shadow:1px 1px 2px rgba(0,0,0,0.25); text-shadow:1px 1px 2px rgba(0,0,0,0.25);} .su h3, .li h3 {margin-left:40px; padding-top:1.2em; color:#4e5753;} .su h3, .li h3 strong { color:#76587d; } /*--- CLIENT SITE - all pages beyond login ---------------------------------------------------------------------*/ /*-- Common corners buttons, gradients and fonts --*/ /* thou shalt have tight roundy corners [3px] */ section.summary_month_container, .summary_month_container h3, .pay_summary, .duration_5day, .duration_4day, .duration_3day, .duration_2day, .duration_24hr, .duration_ovrnt, h2, #summary_month, .summary_month h3 .subtble, .emp_detail, .emp_detail_tbl, .employee_avtr, .employees_container, .tms_paytbl_container, table.tms_paytbl, #tms_pay_subtbls table, .paynav_paylist, .report_tools, h3.dash_alert, button, a.button, span.button, .tms_tools, .tms_tools.tool_update, .pay_dateline, .page_object, #left_col_forms, .pay_expanded, .paycol, .dash_admin_tools, .pay_date_panel, .f_fields, #employees a, input, .f_field.job_code, .costing .input_ghost, .costing .button_ghost, .costing_tools h3, .costing_tools .col_x3, section.levels { -webkit-border-radius: 3px; border-radius: 3px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } /* les't thou art of a looser roundy nature.. [5px] */ #left_col_forms, #left_col.forms, .employee_selector, .help_area .page_object.high { -webkit-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .help_area .page_object.high { -webkit-border-radius: 12px; border-radius: 12px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } /* This box is no vampire - box-shadow */ .pay_dateline, .pay_date_panel, .employees_container { -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.1); box-shadow: 0 0 3px 1px rgba(0,0,0,0.1); } /*-- Let it be unto the people, that they become animated --*/ a, .duration_3day, .duration_5day, .duration_4day, .duration_2day, .duration_24hr, .duration_ovrnt, h2, .pay_tiles, .pending_box, .pay_date_change, .pay_period_change, .setup_tab, input, button, .button, #employees li ul a, .hdr_balances, .partner, .help_area .page_object, .calendar.min, .friend { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } div.tool_list,.emp_flag { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } /* calling Museo */ .summary_month td.pay_num, h3.dash_alert, .employees_container h3, .summary_month h3, .tms_tools h3, .tms_tools h4, #tms_pay_subtbls h3, .data_table td h4.summary_subhead, .paycol h3, .pay_date_date span, .pay_dateline h3, h3.panel_h3, .summary_month_container h3, .page_object_img h5, .emp_header_close, .emp_header former, .slip_date, .su h3, .li h3, tr.date_row td, .question p, .in_days, .conf_trans_amount, .conf_pay_amount, table.calendar span { font-family:'MuseoSlab-500'; } /* shouting Museo .setup .employee_name { font-family:'MuseoSlab-900'; }*/ /* push my buttons */ input.button, .dashboard button, .timesheet button, .modal_form button, a.button, div.button_ghost, span.button, button { /* default button for backend and eventually for front end interactions too */ font-size:1.1em; font-weight:700; color:#fff; text-align:center; cursor:pointer; padding:6px 12px; margin-top:5px; margin-bottom:5px; border:1px solid rgba(0,0,0,0.15); webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.25); box-shadow:0px 0px 2px rgba(0,0,0,0.3); text-shadow:0px 0px 1px rgba(0,0,0,0.4); background-image:url(../images/bgxy_random1px_transparent.gif); } a.button { display:block; } span.button a { color:#333; } button.f_submit { min-width:150px; } /* button colourway 3b - blue green red (muted) */ input.button, a.button, span.button, button { background:#8dc2ef; } input.button:hover, a.button:hover, span.button:hover, button:hover { background:#377bca; } input.button.p1, a.button.p1, button.p1 { background:#cc7e7c; } input.button.p1:hover, a.button.p1:hover, button.p1:hover { background:#b32e05; } input.button.p2, a.button.p2, button.p2 { background:#9eca5f; } input.button.p2:hover, a.button.p2:hover, button.p2:hover { background:#82a82b; } /*--- FORMS ---*/ input.text:focus { background:#f4fbd0; } /*-- login signup forms --*/ form.modal_form {padding:0 30px;} .modal.li {min-height:400px;} .modal_form .fieldline, p.form-note, .modal {float:left; clear:left;} .fieldline {clear:both; padding:10px 0;} .fieldline label.textlab {display:block; width:340px; float:left; clear:left;} label span {font-size:1.4em; font-weight:bold; color:#cf5d01;} .fieldline input.text {display:block; float:left; width:280px; height:20px; font-size:1.2em; margin-right:5px;} input.submit_but:hover, .button:hover, /*#but_welcome a:hover,*/ #but_login a:hover {background:#4c96ec;} input.sign_in, input.get_pw {margin-top:22px;} .modal_form .modal_submit {margin:0px 10px 10px 10px; clear:none; width:130px;} .form_error, .f_error { display:block; width:90%; color:#cf5d01; float:left; clear:both; } #subsidy_calculator div {float:left; clear:left; padding:10px 0;} #subsidy_calculator label {display:block; width:120px; float:left; clear:left; padding-right:30px; margin-right:3px;} #subsidy_calculator input {display:block; width:60px; float:right; clear:right; text-align:center;} .wage-bill {background:url(../images/bgno_calcdollar.gif) no-repeat right 8px;} #subsidy_calculator button.calc-but {width:90%; clear:both; margin:20px auto; height:3em; background:#297bda; color:#fff; padding:10px; text-align:center; font-size:1.2em; font-weight:bold;} button.calc-but:hover, button.calc-but:focus {background:#265d9c; cursor:pointer;} /*--- GENERIC CLIENT SITE FORM SCHEMA ---*/ .setup #left_col.forms { -webkit-border-top-left-radius:0px; -moz-border-radius-topleft:0px; border-top-left-radius:0px; } /* so that tabs blend seemlessly on the top left corner */ .setup fieldset { clear:both; } /*--- Profile and employee set-up/details pages (mostly forms) ------------------------------*/ .profile .page_object, .profile .form_object { width:850px; padding:20px 25px 50px 25px; margin-bottom:0; } .profile .form_object .fieldline { padding:0 10px 10px 0; width:100%; } /* check */ .profile .form_object .fieldline_2col { min-height:60px; } .addnew_container { clear:left; } .form_object fieldset, .form_object legend, .form_object p, .form_object label, .form_object input, .form_object select.select, .form_object input.textfield, .form_object input.checkbox, .form_object input.radiobut, /* .form_object input.f_file, */ .form_object select.f_select, .form_object .fieldline, .form_object .f_fields, .form_object .f_field { float:left; clear:left; } /* client account initiate page */ .client_initiate h4 { margin-left:15px; margin-top:15px; } /* helper [?] tooltip */ span.helper { display:inline-block; padding:0 25px 0 0; background:url(../../images/bgno_helper_off.png) no-repeat right center; text-indent:-9999em; } span.helper:hover { background-image:url(../../images/bgno_helper_on.png); } /* clearance */ .form_object .notclear legend, .form_object .no_clear legend, .form_object .notclear .f_field, .form_object .no_clear .f_field { clear:none; } .setup .form_object .clear { clear:both; } .form_object input.checkbox, .form_object input.radiobut { width:20px; } .form_object select.select, .form_object input.checkbox, .form_object input.radiobut, .form_object input.f_file { margin:6px 10px 6px 0; } input, .text, .f_text { padding:7px; border:1px solid #555; border-color:rgba(0,0,0,0.2); } /* input.f_file firefox { background-color: #8dc2ef; border: 1px solid rgba(40, 114, 165, 0.7); box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); color: #fff; font-size: 1.1em; font-weight: 700; height: 24px; padding: 3px; text-shadow: 0 0 1px rgba(0, 0, 0, 0.4); } */ /* emulates button style - watch across browsers though */ /* input.f_file chrome { background-color: #8dc2ef; border: 1px solid rgba(40, 114, 165, 0.55); box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); color: #fff; font-size: 1.1em; font-weight: 700; height: 20px; padding: 4px; text-shadow: 0 0 1px rgba(0, 0, 0, 0.4); margin: 5px 0 0 0 !important; max-width: 220px; } */ /* input.f_file::before::-webkit-file-upload-button { visibility: hidden;} */ input.f_file { content: 'Browse...'; /* csstricks */ display: inline-block !important; background-color: #9eca5f; border: 1px solid rgba(130, 168, 43, 0.80); border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); padding: 5px 8px; margin-top: 5px !important; outline: none; white-space: nowrap; cursor: pointer; color: #fff; text-shadow: 0 0 1px rgba(0, 0, 0, 0.4); font-weight: 700; font-size: 1.1em !important; width:85%; } input.f_file:hover { } .form_error_message { position:absolute; top:10px; left:10px; z-index:1000; padding:20px; background:rgba(0,0,0,0.1); border-radius:5px; } /* typography de form */ .form_object h3 { font-size:1.6em; } .form_object h4 { clear:left; } .form_object .f_field h4 { padding-left:0 !important; padding-bottom:5px; } /* .f_fields h4 { margin-left:15px; margin-top:10px; } */ /* temp from live CSS to make account settings page behave */ .setup fieldset { width:100%; } .f_field.f_submit { margin-bottom:20px; } .f_fields.f_admin { margin-top:20px; } .bank_account .f_field { padding:10px 10px 10px 0; clear:none; } .bank_account .f_field input { clear:left } .bank_select li { list-style:none !important; } .form_object .field_groupings, .form_object .f_fields { width:99%; } /* settings/debit page/s */ .setup h2 { color:#2F8BBC; } .sign_auth h4, .debit_auth h3, .debit_auth h4 { float:left; } .debit_auth ul { float:left; } ul.terms_conditions { float:left; clear:left; } ul.inblo { border:1px solid rgba(0,0,0,0.2); background-color:rgba(255,255,255,0.4); border-radius:8px; padding:0 !important; margin:-3px 0 20px 0; } ul.inblo li { display:inline-block; min-width:60px; padding:5px 20px 5px 10px; margin:0 15px; } ul.terms_conditions.inblo { margin-left:0px; } ul.terms_conditions.inblo li { margin:0 5px; } ul.bank_select.inblo { margin-left:15px; } ul.no_surprises { width:96%; } /* .dd_activate { width:45%; margin:0 0 15px 15px; float:left; } */ .page_object.dd_activate { margin-top:5px; } .dd_activate button { display:inline-block; margin-right:15px; } .form_object p { width:96%; } /* from account set up fields - xero integration page */ .profile #opt .fieldline_2col, .profile #opt .f_field, .setup #opt .fieldline_2col, .setup #opt .f_field { min-height:70px; float:left; } .submit_container { width:100%; } .form_object .submit_container input { float:left; clear:none; margin-right:5px; } select.xero_code { width:250px; } /*-- SIGN UP modal form --*/ #signup input.text { width:90%; } #signup .fieldline { width:100%; } /* containers for sections in form - set for floating nicely */ #signup .signup_details { width:45%; float:left; } #signup .signup_gather { width:42%; padding:2.5%; padding-top:5px; margin-top:22px; float:right; border:10px solid rgba(255,255,255,0.5); border-radius:5px; background:#97c8e4; } #signup .signup_submit { width:100%; float:left; clear:both; margin-top:10px; } .signup_gather h4 { color:#fff; margin-bottom:5px; line-height:1.2em } /*--- Account AND Employee setup form pages ---*/ /* 1. COLOURS - subtle blue - general account setup */ .setup #left_col.forms, .f_fields, .setup .setup_tab.select, .setup .setup_tab.select.first, .setup .setup_tab.select.last { background:#d1e7f7; -webkit-box-shadow:none; box-shadow:none; } .setup .setup_tab, .setup .setup_tab.first, .setup .setup_tab.last { background:#b3d6f0; -webkit-box-shadow:inset 0px -15px 15px -10px rgba(0,0,0,0.1); box-shadow:inset 0px -15px 15px -10px rgba(0,0,0,0.1); } .setup .setup_tab:hover { background:#d1e7f7; -webkit-box-shadow:inset 0px 15px 15px -10px rgba(0,0,0,0.1); box-shadow:inset 0px 15px 15px -10px rgba(0,0,0,0.1); } .setup .f_fields { background:#e2f3ff; } .setup .f_fields.f_admin { background:transparent; } .setup .form_object h3 { color:#555; } .setup .form_object h4 { color:#13486e; } /* 3a. COLOURS - subtler cream -- good --*/ .profile #left_col.forms, .f_fields, .profile .setup_tab.select, .profile .setup_tab.select.first, .profile .setup_tab.select.last { background:#edeace; -webkit-box-shadow:none; box-shadow:none; } .profile .setup_tab, .profile .setup_tab.first, .profile .setup_tab.last { background:#dbd6b0; -webkit-box-shadow:inset 0px -15px 15px -10px rgba(0,0,0,0.1); box-shadow:inset 0px -15px 15px -10px rgba(0,0,0,0.1); } .profile .setup_tab:hover { background:#edeace; -webkit-box-shadow:inset 0px 15px 15px -10px rgba(0,0,0,0.1); box-shadow:inset 0px 15px 15px -10px rgba(0,0,0,0.1); } .profile .f_fields { background:#faf9de; } .profile .form_object h3 { color:#555; } .profile .form_object h4 { color:#344e06; padding-left:12px; padding-top:12px; } .profile .addnew { margin-top:20px !important; } /* structural.. f_fields = containing block || f_field = individual field line or item*/ #left_col.forms { float:left; width:915px; padding:15px 20px 45px 20px; margin:15px 0 45px 0; } .employee #left_col.forms { margin-bottom:20px; } /* check this */ #left_col.forms_pp { float:left; width:935px; padding:15px 10px 25px 10px; margin:15px 0; border:1px solid #94bfe4; } /* check this */ .f_fields { padding-bottom:2em; margin-bottom:30px; } .integration .field_groupings { background:none; } /* check this */ .f_fields input { display:block; font-size:1.2em; } .f_fields label { display:block; float:left; } .f_fields input.text:focus { background:#f4fbd0; } .f_fields label.textlab { display:block; float:left; } .f_radio input { margin-right:10px; } .f_field { float:left; margin:1em 0 0 15px; } .f_field.first { clear:both; } .leave .f_field { clear:left; } .alt_leave_item .f_fields { min-height:145px; } /* check this */ .initiate_setup .fieldline_2col input[type="text"] { height:20px !important; } /* check this */ .initiate_setup .f_field input[type="text"] { height:20px !important; } .f_field input.text { display:block; float:left; font-size:1.2em; margin-right:5px; } .f_field.f_admin { clear:both; } /* leave page specific items */ .leave_selector { } .leave_select { width:60%; float:left; } .leave_note { width:32%; margin:15px 2% 0 0; padding: 1% 2% 2%; float:right; border:3px solid; border-radius:5px; background:#fff; } .leave_note h3 { font-family: 'MuseoSlab-900'; } .leave_note h4 { padding-top:0 !important; } .leave_note li { float:left; clear:left; } .leave_warning { border-color:rgb(200,35,15); } .leave_helper { border-color:rgba(0,0,0,0.5); clear:right; font-size:1.1em } .leave_warning h3 { color:rgb(200,35,15) !important; } .leave_helper h3 { color:rgba(0,0,0,0.5) !important; } /* from pay history page - reduce standard padding else table breeches page width */ .return_history td input.def_entires { display:block; float:left; width:65px; } table#pphis { width:910px; } #pphis td { padding:4px; } #pphis td input.def_entires { display:block; float:left; width:45px; padding:6px 3px; } .f_fields select.ptypes { display:block; float:left; width:80px; } .f_fields select.temp { display:block; font-size:1.1em; } .s_loans label { padding-top:6px; } /* field entries where users need to known when an error has been made */ .val, .val_bank, .val_def_entires { background-color:#dde89f; } /* non error */ .inval, .inval_bank, .inval_def_entires { background-color:#cf5d01; } /* error */ .no_val { background-color:#fff; } /* standard no-value cell colour */ /* table key */ .table_key { width:910px; } .table_key th { font-weight:bold; } .table_key_abbr { text-align:right; font-weight:bold; } .table_key_desc { text-align:left; } /*--- these are placed all over the site - approach with caution ---*/ input[type="button"] { width:auto; height:auto; } input.submit_but, input.final { clear:left; } input.submit_but { background:#68aeff; } input.final { width:150px; background:#cf5d01; } input.remove, input.delete { width:60px; background:#cf5d01; color:#fff; cursor:pointer; } /* remove duplication here when reviewing whole site */ input.delete { clear:left; } .emps_change_emp { padding:10px 0 10px 0; } button.addnew,button.change_emp { background:#90c347; margin-bottom:20px; } .setup button.addnew { margin-top:20px; } #nt span.addnew, #npt span.addnew { float:left; clear:left; margin-top:8px; } /* for employee profile 'other_pay_types.php' page */ button.change_emp { background:#a0a0a0; } /*--- select payslip page ---*/ .setup .pay_day_change { float:left; margin-top:1px; margin-left:10px; } ul.email_slip_opt li a { display:block; float:left; clear:left; padding:3px 0 3px 25px; } ul.email_slip_opt li input.f_text { float:left; clear:left; margin:0px 5px 12px 25px; } .ps_emp_selector .employee_avtr h5 { width:165px; } .slip_date { display:block; float:left; padding:8px 0; margin-left:15px; } .slip_picker { width:26px; height:28px; display:inline-block; border:none; text-indent:-99999px; cursor:pointer; background:url(../images/bgno_datepic.png) no-repeat left top; } .slip_picker:hover { background-image:url(../images/bgno_datepic_on.png); } .ps_emp_selector .f_field { margin-top:2.2em; } .button.emps_paytype_rmv {width:80px; margin-top:20px;} /* .profile .addnew.button {margin-top:20px !important; padding:4px 11px !important;} */ /*--- Employee pages [old] -------*/ #left_col_forms {float:left; width:905px; padding:15px 20px 25px 20px; margin:15px 0 45px 0; background:#f1f8fe;} #left_col_forms.full {width:905px; margin:15px 0;} .employee #left_col_forms {margin-bottom:20px;} #left_col_forms_pp {float:left; width:935px; padding:15px 10px 25px 10px; margin:15px 0; border:1px solid #94bfe4; background:#f1f8fe;} .field_groupings {padding-bottom:2em; background:#f1f8fe; float:left; clear:left; margin-bottom:10px; border-radius:3px;} .integration .field_groupings {background:none;} .field_groupings input {display:block; font-size:1.2em;} .field_groupings label {display:block; float:left;} .field_groupings input.text:focus {background:#f4fbd0;} .field_groupings label.textlab {display:block; float:left;} .fieldline_2col {float:left; margin: 1em 0 0 15px;} .fieldline_2col.first {clear:both;} .leave .fieldline_2col {clear:left;} .initiate_setup .fieldline_2col input[type="text"] { height:20px !important; } .fieldline_2col input.text {display:block; float:left; width:280px; font-size:1.2em; margin-right:5px;} .field_groupings input.bank {width:100px;} .return_history td input.def_entires {display:block; float:left; width:65px;} #pphis td {padding:4px;} #pphis td input.def_entires {display:block; float:left; width:45px; padding:6px 3px; } .field_groupings select.ptypes {display:block; float:left; width:80px;} .field_groupings select.temp {display:block; font-size:1.1em;} .s_loans label {padding-top:6px;} #left_col_forms h4 {color:#ab9740; font-size:1.6em; } .val, .inval, .val_bank, /* .inval_bank, */ .val_def_entires { background-color:#dde89f; } /* correct colour entry */ .inval, .inval_bank, .inval_def_entires { background-color:#cf5d01; } /* error colour entry */ /* .val_def_entires */ .no_val { background-color:#fff; } /* --- these are placed all over the site - approach with caution --- */ input[type="button"] {width:auto; height:auto;} input.submit_but, input.final {clear:left;} input.submit_but {background:#68aeff;} input.final {width:150px; background:#cf5d01;} input.remove, input.delete {width:60px; background:#cf5d01; color:#fff; cursor:pointer;} /* remove duplication here when reviewing whole site */ input.delete {clear:left;} #nt span.addnew, #npt span.addnew {float:left; clear:left; margin-top:8px;} /* for employee profile 'other_pay_types.php' page */ span.change_emp {background:#a0a0a0;} .button.emps_paytype_rmv {width:80px; margin-top:20px;} /* input - specific widths */ #IRD_number { width:90px; } .profile #start_date { width:100px; } #emp_bank { width:40px; } #emp_branch { width:50px; } #emp_acc_number { width:90px; } #emp_suffix { width:30px; } #std_rate { width:65px; } #defmonad,#deftuead,#defwedad, #defthuad,#deffriad,#defsatad,#defsunad { width:45px; } #type1,#type2,#type3,#type4 { width:120px; } #typeamount1,#typeamount2,#typeamount3, #typeamount4,#gross_code,#ks_code { width:60px; } /* exception to #gross_code and ks_code width in integration page */ .integration #gross_code, .integration #ks_code { width:auto; } /*--- SETUP TAB NAV - for account setup and staff profiles ---*/ ul.setup_tabs { float:left; clear:both; margin-top:20px; } .setup_tab { -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; border-top-left-radius:5px; border-top-right-radius:5px; } .setup_tab, .setup_tab.select, .setup_tab.last, .setup_tab.select.last { position:relative; margin-bottom:-15px; margin-right:3px; float:left; padding-top:6px; padding-bottom:4px; } .setup_tab, .setup_tab.last { margin-top:3px; background:#c1d8ec; } .setup_tab.select, .setup_tab.select.last { margin-bottom:-21px; margin-top:0; padding-bottom:12px; padding-top:5px; background:#f1f8fE; } .setup_tab a, .setup_tab.select a, .setup_tab.last a, .setup_tab.select.last a { padding:6px 14px; margin-left:2px; color:#555; font-size:12px; } .setup_tab a:hover, .setup_tab a:active, .setup_tab a:focus, .setup_tab.last a:hover, .setup_tab.last a:active, .setup_tab.last a:focus { color:#444; } .setup_tab.select a { color:#222; } .setup h2 { margin-bottom:10px; } #process_tabs { clear:both; float:left; margin-bottom:-17px; } #process_tabs li { float:left; border-left:1px solid #dad49d; border-radius:6px 0 0 0; margin-left:-10px; margin-top:3px; background:url(../images/bgno_proctab.png) no-repeat right top; } #process_tabs li:first-child { margin-left:0; } #process_tabs li.tab_last { } #process_tabs li.tab_sel { background:url(../images/bgno_proctab_sel.png) no-repeat right top; margin-top:0; position:relative; } #process_tabs li a { display:block; padding:5px 25px 5px 13px; } #process_tabs li.tab_sel a { padding:6px 25px 6px 15px; } /*--- employee profile - employee selector ---*/ .employee_selector { float:left; clear:left; width:915px; padding:10px 20px 20px 20px; margin:0 0 40px 0; background:#edeace; } .emp_select_header h3 { float:left; clear:left; color:#555; padding:0 15px 10px 0; } .emp_header_close { float:right; color:#555; cursor:pointer; margin-top:8px; } .emp_header_former { background:#edeace; padding:5px; } .profile h2 { color:#54523c; margin-bottom:10px; } #employees li { padding:2px 0; position:relative; } #employees a { display:block; padding:3px 5px 3px 35px; margin:0; color:#fff; font-size:15px; background:#878574 url(../images/bgno_avatar_single.png) no-repeat 10px center; } #employees a:hover, #employees a:active, #employees a:focus { background-color:rgba(0,0,0,0.3); } #employees li ul { position:absolute; left:-9999px; top:20px; padding-top:12px; font-size:100%; } #employees li:hover ul, #employees li ul:hover, #employees li:hover li ul a { left:0; } #employees li ul a { display:block; float:left; color:rgba(104,174,255,0); } .emp_col_left { min-width:300px; float:left; } .emp_col_right { float:left; } .setup .employee_for { font-size:0.7em; color:#767358; } .setup h2 .employee_name { font-size:0.95em; } /*-- hide/show former employees --*/ .employee_selector .hidden { display:none; } h3.emp_header_former, .selector_show_hide { float:left; margin-top:20px; } #report_months { width:620px; margin:6px 22px 4px 4px; padding:1px; border:1px solid #dad49d; background:#f1f8fe; } /*--- Employee history page ---*/ .profile table { background:#f9f6de; } /*--- CSV upload pages ----*/ /* file select/upload page */ .csv_error { position:relative; } .csv_error_msg { position:absolute; z-index:1000; top:25px; left:0; padding:20px; margin-left:-5px; border-radius:5px; border:3px solid #b40000; background:rgba(255,255,255,0.4); } .csv_tool .f_fields { padding-top:10px; padding-left:10px; width:98%; } /* datamatch page table.csv_match { background-color:transparent; } .csv_match td,.csv_match th { width:310px; } .csv_match select { width:100%; } */ /* profile data-match selection table */ .csvtool .page_object { margin-bottom:20px; } .splain_id_container { float: right; width: 97%; background: #e2e2e2; padding: 12px; margin-bottom: 30px; margin-top: 30px; } h4.system_splain_left { width:50%; float:left; padding:8px 8px; border-right:1px solid #222; } .csvtool .account_id { width:46%; float:right; padding-top:10px; } .csvtool .choices_container, .csvtool .match_note_container, .csv_submit_container { padding:20px 20px 40px 20px; border-radius:12px; background:#5da9dd; } .csvtool .match_note_container { float:right; width:28%; } .csvtool .choices_container { float:left; width:62%; } .csvtool .match_note_container h3, .csvtool .choices_container h3 { color:#fff; margin-bottom:10px; margin-top:-8px; } .csvtool .match_notes { background:rgba(255,255,255,0.3); border-radius:10px; padding:20px; color:#fff; font-size:1.1em; } .csvtool .match_notes li { margin-bottom:15px; } /* actual select table */ .csvtool .choices { padding-bottom:20px; background:rgba(255,255,255,0.3); color:#fff; font-size:1.1em; border-radius:10px; border-bottom-right-radius:0px; width:100%; margin-bottom:0; } .csvtool .choice_col1 { width:35%; } .csvtool .choice_col2 { width:45%; } .csvtool .choice_col3 { width:20%; } /* did not produce desired result... */ .csvtool .choices, .csvtool .choices tr, .csvtool .choices th, .csvtool .choices td { border:0; text-align:left; } .csvtool .choices tr:first-child td { padding-top:20px; } .csvtool .choices tr:last-child td { padding-bottom:20px; } .csvtool .choices td:last-child { text-align:center; } .csv_submit_container { width:200px; padding:12px 18px; float:right; clear:both; background:rgba(255,255,255,0.3); border-top-right-radius:0px; border-top-left-radius:0px; } .csvtool button { display:inline-block; width:100%; background:#555 !important; box-shadow:none; } td.csv_required { color:#a00; } /* profile details upload */ /* profile history upload */ /* profile leave balances upload */ /*--- Bank selection - payrollsettings page ---*/ .bank_selection { } ul.bank_select { float:left; } ul.bank_select.no_overnight { margin-top:25px; } .bank_selection .bank_note { float:right; clear:none; width:160px; padding:16px 5px 19px 50px; margin-top:10px; background:url(../images/bgno_bank_bracket.png) no-repeat left center; } .setup_columns .f_field input.text { width:378px; } /*--- custom pay types ---*/ .pay_types fieldset { width:99.5%; } .pay_types .page_object { width:95.5%; padding-right:0; } .pay_type_container { float:left; width:100%; } .pay_types .pay_type h4 { margin-left:0; padding-left:0; } .pay_types .pay_type { position:relative; float:left; width:96%; padding:5px 2% 35px 2%; margin-bottom:20px; border-radius:5px; background-color: #d2ceaa; background-image: -webkit-linear-gradient(top, #d2ceaa, #bfbb9a); background-image: linear-gradient(to bottom, #d2ceaa, #bfbb9a); } .pay_type .column.second, .pay_type .column.third { width:12.5%; } .col_x3 .column.accountno { width:28% } .pay_type_taxable { margin-bottom:25px; } .pay_type_nontaxable { } .pay_types .add_new_container { margin-right:12px; padding-top:8px; } .pay_types .add_new { padding-right:32px; color:#333; text-align:left; background:url(../images/bgno_row_add.png) no-repeat right center; text-shadow:none; border:none; -moz-box-shadow:none; box-shadow:none; } .pay_types .add_new:hover { color:#690; background-image:url(../images/bgno_row_add_on.png); } .pay_type .remove_container { position:absolute; right:12px; top:5px; width:auto; height:40px; } .pay_type button.remove { float:right; width:auto; border:none; height:auto; padding-right:32px; color:#333; text-align:left; background:transparent url(../images/bgno_row_dlt.png) no-repeat right center; -moz-box-shadow:none; box-shadow:none; text-shadow:none; } .pay_type button.remove:hover { color:#c00; background-image:url(../images/bgno_row_dlt_on.png); } .profile_pay_types .pay_type input, .profile_pay_types .pay_type select { min-width:94%; } .pay_type #typeamount0, .pay_type #typeamount1, .pay_type #typeamount2, .pay_type #typeamount3, .pay_type #typeamount4, .pay_type #typeamount_a0, .pay_type #typeamount_a1, .pay_type #typeamount_a2, .pay_type #typeamount_a3, .pay_type #typeamount_a4 { min-width:80px; width:80px; } .tag_container { float:left; width:100%; padding-top:5px; margin-top:20px; background:url(../images/bgno_empedit_border.png) repeat-x center top; } /*--- HELP pages ------------------------------------------------------------------------------------------------------------------------*/ .help_area .page_object.padmeup { width:97%; padding:10px 0 10px 20px; } .page_object.high .summary_head, .page_object.high .summary_note { float:left; clear:both; width:97%; padding:20px 0; margin-right:20px; text-align:center; } .page_object.high .summary_head { margin-top:10px; border-top:1px dashed #000; font-family:'MuseoSlab-500', Georgia; } .page_object.high .summary_note { padding-top:5px; } /* */ .help_area .page_object.high { border:3px solid rgba(118,135,25,0.50); overflow:hidden; } .help_area .page_object.high.manual { border-color:rgba(73,85,6,0.5); background-color:rgba(73,85,6,0.15); width:46%; margin:10px 0 0 0; padding:20px 0 15px 0; } .help_area .manual_link { text-align:center; } .help_area .page_object.high, .help_area .expandme.high { background:#fff url(../images/bgxy_paneltexture01.png) repeat top left; } .questions.high { height:46px; } .questions.high.expanded { height:380px; } .questions h2 { text-align:center; margin-left:-20px; } .expandme_container { position:relative; width:100%; float:left; } .help_area .expandme.high { position:absolute; top:0; left:45%; right:45%; z-index:100; width:70px; padding:2px 5px 5px 5px; margin-top:-38px; border:3px solid rgba(118,135,25,0.50); border-top:0px; cursor:pointer; font-size:1.1em; font-weight:900; text-align:center; -webkit-border-bottom-right-radius:25px; -webkit-border-bottom-left-radius:25px; -moz-border-radius-bottomright:25px; -moz-border-radius-bottomleft:25px; border-bottom-right-radius:25px; border-bottom-left-radius:25px; } .help_area .expandme.high.expanded { color:#1a71ac; } .col_x3 .help_object.column { width:31%; } /*--- Howto help section ---*/ .help_area h2 { color:#1a71ac; } .howto { width:100%; margin:20px 0; float:left; } /* containing block for 'howto' elements */ .howto h3 { color:#73680b; font-family:'MuseoSlab-500'; } img.howto_hero { float:left; margin:15px 0 30px 330px; } .howto_intro { margin-bottom:40px; } .option_group {height:130px; overflow:hidden; float:left; clear:left; width:98%; padding:10px; margin-bottom:20px; border-radius:5px; background:#eee; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .opt_g2 { height:180px; } .question { width:98%; background:#f5f5f5; padding:10px; margin-bottom:20px; border-radius:3px; box-shadow:0px 0px 3px rgba(0,0,0,0.25); } .option, .question, .result { float:left; clear:left; } .howto p { float:left; } /* question paragraphs left */ .howto .question p { width:82%; font-size:1.1em; color:#a6882e; } .howto .page_object p, .opt_g2 .question p { width:70% } /* yes-no buttons (ids are for scripting) */ .hidden { display:none; } .opt_answers { position:relative; float:right; width:12.5%; overflow:hidden; text-align:right; } .opt_g2 .opt_answers { width:19.5%; } .howto .page_object .opt_answers { width:200px; } .opt_answers .button_shield {position:absolute; width:100%; top:48px; right:0; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out; -webkit-border-radius:5px; border-radius:5px; background:rgba(255,255,255,0.2); } .opt_answers.on .button_shield { top:0; } .answer, .result { padding:10px; background:#e2e2e2; clear:both; margin-bottom:20px; border-radius:3px; box-shadow:0px 0px 3px rgba(0,0,0,0.25); } .opt_no { } .opt_yes { } button.no_click, button.no_click:hover { background:#777 !important; cursor:default; } /* showing results */ .result { width:98%; } .result p { width:100%; } .result img { border-radius:3px; box-shadow:0 0 3px rgba(0,0,0,0.2); } .result img.go_left { margin-right:20px; } /* reset button style */ .option_reset {float:left; clear:both; padding:10px; margin-top:-25px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background:#eee; } /*--- integration page -------------------------------------------------------------------------------------------------------------------*/ .xero h2, .wfmax h2 { padding:40px 0px 54px 120px; font-size:1.6em; } .xero h2 { background:url(../images/bgno_integration_xero.png) no-repeat left top; } .wfmax h2 { background:url(../images/bgno_integration_wfmax.png) no-repeat left top; } span.refresh_error { position:absolute; right:-10px; top:200px; padding:10px 20px 10px 10px; border-radius:5px; background:#e2e2e2; } .page_object.xero div.expander, .page_object.wfmax div.expander { float:left; width:30px; height:30px; clear:left; text-indent:-9999em; } .closed div.expander { height:30px; background:url(../images/bgno_sumarrow_off.gif) no-repeat 2px 10px; } .open div.expander { height:30px; background:url(../images/bgno_sumarrow_on.gif) no-repeat 2px 10px; } .expander { cursor:pointer; } .page_object.xero.closed {height:230px; overflow:hidden;} .page_object.xero.open {height:370px; overflow:hidden;} .key_field label.f_text { padding-top:7px; font-weight:bold; } .integration_advanced {width:100%;} .integration_advanced h4 {margin-bottom:10px;} .integration_advanced label.label_radio {display:block;} .integration_advanced input.radio {float:left; padding:0 5px; margin-right:10px;} div.no_option { padding:10px 20px; } .form_object .paytype_codes .f_checkbox { clear:left; } /* .integration .key_submit {position:absolute; right:0px; bottom:0px; z-index:20; width:200px;} */ .integration.xero div.field_groupings { } .integration.xero #opt .fieldline_2col, .integration.xero #opt .f_field, { margin-right:10px; min-height:60px; } /*--- CUSTOM REPORTING PAGE --------------------------------------------------------------------------------------------------------------*/ .custom_reports button:hover { background-color:#609bc3; } .custom_reports button.select_but:active, .custom_reports button.select_but_on:active, .custom_reports button.select_but:focus, .custom_reports button.select_but_on:focus, .custom_reports button.submitbut:focus { outline:none !important; } button.selectbut, button.selectbut_on { padding:6px 15px 10px 35px; margin:0; box-shadow:none; text-shadow:none; border-radius:0; border:none; background-color:#6fa0c1; color:#555; background-image:url(../../images/bgno_selectbut_off.png),url(../../images/bgno_filter_off_sub.png); background-position:10px 7px,-5px 30px; background-repeat:no-repeat,repeat-x; } button.selectbut_on { background-image:url(../../images/bgno_selectbut_on.png),url(../../images/bgno_filter_on_sub.png); background-position:10px 7px,-5px 30px; background-repeat:no-repeat,no-repeat; } /* specific list/button rules */ ul.options { padding:0 !important; } ul.options li { list-style:none !important; margin-left:0 !important; } ul.options li button { min-width:100%; text-align:left; } li.opt_dat { } li.opt_dat .selectbut { background-image:url(../../images/bgno_selectbut_off.png), url(../../images/bgno_filter_off_dat.png); } li.opt_dat .selectbut_on { background-image:url(../../images/bgno_selectbut_on.png), url(../../images/bgno_filter_on_dat.png); } li.opt_dep { } li.opt_dep .selectbut { background-image:url(../../images/bgno_selectbut_off.png), url(../../images/bgno_filter_off_dep.png); } li.opt_dep .selectbut_on { background-image:url(../../images/bgno_selectbut_on.png), url(../../images/bgno_filter_on_dep.png); } li.opt_sec { } li.opt_sec .selectbut { background-image:url(../../images/bgno_selectbut_off.png), url(../../images/bgno_filter_off_sec.png); } li.opt_sec .selectbut_on { background-image:url(../../images/bgno_selectbut_on.png), url(../../images/bgno_filter_on_sec.png); } li.opt_emp { } li.opt_emp .selectbut { background-image:url(../../images/bgno_selectbut_off.png), url(../../images/bgno_filter_off_emp.png); } li.opt_emp .selectbut_on { background-image:url(../../images/bgno_selectbut_on.png), url(../../images/bgno_filter_on_emp.png); } li.opt_job { } li.opt_job .selectbut { background-image:url(../../images/bgno_selectbut_off.png), url(../../images/bgno_filter_off_job.png); } li.opt_job .selectbut_on { background-image:url(../../images/bgno_selectbut_on.png), url(../../images/bgno_filter_on_job.png); } li.opt_ptp { } li.opt_ptp .selectbut { background-image:url(../../images/bgno_selectbut_off.png), url(../../images/bgno_filter_off_ptp.png); } li.opt_ptp .selectbut_on { background-image:url(../../images/bgno_selectbut_on.png), url(../../images/bgno_filter_on_ptp.png); } li.opt_pay { } li.opt_pay .selectbut { background-image:url(../../images/bgno_selectbut_off.png), url(../../images/bgno_filter_off_pay.png); } li.opt_pay .selectbut_on { background-image:url(../../images/bgno_selectbut_on.png), url(../../images/bgno_filter_on_pay.png); } /*-------------------dashboard------------------------------*/ #action_tab { width:620px; margin:6px 22px 4px 4px; padding:1px; border:1px solid #dad49d; background:#f1f8fe; } .pay_status_blocks { width:620px; margin:6px 22px 4px 4px; padding:1px; border:1px solid #dad49d; background:#f1f8fe; float:left; } /*--- DASHBOARD and TIMESHEET --------------------------------------------------------------------------------------------------------------*/ /*-- major dashboard alert --*/ /* body.dashboard { background-position:left 46px !important; } warning background position */ body.dashboard { background-position:left 0; } .system_alert { min-height:36px; padding:10px 0 0 0; background-color:#c60707; } .system_alert h1 { font-family:'MuseoSlab-500'; color:#fff; text-align:center; font-size:1.2em; } .updates_alert { min-height:36px; padding:10px 0 0 0; background-color:#C1C1C1; } .updates_alert h1 { font-family:'MuseoSlab-500'; color:#fff; text-align:center; font-size:1.2em; } .dash_alert { padding:10px 12px; margin:0;float:left; clear:both; width:97.45%; } .dash_alert a:link, .dash_alert a:visited, .dash_alert a:focus { color:#1861C5; font-style:italic; font-weight:900; } .hard_alert { } .medium_alert { background:rgb(232,124,47); color:#fff; width:97.45%; } /* .medium_alert a:link { color:#B1DBF5 !important; } */ .soft_alert { background:rgba(160,193,43,0.6); } /* #dashcontainer { width:955px; float:left; margin:-13px 0 4px 0; z-index:-1; } This selector is no longer used so see what happens without it... .headbut2 { color:#efefef; text-align:center; padding:8px 0; display:block; font-weight:bold; } */ /*-- Alert notice --*/ h2.dash_alert { color:#ad0000; padding:25px 0; } h2.dash_alert.off, h3.dash_alert.off { display:none; } h3.dash_alert, h3.dash_alert.reminder {float:left; clear:left; color:#ad0000; padding:15px; margin:20px 0; border:1px dashed #ad0000; background:url(../images/bgxy_alert.png) repeat 0 0;} h3.dash_alert.reminder, .payslips h3.dash_alert { color:#555; } h3.dash_alert.reminder span { background:#fff; padding:2px; } h5.alert_modal { font-family:'MuseoSlab-500'; font-color:#6950A1; } #left_col ul.pays li { list-style:none; width:58px; float:left; margin:0; } #left_col ul.pays { float:left; padding-left:0; } .pay .deposit_tile, .pay .pay_tile { width:45px; padding:5px; float:left; } /*-- Intro section - top of page --*/ #dsh_intro_container { width:955px; float:left; clear:left; padding:10px 0 10px 0; } .dashboard #dsh_intro_container { margin-top:-30px; } .dsh_intro { width:480px; float:left; padding:0 0 0 200px; background:url(../images/bgno_dsh_intro.png) no-repeat 20px 5px; min-height:110px; } .dsh_intro.wide { width:755px; margin-bottom:40px; } .tms_intro { min-height:110px; } #dsh_intro_container .dsh_intro p { padding:0.25em 0; } span.acct_number { padding:3px 6px; color:#645b0f; background:#e5f1fb; -webkit-border-radius: 6px; border-radius: 6px; -webkit-background-clip: padding-box; background-clip: padding-box; } .help_area span.acct_number { display:inline-block; margin:2px 0; } h3.dsh_emp_name { width:562px; padding-left:173px;float:left; font-family:'MuseoSlab-500', Georgia; font-size:1.8em; } /* biz name name */ h3.dsh_emp_name span { font-size:0.5em; } /* the 'for' before biz name */ .dsh_empnav { width:160px; float:right; padding:10px 11px 3px 10px; margin-top:-50px; display:none; } .dsh_empnav input, .dsh_empnav button { width:150px; float:right; clear:right; margin:5px 0 0 0; } .dsh_paynav, .tms_paynav { width:200px; float:right; padding:0px 11px 10px 0; margin-top:0px; /*border-top:1px dashed #cecbae; background:#777;*/ } /* .tms_paynav { margin-top:-20px; } */ .dsh_paynav div, .tms_paynav div { float:right; } .dsh_newpay, .tms_newpay { padding:15px 0 30px 0; } .dsh_newpaybut_cont { position:relative; } .dsh_newpaybut_cont input, .tms_newpaybut_cont input { width:200px; margin-top:4px; } .dsh_newpaybut_cont #newpay_working { display:inline; overflow:visible; } .dsh_newpaybut_cont #newpay_working span { position:absolute; top:0; right:0; bottom:0; left:0; z-index:30; padding-top:3px; margin:8px 14px 8px 4px; text-align:center; background:#82a82b; color:#fff; font-weight:bold; border-radius:3px; } /* layer order for button and pull-down in succesive table rows - mainly found in 'annual_report.php' */ td.tools_cell { padding: 0 5px !important; } .dsh_currentpays_cont { position:relative; width:200px; height:38px; margin:0 auto; } #summary_month .dsh_currentpays_cont { width:110px; } .dsh_currentpays_cont input.current_pays { position:absolute; left:0; top:0; z-index:10; } .dsh_currentpays_cont input.tool_expander { width:110px; } #other_payroll_div { z-index:215; } input.expand {width:200px; padding-left:25px; padding-right:25px; background-image:url(../images/bgno_arrow_wh_off.png); background-repeat:no-repeat; background-position:8px center;} input.expand:hover {background-image:url(../images/bgno_arrow_wh_off.png); background-repeat:no-repeat; background-position:8px center;} input.expand.expand_on {background-image:url(../images/bgno_arrow_wh_on.png);} /* hides the pays in which the current employee is NOT included, ready for call on rollover */ div.paynav_paylist, div.report_tools {font-size:.9em; width:180px; padding:10px; position:absolute; left:-99999px; top:36px; z-index:200; background-color:#eff8ff; -webkit-box-shadow:1px 1px 0px 0px rgba(0,0,0,0.2); box-shadow:1px 1px 0px 0px rgba(0,0,0,0.2);} div.paynav_paylist.on_state {left:0px;} div.report_tools.on_state {left:-46px; top:37px;} /* annual report page */ #left_col .paynav_paylist ul, #left_col .report_tools ul {padding:0;} #left_col .paynav_paylist li, #left_col .report_tools li {list-style:none; padding:6px 0; margin-left:0; border-bottom:1px dashed rgba(0,0,0,0.15);} #left_col .paynav_paylist li:last-child, #left_col .report_tools li:last-child {border-bottom:0 none;} input.paynav_addemp_but {padding:2px 3px; font-size:.9em; float:right; margin:0 0 0 5px;} /* Dash pay tools button and container */ .dsh_pay_tools { float:right; width:200px; margin:-49px 12px 0 5px; position:relative; } input.tool_expander {z-index:110; background-color:#6ca9dc;} .dsh_pay_tools .on_state {z-index:105;} .dsh_pay_tools .tool_list input, .dsh_pay_tools .tool_list button {width:180px;} .dsh_pay_tools button.delete_pay {position:relative; clear:both;} div.tool_list { width:180px; height:22px; padding:2px 10px 6px 10px; position:absolute; left:0; top:5px; z-index:80; font-size:1em; overflow:hidden; background:#8dc2ef url(../images/bgno_arrow_wh_off.png) no-repeat 10px 8px; border:1px solid rgba(0,0,0,0.15); -webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.25); box-shadow:0px 0px 2px rgba(0,0,0,0.3); text-shadow:0px 0px 1px rgba(0,0,0,0.4); } #track_tools div.tool_list li { list-style:none !important; } div.tool_list:hover { height:239px;/* (+dd button) height:195px;*/ background-image:url(../images/bgno_arrow_wh_on.png);z-index:201; } div.tool_list h4 { font-size:1.1em; font-weight:700; color:#fff; text-align:center; cursor:pointer; } #track_tools div.tool_list:hover { height:auto; background-image:url(../images/bgno_arrow_wh_on.png); } .dsh_pay_tools_track { float:right; width:200px; margin: 0px 12px 0 5px; position:relative; } .dsh_pay_tools_track input.tool_expander {z-index:110; background-color:#F3F6EF;} .dsh_pay_tools_track .on_state {z-index:105;} .dsh_pay_tools_track .tool_list_track input, .dsh_pay_tools_track .tool_list_track button {width:180px;} div.tool_list_track { width:180px; height:22px; padding:2px 10px 6px 10px; position:absolute; left:0; top:10px; z-index:80; font-size:1em; overflow:hidden; background:#8dc2ef url(../images/bgno_arrow_wh_off.png) no-repeat 10px 8px; border:1px solid rgba(0,0,0,0.15); -webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.25); box-shadow:0px 0px 2px rgba(0,0,0,0.3); text-shadow:0px 0px 1px rgba(0,0,0,0.4); } #track_tools_2 div.tool_list_track li { list-style:none !important; } div.tool_list_track:hover { height:239px;/* (+dd button) height:195px;*/ background-image:url(../images/bgno_arrow_wh_on.png);z-index:201; } div.tool_list_track h4 { font-size:1.1em; font-weight:700; color:#fff; text-align:center; cursor:pointer; } #track_tools_2 div.tool_list_track:hover { height:auto; background-image:url(../images/bgno_arrow_wh_on.png); } /* Dash direct debit release button */ div.dd_ready { float:right; width:200px; margin:-49px 220px 0 5px; position:relative; } .dd_ready button { min-width:180px; } /*-- Pay summary section --*/ .pay_expanded/*, .pay_summary, .duration_5day, .duration_4day, .duration_3day, .duration_2day, .duration_24hr, .duration_ovrnt*/ { float:left; width:955px; background-color: #b1d3ea; /* background-image: -webkit-gradient(linear, left top, left bottom, from(#62a3cf), to(#92c0de)); background-image: -webkit-linear-gradient(top, #62a3cf, #92c0de); background-image: -moz-linear-gradient(top, #62a3cf, #92c0de); background-image: -o-linear-gradient(top, #62a3cf, #92c0de); background-image: linear-gradient(to bottom, #62a3cf, #92c0de); */ margin-bottom:25px; } .pay_expanded {clear: both;} .dashboard h2, .timesheet h2, .reports h2 { /* changed from .pay_expanded */ width: 935px; color: #fff; font-size: 1.6em; text-shadow: 0px 0px 2px rgba(0,0,0,0.4); padding: 12px 10px 8px 10px; margin-bottom: 5px; background: #74b3de; background-image: -webkit-gradient(linear, left top, left bottom, from(#8ac6ee), to(#74b3de)); background-image: -webkit-linear-gradient(top, #8ac6ee, #74b3de); background-image: -moz-linear-gradient(top, #8ac6ee, #74b3de); background-image: -o-linear-gradient(top, #8ac6ee, #74b3de); background-image: linear-gradient(to bottom, #8ac6ee, #74b3de); clear:both; } .dashboard .modal_form h2 { width:100%; } /* .pay_expanded button.delete_pay {float:right; margin:-47px 10px 0 10px;} */ .pay_summary button, .pay_summary input.button {border:1px solid rgba(0, 0, 0, 0.15); box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);} /*--- PAY SET UP for new / existing pay in dashboard ---*/ .pay_summary { float:left; clear:both; width:100%; } .paycol {float:left; padding:10px; margin-right:12px; position:relative;} .paycol h3, h3.panel_h3 {color:#5d5d5d; font-size:1.3em; float:left; clear:left;} .pay_day h3 span {padding-left:5px; font-size:.9em; font-style:italic; color:#888;} .paycol p, .paycol ul { float:left; margin-left: 0px;} #left_col .paycol ul { width:340px; padding:2px; float:right; } #left_col .paycol li { width:105px; float:left; padding:2px 0; margin:2px 0; } .pay_emp_change, .pay_day_change { text-align:right; } .dashboard .pay_day { width:440px; border-left:none; } .dashboard .pay_plan, .dashboard .pay_employees { background: /* #85be3c*/ #a5cbE0 url(../images/bgxy_linetxtr_white05.png) repeat left top; border: 1px solid rgba(0,0,0,0.4); -webkit-box-shadow: 0 0 5px 1px rgba(0,0,0,0.1) inset, 0 0 3px 1px rgba(0,0,0,0.1); box-shadow: 0 0 5px 1px rgba(0,0,0,0.1) inset, 0 0 3px 1px rgba(0,0,0,0.1); } .dashboard .pay_plan { width:440px; border:1px solid rgba(0,0,0,0.2); padding:2px 10px 1px 10px; margin:39px 12px 7px 0; float:right; background-color: /* #85be3c*/ #D1E09C; } .dashboard .pay_employees { width:440px; border:1px solid rgba(0,0,0,0.2); padding:2px 10px 1px 10px; float:right; clear:right; background-color:/* #0573b0*/ #b6d6e8; } .dashboard .pay_plan h3, .dashboard .pay_employees h3 { padding:7px 0 3px 0; line-height:1em; color:#444; font-size:1.2em; } .dashboard .pay_plan li, .dashboard .pay_employees li { margin:0; padding:0 !important; } .dashboard .pay_plan li a, .dashboard .pay_employees li a { color:#1e508a; padding-top:3px; padding-bottom:3px; } /*-- Date boxes - Pay Day and Pay Period --*/ .pay_date_container { width:210px; float:left; margin-right:10px; } .pay_date_panel { width:210px; float:left; clear:left; position:relative; } .pay_date_panel div { webkit-box-shadow:0 0 10px 2px rgba(0,0,0,0.1) inset; box-shadow:0 0 10px 2px rgba(0,0,0,0.1) inset; } .pay_date_panel div { height:50px; } .pay_date_panel.pay_date_day { background:#3481AB url(../images/bgxy_linetxtr_white05.png) repeat left top; border:1px solid rgba(0,0,0,0.15); } .pay_date_panel.pay_date_period { background:#c7b976 url(../images/bgxy_linetxtr_white05.png) repeat left top; border:1px solid rgba(0,0,0,0.3); } .pay_date_panel.trans_date_day { background:#82a82b url(../images/bgxy_linetxtr_white05.png) repeat left top; border:1px solid rgba(0,0,0,0.15); } .pay_date_date { width:141px; padding:10px 5px 10px 10px; float:left; } .pay_date_change, .pay_period_change { width:39px; padding:10px 10px 10px 5px; float:right; background:#708694 /*url(../images/bgxy_linetxtr_white05.png) repeat left top*/; } .pay_date_change:hover, .pay_period_change:hover { background-color:#8da2b0; webkit-box-shadow:0 0 10px 2px rgba(0,0,0,0.2) inset; box-shadow:0 0 10px 2px rgba(0,0,0,0.2) inset; } .pay_date_date span { color:#fff; display:inline-block; } span.daynum { font-size:4.5em; padding:18px 4px 10px 0; display:block; float:left; clear:both; text-shadow:0 0 2px rgba(0,0,0,0.3); } span.month, span.year { font-size:1.2em; padding:7px 0 0px 0; line-height:1.1em; } span.dayname { font-size:1em; padding:2px 2px 0px 0; } .pay_date_panel button.pay_day_change { position:absolute; top:0; right:0; width:54px; height:65px; padding:30px 0 0 0; margin:0; border-radius:0; border:0 none; font-family:"Lucida Grande"; font-size:.8em; font-weight:200; background:transparent; box-shadow:none; } .confirm_message.one_off { float:left; clear:left; } /*-- confirm pay colour box elements --*/ #modal_confirm, #modal_confirm_dd { width:90%; padding:2% 5% 8% 5%; } #modals .modal_form h2 { width:104%; margin-left:-4%; } /* transfer & payday date (global) */ .conf_trans_amount, .conf_pay_amount { font-size:1.6em; font-weight:normal; } .conf_trans_amount { /*color:#9eca5f;*/ color:#74b3de; } .conf_pay_amount { color:#74b3de; } /* no currently used */ .confirm_date .pay_date_container, .confirm_date .pay_date_panel { width:auto; } .in_days { float:right; height:40px !important; padding:20px 10px 10px; font-size:1.1em; color:#fff; background-color:#9eca5f; } .in_days p { float:left; width:100%; padding:0; line-height:2.8em; text-align:center; text-shadow:0 0 2px rgba(0, 0, 0, 0.3); } .in_day_prenum, .in_day_prenum_f, .in_day_days, .in_day_num, .in_day_time { display:block; } .in_day_prenum, .in_day_prenum_f { float:left; margin-top:-15px; } .in_day_num { float:left; font-size:4em; } .in_day_time { float:left; font-size:3em; } .in_day_days, .in_day_pm { float:right; padding-top:7px; padding-left:2px; } span.daytoday { padding-top:15px; font-size:3em; text-shadow:0 0 2px rgba(0,0,0,0.3); } /* confirm transfer date -- .trans_date_day -- */ /* confirm pay date -- .pay_date_day -- */ .confirm_date.transfer { margin-left:45px; margin-bottom:20px; } .confirm_date.payday { float:right !important; clear:left !important; margin-right:45px; } #modal_confirm_f .confirm_date.payday { margin-right:145px; } .pay_date_day .in_days { background-color:#74b3de; } /* confirm_it buttons */ .confirm_it { float:left; width:100%; margin-top:30px; } /*-- date picker --*/ .dashboard #date { position:relative; } .dashboard #datepick_container { } .dashboard #datepick_container input { position:absolute; top:12px; right:15px; z-index:40; width:26px; height:28px; padding:0; border:0 none; background:transparent url(../images/bgno_datepic_med.png) no-repeat 0 0; text-indent:-99999px; cursor:pointer; } .dashboard #datepick_container input:hover { background-image:url(../images/bgno_datepic_med.png); } #left_col ul.pay_plan_opt li, #left_col ul.pay_emp_opt li { list-style:none; margin-left:0; } #left_col ul.pay_emp_opt li { color:#aaa; } .pay_plan_opt li a, .pay_emp_opt li a { padding-left:20px; } .pay_plan_opt li a.plan_chk_on, .pay_plan_opt li a.plan_chk_on:hover, .pay_emp_opt li a.emp_plan_on, .pay_emp_opt li a.emp_plan_on:hover {background:url(../images/bgno_chk_on.png) no-repeat left center;} .pay_plan_opt li a, .pay_emp_opt li a {background:url(../images/bgno_chk_off.png) no-repeat left center;} .pay_plan_opt li a:hover, .pay_emp_opt li a:hover {background:url(../images/bgno_chk_hvr.png) no-repeat left center;} /*-- pay expanded - date line --*/ /* old pointer style .duration_5day { width:796px; } .duration_4day { width:665px; } .duration_3day { width:534px; } .duration_2day { width:403px; } .duration_24hr { width:272px; } .duration_ovrnt { width:141px; } */ .duration_5day { width:793px; } .duration_4day { width:782px; } .duration_3day { width:650px; } .duration_2day { width:518px; } .duration_24hr { width:386px; } .duration_ovrnt { width:254px; } .pay_dateline { width:97%; padding:0 5px 5px 0; margin:0 0 13px 10px; overflow:hidden; position:relative; float:left; clear:left; background:#f3f6ef; border:1px solid rgba(0,0,0,0.2); } .pay_expanded .pay_dateline h3 { padding: 10px 5px 0 15px; margin:0; font-size:1.4em; } h3.panel_h3 { padding:10px 5px 0 10px; margin:0 0 3px 0; font-size:1.3em; } .dateline_prev, .dateline_next { position:absolute; top:15px; } .dateline_prev { left:10px; } .dateline_next { right:10px; } li.pay_week { padding:10px 2px; } #left_col ul.pay_month { width:100%; height:190px; padding-left:0px; padding-top:0; position:absolute; } #left_col .pay_week ul { overflow:hidden; width:930px; padding:0; color:#9e812e; font-family:'MuseoSlab-500'; } #left_col .pay_dateline li { float:left; list-style:none; margin-left:0; } #left_col .pay_week_days li { width:12.2%; padding-bottom:155px; margin:0 1%; text-align:center; background-color:#fff; } .pay_week_days li span { display:inline-block; padding:3px 5px; background:#fff; } #week1 li:last-child, #week2 li:last-child, #week3 li:last-child, #week4 li:last-child { margin-right:0; } li.weekend_day { background:url(../images/bgxy_weekends.gif) repeat left top; } /*-- Set Pay Day calendar and visual - for set pay date and pay day pages IN PROFILE SECTION -------------------------------------*/ #left_col li.slow_banks li {list-style:none; display:inline; padding:0 5px;} /*-- calendar --*/ .pay_dateline.set_pay_date {/* moved up to .pay_dateline */} ul.pay_week_days li {position:relative;} .payday_ghost { position:absolute; top:71px; left:3px; z-index:15; width:110px; height:80px; padding:30px 10px 0px 10px; background:url(../images/bgno_setpayday_off.png) no-repeat center center; } .payday_ghost:hover {background:url(../images/bgno_setpayday_on.png) no-repeat center center; cursor:pointer;} .payday_ghost:hover p {color:#b49743;} /*-- Set Pay Day visual/s --*/ .set_pay_date .pay_visual { width:675px; right:0; } /* sets the width for selectable pay days - Tue to Sat */ .set_pay_date .payday_select { z-index:16; } .payday_select.set_default { right:545px; } .set_pay_date .payday_select.set_tue { right:543px; } .set_pay_date .payday_select.set_wed { right:409px; } .set_pay_date .payday_select.set_thu { right:274px; } .set_pay_date .payday_select.set_fri { right:139px; } .set_pay_date .payday_select.set_sat { right:5px; } .set_pay_date .pay_pointer { bottom:30px; } .payday_select p {font-size:.95em;} div.deselected {margin:0 5px; border-top:1px solid rgba(255,255,255,0.25);} /*-- Set pay plan - on same page as above --*/ .set_pay_plan {float:left; clear:left; margin-bottom:25px;} .set_pay_plan .plan { float:left; width:288px; height:200px; padding:10px; margin-right:15px; background-color:#D9D8C3; background-image:linear-gradient(to bottom, #D9D8C3, #A8A677); } .set_pay_plan .plan.plan3 {margin-right:0;} .set_pay_plan h3 {color:#696225;} .pay_dateline.set_pay_date button {position:absolute; right:10px; bottom:15px; width:180px;} /*-- pay visual --*/ .pay_visual_container { position:relative; float:left; clear:left; width:100%; height:115px; padding-top:80px; } .pay_visual { position:absolute; right:136px; height:46px; } .duration_ovrnt, .duration_1day, .duration_2day { height:46px; } .deposit_pointer, .pay_pointer { width:110px; height:70px; padding:10px; position:absolute; bottom:-70px; color:#fff; text-align:center; z-index:40; } .deposit_pointer { left:5px; top:-45px; background:url(../images/bgno_pv_dep.png) no-repeat center top; } .duration_5day .deposit_pointer { left:5px; top:-45px; background:url(../images/bgno_pv_dep5day.png) no-repeat center top; } /* for unusual occasions where holidays push the pointer beyond container */ .pay_pointer { right:5px; background:url(../images/bgno_pv_pay.png) no-repeat center top; padding-top:14px; z-index:40; } .pay_pointer h4, .deposit_pointer h4 { font-family: 'MuseoSlab-500'; color:#fff; font-size:1.2em; margin:0 5px; padding:0 0 5px 0; } .pay_pointer h4 { padding:0 0 1px 0; } .deposit_pointer h4 { padding-bottom:10px; } .deposit_pointer h4 span { position:absolute; right:13px; top:24px; z-index:50; font-size:0.75em; } .pay_pointer p, .deposit_pointer p { margin:0; padding:0; } /* resets paras for the pointers */ .deposit_pointer p.dep_amount_full, .pay_pointer p.pay_amount_full { font-family:'MuseoSlab-900'; font-size:1.5em; margin:0 5px; padding:6px 0 0 0; text-shadow:0 0 2px rgba(0,0,0,0.4); } .pay_pointer p.pay_amount_full { padding-top:4px; } .pay_pointer img.pending_img { position:absolute; z-index:50; left:80px; top:22px; display:none; } .pay_pointer.pending img.pending_img { display:block; } /*-- employees section under the timeline payvisual --*/ .employees_container { float:left; clear:both; padding:10px 0 20px 15px; margin-left:10px; margin-bottom:40px; background:#f3f6ef; border:1px solid rgba(0,0,0,0.2); } .dashboard .employees_container { width:918px; } .timesheet .employees_container { width:922px; } .employees_container h3, .pay_dateline h3 { color: #6d6b47; font-size: 1.5em; text-shadow: 0 0 2px rgba(90,50,0,0.1); padding-bottom: 20px; } .employee_avtr { float: left; padding: 7px 10px; margin-right: 10px; margin-bottom: 10px; background: #fff /* url(../images/bgno_emp_avtr25.png) no-repeat 16px 5px */; position: relative; overflow: visible; -webkit-box-shadow: 0 0 3px 0 rgba(0,0,0,0.2); box-shadow: 0 0 3px 0 rgba(0,0,0,0.2); } /*--- Avatars x3 across - allows timesheet links to be visible rather than hidden ---*/ .dashboard .employee_avtr { width:275px; } .timesheet .employee_avtr { width:275px; } /* .dashboard .employee_avtr:nth-child(6n) { margin-right:0; } .timesheet .employee_avtr:nth-child(4n) { margin-right:0 !important; } */ button.employee_payslips { width:219px; margin:0 0 10px 0; float:left; } h5.emp_name { padding:0; width:160px; float:left; } /* if using href for both warning AND link to timesheet */ .employee_avtr h5.emp_name a { padding-right:22px; background:url(../images/bgno_avtr_tms.png) no-repeat right center; } h5.emp_name a { color:#3681c1; } h5.emp_name a:hover { color:#085ea7; border-bottom:1px solid #3681c1; } .employee_avtr.warning h5.emp_name a { padding-right:22px; background:url(../images/bgno_avtr_tms_warn.png) no-repeat right center; } /* if using span for warning (no timesheet) */ .employee_avtr.warning h5.emp_name span { padding-right:22px; background:url(../images/bgno_emp_profile_warning2.png) no-repeat right center; } /* flag for employee selection/deselection - visual change triggered by jquery */ .emp_gross { float:left; } .warning .emp_gross { color:#800; } /* employee section */ .employees_container h4 { font-size:1.1em; padding:10px 0; } .employees_container h4 a.emp_select_all { display:block; float:right; padding-right:30px; margin-right:20px; /*color:#3681C1;*/ cursor:pointer; } /* revised emp flag */ .emp_flag { text-indent:-99999px; width:31px; height:15px; margin-right:-6px; margin-top:2px; float:right; cursor:pointer; border:1px solid rgba(0,0,0,0.2); -webkit-border-radius:10px; border-radius:10px; overflow:hidden; background:url(../images/bgno_empflag_onoff.png) no-repeat -29px -2px; /* preset to 'off' */ } .emp_toggle_all { display:inline-block; width:31px; height:15px; cursor:pointer; border:1px solid rgba(0,0,0,0.2); -webkit-border-radius:10px; border-radius:10px; overflow:hidden; background:url("../images/bgno_empflag_onoff.png") no-repeat 0px -3px; } .emp_flag p { padding:0; line-height:1.3em; } /* p for accessable content */ .emp_toggle_all.emp_on, .emp_flag.emp_on { background-position:0px -3px; } /* employee selected */ /* .emp_flag.emp_on:hover { background-position:-29px -23px; background-color:rgba(0,0,0,0.1); } */ .emp_toggle_all.emp_off, .emp_flag.emp_off { background-position:-34px -3px; } /* employee deselected - jquery adds extra class on click */ /* .emp_flag.emp_off:hover { background-position:-2px -23px; background-color:rgba(0,0,0,0.1); } */ /* fly-out employee detail table */ .emp_detail { position:absolute; left:-9999em; top:30px; height:0; z-index:100; padding:5px; background:#fff; -webkit-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.4); box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.4); } .dashboard .emp_detail, .timesheet .emp_detail { width:285px; } /* three column */ .summary_month .emp_detail { width:208px; } .employee_avtr.on_state .emp_detail {left:0; height:auto;} /* employee detail expanded */ #left_col table.emp_detail_tbl {border:none; background:#fff; width:100%; margin-bottom:0;} #left_col .emp_detail_tbl th {padding:3px 10px; text-align:left; border:0 none; font-weight:normal;} #left_col .emp_detail_tbl .description {text-align:left;} #left_col .emp_detail_tbl h5 {font-size:1em;} .emp_detail button { padding:3px; margin-top:5px; display:inline; font-size:.9em; } /* employee edit button / link area */ .emp_edit {display:block; width:920px; padding:16px 0 0 0; float:left; text-align:right; clear:left; margin-top:10px; background:url(../images/bgno_empedit_border.png) no-repeat center top;} /*-- Admin tools for super users (clients don't see it) --*/ .dash_admin_tools { float: left; clear: both; padding: 12px; margin: 10px 11px 20px 11px; border: 1px solid rgba(0,0,0,0.3); background-color: #F3F6EF; } .dash_admin_tools h3 { color:#5d5d5d; } .dash_admin_tools a.button { display:inline-block; } /*-- pay month summary horizontal panel and table --*/ h2.summary_month_h2 { float:left; clear:left; margin:25px 0 6px 0; } .summary_month h3 { float:left; clear:left; margin-bottom:5px; padding-left:10px; } /* next year / prev year buttons - employee reports page (and?) */ .prev_next_month, .reports.fees .prev_next_month { display:inline-block; float:right; margin-top:-38px; } .reports .prev_next_month { margin-top:-58px; padding:10px; padding-right:0; min-width:250px; text-align:center; border-radius:3px; background-color:#dde89f; } .reports.fees .prev_next_month { background:none; padding:0; } #left_col .prev_next_month .button { display:inline; margin-right:10px; } .reports #left_col .prev_next_month .button { display:inline-block; margin-right:10px; background-color:#68a4d6; } .fees #left_col .prev_next_month .button { display:inline !important; } .download_csv { float:right; clear:right; width:220px; padding:10px 20px 10px; margin:15px 0; border-radius:3px; background-color:#cde8fc; } /* new or existing pay background - bit lighter than the pay summary and timesheets */ section.pay_expanded { background-color: #e0f1fe; background-image: -webkit-gradient(linear, left top, left bottom, from(#e0f1fe), to(#cce4f5)); background-image: -webkit-linear-gradient(top, #e0f1fe, #cce4f5); background-image: -moz-linear-gradient(top, #e0f1fe, #cce4f5); background-image: -o-linear-gradient(top, #e0f1fe, #cce4f5); background-image: linear-gradient(to bottom, #e0f1fe, #cce4f5); } /* panel that holds the summary info */ section.summary_month_container, section.tms_paytbl_container/*, section.range_picker*/ { background-color: #cde8fc; background-image: -webkit-gradient(linear, left top, left bottom, from(#cde8fc), to(#b9d7ed)); background-image: -webkit-linear-gradient(top, #cde8fc, #b9d7ed); background-image: -moz-linear-gradient(top, #cde8fc, #b9d7ed); background-image: -o-linear-gradient(top, #cde8fc, #b9d7ed); background-image: linear-gradient(to bottom, #cde8fc, #b9d7ed); } section.summary_month_container { width:935px; padding:10px 10px 10px 10px; margin-bottom:40px; float:left; clear:left; } .summary_month_container h3 { display:inline-block; padding:12px 18px 12px 14px; margin:8px 0 -5px 0; color:#5d5d5d; background:#E4F2FC; } /* snip */ /* for reporting pages but looking to implement as a default framework for datatables etc across the site */ .reports #dsh_intro_container { float:none; min-height:100px; } /* row borders */ #left_col .data_table td, #left_col .data_table th, #left_col .tms_paytbl td, #left_col .tms_paytbl th { border-left:0 none; border-right:0 none; border-bottom:1px solid rgba(0,0,0,0.2); border-top:1px solid rgba(255,255,255,0.9);} #left_col .data_table th, #left_col .tms_paytbl th { border-top:0 none; } .subtble_cont { position:relative; } /* expanded row detail nested tables */ #left_col .data_table .subtble { width:440px; border:none; background:#fff; float:left; } #left_col .data_table .subtble.x2 { width:49%; margin-right:18px; } #left_col .data_table .subtble.x3 { width:32%; margin-right:18px; } #printfriendly .data_table .subtble.x2 { width:100%; margin-right:18px; } #left_col .data_table .subtble.x3:last-child, #left_col .data_table .subtble.x2:last-child { margin-right:0px; } button.payslip { float:left; width:100px; } section.data_table_container { float:left; clear:left; position:relative; width:925px; padding:5px 15px 10px 15px; margin-bottom:40px; } #printfriendly section.data_table_container { float:none; clear:none; width:200mm; } /* #left_col .data_table tr.sumrow_leave, #left_col .data_table tr.sumrow_leave td {border-bottom:0 none;} #left_col .data_table tr.sumrow_pays, #left_col .data_table tr.sumrow_pays td {border-top:0 none;} */ .reports #left_col .data_table { margin-top:10px; } table.data_table td { vertical-align:top; } table.data_table th, table.data_table td { text-align:left; } .reports #left_col .data_table th h3 { padding:0; margin:0; } .data_table th h3 { color:#8E7922; margin-bottom:0; } .data_table td h4.summary_subhead { padding:8px 0 14px 12px; color:#fff; font-size:1.6em; font-weight:500; text-shadow:0 0 1px rgba(0,72,110,0.4); } .reports td h4.summary_subhead { color:#555; } /* summary data table - Dashboard + Timesheet pay table + */ #summary_month, #left_col .data_table, #left_col .tms_paytbl { width:100%; border:none; border-bottom:1px solid rgba(255,255,255,0.5); border-collapse:separate; } #left_col .data_table, table#summary_month { border-bottom:0; } #left_col .data_table caption, #summary_month caption { display:none; height:0; overflow:hidden; border:none !important; } #left_col .data_table th, #summary_month th { color:#7d7a3f; font-size:1.1em; font-weight:400; } #left_col .data_table tfoot, #summary_month tfoot { font-weight:900; } /* #left_col .data_table td { text-align:center; vertical-align:middle; } */ td.des_key { background-color:#EBEBE4; } td.num_key { background-color:#EBEBE4; } td.num_key { text-align:right; } /* specific cell classes for summary table */ /* on/off arrow rotation - note also applies to employee avatar expansion */ #summary_month th.pay_pay { text-align:left; table-layout: fixed; padding:10px 2px; } .timesheet #summary_month th.pay_pay { text-align:center; table-layout: fixed; } td.expand { width:10px; padding-right:0; } div.expand { width:17px; float:left; } td.expand a, div.expand a { width:10px; display:inline-block; text-indent:-9999em; cursor:pointer; } .expand a.payexp_off, a.empexp_off { background:url(../images/bgno_sumarrow_off.gif) no-repeat center center; } /* default state */ .expand a.payexp_off:hover { background:url(../images/bgno_sumarrow_on.gif) no-repeat center center !important; } a.empexp_off:hover, .expand a.payexp_on, a.empexp_on { background:url(../images/bgno_sumarrow_on.gif) no-repeat center center !important; } tr.sumrow_detail { height:0; overflow:hidden; display:none; } tr.sumrow_detail.on_state { height:auto; display:table-row; overflow:visible; background-color:rgba(0,90,130,0.1); } #left_col td.detail_fullspan {vertical-align:top; padding-right:0;} .sumrow_detail td.des { text-align:left; } .sumrow_detail td.num { text-align:right; } .sumrow_detail .employee_avtr {width:198px;} td.pay_num { font-size:1.1em; color:#7d7a3f; } td.pay_num, td.tot_h4 { text-align:left; } td.tot_h4 h4 { color:#4f4d26; font-size:1em; padding:.1em 0; } td.pay_dep,td.pay_pay { padding:0 5px; } /* td.pay_dep,td.pay_pay,td.pay_deptot,td.pay_paytot {color:#fff;} */ td.pay_emp { padding: 0 2px; text-align: center; vertical-align: middle; } th.given, td.give_tot { width:100px; } #summary_month td.giv_tot, td.given { padding:2px 10px; vertical-align:middle; text-align:center; } td.pay_sts { width:20px; padding:10px 2px; text-indent:-99999px; background-position:center center; background-repeat:no-repeat; } /* end-of-row status flags */ /* dep and pay OK */ tr.yy .pay_sts {background-image:url(../images/bgno_sumsts_yy.png);} /* dep OK, pay error */ tr.yn .pay_sts {background-image:url(../images/bgno_sumsts_yn.png);} tr.yn .pay_pay {color:#c83b3b;} /* dep error, pay OK */ tr.ny .pay_sts {background-image:url(../images/bgno_sumsts_ny.png);} tr.ny .pay_dep {color:#c83b3b;} /* dep and pay error */ tr.nn .pay_sts {background-image:url(../images/bgno_sumsts_nn.png);} tr.nn .pay_pay, tr.nn pay_dep {color:#c83b3b;} /* sum table widths. note padding for cells is 10px*/ td.expand { width:10px; } td.pay_num { width:80px; } td.pay_date { width:100px; } td.pay_dep,td.pay_pay { width:120px; } /* padding down to 5px either side */ td.pay_emp { width:140px; } /* padding down to 2px either side */ th.given, td.give_tot { width:100px; } td.pay_sts { width:20px; } /* summary deposit and pay amount arrow background images */ #summary_month td.pay_dep, #summary_month td.pay_deptot {text-align:right; padding-right:0;} #summary_month td.pay_pay, #summary_month td.pay_paytot {text-align:left; padding-left:0;} td.pay_dep span,td.pay_deptot span {display:block; padding:3px 40px 3px 20px; background:url(../images/bgno_sumdep_arrow.png) no-repeat right center;} td.pay_pay span,td.pay_paytot span {display:block; padding:3px 14px 3px 24px; background:url(../images/bgno_sumpay_arrow.png) no-repeat right center;} /*-- tweaks for the report/summary table on the dashboard page --*/ .timesheet #summary_month td.pay_dep, .timesheet #summary_month td.pay_deptot, .timesheet #summary_month td.pay_pay, .timesheet #summary_month td.pay_paytot {text-align:center; padding:10px;} .timesheet td.pay_dep span, .timesheet td.pay_deptot span, .timesheet td.pay_pay span, .timesheet td.pay_paytot span {display:block; padding:3px 18px 3px 18px; background: transparent;} #left_col .tms_paytbl tbody tr:first-child td {border-top:none;} /* row borders */ #summary_month td, #summary_month th, #left_col .tms_paytbl td, #left_col .tms_paytbl th {border-left:0 none; border-right:0 none; border-bottom:1px solid rgba(0,0,0,0.2); border-top:1px solid rgba(255,255,255,0.9);} #summary_month th, #left_col .tms_paytbl th {border-top:0 none;} .subtble_cont { position:relative; } /* expanded row detail nested tables */ #summary_month .subtble {width:440px; border:none; background:#fff; float:left;} #summary_month .subtble.x2 {width:49%; margin-right:18px;} #summary_month .subtble.x3 {width:32%; margin-right:18px;} #printfriendly #summary_month .subtble.x2 {width:100%; margin-right:18px;} #printfriendly #summary_month .subtble.x3 {width:100%; margin-right:18px;} #summary_month .subtble.x3:last-child, #summary_month .subtble.x2:last-child {margin-right:0px;} button.payslip {float:left; width:100px;} #summary_month .subtble caption {display:inline; height:auto;} #summary_month .subtble tfoot, .subtble tbody {font-family:"Lucida Grande", sans-serif, Helvetica, Arial;} #summary_month .subtble th, #left_col .emp_detail_tbl {border-bottom: 1px solid #DFDBAF; padding-top:8px; padding-bottom:8px;} #summary_month tr.subcol_hdrs th {padding-top:4px; padding-bottom:4px;} #summary_month .subtble tr.subcol_hdrs th, #left_col .emp_detail_tbl th {background-color:#f3efc2;} .subtble_deposit {margin-right:20px;} #summary_month .subtble td, #left_col .emp_detail_tbl td {border:none; padding-top:6px; padding-bottom:6px; font-size:0.9em;} #summary_month .subtble tr:nth-child(even), #left_col .emp_detail_tbl tr:nth-child(even) {background:#fcfcfc;} .subtble .description, .subtble .amount, .subtble .ft_total, .emp_detail_tbl .amount {text-align:right;} .subtble .title, .subtbl .date {text-align:left;} .ft_total {font-weight:900;} /* links a little darker against the blue background */ #summary_month a {color:#498ede;} #summary_month a:hover {color:#3475c0;} /* nest detail tables displayed when left nav arrow (or possibly any part of the row) is clicked (jquery/css expand-contract) - styles may come later when data is available */ /* more admin rules ... for .admin_tools_container */ .admin_tools_container { float:left; clear:left; text-align:left; margin-top:20px; } /*--- EXTERNAL JS COMPONENTS -------------------------------------------------------------------------------------------------------------*/ /*--- Date picker ---*/ .ui-datepicker-calendar { background:#fff; } /*--- Buttons that use the css3button script - adapted TAB120913 ---*/ button.css3button { min-width:120px; color:#f2f2f2; background:#afab8b; } button.css3button:hover { background:#a19a69; } button.css3button_on { min-width:120px; color: #fff; background:#86804f; } button.css3button_on:hover { background:#736c36; } .mw60.css3button, .mw60.css3button_on { min-width:60px !important; } /*--- auto suggest ---*/ div.autosuggest { position: absolute; background-position: top; background-repeat: no-repeat; padding: 10px 0 0 0; z-index:2005; } div.autosuggest div.as_header, div.autosuggest div.as_footer { position: relative; height: 6px; padding: 0 6px; background-position: top right; background-repeat: no-repeat; overflow: hidden; } div.autosuggest div.as_footer {} div.autosuggest div.as_header div.as_corner, div.autosuggest div.as_footer div.as_corner { position: absolute; top: 0; left: 0; height: 6px; width: 6px; background-position: top left; background-repeat: no-repeat; } div.autosuggest div.as_footer div.as_corner {} div.autosuggest div.as_header div.as_bar, div.autosuggest div.as_footer div.as_bar { height: 6px; overflow: hidden; } div.autosuggest ul { list-style: none; margin: 0 0 -4px 0; padding: 0; background-color: #fff; overflow: hidden; border: solid; border-width:thin; border-color: #888; z-index:2005; } div.autosuggest ul li { color: #888; padding: 0; margin: 0 4px 4px; text-align: left; } div.autosuggest ul li a { color: #888; display: block; text-decoration: none; background-color: transparent; position: relative; padding: 0; width: 100%; } div.autosuggest ul li a:hover { background-color:#68aeff; } div.autosuggest ul li.as_highlight a:hover { background-color:#68aeff; } div.autosuggest ul li a span { display:block; padding:3px 6px; } div.autosuggest ul li a span small { color:#fff; } div.autosuggest ul li.as_highlight a span small { color:#68aeff; } div.autosuggest ul li.as_highlight a { color: #fff; background-color: #68aeff; background-position: bottom right; background-repeat: no-repeat; } div.autosuggest ul li.as_highlight a span { background-position:bottom left; background-repeat:no-repeat; } div.autosuggest ul li a .tl, div.autosuggest ul li a .tr { background-repeat: no-repeat; width: 6px; height: 6px; position: absolute; top: 0; padding: 0; margin: 0; } div.autosuggest ul li a .tr { right:0; } div.autosuggest ul li.as_highlight a .tl { left:0; background-position:bottom left; } div.autosuggest ul li.as_highlight a .tr { right:0; background-position:bottom right; } div.autosuggest ul li.as_warning { text-align: center; } div.autosuggest ul em { font-style:normal; color:#000000; } /* JS Radio button styles */ .has-js .label_check, .has-js .label_radio { padding-left: 30px; font-size:14px; margin:5px; } .has-js .label_radio { background: url(../images/bgno_chk_off.png) no-repeat; } .has-js label.r_on { background: url(../images/bgno_chk_on.png) no-repeat; } .has-js .label_check input, .has-js .label_radio input { position: absolute; left: -9999px; } .asholder { position:relative; } /*--- RULES FOR IE 7,8 & 9 ---------------------------------------------------------------------------------------------------------------*/ /*--- IE6-7 warnings and blocks (IE7 and below users are blocked from using the backend) ---*/ #ie_disclaimer {display:none;} html.lt-ie8 #ie_disclaimer, html.lt-ie7 #ie_disclaimer {display:block; position:absolute; right:10px; top:10px; z-index:1001; width:140px; padding:10px; border:2px solid #ad0000; background:#ad4444; font-size:1.1em; color:#fff; font-weight:bold; } .ie_modal_block, #ie_modal_block {display:none;} html.lt-ie8 .modal .ie_modal_block, html.lt-ie7 .modal .ie_modal_block {display:block; position:absolute; top:15px; right:15px; bottom:20px; left:15px; z-index:2001; margin:auto; background:#ad4444; color:#fff; font-weight:bold; padding:10px; border:5px solid #ad0000;} .ie_modal_block h3 {color:#fff; margin-left:0;} /*--- IE8 specific styles ---*/ /* larger panels in dash - no shadow in ie8 so light border */ .pay_dateline, .pay_date_panel, .employees_container { border:1px solid #ddd; } /* dash datepicker for period and payday */ html.lt-ie9 .pay_date_panel input.hasDatepicker { display:block; color:transparent !important; font-size:0; line-height:0; } html.lt-ie9 #summary_month td, html.lt-ie9 #summary_month th, html.lt-ie9 #left_col .tms_paytbl td, html.lt-ie9 #left_col .tms_paytbl th { border-left:0 none; border-right:0 none; border-bottom:1px solid #a0b6c6; border-top:1px solid #f9fcfe; } html.lt-ie9 table.summary_month { padding-bottom:1px; border-bottom:1px solid #f9fcfe; } html.lt-ie9 #summary_month th, html.lt-ie9 #left_col .tms_paytbl th { border-top:0 none; } /* dash tools and sub panels */ html.lt-ie9 .pay_plan, html.lt-ie9 .pay_employees, html.lt-ie9 .pay_date_panel .pay_date_day, html.lt-ie9 .pay_date_panel .pay_date_period { border:1px solid #bbb; } /* dash avatar tweaks */ html.lt-ie9 .employee_avtr, html.lt-ie9 .emp_detail { border:1px solid #e2e2e2; } html.lt-ie9 .employee_avtr { width:273px; } html.lt-ie9 .emp_detail { width:283px; border-top:0; } html.lt-ie9 .on_state { left:-1px; } /* button styling */ html.lt-ie9 button, html.lt-ie9 input.button, html.lt-ie9 a.button, html.lt-ie9 div.tool_list { border:1px solid #999; } /*loading modal css*/ .load_modal { display: none; position: fixed; z-index: 1000; top: 0; left: 0; height: 100%; width: 100%; background: rgba( 255, 255, 255, .3 ) url('https://thankyoupayroll.co.nz/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 .load_modal { display: block; } .flash{ -moz-animation: flash 1s ease-out; -moz-animation-iteration-count: 1; -webkit-animation: flash 1s ease-out; -webkit-animation-iteration-count: 1; -ms-animation: flash 1s ease-out; -ms-animation-iteration-count: 1; } @-webkit-keyframes flash { 0% { background-color:none;} 50% { background-color:#d1e09c;} 100% {background-color:none;} } @-moz-keyframes flash { 0% { background-color:none;} 50% { background-color:#d1e09c;} 100% {background-color:none;} } @-ms-keyframes flash { 0% { background-color:none;} 50% { background-color:#d1e09c;} 100% {background-color:none;} }