/*************************************************************************************************
Common_Content.css
	* This stylesheet is for CSS that globally effects the content of pages that use the
		"Common.master" master page. NOTHING should go in here that affects the layout of actual
		master page design. Instead, those styles should go in Common_Master.css

	* You can insure you are following the rule of separating master css from content css by NEVER
		referencing "master_xxx" IDs (ex: #master_something { color: black }) in your selectors.
**************************************************************************************************/


/*
	N. CRISS 6/11/07 - IMPLEMENTATION NOTE

	In our application code we have 2 common scenarios of html tables that need css
		styling:

	<!--In this case we want a single class to affect the table, rows and cells as
		needed-->
	<table id="someid">
		<tr>
			<td>
			</td>
		</tr>
	</table>

	<!--In this case we want the base style set by the table-level class and the other
		id's to layer on or modify style for the individual row and/or cell-->
	<table id="someid">
		<tr id="someotherid">
			<td = "yetanotherid">
			</td>
		</tr>
	</table>

	CURRENTLY, I CAN FIND NO GOOD CSS SOLUTION FOR FULLY SUPPORTING THIS BEHAVIOR:

	.class tr td {} gets all decendents not just the elements in that table
	.class .class {} sufferes from essentially the same problem

	You end up with classes that appear to work, but then none of the overriding classes
		like center, left, etc. work because the selectors above are overshadowing

	.class > tr > td should be what's used, work but does not work in most browsers

	I am actively looking for a suitable "hack" for this to give more predictability
*/


/* SECTION 1 ====================================================================================*/
/*		Global Styles (applies to entire html elements) -- first in order, lowest priority */
/* ==============================================================================================*/

/*
	These types of declarations (ones that globally affect all html elements) should
	be limited as much as possible to reduce unintended consequences. Instead, create
	classes below to handle specific types of content.
*/


/* Turn off page-padding, set backgound image and color for the entire page.*/
html, body
{
	background: #ececec url(Common_Background.png);
	margin: 0px;
	padding: 0px;
}

/* Default font */
.normaltext, .normal, html, body, p
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 16px;
}

/* Default margins and padding */
/*removed: form, input*/
address, blockquote, dl, fieldset, h1, h2, h3, h4, h5, h6,
li, p, pre, ol, ul
{
	margin: 0px;
	padding: 0px;
}

.normal, p
{
	padding: 3px 0px 4px 0px;
}


/* Default no borders for all these elements */
img, fieldset 
{
	border: none 0px;
}


