Changes on default stylesheet

examples/test/app/resources/asides/features.html

@@ -3,8 +3,8 @@
     <article class="list scroll">
         <ul>
             <!-- Basic Layout -->
-            <li>
-                <a href="#list" data-target="section">
+            <li class="current">
+                <a href="#list" class="current" data-target="section">
                     <div class="bubble right">8</div>
                     <strong>Layout</strong>
                     <small>Indented, Scroll</small>

examples/test/kitchensink.html

@@ -40,7 +40,7 @@
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.notification.css">
 
 
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.theme.scaffold.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.theme.default.css">
     <!--
     <link rel="stylesheet" href="../../release/lungo.css">
     <link rel="stylesheet" href="../../release/lungo.icon.css">
@@ -60,10 +60,10 @@
                 <a href="#features" data-target="aside" data-icon="menu"></a>
             </nav>
             <nav class="right">
-                <a href="#" data-loading="white" data-icon="user"></a>
+                <a href="#" data-icon="user" data-count="3"></a>
             </nav>
             <div class="left">
-                <span class="title with-subtitle">Lungo Framework</span>
+                <span class="title with-subtitle">LUNGO FRAMEWORK</span>
                 <span class="subtitle">version 2.0</span>
             </div>
         </header>
@@ -77,10 +77,115 @@
             </nav>
         </footer>
 
-        <article id="art-1" class="list scroll">
+
+    <article id="list-normal" class="list scroll indented">
+        <ul>
+            <li class="anchor">With right elements</li>
+
+            <li>
+                <strong>&lt;li&gt; + &lt;strong&gt; </strong>
+            </li>
+
+            <li class="selectable">
+                <strong>&lt;li class="selectable"&gt; + &lt;strong&gt; </strong>
+            </li>
+
+            <li>
+                <a href="#">
+                    <strong>&lt;li&gt; + &lt;a&gt; + &lt;strong&gt; </strong>
+                </a>
+            </li>
+
+            <li>
+                <strong>&lt;li&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+
+            <li class="highlight">
+                <strong>&lt;li class="highlight"&gt; + &lt;strong&gt; </strong>
+            </li>
+
+
+            <li class="anchor">.arrow class</li>
+
+            <li class="arrow">
+                <strong>&lt;li class="arrow"&gt; + &lt;strong&gt; </strong>
+            </li>
+
+            <li class="arrow">
+                <strong>&lt;li class="arrow"&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+
+            <li class="arrow">
+                <strong>&lt;li class="arrow"&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+                <small>&lt;small&gt;</small>
+            </li>
+
+
+            <li class="anchor">.right element</li>
+
+            <li>
+                <a href="#">
+                    <div class="right">.right</div>
+                    <strong>&lt;strong&gt; element</strong>
+                    <small>with &lt;small&gt; element</small>
+                </a>
+            </li>
+
+            <li>
+                <a href="#">
+                    <div class="right bubble blue">.right.bubble</div>
+                    <strong>&lt;strong&gt; element</strong>
+                    <small>with &lt;small&gt; element</small>
+                </a>
+            </li>
+
+            <li>
+                <a href="#">
+                    <div class="right bubble blue" data-icon="clock">.right data-icon</div>
+                    <strong>&lt;strong&gt; element</strong>
+                    <small>with &lt;small&gt; element</small>
+                </a>
+            </li>
+
+            <li class="anchor">With data-icon or data-image attribute</li>
+            <li data-image="http://placehold.it/32x32">
+                <strong>&lt;li data-image&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+            <li class=" thumb" data-image="http://placehold.it/46x46">
+                <strong>&lt;li class="thumb" data-image&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+            <li data-icon="user">
+                <strong>&lt;li data-icon&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+            <li class="thumb" data-icon="user">
+                <strong>&lt;li class="thumb" data-icon&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+
+            <li class="anchor">With colours</li>
+            <li class="blue">
+                <strong>&lt;li class="blue"&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+            <li class="green">
+                <strong>&lt;li class="green"&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+            <li class="yellow">
+                <strong>&lt;li class="yellow"&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+        </ul>
+
+    </article>
 
 
-        </article>
         <article id="art-2" data-loading="black"></article>
         <article id="art-3" data-loading="black"></article>
         <article id="art-4" data-loading="black"></article>

src/stylesheets/Lungo.theme.default.less

@@ -10,76 +10,84 @@
 @import "constants.less";
 @import "mixins.less";
 
-@theme:  #05b8e2;
-    @theme-light: #05bde9;
-    @theme-dark: #07acd0;
-    @theme-highlight: #93d6e7;
-        @theme-highlight-color: #1b6777;
-        @theme-highlight-text-shadow: 0 1px 0 rgba(255,255,255,0.2);
+@theme: #05bde9;
+@theme-light:  #42c8fc;
+@theme-dark: #07acd0;
+@color: #484a49;
 
-@border-radius-section: 4px;
-
-@color-border: #2566a4;
-    @color-border-light: #64b9e2;
-
-@color-main: #2c8bca;
-    @color-main-dark: #154f93;
+@section-radius: 4px;
+@header: #efeeed;
+    @header-bottom: #e0dedf;
+@footer: #353b42;
+    @footer-bottom: #272a2d;
 
 @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: 'Roboto', Helvetica, Arial, sans-serif;
