/* Dana */

@font-face {
    font-family: "Dana-Titles";
    src: url('https://fonts.danahospitality.ca/fonts-main/ofl/montserrat/Montserrat[wght].ttf') format('truetype');
}

@font-face {
    font-family: "Dana-Body";
    src: url('https://fonts.danahospitality.ca/fonts-main/ofl/montserrat/Montserrat[wght].ttf') format('truetype');
}

:root {
    --colour-dana-darkblue: #205673;
    --colour-dana-orange: #d7370f; /* The original dana orange is #f04c23. A slightly darker version is #d7370f. */
    --colour-dana-mediumblue: #6192b3;
    --colour-dana-lightblue: #bdd6de;
    --colour-dana-grey: #333333;
    --colour-dana-green: #95c93d;
}
html {
    height: 98vh;
    width: 100%;
    font-family: "Dana-Body", Verdana, -apple-system, system-ui, sans-serif;
}

body {
    height: 98vh;
    width: 100%;
    font-family: "Dana-Body", Verdana, -apple-system, system-ui, sans-serif;
    font-size: 125%;
    color: black;
    background-color: white;
    padding: 0px;
    margin: 5px 0px 5px 0px;
}

h1 {
    color: var(--colour-dana-darkblue, black);
    font-size: 1.5em;
}
h2 {
    color: black;
    font-size: 1.2em;
}

    body.embeded {
        background-color: white;
        margin: 0;
        padding: 0;
    }

a img {
    margin: 0;
    padding: 0;
    border: none;
}

#MenuBar {
    position: absolute; z-index: 1;
    left: 0vw; top: 0vh;
    width: 100vw;
    text-transform: uppercase;
}

/* Menu bar for the site. */
#VerticalMenuContainer { 
    display: none;
    position: absolute; z-index: 1; 
    top: 10px; left: 10px; 
    margin: 0; padding: 0; 
    color: white;
    background-color: rgba(142, 0, 0, 0.8); 
    opacity: 0.9; 
    font-size: 16pt;
}
#TopVerticalMenuButton { 
    display: inline-block;
    font-weight: 900;
    font-size: 26pt;
    width: 28pt;
    text-align: center;
    cursor: pointer;
}
#TopVerticalMenuButton span.ThreeBars { position: relative; padding-left: 1.25em; }
#TopVerticalMenuButton span.ThreeBars:before {
    content: "";
    position: absolute; top: 0.25em; left: 0;
    width: 1em; height: 0.2em;
    border-top: double 0.375em white;
    border-bottom: solid 0.125em white;
}
#MainMenuVertical { 
    display: none; 
    position: absolute; z-index: 1; 
    top: 0px; left: 0px;
    list-style-type: none; 
    margin:0; padding: 0 0 0 1em; 
    background-color: rgba(142, 0, 0, 0.7); 
    opacity: 0.9; 
    width: 15em; 
}
#MainMenuVertical li a { text-decoration: none; color: white; }
#MainMenuVertical ul.dropdown { list-style-type: none; margin: 0; padding: 0; }
#MenuDropDownContent { 
    position: inherit;
    z-index: 1;
    width: 10em; 
    padding-left: 1em; 
    color: white;
    background-color: transparent; 
    display: none; 
}
#MenuDropDownContent a { display: block; cursor: pointer; }
#DateDropDownContent { 
    position: inherit;
    z-index: 1;
    width: 10em; 
    padding-left: 1em; 
    color: white;
    background-color: transparent; 
    display: none; 
}
#DateDropDownContent a { display: block; cursor: pointer; }
#ChangeMenuButton, #ChangeDateButton { cursor: pointer; }


#MainMenuContainer { display: block; overflow: hidden; width:100%; min-height: 50px; height: 50px; margin: 0; padding: 0; }

