@charset "utf-8";

/* Home Page Stylesheet for Keystone Human Services */

/*******************************
	COLOR PALETTE
*******************************

Black 			#000000 
White			#ffffff
Gray VV Lt		#e7e7e8
Gray V Lt		#d1d2d4
Gray Lt			#bbbdc0
Gray			#58595b (body copy)
Blue VV Lt		#BFCAD4
Blue V Lt		#c6d6e6
Blue Lt			#8095aa
Blue			#55728e (links)
Blue Dk			#445b72
Blue V Dk		#334455
Beige Lt		#F9F4DE
Beige			#f5eed4
Beige 			#F2E9C5 (keep this?)
Gold Lt			#b29f59 (heading 1 subhead)
Gold			#857743 (heading 1)
Taupe V Lt		#bbb5b1
Taupe Lt		#99918a
Taupe			#776c63
Taupe DK		#55473c (matches 2010 annual report)
Green VV Lt		#cfdbc8
Green V Lt		#b8c8ad
Green Lt		#a0b691
Green			#88a476 (matches 2010 annual report)
Green Dk		#6d835e
Green V Dk		#526247
Green VV Dk		#36422f
*/


/*******************************
	ELEMENTS 
*******************************/

/* ---- Font Sizes ---- */
/*
Display pixel size: 16px;

Base font = 13px		13/16=.8125
font-size: 2.308em;		30/13 = 2.308
font-size: 2.154em;		28/13 = 2.154
font-size: 2.0em;		26/13 = 2.0
font-size: 1.846em;		24/13 = 1.846
font-size: 1.692em;		22/13 = 1.692
font-size: 1.538em;		20/13 = 1.538
font-size: 1.385em;		18/13 = 1.385
font-size: 1.231em;		16/13 = 1.231
font-size: 1.154em;		15/13 = 1.154
font-size: 1.077em;		14/13 = 1.077
font-size: 1.0em;		13/13 = 1.0
font-size: .923em;		12/13 = .923
font-size: .846em;		11/13 = .846
font-size: .769em;		10/13 = .769
*/

/*
h1 {
	font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.846em;
	font-weight: normal;
	color:#857743;
	background:#fff;
	margin:0 0 .5em;
}
h2 {
	font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.692em;	
	font-weight: normal;
	color:#6d835e;
	background:#fff;
	margin:1em 0 .5em;
}
h3 {
	font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.385em;	
	font-weight: normal;
	color:#857743;
	background:#fff;
	margin:1em 0 .5em;
}
h4 {
	font-weight:normal;
	font-size: 1.231em;	
	font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif;
	margin:1.2em 0 .5em;
	color:#526247;
	background:#fff;
}
h5 {
	font-weight:normal;
	font-size: 1.077em;	
	font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif;
	margin:1.2em 0 .5em;
	color:#6d835e;
	background:#fff;
}
h6 {
	font-weight:bold;
	font-size: 1.0em;	
	font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif;
	margin:1.2em 0 .5em;
	color:#000;
	background:#fff;
}
*/


/***********************************
	POSITIONING
***********************************/

#content-wrapper { /* contains #main-content, #featured-content, and #promotional-content */
	width: 980px;
}
#main-content {
	width: 690px;
	margin-top:0px;
	border:none;
}
#featured-navs-container {
	display:none;
	visibility:hidden;
}


/* SLIDESHOW
*********************************/

div#slideshow {
	margin-top:20px;
width:690px;	
height:389px;
border:1px solid #bfcad4;	
position:relative;
}
div#slideshow .slide {
	width:670px;
	height:369px;
	border:1px solid #666;
	position:absolute;
	top:9px;
	left:9px;
	z-index:30;	
}
div#slideshow img {
/*border:1px solid #000;*/
}
div#slideshow p.slideshow-caption {
margin-top:0;
padding-top:0px;
font-size:.7em;
}


