/*------------------ @Reset ------------------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,
kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,
tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
ol,ul{}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
:focus{outline:0;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
.clear{clear:both;line-height:0;font-size:0;}


/*------------------ @Body ------------------*/
body {
	background: #222 url(images/bg.gif) repeat-x 0 0;
	color: #fff;
	font: normal 12px/18px "Lucida Grande", Helvetica, sans-serif;
}

	body.grid {
		background: url(images/bg-grid.gif) repeat 0 0;
	}
	
hr {
	border: 0;
	padding: 0;
	background: url(images/alpha.png) repeat 0 0;
	display: block;
	padding: 0 10px;
	margin-left: -10px;
	-moz-box-shadow: inset 0 0 5px #000, 0 0 1px #444;
	-webkit-box-shadow: inset 0 0 5px #000, 0 0 1px #444;
	box-shadow: inset 0 0 5px #000, 0 0 1px #444;
}
	
h2 {
	font-size: 18px;
	font-weight: normal;
	letter-spacing: -0.01em;
	color: #fff;
	line-height: 18px;
	background: url(images/alpha.png) repeat 0 0;
	display: block;
	padding: 10px;
	margin-bottom: 10px;
	margin-left: -10px;
	-moz-box-shadow: inset 0 0 5px #000, 0 0 1px #444;
	-webkit-box-shadow: inset 0 0 5px #000, 0 0 1px #444;
	box-shadow: inset 0 0 5px #000, 0 0 1px #444;
}

h5 {
	font-weight: normal;
	color: #fff;
	padding-top:15px;
	font-size: 14px;
	line-height: 14px;
	padding-bottom: 10px;
}

.container {
	width: 600px;
	margin: 0 auto;
}

	aside {
		width: 180px;
		float: left;
		padding-top: 100px;
	}
	
	aside h1, aside h1 a {
		width: 180px;
		height: 111px;
		display: block;
	}
	
		aside h1 a {
			background: url(images/logo.png) no-repeat 0 0;
			text-indent: -9999px;
		}

	#appstore {
		background: url(images/appstore.png) no-repeat 0 0;
		width: 218px;
		height: 79px;
		display: block;
		text-indent: -9999px;
		margin: 30px auto;
		margin-left: -23px;
		position: relative;
	}
	
		#appstore:hover { background-position: 0 -79px; }

/*------------------ @Nav ------------------*/
nav {
	width: 173px;
	height: 201px;
	background: url(images/nav.png) no-repeat 0 0;
	margin: 35px auto 0 auto;
}

	nav li, nav li a {
		display: block;
	}

	nav li a {
		text-decoration: none;
		text-transform: uppercase;
		color: #c2c1c1;
		padding: 17px 0 15px 55px;
		background: url(images/icons.png) no-repeat 15px 0;
	}
	
		nav li#about a { background-position: 15px 17px; }
		nav li#apps a { background-position: 15px -35px; }
		nav li#news a { background-position: 15px -85px; }
		nav li#contact a { background-position: 15px -135px; }
		
		nav li a:hover {
			color: #fff;
		}

