html{
	background-color:#105802;
}

body{
	font-family: Arial, Helvetica, sans-serif;
	color:black;
	background-color: #ffffff;
	font-size:11pt;
	line-height:22px;
	width:960px;
	margin:35px auto;
	
}

img{
	margin: 0;
	border: 0;
}

h3{
	letter-spacing: .1em;
}


/*  Class Styles  */

.darkgreen{
	color: #436026;
}

.darkgreenlink{
	color: #436026;
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
	float: right;
	clear: both;
}

.green{
	color: #547539;
}

.greenlink{
	color: #547539;
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
	float: right;
	clear: both;
}

.pink{
	color: #ba0170;
}

.pinklink{
	color: #ba0170;
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
	float: right;
	clear: both;
}

.purple{
	color: #652d90;
}

.purplelink{
	color: #652d90;
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
	float: right;
	clear: both;
}

.red{
	color: #ce3030;
}

.redlink{
	color: #ce3030;
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
	float: right;
	clear: both;
}

.lightgreen{
	color: #94ab4b;
}

.lightgreenlink{
	color: #94ab4b;
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
	float: right;
	clear: both;
}

.lightblue{
	color: #00acc5;
}

.lightbluelink{
	color: #00acc5;
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
	float: right;
	clear: both;
}

.bold{
	font-weight: bold;	
}

.italic	{font-style:italic;}
.italicSm	{font-size:10px; font-style:italic;}
.SmText		{font-size:8pt; line-height:15PX;}

.clear{
	clear: both;
}

.box{
	margin: 0 0 1em;
	clear: both;
}

.media-box-index{
	margin: 0 0 3em;
}

.chalkboard{
	width: 600px;
	height: 240px;
	margin: 0 0 4em;
	background: url(/images/index-chalk-board.gif);
	overflow: hidden;
}

.join-index{
	width: 230px;
	height: 349px;
	margin: 2em 0;
	background: url(/images/box-join-our-community.gif);
	overflow: hidden;
	text-align: center;

}

.join-index p{
	color: #1B325F;
	margin: 50px 12px 1em;
	text-align: left;
}

.join-index a img{
	margin: 5px;
}

.contact-index{
	width: 230px;
	height: 243px;
	margin: 0 0 2em;
	background: url(/images/box-contact-info.gif);
	overflow: hidden;
}

.contact-index p{
	color: #533415;
	margin: 55px 12px 1.5em;
	text-align: right;
	line-height: 1.8em;
}


.feedingAmericaLogo-index{
	width: 230px;
	height: 325px;
	background-image:url(/images/box-feeding-america-logo.gif);
	overflow: hidden;
}


.feedingAmericaLogo-index p{
	color: #533415;
	margin: 0px 12px 1.5em;
	text-align: left;
	line-height: 1.3em;
	font-size:.9em;
	text-align:center;
}


.feedingAmericaLogo-index a img{
	margin: 40px 0px 0px 15px;
}


.story-index{
	width: 230px;
	height: 443px;
	margin: 0 0 2em;
	background: url(/images/box-index-story.jpg);
	overflow: hidden;
}

.text-box{
	width: 600px;
	margin: 0 0 3em;
}

.img-wrap{
	float: left;
	height: 100%;
}

.img-wrap img{
	margin: 0 20px;
}

.divider{
	width: 100%;
	margin: 0 0 2em;
	border-top: 1px #000 solid;
}


/*  ID Styles  */

#main-left{
	width: 600px;
	margin: 30px 30px 0 50px;
	float: left;
}

#side-right{
	width: 230px;
	margin: 30px 50px 0 0;
	float: left;
}

#main-right{
	width: 600px;
	margin: 30px 50px 0 30px;
	float: left;
}

#side-left{
	width: 230px;
	margin: 30px 0 0 50px;
	float: left;
}

#btnBar{
	list-style-type: none;
	width: 960px;
	height: 50px;
	display: block;
	margin: 0;
	padding: 0;
}

