Add SASS variables for colors

50 files changed, 325 insertions, 216 deletions

diff --git a/app/Template/project_list/show.php b/app/Template/project_list/show.php
index 8b9f1396..1fe75592 100644
--- a/app/Template/project_list/show.php
+++ b/app/Template/project_list/show.php
@@ -12,13 +12,13 @@
     <?php if ($paginator->isEmpty()): ?>
         <p class="alert"><?= t('No project') ?></p>
     <?php else: ?>
-        <table class="table-stripped table-small">
+        <table class="table-stripped">
             <tr>
-                <th class="column-3"><?= $paginator->order(t('Id'), 'id') ?></th>
-                <th class="column-5"><?= $paginator->order(t('Status'), 'is_active') ?></th>
+                <th class="column-5"><?= $paginator->order(t('Id'), 'id') ?></th>
+                <th class="column-8"><?= $paginator->order(t('Status'), 'is_active') ?></th>
                 <th class="column-15"><?= $paginator->order(t('Project'), 'name') ?></th>
-                <th class="column-8"><?= $paginator->order(t('Start date'), 'start_date') ?></th>
-                <th class="column-8"><?= $paginator->order(t('End date'), 'end_date') ?></th>
+                <th class="column-10"><?= $paginator->order(t('Start date'), 'start_date') ?></th>
+                <th class="column-10"><?= $paginator->order(t('End date'), 'end_date') ?></th>
                 <th class="column-15"><?= $paginator->order(t('Owner'), 'owner_id') ?></th>
                 <?php if ($this->user->hasAccess('ProjectUserOverviewController', 'managers')): ?>
                     <th class="column-10"><?= t('Users') ?></th>
@@ -73,7 +73,7 @@
                 <td class="dashboard-project-stats">
                     <?php foreach ($project['columns'] as $column): ?>
                         <strong title="<?= t('Task count') ?>"><?= $column['nb_tasks'] ?></strong>
-                        <span><?= $this->text->e($column['title']) ?></span>
+                        <small><?= $this->text->e($column['title']) ?></small>
                     <?php endforeach ?>
                 </td>
             </tr>
diff --git a/app/Template/task/details.php b/app/Template/task/details.php
index 9c534c15..a39c1bab 100644
--- a/app/Template/task/details.php
+++ b/app/Template/task/details.php
@@ -161,7 +161,7 @@
     </div>
 
     <?php if ($editable && empty($task['date_started'])): ?>
