body {
  width: 100%;
  zoom: 1; }
  body:before, body:after {
    content: "";
    display: table; }
  body:after {
    clear: both; }

/* grid */
/* breakpoints */
/* other stuff */
/* ---variables--- */
/* dark gray */
/* yellow-orange */
/* darker yellow */
/* white */
/* wider grid */
.grid {
  max-width: 1200px; }

/* ---background color/texture--- */
body, #header, #navbar, #scroll, #footer, div.lbox {
  background: #FFFFFF url("/images/bg_texture.png") top center repeat; }

@media screen and (min-width: 668px) {
  #navbar {
    opacity: 0.95; } }
/* ---typography defaults--- */
body, p {
  font-family: "courier-prime", monospace;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7em;
  word-spacing: -2px;
  color: #333333; }

h1, h2, h3 {
  font-family: "adriane", serif;
  font-size: 2em;
  font-weight: 400;
  line-height: 1.3em;
  text-transform: none;
  letter-spacing: 0;
  color: #DBAB18;
  padding: 0;
  margin-bottom: 0.5em; }

.blurb h1, .grid > h1 {
  margin-bottom: 0.5em; }

h2 {
  font-size: 1.6em;
  margin-bottom: 0.5em; }

@media screen and (max-width: 667px) {
  h1, h3 {
    font-size: 1.7em; }

  h2 {
    font-size: 1.5em; } }
.fine-print {
  font-size: 0.9em;
  line-height: 1.4em;
  margin-top: 0.5em; }

.employee .title, form label, .dresscode-title {
  font-family: "courier-prime", monospace;
  font-size: 1em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #DBAB18;
  padding-right: 0.5em;
  margin-top: 1.5em;
  margin-bottom: 0; }

a {
  color: #DBAB18;
  border-bottom: 1px dotted #DBAB18; }

a:hover, a:focus {
  color: #D6A100;
  border-bottom: 1px solid #D6A100; }

/* ---navigation (desktop)--- */
/* type styles */
#navbar .nav ul li a, #navbar .nav ul li a:hover, #navbar .nav ul li a:focus, #navbar #locations ul li a, #navbar #locations ul li a:hover, #navbar #locations ul li a:focus {
  font-family: "courier-prime", monospace;
  font-size: 0.95em;
  font-weight: 400;
  text-transform: capitalize;
  letter-spacing: 0;
  color: #333333; }
#navbar .nav ul li a:hover, #navbar .nav ul li a:focus, #navbar .nav ul li a.selected, #navbar #locations ul li a:hover, #navbar #locations ul li a:focus, #navbar #locations ul li a.selected {
  color: #D6A100; }

/* navbar positioning */
/* logo on mobile */
#navbar #logo img {
  max-height: 30%; }

/* desktop nav */
@media screen and (min-width: 668px) {
  #navbar #locations ul {
    border-top: none;
    /* remove line above location names */ }

  #logo {
    display: inline;
    float: left;
    width: 29.5597484277%;
    margin: 0 1.8867924528%;
    height: 80px;
    /* #logo div takes up full hight of navbar */
    line-height: 80px; }
    #logo img {
      max-height: 40%; }

  #navbar {
    /* 10px padding on top and bottom to push type closer together */ }
    #navbar .nav, #navbar #locations {
      display: inline;
      float: left;
      width: 62.893081761%;
      margin: 0 1.8867924528%;
      /* nav and locations divs are same width */ }
      #navbar .nav ul, #navbar #locations ul {
        margin: 0;
        width: 100%;
        /* undo @column declaration for .nav ul */
        height: 40px; }
        #navbar .nav ul li, #navbar #locations ul li {
          line-height: 30px;
          padding: 0 0.25em; }
    #navbar .nav ul {
      padding-top: 10px; }
    #navbar #locations ul {
      padding-bottom: 10px; } }
/* tablet nav */
@media screen and (min-width: 668px) and (max-width: 740px) {
  #navbar #logo {
    height: 40px;
    line-height: 40px; }
    #navbar #logo img {
      max-width: 85%; }
  #navbar #locations {
    display: inline;
    float: left;
    width: 96.2264150943%;
    margin: 0 1.8867924528%; } }
