regenerate assets

redbot/assets/red_style.css

@@ -1,33 +1,54 @@
 /* layout, major elements */
 body {
+  --width: 650px;
   background-color: #fcfcfc;
   color: #111;
   font: 12pt/14pt "Helvetica Neue", Helvetica, Arial, sans-serif;
-  margin: 1em 40px;
-  max-width: 1240px; }
+  margin: 1em 40px; }
   body.blank {
     margin: 6em auto 3em auto;
-    width: 650px; }
+    width: var(--width); }
+
+#columns {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-wrap: wrap;
+  -moz-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-flex-flow: row wrap;
+  -moz-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap; }
 
 #left_column {
-  width: 650px;
-  float: left;
+  width: var(--width);
   margin: 0;
   padding: 0; }
 
 #right_column {
-  width: 550px;
-  float: right;
+  -webkit-box-ordinal-group: 1;
+  -moz-box-ordinal-group: 1;
+  -ms-flex-order: 1;
+  -webkit-order: 1;
+  order: 1;
   margin: 1em 0 0 40px;
   padding: 0; }
 
-@media screen and (max-width: 1320px) {
-  #left_column, #right_column {
-    width: 650px;
-    margin: 0;
-    padding: 0;
-    float: left;
-    clear: both; } }
+@media screen and (max-width: 650px) {
+  body {
+    -webkit-flex-flow: column wrap;
+    -moz-flex-flow: column wrap;
+    -ms-flex-flow: column wrap;
+    flex-flow: column wrap;
+    --width: calc(100% - 4px); }
+  #right_column {
+    margin: 0; } }
 
 a, .post_link {
   color: blue;
@@ -37,8 +58,7 @@ h1 {
   color: #111;
   padding: 0;
   margin: 10px 0px;
-  font-size: 1.8em;
-  width: 100%; }
+  font-size: 1.8em; }
   h1 a {
     color: #444;
     text-decoration: none; }
@@ -87,7 +107,7 @@ br {
   text-align: center;
   color: #737373;
   font-size: 0.8em;
-  width: 650px; }
+  width: var(--width); }
 
 #final_status {
   color: #737373;
@@ -115,14 +135,14 @@ body.blank > .footer {
   position: absolute;
   margin: 0 auto;
   bottom: 15%;
-  width: 650px; }
+  width: var(--width); }
 
 /* news */
 .news {
   text-align: center;
   font-size: 1.0;
   font-weight: normal;
-  width: 650px; }
+  width: var(--width); }
 
 .news-banner {
   color: #737373; }
@@ -138,7 +158,7 @@ body.blank > .footer {
   padding: 0.5em;
   font-weight: bold;
   font-size: 1.1em;
-  width: 650px;
+  width: var(--width);
   box-sizing: content-box; }
 
 .error a {
@@ -156,8 +176,11 @@ input#uri, input#go {
   margin: 0;
   box-sizing: border-box; }
 
+#request_form {
+  width: var(--width); }
+
 input#uri {
-  width: 610px;
+  width: calc(var(--width) - 40px);
   color: #111;
   border-right: none; }
   input#uri::placeholder {
@@ -176,7 +199,7 @@ input#go {
   -moz-border-radius-bottomleft: 0.5em;
   -moz-border-radius-bottomright: 0.5em;
   background-color: #72726E;
-  width: 650px;
+  width: var(--width);
   margin: 0; }
 
 #add_req_hdr, .delete_req_hdr {
@@ -190,15 +213,15 @@ input#go {
 
 .req_hdr {
   background-color: #72726E;
-  width: 650px;
+  width: var(--width);
   white-space: nowrap; }
 
 input.hdr_name, select.hdr_name {
   width: 130px;
   box-sizing: border-box; }
 
 input.hdr_val, select.hdr_val {
-  width: 480px;
+  width: calc(var(--width) - 130px - 40px);
   box-sizing: border-box; }
 
 option[value="other..."] {
@@ -210,12 +233,6 @@ option[value="other..."] {
   margin-left: 0.75em;
   font-weight: normal; }
 
-@media screen and (max-width: 770px) {
-  .req_hdr, .add_req_hdr {
-    width: 100%; }
-  input#uri {
-    width: calc(100% - 40px); } }
-
 /* response detail */
 #response, .nonfinal_response {
   font-size: 10pt;