New theme for UI scaffolding

examples/test/index.html

@@ -35,7 +35,7 @@
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.colour.css">
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.icon.css">
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.loading.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.theme.default.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.theme.scaffold.css">
     <!-- App Stylesheet -->
     <link rel="stylesheet" href="assets/stylesheets/app.css">
 </head>

src/stylesheets/Lungo.theme.scaffold.less

@@ -0,0 +1,371 @@
+/**
+ * Stylesheet
+ *
+ * @namespace LUNGO.Theme
+ * @class Default
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "constants.less";
+@import "mixins.less";
+
+@theme:  #999;
+    @theme-light: #ccc;
+    @theme-dark: #333;
+
+    @theme-highlight: #93d6e7;
+        @theme-highlight-color: #1b6777;
+        @theme-highlight-text-shadow: 0 1px 0 rgba(255,255,255,0.2);
+
+
+@color-border: #2566a4;
+    @color-border-light: #64b9e2;
+
+@color-main: #2c8bca;
+    @color-main-dark: #154f93;
+
+@color-secondary: #353b42;
+    @color-secondary-dark: #272a2d;
+
+@background-secondary: #353b42 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #353b42), color-stop(100%, #272a2d));
+
+.app {
+    background: @black;
+    font-family: Helvetica, Arial, sans-serif;
+}
+
+/* @group <header> & <footer> & <article> */
+section > header {
+    background: @theme;
+    .box-shadow(~"inset 0 1px 0 "@theme-light~", inset 0 -1px 0 "@theme-dark);
+    z-index: 2;
+    & .title , .subtitle {
+        color: @white;
+    }
+}
+
+section > footer {
+    background: @theme-dark;
+    border-top: 1px inset @black;
+    color: @white;
+}
+
+article {
+    background: @theme-light;
+}
+/* @end */
+
+/* @group <nav> */
+header nav {
+    & a {
+        color: @white;
+    }
+
+    &:not(.plain) {
+        & a {
+            .box-shadow(~"1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2)");
+            &.accept { background: rgba(0, 255, 0, 0.4); }
+            &.cancel { background: rgba(255, 0, 0, 0.4); }
+        }
+        &.onright a { .box-shadow(~"-1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2)"); }
+
+        & a:active { .box-shadow(~"inset 1px 0 1px rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 0 42px rgba(0,0,0,0.5)"); }
+    }
+
+    &.plain a:active { text-shadow: 0 0 4px rgba(255,255,255,0.5); }
+}
+
+.toolbar a {
+    color: @theme-light;
+
+    &.current, &.active {
+        color: @white;
+        background: @black;
+        .box-shadow(~"inset 0 1px 1px rgba(0,0,0,1), -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05)");
+    }
+}
+
+.groupbar {
+    background: @theme-dark;
+//    border-bottom: solid 1px rgba(0,0,0,1);
+
+    //.box-shadow(~"inset 0 1px 8px rgba(0,0,0,0.3)");
+
+    & a {
+        color: @theme-light;
+        &.current {
+            color:  @white;
+            border-bottom: solid 3px @color-border;
+        }
+    }
+}
+/* @end */
+
+/* @group <aside> */
+aside {
+    color:  #fff;
+    background: #272727;
+    background: #333;
+
+    & header, footer {
+        .box-shadow(~"inset 0 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.1)");
+        background: #272727;
+    }
+
+    & article {
+        background: none;
+    }
+
+    & .list {
+        & ul {
+            background: none;
+        }
+
+        & li {
+            color: #F0F0F0;
+            border-bottom: 1px solid #2f2f2f;
+
+            & strong {
+                text-shadow: 0 1px 1px black;
+                color: #fff;
+            }
+
+            & small {
+                color:  rgba(255,255,255,0.3);
+            }
+        }
+    }
+
+    & a.current { background: #2f2f2f; }
+}
+
+section.aside {
+    .box-shadow(~"-4px 0 8px rgba(0,0,0,0.5)");
+    &.onright { .box-shadow(~"4px 0 8px rgba(0,0,0,0.5)"); }
+}
+
+@media handheld, only screen and (min-width: 768px) {
+    section.current, section.show {
+        .box-shadow(~"-4px 0 8px rgba(0,0,0,0.5)");
+        &.onright { .box-shadow(~"4px 0 8px rgba(0,0,0,0.5)"); }
+    }
+}
+/* @end */
+
+/* @group .list */
+.list, .list li:not(.toolbar) a { color: #2a2a2a; }
+
+.list {
+    & ul {
+        background: #fff;
+    }
+    & li {
+        //background: #fff;
+        border-bottom: 1px inset #f8f8f8;
+        &:last-child { border-bottom: none; }
+
+        &.selectable:active {
+            background: @theme-light;
+            color: @theme-dark;
+
+            & small, & .onright:not(.bubble) {
+                color: @white;
+                text-shadow: none;
+            }
+        }
+
+        & small, & .onright:not(.bubble) { color: #888; }
+
+        & strong {
+            color: #134c81;
+        }
+    }
+
+    &.indented li {
+        border-left: solid 1px #e1e1e1;
+        border-right: solid 1px #e1e1e1;
+
+        &:first-child { border-top: solid 1px #e1e1e1; }
+        &:last-child { border-bottom: solid 1px  #e1e1e1; }
+    }
+
+    & .anchor {
+        color: @white;
+        .linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%);
+        border: none;
+    }
+
+    & .tip {
+        color: #7a7a7a;
+        &.theme {
+            color: #fff;
+            .linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%);
+        }
+        &.dark {
+            .linear-gradient(top, ~','@color-secondary 0%, ~','@color-secondary-dark 100%);
+            color: #fff;
+            text-shadow: 0px -1px 0px rgba(0,0,0,0.5);
+
+            & a { color: #fff !important; }
+        }
+    }
+
+    & .toolbar {
+        border-bottom-color: rgba(0,0,0,0.2);
+
+        & .toolbar a {
+            .box-shadow(~"1px 0px 0px #d9d9d9");
+
+            &:last-child { .box-shadow(none); }
+            &.current {
+                background: transparent;
+                color: #333;
+                text-shadow: none !important;
+            }
+
+        }
+    }
+}
+/* @end */
+
+/* @group widgets */
+.splash {
+    background: @theme-dark;
+    color: #fff;
+    text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
+}
+
+&.indented {
+    & ul { .border-radius(3px); }
+    & li {
+        &:first-child { .border-radius(3px 3px 0px 0px); }
+        &:last-child {
+            .border-radius(0px 0px 3px 3px);
+            .box-shadow(0 1px 1px rgba(0,0,0,0.05));
+        }
+    }
+}
+
+
+/* @group .button */
+.button {
+    color: @white;
+    font-weight: bold;
+    &:active { }
+
+    &.default {
+        background: @theme;
+        &:active, &.active { background: @theme-dark;}
+    }
+}
+/* @end */
+
+/* @group <form> */
+form, .form {
+    & label {
+        color: #999;
+    }
+}
+input, textarea, select {
+    border: 1px solid #ccc;
+    color: @theme-dark;
+    font-family: Helvetica, Arial, sans-serif;
+
+    &:focus {
+        color: #000;
+        border-color: @theme-dark;
+    }
+}
+
+.select:after {
+    background: #ccc;
+    color: white;
+}
+
+/* @group .range */
+input[type="checkbox"] + span, input[type="radio"] + span {
+    color: #fff;
+    background: @theme;
+}
+    input[type="checkbox"] + span::before,
+    input[type="radio"] + span::before {
+        background: @theme-light;
+    }
+
+    input[type="checkbox"]:checked + span,
+    input[type="radio"]:checked + span {
+        background: @theme-dark;
+    }
+/* @end */
+
+
+
+/* @group range */
+input[type="range"] {
+    background-color: @theme-light;
+
+    &:active {
+        background: @theme;
+    }
+    &::-webkit-slider-thumb {
+        background: @theme;
+    }
+    &:active::-webkit-slider-thumb {
+        background: @theme-dark;
+    }
+}
+/* @end */
+
+/* @group .progress */
+.progress {
+    .labels {
+        font-size: 12px;
+        font-weight: bold;
+        line-height: 18px;
+        color: @theme;
+    }
+
+    & .bar {
+        background: @theme-light;
+
+        & .value {
+            background: @theme-dark;
+
+            & .label {
+                float: right;
+                margin-right: 3px;
+                font-weight: bold;
+                color: @white;
+                font-size: 12px;
+            }
+        }
+    }
+}
+/* @end */
+
+
+/* @end */
+.bubble {
+    color: #fff;
+
+    &.count {
+        background: @theme;
+    }
+}
+    header .bubble.count {
+        background: @theme-dark;
+    }
+
+    article .list .bubble {
+        .box-shadow(~'inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3)');
+    }
+
+
+    aside .list .bubble {
+        background: rgba(0,0,0,0.25);
+                .box-shadow(~'inset 0 1px 0 #1b212a), inset 0 -1px 0 #454c56');
+        .box-shadow(~'inset 0 1px 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(255,255,255,0.2)');
+    }
+
+/* @end */

src/stylesheets/css/Lungo.theme.scaffold.css

@@ -0,0 +1,458 @@
+/**
+ * Stylesheet
+ *
+ * @namespace LUNGO.Theme
+ * @class Default
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+/* DIMENSIONS */
+/* COLORS */
+.app {
+  background: #000000;
+  font-family: Helvetica, Arial, sans-serif;
+}
+/* @group <header> & <footer> & <article> */
+section > header {
+  background: #999999;
+  -webkit-box-shadow: inset 0 1px 0  #cccccc , inset 0 -1px 0  #333333;
+  -moz-box-shadow: inset 0 1px 0  #cccccc , inset 0 -1px 0  #333333;
+  box-shadow: inset 0 1px 0  #cccccc , inset 0 -1px 0  #333333;
+  -webkit-box-shadow: inset 0 1px 0  #cccccc , inset 0 -1px 0  #333333;
+  -moz-box-shadow: inset 0 1px 0  #cccccc , inset 0 -1px 0  #333333;
+  box-shadow: inset 0 1px 0  #cccccc , inset 0 -1px 0  #333333;
+  z-index: 2;
+}
+section > header .title,
+section > header .subtitle {
+  color: #ffffff;
+}
+section > footer {
+  background: #333333;
+  border-top: 1px inset #000000;
+  color: #ffffff;
+}
+article {
+  background: #cccccc;
+}
+/* @end */
+/* @group <nav> */
+header nav a {
+  color: #ffffff;
+}
+header nav:not(.plain) a {
+  -webkit-box-shadow: 1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2);
+  -moz-box-shadow: 1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2);
+  box-shadow: 1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2);
+  -webkit-box-shadow: 1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2);
+  -moz-box-shadow: 1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2);
+  box-shadow: 1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2);
+}
+header nav:not(.plain) a.accept {
+  background: rgba(0, 255, 0, 0.4);
+}
+header nav:not(.plain) a.cancel {
+  background: rgba(255, 0, 0, 0.4);
+}
+header nav:not(.plain).onright a {
+  -webkit-box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2);
+  -moz-box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2);
+  box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2);
+  -webkit-box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2);
+  -moz-box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2);
+  box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2);
+}
+header nav:not(.plain) a:active {
+  -webkit-box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 0 42px rgba(0,0,0,0.5);
+  -moz-box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 0 42px rgba(0,0,0,0.5);
+  box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 0 42px rgba(0,0,0,0.5);
+  -webkit-box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 0 42px rgba(0,0,0,0.5);
+  -moz-box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 0 42px rgba(0,0,0,0.5);
+  box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 0 42px rgba(0,0,0,0.5);
+}
+header nav.plain a:active {
+  text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
+}
+.toolbar a {
+  color: #cccccc;
+}
+.toolbar a.current,
+.toolbar a.active {
+  color: #ffffff;
+  background: #000000;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,1), -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
+  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,1), -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,1), -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,1), -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
+  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,1), -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,1), -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
+}
+.groupbar {
+  background: #333333;
+}
+.groupbar a {
+  color: #cccccc;
+}
+.groupbar a.current {
+  color: #ffffff;
+  border-bottom: solid 3px #2566a4;
+}
+/* @end */
+/* @group <aside> */
+aside {
+  color: #fff;
+  background: #272727;
+  background: #333;
+}
+aside header,
+aside footer {
+  -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.1);
+  -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.1);
+  box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.1);
+  -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.1);
+  -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.1);
+  box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.1);
+  background: #272727;
+}
+aside article {
+  background: none;
+}
+aside .list ul {
+  background: none;
+}
+aside .list li {
+  color: #F0F0F0;
+  border-bottom: 1px solid #2f2f2f;
+}
+aside .list li strong {
+  text-shadow: 0 1px 1px black;
+  color: #fff;
+}
+aside .list li small {
+  color: rgba(255, 255, 255, 0.3);
+}
+aside a.current {
+  background: #2f2f2f;
+}
+section.aside {
+  -webkit-box-shadow: -4px 0 8px rgba(0,0,0,0.5);
+  -moz-box-shadow: -4px 0 8px rgba(0,0,0,0.5);
+  box-shadow: -4px 0 8px rgba(0,0,0,0.5);
+  -webkit-box-shadow: -4px 0 8px rgba(0,0,0,0.5);
+  -moz-box-shadow: -4px 0 8px rgba(0,0,0,0.5);
+  box-shadow: -4px 0 8px rgba(0,0,0,0.5);
+}
+section.aside.onright {
+  -webkit-box-shadow: 4px 0 8px rgba(0,0,0,0.5);
+  -moz-box-shadow: 4px 0 8px rgba(0,0,0,0.5);
+  box-shadow: 4px 0 8px rgba(0,0,0,0.5);
+  -webkit-box-shadow: 4px 0 8px rgba(0,0,0,0.5);
+  -moz-box-shadow: 4px 0 8px rgba(0,0,0,0.5);
+  box-shadow: 4px 0 8px rgba(0,0,0,0.5);
+}
+@media handheld, only screen and (min-width: 768px) {
+  section.current,
+  section.show {
+    -webkit-box-shadow: -4px 0 8px rgba(0,0,0,0.5);
+    -moz-box-shadow: -4px 0 8px rgba(0,0,0,0.5);
+    box-shadow: -4px 0 8px rgba(0,0,0,0.5);
+    -webkit-box-shadow: -4px 0 8px rgba(0,0,0,0.5);
+    -moz-box-shadow: -4px 0 8px rgba(0,0,0,0.5);
+    box-shadow: -4px 0 8px rgba(0,0,0,0.5);
+  }
+  section.current.onright,
+  section.show.onright {
+    -webkit-box-shadow: 4px 0 8px rgba(0,0,0,0.5);
+    -moz-box-shadow: 4px 0 8px rgba(0,0,0,0.5);
+    box-shadow: 4px 0 8px rgba(0,0,0,0.5);
+    -webkit-box-shadow: 4px 0 8px rgba(0,0,0,0.5);
+    -moz-box-shadow: 4px 0 8px rgba(0,0,0,0.5);
+    box-shadow: 4px 0 8px rgba(0,0,0,0.5);
+  }
+}
+/* @end */
+/* @group .list */
+.list,
+.list li:not(.toolbar) a {
+  color: #2a2a2a;
+}
+.list ul {
+  background: #fff;
+}
+.list li {
+  border-bottom: 1px inset #f8f8f8;
+}
+.list li:last-child {
+  border-bottom: none;
+}
+.list li.selectable:active {
+  background: #cccccc;
+  color: #333333;
+}
+.list li.selectable:active small,
+.list li.selectable:active .onright:not(.bubble) {
+  color: #ffffff;
+  text-shadow: none;
+}
+.list li small,
+.list li .onright:not(.bubble) {
+  color: #888;
+}
+.list li strong {
+  color: #134c81;
+}
+.list.indented li {
+  border-left: solid 1px #e1e1e1;
+  border-right: solid 1px #e1e1e1;
+}
+.list.indented li:first-child {
+  border-top: solid 1px #e1e1e1;
+}
+.list.indented li:last-child {
+  border-bottom: solid 1px  #e1e1e1;
+}
+.list .anchor {
+  color: #ffffff;
+  background-image: -webkit-linear-gradient(top , #2c8bca 0% , #154f93 100%);
+  background-image: -moz-linear-gradient(top , #2c8bca 0% , #154f93 100%);
+  background-image: -ms-linear-gradient(top , #2c8bca 0% , #154f93 100%);
+  background-image: -o-linear-gradient(top , #2c8bca 0% , #154f93 100%);
+  background-image: linear-gradient(top , #2c8bca 0% , #154f93 100%);
+  background-image: -webkit-linear-gradient(top , #2c8bca 0% , #154f93 100%);
+  background-image: -moz-linear-gradient(top , #2c8bca 0% , #154f93 100%);
+  background-image: -ms-linear-gradient(top , #2c8bca 0% , #154f93 100%);
+  background-image: -o-linear-gradient(top , #2c8bca 0% , #154f93 100%);
+  background-image: linear-gradient(top , #2c8bca 0% , #154f93 100%);
+  border: none;
+}
+.list .tip {
+  color: #7a7a7a;
+}
+.list .tip.theme {
+  color: #fff;
+  background-image: -webkit-linear-gradient(top , #2c8bca 0% , #154f93 100%);
+  background-image: -moz-linear-gradient(top , #2c8bca 0% , #154f93 100%);
+  background-image: -ms-linear-gradient(top , #2c8bca 0% , #154f93 100%);
+  background-image: -o-linear-gradient(top , #2c8bca 0% , #154f93 100%);
+  background-image: linear-gradient(top , #2c8bca 0% , #154f93 100%);
+  background-image: -webkit-linear-gradient(top , #2c8bca 0% , #154f93 100%);
+  background-image: -moz-linear-gradient(top , #2c8bca 0% , #154f93 100%);
+  background-image: -ms-linear-gradient(top , #2c8bca 0% , #154f93 100%);
+  background-image: -o-linear-gradient(top , #2c8bca 0% , #154f93 100%);
+  background-image: linear-gradient(top , #2c8bca 0% , #154f93 100%);
+}
+.list .tip.dark {
+  background-image: -webkit-linear-gradient(top , #353b42 0% , #272a2d 100%);
+  background-image: -moz-linear-gradient(top , #353b42 0% , #272a2d 100%);
+  background-image: -ms-linear-gradient(top , #353b42 0% , #272a2d 100%);
+  background-image: -o-linear-gradient(top , #353b42 0% , #272a2d 100%);
+  background-image: linear-gradient(top , #353b42 0% , #272a2d 100%);
+  background-image: -webkit-linear-gradient(top , #353b42 0% , #272a2d 100%);
+  background-image: -moz-linear-gradient(top , #353b42 0% , #272a2d 100%);
+  background-image: -ms-linear-gradient(top , #353b42 0% , #272a2d 100%);
+  background-image: -o-linear-gradient(top , #353b42 0% , #272a2d 100%);
+  background-image: linear-gradient(top , #353b42 0% , #272a2d 100%);
+  color: #fff;
+  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
+}
+.list .tip.dark a {
+  color: #fff !important;
+}
+.list .toolbar {
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+}
+.list .toolbar .toolbar a {
+  -webkit-box-shadow: 1px 0px 0px #d9d9d9;
+  -moz-box-shadow: 1px 0px 0px #d9d9d9;
+  box-shadow: 1px 0px 0px #d9d9d9;
+  -webkit-box-shadow: 1px 0px 0px #d9d9d9;
+  -moz-box-shadow: 1px 0px 0px #d9d9d9;
+  box-shadow: 1px 0px 0px #d9d9d9;
+}
+.list .toolbar .toolbar a:last-child {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+.list .toolbar .toolbar a.current {
+  background: transparent;
+  color: #333;
+  text-shadow: none !important;
+}
+/* @end */
+/* @group widgets */
+.splash {
+  background: #333333;
+  color: #fff;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
+}
+.indented ul {
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+}
+.indented li:first-child {
+  -webkit-border-radius: 3px 3px 0px 0px;
+  -moz-border-radius: 3px 3px 0px 0px;
+  border-radius: 3px 3px 0px 0px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  -webkit-border-radius: 3px 3px 0px 0px;
+  -moz-border-radius: 3px 3px 0px 0px;
+  border-radius: 3px 3px 0px 0px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+}
+.indented li:last-child {
+  -webkit-border-radius: 0px 0px 3px 3px;
+  -moz-border-radius: 0px 0px 3px 3px;
+  border-radius: 0px 0px 3px 3px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  -webkit-border-radius: 0px 0px 3px 3px;
+  -moz-border-radius: 0px 0px 3px 3px;
+  border-radius: 0px 0px 3px 3px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+}
+/* @group .button */
+.button {
+  color: #ffffff;
+  font-weight: bold;
+}
+.button.default {
+  background: #999999;
+}
+.button.default:active,
+.button.default.active {
+  background: #333333;
+}
+/* @end */
+/* @group <form> */
+form label,
+.form label {
+  color: #999;
+}
+input,
+textarea,
+select {
+  border: 1px solid #ccc;
+  color: #333333;
+  font-family: Helvetica, Arial, sans-serif;
+}
+input:focus,
+textarea:focus,
+select:focus {
+  color: #000;
+  border-color: #333333;
+}
+.select:after {
+  background: #ccc;
+  color: white;
+}
+/* @group .range */
+input[type="checkbox"] + span,
+input[type="radio"] + span {
+  color: #fff;
+  background: #999999;
+}
+input[type="checkbox"] + span::before,
+input[type="radio"] + span::before {
+  background: #cccccc;
+}
+input[type="checkbox"]:checked + span,
+input[type="radio"]:checked + span {
+  background: #333333;
+}
+/* @end */
+/* @group range */
+input[type="range"] {
+  background-color: #cccccc;
+}
+input[type="range"]:active {
+  background: #999999;
+}
+input[type="range"]::-webkit-slider-thumb {
+  background: #999999;
+}
+input[type="range"]:active::-webkit-slider-thumb {
+  background: #333333;
+}
+/* @end */
+/* @group .progress */
+.progress .labels {
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 18px;
+  color: #999999;
+}
+.progress .bar {
+  background: #cccccc;
+}
+.progress .bar .value {
+  background: #333333;
+}
+.progress .bar .value .label {
+  float: right;
+  margin-right: 3px;
+  font-weight: bold;
+  color: #ffffff;
+  font-size: 12px;
+}
+/* @end */
+/* @end */
+.bubble {
+  color: #fff;
+}
+.bubble.count {
+  background: #999999;
+}
+header .bubble.count {
+  background: #333333;
+}
+article .list .bubble {
+  -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
+  -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
+  box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
+  -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
+  -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
+  box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
+}
+aside .list .bubble {
+  background: rgba(0, 0, 0, 0.25);
+  -webkit-box-shadow: inset 0 1px 0 #1b212a), inset 0 -1px 0 #454c56;
+  -moz-box-shadow: inset 0 1px 0 #1b212a), inset 0 -1px 0 #454c56;
+  box-shadow: inset 0 1px 0 #1b212a), inset 0 -1px 0 #454c56;
+  -webkit-box-shadow: inset 0 1px 0 #1b212a), inset 0 -1px 0 #454c56;
+  -moz-box-shadow: inset 0 1px 0 #1b212a), inset 0 -1px 0 #454c56;
+  box-shadow: inset 0 1px 0 #1b212a), inset 0 -1px 0 #454c56;
+  -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(255,255,255,0.2);
+  -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(255,255,255,0.2);
+  box-shadow: inset 0 1px 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(255,255,255,0.2);
+  -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(255,255,255,0.2);
+  -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(255,255,255,0.2);
+  box-shadow: inset 0 1px 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(255,255,255,0.2);
+}
+/* @end */