/* This is the Cascading Style Sheet all pages on the OBS website except the home page*/


/* This sets the font attributes for PageHeading style */
.PageHeading {
	Font-Family: "Times New Roman", Times, serif;
	Font-Size: 22pt;
	Font-Weight: bold;
	color: #334422;
}

/* This sets the color and other attributes for links within the body text */
/*	a:link { color:#800000; text-decoration: none;}
	a:visited { color:#A00000; text-decoration: underline; font-weight:bold}
	a:hover { color:#A00000; text-decoration:underline; font-weight:bold;}
	a:active { color: #A00000; text-decoration: underline}
*/

/* These are definitions for various text styles. */
.centered { text-align: center; }
.right { text-align: right; }
.just { text-align:justify; }
.byline {
	font-family: Arial;
	color: #334422;
	font-style: italic;
}
.large-bold {
	font-family: Arial, Helvetica, sans-serif;
	font-size: medium;
	font-weight: bold;
}


/* This puts a dark green border around text or photos*/
.photo_border {
	border: 4px solid #334422;
}

.copyright {
	border: 1px solid #800000;
	padding: 1px 4px;
	text-align: center;
	color: #334422;
clear:right; /* <<-- added by stk for John */
}

/* This sets the font family and background color for the body area of the page */
BODY { Font-Family : Arial, Helvetica, sans-serif ; background-color: #334422; 
		margin: 0px 0px; padding: 0px 0px; /* Need to set body margin and padding to get consistency between browsers. */ 


/* <<-- removed by stk text-align:center; */  /* Hack for IE5/Win */
}

/* This is a box to contain the text on the page. It's 795px wide to fit on 800px wide displays. */
/* All others show the background color on the left and right side of this box. */
.no-top-border {
	margin-top: 0;
}
.no-border {
	border-width: 0px;
}
#Footer p { 
	text-align:center;
	font-size: 9pt;
	color: #334422;
	margin-top:0;
	}
	
#Content {
	width:795px;
	margin: auto;
	margin-top: 0px;
/* <<-- removed by stk -->> text-align: center; */
	color: #334422;
	padding-left: 5px;
	padding-right: 20px;
	padding-top: 30px;
	padding-bottom: 20px;
	background-color:#F5FFF0;
	background-image : url('images/title_5.gif');   
	background-repeat: no-repeat;
	background-position: center 5px; 	
	}
	
#Text	{
	color: #334422;
	margin: 0px auto; 
	margin-left:180px; 
	padding-left: 0px;
	width: 600px;
	margin-top: 140px;
/* <<-- removed by stk --->> text-align: left;  */
	font-size:small;
	}
/* This sets the color and other attributes for links within the body text */
#Text a {color:#800000; text-decoration: underline; font-weight: bold;}
#Text a:hover {color:#cc8822; text-decoration:underline; font-weight:bold;}
#Text a:active { color: #C00000; text-decoration:underline;}
		
/*---------- CSS Popout menuv -----------*/

/* Fix IE. Hide from IE Mac \*/
* html #menuv ul li{float:left;height:1%;}
* html #menuv ul li a{height:1%;}
/* End */

#menu {
	position:relative;
	margin-top:165px;
	margin-left:2px;
	float:left;
	z-index: 10;
	width: 9.5em; 
	text-align: left;
}

#menuv		                                 /* position, size, and font of  menu */
	{	
	text-align: left;
	font-family: helvetica, arial, geneva, sans-serif;
	font-size:12px;
	}

#menuv a
	{
	width: 100%;
	display:block;						
	white-space:nowrap;
	background-color: #aabb99;
	text-decoration:none;				    /* removes underlines from links */
/*	border-bottom: 1px solid #555;			/* adds bottom border */
	padding-top: 0.4em;						/* expands menu box vertically*/
	padding-bottom: 0.4em;
	padding-left: 0.6em;
	text-align: left;
	}

#menuv a:visited
	{
	color: #334422;
	background-color: #aabb99;
	text-decoration:none;				       /* removes underlines from links */
	}

#menuv a
	{
	color: #334422;
	background-color: #aabb99;
	text-decoration:none;				       /* removes underlines from links */
	}

#menuv a.parent:hover
	{
	background-image: url('nav_arrow.gif');
	background-position: right center;
	background-repeat: no-repeat;
	font-weight:normal;
	}

#menuv a.parent
	{
	background-image: url('nav_arrow.gif');
	background-position: right center;
	background-repeat: no-repeat;
	}

#menuv a:hover				             /* all menus on mouse-over */
	{
	color: #F5FFF0;
	background-color: #334422;
	}
	
#menuv li
	{
	list-style-type:none;		            /* removes bullets */
	}

#menuv ul li
	{
	position:relative;
	}

#menuv li ul
	{
	position: absolute;
	top: 0;
	left: 13.25em;				         /* distance from  left menu (this should be */
										/* the same as width value in #menuv [1]) above */								
	display: none;
	border-left:2px #334422 solid;
	}

div#menuv ul ul ul
	{
	margin:0;				               /* keeps the menu parts together */
	padding:0;
	width: 12.8em;							/* width of sub menus  (this should be the */
											/*same as width value in #menuv [1]) above */
	}

