+body {
+ background-color: #333738;
+ font-family: sans-serif;
+ line-height: 1.5;
+}
+
+#page {
+ margin-top: 36px;
+ margin-bottom: 36px;
+ padding-top: 30px;
+ padding-bottom: 30px;
+ padding-left: 10px;
+ padding-right: 10px;
+ background-color: white;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+/* For a wide screen, just use the center of the window for content. */
+@media screen and (min-width: 500px) {
+ #page {
+ max-width: 720px;
+ padding-left: 50px;
+ padding-right: 50px;
+ }
+}
+
+/* And when the screen is narrow, let's kill the wasted vertical space
+ above it too. */
+@media screen and (max-width: 499px) {
+ body {
+ background-color: white;
+ }
+ #page {
+ margin-top: 0;
+ margin-bottom: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+}
+
+h1 {
+ color: #333738;
+ font-size: 150%;
+ font-weight: bold;
+}
+
+h2 {
+ color: #333738;
+ font-size: 110%;
+ font-weight: bold;
+}
+
+p,dl,dd {
+ margin-bottom: 1em;
+}
+
/* Default message severity is "info" but can be overriden. */
.message {
padding: 1em;
- background-color: #46a7f5;
+ background-color: #44c7ef;
color: white;
transition: 0.3s;
margin-bottom: 0.5em;
}
.success {
- background-color: #6abc6d;
+ background-color: #44c7ef;
}
.warning {
.hide-state-capture {
display:block;
}
+
+/* Players list starts out hidden (until a player is added). */
+#players-div {
+ display:none;
+}
+
+#register-form {
+ max-width: 100%;
+ display: grid;
+ grid-template-columns: 49% 49%;
+ grid-column-gap: 2%;
+}
+
+.form-row {
+ max-width: 100%;
+ padding-bottom: 0.25em;
+}
+
+.form-row.medium.left {
+ grid-column-start: 1;
+}
+
+.form-row.medium.right {
+ grid-column-start: 2;
+}
+
+.form-row.large {
+ grid-column-start: 1;
+ grid-column-end: span 2;
+}
+
+/* For a narrow screen, use a single-column for medium form rows. */
+@media screen and (max-width: 600px) {
+ .form-row.medium.left,.form-row.medium.right {
+ grid-column-start: 1;
+ grid-column-end: span 2
+ }
+}
+
+input {
+ width: 100%;
+}
+
+input {
+ box-sizing: border-box;
+
+ height: 40px;
+
+ padding: 10px 12px;
+
+ border: 1px solid #287789;
+ border-radius: 4px;
+}
+
+input:focus {
+ border: 2px solid #44c7ef;
+}
+
+button {
+ display: inline-block;
+ border-radius: 4px;
+ background-color: #287789;
+ border: none;
+ color: white;
+ text-align: center;
+ font-size: 125%;
+ margin-top: .25em;
+ padding-top: 0.25em;
+ padding-bottom: 0.25em;
+ width: 200px;
+ transition: all 150ms ease;
+}
+
+button:hover {
+ transform: translateY(-1px);
+ background-color: #44c7ef;
+}
+
+:focus {
+ outline: none;
+}
+::-moz-focus-inner {
+ border: 0;
+}