/*
 * box.css (c) 2005, Venky Raju <dev@venky.ws>
 * Permission to use this stylesheet is hereby granted for non-commercial use
 * provided you reproduce this header in full.
 *
 * What is this stylesheet for?
 * This stylesheet allows you to create fairly sophisticated "tables" without
 * using HTML tables.
 *
 * How to use this stylesheet:
 *
 * It's quite simple, really.  The stylesheet defines classes for rows, cells 
 * and boxes.  The DIV element is recommended as the element for rows,
 * cells and boxes.
 *
 * Rows are stacked one on top of the other.  Rows are like the HTML TR element.
 * Each row contains multipe cells. A cell is a like the TD element in HTML. 
 *     You specify the width of each cell outside this stylesheet, for example 
 *     using style="width: <width>" while defining cell element.
 *
 *     Each cell is padded with 10px to the top and right, so the table 
 *     effectively has a 10px border of the enclosing element's background color.
 *         To ensure that the last cell has no padding to the right, use the
 *         "last" class in addition to the cell class for that DIV element.
 * 
 * Each cell contains one or more boxes, and the boxes are stacked vertically.
 *     Again, to ensure borders between the stacked boxes, make sure all box
 *     elements below the top box element also include the "below" class. 
 * 
 * The following examples creates a table with two rows and two columns, with
 * the cells in column 1 having two boxes.
 *
 * <div class="row">
 *   <div class="cell">
 *     <div class="box">
 *       text
 *     </div>
 *     <div class="box below">
 *       text 
 *     </div>
 *   </div>
 *   <div class="last cell">
 *     <div class="box">
 *       text
 *     </div>
 *   </div> 
 * </div> 
 *
 * <div class="row">
 *   <div class="cell">
 *     <div class="box">
 *       text
 *     </div>
 *     <div class="box below">
 *       text 
 *     </div>
 *   </div>
 *   <div class="last cell">
 *     <div class="box">
 *       text
 *     </div>
 *   </div> 
 * </div>
 *
 * Caveats:
 *   Make sure the document type is XHTML.
 *   Also IE interprets "width" correctly if you don't include the xml prolog.
 *
 */  
    
.row {
	clear: both;
}
        
.cell {
	float: left;
        padding: 10px 10px 0px 0px;
        width: 715px;	/* default */                   
}

.last {
	padding-right: 0px;
}
    
.box {
        padding: 10px;
        border: 2px outset; 
}

.below {
	margin-top: 10px;
}

/* Headers for use within boxes */

.box h2, .box h3 {
	color: white;
        font-family: sans-serif;
	font-weight: bold;
        text-shadow: 2px 2px 2px black;
        text-align: left;
        clear: both;
        border: 1px outset;                
}

.box h2 {	
	font-size: 12pt;
	padding: 2px 10px;

}

.box h2 a, .box h3 a {	
        text-decoration: none;
}

.box h2 a:hover, .box h3 a:hover {
	letter-spacing: 0.2em;        
}          

.box h3 {	
	font-size: 10pt;
	padding: 1px 10px;
        margin-bottom: 2px;
}

.box h3.right {
	text-align: right;
}

/* Color schemes for boxes */

/* Light Blue */
.lightblue {
	background-color: #dee7e7;
        color: #369;
}

.lightblue h2 {
	background-color: #69c;
}

.lightblue h3 {
	background-color: lightsteelblue;
}

/* Light Gray */
.lightgray {
	background-color: #eee; 
        color: #777;		
}

.lightgray h2 {
	background-color: #bbb;
}

.lightgray h3, 
.lightgray h3 a {			/* 'coz IE can't inherit */
	background-color: #ddd;
        color: #777;			/* white is too light! */        
}

/* Steel Blue */

.steelblue {
	background-color: lightsteelblue; 
        color: #036;
}

.steelblue h2 {
	background-color: steelblue;
}

.steelblue h3 {
	background-color: #69c;
}

/* Dark Blue */

.blue {
	background-color: steelblue; 
        color: #ddd;
}

.blue h2 {
	background-color: #036;
}

.blue h3 {
	background-color: #369;
}

/* Light Yellow */

.lightyellow {
	background-color: lightyellow; 
        color: sienna;
}

.lightyellow h2 {
	background-color: tan;
}

.lightyellow h3 {
	background-color: #e4d2ba;
}

/* Light Red */

.lightred {
	background-color: blanchedalmond; 
        color: maroon;
}

.lightred h2 {
	background-color: darkred;
}

.lightred h3 {
	background-color: darksalmon;
}