/* =============================================================================
   Base
   ========================================================================== */

body {
  line-height: 24px;
  font-size: 15px;
}


/* =============================================================================
   Typography
   ========================================================================== */

/*
 * TODO: Check if all cases are covered
 */
h1, h2, h3, h4, h5, h6,
p,
ol, ul, dl,
blockquote,
pre, code, kbd, samp {
  margin: 0 0 24px 0;
}

/*
 * Fixes line-height issues
 * - When setting small to a block level element this is causes a collapse of
 *   lines. We'll take that for granted for pixel perfectness :)
 */
small {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * TODO: Fix problems with ghost margin below elements (hide elements for now)
 * - Images have ghost margin if inside <a>
 * - SVG's have ghost margin by default
 */
img, svg {
  display: none;
  line-height: 0;
}

/*
 * Browser defaults for video and audio are horrible. Use custom plugins to 
 * to convert these items in better stylable elements
 */
audio, video {
  display: none;
}


/* =============================================================================
   Forms
   ========================================================================== */

form {
  overflow: auto;
}

fieldset {
  margin-bottom: 24px;
  padding: 0 17px;
}

fieldset > div,
fieldset > p {
  margin: 24px 0;
}

fieldset > :last-child {
  margin-bottom: 23px;
}

fieldset legend {
  margin: auto;
}

input, textarea {
  background: #fff;
  border: 1px solid #c0c0c0;
  line-height: 24px;
  margin: -3px 0;
  outline: none;
  padding: 2px 5px;
}

input {
  height: 24px;
}

textarea {
  min-height: 144px;
}

input[type="checkbox"],
input[type="radio"] {
  height: auto;
  width: 20px;
}

input[type="checkbox"] {
  margin-top: -1px;
}

input[type="button"],
input[type="image"],
input[type="reset"],
input[type="submit"],
button[type="button"],
button[type="reset"],
button[type="submit"] {
  background-color: #c0c0c0;
  border: none;
  display: inline;
  height: 28px;
  line-height: 24px;
  margin: -3px 0;
  padding: 0 8px;
}

/*
 * TODO: Fix problems with ghost margin below element (hide element for now)
 */
input[type="image"] {
  display: none;
}

select {
  background: #feffff;
  border: 1px solid #c0c0c0;
  height: 29px;
  margin: -7px 0;
  outline: none;
  padding: 4px;
}

select option {
  padding: 3px;
  height: 12px;
}

/*
 * Webkit reset
 */
[type=checkbox] {
  -moz-appearance: checkbox;
  -webkit-appearance: checkbox;
}

/*
 * Not supported because of ridiculous or lacking browser implementation, use
 * custom plugin to convert these items in better stylable form elements for
 * now
 */
datalist, input[type=range], keygen,
meter, optgroup, output, progress {
  display: none;
}

/*
 * Standards for form input validation & hints
 */
.validation-state {
  padding: 6px 15px 7px 15px;
}

.input-hint {
  font-size: 13px;
  margin: 7px 0 -7px 0;
}


/* =============================================================================
   Tables
   ========================================================================== */

th, td {
  padding: 0;
  text-align: left;
}