/**
 * FRONTPAGE LAYOUT STYLING
 * #doc -- 750px fixed
 * Colors:
 * Carousel Purple: 615d5b
 */

body {
	/* yui/fonts.css handles sizing, graceful font degradation for us */
	/*font-family:"Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Lucida", "Bitstream Vera Sans", Arial, sans-serif;*/
	font-family: Frutiger, Univers, Helvetica, Arial, sans-serif;
	background: #dde8f3 url(/images/front_body_bg.png) repeat-x top;
}

/* prevent escaping-margins bug */
#hd, #bd, #ft {
	overflow:hidden;
	width:100%;
}
#hd {
	height:178px;
	background: url(/images/front_header.png) repeat-x top;
	position:relative;
}
#hd h1 {
	margin:0;
	padding:0;
}
#hd h1 a {
	text-indent: -9000px;
	margin: 20px 150px 0;
	padding: 0;
	display: block;
	height: 118px;
}
#bd {
	background: #edf3f9 url(/images/front_content_bg.png) repeat-x top;
	color:#333;
}
/***** NAVIGATION TABS *****/
ul#nav-tabs {
	list-style:none;
	padding:0;
	margin:0;
	width:100%;
	bottom:0;
	position:absolute;
}
ul#nav-tabs li {
	float:left;
	list-style:none;
	margin:0 0.2em 0 0;
	padding:0;
	display:inline;
}
ul#nav-tabs li.tab a {
	height:30px;
	line-height:30px;
	padding:0 0.7em;
	text-decoration:none;
	color:#FFF;
	background-color:#b34326;
	display:block;
	float:left;
}
ul#nav-tabs li.tab.current a,
ul#nav-tabs li.tab a:hover  {
	background: #943921 url(/images/tab_arrow.gif) no-repeat scroll center bottom;
}
ul#nav-tabs li#login {
	float:right;
	margin:0;
	line-height: 30px;
	height: 30px;
	color: #FFF;
}
ul#nav-tabs li#login a {
	font-weight:bold;
	color: #FFF;
}
ul#nav-tabs li#login a:hover {
	background-color:#943921;
}

ul#nav-tabs li#login form input {
	width:100px;
	background-color:#DC5C3B;
	border:0;
	margin: 0;
	padding:4px;
	font-size:0.85em;
	color:#F0F0F0;
	border-top:1px solid #c35336;
	border-left:1px solid #c35336;
	border-bottom:1px solid #b34326;
	border-right:1px solid #b34326;
}
ul#nav-tabs li#login div.button-group {
	padding:0;
	margin:0;
	padding:0;
	display:inline;
	float:none;
}
ul#nav-tabs li#login button {
	float:none;
	display:inline;
	border:0;
	height:24px;
	background-color:#b34326;
	color:#FFF;
	margin:0;
}
ul#nav-tabs li#login button:hover {
	background-color:#943921;
}
ul#nav-tabs li#login a.button-link {
	padding:3px;
	height:30px;
	border:0;
	margin:0;
	padding:0;
	background-color:#DC5C3B;
	color:#FFF;
	text-decoration:none;
}
/* Overlabel: float label "over" into
   input field */
label.overlabel-apply {
	color:#EEE;
	padding:0 0 0 5px;
	font-size:0.85em;
	bottom:0;
	position:absolute;
	z-index:1;
}

/** CONTENT STYLING **/
div#main-screenshot {
	float:left;
	margin:15px 0 15px 15px;
	width:300px; /* 300px img width + 15 + 15 pad */
	display:inline; /* http://www.positioniseverything.net/explorer/doubled-margin.html */
}
div#main-screenshot img {
	border: 4px solid #CCC;/*#d3dce5;*/
}
div#main-intro-text {
	float:right;
	width:400px;
	margin:15px 15px 0 0;
	display:inline; /* http://www.positioniseverything.net/explorer/doubled-margin.html */
}
div#main-intro-text p {
	font-size:1.3em;
	line-height:1.6em;
}
div#main-intro-text a.action-link {
	display:block;
	float:left;
}
div#main-intro-text div#actions .or {
	vertical-align:middle;
	height:36px;
	padding:10px;
	display:block;
	float:left;
}
div.slider-wrapper {
	width:100%;
	clear:both;
	padding:10px 0;
	margin:25px 0 0 0;
	float:left;
}

div#how-it-works {
	background:#4d423d url(/images/carousel_bg.png) repeat-x top;
	color:#FFF;
}
/*
 * jQuery Coda Slider Effect
 * HT: http://jqueryfordesigners.com/demo/coda-slider.html
 */
div#slider {
	width:620px;
	margin: 0 auto;
	position:relative;
	clear:left;
}
div#slider .scroll {
	height:125px;
	overflow:hidden;
	overflow-x:hidden;
	position:relative;
	clear:left;
}
div#slider div.panel {
	padding:5px;
	height:125px;
	width: 610px;
}
div#slider div.panel img {
	float:left;
	border:4px solid #AAA;
}
div#slider div.panel h2 {
	text-indent:-9000px;
}
div#slider div.panel#make h2 {
	background: url(/images/carousel_text_make.png) top left no-repeat;
}
div#slider div.panel#signup h2 {
	background: url(/images/carousel_text_signup.png) top left no-repeat;
}
div#slider div.panel#collect h2 {
	background: url(/images/carousel_text_collect.png) top left no-repeat;
}
div#slider div.panel div.description {
	float:left;
	position:absolute;
	left:240px;
	padding:5px;
}
div#slider div.panel h2 {
	color:#FFF;
	margin: 0 0 -0.5em 0;
}
div#slider .scroll-buttons {
	position:absolute;
	top:50px;
	cursor:pointer;
}
div#slider .scroll-buttons.left {
	left: -20px;
}
div#slider .scroll-buttons.right {
	right: -20px;
}

/**
 * Slider navigation tab buttons.
 */
ul#slider-nav {
	list-style:none;
	margin:-41px 0 0 -50px;
	padding:0;
	clear:both;
	position:absolute;
}
ul#slider-nav li {
	display:block;
	float:left;
	padding:0;
	margin:0 8px 0 0;
}
ul#slider-nav a {
	font-size:16px;
	font-weight:bold;
	padding:6px;
	display:block;
	float:left;
	-webkit-border-top-left-radius:5px;
	-webkit-border-top-right-radius:5px;
	-moz-border-radius-topleft:5px;
	-moz-border-radius-topright:5px;
	background-color:#FFF;
	color:#918884;
	text-decoration:none;
	line-height:19px;
	outline:0;
}
ul#slider-nav a.selected {
	background-color:#716864;
	/*border-left:1px solid #6F8080;
	border-top:1px solid #6F8080;
	border-right:1px solid #6F8080;
	border-bottom:1px solid #B2CDCD;*/
	color:#FFF;
}

/**
 * Demo page videos
 */
ul#demo-videos {
	margin:0;
}
ul#demo-videos li {
	padding:0;
	margin:1.5em 0;
	clear:both;
	overflow:hidden;
	width:100%;
	list-style:none;
}
ul#demo-videos li object {
	float:left;
}
ul#demo-videos .description {
	float:right;
	width:200px;
}

/** Text styles **/
div#frontpage-text {
	margin:15px;
}

/** Footer **/
#ft {
	font-size:0.8em;
	color:#7F9995;
}
#ft a {
	color:#DD4114; /* find perm color */
}
#ft a:hover {
	color:#AAC;
}
#ft div#porkbuns {
	float:left;
	margin:15px 0 15px 15px;
}
#ft div#site-links {
	float:right;
	margin:15px 15px 15px 0;
}
