/* Astute Payroll website style sheet. Created by ns-designs 2010 */


/* This stops the page from jumping to the left by adding a scrolly bar to every page */
html { 
   overflow-y: scroll;
}

/* Start by defining the main page layout and borders */

* {
padding: 0;
margin: 0;
}

body {
font-size: 0.725em;
text-align: center;
font-family: arial, sans-serif;
background: url(images/body_bg.png) repeat-x top left; 
background-color: #6599BC;
}

#outer-container {
margin: 0px auto;
width: 970px;
background: url(images/page_bg.jpg) repeat-y top left; 
background-color: #fff;
text-align: left;
}

/* End main page layout and borders here */

/* Set up global content styles here */

.clear {
clear: both;
}

/*Use this to hide various bits of text around the site */
.hidden {
display: none;
}

img {
border: none;
}

h1 {
font-size: 1.8em;
}

h2 {
color: #580011;
margin-bottom: 5px;
}

h4,
h3.homepage {
font-size: 1.2em;
color: #034C87;
margin-bottom: 10px;
}

h3.normal {
font-size: 1.2em;
color: #580011;
margin-top: 15px;
}

.yellow-box-small h3.normal, 
.yellow-box h3.normal {
margin: 10px;
}

h4 {
font-size: 1.2em;
color: #034C87;
}

.bold{
	font-weight: bold;
}

.italic{
	font-style: italic;
}

p.header-text {
color: #000;
}

p.maintext,
p.wraptext {
margin: 10px 0px;
line-height: 1.5em;
}

#content ul,
#content ol  {
line-height: 1.5em;
margin-left: 25px;
}

#content li{
	margin-bottom: 8px;
}

a:link,
a:active,
a:visited {
color: #06c;
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

a.green-button:link,
a.green-button:active,
a.green-button:visited {
background: url(images/green_button.png) no-repeat center left; 
display: block;
width: 160px;
line-height:33px;
height: 33px;
float: left;
margin-right: 8px;
margin-bottom: 8px;
text-align: center;
color: #fff;
text-decoration: none;
font-size: 12pt;
font-weight: bold;
}

a.green-button:hover,
a.green-button:hover {
color:#CCFF00;
}

a.green-button-wide:link,
a.green-button-wide:active,
a.green-button-wide:visited {
background: url(images/green_button_wide.png) no-repeat center left; 
display: block;
width: 210px;
line-height:33px;
height: 33px;
float: left;
margin-right: 8px;
margin-bottom: 8px;
text-align: center;
color: #fff;
text-decoration: none;
font-size: 12pt;
font-weight: bold;
margin: 20px 0px;
}

a.green-button-wide:hover,
a.green-button-wide:hover {
color:#CCFF00;
}

img.right {
float: right;
margin-left: 10px;
}

img.left {
float: right;
}

p.centered {
margin: 0px auto;
}

input.button {
width: 160px;
height: 33px;
line-height: 33px;
border: none;
background: url(images/green_button.png) no-repeat center left; 
text-align: center;
color: #fff;
text-decoration: none;
font-size: 12pt;
font-weight: bold;
margin: 10px 20px;
}

input.text-field {
border: 0;
height: 30px;
line-height: 30px;
margin: 5px 0px;
width: 220px;
padding-left: 8px;
background: url(images/form_text_bg.png) no-repeat top left; 
}

input.text-field:focus {
background: url(images/form_text_bg.png) no-repeat top left; 
background-position: 0px -30px;
}

.form-float {
float: left;
margin: 10px 10px;
font-weight: bold;
}



p.thanks {
font-size: 1.5em;
font-weight: bold;
color:#3F580F;
margin-left: 30px
}

/* End global content styles */

/* Page content styles start here 

Starting with the header and navigation */

#header {
height: 146px;
line-height: 24px;
width: 970px;
background-color: #fff;
}


#title {
display: block;
width: 385px;
height:87px;
background: url(images/logo_bg.png) no-repeat 0px 30px; 
float: left;
}

#top-nav {
float: right;
width: 560px;
height:87px;
}

#top-nav p {
float: left;
margin: 45px 3px;
font-weight:bold;
font-size: 12px;
}

#top-nav ul {
list-style: none;
}

#top-nav ul li.top-menu {
display:inline;
}

#top-nav ul li a#login-btn {
background: url(images/login-btn.png) no-repeat top left;
display:block;
width: 61px;
height: 24px;
text-align:center;
float:left;
margin: 45px 0px;
margin-left: 7px;
font-weight:bold;
font-size:13px;
margin-left: 40px;
}

