/*******************************************************************************
 * BLUEGOLF.CSP
 * At NCJGA, Apache process CSP files with PHP to assemble multiple CSS files into a single file
 */
 
/*******************************************************************************
 * BASE.CSS
 * Resets all browser to a known starting point.
 * Sets the fonts, borders, and spacing of the base HTML elements.
 * 
 * Spacing is typically done with padding because the background-color 
 * shows through on padding, but not on the margin.  Indenting is typically 
 * done with margins (see .i classes in touchup.css).
 * 
 * Vertical spacing is done with EMs so it's proportional to the font.
 * Horizontal spacing is done with PXs so all elements left and right align.
 * 
 * Each element is responsible for spacing in all 4 directions (TRBL).
 * TRBL (trouble) stands for Top, Right, Bottom, Left -- the standard CSS ordering.
 * This allows you to place elements vertically, horizontally, or floated with precision.
 */

/* reset the spacing on all elements */
* { padding: 0px; margin: 0px; }

/* fonts and colors are set here then inherited by most elements */
body {
	background-color: #0072bf;
	behavior: url( '../libx/css-hover/csshover.htc'); /* hack so ie can recognize :hover better */
	color: white;
	font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif; 
	font-size: 10pt;
	padding: 0px;
}

/* ie doesn't inherit these from body */
/* safari ignores button styles */
button, input, label, select, textarea { 
	font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif; 
	font-size: 10pt;
}

/* make sure colors and fonts inherit from parent */
/* transparent background ensures that parent elements show through */
code, div, h1, h2, h3, h4, img, li, ol, p, pre, span, table, td, th, ul { 
	background-color: transparent; 	
	color: inherit; 
}

/* textual block elements use EM for TB (top / bottom), PX for LR (left-right) */
/* see touchup.css for micro classes to touch up spacing */
h1, h2, h3, h4, p, pre { padding: 0.4em 5px; }

/* table element defaults */
table { border-collapse: collapse; } /* use touchup .nocollapse to override */
th { vertical-align: middle; }
td { vertical-align: top; }

/* list elements are padded to left align with textual block elements */
/* use the indent classes in touchup.css to left indent these elements */
ol, ul { list-style-position: outside; }
ul { padding: 0.2em 0px 0.2em 20px; }
ol { padding: 0.2em 0px 0.2em 27px; }

/* uses negative margins to compensate for LI padding */
ul ul { margin: 0em 0px -0.2em 15px; padding: 0px; }
ol ol { margin: 0em 0px -0.2em 22px; padding: 0px; }

/* list entries have smaller TB margins to be more compact that paragraphs */
li { margin: 0px; padding: 0.2em 0px; }
ul li { list-style-type: disc; }

/* proportional font elements */
code, tt, pre, .mono	{ 
	font-family: 'Courier New', Courier, Monaco, monospace; 
	font-size: 11pt;
	}
code { white-space: pre; }

