/*
 * Note that this file is arranged mostly (but not necessarily) by generic styles, classes,
 * and then id elements--each alphabetized.  There are some exceptions where it made sense.
 */

/*
 * generic styles.
 */
html,body
{
   background: #fff;
   color: #000;
   font: 100%/150% arial,verdana,helvetica,sans-serif;
   font-size: small;
   margin: 0px; 
   padding: 0px;
}

div,
form
{
   margin: 0px;
   padding: 0px;
}

h1
{
   font-size: 120%;
   font-weight: bold;
   margin: 0px;
   margin-bottom: 15px;
   padding: 0px;
}

h2
{
   font-size: 110%;
   font-weight: bold;
   margin: 0px;
   padding: 0px;
}

h3, h4, h5
{
   font-size: 100%;
   font-weight: bold;
   margin: 0px;
   padding: 0px;
}

hr
{
   border-bottom: 1px #000 solid;
	margin: 0px auto;
}

img
{
   border: none;
}

img.clickable
{
   cursor: pointer;
}


/* used for different sized inputs - 2 digit, 4 digit, 8 digit, "normal",
   note that the default used will depend on what type of input is used (if
   using the Form libs. */
input.xsmall
{
   width: 35px;
}

input.small
{
   width: 55px;
}

input.medium
{
   width: 115px;
}

input.large,
input.passwordInput,
input.textInput
{
   width: 200px;
}

input.percInput,
input.priceInput,
input.weightOuncesInput,
input.weightPoundsInput
{
   width: 75px;
}

li
{
   margin: 0px;
   padding: 2px;
}

p
{
   margin-bottom: 10px;
   margin-top: 0px;
}

/* used for different sized selects - 2 digit, 4 digit, 8 digit, "normal". */
select.xsmall
{
   width: 40px;
}

select.small
{
   width: 60px;
}

select.medium
{
   width: 120px;
}

select.large,
select
{
   width: 205px;
}

textarea.advanced
{
   width: 484px;
}

textarea.simple
{
   width: 260px;
}

ul.blank
{
   list-style: none;
}



/* used for form button actions (i.e. Send Request, Save, etc...). */
.actions,
.actions td
{
   margin: 10px;
   padding-top: 15px;
   text-align: right;
}

/* can be used in place of a <br clear="all" /> where strict XHTML compliance is desired. */
.clear
{
   clear: both;
}

/* centers text. */
.centered
{
   text-align: center;
}

/* used around the actual content of the pages.  note that this differs from .main in
   that is is used after any custom header and before any custom footer. */
.content
{
   min-height: 150px;
   padding: 10px;
}

/* date and time selects (more below). */
.daySelect,
.hourSelect,
.meridianSelect,
.minuteSelect,
.secondSelect
{
   width: 50px;
}

/* used for an empty list row (i.e. "No catalog items found."). */
.empty
{
   font-style: italic;
   text-align: left;
}

/* generic error. */
.error
{
   color: #900;
   font-weight: bold;
}

/* form message (i.e. "Your changes have been saved."). */
.formMessage
{
   color: #090;
   font-weight: bold;
   margin: 0 auto;
   width: 400px;
}

/* set this to tables that display information (both TH and TD) in a simple grid-like
   fashion with everything left-aligned. */
.grid td
{
   padding-bottom: 10px;
   text-align: left;
   vertical-align: top;
}

.grid th
{
   text-align: left;
   vertical-align: top;
}

/* generic header. */
.head
{
   font-weight: bold;
}

/* used to display a cleaner-looking HR - use {hr} */
.hr
{
   border-bottom: 1px solid #ccc;
   clear: both;
   height: 5px;
   margin-bottom: 5px;
}

div.hr hr
{
   display: none;
}

div.hr *
{
   display: none;
}

/* block-level left indentation. */
.indent
{  
   padding: 0px 0px 0px 10px;
   margin: 0px;
}

/* set this class to tables that are used for data input and have their headers (THs) 
   on the left w/ data (TDs) on the right and an optional header row. */
