/**********************************************************************************************

	CSS on Sails
	Title: Site Name
	Author: XHTMLized (http://www.xhtmlized.com/)
	Date: June 2009

***********************************************************************************************

	1. BASE
			1.1 Reset
			1.2 Clearfix
			1.3 Default Styles

	2. LAYOUT
			2.1 Structure
			2.2 Top
			2.3 Intro
			2.4 Main
			2.5 Side
	3. OTHER
			3.1 Fancybox

***********************************************************************************************/


/* 1. BASE
-----------------------------------------------------------------------------------------------
===============================================================================================*/


/* 1.1 Reset
-----------------------------------------------------------------------------------------------*/

html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, samp, small, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
a, ins, del { text-decoration: none; }
table { border-collapse: collapse; border-spacing: 0; }
th, td { vertical-align: top; }
th { text-align: left; }


/* 1.2 Clearfix
-----------------------------------------------------------------------------------------------*/

#content:after,
#benefits ul:after,
#customers li.customer:after,
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }


/* 1.3 Default Styles
-----------------------------------------------------------------------------------------------*/

body { background: #f8f9f8 url('../images/bg-body.png') repeat-x top; color: #434d3e; font: 62.5%/1.3 "Calibri", "Myriad Pro", "Helvetica", "Arial", sans-serif; text-align: center; }
hr { display: none; }
strong { font-weight: bold; }
em { font-style: italic; }
del { text-decoration: line-through; }
th { font-weight: normal; }
address, cite, dfn { font-style: normal; }
li { list-style: none; }
abbr, acronym { border-bottom: 1px dotted #999; cursor: help; }
input, textarea, select { font-family: "Calibri", "Myriad Pro", "Helvetica", "Arial", sans-serif; font-size: 14px; }
a, a:visited { color: #00f; text-decoration: underline; }
a:hover, a:active { color: #f00; }


/* 2. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/


/* 2.1 Structure
-----------------------------------------------------------------------------------------------*/

#wrap { background: url('../images/bg-wrap.png') no-repeat top; }
#container { width: 944px; position: relative; margin: 0 auto; text-align: left; font-size: 1.2em; }
#main { width: 521px; float: right; }
#side { width: 381px; float: left; }
#footer { clear: both; }


/* 2.2 Top
-----------------------------------------------------------------------------------------------*/

#top {
	height: 41px;
	line-height: 41px;
	color: #FFFFFF;
}
#top ul {
	float: left;
}
#top ul li {
	display: inline;
	margin-left: 10px;
	padding-left: 13px;
	border-left: 1px solid #6D7B71;
}
#top ul li a {
	color: #FFFFFF;
}
#top ul li.home {
	margin-left: 0;
	padding-left: 0;
	border: none;
}

#top p {
	float: right;
	color: #D9DCDA;
}
#top img {
	position: relative;
	top: -2px;
	margin-left: 5px;
	vertical-align: middle;
}


/* 2.3 Intro
-----------------------------------------------------------------------------------------------*/

#intro {
	position: relative;
	padding-top: 163px;
	height: 216px;
	color: #566250;
}

#logo {
	width: 333px;
}
#logo a {
	display: block;
	position: relative;
	overflow: hidden;
	height: 46px;
	background: url('../images/logo.png') no-repeat;
	text-indent: -999em;
}

#intro p {
	font-size: 1.5em;
}

#intro .description {
	margin-top: 15px;
	width: 320px;
	font-family: "Georgia", serif;
	font-size: 2em;
	line-height: 1.1em;
}

#side .demo-and-pricing {
	display: block;
	position: relative;
	z-index: 2;
	margin-bottom: 20px;
	padding-right: 6px;
	padding-bottom: 8px;
	height: 47px;
	line-height: 45px;
	width: 252px;
	background: url('../images/btn-demo-and-pricing.png') no-repeat;
	color: #FFFFFF;
	text-align: center;
	font-size: 1.42em;
	font-weight: bold;
	text-decoration: none;
}
#intro .demo-and-pricing:hover {
	text-decoration: underline;
}

#maxi-award {
	position: absolute;
	bottom: -53px;
	left: -30px;
	height: 158px;
	width: 229px;
	background: url('../images/misc-maxi.png') no-repeat;
	text-indent: -999em;
}

