@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  src: local('Special Elite'), local('SpecialElite-Regular'), url(special_elite.ttf) format('truetype');
}

* { box-sizing: border-box; }
.centered { text-align: center; }

body {
  background-color: #222;
  font-family: "Special Elite";
  color: #EEE;
  text-align: center;
  text-shadow: 1px 1px 2px #111;
}

a:active, a:focus {
  border: none !important;
  outline: none !important;
}

a:active {
  color: #7CFF66 !important;
}

#nav {
  text-align: center;
}

#nav a {
  display: inline-block;
  padding: 20px 20px;
  color: #FFF;
  font-size: 1.5em;
  text-decoration: none;
}

#nav a:hover {
  text-decoration: underline;
  text-shadow: 0px 0px 5px #111, 2px 2px 3px #111
}

#main {
  margin: auto;
  text-align: left;
  max-width: 800px;
}

#main h1 {
  font-size: 3em;
}

#main ul li {
  font-size: 1.3em;
}

a.play-link {
  color: #5CF367;
}

a.edit-link {
  color: #6CC1D3;
}

a.del-link {
  color: #E75449;
}

a.add-button {
  display: inline-block;
  float: right;
  color: #7CFF66;
  font-size: 1.4em;
}

.webradio-form, .alarm-form {
  text-align: left;
  margin: auto;
  max-width: 800px;
  font-size: 1.5em;
}

.alarm-form input[type="checkbox"] {
  margin-left: 15px;
  margin-right: 5px;
  border: #666 solid 2px !important;
}

.alarm-form select {
  margin-left: 15px;
  color: #FFF;
  text-shadow: 1px 1px 1px #111;
  background-color: #333 !important;
  font-family: "Special Elite" !important;
  border: #666 solid 3px !important;
  padding: 10px 10px 5px 10px;
  box-shadow: none !important;
  font-size: 0.8em;
}

.my-input-1 {
  background-color: #333;
  color: #FFF;
  border: #777 dashed 3px !important;
  box-shadow: none !important;
  font-family: "Special Elite" !important;
}

.submit-button {
  background-color: #222;
  padding: 10px 20px 5px 20px;
  font-family: "Special Elite" !important;
  box-shadow: none !important;
  color: #7CFF66;
  border: #7CFF66 dashed 2px !important;
}

input.submit-button:hover, button.submit-button:hover {
  opacity: 0.7;
}

.submit-button:active {
  border-color: #6B6FFF !important;
  color: #6B6FFF;
}

#player {
  font-size: 1.5em;
  margin-bottom: 20px;
}

.not-a-button {
  color: #DDD;
  border-color: #DDD !important;
}

.blue-button {
  color: #63BCFF;
  border-color: #63BCFF !important;
}

.red-button {
  color: #E84553;
  border-color: #E84553 !important;
}

.no-right-border { border-right: none !important; }
.no-left-border { border-left: none !important; }

.alarm-disabled { opacity: 0.5; }
