/*
COLORS
Define main colors used in a site here for easy reference

Blue = 0066cc
Lt Blue = CFF7FF
Dk Blue = 00849F

*/

body {
	margin: 0;
	font: 62.5%/1.5em arial, helvetica, sans-serif;
	text-align: center;
	color: #666;
	background: #fff url() 0 0 no-repeat;
}

/* ----------------
	DEFAULTS AND RESETS
    ------------- */

/* PC FF3 adds an outline to Flash objects? */
a, object {
	outline: none;
}

a img { border: none; }

h1, h2, h3, h4, h5, h6 {
    color: #58595b;
	margin: 0;
	line-height: 1.3em;
	clear: both;
}  

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, 
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited  {
    color: #00aeef;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    color: #000;
} 

h1 { font-size: 1.6em; padding-bottom: .5em; margin-bottom: 0.5em; border-bottom: 2px solid #9d9fa2;}
h2 { font-size: 1.3em; margin: 1em 0;}
h3 { font-size: 1.2em; }
h4 { font-size: 1.1em; }
h5 { font-size: 1em; }
h6 { font-size: 1em; } 

dt {
	font-weight: bold;
	margin-bottom: 0;
}
dd {
	margin: 0 1.5em;
}
	dd p:first-child {
		margin-top: .5em;
	}
 
a,
a:link,
a:visited { color: #45aed5; }

a:hover,
a:active { color: #f8a039; }

strong, b { font-weight: bold; }
em, i { font-style: italic; }

li { line-height: 1.5em; }

p { margin-top: 0; font-size: 1em; line-height: 1.35em}

hr {
	color: #9d9fa2;
	background-color: #9d9fa2;
	border: 0;
	height: 2px;
	clear: both;
	margin: 1em 0;
}

ul, ol {
    margin: 0 1.2em;
    padding: 0;
    list-style: disc;
    color: #666;
}

ol {
    list-style: decimal;
    padding: 0;
}
	ol ul,
	ol ol {
		margin: 0;
		padding: 0;
	}

/* orderedList class can be assigned manually, or with jQuery method. Intended to style bullets differently than text.  */
ol.orderedList li span {
    color: #666;
}
ol.orderedList {
	color: #58595B;
}
	li {
	    margin: 0;
	    padding: 0;
	} 

blockquote, q {
    margin: 0;
    padding: 1em 0;
    font-size: 1em;   
    color: #666; 
}   
	blockquote span {
		font-style: normal;
		font-size: .8em;
	}
	blockquote p {
		font-family: Georgia, Serif;
	}

small,
.small { 
    font-size: .8em;
}

/* table { border: 0; border-collapse: collapse; } */

address { font-style: normal; }
form { margin: 0; }


/* ----------------
	PAGE STRUCTURE
	Elements that make up the skeleton of the layout and holds things together
    ------------- */
#page {
	width: 996px;
	margin: 20px auto;
	border-left: 2px solid #a7a9ac;
	border-right: 2px solid #a7a9ac;
	text-align: left;
	padding: 0;
	font-size: 1.2em; /* this, along with body font size of 62.5% renders type approximately 12px in size across all browsers */
}

#wrapper {
	position: relative;
	margin: 0 20px;	
}

#contentInner {padding-bottom: 2em;}

#header {
	position: relative;
	height: 114px;
	margin: 0 -22px;
	background: url(../images/design/bg_top.gif) 0 0 no-repeat;
}
	#headerBar {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 956px;
		margin: 0 20px;
		height: 1.8em;
		background: #747578 url(../images/design/bg_bar_header.gif) 0 0 repeat-x;
	}
		#headerBar p {
			margin: .25em 1em;
			color: #f8a039;
			font-size: .85em;
		}
	
#banner {
	height: 150px;
	padding: 10px 0;
	position: relative;
}
	.messageArea {
		float: left;
		position: relative;
		height: 150px;
		width: 315px;
		background-color: #f8a039;
	}
		.messageAreaInner {
			height: 6em;
			position: absolute;
			top: 50%;
			margin-top: -4em;
		}
		.messageArea p {
			font-size: 1.8em;
			line-height: 1.2em;
			color: #fff;
			margin: 0 1em 1em 1em;
		}
		
	#banner .imageOne,
	#banner .imageTwo {
		float: left;
		position: relative;
		width: 390px;
		height: 150px;
		margin-left: 10px;
		background-position: 50% 50%;
		background-repeat: no-repeat;
	}
	#banner .imageTwo {
		width: 230px;
	}
	
