Final test in App Release-Test

examples/kitchen-sink/app/sections/navigation.html

@@ -1,7 +1,7 @@
 <section id="navigation">
     <header data-back="home" data-title="Navigation">
         <nav class="onright">
-            <a href="#navigation-index" class="current" data-target="section"><abbr>Transitions</abbr></a>
+            <a href="#navigation-index" class="button" data-target="section"><abbr>Transitions</abbr></a>
         </nav>
     </header>
 

examples/release-test/app/app.js

@@ -11,15 +11,13 @@ var App = (function(lng, undefined) {
                 'navigation-normal.html',
                 'navigation-pop.html',
                 'navigation-flow.html',
-                'buttons.html',
                 'lists.html',
                 'settings.html',
                 'forms.html',
                 'buttons-extra.html',
                 'aside.html',
                 'aside-profiles.html',
-                'http://examples.tapquo.com/examples/kitchen-sink/app/sections/remote.html',
-                'http://examples.tapquo.com/examples/kitchen-sink/app/sections/error.html']
+                'http://examples.tapquo.com/examples/kitchen-sink/app/sections/remote.html']
         }
     });
 

examples/release-test/app/sections/buttons-extra.html

@@ -1,17 +1,18 @@
 <section id="buttons-extra">
     <header data-back="home" data-title="Example of buttons">
         <nav class="onright">
-            <a href="#" class="button red " data-icon="add">With icon</a>
-            <a href="#" class="button arcticblue ">Text</a>
+            <a href="#" class="button">On right</a>
         </nav>
     </header>
 
     <footer>
         <nav class="onleft">
-            <a href="#" class="button blue ">Text</a>
-            <a href="#" class="button yellow " data-icon="left"></a>
+            <a href="#" class="button blue ">Only Text</a>
+            <a href="#" class="button yellow" data-icon="left"></a>
+        </nav>
+        <nav class="onright">
+            <a href="#" class="button red" data-icon="add">With icon</a>
         </nav>
-        <a href="#" class="button orange onright" data-icon="right">onright</a>
     </footer>
 
     <article></article>

examples/release-test/app/sections/forms.html

@@ -2,9 +2,8 @@
     <header data-title="Forms" class="extended" data-back="home">
         <nav class="groupbar">
             <a href="#form-inputs" data-target="article" class="current">Inputs</a>
-            <a href="#form-others" data-target="article">Others</a>
+            <a href="#form-others" data-target="article">Extras</a>
             <a href="#form-switchs" data-target="article">Switchs</a>
-            <a href="#form-specials" data-target="article">Specials</a>
             <a href="#form-tips" data-target="article">Tips</a>
         </nav>
     </header>
@@ -45,10 +44,9 @@
     <article id="form-others" class="list">
         <div class="indented">
             <ul class="form">
-                <li class="anchor" data-icon="edit">Example of search</li>
-                <li data-search="Type a search..."></li>
-                <li class="tip darker" data-icon="question mini">It's a special form element you must set the attribute data-search="Placeholder text"</li>
-                <li class="anchor" data-icon="edit">Example of type="*"</li>
+                <li class="anchor" data-icon="edit">Example of range</li>
+                <li> <input type="range"></li>
+                <li class="anchor" data-icon="edit">Example of type="date"</li>
                 <li>
                     <input type="datetime" placeholder="Some datetime..." />
                     <input type="date" placeholder="Some date..." />
@@ -60,18 +58,6 @@
         </div>
     </article>
 
-    <article id="form-specials" class="list">
-        <div class="indented">
-            <ul class="form">
-                <li class="anchor" data-icon="edit">Example of progress</li>
-                <li data-progress="0%"></li>
-                <li class="anchor" data-icon="edit">Example of range</li>
-                <li> <input type="range"></li>
-                <li class="tip dark" data-icon="question mini">Only for iOS5 & Android 2.3+ Devices"</li>
-            </ul>
-        </div>
-    </article>
-
     <article id="form-switchs" class="list">
         <div class="container indented">
             <ul class="form">

examples/release-test/app/sections/navigation.html

@@ -1,7 +1,7 @@
 <section id="navigation">
     <header data-back="home" data-title="Navigation">
         <nav class="onright">
-            <a href="#navigation-index" class="current" data-target="section"><abbr>Transitions</abbr></a>
+            <a href="#navigation-index" class="button" data-target="section">Transitions</a>
         </nav>
     </header>
 

examples/release-test/app/view.js