#MainMenuList {
    font-family: "Dana-Titles", Verdana, -apple-system, system-ui, sans-serif;
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 50px;
    height: 50px;
    background-color: white;
    text-transform: uppercase;
}
#MainMenuList li { display: inline-block; }
#MainMenuList li a { text-decoration: none; color: black; line-height: 50px; vertical-align: middle; }
#MainMenuList li.Buttons { margin: 0; padding: 0; background-color: transparent; text-align: center; }
#MainMenuList li.ButtonsSelected { margin: 0; padding: 0; background-color: #e5e5e5; text-align: center; }
    #MainMenuList li.ButtonsSelected a {
        font-weight: 800;
    }


#MainMenuTable {
    font-family: "Dana-Titles", Verdana, -apple-system, system-ui, sans-serif;
    border-collapse: collapse;
    border: none;
    text-transform: uppercase;
    color: black;
    background-color: white;
    min-height: 50px;
    height: 50px;
    width: 100%;
    margin: 0px;
    padding: 0px;
}
#MainMenuTable td.Buttons {
    margin: 0px; padding: 0px;
    background-color: transparent;
    text-align: center;
}
#MainMenuTable td.ButtonsSelected {
    margin: 0px; padding: 0px;
    background-color: #e5e5e5;
    text-align: center;
}
#MainMenuTable a.Buttons {
    color: black;
    text-decoration: none;
}
#MainMenuTable a.ButtonsSelected {
    color: black;
    text-decoration: none;
    font-weight: bolder;
}

/* Formatting for Drop-Down Menus
    http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar
*/
#MainMenuList .dropdown-content {
    display: none;
    position: absolute; z-index: 1;
    top: 0em; left: -1em;
    background-color: #f0f0f0;
    min-width: 12em; width: 12em;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
#MainMenuList .dropdown-content a {
    color: black;
    text-decoration: none;
    text-align: left;
    display: block;
    padding: .25em 0.5em .25em 1em;
    line-height: 1em;
}
#MainMenuList .dropdown-content a:hover {
    background-color: #f0f0f0; /* #f0f0f0; */
    cursor: pointer;
}
#MainMenuList .dropdown:hover .dropdown-content {
    display: block;
}
#MainMenuList ul { margin: 0; padding: 0;}
#MainMenuList li.dropdown {
    display: inline-block;
    position: relative;
    z-index: 1;
}
#MainMenuList li .dropdown:hover .dropbtn {
    background-color: #f0f0f0;
}

#PageBanner_Top {
    width: 100%;
    overflow: hidden;
}

    #PageBanner_Top:after {
        content: " ";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

#TopBanner {
    width: 100%;
}

#UnitCorporateLogos {
    border-collapse: collapse;
    width: 100%;
}
    #UnitCorporateLogos td { border: none; }
    #UnitCorporateLogos td.Left { width: 20%; padding-left: 5%; }
    #UnitCorporateLogos td.Center { width: 60%; text-align: center; }
    #UnitCorporateLogos td.Right { width: 20%; padding-right: 5%; text-align: right; }

#TopBannerCorporateLogo { width: 80%; }
#TopBannerUnitLogo { width: 80%; }

#TopBannerUnitName {
    font-size: 200%;
    font-weight: bold;
}

#PageContents {
    width: 98vw;
    height: 98vh;
    border: solid 0px silver;
}

/* Make sure the MenuBar height and the iframe top position are coordinated. */
#frame_MainContent {
    display: block;
    width: 100%;
    height: 100%;
    border: solid 0px blue;
}

#Main_Frame {
    display: block;
    width: 100%;
    height: 97%;
    border: solid 0px blue;
}

div.EmbededPageContents {
    width: 90vw;
    margin: 0 auto 0 auto;
    border: dashed 0px blue;
}

#HeaderMessage {
    width: 90vw;
    margin: 0 auto 0 auto;
    border: dashed 0px blue;
}
#WelcomeMessage {
    width: 90vw;
    margin: 0 auto 0 auto;
    border: dashed 0px blue;
}
#SpecialMessage {
    width: 90vw;
    margin: 0 auto 0 auto;
    border: dashed 0px blue;
}
#Announcements {
    width: 90vw;
    margin: 0 auto 0 auto;
    border: dashed 0px blue;
}
#FooterMessage {
    width: 90vw;
    margin: 0 auto 0 auto;
    border: dashed 0px blue;
}

