api-console/css/main.css

body {
  margin:0;
  font: 14px "Helvetica Neue", Helvetica-Neue, HelveticaNeue, Helvetica, arial, sans-serif;
  font-weight: 200;
  background: #FFF;
}

#auth {
  position: fixed;
  bottom: 0;
  right: 0px;
  width: 200px;
  padding-top: 30px;
  padding-bottom: 20px;
  color: #fff;
  background: #000;
  z-index: 50;
}

#auth a {
  color: #fff;
  margin-left: 70px;
  text-decoration: none;
  font-weight: bold;
}

#auth a:hover {
  text-decoration: underline;
}

#panel {
  position: fixed;
  top:0;
  left:0;
  bottom:-1px;
  width: 350px;
  border-bottom: 1px solid #EEE;
  overflow: hidden;
  background: hsl(214, 20%, 18%);
  z-index: 1;
  border-right: 1px solid hsl(214, 20%, 46%);
}

.inputs {
  background: #005684;
  box-shadow: 0 0 5px #000;
  position: absolute;
  top:0;
  right:0;
  left: 0;
  bottom: 60px;
  overflow: auto;
}

form {
  margin:0;
  padding:0;
}
input[type=text], textarea {
  display: block;
  font-size: 16px;
  width:100%;
  padding:10px;
  margin: 5px 0 0;
  border: none;
  box-sizing: border-box;
  background: hsl(199, 0%, 90%);
  color: hsla(0,100%,0%,0.4);
}

input[type=text]:focus, textarea:focus {
  color: #333;
  background: #FFF;
  outline: none;
  box-shadow: inset 0 0 5px #666;
}

.controls {
  position: absolute;
  padding: 10px;
  height: 40px;
  right: 0;
  left: 0;
  bottom: 0;
}

button {
  cursor: pointer;
  color: hsl(215, 20%, 50%);
  text-shadow: 0 -1px 0 hsl(215,21%,9%);
  font-weight: 200;
  display:inline-block;
  width: 48%;
  margin-right: 4%;
  font-size: 16px;
  border: 1px solid hsl(215,21%,9%);
  padding: 8px;
  border-radius: 2px;
  box-shadow:0 1px 0 hsla(0,0%,100%,0.1);
  background-color: #2c3644;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(44, 54, 68)), to(rgb(36, 44, 56)));
  background-image: -webkit-linear-gradient(top, rgb(44, 54, 68), rgb(36, 44, 56));
  background-image: -moz-linear-gradient(top, rgb(44, 54, 68), rgb(36, 44, 56));
  background-image: -o-linear-gradient(top, rgb(44, 54, 68), rgb(36, 44, 56));
  background-image: -ms-linear-gradient(top, rgb(44, 54, 68), rgb(36, 44, 56));
  background-image: linear-gradient(top, rgb(44, 54, 68), rgb(36, 44, 56));
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#2c3644', EndColorStr='#242c38');
}

button:hover, button:focus {
  box-shadow: inset 0 0 3px hsl(215,30%,40%), 0 1px 0 hsla(0,0%,100%,0.1);
  color: hsl(215, 20%, 75%);
}

button:active {
  background-color: #242c37;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(36, 44, 55)), to(rgb(43, 53, 67)));
  background-image: -webkit-linear-gradient(top, rgb(36, 44, 55), rgb(43, 53, 67));
  background-image: -moz-linear-gradient(top, rgb(36, 44, 55), rgb(43, 53, 67));
  background-image: -o-linear-gradient(top, rgb(36, 44, 55), rgb(43, 53, 67));
  background-image: -ms-linear-gradient(top, rgb(36, 44, 55), rgb(43, 53, 67));
  background-image: linear-gradient(top, rgb(36, 44, 55), rgb(43, 53, 67));
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#242c37', EndColorStr='#2b3543');
}

button:last-child {
  margin-right: 0;
}

button[type=submit]{
  box-shadow: 0 1px 0 hsla(0,0%,100%,0.1);
  color: #FFF;
  background-color: #c36a18;
  background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(29, 88%, 53%)), to(hsl(29, 78%, 33%)));
  background-image: -webkit-linear-gradient(top, hsl(29, 88%, 53%), hsl(29, 78%, 33%));
  background-image: -moz-linear-gradient(top, hsl(29, 88%, 53%), hsl(29, 78%, 33%));
  background-image: -o-linear-gradient(top, hsl(29, 88%, 53%), hsl(29, 78%, 33%));
  background-image: -ms-linear-gradient(top, hsl(29, 88%, 53%), hsl(29, 78%, 33%));
  background-image: linear-gradient(top, hsl(29, 88%, 53%), hsl(29, 78%, 33%));
}

