body {color: black; font: 12px Helvetica, Arial, sans-serif; line-height: 20px; }





		#footer			{ background: white; border-bottom: 2px solid #999; clear: left; width: 100%; }
		#footer a		{ color: green; }
		#footer	p		{ color: red; margin: 0; padding: 0 18px 10px; }
		#footer ul		{ border-bottom: 1px solid #555; list-style: none; margin: 0 18px 6px; padding: 10px 0 6px; }
		#footer li		{ display: inline; font-size: 11px; font-weight: bold; padding-right: 5px; }

/*table { border: 0 ; cellpadding: 2; bordercolor: #fae488; cellspacing: 2; background:#fae488}*/
table { border: 0 ; cellpadding: 2; bordercolor: #fae488; cellspacing: 2;}

tr {vertical-align:top}
table.pagelayout {width: 850}
table.content {width:100%}



a:link, a:visited, a:active{
color: orange;
}

a:hover {color:green}

.leftsidebar{background-color: #fbf1b7}
.rightsidebar{color: black; background-color: #fbf1b7}

h5 {color: red;
display: block;
font-size: 15px;
font-weight: bold;
height: 15px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
} 

.developing {visibility: hidden}



.drawbox{ 
background-attachment: scroll;
background-color: inherit;
background-image: url(../images/rhmBorderyellow.gif);
background-repeat: no-repeat;
background-position: bottom right;
display: block;
height:215px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
width: 175px;
}

h3 { 
background-attachment: scroll;
background-color: inherit;
background-image: url(../images/rhmBackgroundYellow.gif);
background-repeat: no-repeat;
color: #970001;
block;display: block;
font-size: 16px;
font-weight: bold;
height: 32px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 3px;
padding-left: 15px;
padding-right: 3px;
padding-top: 0px;
width: 175px;
}

#contact-list{width: 132px;text-align:justify;}
#contact-list ul {
color:black;
margin: 10px;
padding: 0;
list-style-type: none;
font-family: verdana, arial, sanf-serif;
font-size: 10px}

#area-list{width: 132px;text-align:justify;}
#area-list ul {
color:black;
margin: 10px;
padding: 0;
list-style-type: none;
font-family: verdana, arial, sanf-serif;
font-size: 16px}

/*At this stage we only need to define the width (positioning also if you like): */
#list-menu {
width: 132px;

/*height: 100px;*/
/* this width value is also effected by
the padding we will later set on the links.	*/
}

/*Now we have to take control of the list by removing the indents. We also need to remove the default bullets (or numbers if you decided to use an ordered list)*/
#list-menu ul {
margin: 10px; 
padding: 0;
list-style-type: none;
font-family: verdana, arial, sanf-serif;
font-size: 12px;
}

/*We should also create a little bit of space between the list items to improve presentation, so we create the following css for each list item:*/
#list-menu li {
margin: 2px 0 0;
}

/*Now we just need to create styles for the actual links.*/
#list-menu a {
display: block;
width:150px;
padding: 2px 2px 2px 10px;
border: 1px solid #000000;
background: #ffcc00;
text-decoration: none; /*lets remove the link underlines*/
}

/*The final step is to create the rollover-effect. Like any link rollover effect this is done using the pseudo classes which allow us to define the visited, active and hover states for the links:*/

#list-menu a:link, #list-menu a:active, #list-menu a:visited {
color: #000000;
}

/*The final step is to create the rollover-effect. Like any link rollover effect this is done using the pseudo classes which allow us to define the visited, active and hover states for the links:*/


#list-menu a:hover {
border: 1px solid #000000;
background: #333333;
color: #ffffff;
}


/*For extra effect we could add a background image on hover:

#list-menu a:hover {
border: 1px solid #000000;
background: #333333 url('images/L.gif');
color: #ffffff;
}

*/
/*As a last point, adding onfocus="this.blur()" into each link code will get rid of that annoying dotted line which appears when the link is clicked.*/