Merge in alternate CSS

Gemfile

@@ -32,7 +32,7 @@ gem 'tinymce-rails', '~> 3.5.9'
 gem 'sass', '~> 3.3.4'
 gem 'sass-rails', '~> 3.2.6'
 
-gem 'font-awesome-sass', '~> 4.0.3.1'
+gem 'font-awesome-sass', '~> 4.1.0.0'
 gem 'bourbon', '~> 3.1.8'
 gem 'neat', '~> 1.6.0'
 gem 'haml'

Gemfile.lock

@@ -111,7 +111,7 @@ GEM
     faraday (0.9.0)
       multipart-post (>= 1.2, < 3)
     ffi (1.9.3)
-    font-awesome-sass (4.0.3.1)
+    font-awesome-sass (4.1.0)
       sass (~> 3.2)
     gruff (0.3.7)
     haml (4.0.5)
@@ -277,7 +277,7 @@ DEPENDENCIES
   exceptional (~> 2.0.33)
   factory_girl_rails (~> 4.4.1)
   faraday (~> 0.9.0)
-  font-awesome-sass (~> 4.0.3.1)
+  font-awesome-sass (~> 4.1.0.0)
   gruff (~> 0.3.6)
   haml
   jquery-rails (~> 2.0.2)

app/assets/stylesheets/themes/flat/_variables.scss

