@charset "utf-8";
/* CSS Document */

body 
{
			font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
			margin: 0;
			padding: 0;
			color: #000;
			background:#FFF;
			
}

/************************* BROWSER RESET ********************/
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,  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;
}
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;
}

form input, form textarea
{
			max-width:100%;
}


/******************************** CONTAINER ***************************/
#container 
{
			width: 98%;
			max-width: 1366px;
			margin: 0 auto;
		
}


/********************** IMAGE CLASSESSS ******************************/
img
{
			border:0;
			max-width:100%;
			height:auto;
}

.float_left
{
			float:left;
			margin:10px;
			border:1px solid #f6f5f5;
			border-radius:8px;

}


.float_right
{
			float:right;
			margin:10px;
			border:1px solid #f6f5f5;
			border-radius:8px;

}

/********************* TOP HEADER *************************/
#top_header
{
			float:left;			
			width:100%;
			height:auto;
			background: #0C0;
			margin:0;
			padding:0;
			background: -webkit-linear-gradient( #25732f, #89f707); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(#25732f, #89f707); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(#25732f, #89f707); /* For Firefox 3.6 to 15 */
		background: linear-gradient(#25732f, #89f707); /* Standard syntax */
			
			
			
}

/****************************** HEADER WRAPPER ***************************/
#header-wrapper 
{
			width: 98%;
			max-width: 1366px;
			margin: 0 auto;
		
}

#top_header img
{
			width:100%;
			height:auto;
}


#logo
{
			float:left;
			width:40%;
			margin:2% 1% 1% 2%;
			
}


#myob
{
			float:left;
			width:20%;
			margin:2.5% 0 0 18%;
			
			
			
		
}


#xero
{
			float:left;
			width:10%;
			margin:2% 0 0 5%;
			
			
			
			
}

#phones
{
			float:right;
			width:50%;
			margin:0 2% 0 3%;
			font-size:20px;
			padding-bottom:2%;
			
}

#phones p
{
			padding-left:122px;
}


/********************* TOP NAVIGATION ****************************/
#top_nav
{
			float:left;
			width:98%;
			height:50px;
			background: #FFF;
			margin-top:1%;
			margin-bottom:1.5%;
			margin-left:1%;
			border-top:2px solid #666;
			border-bottom:2px solid #666;
			
			
		
}


#top_nav ul
{
		margin:0 10px 0 10px;
		padding:0 10px 0 0;
		list-style-type:none;
		float:left;
		display:inline;
		text-align:center;
		
		
	

}

#top_nav li
{
		display:inline;
		float:left;
		margin:0 10px 0 0;
		padding:0;
	
}

#top_nav li a
{
		display:inline;
		float:left;
		color:#000;
		text-decoration:none;
		height:40px;
		padding:20px 10px 0 20px;
		font-size:14px;
		text-transform:uppercase;
		font-family:Helvetica,Arial,Verdana,sans-serif;
		font-weight:bold;
		text-align:center;
			
		
				
}


#top_nav li .navbg
{
		display:inline;
		float:left;
		color:#000;
		text-decoration:none;
		height:40px;
		padding:20px 10px 0 10px;
		font-size:14px;
		text-transform:uppercase;
		font-family:Helvetica,Arial,Verdana,sans-serif;
		font-weight:bold;
		background-image:url(../images/navbg.png);
		background-position:right;
		background-repeat:no-repeat;
		padding:20px 20px 0 0;
		
}


#top_nav li a:hover
{
			color:#090;
			text-decoration:underline;
}


/************************** BANNER FLASH ANIMATION ***************************/
#banner_container
{
			float:left;
			width:98%;
			margin:1% 0 1.5% 1%;
			padding:0;
			
			
		
}



/********************** HOME PAGE SERVICES **************************/
.services
{
			float:left;
			width:31%;
			height:430px;
			margin:2% 1% 1.5% 0.5%;
			border:1px solid #CCC;
			border-radius:8px;
			
			
			
}


.services h2
{
		font-size:21px;
		text-align:center;
		width:90%;
		margin:2.5% 0 2% 4%;
		color: #FFF;
		padding-bottom:2%;
		background:#090;
		border:1px solid #090;
		border-radius:8px;
}




.services p
{		font-size:16px;
		line-height:190%;
		padding-left:4%;
		
	
}

.readmore
{
			border:none;
			margin-top:10px;
}




/*********************************** LEFT CONTENT ****************************/
#leftcontent 
{
		
			width: 98%;
			float:left;
			margin:1% 1% 0 0;
			padding:0;
			
			
}

#welcome
{
			float:left;
			width:98%;
			margin:2% 0 2% 2%;
			background:#eeeded;
			border:1px solid #eeeded;
			border-radius:8px;
}


.wel_text
{
			text-align:center;
			padding-top:1.5%;
			padding-left:340px;
}



#leftcontent h1
{
	
			color: #090;
			margin:0;
			margin-bottom:3%;
			font-size:23px;
			padding-left:10px;
}


#leftcontent h2
{
	
			color: #090;
			margin:0;
			text-align:center;
			font-size:25px;
			padding-top:10px;
			padding-bottom:10px;
}

#container #leftcontent p
{
			text-align:justify;
			line-height:180%;
			padding:0 1% 1% 1%;
			font-size:18px;
}


#leftcontent ul
{
			text-align:justify;
			line-height:180%;
			list-style-image:url(../images/sdi_gr.gif);
			padding-left:30px;
			font-size:18px;
			
			
}


/************************* SERVICES PAGE *******************/
#myob_bookkeeping
{
			float:left;
			width:100%;
			margin:2% 0 1% 1%;
			background:#eeeded;
			border:1px solid #eeeded;
			border-radius:8px;
}


#xero_bookkeeping
{
			float:left;
			width:100%;
			margin:2% 0 1% 1%;
			background:#eeeded;
			border:1px solid #eeeded;
			border-radius:8px;
}


#payroll
{
			float:left;
			width:100%;
			margin:2% 0 1% 1%;
			background:#eeeded;
			border:1px solid #eeeded;
			border-radius:8px;
}


#gst
{
			float:left;
			width:100%;
			margin:2% 0 1% 1%;
			background:#eeeded;
			border:1px solid #eeeded;
			border-radius:8px;
}


#newzealand
{
			float:left;
			width:100%;
			margin:2% 0 1% 1%;
			background:#eeeded;
			border:1px solid #eeeded;
			border-radius:8px;
}


#office_support
{
			float:left;
			width:100%;
			margin:2% 0 1% 1%;
			background:#eeeded;
			border:1px solid #eeeded;
			border-radius:8px;
}


.training_images 
{
			float:left;
			width:40%;
			margin:1% 1% 2% 1%;
			border:1px solid #eeeded;
			border-radius:8px;
}


.training_images img
{
			
			border:1px solid #eeeded;
			border-radius:8px;
}

/*************************** pricing page *********************************/
#package1, package2, package3
{
			float:left;
			width:29%;
			height:880px;
			margin:1% 1% 2% 1%;
			background:#CCC;
			border:1px solid #CCC;
			border-radius:8px;
}

#package1, package2, package3 p
{
			padding-left:1%;
			padding-right:1%;
			text-align:left;
}


/*************************** pricing page *********************************/
table.pricing
{
		width:98%;
		margin-bottom:20px;
		margin-left:10px;
		font-style:italic;
}

table.pricing caption
{
			font-style:normal;
			font-weight:bold;
			font-size:20px;
			color:#090;
			margin-bottom:20px;
}


table.pricing th
{
			background:#090;
			font-style:normal;
			border:1px solid #FFF;
			font-size:25px;
			padding:10px;
}


table.pricing td
{
		padding-left:10px;
		padding-bottom:10px;
		
}

.price
{
			padding-left:60px;
}

.row1
{
			background:#e6e8d9;
}


.row2
{
			background: #f5f7f5;
}


.row3
{
			background: #0C0;
}

table.pricing td.colour1
{
			background: #ebdff8;
			border:0;
}

table.pricing td.colour2
{
			background: #dcf5fa;
			border:0;
			
}

table.pricing td.colour3
{
			background: #f7f5e5;
			border:0;
			
}




/****************************CONTACT PAGE ******************************/
#contact
{
			float:left;
			width:98%;
			margin:2% 0 1% 1%;
			background:#eeeded;
			border:1px solid #eeeded;
			border-radius:8px;
				
}

#contactus
{
			float:left;
			width:60%;
			margin:2% 0 1% 20%;
			background: #090;
			border:1px solid #090;
			border-radius:8px;
			color:#FFF;
				
}

fieldset
{
		float:left;
		margin:0 0 5px 0;
		padding:0 0 1em 0;
		border-style:none;
		
		
}



legend
{
		margin-left:1em;
		font-weight:bold;
		color: #FFF;
		font-size:14px;
		padding-left:20px;
		text-align:center;
}



fieldset ol
{
		padding:1em 1em 0 1em;
		list-style-type:none;
}



fieldset li
{
		float:left;
		clear:left;
		width:100%;
		padding-bottom:1em;
}


fieldset.submit
{
		float:left;
		border-style:none;
		padding-bottom:10px;
		margin-left:100px;

}



label
{
		float:left;
		width:9em;
		margin-right:1em;
}




textarea
{
		background-color:#F0F8FF;
		margin-left:20px;
		text-align:center;
}

fieldset.submit
{
		float:left;
		border-style:none;
		padding-bottom:10px;
		margin-left:40px;

}


.our_complete
{
			background: #0C0;
			float:left;
			width:90%;
			margin:0 0 2% 2%;
			border:1px solid #0C0;
			border-radius:10px;
			padding:10px;
}


/********************************* FOOTER *****************************/
#footer_content
{
			padding:0;
			width:100%;
			background:#646464;
			margin:0;
			clear:both;
			float:left;
			
}

/*************************FOOTER WRAPPER***************************/
#footer-wrapper
{
			width: 98%;
			max-width: 1366px;
			margin: 0 auto;
		
}

#footer_content h3
{
			color:#FFF;
			padding-left:2%;
			font-size:20px;
			line-height:190%;
	
}


#footer_content p
{
			padding-left:2%;
			font-size:14px;
			color:#FFF;
}


#footer_content a
{
			color:#FFF;
}


#links
{
			float:left;
			width:30%;
			margin:1% 1% 1.5% 1%;
			
}


#contact_details
{
			float:left;
			width:30%;
			margin:1% 1% 1.5% 1%;
			
}

#contact_details p
{
			padding-bottom:20px;
			margin-top:10px;
}

#login
{
			float:left;
			width:30%;
			margin:1% 1% 1.5% 1%;
			
}


#login p
{
			padding-bottom:20px;
			margin-top:10px;
}

.clearfloat 
{
	 /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}



/********* MEDIA QUERIES *********************/
@media only screen and (max-width: 768px) 
{


#leftcontent .services h2
{
			font-size:14px;
}

#leftcontent h1
{
			font-size:20px;
}

form input, form textarea
{
			width:90%;
}

/****************** HOME PAGES SERVICES *****************/
.services
{
			float:left;
			width:45%;
			margin:2% 1% 1.5% 0.5%;
		
			
			
}


.services h2
{
	
		margin:3% 0 1% 3%;
	
}


#package1, package2, package3
{
			height:1030px;
			
}

.wel_text
{
			
			padding-top:1.5%;
			padding-left:220px;
}

}