Refactor SCSS into separate files

src/css/main.scss

@@ -70,173 +70,10 @@ $layer-normal: 0;
 $layer-screen: 5;
 $layer-dialog: 10;
 
-// Common //////////////////////////////////////////////////////////////////////////////////////////////////////////////
-
-body {
-    background: $color-background url('/images/ice.png');
-    font-size: 10px;
-}
-
-button {
-    background: $color-gray-faint;
-    border: 0.1em solid $color-gray-medium;
-    border-radius: 1em;
-    color: $color-active;
-    cursor: pointer;
-    font-size: $font-size-normal;
-    font-weight: bold;
-    padding: 0.1em 1em;
-
-    &:hover {
-        background: white;
-        color: $color-active-hover;
-    }
-}
-
-h1 {
-    margin-bottom: 1em;
-
-    * { display: inline; }
-
-    img {
-        position: relative; height: 10em; width: 10em;
-        margin-right: 1em;
-        vertical-align: bottom;
-    }
-
-    p {
-        font-family: $font-family-header;
-        font-size: $font-size-xx-large;
-        position: relative; top: -0.5em;
-    }
-}
-
-h2 {
-    margin-bottom: 1em;
-
-    * { display: inline; }
-
-    img {
-        position: relative; height: 4em; width: 4em;
-        margin-right: 1em;
-        vertical-align: bottom;
-    }
-
-    p {
-        font-family: $font-family-header;
-        font-size: $font-size-x-large;
-        position: relative; top: -0.25em;
-    }
-}
-
-h3 {
-    font-family: $font-family-normal;
-    font-weight: bold;
-
-    p { font-size: $font-size-normal; }
-}
-
-p {
-    font-family: $font-family-normal;
-    font-size: $font-size-normal;
-}
-
-input {
-    font-family: $font-family-input;
-    font-size: $font-size-normal;
-}
-
-label {
-    font-family: $font-family-normal;
-    font-size: $font-size-normal;
-}
-
-.centered {
-    text-align: center;
-}
-
-.content {
-    background: $color-content;
-    box-shadow: 10px 10px 20px #666;
-    margin: 2em auto;
-    max-width: 96em;
-    position: relative;
-    width: 100%;
-}
-
-.error { background: $color-error; }
-
-.error-new { background: $color-error-new; }
-
-// Views ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
-
-.view__footer {
-    background: $color-footer;
-    color: $color-footer-text;
-    margin-top: 2em;
-
-    a {
-        color: $color-footer-text;
-    }
-
-    .divider {
-        position: relative; height: 3.2em; width: 100%;
-        clear: both;
-    }
-
-    .divider.top {
-        background: $color-dirt url('/images/grass_side.png');
-    }
-
-    .left, .center, .right  {
-        position: relative; width: 33%;
-        float: left;
-        padding: 2em;
-
-        p {
-            font-family: sans-serif;
-            font-size: $font-size-small;
-            padding-bottom: 1.0em;
-
-            &:last-child {
-                padding-bottom: 0;
-            }
-        }
-
-        h2 {
-            padding-bottom: 1.0em;
-
-            p {
-                font-family: $font-family-header;
-                font-size: 1.5em;
-            }
-        }
-    }
-
-    .divider.bottom {
-        background: $color-bedrock url('/images/bedrock.png');
-    }
-}
-
-.view__header {
-    background: $color-brick-light url('/images/stone_brick_light.png');
-    position: relative; height: 10em;
-    margin-top: 5em;
-
-    h1 { position: relative; top: -3em; left: -3em; }
-
-    .divider {
-        background: $color-brick-dark url('/images/stone_brick.png');
-        position: absolute; bottom: 0; height: 3.2em; width: 100%;
-    }
-}
-
-.view__screen {
-    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
-    display: none;
-    z-index: $layer-screen;
-}
-
 // Child Stylesheets ///////////////////////////////////////////////////////////////////////////////////////////////////
 
+@import 'classes';
+@import 'tags';
+@import 'views';
+
 @import 'templates/index';