@charset "utf-8";
/* CSS Document */
/*General page layout*/
/*---------------------------------------------------------------------------
1.header_top_bg
	1.1 header_top
		- logo
		- tagline
		- button
2. header
		- slider_bg : It is in absolute position in relative to header
		- text
3. header_bottom_bg
	3.1 header_bottom
		- subscribe
4. content_top_bg
	4.1 content_top
		- three columns for
			- volumnteer, shop, social
5. content
	5.1 column_2
		- stories with cycle plugin
	5.2 column_4 and column_4_last for
		- list
		- news and events
6. content_bottom_bg
	6.1 column_2
		- contact form
	6.2 column_2_last
		- map 
		- address and contact info in column_4 and column_4_last resp.
7. footer_bg
	7.1 footer
		- copyright
		- general links
---------------------------------------------------------------------------*/
body {
	background: url(../images/body-bg.jpg) repeat #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
	color: #646464;
	line-height: 1.6em;
}
.clear {
	clear: both;
}
/*Typography and default*/
/*---------------------------------------------------------------------------*/
h1, h2, h3, h4 {
	font-family: Tahoma, Arial;
	color: #555;
	line-height: 1em;
	font-weight: normal;
}/*Margin bottom to headings as line-height property do not work well with many browsers in case of cufon*/
h1 {
	font-size: 24px;
	margin-bottom: 15px;
}
#content_top h1 {
	font-size: 22px;
	margin-bottom: 30px;
	color: #8E7C48;
	text-align: center;
}
h2 {
	font-size: 20px;
	margin-bottom: 15px;
	margin-top: 5px;
}
h3 {
	font-size: 15px;
	margin-bottom: 15px;
	font-family: arial;
}

.col_h2 {
	font-size: 17px;
	margin-bottom: 8px;
	color: #bd8a00;
}
#content_top h2 {
	font-size: 20px;
	color: #edd175;
}
#content_bottom h2 {
	font-size: 20px;
	color: #ffffff;
}
a {
	color: #656565;
	font-size: 11px;
	text-decoration: none;
	cursor: pointer;
}
/*Basic columns used in template*/
/*---------------------------------------------------------------------------*/
/*two columns*/
.column_2 {
	width: 650px;
	margin-right: 40px;
	float: left;
}
.column_2_last {
	width: 450px;
	margin: 0;
	float: left;
}
/*three columns*/
.column_3 {
	width: 300px;
	margin-right: 20px;
	float: left;
}
.column_3_last {
	width: 300px;
	margin: 0;
	float: left;
}
/*four columns*/
.column_4 {
	width: 250px;
	margin-right: 20px;
	float: left;
}
.column_4_last {
	width: 220px;
	margin: 0;
	float: left;
}
/*header_top*/
/*---------------------------------------------------------------------------*/
#header_top_bg {
	background: #cfc094;
	width: 100%;
    border-bottom: 1px solid #8a7b4e;
}
#header_top {
	width: 940px;
	margin: 0 auto;
	padding: 20px 0px;
	color: #333333;
}
/*----------logo----------*/
.logo {
	background: url(../images/vertical-divider.png) repeat-y right;
	padding-right: 20px;
	float: left;
}
/*Remember to adjust width of "tagline" accordingly, if your logo is more than 170px in width*/
/*----------tagline----------*/
.tagline {
	width: 560px;
	padding: 0px 20px;
	float: left;
}
/*----------button----------*/
.button {
	background: url(../images/donate-btn-sprite.png) no-repeat 0 0;
	width: 150px;
	height: 55px;
	margin-top: 30px;
	float: right;
}
.button a {
	font-size: 20px;
	color: #79402e;
	font-weight: bold;
	text-align: center;
	text-shadow: 0px 1px 0px #ffde00;
	padding-top: 14px;
	padding-bottom: 10px;
	display: block;
	border: none;
}
.button:active {
	background: url(../images/donate-btn-sprite.png) no-repeat 0 -70px;
}
.button:active a {
	padding-top: 16px;
}
/*header*/
/*---------------------------------------------------------------------------*/
#header {
	width: 940px;
	margin: 0 auto;
	padding: 30px 0px;
	position: relative;
}
/*slider_bg is with absolute position, it has nothing to do with heights of header and header_bottom*/
/*While increasing height of slider, make sure to increase padding bottom of "header_bottom" accordingly.*/
#slider_bg {
	width: 510px;
	height: 325px;
	padding:5px;
	background: #333333;
	position: absolute;
	top: 30px;
	left: 0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
