metaform/style.less

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