@site-width: 940px;
@nav-width: 200px;
@gutter-width: 18px;
-@main-body-width: @site-width - @gutter-width - @nav-width;
+@main-body-width: @site-width - 2*@gutter-width - @nav-width;
// colors
-@framing-color: #ccf;
+@header-color: #ddf;
+@nav-color: #dff;
+@body-color: #fff;
+@window-color: #eee;
+@footer-color: #ddf;
@gutter-color: #fff;
+
body {
margin: 0;
padding: 0;
color: #000;
- background: #fff;
+ background: @window-color;
font: 14px "Verdana", sans-serif;
}
#centerer {
position: relative;
+ background: @nav-color;
margin: 0 auto;
width: @site-width;
+ -moz-box-shadow: 2px 2px 15px #777;
+ -webkit-box-shadow: 2px 2px 15px #777;
+ box-shadow: 2px 2px 13px #777;
}
header {
width: @site-width;
height: 100px;
- background: @framing-color;
- border-bottom: @gutter-width solid @gutter-color;
+ background: @header-color;
}
+@nav-padding: 10px;
nav {
float: left;
- width: @nav-width - 20px;
- padding: 10px;
- border-right: @gutter-width solid @gutter-color;
- background: @framing-color;
+ width: @nav-width - 2*@nav-padding;
+ padding: @nav-padding;
+ background: @nav-color;
a {
display: block;
}
#main-body {
float: left;
width: @main-body-width;
+ padding: @gutter-width @gutter-width @gutter-width @gutter-width;
+ background: @body-color;
}
footer {
clear: both;
width: @site-width;
height: 50px;
- background: @framing-color;
- border-top: @gutter-width solid @gutter-color;
+ background: @footer-color;
}
#wfpl_messages {