/* recommended colours:

#259EA2  (turquoise - Volunteering)
#666633  (brown/green)
#CB9F24  (brown - home)
#C1641C  (orange - About Us)
#A22553  (pink/red - Projects)
#CCCC33  
#5889BB  (blue - Fundraising)
#7249BA  (purple - Supporters)
#A748B1  (purple - Contact Us)

*/


/* general */

	body
	{
		margin: 0;
		padding: 0;		
		background-color: #F1F5F8;
	}
	

	body,
	.Normal,
	.NormalDisabled {
		font-family: Verdana, Arial, Helvetica, Sans-Serif !important;
		font-size: 10pt;
	}
	
	
	#adminmenu,	
	#breadcrumbs,
	h1, h2, h3, h4,	h5, h6
	{
		font-family: Tahoma, Verdana, Arial, Helvetica, Sans-Serif !important;
		font-weight: bold;
		color: #222255;
	}
			
	h1
	{
		font-size: 16pt;
	}
	
	h2
	{
		font-size: 15pt;
	}
	
	h3 
	{
		font-size: 14pt;
	}
	
	h4, h5, h6
	{
		font-size: 12pt;
	}
	

	form 
	{
	    	padding: 0;
		margin: 0;		
	}

	.clear, h1, h2, h3, h4, h5, h6 {
		clear: both;
	}

	.noclear
	{
		clear: none;
	}
	
/* admin menus */


	#adminmenu ul 
	{
		padding: 0;
		margin: 5px 5px 5px 0;
	}

	#adminmenu li.menutitle span
	{
		font-weight: bold;	
		font-size: 0.8em;
		display: block;
		margin: 0;
		float: left;
		padding: 1px;
		text-align: center;
		width: 5em;	
		white-space: nowrap;
		background-color: #AAAAAA;
	}
	
	#adminmenu li	
	{
		list-style-type: none;
		display: inline;
		padding: 0;
		margin: 0;
	}
	
	#adminmenu a
	{
		font-size: 0.8em;
		display: block;
		border: solid #AAAAAA 1px;
		margin: 0;
		float: left;
		padding: 0 1em;
		text-align: center;		
		text-decoration: none;
		white-space: nowrap;
		background-color: #EEEEEE;
	}

	
	
	tr.ModuleTitle_MenuBreak td.ModuleTitle_MenuIcon {
		height: 1px;
	}
	
/* main logo */

	#printlogo {
		display: none;
	}

	#sitename {
		padding: 0;
		margin: 0;
		left: 0;		
		clear: both;
	}

	#sitename h1 
	{
		margin: 0;
		padding: 0;
		font-size: small;		
	}

	#sitename a 
	{
		background-image: url(banner.jpg);
		background-repeat: no-repeat;
		margin: 0 0 5px 0;
		padding: 0;
		background-position: 0 0;
		width: 909px;
		height: 151px;
		position: relative;		
		display: block;
		text-decoration: none;
	}

	#sitename span.text
	{
		position: absolute;
		right: 0;
		bottom: 0;
		font-size: 40px;
		color: white;
		padding: 0 5px;
	}	


#wholepage 
{
	background-color: white;
	padding: 0 5px 0 12px;
}

/* top-level menu */

	#menu1
	{				
		padding: 0;
		margin: 0 5px 0 0px;		
		clear: both;
		font-family: Arial, Helvetica, Sans-Serif !important;				
	}
		
	#menu1 ul 
	{				
		padding: 0;
		margin: 0;	
		position: relative;
	}

	#menu1 li
	{
		padding: 0;
		margin: 0;
		display: inline;		
	}

	#menu1 a
	{
		float: left;		
		display: block;
		margin: 0 1px 0 0;
		
		cursor: pointer;
		
		font-size: 0.9em;
		text-align: left;
		width: 129px;	
		text-decoration: none;
		white-space: nowrap;		
		background-color: #C1651C;		
		color: white;
		background-image: url(rightarrow.gif);
		background-repeat: no-repeat;
		background-position: 95% 50%;
	}

	.d1,
	.d2 
	{
		display: block; 
	}
	
	#menu1 .d2 {
		padding: 4px 6px 4px 6px;
	}

	#menu1 li.first .d1
	{
		background-image: url(topleftcorner.gif);
		background-repeat: no-repeat;
		background-position: 0 0;
	}
	
	#menu1 li.first .d2
	{
		background-image: url(bottomleftcorner.gif);
		background-repeat: no-repeat;
		background-position: 0 100%;
	}
	
	#menu1 li.last .d1
	{
		background-image: url(toprightcorner.gif);
		background-repeat: no-repeat;
		background-position: 100% 0;
	}

	#menu1 li.last .d2
	{
		background-image: url(bottomrightcorner.gif);
		background-repeat: no-repeat;
		background-position: 100% 100%;
	}
	
	
	#menu1 li.selected a,
	#menu1 li.childselected a
	{
		font-weight: bold;		
		background-image: url(downarrow.gif);		
	}

	#menu1 a:hover
	{
		background-image: url(downarrow.gif);
	}
	
	#menu1 a:active
	{
		background-image: url(downarrow.gif);
	}

	
