// dimensions @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-body-color: #fff; // the centered area with the site in it @site-window-color: #f4f4f4; // outside that, filling the rest of the browser window header, hgroup, section, footer, aside, nav, article, figure, img { display: block; } body { margin: 0; padding: 0; color: #000; font: 14px "Liberation Sans", Arimo, Arial, sans-serif; // Styles for the tag within ckeditor background: @site-body-color; width: @site-main-body-width; margin: 0 auto; &.real_body_tag { // revert the above for the on the real site background: @site-window-color; width: auto; margin: 0; } } // try to make the content of the editor widget approximately the same size as // the content will be displayed #cke_content { margin-right: -15px; margin-left: -15px; } #centerer { position: relative; background: @site-body-color; margin: 15px 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; } @nav-padding: 10px; nav { float: left; width: @nav-width - 2*@nav-padding; padding: @nav-padding; h3 { span { color: @site-body-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 3*@site-gutter-width @site-gutter-width; background: @site-body-color; } footer { clear: both; width: @site-width - 2*@site-gutter-width; padding: @site-gutter-width; text-align: center; font-size: 80%; } #wfpl_messages { border: 2px solid red; background: #fbb; padding: 5px; margin: 20px 0px; p { font-size: 120%; padding: 5px; margin: 0px; } hr { 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; } .field { margin-bottom: 15px; } div.field_notes { font-size: 12px; line-height: 16px; } fieldset { border: 1px dotted black; padding: 0 15px 15px 15px; margin: 15px 0; position: relative; } legend { padding: 0 6px; font-weight: bold; } div.error { border: 2px solid red; padding: 13px; margin: 20px; background: #fdd; } h1 { font-size: 22px; margin: 20px 0 10px; } h1 + h4.tagline { margin: -10px 0 10px; } h2 { font-size: 19px; margin: 16px 0px 8px; } h2 + h4.tagline { margin: -8px 0 8px; } h3 { font-size: 16px; margin: 12px 0 5px; } h3 + h4.tagline { margin: -5px 0 5px; } h4 { font-size: 12px; margin: 10px 0 3px; } h4 + h4.tagline { margin: -3px 0 3px; } h1, h2, h3, h4 { font-weight: bold; } h4.tagline { font-weight: normal } p.quote { margin: 15px 35px; } p.attrib { margin: -15px 0 15px 100px; } // floating images (from pastable example code on admin_images) span.wfpl_ifl { display: block; float: left; clear: left; font-size: 10px; color: black; 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; color: black; 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 + *, article > :first-child, section > :first-child, nav > :first-child, div > :first-child, .first { margin-top: 0px; } td > :last-child, th > :last-child, fieldset > :last-child, article > :last-child, section > :last-child, nav > :last-child, div > :last-child, .last { margin-bottom: 0px; } .wide_field { box-sizing: border-box; width: 100%; }