Appendix A. Sample Skin Style Sheet (CSS) File for Customizing Skins

This appendix describes the CSS file used for customizing skins. The classes used in this CSS file are described in Customizing the Skin Components section.

/* Layout styles */

/* Adjust logo placed on top left corner or top right corner.*/

.ulogo {

height: 60px;

width: 157px;

background-repeat: no-repeat;

background-position: top left;

}

/* Adjust banner placed on top left corner or top right corner.*/

.ubanner {

height: 60px;

width: auto;

background-repeat: no-repeat;

background-position: top right;

}

.twoColRow

{

height: 100%;

vertical-align: top;

}

.twoColLeftCell

{

background-color: #CCCCCC;

width: 12em;

}

.sidebar

{

width: 100%;

}

.twoColRightCell

{

background-color: #0058BA;

padding: 0px;

width: auto;

}

.contentArea

{

margin: 0px; width: 100%;

}

/* this css style removes the extra padding around form tags */

form {

display: inline

}

/* apply to a div between elements to get some vertical spacing */

.spacer-vertical {

height: 10px;

}

/* the browser will not get any smaller than this */

.minimumScreenResolution {

width: 750px;

background-color: #003466;

}

/* this style is only used in the "user" login level" */

.login {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

color: #FFFFFF;

padding-right: 10px;

padding-left: 10px;

}

/* masthead and footer */

.masthead {

background-image: url(images/masthead.jpg);

height: 47px;

width: 830px;

background-repeat: no-repeat;

}

.footer {

background-color: #003466;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-top-style: solid;

border-top-color: #FFFFFF;

border-right-color: #FFFFFF;

border-bottom-color: #FFFFFF;

border-left-color: #FFFFFF;

height: 22px;

text-align: right;

}

/* navigation bar */

.navbuttons {

left: 0px;

position: relative;

}

.navButton-on {

background-image: url(images/menuButton_on.gif);

background-repeat: no-repeat;

}

.navButton-on a {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

line-height: 24px;

color: #FFFFFF;

height: 24px;

padding-right: 18px;

padding-left: 18px;

text-transform: lowercase;

text-decoration: none;

white-space: nowrap;

}

.navButton-off a { /* Navbuttons are a hyperlink */

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color: #FFFFFF;

text-transform: lowercase;

text-decoration: none;

padding-right: 18px;

padding-left: 18px;

height: 24px;

line-height: 24px;

cursor: hand;

voice-family: "\"}\"";

voice-family: inherit;

cursor: pointer;

white-space: nowrap;

}

.navbar-background {

background-image: url(images/menubar.gif);

height: 24px;

}

.navbar-separator {

background-image: url(images/menubar_divider.gif);

background-repeat: no-repeat;

width: 2px;

height: 24px;

}

/* Drop down boxes should have lowercase text */

SELECT

{

text-transform: lowercase;

}

.domainInfo-text { /* To display domain.com in siteadmin */

padding-left: 1em;

vertical-align: bottom;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

font-size: 14px;

color: White;

}

/* sidebar styles */

.sidebar-pulldown {

width: 150px;

}

.sidebar {

background-color: #CCCCCC;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-right-style: solid;

border-top-color: #FFFFFF;

border-right-color: #FFFFFF;

border-bottom-color: #FFFFFF;

border-left-color: #FFFFFF;

}

.sidebar-width {

width: 189px;

}

.sidebarWindow-find {

background-color: #E3E3E3;

padding: 8px;

}

.sidebarWindow-login {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color: #12489E;

background-color: #FFFFFF;

padding: 8px;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-bottom-style: solid;

border-top-color: #5F5F5F;

border-right-color: #5F5F5F;

border-bottom-color: #5F5F5F;

border-left-color: #5F5F5F;

text-align: left;

text-transform: lowercase;

width: 100%;

}

.sidebar-head-myTaskbars {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 14px;

color: #FFFFFF;

text-transform: lowercase;

}

.sidebar-head-myTaskbars { /* for toolbar area */

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 14px;

color: #333333;

text-transform: lowercase;

font-weight: bold; /* new */

}

.sidebar-taskboxes { /* for toolbars area */

padding: 8px;

background-color: #CCCCCC;

border-top-width: 3px;

border-top-style: solid;

border-top-color: #666666;

border-right-color: #666666;

border-bottom-color: #666666;

border-left-color: #666666;

}

.taskboxHeader-middle {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color: #FFFFFF;

background-image: url(images/menubar.gif);

height: 24px;

line-height: 24px;

text-transform: lowercase;

}

