and
tags for indentation and spacing */
img { display: inline; } /* Default */
.inline { display: inline; } /* Use img.inline or table.inline when you want them to flow */
.block { display: block; } /* Use img.block or table.block when you want them blocked */
td.img img { display: block; } /* When an image is inside a table use td.img for block */
/* Floating of tables and images -- use with .p for spacing (e.g., class="fl p") */
.fr { float: right; }
.fl { float: left; }
/* Sizing - set anything to a width of 100% */
/* Note: input and textarea require a box-model change, see input.w100 */
.w100 { width: 100%; }
.wauto { width: auto !important; }
/* Misc */
.strong { font-weight: bold; }
.nostrong { font-weight: normal !important; }
.nowrap { white-space: nowrap; }
.clear { clear: both; }
.cl { clear: left; }
.cr { clear: right; }
/* UnderBar (simulated HR) *****************************************************/
/* .u (under bar) converts LR padding to LR margins so bar is under text only */
/* .hr is the legacy name */
.u, .hr {
border: solid 0px #D1DAE6;
border-bottom-width: 1px;
margin-left: 10px;
margin-right: 10px;
padding-left: 0px;
padding-right: 0px;
}
/* li doesn't have a margin */
li.u, li.hr {
margin-left: 0px;
margin-right: 0px;
}
/* does even spacing padding-top margin bottom */
.bar {
border: solid 0px #D1DAE6;
border-bottom-width: 1px;
margin: 0px 10px 0.4em;
padding: 0.4em 0px 0px;
}
/* Debugging and Specs *************************************************/
.debug { background-color: #DDFFFF; color: black; }
.error { background-color: #F9CAC3; }
.error h1 { color: #7F1608; }
div.codeblock {
background-color: #EDF1F6;
border: 1px dashed #A2B2CA;
margin: 0em 10px; /* same as mpad */
overflow: scroll;
padding: 0.4em 10px; /* same as p */
}
/* Put borders on for debugging */
.b-b, table.b-b td { border: 1px solid blue; }
.b-g, table.b-g td { border: 1px solid green; }
.b-r, table.b-r td { border: 1px solid red; }
/* GRID CSS (Generic) *************************************************/
/* Provides a grid pattern for displaying tabular data or a tabluar form */
/* No font-sizes are specified. The cascade determines the font size */
/* GRID (Border and Background Colors *************************************/
/* Present tabular data in a grid format -- margins are set by the wrapper*/
table.grid { border-color: #D1DAE6; }
table.grid th {
background-color: #EDF1F6;
border-color: #D1DAE6;
border-width: 1px;
color: #525E70;
padding: 3px 5px;
text-align: left;
}
table.grid th.right { text-align: right; }
table.grid th.center { text-align: center; }
table.grid th.title {
background-color: #FEF9C4;
color: #525E70;
font-weight: bold;
}
table.grid td {
background-color: white;
border-color: #D1DAE6;
border-width: 1px;
/* color: #252525; messes up IE block anchors */
padding: 3px 5px;
vertical-align: top;
}
/* In a form, make the grid spacing symmetrical */
form table.grid td { padding: 3px 3px; }
/* When you want header coloring on a td */
table.grid td.head {
background-color: #EDF1F6;
color: #525E70;
}
/* When you want header backgorund coloring on a td */
table.grid td.headback { background-color: #EDF1F6; }
/* When you want a blank cell */
table.grid td.blank, table.grid th.blank {
border-width: 0px;
background-color: inherit;
font-size: 25%;
}
/* For row striping */
table.grid tr.stripe td { background-color: #F5F5F5; }
/* Nested tables are borderless and spaced to look like
s but with columns */
/* A grid cell that contains a nested table splits the vertical padding in half */
table.grid td.table, table.grid th.table { padding: 3px 0px 3px 0px; }
table.grid td.table td, table.grid th.table th {
background-color: transparent;
color: inherit;
border-width: 0px;
padding: 0px 5px 0px 5px;
}
table.grid th.table td { vertical-align: middle; }
/* In a form, make the grid spacing symmetrical */
form table.grid td.table td, form table.grid th.table th { padding: 0px 3px 0px 3px; }
/* Use this in conjunction with table.grid to have a borderless grid */
table.plain td, table.plain th {
background-color: transparent;
border-width: 0px;
}
/* Paragraph Grid *******************************************************/
/* Present a borderless grid that spaces like a paragraph */
table.grid-p { margin: 3px 0px 3px 0px; }
table.grid-p td { padding: 0px 5px 0px 5px; }
/* FORM CSS (Generic) *************************************************
*
* A form is laid out with a table in the following patterns
* GRID - uses the table.grid pattern
* DIALOG - uses one or table.groupbox patterns
* All form containers must use vertical-align: top for the form elements to align
*
* Most of the CSS is designed to normalize the controls. div.pad* wraps every control, even plain text.
* NEVER set the border on any widgets ( button, input, select, textarea) to ensure OS look
* No font-sizes are specified. The cascade determines the font size
*/
/* Use this wrappers for all controls that need to align vertically with other controls */
/* By using divs to normalize them, the table container can apply padding evenly */
div.pad-button { margin: 0px; }
div.pad-checkbox { margin: 0px; }
div.pad-plain { margin: 3px 0px; }
div.pad-icons { margin: 4px 0px; }
div.pad-icons img { display: inline !important; }
div.pad-radio { margin: 0px; }
div.pad-select { margin: 0px; }
div.pad-text { margin: 0px; }
div.pad-textarea { margin: 0px; } /* Don't use for w100 */
/* Improves FF, IE (!6). No effect on SF, OP. */
input[type="checkbox"],
input[type="radio"] { vertical-align: middle; }
/* Firefox adjustments */
.gecko input,
.gecko textarea { padding: 2px 4px 0px 4px; }
.ff3 input,
.ff3 textarea { padding: 1px 2px; }
.gecko div.pad-checkbox,
.gecko div.pad-radio { margin: 3px 0px; }
.gecko button,
.gecko input[type="button"],
.gecko input[type="submit"],
.gecko input[type="reset"] { padding: 0px .4em; }
.gecko input[type="checkbox"],
.gecko input[type="radio"] { margin: -2px .3em 2px 0px; }
.gecko option { padding: 0px 5px; }
.ff3 select { padding: 1px 0px; }
/* Internet Explorer adjustments */
.ie div.pad-plain { margin: 4px 0px; }
.ie div.pad-checkbox,
.ie div.pad-radio { margin: .1em 0px; }
/* Note: the input[type=] touchups don't work on IE6 */
.ie7 input { padding: 1px 0px 1px 4px; }
.ie6 input { padding: 1px 3px 1px 3px; }
.ie input[type="button"],
.ie input[type="submit"],
.ie input[type="reset"] { padding: 0px; }
/* When .w100 wraps a div.pad-text, input.w100 is off by 2px */
/* Watch out for side effects when .w100 wraps a div.pad-text and a plain input */
.ie td.w100 div.pad-text { margin-right: 2px; }
.ie7 textarea { padding: 2px 0px 2px 5px; }
.ie6 textarea { padding: 2px 0px 2px 4px; }
/* Alas, IE ignores padding on options */
.ie select { margin-top: 1px; }
.ie option { padding: 0px 7px; }
/* Opera adjustments */
.opera input { padding-left: 2px; }
.opera textarea { padding-left: 2px; }
.opera input[type="checkbox"],
.opera input[type="radio"] { margin: 0px .3em 0px 0px; }
.opera button,
.opera input[type="button"],
.opera input[type="submit"],
.opera input[type="reset"] { padding: 0px .4em; }
/* A 10px L padding fixes opera */
.opera select { padding: 1px 10px 1px 0px; }
.opera option { padding-left: 2px; }
/* Safari adjustments */
.safari input { padding-left: 4px; }
.safari textarea { padding-left: 3px; }
.safari div.pad-checkbox,
.safari div.pad-radio { margin: 2px 0px; }
.safari input[type="checkbox"],
.safari input[type="radio"] { margin: 0px .3em 0px 0px; vertical-align: baseline;}
.safari button { padding: .2em .4em; }
.safari div.pad-select { margin-top: 1px; } /* optimized for 10pt */
.safari option { padding: 0px .3em; }
/* Fix the inheritance model for fonts on form controls
* IE* doesn't inherit fonts or fontsizes for form elements, so we have the following hack:
*/
.f12 button, .f12 input, .f12 label, .f12 select, .f12 textarea { font-size: 12pt; }
.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; }
.f8 button, .f8 input, .f8 label, .f8 select, .f8 textarea { font-size: 8pt; }
/* Touchups for input.w100 and textarea.w100 controls that size to fit their container */
/* Change the box model so width:100% uses the right parent dimensions */
textarea.w100, input.w100 { box-sizing: border-box; -moz-box-sizing: border-box; }
/* IE* is hard-wired to content-box so use the 99% hack */
.ie input.w100, .ie textarea.w100 { width: 99%; }
/* Operas w100 textarea is smaller than it's text so touch it up */
.opera td.w100 div.pad-text { margin-right: 4px; }
/* Form layout patterns */
/* A FORMBOX is transparent layout for an entire form */
/* A GROUPBOX is a visible bordered layout for a section of a form */
table.formbox td {
border-width: 0px;
padding: 1px 6px;
}
table.groupbox td {
background-color: #F5F5F5;
border: solid 1px #E1E1E1;
padding: 4px 4px;
}
table.controls td, table.controls-b td {
padding: 4px 4px;
vertical-align: top;
}
/* Only force hide the border of a table.controls that is inside the groupbox */
/* So the groupbox can be nested insdie a table.controls */
table.groupbox td table.controls td { border-width: 0px !important; }
/* A controls cell that contains a nested table splits the vertical padding in half */
table.controls td.table { padding: 4px 0px; }
table.controls td.table td {
background-color: inherit; /* IE Ignores */
border-width: 0px;
color: inherit; /* IE Ignores */
padding: 0px 4px;
}
/* Prefix is for currency symbols and other right-justified column text before the value */
table.controls td.prefix { padding-right: 0px; text-align: right; }
/* For cells that should be centered */
table.controls td.center { text-align: center;}
/* Additional left pad for labels or values in a 2nd or 3rd column */
table.controls td.pad-left { padding-left: 8px;}
/* Additional top pad to separate rows */
table.controls td.pad-top { padding-top: 8px;}
/* BASE CSS (Site Overrides) ******************************************/
/* -------------------------------------------------------------------------------------------*/
/* GENERIC ELEMENTS */
/* -------------------------------------------------------------------------------------------*/
/* Fonts and Colors ****************************************************/
body {
background-color: #FEFCE3;
color: #252525;
font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular, sans-serif;
width: 1000px;
margin: 20px auto;
}
#page { background-color: white; }
a:link { color: #003296; }
input, textarea, select
{
color: #252525;
font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular, sans-serif;
}
table, tr, th, td {
border: 0px solid #D1DAE6;
empty-cells: show; /* CSS 2.0 - Fixes NS hiding the bottom row*/
}
h1, h2, h3, h4 { color: #003296; }
/* GRID CSS (Site Overrides ) ******************************************/
/* -------------------------------------------------------------------------------------------*/
/* STANDARD PHP Style sheet
/* -------------------------------------------------------------------------------------------*/
/* 9.11.03 - CB - Added VersignBrand styles for showing Verisign Confirmation Icon
/*
/* -------------------------------------------------------------------------------------------*/
/* GENERAL SYLE GUIDELINES OF THIS STYLE SHEET
/* -------------------------------------------------------------------------------------------*/
/* 1. Use Padding when it's inside the border, margins when it's outside the border
/* 2. Body Container Cells provide padding to the right and bottom.
/* 3. Body Cells and Paragraphs provide padding to the top and left.
/* 4. Top Bottom padding is 6 pixels.
/* 5. Left Right Padding is 8 pixels.
/* 6. Pixels are used because ems (a relative sizing attribute) were unreliable
/* -------------------------------------------------------------------------------------------*/
/* FONT MAPPINGS
/* -------------------------------------------------------------------------------------------*/
/* 8pt - 70%
/* 10pt - 80%
/* 12pt - 100%
/* 14pt - 120%
/* 16pt - 150%
/* -------------------------------------------------------------------------------------------*/
/* COLOR PALLETTE
/* -------------------------------------------------------------------------------------------*/
/* #53007E Dark Purple Visited Links (was 660099)
/* #880000 Dark Red Page Title, Active Link
/* #CC3300 Medium Red Validations
/* #FFDDDD Pale Red Background - Form Validation
/* #444444 Darkest Grey H1, H2, Sub Titles STRONG
/* 06.21.04 - CB - Changed taupe palette
/* rgb(148,148,140) (-48) Header / Foooter Font
/* rgb(208,208,204) (-32) Darker Taupe Borders
/* rgb(224,224,220) (-16) Dark Taupe Header
/* rgb(240,240,234) (+00) Medium Taupe Background Menu from XP toolbar
/* rgb(248,248,246) (+10) Pale Taupe Background Table & Sidebar
/* #0041CE Dark Blue Menu Items, Unvisited Links
/* #DDFFFF Pale Cyan Background - Data Table Highlight
/* #107910 Medium Green Page Titles
/* #DFFFDD Pale Green Background - Misc
/* #F6FBBB Pale Yellow
/* -------------------------------------------------------------------------------------------*/
/* PAGE FRAMING ELEMENTS
/*
/* The Basic Construct of a Page is:
/*
/*
/* */
table.C2 { margin: 0px 0px 0px 12px;}
table.C3 { margin: 0px 0px 0px 24px;}
table.C4 { margin: 0px 0px 0px 36px;}
table.C5 { margin: 0px 0px 0px 48px;}
table.C6 { margin: 0px 0px 0px 60px;}
/* Data Tables that flow with Paragraphs */
table.P1 { margin: 3px 6px 3px 6px;}
/* 06.21.04 - CB - Changed left marging from 6 to 12 */
table.P2 { margin: 3px 12px 3px 18px;}
table.P3 { margin: 3px 12px 3px 30px;}
table.P4 { margin: 3px 12px 3px 42px;}
table.P5 { margin: 3px 12px 3px 54px;}
table.P6 { margin: 3px 12px 3px 66px;}
/* Centered */
table.Center { margin: 3px 0px 3px 0px; }
/* -------------------------------------------------------------------------------------------*/
/* DATA TABLES
/* With tables, you need to use margin for indenting
/* -------------------------------------------------------------------------------------------*/
/* Table Headers */
th.TRL, th.TR, th.R {
color: #555555;
font-weight: bolder;
padding: 2px 4px 2px 4px;
background-color: rgb(224,224,220); /* Dark Taupe */
vertical-align: middle; /* So multi-line headers look good */
}
th.TRL { border-width: 1px 1px 0px 1px; }
th.TR { border-width: 1px 1px 0px 0px; }
th.R { border-width: 0px 1px 0px 0px; }
/* Table Data. "H" is for a highlighted cell, "L" is for a Label Cell*/
td.TRBL, td.TRB, td.TRL, td.TR, td.R,
td.H-TRBL, td.H-TRB, td.H-TRL, td.H-TR, td.H-R,
td.L-TRBL, td.L-TRB, td.L-TRL, td.L-TR, td.L-R {
vertical-align: top;
padding: 2px 4px 2px 4px;
}
td.TRBL, td.TRB, td.TRL, td.TR, td.R { background-color: rgb(248,248,246); } /* Pale Taupe */
td.H-TRBL, td.H-TRB, td.H-TRL, td.H-TR, td.H-R { background-color: #DDFFFF; } /* Pale Cyan */
td.L-TRBL, td.L-TRB, td.L-TRL, td.L-TR, td.L-R { background-color: rgb(224,224,220); } /* Dark Taupe */
td.TRBL, td.H-TRBL, td.L-TRBL { border-width: 1px 1px 1px 1px; }
td.TRB, td.H-TRB, td.L-TRB { border-width: 1px 1px 1px 0px; }
td.TRL, td.H-TRL, td.L-TRL { border-width: 1px 1px 0px 1px; }
td.TR, td.H-TR, td.L-TR { border-width: 1px 1px 0px 0px; }
td.R, td.H-R, td.L-R { border-width: 0px 1px 0px 0px; }
/* Bottom Row of Table */
td.Bottom {
border-style: solid;
border-width: 1px 0px 0px 0px;
font-size: 1pt;
padding: 0px 0px 0px 0px;
}
/* Floating Table */
table.FL { float: left; }
table.FR { float: right; margin-right:6px;}
/* Sidebar Table */
/* Wrap this up in a DIV tag to reduce the font of the sidebar */
table.Sidebar {
background-color: rgb(248,248,246); /* Pale Grey */
float: right;
border-width: 1px 1px 1px 1px;
margin: 6px 6px 3px 14px;
}
p.SidebarTitle {
background-color: rgb(224,224,220); /* Dark Taupe */
border-color: #D1DAE6; /* Dark Taupe */
border-width: 0px 0px 1px 0px;
color: #555555;
font-size: 8pt;
font-weight: bolder;
text-align: center;
vertical-align: middle;
}
/* -------------------------------------------------------------------------------------------*/
/* IMAGES
/* -------------------------------------------------------------------------------------------*/
/* Use border="1" on the IMG tag to turn on a gray border */
/* A plain image has no border or padding */
img, img.L, img.R, img.FL, img.FL2, img.FR {
border-color: #D1DAE6; /* Darker Taupe */
margin: 0px 0px 0px 0px;
}
/* Left and Right justified images - with floating equivalents */
/* In IE, there is a bug where the bottom margin does not display on a floating image */
/* Top margin is set to 6 to allow it to align better with text whose top margin is 3 */
img.L { margin: 6px 0px 3px 6px; }
img.FL { margin: 6px 6px 3px 6px; float: left; }
img.FL2 { margin: 6px 6px 3px 18px; float: left; }
img.R { margin: 6px 6px 3px 0px; }
img.FR { margin: 6px 6px 3px 6px; float: right; }
/* An Image that appears inline in a paragraph */
img.Inline {
margin: 0px 0px 0px 0px;
vertical-align: bottom;
}
/* Logo at the top of the Menu */
img.MenuLogo {
border-color: #D1DAE6; /* Darker Taupe */
margin: 3px 0px 0px 0px;
}
/* An image that appears in a Bar Graph */
img.BarGraph {
border: 0px solid blue; /* Set to 1 for testing */
vertical-align: middle;
}
/* -------------------------------------------------------------------------------------------*/
/* Picture Thumbnails
/* -------------------------------------------------------------------------------------------*/
table.Thumb {
float: left;
margin: 6px 0px 3px 6px;
}
td.Thumb, td.Folder {
border-color: #D1DAE6; /* Darker Taupe */
background-color: rgb(248,248,246); /* Light Taupe */
border-width: 1px 1px 1px 1px;
font-size: 8pt;
padding: 6px 0px 6px 0px; /* Left and right are controlled by cell width */
text-align:center;
}
td.Folder { font-size: 9pt; }
/* -------------------------------------------------------------------------------------------*/
/* FORM Controls
/* -------------------------------------------------------------------------------------------*/
/* 11.28.03 - CB - Converted all to use nowrap */
table.Form { margin: 0px 6px 3px 6px;}
/* Help Table - 11.29.03 - CB - Added */
span.FormHelp {
font-size: 9pt;
font-style: italic;
/* font-weight: bolder; */
}
/* td.CG* emulates H1 */
td.FormHeader, td.FormHeaderBar {
background-color: white;
color: #666666;
font-size: 12pt;
padding: 6px 0px 6px 0px;
vertical-align: middle;
}
td.FormHeader { border-width: 0px 0px 0px 0px; }
td.FormHeaderBar { border-width: 1px 0px 0px 0px; }
td.FormComment, p.FormComment {
background-color: white;
color: black;
padding: 0px 0px 6px 0px;
}
td.FormOverflow {
background-color: white;
color: #444444;
padding: 0px 0px 0px 0px;
width: 100%; /* Forces the form to be as compact as possible */
}
td.FormBullet, td.FormBulletTop, td.FormBulletEnd,
td.FormLabel, td.FormLabelTop, td.FormLabelSpan,
td.FormPreControl, td.FormControl, td.FormControlTop,
td.FormValidation {
background-color: rgb(248,248,246);
font-size: 9pt;
padding: 2px 4px 2px 4px;
vertical-align: middle;
white-space: nowrap; /* 11.28.03 - CB - Added */
}
/* Bullet Column - top allows for vertical alignment to the top */
td.FormBullet, td.FormBulletTop {
background-color: white;
border-width: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
padding: 2px 6px 2px 12px;
}
td.FormBulletTop { vertical-align: top; }
/* Used for a blank bullet cell next to a td.Bottom */
td.FormBulletBottom {
background-color: white;
border-width: 0px 0px 0px 0px;
font-size: 1pt;
padding: 0px 0px 0px 0px;
}
/* Field Label Cell - top allows for vertical alignment to the top */
td.FormLabel, td.FormLabelTop {
border-width: 1px 0px 0px 1px;
padding: 2px 16px 2px 4px;
}
td.FormLabelTop { vertical-align: top; }
/* Field Label Cell that spans 2 columns - for checkboxes and textarea inputs */
td.FormLabelSpan {
border-width: 1px 1px 0px 1px;
padding: 2px 4px 2px 4px;
}
/* The prefix for the control (e.g., $ for currency) */
td.FormPreControl {
border-width: 1px 0px 0px 0px;
padding: 2px 4px 2px 0px;
text-align: right;
}
/* The widget control */
td.FormControl, td.FormControlTop {
border-width: 1px 1px 0px 0px;
padding: 2px 4px 2px 0px;
}
td.FormControlTop { vertical-align: top; }
/* Validation Row */
td.FormValidation {
border-width: 0px 1px 0px 1px;
color: #B1301F; /* Red Medium */
font-style: italic;
padding: 0px 4px 2px 3px;
white-space: normal; /* 11.28.03 - CB - Added */
}
/* Button Row*/
td.FormButtons {
background-color: white;
padding: 6px 0px 3px 0px;
}
/* Custom Control Para */
p.CustomControl {
margin: 0px 0px 0px 0px;
padding: 3px 6px 3px 0px;
}
/* Use by PHP HTMLForm Class */
/* Though functionally equivalent to Button, the styles in Opera & NS are different from IE */
input.Submit
{
margin: 0px 6px 0px 0px;
padding: 0px 0px 0px 0px;
}
/* Used by PHP URLButton Class */
/* 7.9.03 - CB - Added */
button
{
font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular, sans-serif;
margin: 0px 6px 0px 0px; /* Uses container's margin and padding */
padding: 0px 0px 0px 0px;
}
/* Additional Validation Styles */
span.Validation { color: #CC0000; }
A.validation:link { color: #CC0000; }
A.validation:visited { color: #CC0000; }
/* -------------------------------------------------------------------------------------------*/
/* News Bulletins
/* -------------------------------------------------------------------------------------------*/
/* Headings within the Bulletin Body */
h1.news { font-size: 10pt; }
/* Dates on News Bulletins */
p.NewsDate
{
font-weight: bold;
margin-top: 6px;
text-align: center;
}