button[type=submit]:hover, button[type=submit]:focus {
  box-shadow: inset 0 0 4px hsl(29,100%,80%) , 0 1px 0 hsla(0,0%,100%,0.1);
}

button[type=submit]:active {
  box-shadow: inset 0 0 2px hsl(29,100%,80%) , 0 1px 0 hsla(0,0%,100%,0.1);
  background-color: #b76416;
  background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(29, 78%, 36%)), to(hsl(29, 79%, 44%)));
  background-image: -webkit-linear-gradient(top, hsl(29, 78%, 36%), hsl(29, 79%, 44%));
  background-image: -moz-linear-gradient(top, hsl(29, 78%, 36%), hsl(29, 79%, 44%));
  background-image: -o-linear-gradient(top, hsl(29, 78%, 36%), hsl(29, 79%, 44%));
  background-image: -ms-linear-gradient(top, hsl(29, 78%, 36%), hsl(29, 79%, 44%));
  background-image: linear-gradient(top, hsl(29, 78%, 36%), hsl(29, 79%, 44%));
}

select {
  display: inline-block;
  text-align:right;
}

textarea {
  resize: vertical;
  height: 100px;
}

.inputs > div {
  border-top: 1px solid #0074A2;
  border-bottom: 1px solid rgb(0, 64, 99);
  position: relative;
}

label {
  display: block;
  font-weight: 500;
  font-size: 12px;
  color: hsl(214, 20%, 9%);
  text-transform: uppercase;
  text-shadow: 0 1px 0 hsl(201,40%,45%);
  padding-top: 5px;
  text-indent: 10px;
}

.inputs > div:first-child {
  border-top:none;
  padding: 0;
}

.inputs > div:last-child {
  border-bottom: none;
}

ul#requests {
  box-shadow: 0 0 4px #000;
  margin:0;
  padding:0;
  list-style:none;
  z-index:2;
  position: absolute;
  overflow: auto;
  top:0;
  left: 350px;
  right:0;
  bottom:0;
  background: url("../img/wp.png") no-repeat center center hsl(0,0%,97%);
}

ul#requests > li {
  border-bottom: 1px solid #DDD;
  position: relative;
  overflow: hidden;
  background: #FFF;
}

ul#requests > li .response {
  display:none;
}

ul#requests > li.expanded .response {
  display:block;;
}

li:last-child {
}

h2 {
  margin:0;
  padding: 4px 10px;
  font-weight: 200;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  margin-right: 100px;
}
h2 small {
  color: #999;
}
h2 em {
  font-style: normal;
  color: #CCC;
}
.throbber {
  position: absolute;
  right:20px;
  top:16px;
}


@-webkit-keyframes throb {
  0% { -webkit-transform:scale(0,0); opacity:1;}
  75% { opacity:0.9 }
  100% { -webkit-transform:scale(1,1); opacity:0;}
}

@-moz-keyframes throb {
  0% { -moz-transform:scale(0,0); opacity:1;}
  75% { opacity:0.9 }
  100% { -moz-transform:scale(1,1); opacity:0;}
}

.throbber > div {
  border: 5px solid #999;
  width: 9px;
  height: 9px;
  position: absolute;
  border-radius: 20px;
  top: -8px;
  left: -8px;
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
}

.loading > .throbber > div {
  -webkit-animation: throb 0.4s linear infinite;
  -moz-animation: throb 0.4s linear infinite;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
}
.done > .throbber > div {
  -webkit-animation: none;
  -moz-animation: none;
  -webkit-transform: scale(2,2);
  -moz-transform: scale(2,2);
  opacity: 0;
}

.status-code {
  display: inline-block;
  vertical-align: middle;
  padding: 2px 4px;
  margin: -4px 0 0 5px;
  font-size: 11px;
  line-height: 12px;
  font-family: Consolas, Monaco, monospace;
  background: #FFF;
  border: 1px solid #999;
  border-radius: 2px;
  text-shadow: 0 1px 0 #FFF;
  box-shadow: 0 1px 0 #FFF;
  color: #666;
  -webkit-transition: 400ms;
  -moz-transition: 400ms;
  box-shadow: inset 0 0 3px #666, 0 1px 0 #FFF;
}

