/*
	3/14/2011
	Cleaned stuff up here a little bit.  Ditched table-based header and lame 
	JavaScript dropdown menu.  This site is getting kind of crufty, but if it 
	ain't broke...


	COLORS:
		#698060 (dark green) - background
		#dd6 (greenish) - default links
		#cc7 (light greenish) - links, borders
		#aab482 (lighter greenish) - logo, menu
		#8ca064 (yellowish-green) - header bg
		#b96 (brown) - leftbar hr
		#abc (light blue) - hr
		#fff (white) - text
		#121 (almost-black) - some special text
*/


/*******************************************************************************
 * Content/default styles.
 ******************************************************************************/
body {
	margin: 0px;
	background-color: #698060;
	color: #fff;
	font: 0.8em helvetica, arial, sans-serif;
	}

a	{
	text-decoration: none;
	color: #dd6;
	}
	a:hover {
		text-decoration: underline; 
		}
	a img {
		cursor: pointer;
	}

p 	{
	line-height: 1.4em;
	max-width: 88em; /* don't want text to stretch forever */
	}

hr 	{
	color: #abc;
	height: 1px;
	overflow: hidden;
	border-style: dotted;
	margin: 25px auto;
	width: 75%;
	border-bottom: 0;
	}

h1, h2 {
	margin: 0px;
	color: #cc7;
	font-family: verdana, sans-serif;
	font-weight: normal;
	}
	h1 	{
		margin-top: 10px;
		font-size: 1.6em;
		}
	h2 	{
		margin-top: 15px;
		font-size: 1.2em;
		}


/*******************************************************************************
 * Main content area.
 ******************************************************************************/
#default {
	position: absolute;
	width: 70%;
	margin-left: 220px; /* space for the leftbar since it's position: absolute */
	margin-top: 20px;
	}
	#default img {
		border: 1px solid #121;
		margin: 25px auto 30px auto;
		}
	img.thumb, div#default img.thumb {
		width: 100px;
		height: 75px;
		border: 1px solid #aab482;
		margin: 20px 15px;
		}
	
#copyright {
	font: 10px verdana, sans-serif;
	color: #121;
	text-align: center;
	width: 100%;
	margin: 20px auto;
	}


/*******************************************************************************
 * Sidebar.
 ******************************************************************************/
#leftbar {
	position: absolute;
	width: 160px;
	left: 30px;
	top: 125px;
	text-align: center;
	}
	#leftbar hr {
		color: #b96;
		height: 1px;
		width: 65px;
		border-style: solid;
		}


/*******************************************************************************
 * Site header.
 ******************************************************************************/
.header {
	z-index: 2; /* sucks because it means header is above content, but ie7 needs it */
	position: relative;
	height: 100px;
	margin-top: 20px;
	padding: 0 15px;
	min-width: 900px;
	background-color: #8ca064;
	border-bottom: 1px solid #cc7;
	border-top: 1px solid #cc7;
	}
	.header img {
		border: 0;
		}
	.header a {
		color: #453;
		}
		.header a:focus {
			outline: 0;
			color: #121;
			text-decoration: underline;
			}

/**
 * Layout of individual sub-sections.
 */
/* SRF logo */
.header h1 {
	float: left;
	height: 76px; /* 100px - 12px*2 (see padding) */
	margin: 0;
	padding: 12px 15px;
	background-color: #AAB482;
	text-align: center;
	}


/* contains .page-title and .menu */
.header .navigation {
	float: left;
	}

/* title for an individual page, e.g. "Home" */
.header h2.page-title {
	height: 69px;
	line-height: 69px;
	padding: 0 34px;
	margin: 0;
	background: url('../graphics/titlebar/corner.gif') no-repeat left bottom;
	font-family: helvetica, arial, sans-serif;
	font-size: 35px;
	color: white;
	}

/* contact info, etc */
.header .masthead {
	text-align: right;
	font-family: verdana, sans-serif;
	float: right;
	/* FIXME:  too brittle (vertically distribute lines of text) */
	height: 82px;
	padding: 9px 0;
	font-size: 11px;
	line-height: 16px;
	}
	
	.header .masthead > * {
			display: block;
		}

/* dropdown menus (based on http://htmldog.com/articles/suckerfish/dropdowns/) */
/* global menuish things */
ul.menu, ul.menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 31px;
	position: absolute;
	z-index: 2;
	}
	ul.menu li {
		display: block;
		font: 10px helvetica, arial, sans-serif;
		}
		ul.menu li:hover {
			background-color: #ffe;
			}
	ul.menu a {
		vertical-align: middle;
		display: block;
		height: 100%;
		}
		ul.menu a:hover {
			text-decoration: none;
			}
		/* menu items without hrefs should use the default pointer */
		ul.menu a:not([href]) {
			cursor: default;
			}
	/* display lower levels when hovering over the level above it */
	ul.menu li:hover ul, /* level 1 */
	ul.menu li li:hover ul /* level 2 */ { 
		display: block;
	}


/* topmost menubar (level 0) */
ul.menu {
	padding-left: 30px;
	padding-right: 30px;
	background: url('../graphics/titlebar/corner-topright.gif') no-repeat right top #AAB482;
	text-align: center;
	text-transform: uppercase;
	}
	/* top horizontal menu items */
	ul.menu > li {
		padding: 0 15px;
		height: 31px;
		float: left;
		}
	ul.menu > li a {
		line-height: 30px;
		}


/* all levels below topmost (dropdowns and flyouts) (level 1+) */
ul.menu li ul {
	text-transform: none;
	margin-left: -15px; /* account for padding on root list items */
	position: absolute;
	width: 82px;
	display: none;
	text-align: left;
	}
	ul.menu li ul li {
		background-color: #ffe;
		padding-left: 5px;
		height: 20px;
		border: 1px solid #ddc;
		margin-bottom: -1px; /* pull up above the border of the item above it */
		}
	ul.menu li ul li:hover,
	ul.menu li ul li.has-child:hover {
		background-color: #ddc;
		}
	ul.menu li ul a {
		line-height: 20px;
		}
	ul.menu li ul li.has-child {
		background: #ffe url('../graphics/menu/arrow-right.png') no-repeat 95%;
		}

/* flyouts (level 2) */
ul.menu li ul ul {
	margin: -21px 0 0 82px;
	left: -1px;
	}
	.menu li:hover ul ul {
		/* hide flyouts when opening the parent dropdown */
		/* NOTE: needs to be overridden by the menu-wide "show" select, so 
		this omits ul.menu for lower precedence */ 
		display: none;
		}


/*******************************************************************************
 * One-offs.
 ******************************************************************************/
div#map {
	height: 460px;
	margin: 0px auto;
	border: 1px solid black;
	}