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

html, body {
	color: #333;
	background: url(../images/body-bg.jpg) top center no-repeat;
	font: 13px Arial,Helvetica,sans-serif;
}

strong {
	font-weight: bold;
}

em {
	font-style: italic;
}

a {
	color: #0099cb;
	text-decoration: none;
}

a:hover {
	color: #f47711;
}

h1 {
	border-bottom: 1px solid #666;
	color: #666;
	font: 26px "Arial", Helvetica, sans-serif;
	margin: 0 0 20px -20px;
	padding-bottom: 3px;
}

h2 {
	color: #73ac39;
	font: 20px "Arial", Helvetica, sans-serif;
}

h3 {
	color: #666;
	font: 20px "Arial", Helvetica, sans-serif;
}

h4 {
	color: #73ac39;
	font: 18px "Arial", Helvetica, sans-serif;
}

h5 {
	color: #666;
	font: 18px "Arial", Helvetica, sans-serif;
}

p {
	line-height: 1.3;
	margin-bottom: 1em;
}

blockquote {
	margin: 0 2em;
}

.clr {
	clear: both;
}

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

#header {
	height: 148px;
	position: relative;
}

#header-logo {
	left: 10px;
	position: absolute;
	top: 15px;
}

#header-tagline {
	left: 179px;
	position: absolute;
	top: 38px;
}

#header-subnav {
	position:absolute;
	right: 0;
	top: -1px;
}

#header-search {
	border: 1px solid #999;
	height: 25px;
	position: absolute;
	right: 5px;
	top: 115px;
	width: 242px;
}

#header-search-field {
	border-top: none;
	border-right: 1px solid #999;
	border-bottom: none;
	border-left: none;
	float: left;
	height: 25px;
	line-height: 25px;
	outline: none;
	padding-left: 5px;
	width: 195px;
}

#header-subnav li {
	background: url('../images/header-subnav-button-bg.png');
	float: left;
	height: 32px;
	position: relative;
	width: 114px;
}

#header-subnav li:hover {
	background-position: bottom;
}

#header-subnav a {
	display: block;
	height: 22px;
	padding-top: 10px;
	position: absolute;
	text-align: center;
	width: 114px;
	z-index: 0;
}

#header-contact {
	position: absolute;
	right: 20px;
	top: 50px;
}

/* Superfish Nav Styles ------------------------------- */

#header-nav {
	height: 32px;
	left: 0;
	position: absolute;
	top: 116px;
}

#header-nav ul {
	position: absolute;
	top: -999em;
	width: 170px;
}

#header-nav ul li {
	width: 100%;
}

#header-nav li:hover {
	background-position: bottom;
	visibility:	inherit; /* fixes IE7 'sticky bug' */
}

#header-nav li {
	background: url('../images/header-nav-button-bg.png');
	float: left;
	position: relative;
}

#header-nav a {
	display: block;
	position: relative;
}

#header-nav a.top-level {
	height: 22px;
	padding-top: 10px;
	text-align: center;
	width: 114px;
}

#header-nav li:hover ul, #header-nav li.sfHover ul {
	left: 0;
	top: 32px; /* match top ul list item height */
	z-index: 99;
}

/* sub menu list item */
#header-nav li ul li {
	background-color: #fff;
	background-image: none;
	border-bottom: 1px solid #eee;
}

#header-nav li ul li:hover {
	background-color: #efefef;
}

/* sub menu anchor */
#header-nav li ul li a {
	border-left: 1px solid #eee;
	border-right: 1px solid #eee;
	font: 12px Arial, Helvetica, sans-serif;
	padding: 5px 10px;
}

.sf-shadow ul {
	background:	url('../images/header-nav-shadow.png') no-repeat bottom right;
	padding: 0 8px 9px 0;
	-moz-border-radius-bottomleft: 17px;
	-moz-border-radius-topright: 17px;
	-webkit-border-top-right-radius: 17px;
	-webkit-border-bottom-left-radius: 17px;
}

.sf-shadow ul.sf-shadow-off {
	background: transparent;
}

/* Side Navigation On Secondary ------------------------ */

#side-nav {
	width: 192px;
	float: left;
	margin-top: 20px;
}

#side-nav #portfolio-button, #side-nav #estimate-button, #side-nav #ecommerce-button {
	display: block;
	height: 46px;
	margin-bottom: 3px;
}

#side-nav #portfolio-button:hover, #side-nav #estimate-button:hover, #side-nav #ecommerce-button:hover {
	background-position: bottom;
}

