@import url("reset.css");

html, body
{
	background-color: #010101;
	color: #acafb7;
	font: normal 12px/15px Tahoma, Arial, sans-serif;
	letter-spacing: .2px;
}
#header
{
	background: #2b2c31 url(../images/bg-2.jpg) repeat-x left top;
	height: 521px;
	overflow: hidden;
}
	#header #header-banner
	{
		height: 521px;
		background: url(../images/banner.jpg) no-repeat center top;
		text-align:center;
	}
	#header #header-demo-link
	{
		display:block;
		width:189px;
		height:335px;
		margin:0px auto;
		position:relative;
		right:305px;
		top:106px;
	}
#body
{
	clear: both;
	background: #37393f url(../images/bg-1.jpg) repeat left top;
	padding: 0 0 20px 0;
}
	#body .container
	{
		background: url(../images/content-sep-bg.jpg) no-repeat 1px 0;
	}
	#body #body-left
	{
		float: left;
		width: 240px;
		margin-right: 1px;
	}
		#body #body-left a.appstore
		{
			display: block;
			width: 201px;
			height: 0;
			padding-top: 62px;
			overflow: hidden;
			margin: 15px auto;
			background: url(../images/button-appstore.jpg) no-repeat left top;
		}
			#body #body-left a.appstore:hover
			{
				background-position: left -62px;
			}
		#body #body-left a.watchdemo
		{
			display: block;
			width: 201px;
			height: 0;
			padding-top: 62px;
			overflow: hidden;
			margin: 15px auto;
			background: url(../images/watchdemo.jpg) no-repeat left top;
		}
			#body #body-left a.watchdemo:hover
			{
				background-position: left -62px;
			}
	#body #body-content
	{
		float: left;
		width: 537px;
		padding: 10px;
		position: relative;
		min-height: 200px;
	}
		/*#body #body-content*/ p.extra
		{
			position: absolute;
			top: 0px;
			left: 20px;
			height: 0;
			padding-top: 97px;
			width: 200px;
			background: url(../images/bubble-bottom.jpg) no-repeat left top;
			overflow: hidden;
		}
		#body #body-content ul.features
		{
		
		}
			#body #body-content ul.features li
			{
				padding: 27px 0 0 105px;
				margin-top: -10px;
			}
			#body #body-content ul.features li.feature-record { background: url(../images/icon-step1.png) no-repeat left top; margin-top: 0;}
			#body #body-content ul.features li.feature-import { background: url(../images/icon-step1b.png) no-repeat left top; margin-bottom: 20px; }
			#body #body-content ul.features li.feature-cut { background: url(../images/icon-step2.png) no-repeat left top; }
			#body #body-content ul.features li.feature-arrange { background: url(../images/icon-step3.png) no-repeat left top; }
			#body #body-content ul.features li.feature-share { background: url(../images/icon-step4.png) no-repeat left top; }
			#body #body-content ul.features li h3
				{
					display: block;
					height: 0;
					padding-top: 29px;
					overflow: hidden;
				}
				#body #body-content ul.features li.feature-record h3 { background: url(../images/title-record.png) no-repeat left top; }
				#body #body-content ul.features li.feature-import h3 { background: url(../images/title-import.png) no-repeat left top; }
				#body #body-content ul.features li.feature-cut h3 { background: url(../images/title-cut.png) no-repeat left top; }
				#body #body-content ul.features li.feature-arrange h3 { background: url(../images/title-arrange.png) no-repeat left top; }
				#body #body-content ul.features li.feature-share h3 { background: url(../images/title-share.png) no-repeat left top; }
				
				#body #body-content ul.features li.requirements h3 { padding-top: 20px; background: url(../images/title-requirements.png) no-repeat left top; }
		#body #body-content ul.features li ul
		{
			padding: 0;
			margin: 0;
		}
			#body #body-content ul.features li ul li
			{
				padding: 0 0 0 15px;
				margin: 3px 0;
				background: url(../images/bullet-circle.png) no-repeat 2px 4px;
			}
				#body #body-content ul.features li ul li.tip, #body #body-content ul.features li ul li.note
				{
					color:#737680;
					background: url(../images/bullet-star.png) no-repeat 1px 3px;
				}
					#body #body-content ul.features li ul li.tip b, #body #body-content ul.features li ul li.note b
					{
						font-weight: normal;
						color: #eab912;
					}
					

#twitter .right, #contact .right {
	padding-left:357px;
	width:425px;
}