#btnBar li{
	margin: 0;
	padding: 0;
	float: left;
}

#btnBar a{
	display: block;
}

#btnBar a:hover img{
	visibility: hidden;
}

#btnBar-side{
	list-style-type: none;
	width: 230px;
	display: block;
	margin: 0;
	padding: 0;
}

#btnBar-side li{
	margin: 0;
	padding: 0;
	float: left;
	border-bottom: 1px #fff solid;
}

#btnBar-side a{
	display: block;
}

#btnBar-side a:hover img{
	visibility: hidden;
}

#footer{
	width: 960px;
	height: 218px;
	background: url(/images/box-footer-logo.gif);
	overflow: hidden;
}

#footer p{
	margin: 2em 50px 2em;
	width: 500px;
	color: #463014;
	font-size: .9em;
	line-height: 2em;
	letter-spacing: .1em;
}

#footer ul{
	margin: 1em 50px;
	padding: 0;
	list-style-type: none;
	color: #fff;
}

#footer ul li{
	float: left;
	margin: 0 2em 0 0;
}

#copyright{
	padding: .5em 0;
	text-align: center;
	font-size: .7em;
	color: #f7941e;
	letter-spacing: .1em;
	background-color:#105802;
}

#browntextfooter	{
	width: 500px;
	color: #463014;
	font-size: .9em;
	line-height: 2em;
	letter-spacing: .1em;}
	
	
	
	
	/*//////////////////////////////////////////*/
/*    THIS IS FOR SLIDE SHOW BANNERS        */
/*//////////////////////////////////////////*/



/* Apply the slideBox ID to a div that contains all your slides. Set the width and height to fit your page and your artwork. */
#slideBox{
	width: 600px;
	height: 340px;
	position: relative;
}

/* The slide class is for each div that acts as a slide. Set the width and height to match slideBox. */
.slide{
	width: 600px;
	height: 340px;
	position: absolute;
	top: 0;
	left: 0;
}

/* If you wrap an entire slide in a hyperlink, compensate for default browser hyperlink styling. */
#slideBox a{
	text-decoration: none;
}

#slideBox a img{
	border: none;
}

/* The slideGraphic class is for the image that acts as the content/background of a slide. */
.slideGraphic{
	position: absolute;
	top: 0;
	left: 0;
}

/* You can have a unique class for the text of each slide so that it can be styled and positioned uniquely. */
.slideText01{
	position: absolute;
	top: 27px;
	left: 775px;
	color:#d3a146;
	font-size:3.6em;
}

.slideText02{
	position: absolute;
	top: 150px;
	left: 625px;
	color:#d3a146;
	font-size:2.7em;
}

.slideText03{
	position: absolute;
	top: 180px;
	left: 300px;
}

/* Add more slideText classes as needed. */




	
	/*//////////////////////////////////////////*/
/*    THIS IS FOR SLIDE SHOW BANNER #2 OUTGROW HUNGER */
/*//////////////////////////////////////////*/



/* Apply the slideBox ID to a div that contains all your slides. Set the width and height to fit your page and your artwork. */
#slideBox2{
	width: 600px;
	height: 300px;
	position: relative;
}

/* The slide class is for each div that acts as a slide. Set the width and height to match slideBox. */
.slide2{
	width: 600px;
	height: 300px;
	position: absolute;
	top: 0;
	left: 0;
}




/*//////////////////////////////////////////*/
/*    THIS IS FOR SLIDE SHOW BANNER #3 MOBILE PANTRY */
/*//////////////////////////////////////////*/



/* Apply the slideBox ID to a div that contains all your slides. Set the width and height to fit your page and your artwork. */
#slideBox3{
	width: 476px;
	height: 250px;
	position: relative;
}

/* The slide class is for each div that acts as a slide. Set the width and height to match slideBox. */
.slide3{
	width: 476px;
	height: 250px;
	position: absolute;
	top: 0;
	left: 0;
}