/*
=====================
Global
=====================
*/
html {
	background:#151210;
}
body {
	font:12px/165% "Lucida Sans Regular", "Lucida Grande", Arial, sans-serif;
	color:#444;
}
h1, h2 {
	font-family:"Arial Black", "Trebuchet MS", sans-serif;
	margin-bottom:1em;
}
h1 {
	font-size:30px;
	width:900px;
	margin:0 auto;
	color:#fff;
	background:#85a223 url(/Images/bg-banner.jpg) no-repeat;
	padding-top:40px;
	height:80px;
	letter-spacing:-0.05em;
	line-height:40px;
}
h2 {
	font-size:18px;
	letter-spacing:-0.02em;
	color:#3b3431;
}
h3 {
	font-size:16px;
	margin-bottom:.8em;
}
p {
	margin-bottom:1em;
}
p.intro {
	font-size:14px;
	background:#E9E7D2;
	padding:15px;
	margin-bottom:35px;
}
strong {
	font-weight:bold;
}
a {
	text-decoration:none;
	color:#791;
	font-weight:bold;
	border-bottom:1px dotted #a7bd62;
}
a:hover {
	color:#9b3;
}
div.clear {
	clear:both;
	line-height:0;
	font-size:0;
}

/*
=====================
Header
=====================
*/
#headerWrapper {
	height:53px;
	background:#323232 url(/Images/bg-nav.gif) top repeat-x;
}
#header {
	width:900px;
	margin:auto;
	position:relative;
}
.logo {
	position:relative;
	left:-4px;
}
.logo img {
	display:block;
	opacity:.88;
	filter:alpha(opacity=88);
}
.logo:hover img {
	opacity:1;
	filter:none;
}
#nav {
	position:absolute;
	top:0; right:0;
}
#nav li, #nav a {
	float:left;
	line-height:53px;
	height:53px;
}
#nav li {
	position:relative;
}
#nav a {
	padding:0 18px;
	color:#ddd;
	font-size:14px;
	border:0;
}
#nav a:hover {
	background:url(/Images/bg-nav.gif) bottom repeat-x;
}
#nav li.active a,
#nav li.active:hover a,
#nav li.active a:hover {
	background:url(/Images/bg-nav.jpg) top center no-repeat;
	color:#333;
}

/*
=====================
Content
=====================
*/
#contentWrapper {
	background:#fff;	
}
#banner {
	background:#85a223 url(/Images/bg-banner-tile.jpg) top repeat-x;
	border-top:1px solid #d7e63f;
	height:120px;
}
#content {
	width:900px;
	min-height:300px;
	margin:auto;
	padding:40px 0;
}
#content.withSidebar {
	width:540px;
	padding-right:360px;
	position:relative;
}
#mainList li {
	margin-bottom:30px;
}
#mainList h2 {
	border:0;
	padding:0;
	margin:0 0 1px 0;
	text-transform:none;
	font-size:22px;
	letter-spacing:-0.02em;
}
#mainList h3 {
	color:#791;
	font-size:14px;
	margin-bottom:.4em;
}
#sidebar {
	position:absolute;
	top:40px; right:0;
	width:238px;
	background:#E9E7D2 url(/Images/bg-sidebar.gif) bottom no-repeat;
	padding:31px;
}
#sidebar h2 {
	background:#1f1b19 url(/Images/bg-sidebar.gif) top no-repeat;
	margin:-31px -31px 20px -31px;
	color:#fff;
	padding:16px 16px 10px 16px;
	text-align:center;
}

/*
=====================
Footer
=====================
*/
#footer {
	padding-top:10px;
	color:#E9E7D2;
	background:#151210;
	height:60px;
	font-weight:bold;
}
#footer ul {
	text-align:center;
}
#footer li {
	display:inline;
	margin:0 8px;
}

/*
=====================
How we work
=====================
*/
#devProcess {
	display:block;
	margin:-20px -25px -25px -25px;
}

