topical media & game development

talk show tell print

basic-css-17-Tr-It-Out-example17-4.css / css



  * {
      font-family: monospace;
  }
  page {
      display: block;
      background: #fff url('fruit_veg_web.jpg') no-repeat fixed center center;
  }
  recipe {
      display: block;
      padding: 10px;
      margin: 10px auto;
      min-width: 500px;
      max-width: 900px;
      /* Moz proprietary opacity property */
      -moz-opacity: 0.7;
      /* Safari / KHTML proprietary opacity property */
      -khtml-opacity: 0.7;
      /* Microsoft proprietary filter property */
      filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
      /* CSS 3 opacity property */
      opacity: 0.7;
      background: url('cross_hatch.jpg') repeat;
  }
  ingredients {
      display: table;
      width: 100%;
      margin-bottom: 5px;
      table-layout: fixed;
      border-collapse: collapse;
      empty-cells: hide;
  }
  title {
      display: table-caption;
      text-align: left;
      margin-bottom: 5px;
      text-transform: lowercase;
      font-size: 160%;
      padding: 5px;
      letter-spacing: 10px;
      font-weight: bold;
  }
  columns {
      display: table-column-group;
  }
  columns > * {
      display: table-column;
  }
  headings {
      display: table-header-group;
  }
  ingredientsbody {
      display: table-row-group;
  }
  heading, ingredient {
      display: table-row;
  }
  heading > * {
      font-weight: bold;
      font-size: 150%;
      color: black;
      text-align: center;
  }
  heading > *, ingredient > * {
      display: table-cell;
      padding: 5px;
      text-transform: lowercase;
  }
  ingredient > * {
      font-size: 130%;
  }
  ingredient > *:hover,
  heading > *:hover,
  directions:hover,
  suggestions:hover,
  title:hover {
      background: black;
      color: white;
      font-weight: bold;
  }
  directions, suggestions {
      display: block;
      font-size: 130%;
  }
  directions {
      margin: 17px 0 15px 0;
      padding: 0 0 0 45px;
      list-style-type: disc;
  }
  suggestions {
      margin: 22px 0 32px 0;
      padding: 0 5px 0 10px;
  }
  direction {
      display: list-item;
      margin-left: 30px;
      padding-left: 30px;
  }
  really {
      display: inline;
      font-weight: bold;   
  }


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.