/*  "Sky" Theme

$Revision: 19620 $
$Date: 2008-01-04 13:52:35 -0500 (Fri, 04 Jan 2008) $

The Sky theme is used for Storefront's sample site.
Differences from Storefront's Master Theme include a greater use of
bitmap-based area borders, and a bolder design not meant to be
compatible with other site headers or background colors.

You can use this CSS file as a model to create a new Theme which changes
the graphical appearance of your Pageflex Storefront site. By specifying
CSS properties for classes referenced by Storefront page elements you
can change the style of most site elements, including text, images, and
graphical areas.

In general, you should use CSS selectors for Storefront HTML elements which
have explicit class names. Do not use CSS selectors to refer to HTML
element IDs or to HTML elements without explicit class names, because
they may not work in the future when you upgrade to a newer Storefront
version.

Storefront's support for skinning aims to support changing appearance
but not layout. By using mostly table-based layouts we avoid a great
number of cross-browser issues.

*/



/**********************************************************************
 * General
 */

p, a, td {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #FFFFFF;
}

p, form {
   margin: 0;
}

input,select, option, textarea {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   margin-right: 3px;
   color: #000000;
}

td.basic {
   vertical-align: top;
}

/**********************************************************************
 * Entire Page
 */

body.page {
   margin: 0;
   background: #B70709;
}

td.pageContent {
   padding: 15px 20px 7px 20px;
}

img.pageMinimumWidth {
   width: 700px;
}

/**********************************************************************
 * Main Navigation Bar
 */

td.navBar {
   background: url(Images/NavBar.gif) repeat-x;
   height: 39px;
   padding-left: 20px;
   padding-bottom: 20px;
}

td.navBarLeft {
   font-size: 14px;
}

td.navBarRight {
   font-size: 12px;
}

td.navBarCell {
   vertical-align: top;
}

td.navBarSeparator {
   width: 3px;
}

div.navBarButton            {height: 39px; }

div.navBarButton-inner,
div.navBarButtonSelected-inner { 
   padding: 11px 10px 0 10px; 
}

a.navBarButton, 
a.navBarButtonRight, 
a.navBarButtonSelected,
div.navBarMessage {
   font-size: 14px;
   font-weight: bold;
   color: #FFFFFF;
   text-decoration: none;
   white-space: nowrap;
}

a.navBarButtonRight {
   font-size: 12px;
   color: #FFFFFF;
   padding-left: 16px;
}

div.navBarMessage {
   font-size: 12px;
   color: #FFFFFF;
}

a.navBarButton:hover {
   color: #FFCD02;
}

a.navBarButtonRight:hover {
   color: FFCD02;
}

a.navBarButtonSelected {
   color: #FFCD02;
}

/**********************************************************************
 * Areas
 *
 * Areas are major graphical regions surrounding page content. There are three kinds:
 *   Simple Area - bordered region with a title bar. (Example: Login page)
 *   List Area - adds optional icon, "comment" line, optional help link, full-width. (Example: Shopping Cart)
 *   Step Area - adds next/previous links and optional left-side step controls. (Example: checkout steps)
 *
 * Each area is composed of 3 or 4 horizontal slices:
 *   areaHeader:   title bar
 *   areaComment:  "comment" line
 *   area:         actual area content
 *   areaFooter 
 *
 * Each horizontal slice is built using 3 table cells. For example, the header:
 *   td.areaHeader-l:  the left edge of the header
 *   td.areaHeader  :  the content of the header
 *   td.areaHeader-r:  the right edge of the header
 * 
 * Most areas have flexible width, growing either to accommodate their
 * content or to fit the browser window. This flexibility is implemented in
 * many cases using a cell with width=100%, which can cause other cells to
 * shrink to zero width if you're not careful. If cells used for area edges
 * shrink to zero width, use "padding-left" rather than "width" to specify
 * their width.
 */

td.areaHeader-l { background: url(Images/AreaHeader-l.gif); width: 12px; height: 38px; }
td.areaHeader-r { background: url(Images/AreaHeader-r.gif); width: 12px; height: 38px; }
td.areaHeader   { background: url(Images/AreaHeader.gif) repeat-x; vertical-align: top; }

