/* based on default style sheet */
/* http://www.w3.org/TR/CSS2/sample.html  */

ADDRESS,
BLOCKQUOTE, 
BODY, DD, DIV, 
DL, DT, 
FIELDSET, FORM,
FRAME, FRAMESET,
H1, H2, H3, H4, 
H5, H6, IFRAME, 
NOFRAMES, 
OBJECT, OL, P, 
UL, APPLET, 
CENTER, DIR, 
HR, MENU, PRE   { display: block }
LI              { display: list-item }
HEAD            { display: none }
TABLE           { display: table }
TR              { display: table-row }
THEAD           { display: table-header-group }
TBODY           { display: table-row-group }
TFOOT           { display: table-footer-group }
COL             { display: table-column }
COLGROUP        { display: table-column-group }
TD, TH          { display: table-cell }
CAPTION         { display: table-caption }
TH              { font-weight: bolder; text-align: center }
CAPTION         { text-align: center }
BODY            { line-height: 1.33 }
H1              { font-size: 2em; margin: 0.5em 0 }
H2              { font-size: 1.5em; margin: 0.5em 0 }
H3              { font-size: 1.17em; margin: 0.35em 0 }
H4, P,
BLOCKQUOTE, UL,
FIELDSET, FORM,
OL, DL, DIR,
MENU            { margin: 0.2em }
H5              { font-size: .83em; line-height: 1.17em; margin: 1.67em 0 }
H6              { font-size: .67em; margin: 2.33em 0 }
H1, H2, H3, H4,
H5, H6, B,
STRONG          { font-weight: bolder }
BLOCKQUOTE      { margin-left: 40px; margin-right: 40px }
I, CITE, EM,
VAR, ADDRESS    { font-style: italic }
PRE, TT, CODE,
KBD, SAMP       { font-family: monospace }
PRE             { white-space: pre }
BIG             { font-size: 1.17em }
SMALL, SUB, SUP { font-size: .83em }
SUB             { vertical-align: sub }
SUP             { vertical-align: super }
S, STRIKE, DEL  { text-decoration: line-through }
HR              { border: 1px inset }
OL, UL, DIR,
MENU, DD        { margin-left: 40px }
OL              { list-style-type: decimal }
OL UL, UL OL,
UL UL, OL OL    { margin-top: 0.2em; margin-bottom: 0.2em }
U, INS          { text-decoration: underline }
CENTER          { text-align: center }
BR:before       { content: "\A" }

/* An example of style for HTML 4.0's ABBR/ACRONYM elements */

ABBR, ACRONYM   { font-variant: small-caps; letter-spacing: 0.1em }
A[href]         { text-decoration: underline }
:focus          { outline: thin dotted invert }


/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

/* Elements that are block-level in HTML4 */
ADDRESS, BLOCKQUOTE, BODY, DD, DIV, DL, DT, FIELDSET, 
FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, IFRAME,
NOSCRIPT, NOFRAMES, OBJECT, OL, P, UL, APPLET, CENTER, 
DIR, HR, MENU, PRE, LI, TABLE, TR, THEAD, TBODY, TFOOT, 
COL, COLGROUP, TD, TH, CAPTION 
                { unicode-bidi: embed }
/* End bidi settings */


@media print {
  @page         { margin: 10% }
  H1, H2, H3,
  H4, H5, H6,
  th            { page-break-after: avoid; page-break-inside: avoid }
  BLOCKQUOTE, 
  PRE           { page-break-inside: avoid }
  UL, OL, DL    { page-break-before: avoid }
  body,td,li,p  {
						font-family: arial,verdana,sans-serif;
						color:black;
						font-size:small;
					   max-width:730px;
						}
  td.col1,td.col3
					 { display: none; }

}