#menuv ul ul
	{
	margin:0;				               /* keeps the menu parts together */
	padding:0;
	width: 12.8em;			              /* width of sub menus  (this should be the same as width value in #menuv [1]) above */
	}

div#menuv ul
	{
	margin:0;				               /* keeps the menu parts together */
	padding:0;
	width: 12.8em;			              /* width of sub menus  (this should be the same as width value in #menuv [1]) above */
	}

div#menuv ul li:hover ul ul ul
	{
	display: none;
	}

div#menuv ul li:hover ul ul
	{
	display: none;
	}

div#menuv ul ul ul
	{
	display: none;
	}

div#menuv ul ul
	{
	display: none;
	}

div#menuv ul ul ul li:hover ul
	{
	display: block;
	}

div#menuv ul ul li:hover ul
	{
	display: block;
	}

div#menuv ul li:hover ul
	{
	display: block;
	}

/* This sets the parameters for the 'special' items in boxes at the end of the pop-out menu */

#menuspecial {
	display: block;
	width: 153px;
	margin-left:0px;
}

#menuspecial p {
	display:block;						
	white-space:nowrap;
	color: #334422;
	background-color: #aabb99;
	text-decoration:none;
	width:153px;
	border:medium solid #FFCC66;
	text-align:center;
	font-size:13px;
	margin-top:5px;
	margin-bottom:0;
}

}
#menuspecial a {
	display:block;
	white-space:nowrap;
	color: #334422;
	background-color: #aabb99;
	text-decoration:none;
	width:153px;
	padding-top:2px;
	padding-bottom:2px;
}

#menuspecial a:hover {
	display:block;
	white-space:nowrap;
	color: #F5FFF0;
	background-color: #334422;
	text-decoration:none;
	width:135px;
	padding-top:2px;
	padding-bottom:2px;
}

#slideshow {
	width: 320px; 
	height: 420px; 
	float: right; 
	z-index: 40; 
	text-align: right; 
	display: block; 
}

/* Photo-Caption PZ3 CSS v080630 
* copyright: http://randsco.com/copyright 
* www.randsco.com 
*/

.PZ3-l { float:left; margin-right:10px; }
.PZ3-r { float:right; margin-left:10px; direction:rtl; }
  html>/**/body .PZ3-r { position:relative; }

.PZ3zoom { border:1px solid #369; }
.PZ3zoom a,.PZ3zoom a:visited { display:block;
  padding:0; overflow:hidden; text-decoration:none;
  height:100%; width:100%; }
  html>/**/body .PZ3-r a { right:0; }

.PZ3zoom a:hover { position:absolute;
  z-index:999; padding:0; background:none; 
  cursor:default; height:auto; width:auto;
  overflow:visible; border:1px solid #369;
  margin:-1px 0 0 -1px; }
  html>body .PZ3zoom a:hover { margin:-1px -1px 0 -1px; }

.PZ3zoom a img { border:0; height:100%; width:100%; }
.PZ3zoom a:hover img { height:auto; width:auto;
  border:0; }

a:hover .PZ3cap,
a:hover .PZ31cap { display:block;
  direction:ltr; font:10pt verdana,sans-serif;
  margin-top:-3px; background:#369; color:#fff;
  text-align:left; }
a:hover .PZ3cap { padding:3px 5px; }
.PZ3inr { display:block; padding:2px 5px; }

.noCap a:hover .PZ3cap,
.noCap a:hover .PZ31cap { display:none; }
.noBdr,.noBdr a:hover { border:0; }
.Lnk a:hover { cursor:pointer; }

/* End Photo-Caption Zoom CSS */ 

HTML
HTML Notes:

This is the XHTML code from the first image, above. 
The thumbnail size is set with height/width in the DIV. 
The caption width (full-sized image width is used in the HTML, to constrain the size of the caption). 
In the above example the following toggles are set in the <div> classnames: Bdr/noBdr; Cap/noCap; Lnk/noLnk. 
Note: In the example, below, the image isn't linked to an external site, though it could be. Instead, the link is "killed" using [ <a href="http://randsco.com/blank.html" onclick="return false"> ]. This solution works well for users with javascripting ON and redirects them to a page (blank.html), if it's turned off. (The page says something like - "You appear to have javascripting OFF, it's recommended that you turn it on. Use your browser BACK button to return to the previous page.") Likewise, you could link to the image itself, or a higher resolution version of the image. The choice is yours! 
<!-- start PZ3 code -->

<div class="PZ3zoom PZ3-r Bdr Cap Lnk" style="width:210px; height:137px;"><a href="http://randsco.com/blank.html" onclick="return false"><img src="http://randsco.com/_img/blog/0604/pz3-2.jpg" alt="PZ3 demo #2" title="" /><span class="PZ31cap" style="width:479px;"><span class="PZ3inr"><strong>Afternoon Light: </strong>The same Pioneer Basin view, looking toward 3<sup>rd</sup> & 4<sup>th</sup> Recess, later in the day.  <em><span style="color:#ccf; background:inherit;">Photo by Brian Ernst</span></em></span></span></a></div> 

<!-- end PZ3 code -->