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

body  {
	background: #ffffff;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults - that was a comment from the old css file */
	padding: 10px;
	color: black;
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif"
}

.Header {
	width: 100%;
	background-color: #ffffff;
	text-align: center;
}

.HeaderFlex {
    display: flex;
    flex-direction: column;
	justify-content: center;
    align-items: center;
    }
    
@media (min-width: 640px) {
.HeaderFlex {
    flex-direction: row;
    width: 100%;
    background-color: #ffffff;
    align-items: center;
    }
}

.logo, .cart {
    background-color: #ffffff;
    width: 20%;
    display: none;
    }

@media (min-width: 640px) {
.logo, .cart {
    background-color: #ffffff;
    width: 20%;
    display: inline;
    }
 }
 
.title {
    background-color: #ffffff;
    width: 80%;
}

.masthead {
    font-family: "Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif"";
    font-size: 36px;
    background-color: #ffffff;
    color: darkslateblue;
    text-align: center;
    line-height: 36px; 
    margin: 38px 1px 10px 1px;
}
.strapline {
	font-family: "Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif"";
	font-size: 24px;
	font-style: italic;
    text-align: center;
    color: darkslateblue;
    margin: 0px 1px 10px 1px;
    }

.Footer {
	width: 100%;
    background-color: darkslateblue;
    color: #ffffff;
    padding: 5px 5px 5px 5px;
    align-items: center;
    justify-content: center;
}

/* used for emphasis */
.announcement {
    color: crimson;
    font-weight: 700;
}

.announcements {
    padding: 10px;
    font-size: larger;
}
/* used for messages where emphasis not necessary */
.normal {
    color: black
}

.SpryHiddenRegion {
    visibility: hidden;
}

/* Sort and filter controls */
.controls {
    background-color: white;
    color: black;
    font-family: "Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif"";
    font-size: 1rem;
    min-height: 2.75rem;
    padding: 5px;
    width: 95%;
    margin: 0 auto 0 auto;
}

.sort {    
    font-size: larger;
    padding: 0 1rem 1rem 1rem;
}

#show {
/* hide the 'show filters' button */
    margin: 0px 0px 10px 0px;
    display: none;
}

ul.naked {
    list-style-type: none;
    background-color: none;
}

li.horizontal {
    display: inline;
    Margin-right: 10px;
}

li.filters {
    line-height: 2;
    }

@media (min-width: 900px) {
li.filters {
    display: inline;
    margin-right: 10px;
}
}

.notes {
    font-style: italic;
    color: teal;
}

.ingredients {
    font-style: italic;
    color: slateblue ;
}