/*--- Hands Across the Planet to Poor Youth, Inc. (H.A.P.P.Y.) -------------*/

/*--- Design by David James Royer, Lycaon Music Publications ---------------*/
/*--- droyer@lycaonmusic.com   http://www.LycaonMusic.com ------------------*/

/*--- November 2007 --------------------------------------------------------*/



/*--- BODY -----------------------------------------------------------------*/
/*--- Logo and button font is JazzExtended ---------------------------------*/
/*--- Logo subtext font is Herculanum --------------------------------------*/

body {
	background-color		: 	#CC9933;
	background-image		: 	url(/graphics/sidebarbackground.jpg);
	background-repeat		: 	repeat-x;
	font-family				: 	Optimum, Optima, Georgia, Verdana, sans-serif;
	font-size				: 	medium;
	color					: 	#B0C4DE;
	margin					: 	0px;
	padding					: 	0px;
	border					: 	0px;
	text-align				: 	center;
}


/*--- Font Styles -----------------------------------------------------------*/

font.drop {
	font-size				: 	1.5em;
	font-weight				: 	bold;
}

p.first:first-line {
	font-variant			: 	small-caps;
	margin-top				:	0;
}

h1 {
	font-family				: 	Verdana, Arial, Helvetica, sans-serif;
	color					: 	#33CC66;
	letter-spacing			: 	-0.06em;
}

h2,h3,h4 {
	font-family				: 	Verdana, Arial, Helvetica, sans-serif;
	color					: 	#FFF8DC;
}

.nokern {
	letter-spacing			: 	normal;
}

span.emphasis {
	color					:	#E6E6E6;
}

span.caption {
	font-size				:	small;
	color					:	#CCCC00;
	font-family				:	"Courier New", Courier, monospace;
}



/*--- Images ----------------------------------------------------------------*/

img.blue {
	border					:	#B0C4DE;
	border					:	thin;
}

img.noborder {
	border					:	none;
}

img {
	border					:	thin;
	border-bottom-color		:	#FF0000;
	border-top-color		:	#00FF00;
	border-left-color		:	#FFFF00;
	border-right-color		:	#FFFF00;
} /*--- Flag Colors ---*/



.floatright {
	float					:	right;
	width					:	203;
	margin					:	0 0 5px 5px;
	font-size				:	small;
	font-family				:	Courier, Arial, Verdana, Helvetica, sans-serif;
	background-color		:	#B0C4DE;
	color					:	#000000;
}

.floatleft {
	float					:	left;
	position				:	absolute;
	z-index					:	10;
}

/*--- Link Colors  ----------------------------------------------------------*/

a:link {
	color					: 	#CCCC00;
	text-decoration			: 	none;
} /* an unvisited link, yellow */

a:visited {
	color					: 	#CCCC00;
	text-decoration			: 	none;
} /* a visited link, yellow */

a:hover {
	color					: 	#0000A5;
	text-decoration			: 	underline;
} /* a link with the mouse hovering over it, blue */

a:active {
	color					:	#028442;
	text-decoration			:	none;
} /* the selected link, green */

.nounderline a {
	text-decoration			:	none;
}

/*--- Index Page Divisions  ----------------------------------------------------------*/

div.clear {
	clear					:	both;
}

div.topmask {
	position				: 	absolute;
	background-image		: 	url(/graphics/blacksquare.jpg);
	z-index					: 	1;
	top						: 	1%;
	left					: 	1%;
	width					: 	98%;
	height					: 	35%;
}

div.middlemask {
	position				: 	absolute;
	background-color		: 	#000000;
	filer					:	progid:DXImageTransform.Microsoft.Alpha(opacity=50);
	z-index					: 	5;
	top						: 	45%;
	left					: 	10%;
	width					:	80%;
}
	
div.bottommask {
	position				: 	absolute;
	background-image		: 	url(/graphics/blacksquare.jpg);
	top						: 	36%;
	z-index					: 	1;
	left					: 	1%;
	width					: 	98%;
	height					: 	63%;
}

/*---  Main Page Division Styles  ------------------------------------------*/

div.placeholder {
	position				:	relative;
	top						:	0px;
	width					:	655px;
	height					:	572px;
	background-image		:	url(/graphics/ethiopiabackground2.gif);
	background-repeat		:	no-repeat;
	text-align				:	left;
	margin-top				: 	0px;
	margin-right			: 	auto;
	margin-bottom			: 	0px;
	margin-left				: 	auto;
	padding-top				: 	150px;
	padding-right			: 	25px;
	padding-bottom			: 	0px;
	padding-left			: 	145px;
}

div.header {
	position				:	absolute;
	top						:	100px;
	left					:	100px;
	z-index					:	10;
	text-align				:	center;
	vertical-align			:	bottom;
	width					:	656px;
	height					:	55px;
	font-size				:	xx-large;
	font-family				: 	Verdana, Arial, Helvetica, sans-serif;
	font-weight				:	bold;
	color					: 	#33CC66;
	letter-spacing			: 	-0.06em;
}

div.header_updates {
	position				:	absolute;
	top						:	100px;
	left					:	100px;
	z-index					:	10;
	text-align				:	right;
	vertical-align			:	bottom;
	width					:	656px;
	height					:	55px;
	font-size				:	small;
	font-family				: 	Verdana, Arial, Helvetica, sans-serif;
	color					: 	#028442;
	letter-spacing			: 	-0.06em;
}

div.content {
	position				:	absolute;
	z-index					:	5;
	top						:	0px;
	text-align				:	left;
	width					:	655px;
	padding-top				: 	155px;
	padding-right			: 	0px;
	padding-bottom			: 	0px;
	padding-left			: 	0px;
	margin					: 	0px;
	left					:	142px;
}

div.navigation {
	position				:	absolute;
	top						:	0px;
	left					:	-85px;
	width					:	255px;
	height					:	720px;
	margin					:	0px;
	padding					:	0px;
}

div.extension {
	position:inherit;
	margin-left:auto;
	margin-right:auto;
	background-image:url(graphics/contentbackground.gif);
	background-repeat		:	repeat-y;
	width					:	655px;
	padding-left:145px;
	padding-right:25px;
	text-align:left;
}

/*--- footer ---------------------------------------------------------------*/

div.footer {
	position:inherit;
	margin-left:auto;
	margin-right:auto;
	font-size				:	small;
	text-align				:	center;
	color					:	#C0C0C0;
	background-image		:	url(graphics/footerbackground.gif);
	background-repeat		:	repeat-y;
	height					:	75px;
	width					:	825px;
	padding-top				:	5px;
}