/* ------------------------------------------------------- */
/* settings commonly tweaked */
/* ------------------------------------------------------- */
/* main body font style. this is the default if not otherwise overridden */
/* ------------------------------------------------------- */
body {
	font-family: 	Arial, Helvetica, sans-serif, Arial, Helvetica, sans-serif;
	color : 	#c0c0c0;
	font-size :	10pt;
	text-align: 	left;
}
/* ------------------------------------------------------- */
/* primary behavior for links on pages */
/* ------------------------------------------------------- */
a:link,a:active,a:visited {
        color:		#ff9933;
}
/* ------------------------------------------------------- */
/* generally links shoud telegraph when they are hovered over */
/* ------------------------------------------------------- */
a:hover {
	
        text-decoration:  underline;
	COLOR:		  ff6600; 		/* THIS IS THE COLOR FOR ANY LINKS ON THE PAGES WHEN YOU HOVER OVER THEM */
}
/* ------------------------------------------------------- */
/* here we establish that body text areas generally have NO margin...this is left to more specific styles */
/* ------------------------------------------------------- */
body,td,th {
	margin:	0px;        
}
/* Tantek's Hack for unique font sizes in all browsers */
p {
	font-size: x-small;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: small;
}
html>p {
	font-size: small;
}

/* ------------------------------------------------------- */
/* Structure of site layout - Definition of boxes          */
/* whatever is the width here, maintain through other divs */
/*                                                         */
/* for centering the main box in IE 5 and IE5.5            */
/* This determines the background for the entire site      */
/* ------------------------------------------------------- */
#start {
	text-align: center;
	background-image: url(images/bkgd.png);
}
/***********************************************************/
/* this is a container that establishes the width of the entire site and is centered */
/***********************************************************/
#center {
	float : center;  /* not really needed, but enforces site centering...if set to left, the entire site hugs the left of the browser */
	margin: auto;
	text-align: right;
	padding: 0px;
	width: 1000px;
	height: 100%;	  
	position: relative;
}
/***********************************************************/
/* I'm not sure this is ever used, comment it out later and see what happens */
/***********************************************************/
#left {
	text-align: left;
}
/***********************************************************/
/* site banner */
/***********************************************************/
#banner {
	top: 0px;
	left: 0px;
	width: 1000px;
	position: absolute;
	height: 200px;		/* this needs to be the same as the top setting in the next block */
	/* this is the actual banner image */
	background-image: 	url(images/banner.png);
}
/*------------------------------------------------------------------------------------------------*/
/* this controls where the main content section starts, relative to the top of the page */
/* change the "top" value to raise it higher or lower */
/* if you made this different from the banner hight you COULD enforce a border region between the two */
/*------------------------------------------------------------------------------------------------*/
#content_container {
	top: 200px;      /* this must be the same as the banner height; otherwise the content area starts too high or low */
	left: 0px;
	width: 1000px;
	position: absolute;
	height: 100%;
}
/*------------------------------------------------------------------------------------------------*/
/* this section provides for an image to sit on top of the content area so that if desired, you can
   have a rounded border to the image */
#content_header {
	left: 0px;
	width: 1000px;
	background-image: url(images/content_header.png);
	position: absolute;
	height: 20px;
        margin : 0px;
}
/*------------------------------------------------------------------------------------------------*/
/* this section comprises the entire main part of the site (other than the top and bottom banners */
/* 	IMPORTANT!!!! It is a pain to enforce the box sizes for nav and content, so as a result, whichever
	box is smaller (based on how much text in the page) will appear to be cutoff at the bottom,
	revealing the background of this container div. Rather than fight with browsers and use hacks,
	the simple colution is to use a background image here that has the proper dimensions of the
	nav and content element "painted in" */