#searchBox {
	position: absolute;
	top: 22px;
	right: 25px;
	padding: 5px 10px;
	text-align: center;
	color: #fff;
	background: #95979a url(../images/design/bg_search_box.jpg) 0 0 repeat-x;
}	
	#searchBox p { margin: 0; font-size: 0.8em; }
	#searchBox span {
		width: 6px;
		height: 6px;
		display: block;
		position: absolute;
		background: url(../images/design/bg_btn_corners.png) 0 0 no-repeat;
	}
		#searchBox span.tl { top: 0; left: 0; background-position: 0 0; }
		#searchBox span.tr { top: 0; right: 0; background-position: -6px 0; }
		#searchBox span.bl { bottom: 0; left: 0; background-position: 0 -6px; }
		#searchBox span.br { bottom: 0; right: 0; background-position: -6px -6px; }

	#searchBox .submit {
		display: block;
		margin-left: 35%;
		margin-top: 0.25em;
	}
	
#columnsMain {
	float: left;
	width: 810px;
}
	#contentMain {
		width: 615px;
		float: right;
	}
		#contentMainInner {
			padding: 20px;
		}
	#contentSub {
		float: left;
		width: 170px;
		margin-left: 1em;
	}
	
	#contentSubInner,
	#contentFmaInner {
		padding: 20px 0;
	}
	
	body.home  #contentFmaInner {
		text-align: right;
	}
	
		body.home  #contentFmaInner .btn.narrow {
			margin: 0;
			margin-left: 10px;
		}
	
	body.full #contentMain {
		float: left;
		width: 810px;
	}
		body.full #contentMainInner {
			padding-left: 0;
		}
	body.full #contentSub {
		display: none;
	}
		
	
#contentFma { /* FMA = flexible messaging area. This column doesn't hold any real content */
	float: right;
	width: 120px;
	text-align: center;
}

	#contentFma a {
		display: block;
	}
	
	#contentFma a img {
		margin-bottom: 0.5em;
	}
	
#footer {
	height: 20px;
	margin: 0 -22px;
	padding: 5px 20px;
	text-align: center;
	background: url(../images/design/bg_bottom.gif) 0 100% no-repeat;
}

/* These corner_sm_*.png images should have been 1 sprite... what was I thinking? */
.cornerSmall {
	position: absolute;
	width: 4px;
	height: 4px;
	display: block;
	background: url(../images/design/corner_sm_tl.png) 0 0 no-repeat;
}
	.tl { top: 0; left: 0;}
	.tr { top: 0; right: 0; }
	.bl { bottom: 0; left: 0; }
	.br { bottom: 0; right: 0; }
	
	.cornerSmall.tr { background-image: url(../images/design/corner_sm_tr.png); }
	.cornerSmall.bl { background-image: url(../images/design/corner_sm_bl.png); }
	.cornerSmall.br { background-image: url(../images/design/corner_sm_br.png); }
	
.cornerLarge {
	position: absolute;
	width: 15px;
	height: 15px;
	display: block;
	background: url(../images/design/corner_lg_tl.png) 0 0 no-repeat;
}	
	.cornerLarge.tr { background-image: url(../images/design/corner_lg_tr.png); }
	.cornerLarge.bl { background-image: url(../images/design/corner_lg_bl.png); }
	.cornerLarge.br { background-image: url(../images/design/corner_lg_br.png); }

/* ----------------
	PAGE STRUCTURE ELEMENTS
	Elements  such as logos, search bars, and any other design element repeated throughout the site, but doesn't effect the structural layout
    ------------- */
#logo {
	width: 115px;
	height: 70px;
	display: block;
	background: url(../images/design/logo.gif) 0 0 no-repeat;
	position: absolute;
	top: 20px;
	left: 20px;
	margin: 0;
	padding: 0;
	font-size: 1em;
}
	#logo a {
		width: 115px;
		height: 70px;
		display: block;
		text-indent: -9999px;
	}
	
	h1#logo { border: 0; }
	
.focalBox {
	border: 2px solid #A7A9AC;
	padding: 20px;
	margin: 5px;
	/* keeping it simple for browsers that support it */
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
}
	.focalBox.half {
		float: left;
		width: 341px;
	}


