/******************************************************************************/ /* MASTER CSS STYLESHEET - Nats Accounting /* /* AUTHOR: Jared Williams (BlakeMedia) /* VERSION: 1.01 /* CREATED: 18 March 2014 /* MODIFIED: 18 March 2014 /* SCHEME: /* Blue - RGBa /* Blue (no trans) - RGB /* Orange - RGBa /* Orange (no trans) - RGB /* (c) Copyright 2002-2013 BlakeMedia & MediaIQ Group /******************************************************************************/ /******************************************************************************/ /* HTML MARKUP */ /******************************************************************************/ /* TODO: Split to _master.css & _custom.css! */ /********************************* RESET ALL **********************************/ HTML, BODY, DIV, SPAN, APPLET, OBJECT, IFRAME, H1, H2, H3, H4, H5, H6, P, BLOCKQUOTE, PRE, A, ABBR, ACRONYM, ADDRESS, BIG, CITE, CODE, DEL, DFN, EM, FONT, IMG, INS, KBD, Q, S, SAMP, SMALL, STRIKE, STRONG, SUB, SUP, TT, VAR, DD, DL, DT, LI, OL, UL, FIELDSET, FORM, LABEL, LEGEND, TABLE, CAPTION, TBODY, TFOOT, THEAD, TR, TH, TD {font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;padding:0;margin:0;border:0} /******************************* GLOBAL MARKUP ********************************/ HTML,BODY {height:100%} BODY {font:normal normal 14px/16px "Helvetica Nue","Helvetica",Arial,sans-serif;font-weight:100;line-height:1.5;color:#606060;background:url(/_images/master/bg-tile.jpg) repeat} /* HTML, BODY {height:100%;min-height:100%} */ /** background:url(/_images/master/grad-white.png) bottom left repeat-x **/ /***Headings***/ H1, H2, /*USAGE: Main body content area only*/ H3, H4, /*USAGE: Main body content and sidebars*/ H5, H6 {} /*USAGE: Main body content and sidebars*/ /*** H1 {font-size:1.1em;font-weight:normal;letter-spacing:0.15em;text-transform:uppercase;color:#36C;padding:0 0 2px 0;margin:20px 0 10px 0;border-bottom:1px solid #CCD} ***/ /*** H2 {font-size:1.1em;font-weight:normal;letter-spacing:0.1em;color:#6069C0;margin:10px 0 5px 0} ***/ /*** H3 {font-size:1.1em;color:#6069C0;margin:5px 2px} ***/ /* H1 {margin-bottom:50px;padding:15px;font-size:1.5em;text-transform:lowercase;line-height:1;letter-spacing:0.1em;color:#FFF} */ H2 {margin-bottom:10px;font-size:1.1em;text-transform:uppercase;letter-spacing:0.05em;color:rgb(255,153,0)} H3 {margin-bottom:10px;font-size:0.9em;text-transform:uppercase;letter-spacing:0.05em;color:rgb(255,153,0)} H4 {font-size:1em;font-weight:bold;color:#36C;letter-spacing:0.1em} H5 {font-size:1em;font-weight:bold;color:#333} H6 {font-size:0.7em;letter-spacing:0.1em;color:#AAA;text-transform:uppercase} H1 A {color:#003FCF} /*To be defined*/ H2 A {color:#003FCF} /*To be defined*/ H1 A:hover, H2 A:hover {text-decoration:none} H1 EM, H2 EM, H3 EM {font-weight:bold} /***Text***/ P {margin:8px 0} UL, OL {list-style-position:outside;margin:0 0 0 30px} STRONG {font-weight:bold;font-style:normal} EM {font-weight:bold;font-style:normal;color:#F41} CITE {font-style:italic;color:#999;line-height:12px} SAMP {font:italic normal 1em/1em Georgia,'Times New Roman',Times,serif;color:#777} HR {margin:5px;border:1px solid;border-color:#D9D9DF #D9D9DF #F9F9FF #F9F9FF} /***Tables***/ TH {font-weight:normal;text-align:left} /***Forms***/ INPUT, SELECT, TEXTAREA {font:normal 12px/12px "Trebuchet MS",Tahoma,Helvetica,Arial,sans-serif;color:#999} /***Buttons*/ BUTTON {overflow:visible;padding:4px 15px;margin:3px;cursor:pointer} BUTTON {font:normal normal 10px/10px "Trebuchet MS",Tahoma,Helvetica,Arial,sans-serif;color:#36C;letter-spacing:0.05em;text-align:center;background:url(/_images/styles/bg_button-grey.gif) 0 50% repeat-x;border:1px solid #CCC;border:#BBB #CCC #CCC #BBB} BUTTON A, BUTTON A:link, BUTTON A:active, BUTTON A:visited, BUTTON A:hover {color:#36C;text-decoration:none} BUTTON:hover {border:1px solid #999} BUTTON:-moz-focus-inner{border:0;padding:0} A + BUTTON, A:hover + BUTTON {color:#36C;text-decoration:none} /***Hyperlinks***/ A, A:link, A:active, A:visited {font-weight:inherit;color:#28C;text-decoration:none} A:hover {font-weight:inherit;color:#26B;text-decoration:underline} .drop-shadow {width:837px;height:37px;margin-left:-30px;float:left;background:url(/_images/master/drop-shadow.png) no-repeat transparent} /*********************************** HEADER ***********************************/ #tplHeader {width:100%;height:105px;margin-bottom:50px;padding-top:20px} /** background:url(/_images/master/header-bg-x.jpg) repeat-x **/ #tplHeader .content {width:880px;height:100%;position:relative;margin:0 auto} #tplHeader .logo {width:403px;height:100%;margin-top:5px;float:left;background:url(/_images/master/logo.png)} #tplHeader .logo A {width:100%;height:100%;display:inline-block} /*** PAGE TITLE ***/ H1 {} H1#services {background:url(/_images/master/heading-sprite.png) -0px -21px no-repeat} H1#about {background:url(/_images/master/heading-sprite.png) -0px -0px no-repeat} H1#contact {background:url(/_images/master/heading-sprite.png) -0px -42px no-repeat} /*** PIE BULLETS ***/ .pie {width:25px;height:25px;margin-left:-35px;float:left} .pie.topleft {background:url(/_images/master/heading-icon.png) -0px -75px no-repeat} .pie.topright {background:url(/_images/master/heading-icon.png) -0px -0px no-repeat} .pie.bottomleft {background:url(/_images/master/heading-icon.png) -0px -50px no-repeat} .pie.bottomright {background:url(/_images/master/heading-icon.png) -0px -25px no-repeat} /**** NAVIGATION ****/ #tplHeader UL.nav, #tplHeader UL.nav LI {list-style:none} #tplHeader UL.nav {position:absolute;top:0;right:0} #tplHeader UL.nav LI {width:79px;height:79px;margin-left:10px;float:left} #tplHeader UL.nav A, #tplHeader UL.nav A:link, #tplHeader UL.nav A:active, #tplHeader UL.nav A:visited {width:100%;height:100%;display:block} #tplHeader UL.nav A:hover {color:#FFF} #tplHeader UL.nav LI.home {background:url(/_images/master/nav.png) -0px -0px} #tplHeader UL.nav LI.services {background:url(/_images/master/nav.png) -158px -0px} #tplHeader UL.nav LI.about {background:url(/_images/master/nav.png) -79px -0px} #tplHeader UL.nav LI.contact {background:url(/_images/master/nav.png) -237px -0px} #tplHeader UL.nav LI.home.selected A, #tplHeader UL.nav LI.home A:hover {background:url(/_images/master/nav.png) -0px -79px} #tplHeader UL.nav LI.services.selected A, #tplHeader UL.nav LI.services A:hover {background:url(/_images/master/nav.png) -158px -79px} #tplHeader UL.nav LI.about.selected A, #tplHeader UL.nav LI.about A:hover {background:url(/_images/master/nav.png) -79px -79px} #tplHeader UL.nav LI.contact.selected A, #tplHeader UL.nav LI.contact A:hover {background:url(/_images/master/nav.png) -237px -79px} /********************************** CONTENT ***********************************/ #tplMaster {min-height:100%;height:auto !important;height:100%;margin: 0 auto -60px} #tplContent {width:880px;position:relative;margin:0 auto;padding-bottom:60px} .glow {width:100%;height:620px;position:fixed;bottom:0;left:0;background:url(/_images/master/grad-white.png) bottom left repeat-x;z-index:-100} .notice {width:280px;height:80px;position:absolute;top:-57px;right:0;border-radius:10px;font-size:13.5px;color:#FFF;background:#28C} .notice, .notice A, .notice A:hover {text-decoration:none;color:#FFF} .notice .inner {padding:20px 10px 0} .notice .icon {width:30px;height:44px;margin-right:10px;float:left;background:url(/_images/master/master-sprite.png) -100px 0} .notice .label {float:left;margin-top:3px} .notice .icon.small {width:9px;height:12px;position:absolute;bottom:21px;right:12px;margin-right:0;background-position:-50px 0} /***** PIE CHART *****/ #piechart {width:880px;position:relative;background:url(/_images/piechart/bg.png) 125px 4px no-repeat} #piechart .label.home {top:15px;left:105px;background:url(/_images/piechart/headings.png) -0px -0px no-repeat} #piechart .active-slice {width:331px;height:418px;position:absolute;top:-20px;left:85px;background:url(/_images/piechart/photo-1-active.png) -0px -0px no-repeat} #piechart .label {width:200px;height:186px;position:absolute;z-index:-50} #piechart .label.about {top:45px;left:650px;background:url(/_images/piechart/headings.png) -0px -186px no-repeat} #piechart .label.newsletter {top:425px;left:640px;background:url(/_images/piechart/headings.png) -0px -372px no-repeat} #piechart .label.services {top:640px;left:355px;background:url(/_images/piechart/headings.png) -0px -558px no-repeat} #piechart .label.contact {top:440px;left:115px;background:url(/_images/piechart/headings.png) -0px -744px no-repeat} #newsletter-form {width:100%;margin:40px 0 0 0;clear:both;opacity:0} #newsletter-form FORM {width:390px;margin:0 auto 0;padding-top:20px} #newsletter-form P {position:relative;margin-bottom:8px} #newsletter-form LABEL {display:block;padding:0 0 0 3px;margin:0 0 4px 0} #newsletter-form INPUT, #newsletter-form TEXTAREA, #newsletter-form BUTTON {width:183px;margin:2px;padding:2px;border:1px solid #e2e2e2;border-radius:3px;-moz-border-radius:3px;font-family:"Helvetica Nue","Helvetica",Arial,sans-serif;font-size:12px;color:#606060;background:#F3F3F3;background:-webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#F3F3F3));background:-moz-linear-gradient(top, #FFFFFF, #F3F3F3)} #newsletter-form INPUT {height:20px} #newsletter-form TEXTAREA {height:141px;font-size:12px} #newsletter-form BUTTON {width:auto;padding:5px;float:right} #newsletter-form .result {width:100%;padding-top:60px;text-align:center;font-size:14px;font-weight:bold;color:#FFF} #newsletter-form .validation-advice {width:100%;position:absolute;text-align:right;font-weight:bold;font-size:12px;line-height:1;color:#E61} /***** MAIN PAGE PANELS *****/ .gMainPage {width:100%;position:relative} .gMainPage .row {width:100%;height:268px} .gMainPage .row .col {float:left} .gMainPage .row .col .panel {width:386px;height:261px} .gMainPage .row .col .panel A {width:100%;height:100%;display:inline-block} .gMainPage .row .col .short {height:124px} .gMainPage .row .col.topleft {padding:0 7px 7px 0} .gMainPage .row .col.topright {padding:0 0 7px 7px} .gMainPage .row .col.bottomleft {padding:7px 7px 0 0} .gMainPage .row .col.bottomright {padding:7px 0 0 7px} .gMainPage #home {background:url(/_images/master/panel-home.jpg) -0px -0px} .gMainPage #services {background:url(/_images/master/panel-home.jpg) -386px -0px} .gMainPage #about {background:url(/_images/master/panel-home.jpg) -772px -0px} .gMainPage #contact {background:url(/_images/master/panel-home.jpg) -1158px -0px} .gMainPage #newsletter {background:url(/_images/master/panel-home.jpg) -1544px -0px;margin-top:14px;cursor:pointer} .gMainPage #home:hover {background:url(/_images/master/panel-home.jpg) -0px -261px} .gMainPage #services:hover {background:url(/_images/master/panel-home.jpg) -386px -261px} .gMainPage #about:hover {background:url(/_images/master/panel-home.jpg) -772px -261px} .gMainPage #contact:hover {background:url(/_images/master/panel-home.jpg) -1158px -261px} .gMainPage #newsletter:hover {background:url(/_images/master/panel-home.jpg) -1544px -261px} .gMainPage #newsletter-form {background:url(/_images/master/panel-home.jpg) -1544px -385px;position:absolute;bottom:-1px;right:-386px;opacity:0} .gMainPage #newsletter-form:hover {} .gMainPage {width:100%;margin:40px 0 0 0;clear:both} .gMainPage FORM {width:50%;margin:20px auto 0} .gMainPage P {position:relative;margin-bottom:8px} .gMainPage LABEL {display:block;padding:0 0 0 3px;margin:0 0 4px 0} .gMainPage INPUT, .gMainPage TEXTAREA, .gMainPage BUTTON {width:183px;margin:2px;padding:2px;border:1px solid #e2e2e2;border-radius:3px;-moz-border-radius:3px;font-family:"Helvetica Nue","Helvetica",Arial,sans-serif;font-size:12px;color:#606060;background:#F3F3F3;background:-webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#F3F3F3));background:-moz-linear-gradient(top, #FFFFFF, #F3F3F3)} .gMainPage INPUT {height:20px} .gMainPage TEXTAREA {height:141px;font-size:12px} .gMainPage BUTTON {width:auto;padding:5px;float:right} .gMainPage .result {width:100%;padding-top:60px;text-align:center;font-size:14px;font-weight:bold;color:#FFF} .gMainPage .validation-advice {width:100%;position:absolute;text-align:right;font-weight:bold;font-size:12px;line-height:1;color:#E61} /***** PAGE: Services/About *****/ .gBody {} .gBody .row {padding-bottom:10px;clear:both} .gBody .col {} .gBody .col.left {width:530px;float:left} .gBody .col.right {width:250px;float:right} /***** PAGE: About *****/ .gAbout {} .gAbout .row.photo P {width:440px;float:left} .gAbout .row.photo IMG {float:right;border:1px solid #F0F0F0} /***** PAGE: Contact *****/ .gContact {} .gContact .row {width:100%;float:left;clear:both;margin-bottom:15px} .gContact .row.push {padding-top:30px} .gContact .col {} .gContact .col.left {width:251px;float:left} .gContact .col.right {width:510px;float:right} .gContact .show-map {float:left;margin-top:5px} .gContact .show-map:hover {cursor:pointer} .gContact .show-map .icon {width:9px;height:12px;float:right;margin:3px 0 0 10px;background:url(/_images/master/master-sprite.png)} .gContact {width:100%;margin:40px 0 0 0;clear:both} .gContact FORM {} .gContact FIELDSET {width:251px} .gContact P {position:relative;margin-bottom:8px} .gContact LABEL {width:100px;float:left;padding:0 0 0 3px;margin:0 0 4px 0} .gContact INPUT, .gContact TEXTAREA, .gContact BUTTON {width:100%;margin:0 0 10px 0;padding:5px;border:1px solid #e2e2e2;border-radius:3px;-moz-border-radius:3px;font-family:"Helvetica Nue","Helvetica",Arial,sans-serif;font-size:14px;color:#606060;background:#F3F3F3;background:-webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#F3F3F3));background:-moz-linear-gradient(top, #FFFFFF, #F3F3F3)} .gContact INPUT {width:350px;height:20px;float:right} .gContact TEXTAREA {width:350px;height:141px;float:right;font-size:12px} .gContact BUTTON {width:auto;height:35px;margin:10px 0 0 0;padding:0 10px} .gContact BUTTON:hover {background:#FFF;background:-webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#FFFFFF));background:-moz-linear-gradient(top, #F3F3F3, #FFFFFF)} .gContact .result {width:100%;text-align:center;font-size:14px;font-weight:bold;color:#606060} .gContact .validation-advice {width:100%;position:absolute;text-align:right;font-weight:bold;font-size:12px;line-height:1;color:#E61} .gContact .placeholder {color:#C2C2C2} .gContact .subcol {width:251px} .gContact .subcol.left {float:left} .gContact .subcol.right {float:right} .gContact TEXTAREA, .gContact INPUT {width:244px} .gContact INPUT {width:179px;float:right} .gContact TEXTAREA {height:104px} .gContact LABEL {width:50px} /***** PAGE: Sitemap *****/ .gSitemap {} .gSitemap UL {} .gSitemap UL LI {padding:2px 0} .gSitemap .viewxml {padding-top:16px} /***** FOOTER PANELS *****/ .gThumbs {width:100%;margin-top:50px;float:left;clear:both} .gThumbs .col {height:131px;float:left} .gThumbs .col .panel {width:251px;height:131px} .gThumbs .col .panel A {width:100%;height:100%;display:inline-block} .gThumbs .col .panel-1 {margin-right:14px} .gThumbs .col .panel-2 {margin-right:14px} .gThumbs .col .panel-3 {} .gThumbs #home {background:url(/_images/master/panel-footer.jpg) -0px -0px} .gThumbs #services {background:url(/_images/master/panel-footer.jpg) -251px -0px} .gThumbs #about {background:url(/_images/master/panel-footer.jpg) -502px -0px} .gThumbs #contact {background:url(/_images/master/panel-footer.jpg) -753px -0px} .gThumbs #home:hover {background:url(/_images/master/panel-footer.jpg) -0px -136px} .gThumbs #services:hover {background:url(/_images/master/panel-footer.jpg) -251px -136px} .gThumbs #about:hover {background:url(/_images/master/panel-footer.jpg) -502px -136px} .gThumbs #contact:hover {background:url(/_images/master/panel-footer.jpg) -753px -136px} /*********************************** FOOTER ***********************************/ #tplFooter {width:100%;height:60px} #tplFooter .content {width:880px;height:50px;position:relative;margin:0 auto 10px} #tplFooter .nav {position:absolute;top:0;right:0;text-transform:uppercase;font-size:14px;color:#222} #tplFooter .nav .item {float:left} #tplFooter .nav .item:hover, #tplFooter .nav .item.active {color:#FBB243} #tplFooter .nav .divider {padding:0 18px} #tplFooter .logo {height:100%;float:left} #tplFooter .logo A {width:100%;height:100%;display:inline-block} #tplFooter .logo DIV {float:left;margin-right:8px} #tplFooter .logo #nats {width:58px;height:51px;background:url(/_images/master/logo-sprite.png) 0px 0px no-repeat} #tplFooter .logo #coe {width:36px;height:51px;background:url(/_images/master/logo-sprite.png) -65px 0px no-repeat} #tplFooter .logo #cpa {width:65px;height:31px;background:url(/_images/master/logo-sprite.png) -129px 0px no-repeat;margin-top:10px} #tplFooter .logo #nats:hover {background:url(/_images/master/logo-sprite.png) 0px -51px no-repeat} #tplFooter .logo #coe:hover {background:url(/_images/master/logo-sprite.png) -65px -51px no-repeat} #tplFooter .logo #cpa:hover {background:url(/_images/master/logo-sprite.png) -129px -51px no-repeat} #tplFooter .copyright {float:left;padding-top:19px;font-size:10px;color:#A3A3A3} #tplFooter .bm-badge {float:right;margin-top:14px} /*** BLAKEMEDIA BADGE ***/ .bm-badge {width:102px;height:20px;background-image:url(http://cdn.blakeserve.com/images/bm/badge-200.png)} .bm-badge A {width:100%;height:100%;display:inline-block} .bm-badge.white {background-position:-150px -150px} .bm-badge.white:hover {background-position:-0 -200px} /* Full colour */ .bm-badge.black {background-position:-0 -150px} .bm-badge.black:hover {background-position:-0 -200px} .badge-blakedigital { margin: 1em 0; float: right; display: block; width: 90px; height: 20px; text-indent: -999em; transition: none !important; background: transparent url("http://cdn.blakeserve.com/images/blakedigital/badge-400.png?@2x") 0 -50px / 200px auto no-repeat; } .badge-blakedigital:hover { background-position: 0px -100px; } /********************************* MISC STYLES ********************************/ /********** CLEARFIX is a patch for IE6 problems with floating divs ***********/ /******************************************************************************/ .clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden} /* .clearfix {display:inline-table;} */ /* backslash hack hides from IE mac \*/ * HTML .clearfix {height:1%} .clearfix {display:block} /* end backslash hack */ /* end clearfix hack */ .clear {clear:both} /* IE6 float fix */ .floatfix {display:inline} .floatleft {float:left;display:inline} .floatright {float:right;display:inline} /* IE6 is a piece of S#!? - pardon my syntax! */ /******************************* END STYLESHEET *******************************/