.taskboxHeader-capLeft {

background-image: url(images/menubar_cap_left.gif);

height: 24px;

width: 2px;

}

.taskboxHeader-capRight {

background-image: url(images/menubar_cap_right.gif);

height: 24px;

width: 2px;

}

.taskbox-content {

background-color: #FFFFFF;

padding: 6px;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-right-style: solid;

border-bottom-style: solid;

border-top-color: #333333;

border-right-color: #333333;

border-bottom-color: #333333;

border-left-color: #333333;

}

.taskboxIcon-placeholder {

background-image: url(images/icon_taskbox_placeholder.jpg);

height: 24px;

width: 18px;

float: left;

background-position: right center;

background-repeat: no-repeat;

}

.button

{

text-transform: lowercase;

}

.button-closeWindow {

background-image: url(images/button_opened.jpg);

height: 24px;

width: 24px;

float: right;

/* the code below is used to make the cursor a "hand" in ie 5 and most other major browsers */

cursor: hand;

voice-family: "\"}\"";

voice-family: inherit;

cursor: pointer;

}

.button-logout {

background-image: url(../../images/button_logout.gif);

background-repeat: no-repeat;

background-position: center center;

height: 16px;

width: 46px;

/* the code below is used to make the cursor a "hand" in ie 5 and most other major browsers */

cursor: hand;

voice-family: "\"}\"";

voice-family: inherit;

cursor: pointer;

}

.button-logout a

{

display: block;

width: auto;

height: 16px;

text-decoration: none;

}

.button-logout a span

{

display: none;

}

.button-edit {

background-image: url(../../images/button_edit.gif);

background-repeat: no-repeat;

background-position: right;

height: 18px;

width: 48px;

/* the code below is used to make the cursor a "hand" in ie 5 and most other major browsers */

cursor: hand;

voice-family: "\"}\"";

voice-family: inherit;

cursor: pointer;

}

/* content area styles */

.contentArea {

background-color: #0058BA;

}

.main

{

padding: 16px;

}

.pageID-home {

background-image: url(images/pageID_home.jpg);

background-repeat: no-repeat;

height: 32px;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 20px;

color: #FFFFFF;

padding-left: 32px;

padding-bottom: 6px;

line-height: 24px;

text-transform: lowercase;

}

.pageID-home a {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 20px;

color: #FFFFFF;

text-transform: lowercase;

text-decoration: underline;

}

.tab-spacer {

width: 5px;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-left-style: solid;

border-top-color: #071730;

border-right-color: #071730;

border-bottom-color: #071730;

border-left-color: #071730;

}

.tab-off {

background-image: url(../../images/tab_off.gif);

white-space: nowrap;

height: 21px;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color: #FFFFFF;

text-transform: lowercase;

padding-right: 15px;

padding-left: 15px;

line-height: 18px;

cursor: hand;

voice-family: "\"}\"";

voice-family: inherit;

cursor: pointer;

}

.tab-on {

background-image: url(../../images/tab_on.gif);

white-space: nowrap;

height: 21px;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

line-height: 18px;

color: #12347C;

padding-right: 15px;

padding-left: 15px;

text-transform: lowercase;

}

.tab-off-capLeft {

background-image: url(../../images/tab_off_capLeft.gif);

width: 2px;

padding: 1px;

height: 21px;

}

.tab-off-capRight {

background-image: url(../../images/tab_off_capRight.gif);

width: 2px;

padding: 1px;

height: 21px;

}

.tab-on-capLeft {

background-image: url(../../images/tab_on_capLeft.gif);

width: 2px;

padding: 1px;

height: 21px;

}

.tab-on-capRight {

background-image: url(../../images/tab_on_capRight.gif);

width: 2px;

padding: 1px;

height: 21px;

}

.actionBar {

background-image: url(../../images/actionBar_background.gif);

background-repeat: repeat-x;

height: 23px;

}

.actionBar-separator {

background-image: url(../../images/actionBar_divider.gif);

background-repeat: no-repeat;

width: 2px;

height: 23px;

}

.actionBar-button-disabled {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

line-height: 23px;

color: #999999;

height: 23px;

padding-right: 10px;

padding-left: 10px;

text-transform: lowercase;

text-decoration: none;

white-space: nowrap;

}

