body {
	background: url(images/ornate-bg.png) repeat 0 0;
	font: normal 12px/18px "Lucida Grande", "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #fff;
}

#iphone-small {
	background: url(images/iphone-small.png) no-repeat 0 0;
	width: 278px;
	height: 192px;
	display: block;
	text-indent: -9999px;
	position: absolute;
	right: 0;
	bottom: 0;
	margin-bottom: -15px;
	z-index: 10001;
}
	#iphone-small:hover {
		background-position: 0 -192px;
	}
	
#iphone-ribbon {
	position: absolute;
	top: 0;
	left: 0;
	width: 208px;
	height: 208px;
	background: url(images/iphone-ribbon.png) no-repeat 0 0;
	text-indent: -9999px;
	display: block;
}

/*------------------ @global ------------------*/
#container {
	width: 100%;
	height: 100%;
}

.container {
	width: 900px;
	margin: 0 auto;
	overflow: hidden;
}

a {
	color: #fff;
}

h2 {
	font-size: 18px;
	padding-bottom: 20px;
}

h2 a {
	color: #EA554E;
}

	h2 a:hover { color: #fff;}

/*------------------ @header ------------------*/
#header {
	width: 100%;
	height: 454px;
	background: url(images/header-bg.png) repeat-x 0 0;
}

	#header .container {
		overflow: hidden;
		background: url(images/header-container-bg.png) no-repeat left top;
		height: 454px;
	}
	
	#subpage #header {
		height: 213px;
		background: url(images/header-subpage-bg.png) repeat-x 0 0;
	}
	
		#subpage #header .container { 
			background: url(images/header-subpage-container.png) no-repeat right bottom; 
			height: 200px; 
		}
		#subpage #header #tagline { 
			display: none;
		}
		#subpage #header #get-started { float: right; margin-top: 63px; }	

	a#dev-blog {
		background: url(images/dev-blog.png) no-repeat 0 0;
		width: 81px;
		height: 36px;
		display: block;
		text-indent: -9999px;
		margin-top: 7px;
	}

	a#twitter-follow {
		background: url(images/twitter-icon.png) no-repeat 0 0;
		width: 191px;
		height: 36px;
		display: block;
		text-indent: -9999px;
		margin-top: 7px;
	}

	/*----- @nav -----*/
	ul#nav {
		float: right;
		list-style: none;
		margin: 0 20px 0 0;
		padding: 12px 0 0 50px;
	}
		ul#nav li {
			margin-right: 10px;
		}

		ul#nav li,
		ul#nav li a,
		ul#nav li a span {
			float: left;
			display: block;
			line-height: 12px;
		}

		ul#nav li a {
			text-decoration: none;
			color: #B5DCDF;
			padding-left: 10px;
		}

			ul#nav li a span {
				padding: 6px 10px 6px 0;
			}

			ul#nav li.active a {
				background: url(images/app/nav-active-left.gif) no-repeat left 0;
				color: #fff;
			}

				ul#nav li.active a span {
					background: url(images/app/nav-active.gif) no-repeat right 0;
					color: #fff;
				}

			ul#nav li a:hover,
			ul#nav li a:hover span { 
				color: #fff; 
				text-decoration: underline;
			}
			
			/*------------------ @supernav ------------------*/
			ul#supernav {
				float: right;
				list-style: none;
				margin: 0;
				padding: 14px 0 0 0;
			}

				ul#supernav li,
				ul#supernav li a {
					float: left;
					display: block;
					line-height: 12px;
				}

					ul#supernav li {
						background: url(images/app/supernav-separator.png) no-repeat right center;
						padding: 4px 12px 4px 10px;
					}

						ul#supernav li.last {
							background: none;
							padding-right: 0;
							border-right: 0;
						}

					ul#supernav li a {
						text-decoration: none;
						color: #fff;
					}

						ul#supernav li a:hover { 
							color: #fff; 
							text-decoration: underline;
						}

					ul#supernav li a#beta {
						color: #D6D6AA;
					}
		
	/*----- @splash -----*/
	#splash {
		clear: both;
		padding-top: 85px;
		position: relative;
		height: 313px;
	}
		#header {
		}
		#header h1,
		#header h1 a {
			display: block;
			width: 285px;
			height: 165px;
			
		}
		
			#header h1 {
				clear: left;
				padding-top: 10px;
				padding-bottom: 10px;
			}
		
			#header h1 a {
				text-indent: -9999px;
				background: url(images/logo.png) no-repeat 0 0;
			}
			
		#subpage #header h1,
		#subpage #header h1 a {
			width: 397px;
			height: 109px;
		}
			#subpage #header h1 {
				padding-top: 30px;
			}
			#subpage #header h1 a {
				background: url(images/logo-subpage.png) no-repeat 0 0;
			}
			
		#features {
			clear: both;
			padding-top: 20px;
		}
			
		#features .container {
			height: 257px;
			padding-bottom: 20px;
			background: url(images/features.png) no-repeat 0 0;
		}
		
			.feature-item {
				float: left;
				width: 200px;
				padding: 0 10px;
				padding-top: 123px;
				padding-right: 20px;
			}
			
				.feature-last {
					padding-right: 0;
				}
				
				.feature-item h2 {
					font-size: 14px;
					padding-top: 5px;
					padding-bottom: 0;
				}
			
				.feature-item h3 {
					color: #aed7db;
					font-weight: normal;
					font-size: 11px;
					padding-top: 5px;
				}
				
		#screenshots {
			background: url(images/screenshots.png) no-repeat 0 bottom;
			width: 578px;
			height: 307px;
			display: block;
			text-indent: -9999px;
			position: absolute;
			right: 0;
			bottom: 0;
		} 

		#tagline {
			width: 278px;
			height: 50px;
			background: url(images/tagline.png) no-repeat 0 0;
			display: block;
			clear: left;
			text-indent: -9999px;
			margin-left: 0;
			padding-bottom: 20px;
		}
		
		#get-started,
		#send {
			width: 160px;
			height: 43px;
			background: url(images/get-started.gif) no-repeat 0 0;
			display: block;
			clear: left;
			text-indent: -9999px;
			margin-left: 43px;
			border: 0;
			padding: 0;
			cursor: pointer;
		}
		
			#send { 
				background: url(images/send.png) no-repeat 0 0; margin-left: 0;
			}
		
			#get-started:hover,
			#send:hover {
				background-position: 0 -43px;
			}
			
			#get-started:active,
			#send:active {
				background-position: 0 -86px;
			}
				