-        <div class="task-summary-buttons">
+        <div class="buttons-header">
             <?= $this->url->button('fa-play', t('Set start date'), 'TaskModificationController', 'start', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>
         </div>
     <?php endif ?>
diff --git a/assets/css/app.min.css b/assets/css/app.min.css
index dca80ebd..5f7dd2b2 100644
--- a/assets/css/app.min.css
+++ b/assets/css/app.min.css
@@ -1 +1 @@
-h1,li,ul,ol,table,tr,td,th,p,blockquote,body{margin:0;padding:0;font-size:100%}body{margin-left:10px;margin-right:10px;padding-bottom:10px;color:#333;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;text-rendering:optimizeLegibility}small{font-size:.8em}hr{border:0;height:0;border-top:1px solid rgba(0,0,0,0.1);border-bottom:1px solid rgba(255,255,255,0.3)}.pull-right{text-align:right}ul.no-bullet li{list-style-type:none;margin-left:0}.chosen-select{min-height:27px}#app-loading-icon{position:fixed;right:3px;bottom:3px}.assign-me{vertical-align:bottom}a{color:#36c;border:none}a:focus{outline:0;color:#DF5353;text-decoration:none}a:hover{color:#333;text-decoration:none}h1,h2,h3{font-weight:normal;color:#333}h1{font-size:1.5em}h2{font-size:1.4em;margin-bottom:10px}h3{margin-top:10px;font-size:1.2em}table{width:100%;border-collapse:collapse;border-spacing:0;margin-bottom:20px}th{border:1px solid #eee;padding:0.5em 3px}td{border:1px solid #eee;padding:0.5em 3px;vertical-align:top}th{background:#fbfbfb;text-align:left}td li{margin-left:20px}.table-small{font-size:.8em}th a{text-decoration:none;color:#333}th a:focus,th a:hover{text-decoration:underline}.table-fixed{table-layout:fixed;white-space:nowrap}.table-fixed th{overflow:hidden}.table-fixed td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.table-stripped tr:nth-child(odd){background:#fefefe}.column-3{width:3%}.column-5{width:5%}.column-8{width:7.5%}.column-10{width:10%}.column-12{width:12%}.column-15{width:15%}.column-18{width:18%}.column-20{width:20%}.column-25{width:25%}.column-30{width:30%}.column-35{width:35%}.column-40{width:40%}.column-50{width:50%}.column-60{width:60%}.column-70,.column-80{width:70%}.draggable-row-handle{cursor:move;color:#dedede}.draggable-row-handle:hover{color:#333}tr.draggable-item-selected{background:#fff;border:2px solid #666;box-shadow:4px 2px 10px -4px rgba(0,0,0,0.55)}tr.draggable-item-selected td{border-top:none;border-bottom:none}tr.draggable-item-selected td:first-child{border-left:none}tr.draggable-item-selected td:last-child{border-right:none}.table-stripped tr.draggable-item-hover,tr.draggable-item-hover{background:#FEFFF2}form{margin-bottom:20px}label{cursor:pointer;display:block;margin-top:10px}input[type="number"],input[type="date"],input[type="email"],input[type="password"],input[type="text"]{color:#888;border:1px solid #ccc;width:300px;max-width:95%;font-size:1em;height:25px;padding-bottom:0;font-family:sans-serif;margin-top:10px;-webkit-appearance:none;-moz-appearance:none}input[type="number"]:focus,input[type="date"]:focus,input[type="email"]:focus,input[type="password"]:focus,input[type="text"]:focus{color:#000;border-color:rgba(82,168,236,0.8);outline:0;box-shadow:0 0 8px rgba(82,168,236,0.6)}textarea:focus{color:#000;border-color:rgba(82,168,236,0.8);outline:0;box-shadow:0 0 8px rgba(82,168,236,0.6)}input.form-numeric,input[type="number"]{width:70px}textarea{border:1px solid #ccc;width:400px;max-width:99%;height:200px;font-family:sans-serif}select{max-width:95%}select:focus{outline:0}.tag-autocomplete{width:400px}span.select2-container{margin-top:2px}::-webkit-input-placeholder,::-ms-input-placeholder,::-moz-placeholder{color:#ddd;padding-top:2px}.form-actions{padding-top:20px;clear:both}input.form-error,textarea.form-error{border:2px solid #b94a48}input.form-error:focus,textarea.form-error:focus{box-shadow:none;border:2px solid #b94a48}.form-required{color:red;padding-left:5px;font-weight:bold}.form-errors{color:#b94a48;list-style-type:none}ul.form-errors li{margin-left:0}.form-help{font-size:.8em;color:brown;margin-bottom:15px}.form-inline{padding:0;margin:0;border:none}.form-inline label{display:inline}.form-inline input,.form-inline select{margin:0 15px 0 0}.form-inline .form-required{display:none}.form-inline-group{display:inline}input.form-datetime,input.form-date{width:150px}input.form-input-large{width:400px}input.form-input-small{width:150px}.form-columns{display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row}.form-column{margin-right:25px}.form-login{width:350px;margin:8% auto 0}.form-login li{margin-left:25px;line-height:25px}.form-login h2{margin-bottom:30px;font-weight:bold}.reset-password{margin-top:20px}.reset-password a{color:#999}.alert{padding:8px 35px 8px 14px;margin-top:5px;margin-bottom:5px;color:#c09853;background-color:#fcf8e3;border:1px solid #fbeed5;border-radius:4px}.alert-success{color:#468847;background-color:#dff0d8;border-color:#d6e9c6}.alert-error{color:#b94a48;background-color:#f2dede;border-color:#eed3d7}.alert-info{color:#3a87ad;background-color:#d9edf7;border-color:#bce8f1}.alert-normal{color:#333;background-color:#f0f0f0;border-color:#ddd}.alert ul{margin-top:10px;margin-bottom:10px}.alert li{margin-left:25px}.alert-fade-out{text-align:center;position:fixed;bottom:0;left:20%;width:60%;padding-top:5px;padding-bottom:5px;margin-bottom:0;border-width:1px 0 0;border-radius:4px 4px 0 0;z-index:9999}.btn{-webkit-appearance:none;-moz-appearance:none;font-size:1.2em;font-weight:normal;cursor:pointer;display:inline-block;color:#333;background:#f5f5f5;border:1px solid #ddd;border-radius:2px;padding:3px 10px;margin:0}a.btn{text-decoration:none}.btn:hover{border:1px solid #bbb;color:#000;background:#fafafa}.btn-red{border-color:#b0281a;background:#d14836;color:#fff}.btn-red:hover,.btn-red:focus{color:#fff;background:#c53727}.btn-blue{border-color:#3079ed;background:#4d90fe;color:#fff}.btn-blue:hover,.btn-blue:focus{border-color:#2f5bb7;background:#357ae8;color:#fff}.btn:disabled{color:#ccc;border:1px solid #ccc;background:#f7f7f7}.buttons-header{font-size:0.9em;margin-bottom:15px}.tooltip-arrow:after{background:#fff;border:1px solid #aaaaaa;box-shadow:0 0 5px #aaa}div.ui-tooltip{min-width:200px;max-width:600px}.tooltip-arrow{width:20px;height:10px;overflow:hidden;position:absolute}.tooltip-arrow.top{top:-10px}.tooltip-arrow.bottom{bottom:-10px}.tooltip-arrow.align-left{left:10px}.tooltip-arrow.align-right{right:10px}.tooltip-arrow:after{content:"";position:absolute;width:14px;height:14px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.tooltip-arrow.bottom:after{top:-10px}.tooltip-arrow.top:after{bottom:-10px}.tooltip-arrow.align-left:after{left:0}.tooltip-arrow.align-right:after{right:0}.tooltip-large{width:600px}.ui-tooltip-content .markdown p{margin-bottom:0}.ui-tooltip li{list-style-type:none}.tooltip .fa-info-circle{color:#999}.dropdown{display:inline;position:relative}.dropdown ul{display:none}ul.dropdown-submenu-open{display:block;position:absolute;z-index:1000;min-width:285px;list-style:none;margin:3px 0 0 1px;padding:6px 0;background-color:#fff;border:1px solid #b2b2b2;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,0.15)}.dropdown-submenu-open li{display:block;margin:0;padding:8px 10px;font-size:.9em;border-bottom:1px solid #f8f8f8;cursor:pointer}.dropdown-submenu-open li.no-hover{cursor:default}.dropdown-submenu-open li:last-child{border:none}.dropdown-submenu-open li:not(.no-hover):hover{background:#4078C0;color:#fff}.dropdown-submenu-open li:hover a{color:#fff}.dropdown-submenu-open a{text-decoration:none;color:#333}.dropdown-submenu-open a:focus{text-decoration:underline}.dropdown-menu-link-text,.dropdown-menu-link-icon{color:#333;text-decoration:none}.dropdown-menu-link-text:hover{text-decoration:underline}.accordion-title{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAYAAABS3WWCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NEQ5RDgxQzc2RjQ5MTFFMjhEMUNENzFGRUMwRjhBRTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NEQ5RDgxQzg2RjQ5MTFFMjhEMUNENzFGRUMwRjhBRTciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0RDlEODFDNTZGNDkxMUUyOEQxQ0Q3MUZFQzBGOEFFNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0RDlEODFDNjZGNDkxMUUyOEQxQ0Q3MUZFQzBGOEFFNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvXFWFAAAAAYSURBVHjaYvj//z8D0/Pnz/8zgFgAAQYAS5UJscReGMIAAAAASUVORK5CYII=) repeat-x scroll 0 10px}.accordion-title h3{display:inline;padding-right:5px;background:#fff}.accordion-content{margin-top:15px;margin-bottom:25px}.accordion-toggle{color:#333;text-decoration:none}.accordion-toggle:focus,.accordion-toggle:hover{color:#999}.accordion-toggle:before{content:"\f0d7"}.accordion-collapsed{margin-bottom:25px}.accordion-collapsed .accordion-toggle:before{content:"\f0da"}.accordion-collapsed .accordion-content{display:none}#main .confirm{max-width:700px}#popover-container{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);overflow:auto;z-index:100}#popover-content{position:absolute;width:70%;left:15%;top:1%;padding:15px;background:#fff;overflow:auto;max-height:90%}.popover-form{margin-bottom:0}.pagination{text-align:center}.pagination-next{margin-left:5px}.pagination-previous{margin-right:5px}header{margin-top:5px;margin-bottom:5px;border-bottom:1px solid #dedede}header h1{font-size:1.5em}header h1 .tooltip{opacity:0.3;font-size:.7em}.web-notification-icon{color:#3366CC}.web-notification-icon:focus,.web-notification-icon:hover{color:#000}.logo a{opacity:0.5;color:#d40000;text-decoration:none}.logo span{color:#333}.logo a:hover{opacity:0.8;color:#333}.logo a:focus span,.logo a:hover span{color:#d40000}.page-header{margin-bottom:20px}.page-header .dropdown{padding-right:10px}.page-header h2{margin:0;padding:0;font-weight:bold;border-bottom:1px dotted #ccc}.page-header h2 a{color:#333;text-decoration:none}.page-header h2 a:focus,.page-header h2 a:hover{color:#aaa}.page-header ul{text-align:left;margin-top:5px;display:inline-block}.page-header li{display:inline;padding-right:15px}.page-header li.active a{color:#333;text-decoration:none;font-weight:bold}.page-header li.active a:hover,.page-header li.active a:focus{text-decoration:underline}.menu-inline{margin-bottom:5px}.menu-inline li{display:inline;padding-right:15px}.sidebar-container{margin-top:10px;height:100%;width:100%;display:-ms-flexbox;display:-webkit-box;display:-moz-box;display:-ms-box;display:box;-ms-flex-direction:row;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-ms-box-orient:horizontal;box-orient:horizontal}.sidebar-content{padding-left:10px;-ms-flex:1;-webkit-box-flex:1;-moz-box-flex:1;-ms-box-flex:1;box-flex:1}.sidebar{padding-right:10px;border-right:1px dotted #eee;max-width:240px;min-width:190px;width:18%;-ms-flex:0 100px;-webkit-box-flex:0;-moz-box-flex:0;-ms-box-flex:0;box-flex:0}.sidebar h2{margin-top:0}.sidebar>ul a{text-decoration:none;color:#999;font-weight:300}.sidebar>ul a:hover{color:#333}.sidebar>ul li{list-style-type:none;line-height:35px;border-bottom:1px dotted #efefef;padding-left:13px}.sidebar>ul li:hover{border-left:5px solid #555;padding-left:8px}.sidebar>ul li.active{border-left:5px solid #333;padding-left:8px}.sidebar>ul li.active a{color:#333;font-weight:bold}.sidebar-icons>ul li{padding-left:0}.sidebar-icons>ul li:hover,.sidebar-icons>ul li.active{padding-left:0;border-left:none}.sidebar>ul li.active a:focus,.sidebar>ul li.active a:hover{color:#555}.sidebar>ul li:last-child{margin-bottom:15px}.avatar img{vertical-align:bottom}.avatar-left{float:left;margin-right:10px}.avatar-inline{display:inline-block;margin-right:3px}.avatar-48 img,.avatar-48 div{border-radius:30px}.avatar-48 .avatar-letter{line-height:48px;width:48px;font-size:25px}.avatar-20 img,.avatar-20 div{border-radius:10px}.avatar-20 .avatar-letter{line-height:20px;width:20px;font-size:11px}.avatar-letter{color:#fff;text-align:center}#file-dropzone,#screenshot-zone{position:relative;border:2px dashed #ccc;width:99%;height:250px;overflow:auto}#file-dropzone-inner,#screenshot-inner{position:absolute;left:0;bottom:48%;width:100%;text-align:center;color:#aaa}#screenshot-zone.screenshot-pasted{border:2px solid #333}#file-list{margin:20px}#file-list li{list-style-type:none;padding-top:8px;padding-bottom:8px;border-bottom:1px dotted #ddd;width:95%}#file-list li.file-error{font-weight:bold;color:#b94a48}.color-picker{width:180px}.color-picker-option{height:25px}.color-picker-square{display:inline-block;width:18px;height:18px;margin-right:5px;border:1px solid #000}.color-picker-label{display:inline-block;vertical-align:bottom;padding-bottom:3px}.file-thumbnails{display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:flex-start;justify-content:flex-start}.file-thumbnail{width:250px;border:1px solid #efefef;border-radius:5px;margin-bottom:20px;box-shadow:4px 2px 10px -6px rgba(0,0,0,0.55);margin-right:15px}.file-thumbnail img{border-top-left-radius:5px;border-top-right-radius:5px}.file-thumbnail img:hover{opacity:0.5}.file-thumbnail-content{padding-left:8px;padding-right:8px}.file-thumbnail-title{font-weight:700;font-size:0.9em;color:#555}.file-thumbnail-description{font-size:0.8em;color:#aaa;margin-top:8px;margin-bottom:5px}.file-viewer{position:relative}.file-viewer img{max-width:95%;max-height:85%;margin-top:10px}.filter-box{display:inline-block;position:relative;font-size:0;margin-bottom:20px}.project-header .filter-box{margin:0}.filter-box form{margin:0}.filter-box input[type="text"]{margin:0;font-size:16px;height:28px;border-color:#ddd;border-top-left-radius:5px;border-bottom-left-radius:5px;vertical-align:top}.filter-box input[type="text"]:focus{color:#000;border-color:rgba(82,168,236,0.8);outline:0;box-shadow:0 0 8px rgba(82,168,236,0.6)}.filter-box div.dropdown{background:#fafafa;display:inline-block;font-size:16px;border:1px solid #ddd;border-left:none;margin:0;padding:0;padding-left:5px;padding-right:8px;height:29px}.filter-box div.dropdown:last-child{border-top-right-radius:5px;border-bottom-right-radius:5px}.filter-box div.dropdown a{line-height:27px}.project-header{margin-top:8px;margin-bottom:20px}.action-menu{color:#333;text-decoration:none}.action-menu:hover,.action-menu:focus{text-decoration:underline}.project-creation-options{max-width:500px;border-left:3px dotted #efefef;margin-top:20px;padding-left:15px;padding-bottom:5px;padding-top:5px}.project-overview-columns{display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;margin-bottom:20px;font-size:1.4em}.project-overview-column{text-align:center;margin-right:3%;padding:3px 15px 3px 15px;border:1px dashed #ddd}.project-overview-column strong{color:#444}.project-overview-column small{color:#777}.views{display:inline-block;margin-left:10px;margin-right:10px}.views li{background:#fafafa;border-left:1px solid #ddd;border-top:1px solid #ddd;border-bottom:1px solid #ddd;padding:5px 8px;display:inline}.views a{color:#555;text-decoration:none}.views a:hover{color:#333;text-decoration:underline}.menu-inline li.active a{font-weight:bold;color:#000;text-decoration:none}.views li.active a{font-weight:bold;color:#000;text-decoration:none}.views li:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}.views li:last-child{border-right:1px solid #ddd;border-top-right-radius:5px;border-bottom-right-radius:5px}.dashboard-project-stats small{margin-right:10px;color:#999}.dashboard-table-link{font-weight:bold;color:#444;text-decoration:none}.dashboard-table-link:focus,.dashboard-table-link:hover{color:#999}.public-board{margin-top:5px}.public-task{max-width:800px;margin:5px auto 0}#board-container{overflow-x:auto}#board{table-layout:fixed;margin-bottom:0}#board th.board-column-header{width:240px}#board td{vertical-align:top}.board-container-compact{overflow-x:initial}@media all and (-ms-high-contrast: active), (-ms-high-contrast: none){.board-container-compact #board{table-layout:auto}}#board th.board-column-header.board-column-compact{width:initial}.board-column-collapsed{display:none}td.board-column-task-collapsed{font-weight:bold;background-color:#fbfbfb}#board th.board-column-header-collapsed{width:28px;min-width:28px;text-align:center;overflow:hidden}.board-rotation-wrapper{position:relative;padding:8px 4px;min-height:150px;overflow:hidden}.board-rotation{white-space:nowrap;-webkit-backface-visibility:hidden;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);-webkit-transform-origin:0 100%;-moz-transform-origin:0 100%;-ms-transform-origin:0 100%;transform-origin:0 100%}.board-column-title .dropdown-menu{text-decoration:none}.board-add-icon{float:left;padding:0 5px}.board-add-icon a{text-decoration:none;color:#3366CC;font-size:1.6em;line-height:70%}.board-add-icon a:focus,.board-add-icon a:hover{text-decoration:none;color:red}.board-column-header-task-count{color:#999;font-weight:normal}a.board-swimlane-toggle{text-decoration:none}a.board-swimlane-toggle:hover,a.board-swimlane-toggle:focus{color:#000;text-decoration:none;border:none}.board-task-list{min-height:60px}.board-task-list-limit{background-color:#DF5353}.draggable-item{cursor:pointer;user-select:none;-webkit-user-select:none;-moz-user-select:none}.draggable-placeholder{border:2px dashed #000;background:#fafafa;height:70px;margin-bottom:10px}div.draggable-item-selected{border:1px solid #000}.task-board-sort-handle{float:left;padding-right:5px}.task-board{position:relative;margin-bottom:4px;border:1px solid #000;padding:2px;word-wrap:break-word;font-size:.9em}div.task-board-recent{border-width:2px}div.task-board-status-closed{user-select:none;border:1px dotted #555}.task-board a{color:#000;text-decoration:none}.task-board .dropdown-menu{font-weight:bold}.task-board .task-score{font-weight:bold}.task-board-collapsed{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.task-board-title{margin-top:5px;margin-bottom:8px}.task-board-title a:hover{text-decoration:underline}.task-board-saving-state{opacity:0.3}.task-board-saving-icon{position:absolute;margin:auto;width:100%;text-align:center;color:#000}.task-board-category-container{text-align:right;margin-top:8px;margin-bottom:8px}.task-board-category{font-weight:500;color:#000;border:1px solid #555;padding:1px 2px 1px 2px;border-radius:4px}.task-board-category:hover{opacity:0.6}.task-board-avatars{text-align:right;float:right}.task-board-change-assignee{cursor:pointer}.task-board-change-assignee:hover{opacity:0.6}.task-board-icons{font-size:.8em;text-align:right;margin-top:4px;margin-bottom:2px}.task-board-icons a{opacity:0.5}.task-board-icons span{opacity:0.5;margin-left:2px}.task-board-icons a:hover,.task-board-icons span:hover{opacity:1.0}.flag-milestone{color:green}.task-board-age{display:inline-block}span.task-board-age-total{border:#666 1px solid;padding:1px 3px 1px 3px;border-top-left-radius:3px;border-bottom-left-radius:3px}span.task-board-age-column{border:#666 1px solid;border-left:none;margin-left:-5px;padding:1px 3px 1px 3px;border-top-right-radius:3px;border-bottom-right-radius:3px}.task-board-date{font-weight:bold;color:#000}span.task-board-date-today{color:#0000D9;opacity:1.0}span.task-board-date-overdue{color:#D90000;opacity:1.0}.task-tags li{display:inline;margin:0;margin-right:4px;padding:2px;color:#666;border:1px solid #666;border-radius:2px}.task-summary-container .task-tags{margin-top:10px}#task-summary{margin-bottom:15px}#task-summary h2{color:#666;font-size:1.6em;margin-top:0;padding-top:0}.task-summary-buttons{margin-top:10px}.task-summary-container{border:2px solid #000;border-radius:8px;padding:15px}.task-summary-columns{display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-justify-content:space-between;justify-content:space-between}.task-summary-column{color:#666}.task-summary-column span{color:#555}.task-summary-column li{line-height:23px}.task-show-title{border:2px solid #000;border-radius:8px;margin-bottom:20px}.task-show-title h2{color:#555;margin:0;padding:8px}.task-table .dropdown-menu{color:#000;text-decoration:none;font-weight:bold}.task-table .dropdown-menu:focus,.task-table .dropdown-menu:hover{text-decoration:underline}td.task-table a{color:#000;text-decoration:none}td.task-table a:hover{text-decoration:underline}.comment-sorting{text-align:right}.comment-sorting a{color:#555;font-weight:normal;text-decoration:none}.comment-sorting a:hover{color:#aaa}.comment{padding:5px;margin-bottom:15px}.comment:hover{background:#fafafa}.comment-title{border-bottom:1px dotted #eee;margin-left:55px;margin-bottom:10px}.comment-date{color:#999;font-weight:200}.comment-actions{font-size:.8em;margin-left:55px;margin-top:8px}.comment-actions li{display:inline}.comment-actions a{color:#999;text-decoration:none}.comment-actions a:focus,.comment-actions a:hover{color:#333;text-decoration:underline}.comment-content{margin-left:55px}.subtasks-table td{vertical-align:middle}.task-links-table td{vertical-align:middle}.task-links-task-count{color:#999}.task-link-closed{text-decoration:line-through}.markdown-editor-container{max-width:400px}div.CodeMirror,div.CodeMirror-scroll{max-height:250px;min-height:200px}.markdown-editor-small div.CodeMirror,.markdown-editor-small div.CodeMirror-scroll{min-height:100px;max-height:180px}.form-column div.CodeMirror{margin-bottom:10px}.markdown{line-height:1.4em}.markdown h1{margin-top:5px;margin-bottom:10px;font-weight:bold}.markdown h2{font-weight:bold}.markdown p{margin-bottom:10px}.markdown ol,.markdown ul{margin-left:25px;margin-top:10px;margin-bottom:10px}.markdown pre{background:#fbfbfb;padding:10px;border-radius:5px;border:1px solid #ddd;overflow:auto;color:#444}.markdown blockquote{font-style:italic;border-left:3px solid #ddd;padding-left:10px;margin-bottom:10px;margin-left:20px}.markdown img{display:block;max-width:80%;margin-top:10px}.documentation{margin:0 auto;padding:20px;max-width:850px;background:#fefefe;border:1px solid #ccc;border-radius:5px;color:#555}.documentation img{border:1px solid #333}.documentation h1{text-decoration:none;margin-bottom:30px}.documentation h2{text-decoration:none;border-bottom:1px solid #ccc;margin-bottom:25px}.documentation li{line-height:30px}.listing{border-radius:4px;padding:8px 35px 8px 14px;margin-bottom:20px;border:1px solid #ddd;color:#333;background-color:#fcfcfc;overflow:auto}.listing li{list-style-type:square;margin-left:20px;margin-bottom:3px}.listing ul{margin-top:15px;margin-bottom:15px}.activity-event{margin-bottom:15px;padding:10px}.activity-event:hover{background:#fafafa}.activity-date{margin-left:10px;font-weight:normal;color:#999}.activity-content{margin-left:55px}.activity-title{font-weight:bold;color:#000;border-bottom:1px dotted #efefef}.activity-description{color:#555;margin-top:10px}.activity-description li{list-style-type:circle}.activity-description ul{margin-top:10px;margin-left:20px}div.ganttview-hzheader-month,div.ganttview-hzheader-day,div.ganttview-vtheader,div.ganttview-vtheader-item-name,div.ganttview-vtheader-series,div.ganttview-grid,div.ganttview-grid-row-cell{float:left}div.ganttview-hzheader-month,div.ganttview-hzheader-day{text-align:center}div.ganttview-grid-row-cell.last,div.ganttview-hzheader-day.last,div.ganttview-hzheader-month.last{border-right:none}div.ganttview{border:1px solid #999}div.ganttview-hzheader-month{width:60px;height:20px;border-right:1px solid #d0d0d0;line-height:20px;overflow:hidden}div.ganttview-hzheader-day{width:20px;height:20px;border-right:1px solid #f0f0f0;border-top:1px solid #d0d0d0;line-height:20px;color:#777}div.ganttview-vtheader{margin-top:41px;width:400px;overflow:hidden;background-color:#fff}div.ganttview-vtheader-item{color:#666}div.ganttview-vtheader-series-name{width:400px;height:31px;line-height:31px;padding-left:3px;border-top:1px solid #d0d0d0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}div.ganttview-vtheader-series-name a{color:#666;text-decoration:none}div.ganttview-vtheader-series-name a:hover{color:#333;text-decoration:underline}div.ganttview-vtheader-series-name a i{color:#000}div.ganttview-vtheader-series-name a:hover i{color:#666}div.ganttview-slide-container{overflow:auto;border-left:1px solid #999}div.ganttview-grid-row-cell{width:20px;height:31px;border-right:1px solid #f0f0f0;border-top:1px solid #f0f0f0}div.ganttview-grid-row-cell.ganttview-weekend{background-color:#fafafa}div.ganttview-blocks{margin-top:40px}div.ganttview-block-container{height:28px;padding-top:4px}div.ganttview-block{position:relative;height:25px;background-color:#E5ECF9;border:1px solid #c0c0c0;border-radius:3px}.ganttview-block-movable{cursor:move}div.ganttview-block-not-defined{border-color:#000;background-color:#000}div.ganttview-block-text{position:absolute;height:12px;font-size:.7em;color:#999;padding:2px 3px}div.ganttview-block div.ui-resizable-handle.ui-resizable-s{bottom:-0}.user-mention-link{font-weight:bold;color:#000;text-decoration:none}.user-mention-link:hover{color:#555}
+h1,li,ul,ol,table,tr,td,th,p,blockquote,body{margin:0;padding:0;font-size:100%}body{margin-left:10px;margin-right:10px;padding-bottom:10px;color:#333;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;text-rendering:optimizeLegibility}small{font-size:0.8em}hr{border:0;height:0;border-top:1px solid rgba(0,0,0,0.1);border-bottom:1px solid rgba(255,255,255,0.3)}.pull-right{text-align:right}ul.no-bullet li{list-style-type:none;margin-left:0}.chosen-select{min-height:27px}#app-loading-icon{position:fixed;right:3px;bottom:3px}.assign-me{vertical-align:bottom}a{color:#36c;border:none}a:focus{outline:0;color:#DF5353;text-decoration:none}a:hover{color:#333;text-decoration:none}h1,h2,h3{font-weight:normal;color:#333}h1{font-size:1.5em}h2{font-size:1.4em;margin-bottom:10px}h3{margin-top:10px;font-size:1.2em}table{width:100%;border-collapse:collapse;border-spacing:0;margin-bottom:20px}th{border:1px solid #eee;padding:0.5em 3px}td{border:1px solid #eee;padding:0.5em 3px;vertical-align:top}th{background:#fbfbfb;text-align:left}td li{margin-left:20px}.table-small{font-size:0.8em}th a{text-decoration:none;color:#333}th a:focus,th a:hover{text-decoration:underline}.table-fixed{table-layout:fixed;white-space:nowrap}.table-fixed th{overflow:hidden}.table-fixed td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.table-stripped tr:nth-child(odd){background:#fefefe}.column-3{width:3%}.column-5{width:5%}.column-8{width:7.5%}.column-10{width:10%}.column-12{width:12%}.column-15{width:15%}.column-18{width:18%}.column-20{width:20%}.column-25{width:25%}.column-30{width:30%}.column-35{width:35%}.column-40{width:40%}.column-50{width:50%}.column-60{width:60%}.column-70,.column-80{width:70%}.draggable-row-handle{cursor:move;color:#dedede}.draggable-row-handle:hover{color:#333}tr.draggable-item-selected{background:#fff;border:2px solid #666;box-shadow:4px 2px 10px -4px rgba(0,0,0,0.55)}tr.draggable-item-selected td{border-top:none;border-bottom:none}tr.draggable-item-selected td:first-child{border-left:none}tr.draggable-item-selected td:last-child{border-right:none}.table-stripped tr.draggable-item-hover,tr.draggable-item-hover{background:#FEFFF2}form{margin-bottom:20px}label{cursor:pointer;display:block;margin-top:10px}input[type="number"],input[type="date"],input[type="email"],input[type="password"],input[type="text"]{color:#999;border:1px solid #ccc;width:300px;max-width:95%;font-size:1em;height:25px;padding-bottom:0;font-family:sans-serif;margin-top:10px;-webkit-appearance:none;-moz-appearance:none}input[type="number"]:focus,input[type="date"]:focus,input[type="email"]:focus,input[type="password"]:focus,input[type="text"]:focus{color:#000;border-color:rgba(82,168,236,0.8);outline:0;box-shadow:0 0 8px rgba(82,168,236,0.6)}textarea:focus{color:#000;border-color:rgba(82,168,236,0.8);outline:0;box-shadow:0 0 8px rgba(82,168,236,0.6)}input.form-numeric,input[type="number"]{width:70px}textarea{border:1px solid #ccc;width:400px;max-width:99%;height:200px;font-family:sans-serif}select{max-width:95%}select:focus{outline:0}.tag-autocomplete{width:400px}span.select2-container{margin-top:2px}::-webkit-input-placeholder,::-ms-input-placeholder,::-moz-placeholder{color:#999;opacity:0.2;padding-top:2px}.form-actions{padding-top:20px;clear:both}input.form-error,textarea.form-error{border:2px solid #b94a48}input.form-error:focus,textarea.form-error:focus{box-shadow:none;border:2px solid #b94a48}.form-required{color:red;padding-left:5px;font-weight:bold}.form-errors{color:#b94a48;list-style-type:none}ul.form-errors li{margin-left:0}.form-help{font-size:0.8em;color:brown;margin-bottom:15px}.form-inline{padding:0;margin:0;border:none}.form-inline label{display:inline}.form-inline input,.form-inline select{margin:0 15px 0 0}.form-inline .form-required{display:none}.form-inline-group{display:inline}input.form-datetime,input.form-date{width:150px}input.form-input-large{width:400px}input.form-input-small{width:150px}.form-columns{display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row}.form-column{margin-right:25px}.form-login{width:350px;margin:8% auto 0}.form-login li{margin-left:25px;line-height:25px}.form-login h2{margin-bottom:30px;font-weight:bold}.reset-password{margin-top:20px}.reset-password a{color:#999}.alert{padding:8px 35px 8px 14px;margin-top:5px;margin-bottom:5px;color:#c09853;background-color:#fcf8e3;border:1px solid #fbeed5;border-radius:4px}.alert-success{color:#468847;background-color:#dff0d8;border-color:#d6e9c6}.alert-error{color:#b94a48;background-color:#f2dede;border-color:#eed3d7}.alert-info{color:#3a87ad;background-color:#d9edf7;border-color:#bce8f1}.alert-normal{color:#333;background-color:#f0f0f0;border-color:#ddd}.alert ul{margin-top:10px;margin-bottom:10px}.alert li{margin-left:25px}.alert-fade-out{text-align:center;position:fixed;bottom:0;left:20%;width:60%;padding-top:5px;padding-bottom:5px;margin-bottom:0;border-width:1px 0 0;border-radius:4px 4px 0 0;z-index:9999}a.btn{text-decoration:none}.btn{-webkit-appearance:none;-moz-appearance:none;font-size:1.2em;font-weight:normal;cursor:pointer;display:inline-block;border-radius:2px;padding:3px 10px;margin:0;border:1px solid #ddd;background:#f5f5f5;color:#333}.btn:hover,.btn:focus{border-color:#bbb;background:#fafafa;color:#000}.btn-red{border-color:#b0281a;background:#d14836;color:#fff}.btn-red:hover,.btn-red:focus{border-color:#b0281a;background:#c53727;color:#fff}.btn-blue{border-color:#3079ed;background:#4d90fe;color:#fff}.btn-blue:hover,.btn-blue:focus{border-color:#3079ed;background:#357ae8;color:#fff}.btn:disabled{color:#ccc;border-color:#ccc;background:#f7f7f7}.buttons-header{font-size:0.8em;margin-top:5px;margin-bottom:15px}.tooltip-arrow:after{background:#fff;border:1px solid #aaaaaa;box-shadow:0 0 5px #aaa}div.ui-tooltip{min-width:200px;max-width:600px}.tooltip-arrow{width:20px;height:10px;overflow:hidden;position:absolute}.tooltip-arrow.top{top:-10px}.tooltip-arrow.bottom{bottom:-10px}.tooltip-arrow.align-left{left:10px}.tooltip-arrow.align-right{right:10px}.tooltip-arrow:after{content:"";position:absolute;width:14px;height:14px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.tooltip-arrow.bottom:after{top:-10px}.tooltip-arrow.top:after{bottom:-10px}.tooltip-arrow.align-left:after{left:0}.tooltip-arrow.align-right:after{right:0}.tooltip-large{width:600px}.ui-tooltip-content .markdown p{margin-bottom:0}.ui-tooltip li{list-style-type:none}.tooltip .fa-info-circle{color:#999}.dropdown{display:inline;position:relative}.dropdown ul{display:none}ul.dropdown-submenu-open{display:block;position:absolute;z-index:1000;min-width:285px;list-style:none;margin:3px 0 0 1px;padding:6px 0;background-color:#fff;border:1px solid #b2b2b2;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,0.15)}.dropdown-submenu-open li{display:block;margin:0;padding:8px 10px;font-size:.9em;border-bottom:1px solid #f8f8f8;cursor:pointer}.dropdown-submenu-open li.no-hover{cursor:default}.dropdown-submenu-open li:last-child{border:none}.dropdown-submenu-open li:not(.no-hover):hover{background:#4078C0;color:#fff}.dropdown-submenu-open li:hover a{color:#fff}.dropdown-submenu-open a{text-decoration:none;color:#333}.dropdown-submenu-open a:focus{text-decoration:underline}.dropdown-menu-link-text,.dropdown-menu-link-icon{color:#333;text-decoration:none}.dropdown-menu-link-text:hover{text-decoration:underline}.accordion-title{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAYAAABS3WWCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NEQ5RDgxQzc2RjQ5MTFFMjhEMUNENzFGRUMwRjhBRTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NEQ5RDgxQzg2RjQ5MTFFMjhEMUNENzFGRUMwRjhBRTciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0RDlEODFDNTZGNDkxMUUyOEQxQ0Q3MUZFQzBGOEFFNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0RDlEODFDNjZGNDkxMUUyOEQxQ0Q3MUZFQzBGOEFFNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvXFWFAAAAAYSURBVHjaYvj//z8D0/Pnz/8zgFgAAQYAS5UJscReGMIAAAAASUVORK5CYII=) repeat-x scroll 0 10px}.accordion-title h3{display:inline;padding-right:5px;background:#fff}.accordion-content{margin-top:15px;margin-bottom:25px}.accordion-toggle{color:#333;text-decoration:none}.accordion-toggle:focus{color:#333}.accordion-toggle:hover{color:#999}.accordion-toggle:before{content:"\f0d7"}.accordion-collapsed{margin-bottom:25px}.accordion-collapsed .accordion-toggle:before{content:"\f0da"}.accordion-collapsed .accordion-content{display:none}#main .confirm{max-width:700px}#popover-container{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);overflow:auto;z-index:100}#popover-content{position:absolute;width:70%;left:15%;top:1%;padding:15px;background:#fff;overflow:auto;max-height:90%}.popover-form{margin-bottom:0}.pagination{text-align:center}.pagination-next{margin-left:5px}.pagination-previous{margin-right:5px}header{margin-top:5px;margin-bottom:5px;border-bottom:1px solid #dedede}header h1{font-size:1.5em}header h1 .tooltip{opacity:0.3;font-size:0.7em}.web-notification-icon{color:#36c}.web-notification-icon:focus,.web-notification-icon:hover{color:#000}.logo a{opacity:0.5;color:#d40000;text-decoration:none}.logo span{color:#333}.logo a:hover{opacity:0.8;color:#333}.logo a:focus span,.logo a:hover span{color:#d40000}.page-header{margin-bottom:20px}.page-header .dropdown{padding-right:10px}.page-header h2{margin:0;padding:0;font-weight:bold;border-bottom:1px dotted #ccc}.page-header h2 a{color:#333;text-decoration:none}.page-header h2 a:focus,.page-header h2 a:hover{color:#999}.page-header ul{text-align:left;margin-top:5px;display:inline-block}.page-header li{display:inline;padding-right:15px}.page-header li.active a{color:#333;text-decoration:none;font-weight:bold}.page-header li.active a:hover,.page-header li.active a:focus{text-decoration:underline}.menu-inline{margin-bottom:5px}.menu-inline li{display:inline;padding-right:15px}.sidebar-container{margin-top:10px;height:100%;width:100%;display:-ms-flexbox;display:-webkit-box;display:-moz-box;display:-ms-box;display:box;-ms-flex-direction:row;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-ms-box-orient:horizontal;box-orient:horizontal}.sidebar-content{padding-left:10px;-ms-flex:1;-webkit-box-flex:1;-moz-box-flex:1;-ms-box-flex:1;box-flex:1}.sidebar{padding-right:10px;border-right:1px dotted #eee;max-width:240px;min-width:190px;width:18%;-ms-flex:0 100px;-webkit-box-flex:0;-moz-box-flex:0;-ms-box-flex:0;box-flex:0}.sidebar h2{margin-top:0}.sidebar>ul a{text-decoration:none;color:#999;font-weight:300}.sidebar>ul a:hover{color:#333}.sidebar>ul li{list-style-type:none;line-height:35px;border-bottom:1px dotted #efefef;padding-left:13px}.sidebar>ul li:hover{border-left:5px solid #555;padding-left:8px}.sidebar>ul li.active{border-left:5px solid #333;padding-left:8px}.sidebar>ul li.active a{color:#333;font-weight:bold}.sidebar-icons>ul li{padding-left:0}.sidebar-icons>ul li:hover,.sidebar-icons>ul li.active{padding-left:0;border-left:none}.sidebar>ul li.active a:focus,.sidebar>ul li.active a:hover{color:#555}.sidebar>ul li:last-child{margin-bottom:15px}.avatar img{vertical-align:bottom}.avatar-left{float:left;margin-right:10px}.avatar-inline{display:inline-block;margin-right:3px}.avatar-48 img,.avatar-48 div{border-radius:30px}.avatar-48 .avatar-letter{line-height:48px;width:48px;font-size:25px}.avatar-20 img,.avatar-20 div{border-radius:10px}.avatar-20 .avatar-letter{line-height:20px;width:20px;font-size:11px}.avatar-letter{color:#fff;text-align:center}#file-dropzone,#screenshot-zone{position:relative;border:2px dashed #ccc;width:99%;height:250px;overflow:auto}#file-dropzone-inner,#screenshot-inner{position:absolute;left:0;bottom:48%;width:100%;text-align:center;color:#aaa}#screenshot-zone.screenshot-pasted{border:2px solid #333}#file-list{margin:20px}#file-list li{list-style-type:none;padding-top:8px;padding-bottom:8px;border-bottom:1px dotted #ddd;width:95%}#file-list li.file-error{font-weight:bold;color:#b94a48}.color-picker{width:180px}.color-picker-option{height:25px}.color-picker-square{display:inline-block;width:18px;height:18px;margin-right:5px;border:1px solid #000}.color-picker-label{display:inline-block;vertical-align:bottom;padding-bottom:3px}.file-thumbnails{display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:flex-start;justify-content:flex-start}.file-thumbnail{width:250px;border:1px solid #efefef;border-radius:5px;margin-bottom:20px;box-shadow:4px 2px 10px -6px rgba(0,0,0,0.55);margin-right:15px}.file-thumbnail img{border-top-left-radius:5px;border-top-right-radius:5px}.file-thumbnail img:hover{opacity:0.5}.file-thumbnail-content{padding-left:8px;padding-right:8px}.file-thumbnail-title{font-weight:700;font-size:0.9em;color:#555}.file-thumbnail-description{font-size:0.8em;color:#999;margin-top:8px;margin-bottom:5px}.file-viewer{position:relative}.file-viewer img{max-width:95%;max-height:85%;margin-top:10px}.filter-box{display:inline-block;position:relative;font-size:0;margin-bottom:20px}.project-header .filter-box{margin:0}.filter-box form{margin:0}.filter-box input[type="text"]{margin:0;font-size:16px;height:28px;border-color:#ddd;border-top-left-radius:5px;border-bottom-left-radius:5px;vertical-align:top}.filter-box input[type="text"]:focus{color:#000;border-color:rgba(82,168,236,0.8);outline:0;box-shadow:0 0 8px rgba(82,168,236,0.6)}.filter-box div.dropdown{background:#fafafa;display:inline-block;font-size:16px;border:1px solid #ddd;border-left:none;margin:0;padding:0;padding-left:5px;padding-right:8px;height:29px}.filter-box div.dropdown:last-child{border-top-right-radius:5px;border-bottom-right-radius:5px}.filter-box div.dropdown a{line-height:27px}.project-header{margin-top:8px;margin-bottom:20px}.action-menu{color:#333;text-decoration:none}.action-menu:hover,.action-menu:focus{text-decoration:underline}.project-creation-options{max-width:500px;border-left:3px dotted #efefef;margin-top:20px;padding-left:15px;padding-bottom:5px;padding-top:5px}.project-overview-columns{display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;margin-bottom:20px;font-size:1.4em}.project-overview-column{text-align:center;margin-right:3%;padding:3px 15px 3px 15px;border:1px dashed #ddd}.project-overview-column small{color:#999}.project-overview-column strong{color:#555}.views{display:inline-block;margin-left:10px;margin-right:10px}.views li{background:#fafafa;border-left:1px solid #ddd;border-top:1px solid #ddd;border-bottom:1px solid #ddd;padding:5px 8px;display:inline}.views a{color:#555;text-decoration:none}.views a:hover{color:#333;text-decoration:underline}.menu-inline li.active a{font-weight:bold;color:#000;text-decoration:none}.views li.active a{font-weight:bold;color:#000;text-decoration:none}.views li:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}.views li:last-child{border-right:1px solid #ddd;border-top-right-radius:5px;border-bottom-right-radius:5px}.dashboard-project-stats small{margin-right:10px;color:#999}.dashboard-table-link{font-weight:bold;color:#000;text-decoration:none}.dashboard-table-link:focus,.dashboard-table-link:hover{color:#999}.public-board{margin-top:5px}.public-task{max-width:800px;margin:5px auto 0}#board-container{overflow-x:auto}#board{table-layout:fixed;margin-bottom:0}#board th.board-column-header{width:240px}#board td{vertical-align:top}.board-container-compact{overflow-x:initial}@media all and (-ms-high-contrast: active), (-ms-high-contrast: none){.board-container-compact #board{table-layout:auto}}#board th.board-column-header.board-column-compact{width:initial}.board-column-collapsed{display:none}td.board-column-task-collapsed{font-weight:bold;background-color:#fbfbfb}#board th.board-column-header-collapsed{width:28px;min-width:28px;text-align:center;overflow:hidden}.board-rotation-wrapper{position:relative;padding:8px 4px;min-height:150px;overflow:hidden}.board-rotation{white-space:nowrap;-webkit-backface-visibility:hidden;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);-webkit-transform-origin:0 100%;-moz-transform-origin:0 100%;-ms-transform-origin:0 100%;transform-origin:0 100%}.board-column-title .dropdown-menu{text-decoration:none}.board-add-icon{float:left;padding:0 5px}.board-add-icon a{text-decoration:none;color:#36c;font-size:1.6em;line-height:70%}.board-add-icon a:focus,.board-add-icon a:hover{text-decoration:none;color:red}.board-column-header-task-count{color:#999;font-weight:normal}a.board-swimlane-toggle{text-decoration:none}a.board-swimlane-toggle:hover,a.board-swimlane-toggle:focus{color:#000;text-decoration:none;border:none}.board-task-list{min-height:60px}.board-task-list-limit{background-color:#DF5353}.draggable-item{cursor:pointer;user-select:none;-webkit-user-select:none;-moz-user-select:none}.draggable-placeholder{border:2px dashed #000;background:#fafafa;height:70px;margin-bottom:10px}div.draggable-item-selected{border:1px solid #000}.task-board-sort-handle{float:left;padding-right:5px}.task-board{position:relative;margin-bottom:4px;border:1px solid #000;padding:2px;word-wrap:break-word;font-size:.9em}div.task-board-recent{border-width:2px}div.task-board-status-closed{user-select:none;border:1px dotted #555}.task-board a{color:#000;text-decoration:none}.task-board .dropdown-menu{font-weight:bold}.task-board .task-score{font-weight:bold}.task-board-collapsed{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.task-board-title{margin-top:5px;margin-bottom:8px}.task-board-title a:hover{text-decoration:underline}.task-board-saving-state{opacity:0.3}.task-board-saving-icon{position:absolute;margin:auto;width:100%;text-align:center;color:#000}.task-board-category-container{text-align:right;margin-top:8px;margin-bottom:8px}.task-board-category{font-weight:500;color:#000;border:1px solid #555;padding:1px 2px 1px 2px;border-radius:4px}.task-board-category:hover{opacity:0.6}.task-board-avatars{text-align:right;float:right}.task-board-change-assignee{cursor:pointer}.task-board-change-assignee:hover{opacity:0.6}.task-board-icons{font-size:0.8em;text-align:right;margin-top:4px;margin-bottom:2px}.task-board-icons a{opacity:0.5}.task-board-icons span{opacity:0.5;margin-left:2px}.task-board-icons a:hover,.task-board-icons span:hover{opacity:1.0}.flag-milestone{color:green}.task-board-age{display:inline-block}span.task-board-age-total{border:#666 1px solid;padding:1px 3px 1px 3px;border-top-left-radius:3px;border-bottom-left-radius:3px}span.task-board-age-column{border:#666 1px solid;border-left:none;margin-left:-5px;padding:1px 3px 1px 3px;border-top-right-radius:3px;border-bottom-right-radius:3px}.task-board-date{font-weight:bold;color:#000}span.task-board-date-today{opacity:1.0}span.task-board-date-overdue{opacity:1.0}.task-tags li{display:inline;margin:0;margin-right:4px;padding:2px;color:#555;border:1px solid #666;border-radius:2px}.task-summary-container .task-tags{margin-top:10px}#task-summary{margin-bottom:15px}#task-summary h2{color:#555;font-size:1.6em;margin-top:0;padding-top:0}.task-summary-container{border:2px solid #000;border-radius:8px;padding:15px}.task-summary-columns{display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-justify-content:space-between;justify-content:space-between}.task-summary-column{color:#333}.task-summary-column span{color:#555}.task-summary-column li{line-height:23px}.task-show-title{border:2px solid #000;border-radius:8px;margin-bottom:20px}.task-show-title h2{color:#555;margin:0;padding:8px}.task-table .dropdown-menu{color:#000;text-decoration:none;font-weight:bold}.task-table .dropdown-menu:focus,.task-table .dropdown-menu:hover{text-decoration:underline}td.task-table a{color:#000;text-decoration:none}td.task-table a:hover{text-decoration:underline}.comment-sorting{text-align:right}.comment-sorting a{color:#555;font-weight:normal;text-decoration:none}.comment-sorting a:hover{color:#999}.comment{padding:5px;margin-bottom:15px}.comment:hover{background:#fafafa}.comment-title{border-bottom:1px dotted #eee;margin-left:55px;margin-bottom:10px}.comment-date{color:#999;font-weight:200}.comment-actions{font-size:0.8em;margin-left:55px;margin-top:8px}.comment-actions li{display:inline}.comment-actions a{color:#999;text-decoration:none}.comment-actions a:focus,.comment-actions a:hover{color:#333;text-decoration:underline}.comment-content{margin-left:55px}.subtasks-table td{vertical-align:middle}.task-links-table td{vertical-align:middle}.task-links-task-count{color:#999}.task-link-closed{text-decoration:line-through}.markdown-editor-container{max-width:400px}div.CodeMirror,div.CodeMirror-scroll{max-height:250px;min-height:200px}.markdown-editor-small div.CodeMirror,.markdown-editor-small div.CodeMirror-scroll{min-height:100px;max-height:180px}.form-column div.CodeMirror{margin-bottom:10px}.markdown{line-height:1.4em}.markdown h1{margin-top:5px;margin-bottom:10px;font-weight:bold}.markdown h2{font-weight:bold}.markdown p{margin-bottom:10px}.markdown ol,.markdown ul{margin-left:25px;margin-top:10px;margin-bottom:10px}.markdown pre{background:#fbfbfb;padding:10px;border-radius:5px;border:1px solid #ddd;overflow:auto;color:#555}.markdown blockquote{font-style:italic;border-left:3px solid #ddd;padding-left:10px;margin-bottom:10px;margin-left:20px}.markdown img{display:block;max-width:80%;margin-top:10px}.documentation{margin:0 auto;padding:20px;max-width:850px;background:#fefefe;border:1px solid #ccc;border-radius:5px;color:#555}.documentation img{border:1px solid #333}.documentation h1{text-decoration:none;margin-bottom:30px}.documentation h2{text-decoration:none;border-bottom:1px solid #ccc;margin-bottom:25px}.documentation li{line-height:30px}.listing{border-radius:4px;padding:8px 35px 8px 14px;margin-bottom:20px;border:1px solid #ddd;color:#333;background-color:#fcfcfc;overflow:auto}.listing li{list-style-type:square;margin-left:20px;margin-bottom:3px}.listing ul{margin-top:15px;margin-bottom:15px}.activity-event{margin-bottom:15px;padding:10px}.activity-event:hover{background:#fafafa}.activity-date{margin-left:10px;font-weight:normal;color:#999}.activity-content{margin-left:55px}.activity-title{font-weight:bold;color:#000;border-bottom:1px dotted #efefef}.activity-description{color:#555;margin-top:10px}.activity-description li{list-style-type:circle}.activity-description ul{margin-top:10px;margin-left:20px}div.ganttview-hzheader-month,div.ganttview-hzheader-day,div.ganttview-vtheader,div.ganttview-vtheader-item-name,div.ganttview-vtheader-series,div.ganttview-grid,div.ganttview-grid-row-cell{float:left}div.ganttview-hzheader-month,div.ganttview-hzheader-day{text-align:center}div.ganttview-grid-row-cell.last,div.ganttview-hzheader-day.last,div.ganttview-hzheader-month.last{border-right:none}div.ganttview{border:1px solid #999}div.ganttview-hzheader-month{width:60px;height:20px;border-right:1px solid #d0d0d0;line-height:20px;overflow:hidden}div.ganttview-hzheader-day{width:20px;height:20px;border-right:1px solid #f0f0f0;border-top:1px solid #d0d0d0;line-height:20px;color:#555}div.ganttview-vtheader{margin-top:41px;width:400px;overflow:hidden;background-color:#fff}div.ganttview-vtheader-item{color:#555}div.ganttview-vtheader-series-name{width:400px;height:31px;line-height:31px;padding-left:3px;border-top:1px solid #d0d0d0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}div.ganttview-vtheader-series-name a{color:#555;text-decoration:none}div.ganttview-vtheader-series-name a:hover{color:#333;text-decoration:underline}div.ganttview-vtheader-series-name a i{color:#000}div.ganttview-vtheader-series-name a:hover i{color:#555}div.ganttview-slide-container{overflow:auto;border-left:1px solid #999}div.ganttview-grid-row-cell{width:20px;height:31px;border-right:1px solid #f0f0f0;border-top:1px solid #f0f0f0}div.ganttview-grid-row-cell.ganttview-weekend{background-color:#fafafa}div.ganttview-blocks{margin-top:40px}div.ganttview-block-container{height:28px;padding-top:4px}div.ganttview-block{position:relative;height:25px;background-color:#E5ECF9;border:1px solid #c0c0c0;border-radius:3px}.ganttview-block-movable{cursor:move}div.ganttview-block-not-defined{border-color:#000;background-color:#000}div.ganttview-block-text{position:absolute;height:12px;font-size:0.7em;color:#999;padding:2px 3px}div.ganttview-block div.ui-resizable-handle.ui-resizable-s{bottom:-0}.user-mention-link{font-weight:bold;color:#000;text-decoration:none}.user-mention-link:hover{color:#555}
diff --git a/assets/sass/_accordion.sass b/assets/sass/_accordion.sass
index aff7f295..25be776f 100644
--- a/assets/sass/_accordion.sass
+++ b/assets/sass/_accordion.sass
@@ -1,3 +1,5 @@
+@import variables
+
 .accordion-title
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAYAAABS3WWCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NEQ5RDgxQzc2RjQ5MTFFMjhEMUNENzFGRUMwRjhBRTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NEQ5RDgxQzg2RjQ5MTFFMjhEMUNENzFGRUMwRjhBRTciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0RDlEODFDNTZGNDkxMUUyOEQxQ0Q3MUZFQzBGOEFFNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0RDlEODFDNjZGNDkxMUUyOEQxQ0Q3MUZFQzBGOEFFNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvXFWFAAAAAYSURBVHjaYvj//z8D0/Pnz/8zgFgAAQYAS5UJscReGMIAAAAASUVORK5CYII=) repeat-x scroll 0 10px
   h3
@@ -10,10 +12,12 @@
   margin-bottom: 25px
 
 .accordion-toggle
-  color: #333
+  color: color('primary')
   text-decoration: none
-  &:focus, &:hover
-    color: #999
+  &:focus
+    color: color('primary')
+  &:hover
+    color: color('light')
   &:before
     content: "\f0d7"
 
diff --git a/assets/sass/_activity_stream.sass b/assets/sass/_activity_stream.sass
index daef94cf..b9ffcdda 100644
--- a/assets/sass/_activity_stream.sass
+++ b/assets/sass/_activity_stream.sass
@@ -1,3 +1,5 @@
+@import variables
+
 .activity-event
   margin-bottom: 15px
   padding: 10px
@@ -7,18 +9,18 @@
 .activity-date
   margin-left: 10px
   font-weight: normal
-  color: #999
+  color: color('light')
 
 .activity-content
   margin-left: 55px
 
 .activity-title
   font-weight: bold
-  color: #000
+  color: color('dark')
   border-bottom: 1px dotted #efefef
 
 .activity-description
-  color: #555
+  color: color('medium')
   margin-top: 10px
   li
     list-style-type: circle
diff --git a/assets/sass/_alert.sass b/assets/sass/_alert.sass
index b8598c35..5a90c825 100644
--- a/assets/sass/_alert.sass
+++ b/assets/sass/_alert.sass
@@ -1,31 +1,33 @@
+@import variables
+
 .alert
   padding: 8px 35px 8px 14px
   margin-top: 5px
   margin-bottom: 5px
-  color: $alert-default-text-color
-  background-color: $alert-default-background-color
-  border: 1px solid $alert-default-border-color
+  color: alert-color('default')
+  background-color: alert-bg-color('default')
+  border: 1px solid alert-border-color('default')
   border-radius: 4px
 
 .alert-success
-  color: $alert-success-text-color
-  background-color: $alert-success-background-color
-  border-color: $alert-success-border-color
+  color: alert-color('success')
+  background-color: alert-bg-color('success')
+  border-color: alert-border-color('success')
 
 .alert-error
-  color: $alert-error-text-color
-  background-color: $alert-error-background-color
-  border-color: $alert-error-border-color
+  color: alert-color('error')
+  background-color: alert-bg-color('error')
+  border-color: alert-border-color('error')
 
 .alert-info
-  color: $alert-info-text-color
-  background-color: $alert-info-background-color
-  border-color: $alert-info-border-color
+  color: alert-color('info')
+  background-color: alert-bg-color('info')
+  border-color: alert-border-color('info')
 
 .alert-normal
-  color: $alert-normal-text-color
-  background-color: $alert-normal-background-color
-  border-color: $alert-normal-border-color
+  color: alert-color('normal')
+  background-color: alert-bg-color('normal')
+  border-color: alert-border-color('normal')
 
 .alert
   ul
diff --git a/assets/sass/_avatar.sass b/assets/sass/_avatar.sass
index f18e5926..2041c326 100644
--- a/assets/sass/_avatar.sass
+++ b/assets/sass/_avatar.sass
@@ -1,3 +1,5 @@
+@import variables
+
 .avatar img
   vertical-align: bottom
 
diff --git a/assets/sass/_board.sass b/assets/sass/_board.sass
index 597ccb18..c94879bc 100644
--- a/assets/sass/_board.sass
+++ b/assets/sass/_board.sass
@@ -1,3 +1,5 @@
+@import variables
+
 .public-board
   margin-top: 5px
 
@@ -31,7 +33,7 @@
 
 td.board-column-task-collapsed
   font-weight: bold
-  background-color: #fbfbfb
+  background-color: bg-color('primary')
 
 #board th.board-column-header-collapsed
   width: 28px
@@ -65,21 +67,21 @@ td.board-column-task-collapsed
   padding: 0 5px
   a
     text-decoration: none
-    color: #3366CC
-    font-size: $text-xlarge
+    color: link-color('primary')
+    font-size: size('xlarge')
     line-height: 70%
     &:focus, &:hover
       text-decoration: none
       color: red
 
 .board-column-header-task-count
-  color: #999
+  color: color('light')
   font-weight: normal
 
 a.board-swimlane-toggle
   text-decoration: none
   &:hover, &:focus
-    color: #000
+    color: color('dark')
     text-decoration: none
     border: none
 
@@ -87,7 +89,7 @@ a.board-swimlane-toggle
   min-height: 60px
 
 .board-task-list-limit
-  background-color: #DF5353
+  background-color: $board-task-limit-color
 
 .draggable-item
   cursor: pointer
diff --git a/assets/sass/_button.sass b/assets/sass/_button.sass
index e618b1f5..95237085 100644
--- a/assets/sass/_button.sass
+++ b/assets/sass/_button.sass
@@ -1,46 +1,49 @@
+@import variables
+
+a.btn
+  text-decoration: none
+
 .btn
   +appearance
-  font-size: $text-medium
+  font-size: size('medium')
   font-weight: normal
   cursor: pointer
   display: inline-block
-  color: #333
-  background: #f5f5f5
-  border: 1px solid #ddd
   border-radius: 2px
   padding: 3px 10px
   margin: 0
-
-a.btn
-  text-decoration: none
-
-.btn:hover
-  border: 1px solid #bbb
-  color: #000
-  background: #fafafa
+  border: 1px solid button-border-color('default')
+  background: button-bg-color('default')
+  color: button-color('default')
+  &:hover, &:focus
+    border-color: button-hover-border-color('default')
+    background: button-hover-bg-color('default')
+    color: button-hover-color('default')
 
 .btn-red
-  border-color: #b0281a
-  background: #d14836
-  color: #fff
+  border-color: button-border-color('red')
+  background: button-bg-color('red')
+  color: button-color('red')
   &:hover, &:focus
-    color: #fff
-    background: #c53727
+    border-color: button-hover-border-color('red')
+    background: button-hover-bg-color('red')
+    color: button-hover-color('red')
 
 .btn-blue
-  border-color: #3079ed
-  background: #4d90fe
-  color: #fff
+  border-color: button-border-color('blue')
+  background: button-bg-color('blue')
+  color: button-color('blue')
   &:hover, &:focus
-    border-color: #2f5bb7
-    background: #357ae8
-    color: #fff
+    border-color: button-hover-border-color('blue')
+    background: button-hover-bg-color('blue')
+    color: button-hover-color('blue')
 
 .btn:disabled
-  color: #ccc
-  border: 1px solid #ccc
-  background: #f7f7f7
+  color: button-color('disabled')
+  border-color: button-border-color('disabled')
+  background: button-bg-color('disabled')
 
 .buttons-header
-  font-size: 0.9em
+  font-size: size('small')
+  margin-top: 5px
   margin-bottom: 15px
diff --git a/assets/sass/_comment.sass b/assets/sass/_comment.sass
index e61ef462..fdc38eaf 100644
--- a/assets/sass/_comment.sass
+++ b/assets/sass/_comment.sass
@@ -1,11 +1,13 @@
+@import variables
+
 .comment-sorting
   text-align: right
   a
-    color: #555
+    color: color('medium')
     font-weight: normal
     text-decoration: none
     &:hover
-      color: #aaa
+      color: color('light')
 
 .comment
   padding: 5px
@@ -19,20 +21,20 @@
   margin-bottom: 10px
 
 .comment-date
-  color: #999
+  color: color('light')
   font-weight: 200
 
 .comment-actions
-  font-size: $text-small
+  font-size: size('small')
   margin-left: 55px
   margin-top: 8px
   li
     display: inline
   a
-    color: #999
+    color: color('light')
     text-decoration: none
     &:focus, &:hover
-      color: #333
+      color: color('primary')
       text-decoration: underline
 
 .comment-content
diff --git a/assets/sass/_dashboard.sass b/assets/sass/_dashboard.sass
index 5abb32fb..4c19d084 100644
--- a/assets/sass/_dashboard.sass
+++ b/assets/sass/_dashboard.sass
@@ -1,11 +1,13 @@
+@import variables
+
 .dashboard-project-stats
   small
     margin-right: 10px
-    color: #999
+    color: color('light')
 
 .dashboard-table-link
   font-weight: bold
-  color: #444
+  color: color('dark')
   text-decoration: none
   &:focus, &:hover
-    color: #999
+    color: color('light')
diff --git a/assets/sass/_dialog_box.sass b/assets/sass/_dialog_box.sass
index 4e1168c9..38364230 100644
--- a/assets/sass/_dialog_box.sass
+++ b/assets/sass/_dialog_box.sass
@@ -1,2 +1,4 @@
+@import variables
+
 #main .confirm
   max-width: 700px
diff --git a/assets/sass/_documentation.sass b/assets/sass/_documentation.sass
index dbede75e..72cc2abc 100644
--- a/assets/sass/_documentation.sass
+++ b/assets/sass/_documentation.sass
@@ -1,3 +1,5 @@
+@import variables
+
 .documentation
   margin: 0 auto
   padding: 20px
@@ -5,7 +7,7 @@
   background: #fefefe
   border: 1px solid #ccc
   border-radius: 5px
-  color: #555
+  color: color('medium')
   img
     border: 1px solid #333
   h1
diff --git a/assets/sass/_dropdown.sass b/assets/sass/_dropdown.sass
index 50b29abb..dd0aecc3 100644
--- a/assets/sass/_dropdown.sass
+++ b/assets/sass/_dropdown.sass
@@ -1,3 +1,5 @@
+@import variables
+
 .dropdown
   display: inline
   position: relative
@@ -39,12 +41,12 @@ ul.dropdown-submenu-open
 
 .dropdown-submenu-open a
   text-decoration: none
-  color: #333
+  color: color('primary')
   &:focus
     text-decoration: underline
 
 .dropdown-menu-link-text, .dropdown-menu-link-icon
-  color: #333
+  color: color('primary')
   text-decoration: none
 
 .dropdown-menu-link-text:hover
diff --git a/assets/sass/_file_upload.sass b/assets/sass/_file_upload.sass
index 3c251a18..b258620e 100644
--- a/assets/sass/_file_upload.sass
+++ b/assets/sass/_file_upload.sass
@@ -1,3 +1,5 @@
+@import variables
+
 #file-dropzone, #screenshot-zone
   position: relative
   border: 2px dashed #ccc
@@ -26,4 +28,4 @@
     width: 95%
     &.file-error
       font-weight: bold
-      color: #b94a48
+      color: color('error')
diff --git a/assets/sass/_files.sass b/assets/sass/_files.sass
index d3d3c006..914dc1f5 100644
--- a/assets/sass/_files.sass
+++ b/assets/sass/_files.sass
@@ -1,3 +1,5 @@
+@import variables
+
 .file-thumbnails
   display: -webkit-flex
   display: flex
@@ -28,11 +30,11 @@
 .file-thumbnail-title
   font-weight: 700
   font-size: 0.9em
-  color: #555
+  color: color('medium')
 
 .file-thumbnail-description
   font-size: 0.8em
-  color: #aaa
+  color: color('light')
   margin-top: 8px
   margin-bottom: 5px
 
diff --git a/assets/sass/_filter_box.sass b/assets/sass/_filter_box.sass
index f053615e..f8c541ab 100644
--- a/assets/sass/_filter_box.sass
+++ b/assets/sass/_filter_box.sass
@@ -1,3 +1,5 @@
+@import variables
+
 .filter-box
   display: inline-block
   position: relative
@@ -19,7 +21,7 @@
     border-bottom-left-radius: 5px
     vertical-align: top
     &:focus
-      color: #000
+      color: color('dark')
       border-color: rgba(82, 168, 236, 0.8)
       outline: 0
       box-shadow: 0 0 8px rgba(82, 168, 236, 0.6)
diff --git a/assets/sass/_form.sass b/assets/sass/_form.sass
index f2be47cf..83c65c50 100644
--- a/assets/sass/_form.sass
+++ b/assets/sass/_form.sass
@@ -1,3 +1,5 @@
+@import variables
+
 form
   margin-bottom: 20px
 
@@ -8,24 +10,24 @@ label
 
 input
   &[type="number"], &[type="date"], &[type="email"], &[type="password"], &[type="text"]
-    color: #888
+    color: color('light')
     border: 1px solid #ccc
     width: 300px
     max-width: 95%
-    font-size: $text-normal
+    font-size: size('normal')
     height: 25px
     padding-bottom: 0
     font-family: sans-serif
     margin-top: 10px
     +appearance
   &[type="number"]:focus, &[type="date"]:focus, &[type="email"]:focus, &[type="password"]:focus, &[type="text"]:focus
-    color: #000
+    color: color('dark')
     border-color: rgba(82, 168, 236, 0.8)
     outline: 0
     box-shadow: 0 0 8px rgba(82, 168, 236, 0.6)
 
 textarea:focus
-  color: #000
+  color: color('dark')
   border-color: rgba(82, 168, 236, 0.8)
   outline: 0
   box-shadow: 0 0 8px rgba(82, 168, 236, 0.6)
@@ -53,7 +55,8 @@ span.select2-container
   margin-top: 2px
 
 \::-webkit-input-placeholder, ::-ms-input-placeholder, ::-moz-placeholder
-  color: #ddd
+  color: color('light')
+  opacity: 0.2
   padding-top: 2px
 
 .form-actions
@@ -73,14 +76,14 @@ input.form-error:focus, textarea.form-error:focus
   font-weight: bold
 
 .form-errors
-  color: #b94a48
+  color: color('error')
   list-style-type: none
 
 ul.form-errors li
   margin-left: 0
 
 .form-help
-  font-size: $text-small
+  font-size: size('small')
   color: brown
   margin-bottom: 15px
 
@@ -128,4 +131,4 @@ input
 .reset-password
   margin-top: 20px
   a
-    color: #999
+    color: color('light')
diff --git a/assets/sass/_gantt_chart.sass b/assets/sass/_gantt_chart.sass
index 08aa4d56..eb6124d8 100644
--- a/assets/sass/_gantt_chart.sass
+++ b/assets/sass/_gantt_chart.sass
@@ -1,3 +1,5 @@
+@import variables
+
 div
   &.ganttview-hzheader-month, &.ganttview-hzheader-day, &.ganttview-vtheader, &.ganttview-vtheader-item-name, &.ganttview-vtheader-series, &.ganttview-grid, &.ganttview-grid-row-cell
     float: left
@@ -19,14 +21,14 @@ div
     border-right: 1px solid #f0f0f0
     border-top: 1px solid #d0d0d0
     line-height: 20px
-    color: #777
+    color: color('medium')
   &.ganttview-vtheader
     margin-top: 41px
     width: 400px
     overflow: hidden
     background-color: #fff
   &.ganttview-vtheader-item
-    color: #666
+    color: color('medium')
   &.ganttview-vtheader-series-name
     width: 400px
     height: 31px
@@ -37,15 +39,15 @@ div
     overflow: hidden
     white-space: nowrap
     a
-      color: #666
+      color: color('medium')
       text-decoration: none
       &:hover
-        color: #333
+        color: color('primary')
         text-decoration: underline
       i
-        color: #000
+        color: color('dark')
       &:hover i
-        color: #666
+        color: color('medium')
   &.ganttview-slide-container
     overflow: auto
     border-left: 1px solid #999
@@ -78,8 +80,8 @@ div
   &.ganttview-block-text
     position: absolute
     height: 12px
-    font-size: $text-tiny
-    color: #999
+    font-size: size('tiny')
+    color: color('light')
     padding: 2px 3px
   &.ganttview-block div.ui-resizable-handle.ui-resizable-s
     bottom: -0
diff --git a/assets/sass/_header.sass b/assets/sass/_header.sass
index e3afe1b3..13ae6a99 100644
--- a/assets/sass/_header.sass
+++ b/assets/sass/_header.sass
@@ -1,14 +1,16 @@
+@import variables
+
 header
   margin-top: 5px
   margin-bottom: 5px
   border-bottom: 1px solid #dedede
   h1
-    font-size: $page-title-size
+    font-size: size('title')
     .tooltip
       opacity: 0.3
-      font-size: $text-tiny
+      font-size: size('tiny')
 
 .web-notification-icon
-  color: #3366CC
+  color: link-color('primary')
   &:focus, &:hover
-    color: #000
+    color: color('dark')
diff --git a/assets/sass/_links.sass b/assets/sass/_links.sass
index 8f2359a2..d4544391 100644
--- a/assets/sass/_links.sass
+++ b/assets/sass/_links.sass
@@ -1,10 +1,12 @@
+@import variables
+
 a
-  color: $link-color
+  color: link-color('primary')
   border: none
   &:focus
     outline: 0
-    color: $link-color-focus
+    color: link-color('focus')
     text-decoration: none
   &:hover
-    color: $link-color-hover
+    color: link-color('hover')
     text-decoration: none
diff --git a/assets/sass/_listing.sass b/assets/sass/_listing.sass
index 20ebc7fa..64ff4adc 100644
--- a/assets/sass/_listing.sass
+++ b/assets/sass/_listing.sass
@@ -1,10 +1,12 @@
+@import variables
+
 .listing
   border-radius: 4px
   padding: 8px 35px 8px 14px
   margin-bottom: 20px
   border: 1px solid #ddd
-  color: #333
-  background-color: #fcfcfc
+  color: color('primary')
+  background-color: bg-color('light')
   overflow: auto
   li
     list-style-type: square
diff --git a/assets/sass/_logo.sass b/assets/sass/_logo.sass
index 55d33ab1..200b4447 100644
--- a/assets/sass/_logo.sass
+++ b/assets/sass/_logo.sass
@@ -1,13 +1,15 @@
+@import variables
+
 .logo
   a
     opacity: 0.5
     color: #d40000
     text-decoration: none
   span
-    color: #333
+    color: color('primary')
   a
     &:hover
       opacity: 0.8
-      color: #333
+      color: color('primary')
     &:focus span, &:hover span
       color: #d40000
diff --git a/assets/sass/_markdown_rendering.sass b/assets/sass/_markdown_rendering.sass
index 778286e7..cc1f977a 100644
--- a/assets/sass/_markdown_rendering.sass
+++ b/assets/sass/_markdown_rendering.sass
@@ -1,3 +1,5 @@
+@import variables
+
 .markdown
   line-height: 1.4em
   h1
@@ -18,7 +20,7 @@
     border-radius: 5px
     border: 1px solid #ddd
     overflow: auto
-    color: #444
+    color: color('medium')
   blockquote
     font-style: italic
     border-left: 3px solid #ddd
diff --git a/assets/sass/_page_header.sass b/assets/sass/_page_header.sass
index 592b359f..0ea1a8f6 100644
--- a/assets/sass/_page_header.sass
+++ b/assets/sass/_page_header.sass
@@ -1,3 +1,5 @@
+@import variables
+
 .page-header
   margin-bottom: 20px
   .dropdown
@@ -8,10 +10,10 @@
     font-weight: bold
     border-bottom: 1px dotted #ccc
     a
-      color: #333
+      color: color('primary')
       text-decoration: none
       &:focus, &:hover
-        color: #aaa
+        color: color('light')
   ul
     text-align: left
     margin-top: 5px
@@ -20,7 +22,7 @@
     display: inline
     padding-right: 15px
     &.active a
-      color: #333
+      color: color('primary')
       text-decoration: none
       font-weight: bold
       &:hover, &:focus
diff --git a/assets/sass/_pagination.sass b/assets/sass/_pagination.sass
index 877a3a91..792fb945 100644
--- a/assets/sass/_pagination.sass
+++ b/assets/sass/_pagination.sass
@@ -1,3 +1,5 @@
+@import variables
+
 .pagination
   text-align: center
 
diff --git a/assets/sass/_popover.sass b/assets/sass/_popover.sass
index 841019ae..ed58cfbc 100644
--- a/assets/sass/_popover.sass
+++ b/assets/sass/_popover.sass
@@ -1,3 +1,5 @@
+@import variables
+
 #popover-container
   position: fixed
   top: 0
diff --git a/assets/sass/_project.sass b/assets/sass/_project.sass
index 308175dd..0f91d92a 100644
--- a/assets/sass/_project.sass
+++ b/assets/sass/_project.sass
@@ -1,9 +1,11 @@
+@import variables
+
 .project-header
   margin-top: 8px
   margin-bottom: 20px
 
 .action-menu
-  color: #333
+  color: color('primary')
   text-decoration: none
   &:hover, &:focus
     text-decoration: underline
diff --git a/assets/sass/_project_overview.sass b/assets/sass/_project_overview.sass
index 096fe085..6f9faa0b 100644
--- a/assets/sass/_project_overview.sass
+++ b/assets/sass/_project_overview.sass
@@ -1,3 +1,4 @@
+@import variables
 
 .project-overview-columns
   +display-flex
@@ -5,14 +6,14 @@
   +flex-wrap
   +align-content(center)
   margin-bottom: 20px
-  font-size: $text-large
+  font-size: size('large')
 
 .project-overview-column
   text-align: center
   margin-right: 3%
   padding: 3px 15px 3px 15px
   border: 1px dashed #ddd
-  strong
-    color: #444
   small
-    color: #777
+    color: color('light')
+  strong
+    color: color('medium')
diff --git a/assets/sass/_project_views_switcher.sass b/assets/sass/_project_views_switcher.sass
index 0faee0cc..86aa2619 100644
--- a/assets/sass/_project_views_switcher.sass
+++ b/assets/sass/_project_views_switcher.sass
@@ -1,3 +1,5 @@
+@import variables
+
 .views
   display: inline-block
   margin-left: 10px
@@ -10,21 +12,21 @@
     padding: 5px 8px
     display: inline
   a
-    color: #555
+    color: color('medium')
     text-decoration: none
     &:hover
-      color: #333
+      color: color('primary')
       text-decoration: underline
 
 .menu-inline li.active a
   font-weight: bold
-  color: #000
+  color: color('dark')
   text-decoration: none
 
 .views li
   &.active a
     font-weight: bold
-    color: #000
+    color: color('dark')
     text-decoration: none
   &:first-child
     border-top-left-radius: 5px
diff --git a/assets/sass/_reset.sass b/assets/sass/_reset.sass
index 8b8e1499..c4568ce7 100644
--- a/assets/sass/_reset.sass
+++ b/assets/sass/_reset.sass
@@ -1,3 +1,5 @@
+@import variables
+
 h1,
 li,
 ul,
@@ -17,12 +19,12 @@ body
   margin-left: 10px
   margin-right: 10px
   padding-bottom: 10px
-  color: $text-color
+  color: color('primary')
   font-family: $text-font
   text-rendering: optimizeLegibility
 
 small
-  font-size: $text-small
+  font-size: size('small')
 
 hr
   border: 0
diff --git a/assets/sass/_sidebar.sass b/assets/sass/_sidebar.sass
index 8a2a1113..90cdd660 100644
--- a/assets/sass/_sidebar.sass
+++ b/assets/sass/_sidebar.sass
@@ -1,3 +1,5 @@
+@import variables
+
 .sidebar-container
   margin-top: 10px
   height: 100%
@@ -37,10 +39,10 @@
   > ul
     a
       text-decoration: none
-      color: #999
+      color: color('light')
       font-weight: 300
       &:hover
-        color: #333
+        color: color('primary')
     li
       list-style-type: none
       line-height: 35px
@@ -53,7 +55,7 @@
         border-left: 5px solid #333
         padding-left: 8px
         a
-          color: #333
+          color: color('primary')
           font-weight: bold
 
 .sidebar-icons > ul li
@@ -65,6 +67,6 @@
 .sidebar > ul li
   &.active a
     &:focus, &:hover
-      color: #555
+      color: color('medium')
   &:last-child
     margin-bottom: 15px
diff --git a/assets/sass/_subtasks.sass b/assets/sass/_subtasks.sass
index ed976703..ad467b81 100644
--- a/assets/sass/_subtasks.sass
+++ b/assets/sass/_subtasks.sass
@@ -1,3 +1,5 @@
+@import variables
+
 .subtasks-table
   td
     vertical-align: middle
diff --git a/assets/sass/_table.sass b/assets/sass/_table.sass
index b49e7696..de535ed1 100644
--- a/assets/sass/_table.sass
+++ b/assets/sass/_table.sass
@@ -1,3 +1,5 @@
+@import variables
+
 table
   width: 100%
   border-collapse: collapse
@@ -14,18 +16,18 @@ td
   vertical-align: top
 
 th
-  background: #fbfbfb
+  background: bg-color('primary')
   text-align: left
 
 td li
   margin-left: 20px
 
 .table-small
-  font-size: $text-small
+  font-size: size('small')
 
 th a
   text-decoration: none
-  color: #333
+  color: color('primary')
   &:focus, &:hover
     text-decoration: underline
 
@@ -91,7 +93,7 @@ th a
   cursor: move
   color: #dedede
   &:hover
-    color: #333
+    color: color('primary')
 
 tr.draggable-item-selected
   background: #fff
diff --git a/assets/sass/_task_board.sass b/assets/sass/_task_board.sass
index f5b3b432..17632f08 100644
--- a/assets/sass/_task_board.sass
+++ b/assets/sass/_task_board.sass
@@ -1,3 +1,5 @@
+@import variables
+
 .task-board
   position: relative
   margin-bottom: 4px
@@ -15,7 +17,7 @@ div
 
 .task-board
   a
-    color: #000
+    color: color('dark')
     text-decoration: none
   .dropdown-menu
     font-weight: bold
diff --git a/assets/sass/_task_board_age.sass b/assets/sass/_task_board_age.sass
index 53ec91d5..1e91880f 100644
--- a/assets/sass/_task_board_age.sass
+++ b/assets/sass/_task_board_age.sass
@@ -1,3 +1,5 @@
+@import variables
+
 .task-board-age
   display: inline-block
 
diff --git a/assets/sass/_task_board_avatar.sass b/assets/sass/_task_board_avatar.sass
index a4624c30..2a5563b3 100644
--- a/assets/sass/_task_board_avatar.sass
+++ b/assets/sass/_task_board_avatar.sass
@@ -1,3 +1,5 @@
+@import variables
+
 .task-board-avatars
   text-align: right
   float: right
diff --git a/assets/sass/_task_board_category.sass b/assets/sass/_task_board_category.sass
index 72bf4387..37a4ea47 100644
--- a/assets/sass/_task_board_category.sass
+++ b/assets/sass/_task_board_category.sass
@@ -1,3 +1,5 @@
+@import variables
+
 .task-board-category-container
   text-align: right
   margin-top: 8px
@@ -5,7 +7,7 @@
 
 .task-board-category
   font-weight: 500
-  color: #000
+  color: color('dark')
   border: 1px solid #555
   padding: 1px 2px 1px 2px
   border-radius: 4px
diff --git a/assets/sass/_task_board_date.sass b/assets/sass/_task_board_date.sass
index 65849e39..9b11cce2 100644
--- a/assets/sass/_task_board_date.sass
+++ b/assets/sass/_task_board_date.sass
@@ -1,11 +1,11 @@
+@import variables
+
 .task-board-date
   font-weight: bold
-  color: #000
+  color: color('dark')
 
 span
   &.task-board-date-today
-    color: #0000D9
     opacity: 1.0
   &.task-board-date-overdue
-    color: #D90000
     opacity: 1.0
diff --git a/assets/sass/_task_board_icons.sass b/assets/sass/_task_board_icons.sass
index 77491baf..c9240325 100644
--- a/assets/sass/_task_board_icons.sass
+++ b/assets/sass/_task_board_icons.sass
@@ -1,5 +1,7 @@
+@import variables
+
 .task-board-icons
-  font-size: $text-small
+  font-size: size('small')
   text-align: right
   margin-top: 4px
   margin-bottom: 2px
diff --git a/assets/sass/_task_board_saving_state.sass b/assets/sass/_task_board_saving_state.sass
index d5c1a6da..31465e9c 100644
--- a/assets/sass/_task_board_saving_state.sass
+++ b/assets/sass/_task_board_saving_state.sass
@@ -1,3 +1,5 @@
+@import variables
+
 .task-board-saving-state
   opacity: 0.3
 
@@ -6,4 +8,4 @@
   margin: auto
   width: 100%
   text-align: center
-  color: #000
+  color: color('dark')
diff --git a/assets/sass/_task_links.sass b/assets/sass/_task_links.sass
index fdcea04b..4d68703c 100644
--- a/assets/sass/_task_links.sass
+++ b/assets/sass/_task_links.sass
@@ -1,9 +1,11 @@
+@import variables
+
 .task-links-table
   td
     vertical-align: middle
 
 .task-links-task-count
-  color: #999
+  color: color('light')
 
 .task-link-closed
   text-decoration: line-through
diff --git a/assets/sass/_task_listing.sass b/assets/sass/_task_listing.sass
index ea312685..1c265e87 100644
--- a/assets/sass/_task_listing.sass
+++ b/assets/sass/_task_listing.sass
@@ -1,12 +1,14 @@
+@import variables
+
 .task-table .dropdown-menu
-  color: #000
+  color: color('dark')
   text-decoration: none
   font-weight: bold
   &:focus, &:hover
     text-decoration: underline
 
 td.task-table a
-  color: #000
+  color: color('dark')
   text-decoration: none
   &:hover
     text-decoration: underline
diff --git a/assets/sass/_task_summary.sass b/assets/sass/_task_summary.sass
index 0063ba43..0ecc979a 100644
--- a/assets/sass/_task_summary.sass
+++ b/assets/sass/_task_summary.sass
@@ -1,14 +1,13 @@
+@import variables
+
 #task-summary
   margin-bottom: 15px
   h2
-    color: #666
-    font-size: $text-xlarge
+    color: color('medium')
+    font-size: size('xlarge')
     margin-top: 0
     padding-top: 0
 
-.task-summary-buttons
-  margin-top: 10px
-
 .task-summary-container
   border: 2px solid #000
   border-radius: 8px
@@ -23,9 +22,9 @@
   justify-content: space-between
 
 .task-summary-column
-  color: #666
+  color: color('primary')
   span
-    color: #555
+    color: color('medium')
   li
     line-height: 23px
 
@@ -34,6 +33,6 @@
   border-radius: 8px
   margin-bottom: 20px
   h2
-    color: #555
+    color: color('medium')
     margin: 0
     padding: 8px
diff --git a/assets/sass/_task_tags.sass b/assets/sass/_task_tags.sass
index 26cf38fa..935b3faf 100644
--- a/assets/sass/_task_tags.sass
+++ b/assets/sass/_task_tags.sass
@@ -1,9 +1,11 @@
+@import variables
+
 .task-tags li
   display: inline
   margin: 0
   margin-right: 4px
   padding: 2px
-  color: #666
+  color: color('medium')
   border: 1px solid #666
   border-radius: 2px
 
diff --git a/assets/sass/_title.sass b/assets/sass/_title.sass
index 3247b4a6..16e81df3 100644
--- a/assets/sass/_title.sass
+++ b/assets/sass/_title.sass
@@ -1,14 +1,16 @@
+@import variables
+
 h1, h2, h3
   font-weight: normal
-  color: $title-color
+  color: color('primary')
 
 h1
-  font-size: $page-title-size
+  font-size: size('title')
 
 h2
-  font-size: $text-large
+  font-size: size('large')
   margin-bottom: 10px
 
 h3
   margin-top: 10px
-  font-size: $text-medium
+  font-size: size('medium')
diff --git a/assets/sass/_tooltip.sass b/assets/sass/_tooltip.sass
index a5c67aaf..19365a33 100644
--- a/assets/sass/_tooltip.sass
+++ b/assets/sass/_tooltip.sass
@@ -1,3 +1,5 @@
+@import variables
+
 .tooltip-arrow:after
   background: #fff
   border: 1px solid #aaaaaa
@@ -47,4 +49,4 @@ div.ui-tooltip
   list-style-type: none
 
 .tooltip .fa-info-circle
-  color: #999
+  color: color('light')
diff --git a/assets/sass/_user_mentions.sass b/assets/sass/_user_mentions.sass
index 342ff953..4c0f038e 100644
--- a/assets/sass/_user_mentions.sass
+++ b/assets/sass/_user_mentions.sass
@@ -1,6 +1,8 @@
+@import variables
+
 .user-mention-link
   font-weight: bold
-  color: #000
+  color: color('dark')
   text-decoration: none
   &:hover
-    color: #555
+    color: color('medium')
diff --git a/assets/sass/_variables.sass b/assets/sass/_variables.sass
new file mode 100644
index 00000000..fcfc718a
--- /dev/null
+++ b/assets/sass/_variables.sass
@@ -0,0 +1,83 @@
+$colors: ('primary': #333, 'light': #999, 'dark': #000, 'medium': #555, 'error': #b94a48)
+$link-colors: ('primary': #3366CC, 'focus': #DF5353, 'hover': #333)
+$background-colors: ('primary': #fbfbfb, 'light': #fcfcfc)
+
+$alert-colors: ('default': #c09853, 'success': #468847, 'error': #b94a48, 'info': #3a87ad, 'normal': #333)
+$alert-background-colors: ('default': #fcf8e3, 'success': #dff0d8, 'error': #f2dede, 'info': #d9edf7, 'normal': #f0f0f0)
+$alert-border-colors: ('default': #fbeed5, 'success': #d6e9c6, 'error': #eed3d7, 'info': #bce8f1, 'normal': #ddd)
+
+$button-colors: ('default': #333, 'red': #fff, 'blue': #fff, 'disabled': #ccc)
+$button-background-colors: ('default': #f5f5f5, 'red': #d14836, 'blue': #4d90fe, 'disabled': #f7f7f7)
+$button-border-colors: ('default': #ddd, 'red': #b0281a, 'blue': #3079ed, 'disabled': #ccc)
+$button-hover-colors: ('default': #000, 'red': #fff, 'blue': #fff)
+$button-hover-background-colors: ('default': #fafafa, 'red': #c53727, 'blue': #357ae8)
+$button-hover-border-colors: ('default': #bbb, 'red': #b0281a, 'blue': #3079ed)
+
+$font-sizes: ('normal': 1.0em, 'tiny': 0.7em, 'small': 0.8em, 'medium': 1.2em, 'large': 1.4em, 'xlarge': 1.6em, 'title': 1.5em)
+
+$text-font: 'Helvetica Neue', Helvetica, Arial, sans-serif
+
+$dropdown-text-size: 0.9em
+$board-text-size: 0.9em
+$board-task-limit-color: #DF5353
+
+@function size($key)
+  @return map-get($font-sizes, $key)
+
+@function color($key: 'primary')
+  @return map-get($colors, $key)
+
+@function link-color($key: 'primary')
+  @return map-get($link-colors, $key)
+
+@function bg-color($key: 'primary')
+  @return map-get($background-colors, $key)
+
+@function alert-color($key)
+  @return map-get($alert-colors, $key)
+
+@function alert-bg-color($key)
+  @return map-get($alert-background-colors, $key)
+
+@function alert-border-color($key)
+  @return map-get($alert-border-colors, $key)
+
+@function button-color($key)
+  @return map-get($button-colors, $key)
+
+@function button-bg-color($key)
+  @return map-get($button-background-colors, $key)
+
+@function button-border-color($key)
+  @return map-get($button-border-colors, $key)
+
+@function button-hover-color($key)
+  @return map-get($button-hover-colors, $key)
+
+@function button-hover-bg-color($key)
+  @return map-get($button-hover-background-colors, $key)
+
+@function button-hover-border-color($key)
+  @return map-get($button-hover-border-colors, $key)
+
+=appearance
+  -webkit-appearance: none
+  -moz-appearance: none
+
+=display-flex
+  display: -webkit-flex
+  display: flex
+
+=flex-direction($direction)
+  -webkit-flex-direction: $direction
+  flex-direction: $direction
+
+=flex-wrap
+  -webkit-flex-wrap: wrap
+  flex-wrap: wrap
+
+=align-content($position)
+  -webkit-align-items: $position
+  align-items: $position
+  -webkit-justify-content: $position
+  justify-content: $position
diff --git a/assets/sass/app.sass b/assets/sass/app.sass
index dc74121d..fe31a6f9 100644
--- a/assets/sass/app.sass
+++ b/assets/sass/app.sass
@@ -1,65 +1,3 @@
-$text-xlarge: 1.6em
-$text-large: 1.4em
-$text-medium: 1.2em
-$text-normal: 1.0em
-$text-small: 0.8em
-$text-tiny: 0.7em
-
-$dropdown-text-size: 0.9em
-$board-text-size: 0.9em
-
-$text-font: 'Helvetica Neue', Helvetica, Arial, sans-serif
-$text-color: #333
-
-$title-color: #333
-$page-title-size: 1.5em
-
-$link-color: #3366CC
-$link-color-focus: #DF5353
-$link-color-hover: #333
-
-$alert-default-text-color: #c09853
-$alert-default-background-color: #fcf8e3
-$alert-default-border-color: #fbeed5
-
-$alert-success-text-color: #468847
-$alert-success-background-color: #dff0d8
-$alert-success-border-color: #d6e9c6
-
-$alert-error-text-color: #b94a48
-$alert-error-background-color: #f2dede
-$alert-error-border-color: #eed3d7
-
-$alert-info-text-color: #3a87ad
-$alert-info-background-color: #d9edf7
-$alert-info-border-color: #bce8f1
-
-$alert-normal-text-color: #333
-$alert-normal-background-color: #f0f0f0
-$alert-normal-border-color: #ddd
-
-=appearance
-  -webkit-appearance: none
-  -moz-appearance: none
-
-=display-flex
-  display: -webkit-flex
-  display: flex
-
-=flex-direction($direction)
-  -webkit-flex-direction: $direction
-  flex-direction: $direction
-
-=flex-wrap
-  -webkit-flex-wrap: wrap
-  flex-wrap: wrap
-
-=align-content($position)
-  -webkit-align-items: $position
-  align-items: $position
-  -webkit-justify-content: $position
-  justify-content: $position
-
 @import reset
 @import base
 @import links