comment style.less more

[wfpl-cms.git] / style.less

diff --git a/style.less b/style.less
index cbe6a27..6090928 100644 (file)
--- a/style.less
+++ b/style.less
@@ -1,12 +1,12 @@
 // dimensions
-@site-width: 940px;
-@nav-width: 200px;
-@site-gutter-width: 18px;
+@site-width: 940px; // inside the shadow
+@nav-width: 200px; // inner
+@site-gutter-width: 18px; // padding around nav and main columns
 @site-main-body-width: @site-width - 2*@site-gutter-width - @nav-width;
 
 // colors
 @site-header-color: #ddf;
-@nav-color:    #dff;
+@nav-color:    #dff; // if different than site-body-color: make sure content is taller than nav
 @site-body-color:   #fff;
 @site-window-color: #eee;
 @site-footer-color: #ddf;
@@ -20,14 +20,17 @@ body {
        margin: 0;
        padding: 0;
        color: #000;
-       background: @site-window-color;
+       background: @site-body-color; // overruled below except in wysiywyg
        font: 14px "Verdana", sans-serif;
 }
+body.real_body_tag { // not the wysiwyg body
+       background: @site-window-color;
+}
 
 #centerer {
        position: relative;
        background: @nav-color;
-       margin: 0 auto;
+       margin: 15px auto;
        width: @site-width;
        -moz-box-shadow: 2px 2px 15px #777;
        -webkit-box-shadow: 2px 2px 15px #777;
@@ -46,23 +49,35 @@ nav {
        width: @nav-width - 2*@nav-padding;
        padding: @nav-padding;
        background: @nav-color;
-       a {
-               display: block;
+       h3 {
+               span {
+                       color: @nav-color;
+               }
+       }
+       h3.current {
+               span {
+                       color: inherit;
+               }
+               a {
+                       text-decoration: none;
+               }
        }
 }
 
 #main-body {
        float: left;
        width: @site-main-body-width;
-       padding: @site-gutter-width @site-gutter-width @site-gutter-width @site-gutter-width;
+       padding: @site-gutter-width @site-gutter-width 3*@site-gutter-width @site-gutter-width;
        background: @site-body-color;
 }
 
 footer {
        clear: both;
-       width: @site-width;
-       height: 50px;
+       width: @site-width - 2*@site-gutter-width;
+       padding: @site-gutter-width;
+       text-align: center;
        background: @site-footer-color;
+       font-size: 80%;
 }
 
 #wfpl_messages {
@@ -79,6 +94,20 @@ footer {
                height: 1px;
        }
 }
+
+#admin_links {
+       background: #fdd;
+       padding: 3px;
+       margin-bottom: 15px;
+}
+
+code.html {
+       display: block;
+       font: 12px monospace;
+       border: 1px solid black;
+       background: #ccc;
+}
+
 .caption {
        margin-top: 15px;
        font-weight: bold;
@@ -107,7 +136,38 @@ div.error {
        background: #fdd;
 }
 
-/* hack so that vertical margins are only between siblings for the most part */
+// floating images (from pastable example code on admin_images)
+span.wfpl_ifl {
+       display: block;
+       float: left;
+       clear: left;
+       font-size: 10px;
+       text-align: right;
+       background-repeat: no-repeat;
+       background-position: left top;
+       margin: 0 10px 2px 0;
+}
+span.wfpl_ifr {
+       display: block;
+       float: right;
+       clear: right;
+       font-size: 10px;
+       font-weight: normal;
+       text-align: right;
+       background-repeat: no-repeat;
+       background-position: left top;
+       margin: 0 0 2px 10px;
+}
+div.wfpl_ic {
+       margin: 15px auto;
+       font-size: 10px;
+       font-weight: normal;
+       text-align: right;
+       background-repeat: no-repeat;
+       background-position: center top;
+}
+
+// hack so that vertical margins are only between siblings for the most part
 td > :first-child,
 th > :first-child,
 legend + *,
@@ -128,32 +188,3 @@ div > :last-child,
 .last {
        margin-bottom: 0px;
 }
-
-/************ FLOATING IMAGES (from CMS) **************/
-span.wfpl_ifl {
-       display: block;
-       float: left;
-       font-size: 10px;
-       text-align: right;
-       padding: 4px 15px 7px 0;
-}
-span.wfpl_ifr {
-       display: block;
-       float: right;
-       font-size: 10px;
-       text-align: right;
-       background-repeat: no-repeat;
-       background-position: top left;
-}
-span.float_left img, span.float_right img {
-       display: block;
-       padding-bottom: 1px;
-}
-span.float_center img {
-       display: inline;
-}
-div.mid_pic {
-       margin: 15px auto;
-       font-size: 10px;
-       text-align: right;
-}