3 files changed, 103 insertions, 0 deletions
diff --git a/src/css/src/battle/message-board/attack.scss b/src/css/src/battle/message-board/attack.scss
new file mode 100644
index 0000000..8f3a8cb
--- /dev/null
+++ b/src/css/src/battle/message-board/attack.scss
@@ -0,0 +1,63 @@
+.battle-message-board .battle-character-card
+{
+   width: 16em;
+}
+
+.battle-message-attack-text
+{
+   width: 100%;
+   text-align: center;
+   font-size: 1.2em;
+}
+
+/**** Character Portrait Animations *******************************************/
+.battle-animated-portrait-damaged .battle-character-portrait > *
+{
+   animation: blinking 0.2s steps(2, start) 8;
+}
+
+.battle-animated-portrait-absent .battle-character-portrait > *
+{
+   visibility: hidden;
+}
+
+.battle-animated-portrait-dodges .battle-character-portrait,
+.battle-animated-portrait-dies .battle-character-portrait,
+.battle-animated-portrait-parries .battle-character-portrait,
+.battle-animated-portrait-attacks .battle-character-portrait
+{
+   overflow: hidden;
+}
+
+.battle-animated-portrait
+{
+}
+
+.battle-animated-portrait-dodges .battle-character-portrait > *
+{
+   animation-name: dodges;
+   animation-duration: 1s;
+   animation-iteration-count: 1;
+}
+
+.battle-animated-portrait-attacks .battle-character-portrait > *
+{
+   animation-name: attacks;
+   animation-duration: 1s;
+   animation-iteration-count: 1;
+}
+
+.battle-animated-portrait-dies .battle-character-portrait > *
+{
+   animation-name: blinking2, dies;
+   animation-duration: 0.15s, 2s;
+   animation-delay: 0s, 1s;
+   animation-iteration-count: 8, 1;
+}
+
+.battle-animated-portrait-parries .battle-character-portrait > *
+{
+   animation-name: parries;
+   animation-duration: 1s;
+   animation-iteration-count: 1;
+}
diff --git a/src/css/src/battle/message-board/error.scss b/src/css/src/battle/message-board/error.scss
new file mode 100644
index 0000000..8c2c197
--- /dev/null
+++ b/src/css/src/battle/message-board/error.scss
@@ -0,0 +1,7 @@
+@import '../../shared/colors';
+
+.battle-error
+{
+   background-color: $RED-1;
+}
+
diff --git a/src/css/src/battle/message-board/help.scss b/src/css/src/battle/message-board/help.scss
new file mode 100644
index 0000000..ba35772
--- /dev/null
+++ b/src/css/src/battle/message-board/help.scss
@@ -0,0 +1,33 @@
+.battle-message-board-help
+{
+   display: block;
+}
+
+.battle-message-board-help h1
+{
+   margin: 0;
+   margin-bottom: 0.3em;
+   font-size: 1.5em;
+   text-align: center;
+}
+
+.battle-message-board-help-figure
+{
+   width: 1.5em;
+   height: 1.5em;
+   background-size: 100%;
+   display: inline-block;
+   vertical-align: middle;
+}
+
+.battle-help-guide-icon
+{
+   margin-right: 0.5em;
+   width: 1.5em;
+   height: 1.5em;
+   background-image: url("/asset/svg/help-icon.svg");
+   background-size: 100%;
+   display: inline-block;
+   vertical-align: middle;
+}
+