/*

  filename: boxes.php
  author:   michael raymond
  owner:    fastq communications
  date:     5 May, 2006
 
  This styesheet is formatted for Gecko based browsers (Firefox, Netscape, etc;), and for Opera which
  uses IE's engine for displaying pages. Suprisingly enough, Opera's "document.all" based formatting 
  correctly interprets css commands as specified by the W3C. In short, Opera does a better job of reading 
  and following directions than IE does. You should place a "link" call in the head of any document where 
  you wish to include the infoboxes; eg;<link rel="stylesheet" type="text/css" href="/PATH_TO_STYLES/boxes.css">
  Any tweaks and overrides necessary for IE to look as close as possible to the formatting described here 
  are actually handled by the boxes.php program itself, usually through JavaScript manipulation. Major 
  descrepancies for IE are handled by a separate stylesheet, loaded after some browser detection as page 
  is loaded.

  
  
                                                  <div ID="TESTME" class="infobox" style="width: 195px; height: 135px;">
  <span class="botm" style="top: 117px; width: 195px;"><a href="fastq.com
" class="botmtxt">more info</a></span>
                                                      <span class="img"><img src="/boxes/includes/headerimg/webdesign.gif"></span>
                                                        <p class="copy">
                                                        <span class="text">First test of boxes app installed on new site.</span></p>
                                                   <span class="arow" style="top: 119px; left: 177px;"><a href=""><img src="/boxes/includes/headerimg/misc/aro.gif"></a></span>
  
</div>
	
  
  
*/

#img     { text-align: center; width: 100%; }
#hdr     { text-align: center; }
P        { margin-top: .8em; }

.botm    { position: absolute; height: 18px;  background: #4483bb; }
/*ol,
form,
ul       { display: none; } */


.viz     { display: block; }
.text    { width: 100%;   } 
/* Set width at displaybox.php */
#placement1   { position: relative; top: -17px; left: 1px; background: #4483bb; text-align: right; }
/* IE has this right. For IE, set width to boxwidth-(borderwidth_x_2). Gecko requires this  
   to be same width as containment box. JavaScript to the rescue again.
 */
 
#spcl { float: right;  /* padding-top: 2px;  */}
.botmtxt { margin-right: 10px; }

  
/* OUTSIDE CONTAINER */ /*
===============================*/
  /* define box style */
  .infobox { 
             position: relative;          /* position relative allows for absolute placement 
                                           * of other elements inside box. Also allows for 
                                           * override of browser default placement so final 
					   * appearance is as desired.
					   */

             border: 1px solid #003d7d;   /* define box border */

			                  /* set the background color to white, lay the designer's 
					   * gradient image over the top so the transition from image 
					   * to defined background color is seemless. The repeat-x tells 
					   * the browser to fill the area horizontally, but do not repeat 
                                           * vertically. Box size can change, overall appearance does not.
					   */
             background: #ffffff URL("/boxes/includes/headerimg/misc/gradient.jpg") repeat-x; 

	    }                             /* do not repeat vertically */
			 
 
  /* define bottom fill of info box */ 
  .boxbotm { 
             position: absolute;          /* absolute given here. Actual position coordinates are 
			                   * determined by boxes.php, based on box size and other 
					   * parameters not known until called for display
					   */

	     height: 18px;                /* height of fill. NOTE: other heights have not been tested 
			                   * with program. Need testing, probably will require creation 
			                   * of formula to determine exact placement of fill. For now,
					   * DO NOT CHANGE!
					   */

             text-align: right;           /* Set alignment of text for non-graphic browsers */
	     vertical-align: center;
			                  /* format the actual fill color, arrow placement  */
             background: #4483bb URL("/NEED/IMAGEPATH/HERE/arrow.gif") no-repeat;
	    }
			 
			 
/* TEXT IN THE BOX */ /*
===============================*/
  /* define text (inside infobox) */
  .infobox P.copy { 
             color: #4483bb;
             margin: auto;                /* centers text in container, (EXCEPT IN IE) */   
             text-align: left;            /* align text to left edge of paragraph      */
	     padding-top: 5px;            /* adds a bit of space between text and header image */
	     width: 85%;                  /* overall width of paragraph text -- using percentage so
			                   * appearance is universal, even if box size changes. Font
                                           * description controls how the text looks. 
					   */

             font: 9pt/10pt verdana,arial,sans-serif;          
	    }                             /* NOTE: margin: auto does not work, IE */
			 
/* JavaScript to revamp p.copy, text */

  #aro { position: absolute; z-index: 99; }  /* set arrow position */


  /* define text used in bottom fill area */
  .boxbotm .more { 
             font: 10px/12px helvetica,arial,sans-serif; 
	     color: #b2b2b2; 
		 
	     /*margin-right: 20px;  */      /* Add some space to keep from crowding right edge */
	    }



  /* spotlight a string of text used in infobox */       
  .hilite  { 
             color: #87c62c; 
	     font-weight: bold; font-size: 12pt;
	    }                             /* NOTE: could be hilite_green, hilite_red class, etc. */

			
	 
/* LINKS */ /*
===============================*/
			 
a.botmtxt { font: 9px/16px verdana,helvetica,arial,sans-serif; text-decoration: none; color: #ffffff;  margin-left: 60%; }
a.botmtxt:visited { color: #dddddd; }
a.botmtxt:active  { color: #87c62c; }
a.botmtxt:hover   { color: #ffffff; text-decoration: underline; }


/* place the header image */
.img     { position: relative; margin: auto; /* top: -18px; text-align: center; */ }
.arow { position: absolute; top: 90%; left: 95%; }
/*.botm { display: none; } */