.actionBar-button-enabled {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

line-height: 23px;

color: #333333;

height: 23px;

padding-right: 10px;

padding-left: 10px;

text-transform: lowercase;

text-decoration: none;

white-space: nowrap;

/* the code below is used to make the cursor a "hand" in ie 5 and most other major browsers */

cursor: hand;

voice-family: "\"}\"";

voice-family: inherit;

cursor: pointer;

}

.contentWindow-top {

background-image: url(../../images/window_outer_top.gif);

background-repeat: repeat-x;

height: 25px;

}

.contentWindow-botm {

background-image: url(../../images/window_outer_botm.gif);

background-repeat: repeat-x;

height: 19px;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-bottom-style: solid;

border-top-color: #071730;

border-right-color: #071730;

border-bottom-color: #071730;

border-left-color: #071730;

}

.contentWindow-left {

background-image: url(../../images/window_outer_left.gif);

background-repeat: repeat-y;

padding-left: 8px;

width: 13px;

}

.contentWindow-right {

background-image: url(../../images/window_outer_right.gif);

background-repeat: repeat-y;

width: 13px;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-right-style: solid;

border-top-color: #071730;

border-right-color: #071730;

border-bottom-color: #071730;

border-left-color: #071730;

background-position: right;

padding-right: 8px;

}

.contentWindow-topRight {

background-image: url(../../images/window-outer-topRight.gif);

height: 25px;

width: 6px;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-right-style: solid;

border-top-color: #071730;

border-right-color: #071730;

border-bottom-color: #071730;

border-left-color: #071730;

background-repeat: no-repeat;

background-position: right;

}

.contentWindow-topLeft {

background-image: url(../../images/window_outer_topLeft.jpg);

height: 25px;

width: 6px;

}

.contentWindow-botmLeft {

background-image: url(../../images/window_outer_botmLeft.gif);

height: 19px;

width: 6px;

background-repeat: no-repeat;

border-top: 1px #071730;

border-right: 1px #071730;

border-bottom: 1px solid #071730;

border-left: 1px #071730;

}

.contentWindow-botmRight {

background-image: url(../../images/window_outer_botmRight.gif);

height: 19px;

width: 6px;

background-repeat: no-repeat;

background-position: right;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-right-style: solid;

border-bottom-style: solid;

border-top-color: #071730;

border-right-color: #071730;

border-bottom-color: #071730;

border-left-color: #071730;

}

.contentWindow-tabOn {

background-image: url(../../images/window_outer_tabOn.gif);

height: 25px;

}

.contentWindow-inside {

background-color: #FFFFFF;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-top-style: solid;

border-left-style: solid;

border-top-color: #707070;

border-right-color: #707070;

border-bottom-color: #707070;

border-left-color: #707070;

padding: 10px;

}

.windowBorder-dashbardContent {

border: 1px solid #CFCFCF;

}

.tableContent-subTitle

{

background-color: #EEF9FD;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color: #5D81A5;

text-transform: lowercase;

height: 24px;

vertical-align: middle;

border-top: solid 1px;

border-bottom: solid 1px;

padding-left: 10px;

}

.tableContent-leftColumn

{

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

padding-left: 10px;

padding-top: 8px;

padding-right: 5px;

padding-bottom: 5px;

}

.tableContent-leftColumn-rightAlign

{

padding-left: 10px;

padding-top: 8px;

padding-right: 5px;

padding-bottom: 5px;

text-align: right;

}

.tableContent-rightColumn

{

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

padding-left: 5px;

padding-top: 5px;

padding-right: 10px;

padding-bottom: 5px;

}

.tableContent-middleColumn

{

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

padding-left: 5px;

padding-top: 3px;

padding-right: 5px;

padding-bottom: 5px;

white-space: nowrap

}

.tableContent-middleColumn-cpanel {

padding-left: 10px;

padding-top: 5px;

padding-right: 10px;

padding-bottom: 5px;

}

.tableContent-leftColumn-cpanel {

padding-left: 10px;

padding-top: 5px;

padding-right: 10px;

padding-bottom: 5px;

}

.RadioButtonList

{

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

}

.progressBar-totalWidth {

width: 150px;

}

.progressBar-small-totalWidth {

width: 100px;

}

.progressBar-yellow {

background-image: url(../../images/progressbar_yellow.gif);

background-repeat: repeat-x;

height: 11px;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-left-style: solid;

border-top-color: #12347C;

border-right-color: #12347C;

border-bottom-color: #12347C;

border-left-color: #12347C;

background-position: center;

padding-bottom: 11px;

}