#contentMain .photoStream ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 1em;
}
	#contentMain .photoStream li {
		float: left;
		margin: .2em;
	}

/* ----------------
	NAVIGATION
    ------------- */
#navMain {
	position: relative;
	background: #d5553c url(../images/design/bg_bar_nav.gif) 0 0 repeat-x;
}
	#navMain ul {
		margin: 0;
		padding: 0.5em 1em;
		list-style: none;
		height: 1em;
		text-align: center;
	}
		#navMain ul li {
			float: left;
			margin: 0 1em;
			display: block;
		}
		
		#navMain ul li:last-child {
			margin-right: 0;
		}
		
			#navMain a {
				height: 13px;
				display: block;
				text-indent: -9999px;
				background: url(../images/design/nav.jpg) no-repeat;
			}
			
	/* CSS Sprites for Navigation */		
	a#home {width: 30px; background-position: 0 0;}
	a#home:hover {width: 30px; background-position: 0 -13px;}
	li.active a#home {width: 30px; background-position: 0 -13px;}
	
	a#why-books {width: 65px; background-position:  -31px 0;}
	a#why-books:hover {width: 65px; background-position: -31px -13px;}
	li.active a#why-books {width: 65px; background-position: -31px -13px;}
	
	a#about {width: 56px; background-position:  -95px 0; }
	a#about:hover {width: 56px; background-position: -95px -13px;}
	li.active a#about {width: 56px; background-position: -95px -13px;}
	
	a#success-stories {width: 78px; background-position:  -151px 0; }
	a#success-stories:hover {width: 78px; background-position: -151px -13px;}
	li.active a#success-stories {width: 78px; background-position: -151px -13px;}
	
	a#donate {width: 65px; background-position:  -230px 0; }
	a#donate:hover {width: 65px; background-position: -230px -13px;}
	li.active a#donate {width: 65px; background-position: -230px -13px;}
	
	a#books-computers {width: 102px; background-position:  -294px 0; }
	a#books-computers:hover {width: 102px; background-position: -294px -13px;}
	li.active a#books-computers {width: 102px; background-position: -294px -13px;}
	
	a#fundraising {width: 61px; background-position:  -396px 0; }
	a#fundraising:hover {width: 61px; background-position: -396px -13px;}
	li.active a#fundraising {width: 61px; background-position: -396px -13px;}
	 
	a#volunteer {width: 51px; background-position:  -458px 0; }
	a#volunteer:hover {width: 51px; background-position: -458px -13px;}
	li.active a#volunteer {width: 51px; background-position: -458px -13px;}
	
	a#media-press {width: 75px; background-position:  -508px 0; }
	a#media-press:hover {width: 75px; background-position: -508px -13px;}
	li.active a#media-press {width: 75px; background-position: -508px -13px;}
	
	a#partners-funders {width: 99px; background-position:  -584px 0; }
	a#partners-funders:hover {width: 99px; background-position: -584px -13px;}
	li.active a#partners-funders {width: 99px; background-position: -584px -13px;}

#navTop {
	position: absolute;
	top: 0;
	right: 0;
}
	#navTop a {
		color: #fff;
		margin: 0 1em;
		text-decoration: none;
	}

#navSub {
	margin-bottom: 4em;
}

#navSub ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
	#navSub ul ul { 
		margin: 0 0 0 1em; 
	}
	#navSub a {
		color: #d3533c;
		text-decoration: none;
		font-weight: bold;
	}
		#navSub a:hover {
			color: #F8A039;
		}
		
.contentNav {
	float: left;
	text-align: right;
	width: 140px;
	border-right: 1px solid #333;
	padding-right: 15px;
	margin: 2em 1em 0 0;
}

	#contentMain .contentNav ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
.contentColumn {
	float: right;
	width: 400px;
	margin-top: 2em;
}
	.contentColumn h1 {
		border: 0;
		margin: 0;
		color: #50a8b7;
	}
	.contentColumn h2 {
		margin: 0;
	}
	
				
/* ----------------
	TYPEOGRAPHY
    ------------- */

h1 a {
	font-size: .6em;
}

#contentMain ul,
#contentMain ol {
	margin: 1em 2em;
}


.quoteOpen,
.quoteClose { 
	font-size: 2em; 
	font-family: georgia, serif; 
	color: #ccc;
	vertical-align: -22%;
}

