/* I have done the Favicon & the Pie Bullets*/

/* General styles */
body {
    background-color: #fff; /* white background */
    color: #404040; /* text color */
    font-family: Georgia, Garamond, serif;
    font-size: 11pt;
}

h1 {
    text-align: center;
    font-size: 22pt;
    font-weight: bold;
	font-family: Lucida Sans Unicode, Helvetica, Arial, serif;
    color: #A4A400; /* headings color */
    background-color: #F0F0F0; /* headings background color */
    text-decoration: underline;
}

h2, h3, h4 {
	text-align: left;
    font-size: 18pt;
    font-weight: normal;
    color: #A4A400; /* headings color */
    background-color: #F0F0F0; /* headings background color */
    text-decoration: underline;
}



/* Define a class for the custom bullet image */
.list-bullet {
    list-style: none; /* Remove default list styles */
}


ul {
    list-style: none; /* Remove default list styles */
}

ul li {
    background-image: url('pie_bullet.png');
    background-repeat: no-repeat;
    background-size: 16px 16px; /* Adjust the size based on your image dimensions */
    padding-left: 24px; /* Adjust the padding as needed */
}


/* Ingredient list styles */
ul {
    
    list-style-image: url('pie-bullet.png');

}

/* Tooltip for abbreviations */
abbr:hover {
    text-decoration: underline;
}


/* Add styles for Ingredients */
ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 5px;
}

/* Styling for abbr spans */
.abbr {
  text-decoration: underline;
  cursor: help; /* Set cursor to indicate it's clickable */
}

/* Tooltip styles for abbr spans */
.abbr:hover::after {
  content: attr(title); /* Display the full word from the title attribute */
  color: #A4A400; /* Matching the color of page headings */
  font-size: 11pt;
}

/* Styling for quantity spans */
.quantity {
  margin-right: 1px; /* Adjust spacing between quantity and abbreviation */
}



/* Strikeout and replacement styles */
s {
    text-decoration: line-through;
}
ins {
    text-decoration: none;
    font-weight: bold;
}

/* User quotes styles */
blockquote {
    font-style: italic;
    background-color: #FFFFA8; /* quote background color */
}

blockquote strong {
    font-weight: bold;
}

/* Bottom links styles */
#bottom-links {
    margin-top: 20px;
}

#bottom-links a {
    color: #A4A400; /* link color */
}