doorman-proxy/public/_doorman/css/main.css

Provides an authentication/authorization layer in front of other http/websocket services

body {
  background-color: #25272b;
  color: #fff;
}

#container {
  max-width: 920px;
  margin: 40px auto;
}

#title {
  float: left;
  width: 470px;
}

#logo {
  width: 443px;
  height: 467px;
  text-indent: -10000px;
  background: url(/_doorman/images/logo.jpg) top left no-repeat;
}

#small-logo { display: none; padding-top: 30px; }

#main {
  padding-top: 100px;
  margin-left: 470px;
  max-width: 450px;
}

h1 {
  font-weight: normal;
  font-style: italic;
  font-size: 1.6em;
  border-bottom: 1px solid #eee;
  margin-bottom: 1.5em;
  font-family: Palatino, "Times New Roman", serif;
}

h2 {
  font-weight: normal;
  font-size: 1.2em;
  color: #CCC;
}

form label {
  font-family: "Helvetica", sans-serif;
  text-transform: uppercase;
  display: block;
  font-size: 0.7em;
  color: #999;
  padding-bottom: 0.5em;
}

form input {
  width: 100%;
  border: 0;
  padding: 15px;
  background-color: #65676B;
  color: #FFF;
  font-size: 1.2em;
  box-sizing: border-box;
  margin-bottom: 1em;
}

.button {
  display: block;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 -1px 0 rgba(0,0,0,.5);
  background-color: #3072b3; /* Old browsers */
  background-repeat: repeat-x; /* Repeat the gradient */
  background-image: -moz-linear-gradient(top, #599bdc 0%, #3072b3 100%); /* FF3.6+ */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#599bdc), color-stop(100%,#3072b3)); /* Chrome,Safari4+ */
  background-image: -webkit-linear-gradient(top, #599bdc 0%,#3072b3 100%); /* Chrome 10+,Safari 5.1+ */
  background-image: -ms-linear-gradient(top, #599bdc 0%,#3072b3 100%); /* IE10+ */
  background-image: -o-linear-gradient(top, #599bdc 0%,#3072b3 100%); /* Opera 11.10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#599bdc', endColorstr='#3072b3',GradientType=0 ); /* IE6-9 */
  background-image: linear-gradient(top, #599bdc 0%,#3072b3 100%); /* W3C */
  border: 1px solid #2967a4;
  -webkit-transition: none;
  -moz-transition: none;
  transition: none;
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.2);
  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.2);

  font-size: 20px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 12px 24px;
  margin-bottom: 20px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

.button:hover {
  background-position: 0 60px;
}

.button:active {
  background-color: #3072b3; /* Old browsers */
  background-repeat: repeat-x; /* Repeat the gradient */
  background-image: -moz-linear-gradient(top, #285e93 0%, #3072b3 100%); /* FF3.6+ */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#285e93), color-stop(100%,#3072b3)); /* Chrome,Safari4+ */
  background-image: -webkit-linear-gradient(top, #285e93 0%,#3072b3 100%); /* Chrome 10+,Safari 5.1+ */
  background-image: -ms-linear-gradient(top, #285e93 0%,#3072b3 100%); /* IE10+ */
  background-image: -o-linear-gradient(top, #285e93 0%,#3072b3 100%); /* Opera 11.10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#285e93', endColorstr='#3072b3',GradientType=0 ); /* IE6-9 */
  background-image: linear-gradient(top, #285e93 0%,#3072b3 100%); /* W3C */
  -webkit-box-shadow: inset 0 10px 10px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.2);
  -moz-box-shadow: inset 0 10px 10px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.2);
  box-shadow: inset 0 10px 10px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.2);
}

.button img {
  background-color: #fff;
  margin-right: 5px;
  padding: 2px;
  border-radius: 2px;
  margin-bottom: -3px;
  width: 16px;
  height: 16px;
}

@media screen and (max-width: 776px) {
  #title { display: none; }
  #main { margin: 0 auto; padding-top: 0px; }
  #small-logo { display: block; }
  #small-logo img { width: 100%; }
}