#side-nav #portfolio-button {
	background: url(../images/side-nav-portfolio-button-bg.png);
}
	
#side-nav #estimate-button {
	background: url(../images/side-nav-estimate-button-bg.png);
}
	
#side-nav #ecommerce-button {
	background: url(../images/side-nav-ecommerce-button-bg.png);
}
	
#side-nav ul {
	border-left: 1px solid #ebebeb;
	border-right: 1px solid #ebebeb;
	margin-bottom: 3px;
}

#side-nav li {
	border-bottom: 1px solid #ebebeb;
}

#side-nav ul a {
	display: block;
	padding: 5px 10px;
}

/* Secondary Content ------------------------------------*/

#content {
	width: 726px;
	float: right;
	margin-top: 20px;
}

ul.unordered, ol {
	line-height: 1.3;
	margin: 0 0 1em 1em;
	padding-left: 1em;
}

ul.unordered li {
	list-style-type: disc;
}

ol li {
	list-style-type: decimal;
}

#sidebar {
	float: right;
	width: 190px;
}

#sidebar ul {
	margin: 10px 0;
}

#sidebar li {
	border-bottom: 1px solid #e4e4e4;
	margin-bottom: 5px;
	padding-bottom: 5px;
}


#with-sidebar {
	border-right: 1px solid #e4e4e4;
	float: left;
	padding-right: 10px;
	width: 516px;
}

/* Plan table styles ----------------------------------*/

.plan-table {
	font-size: 12px;
	color: #000;
	width: 100%;
	border: 1px solid #eee;
	border-collapse: collapse;
}

.plan-table th {
	background: #333;
	border-right: 1px solid #eee;
	color: #fff;
	font: 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
	padding: 1px;
	text-align: center;
}

.plan-table td {
	padding: 2px;
	border-bottom: 1px solid #eee;
	border-right: 1px solid #eee;
}

.plan-table strong {
	font-size: 14px;
}

.plan-subheader {
	background: #eaeaea;
	display: block;
	font-weight: bold;
	margin-bottom: 1px;
	padding: 2px;
}

td.plan-subheader {
	display: table-cell;
}

.plan-subheader a:hover {
	color: #f47711;
}

.plan-table .basic {
	text-align: center;
	background: #cddcce;
	width: 109px;
}

.plan-table .basicplus {
	text-align: center;
	background: #b3c9b4;
	width: 109px;
}

.plan-table .standard {
	text-align: center;
	background: #89bb8b;
	width: 109px;
}

.plan-table .advanced {
	text-align: center;
	background: #6db170;
	width: 109px;
}

.plan-table .enterprise {
	text-align: center;
	background: #529a54;
	width: 109px;
}

.plan-table .bronze {
	text-align: center;
	background: #cddcce;
	width: 140px;
}

.plan-table .silver {
	text-align: center;
	background: #b3c9b4;
	width: 140px;
}

.plan-table .gold {
	text-align: center;
	background: #89bb8b;
	width: 140px;
}

.plan-table .checked {
	background-image: url(../images/plan-checkmark-icon.gif);
	background-position: center;
	background-repeat: no-repeat;
}

.plan-table .unchecked {
	background-image: url(../images/plan-unchecked-icon.gif);
	background-position: center;
	background-repeat: no-repeat;
}

.plan-table img {
	vertical-align: middle;
}

/* Feature list on develop/ecommerce and SiteMechanic ----------------------------------*/

#feature-list {
}

#feature-list li {
	width: 210px;
	height: 140px;
	float: left;
	margin: 0 40px 0 0;
	padding: 0 0 0 80px;
	background-position: 0 5px;
	background-repeat: no-repeat;
}

/* Ecommerce Features */

#feature-list #robust-administration {
	background-image: url(../images/ecommerce-features-robust-administration-bg.png);
}

#feature-list #get-more-info div {
	background: url(../images/ecommerce-features-get-more-info-bg.png);
	padding: 36px 0 13px 13px;
}

#feature-list #get-more-info div p {
	margin-bottom: 0;
}

#feature-list #sell-digital {
	background-image: url(../images/ecommerce-features-sell-digital-bg.png);
}

#feature-list #configure-flexible {
	background-image: url(../images/ecommerce-features-configure-flexible-bg.png);
}

#feature-list #global-ecommerce {
	background-image: url(../images/ecommerce-features-global-ecommerce-bg.png);
}

#feature-list #marketing-tools {
	background-image: url(../images/ecommerce-features-marketing-tools-bg.png);
}

/* SiteMechanic Features */