/*
=====================
Products Sidebar
=====================
*/
#products li {
	border-bottom:1px solid #d3d3b7;
	padding:8px 0;
}
#products li.last {
	border:0;
}
#products a {
	display:block;
	padding:25px 0 0 80px;
	font-size:16px;
	height:45px;
	background:url(/Images/Logos/logo-cms-large.gif) top left no-repeat;
	border:0;
}
#products a:hover {
	background-position:bottom left;
}
#products li.starter a		{ background-image:url(/Images/Logos/logo-starter-large.gif) }
#products li.shop a			{ background-image:url(/Images/Logos/logo-shop-large.gif) }
#products li.cms a			{ background-image:url(/Images/Logos/logo-cms-large.gif) }
#products li.cmsSchools a	{ background-image:url(/Images/Logos/logo-schools-large.gif) }
#products li.cmsProperty a	{ background-image:url(/Images/Logos/logo-property-large.gif) }

#products li.multiline a {
	padding-top:15px;
	height:55px;
}

/*
=====================
Samples
=====================
*/
div.samples h2 {
	font-size:15px;
	background:#E9E7D2;
	border:0;
	line-height:120%;
	padding:8px;
}
ul.samples {
	height:100px;
	margin:0 -10px 20px 0;
}
ul.samples li {
	float:left;
	width:172px;
	height:100px;
	margin-right:10px;
	background:#f2f2f2;
}
ul.samples li.last {
	margin:0;
}
ul.samples a {
	position:relative;
	display:block;
	overflow:hidden;
	width:172px;
	height:100px;
	border:0;
}
ul.samples img {
	position:absolute;
	top:0; left:0;
}
ul.samples a:hover img {
	margin-top:-100px;
}
#content.caseStudy {
	min-height:550px;
}
#caseStudyHeader {
	height:65px;
	position:relative;
}
#caseStudyHeader a.back {
	float:right;
	background:url(/Images/icon-back.gif) 0 2px no-repeat;
	padding-left:25px;
}
#caseStudyHeader h2 {
	float:left;
	clear:left;
	border:0;
	text-transform:none;
	font-size:26px;
	line-height:120%;
	margin:0;
}
#caseStudyHeader a.caseStudyUrl {
	position:absolute;
	top:32px; left:0;
	font-size:14px;
	background:url(/Images/icon-extlink.gif) top right no-repeat;
	padding-right:12px;
	border:0;
}
#caseStudyDetail {
	float:left;
	width:260px;
	padding-bottom:40px;
}
#caseStudyDetail dt {
	font-weight:bold;
	font-size:14px;
	line-height:150%;
	color:#333;
	border-top:1px solid #ddd;
	padding-top:7px;
	margin:7px 0 3px 0;
}
#caseStudyDetail dd {
	line-height:160%;
}
#caseStudyImages {
	float:right;
	width:560px;
	height:434px;
	padding:10px 16px 16px 16px;
	background:#E9E7D2 url(/Images/bg-gallery.gif) no-repeat;
	margin-top:6px;
	position:relative;
}
#caseStudyImages  #imageListMask {
	clear:left;
	width:560px;
	height:397px;
	overflow:hidden;
}
#caseStudyImages ul.imageList {
	width:4000px;
	height:397px;
}
#caseStudyImages ul.imageList li {
	float:left;
}
#caseStudyImages img {
	display:block;
}
#caseStudyImages ul.imageNav {
	margin:auto;
	height:36px;
}
#caseStudyImages ul.imageNav li {
	float:left;
	text-align:center;
	width:29px;
	line-height:25px;
	color:#fff;
	font-weight:bold;
	background:url(/Images/bg-image-counter.gif) top center no-repeat;
	cursor:pointer;
}
#caseStudyImages ul.imageNav li.active {
	background-position:bottom center;
	cursor:default;
}
#caseStudyImages #shadow {
	width:560px;
	height:397px;
	background:url(/Images/shadow-560.png) no-repeat;
	position:absolute;
	top:0; left:0;
	z-index:1;
}

