/* THE FOLLOWING STYLES CONTROL APPEARANCE AND LAYOUT OF WHOLE PAGE */
/* body gives default properties for the page. It is overwritten by the other styles*/
body {
	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
	background-color: #FFFFFF;
	background-position: center;
	margin: 0px;
	background-image: url(bluebkg.gif);
}
/* the following style sets the layout and appearance of the whole page. So long as left and right margins are both set as auto, page will centre in Firefox*/
DIV#whole-page {
	background-color: #FFFFFF;
	width: 760px;
	padding: 0px;
	background-position: center;
	display: block;
	border-top: 1px solid #999999;
	border-right: 2px solid #999999;
	border-bottom: 1px solid #999999;
	border-left: 1px solid #999999;
	margin: 10px auto;
	color: #333333;
	clear: none;
	height: auto;
	bottom: auto;
  }
 /* The following defines text and layout of the text to the left of the navigation. Page split into two */
DIV#left-text {
	vertical-align: top;
	width: 576px;
	display: block;
	border: 0px none #FFFFFF;
	text-align: justify;
	font-family: Arial, Helvetica, sans-serif;
	color: #333333;
	background-color: #FFFFFF;
	float: left;
	background-position: left top;
	padding-right: 20px;
	padding-bottom: 15px;
	padding-left: 25px;
	margin: 0px;
	padding-top: 10px;
	clear: none;
}
/* The following defines text and layout of the text in the centre of the page, when page is split into three */
DIV#middle-text {
	vertical-align: top;
	width: 490px;
	display: block;
	border: 0px none #FFFFFF;
	text-align: justify;
	font-family: Arial, Helvetica, sans-serif;
	color: #333333;
	background-color: #FFFFFF;
	float: left;
	background-position: center top;
	padding-right: 0px;
	padding-bottom: 15px;
	padding-left: 25px;
	margin: 0px 0px 0px 5px;
	padding-top: 0px;
	clear: none;
}
 /* The following defines text and layout of a text box the width of the whole page.  */
DIV#wide-text {
	vertical-align: top;
	display: block;
	border: 0px none #FFFFFF;
	text-align: justify;
	font-family: Arial, Helvetica, sans-serif;
	color: #333333;
	background-color: #FFFFFF;
	float: none;
	background-position: center;
	padding-right: 20px;
	padding-bottom: 15px;
	padding-left: 25px;
	margin: 0px;
	padding-top: 10px;
	clear: both;
}
/* the following defines the left hand column used for images when page is split into three */
DIV#leftcolumn {
	background-color: ;
	width: 105px;
	border: 1px dotted #CCCCCC;
	background-position: center top;
	display: block;
	text-align: left;
	clear: none;
	float: left;
	padding-right: 2px;
	padding-bottom: 1px;
	padding-left: 2px;
	height: auto;
	position: static;
	vertical-align: top;
	margin: 1px;
	background-color: #FFFFFF;
	line-height: 0.2;
	}
  /* the following defines the textbox used on the winter bumblebees page */
.updatebox {
	font-family: "Trebuchet MS";
	font-size: small;
	line-height: normal;
	border: 1px dotted #999999;
	color: #003333;
	margin: 2px;
	width: 730px;
	float: none;
	padding: 10px;
	background-position: right;
	background-color: #FFFFFF;
	vertical-align: top;
	text-align: right;
}
/* the following defines the yellow textbox used at the foot of the winter bumblebees page. It is one page wide. */
.textbox {
	background-color: #FFFFCC;
	margin: 15px;
	padding: 20px;
	clear: both;
	float: left;
	height: auto;
	width: auto;
	border: thin solid #330033;
	text-indent: 10px;
}
/* the following defines the textbox used inside the 'left-text' area. It is narrower than 'textbox'. */
.left-textbox {
	background-color: #FFFFCC;
	margin: 1px;
	padding: 10px;
	clear: both;
	float: left;
	height: auto;
	width: 570px;
	border: thin solid #330033;
	text-indent: 10px;
}

  /* THE FOLLOWING STYLES SET THE FONTS AND PRE-SET HEADINGS H1, H2 etc. */
/* the following sets a default paragraph setting, which may be over-ruled by other styles */
p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	line-height: 18px;
}
/* the following sets heading 1 */
h1 {
	font-size: x-large;
	font-weight: lighter;
	color: #003333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 1.1;
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
	background-position: bottom;
	vertical-align: top;
}