/*------------------------------------------------------------------------------------------------*/
#content_and_navigation {
        top: 0px; /* to make room for the header */
	left: 0px; 								/* this moves the entire area over */
	width: 1000px;
	background-image: url(images/nav_n_content_bkgd.png); /* this image is actually for the entire content area ie not JUST the nav area */
	position: absolute;
}
/*------------------------------------------------------------------------------------------------*/
/* float to determine navigation bar position                                                     */
/* in order to APPEAR as if it's as tall as the content, this div inherits it's background from   */
/* the content_and_navigation div. Otherwise it will only be as tall as the menu stuff and if the */
/* content is longer, the nav area will appear to end too early                                   */
/* obviously, therefore the content area overrides the content_and_navigation background setting  */
/*------------------------------------------------------------------------------------------------*/
#navigation_area {
	float: left;		/* make this the opposite of content_area (below) */
	width: 200px;		/* width of the nav bar */
	height: 100%;
        padding-left: 0px;	/* optionally - pads menus, so they are not so tight to the edge  */
	padding-right: 0px;	/* same idea here, not strictly required... */
}
/*------------------------------------------------------------------------------------------------*/
/* 	float this opposite of navigation bar position for simplicity, but technically not required...
	if you float them both left, all is fine IF the total width does not exceed the total width
	of the site (1000 by default. The easy solution is to float it the opposite so these two DIVs
	hugg opposite outside edges. I am specifying margins and padding because I suspect IE does
	NOT default to zero, so there are stray elements contributing to total sizes that are not
	accurate to what you expect based on the pixel sizes of the elements. If th etotal pixel size
	exceeds the site itself, then (obviously) this div will get placed UNDER the nav area instead
	of BESIDE it
*/
/*------------------------------------------------------------------------------------------------*/
#content_area {
	float: left;   		/* opposite of navigation area */
	width: 540px;   	/* this makes the fckEdit window correct shrink to leave room for a column opposite for button ads, etc */
	height: 100%;
	margin:0px;
	padding-left : 20px;	/* this is one reason why the discrepancy in prior comment */
	padding-right : 10px;
	padding-bottom : 0px; 	/* without this IE adds this div BELOW the bottom banner! Stoooooo-pid Microsoft! */
	text-align: left;
}
/* the next few divs are for areas used for photo montages, banners, etc. embedded in the template (maybe adwords) */
/* if you are not going to use banners, etc. then you could just set the #promo div to width : 0 */
/* also in all likelihood you will also set the content area div (above) to, say, 750 to fill up the content area of the template */
/* keep in mind the photo gallery and these are kind of mutually exclusive since you need about 750 pixels for the gallery to fit */
/* of course we could always add a div at the bottom for banner ads, etc. */
.hotnews {
        float : left;
        width : 180px;  /* leaves 20 pixels for the right hand border area of the site */
        margin-left : 20px;
        height : 100%;
	text-align: left;
}
#banners {
        height : 100%;
	text-align: left;
}
#content_footer {
	clear: both;
	width: 1000px;
	height: 20px;
	background-image: url(images/content_footer.png);
	background-repeat: no-repeat;
  
}
/*------------------------------------------------------------------------------------------------*/
/* totally optional or you could just include a simple border graphic, whatever                   */
/*------------------------------------------------------------------------------------------------*/
#bottom_banner {
	clear: both;
	width: 1000px;
	height: 40px;
	background-image: url(images/bottom_banner.png);
	background-repeat: no-repeat; 				/* or else stupid IE tiles it by default outside its box!!! #@$#%@#!~ */
}
/* ------------------------------------------------------- */
/* End of definition of boxes*/
/* ------------------------------------------------------- */
/* end of centering --------------------------- */
/* ------------------------------------------------------- */
/*------------------------------------------------------------------------------------------------*/
/* 	currently the template does not use this. If it did, it would display the site name whereever you indicate
	via php and  this would be the style. */
/*------------------------------------------------------------------------------------------------*/
#sitename {
	font-size: 23px;
	font-weight: bold;
	padding: 25px 40px 0  400px;
	color: #D4AF83;
    	text-align: left;
}
/*------------------------------------------------------------------------------------------------*/
/* same here, only for sites that use the newsbox feature */
/*------------------------------------------------------------------------------------------------*/
#newsbox{
	margin: 5px;
	background-color: #000000;
	padding: 5px;
	width: 118px;
	border: 2px #EBCBA7 dotted;
	font-size: 12px;
}
/*------------------------------------------------------------------------------------------------*/
/* 	H Fonts - this determines, I presume, the look of menu-derived headings - 
	so perhaps if we hide them, make them infinitely small, etc. might be a kludgy way to get 
	them off the pages should you want to do that. Obviously the better way would be to grok either 
	the  template or php to get rid of the code that puts it in there... */
