diff --git a/css/macro.css b/css/macro.css
new file mode 100644
index 00000000..602158ca
--- /dev/null
+++ b/css/macro.css
@@ -0,0 +1,76 @@
+.main-wrapper {
+  width: 500px; }
+
+h1 {
+  margin-bottom: 3rem; }
+
+.action--item {
+  padding-left: 8px; }
+
+.action--item.active,
+.action--item.active:hover {
+  background-color: white;
+  font-weight: bold;
+  color: black;
+  border-color: black;
+  z-index: 10; }
+
+.macro-settings {
+  border: 1px solid black;
+  border-top-color: #999;
+  z-index: 100; }
+
+.macro-settings .helper {
+  position: absolute;
+  display: block;
+  height: 13px;
+  background: #FFF;
+  width: 100%;
+  left: 0;
+  top: -14px; }
+
+.action--item.active.callout,
+.macro-settings.callout {
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5); }
+
+.list-group-item .move-handle:hover {
+  cursor: move; }
+
+.action--edit {
+  float: right; }
+
+.action--edit:hover {
+  color: #337ab7;
+  cursor: pointer; }
+
+.action--trash {
+  float: right;
+  margin-right: 1rem; }
+
+.action--trash:hover {
+  color: #d9534f;
+  cursor: pointer; }
+
+.action--edit__form {
+  background-color: whtie;
+  margin-left: -.5rem;
+  margin-right: -15px;
+  margin-top: 15px;
+  padding-top: 15px;
+  border-top: 1px solid #ddd; }
+
+.flex-button-wrapper {
+  display: flex;
+  flex-direction: row-reverse; }
+
+.flex-button {
+  align-self: flex-end; }
+
+.add-new__action-item:hover {
+  cursor: pointer; }
+
+.add-new__action-item--link,
+.add-new__action-item--link:active,
+.add-new__action-item--link:hover {
+  text-decoration: none;
+  color: #337ab7; }
diff --git a/macro.css b/sass/macro.scss
similarity index 100%
rename from macro.css
rename to sass/macro.scss