/* == Login == */
/* page layout */
.console-login,
.console-explain {
  box-sizing:border-box;
  width:50%;
}
.console-login {
  float:left;
}
.console-explain {
  float:right;
  padding:30px;
  padding-top:20px;
}
@media (max-width: 599px) {
  .console-login,
  .console-explain {
    float:none;
    width:auto;
  }
  .console-explain {
    padding-top:10px;
  }
}
/* make things smaller, don't distract from the login buttons :o) */
.console-login h2 {
  font-size:1em;
  padding-bottom:5px;
}
.console-explain h3,
.console-explain p {
  font-size:0.8em;
  margin:0px;
  padding:0px;
}
.console-explain h3 {
  margin-top:10px;
}
/* login buttons */
.console-login p a.button-like {
  text-align:left;
  max-width:400px;
}
.console-login p a.request-oauth {
  border-style:dashed;
  background-color:white;
  color:rgb(17,165,156);
}
.console-login p a.request-oauth:hover {
  background-color:rgba(17,165,156,0.1);
}

/* == Console == */
/* put editor area out of the way */
.console .editor-area {
  width:150px;
  float:right;
}
/* channel buttons */
.console ul > li > a {
  float:left;
  width:200px;
  max-width:100%;
  margin:10px;
  margin-top:0px;
  margin-right:0px;
  text-transform:uppercase;
  font-weight:normal;
  font-size:1.4em;
  letter-spacing:0.035em;
}
/* console link button styles */
.console .logged-in-area a.button-like {
  border-radius:5px;
}
.console .logged-in-area a.button-like:hover {
  background-color:rgb(10,194,185);
  border-color:rgb(10,194,185);
  color:white;
}
/* return to normal flow after channel list */
.console ul + p {
  clear:both;
}

/* == Edit form == */
/* flow */
.console-edit-channel label,
.console-edit-channel input.toggle {
  float:right;
}
.console-edit-channel .detail-label {
  float:left;
}
.console-edit-channel .channel-detail,
.console-edit-channel .channel-detail .channel-info {
  clear:both;
}
/* pseudo text area */
.console-edit-channel .channel-info {
  background-color:white;
  color:black;
  line-height:1.3em;
  font-size:1em;
  border:1px solid #ccc;
  border-radius:5px;
}
.console-edit-channel .channel-info textarea,
.console-edit-channel .channel-info input,
.console-edit-channel .channel-info .rpgserv-info {
  display:block;
  box-sizing:border-box;
  width:100%;
  border:0px;
  border-radius:5px;
  margin:0px;
  font-size:1em;
  font-family:"Courier New",monospace;
  font-style:normal;
  background-color:white;
  padding:5px;
}
.console-edit-channel .channel-info .rpgserv-info {
  /* visual clues that this isn't actually editable */
  font-style:italic;
  background-image:linear-gradient(0deg, white 0%, rgba(230,230,230,1) 100%);
  border-bottom:1px dashed rgb(220,220,220);
}
.console-edit-channel .channel-info .rpgserv-info span {
  font-style:normal;
  font-weight:bold;
  font-size:0.8em;
}
.console-edit-channel .channel-info textarea {
  resize:vertical;
  /* Textarea CSS is still in the stone age, we'll need to resize with
   * JS. To support JS-free users let's make this a non-obnoxious
   * default-height, though */
  height:4em;
}
.console-edit-channel input.toggle:checked + .channel-info .rpgserv-info {
  /* Magic! Visual cue that this data will not be displayed. */
  text-decoration:line-through;
}
/* logo */
.console-edit-channel-logo .detail-logo {
  display:block;
  text-align:center;
  line-height:200px;
  width:200px;
  float:right;
  border-radius:0px;
}
.console-edit-channel-logo .detail-logo::after {
  background-image:none;
  border-bottom-left-radius:0px;
}
.console-edit-channel-logo:hover .detail-logo {
  opacity:1 !important;
}
.console-edit-channel-logo input {
  display:none;
}
.console-edit-channel-logo button {
  clear:both;
  float:right;
  visibility:hidden;
  width:200px;
}
.console-edit-channel-logo span {
  color:rgb(255,255,255);
  font-weight:bold;
  text-shadow:rgb(0,0,0) 0 0 4px;
}
@media (max-width: 599px) {
  .console-edit-channel-logo .detail-logo {
    float:none;
    margin:auto;
  }
}
/* stylings */
.console-edit-channel .detail-label,
.console-edit-channel label {
  font-size:0.9em;
}
.console-edit-channel .detail-label {
  text-transform:uppercase;
  font-weight:bold;
}
.console-edit-channel button {
  clear:both;
  border-radius:5px;
  width:100%;
  max-width:200px;
  margin:auto;
  margin-top:15px;
}
.console-edit-channel .channel-detail {
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #ccc;
}
.console-edit-channel .channel-detail:first-of-type {
  border-top:0px;
}