body { 	
	/*
	 * Simple white background, black text, decent fonts,
	 */
	font-family: Verdana, Geneva, Ariel, sans-serif;	
	background-color: white;	
	color: black;	

	/* 
         * Without this, we get an annoying white margin
	 * that makes our black background look bad.
	 */
	margin:  0px;

	/* 
	 * This is half of the trick used to get a black column to extend
	 * all the way down the left-hand side and get a good 2-column 
	 * layout.  The other half of the trick is to set the margin on
	 * the right column to match that of the image width.
	 */
	background: url(images/background_1x180.png) repeat-y top left;	
}


/*
 * This gets rid of URL image borders.  This effect would
 * otherwise be seen on firefox.
 */
img {	
	border:  0px;
}




#container {	
}


/* 
 * This also helps to keep the header area all black.
 */
#header {	
	position:  fixed;
	top: 0px; 
	left: 0px;
	width:  1800px;
	background: url(images/background_125x1.png) repeat-x top left; 
	height:  125px;
	/*background-color: red;*/
	/*border:  dashed purple;*/
}

#header img#lightshow_bl {
	padding-left: 30px;
	padding-top: 5px;
	/*border:  dashed green;*/
}


#header img#logo {
	padding-left: 30px;
	padding-top: 5px;
	/*border:  dashed red;*/
}


/*
 * Float the navigation to the left, let the content float
 * around it.
 */
#navigation {	
	position:  fixed;
	top:       125px;
	left:      0px;
	width: 175px;	
	padding-left:  5px;
	float: left;
	background-color: black;  
	/*background-color: white; */ 
	/*border:  dotted;*/
}


#navigation img {
	padding-left: 20px;
	padding-right: 20px;
}

#content {
	margin-left: 180px;
	padding-top: 20px;
	padding-left: 20px;
	margin-top: 125px;
	margin-right: 20px;
	/*border:  dashed;*/
}

#content a {
	color:#900;
}
#content a:visited {
	color:#900;
}


td.news {
	text-align:  top;
	padding-left:  15px;
}

/*
 * This forces each newsitem to flow from top to bottom.
 * Do not allow them to flow left-to-right.
 */
.newsflash {
	clear:  right; 
	padding: 10px 10px 10px 10px;
	/*padding-left: 10px;*/
	/*border:  solid;*/
}

/*
 * Float the div with image(s) to the left so that the
 * accompanying text can flow around it.
 * 
 * Each displayed image should be a thumbnail with a 
 * width of 200 pixels or less.
 */
.newsflash_graphic {
	width:  210px;
	float:  left;
	display:  table-cell;
	vertical-align:  middle;
	/*border:  purple dashed;*/
}
.newsflash_graphic img {
	margin-right: auto;
	margin-left:  auto;
	display: block;
}
.newsflash_graphic p {
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}

.newsflash_content {
	padding-left: 10px;
	/*border:  red solid;*/
	margin-left:  220px;
}

/*
 * The Aslett Clearing Method
 * 
 * See www.positioniseverything.net for an explanation,
 * but basically this inserts a bit of hidden non-floated content after
 * all of the other content inside the container.  Clearing is also applied.
 */
.clearfix:after {
	content:  ".";
	display:  block;
	height:  0;
	clear:  both;
	visibility:  hidden;
}

/*
 * Certain words in the gallery section are off-colored.
 */
span.gallery {
	color:  #999;
}


/********************************************************************************
 * 
 * MENU STUFF
 *
 *******************************************************************************/
/* 
 * The navigation links need different colors because of
 * the black background.
 */
#navigation a:hover {
	color:#f00;
}

#navigation a {	
	padding: 2px 4px;	
	text-decoration: none;	
	display: block;	
	color: white;
}


ul {
	margin-top: 0px;
	padding-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

ul.clamshell {
	display:  none;
}

/*
 * Setting the display to "block" allows the "Annual Events", and
 * "Ongoing Events", and "Membership" to start up opened.
 *
 * The membership_menu and media_menu still start up closed
 */
ul.clamshell#members_menu, ul.clamshell#annual_events_menu, ul.clamshell#ongoing_events_menu {
	display: block;
}


.menuHead {
	color: #c00;
	font-family: Arial, Helvetica, Geneva, sans-serif;
	font-weight: bold;
	text-decoration: none;
}

.menuOption {
	color: #f00;
	font-family: Arial, Helvetica, Geneva, sans-serif;
	display: block;
}
	
.menu {
	width: 98%;
}

.menu li {
	list-style: none;
	margin-left: -20px;
}
	

.menu a {
	font-size: .9em; 
	display: block;
	text-decoration: none;
	padding: 4px;
	background-color: black; 
	color: white;
	margin-left: 2px;
}

.menu a:hover {
	display: block;
	text-decoration: none;
	border-top: 1px solid #666;
	border-bottom: 1px solid #666;
	padding: 4px;
	background-color: #666; 
	color: #f99;
}



#footer {
	margin-left: 20px;
	margin-right: 10px;
	/*border:  dashed;*/
}