[data-status-code^="2"]{
  background: hsl(100,100%,70%);
}

[data-status-code^="4"], [data-status-code^="5"]{
  background: hsl(0,100%,80%);
}

.response-meta {
  position: absolute;
  top: 8px;
  right: 7px;
  color: #999;
  text-align:right;
  -webkit-transition: right 400ms;
  -moz-transition: right 400ms;
}

.loading .response-meta {
  right: -100px;
}

.response {
  box-shadow: inset 0 0 20px #CCC;
  background: #F2F2F2;
  overflow:auto;
  text-shadow: 0 1px 0 #FFF;
  position:relative;
}

.structured {
  border-top: 1px solid #E0E0E0;
  padding: 10px;
}

.response > span {
  text-align: center;
  display:block;
  padding: 20px;
  font-style: italic;
  font-weight: 500;
  border-top: 1px solid #EEE;
  color: #CCC;
  background: #F2F2F2;
  text-shadow: 0 1px 0 #FFF;
}

.response ul {
  list-style:none;
  margin:0;
  padding-left: 20px;
}

.response li {
  white-space: nowrap;
  position:relative;
}

.key {
  display:inline-block;
  color: purple;
  overflow:hidden;
  text-overflow: ellipsis;
  vertical-align:middle;
}
.key::after {
  content: ' :';
  color: #999;
}

.value {
  vertical-align:middle;
  display: inline-block;
}

.number {
  color: blue;
}

.boolean {
  color: teal;
}

.string {
  display:inline-block;
  color: green;
}

.string::before, .string::after {
  content: '"';
  text-decoration:none;
}

.hint {
  color: #999;
  display: inline-block;
  vertical-align:middle;
}

img.avatar {
  position:relative;
  vertical-align:middle;
  margin-right: 5px;
  z-index: 2;
  -webkit-transform: scale(0.25,0.25);
  -moz-transform: scale(0.25,0.25);
  -webkit-transition: 200ms;
  -moz-transition: 200ms;
  margin:-36px;
  border-radius: 4px;
  border:2px solid #FFF;
}

img.avatar:hover {
  -webkit-transform: scale(1,1);
  -moz-transform: scale(1,1);
  box-shadow: 0 0 5px #000;
}

.response .closed > ul {
  display:none;
}

a.disclosure {
  position: absolute;
  left: -18px;
  top: -2px;
  width: 20px;
  height: 20px;
  text-align:center;
  line-height: 24px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transition: -webkit-transform 200ms;
  -moz-transition: -moz-transform 200ms;
  cursor: pointer;
}

.closed > a.disclosure {
  -webkit-transform: none;
  -moz-transform: none;
}

.api-url {
  cursor:pointer;
}

.api-url:hover {
  text-decoration: underline;
}

.api-url::before {
  content:"";
}

.api-url::after {
  font-family: Consolas, Monaco, monospace;
  margin-left: 5px;
  text-align:center;
  display: inline-block;
  content: "›";
  color: #999;
  font-size: 16px;
  line-height: 14px;
  text-shadow:none;
  font-weight: 900;
}

.api-url:hover::after {
  color:#222;
}

ul.tabs {
  padding:0;
  margin:0;
  position: absolute;
  top: 38px;
  right: 5px;
  box-shadow: 0 1px 0 hsl(0,0%,100%);
  display:none;
}

.expanded > ul.tabs {
  display: block;
}

#panel ul.tabs {
  position: absolute;
  text-align: center;
  display:block;
  box-shadow: 0 1px 0 hsl(201, 200%, 30%);
  top: 5px;
  right: 5px;
}

ul.tabs > li {
  color: #999;
  border: 1px solid #CCC;
  border-width: 1px 1px 1px 0;
  font-size: 12px;
  padding: 2px 4px;
  display:inline-block;
  text-shadow: 0 1px 0 #FFF;
  background-color: #e9e9e9;
  background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 95%)), to(hsl(0, 0%, 88%)));
  background-image: -webkit-linear-gradient(top, hsl(0, 0%, 95%), hsl(0, 0%, 88%));
  background-image: -moz-linear-gradient(top, hsl(0, 0%, 95%), hsl(0, 0%, 88%));
  background-image: -o-linear-gradient(top, hsl(0, 0%, 95%), hsl(0, 0%, 88%));
  background-image: -ms-linear-gradient(top, hsl(0, 0%, 95%), hsl(0, 0%, 88%));
  background-image: linear-gradient(top, hsl(0, 0%, 95%), hsl(0, 0%, 88%));
  cursor:pointer;
  font-weight: 500;
}

