/* ---------------------------------------------------->>> INFO <<<--- //
 *
 * Title:	Neighborhood Farm Initiative Screen Stylesheet
 * File:	/css/layout.css
 * Updated:	August 7th, 2010
 * Author:	James Colvard <jcolvard@gmail.com>
 *
 * ------------------------------------------------------------------- */

/* ----------------------------------------->>> SHORTHAND NOTES <<<--- //
 *
 * [PROPERTY:margin, padding, border-width]
 *   (1 value ) property: all-sides;
 *   (2 values) property: top and bottom, right and left;
 *   (3 values) property: top, left and right, bottom;
 *   (4 values) property: top right bottom left;
 *
 * [PROPERTY:border]
 *   (3 values) property: border-width border-style border-color;
 *
 * [PROPERTY:background]
 *   (1 value ) property: background-color;
 *   (3 values) property: background-color background-image background-repeat;
 *   (5 values) property: background-color background-image background-repeat background-attachment background-position;
 * 
 * [PROPERTY:font]
 *   (6 values) property: font-style font-variant font-weight font-size/line-height font-family;
 *
 * [PROPERTY:list-style]
 *   (3 values) property: list-style-type list-style-position list-style-image;
 *
 * [PROPERTY:outline]
 *   (3 values) property: outline-color outline-style outline-width; 
 *
 * ------------------------------------------------------------------- */
 
/* -------------------------------------------------->>> COLORS <<<--- //
 * 
 * BROWN DARK........:  #7F5421
 * BROWN LIGHT.......:  #DFD3C7
 * GREEN DARK........:  #5D8719
 * GRAY DARK.........:  #F2EDE7
 * GRAY MEDIUM.......:  #F7F3F0
 * GRAY LIGHT........:  #FAFAF8
 * WHITE.............:  #FFFFFF
 *
 * ------------------------------------------------------------------- */

/* reset
---------------------------------------------------------------------- */
html, body, div, span, h1, h2, h3, h4, h5, h6, p {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

/* clear all floats
/* apply style to div's containing other floating elements - FLOAT CHILDREN LEFT AND CLEAR NONE 
---------------------------------------------------------------------- */
.group:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.group {
	zoom: 1;
	display: block;
}

/* typography
---------------------------------------------------------------------- */
body {
	font-family: Helvetica, Arial, sans-serif;
	color:#444;
	margin: 0 auto;
	padding:0;
}
 @font-face {
 font-family: 'TradeGothicLTCondEighteen';
 src: url('trade-gothic-webfont.eot');
 src: local('☺'),  url('trade-gothic-webfont.woff') format('woff'), url('trade-gothic-webfont.ttf') format('truetype');
}
.TradeGoth {
	font-weight: normal;
	font-style: normal;
	line-height:normal;
	font-family: 'TradeGothicLTCondEighteen', sans-serif;
}

/* outer wrapper
---------------------------------------------------------------------- */

#outer-wrapper-home {
	width: 890px;
	margin: 0 auto;
	padding:0;
	background: #f7f3f0 url(../img/design/bg-side.gif) right repeat-y;
}
#outer-wrapper {
	width: 890px;
	margin: 0 auto;
	padding:0;
	background: #f7f3f0 url(../img/design/bg-full.gif) right repeat-y;
}

/* header
---------------------------------------------------------------------- */
#header {
	width: 890px;
	height: 168px;
	position: relative;
	background: #FFF url(../img/logos/nfi.gif) 0px 40px no-repeat;
	margin: 0 auto;
	padding: 0;
}
#header h1 {
	position: absolute;
	text-indent: -9999em;
	padding: 0;
	margin: 0;
}
#header h1 a {
	display: block;
	width: 240px;
	height: 155px;
}
#header h2 {
	position: absolute;
	top: 41px;
	left: 546px;
	font: italic normal 10px Georgia, "Times New Roman", Times, serif;
	text-align: right;
}

/* utility navigation 
---------------------------------------------------------------------- */
#utility {
	margin: 0 auto;
	padding: 0;
	text-align:right;
	width:450px;
	height:25px;
	position: absolute;
	top: 15px;
	left:446px;
}
#utility ul {
	margin: 0;
	padding: 0;
	background: none;
	list-style-image: none;
	list-style-type: none;
	display: inline;
}
#utility li {
	margin: 0;
	padding: 0;
	background: none;
	list-style-image: none;
	list-style-type: none;
	display: inline;
}
#utility li a {
	display: inline;
	border-left: 1px solid #5D8719;
	float: right;
	padding: 0 13px;
	font-size: 12px;
	color: #5D8719;
	text-decoration: none;
	list-style-image: none;
	height:15px;
	line-height:15px;
}
#utility a:visited {
	color: #5D8719;
	text-decoration: none;
}
#utility a:hover {
	color: #7F5421;
}
#utility li a.utility-first {
	border-left: none;
}

