/*
    Copyright (c) 1996-2001 Ariba, Inc.
    All rights reserved. Patents pending.

    $Id: //ariba/platform/ui/release/toolkit/1.23.2+/resource/webserver/en_US/uitk/ariba.css#3 $
    
    Responsible: mrobertson 09.10.2001
*/

/**
    This file defines the core set of CSS styles used by all Ariba applications.
    Underlying these styles are certain principles which tie together the common
    elements of a given customer brand, i.e. type, colors, etc.  The following
    distinct colors are used throughout the styles below and should be kept in
    sync as changes are made (i.e. all uses of a given color should be replaced
    with the same color value):

      color                default
      -----------------    -------
      brand - light        #CCCCFF
      brand - medium       #9999CC
      brand - dark         #666699
      brand - very dark    #333366
      brand - accent       #FFFFCC

      gray - very light    #EEEEEE
      gray - light         #CCCCCC
      gray - medium        #999999
      gray - dark          #666666

    Due to how the medium brand color is combined with other colors and text,
    this color should be chosen such that both white and black text is
    readable over it.

    For internal application developers, there are pages provided by the UCDG
    which show annotated examples of each of the styles below.  Visit
    http://ucdg/Projects/Visual_Design_pss/css_examples/css1.htm and click
    through each image to see the style notes.
*/

/*============================= HTML Selectors =============================*/

/**
    Styles in this section set the default attributes for the most commonly
    used HTML tags.  In most recent browser/platform combinations, these
    attributes will be inheritted by all elements contained within the given
    HTML tag.  In some cases, a more specific class-based style will override
    one or more elements of these selector styles (e.g. .tableHead).
*/
    