/* second-level menu */

	#menu2 {		
		position: absolute;					
		padding-top: 0;		
	}
	
	#menu2 ul 
	{
		padding: 0;
		margin: 0;
	}

	#menu2 li
	{
		padding: 0;
		margin: 0;
		position: relative;
		left: 0;
		list-style-type: none;
		
	}

	#menu2 a
	{
		font-family: Arial, Helvetica, Sans-Serif !important;
		font-size: 0.8em;
		display: block;
		border: 0;
		margin: 0 0 5px 0;		
		padding: 0;
		width: 148px;
		text-align: left;		
		text-decoration: none;				
		color: white;	
		cursor: pointer;
	}	
	
	#menu2 .d1
	{		
		background-image: url(topcorners148.gif);
		background-repeat: no-repeat;
		
	}
	
	#menu2 .d2
	{
		background-image: url(bottomcorners148.gif);
		background-repeat: no-repeat;
		background-position: 0 100%;	
	}
	
	#menu2 .linktext
	{
		margin: 0 3px;	
		padding: 4px 9px 4px 4px;		
		display: block;
		background-image: url(rightarrow.gif);
		background-repeat: no-repeat;
		background-position: 98% 50%;
	}

	#menu2 li.selected a,
	#menu2 li.childselected	a
	{							
		font-weight: bold;
	}
	
	#menu2 li a:hover .linktext,
	#menu2 li a:active .linktext,
	#menu2 li.selected .linktext,
	#menu2 li.childselected	.linktext
	{ 
		background-image: url(rightarrowbrown.gif);
	}

	#menu2 li a:hover
	{
		
	}

	#menu2 li a:active
	{
		
	}

/* breadcrumbs */


	#breadcrumbs
	{
		margin: 3px 0 4px 0;
		padding: 2px 0 4px 0;		
		background-color: #FFFFFF;
	}
	
	#breadcrumbs ul
	{
		margin: 0;
		padding: 0;
		background-color: #FFFFFF;
	}
	
	#breadcrumbs li
	{
		display: inline;
		margin: 0;
		padding: 0 4px 0 7px;
		background-image: url("breadcrumbarrow.gif");
		background-repeat: no-repeat;
		background-position: 0 60%;
		list-style-type: none;	
		color: #BBBBBB;
		font-weight: bold;
		font-size: 0.8em;
	}
	
	#breadcrumbs li.current
	{		
		font-weight: normal;
		font-style: italic;
	}
	
	#breadcrumbs li.root,
	#breadcrumbs li.breadcrumbsintro
	{
		padding-left: 0;
		background-image: none;		
	}
	
	#breadcrumbs li a,
	#breadcrumbs li a:active,
	#breadcrumbs li a:hover,
	#breadcrumbs li a:visited
	{
		color: #BBBBBB;
	}
	
	


