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 #B2C7FB;
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 #B2C7FB;
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: #C8D7FC; }
table.grid th {
background-color: #DCE6FC;
border-color: #C8D7FC;
border-width: 1px;
color: #383426;
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: #FDB16E;
color: #0A48DC;
font-weight: bold;
}
table.grid td {
background-color: white;
border-color: #C8D7FC;
border-width: 1px;
/* color: black; 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: #DCE6FC;
color: #383426;
}
/* When you want header backgorund coloring on a td */
table.grid td.headback { background-color: #DCE6FC; }
/* 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) ******************************************/
/* Fonts and Colors ****************************************************/
body, input, textarea
{
background-color: #0A48DC;
font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular, sans-serif;
}
/* Anchor colors that are more modern than the defaults */
a:link { color: #0A48DC; }
a:visited { color: #5B1B8D; }
a:active { color: #7F1608; }
/* Heading colors */
h1, h2, h3, h4 { color: #0737AA; }
/* Page Divisions **********************************************************/
#page { width: 1000px; margin: 20px auto; }
/* page-top division */
/* contains table page-logo (left cell) and page-menu (right-cell) */
#page-top
{
background-color: #FDB16E;
background-image: url(div-top-bottom.jpg);
background-repeat: repeat-y;
background-position: left;
border: 1px solid #B2C7FB;
color: #0A48DC;
}
/* Page Header is stored in a table, but CSS allows for changing to divs */
#page-top table { width: 100%; }
#page-top table td
{
padding: 10px;
vertical-align: middle;
}
#page-logo img {
vertical-align: middle;
margin-right: 15px;
}
/* Menu Cell on the right */
#page-menu
{
color: #0A48DC !important;
padding: 0.4em 10px;
font-size: 12pt;
font-weight: bolder;
text-align: right;
}
#page-menu a { padding: 10px; text-decoration: none; }
#page-menu a:link { color: #0A48DC !important; }
#page-menu a:visited { color: #0A48DC !important; }
#page-menu a:hover {
background-color: #DCE6FC;
color: #B1301F !important;
}
/* page-content division */
/* Holds the content that changes on a per-page basis */
#page-content
{
background-color: white;
border: 0px solid #B2C7FB;
border-width: 0px 1px;
color: black;
padding: 10px;
min-height: 500px;
}
/* page-bottom division */
/* Holds table with left and right cells for copyrights, status, etc */
#page-bottom
{
background-color: #FDB16E;
background-image: url(div-top-bottom.jpg);
background-repeat: repeat-y;
background-position: left;
border: 1px solid #B2C7FB;
color: #0737AA;
}
#page-bottom table { width: 100%; }
#page-bottom table td
{
font-size: 11pt;
padding: 7px 10px;
vertical-align: middle;
}
#page-bottom-left { text-align: left;}
#page-bottom-right { text-align: right;}
/* Misc Content Area Classes *********************************************/
/* Infobox table */
table.info
{
background-color: white;
background-image: url(info-top.jpg);
background-repeat: repeat-x;
background-position: top;
width: 150px;
}
table.info td
{
border: 1px solid #FDB16E;
padding-bottom: 8px;
}
h1.column
{
border-width: 0px 0px 1px 0px;
}
/* GRID CSS (Site Overrides ) ******************************************/
table.grid th.title
{
background-image: url(grid-title.jpg);
background-repeat: repeat-y;
background-position: right;
}
/* -------------------------------------------------------------------------------------------*/
/* Media Thumbnails
/* -------------------------------------------------------------------------------------------*/
div.media { padding-left: 10px; }
div.media table {
float: left;
margin: 6px 0px 3px 6px;
}
div.media table td {
border-color: rgb(208,208,204); /* Darker Taupe */
background-color: rgb(248,248,246); /* Light Taupe */
border-width: 1px;
font-size: 8pt;
padding: 6px;
text-align: center;
}
div.media table td img { display: inline; }