/* !Clearing floats */

.overflowClear{ overflow: hidden; }

.afterClear:after{
  content: "."; display: block; clear: both; height: 0; line-height: 0; font-size: 0; min-height: 0; visibility: hidden;
}

/* !Reusable classes */

/* Floating images, margins = line-height */

.left{ float: left; margin: 0 1.5em 0 0; }
.right{ float: right; margin: 0 0 0 1.5em; }
.center{ display: block; margin: 1.5em auto; }

/* Key-Value pairs */

.keyValue{}
  /* When in need of a more robust layout */
  ul.keyValue li{ overflow: hidden; margin: 0; padding: 0; width: 100%; }
    ul.keyValue .key{ float: left; width: 30%; text-align: right; }
    ul.keyValue .value{ display: block; margin-left: 33%; }
  /* When you want more semantics */
    dl.keyValue dt{ float: left; width: 30%; margin: 0; text-align: right; }
    dl.keyValue dd{ margin: 0; padding: 0 0 0 33%; }

/* Usage: <div class="hr"><hr /></div> */
.hr{ clear: both;	margin: 1.5em 0; background: transparent; border-top: 1px solid rgba(0,0,0,.15); }
	hr{	visibility: hidden;	font-size: 0;	line-height: 0;	height: 0; border: none; }

/* For visualy emphasizing inline and block-level content */
.accent, strong.accent, span.accent, em.accent{ background: #ffffbf !important; color: inherit; padding: .25em; }
div.accent, p.accent{ padding: 1.5em; }

/* Used on abbr and acronym elements */
.caps{ text-transform: uppercase; font-size: .75em; }

/* Pretty ampersands, ex. usage: <span class="amp">&amp;</span>, taken from Blueprint typography stylesheet */
.amp{ color: #666; font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", serif; font-size: 1.1em; line-height:10%; font-style: italic; }

/* Remove an element from the screen, but remain accessible to non-graphical browsers and handheld devices */
.noShow{ position: absolute !important; top: -9999px !important; left: -9999px !important; visibility: none !important; display: block !important; height: 0 !important; width: 0 !important; overflow: hidden !important; }


/* ! Debugging */

.debug{ /* Used to outline an element on screen but don't mess with the box model */
  outline: 1px solid fuchsia;
  background: yellow;
  min-height: 1px;
}

.showGrid { background: url(../images/layout/saf-grid.png) 0 0 repeat-y; }

.showRuler{ background: url(../images/layout/tape.gif) 0 0 no-repeat; }

/* !Forms (a light implementation of Uni-Form to handle basic forms [http://sprawsm.com/uni-form/]) */

.uniForm{
}
  .uniForm .ctrlHolder{
    margin: 0 0 .75em 0;
  }
  .uniForm .ctrlHolder:after{
    content: "."; display: block; clear: both; height: 0; line-height: 0; font-size: 0; min-height: 0; visibility: hidden; zoom: 1;
  }
    /* .inlineLabels - Places the label and the field in the same line */
    .uniForm .inlineLabels label, .uniForm.inlineLabels label{
      float: left; width: 30%;
    }
    .uniForm .inlineLabels .textInput, .uniForm .inlineLabels input.zemText, .uniForm.inlineLabels .textInput, .uniForm.inlineLabels input.zemText, .uniForm .inlineLabels select, .uniForm.inlineLabels select, .uniForm .inlineLabels textarea, .uniForm.inlineLabels textarea{
      float: right; width: 67%;
    }
    /* .blockLabels - Places the label above the field */
    .uniForm .blockLabels label, .uniForm.blockLabels label{
      display: block; margin: 0 0 .25em 0;
    }
    .uniForm .blockLabels .textInput, .uniForm .blockLabels input.zemText, .uniForm.blockLabels .textInput, .uniForm.blockLabels input.zemText, .uniForm .blockLabels select, .uniForm.blockLabels select, .uniForm .blockLabels textarea, .uniForm.blockLabels textarea{
      display: block; width: auto;
    }
    .uniForm .textInput, .uniForm input.zemText, .uniForm select, .uniForm textarea{ 
      padding: 2px; 
    }
    .uniForm .inlineLabels .inlineLabel, .uniForm.inlineLabels .inlineLabel, .uniForm .blockLabels .inlineLabel, .uniForm.blockLabels .inlineLabel{
      float: none; display: inline; width: auto; margin: 0;
    }

/* Custom buttons (originally by Aleksandar Vacic - http://aplus.rs/lab/rounded-form-buttons/),
   Modified by Dragan Babić (http://sprawsm.com/) */
/* Usage - <span class="button"><button type="submit">primary</button></span> */
.button,
  .button a,
  .button button,
  .button input{ background-color: transparent; background-image: url(../images/buttons/primary_button.png); background-repeat: no-repeat; }
.button:active,
  .button a:active,
  .button button:active,
  .button input:active{ background-color: transparent; background-image: url(../images/buttons/primary_button-pressed.png); }
.button{ background-position: 0 50%; padding: 12px 0 12px 12px; }
  .button a,
  .button button,
  .button input{ background-position: 100% 50%; border: none; margin: 0 0 0 -8px; padding: 12px 12px 12px 8px;
  /*                                                                         |____________________________| */
  /*                                                                                       |                */
  /*                                                                               Values must match!       */
  cursor: pointer; white-space: nowrap; }