Merge lp:~ya-bo-ng/ubuntu-html5-theme/sass-setup into lp:ubuntu-html5-theme

[Anthony Dillon]

SASS setup

I have created a README file with instructions to set up the sass watcher to develop the components.

Converted all the css files into scss with nesting.

Added a few common variables and mixins.

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:138
http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-ci/105/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/3273
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-trusty-amd64-ci/89
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-trusty-armhf-ci/89
    SUCCESS: http://jenkins.qa.ubuntu.com/job/autopilot-testrunner-otto-trusty/2881
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/3275
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/3275/artifact/work/output/*zip*/output.zip

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-html5-theme-ci/105/rebuild

review: Approve (continuous-integration)

[Alexandre Abreu (abreu-alexandre)]

For me, in the ui-gallery, the toolbar item and the toggles item w/ the disabled style break (compared to what's in trunk)

review: Needs Fixing

[lp:~ya-bo-ng/ubuntu-html5-theme/sass-setup]

139. By Anthony Dillon on 2014-02-19

Few small tweaks to fix the convertion to sass

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:139
http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-ci/109/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/3340
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-trusty-amd64-ci/93
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-trusty-armhf-ci/93
    SUCCESS: http://jenkins.qa.ubuntu.com/job/autopilot-testrunner-otto-trusty/2940
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/3342
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/3342/artifact/work/output/*zip*/output.zip

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-html5-theme-ci/109/rebuild

review: Approve (continuous-integration)

[lp:~ya-bo-ng/ubuntu-html5-theme/sass-setup]

140. By Anthony Dillon on 2014-02-20

Fixed text inputs and toolbar styles

[Alexandre Abreu (abreu-alexandre)]

review: Approve

=== modified file '.bzrignore'
--- .bzrignore	2014-01-27 18:42:31 +0000
+++ .bzrignore	2014-02-20 20:37:29 +0000
@@ -24,3 +24,4 @@
 debian/*.substvars
 debian/stamp-*
 
+.sass-cache

=== modified file '0.1/ambiance/css/appTemplate.css'
--- 0.1/ambiance/css/appTemplate.css	2014-01-27 18:42:31 +0000
+++ 0.1/ambiance/css/appTemplate.css	2014-02-20 20:37:29 +0000
@@ -1,23 +1,1 @@
-/*
- * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
- * License granted by Canonical Limited
- *
- * This file is part of ubuntu-html5-ui-toolkit.
- *
- * This package is free software; you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as 
- * published by the Free Software Foundation; either version 3 of the 
- * License, or
- * (at your option) any later version.
- 
- * This package is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- 
- * You should have received a copy of the GNU Lesser General Public 
- * License along with this program. If not, see 
- * <http://www.gnu.org/licenses/>
- */
-
-@import url("default.css");
\ No newline at end of file
+@charset "UTF-8";*{outline:none}html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,section,summary,time,audio,video{padding:0;margin:0;border:0}ul{list-style:none}[data-role="header"]{background:#ededf0 url("../img/[e-mail]") repeat-x top left;height:74px;width:100%;overflow:hidden;position:relative}[data-role="header"]:after{background:#C2C2C2;content:"";border-top:1px solid #afafaf;height:14px;width:100%;display:block}[data-role="header"] .active{color:#484647;padding-left:15px;-webkit-opacity:1;opacity:1}[data-role="header"] .active:after{content:"›";padding-left:10px;-webkit-opacity:0.5;opacity:0.5}[data-role="header"] .inactive{color:#a0a0a0;-webkit-opacity:0.5;opacity:0.5}[data-role="tabs"]{width:100%;white-space:nowrap}[data-role="tabitem"]{display:inline-block;font:35px "Ubuntu";letter-spacing:-1px;line-height:60px;padding-left:35px;text-decoration:none;color:#a0a0a0;-webkit-opacity:0;opacity:0;-webkit-transition:opacity .25s ease-in-out;transition:opacity .25s ease-in-out;cursor:pointer}[data-role="tabitem"]:only-child:after{content:"";padding-left:10px}[data-role="tab"]{-webkit-box-sizing:border-box;box-sizing:border-box;vertical-align:top;width:100%;height:100%;overflow:hidden;display:none}[data-role="tab"]:first-child{display:block}[data-role="pagestack"]{position:relative;-webkit-transition:all 0 linear;transition:all 0 linear}[data-role="page"]{-webkit-box-sizing:border-box;box-sizing:border-box;vertical-align:top;width:100%;height:100%;overflow:hidden;display:none}[data-role="pagestack"]>[data-role="page"]:first-child,[data-role="mainview"]>[data-role="page"]{display:block}input[type="text"],input[type="password"],input[type="email"],input[type="tel"],input[type="search"],input[type="url"],input[type="number"],textarea{-webkit-box-shadow:inset 0 2px 1px rgba(0,0,0,0.1);box-shadow:inset 0 2px 1px rgba(0,0,0,0.1);background:#cfcfcf;border:0;border-radius:6px;color:#757373;font-family:Ubuntu;font-size:0.8rem;padding:8px}input[type="text"]:focus,input[type="password"]:focus,input[type="email"]:focus,input[type="tel"]:focus,input[type="search"]:focus,input[type="url"]:focus,input[type="number"]:focus,textarea:focus{background:#fff;color:#757373;font-family:Ubuntu}input[type="text"][disabled],input[type="password"][disabled],input[type="email"][disabled],input[type="tel"][disabled],input[type="search"][disabled],input[type="url"][disabled],input[type="number"][disabled],textarea[disabled]{background:rgba(255,255,255,0.1);color:darkgray}input[type="text"]:not([value]),input[type="password"]:not([value]),input[type="email"]:not([value]),input[type="tel"]:not([value]),input[type="search"]:not([value]),input[type="url"]:not([value]),input[type="number"]:not([value]),textarea:not([value]){color:#757373}textarea{resize:none;height:80px;width:190px}.textfield.clear:focus{background:url(artwork/[e-mail]) no-repeat 97% center #fff;background-size:12%}.textfield.label,.textarea.label{-webkit-box-shadow:none;box-shadow:none;background:none !important;font-size:12px;padding:0 !important}progress{-webkit-appearance:none;height:35px}progress:not([value]){background:url(../img/[e-mail]) no-repeat center center/100% auto;-webkit-animation:1s rotate infinite steps(30);animation:1s rotate infinite steps(30);width:24px;height:24px;border:none;display:inline-block;vertical-align:middle}progress:not([value])::-webkit-progress-bar{-webkit-box-shadow:none;box-shadow:none;background:none}progress.bigger:not([value]){background:url(../img/[e-mail]) no-repeat center center/100% auto;width:90px;height:90px}progress[value]::-webkit-progress-value{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);width:100%;background:#dd4814;border:none;border-radius:6px;display:block}progress[value]::-webkit-progress-bar{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:inset 0 2px 1px rgba(0,0,0,0.1);box-shadow:inset 0 2px 1px rgba(0,0,0,0.1);padding:1px;background-color:rgba(192,192,192,0.1);width:200px;height:35px;border-radius:6px;padding:0}progress[value].infinite::-webkit-progress-value{-webkit-appearance:none}@-webkit-keyframes rotate{from{-webkit-transform:rotate(1deg)}to{-webkit-transform:rotate(360deg)}}[data-role="dialog"]{background:#000;opacity:0.9;overflow:hidden;position:absolute;z-index:100;top:0;left:0;right:0;padding:0;font-size:0;color:#fff;text-align:center;height:100%;display:none}[data-role="dialog"].active{display:block}[data-role="dialog"]>section{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:1.5rem;color:#FAFAFA;width:100%;display:inline-block;vertical-align:middle;white-space:normal}[data-role="dialog"]:before{content:"";display:inline-block;vertical-align:middle;width:0.1rem;height:100%;margin-left:-0.1rem}[data-role="dialog"] h1{font-size:1.3rem;line-height:1.5em;color:rgba(255,255,255,0.9);margin:0}[data-role="dialog"] p{font-size:0.9rem;line-height:1.8em;color:rgba(255,255,255,0.6);margin:0}[data-role="dialog"] menu{-webkit-box-sizing:border-box;box-sizing:border-box;white-space:nowrap;margin:0 auto;margin-top:1rem;display:block;text-align:center}[data-role="dialog"] menu [data-role="button"]{display:block;margin:0 auto;margin-bottom:10px;width:200px}[data-role="dialog"] menu [data-role="button"]:last-child{margin-bottom:0}@media only screen and (min-width: 870px){[data-role="dialog"]{background:rgba(0,0,0,0.6);opacity:1}[data-role="dialog"]>section{background:rgba(0,0,0,0.7);border-radius:10px;width:18.7rem;padding:1.8rem}[data-role="dialog"] input[type="text"],[data-role="dialog"] input[type="password"],[data-role="dialog"] input[type="email"],[data-role="dialog"] input[type="tel"],[data-role="dialog"] input[type="search"],[data-role="dialog"] input[type="url"],[data-role="dialog"] input[type="number"]{width:14rem}[data-role="dialog"] menu [data-role="button"]{width:100%;max-width:100%}@keyframes shake{0%{-webkit-transform:translate3d(0, 0, 0)}10%{-webkit-transform:translate3d(-20px, 0, 0)}20%{-webkit-transform:translate3d(20px, 0, 0)}30%{-webkit-transform:translate3d(-20px, 0, 0)}40%{-webkit-transform:translate3d(20px, 0, 0)}50%{-webkit-transform:translate3d(-20px, 0, 0)}60%{-webkit-transform:translate3d(20px, 0, 0)}70%{-webkit-transform:translate3d(-20px, 0, 0)}80%{-webkit-transform:translate3d(20px, 0, 0)}90%{-webkit-transform:translate3d(-20px, 0, 0)}100%{-webkit-transform:translate3d(0, 0, 0)}}@-webkit-keyframes shake{0%{-webkit-transform:translate3d(0, 0, 0)}10%{-webkit-transform:translate3d(-20px, 0, 0)}20%{-webkit-transform:translate3d(20px, 0, 0)}30%{-webkit-transform:translate3d(-20px, 0, 0)}40%{-webkit-transform:translate3d(20px, 0, 0)}50%{-webkit-transform:translate3d(-20px, 0, 0)}60%{-webkit-transform:translate3d(20px, 0, 0)}70%{-webkit-transform:translate3d(-20px, 0, 0)}80%{-webkit-transform:translate3d(20px, 0, 0)}90%{-webkit-transform:translate3d(-20px, 0, 0)}100%{-webkit-transform:translate3d(0, 0, 0)}}.shake{-webkit-animation:shakeIt .9s ease-in;animation:shakeIt .9s ease-in}}[data-role="button"]{-webkit-box-sizing:border-box;box-sizing:border-box;max-width:200px;display:inline-block;vertical-align:middle;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;background:#cccccc;border:0;border-radius:6px;color:#333;font-family:Ubuntu;font-size:0.9rem;padding:6px 25px;text-align:center;text-decoration:none;position:relative}[data-role="button"]:after{background:url(../img/[e-mail]) no-repeat;background-size:100% 100%;content:' ';width:100%;height:100%;position:absolute;top:0;left:0}[data-role="button"]:active:after{background:url(../img/[e-mail]) no-repeat;background-size:100% 100%;content:' ';width:100%;height:100%;position:absolute;top:0;left:0}[data-role="button"].ubuntu{background:#dd4814;color:#ffffff;text-shadow:0 -1px 0 rgba(0,0,0,0.25)}[data-role="button"].danger{background:red;color:#ffffff;text-shadow:0 -1px 0 rgba(0,0,0,0.25)}[data-role="button"].warning{background:#faa732;color:#ffffff;text-shadow:0 -1px 0 rgba(0,0,0,0.25)}[data-role="button"].success{background:#5da357;color:#ffffff;text-shadow:0 -1px 0 rgba(0,0,0,0.25)}[data-role="button"].disabled{color:rgba(255,255,255,0.6)}input[type=range]{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);-webkit-appearance:none;background-color:rgba(192,192,192,0.1);width:200px;height:35px;border-radius:6px;padding:5px 0}input[type=range]::-webkit-slider-thumb{-webkit-box-shadow:inset 0 2px 1px rgba(0,0,0,0.1);box-shadow:inset 0 2px 1px rgba(0,0,0,0.1);-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;background-color:#dd4814;border-radius:6px;width:30px;height:27px}label:not([for]){display:inline-block;vertical-align:middle;width:4.5rem;height:2.2rem;position:relative;background:none}label:not([for]) input[type="checkbox"]{margin:0;opacity:0;position:absolute;top:0;left:0}label:not([for]) input[type="checkbox"]+span{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.3);box-shadow:inset 0 1px 1px rgba(0,0,0,0.3);-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;left:50%;top:50%;margin:-1.1rem 0 0 -1.1rem;width:2rem;height:2rem;pointer-events:none;border-radius:6px;background:rgba(0,0,0,0.4);background-position-y:30px;-webkit-transition:background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;transition:background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out}label:not([for]) input[type="checkbox"]:checked+span{background:#dd4814 url(../img/[e-mail]) no-repeat 0.3rem 0.3rem;background-size:75% 75%;background-position-y:5px;-webkit-transition:background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;transition:background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out}label:not([for]) input[type="checkbox"]:disabled+span{background:rgba(0,0,0,0.25) !important}label:not([for]) input[type="checkbox"]:disabled:checked+span{background:rgba(221,72,20,0.5) url(../img/[e-mail]) no-repeat 0.3rem 0.3rem !important;background-size:75% 75% !important}label input[type="checkbox"][data-type="switch"]+span.toggle{position:absolute;left:50%;top:50%;margin:-1.1rem 0 0 -2.2rem;width:4.5rem;height:2.2rem;pointer-events:none;overflow:hidden;background:rgba(136,136,136,0.3)}label input[type="checkbox"][data-type="switch"]+span.toggle>span.toggle-bg{background:transparent url(../img/unCheckbox.png) no-repeat 0.4rem 0.35rem;background-size:90% 75%;position:absolute;top:0;left:0;z-index:10;width:4.5rem;height:2.1rem;-webkit-transition:background-image 0.3s ease-in-out;transition:background-image 0.3s ease-in-out}label input[type="checkbox"][data-type="switch"]+span.toggle>span.toggle-handle{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.3);box-shadow:inset 0 1px 1px rgba(0,0,0,0.3);position:absolute;top:2px;left:2px;z-index:2;width:2rem;height:2rem;border-radius:6px;background:rgba(0,0,0,0.4);-webkit-transition:background 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;transition:background 0.3s ease-in-out, transform 0.3s ease-in-out}label input[type="checkbox"][data-type="switch"]:checked+span.toggle{background:rgba(136,136,136,0.3) !important}label input[type="checkbox"][data-type="switch"]:checked+span.toggle>span.toggle-bg{background:transparent url(../img/Checkbox.png) no-repeat 0.4rem 0.35rem;background-size:90% 75%}label input[type="checkbox"][data-type="switch"]:checked+span.toggle>span.toggle-handle{background:#dd4814;-webkit-transform:translate3d(38px, 0, 0);transform:translate3d(38px, 0, 0)}label input[data-type="switch"]:disabled+span.toggle{background:rgba(136,136,136,0.3) !important}label input[data-type="switch"]:disabled+span.toggle>span.toggle-handle{opacity:0.4}label input[data-type="switch"]:disabled:checked+span.toggle>span.toggle-handle{opacity:0.4;-webkit-transform:translate3d(38px, 0, 0);transform:translate3d(38px, 0, 0)}.popover{-webkit-box-shadow:0 0 10px rgba(0,0,0,0.5);box-shadow:0 0 10px rgba(0,0,0,0.5);position:absolute;background:rgba(255,255,255,0.98);-webkit-border-radius:15px;border-radius:15px;-webkit-background-clip:padding-box;z-index:110;width:320px;left:0;top:0;color:#787878;font-size:1rem;display:none}.popover.active{display:block}.popover .list{-webkit-border-radius:15px;border-radius:15px;width:auto;max-height:250px;overflow:auto;-webkit-overflow-scrolling:touch}.popover .list li{position:relative;padding:20px 10px 20px 10px;border-bottom:1px solid #d9d9d9;text-align:center;font-size:1rem}.popover .list li a{color:#787878;text-decoration:none}.popover .list li.active{background:#ebebeb;border-top:1px solid #fcfcfc}.popover .list li.active a{color:#dd4814;text-decoration:none}.popover[data-gravity]:before,.popover[data-gravity]:after{position:absolute;left:50%;width:0;height:0;content:''}.popover[data-gravity="n"]:before{top:-17px;margin-left:-18px;background:transparent url(../img/[e-mail]) no-repeat 0.5rem 0.5rem;background-size:50% 50%;width:37px;height:18px}.popover[data-gravity="w"]:before{top:50%;margin-left:-17px;margin-top:-18px;background:transparent url(../img/[e-mail]) no-repeat 0.5rem 0.5rem;background-size:50% 50%;width:18px;height:37px;left:0}.popover[data-gravity="s"]:after{bottom:-9px;margin-left:-18px;background:transparent url(../img/[e-mail]) no-repeat 0.5rem 0.5rem;background-size:50% 50%;width:37px;height:18px}.popover[data-gravity="e"]:before{top:50%;margin-right:-10px;margin-top:-18px;background:transparent url(../img/[e-mail]) no-repeat 0.5rem 0.5rem;background-size:50% 50%;width:18px;height:37px;right:0;left:initial}[data-role="list"]{border-top:1px solid #f0f0f0}[data-role="list"] header{border-bottom:0.1rem solid #c9c9c9;line-height:1.8rem;color:#787878;font-size:0.9rem;padding-left:1rem}[data-role="list"] ul{list-style:none;overflow:hidden}[data-role="list"] ul li{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:3.5rem;border-bottom:solid 0.1rem #c7c7c7;color:#787878;position:relative}[data-role="list"] ul li>a{text-decoration:none;color:#787878;display:block;height:3.4rem;position:relative;border:none;line-height:3.4rem;padding-left:1rem;padding-right:1.5rem;border-top:1px solid #ebebeb;font-size:0.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[data-role="list"] ul li>a:after{content:"";background:transparent url(../img/[e-mail]) no-repeat 0.5rem 0.5rem;background-size:40% 75%;position:absolute;width:2rem;height:2rem;top:50%;right:0;margin-top:-1rem;z-index:0}[data-role="list"] ul li>a:active{background:#e6e6e6;border-color:#ebebeb}[data-role="list"] ul li p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:none;display:block;color:#787878;font-size:0.9rem;padding-left:1rem;padding-top:0.5rem;line-height:1rem}[data-role="list"] ul li p:only-child,[data-role="list"] ul li p:first-of-type:last-of-type{line-height:2.5rem}[data-role="list"] ul li>label{z-index:110;width:4.5rem;height:2.2rem;right:0.5rem;margin-top:-1.1rem;position:absolute;top:50%}[data-role="list"] aside{float:left;margin:-1.2em 0 0 0;max-width:100%;vertical-align:bottom;position:relative;top:50%;z-index:2}[data-role="list"] aside img{border-radius:6px;margin-bottom:0;float:left}[data-role="list"] aside:after{background:url(../img/[e-mail]) no-repeat;background-size:100% 100%;content:' ';width:100%;height:100%;position:absolute;top:0;left:0}[data-role="list"]>header+ul li{padding-left:20px}[data-role="footer"]{background:transparent url("../img/[e-mail]") repeat-x top left;height:85px;width:100%;position:fixed;z-index:100;left:0;bottom:-65px;-webkit-transition:-webkit-transform 0.1s ease-in-out;transition:transform 0.1s ease-in-out}[data-role="footer"].revealed{-webkit-transform:translate3d(0, -65px, 0);transform:translate3d(0, -65px, 0)}[data-role="footer"] nav{background:#fdfdfd;margin-top:20px;display:block;height:55px;padding-top:10px}[data-role="footer"] nav ul{list-style:none}[data-role="footer"] nav ul li,[data-role="footer"] nav ul li a{color:#7d767b;font-size:0.6rem;text-align:center;width:60px;float:right;text-decoration:none}[data-role="footer"] nav ul li{padding-top:4px}[data-role="footer"] nav ul li img{width:16px;height:16px}[data-role="footer"] nav ul li span{display:block}[data-role="footer"] nav ul li:last-child{float:left}[data-role="shape"]{height:100px;width:100px;display:inline-block;max-width:100%;vertical-align:bottom;position:relative;z-index:100}[data-role="shape"]:after{background:url(../img/[e-mail]) no-repeat;background-size:100% 100%;content:' ';width:100%;height:100%;position:absolute;top:0;left:0}[data-role="shape"] img{height:100%;width:100%;border-radius:1.5rem;margin-bottom:0;display:inline-block}[data-role="shape"] div{height:100%;width:100%;border-radius:1.5rem;margin-bottom:0;display:inline-block}[data-role="indexbar"]{position:absolute;right:1rem;top:0;bottom:0}[data-role="indexbar"] ol{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0.3rem 0;margin:5.5rem 0;width:2rem;border-radius:4rem;opacity:0.6;list-style:none;background:#c2c2c2}[data-role="indexbar"] ol li{font-size:1rem;line-height:1.4em;text-align:center;text-transform:uppercase}[data-role="indexbar"] ol li a{display:block;color:#333;width:100%;height:100%;text-decoration:none}[data-role="option-selector"]{-webkit-box-shadow:inset 0 2px 2px 0 #d5d5d5;box-shadow:inset 0 2px 2px 0 #d5d5d5;width:100%;height:auto;margin:0 auto;border:1px solid #C7C7C7;overflow:hidden;-webkit-transition:height 0.4s;transition:height 0.4s;margin-top:15px;margin-bottom:15px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px}[data-role="option-selector"] li{text-decoration:none;color:#787878;display:block;height:3rem;position:relative;line-height:3rem;padding-left:1rem;padding-right:1.5rem;border:none;border-top:1px solid #C7C7C7;font-size:0.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}[data-role="option-selector"] li.active:after{background:transparent url(../img/[e-mail]) no-repeat center center;background-size:15px 15px;display:block;position:absolute;width:2rem;height:3rem;right:0.5rem;content:"";top:0}[data-role="option-selector"] li.closed:after{background:transparent url(../img/[e-mail]) no-repeat center center;background-size:15px 15px;display:block;position:absolute;width:2rem;height:3rem;right:0.5rem;content:"";top:0}[data-role="option-selector"] li aside{float:left;margin:-1.2em 0 0 0;max-width:100%;vertical-align:bottom;position:relative;top:50%;z-index:2}[data-role="option-selector"] li aside img{border-radius:6px;margin-bottom:0;float:left}[data-role="option-selector"] li aside:after{background:url(../img/[e-mail]) no-repeat;background-size:100% 100%;content:' ';width:100%;height:100%;position:absolute;top:0;left:0}[data-role="option-selector"] li aside+p{padding-left:1rem}[data-role="option-selector"] li p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:none;display:block;color:#787878;font-size:0.9rem;padding-top:0.5rem;line-height:1rem}[data-role="option-selector"] li p:only-child,[data-role="option-selector"] li p:first-of-type:last-of-type{line-height:2rem}[data-role="option-selector"] li p+p{padding-top:0.2rem;font-size:0.7rem}[data-role="option-selector"] li:first-child{border-top:0 !important}.icon{width:26px;height:26px;display:inline-block;vertical-align:middle}.icon.icon-call{background:url(../img/icons/icon-call.svg) no-repeat scroll center center transparent;background-size:26px}*{-webkit-tap-highlight-color:rgba(0,0,0,0)}body{background:#ededf0 url("../img/[e-mail]") repeat top left;font-family:"Ubuntu";font-weight:normal}[data-role="content"]{background:#ededf0 url("../img/[e-mail]") repeat top left;border-top:1px solid #f0f0f0;height:auto;min-height:auto;width:100%;font-size:1rem "Ubuntu";color:#787878}[data-role="content"] p{font:0.9rem "Ubuntu";color:#787878}[data-role="content"] h1,[data-role="content"] h2,[data-role="content"] h3{color:#747278;font:1.3rem "Ubuntu";font-weight:300}[data-role="content"] h2{font-size:1.1rem}[data-role="content"] h3{font-size:0.9rem}[data-role="content"] img{margin:0 auto;max-width:98%}.inset{margin-bottom:10px}.xlarge-font{font-size:33px !important;font-family:"Ubuntu";color:#787878}.large-font{font-size:20px !important;font-family:"Ubuntu";color:#787878}.medium-font{font-size:14px !important;font-family:"Ubuntu";color:#787878}.small-font{font-size:12px !important;font-family:"Ubuntu";color:#787878}.xsmall-font{font-size:10px !important;font-family:"Ubuntu";color:#787878}.xxsmall-font{font-size:8px !important;font-family:"Ubuntu";color:#787878}

=== removed file '0.1/ambiance/css/buttons.css'
--- 0.1/ambiance/css/buttons.css	2014-02-10 17:24:04 +0000
+++ 0.1/ambiance/css/buttons.css	1970-01-01 00:00:00 +0000
@@ -1,96 +0,0 @@
-/*
- * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
- * License granted by Canonical Limited
- *
- * This file is part of ubuntu-html5-ui-toolkit.
- *
- * This package is free software; you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as
- * published by the Free Software Foundation; either version 3 of the
- * License, or
- * (at your option) any later version.
-
- * This package is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
-
- * You should have received a copy of the GNU Lesser General Public
- * License along with this program. If not, see
- * <http://www.gnu.org/licenses/>
- */
-
-/* ----------------------------------
- * Buttons
- * ---------------------------------- */
-
-[data-role="button"]{
-    max-width: 200px;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    display: inline-block;
-    vertical-align: middle;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    background: #cccccc;
-    border: 0;
-    border-radius: 6px;
-    color: #333;
-    font-family: Ubuntu;
-    font-size: 0.9rem;
-    padding: 6px 25px;
-    text-align: center;
-    text-decoration: none;
-    position: relative;
-}
-
-[data-role="button"]:after {
-    background: url(../img/[e-mail]) no-repeat;
-    background-size: 100% 100%;
-    content: ' ';
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-[data-role="button"]:active:after {
-    background: url(../img/[e-mail]) no-repeat;
-    background-size: 100% 100%;
-    content: ' ';
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-[data-role="button"].ubuntu {
-    background: #dd4814;
-    color: #ffffff;
-    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-}
-
-[data-role="button"].danger {
-    background: red;
-    color: #ffffff;
-    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-}
-
-[data-role="button"].warning {
-    background: #faa732;
-    color: #ffffff;
-    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-}
-
-[data-role="button"].success {
-    background: #5da357;
-    color: #ffffff;
-    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-}
-
-[data-role="button"].disabled {
-    color: rgba(255,255,255,0.6);
-}
\ No newline at end of file

=== removed file '0.1/ambiance/css/default.css'
--- 0.1/ambiance/css/default.css	2014-02-12 19:46:04 +0000
+++ 0.1/ambiance/css/default.css	1970-01-01 00:00:00 +0000
@@ -1,128 +0,0 @@
-/*
- * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
- * License granted by Canonical Limited
- *
- * This file is part of ubuntu-html5-ui-toolkit.
- *
- * This package is free software; you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as
- * published by the Free Software Foundation; either version 3 of the
- * License, or
- * (at your option) any later version.
-
- * This package is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
-
- * You should have received a copy of the GNU Lesser General Public
- * License along with this program. If not, see
- * <http://www.gnu.org/licenses/>
- */
-
-@import url("reset.css");
-@import url("tabs.css");
-@import url("pagestack.css");
-@import url("text-input.css");
-@import url("progress-bars.css");
-@import url("dialogs.css");
-@import url("buttons.css");
-@import url("sliders.css");
-@import url("toggles.css");
-@import url("popover.css");
-@import url("listitems.css");
-@import url("toolbars.css");
-@import url("shapes.css");
-@import url("indexbar.css");
-@import url("option-selector.css");
-@import url("icons.css");
-
-
-* {
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-body {
-    background: #ededf0 url("../img/[e-mail]") repeat top left;
-    font-family: Ubuntu;
-    font-weight: normal;
-}
-
-[data-role="content"] {
-    background: #ededf0 url("../img/[e-mail]") repeat top left;
-    border-top: 1px solid #f0f0f0;
-    height: auto;
-    min-height: auto;
-    width: 100%;
-    font-size: 1rem "Ubuntu";
-    color: #787878;
-}
-
-[data-role="content"] p {
-    font: 0.9rem "Ubuntu";
-    color: #787878;
-}
-
-[data-role="content"] h1,
-[data-role="content"] h2,
-[data-role="content"] h3 {
-    color: #747278;
-    font: 1.3rem "Ubuntu Light";
-}
-
-[data-role="content"] h2 {
-    font-size: 1.1rem;
-}
-
-[data-role="content"] h3 {
-    font-size: 0.9rem;
-}
-
-[data-role="content"] img {
-    margin: 0 auto;
-    max-width: 98%;
-}
-
-.inset {
-    margin-bottom: 10px;
-}
-
-/**
-   To be factored out
-  */
-
-.xlarge-font {
-    font-size: 33px !important;
-    font-family: "Ubuntu";
-    color: #787878 ;
-}
-
-.large-font {
-    font-size: 20px !important;
-    font-family: "Ubuntu";
-    color: #787878;
-}
-
-.medium-font {
-    font-size: 14px !important;
-    font-family: "Ubuntu";
-    color: #787878;
-}
-
-.small-font {
-    font-size: 12px !important;
-    font-family: "Ubuntu";
-    color: #787878;
-}
-
-.xsmall-font {
-    font-size: 10px !important;
-    font-family: "Ubuntu";
-    color: #787878;
-}
-
-.xxsmall-font {
-    font-size: 8px !important;
-    font-family: "Ubuntu";
-    color: #787878;
-}

=== removed file '0.1/ambiance/css/dialogs.css'
--- 0.1/ambiance/css/dialogs.css	2014-01-27 18:42:31 +0000
+++ 0.1/ambiance/css/dialogs.css	1970-01-01 00:00:00 +0000
@@ -1,169 +0,0 @@
-/*
- * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
- * License granted by Canonical Limited
- *
- * This file is part of ubuntu-html5-ui-toolkit.
- *
- * This package is free software; you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as 
- * published by the Free Software Foundation; either version 3 of the 
- * License, or
- * (at your option) any later version.
- 
- * This package is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- 
- * You should have received a copy of the GNU Lesser General Public 
- * License along with this program. If not, see 
- * <http://www.gnu.org/licenses/>.
- */
-
-/* ----------------------------------
- * Dialog
- * ---------------------------------- */
-
-[data-role="dialog"] {
-    background: #000;
-    opacity: 0.9;
-    overflow: hidden;
-    position: absolute;
-    z-index: 100;
-    top: 0;
-    left: 0;
-    right: 0;
-    padding: 0;
-    font-size: 0;
-    /* Using font-size: 0; we avoid the unwanted visual space (about 3px)
-    created by white-spaces and break lines in the code betewen inline-block elements */
-    color: #fff;
-    text-align: center;
-    height: 100%;
-    display: none;
-}
-
-[data-role="dialog"].active {
-    display: block;
-}
-
-[data-role="dialog"] > section {
-    font-size: 1.5rem;
-    color: #FAFAFA;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    width: 100%;
-    display: inline-block;
-    /*overflow-y: scroll;*/
-    vertical-align: middle;
-    white-space: normal;
-}
-
-[data-role="dialog"]:before {
-    content: "";
-    display: inline-block;
-    vertical-align: middle;
-    width: 0.1rem;
-    height: 100%;
-    margin-left: -0.1rem;
-}
-
-[data-role="dialog"] h1 {
-    font-size: 1.3rem;
-    line-height: 1.5em;
-    color: rgba(255, 255, 255, 0.9);
-    margin: 0;
-}
-
-[data-role="dialog"] p {
-    font-size: 0.9rem;
-    line-height: 1.8em;
-    color: rgba(255, 255, 255, 0.6);
-    margin: 0;
-}
-
-[data-role="dialog"] menu {
-    white-space: nowrap;
-    margin: 0 auto;
-    margin-top: 1rem;
-    display: block;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    text-align: center;
-}
-
-[data-role="dialog"] menu [data-role="button"] {
-    display: block;
-    margin: 0 auto;
-    margin-bottom: 10px;
-    width: 200px;
-}
-
-[data-role="dialog"] menu [data-role="button"]:last-child {
-    margin-bottom: 0;
-}
-
-/* Tablet */
-@media only screen and (min-width: 870px){
-
-    [data-role="dialog"] {
-        background: rgba(0, 0, 0, 0.6);
-        opacity: 1;
-    }
-
-    [data-role="dialog"] > section {
-        background: rgba(0, 0, 0, 0.7);
-        border-radius: 10px;
-        width: 18.7rem;
-        padding: 1.8rem;
-    }
-
-    [data-role="dialog"] input[type="text"],
-    [data-role="dialog"] input[type="password"],
-    [data-role="dialog"] input[type="email"],
-    [data-role="dialog"] input[type="tel"],
-    [data-role="dialog"] input[type="search"],
-    [data-role="dialog"] input[type="url"],
-    [data-role="dialog"] input[type="number"] {
-        width: 14rem;
-    }
-
-    [data-role="dialog"] menu [data-role="button"] {
-        width: 100%;
-        max-width: 100%;
-    }
-
-    @keyframes shake{
-        0% { -webkit-transform: translate3d(0,0,0); }
-        10% { -webkit-transform: translate3d(-20px,0,0); }
-        20% { -webkit-transform: translate3d(20px,0,0); }
-        30% { -webkit-transform: translate3d(-20px,0,0); }
-        40% { -webkit-transform: translate3d(20px,0,0); }
-        50% { -webkit-transform: translate3d(-20px,0,0); }
-        60% { -webkit-transform: translate3d(20px,0,0); }
-        70% { -webkit-transform: translate3d(-20px,0,0); }
-        80% { -webkit-transform: translate3d(20px,0,0); }
-        90% { -webkit-transform: translate3d(-20px,0,0); }
-        100% { -webkit-transform: translate3d(0,0,0); }
-    }
-
-    @-webkit-keyframes shake {
-        0% { -webkit-transform: translate3d(0,0,0); }
-        10% { -webkit-transform: translate3d(-20px,0,0); }
-        20% { -webkit-transform: translate3d(20px,0,0); }
-        30% { -webkit-transform: translate3d(-20px,0,0); }
-        40% { -webkit-transform: translate3d(20px,0,0); }
-        50% { -webkit-transform: translate3d(-20px,0,0); }
-        60% { -webkit-transform: translate3d(20px,0,0); }
-        70% { -webkit-transform: translate3d(-20px,0,0); }
-        80% { -webkit-transform: translate3d(20px,0,0); }
-        90% { -webkit-transform: translate3d(-20px,0,0); }
-        100% { -webkit-transform: translate3d(0,0,0); }
-    }
-
-    .shake {
-        -webkit-animation: shakeIt .9s ease-in;
-        animation: shakeIt .9s ease-in;
-    }
-
-}
\ No newline at end of file

=== removed file '0.1/ambiance/css/icons.css'
--- 0.1/ambiance/css/icons.css	2014-02-10 17:24:04 +0000
+++ 0.1/ambiance/css/icons.css	1970-01-01 00:00:00 +0000
@@ -1,37 +0,0 @@
-/*
- * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
- * License granted by Canonical Limited
- *
- * This file is part of ubuntu-html5-ui-toolkit.
- *
- * This package is free software; you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as
- * published by the Free Software Foundation; either version 3 of the
- * License, or
- * (at your option) any later version.
-
- * This package is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
-
- * You should have received a copy of the GNU Lesser General Public
- * License along with this program. If not, see
- * <http://www.gnu.org/licenses/>.
- */
-
- /* ----------------------------------
- * Icons
- * ---------------------------------- */
-
-.icon {
-	width: 26px;
-	height: 26px;
-	display: inline-block;
-	vertical-align: middle;
-}
-
-.icon.icon-call {
-	background: url(../img/icons/icon-call.svg) no-repeat scroll center center transparent;
-	background-size: 26px;
-}
\ No newline at end of file

=== removed file '0.1/ambiance/css/indexbar.css'
--- 0.1/ambiance/css/indexbar.css	2014-01-27 18:42:31 +0000
+++ 0.1/ambiance/css/indexbar.css	1970-01-01 00:00:00 +0000
@@ -1,60 +0,0 @@
-/*
- * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
- * License granted by Canonical Limited
- *
- * This file is part of ubuntu-html5-ui-toolkit.
- *
- * This package is free software; you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as 
- * published by the Free Software Foundation; either version 3 of the 
- * License, or
- * (at your option) any later version.
- 
- * This package is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- 
- * You should have received a copy of the GNU Lesser General Public 
- * License along with this program. If not, see 
- * <http://www.gnu.org/licenses/>.
- */
-
-/* ----------------------------------
- * Lists
- * ----------------------------------
-   ================================================== */
-
-[data-role="indexbar"] {
-    position: absolute;
-    right: 1rem;
-    top: 0;
-    bottom: 0;
-}
-
-[data-role="indexbar"] ol {
-    padding: 0.3rem 0;
-    margin: 5.5rem 0;
-    width: 2rem;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    border-radius: 4rem;
-    opacity: 0.6;
-    list-style: none;
-    background: #c2c2c2;
-}
-
-[data-role="indexbar"] li {
-    font-size: 1rem;
-    line-height: 1.4em;
-    text-align: center;
-    text-transform: uppercase;
-}
-
-[data-role="indexbar"] li a {
-    display: block;
-    color: #333;
-    width: 100%;
-    height: 100%;
-    text-decoration: none;
-}
\ No newline at end of file

=== removed file '0.1/ambiance/css/listitems.css'
--- 0.1/ambiance/css/listitems.css	2014-01-27 18:42:31 +0000
+++ 0.1/ambiance/css/listitems.css	1970-01-01 00:00:00 +0000
@@ -1,151 +0,0 @@
-/*
- * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
- * License granted by Canonical Limited
- *
- * This file is part of ubuntu-html5-ui-toolkit.
- *
- * This package is free software; you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as
- * published by the Free Software Foundation; either version 3 of the
- * License, or
- * (at your option) any later version.
-
- * This package is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
-
- * You should have received a copy of the GNU Lesser General Public
- * License along with this program. If not, see
- * <http://www.gnu.org/licenses/>.
- */
-
-/* ----------------------------------
- * Lists
- * ---------------------------------- */
-
-[data-role="list"] {
-    border-top: 1px solid #f0f0f0;
-}
-
-/* Title divisors */
-[data-role="list"] header {
-    border-bottom: 0.1rem solid #c9c9c9;
-    line-height: 1.8rem;
-    color: #787878;
-    font-size: 0.9rem;
-    padding-left: 1rem;
-}
-
-[data-role="list"] ul {
-    list-style: none;
-    overflow: hidden;
-}
-
-[data-role="list"] > header+ul li {
-    padding-left: 20px;
-}
-
-/* List items */
-[data-role="list"] li {
-    width: 100%;
-    height: 3.5rem;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    border-bottom: solid 0.1rem #c7c7c7;
-    color: #787878;
-    position: relative;
-}
-
-/* Pressed State */
-[data-role="list"] li > a {
-    text-decoration: none;
-    color: #787878;
-    display: block;
-    height: 3.4rem;
-    position: relative;
-    border: none;
-    line-height: 3.4rem;
-    padding-left: 1rem;
-    padding-right: 1.5rem;
-    border-top: 1px solid #ebebeb;
-    font-size: 0.9rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-[data-role="list"] li > a:after {
-    content: "";
-    background: transparent url(../img/[e-mail]) no-repeat 0.5rem 0.5rem;
-    background-size: 40% 75%;
-    position: absolute;
-    width: 2rem;
-    height: 2rem;
-    top: 50%;
-    right: 0;
-    margin-top: -1rem;
-    z-index: 0;
-}
-
-[data-role="list"] li > a:active {
-    background: #e6e6e6;
-    border-color: #ebebeb;
-}
-
-/* Text content */
-[data-role="list"] li p {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    border: none;
-    display: block;
-    color: #787878;
-    font-size: 0.9rem;
-    padding-left: 1rem;
-    padding-top: 0.5rem;
-    line-height: 1rem;
-}
-
-[data-role="list"] li p:only-child,
-[data-role="list"] li p:first-of-type:last-of-type {
-    line-height: 2.5rem;
-}
-
-[data-role="list"] aside {
-    float: left;
-    margin: -1.2em 0 0 0;
-    max-width: 100%;
-    vertical-align: bottom;
-    position: relative;
-    top: 50%;
-    z-index: 2;
-}
-
-[data-role="list"] aside img {
-    border-radius: 6px;
-    margin-bottom: 0;
-    float: left;
-}
-
-[data-role="list"] aside:after {
-    background: url(../img/[e-mail]) no-repeat;
-    background-size: 100% 100%;
-    content: ' ';
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-/* Checkable content */
-[data-role="list"] li > label {
-    z-index: 110;
-    width: 4.5rem;
-    height: 2.2rem;
-    right: 0.5rem;
-    margin-top: -1.1rem;
-    position: absolute;
-    top: 50%;
-}
\ No newline at end of file

=== removed file '0.1/ambiance/css/option-selector.css'
--- 0.1/ambiance/css/option-selector.css	2014-01-27 18:42:31 +0000
+++ 0.1/ambiance/css/option-selector.css	1970-01-01 00:00:00 +0000
@@ -1,137 +0,0 @@
-/*
- * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
- * License granted by Canonical Limited
- *
- * This file is part of ubuntu-html5-ui-toolkit.
- *
- * This package is free software; you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as
- * published by the Free Software Foundation; either version 3 of the
- * License, or
- * (at your option) any later version.
-
- * This package is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
-
- * You should have received a copy of the GNU Lesser General Public
- * License along with this program. If not, see
- * <http://www.gnu.org/licenses/>.
- */
-
-[data-role="option-selector"] {
-    width: 100%;
-    height: auto;
-    margin: 0 auto;
-    border: 1px solid #C7C7C7;
-    overflow: hidden;
-    -webkit-transition: height 0.4s;
-    transition: height 0.4s;
-    margin-top: 15px;
-    margin-bottom: 15px;
-    -webkit-border-radius: 10px;
-    -moz-border-radius: 10px;
-    border-radius: 10px;
-    -webkit-box-shadow: inset 0 2px 2px 0 #D5D5D5;
-    box-shadow: inset 0 2px 2px 0 #D5D5D5;
-}
-
-[data-role="option-selector"] li {
-    text-decoration: none;
-    color: #787878;
-    display: block;
-    height: 3rem;
-    position: relative;
-    line-height: 3rem;
-    padding-left: 1rem;
-    padding-right: 1.5rem;
-    border: none;
-    border-top: 1px solid #C7C7C7;
-    font-size: 0.9rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    cursor: pointer;
-}
-
-[data-role="option-selector"] ul li:first-child {
-    border-top: 0!important;
-}
-
-[data-role="option-selector"] li.active:after{
-    background: transparent url(../img/[e-mail]) no-repeat center center;
-    background-size: 15px 15px;
-    display: block;
-    position: absolute;
-    width: 2rem;
-    height: 3rem;
-    right: 0.5rem;
-    content: "";
-    top: 0;
-}
-
-[data-role="option-selector"] li.closed:after {
-    background: transparent url(../img/[e-mail]) no-repeat center center;
-    background-size: 15px 15px;
-    display: block;
-    position: absolute;
-    width: 2rem;
-    height: 3rem;
-    right: 0.5rem;
-    content: "";
-    top: 0;
-}
-
-[data-role="option-selector"] li aside {
-    float: left;
-    margin: -1.2em 0 0 0;
-    max-width: 100%;
-    vertical-align: bottom;
-    position: relative;
-    top: 50%;
-    z-index: 2;
-}
-
-[data-role="option-selector"] li aside img {
-    border-radius: 6px;
-    margin-bottom: 0;
-    float: left;
-}
-
-[data-role="option-selector"] li aside:after {
-    background: url(../img/[e-mail]) no-repeat;
-    background-size: 100% 100%;
-    content: ' ';
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-[data-role="option-selector"] li aside+p {
-    padding-left: 1rem;
-}
-
-[data-role="option-selector"] li p {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    border: none;
-    display: block;
-    color: #787878;
-    font-size: 0.9rem;
-    padding-top: 0.5rem;
-    line-height: 1rem;
-}
-
-[data-role="option-selector"] li p:only-child,
-[data-role="option-selector"] li p:first-of-type:last-of-type {
-    line-height: 2rem;
-}
-
-[data-role="option-selector"] li p+p {
-    padding-top: 0.2rem;
-    font-size: 0.7rem;
-}
\ No newline at end of file

=== removed file '0.1/ambiance/css/pagestack.css'
--- 0.1/ambiance/css/pagestack.css	2014-01-30 19:56:22 +0000
+++ 0.1/ambiance/css/pagestack.css	1970-01-01 00:00:00 +0000
@@ -1,46 +0,0 @@
-/*
- * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
- * License granted by Canonical Limited
- *
- * This file is part of ubuntu-html5-ui-toolkit.
- *
- * This package is free software; you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as
- * published by the Free Software Foundation; either version 3 of the
- * License, or
- * (at your option) any later version.
-
- * This package is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
-
- * You should have received a copy of the GNU Lesser General Public
- * License along with this program. If not, see
- * <http://www.gnu.org/licenses/>.
- */
-
-/* ----------------------------------
- * Pagestack
- * ---------------------------------- */
-
-[data-role="pagestack"] {
-    position: relative;
-    -webkit-transition: all 0 linear;
-    transition: all 0 linear;
-}
-
-[data-role="page"] {
-    vertical-align: top;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    display: none;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-}
-
-[data-role="pagestack"]>[data-role="page"]:first-child,
-[data-role="mainview"]>[data-role="page"] {
-    display: block;
-}
\ No newline at end of file

=== removed file '0.1/ambiance/css/popover.css'
--- 0.1/ambiance/css/popover.css	2014-01-27 18:42:31 +0000
+++ 0.1/ambiance/css/popover.css	1970-01-01 00:00:00 +0000
@@ -1,125 +0,0 @@
-/*
- * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
- * License granted by Canonical Limited
- *
- * This file is part of ubuntu-html5-ui-toolkit.
- *
- * This package is free software; you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as
- * published by the Free Software Foundation; either version 3 of the
- * License, or
- * (at your option) any later version.
-
- * This package is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
-
- * You should have received a copy of the GNU Lesser General Public
- * License along with this program. If not, see
- * <http://www.gnu.org/licenses/>.
- */
-
-.popover {
-    position: absolute;
-    background: rgba(255, 255, 255, 0.98);
-    -webkit-border-radius: 15px;
-    border-radius: 15px;
-    -webkit-background-clip: padding-box;
-    z-index: 110;
-    width: 320px;
-    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-    left: 0;
-    top: 0;
-    color: #787878;
-    font-size: 1rem;
-    display: none;
-}
-
-.popover.active {
-    display: block;
-}
-
-.popover .list {
-    -webkit-border-radius: 15px;
-    border-radius: 15px;
-    width: auto;
-    max-height: 250px;
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-}
-
-.list li {
-    position: relative;
-    padding: 20px 10px 20px 10px;
-    border-bottom: 1px solid #d9d9d9;
-    text-align: center;
-    font-size: 1rem;
-}
-
-.list li a {
-    color: #787878;
-    text-decoration: none;
-}
-
-.list li.active {
-    background: #ebebeb;
-    border-top: 1px solid #fcfcfc;
-}
-
-.list li.active a {
-    color: #dd4814;
-    text-decoration: none;
-}
-
-/* Caret */
-.popover[data-gravity]:before,
-.popover[data-gravity]:after {
-    position: absolute;
-    left: 50%;
-    width: 0;
-    height: 0;
-    content: '';
-}
-
-.popover[data-gravity="n"]:before {
-    top: -17px;
-    margin-left: -18px;
-    background: transparent url(../img/[e-mail]) no-repeat 0.5rem 0.5rem;
-    background-size: 50% 50%;
-    width: 37px;
-    height: 18px;
-}
-
-.popover[data-gravity="w"]:before {
-    top: 50%;
-    margin-left: -17px;
-    margin-top: -18px;
-    background: transparent url(../img/[e-mail]) no-repeat 0.5rem 0.5rem;
-    background-size: 50% 50%;
-    width: 18px;
-    height: 37px;
-    left: 0;
-}
-
-.popover[data-gravity="s"]:after {
-    bottom: -9px;
-    margin-left: -18px;
-    background: transparent url(../img/[e-mail]) no-repeat 0.5rem 0.5rem;
-    background-size: 50% 50%;
-    width: 37px;
-    height: 18px;
-}
-
-.popover[data-gravity="e"]:before {
-    top: 50%;
-    margin-right: -10px;
-    margin-top: -18px;
-    background: transparent url(../img/[e-mail]) no-repeat 0.5rem 0.5rem;
-    background-size: 50% 50%;
-    width: 18px;
-    height: 37px;
-    right: 0;
-    left: initial;
-}
\ No newline at end of file

=== removed file '0.1/ambiance/css/progress-bars.css'
--- 0.1/ambiance/css/progress-bars.css	2014-01-27 18:42:31 +0000
+++ 0.1/ambiance/css/progress-bars.css	1970-01-01 00:00:00 +0000
@@ -1,96 +0,0 @@
-/*
- * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
- * License granted by Canonical Limited
- *
- * This file is part of ubuntu-html5-ui-toolkit.
- *
- * This package is free software; you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as
- * published by the Free Software Foundation; either version 3 of the
- * License, or
- * (at your option) any later version.
-
- * This package is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
-
- * You should have received a copy of the GNU Lesser General Public
- * License along with this program. If not, see
- * <http://www.gnu.org/licenses/>.
- */
-
-/* ----------------------------------
- * Progress + activities
- * ---------------------------------- */
-
-/* Spinner */
-progress {
-    -webkit-appearance: none;
-    height: 35px;
-}
-
-progress:not([value]) {
-    background: url(../img/[e-mail]) no-repeat center center / 100% auto;
-    -webkit-animation: 1s rotate infinite steps(30);
-    animation: 1s rotate infinite steps(30);
-    width: 24px;
-    height: 24px;
-    border: none;
-    display: inline-block;
-    vertical-align: middle;
-}
-
-/* Bigger Spinner */
-progress.bigger:not([value]) {
-    background: url(../img/[e-mail]) no-repeat center center / 100% auto;
-    width: 90px;
-    height: 90px;
-}
-
-progress:not([value])::-webkit-progress-bar {
-    background: none;
-    -webkit-box-shadow: none;
-}
-
-/* Progress bar */
-progress[value]::-webkit-progress-value {
-    width: 100%;
-    background: #dd4814;
-    border: none;
-    border-radius: 6px;
-    display: block;
-    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
-}
-
-progress[value]::-webkit-progress-bar {
-    padding: 1px;
-    background-color: rgba(192, 192, 192, 0.1);
-    width: 200px;
-    height: 35px;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    border-radius: 6px;
-    padding: 0;
-    -webkit-box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.1);
-    box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.1);
-}
-
-/* Infinite Progress bar */
-progress[value].infinite::-webkit-progress-value {
-    -webkit-appearance: none;
-    /*-webkit-animation: 1.9s move infinite steps(15);
-    animation: 1.9s move infinite steps(15);*/
-}
-
-/* Animations */
-@-webkit-keyframes rotate {
-    from { -webkit-transform: rotate(1deg); }
-    to   { -webkit-transform: rotate(360deg); }
-}
-
-/*@-webkit-keyframes move {
-    0% { width: -100px 0, 0 0, 0 0 }
-    100% { width: 0 0, 0 0, 0 0 }
-}*/
\ No newline at end of file

=== removed file '0.1/ambiance/css/reset.css'
--- 0.1/ambiance/css/reset.css	2014-01-27 18:42:31 +0000
+++ 0.1/ambiance/css/reset.css	1970-01-01 00:00:00 +0000
@@ -1,112 +0,0 @@
-/*
- * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
- * License granted by Canonical Limited
- *
- * This file is part of ubuntu-html5-ui-toolkit.
- *
- * This package is free software; you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as 
- * published by the Free Software Foundation; either version 3 of the 
- * License, or
- * (at your option) any later version.
- 
- * This package is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- 
- * You should have received a copy of the GNU Lesser General Public 
- * License along with this program. If not, see 
- * <http://www.gnu.org/licenses/>.
- */
-
-/* Hard reset
--------------------------------------------------- */
-* {
-    outline: none;
-}
-html,
-body,
-div,
-span,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-section,
-summary,
-time,
-audio,
-video {
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-
-ul {
-    list-style: none;
-}
\ No newline at end of file

=== added directory '0.1/ambiance/css/sass'
=== added file '0.1/ambiance/css/sass/buttons.scss'
--- 0.1/ambiance/css/sass/buttons.scss	1970-01-01 00:00:00 +0000
+++ 0.1/ambiance/css/sass/buttons.scss	2014-02-20 20:37:29 +0000
@@ -0,0 +1,95 @@
+/*
+ * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
+ * License granted by Canonical Limited
+ *
+ * This file is part of ubuntu-html5-ui-toolkit.
+ *
+ * This package is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or
+ * (at your option) any later version.
+
+ * This package is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this program. If not, see
+ * <http://www.gnu.org/licenses/>
+ */
+
+/* ----------------------------------
+ * Buttons
+ * ---------------------------------- */
+
+[data-role="button"] {
+    @include box_sizing (border-box);
+    max-width: 200px;
+    display: inline-block;
+    vertical-align: middle;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    background: #cccccc;
+    border: 0;
+    border-radius: 6px;
+    color: #333;
+    font-family: Ubuntu;
+    font-size: 0.9rem;
+    padding: 6px 25px;
+    text-align: center;
+    text-decoration: none;
+    position: relative;
+
+    &:after {
+        background: url(../img/[e-mail]) no-repeat;
+        background-size: 100% 100%;
+        content: ' ';
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+    &:active:after {
+        background: url(../img/[e-mail]) no-repeat;
+        background-size: 100% 100%;
+        content: ' ';
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+    &.ubuntu {
+        background: $ubuntu_orange;
+        color: #ffffff;
+        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+    }
+
+    &.danger {
+        background: red;
+        color: #ffffff;
+        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+    }
+
+    &.warning {
+        background: #faa732;
+        color: #ffffff;
+        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+    }
+
+    &.success {
+        background: #5da357;
+        color: #ffffff;
+        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+    }
+
+    &.disabled {
+        color: rgba(255,255,255,0.6);
+    }
+}
\ No newline at end of file

=== added file '0.1/ambiance/css/sass/constants.scss'
--- 0.1/ambiance/css/sass/constants.scss	1970-01-01 00:00:00 +0000
+++ 0.1/ambiance/css/sass/constants.scss	2014-02-20 20:37:29 +0000
@@ -0,0 +1,26 @@
+/*
+ * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
+ * License granted by Canonical Limited
+ *
+ * This file is part of ubuntu-html5-ui-toolkit.
+ *
+ * This package is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or
+ * (at your option) any later version.
+
+ * This package is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this program. If not, see
+ * <http://www.gnu.org/licenses/>
+ */
+
+ $ubuntu_orange: #dd4814;
+ $text_color: #787878;
+
+ $font_family: "Ubuntu";
\ No newline at end of file

=== added file '0.1/ambiance/css/sass/default.scss'
--- 0.1/ambiance/css/sass/default.scss	1970-01-01 00:00:00 +0000
+++ 0.1/ambiance/css/sass/default.scss	2014-02-20 20:37:29 +0000
@@ -0,0 +1,131 @@
+/*
+ * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
+ * License granted by Canonical Limited
+ *
+ * This file is part of ubuntu-html5-ui-toolkit.
+ *
+ * This package is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or
+ * (at your option) any later version.
+
+ * This package is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this program. If not, see
+ * <http://www.gnu.org/licenses/>
+ */
+
+@import "constants";
+@import "mixins";
+@import "reset";
+@import "tabs";
+@import "pagestack";
+@import "text-input";
+@import "progress-bars";
+@import "dialogs";
+@import "buttons";
+@import "sliders";
+@import "toggles";
+@import "popover";
+@import "listitems";
+@import "toolbars";
+@import "shapes";
+@import "indexbar";
+@import "option-selector";
+@import "icons";
+
+
+* {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+body {
+    background: #ededf0 url("../img/[e-mail]") repeat top left;
+    font-family: $font_family;
+    font-weight: normal;
+}
+
+[data-role="content"] {
+    background: #ededf0 url("../img/[e-mail]") repeat top left;
+    border-top: 1px solid #f0f0f0;
+    height: auto;
+    min-height: auto;
+    width: 100%;
+    font-size: 1rem $font_family;
+    color: $text_color;
+}
+
+[data-role="content"] p {
+    font: 0.9rem $font_family;
+    color: $text_color;
+}
+
+[data-role="content"] h1,
+[data-role="content"] h2,
+[data-role="content"] h3 {
+    color: #747278;
+    font: 1.3rem $font_family;
+    font-weight: 300;
+}
+
+[data-role="content"] h2 {
+    font-size: 1.1rem;
+}
+
+[data-role="content"] h3 {
+    font-size: 0.9rem;
+}
+
+[data-role="content"] img {
+    margin: 0 auto;
+    max-width: 98%;
+}
+
+.inset {
+    margin-bottom: 10px;
+}
+
+/**
+   To be factored out
+  */
+
+.xlarge-font {
+    font-size: 33px !important;
+    font-family: $font_family;
+    color: $text_color;
+}
+
+.large-font {
+    font-size: 20px !important;
+    font-family: $font_family;
+    color: $text_color;
+}
+
+.medium-font {
+    font-size: 14px !important;
+    font-family: $font_family;
+    color: $text_color;
+}
+
+.small-font {
+    font-size: 12px !important;
+    font-family: $font_family;
+    color: $text_color;
+}
+
+.xsmall-font {
+    font-size: 10px !important;
+    font-family: $font_family;
+    color: $text_color;
+}
+
+.xxsmall-font {
+    font-size: 8px !important;
+    font-family: $font_family;
+    color: $text_color;
+}
\ No newline at end of file

=== added file '0.1/ambiance/css/sass/dialogs.scss'
--- 0.1/ambiance/css/sass/dialogs.scss	1970-01-01 00:00:00 +0000
+++ 0.1/ambiance/css/sass/dialogs.scss	2014-02-20 20:37:29 +0000
@@ -0,0 +1,167 @@
+/*
+ * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
+ * License granted by Canonical Limited
+ *
+ * This file is part of ubuntu-html5-ui-toolkit.
+ *
+ * This package is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or
+ * (at your option) any later version.
+
+ * This package is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this program. If not, see
+ * <http://www.gnu.org/licenses/>.
+ */
+
+/* ----------------------------------
+ * Dialog
+ * ---------------------------------- */
+
+[data-role="dialog"] {
+    background: #000;
+    opacity: 0.9;
+    overflow: hidden;
+    position: absolute;
+    z-index: 100;
+    top: 0;
+    left: 0;
+    right: 0;
+    padding: 0;
+    font-size: 0;
+    /* Using font-size: 0; we avoid the unwanted visual space (about 3px)
+    created by white-spaces and break lines in the code betewen inline-block elements */
+    color: #fff;
+    text-align: center;
+    height: 100%;
+    display: none;
+
+    &.active {
+        display: block;
+    }
+
+    & > section {
+        @include box_sizing (border-box);
+        font-size: 1.5rem;
+        color: #FAFAFA;
+        width: 100%;
+        display: inline-block;
+        /*overflow-y: scroll;*/
+        vertical-align: middle;
+        white-space: normal;
+    }
+
+    &:before {
+        content: "";
+        display: inline-block;
+        vertical-align: middle;
+        width: 0.1rem;
+        height: 100%;
+        margin-left: -0.1rem;
+    }
+
+    h1 {
+        font-size: 1.3rem;
+        line-height: 1.5em;
+        color: rgba(255, 255, 255, 0.9);
+        margin: 0;
+    }
+
+    p {
+        font-size: 0.9rem;
+        line-height: 1.8em;
+        color: rgba(255, 255, 255, 0.6);
+        margin: 0;
+    }
+
+    menu {
+        @include box_sizing (border-box);
+        white-space: nowrap;
+        margin: 0 auto;
+        margin-top: 1rem;
+        display: block;
+        text-align: center;
+
+        [data-role="button"] {
+            display: block;
+            margin: 0 auto;
+            margin-bottom: 10px;
+            width: 200px;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+}
+
+/* Tablet */
+@media only screen and (min-width: 870px){
+
+    [data-role="dialog"] {
+        background: rgba(0, 0, 0, 0.6);
+        opacity: 1;
+
+        & > section {
+            background: rgba(0, 0, 0, 0.7);
+            border-radius: 10px;
+            width: 18.7rem;
+            padding: 1.8rem;
+        }
+
+        input[type="text"],
+        input[type="password"],
+        input[type="email"],
+        input[type="tel"],
+        input[type="search"],
+        input[type="url"],
+        input[type="number"] {
+            width: 14rem;
+        }
+
+        menu [data-role="button"] {
+            width: 100%;
+            max-width: 100%;
+        }
+    }
+
+    @keyframes shake{
+        0% { -webkit-transform: translate3d(0,0,0); }
+        10% { -webkit-transform: translate3d(-20px,0,0); }
+        20% { -webkit-transform: translate3d(20px,0,0); }
+        30% { -webkit-transform: translate3d(-20px,0,0); }
+        40% { -webkit-transform: translate3d(20px,0,0); }
+        50% { -webkit-transform: translate3d(-20px,0,0); }
+        60% { -webkit-transform: translate3d(20px,0,0); }
+        70% { -webkit-transform: translate3d(-20px,0,0); }
+        80% { -webkit-transform: translate3d(20px,0,0); }
+        90% { -webkit-transform: translate3d(-20px,0,0); }
+        100% { -webkit-transform: translate3d(0,0,0); }
+    }
+
+    @-webkit-keyframes shake {
+        0% { -webkit-transform: translate3d(0,0,0); }
+        10% { -webkit-transform: translate3d(-20px,0,0); }
+        20% { -webkit-transform: translate3d(20px,0,0); }
+        30% { -webkit-transform: translate3d(-20px,0,0); }
+        40% { -webkit-transform: translate3d(20px,0,0); }
+        50% { -webkit-transform: translate3d(-20px,0,0); }
+        60% { -webkit-transform: translate3d(20px,0,0); }
+        70% { -webkit-transform: translate3d(-20px,0,0); }
+        80% { -webkit-transform: translate3d(20px,0,0); }
+        90% { -webkit-transform: translate3d(-20px,0,0); }
+        100% { -webkit-transform: translate3d(0,0,0); }
+    }
+
+    .shake {
+        -webkit-animation: shakeIt .9s ease-in;
+        animation: shakeIt .9s ease-in;
+    }
+
+}
\ No newline at end of file

=== added file '0.1/ambiance/css/sass/icons.scss'
--- 0.1/ambiance/css/sass/icons.scss	1970-01-01 00:00:00 +0000
+++ 0.1/ambiance/css/sass/icons.scss	2014-02-20 20:37:29 +0000
@@ -0,0 +1,37 @@
+/*
+ * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
+ * License granted by Canonical Limited
+ *
+ * This file is part of ubuntu-html5-ui-toolkit.
+ *
+ * This package is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or
+ * (at your option) any later version.
+
+ * This package is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this program. If not, see
+ * <http://www.gnu.org/licenses/>.
+ */
+
+ /* ----------------------------------
+ * Icons
+ * ---------------------------------- */
+
+.icon {
+	width: 26px;
+	height: 26px;
+	display: inline-block;
+	vertical-align: middle;
+
+	&.icon-call {
+		background: url(../img/icons/icon-call.svg) no-repeat scroll center center transparent;
+		background-size: 26px;
+	}
+}
\ No newline at end of file

=== added file '0.1/ambiance/css/sass/indexbar.scss'
--- 0.1/ambiance/css/sass/indexbar.scss	1970-01-01 00:00:00 +0000
+++ 0.1/ambiance/css/sass/indexbar.scss	2014-02-20 20:37:29 +0000
@@ -0,0 +1,59 @@
+/*
+ * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
+ * License granted by Canonical Limited
+ *
+ * This file is part of ubuntu-html5-ui-toolkit.
+ *
+ * This package is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or
+ * (at your option) any later version.
+
+ * This package is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this program. If not, see
+ * <http://www.gnu.org/licenses/>.
+ */
+
+/* ----------------------------------
+ * Lists
+ * ----------------------------------
+   ================================================== */
+
+[data-role="indexbar"] {
+    position: absolute;
+    right: 1rem;
+    top: 0;
+    bottom: 0;
+
+    ol {
+        @include box_sizing (border-box);
+        padding: 0.3rem 0;
+        margin: 5.5rem 0;
+        width: 2rem;
+        border-radius: 4rem;
+        opacity: 0.6;
+        list-style: none;
+        background: #c2c2c2;
+
+        li {
+            font-size: 1rem;
+            line-height: 1.4em;
+            text-align: center;
+            text-transform: uppercase;
+
+            a {
+                display: block;
+                color: #333;
+                width: 100%;
+                height: 100%;
+                text-decoration: none;
+            }
+        }
+    }
+}
\ No newline at end of file

=== added file '0.1/ambiance/css/sass/listitems.scss'
--- 0.1/ambiance/css/sass/listitems.scss	1970-01-01 00:00:00 +0000
+++ 0.1/ambiance/css/sass/listitems.scss	2014-02-20 20:37:29 +0000
@@ -0,0 +1,145 @@
+/*
+ * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
+ * License granted by Canonical Limited
+ *
+ * This file is part of ubuntu-html5-ui-toolkit.
+ *
+ * This package is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or
+ * (at your option) any later version.
+
+ * This package is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this program. If not, see
+ * <http://www.gnu.org/licenses/>.
+ */
+
+/* ----------------------------------
+ * Lists
+ * ---------------------------------- */
+
+[data-role="list"] {
+    border-top: 1px solid #f0f0f0;
+
+    header {
+        border-bottom: 0.1rem solid #c9c9c9;
+        line-height: 1.8rem;
+        color: $text_color;
+        font-size: 0.9rem;
+        padding-left: 1rem;
+    }
+
+    ul {
+        list-style: none;
+        overflow: hidden;
+
+        li {
+            @include box_sizing (border-box);
+            width: 100%;
+            height: 3.5rem;
+            border-bottom: solid 0.1rem #c7c7c7;
+            color: $text_color;
+            position: relative;
+
+            > a {
+                text-decoration: none;
+                color: $text_color;
+                display: block;
+                height: 3.4rem;
+                position: relative;
+                border: none;
+                line-height: 3.4rem;
+                padding-left: 1rem;
+                padding-right: 1.5rem;
+                border-top: 1px solid #ebebeb;
+                font-size: 0.9rem;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+
+                &:after {
+                    content: "";
+                    background: transparent url(../img/[e-mail]) no-repeat 0.5rem 0.5rem;
+                    background-size: 40% 75%;
+                    position: absolute;
+                    width: 2rem;
+                    height: 2rem;
+                    top: 50%;
+                    right: 0;
+                    margin-top: -1rem;
+                    z-index: 0;
+                }
+
+                &:active {
+                    background: #e6e6e6;
+                    border-color: #ebebeb;
+                }
+            }
+
+            p {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                border: none;
+                display: block;
+                color: $text_color;
+                font-size: 0.9rem;
+                padding-left: 1rem;
+                padding-top: 0.5rem;
+                line-height: 1rem;
+
+                &:only-child,
+                &:first-of-type:last-of-type {
+                    line-height: 2.5rem;
+                }
+            }
+
+            > label {
+                z-index: 110;
+                width: 4.5rem;
+                height: 2.2rem;
+                right: 0.5rem;
+                margin-top: -1.1rem;
+                position: absolute;
+                top: 50%;
+            }
+        }
+    }
+
+    aside {
+        float: left;
+        margin: -1.2em 0 0 0;
+        max-width: 100%;
+        vertical-align: bottom;
+        position: relative;
+        top: 50%;
+        z-index: 2;
+
+        img {
+            border-radius: 6px;
+            margin-bottom: 0;
+            float: left;
+        }
+
+        &:after {
+            background: url(../img/[e-mail]) no-repeat;
+            background-size: 100% 100%;
+            content: ' ';
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+    }
+
+    > header + ul li {
+        padding-left: 20px;
+    }
+}
\ No newline at end of file

=== added file '0.1/ambiance/css/sass/mixins.scss'
--- 0.1/ambiance/css/sass/mixins.scss	1970-01-01 00:00:00 +0000
+++ 0.1/ambiance/css/sass/mixins.scss	2014-02-20 20:37:29 +0000
@@ -0,0 +1,31 @@
+/*
+ * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
+ * License granted by Canonical Limited
+ *
+ * This file is part of ubuntu-html5-ui-toolkit.
+ *
+ * This package is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or
+ * (at your option) any later version.
+
+ * This package is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this program. If not, see
+ * <http://www.gnu.org/licenses/>
+ */
+
+@mixin box_sizing($type: border-box) {
+	-webkit-box-sizing: $type;
+	box-sizing:         $type;
+}
+
+@mixin box_shadow($type: inset 0 1px 1px rgba(0, 0, 0, 0.1)) {
+	-webkit-box-shadow: $type;
+    box-shadow: 		$type;
+}
\ No newline at end of file

=== added file '0.1/ambiance/css/sass/option-selector.scss'
--- 0.1/ambiance/css/sass/option-selector.scss	1970-01-01 00:00:00 +0000
+++ 0.1/ambiance/css/sass/option-selector.scss	2014-02-20 20:37:29 +0000
@@ -0,0 +1,136 @@
+/*
+ * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
+ * License granted by Canonical Limited
+ *
+ * This file is part of ubuntu-html5-ui-toolkit.
+ *
+ * This package is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or
+ * (at your option) any later version.
+
+ * This package is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this program. If not, see
+ * <http://www.gnu.org/licenses/>.
+ */
+
+[data-role="option-selector"] {
+    @include box_shadow (inset 0 2px 2px 0 #D5D5D5);
+    width: 100%;
+    height: auto;
+    margin: 0 auto;
+    border: 1px solid #C7C7C7;
+    overflow: hidden;
+    -webkit-transition: height 0.4s;
+    transition: height 0.4s;
+    margin-top: 15px;
+    margin-bottom: 15px;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+
+    li {
+        text-decoration: none;
+        color: $text_color;
+        display: block;
+        height: 3rem;
+        position: relative;
+        line-height: 3rem;
+        padding-left: 1rem;
+        padding-right: 1.5rem;
+        border: none;
+        border-top: 1px solid #C7C7C7;
+        font-size: 0.9rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        cursor: pointer;
+
+        &.active:after{
+            background: transparent url(../img/[e-mail]) no-repeat center center;
+            background-size: 15px 15px;
+            display: block;
+            position: absolute;
+            width: 2rem;
+            height: 3rem;
+            right: 0.5rem;
+            content: "";
+            top: 0;
+        }
+
+        &.closed:after {
+            background: transparent url(../img/[e-mail]) no-repeat center center;
+            background-size: 15px 15px;
+            display: block;
+            position: absolute;
+            width: 2rem;
+            height: 3rem;
+            right: 0.5rem;
+            content: "";
+            top: 0;
+        }
+
+        aside {
+            float: left;
+            margin: -1.2em 0 0 0;
+            max-width: 100%;
+            vertical-align: bottom;
+            position: relative;
+            top: 50%;
+            z-index: 2;
+
+            img {
+                border-radius: 6px;
+                margin-bottom: 0;
+                float: left;
+            }
+
+            &:after {
+                background: url(../img/[e-mail]) no-repeat;
+                background-size: 100% 100%;
+                content: ' ';
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                left: 0;
+            }
+
+            & + p {
+                padding-left: 1rem;
+            }
+        }
+
+        p {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            border: none;
+            display: block;
+            color: $text_color;
+            font-size: 0.9rem;
+            padding-top: 0.5rem;
+            line-height: 1rem;
+
+            &:only-child,
+            &:first-of-type:last-of-type {
+                line-height: 2rem;
+            }
+
+            & + p {
+                padding-top: 0.2rem;
+                font-size: 0.7rem;
+            }
+        }
+    }
+
+    li:first-child {
+        border-top: 0!important;
+    }
+}

=== added file '0.1/ambiance/css/sass/pagestack.scss'
--- 0.1/ambiance/css/sass/pagestack.scss	1970-01-01 00:00:00 +0000
+++ 0.1/ambiance/css/sass/pagestack.scss	2014-02-20 20:37:29 +0000
@@ -0,0 +1,45 @@
+/*
+ * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
+ * License granted by Canonical Limited
+ *
+ * This file is part of ubuntu-html5-ui-toolkit.
+ *
+ * This package is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or
+ * (at your option) any later version.
+
+ * This package is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this program. If not, see
+ * <http://www.gnu.org/licenses/>.
+ */
+
+/* ----------------------------------
+ * Pagestack
+ * ---------------------------------- */
+
+[data-role="pagestack"] {
+    position: relative;
+    -webkit-transition: all 0 linear;
+    transition: all 0 linear;
+}
+
+[data-role="page"] {
+    @include box_sizing (border-box);
+    vertical-align: top;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    display: none;
+}
+
+[data-role="pagestack"]>[data-role="page"]:first-child,
+[data-role="mainview"]>[data-role="page"] {
+    display: block;
+}
\ No newline at end of file

=== added file '0.1/ambiance/css/sass/popover.scss'
--- 0.1/ambiance/css/sass/popover.scss	1970-01-01 00:00:00 +0000
+++ 0.1/ambiance/css/sass/popover.scss	2014-02-20 20:37:29 +0000
@@ -0,0 +1,124 @@
+/*
+ * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
+ * License granted by Canonical Limited
+ *
+ * This file is part of ubuntu-html5-ui-toolkit.
+ *
+ * This package is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or
+ * (at your option) any later version.
+
+ * This package is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this program. If not, see
+ * <http://www.gnu.org/licenses/>.
+ */
+
+.popover {
+    @include box_shadow (0 0 10px rgba(0, 0, 0, 0.5));
+    position: absolute;
+    background: rgba(255, 255, 255, 0.98);
+    -webkit-border-radius: 15px;
+    border-radius: 15px;
+    -webkit-background-clip: padding-box;
+    z-index: 110;
+    width: 320px;
+    left: 0;
+    top: 0;
+    color: $text_color;
+    font-size: 1rem;
+    display: none;
+
+    &.active {
+        display: block;
+    }
+
+    .list {
+        -webkit-border-radius: 15px;
+        border-radius: 15px;
+        width: auto;
+        max-height: 250px;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+
+        li {
+            position: relative;
+            padding: 20px 10px 20px 10px;
+            border-bottom: 1px solid #d9d9d9;
+            text-align: center;
+            font-size: 1rem;
+
+            a {
+                color: $text_color;
+                text-decoration: none;
+            }
+
+            &.active {
+                background: #ebebeb;
+                border-top: 1px solid #fcfcfc;
+
+                a {
+                    color: $ubuntu_orange;
+                    text-decoration: none;
+                }
+            }
+        }
+    }
+}
+
+/* Caret */
+.popover[data-gravity]:before,
+.popover[data-gravity]:after {
+    position: absolute;
+    left: 50%;
+    width: 0;
+    height: 0;
+    content: '';
+}
+
+.popover[data-gravity="n"]:before {
+    top: -17px;
+    margin-left: -18px;
+    background: transparent url(../img/[e-mail]) no-repeat 0.5rem 0.5rem;
+    background-size: 50% 50%;
+    width: 37px;
+    height: 18px;
+}
+
+.popover[data-gravity="w"]:before {
+    top: 50%;
+    margin-left: -17px;
+    margin-top: -18px;
+    background: transparent url(../img/[e-mail]) no-repeat 0.5rem 0.5rem;
+    background-size: 50% 50%;
+    width: 18px;
+    height: 37px;
+    left: 0;
+}
+
+.popover[data-gravity="s"]:after {
+    bottom: -9px;
+    margin-left: -18px;
+    background: transparent url(../img/[e-mail]) no-repeat 0.5rem 0.5rem;
+    background-size: 50% 50%;
+    width: 37px;
+    height: 18px;
+}
+
+.popover[data-gravity="e"]:before {
+    top: 50%;
+    margin-right: -10px;
+    margin-top: -18px;
+    background: transparent url(../img/[e-mail]) no-repeat 0.5rem 0.5rem;
+    background-size: 50% 50%;
+    width: 18px;
+    height: 37px;
+    right: 0;
+    left: initial;
+}
\ No newline at end of file

=== added file '0.1/ambiance/css/sass/progress-bars.scss'
--- 0.1/ambiance/css/sass/progress-bars.scss	1970-01-01 00:00:00 +0000
+++ 0.1/ambiance/css/sass/progress-bars.scss	2014-02-20 20:37:29 +0000
@@ -0,0 +1,91 @@
+/*
+ * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
+ * License granted by Canonical Limited
+ *
+ * This file is part of ubuntu-html5-ui-toolkit.
+ *
+ * This package is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or
+ * (at your option) any later version.
+
+ * This package is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this program. If not, see
+ * <http://www.gnu.org/licenses/>.
+ */
+
+/* ----------------------------------
+ * Progress + activities
+ * ---------------------------------- */
+
+/* Spinner */
+progress {
+    -webkit-appearance: none;
+    height: 35px;
+
+    &:not([value]) {
+        background: url(../img/[e-mail]) no-repeat center center / 100% auto;
+        -webkit-animation: 1s rotate infinite steps(30);
+        animation: 1s rotate infinite steps(30);
+        width: 24px;
+        height: 24px;
+        border: none;
+        display: inline-block;
+        vertical-align: middle;
+
+        &::-webkit-progress-bar {
+            @include box_shadow (none);
+            background: none;
+        }
+    }
+
+    &.bigger:not([value]) {
+        background: url(../img/[e-mail]) no-repeat center center / 100% auto;
+        width: 90px;
+        height: 90px;
+    }
+}
+
+/* Progress bar */
+progress[value]{
+    &::-webkit-progress-value {
+        @include box_shadow (inset 0 1px 1px rgba(0, 0, 0, 0.1));
+        width: 100%;
+        background: $ubuntu_orange;
+        border: none;
+        border-radius: 6px;
+        display: block;
+    }
+    &::-webkit-progress-bar {
+        @include box_sizing (border-box);
+        @include box_shadow (inset 0 2px 1px rgba(0, 0, 0, 0.1));
+        padding: 1px;
+        background-color: rgba(192, 192, 192, 0.1);
+        width: 200px;
+        height: 35px;
+        border-radius: 6px;
+        padding: 0;
+    }
+    &.infinite::-webkit-progress-value {
+        -webkit-appearance: none;
+        /*-webkit-animation: 1.9s move infinite steps(15);
+        animation: 1.9s move infinite steps(15);*/
+    }
+}
+
+/* Animations */
+@-webkit-keyframes rotate {
+    from { -webkit-transform: rotate(1deg); }
+    to   { -webkit-transform: rotate(360deg); }
+}
+
+/*@-webkit-keyframes move {
+    0% { width: -100px 0, 0 0, 0 0 }
+    100% { width: 0 0, 0 0, 0 0 }
+}*/
\ No newline at end of file

=== added file '0.1/ambiance/css/sass/reset.scss'
--- 0.1/ambiance/css/sass/reset.scss	1970-01-01 00:00:00 +0000
+++ 0.1/ambiance/css/sass/reset.scss	2014-02-20 20:37:29 +0000
@@ -0,0 +1,112 @@
+/*
+ * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
+ * License granted by Canonical Limited
+ *
+ * This file is part of ubuntu-html5-ui-toolkit.
+ *
+ * This package is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as 
+ * published by the Free Software Foundation; either version 3 of the 
+ * License, or
+ * (at your option) any later version.
+ 
+ * This package is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ 
+ * You should have received a copy of the GNU Lesser General Public 
+ * License along with this program. If not, see 
+ * <http://www.gnu.org/licenses/>.
+ */
+
+/* Hard reset
+-------------------------------------------------- */
+* {
+    outline: none;
+}
+html,
+body,
+div,
+span,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+section,
+summary,
+time,
+audio,
+video {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+ul {
+    list-style: none;
+}
\ No newline at end of file

=== added file '0.1/ambiance/css/sass/shapes.scss'
--- 0.1/ambiance/css/sass/shapes.scss	1970-01-01 00:00:00 +0000
+++ 0.1/ambiance/css/sass/shapes.scss	2014-02-20 20:37:29 +0000
@@ -0,0 +1,62 @@
+/*
+ * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
+ * License granted by Canonical Limited
+ *
+ * This file is part of ubuntu-html5-ui-toolkit.
+ *
+ * This package is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or
+ * (at your option) any later version.
+
+ * This package is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this program. If not, see
+ * <http://www.gnu.org/licenses/>.
+ */
+
+/* ----------------------------------
+ * Toolbars
+ * ---------------------------------- */
+
+[data-role="shape"] {
+    height: 100px;
+    width: 100px;
+    display: inline-block;
+    max-width: 100%;
+    vertical-align: bottom;
+    position: relative;
+    z-index: 100;
+
+    &:after {
+        background: url(../img/[e-mail]) no-repeat;
+        background-size: 100% 100%;
+        content: ' ';
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+    img {
+        height: 100%;
+        width: 100%;
+        border-radius: 1.5rem;
+        margin-bottom: 0;
+        display: inline-block;
+    }
+
+    div {
+        height: 100%;
+        width: 100%;
+        border-radius: 1.5rem;
+        margin-bottom: 0;
+        display: inline-block;
+    }
+}
\ No newline at end of file

=== added file '0.1/ambiance/css/sass/sliders.scss'
--- 0.1/ambiance/css/sass/sliders.scss	1970-01-01 00:00:00 +0000
+++ 0.1/ambiance/css/sass/sliders.scss	2014-02-20 20:37:29 +0000
@@ -0,0 +1,50 @@
+/*
+ * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
+ * License granted by Canonical Limited
+ *
+ * This file is part of ubuntu-html5-ui-toolkit.
+ *
+ * This package is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or
+ * (at your option) any later version.
+
+ * This package is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this program. If not, see
+ * <http://www.gnu.org/licenses/>.
+ */
+
+/* ----------------------------------
+ * Sliders
+ * ---------------------------------- */
+
+/**
+   TODO: remove absolte values for w/h
+ */
+
+input[type=range] {
+    @include box_sizing (border-box);
+    @include box_shadow (inset 0 1px 1px rgba(0, 0, 0, 0.1));
+    -webkit-appearance: none;
+    background-color: rgba(192, 192, 192, 0.1);
+    width: 200px;
+    height: 35px;
+    border-radius: 6px;
+    padding: 5px 0;
+
+    &::-webkit-slider-thumb {
+        @include box_shadow (inset 0 2px 1px rgba(0, 0, 0, 0.1));
+        @include box_sizing (border-box);
+        -webkit-appearance: none;
+        background-color: $ubuntu_orange;
+        border-radius: 6px;
+        width: 30px;
+        height: 27px;
+    }
+}

=== added file '0.1/ambiance/css/sass/tabs.scss'
--- 0.1/ambiance/css/sass/tabs.scss	1970-01-01 00:00:00 +0000
+++ 0.1/ambiance/css/sass/tabs.scss	2014-02-20 20:37:29 +0000
@@ -0,0 +1,100 @@
+/*
+ * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
+ * License granted by Canonical Limited
+ *
+ * This file is part of ubuntu-html5-ui-toolkit.
+ *
+ * This package is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or
+ * (at your option) any later version.
+
+ * This package is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this program. If not, see
+ * <http://www.gnu.org/licenses/>
+ */
+
+/* ----------------------------------
+ * Tabs
+ * ---------------------------------- */
+
+[data-role="header"] {
+    background: #ededf0 url("../img/[e-mail]") repeat-x top left;
+    height: 74px;
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+
+    &:after {
+        background: #C2C2C2;
+        content: "";
+        border-top: 1px solid #afafaf;
+        height: 14px;
+        width: 100%;
+        display: block;
+    }
+
+    .active {
+        color: #484647;
+        padding-left: 15px;
+        -webkit-opacity: 1;
+        opacity: 1;
+
+        &:after {
+            content: "›";
+            padding-left: 10px;
+            -webkit-opacity: 0.5;
+            opacity: 0.5;
+        }
+    }
+
+    .inactive {
+        color: #a0a0a0;
+        -webkit-opacity: 0.5;
+        opacity: 0.5;
+    }
+}
+
+[data-role="tabs"] {
+    width: 100%;
+    white-space: nowrap;
+}
+
+[data-role="tabitem"] {
+    display: inline-block;
+    font: 35px $font_family;
+    letter-spacing: -1px;
+    line-height: 60px;
+    padding-left: 35px;
+    text-decoration: none;
+    color: #a0a0a0;
+    -webkit-opacity: 0;
+    opacity: 0;
+    -webkit-transition: opacity .25s ease-in-out;
+    transition: opacity .25s ease-in-out;
+    cursor: pointer;
+
+    &:only-child:after {
+        content: "";
+        padding-left: 10px;
+    }
+}
+
+[data-role="tab"] {
+    @include box_sizing (border-box);
+    vertical-align: top;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    display: none;
+
+    &:first-child {
+        display: block;
+    }
+}
\ No newline at end of file

=== added file '0.1/ambiance/css/sass/text-input.scss'
--- 0.1/ambiance/css/sass/text-input.scss	1970-01-01 00:00:00 +0000
+++ 0.1/ambiance/css/sass/text-input.scss	2014-02-20 20:37:29 +0000
@@ -0,0 +1,77 @@
+/*
+ * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
+ * License granted by Canonical Limited
+ *
+ * This file is part of ubuntu-html5-ui-toolkit.
+ *
+ * This package is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or
+ * (at your option) any later version.
+
+ * This package is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this program. If not, see
+ * <http://www.gnu.org/licenses/>.
+ */
+
+/* ----------------------------------
+ * Text inputs
+ * ---------------------------------- */
+
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="tel"],
+input[type="search"],
+input[type="url"],
+input[type="number"],
+textarea {
+    @include box_shadow (inset 0 2px 1px rgba(0, 0, 0, 0.1));
+    background: #cfcfcf;
+    border: 0;
+    border-radius: 6px;
+    color: #757373;
+    font-family: Ubuntu;
+    font-size: 0.8rem;
+    padding: 8px;
+
+    &:focus {
+        background: #fff;
+        color: #757373;
+        font-family: Ubuntu;
+    }
+
+    &[disabled] {
+        background: rgba(255, 255, 255, 0.1);
+        color: darkgray;
+    }
+
+    &:not([value]) {
+        color: #757373;
+    }
+}
+
+textarea {
+    resize: none;
+    height: 80px;
+    width: 190px;
+}
+
+.textfield.clear:focus {
+    background: url(artwork/[e-mail]) no-repeat 97% center #fff;
+    background-size: 12%;
+}
+
+.textfield.label,
+.textarea.label {
+    @include box_shadow (none);
+    background: none !important;
+    font-size: 12px;
+    padding: 0 !important;
+}
\ No newline at end of file

=== added file '0.1/ambiance/css/sass/toggles.scss'
--- 0.1/ambiance/css/sass/toggles.scss	1970-01-01 00:00:00 +0000
+++ 0.1/ambiance/css/sass/toggles.scss	2014-02-20 20:37:29 +0000
@@ -0,0 +1,148 @@
+/*
+ * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
+ * License granted by Canonical Limited
+ *
+ * This file is part of ubuntu-html5-ui-toolkit.
+ *
+ * This package is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or
+ * (at your option) any later version.
+
+ * This package is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this program. If not, see
+ * <http://www.gnu.org/licenses/>.
+ */
+
+label:not([for])  {
+    display: inline-block;
+    vertical-align: middle;
+    width: 4.5rem;
+    height: 2.2rem;
+    position: relative;
+    background: none;
+
+    input[type="checkbox"] {
+        margin: 0;
+        opacity: 0;
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        & + span {
+            @include box_shadow (inset 0 1px 1px rgba(0, 0, 0, 0.3));
+            @include box_sizing (border-box);
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            margin: -1.1rem 0 0 -1.1rem;
+            width: 2rem;
+            height: 2rem;
+            pointer-events: none;
+            border-radius: 6px;
+            background: rgba(0, 0, 0, 0.4);
+            background-position-y: 30px;
+            -webkit-transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
+            transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
+        }
+
+
+        &:checked + span {
+            background: $ubuntu_orange url(../img/[e-mail]) no-repeat 0.3rem 0.3rem;
+            background-size: 75% 75%;
+            background-position-y: 5px;
+            -webkit-transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
+            transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
+        }
+
+        &:disabled {
+            + span {
+                background: rgba(0, 0, 0, 0.25)!important;
+            }
+
+            &:checked + span {
+                background: rgba(221, 72, 20, 0.5) url(../img/[e-mail]) no-repeat 0.3rem 0.3rem!important;
+                background-size: 75% 75%!important;
+            }
+        }
+    }
+}
+
+label input[type="checkbox"][data-type="switch"] {
+    + span.toggle {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        margin: -1.1rem 0 0 -2.2rem;
+        width: 4.5rem;
+        height: 2.2rem;
+        pointer-events: none;
+        overflow: hidden;
+        background: rgba(136, 136, 136, 0.3);
+
+        > span.toggle-bg {
+            background: transparent url(../img/unCheckbox.png) no-repeat 0.4rem 0.35rem;
+            background-size: 90% 75%;
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 10;
+            width: 4.5rem;
+            height: 2.1rem;
+            -webkit-transition: background-image 0.3s ease-in-out;
+            transition: background-image 0.3s ease-in-out;
+        }
+
+        > span.toggle-handle {
+            @include box_sizing (border-box);
+            @include box_shadow (inset 0 1px 1px rgba(0, 0, 0, 0.3));
+            position: absolute;
+            top: 2px;
+            left: 2px;
+            z-index: 2;
+            width: 2rem;
+            height: 2rem;
+            border-radius: 6px;
+            background: rgba(0, 0, 0, 0.4);
+            -webkit-transition: background 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
+            transition: background 0.3s ease-in-out, transform 0.3s ease-in-out;
+        }
+    }
+
+    &:checked + span.toggle {
+        background: rgba(136, 136, 136, 0.3) !important;
+
+        > span.toggle-bg {
+            background: transparent url(../img/Checkbox.png) no-repeat 0.4rem 0.35rem;
+            background-size: 90% 75%;
+        }
+
+        > span.toggle-handle {
+            background: rgb(221, 72, 20);
+            -webkit-transform: translate3d(38px, 0, 0);
+            transform: translate3d(38px, 0, 0);
+        }
+    }
+}
+
+label input[data-type="switch"]:disabled {
+    + span.toggle {
+        background: rgba(136, 136, 136, 0.3) !important;
+
+        > span.toggle-handle {
+            opacity: 0.4;
+        }
+    }
+
+    &:checked + span.toggle > span.toggle-handle {
+        opacity: 0.4;
+        -webkit-transform: translate3d(38px, 0, 0);
+        transform: translate3d(38px, 0, 0);
+    }
+}
\ No newline at end of file

=== added file '0.1/ambiance/css/sass/toolbars.scss'
--- 0.1/ambiance/css/sass/toolbars.scss	1970-01-01 00:00:00 +0000
+++ 0.1/ambiance/css/sass/toolbars.scss	2014-02-20 20:37:29 +0000
@@ -0,0 +1,80 @@
+/*
+ * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
+ * License granted by Canonical Limited
+ *
+ * This file is part of ubuntu-html5-ui-toolkit.
+ *
+ * This package is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or
+ * (at your option) any later version.
+
+ * This package is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this program. If not, see
+ * <http://www.gnu.org/licenses/>.
+ */
+
+/* ----------------------------------
+ * Toolbars
+ * ---------------------------------- */
+
+[data-role="footer"] {
+    background: transparent url('../img/[e-mail]') repeat-x top left;
+    height: 85px;
+    width: 100%;
+    position: fixed;
+    z-index: 100;
+    left: 0;
+    bottom: -65px;
+    -webkit-transition: -webkit-transform 0.1s ease-in-out;
+    transition: transform 0.1s ease-in-out;
+
+    &.revealed {
+        -webkit-transform: translate3d(0, -65px, 0);
+        transform: translate3d(0, -65px, 0);
+    }
+
+    nav {
+        background: #fdfdfd;
+        margin-top: 20px;
+        display: block;
+        height: 55px;
+        padding-top: 10px;
+
+        ul {
+            list-style: none;
+
+            li,
+            li a {
+                color: #7d767b;
+                font-size: 0.6rem;
+                text-align: center;
+                width: 60px;
+                float: right;
+                text-decoration: none;
+            }
+            li {
+                padding-top: 4px;
+
+                img {
+                    width: 16px;
+                    height: 16px;
+                }
+
+                span {
+                    display: block;
+                }
+
+                &:last-child {
+                    float: left;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

=== removed file '0.1/ambiance/css/shapes.css'
--- 0.1/ambiance/css/shapes.css	2014-02-12 19:46:04 +0000
+++ 0.1/ambiance/css/shapes.css	1970-01-01 00:00:00 +0000
@@ -1,62 +0,0 @@
-/*
- * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
- * License granted by Canonical Limited
- *
- * This file is part of ubuntu-html5-ui-toolkit.
- *
- * This package is free software; you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as 
- * published by the Free Software Foundation; either version 3 of the 
- * License, or
- * (at your option) any later version.
- 
- * This package is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- 
- * You should have received a copy of the GNU Lesser General Public 
- * License along with this program. If not, see 
- * <http://www.gnu.org/licenses/>.
- */
-
-/* ----------------------------------
- * Toolbars
- * ---------------------------------- */
-
-[data-role="shape"] {
-    height: 100px;
-    width: 100px;
-    display: inline-block;
-    max-width: 100%;
-    vertical-align: bottom;
-    position: relative;
-    z-index: 100;
-}
-
-[data-role="shape"]:after {
-    background: url(../img/[e-mail]) no-repeat;
-    background-size: 100% 100%;
-    content: ' ';
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-[data-role="shape"] img {
-    height: 100%;
-    width: 100%;
-    border-radius: 1.5rem;
-    margin-bottom: 0;
-    display: inline-block;
-}
-
-[data-role="shape"] div {
-    height: 100%;
-    width: 100%;
-    border-radius: 1.5rem;
-    margin-bottom: 0;
-    display: inline-block;
-}
\ No newline at end of file

=== removed file '0.1/ambiance/css/sliders.css'
--- 0.1/ambiance/css/sliders.css	2014-02-12 19:46:04 +0000
+++ 0.1/ambiance/css/sliders.css	1970-01-01 00:00:00 +0000
@@ -1,53 +0,0 @@
-/*
- * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
- * License granted by Canonical Limited
- *
- * This file is part of ubuntu-html5-ui-toolkit.
- *
- * This package is free software; you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as 
- * published by the Free Software Foundation; either version 3 of the 
- * License, or
- * (at your option) any later version.
- 
- * This package is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- 
- * You should have received a copy of the GNU Lesser General Public 
- * License along with this program. If not, see 
- * <http://www.gnu.org/licenses/>.
- */
-
-/* ----------------------------------
- * Sliders
- * ---------------------------------- */
-
-input[type=range] {
-    -webkit-appearance: none;
-    background-color: rgba(192, 192, 192, 0.1);
-    width: 200px;
-    height: 35px;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    border-radius: 6px;
-    padding: 5px 0;
-    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
-}
-
-/**
-   TODO: remove absolte values for w/h
- */
-input[type="range"]::-webkit-slider-thumb {
-     -webkit-appearance: none;
-    background-color: #dd4814;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    border-radius: 6px;
-    width: 30px;
-    height: 27px;
-    -webkit-box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.1);
-    box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.1);
-}
\ No newline at end of file

=== removed file '0.1/ambiance/css/tabs.css'
--- 0.1/ambiance/css/tabs.css	2014-01-30 19:56:22 +0000
+++ 0.1/ambiance/css/tabs.css	1970-01-01 00:00:00 +0000
@@ -1,102 +0,0 @@
-/*
- * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
- * License granted by Canonical Limited
- *
- * This file is part of ubuntu-html5-ui-toolkit.
- *
- * This package is free software; you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as
- * published by the Free Software Foundation; either version 3 of the
- * License, or
- * (at your option) any later version.
-
- * This package is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
-
- * You should have received a copy of the GNU Lesser General Public
- * License along with this program. If not, see
- * <http://www.gnu.org/licenses/>
- */
-
-/* ----------------------------------
- * Tabs
- * ---------------------------------- */
-
-[data-role="header"]{
-    background: #ededf0 url("../img/[e-mail]") repeat-x top left;
-    height: 74px;
-    width: 100%;
-    overflow: hidden;
-    position: relative;
-}
-
-[data-role="header"]:after{
-    background: #C2C2C2;
-    content: "";
-    border-top: 1px solid #afafaf;
-    height: 14px;
-    width: 100%;
-    display: block;
-}
-
-[data-role="tabs"] {
-    width: 100%;
-    white-space: nowrap;
-}
-
-[data-role="tabitem"] {
-    display: inline-block;
-    font: 35px "Ubuntu";
-    letter-spacing: -1px;
-    line-height: 60px;
-    padding-left: 35px;
-    text-decoration: none;
-    color: #a0a0a0;
-    -webkit-opacity: 0;
-    opacity: 0;
-    -webkit-transition: opacity .25s ease-in-out;
-    transition: opacity .25s ease-in-out;
-    cursor: pointer;
-}
-
-[data-role="header"] .active {
-    color: #484647;
-    padding-left: 15px;
-    -webkit-opacity: 1;
-    opacity: 1;
-}
-
-[data-role="header"] .active:after {
-    content: "›";
-    padding-left: 10px;
-    -webkit-opacity: 0.5;
-    opacity: 0.5;
-}
-
-[data-role="tabitem"]:only-child:after {
-    content: "";
-    padding-left: 10px;
-}
-
-/* Inactive but viewable state*/
-[data-role="header"] .inactive {
-    color: #a0a0a0;
-    -webkit-opacity: 0.5;
-    opacity: 0.5;
-}
-
-[data-role="tab"] {
-    vertical-align: top;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    display: none;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-}
-
-[data-role="tab"]:first-child {
-    display: block;
-}
\ No newline at end of file

=== removed file '0.1/ambiance/css/text-input.css'
--- 0.1/ambiance/css/text-input.css	2014-01-27 18:42:31 +0000
+++ 0.1/ambiance/css/text-input.css	1970-01-01 00:00:00 +0000
@@ -1,98 +0,0 @@
-/*
- * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
- * License granted by Canonical Limited
- *
- * This file is part of ubuntu-html5-ui-toolkit.
- *
- * This package is free software; you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as 
- * published by the Free Software Foundation; either version 3 of the 
- * License, or
- * (at your option) any later version.
- 
- * This package is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- 
- * You should have received a copy of the GNU Lesser General Public 
- * License along with this program. If not, see 
- * <http://www.gnu.org/licenses/>.
- */
-
-/* ----------------------------------
- * Text inputs
- * ---------------------------------- */
-
-input[type="text"],
-input[type="password"],
-input[type="email"],
-input[type="tel"],
-input[type="search"],
-input[type="url"],
-input[type="number"],
-textarea {
-    background: #cfcfcf;
-    border: 0;
-    border-radius: 6px;
-    color: #757373;
-    font-family: Ubuntu;
-    font-size: 0.8rem;
-    padding: 8px;
-    -webkit-box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.1);
-    text-shadow: 0 1px 1px rgba(0.5, 0.5, 0.5, 0.5);
-}
-
-input[type="text"]:focus,
-input[type="password"]:focus,
-input[type="email"]:focus,
-input[type="tel"]:focus,
-input[type="search"]:focus,
-input[type="url"]:focus,
-input[type="number"]:focus,
-textarea:focus {
-    background: #fff;
-    color: #757373;
-    font-family: Ubuntu;
-}
-
-input[type="text"][disabled],
-input[type="password"][disabled],
-input[type="email"][disabled],
-input[type="tel"][disabled],
-input[type="search"][disabled],
-input[type="url"][disabled],
-input[type="number"][disabled],
-textarea[disabled] {
-    background: rgba(255, 255, 255, 0.1);
-    color: darkgray;
-}
-
-input[type="text"]:not([value]),
-input[type="password"]:not([value]),
-input[type="email"]:not([value]),
-input[type="tel"]:not([value]),
-input[type="search"]:not([value]),
-input[type="url"]:not([value]),
-input[type="number"]:not([value]),
-textarea:not([value]) {
-    color: #757373;
-}
-
-textarea {
-    resize: none;
-    height: 80px;
-    width: 190px;
-}
-
-.textfield.clear:focus {
-    background: url(artwork/[e-mail]) no-repeat 97% center #fff;
-    background-size: 12%;
-}
-
-.textfield.label, .textarea.label {
-    background: none !important;
-    font-size: 12px;
-    padding: 0 !important;
-    -webkit-box-shadow: none !important;
-}
\ No newline at end of file

=== removed file '0.1/ambiance/css/toggles.css'
--- 0.1/ambiance/css/toggles.css	2014-02-12 21:01:31 +0000
+++ 0.1/ambiance/css/toggles.css	1970-01-01 00:00:00 +0000
@@ -1,146 +0,0 @@
-/*
- * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
- * License granted by Canonical Limited
- *
- * This file is part of ubuntu-html5-ui-toolkit.
- *
- * This package is free software; you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as
- * published by the Free Software Foundation; either version 3 of the
- * License, or
- * (at your option) any later version.
-
- * This package is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
-
- * You should have received a copy of the GNU Lesser General Public
- * License along with this program. If not, see
- * <http://www.gnu.org/licenses/>.
- */
-
-label:not([for])  {
-    display: inline-block;
-    vertical-align: middle;
-    width: 4.5rem;
-    height: 2.2rem;
-    position: relative;
-    background: none;
-}
-
-label:not([for]) input[type="checkbox"] {
-    margin: 0;
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-label:not([for]) input[type="checkbox"] + span {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    margin: -1.1rem 0 0 -1.1rem;
-    width: 2rem;
-    height: 2rem;
-    pointer-events: none;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    border-radius: 6px;
-    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
-    background: rgba(0, 0, 0, 0.4);
-    background-position-y: 30px;
-    -webkit-transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
-    transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
-}
-
-label:not([for]) input[type="checkbox"]:checked + span {
-    background: #dd4814 url(../img/[e-mail]) no-repeat 0.3rem 0.3rem;
-    background-size: 75% 75%;
-    background-position-y: 5px;
-    -webkit-transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
-    transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
-}
-
-
-input[type="checkbox"]:disabled + span {
-    background: rgba(0, 0, 0, 0.25)!important;
-}
-
-input[type="checkbox"]:disabled:checked + span {
-    background: rgba(221, 72, 20, 0.5) url(../img/[e-mail]) no-repeat 0.3rem 0.3rem!important;
-    background-size: 75% 75%!important;
-}
-
-label input[type="checkbox"][data-type="switch"] + span.toggle {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    margin: -1.1rem 0 0 -2.2rem;
-    width: 4.5rem;
-    height: 2.2rem;
-    pointer-events: none;
-    overflow: hidden;
-    background: rgba(136, 136, 136, 0.3);
-}
-
-label input[type="checkbox"][data-type="switch"] + span.toggle > span.toggle-bg {
-    background: transparent url(../img/unCheckbox.png) no-repeat 0.4rem 0.35rem;
-    background-size: 90% 75%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 10;
-    width: 4.5rem;
-    height: 2.1rem;
-    -webkit-transition: background-image 0.3s ease-in-out;
-    transition: background-image 0.3s ease-in-out;
-}
-
-label input[type="checkbox"][data-type="switch"] + span.toggle > span.toggle-handle {
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    z-index: 2;
-    width: 2rem;
-    height: 2rem;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    border-radius: 6px;
-    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
-    background: rgba(0, 0, 0, 0.4);
-    -webkit-transition: background 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
-    transition: background 0.3s ease-in-out, transform 0.3s ease-in-out;
-}
-
-label input[type="checkbox"][data-type="switch"]:checked + span.toggle {
-    background: rgba(136, 136, 136, 0.3);
-}
-
-label input[type="checkbox"][data-type="switch"]:checked + span.toggle > span.toggle-bg {
-    background: transparent url(../img/Checkbox.png) no-repeat 0.4rem 0.35rem;
-    background-size: 90% 75%;
-}
-
-label input[type="checkbox"][data-type="switch"]:checked + span.toggle > span.toggle-handle {
-    background: rgb(221, 72, 20);
-    -webkit-transform: translate3d(38px, 0, 0);
-    transform: translate3d(38px, 0, 0);
-}
-
-label input[data-type="switch"]:disabled + span.toggle {
-    background: rgba(136, 136, 136, 0.3)!important;
-}
-
-label input[data-type="switch"]:disabled + span.toggle > span.toggle-handle {
-    opacity: 0.4;
-}
-
-label input[data-type="switch"]:disabled:checked + span.toggle > span.toggle-handle {
-    opacity: 0.4;
-    -webkit-transform: translate3d(38px, 0, 0);
-    transform: translate3d(38px, 0, 0);
-}

=== removed file '0.1/ambiance/css/toolbars.css'
--- 0.1/ambiance/css/toolbars.css	2014-01-27 18:42:31 +0000
+++ 0.1/ambiance/css/toolbars.css	1970-01-01 00:00:00 +0000
@@ -1,80 +0,0 @@
-/*
- * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
- * License granted by Canonical Limited
- *
- * This file is part of ubuntu-html5-ui-toolkit.
- *
- * This package is free software; you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as
- * published by the Free Software Foundation; either version 3 of the
- * License, or
- * (at your option) any later version.
-
- * This package is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
-
- * You should have received a copy of the GNU Lesser General Public
- * License along with this program. If not, see
- * <http://www.gnu.org/licenses/>.
- */
-
-/* ----------------------------------
- * Toolbars
- * ---------------------------------- */
-
-[data-role="footer"] {
-    background: transparent url('../img/[e-mail]') repeat-x top left;
-    height: 85px;
-    width: 100%;
-    position: fixed;
-    z-index: 100;
-    left: 0;
-    bottom: -65px;
-    -webkit-transition: -webkit-transform 0.1s ease-in-out;
-    transition: transform 0.1s ease-in-out;
-}
-
-[data-role="footer"].revealed {
-    -webkit-transform: translate3d(0, -65px, 0);
-    transform: translate3d(0, -65px, 0);
-}
-
-[data-role="footer"] nav {
-    background: #fdfdfd;
-    margin-top: 20px;
-    display: block;
-    height: 55px;
-    padding-top: 10px;
-}
-
-[data-role="footer"] nav ul {
-    list-style: none;
-}
-
-[data-role="footer"] nav ul li,
-[data-role="footer"] nav ul li a {
-    color: #7d767b;
-    font-size: 0.6rem;
-    text-align: center;
-    width: 60px;
-    float: right;
-    text-decoration: none;
-}
-
-[data-role="footer"] nav ul li {
-    padding-top: 4px;
-}
-
-[data-role="footer"] nav ul li img {
-    width: 16px;
-    height: 16px;
-}
-
-[data-role="footer"] nav ul li span {
-    display: block;
-}
-[data-role="footer"] nav ul li:last-child {
-    float: left;
-}
\ No newline at end of file

=== added file 'README'
--- README	1970-01-01 00:00:00 +0000
+++ README	2014-02-20 20:37:29 +0000
@@ -0,0 +1,28 @@
+======
+README
+======
+
+Ubuntu HTML5 UI SDK for Html5 apps that brings a collection of HTML5 widgets
+and js runtime support for HTML5 apps along with the HTML5 WebRuntime that is
+meant to host those apps.
+
+=======
+HACKING
+=======
+
+Here is how to develop on this code base.
+
+Install SASS
+============
+
+Complete the steps in globally install SASS if you currently do not have it
+installed:
+http://sass-lang.com/install
+
+Running SASS
+============
+
+Once you have SASS installed. Open terminal (CTRL+Alt+T) and cd into your
+branch folder. Then enter this command to begin watching your scss files:
+$ sass --watch 0.1/ambiance/css/sass/default.scss:0.1/ambiance/css/appTemplate.css --style compressed
+