Fix some styles+input focus

_vars.scss

@@ -13,10 +13,12 @@ $link-hover-color: #fff;
 $link-hover-decoration: none;
 
 $default-border: 1px;
-$default-border-color: #000;
+$default-border-color: #d6d6d6;
 $default-border-radius: 3px;
 $default-padding: 5px;
 
+$default-highlighter: #FBA026;
+
 /* Content Container */
 $content-container-padding: $default-padding;
 $content-container-color: $reverse-font-color;

accordion.css

@@ -0,0 +1,79 @@
+/* Global */
+/* Content Container */
+/* Content box */
+/* Navigation */
+/* Colors */
+/* Accordion */
+/* Log */
+/* Blockquote */
+/* Breadcrumbs */
+/* Input */
+/* Button */
+/* Canvas */
+/* Article */
+/* Form */
+/* Icon */
+/* Img */
+/* list */
+/* pagination */
+/* pre */
+/* tag */
+.ac-container {
+  margin: 10px auto 30px auto;
+  text-align: left; }
+  .ac-container > input {
+    display: none; }
+    .ac-container > input:checked + label {
+      background: #fff;
+      background: -moz-linear-gradient(top, #fff 0, #fff 100);
+      background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(100, #fff));
+      background: -webkit-linear-gradient(top, #fff 0, #fff 100);
+      background: -o-linear-gradient(top, #fff 0, #fff 100);
+      background: -ms-linear-gradient(top, #fff 0, #fff 100);
+      background: linear-gradient(to bottom, #fff 0, #fff 100);
+      color: #000; }
+      .ac-container > input:checked + label + section {
+        display: inherit; }
+    .ac-container > input + label + section {
+      display: none; }
+  .ac-container label {
+    display: block;
+    padding: 5px 20px;
+    position: relative;
+    z-index: 20;
+    margin-top: -1px;
+    cursor: pointer;
+    color: #777;
+    font-size: 1rem;
+    border: 1px solid #d6d6d6;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    -ms-border-radius: 3px;
+    border-radius: 3px;
+    background-clip: padding-box;
+    background: #f5f5ff;
+    background: -moz-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e0e3eb), color-stop(100, #f5f5ff));
+    background: -webkit-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
+    background: -o-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
+    background: -ms-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
+    background: linear-gradient(to bottom, #e0e3eb 0, #f5f5ff 100); }
+    .ac-container label:hover {
+      background: #fff;
+      background: -moz-linear-gradient(top, #fff 0, #fff 100);
+      background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(100, #fff));
+      background: -webkit-linear-gradient(top, #fff 0, #fff 100);
+      background: -o-linear-gradient(top, #fff 0, #fff 100);
+      background: -ms-linear-gradient(top, #fff 0, #fff 100);
+      background: linear-gradient(to bottom, #fff 0, #fff 100); }
+  .ac-container > section {
+    background: #fff;
+    overflow: hidden;
+    height: auto;
+    position: relative;
+    z-index: 10;
+    border-left: 1px solid #d6d6d6;
+    border-right: 1px solid #d6d6d6;
+    padding: 10px; }
+
+/*# sourceMappingURL=accordion.css.map */

alert.css

@@ -1,3 +1,23 @@
+/* Global */
+/* Content Container */
+/* Content box */
+/* Navigation */
+/* Colors */
+/* Accordion */
+/* Log */
+/* Blockquote */
+/* Breadcrumbs */
+/* Input */
+/* Button */
+/* Canvas */
+/* Article */
+/* Form */
+/* Icon */
+/* Img */
+/* list */
+/* pagination */
+/* pre */
+/* tag */
 .log-msg {
   padding: 5px;
   margin: 5px; }

alignment.css

@@ -0,0 +1,27 @@
+.center {
+  margin: 0 auto; }
+
+.centerText {
+  text-align: center; }
+
+.rightText {
+  text-align: right; }
+
+.floatLeft {
+  float: left; }
+
+.floatRight {
+  float: right; }
+
+.pAlignTable {
+  display: table;
+  width: 100%; }
+
+.vCenterTable {
+  display: table-cell;
+  vertical-align: middle; }
+
+.h-overflow {
+  overflow-x: auto; }
+
+/*# sourceMappingURL=alignment.css.map */

article.css

@@ -0,0 +1,49 @@
+/* Global */
+/* Content Container */
+/* Content box */
+/* Navigation */
+/* Colors */
+/* Accordion */
+/* Log */
+/* Blockquote */
+/* Breadcrumbs */
+/* Input */
+/* Button */
+/* Canvas */
+/* Article */
+/* Form */
+/* Icon */
+/* Img */
+/* list */
+/* pagination */
+/* pre */
+/* tag */
+article {
+  background: #fff;
+  padding: 5px;
+  margin: 0; }
+  article a {
+    color: #8ea4ff;
+    border-bottom: 1px dotted #8ea4ff; }
+    article a:hover {
+      border-bottom: none; }
+  article p {
+    line-height: 1.5em; }
+  article ol, article ul {
+    margin-left: 30px; }
+  article ul {
+    list-style: disc; }
+  article blockquote {
+    margin: 10px 0 10px 0; }
+    article blockquote p:last-child {
+      margin-bottom: 0; }
+  article table {
+    border-collapse: collapse;
+    border: 1px solid #999; }
+    article table th, article table td {
+      padding: 5px;
+      border: 1px solid #999; }
+    article table tr:nth-child(2n) {
+      background: #eee; }
+
+/*# sourceMappingURL=article.css.map */

badge.css

@@ -0,0 +1,3 @@
+
+
+/*# sourceMappingURL=badge.css.map */

blockquote.css

@@ -0,0 +1,34 @@
+/* Global */
+/* Content Container */
+/* Content box */
+/* Navigation */
+/* Colors */
+/* Accordion */
+/* Log */
+/* Blockquote */
+/* Breadcrumbs */
+/* Input */
+/* Button */
+/* Canvas */
+/* Article */
+/* Form */
+/* Icon */
+/* Img */
+/* list */
+/* pagination */
+/* pre */
+/* tag */
+blockquote {
+  border: 1px solid #d6d6d6;
+  background: #fff;
+  padding: 10px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  border-radius: 3px;
+  background-clip: padding-box; }
+
+/*# sourceMappingURL=blockquote.css.map */

breadcrumb.css

@@ -0,0 +1,77 @@
+/* Global */
+/* Content Container */
+/* Content box */
+/* Navigation */
+/* Colors */
+/* Accordion */
+/* Log */
+/* Blockquote */
+/* Breadcrumbs */
+/* Input */
+/* Button */
+/* Canvas */
+/* Article */
+/* Form */
+/* Icon */
+/* Img */
+/* list */
+/* pagination */
+/* pre */
+/* tag */
+.crumbs-1 {
+  list-style: none;
+  overflow: hidden;
+  font-size: 12px; }
+  .crumbs-1 li {
+    background: #f5f5ff;
+    border: 1px solid #d6d6d6;
+    padding: 10px;
+    position: relative;
+    display: block;
+    float: left;
+    text-shadow: -1px -1px 1px #ffffff;
+    cursor: pointer;
+    -moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
+    -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
+    box-shadow: inset 1px 1px 0px 0px #ffffff; }
+    .crumbs-1 li:first-child {
+      -webkit-border-bottom-left-radius: 3px;
+      border-bottom-left-radius: 3px;
+      -webkit-border-top-left-radius: 3px;
+      border-top-left-radius: 3px;
+      background-clip: padding-box; }
+    .crumbs-1 li:not(.last):after, .crumbs-1 li:before {
+      content: " ";
+      display: block;
+      width: 0;
+      height: 0;
+      border-top: 18px solid transparent;
+      border-bottom: 17px solid transparent;
+      border-left: 14px solid #d6d6d6;
+      position: absolute;
+      top: 50%;
+      margin-top: -18px;
+      left: 100%; }
+    .crumbs-1 li:not(.last):after {
+      z-index: 2; }
+    .crumbs-1 li:before {
+      border-left-color: #d6d6d6;
+      margin-left: 1px;
+      z-index: 1; }
+    .crumbs-1 li.active:not(.last):after, .crumbs-1 li:hover:not(.last):after {
+      border-left: 14px solid #ffffff; }
+  .crumbs-1 .last {
+    padding-right: 20px;
+    -webkit-border-bottom-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+    -webkit-border-top-right-radius: 3px;
+    border-top-right-radius: 3px;
+    background-clip: padding-box; }
+    .crumbs-1 .last:before {
+      border: none; }
+  .crumbs-1 .active {
+    cursor: default; }
+  .crumbs-1 .active, .crumbs-1 li:hover {
+    background: #fff; }
+
+/*# sourceMappingURL=breadcrumb.css.map */

button.css

@@ -3,11 +3,26 @@
 /* Content box */
 /* Navigation */
 /* Colors */
+/* Accordion */
+/* Log */
+/* Blockquote */
+/* Breadcrumbs */
+/* Input */
+/* Button */
+/* Canvas */
+/* Article */
+/* Form */
+/* Icon */
+/* Img */
+/* list */
+/* pagination */
+/* pre */
+/* tag */
 .btn {
   cursor: pointer; }
 
 button, input[type="submit"], input[type="button"], a.button {
-  border: 1px solid #b7b7b7;
+  border: 1px solid #d6d6d6;
   cursor: pointer;
   text-shadow: 1px 1px 1px #ffffff;
   min-width: 70px;
@@ -96,9 +111,9 @@ ul.btns {
   font-size: 12px; }
   ul.btns li {
     background: #f5f5ff;
-    border-left: 1px solid #b7b7b7;
+    border-left: 1px solid #d6d6d6;
-    border-top: 1px solid #b7b7b7;
+    border-top: 1px solid #d6d6d6;
-    border-bottom: 1px solid #b7b7b7;
+    border-bottom: 1px solid #d6d6d6;
     float: left;
     text-shadow: -1px -1px 1px #ffffff;
     cursor: pointer;
@@ -106,9 +121,9 @@ ul.btns {
     -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
     box-shadow: inset 1px 1px 0px 0px #ffffff; }
     ul.btns li:last-child {
-      border-right: 1px solid #b7b7b7; }
+      border-right: 1px solid #d6d6d6; }
     ul.btns li:before {
-      border-left-color: #b7b7b7;
+      border-left-color: #d6d6d6;
       margin-left: 1px; }
   ul.btns a {
     display: block;
@@ -116,15 +131,15 @@ ul.btns {
   ul.btns .active {
     cursor: default; }
   ul.btns .active, ul.btns li:hover {
-    background: #ffffff; }
+    background: #fff; }
 
 button.simple {
-  background: #f5f5ff;
+  background: #f1f1f1;
-  border: 1px solid #b7b7b7;
+  border: 1px solid #d6d6d6;
   text-shadow: -1px -1px 1px #ffffff;
   padding: 5px;
   min-width: 40px; }
   button.simple:hover {
-    background: #ffffff; }
+    background: #f1f1f1; }
 
 /*# sourceMappingURL=button.css.map */

canvas.css

@@ -0,0 +1,26 @@
+/* Global */
+/* Content Container */
+/* Content box */
+/* Navigation */
+/* Colors */
+/* Accordion */
+/* Log */
+/* Blockquote */
+/* Breadcrumbs */
+/* Input */
+/* Button */
+/* Canvas */
+/* Article */
+/* Form */
+/* Icon */
+/* Img */
+/* list */
+/* pagination */
+/* pre */
+/* tag */
+canvas {
+  background: #fff;
+  border: 1px solid #d6d6d6;
+  user-select: none; }
+
+/*# sourceMappingURL=canvas.css.map */

clean.css

@@ -0,0 +1,85 @@
+.ok {
+  color: #5cff56; }
+
+.warning {
+  color: #ff4b41; }
+
+.favorite {
+  color: #d16059; }
+
+.green {
+  background: #61BD6D; }
+
+.red {
+  background: #D14841; }
+
+.blue {
+  background: #2C82C9; }
+
+.orange {
+  background: #FBA026; }
+
+.lightblue {
+  background: #54ACD2; }
+
+.yellow {
+  background: #FAC51C; }
+
+.purple {
+  background: #553982; }
+
+.pink {
+  background: #ffa6e3; }
+
+.grey {
+  background: #dcdcdc; }
+
+.darkred {
+  background: #B8312F; }
+
+.darkgreen {
+  background: #41A85F; }
+
+.darkblue {
+  background: #2969B0; }
+
+html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, nav, section, iframe, label {
+  margin: 0;
+  padding: 0; }
+
+a, img, button {
+  outline: none; }
+
+a {
+  color: inherit;
+  text-decoration: none; }
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: normal; }
+
+ul {
+  list-style: none; }
+
+input, select, textarea, .textarea {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  appearance: none;
+  box-shadow: none; }
+  input:focus, select:focus, textarea:focus, .textarea:focus {
+    outline: none; }
+
+input[type=checkbox] {
+  margin-right: 5px; }
+
+button::-moz-focus-inner, input[type=submit]::-moz-focus-inner, input[type=button]::-moz-focus-inner {
+  border: 0; }
+
+table {
+  border-collapse: separate;
+  border-spacing: 0; }
+
+i {
+  font-style: normal; }
+
+/*# sourceMappingURL=clean.css.map */

clean.scss

@@ -1,3 +1,5 @@
+@import "_mixins", "color";
+
 html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, nav, section, iframe, label {
     margin: 0;
     padding: 0;

color.css

@@ -0,0 +1,46 @@
+.ok {
+  color: #5cff56; }
+
+.warning {
+  color: #ff4b41; }
+
+.favorite {
+  color: #d16059; }
+
+.green {
+  background: #61BD6D; }
+
+.red {
+  background: #D14841; }
+
+.blue {
+  background: #2C82C9; }
+
+.orange {
+  background: #FBA026; }
+
+.lightblue {
+  background: #54ACD2; }
+
+.yellow {
+  background: #FAC51C; }
+
+.purple {
+  background: #553982; }
+
+.pink {
+  background: #ffa6e3; }
+
+.grey {
+  background: #dcdcdc; }
+
+.darkred {
+  background: #B8312F; }
+
+.darkgreen {
+  background: #41A85F; }
+
+.darkblue {
+  background: #2969B0; }
+
+/*# sourceMappingURL=color.css.map */

default.css

@@ -3,10 +3,25 @@
 /* Content box */
 /* Navigation */
 /* Colors */
+/* Accordion */
+/* Log */
+/* Blockquote */
+/* Breadcrumbs */
+/* Input */
+/* Button */
+/* Canvas */
+/* Article */
+/* Form */
+/* Icon */
+/* Img */
+/* list */
+/* pagination */
+/* pre */
+/* tag */
 body {
-  background: #e7ebf3;
+  background: #fff;
   font-family: Open Sans, sans-serif;
-  font-size: 0.9em; }
+  font-size: 1rem; }
 
 .clear {
   clear: both; }
@@ -18,11 +33,13 @@ pre {
   -ms-border-radius: 3px;
   border-radius: 3px;
   background-clip: padding-box;
-  border: 1px solid #b7b7b7;
+  border: 1px solid #d6d6d6;
   padding: 5px;
   overflow-x: scroll;
   counter-reset: line;
   width: 100%;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box; }
   pre span {
     display: block; }
@@ -36,27 +53,4 @@ pre {
       color: #888;
       width: 30px; }
 
-article {
-  background: #fff;
-  padding: 5px;
-  margin: 0; }
-  article p {
-    line-height: 1.5em; }
-  article ol, article ul {
-    margin-left: 30px; }
-  article ul {
-    list-style: disc; }
-  article blockquote {
-    margin: 10px 0 10px 0; }
-    article blockquote p:last-child {
-      margin-bottom: 0; }
-  article table {
-    border-collapse: collapse;
-    border: 1px solid #999; }
-    article table th, article table td {
-      padding: 5px;
-      border: 1px solid #999; }
-    article table tr:nth-child(2n) {
-      background: #eee; }
-
 /*# sourceMappingURL=default.css.map */

draggable.css

@@ -0,0 +1,4 @@
+*[draggable] {
+  cursor: move; }
+
+/*# sourceMappingURL=draggable.css.map */

form.css

@@ -3,6 +3,21 @@
 /* Content box */
 /* Navigation */
 /* Colors */
+/* Accordion */
+/* Log */
+/* Blockquote */
+/* Breadcrumbs */
+/* Input */
+/* Button */
+/* Canvas */
+/* Article */
+/* Form */
+/* Icon */
+/* Img */
+/* list */
+/* pagination */
+/* pre */
+/* tag */
 form li {
   margin: 5px 0 5px 0; }
 form td {
@@ -11,33 +26,17 @@ form td {
   form td textarea + i {
     vertical-align: top; }
 form label {
-  font-size: 0.9em;
+  font-size: 0.9rem;
   color: #878787;
   text-shadow: -1px -1px 1px #ffffff; }
 form i + i {
   margin-left: 3px; }
-form .inputPrefix {
-  border-left: 1px solid #b7b7b7;
-  border-top: 1px solid #b7b7b7;
-  border-bottom: 1px solid #b7b7b7;
-  line-height: 2em;
-  height: 100%;
-  background: #bebebe; }
 form .layout td + td {
   padding-left: 5px; }
 form .list {
-  font-size: 0.9em; }
+  font-size: 0.9rem; }
   form .list td {
     white-space: nowrap;
     padding: 3px 5px 3px 5px; }
-form .ipt-wrap {
-  display: table;
-  box-sizing: border-box; }
-  form .ipt-wrap .ipt-first {
-    width: 100%;
-    display: table-cell; }
-  form .ipt-wrap .ipt-second {
-    padding-left: 5px;
-    display: table-cell; }
 
 /*# sourceMappingURL=form.css.map */

grid.css

@@ -0,0 +1,732 @@
+.container-fluid, .container {
+  box-sizing: border-box; }
+
+.row {
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap; }
+
+.col {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 0 auto;
+  flex-direction: column;
+  flex-wrap: wrap;
+  margin-bottom: var(--gutter-compensation, -0.5rem);
+  margin-left: var(--gutter-compensation, -0.5rem); }
+
+.row.reverse {
+  flex-direction: row-reverse; }
+
+.col.reverse {
+  flex-direction: column-reverse; }
+
+.col-xs,
+.col-xs-1,
+.col-xs-2,
+.col-xs-3,
+.col-xs-4,
+.col-xs-5,
+.col-xs-6,
+.col-xs-7,
+.col-xs-8,
+.col-xs-9,
+.col-xs-10,
+.col-xs-11,
+.col-xs-12 {
+  box-sizing: border-box;
+  -ms-flex: 0 0 auto;
+  -webkit-box-flex: 0;
+  flex: 0 0 auto;
+  padding-right: 0.3rem;
+  padding-left: 0.3rem; }
+
+.col-xs {
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  -webkit-box-flex: 1;
+  flex-grow: 1;
+  -ms-flex-preferred-size: 0;
+  flex-basis: 0;
+  max-width: 100%; }
+
+.col-xs-1 {
+  -ms-flex-preferred-size: 8.333%;
+  flex-basis: 8.333%;
+  max-width: 8.333%; }
+
+.col-xs-2 {
+  -ms-flex-preferred-size: 16.667%;
+  flex-basis: 16.667%;
+  max-width: 16.667%; }
+
+.col-xs-3 {
+  -ms-flex-preferred-size: 25%;
+  flex-basis: 25%;
+  max-width: 25%; }
+
+.col-xs-4 {
+  -ms-flex-preferred-size: 33.333%;
+  flex-basis: 33.333%;
+  max-width: 33.333%; }
+
+.col-xs-5 {
+  -ms-flex-preferred-size: 41.667%;
+  flex-basis: 41.667%;
+  max-width: 41.667%; }
+
+.col-xs-6 {
+  -ms-flex-preferred-size: 50%;
+  flex-basis: 50%;
+  max-width: 50%; }
+
+.col-xs-7 {
+  -ms-flex-preferred-size: 58.333%;
+  flex-basis: 58.333%;
+  max-width: 58.333%; }
+
+.col-xs-8 {
+  -ms-flex-preferred-size: 66.667%;
+  flex-basis: 66.667%;
+  max-width: 66.667%; }
+
+.col-xs-9 {
+  -ms-flex-preferred-size: 75%;
+  flex-basis: 75%;
+  max-width: 75%; }
+
+.col-xs-10 {
+  -ms-flex-preferred-size: 83.333%;
+  flex-basis: 83.333%;
+  max-width: 83.333%; }
+
+.col-xs-11 {
+  -ms-flex-preferred-size: 91.667%;
+  flex-basis: 91.667%;
+  max-width: 91.667%; }
+
+.col-xs-12 {
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+  max-width: 100%; }
+
+.col-xs-offset-1 {
+  margin-left: 8.333%; }
+
+.col-xs-offset-2 {
+  margin-left: 16.667%; }
+
+.col-xs-offset-3 {
+  margin-left: 25%; }
+
+.col-xs-offset-4 {
+  margin-left: 33.333%; }
+
+.col-xs-offset-5 {
+  margin-left: 41.667%; }
+
+.col-xs-offset-6 {
+  margin-left: 50%; }
+
+.col-xs-offset-7 {
+  margin-left: 58.333%; }
+
+.col-xs-offset-8 {
+  margin-left: 66.667%; }
+
+.col-xs-offset-9 {
+  margin-left: 75%; }
+
+.col-xs-offset-10 {
+  margin-left: 83.333%; }
+
+.col-xs-offset-11 {
+  margin-left: 91.667%; }
+
+.start-xs {
+  -ms-flex-pack: start;
+  -webkit-box-pack: start;
+  justify-content: flex-start;
+  text-align: start; }
+
+.center-xs {
+  -ms-flex-pack: center;
+  -webkit-box-pack: center;
+  justify-content: center;
+  text-align: center; }
+
+.end-xs {
+  -ms-flex-pack: end;
+  -webkit-box-pack: end;
+  justify-content: flex-end;
+  text-align: end; }
+
+.top-xs {
+  -ms-flex-align: start;
+  -webkit-box-align: start;
+  align-items: flex-start; }
+
+.middle-xs {
+  -ms-flex-align: center;
+  -webkit-box-align: center;
+  align-items: center; }
+
+.bottom-xs {
+  -ms-flex-align: end;
+  -webkit-box-align: end;
+  align-items: flex-end; }
+
+.around-xs {
+  -ms-flex-pack: distribute;
+  justify-content: space-around; }
+
+.between-xs {
+  -ms-flex-pack: justify;
+  -webkit-box-pack: justify;
+  justify-content: space-between; }
+
+.first-xs {
+  -ms-flex-order: -1;
+  -webkit-box-ordinal-group: 0;
+  order: -1; }
+
+.last-xs {
+  -ms-flex-order: 1;
+  -webkit-box-ordinal-group: 2;
+  order: 1; }
+
+@media only screen and (min-width: 48em) {
+  .container {
+    width: 46rem; }
+
+  .col-sm,
+  .col-sm-1,
+  .col-sm-2,
+  .col-sm-3,
+  .col-sm-4,
+  .col-sm-5,
+  .col-sm-6,
+  .col-sm-7,
+  .col-sm-8,
+  .col-sm-9,
+  .col-sm-10,
+  .col-sm-11,
+  .col-sm-12 {
+    box-sizing: border-box;
+    -ms-flex: 0 0 auto;
+    -webkit-box-flex: 0;
+    flex: 0 0 auto;
+    padding-right: 0.3rem;
+    padding-left: 0.3rem; }
+
+  .col-sm {
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    -webkit-box-flex: 1;
+    flex-grow: 1;
+    -ms-flex-preferred-size: 0;
+    flex-basis: 0;
+    max-width: 100%; }
+
+  .col-sm-1 {
+    -ms-flex-preferred-size: 8.333%;
+    flex-basis: 8.333%;
+    max-width: 8.333%; }
+
+  .col-sm-2 {
+    -ms-flex-preferred-size: 16.667%;
+    flex-basis: 16.667%;
+    max-width: 16.667%; }
+
+  .col-sm-3 {
+    -ms-flex-preferred-size: 25%;
+    flex-basis: 25%;
+    max-width: 25%; }
+
+  .col-sm-4 {
+    -ms-flex-preferred-size: 33.333%;
+    flex-basis: 33.333%;
+    max-width: 33.333%; }
+
+  .col-sm-5 {
+    -ms-flex-preferred-size: 41.667%;
+    flex-basis: 41.667%;
+    max-width: 41.667%; }
+
+  .col-sm-6 {
+    -ms-flex-preferred-size: 50%;
+    flex-basis: 50%;
+    max-width: 50%; }
+
+  .col-sm-7 {
+    -ms-flex-preferred-size: 58.333%;
+    flex-basis: 58.333%;
+    max-width: 58.333%; }
+
+  .col-sm-8 {
+    -ms-flex-preferred-size: 66.667%;
+    flex-basis: 66.667%;
+    max-width: 66.667%; }
+
+  .col-sm-9 {
+    -ms-flex-preferred-size: 75%;
+    flex-basis: 75%;
+    max-width: 75%; }
+
+  .col-sm-10 {
+    -ms-flex-preferred-size: 83.333%;
+    flex-basis: 83.333%;
+    max-width: 83.333%; }
+
+  .col-sm-11 {
+    -ms-flex-preferred-size: 91.667%;
+    flex-basis: 91.667%;
+    max-width: 91.667%; }
+
+  .col-sm-12 {
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%; }
+
+  .col-sm-offset-1 {
+    margin-left: 8.333%; }
+
+  .col-sm-offset-2 {
+    margin-left: 16.667%; }
+
+  .col-sm-offset-3 {
+    margin-left: 25%; }
+
+  .col-sm-offset-4 {
+    margin-left: 33.333%; }
+
+  .col-sm-offset-5 {
+    margin-left: 41.667%; }
+
+  .col-sm-offset-6 {
+    margin-left: 50%; }
+
+  .col-sm-offset-7 {
+    margin-left: 58.333%; }
+
+  .col-sm-offset-8 {
+    margin-left: 66.667%; }
+
+  .col-sm-offset-9 {
+    margin-left: 75%; }
+
+  .col-sm-offset-10 {
+    margin-left: 83.333%; }
+
+  .col-sm-offset-11 {
+    margin-left: 91.667%; }
+
+  .start-sm {
+    -ms-flex-pack: start;
+    -webkit-box-pack: start;
+    justify-content: flex-start;
+    text-align: start; }
+
+  .center-sm {
+    -ms-flex-pack: center;
+    -webkit-box-pack: center;
+    justify-content: center;
+    text-align: center; }
+
+  .end-sm {
+    -ms-flex-pack: end;
+    -webkit-box-pack: end;
+    justify-content: flex-end;
+    text-align: end; }
+
+  .top-sm {
+    -ms-flex-align: start;
+    -webkit-box-align: start;
+    align-items: flex-start; }
+
+  .middle-sm {
+    -ms-flex-align: center;
+    -webkit-box-align: center;
+    align-items: center; }
+
+  .bottom-sm {
+    -ms-flex-align: end;
+    -webkit-box-align: end;
+    align-items: flex-end; }
+
+  .around-sm {
+    -ms-flex-pack: distribute;
+    justify-content: space-around; }
+
+  .between-sm {
+    -ms-flex-pack: justify;
+    -webkit-box-pack: justify;
+    justify-content: space-between; }
+
+  .first-sm {
+    -ms-flex-order: -1;
+    -webkit-box-ordinal-group: 0;
+    order: -1; }
+
+  .last-sm {
+    -ms-flex-order: 1;
+    -webkit-box-ordinal-group: 2;
+    order: 1; } }
+@media only screen and (min-width: 62em) {
+  .container {
+    width: 61rem; }
+
+  .col-md,
+  .col-md-1,
+  .col-md-2,
+  .col-md-3,
+  .col-md-4,
+  .col-md-5,
+  .col-md-6,
+  .col-md-7,
+  .col-md-8,
+  .col-md-9,
+  .col-md-10,
+  .col-md-11,
+  .col-md-12 {
+    box-sizing: border-box;
+    -ms-flex: 0 0 auto;
+    -webkit-box-flex: 0;
+    flex: 0 0 auto;
+    padding-right: 0.3rem;
+    padding-left: 0.3rem; }
+
+  .col-md {
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    -webkit-box-flex: 1;
+    flex-grow: 1;
+    -ms-flex-preferred-size: 0;
+    flex-basis: 0;
+    max-width: 100%; }
+
+  .col-md-1 {
+    -ms-flex-preferred-size: 8.333%;
+    flex-basis: 8.333%;
+    max-width: 8.333%; }
+
+  .col-md-2 {
+    -ms-flex-preferred-size: 16.667%;
+    flex-basis: 16.667%;
+    max-width: 16.667%; }
+
+  .col-md-3 {
+    -ms-flex-preferred-size: 25%;
+    flex-basis: 25%;
+    max-width: 25%; }
+
+  .col-md-4 {
+    -ms-flex-preferred-size: 33.333%;
+    flex-basis: 33.333%;
+    max-width: 33.333%; }
+
+  .col-md-5 {
+    -ms-flex-preferred-size: 41.667%;
+    flex-basis: 41.667%;
+    max-width: 41.667%; }
+
+  .col-md-6 {
+    -ms-flex-preferred-size: 50%;
+    flex-basis: 50%;
+    max-width: 50%; }
+
+  .col-md-7 {
+    -ms-flex-preferred-size: 58.333%;
+    flex-basis: 58.333%;
+    max-width: 58.333%; }
+
+  .col-md-8 {
+    -ms-flex-preferred-size: 66.667%;
+    flex-basis: 66.667%;
+    max-width: 66.667%; }
+
+  .col-md-9 {
+    -ms-flex-preferred-size: 75%;
+    flex-basis: 75%;
+    max-width: 75%; }
+
+  .col-md-10 {
+    -ms-flex-preferred-size: 83.333%;
+    flex-basis: 83.333%;
+    max-width: 83.333%; }
+
+  .col-md-11 {
+    -ms-flex-preferred-size: 91.667%;
+    flex-basis: 91.667%;
+    max-width: 91.667%; }
+
+  .col-md-12 {
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%; }
+
+  .col-md-offset-1 {
+    margin-left: 8.333%; }
+
+  .col-md-offset-2 {
+    margin-left: 16.667%; }
+
+  .col-md-offset-3 {
+    margin-left: 25%; }
+
+  .col-md-offset-4 {
+    margin-left: 33.333%; }
+
+  .col-md-offset-5 {
+    margin-left: 41.667%; }
+
+  .col-md-offset-6 {
+    margin-left: 50%; }
+
+  .col-md-offset-7 {
+    margin-left: 58.333%; }
+
+  .col-md-offset-8 {
+    margin-left: 66.667%; }
+
+  .col-md-offset-9 {
+    margin-left: 75%; }
+
+  .col-md-offset-10 {
+    margin-left: 83.333%; }
+
+  .col-md-offset-11 {
+    margin-left: 91.667%; }
+
+  .start-md {
+    -ms-flex-pack: start;
+    -webkit-box-pack: start;
+    justify-content: flex-start;
+    text-align: start; }
+
+  .center-md {
+    -ms-flex-pack: center;
+    -webkit-box-pack: center;
+    justify-content: center;
+    text-align: center; }
+
+  .end-md {
+    -ms-flex-pack: end;
+    -webkit-box-pack: end;
+    justify-content: flex-end;
+    text-align: end; }
+
+  .top-md {
+    -ms-flex-align: start;
+    -webkit-box-align: start;
+    align-items: flex-start; }
+
+  .middle-md {
+    -ms-flex-align: center;
+    -webkit-box-align: center;
+    align-items: center; }
+
+  .bottom-md {
+    -ms-flex-align: end;
+    -webkit-box-align: end;
+    align-items: flex-end; }
+
+  .around-md {
+    -ms-flex-pack: distribute;
+    justify-content: space-around; }
+
+  .between-md {
+    -ms-flex-pack: justify;
+    -webkit-box-pack: justify;
+    justify-content: space-between; }
+
+  .first-md {
+    -ms-flex-order: -1;
+    -webkit-box-ordinal-group: 0;
+    order: -1; }
+
+  .last-md {
+    -ms-flex-order: 1;
+    -webkit-box-ordinal-group: 2;
+    order: 1; } }
+@media only screen and (min-width: 75em) {
+  .container {
+    width: 71rem; }
+
+  .col-lg,
+  .col-lg-1,
+  .col-lg-2,
+  .col-lg-3,
+  .col-lg-4,
+  .col-lg-5,
+  .col-lg-6,
+  .col-lg-7,
+  .col-lg-8,
+  .col-lg-9,
+  .col-lg-10,
+  .col-lg-11,
+  .col-lg-12 {
+    box-sizing: border-box;
+    -ms-flex: 0 0 auto;
+    -webkit-box-flex: 0;
+    flex: 0 0 auto;
+    padding-right: 0.3rem;
+    padding-left: 0.3rem; }
+
+  .col-lg {
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    -webkit-box-flex: 1;
+    flex-grow: 1;
+    -ms-flex-preferred-size: 0;
+    flex-basis: 0;
+    max-width: 100%; }
+
+  .col-lg-1 {
+    -ms-flex-preferred-size: 8.333%;
+    flex-basis: 8.333%;
+    max-width: 8.333%; }
+
+  .col-lg-2 {
+    -ms-flex-preferred-size: 16.667%;
+    flex-basis: 16.667%;
+    max-width: 16.667%; }
+
+  .col-lg-3 {
+    -ms-flex-preferred-size: 25%;
+    flex-basis: 25%;
+    max-width: 25%; }
+
+  .col-lg-4 {
+    -ms-flex-preferred-size: 33.333%;
+    flex-basis: 33.333%;
+    max-width: 33.333%; }
+
+  .col-lg-5 {
+    -ms-flex-preferred-size: 41.667%;
+    flex-basis: 41.667%;
+    max-width: 41.667%; }
+
+  .col-lg-6 {
+    -ms-flex-preferred-size: 50%;
+    flex-basis: 50%;
+    max-width: 50%; }
+
+  .col-lg-7 {
+    -ms-flex-preferred-size: 58.333%;
+    flex-basis: 58.333%;
+    max-width: 58.333%; }
+
+  .col-lg-8 {
+    -ms-flex-preferred-size: 66.667%;
+    flex-basis: 66.667%;
+    max-width: 66.667%; }
+
+  .col-lg-9 {
+    -ms-flex-preferred-size: 75%;
+    flex-basis: 75%;
+    max-width: 75%; }
+
+  .col-lg-10 {
+    -ms-flex-preferred-size: 83.333%;
+    flex-basis: 83.333%;
+    max-width: 83.333%; }
+
+  .col-lg-11 {
+    -ms-flex-preferred-size: 91.667%;
+    flex-basis: 91.667%;
+    max-width: 91.667%; }
+
+  .col-lg-12 {
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%; }
+
+  .col-lg-offset-1 {
+    margin-left: 8.333%; }
+
+  .col-lg-offset-2 {
+    margin-left: 16.667%; }
+
+  .col-lg-offset-3 {
+    margin-left: 25%; }
+
+  .col-lg-offset-4 {
+    margin-left: 33.333%; }
+
+  .col-lg-offset-5 {
+    margin-left: 41.667%; }
+
+  .col-lg-offset-6 {
+    margin-left: 50%; }
+
+  .col-lg-offset-7 {
+    margin-left: 58.333%; }
+
+  .col-lg-offset-8 {
+    margin-left: 66.667%; }
+
+  .col-lg-offset-9 {
+    margin-left: 75%; }
+
+  .col-lg-offset-10 {
+    margin-left: 83.333%; }
+
+  .col-lg-offset-11 {
+    margin-left: 91.667%; }
+
+  .start-lg {
+    -ms-flex-pack: start;
+    -webkit-box-pack: start;
+    justify-content: flex-start;
+    text-align: start; }
+
+  .center-lg {
+    -ms-flex-pack: center;
+    -webkit-box-pack: center;
+    justify-content: center;
+    text-align: center; }
+
+  .end-lg {
+    -ms-flex-pack: end;
+    -webkit-box-pack: end;
+    justify-content: flex-end;
+    text-align: end; }
+
+  .top-lg {
+    -ms-flex-align: start;
+    -webkit-box-align: start;
+    align-items: flex-start; }
+
+  .middle-lg {
+    -ms-flex-align: center;
+    -webkit-box-align: center;
+    align-items: center; }
+
+  .bottom-lg {
+    -ms-flex-align: end;
+    -webkit-box-align: end;
+    align-items: flex-end; }
+
+  .around-lg {
+    -ms-flex-pack: distribute;
+    justify-content: space-around; }
+
+  .between-lg {
+    -ms-flex-pack: justify;
+    -webkit-box-pack: justify;
+    justify-content: space-between; }
+
+  .first-lg {
+    -ms-flex-order: -1;
+    -webkit-box-ordinal-group: 0;
+    order: -1; }
+
+  .last-lg {
+    -ms-flex-order: 1;
+    -webkit-box-ordinal-group: 2;
+    order: 1; } }
+
+/*# sourceMappingURL=grid.css.map */

icon.css

@@ -0,0 +1,41 @@
+/* Global */
+/* Content Container */
+/* Content box */
+/* Navigation */
+/* Colors */
+/* Accordion */
+/* Log */
+/* Blockquote */
+/* Breadcrumbs */
+/* Input */
+/* Button */
+/* Canvas */
+/* Article */
+/* Form */
+/* Icon */
+/* Img */
+/* list */
+/* pagination */
+/* pre */
+/* tag */
+.infoIcon {
+  width: 0.9rem;
+  text-align: center;
+  vertical-align: middle;
+  position: relative;
+  cursor: pointer; }
+  .infoIcon span {
+    font-size: .55rem;
+    display: block;
+    position: absolute;
+    right: -.55rem;
+    top: -.45rem;
+    width: 0.9rem;
+    height: 0.9rem;
+    line-height: 0.9rem;
+    border-radius: 50%;
+    text-align: center;
+    color: #fff;
+    background: #d16059; }
+
+/*# sourceMappingURL=icon.css.map */

image.css

@@ -0,0 +1,121 @@
+/* Global */
+/* Content Container */
+/* Content box */
+/* Navigation */
+/* Colors */
+/* Accordion */
+/* Log */
+/* Blockquote */
+/* Breadcrumbs */
+/* Input */
+/* Button */
+/* Canvas */
+/* Article */
+/* Form */
+/* Icon */
+/* Img */
+/* list */
+/* pagination */
+/* pre */
+/* tag */
+img.frame-1 {
+  padding: 5px;
+  background: #fff;
+  border: 1px solid #d6d6d6;
+  -moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
+  -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
+  box-shadow: inset 1px 1px 0px 0px #ffffff;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  border-radius: 3px;
+  background-clip: padding-box;
+  box-sizing: border-box;
+  width: 100%; }
+img.frame-2 {
+  border: 1px solid #d6d6d6;
+  background: #fff;
+  box-sizing: border-box;
+  width: 100%; }
+img.frame-3 {
+  padding: 5px;
+  background: #fff;
+  border: 1px solid #d6d6d6;
+  -moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
+  -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
+  box-shadow: inset 1px 1px 0px 0px #ffffff;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  border-radius: 3px;
+  background-clip: padding-box;
+  box-sizing: border-box;
+  width: 100%; }
+
+@keyframes slidy {
+  0% {
+    left: 0%; }
+  20% {
+    left: 0%; }
+  25% {
+    left: -100%; }
+  45% {
+    left: -100%; }
+  50% {
+    left: -200%; }
+  70% {
+    left: -200%; }
+  75% {
+    left: -300%; }
+  95% {
+    left: -300%; }
+  100% {
+    left: -400%; } }
+div.slider-1 {
+  overflow: hidden; }
+  div.slider-1 figure {
+    position: relative;
+    width: 500%;
+    margin: 0;
+    left: 0;
+    text-align: left;
+    font-size: 0;
+    animation: 30s slidy infinite; }
+    div.slider-1 figure img {
+      width: 20%;
+      float: left; }
+
+.slider-2 {
+  width: 100%;
+  position: relative;
+  padding-top: auto;
+  text-align: center; }
+  .slider-2 > img {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    transition: all 0.5s;
+    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75); }
+  .slider-2 input {
+    display: none; }
+    .slider-2 input:checked + label {
+      border-color: #666;
+      opacity: 1; }
+      .slider-2 input:checked + label + img {
+        opacity: 1;
+        transform: scale(1); }
+    .slider-2 input ~ img {
+      opacity: 0;
+      transform: scale(1.1); }
+  .slider-2 label {
+    display: inline-block;
+    margin-top: calc(50% + 15px);
+    margin-left: 15px;
+    border: 3px solid #999;
+    cursor: pointer;
+    opacity: 0.6; }
+    .slider-2 label img {
+      display: block; }
+
+/*# sourceMappingURL=image.css.map */

input.css

@@ -3,8 +3,23 @@
 /* Content box */
 /* Navigation */
 /* Colors */
+/* Accordion */
+/* Log */
+/* Blockquote */
+/* Breadcrumbs */
+/* Input */
+/* Button */
+/* Canvas */
+/* Article */
+/* Form */
+/* Icon */
+/* Img */
+/* list */
+/* pagination */
+/* pre */
+/* tag */
 input, select, textarea, .textarea {
-  border: 1px solid #b7b7b7; }
+  border: 1px solid #d6d6d6; }
 
 progress {
   height: 20px;
@@ -22,30 +37,61 @@ input[type="email"],
 input[type="date"],
 input[type="number"],
 input[type="datetime-local"] {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  color: #454545;
+  color: #000;
   background: #fff;
   width: 100%;
   height: 2rem;
   min-width: 70px;
   max-width: 100%;
   padding: 7px;
-  font-size: 0.9rem;
+  font-size: 1rem;
-  border: solid 1px #dcdcdc;
+  border: 1px solid #d6d6d6;
   transition: background 0.3s, border 0.3s;
   box-shadow: inset 1px 1px 4px -2px #c5c5c5; }
-  .textarea:focus,
+  .textarea:focus, .textarea .active,
   .tag-input:focus,
+  .tag-input .active,
   textarea:focus,
+  textarea .active,
   select:focus,
+  select .active,
   input[type="password"]:focus,
+  input[type="password"] .active,
   input[type="text"]:focus,
+  input[type="text"] .active,
   input[type="datetime"]:focus,
+  input[type="datetime"] .active,
   input[type="email"]:focus,
+  input[type="email"] .active,
   input[type="date"]:focus,
+  input[type="date"] .active,
   input[type="number"]:focus,
-  input[type="datetime-local"]:focus {
+  input[type="number"] .active,
-    border-color: #0c69d6; }
+  input[type="datetime-local"]:focus,
+  input[type="datetime-local"] .active {
+    border-color: #FBA026; }
+  .textarea:disabled,
+  .tag-input:disabled,
+  textarea:disabled,
+  select:disabled,
+  input[type="password"]:disabled,
+  input[type="text"]:disabled,
+  input[type="datetime"]:disabled,
+  input[type="email"]:disabled,
+  input[type="date"]:disabled,
+  input[type="number"]:disabled,
+  input[type="datetime-local"]:disabled {
+    background: #efefef; }
+
+input ~ .dropdown {
+  position: absolute;
+  display: none; }
+
+input:focus ~ .dropdown, input.active ~ .dropdown {
+  display: inline-block; }
 
 select {
   cursor: pointer;
@@ -56,19 +102,25 @@ option {
   line-height: 1rem; }
 
 input[type="file"] {
-  border: solid 1px #dcdcdc;
+  border: solid 1rem #fff;
   width: 100%;
   max-width: 100%;
-  color: #454545;
+  color: #000;
   padding: 10px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box; }
 
-input[placeholder], textarea {
+input::placeholder {
+  color: #cfcfcf;
+  opacity: 0.5; }
+
+input::placeholder, textarea {
   font-family: 'FontAwesome', serif; }
 
 input:invalid {
   transition: all 0.5s;
-  border: 1px solid #b85450; }
+  border-color: #b85450; }
 
 textarea, .textarea {
   overflow: auto;
@@ -114,9 +166,9 @@ input[type="range"] {
     height: 2rem;
     font-size: 1rem;
     min-width: 40px;
-    border-left: solid 1px #dcdcdc;
+    border-left: solid 1px #d6d6d6;
-    border-top: solid 1px #dcdcdc;
+    border-top: solid 1px #d6d6d6;
-    border-bottom: solid 1px #dcdcdc;
+    border-bottom: solid 1px #d6d6d6;
     border-right: none;
     padding: 0;
     position: relative;
@@ -132,29 +184,12 @@ input[type="range"] {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    font-size: 1em;
+    font-size: 1rem;
     position: relative;
     vertical-align: middle;
     flex-grow: 1;
     flex-shrink: 1; }
 
-.dropdown {
-  position: relative;
-  display: inline-block; }
-  .dropdown:hover .content {
-    display: block; }
-  .dropdown .content {
-    display: none;
-    position: absolute;
-    z-index: 2;
-    background: #fff; }
-    .dropdown .content input {
-      display: none; }
-    .dropdown .content label {
-      display: block;
-      margin: 5px;
-      padding: 5px; }
-
 select.plain {
   width: auto;
   margin: 0;

input.scss

@@ -34,8 +34,8 @@ input[type="datetime-local"] {
     transition: background 0.3s, border 0.3s;
     box-shadow: inset 1px 1px 4px -2px #c5c5c5;
 
-    &:focus {
+    &:focus, .active {
-        border-color:#0c69d6;
+        border-color: $default-highlighter;
     }
 
     &:disabled {
@@ -43,6 +43,15 @@ input[type="datetime-local"] {
     }
 }
 
+input ~ .dropdown {
+    position: absolute;
+    display: none;
+}
+
+input:focus ~ .dropdown, input.active ~ .dropdown {
+    display: inline-block;
+}
+
 select {
     cursor: pointer;
     padding: 0 7px 0 7px; /* overwrites input padding: 7px. don't know why i have to do this! */
@@ -122,9 +131,9 @@ input[type="range"] {
         height: 2rem;
         font-size: $input-font-size;
         min-width: 40px;
-        border-left: solid $input-font-size $input-background;
+        border-left: solid $input-border $input-border-color;
-        border-top: solid $input-font-size $input-background;
+        border-top: solid $input-border $input-border-color;
-        border-bottom: solid $input-font-size $input-background;
+        border-bottom: solid $input-border $input-border-color;
         border-right: none;
         padding: 0;
 

layout.css

@@ -0,0 +1,58 @@
+.ok {
+  color: #5cff56; }
+
+.warning {
+  color: #ff4b41; }
+
+.favorite {
+  color: #d16059; }
+
+.green {
+  background: #61BD6D; }
+
+.red {
+  background: #D14841; }
+
+.blue {
+  background: #2C82C9; }
+
+.orange {
+  background: #FBA026; }
+
+.lightblue {
+  background: #54ACD2; }
+
+.yellow {
+  background: #FAC51C; }
+
+.purple {
+  background: #553982; }
+
+.pink {
+  background: #ffa6e3; }
+
+.grey {
+  background: #dcdcdc; }
+
+.darkred {
+  background: #B8312F; }
+
+.darkgreen {
+  background: #41A85F; }
+
+.darkblue {
+  background: #2969B0; }
+
+.ipt-wrap {
+  display: table;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box; }
+  .ipt-wrap .ipt-first {
+    width: 100%;
+    display: table-cell; }
+  .ipt-wrap .ipt-second {
+    padding-left: 5px;
+    display: table-cell; }
+
+/*# sourceMappingURL=layout.css.map */

layout.scss

@@ -1,4 +1,4 @@
-@import "color";
+@import "_mixins", "color";
 
 .ipt-wrap {
     display: table;

link.css

@@ -0,0 +1,7 @@
+.unseen {
+  font-weight: bold; }
+
+[data-href] {
+  cursor: pointer; }
+
+/*# sourceMappingURL=link.css.map */

list.css

@@ -1,52 +1,23 @@
-.ok {
+/* Global */
-  color: #5cff56; }
+/* Content Container */
-
+/* Content box */
-.warning {
+/* Navigation */
-  color: #ff4b41; }
+/* Colors */
-
+/* Accordion */
-.green {
+/* Log */
-  background: #c0ffb4; }
+/* Blockquote */
-
+/* Breadcrumbs */
-.red {
+/* Input */
-  background: #ff7c70; }
+/* Button */
-
+/* Canvas */
-.blue {
+/* Article */
-  background: #c1c8ff; }
+/* Form */
-
+/* Icon */
-.orange {
+/* Img */
-  background: #ffbf7c; }
+/* list */
-
+/* pagination */
-.lightblue {
+/* pre */
-  background: #b5ffff; }
+/* tag */
-
-.yellow {
-  background: #fffe97; }
-
-.purple {
-  background: #bfa5ff; }
-
-.pink {
-  background: #ffa6e3; }
-
-.grey {
-  background: #dcdcdc; }
-
-.darkred {
-  background: #d16059; }
-
-.darkgreen {
-  background: #77d17c; }
-
-.darkblue {
-  background: #7ba9d1; }
-
-ul.default li {
-  margin: 5px 0 5px 0; }
-  ul.default li:first-child {
-    margin: 0 0 5px 0; }
-  ul.default li:last-child {
-    margin: 5px 0 0 0; }
-
 ul.boxed {
   background: #fff;
   padding: 5px;
@@ -55,14 +26,13 @@ ul.boxed {
   -ms-border-radius: 3px;
   border-radius: 3px;
   background-clip: padding-box;
-  border: 1px solid #b7b7b7; }
+  border: 1px solid #d6d6d6; }
-
+  ul.boxed li {
-ul.boxed li {
+    margin: 5px 0 5px 0; }
-  margin: 5px 0 5px 0; }
+    ul.boxed li:first-child {
-  ul.boxed li:first-child {
+      margin-top: 0; }
-    margin-top: 0; }
+    ul.boxed li:last-child {
-  ul.boxed li:last-child {
+      margin-bottom: 0; }
-    margin-bottom: 0; }
 
 ul.h-list li {
   display: inline-block;

main.css

@@ -0,0 +1,32 @@
+/* Global */
+/* Content Container */
+/* Content box */
+/* Navigation */
+/* Colors */
+/* Accordion */
+/* Log */
+/* Blockquote */
+/* Breadcrumbs */
+/* Input */
+/* Button */
+/* Canvas */
+/* Article */
+/* Form */
+/* Icon */
+/* Img */
+/* list */
+/* pagination */
+/* pre */
+/* tag */
+main {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  top: 0;
+  bottom: 100%;
+  left: 0;
+  z-index: 1;
+  background: #fff;
+  transition: all 0.2s; }
+
+/*# sourceMappingURL=main.css.map */

media.css

@@ -0,0 +1,3 @@
+
+
+/*# sourceMappingURL=media.css.map */

nav.css

@@ -3,6 +3,21 @@
 /* Content box */
 /* Navigation */
 /* Colors */
+/* Accordion */
+/* Log */
+/* Blockquote */
+/* Breadcrumbs */
+/* Input */
+/* Button */
+/* Canvas */
+/* Article */
+/* Form */
+/* Icon */
+/* Img */
+/* list */
+/* pagination */
+/* pre */
+/* tag */
 #nav-side {
   user-select: none;
   width: 175px;
@@ -14,7 +29,10 @@
   z-index: 0;
   overflow-y: auto;
   font-size: 0.8em;
-  background: #2F2F2F; }
+  background: #3b3b3b; }
+  #nav-side span {
+    width: 20px;
+    display: inline-block; }
   #nav-side input {
     display: none; }
     #nav-side input:checked + ul .max {
@@ -30,20 +48,21 @@
   #nav-side input + ul > li:nth-child(n+2) {
     display: none; }
   #nav-side > li li {
-    border-top: 1px solid #3f3f3f;
+    border-top: 1px solid #505050;
     border-bottom: 1px solid #252525;
     color: #fff; }
     #nav-side > li li:not(:first-child) {
-      background: #353535; }
+      background: #444; }
     #nav-side > li li:first-child {
-      border-bottom: 1px solid #1a1a1a; }
+      border-bottom: 1px solid #252525; }
     #nav-side > li li:first-child {
       padding: 7px 0 7px 7px; }
     #nav-side > li li a {
       display: block;
       padding: 7px 0 7px 7px; }
       #nav-side > li li a:hover {
-        background: #3F3F3F; }
+        color: #252525;
+        background: #FBA026; }
   #nav-side li:last-child li:last-child {
     border-bottom: none; }
   #nav-side .max, #nav-side .min {
@@ -78,20 +97,20 @@ label[for="nav-trigger"] {
   user-select: none;
   margin-top: 5px;
   display: block;
-  background: #ffffff;
+  background: #fff;
   border: 1px solid #b7b7b7;
-  -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
+  -moz-box-shadow: inset 0px 1px 0px 0px #fff;
-  -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
+  -webkit-box-shadow: inset 0px 1px 0px 0px #fff;
-  box-shadow: inset 0px 1px 0px 0px #ffffff; }
+  box-shadow: inset 0px 1px 0px 0px #fff; }
   .nav-top > li {
-    -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
+    -moz-box-shadow: inset 0px 1px 0px 0px #fff;
-    -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
+    -webkit-box-shadow: inset 0px 1px 0px 0px #fff;
-    box-shadow: inset 0px 1px 0px 0px #ffffff;
+    box-shadow: inset 0px 1px 0px 0px #fff;
-    text-shadow: 1px 1px 1px #ffffff; }
+    text-shadow: 1px 1px 1px #fff; }
     .nav-top > li:first-child {
-      -moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
+      -moz-box-shadow: inset 1px 1px 0px 0px #fff;
-      -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
+      -webkit-box-shadow: inset 1px 1px 0px 0px #fff;
-      box-shadow: inset 1px 1px 0px 0px #ffffff; }
+      box-shadow: inset 1px 1px 0px 0px #fff; }
 
 .nav-top li {
   background: #fff;

nav.scss

@@ -11,7 +11,7 @@
     z-index: 0;
     overflow-y: auto;
     font-size: 0.8em;
-    background: #2F2F2F;
+    background: #3b3b3b;
 
     span {
          width: 20px;
@@ -52,16 +52,16 @@
 
     > li {
         li {
-            border-top: 1px solid #3f3f3f;
+            border-top: 1px solid #505050;
             border-bottom: 1px solid #252525;
             color: #fff;
 
             &:not(:first-child) {
-                background: #353535;
+                background: #444;
             }
 
             &:first-child {
-                border-bottom: 1px solid #1a1a1a;
+                border-bottom: 1px solid #252525;
             }
 
             &:first-child {
@@ -73,7 +73,8 @@
                 padding: 7px 0 7px 7px;
 
                 &:hover {
-                    background: #3F3F3F;
+                    color: #252525;
+                    background: $default-highlighter;
                 }
             }
         }
@@ -131,17 +132,17 @@ label[for="nav-trigger"] {
     user-select: none;
     margin-top: 5px;
     display: block;
-    background: #ffffff;
+    background: #fff;
     border: 1px solid $content-border-color;
 
-    @include box-shadow-top(#ffffff);
+    @include box-shadow-top(#fff);
 
     > li {
-        @include box-shadow-top(#ffffff);
+        @include box-shadow-top(#fff);
-        text-shadow: 1px 1px 1px #ffffff;
+        text-shadow: 1px 1px 1px #fff;
 
         &:first-child {
-            @include box-shadow-out(#ffffff);
+            @include box-shadow-out(#fff);
         }
     }
 }

note.css

@@ -0,0 +1,3 @@
+
+
+/*# sourceMappingURL=note.css.map */

pagination.css

@@ -0,0 +1,41 @@
+/* Global */
+/* Content Container */
+/* Content box */
+/* Navigation */
+/* Colors */
+/* Accordion */
+/* Log */
+/* Blockquote */
+/* Breadcrumbs */
+/* Input */
+/* Button */
+/* Canvas */
+/* Article */
+/* Form */
+/* Icon */
+/* Img */
+/* list */
+/* pagination */
+/* pre */
+/* tag */
+.pagination li {
+  display: inline; }
+.pagination a {
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  border-radius: 3px;
+  background-clip: padding-box;
+  -moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
+  -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
+  box-shadow: inset 1px 1px 0px 0px #ffffff;
+  background: #f5f5ff;
+  padding: 5px 10px 5px 10px; }
+.pagination .active, .pagination a:hover, .pagination a:active {
+  color: #fff;
+  background: #353535;
+  -moz-box-shadow: inset 1px 1px 0px 0px #e8e8e8;
+  -webkit-box-shadow: inset 1px 1px 0px 0px #e8e8e8;
+  box-shadow: inset 1px 1px 0px 0px #e8e8e8; }
+
+/*# sourceMappingURL=pagination.css.map */

popup.css

@@ -0,0 +1,3 @@
+
+
+/*# sourceMappingURL=popup.css.map */

progress.css

@@ -0,0 +1,181 @@
+/* Global */
+/* Content Container */
+/* Content box */
+/* Navigation */
+/* Colors */
+/* Accordion */
+/* Log */
+/* Blockquote */
+/* Breadcrumbs */
+/* Input */
+/* Button */
+/* Canvas */
+/* Article */
+/* Form */
+/* Icon */
+/* Img */
+/* list */
+/* pagination */
+/* pre */
+/* tag */
+.meter {
+  height: 20px;
+  /* Can be anything */
+  position: relative;
+  background: none !important; }
+  .meter > span {
+    display: block;
+    height: 100%;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    -ms-border-radius: 3px;
+    border-radius: 3px;
+    background-clip: padding-box;
+    background-color: #2bc253;
+    background-image: linear-gradient(to left top, color-stop(0, #2bc253), color-stop(1, #54f054));
+    position: relative;
+    overflow: hidden; }
+
+.meter > span:after, .animate > span > span {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));
+  background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
+  z-index: 1;
+  -webkit-background-size: 50px 50px;
+  -moz-background-size: 50px 50px;
+  -webkit-animation: move 4s linear infinite;
+  overflow: hidden; }
+
+.animate > span:after {
+  display: none; }
+
+@-webkit-keyframes move {
+  0% {
+    background-position: 0 0; }
+  100% {
+    background-position: 50px 50px; } }
+.orange > span {
+  background-color: #f1a165;
+  background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1a165), color-stop(1, #f36d0a));
+  background-image: -webkit-linear-gradient(#f1a165, #f36d0a); }
+
+.blue > span {
+  background-color: #96c2f1;
+  background-image: -moz-linear-gradient(top, #96c2f1, #4394f3);
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #96c2f1), color-stop(1, #4394f3));
+  background-image: -webkit-linear-gradient(#96c2f1, #4394f3); }
+
+.red > span {
+  background-color: #f0a3a3;
+  background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0a3a3), color-stop(1, #f42323));
+  background-image: -webkit-linear-gradient(#f0a3a3, #f42323); }
+
+.nostripes > span > span, .nostripes > span:after {
+  -webkit-animation: none;
+  background-image: none; }
+
+.timeline {
+  list-style: none;
+  margin: 0 0 30px 120px;
+  padding-left: 30px;
+  border-left: 3px solid #eaeaea; }
+  .timeline li {
+    margin: 0;
+    position: relative; }
+  .timeline p {
+    margin: 0 0 15px; }
+
+.timeline-date {
+  margin-top: -18px;
+  top: 50%;
+  left: -150px;
+  font-size: 0.95em;
+  line-height: 20px;
+  position: absolute;
+  padding: 5px 10px 5px 10px;
+  border: 1px solid #ccc; }
+
+.timeline-circle {
+  margin-top: -10px;
+  top: 50%;
+  left: -40px;
+  width: 10px;
+  height: 10px;
+  background: tomato;
+  border: 3px solid #eaeaea;
+  border-radius: 50%;
+  display: block;
+  position: absolute; }
+
+.timeline-circle-start {
+  margin-top: 0;
+  top: 0;
+  left: -45px;
+  width: 20px;
+  height: 20px;
+  background: #fff;
+  border: 3px solid #eaeaea;
+  border-radius: 50%;
+  display: block;
+  position: absolute; }
+
+.timeline-circle-end {
+  margin-top: 0;
+  top: 100%;
+  left: -45px;
+  width: 20px;
+  height: 20px;
+  background: #fff;
+  border: 3px solid #eaeaea;
+  border-radius: 50%;
+  display: block;
+  position: absolute; }
+
+.timeline-content {
+  padding: 50px 20px 0;
+  border-radius: 0.5em;
+  position: relative; }
+
+.timeline-content p {
+  text-align: justify; }
+
+.timeline label {
+  font-size: 1.3em;
+  position: absolute;
+  z-index: 100;
+  top: 20px; }
+
+.timeline-radio {
+  display: none; }
+
+.timeline-break {
+  display: none; }
+
+.progress-radial {
+  float: left;
+  margin-right: 20px;
+  position: relative;
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  background-color: tomato; }
+  .progress-radial .overlay {
+    position: absolute;
+    width: 60px;
+    height: 60px;
+    background-color: #fff;
+    border-radius: 50%;
+    margin-left: 5px;
+    margin-top: 5px;
+    text-align: center;
+    line-height: 60px;
+    font-size: 9px; }
+
+/*# sourceMappingURL=progress.css.map */

section.css

@@ -3,6 +3,21 @@
 /* Content box */
 /* Navigation */
 /* Colors */
+/* Accordion */
+/* Log */
+/* Blockquote */
+/* Breadcrumbs */
+/* Input */
+/* Button */
+/* Canvas */
+/* Article */
+/* Form */
+/* Icon */
+/* Img */
+/* list */
+/* pagination */
+/* pre */
+/* tag */
 .box {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -26,7 +41,7 @@ section.box {
   -moz-box-shadow: 0px 1px 0px 0px #f1f1f1;
   -webkit-box-shadow: 0px 1px 0px 0px #f1f1f1;
   box-shadow: 0px 1px 0px 0px #f1f1f1;
-  border: 1px solid #b7b7b7;
+  border: 1px solid #d6d6d6;
   background: #fff; }
   section.box.orange {
     border-top: 3px solid #FBA026; }
@@ -40,6 +55,8 @@ section.box {
     border-top: 3px solid #553982; }
   section.box.darkblue {
     border-top: 3px solid #2969B0; }
+  section.box.purple {
+    border-top: 3px solid #553982; }
 
 section header > h1 {
   margin: 10px 10px 0 10px;

section.scss

@@ -26,7 +26,6 @@ section.box {
         'orange' #FBA026, 'red' #B8312F, 'green' #41A85F,
         'blue' #2C82C9, 'purple' #553982, 'darkblue' #2969B0, 'purple' #553982 {
         &.#{nth($tuple, 1)} {
-            background: #{nth($tuple, 2)};
             border-top: 3px solid #{nth($tuple, 2)};
         }
     }

size.css

@@ -0,0 +1,32 @@
+.wf-100 {
+  width: 100%; }
+
+.wf-80 {
+  width: 80%; }
+
+.wf-20 {
+  width: 20%; }
+
+.wf-66 {
+  width: 66.66%; }
+
+.wf-50 {
+  width: 50%; }
+
+.wf-33 {
+  width: 33.33%; }
+
+.wf-25 {
+  width: 25%; }
+
+.wf-75 {
+  width: 75%; }
+
+.spacer {
+  padding: 5px; }
+
+.resizable {
+  resize: both;
+  overflow: auto; }
+
+/*# sourceMappingURL=size.css.map */

slider.css

@@ -0,0 +1,7 @@
+.slider {
+  overflow-x: auto;
+  white-space: nowrap; }
+  .slider ul {
+    display: inline; }
+
+/*# sourceMappingURL=slider.css.map */

spinner.css

@@ -0,0 +1,215 @@
+.spinner-1 {
+  width: 40px;
+  height: 40px;
+  background-color: #333;
+  margin: 50px auto;
+  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
+  animation: sk-rotateplane 1.2s infinite ease-in-out; }
+
+@-webkit-keyframes sk-rotateplane {
+  0% {
+    -webkit-transform: perspective(120px); }
+  50% {
+    -webkit-transform: perspective(120px) rotateY(180deg); }
+  100% {
+    -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); } }
+@keyframes sk-rotateplane {
+  0% {
+    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
+  50% {
+    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
+  100% {
+    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }
+.spinner-2 {
+  text-align: center; }
+
+.spinner-2 > div {
+  width: 18px;
+  height: 18px;
+  background-color: #333;
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  animation: sk-bouncedelay 1.4s infinite ease-in-out both; }
+
+.spinner-2 .bounce1 {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s; }
+
+.spinner-2 .bounce2 {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s; }
+
+@-webkit-keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0); }
+  40% {
+    -webkit-transform: scale(1); } }
+@keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0);
+    transform: scale(0); }
+  40% {
+    -webkit-transform: scale(1);
+    transform: scale(1); } }
+.spinner-3 {
+  margin: 50px auto;
+  width: 40px;
+  height: 40px;
+  position: relative; }
+
+.spinner-3 .sk-circle {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0; }
+
+.spinner-3 .sk-circle:before {
+  content: '';
+  display: block;
+  margin: 0 auto;
+  width: 15%;
+  height: 15%;
+  background-color: #333;
+  border-radius: 100%;
+  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; }
+
+.spinner-3 .sk-circle2 {
+  -webkit-transform: rotate(30deg);
+  -ms-transform: rotate(30deg);
+  transform: rotate(30deg); }
+
+.spinner-3 .sk-circle3 {
+  -webkit-transform: rotate(60deg);
+  -ms-transform: rotate(60deg);
+  transform: rotate(60deg); }
+
+.spinner-3 .sk-circle4 {
+  -webkit-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg); }
+
+.spinner-3 .sk-circle5 {
+  -webkit-transform: rotate(120deg);
+  -ms-transform: rotate(120deg);
+  transform: rotate(120deg); }
+
+.spinner-3 .sk-circle6 {
+  -webkit-transform: rotate(150deg);
+  -ms-transform: rotate(150deg);
+  transform: rotate(150deg); }
+
+.spinner-3 .sk-circle7 {
+  -webkit-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg); }
+
+.spinner-3 .sk-circle8 {
+  -webkit-transform: rotate(210deg);
+  -ms-transform: rotate(210deg);
+  transform: rotate(210deg); }
+
+.spinner-3 .sk-circle9 {
+  -webkit-transform: rotate(240deg);
+  -ms-transform: rotate(240deg);
+  transform: rotate(240deg); }
+
+.spinner-3 .sk-circle10 {
+  -webkit-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  transform: rotate(270deg); }
+
+.spinner-3 .sk-circle11 {
+  -webkit-transform: rotate(300deg);
+  -ms-transform: rotate(300deg);
+  transform: rotate(300deg); }
+
+.spinner-3 .sk-circle12 {
+  -webkit-transform: rotate(330deg);
+  -ms-transform: rotate(330deg);
+  transform: rotate(330deg); }
+
+.spinner-3 .sk-circle2:before {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s; }
+
+.spinner-3 .sk-circle3:before {
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s; }
+
+.spinner-3 .sk-circle4:before {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s; }
+
+.spinner-3 .sk-circle5:before {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s; }
+
+.spinner-3 .sk-circle6:before {
+  -webkit-animation-delay: -0.7s;
+  animation-delay: -0.7s; }
+
+.spinner-3 .sk-circle7:before {
+  -webkit-animation-delay: -0.6s;
+  animation-delay: -0.6s; }
+
+.spinner-3 .sk-circle8:before {
+  -webkit-animation-delay: -0.5s;
+  animation-delay: -0.5s; }
+
+.spinner-3 .sk-circle9:before {
+  -webkit-animation-delay: -0.4s;
+  animation-delay: -0.4s; }
+
+.spinner-3 .sk-circle10:before {
+  -webkit-animation-delay: -0.3s;
+  animation-delay: -0.3s; }
+
+.spinner-3 .sk-circle11:before {
+  -webkit-animation-delay: -0.2s;
+  animation-delay: -0.2s; }
+
+.spinner-3 .sk-circle12:before {
+  -webkit-animation-delay: -0.1s;
+  animation-delay: -0.1s; }
+
+@-webkit-keyframes sk-circleFadeDelay {
+  0%, 39%, 100% {
+    opacity: 0; }
+  40% {
+    opacity: 1; } }
+@keyframes sk-circleFadeDelay {
+  0%, 39%, 100% {
+    opacity: 0; }
+  40% {
+    opacity: 1; } }
+.spinner-4 {
+  width: 40px;
+  height: 40px;
+  margin: 50px auto;
+  background-color: #333;
+  border-radius: 100%;
+  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
+  animation: sk-scaleout 1.0s infinite ease-in-out; }
+
+@-webkit-keyframes sk-scaleout {
+  0% {
+    -webkit-transform: scale(0); }
+  100% {
+    -webkit-transform: scale(1);
+    opacity: 0; } }
+@keyframes sk-scaleout {
+  0% {
+    -webkit-transform: scale(0);
+    transform: scale(0); }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 0; } }
+
+/*# sourceMappingURL=spinner.css.map */

tab.css

@@ -1,45 +1,23 @@
-.ok {
+/* Global */
-  color: #5cff56; }
+/* Content Container */
-
+/* Content box */
-.warning {
+/* Navigation */
-  color: #ff4b41; }
+/* Colors */
-
+/* Accordion */
-.green {
+/* Log */
-  background: #c0ffb4; }
+/* Blockquote */
-
+/* Breadcrumbs */
-.red {
+/* Input */
-  background: #ff7c70; }
+/* Button */
-
+/* Canvas */
-.blue {
+/* Article */
-  background: #c1c8ff; }
+/* Form */
-
+/* Icon */
-.orange {
+/* Img */
-  background: #ffbf7c; }
+/* list */
-
+/* pagination */
-.lightblue {
+/* pre */
-  background: #b5ffff; }
+/* tag */
-
-.yellow {
-  background: #fffe97; }
-
-.purple {
-  background: #bfa5ff; }
-
-.pink {
-  background: #ffa6e3; }
-
-.grey {
-  background: #dcdcdc; }
-
-.darkred {
-  background: #d16059; }
-
-.darkgreen {
-  background: #77d17c; }
-
-.darkblue {
-  background: #7ba9d1; }
-
 .tabular {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -48,26 +26,21 @@
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    padding: 5px 0 4px 0; }
+    padding: 0.3rem 0 0 0.3rem; }
   .tabular .tab-links label {
     -moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
     -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
     box-shadow: inset 1px 1px 0px 0px #ffffff;
-    -webkit-border-top-right-radius: 3px;
-    border-top-right-radius: 3px;
-    -webkit-border-top-left-radius: 3px;
-    border-top-left-radius: 3px;
-    background-clip: padding-box;
     border-top: 1px solid #b7b7b7;
     border-left: 1px solid #b7b7b7;
     border-right: 1px solid #b7b7b7;
     background: #f5f5ff;
-    background: -moz-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
+    background: -moz-linear-gradient(top, #e0e3eb 0, #ffffff 100);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e0e3eb), color-stop(100, #f5f5ff));
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e0e3eb), color-stop(100, #ffffff));
-    background: -webkit-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
+    background: -webkit-linear-gradient(top, #e0e3eb 0, #ffffff 100);
-    background: -o-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
+    background: -o-linear-gradient(top, #e0e3eb 0, #ffffff 100);
-    background: -ms-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
+    background: -ms-linear-gradient(top, #e0e3eb 0, #ffffff 100);
-    background: linear-gradient(to bottom, #e0e3eb 0, #f5f5ff 100);
+    background: linear-gradient(to bottom, #e0e3eb 0, #ffffff 100);
     padding: 5px 10px 5px 10px;
     text-shadow: 1px 1px 1px #ffffff;
     font-size: 0.9em;
@@ -89,19 +62,10 @@
     display: inline-block;
     margin: 0 5px 0 0; }
   .tabular .tab-content {
-    -webkit-border-bottom-left-radius: 3px;
-    border-bottom-left-radius: 3px;
-    background-clip: padding-box;
-    -webkit-border-bottom-right-radius: 3px;
-    border-bottom-right-radius: 3px;
-    background-clip: padding-box;
-    -webkit-border-top-right-radius: 3px;
-    border-top-right-radius: 3px;
-    background-clip: padding-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    background: #f5f5ff;
+    background: #ffffff;
     border: 1px solid #b7b7b7;
     padding: 10px; }
     .tabular .tab-content > input {
@@ -112,24 +76,19 @@
       display: inherit; }
 
 .tabular-2 .tab-links {
-  padding: 5px 0 0 0; }
+  padding: 0.3rem 0 0 0.3rem; }
 .tabular-2 .tab-links label {
   -moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
   -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
   box-shadow: inset 1px 1px 0px 0px #ffffff;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -ms-border-radius: 3px;
-  border-radius: 3px;
-  background-clip: padding-box;
   border: 1px solid #b7b7b7;
   background: #f5f5ff;
-  background: -moz-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
+  background: -moz-linear-gradient(top, #e0e3eb 0, #ffffff 100);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e0e3eb), color-stop(100, #f5f5ff));
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e0e3eb), color-stop(100, #ffffff));
-  background: -webkit-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
+  background: -webkit-linear-gradient(top, #e0e3eb 0, #ffffff 100);
-  background: -o-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
+  background: -o-linear-gradient(top, #e0e3eb 0, #ffffff 100);
-  background: -ms-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
+  background: -ms-linear-gradient(top, #e0e3eb 0, #ffffff 100);
-  background: linear-gradient(to bottom, #e0e3eb 0, #f5f5ff 100);
+  background: linear-gradient(to bottom, #e0e3eb 0, #ffffff 100);
   padding: 5px 10px 5px 10px;
   text-shadow: 1px 1px 1px #ffffff;
   font-size: 0.9em;

table.css

@@ -3,22 +3,50 @@
 /* Content box */
 /* Navigation */
 /* Colors */
+/* Accordion */
+/* Log */
+/* Blockquote */
+/* Breadcrumbs */
+/* Input */
+/* Button */
+/* Canvas */
+/* Article */
+/* Form */
+/* Icon */
+/* Img */
+/* list */
+/* pagination */
+/* pre */
+/* tag */
+table:not([id]) > thead .sort-asc, table:not([id]) > thead .sort-desc {
+  display: none; }
+
+table .sort-asc, table .sort-desc {
+  padding-left: 5px;
+  cursor: pointer; }
+
 .table {
   background: none; }
   .table caption {
     color: #fff; }
   .table thead {
     color: #fff; }
-  .table.red caption, .table.red thead {
-    background: #B8312F; }
   .table.orange caption, .table.orange thead {
     background: #FBA026; }
+  .table.red caption, .table.red thead {
+    background: #B8312F; }
   .table.green caption, .table.green thead {
     background: #41A85F; }
-  .table.blue caption, .table.blue thead {
-    background: #2C82C9; }
   .table.white caption, .table.white thead {
     background: #fff; }
+  .table.blue caption, .table.blue thead {
+    background: #2C82C9; }
+  .table.purple caption, .table.purple thead {
+    background: #553982; }
+  .table.darkblue caption, .table.darkblue thead {
+    background: #2969B0; }
+  .table.purple caption, .table.purple thead {
+    background: #553982; }
 
 table.table {
   -moz-box-sizing: border-box;