@@ -0,0 +1,117 @@
+/*
+  Theme Path
+*/
+
+$theme-name: 'flat';
+$theme-path: "themes/#{$theme-name}";
+
+/*
+  Neat Overrides
+*/
+
+$max-width: 1140px;
+$gutter: em(20);
+
+/*
+  Grid Debugging
+*/
+
+// $visual-grid: true;
+// $visual-grid-index: 10000;
+// $visual-grid-opacity: 0.5;
+
+/*
+  Neat Breakpoints
+*/
+
+$medium-screen: 640px;
+$large-screen: 860px;
+
+$medium-screen-up: new-breakpoint(min-width $medium-screen 4);
+$large-screen-up: new-breakpoint(min-width $large-screen 8);
+
+/*
+  Typography
+*/
+
+$open-sans: 'Open Sans', sans-serif;
+$montserrat: 'Montserrat', sans-serif;
+$fontawesome: 'FontAwesome';
+$sans-serif: $open-sans;
+
+$base-font-family: $sans-serif;
+$header-font-family: $montserrat;
+ 
+/*
+  Sizes
+*/
+
+$base-font-size: 14px;
+$base-line-height: $base-font-size * 1.5;
+$base-border-radius: 3px;
+
+/*
+  Colours
+*/
+
+$red: #de8650;
+$green: darken(#68cc90, 10);
+$blue: #3379A9;
+$gold: #FFD700;
+
+$dark-blue: darken($blue, 15);
+$deep-blue: darken($dark-blue, 15);
+$dark-gray: #21262A;
+
+$medium-gray: #2F383D;
+
+$light-blue: darken(#2FB0E7, 5);
+$light-gray: darken(#ECF1F5, 5);
+$light-red: #e56c69;
+$light-yellow: #FFF6BF;
+$light-green: #1f7f5c;
+ 
+$base-body-color: white;
+$base-font-color: black;
+$base-accent-color: $blue;
+$base-link-color: $base-accent-color;
+$hover-link-color: lighten($base-accent-color, 15);
+$base-border-color: $light-gray;
+
+$content-color: lighten($light-gray, 5%);
+$error-color: $light-red;
+$notice-color: $light-yellow;
+$success-color: $light-green;
+
+$background-primary: $medium-gray;
+
+$navbar-primary: $blue;
+$navbar-secondary: $light-blue;
+$navbar-border: lighten($dark-gray, 10);
+$navbar-text: white;
+
+$flash-text: white;
+$flash-notice: $blue;
+$flash-success: $green;
+$flash-warning: $red;
+$flash-error: #e56c69;
+
+$input-font-size: $base-font-size;
+$input-primary: white;
+$input-secondary: $blue;
+$input-text: #232323;
+$input-border-width: 2px;
+$input-border-colour: darken($light-gray, 10%);
+$input-padding: 9px;
+$input-border-radius: $base-border-radius;
+
+$button-primary: $blue;
+$button-secondary: $green;
+$button-text: white;
+
+/*
+  Shadows
+*/
+
+$content-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
+$light-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);

app/assets/stylesheets/themes/flat/components/_breadcrumbs.scss

@@ -0,0 +1,17 @@
+/*
+  Breadcrumbs
+*/
+
+.breadcrumbs {
+  @include span-columns(12);
+  margin-bottom: 20px;
+
+  a {
+    display: inline-block;
+    font-size: $base-font-size + 2px;
+  }
+
+  .fa {
+    margin: 0 10px;
+  }
+}

app/assets/stylesheets/themes/flat/components/_comments.scss

@@ -0,0 +1,115 @@
+/*
+  Thread List
+*/
+
+#comments-thread {
+  @include span-columns(12);
+  
+  h3 {
+    margin: 1em 0;
+  }
+}
+
+/*
+  Comment
+*/
+
+.comment {
+  $comment-gutter: 1.4em;
+  $comment-image-padding: 3px;
+  $comment-image-width: 4em;
+  $comment-color: $base-font-color;
+  $comment-background: $light-gray;
+  $comment-detail-color: transparentize($comment-color, .5);
+  $comment-image-vert-alignment: top;
+
+  position: relative;
+  width: 100%;
+  margin-bottom: $base-line-height;
+  padding-bottom: 1em;
+  border-bottom: 1px solid $light-gray;
+
+  .comment-image,
+  .comment-content {
+    display: table-cell;
+    vertical-align: $comment-image-vert-alignment;
+  }
+
+  .comment-image {
+    padding-right: $comment-gutter;
+
+    > img {
+      width: $comment-image-width;
+      height: auto;
+      border-radius: $base-border-radius;
+      padding: $comment-image-padding;
+      background: $comment-background;
+      display: block;
+      max-width: none;
+    }
+
+    .comment-reverse-order & {
+      padding-right: 0;
+      padding-left: 10px;
+    }
+  }
+
+  .comment-content {
+    width: 100%;
+    position: relative;
+
+    h1 {
+      font-size: 1em;
+      margin-bottom: .5em;
+    }
+
+    a.user,
+    a.team {
+      display: inline-block;
+    }
+
+    a.user {
+      margin-right: 10px;
+    }
+
+    a.team {
+      margin-left: 10px;
+    }
+
+    p {
+      margin-bottom: .5em;
+    }
+
+    p.comment-detail {
+      font-style: italic;
+      font-size: .9em;
+      color: $comment-detail-color;
+      margin-top: 10px;
+    }
+
+    .controls {
+      position: absolute;
+      top: - 5px;
+      right: 0;
+    }
+  }
+}
+
+/*
+  Comment Form
+*/
+
+.comment-form {
+  @include span-columns(12);
+  margin-bottom: 20px;
+
+  h1,
+  h5 {
+    margin-top: 0;
+    margin-bottom: 1em;
+  }
+
+  .fields {
+    margin-bottom: 20px;
+  }    
+}

app/assets/stylesheets/themes/flat/components/_flashes.scss

@@ -0,0 +1,65 @@
+/*
+  Flash Messages
+*/
+
+.flash {
+  @include span-columns(12);
+  margin-bottom: 20px;
+  font-weight: 600;
+
+  &.notice {
+    @include flash;
+  }
+
+  &.success {
+    @include flash($flash-success);
+    
+    &:before {
+      content: "\f00c";
+    }
+  }
+
+  &.error {
+    @include flash($flash-error);
+
+    &:before {
+      content: "\f00d";
+    }
+  }
+
+  &.warning,
+  &.alert {
+    @include flash($flash-warning);
+
+    &:before {
+      content: "\f071";
+    }
+  }
+}
+
+/*
+  Error Messages
+*/
+
+div#errors {
+  @extend .flash.error;
+  @include span-columns(12);
+  margin-bottom: 20px;
+
+  strong {
+    @include span-columns(12);
+    margin-bottom: 10px;
+  }
+
+  ul.errors {
+    @include span-columns(12);
+
+    li {
+      margin-bottom: 0;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}

app/assets/stylesheets/themes/flat/components/_forms.scss

@@ -0,0 +1,321 @@
+/*
+  Forms
+*/
+
+$input-height: 35px;
+
+form {
+
+  .inline {
+    float: left;
+    display: inline-block;
+    width: auto;
+    margin-bottom: 20px;
+
+    input {
+      margin-bottom: 0;
+    }
+  }
+
+  .fields {
+    > .field_with_errors:first-child,
+    > label {
+      padding: 9px 0;
+      line-height: $input-font-size;
+    }
+
+    > .field_with_errors {
+
+      input,
+      input[type=text],
+      textarea {
+        border: $input-border-width solid $flash-error;
+
+        &:hover,
+        &:focus {
+          border-color: $flash-error;
+        }
+
+        &:focus {
+          color: $input-text;
+        }
+      }
+    }
+
+    .select-wrapper {
+      $select-padding: 6px;
+      $select-height: $input-height - 4px;
+
+      border-radius: $input-border-radius;
+      background-color: $input-primary;
+      border: $input-border-colour solid $input-border-width;
+      position: relative;
+      display: inline-block;
+      margin-right: 10px;
+      float: left;
+      max-width: 100%;
+
+      select {
+        @include appearance(none);
+        font-size: $input-font-size;
+        font-family: $open-sans;
+        float: left;
+        display: block;
+        width: auto;
+        position: relative;
+        line-height: $select-height/2 + 4px;
+        vertical-align: middle;
+        max-height: $select-height;
+        margin-left: 0;
+        border: 0;
+        margin: 0;
+        padding: $select-padding ($select-height + 10) $select-padding $input-padding;
+        font-size: $input-font-size;
+        max-width: 100%;
+
+        option {
+          font-size: $input-font-size;
+        }
+
+        &:focus {
+          outline: none;
+        }
+      }
+
+      &:after {
+        font-family: $fontawesome;
+        pointer-events: none;
+        content: $fa-var-chevron-down;
+        font-weight: normal;
+        font-style: normal;
+        position: absolute;
+        top: 0;
+        right: 0;
+        text-align: center;
+        padding-top: 6px;
+        width: $select-height;
+        height: $select-height - 4px;
+        border-left: $input-border-width solid $input-border-colour;
+        color: $input-border-colour;
+      }
+
+      &:hover {
+        border: $input-border-width solid lighten($input-secondary, 20%);
+
+        &:after {
+          border-left: $input-border-width solid lighten($input-secondary, 20%);
+          color: $base-font-color;
+        }
+      }
+
+      &:focus {
+        border: $input-border-width solid $input-secondary;
+        color: $input-secondary;
+      }
+    }
+
+    input[type=text],
+    input[type=password],
+    input[type=email],
+    textarea {
+      border-radius: $input-border-radius;
+      background-color: $input-primary;
+      color: $input-text;
+      font-size: $input-font-size;
+      padding: 0 $input-padding;
+      height: $input-height;
+      border: $input-border-colour solid $input-border-width;
+
+      &:hover {
+        border: $input-border-width solid lighten($input-secondary, 20%);
+      }
+
+      &:focus {
+        border: $input-border-width solid $input-secondary;
+        outline: none;
+      }
+
+      &[disabled] {
+
+        &:hover {
+          border-color: $input-border-colour;
+          cursor: not-allowed;
+        }
+      }
+    }
+
+    textarea {
+      padding: $input-padding;
+      font-family: $open-sans;
+    }
+
+    .inputs label.checkbox,
+    > label.checkbox {
+      position: relative;
+      width: $input-height;
+      height: $input-height;
+      overflow: hidden;
+
+      &:before {
+        @include box-sizing(border-box);
+        content: "";
+        display: block;
+        border-radius: $input-border-radius;
+        width: $input-height;
+        height: $input-height;
+        padding: $input-padding;
+        background-color: $input-primary;
+        border: $input-border-colour solid $input-border-width;
+        margin: 0;
+      }
+      
+      &:hover {
+
+        &:before {
+          border: $input-border-width solid lighten($input-secondary, 20%);
+        }
+      }
+    }
+
+    input[type=checkbox] {
+      display: none;
+
+      &:checked {
+
+        & + label.checkbox:before {
+          content: $fa-var-check;
+          pointer-events: none;
+          font-family: $fontawesome;
+          font-weight: normal;
+          font-style: normal;
+          color: $light-blue;
+        }
+      }
+    }
+
+    textarea {
+      height: auto;
+      width: 100%;
+    }
+  }
+
+  .controls {
+    margin-bottom: 20px;
+
+    button,
+    input[type=submit] {
+      @include button($button-primary);
+      border-radius: $input-border-radius;
+      border: $input-border-width solid $button-primary;
+      margin-bottom: 0;
+      line-height: 30px;
+      outline: none;
+    }
+  }
+}
+
+form.square {
+  @include span-columns(12);
+  margin: 20px 0;
+
+  .horizontal {
+    @include span-columns(12);
+    margin-bottom: 20px;
+
+    &.small {
+      @include span-columns(6);
+    }
+
+    &.medium {
+      @include span-columns(9);
+    }
+
+    &.large {
+      @include span-columns(12);
+    }
+
+    > .field_with_errors:first-child,
+    > label,
+    > .label {
+      @include span-columns(3);
+      padding: 9px 0;
+      line-height: $input-font-size;
+
+      &.checkbox {
+        width: $input-height;
+        padding: 0;
+      }
+    }
+
+    input[type=text],
+    input[type=password],
+    input[type=email],  
+    textarea {
+      @include span-columns(9);
+    }
+
+    .inputs {
+      @include span-columns(9);
+
+      input[type=text],
+      input[type=password],
+      input[type=email] {
+        width: 100%;
+      }
+    }
+
+    &.wide {
+
+      > .field_with_errors {
+        width: 100%;
+      }
+
+      label {
+        width: 100%;
+      }
+
+      textarea,
+      .mceLayout {
+        width: 100%;
+      }
+    }
+  }
+
+  .controls {
+    @include span-columns(9);
+    @include shift(3);
+    font-weight: 400;
+
+    &.inline {
+      margin-left: 0;
+      width: auto;
+    }
+
+    input[type=submit],
+    button {
+      font-weight: 400;
+    }
+  }
+}
+
+form.search {
+  margin-bottom: 10px;
+
+  .query {
+    @include span-columns(7 of 9);
+
+    input {
+      width: 100%;
+    }
+  }
+
+  .controls {
+    @include span-columns(2 of 9);
+    @include shift(0);
+    @include omega;
+
+    input {
+      width: 100%;
+    }
+  }
+}

app/assets/stylesheets/themes/flat/components/_gather.scss

@@ -0,0 +1,191 @@
+/*
+  Gather Page
+*/
+
+#gather {
+  @include span-columns(12);
+
+  .previous a,
+  .next a {
+    display: inline-block;
+    float: none;
+    margin: 0;
+
+    i {
+      vertical-align: middle;
+    }
+  }
+
+  .previous {
+    @include span-columns(6);
+    margin-bottom: $container-padding;
+
+    i {
+      margin-right: 10px;
+    }
+  }
+
+  .next {
+    @include span-columns(6);
+    @include omega;
+    text-align: right;
+
+    i {
+      margin-left: 10px;
+    }
+  }
+
+  .shoutbox-messages {
+    @include span-columns(12);
+
+    .timestamp {
+      margin: 0 5px 5px;
+    }
+  }
+
+  .new-shout {
+    @include span-columns(12);
+    margin: 20px 0;
+
+    .shout_input {
+      width: 400px;
+      margin-right: 20px;
+    }
+
+    .fields,
+    .controls {
+      float: left;
+      display: block;
+    }
+  }
+}
+
+#gather-info {
+  @include span-columns(12);
+  margin: 20px 0;
+  border-bottom: 2px solid $light-gray;
+
+  .info {
+    @include span-columns(4);
+
+    h6 {
+      margin-bottom: 10px;
+    }
+
+    &:nth-child(3) {
+      @include omega;
+    }
+  }
+
+  ul {
+    list-style-type: disc;
+
+    li {
+      margin-left: 20px;
+    }
+  }
+
+  .hide {
+    @include span-columns(12);
+    padding: 20px 0;
+    text-align: center;
+
+    a {
+      display: inline-block;
+      float: none;
+
+      i {
+        margin-right: 10px;
+      }
+    }   
+  }
+}
+
+#gather-area {
+  @include span-columns(12);
+
+  $column-border-width: 10px;
+  $column-border-radius: 5px;
+
+  .gather-columns {
+    @include span-columns(12);
+    @include row(table);
+    margin-left: - $column-border-width;
+    width: $max-width - ($column-border-width*2);
+  }
+
+  .data {
+    @include span-columns(4);
+    @include pad;
+    border-radius: $column-border-width + $column-border-radius;
+    padding-bottom: 20px;
+    background: lighten($light-gray, 5%);
+    padding: 20px;
+    border: $column-border-width solid white;
+
+    h4 {
+      padding-bottom: 20px;
+      text-align: center;
+    }
+
+    &:nth-child(3) {
+      @include reset-display;
+      @include omega;
+    }
+
+    ul {
+      margin-bottom: 10px;
+    }
+  }
+
+  .players {
+
+    .captain {
+      color: $gold;
+      margin: 0 10px;
+    }
+
+    .delete {
+      display: inline-block;
+      padding: 0 10px;
+    }
+  }
+}
+
+#gather-stats {
+  @include span-columns(12);
+  display: block;
+  clear: both;
+  padding: 20px 0;
+  margin: 20px 0;
+  border-top: 2px solid $light-gray;
+  border-bottom: 2px solid $light-gray;
+  position: relative;
+
+  .admin {
+    top: 20px;
+    right: 0;
+    margin: 0;
+    position: absolute;
+  }
+
+  p {
+    @include clearfix;
+  }
+}
+
+/*
+  Gather Archive
+*/
+
+table.gathers {
+
+  .date {
+    width: 30%;
+  }
+
+  .team1,
+  .team2 {
+    width: 35%;
+  }
+}

app/assets/stylesheets/themes/flat/components/_lists.scss

@@ -0,0 +1,31 @@
+ul, ol {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+
+  &%default-ul {
+    list-style-type: disc;
+    margin-bottom: $base-line-height / 2;
+    padding-left: $base-line-height;
+  }
+
+  &%default-ol {
+    list-style-type: decimal;
+    margin-bottom: $base-line-height / 2;
+    padding-left: $base-line-height;
+  }
+}
+
+dl {
+  line-height: $base-line-height;
+  margin-bottom: $base-line-height / 2;
+
+  dt {
+    font-weight: bold;
+    margin-top: $base-line-height / 2;
+  }
+
+  dd {
+    margin: 0;
+  }
+}

app/assets/stylesheets/themes/flat/components/_pagination.scss

