$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";

// FAQ Entry
$summary_color: #0088D6;

$body_background: #E6E6E6;

// Gray background is a gradient -- top == 0%, middle == 50%, bottom == 100%
$gray_background_top_color:    #F6F6F6;
$gray_background_middle_color: #FAFAFA;
$gray_background_bottom_color: #FAFAFA;

// The bottom border on the gray backgrounds
$gray_background_border_color: #C4C4C4;

// Button colors/background/border
$button_color:                  white;
$button_background_color:       #0088d6;
$button_hovered_color:          #0088d6;
$button_active_border:          #C8C8C8;

// This only affects .blue_button, which is the "Reserve Now" button you see on Lockitron's homepage
$button_text_shadow_color:       rgba(0,0,0,.37);
$button_box_shadow_color:       rgba(255,255,255,.92);
$button_box_shadow_inset_color: rgba(0,0,0,.22);
$button_border_radius:           10px;

// Default State
$button_ie9_gradient:            url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSIwJSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwZTk2ZTQiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMmEwZmEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
$button_top_gradient:           #0E96E4;
$button_bottom_gradient:         #02A0FA;

// Hover State
$button_ie9_gradient_hover:     url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSIwJSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMyZGE0ZTkiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMWFlZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
$button_top_gradient_hover:     #2DA4E9;
$button_bottom_gradient_hover:   #21AEFF;

// Active State
$button_ie9_gradient_active:    url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSIwJSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMzlmZjciIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMzlmZjciIHN0b3Atb3BhY2l0eT0iMSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
$button_top_gradient_active:      #039FF7;
$button_bottom_gradient_active: #039ff7;

// Used in the FAQ
details, summary
{
  outline: none;
}
summary
{
  text-decoration: none;
  color: $summary_color;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  font-size: 20px;
  line-height: 1.3;

}
summary:hover
{
  text-decoration: underline;
  cursor: pointer;
}
details summary::-webkit-details-marker { display:none; content: ""; }
// Styling the polyfill for browsers that don't support details/summary tags
.no-details details { display: block }
.no-details details > summary::before { content:none }
.no-details details.open > summary::before {   content:none }

.button:hover {
  text-decoration: none;
  color: $button_hovered_color;
}

.button:active {
  background: $button_background_color;
  border: 1px solid $button_active_border;
}

body.lt-ie9 {
  .blue_button {
    background-color: #0D97E6 !important;
    background-image: none !important;
  }
  .blue_button:hover {
    background-color: #add8e6 !important;
  }
}

.blue_button {
  display: inline-block;
  color: $button_color; /* text color */
  text-shadow: 0 -1px 1px $button-text_shadow_color; /* drop shadow */
  -moz-box-shadow:
    0 1px 1px  $button_box_shadow_color /* drop shadow */,
    inset 0 -1px $button_box_shadow_inset_color /* inner shadow */;
  -webkit-box-shadow:
    0 1px 1px $button_box_shadow_color /* drop shadow */,
    inset 0 -1px 1px $button_box_shadow_inset_color /* inner shadow */;
  background-image: $button_top_gradient; /* gradient fill */
  background-image: -moz-linear-gradient(90deg, $button_top_gradient 0%, $button_bottom_gradient 100%); /* gradient fill */
  background-image: -o-linear-gradient(90deg, $button_top_gradient 0%, $button_bottom_gradient 100%); /* gradient fill */
  background-image: -webkit-linear-gradient(90deg, $button_top_gradient 0%, $button_bottom_gradient 100%); /* gradient fill */
  background-image: linear-gradient(90deg, $button_top_gradient 0%, $button_bottom_gradient 100%); /* gradient fill */
  -webkit-border-radius: $button_border_radius;
  -moz-border-radius: $button_border_radius;
  border-radius: $button_border_radius;
  font-family: $primary_font, $secondary_font, $tertiary_font;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 8px;
  padding: 15px 15px;
  width: 274px;
  font-size: 32px;
  line-height: 32px;

  &:hover {
    color: white;
    -moz-box-shadow:
      0 1px 1px $button_box_shadow_color /* drop shadow */,
      inset 0 -1px 1px $button_box_shadow_inset_color /* inner shadow */;
    -webkit-box-shadow:
      0 1px 1px$button_box_shadow_color /* drop shadow */,
      inset 0 -1px 1px $button_box_shadow_inset_color /* inner shadow */;
    box-shadow:
      0 1px 1px $button_box_shadow_color /* drop shadow */,
      inset 0 -1px 1px $button_box_shadow_inset_color /* inner shadow */;
    background-image: $button_ie9_gradient_hover; /* gradient fill */
    background-image: -moz-linear-gradient(90deg, $button_top_gradient_hover 0%, $button_bottom_gradient_hover 100%); /* gradient fill */
    background-image: -o-linear-gradient(90deg, $button_top_gradient_hover 0%, $button_bottom_gradient_hover 100%); /* gradient fill */
    background-image: -webkit-linear-gradient(90deg, $button_top_gradient_hover 0%, $button_bottom_gradient_hover 100%); /* gradient fill */
    background-image: linear-gradient(90deg, $button_top_gradient_hover 0%, $button_bottom_gradient_hover 100%); /* gradient fill */
    text-decoration: none;
  }

  &:active {
  color: white;
    -moz-box-shadow:
      0 1px 1px $button_box_shadow_color /* drop shadow */,
      inset 0 3px 5px $button_box_shadow_inset_color /* inner shadow */;
    -webkit-box-shadow:
      0 1px 1px $button_box_shadow_color /* drop shadow */,
      inset 0 3px 5px $button_box_shadow_inset_color /* inner shadow */;
    box-shadow:
      0 1px 1px $button_box_shadow_color /* drop shadow */,
      inset 0 3px 5px $button_box_shadow_inset_color /* inner shadow */;
    background-image: $button_ie9_gradient_active /* gradient fill */;
    background-image: -moz-linear-gradient(90deg, $button_top_gradient_active 0%, $button_bottom_gradient_active 100%); /* gradient fill */
    background-image: -o-linear-gradient(90deg, $button_top_gradient_active 0%, $button_bottom_gradient_active 100%); /* gradient fill */
    background-image: -webkit-linear-gradient(90deg, $button_top_gradient_active 0%, $button_bottom_gradient_active 100%); /* gradient fill */
    background-image: linear-gradient(90deg, $button_top_gradient_active 0%, $button_bottom_gradient_active 100%); /* gradient fill */
  }
}

.blue_button.expired {
  background-image: none;
  background-color: #bbbbbb;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  text-shadow: none;
  cursor: not-allowed;
  &:hover {
    background-image: none;
    background-color: #bbbbbb;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
  }
  &:active {
    background-image: none;
    background-color: #bbbbbb;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
  }
}