table.input2Col
{
   margin: 0 auto;
   width: 48%;
}

.input2Col a
{
   color: #fc0;
   text-decoration: none;
}

.input2Col tbody td,
.input2Col thead td
{
   color: #000;
   padding: 2px 5px;
   text-align: left;
}

.input2Col tbody td.actions
{
   text-align: right;
}

.input2Col th
{
   font-weight: normal;
   padding: 2px 5px 4px 5px;
   text-align: right;
   vertical-align: top;
   white-space: nowrap;
}

.input2Col thead th
{
   background: #666;
   color: #fff;
   text-align: left;
}

.input2Col tbody th
{
   text-align: right;
   color: #000;
   width: 35%;
}

/* set this class to tables that are used for data input and have their headers (THs) 
   intermixed w/ data (TDs) (i.e. a row of THs, a row of TDs). */
table.inputMixed
{
   margin: 0 auto;
}

.inputMixed td
{
   padding: 1px 5px 5px 5px;
   vertical-align: top;
}

.inputMixed th
{
   padding: 5px 5px 1px 5px;
   font-weight: normal;
   text-align: left;
   vertical-align: bottom;
   white-space: nowrap;
}

.inputMixed thead th
{
   font-weight: bold;
   text-align: center;
   vertical-align: middle;
}

/* left-floated element. */
.left
{
   float: left;
   padding-left: 10px;
}

/* set this class to tables that have their headers (THs) on the left side. */
.leftHead th
{
   text-align: right;
   vertical-align: bottom;
}

.leftHead td
{
   vertical-align: bottom;
}

/* set this class to tables that are used to display and interact with list
   data--most visible in the admin section. */
table.listData
{
   border: 1px solid #000;
   width: 100%;
}

.listData a
{
   color: #fc0;
   text-decoration: none;
}

.listData td
{
   background: #fff;
   color: #000;
   padding: 2px 5px;
   text-align: left;
}

.listData td.actions,
.listData td.icon
{
   text-align: center;
}

.listData thead th
{
   background: #666;
   color: #fff;
   vertical-align: bottom;
}

.listData th
{
   background: #fff;
   color: #000;
   padding: 2px 5px 4px 5px;
   text-align: left;
   vertical-align: top;
   white-space: nowrap;
}

/* main content block. */
.main
{
}

/* tinymce select (i.e. font size). */
select.mceSelectList
{
   width: auto;
}

/* generic message/notice. */
.message
{
   color: #090;
   font-weight: bold;
}

/* date and time selects (more above). */
.monthSelect,
.yearSelect
{
   width: 60px;
}

/* used for negative prices, etc... */
.negative
{
   color: #900;
}

/* sets font to normal. */
.normal
{
   font-weight: normal;
}

/* used for simple notes - usually below form entries. */
.note
{
   font-size: smaller;
   font-style: italic;
   font-weight: normal;
}

/* login page. */
.login
{
   margin: 0 auto;
   width: 400px;
}

/* popup styles. note that there are some for the "static" popups (.popup) and
   those that are purely in JS (.popupSimpleXXX, .popupTooltipXXX). */
.popup
{
   display: none;
   position: absolute;
   margin: 20px auto;
   padding: 0px;
   z-index: 1000;
}

.popup,
.popupSimpleBg
{
   background: #e6e6e6;
   border: 1px solid #000;
   color: #000;
   font: 1em/1.3em verdana,arial,helvetica,sans-serif;
   font-size: 14px;
}

.popup .body,
.popupSimpleFg
{
   color: #000;
   padding: 5px 20px 10px 20px;
   text-align: left;
   width: 100%;
}

.popup .caption,
.popupSimpleCaption
{
   background: #4c5489;
   color: #fff;
   font-size: 10px;
   font-weight: bold;
   padding: 1px 5px 1px 10px;
   text-align: left;
   width: 100%;
}

