cyaml 0.0.35 → 0.0.42

data/stylesheets/cyaml/core/iehacks.min.sass

@@ -0,0 +1,118 @@
+@media all
+  body
+    o\verflow: visible
+  article, aside, details, figcaption, figure, footer, header, hgroup, nav, section
+    zoom: 1
+  audio, canvas, video
+    *display: inline
+    *zoom: 1
+  img
+    -ms-interpolation-mode: bicubic
+    zoom: 1
+  * html
+    iframe, frame
+      overflow: auto
+    input, frameset
+      overflow: hidden
+    textarea
+      overflow: scroll
+      overflow-x: hidden
+  body, #main
+    position: relative
+  * html body
+    position: static
+  .ym-clearfix
+    zoom: 1
+  * html
+    .ym-col1, .ym-col2, .ym-col3
+      position: relative
+  body
+    height: 1%
+  .ym-wrapper, .ym-wbox, #header, #nav, #main, #footer
+    zoom: 1
+  * html
+    .ym-wrapper, .ym-wbox
+      height: 1%
+      hei\ght: auto
+    #header, #nav, #main, #footer
+      width: 100%
+      wid\th: auto
+  .ym-gbox, .ym-gbox-left, .ym-gbox-right
+    height: 1%
+  * html
+    ul, ol, dl
+      position: relative
+  body ol li
+    display: list-item
+  * html .flexible
+    zoom: 1
+  button, input
+    *overflow: visible
+  table
+    button, input
+      *overflow: auto
+  fieldset, legend
+    position: relative
+  .ym-form
+    zoom: 1
+    div
+      zoom: 1
+      *
+        zoom: 1
+  html .ym-ie-clearing
+    position: static
+    display: block
+    \clear: both
+    width: 100%
+    line-height: 0
+    font-size: 0
+    margin: -2px 0 -1em 1px
+  * html .ym-ie-clearing
+    margin: -2px 0 -1em 0
+  .ym-cbox
+    margin-bottom: -2px
+  html
+    margin-right: 1px
+  * html
+    margin-right: 0
+  .ym-col3
+    position: relative
+
+
+@media screen,projection
+  .ym-col1, .ym-col2
+    display: inline
+  .ym-grid
+    overflow: hidden
+    display: block
+  * html .ym-grid
+    overflow: visible
+  .ym-gl, .ym-gr
+    display: inline
+  .ym-equalize
+    .ym-gl
+      float: left
+      display: inline
+      padding-bottom: 32767px
+      margin-bottom: -32767px
+    .ym-gr
+      float: right
+      margin-left: -5px
+      display: inline
+      padding-bottom: 32767px
+      margin-bottom: -32767px
+  .no-ie-padding
+    .ym-gl, .ym-gr
+      padding-bottom: 0
+      margin-bottom: 0
+  * html
+    .ym-cbox-left, .ym-cbox-right, .ym-cbox
+      word-wrap: break-word
+    .ym-gbox, .ym-gbox-left, .ym-gbox-right
+      word-wrap: break-word
+      o\verflow: hidden
+
+
+@media print
+  .ym-gbox, .ym-gbox-left, .ym-gbox-right, .ym-col3
+    height: 1%

data/stylesheets/cyaml/core/iehacks.sass