#HomePageButtons {
    width: 96vw;
    margin: 0 auto 0 auto;
    border: dashed 0px blue;
}

    #HomePageButtons img.BigButton {
        width: 29%;
        margin-left: 3%;
        margin-bottom: 3%;
        padding: 0;
    }

/* Styling for the Contacts page. */
#ContactsPage th { text-align: left; }

/* Styling for the onscreen menus. */
#menuBody {
    width: 90%; margin-left: auto; margin-right: auto;
    border: solid 0px blue;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: white;
}
    #menuBody div.MenuSection {
        width: 100%;
        padding-left: 0pt;
        margin-top: 8pt;
    }
    #menuBody dl {
        margin-left: 0em;
        width: 100%;
    }
        #menuBody dl dt {
            font-family: "Dana-Titles", Verdana, -apple-system, system-ui, sans-serif;
            margin-bottom: 0.175em;
        }
    #menuBody div.MenuLegend { text-align: center; }
        #menuBody div.MenuLegend span.MenuLegendItem { display: inline-block; margin-right: 0.5em; }
        #menuBody div.MenuLegend span.MenuLegendItem img.LegendItemImage { height: 1em; vertical-align: text-bottom; }
        #menuBody div.MenuLegend span.MenuLegendItem span.LegendItemTitle { margin-left: 0.25em; font-size: 80%; }

    #menuBody table.Menu { border-collapse: collapse; width: 100%; border: none; }
        #menuBody table.Menu tr.Item { }
        #menuBody table.Menu th {
            font-family: Dana-Titles, Verdana, -apple-system, system-ui, sans-serif;
            font-size: 110%;
            font-weight: bold;
        }
        #menuBody table.Menu td.RightAlign { text-align: right; }
        #menuBody table.Menu td.CenterAlign { text-align: center; }
        #menuBody table.Menu td.PriceColumn { width: 1%; padding: 0 0.3em 0 0.3em; }
        #menuBody table.Menu td.ItemName { vertical-align: top; padding-bottom: 0.5em; }
        #menuBody table.Menu span.MenuSection {
            text-transform: uppercase;
            font-family: Dana-Titles, Verdana, -apple-system, system-ui, sans-serif;
            font-size: 110%;
            font-weight: bold;
        }
        #menuBody table.Menu span.ItemName {
            font-family: Dana-Titles, Verdana, -apple-system, system-ui, sans-serif;
            font-size: 100%;
            font-weight: bold;
        }
        #menuBody table.Menu div.ItemDescription {
            font-family: Dana-Body, Verdana, -apple-system, system-ui, sans-serif;
            font-size: 90%;
            font-weight: normal;
        }
        #menuBody table.Menu td span.ItemPrice {
            font-family: Verdana, -apple-system, system-ui, sans-serif;
            font-weight: normal;
            font-size: 80%;
        }
        #menuBody table.Menu #MenuFooter {
            font-family: Dana-Titles, Verdana, -apple-system, system-ui, sans-serif;
            font-size: 100%;
            font-weight: bold;
        }
        #menuBody table.Menu #MenuFooter.PriceFont { font-weight: normal; font-size: 80%;}
/* End of on-screen menu styling. */

#DailyMenuCurrentLocationName {
    font-size: 75%;
    margin-left: 0.5em;
}

