/*ADDING A DIV WITH ID to each page as I do the include pasting - after section id & before container

home/index - #

#pgabout

		#pgorigins

		#pgaims

		#pgpeople

		#pgcontact

		

		

#pgregion

		#pgrainforest

		#pghiv

		#pgbatwa

		#pggorillas







#pgactivities

		#pgsscf

		#pgstudents

		#pghospital

		#pg

		

#pghelp

		#pgshoponline

		#pgebay

		#pgdonate

		

#pghelp

		#pgshoponline

		#pgebay

		#pgdonate



					#pgggiftaid1

					#pgggiftaid2

					#pgggiftaid3

					



					

#pgoops

#pgppthank

#pgppcancel

#pgthankyou



#pgsitemap (a bit superfluous as it is in its own 'section')





*/









 

 /* structure

 container

	top

		topmenu

		

	mainwrapper

		nav

		content

	footer	

	

	each page has an id div depending on section, unique ones for other pages

*/	

		/*defaults, zero out margins etc*/



    html, body, div, ul, li {margin:0; padding:0; border:0px;}



    body {font-family: verdana, ariel, helvetica, sans-serif;

	text-align:center;} 



    h1, h2, h3, h4, h6 {margin:0; padding:0; border:0; font-family:verdana, ariel, helvetica, sans-serif;}



 th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {margin:0; padding:0; border:0; font-family:verdana, ariel, helvetica, sans-serif;}



    img {border:none;}

    table {margin:0; padding:0; border:none;}

    form {margin:0; padding:0;}

    label {cursor:pointer;}



   p {margin-top:0;

   margin-bottom:10px;}

.clear {clear:left;

clear:right;

}

    /**/   /**/

	  body {

	  position:relative;

	  background-image:url(graphic/tile.jpg);

        text-align:center;

		font-family:verdana, ariel, helvetica, sans-serif;

		font-size:0.9em;

	}

	

		

h1 {clear:both;

font-size:1.5em;

font-weight:bold;

padding:5px;

text-align:center;

color:purple;}



h2 {

font-size:1.2em;

color:#666699;

padding:5px;

}



strong.colour {color:#E60066;}



.floatleft {

float:left;

margin-right:10px;

margin-bottom:10px;}



.floatright {

float:right;

margin-left:10px;

margin-bottom:10px;}



.centred {
width:90%;
text-align:center;

margin-left:auto;

margin-right:auto;

}

.centred  form {margin:10px auto;}


.centred img {margin-left:auto;

margin-right:auto;}

#container  {width:790px;}/*for silly browsers*/		

#container {

position:relative;

overflow:hidden;

  width: 90%;

  max-width: 1000px;

  min-width: 790px;

  margin: 0 auto;

  padding: 0;

  text-align:left;

background-color:white;

position:relative;

    background-image:url(graphic/top/slice.jpg);

	    background-repeat:repeat-x;

}









#top {

position:relative;

    background-image:url(graphic/top/slice.jpg);

    background-repeat:repeat-x;

    margin:0;

}

	

		

		img.pics {float:left;

		border:0px;

		margin:0;}



	



#top_pics {

position:relative;   



float:left;

margin-right:20px;

}







#top_pics img {

float:left;

margin:0;

border:0;

}



	#logo {

		float:right;

		position:relative;

		right:20px;

		top:20px;

    background-image:url(graphic/top/slice.jpg);

		}

		

		#logo img {background-color:blue;

			width:250px;

			height:150px;}	



	

	

		#topmenu ul {

	position:relative;

	width:270px;}

	

	#topmenu ul li {

	display:inline;

	margin-right:5px;}	



	#topmenu  {

	clear:right;

	float:right;

		position:relative;

		right:15px;

		top:30px;

	}



	#mainwrapper {clear:both;

	width:100%;

	background-color:white;

	overflow:hidden;}

	

	#content {  float: right; /* switch this to left and below to right to change the column locations */

		  position:relative;

		  overflow:hidden;



margin-left:0px;

padding-left:210px;





	}

	

	.sidebar {

  width:200px;

margin-left:-200px;

 position:relative;

left:200px;

  float: left; /* switch this to right and above to left to change the column locations */



} 

	

	.sidebar div {

	position:relative;



}

	

	/*content*/

	

	#breadcrumb {position:relative;

	background-color:silver;

	padding:5px 10px;

	}

	

