New folder for stylesheets

release/lungo.theme.default.css

@@ -0,0 +1,500 @@
+@import "lungo.theme.default.font.css";
+/**
+ * Stylesheet
+ *
+ * @namespace LUNGO.Theme
+ * @class Default
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+/* @group DIMENSIONS */
+/* @end */
+/* @group COLORS */
+/* @end */.app {
+  background: #000000;
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+}
+/* @group <header> & <footer> & <article> */
+header {
+  /*border-top-left-radius: 5px;
+	border-top-right-radius: 5px;*/
+
+  border-bottom: 1px solid #1a2838;
+  background: #2c8bca -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2c8bca), color-stop(100%, #154f93));
+  box-shadow: inset 0 1px 0 #64b9e2, inset 0 -1px 0 #2566a4;
+  position: absolute;
+  z-index: 2;
+}
+header .title {
+  color: #ffffff;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
+}
+header .subtitle {
+  color: rgba(255, 255, 255, 0.6);
+  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
+}
+footer {
+  background: #353b42 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #353b42), color-stop(50%, #272a2d));
+  border-top: 1px inset #2A2A2A;
+  color: #353b42;
+}
+article {
+  background-color: #EBEBEB;
+}
+article .title {
+  color: #797979;
+  text-shadow: 0px 1px 0px #fff;
+}
+/* @end */
+/* @group <nav> */
+header nav a {
+  color: #ffffff;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
+}
+header nav:not(.plain) a {
+  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2), inset -1px 0 0 rgba(0, 0, 0, 0.2);
+}
+header nav:not(.plain) a.accept {
+  background: rgba(0, 255, 0, 0.4);
+}
+header nav:not(.plain) a.cancel {
+  background: rgba(255, 0, 0, 0.4);
+}
+header nav:not(.plain).onright a {
+  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 {
+  box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1), inset -1px 0 0 rgba(0, 0, 0, 0.1), inset 0 0 42px rgba(0, 0, 0, 0.5);
+}
+header nav.plain a:active {
+  text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
+}
+.toolbar a {
+  color: #cdd9e3;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  font-weight: bold;
+}
+.toolbar a.current,
+.toolbar a.active {
+  background: #111;
+  box-shadow: inset 0 1px 1px #000000, -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;
+  box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.3);
+}
+.groupbar a {
+  color: #6e6e6e;
+}
+.groupbar a.current {
+  color: #fff;
+  border-bottom: solid 3px #2566a4;
+}
+/* @end */
+/* @group <aside> */
+aside {
+  color: #9faab1;
+  background-color: #2f353a;
+}
+aside .title {
+  background: #252525;
+}
+aside a {
+  color: #9faab1;
+  text-shadow: 0px 1px 0px #000;
+}
+aside a.current,
+aside a.current .icon {
+  color: #ffffff !important;
+}
+aside:not(.mini) a {
+  border-bottom: 1px inset #222;
+  border-top: 1px inset rgba(255, 255, 255, 0.1);
+}
+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 {
+  color: #ffffff;
+  background: #2c8bca -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2c8bca), color-stop(100%, #154f93));
+  border: none;
+}
+.list .tip {
+  color: #7a7a7a;
+}
+.list .tip.theme {
+  color: #fff;
+  background: #2c8bca -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2c8bca), color-stop(100%, #154f93));
+}
+.list .tip.dark {
+  background: #353b42 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #353b42), color-stop(100%, #272a2d));
+  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 {
+  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);
+}
+.indented ul {
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+}
+.indented li:first-child {
+  -webkit-border-radius: 5px 5px 0px 0px;
+  -moz-border-radius: 5px 5px 0px 0px;
+  border-radius: 5px 5px 0px 0px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  -webkit-border-radius: 5px 5px 0px 0px;
+  -moz-border-radius: 5px 5px 0px 0px;
+  border-radius: 5px 5px 0px 0px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+}
+.indented li:last-child {
+  -webkit-border-radius: 0px 0px 5px 5px;
+  -moz-border-radius: 0px 0px 5px 5px;
+  border-radius: 0px 0px 5px 5px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  -webkit-border-radius: 0px 0px 5px 5px;
+  -moz-border-radius: 0px 0px 5px 5px;
+  border-radius: 0px 0px 5px 5px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
+}
+/* @group .button */
+.button {
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  -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);
+  font-weight: bold;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
+}
+.button:active {
+  -webkit-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.default:active,
+.button.default.active {
+  background: #213761;
+}
+/* @end */
+/* @group <form> */
+form,
+.form {
+  font-weight: bold;
+}
+form li,
+.form li {
+  min-height: 27px;
+}
+form label,
+.form label {
+  color: #999;
+}
+input,
+textarea,
+select {
+  border: 1px solid #e1e1e1;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  color: #858585;
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+input.underline,
+textarea.underline,
+select.underline {
+  border: none;
+  box-shadow: none;
+  border-bottom: 2px solid #e1e1e1;
+}
+input:focus,
+textarea:focus,
+select:focus {
+  color: #64b9e2;
+  border-color: #64b9e2;
+}
+.select:after {
+  background: #858585;
+  color: white;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+/* @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-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+}
+input[type="checkbox"] + span::before,
+input[type="radio"] + span::before {
+  background: #c1c1c1;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+}
+input[type="checkbox"]:checked + span,
+input[type="radio"]:checked + span {
+  background: #2c8bca -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2c8bca), color-stop(100%, #154f93));
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+}
+/* @end */
+/* @group range */
+input[type="range"] {
+  background-color: #c7c7c7;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+input[type="range"]:active {
+  box-shadow: none;
+  background: #2c8bca -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2c8bca), color-stop(100%, #154f93));
+}
+input[type="range"]::-webkit-slider-thumb {
+  box-shadow: 0 0 4px #333;
+  background: #fff;
+}
+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;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+}
+.progress .bar .value {
+  background: #2c8bca -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2c8bca), color-stop(100%, #154f93));
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+}
+.progress .bar .value .label {
+  float: right;
+  margin-right: 3px;
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.6);
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) !important;
+  font-size: 12px;
+}
+/* @end */
+/* @end */
+.bubble {
+  color: #fff;
+  -webkit-border-radius: 7px;
+  -moz-border-radius: 7px;
+  border-radius: 7px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  -webkit-border-radius: 7px;
+  -moz-border-radius: 7px;
+  border-radius: 7px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
+  font-weight: bold !important;
+  box-shadow: 0 0 6px #000;
+}
+.bubble.count {
+  background: #2c8bca -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2c8bca), color-stop(100%, #154f93));
+}
+header .bubble.count {
+  background: #2c2c2d;
+}
+/* @end */

src/stylesheets/Lungo.base.less

@@ -0,0 +1,151 @@
+/**
+ * Stylesheet
+ *
+ * @namespace LUNGO
+ * @class Base
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+a,
+abbr,
+address,
+article,
+aside,
+audio,
+b,
+blockquote,
+body,
+caption,
+cite,
+code,
+dd,
+del,
+dfn,
+dialog,
+div,
+dl,
+dt,
+em,
+fieldset,
+figure,
+footer,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+header,
+hgroup,
+hr,
+html,
+i,
+iframe,
+img,
+ins,
+kbd,
+label,
+legend,
+li,
+mark,
+menu,
+nav,
+object,
+ol,
+p,
+pre,
+q,
+samp,
+section,
+small,
+span,
+strong,
+sub,
+sup,
+table,
+tbody,
+td,
+tfoot,
+th,
+thead,
+time,
+tr,
+ul,
+var,
+video {
+    border: 0;
+    margin: 0;
+    outline: 0;
+    padding: 0;
+    font-size: 100%;
+}
+
+a {
+    text-decoration: none;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+
+a:hover {
+    opacity: 1;
+}
+
+html {
+    height: 100%;
+    font-size: 100%;
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;}
+
+body {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    min-height: 100%;
+
+    overflow: hidden;
+
+    font-family: Helvetica, Arial, sans-serif;
+    font-size: 13px;
+    line-height: 1.231;
+
+    -webkit-touch-callout: none;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-box-align: stretch;
+}
+
+b,
+strong {
+    font-weight: bold;
+}
+
+img {
+    border: 0;
+    -ms-interpolation-mode: bicubic;
+    vertical-align: middle;
+
+    font-size: 0;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+th,
+td,
+caption {
+    vertical-align: top;
+    font-weight: normal;
+    text-align: left;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+
+    -webkit-user-select: none;
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+}

src/stylesheets/Lungo.layout.article.less

@@ -0,0 +1,60 @@
+/**
+ * Stylesheet
+ *
+ * @namespace LUNGO.Layout
+ * @class Article
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "mixins.less";
+@import "constants.less";
+
+
+@defaultTrasition : @easeOutSine;
+@header_footer_height: 40px;
+    @header_extended_height: 75px;
+@footer_toolbar_height: 48px;
+
+/* @group <article> */
+article {
+    position: absolute;
+    width: 100% !important;
+    height: auto;
+    top: 0px;
+    bottom: 0px;
+
+    display: none;
+    visibility: hidden;
+    z-index: 0;
+
+    &.current {
+        visibility: visible;
+        display: block;
+        z-index: 1;
+    }
+
+    & .title {
+        font-size: 1.1em;
+        margin: 0px 0 4px;
+        & .icon { margin-right: 4px; }
+    }
+
+    & .text {
+        margin: 4px 0 8px;
+        display: block;
+        font-size: 0.9em;
+        font-weight: normal;
+        line-height: 1.4em;
+    }
+}
+
+header:not(.extended) ~ article { top: @header-height; }
+    header.extended ~ article { top: @header_extended_height; }
+footer:not(.with-labels) ~ article { bottom: @article-bottom; }
+    footer.with-labels ~ article { bottom: @article-bottom-with-labels; }
+
+@media handheld, only screen and (min-width: 768px) {
+    article.aside { .transform(translate3d(0px, 0, 0)); }
+}
+/* @end */