@@ -0,0 +1,8 @@
+/*
+  Pagination
+*/
+
+.pagination {
+  @include span-columns(12);
+  margin: 10px 0;
+}

app/assets/stylesheets/themes/flat/components/_shoutbox.scss

@@ -0,0 +1,49 @@
+/*
+  Shoutbox Messages
+*/
+
+#shoutbox {
+  display: table;
+}
+
+.shoutmsg {
+  display: table-row;
+  margin-bottom: 5px;
+  clear: both;
+  position: relative;
+
+  .destroy {
+    position: absolute;
+    top: 0;
+    right: -10px;
+  }
+
+  .user {
+    display: table-cell;
+    min-width: 30%;
+
+    .username {
+      clear: right;
+      display: block;
+    }
+
+    .time {
+      clear: left;
+      display: block;
+      color: #5a5a5a;
+    }
+  }
+
+  .message {
+    max-width: 66%;
+    display: table-cell;
+
+    .contents {
+      word-wrap: break-word;
+      word-break: break-all;
+      position: relative;
+      display: block;
+      padding: 0 10px;
+    }
+  }
+}

app/assets/stylesheets/themes/flat/components/_tables.scss

@@ -0,0 +1,53 @@
+/*
+  Generic Tables
+*/
+
+table {
+  border-collapse: collapse;
+  margin: ($base-line-height / 2) 0;
+  table-layout: fixed;
+  width: 100%;
+}
+
+th {
+  border-bottom: 1px solid darken($base-border-color, 15%);
+  font-weight: bold;
+  padding: 0.5em 0;
+  text-align: left;
+}
+
+td {
+  border-bottom: 1px solid $base-border-color;
+  padding: 0.5em 0;
+}
+
+tr, td, th {
+  vertical-align: middle;
+}
+
+/*
+  Striped Tables
+*/
+
+table.striped > tbody,
+table.striped > thead {
+  > tr {
+    td:first-child,
+    th:first-child {
+      padding-left: ($base-line-height / 2);
+    }
+
+    td:last-child,
+    th:last-child {
+      padding-right: ($base-line-height / 2);
+    }
+  }
+
+  > tr:nth-child(2n) td {
+    background-color: transparentize($light-blue, 0.9);
+  }
+
+  .actions {
+    text-align: right;
+  }
+}

app/assets/stylesheets/themes/flat/components/_tabs.scss

@@ -0,0 +1,76 @@
+/*
+  Tabs
+*/
+
+.tabbed {
+  $tabs-border-width: 1px;
+  $tabs-border-colour: $light-blue;
+  $tabs-padding-horizontal: 16px;
+  $tabs-height: 35px;
+
+  ul.tabs {
+    @include span-columns(12);
+    display: block;
+    font-family: $montserrat;
+    height: $tabs-height;
+    max-height: $tabs-height;
+    position: relative;
+
+    li {
+      float: left;
+      display: block;
+
+      a {
+        @include linear-gradient($blue, $dark-blue);
+        background-color: $blue;
+        border: $tabs-border-width solid $tabs-border-colour;
+        border-right: 0;
+        padding: 0 $tabs-padding-horizontal;
+        float: left;
+        display: block;
+        color: white;
+        font-weight: 400;
+        line-height: $tabs-height;
+
+        &:hover {
+          cursor: pointer;
+        }
+      }
+
+      &:first-child a {
+        border-radius: $base-border-radius 0 0 0;
+      }
+
+      &:last-child a {
+        border-right: $tabs-border-width solid $tabs-border-colour;
+        border-radius: 0 $base-border-radius 0 0;
+      }
+
+      &.activeli {
+        z-index: 100;
+
+        a {
+          @include linear-gradient($light-blue, $blue);
+          background-color: $light-blue;
+        }
+      }
+    }
+  }
+
+  .tabbed-contents {
+    @include span-columns(12);  
+    border: $tabs-border-width solid $tabs-border-colour;
+    border-radius: 0 $base-border-radius $base-border-radius $base-border-radius;
+    background: lighten($light-gray, 10%);
+    box-shadow: $light-shadow;
+    padding: 20px;
+  }
+
+  @for $i from 1 through $grid-columns {
+    ul.tabs-#{$i} {
+      li {
+        @include span-columns($i);
+      }
+    }
+  }
+}

app/assets/stylesheets/themes/flat/errors.css.scss

@@ -0,0 +1,55 @@
+/*
+  Libraries & Configuration
+*/
+
+@import "bourbon";
+@import "variables";
+@import "neat";
+@import "neat-helpers";
+
+/*
+  Layout
+*/
+
+@import "layout/body";
+@import "layout/typography";
+
+/*
+  Error Page
+*/
+
+html,
+body {
+  height: 100%;
+}
+
+html {
+  @include linear-gradient($dark-blue, $deep-blue);
+}
+
+body {
+  color: white;
+  background: transparent;
+}
+
+#error {
+  display: table;
+  height: 100%;
+  margin: 0 auto;
+  max-width: 60%;
+  width: 90%;
+  text-align: center;
+  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.75);
+
+  #code h1 {
+    font-size: 48px;
+    margin: 1em 0;
+  }
+
+  .message {
+    padding-top: 50px;
+    display: table-cell;
+    vertical-align: middle;
+    padding-bottom: 100px;
+  }
+}

app/assets/stylesheets/themes/flat/layout/_body.scss

@@ -0,0 +1,129 @@
+/*
+  Main Containers
+*/
+
+$container-padding: 1.7em;
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  min-height: 100%;
+}
+
+body#tinymce {
+  padding: 10px;
+}
+
+#container {
+  min-height: 100%;
+  @include background-image(linear-gradient($deep-blue 0px, $dark-blue 500px));
+}
+
+.wrapper {
+  @include outer-container;
+}
+
+#content {
+  @include span-columns(12);
+  padding: $container-padding 0;
+
+  &.full {
+    box-shadow: $content-shadow;
+    padding: $container-padding;
+    background: $content-color;
+    border-radius: $base-border-radius;
+    margin: $container-padding 0;
+  }
+
+  &.no-body {
+    &.full {
+      background: transparent;
+      box-shadow: none;
+      padding: $container-padding 0;
+    }
+
+    #main {
+      box-shadow: none;
+      border-radius: 0;
+      background: transparent;
+      padding: 0;
+    }    
+  }
+}
+
+#forums {
+  @include span-columns(12);
+}
+
+#main {
+  @include span-columns(9 of 12);
+  border-radius: $base-border-radius;
+  box-shadow: $content-shadow;
+  background: $content-color;
+  padding: 20px;
+}
+
+#sidebar {
+  @include span-columns(3 of 12);
+  @include omega();
+}
+
+/*
+  Heading styles
+*/
+
+h1, h2, h3, h4, h5, h6 {
+
+  &.title {
+    margin-bottom: 1em;
+  }
+
+  &.fancy {
+    clear: both;
+    text-align: center;
+    position: relative;
+    background-color: $content-color;
+
+    &:before {
+      content: "";
+      display: block;
+      border-top: 2px solid $medium-gray;
+      width: 100%;
+      height: 2px;
+      position: absolute;
+      top: 50%;
+      z-index: 1;
+    }
+
+    span {
+      background: inherit;
+      padding: 0 .5em;
+      position: relative;
+      display: inline-block;
+      z-index: 1;
+    }
+  }
+}
+
+/*
+  Text
+*/
+
+#main {
+  ul.disc,
+  ol {
+    list-style-type: disc;
+    margin: 20px 0;
+
+    li {
+      margin-left: 40px;
+      display: list-item;
+    }
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+}

app/assets/stylesheets/themes/flat/layout/_footer.scss

@@ -0,0 +1,65 @@
+.footer {
+  $footer-background: $dark-gray;
+  $footer-color: white;
+  $footer-link-color: transparentize($footer-color, .6);
+  $footer-disclaimer-color: transparentize($footer-color, .6);
+
+  background: $footer-background;
+
+  .content {
+    padding: $container-padding*2 0;
+  }
+
+  .footer-links {
+    @include clearfix;
+    margin-bottom: $base-line-height;
+  }
+
+  ul {
+    margin-bottom: $base-line-height*2;
+
+    @include media($medium-screen) {
+      @include span-columns(3);
+      @include omega(4n);
+      @include clearfix;
+    }
+  }
+
+  li {
+    text-align: center;
+
+    @include media($medium-screen) {
+      text-align: center;
+    }
+  }
+
+  li a {
+    color: $footer-link-color;
+
+    &:hover {
+      color: transparentize($footer-color, 0);
+    }
+  }
+
+  li h3 {
+    color: $footer-color;
+    font-size: 1em;
+    font-weight: 800;
+    margin-bottom: .4em;
+  }  
+
+  hr {
+    border: 1px solid transparentize($footer-disclaimer-color, .3);
+    margin: 0 auto $base-line-height;
+    width: 12em;
+  }
+
+  p {
+    color: $footer-disclaimer-color;
+    font-size: .9em;
+    line-height: 1.5em;
+    margin: auto;
+    max-width: 35em;
+    text-align: center;
+  }
+}

app/assets/stylesheets/themes/flat/layout/_hacks.scss

@@ -0,0 +1,9 @@
+/*
+  Firefox select hacks
+*/
+
+select {
+  -moz-appearance: none;
+  text-indent: 0.01px;
+  text-overflow: '';
+}

app/assets/stylesheets/themes/flat/layout/_header.scss

