/* Smartphone friendly stylesheet for all devices, wide and narrow. */
html,body {height:100%;}
body {margin:0; padding:0; font-family:verdana,arial,sans-serif; color:#000; background-color:#fff;}
h1 {margin: 0 0 15px 0; line-height: 1em;}
h2 {}
h3 {}

#header {padding-left:1px; background-color: #800000;}

#content-container {position:relative; height:auto; clear:left; border:1px solid #800000}

#hm a {display: block; padding: 5px; text-decoration: none; border: 1px dashed blue}

#left-sb {
	position:relative;
	z-index:1;
	background-color:#e0e0e0;
	min-width: 100px;
	max-width: 17%;
	white-space:normal;
	height:100%;
	float:left;
	margin-right:10px;
        //padding-right:5px;
}


#right-sb {
	position: relative;
	top: 0px; right:0px; z-index:0;
	float: right;
	margin: 0 0 10px 10px;
	min-width: 200px;
	max-width: /*300px*/ 25%;
	border: 1px solid blue; padding-top:5px;
	background-color: #cceaff;
	display: block;
        overflow-wrap: break-word;
}

#main-content {position:relative; border: 1px solid white; display:block}
#main-content{padding-top:0; padding-left:10px;}
#main-content h1{margin-top:10px;}
#main-content li {margin: 0 0 12px 0}

#main-thumb {float: left; margin-right: 10px; min-width: 160px; max-width: 33%;}

#main{margin-top:0; padding-top:0; border-left:170px solid #e0e0e0;}

.table-container
{
  overflow-y: auto;
  _overflow: auto;
}

#footer {position:relative; z-index:0; vertical-align:bottom; clear:both; padding:5px 5px 25px 10px; background-color:#ffffa0; border-top:2px solid brown; text-align:center;}

img, embed, iframe {max-width:100%}

.b{font-weight:bold}
.c{text-align:center}
.closeup {text-align:center;font-size:small;font-style:italic;padding-bottom:10px}
.clr {clear:left}
.clrr {clear:right}
.clrb {clear:both}
.links, a.links{/*font-size:10px;*/}
.fl{float:left; margin-right:10px}
.fr{float:right; margin-left:10px}
.f{font-size:75%}
.pad5{padding:0 5px}
.specs {text-align: center; font-weight: bold;}
.u {text-decoration:underline}
.hilite {background-color: yellow; padding: 5px}
#s-down {display:none}
ul#ddmenu ul li {width: 230px}
li.info {width: 230px;}

/* Media screen size adjustments */

/* Add brown span to end of banner, past 728px*/
@media only screen and (min-width : 729px)
{
  #header {height:90px; background-color: #800000;}
}    

@media only screen and (min-width: 1200px)
{
  body {max-width: 1200px; margin: auto;}
}

/* Move right sidebar down and float left */
@media only screen and (max-width : 500px)
{
  #right-sb {clear: left; float: left; margin: 10px 10px 10px 0px;  min-width: 125px; max-width: 200px !important}
}

/* Video frame media queries. */
@media only screen and (min-width: 900px)
{
  #v-frame {float: left; margin-right: 1em}
}
    
@media only screen and (min-width: 601px)
{
  #v-frame {width: 425px; height: 350px;}
}
    
@media only screen and (min-width: 481px) and (max-width: 600px)
{
  #v-frame {min-width: 350px; height: 300px;}
}
    
@media only screen and (min-width: 381px) and (max-width: 480px)
{
  #v-frame {min-width: 260px; height: 260px;}
}
    
@media only screen and (max-width: 380px)
{
  #v-frame {width: 300px; height: 300px; clear: left; float: none;}
  #s-down {display: block}
}

/* Lightbox codes */

#lightbox{position:absolute; left:0; width:100%; z-index:100; text-align:center; line-height:0;}
#lightbox img{width:auto; height:auto;}
#lightbox a img{border:none;}

#outerImageContainer{position:relative; background-color:#fff; width:250px; height:250px; margin:0 auto;}
#imageContainer{padding:10px;}

#loading{position:absolute; top:40%; left:0%; height:25%; width:100%; text-align:center; line-height:0;}
#hoverNav{position:absolute; top:0; left:0; height:100%; width:100%; z-index:10;}
#imageContainer>#hoverNav{left:0;}
#hoverNav a{outline:none;}

#prevLink, #nextLink{width:49%; height:100%; background-image:url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display:block;}
#prevLink{left:0; float:left;}
#nextLink{right:0; float:right;}
#prevLink:hover, #prevLink:visited:hover{background:url(/lightbox/images/prevlabel.gif) left 15% no-repeat;}
#nextLink:hover, #nextLink:visited:hover{background:url(/lightbox/images/nextlabel.gif) right 15% no-repeat;}

#imageDataContainer{font:10px Verdana, Helvetica, sans-serif; background-color:#fff; margin:0 auto; line-height:1.4em; overflow:auto; width:100%	;}

#imageData{padding:0 10px; color:#666;}
#imageData #imageDetails{width:70%; float:left; text-align:left;}
#imageData #caption{font-weight:bold;}
#imageData #numberDisplay{display:block; clear:left; padding-bottom:1.0em;}
#imageData #bottomNavClose{width:66px; float:right;  padding-bottom:0.7em; outline:none;}

#overlay{position:absolute; top:0; left:0; z-index:90; width:100%; height:500px; background-color:#000;}

/* Lightbox CSS */

.selectedanchor{background:yellow;}

/* Default class for drop down menus */
.anylinkcss{
position:absolute;
left:0;
top:0;
visibility:hidden;
border:1px solid black;
border-bottom-width:0;
font:normal 12px Verdana;
line-height:18px;
z-index:100; /* zIndex should be greater than that of shadow's below */
background:lightyellow;
width:160px; /* default width for menu */
}
.anylinkcss ul{margin:0; padding:0; list-style-type:none;}
.anylinkcss ul li a{
width:100%;
display:block;
text-indent:3px;
border-bottom:1px solid black;
padding:1px 0;
text-decoration:none;
font-weight:bold;
text-indent:5px;
}
.anylinkcss a:hover{background:black; color:white;}
.anylinkshadow{/*CSS for shadow. Keep this as is */ position:absolute; left:0; top:0; z-index:99; /*zIndex for shadow*/ background:black; visibility:hidden;}