src/stylesheets/Lungo.layout.aside.less

@@ -0,0 +1,115 @@
+/**
+ * Stylesheet
+ *
+ * @namespace LUNGO.Layout
+ * @class Aside
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "constants.less";
+@import "mixins.less";
+
+section.aside {
+    &:not(.mini) { .transform(translate(@aside-width, 0)); }
+    &.mini { .transform(translate(@aside-width-mini, 0)); }
+
+    &.onright {
+        .transform(translate(-@aside-width, 0));
+        &.mini { .transform(translate(-@aside-width-mini, 0)); }
+    }
+}
+
+aside {
+    position: absolute;
+    width: inherit;
+    height: inherit;
+    top: 0px;
+    visibility: hidden;
+    z-index: 0;
+
+    width: @aside-width;
+    max-width: @aside-width;
+
+    &.onright { right: 0px; }
+    &.current { visibility: visible;}
+
+    & .title {
+        line-height: 42px;
+        height: 41px;
+        font-size: 15px;
+        font-weight: bold;
+    }
+
+    & .title, & .anchor, & a {
+        padding: 0 6px;
+    }
+
+    & a {
+        display: block;
+        height: 40px;
+
+        font-size: 14px;
+        //font-weight: bold;
+        line-height: 40px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    & .bubble {
+        float: right;
+        font-size: 11px;
+    }
+    & *.not(.anchor) .bubble { margin-top: 13px; }
+    & *.anchor .bubble { margin-top: 2px; }
+
+    & .icon {
+        width: 24px;
+        float: left;
+        margin: 8px 4px 0 0;
+
+        font-size: 24px;
+        line-height: 24px;
+        text-align: center;
+    }
+
+    & .anchor {
+        font-weight: bold;
+        line-height: 19px;
+    }
+
+    &.mini {
+        width: @aside-width-mini;
+
+        & a {
+            padding: 0 8px;
+            height: @aside-width-mini;
+        }
+        & .icon {
+            height: 48px;
+            width: 48px;
+            font-size: 48px;
+            line-height: 48px;
+            //background: red;
+        }
+
+        & .bubble {
+            margin-top: -48px;
+        }
+    }
+}
+
+@media handheld, only screen and (min-width: 768px) {
+    .autohide[data-target="aside"] {  display: none !important; }
+
+    section.aside {
+        width: auto !important;
+        left: @aside-width;
+        right: 0px !important;
+        .transform(translate3d(0px, 0, 0));
+        -webkit-transition: none;
+
+        &.mini{ left: @aside-width-mini; }
+    }
+}

src/stylesheets/Lungo.layout.less

@@ -0,0 +1,112 @@
+/**
+ * Stylesheet
+ *
+ * @namespace LUNGO
+ * @class Layout
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "constants.less";
+@import "mixins.less";
+
+body {  overflow: hidden; }
+
+/* @group <section> */
+section {
+    position: absolute; /* position: fixed on iOS5 & Android 4 */
+    left:  0px;
+    top:  0px;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+
+    display: none;
+    visibility: hidden;
+    .transition(all 250ms @defaultTrasition);
+    -webkit-backface-visibility: hidden;
+
+    &:first-child, &.show {
+        z-index: 1;
+        display: block;
+        visibility: visible;
+    }
+    &.hide {
+        z-index: 0;
+        display: none;
+        visibility: hidden;
+    }
+
+    &.slide, &.pop { display: block !important; }
+
+    &.slide {
+        .transform(translate(100%, 0));
+        visibility: visible !important;
+
+        &:first-child, &.show { .transform(translate(0%, 0)); }
+        &.hide { .transform(translate(-100%, 0)); }
+    }
+
+    &.pop {
+        opacity: 0;
+        .transform(scale(1.15));
+
+        &:first-child, &.show {
+            .transform(scale(1));
+            opacity: 1;
+        }
+        &.hide {
+            .transform(scale(0.9));
+            opacity: 0;
+        }
+    }
+}
+/* @end */
+
+/* @group <header> & <footer> */
+header, footer  {
+    position: absolute;
+    left: 0px;
+    width: 100%;
+    height: @header-height;
+    display: block;
+    z-index: 2;
+
+    line-height: @header-height;
+    overflow: hidden;
+}
+
+header {
+    top: 0px;
+
+    & .title {
+        margin-left: 4px;
+        float: left;
+        z-index: -1;
+        font-size: 15px;
+        font-weight: bold;
+
+        &.centered {
+            position: absolute;
+            left: 0px;
+            right: 0px;
+            text-align: center;
+            display: inline-block;
+        }
+        &.with-subtitle {
+            line-height: 20px;
+            padding-top: 4px;
+        }
+    }
+
+    & .subtitle {
+        margin-left: 4px;
+        display:block;
+        font-size: 11px;
+        line-height: 11px;
+        width: 100%;
+    }
+}
+
+footer  { bottom: 0px; }
+/* @end */

src/stylesheets/Lungo.layout.list.less

