/* clear-both **** used to clear the DIV floats ***** */
clear-both {
  clear:both;
}

/* <!-- http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/P10/ -->
<!-- Dynamic Drive's CSS Popup Image Viewer. CSS style must be in head section and not loaded from a style sheet. -->
<!-- Also if using 'bootstrap' must used a modified bootstrap.css with all 'thumb-nail items removed from the css'. -->
*/
.thumb-nail{
position: relative;
font-weight:bold;
z-index: 0;
}
.thumb-nail:hover{
background-color: transparent;
z-index: 50;
}
.thumb-nail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #ffff66;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumb-nail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumb-nail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 40px; /*60px; position where enlarged image should offset horizontally */
}



.popup {
   display:none;
   position:relative; /*absolute; */
   z-index:10;
   padding:10px;
   background:#eee;
   color:#000000;
   border:solid 1px red;
   left:0;
   bottom:20px;
   /*white-space:nowrap;  */
   max-width:320px;
   }
#test {
   padding:0;
   max-width:320px;
   height:270px;
   border:none;
   left:-325px;
   top:-120px;
   text-align:center;
   }
#test img {
   width:320px;
   }
a:hover .popup {
   display:block;
   }


/* ***** Start of custom classes ***** */
.rounded-corners {
/*    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    behavior: url('../styles/border-radius.htc'); */
    border-radius: 10px;
}

/*Make Image Scalable - Assign this class to any image to make it scale with the browser window size*/
img.scalable {
	height: auto !important;
	width: auto !important;
	max-width: 100%;
}

.highlightyel {
background-color: #FFFF40;
font-weight: bold;
font-style: italic;
text-decoration : none;
}

.inline {
display:inline;
}

.left {
text-align:left;
}

.right {
text-align:right;
}

.center {
text-align:center;
}

.top {
vertical-align:top;
}

.justify {
text-align:justify;
}

.bold {
font-weight:bold;
}

/* float image to the right side of screen */
.imgrgt {
	float: right;
	padding: 7px;
}
/* float image to the left side of screen */
.imglft {
	float: left;
	padding: 7px;
}
/* centers a div based on max-width of div */
.divctr {
	margin-right: auto;
	margin-left: auto;
}

/* here are the standard 16 colors that the older 8-bit graphics cards supported */
.aqua {
color:#00ffff;
}

.black {
color:#000000;
}

.blue {
color:#0000ff;
}

.fuchsia {
color:#ff00ff;
}

.gray {
color:#808080;
}

.green {
color:#008000;
}

.lime {
color:#00ff00;
}

.maroon {
color:#800000;
}

.navy {
color:#000080;
}

.olive {
color:#808000;
}

.purple {
color:#800080;
}

.red {
color:#ff0000;
}

.silver {
color:#c0c0c0;
}

.teal {
color:#008080;
}

.white {
color:#ffffff;
}

.yellow {
color:#ffff00;
}

/* puts border around all table cells with a padding of 2 pixels */
.table_border 
 table, td, th { border: 1px solid grey; padding:2px;}
 
/* ***** Makes a pretty table with borders ***** */
.pretty-table th[scope=col]
{
  color: #000;
  background-color: #8fadcc;
  text-transform: uppercase;
  font-size: 0.9em;
  border-bottom: 2px solid #333;
  border-right: 2px solid #333;
}

.pretty-table th+th[scope=col]
{
  color: #fff;
  background-color: #7d98b3;
  border-right: 1px dotted #666;
}

.pretty-table th[scope=row]
{
  background-color: #b8cfe5;
  border-right: 2px solid #333;
}

.pretty-table tr.alt th, .pretty-table tr.alt td
{
  color: #2a4763;
}

.pretty-table tr:hover th[scope=row], .pretty-table tr:hover td
{
  background-color: #cdaa7d; 
  color: #000; 
}
/* end of pertty-table */

/*  
Pure CSS read more toggle A PEN BY Kasper Mikiewicz https://codepen.io/Idered/pen/AeBgF   
*/   
.read-more-state {
  display: none;
}
.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}
.read-more-state:checked~.read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}
.read-more-state~.read-more-trigger:before {
  content: 'Read more';
}
.read-more-state:checked~.read-more-trigger:before {
  content: 'Read less';
}
.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  color: #666;
  font-size: .9em;
  line-height: 2;
  border: 1px solid red;
  border-radius: .25em;
}
.readhere {
  text-decoration: none;
  opacity: 1;
  font-size: inherit;
  font-weight: bold;
  max-height: 999em;
  padding: 0 4px 0 4px;
  border: 1px solid red;
  border-radius: 4px;
}


/* Style for the floating top-of-page button */
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 10px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: blue;
  color: white;
  cursor: pointer;
  padding: 5px;  // default 15px
  border-radius: 4px;
}
#myBtn:hover {
  background-color: red;
}