/* the following sets headign 2 */
h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: large;
	font-weight: lighter;
	color: #003333;
}
/* the following sets heading 3 */
h3 {
	font-family: Verdana, Arial, sans-serif;
	font-size: medium;
	font-weight: normal;
	line-height: 1.1;
	color: #330033;
}
/* the following sets heading 4 */	
h4 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: xx-large;
	color: #330033;
	font-weight: lighter;
	background-position: top;
}
/* the following sets heading 5 */
h5 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-large;
	font-weight: lighter;
	color: #000066;
	line-height: 100%;
}
/* THE FOLLOWING STYLES CONTROL THE APPEARANCE OF THE TOP OF THE PAGE */
/* the following defines the container for the banner called iris4 */
DIV#bannerboxiris {
	border: 1px solid #CCCCCC;
	display: block;
	width: 750px;
	height: 80px;
	margin: 0px;
	padding: 0px;
	position: relative;
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
}
/* the following defines the container for the banner called lawn, it is higher than the iris banner */
DIV#bannerboxlawn{
	border: 1px solid #CCCCCC;
	display: block;
	width: 754px;
	height: 90px;
	margin: 0px;
	padding: 0px;
	position: relative;
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
	background-position: left;
}	
/* the following defines the container for the banner lawn2, which has extra text below the image */
DIV#bannerboxlawnN2{
	border: 1px solid #CCCCCC;
	display: block;
	width: 750px;
	height: 111px;
	margin: 0px 0px 10px;
	padding: 0px;
	position: relative;
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
}
/* the following defines the container for the large text below the banner */
DIV#bannerboxtext {
	border: 1px dotted #CCCCCC;
	display: block;
	width: auto;
	height: 80px;
	margin: 0px;
	padding: 6px 0px 3px 10px;
	position: relative;
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
	background-color: #FFFFFF;
	background-position: left top;
	text-align: left;
}
/* THE FOLLOWING STYLES CONTROL THE NAVIGATION. NOTE THAT THIS IS NOT AN 'ORDERED LIST'. */
/* the following defines the container for the menu items */
DIV#menubox {
	background-color: ;
	width: 100px;
	border: 1px dotted #CCCCCC;
	background-position: center top;
	display: block;
	text-align: left;
	clear: none;
	float: right;
	padding-right: 2px;
	padding-bottom: 1px;
	padding-left: 2px;
	height: auto;
	position: static;
	vertical-align: top;
	margin: 1px;
	background-color: #FFFFFF;
	padding-top: 0px;
	}
/* the following defines the text and layout of each menu item */
.menuitems {
	height: auto;
	vertical-align: top;
	display: block;
	border: 1px none #CCCCCC;
	text-align: left;
	padding: 7px 2px 8px 3px;
	font-size: small;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #CCCCFF;
	font-weight: normal;
	line-height: 1.2;
	left: auto;
	width: auto;
	background-position: right;
	float: none;
	color: #666633;
	margin-top: 1px;
}
/* the following defines the standard appearance of a link and suppresses the default underline supplied by the browser */
a:link  {
	color: #333399;
	text-decoration: none;
}
/* the following defines the appearance of a link that has been visited and suppresses the default purple supplied by the browser */
a:visited {
	color: #660033;
	text-decoration: none;
	font-weight: lighter;
}
/* the following defines the appearance of a link that the cursor is hovering over and suppresses the default red supplied by the browser */
a:hover {
	color: #333399;
	text-decoration: underline;
}
/* The following ensures that the 'whole-page' style in Firefox will extend down to cover the whole page area. IMPORTANT: This style must be attached to a full stop at the end of each page. */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/* the following attribute attached to a special-purpose div at the end of the page with no content fulfills the same purpose*/
clear: both; 
/* the following appear to be HTML table styles that can be deleted*/
/* delete the following? might need to put a default in page or body? */
td {
	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}
/* the following refers to horizontal rule? CHECK */
th {
	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}
/* ????? */
.splitpage {
	background-color: #FFFFFF;
	text-align: left;
	vertical-align: top;
	display: block;
	padding: 10px;
	width: 370px;
	border: 1px solid #CCCCCC;
}
/* delete? */
.divpage {
	vertical-align: top;
	display: block;
	border: 1px none #CCCCCC;
	text-align: left;
	padding: 5px 15px 15px 20px;
	font-family: Arial, Helvetica, sans-serif;
	color: #333333;
	background-color: #FFFFFF;
	width: 715px;
	background-position: left;
	float: left;
}
/* delete? */
.tableborder {
	vertical-align: top;
	display: block;
	text-align: center;
	color: #333333;
	background-color: #FFFFFF;
	padding-top: 2px;
	padding-bottom: 2px;
	border: 1px solid #CCCCCC;
	background-position: center top;
	margin: 5px;
	width: 756px;
}