/* Overview header */

#overview-header { display: none; }


/* Intro */

#intro-strip { padding: 50px 0 50px 0; }
#intro-content {
	color: #505244;
	text-align: left; /* IE */
	width: 860px;
}
#intro-content .descr { width: 600px; float: left; text-align: center; }
#intro-content .descr p { margin: 0; }
#intro-content .descr .major { font-size: 120%; margin-bottom: 20px; }
#intro-content .descr strong { color: #8E204C; font-weight: normal; }
#intro-content .download-latest { float: right; }


/* Installation */

#installation-strip {
	padding: 80px 0;
	background: #FFF;
	border: 1px solid rgb(178,181,165);
	border-style: solid none solid none;
}
#installation-content h2 {
	margin-bottom: 30px;
	color: #484848;
}
#installation-diagram { text-align: left; position: relative; }
#install-seg1,
#install-seg2,
#install-seg3 { height: 200px; top: 0; }
#install-seg1,
#install-seg3 { width: 440px; background: #FFF; border: 2px solid #DFE0D7; }
#install-seg2 {
	position: absolute;
	z-index: 1;
	width: 100px;
	left: 405px;
	background: url('installation-rarrow.png') center center no-repeat;
}
#install-seg3 { position: absolute; right: 0; top: 0; }
#install-seg1 { left: 0; }
#install-seg3 { right: 0; }
#install-code,
#install-preview { font-size: 70%; }
#install-code { margin: 8px; }
#install-preview { padding: 20px 30px; }
#installation-toolbar { margin-top: 40px; }


/* Demo app */

#demo-strip { padding: 80px 0; background: #404040; color: #CCC; }
#demo-content h2 { margin-bottom: 30px; color: #DFDFDF; }
#demo-content a { color: #FFF; }

#demo-app { position: relative; height: 250px; }
#demo-app table { width: 100%; font-size: 80%; }
#demo-app th { font-weight: normal; padding: 0 5px; }
#demo-app table input { width: 10em; color: #FFF; border: 1px solid #999; background: #262626; padding: 5px 5px; }
#demo-app table input:focus { border-color: #FFF !important; color: #FFF !important; }
#demo-app table input.short { width: 3em; text-align: center !important; }
#demo-app button { width: 180px; height: 50px; margin: 10px 0; }

#demo-app .panel { position: absolute; top: -75px; width: 220px; }
#demo-app .panel .red { color: #F99; }
#demo-app .panel .red input { border-color: #F99; color: #F99; }
#demo-app .panel .grn { color: #9F9; }
#demo-app .panel .grn input { border-color: #9F9; color: #9F9; }
#demo-app .panel .blu { color: #9CF; }
#demo-app .panel .blu input { border-color: #9CF; color: #9CF; }

#demo-app .panel.bgcolor { left: 0; }
#demo-app .panel.bgcolor th { text-align: right; }
#demo-app .panel.bgcolor td { text-align: left; }
#demo-app .panel.bgcolor table input { text-align: left; }

#demo-app .panel.fgcolor { right: 0; }
#demo-app .panel.fgcolor th { text-align: left; }
#demo-app .panel.fgcolor td { text-align: right; }
#demo-app .panel.fgcolor table input { text-align: right; }

#demo-app #demo-preview {
	margin: 0 auto;
	padding: 35px 0 20px;
	width: 440px;
	border: 4px solid #000;
	text-align: center;
	font-size: 110%;
	font-weight: bold;
	border-radius: 15px;
}
#demo-app #demo-preview strong {
	font-weight: normal;
	font-size: xx-large;
}
#demo-app #demo-links { margin: 40px auto; }


/* Features */

#features-strip { padding: 60px 0 40px 0; }
#features-content,
#features-content h3 { color: #303616; }
#features-containers { width: 100%; position: relative; }
#features-content .feature-container { width: 33.3%; float: left; font-size: 90%; }
#features-content .feature-box {
	width: 220px;
	height: 220px;
	margin: 0 auto;
	background-position: center center;
	background-repeat: no-repeat;
	border-width: 1px;
	border-style: solid;
}
#features-content h3 { font-size: 140%; min-height: 45px; margin: 25px 0px 10px 0px; padding: 0; }
#features-content abbr { border-bottom: 1px dotted #333; }
#features-content .feature-text { margin: 0 10px; }