.progressBar-red {

background-image: url(../../images/progressbar_red.gif);

background-repeat: repeat-x;

height: 11px;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-left-style: solid;

border-top-color: #12347C;

border-right-color: #12347C;

border-bottom-color: #12347C;

border-left-color: #12347C;

background-position: center;

padding-bottom: 11px;

}

.progressBar-filled {

background-image: url(../../images/progressbar_fill.gif);

background-repeat: repeat-x;

height: 11px;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-left-style: solid;

border-top-color: #12347C;

border-right-color: #12347C;

border-bottom-color: #12347C;

border-left-color: #12347C;

background-position: center;

padding-bottom: 11px;

}

.progressBar-empty {

background-image: url(../../images/progressbar_empty.gif);

background-repeat: repeat-x;

background-position: center;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-right-style: solid;

border-top-color: #ADADAD;

border-right-color: #ADADAD;

border-bottom-color: #ADADAD;

border-left-color: #ADADAD;

height: 11px;

padding-bottom: 11px;

}

/* list view */

.tableContent-columnHead {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

font-weight: bold;

text-transform: lowercase;

color: #5873AA;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-bottom-style: solid;

border-top-color: #CCCCCC;

border-right-color: #CCCCCC;

border-bottom-color: #CCCCCC;

border-left-color: #CCCCCC;

}

.tableContent-columnHead A

{

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

font-weight: bold;

text-transform: lowercase;

text-decoration: none;

color: #5873AA;

/* the code below is used to make the cursor a "hand" in ie 5 and most other major browsers */

cursor: hand;

voice-family: "\"}\"";

voice-family: inherit;

cursor: pointer;

}

.tableContent-columnHead-activeSort {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

font-weight: bold;

text-transform: lowercase;

color: #5873AA;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-bottom-style: solid;

border-top-color: #CCCCCC;

border-right-color: #CCCCCC;

border-bottom-color: #CCCCCC;

border-left-color: #CCCCCC;

background-color: #EEF9FD;

}

.tableContent-columnHead-activeSort A

{

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

font-weight: bold;

text-transform: lowercase;

text-decoration: none;

color: #5873AA;

/* the code below is used to make the cursor a "hand" in ie 5 and most other major browsers */

cursor: hand;

voice-family: "\"}\"";

voice-family: inherit;

cursor: pointer;

}

.tableContent-rowDivider-a {

background-color: #FFFFFF;

}

.tableContent-rowDivider-b {

background-color: #EAEAEA;

}

/* pagination */

.button-prev {

background-image: url(../../images/button_prev.gif);

background-repeat: no-repeat;

height: 19px;

width: 18px;

/* the code below is used to make the cursor a "hand" in ie 5 and most other major browsers */

cursor: hand;

voice-family: "\"}\"";

voice-family: inherit;

cursor: pointer;

}

.button-prev-disabled {

background-image: url(../../images/button_prev_disabled.gif);

background-repeat: no-repeat;

height: 19px;

width: 18px;

}

.button-next {

background-image: url(../../images/button_next.gif);

background-repeat: no-repeat;

height: 19px;

width: 18px;

/* the code below is used to make the cursor a "hand" in ie 5 and most other major browsers */

cursor: hand;

voice-family: "\"}\"";

voice-family: inherit;

cursor: pointer;

}

.button-next-disabled {

background-image: url(../../images/button_next_disabled.gif);

background-repeat: no-repeat;

height: 19px;

width: 18px;

}

.pagination {

margin-top: 8px;

}

/* wizard */

.wizard-instructions {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color: #333333;

padding: 10px;

}

.stepsWindow-topLeft {

background-image: url(../../images/window_outer_topLeft.jpg);

height: 15px;

width: 6px;

}

.stepsWindow-top {

background-image: url(../../images/window_outer_top.gif);

background-repeat: repeat-x;

height: 15px;

}

.stepsWindow-topRight {

background-image: url(../../images/window-outer-topRight.gif);

height: 15px;

width: 6px;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-right-style: solid;

border-top-color: #071730;

border-right-color: #071730;

border-bottom-color: #071730;

border-left-color: #071730;

background-repeat: no-repeat;

background-position: right;

}

.stepsWindow-left {

background-image: url(../../images/window_outer_left.gif);

background-repeat: repeat-y;

padding-left: 8px;

width: 10px;

}

.stepsWindow-right {

background-image: url(../../images/window_outer_right.gif);

background-repeat: repeat-y;

width: 10px;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-right-style: solid;

border-top-color: #071730;

border-right-color: #071730;

border-bottom-color: #071730;

border-left-color: #071730;

background-position: right;

padding-right: 8px;

}

