/*
* Skeleton V1.1
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 8/17/2011
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */


/* #Site Styles
================================================== */
	
	body {
		background-image: url(../images/contentback.jpg);
		background-position: 50% 200px;
		background-repeat:  repeat-x;
	}

	#header {
		height: 200px;
		background:transparent url(../images/headerglow.png) no-repeat 50% 0%;
		background-size: 100% 200px;
	}
	

	#logo h1 {
		display: block;
		text-indent: -9999px;
		text-align: left;
		margin-top: 40px;
	}

	h2 {
		font-family: "Segoe SemiBold", Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
		font-size: 28px;
		line-height: 34px;
		margin-bottom: 20px;
	}
	
	#contentcontainer {
		margin-top: 20px;
	}

/* #Page Styles
================================================== */

	#header #strapline p {
		font-size: 28px;
		line-height: 34px;
		margin-top: 40px;
		margin-bottom: 0px;
		font-family: "Segoe SemiBold", Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	}

/* Phone screenshot Slider */
	#phonescreens {
		background:transparent url(../images/phonebackground.png) no-repeat;
		height:800px;
		/*width: 340px;*/
		margin-top: -205px;
	}

	#phonescreens #slider {
		margin: 56px 50px;
		visibility:hidden;
	}
	
	#slider ul, #slider li {
		margin:0;
		padding:0;
		list-style:none;
		}

	#slider li { 
		width:240px;
		height:400px;
		overflow:hidden; 
		}	

/* Download Button */

	p.downloadlink  {
		display: block;
		margin: 180px auto 0px;
		text-align: center;
	}
	
	p.downloadlink  a {
		display:inline-block;
		text-align: left;
		width: 165px;
		height: 54px;
		text-indent: -9999px;
		background:transparent url(../images/download.png) no-repeat;
	}
	
		
/* Tweet styles */
		
	div.tweet .tweet_list li {
		margin-bottom: 20px;
	}
		
	div.tweet span.tweet_time {
		display: block;
		text-align:right;
		margin-top:5px;
	}

	
/* App Features */

	ul.featurelist li {
		line-height: 25px;
		padding-left: 30px;
		background:transparent url(../images/listcircle.png) no-repeat;
	}
/* Quotes */
	
	blockquote.user_quote {
		border-left: none;
		padding: 0;
		margin-top: 50px;
	}

	blockquote.user_quote p {
		text-align:center;
		margin: 0 0 10px
	}

	blockquote.user_quote cite {
		text-align:right;
	}


	
/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {

		body {
			background-position: 50% 150px;
			font: 14px/18px Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
		}

		#header {
			height: 150px;
		}

		#header #strapline p {
			font-size: 24px;
			line-height: 28px;
		}
	
		#phonescreens {
			background:none;
			height:800px;
			/*width: inherit;*/
			margin-top: -150px;
		}
		
		#phonescreens #slider {
			margin: 20px 14px;
			-moz-box-shadow: 0px 0px 3px #333333;
			-webkit-box-shadow: 0px 0px 3px #333333;
			box-shadow: 0px 0px 3px #333333;
		}

		p.downloadlink  {
			margin-top: 0px;
		}

		ul.featurelist li {
			line-height: 20px;
			padding-left: 25px;
			background-size: 20px 20px;
		}
		
		blockquote.user_quote p {
			font: 14px/18px Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
		}
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {

		div.tweet ul.tweet_list {
			margin-bottom: 0px;
		}
		div.tweet ul.tweet_list li {
			margin-bottom: 10px;
		}

		h2 {
			font-size: 24px;
			line-height: 28px;
			margin-bottom: 10px;
		}

	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
	
		#header #logo {
			width: 180px;
		}

		#header #strapline {
			width: 240px;
		}

		#header #strapline p {
			margin-left:20px;
			font-size: 20px;
			line-height: 24px;
		}

		#phonescreens {
			background:transparent url(../images/phonebackground.png) no-repeat;
			/*width: 340px;*/
			margin-top: 30px;
			background-position: 50% 0%;
		}

		#phonescreens #slider {
			margin: 56px 90px;
		}
		
		p.downloadlink  {
			margin: 180px auto 0px;
		}
		
		#features {
			margin-top: -50px;
		}

	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
	
		#header {
			height: auto;
		}
		
		#header #logo h1 {
			margin: 40px 0px 0px;;
		}
		
		#header #strapline p {
			color: #666;
			margin-top:30px;
		}
		
		#phonescreens {
			height: auto;
			margin-bottom: 30px;
			margin-top: 0px;
		}
		#phonescreens #slider {
			margin: 56px 30px;
		}
	}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/