body { 
  background-color: #507100;   /* colour is that of the grass in header image:  this sets the colour of the outer edge of the page, this might not be visable on narrow displays */
  font-family:      Geneva, Verdana, Arial, sans-serif; /* the default font for the whole site unless otherwise specified */
  font-size:        small;  /* the default font size for the whole site unless otherwise specified */
  text-align: 		justify;	/* this adjusts word spacing so that words finish at left and right edge */
  margin:           0px;     /* the default margin for the whole site unless otherwise specified */
}


h1 { 
font-family:	Georgia, Times New Roman, Serif; 
font-size:		250%;
color:			white;
}


h2 { 
font-family:	Georgia, Times New Roman, Serif; 
font-size: 		150%;
color:			white;
 }

 .farm_title{ 
	color: 		#333;     /* text colour in link bar */ 
	
	}
 
 .outside {
	width: 900px; /* the auto value on the sides, coupled with the width, centers the layout */
	margin-top: 5px;
	margin-right: auto;
	margin-bottom: 5px;
	margin-left: auto;
	background-color:  #507100;   /*     */
	padding: 0;
}
 
 .bold{ font-weight:bold;}  /*  bold text */
 .body_heading{color: black;} 		/* */
 
 
 
 
 #header_text{
 position: 		absolute; /* used to position the banner text over the image, probably better to create an image with the text in it but the job spec said not to. */
 top:			   30px;
 padding:          0px;
 margin:           0px;
 width:			920px;

  }
 
#header {			/* contains main title and menus  */
  background-color: #788ca5;
  
 padding:          5px 0px 0px 0px;
 margin:           10px;  /* the area beyond the border in order top, RHS, botom LHS  */
  width:			920px; 
  height:           310px;
  text-align:		center;  /* this actualy aligns the image to centre */
  
  
}

/* Menu all the settings for the main  menu **********************************************************************************/

#menu { /*div for menu, sets width, height and position using margin left/right auto(centre).  */
width: 850px;
background: url(images/bg_1.jpg) repeat-x; /* image is repeated on the x axis  */
margin: 3px auto; /* overides any margin settings top and bottom and sets auto for left/right to centre menu on page */
padding: 0px 10px; /*overides any inheritance or default padding , 10px gives padding of menu image at left and right*/
height: 50px; /*height of menu this is the same height as the background image */
border: 4px solid #adff2f; /*  green border around menu */
}

#menu ul { /* selector for any ul ( unordered list)  tags within the menu div */
margin: 0px; /* overides any inherited or default  margins to 0px (no margins) */
padding: 0px;/*overides any inheritance or default padding so the far left menu tab has no gap */
list-style: none; /* overides the default bulleted unordered list */
}

#menu li {
display: inline; /* add this for IE7 and IE6, as it did not display the menu list inline, it tried to display vertically */	
}

#menu a { /*sets parameters for the linked text in the menu div and anything inside an <a> tag in the menu div */
float: left; /* prevents the list from defaulting to a vertical list, each <a> item is floated to the left of the previous and stacked horizontally while there is room in the "container" (menu div) (Freeman and Freeman 2006)*/
height: 33px;/*  reduced size so the white current page block stayed within the borders of the menu bar - END OF NEW ITEM - had to play around with this setting for a while, it sets the height of the <a> element, the padding setting must be taken into account (20+32=52) menu height*/
margin: 0px;
padding: 17px 8px 0px 8px;/*  reduced left and right padding so menu items will not exceed width of menu bar - END OF NEW ITEM - sets padding around the text in the <a> fields, the top padding must be considered when setting the height value */
text-decoration: none; /* no decoration - default is underline for anything inside an <a> tag */
font-size: 		1.05em; /* Increased font size to make menu more readable */
color:  		#528DC8; /* colour of menu text when to current page or in hover  */ 
font-weight: 	bold; /* bold to make menu more readable, not so bold on Firefox, requires further investigation?????????????????????????? */
 /* letter-spacing: -0.1em; */
}