@@ -0,0 +1,148 @@
+/*
+  Banner
+*/
+
+header .banner {
+  height: 140px;
+
+  #logo {
+    @include span-columns(9 of 12);
+    min-height: 200px;
+    position: relative;
+
+    img {
+      height: 200px;
+      position: absolute;
+      top: 15px;
+      left: -40px;
+      z-index: 1;
+    }
+  }
+
+  #authentication {
+    @include span-columns(5 of 12);
+    @include shift(7);
+    padding: 10px 0;
+    color: white;
+    position: relative;
+
+    .logged {
+      padding-top: 10px;
+    }
+
+    form.dark {
+      @include span-columns(12);
+      margin-top: 20px;
+    }
+
+    .buttons {
+      @include span-columns(12);
+
+      .login,
+      .register {
+        @include span-columns(6);
+      }
+
+      .login {
+        input {
+          @include button;
+          float: right;
+          margin-right: 0;
+        }
+      }
+
+      .register {
+        @include omega;
+      }
+    }
+
+    .register a {
+      display: block;
+      float: right;
+      clear: both;
+    }
+
+    a {
+      color: white;
+
+      &:hover {
+        color: $light-blue;
+      }
+    }
+
+    form {
+      display: inline;
+    }
+
+    &.admin {
+      
+    }
+
+    .fields { 
+      @include span-columns(12);
+
+      input {
+        @include span-columns(6);
+        margin-bottom: 10px;
+      }
+    }
+
+    .controls {
+      margin-top: 10px;
+      text-align: right;
+
+      input {
+        @include span-columns(12);
+        margin-bottom: 10px;
+      }
+
+      a {
+        @include span-columns(12);
+        text-align: left;
+      }
+    }
+
+    .password-reset {
+      float: right;
+    }
+
+    .links {
+      position: absolute;
+      right: 0;
+      padding-right: 105px;
+
+      li {
+        text-align: right;
+      }
+
+      li i {
+        display: inline-block;
+        width: 1em;
+        text-align: center;
+        margin: 0 10px;
+      }
+    }
+
+    .avatar {
+      box-shadow: $content-shadow;
+      border-radius: $base-border-radius;
+      border: 2px solid $blue;
+      width: 100px;
+      height: 100px;
+      float: right;
+      background: {
+        size: cover;
+        position: center;
+        repeat: no-repeat;
+      }
+    }
+  }
+
+  &.authenticated {
+
+    #authentication {
+      @include span-columns(3 of 12);
+      @include shift(9);
+    }
+  }
+}

app/assets/stylesheets/themes/flat/layout/_helpers.scss

@@ -0,0 +1,37 @@
+/*
+  Global Helpers
+*/
+
+img.flag {
+  display: inline-block;
+  vertical-align: - 6px;
+  margin-right: 10px;
+}
+
+.actions-bottom {
+  @include span-columns(12);
+  margin-top: 20px;
+}
+
+fieldset {
+  border: 2px solid $light-gray;
+
+  > br:first-child,
+  > br:last-child {
+    display: none;
+  }
+
+  legend {
+    padding: 0 10px;
+
+    &+br {
+      display: none;
+    }
+  }
+
+  blockquote {
+    border: 0;
+    padding: 0;
+    margin: 0;
+  }
+}

app/assets/stylesheets/themes/flat/layout/_navigation.scss

@@ -0,0 +1,194 @@
+/*
+  Navigation
+*/
+
+$navigation-height: 50px;
+
+#menu {
+  @include span-columns(12);
+  font-family: $montserrat;
+  height: $navigation-height;
+
+  #logo {
+    position: absolute;
+    top: 20px;
+    margin-left: -60px;
+  }
+}
+
+ul.navigation {
+  border-radius: $base-border-radius;
+  z-index: 100;
+  position: relative;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  float: right;
+  background-color: $light-blue;
+  max-width: $max-width;
+  max-height: $navigation-height;
+
+  > li {
+    float: left;
+    border-right: 1px solid $dark-blue;
+
+    &:first-child a {
+      border-radius: $base-border-radius 0 0 $base-border-radius;
+    }
+
+    &:last-child {
+      border-right: 0;
+
+      a {
+        border-radius: 0 $base-border-radius $base-border-radius 0;  
+      }
+    }
+
+    .count {
+      position: absolute;
+      top: 16px;
+      right: 12px;
+      border-radius: $base-border-radius;
+      background-color: $light-blue;
+      display: inline-block;
+      color: white;
+      line-height: 18px;
+      padding: 0 4px;
+      font-size: 12px;
+      font-weight: bold;
+    }
+
+    a {
+      font-weight: 400;
+      font-size: 15px;
+      height: $navigation-height;
+      line-height: $navigation-height;
+      padding: 0 50px 0 20px;
+    }
+
+    > a {
+      width: 100%;
+      color: white;
+      float: left;
+      position: relative;
+      background-color: $navbar-primary;
+
+      &:hover,
+      &.active {
+        background-color: $navbar-secondary;
+
+        .count {
+          background-color: lighten($light-blue, 20);
+        }
+      }
+
+      &.gathers {
+        padding-right: 65px;
+      }
+    }
+
+    &.icon {
+
+      a:after {
+        @extend .fa;
+        content: '';
+        display: block;
+        position: absolute;
+        right: 20px;
+        top: 0;
+        line-height: 50px;
+        font-size: 14px;
+      }
+
+      a {
+        &.news:after {
+          content: $fa-var-list-alt;
+        }
+
+        &.contests:after {
+          content: $fa-var-trophy;
+        }
+
+        &.articles:after {
+          content: $fa-var-file-text-o;
+        }
+
+        &.forums:after {
+          content: $fa-var-comments-o;
+        }
+
+        &.teams:after {
+          content: $fa-var-users;
+        }
+
+        &.users:after {
+          content: $fa-var-user;
+        }
+      }
+
+      i {
+        color: white;
+        max-height: $navigation-height;
+        position: absolute;
+        top: 0;
+        right: 0;
+        font-size: 18px;
+        line-height: 1em;
+        padding: $navigation-height/3;
+      }
+    }
+
+    &.dropdown {
+      position: relative;
+
+      ul {
+        position: absolute;
+        box-shadow: $content-shadow;
+        visibility: hidden;
+        pointer-events: none;
+        opacity: 0;
+        z-index: 10;
+        top: $navigation-height;
+        left: 0;
+        min-width: 100%;
+        background-color: $navbar-primary;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+      }
+
+      &:hover {
+
+        ul {
+          visibility: visible;
+          opacity: 1;
+          pointer-events: auto;
+
+
+          li {
+            border-bottom: 1px solid $navbar-secondary;
+
+            &:first-child {
+              border-top: 1px solid $navbar-secondary;
+            }
+
+            &:last-child {
+              border-bottom: none;
+            }
+            
+            a {
+              white-space: nowrap;
+              display: block;
+              color: $navbar-text;
+              padding: 0 20px;
+            }
+
+            &:hover a {
+              background: $light-blue;
+            }
+          }
+        }
+      }
+    }
+  }
+}

app/assets/stylesheets/themes/flat/layout/_sidebar.scss

