/*-------------------------------------------------------------------*/
/* LAYOUT STYLES */
/*-------------------------------------------------------------------*/

/*---------- Body ----------*/
body {
	margin: 0;
	padding: 0;
	color: #1a1a1a;
	background: #fff url(/images/background.gif) repeat-x top left;
	font-family: Tahoma, Geneva, Arial, sans-serif;
	font-size: 14px;
	line-height: 18px;
	text-align: center;
}

/*---------- Containers ----------*/
#container-outer {
	width: 990px;
	margin: 0 auto 20px auto;
	text-align: left
}

#container-inner {
	
}

/*---------- Header ----------*/
#header {
	
}

#logo {
	margin-top: 11px;
	float: left;
}

#menu {
	text-align: right;
	float: right;
	margin-top: 78px;
}

#menu a {
	text-decoration: none;
	display: inline-block;
	padding: 9px 25px 11px 25px;
}

/*---------- Content ----------*/
#content {
	
}

/*---------- Left Column ----------*/
#leftColumn {
	width: 780px;
	float: left;
}

/*---------- Right Column ----------*/
#rightColumn {
	width: 210px;
	float: right;
}

#latestNews {
	padding: 0 0 10px 20px;
	margin: 60px 0 0 0 ;
	border-left: 1px solid #dcdcdc;
	border-bottom: 1px solid #dcdcdc;
}

#workWithUs {
	padding: 16px 0 40px 20px;
	border-left: 1px solid #dcdcdc;
}



/*-------------------------------------------------------------------*/
/* TEXT STYLES */
/*-------------------------------------------------------------------*/
h1 {
	font-size: 18px;
	line-height: 30px;
	font-weight: normal;
	margin: 51px 0 0 0;
}

h2 {
	font-size: 14px;
	line-height: normal;
	margin-bottom: 5px;
	font-weight: normal;
	margin: 0 0 0 0;
}

h3 {
	font-size: 11px;
	line-height: normal;
	margin-bottom: 5px;
	color: #6b8ca5;
	font-weight: normal;
	margin: 9px 0 0 0;
}

.clear {
	clear: both;
}

.highlight {
	color: #6b8ca5;
}

.pink {
	color: #ed145b;
}

.action {
	font-size: 14px;
	padding-left: 20px;
	background: url(/images/action.gif) no-repeat left 70%;
}

#boxes p, #latestNews p, #workWithUs p, #contactInfo p {
	font-size: 11px;
	line-height: 14px;
	color: #6c7173;
}

#contactInfo p {
	margin-top: 0;
}

#footer {
	margin-top: 25px;
	font-size: 11px;
	line-height: 14px;
	color: #6c7173;
	text-align: right;
}



/*-------------------------------------------------------------------*/
/* LINK STYLES */
/*-------------------------------------------------------------------*/
a {
	color: #ed145b;
	text-decoration: underline;
}

a:hover {
	color: #6c7173;
}

#menu {
	
}

#menu a {
	color: #fff;
	border-right: 1px solid #3e3e3e;
}

#menu a.first {
	border-left: 1px solid #3e3e3e;
}

#menu a:hover {
	background: #1a1a1a;
}



/*-------------------------------------------------------------------*/
/* PAGE STYLES */
/*-------------------------------------------------------------------*/
/* --- Home Page --- */
#homeMessage {
	padding-bottom: 67px;
	background: url(/images/content-bkgrnd.png) no-repeat left 35px;
}

#homeMessage #words h1 {
	margin-left: 38px;
}

#monitor {
	float: left;
	margin-top: -6px;
	margin-left: 100px;
}

#words {
	width: 462px;
	float: right;
}

ul#features {
	margin-top: 22px;
	padding-left: 75px;
}

#features li {
	line-height: 30px;
	padding-left: 35px;
	list-style: none;
	list-style-type: none;
	background: url(/images/check.gif) no-repeat left 60%;
}

#boxes {
	clear: both;
}

#boxes div {
	background: url(/images/box-shadow.png) no-repeat top left;
	padding: 24px 0 0 31px;
	width: 190px;
	float: left;
}

#boxes #box1 {
	margin: 0;
}

#boxes #box2 {
	margin: 0 0 0 40px;
}

#boxes #box3 {
	margin: 0 0 0 40px;
}

/* --- Features --- */
#featuresContent {
	margin-right: 20px;
}

#featureBoxes {
	margin-top: 10px;
}

#featureBoxes div {
	background: url(/images/box-shadow.png) no-repeat top left;
	padding: 8px 0 0 11px;
	float: left;
}

#featureBoxes div img {
	border: 1px solid #ccc;
}

#featureBoxes #box1 {
	margin: 0 0 40px 0;
}

#featureBoxes #box2 {
	margin: 0 0 40px 29px;
}

#featureBoxes #box3 {
	margin: 0 0 40px 29px;
}

#featureBoxes #box4 {
	margin: 0;
}