/*------------------------------------------------------------------------------------------------*/
h1 {
	letter-spacing : 5px;
        color : #ff9933;
	font-family : Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight : bold;
	line-height: 30 px;
	margin-top: 0;
	margin-bottom: 0;
	}
h2 {
	letter-spacing : 5px;
        color : #DDDDDD;
	font-family : Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight : normal;
	line-height: 30px;
	margin-top: 0;
	margin-bottom: 0;
	}
h3 {
	letter-spacing : 10px;
        color : #BBBBBB;
	font-family : Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight : normal;
	line-height: 30px;
	margin-top: 0;
	margin-bottom: 0;
	}
/* ------------------------------------------------------- */
/*
	note that by default, H4 is used to render the word "Submenu"
	on pages that list a submenu. My general recommendation is, don;t 
	use it in pages unlesss there's a very good reason, which is, of
	course, impossible!   :)
*/
/* ------------------------------------------------------- */
h4 {
	color : #000000;
	font-family : Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight : normal;
	line-height: 40px;
	margin-top: 0;
	margin-bottom: 0;
        visibility:hidden;
	}
/*=================================================*/
/* H5 and H6 appear to be nothing and were removed */
/*=================================================*/
/*=================================================*/
/* 	here is where you can give a distinct style 
	to the CURRENTLY SELECTED nav menu item..
	The colors of the UN selected menu items are 
	still dictated  by the NEXT items... */
/*=================================================*/
	
ul.menulevel1,ul.menulevel2,ul.menulevel3,ul.sitemaplevel1,ul.sitemaplevel2,ul.sitemaplevel3,ul.submenu,ul.search
{
	color : #ffffff;	/*Controls currently selected link */
	font-size : 8pt;
	font-family : Verdana, Arial, Helvetica, sans-serif;
	padding-left: 15px;
	margin-left: 0;
	list-style: none;
}
/*----------------------------------------------------------------------------*/
/* 	here is where you can tweak the distance between the lines of the nav menu 
	and establish the color of menuitems that are NOT currently selected */
/*----------------------------------------------------------------------------*/
.menulevel1 a:link,.menulevel1 a:visited,.menulevel1 a:active,.menulevel2 a:link,.menulevel2 a:visited,.menulevel2 a:active,.menulevel3 a:link,.menulevel3 a:visited,.menulevel3 a:active,.locator a:link,.locator a:visited,.locator a:active,.navigator a:link,.navigator a:visited,.navigator a:active,.sitemaplevel1 a:link,.sitemaplevel2 a:link,.sitemaplevel3 a:link,.sitemaplevel1 a:visited,.sitemaplevel2 a:visited,.sitemaplevel3 a:visited,.sitemaplevel1 a:active,.sitemaplevel2 a:active,.sitemaplevel3 a:active{
	text-decoration: none;
	color: #ff9933;		/* this is the primary color of menu items */
	line-height: 200%; 	/* right here */
	font-family : Verdana, Arial, Helvetica, sans-serif;
	padding : 5 px;
}
.menulevel1 a:hover,.menulevel2 a:hover,.menulevel3 a:hover,.locator a:hover,.navigator a:hover,.sitemaplevel1 a:hover,.sitemaplevel2 a:hover,.sitemaplevel3 a:hover{
	text-decoration: underline;	/* typical...menus should decorate on hover... */
	color: #ff6600;    		/* this is the color and style of menu items when you hover */
	font-weight: normal;
}
/***************************************************************************************************************************/
/* 	I'm not included to dink with this too much. It comes into play in the rendering of the menu graphics, */
/***************************************************************************************************************************/
li {
	line-height: 200%;
}
li.doc {
	padding-left: 10px;
	/* background-image: url(menu/doc.gif);  */
	background-repeat: no-repeat;
}
li.docs {
	padding-left: 10px;
	/* background-image: url(menu/docs.gif); */
	background-repeat: no-repeat;
}
li.sdoc {
	padding-left: 10px;
	/* background-image: url(menu/sdoc.gif);  */
	background-repeat: no-repeat;
}
li.sdocs {
	padding-left: 10px;
	/* background-image: url(menu/sdocs.gif); */
	background-repeat: no-repeat;
}
/***************************************************************************************************************************/
/* this actually dictates the background color of the edit area itself, such as button baces...weird...
	it also dictates the font size, etc of the edit menu items */
