Change font weight to 300

kitchen-sink/app/asides/features.html

@@ -6,7 +6,6 @@
             <li class="current">
                 <a href="#main-article" data-router="article">
                     <strong>Meet the framework</strong>
-                    <small>A brief summary of features.</small>
                 </a>
             </li>
 
@@ -15,7 +14,6 @@
                 <a href="#layout" data-router="section">
                     <div class="bubble right">5</div>
                     <strong>Layout</strong>
-                    <small>How to distribute the content in your app.</small>
                 </a>
             </li>
 
@@ -23,7 +21,6 @@
             <li>
                 <a href="#list" data-router="section" data-count="22">
                     <strong>Lists</strong>
-                    <small>Different formats for creating lists.</small>
                 </a>
             </li>
 
@@ -32,7 +29,6 @@
                 <a href="#form" data-router="section">
                     <div class="bubble right">8</div>
                     <strong>Form Elements</strong>
-                    <small>Controls available in BETA version</small>
                 </a>
             </li>
 
@@ -41,7 +37,6 @@
                 <a href="#aside" data-router="section">
                     <div class="bubble right">8</div>
                     <strong>Asides</strong>
-                    <small>The fashion element in all cool Apps</small>
                 </a>
             </li>
 
@@ -50,7 +45,6 @@
                 <a href="#data" data-router="section">
                     <div class="bubble right">9</div>
                     <strong>Data-attributes</strong>
-                    <small>Semantic links to create complex elements</small>
                 </a>
             </li>
 
@@ -59,7 +53,6 @@
                 <a href="#icon" data-router="section">
                     <div class="bubble right">109</div>
                     <strong>Icons</strong>
-                    <small>A huge repository vectorized icons</small>
                 </a>
             </li>
 
@@ -68,7 +61,6 @@
                 <a href="#scroll" data-router="section">
                     <div class="bubble right">2</div>
                     <strong>Scrolls</strong>
-                    <small>Everything is scrollable</small>
                 </a>
             </li>
 
@@ -77,7 +69,6 @@
                 <a href="#touchevents" data-router="section">
                     <div class="bubble right">19</div>
                     <strong>Touch Events</strong>
-                    <small>Touch, Tap, Double-Tap, Swipe...</small>
                 </a>
             </li>
 
@@ -86,7 +77,6 @@
                 <a href="#layoutevents" data-router="section">
                     <div class="bubble right">2</div>
                     <strong>Layout Events</strong>
-                    <small>Load & Unload</small>
                 </a>
             </li>
 
@@ -95,7 +85,6 @@
                 <a href="#notification" data-router="section">
                     <div class="bubble right">8</div>
                     <strong>Notifications</strong>
-                    <small>Cross-device notification system</small>
                 </a>
             </li>
 
@@ -104,7 +93,6 @@
                 <a href="#pull" data-router="section">
                     <div class="bubble right">1</div>
                     <strong>Pull & Refresh</strong>
-                    <small>Beautiful refresh event</small>
                 </a>
             </li>
 
@@ -113,7 +101,6 @@
                 <a href="#carousel" data-router="section">
                     <div class="bubble right">1</div>
                     <strong>Carousel</strong>
-                    <small>Carousel images example</small>
                 </a>
             </li>
 
@@ -122,7 +109,6 @@
                 <a href="#environment" data-router="section">
                     <div class="bubble right">1</div>
                     <strong>Environment</strong>
-                    <small>How much do you know of your device?</small>
                 </a>
             </li>
 
@@ -131,7 +117,6 @@
                 <a href="#color" data-router="section" data-title="Colours">
                     <div class="bubble right">14</div>
                     <strong>Colors</strong>
-                    <small>Everything is more beautiful if you put a color.</small>
                 </a>
             </li>
 
@@ -139,7 +124,6 @@
             <li>
                 <a href="#grid" data-router="section">
                     <strong>Grid System</strong>
-                    <small>System percentage dimension</small>
                 </a>
             </li>
         </ul>

kitchen-sink/app/sections/color.html

@@ -6,7 +6,9 @@
     </header>
     <article class="scroll indented">
         <div>
-            <a href="#" class="button anchor">default</a>
+            <a href="#" class="button small blue">default</a>
+            <a href="#" class="button large blue">default</a>
+
             <a href="#" class="button anchor disabled">disabled</a>
             <a href="#" class="button anchor red">red</a>
             <a href="#" class="button anchor lightgreen">lightgreen</a>

kitchen-sink/index.html

@@ -81,11 +81,11 @@
                 <a href="#features" data-router="aside" data-icon="menu"></a>
             </nav>
             <div class="left">
-                <div class="centered title with-subtitle">
-                    Lungo
-                    <small class="subtitle">HTML5 Cross-Device Framework</small>
-                </div>
+                <div class="centered title">Lungo</div>
             </div>
+            <nav class="right ">
+                <a href="#features" data-router="aside" data-icon="menu"></a>
+            </nav>
         </header>
 
         <article id="main-article" class="list indented scroll">
@@ -162,7 +162,9 @@
     <script src="../src/boot/Lungo.Boot.Section.js"></script>
     <script src="../src/boot/Lungo.Boot.Article.js"></script>
 
+    <!--
     <script src="../src/Lungo.Scroll.js"></script>
+    -->
 
     <!-- LungoJS - Sandbox App -->
     <script>

src/stylesheets/Lungo.base.styl

@@ -80,7 +80,7 @@ video
   outline: 0
   padding: 0
   font-size: 100%
-
+  font-weight: normal
 
 article, aside, details, figcaption, figure, footer, header, hgroup, nav, section
   display: block
@@ -102,9 +102,7 @@ body
   padding: 0
   width: 100%
   height: 100%
-  overflow-y: visible !important
-  font-size: 13px
-  line-height: 1.231
+  // overflow-y: visible !important
 
   -webkit-user-select:none
   -webkit-touch-callout: none
@@ -126,10 +124,6 @@ a
   &:hover
     opacity: 1
 
-
-b, strong font-weight: bold
-
-
 img
     border: 0
     -ms-interpolation-mode: bicubic
@@ -144,5 +138,4 @@ table
 
 th, td, caption
   vertical-align: top
-  font-weight: normal
   text-align: left

src/stylesheets/Lungo.layout.article.styl

@@ -32,9 +32,6 @@ article
   & .text
     margin: 4px 0 8px
     display: block
-    font-size: 0.9em
-    font-weight: normal
-    line-height: 1.4em
 
 
 header

src/stylesheets/Lungo.layout.aside.styl

@@ -62,7 +62,6 @@ aside
         & .icon
           position: absolute
           width: inherit
-          font-size: 38px
           line-height: ASIDE_WIDTH_SMALL
 
         & .bubble