#menu a:hover { /* sets alternate color for menu text when mouse hovers over the <a> element within the menu div */
color: 		#280174;
background: url(images/bg_2.jpg) repeat-x;
/* background: #c0f0c0 ;*/

}

#menu .current_page a { /* this sets an alternate color for the background of the box created by the menu a selector around the <a> tagged text, this selector is for the menu item which reflects the current page (active page) the user is on and thus identifies it visually different to the other menu items */
color: 		#280174;
background: url(images/bg_3.jpg) repeat-x;
/*background: #b0e0b0; */
}

/* end of menu styling ****************************************************************************************************/



.center {
text-align:	right;
}

.image_pos_left{   
float: 		left;    	/* to position images to the left within the pext of <p>*/
padding:	5px;    	/* provide 10 px padding so the text dosn't touch teh image */
margin:		5px;
}

.image_pos_right{
float: 		right;		/* to position images to the right within the pext of <p>*/
padding:	5px;    	/* provide 5 px padding so the text dosn't touch the image */
margin:		5px;
}



#main {              	/* sets up main content area  */
  background:       #efe5d0; 
  padding:          10px 10px 10px 10px;
  margin:           10px;   /*10px 0px 10px 0px; */
  width:			900px; 
  line-height: 		2em;
   }
   
  #asw {              	/* sets up Australia's SWcontent area  */
  background:      #7B9564; 
  margin:           5px;   /*10px 0px 10px 0px; */
  padding:          5px;
  line-height: 		2em;
   }
 

 #ep {              	/* sets up experience Perth  content area  */
  background:       #7D628A; 
  margin:           5px;   /*10px 0px 10px 0px; */
  padding:          5px;
  line-height: 		2em;
   }
 
 
 #ago {              	/* sets up experience Perth  content area  */
  background:       #FAAF5E; 
  margin:           5px;   /*10px 0px 10px 0px; */
  padding:          5px;
  line-height: 		2em;
  
   }
 #acc {              	/* sets up experience Perth  content area  */
  background:       #77AFDE; 
  margin:           5px;   /*10px 0px 10px 0px; */
  padding:          5px;
  line-height: 		2em;
   }
   
   #anw {              	/* sets up experience Perth  content area  */
  background:      #C44E4A; 
  margin:           5px;   /*10px 0px 10px 0px; */
  padding:          5px;
  line-height: 		2em;
   }

 
 
#linkbar {
  width:			300px;
  background:       #efffd0;
  padding:          10px;
  margin:           0px 0px 10px 10px;  /* 0px 10px 0px; */
  float:			right;  
   
}
.linkbar{ 
	color: 		#888;     /* text colour in link bar */ 
	font-size:	120%;
	}

.banner_ad{
border:		0px
}


/* note  # is an ID, . is class. The only differance between class and id is that an id selector should match only one element in a page.*/


#footer {
  background-color: #788ca5;  /* the blue from the sky in the header image */ 
  color:            #efe5d0;
  text-align:       center;
  padding:          10px;
  margin:           10px;
  font-size:        90%;
  clear:			left;
  width:			900px;
 
}







a:link {
	
  color:            blue;   /*#1a1aaa;	/* colour of links that have not been visited blue has been a standard link colour. Google still uses it so that's good enough for me */
  font-weight:		bold;
  text-decoration:  none;
  }
a:visited {
  color:            #336;  /* after being visited links will apear a different shade of blue, at least until the browser history is cleared. I've chosen the same colours that Google uses.   */ 
  font-weight:		bold;
  text-decoration:  none;
  }

a:hover {
  color:            green;   /* text link turns green while mouse over it, seems a good idea for a greenie website! */ 
  font-weight:		bold;
  text-decoration:  none;
  }

  table{
  
 /* border:thin solid black; */  /*  caused double boarder around DHTML menu */ 
 border-collapse: collapse;
  }
  
  
.table_heading{
text-align: center;
border-style: solid;
}

.table{
border-style: solid;
border-collapse: collapse;
}

.region_table_heading{
text-align: center;
border-style: solid;
color: white;
}