/*
=====================
Lists
=====================
*/
ul.bullet, ol {
	margin:0 0 1em 20px;
	padding-left:20px;
}
ul.bullet li {
	list-style-type:disc;
}
ol li {
	list-style:decimal outside;
}

/*
===================
Home Page
===================
*/
#content.home {
	width:auto;
	height:340px;
	background:#82a120 url(/Images/bg-home.jpg) top repeat-x;
	padding:80px 0 40px 0;
}
#carousel {
	background:#e9e7d2;
}
#carouselContent {
	width:900px;
	height:200px;
	margin:auto;
	position:relative;
}
h1#logo {
	display:block;
	position:absolute;
	top:27px; left:38px;
	width:194px;
	height:145px;
	background:url(/Images/Logos/logo-moko-large.gif) no-repeat;
	line-height:500px;
	overflow:hidden;
}
#slider {
	position:absolute;
	left:0; bottom:70px;
	width:400px;
	height:85px;
	overflow:hidden;
	background:#a2bf28;
}
.slides {
	position:absolute;
}
.slides li {
	width:330px;
	height:65px;
	padding:12px 58px 8px 12px;
	color:#fff;
	display:none;
	line-height:150%;
}
.slides li h3 {
	font-size:24px;
	letter-spacing:-0.04em;
	margin-bottom:.2em;
}
#promo {
	background:url(/Images/bg-promo.gif) no-repeat;
	width:602px;
	height:236px;
	position:absolute;
	top:26px; left:282px;
}
#promo #latest {
	display:block;
	position:absolute;
	top:-12px; right:-18px;
	z-index:2;
	width:99px;
	height:99px;
	background:url(/Images/button-latest.png) no-repeat;
	line-height:500px;
	overflow:hidden;
}
#promo ul {
	position:absolute;
	top:18px; left:17px;
	z-index:1;
}
#promo li {
	position:absolute;
	top:0; left:0;
	opacity:0;
	filter:alpha(opacity=0);
	z-index:1;
}
#promo a {
	border:0;
}
#intro {
	width:900px;
	margin:auto;
}
#intro li.topLevel {
	float:left;
	width:210px;
	height:280px;
	margin-right:35px;
	background:#e9e7d2 url(/Images/bg-intro-box.gif) bottom no-repeat;
	padding:31px;
	position:relative;
}
#intro li.what ul {
	margin:0 0 0 15px;
}
#intro li.what li {
	background:url(/Images/bullet-green.gif) left no-repeat;
	padding-left:18px;
	margin-bottom:1px;
}
#intro li.what li a {
	color:#444;
}
#intro li.samples {
	margin-right:0;
}
#intro li.topLevel h2 {
	margin:0;
}
#intro li.topLevel h2 a {
	display:block;
	width:240px;
	background:#1f1b19 url(/Images/bg-intro-box.gif) top no-repeat;
	margin:-31px -31px 20px -31px;
	color:#fff;
	line-height:130%;
	padding:14px 16px 10px 16px;
	text-align:center;
	border:0;
}
#intro li.topLevel a.button {
	position:absolute;
	left:31px; bottom:31px;
	width:137px;
	height:45px;
	background:#7f726d url(/Images/button-green-large.gif) top no-repeat;
	padding:0 55px 0 18px;
	color:#E9E7D2;
	font-weight:bold;
	text-align:center;
	border:0;
	line-height:45px;
	font-size:16px;
}
#workThumbs {
	position:absolute;
	top:77px; left:38px;
	width:201px;
}
#workThumbs li {
	float:left;
	width:63px;
	height:54px;
	margin:0 4px 4px 0;
	background:#ddd;
}
#workThumbs a {
	display:block;
	border:3px solid #e9e7d2;
}
#workThumbs a:hover {
	border-color:#fff;
}
#workThumbs img {
	display:block;
}
#feedsWrapper {
	background:#151210;
}
#feeds {
	padding:40px 0 30px 0;
	width:900px;
	margin:auto;
}
#contactForm {
	float:left;
	width:400px;
	position:relative;
}
#contactForm h2 {
	margin-left:64px;
	color:#fff;
}
.smallForm {
	background:url(/Images/icon-waiting.gif) -1000px no-repeat;
	/* Preloading this image for use on the submit button */
}
.smallForm p {
	position:relative;
	margin-bottom:8px;
	padding-left:64px;
}
.smallForm label {
	position:absolute;
	top:2px; left:0;
	color:#8C8474;
	text-align:right;
	display:block;
	width:54px;
}
.smallForm input.text,
.smallForm textarea {
	display:block;
	color:#fff;
	background:#665d57;
	padding:5px;
	width:280px;
	border:0;
}
.smallForm textarea {
	height:75px;
}
.smallForm input.text:focus,
.smallForm textarea:focus {
	color:#222;
	background:#fff;
}
.smallForm select {
	padding:3px;
	width:290px;
}
 .smallForm a.button {
	display:block;
	width:122px;
	height:24px;
	line-height:24px;
	text-align:center;
	background:#7f726d url(/Images/button-brown.gif) bottom no-repeat;
	color:#fff;
	font-weight:bold;
	border:0;
	padding:3px 0;
	outline:0;
}
.smallForm a.button img {
	display:block;
	margin:auto;
}
.smallFormSuccess {
	background:#791;
	color:#fff;
	padding:8px 10px;
	margin-left:64px;
	width:270px;
}
#contactForm .validation-container {
	background:#d50f22;
	color:#fff;
	padding:8px 10px;
	margin:0 0 8px 64px;
	width:270px;
}
#contactForm #envelope {
	display:block;
	width:59px;
	height:46px;
	background:url(/Images/icon-envelope.png) no-repeat;
	position:absolute;
	right:10px;	bottom:30px;
}
#twitter {
	float:right;
	width:330px;
	padding-left:90px;
	position:relative;
	color:#E9E7D2;
	margin-right:30px;
}
#twitter li {
	margin-bottom:20px;
}
#twitter a#follow {
	position:absolute;
	top:0; left:0;
	border:0;
}
#twitter p {
	margin:0;
}
#twitter p.age {
	color:#8c8474;
}

