/*  "Graphite" Theme

$Revision: 16809 $
$Date: 2007-08-03 10:10:46 -0400 (Fri, 03 Aug 2007) $

*/



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

p, a, td, input, textarea, select, option {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #004783;
	text-decoration: none;
}

p, form {
   margin: 0;
}

input {
   /*margin-right: 3px;*/
}

td.basic {
   vertical-align: top;
}

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

body.page {
   margin: 0;
   padding-left: 20px;
   padding-right: 20px;
   background: white;
   color: #004783;
}

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

img.pageMinimumWidth {
   width: 700px;
}

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

td.navBar {
   width: 100%;
   background: url(Images/navbar_bg.jpg) repeat-x;
   height: 56px;
   padding: 0 0px 0 0px;
}

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

td.navBarRight {
   font-size: 12px;
   padding-right: 20px;
   height: 56px;
}

td.navBarCell {
   vertical-align: top;
   clear:both;
}

td.NavBarSeparator {
   width: 0px;
   padding:0; 
   margin: 0;
}

div.navBarButton,
div.navBarButtonSelected {
   text-transform:uppercase;
   height:56px;
}

div.navBarButton            { }
div.navBarButtonSelected    { }

div.navBarButton-inner {
  padding: 20px 30px 0px 13px;
}
div.navBarButtonSelected-inner {
  padding: 20px 30px 0px 13px;
}

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

a.navBarButtonRight {
   font-size: 12px;
   color: #004783;
   font-weight: bold;
   text-decoration: none;
   padding-left: 16px;
}

div.navBarMessage {
   font-size: 12px;
   font-weight: bold;
   color: #004783;
   padding: 0px 3px 0px 3px;
}