@@ -0,0 +1,327 @@
+/**
+ * "Yet Another Multicolumn Layout" - YAML CSS Framework
+ *
+ * (en) YAML core stylesheet - structure-independent bugfixes of IE/Win CSS-bugs
+ * (de) YAML Basis-Stylesheet - Strukturunabhängige Bugfixes von CSS-Bugs des IE/Win
+ *
+ * Don't make any changes in this file!
+ *
+ * @copyright       Copyright 2005-2012, Dirk Jesse
+ * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
+ *                  YAML-CDL (http://www.yaml.de/license.html)
+ * @link            http://www.yaml.de
+ * @package         yaml
+ * @version         v4.0
+ * @revision        $Revision: 686 $
+ * @lastmodified    $Date: 2012-01-22 13:09:37 +0100 (So, 22 Jan 2012) $
+ * @appdef yaml
+
+@media all
+  /**
+   ** (en) Debugging:When you see a green background, IE is getting this stylesheet
+   ** (de) Fehlersuche:Hintergrund leuchtet grün, wenn das Stylesheet korrekt geladen wurde
+   **
+   ** @debug
+   ** @app-yaml-default disabled
+  /* body { background:#0f0; background-image:none; }
+  /**
+   ** Correct inline positioning for unknown HTML5 elements in IE 6 & 7
+   **
+   ** @workaround
+   ** @affected  IE6, IE7
+   ** @css-for   IE6, IE7
+   ** @valid     no
+  /*------------------------------------------------------------------------------------------------------
+  /**
+   ** (en) No need to force scrollbars in older IE's - it even makes problems in IE6 when set
+   ** (de) Scrollbar-Fix wird in alten IE's nicht benötigt, zudem verursacht der Fix Probleme im IE6
+   **
+   ** @workaround
+   ** @affected  IE6, IE7
+   ** @css-for   IE6, IE7
+   ** @valid     no
+  body
+    o\verflow: visible
+  /**
+   ** (en) HTML5 - default media element styles
+   ** (de) HTML5 - Standard Eigenschaften für Media-Elemente
+  article, aside, details, figcaption, figure, footer, header, hgroup, nav, section
+    zoom: 1
+  audio, canvas, video
+    *display: inline
+    *zoom: 1
+  /**
+   ** (en) enable bicubic interpolation of images on scaling
+   ** (de) aktiviert bikubische Interpolation beim Skalieren von Bildern
+  img
+    -ms-interpolation-mode: bicubic
+    zoom: 1
+  /*------------------------------------------------------------------------------------------------------
+  /**
+   ** (en) Fixes IE5.x and IE6 overflow behavior of textarea and input elements elements
+   ** (de) Korrigiert das fehlerhafte overflow-Verhalten von textarea und input-Elementen
+   **
+   ** @workaround
+   ** @affected  IE 5.x/Win, IE6
+   ** @css-for   IE 5.x/Win, IE6
+   ** @valid     no
+  * html
+    iframe, frame
+      overflow: auto
+    input, frameset
+      overflow: hidden
+    textarea
+      overflow: scroll
+      overflow-x: hidden
+  /*------------------------------------------------------------------------------------------------------
+  /**
+   ** (en) Stability fixes with 'position:relative'
+   ** (de) Stabilitätsverbesserungen durch 'position:relative'
+   **
+   ** Essential for correct scaling in IE7 (body). IE5 must get static positioned body instead.
+   ** Helpful to fix several possible problems in older IE versions (#main).
+   **
+   ** @bugfix
+   ** @affected	 IE 5.x/Win, IE6, IE7
+   ** @css-for	 IE 5.x/Win, IE6, IE7
+   ** @valid		 yes
+  body, #main
+    position: relative
+  * html body
+    position: static
+  /*------------------------------------------------------------------------------------------------------
+  /**
+   ** (en) Clearfix adjustents for containing floats in IE
+   ** (de) Clearfix-Anpassung für diverse IE-Versionen
+   **
+   ** @workaround
+   ** @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
+   ** @affected  IE 5.x/Win, IE6, IE7
+   ** @css-for   IE 5.x/Win, IE6, IE7
+   ** @valid     yes
+  .ym-clearfix
+    zoom: 1
+  /* hasLayout aktivieren
+  /*------------------------------------------------------------------------------------------------------
+  /**
+   ** (en) Bugfix for partially displayed column separators
+   ** (de) Bugfix für unvollständige Darstellung der Spalteninhalte / Spaltentrenner
+   **
+   ** @bugfix
+   ** @affected	 IE 5.x/Win, IE6
+   ** @css-for	 IE 5.x/Win, IE6
+   ** @valid		 yes
+  * html
+    .ym-col1, .ym-col2, .ym-col3
+      position: relative
+  /*------------------------------------------------------------------------------------------------------
+  /**
+   ** (en) Preventing several css bugs by forcing "hasLayout"
+   ** (de) Vermeidung verschiedenster Bugs durch Erzwingen von "hasLayout"
+   **
+   ** @workaround
+   ** @affected  IE 5.x/Win, IE6, IE7
+   ** @css-for   IE 5.x/Win, IE6, IE7
+   ** @valid     no
+  body
+    height: 1%
+  .ym-wrapper, .ym-wbox, #header, #nav, #main, #footer
+    zoom: 1
+  /* IE6 & IE7
+  * html
+    .ym-wrapper, .ym-wbox
+      height: 1%
+      hei\ght: auto
+    #header, #nav, #main, #footer
+      width: 100%
+      wid\th: auto
+  /* IE 5.x & IE6 | IE6 only
+  /* IE 5.x & IE6 | IE6 only
+  /* trigger hasLayout to force containing content
+  .ym-gbox, .ym-gbox-left, .ym-gbox-right
+    height: 1%
+  /*------------------------------------------------------------------------------------------------------
+  /**
+   ** Disappearing List-Background Bug
+   ** @see http://www.positioniseverything.net/explorer/ie-listbug.html
+   **
+   ** @bugfix
+   ** @affected  IE 5.x/Win, IE6
+   ** @css-for   IE 5.x/Win, IE6
+   ** @valid     yes
+  * html
+    ul, ol, dl
+      position: relative
+  /*------------------------------------------------------------------------------------------------------
+  /**
+   ** List-Numbering Bug
+   **
+   ** @bugfix
+   ** @affected  IE 5.x/Win, IE6, IE7
+   ** @css-for   IE 5.x/Win, IE6, IE7
+   ** @valid     yes
+  body ol li
+    display: list-item
+  /*------------------------------------------------------------------------------------------------------
+  /**
+   ** Browser-based image scaling (not)
+   **
+   ** @workaround
+   ** @affected  IE 5.x/Win, IE6
+   ** @css-for   IE 5.x/Win, IE6
+   ** @valid     yes
+  * html .flexible
+    zoom: 1
+  /**
+   ** Form related bugfixes
+   **
+   ** @bugfix
+   ** @affected  IE 5.x/Win, IE6, IE7
+   ** @css-for   IE 5.x/Win, IE6, IE7
+   ** @valid     no
+  button, input
+    *overflow: visible
+  table
+    button, input
+      *overflow: auto
+  fieldset, legend
+    position: relative
+  /*------------------------------------------------------------------------------------------------------
+  /**
+   ** Global adjustments/fixes for YAML's form construction kit
+   **
+   ** @workaround
+   ** @affected  IE 5.x/Win, IE6, IE7
+   ** @css-for   IE 5.x/Win, IE6, IE7
+   ** @valid     no
+  .ym-form
+    zoom: 1
+    div
+      zoom: 1
+      *
+        zoom: 1
+  /*------------------------------------------------------------------------------------------------------
+  /**
+   ** (en) Workaround for 'collapsing margin at #col3' when using CSS-property clear
+   **		 Left margin of #col3 collapses when using clear:both in 1-3-2 (or 2-3-1) layout and right column is the
+   **		 longest and left column is the shortest one. For IE6 and IE7 a special workaround was developed
+   **		 in YAML.
+   **
+   ** (de) Workaround für 'kollabierenden Margin an #col3' bei Verwendung der CSS-Eigenschaft clear
+   **		 Der linke Margin von #col3 kollabiert bei der Verwendung von clear:both im 1-3-2 (oder 2-3-1) Layout
+   **		 wenn gleichzeitig die linke Spalte die kürzeste und die rechte die längste ist. Im IE6 und IE7 lässt
+   **		 sich der Bug durch eine speziell für YAML entwickelten Workaround umgehen.
+   **
+   ** @workaround
+   ** @affected  IE 5.x/Win, IE6, IE7
+   ** @css-for   IE 5.x/Win, IE6, IE7
+   ** @valid     no
+  html .ym-ie-clearing
+    /* (en) Only a small help for debugging
+    /* (de) Nur eine kleine Hilfe zur Fehlersuche
+    position: static
+    /* (en) Make container visible in IE
+    /* (de) Container sichtbar machen im IE
+    display: block
+    /* (en) No fix possible in IE5.x, normal clearing used instead
+    /* (de) Kein Fix im IE5.x möglich, daher normales Clearing
+    clear: both
+    /* (en) forcing clearing-like behavior with a simple oversized container in IE6 & IE7
+    /* (de) IE-Clearing mit 100%-DIV für IE6 bzw. übergroßem Container im IE7
+    width: 100%
+    line-height: 0
+    font-size: 0px
+    margin: -2px 0 -1em 1px
+  * html .ym-ie-clearing
+    margin: -2px 0 -1em 0
+  .ym-cbox
+    margin-bottom: -2px
+  /* (en) avoid horizontal scrollbars in IE7 in borderless layouts because of negative margins
+  /* (de) Vermeidung horizontaler Scrollbalken bei randabfallenden Layouts im IE7
+  html
+    margin-right: 1px
+  * html
+    margin-right: 0
+  /* (en) Bugfix:Essential for IE7
+  /* (de) Bugfix:Notwendig im IE7
+  .ym-col3
+    position: relative
+  /*------------------------------------------------------------------------------------------------------
+  /**
+   ** IE/Win Guillotine Bug
+   ** @see http://www.positioniseverything.net/explorer/guillotine.html
+   **
+   ** @workaround
+   ** @affected  IE 5.x/Win, IE6
+   ** @css-for   IE 5.x/Win, IE6
+   ** @valid     yes
+
+
+@media screen, projection
+  /**
+   ** (en) IE-Adjustments for content columns and subtemplates
+   ** (de) IE-Anpassung für Spaltencontainer und Subtemplates
+   **
+   ** Doubled Float-Margin Bug
+   ** @see http://positioniseverything.net/explorer/doubled-margin.html
+   **
+   ** @bugfix
+   ** @affected  IE 5.x/Win, IE6
+   ** @css-for   IE 5.x/Win, IE6, IE7
+   ** @valid     yes
+  .ym-col1, .ym-col2
+    display: inline
+  /* Fix for:"Linking to anchors in elements within the containing block" Problem in IE5.x & IE 6.0
+  .ym-grid
+    overflow: hidden
+    display: block
+  * html .ym-grid
+    overflow: visible
+  .ym-gl, .ym-gr
+    display: inline
+  /* transform CSS tables back into floats
+  .ym-equalize
+    .ym-gl
+      float: left
+      display: inline
+      padding-bottom: 32767px
+      margin-bottom: -32767px
+    .ym-gr
+      float: right
+      margin-left: -5px
+      display: inline
+      padding-bottom: 32767px
+      margin-bottom: -32767px
+  .no-ie-padding
+    .ym-gl, .ym-gr
+      padding-bottom: 0
+      margin-bottom: 0
+  /*------------------------------------------------------------------------------------------------------
+  /**
+   ** Internet Explorer and the Expanding Box Problem
+   ** @see http://www.positioniseverything.net/explorer/expandingboxbug.html
+   **
+   ** @workaround
+   ** @affected  IE 5.x/Win, IE6
+   ** @css-for   IE 5.x/Win, IE6
+   ** @valid     yes
+  * html
+    .ym-cbox-left, .ym-cbox-right, .ym-cbox
+      word-wrap: break-word
+    .ym-gbox, .ym-gbox-left, .ym-gbox-right
+      word-wrap: break-word
+      o\verflow: hidden
+  /* avoid growing widths
+
+
+@media print
+  /**
+   ** (en) Avoid unneeded page breaks of .ym-col3 content in print layout and containing floats.
+   ** (de) Vermeiden von unnötigen Seitenumbrüchen beim Ausdruck der Spalte .ym-col3 und Einschluss von Floats.
+   **
+   ** @bugfix
+   ** @affected  IE7
+   ** @css-for   IE 5.x/Win, IE6, IE7
+   ** @valid     yes
+  .ym-gbox, .ym-gbox-left, .ym-gbox-right, .ym-col3
+    height: 1%

data/stylesheets/cyaml/forms/gray-theme.sass

@@ -0,0 +1,499 @@
+/**
+ * "Yet Another Multicolumn Layout" - YAML CSS Framework
+ *
+ * YAML form theme: "gray-theme"
+ *
+ * @copyright			 Copyright 2005-2012, Dirk Jesse
+ * @license				 CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
+ *                       YAML-CDL (http://www.yaml.de/license.html)
+ * @link                 http://www.yaml.de
+ * @package				 yaml
+ * @version              v4.0
+ * @revision             $Revision: 686 $
+ * @lastmodified         $Date: 2012-01-22 13:09:37 +0100 (So, 22 Jan 2012) $
+
+@media screen and (min-width: 0px)
+  /**
+   ** @section general width settings for formular elements in modern browsers
+   **          switching to CSS3 box modell "border-box" for perfect flexible forms
+   **
+   ** Styling for: <labels>, <input>, <textarea> and <select>
+   **
+  .ym-form
+    input, textarea, select
+      -webkit-box-sizing: border-box
+      -moz-box-sizing: border-box
+      -ms-box-sizing: border-box
+      box-sizing: border-box
+      width: 60%
+  .ym-columnar
+    label
+      -webkit-box-sizing: border-box
+      -moz-box-sizing: border-box
+      -ms-box-sizing: border-box
+      box-sizing: border-box
+    .ym-fbox-select select
+      width: 70%
+    .ym-fbox-text
+      input, textarea
+        width: 70%
+  .ym-full
+    .ym-fbox-select select
+      width: 100%
+    .ym-fbox-text
+      input, textarea
+        width: 100%
+
+
+@media screen, projection
+  /**
+   ** @section general form styling
+   **
+   ** Styling for: <form>, <fieldset>, <legend>, <label> and rows (class="ym-fbox-[xxx]")
+   **
+  .ym-form
+    background: #f4f4f4
+    border: 2px #fff solid
+    margin: 1.5em 0 0 0
+    padding: 0
+    -webkit-box-shadow: 0 0 4px #ddd
+    -moz-box-shadow: 0 0 4px #ddd
+    box-shadow: 0 0 4px #ddd
+    fieldset
+      position: static
+      background: transparent
+      margin: 0.75em 0 0.75em 0
+      padding: 0 0.5em
+    legend
+      background: transparent
+      color: #000
+      font-size: 1.2em
+      line-height: 1.25em
+      font-weight: bold
+      padding: 0 0.5em
+    label
+      color: #666
+      line-height: 1.5em
+  .ym-label
+    color: #666
+    padding-top: 0.25em
+  .ym-form
+    .ym-form div.ym-fbox-check:focus + label
+      color: #000
+    div
+      &.ym-fbox-text, &.ym-fbox-select, &.ym-fbox-check
+        padding: 0.3em 1em
+        margin-bottom: 0.5em
+      &.ym-fbox-button
+        padding: 0.3em 1em
+        margin-bottom: 0.5em
+        background: #ececec
+        border-top: 1px #e0e0e0 solid
+        padding: 0 1em 1.5em 1em
+        margin: 0
+    .ym-gbox
+      padding: 0 0.5em
+      margin-right: 0
+    h6
+      color: #000
+      margin: 1em 0 0 1em
+    .ym-fbox-text
+      input, textarea
+        line-height: 1em
+        padding: 0.25em 0.3em
+        margin-top: -2px
+    .ym-fbox-select select
+      line-height: 1em
+      padding: 0.25em 2px 0.25em 1px
+      margin-top: -2px
+    input, textarea, select
+      font-family: Arial, Helvetica, sans-serif
+      -webkit-box-shadow: inset 0 0 4px #eee
+      -moz-box-shadow: inset 0 0 4px #eee
+      box-shadow: inset 0 0 4px #eee
+    optgroup
+      font-family: Arial, Helvetica, sans-serif
+      -webkit-box-shadow: inset 0 0 4px #eee
+      -moz-box-shadow: inset 0 0 4px #eee
+      box-shadow: inset 0 0 4px #eee
+      font-style: normal
+      font-weight: bold
+    .ym-fbox-text
+      input, textarea
+        border: 1px solid #ddd
+    .ym-fbox-select select
+      border: 1px solid #ddd
+    .ym-message
+      color: #666
+      margin-bottom: 0.5em
+    sup
+      color: #800
+      font-weight: bold
+    input:valid, textarea:valid
+      background-color: #fff
+    input:invalid, textarea:invalid
+      background-color: #fdd
+    .ym-error
+      label
+        color: #800
+        font-weight: normal
+      input, select, textarea
+        border: 1px #800 solid
+      input
+        &:hover, &:focus
+          border: 1px #800 solid !important
+      select
+        &:hover, &:focus
+          border: 1px #800 solid !important
+      textarea
+        &:hover, &:focus
+          border: 1px #800 solid !important
+      .ym-message
+        color: #800
+    div
+      &.ym-fbox-text input:focus, select:focus, textarea:focus, &.ym-fbox-text input:hover, select:hover, textarea:hover, &.ym-fbox-text input:active, select:active, textarea:active
+        border: 1px #888 solid
+        background: #fff
+  /* styling containing DIV elements | Gestaltung der kapselnden DIV-Elemente
+  /**
+   ** @section styling form elements
+   **
+   ** Styling for: Input, Textarea, Select ...
+   **
+  /* styling standard form elements with 'almost' equal flexible width
+  /* Gestaltung der einzelnen Formularelemente mit annähend gleicher Breite
+  /* proportional fonts for all form elements
+  /* General form styling	| Allgemeine Formatierung des Formulars
+  /* Highlight mandatory fields | Pflichtfeldkennzeichnung hervorheben
+  /* form validation highlight colors
+  /**
+   ** @section error messages
+   **
+  /* :hover and :focus status on form fields | Effekt zur Hervorhebung von Formularfeldern bei :hover oder :focus
+  /**
+   ** @section Buttons
+   **
+   ** inspired from: Catalin Rosu (http://www.red-team-design.com/just-another-awesome-css3-buttons)
+  .ym-button
+    display: inline-block
+    white-space: nowrap
+    background-color: #ccc
+    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc)
+    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc)
+    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc)
+    background-image: -o-linear-gradient(top, #eeeeee, #cccccc)
+    background-image: linear-gradient(top, #eeeeee, #cccccc)
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc')
+    border: 1px solid #777
+    -webkit-border-radius: .2em
+    -moz-border-radius: .2em
+    border-radius: .2em
+    -webkit-box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.8) inset, 0 1px 0 rgba(0, 0, 0, 0.15)
+    -moz-box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.8) inset, 0 1px 0 rgba(0, 0, 0, 0.15)
+    box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.8) inset, 0 1px 0 rgba(0, 0, 0, 0.15)
+    color: #333 !important
+    cursor: pointer
+    font: normal 1em / 2em Arial, Helvetica
+    margin: 1.5em 0.75em 0 0
+    padding: 0 1.5em
+    overflow: visible
+    /* removes extra side spacing in IE
+    text-decoration: none !important
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8)
+  .ym-form
+    button
+      display: inline-block
+      white-space: nowrap
+      background-color: #ccc
+      background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc)
+      background-image: -moz-linear-gradient(top, #eeeeee, #cccccc)
+      background-image: -ms-linear-gradient(top, #eeeeee, #cccccc)
+      background-image: -o-linear-gradient(top, #eeeeee, #cccccc)
+      background-image: linear-gradient(top, #eeeeee, #cccccc)
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc')
+      border: 1px solid #777
+      -webkit-border-radius: .2em
+      -moz-border-radius: .2em
+      border-radius: .2em
+      -webkit-box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.8) inset, 0 1px 0 rgba(0, 0, 0, 0.15)
+      -moz-box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.8) inset, 0 1px 0 rgba(0, 0, 0, 0.15)
+      box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.8) inset, 0 1px 0 rgba(0, 0, 0, 0.15)
+      color: #333 !important
+      cursor: pointer
+      font: normal 1em / 2em Arial, Helvetica
+      margin: 1.5em 0.75em 0 0
+      padding: 0 1.5em
+      overflow: visible
+      /* removes extra side spacing in IE
+      text-decoration: none !important
+      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8)
+    input
+      &[type="button"], &[type="reset"], &[type="submit"]
+        display: inline-block
+        white-space: nowrap
+        background-color: #ccc
+        background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc)
+        background-image: -moz-linear-gradient(top, #eeeeee, #cccccc)
+        background-image: -ms-linear-gradient(top, #eeeeee, #cccccc)
+        background-image: -o-linear-gradient(top, #eeeeee, #cccccc)
+        background-image: linear-gradient(top, #eeeeee, #cccccc)
+        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc')
+        border: 1px solid #777
+        -webkit-border-radius: .2em
+        -moz-border-radius: .2em
+        border-radius: .2em
+        -webkit-box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.8) inset, 0 1px 0 rgba(0, 0, 0, 0.15)
+        -moz-box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.8) inset, 0 1px 0 rgba(0, 0, 0, 0.15)
+        box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.8) inset, 0 1px 0 rgba(0, 0, 0, 0.15)
+        color: #333 !important
+        cursor: pointer
+        font: normal 1em / 2em Arial, Helvetica
+        margin: 1.5em 0.75em 0 0
+        padding: 0 1.5em
+        overflow: visible
+        /* removes extra side spacing in IE
+        text-decoration: none !important
+        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8)
+    button:hover
+      background-color: #ddd
+      background-image: -webkit-linear-gradient(top, #fafafa, #dddddd)
+      background-image: -moz-linear-gradient(top, #fafafa, #dddddd)
+      background-image: -ms-linear-gradient(top, #fafafa, #dddddd)
+      background-image: -o-linear-gradient(top, #fafafa, #dddddd)
+      background-image: linear-gradient(top, #fafafa, #dddddd)
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd')
+    input
+      &[type="button"]:hover, &[type="reset"]:hover, &[type="submit"]:hover
+        background-color: #ddd
+        background-image: -webkit-linear-gradient(top, #fafafa, #dddddd)
+        background-image: -moz-linear-gradient(top, #fafafa, #dddddd)
+        background-image: -ms-linear-gradient(top, #fafafa, #dddddd)
+        background-image: -o-linear-gradient(top, #fafafa, #dddddd)
+        background-image: linear-gradient(top, #fafafa, #dddddd)
+        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd')
+  .ym-button:hover
+    background-color: #ddd
+    background-image: -webkit-linear-gradient(top, #fafafa, #dddddd)
+    background-image: -moz-linear-gradient(top, #fafafa, #dddddd)
+    background-image: -ms-linear-gradient(top, #fafafa, #dddddd)
+    background-image: -o-linear-gradient(top, #fafafa, #dddddd)
+    background-image: linear-gradient(top, #fafafa, #dddddd)
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd')
+  .ym-form
+    button:active
+      background-color: #bbb
+      background-image: -webkit-linear-gradient(top, #cccccc, #bbbbbb)
+      background-image: -moz-linear-gradient(top, #cccccc, #bbbbbb)
+      background-image: -ms-linear-gradient(top, #cccccc, #bbbbbb)
+      background-image: -o-linear-gradient(top, #cccccc, #bbbbbb)
+      background-image: linear-gradient(top, #cccccc, #bbbbbb)
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#cccccc', EndColorStr='#bbbbbb')
+      box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2) inset
+      position: relative
+      top: 1px
+    input
+      &[type="button"]:active, &[type="reset"]:active, &[type="submit"]:active
+        background-color: #bbb
+        background-image: -webkit-linear-gradient(top, #cccccc, #bbbbbb)
+        background-image: -moz-linear-gradient(top, #cccccc, #bbbbbb)
+        background-image: -ms-linear-gradient(top, #cccccc, #bbbbbb)
+        background-image: -o-linear-gradient(top, #cccccc, #bbbbbb)
+        background-image: linear-gradient(top, #cccccc, #bbbbbb)
+        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#cccccc', EndColorStr='#bbbbbb')
+        box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2) inset
+        position: relative
+        top: 1px
+  .ym-button:active
+    background-color: #bbb
+    background-image: -webkit-linear-gradient(top, #cccccc, #bbbbbb)
+    background-image: -moz-linear-gradient(top, #cccccc, #bbbbbb)
+    background-image: -ms-linear-gradient(top, #cccccc, #bbbbbb)
+    background-image: -o-linear-gradient(top, #cccccc, #bbbbbb)
+    background-image: linear-gradient(top, #cccccc, #bbbbbb)
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#cccccc', EndColorStr='#bbbbbb')
+    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2) inset
+    position: relative
+    top: 1px
+  .ym-form
+    button:focus
+      outline: 0
+      background: #fafafa
+    input
+      &[type="button"]:focus, &[type="reset"]:focus, &[type="submit"]:focus
+        outline: 0
+        background: #fafafa
+  .ym-button:focus
+    outline: 0
+    background: #fafafa
+  /* pseudo elements don't work on input
+  .ym-form button:before, .ym-button:before
+    background: #ccc
+    background: rgba(0, 0, 0, 0.1)
+    float: left
+    width: 1em
+    text-align: center
+    font-size: 1.5em
+    margin: 0 1em 0 -1em
+    padding: 0 .2em
+    -moz-box-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 rgba(255, 255, 255, 0.5)
+    -webkit-box-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 rgba(255, 255, 255, 0.5)
+    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 rgba(255, 255, 255, 0.5)
+    -moz-border-radius: .15em 0 0 .15em
+    -webkit-border-radius: .15em 0 0 .15em
+    border-radius: .15em 0 0 .15em
+    pointer-events: none
+  .ym-add:before
+    content: "\271A"
+  .ym-delete:before
+    content: "\2718"
+  .ym-edit:before
+    content: "\270E"
+  .ym-email:before
+    content: "\2709"
+  .ym-like:before
+    content: "\2764"
+  .ym-next:before
+    content: "\279C"
+  .ym-play:before
+    content: "\25B6"
+  .ym-save:before
+    content: "\2714"
+  .ym-spark:before
+    content: "\2737"
+  .ym-star:before
+    content: "\2605"
+  /* removes extra inner spacing in Firefox
+  .ym-form
+    button::-moz-focus-inner
+      border: 0
+      padding: 0
+    input
+      &[type=button]::-moz-focus-inner, &[type=reset]::-moz-focus-inner, &[type=submit]::-moz-focus-inner
+        padding: .4em
+    button[disabled]
+      background: #eee
+      color: #aaa !important
+      border-color: #aaa
+      cursor: default
+      text-shadow: none
+      position: static
+      -webkit-box-shadow: none
+      -moz-box-shadow: none
+      box-shadow: none
+      &:hover
+        background: #eee
+        color: #aaa !important
+        border-color: #aaa
+        cursor: default
+        text-shadow: none
+        position: static
+        -webkit-box-shadow: none
+        -moz-box-shadow: none
+        box-shadow: none
+    input
+      &[type=button][disabled], &[type=reset][disabled], &[type=submit][disabled]
+        background: #eee
+        color: #aaa !important
+        border-color: #aaa
+        cursor: default
+        text-shadow: none
+        position: static
+        -webkit-box-shadow: none
+        -moz-box-shadow: none
+        box-shadow: none
+        &:hover
+          background: #eee
+          color: #aaa !important
+          border-color: #aaa
+          cursor: default
+          text-shadow: none
+          position: static
+          -webkit-box-shadow: none
+          -moz-box-shadow: none
+          box-shadow: none
+  /* If line-height can't be modified, then fix Firefox spacing with padding
+  /* The disabled styles
+  .ym-button.ym-disabled
+    background: #eee
+    color: #aaa !important
+    border-color: #aaa
+    cursor: default
+    text-shadow: none
+    position: static
+    -webkit-box-shadow: none
+    -moz-box-shadow: none
+    box-shadow: none
+    &:hover
+      background: #eee
+      color: #aaa !important
+      border-color: #aaa
+      cursor: default
+      text-shadow: none
+      position: static
+      -webkit-box-shadow: none
+      -moz-box-shadow: none
+      box-shadow: none
+  /* ie6 support styles - redefined buttons, because of missing support for attribute selectors
+  * html
+    .ym-button
+      display: inline-block
+      white-space: nowrap
+      background-color: #ccc
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc')
+      border: 1px solid #777
+      color: #333 !important
+      cursor: pointer
+      font: normal 1em / 2em Arial, Helvetica
+      margin: 1.5em 0.75em 0 0
+      padding: 0 1.5em
+      overflow: visible
+      /* removes extra side spacing in IE
+      text-decoration: none !important
+    .ym-form button
+      display: inline-block
+      white-space: nowrap
+      background-color: #ccc
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc')
+      border: 1px solid #777
+      color: #333 !important
+      cursor: pointer
+      font: normal 1em / 2em Arial, Helvetica
+      margin: 1.5em 0.75em 0 0
+      padding: 0 1.5em
+      overflow: visible
+      /* removes extra side spacing in IE
+      text-decoration: none !important
+      &:focus
+        outline: 0
+        background: #fafafa
+    .ym-button:focus
+      outline: 0
+      background: #fafafa
+    .ym-form button:hover, .ym-button:hover
+      background-color: #ddd
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd')
+    .ym-form button:active
+      background-color: #bbb
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#cccccc', EndColorStr='#bbbbbb')
+      position: relative
+      top: 1px
+    .ym-button
+      &:active
+        background-color: #bbb
+        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#cccccc', EndColorStr='#bbbbbb')
+        position: relative
+        top: 1px
+      &.ym-disabled
+        background: #eee
+        color: #aaa !important
+        border-color: #aaa
+        cursor: default
+        text-shadow: none
+        position: static
+        &:hover
+          background: #eee
+          color: #aaa !important
+          border-color: #aaa
+          cursor: default
+          text-shadow: none
+          position: static