td.simpleAreaHeader-l { background: url(Images/SimpleAreaHeader-l.gif); width: 3px; height: 38px; }
td.simpleAreaHeader-r { background: url(Images/SimpleAreaHeader-r.gif); width: 3px; height: 38px; }
td.simpleAreaHeader   { background: url(Images/SimpleAreaHeader.gif) repeat-x; vertical-align: top; }

td.area-l { background: url(Images/Area-l.gif) repeat-y; width: 3px; }
td.area   { } /* unused style */
td.area-r { background: url(Images/Area-r.gif) repeat-y; width: 3px; }

img.area-l { width: 3px; }
img.area   { } /* unused style */
img.area-r { width: 3px; } /* otherwise cell may collapse with wide content */

td.areaComment-l { background: url(Images/AreaComment-l.gif) no-repeat bottom; width: 12px; }
td.areaComment   { } /* unused style */
td.areaComment-r { background: url(Images/AreaComment-r.gif) no-repeat bottom; width: 12px; }

td.areaComment {
   background: url(Images/AreaComment.gif) repeat-x bottom;
   padding: 3px 1px 7px 0; 
}

td.area {
   background: #B70709;
   padding: 13px 15px 13px 15px; 
}

td.stepArea {
   background: #B70709;
   padding: 11px 13px 11px 13px; 
}

td.areaFooter-l { background: url(Images/AreaFooter-l.gif); width: 3px; height: 27px; }
td.areaFooter-r { background: url(Images/AreaFooter-r.gif); width: 3px; height: 27px; }
td.areaFooter   { background: url(Images/AreaFooter.gif) repeat-x; vertical-align: top; }

