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         h3 {
  50                 span {
  51                         color: @nav-color;
  52                 }
  53         }
  54         h3.current {
  55                 span {
  56                         color: inherit;
  57                 }
  58                 a {
  59                         text-decoration: none;
  60                 }
  61         }
  62 }
  63
  64 #main-body {
  65         float: left;
  66         width: @site-main-body-width;
  67         padding: @site-gutter-width @site-gutter-width 3*@site-gutter-width @site-gutter-width;
  68         background: @site-body-color;
  69 }
  70
  71 footer {
  72         clear: both;
  73         width: @site-width - 2*@site-gutter-width;
  74         padding: @site-gutter-width;
  75         text-align: center;
  76         background: @site-footer-color;
  77         font-size: 80%;
  78 }
  79
  80 #wfpl_messages {
  81         border: 2px solid red;
  82         background: #fbb;
  83         padding: 5px;
  84         margin: 20px 0px;
  85         p {
  86                 font-size: 120%;
  87                 padding: 5px;
  88                 margin: 0px;
  89         }
  90         hr {
  91                 height: 1px;
  92         }
  93 }
  94
  95 #admin_links {
  96         background: #fdd;
  97         padding: 3px;
  98         margin-bottom: 15px;
  99 }
 100
 101 .caption {
 102         margin-top: 15px;
 103         font-weight: bold;
 104 }
 105 .field {
 106         margin-bottom: 15px;
 107 }
 108 div.field_notes {
 109         font-size: 12px;
 110         line-height: 16px;
 111 }
 112 fieldset {
 113         border: 1px dotted black;
 114         padding: 0 15px 15px 15px;
 115         margin: 15px 0;
 116         position: relative;
 117 }
 118 legend {
 119         padding: 0 6px;
 120         font-weight: bold;
 121 }
 122 div.error {
 123         border: 2px solid red;
 124         padding: 13px;
 125         margin: 20px;
 126         background: #fdd;
 127 }
 128
 129 // floating images (from pastable example code on admin_images)
 130 span.wfpl_ifl {
 131         display: block;
 132         float: left;
 133         clear: left;
 134         font-size: 10px;
 135         text-align: right;
 136         background-repeat: no-repeat;
 137         background-position: left top;
 138         margin: 0 10px 2px 0;
 139 }
 140 span.wfpl_ifr {
 141         display: block;
 142         float: right;
 143         clear: right;
 144         font-size: 10px;
 145         font-weight: normal;
 146         text-align: right;
 147         background-repeat: no-repeat;
 148         background-position: left top;
 149         margin: 0 0 2px 10px;
 150 }
 151 div.wfpl_ic {
 152         margin: 15px auto;
 153         font-size: 10px;
 154         font-weight: normal;
 155         text-align: right;
 156         background-repeat: no-repeat;
 157         background-position: center top;
 158 }
 159
 160 // hack so that vertical margins are only between siblings for the most part
 161 td > :first-child,
 162 th > :first-child,
 163 legend + *,
 164 article > :first-child,
 165 section > :first-child,
 166 nav > :first-child,
 167 div > :first-child,
 168 .first {
 169         margin-top: 0px;
 170 }
 171 td > :last-child,
 172 th > :last-child,
 173 fieldset > :last-child,
 174 article > :last-child,
 175 section > :last-child,
 176 nav > :last-child,
 177 div > :last-child,
 178 .last {
 179         margin-bottom: 0px;
 180 }