Stylesheets converted to LESS style

src/stylesheets/css/Lungo.base.css

@@ -0,0 +1,10 @@
+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{color:#fff;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;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);font-family:Helvetica,Arial,sans-serif;font-size:13px;line-height:1.231;}
+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;}

src/stylesheets/css/Lungo.layout.css

@@ -0,0 +1,23 @@
+section{position:absolute;width:100%;height:100%;overflow:hidden;z-index:0;-webkit-backface-visibility:hidden;-webkit-transform:translate3d(100%, 0, 0);-moz-transform:translate3d(100%, 0, 0);-ms-transform:translate3d(100%, 0, 0);-o-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0);}
+section:first-child{z-index:1;-webkit-transform:translate3d(0%, 0, 0);-moz-transform:translate3d(0%, 0, 0);-ms-transform:translate3d(0%, 0, 0);-o-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}
+section.hide{z-index:0;-webkit-transform:translate3d(-100%, 0, 0);-moz-transform:translate3d(-100%, 0, 0);-ms-transform:translate3d(-100%, 0, 0);-o-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);}
+section.show{z-index:1;-webkit-transform:translate3d(0%, 0, 0);-moz-transform:translate3d(0%, 0, 0);-ms-transform:translate3d(0%, 0, 0);-o-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}
+section.static.hide{-webkit-transform:translate3d(0%, 0, 0);-moz-transform:translate3d(0%, 0, 0);-ms-transform:translate3d(0%, 0, 0);-o-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}
+section.popup{-webkit-transform:translate3d(0, 100%, 0);-moz-transform:translate3d(0, 100%, 0);-ms-transform:translate3d(0, 100%, 0);-o-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);}
+section.popup.show{-webkit-transform:translate3d(0, 0%, 0);-moz-transform:translate3d(0, 0%, 0);-ms-transform:translate3d(0, 0%, 0);-o-transform:translate3d(0, 0%, 0);transform:translate3d(0, 0%, 0);}
+section.popup.hide{-webkit-transform:translate3d(0, -100%, 0);-moz-transform:translate3d(0, -100%, 0);-ms-transform:translate3d(0, -100%, 0);-o-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0);}
+header,footer{position:absolute;left:0px;width:100%;height:40px;display:block;z-index:2;line-height:40px;}
+header{top:0px;}
+footer{bottom:0px;}
+header .title,footer .title{float:left;margin:0 8px;font-size:1.1em;}
+section header a.button,section footer a.button{margin:2px 2px auto;}
+section header a.button.icon,section footer a.button.icon{width:17px;font-size:1.5em;font-weight:normal;}
+nav{height:inherit;text-align:center;font-weight:normal;}
+nav a{display:inline-block;padding:0 9px 0 10px;height:inherit;min-width:22px;float:left;font-size:2.0em;}
+nav a abbr{position:relative;bottom:3px;margin-left:4px;display:none;font-size:0.5em;font-weight:bold;}
+nav a.current abbr{display:inline;}
+nav a.current{-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
+article{position:absolute;width:100%;height:auto;top:0px;bottom:0px;display:block;z-index:0;opacity:0;}
+article.current{z-index:1;opacity:1;}
+.toolbar{height:48px;line-height:44px;display:block;}
+.toolbar a{float:left;padding:0;font-size:2.0em;}

src/stylesheets/css/Lungo.layout.list.css

@@ -0,0 +1,17 @@
+.list li:not(.toolbar){padding:8px 6px;list-style-type:none;}
+.list li:not(.toolbar) a{width:auto;display:block;}
+.list li:not(.toolbar) img,.list li:not(.toolbar) .icon{float:left;width:32px;height:32px;margin-right:6px;font-size:36px;font-weight:normal;line-height:32px;}
+.list strong,.list small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
+.list strong{width:75%;font-size:1.1em;}
+.list small{display:block;font-size:0.9em;font-style:normal;}
+.list li.anchor{font-size:0.9em;font-weight:bold;padding-top:3px;padding-bottom:3px;}
+.list .anchor a{padding:0px;}
+.list .anchor .icon{width:14px !important;height:14px !important;margin-right:4px !important;font-size:1.3em !important;font-weight:normal;line-height:16px !important;}
+.list .anchor .bubble{display:none;}
+.list li.info{min-height:48px;}
+.list li.info img,.list li.info .icon{height:48px;width:48px;line-height:48px;}
+.list .search input{width:88%;}
+.list .search a{float:right;height:30px;margin:0px;padding:0px;}
+.list .search a .icon{height:12px;width:30px;margin:0px;font-size:1.2em;font-weight:normal;}
+.list a.arrow:before{float:right;content:">";position:relative;top:6px;font-size:16px;font-family:"Courier New",Courier,mono;font-weight:bold;}
+.list .bubble{position:relative;right:2px;top:6px;float:right;padding:2px 3px 3px;line-height:1.0em;font-weight:bold;font-size:0.85em;}

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

@@ -0,0 +1,168 @@
+/* @group layout */
+.app {
+  font-size: 13px;
+  background: #000;
+}
+article {
+  background: #fff;
+}
+/* @group <header> & <footer> */
+header {
+  background: #42474d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #42474d), color-stop(1, #2c3137));
+  -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.25), inset 0px -1px rgba(0, 0, 0, 0.5), 0px 2px 2px rgba(0, 0, 0, 0.2);
+}
+footer {
+  background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1d1d));
+  -webkit-box-shadow: inset 0px 1px rgba(0, 0, 0, 0.5), 0px -1px 2px rgba(0, 0, 0, 0.4);
+}
+.title {
+  color: #fff;
+  text-shadow: rgba(0, 0, 0, 0.5) 0 -1px 1px;
+  text-transform: uppercase;
+}
+/* @end */
+/* @group <nav> */
+nav a {
+  background: none;
+  color: rgba(0, 0, 0, 0.5);
+  text-shadow: rgba(255, 255, 255, 0.35) 0 1px 1px;
+}
+header:not(.toolbar) nav a, footer:not(.toolbar) nav a {
+  text-shadow: none;
+  -webkit-box-shadow: inset 0px 1px rgba(255, 255, 255, 0.15), inset 1px 0px rgba(0, 0, 0, 0.75), inset 2px 0px rgba(255, 255, 255, 0.25);
+}
+nav a.current {
+  background: rgba(255, 255, 255, 0.15);
+  color: #fff;
+  text-shadow: none;
+}
+.toolbar a:first-child {
+  -webkit-box-shadow: none;
+}
+/* @end */
+/* @group .list */
+.list {
+  background: #c5c5c5;
+}
+.list li:not(.info) {
+  background: #fff;
+  border-bottom: 1px inset #c3c4c6;
+  color: #333;
+}
+.list li.toolbar {
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+}
+.list li:not(.toolbar) a {
+  color: #333;
+  text-shadow: #fff 0px 1px 1px;
+  -webkit-tap-highlight-color: #242525;
+}
+.list strong {
+  color: #2343be;
+}
+.list small {
+  opacity: 0.75;
+}
+.list .bubble {
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
+}
+.list .button {
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
+}
+.list .arrow:before {
+  color: #a9a9a9;
+}
+/* @group .anchor */
+.list li.anchor {
+  background: #e1e1e1;
+  color: #222;
+}
+/* @end */
+/* @group .anchor */
+.list li.search {
+  border: none;
+  -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.1), inset 0px -1px 0px rgba(0, 0, 0, 0.25);
+}
+/* @end */
+/* @group .info */
+.list li.info {
+  border: none;
+  -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.1), inset 0px -1px 0px rgba(0, 0, 0, 0.25);
+  background: #cbcbcb;
+}
+.list .info strong {
+  color: #333;
+}
+.list .info.contrast strong {
+  color: #fff;
+}
+/* @end */
+/* @end */
+.list .contrast {
+  background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1d1d)) !important;
+  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
+  color: #fff;
+}
+.list .highlight {
+  background: #499dc4 -webkit-gradient(linear, left top, left bottom, color-stop(0, #499dc4), color-stop(1, #0e8eb6)) !important;
+}
+/* @end */
+/* @group widgets */
+/* @group <section>.splash */
+.splash article {
+  background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1d1d)) !important;
+  color: #fff;
+  text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
+}
+/* @end */
+/* @group <inputs> */
+input, textarea, select {
+  border: 1px solid #ccc;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  background: #ffffff -webkit-gradient(linear, left top, left bottom, color-stop(0, #dddddd), color-stop(0.15, #ffffff));
+}
+input:focus, textarea:focus, select:focus {
+  border: 1px solid #058cf5;
+  -webkit-box-shadow: 0 0 4px 1px #058cf5;
+  -moz-box-shadow: 0 0 4px 1px #058cf5;
+  box-shadow: 0 0 4px 1px #058cf5;
+  background: #e8fefe;
+}
+.select:after {
+  background: #ccc;
+  color: white;
+  -webkit-border-radius: 0 2px 2px 0;
+  -moz-border-radius: 0 2px 2px 0;
+  border-radius: 0 2px 2px 0;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+}
+/* @end */
+/* @group .counter (BETA) */
+.counter {
+  background: #ee2c23;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  color: #fff;
+}
+/* @end */
+/* @end */