#slider {
	width: 510px;
	height: 315px;
}
/*Remember to adjust width of div "text", if you are increasing width of slider*/
#text {
	width: 390px;
	float: right;
}
/*header_bottom*/
/*---------------------------------------------------------------------------*/
#header_bottom_bg {
	background: url(../images/horizontal-divider-bottom.png) repeat-x bottom #333333;
	width: 100%;
}
#header_bottom {
	width: 940px;
	margin: 0 auto;
	padding: 30px 0px 60px 0px;
	font-size: 18px;
	color: #ffffff;
	font-family: "Times New Roman", Times, serif;
}
#subscribe {
	width: 390px;
	position: relative;
	float: right;
}





/*---- SUB HEADER ---------------------------*/
#sub_header {
    height: 25px;
    background-color: #558729;
    padding: 8px 0px 0px 0px;
    border-top: 1px solid #9cc17c;
    border-bottom: 1px solid #3d641b;
}

#sub_header a {
	color: #FFFFFF;
	font-size: 13px;
	text-decoration: underline;
}

/*---- SUB HEADER ---------------------------*/










/*----------subscribe form----------*/
form#subform fieldset {
	border: none;
	background: none;
}
form#subform fieldset p {
	background: none;
	padding: 0;
	margin: 0;
	display: block;
}
form#subform input {
	background:url(../images/subscribe-fld.png) no-repeat;
	width: 249px;
	height: 24px;
	padding: 8px;
	margin-top: 15px;
	font-family: Arial, Trebuchet MS, Verdana, sans-serif;
	font-size: 12px;
	color: #646464;
	line-height: 2em;
	outline: none;
	border: none;
	float: left;
}
form#subform input.submit {
	background: url(../images/subscribe-btn-sprite.png) no-repeat 0 0;
	width: 110px;
	height: 40px;
	padding: 0;
	margin: 15px 0px 0px 10px;
	font-size: 16px;
	font-weight: bold;
	color: #79402e;
	text-shadow: 0px 1px 0px #ffde00;
	border: none;
	cursor: pointer;
	outline: none;
	display: block;
}
form#subform input.submit:active {
	background: url(../images/subscribe-btn-sprite.png) no-repeat 0px -60px;
}
/*position of error is relative to "suscribe" div*/
form#subform label.error {
	position: absolute;
	top: 75px;
	left: 0;
	color: #c52c02;
	font-style: italic;
	font-size: 11px;
	text-align: left;
	margin: 0;
	padding: 0;
}
form#subform #result_sub {
	width: 390px;
	height: 15px;
	font-size: 12px;
	color: #d4d4d4;
	text-align: left;
	float: left;
}
/*content_top*/
/*---------------------------------------------------------------------------*/
#content_top_bg {
	background: url(../images/horizontal-divider-bottom.png) repeat-x bottom #333333;
	width: 100%;
}
#content_top {
	width: 940px;
	margin: 0 auto;
	padding: 0px 0px 60px 0px;
	color: #d4d4d4;
}
#content_top a {
	color: #d4d4d4;
}
#content_top a:hover {
	border-bottom: 1px solid #d4d4d4;
}
ul.social {
	padding-top: 10px;
}
ul.social li {
	list-style: none;
	background: none;
	padding-right: 5px;
	float: left;
	margin: 0;
}

ul.social li a {
	border: none !important;
}
/*content*/
/*---------------------------------------------------------------------------*/
#content {
	width: 940px;
	margin: 0 auto;
	padding: 20px 0px;
}
#content a:hover {
	border-bottom: 1px solid #656565;
}
#content span {
	display: block;
	font-weight: bold;
	padding-bottom: 3px;
}
/*stories with cycle plugin*/
.story img {
	background: #d5d5d5;
	padding: 5px;
	margin-right: 20px;
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;
	-webkit-border-radius: 5px;
	-border-radius: 5px;
	float: left;
}
#nav {
	margin-top: 10px;
}
#prev2 {
	color: #d19107;
	font-size: 11px;
	float: left;
	cursor: pointer;
	line-height: 1.4em;
}
#next2 {
	color: #d19107;
	font-size: 11px;
	margin-left: 10px;
	float: left;
	cursor: pointer;
	line-height: 1.4em;
}
#prev2:hover, #next2:hover {
	border-bottom: 1px solid #d19107;
}

