style.less

   1 // dimensions
   2 @site-width: 940px;
   3 @nav-width: 200px;
   4 @site-gutter-width: 18px;
   5 @site-main-body-width: @site-width - 2*@site-gutter-width - @nav-width;
   6
   7 // colors
   8 @site-header-color: #ddf;
   9 @nav-color:    #dff;
  10 @site-body-color:   #fff;
  11 @site-window-color: #eee;
  12 @site-footer-color: #ddf;
  13 @site-gutter-color: #fff;
  14
  15 header, hgroup, section, footer, aside, nav, article, figure, img {
  16         display: block;
  17 }
  18
  19 body {
  20         margin: 0;
  21         padding: 0;
  22         color: #000;
  23         background: @site-window-color;
  24         font: 14px "Verdana", sans-serif;
  25 }
  26
  27 #centerer {
  28         position: relative;
  29         background: @nav-color;
  30         margin: 15px auto;
  31         width: @site-width;
  32         -moz-box-shadow: 2px 2px 15px #777;
  33         -webkit-box-shadow: 2px 2px 15px #777;
  34         box-shadow: 2px 2px 13px #777;
  35 }
  36
  37 header {
  38         width: @site-width;
  39         height: 100px;
  40         background: @site-header-color;
  41 }
  42
  43 @nav-padding: 10px;
  44 nav {
  45         float: left;
  46         width: @nav-width - 2*@nav-padding;
  47         padding: @nav-padding;
  48         background: @nav-color;
  49         a {
  50                 display: block;
  51         }
  52 }
  53
  54 #main-body {
  55         float: left;
  56         width: @site-main-body-width;
  57         padding: @site-gutter-width @site-gutter-width @site-gutter-width @site-gutter-width;
  58         background: @site-body-color;
  59 }
  60
  61 footer {
  62         clear: both;
  63         width: @site-width;
  64         height: 50px;
  65         background: @site-footer-color;
  66 }
  67
  68 #wfpl_messages {
  69         border: 2px solid red;
  70         background: #fbb;
  71         padding: 5px;
  72         margin: 20px 0px;
  73         p {
  74                 font-size: 120%;
  75                 padding: 5px;
  76                 margin: 0px;
  77         }
  78         hr {
  79                 height: 1px;
  80         }
  81 }
  82
  83 #admin_links {
  84         background: #fdd;
  85         padding: 3px;
  86         margin-bottom: 15px;
  87 }
  88
  89 .caption {
  90         margin-top: 15px;
  91         font-weight: bold;
  92 }
  93 .field {
  94         margin-bottom: 15px;
  95 }
  96 div.field_notes {
  97         font-size: 12px;
  98         line-height: 16px;
  99 }
 100 fieldset {
 101         border: 1px dotted black;
 102         padding: 0 15px 15px 15px;
 103         margin: 15px 0;
 104         position: relative;
 105 }
 106 legend {
 107         padding: 0 6px;
 108         font-weight: bold;
 109 }
 110 div.error {
 111         border: 2px solid red;
 112         padding: 13px;
 113         margin: 20px;
 114         background: #fdd;
 115 }
 116
 117 // floating images (from pastable example code on admin_images)
 118 span.wfpl_ifl {
 119         display: block;
 120         float: left;
 121         font-size: 10px;
 122         text-align: right;
 123         background-repeat: no-repeat;
 124         background-position: left top;
 125         margin: 0 10px 2px 0;
 126 }
 127 span.wfpl_ifr {
 128         display: block;
 129         float: right;
 130         font-size: 10px;
 131         text-align: right;
 132         background-repeat: no-repeat;
 133         background-position: left top;
 134         margin: 0 0 10px 2px;
 135 }
 136 div.wfpl_ic {
 137         margin: 15px auto;
 138         font-size: 10px;
 139         text-align: right;
 140         background-repeat: no-repeat;
 141         background-position: center top;
 142 }
 143
 144 // hack so that vertical margins are only between siblings for the most part
 145 td > :first-child,
 146 th > :first-child,
 147 legend + *,
 148 article > :first-child,
 149 section > :first-child,
 150 nav > :first-child,
 151 div > :first-child,
 152 .first {
 153         margin-top: 0px;
 154 }
 155 td > :last-child,
 156 th > :last-child,
 157 fieldset > :last-child,
 158 article > :last-child,
 159 section > :last-child,
 160 nav > :last-child,
 161 div > :last-child,
 162 .last {
 163         margin-bottom: 0px;
 164 }