body {
	margin: 0;
	background: url(../images/bg.gif) repeat-x top #6cb1de;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #20223a;
	line-height: 17px;
}

a:link {
	text-decoration: underline;
}
a:visited {
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: underline;
}

.wrappertoppie {
	margin: 10px auto;
}

.menumenubg {
	background: url(../images/bg_menubg.gif) repeat-x top left;
}

.margintoppie {
	margin: 0 20px 0 0;
}


.wrapper {
	margin: 0 auto;
	border-left: 1px #414141 solid;
	border-right: 1px #414141 solid;
	border-bottom: 1px #414141 solid;
}

.bg_title {
	background: url(../images/bg_title.gif) repeat-x top #FFFFFF;
}

.tableinside_margin {
	margin: 0 0 16px 0;
}

.bg_table {
	background: url(../images/bg_table.gif) repeat-x top #FFFFFF;
}

.tableinside2_margin {
	margin: 23px 0 0 0;
}

.tableinside2_box_left {
	border: #a7a6ac 1px solid;
	background: #FFFFFF url(../images/bg_table2.gif) repeat-x top;
	padding: 15px 14px 13px 11px;
	width: 192px;
}

.contentmiddle {
	border-bottom: #a7a6ac 1px solid;
	padding: 19px 25px 25px 0;
}

.contentmiddle_last {
	border-bottom: none;
	padding: 19px 25px 25px 0;
}

.contentright {
	border-bottom: #a7a6ac 1px solid;
	border-left: #a7a6ac 1px solid;
	padding: 0px 25px 12px 22px;
	margin: 0 0 0px 0;
}

.contentright_middle {
	border-bottom: #a7a6ac 1px solid;
	border-left: #a7a6ac 1px solid;
	padding: 14px 5px 12px 22px;
	margin: 0 0 0px 0;
}

.contentright_last {
	border-bottom: none;
	border-left: #a7a6ac 1px solid;
	padding: 14px 25px 12px 22px;
	margin: 0 0 17px 0;
}

.footer1 {
	background: #f2e8da;
	padding: 19px 0 20px 0;
	border-top: 1px solid #e8cba1;
}

.footer2 {
	margin: 11px auto 0 auto;
	padding: 0 0 21px 0;
}

.subpage_content {
	margin: 0 25px 0 27px;
}

.subpage_contentform {
	margin: 0 0 0 27px;
}


.subpage_lefttable {
	/*border-right: 1px solid #aaabb4;*/
}

.imgphotoright {
	margin: 0 0 7px 0;
}

.gallery_header {
/*	margin: 20px 25px 0 27px; */
	margin: 20px auto 0 auto;
	text-align: center;
}

.form11 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #333333;
}
.textbox {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #333333;
	border: 1px solid #cdb99b;
	background: #f2e9dc;
}
.tableoutline {
	border: 1px solid #cdb99b;
}






/* Menu nav for CMS */

/* - don't forget to disable the "Show text" option in the menu plugin of the CMS */

/* STEP 1: Create a DIV  with the width and height of the menu + a background color */
#menu_header { height:32px; width: 779px; background-color: #000000; margin: 0; padding:0;}

/* STEP 2: Reset the UL, LI and link included in the #menu_header (#menu_header can be renamed in the menu plugin */
#menu_header ul, #menu_header li { margin: 0; padding: 0; list-style:none; display: inline; } 
#menu_header a, #menu_header a:link { text-decoration: none; }

/* STEP 3: Create a style per link. The link name is the "URL Name" of the page that can also be changed in the CMS 
   - The way to do it is to create a big image with the main menu + underneath the ON state (check the /images/menu/menu.jpg image
   - You need to know the dimension of all the menu items.
   - The hover state will move the background position of the image to match the ON state
*/

#beginning { float: left; margin: 0; padding: 0; height: 32px; }

/* #home a, #home_active a { height: 32px; width: 68px; background-image: url(../images/menu.gif); display:block;  float: left; }
#home a { background-position: 0 0; } //
#home a:hover, #home_active a { background-position: 0px 32px; }
*/

#news a, #news_active a { height: 32px; width: 68px; background-image: url(../images/menu.gif); display:block;  float: left; }
#news a { background-position: 0 0; } /* This line can be ignored  */
#news a:hover, #news_active a { background-position: 0px 32px; }

/* - The CMS add an _active string to the id of the active menu.  This can be customized in the navigation plugin (default is _active)
	 example: #home is the normal state, #home_active is the ON state.  What I do is set the hover state and the ON style to the same image */

#get-involved a, #get-involved_active a { height:32px; width:109px; background-image:url(../images/menu.gif); display:block;  float: left;}
#get-involved a { background-position: -68px 0; } /* This is calculated with all the previous menu item width. Here there is only one which is 77px. Enter the negative value.  */
#get-involved a:hover, #get-involved_active a { background-position: -68px 32px; }

#ways-to-give a, #ways-to-give_active a { height:32px; width:109px; background-image:url(../images/menu.gif); display:block;  float: left;}
#ways-to-give a { background-position: -177px 0; }  /* This is calculated with all the previous menu item width. Here: 77 + 84 = 161px. Enter the negative value. */
#ways-to-give a:hover, #ways-to-give_active a { background-position: -177px 32px; }

#our-programs a, #our-programs_active a { height:32px; width:120px; background-image:url(../images/menu.gif); display:block;  float: left;}
#our-programs a { background-position: -286px 0; } /* You can also take the previous background-position (161) and add the previous width (72) */
#our-programs a:hover, #our-programs_active a { background-position: -286px 32px; }

#team-maisha a, #team-maisha_active a { height:32px; width:109px; background-image:url(../images/menu.gif); display:block;  float: left;}
#team-maisha a { background-position: -406px 0; }
#team-maisha a:hover, #team-maisha_active a { background-position: -406px 32px; }

#photos a, #photos_active a { height:32px; width:74px; background-image:url(../images/menu.gif); display:block;  float: left;}
#photos a { background-position: -515px 0; }
#photos a:hover, #photos_active a { background-position: -515px 32px; }

#about-maisha a, #about-maisha_active a { height:32px; width:116px; background-image:url(../images/menu.gif); display:block;  float: left; }
#about-maisha a { background-position: -589px 0; }
#about-maisha a:hover, #about-maisha_active a { background-position: -589px 32px; }
/*
#contact-us a, #contact-us_active a { height:32px; width:103px; background-image:url(../images/menu.gif); display:block;  float: left;}
#contact-us a { background-position: -676px 0; }
#contact-us a:hover, #contact-us_active a { background-position: -676px 32px; }
*/
#events a, #events_active a { height:32px; width:74px; background-image:url(../images/menu.gif); display:block;  float: left;}
#events a { background-position: -705px 0; }
#events a:hover, #events_active a { background-position: -705px 32px; }