+    font-family: Helvetica, Arial, sans-serif;
 }
 
 /* @group <header> & <footer> & <article> */
 section > header {
-    .linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%);
-    .box-shadow(~"inset 0 1px 0 "@color-border-light~", inset 0 -1px 0 "@color-border);
-    .border-radius(@border-radius-section @border-radius-section 0px 0px);
-    border-bottom: 1px solid #1a2838;
-    z-index: 2;
-    & .title {
-        color: @white;
-        text-shadow: 0px 1px 0px rgba(0,0,0,0.2); }
+    .linear-gradient(top, ~','@header 0%, ~','@header-bottom 100%);
+    .box-shadow(~"inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -1px 0 rgba(0,0,0,0.3)");
+    .border-radius(@section-radius @section-radius 0px 0px);
+    & .title { color: @color; }
     & .subtitle {
         color: rgba(255,255,255,0.6);
         text-shadow: 0px -1px 0px rgba(0,0,0,0.3); }
 }
 
 section > footer {
-    .linear-gradient(top, ~','@color-secondary 0%, ~','@color-secondary-dark 60%);
-    border-top: 1px inset #2A2A2A;
+    .linear-gradient(top, ~','@footer 0%, ~','@footer-bottom 60%);
     color: #353b42;
-    .border-radius(0px 0px @border-radius-section @border-radius-section); }
+    .border-radius(0px 0px @section-radius @section-radius); }
 
-article { background: #efefef; }
+article { background: #f4f5f5; }
 /* @end */
 
 /* @group <nav> */
 header nav {
-    & a {
-        color: @white;
-        text-shadow: 0 1px 0 rgba(0,0,0,0.3);
-    }
+    & a { color: @color; }
 
     &: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); }
+
+            &:active {
+                color: @white;
+                &.accept { background: rgba(0, 255, 0, 0.2); }
+                &.cancel { background: rgba(255, 0, 0, 0.2); }
+                &:not(.accept):not(.cancel) { background: rgba(0,0,0,0.1); }
+            }
         }
-        &.right 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)"); }
+        &.right a {
+            .box-shadow(~"-1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2)");
+        }
     }
 
     &.plain a:active { text-shadow: 0 0 4px rgba(255,255,255,0.5); }
 }
 
+footer nav {
+    & a {
+        color: rgba(0,0,0,0.6);
+        .text-shadow(0 1px 0 rgba(255,255,255,0.1));
+
+        &.current, &.active {
+            color: @white;
+            text-shadow: 0 0 1px @white;
+            background: @black;
+            .box-shadow(~"-1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05)"); }
+    }
+}
+
 .toolbar a {
     color: #cdd9e3;
     .border-radius(4px);
@@ -91,64 +99,48 @@ header nav {
 }
 
 .groupbar {
-    background: #272a2d;
-    border-bottom: solid 1px rgba(0,0,0,1);
-    .box-shadow(~"inset 0 1px 8px rgba(0,0,0,0.3)");
-
+    background: @color-secondary;
     & a {
-        color: #6e6e6e;
+        color: #e3e4e3;
         &.current {
-            color:  #fff;
-            border-bottom: solid 3px @color-border;
-        }
+            color:  @white;
+            .box-shadow(inset 0 -3px 0 @theme); }
     }
 }
 /* @end */
 
 /* @group <aside> */
-a {
-	//background-color: #333;
-}
 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; }
