@charset "utf-8";
/* START COMMON ------------------- */

html, body {
	height: 101%;
}

body {
	/*font-family: Verdana, Arial, Helvetica, sans-serif;*/
	font-family: "Lucida Grande", "Helvetica Neue", Calibri, sans-serif;
	font-size: 15px;
	color: #333;
	background-image:url(../images/site-bg.jpg);
	background-repeat: repeat-x;
	background-color: #F4F4F4;
	margin: 0px;
}

h1 {
	color:#FFF;
	font-size:26px;
	padding: 90px 0px 0px 10px;
	margin: 0px;
}

h2 {
	color: #E43A10;
	font-size: 18px;
	line-height: 18px;
	font-weight: bold;
	margin:3px 3px 3px 0px;
}

h3 {
	color:#006666;
	font-size:15px;
	line-height: 15px;
	margin:3px 3px 18px 0px;
}

h4 {
	color:#000;
	font-size:12px;
}

h5 {
	color:#5093A4;
	font-size:11px;
	text-transform:uppercase;
}

h6 {
	font-size:10px;
	font-weight:bold;
}

p {
	margin:0px;
	padding:4px;
}

a {
	text-decoration:underline;
	color:#333333;
}

a:hover {
	text-decoration:underline;
}

ul {
	margin-top:0px;
}

ul {
	list-style-type: square;
}

hr {
	color:#F36D4B;
	background-color:#F36D4B;
	height:1px;
}

/* END COMMON ------------------- */



#wrapper {
	width: 950px;
	margin: 0px auto 0px auto;
}

#headerwrap {
	width: 950px;
}

#contentwrap {
	background-color:#FFFFFF;
}


#contentwrap li {
	padding: 3px;
}

#left-shadow, #right-shadow {
	background-repeat: no-repeat;
	background-position: top;
	position:absolute;
	height:496px;
	width:52px;
}

#left-shadow {
	margin:22px 0 0 -51px;
}

#right-shadow {
	margin:23px 0 0 950px;
}

#section-header {
	width: 950px;
	margin: 24px 0px 0px 0px;
	padding: 0px;
	background-color:#333333;
}

#left-content {
	width: 590px;
	padding: 20px 20px 0px 20px;
	float: left;
}

#right-content {
	width: 260px;
	padding: 20px 20px 0px 10px;
	float: right;
}

#footer {
	color:#666666;
	font-size: 10px;
	width: 950px;
	text-align: center;
	background: url(../images/footer-background.jpg) repeat-x;
	background-color:#f4f4f4;
	padding: 14px 0px 0px 0px;
}



/* START PAGE SPECIFIC ------------------- */

#section-header #home {
	height: 240px;
	background: url(../images/headers/home.jpg) no-repeat;
}

#section-header #home #right {
	color: #F1C263;
	font-size: 14px;
	font-weight: bold;
	width: 610px;
	float: right;
	margin: 40px 0px 0px 0px;
}

#section-header #home #right .large {
	color: #FFFFFF;
	font-size: 24px;
	font-weight: bold;
}

#section-header #home #right .medium {
	color: #FFFFFF;
	font-size: 19px;
	font-weight: bold;
}

#left-content-home {
	width: 350px;
	padding: 20px 0px 0px 20px;
	float: left;
}

#left-content-home img {
	padding: 0px 10px 6px 0px;
	float: left;
}

#left-content-home h1 {
	color:#000;
	font-size:26px;
	padding: 0px;
	margin: 0px;
}

#right-content-home {
	width: 550px;
	padding: 20px 20px 0px 0px;
	float: right;
	text-align:center;
}

#right-content #compliance {
	width: 280px;
	padding: 2px 10px 10px 4px;
	background: #F3EEE8;
}

#left-content .step {
	width: 400px;
	height: 20px;
	color: #000000;
	font-size: 15px;
	font-weight: bold;
	background-color: #DED1C0;
	padding: 6px 10px 0px 10px;
	margin: 0px auto;
}

#left-content .details {
	width: 400px;
	background-color: #F3EEE8;
	padding: 6px 10px 20px 10px;
	margin: 0px auto;
}

#suitable, #work, #benefits {
	color: #000000;
	font-size: 15px;
	font-weight: bold;
	text-align: left;
	width: 511px;
	height: 76px;
	padding: 0px;
	margin: 0px 0px 20px 10px;
}

#right-content-home #suitable a {
	width: 511px;
	height: 76px;
	display: block;
	text-decoration: none;
	padding: 30px 0px 0px 10px;
	background: url("../images/is-it-suitable-for-my-business.jpg") no-repeat;
}

#right-content-home #suitable a:hover {
	display: block;
	text-decoration: none;
	background: url("../images/is-it-suitable-for-my-business-hover.jpg") no-repeat;
}