/* content region */

	#content
	{	
		background-color: #FFFFFF;
	
		min-height: 400px;
		height: auto !important;
		height: 400px;		
			
	}
	
	.bodycontentpane a
	{
		color: #000099;
	}

	.bodycontentpane a.external
	{
		color: #006600;		
	}
	
	.bodycontentpane a:active 
	{
		color: #FF0000;
	}
	
	.bodycontentpane a:visited
	{
		color: #990099;
	}


	/* NB putting border on objects (e.g. YouTube videos) doesn't work in FF */
	div.bodycontentpane img	
	{
		border: solid #DDDDDD 1px;
		-moz-border-radius: 4px;
		padding: 5px;
		margin: 0 5px 5px 5px;
	}
	
	
	.bodycontentpane .FileManager img,
	.bodycontentpane .Settings img
	{
		border: none;
		padding: 0;
		margin: 0;
	}

	.bodycontentpane img.left-aligned
	{
		float: left;		
		margin-left: 0;
	}

	.bodycontentpane img.right-aligned
	{
		float: right;
		margin-right: 0;
	}		
	
	.bodycontentpane img.centred
	{		
		vertical-align: middle;
		margin-left: 8px;
		margin-right: 8px;
	}

	.bodycontentpane ul,
	.bodycontentpane ol 
	{
		margin-top: 0;
		margin-bottom: 0;
	}


	
	
		
	#footer 
	{
		background-image: url(colourbar909.png);
		background-repeat: no-repeat;
		clear: both;
		margin: 5px 0 5px 0;			
		display: block;
		font-weight: bold;	
		color: #BBBBBB;
	}


	#footer1 
	{
		float: right;
		padding: 5px 5px 2px 4px;
	}

	#footer2 
	{	    	
		padding: 5px 4px 2px 0;
	}

	#footer2 span.copyright span,
	#footer1 span a
	{
		color: #BBBBBB;
		font-size: 8.5pt;
	}





/* photowithnotes - used for People, Amagezi staff */

	.photowithnotes {
		border: solid #AAAAAA 1px;
		-moz-border-radius: 4px;
		width: 210px;
		height: 310px;
		margin: 5px;
		float: left;
	}

	.photowithnotes .photo {
		width: 200px;
		height: 200px;
		margin: 5px;		
		background-color: #DDDDDD;
		text-align: center;		
	}
	
	.photowithnotes .photo img {
		border: 0;
		padding: 0;
		margin: 0;
	}

	.photowithnotes .notes {
		margin: 0 5px;
		height: 95px;
		overflow: auto;
	}
	
	.photowithnotes h2 {
		font-size: 14pt;
	}
	
	.photowithnotes p {
		font-style: italic;
	}