@@ -0,0 +1,95 @@
+#sidebar {
+
+  .widget {
+    @include span-columns(12);
+    @include omega;
+    background: #0d0f10;
+    margin-bottom: $container-padding;
+    padding: 20px;
+    border-radius: $base-border-radius;
+    box-shadow: $light-shadow;
+    margin-bottom: $container-padding;
+    color: white;
+
+    h4 {
+      @include span-columns(12);
+      margin-bottom: 20px;
+      color: $light-blue;
+    }
+
+    .widget-content-wrapper {
+      @include span-columns(12);
+      font-size: 12px;
+    }
+
+    .separator {
+      color: white;
+      background: $dark-gray;
+      padding: 0 20px;
+      margin: 0 -20px;
+      margin-bottom: 12px;
+      font-weight: 600;
+      line-height: 35px;
+
+      a {
+        color: white;
+        float: right;
+      }
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .calendar {
+    .time {
+      color: lighten($medium-gray, 20%);
+      float: right;
+      margin-left: 10px;
+    }
+  }
+
+  .shoutbox {
+    .transcript {
+      margin-bottom: 20px;
+    }
+
+    input {
+      @include span-columns(12);
+      margin-bottom: 10px;
+    }
+  }
+
+  .highlights,
+  .posts {
+    ol {
+      margin-bottom: 20px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .poll {
+    .question {
+      @include span-columns(12);
+      margin-bottom: 20px;
+
+      h5 {
+        margin-bottom: 1em;
+      }
+    }
+
+    .bar {
+      display: block;
+      background: $blue;
+      height: 10px;
+    }
+
+    .button {
+      margin-bottom: 0;
+    }
+  }
+}

app/assets/stylesheets/themes/flat/layout/_typography.scss

@@ -0,0 +1,116 @@
+/*
+  Typography
+*/
+
+@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
+@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700);
+
+body {
+  color: $base-font-color;
+  font-family: $base-font-family;
+  font-size: $base-font-size;
+  -webkit-font-smoothing: antialiased;
+  line-height: $base-line-height;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: $header-font-family;
+  line-height: 1.25em;
+  margin: 0;
+  text-rendering: optimizeLegibility; // Fix the character spacing for headings
+
+  a {
+    color: $dark-blue;
+  }
+}
+
+h1 {
+  font-size: $base-font-size * 2.25; // 16 * 2.25 = 36px
+}
+
+h2 {
+  font-size: $base-font-size * 2; // 16 * 2 = 32px
+}
+
+h3 {
+  font-size: $base-font-size * 1.75; // 16 * 1.75 = 28px
+}
+
+h4 {
+  font-size: $base-font-size * 1.5; // 16 * 1.5 = 24px
+}
+
+h5 {
+  font-size: $base-font-size * 1.25; // 16 * 1.25 = 20px
+}
+
+h6 {
+  font-size: $base-font-size;
+}
+
+p {
+  margin: 0 0 ($base-line-height * .5);
+}
+
+a {
+  color: $base-link-color;
+  text-decoration: none;
+  font-weight: 600;
+  @include transition(color 0.1s linear);
+
+  &:hover {
+    color: $hover-link-color;
+  }
+
+  &:active, &:focus {
+    color: $hover-link-color;
+    outline: none;
+  }
+}
+
+hr {
+  border-bottom: 1px solid $base-border-color;
+  border-left: none;
+  border-right: none;
+  border-top: none;
+  margin: $base-line-height 0;
+}
+
+img {
+  margin: 0;
+  max-width: 100%;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted $base-border-color;
+  cursor: help;
+}
+
+address {
+  display: block;
+  margin: 0 0 ($base-line-height / 2);
+}
+
+hgroup {
+  margin-bottom: $base-line-height / 2;
+}
+
+del {
+  color: lighten($base-font-color, 15);
+}
+
+blockquote {
+  border-left: 2px solid $base-border-color;
+  color: lighten($base-font-color, 15);
+  margin: $base-line-height 0;
+  padding-left: $base-line-height / 2;
+}
+
+cite {
+  color: lighten($base-font-color, 25);
+  font-style: italic;
+
+  &:before {
+    content: '\2014 \00A0';
+  }
+}

app/assets/stylesheets/themes/flat/mixins/_buttons.scss

@@ -0,0 +1,42 @@
+/*
+  Buttons
+*/
+
+@mixin button($background: $button-primary, $text: $button-text) {
+  $button-height: 35px;
+
+  @include linear-gradient($blue, $dark-blue);
+  border-radius: $base-border-radius;
+  font-family: $montserrat;
+  font-size: 14px;
+  background-color: $background;
+  color: $text;
+  height: $button-height;
+  padding: 0 $button-height/2;
+  line-height: $button-height;
+  float: left;
+  margin: 0 $button-height/2 $button-height/2 0;
+  border: 0;
+  cursor: pointer;
+  font-weight: 400;
+
+  &:hover {
+    color: lighten($light-blue, 30);
+  }
+}
+
+button,
+a.button,
+.button {
+  @include button;
+
+  &.tiny {
+    @include linear-gradient($light-blue, $blue);
+    background-color: transparent;
+    border-radius: 14px;
+    line-height: 25px;
+    height: 25px;
+    padding: 0 12px;
+    margin: 0 10px 0 0;
+  }
+}

app/assets/stylesheets/themes/flat/mixins/_flashes.scss

@@ -0,0 +1,47 @@
+/*
+  Flash Messages
+*/
+
+@mixin flash($background: $flash-notice, $text: $flash-text) {
+  $flash-height: 35px;
+
+  background-color: $background;
+  color: $text;
+  padding: 7px 7px 7px 44px; 
+  position: relative;
+  border-radius: $base-border-radius;
+
+  &:before {    
+    @include box-sizing(border-box);
+    border-radius: $base-border-radius 0 0 $base-border-radius;
+    font-family: FontAwesome;
+    font-style: normal;
+    font-weight: normal;
+    content: "\f05a";
+    background-color: darken($background, 10%);
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    float: left;
+    width: $flash-height;
+    height: 100%;
+    padding: 7px;
+    text-align: center;
+  }
+}
+
+/* 
+  Text Highlights
+*/
+
+.highlight {
+  font-size: 12px;
+  line-height: 18px;
+  border-radius: $base-border-radius;
+  background: $blue;
+  color: white;
+  display: inline-block;
+  font-style: italic;
+  padding: 0 3px;
+}

app/assets/stylesheets/themes/flat/pages/_bans.scss

@@ -0,0 +1,23 @@
+/*
+  Bans List
+*/
+
+#bans {
+
+  h1 {
+    margin-bottom: 1em;
+  }
+
+  table.bans {
+
+    .type,
+    .expiry {
+      width: 20%;
+    }
+
+    .actions {
+      width: 10%;
+      text-align: right;
+    }
+  }
+}

app/assets/stylesheets/themes/flat/pages/_categories.scss

@@ -0,0 +1,18 @@
+/*
+  Categories List
+*/
+
+.categories {
+
+  table.categories {
+
+    .actions {
+      width: 20%;
+      text-align: right;
+
+      i {
+        margin-left: 5px;
+      }
+    }
+  }
+}

app/assets/stylesheets/themes/flat/pages/_contests.scss

@@ -0,0 +1,335 @@
+/*
+  Contester
+*/
+
+div#matches {
+  @include span-columns(12);
+  margin: 20px 0;
+}
+
+/*
+  Contest List
+*/
+
+table.contest {
+  margin-bottom: 40px;
+
+  .fa-chevron-up {
+    color: $light-green;
+  }
+
+  .fa-chevron-down {
+    color: $light-red;
+  }
+
+  .fa-trophy {
+    color: $gold;
+    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.75);
+  }
+
+  tbody td {
+    &:first-child {
+      text-align: center;
+    }
+
+    &:nth-child(2) {
+      text-align: center;
+    }
+
+    &:nth-child(4) {
+      text-align: left;
+    }
+
+    &.actions {
+      text-align: right;
+
+      i {
+        padding-left: 5px;
+      }
+    }
+  }
+
+  thead {
+
+    .movement,
+    .flag,
+    .awards {
+      width: 5%;
+    }
+
+    .team {
+      width: 35%;
+    }
+
+    .score,
+    .win,
+    .loss,
+    .draw,
+    .actions {
+      width: 10%;
+    }
+  }
+}
+
+div.widget.contest {
+
+  a.button {
+    margin: 20px 0 0;
+    text-align: center;
+    width: 100%;
+  }
+}
+
+/*
+  Standings
+*/
+
+div.standings {
+  @include span-columns(12);
+}
+
+/*
+  Brackets
+*/
+
+table.brackets {
+  margin: 20px 0 40px 0;
+  width: auto;
+
+  td {
+    padding: 0;
+    border-bottom: 0;
+    text-align: left;
+
+    a {
+      display: block;
+      width: 100%;
+    }
+  }
+
+  .empty {
+    padding: 0;
+  }
+
+  .flag {
+    width: 44px;
+
+    img {
+      width: 24px;
+      margin-left: 10px;
+    }
+  }
+
+  .team {
+    padding: 5px 0;
+    background-color: $light-gray;
+    border-right: 1px solid $medium-gray;
+    clear: both;
+
+    table {
+      margin: 0;
+    }
+
+    > a {
+      padding-left: 10px;
+    }
+  }
+
+  .bracket {
+    padding: 0 10px 0 0;
+    width: 158px;
+  }
+
+  .connector {
+    border-right: 1px solid $medium-gray;
+  }
+
+  > tbody > tr > td {
+    width: 150px;
+  }
+}
+
+/*
+  Contest Page
+*/
+
+#contest {
+
+  table.weeks {
+
+    .week {
+      width: 50%;
+    }
+
+    .date {
+      width: 30%;
+    }
+
+    .score {
+      width: 10%;
+      text-align: right;
+    }
+  }
+
+  table.matches {
+
+    .team {
+      width: 50%;
+    }
+
+    .date {
+      width: 50%;
+      text-align: right;
+    }
+  }
+
+  table.predictions {
+
+    .user {
+      width: 50%;
+    }
+
+    .result {
+      width: 50%;
+      text-align: right;
+    }
+  }
+}
+
+/*
+  Contest Form Page
+*/
+
+#contest.contest-manage {
+
+  table.maps {
+
+    .name {
+      width: 50%;
+    }
+
+    .download {
+      width: 40%;
+    }
+
+    .actions {
+      width: 10%;
+      text-align: right;
+    }
+  }
+
+  table.brackets-list {
+    width: 100%;
+
+    .bracket,
+    .slots {
+      width: 45%;
+    }
+
+    .actions {
+      width: 10%;
+      text-align: right;
+    }
+  }
+
+  table.weeks {
+
+    .name {
+      width: 30%;
+    }
+
+    .date,
+    .map1,
+    .map2 {
+      width: 20%;
+    }
+
+    .actions {
+      width: 10%;
+      text-align: right;
+    }
+  }
+
+  #matches {
+    margin: 0;
+  }
+
+  table.matches {
+
+    .team {
+      width: 50%;
+    }
+
+    .date {
+      text-align: left;
+      width: 20%;
+    }
+
+    .score {
+      width: 10%;
+    }
+
+    .actions {
+      width: 15%;
+      text-align: right;
+    }
+  }
+}
+
+/*
+  Contest List
+*/
+
+#contests {
+  @include span-columns(12);
+
+  div.current {
+    @include span-columns(12);
+    margin-bottom: 20px;
+
+    table {
+
+      .name {
+        width: 40%;
+      }
+
+      .date {
+        width: 20%;
+      }
+
+      .status {
+        width: 30%;
+      }
+
+      .actions {
+        width: 10%;
+        text-align: right;
+      }
+    }
+  }
+
+  div.previous {
+    @include span-columns(12);
+    margin-bottom: 20px;
+
+    table {
+
+      .name {
+        width: 40%;
+      }
+
+      .date {
+        width: 20%;
+      }
+
+      .winner {
+        width: 30%;
+      }
+      
+      .actions {
+        width: 10%;
+        text-align: right;
+      }
+    }
+  }
+}