/* Links... */
:link, :visited { text-decoration: none; }
a:active, a:hover { text-decoration: underline; }
a:link, a:active { color: #7F1212; }
a:visited { color: #900; }
a:hover { color: Black; }
a:visited:hover { color: Black; }

/* Headings...*/
h1,
.h1
{
	line-height: 1.4em;
	font-size: 16px;
	font-weight: bold;
	color: #003366;
}

/* Better support for image inside heading 1 */
h1 img
{
	float: right;
	padding: 0px 0px 15px 15px;
}

h2,
.h2
{
	color: #336699;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: -.1px;
	line-height: 1.4em;
	padding: 0px 0px 1px 0px;
}

h3,
.h3
{
	color: #545454;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.4em;
	letter-spacing: -.2px;
	padding: 3px 0px 3px 0px;
}

h4,
.h4
{
	color: #333333;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: -.2px;
	line-height: 1.4em;
	padding: 5px 0px 0px 0px;
}

/* Misc... */

blockquote, dd, li { margin-left: 1em; }

form label { cursor: pointer; }

hr
{
	background-color: #7F1212; /* Everyone else uses this */
	border: none 0px;
	color: #336699;	/* IE uses this for color */
	height: 2px;
	width: 100%;
}

hr.thin
{
	height: 1px;
}

hr.alt	/* "alt" for "alternative" :) */
{
	background-color: #83a3d1;		/* Everyone else uses this */
	border: none 0px;
	color: #83a3d1;		/* IE uses this for color */
	height: 4px;
	width: 100%;
}

input, select, textarea { font-size: 100%; }


/* Define a specific version of the clear class (defined below) that has
zero layout impact */
br.clear
{
	clear: both !important;
	height: 0px !important;
	line-height: 0px !important;
	font-size: 0px !important; /*for IE*/
}

/* SECTION 2 ====================================================================================*/
/*		Content Classes -- middle order, medium-hight priority */
/* ==============================================================================================*/

/*
	Put stuff here to satisfy various *specific* content needs. Only put things in here that
	will be useful to multiple pages in the site. "One-offs" should be added either (a) to
	an inline <styles> block in the page or (b) to a separate extra stylesheet.
*/

/*
	Use with divs to group logical elements on the page. Top padding provides needed vertical
	whitespace between sections.
*/
.section
{
	margin-top: 12px;
}

.section_big
{
	margin-top: 24px;
}

/* ----------------------------------------------------------------------------------------------*/
/* BEGIN COMPARETABLE STYLES */

/*
	The use of the only one top-level class and then extending with selectors
		requires some duplication of properites (such has border, margin, padding, 
		text-align, vertical-align). The trade-off is very clean html.
*/

/* Only sets a few top-level things...*/
table.comparetable
{
	background-color: White;
	border-collapse: collapse;
	color: Black;
	font-size: 12px;
	width: 100%;
}

/* Styles the heading cells */
table.comparetable thead tr td
{
	border: solid 1px #ccc;
	background-color: #f7f7f7;
	font-weight: bold;
	margin: 0px;
	padding: 5px;
	text-align: center;
	vertical-align: middle;
}

/* Creates the border effect for the header and footer*/
table.comparetable thead th,
table.comparetable tfoot th
{
	background-color: #848484;
	border: solid 1px #ccc;
	height: 4px;
}

/* Styles the heading cell in each content row (if present), generally the
	first cell in the row */
table.comparetable tbody tr th
{
	border: solid 1px #ccc;
	font-weight: bold;
	margin: 0px;
	padding: 5px;
	text-align: left;
	vertical-align: middle;
}

/* Styles main content cells */
table.comparetable tbody tr td
{
	border: solid 1px #ccc;
	margin: 0px;
	padding: 5px;
	text-align: center;
	vertical-align: middle;
	width: 120px;
}

table.comparetable .checked
{
	background: url(../Master/Common_Check.gif) no-repeat center center;
}


/* END COMPARETABLE STYLES */
/* ----------------------------------------------------------------------------------------------*/
/* BEGIN COMPARETABLE2 STYLES */

/*
	The use of the only one top-level class and then extending with selectors
		requires some duplication of properites (such has border, margin, padding, 
		text-align, vertical-align). The trade-off is very clean html.
*/

/* Only sets a few top-level things...*/
table.comparetable2
{
	background: url(Common_iHost_Logo_Background.jpg) no-repeat top left;
	border-collapse: collapse;
	color: Black;
	font-size: 11px;
	width: 88%;
}

/* Styles the heading cells */
table.comparetable2 thead tr td
{
	border: solid 1px #ccc;
	background-color: #f7f7f7;
	color: #83a3d0;
	font-weight: bold;
	margin: 0px;
	padding: 5px;
	text-align: center;
	vertical-align: top;
}

/* Creates the border effect for the header and footer*/
table.comparetable2 thead th,
table.comparetable2 tfoot th
{
	background-color: #83a3d0;
	border: solid 1px #ccc;
	height: 4px;
}

/* Styles the heading cell in each content row (if present), generally the
	first cell in the row */
table.comparetable2 tbody tr th
{
	border: solid 1px #ccc;
	font-weight: bold;
	margin: 0px;
	padding: 5px;
	text-align: left;
	vertical-align: middle;
}

/* Styles main content cells */
table.comparetable2 tbody tr td
{
	border: solid 1px #ccc;
	margin: 0px;
	padding: 5px;
	text-align: center;
	vertical-align: middle;
	width: 120px;
}
/* END COMPARETABLE2 STYLES */
/* ----------------------------------------------------------------------------------------------*/
/* BEGIN INFOTABLE STYLES */
/* These styles are mainly used for our data-entry-centric web forms */
.infotable
{
	background-color: #f0f4f7;
	border: solid 3px #5d8ba5;
	border-collapse: collapse;
	width: 100%;
}

.sectionlabelcell
{
	background-color: white;
	border: 1px solid #799acb;
	border-right: white;
	color: #7F1212;
	font: 800 11px Verdana,Arial;
	padding-right: 5px;
	text-align: left;
	vertical-align: middle;
}

.labelcell
{
	border: 1px solid #799acb;
	font: 800 11px Verdana,Arial;
	padding: 5px 5px 0px 0px;
	text-align: right;
	vertical-align: top;
	white-space: nowrap;
	width: 150px;
	/*
		The top padding in conjunction with top vertical alignment
		has the effect of vertically centering labels in cells that
		are the height of one TextBox control plus padding (ie. "one line").

		For "multi-line" rows, the top alignment looks a lot better.
	*/
}

.textcell
{
	border: 1px solid #799acb;
	font: 500 11px Verdana,Arial;
	padding: 1px 1px 1px 5px;
	text-align: left;
	vertical-align: top;
}

.textcellnormaltext
{
	border: 1px solid #799acb;
	font: 500 11px Verdana,Arial;
	padding: 5px 0px 0px 5px;
	text-align: left;
	vertical-align: top;
}

/* END INFOTABLE STYLES */
/* ----------------------------------------------------------------------------------------------*/
/* BEGIN GREY_BOX/BLUE_BOX STYLES */

/*
	These styles are used both for simple boxes to group content with and also
	for DetailsView controls that present field/value information that is generally
	not editable.

	Note: we provide definitions using grey and gray to workaround the inevitable typos
*/

/* Base style for gray_box... */
.gray_box,
.grey_box
{
	background-color: #ececec;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-top: 3px solid #c98a87;
	margin: 8px 0px 13px 0px;
	padding: 10px;
}

/* Base style for blue_box... */
.blue_box
{
	background-color: #f0f4f7;
	border-left: 1px solid #d7e2e8;
	border-bottom: 1px solid #d7e2e8;
	border-right: 1px solid #d7e2e8;
	border-top: 3px solid #5d8ba5;
	margin: 8px 0px 13px 0px;
	padding: 10px;
}

.gray_box ul,
.grey_box ul,
.blue_box
{
	list-style-image: url(Common_Arrow_Bullet.gif);
	padding: .05em 0 0 1.3em;
}

/*
'	These styles extend the original gray_box to support labelcell and text cell
	like infotable
*/
.gray_box .labelcell,
.grey_box .labelcell,
.blue_box .labelcell
{
	border: none;
	font: 800 11px Verdana,Arial;
	padding: 3px 3px 3px 3px;
	text-align: right;
	vertical-align: top;
	white-space: nowrap;
}

.gray_box .textcell,
.grey_box .textcell,
.blue_box .textcell
{
	border: none;
	font: 500 11px Verdana,Arial;
	padding: 3px 3px 3px 3px;
	text-align: left;
	vertical-align: top;
}
/* END GREY_BOX/BLUE_BOX STYLES */
/* ----------------------------------------------------------------------------------------------*/
/* BEGIN LISTTABLE STYLES */

/*
	listtable is generally used with DataGrid and GridViews for reports and other lists.
	TODO: the styles could use some optimizing.
*/

.listtable
{
	border: none 0px;
	border-collapse: collapse;
	width: 100%;
}

.listheaderrow
{
	background-color:#5d8ba5;
	color: White;
	font-size: x-small;
	font-weight:bold;
}

.listheaderrow th, .listrow td, .listaltrow td
{
	padding: 5px 5px 5px 5px;
}

.listrow
{
	background-color:#f0f4f7;
}

.listaltrow
{
	background-color: White;
}

.listpager
{
	/*background-color:#84a4d1;*/
	background-color: White;
	color: black;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align: left;
}
/* END LISTTABLE STYLES */
/* ----------------------------------------------------------------------------------------------*/
/* BEGIN WIDGET SYLES */

/* This style group is not yet very developed. TODO: fill it out into a real UI set */

.widgetlabelcell
{
	color: #369;
	font: 800 12px Verdana,Arial;
	padding: 5px 5px 0px 0px;
	text-align: right;
	vertical-align: top;
	white-space: nowrap;
	/*
		The top padding in conjunction with top vertical alignment
		has the effect of vertically centering labels in cells that
		are the height of one TextBox control plus padding (ie. "one line").

		For "multi-line" rows, the top alignment looks a lot better.
	*/
}

.widgettextcell
{
	font: 500 12px Verdana,Arial;
	padding: 1px 1px 1px 1px;
	padding-left: 5px;
	text-align: left;
	vertical-align: top;
}
/* END WIDGET SYLES */
/* ----------------------------------------------------------------------------------------------*/
/* BEGIN BOX STYLES */

.box,
.box_blue
{
	background: url('Common_Box_Title_Middle_Blue.gif') repeat-x center top;
	margin-top: 3px 0px 3px 0px;
}

.box_black
{
	background: url('Common_Box_Title_Middle_Black.gif') repeat-x center top;
	margin-top: 3px 0px 3px 0px;
}

.box_green
{
	background: url('Common_Box_Title_Middle_Green.gif') repeat-x center top;
	margin-top: 3px 0px 3px 0px;
}

.box_red
{
	background: url('Common_Box_Title_Middle_Red.gif') repeat-x center top;
	margin-top: 3px 0px 3px 0px;
}

.box .title,
.box_black .title,
.box_blue .title,
.box_green .title,
.box_red .title
{
	background: url('Common_Box_Title_Left.gif') no-repeat left top;
	height: 27px;
}

.box .title h1,
.box_black .title h1,
.box_blue .title h1,
.box_green .title h1,
.box_red .title h1
{
	background: url('Common_Box_Title_Right.gif') no-repeat right top;
	color: White;
	font-size: 12px;
	font-weight: bold;
	padding: 5px 6px 0px 6px;
}

.box .body,
.box_black .body,
.box_blue .body,
.box_green .body,
.box_red .body
{
	background: #e7eef2 url('Common_Box_Body_Middle.png') repeat-x top left;
	border: 1px solid #aac2d1;
	border-top: none;
	padding: 0px 6px 7px 6px;
}

.box .body div,
.box_black .body div,
.box_blue .body div,
.box_green .body div,
.box_red .body div
{
	background: #fff url('Common_Box_Body_Inner.png') repeat-x top left;
	line-height: 130%;
	padding: 3px;
}

.box ul,
.box_black ul,
.box_blue ul,
.box_green ul,
.box_red ul
{
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.box li,
.box_black li,
.box_blue li,
.box_green li,
.box_red li
{
	margin-left: 4px;
	background: url('Common_Arrow_Bullet.gif') 0 1px no-repeat;
	padding: .05em 0 2px 18px;
}

.boxhlarge { height: 400px; }
.boxhlarge div { height: 395px; }
.boxhmedium { height: 300px; }
.boxhmedium div { height: 295px; }
.boxhsmall { height: 200px; }
.boxhsmall div { height: 195px; }
.boxhtiny { height: 100px; }
.boxhtiny div { height: 95px; }

.boxwlarge { width: 100% }
.boxwmedium { width: 62% }
.boxwsmall { width: 48%}
.boxwtiny { width: 35%}

/*
	This has been added by RachelH. It allows additional style variations 
	for the section boxes(i.e. not having colored heading bar). 
*/

.header,
.header_black,
.header_blue,
.header_green,
.header_red
{
	height:3px;
	border-top: 1px solid #AAC2D1;
}

.header_black
{
	background: #000000;
}

.header_green
{
	background: #507351;
}

.header_red
{
	background: #834645;
}

.header
{
	height:6px;
	background: #ffffff;
	border-left: 1px solid #BEBFBF;
	border-right: 1px solid #BEBFBF;
}

.smallbox_black
{
	background: #5F6F76 url('Common_SmallBox_Black.gif') repeat-x center top;
}

.smallbox_blue
{
	background: #85AABF url('Common_SmallBox_Blue.gif') repeat-x center top;
}

.smallbox_green
{
	background: #659C65 url('Common_SmallBox_Green.gif') repeat-x center top;
}

.smallbox_red
{
	background: #C86261 url('Common_SmallBox_Red.gif') repeat-x center top;
}

.smallbox_black,
.smallbox_blue,
.smallbox_green,
.smallbox_red
{
	margin-top: 3px 0px 3px 0px;
	color: white;
	width: 150px;
}

.smallbox_black .title,
.smallbox_blue .title,
.smallbox_green .title,
.smallbox_red .title
{
	background: url('Common_SmallBox_Content.gif') repeat-y left top;
}

.smallbox_black .title h1,
.smallbox_blue .title h1,
.smallbox_green .title h1,
.smallbox_red .title h1
{
	background: url('Common_SmallBox_top.gif') no-repeat left top;
	color: White;
	font-size: 12px;
	font-weight: bold;
	padding: 5px 6px 2px 6px;
}

.smallbox_black .body,
.smallbox_blue .body,
.smallbox_green .body,
.smallbox_red .body
{
	background: url('Common_SmallBox_Content.gif') repeat-y left top;
}

.smallbox_black .body div,
.smallbox_blue .body div,
.smallbox_green .body div,
.smallbox_red .body div
{
	background: url('Common_SmallBox_bottom.gif') no-repeat right bottom;
	padding: 0px 5px 5px 5px;
	display:block;
}

.smallbox_black .body div a,
.smallbox_blue .body div a,
.smallbox_green .body div a,
.smallbox_red .body div a
{
	color:white;
}

.smallbox_black .body div a:hover,
.smallbox_blue .body div a:hover,
.smallbox_green .body div a:hover,
.smallbox_red .body div a:hover
{
	color:#CDCFCF;
	text-decoration:none;
}


/*
	This is the end of the content added by RachelH.
*/


/* END BOX STYLES */
/* ----------------------------------------------------------------------------------------------*/
/* BEGIN PROMO STYLES */
.promo a
{
	background-color: #E9F7FF;
	border: 1px solid #476D84;
	display: block;
	margin-top: 5px;
	margin-left: 3px;
	padding: 2px;
	text-align: center;
	width: 138px;
}

.promo a:hover
{
	background-color: #fff;
	border: 1px solid #476D84;
	text-decoration: none;
}
/* END PROMO STYLES */
/* ----------------------------------------------------------------------------------------------*/

.action_button
{
	background-color: #fffbff;
	border: solid 1px #cccccc;
	color: #336699;
	font-family: Verdana;
	margin: 4px;
}

.action_button_big
{
	background-color: #799acb;
	border: solid 1px #666;
	font-family: Verdana;
	font-weight: bold;
	color: White;
	margin: 4px;
	padding: 3px 15px 3px 15px;
}

.xbutton
{
	background-color:#fffbff;
	border-color:#cccccc;
	border-style:solid;
	border-width:1px;
	color: red;
	content: X;
	font: 600 12px Verdana,Arial;
	height: 22px;
	padding: 0px 1px 2px 0px;
	text-align: center;
	vertical-align: middle;
	width: 22px;
}

/* Latest button: "formbutton" */
.formbutton,
.formbutton_selected
{
	background:  #999 url('Common_FormButton_Background.png') repeat-x left top;
	/*border: outset 1px #c2d0d9;*/
	border: solid 1px #c2d0d9;
	color: #555;
	cursor: pointer;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	margin: 0px 0px 0px 0px;
	padding: 2px 5px 2px 5px;
}

.formbutton:hover,
.formbutton_selected
{
	background:url('Common_FormButton_Background_Hover.png') repeat-x left top;
}


/* Arrow-bullet stuff */
a.arrow_gray,
a.arrow_white
{
	display: block;
	float: left;
	font-weight: bold;
	margin-top: 5px;
}

a:link.arrow_gray,
a:visited.arrow_gray
{
	background: url(Common_ArrowBullet_Gray.gif) no-repeat top left;
	padding-left: 25px;
}

a:active.arrow_gray,
a:hover.arrow_gray
{
	background: url(Common_ArrowBullet_Gray_Hover.gif) no-repeat top left;
	padding-left: 25px;
}

a:link.arrow_white,
a:visited.arrow_white
{
	background: url(Common_ArrowBullet_White.gif) no-repeat top left;
	padding-left: 25px;
}

a:active.arrow_white,
a:hover.arrow_white
{
	background: url(Common_ArrowBullet_White_Hover.gif) no-repeat top left;
	padding-left: 25px;
}


/* Misc. remaining... */
ul.arrows
{
	list-style-type: none;
	margin: 2px 0px 5px 0px;
	padding: 0px 0px 0px 0px;
}

ul.arrows li
{
	background-image: url(Common_Arrow_Bullet.gif);
	background-repeat: no-repeat;
	background-position: 0px .3em;
	line-height: 18px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	padding-left: 18px;
}

/* Creates the vertical red line between columns in reports and other lists */
.report_vrule { border-right: solid 1px #ffcccc; }

/* Common site colors, use for text and anything else */
/* TODO: replace usage of these with color_ utility classes below and then remove */
.bluetext { color: #369; }
.graytext { color: GrayText; }
.whitetext { color: #fff; }
.redtext, .warn { color: Red; }
.redtitletextmedium { color: #7F1212; font: 800 11px Verdana,Arial; }
.redtitletextsmall { color: #7F1212; font: 500 11px Verdana,Arial; }

.tinytext
{
	font-size: 10px;
	font-weight: 400;
}

.withhr { border-bottom: solid 2px #7F1212; }

table.outline { border-collapse: collapse; }
table.outline tr td { border: double #83a3d1; padding: 5px; }

/* SECTION 3 ====================================================================================*/
/*		Utility Classes -- last in order, highest priority */
/* ==============================================================================================*/

/* Everything in here MUST be limited in scope by some sort of class portion
	in your selectors. No modifications to all html elements as a whole */

/* ----------------------------------------------------------------------------------------------*/
/* BEGIN INPUTWXXX STYLES */
/*
	The purpose of these styles is to provide a consistent tool chest of widths to use with
	various form (or other UI) elements. Instead of specifying an exact pixel amount, you
	specify a semantic value (eg. tiny,small, medium, large, huge. Then here we interpret
	those values to (a) create ratios that inherently line up well, (b) look visually 
	pleasing together and (c) adjust for slightly different actual pixel sizes for different
	UI elements (eg. text area vs. text box.). Note on this last item (c): we optimize for IE7
	in this regard.
*/
textarea.inputwtiny { width: 34px; }
textarea.inputwsmall { width: 74px; }
textarea.inputwmedium { width: 146px; }
textarea.inputwlarge { width: 201px; }
textarea.inputwhuge { width: 296px; }

/* These ratios are omptimized for our iHost controls, please don't
	make changes lightly. Specifically: Address lines up nicely
	with City, State, Zip, which lines up with Country with this
	configuration */
.inputwtiny { width: 36px; }
.inputwsmall { width: 76px; }
.inputwmedium { width: 148px; }
.inputwlarge { width: 203px; }
.inputwhuge { width: 298px; }

/* These are 4 pixels larger than the ones above to make width identical
	(in IE7 at least) */
input[type="button"].inputwtiny, input[type="submit"].inputwtiny, select.inputwtiny { width: 40px; }
input[type="button"].inputwsmall, input[type="submit"].inputwsmall, select.inputwsmall { width: 80px; }
input[type="button"].inputwmedium, input[type="submit"].inputwmedium, select.inputwmedium { width: 152px; }
input[type="button"].inputwlarge, input[type="submit"].inputwlarge, select.inputwlarge { width: 207px; }
input[type="button"].inputwhuge, input[type="submit"].inputwhuge, select.inputwhuge { width: 302px; }
/* END INPUTWXXX STYLES */
/* ----------------------------------------------------------------------------------------------*/


/* Optimizes a table for doing layout-only use */

.layouttable
{
	border: none 0px;
	/*border: solid 1px purple;*/		/* ENABLE FOR DEBUGGING */
	border-collapse: collapse;
	margin: 0px;
	padding: 0px;
	text-align: left;
	vertical-align: top;
}


/* Force block element to max width of content area */
.maxwidth { width: 100% !important; }

/*
	We use !important with all the one and two property generic helper classes here to
	try to given them a better chance of always applying. If you are explicitly adding
	a 1-property class then chances are you good *ALWAYS* want it to apply.
*/

/*
	Border and padding helpers, etc.

	Common uses for these: (1) within reporting table cells to imporve appearance by
	adjusting whitespace without having to manually tweak pixel by pixel, and (2)
	with divs to nudge the layout of page element, again without having to tweak pixel by
	pixel.

	NOTE: IT IS MUCH PREFERED THAT YOU USE THESE STYLES TO NUDGE ELEMENTS ON THE PAGE
	RATHER THAN EITHER INLINE STYLES ATTRIBUTES OR ONE-OFF CSS CLASSES! USE THEM, THE
	WORK GREAT!!!
*/
.notopborder
{
	border-top: none 0px !important; 
	margin-top: 0px !important; 
}
.nobottomborder
{
	border-bottom: none 0px !important; 
	margin-bottom: 0px !important; 
}
.nomargin { margin: 0px !important; }
.marginall { margin: 8px 8px 8px 8px !important; }
.marginall10 { margin: 10px 10px 10px 10px !important; }
.marginall20 { margin: 20px 20px 20px 20px !important; }
.marginall30 { margin: 30px 30px 30px 30px !important; }
.marginleft { margin-left: 8px !important; }
.marginleft10 { margin-left: 10px !important; }
.marginleft20 { margin-left: 20px !important; }
.marginleft30 { margin-left: 30px !important; }
.marginright { margin-right: 8px !important; }
.marginright10 { margin-right: 10px !important; }
.marginright20 { margin-right: 20px !important; }
.marginright30 { margin-right: 30px !important; }
.margintop { margin-top: 8px !important; }
.margintop10 { margin-top: 10px !important; }
.margintop20 { margin-top: 20px !important; }
.margintop30 { margin-top: 30px !important; }
.marginbottom { margin-bottom: 8px !important; }
.marginbottom10 { margin-bottom: 10px !important; }
.marginbottom20 { margin-bottom: 20px !important; }
.marginbottom30 { margin-bottom: 30px !important; }
.nopadding { padding: 0px !important; }
.padall { padding: 8px 8px 8px 8px !important; }
.padleft { padding-left: 8px !important; }
.padleft10 { padding-left: 10px !important; }
.padleft20 { padding-left: 20px !important; }
.padleft30 { padding-left: 30px !important; }
.padright { padding-right: 8px !important; }
.padright10 { padding-right: 10px !important; }
.padright20 { padding-right: 20px !important; }
.padright30 { padding-right: 30px !important; }
.padtop { padding-top: 8px !important; }
.padtop10 { padding-top: 10px !important; }
.padtop20 { padding-top: 20px !important; }
.padtop30 { padding-top: 30px !important; }
.padtoplarge { padding-top: 100px !important; }
.padbottom { padding-bottom: 8px !important; }
.padbottom10 { padding-bottom: 10px !important; }
.padbottom20{ padding-bottom: 20px !important; }
.padbottom30 { padding-bottom: 30px !important; }
.padding5, table.padding5 tr td { padding: 5px !important; }
.padall10, .padding10, table.padding10 tr td { padding: 10px !important; }
.padding15, table.padding15 tr td { padding: 15px !important; }
.padall20, .padding20, table.padding20 tr td { padding: 20px !important; }
.padall30 { padding: 30px !important; }

/* Text alignment helpers, etc.
	often used within a table cell.Use instead of align= and valign= HTML attributes. */
.nobr { white-space: nowrap !important; }	/* Use instead of <nobr>Some text</nobr> */
.left { text-align: left !important; }
.center { text-align: center !important; }
.justify { text-align: justify !important; }
.right { text-align: right !important; }
.top { vertical-align: top !important; }
.middle { vertical-align: middle !important; }
.bottom { vertical-align: bottom !important; }
.floatl { clear: left; float: left !important; }
.floatr { clear: right; float: right !important; }
.clear { clear: both !important; }	/* See br.clear above... */
.indent { margin-left: 10px !important; }


/* Text style helpers Use instead of <b>, <i>, <u> */
.bold { font-weight: bold !important; }
.unbold { font-weight: normal !important; }
.italic { font-style:italic !important; }
.underline { text-decoration: underline !important; }
.notext-decoration { text-decoration: none !important;}
.tiny { font-size: xx-small !important; }

/* Font relative sites */
.fontsmaller { font-size: smaller !important; }
.fontlarger { font-size: larger !important; }
.fontxxsmall { font-size: xx-small !important; }
.fontxsmall { font-size: x-small !important; }
.fontsmall { font-size: small !important; }
.fontmedium { font-size: medium !important; }
.fontlarge { font-size: large !important; }
.fontxlarge { font-size: x-large !important; }
.fontxxlarge { font-size: xx-large !important; }

/* Display styles */
.scroll { overflow: scroll; }
.autoscroll { overflow:auto; }
.hidden { visibility: hidden; }

.tablefixed { table-layout: fixed !important; }

/* Border Styles */
.thinborder_blue { border:solid 1px #336699; }
.thinbordertop_blue { border-top:solid 1px #336699; }
.thinborderbottom_blue { border-bottom:solid 1px #336699; }
.thinborderbottom_blue { border-bottom:solid 1px #336699; }
.thinborderleft_blue { border-bottom:solid 1px #336699; }

.thinborder_gray { border:solid 1px #bbb; }
.thinbordertop_gray { border-top:solid 1px #bbb; }
.thinborderbottom_gray { border-bottom:solid 1px #bbb; }
.thinborderbottom_gray { border-bottom:solid 1px #bbb; }
.thinborderleft_gray { border-bottom:solid 1px #bbb; }

.thickborder_blue { border:solid 2px #336699; }
.thickbordertop_blue { border-top:solid 2px #336699; }
.thickborderbottom_blue { border-bottom:solid 2px #336699; }
.thickborderbottom_blue { border-bottom:solid 2px #336699; }
.thickborderleft_blue { border-bottom:solid 2px #336699; }

.thickborder_gray { border:solid 2px #bbb; }
.thickbordertop_gray { border-top:solid 2px #bbb; }
.thickborderbottom_gray { border-bottom:solid 2px #bbb; }
.thickborderbottom_gray { border-bottom:solid 2px #bbb; }
.thickborderleft_gray { border-bottom:solid 2px #bbb; }

/* Color Styles */

/* Red */
.color_red
{
	color: #663333;
}

.color_red a:link
{
	color: #CC3333;
	text-decoration: underline;
}

.color_red a:visited
{
	color: #993333;
	text-decoration: underline;
}

.color_red a:active,
.color_red a:hover
{
	color: #996666;
	text-decoration: underline;
}

/* Green */
.color_green
{
	color: #336633;
}

.color_green a:link
{
	color: #009900;
	text-decoration: underline;
}

.color_green a:visited
{
	color: #1B5236;
	text-decoration: underline;
}

.color_green a:active,
.color_green a:hover
{
	color: #669966;
	text-decoration: underline;
}

/* Gray... */
.color_gray
{
	color: #545454;
}

.color_gray a:link
{
	color: #336699;
	text-decoration: underline;
}

.color_gray a:visited
{
	color: #003399;
	text-decoration: underline;
}

.color_gray a:active,
.color_gray a:hover
{
	color: #6699CC;
	text-decoration: underline;
}

/* Blue... */
.color_blue
{
	color: #336699;
}

.color_blue a:link
{
	color: #3399CC;
	text-decoration: underline;
}

.color_blue a:visited
{
	color: #003399;
	text-decoration: underline;
}

.color_blue a:active,
.color_blue a:hover
{
	color: #3366CC;
	text-decoration: underline;
}

/* Black... */
.color_black
{
	color: #000;
}

.color_black a:link
{
	color: #336699;
	text-decoration: underline;
}

.color_black a:visited
{
	color: #003399;
	text-decoration: underline;
}

.color_black a:active,
.color_black a:hover
{
	color: #6699CC;
	text-decoration: underline;
}