/* top navigation
---------------------------------------------------------------------- */
#nav {
	padding: 96px 0 0 0;
	background: none;
	width: 675px;
	height: 31px;
	border-bottom: 2px solid #7f5421;
	float:right;
}
#nav ul {
	margin: 0;
	padding: 0;
	background: none;
	list-style-image: none;
	list-style-type: none;
	display: inline;
}
#nav li {
	margin: 0;
	padding: 0;
	background: none;
	list-style-image: none;
	list-style-type: none;
	display: inline;
}
#nav li a {
	display: inline;
	border-left: 1px solid #FFF;
	float: right;
	height: 30px;
	padding: 0 13px;
	line-height: 30px;
	font-size: 15px;
	color: #FFF;
	text-decoration: none;
	list-style-image: none;
	background: #5d8719 none repeat scroll 0 0;
}
#nav a:visited {
	color: #FFF;
	text-decoration: none;
}
#nav a:hover {
	background: #7f5421 none repeat scroll 0 0;
	color: #FFF;
}
body.about-us #nav-about-us, body.programs #nav-programs, body.events #nav-events, body.volunteer #nav-volunteer, body.donate #nav-donate, body.photos #nav-photos, body.our-friends #nav-our-friends, body.blog #nav-blog {
	background: #7f5421 none repeat scroll 0 0;
	color: #FFF;
}

/* share this navigation
---------------------------------------------------------------------- */
a.stbar.chicklet img {
	border:0;
	height:16px;
	width:16px;
	margin:0 0 0 3px;
}
a.stbar.chicklet {
	height:16px;
}
#share-this {
	margin: 0;
	padding: 0;
	text-align:right;
	position: absolute;
	top: 139px;
	left: 824px;
}

/* left navigation
---------------------------------------------------------------------- */
#lft-nav {
	width: 162px;
	padding: 0;
	border-left: 12px solid #F7F3F0;
	float:left;
}
#lft-nav ul {
	margin: 0;
	padding: 0;
	background: none;
	list-style-image: none;
	list-style-type: none;
}
#lft-nav li {
	margin: 0 auto;
	padding: 0;
	list-style-image: none;
	list-style-type: none;
}
#lft-nav li a {
	display: block;
	font-size: 14px;
	padding: 6px 12px;
	text-decoration:none;
	border-bottom: 1px solid #F4F8FB;
	color: #5d8719;
}
#lft-nav li a:hover {
	background: #dfd3c7;
	color: #7f5421;
}
body.lft-what #lft-nav-what, body.lft-who #lft-nav-who, body.lft-testimonials #lft-nav-testimonials, body.lft-garden-ed #lft-nav-garden-ed, body.lft-community-support #lft-nav-community-support, body.lft-for-kids #lft-nav-for-kids, body.lft-upcoming #lft-nav-upcoming, body.lft-past #lft-nav-past, body.lft-funds #lft-nav-funds, body.lft-other #lft-nav-other {
	background: #dfd3c7;
	color: #7f5421;
}
#about-us-sub {
	display:none;
}
body.about-us #about-us-sub {
	display:block;
}
#programs-sub {
	display:none;
}
body.programs #programs-sub {
	display:block;
}
#events-sub {
	display:none;
}
body.events #events-sub {
	display:block;
}
#donate-sub {
	display:none;
}
body.donate #donate-sub {
	display:block;
}
#photos-sub {
	display:none;
}
body.photos #photos-sub {
	display:block;
}
#volunteer-sub {
	display:none;
}
body.volunteer #volunteer-sub {
	display:block;
}
#friends-sub {
	display:none;
}
body.friends #friends-sub {
	display:block;
}

/* content area
---------------------------------------------------------------------- */
#content-wrapper {
	width: 450px;
	padding-top:12px;
	float: left;
}
#content-holder {
	width: 426px;
	margin: 0 auto;
	font-size:16px;
}
.wrapper-home {
	width: 624px;
}
.holder-home {
	width: 600px;
}
#content-holder h2 {
	font-size:34px;
	color:#7f5421;
	margin: 0 0 13px 0;
	padding: 3px 15px 2px 4px;
	border-bottom: 1px solid #7f5421;
}
#content-holder h2.home-page {
	font-size: 58px;
	width:581px;
}
.head-sub {
	font-size:20px;
}
#content-holder h3 {
	font-size:23px;
	color:#7f5421;
	margin: 0 0 13px 0;
	padding: 3px 15px 0 0;
}
#content-holder h4 {
	font-size:19px;
	color:#7f5421;
	margin: 0 0 0 0;
	padding: 3px 15px 0 0;
}
#content-holder p {
	margin: 0;
	padding: 0 4px 10px 0;
}
#content-holder a {
	color: #5D8719;
	text-decoration: none;
}
#content-holder a:visited {
	color: #5D8719;
}
#content-holder a:hover {
	color: #7F5421;
	text-decoration: none;
}
#content-holder ul {
	margin: 0;
	padding: 0 28px 0 28px;
}
#content-holder ul li {
	margin: 0;
	padding: 0 0 10px 0;
	line-height: 20px;
	list-style: none;
	background-image: url(../img/design/bullet.gif);
	background-repeat: no-repeat;
	background-position: 0px 4px;
	padding-left: 19px;
}