BODY {
    background-color: #ffffff;
    color: #000000;
    font-size: 8pt;
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

TD {
    color: #000000;
    font-size: 8pt;
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

INPUT {
    color: #000000;
    font-size: 8pt;
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

SELECT {
    color: #000000;
    font-size: 8pt;
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

TEXTAREA {
    color: #000000;
    font-size: 8pt;
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

A:link {
    color: #CCCCCC;
    text-decoration: none;
}

A:visited {
    color: #CCCCCC;
    text-decoration: none;
}


A:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

/*=========================== Class-Based Styles ===========================*/

/**
    Styles in this section are class-based and can be associtaed with an HTML
   	element using the 'class' tag attribute.  The HTML selector styles above
    will still provide default style values, but these class-based styles may
    override certain style elements as appropriate.
*/

/*---------------------------- Branding Colors -----------------------------*/

/**
    Styles in this sub-section set background colors to values within the
    branding palette or neutral grays.  In most cases, more specific styles
    exist to set background color and related attributes.  The styles below
    should only be used if no other appropriate style exists.
*/

/** Brand Color - Light */
.brandLt {
    background: #CCCCFF;
}

/** Brand Color - Medium */
.brandMd {
    background: #9999CC;
}

/** Brand Color - Dark */
.brandDk {
    background: #666699;
}

/** Brand Color - Very Dark */
.brandVeryDk {
    background: #333366;
}

/** Brand Color - Accent */
.brandAccent {
    background: #FFFFCC;
}

/** Gray - Very Light */
.grayVeryLt {
    background: #EEEEEE;
}

/** Gray - Light */
.grayLt {
    background: #CCCCCC;
}

/** Gray - Medium */
.grayMd {
    background: #999999;
}

/** Gray - Dark */
.grayDk {
    background: #666666;
}

/**
    Brand Text - Light Color.  Typically applied to hyphen-separators between
    form action buttons.
*/
.brandLtText {
    color: #999999;
    font-size: 8pt;
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/**
    Brand Text - Dark Color.  Typically applied to descriptive text
    within a page.
*/
.brandDkText {
    color: #666699;
    font-size: 8pt;
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.brandVeryDkText {
    color: #333366;
    font-size: 8pt;
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/*-------------------------------- Headers ---------------------------------*/

/** Page Heading */
.pageHead {
    color: #999999;
    font-size: 14pt;
    font-weight: bold;
    font-family: Arial, Verdana, Helvetica, sans-serif;
}

/** Page Sub-Heading */
.pageSubHead {
    color: #999999;
    font-size: 10pt;
    font-weight: bold;
    font-family: Arial, Verdana, Helvetica, sans-serif;
}

/** Section Heading */
.sectionHead {
    color: #666699;
    font-size: 10pt;
    font-weight: bold;
    font-family: Arial, Verdana, Helvetica, sans-serif;
}

/** Section Heading Line */
.sectionHeadLine {
    background: #9999CC;
}

/*------------------------------ Generic Text ------------------------------*/

/**
    Body Text - should only be necessary for places where the HTML selector
    styles don't get picked up (which would be a browser bug).
*/
.body {
    color: #000000;
    font-size: 8pt;
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/**
    Fine Print - should be used for very small copy.  Arial is more condensed
    than Verdana (from the HTML selectors).
*/
.fine {
    color: #000000;
    font-size: 8pt;
    font-weight: normal;
    font-family: Arial, Verdana, Helvetica, sans-serif;
}

/**
    Body Text - Bold - long runs of bold copy can be hard to read, but this
    class exists to handle potential blocks of bold text.
*/
.bodyBold {
    color: #000000;
    font-size: 8pt;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/**
    Body Text - Reversed - white text against a background that's set by the
    enclosing HTML tag.
*/
.bodyRev {
    color: #FFFFFF;
    font-size: 8pt;
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/**
    Body Text - Bold/Reversed - bold white text against a background that's
    set by the enclosing HTML tag.
*/
.bodyBoldRev {
    color: #FFFFFF;
    font-size: 8pt;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/** Disabled Text */
.disabled {
    color: #999999;
    font-size: 8pt;
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/**
    Big Body Text - A larger text class for potential visual differentiation
    from the default body style.
*/
.bigBody {
    color: #000000;
    font-size: 10pt;
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/**
    Big Body Text - Bold - A larger, bold text class for potential visual
    differentiation from the bodyBold style.
*/
.bigBodyBold {
    color: #000000;
    font-size: 10pt;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/**
    Big Body Text - Reversed - A larger white text class for potential visual
    differentiation from the bodyRev style.
*/
.bigBodyRev {
    color: #FFFFFF;
    font-size: 10pt;
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/**
    Big Body Text - Bold/Reversed - A larger, bold white text class for
    potential visual differentiation from the bodyBoldRev style.
*/
.bigBodyBoldRev {
    color: #FFFFFF;
    font-size: 10pt;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/** Error Messages */
.error {
    color: #FF0000;
    font-size: 8pt;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/** Inline Hint Text */
.hint {
    color: #333366;
    background: #EEEEEE;
    font-size: 8pt;
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/** Note */
.note {
    color: #000000;
    font-size: 8pt;
    font-weight: normal;
    font-style: italic;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/** Footer */
.footer {
    color: #666666;
    font-size: 8pt;
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/*-------------------------- Multi-Column Tables ---------------------------*/

/** Table Header Text */
.tableHead {
    color: #000000;
    background: #FFFFFF;
    font-size: 8pt;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/** Table Row - Odd */
.tableRow1 {
    color: #000000;
    background: #EEEEEE;
    font-size: 8pt;
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/** Table Row - Even */
.tableRow2 {
    color: #000000;
    background: #FFFFFF;
    font-size: 8pt;
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/** Table Summary */
.tableSummary {
    color: #000000;
    background: #FFFFCC;
    font-size: 8pt;
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/** Table Selection Line */
.tableLine {
    background: #9999CC;
}

/*-------------------------------- Masthead --------------------------------*/

/** Masthead Command */
.mastCmd {
    color: #CCCCCC;
    background: #000000;
    text-decoration: none;
    font-size: 8pt;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/** Masthead Command - Rollover */
.mastCmdRollover {
    color: #FFFFFF;
    background: #000000;
    text-decoration: none;
    font-size: 8pt;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/*--------------------------- Table of Contents ----------------------------*/

/** TOC Title */
.tocTitle {
    color: #666666;
    background: #CCCCCC;
    font-size: 8pt;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/** TOC Item */
.tocItem {
    color: #000000;
    background: #CCCCCC;
    font-size: 8pt;
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/** TOC Item - Rollover */
.tocItemRollover {
    color: #000000;
    background: #EEEEEE;
    font-size: 8pt;
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/** TOC Item - Current */
.tocItemCurrent {
    color: #000000;
    background: #FFFFCC;
    font-size: 8pt;
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/** TOC Background */
.tocBg {
    background: #CCCCCC;
}

/*-------------------------------- Wizards ---------------------------------*/

/** Wizard Navigation Bar */
.wizNavBar {
    background: #9999CC;
}

/** Wizard Sub-Step */
/*  Rebranders: do not add a foreground color attribute to this style, this will result in background color problems in Netscape 4  */
.wizSubstep {
    background: #FFFFFF;
    font-size: 8pt;
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/** Wizard Sub-Step - Current */
/*  Rebranders: do not add a foreground color attribute to this style, this will result in background color problems in Netscape 4  */
.wizSubstepCurrent {
    background: #FFFFCC;
    font-size: 8pt;
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/** Wizard Selections Link */
.wizSelectionsLink {
    color: #000000;
    font-size: 8pt;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}


/*------------------------------ TabSet Text -------------------------------*/

/** TabSet Text */
.tabText {
    color: #000000;
    text-decoration: none;
    font-size: 8pt;
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/*------------------------------ Online Help -------------------------------*/

/** Help Body Text  */
.helpBody {
    color: #000000;
    font-size: 8pt;
    font-weight: normal;
    font-family: Arial, Verdana, Helvetica, sans-serif;
}

/** Help Body Text, single-spaced  */
.helpBodySingleSpaced {
    color: #000000;
    font-size: 8pt;
    font-weight: normal;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    margin-bottom: 0pt; 
    margin-top: 0pt
}

/** Help List Padded  */
.helpListPad {
    color: #000000;
    font-size: 8pt;
    font-weight: normal;
    font-family: Arial, Verdana, Helvetica, sans-serif; 
    margin-top: 8pt;
}

/** Help Page Title */
.helpPageTitle {
    color: #EEEEEE;
    font-size: 10pt;
    font-weight: bold;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    background-color: #666699; 
    border-style: none;
}

/** Help Section Title - tips, questions, etc. */
.helpSectionTitle {
    color: #333366;
    font-size: 9pt;
    font-weight: bold;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    border-color: #666699 #CCCCCC; 
    background-color: #CCCCCC; 
    border-style: solid; 
    border-top-width: 1px; 
    border-right-width: 0px; 
    border-bottom-width: 1px; 
    border-left-width: 0px;
}

/** Help Topic Title  */
.helpTopicTitle {
    color: #333366;
    background: #EEEEEE;
    font-size: 9pt;
    font-weight: bold;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    border-color: #666699 #CCCCCC; 
    border-style: solid; 
    border-top-width: 1px; 
    border-right-width: 0px; 
    border-bottom-width: 1px; 
    border-left-width: 0px;
}

/*------------------------------ Approval Flow  -------------------------------*/

/* Approval Request Active */
.apvActive {
    background: #CCCCFF;
}

/* Approval Request Approved */
.apvApproved {
    background: #99CC66;
}

/* Approval Request Denied */
.apvDenied {
    background: #FFCC66;
}

/* Approval Request Optional */
.apvOptional {
    background: #FFFFFF;
}

/* Approval Request Pending */
.apvPending {
    background: #CCCCCC;
}