metaform/style.less

   1 // dimensions
   2 @site-width: 940px;
   3 @nav-width: 200px;
   4 @gutter-width: 18px;
   5 @main-body-width: @site-width - @gutter-width - @nav-width;
   6
   7 // colors
   8 @framing-color: #ccf;
   9 @gutter-color: #fff;
  10
  11 body {
  12         margin: 0;
  13         padding: 0;
  14         color: #000;
  15         background: #fff;
  16         font: 14px "Verdana", sans-serif;
  17 }
  18
  19 #centerer {
  20         position: relative;
  21         margin: 0 auto;
  22         width: @site-width;
  23 }
  24
  25 header {
  26         width: @site-width;
  27         height: 100px;
  28         background: @framing-color;
  29         border-bottom: @gutter-width solid @gutter-color;
  30 }
  31
  32 nav {
  33         float: left;
  34         width: @nav-width - 20px;
  35         padding: 10px;
  36         border-right: @gutter-width solid @gutter-color;
  37         background: @framing-color;
  38         a {
  39                 display: block;
  40         }
  41 }
  42
  43 #main-body {
  44         float: left;
  45         width: @main-body-width;
  46 }
  47
  48 footer {
  49         clear: both;
  50         width: @site-width;
  51         height: 50px;
  52         background: @framing-color;
  53         border-top: @gutter-width solid @gutter-color;
  54 }
  55
  56 #wfpl_messages {
  57         border: 2px solid red;
  58         background: #fbb;
  59         padding: 5px;
  60         margin: 20px 0px;
  61         p {
  62                 font-size: 120%;
  63                 padding: 5px;
  64                 margin: 0px;
  65         }
  66         hr {
  67                 height: 1px;
  68         }
  69 }
  70 .caption {
  71         margin-top: 15px;
  72         font-weight: bold;
  73 }
  74 .field {
  75         margin-bottom: 15px;
  76 }
  77 div.field_notes {
  78         font-size: 12px;
  79         line-height: 16px;
  80 }
  81 fieldset {
  82         border: 1px dotted black;
  83         padding: 0 15px 15px 15px;
  84         margin: 15px 0;
  85         position: relative;
  86 }
  87 legend {
  88         padding: 0 6px;
  89         font-weight: bold;
  90 }
  91 div.error {
  92         border: 2px solid red;
  93         padding: 13px;
  94         margin: 20px;
  95         background: #fdd;
  96 }
  97
  98 /* hack so that vertical margins are only between siblings for the most part */
  99 td > :first-child,
 100 th > :first-child,
 101 legend + *,
 102 article > :first-child,
 103 section > :first-child,
 104 nav > :first-child,
 105 div > :first-child,
 106 .first {
 107         margin-top: 0px;
 108 }
 109 td > :last-child,
 110 th > :last-child,
 111 fieldset > :last-child,
 112 article > :last-child,
 113 section > :last-child,
 114 nav > :last-child,
 115 div > :last-child,
 116 .last {
 117         margin-bottom: 0px;
 118 }