/* Style sheet for www.pigdyke.co.uk - Pig Dyke Molly */

/* general */

/* For a white background with black text */
:root {
  --primary-bg-color: #ffffff;
  --primary-color: #000000;
  --reverse-bg-color: #000000;
  --reverse-color: #ffffff;
  --warning-color: #E7180B;
  --primary-link-color: #2d56b5;
  --greyed-bg-colr: #CCD1D1;
  --primary-link-hover-color: #0e45c7;
  --primary-link-visited-color: #5485f7;
  --reverse-bg-link-hover-color: #88a3e3;
  --fs-1: clamp(1.00rem, calc(0.98rem + 0.13vw), 1.13rem);;
  --fs-2: clamp(1.25rem, calc(1.20rem + 0.25vw), 1.50rem);
  --fs-3: clamp(1.56rem, calc(1.48rem + 0.44vw), 2.00rem);
  --fs-4: clamp(1.95rem, calc(1.81rem + 0.71vw), 2.66rem)
}


body 
{
  background: white; 
  /* background: url(images/circles_interlaced.png); */
  color: black; 
  /*font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; */
  font-family: Verdana, sans-serif;
  font-size: var(--fs-1);
  margin: 0 auto;
  width: calc(200px + 60%);
  max-width: 80rem;
  min-width: 300px;
}

@media (max-width: 500px)
{
  body { width: 100% }
}

table { border-collapse: collapse; }
table tr td { background: white; color: black }

p
{
  margin-top: 1ex;
  margin-bottom: 1ex;
}