#WeeklyGridTitle {
    width: 100%;
    font-family: "Dana-Body", Verdana, -apple-system, system-ui, sans-serif;
    font-size: 1.0em;
    text-align: center;
}
#WeeklyGridCurrentLocationName { font-size: 50%; display: block; }
#WeeklyMenuAtAGlance {
    border-collapse: collapse;
    width: 95%;
    margin: 0 auto 0 auto;
    font-family: "Dana-Titles", Verdana, -apple-system, system-ui, sans-serif;
}
    #WeeklyMenuAtAGlance caption { text-align: center; margin-bottom: 1em; }
    #WeeklyMenuAtAGlance tr.section { border-top: solid 1px black; }
    #WeeklyMenuAtAGlance tr.section:first-child { border-top: none; }
    #WeeklyMenuAtAGlance span.MenuSection {
        text-transform: uppercase;
        font-family: Dana-Titles, Verdana, -apple-system, system-ui, sans-serif;
        font-size: 110%;
        font-weight: bold;
    }
    #WeeklyMenuAtAGlance dl dt {
        font-family: "Dana-Body", Verdana, -apple-system, system-ui, sans-serif;
        font-size: 100%;
        font-weight: normal;
        border: none;
    }
        #WeeklyMenuAtAGlance dl dt.Grid_ItemIitle {
            font-family: "Dana-Body", Verdana, -apple-system, system-ui, sans-serif;
            font-size: 100%;
            font-weight: normal;
            border: none;
        }

div.Locations-original {
    position: absolute; z-index: 1;
    left: 5px; top: 5px;
    border: solid 0px blue;
}

div.Locations {
    font-size: 90%;
    border: solid 0px blue;
    margin-top: 0.25em;
    height:2em;
}

div.MenuFooter { margin-top: 2em; }

a.button {
    display: inline-block;
    min-width: 5em;
    font-size: 90%;
    font-weight: bold;
    margin: 0 0.175em 0 0;
    padding: 0.175em 0.25em 0.175em 0.25em;
    color: white;
    background-color: var(--colour-dana-darker-orange, var(--colour-dana-orange, #4b4a4a));
    border-radius: 3px;
    text-align: center;
    text-decoration: none;
}

div.PrintLink {
    display: inline;
    float: right;
    border: solid 0px green;
}

table.section {
    border-collapse: collapse;
}

td {
    padding-left: 2pt;
    padding-right: 2pt;
    padding-top: 2pt;
    padding-bottom: 2pt;
}

    td.section {
        font-weight: bold;
        font-size: 110%;
        text-align: center;
        border-top: none; /* solid 1px black */
    }

    td.sectionentree {
        width: 375px;
        padding-bottom: 0pt;
        color: #8e0000;
        font-weight: bold;
        font-size: 100%;
        border-top: solid #8e0000 .75pt;
    }

    td.footer {
        padding-bottom: 0pt;
        color: #8e0000;
        font-weight: bold;
        font-size: 100%;
        border-top: solid #8e0000 .75pt;
    }

p.sectiondescription {
    width: 95%;
    font-family: "Dana-Body", Verdana, -apple-system, system-ui, sans-serif;
    word-wrap: break-word;
    font-size: 80%;
    font-weight: normal;
    color: black;
}
td.section p.sectiondescription { text-align: center; }

    p.sectiondescription:firstchild {
        margin-top: 10pt;
        width: 95%;
    }

td.sectioncontent {
    vertical-align: top;
}

td.itementree {
    word-wrap: break-word;
    width: 375px;
    font-size: 90%;
}
/* font.itemtitle {
    color: #8e0000;
    font-weight: bold;
}
*/
font.itemtitle {
    color: black;
    font-weight: bold;
}

font.flags {
    font-size: 1pt;
    color: black;
    font-weight: normal;
}

/* The number behind the item indicates the number of prices that need to be displayed. */
td.item {
    word-wrap: break-word;
    font-size: 90%;
    vertical-align: top;
}
td.item4 {
    width: 250px;
}
td.item3 {
    width: 295px;
}
td.item2 {
    width: 340px;
}
td.item1 {
    width: 385px;
}
td.item0 {
    width: 430px;
}

/* The number behind the price indicates the number of prices that need to be displayed. */
td.price {
    font-size: 90%;
    font-weight: bold;
}
td.price1 {
    width: 45px;
}
td.price2 {
    width: 90px;
}
td.price3 {
    width: 135px;
}
td.price4 {
    width: 180px;
}
span.price {
    width: 44px;
    min-width: 44px;
    text-align: right;
    display: inline-block;
    float: right;
}

td.symbol {
    width: 32px;
    font-size: 100%;
    font-weight: bold;
}

#menuBody div.MenuTitle {
    font-weight: bold;
    font-size: 150%;
    color: black;
    width: 100%;
    margin-top: 4pt;
    border: solid 0px green;
}
#menuBody h1.MenuTitle {
    text-transform:capitalize;
    text-align:left;
    font-weight: bold;
    font-size: 150%;
    color: black;
    width: 100%;
    margin-top: 4pt;
}

