diff --git a/css/graphiql.css b/css/graphiql.css
index 57d1d2542..425d94783 100644
--- a/css/graphiql.css
+++ b/css/graphiql.css
@@ -1,22 +1,23 @@
-#graphiql-container {
+.graphiql-container {
   color: #141823;
-  display:         flex;
   display: -webkit-flex;
-  flex-direction: row;
+  display: -ms-flexbox;
   -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   font-family:
-    system,
-    -apple-system,
-    'San Francisco',
-    '.SFNSDisplay-Regular',
-    'Segoe UI',
-    Segoe,
-    'Segoe WP',
-    'Helvetica Neue',
-    helvetica,
-    'Lucida Grande',
-    arial,
-    sans-serif;
+          system,
+          -apple-system,
+          'San Francisco',
+          '.SFNSDisplay-Regular',
+          'Segoe UI',
+          Segoe,
+          'Segoe WP',
+          'Helvetica Neue',
+          helvetica,
+          'Lucida Grande',
+          arial,
+          sans-serif;
   font-size: 14px;
   height: 100%;
   margin: 0;
@@ -24,55 +25,63 @@
   width: 100%;
 }
 
-#graphiql-container .editorWrap {
+.graphiql-container .editorWrap {
   display: -webkit-flex;
-  display:         flex;
+  display: -ms-flexbox;
+  display: -ms-flexbox;
   -webkit-flex-direction: column;
+  -ms-flex-direction: column;
   flex-direction: column;
   -webkit-flex: 1;
+  -ms-flex: 1;
   flex: 1;
 }
 
-#graphiql-container .title {
+.graphiql-container .title {
   font-size: 18px;
 }
 
-#graphiql-container .title em {
+.graphiql-container .title em {
   font-family: georgia;
   font-size: 19px;
 }
 
-#graphiql-container .topBarWrap {
+.graphiql-container .topBarWrap {
   display: -webkit-flex;
-  display:         flex;
+  display: -ms-flexbox;
   -webkit-flex-direction: row;
+  -ms-flex-direction: row;
   flex-direction: row;
 }
 