/*------------------ @get-updates ------------------*/
#get-updates {
	clear: both;
	width: 100%;
	overflow: hidden;
	padding-top: 19px;
}

	#get-updates p {
		color: #ade5ea;
	}
	
	#get-updates form {
		float: right;
		width: 381px;
		height: 200px;
		padding-left: 0;
	}
	
		#get-updates .form {
			width: 381px;
			height: 41px;
			background: url(images/update-form.png) no-repeat 0 0;
		}
		
			#get-updates .form input {
				background: none;
				border: 0;
				font-size: 18px;
				line-height: 18px;
				color: #fff;
				display: block;
				float: left;
				width: 245px;
				height: 33px;
				padding: 8px 0 0 15px;
				color: #67cbd5;
			}
			
			#get-updates .form button {
				width: 111px;
				height: 41px;
				display: block;
				float: left;
				border: 0;
				background: none;
				text-indent: -9999px;
				cursor: pointer;
			}
			
/*------------------ @video/@twitter ------------------*/
#middle-stripe {
	background: url(images/middle-stripe.png) repeat-x 0 0;
	height: 336px;
	padding: 32px 0;
}
#video {
	width: 474px;
	height: 320px;
	float: left;
	border: 3px solid #04343b;
}

#twitter-box {
	float: left;
	width: 381px;
	padding-left: 39px;
}

	#twitter-box h2 {
		padding-top: 15px;
	}

#twitter ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#twitter li {
	display: block;
	padding: 10px;
	font-size: 13px;
	line-height: 20px;
	background: url(images/stripes-bg.png) repeat 0 0;
	margin-bottom: 5px;
	color: #ADE5EA;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

#twitter li a { color: #fff;}

/*------------------ @tour ------------------*/
#tour {
	padding: 20px 0;
}

.tour-feature {
	clear: both;
	overflow: hidden;
	background: url(images/stripes-bg.png) repeat 0 0;
	padding: 10px;
	margin-bottom: 10px;
	line-height:23px;
	text-align:center;
	margin:0 auto;
	font-size:14px;
}

	.tour-feature img {
		border: 10px solid #00292F;
		-moz-border-radius: 5px;
		margin:10px auto;
	}
	
	.tour-feature p {
		color: #ADE5EA;
		width: 770px;
		margin:0 auto;
		text-align:center;
	}
	.tour-feature p.text {
		width:600px;
	}
	
	.tour-feature h2 {
		padding-top: 15px;
		margin:0 auto;
	}

	.left img {
		float: left;
		margin-right: 30px;
	}
	
	.right img {
		float: right;
		margin-left: 30px;
	}
	