/*
===================
Reasons to choose
===================
*/
ol#reasons {
	padding:0;
	margin:0;
	width:600px;
}
ol#reasons li {
	list-style:none;
	margin-bottom:30px;
	padding:4px 0 0 47px;
	background:url(/Images/number1.gif) top left no-repeat;
}
ol#reasons li.reason1 { background-image:url(/Images/number1.gif) }
ol#reasons li.reason2 { background-image:url(/Images/number2.gif) }
ol#reasons li.reason3 { background-image:url(/Images/number3.gif) }
ol#reasons li.reason4 { background-image:url(/Images/number4.gif) }
ol#reasons li.reason5 { background-image:url(/Images/number5.gif) }

ol#reasons h2 {
	margin-bottom:.6em;
}
#testimonials {
	position:absolute;
	top:40px; right:0;
	width:258px;
}
#testimonials li {
	background:#E9E7D2;
	border:4px double #fff;
	padding:25px;
	margin-bottom:25px;
}
#testimonials q {
	display:block;
	font-family:Georgia;
	font-style:italic;
	margin-bottom:.8em;
	font-size:13px;
}
#testimonials q em {
	display:block;
	font-size:18px;
	font-style:italic;
	margin-bottom:.6em;
	line-height:130%;
}
#testimonials cite {
	display:block;
	font-weight:bold;
	font-size:13px;
	text-align:right;
}
#testimonials cite span {
	display:block;
	text-align:right;
}