#content p {
    padding-bottom: 15px;
}

/*list with bullet*/
ul.star_bullet {
	background: none;
	list-style: none;
	padding-top: 5px;
}
ul.star_bullet li {
	background: url(../images/bullet.png) no-repeat 0 6px;
	padding-left: 20px;
	line-height: 2em;
	display: block;
}
/*news and events*/
ul.news li {
	list-style: none;
	background: none;
	padding-bottom: 15px;
}
/*content_bottom*/
/*---------------------------------------------------------------------------*/
#content_bottom_bg {
	background: url(../images/horizontal-divider-top.png) repeat-x top #558729;
	width: 100%;
    border-bottom: 1px solid #9cc17c;
    border-top: 1px solid #3d641b;
}
#content_bottom {
	width: 940px;
	margin: 0 auto;
	padding: 10px 0px 10px 0px;
	color: #d4d4d4;
}
#content_bottom a {
	color: #d4d4d4;
}
/*----------contact form----------*/
form.contact_form {
	width: 460px;
}
form.contact_form fieldset {
	border: none;
	background: none;
}
form.contact_form fieldset p {
	background: none;
	padding: 0;
	margin: 0;
	display: block;
}
form.contact_form label {
	width: 120px;
	font-size: 12px;
	color: #d4d4d4;
	font-weight: bold;
	padding-top: 10px;
	display: inline-block;
	float: left;
}
form.contact_form input {
	background:url(../images/txt-fld.png) no-repeat;
	width: 324px;
	height: 24px;
	padding: 8px;
	margin: 10px 0px 0px 0px;
	font-family: Arial, Trebuchet MS, Verdana, sans-serif;
	font-size: 12px;
	line-height: 2em;
	border: none;
	outline: none;
	float: left;
}
form.contact_form textarea {
	background: url(../images/txtarea.png) no-repeat;
	width: 330px;
	height: 150px;
	padding: 5px;
	margin: 10px 0px 0px 0px;
	font-family: Arial, Trebuchet MS, Verdana, sans-serif;
	font-size: 12px;
	line-height: 2em;
	border: none;
	outline: none;
	float: left;
}
form.contact_form input.submit {
	background: url(../images/submit-btn-sprite.png) no-repeat 0 0;
	width: 110px;
	height: 40px;
	margin: 10px 0px 0px 120px;
	padding: 0;
	font-family: Arial, Trebuchet MS, Verdana, sans-serif;
	color: #333333;
	font-size: 16px;
	font-weight: bold;
	text-shadow: 0px 1px 0px #c9c9c9;
	border: none;
	cursor: pointer;
	outline: none;
	float: left;
}
form.contact_form input.submit:active {
	background: url(../images/submit-btn-sprite.png) no-repeat 0 -60px;
}
form.contact_form label.error {
	width: 460px;
	color: #c52c02;
	font-style: italic;
	font-size: 10px;
	line-height: 1em;
	float: left;
	text-align: right;
	margin: 0;
	padding: 0;
}
form.contact_form #result {
	width: 340px;
	margin-left: 120px;
	float: left;
	text-align: left;
	padding-top: 5px;
}
/*----------map----------*/
.map {
	width: 450px;
	height: 230px;
	padding:5px;
	background: #565656;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-top: 10px;
	margin-bottom: 40px;
	float: left;
}
/*content_bottom*/
/*---------------------------------------------------------------------------*/
/*Backgroung image i.e dotted line for "footer_bg" is of same height (30px) as that for other above divs.
Only difference is, it is jpg image. So if you are changing bg color you need to change this image's color too, in PSD.*/
#footer_bg {
	background: url(../images/footer-divider.jpg) repeat-x top #cfc094;
	width: 100%;
    border-top: 1px solid #8a7b4e;
}
#footer {
	width: 940px;
	margin: 0 auto;
	padding: 10px 0px 10px 0px;
	color: #333333;
}
#footer p {
	padding-top: 10px;
	float: left;
}
#footer a {
	color: #333333;
}
#footer ul {
	float: right;
}
#footer ul li {
	list-style: none;
	background: none;
	float: left;
	padding-left: 10px;
}