html {
  padding: 1em;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
  background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
  background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
  background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
  background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
  background: linear-gradient(#dddddd, #ffffff) no-repeat;
}

h1 {
  font-size: 2em;
  margin-bottom: 1em;
}

h2 {
  font-size: 1.4em;
  margin-bottom: .6em;
}

.doc {
  background: #fff;
  border: #ddd;
  padding: 1em;
  color: #aaa;
  margin: 1em;
  font-style: italic;
}
.doc a {
  color: #999;
}

/**
 * Micro clearfix hack
 * 
 * The clearfix hack is a popular way to clear floats without resorting to using presentational markup. This article presents an update to the clearfix method that further reduces the amount of CSS required.
 * Known support: Firefox 2+, Safari 2+, Chrome, Opera 9.27+, IE 6+, IE Mac.
 *
 * @thanks Nicolas Gallagher @necolas
 * @link http://nicolasgallagher.com/micro-clearfix-hack/
 */
/**
 * Note IE7/6 doesn't understand pseudo element as ::before and ::after
 * IE8 need to have :before and not ::before
 * So use only : and not :: if you want to support IE8
 * IE9 Webkit Firefox Opera understand ::
 */
/**
 *
 * @class Gradients
 * @author David Kaneda http://www.davidkaneda.com/
 *
 */
/**
 * Adds a background gradient into a specified selector.
 * 
 *     @include background-gradient(#444, 'glossy');
 * 
 * You can also use color-stops if you want full control of the gradient:
 * 
 *     @include background-gradient(#444, color-stops(#333, #222, #111));
 * 
 * @param {color} $bg-color
 * The base color of the gradient.
 * 
 * @param {string/list} $type
 * The style of the gradient, one of five pre-defined options: matte, bevel, glossy, recessed, or linear:
 *
 *     @include background-gradient(red, 'glossy');
 *
 * It can also accept a list of color-stop values:;
 * 
 *     @include background-gradient(black, color-stops(#333, #111, #000));
 * 
 * @param {string} $direction
 * The direction of the gradient.
 */
/**
 * @class Webfont Icon
 * Great to use with the [Pictos font](http://pictos.drewwilson.com/)
 * 
 */
/**
 * @cfg {color} $webfont-icon-base-color
 * The default color of icons when using the {@link #webfont-icon} mixin.
 * 
 * Defaults to `white`.
 */
/**
 * @cfg {color} $webfont-icon-default-stroke
 * The default color to use on the border of icons, when using the {@link #webfont-icon} mixin.
 * 
 * Defaults to `null`.
 */
/**
 * @cfg {string} $webfont-icon-default-gradient
 * The default gradient to use when using the {@link #webfont-icon} mixin.
 * 
 * Defaults to `matte`.
 */
.webfont-icon-base, .webfont-icon-websymbols, .websymbols:after, .websymbols:before, .webfont-icon-heydings, .heydings:after, .heydings:before, .webfont-icon-iconic, .iconic:after, .iconic:before, .smiley:after, .smiley:before {
  color: transparent;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  -o-background-clip: text;
  -ms-background-clip: text;
  -khtml-background-clip: text;
  background-clip: text;
  position: absolute;
  top: 0;
  left: 0;
  text-indent: 0;
  text-shadow: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

/**
 * Includes a character into the specified selector, styled as an icon.
 * 
 *     @include webfont-icon('a');
 * 
 * @param {color} $color
 * The color of the icon. Defaults to {@link #$webfont-icon-default-background $webfont-icon-default-background}.
 * 
 * @param {measurement} $size
 * The size of the icon
 * 
 * @param {color} $stroke
 * The color of the border. Defautls to {@link #$webfont-icon-default-border $webfont-icon-default-border}.
 * 
 * @param {boolean} $include-staes
 * True to include states for hover and active. Defaults to `true`.
 */
@font-face {
  font-family: "websymbols";
  src: url('../../../../fonts/websymbols/websymbols-regular-webfont.ttf') format('truetype'), url('../../../../fonts/websymbols/websymbols-regular-webfont.eot') format('opentype');
}

.webfont-icon-websymbols, .websymbols:after, .websymbols:before {
  font-family: websymbols;
}

@font-face {
  font-family: "heydings";
  src: url('../../../../fonts/heydings/heydings_icons.ttf') format('truetype');
}

.webfont-icon-heydings, .heydings:after, .heydings:before {
  font-family: heydings;
}

@font-face {
  font-family: "iconic";
  src: url('../../../../fonts/iconic/iconic_stroke.ttf') format('truetype'), url('../../../../fonts/iconic/iconic_stroke.otf') format('opentype');
}

.webfont-icon-iconic, .iconic:after, .iconic:before {
  font-family: iconic;
}

.smiley {
  -moz-background-clip: text;
  -webkit-background-clip: text;
  -o-background-clip: text;
  -ms-background-clip: text;
  -khtml-background-clip: text;
  background-clip: text;
  overflow: visible;
  position: relative;
  height: 500px;
  display: inline-block;
  line-height: 500px;
  text-indent: -9000px;
  width: 500px;
  display: block;
}
.smiley:after, .smiley:before {
  font-size: 500px;
  content: "\263a";
  background-image: none;
  background-color: #cfab4f;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dfc88b), color-stop(3%, #d4b563), color-stop(100%, #caa13b));
  background-image: -webkit-linear-gradient(top, #dfc88b, #d4b563 3%, #caa13b);
  background-image: -moz-linear-gradient(top, #dfc88b, #d4b563 3%, #caa13b);
  background-image: -o-linear-gradient(top, #dfc88b, #d4b563 3%, #caa13b);
  background-image: -ms-linear-gradient(top, #dfc88b, #d4b563 3%, #caa13b);
  background-image: linear-gradient(top, #dfc88b, #d4b563 3%, #caa13b);
}
.smiley:before {
  background: none;
  text-shadow: rgba(0, 0, 0, 0.5) 0 1px 3px;
}
.smiley:hover:before {
  text-shadow: rgba(0, 0, 0, 0.5) 0 1px 3px, #3778e5 0 0 10px;
}
.smiley:hover:after {
  background-image: none;
  background-color: #3778e5;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7ba6ee), color-stop(3%, #4e87e8), color-stop(100%, #2069e2));
  background-image: -webkit-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
  background-image: -moz-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
  background-image: -o-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
  background-image: -ms-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
  background-image: linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
}
.smiley:active:before {
  text-shadow: rgba(0, 0, 0, 0.5) 0 1px 3px, #3778e5 0 0 10px;
}
.smiley:active:after {
  background-image: none;
  background-color: #1d64dc;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #174faf), color-stop(10%, #1a5ac5), color-stop(65%, #1d64dc), color-stop(100%, #1d65de));
  background-image: -webkit-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
  background-image: -moz-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
  background-image: -o-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
  background-image: -ms-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
  background-image: linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
}

.heydings {
  -moz-background-clip: text;
  -webkit-background-clip: text;
  -o-background-clip: text;
  -ms-background-clip: text;
  -khtml-background-clip: text;
  background-clip: text;
  overflow: visible;
  position: relative;
  height: 100px;
  display: inline-block;
  line-height: 100px;
  text-indent: -9000px;
  width: 100px;
}
.heydings:after, .heydings:before {
  font-size: 100px;
  content: attr(data-icon);
  background-image: none;
  background-color: #999999;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bfbfbf), color-stop(3%, #a6a6a6), color-stop(100%, #8c8c8c));
  background-image: -webkit-linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
  background-image: -moz-linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
  background-image: -o-linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
  background-image: -ms-linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
  background-image: linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
}
.heydings:before {
  background: none;
  text-shadow: rgba(0, 0, 0, 0.5) 0 1px 3px;
}
.heydings:hover:before {
  text-shadow: rgba(0, 0, 0, 0.5) 0 1px 3px, #3778e5 0 0 10px;
}
.heydings:hover:after {
  background-image: none;
  background-color: #3778e5;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7ba6ee), color-stop(3%, #4e87e8), color-stop(100%, #2069e2));
  background-image: -webkit-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
  background-image: -moz-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
  background-image: -o-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
  background-image: -ms-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
  background-image: linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
}
.heydings:active:before {
  text-shadow: rgba(0, 0, 0, 0.5) 0 1px 3px, #3778e5 0 0 10px;
}
.heydings:active:after {
  background-image: none;
  background-color: #1d64dc;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #174faf), color-stop(10%, #1a5ac5), color-stop(65%, #1d64dc), color-stop(100%, #1d65de));
  background-image: -webkit-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
  background-image: -moz-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
  background-image: -o-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
  background-image: -ms-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
  background-image: linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
}

.websymbols {
  -moz-background-clip: text;
  -webkit-background-clip: text;
  -o-background-clip: text;
  -ms-background-clip: text;
  -khtml-background-clip: text;
  background-clip: text;
  overflow: visible;
  position: relative;
  height: 100px;
  display: inline-block;
  line-height: 100px;
  text-indent: -9000px;
  width: 100px;
}
.websymbols:after, .websymbols:before {
  font-size: 100px;
  content: attr(data-icon);
  background-image: none;
  background-color: #999999;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bfbfbf), color-stop(3%, #a6a6a6), color-stop(100%, #8c8c8c));
  background-image: -webkit-linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
  background-image: -moz-linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
  background-image: -o-linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
  background-image: -ms-linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
  background-image: linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
}
.websymbols:before {
  background: none;
  text-shadow: rgba(0, 0, 0, 0.5) 0 1px 3px;
}
.websymbols:hover:before {
  text-shadow: rgba(0, 0, 0, 0.5) 0 1px 3px, #3778e5 0 0 10px;
}
.websymbols:hover:after {
  background-image: none;
  background-color: #3778e5;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7ba6ee), color-stop(3%, #4e87e8), color-stop(100%, #2069e2));
  background-image: -webkit-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
  background-image: -moz-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
  background-image: -o-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
  background-image: -ms-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
  background-image: linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
}
.websymbols:active:before {
  text-shadow: rgba(0, 0, 0, 0.5) 0 1px 3px, #3778e5 0 0 10px;
}
.websymbols:active:after {
  background-image: none;
  background-color: #1d64dc;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #174faf), color-stop(10%, #1a5ac5), color-stop(65%, #1d64dc), color-stop(100%, #1d65de));
  background-image: -webkit-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
  background-image: -moz-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
  background-image: -o-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
  background-image: -ms-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
  background-image: linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
}

.iconic {
  -moz-background-clip: text;
  -webkit-background-clip: text;
  -o-background-clip: text;
  -ms-background-clip: text;
  -khtml-background-clip: text;
  background-clip: text;
  overflow: visible;
  position: relative;
  height: 100px;
  display: inline-block;
  line-height: 100px;
  text-indent: -9000px;
  width: 100px;
}
.iconic:after, .iconic:before {
  font-size: 100px;
  content: attr(data-icon);
  background-image: none;
  background-color: #999999;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bfbfbf), color-stop(3%, #a6a6a6), color-stop(100%, #8c8c8c));
  background-image: -webkit-linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
  background-image: -moz-linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
  background-image: -o-linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
  background-image: -ms-linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
  background-image: linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
}
.iconic:before {
  background: none;
  text-shadow: rgba(0, 0, 0, 0.5) 0 1px 3px;
}
.iconic:hover:before {
  text-shadow: rgba(0, 0, 0, 0.5) 0 1px 3px, #3778e5 0 0 10px;
}
.iconic:hover:after {
  background-image: none;
  background-color: #3778e5;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7ba6ee), color-stop(3%, #4e87e8), color-stop(100%, #2069e2));
  background-image: -webkit-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
  background-image: -moz-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
  background-image: -o-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
  background-image: -ms-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
  background-image: linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
}
.iconic:active:before {
  text-shadow: rgba(0, 0, 0, 0.5) 0 1px 3px, #3778e5 0 0 10px;
}
.iconic:active:after {
  background-image: none;
  background-color: #1d64dc;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #174faf), color-stop(10%, #1a5ac5), color-stop(65%, #1d64dc), color-stop(100%, #1d65de));
  background-image: -webkit-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
  background-image: -moz-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
  background-image: -o-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
  background-image: -ms-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
  background-image: linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
}