@charset "UTF-8";
/* CSS Document */

/* This creates a non-repeating, non-scrolling background, and sets the default font and color. */
body {background-image:url(img/seatingbg.png);
    background-repeat:no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-color:#000000;
   font-family: athelas;
   color:#8a8c8f}

/* This brackets the text on either side of a menu entry so the dot leader works right. */         
.linewrapper {display: flex;
  align-items: baseline;
  color: #be1e2d;}

/* This draws the dot leader on a menu entry. */
.middle {border-bottom: 1px dotted #be1e2d;
  flex-grow: 1;
  margin: 0 5px;}

/* This sets the style for ingredient text below a menu entry. */
.ingredients {font-style: italic;
  font-size:.9em;
  color: #be1e2d;
  text-align:left;
  margin-bottom: 1em;}

/* This defines a paragraph cell in the main frame. Cells are three-sided so they stack nicely. */
.boxy{background-color: rgba(250, 249, 245, 0.89);
  color:#be1e2d;
  border-bottom: 1px solid #8a8c8f;
    border-left: 1px solid #8a8c8f;
    border-right: 1px solid #8a8c8f;
  width: 50%;
  padding: 15px 25px 0px;
  min-width: 200px;
  font-size:1.1em;}

/* This defines a header cell in the main frame. Remember to manually add a top border if it's the first cell on the page! */
.bigboxy{background-color: rgba(250, 249, 245, 0.89);
  color:#8a8c8f;
  font-family:majesti banner;
    font-weight: 500;
  font-size:1.75em;
  border-bottom: 1px solid #8a8c8f;
    border-left: 1px solid #8a8c8f;
    border-right: 1px solid #8a8c8f;
  width: 50%;
  padding: 15px 25px;
    min-width: 200px;}
    
/* These next three classes are for the navigation bar. */
 ul {list-style-type: none;
     display:flex;
     flex-wrap: wrap;
     justify-content: space-evenly;
            overflow: hidden;
            background-color: #be1e2d;
            border-top: 4px double #8a8c8f;
            border-bottom: 4px double #41393d;
            font-size: 1.2em;
            margin-bottom:55px;
padding-right:40px;}

li a {display: block;
            margin: 0px 20px;
            color: #cbcccd;
            font-family:majesti banner;
            font-weight:500;
            font-size: 1.2em;
            text-align: center;
            text-decoration: none;}
li a:hover {background-color: #ef4e22;}

/* This is for the sub-headers in the Directions cell. */
.heady {text-align: left;
    font-size: 1.1em;
    font-weight: bolder}
    
/* And this is for the body text of the actual directions. Possibly all non-menu cell text? Still a WIP.  */
.notmenu {text-align: left;
        font-size: .9em;}

/* This centers the logo. */
    .logcen {display: block;
    margin-left: auto;
    margin-right: auto;}

/* This styles the footer. */
footer {color: #cbcccd;
            font-family: majesti banner;
            font-weight:500;
            text-align: right;
            background-color: #be1e2d;
            border: #41393d;
            border-style: double;
            border-width: 6px;
            line-height: 20%;
            margin-top:80px;}

/* This styles the favicons in the footer. */
.fa {padding: 2px;
  font-size: 18px;
  width: 24px;
  text-align: center;
  text-decoration: none;
  margin: -10px 3px;
  border-radius: 30%;}

.fa:hover {background: #ef4e22;}

.fa-facebook {background: #41393d;
  color: #cbcccd;}

.fa-twitter {background: #41393d;
  color: #cbcccd;}

.fa-instagram {background: #41393d;
  color: #cbcccd;}

/* Style the tab buttons */
.tablink {background-color: #41393d;
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 17px;
    width: 25%;
    flex: 1;
	flex-direction: row;
    flex-basis: auto;
	font-family: majesti banner;}

/* Style the tab hover */
.tablink:hover {background-color: #ef4e22;}

/* Style the tab content */
.tabcontent {color: white;
    display: none;
    padding: 50px;
    text-align: center;}

/*Container to make the buttons display the same height*/
.tabcell {display: flex;
    width: 100%;}

#north {background-color: #be1e2d;}
#south {background-color: #b5c193;}
#west {background-color: #ef4e22;}
#backbay {background-color: #d4a18d;}

button {font-family : inherit;
    font-size: 1em;
    display: flex;
	width: 100%;}

th {
    padding: 5px;
    color: #e6e6e6;
    font-family:majesti banner;
    font-weight:500;
}

table {
    text-align: center;
        background-color: #be1e2d;
        table-layout: fixed;
    width: 100%;
    word-break: break-word;
    
}