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