/* adapted from single-column elastic template */

html { /* firefox/camino bug workaround: put logo in background for XSLT-generated pages */
	background-image: url(Images/background-200x200.jpg);
}

body { /* set font for all, center actual page, put logo in background */
	background-image: url(Images/background-200x200.jpg);
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	font-size:16px; /* needed for Safari */
	margin: 0; /* countermand browser defaults, if any */
	padding: 0;
	color: black;
	text-align: center; /* this centers the container in IE 5* browsers */
}

p.br { /* <p class='br'> replaces <br />
          to fix <br></br> issue in XML/XSLT pages in webkit */
  margin: 0px;
}

p.left { /* <p class='br left'> replaces <br clear='left' />
          to fix <br></br> issue in XML/XSLT pages in webkit */
  clear: left;
}

.page #container { /* dimension actual page relative to font size, set paper background */
	width: 50em; margin: 0 auto; /* centers the container */
	background-image: url(Images/tone.jpg);
	border: 1px solid black;
	margin-top: 5px;
	text-align: left; /* reset body/text-align: center */
}

.page #body { /* IE does not seem to honor container/padding */
	margin: 1em;
}

.logo { /* make logo as wide as the navigation sidebar (below) */
	float: left;
	text-align: center;
	vertical-align: middle;
	width: 8em; height: auto;
    padding-top: 0;
	padding-right: 1em;
	padding-bottom: 0px;
	padding-left: 1em;
}

.sidebar { /* layout of navigation, as wide as logo (above) */
	font-size: 60%;
	text-align: center;
	vertical-align: top;
	white-space: nowrap;
	width: 21%;
	line-height: 1.5em;
}

.body { /* layout of Body, ensure that text always starts at the same place */
	vertical-align: top;
}

h1 { /* uniform look for each page title line in Header */
	background-color: #0033FF;
	color: white;
	font-weight: bold;
}

h2 { /* uniform look for subtitles */
    background-color: lightsteelblue;
    color: white;
	font-weight: bold;
    padding: 0.25ex 0.25em;
    margin: 0.5ex 0;
}

.footer { /* layout of edit date */
	font-size: x-small;
	text-align: center;
	padding-top: 1em;
}

.portrait { /* layout of member portrait */
	height: 240px;
	width: 180px;
	float: right;
	text-align: right;
	vertical-align: top;
 }
 
div.data p { /* line spacing in member data area */
	margin-bottom: 0px;
	margin-top: 0px;
}

td.gallery { /* layout of pictures in gallery page */
	text-align: center;
	vertical-align: bottom;
}
td.gallery img {
	border: none;
	height: 8em; width: 6em;
}
td.gallery br {
}

table.avenues { /* kludge: tabbed panel bleeds subsequent h2 background */
}
table.officers th, table.avenue th, table.committees th { /* layout in the organization chart */
	width: 25em;
	text-align: left; vertical-align: top;
	font-weight: normal;
}
table.officers td, table.avenue td, table.committees td {
	width: 50%;
	text-align: left; vertical-align: top;
}
tr.sub th {
	padding-left: 2em;
}

dt, li { /* lists, e.g. in About Us */
	margin-top: 1ex;
}

.events .date, .events .time { /* layout of event time stamps */
	text-align: right;
	padding-right: 0.5em;
	
}

td.welcome { /* spacing of 'welcome' message */
	padding-left: 1em; padding-right: 1em;
}

/* need to control the appearance of links because of the Accordion */
a:link, a:visited, a:active { text-decoration: underline }
a:link { color: #0020E3 }
a:visited { color: #4A2485 }
a:active { color: red }