.stepsWindow-botmLeft {

background-image: url(../../images/window_outer_botmLeft.gif);

height: 12px;

width: 6px;

background-repeat: no-repeat;

border-top: 1px #071730;

border-right: 1px #071730;

border-bottom: 1px solid #071730;

border-left: 1px #071730;

}

.stepsWindow-botm {

background-image: url(../../images/window_outer_botm.gif);

background-repeat: repeat-x;

height: 12px;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-bottom-style: solid;

border-top-color: #071730;

border-right-color: #071730;

border-bottom-color: #071730;

border-left-color: #071730;

}

.stepsWindow-botmRight {

background-image: url(../../images/window_outer_botmRight.gif);

height: 12px;

width: 6px;

background-repeat: no-repeat;

background-position: right;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-right-style: solid;

border-bottom-style: solid;

border-top-color: #071730;

border-right-color: #071730;

border-bottom-color: #071730;

border-left-color: #071730;

}

.stepsWindow-inside {

background-color: #FFFFFF;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-top-style: solid;

border-left-style: solid;

border-top-color: #707070;

border-right-color: #707070;

border-bottom-color: #707070;

border-left-color: #707070;

}

.stepsWindow-padding {

padding-left: 20px;

width: 225px;

}

/* confirmations, errors, alerts */

.notification-alert {

background-color: #CCCCCC;

border: 2px solid #FFFF00;

}

.notification-alert-inside {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color: #000000;

padding: 10px;

}

.showErrorInForm {

background-color: #FFFF00;

}

/* text styling */

.pageID-hyperlinked {

color: #FFFFFF;

}

.header-dashboard {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

font-weight: bold;

color: #12347C;

background-color: #0187CE;

background-image: url(images/headerBackground_dashboard.jpg);

background-repeat: repeat-y;

height: 26px;

line-height: 24px;

padding-left: 10px;

text-transform: lowercase;

}

.header-steps {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 18px;

font-weight: bold;

color: #12347C;

background-color: #0187CE;

background-image: url(../../images/headerBackground-steps.jpg);

background-repeat: repeat-y;

height: 26px;

line-height: 24px;

padding-left: 10px;

text-transform: lowercase;

padding-right: 10px;

}

.header-error {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 18px;

font-weight: bold;

color: #990000;

}

.header-instructions {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 14px;

color: #12347C;

font-weight: bold;

}

.subhead {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color: #5D81A5;

vertical-align: top; /* to prevent from floating */

padding-top: 5px;

text-transform: lowercase;

}

.subhead-middle {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color: #5D81A5;

vertical-align: middle;

padding-top: 5px;

text-transform: lowercase;

white-space: nowrap;

}

.text-normal {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color: #333333;

text-transform: none;

vertical-align: top;

}

.text-iconLabel {

font-family: Arial, Helvetica, sans-serif;

font-size: 9px;

color: #333333;

text-align: center;

text-transform: lowercase;

text-decoration: none;

padding-top: 3px;

cursor: hand;

white-space: normal;

}

.text-columnHead {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

font-weight: bold;

text-transform: lowercase;

color: #5873AA;

}

.text-columnHead-activeSort {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

font-weight: bold;

background-color: #EEF9FD;

}

.text-addToFavorites {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color: #FFFFFF;

white-space: nowrap;

text-decoration: none;

}

.text-step-current {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

font-weight: bold;

color: #12347C;

}

.text-requiredField {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color: #990000;

}

.tableContent-alignRight {

text-align: right;

}

/* icons */

.icon-addUser-32 {

background-image: url(../../images/icon_addUser_32.gif);

background-repeat: no-repeat;

height: 32px;

width: 32px;

margin-right: auto;

margin-left: auto

/* the code below is used to make the cursor a "hand" in ie 5 and most other major browsers */

cursor: hand;

voice-family: "\"}\"";

voice-family: inherit;

cursor: pointer;

}

.icon-alert-16 {

background-image: url(../../images/icon_warning.gif);

background-repeat: no-repeat;

height: 16px;

width: 16px;

float: right;

margin-left: 5px;

}

.icon-alert-32 { /*error icon placement */

background-image: url(../../images/icon_warning_32.gif);

background-repeat: no-repeat;

background-position: center 5px;

width: 52px;

position: relative;

top: 10px;

}