/*
div.MenuTitleOld:before {
    content: "Daily Specials | ";
}
*/

div.HeaderSubTitle_Old {
    position: absolute; z-index: 1;
    left: 0px; top: 115px;
    width: 740px; height: 68px;
    font-size: 24.0pt;
    color: #8e0000;
    font-style: italic;
    font-weight: bold;
    text-align: center;
}

div.HeaderSubTitle {
    width: 100%;
    padding-left: 30pt;
    margin-top: 4pt;
    font-weight: bold;
    font-style: italic;
    font-size: 130%;
    color: #333333;
}

span.MenuSection {
    font-family: "Dana-Titles", Helvetica, Arial, sans-serif; 
    font-size: 110%;
    font-weight: bold;
}

    dt span {
        border-bottom: 6px solid white;
        margin-bottom: -4px;
        display: inline-block;
    }

        dt span.ItemName {
            margin-right: 0.5em;
            line-height: 16pt;
        }

        dt span.ItemPrice {
            float: right;
            font-weight: normal;
            font-size: 80%;
            line-height: 16pt;
        }

dd {
    margin: 0.5em 0em 1em 0em;
    font-size: 90%;
}

/* Card Page */
input[type="button"],
input.Buttons {
    font-family: inherit;
    color: white;
    background-color: var(--colour-dana-darker-orange, var(--colour-dana-orange, #8e0000));
    border: none;
    border-radius: 3px;
    text-align: center;
    font-weight: bold;
    padding: 0.175em;
    padding-inline: 0.2em;
    min-width: 10em;
}
input[type="password"] { width: 16em; }
input[type="text"] { width: 16em; }

/* Event Calendar */
#EventCalendar { width: 100%; border: none; border-collapse: separate; }
    #EventCalendar td.calendarCell {
        width: 14.3%;
        border: solid 1px silver;
        font-size: 60%;
    }
    #EventCalendar td.calendarCell .Inactive { background-color: blanchedalmond; font-size: 60%; }
    #EventCalendar td.Inactive { 
        background-color: ivory; 
        border: solid 1px silver;
        font-size: 60%;
    }
#EventCalendar a.DayLink {
    display: inline-block;
    float: left;
    width: 1.5em; height: 1.1em;
    border: solid 0px #e0e0e0;
    margin: 0; padding: 0;
    text-align: center;
    text-decoration: none;
    color: black;
    background-color: #e0e0e0;
}
#EventCalendar table.EventListDay {
    display: inline-table;
    margin: 0; padding: 0;
}
#EventCalendar dl.EventListDay {
    display: inline-block;
    margin: 0; padding: 0 0 0 3px;
}
    #EventCalendar dl.EventListDay dt {
        font-family: "Dana-Titles", Helvetica, Arial, sans-serif;
        margin: 0px 0 0 0; padding: 0;
        font-size: 150%;
    }
    #EventCalendar dl.EventListDay dt.Font_1 { font-size: 100%; }
    #EventCalendar span.Font_1 { font-size: 75%; border: none; }

#EventCalendarButtons { border: none; }
    #EventCalendarButtons td.Buttons {
        color: white;
        background-color: #8a0000;
        border: solid 1px #8e0000;
        font-weight: bold;
        font-size: 80%;
        min-width: 4em;
        text-align: center;
    }
    #EventCalendarButtons a { 
        text-decoration: none; 
        color: white;
        padding: 0 0.25em 0 0.25em;
    }

