style.less

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