.icon-activeSort-descending {

background-image: url(../../images/icon_sort_descending.gif);

float: right;

height: 16px;

width: 16px;

margin-right: 2px;

margin-left: 2px;

}

.icon-active-16 {

background-image: url(../../images/icon-state-placeholder.gif);

background-repeat: no-repeat;

height: 16px;

width: 16px;

}

.icon-addToFavorites {

background-image: url(images/icon_addToFavorites.gif);

background-repeat: no-repeat;

background-position: center center;

height: 16px;

width: 16px;

cursor: pointer;

voice-family: "\"}\"";

voice-family: inherit;

cursor: pointer;

text-align: right;

}

.icon-stepComplete {

background-image: url(../../images/icon_stepComplete.gif);

background-repeat: no-repeat;

background-position: center center;

height: 16px;

width: 26px;

}

.icon-stepCurrent {

background-image: url(../../images/icon_step_current.gif);

height: 16px;

width: 26px;

background-repeat: no-repeat;

background-position: center center;

}

.icon-stepIncomplete {

background-repeat: no-repeat;

background-position: center center;

height: 16px;

width: 26px;

}

.icon-cpanel-32 { /* for dashboard icons */

background-repeat: no-repeat;

height: 32px;

width: 32px;

margin-right: auto;

margin-left: auto

/* the code below is used to make the cursor a "hand" in ie 5 and most other major browsers */

cursor: hand;

voice-family: "\"}\"";

voice-family: inherit;

cursor: pointer;

}

.icon-status-up {

background-image: url(../../images/status_up.gif);

height: 16px;

width: 16px;

background-repeat: no-repeat;

}

.icon-status-down {

background-image: url(../../images/status_down.gif);

background-repeat: no-repeat;

width: 16px;

height: 16px;

}

.icon-status-warning {

background-image: url(../../images/status_warning.gif);

background-repeat: no-repeat;

width: 16px;

height: 16px;

}

.sidebar-textfield-large { /* for large toolbar text fields */

width: 150px;

}

.add-to-jumplist { /* jump list link placement */

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

padding-right: 10px;

vertical-align: middle;

float: right;

}

.icon-help-item{ /* help icon in items in formtable */

background-image: url(images/icon_addToFavorites.gif);

background-repeat: no-repeat;

height: 16px;

width: 16px;

margin-top: 4px;

cursor: pointer;

}

.icon-help-dashboard-header { /* help icon in dashboard header */

background-image: url(images/icon_addToFavorites.gif);

background-repeat: no-repeat;

height: 16px;

width: 16px;

float: right;

padding-right: 22px;

margin-top: 4px;

}

.icon-help-dashboard-header-a { /* help icon in dashboard header */

background-image: url(images/icon_addToFavorites.gif);

background-repeat: no-repeat;

height: 16px;

width: 16px;

float: left;

margin-left: 5px;

vertical-align: middle;

}

.header-dashboard-left { /* for dashboard headers that have a help icon */

float: left;

}

.icon-help-embedded { /* embedded help icon for a field */

background-image: url(images/icon_addToFavorites.gif);

background-repeat: no-repeat;

height: 16px;

width: 16px;

margin-left: 5px;

float: none;

cursor: pointer;

}

.icon-help-page{

background-repeat: no-repeat;

height: 16px;

width: 16px;

float: right;

padding-left: 25px;

padding-right:25px;

padding-top: 10px;

vertical-align: top;

}

.searchbox-content { /* for searchbox with no header */

background-color: #FFFFFF;

padding: 6px;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-right-style: solid;

border-bottom-style: solid;

border-top-color: #333333;

border-right-color: #333333;

border-bottom-color: #333333;

border-left-color: #333333;

border-left-style: solid;

border-top-style: solid;

}

.tableContent-leftColumn-noTopPad { /* for dashboard pie chart */

padding-left: 10px;

padding-top: 0px;

padding-right: 5px;

padding-bottom: 0px;

}

.tableContent-embedded-help { /* for embedded help dashed line box */

padding: 10px 10px 2px;

border: 1px dashed #666666;

}

.item-embedded-help { /* for embedded help dashed line box for singleitem */

border: 1px dashed #666666;

}

.sub-header-a { /* for config service subheads */

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

background-color: #D9F2F7;

background-image: url(images/headerBackground_options_2.gif);

background-repeat: repeat-y;

padding-left: 10px;

padding-bottom: 4px;

padding-top: 4px;

text-transform: lowercase;

background-position: right;

}

