/* CSS Document */
/* 7.6.09 */
/* Author: www.randycaruso.com */

html { min-height: 100%; xmargin-bottom: 1px; }
* { xxmargin: 0; xpadding: 0; }
html, body { height: 100%; }
body { height: 100%; font-size: 62.5%; font-family: Helvetica, Arial, sans-serif; margin: 0; padding: 0; xbackground: #E5E5E5 url(../images/background-strip.gif) repeat-y center; }


.videomark {
	xbackground: url(../images/video-mark.jpg) no-repeat 720px 410px;
}

.videohome {
	float: right;
	width: 226px;
	margin: -112px -15px 0 0;
	xpadding: 0 0 0 20px;
	display: inline;
}


.about-video { float: right; margin: 0 0 0 10px; text-align: right;}

.style2 {
	color: #99295E;
	font-size: 1.2em;
	text-align: right;
	padding: 5px 0 0 12px;
	line-height: 1.7em;
}

/* ---  Centers the Block in the Page ---- */	

#distance { float: left; width: 1px; height: 50%; margin-bottom: -338px; /* ENTER half of container's height *//* ENTER half of container's height */ }
#column { margin: 0 auto; clear: left; position: relative; text-align: left; width: 915px; height: 676px; /* ENTER full  container height */ /* ENTER full  container height */ xbackground-color: Aqua; }

#template-distance { float: left; width: 1px; height: 50%; margin-bottom: -384px; }
#template-column {
	margin: 0 auto;
	clear: left;
	position: relative;
	text-align: left;
	width: 915px;
	xheight: 768px;
}


#content { float: right; width: 780px; xmargin: 0 42px 0 0; xdisplay: inline; xborder: 1px solid yellow; }
#main { float: left; width: 640px; padding: 30px; xborder: 1px solid blue; }






/* -------------- HOME PAGE  ----------------- */

#top { height: 118px; }

#homelogo { float: left; width: 213px; height: 118px; float: left; background: url(../images/home/homelogo.gif) no-repeat 0px 0px; }
#homelogo h1 { display:none; }

#homeheader { width: 640px; height: 86px; float: right; display: inline; margin: 32px 33px 0 0; }
#homeheader p { color: #508bc2; }

#homehero { width: 915px; height: 350px; margin: 5px 0 0 0; background: url(../images/home/faces.jpg) no-repeat; padding: 0; }

#home-donate {
	width: 102px;
	height: 29px;
	float: left;
	margin: -25px 28px 0 0;
	display: inline;
}

/* --- Address on Home Page --- */	

#home-footer-address { color: #787878; font-size: 1.1em; padding: 0px 0 0 0px; }
#home-footer-address a { text-decoration: none; }
#home-footer-address a:hover { text-decoration: underline; }
#home-footer-address li { display: inline; margin: 0; padding: 0 12px 0 0; }
#home-footer-address ul { margin: 0; padding: 0 0 3px 0; }

.address-buffer { padding-right: 12px; }

	

.home-donate { margin: 10px 0 0 40px; }

/* -------------------- NAV -------------------- */	

#nav { font-size: 1.3em; }

#nav a { text-decoration: none; margin: 2px 0 0 -20px; padding: 0 0 0 14px; }
#nav li a:hover { background: url(../images/bullet.gif) no-repeat 0 3px; margin: 2px 0 0 -20px; padding: 0 0 0 14px; text-decoration: none; xlist-style-type: none; }

#nav ul { margin: 0 0 0 40px; padding: 0; }
#nav li { padding-bottom: 3px; list-style-type: none; }


#template-nav { margin: 0 0 0 3px; }


/* -------------------- Basic Template Objects -------------------- */	
#logo { background: url(../images/logo.gif) no-repeat; width: 200px; height: 163px; }
#logo h1 { display: none; }

.donate { margin: 42px 0 0 35px; }

#address { margin: 142px 0 0 37px; color: #9cab74; font-size: .9em; line-height: 1.8em; }
#address a { color: #9cab74; text-decoration: none;}
#address a:hover { 	color: #b3529f; }

.about { background: url(../images/header-about.jpg) no-repeat 0 8px; }
.whatwedo { background: url(../images/header-whatwedo.jpg) no-repeat 0 8px; }
.volunteer { background: url(../images/header-volunteer.jpg) no-repeat 0 8px; }
.contact {
	background: url(../images/header-contact.jpg) no-repeat 0 8px;
}



/* -------------------- Right Column -------------------- */	
.right-column {
	float: right;
	width: 639px;
	margin: 0 24px 0 0;
	padding: 190px 0 0 0;

}