#featureBoxes #box5 {
	margin: 0 0 0 29px;
}

#featureBoxes #box6 {
	margin: 0 0 0 29px;
}


/* --- Examples --- */
#examplesContent {
	margin-right: 18px;
}

#exampleBoxes {
	
}

#exampleBoxes div {
	background: url(/images/box-shadow.png) no-repeat top left;
	padding: 8px 0 0 11px;
	margin: 10px 0;
	width: 760px;
	float: left;
}

#exampleBoxes div img {
	border: 1px solid #ccc;
}


/* --- Pricing --- */
#pricingContent {
	margin-right: 20px;
}

#pricingBoxes {
	margin-top: 10px;
}

#pricingBoxes div {
	background: url(/images/box-shadow.png) no-repeat top left;
	padding: 24px 0 0 31px;
}

#pricingBoxes #box1 {
	margin: 0;
}

#pricingBoxes #box2 {
	margin: 40px 0 0 0;
}

/* --- Contact --- */
#contactInfo {
	float: left;
	width: 185px;
	margin: 60px 0 0 20px;
}
#contactFormContainer {
	float: left;
	width: 555px;
	margin-right: 20px;
}

#nameContainer {
	margin: 0 0 18px 0;
}

#emailPhoneContainer {
	margin: 0 0 18px 0;
}

#subjectContainer {
	margin: 0 0 18px 0;
}

#messageContainer {
	margin: 0 0 18px 0;
}

#submitContainer {
	width: 510px;
	text-align: right;
}

#contactForm input {
	border: none;
	background: #e5e5e5;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18px;
	color: #999;
	padding: 4px 5px 1px 5px;
}

#nameContainer input,
#messageContainer input {
	width: 349px;
	height: 25px;
}

#emailPhoneContainer input#email {
	width: 190px;
	height: 25px;
	margin-right: 19px;
}

#emailPhoneContainer input#phone {
	width: 130px;
	height: 25px;
	margin-right: 19px;
}

#contactForm input.active {
	color: #000;
	font-weight: normal;
}

#contactForm textarea {
	width: 500px;
	height: 166px;
	background: #e5e5e5;
	border: none;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18px;
	color: #999;
	padding: 2px 5px 1px 5px;
}

#contactForm textarea.active {
	color: #000;
	font-weight: normal;
}

#contactForm input.button {
	background: #ed145b;
	border: none;
	padding: 3px 10px;
	font-size: 14px;
	color: #fff;
}

.divider {
	width: 300px;
	border-bottom: 1px solid #e9e9e9;
	margin: 5px auto 10px auto;
}



/*-------------------------------------------------------------------*/
/* FORM STYLES */
/*-------------------------------------------------------------------*/
form {
	margin-top: 20px;
}

input.inactive {
	width: 260px;
	height: 20px;
	background: #ccc;
	border: 0px solid #fff;
	font-size: 11px;
	font-weight: bold;
	padding: 2px 0 0 2px;
	filter:alpha(opacity=50);
	-moz-opacity:.50;
	opacity:.50;
}

input.active {
	width: 260px;
	height: 20px;
	background: #ccc;
	border: 0px solid #fff;
	font-size: 11px;
	font-weight: bold;
	padding: 2px 0 0 2px;
}

textarea.inactive {
	font-family: Arial, Helvetica, sans-serif;
	width: 260px;
	height: 100px;
	background: #ccc;
	border: 0px solid #fff;
	font-size: 11px;
	font-weight: bold;
	padding: 2px 0 0 2px;
	filter:alpha(opacity=50);
	-moz-opacity:.50;
	opacity:.50;
}

textarea.active {
	font-family: Arial, Helvetica, sans-serif;
	width: 260px;
	height: 100px;
	background: #ccc;
	border: 0px solid #fff;
	font-size: 11px;
	font-weight: bold;
	padding: 2px 0 0 2px;
}

input.butInactive {
	color: #000;
	background: #7da7d9;
	border: 0px solid #000;
}

input.butActive {
	color: #000;
	background: #7da7d9;
	border: 0px solid #000;
}



/*-------------------------------------------------------------------*/
/* BOX MODEL */
/*-------------------------------------------------------------------*/
/* Forces browsers to correctly clear floats. For more information on this technique */
/* please see the article, "How To Clear Floats Without Structural Markup" */
/* located at http://www.positioniseverything.net/easyclearing.html */

#content:after,
#header:after,
#homeMessage:after,
#boxes:after,
.clear:after {
	content:".";
	display:block;
	height:0em;
	clear:both;
	visibility:hidden;
}

#content,
#header,
#homeMessage,
#boxes,
.clear {
	display:inline-block;
}

* html #content,
* html #header,
* html #homeMessage,
* html #boxes,
* html .clear {
	height:1%;
}

#content,
#header,
#homeMessage,
#boxes,
.clear {
	display:block;
}