.button-twisty-open { /* used in service options */

background-image: url(images/button_twisty_open-a.gif);

height: 19px;

width: 19px;

float: left;

cursor: pointer;

voice-family: "\"}\"";

voice-family: inherit;

cursor: pointer;

margin-left: 2px;

clear: left;

margin-top: 2px;

}

.button-twisty-closed { /* used in service options */

background-image: url(images/button_twisty_closed-a.gif);

height: 19px;

width: 19px;

float: left;

cursor: pointer;

voice-family: "\"}\"";

voice-family: inherit;

cursor: pointer;

margin-left: 2px;

margin-top: 2px;

}

.nowrap { /* used in preferences_branding and service_options_configure - should be used as a span in breadcrumbs to keep long names on the same line (i.e. configure web hosting)*/

white-space: nowrap;

}

.subhead-title { /* for subheaders which are attached to the bottom of the dashboard header, left column */

background-color: #0187CE;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color: #FFFFFF;

padding-left: 15px;

}

.subhead-right { /* used in combination with the previous class "subhead-title", right column */

background-color: #0187CE;

background-image: url(../../images/subhead.jpg);

background-repeat: repeat-y;

background-position: right;

}

.subhead-formtable { /* a combination of subhead-title and subhead-right, now used in one spanning column" */

background-color: #0187CE;

background-image: url(../../images/subhead.jpg);

background-repeat: repeat-y;

background-position: right;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color: #FFFFFF;

padding-left: 15px;

}

.button-small { /* smaller, better looking button */

FONT-SIZE: 11px;

COLOR: #000000;

FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

margin-top: 2px;

text-transform: lowercase;

}

.flipper { /* for flip list - page flipper area */

border-top: none #FFFFFF;

border-right: none #FFFFFF;

border-bottom: none #FFFFFF;

border-left: none #FFFFFF;

padding: 2px;

}

.windowBorder-fliplistContent { /* for containment of fliplist so that a help icon can be placed within the header */

border: 1px solid #CFCFCF;

}

.float-left { /* used in action_log.htm - should be used to prevent the sort icon from wrapping */

float:left

}

.float-right { /* used in control panel, dashboard, and action log */

float:right

}

.pad-4 { /* UE new, for breadcrumb help icon placement */

padding-left:4px;

padding-top:4px;

vertical-align: top;

}

.pageID-home { /* smaller text, better alignment */

background-image: url(images/pageID_home.jpg);

background-repeat: no-repeat;

height: 32px;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 20px;

color: #FFFFFF;

padding-left: 32px;

padding-bottom: 10px;

line-height: 26px;

text-transform: lowercase;

vertical-align: top; /* for text alignment */

}

.pageID-home-disabled { /* disabled look for edit dialogs */

background-image: url(images/pageID_home.jpg);

background-repeat: no-repeat;

height: 32px;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 20px;

color: #C0C0C0;

padding-left: 32px;

padding-bottom: 10px;

line-height: 26px;

text-transform: lowercase;

vertical-align: top;

}

.button-openWindow { /* twisty button for a closed task box */

background-image: url(../../images/button_closed.jpg);

height: 24px;

width: 24px;

float: right;

cursor: hand;

voice-family: "\"}\"";

voice-family: inherit;

cursor: pointer;

}

.controlPanel-subhead

{

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color: #5D81A5;

vertical-align: top; /* to prevent from floating */

padding-top: 5px;

padding-left: 10px;

text-transform: lowercase;

}

.controlPanel-subhead-disabled

{

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color: Red;

vertical-align: top; /* to prevent from floating */

padding-top: 5px;

padding-left: 10px;

text-transform: lowercase;

}

/* Navigation panel classes for Ultimate Panel */

.NAV_Panel

{

background-color:#cccccc;

}

.NAV_GroupHeader

{

background-color:#114A9B;

background-image: url(images/menubar.gif);

color:#ffffff;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size:10pt;

font-weight:Bold;

}

.NAV_GroupHeaderOpen

{

background-color:#114A9B;

background-image: url(images/menubar.gif);

color:#ffffff;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size:10pt;

font-weight:Bold;

}

.NAV_DisabledGroupHeader

{

background-color:#6487dc;

background-image: url(images/menubar.gif);

color:#dddddd;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size:10pt;

font-weight:Bold;

cursor:default;

}

.NAV_Group

{

border-style:solid;

border-width:1px;

border-color:#6487dc;

background-color:#f5f5f5;

}

.NAV_DisabledItem

