/*---------------------------------

version: 0.1
author: Jamie Knight
contact: jamie@jkg3.com

Please feel 
 to learn from this code. Do not copy this code in whole, if you wish for a copy of this code, or any explanation plese contact me at the above adress. 
----------------------------------*/


/* =General
-----------------------------------------------------------------------------*/


/* Remove padding and margin */
* {
  margin: 0;
	padding: 0;
}

/* Put it back on certain elements */
h1, h2, h3, h4, h5, h6, p, pre, table {
  margin: 1em 0;
}

/* Class for clearing floats */
.clear {
	clear:both;
}


/* Remove border around linked images */
img {
	border: 0;
}

a { outline:none; }



/* Basics
-----------------------------------------------*/

html {

	background:#FFFFFF url(../images/bodybg.jpg) repeat-x top left;

}

body {

	width: 700px;
	margin-left: auto;
	margin-right: auto;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 1.6em;

}

#branding {

	height: 101px;
	margin: 0px.
	padding: 0px;
	background: #E8E8E1


}

#branding h1 {

	width: 330px;
	height: 101px;
	background:#E8E8E1 url(../images/branding.jpg) top left;
	text-indent: -50000px;
	float: left;
	margin-bottom:10px;
	margin-top: 25px;


}


#page {

	background: url(../images/wrapperbg.jpg) top center;

}

#mainContent {

	width: 480px;
	float: left;

}

#subContent {

	width: 145px;
	float: right;
}

#content {

	
	background: url(../images/contenttop.jpg) no-repeat top center;
	padding-bottom: 20px;
	clear: both;
	padding-top: 15px;
	padding-left: 20px;
	padding-right: 20px;


}

#footer {

	background: url(../images/footertop.jpg) top center no-repeat;
	padding-top: 40px;
	margin-bottom: 30px;
	clear: both;

}
#compliancy {

	background:#666666 url(../images/compliancyfooter.jpg) bottom center no-repeat;
	padding: 15px;
	font-size: 12px;
	color: #FFFFFF;
	padding-top: 5px;
	line-height: 1.3em;
	
	

}



#compliancy h4 {

	font-size: 16px;
	color: #333333;
	font-weight: 100;

}

.tel {

	display: block;

	color: #447F3A;
	font-size: 18px;
	padding: 6px;
	padding-left: 42px;
	display: block;
	margin-left: 0px;


} 

#branding p {

	background: url(../images/phone.jpg) top left no-repeat;
	width: 226px;
	height: 34px;
	margin-top: 55px;
	float: right;


}


#navigation {

	clear: both;
	margin-top: 10px;
	font-size: 18px; 
	

}

#subNavigation {

	clear: both;
	background: #3F6630;
	display: block;
	margin: 0px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: -5px;
	color: #FFFFFF;
	font-size: 16px;



}

#subNavigation a  {


	color: #FFFFFF;
	text-decoration: none;

}

#subNavigation ul {

	margin:0px;

}

#subNavigation li {
	
	display: inline;
	background: #3F6630;
	padding-left: 20px;
	padding-right: 20px;
	border-right: #6F8C64 2px solid;


}

#navigation li {

	float: left;
	width: 175px;
	list-style: none;
	background: #447C2F url(../images/inactive.jpg) top left no-repeat;
	height: 31px;
	text-align: center;
	padding-top: 7px;
	line-height: 1em;

}

#navigation li a {

	color: #333333;
	text-decoration: none;
	display: block;
	width: 100%;
	height: 100%;
}

#navigation li a:hover {

	color: #000000;

}


#navigation .active {

	background: #447C2F  url(../images/tabactive.jpg) top left no-repeat;
	color: #FFFFFF;


}

#navigation .active a {

	color: #FFFFFF;

}

/* maincontent 
-----------------------------------------------*/


#mainContent h2, #mainContent h3, #mainContent h4 {

	color: #47943A;
	font-size: 20px;
	font-weight: 100;


}

.feather {

	float: right;
	padding: 10px;
	margin-top: -40px;

}

#mainContent #puffs {
	
	clear: both;
	margin-top: 10px;
}

#mainContent h2 {

	border-bottom: 1px #CCCCCC dotted;
	padding-bottom: 4px;


}

.puff {

	float: left;
	width: 140px;
	margin-right: 20px;



}

.puff h3 {

	border-bottom:dotted 1px #CCCCCC;
	padding-bottom: 3px; 


}