app/assets/stylesheets/themes/flat/pages/_files.scss

@@ -0,0 +1,90 @@
+/*
+  File Page
+*/
+
+#file {
+
+  .actions,
+  .files-list {
+    @include span-columns(12);
+    margin: 20px 0;
+  }
+}
+
+/*
+  Files List
+*/
+
+#files {
+
+  .file {
+    @include span-columns(12);
+    padding-top: 20px;
+    margin-bottom: 20px;
+    position: relative;
+    border-top: 3px solid $light-gray;
+
+    .actions {
+      position: absolute;
+      top: 20px;
+      right: 0;
+    }
+
+    .comments {
+      float: right;
+
+      i {
+        margin-right: 10px;
+      }
+    }
+  }
+
+  .controls {
+    @include span-columns(12);
+    margin-top: 20px;
+  }
+}
+
+/*
+  Movies List
+*/
+
+#movies {
+
+  .filters {
+    @include span-columns(12);
+    margin-bottom: 20px;
+  }
+}
+
+table.movie {
+
+  .controls {
+    @include span-columns(12);
+    margin: 20px 0;
+  }
+}
+
+.movie-full {
+
+  .title {
+    display: none;
+  }
+
+  #player {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 0px;
+    padding-bottom: 56%;
+    padding-top: 50px;
+    margin-bottom: 20px;
+
+    object {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+    }
+  }
+}

app/assets/stylesheets/themes/flat/pages/_forums.scss

@@ -0,0 +1,326 @@
+/*
+  Forums
+*/
+
+#forums {
+  position: relative;
+
+  .topic-controls {
+    position: absolute;
+    top: 40px;
+    right: 0;
+    width: auto;
+
+    a:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .pagination {
+    margin-bottom: 20px;
+  }
+}
+
+.no-body #forums {
+
+  h1,
+  h2 {
+    color: white;
+
+    a {
+      color: white;
+    }
+  }
+
+  .breadcrumbs,
+  .pagination {
+    color: white;
+
+    a {
+      color: $light-blue;
+    }
+  }
+}
+
+/*
+  Categories
+*/
+
+div#categories {
+
+  div.category {
+    margin-bottom: 20px;
+  }
+
+  /*
+    Tables
+  */
+
+  table.category {
+    table-layout: auto;
+    margin: 0;
+    background: $content-color;
+    padding: 20px;
+    box-shadow: $light-shadow;
+    border-radius: $base-border-radius;
+    border: 0;
+
+    thead th {
+      @include linear-gradient($blue, $dark-blue);
+      padding-top: 0.75em;
+      padding-bottom: 0.75em;
+      font-family: $montserrat;
+      font-size: 16px;
+      color: white;
+
+      &:first-child {
+        border-radius: $base-border-radius 0 0 0;
+      }
+
+      &:last-child {
+        border-radius: 0 $base-border-radius 0 0;
+      }
+    }
+  }
+
+  .bullet {
+    width: 10%;
+
+    background: {
+      image: image-url("#{$theme-path}/layout/forum-category.png");  
+      position: center center;
+      repeat: no-repeat;
+    }
+
+    &.updated {
+      background-image: image-url("#{$theme-path}/layout/forum-category-highlight.png");
+    }
+  }
+
+  .forum {
+    width: 45%;
+    padding-right: 10px;
+  }
+
+  .actions {
+    width: 10%;
+    text-align: center;
+  }
+
+  .topics,
+  .posts {
+    width: 10%;
+  }
+  
+  .last {
+    width: 15%;
+  }
+}
+
+/*
+  Topics
+*/
+
+#topics {
+  table-layout: auto;
+  margin-bottom: 20px;
+  background: $content-color;
+  padding: 20px;
+  box-shadow: $light-shadow;
+  border-radius: $base-border-radius;
+  border: 0;
+
+  .unread {
+    color: $red;
+  }
+
+  thead th {
+    @include linear-gradient($blue, $dark-blue);
+    padding-top: 0.75em;
+    padding-bottom: 0.75em;
+    font-family: $montserrat;
+    font-size: 16px;
+    color: white;
+
+    &:first-child {
+      border-radius: $base-border-radius 0 0 0;
+    }
+
+    &:last-child {
+      border-radius: 0 $base-border-radius 0 0;
+    }
+  }
+
+  .topic {
+    width: 55%;
+  }
+
+  .author {
+    width: 10%;
+  }
+
+  .replies,
+  .views {
+    width: 10%;
+  }
+
+  .last {
+    width: 15%;
+  }
+}
+
+.statistics {
+  padding: 20px;
+  background: $content-color;
+  margin: 20px 0;
+  box-shadow: $light-shadow;
+  border-radius: $base-border-radius;
+
+  h4 {
+    margin-bottom: 1em;
+  }
+}
+
+#topic {
+  position: relative;
+
+  h2 {
+    margin-bottom: 20px;
+  }
+
+  .pagination {
+    margin-top: 0;
+  }
+
+  #reply {
+    @include span-columns(12);
+    padding: 20px;
+    margin-bottom: 20px;
+    display: none;
+    background: $content-color;
+    border-radius: $base-border-radius;
+    box-shadow: $light-shadow;
+
+    form {
+      margin-bottom: 0;
+
+      .controls {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+/*
+  Posts
+*/
+
+#posts {
+  @include span-columns(12);
+
+  .post {
+    @include span-columns(12);
+    margin-bottom: 20px;
+    border-radius: $base-border-radius;
+    background: $content-color;
+    padding: 20px;
+    box-shadow: $light-shadow;
+
+    .avatar {
+      @include span-columns(3);
+
+      h5 {
+        text-align: center;
+        margin-bottom: 1em;
+      }
+
+      .image,
+      .team {
+        @include span-columns(12);
+        text-align: center;
+        margin-bottom: 10px;
+      }
+
+      .admin {
+        color: $red;
+      }
+    }
+
+    .content {
+      @include span-columns(9);
+      @include omega;
+
+      .text,
+      .signature {
+        @include span-columns(12);
+        padding: 20px 0;
+      }
+
+      .text {
+        margin-top: 20px;
+
+        fieldset {
+          border-color: darken($light-gray, 10);
+          border-radius: $base-border-radius;
+        }
+      }
+    }
+
+    .header {
+      @include span-columns(12);
+
+      .time {
+        @include span-columns(6);
+      }
+
+      .posts {
+        @include span-columns(6);
+        text-align: right;
+      }
+    }
+
+    .base {
+      @include span-columns(12);
+      padding-top: 20px;
+      border-top: 1px solid $light-gray;
+
+      .user {
+        @include span-columns(3);
+      }
+
+      .signature {
+        @include span-columns(9);
+        @include omega;
+        position: relative;
+
+        .controls {
+          position: absolute;
+          top: 0;
+          right: 0;
+
+          a:last-child {
+            margin-right: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+/*
+  Forms
+*/
+
+#forums .add-acl {
+
+  h4 {
+    margin: 1em 0;
+  }
+
+  .permissions,
+  .controls {
+    display: inline;
+    width: auto;
+    float: none;
+  }
+}

app/assets/stylesheets/themes/flat/pages/_groups.scss

@@ -0,0 +1,57 @@
+/*
+  Groups List
+*/
+
+table.groups {
+
+  .name {
+    width: 50%;
+  }
+
+  .created {
+    width: 20%;
+  }
+
+  .founder {
+    width: 20%;
+  }
+
+  .actions {
+    width: 10%;
+    text-align: right;
+  }
+}
+
+/*
+  Groups Page
+*/
+
+#group {
+
+  table.roles {
+
+    .name,
+    .username {
+      width: 20%;
+    }
+
+    .role {
+      width: 60%;
+    }
+
+    .fields {
+      margin: 0;
+      float: left;
+    }
+
+    .controls {
+      margin: 0;
+      float: right;
+
+      .remove {
+        margin-bottom: 0;
+        margin-right: 0;
+      }
+    }
+  }
+}

app/assets/stylesheets/themes/flat/pages/_issues.scss

@@ -0,0 +1,32 @@
+/*
+  Issues List
+*/
+
+table.issues {
+
+  .date {
+    width: 25%;
+  }
+
+  .title {
+    width: 35%;
+  }
+
+  .assigned,
+  .author {
+    width: 15%;
+  }
+
+  .actions {
+    width: 10%;
+    text-align: right;
+  }
+}
+
+/*
+  Issues Page
+*/
+
+#issue {
+  
+}

app/assets/stylesheets/themes/flat/pages/_matches.scss

@@ -0,0 +1,326 @@
+/*
+  Matches Listing
+*/
+
+table#matches {
+  width: 100%;
+  display: table;
+  table-layout: auto;
+  margin-bottom: 20px;
+
+  .opponent {
+    width: 30%;
+  }
+
+  .date,
+  .maps {
+    width: 20%;
+  }
+
+  .score {
+    width: 10%;
+    text-align: right;
+  }
+}
+
+/*
+  Match Page
+*/
+
+div#match {
+  $title-height: 100px;
+
+  @include span-columns(12);
+  border-bottom: 3px solid $light-gray;
+
+  .contesters,
+  .details,
+  .referee,
+  .predictions,
+  .report {
+    @include span-columns(12);
+  }
+
+  .contesters {
+    margin-bottom: 20px;
+
+    .vs {
+      margin: 0 auto;
+      display: block;
+      font: $title-height/2 $montserrat;
+      border-radius: 50px;
+      background: $blue;
+      width: $title-height;
+      height: $title-height;
+      text-align: center;
+      line-height: $title-height;
+      color: white;
+      font-style: italic;
+      text-transform: uppercase;
+      padding-right: 10px;
+      font-weight: bold;
+    }
+
+    .team-1,
+    .team-2 {
+      max-height: $title-height;
+      overflow: hidden;
+    }
+
+    .team-1 {
+      @include span-columns(5);
+      line-height: $title-height;
+      text-align: right;
+    }
+
+    .team-2 {
+      @include span-columns(5);
+      line-height: $title-height;
+      text-align: left;
+    }
+
+    .versus {
+      @include span-columns(2);
+      position: relative;
+      font-weight: bold;
+
+      &.split:before {
+        content: "";
+        display: block;
+        position: absolute;
+        background: white;
+        width: 1px;
+        height: $title-height;
+        margin: 0 auto;
+        left: 50%;
+        top: 0;
+      }
+
+      .score-1,
+      .score-2 {
+        font: $title-height/2 $montserrat;
+        color: white;
+        width: 50%;
+        position: absolute;
+        top: 0;
+        text-align: center;
+        line-height: $title-height;
+        font-weight: bold;
+      }
+
+      .score-1 {
+        padding-left: $title-height/6;
+        left: 0;
+      }
+      
+      .score-2 {
+        padding-right: $title-height/6;
+        right: 0;
+      }
+    }
+  }
+
+  .details {
+    margin-bottom: 20px;
+    text-align: center;
+
+    .contest,
+    .date {
+      text-align: center;
+    }
+
+    .date {
+      font-style: italic;
+      font-weight: normal;
+    }
+
+    .contest {
+      margin-bottom: 10px;
+    }
+  }
+
+  .lineups {
+    @include span-columns(12);
+    margin: 20px 0 40px;
+
+    h3 {
+      text-align: center;
+      margin-bottom: 1em;
+    }
+
+    i {
+      color: $gold;
+    }
+
+    .team-1,
+    .team-2 {
+      position: relative;
+
+      .player {
+        @include span-columns(12);
+        line-height: 40px;
+        margin-bottom: 10px;
+      }
+
+      .players {
+        position: relative;
+      }
+
+      .controls {
+        top: 0;
+        position: absolute;
+        z-index: 100;
+
+        input {
+          margin: 0;
+        }
+      }
+
+      form {
+
+        label.checkbox {
+          padding: 0;
+        }
+      }
+    }
+
+    .team-1 {
+      @include span-columns(6);
+      text-align: right;
+
+      .flag {
+        margin: 0 0 0 10px;
+      }
+
+      .controls {
+        left: 0;
+      }
+
+      form {
+
+        label.checkbox {
+          float: right;
+          margin-left: 1em;
+        }
+      }
+    }
+
+    .team-2 {
+      @include span-columns(6);
+      @include omega;
+
+      .controls {
+        right: 0;
+      }
+
+      form {
+
+        label.checkbox {
+          float: left;
+          margin-right: 1em;
+        }
+      }
+    }
+
+    &.shift .team-2 {
+      @include shift(6);
+    }
+
+    .mercenaries {
+      @include span-columns(12);
+
+      input {
+        margin: 0;
+      }
+    }
+  }
+
+  .scoring {
+    @include span-columns(12);
+    border-top: 3px solid $light-gray;
+
+    h3 {
+      margin-bottom: 1em;
+    }
+
+    .scores input {
+      width: auto;
+      margin-left: 0;
+      text-align: center;
+      width: 40px;
+    }
+  }
+
+  .predictions {
+    text-align: center;
+
+    h4 {
+      margin-bottom: 1em;
+    }
+
+    input {
+      text-align: center;
+    }
+
+    .add {
+      @include span-columns(12);
+      text-align: center;
+
+      input {
+        float: none;
+        margin: 20px 0 0 0;
+      }
+    }
+
+    .team-1 {
+      @include span-columns(6);
+      text-align: right;
+
+      .highlight {
+        margin-left: 10px;
+      }
+    }
+
+    .team-2 {
+      @include span-columns(6);
+      @include omega;
+      text-align: left;
+
+      .highlight {
+        margin-right: 10px;
+      }
+    }
+  }
+
+  .report {
+    margin: 20px 0;
+    padding-top: 20px;
+    border-top: 3px solid $light-gray;
+
+    textarea {
+      margin: 20px 0;
+      width: 100%;
+      height: 600px;
+    }
+
+    .mceLayout {
+      margin: 20px 0;
+    }
+  }
+}
+
+/*
+  Map Page
+*/
+
+div#map {
+
+  .preview {
+    @include span-columns(12);
+    text-align: center;
+
+    img {
+      margin: 20px 0;
+    }
+  }
+}

app/assets/stylesheets/themes/flat/pages/_news.scss

@@ -0,0 +1,197 @@
+/*
+  Articles
+*/
+
+div.article {
+  @include span-columns(12);
+  border-bottom: 3px solid $light-gray;
+  padding-bottom: 20px;
+
+  h1 {
+    margin: 1em 0;
+    
+    a {
+      color: black;
+    }
+  }
+
+  .content {
+    @include span-columns(12);
+    margin-bottom: 40px;
+
+    ul {
+      @extend ul.disc;
+    }
+  }
+
+  .author {
+    @include span-columns(6);
+
+    a {
+      font-weight: bold;
+    }
+  }
+
+  .comments {
+    @include span-columns(6);
+    @include omega;
+    text-align: right;
+
+    .fa {
+      margin-right: 10px;
+    }
+  }
+
+  .actions {
+    @include span-columns(12);
+    @include omega;
+    margin-top: 10px;
+  }
+
+  &.preview {
+    @include span-columns(12);
+    border-radius: $base-border-radius;
+    background: $content-color;
+    padding: 20px;
+    margin-bottom: $container-padding;
+    box-shadow: $light-shadow;
+    border: 0;
+
+    .content {
+      margin-bottom: 10px;
+    }
+
+    h2 {
+      margin: 0 0 .5em 0;
+    }
+  }
+}
+
+div.article-links {
+  @include span-columns(12);
+
+  .previous {
+    @include span-columns(6);
+
+    .fa {
+      padding-right: 10px;
+    }
+  }
+
+  .next {
+    @include span-columns(6);
+    @include omega;
+    text-align: right;
+
+    .fa {
+      padding-left: 10px;
+    }
+  }
+}
+
+table.articles.archive {
+
+  .title {
+    width: 50%;
+  }
+
+  .date {
+    width: 20%;
+  }
+
+  .author {
+    width: 20%;
+  }
+}
+
+/*
+  Article Form
+*/
+
+form.article {
+
+  h4 {
+    margin-bottom: 20px;
+  }
+}
+
+.files {
+
+  .files-list {
+    margin: 20px 0 40px;
+  }
+
+  form {
+    @include span-columns(12);
+    margin: 20px 0;
+
+    .fields {
+      margin-bottom: 20px;
+    }
+  }
+}
+
+/*
+  Articles Page
+*/
+
+#articles {
+  @include span-columns(12);
+
+  h3 {
+    @include span-columns(12);
+    margin-top: 1em;
+  }
+
+  .article-list {
+    @include span-columns(12);
+    margin-bottom: 10px;
+
+    .new {
+      @extend .highlight;
+      margin-right: 10px;
+    }
+
+    .title {
+      @include span-columns(6);
+    }
+
+    .meta {
+      @include span-columns(6);
+      @include omega;
+      text-align: right;
+    }
+  }
+
+  .button.new {
+    margin-top: 20px;
+  }
+}
+
+/*
+  Admin Articles Page
+*/
+
+div.admin.articles {
+
+  .title {
+    width: 40%;
+  }
+
+  .category {
+    width: 20%;
+  }
+
+  .created {
+    width: 20%;
+  }
+
+  .author {
+    width: 10%;
+  }
+
+  .actions {
+    width: 10%;
+    text-align: right;
+  }
+}