#feature1-box { background-image: url('icon-no-dependencies.png'); background-color: #AB2567; border-color: #871D4C; }
#feature2-box { background-image: url('icon-cross-browser.png'); background-color: #3399CC; border-color: #297CA6; }
#feature3-box { background-image: url('icon-customizable.png'); background-color: #83AF2C; border-color: #678A23; }


/* Compatibility */

#compat-strip { overflow: hidden; background: #404040; }
#compat-bg { position: absolute; width: 100%; height: 400px; }
#compat-body { position: relative; width: 100%; }
#compat-text,
#compat-text h2,
#compat-text strong { color: #FFF; }
#compat-text h2 { margin: 60px 0 40px 0; font-size: 160%; color: rgba(255,255,255,0.85); }
#compat-text strong { font-weight: bold; }
#compat-text { position: absolute; right: 0; top: 0; width: 360px; font-size: 110%; }
#compat-text .inner { padding: 20px; }
#compat-body,
#compat-text,
#compat-text .bg,
#compat-text .fg { height: 420px; }
#compat-text .bg,
#compat-text .fg { position: absolute; left: 0; top: 0; width: 100%; }
#compat-text .bg {
	background: #000;

	opacity: 0.5;
	filter: alpha(opacity=50); /* IE */
}
#device-drawings { position: absolute; left: 0; top: 0; }
#device-drawings .device-shape {
    border-color: #CCC; /* fallback */
    border-color: rgba(255,255,255,0.5);
}


/* Assistance */

#assistance-strip { padding: 60px 0 40px 0; }
#assistance-content { color: #303616; }
#assistance-content strong { color: #8E204C; }
#assistance-content h2 { margin-bottom: .8em; }
#assistance-content h3 { display: inline; font-size: 100%; font-weight: bold; }
#assistance-enum ul { margin: 0; padding: 0; }
#assistance-enum li { margin: 0; padding: 0; list-style-type: none; margin-bottom: 1em; }

#assistance-description,
#assistance-enum { width: 49.5%; text-align:left; }

#assistance-description { float: left; }
#assistance-enum { float: right; font-size: 90%; }
#assistance-description .descr { padding-right: 1em; }
#assistance-description .scenarios { margin: .8em 0; }


/* Testimonials */

#testimonials-strip { padding: 50px 0 60px 0; background: #8C3857; }
#testimonials-content,
#testimonials-content h2,
#testimonials-content a { color: #FFF; }
#testimonials-content h2 {
	margin-bottom: 30px;
	color: rgba(255,255,255,0.85);
}
#testimonials-list { }
#testimonials-list .testimonial { width: 33.3%; float: left; text-align: left; font-size: 90%; }
#testimonials-list .testimonial-inner { padding: 0 15px; }
#testimonials-list q { font-style: italic; }
#testimonials-list .author { text-align: right; }


/********** ROUNDED CORNERS **********/

#features-content .feature-box {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}


/********** SHADOWS **********/

#installation-strip {
-webkit-box-shadow: 0px 0px 40px 0px rgba(171,178,151,0.85);
-moz-box-shadow: 0px 0px 40px 0px rgba(171,178,151,0.85);
box-shadow: 0px 0px 40px 0px rgba(171,178,151,0.85);
}

#install-seg1,
#install-seg3 {
-webkit-box-shadow: 0px 15px 25px 0px rgba(178,181,165,0.75);
-moz-box-shadow: 0px 15px 25px 0px rgba(178,181,165,0.75);
box-shadow: 0px 15px 25px 0px rgba(178,181,165,0.75);
}

#demo-strip,
#compat-strip {
-webkit-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.85) inset;
-moz-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.85) inset;
box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.85) inset;
}


/********** GRADIENTS **********/

#intro-strip,
#features-strip,
#assistance-strip {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f1f7de+0,cfd9b0+100 */
background: #f1f7de; /* Old browsers */
background: -moz-linear-gradient(top, #f1f7de 0%, #cfd9b0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1f7de), color-stop(100%,#cfd9b0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f1f7de 0%,#cfd9b0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f1f7de 0%,#cfd9b0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f1f7de 0%,#cfd9b0 100%); /* IE10+ */
background: linear-gradient(to bottom, #f1f7de 0%,#cfd9b0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f7de', endColorstr='#cfd9b0',GradientType=0 ); /* IE6-9 */
}