.other {

	margin-right: 0px;

}

.puff li  {

	list-style-position: inside;

}

/* subcontent 
-----------------------------------------------*/

#subContent {

	margin-top: 15px;
	margin-left: 5px;
	//border: 1px solid #FF0000;



}

#free {

	height: 240px;
	width: 148px;
	background: url(../images/freebottom.jpg) bottom center no-repeat;


}

#free p {

	text-align: center;
	background: #BDCCB2;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	border-bottom: #98B48A solid 3px;


}

#free a {

	color: #000000;
	text-decoration: none;

}

#free a:hover {

	color: #FFFFFF;
	text-decoration: none;
	

}

#jobs {

	width: 148px;
	background: url(../images/contactbottom.jpg) bottom center no-repeat;
	padding-bottom: 10px;
	line-height: 1.2em;


}

#jobs h2 {

	background: url(../images/careertop.jpg) top center no-repeat;
	margin: 0px;
	width: 148px;
	text-indent: -5000px;
	height: 56px;

}

#jobs a {

	display: block;
	width: 100%;
	height: 100%;

}

#insurance {

	width: 148px;
	background: url(../images/insurancebottom.jpg) bottom left no-repeat;
	padding-bottom: 10px;
	line-height: 1.2em;


}

#insurance h2 {

	background: url(../images/insurancetop2.jpg) top left no-repeat;
	margin: 0px;
	width: 148px;
	text-indent: -5000px;
	height: 80px;
	margin-bottom: 90px;

}

#insurance a {

	display: block;
	width: 100%;
	height: 100%;

}

#mortgages {

	width: 148px;
	background:url(../images/mortgagebottom.jpg)  bottom left no-repeat;
	padding-bottom: 10px;
	line-height: 1.2em;


}

#mortgages h2 {

	background:url(../images/mortgagetop.jpg)  top left no-repeat;
	margin: 0px;
	width: 148px;
	text-indent: -5000px;
	height: 86px;
	margin-bottom: 105px;

}

#mortgages a {

	display: block;
	width: 100%;
	height: 100%;

}

.advert p {

		padding-left: 10px;

}

#contactbox {

	width: 148px;
	background:url(../images/contactadbottom.jpg)  bottom left no-repeat;
	padding-bottom: 10px;
	line-height: 1.2em;


}

#contactbox h2 {

	background: url(../images/contactadtop.jpg) top left no-repeat;
	margin: 0px;
	width: 148px;
	text-indent: -5000px;
	height: 86px;
	margin-bottom: 105px;

}

#contactbox a {

	display: block;
	width: 100%;
	height: 100%;

}


#free h2 {

	background: url(../images/freetop.jpg) top center no-repeat;
	margin: 0px;
	width: 148px;
	text-indent: -5000px;
	height: 96px;


}

.advert {

	background: url(../images/freebg.jpg) left center repeat-y;
	width: 148px;
	margin-bottom: 20px;
}

#contact h2 {

	background: url(../images/contacttop.jpg) top center no-repeat;
	margin: 0px;
	width: 148px;
	text-indent: -5000px;
	height: 36px;

}

#contact {

	width: 148px;
	background: url(../images/contactbottom.jpg) bottom center no-repeat;
	padding-bottom: 10px;
	line-height: 1.2em;


}

.zemError li {
	
	list-style-image:none;
	list-style-type: none;
	list-style-position:inside;
	margin-bottom:3px;
	background:#FFF2CC url(../images/exclamation.png) center left no-repeat;
	border:1px solid #FFE394;
	padding:5px;
	padding-left: 20px;

}

.zemThanks {

	background:#FFF2CC;
	border:1px solid #FFE394;
	padding-bottom: 20px;

}

/* form */

#mainContent form {

	width: 492px;
	background:#FDFDFB url(../images/formbottom.jpg) bottom left no-repeat;
	padding-bottom: 20px;
	
}

#mainContent form h3 {


	background: url(../images/formtop.jpg) top left no-repeat;
	padding-top: 20px;
	padding-left: 20px;
	margin: 0;

}

#mainContent form p {

	padding-left: 20px;
	color: #447C2F;

}

.zemError {

	background: #F1EEEA;
	margin: 0px;
	padding-bottom: 20px;


}


#mainContent input, #mainContent textarea {


	margin-top: 5px;

}

#mainContent form h4 {

	padding-left: 20px;
	font-size: 18px;

}