archetype 0.0.1.pre.3.f9dde24 → 0.0.1.pre.3.90263a7

data/stylesheets/archetype/styleguide/_helpers.scss

@@ -77,10 +77,7 @@
 // @param     $type {List} the glpyh data
 // @return    {List} the parameters needed for glyph-icon()
 @function _styleguideGetAlertGlyph($type: $CONFIG_GLYPH_ALERT_NOTIFY) {
-  $offset: _styleguideGetAlertGlyphOffset($type);
-  $top: nth($offset, 1);
-  $left: nth($offset, 2);
-  @return (nth($type, 1), nth($type, 2), nth($type, 3), before, 'position:absolute;line-height:1;top:#{$top};left:#{$left};')
+  @return (nth($type, 1), nth($type, 2), nth($type, 3), before, '')
 }
 
 

data/stylesheets/archetype/styleguide/components/_alerts.scss

@@ -23,7 +23,7 @@ $a-blackhole: styleguide-add-component($STYLEGUIDE_ALERTS_ID, $STYLEGUIDE_ALERTS
     padding               $CONFIG_DIM_ALERTS_SPACING,
     glyph-icon            _styleguideGetAlertGlyph($CONFIG_GLYPH_ALERT_NOTIFY),
     (selectors, (
-      ('&:before', (
+      ($CORE_GLYPH_SELECTOR_VAR, (
         position          absolute,
         top               nth(_styleguideGetAlertGlyphOffset($CONFIG_GLYPH_ALERT_NOTIFY), 1),
         left              nth(_styleguideGetAlertGlyphOffset($CONFIG_GLYPH_ALERT_NOTIFY), 2),

data/stylesheets/archetype/styleguide/components/_buttons.scss

@@ -112,6 +112,7 @@ $a-blackhole: styleguide-add-component($STYLEGUIDE_BUTTONS_ID,  $STYLEGUIDE_BUTT
   )),
   // IMPORTANCE in CONTEXTS
   ((primary in-dark), (
+    inherit (in-dark),
     (states, (
       (hover, (
         background-color    $CONFIG_COLOR_BG_BUTTON_PRIMARY_DARK_HOVER,
@@ -119,10 +120,10 @@ $a-blackhole: styleguide-add-component($STYLEGUIDE_BUTTONS_ID,  $STYLEGUIDE_BUTT
         background-image    $CONFIG_GRADIENT_BUTTON_PRIMARY_DARK_HOVER
       )),
       nil
-    )),
-    nil
+    ))
   )),
   ((secondary in-dark), (
+    inherit (in-dark),
     (states, (
       (hover, (
         background-color    $CONFIG_COLOR_BG_BUTTON_SECONDARY_DARK_HOVER,
@@ -130,10 +131,10 @@ $a-blackhole: styleguide-add-component($STYLEGUIDE_BUTTONS_ID,  $STYLEGUIDE_BUTT
         background-image    $CONFIG_GRADIENT_BUTTON_SECONDARY_DARK_HOVER
       )),
       nil
-    )),
-    nil
+    ))
   )),
   ((spotlight in-dark), (
+    inherit (in-dark),
     (states, (
       (hover, (
         background-color    $CONFIG_COLOR_BG_BUTTON_SPOTLIGHT_DARK_HOVER,
@@ -141,8 +142,7 @@ $a-blackhole: styleguide-add-component($STYLEGUIDE_BUTTONS_ID,  $STYLEGUIDE_BUTT
         background-image    $CONFIG_GRADIENT_BUTTON_SPOTLIGHT_DARK_HOVER
       )),
       nil
-    )),
-    nil
+    ))
   )),
   // in the punchcut context (inherit from in-dark)
   (primary in-punchcut, (

data/stylesheets/archetype/styleguide/components/_closes.scss

@@ -21,9 +21,9 @@ $a-blackhole: styleguide-add-component($STYLEGUIDE_CLOSES_ID,  $STYLEGUIDE_CLOSE
     width               nth($CONFIG_GLYPH_CLOSE, 4),
     height              nth($CONFIG_GLYPH_CLOSE, 4),
     text-indent         (nth($CONFIG_GLYPH_CLOSE, 4) + 1px),
-    glyph-icon          (nth($CONFIG_GLYPH_CLOSE, 1), nth($CONFIG_GLYPH_CLOSE, 2), nth($CONFIG_GLYPH_CLOSE, 3), before, 'text-decoration:none;vertical-align:top;line-height:1;position:absolute;top:0;right:0;'),
+    glyph-icon          (nth($CONFIG_GLYPH_CLOSE, 1), nth($CONFIG_GLYPH_CLOSE, 2), nth($CONFIG_GLYPH_CLOSE, 3), before, 'text-decoration:none;'),
     (selectors, (
-      ('&:before', (
+      ($CORE_GLYPH_SELECTOR_VAR, (
         vertical-align  top,
         line-height     1,
         position        absolute,

data/stylesheets/archetype/util/_styles.scss

@@ -76,6 +76,10 @@
     @else if($property == stretch)              { @include stretch(); }
     // appearance
     @else if($property == appearance)           { @include appearance($value); }
+    // unhide-element
+    @else if($property == unhide-element)       { @include unhide-element(); }
+    // ellipsis
+    @else if($property == ellipsis)             { @include ellipsis(); }
     // bunch of RTL support
     @else if($property == margin)               { @include margin($value); }
     @else if($property == margin-left)          { @include margin-left($value); }
@@ -203,7 +207,7 @@
       $state: first-value-of($state);
       @if(index(-compass-list($states), $state) or $states == true) {
         #{_getStateSelector($state)} {
-          @include _toStyles2($value, true, true, $exclude);
+          @include to-styles($value, true, true, $exclude);
         }
       }
     }
@@ -212,8 +216,8 @@
   @if length($selectors-data) > 0 {
     @each $selector in $selectors-data {
       @if(index(-compass-list($selectors), $selector) or $selectors == true) {
-        #{first-value-of($selector)} {
-          @include _toStyles2(nth($selector, 2), true, true, $exclude);
+        #{_getSelectorSelector($selector)} {
+          @include to-styles(nth($selector, 2), true, true, $exclude);
         }
       }
     }
@@ -292,6 +296,17 @@
   @return $selector;
 }
 
+@function _getSelectorSelector($selector) {
+  $selector: first-value-of(-compass-list($selector));
+  @if $selector == $CORE_GLYPH_SELECTOR_VAR {
+    $selector: $archetype-glyph-selector;
+  }
+  @elseif $selector == $CORE_GLYPH_SELECTOR_VAR {
+    $selector: $archetype-pseudo-selector;
+  }
+  @return $selector;
+}
+
 // mixin for outputting filters in legacy IE
 // @mixin     ie-filter
 // @param     $value {String|List} a set of filters to output, sans `progid:DXImageTransform.Microsoft` prefix

data/stylesheets/archetype/util/_targeting.scss

@@ -86,6 +86,7 @@
 // @param     $value {*} the CSS value
 // @param     $merge {Bool} should the class name be merged e.g. `.ie8.example` vs `.ie8 .example`
 // @param     $inline {Bool} if set to false, don't use inline hacks even if available
+// @content
 // @usage:
 // =target-browser(ie 8, border, 10px);
 // =target-browser(ie lte 7, padding, 0);
@@ -178,6 +179,7 @@
 // @param     $property {String} the CSS property
 // @param     $value {*} the CSS value
 // @param     $merge {Bool} should the class name be merged e.g. `.os-win.example` vs `.os-win .example`
+// @content
 @mixin target-os($os: (), $property: nil, $value: nil, $merge: false) {
   $os: -compass-list($os);
   $using: if($merge, '&', ' &');

data/templates/_theme/_components.scss

@@ -0,0 +1,3 @@
+// import your components here!
+// e.g.
+// @import "components/my_component";

data/templates/_theme/_config.scss

@@ -0,0 +1 @@
+$CONFIG_THEME: "__THEME_NAME__" !default;

data/templates/_theme/_core.scss

@@ -0,0 +1,13 @@
+// setup theme configs and styles
+@import "config";
+@import "primitives";
+
+// extend the __THEME_EXTENDS__ theme
+@import "__THEME_EXTENDS__";
+//@import "../__THEME_EXTENDS__/core";
+
+// import helper functions
+@import "helpers";
+
+// finally initialize our custom components
+@import "components";

data/templates/_theme/_helpers.scss

@@ -0,0 +1 @@
+// helper methods go here

data/templates/_theme/_primitives.scss

@@ -0,0 +1,3 @@
+// import your primitives here!
+// e.g.
+// @import "primitives/my_primitive";

data/templates/_theme/components/README

@@ -0,0 +1 @@
+// place your component partials in this directory

data/templates/_theme/primitives/README

@@ -0,0 +1 @@
+// place your primitive partials in this directory

data/test/fixtures/stylesheets/archetype/expected/styleguide/alerts.css

@@ -0,0 +1,675 @@
+.alert.error {
+  background-color: #da4f49;
+  background-repeat: no-repeat;
+  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ee5f5b), color-stop(100%, #bd362f));
+  background: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
+  background: -moz-linear-gradient(top, #ee5f5b, #bd362f);
+  background: -o-linear-gradient(top, #ee5f5b, #bd362f);
+  background: linear-gradient(top, #ee5f5b, #bd362f);
+  -webkit-box-shadow: 0 0 0 1px #bd362f, 0 1px 2px rgba(0, 0, 0, 0.45);
+  -moz-box-shadow: 0 0 0 1px #bd362f, 0 1px 2px rgba(0, 0, 0, 0.45);
+  box-shadow: 0 0 0 1px #bd362f, 0 1px 2px rgba(0, 0, 0, 0.45);
+  overflow: hidden;
+  display: block;
+  color: white;
+  font-size: 15px;
+  line-height: 20px;
+  position: relative;
+  padding: 10px 20px 10px 50px;
+  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome-0.0.1', 'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:36px;color:inherit;",this.insertBefore(this.el));
+}
+.alert.error:before {
+  font-family: "FontAwesome-0.0.1", "FontAwesome";
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  speak: none;
+  font-size: 36px;
+  color: inherit;
+  content: "\f057";
+}
+.alert.error:before, .alert.error #ie-pseudo-archetype-uid-RANDOM_UID {
+  position: absolute;
+  top: 6px;
+  left: 11px;
+  line-height: 1;
+}
+.alert.error .dismiss {
+  color: white;
+  background: transparent none;
+  padding: 0 1px 0 0;
+  border: 0;
+  margin: 0;
+  cursor: pointer;
+  text-decoration: none;
+  position: absolute;
+  overflow: hidden;
+  top: 10px;
+  right: 10px;
+  width: 11px;
+  height: 11px;
+  text-indent: 12px;
+  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome-0.0.1', 'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:11px;color:inherit;text-decoration:none;",this.insertBefore(this.el));
+}
+.alert.error .dismiss:before {
+  font-family: "FontAwesome-0.0.1", "FontAwesome";
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  speak: none;
+  font-size: 11px;
+  color: inherit;
+  content: "\f00d";
+}
+.alert.error .dismiss.hover, .alert.error .dismiss:hover, .alert.error .dismiss.focus, .alert.error .dismiss:focus {
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
+}
+.alert.error .dismiss:before, .alert.error .dismiss #ie-pseudo-archetype-uid-RANDOM_UID {
+  vertical-align: top;
+  line-height: 1;
+  position: absolute;
+  top: 0;
+  right: 0;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.alert.success {
+  background-color: #5bb75b;
+  background-repeat: no-repeat;
+  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #62c462), color-stop(100%, #51a351));
+  background: -webkit-linear-gradient(top, #62c462, #51a351);
+  background: -moz-linear-gradient(top, #62c462, #51a351);
+  background: -o-linear-gradient(top, #62c462, #51a351);
+  background: linear-gradient(top, #62c462, #51a351);
+  -webkit-box-shadow: 0 0 0 1px #51a351, 0 1px 2px rgba(0, 0, 0, 0.45);
+  -moz-box-shadow: 0 0 0 1px #51a351, 0 1px 2px rgba(0, 0, 0, 0.45);
+  box-shadow: 0 0 0 1px #51a351, 0 1px 2px rgba(0, 0, 0, 0.45);
+  overflow: hidden;
+  display: block;
+  color: white;
+  font-size: 15px;
+  line-height: 20px;
+  position: relative;
+  padding: 10px 20px 10px 50px;
+  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome-0.0.1', 'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:36px;color:inherit;",this.insertBefore(this.el));
+}
+.alert.success:before {
+  font-family: "FontAwesome-0.0.1", "FontAwesome";
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  speak: none;
+  font-size: 36px;
+  color: inherit;
+  content: "\f058";
+}
+.alert.success:before, .alert.success #ie-pseudo-archetype-uid-RANDOM_UID {
+  position: absolute;
+  top: 6px;
+  left: 11px;
+  line-height: 1;
+}
+.alert.success .dismiss {
+  color: white;
+  background: transparent none;
+  padding: 0 1px 0 0;
+  border: 0;
+  margin: 0;
+  cursor: pointer;
+  text-decoration: none;
+  position: absolute;
+  overflow: hidden;
+  top: 10px;
+  right: 10px;
+  width: 11px;
+  height: 11px;
+  text-indent: 12px;
+  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome-0.0.1', 'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:11px;color:inherit;text-decoration:none;",this.insertBefore(this.el));
+}
+.alert.success .dismiss:before {
+  font-family: "FontAwesome-0.0.1", "FontAwesome";
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  speak: none;
+  font-size: 11px;
+  color: inherit;
+  content: "\f00d";
+}
+.alert.success .dismiss.hover, .alert.success .dismiss:hover, .alert.success .dismiss.focus, .alert.success .dismiss:focus {
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
+}
+.alert.success .dismiss:before, .alert.success .dismiss #ie-pseudo-archetype-uid-RANDOM_UID {
+  vertical-align: top;
+  line-height: 1;
+  position: absolute;
+  top: 0;
+  right: 0;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.alert.notice {
+  background-color: #49afcd;
+  background-repeat: no-repeat;
+  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5bc0de), color-stop(100%, #2f96b4));
+  background: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
+  background: -moz-linear-gradient(top, #5bc0de, #2f96b4);
+  background: -o-linear-gradient(top, #5bc0de, #2f96b4);
+  background: linear-gradient(top, #5bc0de, #2f96b4);
+  -webkit-box-shadow: 0 0 0 1px #2f96b4, 0 1px 2px rgba(0, 0, 0, 0.45);
+  -moz-box-shadow: 0 0 0 1px #2f96b4, 0 1px 2px rgba(0, 0, 0, 0.45);
+  box-shadow: 0 0 0 1px #2f96b4, 0 1px 2px rgba(0, 0, 0, 0.45);
+  overflow: hidden;
+  display: block;
+  color: white;
+  font-size: 15px;
+  line-height: 20px;
+  position: relative;
+  padding: 10px 20px 10px 50px;
+  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome-0.0.1', 'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:36px;color:inherit;",this.insertBefore(this.el));
+}
+.alert.notice:before {
+  font-family: "FontAwesome-0.0.1", "FontAwesome";
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  speak: none;
+  font-size: 36px;
+  color: inherit;
+  content: "\f05a";
+}
+.alert.notice:before, .alert.notice #ie-pseudo-archetype-uid-RANDOM_UID {
+  position: absolute;
+  top: 6px;
+  left: 11px;
+  line-height: 1;
+}
+.alert.notice .dismiss {
+  color: white;
+  background: transparent none;
+  padding: 0 1px 0 0;
+  border: 0;
+  margin: 0;
+  cursor: pointer;
+  text-decoration: none;
+  position: absolute;
+  overflow: hidden;
+  top: 10px;
+  right: 10px;
+  width: 11px;
+  height: 11px;
+  text-indent: 12px;
+  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome-0.0.1', 'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:11px;color:inherit;text-decoration:none;",this.insertBefore(this.el));
+}
+.alert.notice .dismiss:before {
+  font-family: "FontAwesome-0.0.1", "FontAwesome";
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  speak: none;
+  font-size: 11px;
+  color: inherit;
+  content: "\f00d";
+}
+.alert.notice .dismiss.hover, .alert.notice .dismiss:hover, .alert.notice .dismiss.focus, .alert.notice .dismiss:focus {
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
+}
+.alert.notice .dismiss:before, .alert.notice .dismiss #ie-pseudo-archetype-uid-RANDOM_UID {
+  vertical-align: top;
+  line-height: 1;
+  position: absolute;
+  top: 0;
+  right: 0;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.alert.yield {
+  background-color: #faa732;
+  background-repeat: no-repeat;
+  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fbb450), color-stop(100%, #f89406));
+  background: -webkit-linear-gradient(top, #fbb450, #f89406);
+  background: -moz-linear-gradient(top, #fbb450, #f89406);
+  background: -o-linear-gradient(top, #fbb450, #f89406);
+  background: linear-gradient(top, #fbb450, #f89406);
+  -webkit-box-shadow: 0 0 0 1px #f89406, 0 1px 2px rgba(0, 0, 0, 0.45);
+  -moz-box-shadow: 0 0 0 1px #f89406, 0 1px 2px rgba(0, 0, 0, 0.45);
+  box-shadow: 0 0 0 1px #f89406, 0 1px 2px rgba(0, 0, 0, 0.45);
+  overflow: hidden;
+  display: block;
+  color: white;
+  font-size: 15px;
+  line-height: 20px;
+  position: relative;
+  padding: 10px 20px 10px 50px;
+  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome-0.0.1', 'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:36px;color:inherit;",this.insertBefore(this.el));
+}
+.alert.yield:before {
+  font-family: "FontAwesome-0.0.1", "FontAwesome";
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  speak: none;
+  font-size: 36px;
+  color: inherit;
+  content: "\f071";
+}
+.alert.yield:before, .alert.yield #ie-pseudo-archetype-uid-RANDOM_UID {
+  position: absolute;
+  top: 6px;
+  left: 11px;
+  line-height: 1;
+}
+.alert.yield .dismiss {
+  color: white;
+  background: transparent none;
+  padding: 0 1px 0 0;
+  border: 0;
+  margin: 0;
+  cursor: pointer;
+  text-decoration: none;
+  position: absolute;
+  overflow: hidden;
+  top: 10px;
+  right: 10px;
+  width: 11px;
+  height: 11px;
+  text-indent: 12px;
+  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome-0.0.1', 'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:11px;color:inherit;text-decoration:none;",this.insertBefore(this.el));
+}
+.alert.yield .dismiss:before {
+  font-family: "FontAwesome-0.0.1", "FontAwesome";
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  speak: none;
+  font-size: 11px;
+  color: inherit;
+  content: "\f00d";
+}
+.alert.yield .dismiss.hover, .alert.yield .dismiss:hover, .alert.yield .dismiss.focus, .alert.yield .dismiss:focus {
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
+}
+.alert.yield .dismiss:before, .alert.yield .dismiss #ie-pseudo-archetype-uid-RANDOM_UID {
+  vertical-align: top;
+  line-height: 1;
+  position: absolute;
+  top: 0;
+  right: 0;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.alert.error {
+  background-color: #da4f49;
+  background-repeat: no-repeat;
+  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ee5f5b), color-stop(100%, #bd362f));
+  background: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
+  background: -moz-linear-gradient(top, #ee5f5b, #bd362f);
+  background: -o-linear-gradient(top, #ee5f5b, #bd362f);
+  background: linear-gradient(top, #ee5f5b, #bd362f);
+  -webkit-box-shadow: 0 0 0 1px #bd362f, 0 1px 2px rgba(0, 0, 0, 0.45);
+  -moz-box-shadow: 0 0 0 1px #bd362f, 0 1px 2px rgba(0, 0, 0, 0.45);
+  box-shadow: 0 0 0 1px #bd362f, 0 1px 2px rgba(0, 0, 0, 0.45);
+  overflow: hidden;
+  display: block;
+  color: white;
+  font-size: 15px;
+  line-height: 20px;
+  position: relative;
+  padding: 10px 20px 10px 50px;
+  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.insertBefore(this.el));
+}
+.alert.error:before {
+  font-family: "FontAwesome-0.0.1", "FontAwesome";
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  speak: none;
+  font-size: 36px;
+  color: inherit;
+  content: "\f057";
+}
+.alert.error #ie-pseudo-archetype-uid-RANDOM_UID {
+  font-family: 'FontAwesome-0.0.1', 'FontAwesome';
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  font-size: 36px;
+  color: inherit;
+}
+.alert.error:before, .alert.error #ie-pseudo-archetype-uid-RANDOM_UID {
+  position: absolute;
+  top: 6px;
+  left: 11px;
+  line-height: 1;
+}
+.alert.error .dismiss {
+  color: white;
+  background: transparent none;
+  padding: 0 1px 0 0;
+  border: 0;
+  margin: 0;
+  cursor: pointer;
+  text-decoration: none;
+  position: absolute;
+  overflow: hidden;
+  top: 10px;
+  right: 10px;
+  width: 11px;
+  height: 11px;
+  text-indent: 12px;
+  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.insertBefore(this.el));
+}
+.alert.error .dismiss:before {
+  font-family: "FontAwesome-0.0.1", "FontAwesome";
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  speak: none;
+  font-size: 11px;
+  color: inherit;
+  content: "\f00d";
+}
+.alert.error .dismiss #ie-pseudo-archetype-uid-RANDOM_UID {
+  font-family: 'FontAwesome-0.0.1', 'FontAwesome';
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  font-size: 11px;
+  color: inherit;
+  text-decoration: none;
+}
+.alert.error .dismiss.hover, .alert.error .dismiss:hover, .alert.error .dismiss.focus, .alert.error .dismiss:focus {
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
+}
+.alert.error .dismiss:before, .alert.error .dismiss #ie-pseudo-archetype-uid-RANDOM_UID {
+  vertical-align: top;
+  line-height: 1;
+  position: absolute;
+  top: 0;
+  right: 0;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.alert.success {
+  background-color: #5bb75b;
+  background-repeat: no-repeat;
+  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #62c462), color-stop(100%, #51a351));
+  background: -webkit-linear-gradient(top, #62c462, #51a351);
+  background: -moz-linear-gradient(top, #62c462, #51a351);
+  background: -o-linear-gradient(top, #62c462, #51a351);
+  background: linear-gradient(top, #62c462, #51a351);
+  -webkit-box-shadow: 0 0 0 1px #51a351, 0 1px 2px rgba(0, 0, 0, 0.45);
+  -moz-box-shadow: 0 0 0 1px #51a351, 0 1px 2px rgba(0, 0, 0, 0.45);
+  box-shadow: 0 0 0 1px #51a351, 0 1px 2px rgba(0, 0, 0, 0.45);
+  overflow: hidden;
+  display: block;
+  color: white;
+  font-size: 15px;
+  line-height: 20px;
+  position: relative;
+  padding: 10px 20px 10px 50px;
+  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.insertBefore(this.el));
+}
+.alert.success:before {
+  font-family: "FontAwesome-0.0.1", "FontAwesome";
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  speak: none;
+  font-size: 36px;
+  color: inherit;
+  content: "\f058";
+}
+.alert.success #ie-pseudo-archetype-uid-RANDOM_UID {
+  font-family: 'FontAwesome-0.0.1', 'FontAwesome';
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  font-size: 36px;
+  color: inherit;
+}
+.alert.success:before, .alert.success #ie-pseudo-archetype-uid-RANDOM_UID {
+  position: absolute;
+  top: 6px;
+  left: 11px;
+  line-height: 1;
+}
+.alert.success .dismiss {
+  color: white;
+  background: transparent none;
+  padding: 0 1px 0 0;
+  border: 0;
+  margin: 0;
+  cursor: pointer;
+  text-decoration: none;
+  position: absolute;
+  overflow: hidden;
+  top: 10px;
+  right: 10px;
+  width: 11px;
+  height: 11px;
+  text-indent: 12px;
+  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.insertBefore(this.el));
+}
+.alert.success .dismiss:before {
+  font-family: "FontAwesome-0.0.1", "FontAwesome";
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  speak: none;
+  font-size: 11px;
+  color: inherit;
+  content: "\f00d";
+}
+.alert.success .dismiss #ie-pseudo-archetype-uid-RANDOM_UID {
+  font-family: 'FontAwesome-0.0.1', 'FontAwesome';
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  font-size: 11px;
+  color: inherit;
+  text-decoration: none;
+}
+.alert.success .dismiss.hover, .alert.success .dismiss:hover, .alert.success .dismiss.focus, .alert.success .dismiss:focus {
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
+}
+.alert.success .dismiss:before, .alert.success .dismiss #ie-pseudo-archetype-uid-RANDOM_UID {
+  vertical-align: top;
+  line-height: 1;
+  position: absolute;
+  top: 0;
+  right: 0;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.alert.notice {
+  background-color: #49afcd;
+  background-repeat: no-repeat;
+  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5bc0de), color-stop(100%, #2f96b4));
+  background: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
+  background: -moz-linear-gradient(top, #5bc0de, #2f96b4);
+  background: -o-linear-gradient(top, #5bc0de, #2f96b4);
+  background: linear-gradient(top, #5bc0de, #2f96b4);
+  -webkit-box-shadow: 0 0 0 1px #2f96b4, 0 1px 2px rgba(0, 0, 0, 0.45);
+  -moz-box-shadow: 0 0 0 1px #2f96b4, 0 1px 2px rgba(0, 0, 0, 0.45);
+  box-shadow: 0 0 0 1px #2f96b4, 0 1px 2px rgba(0, 0, 0, 0.45);
+  overflow: hidden;
+  display: block;
+  color: white;
+  font-size: 15px;
+  line-height: 20px;
+  position: relative;
+  padding: 10px 20px 10px 50px;
+  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.insertBefore(this.el));
+}
+.alert.notice:before {
+  font-family: "FontAwesome-0.0.1", "FontAwesome";
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  speak: none;
+  font-size: 36px;
+  color: inherit;
+  content: "\f05a";
+}
+.alert.notice #ie-pseudo-archetype-uid-RANDOM_UID {
+  font-family: 'FontAwesome-0.0.1', 'FontAwesome';
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  font-size: 36px;
+  color: inherit;
+}
+.alert.notice:before, .alert.notice #ie-pseudo-archetype-uid-RANDOM_UID {
+  position: absolute;
+  top: 6px;
+  left: 11px;
+  line-height: 1;
+}
+.alert.notice .dismiss {
+  color: white;
+  background: transparent none;
+  padding: 0 1px 0 0;
+  border: 0;
+  margin: 0;
+  cursor: pointer;
+  text-decoration: none;
+  position: absolute;
+  overflow: hidden;
+  top: 10px;
+  right: 10px;
+  width: 11px;
+  height: 11px;
+  text-indent: 12px;
+  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.insertBefore(this.el));
+}
+.alert.notice .dismiss:before {
+  font-family: "FontAwesome-0.0.1", "FontAwesome";
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  speak: none;
+  font-size: 11px;
+  color: inherit;
+  content: "\f00d";
+}
+.alert.notice .dismiss #ie-pseudo-archetype-uid-RANDOM_UID {
+  font-family: 'FontAwesome-0.0.1', 'FontAwesome';
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  font-size: 11px;
+  color: inherit;
+  text-decoration: none;
+}
+.alert.notice .dismiss.hover, .alert.notice .dismiss:hover, .alert.notice .dismiss.focus, .alert.notice .dismiss:focus {
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
+}
+.alert.notice .dismiss:before, .alert.notice .dismiss #ie-pseudo-archetype-uid-RANDOM_UID {
+  vertical-align: top;
+  line-height: 1;
+  position: absolute;
+  top: 0;
+  right: 0;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.alert.yield {
+  background-color: #faa732;
+  background-repeat: no-repeat;
+  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fbb450), color-stop(100%, #f89406));
+  background: -webkit-linear-gradient(top, #fbb450, #f89406);
+  background: -moz-linear-gradient(top, #fbb450, #f89406);
+  background: -o-linear-gradient(top, #fbb450, #f89406);
+  background: linear-gradient(top, #fbb450, #f89406);
+  -webkit-box-shadow: 0 0 0 1px #f89406, 0 1px 2px rgba(0, 0, 0, 0.45);
+  -moz-box-shadow: 0 0 0 1px #f89406, 0 1px 2px rgba(0, 0, 0, 0.45);
+  box-shadow: 0 0 0 1px #f89406, 0 1px 2px rgba(0, 0, 0, 0.45);
+  overflow: hidden;
+  display: block;
+  color: white;
+  font-size: 15px;
+  line-height: 20px;
+  position: relative;
+  padding: 10px 20px 10px 50px;
+  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.insertBefore(this.el));
+}
+.alert.yield:before {
+  font-family: "FontAwesome-0.0.1", "FontAwesome";
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  speak: none;
+  font-size: 36px;
+  color: inherit;
+  content: "\f071";
+}
+.alert.yield #ie-pseudo-archetype-uid-RANDOM_UID {
+  font-family: 'FontAwesome-0.0.1', 'FontAwesome';
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  font-size: 36px;
+  color: inherit;
+}
+.alert.yield:before, .alert.yield #ie-pseudo-archetype-uid-RANDOM_UID {
+  position: absolute;
+  top: 6px;
+  left: 11px;
+  line-height: 1;
+}
+.alert.yield .dismiss {
+  color: white;
+  background: transparent none;
+  padding: 0 1px 0 0;
+  border: 0;
+  margin: 0;
+  cursor: pointer;
+  text-decoration: none;
+  position: absolute;
+  overflow: hidden;
+  top: 10px;
+  right: 10px;
+  width: 11px;
+  height: 11px;
+  text-indent: 12px;
+  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.insertBefore(this.el));
+}
+.alert.yield .dismiss:before {
+  font-family: "FontAwesome-0.0.1", "FontAwesome";
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  speak: none;
+  font-size: 11px;
+  color: inherit;
+  content: "\f00d";
+}
+.alert.yield .dismiss #ie-pseudo-archetype-uid-RANDOM_UID {
+  font-family: 'FontAwesome-0.0.1', 'FontAwesome';
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  font-size: 11px;
+  color: inherit;
+  text-decoration: none;
+}
+.alert.yield .dismiss.hover, .alert.yield .dismiss:hover, .alert.yield .dismiss.focus, .alert.yield .dismiss:focus {
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
+}
+.alert.yield .dismiss:before, .alert.yield .dismiss #ie-pseudo-archetype-uid-RANDOM_UID {
+  vertical-align: top;
+  line-height: 1;
+  position: absolute;
+  top: 0;
+  right: 0;
+  text-decoration: none;
+  cursor: pointer;
+}