@charset "utf-8";
body {
  font: 100% Verdana, Arial, Helvetica, sans-serif;
  background: #060;
  margin: 0;
  /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
  padding: 0;
  text-align: center;
  /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
  color: #333333;
  max-width: 100%;
}

.oneColFixCtrHdr #container {
  width: 780px;
  max-width: 100%;
  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
  background: #FFFFFF;
  margin: 0 auto;
  /* the auto margins (in conjunction with a width) center the page */
  border: 1px solid #000000;
  text-align: left;
  /* this overrides the text-align: center on the body element. */
}

.oneColFixCtrHdr #header {
  background: #DDDDDD;
  padding: 0;
  text-align: center;
  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}

.oneColFixCtrHdr #header h1 {
  margin: 0;
  /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
  padding: 10px 0;
  /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}

.oneColFixCtrHdr #mainContent {
  padding: 0 20px;
  /* remember that padding is the space inside the div box and margin is the space outside the div box */
  background-image: url('dearolivia-files/images/paper2.png');
  background-repeat: repeat;
}

.oneColFixCtrHdr #footer {
  padding: 0 10px;
  /* this padding matches the left alignment of the elements in the divs that appear above it. */
  background: #DDDDDD;
}

.oneColFixCtrHdr #footer p {
  margin: 0;
  /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
  padding: 10px 0;
  /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

#picturelist {
  width: 620px;
  max-width: 100%;
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  padding: 0;
  font-size: 0;
}

#picturelist li {
  list-style: none;
  display:inline-block;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  text-align: left;
  font-weight: bold;
  color: #777777;
  font-size: min(4vw, 16px);
  /* max-width: 40%; */
}

#picturelist img {
  display: block;
  border: 2px solid #CE3095;
  height: 120px;
  width: 120px;
}

#picturelist img:hover {
  border: 2px solid #F4C0DA;
}

#picturelist a {
  color: #777777;
  text-decoration: none;
}

#picturelist a:hover {
  color: #999999;
}

#picturelist2 {
  width: 780px;
  max-width: 100%;
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  padding: 0;
  font-size: 0;
}

#picturelist2 li {
  list-style: none;
  display:inline-block;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  text-align: left;
  font-weight: bold;
  color: #777777;
  font-size: min(4vw, 16px);
  /* max-width: 40%; */
}

#picturelist2 img {
  display: block;
  border: 2px solid #CE3095;
  height: 150px;
  width: 150px;
}

#picturelist2 img:hover {
  border: 2px solid #F4C0DA;
}

#picturelist2 a {
  color: #777777;
  text-decoration: none;
}

#picturelist2 a:hover {
  color: #999999;
}

img {
  border-style: none;
  max-width:100%;
  max-height:100%;
  object-fit: cover;
  height: auto;
  width: auto;
}

a:link {
  color: #003300;
}

a:visited {
  color: #006633;
}

a:hover {
  color: #333333;
  background-color: #99FF33;
  text-decoration: none;
}

a:active {
  color: #003300;
}