@charset "utf-8";

img, table, td { border: 0; } 

.caption {
	margin-top:.3em;
	color:#777;
	font-weight:bold;
	font-size:70%;
}
.caption a, .caption a:link, .caption a:visited { color:#555; } 

.note { color:#777777; font-size:83%; }
.italics {font-family:'Times New Roman',serif; font-style:italic;}

.bigletters{ font-size:200%; }
.fontsize150{ font-size:150%; }
.fontsize83{ font-size:83%; }
.smalltext{ font-size: 0.66em; }
.tinytext{ font-size: 0.58em; }
.smalltextclose{
	font-size: 0.66em;
	padding-top:0;
	padding-bottom:0;
	margin-top: 0.66em;
	margin-bottom: 0.66em;
}
.no-top {margin-top:0; padding-top:0;}
.no-bottom {margin-bottom:0; padding-bottom:0;}
.xxsmall { font-size:xx-small; }
.xsmall { font-size:x-small; }
.small { font-size:small; }
.medium { font-size:medium ; }
.smaller { font-size:smaller; }


.smalltextcaps{
	font-size: 0.66em;
	font-variant: small-caps; 
}
.smallcaps {font-variant: small-caps;}
.novertspace { padding-top:0; padding-bottom:0; margin-top: 0; margin-bottom: 0;}

.hang { text-indent: -1em; margin-left: 1em; }

.darkgray,.darkgray a:link,.darkgray a:visited{
	font-family:'Rockwell Extra Bold',Impact,'Arial Black';
	color:#333;
	text-decoration:none;
}
.darkgray a:hover {color: #ffa500} /*orange*/
.gray{color: gray;}

/* show extra text (within span tags) on hover */
a.hovershow:link span, a.hovershow:visited span {display: none;}
a.hovershow:hover span, a.hovershow:active span {display: inline;}

.centerdiv{
  margin-left: auto ;
  margin-right: auto ;
}
.centertext{ text-align:center; }
.textright{ text-align:right; }
.textleft{ text-align:left; }
.divright { margin-left:auto; margin-right:0; }
.divleft { margin-left:0; margin-right:auto; }

/* supposedly the most reliable method of centering an image */
/* choose this style for the containing paragraph            */
.centerimage{
  text-align:center;
  margin-top:0;
  margin-bottom:0;
  padding:0;}


/* left and right align text on the same line */
.alignleft { float: left; }
.alignright { float: right; }
.clearboth { clear:both; }
.clearright { clear:right; }
.clearleft { clear:left; }
/* Then just remember to clear your float:        */
/* ex: set P class:  <p class="alignright">2</p> <p class="alignleft">1</p>   to get  "1           2"   */
/* <div class="clearboth"></div>	*/
img.alignleft { padding-right:.6em; }
img.alignright { padding-left:.6em; }

/* popup info "window" 
	pops up a div of class popup  */
   
.popup {
	position:absolute;
	top: 19em;
	left: 19em;
	width: 19em;
	padding: 18px 10px 12px 12px;
	background-color: white;
	color:black;
	border: solid silver;
	border-width:1px 3px 3px 1px;
	visibility:hidden;
}
.popup p { margin-left:0; padding-left:0; font-size:1em; }  /* need this because p is set in sidebar_div.css to an inappropriate value */
img#closebutton { margin: -6px 2px 0 0; float:right;}     /* places close button 12px from top and right edges */
	/* then use something like this for the popup div and the "link" to show the popup:
	<div id="popup1" class="popup" onclick="document.getElementById('popup1').style.visibility='hidden';">
	  <img src="common/buttons/close-button-gray.gif" width="12" height="12"><h6>Title...</h6>
	  <p>...</p>
	</div>
	<div><a name="popupLink" style="cursor:pointer;" onclick="document.getElementById('popup1').style.visibility='visible';">some popup link text...</a></div>  
	*/

.nobr {white-space: nowrap}
.hoverimg, .hoverimg a { opacity: 0.85; filter: alpha(opacity=85); -moz-opacity: 0.9; }
.hoverimg:hover, .hoverimg a:hover { opacity: 1; filter: alpha(opacity=100); -moz-opacity: 1; }
.vergered { color:#ED1C23; }
.vergeredback { background-color:#ED1C23; }