a.navBarButton:hover {color: #0098df;}
a.navBarButtonSelected {color: #0098df;}
a.navBarButtonRight:hover {
   color: #0098df;
}

/**********************************************************************
 * 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 { }
td.areaHeader-r { }
td.areaHeader   { background: #0098df; height: 44px;
border:1px solid #d0d0d0;
                  vertical-align: middle; 
                  padding: 2px 0px 5px 0px;
                  width:100%;
}

td.simpleAreaHeader-l { border-left:1px solid #d0d0d0; height: 44px; }
td.simpleAreaHeader-r { border-right:1px solid #d0d0d0; height: 44px; }
td.simpleAreaHeader   { background: #0098df; 
border-top:1px solid #d0d0d0;
                  vertical-align: middle;  
                  padding: 2px 1px 5px 0;
}

td.area-l { border-left:1px solid #d0d0d0; width:20px; } 
td.area-r { border-right:1px solid #d0d0d0; width:20px; }

img.area-l {  }
img.area-r {  } /* otherwise cell may collapse with wide content */

td.areaComment-l { }
td.areaComment-r { }

td.areaComment {
   border-left:1px solid #d0d0d0;
   border-right:1px solid #d0d0d0;
   background: #ffffff;
   height: 33px;
   width: 100%;
   padding: 6px 20px 6px 20;
}

td.area {
   background: #ffffff;
   padding: 11px 0px 11px 0px; 
}

td.stepArea {
   background: #ffffff;
   padding: 10px 0px 10px 0px; 
}
td.popupArea {
   background: #ffffff;
   padding: 13px 15px 3px 15px;   
}

td.areaFooter-l { }
td.areaFooter-r { }
td.areaFooter   { border-bottom:1px solid #d0d0d0; width:100%; }


td.stepAreaFooter-l { }
td.stepAreaFooter-r { }
td.stepAreaFooter   { border-left:1px solid #d0d0d0; border-right:1px solid #d0d0d0; border-bottom:1px solid #d0d0d0; }



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

div.areaTitle {
   text-transform:uppercase;
   padding: 6px 0px 0px 20px;
   font-size: 15px;
   font-weight: bold;
   color: #ffffff;
   white-space: nowrap;
}

div.areaTitleLink {
   font-size: 10px;
   padding-top: 6px;
}

a.areaTitleLink, 
a.areaTitleLinkRollover {
   font-size: 10px;
   color: #ffffff;
   text-decoration: none;
   text-transform:none;
   padding-right:20px;
}

a.areaTitleLinkRollover {
   color: #004a6d;
   cursor: pointer;
}

div.areaComment, 
div.areaCommentRight {
   font-size: 12px;
   font-weight: bold;
   color: #004783;
   text-transform:none;
   padding: 5px 15px 0px 20px;
}

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

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

div.areaIconCheckout        { }
div.areaIconOrders          { }
div.areaIconEditDocument    { }
div.areaIconHelp            { }
div.areaIconLibrary         { }
div.areaIconProfile         { }
div.areaIconShoppingCart    { }
div.areaIconStartDocument   { }

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

span.stepLabel {
   font-weight: bold;
}

span.currentStepIndicator {
   font-size: 11px;
   font-weight: bold;
   color: #004a6d;
   padding-left: 5px;
}

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

div.stepAreaHeaderNextPrevControls,
div.stepAreaFooterNextPrevControls {
   font-weight: bold;
   padding: 0 4px 0 4px;
   background: url(Images/StepNextPrevBackground.gif) repeat-x;
}

td.stepNextPrevLabel {
   height: 26px;
   font-size: 9px;
   font-weight: bold;
   padding-top: 4px;
   vertical-align: middle;
}

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

a.stepNextPrevLabelRollover {
   color: #0098df;
   cursor: pointer;
  }

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

/**********************************************************************
 * 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 { 
}

td.categorySidebarHeader-r, 
td.helpSidebarHeader-r, 
td.stepControlsHeader-r { 
}

td.categorySidebarHeader, 
td.helpSidebarHeader, 
td.stepControlsHeader   { 
   border: 1px solid #d0d0d0;
   background-color: #0098df; 
   height:44px;
   vertical-align: top;
}

td.categorySidebar-l, 
td.helpSidebar-l, 
td.stepControls-l { 
   background: #d0d0d0;
   padding-left: 1px; /* instead of width, to prevent collapse */
}

td.categorySidebar-r, 
td.helpSidebar-r, 
td.stepControls-r { 
   background: #d0d0d0;
   padding-left: 1px; /* instead of width, to prevent collapse */
}

td.categorySidebarFooter-l, 
td.helpSidebarFooter-l, 
td.stepControlsFooter-l { 
   background: #d0d0d0;
   height: 24px;
   padding-left: 1px; /* instead of width, to prevent collapse */
}

td.categorySidebarFooter-r, 
td.helpSidebarFooter-r, 
td.stepControlsFooter-r { 
   background: #d0d0d0;
   height: 24px;
   padding-left: 1px; /* instead of width, to prevent collapse */
}

td.categorySidebarFooter, 
td.helpSidebarFooter, 
td.stepControlsFooter { 
   background: #f3f3f4;
   vertical-align: top;
   border-bottom: 1px solid #d0d0d0;
}

div.categorySidebarTitle,
div.helpSidebarTitle,
div.stepControlsTitle {
   padding-top: 12px;
   padding-left: 20px;
   font-size: 14px;
   font-weight: bold;
   text-transform:uppercase;
   color: #ffffff;
}

td.categorySidebar,
td.helpSidebar,
td.stepControls {
   background-color: #f3f3f4; 
   background-position: top left;
   vertical-align: top;
   padding-top: 14px;
   padding-bottom: 8px;
}
td.categorySidebar {
   background-repeat: repeat-x;
   
}
td.stepControls { padding-right:30px; } 

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: #f3f3f4;
   padding: 0px 15px 15px 15px;
}

div.categorySidebarSearchTextBox {
   padding-bottom: 13px;
}

input.searchInput {
   margin-top:15px;
   height:22px;
   border:1px solid #d0d0d0;
   vertical-align:middle;
   font-size:13px;
   font-weight: bold;
   color: #004783;
}

td.categorySidebarSearchRule   { border-bottom:1px solid #d0d0d0; }
td.categorySidebarSearchRule-l { border-left:1px solid #d0d0d0; }
td.categorySidebarSearchRule-r { border-right:1px solid #d0d0d0; }

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

td.categorySidebarLabelSelected {
   background-image: url(Images/SelectedCategoryArrow.jpg);
   background-color: #f3f3f4; 
   background-repeat: no-repeat;
}

td.categorySidebarLabelLevel1 { padding-left: 15px; background-position: 0px 5px; }
td.categorySidebarLabelLevel2 { padding-left: 40px; background-position: 0px 5px; }
td.categorySidebarLabelLevel3 { padding-left: 55px; background-position: 0px 5px; }
td.categorySidebarLabelLevel4 { padding-left: 70px; background-position: 0px 5px; }
td.categorySidebarLabelLevel5 { padding-left: 85px; background-position: 0px 5px; }
td.categorySidebarLabelLevel6 { padding-left: 100px; background-position: 0px 5px; }
td.categorySidebarLabelLevel7 { padding-left: 115px; background-position: 0px 5px; }
td.categorySidebarLabelLevel8 { padding-left: 130px; background-position: 0px 5px; }
td.categorySidebarLabelLevel9 { padding-left: 145px; background-position: 0px 5px; }

a.categorySidebarLabel, 
a.categorySidebarLabelSelected {
   font-size: 13px;
       text-decoration: none;
   white-space: nowrap;
}

a.categorySidebarLabelLevel1 { color: #004783; font-weight:bold; }
a.categorySidebarLabelLevel2 { color: #004783; font-size: 12px; text-transform:none; }
a.categorySidebarLabelLevel3 { color: #004783; font-size: 12px; text-transform:none; }
a.categorySidebarLabelLevel4 { color: #004783; font-size: 12px; text-transform:none;}
a.categorySidebarLabelLevel5 { color: #004783; font-size: 12px; text-transform:none;}
a.categorySidebarLabelLevel6 { color: #004783; font-size: 12px; text-transform:none;}
a.categorySidebarLabelLevel7 { color: #004783; font-size: 12px; text-transform:none;}
a.categorySidebarLabelLevel8 { color: #004783; font-size: 12px; text-transform:none;}
a.categorySidebarLabelLevel9 { color: #004783; font-size: 12px; text-transform:none;}

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

a.categorySidebarLabelSelected {
   color: #0098df; 
}
 
/* -----------------------------------------------------
 * 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: #ffffff;
}

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

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

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

a.helpTopicSelected {
   color: #fbab1d;
}

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: #f3f3f4;
   vertical-align: top;
   padding: 3px 0 16px 0;
   border-left:20px solid #f3f3f4;
   height:20px;
}

td.stepControlNumber, 
td.stepControlNumberRollover, 
td.stepControlNumberSelected {
   font-size: 14px;
   font-weight: bold;
   background: #004783;
   width: 31px;
   height:  21px;
   color: #ffffff;
   vertical-align: middle;
   padding: 0 10px 0 31px;
}

td.stepControlNumber {
}

td.stepControlNumberRollover, 
td.stepControlNumberSelected {
   background-position: top left;
   background-repeat: no-repeat;
   background-color: #0098df;
   color: #ffffff;
   height:  21px;
   vertical-align: middle;
   padding: 0 10px 0 31px;
}

td.stepControlLabel, 
td.stepControlLabelRollover, 
td.stepControlLabelSelected {
   font-size: 14px;
   font-weight: bold;
   padding: 0px 10px 0px 8px;
   vertical-align: middle;
}


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

a.stepControlLabelSelected {
   color: #0098df;
}

a.stepControlLabel:hover {
   color: #0098df;
}, 
a.stepControlLabelSelected:hover {
   color: red;
}

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

div.poweredByPageflex {
   display:none;
}

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

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

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

div.categoryPath {
   color: #004783;
   padding-bottom: 15px;
}

div.categoryPath a {
   font-size: 14px;
   text-transform: uppercase;
   color: #004783;
   text-decoration: none;
   font-weight: bold;
   vertical-align:middle;
}

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

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

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

td.catalogItemHeader-l {  background: #d0d0d0; padding-left: 1px; }
td.catalogItemHeader   {  background: #d0d0d0; height: 1px; }
td.catalogItemHeader-r {  background: #d0d0d0; padding-left: 1px; }
td.catalogFolderHeader-l {  background: #d0d0d0; padding-left: 1px; }
td.catalogFolderHeader   {  background: #d0d0d0; height: 1px; }
td.catalogFolderHeader-r {  background: #d0d0d0; padding-left: 1px; }

td.catalogItem-l { background: #d0d0d0; padding-left: 1px; }
td.catalogItem-r { background: #d0d0d0; padding-left: 1px; }
td.catalogFolder-l { background: #d0d0d0; padding-left: 1px; }
td.catalogFolder-r { background: #d0d0d0; padding-left: 1px; }

td.catalogItemRule-l {  background: #d0d0d0; padding-left: 1px; }
td.catalogItemRule { background: #d0d0d0; height: 1px;  }
td.catalogItemRule-r {  background: #d0d0d0; padding-left: 1px; }
td.catalogFolderRule-l { background: #d0d0d0; padding-left: 1px; }
td.catalogFolderRule   { background: #d0d0d0; height: 1px; }
td.catalogFolderRule-r { background: #d0d0d0; padding-left: 1px; }

td.catalogItemFooter-l { background: #009edf; height:40px; padding-left: 13px; }
td.catalogItemFooter   { background: #009edf; height:40px; }
td.catalogItemFooter-r { background: #009edf; height:40px; padding-left: 13px; }
td.catalogFolderFooter-l { background: #009edf; height:40px; padding-left: 13px; }
td.catalogFolderFooter   { background: #009edf; height:40px; }
td.catalogFolderFooter-r { background: #009edf; pheight:40px; adding-left: 13px; }

td.catalogItem {
   background: #f5fafe;
   height: 158px;
   text-align: center;
   padding: 15px 15px 15px 15px;
}
td.catalogFolder {
   background: repeat-x bottom left #ffffff;
   height: 158px;
   text-align: center;
   padding: 2px 0 6px 0;
}

img.catalogThumbnail {
   border: 0px;
}

div.catalogItemFooter,
div.catalogFolderFooter {
   text-align: center;
   vertical-align:top;
   min-width: 162px;
   padding: 4px 0 4px 0;
}

a.catalogItemFooter, 
a.catalogItemFooter:hover {
   font-size: 12px;
   color: #ffffff;
   font-weight: bold;
   text-align: center;
   text-decoration: none;
   width: 162px;
   white-space: normal;
}
a.catalogFolderFooter, 
a.catalogFolderFooter:hover {
   font-size: 12px;
   color: #ffffff;
   text-decoration: none;
   width: 162px;
   white-space: normal;
}

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

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

tr.catalogRow {
}

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

img.catalogRowThumbnail {
   border: 1px solid #004a6d;
}

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 0px; }
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: 5px 10px 5px 10px; }

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: 5px 8px 5px 8px; }

div.searchButton   { background: url(Images/Button.gif  ) repeat-x       ; font-size: 10px; float:right;}
div.searchButton-l { background: url(Images/Button-l.gif) no-repeat top left ; }
div.searchButton-r { background: url(Images/Button-r.gif) no-repeat top right; }
div.searchButton-inner { padding: 3px 8px 3px 8px; border:1px solid #d0d0d0; }

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

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

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

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

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

}
td.warningAreaInlineInfo {
   background: #0098df;
   border: 1px solid #0098df;
}

td.warningIconWarning { background: url(Images/IconWarning.gif) no-repeat left top; width: 55px; padding-left: 55px; height: 55px; }
td.warningIconInfo    { background: url(Images/IconInfo.gif   ) no-repeat left center; width: 49px; padding-left: 50px; height: 49px; }

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

div.warningAreaMessageInfo {
   color: #ffffff;
   text-align: center;
}

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

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

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

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

div.loginSubhead {
   font-weight: bold;
}

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

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

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

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;
	color: #004783;
}

span.previewWaitMessage {
}

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

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

td.childAreaHeader-l { }
td.childAreaHeader-r { }
td.childAreaHeader   { }

td.childArea-l { width: 0px; }
td.childArea   { padding: 13px 15px 18px 15px; background: #ffffff; border:1px solid #0098df; }
td.childArea-r { width: 0px; }


td.childAreaFooter-l { }
td.childAreaFooter-r { }
td.childAreaFooter   { }

div.priceEstimate {
}

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

td.orderSummaryCell {
   border: 1px solid #0098df;
   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: #ffffff;
   height: 120px; 
   width: 150px; 
   text-align: center;
   padding-top: 20px;
   border-left: 1px solid #cccccc;
   border-right: 1px solid #cccccc;
   border-top: 1px solid #cccccc;
}

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

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

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

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

span.assetCaption,
a.assetCaption,
a.assetCaption:hover {
   font-size: 12px;
   color: #666666;
   font-weight: bold;
   text-decoration: none;
}

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

/**********************************************************************
 * 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: #0098df;
}

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

/* -----------------------------------------------------
 * 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: red;
}

.validationError {
   display: block;
   color: red;
   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 {
   vertical-align:top;
   background: #ffffff;
   border: 1px solid #0098df;
   padding: 5px;
}

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

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

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

td.itemTable-Id {
   font-size: 12px;
   color: #0098df;
}

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

td.itemTable-Product {
   font-size: 11px;
   font-weight: bold;
   color: #0098df;
}

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

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

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

td.itemTableSummaryRule {
   border-bottom: 1px solid #0098df;
   line-height: 3px;
}

td.itemTableSummaryLine {
   font-size: 14px;
   font-weight: bold;
   color: #0098df;
   padding-top: 3px;
}

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

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

td.dataListChoicesHeader,
td.dataListChoices {
   border-bottom: 1px solid #0098df;
   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: solid 3px #cccccc;
}
td.popupArea {
   background: white;
   padding: 13px 15px 10px 15px; 
}
td.areaTitlePopup  {
   font-weight: bold;
   font-size: 13px;
   color: #3f8800;
   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;
}
/* -----------------------------------------------------
 * 7.5 add ons
 */
.roundedDiv { /*for use with rounded cornered divs*/
    background-color: #cccccc; /* border color when border-style is solid*/
    float:left; 
    margin:0px 9px 0px 0px; /* put only margin here */
    text-align:center;
    width:270px;
    padding:3px; /* holder for size of your rounded corners, padding is otherwise ignored, cannot be more than 9 */
    border-style:none;
}
.roundedDivContent { /*put only text formating and padding here, do not put margin, use roundedDiv for that*/
    text-align:center;
    color:#cccccc;
    font-style:italic;
    background-color: white;
    padding:20px 20px 20px 20px; /*padding may increase with the size of the border in roundedDiv*/ 
}
div.columnPadding {
font-size: 10px; margin: 2px 4px 1px 0; 
}
div.ShipmentBody, 
div.ShipmentHeader, 
div.ShipmentPrintingOptions, 
div.PricingInfo, 
div.ShipmentLeftSide {
    border: 1px solid #cccccc;
    position: relative;
    padding: 5px;
 }
div.PricingInfo {
    width:250px;
}
p.ShipmentDocumentDetails {
    margin-bottom:5px;
}
div.ShipmentHeader {
    border: 1px solid #cccccc;
    background-color: #eeeeee;
    margin-top: 10px;
    margin-bottom: 0px;
}
div.ApprovalDocumentDetailLeft {
    float:left;
    width: 195px;
    height:400px;
    overflow:auto; 
}
div.ApprovalDocumentDetailRight {
float:left;
width:389px;
height:398px;
overflow:auto;
padding-left:5px;
border: 1px solid #cccccc;
}
div.ApprovalDocumentDetailRight td.orderSummaryCell {
border-style:none;
}
div.userAddressLabel {
    border: 1px solid #cccccc;
    background-color: #E0E0E0;
    margin-top: 10px;
    margin-bottom: 5px;
}
div.ShipmentAddress { }
div.ShipmentNumber {
   font-weight: bold;
}
div.ShipmentHeader {
    border: 1px solid #cccccc;
    background-color: #eeeeee;
    margin-top: 10px;
    margin-bottom: 0px;
}
div.Shipment {
    margin-top: 10px;
    margin-bottom: 20px;
    width: 802px;
 }
 #txtApproverComment {
 width:802px;
}
div.ShipmentItemRow {
    padding:5px;
}
div.ShipmentApproveDecline {
    float:left;
    margin:5px 5px 5px;
    width:182px;
}
div.ShipmentDocumentDetailsPDFPreviewLink {
    border-top: 1px solid #cccccc;
    text-align:center;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 2px;
    padding-top: 2px;
    color: blue;
    text-decoration: underline;
}
div.ShipmentApproveDeclineButtons {
    float:left;
    margin:5px; }
div.ShipmentApproveDeclineIcon {
    float:left;
    margin:5px;
    margin-right:20px;
}
div.ShipmentDocumentDetails {
    cursor:pointer;
    cursor:hand;
    float:left;
    margin-bottom:5px;
    margin-right:5px;
    border: 0px;
}
#shadow-container {
	position: relative;
	left: 3px;
	top: 3px;
	margin-right: 3px;
	margin-bottom: 3px; } 
#shadow-container .shadow2,
#shadow-container .shadow3,
#shadow-container .container {
	position: relative;
	left: -1px;
	top: -1px;
} 
#shadow-container .shadow1 {
background: #F1F0F1;
}
#shadow-container .shadow2 {
background: #DBDADB;
}
#shadow-container .shadow3 {
background: #B8B6B8;
}
#shadow-container .container {
background: #eeeeee;
border: 1px solid #cccccc;
}

div.ShipmentComments {
float:left;
}
div.ShipmentDocumentDetailsThumbnail {
    text-align: center;
    padding: 10px;
}
IMG.ShipmentDocumentDetailsThumbnail { 
    display: block;
    margin-left: auto;
    margin-right: auto;
}
div.DocumentDetailsMain {
    float:left;
    width:150px;
    margin:5px 20px 0px 20px;
}
div.ShipmentLeftSide {
        float:left;
        width:333px;
}
a.addressBookIcon {
   
    width: 112px;
    height: 26px;
    background-image: url(Images/AddressBookIcon.gif);
    
}
a.addressBookIcon:hover {
    
    width: 112px;
    height: 26px;
    background-image: url(Images/AddressBookIconHover.gif);
    
 }
 a span.alt { 
 display: none;
 }
/* Shopping Cart "Loading..." box */
.loadmask {
    z-index: 100;
    position: absolute;
    top:0;
    left:0;
    -moz-opacity: 0.5;
    opacity: .50;
    filter: alpha(opacity=50);
    background-color: #CCC;
    width: 500;
    height: 500;
    zoom: 1; }.loadmask-msg {
    z-index: 20001;
    position: absolute;
    top: 0;
    left: 0;
    border:1px solid #6593cf;
    background: #c3daf9;
    padding:2px; }.loadmask-msg div {
    padding:5px 10px 5px 25px;
    background: #fbfbfb url('Images/loading.gif') no-repeat 5px 5px;
    line-height: 16px;
    border:1px solid #a3bad9;
    color:#222;
    font:normal 11px tahoma, arial, helvetica, sans-serif;
    cursor:wait; 
 }
 .masked {
    overflow: hidden !important; 
 }
 .masked-relative {
    position: relative !important;
}.masked-hidden {
    visibility: hidden !important; 
}
div.divsInARow {
    float:left;
    margin-right:5px;
}
div.clear { clear:both; }
/*--------------------------------*/
div.MultiShippingButton {
margin-bottom:5px;height:27px;
}
div.ShippingAddressBlock {
margin-bottom:20px;margin-top:20px; 
}
div.ShippingAddressBlockCart {
margin:10px;
}
/** 7.6 additions ***************/
/*--------------------------------*/
div.MultiShippingButton
{
margin-bottom:5px;height:27px;
}
div.ShippingAddressBlock
{
margin-bottom:20px;margin-top:20px;
}
div.ShippingAddressBlockCart
{
margin:10px;
}
/*--------------------------------*/
/* UserEditDataMergeListPreview */
/* styles for the list preview */
table.listPreviewTable
{
border: 1px solid #0098df;
padding: 10px;
}
tr.listPreviewTableHeader
{
background: #eeeeee;
font-size: 8;
font-weight: bold;
padding: 0 15px 2px 0;
}
tr.listPreviewRow {
}
tr.listPreviewAlternatingRow {
}
/* new add to cart button in steparea nextprev location */
td.areaGraphicCartStep,
td.areaGraphicCartStepRollover {height: 15px; width: 20px; padding-top: 1px; padding-left:5px;}
td.areaGraphicCartStep div,
td.areaGraphicCartStepRollover div { background: url(Images/cart_iconx2.gif) no-repeat; height: 13px; width: 20px; margin-bottom:3px; }
td.areaGraphicCartStepRollover div { background-position:0px -13px;}
td.areaGraphicNextCartSeparatorLine { height: 15px; width: 50px; }
td.areaGraphicCancelStep div,
td.areaGraphicCancelStepRollover div { background: url(Images/CartCancel.gif) no-repeat; height: 11px; width: 13px; margin-left:4px; margin-bottom:2px; }
td.areaGraphicCancelStepRollover div { background-position:0px -11px;}
td.stepCart{ padding-right:2px;}
td.stepCancel{ padding-right:3px;}
/* new add to cart button in step content area */
div.CartButtons
{
float:right;
}
/* Price Estimate wrapping container */
td.priceHint
{
padding-left: 100px;
width:100%;
}
/* Scroll Image list used in form fill kit parts */
div.scrollButton
{
width:25px;
height:84px;
float:left;
margin-top:3px;
}
div.scrollLeft
{
background-image:url('./Images/scrollLeft.gif');
margin-right:5px;
}
div.scrollRight
{
background-image:url('./Images/scrollRight.gif');
margin-left:5px;
}
div.scrollButton.hover
{
background-position: 0px -84px;
}
div.scrollWrapper
{
width:300px;
height:89px;
float:left;
overflow:hidden;
border:1px solid #b7b7b7;
position:relative; //IE 6 7 bug fix
}
div.scrollList
{
width:365px;
}
table.scrollData
{
position:relative; left:0px;
}
table.scrollData td {
width:50px;
padding:0 2px;
}
table.scrollData img {
height: expression( this.scrollHeight > 79 ? "80px" : "auto" ); /* sets max-height for IE */
max-height: 80px; /* sets max-height value for all standards-compliant browsers */
}
/* Address Book Upload Download PopUps */
div.AddressBookPopUpArea
{
width:325px;
}
/* Address Book tiles */
div.AddressTile
{
float:left;
width:175px;
height:115px;
background-color:#F5F5F5;
border-color:#838282;
border-style:solid;
border-width:1px;
margin:10px;
padding: 7px;
overflow: auto;
}
div.AddressTileHeader
{
font-weight:bold;
margin-bottom:15px;
}
div.AddressTileDisplay
{
}