* {
   margin: 0;
   padding: 0;
}

html {
   position: relative;
   min-height: 100%;
   background: url('../photos/0002/016.jpg') no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

body {
   position: relative;
   min-height: 100%;
   background-color: rgba(255,202,24,0.7);
   font-family: arial,verdana,helvetica,sans-serif;
   font-size: 1em;
   line-height: 1.5;
}

img {
   border: 0;
}

#header {
   width: 100%;
   height: auto;
   padding: 1em 0;
   background-color: #000000;
}

/* Logo and photos in banner */
#logo {
   display: block;
   max-width: 60%;
   height: auto;
   margin-left: auto;
   margin-right: auto;
}

#address,
#hours,
#to_go {
   color: #ffca18;
   text-align: center;
   font-style: italic;
}

#to_go {
   font-style: normal;
   font-weight: bold;
}

/* Contact / order info */
#contact {
   padding: 0.5em 0;
   list-style-type: none;
}

   #contact li {
      width: 100%;
      text-align: center;
      font-size: 1em;
      font-weight: bold;
      font-variant: small-caps;
   }

/* Category buttons on home page */
a.category:link,
a.category:visited {
   position: relative;
   display: block;
   width: 100%;
   padding: 2em 0;
   background-color: rgba(0,0,0,0.7);
   border-top: 2px solid #ffffff;
   border-left: 2px solid #ffffff;
   border-right: 2px solid #ffffff;
   color: #ffffff;
   letter-spacing: 0.1em;
   font-weight: bold;
   text-align: center;
   text-decoration: none;
}

   a.category:hover,
   a.category:active {
      background-color: rgba(250,127,122,0.7);
      color: #000000;
   }

   a.category:last-of-type {
      border-bottom: 2px solid #ffffff;
   }

/* Photos on category pages */
#photo_container {
   width: 100%;
   background-color: rgba(255,202,24,0.75);
}

#photo {
   display: block;
   max-width: 100%;
   height: auto;
   margin: 0 auto;
   background-color: #000000;
}

/* Black bar across top of lower level pages */
#hdr_bar {
   width: 100%;
   padding: 1em;
   background-color: #000000;
}

/* Home icon */
#home_link:link,
#home_link:visited,
#home_link:hover,
#home_link:active {
   text-decoration: none;
}

#home_icon {
   display: inline;
   position: relative;
   top: 0;
   left: 0;
   width: auto;
   height: 2em;
   padding: 0 0.5em;
}

   #home_icon #home_icon_off {
      display: inline;
      width: auto;
      height: 2em;
   }

   #home_icon #home_icon_on {
      display: none;
      width: auto;
      height: 2em;
   }

   #home_icon:hover > #home_icon_off {
      display: none;
   }

   #home_icon:hover > #home_icon_on {
      display: inline;
   }

/* Back icon */
#back_icon {
   display: inline;
   width: auto;
   height: 2em;
}

   #back_icon #back_icon_off {
      display: inline;
      width: auto;
      height: 2em;
   }

   #back_icon #back_icon_on {
      display: none;
      width: auto;
      height: 2em;
   }

   #back_icon:hover > #back_icon_off {
      display: none;
   }

   #back_icon:hover > #back_icon_on {
      display: inline;
   }

/* Nav on right side of header */
#nav_right {
   position: absolute;
   top: 1em;
   right: 0.5em;
}

/* Change language button */
#change_lang {
   position: relative;
   top: -1em;
   display: inline;
}

   /* Home page only */
   #change_lang_home {
      position: absolute;
      top: 0.5em;
      right: 0.5em;
   }

   input#lang {
      background-color: transparent;
      border: 0;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      -khtml-border-radius: 4px;
      color: #ffffff;
      font-weight: bold;
      letter-spacing: 0.08em;
      text-decoration: underline;
      cursor: pointer;
   }

   input#lang:hover {
      background-color: #fa7f7a;
   }

/* Order icon */
#order_icon {
   position: relative;
   display: inline;
   width: auto;
   height: 2em;
   padding: 0 0.5em;
}

   #order_icon #order_icon_off {
      display: inline;
      position: relative;
      z-index:10;
      width: auto;
      height: 2em;
   }

   #order_icon #order_icon_on {
      display: none;
      position: relative;
      z-index: 10;
      width: auto;
      height: 2em;
   }

   #order_icon:hover > #order_icon_off {
      display: none;
   }

   #order_icon:hover > #order_icon_on {
      display: inline;
   }

   /* Count of items in order */
   #nav_right a {
      text-decoration: none;
   }

   #count {
      position: absolute;
      top: 0;
      right: -0.5em;
      z-index: 20;
      width: 1.5em;
      height: 1.5em;
      background-color: #fa7f7a;
      border: 2px solid #ffffff;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      -khtml-border-radius: 50%;
      text-align: center;
      color: #ffffff;
      font-weight: bold;
   }

/* Lower level page headers */
#pg_hdr {
   padding: 1em;
   background-color: #000000;
   color: #ffffff;
}

   /* Page name */
   #pg_hdr h1 {
      font-size: 1.5em;
   }

   /* Page subheader */
   #pg_hdr h3 {
      width: 100%;
      background-color: #000000;
      font-size: 1em;
   }

   /* Page description */
   #pg_hdr p {
      font-style: italic;
   }

/* Background shade layer */
#bg_layer {
   position: fixed;
   top: 0;
   bottom: 0;
   overflow-y: scroll;
   overflow-x: hidden;
   z-index: 10;
   width: 100%;
   background-color: rgba(0,0,0,0.7);
}