#right-content-home #work a {
	width: 511px;
	height: 76px;
	display: block;
	text-decoration: none;
	padding: 30px 0px 0px 10px;
	background: url("../images/how-does-it-work.jpg") no-repeat;
}

#right-content-home #work a:hover {
	display: block;
	text-decoration: none;
	background: url("../images/how-does-it-work-hover.jpg") no-repeat;
}

#right-content-home #benefits a {
	width: 511px;
	height: 76px;
	display: block;
	text-decoration: none;
	padding: 30px 0px 0px 10px;
	background: url("../images/what-are-the-benefits.jpg") no-repeat;
}

#right-content-home #benefits a:hover {
	display: block;
	text-decoration: none;
	background: url("../images/what-are-the-benefits-hover.jpg") no-repeat;
}

#right-content #work-button a {
	width: 240px;
	height: 46px;
	display: block;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	padding:14px 0px 0px 10px;
	background: url("../images/work-button.jpg") no-repeat;
}

#right-content #work-button a:hover {
	display: block;
	text-decoration: none;
	background: url("../images/work-button-hover.jpg") no-repeat;
}

#section-header #who-is-it-for {
	height: 140px;
	background: url("../images/headers/who-is-it-for.jpg") no-repeat;
}

#section-header #how-does-it-work {
	height: 140px;
	background: url("../images/headers/how-does-it-work.jpg") no-repeat;
}

#section-header #features {
	height: 140px;
	background: url("../images/headers/features.jpg") no-repeat;
}

#section-header #order-online {
	height: 140px;
	background: url("../images/headers/order-online.jpg") no-repeat;
}

#section-header #what-are-the-benefits {
	height: 140px;
	background: url("../images/headers/benefits.jpg") no-repeat;
}

#section-header #contact-us {
	height: 140px;
	background: url("../images/headers/contact-us.jpg") no-repeat;
}

/* END PAGE SPECIFIC ------------------- */






/* START MAIN NAVIGATION ------------------- */

#main-nav {
	font-family: Arial, sans-serif;
	font-size:13px;
	font-weight:bold;
	height: 36px; /* Since we float li in this example we must set a height on the div */
	margin: 4px 0px 0px 0px;
	padding: 0px;
}

#main-nav ul {
	margin: 0px auto;
	width:946px;
	list-style: none;
	padding: 0px;
}

#main-nav li {
	text-align: center;
	float: left;
	margin: 0px 2px 0px 1px;
	line-height: 36px; /* Aligning text vertically using line-height */
}

#main-nav li a {
	display: block;
	width: 132px; /*Fixed width on the link, the same width as the image width */
	height: 36px;
	color: #666;
	text-decoration: none;
	background: url("../images/menu-inactive.jpg") no-repeat left top; /* Rollover effect using "Fast rollovers without preload" concept */
}

#main-nav li a:hover {
	color: #000;
	background: url("../images/menu-hover.jpg") no-repeat left top;
}

#main-nav li .current {
	color: #000;
	background: url("../images/menu-active.jpg") no-repeat left top;
}

/* IE6 and IE7 hack */
.main-nav li a {
	padding: 0px 0px 0px 10px;
}

/* END MAIN NAVIGATION ------------------- */



/* START MISC ------------------- */

.logo {
	margin:16px 0px 0px 0px;
	float:left;
}

.telephone-number {
	margin:30px 0px 0px 0px;
	float:left;
}

#login-button a {
	font-size: 12px;
	font-weight: bold;
	color: #333333;
	text-align: center;
	text-decoration: none;
	display: block;
	height: 26px;
	width: 105px;
	padding: 6px 6px 0px 0px;
	float: right;
	background: transparent url(../images/login-button.jpg) no-repeat;
}

#login-button a:hover {
	display: block;
	text-decoration: none;
	background: transparent url(../images/login-button-hover.jpg) no-repeat left top;
}

#breadcrumb {
	font-size: 10px;
	color:#999999;
	font-style:italic;
	padding: 6px 0px 4px 10px;
}

#breadcrumb a {
	text-decoration:underline;
}

ul.industry-examples {
	list-style: none;	
	text-align: center;
	margin: 0px;
	padding: 0px;
	max-width: 450px;
}

ul.industry-examples li {
	line-height: 30px;
	background-color: #F5F2ED;
	margin: 2px;
	font-weight: bold;
}

ul.benefits {
	list-style-image: url("../images/green-alert-icon-benefits.jpg");
}

ul.benefits li {
	padding: 0px 0px 10px 6px;
}

#footer a {
	color:#666666;
	text-decoration:none;
}

.clear {
	clear:both;
}

#clear {
	clear:both;
}

.submitbutton {
	padding: 5px 30px;
}

.error {
	color: #FF0000;
}

.anchor {
	color: #999999;
	font-size: 10px;
}

#contentwrap p {
	margin:0px;
	padding:4px;
	max-width:450px;
}


/* END MISC ------------------- */