Init

accordion.scss

@@ -0,0 +1,54 @@
+@import "mixin", "color";
+
+.ac-container{
+    width: 100%;
+    margin: 10px auto 30px auto;
+    text-align: left;
+}
+
+.ac-container > input {
+    display: none;
+}
+
+.ac-container > label {
+    display: block;
+    padding: 5px 20px;
+    position: relative;
+    z-index: 20;
+    margin-top: -1px;
+    cursor: pointer;
+    color: #777;
+    font-size: 1em;
+    border: 1px solid $content-border-color;
+    @include border-radius(3px);
+    @include gradient-top-bottom(#e0e3eb, 0, $content-background-color, 100, $content-background-color);
+}
+
+.ac-container > label:hover {
+    @include gradient-top-bottom(#ffffff, 0, $content-background-color, 100, #ffffff);
+}
+
+.ac-container > input:checked + label {
+    @include gradient-top-bottom(#ffffff, 0, $content-background-color, 100, #ffffff);
+    color: #000;
+}
+
+.ac-container > section {
+    background: $content-background-color;
+    overflow: hidden;
+    height: auto;
+    position: relative;
+    z-index: 10;
+    border-left: 1px solid $content-border-color;
+    border-right: 1px solid $content-border-color;
+    padding: 10px;
+}
+
+.ac-container > input + label + section {
+    display: none;
+}
+
+
+.ac-container > input:checked + label + section {
+    display: inherit;
+}

alert.scss

@@ -0,0 +1,32 @@
+div.alert {
+    padding: 10px;
+    font-weight: bold;
+
+    i {
+        margin-right: 5px;
+    }
+}
+
+.alertbox.ok, .alert.ok {
+    background: #aaffad;
+    border: 2px solid #81e27d;
+    color: #459442;
+}
+
+.alertbox.warning, .alert.warning {
+    background: #f8ffa8;
+    border: 2px solid #d6d949;
+    color: #94972f;
+}
+
+.alertbox.error, .alert.error{
+    background: #ff7d79;
+    border: 2px solid #ee5649;
+    color: #a5302a;
+}
+
+.alertbox.info, .alert.info{
+    background: #b6d2ff;
+    border: 2px solid #85b0ee;
+    color: #4865a5;
+}

alignment.scss

@@ -0,0 +1,20 @@
+.center {
+    margin: 0 auto;
+}
+
+.centerText {
+    text-align: center;
+}
+
+.rightText {
+    text-align: right;
+}
+
+.floatLeft {
+    float: left;
+}
+
+.floatRight {
+    float: right;
+}
+

blockquote.scss

@@ -0,0 +1,9 @@
+@import "mixin", "color";
+
+blockquote {
+    border: 1px solid $content-borderlight-color;
+    background: #ffffff;
+    padding: 10px;
+    @include box-sizing(border-box);
+    @include border-radius(3px);
+}

breadcrumb.scss

@@ -0,0 +1,69 @@
+@import "mixin", "color";
+
+.crumbs-1 {
+    list-style: none;
+    overflow: hidden;
+    font-size: 12px;
+}
+
+.crumbs-1 li {
+    background: $content-background-color;
+    border: 1px solid $content-border-color;
+    padding: 10px 10px 10px 20px;
+    position: relative;
+    display: block;
+    float: left;
+    text-shadow: -1px -1px 1px #ffffff;
+    cursor: pointer;
+
+    @include box-shadow-out(#ffffff);
+
+    &:first-child {
+        @include border-left-radius(3px);
+    }
+}
+
+.crumbs-1 .last {
+    padding-right: 20px;
+    @include border-right-radius(3px);
+}
+
+.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 $content-background-color;
+    position: absolute;
+    top: 50%;
+    margin-top: -18px;
+    left: 100%;
+}
+
+.crumbs-1 .last:before {
+    border: none;
+}
+
+.crumbs-1 li:not(.last):after {
+    z-index: 2;
+}
+
+.crumbs-1 li:before {
+    border-left-color: $content-border-color;
+    margin-left: 1px;
+    z-index: 1;
+}
+
+.crumbs-1 .active, .crumbs-1 li:hover {
+    background: #ffffff;
+}
+
+.crumbs-1 .active {
+    cursor: default;
+}
+
+.crumbs-1 li.active:not(.last):after, .crumbs-1 li:hover:not(.last):after  {
+    border-left: 14px solid #ffffff;
+}

button.scss

@@ -0,0 +1,103 @@
+@import "mixin", "color";
+
+.btn {
+    cursor: pointer;
+}
+
+button, input[type="submit"], input[type="button"] {
+    @include border-radius(3px);
+    border: 1px solid $content-border-color;
+    cursor: pointer;
+    padding: 6px;
+    text-shadow: 1px 1px 1px #ffffff;
+    min-width: 70px;
+    @include gradient-top-bottom(#f1f1f1, 0, #d1d1d1, 100, #d9d9d9);
+    @include box-shadow-out(#ffffff);
+
+    &:hover, :active {
+        text-shadow: -1px -1px 1px #ffffff;
+        @include gradient-top-bottom(#d6d6d6, 0, #ededed, 100, #d9d9d9);
+    }
+}
+
+@mixin color-button($color1, $color2, $fallback, $shadow) {
+    color: #ffffff;
+    text-shadow: 1px 1px 1px #696969;
+    @include gradient-top-bottom($color1, 0, $color2, 100, $fallback);
+    @include box-shadow-out($shadow);
+
+    &:hover, :active {
+        text-shadow: -1px -1px 1px #696969;
+        @include gradient-top-bottom($color2, 0, $color1, 100, $fallback);
+    }
+}
+
+button.red {
+    @include color-button(#f17068, #d16059, #d9645b, #ff8d7c);
+}
+
+button.green {
+    @include color-button(#9df1ad, #77d17c, #90d99d, #c8ffb6);
+}
+
+button.blue {
+    @include color-button(#beddf1, #7ba9d1, #97afd9, #cbf3ff);
+}
+
+ul.btns {
+    list-style: none;
+    overflow: hidden;
+    font-size: 12px;
+}
+
+ul.btns li {
+    background: $content-background-color;
+    border-left: 1px solid $content-border-color;
+    border-top: 1px solid $content-border-color;
+    border-bottom: 1px solid $content-border-color;
+    float: left;
+    text-shadow: -1px -1px 1px #ffffff;
+    cursor: pointer;
+
+    @include box-shadow-out(#ffffff);
+
+    &:first-child {
+        @include border-left-radius(3px);
+    }
+
+    &:last-child {
+        @include border-right-radius(3px);
+        border-right: 1px solid $content-border-color;
+    }
+}
+
+ul.btns a {
+    display: block;
+    padding: 10px;
+}
+
+ul.btns li:before {
+    border-left-color: $content-border-color;
+    margin-left: 1px;
+}
+
+ul.btns .active, ul.btns li:hover {
+    background: #ffffff;
+}
+
+ul.btns .active {
+    cursor: default;
+}
+
+button.simple {
+    @include border-radius(3px);
+    background: $content-background-color;
+    border: 1px solid $content-border-color;
+    text-shadow: -1px -1px 1px #ffffff;
+    padding: 5px;
+    min-width: 40px;
+
+    &:hover {
+        background: #ffffff;
+    }
+}

chart/chart.scss

@@ -0,0 +1,12 @@
+.axis path,
+.axis line {
+    fill: none;
+    stroke: #000;
+    shape-rendering: crispEdges;
+}
+
+.line {
+    fill: none;
+    stroke: steelblue;
+    stroke-width: 1.5px;
+}

chart/chart_area.scss

@@ -0,0 +1 @@
+

chart/chart_bar.scss

@@ -0,0 +1 @@
+

chart/chart_line.scss

@@ -0,0 +1 @@
+

chart/chart_map.scss

@@ -0,0 +1 @@
+

chart/chart_pie.scss

@@ -0,0 +1 @@
+

chart/chart_radar.scss

@@ -0,0 +1 @@
+

clean.scss

@@ -0,0 +1,49 @@
+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 {
+    box-sizing: border-box;
+    appearance: none;
+    box-shadow: none;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+input[type=checkbox] {
+    margin-right: 5px;
+}
+
+button, input[type=submit], input[type=button] {
+    &::-moz-focus-inner {
+        border: 0;
+    }
+}
+
+table {
+    border-collapse: separate;
+    border-spacing: 0;
+}
+i {
+    font-style: normal;
+}

color.scss

@@ -0,0 +1,61 @@
+$content-border-color: #b7b7b7;
+$content-borderlight-color: #dddddd;
+$background-color: #e7ebf3;
+$content-background-color: #f5f5ff;
+
+.ok {
+    color: #5cff56;
+}
+
+.warning {
+    color: #ff4b41;
+}
+
+.green {
+    background: #c0ffb4;
+}
+
+.red {
+    background: #ff7c70;
+}
+
+.blue {
+    background: #c1c8ff;
+}
+
+.orange {
+    background: #ffbf7c;
+}
+
+
+.lightblue {
+    background: #b5ffff;
+}
+
+.yellow {
+    background: #fffe97;
+}
+
+.purple {
+    background: #bfa5ff;
+}
+
+.pink {
+    background: #ffa6e3;
+}
+
+.grey {
+    background: #dcdcdc;
+}
+
+.darkred {
+    background: #d16059;
+}
+
+.darkgreen {
+    background: #77d17c;
+}
+
+.darkblue {
+    background: #7ba9d1;
+}

default.scss

@@ -0,0 +1,18 @@
+@import "mixin", "color";
+
+body {
+    background: $background-color;
+    font-family: Open Sans, sans-serif;
+    font-size: 0.9em;
+}
+
+.clear {
+    clear: both;
+}
+
+pre {
+    background: #fff;
+    @include border-radius(3px);
+    border: 1px solid $content-border-color;
+    padding: 5px;
+}

form.scss

@@ -0,0 +1,48 @@
+@import "mixin", "color";
+
+form li {
+    margin: 5px 0 5px 0;
+}
+
+form td {
+    white-space: nowrap;
+    padding-bottom: 5px;
+}
+
+form td textarea+i {
+    vertical-align: top;
+}
+
+form label {
+    font-size: 0.9em;
+    color: #878787;
+    text-shadow: -1px -1px 1px #ffffff;
+}
+
+form i+i {
+    margin-left: 3px;
+}
+
+form .inputPrefix {
+    border-left: 1px solid $content-border-color;
+    border-top: 1px solid $content-border-color;
+    border-bottom: 1px solid $content-border-color;
+    line-height: 2em;
+    height: 100%;
+    background: #bebebe;
+}
+
+form .layout {
+    td+td {
+        padding-left: 5px;
+    }
+}
+
+form .list {
+    font-size: 0.9em;
+
+    td {
+        white-space: nowrap;
+        padding: 3px 5px 3px 5px;
+    }
+}

icon.scss

@@ -0,0 +1,24 @@
+.infoIcon {
+    width: 24px;
+    text-align: center;
+    vertical-align: middle;
+    position: relative;
+    cursor: pointer;
+
+    span {
+        font-size: .35em;
+        display: block;
+        position: absolute;
+        right: -.75em;
+        top: -.75em;
+        width: 2.3em;
+        height: 2.2em;
+        line-height: 2.5em;
+        border-radius: 50%;
+        text-align: center;
+
+        color: #fff;
+        background: rgba(209, 96, 89, 1);
+    }
+}
+

image.scss

@@ -0,0 +1,94 @@
+@import "mixin", "color";
+
+img.frame-1 {
+    padding: 5px;
+    background: $content-background-color;
+    border: 1px solid $content-border-color;
+    @include box-shadow-out(#ffffff);
+    @include border-radius(3px);
+}
+
+img.frame-2 {
+    border: 1px solid $content-border-color;
+    background: $content-background-color;
+}
+
+img.frame-3 {
+    padding: 5px;
+    background: #ffffff;
+    border: 1px solid $content-border-color;
+    @include box-shadow-out(#ffffff);
+    @include border-radius(3px);
+}
+
+@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 img { width: 20%; float: left; }
+div.slider-1 figure {
+    position: relative;
+    width: 500%;
+    margin: 0;
+    left: 0;
+    text-align: left;
+    font-size: 0;
+    animation: 30s slidy infinite;
+}
+
+.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 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;
+}
+
+
+.slider-2 input:checked+label {
+    border-color: #666;
+    opacity: 1;
+}
+
+.slider-2 input ~ img {
+    opacity: 0;
+    transform: scale(1.1);
+}
+
+.slider-2 input:checked+label+img {
+    opacity: 1;
+    transform: scale(1);
+}

input.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "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",
+"sources": ["color.scss","input.scss","mixin.scss"],
+"names": [],
+"file": "input.css"
+}

input.scss

@@ -0,0 +1,139 @@
+@import "mixin", "color";
+
+input, select, textarea, .textarea {
+    border: 1px solid $content-border-color;
+}
+
+select {
+    cursor: pointer;
+}
+
+progress {
+    height: 20px;
+    width: 100%;
+    min-width: 150px;
+}
+
+.textarea,
+textarea,
+select,
+input[type="password"],
+input[type="text"],
+input[type="datetime"],
+input[type="email"],
+input[type="date"],
+input[type="number"],
+input[type="datetime-local"] {
+    @include border-radius(2px);
+    color: #454545;
+    background: #fff;
+    width: 100%;
+    min-width: 70px;
+    font-size: 1.0em;
+    height: 2em;
+    line-height: 2em;
+    padding: 0 10px 0 10px;
+    border: solid 1px #dcdcdc;
+    transition: background 0.3s, border 0.3s;
+    box-shadow: inset 1px 1px 4px -2px #c5c5c5;
+}
+
+input[type="file"] {
+    border: solid 1px #dcdcdc;
+    width: 100%;
+    color: #454545;
+}
+
+input[placeholder], textarea {
+    font-family: 'FontAwesome', serif;
+}
+
+input:invalid {
+    transition: all 0.5s;
+    border: 1px solid #b85450;
+}
+
+select {
+    height: 2em;
+    line-height: 2em;
+}
+
+.textarea {
+    overflow: auto;
+    resize: both;
+}
+
+textarea, .textarea {
+    min-height: 100px;
+    @include box-sizing(border-box);
+}
+
+span.check input[type="checkbox"], span.radio input[type="radio"] {
+    position: relative;
+    vertical-align: middle;
+    bottom: 1px;
+    margin-right: 5px;
+    cursor: pointer;
+}
+
+input[type="range"] {
+    border: none;
+    width: 100%;
+    min-width: 150px;
+    cursor: pointer;
+}
+
+input[type="password"]:focus,
+input[type="text"]:focus {
+}
+
+.input {
+    width: 100%;
+    min-width: 120px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+
+    button {
+        @include border-left-radius(2px);
+        @include border-right-radius(0px);
+        @include box-sizing(border-box);
+        display: inline-block;
+        background: #fff;
+        height: 2em;
+        font-size: 1em;
+        line-height: 2em;
+        padding: 0;
+        min-width: 40px;
+        border-left: solid 1px #dcdcdc;
+        border-top: solid 1px #dcdcdc;
+        border-bottom: solid 1px #dcdcdc;
+        border-right: none;
+
+        position: relative;
+        vertical-align: middle;
+        flex-grow: 0;
+        flex-shrink: 0;
+
+        &:hover {
+            background: #fff;
+        }
+    }
+
+    i {
+        position: relative;
+        vertical-align: middle;
+    }
+
+    input {
+        @include border-left-radius(0px);
+        @include box-sizing(border-box);
+        font-size: 1em;
+
+        position: relative;
+        vertical-align: middle;
+        flex-grow: 1;
+        flex-shrink: 1;
+    }
+}
+

layout.scss

@@ -0,0 +1,113 @@
+@import "color";
+
+#nav-side {
+    width: 175px;
+    position: fixed;
+    top: 75px;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 0;
+    overflow-y: auto;
+    font-size: 0.8em;
+
+    background: #2F2F2F;
+
+    input {
+        display: none;
+    }
+
+    input + ul {
+        .max {
+            display: none;
+        }
+
+        .min {
+            display: inherit;
+        }
+
+        > li:nth-child(n+2) {
+            display: none;
+        }
+    }
+
+    input:checked + ul {
+        .max {
+            display: inherit;
+        }
+
+        .min {
+            display: none;
+        }
+
+        > li:nth-child(n+2) {
+            display: inherit;
+        }
+    }
+
+    > li {
+        li {
+            border-top: 1px solid #3f3f3f;
+            border-bottom: 1px solid #1a1a1a;
+            color: #fff;
+
+            &:first-child {
+                padding: 5px 0 5px 5px;
+            }
+
+            a {
+                display: block;
+                padding: 5px 0 5px 5px;
+
+                &:hover {
+                    background: #3F3F3F;
+                }
+            }
+        }
+    }
+
+    li:last-child li:last-child {
+        border-bottom: none;
+    }
+
+    .max, .min {
+        float: right;
+    }
+
+    i {
+        margin-right: 5px;
+    }
+}
+
+main {
+    height: 100%;
+    width: 100%;
+    position: relative;
+    top: 0;
+    bottom: 100%;
+    left: 0;
+    z-index: 1;
+
+    padding-right: 5px;
+
+    background: $background-color;
+    transition: all 0.2s;
+}
+
+.nav-trigger {
+    position: absolute;
+    clip: rect(0, 0, 0, 0);
+}
+
+label[for="nav-trigger"] {
+    font-size: 2.0em;
+    height: 30px;
+    width: 30px;
+    cursor: pointer;
+}
+
+.nav-trigger:checked ~ main {
+    width: calc(100% - 175px);
+    left: 175px;
+    box-shadow: -3px 3px 5px 0 rgba(0, 0, 0, 0.5);
+}

link.scss

@@ -0,0 +1,12 @@
+article a {
+    color: #8ea4ff;
+    border-bottom: 1px dotted #8ea4ff;
+
+    &:hover {
+        border-bottom: none;
+    }
+}
+
+.unseen {
+    font-weight: bold;
+}

list.scss

@@ -0,0 +1,32 @@
+@import "mixin", "color";
+
+ul.default li {
+  margin: 5px 0 5px 0;
+
+  &:first-child {
+    margin: 0 0 5px 0;
+  }
+
+  &:last-child {
+    margin: 5px 0 0 0;
+  }
+}
+
+ul.boxed {
+  background: #fff;
+  padding: 5px;
+  @include border-radius(3px);
+  border: 1px solid $content-border-color;
+}
+
+ul.boxed li {
+  margin: 5px 0 5px 0;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}

mixin.scss

@@ -0,0 +1,105 @@
+@mixin box-sizing($box-model) {
+    -moz-box-sizing: $box-model;
+    -webkit-box-sizing: $box-model;
+    box-sizing: $box-model;
+}
+
+@mixin border-radius($radius) {
+    -webkit-border-radius: $radius;
+    -moz-border-radius: $radius;
+    -ms-border-radius: $radius;
+    border-radius: $radius;
+    background-clip: padding-box;
+}
+
+@mixin border-top-radius($radius) {
+    -webkit-border-top-right-radius: $radius;
+    border-top-right-radius: $radius;
+    -webkit-border-top-left-radius: $radius;
+    border-top-left-radius: $radius;
+    background-clip: padding-box;
+}
+
+@mixin border-right-radius($radius) {
+    -webkit-border-bottom-right-radius: $radius;
+    border-bottom-right-radius: $radius;
+    -webkit-border-top-right-radius: $radius;
+    border-top-right-radius: $radius;
+    background-clip: padding-box;
+}
+
+@mixin border-bottom-radius($radius) {
+    -webkit-border-bottom-right-radius: $radius;
+    border-bottom-right-radius: $radius;
+    -webkit-border-bottom-left-radius: $radius;
+    border-bottom-left-radius: $radius;
+    background-clip: padding-box;
+}
+
+@mixin border-left-radius($radius) {
+    -webkit-border-bottom-left-radius: $radius;
+    border-bottom-left-radius: $radius;
+    -webkit-border-top-left-radius: $radius;
+    border-top-left-radius: $radius;
+    background-clip: padding-box;
+}
+
+@mixin border-bottomleft-radius($radius) {
+    -webkit-border-bottom-left-radius: $radius;
+    border-bottom-left-radius: $radius;
+    background-clip: padding-box;
+}
+
+@mixin border-bottomright-radius($radius) {
+    -webkit-border-bottom-right-radius: $radius;
+    border-bottom-right-radius: $radius;
+    background-clip: padding-box;
+}
+
+@mixin border-topright-radius($radius) {
+    -webkit-border-top-right-radius: $radius;
+    border-top-right-radius: $radius;
+    background-clip: padding-box;
+}
+
+@mixin gradient-top-bottom($start, $pos, $end, $pos2, $bg) {
+    background: $bg;
+    background: -moz-linear-gradient(top, $start $pos, $end $pos2);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop($pos, $start), color-stop($pos2, $end));
+    background: -webkit-linear-gradient(top, $start $pos, $end $pos2);
+    background: -o-linear-gradient(top, $start $pos, $end $pos2);
+    background: -ms-linear-gradient(top, $start $pos, $end $pos2);
+    background: linear-gradient(to bottom, $start $pos, $end $pos2);
+}
+
+@mixin box-shadow-top($color) {
+    -moz-box-shadow: inset 0px 1px 0px 0px $color;
+    -webkit-box-shadow: inset 0px 1px 0px 0px $color;
+    box-shadow: inset 0px 1px 0px 0px $color;
+}
+
+@mixin box-shadow-left($color) {
+    -moz-box-shadow: inset 1px 0px 0px 0px $color;
+    -webkit-box-shadow: inset 1px 0px 0px 0px $color;
+    box-shadow: inset 1px 0px 0px 0px $color;
+}
+
+@mixin box-shadow-bottom($color) {
+    -moz-box-shadow: 0px 1px 0px 0px $color;
+    -webkit-box-shadow: 0px 1px 0px 0px $color;
+    box-shadow: 0px 1px 0px 0px $color;
+}
+
+@mixin box-shadow-out($color) {
+    -moz-box-shadow: inset 1px 1px 0px 0px $color;
+    -webkit-box-shadow: inset 1px 1px 0px 0px $color;
+    box-shadow: inset 1px 1px 0px 0px $color;
+}
+
+@mixin transform-rotate($deg) {
+    -webkit-transform: rotate($deg);
+    -moz-transform: rotate($deg);
+    -o-transform: rotate($deg);
+    -ms-transform: rotate($deg);
+    transform: rotate($deg);
+}

nav.scss

@@ -0,0 +1,68 @@
+@import "mixin", "color";
+
+.nav-top {
+    margin: 5px 0 0 5px;
+    display: block;
+    background: $content-background-color;
+    border: 1px solid $content-border-color;
+
+    @include border-radius(3px);
+    @include box-shadow-top(#ffffff);
+
+    > li {
+        @include box-shadow-top(#ffffff);
+        text-shadow: 1px 1px 1px #ffffff;
+
+        &:first-child {
+            @include box-shadow-out(#ffffff);
+            @include border-left-radius(3px);
+        }
+    }
+}
+
+.nav-top li {
+    background: $content-background-color;
+    display: inline-block;
+    margin-right: -4px;
+    position: relative;
+    cursor: pointer;
+}
+
+.nav-top > li > a {
+    display: inline-block;
+    padding: 10px 10px;
+}
+
+.nav-top li:hover {
+    background: #555;
+    color: #fff;
+    text-shadow: 0 -1px 0 #000;
+}
+
+.nav-top li > ul {
+    padding: 0;
+    position: absolute;
+    top: 36px;
+    left: 0;
+    width: 150px;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+    display: none;
+    opacity: 0;
+    visibility: hidden;
+}
+
+.nav-top li > ul li {
+    background: #555;
+    display: block;
+    color: #fff;
+    text-shadow: 0 -1px 0 #000;
+}
+
+.nav-top li > ul li:hover { background: #666; }
+.nav-top li:hover > ul {
+    display: block;
+    opacity: 1;
+    visibility: visible;
+}

pagination.scss

@@ -0,0 +1,20 @@
+@import "mixin", "color";
+
+.pagination {
+    li {
+        display: inline;
+    }
+
+    a {
+        @include border-radius(3px);
+        @include box-shadow-out(#ffffff);
+        background: $content-background-color;
+        padding: 5px 10px 5px 10px;
+    }
+
+    .active, a:hover, a:active {
+        color: #ffffff;
+        background: #353535;
+        @include box-shadow-out(#e8e8e8);
+    }
+}

progress.scss

@@ -0,0 +1,97 @@
+@import "mixin", "color";
+
+.meter {
+    height: 20px;  /* Can be anything */
+    position: relative;
+    background: none !important;
+}
+
+.meter > span {
+    display: block;
+    height: 100%;
+    @include border-radius(3px);
+    background-color: rgb(43,194,83);
+    background-image: -webkit-gradient(
+                    linear,
+                    left bottom,
+                    left top,
+                    color-stop(0, rgb(43,194,83)),
+                    color-stop(1, rgb(84,240,84))
+    );
+    background-image: -moz-linear-gradient(
+                    center bottom,
+                    rgb(43,194,83) 37%,
+                    rgb(84,240,84) 69%
+    );
+    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(.25, rgba(255, 255, 255, .2)),
+            color-stop(.25, transparent), color-stop(.5, transparent),
+            color-stop(.5, rgba(255, 255, 255, .2)),
+            color-stop(.75, rgba(255, 255, 255, .2)),
+            color-stop(.75, transparent), to(transparent)
+    );
+    background-image:
+    -moz-linear-gradient(
+                    -45deg,
+                    rgba(255, 255, 255, .2) 25%,
+                    transparent 25%,
+                    transparent 50%,
+                    rgba(255, 255, 255, .2) 50%,
+                    rgba(255, 255, 255, .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;
+}

section.scss

@@ -0,0 +1,32 @@
+@import "mixin", "color";
+
+section.box {
+    @include box-sizing(border-box);
+    margin: 5px 0 0 5px;
+    display: inline-block;
+}
+
+.box .inner {
+    @include box-sizing(border-box);
+    @include border-radius(3px);
+    @include box-shadow-out(#ffffff);
+    border: 1px solid $content-border-color;
+    background: $content-background-color;
+    padding: 10px;
+}
+
+section h1 {
+    @include box-sizing(border-box);
+    @include box-shadow-bottom(#f1f1f1);
+    font-size: 1.3em;
+    border-bottom: 1px solid $content-border-color;
+    margin-bottom: 5px;
+    text-shadow: 1px 1px 1px #ffffff;
+}
+
+section h2 {
+    @include box-sizing(border-box);
+    font-size: 1.2em;
+    margin-bottom: 5px;
+    text-shadow: 1px 1px 1px #ffffff;
+}

size.scss

@@ -0,0 +1,68 @@
+.w-100 {
+    min-width: 215px;
+    width: 100%;
+    width: calc(100% - 5px);
+}
+
+.w-50 {
+    min-width: 215px;
+    width: 49%;
+    width: calc(50% - 5px);
+}
+
+.w-33 {
+    min-width: 215px;
+    width: 32%;
+    width: calc(33.33% - 5px);
+}
+
+.w-25 {
+    min-width: 215px;
+    width: 25%;
+    width: calc(25% - 5px);
+}
+
+.w-75 {
+    min-width: 215px;
+    width: 75%;
+    width: calc(75% - 5px);
+}
+
+.w-66 {
+    min-width: 215px;
+    width: 66%;
+    width: calc(66.66% - 5px);
+}
+
+.wd-100 {
+    width: 100%;
+    width: calc(100% - 105px);
+}
+
+.wf-100 {
+    width: 100%;
+}
+
+.wf-50 {
+    width: 50%;
+}
+
+.wf-33 {
+    width: 33.33%;
+}
+
+.wf-25 {
+    width: 25%;
+}
+
+.wf-75 {
+    width: 75%;
+}
+
+.wf-66 {
+    width: 66.66%;
+}
+
+.spacer {
+    padding: 5px;
+}

spinner.scss

@@ -0,0 +1,240 @@
+.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.0) }
+}
+
+@keyframes sk-bouncedelay {
+    0%, 80%, 100% {
+        -webkit-transform: scale(0);
+        transform: scale(0);
+    } 40% {
+          -webkit-transform: scale(1.0);
+          transform: scale(1.0);
+      }
+}
+
+// ------------
+
+.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.0);
+        opacity: 0;
+    }
+}
+
+@keyframes sk-scaleout {
+    0% {
+        -webkit-transform: scale(0);
+        transform: scale(0);
+    } 100% {
+          -webkit-transform: scale(1.0);
+          transform: scale(1.0);
+          opacity: 0;
+      }
+}

styles.scss

@@ -0,0 +1,3 @@
+@import "clean", "mixin", "default", "color", "size", "transformation", "alignment";
+@import "layout", "text", "tooltip", "spinner", "form", "icon", "image", "input", "accordion", "alert", "badge", "blockquote", "breadcrumb", "button", "link", "list", "nav", "note", "pagination", "popup", "progress", "section", "tab", "table", "tag";
+@import "media";

tab.scss

@@ -0,0 +1,103 @@
+@import "mixin", "color";
+
+.tabular {
+    .tab-links {
+        @include box-sizing(border-box);
+        padding: 5px 0 4px 0;
+    }
+
+    .tab-links label {
+        @include box-shadow-out(#ffffff);
+        @include border-top-radius(3px);
+        border-top: 1px solid $content-border-color;
+        border-left: 1px solid $content-border-color;
+        border-right: 1px solid $content-border-color;
+        @include gradient-top-bottom(#e0e3eb, 0, $content-background-color, 100, $content-background-color);
+        padding: 5px 10px 5px 10px;
+        text-shadow: 1px 1px 1px #ffffff;
+        font-size: 0.9em;
+        cursor: pointer;
+    }
+
+    .tab-links .active a, .tab-links label:hover {
+        @include gradient-top-bottom(#ffffff, 0, $content-background-color, 100, #ffffff);
+    }
+
+    .tab-links .active a {
+        cursor: default;
+    }
+
+    .tab-links li {
+        @include box-sizing(border-box);
+        display: inline-block;
+        margin: 0 5px 0 0;
+    }
+
+    .tab-content {
+        @include border-bottomleft-radius(3px);
+        @include border-bottomright-radius(3px);
+        @include border-topright-radius(3px);
+        @include box-sizing(border-box);
+        background: $content-background-color;
+        border: 1px solid $content-border-color;
+
+        padding: 10px;
+
+        > input {
+            display: none;
+        }
+
+        input + div {
+            display: none;
+        }
+
+        input:checked + div {
+            display: inherit;
+        }
+    }
+}
+
+.tabular-2 {
+    .tab-links {
+        padding: 5px 0 0 0;
+    }
+
+    .tab-links label {
+        @include box-shadow-out(#ffffff);
+        @include border-radius(3px);
+        border: 1px solid $content-border-color;
+        @include gradient-top-bottom(#e0e3eb, 0, $content-background-color, 100, $content-background-color);
+        padding: 5px 10px 5px 10px;
+        text-shadow: 1px 1px 1px #ffffff;
+        font-size: 0.9em;
+        cursor: pointer;
+    }
+
+    .tab-links .active a, .tab-links label:hover {
+        @include gradient-top-bottom(#ffffff, 0, $content-background-color, 100, #ffffff);
+    }
+
+    .tab-links .active a {
+        cursor: default;
+    }
+
+    .tab-links li {
+        @include box-sizing(border-box);
+        display: inline-block;
+        margin: 0 5px 15px 0;
+    }
+
+    .tab-content {
+        > input {
+            display: none;
+        }
+
+        input + div {
+            display: none;
+        }
+
+        input:checked + div {
+            display: inherit;
+        }
+    }
+}

table.scss

@@ -0,0 +1,113 @@
+@import "mixin", "color";
+
+table.table {
+    @include box-sizing(border-box);
+    width: 100%;
+    font-size: 0.9em;
+
+    caption {
+        @include box-shadow-top(#ffffff);
+        @include border-top-radius(3px);
+        background: $content-background-color;
+        border-right: 1px solid $content-border-color;
+        border-left: 1px solid $content-border-color;
+        border-top: 1px solid $content-border-color;
+
+        padding: 5px;
+    }
+
+    td {
+        padding: 5px 10px 5px 10px;
+        white-space: nowrap;
+    }
+
+    tbody {
+        td:first-child {
+            border-left: 1px solid $content-border-color;
+        }
+
+        td:last-child {
+            border-right: 1px solid $content-border-color;
+        }
+
+        td {
+            border-top: 1px solid $content-border-color;
+            @include box-shadow-top(#ffffff);
+        }
+
+        tr {
+            &:nth-of-type(2n) {
+                background: #f9f9ff;
+            }
+
+            &:nth-of-type(2n+1) {
+                background: #f9fdff;
+            }
+
+            &:hover {
+                background: $content-background-color;
+            }
+        }
+
+        a {
+            display: block;
+        }
+
+        tr:last-child td {
+            border-bottom: 1px solid $content-border-color;
+        }
+
+        tr:last-child td:first-child {
+            @include border-bottomleft-radius(3px);
+        }
+
+        tr:last-child td:last-child {
+            @include border-bottomright-radius(3px);
+        }
+    }
+
+    thead {
+        background: $content-background-color;
+
+        td:first-child {
+            border-left: 1px solid $content-border-color;
+        }
+
+        td:last-child {
+            border-right: 1px solid $content-border-color;
+        }
+    }
+
+    .empty {
+        text-align: center;
+        color: #d8d8d8;
+    }
+
+    tfoot {
+        label {
+            float: left;
+        }
+
+        select {
+            width: auto;
+            float: right;
+            margin: 0;
+            min-width: 0px;
+        }
+
+        td {
+            text-align: center;
+            padding-top: 10px;
+        }
+    }
+}
+
+table.list {
+    th {
+        text-align: left;
+    }
+
+    td {
+        padding: 2px 5px 2px 5px;
+    }
+}

tag.scss

@@ -0,0 +1,64 @@
+@import "mixin", "color";
+
+.tag {
+    text-shadow: 1px 1px 1px #ffffff;
+    cursor: pointer;
+    border: 1px solid $content-border-color;
+    @include border-radius(3px);
+    padding: 5px 10px 5px 10px;
+    font-size: 0.7em;
+}
+
+.tag.green {
+    @include box-shadow-out(#ecffea);
+}
+
+.tag.red {
+    @include box-shadow-out(#fdb7b4);
+}
+
+.tag.blue {
+    @include box-shadow-out(#dce3fd);
+}
+
+.tag.orange {
+    @include box-shadow-out(#fddfb1);
+}
+
+.tag.lightblue {
+    @include box-shadow-out(#e1fdfa);
+}
+
+.tag.yellow {
+    @include box-shadow-out(#fdfdcf);
+}
+
+.tag.purple {
+    @include box-shadow-out(#d8c8fd);
+}
+
+.tag.pink {
+    @include box-shadow-out(#fdd3f0);
+}
+
+.tag.grey {
+    @include box-shadow-out(#f5f5f5);
+}
+
+.tag.darkred {
+    color: #fff;
+    text-shadow: 1px 1px 0px #000;
+    @include box-shadow-out(#f17068);
+}
+
+.tag.darkgreen {
+    color: #fff;
+    text-shadow: 1px 1px 0px #000;
+    @include box-shadow-out(#9df1ad);
+}
+
+.tag.darkblue {
+    color: #fff;
+    text-shadow: 1px 1px 0px #000;
+    @include box-shadow-out(#beddf1);
+}

text.scss

@@ -0,0 +1,13 @@
+p {
+    margin: 0 0 10px 0;
+    line-height: 1.4em;
+
+    span {
+        margin: 0;
+        padding: 0;
+    }
+}
+
+p+p {
+    margin-top: 5px;
+}

tooltip.scss

@@ -0,0 +1,45 @@
+@import "mixin", "color";
+
+.tooltip {
+    position: relative;
+    cursor: pointer;
+    display: inline-block;
+}
+
+.tooltip > i {
+    @include border-radius(3px);
+    text-align: center;
+    font-size: 0.7em;
+    color: #fff;
+    line-height: 1.0em;
+    background: #000000;
+    position: absolute;
+    padding: 5px;
+    bottom: 100%;
+    left: -50%;
+    margin-bottom: 10px;
+    visibility: hidden;
+    opacity: 0;
+    white-space: pre;
+}
+
+.tooltip > i:before, .tooltip > i:after {
+    content: "";
+    position: absolute;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    top: 100%;
+    left: 50%;
+    margin-left: -10px;
+}
+
+.tooltip > i:after{
+    border-top: 10px solid #000000;
+    margin-top: 0;
+    z-index: 1;
+}
+
+.tooltip:hover > i {
+    visibility: visible;
+    opacity: 1;
+}