app/assets/stylesheets/themes/flat/pages/_polls.scss

@@ -0,0 +1,52 @@
+/*
+  Polls List
+*/
+
+table.polls {
+
+  .questions {
+    width: 30%;
+  }
+
+  .date {
+    width: 30%;
+  }
+
+  .votes,
+  .user {
+    width: 15%;
+  }
+
+  .actions {
+    width: 10%;
+    text-align: right;
+  }
+}
+
+/*
+  Poll Forms
+*/
+
+#poll {
+  .inputs {
+
+    .question {
+      @include span-columns(9);
+    }
+
+    .destroy {
+      @include span-columns(3);
+      @include omega;
+
+      .checkbox {
+        float: left;
+      }
+
+      .remove {
+        display: inline-block;
+        line-height: 40px;
+        margin-left: 10px;
+      }
+    }
+  }
+}

app/assets/stylesheets/themes/flat/pages/_servers.scss

@@ -0,0 +1,51 @@
+/*
+  Servers
+*/
+
+#servers {
+  @include span-columns(12);
+  margin-bottom: 20px;
+
+  div.server {
+    @include span-columns(12);
+    margin-bottom: 20px;
+    padding-bottom: 20px;
+    border-bottom: 3px solid $light-gray;
+    position: relative;
+
+    .connect {
+      position: absolute;
+      top: 0;
+      right: 0;
+      margin: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+      border-bottom: 0;
+    }
+  }  
+}
+
+/*
+  Server Form
+*/
+
+form.server {
+
+  .inputs {
+    @include span-columns(12);
+
+    input {
+      max-width: 100%;
+    }
+
+    .ip {
+      @include span-columns(9);
+    }
+
+    .port {
+      @include span-columns(3);
+    }
+  }
+}