/*  captioned -  used for supporters */

	div.captioned {
		border: solid #AAAAAA 1px;	
		-moz-border-radius: 4px;
		padding: 5px;
		margin: 5px;
		float: left;			
	}

	div.captioned img {
		border: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	div.captioned p {
		margin: 0;
		padding: 0;	
	}

	div.captioned h3 {
		position: absolute; 		
		background: url(trans60.png);
		color: white;
		text-align: center;
		border: 0;
		overflow: hidden;
	}
	
	div.captioned240 h3 {	
		margin: 200px 0 0 0 !important;
		width: 240px;
		height: 30px;
	}

	div.captioned160x178 h3 {
		margin: 128px 0 0 0 !important;
		width: 160px;
		height: 40px;
	}
	
	div.captioned170x190 h3 {
		margin: 140px 0 0 0 !important;
		width: 170px;
		height: 40px;
	}
	
	div.captioned200x130 h3 {
		margin: 100px 0 0 0 !important;
		width: 200px;
		height: 20px;
	}



/* budget - for all tables, despite the name! */

	table.budget {
		border-collapse: collapse;
		border: solid #DDDDDD 1px;
		padding: 5px;
		margin: 0 auto 10px auto;
	}
		
	table.budget thead th 
	{
		text-align: center;				
	}
	
	table.budget th 
	{
		color: #222255;
		font-family: Verdana, Arial, Helvetica, Sans-Serif;
		font-size: 10pt;
		background-color: #EEEEEE;
		padding: 5px 3px;
	}
	
	table.budget td
	{
		font-family: Verdana, Arial, Helvetica, Sans-Serif;
		font-size: 10pt;
		padding: 3px;
		text-align: right;
		border: solid #DDDDDD 1px;
		background-color: #FFFFFF;
	}

	table.budget td.left
	{
		text-align: left;
	}
	
	table.budget td.total
	{
		background-color: #F6F6F6;
		font-weight: bold;
	}
	


	
	
/* captionedimage - for CTAs

note the extra divs for the corners - TODO: add JavaScript to the page to add these automatically

<div class="captionedimage">
	<div class="image">
		<a href="/LinkClick.aspx?link=57&amp;tabid=239">
			<img height="130" width="200" src="image.jpg" alt="Volunteering" />
			<img height="28" width="19" src="bigarrow.gif" alt="" class="arrow" />
		</a>
	</div>
	<div class="caption volunteering">
		<h3><a href="/LinkClick.aspx?link=57&amp;tabid=239">Volunteer</a></h3>
		<p>Travel... build... teach...</p>
	</div>
	<div class="tl">&nbsp;</div>
	<div class="tr">&nbsp;</div>
	<div class="bl">&nbsp;</div>
	<div class="br">&nbsp;</div>
</div>

*/


	div.captionedimage {		
		padding: 0;
		margin: 5px 10px 10px 0;
		float: left;	
		position: relative;
		overflow: hidden;
	}

	div.captionedimage img {
		border: 0;
		margin: 0;
		padding: 0;
	}
	
	div.captionedimage img.arrow {
		position: absolute;
		bottom: 10px;
		right: 10px;
		z-index: 5;
	}
	
	div.captionedimage div.caption {
		
		position: absolute; 		
		
		background-color: #CCCCCC;		
				
		color: white;		
		border-top: solid white 1px;		
		
		width: auto;				
		height: auto;
		
		bottom: 0;
		left: 0;
		right: 0;		
		
		margin: 0;
		padding: 3px 5px 5px 5px;
	}

	div.captionedimage div.caption h3 {
		color: white;
		size: 9pt;
		padding: 0 0 3px 0;
		margin: 0;
	}
	
	div.captionedimage div.caption p {
		font-size: 8pt;
		padding-bottom: 0;
	}
	
	div.captionedimage div.caption a {
		color: white;
	}
	
	div.captionedimage div.caption p.comment {
		display: none;
	}
	
	div.captionedimage:hover div.caption p.comment {
		display: block;
		background-color: black;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 4px;
	}

	
	div.tl, div.tr, div.bl, div.br {
		position: absolute;
		height: 5px;
		width: 5px;	
		background-repeat: no-repeat;
	}
	
	div.captionedimage div.tl {		
		top: 0;
		left: 0;
		background-image: url(topleftcorner.gif);
		background-position: 0 0;
	}
	
	div.captionedimage div.tr {
		top: 0;
		right: 0;
		background-image: url(toprightcorner.gif);
		background-position: 100% 0;
	}
	
	div.captionedimage div.bl {
		bottom: 0;
		left: 0;
		background-image: url(bottomleftcorner.gif);
		background-position: 0 100%;		
	}

	div.captionedimage div.br {
		right: 0;
		bottom: 0;
		background-image: url(bottomrightcorner.gif);
		background-position: 100% 100%;
		
	}	
	
	div.captionedimage div.transparent {
		background: url(trans50.png);
		background-repeat: repeat;
		border: 0;
	}
	
	
	
/* colours defined last in CSS so they override by default */	

	#menu1 li.Home a,
	#menu2 li.Home,
	div.captionedimage div.home
	{
		background-color: #CB9F24;
	}
	
	
	#menu1 li.AboutUs a,
	#menu2 li.AboutUs a,
	div.captionedimage div.aboutus
	{
		background-color: #C1641C;
	}
	
	#menu1 li.Projects a,
	#menu2 li.Projects a,
	div.captionedimage div.projects
	{
		background-color: #A22553;
	}
	
	#menu1 li.Volunteering a,
	#menu2 li.Volunteering a,
	div.captionedimage div.volunteering
	{
		background-color: #259EA2;
	}

	#menu1 li.Fundraising a,
	#menu2 li.Fundraising a,
	div.captionedimage div.fundraising
	{
		background-color: #5889BB;
	}
	
	#menu1 li.Supporters a,
	#menu2 li.Supporters a,
	div.captionedimage div.supporters
	{
		background-color: #7249BA;
	}
	
	#menu1 li.ContactUs a,
	#menu2 li.ContactUs a,
	div.captionedimage div.contactus
	{
		background-color: #A748B1;
	}