Started to build out the app. Its got a basic set of features and it should really be in VC

2019-07-19 20:51:57 +00:00
parent dbc3e5428c
commit 61754fe290
513 changed files with 81139 additions and 0 deletions
--- a/client/semantic/src/themes/default/elements/button.overrides
+++ b/client/semantic/src/themes/default/elements/button.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
--- a/client/semantic/src/themes/default/elements/button.variables
+++ b/client/semantic/src/themes/default/elements/button.variables
@@ -0,0 +1,360 @@
+/*******************************
+            Button
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+
+/* Button */
+@verticalMargin: 0em;
+@horizontalMargin: 0.25em;
+@backgroundColor: #E0E1E2;
+@backgroundImage: none;
+@background: @backgroundColor @backgroundImage;
+@lineHeight: 1em;
+
+/* Button defaults to using same height as input globally */
+@verticalPadding: @inputVerticalPadding;
+@horizontalPadding: 1.5em;
+
+/* Text */
+@textTransform: none;
+@tapColor: transparent;
+@fontFamily: @pageFont;
+@fontWeight: @bold;
+@textColor: rgba(0, 0, 0, 0.6);
+@textShadow: none;
+@invertedTextShadow: @textShadow;
+@borderRadius: @defaultBorderRadius;
+@verticalAlign: baseline;
+
+/* Internal Shadow */
+@shadowDistance: 0em;
+@shadowOffset: (@shadowDistance / 2);
+@shadowBoxShadow: 0px -@shadowDistance 0px 0px @borderColor inset;
+
+/* Box Shadow */
+@borderBoxShadowColor: transparent;
+@borderBoxShadowWidth: 1px;
+@borderBoxShadow: 0px 0px 0px @borderBoxShadowWidth @borderBoxShadowColor inset;
+@boxShadow:
+  @borderBoxShadow,
+  @shadowBoxShadow
+;
+
+/* Icon */
+@iconHeight: @relativeTiny;
+@iconOpacity: 0.8;
+@iconDistance: @relative6px;
+@iconColor: '';
+@iconTransition: opacity @defaultDuration @defaultEasing;
+@iconVerticalAlign: '';
+
+@iconMargin: 0em @iconDistance 0em -(@iconDistance / 2);
+@rightIconMargin: 0em -(@iconDistance / 2) 0em @iconDistance;
+
+/* Loader */
+@invertedLoaderFillColor: rgba(0, 0, 0, 0.15);
+
+@transition:
+  opacity @defaultDuration @defaultEasing,
+  background-color @defaultDuration @defaultEasing,
+  color @defaultDuration @defaultEasing,
+  box-shadow @defaultDuration @defaultEasing,
+  background @defaultDuration @defaultEasing
+;
+/*
+@willChange: box-shadow, transform, opacity, color, background;
+*/
+@willChange: '';
+
+/*-------------------
+        Group
+--------------------*/
+
+@groupBoxShadow: none;
+@groupButtonBoxShadow: @boxShadow;
+@verticalBoxShadow: none;
+@groupButtonOffset: 0px 0px 0px 0px;
+@verticalGroupOffset: 0px 0px 0px 0px;
+
+/*-------------------
+        States
+--------------------*/
+
+/* Hovered */
+@hoverBackgroundColor: #CACBCD;
+@hoverBackgroundImage: @backgroundImage;
+@hoverBoxShadow: @boxShadow;
+@hoverColor: @hoveredTextColor;
+@iconHoverOpacity: 0.85;
+
+/* Focused */
+@focusBackgroundColor: @hoverBackgroundColor;
+@focusBackgroundImage: '';
+@focusBoxShadow: '';
+@focusColor: @hoveredTextColor;
+@iconFocusOpacity: 0.85;
+
+/* Disabled */
+@disabledBackgroundImage: none;
+@disabledBoxShadow: none;
+
+/* Pressed Down */
+@downBackgroundColor: #BABBBC;
+@downBackgroundImage: '';
+@downPressedShadow: none;
+@downBoxShadow:
+  @borderBoxShadow,
+  @downPressedShadow
+;
+@downColor: @pressedTextColor;
+
+/* Active */
+@activeBackgroundColor: #C0C1C2;
+@activeBackgroundImage: none;
+@activeColor: @selectedTextColor;
+@activeBoxShadow: @borderBoxShadow;
+
+/* Active + Hovered */
+@activeHoverBackgroundColor: @activeBackgroundColor;
+@activeHoverBackgroundImage: none;
+@activeHoverColor: @activeColor;
+@activeHoverBoxShadow: @activeBoxShadow;
+
+/* Loading */
+@loadingOpacity: 1;
+@loadingPointerEvents: auto;
+@loadingTransition:
+  all 0s linear,
+  opacity @defaultDuration @defaultEasing
+;
+
+/*-------------------
+        Types
+--------------------*/
+
+/* Or */
+@orText: 'or';
+
+@orGap: 0.3em;
+@orHeight: (@verticalPadding * 2) + 1em;
+@orZIndex: 3;
+
+@orCircleDistanceToEdge: (@verticalPadding);
+@orCircleSize: @orHeight - @orCircleDistanceToEdge;
+@orLineHeight: (@orCircleSize);
+@orBoxShadow: @borderBoxShadow;
+
+@orVerticalOffset: -(@orCircleSize / 2);
+@orHorizontalOffset: -(@orCircleSize / 2);
+
+@orBackgroundColor: @white;
+@orTextShadow: @invertedTextShadow;
+@orTextStyle: @normal;
+@orTextWeight: @bold;
+@orTextColor: @lightTextColor;
+
+
+@orSpacerHeight: @verticalPadding;
+@orSpacerColor: transparent;
+
+/* Icon */
+@iconButtonOpacity: 0.9;
+
+/* Labeled */
+@labeledLabelFontSize: @medium;
+@labeledLabelAlign: center;
+@labeledLabelPadding: '';
+@labeledLabelFontSize: @relativeMedium;
+@labeledLabelBorderColor: @borderColor;
+@labeledLabelBorderOffset: -@borderBoxShadowWidth;
+@labeledTagLabelSize: 1.85em; /* hypotenuse of triangle */
+@labeledIconMargin: 0em;
+
+/* Labeled Icon */
+@labeledIconWidth: 1em + (@verticalPadding * 2);
+@labeledIconBackgroundColor: rgba(0, 0, 0, 0.05);
+@labeledIconPadding: (@horizontalPadding + @labeledIconWidth);
+@labeledIconBorder: transparent;
+@labeledIconColor: '';
+
+@labeledIconLeftShadow: -1px 0px 0px 0px @labeledIconBorder inset;
+@labeledIconRightShadow: 1px 0px 0px 0px @labeledIconBorder inset;
+
+
+/* Inverted */
+@invertedBorderSize: 2px;
+@invertedTextColor: @white;
+@invertedTextHoverColor: @hoverColor;
+@invertedGroupButtonOffset: 0px 0px 0px -(@invertedBorderSize);
+@invertedVerticalGroupButtonOffset: 0px 0px -(@invertedBorderSize) 0px;
+
+/* Basic */
+@basicBorderRadius: @borderRadius;
+@basicBorderSize: 1px;
+@basicTextColor: @textColor;
+@basicColoredBorderSize: 1px;
+
+@basicBackground: transparent none;
+@basicFontWeight: @normal;
+@basicBorder: 1px solid @borderColor;
+@basicBoxShadow: 0px 0px 0px @basicBorderSize @borderColor inset;
+@basicLoadingColor: @offWhite;
+@basicTextTransform: none;
+
+/* Basic Hover */
+@basicHoverBackground: #FFFFFF;
+@basicHoverTextColor: @hoveredTextColor;
+@basicHoverBoxShadow:
+  0px 0px 0px @basicBorderSize @selectedBorderColor inset,
+  0px 0px 0px 0px @borderColor inset
+;
+/* Basic Focus */
+@basicFocusBackground: @basicHoverBackground;
+@basicFocusTextColor: @basicHoverTextColor;
+@basicFocusBoxShadow: @basicHoverBoxShadow;
+
+/* Basic Down */
+@basicDownBackground: #F8F8F8;
+@basicDownTextColor: @pressedTextColor;
+@basicDownBoxShadow:
+  0px 0px 0px @basicBorderSize rgba(0, 0, 0, 0.15) inset,
+  0px 1px 4px 0px @borderColor inset
+;
+/* Basic Active */
+@basicActiveBackground: @transparentBlack;
+@basicActiveBoxShadow: '';
+@basicActiveTextColor: @selectedTextColor;
+
+/* Basic Inverted */
+@basicInvertedBackground: transparent;
+@basicInvertedFocusBackground: transparent;
+@basicInvertedDownBackground: @transparentWhite;
+@basicInvertedActiveBackground: @transparentWhite;
+
+@basicInvertedBoxShadow: 0px 0px 0px @invertedBorderSize rgba(255, 255, 255, 0.5) inset;
+@basicInvertedHoverBoxShadow: 0px 0px 0px @invertedBorderSize rgba(255, 255, 255, 1) inset;
+@basicInvertedFocusBoxShadow: 0px 0px 0px @invertedBorderSize rgba(255, 255, 255, 1) inset;
+@basicInvertedDownBoxShadow: 0px 0px 0px @invertedBorderSize rgba(255, 255, 255, 0.9) inset;
+@basicInvertedActiveBoxShadow: 0px 0px 0px @invertedBorderSize rgba(255, 255, 255, 0.7) inset;
+
+@basicInvertedColor: @darkWhite;
+@basicInvertedHoverColor: @darkWhiteHover;
+@basicInvertedDownColor: @darkWhiteActive;
+@basicInvertedActiveColor: @invertedTextColor;
+
+
+/* Basic Group */
+@basicGroupBorder: @basicBorderSize solid @borderColor;
+@basicGroupBoxShadow: none;
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Colors */
+@coloredBackgroundImage: none;
+@coloredBoxShadow: @shadowBoxShadow;
+
+/* Colored */
+@brownTextColor: @invertedTextColor;
+@brownTextShadow: @invertedTextShadow;
+@redTextColor: @invertedTextColor;
+@redTextShadow: @invertedTextShadow;
+@orangeTextColor: @invertedTextColor;
+@orangeTextShadow: @invertedTextShadow;
+@greenTextColor: @invertedTextColor;
+@greenTextShadow: @invertedTextShadow;
+@blueTextColor: @invertedTextColor;
+@blueTextShadow: @invertedTextShadow;
+@violetTextColor: @invertedTextColor;
+@violetTextShadow: @invertedTextShadow;
+@purpleTextColor: @invertedTextColor;
+@purpleTextShadow: @invertedTextShadow;
+@pinkTextColor: @invertedTextColor;
+@pinkTextShadow: @invertedTextShadow;
+@blackTextColor: @invertedTextColor;
+@blackTextShadow: @invertedTextShadow;
+@oliveTextColor: @invertedTextColor;
+@oliveTextShadow: @invertedTextShadow;
+@yellowTextColor: @invertedTextColor;
+@yellowTextShadow: @invertedTextShadow;
+@tealTextColor: @invertedTextColor;
+@tealTextShadow: @invertedTextShadow;
+@greyTextColor: @invertedTextColor;
+@greyTextShadow: @invertedTextShadow;
+
+/* Inverted */
+@lightBrownTextColor: @invertedTextColor;
+@lightBrownTextShadow: @invertedTextShadow;
+@lightRedTextColor: @invertedTextColor;
+@lightRedTextShadow: @invertedTextShadow;
+@lightOrangeTextColor: @invertedTextColor;
+@lightOrangeTextShadow: @invertedTextShadow;
+@lightGreenTextColor: @invertedTextColor;
+@lightGreenTextShadow: @invertedTextShadow;
+@lightBlueTextColor: @invertedTextColor;
+@lightBlueTextShadow: @invertedTextShadow;
+@lightVioletTextColor: @invertedTextColor;
+@lightVioletTextShadow: @invertedTextShadow;
+@lightPurpleTextColor: @invertedTextColor;
+@lightPurpleTextShadow: @invertedTextShadow;
+@lightPinkTextColor: @invertedTextColor;
+@lightPinkTextShadow: @invertedTextShadow;
+@lightBlackTextColor: @invertedTextColor;
+@lightBlackTextShadow: @invertedTextShadow;
+@lightOliveTextColor: @textColor;
+@lightOliveTextShadow: @textShadow;
+@lightYellowTextColor: @textColor;
+@lightYellowTextShadow: @textShadow;
+@lightTealTextColor: @textColor;
+@lightTealTextShadow: @textShadow;
+@lightGreyTextColor: @textColor;
+@lightGreyTextShadow: @textShadow;
+
+
+/* Ordinality */
+@primaryBackgroundImage: @coloredBackgroundImage;
+@primaryTextColor: @invertedTextColor;
+@lightPrimaryTextColor: @invertedTextColor;
+@primaryTextShadow: @invertedTextShadow;
+@primaryBoxShadow: @coloredBoxShadow;
+
+@secondaryBackgroundImage: @coloredBackgroundImage;
+@secondaryTextColor: @invertedTextColor;
+@secondaryTextShadow: @invertedTextShadow;
+@lightSecondaryTextColor: @invertedTextColor;
+@secondaryBoxShadow: @coloredBoxShadow;
+
+@positiveBackgroundImage: @coloredBackgroundImage;
+@positiveTextColor: @invertedTextColor;
+@positiveTextShadow: @invertedTextShadow;
+@positiveBoxShadow: @coloredBoxShadow;
+
+@negativeBackgroundImage: @coloredBackgroundImage;
+@negativeTextColor: @invertedTextColor;
+@negativeTextShadow: @invertedTextShadow;
+@negativeBoxShadow: @coloredBoxShadow;
+
+/* Compact */
+@compactVerticalPadding: (@verticalPadding * 0.75);
+@compactHorizontalPadding: (@horizontalPadding * 0.75);
+
+/* Attached */
+@attachedOffset: -1px;
+@attachedBoxShadow: 0px 0px 0px 1px @borderColor;
+@attachedHorizontalPadding: 0.75em;
+@attachedZIndex: 2;
+
+/* Floated */
+@floatedMargin: 0.25em;
+
+/* Animated */
+@animatedVerticalAlign: middle;
+@animatedZIndex: 1;
+@animationDuration: 0.3s;
+@animationEasing: ease;
+@fadeScaleHigh: 1.5;
+@fadeScaleLow: 0.75;
--- a/client/semantic/src/themes/default/elements/container.overrides
+++ b/client/semantic/src/themes/default/elements/container.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
--- a/client/semantic/src/themes/default/elements/container.variables
+++ b/client/semantic/src/themes/default/elements/container.variables
@@ -0,0 +1,58 @@
+/*******************************
+            Container
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+
+/* Minimum Gutter is used to determine  the maximum container width for a given device */
+
+@maxWidth: 100%;
+
+/* Devices */
+@mobileMinimumGutter: 0em;
+@mobileWidth: auto;
+@mobileGutter: 1em;
+
+@tabletMinimumGutter: (@emSize  * 1);
+@tabletWidth: @tabletBreakpoint - (@tabletMinimumGutter * 2) - @scrollbarWidth;
+@tabletGutter: auto;
+
+@computerMinimumGutter: (@emSize  * 1.5);
+@computerWidth: @computerBreakpoint - (@computerMinimumGutter * 2) - @scrollbarWidth;
+@computerGutter: auto;
+
+@largeMonitorMinimumGutter: (@emSize  * 2);
+@largeMonitorWidth: @largeMonitorBreakpoint - (@largeMonitorMinimumGutter * 2) - @scrollbarWidth;
+@largeMonitorGutter: auto;
+
+/* Coupling (Add Negative Margin to container size) */
+@gridGutterWidth: 2rem;
+@relaxedGridGutterWidth: 3rem;
+@veryRelaxedGridGutterWidth: 5rem;
+
+@mobileGridWidth: @mobileWidth;
+@tabletGridWidth: ~"calc("@tabletWidth~" + "@gridGutterWidth~")";
+@computerGridWidth: ~"calc("@computerWidth~" + "@gridGutterWidth~")";
+@largeMonitorGridWidth: ~"calc("@largeMonitorWidth~" + "@gridGutterWidth~")";
+
+@mobileRelaxedGridWidth: @mobileWidth;
+@tabletRelaxedGridWidth: ~"calc("@tabletWidth~" + "@relaxedGridGutterWidth~")";
+@computerRelaxedGridWidth: ~"calc("@computerWidth~" + "@relaxedGridGutterWidth~")";
+@largeMonitorRelaxedGridWidth: ~"calc("@largeMonitorWidth~" + "@relaxedGridGutterWidth~")";
+
+@mobileVeryRelaxedGridWidth: @mobileWidth;
+@tabletVeryRelaxedGridWidth: ~"calc("@tabletWidth~" + "@veryRelaxedGridGutterWidth~")";
+@computerVeryRelaxedGridWidth: ~"calc("@computerWidth~" + "@veryRelaxedGridGutterWidth~")";
+@largeMonitorVeryRelaxedGridWidth: ~"calc("@largeMonitorWidth~" + "@veryRelaxedGridGutterWidth~")";
+
+/*-------------------
+       Types
+--------------------*/
+
+/* Text */
+@textWidth: 700px;
+@textFontFamily: @pageFont;
+@textLineHeight: 1.5;
+@textSize: @large;
--- a/client/semantic/src/themes/default/elements/divider.overrides
+++ b/client/semantic/src/themes/default/elements/divider.overrides
@@ -0,0 +1,18 @@
+/*******************************
+         Theme Overrides
+*******************************/
+
+
+.ui.horizontal.divider:before,
+.ui.horizontal.divider:after {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC');
+}
+
+@media only screen and (max-width : (@tabletBreakpoint - 1px)) {
+  .ui.stackable.grid .ui.vertical.divider:before,
+  .ui.grid .stackable.row .ui.vertical.divider:before,
+  .ui.stackable.grid .ui.vertical.divider:after,
+  .ui.grid .stackable.row .ui.vertical.divider:after {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC');
+  }
+}
--- a/client/semantic/src/themes/default/elements/divider.variables
+++ b/client/semantic/src/themes/default/elements/divider.variables
@@ -0,0 +1,53 @@
+/*******************************
+            Divider
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+
+@margin: 1rem 0rem;
+
+@highlightWidth: 1px;
+@highlightColor: @whiteBorderColor;
+
+@shadowWidth: 1px;
+@shadowColor: @borderColor;
+
+/* Text */
+@letterSpacing: 0.05em;
+@fontWeight: @bold;
+@color: @darkTextColor;
+@textTransform: uppercase;
+
+/*-------------------
+       Coupling
+--------------------*/
+
+/* Icon */
+@dividerIconSize: 1rem;
+@dividerIconMargin: 0rem;
+
+
+/*******************************
+         Variations
+*******************************/
+
+/* Horizontal / Vertical */
+@horizontalMargin: '';
+@horizontalDividerMargin: 1em;
+@horizontalRulerOffset: ~"calc(-50% - "(@horizontalDividerMargin)~")";
+
+@verticalDividerMargin: 1rem;
+@verticalDividerHeight: ~"calc(100% - "(@verticalDividerMargin)~")";
+
+/* Inverted */
+@invertedTextColor: @white;
+@invertedHighlightColor: rgba(255, 255, 255, 0.15);
+@invertedShadowColor: @borderColor;
+
+/* Section */
+@sectionMargin: 2rem;
+
+/* Sizes */
+@medium: 1rem;
--- a/client/semantic/src/themes/default/elements/flag.overrides
+++ b/client/semantic/src/themes/default/elements/flag.overrides
@@ -0,0 +1,991 @@
+/* Flag Sprite Based On http://www.famfamfam.com/lab/icons/flags/ */
+
+/*******************************
+         Theme Overrides
+*******************************/
+
+i.flag.ad:before,
+i.flag.andorra:before {
+  background-position: 0px 0px;
+}
+i.flag.ae:before,
+i.flag.united.arab.emirates:before,
+i.flag.uae:before {
+  background-position: 0px -26px;
+}
+i.flag.af:before,
+i.flag.afghanistan:before {
+  background-position: 0px -52px;
+}
+i.flag.ag:before,
+i.flag.antigua:before {
+  background-position: 0px -78px;
+}
+i.flag.ai:before,
+i.flag.anguilla:before {
+  background-position: 0px -104px;
+}
+i.flag.al:before,
+i.flag.albania:before {
+  background-position: 0px -130px;
+}
+i.flag.am:before,
+i.flag.armenia:before {
+  background-position: 0px -156px;
+}
+i.flag.an:before,
+i.flag.netherlands.antilles:before {
+  background-position: 0px -182px;
+}
+i.flag.ao:before,
+i.flag.angola:before {
+  background-position: 0px -208px;
+}
+i.flag.ar:before,
+i.flag.argentina:before {
+  background-position: 0px -234px;
+}
+i.flag.as:before,
+i.flag.american.samoa:before {
+  background-position: 0px -260px;
+}
+i.flag.at:before,
+i.flag.austria:before {
+  background-position: 0px -286px;
+}
+i.flag.au:before,
+i.flag.australia:before {
+  background-position: 0px -312px;
+}
+i.flag.aw:before,
+i.flag.aruba:before {
+  background-position: 0px -338px;
+}
+i.flag.ax:before,
+i.flag.aland.islands:before {
+  background-position: 0px -364px;
+}
+i.flag.az:before,
+i.flag.azerbaijan:before {
+  background-position: 0px -390px;
+}
+i.flag.ba:before,
+i.flag.bosnia:before {
+  background-position: 0px -416px;
+}
+i.flag.bb:before,
+i.flag.barbados:before {
+  background-position: 0px -442px;
+}
+i.flag.bd:before,
+i.flag.bangladesh:before {
+  background-position: 0px -468px;
+}
+i.flag.be:before,
+i.flag.belgium:before {
+  background-position: 0px -494px;
+}
+i.flag.bf:before,
+i.flag.burkina.faso:before {
+  background-position: 0px -520px;
+}
+i.flag.bg:before,
+i.flag.bulgaria:before {
+  background-position: 0px -546px;
+}
+i.flag.bh:before,
+i.flag.bahrain:before {
+  background-position: 0px -572px;
+}
+i.flag.bi:before,
+i.flag.burundi:before {
+  background-position: 0px -598px;
+}
+i.flag.bj:before,
+i.flag.benin:before {
+  background-position: 0px -624px;
+}
+i.flag.bm:before,
+i.flag.bermuda:before {
+  background-position: 0px -650px;
+}
+i.flag.bn:before,
+i.flag.brunei:before {
+  background-position: 0px -676px;
+}
+i.flag.bo:before,
+i.flag.bolivia:before {
+  background-position: 0px -702px;
+}
+i.flag.br:before,
+i.flag.brazil:before {
+  background-position: 0px -728px;
+}
+i.flag.bs:before,
+i.flag.bahamas:before {
+  background-position: 0px -754px;
+}
+i.flag.bt:before,
+i.flag.bhutan:before {
+  background-position: 0px -780px;
+}
+i.flag.bv:before,
+i.flag.bouvet.island:before {
+  background-position: 0px -806px;
+}
+i.flag.bw:before,
+i.flag.botswana:before {
+  background-position: 0px -832px;
+}
+i.flag.by:before,
+i.flag.belarus:before {
+  background-position: 0px -858px;
+}
+i.flag.bz:before,
+i.flag.belize:before {
+  background-position: 0px -884px;
+}
+i.flag.ca:before,
+i.flag.canada:before {
+  background-position: 0px -910px;
+}
+i.flag.cc:before,
+i.flag.cocos.islands:before {
+  background-position: 0px -962px;
+}
+i.flag.cd:before,
+i.flag.congo:before {
+  background-position: 0px -988px;
+}
+i.flag.cf:before,
+i.flag.central.african.republic:before {
+  background-position: 0px -1014px;
+}
+i.flag.cg:before,
+i.flag.congo.brazzaville:before {
+  background-position: 0px -1040px;
+}
+i.flag.ch:before,
+i.flag.switzerland:before {
+  background-position: 0px -1066px;
+}
+i.flag.ci:before,
+i.flag.cote.divoire:before {
+  background-position: 0px -1092px;
+}
+i.flag.ck:before,
+i.flag.cook.islands:before {
+  background-position: 0px -1118px;
+}
+i.flag.cl:before,
+i.flag.chile:before {
+  background-position: 0px -1144px;
+}
+i.flag.cm:before,
+i.flag.cameroon:before {
+  background-position: 0px -1170px;
+}
+i.flag.cn:before,
+i.flag.china:before {
+  background-position: 0px -1196px;
+}
+i.flag.co:before,
+i.flag.colombia:before {
+  background-position: 0px -1222px;
+}
+i.flag.cr:before,
+i.flag.costa.rica:before {
+  background-position: 0px -1248px;
+}
+i.flag.cs:before,
+i.flag.serbia:before {
+  background-position: 0px -1274px;
+}
+i.flag.cu:before,
+i.flag.cuba:before {
+  background-position: 0px -1300px;
+}
+i.flag.cv:before,
+i.flag.cape.verde:before {
+  background-position: 0px -1326px;
+}
+i.flag.cx:before,
+i.flag.christmas.island:before {
+  background-position: 0px -1352px;
+}
+i.flag.cy:before,
+i.flag.cyprus:before {
+  background-position: 0px -1378px;
+}
+i.flag.cz:before,
+i.flag.czech.republic:before {
+  background-position: 0px -1404px;
+}
+i.flag.de:before,
+i.flag.germany:before {
+  background-position: 0px -1430px;
+}
+i.flag.dj:before,
+i.flag.djibouti:before {
+  background-position: 0px -1456px;
+}
+i.flag.dk:before,
+i.flag.denmark:before {
+  background-position: 0px -1482px;
+}
+i.flag.dm:before,
+i.flag.dominica:before {
+  background-position: 0px -1508px;
+}
+i.flag.do:before,
+i.flag.dominican.republic:before {
+  background-position: 0px -1534px;
+}
+i.flag.dz:before,
+i.flag.algeria:before {
+  background-position: 0px -1560px;
+}
+i.flag.ec:before,
+i.flag.ecuador:before {
+  background-position: 0px -1586px;
+}
+i.flag.ee:before,
+i.flag.estonia:before {
+  background-position: 0px -1612px;
+}
+i.flag.eg:before,
+i.flag.egypt:before {
+  background-position: 0px -1638px;
+}
+i.flag.eh:before,
+i.flag.western.sahara:before {
+  background-position: 0px -1664px;
+}
+i.flag.gb.eng:before,
+i.flag.england:before {
+  background-position: 0px -1690px;
+}
+i.flag.er:before,
+i.flag.eritrea:before {
+  background-position: 0px -1716px;
+}
+i.flag.es:before,
+i.flag.spain:before {
+  background-position: 0px -1742px;
+}
+i.flag.et:before,
+i.flag.ethiopia:before {
+  background-position: 0px -1768px;
+}
+i.flag.eu:before,
+i.flag.european.union:before {
+  background-position: 0px -1794px;
+}
+i.flag.fi:before,
+i.flag.finland:before {
+  background-position: 0px -1846px;
+}
+i.flag.fj:before,
+i.flag.fiji:before {
+  background-position: 0px -1872px;
+}
+i.flag.fk:before,
+i.flag.falkland.islands:before {
+  background-position: 0px -1898px;
+}
+i.flag.fm:before,
+i.flag.micronesia:before {
+  background-position: 0px -1924px;
+}
+i.flag.fo:before,
+i.flag.faroe.islands:before {
+  background-position: 0px -1950px;
+}
+i.flag.fr:before,
+i.flag.france:before {
+  background-position: 0px -1976px;
+}
+i.flag.ga:before,
+i.flag.gabon:before {
+  background-position: -36px 0px;
+}
+i.flag.gb:before,
+i.flag.uk:before,
+i.flag.united.kingdom:before {
+  background-position: -36px -26px;
+}
+i.flag.gd:before,
+i.flag.grenada:before {
+  background-position: -36px -52px;
+}
+i.flag.ge:before,
+i.flag.georgia:before {
+  background-position: -36px -78px;
+}
+i.flag.gf:before,
+i.flag.french.guiana:before {
+  background-position: -36px -104px;
+}
+i.flag.gh:before,
+i.flag.ghana:before {
+  background-position: -36px -130px;
+}
+i.flag.gi:before,
+i.flag.gibraltar:before {
+  background-position: -36px -156px;
+}
+i.flag.gl:before,
+i.flag.greenland:before {
+  background-position: -36px -182px;
+}
+i.flag.gm:before,
+i.flag.gambia:before {
+  background-position: -36px -208px;
+}
+i.flag.gn:before,
+i.flag.guinea:before {
+  background-position: -36px -234px;
+}
+i.flag.gp:before,
+i.flag.guadeloupe:before {
+  background-position: -36px -260px;
+}
+i.flag.gq:before,
+i.flag.equatorial.guinea:before {
+  background-position: -36px -286px;
+}
+i.flag.gr:before,
+i.flag.greece:before {
+  background-position: -36px -312px;
+}
+i.flag.gs:before,
+i.flag.sandwich.islands:before {
+  background-position: -36px -338px;
+}
+i.flag.gt:before,
+i.flag.guatemala:before {
+  background-position: -36px -364px;
+}
+i.flag.gu:before,
+i.flag.guam:before {
+  background-position: -36px -390px;
+}
+i.flag.gw:before,
+i.flag.guinea-bissau:before {
+  background-position: -36px -416px;
+}
+i.flag.gy:before,
+i.flag.guyana:before {
+  background-position: -36px -442px;
+}
+i.flag.hk:before,
+i.flag.hong.kong:before {
+  background-position: -36px -468px;
+}
+i.flag.hm:before,
+i.flag.heard.island:before {
+  background-position: -36px -494px;
+}
+i.flag.hn:before,
+i.flag.honduras:before {
+  background-position: -36px -520px;
+}
+i.flag.hr:before,
+i.flag.croatia:before {
+  background-position: -36px -546px;
+}
+i.flag.ht:before,
+i.flag.haiti:before {
+  background-position: -36px -572px;
+}
+i.flag.hu:before,
+i.flag.hungary:before {
+  background-position: -36px -598px;
+}
+i.flag.id:before,
+i.flag.indonesia:before {
+  background-position: -36px -624px;
+}
+i.flag.ie:before,
+i.flag.ireland:before {
+  background-position: -36px -650px;
+}
+i.flag.il:before,
+i.flag.israel:before {
+  background-position: -36px -676px;
+}
+i.flag.in:before,
+i.flag.india:before {
+  background-position: -36px -702px;
+}
+i.flag.io:before,
+i.flag.indian.ocean.territory:before {
+  background-position: -36px -728px;
+}
+i.flag.iq:before,
+i.flag.iraq:before {
+  background-position: -36px -754px;
+}
+i.flag.ir:before,
+i.flag.iran:before {
+  background-position: -36px -780px;
+}
+i.flag.is:before,
+i.flag.iceland:before {
+  background-position: -36px -806px;
+}
+i.flag.it:before,
+i.flag.italy:before {
+  background-position: -36px -832px;
+}
+i.flag.jm:before,
+i.flag.jamaica:before {
+  background-position: -36px -858px;
+}
+i.flag.jo:before,
+i.flag.jordan:before {
+  background-position: -36px -884px;
+}
+i.flag.jp:before,
+i.flag.japan:before {
+  background-position: -36px -910px;
+}
+i.flag.ke:before,
+i.flag.kenya:before {
+  background-position: -36px -936px;
+}
+i.flag.kg:before,
+i.flag.kyrgyzstan:before {
+  background-position: -36px -962px;
+}
+i.flag.kh:before,
+i.flag.cambodia:before {
+  background-position: -36px -988px;
+}
+i.flag.ki:before,
+i.flag.kiribati:before {
+  background-position: -36px -1014px;
+}
+i.flag.km:before,
+i.flag.comoros:before {
+  background-position: -36px -1040px;
+}
+i.flag.kn:before,
+i.flag.saint.kitts.and.nevis:before {
+  background-position: -36px -1066px;
+}
+i.flag.kp:before,
+i.flag.north.korea:before {
+  background-position: -36px -1092px;
+}
+i.flag.kr:before,
+i.flag.south.korea:before {
+  background-position: -36px -1118px;
+}
+i.flag.kw:before,
+i.flag.kuwait:before {
+  background-position: -36px -1144px;
+}
+i.flag.ky:before,
+i.flag.cayman.islands:before {
+  background-position: -36px -1170px;
+}
+i.flag.kz:before,
+i.flag.kazakhstan:before {
+  background-position: -36px -1196px;
+}
+i.flag.la:before,
+i.flag.laos:before {
+  background-position: -36px -1222px;
+}
+i.flag.lb:before,
+i.flag.lebanon:before {
+  background-position: -36px -1248px;
+}
+i.flag.lc:before,
+i.flag.saint.lucia:before {
+  background-position: -36px -1274px;
+}
+i.flag.li:before,
+i.flag.liechtenstein:before {
+  background-position: -36px -1300px;
+}
+i.flag.lk:before,
+i.flag.sri.lanka:before {
+  background-position: -36px -1326px;
+}
+i.flag.lr:before,
+i.flag.liberia:before {
+  background-position: -36px -1352px;
+}
+i.flag.ls:before,
+i.flag.lesotho:before {
+  background-position: -36px -1378px;
+}
+i.flag.lt:before,
+i.flag.lithuania:before {
+  background-position: -36px -1404px;
+}
+i.flag.lu:before,
+i.flag.luxembourg:before {
+  background-position: -36px -1430px;
+}
+i.flag.lv:before,
+i.flag.latvia:before {
+  background-position: -36px -1456px;
+}
+i.flag.ly:before,
+i.flag.libya:before {
+  background-position: -36px -1482px;
+}
+i.flag.ma:before,
+i.flag.morocco:before {
+  background-position: -36px -1508px;
+}
+i.flag.mc:before,
+i.flag.monaco:before {
+  background-position: -36px -1534px;
+}
+i.flag.md:before,
+i.flag.moldova:before {
+  background-position: -36px -1560px;
+}
+i.flag.me:before,
+i.flag.montenegro:before {
+  background-position: -36px -1586px;
+}
+i.flag.mg:before,
+i.flag.madagascar:before {
+  background-position: -36px -1613px;
+}
+i.flag.mh:before,
+i.flag.marshall.islands:before {
+  background-position: -36px -1639px;
+}
+i.flag.mk:before,
+i.flag.macedonia:before {
+  background-position: -36px -1665px;
+}
+i.flag.ml:before,
+i.flag.mali:before {
+  background-position: -36px -1691px;
+}
+i.flag.mm:before,
+i.flag.myanmar:before,
+i.flag.burma:before {
+  background-position: -73px -1821px;
+}
+i.flag.mn:before,
+i.flag.mongolia:before {
+  background-position: -36px -1743px;
+}
+i.flag.mo:before,
+i.flag.macau:before {
+  background-position: -36px -1769px;
+}
+i.flag.mp:before,
+i.flag.northern.mariana.islands:before {
+  background-position: -36px -1795px;
+}
+i.flag.mq:before,
+i.flag.martinique:before {
+  background-position: -36px -1821px;
+}
+i.flag.mr:before,
+i.flag.mauritania:before {
+  background-position: -36px -1847px;
+}
+i.flag.ms:before,
+i.flag.montserrat:before {
+  background-position: -36px -1873px;
+}
+i.flag.mt:before,
+i.flag.malta:before {
+  background-position: -36px -1899px;
+}
+i.flag.mu:before,
+i.flag.mauritius:before {
+  background-position: -36px -1925px;
+}
+i.flag.mv:before,
+i.flag.maldives:before {
+  background-position: -36px -1951px;
+}
+i.flag.mw:before,
+i.flag.malawi:before {
+  background-position: -36px -1977px;
+}
+i.flag.mx:before,
+i.flag.mexico:before {
+  background-position: -72px 0px;
+}
+i.flag.my:before,
+i.flag.malaysia:before {
+  background-position: -72px -26px;
+}
+i.flag.mz:before,
+i.flag.mozambique:before {
+  background-position: -72px -52px;
+}
+i.flag.na:before,
+i.flag.namibia:before {
+  background-position: -72px -78px;
+}
+i.flag.nc:before,
+i.flag.new.caledonia:before {
+  background-position: -72px -104px;
+}
+i.flag.ne:before,
+i.flag.niger:before {
+  background-position: -72px -130px;
+}
+i.flag.nf:before,
+i.flag.norfolk.island:before {
+  background-position: -72px -156px;
+}
+i.flag.ng:before,
+i.flag.nigeria:before {
+  background-position: -72px -182px;
+}
+i.flag.ni:before,
+i.flag.nicaragua:before {
+  background-position: -72px -208px;
+}
+i.flag.nl:before,
+i.flag.netherlands:before {
+  background-position: -72px -234px;
+}
+i.flag.no:before,
+i.flag.norway:before {
+  background-position: -72px -260px;
+}
+i.flag.np:before,
+i.flag.nepal:before {
+  background-position: -72px -286px;
+}
+i.flag.nr:before,
+i.flag.nauru:before {
+  background-position: -72px -312px;
+}
+i.flag.nu:before,
+i.flag.niue:before {
+  background-position: -72px -338px;
+}
+i.flag.nz:before,
+i.flag.new.zealand:before {
+  background-position: -72px -364px;
+}
+i.flag.om:before,
+i.flag.oman:before {
+  background-position: -72px -390px;
+}
+i.flag.pa:before,
+i.flag.panama:before {
+  background-position: -72px -416px;
+}
+i.flag.pe:before,
+i.flag.peru:before {
+  background-position: -72px -442px;
+}
+i.flag.pf:before,
+i.flag.french.polynesia:before {
+  background-position: -72px -468px;
+}
+i.flag.pg:before,
+i.flag.new.guinea:before {
+  background-position: -72px -494px;
+}
+i.flag.ph:before,
+i.flag.philippines:before {
+  background-position: -72px -520px;
+}
+i.flag.pk:before,
+i.flag.pakistan:before {
+  background-position: -72px -546px;
+}
+i.flag.pl:before,
+i.flag.poland:before {
+  background-position: -72px -572px;
+}
+i.flag.pm:before,
+i.flag.saint.pierre:before {
+  background-position: -72px -598px;
+}
+i.flag.pn:before,
+i.flag.pitcairn.islands:before {
+  background-position: -72px -624px;
+}
+i.flag.pr:before,
+i.flag.puerto.rico:before {
+  background-position: -72px -650px;
+}
+i.flag.ps:before,
+i.flag.palestine:before {
+  background-position: -72px -676px;
+}
+i.flag.pt:before,
+i.flag.portugal:before {
+  background-position: -72px -702px;
+}
+i.flag.pw:before,
+i.flag.palau:before {
+  background-position: -72px -728px;
+}
+i.flag.py:before,
+i.flag.paraguay:before {
+  background-position: -72px -754px;
+}
+i.flag.qa:before,
+i.flag.qatar:before {
+  background-position: -72px -780px;
+}
+i.flag.re:before,
+i.flag.reunion:before {
+  background-position: -72px -806px;
+}
+i.flag.ro:before,
+i.flag.romania:before {
+  background-position: -72px -832px;
+}
+i.flag.rs:before,
+i.flag.serbia:before {
+  background-position: -72px -858px;
+}
+i.flag.ru:before,
+i.flag.russia:before {
+  background-position: -72px -884px;
+}
+i.flag.rw:before,
+i.flag.rwanda:before {
+  background-position: -72px -910px;
+}
+i.flag.sa:before,
+i.flag.saudi.arabia:before {
+  background-position: -72px -936px;
+}
+i.flag.sb:before,
+i.flag.solomon.islands:before {
+  background-position: -72px -962px;
+}
+i.flag.sc:before,
+i.flag.seychelles:before {
+  background-position: -72px -988px;
+}
+i.flag.gb.sct:before,
+i.flag.scotland:before {
+  background-position: -72px -1014px;
+}
+i.flag.sd:before,
+i.flag.sudan:before {
+  background-position: -72px -1040px;
+}
+i.flag.se:before,
+i.flag.sweden:before {
+  background-position: -72px -1066px;
+}
+i.flag.sg:before,
+i.flag.singapore:before {
+  background-position: -72px -1092px;
+}
+i.flag.sh:before,
+i.flag.saint.helena:before {
+  background-position: -72px -1118px;
+}
+i.flag.si:before,
+i.flag.slovenia:before {
+  background-position: -72px -1144px;
+}
+i.flag.sj:before,
+i.flag.svalbard:before,
+i.flag.jan.mayen:before {
+  background-position: -72px -1170px;
+}
+i.flag.sk:before,
+i.flag.slovakia:before {
+  background-position: -72px -1196px;
+}
+i.flag.sl:before,
+i.flag.sierra.leone:before {
+  background-position: -72px -1222px;
+}
+i.flag.sm:before,
+i.flag.san.marino:before {
+  background-position: -72px -1248px;
+}
+i.flag.sn:before,
+i.flag.senegal:before {
+  background-position: -72px -1274px;
+}
+i.flag.so:before,
+i.flag.somalia:before {
+  background-position: -72px -1300px;
+}
+i.flag.sr:before,
+i.flag.suriname:before {
+  background-position: -72px -1326px;
+}
+i.flag.st:before,
+i.flag.sao.tome:before {
+  background-position: -72px -1352px;
+}
+i.flag.sv:before,
+i.flag.el.salvador:before {
+  background-position: -72px -1378px;
+}
+i.flag.sy:before,
+i.flag.syria:before {
+  background-position: -72px -1404px;
+}
+i.flag.sz:before,
+i.flag.swaziland:before {
+  background-position: -72px -1430px;
+}
+i.flag.tc:before,
+i.flag.caicos.islands:before {
+  background-position: -72px -1456px;
+}
+i.flag.td:before,
+i.flag.chad:before {
+  background-position: -72px -1482px;
+}
+i.flag.tf:before,
+i.flag.french.territories:before {
+  background-position: -72px -1508px;
+}
+i.flag.tg:before,
+i.flag.togo:before {
+  background-position: -72px -1534px;
+}
+i.flag.th:before,
+i.flag.thailand:before {
+  background-position: -72px -1560px;
+}
+i.flag.tj:before,
+i.flag.tajikistan:before {
+  background-position: -72px -1586px;
+}
+i.flag.tk:before,
+i.flag.tokelau:before {
+  background-position: -72px -1612px;
+}
+i.flag.tl:before,
+i.flag.timorleste:before {
+  background-position: -72px -1638px;
+}
+i.flag.tm:before,
+i.flag.turkmenistan:before {
+  background-position: -72px -1664px;
+}
+i.flag.tn:before,
+i.flag.tunisia:before {
+  background-position: -72px -1690px;
+}
+i.flag.to:before,
+i.flag.tonga:before {
+  background-position: -72px -1716px;
+}
+i.flag.tr:before,
+i.flag.turkey:before {
+  background-position: -72px -1742px;
+}
+i.flag.tt:before,
+i.flag.trinidad:before {
+  background-position: -72px -1768px;
+}
+i.flag.tv:before,
+i.flag.tuvalu:before {
+  background-position: -72px -1794px;
+}
+i.flag.tw:before,
+i.flag.taiwan:before {
+  background-position: -72px -1820px;
+}
+i.flag.tz:before,
+i.flag.tanzania:before {
+  background-position: -72px -1846px;
+}
+i.flag.ua:before,
+i.flag.ukraine:before {
+  background-position: -72px -1872px;
+}
+i.flag.ug:before,
+i.flag.uganda:before {
+  background-position: -72px -1898px;
+}
+i.flag.um:before,
+i.flag.us.minor.islands:before {
+  background-position: -72px -1924px;
+}
+i.flag.us:before,
+i.flag.america:before,
+i.flag.united.states:before {
+  background-position: -72px -1950px;
+}
+i.flag.uy:before,
+i.flag.uruguay:before {
+  background-position: -72px -1976px;
+}
+i.flag.uz:before,
+i.flag.uzbekistan:before {
+  background-position: -108px 0px;
+}
+i.flag.va:before,
+i.flag.vatican.city:before {
+  background-position: -108px -26px;
+}
+i.flag.vc:before,
+i.flag.saint.vincent:before {
+  background-position: -108px -52px;
+}
+i.flag.ve:before,
+i.flag.venezuela:before {
+  background-position: -108px -78px;
+}
+i.flag.vg:before,
+i.flag.british.virgin.islands:before {
+  background-position: -108px -104px;
+}
+i.flag.vi:before,
+i.flag.us.virgin.islands:before {
+  background-position: -108px -130px;
+}
+i.flag.vn:before,
+i.flag.vietnam:before {
+  background-position: -108px -156px;
+}
+i.flag.vu:before,
+i.flag.vanuatu:before {
+  background-position: -108px -182px;
+}
+i.flag.gb.wls:before,
+i.flag.wales:before {
+  background-position: -108px -208px;
+}
+i.flag.wf:before,
+i.flag.wallis.and.futuna:before {
+  background-position: -108px -234px;
+}
+i.flag.ws:before,
+i.flag.samoa:before {
+  background-position: -108px -260px;
+}
+i.flag.ye:before,
+i.flag.yemen:before {
+  background-position: -108px -286px;
+}
+i.flag.yt:before,
+i.flag.mayotte:before {
+  background-position: -108px -312px;
+}
+i.flag.za:before,
+i.flag.south.africa:before {
+  background-position: -108px -338px;
+}
+i.flag.zm:before,
+i.flag.zambia:before {
+  background-position: -108px -364px;
+}
+i.flag.zw:before,
+i.flag.zimbabwe:before {
+  background-position: -108px -390px;
+}
--- a/client/semantic/src/themes/default/elements/flag.variables
+++ b/client/semantic/src/themes/default/elements/flag.variables
@@ -0,0 +1,13 @@
+/*******************************
+            Flag
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+
+@spritePath: "@{imagePath}/flags.png";
+@width: 16px;
+@height: 11px;
+@verticalAlign: baseline;
+@margin: 0.5em;
--- a/client/semantic/src/themes/default/elements/header.overrides
+++ b/client/semantic/src/themes/default/elements/header.overrides
@@ -0,0 +1,4 @@
+/*******************************
+         Theme Overrides
+*******************************/
+
--- a/client/semantic/src/themes/default/elements/header.variables
+++ b/client/semantic/src/themes/default/elements/header.variables
@@ -0,0 +1,151 @@
+/*******************************
+            Header
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+
+@textTransform: none;
+@fontFamily: @headerFont;
+@fontWeight: @headerFontWeight;
+@lineHeight: @headerLineHeight;
+@lineHeightOffset: @headerLineHeightOffset;
+
+@topMargin: @headerTopMargin;
+@bottomMargin: @headerBottomMargin;
+@margin: @topMargin 0em @bottomMargin;
+
+@firstMargin: -@lineHeightOffset;
+@lastMargin: 0em;
+@horizontalPadding: 0em;
+@verticalPadding: 0em;
+
+/* Sub Heading */
+@subHeadingDistance: @2px;
+@subHeadingFontSize: @relativeTiny;
+@subHeadingFontWeight: @bold;
+@subHeadingTextTransform: uppercase;
+@subHeadingColor: '';
+
+@smallSubHeadingSize: @relativeMini;
+@largeSubHeadingSize: @relativeSmall;
+@hugeSubHeadingSize: @relativeMedium;
+
+/* Sub Header */
+@subHeaderMargin: 0em;
+@subHeaderLineHeight: 1.2em;
+@subHeaderColor: @mutedTextColor;
+
+/* Icon */
+@iconOpacity: 1;
+@iconSize: 1.5em;
+@iconOffset: 0em;
+@iconMargin: 0.75rem;
+@iconAlignment: middle;
+
+/* Image */
+@imageWidth: 2.5em;
+@imageHeight: auto;
+@imageOffset: @lineHeightOffset;
+@imageMargin: @iconMargin;
+@imageAlignment: middle;
+
+/* Label */
+@labelSize: '';
+@labelDistance: 0.5rem;
+@labelVerticalAlign: middle;
+
+/* Content */
+@contentAlignment: top;
+@contentIconAlignment: middle;
+@contentImageAlignment: middle;
+
+/* Paragraph after Header */
+@nextParagraphDistance: 0em;
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Sizing */
+@hugeFontSize   : unit(@h1, em);
+@largeFontSize  : unit(@h2, em);
+@mediumFontSize : unit(@h3, em);
+@smallFontSize  : unit(@h4, em);
+@tinyFontSize   : unit(@h5, em);
+
+/* Sub Header */
+@h1SubHeaderFontSize: @large;
+@h2SubHeaderFontSize: @large;
+@h3SubHeaderFontSize: @medium;
+@h4SubHeaderFontSize: @medium;
+@h5SubHeaderFontSize: @small;
+
+@hugeSubHeaderFontSize  : @h1SubHeaderFontSize;
+@largeSubHeaderFontSize : @h2SubHeaderFontSize;
+@subHeaderFontSize      : @h3SubHeaderFontSize;
+@smallSubHeaderFontSize : @h4SubHeaderFontSize;
+@tinySubHeaderFontSize  : @h5SubHeaderFontSize;
+
+/* Icon Header */
+@iconHeaderSize: 3em;
+@iconHeaderOpacity: 1;
+@iconHeaderMargin: 0.5rem;
+@circularHeaderIconSize: 2em;
+@squareHeaderIconSize: 2em;
+
+/* No Line Height Offset */
+@iconHeaderTopMargin: 2rem;
+@iconHeaderBottomMargin: @bottomMargin;
+@iconHeaderFirstMargin: 0em;
+
+/* Divided */
+@dividedBorderWidth: 1px;
+@dividedBorder: @dividedBorderWidth solid @borderColor;
+@dividedColoredBorderWidth: 2px;
+
+@dividedBorderPadding: @3px;
+@dividedSubHeaderPadding: @3px;
+@dividedIconPadding: 0em;
+
+/* Block */
+@blockBackground: @darkWhite;
+@blockBoxShadow: none;
+@blockBorderWidth: 1px;
+@blockBorder: @blockBorderWidth solid @solidBorderColor;
+@blockHorizontalPadding: @medium;
+@blockVerticalPadding: @mini;
+@blockBorderRadius: @defaultBorderRadius;
+
+@tinyBlock: @tiny;
+@smallBlock: @small;
+@mediumBlock: @medium;
+@largeBlock: @large;
+@hugeBlock: @huge;
+
+/* Attached */
+@attachedOffset: -1px;
+@attachedBoxShadow: none;
+@attachedBorder: 1px solid @solidBorderColor;
+@attachedVerticalPadding: @blockVerticalPadding;
+@attachedHorizontalPadding: @blockHorizontalPadding;
+@attachedBackground: @white;
+@attachedBorderRadius: @blockBorderRadius;
+
+@tinyAttachedSize: @relativeTiny;
+@smallAttachedSize: @relativeSmall;
+@mediumAttachedSize: @relativeMedium;
+@largeAttachedSize: @relativeLarge;
+@bigAttachedSize: @relativeBig;
+@hugeAttachedSize: @relativeHuge;
+
+/* Inverted */
+@invertedColor: @white;
+@invertedSubHeaderColor: @invertedMutedTextColor;
+@invertedDividedBorderColor: @whiteBorderColor;
+@invertedBlockBackground: @lightBlack @subtleGradient;
+@invertedAttachedBackground: @invertedBlockBackground;
+
+/* Floated */
+@floatedMargin: 0.5em;
--- a/client/semantic/src/themes/default/elements/icon.overrides
+++ b/client/semantic/src/themes/default/elements/icon.overrides
--- a/client/semantic/src/themes/default/elements/icon.variables
+++ b/client/semantic/src/themes/default/elements/icon.variables
@@ -0,0 +1,94 @@
+/*******************************
+             Icon
+*******************************/
+
+/*--------------
+   Font Files
+---------------*/
+
+@fontName: 'icons';
+@src:
+  url("@{fontPath}/@{fontName}.eot?#iefix") format('embedded-opentype'),
+  url("@{fontPath}/@{fontName}.woff2") format('woff2'),
+  url("@{fontPath}/@{fontName}.woff") format('woff'),
+  url("@{fontPath}/@{fontName}.ttf") format('truetype'),
+  url("@{fontPath}/@{fontName}.svg#icons") format('svg')
+;
+@fallbackSRC: url("@{fontPath}/@{fontName}.eot");
+
+/*--------------
+ Optional Files
+---------------*/
+
+/* Outline Icons */
+@importOutlineIcons: true;
+@outlineFontName: 'outline-icons';
+@outlineSrc:
+  url("@{fontPath}/@{outlineFontName}.eot?#iefix") format('embedded-opentype'),
+  url("@{fontPath}/@{outlineFontName}.woff2") format('woff2'),
+  url("@{fontPath}/@{outlineFontName}.woff") format('woff'),
+  url("@{fontPath}/@{outlineFontName}.ttf") format('truetype'),
+  url("@{fontPath}/@{outlineFontName}.svg#icons") format('svg')
+;
+@outlineFallbackSRC: url("@{fontPath}/@{outlineFontName}.eot");
+
+/* Brand Icons */
+@importBrandIcons: true;
+@brandFontName: 'brand-icons';
+@brandSrc:
+  url("@{fontPath}/@{brandFontName}.eot?#iefix") format('embedded-opentype'),
+  url("@{fontPath}/@{brandFontName}.woff2") format('woff2'),
+  url("@{fontPath}/@{brandFontName}.woff") format('woff'),
+  url("@{fontPath}/@{brandFontName}.ttf") format('truetype'),
+  url("@{fontPath}/@{brandFontName}.svg#icons") format('svg')
+;
+@brandFallbackSRC: url("@{fontPath}/@{brandFontName}.eot");
+
+/*--------------
+   Definition
+---------------*/
+
+/* Icon Variables */
+@opacity: 1;
+@width: @iconWidth;
+@height: 1em;
+@distanceFromText: 0.25rem;
+
+
+/* Variations */
+@linkOpacity: 0.8;
+@linkDuration: 0.3s;
+@loadingDuration: 2s;
+
+@circularSize: 2em;
+@circularPadding: 0.5em 0em;
+@circularShadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
+
+@borderedSize: 2em;
+@borderedVerticalPadding: ((@borderedSize - @height) / 2);
+@borderedHorizontalPadding: 0em;
+@borderedShadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
+
+@cornerIconSize: 0.45em;
+@cornerIconStroke: 1px;
+@cornerIconShadow:
+  -@cornerIconStroke -@cornerIconStroke 0 @white,
+   @cornerIconStroke -@cornerIconStroke 0 @white,
+  -@cornerIconStroke  @cornerIconStroke 0 @white,
+   @cornerIconStroke  @cornerIconStroke 0 @white
+;
+@cornerIconInvertedShadow:
+  -@cornerIconStroke -@cornerIconStroke 0 @black,
+   @cornerIconStroke -@cornerIconStroke 0 @black,
+  -@cornerIconStroke  @cornerIconStroke 0 @black,
+   @cornerIconStroke  @cornerIconStroke 0 @black
+;
+
+@mini: 0.4em;
+@tiny: 0.5em;
+@small: 0.75em;
+@medium: 1em;
+@large: 1.5em;
+@big: 2em;
+@huge: 4em;
+@massive: 8em;
--- a/client/semantic/src/themes/default/elements/image.overrides
+++ b/client/semantic/src/themes/default/elements/image.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
--- a/client/semantic/src/themes/default/elements/image.variables
+++ b/client/semantic/src/themes/default/elements/image.variables
@@ -0,0 +1,44 @@
+/*******************************
+            Image
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+
+@placeholderColor: transparent;
+@roundedBorderRadius: 0.3125em;
+
+@imageHorizontalMargin: 0.25rem;
+@imageVerticalMargin: 0.5rem;
+@imageBorder: 1px solid rgba(0, 0, 0, 0.1);
+
+/*-------------------
+       Types
+--------------------*/
+
+/* Avatar */
+@avatarSize: 2em;
+@avatarMargin: 0.25em;
+
+
+/*-------------------
+       Variations
+--------------------*/
+
+/* Spaced */
+@spacedDistance: 0.5em;
+
+/* Floated */
+@floatedHorizontalMargin: 1em;
+@floatedVerticalMargin: 1em;
+
+/* Size */
+@miniWidth: 35px;
+@tinyWidth: 80px;
+@smallWidth: 150px;
+@mediumWidth: 300px;
+@largeWidth: 450px;
+@bigWidth: 600px;
+@hugeWidth: 800px;
+@massiveWidth: 960px;
--- a/client/semantic/src/themes/default/elements/input.overrides
+++ b/client/semantic/src/themes/default/elements/input.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
--- a/client/semantic/src/themes/default/elements/input.variables
+++ b/client/semantic/src/themes/default/elements/input.variables
@@ -0,0 +1,101 @@
+/*******************************
+            Input
+*******************************/
+
+/*-------------------
+      Element
+--------------------*/
+
+@inputFont: @pageFont;
+@verticalPadding: @inputVerticalPadding;
+@horizontalPadding: @inputHorizontalPadding;
+
+@lineHeight: @inputLineHeight;
+@lineHeightOffset: ((@lineHeight - 1em) / 2);
+
+@padding: (@verticalPadding - @lineHeightOffset) @horizontalPadding;
+
+@textAlign: left;
+@background: @inputBackground;
+@borderWidth: 1px;
+@border: @borderWidth solid @borderColor;
+@boxShadow: none;
+
+@borderRadius: @defaultBorderRadius;
+@transition:
+  box-shadow @defaultDuration @defaultEasing,
+  border-color @defaultDuration @defaultEasing
+;
+
+/*-------------------
+        Types
+--------------------*/
+
+/* Icon Input */
+@iconWidth: (@verticalPadding * 2) + @glyphWidth;
+@iconOpacity: 0.5;
+@iconFocusOpacity: 1;
+@iconOffset: -0.5em;
+
+@iconDistance: 0em;
+@iconMargin: @iconWidth + @iconDistance;
+@iconTransition: opacity 0.3s @defaultEasing;
+
+@transparentIconWidth: @glyphWidth;
+@transparentIconMargin: 2em;
+
+/* Circular Icon Input */
+@circularIconVerticalOffset: 0.35em;
+@circularIconHorizontalOffset: 0.5em;
+
+/* Labeled Input */
+@labelCornerTop: @borderWidth;
+@labelCornerRight: @borderWidth;
+@labelCornerSize: @relative9px;
+@labelSize: 1em;
+@labelVerticalPadding: (@verticalPadding - @lineHeightOffset);
+
+@labeledMargin: 2.5em;
+@labeledIconInputMargin: 3.25em;
+@labeledIconMargin: 1.25em;
+
+/*-------------------
+        States
+--------------------*/
+
+/* Placeholder */
+@placeholderColor: @inputPlaceholderColor;
+@placeholderFocusColor: @inputPlaceholderFocusColor;
+
+/* Down */
+@downBorderColor: rgba(0, 0, 0, 0.3);
+@downBackground: #FAFAFA;
+@downColor: @textColor;
+@downBoxShadow: none;
+
+/* Focus */
+@focusBorderColor: @focusedFormBorderColor;
+@focusBackground: @background;
+@focusColor: @hoveredTextColor;
+@focusBoxShadow: none;
+
+/* Error */
+@errorBackground: @negativeBackgroundColor;
+@errorColor: @negativeTextColor;
+@errorBorder: @negativeBorderColor;
+@errorBoxShadow: none;
+
+@placeholderErrorColor: lighten(@errorColor, 40);
+@placeholderErrorFocusColor: lighten(@errorColor, 30);
+
+/* Loader */
+@invertedLoaderFillColor: rgba(0, 0, 0, 0.15);
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Inverted */
+@transparentInvertedPlaceholderColor: @invertedUnselectedTextColor;
+@transparentInvertedColor: @white;
+
--- a/client/semantic/src/themes/default/elements/label.overrides
+++ b/client/semantic/src/themes/default/elements/label.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
--- a/client/semantic/src/themes/default/elements/label.variables
+++ b/client/semantic/src/themes/default/elements/label.variables
@@ -0,0 +1,254 @@
+/*******************************
+             Label
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+
+@verticalAlign: baseline;
+@verticalMargin: 0em;
+@horizontalMargin: @relative2px;
+@backgroundColor: #E8E8E8;
+@color: @mutedTextColor;
+@backgroundImage: none;
+@verticalPadding: 0.5833em; /* medium is not @emSize custom value required */
+@horizontalPadding: 0.833em;
+@borderRadius: @absoluteBorderRadius;
+@textTransform: none;
+@fontWeight: @bold;
+@borderWidth: 1px;
+@border: 0px solid transparent;
+
+@lineHeightOffset: -(@verticalPadding / 2);
+
+@labelTransitionDuration: @defaultDuration;
+@labelTransitionEasing: @defaultEasing;
+@transition: background @labelTransitionDuration @labelTransitionEasing;
+
+/* Group */
+@groupVerticalMargin: 0.5em;
+@groupHorizontalMargin: 0.5em;
+
+/*-------------------
+        Parts
+--------------------*/
+
+/* Link */
+@linkOpacity: 0.5;
+@linkTransition: @labelTransitionDuration opacity @labelTransitionEasing;
+
+/* Icon */
+@iconDistance: 0.75em;
+
+/* Image */
+@imageHeight: (1em + @verticalPadding * 2);
+
+/* Detail */
+@detailFontWeight: @bold;
+@detailOpacity: 0.8;
+@detailIconDistance: 0.25em;
+@detailMargin: 1em;
+
+/* Delete */
+@deleteOpacity: @linkOpacity;
+@deleteSize: @relativeSmall;
+@deleteMargin: 0.5em;
+@deleteTransition: background @labelTransitionDuration @labelTransitionEasing;
+
+/*-------------------
+        Types
+--------------------*/
+
+/* Image Label */
+@imageLabelBackground: @backgroundColor;
+@imageLabelVerticalPadding: @verticalPadding;
+@imageLabelHorizontalPadding: @horizontalPadding;
+@imageLabelTextDistance: 0.5em;
+@imageLabelDetailDistance: @imageLabelTextDistance;
+@imageLabelBorderRadius: @borderRadius;
+@imageLabelBoxShadow: none;
+@imageLabelPadding: @imageLabelVerticalPadding @imageLabelHorizontalPadding @imageLabelVerticalPadding @imageLabelTextDistance;
+
+@imageLabelImageMargin: -@verticalPadding @imageLabelTextDistance -@verticalPadding -@imageLabelTextDistance;
+@imageLabelImageBorderRadius: @imageLabelBorderRadius 0em 0em @imageLabelBorderRadius;
+@imageLabelImageHeight: @imageHeight;
+
+@imageLabelDetailBackground: @strongTransparentBlack;
+@imageLabelDetailPadding: @imageLabelVerticalPadding @imageLabelHorizontalPadding;
+@imageLabelDetailMargin: -@imageLabelVerticalPadding -@imageLabelHorizontalPadding -@imageLabelVerticalPadding @imageLabelDetailDistance;
+
+/*-------------------
+        States
+--------------------*/
+
+/* Hover */
+@labelHoverBackgroundColor: #E0E0E0;
+@labelHoverBackgroundImage: none;
+@labelHoverTextColor: @hoveredTextColor;
+
+/* Active */
+@labelActiveBackgroundColor: #D0D0D0;
+@labelActiveBackgroundImage: none;
+@labelActiveTextColor: @selectedTextColor;
+
+/* Active Hover */
+@labelActiveHoverBackgroundColor: #C8C8C8;
+@labelActiveHoverBackgroundImage: none;
+@labelActiveHoverTextColor: @selectedTextColor;
+
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Basic */
+@basicBackground: none @white;
+@basicBorderWidth: 1px;
+@basicBorder: @basicBorderWidth solid @borderColor;
+@basicColor: @textColor;
+@basicBoxShadow: none;
+
+@basicHoverBackground: @basicBackground;
+@basicHoverColor: @linkHoverColor;
+@basicHoverBorder: @basicBorder;
+@basicHoverBoxShadow: @basicBoxShadow;
+
+/* Tag */
+@tagCircleColor: @white;
+@tagCircleSize: 0.5em;
+@tagHorizontalPadding: 1.5em;
+@tagCircleBoxShadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
+@tagTriangleRightOffset: 100%;
+@tagTriangleTopOffset: 50%;
+@tagTriangleSize: 1.56em;
+@tagTriangleBackgroundImage: none;
+@tagTransition: none; /* Avoids error with background: inherit; on animation */
+
+/* Ribbon */
+@ribbonTriangleSize: 1.2em;
+@ribbonShadowColor: rgba(0, 0, 0, 0.15);
+
+@ribbonMargin: 1rem;
+@ribbonOffset: calc(-@ribbonMargin - @ribbonTriangleSize);
+@ribbonDistance: calc(@ribbonMargin + @ribbonTriangleSize);
+@rightRibbonOffset:  calc(100% + @ribbonMargin + @ribbonTriangleSize);
+
+@ribbonImageTopDistance: 1rem;
+@ribbonImageMargin: -0.05rem; /* Rounding Offset on Triangle */
+@ribbonImageOffset: calc(-@ribbonImageMargin - @ribbonTriangleSize);
+@rightRibbonImageOffset:  calc(100% + @ribbonImageMargin + @ribbonTriangleSize);
+
+@ribbonTableMargin: @relativeMini; /* Rounding Offset on Triangle */
+@ribbonTableOffset: calc(-@ribbonTableMargin - @ribbonTriangleSize);
+@rightRibbonTableOffset:  calc(100% + @ribbonTableMargin + @ribbonTriangleSize);
+
+
+/* Colors */
+@redTextColor: @white;
+@orangeTextColor: @white;
+@yellowTextColor: @white;
+@oliveTextColor: @white;
+@greenTextColor: @white;
+@tealTextColor: @white;
+@blueTextColor: @white;
+@violetTextColor: @white;
+@purpleTextColor: @white;
+@pinkTextColor: @white;
+@brownTextColor: @white;
+@greyTextColor: @white;
+@blackTextColor: @white;
+
+@redHoverTextColor: @white;
+@orangeHoverTextColor: @white;
+@yellowHoverTextColor: @white;
+@oliveHoverTextColor: @white;
+@greenHoverTextColor: @white;
+@tealHoverTextColor: @white;
+@blueHoverTextColor: @white;
+@violetHoverTextColor: @white;
+@purpleHoverTextColor: @white;
+@pinkHoverTextColor: @white;
+@brownHoverTextColor: @white;
+@greyHoverTextColor: @white;
+@blackHoverTextColor: @white;
+
+@redRibbonShadow: darken(@red, 10);
+@orangeRibbonShadow: darken(@orange, 10);
+@yellowRibbonShadow: darken(@yellow, 10);
+@oliveRibbonShadow: darken(@olive, 10);
+@greenRibbonShadow: darken(@green, 10);
+@tealRibbonShadow: darken(@teal, 10);
+@blueRibbonShadow: darken(@blue, 10);
+@violetRibbonShadow: darken(@violet, 10);
+@purpleRibbonShadow: darken(@purple, 10);
+@pinkRibbonShadow: darken(@pink, 10);
+@brownRibbonShadow: darken(@brown, 10);
+@greyRibbonShadow: darken(@grey, 10);
+@blackRibbonShadow: darken(@black, 10);
+
+/* Attached */
+@attachedSegmentPadding: 2rem;
+@attachedVerticalPadding: 0.75em;
+@attachedHorizontalPadding: 1em;
+
+@attachedCornerBorderRadius: @3px;
+@attachedBorderRadius: @borderRadius;
+
+/* Corner */
+@cornerSizeRatio: 1;
+@cornerTransition: color @labelTransitionDuration @labelTransitionEasing;
+@cornerTriangleSize: 4em;
+@cornerTriangleTransition: border-color @labelTransitionDuration @labelTransitionEasing;
+@cornerTriangleZIndex: 1;
+
+@cornerIconSize: @relativeLarge;
+@cornerIconTopOffset: @relative9px;
+@cornerIconLeftOffset: @relative11px;
+
+/* Corner Text */
+@cornerTextWidth: 3em;
+@cornerTextWeight: @bold;
+@cornerTextSize: 1em;
+
+/* Horizontal */
+@horizontalLabelMinWidth: 3em;
+@horizontalLabelMargin: 0.5em;
+@horizontalLabelVerticalPadding: 0.4em;
+
+/* Circular Padding */
+@circularPadding: 0.5em;
+@circularMinSize: 2em;
+@emptyCircleSize: 0.5em;
+
+/* Pointing */
+@pointingBorderColor: inherit;
+@pointingBorderWidth: @borderWidth;
+@pointingVerticalDistance: 1em;
+@pointingTriangleSize: 0.6666em;
+@pointingHorizontalDistance: @pointingTriangleSize;
+
+@pointingTriangleTransition: background @labelTransitionDuration @labelTransitionEasing;
+@pointingTriangleZIndex: 2;
+
+/* Basic Pointing */
+@basicPointingTriangleOffset: -@pointingBorderWidth;
+
+/* Floating */
+@floatingTopOffset: -1em;
+@floatingLeftOffset: -1.5em;
+@floatingZIndex: 100;
+
+/*-------------------
+        Group
+--------------------*/
+
+/* Sizing */
+@mini    : @9px;
+@tiny    : @10px;
+@small   : @11px;
+@medium  : @12px;
+@large   : @absoluteMedium;
+@big     : @absoluteBig;
+@huge    : @absoluteHuge;
+@massive : @absoluteMassive;
--- a/client/semantic/src/themes/default/elements/list.overrides
+++ b/client/semantic/src/themes/default/elements/list.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
--- a/client/semantic/src/themes/default/elements/list.variables
+++ b/client/semantic/src/themes/default/elements/list.variables
@@ -0,0 +1,224 @@
+/*******************************
+             List
+*******************************/
+
+/*-------------------
+         View
+--------------------*/
+
+/* List */
+@listStyleType: none;
+@listStylePosition: outside;
+@margin: 1em 0em;
+@verticalPadding: 0em;
+@horizontalPadding: 0em;
+
+/* List Item */
+@itemVerticalPadding: @relative3px;
+@itemHorizontalPadding: 0em;
+@itemPadding: @itemVerticalPadding @itemHorizontalPadding;
+@itemLineHeight: @relativeLarge;
+
+/* Sub List */
+@childListPadding: 0.75em 0em 0.25em 0.5em;
+@childListIndent: 1em;
+
+/* Sub List Item */
+@childItemVerticalPadding: @relative2px;
+@childItemHorizontalPadding: 0em;
+@childItemPadding: @childItemVerticalPadding @childItemHorizontalPadding;
+@childItemLineHeight: inherit;
+
+/*-------------------
+      Elements
+--------------------*/
+
+/* Icon */
+@iconDistance: @relative4px;
+@iconOffset: 0em;
+@iconTransition: color @defaultDuration @defaultEasing;
+@iconVerticalAlign: top;
+@iconContentVerticalAlign: top;
+
+/* Image */
+@imageDistance: 0.5em;
+@imageAlign: top;
+
+/* Content */
+@contentDistance: 0.5em;
+@contentLineHeight: @itemLineHeight;
+@contentLineHeightOffset: (@contentLineHeight - 1em) / 2;
+@contentVerticalAlign: top;
+
+/* Header */
+@itemHeaderFontFamily: @headerFont;
+@itemHeaderFontWeight: @bold;
+@itemHeaderColor: @textColor;
+
+/* Description */
+@itemDescriptionColor: rgba(0, 0, 0, 0.7);
+
+/* Link */
+@itemLinkColor: @linkColor;
+@itemLinkHoverColor: @linkHoverColor;
+
+/* Header Link */
+@itemHeaderLinkColor: @itemLinkColor;
+@itemHeaderLinkHoverColor: @itemLinkHoverColor;
+
+/* Linked Icon */
+@itemLinkIconColor: @lightTextColor;
+@itemLinkIconHoverColor: @textColor;
+@invertedIconLinkColor: @invertedLightTextColor;
+
+/*-------------------
+        States
+--------------------*/
+
+@disabledColor: @disabledTextColor;
+@invertedDisabledColor: @invertedDisabledTextColor;
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Float */
+@floatDistance: 1em;
+@leftFloatMargin: 0em @floatDistance 0em 0em;
+@rightFloatMargin: 0em 0em 0em @floatDistance;
+
+/* Horizontal */
+@horizontalSpacing: 1em;
+@horizontalIconDistance: 0.25em;
+@horizontalVerticalAlign: middle;
+
+/* Inverted */
+@invertedListIconColor: @invertedLightTextColor;
+@invertedHeaderColor: @invertedTextColor;
+@invertedDescriptionColor: @invertedLightTextColor;
+@invertedItemLinkColor: @invertedTextColor;
+@invertedItemLinkHoverColor: @linkHoverColor;
+
+/* Link List */
+@linkListItemColor: @unselectedTextColor;
+@linkListItemHoverColor: @hoveredTextColor;
+@linkListItemDownColor: @pressedTextColor;
+@linkListItemActiveColor: @selectedTextColor;
+@linkListTransition:
+  @defaultDuration color @defaultEasing
+;
+
+/* Inverted Link List */
+@invertedLinkListItemColor: @invertedUnselectedTextColor;
+@invertedLinkListItemHoverColor: @invertedHoveredTextColor;
+@invertedLinkListItemDownColor: @invertedPressedTextColor;
+@invertedLinkListItemActiveColor: @invertedSelectedTextColor;
+
+/* Selection List */
+@selectionListItemMargin: 0em;
+@selectionListItemBorderRadius: 0.5em;
+@selectionListItemVerticalPadding: 0.5em;
+@selectionListItemHorizontalPadding: 0.5em;
+@selectionListTransition:
+  @defaultDuration color @defaultEasing,
+  @defaultDuration padding-left @defaultEasing,
+  @defaultDuration background-color @defaultEasing
+;
+
+/* Selection List States */
+@selectionListBackground: transparent;
+@selectionListColor: @unselectedTextColor;
+@selectionListHoverBackground: @subtleTransparentBlack;
+@selectionListHoverColor: @hoveredTextColor;
+@selectionListDownBackground: @transparentBlack;
+@selectionListDownColor: @pressedTextColor;
+@selectionListActiveBackground: @transparentBlack;
+@selectionListActiveColor: @selectedTextColor;
+
+/* Inverted Selection List */
+@invertedSelectionListBackground: transparent;
+@invertedSelectionListColor: @invertedUnselectedTextColor;
+@invertedSelectionListHoverBackground: @subtleTransparentWhite;
+@invertedSelectionListHoverColor: @invertedHoveredTextColor;
+@invertedSelectionListDownBackground: @transparentWhite;
+@invertedSelectionListDownColor: @invertedPressedTextColor;
+@invertedSelectionListActiveBackground: @transparentWhite;
+@invertedSelectionListActiveColor: @invertedSelectedTextColor;
+
+/* Animated List */
+@animatedDuration: 0.25s;
+@animatedDelay: 0.1s;
+@animatedListTransition:
+  @animatedDuration color @defaultEasing @animatedDelay,
+  @animatedDuration padding-left @defaultEasing @animatedDelay,
+  @animatedDuration background-color @defaultEasing @animatedDelay
+;
+@animatedListIndent: 1em;
+
+/* Bulleted */
+@bulletDistance: 1.25rem;
+@bulletOffset: -@bulletDistance;
+
+@bulletOpacity: 1;
+@bulletCharacter: '•';
+@bulletColor: inherit;
+@bulletLinkColor: @textColor;
+@bulletVerticalAlign: top;
+@bulletChildDistance: @bulletDistance;
+
+/* Horizontal Bullets */
+@horizontalBulletColor: @textColor;
+@horizontalBulletSpacing: @bulletDistance + 0.5em;
+
+/* Ordered List */
+@orderedCountName: ordered;
+@orderedCountContent: counters(ordered, ".") " ";
+@orderedCountColor: @textColor;
+@orderedCountDistance: 1.25rem;
+@orderedCountOpacity: 0.8;
+@orderedCountTextAlign: right;
+@orderedCountVerticalAlign: middle;
+
+@orderedChildCountDistance: 1em;
+@orderedChildCountOffset: -2em;
+
+@orderedInvertedCountColor: @invertedLightTextColor;
+
+/* Horizontal Ordered */
+@horizontalOrderedCountDistance: 0.5em;
+
+/* Divided */
+@dividedBorderWidth: 1px;
+@dividedBorder: @dividedBorderWidth solid @borderColor;
+@dividedInvertedBorderColor: @whiteBorderColor;
+@dividedChildListBorder: none;
+@dividedChildItemBorder: none;
+
+/* Divided Horizontal */
+@horizontalDividedSpacing: (@horizontalSpacing / 2);
+@horizontalDividedLineHeight: 0.6;
+
+/* Divided */
+@celledBorderWidth: 1px;
+@celledBorder: @celledBorderWidth solid @borderColor;
+@celledInvertedBorder: @dividedBorderWidth solid @whiteBorderColor;
+@celledHorizontalPadding: 0.5em;
+@celledChildListBorder: none;
+@celledChildItemBorder: none;
+
+/* Divided Horizontal */
+@horizontalCelledSpacing: (@horizontalSpacing / 2);
+@horizontalCelledLineHeight: 0.6;
+
+/* Relaxed */
+@relaxedItemVerticalPadding: @relative6px;
+@relaxedChildItemVerticalPadding: @relative3px;
+@relaxedHeaderMargin: 0.25rem;
+@relaxedHorizontalPadding: 1rem;
+
+/* Very Relaxed */
+@veryRelaxedItemVerticalPadding: @relative12px;
+@veryRelaxedChildItemVerticalPadding: @relative4px;
+@veryRelaxedHeaderMargin: 0.5rem;
+@veryRelaxedHorizontalPadding: 1.5rem;
+
--- a/client/semantic/src/themes/default/elements/loader.overrides
+++ b/client/semantic/src/themes/default/elements/loader.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
--- a/client/semantic/src/themes/default/elements/loader.variables
+++ b/client/semantic/src/themes/default/elements/loader.variables
@@ -0,0 +1,73 @@
+/*******************************
+             Loader
+*******************************/
+
+/* Some global loader styles defined in site.variables */
+// @loaderSpeed
+// @loaderLineWidth
+// @loaderFillColor
+// @loaderLineColor
+// @invertedLoaderFillColor
+// @invertedLoaderLineColor
+
+/*-------------------
+      Standard
+--------------------*/
+
+@loaderTopOffset: 50%;
+@loaderLeftOffset: 50%;
+
+@shapeBorderColor: @loaderLineColor transparent transparent;
+@invertedShapeBorderColor: @invertedLoaderLineColor transparent transparent;
+
+/*-------------------
+        Types
+--------------------*/
+
+/* Text */
+@textDistance: @relativeMini;
+@loaderTextColor: @textColor;
+@invertedLoaderTextColor: @invertedTextColor;
+
+
+/*-------------------
+        States
+--------------------*/
+
+@indeterminateDirection: reverse;
+@indeterminateSpeed: (2 * @loaderSpeed);
+
+/*-------------------
+      Variations
+--------------------*/
+
+@inlineVerticalAlign: middle;
+@inlineMargin: 0em;
+
+/* Exact Sizes (Avoids Rounding Errors) */
+@mini    : @14px;
+@tiny    : @16px;
+@small   : @24px;
+@medium  : @32px;
+@large   : @48px;
+@big     : @52px;
+@huge    : @58px;
+@massive : @64px;
+
+@miniOffset: 0em 0em 0em -(@mini / 2);
+@tinyOffset: 0em 0em 0em -(@tiny / 2);
+@smallOffset: 0em 0em 0em -(@small / 2);
+@mediumOffset: 0em 0em 0em -(@medium / 2);
+@largeOffset: 0em 0em 0em -(@large / 2);
+@bigOffset: 0em 0em 0em -(@big / 2);
+@hugeOffset: 0em 0em 0em -(@huge / 2);
+@massiveOffset: 0em 0em 0em -(@massive / 2);
+
+@tinyFontSize: @relativeTiny;
+@miniFontSize: @relativeMini;
+@smallFontSize: @relativeSmall;
+@mediumFontSize: @relativeMedium;
+@largeFontSize: @relativeLarge;
+@bigFontSize: @relativeBig;
+@hugeFontSize: @relativeHuge;
+@massiveFontSize: @relativeMassive;
--- a/client/semantic/src/themes/default/elements/placeholder.overrides
+++ b/client/semantic/src/themes/default/elements/placeholder.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
--- a/client/semantic/src/themes/default/elements/placeholder.variables
+++ b/client/semantic/src/themes/default/elements/placeholder.variables
@@ -0,0 +1,55 @@
+@placeholderMaxWidth: 30rem;
+
+/* Key Content Sizing */
+@placeholderLineMargin: @relative12px;
+@placeholderHeaderLineHeight: @relative9px;
+@placeholderLineHeight: @relative7px;
+@placeholderParagraphLineHeight: @placeholderLineHeight;
+
+@placeholderSpacing: @relative20px;
+
+/* Interval between consecutive placeholders */
+@placeholderAnimationInterval: 0.15s;
+
+/* Repeated Placeholder */
+@consecutivePlaceholderSpacing: 2rem;
+
+/* Image */
+@placeholderImageHeight: 100px;
+
+/* Header Image */
+@placeholderImageWidth: 3em;
+@placeholderImageTextIndent: @10px;
+
+/* Paragraph */
+@placeholderHeaderLineOneOutdent: 20%;
+@placeholderHeaderLineTwoOutdent: 60%;
+
+@placeholderLineOneOutdent: @placeholderFullLineOutdent;
+@placeholderLineTwoOutdent: @placeholderMediumLineOutdent;
+@placeholderLineThreeOutdent: @placeholderVeryLongLineOutdent;
+@placeholderLineFourOutdent: @placeholderLongLineOutdent;
+@placeholderLineFiveOutdent: @placeholderShortLineOutdent;
+
+
+/* Glow Gradient */
+@placeholderLoadingAnimationDuration: 2s;
+@placeholderLoadingGradientWidth: 1200px;
+@placeholderLoadingGradient: linear-gradient(to right,
+  rgba(0, 0, 0, 0.08) 0%,
+  rgba(0, 0, 0, 0.15) 15%,
+  rgba(0, 0, 0, 0.08) 30%
+);
+@placeholderInvertedLoadingGradient: linear-gradient(to right,
+  rgba(255, 255, 255, 0.08) 0%,
+  rgba(255, 255, 255, 0.14) 15%,
+  rgba(255, 255, 255, 0.08) 30%
+);
+
+/* Variations */
+@placeholderFullLineOutdent: 0%;
+@placeholderVeryLongLineOutdent: 10%;
+@placeholderLongLineOutdent: 35%;
+@placeholderMediumLineOutdent: 50%;
+@placeholderShortLineOutdent: 65%;
+@placeholderVeryShortLineOutdent: 80%;
--- a/client/semantic/src/themes/default/elements/rail.overrides
+++ b/client/semantic/src/themes/default/elements/rail.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
--- a/client/semantic/src/themes/default/elements/rail.variables
+++ b/client/semantic/src/themes/default/elements/rail.variables
@@ -0,0 +1,34 @@
+/*******************************
+            Rail
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+
+@width: 300px;
+@height: 100%;
+
+@distance: 4rem;
+@splitDistance: (@distance / 2);
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Close */
+@closeDistance: 2em;
+@veryCloseDistance: 1em;
+
+@splitCloseDistance: (@closeDistance / 2);
+@splitVeryCloseDistance: (@veryCloseDistance / 2);
+
+@closeWidth: ~"calc("@width~" + "@splitCloseDistance~")";
+@veryCloseWidth: ~"calc("@width~" + "@splitVeryCloseDistance~")";
+
+/* Dividing */
+@dividingBorder: 1px solid @borderColor;
+@dividingDistance: 5rem;
+@splitDividingDistance: (@dividingDistance / 2);
+@dividingWidth: @width + @splitDividingDistance;
+
--- a/client/semantic/src/themes/default/elements/reveal.overrides
+++ b/client/semantic/src/themes/default/elements/reveal.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
--- a/client/semantic/src/themes/default/elements/reveal.variables
+++ b/client/semantic/src/themes/default/elements/reveal.variables
@@ -0,0 +1,18 @@
+/*******************************
+            Reveal
+*******************************/
+
+@transitionDelay: 0.1s;
+@transitionDuration: 0.5s;
+@transitionEasing: cubic-bezier(0.175, 0.885, 0.320, 1);
+@transition: all @transitionDuration @defaultEasing @transitionDelay;
+
+@bottomZIndex: 2;
+@topZIndex: 3;
+@activeZIndex: 4;
+@overlayZIndex: 5;
+
+/* Types */
+@rotateDegrees: 110deg;
+@moveTransition: transform @transitionDuration @transitionEasing @transitionDelay;
+@slideTransition: transform @transitionDuration @defaultEasing @transitionDelay;
--- a/client/semantic/src/themes/default/elements/segment.overrides
+++ b/client/semantic/src/themes/default/elements/segment.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
--- a/client/semantic/src/themes/default/elements/segment.variables
+++ b/client/semantic/src/themes/default/elements/segment.variables
@@ -0,0 +1,154 @@
+/*******************************
+            Segment
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+
+@background: @white;
+@borderWidth: 1px;
+@border: @borderWidth solid @borderColor;
+
+@boxShadow: @subtleShadow;
+@verticalPadding: 1em;
+@horizontalPadding: 1em;
+@padding: @verticalPadding @horizontalPadding;
+
+@verticalMargin: 1rem;
+@horizontalMargin: 0em;
+@margin: @verticalMargin @horizontalMargin;
+@borderRadius: @defaultBorderRadius;
+
+/*-------------------
+       Group
+--------------------*/
+
+@groupedMargin: @margin;
+@groupedBorder: @border;
+@groupedBoxShadow: @boxShadow;
+@groupedBorderRadius: @borderRadius;
+
+@nestedGroupMargin: @verticalMargin @verticalMargin;
+
+@groupedSegmentBorder: none;
+@groupedSegmentDivider: @border;
+@groupedSegmentMargin: 0em;
+@groupedSegmentWidth: auto;
+@groupedSegmentBoxShadow: none;
+
+/*-------------------
+       Coupling
+--------------------*/
+
+/* Page Grid Segment */
+@pageGridMargin: (2 * @verticalPadding);
+
+/*******************************
+            Types
+*******************************/
+
+/* Placeholder */
+@placeholderBackground: @offWhite;
+@placeholderPadding: @padding;
+@placeholderBorderColor: @borderColor;
+@placeholderBoxShadow: 0px 2px 25px 0 rgba(34, 36, 38, 0.05) inset;
+@placeholderMinHeight: 18rem;
+@placeholderContentMaxWidth: 15rem;
+@placeholderContentInlineButtonMargin: 0px @5px 0px 0px;
+
+
+/* Piled */
+@piledZIndex: auto;
+@piledMargin: 3em;
+@piledBoxShadow: '';
+@piledDegrees: 1.2deg;
+@piledBorder: @border;
+
+/* Circular */
+@circularPadding: 2em;
+
+/* Stacked */
+@stackedHeight: 6px;
+@stackedPageBackground: @subtleTransparentBlack;
+@stackedPadding: @verticalPadding + (0.4em);
+@tallStackedPadding: @verticalPadding + (0.8em);
+
+/*******************************
+            States
+*******************************/
+
+/* Loading Dimmer */
+@loaderDimmerColor: rgba(255, 255, 255, 0.8);
+@loaderDimmerZIndex: 100;
+
+/* Loading Spinner */
+@loaderSize: 3em;
+@loaderLineZIndex: 101;
+
+
+/*******************************
+            Variations
+*******************************/
+
+
+/* Raised */
+@raisedBoxShadow: @floatingShadow;
+
+/* Padded */
+@paddedSegmentPadding: 1.5em;
+@veryPaddedSegmentPadding: 3em;
+
+/* Attached */
+@attachedTopOffset: 0px;
+@attachedBottomOffset: 0px;
+@attachedHorizontalOffset: -@borderWidth;
+@attachedWidth: calc(100% - (@attachedHorizontalOffset * 2));
+@attachedBoxShadow: none;
+@attachedBorder: @borderWidth solid @solidBorderColor;
+@attachedBottomBoxShadow:
+  @boxShadow,
+  @attachedBoxShadow
+;
+
+/* Inverted */
+@invertedBackground: @black;
+
+/* Floated */
+@floatedDistance: 1em;
+
+/* Basic */
+@basicBackground: none transparent;
+@basicBorder: none;
+@basicBoxShadow: none;
+@basicBorderRadius: 0px;
+
+/* Colors */
+@coloredBorderSize: 2px;
+
+/* Ordinality */
+@secondaryBackground: @darkWhite;
+@secondaryColor: @mutedTextColor;
+
+@tertiaryBackground:  @midWhite;
+@tertiaryColor: @mutedTextColor;
+
+@secondaryInvertedLightness: 0.2;
+@secondaryInvertedBackground:
+  lighten(@black, (@secondaryInvertedLightness * 100))
+  linear-gradient(
+    rgba(255, 255, 255, @secondaryInvertedLightness) 0%,
+    rgba(255, 255, 255, @secondaryInvertedLightness) 100%
+  )
+;
+@secondaryInvertedColor: @invertedMutedTextColor;
+
+@tertiaryInvertedLightness: 0.35;
+@tertiaryInvertedBackground:
+  lighten(@black, (@tertiaryInvertedLightness * 100))
+  linear-gradient(
+    rgba(255, 255, 255, @tertiaryInvertedLightness) 0%,
+    rgba(255, 255, 255, @tertiaryInvertedLightness) 100%
+  )
+;
+@tertiaryInvertedColor: @invertedMutedTextColor;
--- a/client/semantic/src/themes/default/elements/step.overrides
+++ b/client/semantic/src/themes/default/elements/step.overrides
--- a/client/semantic/src/themes/default/elements/step.variables
+++ b/client/semantic/src/themes/default/elements/step.variables
@@ -0,0 +1,130 @@
+/*******************************
+             Step
+*******************************/
+
+/*-------------------
+       Group
+--------------------*/
+
+@stepMargin: 1em 0em;
+@stepsBorderRadius: @defaultBorderRadius;
+@stepsBackground: '';
+@stepsBoxShadow: none;
+@stepsBorder: 1px solid @borderColor;
+
+/*-------------------
+      Element
+--------------------*/
+
+@verticalMargin: 0em;
+@horizontalMargin: 0em;
+
+@arrowSize: @relativeLarge;
+@verticalPadding: @relativeLarge;
+@horizontalPadding: 2em;
+
+@transition:
+  background-color @defaultDuration @defaultEasing,
+  opacity @defaultDuration @defaultEasing,
+  color @defaultDuration @defaultEasing,
+  box-shadow @defaultDuration @defaultEasing
+;
+@lineHeight: @relativeLarge;
+@alignItems: center;
+@justifyContent: center;
+@backgroundColor: @white;
+@background: @backgroundColor;
+@borderRadius: 0em;
+@borderWidth: 1px;
+@boxShadow: none;
+@border: none;
+@divider: @borderWidth solid @borderColor;
+
+/* Icon */
+@iconDistance: 1rem;
+@iconSize: 2.5em;
+@iconAlign: middle;
+
+/* Title */
+@titleFontFamily: @headerFont;
+@titleFontWeight: @bold;
+@titleFontSize: @relativeLarge;
+@titleColor: @darkTextColor;
+
+/* Description */
+@descriptionDistance: 0.25em;
+@descriptionFontSize: @relativeSmall;
+@descriptionFontWeight: @normal;
+@descriptionColor: @textColor;
+
+
+/* Arrow */
+@arrowBackgroundColor: @backgroundColor;
+@arrowTopOffset: 50%;
+@arrowRightOffset: 0%;
+@arrowBorderWidth: 0px @borderWidth @borderWidth 0px;
+
+@arrowDisplay: block;
+@lastArrowDisplay: none;
+
+@activeArrowDisplay: block;
+@activeLastArrowDisplay: none;
+
+/* Mobile */
+@mobileIconDistance: @iconDistance;
+
+/*-------------------
+       Types
+--------------------*/
+
+/* Vertical */
+@verticalDivider: @divider;
+@verticalArrowTopOffset: 50%;
+@verticalArrowRightOffset: 0%;
+@verticalArrowBorderWidth: 0px @borderWidth @borderWidth 0px;
+
+@verticalArrowDisplay: none;
+@verticalLastArrowDisplay: @verticalArrowDisplay;
+
+@verticalActiveArrowDisplay: block;
+@verticalActiveLastArrowDisplay: block;
+
+/*-------------------
+      Variations
+--------------------*/
+
+@attachedHorizontalOffset: -@borderWidth;
+@attachedVerticalOffset: 0;
+@attachedWidth: calc(100% + (-@attachedHorizontalOffset * 2));
+
+@orderedFontFamily: inherit;
+@orderedFontWeight: @bold;
+
+/*-------------------
+       States
+--------------------*/
+
+/* Completed */
+@completedColor: @positiveColor;
+
+/* Hover */
+@hoverBackground: @offWhite;
+@hoverColor: @hoveredTextColor;
+
+/* Down */
+@downBackground: @darkWhite;
+@downColor: @pressedTextColor;
+
+/* Active */
+@activeBackground: @darkWhite;
+@activeColor: @linkColor;
+@activeIconColor: @darkTextColor;
+
+/* Active + Hover */
+@activeHoverBackground: @lightGrey;
+@activeHoverColor: @textColor;
+
+
+/* Disabled */
+@disabledBackground: @background;
+@disabledColor: @disabledTextColor;