+        .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-top: 1px solid rgba(255,255,255,0.05);
+            border-bottom: 1px solid #2f2f2f;
+            &.current { background: @theme; }
+            & strong {
+                text-shadow: 0 1px 1px rgba(0,0,0,0.75);
+                color: @white; }
+            & small { color:  rgba(255,255,255,0.5); }
+        }
+    }
+
+    & a.current { background: @theme; }
 }
 
 section.aside {
-    .box-shadow(~"-4px 0 8px rgba(0,0,0,0.5)");
-    &.right { .box-shadow(~"4px 0 8px rgba(0,0,0,0.5)"); }
+    .box-shadow(~"-4px 0 8px rgba(0,0,0,0.4)");
+    &.right { .box-shadow(~"4px 0 8px rgba(0,0,0,0.4)"); }
 }
 
 @media handheld, only screen and (min-width: 768px) {
@@ -160,79 +152,35 @@ section.aside {
 /* @end */
 
 /* @group .list */
-.list, .list li:not(.toolbar) a { color: #2a2a2a; }
+.list, .list li a { color: #2a2a2a; }
 
-.list {
-	& ul {
-		background: #fff;
-	}
+section .list {
+    & ul, li { background: #fff; }
     & li {
-        //background: #fff;
-        border-bottom: 1px inset #f8f8f8;
-        &:last-child { border-bottom: none; }
-
-        &.selectable:active {
-            background: @theme-highlight;
-            color: @theme-highlight-color;
-            text-shadow: @theme-highlight-text-shadow;
-
-            & small, & .right:not(.bubble) {
-                color: @white;
-                text-shadow: none;
-            }
-        }
-
-        & small, & .right: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; }
+        border-bottom: 1px inset #eee;
     }
+}
 
-    & .anchor {
-        color: @white;
-        .linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%);
-        border: none;
-    }
+.list li {
+    &:last-child { border-bottom: 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);
+    &.selectable:active {
+        background: @theme-light;
 
-            & a { color: #fff !important; }
-        }
+        & small, & .right:not(.bubble), & strong {
+            color: @white;
+            text-shadow: none; }
     }
 
-    & .toolbar {
-        border-bottom-color: rgba(0,0,0,0.2);
-
-        & .toolbar a {
-            .box-shadow(~"1px 0px 0px #d9d9d9");
+    &.highlight { background: #eee; }
 
-            &:last-child { .box-shadow(none); }
-            &.current {
-                background: transparent;
-                color: #333;
-                text-shadow: none !important;
-            }
+    &.anchor {
+        color: @white;
+        background: @color;
+        border-bottom: none; }
 
-        }
-    }
+    & small, & .right:not(.bubble) { opacity: 0.75; }
+    & strong { color: #333; }
 }
 /* @end */
 
@@ -244,11 +192,15 @@ section.aside {
 }
 
 &.indented {
-    & ul { .border-radius(3px); }
+    & ul {
+        .border-radius(2px);
+        box-shadow: 0 0 2px rgba(0,0,0,0.2);
+    }
+
     & li {
-        &:first-child { .border-radius(3px 3px 0px 0px); }
+        &:first-child { .border-radius(2px 2px 0px 0px); }
         &:last-child {
-            .border-radius(0px 0px 3px 3px);
+            .border-radius(0px 0px 2px 2px);
             .box-shadow(0 1px 1px rgba(0,0,0,0.05));
         }
     }
@@ -257,94 +209,87 @@ section.aside {
 
 /* @group .button */
 .button {
-    .border-radius(@border-radius);
-    .box-shadow(~"inset 1px 0 0 rgba(0,0,0,0.1), inset 0 1px 0 rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 rgba(0,0,0,0.25), inset 0 -3px 0 rgba(255,255,255, 0.05), 0 1px 2px rgba(0,0,0,0.3)");
-
+    .border-radius(2px);
+    .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), inset 0 2px 0 rgba(255,255,255, 0.2)");
     font-weight: bold;
     text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
 
     &:active { .box-shadow(~"inset 0 10px 30px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(0,0,0,0.3)"); }
 
-    &.default {
-        background: #2c4579;
-        &:active, &.active { background: #213761;}
+    &.theme {
+        background: @theme;
+        &:active, &.active { background: @theme-dark;}
     }
 }
+
 /* @end */
 
 /* @group <form> */
 @box-shadow-form: ~'inset 0 2px 1px rgba(0,0,0,0.1)';
 @box-shadow-form-active: ~'inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef';
-@box-shadow-form-big: inset 0 2px 4px rgba(0, 0, 0, 0.2);
 
 @border-radius-form: 2px;
 
 form, .form {
     & label {
-    	color: #999;
+        color: #999;
     }
 }
 input, textarea, select {
     border: 1px solid #ccc;
     .border-radius(@border-radius-form);
     color: #858585;
-    font-family: 'Roboto', Helvetica, Arial, sans-serif;
+    font-family: Helvetica, Arial, sans-serif;
     .box-shadow(@box-shadow-form);
 
     &:focus {
-		color: #000;
-    	border-color: @color-border-light;
-    	.box-shadow(0 0 6px @color-border-light);
-	}
+        color: #000;
+        border-color: @theme;
+        .box-shadow(0 0 6px @theme-light);
+    }
 }
 
 .select:after {
     background: #ccc;
     color: white;
-    border-top-right-radius: @border-radius;
-    border-bottom-right-radius: @border-radius;
+    border-top-right-radius: @border-radius-form;
+    border-bottom-right-radius: @border-radius-form;
 }
 
 /* @group .range */
 input[type="checkbox"] + span, input[type="radio"] + span {
     color: #fff;
     background: #a0a0a0;
-    .border-radius(@border-radius);
+    .border-radius(@border-radius-form);
 }
     input[type="checkbox"] + span::before,
     input[type="radio"] + span::before {
         background: #c1c1c1;
-        .border-radius(@border-radius);
+        .border-radius(@border-radius-form);
     }
 
     input[type="checkbox"]:checked + span,
     input[type="radio"]:checked + span {
-        .linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%);
-
-        .border-radius(@border-radius);
+        .linear-gradient(top, ~','@theme 0%, ~','@theme-dark 100%);
+        .border-radius(@border-radius-form);
     }
 /* @end */
 
-
-
 /* @group range */
 input[type="range"] {
     background-color: #c7c7c7;
-    .border-radius(@border-radius);
-    .box-shadow(@box-shadow-form-big);
+    .border-radius(@border-radius-form);
+    .box-shadow(@box-shadow-form);
 
+    &:active { .box-shadow(none); }
 
-    &:active {
-        .box-shadow(none);
-        .linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%);
-    }
     &::-webkit-slider-thumb {
-        //border: solid 7px rgba(255,255,255, 0.5);
-        .box-shadow(0 0 4px #333);
-        background: #fff;
+        .border-radius(12px);
+        background: #a0a0a0;
     }
     &:active::-webkit-slider-thumb {
-        .box-shadow(0px 0px 4px #34b7dc);
+        .box-shadow(0px 0px 4px @theme-light);
+        .linear-gradient(top, ~','@theme 0%, ~','@theme-dark 100%);
     }
 }
 /* @end */
@@ -360,12 +305,11 @@ input[type="range"] {
 
     & .bar {
         background: #c7c7c7;
-        .box-shadow(@box-shadow-form-big);
-        .border-radius(@border-radius);
+        .border-radius(@border-radius-form);
 
         & .value {
-            .linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%);
-            .border-radius(@border-radius);
+            .linear-gradient(top, ~','@theme-light 0%, ~','@theme-dark 100%);
+            .border-radius(@border-radius-form);
 
             & .label {
                 float: right;
@@ -381,30 +325,14 @@ input[type="range"] {
 /* @end */
 
 
-/* @end */
+/* @group .bubble */
 .bubble {
-    color: #fff;
-    .border-radius(8px);
-    text-shadow: 0 0 1px rgba(0,0,0,1);
-
-    &.count {
-    	.linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%);
-    	.box-shadow(0 0 2px rgba(0,0,0,0.5);
-    }
+    color: @white;
+    .border-radius(2px);
+    &.count { .linear-gradient(top, ~','@theme-light 0%, ~','@theme-dark 100%); }
 }
-    header .bubble.count {
-        .linear-gradient(top, ~','@color-secondary 0%, ~','@color-secondary-dark 100%);
+    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)');
     }
-
-    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)');
-	}
-
+    aside .list .bubble { background: rgba(0,0,0,0.25); }
 /* @end */

src/stylesheets/css/Lungo.theme.default.css

@@ -10,26 +10,26 @@
 /* COLORS */
 .app {
   background: #000000;
-  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  font-family: Helvetica, Arial, sans-serif;
 }
 /* @group <header> & <footer> & <article> */
 section > header {
-  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%);
-  -webkit-box-shadow: inset 0 1px 0  #64b9e2 , inset 0 -1px 0  #2566a4;
-  -moz-box-shadow: inset 0 1px 0  #64b9e2 , inset 0 -1px 0  #2566a4;
-  box-shadow: inset 0 1px 0  #64b9e2 , inset 0 -1px 0  #2566a4;
-  -webkit-box-shadow: inset 0 1px 0  #64b9e2 , inset 0 -1px 0  #2566a4;
-  -moz-box-shadow: inset 0 1px 0  #64b9e2 , inset 0 -1px 0  #2566a4;
-  box-shadow: inset 0 1px 0  #64b9e2 , inset 0 -1px 0  #2566a4;
+  background-image: -webkit-linear-gradient(top , #efeeed 0% , #e0dedf 100%);
+  background-image: -moz-linear-gradient(top , #efeeed 0% , #e0dedf 100%);
+  background-image: -ms-linear-gradient(top , #efeeed 0% , #e0dedf 100%);
+  background-image: -o-linear-gradient(top , #efeeed 0% , #e0dedf 100%);
+  background-image: linear-gradient(top , #efeeed 0% , #e0dedf 100%);
+  background-image: -webkit-linear-gradient(top , #efeeed 0% , #e0dedf 100%);
+  background-image: -moz-linear-gradient(top , #efeeed 0% , #e0dedf 100%);
+  background-image: -ms-linear-gradient(top , #efeeed 0% , #e0dedf 100%);
+  background-image: -o-linear-gradient(top , #efeeed 0% , #e0dedf 100%);
+  background-image: linear-gradient(top , #efeeed 0% , #e0dedf 100%);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -1px 0 rgba(0,0,0,0.3);
+  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -1px 0 rgba(0,0,0,0.3);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -1px 0 rgba(0,0,0,0.3);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -1px 0 rgba(0,0,0,0.3);
+  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -1px 0 rgba(0,0,0,0.3);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -1px 0 rgba(0,0,0,0.3);
   -webkit-border-radius: 4px 4px 0px 0px;
   -moz-border-radius: 4px 4px 0px 0px;
   border-radius: 4px 4px 0px 0px;
@@ -42,12 +42,9 @@ section > header {
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
-  border-bottom: 1px solid #1a2838;
-  z-index: 2;
 }
 section > header .title {
-  color: #ffffff;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
+  color: #484a49;
 }
 section > header .subtitle {
   color: rgba(255, 255, 255, 0.6);
@@ -64,7 +61,6 @@ section > footer {
   background-image: -ms-linear-gradient(top , #353b42 0% , #272a2d 60%);
   background-image: -o-linear-gradient(top , #353b42 0% , #272a2d 60%);
   background-image: linear-gradient(top , #353b42 0% , #272a2d 60%);
-  border-top: 1px inset #2A2A2A;
   color: #353b42;
   -webkit-border-radius: 0px 0px 4px 4px;
   -moz-border-radius: 0px 0px 4px 4px;
@@ -80,13 +76,12 @@ section > footer {
   background-clip: padding-box;
 }
 article {
-  background: #efefef;
+  background: #f4f5f5;
 }
 /* @end */
 /* @group <nav> */
 header nav a {
-  color: #ffffff;
-  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
+  color: #484a49;
 }
 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);
@@ -102,6 +97,18 @@ header nav:not(.plain) a.accept {
 header nav:not(.plain) a.cancel {
   background: rgba(255, 0, 0, 0.4);
 }
+header nav:not(.plain) a:active {
+  color: #ffffff;
+}
+header nav:not(.plain) a:active.accept {
+  background: rgba(0, 255, 0, 0.2);
+}
+header nav:not(.plain) a:active.cancel {
+  background: rgba(255, 0, 0, 0.2);
+}
+header nav:not(.plain) a:active:not(.accept):not(.cancel) {
+  background: rgba(0, 0, 0, 0.1);
+}
 header nav:not(.plain).right 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);
@@ -110,17 +117,26 @@ header nav:not(.plain).right a {
   -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);
 }
+footer nav a {
+  color: rgba(0, 0, 0, 0.6);
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+footer nav a.current,
+footer nav a.active {
+  color: #ffffff;
+  text-shadow: 0 0 1px #ffffff;
+  background: #000000;
+  -webkit-box-shadow: -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
+  -moz-box-shadow: -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
+  box-shadow: -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
+  -webkit-box-shadow: -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
+  -moz-box-shadow: -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
+  box-shadow: -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
+}
 .toolbar a {
   color: #cdd9e3;
   -webkit-border-radius: 4px;
@@ -147,27 +163,24 @@ header nav.plain a:active {
   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: #272a2d;
-  border-bottom: solid 1px #000000;
-  -webkit-box-shadow: inset 0 1px 8px rgba(0,0,0,0.3);
-  -moz-box-shadow: inset 0 1px 8px rgba(0,0,0,0.3);
-  box-shadow: inset 0 1px 8px rgba(0,0,0,0.3);
-  -webkit-box-shadow: inset 0 1px 8px rgba(0,0,0,0.3);
-  -moz-box-shadow: inset 0 1px 8px rgba(0,0,0,0.3);
-  box-shadow: inset 0 1px 8px rgba(0,0,0,0.3);
+  background: #353b42;
 }
 .groupbar a {
-  color: #6e6e6e;
+  color: #e3e4e3;
 }
 .groupbar a.current {
-  color: #fff;
-  border-bottom: solid 3px #2566a4;
+  color: #ffffff;
+  -webkit-box-shadow: inset 0 -3px 0 #05bde9;
+  -moz-box-shadow: inset 0 -3px 0 #05bde9;
+  box-shadow: inset 0 -3px 0 #05bde9;
+  -webkit-box-shadow: inset 0 -3px 0 #05bde9;
+  -moz-box-shadow: inset 0 -3px 0 #05bde9;
+  box-shadow: inset 0 -3px 0 #05bde9;
 }
 /* @end */
 /* @group <aside> */
 aside {
   color: #fff;
-  background: #272727;
   background: #333;
 }
 aside header,
@@ -188,33 +201,37 @@ aside .list ul {
 }
 aside .list li {
   color: #F0F0F0;
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
   border-bottom: 1px solid #2f2f2f;
 }
+aside .list li.current {
+  background: #05bde9;
+}
 aside .list li strong {
-  text-shadow: 0 1px 1px black;
-  color: #fff;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
+  color: #ffffff;
 }
 aside .list li small {
-  color: rgba(255, 255, 255, 0.3);
+  color: rgba(255, 255, 255, 0.5);
 }
 aside a.current {
-  background: #2f2f2f;
+  background: #05bde9;
 }
 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);
+  -webkit-box-shadow: -4px 0 8px rgba(0,0,0,0.4);
+  -moz-box-shadow: -4px 0 8px rgba(0,0,0,0.4);
+  box-shadow: -4px 0 8px rgba(0,0,0,0.4);
+  -webkit-box-shadow: -4px 0 8px rgba(0,0,0,0.4);
+  -moz-box-shadow: -4px 0 8px rgba(0,0,0,0.4);
+  box-shadow: -4px 0 8px rgba(0,0,0,0.4);
 }
 section.aside.right {
-  -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);
+  -webkit-box-shadow: 4px 0 8px rgba(0,0,0,0.4);
+  -moz-box-shadow: 4px 0 8px rgba(0,0,0,0.4);
+  box-shadow: 4px 0 8px rgba(0,0,0,0.4);
+  -webkit-box-shadow: 4px 0 8px rgba(0,0,0,0.4);
+  -moz-box-shadow: 4px 0 8px rgba(0,0,0,0.4);
+  box-shadow: 4px 0 8px rgba(0,0,0,0.4);
 }
 @media handheld, only screen and (min-width: 768px) {
   section.current,
@@ -239,115 +256,42 @@ section.aside.right {
 /* @end */
 /* @group .list */
 .list,
-.list li:not(.toolbar) a {
+.list li a {
   color: #2a2a2a;
 }
-.list ul {
+section .list ul,
+section .list li {
   background: #fff;
 }
-.list li {
-  border-bottom: 1px inset #f8f8f8;
+section .list li {
+  border-bottom: 1px inset #eee;
 }
 .list li:last-child {
   border-bottom: none;
 }
 .list li.selectable:active {
-  background: #93d6e7;
-  color: #1b6777;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
+  background: #42c8fc;
 }
 .list li.selectable:active small,
-.list li.selectable:active .right:not(.bubble) {
+.list li.selectable:active .right:not(.bubble),
+.list li.selectable:active strong {
   color: #ffffff;
   text-shadow: none;
 }
-.list li small,
-.list li .right: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 li.highlight {
+  background: #eee;
 }
-.list .anchor {
+.list li.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;
+  background: #484a49;
+  border-bottom: none;
 }
-.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 li small,
+.list li .right:not(.bubble) {
+  opacity: 0.75;
 }
-.list .toolbar .toolbar a.current {
-  background: transparent;
+.list li strong {
   color: #333;
-  text-shadow: none !important;
 }
 /* @end */
 /* @group widgets */
@@ -357,43 +301,44 @@ section.aside.right {
   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-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
   -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-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
 }
 .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-border-radius: 2px 2px 0px 0px;
+  -moz-border-radius: 2px 2px 0px 0px;
+  border-radius: 2px 2px 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-border-radius: 2px 2px 0px 0px;
+  -moz-border-radius: 2px 2px 0px 0px;
+  border-radius: 2px 2px 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-border-radius: 0px 0px 2px 2px;
+  -moz-border-radius: 0px 0px 2px 2px;
+  border-radius: 0px 0px 2px 2px;
   -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-border-radius: 0px 0px 2px 2px;
+  -moz-border-radius: 0px 0px 2px 2px;
+  border-radius: 0px 0px 2px 2px;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
@@ -406,24 +351,24 @@ section.aside.right {
 }
 /* @group .button */
 .button {
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
   -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-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
-  -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,0.1), inset 0 1px 0 rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 rgba(0,0,0,0.25), inset 0 -3px 0 rgba(255,255,255, 0.05), 0 1px 2px rgba(0,0,0,0.3);
-  -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,0.1), inset 0 1px 0 rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 rgba(0,0,0,0.25), inset 0 -3px 0 rgba(255,255,255, 0.05), 0 1px 2px rgba(0,0,0,0.3);
-  box-shadow: inset 1px 0 0 rgba(0,0,0,0.1), inset 0 1px 0 rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 rgba(0,0,0,0.25), inset 0 -3px 0 rgba(255,255,255, 0.05), 0 1px 2px rgba(0,0,0,0.3);
-  -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,0.1), inset 0 1px 0 rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 rgba(0,0,0,0.25), inset 0 -3px 0 rgba(255,255,255, 0.05), 0 1px 2px rgba(0,0,0,0.3);
-  -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,0.1), inset 0 1px 0 rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 rgba(0,0,0,0.25), inset 0 -3px 0 rgba(255,255,255, 0.05), 0 1px 2px rgba(0,0,0,0.3);
-  box-shadow: inset 1px 0 0 rgba(0,0,0,0.1), inset 0 1px 0 rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 rgba(0,0,0,0.25), inset 0 -3px 0 rgba(255,255,255, 0.05), 0 1px 2px 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), inset 0 2px 0 rgba(255,255,255, 0.2);
+  -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), inset 0 2px 0 rgba(255,255,255, 0.2);
+  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), inset 0 2px 0 rgba(255,255,255, 0.2);
+  -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), inset 0 2px 0 rgba(255,255,255, 0.2);
+  -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), inset 0 2px 0 rgba(255,255,255, 0.2);
+  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), inset 0 2px 0 rgba(255,255,255, 0.2);
   font-weight: bold;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
 }
@@ -435,12 +380,12 @@ section.aside.right {
   -moz-box-shadow: inset 0 10px 30px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(0,0,0,0.3);
   box-shadow: inset 0 10px 30px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(0,0,0,0.3);
 }
-.button.default {
-  background: #2c4579;
+.button.theme {
+  background: #05bde9;
 }
-.button.default:active,
-.button.default.active {
-  background: #213761;
+.button.theme:active,
+.button.theme.active {
+  background: #07acd0;
 }
 /* @end */
 /* @group <form> */
@@ -465,7 +410,7 @@ select {
   -moz-background-clip: padding;
   background-clip: padding-box;
   color: #858585;
-  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  font-family: Helvetica, Arial, sans-serif;
   -webkit-box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
   -moz-box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
   box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
@@ -477,34 +422,34 @@ input:focus,
 textarea:focus,
 select:focus {
   color: #000;
-  border-color: #64b9e2;
-  -webkit-box-shadow: 0 0 6px #64b9e2;
-  -moz-box-shadow: 0 0 6px #64b9e2;
-  box-shadow: 0 0 6px #64b9e2;
-  -webkit-box-shadow: 0 0 6px #64b9e2;
-  -moz-box-shadow: 0 0 6px #64b9e2;
-  box-shadow: 0 0 6px #64b9e2;
+  border-color: #05bde9;
+  -webkit-box-shadow: 0 0 6px #42c8fc;
+  -moz-box-shadow: 0 0 6px #42c8fc;
+  box-shadow: 0 0 6px #42c8fc;
+  -webkit-box-shadow: 0 0 6px #42c8fc;
+  -moz-box-shadow: 0 0 6px #42c8fc;
+  box-shadow: 0 0 6px #42c8fc;
 }
 .select:after {
   background: #ccc;
   color: white;
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
 }
 /* @group .range */
 input[type="checkbox"] + span,
 input[type="radio"] + span {
   color: #fff;
   background: #a0a0a0;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
   -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-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
@@ -512,40 +457,40 @@ input[type="radio"] + span {
 input[type="checkbox"] + span::before,
 input[type="radio"] + span::before {
   background: #c1c1c1;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
   -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-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
 }
 input[type="checkbox"]:checked + span,
 input[type="radio"]:checked + span {
-  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%);
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
+  background-image: -webkit-linear-gradient(top , #05bde9 0% , #07acd0 100%);
+  background-image: -moz-linear-gradient(top , #05bde9 0% , #07acd0 100%);
+  background-image: -ms-linear-gradient(top , #05bde9 0% , #07acd0 100%);
+  background-image: -o-linear-gradient(top , #05bde9 0% , #07acd0 100%);
+  background-image: linear-gradient(top , #05bde9 0% , #07acd0 100%);
+  background-image: -webkit-linear-gradient(top , #05bde9 0% , #07acd0 100%);
+  background-image: -moz-linear-gradient(top , #05bde9 0% , #07acd0 100%);
+  background-image: -ms-linear-gradient(top , #05bde9 0% , #07acd0 100%);
+  background-image: -o-linear-gradient(top , #05bde9 0% , #07acd0 100%);
+  background-image: linear-gradient(top , #05bde9 0% , #07acd0 100%);
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
   -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-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
@@ -554,24 +499,24 @@ input[type="radio"]:checked + span {
 /* @group range */
 input[type="range"] {
   background-color: #c7c7c7;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
   -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-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
-  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
+  -moz-box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
+  box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
+  -webkit-box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
+  -moz-box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
+  box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
 }
 input[type="range"]:active {
   -webkit-box-shadow: none;
@@ -580,33 +525,39 @@ input[type="range"]:active {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
-  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%);
 }
 input[type="range"]::-webkit-slider-thumb {
-  -webkit-box-shadow: 0 0 4px #333333;
-  -moz-box-shadow: 0 0 4px #333333;
-  box-shadow: 0 0 4px #333333;
-  -webkit-box-shadow: 0 0 4px #333333;
-  -moz-box-shadow: 0 0 4px #333333;
-  box-shadow: 0 0 4px #333333;
-  background: #fff;
+  -webkit-border-radius: 12px;
+  -moz-border-radius: 12px;
+  border-radius: 12px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  -webkit-border-radius: 12px;
+  -moz-border-radius: 12px;
+  border-radius: 12px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  background: #a0a0a0;
 }
 input[type="range"]:active::-webkit-slider-thumb {
-  -webkit-box-shadow: 0px 0px 4px #34b7dc;
-  -moz-box-shadow: 0px 0px 4px #34b7dc;
-  box-shadow: 0px 0px 4px #34b7dc;
-  -webkit-box-shadow: 0px 0px 4px #34b7dc;
-  -moz-box-shadow: 0px 0px 4px #34b7dc;
-  box-shadow: 0px 0px 4px #34b7dc;
+  -webkit-box-shadow: 0px 0px 4px #42c8fc;
+  -moz-box-shadow: 0px 0px 4px #42c8fc;
+  box-shadow: 0px 0px 4px #42c8fc;
+  -webkit-box-shadow: 0px 0px 4px #42c8fc;
+  -moz-box-shadow: 0px 0px 4px #42c8fc;
+  box-shadow: 0px 0px 4px #42c8fc;
+  background-image: -webkit-linear-gradient(top , #05bde9 0% , #07acd0 100%);
+  background-image: -moz-linear-gradient(top , #05bde9 0% , #07acd0 100%);
+  background-image: -ms-linear-gradient(top , #05bde9 0% , #07acd0 100%);
+  background-image: -o-linear-gradient(top , #05bde9 0% , #07acd0 100%);
+  background-image: linear-gradient(top , #05bde9 0% , #07acd0 100%);
+  background-image: -webkit-linear-gradient(top , #05bde9 0% , #07acd0 100%);
+  background-image: -moz-linear-gradient(top , #05bde9 0% , #07acd0 100%);
+  background-image: -ms-linear-gradient(top , #05bde9 0% , #07acd0 100%);
+  background-image: -o-linear-gradient(top , #05bde9 0% , #07acd0 100%);
+  background-image: linear-gradient(top , #05bde9 0% , #07acd0 100%);
 }
 /* @end */
 /* @group .progress */
@@ -618,45 +569,39 @@ input[type="range"]:active::-webkit-slider-thumb {
 }
 .progress .bar {
   background: #c7c7c7;
-  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
   -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-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
 }
 .progress .bar .value {
-  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%);
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
+  background-image: -webkit-linear-gradient(top , #42c8fc 0% , #07acd0 100%);
+  background-image: -moz-linear-gradient(top , #42c8fc 0% , #07acd0 100%);
+  background-image: -ms-linear-gradient(top , #42c8fc 0% , #07acd0 100%);
+  background-image: -o-linear-gradient(top , #42c8fc 0% , #07acd0 100%);
+  background-image: linear-gradient(top , #42c8fc 0% , #07acd0 100%);
+  background-image: -webkit-linear-gradient(top , #42c8fc 0% , #07acd0 100%);
+  background-image: -moz-linear-gradient(top , #42c8fc 0% , #07acd0 100%);
+  background-image: -ms-linear-gradient(top , #42c8fc 0% , #07acd0 100%);
+  background-image: -o-linear-gradient(top , #42c8fc 0% , #07acd0 100%);
+  background-image: linear-gradient(top , #42c8fc 0% , #07acd0 100%);
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
   -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-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
@@ -670,52 +615,33 @@ input[type="range"]:active::-webkit-slider-thumb {
   font-size: 12px;
 }
 /* @end */
-/* @end */
+/* @group .bubble */
 .bubble {
-  color: #fff;
-  -webkit-border-radius: 8px;
-  -moz-border-radius: 8px;
-  border-radius: 8px;
+  color: #ffffff;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
-  -webkit-border-radius: 8px;
-  -moz-border-radius: 8px;
-  border-radius: 8px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
-  text-shadow: 0 0 1px #000000;
 }
 .bubble.count {
-  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%);
-  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-  -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-  -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-}
-header .bubble.count {
-  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%);
+  background-image: -webkit-linear-gradient(top , #42c8fc 0% , #07acd0 100%);
+  background-image: -moz-linear-gradient(top , #42c8fc 0% , #07acd0 100%);
+  background-image: -ms-linear-gradient(top , #42c8fc 0% , #07acd0 100%);
+  background-image: -o-linear-gradient(top , #42c8fc 0% , #07acd0 100%);
+  background-image: linear-gradient(top , #42c8fc 0% , #07acd0 100%);
+  background-image: -webkit-linear-gradient(top , #42c8fc 0% , #07acd0 100%);
+  background-image: -moz-linear-gradient(top , #42c8fc 0% , #07acd0 100%);
+  background-image: -ms-linear-gradient(top , #42c8fc 0% , #07acd0 100%);
+  background-image: -o-linear-gradient(top , #42c8fc 0% , #07acd0 100%);
+  background-image: linear-gradient(top , #42c8fc 0% , #07acd0 100%);
 }
 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);
@@ -727,17 +653,5 @@ article .list .bubble {
 }
 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 */

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

@@ -1,354 +0,0 @@
-/**
- * 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) a:active.accept {
-  background: rgba(0, 255, 0, 0.2);
-}
-header nav:not(.plain) a:active.cancel {
-  background: rgba(255, 0, 0, 0.2);
-}
-header nav:not(.plain) a:active:not(.accept):not(.cancel) {
-  background: rgba(0, 0, 0, 0.25);
-}
-header nav:not(.plain).right 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.plain a:active {
-  text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
-}
-footer nav a {
-  color: #cccccc;
-}
-footer nav a.current,
-footer nav a.active {
-  color: #ffffff;
-  background: #000000;
-  -webkit-box-shadow: -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
-  -moz-box-shadow: -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
-  box-shadow: -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
-  -webkit-box-shadow: -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
-  -moz-box-shadow: -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
-  box-shadow: -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
-}
-.groupbar {
-  background: #333333;
-}
-.groupbar a {
-  color: #999999;
-}
-.groupbar a.current {
-  color: #ffffff;
-  -webkit-box-shadow: inset 0 -3px 0 #ffffff;
-  -moz-box-shadow: inset 0 -3px 0 #ffffff;
-  box-shadow: inset 0 -3px 0 #ffffff;
-  -webkit-box-shadow: inset 0 -3px 0 #ffffff;
-  -moz-box-shadow: inset 0 -3px 0 #ffffff;
-  box-shadow: inset 0 -3px 0 #ffffff;
-}
-/* @end */
-/* @group <aside> */
-aside {
-  color: #fff;
-  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.current {
-  background: #cccccc;
-}
-aside .list li strong {
-  text-shadow: 0 1px 1px black;
-  color: #ffffff;
-}
-aside .list li small {
-  color: rgba(255, 255, 255, 0.3);
-}
-aside a {
-  color: #999999;
-}
-aside a.current {
-  background: #cccccc;
-  color: #ffffff;
-}
-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.right {
-  -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.right,
-  section.show.right {
-    -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 a {
-  color: #2a2a2a;
-}
-section .list ul,
-section .list li {
-  background: #fff;
-}
-section .list li {
-  border-bottom: 1px inset #cccccc;
-}
-.list li:last-child {
-  border-bottom: none;
-}
-.list li.selectable:active {
-  background: #cccccc;
-  color: #333333;
-}
-.list li.selectable:active small,
-.list li.selectable:active .right:not(.bubble),
-.list li.selectable:active strong {
-  color: #ffffff;
-  text-shadow: none;
-}
-.list li small,
-.list li .right:not(.bubble) {
-  color: #999999;
-}
-.list li strong {
-  color: #333333;
-}
-.list .anchor {
-  color: #333333;
-  background: #cccccc;
-  border-bottom: none;
-}
-.list .contrast {
-  background: #333333;
-  color: #cccccc;
-}
-/* @end */
-/* @group widgets */
-.splash {
-  background: #333333;
-  color: #fff;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
-}
-.indented ul {
-  border: 1px solid #999999;
-  -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 {
-  color: #999;
-}
-input:not([type=checkbox]),
-textarea,
-select {
-  border: 1px solid #ccc;
-  color: #333333;
-  border-radius: 0px;
-  font-family: Helvetica, Arial, sans-serif;
-}
-input:not([type=checkbox]):focus,
-textarea:focus,
-select:focus {
-  background: #cccccc;
-  border-color: #333333;
-}
-input:not([type=checkbox]).rounded,
-textarea.rounded,
-select.rounded {
-  border-top: none;
-}
-input:not([type=checkbox]).rounded:last-of-type,
-textarea.rounded:last-of-type,
-select.rounded:last-of-type {
-  border-bottom: none;
-}
-.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-weight: bold;
-  color: #999999;
-}
-.progress .bar {
-  background: #cccccc;
-}
-.progress .bar .value {
-  background: #333333;
-}
-.progress .bar .value .label {
-  font-weight: bold;
-  color: #ffffff;
-}
-/* @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);
-}
-/* @end */

vendor/build.sh

@@ -111,7 +111,7 @@ FILES_TO_COMPRESS=""
         cp $DIR"lungo.widgets.icon."$file $BUILDPATH'lungo.icon.'$file
     done
 
-    FILES=(default.css scaffold.css )
+    FILES=(default.css)
     for file in "${FILES[@]}"
     do
         echo -e "\033[32m    [BUILD]: lungo.theme."$file"\033[0m"