/* hotglass.css */
img { border: 0; }
#footer p { text-align: center; }

.heading {
	clear: both;
	color: #3333FF;
	font-size: 3.4em;/*42pt; is 56px? */
}
.entry .content img {
	float: right;
	max-width: 480px;
}

/* Change menu bar defaults. */
#masthead { height: auto; }/* for wrapping */

.mymenu {
	/* font-family: Verdana, Arial, Helvetica, sans-serif; */
	font-size: 1.4em;/* font-size: 12px;		the menu's font size */
	background: #CCCCCC;/*  #0033FF;     #f3f3f3; */
	/* border-bottom: 1px solid black;		give us a black border underneath */
	/*height: 24px;  18px; menu bar overall height */
	width: 100%;		/* 	always want our menu to fill the available space */
	padding: 0;
}
.menu ul li a:link { z-index: 1; }
.menu ul li a,
.menu ul li a:visited {
 color: blue;
 height: auto;	/* Allow menu bar wrap. */
}

.menu ul li:hover ul ,
.menu ul li a:hover ul {
	top: 1.50em;/*24px;*/
}
.menu ul li:hover a,
.menu ul li a:hover {
	height: auto;/*	height: 22px;*/
	z-index: 3;/*  z-index hides wrapped menu bar links on hover. */
}
.menu ul li:hover ul,
.menu ul li a:hover ul {                           /* 12.3em; 2nd level drop-down box */
	width: 11.4em;/*9.9*/
}
.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {                 /* 11.6em; 2nd level unselected items */
	width: 10.8em;/*9.3*/
}
.menu ul li:hover ul li:hover a,
.menu ul li a:hover ul li a:hover {                /* 11.3em; 2nd level selected item */
	left: 1em;/* 8.08333em; 3rd level */
	width: 10.6em;/*9*/
}
.menu ul li:hover ul li:hover ul,
.menu ul li a:hover ul li a:hover ul {             /* 12.9em; 3rd level drop-down box */
	width: 10.6em;
}
.menu ul li:hover ul li:hover ul li a,
.menu ul li a:hover ul li a:hover ul li a {    /* 12.0em; 3rd level unselected items */
	width: 9.8em;
}
.menu ul li:hover ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover ul li a:hover {   /* 11.7em; level3 selected items */
	width: 9.5em;
}
/* This back wraps 3rd level from right. Added 05/30/11  NEED FIX */
.menu ul.lastitem li ul { left: -5.0em; right: 2px;/* 2nd level move to left*/ }
.menu ul.lastitem li ul li:hover ul,
.menu ul.lastitem li ul li a:hover ul {  /* 3nd level neighborhood drop-down box */
	left: auto;
	right: 0.8em; /*           nudge the right menu right to line up under the border */
	/*width: 8em; 400px; with a 12px default font, this 18.8em is 228px width (228/12) */
	padding: 0;
}
@media screen and (max-width: 28.75em) {
	.menu ul { padding: 0; }/* float menubar to left */
}
/* End of menu bar changes. */

div.desc {
	text-align: center; /* left; */
	font-weight: normal;
	color: #FF2400;	/*orange red*/
	color: #0000FF;
	/*  width: 120px;  z-index:3; */
	margin: 2px 0px 0px 7px;
}

div.desc a:active, a:link, a:visited {
	text-decoration: none;
}
div.desc span { width: 150px; }

.thumbdrop {
/* Thumb window drops down text on hover of a href="a:link" */
	color: 	#0000EE;
	text-decoration: none;
	/* position: relative; */

/* Thumbdrop Sample Use: */
/* <a href="#thumb" class="thumbdrop">Cracked Head	*/
/* <span><img src="thumbs/100_0373.jpg" />			*/
/* <br />Cracked Head</span></a><br />				*/

/* Sample Use: onMouseOver displays image.			*/
/* <a href="#thumb" class="thumbdrop">				*/
/* <img src="media/tree_thumb.jpg" width="100px"	*/
/*		  height="66px" border="0" />				*/
/* <span><img src="media/tree.jpg" /><br />			*/
/*					Simply beautiful.</span></a>	*/
}

.thumbdrop:hover {
	background-color: transparent;
	/* z-index: 50; */
}

.thumbdrop span { /* Drop down window */
	/*	  position: fixed;	position: relative; */
	position: absolute;
	left: 10%; /* float: left; */
	/*top: -2em; 30%;*/
	/*bottom: 30%;  > move up screen */
	border: 1px dashed gray;
	background-color: lightyellow;
	color: black;
	padding: 5px;
	text-decoration: none;
	visibility: hidden;
	z-index: 50;
}

.thumbdrop:hover span { /* Drop down window is visible on hover */
	visibility: visible;
	/* top: 0; */
	/* left: 60px; position where enlarged image should offset horizontally */
}

.thumbdrop a:link, a:active {
	text-decoration: none;
}

.thumbdrop > a:visited {
	text-decoration: none;
}


.myheader {
	text-align: right; font: bold 2.0em Arial;
	padding-right: 7px; color: #0000FF;
	/* background-color:#000000; override masthead red default */
}
#container {
	float: left;
	clear: both;
}
#footer {
	float: left;
}
#photo {
	float: right;
}
.entry {
	float: left;
	width: 100%;
}
.entry h1 {
	margin-bottom: 0.4em;
	margin-top: 1em;
	margin-left: 1em;
}
.entry h2 {
	/* float: right;*/
	margin: 1em 1em 0.40em 2em;
	/* width: 85.425%;		844px / 988px = 0.85425 */
}
.entry .info {
	float: left;
	margin-top: 0.72727em;	/* 8px / 11px = 0.72727em */
	width: 12.551%;		/* 124px / 988px = .12551 */
	min-width: 4em; /* 72 / 988 7.287%*/
}
.entry .content {
	float: right;
	margin-right: 0.5em;
	margin-left: 0.5em;
	width: 98%;/* 		 844px / 988px = 0.85425 */
}
.entry .content img {
	/*min-width: 99.8%;*/
	width: 99.8%;
	height: auto;
}
.entry .content ul {
	margin-top: 2px
}
.entry .content h2 {
	float: left;
}
.entry .main {
	float: left;
	width: 100%;	/* 700px / 844px = 0.82938 */
}
.entry .meta {
	float: right;
	width: 100%;	/* 124px / 844px = 0.14692 */
	min-width: 8em;
}
.fs14 {
	color: #0000FF; font-size: 1.4em;
}
.fs12 {
	color: #CC0033; font-size: 1.2em;
}
.fsred {
	color: #CC0033;
}
@media screen and (min-width: 40.5em) {
	.entry .content {
		width: 85.425%;		/* 844px / 988px = 0.85425 */
	}
	.entry .main {
		width: 82.938%;	/* 700px / 844px = 0.82938 */
	}
	.entry .meta {
		width: 14.692%;	/* 124px / 844px = 0.14692 */
		min-width: 6em;
	}
	.titlepgbackgound {
		background-size: 800px 900px;/* CSS3 */
		width: 50em;
		height: 70em;
	}
}