/*
 * UTIL.CSS
 */

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


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

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