4 files changed, 54 insertions, 0 deletions
diff --git a/src/css/src/roster-editor.scss b/src/css/src/roster-editor.scss
new file mode 100644
index 0000000..beb3bb2
--- /dev/null
+++ b/src/css/src/roster-editor.scss
@@ -0,0 +1,4 @@
+@import 'shared/battleview';
+
+@import 'roster-editor/controlled-panel';
+@import 'roster-editor/selection-window';
diff --git a/src/css/src/roster-editor/constants.scss b/src/css/src/roster-editor/constants.scss
new file mode 100644
index 0000000..ee4e862
--- /dev/null
+++ b/src/css/src/roster-editor/constants.scss
@@ -0,0 +1,5 @@
+@import '../shared/battleview/constants';
+
+$CONTROLLED-MENU-WIDTH: 15em;
+
+$NEXT-TO-CONTROLLED-MENU: $CONTROLLED-MENU-WIDTH + $MENU-EXTRA;
diff --git a/src/css/src/roster-editor/controlled-panel.scss b/src/css/src/roster-editor/controlled-panel.scss
new file mode 100644
index 0000000..23b2a8a
--- /dev/null
+++ b/src/css/src/roster-editor/controlled-panel.scss
@@ -0,0 +1,23 @@
+@import '../shared/battleview/constants';
+@import '../shared/battleview/menu-mixins';
+
+@import 'constants';
+
+.controlled
+{
+   @include menu-panel();
+
+   right: 0;
+   top: $BELOW-MAIN-MENU;
+   bottom: $ABOVE-MESSAGE-BOARD;
+
+   width: $CONTROLLED-MENU-WIDTH;
+
+   border-top-right-radius: 0;
+   border-bottom-right-radius: 0;
+   border-right: none;
+
+   display: flex;
+   flex-flow: column;
+   justify-content: space-between;
+}
diff --git a/src/css/src/roster-editor/selection-window.scss b/src/css/src/roster-editor/selection-window.scss
new file mode 100644
index 0000000..57568e3
--- /dev/null
+++ b/src/css/src/roster-editor/selection-window.scss
@@ -0,0 +1,22 @@
+@import '../shared/battleview/constants';
+@import '../shared/battleview/menu-mixins';
+
+@import 'constants';
+
+.selection-window
+{
+   @include menu-panel();
+
+   left: 0;
+   top: $BELOW-MAIN-MENU;
+   bottom: $ABOVE-MESSAGE-BOARD;
+   right: $NEXT-TO-CONTROLLED-MENU;
+
+   border-top-left-radius: 0;
+   border-bottom-left-radius: 0;
+   border-left: none;
+
+   display: flex;
+   flex-flow: column;
+   justify-content: space-between;
+}