@@ -12,13 +12,7 @@ App.View = (function(lng, App, undefined) {
     );
 
     var mockScrolls = function() {
-        var markup = '';
-        for (var i=0; i < 32; i++) {
-            markup += '<li>'+i+'</li>';
-        }
 
-        lng.View.Scroll.update('scroll_vertical', markup);
-        lng.View.Scroll.update('scroll_horizontal', markup);
     };
 
     return {

examples/release-test/index.html

@@ -19,67 +19,23 @@
     <link rel="apple-touch-icon-precomposed" href="assets/images/icon.png">
     <link rel="apple-touch-startup-image" href="assets/images/default.png">
     <!-- Main Stylesheet -->
-    <link rel="stylesheet" href="../../release/lungo-1.2.min.css">
-    <link rel="stylesheet" href="../../release/lungo.theme.default.css">
+    <link rel="stylesheet" href="lungojs/lungo-1.2.min.css">
+    <link rel="stylesheet" href="lungojs/lungo.theme.default.css">
     <!-- App Stylesheet -->
     <link rel="stylesheet" href="assets/stylesheets/app.css">
-
-    <style>
-        @-webkit-keyframes flow-show {
-            0% { -webkit-transform: translateX(100%) scale(.7); }
-            50% { -webkit-transform: translateX(0%) scale(.7);}
-            100% { -webkit-transform: translateX(0%) scale(1);}
-        }
-
-        @-webkit-keyframes flow-show-revoke {
-            0% { -webkit-transform: translateX(0%) scale(1); }
-            50% { -webkit-transform: translateX(0%) scale(.7);}
-            100% { -webkit-transform: translateX(100%) scale(.7);}
-        }
-
-        @-webkit-keyframes flow-hide {
-            0% { -webkit-transform: translateX(0%) scale(1); }
-            50% { -webkit-transform: translateX(0%) scale(.7); }
-            100% { -webkit-transform: translateX(-100%) scale(.7); }
-        }
-
-        @-webkit-keyframes flow-hide-revoke {
-            0% { -webkit-transform: translateX(-100%) scale(.7); }
-            50% { -webkit-transform: translateX(0%) scale(.7);}
-            100% { -webkit-transform: translateX(0%) scale(1);}
-        }
-    </style>
 </head>
 
 <body class="app">
-    <!--
-    <section id="login">
-        <article class="splash">
-            <div class="indented">
-                <h1>Kitchen<span class="semi-opacity">Sink<span></h1>
-
-                <input type="text" placeholder="Type your user" />
-                <input type="password" placeholder="Type your password" />
-
-                <a href="#kitchen-sink" data-target="section" class="button big" data-icon="check">Go to Kitchen Sink!</a>
-                <div class="copyright">Copyright TapQuo Inc, 2011</div>
-
-                <div class="switch">
-                    <span class="thumb"></span>
-                    <input type="checkbox" checked="off" />
-                </div>
-
-            </div>
-        </article>
-    </section>
-    -->
 
     <!-- ============================= kitchen-sink ============================= -->
 
     <section id="kitchen-sink">
         <header data-title="LungoJS Kitchen Sink">
             <a href="#kitchen-sink-scroll" class="button onleft" data-target="aside" data-icon="items"></a>
-            <a href="#profiles" data-target="aside" data-article="welcome" class="button onright">Profiles</a>
+            <nav class="onright">
+                <a href="#profiles" data-target="aside" data-article="welcome" class="button">Profiles</a>
+                <a href="#buttons-extra" data-target="section" data-article="buttons" class="button">Other Examples</a>
+            </nav>
         </header>
 
         <!-- ============================= welcome ============================= -->
@@ -109,10 +65,6 @@
                 <a href="#" class="button big yellow">yellow</a>
                 <a href="#" class="button big twitter">twitter</a>
                 <a href="#" class="button big facebook">facebook</a>
-
-                <div class="text">You can view other examples push in the next button</div>
-
-                <a href="#buttons-extra" data-target="section" class="button black big" data-icon="add">View other Examples</a>
             </div>
         </article>
 
@@ -193,6 +145,12 @@
                         <small>Creates a search input form</small>
                     </li>
                     <li data-search="Type your search..."></li>
+
+                    <li>
+                        data-progress
+                        <small>Creates a progress element</small>
+                    </li>
+                    <li data-progress="25%"></li>
                 </ul>
 
                 <h1 class="title">Others</h1>
@@ -322,7 +280,7 @@
     </section>
 
      <!-- LungoJS (Production mode) -->
-    <script src="../../release/lungo-1.2.packed.js"></script>
+    <script src="lungojs/lungo-1.2.packed.js"></script>
     <!-- LungoJS - Sandbox App -->
     <script src="app/app.js"></script>
     <script src="app/events.js"></script>

examples/release-test/lungojs/LICENSE.txt

@@ -0,0 +1,244 @@
+Copyright (c) 2011-2012 TapQuo Inc (Javier Jimenez Villar)
+
+===============================================================================
+===============================================================================
+
+OPEN SOURCE LICENSE FOR LUNGOJS
+Version 1.2
+
+LungoJS is an avid supporter of open source software. This is the appropriate
+option if you are creating an open source application with a license compatible
+with the GNU GPL license v3 (http://www.gnu.org/copyleft/gpl.html). Although
+the GPLv3 has many terms, the most important is that you must provide the
+source code of your application to your users so they can be free to modify
+your application for their own needs.
+
+View the license terms: http://www.gnu.org/copyleft/gpl.html
+
+THIS DOCUMENT IS A LEGAL AGREEMENT (the “License Agreement”) BETWEEN TAPQUO INC.
+(“We,” “Us”) AND YOU OR THE ORGANIZATION ON WHOSE BEHALF YOU ARE UNDERTAKING
+THE LICENSE DESCRIBED BELOW (“You”) IN RELATION TO THE LUNGOJS SOFTWARE
+LIBRARY (THE “Software”), AND/OR ALL RELATED MATERIALS. BY DOWNLOADING,
+INSTALLING, COPYING OR OTHERWISE USING THE SOFTWARE, YOU ACCEPT THE FOLLOWING
+TERMS AND CONDITIONS. IF YOU DO NOT AGREE WITH ANY OF THE TERMS OR CONDITIONS
+OF THIS LICENSE AGREEMENT, DO NOT PROCEED WITH THE DOWNLOADING, COPYING,
+INSTALLATION OR ANY OTHER USE OF THE SOFTWARE OR ANY PORTION THEREOF. THE
+SOFTWARE IS PROTECTED BY UNITED STATES COPYRIGHT LAWS AND INTERNATIONAL
+COPYRIGHT LAWS, AS WELL AS OTHER INTELLECTUAL PROPERTY LAWS AND TREATIES.
+THE SOFTWARE IS LICENSED, NOT SOLD.
+
+===============================================================================
+===============================================================================
+
+OPEN SOURCE LICENSE FAQ
+Version 1.2
+
+This document is for guidance purposes only and is not a legal document and is
+not legally binding. We encourage you to read the GPL v3 and the Quick Guide to
+the GPLv3 in their entirety and consult legal counsel if you require additional
+advice.
+
+===============================================================================
+===============================================================================
+
+LUNGOJS AND THE GPL v3
+Version 1.2
+
+-------------------------------------------------------------------------------
+What is the GPL v3?
+-------------------------------------------------------------------------------
+The GNU General Public License(GPL) is the most widely used free and open
+source software (FOSS) license in the world. The GPL was created and sponsored
+by the Free Software Foundation (FSF). Read the GPL v3 license
+
+-------------------------------------------------------------------------------
+What are the advantages of GPL v3?
+-------------------------------------------------------------------------------
+The GPL is the most widely used open source license in the world. Linux, MySQL,
+Wordpress and other major open source projects are all licensed under the GPL.
+The GPL is designed to ensure that you have the freedom to modify the software
+you use as you see fit. In return, you are asked to ensure that any users of
+software that you have built using GPL software receive the same freedom to
+modify your software in turn. Licensing under GPLv3 ensures the highest amount
+of availability in the open source community.
+
+-------------------------------------------------------------------------------
+What LungoJS products are available under the GPL v3?
+-------------------------------------------------------------------------------
+LungoJS Core, LungoJS Sugars and LungoJS Themes are all available under GPL v3.
+
+===============================================================================
+===============================================================================
+
+The GPL v3
+
+-------------------------------------------------------------------------------
+What am I not allowed to do with code that is released under the GPL v3?
+-------------------------------------------------------------------------------
+You can download the code base, install it, and modify it as needed. If you
+modify the code, we encourage you to contribute it back to the LungoJS community
+by contributing your modifications under GPL v3 in the LungoJS forums. If you
+convey your modifications (under the GPL definition of conveyance) then you
+must make your modifications available in source form to the users to whom you
+distributed your software. More information about what the GPL license allows
+is available in the GPL license itself, the Quick Guide to the GPLv3 and the
+official GPL FAQ.
+
+-------------------------------------------------------------------------------
+What is a modification?
+-------------------------------------------------------------------------------
+The simple rule to follow is if you modify any functionality or file in a Lungo
+product for a purpose other than configuration, then you have created a
+modification. All modifications of a GPLv3 licensed products are subject to the
+GPL v3 license. Additional information is available in the official GPL FAQ.
+
+The following are examples of modifications:
+    Modify JavaScript, LESS or CSS source file
+    Extend LungoJS class or override any LungoJS functions or methods
+    Modifying an LungoJS API
+
+The following are not modifications:
+    Creating a new theme in a new CSS file
+    Creating or applying a locale/language pack
+    Overriding property defaults on class prototypes (configuration)
+
+-------------------------------------------------------------------------------
+What licenses are compatible with GPL v3?
+-------------------------------------------------------------------------------
+A list of compatible licenses is available on gnu.org. This compatiblity list
+includes licenses that can be included in a GPL’ed work. The diagram below
+shows the directions of compatibility for some common licenses:
+
+
+-------------------------------------------------------------------------------
+Where can I find additional information about the GPL v3?
+-------------------------------------------------------------------------------
+The best sources are the GPL license itself, the Quick Guide to the GPLv3” and
+the official GPL FAQ.
+
+-------------------------------------------------------------------------------
+What is the LungoJS interpretation of “conveyance” under the GPL v3?
+-------------------------------------------------------------------------------
+The short answer to this question is that when a non-employee of the
+organization that created the modifications to GPL v3, uses those modifications,
+then the program has been “conveyed”.
+
+The long answer to this question is unfortunately, quite complicated,due to the
+complex wording of the GPL, the ambiguity of certain terms in copyright law and
+the nature of JavaScript programs. Here is our interpretation of what
+constitutes “conveyance” under the languages of the GPL v3.
+
+Derived Works
+When a software program calls code that is licensed under the GPLv3, then that
+software program becomes a derived work of the GPL’d code and hence subject to
+the GPLv3 copyright license. If the software program is then “conveyed” to a
+user, the GPLv3 requires that the source code to that software program also be
+“conveyed.” “Conveyance” for a web application is triggered when a user outside
+the legal entity that created the application uses the application.
+
+The Definition of a Software Program
+Since the boundaries defining an individual software program can be hazy in
+modern app architectures, we follow the rule “when determining what constitutes
+the software program, follow the main principle of the GPL v3, which states
+that users should be free to modify the entire software program that
+incorporates GPL’d code for their own purposes”. For software programs built
+using today’s web architectures that use remote network-based service
+interfaces for internal communication instead of traditional static or dynamic
+linking, the relevant software program is the totality of the application code,
+including code executed on the server and code executed on the client, provided
+that the server code is integral to the application. We exclude from the
+definition of “software program”, software incorporated into the software
+program via a service interface that provides functionality ancillary to the
+main purpose of the program, functionality un-related to application logic, or
+functionality that is used by a number of separate applications other than the
+application in question. With this caveat, please remember that the use of any
+specific technical approach in and of itself does not guarantee that
+“derivation” will not be held to have occurred.
+
+Example
+For example: let’s take a mortgage processing software program. Let’s say that
+the application has a front-end (that generates web pages linked to LungoJS
+JavaScript) that communicates over JSON/HTTP with a backend service. This
+backend service contains approval and validation logic for this application
+alone. Even if only the front-end uses LungoJS code, you should consider that
+the combination of front and back ends constitutes the application, and the
+source code for both back and front end would need to be provided to the
+application’s end users under GPLv3 if the application is used by an end-user
+who is not part of the same legal entity that holds the GPLv3 license to the
+LungoJS code.
+
+Next, let’s assume that the mortgage application web-pages also offer
+functionality that allows users to search current interest rates, and file a
+customer support ticket (functionality ancillary to the purpose of the
+application) and those functions are provided by separate server-side services.
+We do not consider those programs to compose part of the software program for
+the purposes of the GPLv3. For example, in all cases we would not consider a
+database that provides data interfaces to the application over standard
+interfaces to be part of the application.
+
+Reasonableness Test
+As mentioned above, in many cases, there can be ambiguity about the exact
+boundaries of a software program. In these cases, we apply a “reasonableness”
+test to establish application boundaries. Following the principles of the GPL
+v3, we should ask “what would a user who is conveyed a copy of the application
+reasonably expect to receive in source code form in order to modify the
+application for his or her needs.”
+
+Certain Technical Strategies
+Our interpretation is that the use of technical strategies that store and
+transmit LungoJS code as data (for example by storing JavaScript libraries as
+data-files within a database which are then transmitted as data files to the
+browser and only then converted into a program through the use of eval()) does
+not change the above definition of software program under the GPLv3 definitions.
+
+Definition of License Holder
+Following GPL v3 guidelines, we consider the holder of the GPL v3 license to be
+the legal entity that owns the rights to the work product of the developer who
+writes the software code that calls LungoJS functions. For example, a developer
+that downloads LungoJS and uses it to build an application that is copied to
+multiple offices within their company and serves web pages to employees across
+the country, has not triggered “conveyance” of the program since the containing
+corporate entity is the licensee, not the individual developer. However if a
+contractor, agent, employee of another subsidiary or other non-employee uses
+that software, then conveyance has occurred.
+
+In addition, if a copy of the software program is provided by the developer to
+a person in another legal entity, then we consider that “conveyance”, as
+defined by the GPLv3, has occurred, and that person must be provided with a
+copy of the source for the software program. Further conveyance by the
+recipient would only be permitted under the GPL v3.
+
+Conveyance vs. Propagation
+Since LungoJS are software programs that can run within the browser while
+disconnected from the network or the rest of a server program; when a LungoJS
+based interface is embedded in a web-page served to a user who does not have an
+employee relationship with the original licensed entity, we consider that
+“conveyance” rather than simple web page “propagation” as defined by the GPL v3
+has occurred, and the source code of the whole application must be provided to
+the user.  Users who are not entitled to use the software under the original
+license grant to the recipient legal entity (whose developer downloaded and
+wrote to the LungoJS libraries) include contractors, agents, and distributors
+of the original legal entity, as well as employees of related corporate
+subsidiaries or parents. In these cases, a user who is a contractor must be
+provided with a copy of the source code of the application with further
+conveyance by the contractor permitted only under the GPL v3. This also applies
+to web development firms who create software programs under contract for a
+client.
+
+In the case of the GPLv3 licensed entities, our interpretation is that the
+distribution of abstraction/intermediary libraries to contractors or users
+outside the licensed legal entity for development purposes also falls under
+the definition of “conveyance.”
+
+-------------------------------------------------------------------------------
+GPL v3 Is The Official License
+-------------------------------------------------------------------------------
+While this is our best attempt to characterize our interpretation of the GPL v3,
+relatively little of this interpretation has been confirmed in law due to the
+limited case law surrounding GPL v3. In all cases, the GPL v3 text itself
+constitutes the actual legal agreement between LungoJS and our GPL v3 licensees.
+This FAQ does not constitute legal advice, but reflects our position on the
+responsibilities of users who use our software licensed under the GPLv3. We do
+not provide legal advice to current or potential users of our GPLv3 licensed
+programs, so we ask you to consult your own legal counsel if you have further
+questions.

examples/release-test/lungojs/lungo.theme.default.css

@@ -0,0 +1,294 @@
+/**
+ * Stylesheet
+ *
+ * @namespace LUNGO.Theme
+ * @class Default
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "lungo.theme.default.font.css";
+
+.app {
+  background: #000000;
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+}
+/* @group <header> & <footer> & <article> */
+header {
+  background-color: #05b8e2;
+  border-top: 1px solid #05bde9;
+  border-bottom: 1px solid #07acd0;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+}
+footer {
+  background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1c1c));
+  border-top: 1px inset #1c1c1c;
+}
+.title {
+  color: #ffffff;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
+}
+article {
+  background-color: #ededed;
+}
+article .title {
+  color: #797979;
+  text-shadow: 0px 1px 0px #fff;
+}
+/* @end */
+/* @group <nav> */
+nav a {
+  color: rgba(255, 255, 255, 0.5);
+}
+nav a.current, nav a.active {
+  color: #ffffff;
+}
+.toolbar a {
+  color: rgba(255, 255, 255, 0.2);
+}
+.toolbar a.current, .toolbar a.active {
+  background: #1c1c1c;
+  box-shadow: inset 0px 0px 8px #101010;
+  text-shadow: 0px 1px 4px #000;
+}
+.groupbar {
+  background: #ededed;
+  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
+}
+.groupbar a {
+  color: #6e6e6e;
+}
+.groupbar a.current {
+  color: #6e6e6e;
+  border-bottom: solid 3px #05bde9;
+}
+/* @end */
+/* @group <aside> */
+aside {
+  background: #252525;
+}
+aside .title {
+  background: #101010;
+  border: none;
+}
+aside a {
+  color: #fff;
+  text-shadow: 0px 1px 0px #000;
+  border-bottom: 1px inset #101010;
+  border-top: 1px inset #868686;
+}
+aside a.current {
+  background: #1c1c1c;
+  box-shadow: inset 0px 0px 8px #101010;
+  border-top: 1px inset #1c1c1c;
+}
+aside a .icon {
+  text-shadow: none;
+  color: #7a7a7a;
+}
+aside .anchor {
+  background: #101010;
+  color: #7a7a7a;
+}
+section.aside {
+  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.5);
+}
+section.aside.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);
+  }
+  section.current.onright, section.show.onright {
+    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.5);
+  }
+}
+/* @end */
+/* @group .list */
+.list, .list li:not(.toolbar) a {
+  color: #2a2a2a;
+}
+.list li {
+  background: #fff;
+  border-bottom: 1px inset #e1e1e1;
+}
+.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);
+}
+.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.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 {
+  background: #93d6e7;
+  color: #1b6777;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
+  border: none;
+}
+.list .tip {
+  color: #7a7a7a;
+}
+.list .tip.darker {
+  background-color: #2c2c2d;
+  color: #fff;
+  text-shadow: 0px 1px 0px #000;
+}
+.list .tip.darker a {
+  color: #fff !important;
+}
+.list .tip.dark {
+  background-color: #f4f4f4;
+  box-shadow: inset 0px 1px 0px #fff;
+  text-shadow: 0px 1px 0px #fff;
+}
+.list .toolbar {
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+}
+.list .toolbar .toolbar a {
+  box-shadow: 1px 0px 0px #d9d9d9;
+}
+.list .toolbar .toolbar a:last-child {
+  box-shadow: none;
+}
+.list .toolbar .toolbar a.current {
+  background: transparent;
+  color: #333;
+  text-shadow: none !important;
+}
+/* @end */
+/* @group widgets */
+.splash {
+  background: #07acd0;
+  color: #fff;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
+}
+/* @group .button */
+.button {
+  border-bottom: 1px inset rgba(0, 0, 0, 0.2);
+  -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 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+.button:active, .button.active {
+  -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 0 2px rgba(0, 0, 0, 0.2);
+  border-bottom-color: rgba(0, 0, 0, 0);
+}
+header .button:active,
+footer .button:active,
+header .button:active,
+footer .button:active {
+  height: 29px;
+  position: relative;
+  top: 1px;
+}
+.button.default {
+  background: #5a5a5a;
+}
+.button.default:active, .button.default.active {
+  background: #4b4b4b;
+}
+/* @end */
+/* @group <inputs> */
+input, textarea, select {
+  border: 1px solid #e1e1e1;
+  color: #858585;
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+}
+input:focus, textarea:focus, select:focus {
+  border-color: #05b8e2;
+  color: #05b8e2;
+}
+label {
+  color: #05b8e2;
+  text-transform: uppercase;
+  font-weight: bold;
+}
+.select:after {
+  background: #858585;
+  color: white;
+}
+input[type="checkbox"] + span, input[type="radio"] + span {
+  color: #fff;
+  background: #a0a0a0;
+}
+input[type="checkbox"] + span::before, input[type="radio"] + span::before {
+  background: #c1c1c1;
+}
+input[type="checkbox"]:checked + span, input[type="radio"]:checked + span {
+  background: #07acd0;
+}
+/* @group range */
+input[type="range"] {
+  background-color: #c7c7c7;
+}
+input[type="range"]:active {
+  background-color: #34b7dc;
+}
+input[type="range"]::-webkit-slider-thumb {
+  border: solid 7px rgba(255, 255, 255, 0.5);
+  background: #34b7dc;
+}
+input[type="range"]:active::-webkit-slider-thumb {
+  box-shadow: 0px 0px 4px #34b7dc;
+}
+/* @end */
+/* @group .progress */
+.progress .labels {
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 18px;
+  color: #858585;
+}
+.progress .bar {
+  background: #c7c7c7;
+}
+.progress .bar .value {
+  background: #34b7dc;
+}
+.progress .bar .value .glow {
+  background-color: rgba(255, 255, 255, 0.25);
+  box-shadow: 0px 0px 3px #34b7dc;
+}
+/* @end */
+/* @end */
+.bubble {
+  color: #fff;
+  -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: none;
+  font-weight: bold !important;
+}
+header .bubble.count {
+  background: #2c2c2d;
+}
+.bubble.count {
+  background: #05b8e2;
+}
+/* @end */