@@ -0,0 +1,97 @@
+/**
+ * Stylesheet
+ *
+ * @namespace LUNGO.Layout
+ * @class List
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "constants.less";
+@import "mixins.less";
+
+.list {
+    font-size: 1.15em;
+
+    & a {
+        display: block;
+    }
+
+    & li:not(.toolbar) {
+        padding: 8px 6px 8px 8px;
+        list-style-type: none;
+
+        & .icon, & img {
+            float: left;
+            width: 32px;
+            height: 32px;
+            margin-right: 6px;
+            font-size: 36px;
+            font-weight: normal;
+        }
+    }
+
+    & .icon, & img {
+        display: inline-block;
+    }
+
+    & small {
+        display: block;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-size: 0.85em;
+    }
+
+    & li.anchor {
+        font-size: 0.85em;
+        padding: 4px 4px 3px;
+
+        & .icon {
+            width: 14px !important;
+            height: 14px !important;
+            margin-right: 2px !important;
+            font-size:  1.6em !important;
+            line-height: 14px !important;
+        }
+
+        & .bubble { display: none; }
+    }
+
+    & .tip {
+        font-size: 0.85em;
+        font-weight: bold;
+    }
+
+    & .search {
+        & input { width: 88%; }
+
+        & a {
+            float: right;
+            height: 30px;
+            margin: 0px;
+            padding: 0px;
+
+            & icon {
+                height: 12px;
+                width: 30px;
+                margin: 0px;
+                font-size: 1.2em;
+                font-weight: normal;
+            }
+        }
+    }
+
+    & .onright {
+        font-size: 0.75em;
+        line-height: 16px;
+    }
+
+    & .onright .icon, & small .icon {
+        font-size: 1.4em !important;
+        line-height: 16px;
+        height: 14px !important;
+        width: 14px !important;
+        margin-right: 0px !important;
+    }
+}

src/stylesheets/Lungo.layout.nav.less

@@ -0,0 +1,116 @@
+/**
+ * Stylesheet
+ *
+ * @namespace LUNGO.Layout
+ * @class Nav
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "constants.less";
+@import "mixins.less";
+
+nav {
+    height: auto;
+    text-align: center;
+
+    & a {
+        padding: 0 6px;
+        min-width: 28px;
+        z-index: 1000;
+        float: left;
+
+        & .icon {
+            position: relative;
+            top:  3px;
+            font-size: 24px;
+            display: inline-block;
+        }
+
+        & img {
+            width: 16px;
+            height: 16px;
+            top: -1px !important;
+        }
+
+        & abbr {
+            position: relative;
+            display: inline;
+            font-weight: bold;
+        }
+    }
+
+    & .bubble {
+        position: relative;
+        top:  -8px;
+        left: -8px;
+        margin-right: -20px;
+    }
+}
+
+header, footer {
+    &:not(.toolbar) nav .icon ~ abbr { margin-left: 6px; }
+}
+
+.toolbar {
+    height:  40px;
+
+    & nav {
+        margin: 2px;
+        display: block;
+    }
+
+    & a {
+        padding: 0;
+        height:  36px;
+    }
+
+    &.with-labels {
+        height: @with-labels-height;
+
+        & a { height:  47px; }
+        & .icon { padding-bottom: 12px; }
+    }
+
+    & .icon {
+        display: block;
+        top:  0px;
+        font-size: 34px;
+        line-height: 34px;
+    }
+
+    & .bubble {
+        top:  -44px;
+        left: 4px;
+    }
+
+    & abbr {
+        position: absolute;
+        top: 32px;
+        width: inherit;
+        height: 14px;
+        margin-left: 0px;
+        display: block !important;
+
+        font-size: 11px;
+        line-height: 14px;
+
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+}
+
+.groupbar {
+    position: absolute;
+    top: 43px;
+    height: 28px;
+    display: block;
+    width: 100%;
+    padding: 4px 0 2px;
+    display: block;
+    line-height: 28px;
+    z-index: 2;
+
+    & a { padding: 0px; font-weight: bold;}
+}

src/stylesheets/Lungo.theme.default.less

@@ -0,0 +1,405 @@
+/**
+ * Stylesheet
+ *
+ * @namespace LUNGO.Theme
+ * @class Default
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "constants.less";
+@import "mixins.less";
+
+@import "lungo.theme.default.font.css";
+
+@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-secondary: #2c2c2d;
+        @theme-secondary-dark: #1c1c1c;
+
+
+@color-border: #2566a4;
+@color-border-light: #64b9e2;
+
+@background-main: #2c8bca -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2c8bca), color-stop(100%,#154f93));
+@background-secondary: #353b42 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #353b42), color-stop(100%, #272a2d));
+    @background-secondary-footer: #353b42 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #353b42), color-stop(50%, #272a2d));
+
+.app {
+    background: @black;
+    font-family: 'Roboto', Helvetica, Arial, sans-serif;
+}
+
+/* @group <header> & <footer> & <article> */
+header {
+    /*border-top-left-radius: 5px;
+    border-top-right-radius: 5px;*/
+    border-bottom: 1px solid #1a2838;
+
+    background: @background-main;
+
+    box-shadow: inset 0 1px 0 @color-border-light, inset 0 -1px 0 @color-border;
+
+    position: absolute;
+    z-index: 2;
+
+    & .title {
+        color: @white;
+        text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
+    }
+
+    & .subtitle {
+        color: rgba(255,255,255,0.6);
+        text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
+    }
+}
+
+footer {
+    background: @background-secondary-footer;
+
+    border-top: 1px inset #2A2A2A;
+    color: #353b42;
+
+    //border-bottom-left-radius: 5px;
+    //border-bottom-right-radius: 5px;
+}
+
+article {
+    background-color: #EBEBEB;
+    & .title {
+        color: #797979;
+        text-shadow: 0px 1px 0px #fff;
+    }
+}
+/* @end */
+
+/* @group <nav> */
+header nav {
+
+    & a {
+        color: @white;
+        text-shadow: 0 1px 0 rgba(0,0,0,0.3);
+    }
+
+    &:not(.plain) {
+        & a {
+            box-shadow: 1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2);
+
+            &.accept { background: rgba(0, 255, 0, 0.4); }
+            &.cancel { background: rgba(255, 0, 0, 0.4); }
+        }
+        &.onright a { box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2); }
+
+        & a:active { box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 0 42px rgba(0,0,0,0.5); }
+    }
+
+    &.plain a:active { text-shadow: 0 0 4px rgba(255,255,255,0.5); }
+}
+
+.toolbar a {
+    color: #cdd9e3;
+    .border-radius(4px);
+    font-weight: bold;
+
+    &.current, &.active {
+        background: #111;
+        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 rgba(0,0,0,1);
+    box-shadow: inset 0 1px 8px rgba(0,0,0,0.3);
+
+    & a {
+        color: #6e6e6e;
+        &.current {
+            color:  #fff;
+            border-bottom: solid 3px @color-border;
+        }
+    }
+}
+/* @end */
+
+/* @group <aside> */
+aside {
+    color: #9faab1;
+    background-color: #2f353a;
+
+    & .title { background: #252525; }
+
+    & a {
+        color: #9faab1;
+        text-shadow: 0px 1px 0px #000;
+        &.current, &.current .icon { color: @white !important; }
+    }
+
+    &:not(.mini) a {
+        border-bottom: 1px inset #222;
+        border-top: 1px inset rgba(255,255,255,0.1);
+    }
+
+    & .anchor {
+        background: #101010;
+        color:  #7a7a7a;
+    }
+}
+
+section.aside {
+    box-shadow: -4px 0 8px rgba(0,0,0,0.5);
+    &.onright { box-shadow: 4px 0 8px rgba(0,0,0,0.5); }
+}
+
+@media handheld, only screen and (min-width: 768px) {
+    section.current, section.show {
+        box-shadow: -4px 0 8px rgba(0,0,0,0.5);
+        &.onright { box-shadow: 4px 0 8px rgba(0,0,0,0.5); }
+    }
+}
+/* @end */
+
+/* @group .list */
+.list, .list li:not(.toolbar) a { color: #2a2a2a; }
+
+.list {
+    & li {
+        background: #fff;
+
+        border-bottom: 1px inset #e1e1e1;
+
+
+        &:last-child { border-bottom: none; }
+
+        &.selectable:active {
+            background: @theme-highlight;
+            color: @theme-highlight-color;
+            text-shadow: @theme-highlight-text-shadow;
+
+            & small, & .onright:not(.bubble) {
+                color: @white;
+                text-shadow: none;
+            }
+        }
+
+        & small, & .onright:not(.bubble) { color: #888; }
+    }
+
+    &.indented li {
+        border-left: solid 1px #e1e1e1;
+        border-right: solid 1px #e1e1e1;
+
+        &:first-child { border-top: solid 1px #e1e1e1; }
+        &:last-child { border-bottom: solid 1px  #e1e1e1; }
+    }
+
+    & .anchor {
+        color: @white;
+        background: @background-main;
+        border: none;
+    }
+
+    & .tip {
+        color: #7a7a7a;
+        &.theme {
+    color: #fff;
+            background: @background-main;
+
+        }
+        &.dark {
+            background: @background-secondary;
+            color: #fff;
+            text-shadow: 0px -1px 0px rgba(0,0,0,0.5);
+
+            & a { color: #fff !important; }
+        }
+    }
+
+    & .toolbar {
+        border-bottom-color: rgba(0,0,0,0.2);
+
+        & .toolbar a {
+            box-shadow: 1px 0px 0px #d9d9d9;
+
+            &:last-child { box-shadow: none; }
+            &.current {
+                background: transparent;
+                color: #333;
+                text-shadow: none !important;
+            }
+
+        }
+    }
+}
+/* @end */
+
+/* @group widgets */
+.splash {
+    background: @theme-dark;
+    color: #fff;
+    text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
+}
+
+&.indented {
+        & ul { .border-radius(5px); }
+        & li {
+            &:first-child { .border-radius(5px 5px 0px 0px); }
+            &:last-child {
+                .border-radius(0px 0px 5px 5px);
+                box-shadow: 0 1px 0 rgba(0,0,0,0.05);
+            }
+        }
+    }
+
+
+/* @group .button */
+.button {
+    .border-radius(@border-radius);
+    -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);
+
+    font-weight: bold;
+    text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
+
+    &:active {
+        -webkit-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;}
+    }
+}
+/* @end */
+
+/* @group <form> */
+@box-shadow-form: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+@box-shadow-form-big: inset 0 2px 4px rgba(0, 0, 0, 0.2);
+
+form, .form {
+    font-weight: bold;
+    & li { min-height: 27px; }
+    & label { color: #999; }
+}
+
+input, textarea, select {
+    border: 1px solid #e1e1e1;
+    .border-radius(@border-radius);
+    color: #858585;
+    font-family: 'Roboto', Helvetica, Arial, sans-serif;
+    box-shadow: @box-shadow-form;
+
+    &.underline {
+        border:  none;
+        box-shadow: none;
+        border-bottom: 2px solid #e1e1e1;
+    }
+}
+
+input:focus, textarea:focus, select:focus {
+    color:  @color-border-light;
+    border-color: @color-border-light;
+}
+
+.select:after {
+    background: #858585;
+    color: white;
+    border-top-right-radius: @border-radius;
+    border-bottom-right-radius: @border-radius;
+}
+
+/* @group .range */
+input[type="checkbox"] + span, input[type="radio"] + span {
+    color: #fff;
+    background: #a0a0a0;
+    .border-radius(@border-radius);
+}
+    input[type="checkbox"] + span::before,
+    input[type="radio"] + span::before {
+        background: #c1c1c1;
+        .border-radius(@border-radius);
+    }
+
+    input[type="checkbox"]:checked + span,
+    input[type="radio"]:checked + span {
+        background: @background-main;
+        .border-radius(@border-radius);
+    }
+/* @end */
+
+
+
+/* @group range */
+input[type="range"] {
+    background-color: #c7c7c7;
+    .border-radius(@border-radius);
+    box-shadow: @box-shadow-form-big;
+
+
+    &:active {
+        box-shadow: none;
+        background: @background-main;
+    }
+    &::-webkit-slider-thumb {
+        //border: solid 7px rgba(255,255,255, 0.5);
+        box-shadow: 0 0 4px #333;
+        background: #fff;
+    }
+    &: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;
+    }
+
+    & .bar {
+        background: #c7c7c7;
+        box-shadow: @box-shadow-form-big;
+        .border-radius(@border-radius);
+
+        & .value {
+            background: @background-main;
+            .border-radius(@border-radius);
+
+            & .label {
+                float: right;
+                margin-right: 3px;
+                font-weight: bold;
+                color: rgba(0,0,0,0.6);
+                text-shadow: 0 1px 0 rgba(255,255,255,0.2) !important;
+                font-size: 12px;
+            }
+        }
+    }
+}
+/* @end */
+
+
+/* @end */
+
+.bubble {
+    color: #fff;
+    .border-radius(7px);
+    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
+    font-weight: bold !important;
+
+    box-shadow: 0 0 6px #000;
+
+    &.count { background: @background-main; }
+}
+    header .bubble.count {
+        background: @theme-secondary;
+    }
+/* @end */

src/stylesheets/Lungo.widgets.button.less

@@ -0,0 +1,64 @@
+/**
+ * Stylesheet
+ *
+ * @namespace LUNGO.Widgets
+ * @class Button
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "constants.less";
+@import "mixins.less";
+
+a.button {
+    display: inline-block;
+    height: 40px;
+    padding: 0 8px;
+    color: #fff !important;
+
+    background: #5a5a5a;
+
+    font-size: 16px;
+    text-align: center;
+    text-decoration: none;
+    line-height: 42px;
+
+    outline: none;
+    .user-select(none);
+
+    &:active, &.active {
+        background: #4b4b4b;
+    }
+
+    &:disabled, &.disabled {
+        background: rgba(255,255,255,0.2);
+        color: #999 !important;
+    }
+
+    & .icon {
+        position: relative;
+        top: 3px;
+        height: 16px;
+        width: 16px;
+        font-size: 22px;
+        line-height: 17px;
+    }
+
+    & img {
+        top:  0px !important;
+    }
+
+    &.big {
+        width: 100%;
+        padding: 0px;
+        margin-bottom: 4px;
+
+        & .icon {
+            margin: 8px -18px 0 12px;
+            float: left;
+            font-size: 24px;
+            height: 18px;
+            width: 18px;
+        }
+    }
+}

src/stylesheets/less/Lungo.widgets.form.less

@@ -12,76 +12,76 @@
 
 form, .form { }
 
-label { 
-	font-size: 0.9em;
-	line-height: 29px;
+label {
+    font-size: 0.9em;
+    line-height: 29px;
 }
 
 input:not([type=checkbox]), textarea, select {
-	display: inline-block;
-	padding: 5px 0 5px 5px;
-	width: 97%;
-
-	outline: none;
-	
-	font-size:  15px;
-	line-height: 15px;
-	font-weight: bold;
-	
-	-webkit-appearance: none;
-	-webkit-user-select: text;
-	
-	margin: 0 0 6px;
+    display: inline-block;
+    padding: 5px 0 5px 5px;
+    width: 97%;
+
+    outline: none;
+
+    font-size:  15px;
+    line-height: 15px;
+    font-weight: bold;
+
+    -webkit-appearance: none;
+    -webkit-user-select: text;
+
+    margin: 0 0 6px;
 }
 
 input:not([type=checkbox]), textarea, select {
-	display: inline-block;
-	padding: 5px 0 5px 5px;
-	width: 97%;
-
-	outline: none;
-	
-	font-size:  15px;
-	line-height: 15px;
-	font-weight: bold;
-	
-	-webkit-appearance: none;
-	-webkit-user-select: text;
-	
-	margin: 0 0 6px;
+    display: inline-block;
+    padding: 5px 0 5px 5px;
+    width: 97%;
+
+    outline: none;
+
+    font-size:  15px;
+    line-height: 15px;
+    font-weight: bold;
+
+    -webkit-appearance: none;
+    -webkit-user-select: text;
+
+    margin: 0 0 6px;
 }
 
 .big {
-	width: 99%;
-	height: 190px;
-	.border-radius(0px);
-	line-height: 22px;
-	//padding: 0px;
+    width: 99%;
+    height: 190px;
+    .border-radius(0px);
+    line-height: 22px;
+    //padding: 0px;
 }
 
 /* @group search */
 input[type=search] {
-	width: 86%;
-
-	& + .button {
-    	float: right;
-	    padding: 0px;
-	    width: 32px;
-	    height: 30px;
-
-	    & .icon {
-    		font-size: 22px !important;
-	    	line-height: 30px;
-		}
-	}
+    width: 86%;
+
+    & + .button {
+        float: right;
+        padding: 0px;
+        width: 32px;
+        height: 30px;
+
+        & .icon {
+            font-size: 22px !important;
+            line-height: 30px;
+        }
+    }
 }
 /* @end */
 
 /* @group select */
 
 select {
-	width: 100%;
-	height: 29px;
+    width: 100%;
+    height: 29px;
 }
 
 label.select {
@@ -91,21 +91,21 @@ label.select {
 }
 
 .select:after {
-	text-align: center;
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	height:29px;
-	width: 29px;
-
-	content: "▼";
-	pointer-events:none;
-	line-height: 31px;
+    text-align: center;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    height:29px;
+    width: 29px;
+
+    content: "▼";
+    pointer-events:none;
+    line-height: 31px;
 }
 
 .no-pointer-events .select:after {
-	content: none;
+    content: none;
 }
 
 /* @end */
@@ -114,19 +114,19 @@ label.select {
 /* @group switch */
 
 input[type="checkbox"], input[type="radio"]{
-	width: 82px;
-	height: 29px;
-	z-index: 2;
+    width: 82px;
+    height: 29px;
+    z-index: 2;
 }
 
 input[type="checkbox"] + span::after,
    input[type="radio"] + span::after {
-	content: "OFF";
+    content: "OFF";
 }
 
 input[type="checkbox"]:checked + span::after,
    input[type="radio"]:checked + span::after {
-	content: "ON";
+    content: "ON";
 }
 
 input[type="checkbox"] + span,
@@ -135,7 +135,7 @@ input[type="checkbox"] + span,
    input[type="radio"] + span::before,
    input[type="checkbox"] + span::after,
    input[type="radio"] + span::after {
-	display: inline-block;
+    display: inline-block;
 }
 
 input[type="checkbox"] + span::before,
@@ -146,21 +146,21 @@ input[type="checkbox"] + span::before,
    input[type="radio"]:checked + span::before,
    input[type="checkbox"]:checked + span::after,
    input[type="radio"]:checked + span::after {
-	top: 0;
+    top: 0;
 }
 
 input[type="checkbox"] + span::after,
    input[type="radio"] + span::after,
    input[type="checkbox"]:checked + span::before,
    input[type="radio"]:checked + span::before {
-	right: 0;
+    right: 0;
 }
 
 input[type="checkbox"] + span::before,
    input[type="radio"] + span::before,
    input[type="checkbox"]:checked + span::after,
    input[type="radio"]:checked + span::after {
-	left: 0;
+    left: 0;
 }
 
 input[type="checkbox"],
@@ -169,74 +169,74 @@ input[type="checkbox"],
    input[type="radio"] + span::before,
    input[type="checkbox"] + span::after,
    input[type="radio"] + span::after {
-	position: absolute;
+    position: absolute;
 }
 
 input[type="checkbox"],
    input[type="radio"] {
-	-webkit-opacity: 0;
-	opacity: 0;
+    -webkit-opacity: 0;
+    opacity: 0;
 }
 
 input[type="checkbox"] + span,
    input[type="radio"] + span {
-	width: 82px;
-	height: 27px;
-	position: relative;
-	font-size: 11px;
-	line-height: 29px;
-	font-weight: bold;
-	text-transform: uppercase;
-	text-indent: -9999px;
+    width: 82px;
+    height: 27px;
+    position: relative;
+    font-size: 11px;
+    line-height: 29px;
+    font-weight: bold;
+    text-transform: uppercase;
+    text-indent: -9999px;
 }
 
 input[type="checkbox"] + span::before,
    input[type="radio"] + span::before {
-	content: "";
-	width: 41px;
-	height: 27px;
+    content: "";
+    width: 41px;
+    height: 27px;
 }
 
 input[type="checkbox"] + span::after,
    input[type="radio"] + span::after {
-	text-indent: 0;
-	width: 41px;
-	height: 27px;
-	text-align: center;
+    text-indent: 0;
+    width: 41px;
+    height: 27px;
+    text-align: center;
 }
 
 input[type="checkbox"]:checked + span::before,
    input[type="radio"]:checked + span::before {
-	left: auto;
+    left: auto;
 }
 
 input[type="checkbox"]:checked + span::after,
    input[type="radio"]:checked + span::after {
-	height: 27px;
+    height: 27px;
 }
 /* @end */
 
 /* @group range */
 input[type="range"] {
-	-webkit-appearance:	none;
-	height: 15px;
-	width: 100%;
-	outline: none;
-	position: relative;
-	padding: 0px;
-	margin: 0px;
-	border: 0;
-	cursor: ew-resize;
-
-	&::-webkit-slider-thumb {
-		-webkit-appearance:	none;
-		position: relative;
-		z-index: 1;
-
-		width: 24px;
-		height: 24px;
-		border-radius: 12px;
-	}
+    -webkit-appearance: none;
+    height: 15px;
+    width: 100%;
+    outline: none;
+    position: relative;
+    padding: 0px;
+    margin: 0px;
+    border: 0;
+    cursor: ew-resize;
+
+    &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        position: relative;
+        z-index: 1;
+
+        width: 24px;
+        height: 24px;
+        border-radius: 12px;
+    }
 }
 /* @end */
 
@@ -246,31 +246,31 @@ input[type="range"] {
     margin-bottom: 8px;
 
     .labels {
-    	display: block;
-		& span:last-child { float: right; }
-	}
+        display: block;
+        & span:last-child { float: right; }
+    }
 
     & .bar {
-		height:  15px;
-		line-height: 16px;
-		display: block;
-
-    	& .value {
-			display:block;
-	    	height: inherit;
-	    	width: 0%;
-	    	-webkit-transition: width 500ms @defaultTrasition;
-		}
-	}
+        height:  15px;
+        line-height: 16px;
+        display: block;
+
+        & .value {
+            display:block;
+            height: inherit;
+            width: 0%;
+            -webkit-transition: width 500ms @defaultTrasition;
+        }
+    }
 }
 
 .big .progress .bar {
-	height:  29px;
-	line-height: 30px;
+    height:  29px;
+    line-height: 30px;
 }
 /* @end */
 
 
 @media screen and (-webkit-min-device-pixel-ratio:0) {
-	.custom-select select {padding-right:30px;}
+    .custom-select select {padding-right:30px;}
 }

src/stylesheets/less/Lungo.widgets.icon.less

@@ -4,10 +4,10 @@
     font-weight: normal;
     font-style: normal;}
 .icon {
-	color:inherit;
-	font-weight:normal !important;
-	line-height:normal;
-	font-family:'icon';}
+    color:inherit;
+    font-weight:normal !important;
+    line-height:normal;
+    font-family:'icon';}
 .icon.map:before{content:'0';}
 .icon.clock:before{content:'1';}
 .icon.calendar:before{content:'2';}

src/stylesheets/Lungo.widgets.splash.less

@@ -0,0 +1,38 @@
+/**
+ * Stylesheet
+ *
+ * @namespace LUNGO.Widgets
+ * @class Splash
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+.splash{
+    text-align: center;
+    font-size: 1.2em;
+}
+
+.splash img {
+    max-width: 206px;
+    margin: 92px auto 32px;
+}
+
+.splash h1 {
+    margin: 92px auto 16px;
+
+    font-size: 2.2em;
+    font-weight: bold;
+}
+
+.splash .button.big {
+    margin-top: 16px;
+}
+
+.splash .copyright {
+    position: fixed;
+    width: 100%;
+    bottom: 8px;
+    left: 0px;
+    font-size: 0.8em;
+    font-style: normal;
+}

src/stylesheets/less/constants.less

@@ -5,65 +5,65 @@
 @header-height: 42px;
 @with-labels-height: 51px;
 @article-bottom: 41px;
-	@article-bottom-with-labels: 52px;
-	
+    @article-bottom-with-labels: 52px;
+
 @border-radius: 3px;
 
 @aside-width: 256px;
-	@aside-width-mini: 64px;
+    @aside-width-mini: 64px;
 
 /* @end */
 
 @defaultTrasition : @easeOutSine;
 
 @header_footer_height: 40px;
-	@header_extended_height: 74px;
+    @header_extended_height: 74px;
 @footer_toolbar_height: 48px;
 
 
 /* @group COLORS */
 
 @white:             #fff;
-@black:				#000;
-@black-active:		#000;
+@black:             #000;
+@black-active:      #000;
 
-@grey:       		#ccc;
-@grey-active:		#b5b5b5;
+@grey:              #ccc;
+@grey-active:       #b5b5b5;
 
-@red:         		#e33100;
+@red:               #e33100;
 @red-active:        #c5280f;
 
 @lightgreen:        #91bd09;
 @lightgreen-active: #7ea41a;
 
-@green:         	#009600;
+@green:             #009600;
 @green-active:      #00770e;
 
-@blue:         		#237fd7;
+@blue:              #237fd7;
 @blue-active:       #1a69b6;
 
 @arcticblue:        #2daebf;
 @arcticblue-active: #238e9e;
 
-@orange:         	#ff5c00;
+@orange:            #ff5c00;
 @orange-active:     #da4e15;
 
-@purple:         	#7b658d;
+@purple:            #7b658d;
 @purple-active:     #574765;
 
-@magenta:         	#a9014b;
+@magenta:           #a9014b;
 @magenta-active:    #831239;
 
-@pink:         		#ff007f;
+@pink:              #ff007f;
 @pink-active:       #de2870;
 
-@yellow:         	#ffb515;
+@yellow:            #ffb515;
 @yellow-active:     #dfa020;
 
-@twitter:        	#35cdff;
+@twitter:           #35cdff;
 @twitter-active:    #2bafda;
 
-@facebook:         	#3b5998;
+@facebook:          #3b5998;
 @facebook-active:   #2c4579;
 
 /* @end */

src/stylesheets/css/Lungo.media.css

@@ -0,0 +1 @@
+

src/stylesheets/css/Lungo.widgets.splash.css

@@ -1 +1,5 @@
-.splash{text-align:center;font-size:1.2em}.splash img{max-width:206px;margin:92px auto 32px}.splash h1{margin:92px auto 16px;font-size:2.2em;font-weight:bold}.splash .button.big{margin-top:16px}.splash .copyright{position:fixed;width:100%;bottom:8px;left:0;font-size:.8em;font-style:normal}
+.splash{text-align:center;font-size:1.2em;}
+.splash img{max-width:206px;margin:92px auto 32px;}
+.splash h1{margin:92px auto 16px;font-size:2.2em;font-weight:bold;}
+.splash .button.big{margin-top:16px;}
+.splash .copyright{position:fixed;width:100%;bottom:8px;left:0px;font-size:0.8em;font-style:normal;}

src/stylesheets/css/constants.css

@@ -0,0 +1,4 @@
+/* @group DIMENSIONS */
+/* @end */
+/* @group COLORS */
+/* @end */

src/stylesheets/css/mixins.css

@@ -0,0 +1 @@
+

src/stylesheets/less/Lungo.base.less

@@ -1,151 +0,0 @@
-/** 
- * Stylesheet
- * 
- * @namespace LUNGO
- * @class Base
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-
-a,
-abbr,
-address,
-article,
-aside,
-audio,
-b,
-blockquote,
-body,
-caption,
-cite,
-code,
-dd,
-del,
-dfn,
-dialog,
-div,
-dl,
-dt,
-em,
-fieldset,
-figure,
-footer,
-form,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-header,
-hgroup,
-hr,
-html,
-i,
-iframe,
-img,
-ins,
-kbd,
-label,
-legend,
-li,
-mark,
-menu,
-nav,
-object,
-ol,
-p,
-pre,
-q,
-samp,
-section,
-small,
-span,
-strong,
-sub,
-sup,
-table,
-tbody,
-td,
-tfoot,
-th,
-thead,
-time,
-tr,
-ul,
-var,
-video {
-	border: 0;
-	margin: 0;
-	outline: 0;
-	padding: 0;
-	font-size: 100%;
-}
-
-a {
-	text-decoration: none;	
-	-webkit-tap-highlight-color: rgba(0,0,0,0);
-}
-
-a:hover {
-	opacity: 1;
-}
-
-html { 
-	height: 100%;
-	font-size: 100%; 
-	-webkit-text-size-adjust: 100%; 
-	-ms-text-size-adjust: 100%;}
-
-body {
-	margin: 0;
-	padding: 0;
-	width: 100%;
-	height: 100%;
-    min-height: 100%;
-    
-    overflow: hidden;
-    
-    font-family: Helvetica, Arial, sans-serif;
-	font-size: 13px; 
-	line-height: 1.231;
-	
-	-webkit-touch-callout: none;
-	display: -webkit-box;
-    -webkit-box-orient: vertical;
-	-webkit-box-align: stretch;
-}
-
-b,
-strong {
-	font-weight: bold;
-}
-
-img {
-	border: 0; 
-	-ms-interpolation-mode: bicubic; 
-	vertical-align: middle;
-	
-	font-size: 0;
-}
-
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}
-
-th,
-td,
-caption {
-	vertical-align: top;
-	font-weight: normal;
-	text-align: left;
-}
-
-* {
-    margin: 0;
-    padding: 0;
-    
-    -webkit-user-select: none; 
-	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-}

src/stylesheets/less/Lungo.layout.article.less

@@ -1,60 +0,0 @@
-/**
- * Stylesheet
- *
- * @namespace LUNGO.Layout
- * @class Article
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-
-@import "mixins.less";
-@import "constants.less";
-
-
-@defaultTrasition : @easeOutSine;
-@header_footer_height: 40px;
-	@header_extended_height: 75px;
-@footer_toolbar_height: 48px;
-
-/* @group <article> */
-article {
-	position: absolute;
-	width: 100% !important;
-	height: auto;
-	top: 0px;
-	bottom: 0px;
-	
-	display: none;
-	visibility: hidden;
-	z-index: 0;
-	
-	&.current {
-    	visibility: visible;
-	    display: block;
-		z-index: 1;
-	}
-	
-	& .title {
-    	font-size: 1.1em;
-		margin: 0px 0 4px;
-		& .icon { margin-right: 4px; }
-	}
-	
-	& .text {
-    	margin: 4px 0 8px;
-		display: block;
-    	font-size: 0.9em;
-    	font-weight: normal;
-    	line-height: 1.4em;
-	}	
-}
-		
-header:not(.extended) ~ article { top: @header-height; }	
-	header.extended ~ article { top: @header_extended_height; }		
-footer:not(.with-labels) ~ article { bottom: @article-bottom; }
-	footer.with-labels ~ article { bottom: @article-bottom-with-labels; }
-
-@media handheld, only screen and (min-width: 768px) {
-	article.aside { .transform(translate3d(0px, 0, 0)); }
-}			
-/* @end */

src/stylesheets/less/Lungo.layout.aside.less

@@ -1,115 +0,0 @@
-/**
- * Stylesheet
- *
- * @namespace LUNGO.Layout
- * @class Aside
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-
-@import "constants.less";
-@import "mixins.less";
-
-section.aside {
-	&:not(.mini) { .transform(translate(@aside-width, 0)); }
-	&.mini { .transform(translate(@aside-width-mini, 0)); }
-	
-	&.onright {  
-		.transform(translate(-@aside-width, 0));
-		&.mini { .transform(translate(-@aside-width-mini, 0)); }
-	}
-}
-
-aside {
-	position: absolute;
-	width: inherit;
-	height: inherit;
-	top: 0px;
-	visibility: hidden;
-	z-index: 0;
-
-	width: @aside-width;
-	max-width: @aside-width;
-
-	&.onright { right: 0px; }
-	&.current { visibility: visible;}
-
-	& .title {
-    	line-height: 42px;
-		height: 41px;
-		font-size: 15px;
-		font-weight: bold;
-	}
-	
-	& .title, & .anchor, & a {
-		padding: 0 6px;
-	}
-	
-	& a {
-    	display: block;
-		height: 40px;
-
-		font-size: 14px;
-    	//font-weight: bold;
-		line-height: 40px;
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-	}
-
-	& .bubble {
-    	float: right;
-    	font-size: 11px;
-	}
-	& *.not(.anchor) .bubble { margin-top: 13px; }	
-	& *.anchor .bubble { margin-top: 2px; }
-	
-	& .icon {
-		width: 24px;
-		float: left;
-		margin: 8px 4px 0 0;
-
-		font-size: 24px;
-		line-height: 24px;
-	    text-align: center;
-	}
-	
-	& .anchor {
-		font-weight: bold;
-		line-height: 19px;
-	}
-		
-	&.mini {
-		width: @aside-width-mini;
-		
-		& a {
-			padding: 0 8px;
-			height: @aside-width-mini;
-		}
-		& .icon {
-			height: 48px;
-			width: 48px;
-			font-size: 48px;
-			line-height: 48px;
-			//background: red;
-		}
-		
-		& .bubble {
-			margin-top: -48px;
-		}
-	}
-}
-
-@media handheld, only screen and (min-width: 768px) {
-	.autohide[data-target="aside"] {  display: none !important; }
-
-	section.aside {
-		width: auto !important;
-    	left: @aside-width;
-   		right: 0px !important;
-   		.transform(translate3d(0px, 0, 0));
-   		-webkit-transition: none;
-   		
-   		&.mini{ left: @aside-width-mini; }
-   	}
-}

src/stylesheets/less/Lungo.layout.less

@@ -1,112 +0,0 @@
-/**
- * Stylesheet
- *
- * @namespace LUNGO
- * @class Layout
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-
-@import "constants.less";
-@import "mixins.less";
-
-body {  overflow: hidden; }
-
-/* @group <section> */
-section {
-	position: absolute; /* position: fixed on iOS5 & Android 4 */
-	left:  0px;
-	top:  0px;
-	width: 100%;
-	height: 100%;
-	z-index: 0;
-	
-	display: none;
-	visibility: hidden;
-	.transition(all 250ms @defaultTrasition);
-	-webkit-backface-visibility: hidden;
-	
-	&:first-child, &.show {	
-		z-index: 1;
-		display: block;
-		visibility: visible;
-	}
-	&.hide { 
-		z-index: 0;
-		display: none;
-		visibility: hidden;
-	}
-	
-	&.slide, &.pop { display: block !important; }
-	
-	&.slide {
-		.transform(translate(100%, 0));
-		visibility: visible !important;
-		
-		&:first-child, &.show {	.transform(translate(0%, 0)); }
-		&.hide { .transform(translate(-100%, 0)); }
-	}
-		
-	&.pop {
-    	opacity: 0;
-    	.transform(scale(1.15));
-    	
-		&:first-child, &.show {	
-			.transform(scale(1));
-			opacity: 1;
-		}
-		&.hide { 
-			.transform(scale(0.9));
-			opacity: 0;
-		}
-	}
-}
-/* @end */
-
-/* @group <header> & <footer> */
-header, footer  {
-	position: absolute;
-	left: 0px;
-	width: 100%;	
-	height: @header-height;
-	display: block;
-	z-index: 2;
-
-	line-height: @header-height;
-	overflow: hidden;	
-}
-
-header {
-	top: 0px;
-	
-	& .title {
-		margin-left: 4px;
-		float: left;
-		z-index: -1;
-		font-size: 15px;
-		font-weight: bold;
-		
-		&.centered {
-			position: absolute;
-			left: 0px;
-			right: 0px;
-			text-align: center;
-			display: inline-block;
-		}
-		&.with-subtitle {
-			line-height: 20px;
-			padding-top: 4px;
-		}
-	}
-	
-	& .subtitle {
-		margin-left: 4px;
-		display:block;
-		font-size: 11px;
-		line-height: 11px;
-		width: 100%;
-	}
-}
-
-footer  { bottom: 0px; }
-/* @end */

src/stylesheets/less/Lungo.layout.list.less

@@ -1,97 +0,0 @@
-/**
- * Stylesheet
- *
- * @namespace LUNGO.Layout
- * @class List
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-
-@import "constants.less";
-@import "mixins.less";
-
-.list {
-    font-size: 1.15em;
-
-    & a {
-    	display: block;
-    }
-
-    & li:not(.toolbar) {
-		padding: 8px 6px 8px 8px;
-		list-style-type: none;
-
-		& .icon, & img {
-			float: left;
-			width: 32px;
-			height: 32px;
-			margin-right: 6px;
-			font-size: 36px;
-			font-weight: normal;
-		}
-	}
-
-	& .icon, & img {
-		display: inline-block;
-	}
-
-    & small {
-		display: block;
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		font-size: 0.85em;
-	}
-
-	& li.anchor {
-		font-size: 0.85em;
-		padding: 4px 4px 3px;
-
-		& .icon {
-			width: 14px !important;
-			height: 14px !important;
-			margin-right: 2px !important;
-			font-size:  1.6em !important;
-			line-height: 14px !important;
-		}
-
-		& .bubble { display: none; }
-    }
-
-	& .tip {
-    	font-size: 0.85em;
-    	font-weight: bold;
-	}
-
-	& .search {
-		& input { width: 88%; }
-
-		& a {
-			float: right;
-			height: 30px;
-			margin: 0px;
-			padding: 0px;
-
-			& icon {
-			    height: 12px;
-				width: 30px;
-				margin: 0px;
-				font-size: 1.2em;
-				font-weight: normal;
-			}
-		}
-	}
-
-	& .onright {
-		font-size: 0.75em;
-		line-height: 16px;
-	}
-
-	& .onright .icon, & small .icon {
-	    font-size: 1.4em !important;
-	    line-height: 16px;
-	    height: 14px !important;
-	    width: 14px !important;
-	   	margin-right: 0px !important;
-	}
-}

src/stylesheets/less/Lungo.layout.nav.less

@@ -1,116 +0,0 @@
-/**
- * Stylesheet
- *
- * @namespace LUNGO.Layout
- * @class Nav
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-
-@import "constants.less";
-@import "mixins.less";
-
-nav {
-	height: auto;
-	text-align: center;
-
-	& a {
-		padding: 0 6px;
-		min-width: 28px;
-		z-index: 1000;
-		float: left;
-
-		& .icon {
-			position: relative;
-			top:  3px;
-		    font-size: 24px;
-		    display: inline-block;
-		}
-
-		& img {
-    		width: 16px;
-    		height: 16px;
-    		top: -1px !important;
-		}
-
-		& abbr {
-    		position: relative;
-			display: inline;
-			font-weight: bold;
-		}
-	}
-
-	& .bubble {
-    	position: relative;
-	    top:  -8px;
-	    left: -8px;
-	    margin-right: -20px;
-	}
-}
-
-header, footer {
-	&:not(.toolbar) nav .icon ~ abbr { margin-left: 6px; }
-}
-
-.toolbar {
-	height:  40px;
-
-	& nav {
-		margin: 2px;
-		display: block;
-	}
-
-	& a {
-		padding: 0;
-		height:  36px;
-	}
-	
-	&.with-labels {
-		height: @with-labels-height;
-
-		& a { height:  47px; }
-		& .icon { padding-bottom: 12px; }
-	}
-
-	& .icon {
-    	display: block;
-    	top:  0px;
-    	font-size: 34px;
-    	line-height: 34px;
-	}
-
-	& .bubble {
-    	top:  -44px;
-	    left: 4px;
-	}
-
-	& abbr {
-		position: absolute;
-		top: 32px;
-		width: inherit;
-    	height: 14px;
-		margin-left: 0px;
-    	display: block !important;
-
-    	font-size: 11px;
-    	line-height: 14px;
-
-    	overflow: hidden;
-   		white-space: nowrap;
-  		text-overflow: ellipsis;
-	}
-}
-
-.groupbar {
-	position: absolute;
-	top: 43px;
-	height: 28px;
-	display: block;
-	width: 100%;
-	padding: 4px 0 2px;
- 	display: block;
-    line-height: 28px;
-    z-index: 2;
-
-    & a { padding: 0px; font-weight: bold;}
-}

src/stylesheets/less/Lungo.theme.default.less

@@ -1,405 +0,0 @@
-/**
- * Stylesheet
- *
- * @namespace LUNGO.Theme
- * @class Default
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-
-@import "constants.less";
-@import "mixins.less";
-
-@import "lungo.theme.default.font.css";
-
-@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-secondary: #2c2c2d;
-		@theme-secondary-dark: #1c1c1c;
-
-
-@color-border: #2566a4;
-@color-border-light: #64b9e2;
-
-@background-main: #2c8bca -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2c8bca), color-stop(100%,#154f93));
-@background-secondary: #353b42 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #353b42), color-stop(100%, #272a2d));
-	@background-secondary-footer: #353b42 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #353b42), color-stop(50%, #272a2d));
-
-.app {
-    background: @black;
-    font-family: 'Roboto', Helvetica, Arial, sans-serif;
-}
-
-/* @group <header> & <footer> & <article> */
-header {
-	/*border-top-left-radius: 5px;
-	border-top-right-radius: 5px;*/
-	border-bottom: 1px solid #1a2838;
-	
-	background: @background-main;
-		
-	box-shadow: inset 0 1px 0 @color-border-light, inset 0 -1px 0 @color-border;
-	
-	position: absolute;
-	z-index: 2;
-	
-	& .title {
-		color: @white;
-		text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
-	}
-
-	& .subtitle {
-		color: rgba(255,255,255,0.6);
-		text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
-	}
-}
-
-footer {
-	background: @background-secondary-footer;
-	
-	border-top: 1px inset #2A2A2A;
-	color: #353b42;
-	
-	//border-bottom-left-radius: 5px;
-	//border-bottom-right-radius: 5px;
-}
-
-article {
-	background-color: #EBEBEB;
-	& .title {
-    	color: #797979;
-    	text-shadow: 0px 1px 0px #fff;
-	}
-}
-/* @end */
-
-/* @group <nav> */
-header nav {
-	
-	& a {
-		color: @white;
-		text-shadow: 0 1px 0 rgba(0,0,0,0.3);
-	}
-	
-	&:not(.plain) {
-		& a { 
-			box-shadow: 1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2); 
-			
-			&.accept { background: rgba(0, 255, 0, 0.4); }
-			&.cancel { background: rgba(255, 0, 0, 0.4); }
-		}
-		&.onright a { box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2); }
-		
-		& a:active { box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 0 42px rgba(0,0,0,0.5); }
-	}
-		
-	&.plain a:active { text-shadow: 0 0 4px rgba(255,255,255,0.5); }
-}
-
-.toolbar a {
-	color: #cdd9e3;
-	.border-radius(4px);
-	font-weight: bold;
-		
-	&.current, &.active {
-		background: #111;
-		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 rgba(0,0,0,1);
-    box-shadow: inset 0 1px 8px rgba(0,0,0,0.3);
-
-    & a {
-    	color: #6e6e6e;
-    	&.current {
-			color:  #fff;
-			border-bottom: solid 3px @color-border;
-    	}
-	}
-}
-/* @end */
-
-/* @group <aside> */
-aside {
-	color: #9faab1;
-	background-color: #2f353a;
-	
-    & .title { background: #252525; }
-		
-    & a {
-    	color: #9faab1;
-	    text-shadow: 0px 1px 0px #000;
-		&.current, &.current .icon { color: @white !important; }
-	}
-	
-	&:not(.mini) a {
-		border-bottom: 1px inset #222;
-		border-top: 1px inset rgba(255,255,255,0.1);
-	}
-
-	& .anchor {
-    	background: #101010;
-		color:  #7a7a7a;
-	}
-}
-
-section.aside {
-    box-shadow: -4px 0 8px rgba(0,0,0,0.5);
-	&.onright { box-shadow: 4px 0 8px rgba(0,0,0,0.5); }
-}
-
-@media handheld, only screen and (min-width: 768px) {
-	section.current, section.show {
-	    box-shadow: -4px 0 8px rgba(0,0,0,0.5);
-		&.onright { box-shadow: 4px 0 8px rgba(0,0,0,0.5); }
-	}
-}
-/* @end */
-
-/* @group .list */
-.list, .list li:not(.toolbar) a { color: #2a2a2a; }
-
-.list {
-    & li {
-		background: #fff;
-		
-		border-bottom: 1px inset #e1e1e1;
-		
-		
-		&:last-child { border-bottom: none; }
-
-		&.selectable:active {
-    		background: @theme-highlight;
-			color: @theme-highlight-color;
-			text-shadow: @theme-highlight-text-shadow;
-
-			& small, & .onright:not(.bubble) {
-    			color: @white;
-    			text-shadow: none;
-			}
-		}
-
-		& small, & .onright:not(.bubble) { color: #888; }
-	}
-
-	&.indented li {
-		border-left: solid 1px #e1e1e1;
-		border-right: solid 1px #e1e1e1;
-
-		&:first-child { border-top: solid 1px #e1e1e1; }
-		&:last-child { border-bottom: solid 1px  #e1e1e1; }
-	}
-
-    & .anchor {
-		color: @white;
-		background: @background-main;
-		border: none;
-	}
-
-	& .tip { 
-		color: #7a7a7a;
-		&.theme {
-	color: #fff;
-			background: @background-main;
-			
-		}
-		&.dark {
-			background: @background-secondary;
-			color: #fff;
-			text-shadow: 0px -1px 0px rgba(0,0,0,0.5);
-
-			& a { color: #fff !important; }
-		}
-	}
-
-	& .toolbar {
-		border-bottom-color: rgba(0,0,0,0.2);
-
-		& .toolbar a {
-			box-shadow: 1px 0px 0px #d9d9d9;
-
-			&:last-child { box-shadow: none; }
-			&.current {
-				background: transparent;
-				color: #333;
-				text-shadow: none !important;
-			}
-
-		}
-	}
-}
-/* @end */
-
-/* @group widgets */
-.splash {
-	background: @theme-dark;
-	color: #fff;
-	text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
-}
-
-&.indented {
-    	& ul { .border-radius(5px); }
-    	& li {
-    		&:first-child { .border-radius(5px 5px 0px 0px); }
-			&:last-child { 
-				.border-radius(0px 0px 5px 5px); 
-				box-shadow: 0 1px 0 rgba(0,0,0,0.05);
-			}
-		}
-	}
-
-
-/* @group .button */
-.button {
-	.border-radius(@border-radius);
-	-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);
-
-	font-weight: bold;
-	text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
-	
-	&:active { 
-		-webkit-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;}
-	}
-}
-/* @end */
-
-/* @group <form> */
-@box-shadow-form: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-@box-shadow-form-big: inset 0 2px 4px rgba(0, 0, 0, 0.2);
-
-form, .form {
-	font-weight: bold;
-	& li { min-height: 27px; }
-	& label { color: #999; }
-}
-
-input, textarea, select {
-	border: 1px solid #e1e1e1;
-	.border-radius(@border-radius);
-	color: #858585;
-	font-family: 'Roboto', Helvetica, Arial, sans-serif;
-	box-shadow: @box-shadow-form;
-	
-	&.underline {
-		border:  none;
-		box-shadow: none;
-		border-bottom: 2px solid #e1e1e1;
-	}
-}
-
-input:focus, textarea:focus, select:focus {
-	color:  @color-border-light;	
-	border-color: @color-border-light;
-}
-
-.select:after {
-	background: #858585;
-	color: white;
-	border-top-right-radius: @border-radius;
-	border-bottom-right-radius: @border-radius;
-}
-
-/* @group .range */
-input[type="checkbox"] + span, input[type="radio"] + span {
-	color: #fff;
-	background: #a0a0a0;	
-	.border-radius(@border-radius);
-}
-	input[type="checkbox"] + span::before,
-	input[type="radio"] + span::before {
-		background: #c1c1c1;
-		.border-radius(@border-radius);
-	}
-
-	input[type="checkbox"]:checked + span,
-	input[type="radio"]:checked + span {
-		background: @background-main;		
-		.border-radius(@border-radius);
-	}
-/* @end */
-
-
-
-/* @group range */
-input[type="range"] {
-	background-color: #c7c7c7;
-	.border-radius(@border-radius);
-	box-shadow: @box-shadow-form-big;
-	
-
-	&:active { 
-		box-shadow: none;
-		background: @background-main;
-	}
-	&::-webkit-slider-thumb {
-		//border: solid 7px rgba(255,255,255, 0.5);
-		box-shadow: 0 0 4px #333;
-		background: #fff;
-	}
-	&: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;
-	}
-
-    & .bar {
-		background: #c7c7c7;
-		box-shadow: @box-shadow-form-big;
-		.border-radius(@border-radius);
-
-    	& .value {
-			background: @background-main;
-			.border-radius(@border-radius);
-			
-			& .label {
-				float: right;
-				margin-right: 3px;
-				font-weight: bold;
-				color: rgba(0,0,0,0.6);
-				text-shadow: 0 1px 0 rgba(255,255,255,0.2) !important;
-				font-size: 12px;
-			}
-		}
-	}
-}
-/* @end */
-
-
-/* @end */
-
-.bubble {
-	color: #fff;
-	.border-radius(7px);
-	text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
-	font-weight: bold !important;
-	
-	box-shadow: 0 0 6px #000;	
-	
-	&.count { background: @background-main; }
-}
-	header .bubble.count {
-		background: @theme-secondary;
-	}
-/* @end */

src/stylesheets/less/Lungo.widgets.button.less

@@ -1,64 +0,0 @@
-/**
- * Stylesheet
- *
- * @namespace LUNGO.Widgets
- * @class Button
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-
-@import "constants.less";
-@import "mixins.less";
-
-a.button {
-	display: inline-block;
-	height: 40px;
-	padding: 0 8px;
-	color: #fff !important;
-
-	background: #5a5a5a;
-	
-	font-size: 16px;
-	text-align: center;
-	text-decoration: none;
-	line-height: 42px;
-	
-	outline: none;
-	.user-select(none);
-
-	&:active, &.active {
-		background: #4b4b4b;
-	}
-
-	&:disabled, &.disabled {
-    	background: rgba(255,255,255,0.2);
-		color: #999 !important;
-	}
-
-	& .icon {
-		position: relative;
-		top: 3px;
-		height: 16px;
-		width: 16px;
-    	font-size: 22px;
-		line-height: 17px;
-	}
-
-	& img {
-		top:  0px !important;
-	}
-
-	&.big {
-		width: 100%;
-		padding: 0px;
-		margin-bottom: 4px;
-
-		& .icon {
-			margin: 8px -18px 0 12px;
-			float: left;
-			font-size: 24px;
-			height: 18px;
-			width: 18px;
-		}
-	}
-}

src/stylesheets/less/Lungo.widgets.splash.less

@@ -1,38 +0,0 @@
-/** 
- * Stylesheet
- * 
- * @namespace LUNGO.Widgets
- * @class Splash
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
- 
-.splash{ 
-	text-align: center;
-	font-size: 1.2em;
-}
-
-.splash img {
-	max-width: 206px;
-	margin: 92px auto 32px;
-}
-	
-.splash h1 {
-	margin: 92px auto 16px;
-	
-	font-size: 2.2em; 
-	font-weight: bold;
-}
-
-.splash .button.big {
-    margin-top: 16px;
-}
-
-.splash .copyright { 
-	position: fixed; 
-	width: 100%; 
-	bottom: 8px;
-	left: 0px;
-	font-size: 0.8em;
-	font-style: normal; 
-}