    /**
     * @class Global_CSS
     *
     * Global CSS variables and mixins of Sencha Touch.
     */

    /**
     * @var {string} $prefix
     * The prefix to be applied to all CSS selectors. If this is changed, it must also be changed in your
     * JavaScript application.
     */
    $prefix: 'x-' !default;

    /**
     * @var {string} $theme-name
     * The name of the theme. This must match the the output directory of the images.
     * (defaults to 'default')
     */
    $theme-name: 'default' !default;

    /**
     * @var {boolean/string} $relative-image-path-for-uis
     * True to use a relative image path for all new UIs. If true, the path will be "../images/".
     * It can also be a string of the path value.
     * It defaults to false, which means it will look for the images in the ExtJS SDK folder.
     */
    $relative-image-path-for-uis: false !default;

    $color: #000 !default;

    /**
     * @var {string} $font-family
     * The default font-family to be used throughout the theme.
     */
    $font-family: tahoma,arial,verdana,sans-serif !default;

    $font-size  : 12px !default;

    /**
     * @var {string} $base-gradient
     * The base gradient to be used throughout the theme.
     */
    $base-gradient: 'matte' !default;

    /**
     * @var {color} $base-color
     * The base color to be used throughout the theme.
     */
    $base-color   : #C0D4ED !default;
    $neutral-color: #eeeeee !default;

    /**
     * @var {boolean} $include-not-found-images
     * True to include files which are not found when compiling your SASS
     */
    $include-missing-images: true !default;

    /**
     * @var {boolean} $include-ie
     * True to include Internet Explorer specific rules
     */
    $include-ie: true !default;

    /**
     * @var {boolean} $include-ff
     * True to include Firefox specific rules
     */
    $include-ff: true !default;

    /**
     * @var {boolean} $include-chrome
     * True to include Chrome specific rules
     */
    $include-chrome: true !default;

    /**
     * @var {boolean} $include-safari
     * True to include Safari specific rules
     */
    $include-safari: true !default;

    /**
     * @var {boolean} $include-opera
     * True to include Opera specific rules
     */
    $include-opera: true !default;

    /**
     * @var {boolean} $include-webkit
     * True to include Webkit specific rules
     */
    $include-webkit: true !default;

    $supports-border-radius: true !default;
    $supports-gradients: true !default;

    /**
     * @var {boolean} $compile-all
     * True to copile all CSS, even if above include rules are false
     */
    $compile-all: true !default;

    /**
     * @var {boolean} $scope-reset-css
     * True to scope the reset CSS within the $prefix variable.
     */
    $scope-reset-css: false !default;

    /**
     * @var {color} $css-shadow-background-color
     * The base color for CSS shadows
     */
    $css-shadow-background-color: #ccc !default;

    /**
     * @var {color} $include-shadow-images
     * True to include all shadow images.
     */
    $include-shadow-images: true !default;