#video {
	position: absolute;
	top: 3px;
	right: -16px;
	padding-top: 13px;
	padding-left: 16px;
	height: 405px;
	width: 533px;
	background: url('../images/bg-video.png');
}

#customers-logos h3 {
	display: none;
}

#customers-logos li {
	position: absolute;
}
#customers-logos .centro {
	left: 240px;
	bottom: 10px;
	height: 37px;
	width: 37px;
	background: url('../../_media/images/centro.png') no-repeat;
	text-indent: -999em;
}
#customers-logos .dlc {
	left: 310px;
	bottom: 16px;
	height: 23px;
	width: 64px;
	background: url('../../_media/images/dlc.png') no-repeat;
	text-indent: -999em;
}

/* 2.4 Content
-----------------------------------------------------------------------------------------------*/

#video-object object {
	border-top: 1px solid #999;
}

#content {
	margin-top: 62px;
	font-size: 1.17em;
}

#content h2 {
	margin-bottom: 0.6em;
	color: #638371;
	font-size: 1.5em;
}

#content p {
	margin-bottom: 1.5em;
}

/* 2.5 Main
-----------------------------------------------------------------------------------------------*/

#benefits li {
	display: inline;
	float: left;
	margin-left: 18px;
	width: 250px;
}
#benefits .odd {
	margin-left: 0;
}

#system-graph {
	margin-bottom: 1.5em;
	height: 287px;
	text-indent: -999em;
	background: url('../../_media/images/graph.png') no-repeat center;
}

/* 2.5 Side
-----------------------------------------------------------------------------------------------*/

#customers .customer {
	margin-bottom: 25px;
}

#customers div {
	float: left;
	width: 181px;
	color: #FFFFFF;
	background: #434D3E;
	font-size: 0.86em;
}
#customers a {
	position: relative;
	display: block;
	border: 1px solid #BDBDBD;
}
#customers img {
	display: block;
}
#customers a span {
	display: block;
	position: absolute;
	top: 0; left: 0;
	height: 100%; width: 100%;
	background: url('../images/ico-play.png') no-repeat 50% 95%;
}

#customers h3 {
	margin: 5px 0 0 5px;
	font-size: 1.14em;
}
#customers p {
	margin: 0 0 0 5px;
	padding-bottom: 5px;
	font-size: 12px;
}

#customers h4,
#customers .details {
	width: 181px;
	float: right;
}

#customers .details {
	font-size: 0.86em;
}
#customers .details li {
	padding: 6px 0;
	border-top: 1px solid #B1C7A7;
}
#customers .details li.first {
	border: none;
}
#customers h4 {
	font-size: 0.71em;
	font-weight: normal;
	text-transform: uppercase;
}

#testimonial {
	margin-top: 35px;
	padding-top: 35px;
	border-top: 1px solid #DED5C8;
}
#testimonial img { float: right; }
#testimonial blockquote {
	font-family: "Georgia", serif;
}
#testimonial p {
	margin-top: 2em;
}

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

#footer {
	margin-top: 35px;
	padding: 0px 0 35px;
	border-top: 1px solid #DED5C8;
	text-align: center;
}

#footer ul {
	margin: 15px 0;
}
#footer ul li {
	display: inline;
	margin-left: 10px;
	padding-left: 13px;
	border-left: 1px solid #6D6D6D;
}
#footer ul li.home {
	margin-left: 0;
	padding-left: 0;
	border: none;
}
#footer ul li a { color: #3366ff; }

/* 3.1 Fancybox
-----------------------------------------------------------------------------------------------*/

#fancy_ajax { overflow: hidden !important; }

#fancy_content {
	font-size: 1.4em;
}

#fancy_content h2 {
	margin-bottom: 0.5em;
	color: #638371;
	font-size: 1.3em;
}

#fancy_content form label,
#fancy_content form input.text,
#fancy_content form textarea {
	display: block;
	width: 205px;
}
#fancy_content form label {
	margin: 5px 0 3px;
}
#fancy_content .address {
	margin-top: 2em;
}
#fancy_content form textarea {
	width: 210px;
	height: 100px;
}
#fancy_content .image {
	margin-top: 2em;
}