-#graphiql-container .topBar {
+.graphiql-container .topBar {
   -webkit-align-items: center;
+  -ms-align-items: center;
   align-items: center;
   background: -webkit-linear-gradient(#f7f7f7, #e2e2e2);
   background:         linear-gradient(#f7f7f7, #e2e2e2);
   border-bottom: 1px solid #d0d0d0;
   cursor: default;
   display: -webkit-flex;
-  display:         flex;
+  display: -ms-flexbox;
   height: 34px;
   padding: 7px 14px 6px;
   -webkit-flex: 1;
+  -ms-flex: 1;
   flex: 1;
   -webkit-flex-direction: row;
+  -ms-flex-direction: row;
   flex-direction: row;
   -webkit-user-select: none;
+  -ms-user-select: none;
   user-select: none;
 }
 
-#graphiql-container .toolbar {
+.graphiql-container .toolbar {
   overflow-x: auto;
 }
 
-#graphiql-container .docExplorerShow {
+.graphiql-container .docExplorerShow {
   background: -webkit-linear-gradient(#f7f7f7, #e2e2e2);
   background:         linear-gradient(#f7f7f7, #e2e2e2);
   border-bottom: 1px solid #d0d0d0;
@@ -87,7 +96,7 @@
   padding: 2px 20px 0 18px;
 }
 
-#graphiql-container .docExplorerShow:before {
+.graphiql-container .docExplorerShow:before {
   border-left: 2px solid #3B5998;
   border-top: 2px solid #3B5998;
   content: '';
@@ -96,47 +105,54 @@
   margin: 0 3px -1px 0;
   position: relative;
   -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
   transform: rotate(-45deg);
   width: 9px;
 }
 
-#graphiql-container .editorBar {
+.graphiql-container .editorBar {
   display: -webkit-flex;
-  display:         flex;
+  display: -ms-flexbox;
   -webkit-flex: 1;
+  -ms-flex: 1;
   flex: 1;
   -webkit-flex-direction: row;
+  -ms-flex-direction: row;
   flex-direction: row;
 }
 
-#graphiql-container .queryWrap {
+.graphiql-container .queryWrap {
   display: -webkit-flex;
-  display:         flex;
+  display: -ms-flexbox;
   -webkit-flex: 1;
+  -ms-flex: 1;
   flex: 1;
   -webkit-flex-direction: column;
+  -ms-flex-direction: column;
   flex-direction: column;
 }
 
-#graphiql-container .resultWrap {
+.graphiql-container .resultWrap {
   border-left: solid 1px #e0e0e0;
   display: -webkit-flex;
   display:         flex;
   position: relative;
   -webkit-flex: 1;
+  -ms-flex: 1;
   flex: 1;
   -webkit-flex-direction: column;
+  -ms-flex-direction: column;
   flex-direction: column;
 }
 
-#graphiql-container .docExplorerWrap {
+.graphiql-container .docExplorerWrap {
   background: white;
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
   position: relative;
   z-index: 3;
 }
 
-#graphiql-container .docExplorerResizer {
+.graphiql-container .docExplorerResizer {
   cursor: col-resize;
   height: 100%;
   left: -5px;
@@ -146,29 +162,32 @@
   z-index: 10;
 }
 
-#graphiql-container .docExplorerHide {
+.graphiql-container .docExplorerHide {
   cursor: pointer;
   font-size: 18px;
   margin: -7px -8px -6px 0;
   padding: 18px 16px 15px 12px;
 }
 
-#graphiql-container .query-editor {
+.graphiql-container .query-editor {
   -webkit-flex: 1;
+  -ms-flex: 1;
   flex: 1;
   position: relative;
 }
 
-#graphiql-container .variable-editor {
+.graphiql-container .variable-editor {
   display: -webkit-flex;
+  display:     -ms-flex;
   display:         flex;
   height: 29px;
   -webkit-flex-direction: column;
+  -ms-flex-direction: column;
   flex-direction: column;
   position: relative;
 }
 
-#graphiql-container .variable-editor-title {
+.graphiql-container .variable-editor-title {
   background: #eeeeee;
   border-bottom: 1px solid #d6d6d6;
   border-top: 1px solid #e0e0e0;
@@ -180,22 +199,27 @@
   padding: 6px 0 8px 43px;
   text-transform: lowercase;
   -webkit-user-select: none;
+  -ms-user-select: none;
   user-select: none;
 }
 
-#graphiql-container .codemirrorWrap {
+.graphiql-container .codemirrorWrap {
   -webkit-flex: 1;
+  -ms-flex: 1;
   flex: 1;
   position: relative;
+  height: 100%;
 }
 
-#graphiql-container .result-window {
+.graphiql-container .result-window {
   -webkit-flex: 1;
+  -ms-flex: 1;
   flex: 1;
   position: relative;
+  height: 100%;
 }
 
-#graphiql-container .footer {
+.graphiql-container .footer {
   background: #f6f7f8;
   border-left: 1px solid #e0e0e0;
   border-top: 1px solid #e0e0e0;
@@ -203,7 +227,7 @@
   position: relative;
 }
 
-#graphiql-container .footer:before {
+.graphiql-container .footer:before {
   background: #eeeeee;
   bottom: 0;
   content: " ";
@@ -213,23 +237,23 @@
   width: 12px;
 }
 
-#graphiql-container .result-window .CodeMirror {
+.graphiql-container .result-window .CodeMirror {
   background: #f6f7f8;
 }
 
-#graphiql-container .result-window .CodeMirror-gutters {
+.graphiql-container .result-window .CodeMirror-gutters {
   background-color: #eeeeee;
   border-color: #e0e0e0;
   cursor: col-resize;
 }
 
-#graphiql-container .result-window .CodeMirror-foldgutter,
-#graphiql-container .result-window .CodeMirror-foldgutter-open:after,
-#graphiql-container .result-window .CodeMirror-foldgutter-folded:after {
+.graphiql-container .result-window .CodeMirror-foldgutter,
+.graphiql-container .result-window .CodeMirror-foldgutter-open:after,
+.graphiql-container .result-window .CodeMirror-foldgutter-folded:after {
   padding-left: 3px;
 }
 
-#graphiql-container .toolbar-button {
+.graphiql-container .toolbar-button {
   background: #fdfdfd;
   background: -webkit-linear-gradient(#fbfbfb, #f8f8f8);
   background:         linear-gradient(#fbfbfb, #f8f8f8);
@@ -246,29 +270,29 @@
   text-decoration: none;
 }
 
-#graphiql-container .toolbar-button:active {
+.graphiql-container .toolbar-button:active {
   background: -webkit-linear-gradient(#ececec, #d8d8d8);
   background:         linear-gradient(#ececec, #d8d8d8);
   border-color: #cacaca #c9c9c9 #b0b0b0;
   box-shadow:
-    0 1px 0 #fff,
-    inset 0 1px rgba(255, 255, 255, 0.2),
-    inset 0 1px 1px rgba(0, 0, 0, 0.08);
+          0 1px 0 #fff,
+          inset 0 1px rgba(255, 255, 255, 0.2),
+          inset 0 1px 1px rgba(0, 0, 0, 0.08);
 }
 
-#graphiql-container .toolbar-button.error {
+.graphiql-container .toolbar-button.error {
   background: -webkit-linear-gradient(#fdf3f3, #e6d6d7);
   background:         linear-gradient(#fdf3f3, #e6d6d7);
   color: #b00;
 }
 
-#graphiql-container .execute-button-wrap {
+.graphiql-container .execute-button-wrap {
   position: relative;
   margin: 0 14px 0 28px;
   height: 34px;
 }
 
-#graphiql-container .execute-button {
+.graphiql-container .execute-button {
   background: -webkit-linear-gradient(#fdfdfd, #d2d3d6);
   background:         linear-gradient(#fdfdfd, #d2d3d6);
   border: 1px solid rgba(0,0,0,0.25);
@@ -282,28 +306,28 @@
   width: 34px;
 }
 
-#graphiql-container .execute-button svg {
+.graphiql-container .execute-button svg {
   pointer-events: none;
 }
 
-#graphiql-container .execute-button:active {
+.graphiql-container .execute-button:active {
   background: -webkit-linear-gradient(#e6e6e6, #c0c0c0);
   background:         linear-gradient(#e6e6e6, #c0c0c0);
   box-shadow:
-    0 1px 0 #fff,
-    inset 0 0 2px rgba(0, 0, 0, 0.3),
-    inset 0 0 6px rgba(0, 0, 0, 0.2);
+          0 1px 0 #fff,
+          inset 0 0 2px rgba(0, 0, 0, 0.3),
+          inset 0 0 6px rgba(0, 0, 0, 0.2);
 }
 
-#graphiql-container .execute-button:focus {
+.graphiql-container .execute-button:focus {
   outline: 0;
 }
 
-#graphiql-container .execute-options {
+.graphiql-container .execute-options {
   background: #fff;
   box-shadow:
-    0 0 0 1px rgba(0,0,0,0.1),
-    0 2px 4px rgba(0,0,0,0.25);
+          0 0 0 1px rgba(0,0,0,0.1),
+          0 2px 4px rgba(0,0,0,0.25);
   left: -1px;
   margin: 0;
   padding: 8px 0;
@@ -312,30 +336,31 @@
   z-index: 100;
 }
 
-#graphiql-container .execute-options li {
+.graphiql-container .execute-options li {
   padding: 2px 30px 4px 10px;
   list-style: none;
   min-width: 100px;
   cursor: pointer;
 }
 
-#graphiql-container .execute-options li.selected {
+.graphiql-container .execute-options li.selected {
   background: #e10098;
   color: white;
 }
 
-#graphiql-container .CodeMirror-scroll {
+.graphiql-container .CodeMirror-scroll {
   -webkit-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
 }
 
-#graphiql-container .CodeMirror {
+.graphiql-container .CodeMirror {
   color: #141823;
   font-family:
-    'Consolas',
-    'Inconsolata',
-    'Droid Sans Mono',
-    'Monaco',
-    monospace;
+          'Consolas',
+          'Inconsolata',
+          'Droid Sans Mono',
+          'Monaco',
+          monospace;
   font-size: 13px;
   height: 100%;
   left: 0;
@@ -344,12 +369,13 @@
   width: 100%;
 }
 
-#graphiql-container .CodeMirror-lines {
+.graphiql-container .CodeMirror-lines {
   padding: 20px 0;
 }
 
 .CodeMirror-hint-information .content {
   -webkit-box-orient: vertical;
+  -ms-box-orient: vertical;
   box-orient: vertical;
   color: #141823;
   display: -webkit-box;
@@ -381,9 +407,11 @@
 .autoInsertedLeaf.cm-property {
   -webkit-animation-duration: 6s;
   -moz-animation-duration: 6s;
+  -ms-animation-duration: 6s;
   animation-duration: 6s;
   -webkit-animation-name: insertionFade;
   -moz-animation-name: insertionFade;
+  -ms-animation-name: insertionFade;
   animation-name: insertionFade;
   border-bottom: 2px solid rgba(255, 255, 255, 0);
   border-radius: 2px;
@@ -434,18 +462,18 @@ div.CodeMirror-lint-tooltip {
   color: #141823;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
   font-family:
-    system,
-    -apple-system,
-    'San Francisco',
-    '.SFNSDisplay-Regular',
-    'Segoe UI',
-    Segoe,
-    'Segoe WP',
-    'Helvetica Neue',
-    helvetica,
-    'Lucida Grande',
-    arial,
-    sans-serif;
+          system,
+          -apple-system,
+          'San Francisco',
+          '.SFNSDisplay-Regular',
+          'Segoe UI',
+          Segoe,
+          'Segoe WP',
+          'Helvetica Neue',
+          helvetica,
+          'Lucida Grande',
+          arial,
+          sans-serif;
   font-size: 13px;
   line-height: 16px;
   opacity: 0;
@@ -463,14 +491,16 @@ div.CodeMirror-lint-message-error, div.CodeMirror-lint-message-warning {
 
 /* COLORS */
 
-#graphiql-container .CodeMirror-foldmarker {
+.graphiql-container .CodeMirror-foldmarker {
   border-radius: 4px;
   background: #08f;
   background: -webkit-linear-gradient(#43A8FF, #0F83E8);
+  background:    -moz-linear-gradient(#43A8FF, #0F83E8);
+  background:     -ms-linear-gradient(#43A8FF, #0F83E8);
   background:         linear-gradient(#43A8FF, #0F83E8);
   box-shadow:
-    0 1px 1px rgba(0, 0, 0, 0.2),
-    inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+          0 1px 1px rgba(0, 0, 0, 0.2),
+          inset 0 0 0 1px rgba(0, 0, 0, 0.1);
   color: white;
   font-family: arial;
   font-size: 12px;
@@ -480,12 +510,12 @@ div.CodeMirror-lint-message-error, div.CodeMirror-lint-message-warning {
   text-shadow: 0 -1px rgba(0, 0, 0, 0.1);
 }
 
-#graphiql-container div.CodeMirror span.CodeMirror-matchingbracket {
+.graphiql-container div.CodeMirror span.CodeMirror-matchingbracket {
   color: #555;
   text-decoration: underline;
 }
 
-#graphiql-container div.CodeMirror span.CodeMirror-nonmatchingbracket {
+.graphiql-container div.CodeMirror span.CodeMirror-nonmatchingbracket {
   color: #f00;
 }
 
@@ -558,6 +588,221 @@ div.CodeMirror-lint-message-error, div.CodeMirror-lint-message-warning {
 .cm-atom {
   color: #CA9800;
 }
+
+.graphiql-container .doc-explorer {
+  background: white;
+}
+
+.graphiql-container .doc-explorer-title-bar {
+  cursor: default;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 34px;
+  line-height: 14px;
+  padding: 8px 8px 5px;
+  position: relative;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.graphiql-container .doc-explorer-title {
+  padding: 10px 0 10px 10px;
+  font-weight: bold;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow-x: hidden;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.graphiql-container .doc-explorer-back {
+  color: #3B5998;
+  cursor: pointer;
+  margin: -7px 0 -6px -8px;
+  overflow-x: hidden;
+  padding: 17px 12px 16px 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.graphiql-container .doc-explorer-back:before {
+  border-left: 2px solid #3B5998;
+  border-top: 2px solid #3B5998;
+  content: '';
+  display: inline-block;
+  height: 9px;
+  margin: 0 3px -1px 0;
+  position: relative;
+  width: 9px;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.graphiql-container .doc-explorer-rhs {
+  position: relative;
+}
+
+.graphiql-container .doc-explorer-contents {
+  background-color: #ffffff;
+  border-top: 1px solid #d6d6d6;
+  bottom: 0;
+  left: 0;
+  min-width: 300px;
+  overflow-y: auto;
+  padding: 20px 15px;
+  position: absolute;
+  right: 0;
+  top: 47px;
+}
+
+.graphiql-container .doc-type-description p:first-child ,
+.graphiql-container .doc-type-description blockquote:first-child {
+  margin-top: 0;
+}
+
+.graphiql-container .doc-explorer-contents a {
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.graphiql-container .doc-explorer-contents a:hover {
+  text-decoration: underline;
+}
+
+.graphiql-container .doc-value-description {
+  padding: 4px 0 8px 12px;
+}
+
+.graphiql-container .doc-category {
+  margin: 20px 0;
+}
+
+.graphiql-container .doc-category-title {
+  border-bottom: 1px solid #e0e0e0;
+  color: #777;
+  cursor: default;
+  font-size: 14px;
+  font-variant: small-caps;
+  font-weight: bold;
+  letter-spacing: 1px;
+  margin: 0 -15px 10px 0;
+  padding: 10px 0;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.graphiql-container .doc-category-item {
+  margin: 12px 0;
+  color: #555;
+}
+
+.graphiql-container .keyword {
+  color: #B11A04;
+}
+
+.graphiql-container .type-name {
+  color: #CA9800;
+}
+
+.graphiql-container .field-name {
+  color: #1F61A0;
+}
+
+.graphiql-container .value-name {
+  color: #0B7FC7;
+}
+
+.graphiql-container .arg-name {
+  color: #8B2BB9;
+}
+
+.graphiql-container .arg:after {
+  content: ', ';
+}
+
+.graphiql-container .arg:last-child:after {
+  content: '';
+}
+
+.graphiql-container .doc-alert-text {
+  color: #F00F00;
+  font-family: 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace;
+  font-size: 13px;
+}
+
+.graphiql-container .search-box-outer {
+  border: 1px solid #d3d6db;
+  box-sizing: border-box;
+  display: inline-block;
+  font-size: 12px;
+  height: 24px;
+  margin-bottom: 12px;
+  padding: 3px 8px 5px;
+  vertical-align: middle;
+  width: 100%;
+}
+
+.graphiql-container .search-box-input {
+  border: 0;
+  font-size: 12px;
+  margin: 0;
+  outline: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.graphiql-container .spinner-container {
+  position: absolute;
+  top: 50%;
+  height: 36px;
+  width: 36px;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+
+.graphiql-container .spinner {
+  vertical-align: middle;
+  display: inline-block;
+  height: 24px;
+  width: 24px;
+  position: absolute;
+  -webkit-animation: rotation .6s infinite linear;
+  -moz-animation: rotation .6s infinite linear;
+  -o-animation: rotation .6s infinite linear;
+  animation: rotation .6s infinite linear;
+  border-left: 6px solid rgba(150, 150, 150, .15);
+  border-right: 6px solid rgba(150, 150, 150, .15);
+  border-bottom: 6px solid rgba(150, 150, 150, .15);
+  border-top: 6px solid rgba(150, 150, 150, .8);
+  border-radius: 100%;
+}
+
+@-webkit-keyframes rotation {
+  from { -webkit-transform: rotate(0deg); }
+  to { -webkit-transform: rotate(359deg); }
+}
+
+@-moz-keyframes rotation {
+  from { -moz-transform: rotate(0deg); }
+  to { -moz-transform: rotate(359deg); }
+}
+
+@-o-keyframes rotation {
+  from { -o-transform: rotate(0deg); }
+  to { -o-transform: rotate(359deg); }
+}
+
+@keyframes rotation {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(359deg); }
+}
+
 /* BASICS */
 
 .CodeMirror {
@@ -622,6 +867,7 @@ div.CodeMirror-lint-message-error, div.CodeMirror-lint-message-warning {
   border: 0;
   -webkit-animation: blink 1.06s steps(1) infinite;
   -moz-animation: blink 1.06s steps(1) infinite;
+  -ms-animation: blink 1.06s steps(1) infinite;
   animation: blink 1.06s steps(1) infinite;
 }
 @-moz-keyframes blink {
@@ -780,6 +1026,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 .CodeMirror-gutter-wrapper {
   -webkit-user-select: none;
   -moz-user-select: none;
+  -ms-user-select: none;
   user-select: none;
 }
 
@@ -893,168 +1140,40 @@ div.CodeMirror-dragcursors {
 
 /* Help users use markselection to safely style text background */
 span.CodeMirror-selectedtext { background: none; }
-#graphiql-container .doc-explorer {
-  background: white;
-}
-
-#graphiql-container .doc-explorer-title-bar {
-  cursor: default;
-  display: -webkit-flex;
-  display: flex;
-  height: 34px;
-  line-height: 14px;
-  padding: 8px 8px 5px;
-  position: relative;
-  -webkit-user-select: none;
-  user-select: none;
-}
 
-#graphiql-container .doc-explorer-title {
-  padding: 10px 0 10px 10px;
-  font-weight: bold;
-  text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow-x: hidden;
-  -webkit-flex: 1;
-  flex: 1;
-}
-
-#graphiql-container .doc-explorer-back {
-  color: #3B5998;
-  cursor: pointer;
-  margin: -7px 0 -6px -8px;
-  overflow-x: hidden;
-  padding: 17px 12px 16px 16px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-#graphiql-container .doc-explorer-back:before {
-  border-left: 2px solid #3B5998;
-  border-top: 2px solid #3B5998;
-  content: '';
-  display: inline-block;
-  height: 9px;
-  margin: 0 3px -1px 0;
-  position: relative;
-  width: 9px;
-  -webkit-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-}
-
-#graphiql-container .doc-explorer-rhs {
-  position: relative;
-}
-
-#graphiql-container .doc-explorer-contents {
-  background-color: #ffffff;
-  border-top: 1px solid #d6d6d6;
-  bottom: 0;
-  left: 0;
-  min-width: 300px;
-  overflow-y: auto;
-  padding: 20px 15px;
+.CodeMirror-dialog {
   position: absolute;
-  right: 0;
-  top: 47px;
-}
-
-#graphiql-container .doc-type-description p:first-child ,
-#graphiql-container .doc-type-description blockquote:first-child {
-  margin-top: 0;
-}
-
-#graphiql-container .doc-explorer-contents a {
-  cursor: pointer;
-  text-decoration: none;
-}
-
-#graphiql-container .doc-explorer-contents a:hover {
-  text-decoration: underline;
-}
-
-#graphiql-container .doc-value-description {
-  padding: 4px 0 8px 12px;
-}
-
-#graphiql-container .doc-category {
-  margin: 20px 0;
-}
-
-#graphiql-container .doc-category-title {
-  border-bottom: 1px solid #e0e0e0;
-  color: #777;
-  cursor: default;
-  font-size: 14px;
-  font-variant: small-caps;
-  font-weight: bold;
-  letter-spacing: 1px;
-  margin: 0 -15px 10px 0;
-  padding: 10px 0;
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-#graphiql-container .doc-category-item {
-  margin: 12px 0;
-  color: #555;
-}
-
-#graphiql-container .keyword {
-  color: #B11A04;
-}
-
-#graphiql-container .type-name {
-  color: #CA9800;
-}
-
-#graphiql-container .field-name {
-  color: #1F61A0;
-}
-
-#graphiql-container .value-name {
-  color: #0B7FC7;
-}
-
-#graphiql-container .arg-name {
-  color: #8B2BB9;
-}
-
-#graphiql-container .arg:after {
-  content: ', ';
+  left: 0; right: 0;
+  background: inherit;
+  z-index: 15;
+  padding: .1em .8em;
+  overflow: hidden;
+  color: inherit;
 }
 
-#graphiql-container .arg:last-child:after {
-  content: '';
+.CodeMirror-dialog-top {
+  border-bottom: 1px solid #eee;
+  top: 0;
 }
 
-#graphiql-container .doc-alert-text {
-  color: #F00F00;
-  font-family: 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace;
-  font-size: 13px;
+.CodeMirror-dialog-bottom {
+  border-top: 1px solid #eee;
+  bottom: 0;
 }
 
-#graphiql-container .search-box-outer {
+.CodeMirror-dialog input {
   border: 1px solid #d3d6db;
-  box-sizing: border-box;
-  display: inline-block;
-  font-size: 12px;
-  height: 24px;
-  margin-bottom: 12px;
-  padding: 3px 8px 5px;
-  vertical-align: middle;
-  width: 100%;
+  outline: none;
+  background: transparent;
+  width: 20em;
+  color: inherit;
+  font-family: monospace;
 }
 
-#graphiql-container .search-box-input {
-  border: 0;
-  font-size: 12px;
-  margin: 0;
-  outline: 0;
-  padding: 0;
-  width: 100%;
+.CodeMirror-dialog button {
+  font-size: 70%;
 }
+
 .CodeMirror-foldmarker {
   color: blue;
   text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
@@ -1075,6 +1194,7 @@ span.CodeMirror-selectedtext { background: none; }
 .CodeMirror-foldgutter-folded:after {
   content: "\25B8";
 }
+
 /* The lint marker gutter */
 .CodeMirror-lint-markers {
   width: 16px;
@@ -1109,7 +1229,7 @@ span.CodeMirror-selectedtext { background: none; }
 
 .CodeMirror-lint-mark-error {
   background-image:
-    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==")
+          url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==")
 ;
 }
 
@@ -1148,52 +1268,7 @@ span.CodeMirror-selectedtext { background: none; }
   background-position: right bottom;
   width: 100%; height: 100%;
 }
-#graphiql-container .spinner-container {
-  position: absolute;
-  top: 50%;
-  height: 36px;
-  width: 36px;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 10;
-}
-
-#graphiql-container .spinner {
-  vertical-align: middle;
-  display: inline-block;
-  height: 24px;
-  width: 24px;
-  position: absolute;
-  -webkit-animation: rotation .6s infinite linear;
-  -moz-animation: rotation .6s infinite linear;
-  -o-animation: rotation .6s infinite linear;
-  animation: rotation .6s infinite linear;
-  border-left: 6px solid rgba(150, 150, 150, .15);
-  border-right: 6px solid rgba(150, 150, 150, .15);
-  border-bottom: 6px solid rgba(150, 150, 150, .15);
-  border-top: 6px solid rgba(150, 150, 150, .8);
-  border-radius: 100%;
-}
-
-@-webkit-keyframes rotation {
-  from { -webkit-transform: rotate(0deg); }
-  to { -webkit-transform: rotate(359deg); }
-}
 
-@-moz-keyframes rotation {
-  from { -moz-transform: rotate(0deg); }
-  to { -moz-transform: rotate(359deg); }
-}
-
-@-o-keyframes rotation {
-  from { -o-transform: rotate(0deg); }
-  to { -o-transform: rotate(359deg); }
-}
-
-@keyframes rotation {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(359deg); }
-}
 .CodeMirror-hints {
   background: white;
   -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
@@ -1260,4 +1335,4 @@ li.CodeMirror-hint-active {
   border-bottom: solid 1px #c0c0c0;
   border-top: none;
   margin-bottom: -1px;
-}
+}
\ No newline at end of file