body.booksComputers .imageCaption {
	float: left;
}
.imageCaption {
	color: #666;
	font-size: .8em;
	padding-bottom: .5em;
}
	.imageCaption p {
		margin: 0;
		margin-top: 0.5em;
	}
	a .imageCaption {
		text-decoration: none;
	}

#columnMain img,
.imageCaption {
	margin: 2em;
}
	.imageCaption img {
		margin: 0;
		padding: 4px;
		border: 1px solid #ccc;
	}

#partner {
	overflow: hidden;
	margin-top: 1.5em;
	border-top: 2px solid #9D9FA2;
	padding-top: 1.5em;
}

	#partner img {
		margin-right: 1em;
	}
	
	
#footer {
	font-size: .8em;
}
	#footer a {
		text-decoration: none;
	}
	
.focalBox.full {
	font-size: 1.2em;
}
	.focalBox h1 { margin: 0; border: 0}


/* Home Page news Section */
.story {clear: left;}

.story h3 {
	margin-bottom: 0.5em;
}

.story h3 a {
	text-decoration: none;
	color: #58595B;
}

.story img, #storySummary img {margin-right: 1.5em; margin-bottom: 1.5em;}

	#storySummary h3 {margin-top: 1.5em;}
	#storySummary h3 a {
		text-decoration: none;
		color: #58595B;
	}
	
	#storySummary h3 a:hover {
		color: #00aeef;
	}
	
	#storySummary ul {
		margin:0; 
		font-size: 0.8em; 
		color: #000;
		list-style-position: inside;
	}

		#storySummary ul li {
			margin-bottom: 0.25em;
		}
		
		#storySummary ul li a {
			color: #000;
			text-decoration: none;
		}
		
			#storySummary ul li a:hover {
				color: #00aeef;
				font-weight: bold;
				font-size: 1.1em;
			}

.updates {
	font-size: 0.75em;
	color: #666666;
	text-align: center;
}

.booksNav,
.booksNavLast
 {
	float: left;
	width: 93px;
	height: 56px;
	display: block;
	text-indent: -9999px;
	margin-right: 3px;
}

.booksNavLast {margin-right: 0;}

.booksKindergarten {background: url(../images/design/books-kindergarten.gif) 0 0 no-repeat;}
.booksPrimaryJunior {background: url(../images/design/books-primary-junior.gif) 0 0 no-repeat;}
.booksPrimarySenior {background: url(../images/design/books-primary-senior.gif) 0 0 no-repeat;}
.booksSecondaryBooks {background: url(../images/design/books-secondary.gif) 0 0 no-repeat;}
.booksPostBooks {background: url(../images/design/books-post-secondary.gif) 0 0 no-repeat;}
.booksGeneral {background: url(../images/design/books-general-other.gif) 0 0 no-repeat;}

#bookCategories {
	clear: left;
	margin-bottom: 1.5em;	
}

	#bookCategories li {
		margin-bottom: 1em;
		line-height: 1;
	}
	
		#bookCategories li a {
			text-decoration: none;
			color: #666666;
			font-size: 0.9em;
		}
		
		#bookCategories li a:hover {color: #45AED5;}
		
.bookRequest {
	font-size: 1.2em;
	padding-top: 0;
	border: none;
	float: right;
	background: url(../images/design/request-form.jpg) 0 0 no-repeat;
	height: 30px;
	width: 105px;
	text-indent: -9999px;
	display: block;
}

/* ----------------
	BUTTONS
    ------------- */