td.stepAreaFooter-l { background: url(Images/StepAreaFooter-l.gif) #B70709; width: 3px; height: 60px; }
td.stepAreaFooter-r { background: url(Images/StepAreaFooter-r.gif) #B70709; width: 3px; height: 60px; }
td.stepAreaFooter   { background: url(Images/StepAreaFooter.gif)   #B70709 repeat-x;    height: 60px; vertical-align: top}

/* -----------------------------------------------------
 * Text styles for area header and "comment" lines
 */

div.areaTitle {
   padding: 12px 5px 0 15px;
   font-size: 15px;
   color: #FFCD02;
}

div.areaTitleLink {
   font-size: 12px;
   padding-top: 14px;
}

a.areaTitleLink, 
a.areaTitleLinkRollover {
   font-size: 12px;
   color: #FFFFFF;
   text-decoration: none;
   padding: 0 15px 0 5px;
}

a.areaTitleLinkRollover {
   color: #FFCD02;
   cursor: pointer;
}

div.areaComment, 
div.areaCommentRight {
   font-size: 10px;
   color: #FFFFFF;
   padding: 3px 15px 0 15px;
}

div.areaEmptyMessage {
   text-align: center;
   padding: 12px 0 16px 0;
}

/* -----------------------------------------------------
 * Area title icons
 */

div.areaIconCheckout        { background: url(Images/AreaIconCheckout.gif       ) no-repeat; width: 23px; height: 37px; }
div.areaIconOrders          { background: url(Images/AreaIconOrders.gif         ) no-repeat; width: 22px; height: 37px; }
div.areaIconEditDocument    { background: url(Images/AreaIconEditDocument.gif   ) no-repeat; width: 24px; height: 37px; }
div.areaIconHelp            { background: url(Images/AreaIconHelp.gif           ) no-repeat; width: 14px; height: 37px; }
div.areaIconLibrary         { background: url(Images/AreaIconLibrary.gif        ) no-repeat; width: 24px; height: 37px; }
div.areaIconProfile         { background: url(Images/AreaIconProfile.gif        ) no-repeat; width: 26px; height: 37px; }
div.areaIconShoppingCart    { background: url(Images/AreaIconShoppingCart.gif   ) no-repeat; width: 30px; height: 37px; }
div.areaIconStartDocument   { background: url(Images/AreaIconStartDocument.gif  ) no-repeat; width: 29px; height: 37px; }

/**********************************************************************
 * Step Area
 */

span.stepLabel {
   font-weight: bold;
}

span.currentStepIndicator {
   font-size: 10px;
   font-weight: bold;
   color: #FFFFFF;
   padding-left: 5px;
}

/* -----------------------------------------------------
 * Next/Previous controls
 */

div.stepAreaHeaderNextPrevControls,
div.stepAreaFooterNextPrevControls {
   border-style: none;
   border-color: #98dffc;
   border-width:  0px;
   background: url(Images/StepNextPrevBackground.gif) repeat-x;
}

td.stepNextPrevLabel {
   height: 25px;
   font-size: 9px;
   padding-top: 7px;
   vertical-align: Top;
}

a.stepNextPrevLabel, 
a.stepNextPrevLabelRollover {
   font-size: 9px;
   font-weight: bold;
   color: #FFFFFF;
   text-decoration: none;
   padding: 5px 5px 0px 5px;
}

a.stepNextPrevLabelRollover {
   color: #FFCD02;
   cursor: pointer;
}

td.areaGraphicNextStep,
td.areaGraphicNextStepRollover      { background: url(Images/StepNext.gif             ) no-repeat; height: 25px; width: 19px; }
td.areaGraphicPreviousStep,
td.areaGraphicPreviousStepRollover  { background: url(Images/StepPrevious.gif         ) no-repeat; height: 25px; width: 19px; }
td.areaGraphicNextPrevSeparatorLine { background: url(Images/StepNextPrevSeparator.gif) no-repeat; height: 25px; width:  1px; }

/**********************************************************************
 * Sidebars
 *
 * There are three kind of sidebar:
 *    Category sidebar (on the start page)
 *    Help sidebar (on the help page)
 *    Step Controls sidebar (on editing step and checkout step pages)
 * 
 * Here they are skinned similarly, but they have distinct classes
 * and so may be skinned differently.
 * 
 * Each sidebar is built like an area, with 3-cell slices for header, footer, and content.
 */



td.categorySidebarHeader-l, 
td.helpSidebarHeader-l, 
td.stepControlsHeader-l { 
   background: url(Images/CategorySidebarHeader-l.gif); 
   height: 38px; 
   padding-left: 19px; /* instead of width, to prevent collapse */
}

td.categorySidebarHeader-r, 
td.helpSidebarHeader-r, 
td.stepControlsHeader-r { 
   background: url(Images/CategorySidebarHeader-r.gif); 
   height: 38px; 
   padding-left: 18px; /* instead of width, to prevent collapse */
}

td.categorySidebarHeader, 
td.helpSidebarHeader, 
td.stepControlsHeader   { 
background: url(Images/CategorySidebarHeader.gif) repeat-x;
vertical-align: top;
}

td.categorySidebar-l, 
td.helpSidebar-l, 
td.stepControls-l { 
   background: url(Images/CategorySidebar-l.gif) repeat-y;
   padding-left: 19px; /* instead of width, to prevent collapse */
}

td.categorySidebar-r, 
td.helpSidebar-r, 
td.stepControls-r { 
   background: url(Images/CategorySidebar-r.gif) repeat-y;
   padding-left: 18px; /* instead of width, to prevent collapse */
}

td.categorySidebarFooter-l, 
td.helpSidebarFooter-l, 
td.stepControlsFooter-l { 
   background: url(Images/CategorySidebarFooter-l.gif);
   height: 44px;
   padding-left: 19px; /* instead of width, to prevent collapse */
}

td.categorySidebarFooter-r, 
td.helpSidebarFooter-r, 
td.stepControlsFooter-r { 
   background: url(Images/CategorySidebarFooter-r.gif);
   height: 44px;
   padding-left: 18px; /* instead of width, to prevent collapse */
}

td.categorySidebarFooter, 
td.helpSidebarFooter, 
td.stepControlsFooter { 
   background: url(Images/CategorySidebarFooter.gif) repeat-x;
   vertical-align: top;
}

div.categorySidebarTitle,
div.helpSidebarTitle,
div.stepControlsTitle {
   padding-top: 12px;
   font-size: 14px;
   font-weight: bold;
   color: #FFFFFF;
}

td.categorySidebar,
td.helpSidebar,
td.stepControls {
   background: #000000;
   vertical-align: top;
   padding-top: 14px;
   padding-bottom: 8px;
}

img.categorySidebarMarginRight { width: 20px; } /* margin separating category sidebar from product catalog */
img.helpSidebarMarginRight     { width: 20px; } /* margin separating help sidebar from help content */
img.stepControlsMarginRight    { width: 20px; } /* margin separating step controls from step area */

/* -----------------------------------------------------
 * Category sidebar - display and control selected catalog category
 *
 * Each category in the sidebar contains a categorySidebarLabel div and link.
 */

td.categorySidebarSearch {
   background: #000000;
   padding-top: 14px;
}

div.categorySidebarSearchTextBox {
   margin-bottom: 3px;
}

div.categorySidebarSearchTextBox input {
   width: 120px;
}

td.categorySidebarSearchRule-l { background: url(Images/CategorySidebarSearchRule-l.gif) repeat-y left ; width: 19px; }
td.categorySidebarSearchRule   { background: url(Images/CategorySidebarSearchRule.gif  ) repeat-x right; height: 3px; }
td.categorySidebarSearchRule-r { background: url(Images/CategorySidebarSearchRule-r.gif) repeat-y right; width: 18px; }

td.categorySidebarLabel, 
td.categorySidebarLabelSelected {
   font-size: 14px;
   padding: 4px 8px 3px 0; /* see e.g. categorySidebarLabelLevel1 for padding-left */
}

td.categorySidebarLabelSelected {
   background: #000000;
}

td.categorySidebarLabelLevel1 { padding-left: 10px; }
td.categorySidebarLabelLevel2 { padding-left: 35px; background-image: url(Images/CategorySidebarArrow.gif); background-repeat: no-repeat; background-position: 22px 8px; }
td.categorySidebarLabelLevel3 { padding-left: 50px; background-image: url(Images/CategorySidebarArrow.gif); background-repeat: no-repeat; background-position: 37px 8px; }
td.categorySidebarLabelLevel4 { padding-left: 65px; background-image: url(Images/CategorySidebarArrow.gif); background-repeat: no-repeat; background-position: 52px 8px; }

a.categorySidebarLabel, 
a.categorySidebarLabelSelected {
   font-size: 14px;
   color: #43419f;
   text-decoration: none;
   white-space: nowrap;
}

a.categorySidebarLabelLevel1 { color: #FFFFFF; }
a.categorySidebarLabelLevel2 { font-size: 12px; }
a.categorySidebarLabelLevel3 { font-size: 12px; }
a.categorySidebarLabelLevel4 { font-size: 12px; }

a.categorySidebarLabel:hover {
   color: #FFCD02;
   text-decoration: none;
}

a.categorySidebarLabelSelected {
   color: #FFCD02;
}
 
/* -----------------------------------------------------
 * Help sidebar - display and change selected help topic
 *
 * Each help topic in the sidebar contains a helpTopic cell and link.
 */

td.helpTopic,
td.helpTopicSelected {
   font-size: 11px;
   padding: 1px 8px 3px 0;
}

td.helpTopicSelected {
   background: #000000;
}

td.helpTopicLevel1 { padding-left:  8px; }
td.helpTopicLevel2 { padding-left: 20px; }
td.helpTopicLevel3 { padding-left: 32px; }

a.helpTopic, 
a.helpTopicSelected {
   font-size: 11px;
   color: #FFCD02;
   text-decoration: none;
   white-space: nowrap;
}

a.helpTopic:hover {
   color: #FFCD02;
   text-decoration: underline;
}

a.helpTopicSelected {
   color: #FFCD02;
}

a.helpTopicLevel1 {
   font-weight: bold;
}

/* -----------------------------------------------------
 * Step controls - Left "sidebar" to display and control steps of editing or checkout
 * 
 * Built as a sequence of stepControl cells, each containing
 * a stepControlNumber and a stepControlLabel link.
 */

td.stepControl {
   background: #000000;
   vertical-align: top;
   padding: 3px 0 16px 0;
}

td.stepControlNumber, 
td.stepControlNumberRollover, 
td.stepControlNumberSelected {
   font-size: 17px;
   font-weight: bold;
   background: url(Images/StepControlNumberBackground.gif);
   width: 30px;
   height:  30px;
   color: #FFFFFF;
   padding: 1px 10px 0 11px;
}

td.stepControlNumberRollover, 
td.stepControlNumberSelected {
   background: url(Images/StepControlNumberBackgroundSelected.gif);
   color: #FFCD02;
}

td.stepControlLabel, 
td.stepControlLabelRollover, 
td.stepControlLabelSelected {
   font-size: 14px;
   padding: 6px 10px 4px 8px;
}

td.stepControlLabelRollover,
td.stepControlLabelSelected {
   background: #000000;
}

a.stepControlLabel, 
a.stepControlLabelSelected {
   font-size: 14px;
   font-weight: bold;
   color: #FFFFFF;
   text-decoration: none;
   white-space: nowrap;
}

a.stepControlLabelSelected {
   color: #FFCD02;
}

a.stepControlLabel:hover, 
a.stepControlLabelSelected:hover {
   color: #FFCD02;
}

/**********************************************************************
 * Start page
 */

div.poweredByPageflex {
   Display:none;
}

div.viewSwitcher {
   font-size: 10px;
   padding: 3px 15px 0 0;
}

a.viewSwitcher, 
a.viewSwitcher:hover {
   font-size: 10px;
   color: #FFFFFF;
   text-decoration: underline;
   white-space: nowrap;
   cursor: pointer;
}

a.viewSwitcher:hover {
   text-decoration: underline;
   color: #FFCD02;
}

div.categoryPath {
   padding-bottom: 9px;
}

div.categoryPath a {
   font-size: 17px;
   color: #FFFFFF;
   text-decoration: none;
}

div.categoryPath a:hover {
   color: #FFCD02;
   text-decoration: none;
}

/**********************************************************************
 * Catalog cells
 */

div.catalogItemOuter,
div.catalogFolderOuter {
   margin: 0px 15px 15px 0px;
}

td.catalogItemHeader-l { background: url(Images/CatalogItemHeader-l.gif) no-repeat; padding-left: 8px; height: 8px; }
td.catalogItemHeader   { background: url(Images/CatalogItemHeader.gif  ) repeat-x ;                     height: 8px; }
td.catalogItemHeader-r { background: url(Images/CatalogItemHeader-r.gif) no-repeat; padding-left: 8px; height: 8px; }
td.catalogFolderHeader-l { background: url(Images/CatalogFolderHeader-l.gif) no-repeat; padding-left: 8px; height: 8px; }
td.catalogFolderHeader   { background: url(Images/CatalogFolderHeader.gif  ) repeat-x ;                     height: 8px; }
td.catalogFolderHeader-r { background: url(Images/CatalogFolderHeader-r.gif) no-repeat; padding-left: 8px; height: 8px; }

td.catalogItem-l { background: url(Images/catalogItem-l.gif) repeat-y; padding-left: 8px; }
td.catalogItem-r { background: url(Images/catalogItem-r.gif) repeat-y; padding-left: 8px; }
td.catalogFolder-l { background: url(Images/CatalogFolder-l.gif) repeat-y; padding-left: 8px; }
td.catalogFolder-r { background: url(Images/CatalogFolder-r.gif) repeat-y; padding-left: 8px; }

td.catalogItemRule-l { background: url(Images/CatalogItemRule-l.gif) repeat-y; padding-left: 12px; height: 6px; }
td.catalogItemRule { background: url(Images/CatalogItemRule.gif  ) repeat-x;                     height: 6px; }
td.catalogItemRule-r { background: url(Images/CatalogItemRule-r.gif) repeat-y; padding-left: 12px; height: 6px; }
td.catalogFolderRule-l { background: url(Images/CatalogFolderRule-l.gif) repeat-y; padding-left: 8px; height: 6px; }
td.catalogFolderRule   { background: url(Images/CatalogFolderRule.gif  ) repeat-x;                     height: 6px; }
td.catalogFolderRule-r { background: url(Images/CatalogFolderRule-r.gif) repeat-y; padding-left: 8px; height: 6px; }

td.catalogItemFooter-l { background: url(Images/CatalogItemFooter-l.gif) no-repeat bottom; padding-left: 12px; }
td.catalogItemFooter   { background: url(Images/CatalogItemFooter.gif  ) repeat-x  bottom; vertical-align:top;                    }
td.catalogItemFooter-r { background: url(Images/CatalogItemFooter-r.gif) no-repeat bottom; padding-left: 12px; }
td.catalogFolderFooter-l { background: url(Images/CatalogFolderFooter-l.gif) no-repeat bottom; padding-left: 8px; }
td.catalogFolderFooter   { background: url(Images/CatalogFolderFooter.gif  ) repeat-x  bottom; vertical-align:top; }
td.catalogFolderFooter-r { background: url(Images/CatalogFolderFooter-r.gif) no-repeat bottom; padding-left: 8px; }

td.catalogItem {
   background: #FFFFFF;
   height: 158px;
   text-align: center;
   padding: 2px 0 6px 0;
}
td.catalogFolder {
   background: #FFFFFF;
   height: 130px;
   text-align: center;
   padding: 2px 0 0px 0;
}

img.catalogThumbnail {
   border: 0px;
}

div.catalogItemFooter,
div.catalogFolderFooter {
   text-align: center;
   width: 162px;
   padding: 3px 0 4px 0;
   margin : 0 auto;
}

a.catalogItemFooter, 
a.catalogItemFooter:hover {
   font-size: 11px;
   color: #FFCD02;
   text-decoration: none;
   width: 162px;
}
a.catalogFolderFooter, 
a.catalogFolderFooter:hover {
   font-size: 11px;
   color: #FFFFFF;
   text-decoration: none;
   width: 162px;
}

a.catalogItemFooter:hover {
   text-decoration: none;
   color: #FFCD02;
}
a.catalogFolderFooter:hover {
   text-decoration: none;
   color: #FFCD02;
}

/**********************************************************************
 * Catalog rows
 */

tr.catalogRow {
}

div.catalogRowThumbnail {
   float:right;
   margin-bottom: 12px;
}

img.catalogRowThumbnail {
   border: 1px solid black;
}

div.catalogRowHeadline {
   text-align: left;
   font-weight: bold;
}

div.catalogRowDescription {
   text-align:left;
}

div.catalogFolderIcon {
   background: url(Images/CatalogFolderIcon.gif) no-repeat;
   height: 18px;
   padding-left: 22px;
}

/**********************************************************************
 * Buttons
 */

div.siteButton   { background: url(Images/button.gif  ) repeat-x       ; font-size: 10px; margin: 3px 10px 2px 0; }
div.siteButton-l { background: url(Images/button-l.gif) no-repeat top left ; }
div.siteButton-r { background: url(Images/button-r.gif) no-repeat top right; }
div.siteButton-inner { padding: 4px 8px 4px 8px; }

div.smallButton   { background: url(Images/button.gif  ) repeat-x       ; font-size: 10px; margin: 3px 10px 2px 0; }
div.smallButton-l { background: url(Images/button-l.gif) no-repeat top left ; }
div.smallButton-r { background: url(Images/button-r.gif) no-repeat top right; }
div.smallButton-inner { padding: 4px 8px 4px 8px; }

div.searchButton   { background: url(Images/SearchButton.gif  ) repeat-x       ; font-size: 10px;}
div.searchButton-l { background: url(Images/SearchButton-l.gif) no-repeat top left ; }
div.searchButton-r { background: url(Images/SearchButton-r.gif) no-repeat top right; }
div.searchButton-inner { padding: 5px 8px 5px 8px; }

a.siteButton, 
a.siteButton:hover,
a.smallButton, 
a.smallButton:hover,
a.searchButton, 
a.searchButton:hover {
   font-size: 10px;
   font-weight: bold;
   color: #FFFFFF;
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
}

a.siteButton:hover,
a.smallButton:hover,
a.searchButton:hover {
   color: #FFCD02;
}

p.endOfButtons {
   clear: both;
   margin: 0;
   font-size: 0;
}

/**********************************************************************
 *  Warning Area
 */

td.warningAreaInlineInfo,
td.warningAreaInlineWarning {
   background: #fcecec;
   border: 1px solid #da9090;
   padding: 14px 14px 14px 14px;

}
td.warningAreaInlineInfo {
   background: #eaf9e5;
   border: 1px solid #afd4a9;
}

td.warningIconWarning { background: url(Images/IconWarning.gif) no-repeat left top; width: 39px; padding-left: 51px; height: 45px; }
td.warningIconInfo    { background: url(Images/IconInfo.gif   ) no-repeat left center; width: 38px; padding-left: 30px; height: 17px; }

div.warningAreaMessageInfo,
div.warningAreaMessageWarning {
   font-weight: bold;
   font-size: 13px;
   color: #b46d6d;
   vertical-align:middle;
   margin-left: 25px;
}
div.warningAreaMessageWarning p {
   color: #b46d6d;
}

div.warningAreaMessageInfo {
   color: #658841;
}

#StepArea_warningPay a.siteLink{
   color: Yellow;
}

/**********************************************************************
 * Classes for particular site pages
 */

/* -----------------------------------------------------
 * Login page
 */

td.loginExistingUsers {
   vertical-align: top;
   padding-right: 20px;
}

td.loginNewUsers {
   vertical-align: top;
   border-left: 1px solid #000000;
   padding-left: 20px;
}

div.loginSubhead {
   font-weight: bold;
}

/* -----------------------------------------------------
 * Form Filling
 */

td.formFilling-form {
   vertical-align: top;
}

img.formMinWidth {
   height: 1px;
   width: 300px;
}

td.formFilling-preview {
   vertical-align: top;
   width: 100%;
   text-align: center;
   padding-left: 2px;
}

td.previewButtonFirst    { background: url(Images/PreviewButtonFirst.gif   ) no-repeat; }
td.previewButtonPrevious { background: url(Images/PreviewButtonPrevious.gif) no-repeat; }
td.previewButtonNext     { background: url(Images/PreviewButtonNext.gif    ) no-repeat; }
td.previewButtonLast     { background: url(Images/PreviewButtonLast.gif    ) no-repeat; }

img.previewButtonSizer {
   width: 24px;
   height: 22px;
   border: none;
   display: block;
   margin-right: 4px;
}

div.previewPageNumberText {
   padding: 1px 7px 0px 3px;
}

span.previewWaitMessage {
}

img.formFillingPreview {
   border: 1px solid #000000;
}

/* -----------------------------------------------------
 * Printing Options
 */

td.childAreaHeader-l { background: url(Images/ChildAreaHeader-l.gif); width: 12px; height: 15px; }
td.childAreaHeader-r { background: url(Images/ChildAreaHeader-r.gif); width: 12px; height: 15px; }
td.childAreaHeader   { background: url(Images/ChildAreaHeader.gif) repeat-x; }

td.childArea-l { background: url(Images/ChildArea-l.gif) repeat-y; width: 3px; }
td.childArea-r { background: url(Images/ChildArea-r.gif) repeat-y; width: 3px; }

td.childArea {
   background: url(Images/ChildArea.gif);
   padding: 13px 15px 18px 15px; 
}

td.childAreaFooter-l { background: url(Images/ChildAreaFooter-l.gif); width: 12px; height: 8px; }
td.childAreaFooter-r { background: url(Images/ChildAreaFooter-r.gif); width: 12px; height: 8px; }
td.childAreaFooter   { background: url(Images/ChildAreaFooter.gif) repeat-x; }

div.priceEstimate {
}

/* -----------------------------------------------------
 * Order summary page
 */

td.orderSummaryCell {
   border: 1px solid #000000;
   padding: 4px 0 4px 8px;
}

/* -----------------------------------------------------
 * AssetCell
 * For "My Library" and the "Select Image" page (via "Form Filling" page)
 */



td.assetThumbnail {  /* for "Select Image" page */
   background: #f5e7ef;
   height: 120px; 
   width: 150px; 
   text-align: center;
   padding-top: 20px;
   border-top: 1px solid #C880B0;
   border-left: 1px solid #C880B0;
   border-right: 1px solid #C880B0;
}

td.assetThumbnailWithOptions {  /* for "My Library" */
   background: #f5e7ef;
   height: 115px; 
   padding: 15px 0 0 15px;
   border-top: 1px solid #C880B0;
   border-left: 1px solid #C880B0;
}

img.assetThumbnail {
   border: 0;
   vertical-align: top;
}

td.assetOptions {
   background: #f5e7ef;
   padding: 0 10px 0 10px;
   border-top: 1px solid #C880B0;
   border-right: 1px solid #C880B0;
}

td.assetCaption {
   background: #f5e7ef;
   height: 30px; 
   font-size: 10px;
   text-align: left;
   padding: 0 6px 0 15px;
   border-bottom: 1px solid #C880B0;
   border-left: 1px solid #C880B0;
   border-right: 1px solid #C880B0;
}

span.assetCaption,
a.assetCaption,
a.assetCaption:hover {
   font-size: 10px;
   color: #8b5074;
   text-decoration: none;
}

a.assetCaption:hover {
   text-decoration: underline;
   color: #FFCD02;
}

/**********************************************************************
 * Common classes for content inside areas
 */

div.block {
   padding-bottom: 10px;
}

div.subhead {
   font-weight: bold;
   padding-bottom: 3px;
}

span.subheadDetail {
   font-weight: normal;
}

a.siteLink {
   color: #B70709;
}

span.tip
{
   font-weight: normal;
   font-style: italic;
   color: #FFFFFF;
}

/* -----------------------------------------------------
 * Forms
 */

div.fieldLabel {
}

div.textField {
   padding-bottom: 2px;
}

input.textField {
   width: 225px;
}

div.fieldSpacer {   /* for editable form fields */
   margin-top: 2px;
}

td.fieldHeader {
   vertical-align: top;
   font-weight: bold;
   padding: 12px 0 3px 0;
}

td.fieldCell {      /* for read-only form fields */
   vertical-align: top;
   padding: 0 15px 3px 0;
}

select.multiSelectIncludeBox {
   margin-bottom: 3px;
}

p.error, span.error {
   color: Yellow;
}

.validationError {
   display: block;
   color: Yellow;
   font-weight: bold;
}

/* -----------------------------------------------------
 * Final step warnings
 */

div.finalStepWarningsHeader {
   font-weight: bold;
}

div.finalStepWarningsFooter {
   font-size: 10px;
   padding: 10px 0 5px 20px;
}

/* -----------------------------------------------------
 * Tables of orders and items
 */

table.itemTable,
td.itemTable,
td.itemTableHeader {
   background: #FFFFFF;
   border: 1px solid #000000;
   padding: 5px;
}

table.itemTable,
td.itemTable,
td.itemTableHeader p{
   color: #000000;
}

td.itemTableHeader {
   background: #666666;
   font-size: 13px;
   font-weight: bold;
   color: #ffffff;
}

td.itemTable-Thumbnail {
   background: #FFFFFF;
   text-align: center;
   height: 112px;
}

img.itemTableThumbnail {
   border: 1px solid white;
}

td.itemTable-Id {
   font-size: 12px;
}

td.itemTable-Description,
td.itemTable-Options {
   font-size: 11px;
   color: #000000;
}

td.itemTable-Product {
   font-size: 11px;
   font-weight: bold;
}

td.itemTable-Date {
   font-size: 12px;
   font-weight: bold;
   color: #B70709;
}

td.itemTable-Price {
   white-space: nowrap;
   font-size: 14px;
   font-weight: bold;
   text-align: right;
}

td.itemTable-Price p{
   color: #000000;
}

td.itemTableSummary {
   Display: none;
   text-align: right;
   padding: 5px 5px 0 0;
}

td.itemTableSummaryRule {
   Display: none;
   border-bottom: 1px solid #000000;
   line-height: 3px;
}

td.itemTableSummaryLine {
   Display: none;
   font-size: 14px;
   font-weight: bold;
   color: #FFFFFF;
   padding-top: 3px;
}

p.itemTableLabelWithIcon {
   color:#000000;
   text-indent: -23px;
   margin-left: 23px; 
}

/* -----------------------------------------------------
 * Tables
 */

td.dataListChoicesHeader,
td.dataListChoices {
   border-bottom: 1px solid #000000;
   padding: 0 15px 2px 0;
}

td.dataListChoicesHeader {
   font-weight: bold;
}

td.simpleTableHeader {
   font-weight: bold;
   padding: 0 15px 2px 0;
}

td.simpleTable {
   padding: 0 15px 2px 0;
}

/* -----------------------------------------------------
* 7.0 add ons
*/

td.simpleAreaHeaderPopup { 
	background: url(Images/AreaHeader.gif) repeat-x;
	vertical-align: top; 
	padding-top: 4px; 
    padding-bottom: 4px;
}

td.dxpcControl_custom {
    border-left-color: ;
    border-left-width: 3px;
    border-left-style: none;
    border-right-color: ;
    border-right-width: 3px;
    border-right-style: none;
    border-bottom-color: ;
    border-bottom-width: 3px;
    border-bottom-style: none;
}

td.popupArea {
    background: #B70709;
    padding: 13px 15px 10px 15px;
}

td.areaTitlePopup {
    font-weight: bold;
    font-size: 13px;
    color: black;
    padding: 2px 7px 2px 1px;
}

div.pcModalBackground {
    background-color: #777777;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(Style=0, Opacity=70);
}

div.assetThumbnail{
	width: 150px;
}

div.assetCaption{
    width: 129px;
    height: 22px;
    padding-top:7px;
    overflow:hidden;
    white-space: nowrap;
}

a.PagerPage{
    text-decoration:none;
    color:inherit;
}

span.PagerSelectedPage{
    font-weight:bold;
}

div.siteButtonBlock{
    float:right;
    margin-right:-4px;
}

div.block input[type=file]{
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
}