/*****************************************************
 * 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
 * class="small" should be assigned to the container.
 * stay away from <small><sometag>...</sometag></small>
 */

small
{ font-size:       xx-small; }

.small,
.small p, .small a,
.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:       large ! important; }

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

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

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

.smaller
{ font-size:       80%; }



/* ****************************************************
 * BIG WORLD
 */

.big {font-size: medium; }

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: 120%; }

big h1 { font-size: large; }

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


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


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

.action-box  {}
.message-box { background: #fffff0; }

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


/* ****************************************************
 * CONSTANTS
 */
.bg       { background: #999; }
.bg-lite  { background: #f0f0f0; }
.bg-brite { background: #fffff0; }
.bg-dark  { background: #666; }

.ol        { border: 1px solid  #999; }
.ol-lite   { border: 1px solid  #ddd; }
.ol-white  { border: 1px solid  #fff; }
.ol-dark   { border: 1px solid  #666; }
.ol-black  { border: 1px solid  #000; }

.ol-dotted { border: 2px dotted #666; }
.ol-raised { border-width: 1px 3px 3px 1px ! important; }

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

.sub
{ color:           #999; }

.sub a, .sub a:link, .sub a:active, .sub a:visited
{ color:           #999; }

.sub a:hover
{ color:           #666; }

.red
{ color:           f00; }