/* ---- Slideshow Buttons ---- */
div#slideshow ul#slideshow-buttons {
position:absolute;
z-index:31;
bottom: 20px;
right: 20px;
margin:0;
padding:0;
/* Hide at start up. Display via javascript, if enabled. */
display:none;
}
div#slideshow ul#slideshow-buttons li {
float:left;
list-style:none;
padding:0;
margin:0 0 0 4px;
width:20px;
height:20px;
background-position:center center;
background-repeat:no-repeat;
background-color: transparent;
text-indent:-9999px;
text-decoration:none;
cursor:pointer;
}
.inactive-slide-btn {
background-image: url(/assets/images/graphics/slideshow/slide-selector.png);
}
.active-slide-btn {
background-image: url(/assets/images/graphics/slideshow/slide-selector-active.png);
}

/* ---- Slides ---- */
/* Hide these slides at start up. They will be shown via javascript, if enabled. */
div#slideshow div#slide-2,
div#slideshow div#slide-3,
div#slideshow div#slide-4,
div#slideshow div#slide-5 {
display:none;
}




/*****************************
	PODS
*****************************/

/* ----- Homepage bipod ----- */
div#homepage-bipod {
	margin:20px auto;
	width:690px;
	background-image: url(/assets/images/graphics/pods/homepage-bi-pod/homepage-bipod-mid.png);
    background-position: top center;
    background-repeat:repeat-y;	
}
div#homepage-bipod div#homepage-bipod-top {
	width:690px;
	height:10px;
	background-image: url(/assets/images/graphics/pods/homepage-bi-pod/homepage-bipod-top.png);
    background-position: top center;
    background-repeat:no-repeat;	
}
div#homepage-bipod div#homepage-bipod-btm {
	clear:both;
	width:690px;
	height:10px;
	background-image: url(/assets/images/graphics/pods/homepage-bi-pod/homepage-bipod-btm.png);
    background-position: bottom center;
    background-repeat:no-repeat;	
}
div#homepage-bipod h2 {
	font-size: 1.846em;	/* 24/13 = 1.846 */
	background-color:transparent;	
	padding:0 26px;
	margin-top:13px;
	text-align:left;
}
div#homepage-bipod p {
	padding:0 26px;
	text-align:left;
}
div#who-we-are-content {
width:337px;
float:left;	
text-align:center;
}
div#who-we-are-content img {
	margin:10px auto;
border:none;
display:block;
}
div#what-we-do-content {
width:337px;
float:right;
text-align:center;	
}
div#what-we-do-content img {
	margin:25px auto 10px;
border:none;
display:block;
}

/* ----- Homepage Top Stories Pod ----- */
div#top-stories-pod {
	margin:20px auto;
	width:690px;
	background-image: url(/assets/images/graphics/pods/homepage-top-stories/homepage-top-stories-mid.png);
    background-position: top center;
    background-repeat:repeat-y;	
}
div#top-stories-pod-top {
	width:690px;
	height:10px;
	background-image: url(/assets/images/graphics/pods/homepage-top-stories/homepage-top-stories-top.png);
    background-position: top center;
    background-repeat:no-repeat;	
}
div#top-stories-pod-btm {
	clear:both;
	padding-top:20px;
	width:690px;
	height:10px;
	background-image: url(/assets/images/graphics/pods/homepage-top-stories/homepage-top-stories-btm.png);
    background-position: bottom center;
    background-repeat:no-repeat;	
}
div#top-stories-pod h2 {
	font-size: 1.846em;	/* 24/13 = 1.846 */
	color:#fff;
	background-color:#8095aa;	
	padding:10px 17px;
	margin-top:0px;
	margin-right:10px;
	margin-left:10px;
	text-align:left;
}
div#top-stories-pod h3 {
	font-size: 1.077em;	/* 14/13 = 1.077 */
	color:#000;
	background-color:transparent;	
	padding:0 26px;
	margin-top:13px;
	text-align:left;
}
div#top-stories-pod p {
	padding:0 26px;
	text-align:left;
}
div#top-stories-pod p a {
	background-color:transparent;
}
div#top-stories-pod hr,
div#top-stories-pod #top-stories-pod-col-1 hr,
div#top-stories-pod #top-stories-pod-col-2 hr {
	width: 293px;
	border-bottom:1px solid #bfcad4;
	margin:18px 25px 0;
}
div#top-stories-pod #top-stories-pod-col-1 {
	width: 345px;
	float:left;
}
div#top-stories-pod #top-stories-pod-col-2 {
	width: 344px;
	float:right;
}
div#top-stories-pod #top-stories-pod-col-1.border-pod {
	border-right:1px solid #bfcad4;
}
div#top-stories-pod #top-stories-pod-col-2.border-pod {
	border-left:1px solid #bfcad4;
}


