/*
 * UTIL.CSS
 *
 * $Id: util.css,v 1.5 2005/10/28 15:16:04 doug Exp $
 */


/*****************************************************
 * HTML EMULATION
 */
.center {text-align: center ! important;}
.right  {text-align: right ! important;}
.left   {text-align: left ! important;}
.top    {vertical-align: top ! important;}
.middle {vertical-align: middle ! important;}
.bottom {vertical-align: bottom ! important;}
.float-left  {float: left ! important;}
.float-right {float: right ! important;}
.clear-right {clear: right ! important;}
.clear-left  {clear: left ! important;}
.clear-none  {clear: none ! important;}
.big    {font-size: medium ! important;}
.bold   {font-weight: bold ! important;}
.normal {font-weight: normal ! important;}
.italic {font-style: italic ! important;}
.inline {display: inline ! important;}
.underline {text-decoration: underline ! important;}
.uppercase {text-transform: uppercase ! important;}
.lowercase {text-transform: lowercase ! important;}
.nowrap {white-space: nowrap ! important;}
.border-collapse {border-collapse: collapse ! important;}


/*****************************************************
 * SMALL WORLD
 */
.small,
.small p, .small a, .small em,
.small ul, .small li,
.small code, .small pre,
.small table, .small tr, .small td, .small th,
.small div, .small span,
.small select, .small option, .small input, .small textarea
{ font-size: xx-small; }

.small h1, h1 small
{ font-size:       small ! important; }

.small h2, h2 small { font-size: small ! important; }

.small h3, .small h4, .small h5, .small h6,
h2 small, h3 small, h4 small, h5 small, h6 small
{ font-size: x-small ! important; }

.small big
{ font-size:       x-small ; }


/*****************************************************
 * BIG WORLD
 */
big,
big p, big a,
big ul, big li,
big code, big pre,
big table, big tr, big th,  big td,
big div, big span
{ font-size:       small; }

big h1
{ font-size:       x-large; }

big h2, big h3, big h4, big h5, big h6
{ font-size:       large; }

.bigger { font-size: 130%; }


/*****************************************************
 * SPACING
 */
.padding        { padding: 5px; }
.padding-top    { padding-top: 5px; }
.padding-right  { padding-right: 5px; }
.padding-left   { padding-left: 5px; }
.padding-bottom { padding-bottom: 5px; }
.padding-x      { padding-left: 5px;
                  padding-right: 5px; }
.padding-y      { padding-top: 5px;
                  padding-bottom: 5px; }

.dbl-padding        { padding: 10px ! important; }
.dbl-padding-top    { padding-top: 10px; }
.dbl-padding-right  { padding-right: 10px; }
.dbl-padding-left   { padding-left: 10px; }
.dbl-padding-bottom { padding-bottom: 10px; }
.dbl-padding-x      { padding-left: 10px;
                      padding-right: 10px; }
.dbl-padding-y      { padding-top: 10px;
                      padding-bottom: 10px; }

.small-padding        { padding: 3px; }
.small-padding-top    { padding-top: 3px; }
.small-padding-right  { padding-right: 3px; }
.small-padding-left   { padding-left: 3px; }
.small-padding-bottom { padding-bottom: 3px; }
.small-padding-x      { padding-left: 3px;
                        padding-right: 3px; }
.small-padding-y      { padding-top: 3px;
                        padding-bottom: 3px; }

.margin         { margin: 5px; }
.margin-top     { margin-top: 5px; }
.margin-right   { margin-right: 5px; }
.margin-bottom  { margin-bottom: 5px; }
.margin-left    { margin-left: 5px; }
.margin-x       { margin-left: 5px;
                  margin-right: 5px; }
.margin-y       { margin-top: 5px;
                  margin-bottom: 5px; }

.dbl-margin-top     { margin-top: 10px; }
.dbl-margin-right   { margin-right: 10px; }
.dbl-margin-bottom  { margin-bottom: 10px; }
.dbl-margin-left    { margin-left: 10px; }
.dbl-margin-x       { margin-left: 10px;
                      margin-right: 10px; }
.dbl-margin-y       { margin-top: 10px;
                      margin-bottom: 10px; }

.small-margin         { margin: 5px; }
.small-margin-top     { margin-top: 3px; }
.small-margin-right   { margin-right: 3px; }
.small-margin-bottom  { margin-bottom: 3px; }
.small-margin-left    { margin-left: 3px; }
.small-margin-x       { margin-left: 3px;
                        margin-right: 3px; }
.small-margin-y       { margin-top: 3px;
                        margin-bottom: 3px; }


/* NEW PAD CLASSES */
.pad        { padding: 5px; }
.pad-top    { padding-top: 5px; }
.pad-right  { padding-right: 5px; }
.pad-left   { padding-left: 5px; }
.pad-bottom { padding-bottom: 5px; }
.pad-x      { padding-left: 5px;
                  padding-right: 5px; }
.pad-y      { padding-top: 5px;
                  padding-bottom: 5px; }

