/* ----------------
// Standard Elements
// ---------------- */
html,
body {
  margin: 0;
  padding: 0;
}
body {
  color: #000;
}
#page {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e4e4e4), color-stop(1.2, #fff), color-stop(1, #fff));
  background: -webkit-linear-gradient(top, #e4e4e4 0px, #fff 120px, #fff 100%);
  background: -moz-linear-gradient(top, #e4e4e4 0px, #fff 120px, #fff 100%);
  background: -o-linear-gradient(top, #e4e4e4 0px, #fff 120px, #fff 100%);
  background: -ms-linear-gradient(top, #e4e4e4 0px, #fff 120px, #fff 100%);
  background: linear-gradient(top, #e4e4e4 0px, #fff 120px, #fff 100%);
  width: 100%;
  min-height: 500px;
}
body,
td {
  font: 11pt Tahoma, Arial, Helvetica, sans;
}
button,
input,
textarea,
select,
button {
  font: 10pt Tahoma, Arial, Helvetica, sans;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
a:active {
  outline: none;
}
a:focus {
  -moz-outline-style: none;
}
ul,
ol {
  -webkit-padding-start: 20px;
}
li {
  list-style: none;
}
h1,
h2,
h3,
h4 {
  margin: 0 0 10px 0;
  padding: 0;
}
h2 {
  color: #444;
  font-size: 1.3em;
  font-weight: bold;
}
h3 {
  color: #666;
  font-size: 1.2em;
  font-weight: normal;
}
h4 {
  color: #666;
  font-size: 1em;
  font-weight: normal;
}
img {
  border: 0;
}
form {
  margin: 0;
  padding: 0;
}
label {
  font-weight: bold;
  margin: 0 0 2px 0;
  display: inline;
}
input,
.selected,
textarea,
iframe.input {
  color: #505050;
  padding: 1px;
  border: 1px solid #ccc;
  margin-bottom: 2px;
  letter-spacing: 0;
}
input {
  padding: 4px;
}
.clear {
  clear: both;
}
/* ----------------
// Help
// ---------------- */
.help_16 {
  background: url("../images/ico/help_16.424ae216cb75.png") no-repeat center;
  height: 16px;
  width: 16px;
}
.help_24 {
  background: url("../images/ico/help_24.4df8d0aad2a7.png") no-repeat;
  height: 24px;
  width: 24px;
}
td .help_bubble,
th .help_bubble {
  padding-top: 8px;
}
h1 .help_bubble,
h2 .help_bubble {
  float: right;
  display: inline-block;
}
h1 .help_16 {
  padding: 0;
  margin-top: 9px;
}
h2 .help_16 {
  padding: 0;
  margin-top: 4px;
}
h1 .help_24 {
  padding: 0;
  margin-top: 5px;
}
h2 .help_24 {
  padding: 0;
  margin-top: -1px;
}
.modal-content-holder {
  display: none;
}
#simplemodal-overlay {
  background-color: #000;
}
#simplemodal-container-help {
  border: none;
  width: 90%;
  max-width: 900px;
  min-width: 300px;
}
.simplemodal-container a.modalCloseImg {
  background: url("../images/x.e7a75c39df3d.png") no-repeat;
/* adjust url as required */
  width: 25px;
  height: 29px;
  display: inline;
  z-index: 3200;
  position: absolute;
  top: -11px;
  right: -21px;
  cursor: pointer;
}
.simplemodal-wrap {
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
#simplemodal-container-error .simplemodal-wrap {
  border: thick solid #f00;
  border-radius: 10px;
}
#simplemodal-container-info .simplemodal-wrap {
  border: thick solid #000;
  border-radius: 10px;
}
#simplemodal-container-dialog .simplemodal-wrap {
  border: thick solid #d64;
  border-radius: 10px;
}
#simplemodal-container-help .simplemodal-wrap {
  border: thick solid #00008b;
  border-radius: 10px;
}
.blink {
/* Added briefly to elements to make them blink **/
  background: #ffd700;
}
.simplemodal-data {
  padding: 5px 5px 25px 5px;
  overflow-y: auto;
  overflow-style: scrollbar;
}
.simplemodal-wrap h1 {
  font-size: 1.4em;
}
.simplemodal-wrap h2 {
  font-size: 1.2em;
}
.help-text button {
  height: 18px;
  width: inherit;
  font-weight: normal;
}
/* ----------------
// Flash Messages
// ---------------- */
#flash_success {
  background: #fff6bf;
  border-top: 2px solid #ffd324;
  border-bottom: 2px solid #ffd324;
  text-align: center;
  margin: 10px auto;
  padding: 5px 20px;
}
#flash_notice {
  background: #fff6bf;
  border-top: 2px solid #ffd324;
  border-bottom: 2px solid #ffd324;
  text-align: center;
  margin: 10px auto;
  padding: 5px 20px;
}
#flash_failure {
  background: #ffb1ad;
  border-top: 2px solid #f00;
  border-bottom: 2px solid #f00;
  text-align: center;
  margin: 10px auto;
  padding: 20px 20px;
}
.error_container {
  width: 100%;
  height: 50px;
}
.error,
.notice,
.success {
  border: 2px solid #ddd;
/*margin-bottom 1em*/
/*padding 0.8em*/
}
.notice {
  background: #fff6bf;
  border-color: #ffd324;
  color: #514721;
}
/* ----------------
// Page Layout
// ---------------- */
#content {
  position: absolute;
  left: 260px;
  top: 0;
  padding: 5px;
}
#content.fixed {
  position: fixed;
  padding: 0;
  margin: 0;
}
#footer {
  margin-top: 10px;
  text-align: center;
  font-size: 10px;
  padding: 2px;
  border-radius: 4px;
  color: #fff;
  background: #333;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #888), color-stop(0.1, #333), color-stop(0.9, #333), color-stop(1, #000));
  background: -webkit-linear-gradient(top, #888 0%, #333 10%, #333 90%, #000 100%);
  background: -moz-linear-gradient(top, #888 0%, #333 10%, #333 90%, #000 100%);
  background: -o-linear-gradient(top, #888 0%, #333 10%, #333 90%, #000 100%);
  background: -ms-linear-gradient(top, #888 0%, #333 10%, #333 90%, #000 100%);
  background: linear-gradient(top, #888 0%, #333 10%, #333 90%, #000 100%);
}
#footer a {
  color: #fff;
  text-decoration: underline;
}
/* ----------------
// Side-bar
// ---------------- */
#sidebar {
  position: absolute;
  width: 250px;
  padding: 5px 10px 5px 5px;
}
#sidebar .main-menu {
  padding: 5px 0;
}
#sidebar .section {
  margin-bottom: 10px;
}
#sidebar h1 {
  margin: 0;
}
#sidebar h2 {
  color: #fff;
  font-weight: bold;
  font-size: 1.3em;
  text-align: center;
  padding: 3px 6px;
  border-radius: 4px;
  background: #333;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #888), color-stop(0.1, #333), color-stop(0.9, #333), color-stop(1, #000));
  background: -webkit-linear-gradient(top, #888 0%, #333 10%, #333 90%, #000 100%);
  background: -moz-linear-gradient(top, #888 0%, #333 10%, #333 90%, #000 100%);
  background: -o-linear-gradient(top, #888 0%, #333 10%, #333 90%, #000 100%);
  background: -ms-linear-gradient(top, #888 0%, #333 10%, #333 90%, #000 100%);
  background: linear-gradient(top, #888 0%, #333 10%, #333 90%, #000 100%);
}
#sidebar h3 {
  color: #fff;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  border-radius: 4px;
  margin: 5px 0 10px 0;
  background: #333;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #888), color-stop(0.1, #333), color-stop(0.9, #333), color-stop(1, #000));
  background: -webkit-linear-gradient(top, #888 0%, #333 10%, #333 90%, #000 100%);
  background: -moz-linear-gradient(top, #888 0%, #333 10%, #333 90%, #000 100%);
  background: -o-linear-gradient(top, #888 0%, #333 10%, #333 90%, #000 100%);
  background: -ms-linear-gradient(top, #888 0%, #333 10%, #333 90%, #000 100%);
  background: linear-gradient(top, #888 0%, #333 10%, #333 90%, #000 100%);
}
#sidebar h4 {
  font-weight: bold;
  font-size: 1em;
  margin: 5px 0 0 0;
}
#sidebar hr {
  margin-top: 3px;
  margin-bottom: 0;
  height: 4px;
  border-radius: 4px;
  background: #333;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #888), color-stop(0.1, #333), color-stop(0.9, #333), color-stop(1, #000));
  background: -webkit-linear-gradient(top, #888 0%, #333 10%, #333 90%, #000 100%);
  background: -moz-linear-gradient(top, #888 0%, #333 10%, #333 90%, #000 100%);
  background: -o-linear-gradient(top, #888 0%, #333 10%, #333 90%, #000 100%);
  background: -ms-linear-gradient(top, #888 0%, #333 10%, #333 90%, #000 100%);
  background: linear-gradient(top, #888 0%, #333 10%, #333 90%, #000 100%);
}
#sidebar button {
  margin: 2px 0 2px 2px;
}
#sidebar .user-box {
  padding: 3px 4px 4px 4px;
  color: #fff;
  border-radius: 4px;
  background: #222;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #888), color-stop(0.1, #111), color-stop(0.9, #333), color-stop(1, #000));
  background: -webkit-linear-gradient(top, #888 0%, #111 10%, #333 90%, #000 100%);
  background: -moz-linear-gradient(top, #888 0%, #111 10%, #333 90%, #000 100%);
  background: -o-linear-gradient(top, #888 0%, #111 10%, #333 90%, #000 100%);
  background: -ms-linear-gradient(top, #888 0%, #111 10%, #333 90%, #000 100%);
  background: linear-gradient(top, #888 0%, #111 10%, #333 90%, #000 100%);
}
#sidebar .user-info .name {
  font-weight: bold;
  text-align: left;
}
#sidebar .user-info .credits {
  font-weight: bold;
  text-align: right;
}
#sidebar .user-info .action {
  font-size: 70%;
  font-weight: normal;
}
#sidebar .mini-login button {
  width: 57px;
  height: 57px;
  vertical-align: top;
}
#sidebar .mini-login label {
  color: #fff;
  display: inline;
  float: left;
  width: 95px;
}
#sidebar .mini-login input {
  width: 70px;
}
/* ----------------
// Login
// ---------------- */
#login-form input {
  margin-bottom: 10px;
}
#login-form button {
  margin-bottom: 10px;
}
/* ----------------
// Buttons
// ---------------- */
button,
input[type="button"],
input[type="submit"] {
  width: 120px;
  height: 45px;
  cursor: pointer;
  vertical-align: middle;
  padding: 1px 5px 3px 5px;
  font-weight: bold;
  border: thin solid #888;
  border-radius: 4px;
  color: #444;
  background: #ccc;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.1, #ccc), color-stop(0.9, #ccc), color-stop(1, #aaa));
  background: -webkit-linear-gradient(top, #fff 0%, #ccc 10%, #ccc 90%, #aaa 100%);
  background: -moz-linear-gradient(top, #fff 0%, #ccc 10%, #ccc 90%, #aaa 100%);
  background: -o-linear-gradient(top, #fff 0%, #ccc 10%, #ccc 90%, #aaa 100%);
  background: -ms-linear-gradient(top, #fff 0%, #ccc 10%, #ccc 90%, #aaa 100%);
  background: linear-gradient(top, #fff 0%, #ccc 10%, #ccc 90%, #aaa 100%);
}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
  border: thin solid #800;
  color: #800;
  background: #ccc;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.1, #ccc), color-stop(0.9, #ccc), color-stop(1, #aaa));
  background: -webkit-linear-gradient(top, #fff 0%, #ccc 10%, #ccc 90%, #aaa 100%);
  background: -moz-linear-gradient(top, #fff 0%, #ccc 10%, #ccc 90%, #aaa 100%);
  background: -o-linear-gradient(top, #fff 0%, #ccc 10%, #ccc 90%, #aaa 100%);
  background: -ms-linear-gradient(top, #fff 0%, #ccc 10%, #ccc 90%, #aaa 100%);
  background: linear-gradient(top, #fff 0%, #ccc 10%, #ccc 90%, #aaa 100%);
}
button:active,
input[type="button"]:active,
input[type="submit"]:active {
  border: thin solid #880;
  border: thin solid #800;
  color: #800;
  background: #ccc;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #888), color-stop(0.1, #ccc), color-stop(0.9, #ccc), color-stop(1, #eee));
  background: -webkit-linear-gradient(top, #888 0%, #ccc 10%, #ccc 90%, #eee 100%);
  background: -moz-linear-gradient(top, #888 0%, #ccc 10%, #ccc 90%, #eee 100%);
  background: -o-linear-gradient(top, #888 0%, #ccc 10%, #ccc 90%, #eee 100%);
  background: -ms-linear-gradient(top, #888 0%, #ccc 10%, #ccc 90%, #eee 100%);
  background: linear-gradient(top, #888 0%, #ccc 10%, #ccc 90%, #eee 100%);
}
button.active,
input[type="button"].active,
input[type="submit"].active {
  border: thin solid #800;
  color: #800;
  background: #da0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fc0), color-stop(0.1, #da0), color-stop(0.9, #da0), color-stop(1, #c80));
  background: -webkit-linear-gradient(top, #fc0 0%, #da0 10%, #da0 90%, #c80 100%);
  background: -moz-linear-gradient(top, #fc0 0%, #da0 10%, #da0 90%, #c80 100%);
  background: -o-linear-gradient(top, #fc0 0%, #da0 10%, #da0 90%, #c80 100%);
  background: -ms-linear-gradient(top, #fc0 0%, #da0 10%, #da0 90%, #c80 100%);
  background: linear-gradient(top, #fc0 0%, #da0 10%, #da0 90%, #c80 100%);
}
button.active:active,
input[type="button"].active:active,
input[type="submit"].active:active {
  border: thin solid #800;
  color: #800;
  background: #da0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #840), color-stop(0.1, #da0), color-stop(0.9, #da0), color-stop(1, #fc0));
  background: -webkit-linear-gradient(top, #840 0%, #da0 10%, #da0 90%, #fc0 100%);
  background: -moz-linear-gradient(top, #840 0%, #da0 10%, #da0 90%, #fc0 100%);
  background: -o-linear-gradient(top, #840 0%, #da0 10%, #da0 90%, #fc0 100%);
  background: -ms-linear-gradient(top, #840 0%, #da0 10%, #da0 90%, #fc0 100%);
  background: linear-gradient(top, #840 0%, #da0 10%, #da0 90%, #fc0 100%);
}
button[disabled],
input[type="button"][disabled],
input[type="submit"][disabled] {
  cursor: default;
  border: thin solid #aaa;
  color: #aaa;
  background: #ddd;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.1, #ddd), color-stop(0.9, #ddd), color-stop(1, #ccc));
  background: -webkit-linear-gradient(top, #fff 0%, #ddd 10%, #ddd 90%, #ccc 100%);
  background: -moz-linear-gradient(top, #fff 0%, #ddd 10%, #ddd 90%, #ccc 100%);
  background: -o-linear-gradient(top, #fff 0%, #ddd 10%, #ddd 90%, #ccc 100%);
  background: -ms-linear-gradient(top, #fff 0%, #ddd 10%, #ddd 90%, #ccc 100%);
  background: linear-gradient(top, #fff 0%, #ddd 10%, #ddd 90%, #ccc 100%);
}
button.small,
input[type="button"].small,
input[type="submit"].small {
  width: 68px;
}
button.large,
input[type="button"].large,
input[type="submit"].large {
  width: 246px;
}
button a,
input[type="button"] a,
input[type="submit"] a {
  color: #fff;
}
/* ----------------
// Tables
// ---------------- */
table {
  border-collapse: collapse;
  border: 0;
}
table td {
  padding: 0;
}
table th {
  font-weight: bold;
  text-align: left;
}
/* ----------------
// Notification, alerts, errors and information
// ---------------- */
.smallwarning {
  font-size: 0.9em;
  color: #900;
}
div.notification {
  padding: 15px;
  margin-bottom: 15px;
  color: #960;
  border-top: 1px solid #dca;
  border-bottom: 1px solid #dca;
}
.error {
  color: #900;
  background: #fee;
  border-top: 1px solid #dcc;
  border-bottom: 1px solid #dcc;
}
.attention {
  padding: 15px;
  margin-bottom: 10px;
  color: #070;
  background: #efe;
  border-top: 1px solid #ada;
  border-bottom: 1px solid #ada;
}
.notification ul,
.error ul,
.attention ul {
  margin: 0 0 0 20px;
  padding: 0;
}
.notification p,
.error p,
.attention p {
  margin: 0 0 10px 0;
}
/* ----------------
// Lots of text
// ---------------- */
.large-text {
  font-size: 130%;
  max-width: 50em;
}
.large-text img {
  margin: 1em;
}
.large-text .center {
  text-align: center;
}
.large-text img.right {
  float: right;
}
.large-text img.left {
  float: left;
}
.large-text .address {
  margin: 1em;
  padding: 0.5em;
  border: thin solid #666;
  float: right;
}
.large-text a {
  color: #f36f21;
  text-decoration: underline;
}
.small-text {
  max-width: 50em;
}
.small-text a {
  color: #f36f21;
  text-decoration: underline;
}
/* ----------------
// Instructions
// ---------------- */
.instructions {
  padding: 5px;
  margin: 5px 0;
  background: #fff6bf;
}
.instructions p {
  margin: 5px 0;
}
.instructions ul {
  margin: 0;
  padding-left: 2em;
}
.instructions ul li {
  margin: 5px 0;
  list-style: circle;
}
/* ----------------
// Order messages
// ---------------- */
.order_warning {
  background: #fff6bf;
  border: 1px solid #ffd324;
  padding: 15px;
}
.order_error {
  background: #ffb1ad;
  border: 1px solid #f00;
  padding: 15px;
}
#order_message_warning,
#order_message_error {
  display: none;
}
/* ----------------
// Forecast List
// ---------------- */
.forecast-list {
  margin: 10px 0;
}
.forecast-list .forecast-card {
  position: relative;
  display: inline-block;
  width: 325px;
  height: 184px;
  margin: 4px 4px 0 0;
  padding: 4px;
  border: 2px solid #000;
  border-radius: 4px;
  color: #000;
  background: #fff;
}
.forecast-list .forecast-card .preview {
  position: absolute;
  top: 28px;
  width: 160px;
  height: 160px;
}
.forecast-list .forecast-card .preview img.overlay,
.forecast-list .forecast-card .preview img.map {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.forecast-list .forecast-card .preview img.overlay {
  opacity: 0.7;
}
.forecast-list .forecast-card .preview img.problem {
  width: 128px;
  height: 128px;
  top: 16px;
  left: 16px;
  opacity: 1;
}
.forecast-list .forecast-card .preview .flag-icons {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 0;
  margin: 3px;
  height: 16px;
  border-radius: 4px;
}
.forecast-list .forecast-card .preview .flag-icons .icon {
  display: none;
  visibility: hidden;
  height: 16px;
  margin: -1px;
  padding: 2px;
  border: thin solid #888;
  border-radius: 4px;
  background: rgba(204,204,204,0.467);
  background-opacity: 0.5;
}
.forecast-list .forecast-card .preview .flag-icons .icon:hover {
  background: #eee;
}
.forecast-list .forecast-card .header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  border-bottom: 2px solid #444;
  padding-top: 2px;
}
.forecast-list .forecast-card .header .spec {
  position: absolute;
  left: 0px;
  top: 2px;
  z-index: 10;
  width: 100%;
  text-align: center;
}
.forecast-list .forecast-card .header .progress-bar {
  height: 100%;
  width: 0%;
  background: #000;
  opacity: 0.15;
  position: absolute;
  top: 0;
  z-index: 5;
}
.forecast-list .forecast-card .header .time-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.forecast-list .forecast-card .header .time-bar .during-marker {
  visibility: hidden;
  position: absolute;
  top: 2px;
  left: 0;
  z-index: 4;
  height: 18px;
  opacity: 0.75;
  border-right: 3px solid #f80;
}
.forecast-list .forecast-card .header .time-bar .before-marker,
.forecast-list .forecast-card .header .time-bar .after-marker {
  visibility: hidden;
  position: absolute;
  top: 3px;
  width: 0px;
  height: 0px;
  border-style: solid;
}
.forecast-list .forecast-card .header .time-bar .before-marker {
  left: 2px;
  border-width: 8px 6px 8px 0;
  border-color: transparent #f80 transparent transparent;
}
.forecast-list .forecast-card .header .time-bar .after-marker {
  left: 325px;
  border-width: 8px 0 8px 6px;
  border-color: transparent transparent transparent #f80;
}
.forecast-list .forecast-card .action-icons {
  z-index: 10;
  position: absolute;
  top: 169px;
  width: 325px;
  height: 16px;
  left: 4px;
  text-align: right;
}
.forecast-list .forecast-card .action-icons .icon {
  display: none;
  height: 16px;
  margin: 0 -3px 0 0;
  padding: 2px;
  border-radius: 4px;
  border: thin solid #888;
}
.forecast-list .forecast-card .action-icons .icon:hover {
  background: #eee;
}
.forecast-list .forecast-card .action-icons .icon.here {
  display: inline;
}
.forecast-list .forecast-card .body {
  position: absolute;
  left: 168px;
  top: 24px;
  width: 161px;
}
.forecast-list .forecast-card .body .type {
  position: absolute;
  top: 164px;
  left: 168px;
  width: 161px;
}
.forecast-list .forecast-card .body .request {
  color: #000;
  display: block;
}
.forecast-list .forecast-card .body .time .label {
  display: block;
  font-weight: bold;
}
.forecast-list .forecast-card .body .time .made,
.forecast-list .forecast-card .body .time .period {
  margin-bottom: 3px;
}
.forecast-list .forecast-card .body .title {
  color: #000;
  display: block;
  font-weight: bold;
  height: 79px;
}
.forecast-list .forecast-card.future .time-bar .before-marker {
  visibility: visible;
}
.forecast-list .forecast-card.current .time-bar .during-marker {
  visibility: visible;
}
.forecast-list .forecast-card.past .time-bar .after-marker {
  visibility: visible;
}
.forecast-list .forecast-card .icon.delete {
  display: inline;
}
.forecast-list .forecast-card .icon.regenerate {
  display: inline;
}
.forecast-list .forecast-card.data-fresh {
  background: #cec;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #cec), color-stop(1, #aca));
  background: -webkit-linear-gradient(top, #cec 0%, #aca 100%);
  background: -moz-linear-gradient(top, #cec 0%, #aca 100%);
  background: -o-linear-gradient(top, #cec 0%, #aca 100%);
  background: -ms-linear-gradient(top, #cec 0%, #aca 100%);
  background: linear-gradient(top, #cec 0%, #aca 100%);
  border-color: #0a0;
}
.forecast-list .forecast-card.data-fresh .header {
  border-color: #0a0;
}
.forecast-list .forecast-card.data-recent {
  background: #eec;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eec), color-stop(1, #cca));
  background: -webkit-linear-gradient(top, #eec 0%, #cca 100%);
  background: -moz-linear-gradient(top, #eec 0%, #cca 100%);
  background: -o-linear-gradient(top, #eec 0%, #cca 100%);
  background: -ms-linear-gradient(top, #eec 0%, #cca 100%);
  background: linear-gradient(top, #eec 0%, #cca 100%);
  border-color: #aa0;
}
.forecast-list .forecast-card.data-recent .header {
  border-color: #aa0;
}
.forecast-list .forecast-card.data-stale {
  background: #eee;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eee), color-stop(1, #ccc));
  background: -webkit-linear-gradient(top, #eee 0%, #ccc 100%);
  background: -moz-linear-gradient(top, #eee 0%, #ccc 100%);
  background: -o-linear-gradient(top, #eee 0%, #ccc 100%);
  background: -ms-linear-gradient(top, #eee 0%, #ccc 100%);
  background: linear-gradient(top, #eee 0%, #ccc 100%);
  border-color: #444;
}
.forecast-list .forecast-card.data-stale .header {
  border-color: #444;
}
.forecast-list .forecast-card.failed,
.forecast-list .forecast-card.on-hold {
  background: #ecc;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ecc), color-stop(1, #caa));
  background: -webkit-linear-gradient(top, #ecc 0%, #caa 100%);
  background: -moz-linear-gradient(top, #ecc 0%, #caa 100%);
  background: -o-linear-gradient(top, #ecc 0%, #caa 100%);
  background: -ms-linear-gradient(top, #ecc 0%, #caa 100%);
  background: linear-gradient(top, #ecc 0%, #caa 100%);
  border-color: #a00;
}
.forecast-list .forecast-card.failed .header,
.forecast-list .forecast-card.on-hold .header {
  border-color: #a00;
}
.forecast-list .forecast-card.aviation .flag-icons .icon.aviation {
  visibility: visible;
  display: inline;
}
body.not-touch-device .forecast-list .forecast-card .action-icons {
  visibility: hidden;
}
body.not-touch-device .forecast-list .forecast-card:hover .action-icons {
  visibility: visible;
}
.forecast-icon-legend {
  margin: 10px;
}
.forecast-icon-legend img {
  vertical-align: middle;
  margin: 2px 2px 2px 0;
}
.forecast-card-legend {
  margin-top: 10px;
  margin-bottom: 10px;
}
.forecast-card-legend .card {
  vertical-align: middle;
  display: inline-block;
  color: #000;
  border-radius: 4px;
  border: 2px solid #000;
  margin: 4px 4px 0 0;
  width: 325px;
  min-height: 55px;
  padding: 2px;
}
.forecast-card-legend .card title {
  display: block;
  text-align: center;
  margin: 0 -2px;
  padding-bottom: 2px;
  border-bottom: 2px solid #000;
}
.forecast-card-legend .card.green {
  background: #cec;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #cec), color-stop(1, #aca));
  background: -webkit-linear-gradient(top, #cec 0%, #aca 100%);
  background: -moz-linear-gradient(top, #cec 0%, #aca 100%);
  background: -o-linear-gradient(top, #cec 0%, #aca 100%);
  background: -ms-linear-gradient(top, #cec 0%, #aca 100%);
  background: linear-gradient(top, #cec 0%, #aca 100%);
  border-color: #0a0;
}
.forecast-card-legend .card.green title {
  border-color: #0a0;
}
.forecast-card-legend .card.yellow {
  background: #eec;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eec), color-stop(1, #cca));
  background: -webkit-linear-gradient(top, #eec 0%, #cca 100%);
  background: -moz-linear-gradient(top, #eec 0%, #cca 100%);
  background: -o-linear-gradient(top, #eec 0%, #cca 100%);
  background: -ms-linear-gradient(top, #eec 0%, #cca 100%);
  background: linear-gradient(top, #eec 0%, #cca 100%);
  border-color: #aa0;
}
.forecast-card-legend .card.yellow title {
  border-color: #aa0;
}
.forecast-card-legend .card.blue {
  background: #cce;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #cce), color-stop(1, #aac));
  background: -webkit-linear-gradient(top, #cce 0%, #aac 100%);
  background: -moz-linear-gradient(top, #cce 0%, #aac 100%);
  background: -o-linear-gradient(top, #cce 0%, #aac 100%);
  background: -ms-linear-gradient(top, #cce 0%, #aac 100%);
  background: linear-gradient(top, #cce 0%, #aac 100%);
  border-color: #00a;
}
.forecast-card-legend .card.blue title {
  border-color: #00a;
}
.forecast-card-legend .card.cyan {
  background: #cee;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #cee), color-stop(1, #acc));
  background: -webkit-linear-gradient(top, #cee 0%, #acc 100%);
  background: -moz-linear-gradient(top, #cee 0%, #acc 100%);
  background: -o-linear-gradient(top, #cee 0%, #acc 100%);
  background: -ms-linear-gradient(top, #cee 0%, #acc 100%);
  background: linear-gradient(top, #cee 0%, #acc 100%);
  border-color: #0aa;
}
.forecast-card-legend .card.cyan title {
  border-color: #0aa;
}
.forecast-card-legend .card.purple {
  background: #ece;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ece), color-stop(1, #cac));
  background: -webkit-linear-gradient(top, #ece 0%, #cac 100%);
  background: -moz-linear-gradient(top, #ece 0%, #cac 100%);
  background: -o-linear-gradient(top, #ece 0%, #cac 100%);
  background: -ms-linear-gradient(top, #ece 0%, #cac 100%);
  background: linear-gradient(top, #ece 0%, #cac 100%);
  border-color: #a0a;
}
.forecast-card-legend .card.purple title {
  border-color: #a0a;
}
.forecast-card-legend .card.grey {
  background: #eee;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eee), color-stop(1, #ccc));
  background: -webkit-linear-gradient(top, #eee 0%, #ccc 100%);
  background: -moz-linear-gradient(top, #eee 0%, #ccc 100%);
  background: -o-linear-gradient(top, #eee 0%, #ccc 100%);
  background: -ms-linear-gradient(top, #eee 0%, #ccc 100%);
  background: linear-gradient(top, #eee 0%, #ccc 100%);
  border-color: #444;
}
.forecast-card-legend .card.grey title {
  border-color: #444;
}
.forecast-card-legend .card.red {
  background: #ecc;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ecc), color-stop(1, #caa));
  background: -webkit-linear-gradient(top, #ecc 0%, #caa 100%);
  background: -moz-linear-gradient(top, #ecc 0%, #caa 100%);
  background: -o-linear-gradient(top, #ecc 0%, #caa 100%);
  background: -ms-linear-gradient(top, #ecc 0%, #caa 100%);
  background: linear-gradient(top, #ecc 0%, #caa 100%);
  border-color: #a00;
}
.forecast-card-legend .card.red title {
  border-color: #a00;
}
#load-more-wrapper {
  width: 100%;
  padding: 10px;
  text-align: left;
}
#load-more-wrapper #load-more {
  margin-left: 38px;
}
#forecast-list-controls .location label span {
  display: inline-block;
  width: 85px;
}
#forecast-list-controls .location input {
  width: 105px;
  padding-right: 0;
}
#forecast-list-controls .location .icon {
  padding: 2px;
  border: thin solid transparent;
  vertical-align: middle;
  border-radius: 4px;
}
#forecast-list-controls .location .icon:hover {
  border: thin solid #800;
}
/* ----------------
// Forecast Result
// ---------------- */
.forecast-info {
  padding-right: 10px;
  margin-right: 10px;
  width: 100%;
}
.forecast-info .key {
  font-weight: bold;
}
.forecast-info .value {
  margin-bottom: 5px;
}
.forecast-info .can_regenerate_now {
  color: #0000d0;
  background: url("../images/ico/regenerate_16.c3677861fe47.png") no-repeat;
  background-position: 0 1px;
  padding-left: 17px;
}
.forecast-info .can_regenerate_after {
  background: url("../images/ico/regenerate_ghost_16.be144e4a9304.png") no-repeat;
  background-position: 0 1px;
  padding-left: 17px;
}
.forecast-info .private {
  color: #d00000;
  background: url("../images/ico/job-vis_private_16.eeafde85f832.png") no-repeat;
  background-position: 0 1px;
  padding-left: 17px;
  font-weight: bold;
}
.forecast-pending {
  margin: 20px;
  max-width: 500px;
  text-align: justify;
}
.forecast-pending .running {
  font-size: 20pt;
  text-align: center;
  background: #ff0;
  padding: 5px;
  margin: 0 20px;
}
#transparency-slider-container {
  padding: 1px;
}
/* ----------------
// Forecast Result
// ---------------- */
#SARWeatherMap {
  position: absolute;
  width: 650px;
  height: 650px;
}
#SARWeatherMap #userMarker {
  position: absolute;
  z-index: 30;
  margin: -4px;
  width: 6px;
  height: 6px;
  border: 2px solid #800;
  border-radius: 5px;
  background-color: #ff0;
  opacity: 0.7;
}
#scale-container {
  position: absolute;
  top: 0;
  left: 650px;
  width: 60px;
  height: 650px;
  padding-left: 2px;
}
#frame-slider-container {
  position: absolute;
  margin: 0;
  padding: 1px 0 0 0;
  top: 650px;
  left: 0;
  height: 48px;
  width: 650px;
}
/* ----------------
// Forecast Request
// ---------------- */
.forecast-request {
  width: 100%;
  margin-right: 10px;
}
.forecast-request .accept_terms .help_bubble {
  float: right;
  display: inline-block;
  padding-top: 2px;
}
.forecast-request .area td,
.forecast-request table.period>tbody>tr>td {
  padding-right: 10px;
  padding-bottom: 10px;
}
.forecast-request textarea {
  width: 230px;
  margin: 5px;
  height: 4em;
}
.forecast-request .lat input,
.forecast-request .lon input {
  width: 120px;
}
.forecast-request .period input[type="text"] {
  width: 150px;
  margin: 0px 1px;
}
.forecast-request .period .cost input.over-credits {
  border: thin solid #a00;
}
.forecast-request .period .cost input.over-credit-limit {
  background: #ffc0cb;
}
.forecast-request .period .data-used {
  font-weight: bold;
}
.forecast-request .period .data-used .msg {
  display: none;
}
.forecast-request .period .data-used.analysis {
  color: #0a0;
}
.forecast-request .period .data-used.analysis .msg.analysis {
  display: inline;
}
.forecast-request .period .data-used.fresh {
  color: #0a0;
}
.forecast-request .period .data-used.fresh .msg.fresh {
  display: inline;
}
.forecast-request .period .data-used.stale {
  color: #aa0;
}
.forecast-request .period .data-used.stale .msg.stale {
  display: inline;
}
.forecast-request table.forecast-types {
  border-collapse: collapse;
  border: 1px solid #ccc;
  margin-left: 0;
  width: 250px;
}
.forecast-request table.forecast-types th {
  background: #eee;
  border: 1px solid #ccc;
  padding-left: 5px;
  padding-right: 5px;
}
.forecast-request table.forecast-types td {
  border: 1px solid #ccc;
  padding-left: 5px;
  padding-right: 5px;
}
.forecast-request .type_header {
  font-weight: bold;
  padding-left: 25px;
}
.forecast-request .type_table .size {
  display: inline-block;
  width: 5em;
}
.forecast-request .type_table .res {
  display: inline-block;
  width: 3em;
  text-align: center;
}
.forecast-request .type_table .cost {
  display: inline-block;
  width: 5.5em;
  text-align: right;
}
.forecast-request .type_container ul {
  padding-left: 0;
  margin-top: 0;
}
.forecast-request .type_container label {
  font-weight: normal;
}
.forecast-request .type_container .test {
  border-top: thin solid #a00;
  color: #a00;
}
.forecast-request .type_container .test .message {
  display: block;
  font-weight: bold;
  text-align: center;
  padding-left: 25px;
}
.forecast-request button#start_forecast {
  margin-top: 10px;
}
.forecast-request button#start_forecast.over-credits {
  border: thin solid #a00;
}
.forecast-request button#start_forecast.over-credit-limit {
  color: #a00;
}
.forecast-request button#start_forecast {
  margin-top: 10px;
}
.forecast-request .option {
  margin: 5px 0 5px 25px;
}
.forecast-request .option input[type="checkbox"] {
  margin-left: -20px;
}
.forecast-request .option label .details {
  font-weight: normal;
}
#missing_credit_dialog {
  width: 270px;
}
#missing_credit_dialog .message {
  font-weight: bold;
}
#missing_credit_dialog .option {
  margin: 10px 0;
}
#missing_credit_dialog .buttons {
  text-align: center;
}
#missing_credit_dialog .buy-more button {
  margin-top: 5px;
}
#missing_credit_dialog .about-payment {
  margin-top: 12px;
  margin-bottom: -15px;
  text-align: center;
  color: #888;
  font-size: 60%;
}
#added_credit_dialog {
  padding: 10px;
  text-align: center;
}
#added_credit_dialog .message {
  margin-bottom: 10px;
}
#delete-forecast-dialog {
  padding: 10px;
  text-align: center;
  max-width: 300px;
}
#delete-forecast-dialog .message {
  margin-bottom: 10px;
}
#delete-forecast-dialog .job-title {
  font-weight: bold;
  margin-bottom: 10px;
}
#loading-forecasts-dialog {
  padding: 40px;
  font-size: 20px;
}
/* ----------------
// Purchasing Credits
// ---------------- */
form.purchase_credits #id_credits {
  width: 5em;
  margin-right: 2em;
}
form.purchase_credits #cost {
  width: 5em;
}
form.purchase_credits #purchase {
  margin: 1em 0;
}
#credits_pricing_container {
  width: 250px;
  padding: 2px;
}
#credits_pricing_container #credits_errors {
  margin-top: 10px;
}
table#credits_pricing {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ccc;
  margin: 0;
}
table#credits_pricing th {
  background: #eee;
  border: 1px solid #ccc;
  padding-left: 5px;
  padding-right: 5px;
}
table#credits_pricing td {
  border: 1px solid #ccc;
  padding-left: 5px;
  padding-right: 5px;
}
table th.super-header {
  text-align: center;
}
/* ----------------
// User Registration
// ---------------- */
#user_form tr.multi-line {
  vertical-align: top;
}
#user_form td {
  padding: 4px;
}
#user_form th {
  padding: 10px 5px;
}
#user_form label,
#user_form a {
  font-weight: bold;
  text-transform: capitalize;
}
#user_form a {
  text-decoration: underline;
}
#user_form input[type=text],
#user_form input[type=password],
#user_form select {
  width: 200px;
}
#user_form .confirm {
  text-align: right;
}