.xright-column h1 { color: #727272; font-size: 1.5em; margin: 0 0 9px 0; }
.right-column p { color: #919191; margin: 0 0 10px 0; line-height: 1.4em; }



.scroll {
	height: 420px;
	overflow:auto;
	padding: 0 50px 0 0;
}




.right-column ul {
	margin: 10px 0 12px 10px;
	padding: 0;
	xfont-size: 1.2em;
}

.right-column li { padding: 0px 0px 8px 14px; font-size: 1.2em; background: url(../images/bullet2.gif) no-repeat 0px 3px; list-style-type: none; }






.highlight { background-color: #fcf5da; color: black; padding: 22px; margin: 15px 0 15px 0; }
.highlight p { color: black; }










/* -------------------- Left Column-------------------- */	

.left-column { float: left; width: 220px; }





























/* --------------------------- Footer --------------------------- */	

#footer { xwidth: 858px; height: 100px; margin: 25px 25px 0 35px; }
#footer p { margin: 0; padding: 0; line-height: 1em; }

#cats { height: 25px; width: 858px; }
.programs { color: #b8c098; float: left; font-size: 1.8em; height: 25px; }

.volunteering a {
	color: #b3529f;
	float: right;
	height: 25px;
	text-decoration: none;
	margin: 5px 3px 0 0;
}
.volunteering a:hover { text-decoration: underline; }


/* ----- Sites Listing ----- */	

#sites { margin: 0px 0 10px 0; width: 855px; border-top: solid 2px #b8c098; padding: 5px 0 10px 0px; }
#sites ul { padding: 0; margin: 0; }
#sites li {
	display: inline;
	font-size: 11px;
}
.spacer {
	margin: 0 36px 0 0;
}

#sites a { color: #b8c098; text-decoration: none; xpadding: 0; xmargin: 0;}
#sites a:hover { color: #b3529f; text-decoration: underline; }

.buffer { color: #b8c098; padding-right: 16px; }















/* -------------- CONTACT PAGE  ----------------- */

.xcontact { text-indent: -100em; overflow: hidden; width: 367px; height: 38px; background: url(../images/contact-us.gif) no-repeat 0 7px; }
#contactinfo { float: left; width: 230px; height: 300px; border-right: 1px solid #BDD9EA; margin: 0 0 10px 0; }

#contactform {
	color: #919191;
	xwidth: 370px;
	xfloat: right;
	xmargin: 0 80px 0 0;
	xcolor: white;
	font-size: 1.1em;
	xdisplay: inline;
}
.field {
	color: #506569;
	background-color: #E5E5E5;
	border: 1px solid #9E9E9E;
	font-size: 1.1em;
	font-family: arial, helvetica, sans-serif;
}
.single { height: 18px; width: 140px; margin: 0; padding: 3px; }
.comment {
	height: 85px;
	width: 330px;
	padding: 3px 0 0 3px;
	overflow: hidden;
	!important: ;
	font-size: 1.1em;font-family: arial, helvetica, sans-serif;
}

/* -------------------- submit button with rollover -------------------- */	
.submit {
	background: url(../images/send.gif) no-repeat;
	height: 20px;
	width: 47px;
	border: none;
	padding-top: 17px;
	xfloat: right;
	cursor: pointer;
	margin: 0 3px 0 0;
}
.submit:hover { xbackground: url(../images/send.gif) no-repeat 0 -17px; }

.cell { padding: 0px 0 10px 0; }
.wide { xwidth: 370px; }












/* ================= Typography ================= */	

/* -------------------- Headers  -------------------- */
p { font-size: 1.2em; margin: 0 0 .7em 0;  }

	h1 { font-size: 2.1em;  margin: 0 0 .3em 0;   color: #276FB3;}
	h2 { font-size: 1.6em;  margin: 0 0 .4em 0;  color: #727272; }
	h3 { font-size: 1.4em;  margin: 0 0 .4em 0;   color: #9cab74;}
	h3 a { color: #9cab74; }
	h3 a:hover { color: #276FB3; text-decoration:underline;}
	h4 { font-size: 1.7em;  margin: 0 0 .4em 0;   color: #727272;}
	h5 { font-size: 1.5em; margin: 0 0 .4em 0;  color: #727272;}
	h6 { font-size: 1.3em;  margin: 0 0 .4em 0;   color: #727272;}

table { margin: 0 0 3px 0; }





/* -------------------- LINKS  -------------------- */
:focus { outline: 0; }
a { border: 0 none; }
a { color: #727272; }
a:hover { color: #b3529f; }
a:focus { color: #276FB3; }
img { border: none; }










/* -------------------- Blockquotes   -------------------- */
blockquote {
	font-style: italic;
	color: #919191;
	font-size: 1.2em;
	margin: 5px 0 24px 25px;
	line-height: 1.4em;
}









/* --------------------  Ephemera ------------------- */	
.social { padding: 5px 0 5px 10px; }
img a { border: none; }
caption { background:#eee;padding: 10px;}
.small { font-size: .9em; margin-bottom: 1.875em; line-height: 1.875em; }
.xsmall { font-size: 85%;}
.large { font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
.hide { display:none;}
#hide { display:none;}

.quiet {color:#666;}
.loud {color:#000;}
address { font-size: 1.3em; margin: 0 0 1.5em 1em; font-style: italic; }
abbr, acronym {border-bottom: 1px dotted #666; }
sup, sub {line-height:0;}
.box { padding: 1.5em; margin-bottom: 1.5em; background: #E5ECF9; }

.floatleft {float: left;}
.floatright {float: right;}

.center {text-align: center;}

.picleft { float: left; padding: 0 8px 8px 0; }
.picright { float: right; padding: 0 0 8px 8px; }
#clear{ clear: both; }
.clear {clear: both;}



/* -------------------- stupid table tricks -------------------- */	

.one { width: 200px; padding: 0  30px 10px 0; }



/* ------------------------  hr fixes ------------------------*/

*+html hr { xmargin: 0em 0 -7px 0; /*IE 7 bugfix*/ }
* html hr { xmargin: 0em 0 -7px 0; /*IE 6 bugfix*/ }

hr { background: #ddd; margin: 25px 0  20px 0; clear: both; float: none; width: 100%; height: 2px; border: none; }

*hr { background: #ddd; color: #ddd; clear: both; float: none; width: 100%; height: 2px; margin: 5px 0 1.45em 0; border: none; }