/* ----- Homepage Story Pod ----- */
div.homepage-story-pod {
	margin:20px auto;
	width:690px;
	background-image: url(/assets/images/graphics/pods/homepage-story-pod/homepage-story-pod-mid.png);
    background-position: top center;
    background-repeat:repeat-y;	
}
div.homepage-story-pod-top {
	width:690px;
	height:10px;
	background-image: url(/assets/images/graphics/pods/homepage-story-pod/homepage-story-pod-top.png);
    background-position: top center;
    background-repeat:no-repeat;	
}
div.homepage-story-pod-btm {
	clear:both;
	padding-top:20px;
	width:690px;
	height:10px;
	background-image: url(/assets/images/graphics/pods/homepage-story-pod/homepage-story-pod-btm.png);
    background-position: bottom center;
    background-repeat:no-repeat;	
}
div.homepage-story-pod h2 {
	font-size: 1.846em;	/* 24/13 = 1.846 */
	background-color:transparent;
	padding:0px 17px;
	margin-top:14px;
	margin-right:10px;
	margin-left:10px;
	text-align:left;
}
div.homepage-story-pod h3 {
	font-size: 1.077em;	/* 14/13 = 1.077 */
	color:#000;
	background-color:transparent;	
	padding:0 26px;
	margin-top:13px;
	text-align:left;
}
div.homepage-story-pod p {
	padding:0 26px;
	text-align:left;
}
div.homepage-story-pod p a {
	background-color:transparent;
}
div.homepage-story-pod img.float-right {
	margin-top:20px;
	margin-right:30px;
}












/* ----- 530 wide pod ----- */
div#pod-530 {
	margin:20px auto;
	width:530px;
	background-image: url(/assets/images/graphics/pods/pod-530/pod-530-mid.png);
    background-position: top center;
    background-repeat:repeat-y;	
}
div#pod-530 div#pod-530-top {
	width:530px;
	height:10px;
	background-image: url(/assets/images/graphics/pods/pod-530/pod-530-top.png);
    background-position: top center;
    background-repeat:no-repeat;	
}
div#pod-530 div#pod-530-btm {
	width:530px;
	height:10px;
	background-image: url(/assets/images/graphics/pods/pod-530/pod-530-btm.png);
    background-position: bottom center;
    background-repeat:no-repeat;	
}
div#pod-530 h2.title-bar {
	margin:0px 10px 30px;
	padding:10px;
	color:#fff;
	background-color:#778ea5;
}
div#pod-530 h2 {
	margin:20px 30px 10px;
	background-color:transparent;
}
div#pod-530 h3 {
	margin:20px 30px 10px;
	color:#857743;
	background-color:transparent;
}
div#pod-530 p {
	margin:8px 30px;
}
div#pod-530 a {
	background-color:transparent;
}
div#pod-530 a:hover {
	/*background-color:#dde3e8;*/
}
div#pod-530 img.float-left {
	margin-left:30px;
}
div#pod-530 img.float-right {
	margin-right:30px;
}