diff --git a/client/build.js b/client/build.js
index 4a13fcb..bab4972 100644
--- a/client/build.js
+++ b/client/build.js
@@ -91,10 +91,12 @@ function bundleHtml(config) {
 
 function bundleCss() {
     const minify = require('csso').minify;
-    glob('./css/**/*.css', {}, (er, files) => {
+    const stylus = require('stylus');
+    glob('./css/**/*.styl', {}, (er, files) => {
         let css = '';
         for (const file of files) {
-            css += fs.readFileSync(file);
+            css += stylus.render(
+                fs.readFileSync(file, 'utf-8'), {filename: file});
         }
         fs.writeFileSync('./public/bundle.min.css', minify(css));
         console.info('Bundled CSS');
diff --git a/client/css/colors.styl b/client/css/colors.styl
new file mode 100644
index 0000000..47ae9f9
--- /dev/null
+++ b/client/css/colors.styl
@@ -0,0 +1,28 @@
+$main-color = #24AADD
+$top-nav-color = #F5F5F5
+$text-color = #111
+$inactive-link-color = #888
+$line-color = #DDD
+$inactive-tab-text-color = $inactive-link-color
+$active-tab-text-color = $text-color
+$active-tab-background-color = #E5E5E5
+$message-info-border-color = #BDF
+$message-info-background-color = #E3EFF9
+$message-error-border-color = #FCC
+$message-error-background-color = #FFF5F5
+$message-success-border-color = #D3E3D3
+$message-success-background-color = #F5FFF5
+$input-bad-border-color = #FCC
+$input-bad-background-color = #FFF5F5
+$input-good-border-color = #D3E3D3
+$input-good-background-color = #F5FFF5
+$input-enabled-background-color = #FAFAFA
+$input-enabled-border-color = #EEE
+$input-enabled-text-color = $text-color
+$input-disabled-background-color = #FAFAFA
+$input-disabled-border-color = #EEE
+$input-disabled-text-color = #888
+$button-enabled-text-color = white
+$button-enabled-background-color = $main-color
+$button-disabled-text-color = #666
+$button-disabled-background-color = #CCC
diff --git a/client/css/forms.css b/client/css/forms.css
deleted file mode 100644
index 1d30e86..0000000
--- a/client/css/forms.css
+++ /dev/null
@@ -1,252 +0,0 @@
-form {
-    display: block;
-    width: 20em;
-}
-form ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-}
-form ul li {
-    margin-top: 0.5em;
-}
-form ul li label {
-    display: block;
-    padding: 0.5em 0;
-}
-form .input {
-    margin-bottom: 1em;
-}
-form .buttons {
-    margin-top: 1em;
-}
-form .input li:first-child label:not(.radio):not(.checkbox):not(.file-dropper),
-form .input li:first-child {
-    padding-top: 0;
-    margin-top: 0;
-}
-form .hint {
-    margin-top: 0.5em;
-    margin-bottom: 0;
-    color: var(--inactive-link-color);
-    font-size: 80%;
-    line-height: 120%;
-}
-
-form.tabular ul {
-    display: table;
-    width: 100%;
-}
-form.tabular ul li {
-    display: table-row;
-}
-form.tabular ul li label:not(.radio):not(.checkbox):not(.file-dropper) {
-    display: table-cell;
-    width: 33%;
-}
-form.tabular .messages,
-form.tabular .buttons {
-    margin-left: 33%;
-}
-
-
-
-/*
- * Radio buttons and checkboxes
- */
-input[type=radio], input[type=checkbox] {
-    position: absolute;
-    opacity: 0;
-}
-.radio, .checkbox {
-    box-sizing: border-box;
-    position: relative;
-    display: inline-block;
-    padding-left: calc(20px + 0.5em) !important;
-    vertical-align: middle;
-    cursor: pointer;
-}
-.radio:hover:before, .checkbox:hover:before {
-    border-color: var(--main-color);
-}
-.radio:before {
-    border-radius: 100%;
-}
-.radio:before, .checkbox:before {
-    transition: border-color 0.1s linear;
-    position: absolute;
-    top: 50%;
-    left: 0;
-    display: block;
-    margin-top: -10px;
-    width: 16px;
-    height: 16px;
-    background: var(--input-enabled-background-color);
-    border: 2px solid var(--input-enabled-border-color);
-    content: '';
-}
-.radio:after {
-    background: var(--main-color);
-    transition: opacity 0.1s linear;
-    position: absolute;
-    top: 50%;
-    left: 5px;
-    display: block;
-    margin-top: -5px;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    content: '';
-    opacity: 0;
-}
-.checkbox:after {
-    transition: opacity 0.1s linear;
-    position: absolute;
-    top: 50%;
-    left: 6px;
-    display: block;
-    margin-top: -7px;
-    width: 5px;
-    height: 9px;
-    border-right: 3px solid var(--main-color);
-    border-bottom: 3px solid var(--main-color);
-    content: '';
-    opacity: 0;
-    transform: rotate(45deg);
-}
-
-input[type=radio]:checked + .radio:before,
-input[type=checkbox]:checked + .checkbox:before {
-    border-color: var(--main-color);
-}
-input[type=radio]:checked + .radio:after,
-input[type=checkbox]:checked + .checkbox:after {
-    opacity: 1;
-}
-input[type=radio]:disabled + .radio:before,
-input[type=checkbox]:disabled + .checkbox:before,
-input[type=radio]:disabled + .radio:after,
-input[type=checkbox]:disabled + .checkbox:after {
-    border-color: var(--input-disabled-text-color);
-}
-input[type=radio]:disabled + .radio,
-input[type=checkbox]:disabled + .checkbox {
-    border-color: var(--input-disabled-font-color);
-}
-input[type=radio]:focus + .radio:before,
-input[type=checkbox]:focus + .checkbox:before {
-    border-color: var(--main-color);
-}
-
-
-
-/*
- * Regular inputs
- */
-select,
-textarea,
-input[type=text],
-input[type=email],
-input[type=password] {
-    font-family: 'Inconsolata', monospace;
-    font-size: 100%;
-    padding: 0.3em;
-    text-overflow: ellipsis;
-    width: 100%;
-    box-sizing: border-box;
-    border: 2px solid var(--input-enabled-border-color);
-    background: var(--input-enabled-background-color);
-    color: var(--input-enabled-text-color);
-    box-shadow: none; /* :-moz-submit-invalid on FF */
-    transition: border-color 0.1s linear, background-color 0.1s linear;
-}
-
-select:disabled,
-textarea:disabled,
-input[type=text]:disabled,
-input[type=email]:disabled,
-input[type=password]:disabled {
-    border: 2px solid var(--input-disabled-border-color);
-    background: var(--input-disabled-background-color);
-    color: var(--input-disabled-text-color);
-}
-
-select:focus,
-textarea:focus,
-input[type=text]:focus,
-input[type=email]:focus,
-input[type=password]:focus {
-    border-color: var(--main-color);
-}
-
-form.show-validation .input input:invalid {
-    outline: none;
-    border: 2px solid var(--input-bad-border-color);
-    background: var(--input-bad-background-color);
-}
-form.show-validation .input input:valid {
-    outline: none;
-    border: 2px solid var(--input-good-border-color);
-    background: var(--input-good-background-color);
-}
-
-
-
-/*
- * Buttons
- */
-button,
-input[type=button],
-input[type=submit] {
-    cursor: pointer;
-    font-size: 100%;
-    line-height: 100%;
-    padding: 0.3em 0.7em;
-    border: 1px solid var(--button-enabled-background-color);
-    background: var(--button-enabled-background-color);
-    color: var(--button-enabled-text-color);
-}
-button:disabled,
-input[type=button]:disabled,
-input[type=submit]:disabled {
-    cursor: default;
-    border-color: var(--button-disabled-background-color);
-    background-color: var(--button-disabled-background-color);
-    color: var(--button-disabled-text-color);
-}
-button:focus,
-input[type=button]:focus,
-input[type=submit]:focus {
-    outline: 2px solid var(--text-color);
-}
-select:-moz-focusring {
-    text-shadow: 0;
-}
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-    border: 0;
-}
-
-
-
-/*
- * File dropper
- */
-.file-dropper {
-    background: white;
-    border: 3px dashed #eee;
-    padding: 0.3em 0.5em;
-    line-height: 140%;
-    text-align: center;
-    cursor: pointer;
-    word-wrap: break-word;
-}
-input[type=file]:disabled+.file-dropper {
-    cursor: default;
-    opacity: .5;
-}
-input[type=file]:active+.file-dropper,
-input[type=file]:focus+.file-dropper,
-.file-dropper.active {
-    border-color: var(--main-color);
-}
diff --git a/client/css/forms.styl b/client/css/forms.styl
new file mode 100644
index 0000000..ca20617
--- /dev/null
+++ b/client/css/forms.styl
@@ -0,0 +1,233 @@
+@import colors
+
+form
+    display: block
+    width: 20em
+
+    ul
+        list-style-type: none
+        margin: 0
+        padding: 0
+
+        li
+            margin-top: 0.5em
+
+        label
+            display: block
+            padding: 0.5em 0
+
+    .input
+        margin-bottom: 1em
+
+    .buttons
+        margin-top: 1em
+
+    .input li:first-child label:not(.radio):not(.checkbox):not(.file-dropper),
+    .input li:first-child
+        padding-top: 0
+        margin-top: 0
+
+    .hint
+        margin-top: 0.5em
+        margin-bottom: 0
+        color: $inactive-link-color
+        font-size: 80%
+        line-height: 120%
+
+form.tabular
+    ul
+        display: table
+        width: 100%
+
+        li
+            display: table-row
+
+            label:not(.radio):not(.checkbox):not(.file-dropper)
+                display: table-cell
+                width: 33%
+
+    .messages, .buttons
+        margin-left: 33%
+
+
+
+/*
+ * Radio buttons and checkboxes
+ */
+input[type=radio], input[type=checkbox]
+    position: absolute
+    opacity: 0
+
+.radio, .checkbox
+    box-sizing: border-box
+    position: relative
+    display: inline-block
+    padding-left: calc(20px + 0.5em) !important
+    vertical-align: middle
+    cursor: pointer
+
+    &:hover:before
+        border-color: $main-color
+
+.radio:before
+    border-radius: 100%
+
+.radio:before, .checkbox:before
+    transition: border-color 0.1s linear
+    position: absolute
+    top: 50%
+    left: 0
+    display: block
+    margin-top: -10px
+    width: 16px
+    height: 16px
+    background: $input-enabled-background-color
+    border: 2px solid $input-enabled-border-color
+    content: ''
+
+.radio:after
+    background: $main-color
+    transition: opacity 0.1s linear
+    position: absolute
+    top: 50%
+    left: 5px
+    display: block
+    margin-top: -5px
+    width: 10px
+    height: 10px
+    border-radius: 50%
+    content: ''
+    opacity: 0
+
+.checkbox:after
+    transition: opacity 0.1s linear
+    position: absolute
+    top: 50%
+    left: 6px
+    display: block
+    margin-top: -7px
+    width: 5px
+    height: 9px
+    border-right: 3px solid $main-color
+    border-bottom: 3px solid $main-color
+    content: ''
+    opacity: 0
+    transform: rotate(45deg)
+
+
+input[type=radio]:checked + .radio:before,
+input[type=checkbox]:checked + .checkbox:before
+    border-color: $main-color
+
+input[type=radio]:checked + .radio:after,
+input[type=checkbox]:checked + .checkbox:after
+    opacity: 1
+
+input[type=radio]:disabled + .radio:before,
+input[type=checkbox]:disabled + .checkbox:before,
+input[type=radio]:disabled + .radio:after,
+input[type=checkbox]:disabled + .checkbox:after
+    border-color: $input-disabled-text-color
+
+input[type=radio]:disabled + .radio,
+input[type=checkbox]:disabled + .checkbox
+    border-color: $input-disabled-text-color
+
+input[type=radio]:focus + .radio:before,
+input[type=checkbox]:focus + .checkbox:before
+    border-color: $main-color
+
+
+
+/*
+ * Regular inputs
+ */
+select,
+textarea,
+input[type=text],
+input[type=email],
+input[type=password]
+    font-family: 'Inconsolata', monospace
+    font-size: 100%
+    padding: 0.3em
+    text-overflow: ellipsis
+    width: 100%
+    box-sizing: border-box
+    border: 2px solid $input-enabled-border-color
+    background: $input-enabled-background-color
+    color: $input-enabled-text-color
+    box-shadow: none; /* :-moz-submit-invalid on FF */
+    transition: border-color 0.1s linear, background-color 0.1s linear
+
+    &:disabled
+        border: 2px solid $input-disabled-border-color
+        background: $input-disabled-background-color
+        color: $input-disabled-text-color
+
+    &:focus
+        border-color: $main-color
+
+form.show-validation .input
+    input:invalid
+        outline: none
+        border: 2px solid $input-bad-border-color
+        background: $input-bad-background-color
+    input:valid
+        outline: none
+        border: 2px solid $input-good-border-color
+        background: $input-good-background-color
+
+
+
+/*
+ * Buttons
+ */
+button,
+input[type=button],
+input[type=submit]
+    cursor: pointer
+    font-size: 100%
+    line-height: 100%
+    padding: 0.3em 0.7em
+    border: 1px solid $button-enabled-background-color
+    background: $button-enabled-background-color
+    color: $button-enabled-text-color
+
+    &:disabled
+        cursor: default
+        border-color: $button-disabled-background-color
+        background-color: $button-disabled-background-color
+        color: $button-disabled-text-color
+
+    &:focus
+        outline: 2px solid $text-color
+
+select:-moz-focusring
+    text-shadow: 0
+
+button::-moz-focus-inner,
+input::-moz-focus-inner
+    border: 0
+
+
+
+/*
+ * File dropper
+ */
+.file-dropper
+    background: white
+    border: 3px dashed #eee
+    padding: 0.3em 0.5em
+    line-height: 140%
+    text-align: center
+    cursor: pointer
+    word-wrap: break-word
+
+input[type=file]:disabled+.file-dropper
+    cursor: default
+    opacity: .5
+
+input[type=file]:active+.file-dropper,
+input[type=file]:focus+.file-dropper,
+.file-dropper.active
+    border-color: $main-color
diff --git a/client/css/help.css b/client/css/help.css
deleted file mode 100644
index 4548a8a..0000000
--- a/client/css/help.css
+++ /dev/null
@@ -1,12 +0,0 @@
-#help {
-    width: 40em;
-}
-#help nav {
-    margin-bottom: 1.5em;
-}
-#help td {
-    padding-right: 1em;
-}
-#help .section {
-    margin-top: 2em;
-}
diff --git a/client/css/help.styl b/client/css/help.styl
new file mode 100644
index 0000000..76db6c1
--- /dev/null
+++ b/client/css/help.styl
@@ -0,0 +1,11 @@
+#help
+    width: 40em
+
+    nav
+        margin-bottom: 1.5em
+
+    td
+        padding-right: 1em
+
+    .section
+        margin-top: 2em
diff --git a/client/css/home.css b/client/css/home.css
deleted file mode 100644
index d4ee6d7..0000000
--- a/client/css/home.css
+++ /dev/null
@@ -1,9 +0,0 @@
-#home {
-    text-align: center !important;
-}
-#home h1 {
-    margin-top: 0;
-}
-#home .message {
-    margin-bottom: 2em;
-}
diff --git a/client/css/home.styl b/client/css/home.styl
new file mode 100644
index 0000000..18fc877
--- /dev/null
+++ b/client/css/home.styl
@@ -0,0 +1,8 @@
+#home
+    text-align: center !important
+
+    h1
+        margin-top: 0
+
+    .message
+        margin-bottom: 2em
diff --git a/client/css/main.css b/client/css/main.css
deleted file mode 100644
index 5efa979..0000000
--- a/client/css/main.css
+++ /dev/null
@@ -1,209 +0,0 @@
-* {
-    --main-color: #24AADD;
-    --top-nav-color: #F5F5F5;
-    --text-color: #111;
-    --inactive-link-color: #888;
-    --line-color: #DDD;
-    --inactive-tab-text-color: var(--inactive-link-color);
-    --active-tab-text-color: var(--text-color);
-    --active-tab-background-color: #E5E5E5;
-    --message-info-border-color: #BDF;
-    --message-info-background-color: #E3EFF9;
-    --message-error-border-color: #FCC;
-    --message-error-background-color: #FFF5F5;
-    --message-success-border-color: #D3E3D3;
-    --message-success-background-color: #F5FFF5;
-    --input-bad-border-color: #FCC;
-    --input-bad-background-color: #FFF5F5;
-    --input-good-border-color: #D3E3D3;
-    --input-good-background-color: #F5FFF5;
-    --input-enabled-background-color: #FAFAFA;
-    --input-enabled-border-color: #EEE;
-    --input-enabled-text-color: var(--text-color);
-    --input-disabled-background-color: #FAFAFA;
-    --input-disabled-border-color: #EEE;
-    --input-disabled-text-color: #888;
-    --button-enabled-text-color: white;
-    --button-enabled-background-color: var(--main-color);
-    --button-disabled-text-color: #666;
-    --button-disabled-background-color: #CCC;
-}
-
-body {
-    overflow-y: scroll;
-    margin: 0;
-    color: var(--text-color);
-    font-family: 'Droid Sans' !important;
-    font-size: 12pt;
-    line-height: 18pt;
-}
-
-h1, h2, h3 {
-    font-weight: normal;
-    margin-bottom: 1em;
-}
-
-a {
-    color: var(--main-color);
-    text-decoration: none;
-    transition: color 0.1s linear;
-}
-
-#content-holder {
-    margin: 2em;
-    text-align: center;
-}
-#content-holder>.content-wrapper {
-    text-align: left;
-    display: inline-block;
-    margin: 0 auto;
-}
-#content-holder>.content-wrapper:not(.transparent) {
-    background: var(--top-nav-color);
-    padding: 2em;
-}
-#content-holder>.content-wrapper>*:first-child {
-    margin-top: 0;
-}
-hr {
-    border: 0;
-    border-top: 1px solid var(--line-color);
-    margin: 1em 0;
-    padding: 0;
-}
-
-nav ul {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-    display: inline-block;
-}
-nav ul li {
-    display: inline-block;
-    padding: 0;
-    margin: 0;
-}
-nav ul li a {
-    display: inline-block;
-}
-nav ul li img {
-    margin: 0;
-    vertical-align: top; /* fix ghost margin under the image */
-}
-
-nav.plain-nav ul li {
-    display: block;
-}
-nav.plain-nav ul li a {
-    display: inline;
-}
-
-nav.text-nav {
-    margin: 1em 0;
-    line-height: 2.3em;
-    vertical-align: middle;
-}
-nav.text-nav ul li a {
-    padding: 0 1.2em;
-}
-nav.text-nav ul li:not(.active) a {
-    color: var(--inactive-tab-text-color);
-}
-nav.text-nav ul li:hover:not(.active) a {
-    color: var(--active-tab-text-color);
-}
-nav.text-nav ul li.active a {
-    background: var(--active-tab-background-color);
-    color: var(--active-tab-text-color);
-}
-
-#top-nav {
-    background: var(--top-nav-color);
-    margin: 0;
-}
-#top-nav ul {
-    display: block;
-    text-align: right;
-}
-#top-nav ul li {
-    float: left;
-}
-#top-nav ul li[data-name=account],
-#top-nav ul li[data-name=register],
-#top-nav ul li[data-name=login],
-#top-nav ul li[data-name=logout],
-#top-nav ul li[data-name=settings],
-#top-nav ul li[data-name=help] {
-    float: none;
-}
-#top-nav .access-key {
-    text-decoration: underline;
-}
-#top-nav .thumbnail, #top-nav span {
-    vertical-align: middle;
-}
-#top-nav .thumbnail {
-    width: 1.5em;
-    height: 1.5em;
-    margin: calc((2.3em - 1.5em) / 2);
-    margin-right: 0.6em;
-    margin-left: calc(0.6em - 1.2em);
-    float: left;
-}
-
-.messages {
-    margin: 0 auto;
-    width: 30em;
-    max-width: 100%;
-}
-.messages .message {
-    margin: 0.25em 0;
-    display: inline-block;
-    text-align: left;
-    padding: 0.5em 1em;
-}
-.message.info {
-    border: 1px solid var(--message-info-border-color);
-    background: var(--message-info-background-color);
-}
-.message.error {
-    border: 1px solid var(--message-error-border-color);
-    background: var(--message-error-background-color);
-}
-.message.success {
-    border: 1px solid var(--message-success-border-color);
-    background: var(--message-success-background-color);
-}
-
-.thumbnail {
-    /*background-image: attr(data-src url);*/ /* not available yet */
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center;
-    display: inline-block;
-}
-.thumbnail img {
-    opacity: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.flexbox-dummy {
-    height: 0 !important;
-    padding-top: 0 !important;
-    padding-bottom: 0 !important;
-    margin-top: 0 !important;
-    margin-bottom: 0 !important;
-}
-
-.pager nav .disabled {
-    opacity: .5;
-}
-.pager nav .prev span,
-.pager nav .next span {
-    opacity: 0;
-    position: absolute;
-    display: block;
-    width: 0;
-    height: 0;
-}
diff --git a/client/css/main.styl b/client/css/main.styl
new file mode 100644
index 0000000..771fdaf
--- /dev/null
+++ b/client/css/main.styl
@@ -0,0 +1,150 @@
+@import colors
+
+body
+    overflow-y: scroll
+    margin: 0
+    color: $text-color
+    font-family: 'Droid Sans' !important
+    font-size: 12pt
+    line-height: 18pt
+
+h1, h2, h3
+    font-weight: normal
+    margin-bottom: 1em
+
+a
+    color: $main-color
+    text-decoration: none
+    transition: color 0.1s linear
+
+#content-holder
+    margin: 2em
+    text-align: center
+    >.content-wrapper
+        text-align: left
+        display: inline-block
+        margin: 0 auto
+        >*:first-child
+            margin-top: 0
+    >.content-wrapper:not(.transparent)
+        background: $top-nav-color
+        padding: 2em
+
+hr
+    border: 0
+    border-top: 1px solid $line-color
+    margin: 1em 0
+    padding: 0
+
+nav ul
+    list-style-type: none
+    padding: 0
+    margin: 0
+    display: inline-block
+    li
+        display: inline-block
+        padding: 0
+        margin: 0
+        a
+            display: inline-block
+        img
+            margin: 0
+            vertical-align: top; /* fix ghost margin under the image */
+
+nav.plain-nav ul li
+    display: block
+    a
+        display: inline
+
+nav.text-nav
+    margin: 1em 0
+    line-height: 2.3em
+    vertical-align: middle
+    ul
+        li a
+            padding: 0 1.2em
+        li:not(.active) a
+            color: $inactive-tab-text-color
+        li:hover:not(.active) a
+            color: $active-tab-text-color
+        li.active a
+            background: $active-tab-background-color
+            color: $active-tab-text-color
+
+#top-nav
+    background: $top-nav-color
+    margin: 0
+    ul
+        display: block
+        text-align: right
+        li
+            float: left
+    ul li[data-name=account],
+    ul li[data-name=register],
+    ul li[data-name=login],
+    ul li[data-name=logout],
+    ul li[data-name=settings],
+    ul li[data-name=help]
+        float: none
+    .access-key
+        text-decoration: underline
+    .thumbnail
+        vertical-align: middle
+        width: 1.5em
+        height: 1.5em
+        margin: calc((2.3em - 1.5em) / 2)
+        margin-right: 0.6em
+        margin-left: calc(0.6em - 1.2em)
+        float: left
+    span
+        vertical-align: middle
+
+.messages
+    margin: 0 auto
+    width: 30em
+    max-width: 100%
+    .message
+        margin: 0.25em 0
+        display: inline-block
+        text-align: left
+        padding: 0.5em 1em
+    .message.info
+        border: 1px solid $message-info-border-color
+        background: $message-info-background-color
+    .message.error
+        border: 1px solid $message-error-border-color
+        background: $message-error-background-color
+    .message.success
+        border: 1px solid $message-success-border-color
+        background: $message-success-background-color
+
+.thumbnail
+    /*background-image: attr(data-src url);*/ /* not available yet */
+    background-repeat: no-repeat
+    background-size: cover
+    background-position: center
+    display: inline-block
+
+.thumbnail img
+    opacity: 0
+    width: 100%
+    height: 100%
+
+.flexbox-dummy
+    height: 0 !important
+    padding-top: 0 !important
+    padding-bottom: 0 !important
+    margin-top: 0 !important
+    margin-bottom: 0 !important
+
+.pager
+    nav
+        .disabled
+            opacity: .5
+        .prev span,
+        .next span
+            opacity: 0
+            position: absolute
+            display: block
+            width: 0
+            height: 0
diff --git a/client/css/users.css b/client/css/users.css
deleted file mode 100644
index 0a30b42..0000000
--- a/client/css/users.css
+++ /dev/null
@@ -1,109 +0,0 @@
-#user-registration form {
-    float: left;
-}
-#user-registration .info {
-    float: left;
-    margin-left: 3em;
-    border-radius: 0.2em;
-    width: 20em;
-}
-#user-registration .info ul {
-    line-height: 1.8em;
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-}
-#user-registration .info li {
-    margin: 0;
-    padding: 0;
-}
-#user-registration .info i {
-    margin-right: 0.5em;
-}
-#user-registration .info i.fa {
-    color: var(--main-color);
-}
-#user-registration .info p:first-child {
-    margin: 0 0 0.5em 0;
-}
-
-#login .buttons a {
-    margin-left: 1em;
-}
-
-#user {
-    width: 30em;
-}
-#user .text-nav {
-    margin-bottom: 1.5em;
-}
-#user-summary .thumbnail {
-    width: 6em;
-    height: 6em;
-    margin: 0 1.5em 1.5em 0;
-    float: left;
-}
-#user-summary div {
-    clear: both;
-}
-#user-summary .basic-info {
-    list-style-type: none;
-    margin: 0;
-}
-#user-summary nav {
-    float: left;
-    width: 45%;
-    margin-right: 1em;
-}
-#user-edit form {
-    width: 100%;
-    display: flex;
-}
-#user-edit .left {
-    width: 65%;
-}
-#user-edit .right {
-    width: 35%;
-    margin-left: 1em;
-}
-#user-edit .file-dropper-holder {
-    position: relative;
-}
-#user-edit .file-dropper {
-    position: absolute;
-    left: 0;
-    right: 0;
-}
-#user-delete form {
-    width: 100%;
-}
-
-.user-list ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    justify-content: center;
-    align-content: flex-end;
-    flex-wrap: wrap;
-}
-.user-list li {
-    width: 20em;
-    margin: 0.5em;
-    padding: 0.75em;
-    vertical-align: top;
-    background: var(--top-nav-color);
-    text-align: left;
-}
-.user-list .wrapper {
-    display: flex;
-}
-.user-list .details {
-    font-size: 90%;
-    line-height: 130%;
-}
-.user-list .thumbnail {
-    width: 3em;
-    height: 3em;
-    margin: 0 0.6em 0 0;
-}
diff --git a/client/css/users.styl b/client/css/users.styl
new file mode 100644
index 0000000..7470d2a
--- /dev/null
+++ b/client/css/users.styl
@@ -0,0 +1,97 @@
+@import colors
+
+#user-registration
+    form
+        float: left
+    .info
+        float: left
+        margin-left: 3em
+        border-radius: 0.2em
+        width: 20em
+        ul
+            line-height: 1.8em
+            list-style-type: none
+            margin: 0
+            padding: 0
+            li
+                margin: 0
+                padding: 0
+        i
+            margin-right: 0.5em
+        i.fa
+            color: $main-color
+        p:first-child
+            margin: 0 0 0.5em 0
+
+
+#login
+    .buttons a
+        margin-left: 1em
+
+
+#user
+    width: 30em
+    .text-nav
+        margin-bottom: 1.5em
+
+    #user-summary
+        .thumbnail
+            width: 6em
+            height: 6em
+            margin: 0 1.5em 1.5em 0
+            float: left
+        .basic-info
+            list-style-type: none
+            margin: 0
+        div
+            clear: both
+        nav
+            float: left
+            width: 45%
+            margin-right: 1em
+
+    #user-edit
+        form
+            width: 100%
+            display: flex
+        .left
+            width: 65%
+        .right
+            width: 35%
+            margin-left: 1em
+        .file-dropper-holder
+            position: relative
+        .file-dropper
+            position: absolute
+            left: 0
+            right: 0
+
+    #user-delete form
+        width: 100%
+
+
+.user-list
+    ul
+        list-style-type: none
+        margin: 0
+        padding: 0
+        display: flex
+        justify-content: center
+        align-content: flex-end
+        flex-wrap: wrap
+        li
+            width: 20em
+            margin: 0.5em
+            padding: 0.75em
+            vertical-align: top
+            background: $top-nav-color
+            text-align: left
+    .wrapper
+        display: flex
+    .details
+        font-size: 90%
+        line-height: 130%
+    .thumbnail
+        width: 3em
+        height: 3em
+        margin: 0 0.6em 0 0
diff --git a/client/package.json b/client/package.json
index 40a1b23..dc17774 100644
--- a/client/package.json
+++ b/client/package.json
@@ -19,6 +19,7 @@
     "js-yaml": "^3.5.5",
     "merge": "^1.2.0",
     "page": "^1.7.1",
+    "stylus": "^0.54.2",
     "superagent": "^1.8.3",
     "uglify-js": "git://github.com/mishoo/UglifyJS2.git#harmony"
   },