/* CSS for the Heidelberg Historical Society */

 a:link.comment    {color:darkgray;   }
 a:visited.comment {color:gray;       }
 a:hover.comment   {color:saddlebrown;}
 a:active.comment  {color:darkgray;   }

 .item {
      position:relative;
      display:inline-block;
  }

  /* Don't let images spill out of their containers */

  img {
    object-fit:contain;
    max-width:100%;
    }

 .form_style
    {
    margin-left:1em;
    margin-bottom:2em;
    border-spacing:10px 10px;
    border-width:7px;
    border-color:DeepSkyBlue;
    border-style:solid;
    border-radius:10px;
    background-color:AliceBlue;
    padding:1em;
    display: inline-block;
    font-size:80%;
    }


  .reg-badge{
      position: absolute;
      left:20px;
      top:20px;
      background:#284a81;
      text-align: center;
      border-radius: 10px;
      color:white;
      padding:3px 12px;
      font-size:10px;
  }

  .description-badge{
      position: absolute;
      left:20px;
      bottom:19px;
      background:dimgray;
      text-align: center;
      border-radius: 10px;
      color:white;
      padding:3px 12px;
      font-size:9px;
  }

  .no-thumbnail {
      border: solid black 2px;
      padding:40px 20px;
      margin: 1em;
      color:brown;
      font-style: italic;
      border-radius: 4px;
   }

.thumbnails
  {
  display: flex;
  flex-wrap:wrap;
  flex-direction:row;
  }


.thumbnail_row
  {
  display: inline-block;
  background-color: #EFEFFF;
  max-width: 300px;
  margin: 5px;
  border-radius: 10px;
  padding: 1em;
  border-style:solid;
  border-color:#C6C6FF;
  border-width:1px;

  }

.thumbnail_image
  {
  display: block;
  text-align: center;
  }

.thumbnail_image_count
  {
  font-style: italic;
  font-size:x-small;
  text-align: center;
  display:block;
  }


.thumbnail_image img
  {
  border-radius: 4px;
  object-fit:contain;
  margin:auto;
  border: solid black 2px;
  }

.thumbnail_description
  {
  margin-top:1em;
  display: block;
  font-size:small;
  }

.thumbnail_link
  {
  display: block;
  font-size:small;
  text-align: center;

  }

.thumbnail_location
  {
  display: block;
  font-size:x-small;
  background-color:#DBDBFF;
  border-radius: 3px;
  padding: 3px;
  margin: 3px 0px 3px 0px;
  }


.thumbnail_link  a {
    color: #7b3dce;
    text-decoration: none;
  }

 .thumbnail_link a:hover {
    text-decoration: underline;
  }

/* For putting line breaks inside a flex box */

.break {
  flex-basis: 100%;
  height: 5px;
}


/* The main search box */

#search_box {
  display:grid;
  grid-template-columns: 20% auto;
  grid-template-rows: auto;
  --margin: 3px 0px 0px 0px;  /* top right bottom left */
  --padding: 4px;
  --main-background-color: #BBDEEA;
  border-radius: 3px;
  border-style:solid;
  border-color:#72A2C9;
  border-width:3px;
  width: min(90vw, 900px);

}

/* The line with "search" in it */

#search_heading {
  background-color: #72A2C9;
  text-align: center;
  font-weight: bold;
  grid-column-start: span 2;
  padding: 3px;
}

/* The text or date we are searching for */

.search_for {
  display:block;
  background-color: var(--main-background-color);
  padding: var(--padding);
  margin:  var(--margin);
  font-size:small;
}

/* A date (from or to) -- to keep them adjacent to the text box */

.search_date {
  display:inline-block;
  padding-left: 1em;
  font-size: medium;
}

/* A label on the LH side of the search box (search for or date) */

.search_label {
  display:block;
  text-align: right;
  background-color: var(--main-background-color);
  margin:  3px 3px 0px 0px;
  padding: var(--padding);
  font-weight: bold;
  vertical-align: text-top;
}

/* The search text itself */

#search_text {
  width: 90%;
  }

/* The search button */

#search_button {
  text-align: center;
  display:block;
  grid-column-start: span 2;
  background-color: var(--main-background-color);
  margin:  var(--margin);
  padding: var(--padding);

}

/* Style inputs with type="text", select elements and textareas */

.membership_form input[type=text], .membership_form select, .membership_form textarea {
  width: 100%;
  padding: 12px; /* Some padding */
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}


/* Style the submit button with a specific background color etc */
.membership_form input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.membership_form .explanation {
  text-align:left;
  color:dimgray;
  font-size:x-small;
  }

/* When moving the mouse over the submit button, add a darker green color */
.membership_form input[type=submit]:hover {
  background-color: #45a049;
}

/* Add a background color and some padding around the form */
.membership_form {
  border-radius: 5px;
  background-color: #f0f0f0;
  padding: 20px;
  box-sizing: border-box;
}

.address_details {
  padding: 10px; /* Some padding */
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  margin: 3px;
  background-color: #f0f0f0;
}

.address_details p {
  margin: 0;
  padding-top: 0;
  padding-bottom: 3px;
}


/* For highlighting words found in a search.

   And yes, I know how highlight is spelt, but because
   there will be a lot of them, I am choosing to shorten it.

*/

.hilite {
    color: #000000;
    background-color: rgba(255,255,0,0.6);
  }

/* For showing a list of tags - short form (also used on the main page) */

.shortTagsDiv
  {
  display: flex;
  flex-wrap:wrap;
  flex-direction:row;
  }

.oneShortTag
  {
  background-color: lightblue;
  padding: 5px;
  margin: 2px;
  border-radius: 6px; /* Rounded borders */
  border:solid darkgray 0.5px;
  }

.oneShortTag  a {
    color: darkblue;
    text-decoration: none;
  }

 .oneShortTag a:hover {
    text-decoration: underline;
  }

/* For the blog list on the main page */

.blogListDiv
  {
  display: flex;
  flex-wrap:wrap;
  }

.oneBlogListItem
  {
  background-color: floralwhite;
  padding: 5px;
  margin: 2px;
  width:25vh;
  border-radius: 6px; /* Rounded borders */
  border:solid darkgray 0.5px;
  }

.oneBlogListItem  a {
    color: darkblue;
    text-decoration: none;
    font-size:smaller;
  }

 .oneBlogListItem a:hover {
    text-decoration: underline;
  }