/*
 * http://techwiki.vistaprint.net/wiki/TableBox
 * Create a box using tables and CSS that can have a combination of round and
 * square corners. Meant to be applied using markup like the following:

	<table class="table-box light-blue-box" cellspacing="0" cellpadding="0" border="0">
		<tr class="top">
			<td class="left round"/>
			<td class="middle"/>
			<td class="right square"/>
		</tr>
		<tr class="center">
			<td class="left"/>
			<td class="middle content">Think inside the box</td>
			<td class="right"/>
		</tr>
		<tr class="bottom">
			<td class="left square"/>
			<td class="middle"/>
			<td class="right round"/>
		</tr>
	</table>

 */

/*
 * Set sizes for the side and corner images. Override these to customize the
 * size for a specific box class (e.g.: .light-blue-box .side-left). If that
 * doesn't override these styles, explicitly referencing the <td> is a more
 * more specific selector, e.g:
 *     .light-blue-box td.left,
 *     .light-blue-box td.right
 */
.table-box .left,
.table-box .right {
    width:5px;
	/*TODO: Try this and 6px...  line-height:1px;*/ /* line-height 0 hides cell borders in FFox */
	/*TODO: Try font-size:1px; */
}
.table-box .top td,
.table-box .bottom td {
	height:6px;
	line-height:1px; /* line-height 0 hides cell borders in FFox */
}
/* Huh? Why do I need to set the width=5px and height=6px to make 6px sides? */


/*
 * Borders
 */
.table-box .left { border-left-style: solid; border-left-width: 1px; } 
.table-box .right { border-right-style: solid; border-right-width: 1px; } 
.table-box .top td { border-top-style: solid; border-top-width: 1px; } 
.table-box .bottom td { border-bottom-style: solid; border-bottom-width: 1px; } 
/* make sure round corners don't get a border */
.table-box .top .round,
.table-box .bottom .round {
	border-width: 0px;
}

/*
 * Round corners
 */ 
.table-box .bottom .left { background-position: bottom left; } 
.table-box .bottom .right { background-position: bottom right; } 
.table-box .top .left { background-position: top left; } 
.table-box .top .right { background-position: top right; } 
/* keep corner backgrounds transparent in the face of background color overrides */
.table-box .round { background-color: Transparent !important; }

/*
 * Define the set of box background images as a CSS sprite (see the wiki for
 * details). Using GIFs to avoid PNG gamma correction problems (See
 * http://hsivonen.iki.fi/png-gamma/).
 */

/*
 * Define a light blue box with border.
 */
.light-blue-box td
{
	background-color: #eff3fe;
	border-color: #588eed;
}
.light-blue-box td.round
{
	background-image: url('/ig/circle.caspx?r=6&sw=1&fc=eff3fe&sc=588eed&bc=00ffffff&aa=0');
}

/*
 * Define a dark blue box with border.
 */
.dark-blue-box td
{
	background-color: #c9daf9;
	border-color: #2e2f91;
}
.dark-blue-box td.round
{
	background-image: url('/ig/circle.caspx?r=6&sw=1&fc=c9daf9&sc=2e2f91&bc=00ffffff&aa=0');
}

/*
 * Define a yellow box with border.
 */
.yellow-box td
{
	background-color: #fcf4ca;
	border-color: #2e2f91;
}
.yellow-box td.round
{
	background-image: url('/ig/circle.caspx?r=6&sw=1&fc=fcf4ca&sc=2e2f91&bc=00ffffff&aa=0');
}

/*
 * Define an all-yellow box.
 */
.all-yellow-box td
{
	background-color: #fcf4ca;
	border-color: #fcf4ca;
}
.all-yellow-box td.round
{
	background-image: url('/ig/circle.caspx?r=6&sw=1&fc=fcf4ca&sc=fcf4ca&bc=00ffffff&aa=0');
}

/*
 * Define a box with dark blue border.
 */
.blue-border-box td
{
	border-color: #7d7dc1;
}
.blue-border-box td.round
{
	background-image: url('/ig/circle.caspx?r=6&sw=1&fc=00ffffff&sc=7d7dc1&bc=00ffffff&aa=0');
}

/*
 * Define a white box with light blue border.
 */
.white-box td
{
	background-color: #ffffff;
	border-color: #5f9ae2;
}
.white-box td.round
{
	background-image: url('/ig/circle.caspx?r=6&sw=1&fc=ffffff&sc=5f9ae2&bc=00ffffff&aa=0');
}