.dbl-pad        { padding: 10px ! important; }
.dbl-pad-top    { padding-top: 10px; }
.dbl-pad-right  { padding-right: 10px; }
.dbl-pad-left   { padding-left: 10px; }
.dbl-pad-bottom { padding-bottom: 10px; }
.dbl-pad-x      { padding-left: 10px;
                      padding-right: 10px; }
.dbl-pad-y      { padding-top: 10px;
                      padding-bottom: 10px; }

.small-pad        { padding: 3px; }
.small-pad-top    { padding-top: 3px; }
.small-pad-right  { padding-right: 3px; }
.small-pad-left   { padding-left: 3px; }
.small-pad-bottom { padding-bottom: 3px; }
.small-pad-x      { padding-left: 3px;
                        padding-right: 3px; }
.small-pad-y      { padding-top: 3px;
                        padding-bottom: 3px; }


/* -- COLORSCHEMES ------------------------------ */
.reverse {
  background: #666;
}

.reverse h1, .reverse h2, .reverse h3, .reverse p,
.reverse th, .reverse td, .reverse small {
  color: #fff;
}

.reverse a, .reverse a:link, .reverse a:active, .reverse a:visited
{ color: #ff3 ! important; }
.reverse a:hover
{ color: #ff9 ! important; }

.reverse input.cancel, .reverse input.commit, .reverse input.action
{ border-color:    #fff ! important; }

fieldset.reverse, .reverse fieldset {
  border: 1px solid #333;
}

.reverse legend {
  background: #f90;
  color:      #fff;
  border:     1px solid #333;
}

.reverse .form th {
  background:       #555!important;
  border-top:       1px solid #666;
  border-bottom:    1px solid #666;
}


/*****************************************************
 * NUDGERS
 */
.nudge-down { position: relative; top: 2px; }
.nudge-up   { position: relative; top: -2px; }


/*****************************************************
 * CONSTANTS
 */
.sub, .sub p   { color: #666; }
.red   { color: #f00 ! important; }
.green { color: #060 ! important; }

.none
{ border:          none ! important;
  background:      none ! important; }

.bg        { background: #ccc; }
.bg-med    { background: #aaa; }
.bg-lite   { background: #eee; }
.bg-xlite  { background: #fafafa; }
.bg-brite  { background: #ffd ! important; }
.bg-xbrite { background: #fffff0; }
.bg-dark   { background: #666; }
.bg-red    { background: #900 ! important; }
.bg-lite-blue { background: #ccccf0 ! important; }
.bg-lite-red  { background: #fcc ! important; }

.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark p,
.bg-dark th, .bg-dark td, .bg-dark small
{ color:           #fff; }
.bg-dark a, .bg-dark a:link, .bg-dark a:active, .bg-dark a:visited
{ color:           #f0f0f0 ! important; }
.bg-dark a:hover
{ color:           #fff ! important; }
.bg-dark input.cancel, .bg-dark input.commit, .bg-dark input.action
{ border-color:    #fff ! important; }

.bg-red a, .bg-red a:link, .bg-red a:active, .bg-red a:visited,
.bg-red p, .bg-red td,
.bg-red h1, .bg-red h2, .bg-red h3
{ color: #fff; }

.ol        { border: 1px solid #999 ! important; }
.ol-bottom { border-bottom: 1px solid #999 ! important; }
.ol-bottom-dashed { border-bottom: 1px dashed #999 ! important; }
.ol-right-dashed  { border-right: 1px dashed #999 ! important; }
.ol-dark   { border: 1px solid #666 ! important; }
.ol-xdark  { border: 1px solid #333 ! important; }
.ol-lite   { border: 1px solid #ccc ! important; }
.ol-xlite  { border: 1px solid #f0f0f0 ! important; }
.ol-red    { border: 1px solid #900 ! important; }
.ol-raised { border-width: 1px 3px 3px 1px ! important; }
.ol-dashed { border-style: dashed ! important; }

.image-frame {
  padding: 3px;
  border: 1px solid #666;
}

/*****************************************************
 * DEFEATERS
 */
.no-underline, .no-underline a { text-decoration: none ! important; }
.no-border { border: none ! important; }


/*****************************************************
 * SEPARATORS
 */
.sep-left   {border-left: 2px dashed #ccc;}
.sep-right  {border-right: 2px dashed #ccc;}
.sep-top    {border-top: 2px dashed #ccc;}
.sep-bottom {border-bottom: 2px dashed #ccc;}


/*****************************************************
 * VISIBILITY
 */
.hide { display: none; }
.show { display: ; }


/* BOXES ****************************************************************** */
.box {
  padding: 5px;
  border: 1px solid #999;
}

.action-box  {}

.message-box {
  padding: 5px;
  background: #dee;
  border: 1px dotted #9cc;
  color: #333;
  margin: 10px 0px;
}

.error-box {
  padding: 5px;
  background: #fdd;
  border: 1px solid #f00;
  color: #900;
  margin-bottom: 10px;
}

.cart-box {
  padding: 5px;
  background: #dee;
  border: 1px dotted #9cc;
  border-top: none;
  color: #333;
  margin: 0px 0px;
}

.wishlist-box {
  padding: 5px;
  background: #ffd;
  border: 1px dotted #999;
  border-top: none;
  color: #333;
  margin: 0px 0px;
}