#top-nav ul li.top-menu a:link,
#top-nav ul li.top-menu a:active,
#top-nav ul li.top-menu a:visited {
margin-left: 12px;
margin-right: 8px;
color: #024C86;
text-decoration:none;
font-size: 10pt;
}

#top-nav ul li.top-menu a:hover {
text-decoration:underline;
}

.top-menu-space {
float:left;
height: 24px;
margin: 45px 0px;
background: url(images/top_menu_divider.jpg) no-repeat center left; 
}

#main-nav {
clear: both;
background: url(images/main_menu_bg.png) repeat-x top left;
height: 59px; 
}

#main-nav-left-corner {
width: 8px;
height: 59px;
background: url(images/main_menu_left.png) no-repeat top left;
float: left;
}

#main-nav-right-corner {
width: 8px;
height: 59px;
background: url(images/main_menu_right.png) no-repeat top right;
float: right;
}

#main-nav ul {

list-style: none;
float: left;
}

#main-nav ul li.main-menu {
display: inline;
}

.main-menu-space {
margin-top: 23px;
line-height: 36px;
height: 36px;
float: left;
background: url(images/main_menu_divider.jpg) no-repeat center left; 
}

.first-main-menu-space {
margin-top: 23px;
line-height: 36px;
height: 36px;
float: left;
}

#main-nav ul li.main-menu a {
display:block;
text-align: center;
height: 36px;
padding-left: 19px;
padding-right: 19px;
}



#main-nav ul li.main-menu a:link,
#main-nav ul li.main-menu a:active,
#main-nav ul li.main-menu a:visited {
font-size: 10pt;
font-weight: bold;
color: #fff;
text-decoration:none;
}

#main-nav ul li.main-menu a:link.nav-active,
#main-nav ul li.main-menu a:active.nav-active,
#main-nav ul li.main-menu a:visited.nav-active,
#main-nav ul li.main-menu a:hover {
color: #000;
background: #fff;
}


/*End header and navigation styles*/

/*moving on to the main content and doing the page edges*/

#inner-container {
clear: both;

width: 970px;
}

#left-edge,
#left-edge-home {
width: 8px;
height: 341px;
float: left;
}

#right-edge,
#right-edge-home {
width: 8px;
height: 341px;
float: right;
}


#left-edge {
background: url(images/left_side.png) no-repeat top left; 
}

#right-edge {
background: url(images/right_side.png) no-repeat top left; 
}

/*End page edges and main content centering*/

/* Start homepage layout styles */

#left-edge-home {
background: url(images/left_side_home.png) no-repeat top left; 
}

#right-edge-home {
background: url(images/right_side_home.png) no-repeat top left; 
}

#home-page-content {
float: left;
width: 954px;
background: url(images/page_bottom_grad.png) repeat-x bottom left; 
}

#home-page-feature-top {
background: url(images/home_page_feature_top.jpg) no-repeat top left; 
height: 274px;
width: 954px;
}

#home-page-feature-bottom {
background: url(images/home_page_feature_bottom.png) no-repeat top left; 
height: 77px;
width: 954px;
}

#home-page-feature-bottom p#feature-text {
margin-left: 20px;
line-height: 33px;
height: 33px;
font-size: 12pt;
font-weight: bold;
color: #024C86;
}

#feature-space {
height: 20px;
}

.home-page-box-mail,
.home-page-box-manage,
.home-page-box-access, 
.home-page-box-case,
.home-page-box-time,
.home-page-box-process {
background-color: #111;
width: 400px;
float: left;
margin: 20px 10px 0px 35px;
}

.home-page-box-case {
background: url(images/case_icon.png) no-repeat top left;
}

.home-page-box-time {
background: url(images/clock_icon.png) no-repeat top left;
}

.home-page-box-process {
background: url(images/process_icon.png) no-repeat top left;
}

.home-page-box-mail {
background: url(images/mail_icon.png) no-repeat top left;
}

.home-page-box-manage {
background: url(images/manage_icon.png) no-repeat top left;
}

.home-page-box-access {
background: url(images/access_icon.png) no-repeat top left;
margin-bottom: 70px;
}

.home-page-box-case h3,
.home-page-box-time h3,
.home-page-box-process h3,
.home-page-box-mail h3,
.home-page-box-manage h3,
.home-page-box-access h3,
.home-page-box-case p,
.home-page-box-time p,
.home-page-box-process p,
.home-page-box-mail p,
.home-page-box-manage p,
.home-page-box-access p {
display: block;
margin-left: 70px;
}

/*End homepage layout styles*/

/* Now for the two-column page (with a sub navigation list) layout styles */

#page-content-two-column-with-nav {
margin-top: 15px;
float: left;
}

#sub-nav {
width: 250px;
float: left;
margin-left: 15px;
}

