--- a/static/css/wikked.less	Wed Dec 11 21:51:51 2013 -0800
+++ b/static/css/wikked.less	Thu Dec 12 21:54:04 2013 -0800
@@ -1,232 +1,12 @@
-// Includes
-@import "bootstrap.less";
+// Start with Bootstrap.
+@import "../bootstrap/less/bootstrap.less";
+
+// Now import our styles.
+@import "wikked/base.less";
+@import "wikked/main.less";
+@import "wikked/page.less";
+@import "wikked/alerts.less";
+
+// End with other miscellaneous stuff.
 @import "syntax.css";
 @import "wmd.css";
-
-// Constants
-@colorBlue: #0F1FFF;
-@colorBlueDark: #1D3982;
-@colorOrange: #B03500;
-@colorGreen: #B6CC95;
-@colorGreenDark: #496B15;
-@colorPage: #FFFFFF;
-@colorFooter: #E5E7FF;
-@colorCode: #523C37;
-
-
-// Macros
-.box-shadow(@style, @c) {
-  box-shadow:         @style @c;
-  -webkit-box-shadow: @style @c;
-  -moz-box-shadow:    @style @c;
-}
-
-// Main tags
-body {
-    background: url('../img/gray_jean.png');
-    //background-image: url(http://basehold.it/i/27);
-}
-
-// Global classes
-a {
-    text-decoration: none;
-    color: @colorBlue;
-    &:link { color: @colorBlue; }
-    &:visited { color: @colorBlue; }
-    &:hover { color: @colorBlue; text-decoration: underline; }
-    &:active { color: @colorBlue; }
-}
-a.wiki-link.missing,
-a.wiki-meta-link.missing {
-    color: @colorOrange;
-    &:hover { color: @colorOrange; text-decoration: underline; }
-}
-.decorator {
-    text-transform: uppercase;
-    font-weight: lighter;
-    font-size: 0.7em;
-    letter-spacing: 0.1em;
-    color: @colorBlue;
-    .rev_id {
-        font-family: @monoFontFamily;
-    }
-}
-.tooltip {
-    font-size: @baseFontSize*0.75;
-}
-.alert {
-    font-size: @fontSizeSmall;
-}
-
-// Main classes
-.wrapper>nav,
-.wrapper>footer {
-    color: @grayLight;
-    font-size: @fontSizeSmall;
-    line-height: (@baseLineHeight * 2);
-
-    a {
-        padding: 0 1em;
-        display: inline-block;
-        text-decoration: none;
-        color: @grayLight;
-        &:link { color: @grayLight; }
-        &:visited { color: @grayLight; }
-        &:hover { color: @linkColorHover; }
-        &:active { color: @grayLight; }
-    }
-}
-.wrapper>article {
-    .box-shadow(0 0 10px, rgb(210, 210, 210));
-    background: @colorPage;
-    overflow: hidden;
-
-    header {
-        background: @colorBlueDark;
-        color: @colorPage;
-    }
-    footer {
-        background: @colorFooter;
-        border-top: 1px dashed darken(@colorFooter, 5%);
-    }
-    pre {
-        margin-top: @baseLineHeight;
-    }
-}
-.wrapper>article>header,
-.wrapper>article>section,
-.wrapper>article>footer {
-    padding: @baseLineHeight;
-}
-.wrapper>footer {
-    font-size: @fontSizeMini;
-}
-.special>article {
-    background: @colorGreen;
-}
-.special>article header {
-    background: @colorGreenDark;
-}
-.special>article footer {
-    background: @colorGreen;
-}
-
-// Search
-form.form-search {
-    display: inline-block;
-    margin: 0;
-
-    .search-query {
-        font-size: @fontSizeSmall;
-        height: @fontSizeSmall * 1.5;
-    }
-}
-ul.search-results {
-    list-style: none;
-}
-b.match {
-    padding: 0 0.2em;
-    background: #ffeb84;
-}
-
-// Page editing
-#page-edit {
-    textarea {
-        height: 10em;
-        font-size: @baseFontSize;
-        font-family: @monoFontFamily;
-        margin-bottom: 0;
-        border-radius: 0;
-    }
-}
-#wmd-form-wrapper>section {
-    margin: 1em;
-}
-#wmd-input-grip {
-    background: @grayLighter;
-    border: 1px solid @grayLight;
-    border-width: 0 1px 1px 1px;
-    height: 12px;
-    cursor: ns-resize;
-}
-#wmd-preview-button span {
-    background: url(../img/markdown-32x20.png);
-    width: 32px;
-    height: 20px;
-}
-/*#wmd-preview-wrapper {
-    border: 1px dashed @colorBlueDark;
-
-    h3 {
-        margin: 0.5em 1em 0.5em 1em;
-    }
-    #wmd-preview {
-        margin: 1em;
-        background: none;
-    }
-}
-#wmd-button-bar li {
-    margin-left: 0;
-}*/
-.preview-wiki-meta {
-    .meta-name {
-        background: @colorBlueDark;
-        color: @colorPage;
-        padding: 0.2em 0.4em 0.2em 0.6em;
-        border-radius: 0.5em 0 0 0.5em;
-        font-variant: small-caps;
-        letter-spacing: 0.18em;
-    }
-    .meta-value {
-        background: @colorFooter;
-        color: black;
-        padding: 0.2em 0.6em 0.2em 0.4em;
-        border-radius:  0 0.5em 0.5em 0;
-    }
-}
-.commit-meta {
-    margin-top: 1em;
-    margin-bottom: 1em;
-}
-
-// Page alerts
-article .alert {
-    float: right;
-    margin-left: -100%;
-    position: relative;
-    width: 50%;
-    -webkit-border-radius: 0;
-    -moz-border-radius: 0;
-    border-radius: 0;
-}
-
-// Corner ribbon
-.makeRibbon(@bgColor) {
-    background-color: @bgColor;
-    overflow: hidden;
-    transform: translate(50%, 0) translate(-3em, 2.05em) rotate(45deg);
-    -moz-transform: translate(50%, 0) translate(-3em, 2.05em) rotate(45deg);
-    -webkit-transform: translate(50%, 0) translate(-3em, 2.05em) rotate(45deg);
-    box-shadow: 0 0 1em rgba(0, 0, 0, 0.4);
-    -moz-box-shadow: 0 0 1em rgba(0, 0, 0, 0.4);
-    -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.4);
-    float: right;
-}
-.makeRibbonContent(@borderColor, @textColor) {
-    border: 1px solid @borderColor;
-    color: @textColor;
-    display: block;
-    margin: 0.05em 0 0.05em 0;
-    padding: 0.5em 5em;
-    text-align: center;
-    text-shadow: 0 0 0.5em rgba(1, 1, 1, 0.2);
-}
-.ribbon {
-    .makeRibbon(lighten(@colorOrange, 10%));
-    float: right;
-
-    .ribbon-inner {
-        .makeRibbonContent(@colorOrange, @colorPage);
-        a { color: #fff; text-decoration: none; }
-    }
-}