/* Lower level page content */
#pg_content {
   position: relative;
   z-index: 20;
   width: 100%;
   min-height: 100%;
   padding: 0.5em 0;
   color: #ffffff;
}

   #pg_content h3 {
      margin-top: 1em;
   }

/* Container for content */
#content_container {
   max-width: 80%;
   /*margin-left: 2em;
   margin-right: 2em;*/
   margin: 0 auto;
}

#content_container p {
   margin-top: 1em;
}

/* Small note */
.note {
   font-size: 0.85em;
   font-style: italic;
}

hr {
   margin: 1em 0;
   border: 0;
   height: 1px;
   background-color: #ffffff;
}

/* Menu */
.menu {
   width: 90%;
   margin: 0 auto;
   border-collapse: collapse;
   border-spacing: 0;
}

   .menu td {
      margin: 0;
      padding: 0.25em 0;
   }

   /* Cell with item name */
   .menu .item_name {
      display: inline;
      color: #fa7f7a;
      font-weight: bold;
   }

   /* Cell with item description */
   .menu .item_desc {
      vertical-align: top;
      font-style: italic;
   }

   /* Cells with pricing */
   .price {
      text-align: right;
   }

   /* Cells with size */
   td.size {
      padding: 0 0 0 3em;
      font-style: italic;
   }

   /* Spacer after each item */
   .item_spacer {
      border-bottom: 1px solid #fa7f7a;
   }

/* Options */
.options {
   width: 85%;
   margin: 1em auto 0 auto;
   border-collapse: collapse;
   border-spacing: 0;
}

   .options .price {
      text-align: right;
      padding-right: 1em;
   }

   .option tr {
      padding-left: 1em;
   }

   .options td {
      margin: 0;
      padding-left: 1em;
   }

   .options td {
      background-color: rgba(250,127,122,0.7);
   }

   /* Options header */
   .options  .hdr {
      font-weight: bold;
   }

   .options .size {
      padding-left: 3em;
   }

   /* Spacer after each option */
   .option_spacer {
      border-bottom: 2px dotted #ffffff;
   }

/* Add to order icons */
/* Cell containing icon */
.icon {
   vertical-align: top;
   text-align: right;
}

.add_icon {
   position: relative;
   width: 3em;
   height: auto;
}

   .add_icon_off {
      display: inline;
      width: 3em;
      height: auto;
   }

   .add_icon_on {
      display: none;
      width: 3em;
      height: auto;
   }

   .add_icon:hover > .add_icon_off {
      display: none;
   }

   .add_icon:hover > .add_icon_on {
      display: inline;
   }

/* Forms */
form h4 {
   margin: 1em 0;
   font-size: 1.25em;
}

   /* Checkboxes */
   input[type="checkbox"] {
      margin-right: 1em;
   }

   /* Text input */
   input[type="text"],
   textarea {
      width: 15em;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      -border-radius: 4px;
      -khtml-border-radius: 4px;
   }

   /* Select boxes */
   select {
      margin: 0.5em 0 ;
      padding: 0.25em;
      -moz-border-radius: 1px;
      -webkit-border-radius: 1px;
      -border-radius: 1px;
      -khtml-border-radius: 1px;
      background-color: #000000;
      border: 1px solid #ffffff;
      color: #ffffff;
      font-size: 1em;
   }

   /* Submit buttons */
   input[type="submit"] {
      padding: 0.5em;
      border: 1px solid #ffffff;
      font-size: 1em;
      background-color: #fa7f7a;
      color: #ffffff;
   }

      /* Add to order button */
      input[type="submit"].complete {
         display: block;
         width: 80%;
         margin: 1em auto;
      }

   /* Remove item from order button */
   #submit_rem {
      width: 2em;
      height: auto;
      margin-left: 1em;
   }

   form#order {
      margin: 1em auto 0 auto;
   }

   form#order input[type="text"],
   form#order textarea {
      font-size: 1em;
      color: #000000;
   }

   form#order textarea {
      height: 4em;
      font-style: normal;
      text-align: left;
   }

   form#order .radio_lbl {
      margin-left: 0.5em;
      margin-right: 1em;
   }

   .radio {
      display: block;
   }

/* Order summary table */
#order {
   width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
}

   #order th,
   #order td:first-of-type,
   #order td:nth-child(3) {
      text-align: center;
   }

      #order td:nth-child(2) {
         text-align: left;
      }

      #order td:nth-child(4) {
         text-align: right;
      }

   #order th,
   #order td {
      padding: 1em 0;
      vertical-align: top;
      border-bottom: 1px solid #ffffff;
   }

   /* Options listed in order summary under item */
   ul.opts {
      margin-top: 1em;
      list-style-type: none;
   }

      .opts li {
         padding-left: 1em;
         font-style: italic;
      }

   /* Bill total */
   #order #total {
      font-size: 1.5em;
      text-align: right;
   }

   /* Buttons */
   a.btn {
      text-decoration: none;
   }

   button {
      display: inline;
      padding: 0.5em;
      border: 1px solid #ffffff;
      font-size: 0.9em;
      background-color: #fa7f7a;
      color: #ffffff;
   }

   #checkout_btns {
      margin-top: 2em;
   }

   #checkout {
      float: right;
   }

/* Delivery logo (optional) */
#del_logo {
   display: block;
   width: 80%;
   height: auto;
   margin: 0 auto;
}