/*
  -----------------------------------------------
  Base Styles (these are the only styles shown to old browsers and mobile devices)
  ----------------------------------------------- */

/*  =Elements
  ----------------------------------------------- */
  body {
    margin: 2em 4em;
    background-color: #fff;
    font: 0.7em/1.6em Arial, Helvetica, sans-serif;
    color: #666666;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  table,
  fieldset,
  form,
  ul,
  ol,
  dl,
  p {
    margin: 1em 0;
    font-size: 1em;
  }
  h1 {
    font-size: 2em;
  }
  h2 {
    font-size: 1.8em;
  }
  h3 {
    font-size: 1.6em;
  }
  h4 {
    font-size: 1.4em;
  }
  h5 {
    font-size: 1.2em;
  }
  h1,
  h2, 
  h3, 
  h4, 
  h5, 
  h6 {
    color: #333333;
  }
  a {
    color: #cc0099;
    text-decoration: none;
  }
  a:hover,
  a:active {
    text-decoration: underline;
  }
  a img {
    border-width: 0;
  }
  blockquote {
    margin: 0;
    font-style: italic;
  }
  cite {
    display: block;
    font-style: normal;
    font-weight: bold;
  }
  ol,
  ul {
    padding-left: 1.5em;
  }
  li {
    margin-left: 0;
  }
  button {
    cursor: pointer;
  }

/*  =Tables
  -----------------------------------------------
  TBD: These seem to be safe enough to apply to all tables. They're currently being used in the following places:
  
  #recipe .ingredients
  #tweakForm .compareIngredients
  ----------------------------------------------- */
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th,
  td {
    border-width: 0 0 1px 0;
    border-style: solid;
  }
  tr:last-child th,
  tr:last-child td {
    border-width: 0;
  }
  thead th,
  thead td {
    border-width: 0 0 3px 0;
  }
  th,
  td {
    text-align: right;
    padding: 0.5em 0.5em 0.5em 0;
  }
  th:first-child,
  td:first-child {
    text-align: left;
  }