* { margin:0; padding: 0; }

body {
background-color: #F1D78B;
padding: 20px 0 16px 0;
font-family: 'Averia Sans Libre', cursive;
font-size: 100%;
background-image: url(flare2.png);
background-repeat: no-repeat;
background-position: top center;
}

h1 {
text-align: center;
font-size: 1.30em;
color: #5C482F;
padding-top: 6px;
line-height: 1.1;
}

span.heart {
color: #FF6666;
display: inline block;
font-size: 1.2em;
}

#pagewrap {
max-width: 420px;
margin: 0 auto;
padding: 20px auto;
}

#pagewrap p.copyright {
font-size: 0.6em;
color: #000000;
text-align: center;
margin-top: 6px;
line-height: 1.3;
}

img.logo {
display: block;
margin: 0 auto;
width: 85%;
}

#headwrap {
width: 90%;
margin: 0 auto;
}

#headwrap p.address,
#headwrap p.phone {
text-align: center;
font-weight: bold;
font-size: 1.30em;
color: #5C482F;
padding-top: 16px;
}

#headwrap p.address {
letter-spacing: 0;
}

.paren {
position: relative;
top: -0.025em;
}

#headwrap p.phone {
font-size: 1.5em;
}

#headwrap p.phone a {
text-decoration: none;
color: #37555F;
border: none;
}

#menuwrap {
width: 90%;
margin: 20px auto 0 auto;
border: 8px solid #D57A39;
background-color: #F9E8B4;
border-radius: 20px;
padding-bottom: 14px;
background-image: url(bg-1.png);
background-repeat: repeat;
}

#menuwrap p.blurb,
#menuwrap p.blurb2,
#menuwrap p.blurb3 {
font-weight: medium;
width: 90%;
margin: 0 auto;
letter-spacing: 0;
padding-bottom: 0.275em;
font-size: 1.0em;
color: #3A0D01;
line-height: 1.1;
}

#menuwrap p.blurb2 {
text-align: center;
margin-top: 10px;
}

#menuwrap p.blurb3 {
margin-top: -0.08em;
text-align: center;
}

#menuwrap p.heading {
font-size: 1.3em;
text-align: center;
color: #AA0000;
width: 90%;
margin: 1.0em auto 0.50em auto;
border: 1px dotted #AA0000;
border-left: none;
border-right: none;
padding: 3px 0 2px;
background: #FDF7C6;  
}

span.thinlineleft {
letter-spacing: -3px;
color: #AA0000;
padding-right: 10px;
}

span.thinlineright {
letter-spacing: -3px;
color: #AA0000;
padding-left: 10px;
}

span.thinlineleft:before,
span.thinlineright:before {
content:'\2014''\2014''\2014''\2014';
}

#menuwrap p.subheading {
width: 90%;
color: #AA0000;
font-size: 1.0em;
text-align: center;
letter-spacing: 1px;
font-style: italic;
margin: 14px auto 9px auto;
font-weight: bold;
background: #a0f7b0;
padding: 3px 0;
}

#menuwrap p.subdesc {
font-size: 0.8em;
margin-top: -6px;
padding-bottom: 10px;
font-weight: normal;
letter-spacing:0;
line-height: 1;
text-align: center;
}

#menuwrap p.item,
#menuwrap p.item2, 
#menuwrap p.desc {
width: 90%;
color: #3A0D01;
font-size: 1.0em;
text-align: left;
letter-spacing: 0;
margin: 0 auto;
font-weight: bold;
}

#menuwrap p.item,
#menuwrap p.item2 {
line-height: 1.1;
}

#menuwrap p.item2 { padding-bottom: 6px; }

#menuwrap .price {
float: right;
font-size: 0.95em;
}

#menuwrap p.desc {
font-weight: normal;
font-size: 0.85em;
line-height: 1.2;
padding-bottom: 8px;
}

p.disclaim {
width: 94%;
text-align: center;
font-size: 0.75em;
line-height: 1;
padding-top: 5px;
margin: 0 auto;
letter-spacing: 0;
}

#navwrap {
}

#navwrap .nav ul {
max-width: 70%;
margin: 20px auto 0 auto;
border: 1px solid #4D1001;
border-right: 2px solid #4D1001;
border-bottom: 2px solid #4D1001;
background-color: #F1D78B;
border-radius: 0.30em;
box-shadow: 0.2em 0.2em 0.5em #F1D78B;
}

#navwrap .nav ul li {
display: none; /* hide the navigation list items */
margin: 0;
padding: 0.45em 0.60em 0.40em;
}

#navwrap .nav ul li.visible {
display: block; /* show the first list item */
}

#navwrap .nav ul li a {
display: block;
text-align: center;
text-decoration: none;
font-size: 1.0em;
font-weight: bold;
color: #4D1001;
}

#navwrap .nav .visible a {
color: #4D1001;
}

#navwrap .nav ul:hover li {
display: block;
border-bottom: 1px solid #4D1001;
}

#navwrap .nav ul:hover li:last-child { border: none; }

#navwrap .nav a:after {
/*content:"\25B6";*/
color: #4D1001; /* arrow right color */
float: right;
margin-right: 0.20em;
}

#navwrap .nav .visible  a:after {
content:"\25BC";
font-size: 1.00em;
font-weight: bold;
color: #4D1001; /* arrow down color */
float: right;
margin-right: 0.20em;
}

#map {
height: 250px;
width: 100%;
border-radius: 10px;
margin-top: 18px;
}

span.line {
display: block;
height: 2px;
width: 100%;
background-color: #D57A39;
margin: 10px 0 -18px;
}

img.yelpicon {
display: block;
margin: -2px auto 0 auto;
}

span.hours {
display: block;
text-align: center;
font-size: 0.80em;
margin-top: -1px;
font-weight: normal;
line-height: 1;
}

hr.fancy-b,
hr.fancy-a {
width: 98%;
border: 0;
height: 3px;
background-image: linear-gradient(to right, #1F2C37, #fff, #1F2C37);
margin: 0 auto 10px auto;
}

hr.fancy-a {
width: 92%;
background-image: linear-gradient(to right, #FAEDA1, #D57A39, #FAEDA1);
} 

@media screen and (max-width: 415px) {
h1 {font-size: 7.0vw;}
img.logo {width: 90%;}
#headwrap p.address {font-size: 6.0vw;}
#headwrap p.phone {font-size: 7.0vw;}
#headwrap span.heart {font-size:6.0vw;}
#pagewrap p.copyright {font-size: 3.5vw;}
#menuwrap p.blurb {font-size: 5.0vw;}
#menuwrap p.blurb2 {font-size: 5.0vw;}
#menuwrap span.coupon {font-size: 5.0vw;}
#menuwrap p.heading {font-size: 5.0vw;}
#menuwrap p.subheading {font-size: 4.5vw;}
#menuwrap p.subdesc {font-size: 3.8vw;}
#menuwrap p.item, #menuwrap p.item2 {font-size: 4.7vw;}
#menuwrap p.price {font-size: 4.7vw;}
#menuwrap p.desc {font-size: 3.8vw;}
#menuwrap p.disclaim {font-size: 3.5vw;}
#navwrap .nav ul li  a {font-size: 5.0vw;}
#navwrap .nav .visible a:after {font-size: 5.0vw;}
#navwrap .nav ul li a .hours {font-size: 4.5vw;}
#navwrap .nav .visible a after .hours {font-size: 4.5vw;}
}