/* Nutrition Information 2016 */
table.NutritionInformationTable {
    border-collapse: collapse;
    border-top: solid 4px black;
    border-bottom: solid 4px black;
    border-left: solid 2px black;
    border-right: solid 2px black;
    margin-left: auto;
    margin-right: auto;
}
    table.NutritionInformationTable caption {
        font-family: "Dana-Titles", Helvetica, Arial, sans-serif;
        color: black;
        font-weight: bold;
        margin-bottom: 0.5em;
        min-width: 20em;
    }
        table.NutritionInformationTable caption span.ItemTitle {
            font-family: "Dana-Titles", Helvetica, Arial, sans-serif;
            font-size: larger;
            font-weight: bolder;
        }
    table.NutritionInformationTable tbody th {
        font-family: "Dana-Titles", Helvetica, Arial, sans-serif;
        color: black;
        text-align: right;
        padding: 0 0.25em 0 0.25em;
    }
    table.NutritionInformationTable thead th {
        font-family: "Dana-Titles", Helvetica, Arial, sans-serif;
        color: black;
        text-align: center;
        padding: 0 0.25em 0 0.25em;
    }
    table.NutritionInformationTable td {
        text-align: center;
        padding: 0.25em;
        border-left: solid 1px black;
    }
    table.NutritionInformationTable tr.Row1 {
        border-bottom: solid 1px black;
    }

p.NutritionInformationDisclaimer {
    width: 400pt;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    border: solid 1px black;
    background-color: white;
}
/* 2016 NutritionInformationLabel */
.CenteredText { text-align: center; }
.RightAlignedText { text-align: right; }
#NutritionInfoPageTitle { font-size: 150%; text-align: center; }
div.NutritionInformationLabel { 
    margin: 3pt;
    padding: 3pt;
    border: solid 0.5pt black;
}
div.Level1 { width: 120pt; }
div.Level2 { width: 400pt; margin-left: auto; margin-right: auto; }
table.Level2 { width: 114pt; }
table.NutritionInformationLabel {
    font-size: 8pt;
    border-collapse: collapse;
    width: 100%;
}
table.NutritionInformationLabel Caption {
    font-size: 8pt;
    text-align: left;
    border-bottom: solid 2pt black;
    width: 100%;
}
table.NutritionInformationLabel thead {
    font-size: 6pt;
    font-weight: bold;
    border-bottom: solid 1pt black;
}
table.NutritionInformationLabel.Level2 thead {
    border-bottom: none;
}
table.NutritionInformationLabel tr { border-bottom: solid 0.5pt black; }
table.NutritionInformationLabel tr.NoBorder { border-bottom: none; }
table.NutritionInformationLabel tr.ThickBorder { border-bottom: solid 2pt black; }
table.NutritionInformationLabel td { vertical-align: middle; }
table.NutritionInformationLabel td.StandardBorder { border-bottom: solid 0.5pt black; }
table.NutritionInformationLabel div.FloatLeft { float: left; }
table.NutritionInformationLabel div.FloatRight { float: right; }
table.NutritionInformationLabel div.AlignRight { text-align: right; }
span.NutritionLabelCaption { font-size: 13pt; font-weight: bold; }
span.PrimaryLabel { font-weight: bold; }
span.SecondaryLabel { margin-left: 6pt; }
span.PrimaryDV { font-weight: bold; }
table.NutritionInformationLabel col.LeftColumn { }
table.NutritionInformationLabel col.RightColumn { width: 25pt; text-align: right; }
/*  2021 NutritionInformation Label Format 
    Oskar [2018-05-30]
*/
div.Level1_2021 {
    width: 180pt;
}

    div.Level1_2021 span.Calories {
        display: inline-block;
        border-bottom: solid 2.5pt black;
        font-size: 10pt;
        font-weight: bold;
    }

    div.Level1_2021 div.dv {
        display: inline-block;
        float:right;
        font-size: 6pt;
        font-weight: bold;
        text-align: right;
    }
        div.Level1_2021 div.dv::after {
            content:"";
            display:table;
            clear:both;
        }
        div.Level1_2021 sup {
            font-size: 9pt;
            line-height: 9pt;
            vertical-align: text-top;
        }

    div.Level1_2021 table.NutritionInformationLabel tr.ThickBorder {
        border-bottom: solid 2.5pt black;
    }

    div.Level1_2021 table.NutritionInformationLabel Caption {
        border-bottom: solid 1pt black;
    }