src/stylesheets/Lungo.layout.list.styl

@@ -16,6 +16,9 @@
     padding: 9px
     position: relative
 
+    &, & a, & small, & .right
+      font-weight: 300
+
     &.arrow::after
       position: absolute
       right: 8px
@@ -47,8 +50,6 @@
         font-size: 3.6em
 
     &.anchor
-      font-size: 0.85em
-      font-weight: bold
       padding: 2px 10px
       & .icon.small
         margin-right: 2px
@@ -57,27 +58,24 @@
 
     & strong
       position: relative
-      font-size: 1.15em
+      font-weight: 400
 
     & small
       display: block
       overflow: hidden
       white-space: nowrap
       text-overflow: ellipsis
-      font-size: 0.8em
       & + .right
         margin-top: -12px
 
+    & small, &.anchor, & .right
+      font-size: 0.9em
+
 
   & .bubble
     padding-left: 4px
     padding-right: 4px
 
-  & .right
-    font-size: 0.8em
-    font-weight: bold
-
-
   & .loading .right
     font-size: 1.0em
 

src/stylesheets/Lungo.layout.nav.styl

@@ -16,10 +16,9 @@ nav
     box-pack( justify )
     & > a
       box-flex( 1 )
-  & abbr
-    font-weight: bold
 
   header &
+    font-weigth: 700
     & a
       padding: 0 6px
       min-width: 30px
@@ -42,6 +41,10 @@ nav
         left: -12px
         margin-right: -20px
 
+      & abbr
+        font-size: 0.9em
+        font-weight: 700
+
       &.button a
         margin: 5px 5px 5px 0
         height: 32px

src/stylesheets/Lungo.layout.styl

@@ -94,26 +94,16 @@ header
     margin-left: 4px
     float: left
     z-index: -1
-    font-size: 1.2em
-    font-weight: bold
-
-    &.with-subtitle
-      line-height: 34px
-      & .subtitle
-        position: relative
-        top: -4px
-        display: block
-        font-size: 0.7em
-        line-height: 0.7em
-
+    font-size: 1.1em
+    font-weight: 400
 
     & img
       height: 24px
 
     &.centered
       position: absolute
-      left: 0px
-      right: 0px
+      left: 32px
+      right: 32px
       text-align: center
       display: inline-block
 

src/stylesheets/Lungo.theme.default.styl

@@ -8,9 +8,9 @@
  */
 
 @import "import/vendor.styl"
-@import url("http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700");
-@import url("http://fonts.googleapis.com/css?family=Exo:200,400,700");
 @import url("http://fonts.googleapis.com/css?family=Titillium+Web:200,400,700");
+@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700")
+
 
 THEME = #0093D5
 THEME_light =  #39ABE1
@@ -28,9 +28,12 @@ NOTIFICATION_alert = #ffb515
 NOTIFICATION_success = #009600
 FORM_border_radius = 1px
 
-.app
+body
   background: #000
-  font-family: "Titillium Web", "Exo","Open Sans Condensed", Helvetica, Arial, sans-serif
+  font-family: "Source Sans Pro", "Titillium Web", Helvetica, Arial, sans-serif
+  font-weight: 300
+  font-size: 16px
+  line-height: 1.3em
 
 .theme
   &, li&, a&
@@ -51,7 +54,6 @@ section
     box-shadow inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5)
     & .title
       color: #fff
-      text-shadow 0 1px 0 rgba(0,0,0,0.2)
     & .subtitle
       color: #fff
       opacity: 0.7
@@ -140,7 +142,7 @@ footer > nav > a, nav.groupbar > a
 
 
 LIST-border = #ddd
-LIST-color = #2a2a2a
+LIST-color = #333
 
 .list
   & li
@@ -184,10 +186,10 @@ LIST-color = #2a2a2a
   color: #fff
   text-shadow: 0 1px 0px rgba(0,0,0,0.2)
 
+
+/* ____________________ BUTTONS ____________________ */
 .button, button
   border-radius(FORM-border-radius)
-  font-weight: bold
-  text-shadow: 0 -1px 0 rgba(0,0,0,0.3)
   color: white
   border-radius 1px
   box-shadow inset 0 1px 0 rgba(255,255,255,0.2)
@@ -197,6 +199,8 @@ LIST-color = #2a2a2a
     box-shadow inset 0 0 128px rgba(0,0,0,0.25)
     border-color: none
 
+
+
 FORM_shadow_form =  'inset 0 1px 2px rgba(0,0,0,0.1)'
 FORM_shadow_form_active =  'inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef'
 FORM_border_color = #D0D4C6
@@ -246,10 +250,8 @@ form, .form
       &.active
         background-color: THEME_light
 
-
     &::-webkit-slider-thumb
       border-radius: FORM-border-radius
-      box-shadow 1px 0 rgba(0,0,0,0.2), -1px 0 rgba(0,0,0,0.2), 0 1px rgba(0,0,0,0.2), 0 -1px rgba(0,0,0,0.2)
       background: #fff
 
     &::-webkit-slider-thumb::after
@@ -259,7 +261,6 @@ form, .form
   & .progress
     .labels
       font-size: 12px
-      font-weight: bold
       line-height: 18px
       color: #858585
 
@@ -270,7 +271,6 @@ form, .form
         & .label
           float: right
           margin-right: 3px
-          font-weight: bold
           color: rgba(0,0,0,0.6)
           text-shadow: 0 1px 0 rgba(255,255,255,0.2) !important
           font-size: 12px

src/stylesheets/Lungo.widgets.button.styl

@@ -18,7 +18,8 @@
 
   color: #fff !important
   font-family: inherit
-  font-size: 1.1em
+  font-size: 1.05em
+  font-weight: 400
   text-align: center
   text-decoration: none
   outline: none
@@ -40,12 +41,11 @@
   &.large
     height: h = 52px
     padding: 0 24px
-    font-size: 1.45em
-    font-weight: 300
+    font-size: 1.4em
     line-height: h
 
   &.small
     height: h = 28px
     padding: 0 12px
-    font-size: 1.0em
+    font-size: 0.9em
     line-height: (h - 2)

src/stylesheets/Lungo.widgets.form.styl

@@ -16,12 +16,8 @@ ROUNDED_RADIUS = 2px
 PROGRESS_HEIGHT = 12px
 
 form, .form
-  &.wrapper input:not([type=checkbox]), textarea, select
-    margin: 3px 0px 3px 0px
-
   & label:not(.select)
-    font-size: 0.95em
-    font-weight: 400
+    font-size: 0.9em
 
   & input, textarea, select, .progress
     margin-bottom: 8px
@@ -33,8 +29,7 @@ form, .form
     height: FORM_INPUT_HEIGHT
     transition all 0.15s linear
     font-family: inherit