#content #breadcrumb ul {



height:1.5em;





text-align:left;

text-decoration:none;

}



#breadcrumb li {display:inline;

font-size:0.8em;



margin:auto 2px;



}	



#breadcrumb li a {

margin:auto;}



#breadcrumb a.current {font-weight:bold;

text-decoration:none;

font-size:110%;}



#innercontent {

	padding:10px 20px;

position:relative;

overflow:hidden;



	}

	



	

	#nav a {text-decoration:none;

font-size:1.05em;

font-family:verdana, ariel, helvetica, sans-serif;

background-color:white;

display:block;

position:relative;

width:100%;

padding:5px;

border:black solid 1px;

color:purple;



}











#nav a:hover {background-color:purple;

color:white;

}



#nav ul ul a {

font-size:0.9em;



}









#nav ul {width:100%;



font-weight:bold;

list-style-type:none;

position:relative;

}



#nav li {position:relative;

float:left;

width:100%;}



#nav ul ul {display:none;}







#nav ul li:hover ul {

display:block;

position:absolute;

top:0px;

left:175px;

z-index:10;}



#nav li:hover ul ul {display:none;}



#nav li:hover ul li:hover ul {display:block;

z-index:20;}











.arrows {font-weight:bold;

    float:right;

    margin:0 6px;

}

	



/*style current section depending on div id #aboutus etc applied to mainsection*/

	

#aboutus #subabout, #region #subregion, #whatwedo #subwhat, #howtohelp #subhow, #newsresources #subnews {position:relative;

display:block;

}



#aboutus #navabout a.topnav .arrows,  #region #navregion a.topnav .arrows, #whatwedo #navwhat a.topnav .arrows, #howtohelp #navhow a.topnav .arrows, #newsresources #navnews a.topnav .arrows {display:none;}



/*sub-submenus in current section*/

#aboutus #subabout ul, #region #subregion ul, #whatwedo #subwhat ul, #howtohelp #subhow ul, #newsresources #subnews ul {position:relative;

display:block;

padding:0px;





}





/*sub-submenu when hovered*/



#aboutus #nav li:hover #subabout, #region #nav li:hover #subregion,  #whatwedo #nav li:hover #subwhat, #howtohelp #nav li:hover #subhow, #newsresources #nav li:hover #subnews {position:relative;

left:0px;

display:block;}







#aboutus #nav li:hover #subabout ul, #region #nav li:hover #subregion ul,  #whatwedo #nav li:hover #subwhat ul, #howtohelp #nav li:hover #subhow ul, #newsresources #nav li:hover #subnews ul {position:relative;

left:0px;

display:none;

}



/*links in current section*/



#aboutus #aboutlinks a, #region #regionlinks a, #whatwedo #whatlinks a, #howtohelp #howlinks a, #newsresources #newslinks a , #sitemap #sitelinks a{

text-indent:0px;

border-bottom:none; border-top:none;

border:black solid 1px;

background-color:silver;

}		











#aboutus #subabout ul a, #region #subregion a, #whatwedo #subwhat a, #howtohelp #subhow ul a, #newsresources #subnews a {/*style sub-sub menu links (when hovered, invisible otherwise see below)*/

border:black solid 1px;}







#aboutus #subabout li.subsubsect ul, #region #subregion li.subsubsect ul, #whatwedo #subwhat li.subsubsect ul, #howtohelp #subhow li.subsubsect ul, #newsresources #subnews li.subsubsect ul {display:none;} 	/*hide subsubmenu when in a section*/

#howtohelp #subhow li:hover ul {display:none;}

#howtohelp #nav #subhow li.subsubsect:hover ul {display:block;

position:absolute;

top:0px;

left:175px;

z-index:10;}		/*and display it again!*/





/*footer*/

#footer {

clear:both;



width:100%;

background-color:lavender;

margin:0 auto;

border-top:dashed 1px #E60066;

}



#footer ul {margin:0 auto;

text-align:center;

padding:10px;

}



#footer ul li {display:inline;



margin:5px;

}

	





/*footer thing as hc*/



#container {

min-height:100%;

position:relative;

}



#mainwrapper {

padding-bottom:4em; /*height of footer*/

}





#footer{