app/assets/stylesheets/themes/flat/pages/_teams.scss

@@ -0,0 +1,108 @@
+/*
+  Teams Listing
+*/
+
+#teams {
+  @include span-columns(12);
+  
+  table {
+    table-layout: auto;
+  }
+  
+  .country {
+    width: 5%;
+  }
+
+  .name {
+    width: 45%;
+  }
+
+  .irc {
+    width: 25%;
+  }
+
+  .members {
+    width: 10%;
+  }
+
+  .actions {
+    width: 15%;
+    text-align: right;
+  }
+
+  &.edit {
+    @include span-columns(12);
+
+    h1 {
+      margin-bottom: 1em;
+    }
+
+    .tabbed-contents {
+      margin-bottom: 20px;
+    }
+  }
+}
+
+/*
+  Team Profiles
+*/
+
+#team-profile {
+
+  .logo {
+    @include span-columns(12);
+    margin: 20px 0;
+    text-align: center;
+
+    img {
+      display: inline-block;
+      float: none;
+      width: auto;
+    }
+  }
+
+  .controls {
+    @include span-columns(12);
+    margin: 20px 0;
+  }
+}
+
+
+#members {
+  table-layout: auto;
+
+  .country,
+  .age {
+    width: 5%;
+  }
+
+  .member {
+    width: 20%;
+  }
+
+  .steamid {
+    width: 15%;
+  }
+
+  .rank {
+    width: 10%;
+  }
+
+  .note {
+    width: 30%;
+  }
+
+  .joined {
+    width: 10%;
+  }
+
+  .joined {
+    text-align: right;
+  }
+
+  &.short {
+    .rank {
+      width: 40%;
+    }
+  }
+}

app/assets/stylesheets/themes/flat/pages/_users.scss

@@ -0,0 +1,216 @@
+/*
+  Users Listing
+*/
+
+#users {
+  table-layout: auto;
+
+  .country,
+  .age {
+    width: 5%;
+  }
+
+  .username,
+  .name {
+    width: 30%;
+  }
+
+  .steamid {
+    width: 20%;
+  }
+
+  .actions {
+    text-align: right;
+  }
+}
+
+/*
+  Profile
+*/
+
+#user {
+  @include span-columns(12);
+
+  .tabbed-contents {
+    margin-bottom: 20px;
+  }
+}
+
+#profile {
+  
+  .controls {
+    @include shift(0);
+  }
+
+  .tab {
+
+    h4 {
+      margin-bottom: 1em;
+    }
+
+    .fields:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+#user-profile {
+
+  .photo {
+    @include span-columns(12);
+    margin: 20px 0;
+    text-align: center;
+
+    img {
+      display: inline-block;
+      float: none;
+      width: auto;
+    }
+  }
+
+  #user-data {
+    @include span-columns(12);
+    margin-bottom: 20px;
+
+    h2,
+    h3,
+    h4 {
+      margin-bottom: 1em;
+    }
+
+    .group {
+      @include span-columns(6);
+
+      dd a {
+        float: none;
+        display: block;
+      }
+    }
+
+    .achievements {
+      margin-bottom: 20px;
+    }
+
+    tbody td {
+      &:first-child,
+      &:nth-child(2) {
+        text-align: left;
+      }
+    }
+  }
+
+  table.predictions {
+
+    .prediction {
+      text-align: right;
+    }
+  }
+}
+
+#profile-edit {
+
+  h1 {
+    margin-bottom: 1em;
+  }
+
+  form {
+    margin-top: 0;
+  }
+}
+
+/*
+  Agenda
+*/
+
+#agenda {
+
+  h4 {
+    margin-bottom: 1em;
+  }
+
+  table {
+    margin-bottom: 20px;
+  }
+
+  form {
+    @include span-columns(12);
+    margin-bottom: 20px;
+  }
+
+  .tab {
+    :last-child {
+      margin-bottom: 0;  
+    }
+  }
+
+  #teams {
+
+    table {
+      margin-bottom: 40px;
+    }
+  }
+}
+
+/*
+  Messages
+*/
+
+#messages {
+  h1 {
+    margin-bottom: 1em;
+  } 
+
+  .tab {
+
+    :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .message {
+    @include span-columns(12);
+    margin-bottom: 20px;
+
+    .subject {
+      margin-bottom: 1em;
+    }
+
+    .content {
+      margin-bottom: 20px;
+    }
+
+    a.message {
+      display: inline;
+      margin: 0;
+      float: none;
+    }
+
+    &.highlight {
+      font-weight: bold;
+    }
+  }
+
+  .back {
+    margin-top: 20px;
+  }
+}
+
+/*
+  Staff List
+*/
+
+table.staff {
+  table-layout: auto;
+
+  .country {
+    width: 6%;
+  }
+
+  .username {
+    width: 20%;
+  }
+
+  .age {
+    width: 5%;
+  }
+}

app/assets/stylesheets/themes/flat/theme.css.scss

@@ -0,0 +1,62 @@
+/*
+  Libraries & Configuration
+*/
+
+@import "bourbon";
+@import "variables";
+@import "neat";
+@import "neat-helpers";
+@import "font-awesome";
+
+/*
+  Mixins
+*/
+
+@import "mixins/buttons";
+@import "mixins/flashes";
+
+/*
+  Layout
+*/
+
+@import "layout/hacks";
+@import "layout/body";
+@import "layout/typography";
+@import "layout/header";
+@import "layout/navigation";
+@import "layout/sidebar";
+@import "layout/footer";
+@import "layout/helpers";
+
+/*
+  Components
+*/
+
+@import "components/lists";
+@import "components/tables";
+@import "components/forms";
+@import "components/flashes";
+@import "components/comments";
+@import "components/gather";
+@import "components/breadcrumbs";
+@import "components/pagination";
+@import "components/tabs";
+@import "components/shoutbox";
+
+/*
+  Pages
+*/
+
+@import "pages/news";
+@import "pages/categories";
+@import "pages/contests";
+@import "pages/forums";
+@import "pages/teams";
+@import "pages/users";
+@import "pages/matches";
+@import "pages/files";
+@import "pages/bans";
+@import "pages/polls";
+@import "pages/issues";
+@import "pages/servers";
+@import "pages/groups";

app/helpers/application_helper.rb

@@ -10,7 +10,7 @@ module ApplicationHelper
   end
 
   def active_theme
-    'default'
+    'flat'
   end
 
   def theme_stylesheet_link_tag

app/views/application/_navigation.html.erb

@@ -10,7 +10,7 @@
         <% end %>
       </li>
       <li class="dropdown icon">
-        <%= active_link_to controller: "contests", action: "current", class: 'contests' do %>
+        <%= active_link_to({ controller: "contests", action: "current" }, class: 'contests') do %>
           Contests
         <% end %>
         <ul>
@@ -52,12 +52,12 @@
         </ul>
       </li>
       <li class="icon">
-        <%= active_link_to controller: "teams", action: :index, class: 'teams' do %>
+        <%= active_link_to({ controller: "teams", action: :index }, class: 'teams') do %>
           Teams
         <% end %>
       </li>
       <li class="dropdown icon">
-        <%= active_link_to controller: "users", action: :index, class: 'users' do %>
+        <%= active_link_to({ controller: "users", action: :index }, class: 'users') do %>
           Users
         <% end %>
         <ul>

app/views/layouts/errors.html.erb

@@ -6,13 +6,13 @@
     <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <link rel="icon" type="image/png" href="/favicon.png" />
-    <%= stylesheet_link_tag 'errors' %>
+    <%= stylesheet_link_tag "themes/#{active_theme}/errors" %>
   </head>
   <body>
     <div id="error">
       <div class="message">
         <div id="logo">
-          <%= link_to image_tag("logo.png"), root_path %>
+          <%= link_to image_tag("themes/#{active_theme}/logo.png"), root_path %>
         </div>
         <div id="code">
           <h1><%= params[:code] %></h1>

app/views/matches/show.html.erb

@@ -117,7 +117,7 @@
     </div>
   <% end %>
 
-  <% if cuser and @match.can_update? cuser, [:report] %>
+  <% if cuser and @match.can_update? cuser, referee_id: cuser.id %>
     <div class="referee">
       <%= link_to "Referee Admin", { controller: :matches, action: 'ref', id: @match }, class: 'button' %>
     </div>

app/views/posts/_form.html.erb

@@ -1,4 +1,4 @@
-<%= form_for(@post, html: { class: 'square' }) do |f| %>
+<%= form_for @post, html: { class: 'square' } do |f| %>
   <%= render 'shared/errors', messages: @post.errors.full_messages %>
 
   <%= f.hidden_field :topic_id %>

app/views/widgets/_logged.html.erb

@@ -36,5 +36,7 @@
     </ul>
   </div>
 
-  <div class="avatar" style="background-image: url('<%= cuser.profile.avatar.url %>')"></div>
+  <% if cuser.profile %>
+    <div class="avatar" style="background-image: url('<%= cuser.profile.avatar.url %>')"></div>
+  <% end %>
 </div>

config/application.rb

@@ -9,7 +9,7 @@ module Ensl
     config.exceptions_app = self.routes
 
     # Additional assets
-    config.assets.precompile += %w{errors.css}
+    config.assets.precompile += Dir.glob("#{config.root}/app/assets/stylesheets/themes/*").map { |path| ["#{path}/theme.css", "#{path}/errors.css"] }.flatten
 
     # Custom directories with classes and modules you want to be autoloadable.
     config.autoload_paths += Dir["#{config.root}/app/services/**/", "#{config.root}/app/models/concerns/"]