#feature-list #easy-to-use {
	background-image: url(../images/sitemechanic-features-easy-to-use-bg.jpg);
	height: 100px;
}

#feature-list #complete-control {
	background-image: url(../images/sitemechanic-features-complete-control-bg.jpg);
	height: 100px;
}

#feature-list #fearless-editing {
	background-image: url(../images/sitemechanic-features-fearless-editing-bg.jpg);
	height: 100px;
}

#feature-list #retrofit {
	background-image: url(../images/sitemechanic-features-retrofit-bg.jpg);
	height: 100px;
}

#feature-list #low-cost {
	background-image: url(../images/sitemechanic-features-low-cost-bg.jpg);
	height: 100px;
}

#feature-list #php-mysql {
	background-image: url(../images/sitemechanic-features-php-mysql-bg.jpg);
	height: 100px;
}

/* Portfolio styles ----------------------------------*/

#portfolio-nav {
	height: 32px;
	margin: -21px 0 20px 0;
}

#portfolio-nav li {
	float: left;
}

#portfolio-nav a {
	background: url(../images/portfolio-nav-button-bg.png);
	display: block;
	height: 22px;
	padding-top: 10px;
	text-align: center;
	width: 114px;
}

#portfolio-nav a:hover, #portfolio-nav a:focus {
	background-position: bottom;
}

#portfolio-list {
}

#portfolio-list li {
	border-bottom: 1px solid #ccc;
	float: left;
	margin: 0 40px 10px 0;
	padding-bottom: 10px;
	position: relative;
	width: 258px;
}

#portfolio-list p {
	margin-bottom: 5px;
	position: relative;
	z-index: 1;
}

#portfolio-list img {
	border: 1px solid #ccc;
	position: relative;
	z-index: 1;
	}
	
#portfolio-list .before-after {
	width: 606px;
	}
	
#portfolio-list .before-after div {
	float: left;
	margin-bottom: 5px;
	}
	
#portfolio-list .before-after img {
	margin-right: 40px;
	}
	
#portfolio-list .before-after p {
	width: 556px;
}

#portfolio-detail-popup {
	background: #ffedcc;
	border: 1px solid #fecf6f;
	display: none;
	padding: 230px 5px 5px 5px;
	position: absolute;
	top: -6px;
	left: -6px;
	width: 260px;
	z-index: 2;
}

/* Google Search Results --------------------------------*/
#cse-search-results iframe {
	width: 726px;
}

/* General form styles ----------------------------------*/

fieldset {
	float: left;
}

div.input {
	margin-bottom: 7px;
}

div.form-header {
	background: #39c;
	color: #fff;
	font-size: 14px;
	margin-bottom: 3px;
	padding: 2px 5px;
	-moz-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;
}

div.form-divider {
	border-top: 1px solid #f90;
	padding-top: 7px;
}

div.submit {
	border-top: 1px solid #f90;
	padding-top: 3px;
}

div.submit p {
	font-size: 10px;
}

label {
	display: block;
	font: bold 11px Arial, Helvetica, sans-serif;
	margin-bottom: 1px;
}

label.error {
	color: #c00;
	font-style: italic;
}

input[type=submit] {
	float: right;
}

form em {
	color: #c00;
}

/* default text color before focus. used on the footer blog signup */
.default-text {
	color: #999;
}

/* Secondary Promo Footer -------------------------------*/

#promo-footer {
	margin-top: 20px;
	background: #ebebeb;
	padding: 15px 20px;
	font: 12px Arial, Helvetica, sans-serif;
}

#promo-blog {
	float: left;
	padding-right: 10px;
	width: 276px;
}

#promo-blog p {
	margin-bottom: 0;
}

#promo-subscribe {
	width: 287px;
	float: left;
	padding: 0 10px;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
}

#promo-subscribe-email {
	float: left;
	width: 180px;
	font: 13px Arial, Helvetica, sans-serif;
	border: 1px solid #999;
	padding: 4px 3px 5px 3px;
	margin-right: 2px;
}

#promo-subscribe a {
	font: 11px Arial, Helvetica, sans-serif;
}

#promo-awards {
	float: left;
	padding-left: 10px;
}

#promo-awards h2 {
	margin-bottom: 10px;
}

#promo-awards li {
	float: left;
	margin-right: 3px;
}

/* Footer ---------------------------------------------- */

#footer {
	border-top: 1px solid #ebebeb;
	font: 10px Verdana, Geneva, sans-serif;
	margin-top: 10px;
	padding: 10px;
}