.btn {
	display: block;
	padding: 1em;
	text-align: center;
	color: #fff;
	line-height: 1.2em;
	text-decoration: none;
	margin: .5em 0;
	position: relative;
}
	.btn a,
	a.btn { 
		color: #fff !important; 
		font-size: 1.2em;
	}
	.btn span.tl, 
	.btn span.tr,
	.btn span.bl,
	.btn span.br { 
		display: block; 
		width: 6px; 
		height: 6px; 
		background: url(../images/design/bg_btn_corners.png) 0 0 no-repeat; 
		position: absolute;
		font-size: 0; /* IE 6 was increasing the height of the span based on font-size */
	}
	.btn span.tl {
		background-position: 0 0;
	}
	.btn span.tr { 
		background-position: -6px 0; 
	}
	.btn span.bl {
		background-position: 0 -6px;
	}
	.btn span.br {
		background-position: -6px -6px;
	}

	

	.btn.blue { background: #689da6 url(../images/design/bg_btn_blue.jpg) 0 0 repeat-x; }
	.btn.green { background: #8aba44 url(../images/design/bg_btn_green.jpg) 0 0 repeat-x; }
	.btn.grey { background: #77797c url(../images/design/bg_btn_grey.jpg) 0 0 repeat-x; }
	.btn.ltBlue { background: #79ccec url(../images/design/bg_btn_lt_blue.jpg) 0 0 repeat-x; }
	.btn.dkBlue { background: #00acee url(../images/design/bg_btn_dk_blue.jpg) 0 0 repeat-x; text-align: left; font-size: .8em; }
	.btn.purple { background: #9e1f63 url(../images/design/bg_btn_purple.gif) 0 0 repeat-x; }
	.btn.orange { background: #f06433 url(../images/design/bg_btn_ornage.gif) 0 0 repeat-x; }

	.btn.donate {
		position: relative; 
		width: 176px; 
		float: left; 
		margin-right: 5px; 
		padding: 0 5px 0 5px; 
	}

	.books {
			padding: 0 45px 0 5px; 
			margin-right: 5px; 
			float: left; 
			width: 66px;
			padding: 1em;
		}
	
	.books a {
			font-size: 1em;
			padding: 0;
			height: 2.5em;
			display: block;
			color: #fff;
			text-decoration: none;
		}	

	.donateForest { background: #43a786 url(../images/design/funds.gif) 50% 95% no-repeat;}
	.donateBlue {background: #689da6 url(../images/design/project.gif) 50% 95% no-repeat;}
	.donateGreen { background: #89b946 url(../images/design/honorafriend.gif) 50% 95% no-repeat;}
	.donateViolet { background: #9e1f63 url(../images/design/purple-book.jpg) 50% 95% no-repeat;}
	.donatePurple { background: #574fa1 url(../images/design/africa-purple.jpg) 50% 95% no-repeat; }
	
	.donateOptions {height: 218px; zoom: 1;}
	
	.bookOptions {height: 218px;}
	

	.booksPeriwinkle { background-image: none; background-color: #507abd; }
	.booksTeal { background-image: none; background-color: #50a8b7; }
	.booksGreen { background-image: none; background-color: #8cc63f; }
	.booksViolet { background-image: none; background-color: #9e1f63; }
	.booksOrange { background-image: none; background-color: #f7931e; }
	.booksPurple { background-image: none; background-color: #574fa1; }

	.donate a {
		color: #fff;
		text-decoration: none;
		font-size: 1.9em;
		display: block;
		padding-top: 1.1em;
		display: block;
		text-align: center;
		line-height: 1.25em;
	}
	
	.donate p {
		margin-top: 1em;
		padding: 0 0.5em;
	}
	
		.btn.donate.green a,
		.btn.donate.blue a {
			padding-top: .7em;
		}
	
	.btn.donate span.arrow {
		width: 35px;
		height: 35px;
		display: block;
		position: absolute;
		right: 5px;
		bottom: 10px;
		background: transparent url(../images/design/icon_circle.png) 0 0 no-repeat; 
	}
	
	.btn.books span.arrow { 
		width: 35px;
		height: 35px;
		display: block;
		position: absolute;
		right: 5px;
		top: .7em;
		background: transparent url(../images/design/icon_circle.png) 0 0 no-repeat; 
	}
		.btn.books span.arrow {
			position: relative;
			width: auto;
			background-position: 60% 0;
			right: 0;
			top: 3px;
		}
	
	.btn.narrow { 
		margin: .5em; 
		padding: .25em;
	}
		.btn.narrow.dkBlue { padding: 1.5em 1em; }
		.btn.narrow a {
			font-size: 1.5em;
			letter-spacing: .06em;
		}
		.btn.narrow b {
			color: #c7e0ef;
			font-weight: normal;
		}
		
	.btn h3 {
		text-transform: uppercase;
		color: #fff;
		font-size: .8em;
		font-weight: normal;
		margin: .3em -0.5em;
		letter-spacing: -0.05em;
	}
	
	.btn h3.specialInitiatives {
		margin: 0;
		background: url(../images/design/special-initiatives.gif) 9px 2px no-repeat;
		height: 23px;
		text-indent: -9999px;
		
	}
	
	.btn ul {
		margin: 1em 0 0 1em;
		padding-left: 0;
		text-align: left;
		color: #fff;
		font-size: .8em;
		list-style: none;
	}
		.btn.narrow ul a {
			font-size: 1em;
			letter-spacing: 0;
			color: #fff;
			text-decoration: none;
		}
		
.africaRecipients {
	width: 161px;
	background: url(../images/callouts/african_recipients-bottom.jpg) bottom left no-repeat;
}

	.africaRecipients ul {
		background: url(../images/callouts/african_recipients-top.jpg) 0 0 no-repeat;
		margin: 0;
		list-style-position: inside;
		padding: 125px 0 1.5em 1.5em;
	}
	
		.africaRecipients ul li {color: #FFF;}
		.africaRecipients ul li a {
			color: #FFF;
			text-decoration: none;
			font-size: 0.9em;
		}
		
		.africaRecipients ul li a:hover {text-decoration: underline;}
/*----------------------	
BOOKS and COMPUTERS PAGE 
---------------------*/
	#booksOptions {
		padding-left: 15%;
		clear: left;
	}
	
/* ----------------
	DONATE TO PROJECT ELEMENTS
    ------------- */
#mapArea {
	width: 410px;
	text-align: center;
	float: left;
	padding-right: 10px;
	padding-bottom: 2em;
}


#chooseAProject {
	border-left: 2px solid #9D9FA2;
	width: 143px;
	float: left;
	padding-left: 10px;	
}

	#chooseAProject h3 {
		font-size: 1.1em;
		margin-bottom: 0.5em;
	}
	
#chooseAProject ul.regions {
	margin: 0;
	list-style: none;
}

#chooseAProject ul.regions a {
	text-decoration: none;
	font-size: 0.9em;
	color: #000;
}

	#chooseAProject ul.regions a:hover {
		text-decoration: underline;
	}


#chooseAProject ul.regions a.regionName {
	font-weight: bold;
}

#chooseAProject ul.regions ul.projects {
	margin: 0;
	list-style: none;
}

#chooseAProject ul.regions ul.projects li.project {
	margin-bottom: 0.6em;
}

#chooseAProject ul.regions li.region {
	margin-bottom: 1em;		
}

#progressBar {
	background: url(../images/donations/AfricaProjectMeter_empty.gif) 0 0 no-repeat;
	width: 314px;
	height: 54px;
	position: relative;
	z-index: 1;
	margin: 1.5em 0px;
}

#currentProgress {
	background: url(../images/donations/AfricaProjectMeter.gif) 0 0 no-repeat;
	position: absolute;
	width: 314px;
	height: 54px;
	z-index: 2;
}

#countryContent {
	border-top: 1px solid #000;
	margin-top: 2em;
	text-align: left;
}

.project h3 {
	font-size: 1.7em;
	font-weight: bold;	
	margin-top: 2em;
}

.project h4 {
}

.imageCaption .donateButton {
	margin: 0.5em 0;
	display: block;
}

.donateButton {
	margin: 0.5em 0;
	width: 99px;
	height: 25px;
	display: block;
	background: url(../images/design/donate-now.jpg) 0 0 no-repeat;
	text-indent: -9999px;
}

/* ----------------
	JQUERY SLIDE ELEMENT
    ------------- */
    .ui-slider {
    	position: relative;
    	width: 66px;
    	height: 300px;
    	background: url(../images/design/DonateFunds_SlidingScale.gif) 0 0 no-repeat;
    }
    
    .ui-slider-handle {
    	width: 22px;
    	height: 22px;
    	position: absolute;
    	z-index: 10;
    	right: 0;
    	bottom: 0px;
    	background: green;
    	background: url(../images/design/DonateFunds_Slider.gif) 0 0 no-repeat;
    }
    
    #slider {
    	float: left;
    	width: 66px;
    	margin-bottom: 1.5em;
    }
    
    #donateValues {
    	width: 509px;
    	float: right;
    	padding-top: 15%;
    	position: relative;
    }
    
    #donateValues img {
    	position: absolute;
    	top: 50%;
    	display: none;
    }
    
/* Donate Images Specific Positions */

	img#donate-value-1 {left: 115px;} 
	img#donate-value-2 {left: 80px;}
	img#donate-value-3 {left: 25px;}
	img#donate-value-4 {left: 35px;}
	img#donate-value-5 {left: 75px;}
	img#donate-value-6 {left: 50px;}
	img#donate-value-7 {left: 35px; top: 25%}
	img#donate-value-8 {left: 40px;}
	img#donate-value-9 {left: 40px;}


/* ----------------
	FORM ELEMENTS
	Label widths are set via jQuery autoWidth, unless you want to set them manually.
    ------------- */
fieldset {
	border: 1px solid #e4e4e4;
	margin: 2em 0 0 0;
	padding: 0;
}
	fieldset ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
		fieldset li {
			clear: both;
			padding: .5em;
		}
			fieldset li.required {
				
			}			
		
fieldset legend {
	font-weight: bold;
	margin: 0;
}
	
fieldset label,
fieldset input[type="text"] {
    float: left;
    display: block;
}

div.bodyFieldArea label,
div.summaryFieldArea label {
    float: none;
    text-align: left;
}
div.bodyFieldArea iframe,
div.summaryFieldArea iframe {
	width: 100%;
	height: 350px;
}

fieldset label {
	text-align: right;
    margin-right: 5px;
    padding: 4px 0;
}
fieldset .inputText,
fieldset .inputTextarea,
fieldset .inputTextareaSmall {
    width: 170px;
    overflow: auto;
    padding: 4px;
}
fieldset .inputTextarea {
	height: 8em;
	width: 300px;
}
fieldset .inputTextareaSmall {
	height: 4em;
}
fieldset p.submit {
	text-align: center;
}
fieldset .errorText {
	background-color: #FEFF9F; 
}

form input.protect {
	display: none;
}

div.errors {
	background: #FEFF9F url(../images/bg_error.gif) 0 0 repeat-x;
	border: 1px solid #E0D75F;
	margin: 1em 0;
	width: 100%;
}
	div.errorsInner {
		padding-left: 80px;
		background: url(../images/big_error.gif) 15px 1em no-repeat;
	}
	
label span {
	color: #DF4545;
}

	
/* Donate Page Form */

p.donateSummary {color: #43a786;}

#donateAmount {
	clear: both;
}

#donateAmount div {
}

#step1 {
	padding: 1em 0;
	border-top: 2px solid #9D9FA2;
}