/******************************************/

/*  iOS Mobile App Back button. 
    This button is added to the nutrition page from the iOS app.
    The iOS App overrides the display behaviour of the Menu Websit and
    the Android App. Both of these open the nutrition infromation on another tab/page.

    Due to performance issues, the iOS app upend the infromation in the same window, 
    so it needs a button to go back to the previous page (the menu).

    Oskar [2018-03-22]
*/
a.iOS_Button {
    color: black;
    background-color: transparent;
    border: solid thin #7b7a7a;
    border-radius: 1ex;
    padding: 1ex 0.75em;
    -webkit-box-shadow: .3em .3em .3em rgba(0,0,0,0.3);
    box-shadow: .3em .3em .3em rgba(0,0,0,0.3);
    text-decoration: none;
    font-size: 3vw;
    font-weight: bold;
    display: initial;
}

/**********************************/


/*** Menu website ordering Page ***
a.button {
    padding: 1ex;
    font-weight: bold;
    font-size: 100%;
    color: white;
    background-color: #4b4a4a;
}
li.Button {
    cursor: pointer;
    padding: 1ex;
    font-weight: bold;
    color: white;
    background-color: #4b4a4a;
}
li.SelectedButton {
    cursor: pointer;
    padding: 1ex;
    font-weight: bold;
    color: white;
    background-color: #666c1e;
}

span.Button {
    cursor: pointer;
    padding: 0.175em 0.25em 0.175em 0.25em;
    text-align: center;
    color: white;
    background-color: #666c1e;
}
span.SelectedButton {
    cursor: pointer;
    padding: 0.175em 0.25em 0.175em 0.25em;
    text-align: center;
    color: white;
    background-color: #7b7a7a;
}
span.MenuItemNameInfo {
    display: inline-block;
    max-width: 75%;
}

span.MenuItemName {
    font-weight: bold;
}

span.Orders_NutritionInfo {
    font-weight: bold;
    margin-left: 0.5em;
}

span.MenuItemsFlags {
    margin-left: 0.5em;
}

    span.MenuItemsFlags img {
        vertical-align: bottom;
        height: 1em;
    }

span.UpDownSelector { display: inline-block; }
    span.UpDownSelector span.Button {
        display: inline-block;
        width: 1em;
        text-align: center;
    }


ul.Orders_ButtonMenu {
    list-style: none;
    display: none;
    padding: 0;
    margin: 1ex 0 0 0;
    overflow: hidden;
}

    ul.Orders_ButtonMenu:first-child {
        display: block;
    }

    ul.Orders_ButtonMenu li {
        display: block;
        float: left;
        margin-right: 0.25em;
    }

ul.Orders_MenuSectionMenu {
    float: left;
    list-style: none;
    display: none;
}

    ul.Orders_MenuSectionMenu li {
        margin-bottom: 1.0ex;
    }

div.Orders_MenuSection { border: none; }
dl.Orders_MenuSectionItems dt { clear: both; }

span.OuterPriceContainer {
    display: block;
    float: right;
    vertical-align: top;
}

    span.OuterPriceContainer::after {
        content: "";
        display: table;
        clear: both;
    }

span.PriceContainer {
    float: right;
    display: inline-block;
    text-align: right;
    font-weight: bold;
    margin-bottom: 2ex;
}

    span.PriceContainer::after {
        content: "";
        display: table;
        clear: both;
    }

    span.PriceContainer span.Price {
        display: inline-block;
        margin: 0 0.5vw 2.5vw 0;
        padding: 0;
    }

dl.OrderItemOptions { margin-left: 2em; }
    dl.OrderItemOptions dt {
        font-weight: bold;
        clear: none;
    }
    dl.OrderItemOptions dd {
        margin-left: 1em;
    }
        dl.OrderItemOptions dd span.OrderOptionName {
            display: inline-block;
            width: 45%;
        }
        dl.OrderItemOptions dd span.OrderOptionPrice {
            display: inline-block;
            width: 5em;
            text-align: right;
        }


#Orders_CurrentOrder { white-space: nowrap; }

#Orders_MenuTable {
    width: 100%;
    border-collapse: collapse;
}
    #Orders_MenuTable td.Left { width: 1%; }
    #Orders_MenuTable td.Right { padding-left: 1em; }
    #Orders_MenuTable ul { padding: 0; }

#Orders_PageFooter {
    clear: both;
    margin-top: 1ex;
    padding-top: 1ex;
    border-top: solid thin #4b4a4a;
    font-weight: bold;
}

#Orders_Banner {
    padding-bottom: 1ex;
    border-bottom: solid thin #4b4a4a;
}

    #Orders_Banner table td { padding: 0.4em 0; }

        #Orders_Banner table td label {
            display: inline-block;
            text-align: left;
        }

#Orders_SessionVariables {
    font-size: small;
    color: darkred;
    border: solid thin #4b4a4a;
    background-color: #e5e5e5;
    padding: 1ex;
    border-radius: 1ex;
}

#Orders_Cart { display: none; }

#Orders_Cart_Items p.ItemName {
    font-weight: bold;
    margin-top: 2ex;
    margin-bottom: 1ex;
}

    #Orders_Cart_Items p.ItemName span.Price {
        display: inline-block;
        float: right;
    }

#Orders_Cart_Items dl {
    font-size: smaller;
    margin: 0.5ex 0 0 2em;
}

#Orders_Cart_Items dt { font-weight: bold; }
#Orders_Cart_Items dd { margin: 0 0 0 1em; }

#Orders_Checkout {
    margin-top: 2ex;
    padding-top: 2ex;
    border-top: double 9px #4b4a4a;
    text-align: right;
}

#Orders_Checkout_Totals {
    border-bottom: solid 3px #4b4a4a;
    margin-bottom: 2ex;
    padding-bottom: 2ex;
}

    #Orders_Checkout_Totals td {
        text-align: right;
        font-weight: bold;
    }

#Orders_CheckoutMessage { color: darkred; }
/**********************************/

