/*
Site default text size is the base browser font size of 16 pixels or 1em, or the browser medium setting.  
Menu, nav bar:  small (13)
Footer: x-small (11)

 If you want your pages to validate with an HTML or a CSS validator, 
 W3C has listed 16 color names that you can use: aqua, black, <blue?>, 
 fuchsia, gray, green, lime, maroon, navy, olive, purple, red, 
 silver, teal, white, and yellow.

 
*/
/* ---------------- setup defaults ------------------------------------ */

body,h1,h2,h3,h4,h5,h6,p,ol,form,blockquote
{
	/* The above excludes ul & li tags, caused problems. */
	color: #000000;
	/*Specify font-family as generic so the browser picks the available specific fonts */
	font-family:  lucida, sans-serif, geneva, verdana, arial, tahoma, helvetica;
	/* font-size: medium; */
	font-size: 1.0em;
	padding: 0px;
	margin: 0px;
	line-height: 1.20em;
}

a:link {color: #006400; text-decoration: none; }  
a:visited {color: #006400; text-decoration: none; } 
a:hover {color: #009900; text-decoration: none; } 
a:focus {color: #009900; text-decoration: none; } 
a:active {color: #009900; text-decoration: none; } 

a img {
  border: none;
}

table, th, td, tr  {
	border-collapse: collapse;
	border-style: solid;								 /* solid, none  */
	border-color: black;
	border-width: 1px; 
	border-spacing: 5px;
	caption-side: top;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 5px;
	empty-cells:  show;
}

th, td {
	/* vertical-align:text-top;  is used to align the cell's contents (image?) to top (for td) */
	vertical-align:text-top;
	/* vertical-align:top; vertically aligns text in a cell to the top  */
	vertical-align:top;
	text-align:left;
}


h1 {
  /* takes precedence over previous assignment due to cascade 
	Banner is 975x102px
	Designed for SEO.
  */
	text-indent: -9999px;
	width: 975px;
	height: 100px;
	background: url(pageImg/banner.png) no-repeat center;
	color: #8B0000;  
	font-weight: bold;
}
h2 {
  /* takes precedence over previous assignment due to cascade */
	margin-top: 4px;  
	font-size: 1.5em;
	letter-spacing: 1px;
	word-spacing: 2px; 
}
h3 {
  /* takes precedence over previous assignment due to cascade */
	margin-top: 3px;
	font-size: 1.3em;
	letter-spacing: 1px;
	word-spacing: 1px;
}
h4,h5,h6 {
  /* takes precedence over previous assignment due to cascade */
	margin-top: 2px;
	font-size: 1.1em;
	letter-spacing: 1px;
	word-spacing: 1px;
}

hr {
  /* horizontal rule */
  color: #006400;  /* same as nav bar and footer */
}

/* ---------------- ----------- ------------------------------------ */
/* Custom styles.  Applied to html tag as <tag class="name" ...      */

.default {
	border: none;
	/*
	vertical-align:text-top;
	text-align:left;
	*/
}

.no_line {
	border: none;
	/*
	vertical-align:text-top;
	text-align:left;
	*/
}


p.small { 
 font-size: small;
}
a.small:link {color: #000000; text-decoration: None; font-size: small;}
a.small:visited {color: #000000; text-decoration: None; font-size: small;}
a.small:hover {color: #009900; text-decoration: None; font-size: small;}
a.small:active {color: #000000; text-decoration: None; font-size: small;} 


p.small_warn {
 font-size: small;
 color: #8B0000;
 font-weight: bold;
}
a.small_warn:link {color: #8B0000;  font-weight: bold;text-decoration: None; font-size: small;}
a.small_warn:visited {color: #8B0000;  font-weight: bold;text-decoration: None; font-size: small;}
a.small_warn:hover {color: #8B0000;  font-weight: bold;text-decoration: Underline;  font-size: small;}
a.small_warn:active {color: #8B0000;  font-weight: bold;text-decoration: Underline; font-size: small;} 


.warn{
 color: #8B0000;
 font-weight: bold;
}
a.warn:link {color: #8B0000;  font-weight: bold;text-decoration: None; font-size: small;}
a.warn:visited {color: #8B0000;  font-weight: bold;text-decoration: None; font-size: small;}
a.warn:hover {color: #8B0000;  font-weight: bold;text-decoration: Underline; font-size: small;}
a.warn:active {color: #8B0000;  font-weight: bold;text-decoration: Underline; font-size: small;} 

p.dark{
 color: #009900;
 font-weight: bold;
}
a.dark:link {color: #009900;  font-weight: bold; text-decoration: None; }
a.dark:visited {color: #009900;  font-weight: bold; text-decoration: None; }
a.dark:hover {color: #009900;  font-weight: bold; text-decoration: Underline; }
a.dark:active {color: #009900;  font-weight: bold; text-decoration: Underline; } 

p.small_dark{
 font-size: small;
 color: #009900;
 font-weight: bold;
}

a.small_dark:link {color: #006400; text-decoration: None; font-size: small; font-weight: bold;}
a.small_dark:visited {color: #006400; text-decoration: None; font-size: small; font-weight: bold;}
a.small_dark:hover {color: #009900; text-decoration: None;  font-size: small; font-weight: bold;}
a.small_dark:active {color: #009900; text-decoration: None; font-size: small; font-weight: bold;} 

p.sidebar{
	color: #FFF5EE;
	text-align:left;
	font-size: small; 
}


.sidebar_v_sm{
	color: #FFF5EE;
	text-align:left;
	font-size: 0.70em; 

}

a.sidebar:link {color: #FFF5EE; text-decoration: None; font-size: small; }
a.sidebar:visited {color: #FFF5EE; text-decoration: None; font-size: small; }
a.sidebar:hover {color: black; text-decoration: None; font-size: small; font-weight: bold; }
a.sidebar:active {color: black; text-decoration: None; font-size: small; } 

a.tbl_link:link {color: #000000; text-decoration: None; }
a.tbl_link:visited {color: #000000; text-decoration: None; }
a.tbl_link:hover {color: #009900; text-decoration: None; }
a.tbl_link:active {color: #009900; text-decoration: None; } 

.align_left{
	text-align:	left;
	background-position: left top;
}

/*	Background area for code to differentiate it from text.
	OK to use in <textarea>
*/
textarea.code_txt {
	background-color: #FFFFFF ;  
}

/*  Below is OpenID background image for login ID text box */
input.open_id {
	background: #FFFFFF url(pageImg/openid-logo-small_125w.png) no-repeat scroll 0pt 50%;
	padding-left: 18px;
}


/* 	-------------------------------------------------------------------------------------------------------
	Side vertical menu redesigned using this tutorial:  
	http://www.learnwebdesignonline.com/css-tutorials/verticalmenu.htm
*/

ul.sidemenu {
	padding:0;
	margin:0;
	list-style: none;
	font-size: 0.8em;
	border-bottom: 1px solid black; 
	/* 	Internet Explorer needs to have a width in order for display: block to take effect.
		The sidebar image is 142 px wide 
		The width below must match the width for ul.sidemenu li a {..
	*/
		width: 100px;
	background-color: #66A266;  /* menu, ad col background-color */
	/* text-align:left; */
}
ul.sidemenu li {
		border-top: 1px solid black; 
	border-right: 1px solid black; 
	border-left: 1px solid black; 
	text-align: left;
}
ul.sidemenu li a {
	text-decoration: none;
	display: block;
	padding-top: 4px;
	padding-bottom: 4px;
		padding-left: 5px;
	padding-right: 5px;
	/* 	Internet Explorer needs to have a width in order for display: block to take effect.
		The sidebar image is 142 px wide 
		IE 6 padding will not appear correctly.  To correct, we have to set the width of the <a> links 
		to be 78px. Why 78px? We have to remember that the definition of width is the content width of an 
		element -- that is the width excluding the margin, padding, and borders. Our <ul> is 100px. Inside 
		the <ul> is our <li> which has an one pixel left border and a one pixel right border. So the content 
		width of our <li> is 98px. The <a> that is inside our <li> has a left padding of 10px and a right 
		padding of 10px. Excluding the padding, the content width of the <a> element is 78px.	
		100px - (<li> width border width *2) - (<a> left & right padding *2) = width below.
		The calculation above is programmed into this sheet.
	*/
	width: 88px;
	color: #FFF5EE; 
}
ul.sidemenu li a:link {
	color: #FFF5EE; 
}
ul.sidemenu li a:visited {
	color: #FFF5EE; 
}
ul.sidemenu li a:visited strong {
	font-weight: bold;
}
ul.sidemenu li a:hover {
	color: #FFF5EE; 
	background-color: #006400;
}

/* ---------------- ----------- ------------------------------------ */

/* 	The content width must be the difference of the banner/footer width 
	of 975 minus the sum of the widths of the wrapper_sidebar_left,
	wrapper_sidebar_right, content, and each of their padding.  
	
	975 (banner/footer width) - 132 (wrapper_sidebar_left) - 5px * 2 (padding) - 150 (wrapper_sidebar_right) - 5px * 2 (padding) - 10 px * 2 (content padding) = 653 width for content.
	
*/


#wrapper
{
	width: 977px; 
	border: none; 
	margin-top: 5px;
	margin-left: 5px;
}

#header_top_fade {
	border-top: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
	background-image: url(pageImg/5pxTall_fade_TopToBottom_green1.png);
	background-repeat: repeat-x;
	background-position: left top;
	height: 5px; 
}  

#header  {
	padding-left: 0px;
	border-left: 1px solid black;
	border-right: 1px solid black;
	
}


#header_bottom_fade {
	border-left: 1px solid black;
	border-right: 1px solid black;
	background-image: url(pageImg/5pxWide_fade_BottomToTop_green1.png);
	background-repeat: repeat-x;
	background-position: left bottom;
	height: 5px;
}  


#navbar {
	background-image: url(pageImg/navbar_green1.png);
	background-repeat: repeat-x;
	background-position: left bottom;
	height: 30px; 
	border-left: 1px solid black;
	border-right: 1px solid black;
	vertical-align:text-top;
	padding:0;
}  

.nav {
	/* background-color: #006400;   */
	font-size: small;
	color: white;
	margin: 0px;
	line-height:25px;
}
a.nav:link {color: #FFF5EE; }
a.nav:visited {color: #FFF5EE; }
a.nav:hover {color: Orange;  }
a.nav:active {color: Orange; } 



#wrapper_sidebar_left
{
	float: left;
	background-image: url(pageImg/sidebar_left_bkg_green1.png); /* 142 px wide */
	background-repeat: repeat-y;
	background-position: left top;
	border-left: 1px solid black;
}

#wrapper_sidebar_right
{
	float: right;
	background-image: url(pageImg/sidebar_right_bkg_green1.png); /* 160px wide */
	background-repeat: repeat-y;
	background-position: right top;
	border-right: 1px solid black;
}


#sidebar_left 
{
	float: left;
	width: 132px; /* width: 132px;  */
	padding: 5px;
	height: 625px; /* Set height = height of menu !!! */
	display: inline;  /* to fix IE6 bug */	
	text-align: center;
	/* text-align: left;  */
}

#sidebar_right 
{
	float: right;
	width: 150px;  /* width: 150px */
	padding: 5px;
	height: 10px;
	display: inline;  /* to fix IE6 bug */	
	text-align: left;
	}


#content {
    float: left;
	display: inline;  /* to fix IE6 bug */
	/* 653px */
	/* if width is too big. the content will drop vertically */
	width: 653px;  
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	/* text-align:left; */
}

#foot {
	font-size: x-small;
	color: #FFF5EE;
	margin: 0px;
	line-height:20px;
}
a#foot:link {color: #FFF5EE; text-decoration: none; }
a#foot:visited {color: #FFF5EE; text-decoration: none; }
a#foot:hover {color: Orange; text-decoration: underline; }
a#foot:active {color: Orange; } 

#footer {
	background: url(pageImg/footer_green1.png) no-repeat left; 
    float: left;
	width: 975px;
	height: 20px;
	border-left: 1px solid black;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
}  


/*	********************************************************************************************** 	*/


/*	David Walsh PHP/CSS calendar	http://davidwalsh.name/php-calendar								*/

/* calendar */
table.calendar	{ 
	border: 1px sold 999999; 
	width:  300px;
	padding: 0px;
	border-collapse:collapse;	
}
tr.calendar-row-weekdays	{  
	height:30px; 
}tr.calendar-row	{  
	height:50px; 
}
td.calendar-day	{ 
	min-height:80px; 
	min-width:35px;  
	font-size:11px; 
	position:relative; 
} 
* html div.calendar-day { height:80px; }
td.calendar-day:hover { 
	/*  off white highlight of day box (larger) */ 
	background:#eceff5; 
	border-bottom: 1px solid #999999; 
}
td.calendar-day-np	{ 
	background:#eeeeee; 
	min-height:80px; 
} 
td.calendar-day-sel	{ 
	/*  day selected or today  */
	background: #66A266;
	border-bottom: 1px solid #999999; 
	border-top: 1px solid #999999; 
	border-right: 1px solid #999999; 
} 
td.calendar-day-sel:hover	{ 
	/*  day selected or today  */
	background: #006400;
	border-bottom: 1px solid #999999; 
	border-top: 1px solid #999999; 
	border-right: 1px solid #999999; 
} 

* html div.calendar-day-np { height:80px; }
td.calendar-day-head { 
	background:#cccccc; 
	font-weight:bold; 
	text-align:center; 
	width:120px; 
	padding:5px; 
	border-bottom: 1px solid #999999; 
	border-top: 1px solid #999999; 
	border-right: 1px solid #999999; 
}

div.day-number		{ 
	background: #999999; 
	padding:5px; 
	color: #ffffff; 
	font-weight:bold; 
	float:right; 
	margin:-5px -5px 0 0; 
	width:20px; 
	text-align:center; 
}
div.day-number:hover { 
	/* change to darker gray on hover */
	background: #6a6a6a;
}
a.day-number:link {color: white; text-decoration: None; font-size: small; }
a.day-number:visited {color: white; text-decoration: None; font-size: small; }
a.day-number:hover {color: black; text-decoration: None; font-size: small; font-weight: bold; }
a.day-number:active {color: black; text-decoration: None; font-size: small; } 


/* shared */
td.calendar-day, td.calendar-day-np { 
	width:120px; 
	padding:5px; 
	border-bottom:1px solid #999; 
	border-right:1px solid #999; 
}



/* agenda */

table,tr,td.agenda {
	padding: 0px;
	border-collapse:collapse;	
	text-align:left;
	border:1px solid black; 

}
table.agenda { 
	width:  300px;

}
tr.agenda-high {
	background-color: #e3f6e3;
}
td.agenda-hr {
	padding-left:0px; 
	text-align:right;
	border-right:none; 
	width: 60px;
}
td.agenda-apt {
	border-left:none; 
}