#step2 {
	border-top: 2px solid #9D9FA2;
	padding: 1em 0;
}

#step3 {
	padding: 1em 0;
	border-top: 2px solid #9D9FA2;
}

.steps p strong {
	color: #9D9FA2;
	font-size: 1.5em;
}

.steps p small {
	font-size: 0.8em;
	display: block;
}

span.step {
	font-size: 2em;
	color: #666;
	float: left;	
	margin-right: 0.5em;
	line-height: 1;
}

#donateAmountDescription {
	clear: left;
	text-align: center;
}

#donateAmount div p {
		display: inline;
	}
	
#donateAmount .inputText {
		width: 4em;
		margin-left: 0.5em;
	}
/* ----------------
	MISC
    ------------- */
.floatLeft {float: left;}
.floatRight {float: right;}
.alignLeft {text-align: left;}
.alighRight {text-align: right;}
.alignCenter {text-align: center;}
.clear {clear: both;}
.clearLeft {clear: left;}
.clearRight {clear: right;}

/* ----------------
	CLEAR FLOATS WITHOUT EXTRA HTML MARKUP
    ------------- */ 
.clearFix:after,
li.required:after { 
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden; 
}

/* ----------------
	Site Search
    ------------- */ 
td.selected {
		font-weight: bold;
	}
.search-results td {
	border-bottom: 1px dashed #ccc;
	padding-top: 1em;
	padding-bottom: 1em;
}
.search-result-title {
	font-size: 1.2em;
    text-decoration: none;
}

/* ----------------
	Honor a Friend
    ------------- */ 
#contentMain .honorAFriendGifts {
	margin: 0;
	padding: 0;
	list-style-position: inside;
}
.honorAFriendGifts li {
	background-color: #ECF3D4;
	font-weight: bold;
	padding: 5px 5px 5px 15px;
	margin: 0 0 5px 0;
}
.honorAFriendGifts li.odd {
	background-color: #D8DFC3;
}
.honorAFriendGifts li a {
	text-decoration: none;
	color: #666;
}
.honorAFriendGifts li a:hover {
	text-decoration: underline;
}