/*
COPYRIGHT AREA WIDE TECHNOLOGIES
LEAD DEVELOPER - AZEEM AZEEZ
*/

@import url("user.css");

/* - STRUCTURE
-----------------------------------------------------------------*/
body {
	margin:0px;
	padding:0px; /*FOR OPERA*/
	background-color:#ffffcc;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
}

#container {
	width:740px;
	background-color:#fff;
	margin:0 auto;
	
	margin-top:20px;
}

#content-wrapper {
	width:auto;
	padding:4px;
	padding-right:10px;
	padding-left:20px;
	padding-top:10px;	
	font-size:14px;
	line-height:18px;
}
#news-links 
{
	position:absolute;
	width:195px;
	height:74px;
	background-color:#fff;
	padding:6px;
	}
.menulink
	{
		width:195px;
		height:63px;
		border:1px solid #ccc;
		margin-bottom:5px;
		margin-left:5px;
		margin-right:5px;
		vertical-align:middle;
		line-height:69px;
	}
.menulink a
	{
		display:block;
		width:100%;
		height:100%;
	}
#footer {
	clear:both;
	margin-left:10px;
	font-size:11px;
	margin-top:20px;
	color:#555;
}

td {
	padding-bottom:0px;
	margin-bottom:0px;
}


/* - LINKS + BUTTONS
-----------------------------------------------------------------*/

a {color:#9a0b0d;}
a:hover {color:#00287e;}

.button {
	border:1px solid #333;
	width:80px;
	height:30px;
	line-height:30px;
	text-align:center;
	background-color:#333;
}

.button a {
	text-decoration:none;
	color:white;
}

.button a:hover {
	padding:7px;
	padding-left:16px;
	padding-right:16px;
	background-color:white;
	color:#333;
}
/* - HEADER
-----------------------------------------------------------------*/
#header {}

#logo {
	float:left;
	width:135px;
}

#logo span{
	width:135px;
	color:teal;
	display:block;
	font-size:11px;
	text-align:center;
	font-family:Georgia, "Times New Roman", Times, serif;
}

#banner {
	float:right;
	width:580px;
	margin-top:10px;
}

#banner p {
	margin:0px;
	margin-top:2px;
	font-weight:bold;
}

#sun {
	position:absolute;
	margin-left:520px;
}

ul#header-links {
	margin-left:0px;
	padding-left:0px;
}

#header-links li{
	font-size:14px;
	list-style-type:none;
	float:left;
	border:1px solid #777;
	border-right:none;
	padding:4px;
	padding-right:10px;
	padding-left:10px;
	font-weight:bold;
}

#header-links a{text-decoration:none;}
	#header-links a:hover{ text-decoration:underline}
#header-links li.blue a{color:#00287e;}
#header-links li.green a{color:green;}
#header-links li.red a{color:#9a0b0d;}

/* - PHOTOS
-----------------------------------------------------------------*/
.photo-left {
	padding-right:10px;
	padding-bottom:10px;}

.page-accent {
	float:right;
	padding-left:10px;}
	.page-accent img {
		height:210px;
		width:280px;}
		
/* - MENU
-----------------------------------------------------------------*/
#menu {
	clear:both;
	background-color:#ffffcc;
	width:740px;
	height:120px;
}

#menu img {
	width:59px;
	height:65px;
	border:none;
}

#menu td {
	text-align:center
}

#menu span {
	display:block;
}

#menu ul li ul li img {
	width:20px;
	height:20px;
	padding-right:4px;
	display:none;
}

#menu ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#menu ul li{
	position: relative;
	display: inline;
	float: left;
	z-index:1000;
	background-color: #ffffcc;
	width:123px;
}


#menu ul li a{
	display: block;
	text-align:center;
	border-left-width: 0;
	text-decoration: none;
	color: #333;
	background-color: #ffffcc;
}
	
	#menu ul li ul{
	left: 0;
	position: absolute;
	top: 1;
	display: block;
	visibility: hidden;
	background-color:white;
	margin-top:0px;
}

	#menu ul li ul li{
	display: list-item;
	float: none;
}

	#menu ul li ul li ul{ 
	top: 0;
	margin-top:0px;
}

	#menu ul li ul li a{
	display: block;
	text-decoration: none;
	border: 1px solid #555;
	text-align:left;
	background-color: #ffffcc;
	padding:3px 0px 3px 0px;
	padding-left:20px;
}

#menu ul li ul li img{
	float:left;
}

#menu ul li a:hover{
	background-color: #ffffcc;
}

#menu ul li ul li a:hover{
	background-color:white;
	color:#000
}

#menu .mainfoldericon{
/*	background: #ffffcc    url(media/arrow-down.gif) no-repeat center right;*/
}

/*Background image for subsequent level menu list links */
#menu .subfoldericon{
	background: #ffffcc    url(../media/arrow-right.gif) no-repeat center right;
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
	padding-top: 1em;
}
	
/* Holly Hack for IE \*/
* html #menu ul li { float: left; height: 1%; }
* html #menu ul li a { height: 1%; }
/* End */

/*CUSTOM MENU BUTTONS*/
#about span a,
#programs span a,
#helping span a,
#volunteers span a,
#special span a,
#news span a {
	background-repeat:no-repeat;
	background-position:50% 0%;
	height:36px;
	padding-top:70px;
	margin-top:10px;
}

#about span a{background-image:url(/images/hands/green-left.png);}
	#about span a:hover{background-image:url(../images/hands/hover/green-left-hover.png);}

#programs span a{background-image:url(../images/hands/orange-left.png);}
	#programs span a:hover{background-image:url(../images/hands/hover/orange-left-hover.png);}

#helping span a{background-image:url(../images/hands/blue-right.png);}
	#helping span a:hover{background-image:url(../images/hands/hover/blue-right-hover.png);}

#volunteers span a{background-image:url(../images/hands/red-left.png);}
	#volunteers span a:hover{background-image:url(../images/hands/hover/red-left-hover.png);}

#special span a{background-image:url(../images/hands/yellow-left.png);}
	#special span a:hover{background-image:url(../images/hands/hover/yellow-left-hover.png);}

#news span a{background-image:url(../images/hands/purple-left.png);}
	#news span a:hover{background-image:url(../images/hands/hover/purple-left-hover.png);}

/*SUB MENUS*/
li#about ul li a,
li#programs ul li a,
li#helping ul li a,
li#volunteers ul li a,
li#special ul li a,
li#news ul li a{
	background-repeat:no-repeat;
}

li#about ul li a{background-image:url(../images/hands/small/green.jpg);}
li#programs ul li a{background-image:url(../images/hands/small/orange.jpg);}
li#helping ul li a{background-image:url(../images/hands/small/blue.jpg);}
li#volunteers ul li a{background-image:url(../images/hands/small/red.jpg);}
li#special ul li a{background-image:url(../images/hands/small/yellow.jpg);}
li#news ul li a{background-image:url(../images/hands/small/purple.jpg);}