#twitter .left, #contact .left {
	position:absolute;
	top:0px;
	left:265px;
	width:80px;
	text-align:center;
	height:100%;
}

#twitter {
	background: url(../images/shadow-1.jpg) repeat-x left top;
	padding-top:7px;
}
	#twitter .inner {
		background: url(../images/bg-3.jpg) repeat left top;
		padding-top:18px;
		padding-bottom:45px;
	}
	#twitter .left {
		background: url(../images/twitter-bird.png) no-repeat center top;
	}
		#twitter .left a {
			background: url(../images/button-follow.png) no-repeat center top;
			display:block;
			text-decoration:none;
			height:20px;
			width:100%;
			position:absolute;
			bottom:0px;
			left:0px;
		}
			#twitter .left a:hover
			{
				background-position: center -20px;
			}
	#twitter h3 {
		background: url(../images/title-twitter.png) no-repeat left top;
		padding-bottom:15px;
	}
	#twitter #twitter-status {
		border-top:1px solid #333;
		border-bottom:1px solid #333;
		padding:11px 0px;
		line-height:1.5em;
	}
	#twitter #twitter-status span {
		color:#64676D;
	}
	#twitter #twitter-status a {
		color:#00b4fe;
		text-decoration:none;
	}
	#twitter #twitter-status a:hover {
		text-decoration:underline;
	}
#contact {
	background-color: #101213;
	background: url(../images/shadow-2.jpg) repeat-x left top;
	padding-top:7px;
}
	#contact .inner {
		background: url(../images/bg-4.jpg) repeat left top;
		padding-top:18px;
		padding-bottom:45px;
	}
	#contact .left {
		background: url(../images/contact.jpg) no-repeat center 30px;
	}
		#contact .left a {
			background: url(../images/button-submit.png) no-repeat center top;
			display:block;
			text-decoration:none;
			height:20px;
			width:100%;
			position:absolute;
			bottom:0px;
			left:0px;
		}
			#contact .left a:hover
			{
				background-position: center -20px;
			}
	#contact h3 {
		background: url(../images/title-contact.png) no-repeat left top;
		padding-bottom:15px;
	}
	#contact input, #contact textarea {
		border:1px solid #333;
		background-color: #0A0B0C;
		padding:5px;
		width:188px;
		color:white;
		resize:none;
		font-family:inherit;
		font-size:inherit;
		font-weight:inherit;
	}
	#contact #id_name {
		margin-left:20px;
	}
	#contact #id_message {
		width:408px;
		height:60px;
		margin-top:20px;
		overflow:auto;
		display:block;
	}
	
	#contact #contact-loading, #contact #contact-after, #contact #contact-error {
		display:none;
		text-align:left;
		padding-bottom:14px;
		font-size:1.2em;
	}
	#contact-form label.error {
		position:absolute;
		left:0px;
		top:0px;
		width:0px;
		height:0px;
		display:none;
		visibility:hidden;
	}
	#contact-form label.error[for="field"] {
		position:absolute;
		left:450px;
		top:-3px;
		visibility:visible;
		width:auto;
		height:auto;
		padding:3px;
		color:#eab912;
	}
	#contact input.error, #contact textarea.error {
		border: 1px solid #eab912;
	}

#footer
{
	clear: both;
	background-color: #010101;
}
	#footer p
	{
		color: #5d5f65;
		padding: 15px;
		font-size: 11px;
		text-align: left;
		position:relative;
		height:35px;
	}
	#footer #follow-on-twitter
	{
		position:absolute;
		left:59px;
		top:19px;
	}
	#footer #copyright
	{
		position:absolute;
		left:357px;
		top:25px;
	}

#watchdemo-content {
	background-color:#262b2c;
	padding:15px;
	border:1px solid #414141;
	display:none;
}
#watchdemo-content .inner {
	border:2px solid #414141;
}
#watchdemo-content .video {
	width:640px;
	height:360px;
}

.container
{
	width: 798px;
	margin: 0 auto;
	position:relative;
}
/*.png { behavior: url("iepngfix.htc")}*/

.watermark {
   color: #999 !important;
}
br.spacer {
	clear:both;
}

#simplemodal-container a.modalCloseImg {
	background:url(../images/x.png) no-repeat; /* adjust url as required */
	width:38px;
	height:39px;
	display:inline;
	z-index:3200;
	position:absolute;
	top:-15px;
	right:-18px;
	cursor:pointer;
}