.popup .close,
.popupSimpleClose
{
   background: #4c5489;
   color: #fff;
   font-size: 10px;
   font-weight: bold;
   padding: 1px 5px 1px 10px;
   text-align: right;
}

.popup .close a,
.popup .close a:active, 
.popup .close a:link,
.popup .close a:visited,
.popupSimpleClose a,
.popupSimpleClose a:active, 
.popupSimpleClose a:link,
.popupSimpleClose a:visited
{
   color: #fff;
}

.popup .close a:hover,
.popupSimpleClose a:hover
{
   color: #000;
}

.popupSimpleText
{
}

.popupTooltipBg
{
   background: #ffc;
   border: 1px solid #000;
   font: 1em/1.3em verdana,arial,helvetica,sans-serif;
   font-size: 10px;
}

.popupTooltipCaption
{
}

.popupTooltipFg
{
   color: #000;
   padding: 5px;
}

.popupTooltipText
{
}

/* used form elements that are required. */
.required input,
.required select,
.required textarea
{
   background: #daffd3;
}

/* right-floated element. */
.right
{
   float: right;
   padding-right: 10px;
}

/* even/odd/highlight table rows. */
.rowEven td,
.rowEven th
{
   background: #eee;
   color: #000;
}

.rowHighlight td,
.rowHighlight th
{
   background: #ffc;
   color: #000;
}

.rowOdd td,
.rowOdd th
{
   background: #fff;
   color: #000;
}

/* for a scrollable div. */
.scrollable
{
   overflow: auto;
}

/* site map columns. */
#siteMapLeft,
#siteMapRight
{
   float: left;
   width: 49%;
}

/* used for things like SM and TM. */
.super
{
   vertical-align: super;
   font-size: 7px;
}


/*
 * tab list (use {dhtml_tabs} or {tabs}.
 * The following styles are the most common to change:
 *    ul#tabs { border-bottom }                 - border tabs "sit" on.
 *    ul#tabs li { border }                     - border around actual tabs.
 *    ul#tabs li.active { border-bottom }       - should be same as tab background (hides border).
 *    ul#tabs li { background-color}            - inactive tab background.
 *    ul#tabs li a { color }                    - inactive tab foreground.
 *    ul#tabs li.active { background-color}     - active tab background.
 *    ul#tabs li.active a { color }             - active tab foreground.
 *    ul#tabs li a:hover { background-color }   - highlighted tab background.
 *    ul#tabs li a:hover { color }              - highlighted tab foreground.
 */
ul#tabs
{
   border-bottom: 1px solid #000;
   font-size: 11px;
   list-style-type: none;
   margin: 0px;
   padding: 0px 10px 22px 10px;
}

ul#tabs li
{
   background-color: #eee;
   border: 1px solid #000;
   float: left;
   height: 21px;
   line-height: 1.8em;
   margin: 0px 4px;
   padding: 0px;
}

ul#tabs li.active
{
   background-color: #fff;
   border-bottom: 1px solid #fff;
}

ul#tabs li a
{
   color: #666;
   display: block;
   float: left;
   padding: 0px 5px;
   text-decoration: none;
}

ul#tabs li a:hover
{
   background-color: #ffc;
   text-decoration: none;
}

ul#tabs li.active a
{
   color: #000;
   text-decoration: none;
}



/* tab list content block. */
.tab
{
   background: #fff;
   color: #000;
   margin: 0px;
   padding: 10px;
   text-align: left;
   width: auto;
}


/* a three-column table. */
table.threeCol
{
   margin: 0px;
   margin: 0 auto;
   padding: 0px;
   width: 100%;
}

.threeCol td,
.threeCol th
{
   width: 33%;
}

/* set this class to tables that have their headers (THs) in the top row as
   part of a THEAD. */
table.topHead td,
table.topHead th
{
   text-align: left;
   vertical-align: middle;
}

/* used as a warning box. */
.warningBox
{
   background: #eee;
   border: 1px solid #900;
   color: #900;
   margin: 10px auto;
   padding: 10px;
   text-align: center;
   width: auto;
}