-    font-size: 14px
-
+    font-size: inherit
     -webkit-appearance: none
     -webkit-user-select: text
     -webkit-font-smoothing: antialiased
@@ -113,7 +108,6 @@ form, .form
       &.active:after
         float: left
         content: "\0051"
-        font-weight: bold
         font-size: 1.6em
 
 

src/stylesheets/Lungo.widgets.styl

@@ -61,3 +61,32 @@
   font-weight: bold
   line-height: 13px
   text-align: center
+
+/* ================================  TEXT  ================================ */
+.text
+  &.thin
+    font-weight: 200
+  &.book
+    font-weight: 300
+  &.normal
+    font-weight: 400
+  &.bold
+    font-weight: 700
+  &.italic
+    font-style: italic
+  &.underline
+    text-decoration: underline
+  &.line-through
+    text-decoration: line-through
+  &.align_left
+    text-align: left
+  &.align_right
+    text-align: right
+  &.align_center
+    text-align: center
+  &.align_justify
+    text-align: justify
+  &.small
+    font-size: 0.9em
+  &.big
+    font-size: 1.1em

src/stylesheets/constants.less

@@ -1,46 +0,0 @@
-@import "mixins.less";
-
-/* DIMENSIONS */
-@header-footer-height: 44px;
-    @header_groupbar_height: 30px;
-
-@article-bottom: 45px;
-    @article_with_header_extended: 74px;
-
-@border-radius: 2px;
-
-@aside-width: 264px;
-    @aside-width-small: 64px;
-
-@defaultTrasition : @easeOutSine;
-
-/* COLORS */
-@white:             #fff;
-@black:             #000;
-    @black-active:      #000;
-@grey:              #ccc;
-    @grey-active:       #b5b5b5;
-@red:               #e33100;
-    @red-active:        #c5280f;
-@lightgreen:        #91bd09;
-    @lightgreen-active: #7ea41a;
-@green:             #009600;
-    @green-active:      #00770e;
-@blue:              #237fd7;
-    @blue-active:       #1a69b6;
-@arcticblue:        #2daebf;
-    @arcticblue-active: #238e9e;
-@orange:            #ff5c00;
-    @orange-active:     #da4e15;
-@purple:            #7b658d;
-    @purple-active:     #574765;
-@magenta:           #a9014b;
-    @magenta-active:    #831239;
-@pink:              #ff007f;
-    @pink-active:       #de2870;
-@yellow:            #ffb515;
-    @yellow-active:     #dfa020;
-@twitter:           #35cdff;
-    @twitter-active:    #2bafda;
-@facebook:          #3b5998;
-    @facebook-active:   #2c4579;

src/stylesheets/css/Lungo.base.css

@@ -79,6 +79,7 @@ video {
   outline: 0;
   padding: 0;
   font-size: 100%;
+  font-weight: normal;
 }
 article,
 aside,
