/******************************************************************************
 * 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; }