h1, h2, h3, h4, h5
{
  padding: 2px;
  margin: 20px 0 10px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

h1, h2 { text-align: center }
h3, h4, h5 { text-align: left }



@media screen and ( max-width: 500px )
{
  h1, h2, h3, h4, h5
  {
    padding: 2px;
    margin: 5px 0 2px;
    text-align: center;
  }
  h1 { font-size: 120% }
  h2 { font-size: 115% }
  h3 { font-size: 110% }
  h4 { font-size: 105% }
  h5 { font-size: 100% }
}

h1 span.sub
{
  font-size: 60%;
}

.big-link {
  text-align: center;
  margin-bottom: 4rem;
}

.big-link a {
  font-size: 2rem;
}
h1{
  font-size: var(--fs-4);
  line-height: 1.2;
}

h2{
  font-size: var(--fs-3);
  line-height: 1.3;
}

h3{
  font-size: var(--fs-2);
  line-height: 1.4;
}

p, table, a, button, ul, li {
  font-size: var(--fs-1);
  line-height: 1.5;
}

a:link, a:visited, a:hover { text-decoration: none }
a:link {  color: var(--primary-link-color); }
a:visited { color: var(--primary-link-visited-color); }
a:hover { color: var(--primary-link-hover-color); }



main
{
  background: white;
  color: black;
  padding: 1.25rem;
}

 
main h1 { color: black; background: white }

/* any main page background */
.main 
{ 
  background: none;
  color: black; 
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
}

a.email /* for mailto: links */
{
  font-family: monospace; 
  font-size: 120%; 
}

.centretext { text-align: center; }

@media screen and ( max-width: 500px )
{
  .main { width: 100%; padding: 0;}
}

div.tail
{
  background: black; 
  color: white; 
  text-align: center; 
  border-top: 10px white solid; 
  border-bottom: 10px solid white; 
  width: 400px; 
  max-width: 90%; 
  margin: 10px auto
}

div.tail a { text-decoration: none; }


/*
 * text panels with white background. By default half page width on 
 *   wider screens
 */
div.textpanel
{
  display: inline-block;
  vertical-align: top;
  background: white;
  color: black;
  padding: 20px;
  width: 40%;
  width: calc(50% - 70px);
  border: 3px solid black;
  border-radius: 10px;
  margin: 10px;
  overflow: auto;
}

div.textpanel.fullwidth
{
  width: 90%;
  width: calc(100% - 66px);
}

@media screen and (max-width: 800px)
{
  div.textpanel
  {
    display: block;
    padding: 10px;
    width: 90%;
    width: calc(100% - 26px);
    margin: 10px auto;
  }

  div.textpanel.fullwidth
  {
    width: 95%;
    width: calc(100% - 10px);
  }
}

div.textpanel h2 { margin-top: 0; }

@media screen and (max-width: 500px)
{
  div.textpanel 
  { 
    padding: 2px; 
    width: 95%;
    width: calc(100% - 10px);
  }
}

.normal { background: white; color: black; 
          border: 3px solid black;
          padding: 10px; margin: 10px }


a.sign-in-button {
/*  font-size: var(--fs-1);
  border: none;
  cursor: pointer; */
  padding: 0.2rem 0.5rem;
  border-radius: 1rem;
  color: var(--primary-color);
  background-color: var(--primary-bg-color);
  text-decoration: none;
  font-size: 100%;
  font-family: Verdana, Arial, sans-serif;
  white-space: nowrap;
  height: min-content;
}

@media (max-width: 500px)
{
  a.sign-in-button { font-size: 100%;}
}

div.testmode
{
  background: red; 
  font-weight: bold; 
  font-size: 200%;
  text-align: center;
}

/* header */

header
{
  padding: 10px;
  display: flex;
  justify-content: space-between;
  background: black;
  color: white;

}

header h1 
{ 
  text-align: left;
  margin: 0;
  font-size: 160%;
  padding: 10px;
}

/* navigation menu */

nav.wide
{
  padding: 0;
  background: black;
  color: white;
}
nav.narrow { display: none; }

div.navitem,
div.navitem-special
{
  display: inline-block;
/*  float: left;  */
/*   width: 150px; */
  font-family: verdana, arial, sans-serif;
  font-size: 100%;
/*  font-weight: bold; */
  text-align: center;
  padding: 0 5px;
  background: black;
  color: white;
  margin: 0;
}

div.navitem-highlight
{ 
  display: inline-block;
/*   float: left; */
  font-family: verdana, arial, sans-serif;
  font-size: 80%;
/*  font-weight: bold; */
  text-align: center;
  padding: 7px;
  background: white;
  color: black;
}

div.navitem a
{
  text-decoration: none;
  color: white;
}

div.navitem-highlight a
{
  text-decoration: none;
  color: black;
}

div.navitem-special a
{
  text-decoration: none;
  color: #c00;
}

@media screen and ( max-width : 500px )
{
  nav.wide { display: none;}

  nav.narrow
  {
    overflow: auto;
    font-family: verdana, arial, sans-serif;
    display: block;
    background: black;
    color: white;
    border: 1px solid black;
    padding: 2px;
  }

  a.menuiconwrapper
  {
    display: block;
    margin-top: 20px;
    padding: 0;
    color: white;
    text-decoration: none;
  }

  div.menuicon
  {
    border: 1px solid black;
    text-align: center;
    height: 20px;
  }

  div.menuicon div.menuline
  {
    display: block;
    margin: 3px;
    height: 3px;
    width: 18px;
    background: white;
  }

  div.navitem, div.navitem-highlight, div.navitem-special
  {
    display: block;
    margin: 10px auto;
    width: max-content;
    min-width: 50%;
  }
} /* narrow screen */

iframe.youtube
{
  display: block;
  width: clamp(250px, 90%, 800px);
  margin: 30px auto;
  aspect-ratio: 16/9;
}

table.reqvars tr td 
{
  border: 1px solid #ccc;
  font-family: monospace;
  font-size: 80%;
  padding: 2px;
  vertical-align: top;
}


/* index page */
ul.updates
{
  margin: 0;
  padding: 0;
  background: white;
  color: black;
}

ul.updates li
{
  padding: 0;
  margin-left: 10px;
  margin-bottom: 10px;
  background: #eee;
}


/* programme */

h2.prog
{
  width: 90%;
  margin: 2px auto 2px;
  background: white;
  border-radius: 20px;
  color: black;
  text-align: center;
}


/* gallery */

/*div.thumb
{
  float: left;
  text-align: center;
  border: thin solid black;
  height: 150px;
  padding: 3px;
  margin-bottom: 3px;
}*/
 
img.thumb
{
  border: 1px solid white;
}

table.youtube tr td
{
  background: white;
  padding-right: 20px;

}


/* news */
table.news
{
  background:  white;
  border-collapse: collapse;
}

table.news tr
{
  margin-top: 10px;
}

table.news tr td
{
  background: transparent;
  padding: 10px;
  border-bottom: 5px solid black;
}

table.news tr td.date
{
  /* white-space: nowrap; */
  border-right: thin solid white;
  vertical-align: top;
}

table.news tr td h3
{
  margin: 0 0 10px;
  padding: 0;
  color: black;
  background: white;
  font-size: 120%;
}

div.shadowbox
{
  border-top: 1px #666 solid;
  border-left: 1px #666 solid;
  border-right: 5px #666 solid;
  border-bottom: 5px #666 solid;
  margin: 10px;
  padding: 5px;
  background: white;
}

@media screen and ( max-width: 500px)
{
  div.shadowbox { margin: 10px 0 }
}



h1.print, h2.print, h3.print, h4.print
{
  background: white;
  color: black;
}
form.inlinebutton { display: inline-block; margin: 0 10px;}

form.editbutton input[type=submit],
form.addbutton input[type=submit]
{
  background: linear-gradient(#efe, #afa)
}

form.spacedbutton { margin: 10px 0 }
form.delbutton input[type=submit]
{
  background: linear-gradient(white, #f66);
} 

/* error pages */
body.errorpage
{
  background: black; 
  color: white; 
  text-align: center;
}
body.errorpage h1
{
  margin: 20px 0;
}
div.errorpage
{
  width: 600px;
  max-width: 90%;
  border: thin solid white; 
  margin: 10px auto;
}
div.errorpage div.footer
{
  margin-top: 10px;
  background: white; 
  color: black; 
  padding: 5px
}
div.errorpage span.email
{
  display: block; 
  margin: auto; 
  max-width: 100%
}

/* footer */

footer 
{ 
  background: black;
  padding-bottom: 10px;
  font-size: 110%;
}

footer div.toprow, footer div.bottomrow
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 10px 0;
}

@media (max-width: 500px)
{
  footer div.bottomrow
  {
    grid-template-columns: 1fr;
  }
}

footer div.fourlinks
{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  margin: 10px 0;
}

footer a, footer a:visited, footer a[href^=mailto],
footer div.copy
{
  display: block;
  margin: auto;
  color: white;
  font-size: 110%;
}







/*********** message and error boxes ***********/
div.errorbox, div.msgbox
{
  width: max-content;
  max-width: 90%;
  margin: 10px;
  padding: 10px;
  background: white;
  font-family: sans-serif;
  border-radius: 10px;
}

div.errorbox
{
  border: 3px solid #900;
  color: #900;
  background: #fff4f4;
}
div.msgbox
{
  border: 3px solid #090;
  color: #090;
  background: #f4fff4;
}

/**************** general datarec form ***********/

form.datarec_form { background: #ccc; margin: 5px; padding: 10px; }
div.form_input_pair { display: grid; grid-template-columns: 1fr 5fr;    
  background: #ccc; margin: 10px 0;}
div.form_input_pair div.input input[type=text],
div.form_input_pair div.input textarea { width: 99% }
form.datarec_form input[type=submit] 
{ 
  background: linear-gradient(white, lightgreen)
}