/* State I'm In - public layout styles
	Author: Teddy Wing
	Created: July 13, 2009
*/

body {
	background-color: #012B47; /* #00121F *//* 000C14 */
	font-family: Helvetica, Arial, sans-serif;
	color: #181818;
	margin: 0;
}


/* --- Header --- */
#header {
	height: 89px;
/*	width: 368px;*/
	width: 751px;
	margin: 35px auto 10px auto;
}
#header img { border: none; }


/* --- Navigation --- */
#public-navigation {
	color: #f1f1f1;
	font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, serif;
	font-weight: 300;
	
	width: 751px;
	margin: 0 auto 0 auto;
}
#public-navigation ul {
	list-style-type: none;
	float: right;
	margin-top: -48px;
	padding-right: 10px;
}
#public-navigation ul li { display: inline; padding-left: 10px; }

/* anchor styles */
#public-navigation ul li a { color: #f1f1f1; text-decoration: none; }
#public-navigation ul li a:hover { color: #fff; border-bottom: 3px solid; padding-bottom: 5px; }
#public-navigation ul li a:active { color: #C9C9C9; }


/* --- Content --- */
#content {
	background-color: #F1F1F1;
	margin: -8px auto 20px auto;
	width: 731px;
	padding: 10px;
}
#top-bar {
	background: url('../images/top-lg.png') no-repeat 2px 0;
	height: 16px;
	width: 767px;
/*	float: left;*/
/*	margin: -15px 0 -17px -20px;/* without float: -bottom: -17px */
}
#middle-shadow {
	background: url('../images/middle-lg.png') repeat-y 0 0;
	width: 767px;
	margin: 0 auto 0 auto;
}
#bottom-bar {
	background: url('../images/bottom-lg.png') no-repeat 2px 0;
	height: 15px;
	width: 767px;
	float: left;
/*	margin-left: -20px;*/
}

/* ... Big yellow bar on homepage ... */
#first-impression {
	background-color: #F5EE77;/* #f6ef8a */
	margin: 22px -10px 20px -10px;
	padding-top: 20px;
	height: 178px;/* 198px */
}
/* Are you Awake, etc. questions */
#headline {
	width: 297px;
	height: 147px;
	overflow: hidden;
	margin-left: 31px;
}
#headline p {
	background: url('../images/home-questions.png') no-repeat top;
	height: 147px;
	width: 297px;
	margin: 0;
}
#home-screenshot {
	float: right;
	margin-top: -13px;
	margin-right: 17px;
	
}

#left-column, #right-column { width: 325px;/* 350px */ }
#left-column { float: left; margin-left: 20px; }
#right-column { float: right; margin-right: 20px; }

/* Sign-up button */
#sign-up { position: relative; top: 10px; margin-left: 100px; }
#sign-up a {
	background: url('../images/sign-up.png') no-repeat top;
	display: block;
	width: 144px;
	height: 40px;
	text-indent: -999px;
}
#sign-up a:hover { background-position: 0 -40px; }
#sign-up a:active { background-position: 0 -80px; }

a.home-button {
	background-color: #005FBD;
	margin-right: 10px;
	padding: 13px;
	border: 3px solid #AAA;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	color: #CCC;
	text-decoration: none;
}
a.home-button:hover { color: #eee; background-color: #0069D0; }
a.home-button:active { color: #ccc; background-color: #005AB3; }

/* --- Tour --- */
#tour-screenshots { margin: -30px auto; width: 565px; }
.tour-screenshot {
	margin: 50px auto;
	width: 550px;
	text-align: center;
}
.tour-screenshot p {/* captions */
	margin-top: -0.2em;
	font-size: 13px;
	font-style: italic;
}

/* ... prev/next buttons ... */
a.prev, a.next {
	display:block;
	position: relative;
	width:33px;
	height:33px;
	float:left;
	margin-top: 180px;
	cursor:pointer;
	font-size:1px;
}
a.prev { background: url('../js/tour/left.png') no-repeat; left: 50px; }
a.next { background: url('../js/tour/right.png') no-repeat; float: right; right: 50px; }

/* mouseover state */
a.prev:hover, a.next:hover { background-position:0px -34px; }
/* disabled navigational button */
a.disabled { visibility:hidden !important; }

/* ... tour navigation circles ... */
div.navi {
	margin-left:336px;
	width:200px;
	height:20px;
}
/* items inside navigator */
div.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background: url('../js/tour/navigator.png') no-repeat 0 0;
	display:block;
	font-size:1px;
}
/* mouseover state */
div.navi a:hover { background-position:0 -8px; }
/* active state (current page state) */
div.navi a.active { background-position:0 -16px; }