html,body {margin:0; height:100%;}
/***** RESET ******/
img, form, a,
header, nav, article, section, dialog, figure, aside, footer
{border:0; margin:0; outline:0; padding:0;}
/***** RESET END ******/

.show { display:none !important; }
.hidden { display:block !important; }
a#pull { display: none; }
nav#menu { display: none; }



/********************* PROFILES *****/

.ProfileCont { width:241px; height:173px; margin:0px 3px; position:relative; float:left; color:#fff; }
.ProfileCont a {color:#fff;}
.ProfileCont a:hover {color:#39732e;}

.ProfileMain { width:241px; height:173px; padding:0px; text-align:center; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
 }

.ProfileMain i { font-size:150px; margin-top:38px; color:#fff; -moz-opacity:.20; filter:alpha(opacity=20); opacity:.20; }

.ProfileTxt { position:absolute; z-index:88; width:241px; color:#000000; font-size:17px; text-align:center; line-height:30px; margin-top:145px; background:#ffffff; height:30px; filter: alpha(opacity=80); opacity: 0.8;  }

.ProfileOver { width:241px; height:173px; margin:0px 0px 0px -20px; text-align:center; background:#54aa44; position:absolute; z-index:99; -moz-opacity:.0; filter:alpha(opacity=0); opacity:.0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}

.ProfileOver:hover { -moz-opacity:1.0; filter:alpha(opacity=95); opacity:.95; transition: opacity .55s ease-in-out; -moz-transition: opacity .55s ease-in-out; -webkit-transition: opacity .55s ease-in-out; margin-left:-4px; }

.ProfileoverText { padding:20px 0px; }

.profilelink { background:#39732e; color:#fff; width:100%; padding:8px 10px; }
.profilelink:hover { background:#4d8541; color:#fff !important; width:100%; padding:8px 10px; }


/******************** PROFILES ENDS *****/




/******************** STRUCTURE ******/

#bodyClass {}

.mobileHeader {}


/*** HEADER STYLES BEFORE IT SHRINKS ***/
.headerWrap { width: 100%; padding:0px 0; position: fixed; top: 0; left: 0; z-index: 999; -webkit-transition: height 0.2s; -moz-transition: height 0.2s; -ms-transition: height 0.2s; -o-transition: height 0.2s; transition: height 0.2s; }
.headerWrap #logo img { width:474px; height:75px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; }

.headerWrap header {width:100%; padding:2% 0%;}
.headerWrap .innerheader {width:100%; padding:2% 0%; background:#ffffff;}

.headerWrap nav { width:100%; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; }

/*** HEADER STYLES AFTER IT SHRINKS ***/
.headerWrap.smaller { padding:0px 0 !important; }
.headerWrap.smaller header {width:100%; padding:1% 0%; background:#fff;}
.headerWrap.smaller .innerheader {width:100%; padding:1% 0%; background:#fff;}
.headerWrap.smaller #logo img { width:300px !important; height:47px !important; /** You will have to work out the logo height vs the smaller width **/ }
.headerWrap.smaller nav { width:100% !important; padding-top:0px !important; }

/** FIND THE HEIGHT OF THE HEADER AND ADD PADDING TO THE DIV BELOW IT **/
.gap { padding-top:0px; /** This is the height of the logo + header padding **/ }
.gap2 { padding-top:190px; /** This is the height of the logo + header padding **/ }


#logo {}

.headerPhone { float:right; }

#mainNav {background:#54aa44; -moz-box-shadow: 0px 8px 5px 0px rgba(0,0,0,.33); -webkit-box-shadow: 0px 8px 5px 0px rgba(0,0,0,.33); box-shadow: 0px 8px 5px 0px rgba(0,0,0,.33); width:100%;}

nav { height:auto; } /* STOPS NAV HEIGHT FROM JUMPING ON LOAD */
nav img { width:auto !important; display:inline-block; } /* KEEPS IMAGES IN NAV FROM SPANNING 100% */


.imageHeaderText { min-height: 172px; width: 100%; background: rgba(0, 43, 56, 0.6); position: absolute; z-index: 99; bottom:0; color:#ffffff; font-size:30px; font-weight:300; line-height:35px; text-align:center;}
.imageHeaderText p, .imageHeaderText td {font-size:30px; font-weight:300; line-height:35px; text-align:center; color:#ffffff;}
.imageHeaderTextPad {padding:3% 0%;}
.imageHeaderText h3 {font-size:30px; font-weight:300; color:#fff;}
.imageHeaderText img { width:auto !important; display:inline-block !important; }


.imageHeader { position:relative; }

section#content {padding:3% 0%;}
section#content img, section#content td img { width:auto; display:inline-block; } /* KEEPS IMAGES IN CONTENT FROM SPANNING 100% */

article {}

aside {}  /* side bar */

.servicePacks { background:#65b256; padding:4% 0%; text-align:center; }
.servicePacks .header { color:#ffffff; }
.servicePacks img { width:auto !important; display:inline-block !important; }
.servicePacks p, .servicePacks td { color:#ffffff; }
.servicePacks .buttonlink { background:#57974a; width:100%; padding:8px 0px; }
.servicePacks .buttonlink:hover { background:#4d8541; width:100%; padding:8px 0px; }
.spCon {}
.servicePacks h3 {color:#ffffff; font-size:24px; line-height:26px; font-weight:600;}

.community {background:url(../images/graphics/communitybg.jpg) center top fixed; background-size: 100% auto; padding:4% 0%; text-align:center;}

.community img { width:auto; display:inline-block; vertical-align: middle; padding:0px 20px; }

.homeFeatures {padding:4% 0%;}
.homeFeatures img { width:auto !important; display:inline-block !important; }

.innerFeatures {padding:4% 0%; background:#f1f8e8;}
.innerFeatures img { width:auto !important; display:inline-block !important; }
.pad {}

#contact { height: 350px; color:#ffffff; }
.contactOver { height: 350px; width: 100%; background: rgba(0, 0, 0, 0.1); position: absolute; z-index: 99; }
.contactCon { background: rgba(101, 178, 86, 0.9); color:#ffffff; max-width:984px; margin:3% auto 0 auto; text-align:center;}
.contactPad {padding:5%;}
.contactCon p, .contactCon td, .contactCon a {color:#ffffff !important; font-size:22px;}
.contactCon h1 {color:#fff;}
#contact p, #contact td {color:#fffff;}
#contact img { width:auto !important; display:inline-block !important; }


footer {background:#403f3f; padding:2% 0%; color:#ffffff; font-size:14px;}
footer p, footer td, footer a {color:#ffffff; font-size:14px;}
footer a:hover {color:#65b256;}
footer img { width:auto !important; display:inline-block !important; margin:0 auto !important;}

/******************** STRUCTURE END ******/

/***** DIRECTIONS BUTTON ******/

p.warning { color: red; }
input.manual-location { width: 95%; font-size: 1.2em; padding: 5px; }
.no-geolocation { display: none; }
.get-directions { background: #54aa44; padding: 8px 13px; color: #ffffff; font-size: 16px; font-weight: bold; border-radius: 6px; margin: 0 auto 0 auto; text-decoration: none; clear: both; display: block; text-align: center; cursor: pointer; width: 80%; }
.get-directions:hover { text-decoration: none; color: #ffffff; background: #4c983d; font-weight: bold; }
.dirBtn { visibility: hidden; }
	.rDirect { padding:50px 20px; text-align:center; line-height:normal !important; }
	.rDirect p { font-size:20px !important; line-height:normal !important; }

/******************** FORM STYLES ******/ 

input[type="text"], input[type="password"], textarea, select
{  border: solid 1px #ccc; padding:5px 8px; outline:0;
  -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
   } 
input[type="text"]:hover, input[type="password"]:hover, textarea:hover, select:hover
{ background:#f3f3f3; } 

input[type="submit"], button[type="button"]
{ border:0; background:#666; padding:8px 12px; color:#fff; text-transform:uppercase; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; cursor:pointer; -webkit-appearance: none;}

input[type="submit"]:hover, button[type="button"]:hover {background: #333;}
/***** FORM STYLES END ******/ 

.LinkButtons+*, .linkbuttons+* {
    clear: right
}

.LinkButtons:hover, .linkbuttons:hover {background:#00718b; cursor:pointer; text-decoration:none; color:#fff;}

.LinkButtons a, .linkbuttons a {color:#fff; text-decoration:none;}
.LinkButtons a:hover, .linkbuttons a:hover {color:#fff; text-decoration:none;}

/******************** EXTRAS ******/

/***** IE HEIGHT HACK
minheight {min-height:500px; height:auto !important; height:500px;}*/
.BlogPost { border-bottom:solid 1px #ccc; }
.PostPublished, .PostAuthor { color:#999; }
.PostHeader h2 a {text-decoration:underline; font-size:24px; font-weight:normal;}
.PostLinks { padding-left: 0; margin-left: 0; border-bottom: 1px solid #ccc; }
.PostLinks li { list-style: none; margin: 0; padding: 0.25em; border-top: 1px solid #ccc; }
#ui-datepicker-div { display:none }
.clearBoth {clear:both;height:0px;}
/* Start Form Validation Styles*/
.validation_failed {border: 1px solid red;}
.error_msg {color:red;}
/* End  Form Validation Styles */
hr { height: 0px; color: #e3e2e2; border-top: 1px; background: #e3e2e2; border-style: solid;}

/* CLEAR FIX */
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

/******************** SAASU CSS 
#saasuintro{width: 680px;}
.saasuimg{width: 680px;}
.saasuhomeimgs{}
.saasutour{}
******/

/***** COUNT 
section#content iframe.countvideos { width:640px; }
 *****/
 
/******************** SEARCH CSS ******/ 
#search { display:block; height:28px; padding:2px; vertical-align: middle; border:0; background-color:#eee; margin:0; }
#search form input { border:0px; padding:0 5px; float:left; vertical-align: middle; line-height:28px; height:28px; background:transparent;  font-size:14px; }
#search form { padding:0px; margin:0px; }
#search #searchgo { float:right; font-size:18px; color:#00539c; vertical-align: middle; line-height:28px; }

/******************** CLIENT LOGIN CSS ******/
#login{width: 160px; margin:0px auto; }
#login textarea, #login input{ outline:none;} 
#loginheader{ font-size:14px; padding: 5px; color: #000;  }
#client_login{padding: 0px; margin: 0px; font-size:11px; color:#333; }
#client_login .username{margin: 5px 0px 5px 0px; font-size:11px; width: 155px;}
#client_login .password{margin: 5px 0px 0px 0px; font-size:11px; width: 155px;}
#loginGo {float:right; margin: 5px 0px 5px 0px;}  

/******************** NEWSLETTER SUBSCRIBE THIN ******/
form#fmNewsSubscribeThin table td input  {}
form#fmNewsSubscribeThin { width:260px; margin:0px auto; }
/*form#fmNewsSubscribeThin table.newssubscribe .formlabel { font-size:14px; }
form#fmNewsSubscribeThin table.newssubscribe input#firstname { font-size:14px; }
form#fmNewsSubscribeThin table.newssubscribe input#email { font-size:14px; }*/
form#fmNewsSubscribeThin table.newssubscribe .essential { display:none; }
form#fmNewsSubscribeThin table td input#subscribe { padding:8px 18px 8px 18px; }
/*.newssubscribe .formlabel { text-align:left !important; }
.newssubscribe input[type=text] { width:300px !important; } */

/******************** GOOGLE RSS FEED ******/
.gfc-resultsHeader {border:0px !important;}
.gfc-title {font-size:16px !important; color:#666 !important; text-decoration:none !important;}
.gf-author {color:#666 !important; font-size:12px !important;}
.gf-relativePublishedDate {color:#666 !important; font-size:12px !important;}
.gf-snippet {color:#333 !important; font-size:16px !important;}
.gf-title a {font-size:16px !important;}

/********************* EXTRAS END ******/

/******************** RESPONSIVE STYLES ******/

.menu-link { display:none; } /* HIDE MOBILE MENU BUTTON */
.securewarning { display:none; width:98%; padding:1%; background:#ff0000; color:#fff; text-align:center; font-size:12px; line-height:18px; }

@media all and (max-width: 768px) { 

.mobileHeader {padding:5% 0%; text-align:center; }

    /**** IMPORTANT CSS ****/
    .responsiveimage { width:100% !important; display:block !important; height:auto !important; }
	img.responsiveimage[style] { margin-left:0 !important; margin-right:0 !important; }
	#SlideShowImg { width:100% !important; display:block !important; height:auto !important; }
    /*section#content img, section#content td img { width:100% !important; display:block; }  IMAGES SPAN 100% FOR MOBILE */
    .hidden { display:none !important; }
    .show { display:block !important; }
	iframe[style] { width:100% !important; margin:0 !important; }
	iframe[width] { width:100% !important; }

    /***** SITE CUSTOM CSS *****/
    #logo { width:80% !important; margin:0 auto; }


    /***** BLOG STYLES ******/
    div.Blog div.BlogPosts {margin:0px !important;} 
    div.Blog div.BlogRightMenu { position:relative !important; width:100%; }   

    /***** CHANGE TABLE STATE *****/
    table, thead, tbody, th, td, tr { display: block; }
    table[style] { width:100% !important; height:auto !important; }
    table[align] { float:none !important; }
    table td { padding:5px 0 !important; margin:0 !important; }
    table td[style] { width:100% !important; height:auto !important; }
    table[cellpadding] { padding:15px 0px !important; }
    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { position: absolute; top: -9999px; left: -9999px; }
    tr { border:0; }
    td { /* Behave  like a "row" */ border: none; position: relative; }

    /****** ONLINE ACCOUNTING CSS *****/
	section#content iframe.countvideos,
    section#content img.ibizzimgs, 
    section#content img.collaborateimg, 
    section#content img.BankLinkdiagram,
    section#content img.banklinklogo, 
    section#content iframe.myobvideos,
    section#content img.liveaccountslogo,
    section#content img.accountrightlogo, 
    section#content iframe.xerovideomain,
    section#content iframe.xerovideos,
    section#content img.xeroimage { width:100% !important; }
    
    /**** END *****/
    table.newssubscribe td.formlabel { text-align:left !important; }
    table.newssubscribe td input[type="text"] { width:50%; }

    /***** MOBILE NAV STYLES ******/
    .ddsmoothmenu { display:none !important; }
    nav#menu { display: block !important; height: auto; border-bottom: 0; }
        nav#menu ul { width: 100%; display: none; height: auto; padding: 0; margin: 0 auto; }
        nav#menu li { width: 100%; position: relative; display: inline; float: left; }
            nav#menu li a { background: #111 url(files/images/graphics/m_arrow.png) no-repeat 5px center; display: block; padding: 6px 0 6px 15px; border-bottom: solid 1px #111; font-weight: normal; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
        nav#menu a { text-align: left; width: 100%; color: #fff; display: block; text-decoration: none; padding: 8px 0; }
        nav#menu a:hover, nav#menu a:active { background-color: #888; }
        nav#menu ul li ul li a { padding: 6px 0 6px 25px !important; background-color: #333; background-position: 15px center; }
        nav#menu ul li ul li ul li a { padding: 6px 0 6px 35px !important; background-color: #444; background-position: 25px center; }
        nav#menu ul li ul li ul li ul li a { padding: 6px 0 6px 45px !important; background-color: #555; background-position: 35px center; }
        nav#menu ul li ul li ul li ul li ul li a { padding: 6px 0 6px 55px !important; background-color: #666; background-position: 45px center; }
        nav#menu ul li ul li ul li ul li ul li ul li a { padding: 6px 0 6px 65px !important; background-color: #777; background-position: 55px center; }
    #pull { display: block !important; text-align: center; width: 100%; position: relative; content: ""; background: #65b256 url('../images/graphics/nav-icon.png') no-repeat 12px center; height: 45px; line-height: 45px; color: #fff; text-decoration: none; }
        #pull.current { text-decoration: none; background: #333 url('../images/graphics/nav-icon-close.png') no-repeat 12px center; }
		
	#topStrip { border-bottom: solid 3px #fff; height: 50px; color: #fff; }
    .topHome, .topEmail { display:block; width:48%; height:40px; float:left; margin:5px 1%; }
    .topHome { background:#312c76 url(../images/graphics/phone_white.png) no-repeat center; }  
    .topEmail { background:#312c76 url(../images/graphics/mail_white.png) no-repeat center; } 
    .topHome:hover, .topEmail:hover { background-color:#403a98; }
	
	 /** STOP THE EFFECT AT MOBILE **/
 .headerWrap, .headerWrap.smaller { display:none; position:relative; height:auto; }
 .headerWrap, .headerWrap.smaller { padding:6% 0 !important; }
 .headerWrap #logo img, headerWrap.smaller #logo img { width:95% !important; height:auto; margin:0 auto; }
 .headerWrap header {width:100%; padding:5% 0%; background:none; height:auto;}
 .headerWrap.smaller header {width:100%; padding:5% 0%; background:none;}

.servicePacks, .servicePacks td, .servicePacks p {text-align:center;}

.spCon {padding:2% 0% 4% 0%;}

.homeFeatures, .homeFeatures td, .homeFeatures p, .homeFeatures img {text-align:center;}

innerFeatures {padding:4% 0%;}
.innerFeatures, .innerFeatures td, .innerFeatures p, .innerFeatures img {text-align:center;}
.pad {padding:8% 0%;}

footer {text-align:center;}
footer p, footer td, footer a {text-align:center;}

.buttonlink { font-size:16px; text-align:center; background:#65b256; color:#fff; width:100%; padding:8px; font-weight:300; } 

.buttonlink:hover { font-size:16px; text-align:center; background:#4c983d; color:#fff;  width:100%; padding:8px; font-weight:300; cursor:pointer;}
 
}

@media all and (max-width: 400px) {
       .securewarning { display:block !important; }
}

