$h1_color: #323232;
$h2_color: #4B4B4B;
$h3_color: #4B4B4B;
$h4_color: #292929;
$h5_color: #4B4B4B;

$text_color: #6B6B6B;
$link_color: #0008D6;
$text_shadow: 0 1px 0px #fff;
$font_size: 22px;

// Lockitron uses ProximaNova Regular, but that costs money, so we're defaulting to Helveitca Neue instead.
$primary_font:   "Helvetica Neue";
$secondary_font: "Helvetica";
$tertiary_font:  "Arial";

#main {
  min-height: 400px;
}

.content_box {
  padding: 30px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  margin-bottom: 40px;
  background: #f6f6f6;
}

h1 {
  margin: 0 auto;
  font-family: Helvetica;
  font-size: 42px;
  font-weight: bold;
  color: $h1_color;
  letter-spacing: -.05em;
  a {
    color: $h1_color;
    text-decoration: none;
    &:hover {
      color: $h1_color;
      text-decoration: none;
    }
  }
}

h2 {
  font-family: $primary_font, $secondary_font, $tertiary_font;
  font-size: 45px;
  color: $h2_color;
  margin-bottom: 50px;
  font-weight: 200;
  letter-spacing: 2px;
}

h3 {
  font-family: $primary_font, $secondary_font, $tertiary_font;
  font-size: 30px;
  color: $h3_color;
  margin-bottom: 20px;
  font-weight: 200;
}

h4 {
  font-size: 20px;
  color: $h4_color;
  margin-bottom: 10px;
  font-weight: 200;
}

h5 {
  font-family: $primary_font, $secondary_font, $tertiary_font;
  margin-bottom: 10px;
  color: $h5_color;
  font-weight: normal;
}

p {
  font-family: "Helvetica Neue","Helvetica","Arial";
  color: #6b6b6b;
  font-size: 18px;
  line-height: 1.5;
  text-shadow: 0 1px 0px #fff;
}

.center {
  text-align: center;
}

.ml-20 {
  margin-left: 20px;
}

.loader {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: image-url('loading.gif');
}

#errors p{
  color: red;
  font-size: 14px;
}

select.error {
  border-color: #b94a48;
}

#share_buttons {

  position: relative;
  .like {
    position: absolute;
    top: 0px;
    left: 0px;
  }

  .tweet {
    position: absolute;
    top: 0px;
    left: 110px;
  }

  .pin {
    position: absolute;
    top: 0px;
    left: 225px;
  }
}

/* Time Picker */
.ui-datepicker {font-size: 12px}
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; }
.ui-timepicker-rtl dl dd { margin: 0 65px 10px 10px; }
.ui-datepicker-current { display:none!important;}

/* Powered by callout below the footer */
#powered {
  padding: 20px;
  background: white;
  text-align: center;
  a {
    color: black;
    text-decoration: none;
    &:hover {
      color: gray;
    }
  }
}