@@ -108,9 +109,6 @@ body {
   padding: 0;
   width: 100%;
   height: 100%;
-  overflow-y: visible !important;
-  font-size: 13px;
-  line-height: 1.231;
   -webkit-user-select: none;
   -webkit-touch-callout: none;
   -webkit-box-orient: vertical;
@@ -132,8 +130,6 @@ a {
 a:hover {
   opacity: 1;
 }
-b,
-strong font-weight: bold,
 img {
   border: 0;
   -ms-interpolation-mode: bicubic;
@@ -148,6 +144,5 @@ th,
 td,
 caption {
   vertical-align: top;
-  font-weight: normal;
   text-align: left;
 }

src/stylesheets/css/Lungo.layout.article.css

@@ -25,21 +25,14 @@ article:first-child {
 article.pull {
   -webkit-transition-property: transform;
   -moz-transition-property: transform;
-  -ms-transition-property: transform;
-  -o-transition-property: transform;
   transition-property: transform;
   -webkit-transition-duration: 300ms;
   -moz-transition-duration: 300ms;
-  -ms-transition-duration: 300ms;
-  -o-transition-duration: 300ms;
   transition-duration: 300ms;
 }
 article .text {
   margin: 4px 0 8px;
   display: block;
-  font-size: 0.9em;
-  font-weight: normal;
-  line-height: 1.4em;
 }
 header:not(.extended) ~ article {
   top: 44px;
@@ -54,8 +47,6 @@ footer ~ article {
   article.aside {
     -webkit-transform: translate3d(0px, 0, 0);
     -moz-transform: translate3d(0px, 0, 0);
-    -ms-transform: translate3d(0px, 0, 0);
-    -o-transform: translate3d(0px, 0, 0);
     transform: translate3d(0px, 0, 0);
   }
 }

src/stylesheets/css/Lungo.layout.aside.css

@@ -9,29 +9,21 @@
 section.aside:not(.small) {
   -webkit-transform: translateX(264px);
   -moz-transform: translateX(264px);
-  -ms-transform: translateX(264px);
-  -o-transform: translateX(264px);
   transform: translateX(264px);
 }
 section.aside.small {
   -webkit-transform: translateX(64px);
   -moz-transform: translateX(64px);
-  -ms-transform: translateX(64px);
-  -o-transform: translateX(64px);
   transform: translateX(64px);
 }
 section.aside.right {
   -webkit-transform: translateX(-ASIDE_WIDTH);
   -moz-transform: translateX(-ASIDE_WIDTH);
-  -ms-transform: translateX(-ASIDE_WIDTH);
-  -o-transform: translateX(-ASIDE_WIDTH);
   transform: translateX(-ASIDE_WIDTH);
 }
 section.aside.right.small {
   -webkit-transform: translateX(-ASIDE_WIDTH_SMALL);
   -moz-transform: translateX(-ASIDE_WIDTH_SMALL);
-  -ms-transform: translateX(-ASIDE_WIDTH_SMALL);
-  -o-transform: translateX(-ASIDE_WIDTH_SMALL);
   transform: translateX(-ASIDE_WIDTH_SMALL);
 }
 aside {
@@ -79,7 +71,6 @@ aside.small nav a {
 aside.small nav a .icon {
   position: absolute;
   width: inherit;
-  font-size: 38px;
   line-height: 64px;
 }
 aside.small nav a .bubble {

src/stylesheets/css/Lungo.layout.css

@@ -16,28 +16,18 @@ section {
   display: none;
   -webkit-transition-property: opacity z-index transform;
   -moz-transition-property: opacity z-index transform;
-  -ms-transition-property: opacity z-index transform;
-  -o-transition-property: opacity z-index transform;
   transition-property: opacity z-index transform;
   -webkit-transition-duration: 300ms;
   -moz-transition-duration: 300ms;
-  -ms-transition-duration: 300ms;
-  -o-transition-duration: 300ms;
   transition-duration: 300ms;
   -webkit-transition-timing-function: easeOutSine;
   -moz-transition-timing-function: easeOutSine;
-  -ms-transition-timing-function: easeOutSine;
-  -o-transition-timing-function: easeOutSine;
   transition-timing-function: easeOutSine;
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
-  -ms-transform: translateZ(0);
-  -o-transform: translateZ(0);
   transform: translateZ(0);
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
-  -ms-backface-visibility: hidden;
-  -o-backface-visibility: hidden;
   backface-visibility: hidden;
 /* Transition: POP */
 /* Transition: SLIDE */
@@ -60,32 +50,24 @@ section[data-transition="pop"] {
   opacity: 0;
   -webkit-transform: scale(1.15);
   -moz-transform: scale(1.15);
-  -ms-transform: scale(1.15);
-  -o-transform: scale(1.15);
   transform: scale(1.15);
 }
 section[data-transition="pop"]:first-child,
 section[data-transition="pop"].show {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
-  -ms-transform: scale(1);
-  -o-transform: scale(1);
   transform: scale(1);
   opacity: 1;
 }
 section[data-transition="pop"].hide {
   -webkit-transform: scale(0.9);
   -moz-transform: scale(0.9);
-  -ms-transform: scale(0.9);
-  -o-transform: scale(0.9);
   transform: scale(0.9);
   opacity: 0;
 }
 section[data-transition="slide"] {
   -webkit-transform: translateX(100%);
   -moz-transform: translateX(100%);
-  -ms-transform: translateX(100%);
-  -o-transform: translateX(100%);
   transform: translateX(100%);
   visibility: visible !important;
 }
@@ -94,16 +76,12 @@ section[data-transition="slide"] > article > * {
   opacity: 0;
   -webkit-transition: opacity 400ms easeOutSine;
   -moz-transition: opacity 400ms easeOutSine;
-  -ms-transition: opacity 400ms easeOutSine;
-  -o-transition: opacity 400ms easeOutSine;
   transition: opacity 400ms easeOutSine;
 }
 section[data-transition="slide"]:first-child,
 section[data-transition="slide"].show {
   -webkit-transform: translateX(0%);
   -moz-transform: translateX(0%);
-  -ms-transform: translateX(0%);
-  -o-transform: translateX(0%);
   transform: translateX(0%);
 }
 section[data-transition="slide"]:first-child > header > *,
@@ -115,8 +93,6 @@ section[data-transition="slide"].show > article > * {
 section[data-transition="slide"].hide {
   -webkit-transform: translateX(-100%);
   -moz-transform: translateX(-100%);
-  -ms-transform: translateX(-100%);
-  -o-transform: translateX(-100%);
   transform: translateX(-100%);
 }
 section[data-transition="slide"].hide > header > *,
@@ -126,8 +102,6 @@ section[data-transition="slide"].hide > article > * {
 section[data-transition="cover"] {
   -webkit-transform: translateY(110%);
   -moz-transform: translateY(110%);
-  -ms-transform: translateY(110%);
-  -o-transform: translateY(110%);
   transform: translateY(110%);
 }
 section[data-transition="cover"]:first-child,
@@ -135,8 +109,6 @@ section[data-transition="cover"].show,
 section[data-transition="cover"].hide {
   -webkit-transform: translateY(0%);
   -moz-transform: translateY(0%);
-  -ms-transform: translateY(0%);
-  -o-transform: translateY(0%);
   transform: translateY(0%);
 }
 section[data-transition="fade"] {
@@ -166,26 +138,16 @@ header .title {
   margin-left: 4px;
   float: left;
   z-index: -1;
-  font-size: 1.2em;
-  font-weight: bold;
-}
-header .title.with-subtitle {
-  line-height: 34px;
-}
-header .title.with-subtitle .subtitle {
-  position: relative;
-  top: -4px;
-  display: block;
-  font-size: 0.7em;
-  line-height: 0.7em;
+  font-size: 1.1em;
+  font-weight: 400;
 }
 header .title img {
   height: 24px;
 }
 header .title.centered {
   position: absolute;
-  left: 0px;
-  right: 0px;
+  left: 32px;
+  right: 32px;
   text-align: center;
   display: inline-block;
 }

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

@@ -11,6 +11,12 @@
   padding: 9px;
   position: relative;
 }
+.list li,
+.list li a,
+.list li small,
+.list li .right {
+  font-weight: 300;
+}
 .list li.arrow::after {
   position: absolute;
   right: 8px;
@@ -22,8 +28,6 @@
   border-top: 3px solid #d0d0d8;
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  -o-transform: rotate(45deg);
   transform: rotate(45deg);
 }
 .list li a {
@@ -47,8 +51,6 @@
   font-size: 3.6em;
 }
 .list li.anchor {
-  font-size: 0.85em;
-  font-weight: bold;
   padding: 2px 10px;
 }
 .list li.anchor .icon.small {
@@ -59,26 +61,26 @@
 }
 .list li strong {
   position: relative;
-  font-size: 1.15em;
+  font-weight: 400;
 }
 .list li small {
   display: block;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  font-size: 0.8em;
 }
 .list li small + .right {
   margin-top: -12px;
 }
+.list li small,
+.list li.anchor,
+.list li .right {
+  font-size: 0.9em;
+}
 .list .bubble {
   padding-left: 4px;
   padding-right: 4px;
 }
-.list .right {
-  font-size: 0.8em;
-  font-weight: bold;
-}
 .list .loading .right {
   font-size: 1em;
 }

src/stylesheets/css/Lungo.layout.nav.css

@@ -13,20 +13,16 @@ footer nav {
   display: box;
   -webkit-box-pack: justify;
   -moz-box-pack: justify;
-  -ms-box-pack: justify;
-  -o-box-pack: justify;
   box-pack: justify;
 }
 nav.groupbar > a,
 footer nav > a {
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
-  -ms-box-flex: 1;
-  -o-box-flex: 1;
   box-flex: 1;
 }
-nav abbr {
-  font-weight: bold;
+header nav {
+  font-weigth: 700;
 }
 header nav a {
   padding: 0 6px;
@@ -50,6 +46,10 @@ header nav a .bubble {
   left: -12px;
   margin-right: -20px;
 }
+header nav a abbr {
+  font-size: 0.9em;
+  font-weight: 700;
+}
 header nav a.button a {
   margin: 5px 5px 5px 0;
   height: 32px;

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

@@ -6,12 +6,14 @@
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
-@import url("http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700");
-@import url("http://fonts.googleapis.com/css?family=Exo:200,400,700");
 @import url("http://fonts.googleapis.com/css?family=Titillium+Web:200,400,700");
-.app {
+@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700");
+body {
   background: #000;
-  font-family: "Titillium Web", "Exo", "Open Sans Condensed", Helvetica, Arial, sans-serif;
+  font-family: "Source Sans Pro", "Titillium Web", Helvetica, Arial, sans-serif;
+  font-weight: 300;
+  font-size: 16px;
+  line-height: 1.3em;
 }
 .theme,
 li.theme,
@@ -37,9 +39,6 @@ section > header {
 }
 section > header .title {
   color: #fff;
-  -webkit-text-shadow: 0 1px 0 rgba(0,0,0,0.2);
-  -moz-text-shadow: 0 1px 0 rgba(0,0,0,0.2);
-  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
 }
 section > header .subtitle {
   color: #fff;
@@ -169,7 +168,7 @@ nav.groupbar > a.current {
 }
 .list li,
 .list li a {
-  color: #2a2a2a;
+  color: #333;
 }
 .list li.dark,
 .list li a.dark {
@@ -239,15 +238,12 @@ nav.groupbar > a.current {
   -moz-text-shadow: 0 1px 0px rgba(0,0,0,0.2);
   text-shadow: 0 1px 0px rgba(0,0,0,0.2);
 }
+/* ____________________ BUTTONS ____________________ */
 .button,
 button {
   -webkit-border-radius: FORM-border-radius;
   -moz-border-radius: FORM-border-radius;
   border-radius: FORM-border-radius;
-  font-weight: bold;
-  -webkit-text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
-  -moz-text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
-  text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
   color: #fff;
   -webkit-border-radius: 1px;
   -moz-border-radius: 1px;
@@ -448,9 +444,6 @@ form input[type=range]::-webkit-slider-thumb,
   -webkit-border-radius: FORM-border-radius;
   -moz-border-radius: FORM-border-radius;
   border-radius: FORM-border-radius;
-  -webkit-box-shadow: 1px 0 rgba(0,0,0,0.2), -1px 0 rgba(0,0,0,0.2), 0 1px rgba(0,0,0,0.2), 0 -1px rgba(0,0,0,0.2);
-  -moz-box-shadow: 1px 0 rgba(0,0,0,0.2), -1px 0 rgba(0,0,0,0.2), 0 1px rgba(0,0,0,0.2), 0 -1px rgba(0,0,0,0.2);
-  box-shadow: 1px 0 rgba(0,0,0,0.2), -1px 0 rgba(0,0,0,0.2), 0 1px rgba(0,0,0,0.2), 0 -1px rgba(0,0,0,0.2);
   background: #fff;
 }
 form input[type=range]::-webkit-slider-thumb::after,
@@ -460,7 +453,6 @@ form input[type=range]::-webkit-slider-thumb::after,
 form .progress .labels,
 .form .progress .labels {
   font-size: 12px;
-  font-weight: bold;
   line-height: 18px;
   color: #858585;
 }
@@ -476,7 +468,6 @@ form .progress .bar .value .label,
 .form .progress .bar .value .label {
   float: right;
   margin-right: 3px;
-  font-weight: bold;
   color: rgba(0,0,0,0.6);
   -webkit-text-shadow: 0 1px 0 rgba(255,255,255,0.2) !important;
   -moz-text-shadow: 0 1px 0 rgba(255,255,255,0.2) !important;

src/stylesheets/css/Lungo.widgets.button.css

@@ -14,7 +14,8 @@ button {
   cursor: pointer;
   color: #fff !important;
   font-family: inherit;
-  font-size: 1.1em;
+  font-size: 1.05em;
+  font-weight: 400;
   text-align: center;
   text-decoration: none;
   outline: none;
@@ -44,14 +45,13 @@ button.anchor .icon {
 button.large {
   height: 52px;
   padding: 0 24px;
-  font-size: 1.45em;
-  font-weight: 300;
+  font-size: 1.4em;
   line-height: 52px;
 }
 .button.small,
 button.small {
   height: 28px;
   padding: 0 12px;
-  font-size: 1em;
+  font-size: 0.9em;
   line-height: 26px;
 }

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

@@ -65,98 +65,70 @@ a.facebook,
 li.grey {
   -webkit-box-shadow: inset 4px 0px 0px #ccc;
   -moz-box-shadow: inset 4px 0px 0px #ccc;
-  -ms-box-shadow: inset 4px 0px 0px #ccc;
-  -o-box-shadow: inset 4px 0px 0px #ccc;
   box-shadow: inset 4px 0px 0px #ccc;
 }
 li.dark-grey {
   -webkit-box-shadow: inset 4px 0px 0px #000;
   -moz-box-shadow: inset 4px 0px 0px #000;
-  -ms-box-shadow: inset 4px 0px 0px #000;
-  -o-box-shadow: inset 4px 0px 0px #000;
   box-shadow: inset 4px 0px 0px #000;
 }
 li.red {
   -webkit-box-shadow: inset 4px 0px 0px #e33100;
   -moz-box-shadow: inset 4px 0px 0px #e33100;
-  -ms-box-shadow: inset 4px 0px 0px #e33100;
-  -o-box-shadow: inset 4px 0px 0px #e33100;
   box-shadow: inset 4px 0px 0px #e33100;
 }
 li.lightgreen {
   -webkit-box-shadow: inset 4px 0px 0px #91bd09;
   -moz-box-shadow: inset 4px 0px 0px #91bd09;
-  -ms-box-shadow: inset 4px 0px 0px #91bd09;
-  -o-box-shadow: inset 4px 0px 0px #91bd09;
   box-shadow: inset 4px 0px 0px #91bd09;
 }
 li.green {
   -webkit-box-shadow: inset 4px 0px 0px #009600;
   -moz-box-shadow: inset 4px 0px 0px #009600;
-  -ms-box-shadow: inset 4px 0px 0px #009600;
-  -o-box-shadow: inset 4px 0px 0px #009600;
   box-shadow: inset 4px 0px 0px #009600;
 }
 li.blue {
   -webkit-box-shadow: inset 4px 0px 0px #237fd7;
   -moz-box-shadow: inset 4px 0px 0px #237fd7;
-  -ms-box-shadow: inset 4px 0px 0px #237fd7;
-  -o-box-shadow: inset 4px 0px 0px #237fd7;
   box-shadow: inset 4px 0px 0px #237fd7;
 }
 li.arcticblue {
   -webkit-box-shadow: inset 4px 0px 0px #2daebf;
   -moz-box-shadow: inset 4px 0px 0px #2daebf;
-  -ms-box-shadow: inset 4px 0px 0px #2daebf;
-  -o-box-shadow: inset 4px 0px 0px #2daebf;
   box-shadow: inset 4px 0px 0px #2daebf;
 }
 li.orange {
   -webkit-box-shadow: inset 4px 0px 0px #ff5c00;
   -moz-box-shadow: inset 4px 0px 0px #ff5c00;
-  -ms-box-shadow: inset 4px 0px 0px #ff5c00;
-  -o-box-shadow: inset 4px 0px 0px #ff5c00;
   box-shadow: inset 4px 0px 0px #ff5c00;
 }
 li.purple {
   -webkit-box-shadow: inset 4px 0px 0px #7b658d;
   -moz-box-shadow: inset 4px 0px 0px #7b658d;
-  -ms-box-shadow: inset 4px 0px 0px #7b658d;
-  -o-box-shadow: inset 4px 0px 0px #7b658d;
   box-shadow: inset 4px 0px 0px #7b658d;
 }
 li.magenta {
   -webkit-box-shadow: inset 4px 0px 0px #a9014b;
   -moz-box-shadow: inset 4px 0px 0px #a9014b;
-  -ms-box-shadow: inset 4px 0px 0px #a9014b;
-  -o-box-shadow: inset 4px 0px 0px #a9014b;
   box-shadow: inset 4px 0px 0px #a9014b;
 }
 li.pink {
   -webkit-box-shadow: inset 4px 0px 0px #ff007f;
   -moz-box-shadow: inset 4px 0px 0px #ff007f;
-  -ms-box-shadow: inset 4px 0px 0px #ff007f;
-  -o-box-shadow: inset 4px 0px 0px #ff007f;
   box-shadow: inset 4px 0px 0px #ff007f;
 }
 li.yellow {
   -webkit-box-shadow: inset 4px 0px 0px #ffb515;
   -moz-box-shadow: inset 4px 0px 0px #ffb515;
-  -ms-box-shadow: inset 4px 0px 0px #ffb515;
-  -o-box-shadow: inset 4px 0px 0px #ffb515;
   box-shadow: inset 4px 0px 0px #ffb515;
 }
 li.twitter {
   -webkit-box-shadow: inset 4px 0px 0px #35cdff;
   -moz-box-shadow: inset 4px 0px 0px #35cdff;
-  -ms-box-shadow: inset 4px 0px 0px #35cdff;
-  -o-box-shadow: inset 4px 0px 0px #35cdff;
   box-shadow: inset 4px 0px 0px #35cdff;
 }
 li.facebook {
   -webkit-box-shadow: inset 4px 0px 0px #3b5998;
   -moz-box-shadow: inset 4px 0px 0px #3b5998;
-  -ms-box-shadow: inset 4px 0px 0px #3b5998;
-  -o-box-shadow: inset 4px 0px 0px #3b5998;
   box-shadow: inset 4px 0px 0px #3b5998;
 }

src/stylesheets/css/Lungo.widgets.css

@@ -52,8 +52,6 @@
 .round {
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
-  -ms-border-radius: 4px;
-  -o-border-radius: 4px;
   border-radius: 4px;
 }
 .bubble {
@@ -65,3 +63,43 @@
   line-height: 13px;
   text-align: center;
 }
+/* ================================  TEXT  ================================ */
+.text.thin {
+  font-weight: 200;
+}
+.text.book {
+  font-weight: 300;
+}
+.text.normal {
+  font-weight: 400;
+}
+.text.bold {
+  font-weight: 700;
+}
+.text.italic {
+  font-style: italic;
+}
+.text.underline {
+  text-decoration: underline;
+}
+.text.line-through {
+  text-decoration: line-through;
+}
+.text.align_left {
+  text-align: left;
+}
+.text.align_right {
+  text-align: right;
+}
+.text.align_center {
+  text-align: center;
+}
+.text.align_justify {
+  text-align: justify;
+}
+.text.small {
+  font-size: 0.9em;
+}
+.text.big {
+  font-size: 1.1em;
+}

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

@@ -6,18 +6,9 @@
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
-form.wrapper input:not([type=checkbox]),
-.form.wrapper input:not([type=checkbox]),
-form textarea,
-.form textarea,
-form select,
-.form select {
-  margin: 3px 0px 3px 0px;
-}
 form label:not(.select),
 .form label:not(.select) {
-  font-size: 0.95em;
-  font-weight: 400;
+  font-size: 0.9em;
 }
 form input,
 .form input,
@@ -59,11 +50,9 @@ form textarea,
   height: 30px;
   -webkit-transition: all 0.15s linear;
   -moz-transition: all 0.15s linear;
-  -ms-transition: all 0.15s linear;
-  -o-transition: all 0.15s linear;
   transition: all 0.15s linear;
   font-family: inherit;
-  font-size: 14px;
+  font-size: inherit;
   -webkit-appearance: none;
   -webkit-user-select: text;
   -webkit-font-smoothing: antialiased;
@@ -177,7 +166,6 @@ form input[type=range].checkbox.active:after,
 .form input[type=range].checkbox.active:after {
   float: left;
   content: "\0051";
-  font-weight: bold;
   font-size: 1.6em;
 }
 form input[type=range]::-webkit-slider-thumb,
@@ -198,8 +186,6 @@ form input[type=range]::-webkit-slider-thumb::after,
   position: relative;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
-  -ms-border-radius: 8px;
-  -o-border-radius: 8px;
   border-radius: 8px;
   z-index: 9;
   top: 6px;
@@ -232,8 +218,6 @@ form .progress .bar .value,
   width: 0%;
   -webkit-transition: width 500ms easeOutSine;
   -moz-transition: width 500ms easeOutSine;
-  -ms-transition: width 500ms easeOutSine;
-  -o-transition: width 500ms easeOutSine;
   transition: width 500ms easeOutSine;
 }
 form .progress .bar .value .label,

src/stylesheets/css/Lungo.widgets.loading.css

@@ -14,8 +14,6 @@
   margin-left: -0.5em;
   -webkit-transform-origin: 0.5em 0.5em;
   -moz-transform-origin: 0.5em 0.5em;
-  -ms-transform-origin: 0.5em 0.5em;
-  -o-transform-origin: 0.5em 0.5em;
   transform-origin: 0.5em 0.5em;
   font-size: 48px;
 }
@@ -38,13 +36,9 @@
   top: 0;
   -webkit-transform-origin: 0.05em 0.5em;
   -moz-transform-origin: 0.05em 0.5em;
-  -ms-transform-origin: 0.05em 0.5em;
-  -o-transform-origin: 0.05em 0.5em;
   transform-origin: 0.05em 0.5em;
   -webkit-border-radius: 0.1em;
   -moz-border-radius: 0.1em;
-  -ms-border-radius: 0.1em;
-  -o-border-radius: 0.1em;
   border-radius: 0.1em;
 }
 .loading > span::before,
@@ -54,43 +48,31 @@
 .loading > span.top {
   -webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
-  -ms-transform: rotate(0deg);
-  -o-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 .loading > span.right {
   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  -o-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 .loading > span.bottom {
   -webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  -o-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 .loading > span.left {
   -webkit-transform: rotate(270deg);
   -moz-transform: rotate(270deg);
-  -ms-transform: rotate(270deg);
-  -o-transform: rotate(270deg);
   transform: rotate(270deg);
 }
 .loading > span::before {
   -webkit-transform: rotate(30deg);
   -moz-transform: rotate(30deg);
-  -ms-transform: rotate(30deg);
-  -o-transform: rotate(30deg);
   transform: rotate(30deg);
 }
 .loading > span::after {
   -webkit-transform: rotate(-30deg);
   -moz-transform: rotate(-30deg);
-  -ms-transform: rotate(-30deg);
-  -o-transform: rotate(-30deg);
   transform: rotate(-30deg);
 }
 .loading > span.top {
@@ -175,192 +157,144 @@ section.current .loading,
   0% {
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
-    -ms-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
     transform: rotate(0deg);
   }
 
   8.32% {
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
-    -ms-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
     transform: rotate(0deg);
   }
 
   8.33% {
     -webkit-transform: rotate(30deg);
     -moz-transform: rotate(30deg);
-    -ms-transform: rotate(30deg);
-    -o-transform: rotate(30deg);
     transform: rotate(30deg);
   }
 
   16.65% {
     -webkit-transform: rotate(30deg);
     -moz-transform: rotate(30deg);
-    -ms-transform: rotate(30deg);
-    -o-transform: rotate(30deg);
     transform: rotate(30deg);
   }
 
   16.66% {
     -webkit-transform: rotate(60deg);
     -moz-transform: rotate(60deg);
-    -ms-transform: rotate(60deg);
-    -o-transform: rotate(60deg);
     transform: rotate(60deg);
   }
 
   24.99% {
     -webkit-transform: rotate(60deg);
     -moz-transform: rotate(60deg);
-    -ms-transform: rotate(60deg);
-    -o-transform: rotate(60deg);
     transform: rotate(60deg);
   }
 
   25% {
     -webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
-    -ms-transform: rotate(90deg);
-    -o-transform: rotate(90deg);
     transform: rotate(90deg);
   }
 
   33.32% {
     -webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
-    -ms-transform: rotate(90deg);
-    -o-transform: rotate(90deg);
     transform: rotate(90deg);
   }
 
   33.33% {
     -webkit-transform: rotate(120deg);
     -moz-transform: rotate(120deg);
-    -ms-transform: rotate(120deg);
-    -o-transform: rotate(120deg);
     transform: rotate(120deg);
   }
 
   41.65% {
     -webkit-transform: rotate(120deg);
     -moz-transform: rotate(120deg);
-    -ms-transform: rotate(120deg);
-    -o-transform: rotate(120deg);
     transform: rotate(120deg);
   }
 
   41.66% {
     -webkit-transform: rotate(150deg);
     -moz-transform: rotate(150deg);
-    -ms-transform: rotate(150deg);
-    -o-transform: rotate(150deg);
     transform: rotate(150deg);
   }
 
   49.99% {
     -webkit-transform: rotate(150deg);
     -moz-transform: rotate(150deg);
-    -ms-transform: rotate(150deg);
-    -o-transform: rotate(150deg);
     transform: rotate(150deg);
   }
 
   50% {
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
-    -ms-transform: rotate(180deg);
-    -o-transform: rotate(180deg);
     transform: rotate(180deg);
   }
 
   58.32% {
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
-    -ms-transform: rotate(180deg);
-    -o-transform: rotate(180deg);
     transform: rotate(180deg);
   }
 
   58.33% {
     -webkit-transform: rotate(210deg);
     -moz-transform: rotate(210deg);
-    -ms-transform: rotate(210deg);
-    -o-transform: rotate(210deg);
     transform: rotate(210deg);
   }
 
   66.65% {
     -webkit-transform: rotate(210deg);
     -moz-transform: rotate(210deg);
-    -ms-transform: rotate(210deg);
-    -o-transform: rotate(210deg);
     transform: rotate(210deg);
   }
 
   66.66% {
     -webkit-transform: rotate(240deg);
     -moz-transform: rotate(240deg);
-    -ms-transform: rotate(240deg);
-    -o-transform: rotate(240deg);
     transform: rotate(240deg);
   }
 
   74.99% {
     -webkit-transform: rotate(240deg);
     -moz-transform: rotate(240deg);
-    -ms-transform: rotate(240deg);
-    -o-transform: rotate(240deg);
     transform: rotate(240deg);
   }
 
   75% {
     -webkit-transform: rotate(270deg);
     -moz-transform: rotate(270deg);
-    -ms-transform: rotate(270deg);
-    -o-transform: rotate(270deg);
     transform: rotate(270deg);
   }
 
   83.32% {
     -webkit-transform: rotate(270deg);
     -moz-transform: rotate(270deg);
-    -ms-transform: rotate(270deg);
-    -o-transform: rotate(270deg);
     transform: rotate(270deg);
   }
 
   83.33% {
     -webkit-transform: rotate(300deg);
     -moz-transform: rotate(300deg);
-    -ms-transform: rotate(300deg);
-    -o-transform: rotate(300deg);
     transform: rotate(300deg);
   }
 
   91.65% {
     -webkit-transform: rotate(300deg);
     -moz-transform: rotate(300deg);
-    -ms-transform: rotate(300deg);
-    -o-transform: rotate(300deg);
     transform: rotate(300deg);
   }
 
   91.66% {
     -webkit-transform: rotate(330deg);
     -moz-transform: rotate(330deg);
-    -ms-transform: rotate(330deg);
-    -o-transform: rotate(330deg);
     transform: rotate(330deg);
   }
 
   100% {
     -webkit-transform: rotate(330deg);
     -moz-transform: rotate(330deg);
-    -ms-transform: rotate(330deg);
-    -o-transform: rotate(330deg);
     transform: rotate(330deg);
   }
 }
@@ -368,192 +302,144 @@ section.current .loading,
   0% {
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
-    -ms-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
     transform: rotate(0deg);
   }
 
   8.32% {
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
-    -ms-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
     transform: rotate(0deg);
   }
 
   8.33% {
     -webkit-transform: rotate(30deg);
     -moz-transform: rotate(30deg);
-    -ms-transform: rotate(30deg);
-    -o-transform: rotate(30deg);
     transform: rotate(30deg);
   }
 
   16.65% {
     -webkit-transform: rotate(30deg);
     -moz-transform: rotate(30deg);
-    -ms-transform: rotate(30deg);
-    -o-transform: rotate(30deg);
     transform: rotate(30deg);
   }
 
   16.66% {
     -webkit-transform: rotate(60deg);
     -moz-transform: rotate(60deg);
-    -ms-transform: rotate(60deg);
-    -o-transform: rotate(60deg);
     transform: rotate(60deg);
   }
 
   24.99% {
     -webkit-transform: rotate(60deg);
     -moz-transform: rotate(60deg);
-    -ms-transform: rotate(60deg);
-    -o-transform: rotate(60deg);
     transform: rotate(60deg);
   }
 
   25% {
     -webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
-    -ms-transform: rotate(90deg);
-    -o-transform: rotate(90deg);
     transform: rotate(90deg);
   }
 
   33.32% {
     -webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
-    -ms-transform: rotate(90deg);
-    -o-transform: rotate(90deg);
     transform: rotate(90deg);
   }
 
   33.33% {
     -webkit-transform: rotate(120deg);
     -moz-transform: rotate(120deg);
-    -ms-transform: rotate(120deg);
-    -o-transform: rotate(120deg);
     transform: rotate(120deg);
   }
 
   41.65% {
     -webkit-transform: rotate(120deg);
     -moz-transform: rotate(120deg);
-    -ms-transform: rotate(120deg);
-    -o-transform: rotate(120deg);
     transform: rotate(120deg);
   }
 
   41.66% {
     -webkit-transform: rotate(150deg);
     -moz-transform: rotate(150deg);
-    -ms-transform: rotate(150deg);
-    -o-transform: rotate(150deg);
     transform: rotate(150deg);
   }
 
   49.99% {
     -webkit-transform: rotate(150deg);
     -moz-transform: rotate(150deg);
-    -ms-transform: rotate(150deg);
-    -o-transform: rotate(150deg);
     transform: rotate(150deg);
   }
 
   50% {
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
-    -ms-transform: rotate(180deg);
-    -o-transform: rotate(180deg);
     transform: rotate(180deg);
   }
 
   58.32% {
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
-    -ms-transform: rotate(180deg);
-    -o-transform: rotate(180deg);
     transform: rotate(180deg);
   }
 
   58.33% {
     -webkit-transform: rotate(210deg);
     -moz-transform: rotate(210deg);
-    -ms-transform: rotate(210deg);
-    -o-transform: rotate(210deg);
     transform: rotate(210deg);
   }
 
   66.65% {
     -webkit-transform: rotate(210deg);
     -moz-transform: rotate(210deg);
-    -ms-transform: rotate(210deg);
-    -o-transform: rotate(210deg);
     transform: rotate(210deg);
   }
 
   66.66% {
     -webkit-transform: rotate(240deg);
     -moz-transform: rotate(240deg);
-    -ms-transform: rotate(240deg);
-    -o-transform: rotate(240deg);
     transform: rotate(240deg);
   }
 
   74.99% {
     -webkit-transform: rotate(240deg);
     -moz-transform: rotate(240deg);
-    -ms-transform: rotate(240deg);
-    -o-transform: rotate(240deg);
     transform: rotate(240deg);
   }
 
   75% {
     -webkit-transform: rotate(270deg);
     -moz-transform: rotate(270deg);
-    -ms-transform: rotate(270deg);
-    -o-transform: rotate(270deg);
     transform: rotate(270deg);
   }
 
   83.32% {
     -webkit-transform: rotate(270deg);
     -moz-transform: rotate(270deg);
-    -ms-transform: rotate(270deg);
-    -o-transform: rotate(270deg);
     transform: rotate(270deg);
   }
 
   83.33% {
     -webkit-transform: rotate(300deg);
     -moz-transform: rotate(300deg);
-    -ms-transform: rotate(300deg);
-    -o-transform: rotate(300deg);
     transform: rotate(300deg);
   }
 
   91.65% {
     -webkit-transform: rotate(300deg);
     -moz-transform: rotate(300deg);
-    -ms-transform: rotate(300deg);
-    -o-transform: rotate(300deg);
     transform: rotate(300deg);
   }
 
   91.66% {
     -webkit-transform: rotate(330deg);
     -moz-transform: rotate(330deg);
-    -ms-transform: rotate(330deg);
-    -o-transform: rotate(330deg);
     transform: rotate(330deg);
   }
 
   100% {
     -webkit-transform: rotate(330deg);
     -moz-transform: rotate(330deg);
-    -ms-transform: rotate(330deg);
-    -o-transform: rotate(330deg);
     transform: rotate(330deg);
   }
 }

src/stylesheets/css/Lungo.widgets.notification.css

@@ -22,8 +22,6 @@
   opacity: 0;
   -webkit-transition: all 200ms easeOutSine;
   -moz-transition: all 200ms easeOutSine;
-  -ms-transition: all 200ms easeOutSine;
-  -o-transition: all 200ms easeOutSine;
   transition: all 200ms easeOutSine;
 }
 .notification .window.show {
@@ -46,15 +44,11 @@
   text-align: center;
   -webkit-transform: scale(0.8);
   -moz-transform: scale(0.8);
-  -ms-transform: scale(0.8);
-  -o-transform: scale(0.8);
   transform: scale(0.8);
 }
 .notification .window:not(.special).show {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
-  -ms-transform: scale(1);
-  -o-transform: scale(1);
   transform: scale(1);
 }
 .notification .window:not(.special) .icon {
@@ -76,16 +70,12 @@
   font-size: 1.1em !important;
   -webkit-transform: translate3d(0, -100%, 0);
   -moz-transform: translate3d(0, -100%, 0);
-  -ms-transform: translate3d(0, -100%, 0);
-  -o-transform: translate3d(0, -100%, 0);
   transform: translate3d(0, -100%, 0);
 }
 .notification .window.confirm.show,
 .notification .window.notify.show {
   -webkit-transform: translate3d(0, 0%, 0);
   -moz-transform: translate3d(0, 0%, 0);
-  -ms-transform: translate3d(0, 0%, 0);
-  -o-transform: translate3d(0, 0%, 0);
   transform: translate3d(0, 0%, 0);
 }
 .notification .window.confirm .icon,
@@ -130,8 +120,6 @@
   height: 24px;
   -webkit-border-radius: 14px;
   -moz-border-radius: 14px;
-  -ms-border-radius: 14px;
-  -o-border-radius: 14px;
   border-radius: 14px;
 }
 .notification .window.working span {

src/stylesheets/css/Lungo.widgets.pull.css

@@ -23,8 +23,6 @@ section > [data-control="pull"] > .icon {
   line-height: 48px;
   -webkit-transition: all 300ms;
   -moz-transition: all 300ms;
-  -ms-transition: all 300ms;
-  -o-transition: all 300ms;
   transition: all 300ms;
 }
 section > [data-control="pull"] > .loading {
@@ -40,8 +38,6 @@ section > [data-control="pull"] > strong {
 section > [data-control="pull"].rotate > .icon {
   -webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  -o-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 section > [data-control="pull"].refresh > .icon {