/*
===================
Terms of Business
===================
*/
ol#terms {
	padding:0;
	margin:0;
}
ol#terms li {
	list-style:none;
	margin-bottom:30px;
}
ol#terms li ul.bullet li {
	margin:0;
	list-style:disc;
}

/*
===================
Forms
===================
*/
.form {
	padding:25px 20px 15px 20px;
	background:#e6e4d5;
	margin-bottom:20px;
	min-height:1%;
}
.form legend {
	padding-left:85px;
	font-size:18px;
	color:#444;
	margin-bottom:1em;
}
.form p {
	position:relative;
	padding-left:85px;
	margin-bottom:8px;
}
.form p.success {
	padding:0;
}
.form label {
	position:absolute;
	top:0; left:0;
	display:block;
	width:70px;
	text-align:right;
	padding:4px 0 2px 0;
}
.form .inputGroup label {
	position:static;
	display:inline;
	padding:0 0 0 4px;
	font-weight:normal;
	color:#555;
}
.form input.text {
	padding:5px;
	width:290px;
	border:1px solid #dad3c4;
	margin-right:8px;
}
.form textarea {
	width:290px;
	height:150px;
	display:block;
	padding:5px;
	border:1px solid #dad3c4;
	font-family:Verdana,Arial,Sans-Serif;
}
.form select {
	font-size:13px;
	padding:3px;
	width:271px;
}
.form input.text:focus,
.form textarea:focus {
	background-color:#fafeed;
	border-color:#8b1;
}
input.button {
	padding:4px 6px;
}

/*
========================
Validation
========================
*/
.form .validation-container {
	background:#d50f22;
	color:#fff;
	padding:8px 10px;
	margin:-25px -20px 20px -20px;
	border-bottom:10px solid #fff;
}

/*
===================
Contact Page
===================
*/
#content.contact {
	padding-bottom:0;
}
#contactInfo {
	float:left;
	width:360px;
	height:500px;
	position:relative;
}
#contactInfo #mokoAnim {
	position:absolute;
	bottom:0; left:0;
	width:198px;
	height:150px;
}
#contactInfo address {
	float:left;
	margin-bottom:25px;
	width:180px;
}
#contactInfo address span {
	display:block;
	line-height:150%;
}
#contactInfo dt {
	float:left;
	clear:left;
	background-repeat:no-repeat;
	background-position:0 7px;
	width:50px;
	height:50px;
	font-weight:bold;
	color:#999;
	border-bottom:1px solid #ddd;
	line-height:300px;
	overflow:hidden;
}
#contactInfo dt.phone {
	background-image:url(/Images/icon-phone.gif);
}
#contactInfo dt.fax {
	background-image:url(/Images/icon-fax.gif);
}
#contactInfo dt.email {
	background-image:url(/Images/icon-email.gif);
}
#contactInfo dd {
	float:left;
	border-bottom:1px solid #ddd;
	width:200px;
	height:50px;
	line-height:50px;
}
#contactInfo dd strong {
	font-size:16px;
}
.contactForm {
	float:right;
	width:405px;
	position:relative;
}