#sub-nav ul li {
list-style: none;
font-size: 12pt;
background: url(images/sub_nav.png) no-repeat top left; 
height: 49px;
line-height: 49px;
width: 210px;
}

#sub-nav ul li.sub-nav-active {
background: url(images/sub_nav_active.png) no-repeat top left; 
height: 51px;
line-height: 51px;
width: 235px;
font-weight: bold;
}

#sub-nav ul li a {
display: block;
height: 49px;
width: 210px;
}

#sub-nav ul li.sub-nav-active a:link,
#sub-nav ul li.sub-nav-active a:active,
#sub-nav ul li.sub-nav-active a:visited {
color:#000;
}

#sub-nav ul li.sub-nav-active a:hover {
text-decoration: none;
} 

.sub-nav-space {
margin-left: 10px;
}

#page-content-two-column-with-nav #content {
float: right;
width: 657px;
margin-top:10px;
margin-bottom: 70px;
}

/* End the two-column page (with a sub navigation list) layout styles */

/* Start for the one-column layout styles */

#page-content-one-column {
margin-top: 15px;
float: left;
}

#page-content-one-column #content {
width: 897px;
margin:10px 10px 70px 15px;
}

#page-content-one-column #content h2,
#page-content-one-column #content p.wraptext {
width: 450px;
} 

#floating-faqs {
width: 600px;
float: left;
}

#floating-table {
width: 450px;
float: left;
}

#question-box {
float: right;
width: 290px;
height: 280px;
background: url(images/question_box_background.png) no-repeat top left;
position: relative;
top: -70px;
left: 300px;
}

#question-box p.boxtext,
#question-box h3 {
margin-left: 100px;
width: 200px;
}

.yellow-box-small {
width: 180px;
height: 9em;
min-height: 9em;
float: left;
margin: 10px;
background-color: #FFF7EF;
border: 2px #EBE6CF solid;
}

.yellow-box-small h3.normal {
text-align: center;
}

.yellow-box-small p {
margin: 10px;
}

/* End one-column layout styles */

/* Start the two-column page (NO sub-navigation list) layout styles */

#page-content-two-column-without-nav {
margin-top: 15px;
float: left;
}

#page-content-two-column-without-nav  #content {
width: 920px;
margin:10px 10px 70px 15px;
}

#customers-box {
float: right;
width:380px;
background: url(images/customer_box_background.gif) no-repeat top left;
}

#customers-box img {
margin: 10px 8px;
}

#customers-box-inner {
margin-left: 50px;
}

#pic-border {
background-color: #FFF7EF;
border: 2px #EBE6CF solid;
-moz-border-radius: 10px; 
-webkit-border-radius: 10px;
}

#quote {
margin: 20px 0px;
width: 450px;
background-color: #FFF7EF;
border: 2px #EBE6CF solid;
clear: left;
-moz-border-radius: 20px; 
-webkit-border-radius: 20px;
}

#quote p,
#quote img {
margin: 10px 20px;
}

#quote img {
float: left;
margin: 0px 20px;
}

p.quote-text {
font-style: italic;
line-height: 2em;
}

p.red-text {
font-weight: bold;
color: #900;
}

span.sup {
vertical-align: baseline;
font-size: 40px;
position: relative;
top: 0.3em;
font-family: georgia, times new roman;
color: #6599BC;
}

#demo-form {
width: 500px;
float: left;
}

#demo-form-thanks {
width: 500px;
float: left;
background: url(images/tick2.gif) no-repeat top left; 
height: 25px;
line-height: 25px;
}

#features-box {
float: right;
width:380px;
background: url(images/customer_box_background.gif) no-repeat top left;
}

#features-box-inner {
margin-left: 50px;
}

.feature-text {
background: url(images/tick.png) no-repeat center left;
margin: 20px 0px;
}

.feature-text h4,
.feature-text p.form-page {
margin-left: 30px;
}

/* End the two-column page (NO sub-navigation list) layout styles */


/* Now for the three-column layout styles as used on the pricing page */

#page-content-three-column {
margin-top: 15px;
float: left;
}

#page-content-three-column #content {
width: 920px;
margin:10px 10px 70px 15px;
}

.yellow-box,
#page-content-three-column #content #three-column-layout {
width: 280px;
float: left;
margin-bottom: 70px;
height: 33em;
min-height: 33em;
}

.yellow-box {
margin-left: 20px;
background-color: #FFF7EF;
border: 2px #EBE6CF solid;
}

.yellow-box p {
margin: 10px;
}

div.center {
text-align: center;
width: 130px;
height: 33px;
margin-left: 60px;
}

/* End three-column layout styles */

