Initial commit

img/16x9.css

@@ -0,0 +1,124 @@
+#backdrop_4x3 {
+    display: none;
+}
+
+#backdrop_16x9 {
+    display: block;
+}
+
+.ratname {
+    display: none
+}
+
+.ratpronouns {
+    display: none
+}
+
+.ratspeaker {
+    width: 32px;
+    height: 32px;
+}
+
+#game {
+    font-size: 24px;
+    left: 70px;
+    width: 450px;
+    bottom: 12px;
+}
+
+#scientist {
+    font-size: 24px;
+    right: 70px;
+    width: 450px;
+    bottom: 12px;
+}
+
+#timer {
+    font-size: 38px;
+    left: 472px;
+    width: 336px;
+    top: 666px;
+}
+
+#rat0name {
+    left: 458px;
+    bottom: 665px;
+}
+
+#rat0pronouns {
+    left: 458px;
+    top: 56px;
+}
+
+#rat0speaker {
+    left: 25px;
+    top: 5px;
+    display: block;
+}
+
+#rat1name {
+    left: 620px;
+    bottom: 581px;
+}
+
+#rat1pronouns {
+    left: 620px;
+    top: 140px;
+}
+
+#rat1speaker {
+    transform: scaleX(-1);
+    right: 25px;
+    top: 5px;
+}
+
+#rat2name {
+    left: 458px;
+    bottom: 145px;
+}
+
+#rat2pronouns {
+    left: 458px;
+    top: 576px;
+}
+
+#rat2speaker {
+    left: 25px;
+    bottom: 50px;
+}
+
+#rat3name {
+    left: 620px;
+    bottom: 59px;
+}
+
+#rat3pronouns {
+    left: 620px;
+    top: 662px;
+}
+
+#rat3speaker {
+    transform: scaleX(-1);
+    right: 25px;
+    bottom: 50px;
+}
+
+#embed0 {
+    left: 70px;
+    top: 7px;
+}
+
+#embed1 {
+    left: 651px;
+    top: 7px;
+}
+
+#embed2 {
+    left: 70px;
+    top: 345px;
+}
+
+#embed3 {
+    left: 651px;
+    top: 345px;
+}

img/4x3.css

@@ -0,0 +1,128 @@
+#backdrop_4x3 {
+    display: block;
+}
+
+#backdrop_16x9 {
+    display: none;
+}
+
+.ratname {
+    width: 200px;
+    font-size: 22px;
+}
+
+.ratpronouns {
+    width: 200px;
+    font-size: 18px;
+}
+
+.ratspeaker {
+    width: 32px;
+    height: 32px;
+}
+
+#game {
+    font-size: 24px;
+    left: 460px;
+    width: 360px;
+    bottom: 480px;
+    vertical-align: bottom;
+    line-height: 0.96em;
+}
+
+#scientist {
+    font-size: 16px;
+    left: 490px;
+    width: 300px;
+    top: 315px;
+}
+
+#timer {
+    font-size: 68px;
+    left: 472px;
+    width: 336px;
+    top: 232px;
+}
+
+#rat0name {
+    left: 458px;
+    bottom: 665px;
+}
+
+#rat0pronouns {
+    left: 458px;
+    top: 56px;
+}
+
+#rat0speaker {
+    left: 459px;
+    top: 329px;
+    display: block;
+}
+
+#rat1name {
+    left: 620px;
+    bottom: 581px;
+}
+
+#rat1pronouns {
+    left: 620px;
+    top: 140px;
+}
+
+#rat1speaker {
+    transform: scaleX(-1);
+    left: 790px;
+    top: 329px;
+}
+
+#rat2name {
+    left: 458px;
+    bottom: 145px;
+}
+
+#rat2pronouns {
+    left: 458px;
+    top: 576px;
+}
+
+#rat2speaker {
+    left: 459px;
+    top: 359px;
+}
+
+#rat3name {
+    left: 620px;
+    bottom: 59px;
+}
+
+#rat3pronouns {
+    left: 620px;
+    top: 662px;
+}
+
+#rat3speaker {
+    transform: scaleX(-1);
+    left: 790px;
+    top: 359px;
+}
+
+#embed0 {
+    left: 22px;
+    top: 22px;
+}
+
+#embed1 {
+    left: 835px;
+    top: 22px;
+}
+
+#embed2 {
+    left: 22px;
+    top: 382px;
+}
+
+#embed3 {
+    left: 835px;
+    top: 382px;
+}

img/main.css

@@ -0,0 +1,118 @@
+@font-face {
+    font-family: 'Roboto Mono Regular';
+    src: url('RobotoMono-Regular.ttf') format('truetype');
+}
+
+html, body {
+    background: #222;
+    margin: 0px;
+    padding: 0px;
+}
+
+.ratname {
+    z-index: 1;
+    color: #fff;
+    font-family: 'Roboto Mono Regular';
+    text-align: center;
+    display: block;
+    position: absolute;
+
+}
+
+.ratpronouns {
+    z-index: 1;
+    color: #fff;
+    font-family: 'Roboto Mono Regular';
+    text-align: center;
+    display: block;
+    position: absolute;
+}
+
+.ratspeaker {
+    z-index: 1;
+    position: absolute;
+    display: none;
+}
+
+.embed {
+    z-index: 0;
+    display: none;
+    position: absolute;
+}
+
+#game {
+    z-index: 1;
+    color: #fff;
+    font-family: 'Roboto Mono Regular';
+    display: block;
+    position: absolute;
+    text-align: center;
+}
+
+#scientist {
+    z-index: 1;
+    color: #fff;
+    font-family: 'Roboto Mono Regular';
+    display: block;
+    position: absolute;
+    text-align: center;
+}
+
+#timer {
+    z-index: 1;
+    color: #fff;
+    font-family: 'Roboto Mono Regular';
+    font-weight: bold;
+    text-align: center;
+    display: block;
+    position: absolute;
+}
+
+.backdrop {
+    z-index: 1;
+    position: relative;
+    pointer-events: none;
+    display: block;
+    top: 0;
+    left: 0;
+}
+
+#livedisplay {
+    overflow: hidden;
+    position: relative;
+    width: fit-content;
+    top: 0px;
+    left: 0px;
+    margin: 0px;
+    padding: 0px;
+}
+
+.controls {
+    margin-top: 20px;
+    color: #ccc;
+}
+
+.controls td {
+    border: 1px solid;
+    vertical-align: top;
+}
+
+.controls h3 {
+    margin: 0px;
+    padding: 0px;
+    text-align: center;
+}
+
+.controls p {
+    display: table-row;
+}
+
+.controls label {
+    display: table-cell;
+    text-align: right;
+}
+
+.controls input, button {
+    display: table-cell;
+    margin-left: 5px;
+}