/*
===================
Product Pages
===================
*/
#productSelector {
	float:right;
	width:200px;
	height:31px;
	background:url(/Images/bg-selector.gif) top no-repeat;
	position:relative;
	z-index:1;
}
#productSelector span {
	display:block;
	line-height:31px;
	padding-left:20px;
	cursor:pointer;
	font-weight:bold;
	color:#6c654f;
	-moz-user-select:none;
}
#productSelector ul {
	position:absolute;
	top:31px; left:0;
	display:none;
	width:200px;
	padding-bottom:8px;
}
#productSelector ul a {
	display:block;
	border:0;
	padding-left:19px;
	font-weight:normal;
	margin:0 1px;
	width:179px;
}
#productSelector ul a:hover {
	background:#fff;
}
#productSelector.active {
	background-position:0 -31px;
}
#productSelector.active ul {
	display:block;
	background:url(/Images/bg-selector.gif) bottom no-repeat;
}
#tabs {
	height:50px;
	background:#f8fdf3 url(/Images/bg-tab-content.jpg) bottom left no-repeat;
}
#tabs li {
	float:left;
	font-size:15px;
	line-height:38px;
	text-align:center;
	font-weight:bold;
	background:#7baf3f url(/Images/bg-tab.gif) bottom repeat-x;
	cursor:pointer;
	color:#fff;
	padding:0 25px;
	border-right:1px solid #dfdbd5;
}
#tabs li.active {
	background-position:top;
}
#tabContent li.topLevel {
	min-height:250px;
	background:url(/Images/Logos/logo-starter-small.gif) 40px 40px no-repeat;
	padding:46px 40px 40px 102px;
}
#tabContent.starter li.topLevel		{ background-image:url(/Images/Logos/logo-starter-small.gif) }
#tabContent.shop li.topLevel			{ background-image:url(/Images/Logos/logo-shop-small.gif) }
#tabContent.cms li.topLevel			{ background-image:url(/Images/Logos/logo-cms-small.gif) }
#tabContent.cmsSchools li.topLevel	{ background-image:url(/Images/Logos/logo-schools-small.gif) }
#tabContent.cmsProperty li.topLevel	{ background-image:url(/Images/Logos/logo-property-small.gif) }

#tabContent h2 {
	border:0;
	padding:0;
	margin:0 0 1px 0;
	text-transform:none;
	font-size:22px;
	letter-spacing:-0.02em;
}
#tabContent h3 {
	color:#791;
	font-size:14px;
	margin-bottom:20px;
}
#tabContent #intro {
	width:auto;
	padding-right:410px;
	position:relative;
}
#tabContent #intro ul.bullet {
	margin:0 0 15px 0;
	padding-left:15px;
}
#tabContent #intro a.button {
	float:left;
	width:110px;
	height:36px;
	background:#791 url(/Images/button-green-medium.gif) top no-repeat;
	padding:0 45px 0 15px;
	color:#fff;
	font-weight:bold;
	text-align:center;
	border:0;
	line-height:36px;
	font-size:15px;
	margin-right:20px;
}
#tabContent #intro span.price {
	float:left;
	line-height:36px;
	width:160px;
}
#tabContent #intro span.price strong {
	font-size:22px;
	letter-spacing:-1px;
}
#tabContent #intro #carousel {
	position:absolute;
	top:40px; right:40px;
	width:320px;
	height:190px;
	padding:12px;
	background:url(/Images/bg-carousel-small.gif) no-repeat;
	z-index:0;
}
#tabContent #intro #carousel li {
	position:absolute;
	width:320px;
	height:190px;
	opacity:0;
	filter:alpha(opacity=0);
}
#tabContent #samples ul {
	margin:0 0 0 15px;
}
#tabContent #samples li {
	background:url(/Images/bullet-green.gif) left no-repeat;
	padding-left:18px;
	margin-bottom:3px;
}
#tabContent #samples li a {
	color:#444;
}

/*
===================
Features Grid
===================
*/
#featuresGrid {
	width:660px;
	margin-top:10px;
}
#featuresGrid tr.alt td {
	background:#f0f1e4;
}
#featuresGrid td, #featuresGrid th {
	text-align:center;
	border-bottom:1px solid #dad3c4;
}
#featuresGrid th {
	font-weight:bold;
	font-size:15px;
	padding-bottom:10px;
}
#featuresGrid th.subheading {
	padding-top:35px;
}
#featuresGrid th span {
	font-size:12px;
	font-weight:normal;
}
#featuresGrid th span a {
	outline:none;
}
#featuresGrid td {
	padding:5px;
	line-height:20px;
}
#featuresGrid .name {
	width:50%;
	text-align:left;
}
#featuresGrid .price {
	font-size:15px;
}
#featuresGrid img {
	display:block;
	margin:auto;
}