/* CSS stylesheet for photo gallery */

h1, h2, #content div.gal_photo h2 { text-align: center }

#content div.gal_photo h2
{
  font-size: 1.2rem;
  margin: 0;
}

a.gallerylink 
{ 
  display: block;
  width: max-content;
  min-width: 250px;
  font-size: 120%;
  text-decoration: none;
  background: #efe;
  padding: 5px;
  margin: 10px;
  border-radius: 5px;
}


div.gallery_description
{
  padding: 10px;
  margin: 10px;
  font-size: 120%;
  text-align: center;
  background: white;
}

div.gallery
{
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  gap: 20px;
}

div.gal_thumb
{
  flex-basis: 150px;
  flex-grow: 1;
  max-width: 200px;
  background: white;
  text-align: center;
}

div.gal_thumb img
{
  display: block;
  width: 100%;
}

div.gal_photo
{
  width: 100%;
  max-width: 600px;
  background: white;
  margin: 20px auto;
  padding: 10px;
}

div.gal_photo img
{
  display: block;
  width: 100%;
  margin-bottom: 10px;
}

/* forms */
div.galleryformwrapper
{
  max-width: 800px;
}

div.galleryformwrapper form.datarec_form.gallerypic div.form_input_pair,
div.galleryformwrapper form.datarec_form.gallery div.form_input_pair
{
  display : grid;
  grid-template-columns: 1fr 3fr;
}


div.galleryformwrapper form.datarec_form.gallerypic div.form_input_pair div.label,
div.galleryformwrapper form.datarec_form.gallery div.form_input_pair div.label,
div.galleryformwrapper form.datarec_form.gallerypic div.form_input_pair div.input,
div.galleryformwrapper form.datarec_form.gallery div.form_input_pair div.input
{
  width: auto;
}

form.gallerypic div.label,
form.gallery div.label
{
  text-align: left;
}         


form.gallerypic div.input input,
form.gallerypic div.input textarea,
form.gallery div.input input,
form.gallery div.input textarea
{
  width: 100%;
}

form.gallerypic input[type=submit],
form.gallery input[type=submit]
{
  margin: 0;
}

div.form_input_pair.gallerypic div.input input,
div.form_input_pair.gallerypic div.input textarea 
div.form_input_pair.gallery div.input input,
div.form_input_pair.gallery div.input textarea 
{ width: 50% }

form.datarec_form.gallery
{
  max-width: 600px;
}
form.datarec_form.gallery div.form_input_pair
{
  grid-template-columns: 1fr 3fr;
}

@media (max-width: 500px)
{
  form.datarec_form.gallery div.form_input_pair
  { display: block }
}

/* delete ? query */
div.delete_query
{
  margin: 20px auto;
  padding: 20px;
  width: 90%;
  max-width: 600px;
  border: 1px solid red;
  border-radius: 10px;
}

div.delete_query form.delbutton
{
  margin: 20px 0;
}