src/stylesheets/css/Lungo.widgets.colour.css

@@ -0,0 +1,26 @@
+a.grey,.grey{background-color:#ccc;}
+a.grey:active{background-color:#b5b5b5;}
+a.red,.red{background-color:#e33100;}
+a.red:active{background-color:#c5280f;}
+a.lightgreen,.lightgreen{background-color:#91bd09;}
+a.lightgreen:active{background-color:#7ea41a;}
+a.green,.green{background-color:#009600;}
+a.green:active{background-color:#00770e;}
+a.blue,.blue{background-color:#237fd7;}
+a.blue:active{background-color:#1a69b6;}
+a.articblue,.articblue{background-color:#2daebf;}
+a.articblue:active{background-color:#238e9e;}
+a.orange,.orange{background-color:#ff5c00;}
+a.orange:active{background-color:#da4e15;}
+a.purple,.purple{background-color:#7b658d;}
+a.purple:active{background-color:#574765;}
+a.magenta,.magenta{background-color:#a9014b;}
+a.magenta:active{background-color:#831239;}
+a.pink,.pink{background-color:#ff007f;}
+a.pink:active{background-color:#de2870;}
+a.yellow,.yellow{background-color:#ffb515;}
+a.yellow:active{background-color:#dfa020;}
+a.twitter,.twitter:not(span){background-color:#35cdff;}
+a.twitter:active{background-color:#2bafda;}
+a.facebook,.facebook:not(span){background-color:#3b5998;}
+a.facebook:active{background-color:#2c4579;}

src/stylesheets/css/Lungo.widgets.css

@@ -0,0 +1,10 @@
+.scroll,scroll{position:relative;display:block;width:100%;height:100%;}
+section.copyright{margin-top:128px;z-index:1000;background:#000;text-align:center;font-size:24px;}
+section.copyright img{max-height:128px;}
+.hidden{display:none;}
+.onleft{float:left;}
+.onright{float:right;}
+.framed{border:2px solid #fff;}
+.rounded{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
+.semi-opacity{opacity:0.5;}
+.margin-top-4{margin-top:4px;}

src/stylesheets/css/Lungo.widgets.form.css

@@ -0,0 +1,26 @@
+.form,form{position:relative;margin:8px;font-size:1.15em;font-weight:bold;}
+input:not([type=checkbox]),textarea,select{display:inline-block;padding:6px 6px 5px;width:95%;margin-bottom:8px;outline:none;-webkit-appearance:none;font-size:1.0em;font-weight:bold;line-height:1.25em;}
+input[type=search]{width:100%;z-index:1;margin:0px;}
+input[type=search]:before{content:"hola";}
+select{width:100%;}
+label.select{position:relative;display:inline-block;width:100%;}
+.select:after{padding:0 7px;position:absolute;top:0;right:0;bottom:0;height:30px;content:"▼";pointer-events:none;font-size:60%;line-height:32px;}
+.no-pointer-events .select:after{content:none;}
+input[type="checkbox"],input[type="radio"]{width:74px;float:left;z-index:1;}
+input[type="checkbox"]+span::after,input[type="radio"]+span::after{content:"off";}
+input[type="checkbox"]:checked+span::after,input[type="radio"]:checked+span::after{content:"on";}
+.iphone-toggle-buttons{-moz-user-select:none;-webkit-user-select:none;user-select:none;}
+.iphone-toggle-buttons{margin:4px 0;}
+input[type="checkbox"]+span,input[type="radio"]+span,input[type="checkbox"]+span::before,input[type="radio"]+span::before,input[type="checkbox"]+span::after,input[type="radio"]+span::after{-moz-border-radius:16px;-webkit-border-radius:16px;border-radius:16px;display:inline-block;}
+input[type="checkbox"]+span::before,input[type="radio"]+span::before,input[type="checkbox"]+span::after,input[type="radio"]+span::after,input[type="checkbox"]:checked+span::before,input[type="radio"]:checked+span::before,input[type="checkbox"]:checked+span::after,input[type="radio"]:checked+span::after{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;}
+input[type="checkbox"]+span::before,input[type="radio"]+span::before,input[type="checkbox"]:checked+span::after,input[type="radio"]:checked+span::after{left:0;}
+input[type="checkbox"],input[type="radio"],input[type="checkbox"]+span::before,input[type="radio"]+span::before,input[type="checkbox"]+span::after,input[type="radio"]+span::after{position:absolute;}
+input[type="checkbox"],input[type="radio"]{filter:alpha(opacity=0);-moz-opacity:0;-webkit-opacity:0;opacity:0;}
+input[type="checkbox"]+span,input[type="radio"]+span{width:74px;margin-bottom:8px;height:30px;font:bold 14px/30px Arial,Sans-serif;color:#8c8c8c;text-transform:uppercase;border:solid 1px #bcbbbb;background:#c8c8c8 -webkit-gradient(linear, left top, left bottom, color-stop(0, #c8c8c8), color-stop(1, #f3f3f3));position:relative;text-indent:-9999px;}
+input[type="checkbox"]+span::before,input[type="radio"]+span::before{content:"";width:29px;height:29px;border-top:solid 1px #fff;border-right:solid 1px #bebebe;background:#cfcfcf -webkit-gradient(linear, left top, left bottom, color-stop(0, #cfcfcf), color-stop(1, #f9f9f9));-webkit-box-shadow:1px 0 1px #bebebe;-moz-box-shadow:1px 0 1px #bebebe;box-shadow:1px 0 1px #bebebe;}
+input[type="checkbox"]+span::after,input[type="radio"]+span::after{text-indent:0;width:56px;height:32px;text-align:center;}
+input[type="checkbox"]:checked+span,input[type="radio"]:checked+span{background:#5d96ea -webkit-gradient(linear, left top, left bottom, color-stop(0, #1b45bd), color-stop(1, #5d96ea));color:#fff;text-shadow:-1px -1px #0d2046;}
+input[type="checkbox"]:checked+span::before,input[type="radio"]:checked+span::before{left:auto;-webkit-box-shadow:-2px 0 1px #3a5e91;-webkit-box-shadow:-2px 0 1px #3a5e91;-moz-box-shadow:-2px 0 1px #3a5e91;box-shadow:-2px 0 1px #3a5e91;}
+input[type="checkbox"]:checked+span::after,input[type="radio"]:checked+span::after{border-top:solid 1px #0f2a4f;border-bottom:solid 1px #0f2a4f;border-left:solid 1px #2c5496;height:30px;top:-1px;left:-1px;-webkit-border-radius:16px 0 0 16px;-moz-border-radius:16px 0 0 16px;border-radius:16px 0 0 16px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
+@media screen and (-webkit-min-device-pixel-ratio:0){.custom-select select{padding-right:30px;}}

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

@@ -0,0 +1,4 @@
+.splash article{height:100%;text-align:center;}
+.splash img{max-width:206px;margin:128px auto 32px;}
+.splash h1{margin:128px auto 16px;font-size:2.5em;font-weight:bold;}
+.splash .copyright{position:absolute;width:100%;bottom:4px;font-style:normal;}

src/stylesheets/layout.css

@@ -1,257 +0,0 @@
-/* @group <section> */
-section {
-	position: absolute;
-	width: 100%; 
-	height: 100%;
-	overflow: hidden;
-	z-index: 0;
-	-webkit-backface-visibility: hidden;
-	-webkit-transform: translate3d(100%, 0, 0);}
-
-section:first-child{ 
-	z-index: 1; 
-	-webkit-transform: translate3d(0%, 0, 0);}
-	
-section.hide{ 
-	z-index: 0; 
-	-webkit-transform: translate3d(-100%, 0, 0);}
-section.show{ 
-	 z-index: 1;
-	-webkit-transform: translate3d(0%, 0, 0);}
-
-section.static.hide{
-	-webkit-transform: translate3d(0%, 0, 0);}
-
-section.popup{
-	-webkit-transform: translate3d(0, 100%, 0);}
-
-section.popup.show{
-	-webkit-transform: translate3d(0, 0%, 0);}
-
-section.popup.hide{
-	-webkit-transform: translate3d(0, -100%, 0);}
-/* @end */
-
-
-/* @group <header> & <footer> */
-header, footer{
-	position: absolute;
-	left: 0px;
-	width: 100%;
-	height: 40px;
-	line-height: 40px;
-	display: block;
-	z-index: 2;}
-	
-header{ 
-	top: 0px
-	}
-	
-footer{ 
-	bottom:0px;
-	}
-	
-header .title, footer .title {
-	float: left; 
-	margin: 0 8px; 
-	font-size: 1.1em;
-	}
-
-section header a.button, section footer a.button{
-	margin: 2px 2px auto;
-	}
-
-section header a.button.icon, section footer a.button.icon{
-	width: 17px;
-	font-size: 1.5em;
-	font-weight: normal;}
-
-/* @end */
-
-/* @group <nav> */
-nav{
-	height: inherit;
-	text-align: center;
-	font-weight: normal;}
-
-nav a{
-	display: inline-block;
-	padding: 0 9px 0 10px;
-	height: inherit;
-	min-width: 22px;	
-	float: left;
-	font-size: 2.0em;}
-
-nav a abbr{
-	position: relative;
-	bottom: 3px;
-	margin-left: 4px;
-	display: none;
-	font-size: 0.5em;
-	font-weight: bold;}
-
-nav a.current abbr{ 
-	display: inline; }
-	
-nav a.current{
-	-webkit-transition: all 0.3s ease-in-out;}
-/* @end */
-
-/* @group <article> */
-article{
-	position: absolute; 
-	width: 100%;
-	height: auto;
-	top: 0px; 
-	bottom: 0px;
-	display: block;
-	z-index: 0;
-	opacity: 0;}
-
-article.current{ 
-	z-index: 1;
-	opacity: 1; }
-/* @end */
-
-/* @group .list */
-.list li:not(.toolbar) {
-	padding: 8px 6px;
-	list-style-type: none;
-	}
-
-.list li:not(.toolbar) a {
-	width: auto; 
-	display: block;
-	}
-
-.list li:not(.toolbar) img, .list li:not(.toolbar) .icon {
-	float: left;
-	width: 32px;
-	height: 32px;
-	margin-right: 6px;	
-	font-size: 36px;
-	font-weight: normal;
-	line-height: 32px;
-	}
-	
-.list strong, .list small {
-	overflow: hidden;  
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	}
-	
-.list strong {
-	font-size: 1.1em;
-	width: 75%;
-	}
-
-.list small {
-	display: block;
-	font-size: 0.9em;
-	font-style: normal;
-	}
-
-
-
-/* @group .anchor */
-.list li.anchor { 	
-	font-size: 0.9em; 
-	font-weight: bold;
-	padding-top: 3px;
-	padding-bottom: 3px;
-	}
-	
-.list .anchor a {
-	padding: 0px;
-	}
-
-.list .anchor .icon{
-	width: 14px !important;
-	height: 14px !important;	
-	margin-right: 4px !important; 
-	
-	font-size:  1.3em !important;
-	font-weight: normal;
-	line-height: 16px !important;	
-}
-
-.list .anchor .bubble{
-	display: none;
-	}
-/* @end */
-
-/* @group .info */
-.list li.info{
-	min-height: 48px;
-	}
-
-.list li.info img, .list li.info .icon{
-	height: 48px;
-	width: 48px;
-	line-height: 48px;
-	}
-/* @end */
-
-
-
-/* @group .search */
-.list .search input{
-	width: 88%;
-	}
-
-.list .search a{
-	float: right;
-	height: 30px;
-	margin: 0px;
-	padding: 0px;
-	}
-
-.list .search a .icon{
-	height: 12px;
-	width: 30px;
-	margin: 0px;
-	font-size: 1.2em;
-	font-weight: normal;
-	}
-/* @end */
-
-/* @group .arrow */
-.list a.arrow:before{
-	float: right;
-	content: ">";
-	position: relative;
-	top: 6px;
-	font-size: 16px;
-	font-family: "Courier New", Courier, mono;
-	font-weight: bold;
-	}
-/* @end */
-
-/* @group .bubble */
-.list .bubble{ 
-	position: relative; 
-	right: 2px;
-	top: 6px;
-	float: right;
-	padding: 2px 3px 3px;	
-	line-height: 1.0em;
-	font-weight: bold; 
-	font-size: 0.85em;
-	}
-/* @end */
-
-/* @end */
-
-/* @group .toolbar */
-.toolbar{
-	height: 48px; 
-	line-height: 44px;
-	display: block;
-	}
-
-.toolbar a {
-	float: left;
-	padding: 0;
-	font-size: 2.0em;
-	}
-/* @end */

src/stylesheets/base.css

@@ -1,4 +1,3 @@
-/* ---- HTML5 Reset ---- */
 a,
 abbr,
 address,
@@ -71,16 +70,18 @@ video {
 	margin: 0;
 	outline: 0;
 	padding: 0;
-	font-size: 100%;}
+	font-size: 100%;
+}
 
-a{
+a {
 	color: #fff;
-	text-decoration: none;
-	
-	-webkit-tap-highlight-color: rgba(0,0,0,0);}
+	text-decoration: none;	
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+}
 
-a:hover{
-	opacity: 1;}
+a:hover {
+	opacity: 1;
+}
 
 html { 
 	height: 100%;
@@ -101,31 +102,36 @@ body {
     
     font-family: Helvetica, Arial, sans-serif;
 	font-size: 13px; 
-	line-height: 1.231;}
+	line-height: 1.231;
+}
 
 b,
 strong {
-	font-weight: bold;}
+	font-weight: bold;
+}
 
 img {
 	border: 0; 
 	-ms-interpolation-mode: bicubic; 
 	vertical-align: middle;
 	
-	font-size: 0;}
+	font-size: 0;
+}
 
 table {
 	border-collapse: collapse;
-	border-spacing: 0;}
+	border-spacing: 0;
+}
 
 th,
 td,
 caption {
-	font-weight: normal;
 	vertical-align: top;
-	text-align: left;}
+	font-weight: normal;
+	text-align: left;
+}
 
 * {
     margin: 0;
-    padding: 0;}
-
+    padding: 0;
+}

src/stylesheets/less/Lungo.layout.less

@@ -0,0 +1,146 @@
+@import "mixins.less";
+
+/* @group <section> */
+section  {
+	position: absolute;
+	width: 100%; 
+	height: 100%;
+	overflow: hidden;
+	z-index: 0;
+	-webkit-backface-visibility: hidden;
+	.transform(translate3d(100%, 0, 0));
+}
+
+section:first-child  { 
+	z-index: 1;
+	.transform(translate3d(0%, 0, 0));
+}
+	
+section.hide  { 
+	z-index: 0;
+	.transform(translate3d(-100%, 0, 0));
+}
+section.show  { 
+	 z-index: 1;
+	.transform(translate3d(0%, 0, 0));
+}
+
+section.static.hide  {
+	.transform(translate3d(0%, 0, 0));
+}
+
+section.popup  {
+	.transform(translate3d(0, 100%, 0));
+}
+
+section.popup.show  {
+	.transform(translate3d(0, 0%, 0));
+}
+
+section.popup.hide  {
+	.transform(translate3d(0, -100%, 0));
+}
+/* @end */
+
+
+/* @group <header> & <footer> */
+header, footer  {
+	position: absolute;
+	left: 0px;
+	width: 100%;
+	height: 40px;
+	display: block;
+	z-index: 2;
+	line-height: 40px;
+}
+	
+header  { 
+	top: 0px
+}
+	
+footer  { 
+	bottom:0px;
+}
+	
+header .title, footer .title  {
+	float: left; 
+	margin: 0 8px; 
+	font-size: 1.1em;
+}
+
+section header a.button, section footer a.button  {
+	margin: 2px 2px auto;
+}
+
+section header a.button.icon, section footer a.button.icon  {
+	width: 17px;
+	font-size: 1.5em;
+	font-weight: normal;
+}
+/* @end */
+
+/* @group <nav> */
+nav  {
+	height: inherit;
+	text-align: center;
+	font-weight: normal;
+}
+
+nav a  {
+	display: inline-block;
+	padding: 0 9px 0 10px;
+	height: inherit;
+	min-width: 22px;	
+	float: left;
+	font-size: 2.0em;
+}
+
+nav a abbr {
+	position: relative;
+	bottom: 3px;
+	margin-left: 4px;
+	display: none;
+	font-size: 0.5em;
+	font-weight: bold;
+}
+
+nav a.current abbr { 
+	display: inline;
+}
+	
+nav a.current {
+	.transition(all 0.3s ease-in-out);
+}
+/* @end */
+
+/* @group <article> */
+article {
+	position: absolute; 
+	width: 100%;
+	height: auto;
+	top: 0px; 
+	bottom: 0px;
+	display: block;
+	z-index: 0;
+	opacity: 0;
+}
+
+article.current { 
+	z-index: 1;
+	opacity: 1; 
+}
+/* @end */
+
+/* @group .toolbar */
+.toolbar {
+	height: 48px; 
+	line-height: 44px;
+	display: block;
+}
+
+.toolbar a  {
+	float: left;
+	padding: 0;
+	font-size: 2.0em;
+}
+/* @end */

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

@@ -0,0 +1,120 @@
+.list li:not(.toolbar) {
+	padding: 8px 6px;
+	list-style-type: none;
+}
+
+.list li:not(.toolbar) a {
+	width: auto; 
+	display: block;
+}
+
+.list li:not(.toolbar) img, .list li:not(.toolbar) .icon {
+	float: left;
+	width: 32px;
+	height: 32px;
+	margin-right: 6px;	
+	font-size: 36px;
+	font-weight: normal;
+	line-height: 32px;
+}
+	
+.list strong, .list small {
+	overflow: hidden;  
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+	
+.list strong {
+	width: 75%;
+	font-size: 1.1em;
+}
+
+.list small {
+	display: block;
+	font-size: 0.9em;
+	font-style: normal;
+}
+
+/* @group .anchor */
+.list li.anchor { 	
+	font-size: 0.9em; 
+	font-weight: bold;
+	padding-top: 3px;
+	padding-bottom: 3px;
+}
+	
+.list .anchor a {
+	padding: 0px;
+}
+
+.list .anchor .icon {
+	width: 14px !important;
+	height: 14px !important;	
+	margin-right: 4px !important; 	
+	font-size:  1.3em !important;
+	font-weight: normal;
+	line-height: 16px !important;	
+}
+
+.list .anchor .bubble {
+	display: none;
+}
+/* @end */
+
+/* @group .info */
+.list li.info {
+	min-height: 48px;
+}
+
+.list li.info img, .list li.info .icon {
+	height: 48px;
+	width: 48px;
+	line-height: 48px;
+}
+/* @end */
+
+/* @group .search */
+.list .search input {
+	width: 88%;
+}
+
+.list .search a {
+	float: right;
+	height: 30px;
+	margin: 0px;
+	padding: 0px;
+}
+
+.list .search a .icon {
+	height: 12px;
+	width: 30px;
+	margin: 0px;
+	font-size: 1.2em;
+	font-weight: normal;
+}
+/* @end */
+
+/* @group .arrow */
+.list a.arrow:before {
+	float: right;
+	content: ">";
+	position: relative;
+	top: 6px;
+	font-size: 16px;
+	font-family: "Courier New", Courier, mono;
+	font-weight: bold;
+}
+/* @end */
+
+/* @group .bubble */
+.list .bubble { 
+	position: relative; 
+	right: 2px;
+	top: 6px;
+	float: right;
+	padding: 2px 3px 3px;	
+	line-height: 1.0em;
+	font-weight: bold; 
+	font-size: 0.85em;
+}
+/* @end */

src/stylesheets/lungo.theme.default.css

@@ -1,58 +1,63 @@
+@import "mixins.less";
+
 /* @group layout */
 .app {
 	font-size:13px;
     background: #000;
-	}
+}
 
-article{
+article {
 	background: #fff;
-	}
+}
 	
 /* @group <header> & <footer> */
-header{
+header {
 	background: #42474d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #42474d), color-stop(1, #2c3137));
 	-webkit-box-shadow: 
 		inset 0px 1px 0px rgba(255,255,255,0.25), 
 		inset 0px -1px rgba(0,0,0,0.5), 
-		0px 2px 2px rgba(0,0,0,0.2);}
+		0px 2px 2px rgba(0,0,0,0.2);
+}
 	
-footer{
+footer {
 	background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1d1d));
 	
 	-webkit-box-shadow: 
 		inset 0px 1px rgba(0,0,0,0.5), 
-		0px -1px 2px rgba(0,0,0,0.4);}
+		0px -1px 2px rgba(0,0,0,0.4);
+}
 
-.title{
+.title {
 	color: #fff;
 	text-shadow: rgba(0,0,0,0.5) 0 -1px 1px; 
-	text-transform: uppercase;}
+	text-transform: uppercase;
+}
 /* @end */
 
 /* @group <nav> */
 nav a {
 	background: none;
 	color: rgba(0,0,0,0.5);
-	text-shadow: rgba(255,255,255,0.35) 0 1px 1px;}
+	text-shadow: rgba(255,255,255,0.35) 0 1px 1px;
+}
 	
-header:not(.toolbar) nav a, footer:not(.toolbar) nav a{
+header:not(.toolbar) nav a, footer:not(.toolbar) nav a {
 	text-shadow: none;
 	
 	-webkit-box-shadow: 
-	inset 0px 1px rgba(255,255,255,0.15), 
-	inset 1px 0px rgba(0,0,0,0.75), 
-	inset 2px 0px rgba(255,255,255,0.25);
+		inset 0px 1px rgba(255,255,255,0.15), 
+		inset 1px 0px rgba(0,0,0,0.75), 
+		inset 2px 0px rgba(255,255,255,0.25);
 }
 
-nav a.current{
+nav a.current {
 	background: rgba(255,255,255,0.15);
 	color: #fff;
-	text-shadow: rgba(0,0,0,1) 0 1px 1px;
 	text-shadow: none;
-	}	
+}	
 
 //@ToDo: Change the colour for not .toolbar classed elements
-not(.toolbar) nav a.current{
+not(.toolbar) nav a.current {
 	
 }
 
@@ -63,56 +68,55 @@ not(.toolbar) nav a.current{
 /* @group .list */
 .list {
 	background: #c5c5c5;
-	}
+}
 
-.list li:not(.info){
+.list li:not(.info) {
 	background: #fff;
 	border-bottom: 1px inset #c3c4c6;
 	color: #333;
-	}
+}
 	
-.list li.toolbar{
+.list li.toolbar {
 	border-bottom-color: rgba(0,0,0,0.2);
-	}
+}
 
 .list li:not(.toolbar) a { 
 	color: #333;
 	text-shadow: #fff 0px 1px 1px; 
 	-webkit-tap-highlight-color: #242525;
-	}
+}
 
 .list strong {
 	color: #2343be;
-	}
+}
 	
-.list small{
+.list small {
 	opacity: 0.75;
-	}
+}
 	
-.list .bubble{
+.list .bubble {
 	border: 1px solid rgba(0,0,0,0.15);
-	-webkit-border-radius: 2px;
+	.border-radius(2px);
 	color: #fff; 
 	text-shadow: 0 -1px 0 rgba(0,0,0,.3);
-	}	
-.list .button{
+}	
+
+.list .button {
 	color: #fff;
 	text-shadow: 0 -1px 0 rgba(0,0,0,.3); 
 }
 
-.list .arrow:before{
-	color: #a9a9a9;}
-
-
+.list .arrow:before {
+	color: #a9a9a9;
+}
 
 /* @group .anchor */
 .list li.anchor {
 	background: #e1e1e1;
 	color: #222;
-	}
+}
 /* @end */
 
-
 /* @group .anchor */
 .list li.search {
 	border: none;
@@ -129,30 +133,26 @@ not(.toolbar) nav a.current{
 		inset 0px 1px 0px rgba(255,255,255,0.1), 
 		inset 0px -1px 0px rgba(0,0,0,0.25);
 	background: #cbcbcb;
-	}
+}
 	
 .list .info strong{	
 	color: #333;
-	}
+}
 
-.list .info.contrast strong{	
+.list .info.contrast strong {	
 	color: #fff;
-	}
+}
 /* @end */
 /* @end */
-.list .contrast{
+.list .contrast {
 	background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1d1d)) !important;
 	text-shadow: 0px 1px 1px rgba(0,0,0,0.25);
 	color: #fff;
 }
 
-.list .highlight{
+.list .highlight {
 	background: #499dc4 -webkit-gradient(linear, left top, left bottom, color-stop(0, #499dc4), color-stop(1, #0e8eb6)) !important;
-	}
-	
-/* @end */
-
-/* @group .classes */
+}
 /* @end */
 
 /* @group widgets */
@@ -161,24 +161,28 @@ not(.toolbar) nav a.current{
 .splash article { 
 	background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1d1d)) !important;
 	color: #fff; 
-	text-shadow: rgba(0,0,0,0.5) 0 1px 1px;}
+	text-shadow: rgba(0,0,0,0.5) 0 1px 1px;
+}
 /* @end */
 
 /* @group <inputs> */
 input, textarea, select {
 	border: 1px solid #ccc;	
-	-webkit-border-radius: 2px;
-	background: #fff -webkit-gradient(linear, left top, left bottom, color-stop(0, #ddd), color-stop(0.15, #fff));}
+	.border-radius(2px);
+	background: #fff -webkit-gradient(linear, left top, left bottom, color-stop(0, #ddd), color-stop(0.15, #fff));
+}
 	
 input:focus, textarea:focus, select:focus { 
 	border: 1px solid #058cf5;
-	-webkit-box-shadow: 0 0 4px 1px #058cf5; 
-	background: #e8fefe;}
+	.box-shadow(0 0 4px 1px #058cf5);
+	background: #e8fefe;
+}
 	
 .select:after {
 	background: #ccc;
 	color: white;
-	-webkit-border-radius: 0 2px 2px 0;}
+	.border-radius(0 2px 2px 0);
+}
 /* @end */
 	
 
@@ -186,9 +190,7 @@ input:focus, textarea:focus, select:focus {
 /* @group .counter (BETA) */
 .counter{
 	background: #ee2c23;
-	-webkit-border-radius: 2px; 
-	-moz-border-radius: 2px; 
-	
+	.border-radius(2px);
 	color: #fff;
 }
 /* @end */

src/stylesheets/less/Lungo.widgets.beta.less

@@ -0,0 +1,52 @@
+
+
+/* ---- BETA's ----*/
+
+/* @group .counter (BETA) */
+.counter{
+	padding: 1px 5px 0;
+	border: 1px solid rgba(0,0,0,0.15);
+	
+	text-shadow: rgba(0,0,0,0.25) 0 -1px 0;
+	font-size: 0.6em;
+	font-weight: bold;
+	margin: 0 auto;
+}
+/* @end */
+
+
+/* @group <article>.info */
+article.info details{
+	margin: 16px;
+	height: 80%;
+	border: 4px dotted #ccc;
+	color: #a9a9a9;
+	display: block;
+	text-align: center;
+	font-size: 1.25em;
+	padding: 16px;
+}
+
+article.info details > *{
+	display: block;
+	color: #a8a8a8;
+	font-weight: normal;
+	font-style: normal;
+}
+
+article.info details em{
+	opacity: 0.75;
+	font-size: 0.85em;
+}
+
+article.info details span {
+	font-size: 192px;
+	//-webkit-animation: article-info 1.5s; 
+	-webkit-animation-iteration-count: infinite;}
+	
+@-webkit-keyframes article-info { 
+	0% {opacity: 1; -webkit-transform:rotate(0deg);} 
+	50% {opacity: 0.1; -webkit-transform:rotate(360deg);} 
+	100% {opacity: 1; -webkit-transform:rotate(720deg);} 
+}       
+/* @end */

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

@@ -0,0 +1,64 @@
+@import "mixins.less";
+
+a.button {
+	display: inline-block;
+	height: 35px;
+	padding: 0 9px;
+	color: white;
+	outline: none;
+	.user-select(none);
+	.border-radius(2px);
+	/* @ToDo >> mixins.less */
+	background: #666 -webkit-gradient(linear,left top,left bottom,color-stop(.2, rgba(255,255,255,0.25)),color-stop(1, rgba(255,255,255,0)));
+	background: #666 -moz-linear-gradient(center top,rgba(255,255,255,0.25) 20%,rgba(255,255,255,0) 100%);
+	-webkit-box-shadow: inset 0 1px 0 rgba(34,57,100,0.6), inset 1px 0 0 rgba(34,57,100,0.4), inset -1px 0 0 rgba(34,57,100,0.5), inset 0 -1px 0 rgba(34,57,100,0.6),inset 0 2px 0 rgba(255,255,255,.3),inset 0 0 4px rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.29);
+	-webkit-box-shadow: inset 0 1px 0 rgba(34, 57, 100, 0.6) inset 1px 0 0 rgba(34, 57, 100, 0.4) inset -1px 0 0 rgba(34, 57, 100, 0.5) inset 0 -1px 0 rgba(34, 57, 100, 0.6) inset 0 2px 0 rgba(255, 255, 255, 0.3) inset 0 0 4px rgba(255, 255, 255, 0.3) 0 1px 2px rgba(0, 0, 0, 0.29);
+	-moz-box-shadow: inset 0 1px 0 rgba(34,57,100,0.6), inset 1px 0 0 rgba(34,57,100,0.4), inset -1px 0 0 rgba(34,57,100,0.5), inset 0 -1px 0 rgba(34,57,100,0.6),inset 0 2px 0 rgba(255,255,255,.3),inset 0 0 4px rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.29);
+	box-shadow: inset 0 1px 0 rgba(34,57,100,0.6), inset 1px 0 0 rgba(34,57,100,0.4), inset -1px 0 0 rgba(34,57,100,0.5), inset 0 -1px 0 rgba(34,57,100,0.6),inset 0 2px 0 rgba(255,255,255,.3),inset 0 0 4px rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.29);
+		
+	font-size: 1.0em;
+	font-weight: bold;
+	line-height:36px;
+	text-align: center; 
+	text-shadow: 0 -1px 0 rgba(0,0,0,.3); 
+	text-decoration: none;
+}
+
+a.button:active {
+  -webkit-box-shadow:inset 0 1px 0 rgba(10,10,10,0.5), inset 1px 0 0 rgba(10,10,10,0.3), inset -1px 0 0 rgba(10,10,10,0.4), inset 0 -1px 0 rgba(10,10,10,0.5),inset 0 1px 5px rgba(0,0,0,0.3),0 1px 0 rgba(255,255,255, 0.3);
+  -moz-box-shadow:inset 0 1px 0 rgba(10,10,10,0.5), inset 1px 0 0 rgba(10,10,10,0.3), inset -1px 0 0 rgba(10,10,10,0.4), inset 0 -1px 0 rgba(10,10,10,0.5),inset 0 1px 5px rgba(0,0,0,0.3),0 1px 0 rgba(255,255,255, 0.3);
+  box-shadow:inset 0 1px 0 rgba(10,10,10,0.5), inset 1px 0 0 rgba(10,10,10,0.3), inset -1px 0 0 rgba(10,10,10,0.4), inset 0 -1px 0 rgba(10,10,10,0.5),inset 0 1px 5px rgba(0,0,0,0.3),0 1px 0 rgba(255,255,255, 0.3);
+ }
+  
+a.button:disabled, a.button.disabled {
+	background: rgba(255,255,255,0.2);
+	border: 1px solid rgba(0,0,0,0.3);
+	color: rgba(0,0,0,0.5); 
+	.box-shadow(inset 0 -5px 5px rgba(40,40,40,0.1));	
+	text-shadow: none;
+}
+
+a.button .icon{ 
+	float: left;
+	width: 17px;
+	
+	font-size: 1.5em; 
+	font-weight: normal;
+	line-height: 36px;}
+	
+a.button.big { 
+	position: relative; 
+	height: 30px; 
+	width: 100%; 
+	margin-bottom: 4px;
+	padding: 6px 0;
+	font-size: 16px;
+	line-height: 30px;
+}
+	
+a.button.big .icon {	
+	width: 20px;
+	line-height: 30px;
+	margin-left: 0.8em; 
+	margin-right: -48px;
+}

src/stylesheets/less/Lungo.widgets.colour.less

@@ -0,0 +1,26 @@
+a.grey, .grey{background-color: #ccc;}
+a.grey:active{background-color: #b5b5b5;}
+a.red, .red{background-color: #e33100;}
+a.red:active{background-color: #c5280f;}
+a.lightgreen, .lightgreen{background-color: #91bd09;}
+a.lightgreen:active{background-color: #7ea41a;}
+a.green, .green{background-color: #009600;}
+a.green:active{background-color: #00770e;}
+a.blue, .blue{background-color: #237fd7;}
+a.blue:active{background-color: #1a69b6;}
+a.articblue, .articblue{background-color: #2daebf;}
+a.articblue:active{background-color: #238e9e;}
+a.orange, .orange{background-color: #ff5c00;}
+a.orange:active{background-color: #da4e15;}
+a.purple, .purple{background-color: #7b658d;}
+a.purple:active{background-color: #574765;}
+a.magenta, .magenta{background-color: #a9014b;}
+a.magenta:active{background-color: #831239;}
+a.pink, .pink{background-color: #ff007f;}
+a.pink:active{background-color: #de2870;}
+a.yellow, .yellow{background-color: #ffb515;}
+a.yellow:active{background-color: #dfa020;}
+a.twitter, .twitter:not(span){background-color: #35cdff;}
+a.twitter:active{background-color: #2bafda;}
+a.facebook, .facebook:not(span){background-color: #3b5998;}
+a.facebook:active{background-color: #2c4579;}

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

@@ -0,0 +1,207 @@
+@import "mixins.less";
+
+.form, form { 
+	position: relative; 
+	margin: 8px; 
+	font-size: 1.15em;
+	font-weight: bold;
+}
+
+input:not([type=checkbox]), textarea, select {  
+	display: inline-block; 
+	padding: 6px 6px 5px;
+	width: 95%; 
+	margin-bottom: 8px; 
+	
+	outline: none; 	
+	-webkit-appearance: none;
+		
+	font-size: 1.0em;
+	font-weight: bold;
+	line-height: 1.25em;
+}
+	
+
+input[type=search] {
+	width: 100%;
+	z-index: 1;
+	margin: 0px;
+}
+
+input[type=search]:before {
+	content:"hola";
+}
+
+select{ 
+	width: 100%;
+}
+
+
+label.select {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+}
+    
+.select:after {
+	padding: 0 7px;
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	height:30px;
+	
+	content: "▼";     
+	pointer-events:none;
+	
+	font-size: 60%;
+	line-height: 32px;
+}
+    
+.no-pointer-events .select:after {
+	content: none;
+}
+
+input[type="checkbox"], input[type="radio"]{
+	width: 74px;
+	float: left;
+	z-index: 1;
+}
+
+input[type="checkbox"] + span::after,
+   input[type="radio"] + span::after {
+	content: "off";
+}
+
+input[type="checkbox"]:checked + span::after,
+   input[type="radio"]:checked + span::after {
+	content: "on";
+}
+
+.iphone-toggle-buttons {
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+.iphone-toggle-buttons {
+	margin: 4px 0;
+}
+
+input[type="checkbox"] + span,
+   input[type="radio"] + span,
+   input[type="checkbox"] + span::before,
+   input[type="radio"] + span::before,
+   input[type="checkbox"] + span::after,
+   input[type="radio"] + span::after {
+	-moz-border-radius: 16px;
+	-webkit-border-radius: 16px;
+	border-radius: 16px;
+	display: inline-block;
+}
+
+input[type="checkbox"] + span::before,
+   input[type="radio"] + span::before,
+   input[type="checkbox"] + span::after,
+   input[type="radio"] + span::after,
+   input[type="checkbox"]:checked + span::before,
+   input[type="radio"]:checked + span::before,
+   input[type="checkbox"]:checked + span::after,
+   input[type="radio"]:checked + span::after {
+	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;
+}
+
+input[type="checkbox"] + span::before,
+   input[type="radio"] + span::before,
+   input[type="checkbox"]:checked + span::after,
+   input[type="radio"]:checked + span::after {
+	left: 0;
+}
+
+input[type="checkbox"],
+   input[type="radio"],
+   input[type="checkbox"] + span::before,
+   input[type="radio"] + span::before,
+   input[type="checkbox"] + span::after,
+   input[type="radio"] + span::after {
+	position: absolute;
+}
+
+input[type="checkbox"],
+   input[type="radio"] {
+	filter: alpha(opacity=0);
+	-moz-opacity: 0;
+	-webkit-opacity: 0;
+	opacity: 0;
+}
+
+input[type="checkbox"] + span,
+   input[type="radio"] + span {
+	width: 74px;
+	
+	margin-bottom: 8px; 
+	height: 30px;
+	font: bold 14px/30px Arial, Sans-serif;
+	color: #8c8c8c;
+	text-transform: uppercase;
+	border: solid 1px #bcbbbb;
+
+	background: #c8c8c8 -webkit-gradient(linear, left top, left bottom, color-stop(0, #c8c8c8), color-stop(1, #f3f3f3));
+	position: relative;
+	text-indent: -9999px;
+}
+
+input[type="checkbox"] + span::before,
+   input[type="radio"] + span::before {
+	content: "";
+	width: 29px;
+	height: 29px;
+	border-top: solid 1px #fff;
+	border-right: solid 1px #bebebe;
+
+	background: #cfcfcf -webkit-gradient(linear, left top, left bottom, color-stop(0, #cfcfcf), color-stop(1, #f9f9f9));
+	.box-shadow(1px 0 1px #bebebe);
+}
+
+input[type="checkbox"] + span::after,
+   input[type="radio"] + span::after {
+	text-indent: 0;
+	width: 56px;
+	height: 32px;
+	text-align: center;
+}
+
+input[type="checkbox"]:checked + span, input[type="radio"]:checked + span {
+	background: #5d96ea -webkit-gradient(linear, left top, left bottom, color-stop(0, #1b45bd), color-stop(1, #5d96ea));
+	color: #fff;
+	text-shadow: -1px -1px #0d2046;
+}
+
+input[type="checkbox"]:checked + span::before,
+   input[type="radio"]:checked + span::before {
+	left: auto;
+	-webkit-box-shadow: -2px 0 1px #3a5e91;
+	.box-shadow(-2px 0 1px #3a5e91);
+}
+
+input[type="checkbox"]:checked + span::after,
+   input[type="radio"]:checked + span::after {
+	border-top: solid 1px #0f2a4f;
+	border-bottom: solid 1px #0f2a4f;
+	border-left: solid 1px #2c5496;
+	height: 30px;
+	top: -1px;
+	left: -1px;
+	.border-radius(16px 0 0 16px);
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) { 
+	.custom-select select {padding-right:30px;}
+}

src/stylesheets/less/Lungo.widgets.less

@@ -0,0 +1,39 @@
+@import "mixins.less";
+
+.scroll, scroll { 
+	position: relative; 
+	display: block; 
+	width: 100%; 
+	height: 100%; 
+}
+
+section.copyright {
+	margin-top: 128px;
+	z-index: 1000;
+	background: #000;
+	text-align: center;	
+	font-size: 24px;
+}
+
+section.copyright img{
+	max-height: 128px;
+}
+
+/* @group .classes */
+.hidden { 
+	display: none; }
+.onleft { 
+	float: left; }
+.onright { 
+	float: right;}
+.framed{
+	border: 2px solid #fff;}
+.rounded{
+	.border-radius(4px);}
+.semi-opacity{
+	opacity: 0.5;
+}
+.margin-top-4{
+	margin-top: 4px;
+}
+/* @end */

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

@@ -0,0 +1,23 @@
+.splash article { 
+	height: 100%;
+	text-align: center;
+}
+
+.splash img {
+	max-width: 206px;
+	margin: 128px auto 32px;
+}
+	
+.splash h1 {
+	margin: 128px auto 16px;
+	
+	font-size: 2.5em; 
+	font-weight: bold;
+}
+	
+.splash .copyright { 
+	position: absolute; 
+	width: 100%; 
+	bottom: 4px;
+	font-style: normal; 
+}

src/stylesheets/less/mixins.less

@@ -0,0 +1,274 @@
+//============================================================
+//
+// LESS CSS3 Mixins by @soyjavi
+//
+// @description CSS3 mixins for LESS projects
+// @version 1.0.1
+//
+//============================================================
+
+//============================================================
+// Variables
+//
+// Grays
+@white:             #fff;
+@grayLighter:       #ccc;
+@grayLight:         #777;
+@gray:              #555;
+@grayDark:          #333;
+@black:             #000;
+
+// Accent Colors
+@blue:              #08b5fb;
+@green:             #46a546;
+@red:               #9d261d;
+@yellow:            #ffc40d;
+@orange:            #f89406;
+@pink:              #c3325f;
+@purple:            #7a43b6;
+//============================================================
+
+//============================================================
+//
+// border-radius
+//
+// @param top-left-radius     :  px, em, %;
+// @param top-right-radius    :  px, em, %;
+// @param bottom-right-radius :  px, em, %;
+// @param bottom-left-radius  :  px, em, %;
+//
+// @see http://www.w3.org/TR/css3-background/#border-radius
+//
+//============================================================
+
+.border-radius() {
+	-webkit-border-radius: @arguments;
+		-moz-border-radius: @arguments;
+		border-radius: @arguments;
+
+	-webkit-background-clip: padding-box;
+		-moz-background-clip: padding;
+		background-clip: padding-box;
+}
+
+
+
+//============================================================
+//
+// box-shadow
+//
+// @param colour              :  #000, rgba, hsla;
+// @param horizontal-offset   :  px, em;
+// @param vertical-offset     :  px, em;
+// @param blur-radius         :  px, em;
+// @param spread-distance     :  px, em,
+// @param inset               :  inset;
+//
+// @see http://www.w3.org/TR/css3-background/#box-shadow
+//
+//============================================================
+
+.box-shadow() {
+    -webkit-box-shadow: @arguments;
+       -moz-box-shadow: @arguments;
+            box-shadow: @arguments;
+}
+
+
+
+//============================================================
+//
+// transform
+//
+// @param functions           :  matrix()
+//                            :  translate()
+//                            :  scale()
+//                            :  rotate()
+//                            :  skew()
+//
+// @see http://www.w3.org/TR/css3-2d-transforms/
+//
+//============================================================
+.transform() {
+    -webkit-transform: @arguments;
+       -moz-transform: @arguments;
+        -ms-transform: @arguments;
+         -o-transform: @arguments;
+            transform: @arguments;
+}
+
+
+
+//============================================================
+//
+// translate
+//
+// @param translate-x         :  px;
+// @param translate-y         :  px;
+//
+// @see http://www.w3.org/TR/css3-2d-transforms/
+//
+//============================================================
+
+.translate() {
+    -webkit-transform: translate(@arguments);
+       -moz-transform: translate(@arguments);
+        -ms-transform: translate(@arguments);
+         -o-transform: translate(@arguments);
+            transform: translate(@arguments);
+}
+
+
+
+//============================================================
+//
+// scale
+//
+// @param scale-x             :  0.5, 2, etc;
+// @param scale-y             :  0.5, 2, etc;
+//
+// @see http://www.w3.org/TR/css3-2d-transforms/
+//
+//============================================================
+
+.scale() {
+    -webkit-transform: scale(@arguments);
+       -moz-transform: scale(@arguments);
+        -ms-transform: scale(@arguments);
+         -o-transform: scale(@arguments);
+            transform: scale(@arguments);
+}
+
+
+
+//============================================================
+//
+// rotate
+//
+// @param angle               :  0deg;
+//
+// @see http://www.w3.org/TR/css3-2d-transforms/
+//
+//============================================================
+
+.rotate() {
+    -webkit-transform: rotate(@arguments);
+       -moz-transform: rotate(@arguments);
+        -ms-transform: rotate(@arguments);
+         -o-transform: rotate(@arguments);
+            transform: rotate(@arguments);
+}
+
+
+
+//============================================================
+//
+// backface-visibility
+//
+// @param visibility          :  visible | hidden;
+//
+// @see http://www.w3.org/TR/css3-3d-transforms/
+//
+//============================================================
+
+.backface-visibility() {
+    -webkit-backface-visibility: @arguments;
+       -moz-backface-visibility: @arguments;
+        -ms-backface-visibility: @arguments;
+         -o-backface-visibility: @arguments;
+            backface-visibility: @arguments;
+}
+
+
+
+//============================================================
+//
+// transition
+//
+// @param properties          :  all, left, opacity, etc;
+// @param duration            :  1s, 1000ms;
+// @param delay               :  1s, 1000ms;
+// @param easing              :  linear, ease-in-out, etc;
+//
+// @see http://www.w3.org/TR/css3-transitions/
+//
+//============================================================
+
+.transition() {
+    -webkit-transition: @arguments;
+       -moz-transition: @arguments;
+        -ms-transition: @arguments;
+         -o-transition: @arguments;
+            transition: @arguments;
+}
+
+
+//============================================================
+//
+// transition
+//
+// @param properties          :  all, left, opacity, etc;
+// @param duration            :  1s, 1000ms;
+// @param delay               :  1s, 1000ms;
+// @param easing              :  linear, ease-in-out, etc;
+//
+// @see http://www.w3.org/TR/css3-transitions/
+//
+//============================================================
+
+.user-select() {
+	-webkit-user-select: @arguments; 
+	   -moz-user-select: @arguments;
+	    -ms-user-select: @arguments;
+         -o-user-select: @arguments;
+            user-select: @arguments;
+}
+
+
+//============================================================
+//
+// easing
+//
+// Thanks to Robert Penner for his sterling work on easing,
+// and to Matthew Lein for converting these functions into
+// approximated cubic-bezier functions. Respect.
+//
+// @see http://robertpenner.com/
+// @see http://matthewlein.com/ceaser/
+//
+//============================================================
+
+// Cubic
+@easeInCubic     :  cubic-bezier(0.550, 0.055, 0.675, 0.190);
+@easeOutCubic    :  cubic-bezier(0.215, 0.610, 0.355, 1.000);
+@easeInOutCubic  :  cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
+// Circ
+@easeInCirc      :  cubic-bezier(0.600, 0.040, 0.980, 0.335);
+@easeOutCirc     :  cubic-bezier(0.075, 0.820, 0.165, 1.000);
+@easeInOutCirc   :  cubic-bezier(0.785, 0.135, 0.150, 0.860);
+
+// Expo
+@easeInExpo      :  cubic-bezier(0.950, 0.050, 0.795, 0.035);
+@easeOutExpo     :  cubic-bezier(0.190, 1.000, 0.220, 1.000);
+@easeInOutExpo   :  cubic-bezier(1.000, 0.000, 0.000, 1.000);
+
+// Quad
+@easeInQuad      :  cubic-bezier(0.550, 0.085, 0.680, 0.530);
+@easeOutQuad     :  cubic-bezier(0.250, 0.460, 0.450, 0.940);
+@easeInOutQuad   :  cubic-bezier(0.455, 0.030, 0.515, 0.955);
+
+// Quart
+@easeInQuart     :  cubic-bezier(0.895, 0.030, 0.685, 0.220);
+@easeOutQuart    :  cubic-bezier(0.165, 0.840, 0.440, 1.000);
+@easeInOutQuart  :  cubic-bezier(0.770, 0.000, 0.175, 1.000);
+
+// Quint
+@easeInQuint     :  cubic-bezier(0.755, 0.050, 0.855, 0.060);
+@easeOutQuint    :  cubic-bezier(0.230, 1.000, 0.320, 1.000);
+@easeInOutQuint  :  cubic-bezier(0.860, 0.000, 0.070, 1.000);
+
+// Sine
+@easeInSine      :  cubic-bezier(0.470, 0.000, 0.745, 0.715);
+@easeOutSine     :  cubic-bezier(0.390, 0.575, 0.565, 1.000);
+@easeInOutSine   :  cubic-bezier(0.445, 0.050, 0.550, 0.950);