/*------------------ @Featured ------------------*/
.featured {
	float: left;
}

	#viewport img {
		float: left;
		display: block;
		width:100%;
		height:100%;
	}

	#screenshots {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
		#screenshots li, #screenshots li a {
			float: left;
			display: block;
			width: 20px;
			height: 20px;
		}
		
		#screenshots li {
			margin-right: 10px;
		}
		
		#screenshots li a {
			background: url(images/dots.png) no-repeat 0 0;
			text-indent: -9999px;
		}
		
			#screenshots li a.current { background-position: 0 -20px; }

	#ribbon {
		width: 192px;
		height: 192px;
		background: url(images/featured.png) no-repeat 0 0;
		display: block;
		text-indent: -9999px;
		position: absolute;
		top: 0;
		right: 0;
	}
	
	#bezel {
		position: relative;
	}
	
		#bezel h2#appname {
			position: absolute;
			width: 100%;
			top: 0;
			left: 0;
			text-align: center;
			font-size: 18px;
			font-weight: normal;
			margin-top: -20px;
			letter-spacing: -0.01em;
			display: none;
		}

	#ipad .featured {
		width: 477px;
		padding-top: 50px;
		padding-left: 40px;
	}
	
	#ipad #bezel {
		width: 484px;
		height: 622px;
		background: url(images/ipad.png) no-repeat 0 0;
	}
	
	#ipad #ribbon {
		right: 13px;
		margin-top: -9px;
	}

	#ipad #viewport {
		background: #000;
		position: absolute;
		top: 62px;
		left: 86px;
		width: 318px;
		height: 423px;
	}
	
	#iphone .container {
	}
		
	#iphone .featured {
		width: 347px;
		padding-top: 50px;
		padding-left: 70px;
	}
	
	#iphone #bezel {
		width: 286px;
		height: 625px;
		background-size: 286px 625px;
		background-image: url(images/watch-bezel.png);
		background-repeat: no-repeat;
	}
	
	#iphone #ribbon {
		right: 0;
		margin-right: -12px;
		margin-top: -8px;
	}
	
	#iphone #viewport {
		background: #000;
		position: absolute;
		top: 212px;
		left: 65px;
		width: 156px;
		height: 195px;
	}
	
		#iphone #screenshots {
			position: absolute;
			bottom: 40px;
			left: 50%;
			margin-left: -69px;
		}
		
		#ipad #screenshots {
			position: absolute;
			bottom: 40px;
			left: 50%;
			margin-left: -36px;
		}
		
		#mac #screenshots {
			position: absolute;
			bottom: 0;
			left: 50%;
			margin-left: -55px;
			margin-bottom: -30px;
		}
	
	#mac .container {
		width: 870px;
	}
	
	#mac .featured {
		width: 640px;
		padding-left: 50px;
		padding-top: 50px;
		padding-bottom: 50px;
	}
	
	#mac #bezel {
		margin-top: 10px;
		width: 640px;
		height: 490px;
		background: url(images/mac.png) no-repeat 0 bottom;
	}
	
	#mac #ribbon {
		right: 0;
		top: 0;
		margin-right: -19px;
	}

	#mac #viewport {
		background: #000;
		position: absolute;
		top: 42px;
		left: 0px;
		width: 638px;
		height: 448px;
	}
	
/*-------------- @Content ---------------*/
.content {
	width: 467px;
	padding-top: 177px;
	padding-left: 40px;
	float: left;
	font-size: 14px;
	line-height: 21px;
	color: #ccc;
	padding-right: 10px;
}

	.content p {
		padding-bottom:15px;
	}

	.content a {
		color: #fff;
	}
	
	.content .app {
		width: 430px;
	}
	
	.content .app:nth-child(even) {
		margin-left: 0px;
	}


