/***********************************************************************\
 * hotbox.css - simple pop out box using :hover
 *
 * How it works:  the "hotbox" contains  "popup", which is not normally visible.
 * When you move the mouse over any part of "hotbox" then "popup" becomes visible.
 * 
 * Example:   <div class='hotbox'> This text is always visible
 *            <div class='popout'> this is the text that pops-up
 *	      </div></div>
 * 
 * Modeled on hovermenu.css, but simpler.
 *
 * Eric Myers <myers@spy-hill.net>  -  22 October 2008
 * @(#) $Id: hotbox.css,v 1.1 2008/10/29 12:37:59 myers Exp $
\***********************************************************************/


div.hotbox {
    position: relative;
    background-color: inherit;	 
    z-index: 5; 
    border-width: 0px;    margin: 2px;	  /* margin+border=constant */
 }

div.hotbox:hover {
    background-color: #ffffff;	  
    z-index: 15; 
    border-width: 2px; margin: 0px;	/* margin+border=constant */
    border-style: outset;		/* Add this border when hovering */
}


div.popout
{
   position: absolute;	/* doesn't take up height in enclosing hotbox */
   left: 3em;		/* how far to move the pop-up box to the right */
   background-color: #ffffff;	  /* not transparent! */s
   z-index: 20; 
   width: 20em;
   border-style: inherit;
   padding: inherit;
}


/* Display properties: this is what turns the pop-up box on or off */

div.hotobx,
div.hotbox:hover,
div.hotbox:hover div.popout,
div.hotbox div.popout:hover
{  display: block; }

div.popout
{  display: none;  }

/*EOF*/