/* anchor elements in more contemporary colors */
a:link { color: #31568C; }
a:visited { color: #5B1B8D; }
a:active { color: #B1301F; }

/* images */
img { border-width: 0px; display: inline; }

/* objects and embedding blocks */
object, embed { display: block; }

/* horizontal rules */
hr { margin: 5px 0px; }
.ie hr { margin: 0px; } /* deal with IE's wired-in 5px margin */

/* headings */
h1 { 
	color: #B1301F;
	font-size: 18pt; 
	font-weight: normal; 
	padding: 5px 5px;
	}
	
h2 { 
	color: #464646;
	font-size: 13pt; 
	font-weight: bold; 
	padding: 5px 5px;
}

h3 { 
	color: #238542;
	font-size: 11pt; 
	font-weight: bold; 
	padding: 5px 5px;
}

a:hover {
	color: #B1301F !important;
	text-decoration: underline !important;
}
/******************************************************************************
 * TOUCHUP.CSP
 * General purpose, micro classes that touch up elements.  A touchup is usually
 * concerned with one style aspect: alignment, spacing, floating, font sizes.
 * 
 * Touchups are often combined with other css classes. For example 
 * <p class="f18 strong nowrap">My big, bold, non-wrapping text</p>
 * 
 * Small, agile micro classes allow for all sorts of combinations.
 */

/* horizontal alignment */
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }

/* uses the LR margins to center block elements like table, div, etc */
.mcenter { margin-left: auto; margin-right: auto; }

/* vertical alignment */
.top, table.top td { vertical-align: top; }
.middle, table.middle td { vertical-align: middle; }
.baseline, table.baseline td { vertical-align: baseline; }
.bottom, table.bottom td { vertical-align: bottom; }

/* elements that need to space like a <p>aragraph */
/* use .p* and .m* with elements that have no default spacing such as div, table, or td */

/* space in all 4 directions */
.p, .pad { padding: 0.4em 5px;}
.m, .mar { margin: 0.4em 5px;}

/* padding and margin is useful if you float an element with a background color */
/* alternatively, you can specify class="p m" or "pad mar" */
.pm { margin: 0.4em 5px; margin: 0.4em 5px;}

/* table padding is inconsistent across browsers to use margin instead */
table.p, table.pad { margin: 0.4em 5px }

/* touch up padding */
/* !important coerces touchups to override more weighted css rules */
.pad-top { padding-top: 0.4em !important; }
.pad-top2 { padding-top: 0.8em !important; }
.pad-right { padding-right: 5px !important; }
.pad-bottom { padding-bottom: 0.4em !important; }
.pad-bottom2 { padding-bottom: 0.8em !important; }
.pad-left { padding-left: 5px !important; }
.pad-tb { padding-top: 0.4em !important; padding-bottom: 0.4em !important; }
.pad-rl, .pad-lr { padding-right: 5px !important; padding-left: 5px !important; }
.pad-flush { padding: 0px !important; }

/* touch up margins */
/* !important coerces touchups to override more weighted css rules */
.mar-top { margin-top: 0.4em !important; }
.mar-top2 { margin-top: 0.8em !important; }
.mar-right { margin-right: 5px !important; }
.mar-bottom { margin-bottom: 0.4em !important; }
.mar-bottom2 { margin-bottom: 0.8em !important; }
.mar-left { margin-left: 5px !important; }
.mar-tb { margin-top: 0.4em !important; margin-bottom: 0.4em !important; }
.mar-rl, .mar-lr { margin-right: 5px !important; margin-left: 5px !important; }
.mar-flush { margin: 0px !important; }

/* remove spacing in all directions */
.flush { padding: 0px !important; margin: 0px !important; }

/* remove space in a single direction */
/* there aren't separate TRBL micro classes for padding or margin */
.flush-top { padding-top: 0px !important; margin-top: 0px !important; }
.flush-right { padding-right: 0px !important; margin-right: 0px !important; }
.flush-bottom { padding-bottom: 0px !important; margin-bottom: 0px !important; }
.flush-left { padding-left: 0px !important; margin-left: 0px !important; }
.flush-tb { 
	padding-top: 0px !important; padding-bottom: 0px !important; 
	margin-top: 0px !important; margin-bottom: 0px !important; 
	}
/* easy to forget rl vs lr so they are aliases */
.flush-rl, .flush-lr { 
	padding-right: 0px !important; padding-left: 0px !important; 
	margin-right: 0px !important; margin-left: 0px !important; 
	}

/* left indent for block elements such as p, div, ol, ul, table */
.i1, .i      { margin-left: 5px; }
.i2, .ii     { margin-left: 10px; }
.i3, .iii    { margin-left: 15px; }
.i4, .iiii   { margin-left: 20px; }
.i5, .iiiii  { margin-left: 25px; }
.i6, .iiiiii { margin-left: 30px; }

/* font size touch ups */
/* using point sizes since all modern browsers can + or - fixed size fonts */
.f18 { font-size: 18pt; }
.f16 { font-size: 16pt; }
.f14 { font-size: 14pt; }
.f13 { font-size: 13pt; }
.f12 { font-size: 12pt; }
.f11 { font-size: 11pt; }
.f10 { font-size: 10pt; }
.f9  { font-size: 9pt; }
.f8  { font-size: 8pt; }

/* forms need their own touchups since they don't inherit */
.f11 button, .f11 input, .f11 label, .f11 select, .f11 textarea { font-size: 11pt; }  
.f10 button, .f10 input, .f10 label, .f10 select, .f10 textarea { font-size: 10pt; }  
.f9 button, .f9 input, .f9 label, .f9 select, .f9 textarea { font-size: 9pt; }  

/* border touchups  */
.border { border: 1px solid #E1E1E1 !important; }
.noborder { border-width: 0px !important; }
.noborder-top { border-top-width: 0px !important; }
.noborder-right { border-right-width: 0px !important; }
.noborder-bottom { border-bottom-width: 0px !important; }
.noborder-left { border-left-width: 0px !important; }
.noborder-tb { border-top-width: 0px !important; border-bottom-width: 0px !important; }
.noborder-rl, .noborder-lr { border-right-width: 0px !important; border-left-width: 0px !important; }

/* override the default -- cellspacing is in play if not collapsed */
.nocollapse { border-collapse: separate !important;}

/* border touchups that add bars to block elements like p or div */

/* renders a horizontal bar as a separate element with TB spacing */
/* typically used as <div class="bar"></div> to separate two elements with a bar */
/* spaces just like a paragraph */
.bar { 
	border: solid 0px #E1E1E1; 
	border-bottom-width: 1px; 
	margin: 0px 5px 0.4em;
	padding: 0.4em 0px 0px;
}

/* renders a horizontal bar as part of an existing element with TB spacing */
/* .u puts a bar under the element */
/* .o puts the bar above the element */
/* converts LR padding to LR margins so the bar is the width of the text only */
/* good for lists where a div.bar doesn't work well */
.u, .o { 
	border: solid 0px #E1E1E1; 
	margin-left: 5px !important;
	margin-right: 5px !important;
	padding-left: 0px !important;
	padding-right: 0px !important;
}
/* li doesn't have a margin */
li.u, li.o {
	margin-left: 0px !important;
	margin-right: 0px !important;
}
.u { border-bottom-width: 1px; } /* under bar */
.o { border-top-width: 1px; } /* over bar */

/* css display property - typically used for images */
.inline { display: inline; }
.block { display: block; }

/* floating and clearing */
.fr { float: right; }
.fl { float: left; }
.cl { clear: left; }
.cr { clear: right; }
.clear { clear: both; }

/* sizing - set a block to a width of 100%  */
/* Note: input and textarea require a box-model change, see input.w100 */
.w100 { width: 100%; }
.wauto { width: auto !important; }

/* text formatting */
.strong { font-weight: bold; }
.nostrong { font-weight: normal !important; }
.nowrap { white-space: nowrap; }
.underline { text-decoration: underline; }

/* anchors that shouldn't show their visited state */
.novisit a:visited, a.novisit:visited { color: #31568C; }

/* when you want the cell as narrow as possible without wrapping */
th.snug, td.snug { width: 1%; white-space: nowrap; }
/* when an image is inside a table use td.img for block */
td.img img { display: block; }

/* ol, ul lists without markers */
.plain li { list-style-type: none; }

/* controlling overflow */
.scroll { overflow: scroll; }
.crop { overflow: crop; }
.crop * { white-space: nowrap; }

/******************************************************************************
 * IMAGEBOX.CSS
 * Liquid box patterns that use a 9 slice technique with images for the borders
 * Used to produce the boxes with rounded corners
 * 
 * Due to limitations in IE6, these images cannot be transparent PNGs
 * IE6 (even with pnghack) will not repeat a transparent image on the X or Y axis.
 */

/******************************************************************************
 * page-box is the white imagebox over the black background.
 */
/* page-box , radius: 11, TRBL offsets: 0 1 1 1 */
td.page-box-tl {
	background: transparent url("../stylesheets/page-box.png") no-repeat top left;
	font-size: 1pt;
	width: 12px;
}
td.page-box-tm {
	background: transparent url("../stylesheets/page-box-tb.png") top left repeat-x;
	font-size: 1pt;
	height: 11px;
}
td.page-box-tr {
	font-size: 1pt;
	background: transparent url("../stylesheets/page-box.png") no-repeat top right;
	width: 12px;
}
td.page-box-ml {
	background: transparent url("../stylesheets/page-box-lr.png") top left repeat-y;
}
td.page-box-ml img {
	width: 12px;
}
td.page-box-mm {
	background-color: white;
}
div.page-box-content {
	background-color: transparent;
	margin: -11px;
}
td.page-box-mr {
	background: transparent url("../stylesheets/page-box-lr.png") top right repeat-y;
}
td.page-box-mr img {
	width: 12px;
}
td.page-box-bl {
	background: transparent url("../stylesheets/page-box.png") no-repeat bottom left;
	font-size: 1pt;
}
td.page-box-bm {
	background: transparent url("../stylesheets/page-box-tb.png") bottom left repeat-x;
	font-size: 1pt;
	height: 12px;
}
td.page-box-br {
	background: transparent url("../stylesheets/page-box.png") no-repeat bottom right;
	font-size: 1pt;
}
div.page-box-content { 
	color: black;
	padding: 10px;
}

/******************************************************************************
 * tab-box is the grey imagebox over the white background.
 * this can be used inside a gadget for a grey rounded rectangle
 */
/* tab-box , radius: 10, TRBL offsets: 0 1 2 1 */
td.tab-box-tl {
	background: transparent url("../stylesheets/tab-box.png") no-repeat top left;
	font-size: 1pt;
	width: 11px;
}
td.tab-box-tm {
	background: transparent url("../stylesheets/tab-box-tb.png") top left repeat-x;
	font-size: 1pt;
	height: 10px;
}
td.tab-box-tr {
	font-size: 1pt;
	background: transparent url("../stylesheets/tab-box.png") no-repeat top right;
	width: 11px;
}
td.tab-box-ml {
	background: transparent url("../stylesheets/tab-box-lr.png") top left repeat-y;
}
td.tab-box-ml img {
	width: 11px;
}
td.tab-box-mm {
	background-color: #CCCCCC;
}
div.tab-box-content {
	background-color: transparent;
	margin: -10px;
}
td.tab-box-mr {
	background: transparent url("../stylesheets/tab-box-lr.png") top right repeat-y;
}
td.tab-box-mr img {
	width: 11px;
}
td.tab-box-bl {
	background: transparent url("../stylesheets/tab-box.png") no-repeat bottom left;
	font-size: 1pt;
}
td.tab-box-bm {
	background: transparent url("../stylesheets/tab-box-tb.png") bottom left repeat-x;
	font-size: 1pt;
	height: 12px;
}
td.tab-box-br {
	background: transparent url("../stylesheets/tab-box.png") no-repeat bottom right;
	font-size: 1pt;
}

/* IE freaks out if these arent the same in all dimensions */
div.tab-box-content { 
	padding: 6px; 
	}

/******************************************************************************
 * panel-box is the white imagebox over a grey background.
 * this can be used inside a tab-box 
 */
/* panel-box , radius: 5, TRBL offsets: 1 1 2 1 */
td.panel-box-tl {
	background: transparent url("../stylesheets/panel-box.png") no-repeat top left;
	font-size: 1pt;
	width: 6px;
}
td.panel-box-tm {
	background: transparent url("../stylesheets/panel-box-tb.png") top left repeat-x;
	font-size: 1pt;
	height: 6px;
}
td.panel-box-tr {
	font-size: 1pt;
	background: transparent url("../stylesheets/panel-box.png") no-repeat top right;
	width: 6px;
}
td.panel-box-ml {
	background: transparent url("../stylesheets/panel-box-lr.png") top left repeat-y;
}
td.panel-box-ml img {
	width: 6px;
}
td.panel-box-mm {
	background-color: white;
}
div.panel-box-content {
	background-color: transparent;
	margin: -5px;
}
td.panel-box-mr {
	background: transparent url("../stylesheets/panel-box-lr.png") top right repeat-y;
}
td.panel-box-mr img {
	width: 6px;
}
td.panel-box-bl {
	background: transparent url("../stylesheets/panel-box.png") no-repeat bottom left;
	font-size: 1pt;
}
td.panel-box-bm {
	background: transparent url("../stylesheets/panel-box-tb.png") bottom left repeat-x;
	font-size: 1pt;
	height: 7px;
}
td.panel-box-br {
	background: transparent url("../stylesheets/panel-box.png") no-repeat bottom right;
	font-size: 1pt;
}

/* Panel Boxes are contained in a Column Table */
/* Panel Boxes are sized by their Columns Cells so they are w100 */
/* Panel Boxes need outside spacing, but w100 tables can't have LR margins in IE */
/* So div.panel-box wraps table.panel-box to provide the spacing via div padding */
div.panel-box { padding: 4px; }
table.panel-box { width: 100%; margin: 0px; }

/* Padded so that base.csp 50/50 spacing model works */
div.panel-box-content { padding: 5px 5px; }
/******************************************************************************
 * LOCAL.CSS
 * Styles that are unique to this web site
 */

/* Page Divisions ************************************************************/

/* table#page grows to fit it's content and centers itself */
table#page {
	margin: auto;
	width: auto;
}

table#header { width: 100%; margin-top: 5px; }
table#footer { width: 100%; }

table.headfoot td {
	font-size: 11pt;
	padding: 5px 12px;
}

table.headfoot td, table.headfoot a { 
	color: white; 
	text-decoration: none;
}
table.headfoot a:hover { text-decoration: underline; }

/* Banner ********************************************************************/
div.banner { 
	margin: 10px; 
	padding-bottom: 10px; 
	}

/* Tabs *********************************************************************/
div.page-box-content > table.tabs { margin: 0px 10px; }

div.page-box-content > table.tabs td {
	border-width: 0px;		/* bluegolf override */
	background: transparent url(../stylesheets/tab-inactive-l.png) top left no-repeat;
	font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif;  /* bluegolf override */
	font-size: 14pt;
	padding: 0px;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
}

/* works for a td or an anchor */
div.page-box-content > table.tabs a {
	background: transparent url(../stylesheets/tab-inactive-r.png) top right no-repeat;
	color: #31568C;
	display: block;
	padding: 5px 15px;
	text-decoration: none;
}

/* works for a td or an anchor */
div.page-box-content > table.tabs .selected {
	background: transparent url(../stylesheets/tab-selected-l.png) top left no-repeat;
	color: #B1301F;
}
/* works for a td or an anchor */
div.page-box-content > table.tabs .selected a {
	background: transparent url(../stylesheets/tab-selected-r.png) top right no-repeat;
	color: #B1301F;
}

/* dropdown menu */

div.tab-menu { padding: 5px 5px; }
div.tab-menu a {
	color: #31568C;
	display: block;
	font-size: 12pt;
	padding: 5px 5px;
	text-decoration: none;
	white-space: nowrap;
}
div.tab-menu div.bar { border-color: #C2C2C2; }
div.tab-menu a:hover { 
	background-color: #daedfa; 
	text-decoration: underline;
}

/* TabBox Columns ***************************************************/

td.c1	{ width: 200px; }
td.c2	{ width: 600px; }
td.c3	{ width: 200px; }
td.c12, div.c12	{ width: 800px; }
td.c123, div.c123	{ width: 1000px; }

/* ICONS *********************************************************/

img.icon16 { 
	vertical-align: text-bottom; 
	width: 16px; 
	height: 16px; 
}
img.icon10 { 
	vertical-align: baseline; 
	width: 10px; 
	height: 10px; 
}
img.icon8  { 
	vertical-align: baseline; 
	width: 8px; 
	height: 8px; 
	margin: 4px 2px 0px 2px; 
}

/* adjust icons for thier containers */
h2 img.icon16	{ margin-bottom: 3px; }
h2 img.icon8	{ margin-bottom: 1px; }
h3 img.icon16	{ margin-bottom: 2px; }
h4 img.icon16 { margin-bottom: 0px; }


/* Misc **********************************************************************/

.fr-box {
	background-color: white;
	float: right;
	padding: 5px 5px 5px 15px;
}

/* make photos and flash apps stand out with matte */
.frame {
	display: block;
	border: 1px solid #E1E1E1;
	background-color: #EBEBEB;
	padding: 5px 5px;
}


div.links { 
	padding: 2px 2px;
}
div.links a { 
	display: block; 
	padding: 3px 3px;
	text-decoration: none;
}
div.links a:hover { 
	background-color: #D1DFF6;
	color: #B1301F;
	text-decoration: underline;
}
div.links div.bar { 
	margin: 0px 3px 3px ;
	padding: 3px 0px 0px;
}