position:absolute;

bottom:0;

height:4em /*same as padding bottom on mainwrapper*/



}





	

	a:hover {color:red;}

	#breadcrumb a.current {color:purple;

	font-weight:bold;}

	a.blocklink {display:block;}

	



	

	strong.ch-object, strong.colour {color:#E60066;}

	

	#objects ul  {list-style-type:none;}

	

	#objects ul li {margin-bottom:1em;}

	

	

	.address p {margin:0 0 0 26px;}

	.address {padding:20px;}

	

	#contactform input, #contactform textarea {

	padding:5px;

	border:1px black solid;

	margin:10px;}

	

	#webdesign, #validate {clear:left;

	float:left;}

	

	#aboutus #aboutlinks .arrows {display:none;}

	

	/**donate page**/

	#giftaid {

	width:90%;

	border:red solid 3px;

	padding:1em;

	

	}

	

	/*home page*/

	div #footnote {font-size:0.8em;

float:left;

margin:10px;

}



#intro a.noline {text-decoration:none;

color:black;

font-size:0.8em;}



#intro a:hover.noline {text-decoration:none;

color:red;}

	

	

/*see styling for newsbox*/

div.feedburnerFeedBlock  .feedtitle{ 
background-color:white;
padding:10px;
border:red solid 1px;
}

div.feedBurnerFeedBlock p.feedTitle a{ 

font-weight:bold;

color:purple;

font-size:1.1em;

}



div.feedburnerFeedBlock ul li span.headline { 

font-weight:bold; 

display:block; 

margin:12px 0 5 0;

color:black;

font-size:0.9em;

}





div.feedburnerFeedBlock ul { 

margin-left:0; 

padding-left:0; 

list-style-type: none 

}







#intro a {font-weight:bold;

color:purple;}



#intro a:hover {font-weight:bold;

color:#e60066;}



#newsbox {width:200px;

height:auto;

overflow:auto;

float:right;

border:purple solid 2px;

background-color:#ddd; 

padding:2px 5px;

margin:0 0 5 5;}



.box {clear:both;

width:95%;

padding:10px;

margin:10px auto;

border:solid red 2px;}



#homepage h1 {

border:dotted #e60066 2px;

margin-bottom:1em;

color:purple;

background-color:lavender;

}



/*took this donatebutt stuff out of php file*/

.sidebar #donatebutt {

position:relative;

margin:0.2em auto;

font-family: Verdana, Arial, Helvetica, sans-serif; 

font-size:1.2em; 

text-align:center;

font-weight:bold;



}



.sidebar #donatebutt a {



text-decoration:none;

border:6px purple outset;

width:110px;

height:60px;

margin:auto;

padding:10px;

background-color:#C0C0FF;

}





#donatebutt a:hover {

color:red;

font-weight:bold;

}



#donatebutt a:focus {border:6px purple inset;}

/*end silly butt*/





.buyat  img{

display:block;



}



.centred img {display:block;}



.piggy a {color:purple;}



.buyat a {color:red}

div .buyat {border:outset 4px red;

width:60%;

padding:5px;

margin:1em auto;}



.sidebar a:hover {color:green;}



td {padding:5px;}

input.formbutton {padding:5px;

font-size:0.9em;

border:outset black 3px;

}



.red {color:red;}



#sitemap #content ul div {

height:15em;

width:35%;

float:left;

margin:1em;

padding:1em 2em;

border:dotted purple 2px;

}



#sitemap #content .topnav {font-size:110%;

font-weight:bold;

}



#sitemap ul.subsubmenu {margin-left:20px;}

#sitemap #content  ul {line-height:2;}



.boxwrap1 {

position:relative;

overflow:hidden;

margin: 20px auto; 

position: relative; 

clear: both;

border: 1px dashed blue; 

}



.boxwrap1 h3 {

text-align:center;

padding:20px;

}


.boxes1 {

padding: 15px; 

width: 45%; 

float: left;


}



form input, form select, form textarea {border:solid black 1px;

padding:5px;



}

#newsform {width:90%;
margin:10px auto;}

.sidebar div {
margin:20px auto;
text-align:center;
}
.sidebar div li a, .sidebar div p{text-align:left;}

.sidebar div#nav, .sidebar #nav div, #nav, #nav div{margin-top:0px;}