/* side panel
---------------------------------------------------------------------- */
.side-wrapper {
	border-bottom: 12px solid #F7F3F0;
	width:266px;
	margin: 0;
	padding: 0;
	float: right;
}
.top-wrapper {
	border-top: 12px solid #F7F3F0;
}
.side-bucket {
	margin: 0;
	width: 254px;
	background: #fff;
	padding: 12px 0 18px 0;
	float:left;
}
.side-holder {
	margin: 0 auto;
	padding:0;
	width: 220px;
}
.side-holder h3 {
	color:#7f5421;
	font-size:20px;
	margin:0;
	padding:0 0 10px 0;
}
.side-holder p {
	margin:0;
	padding:0 0 15px 0;
	font-size: 15px;
}
.side-button a {
	display: block;
	float: left;
	padding: 3px 18px 4px 8px;
	font-size: 14px;
	color: #FFF;
	text-decoration: none;
	list-style-image: none;
	background: #5d8719 url(../img/design/arrow-bullet-white.gif) right no-repeat;
}
.side-button a:visited {
	background: #5d8719 url(../img/design/arrow-bullet-white.gif) right no-repeat;
}
.side-button a:hover {
	background: #7f5421 url(../img/design/arrow-bullet-white.gif) right no-repeat;
}

/* footer
---------------------------------------------------------------------- */
#footer {
	font-size:12px;
	border-top: 12px solid #F7F3F0;
	background: #fff;
	width: 890px;
	margin:0;
	padding:8px 0 0 0;
}
#footer p.left {
	margin:0;
	padding:0 0 12px 13px;
	float:left;
}
#footer p.right {
	margin:0;
	padding:0 0 12px 8px;
	float:right;
}
#footer ul {
	margin: 0;
	padding: 0;
	background: none;
	list-style-image: none;
	list-style-type: none;
	display: inline;
}
#footer li {
	margin: 0;
	padding: 0;
	background: none;
	list-style-image: none;
	list-style-type: none;
	display: inline;
}
#footer li a {
	display: inline;
	border-left: 1px solid #5D8719;
	float: right;
	padding: 0 13px;
	font-size: 12px;
	color: #5D8719;
	text-decoration: none;
	list-style-image: none;
	height:15px;
	line-height:15px;
}
#footer a:visited {
	color: #5D8719;
	text-decoration: none;
}
#footer a:hover {
	color: #7F5421;
}
#footer li a.utility-first {
	border-left: none;
}

/* about us - who we are
---------------------------------------------------------------------- */
.team-wrapper {
	margin-bottom: 20px;
}
.team-pict {
	float:left;
}
.team-title-wrapper {
	float:left;
	padding-top: 106px;
	width:285px;
}
.team-title-holder {
	margin: 0 auto;
	width:265px;
}
.team-title-bio {
	float:left;
	padding-top:6px;
}

/* forms
---------------------------------------------------------------------- */
form, fieldset, input {
	margin : 0;
	padding : 0;
}
form {
	width: 38em;
	margin-left: 5px;
}
form p {
	font-size: 100%;
	padding: 2px;
	margin: 0;
}

/* fieldset styling */
fieldset {
	margin: 1em 0; /*  space out the fieldsets a little*/
	padding: 1em;
	border : 1px solid #e2e2e2;
}

/* legend styling */
legend {
	font-weight: bold;
	color: #0567ae;
}

/* style for  labels */
label {
	float: left;
	width: 14em;
}

/* style for required labels */
label .required {
	font-size: 0.9em;
	font-style: normal;
	color: red;
}
label.error, input.submit {
	color: #F00;
	margin: 5px 0 0 0;
}
input {
	width: 225px;
}
input.radio, input.submit {
	width: auto;
}
textarea {
	width: 225px;
	height: 100px;
	padding:0;
}

/* submit */
form div input {
	width: 100px;
	margin-top:5px;
	margin-left: 170px;
	padding: 0 .25em;
	background-color: #0567ae;
	color: #fff;
	text-transform: uppercase;
	font-size: 90%;
}