#panel ul.tabs > li {
  font-size: 11px;
  color: hsl(201,100%,8%);
  text-shadow: 0 1px 0 hsl(201, 100%, 35%);
  border-color: hsl(201, 100%, 20%);
  background-color: #005786;
  background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(201, 100%, 30%)), to(hsl(201, 100%, 23%)));
  background-image: -webkit-linear-gradient(top, hsl(201, 100%, 30%), hsl(201, 100%, 23%));
  background-image: -moz-linear-gradient(top, hsl(201, 100%, 30%), hsl(201, 100%, 23%));
  background-image: -o-linear-gradient(top, hsl(201, 100%, 30%), hsl(201, 100%, 23%));
  background-image: -ms-linear-gradient(top, hsl(201, 100%, 30%), hsl(201, 100%, 23%));
  background-image: linear-gradient(top, hsl(201, 100%, 30%), hsl(201, 100%, 23%));
}

ul.tabs > li:hover {
  color: #777;
}

ul.tabs > li:first-child {
  border-left-width:1px;
  border-radius: 2px 0 0 2px;
}


ul.tabs > li:last-child {
  border-right-width:1px;
  border-radius: 0 2px 2px 0;
}

ul.tabs > li.selected {
  color: #666;
  box-shadow: inset 0 0 2px #CCC;
  background-color: #e5e5e5;
  background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 88%)), to(hsl(0, 0%, 92%)));
  background-image: -webkit-linear-gradient(top, hsl(0, 0%, 88%), hsl(0, 0%, 92%));
  background-image: -moz-linear-gradient(top, hsl(0, 0%, 88%), hsl(0, 0%, 92%));
  background-image: -o-linear-gradient(top, hsl(0, 0%, 88%), hsl(0, 0%, 92%));
  background-image: -ms-linear-gradient(top, hsl(0, 0%, 88%), hsl(0, 0%, 92%));
  background-image: linear-gradient(top, hsl(0, 0%, 88%), hsl(0, 0%, 92%));
}

#panel ul.tabs > li.selected {
  color: hsl(201, 60%, 50%);
  box-shadow: inset 0 0 2px hsl(202,100%, 9%);
  text-shadow: 0 -1px 0 hsl(202,100%,9%);
  background-color: #003b5d;
  background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(202, 100%, 18%)), to(hsl(202, 100%, 18%)));
  background-image: -webkit-linear-gradient(top, hsl(202, 100%, 18%), hsl(202, 100%, 18%));
  background-image: -moz-linear-gradient(top, hsl(202, 100%, 18%), hsl(202, 100%, 18%));
  background-image: -o-linear-gradient(top, hsl(202, 100%, 18%), hsl(202, 100%, 18%));
  background-image: -ms-linear-gradient(top, hsl(202, 100%, 18%), hsl(202, 100%, 18%));
  background-image: linear-gradient(top, hsl(202, 100%, 18%), hsl(202, 100%, 18%));
}

.response > pre {
  padding: 20px;
}

#reference input {
  display:block;
  width: 100%;
}

#reference {
  position: relative;
}

#reference > label {
  padding: 2px;
  display: block;
  box-shadow: 0 0 4px #000;
  position: relative;
  z-index: 2;
}

#reference > ul {
  background: #EEE;
  position: relative;
  z-index: 1;
  list-style:none;
  max-height: 200px;
  min-height: 200px;
  overflow: auto;
}

#reference .throbber {
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  z-index: 2;
  -webkit-animation: throb 0.4s linear infinite;
  -moz-animation: throb 0.4s linear infinite;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
}

#reference ul {
  padding:0;
  margin:0;
}

#reference .description {
  display:block;
  font-size: 12px;
  font-weight: 500;
}

#reference > ul > li {
}

#reference strong {
  text-transform: uppercase;
  font-size: 11px;
  border-top: 1px solid #DDD;
  display:block;
  padding: 4px;
  font-weight: 500;
  background: #E0E0E0;
  cursor: default;
}

#reference li li {
  border: 1px solid #DDD;
  border-width: 1px 0 0;
  padding: 4px;
  cursor:pointer;
  background: #F2F2F2;
}