/* ---buttons--- */
/* typography for buttons (a.button and li containing nav a) */
a.button, a.button:hover, a.button:focus, ul.buttons li,
form input.button[type="submit"], form input.button[type="submit"]:hover,
form input.button[type="submit"]:focus,
button, button:hover, button:focus {
  font-family: "proxima-nova", sans-serif;
  font-size: 0.9em;
  line-height: 2em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: none;
  /* super light yellow */
  border-radius: 0;
  border: 1px solid #DBAB18; }

/* set color and padding for buttons */
a.button, ul.buttons li a, form input.button[type="submit"], button {
  color: #DBAB18;
  padding: 0.5em 1.3em; }

/* thicker buttons on mobile */
@media screen and (max-width: 667px) {
  a.button, ul.buttons li a {
    padding: 0.7em 2em; } }
/* hover state */
a.button:hover, a.button:focus,
ul.buttons li a:hover, ul.buttons li a:focus,
form input.button[type="submit"]:hover, form input.button[type="submit"]:focus,
button:hover, button:focus {
  color: #FFFFFF;
  background: #DBAB18; }

/* remove top border, since not using button list */
ul.buttons {
  border: none; }

/* add space after button in a list */
@media screen and (max-width: 667px) {
  ul.buttons li {
    margin-bottom: 0.5em; } }
/* priority-nav */
#priority-nav {
  font-family: "courier-prime", monospace;
  font-size: 1.3em;
  font-weight: 400;
  font-style: italic;
  text-transform: capitalize;
  letter-spacing: 0;
  word-spacing: 1px;
  color: #FFFFFF;
  background: #DBAB18;
  border: none;
  padding: 0.4em 0; }

#priority-nav:hover, #priority-nav:focus {
  background: #D6A100;
  border: none; }

/* extra spacing between paragraphs and buttons */
p + a.button {
  margin-top: 1.5em; }

/* ---site wide adjustments--- */
/* footer */
#footer p {
  font-size: 12px; }

/* billboard positioning on mobile */
@media screen and (max-width: 667px) {
  #billboard {
    margin-top: 40px; } }
/* ---page specific changes--- */
/* index page */
/*hide extra padding on #about so it doesn't scroll */
@media screen and (min-width: 668px) {
  body.index, body.index #scroll {
    overflow: hidden; } }
/*add padding on mobile */
body.index #container > #about {
  padding: 1em 0 2em 0; }

@media screen and (min-width: 668px) {
  body.index #container > #about {
    background: #FFFFFF url("/images/bg_texture.png") top center repeat;
    opacity: 0.95;
    display: inline;
    float: left;
    width: 42.0597484277%;
    margin: 0 1.8867924528%;
    margin-left: 47.7201257862%;
    top: 64px;
    padding: 6em 4em 50em 4em; } }
@media screen and (min-width: 668px) and (max-width: 1024px) {
  body.index #container > #about {
    display: inline;
    float: left;
    width: 46.2264150943%;
    margin: 0 1.8867924528%;
    margin-left: 43.5534591195%;
    padding: 8em 1.5em 50em 1.5em; } }
/* spacing for .blurb, on giftcard and contact pages */
.blurb p + h2 {
  margin-top: 2em; }

@media screen and (max-width: 667px) {
  .blurb {
    padding-bottom: 0;
    padding-top: 1em; } }
/* gallery page */
@media screen and (max-width: 667px) {
  .gallery {
    padding-top: 1em; } }
/* locations pages */
/* span only 10 columns at wide page sizes */
@media screen and (min-width: 1024px) {
  .location {
    display: inline;
    float: left;
    width: 79.5597484277%;
    margin: 0 1.8867924528%;
    margin-left: 10.2201257862%;
    margin-right: 10.2201257862%; } }
/* top margin for .location container, remove split line, add to sidebar */
.location {
  margin-top: 1em; }
  .location .info.left {
    border-right: none; }

@media screen and (min-width: 668px) {
  .location {
    margin-top: 2em; }
    .location .sidebar {
      border-left: 1px dotted #DBAB18; } }
/* spacing fixes */
.about {
  margin-bottom: 0; }

/* pushes right column over */
@media screen and (min-width: 668px) {
  .location .info.left {
    padding-right: 0; }

  .location .sidebar {
    padding-left: 2em; } }
/* pushes right column over and switches managers to single line at wider screen sizes */
@media screen and (min-width: 1024px) {
  /*.location .sidebar {
    padding-left: 4em;
  }*/
  .employee .title {
    display: inline; } }
/* social */
.instagram a {
  background-image: url("/images/instagram-icon.png"); }

.yelp a {
  background-image: url("/images/yelp-icon.png"); }

.facebook a {
  background-image: url("/images/facebook-icon.png"); }

.tripadvisor a {
  background-image: url("/images/tripadvisor-icon.png"); }

ul.social li a:hover {
  opacity: 0.9; }

ul.social li {
  margin: 0;
  /* ??? */ }