/*------------------ @Apps ------------------*/
.apps, .features {
	width: 600px;
	margin: 0 auto;
	clear: both;
}

	.app {
		text-decoration: none;
		display: block;
		overflow: hidden;
		padding: 10px;
		-moz-border-radius: 10px;
		width: 300px;
		height: 120px;
		float: left;
		margin-bottom: 30px;
	}
	
		.app h3 {
			display: block;
			color: #fff;
			text-transform: uppercase;
			font-size: 18px;
			font-weight: normal;
			padding-bottom: 5px;
			padding: 10px 0 5px 130px;
		}
		
		.app p {
			display: block;
			padding-left: 130px;
			color: #aaa;
			font-size: 11px;
			line-height: 14px;
		}
		
		.app:hover {
			background: url(images/alpha.png) repeat 0 0;
			-moz-box-shadow: inset 0 0 5px #000, 0 0 1px #444;
			-webkit-box-shadow: inset 0 0 5px #000, 0 0 1px #444;
			box-shadow: inset 0 0 5px #000, 0 0 1px #444;
		}
		
			.app:hover p { color: #fff; }
		
		.app:nth-child(even) {
			margin-left: 60px;
		}
	
	.app img {
		border: none;
		float: left;
	}
	
	a:link {
		color: #fff;
	}
	a:visited {
		color: #fff;
	}
	a:hover {
		color: #eee;
	}

/*------------------ @About ------------------*/
.image {
	background: url(images/alpha.png) repeat 0 0;
	-moz-box-shadow: inset 0 0 5px #000, 0 0 1px #444;
	-webkit-box-shadow: inset 0 0 5px #000, 0 0 1px #444;
	box-shadow: inset 0 0 5px #000, 0 0 1px #444;
	padding: 10px;
	float: right;
	margin: 10px 10px 10px 20px;
}

	.image img {
		border: 1px solid #000;
	}

/*-------------- @App Features ---------------*/
.features p {
	font-size: 14px;
	line-height: 21px;
	padding-bottom: 15px;
	color: #ccc;
}

	.features ul, .content ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
		.features ul li, .content ul li {
			color: #fff;
			display: block;
			height: auto;
			padding-bottom: 5px;
			padding-left: 50px;
			background: url(images/infinity.gif) no-repeat 20px 6px;
		}
		
	.column {
		width: 50%;
		float: left;
		overflow: hidden;
	}

/*-------------- @Contact ---------------*/
form p { 
	position: relative;
}

label  { 
	position: absolute; 
	top: 5px; 
	left: 10px;
	font-size: 12px;
	color: #444;
}

input, textarea, select {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #000;
	display: block;
	padding: 7px;
	-moz-box-shadow: inset 2px 2px 3px #666;
	-webkit-box-shadow: inset 2px 2px 3px #666;
	box-shadow: inset 2px 2px 3px #666;
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding-box;
	width: 444px;
	font: normal 12px/18px "Lucida Grande", Helvetica, sans-serif;
	background: #aaa;
	color: #000;
}

	textarea {
		height: 170px;
	}
	
	select {
		width: 460px;
	}
	
.button {
	display: block;
	border: 0;
	padding: 0;
	margin: 0;
	background: url(images/button.png) no-repeat 0 0;
	color: #fff;
	width: 149px;
	height: 43px;
	cursor: pointer;
	font-size: 14px;
	line-height: 14px;
	margin-left: -4px;
}

	.button:hover { background-position: 0 -43px; }
	.button:active { background-position: 0 -86px; }

/*-------------- @Support/FAQ ---------------*/

dl {
	border-top: 1px solid #000;
	margin-right: 10px;
}

	dl dt {
		color: #fff;
		padding-top: 15px;
		padding-bottom: 5px;
	}

	dl dd {
		font-size: 12px;
		padding-left: 10px;
		padding-right: 10px;
		line-height: 18px;
	}

/*-------------- @Post ---------------*/
.meta {
	font-size: 11px;
	display: block;
	margin-right: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #000;
	margin-bottom: 10px;
}

	.meta a, .tag {
		background: #000;
		text-decoration: none;
		-moz-webkit-border-radius: 30px;
		   -moz-border-radius: 30px;
		        border-radius: 30px;
		display: inline-block;
		-moz-box-shadow: inset 0 0 5px #000, 0 0 1px #444;
		-webkit-box-shadow: inset 0 0 5px #000, 0 0 1px #444;
		box-shadow: inset 0 0 5px #000, 0 0 1px #444;
		padding: 0 8px;
	}
	
	.tag {
		float: right;
		color: #fff;
		font-size: 11px;
		display: block;
		margin-top: 5px;
		margin-left: 5px;
		color: #ccc;
	}
	
	#tags {
		padding-top:30px;
	}
	
.post p {
	font-size: 12px;
	line-height: 18px;
	padding-right: 10px;
}
	
.post ul {
	padding-bottom: 15px;
}

/*------------------ @Footer ------------------*/
footer {
	text-align: center;
	clear: both;
	padding: 30px 0;
	font-size: 11px;
	color: #666;
}

/*------------------ @Footer ------------------*/

#appicon {
	padding-left: 40px;
	padding-top: 20px;
	/*padding-bottom: 20px;*/
}