/* structure for data elements */
body {background: #979793; font-family: 'Varela Round', sans-serif;}
#page-responsive-header {width: 100%; height: auto; background-color: #000000; color: #ffffff; margin: 0 0 15px 0;}
#data-container {background: #fff; max-width: 960px; padding: 25px; margin: 0px auto 0px auto;}
#map_canvas {width: 100%; height: 500px;}
#user_destination {width: 100%; height: 150px; margin: 20px 10% 20px 10%;}
#directions_display {width: 100%; height: 150px; margin: 20px 10% 20px 10%;}
#userAddressForm {margin: 45px 0 15px 0;}
#page-responsive-footer {width: 100%; height: 45px; background-color: #000000; color: #ffffff; margin: 15px 0 0 0;}
.hidden {display: none;}

/* overline nav */
#overline-navigation
{width: 100%; height: 15px; margin: 5px auto 30px auto; }
#overline-navigation ul
{width: 100%; margin: 0 auto 0 auto;}
#overline-navigation ul li
{float: left; list-style-type: none;}
#overline-navigation ul li a
{display: block; margin: 0px 55px 0 0; width: 220px; font-size: 14px; font-weight: bold; line-height: 20px; text-align: center; text-decoration: none; color: #ffffff;}

/* typography */
#data-container h1 {font-size: 36px; font-weight: 800; line-height: 30px; color: #2B2B2B;}
#data-container h2 {font-size: 24px; font-weight: 700; line-height: 30px; color: #2B2B2B;}
#data-container .lowercase {text-transform: lowercase;}
#data-container .underline {text-decoration: underline;}
#data-container .data-instructions {font-size: 11px; margin: 10px 25px 15px 25px;}
#data-container .normal-display {font-size: 14px;}
#data-container .small-display {font-size: 10px;}

/* Media Queries */
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    #map_canvas {width: 100%; height: 350px;}
}

/* Landscape phones and down */
@media (max-width: 480px) {
    #map_canvas {width: 100%; height: 250px;}
}

.btn-red {
  background-color: hsl(0, 69%, 22%) !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b42121", endColorstr="#5e1111");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#b42121), to(#5e1111));
  background-image: -moz-linear-gradient(top, #b42121, #5e1111);
  background-image: -ms-linear-gradient(top, #b42121, #5e1111);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b42121), color-stop(100%, #5e1111));
  background-image: -webkit-linear-gradient(top, #b42121, #5e1111);
  background-image: -o-linear-gradient(top, #b42121, #5e1111);
  background-image: linear-gradient(#b42121, #5e1111);
  border-color: #5e1111 #5e1111 hsl(0, 69%, 17%);
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
  -webkit-font-smoothing: antialiased;
}

.btn-yellow {
  background-color: hsl(41, 85%, 35%) !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#efb73d", endColorstr="#a5750d");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#efb73d), to(#a5750d));
  background-image: -moz-linear-gradient(top, #efb73d, #a5750d);
  background-image: -ms-linear-gradient(top, #efb73d, #a5750d);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #efb73d), color-stop(100%, #a5750d));
  background-image: -webkit-linear-gradient(top, #efb73d, #a5750d);
  background-image: -o-linear-gradient(top, #efb73d, #a5750d);
  background-image: linear-gradient(#efb73d, #a5750d);
  border-color: #a5750d #a5750d hsl(41, 85%, 29%);
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.39);
  -webkit-font-smoothing: antialiased;
}

.btn-green {
  background-color: hsl(110, 56%, 16%) !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#398f28", endColorstr="#193f11");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#398f28), to(#193f11));
  background-image: -moz-linear-gradient(top, #398f28, #193f11);
  background-image: -ms-linear-gradient(top, #398f28, #193f11);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #398f28), color-stop(100%, #193f11));
  background-image: -webkit-linear-gradient(top, #398f28, #193f11);
  background-image: -o-linear-gradient(top, #398f28, #193f11);
  background-image: linear-gradient(#398f28, #193f11);
  border-color: #193f11 #193f11 hsl(110, 56%, 11%);
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
  -webkit-font-smoothing: antialiased;
}