/***************************************************************************************************************************/
.edit {
	font-size:9px;
	color: #000000;
	background-color: buttonface;
 
}
.edit a:link,.edit a:visited,.edit a:active {
	font-weight: normal;
	color: #216862;
	font-size:9px;
	text-decoration: none;
}
.edit a:hover {
	text-decoration: underline;
}
input,select {font-size:9px;}
textarea {
	font-family: Verdana, Arial, Helvetica, sans-serif, Arial, Helvetica, sans-serif;
	background-color: #FAFAFA;
	width: 98%;
	text-align: left;
}
#text {
	text-align: left;
	font-size: 9pt;
}
.searchbox {
	margin-left: 0px;
	text-align: left;
         
}
.searchbox .submit {
	font-size: 9px;
	color: #050505;
	border: 1px solid #050505;
	background-color:#a7c2c3;
	margin-bottom: 5px;
}
.searchbox .text {
	font-size: 9px;
	color: #050505;
	border: 1px solid #050505;
	background-color: #d7e9ea;
	margin-bottom: 5px;
}
/*=========================================*/
/* some situations you want the submenu on the page to be a different color than the navigation menus */
/*=========================================*/
.submenu, .submenu a:link,.submenu a:visited,.submenu a:active  {
	TEXT-DECORATION : NONE;
	font-family : arial;
	font-weight : normal;
	color : #bbbbbb;
}
.submenu {
	font-size: 85%;
	font-weight: normal;
	margin: 0px 2px 10px 10px;
}
.submenu a:hover {
	TEXT-DECORATION : UNDERLINE;
}
/*=========================================*/
/* 	let's say you want the menu to start a little lower down the nav column for some
	reason...here's where you can do it! These defaults look pretty good, though...
/*=========================================*/
#mainmenu {
	margin: 15px 2px 20px 5px;
}
/*******************************************/
.login,.login a,.login a:link,.login a:visited,.login a:active,.login a:hover {
	TEXT-DECORATION : NONE;
	font-size: 85%;
	padding-left : 10px;
	font-family : arial;
	font-weight : normal;
	color : #333333;
}
/*=========================================*/
/* this is the font and position of the cmsimple plug that's required... */
/*=========================================*/
#copyname {
	font-size: 9px;
	font-weight: NORMAL;
	color: #777777;
}
.copyright, .copyright a:link, .copyright a:active, .copyright a:visited {
	 
    color: #777777;
    text-align: left;
    text-decoration: none;
    text-align: right;
    padding-right: 5px;
    padding-bottom: 5px;
}
.copyright a:hover {
	text-decoration: underline;
	font-weight : normal;
}
/*=========================================*/
/*=========================================*/
.lastupdate {
	font-size: x-small;
	font-weight: normal;
	color: #6C94AD;
	text-align: left;
	padding-left: 8px;
}
.news {
	margin: 20px 5px 10px 5px;
	text-align: left;
	font-size: small;
	font-weight: bold;
	padding-left: 5px;
	background-color: #EBCBA7;
}
/*=========================================*/
IMG.li {
display: block;
position: relative;
float: left;
margin-right: 10px;
margin-left: 5px;
}
IMG.re {
display: block;
position: relative;
float: right;
margin-right: 10px;
margin-left: 5px;
}
/* 	someVerdana, Arial, Helvetica, sans-serif you want to enforce a margin around images...you can do it here, but this
	ALSO puts a margin around the img's in the edit toolbar!
	Until I can grok the php, I am suggesting editing images to have a border the same color
	as the main site background in order to enforce a border (assuming you will be using align=left 
	on some images of course. If you don't then don;t worry about it...
*/
IMG {
position: relative;
}
#form_middle {
	float: center;
	width: 380px;
	height: 100%;
	margin: 0px;
	text-align: right;
        
}

#hidden_button {
   position:absolute;
bottom:0px;
left:0px;
cursor:pointer;
}

.widget {
margin-top:-13px;
}