@media speech {
  H1, H2, H3, 
  H4, H5, H6    { voice-family: paul, male; stress: 20; richness: 90 }
  H1            { pitch: x-low; pitch-range: 90 }
  H2            { pitch: x-low; pitch-range: 80 }
  H3            { pitch: low; pitch-range: 70 }
  H4            { pitch: medium; pitch-range: 60 }
  H5            { pitch: medium; pitch-range: 50 }
  H6            { pitch: medium; pitch-range: 40 }
  LI, DT, DD    { pitch: medium; richness: 60 }
  DT            { stress: 80 }
  PRE, CODE, TT { pitch: medium; pitch-range: 0; stress: 0; richness: 80 }
  EM            { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
  STRONG        { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
  DFN           { pitch: high; pitch-range: 60; stress: 60 }
  S, STRIKE     { richness: 0 }
  I             { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
  B             { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
  U             { richness: 0 }
  A:link        { voice-family: harry, male }
  A:visited     { voice-family: betty, female }
  A:active      { voice-family: betty, female; pitch-range: 80; pitch: x-high }
}

/* begin customization for hotarc.org */

body,table,li,p {
	font-family: arial,verdana,sans-serif;
	font-size: 100%;
	color:Navy;
}


body {margin: 0; /* flush, so top banner looks right */
	background-color:#DADADA;
}

p {margin: 6 0 6 0;}

table.page_content{
	width:970px;
	border-collapse:collapse;
	border:none;
	table-layout:fixed;
}

td.col1 {
	width: 175px;
	min-width: 175px;
	height:*,*;
	vertical-align: top;
	padding:6px;
	border-spacing:10px 10px;
}

td.col2 {
	width: *.*;
	min-width: 640px;
	height:*,*;
	vertical-align: top;
	padding:6px;
}

td.col3 {
	width: 175px;
	min-width: 175px;
	height:*,*;
	vertical-align: top;
	padding:6px;
}

td.col2n3 {
	width:815px;
	height:*,*;
	vertical-align:top;
	padding:0px 10px;

}

/* against dark background, menu text needs to be white */
td.menu {
	color:white;
	font-size:0.95em;
	font-family: verdana,arial,sans-serif;
	text-align: left;
	vertical-align: top;
  width:165px;
  height:400px;
  background:url("../images/menu.gif") no-repeat bottom right;
  background-size: cover;
}

.menu {
	color:white;
	font-size:0.95em;
	font-family: verdana,arial,sans-serif;
	text-align: left;
	vertical-align: top;
	padding-top: 2px;
  width:165px;
  height:400px;
  background:url("../images/menu.gif") no-repeat bottom right;
  background-size: cover;
}

.menu a:link {color:white}
.menu a:hover {color:#00CCCC}
.menu a:visited {color:#CCFFFF}


td.hl_title {
	color: red;
	font-size:1.4em;
	font-weight: bold;
	font-style: italic;
	font-family: verdana,arial,sans-serif;
	width: auto !important;
	width: 600px;
	min-width: 600px;
 	height:60px;
	border-bottom:5px solid #ff0000;
	padding: 4;
	vertical-align: bottom;
}

td.hl_author {
	color: black;
	font-size:0.8em;
	font-family: verdana,arial,sans-serif;
	font-weight: normal;
	font-style: italic;
	text-align:right;
	width: auto !important;
	width: 200px;
	min-width: 200px;
 	height:60px;
	border-bottom:5px solid #ff0000;
	padding: 4;
	vertical-align: bottom;
}
.menu p { /* all paragraphs in menu class */
	color: white;
	font-size:0.95em;
	text-align: left;
	margin: 0.6em; 0.2em;
}

td.menu a:link {color:white}
td.menu a:hover {color:#00CCCC}
td.menu a:visited {color:#CCFFFF}

a:hover {color:#006699}
a:link {color:#0000FF}
a:visited {color:#0099FF}

/* a little space between bullets and numbered items */
ol { margin-top:0.3em; margin-left:0.3em; padding-left:1.5em}
ul { margin-top:0.3em; margin-left:0.3em; padding-left:1.5em}

/* banner background */
#bannerbg{
	background-image:url(../images/bannerbg.gif);
	background-repeat:repeat-x;
	width:100%;
	height:98px; /* taller than bannerlogo */
	text-indent:195px;
}

.bannerlogo {
		width:600px;
		height:auto;
		border:none;
	}

/* specify id=glowtext */
#glowpink{
	filter:glow(color=#FF00FF,strength=3);
	width:100%;
	text-shadow: #FF33FF 0px 0px 8px;
}

#glowred{
	filter:glow(color=#FF0000,strength=3);
	width:100%;
	text-shadow: #FF0000 0px 0px 8px;
}

#glowyellow{
	filter:glow(color=#FC0,strength=3);
	width:100%;
	text-shadow: #FC0 0px 0px 8px;
}

#glowgreen{
	filter:glow(color=#00FF99,strength=3);
	width:100%;
	text-shadow: #00FF99 0px 0px 8px;
}

#glowblue{
	filter:glow(color=#0000FF,strength=3);
	width:100%;
	text-shadow: #0000FF 0px 0px 8px;
}

#glowlime{
	// color: lime;
	text-shadow: 1px 1px 8px lime, 1px 1px 0.2em lime;
}

#imageContainer {
	position:relative;
	margin:auto;
	border:none;
	height:320px;
	width:450px;"
}

/* drop shadow for containers (all browsers except IE) */
.shadow {
-moz-box-shadow: 3px 3px 5px 2px #888;
-webkit-box-shadow: 3px 3px 5px 2px #888; 
 box-shadow: 3px 3px 5px 2px #888;
}

/* rounded corners, e.g., on images */
.rounded {
	-webkit-border-radius: 10px;
	border-radius: 10px; 
}

/* feathered edges for images */
.feather {
background-image: linear-gradient(bottom,
	rgba(218,218,218,1) 1%,
	rgba(218,218,218,.8) 5%,
	rgba(218,218,218,0) 15%);
}


/* hr that works across browsers */
/* specify default thickness and color */
hr {
border:none;
-webkit-border:none;
border-top: 2px #666666 solid;
-webkit-border-top: 1px #666666 solid;
height: 1px;
}

/* an HR replacement */
/* usage: {div class="hr"}{/div} */
div.hr { 
width:99%;
height:3px;
background-color: gray;
}

/* an HR replacement with drop shadow */
/* usage: {div class="hr2"}{/div} */
div.hr2 { 
width:99%;
height:3px;
background-color: brown;
box-shadow: 0 4px 0 silver;
-webkit-box-shadow: 0 4px 0 silver;
}


/* tooltip class from http://www.menucool.com/tooltip/css-tooltip */

a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;} 
a.tooltip span {
   z-index:10;
	display:none; 
	padding:6px 10px;
   margin-top:-30px; 
	margin-left:28px;
   width:330px; 
	line-height:16px;
}
a.tooltip:hover span{
    display:inline; position:absolute; color:#111;
    border:1px solid #DCA; background:#fffAF0;}

.callout {
	z-index:20;
	position:absolute;
	top:30px;
	border:0;
	left:-12px;}
    
/*CSS3 extras*/
a.tooltip span
{
    border-radius:4px;
    box-shadow: 5px 5px 8px #CCC;
}

/* text watermark, create with:  <div class="watermark"> text </div> */
.watermark {
    position: absolute;
    opacity: 0.10;
    font-size: 4em;
    text-align: center;
	width: 50%;
    z-index: 1000;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
}

/* cross-fading images in a container named slideshow, timings here for 8 images */
<!-- based on https://snook.ca/archives/html_and_css/simplest-css-slideshow -->

.slideshow {
	position:relative; /* additional specs must be set in web page */
	}

@keyframes fade {		/* timings per img: 1s fade in + 2s hold + 1s fade out  */
  0%   { opacity: 0; } /* override these values for different num images */
  4.2% {opacity:1;}		/* = 1s div by total loop duration */
  12.5% {opacity:1;}		/* = 3s div by total loop duration */
  16.7% {opacity:0;}		/* = 4s div by total loop duration */
  100.0% {opacity:0}
}

.slideshow img { /* define img in this division */
	position:absolute; 
	left:0; 
	right:0; 
	opacity:0; 
	animation-name: fade; /* point to keyframes */
	animation-duration: 24s;	/* total loop duration -- override for different num images */
	animation-iteration-count: infinite;
	}

.slideshow img:nth-child(1) { animation-delay: 0s; } /* when each image appears in loop */
.slideshow img:nth-child(2) { animation-delay: 3s; }
.slideshow img:nth-child(3) { animation-delay: 6s; }
.slideshow img:nth-child(4) { animation-delay: 9s; }
.slideshow img:nth-child(5) { animation-delay: 12s; }
.slideshow img:nth-child(6) { animation-delay: 15s; }
.slideshow img:nth-child(7) { animation-delay: 18s; }
.slideshow img:nth-child(8) { animation-delay: 21s; }