/*
body
	wrapping_box
		logo
		slideshow
		menu
			menu a
		main
[optional - use if sidebar is needed]
			lh_text
			rh_sidebar
				sidebar_inside_box
					sidebar_inside_box p
[end optional]
		footer
*/

/* Testing with IE6 revealed the max page width on a 1024px-wide screen possible _without_ a horizontal scroll bar is 998 pixles. The (1024-998 = 26) 26 pixes are presumably used for the vertical scrollbar, etc. */

/* TOTAL PAGE WIDTH = 998 PIXLES. INTERIOR (CONTENT) WIDTH = 986 PIXLES. Left-hand content div = 609 pixles wide; right-hand sidebar div = 377px wide*/

div.wrapping_box { 
	position: relative;
	width: 986px; /* 986+4+4+2+2=998 */
	border: 4px double black;
	margin: 2px;  
	background-color: white;
}
 
/**************************************/
/***********     HEADER     ***********/
/**************************************/

div.header {
	position: relative;
	z-index: 1;
	background-color: #08255F;
}

div.logo {
	margin-right: 101px; /* image is 870 wide. Haven't found a simple way to horizontal-align it to the left. 986-870-15 = 101*/
	margin-left: 15px;
	border-bottom: 0px;
	font-size: 0px; /* a hack that makes the div not get any phantom height. don't know why it's necessary, but it looks like the div gets a line's worth of height when there's an img in it, even though there's no text in it */
}

div.menu { /* The Menubar div (contains the drop-down menu and the Google search box  */
	margin-right: auto;
	margin-top: 3px;
	padding-top: 3px;
	padding-left: 15px;
	background-color: #A4CDF6;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	color: black;
}

form.google_site_search_box {
	float: right;
	margin-right: 20px;
	margin-top: 0px;
	margin-bottom: 3px;
}

/****            DROP-DOWN MENU               ****/

/* Drop-Down Menu. Retrieved from http://css-tricks.com/examples/SimplejQueryDropdowns/ on May 15, 2010 */
ul.dropdown	{ display: inline; color: black}
ul.dropdown li a { text-decoration: none; }

/* 	LEVEL ONE */

ul.dropdown  { position: relative; } 
ul.dropdown li {	font-size: 100%; float: left; display: inline; margin-bottom: 0px;}  

/* ul.dropdown a.hover, ul.dropdown a:hover	 { color: black; } */
ul.dropdown li a { padding: 0px 8px; color: black; border-right: 1px solid yellow; font-weight: bold; } 
/* ul.dropdown li a.hover, ul.dropdown li a:hover { color: black; }  */
ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */ 
/* ul.dropdown li.hover, */ ul.dropdown li:hover {  position: relative; } /* affects all levels (l2, l3) */ 
/* ul.dropdown li.hover>a, ul.dropdown li:hover>a { color: black; } /* select the child <a> of the 1st-level li element (the <a> in the 1st-level li) */

/* LEVEL TWO */
ul.dropdown li:hover > ul  { visibility: visible; } /* make the 2nd-level ul visible when the 1st-level li is hovered over */

ul.dropdown ul  { width: 220px; visibility: hidden; position: absolute; top: 100%; left: -40px; margin-left: 0px; } /* the margin-left: 0px property is there to counteract the margin-left: 20px property set to all ul and li elements. Not sure why the left: -40px is req'd for the sub-menu to line up */
ul.dropdown ul li { font-weight: bold; background: #A4CDF6; color: #000; border-bottom: 1px solid #ccc; float: none; }
ul.dropdown ul li:hover { background: #7AB8F5; }
/* IE 6 & 7 Needs Inline Block  */
ul.dropdown ul li a	{ border-right: none; width: 100%; display: inline-block; color: black; } 


/*************************************************/
/****************     BODY     *******************/
/*************************************************/
 
div.body {
	position: relative; 
	width: px;
	clear: both;
}

/* CONTENT */

div.lh_text {
	float: left;
  width: 587px; /* the text body is 609-10-10-1-1=587 px wide: the golden ratio  */
	padding-left: 10px;
	padding-right: 10px;
	border-right: 1px solid black;


	padding-bottom: 15px;
	padding-top: 10px;
	
	text-align: left;
  overflow: auto;

}

/* (Original) SIDEBAR */
div.rh_sidebar {
	float: left;
	width: 357px; /* 377-0-0-10-10 = 357 */

	margin: 10px 0px 15px 0px; /* top right bottom left */
	border: 10px solid #FFEF99 ; /* inside border */

	background: #FFE34D ; /* outside border */
	text-align: center;
}

div.sidebar_inside_box {
	background: white;
	max-width: inherit;
	margin: 10px;
	width: 337px; /* 357-10-10=337 */
	text-align: left;
	font-size: 80%;
	overflow: hidden;
}

div.sidebar_inside_box p{
	width: auto;
	margin: .5em;
}

span.sidebar_inside_box-rss_feed  {
	height: 12.5em;
}

div.clearfix {
	clear: both;
	height: 0;
	visibility: hidden;
	display: block;
}

/***********************************************
****                FOOTER                   ***
************************************************/

div.footer {
	clear: both;
	width: 100%;
	font-size: .6em;
	border-top: 1px solid black;
}

/***********************************************
****               SERVICES                  ***
************************************************/

div.services-outer_box {
	width: 500px;
	height: 400px;
	margin-left: auto;
	margin-right: auto;
}

div.services-row {
	width: 100%;
	height: 50%;
	clear: both;
}

div.services-cell {
	width: 50%;
	height: 100%;
	float: left;
}