#pricing {
	padding: 20px 0;
}

	#pricing-table {
		width: 100%;
		margin-top: 20px;
		margin-bottom: 40px;
	}

	#pricing-table thead th {
		font-size: 24px;
		font-weight: normal;
	}
	
	#pricing-table td,
	#pricing-table th {
		padding: 10px;
		text-align: center;
		font-size: 14px;
		font-weight: normal;
	}
	
	#pricing-table td {
		color: #dbf9fc;
	}
	
	#pricing-table td,
	#pricing-table tbody th {
		background: url(images/stripes-bg.png) repeat 0 0;
	}
	
		#pricing-table thead th.green-cells {
			background: #1E8F9A url(images/stripes-bg.png) repeat 0 0;
			
		}
	
		#pricing-table tbody th {
			text-align: left;
			width: 150px;
			color: #ADE5EA;
			font-size: 13px;
			padding-left:10px;
		}
	
	#pricing-table .green-cells {
		background-color: #1E8F9A;
	}
	
	#pricing-table tbody td.price {
		font-size: 24px;
		font-weight: normal;
		padding: 20px 10px;
		letter-spacing: -1px;
	}
	
		#pricing-table tbody td.price sup {
			height: 0;
			line-height: 1;
			vertical-align: baseline;
			position: relative;
			font-size: 14px;
		}

		sup {
			bottom: 1ex;
		}

	
	#pricing-table td.unlimited {
		font-style: italic;
	}
	
	#pricing-table thead .green-cells {
		-moz-border-radius-topleft: 5px;
		-moz-border-radius-topright: 5px;
		-webkit-border-radius-topleft: 5px;
		-webkit-border-radius-topright: 5px;
	}
	
	#pricing-table tfoot .green-cells {
		-moz-border-radius-bottomleft: 5px;
		-moz-border-radius-bottomright: 5px;
		-webkit-border-radius-bottomleft: 5px;
		-webkit-border-radius-bottomright: 5px;
	}
	
	.choose-plan {
		display: block;
		text-indent: -9999px;
		background: url(images/choose-plan.png) no-repeat 0 0;
		height: 43px;
		width: 128px;
		margin: 0 auto;
	}
	
		.choose-plan:hover {
			background-position: 0 -43px;
		}
		
		.choose-plan:active {
			background-position: 0 -86px;
		}
		
	.dot {
		display: block;
		margin: 0 auto;
		text-indent: -9999px;
		background: url(images/dot.png) no-repeat 0 0;
		width: 19px;
		height: 19px;
	}

	.x-no {
		display: block;
		margin: 0 auto;
		text-indent: -9999px;
		background: url(images/x-no.png) no-repeat 0 0;
		width: 11px;
		height: 10px;
	}

.testimonial-contact-info {
	font-size:13px;
	margin-top:8px;
	color:#50B5B7;
	font-style:italic;
}
.testimonial-contact-info a, a.contact-info {
	color:#50B5B7;
}
.stripes {	
	background: url(images/stripes-bg.png) repeat 0 0;
	padding: 10px;
}

	.stripes p {
		color: #ADE5EA;
	}
	
.large-text {
	font-size:16px;
}
.icon-left {
	float: left;
	width: 428px;
	overflow: hidden;
	height: 140px;
	margin-bottom: 2px;
	
}
.icon-left a {
	color:#50B5B7;
}

	.icon-left h2 {
		padding-top: 10px;
		padding-bottom: 10px;
		color:#FFF;
	}
	
	.icon-left img {
		float: left;
		margin-right: 20px;
	}

       .icon-large {
                width: 550px;
        }
        .icon-small {
                width: 306px;
        }

	
/*------------------ @iphone tour ------------------*/
#iphone {
	padding: 20px 0;
}

h1.giveaway {
	text-indent: 0;
	font-size: 30px;
	line-height: 30px;
	font-weight: normal;
	padding-bottom: 10px;
	letter-spacing: -1px;
	margin-bottom: 10px;
}

h1.giveaway span {
	background: #D53A34;
	padding: 0 3px;
}
	
/*------------------ @privacy/@terms ------------------*/
address {
	font-style: italic;
	display: block;
	padding-bottom: 10px;
	padding-left: 10px;
}

#privacy, #terms {
	padding: 20px 0;
}

#privacy p, #terms p {
	padding-bottom: 10px;
	color: #ADE5EA;
}

#privacy ul, #terms ul {
	color: #DFFDFF;
	padding-bottom: 10px;
}

#privacy h3, #terms h3 {
	padding-bottom: 10px;
	font-size: 14px;
}

.legal-section {
	clear: both;
	overflow: hidden;
	background: url(images/stripes-bg.png) repeat 0 0;
	padding: 10px;
	padding-bottom: 0;
	margin-bottom: 10px;
}	

/*------------------ @contact ------------------*/
.contact-error {
	float: left;
	padding-top: 5px;
	width: 185px;
	text-align: right;
	color: #D93C34;	
}
#contact p {
	clear: both;
}

#contact label {
	display: block;
	padding-bottom: 5px;
	padding-top: 5px;
	width: 130px;
	float: left;
}



#contact .field, #contact input, #contact textarea {
	border: 0;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	font-size: 12px;
	padding: 5px;
	font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Arial, sans-serif;
	float: left;
	width: 300px;
	background: #04373E;
	color: #fff;
	clear: both;
}

select.field { width: 310px;}
textarea.field { height: 140px;}

.input-wrap, .wpcf7-form-control-wrap {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 3px;
	background: #00292F;
	float: left;
}


.green-border {
	background: #85CF4D;
	border: 5px solid #85CF4D;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	clear: both;
	margin-bottom: 10px;
}

	.green-border .inside {
		background: #C8FF9F;
		border: 1px solid #66BF23;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		color: #142F00;
		padding: 10px;
	}
			
/*------------------ @footer ------------------*/		
#footer {
	font-size: 11px;
	color: #84c2c7;
	padding-bottom: 20px;
}

	#footer a {
		color: #b3e1e5;
	}
	
	#links {
		text-align: center;
		padding-top: 20px;
	}

	@media screen and (-webkit-min-device-pixel-ratio:0){
		#header .container { background: none; }
	}