#reference li li.selected {
  background: hsl(200,100%,46%);
  color: #FFF;
}

.path-details {
  display: block;
  max-width: 100%;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.object-builder {
  border: 1px solid hsl(201,100%,18%);
  border-width: 1px 0 0;
  display:table;
  width: 100%;
  margin-top: 5px;
}

.object-property {
  display: table-row;
  width: 100%;
}

.object-property-key, .object-property-value {
  border-bottom: 1px solid hsl(201,100%,24%);
  vertical-align: top;
  width: 50%;
  text-transform: none;
  padding: 8px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  display: table-cell;
}

.object-property:last-child .object-property-key, .object-property:last-child .object-property-value {
  border-bottom: none;
}

.object-property-key {
  color: #FFF;
}

.object-property-value {
  color: #FFF;
  font-weight:300;
  background: hsla(0,0%,100%,0.1);
}

.object-property-value:active, .object-property-value:focus {
  outline: none;
  background: hsla(0,0%,100%,0.2);
  box-shadow: inset 0 0 4px hsla(0,0%,0%,0.4);
}

.raw-toggle {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 11px;
  font-weight: 500;
  color: hsl(201, 100%, 5%);
  text-shadow: 0 1px 0 hsl(201, 100%, 40%);
  padding-right: 30px;
  cursor: pointer;
}

.raw-toggle.on {
  color: hsl(29, 88%, 53%);
  text-shadow: 0 -1px 0 hsl(201, 100%, 0%);

}

.raw-toggle::before {
  content: " ";
  position: absolute;
  right: 0;
  top: 0;
  height: 14px;
  width: 24px;
  background: hsl(201, 100%, 20%);
  border-radius: 28px;
  box-shadow: inset 0 0 3px hsl(201, 100%, 10%), 0 1px 0 hsl(201, 100%, 30%);
  z-index: 1;
  -webkit-transition: 500ms;
  -moz-transition: 100ms;
}

.raw-toggle::after {
  content: " ";
  z-index: 2;
  position: absolute;
  right: 11px;
  top: 1px;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  -webkit-transition: 100ms;
  -moz-transition: right 100ms;
  background-color: #007cbf;
  background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(201, 100%, 49%)), to(hsl(201, 100%, 26%)));
  background-image: -webkit-linear-gradient(top, hsl(201, 100%, 49%), hsl(201, 100%, 26%));
  background-image: -moz-linear-gradient(top, hsl(201, 100%, 49%), hsl(201, 100%, 26%));
  background-image: -o-linear-gradient(top, hsl(201, 100%, 49%), hsl(201, 100%, 26%));
  background-image: -ms-linear-gradient(top, hsl(201, 100%, 49%), hsl(201, 100%, 26%));
  background-image: linear-gradient(top, hsl(201, 100%, 49%), hsl(201, 100%, 26%));
}

.raw-toggle.on::after {
  right: 1px;
}


.group-__do_not_document {
  display: none;
}

#help-bubble {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 200;
  border-radius: 2px;
}

#help-bubble > div {
  text-shadow: 0 -1px 0 hsl(29, 88%, 40%);
  position: relative;
  padding: 8px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 300;
  color: #FFF;
  max-width: 250px;
}

#help-bubble:before {
  content:" ";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  -webkit-transform: scaleX(1.4) translate(-2px,-3px) rotate(45deg);
}

#help-bubble > div, #help-bubble:before {
  background: hsl(29, 88%, 48%);
}

#help-bubble, #help-bubble:before {
  box-shadow: 0 0 5px hsla(0,0%,0%,1.0);
}

#help-bubble h1 {
  font-size: 12px;
  font-weight: 500;
  margin: 0 0 5px;
  padding:0 0 5px;
  border-bottom: 1px solid hsla(0,0%,100%,0.4);
}

#help-bubble h1 em {
  font-style: normal;
  font-weight: 400;
  padding-left: 10px;
  opacity: 0.95;
}

#help-bubble p {
  margin:0;
  padding: 0;
}

#help-bubble dt, #help-bubble code {
  font: 11px Consolas, Monaco, monospace;
  padding: 0;
  margin:0;
}

#help-bubble dt:after {
  content: ":";
}

#help-bubble dd {
  border-bottom: 1px solid hsla(0,0%,100%,0.4);
  margin: 0;
  padding: 5px 5px 10px 10px;
  margin-bottom: 10px;
}

#help-bubble dd:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}