{

color:#a9a9a9;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size:8pt;

margin-top:5px;

padding-left:5px;

cursor:default;

}

.NAV_Item

{

color: Black;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size:8pt;

margin-top:5px;

padding-left:5px;

}

.NAV_ItemOver

{

color: Black;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size:8pt;

margin-top:5px;

padding-left:5px;

cursor:pointer; cursor:hand;

}

.NAV_ItemSelect

{

color: Black;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size:8pt;

font-weight:Bold;

margin-top:5px;

padding-left:5px;

}

.NAV_ItemTitle

{

color:Black;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size:8pt;

font-weight:Bold;

margin-top:5px;

padding-left:4px;

}

.embededHelp

{

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

}

/*copy right */

.text-copyright {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color: #ffffff;

text-transform: none;

}

.service-section {

BORDER-RIGHT: #b1b1b1 1px;

PADDING-RIGHT: 6px;

BORDER-TOP: #b1b1b1 1px;

PADDING-LEFT: 6px;

BACKGROUND-IMAGE: url(images/background_ice01.gif);

PADDING-BOTTOM: 6px;

BORDER-LEFT: #cfcfcf 1px;

PADDING-TOP: 6px;

BORDER-BOTTOM: #b1b1b1 1px solid

}

.service-section2 {

BORDER-RIGHT: #b1b1b1 1px;

PADDING-RIGHT: 6px;

BORDER-TOP: #b1b1b1 1px;

PADDING-LEFT: 6px;

BACKGROUND-IMAGE: url(images/background_ice04.gif);

PADDING-BOTTOM: 6px;

BORDER-LEFT: #cfcfcf 1px;

PADDING-TOP: 6px;

BORDER-BOTTOM: #b1b1b1 1px solid

}

.portal-service-column {

BORDER-TOP-WIDTH: 1px;

BACKGROUND-IMAGE: url(images/background_ice01.gif);

BORDER-BOTTOM-WIDTH: 1px;

BORDER-BOTTOM-COLOR: #b1b1b1;

BORDER-LEFT: #cfcfcf 1px solid;

BORDER-TOP-COLOR: #b1b1b1;

BORDER-RIGHT-WIDTH: 1px;

BORDER-RIGHT-COLOR: #b1b1b1

}

.portal-service-column2 {

BORDER-TOP-WIDTH: 1px;

BACKGROUND-IMAGE: url(images/background_ice04.gif);

BORDER-BOTTOM-WIDTH: 1px;

BORDER-BOTTOM-COLOR: #b1b1b1;

BORDER-LEFT: #cfcfcf 1px solid;

BORDER-TOP-COLOR: #b1b1b1;

BORDER-RIGHT-WIDTH: 1px;

BORDER-RIGHT-COLOR: #b1b1b1

}

.marketing-subhead2 {

FONT-WEIGHT: bold;

COLOR: #12347c;

FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif

}

.service-description {

FONT-SIZE: 10px;

FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif

}

.service-actions {

TEXT-ALIGN: right

}

.padding-stats {

padding-top: 2px;

padding-right: 5px;

padding-bottom: 2px;

padding-left: 5px;

background-color: #FFFFFF;

}

.header-stats {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

font-weight: bold;

color: #12347C;

text-transform: lowercase;

}

.header-dashboard-a { /* site portal - right aligned gradient, no font style */

background-color: #D7F2F9;

background-image: url(images/headerBackground_dashboard.jpg);

background-repeat: repeat-y;

height: 32px;

padding-left: 10px;

text-transform: lowercase;

background-position: right;

}

.header-dashboard-b { /* ISP - right aligned gradient, includes font style */

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

font-weight: bold;

color: #12347C;

background-color: #D7F2F9;

background-image: url(images/headerBackground_dashboard.jpg);

background-repeat: no-repeat;

height: 26px;

line-height: 24px;

padding-left: 10px;

text-transform: lowercase;

background-position: right;

}

.header { /* header title in portal header */

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 1em;

font-weight: bold;

color: #12347C;

padding-left: 5px;

text-transform: lowercase;

line-height: 18px;

}

.description { /* portal description text in header */

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 0.8em;

font-weight: normal;

color: #12347C;

padding-left: 5px;

text-transform: lowercase;

line-height: 18px;

}

.top-pad-site-header-icon { /* to align icons in the portal headers */

padding-top: 2px;

}

.chart-title-center{

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size:10px;

text-align:center;

}

.chart-title-left{

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size:10px;

padding-left:25px;

padding-top:20px;

}