/* Start table styles */

table,
th,
td {
border-collapse:collapse;
border: #ccc solid 1px;
padding:5px;
}

th {
color:#024C86;
font-size: 1.1em;
margin: 20px 0px;
height: 4em;
}

tr {
height: 4em;
}

.left {
text-align: left;
}

.pricing-tick {
margin: 0px auto;
background: url(images/tick.png) no-repeat center center; 


}

table#partner {
text-align: center;
float: right;
width: 430px;
}

table#compare-table {
text-align: center;
width: 630px;
}

table#compare-table th {
height: 1.5em;
}

table#compare-table tr {
height: 2em;
}

.select{
	display: block;
	width: 66px;
	height: 23px;
	background: url(images/select.png) no-repeat;
}

.center-row{
	text-align: center;
}

/* End table styles */

/*And finally the footer*/

#footer {
height: 18px;
clear: both;
background: url(images/footer_bg.png) no-repeat top left; 
}

#footer-text {
background-color:#6599BC;
width: 970px;
}

#footer-text p {
float: left;
margin-left: 8px;
color: #fff;
margin-bottom: 30px;
}

#footer-text ul {
float: right;
margin-right: 8px;
margin-bottom: 30px;
}

#footer-text ul li.bottom-menu {
display: inline;

}

.bottom-menu-space {
float: left;
background: url(images/bottom-menu-divider.png) no-repeat center left; 
}

.first-bottom-menu-space {
float: left;
}

#footer-text ul li.bottom-menu a:link,
#footer-text ul li.bottom-menu a:active,
#footer-text ul li.bottom-menu a:visited {
margin-left: 12px;
margin-right: 8px;
color: #fff;
text-decoration:none;
font-size: 10pt;
}

#footer-text p a:link,
#footer-text p a:active,
#footer-text p a:visited {
color: #fff;
}

#footer-text p a:hover,
#footer-text ul li.bottom-menu a:hover {
text-decoration:underline;
color:#fff;
}


/* ONLINE DEMO AND TESTOMONIALS PAGE */

div#testimonials{
	float: left;
	width: 510px;
}

div.demo-box{
	border: 2px solid #CCC;
	padding: 8px;
	margin-top: 25px;
}

a.login-button{
background: url(images/login-btn.png) no-repeat top left;
display:block;
width: 61px;
height: 24px;
text-align:center;
margin-left: 7px;
font-weight:bold;
font-size:13px;
padding-top: 4px;
}



/* CONTACT FORM */



/* CONTACT FORMS */


.green{
	display: block;
	width: 304px;
	height: 27px;
	background: url(images/thanks.png) no-repeat;
	margin-top: 6px;
}


.special {
	display:none;
}

#alert ul{
	padding: 0px;
	margin: 0px;
}

#alert li{
	list-style: none;
	background: url(images/list-square.png) no-repeat 0px 4px;
	padding-left: 8px;
	margin-top: 4px;
}

.message{
	color: red;
	font-size: 12px;
	font-weight: bold;
	display:none;
	padding: 6px;
	float: left;
}



/* PRICING PAGE */

div.price-box{
	width: 171px;
	height: 255px;
	float: left;
	margin-right: 13px;
	background: url(images/price-top.png) no-repeat;
}

div.price-header{
	width: 100%;
	height: 41px;
	line-height: 41px;
	text-align: center;
	color: white;
	font-size: 22px;
	font-weight: bold;
}

div.price-text{
	padding: 5px;
}

div.price-number{
	color: #FF9900;
	font-size: 44px;
	font-weight: bold;
	width: 100%;
	text-align: center;
	margin-bottom: 10px;
}

a.select-plan{
	display: block;
	width: 99px;
	height: 33px;
	margin-top: 5px;
	background: url(images/price-select.png) no-repeat;
	margin-left: auto;
	margin-right: auto;
}

ul#feature-list{
	width: 100%;
	margin-left: 0px;
	padding-left: 0px;
	margin-top: 20px;
}

ul#feature-list li{
	background: url(images/tick.png) no-repeat;
	width: 260px;
	padding-bottom: 10px;
	padding-left: 32px;
	margin-right: 12px;
	font-weight: bold;
	float: left;
	list-style: none;
}

div.payroll-plug{
	margin-bottom: 18px;
	margin-top: 18px;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	border: 1px solid #336699;
	padding: 16px;
	padding-right: 70px;
	padding-left: 70px;
}

div.nine-holder{
	width: 69px;
	margin-left: auto;
	margin-right: auto;
}

.nine{
	display: block;
	float: left;
	width: 50px;
}

.asterisk{
	display: block;
	font-size: 18px;
	color: black;
}