/* General Styles */
.NoLineBreak { white-space: nowrap; }

/* For Desktop */
/* If the window is wider than 1150 pixels. */
@media only screen and (min-width: 1150px) {
    #PageContents {
        width: 1150px;
        margin-left: auto;
        margin-right: auto;
        background-color: white;
    }

    body {
        color: black;
        background-color: darkgrey;
    }
}

/* If the window goes below 900 pixels wide. */
@media only screen and (max-width: 1025px) {
    /* font-size: 100%; */
    #WeeklyMenuAtAGlance {
        font-size: 72%;
    }
}
@media only screen and (max-width: 900px) {
    html, body {  } /* font-size: 100%; */
    #WeeklyMenuAtAGlance { font-size: 68%; }
}

/* If the window goes below 768 pixels wide. (iPad Mini: 768px) */
@media only screen and (max-width: 770px) {
    html, body {  } /* font-size: 90%; */
    #MainMenuList { display: block; }
    /*#MainMenuContainer { display: none; }*/
    #VerticalMenuContainer { display: none; }
}

@media only screen and (max-width: 610px) {
    html, body { font-family: Arial, Helvetica, sans-serif; } /* font-size: 90%; */
    #MainMenuList { display: none; }
    /*#MainMenuContainer { display: none; }*/
    #VerticalMenuContainer { display: block; }
}

/* If the window goes below 320 pixels wide. (Sony Z1: 360px) */
@media only screen and (max-width: 365px) {
    html, body { font-family: Arial, Helvetica, sans-serif; } /* font-size: 80%; */
    #MainMenuList { display: none; }
    /*#MainMenuContainer { display: none; }*/
    #VerticalMenuContainer { display: block; }
}

@media not screen {
    #MainMenuList { display:none; visibility:hidden; }
    #PageBanner_Top { display:none; visibility:hidden; }
    div.menuBody div.Locations { display:none; visibility:hidden; }
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
}
    
/**********************************************************************************/