@import url('normalize.css');

/* regular/bold + italic */
@import url('fonts/PTSerif.css');

:root
{
  --bodybg: #efc;
  --mainbg: #cef;
  --accentbg: #090;
  --accentfg: white;
  --navbg: #090;
  --navfg: white;
}

body
{
  background: #f0f8d0;
  color: black;
  width: 100%;
  max-width: 1200px;
  margin: auto;
  font-family: 'PTSerif', serif;
}

h1, h2, h3, h4, h5, h6
{
  margin: 5px 0 5px;
  text-align: center;
}

h1 { font-size: 1.5rem }
h2 { font-size: 1.4rem; margin: 20px 0 }
h3 { font-size: 1.3rem; text-align: left; margin: 40px 0 10px }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

@media (max-width: 500px)
{
  h3 { margin: 10px 0 5px }
}
  
cite { font-weight: bold; font-style: italic }

p { margin: 0.5em 0 }

/*
 * Overall page layout
 *   +-----------------body-----------------------+
 *   | +-----------------header-----------------+ |
 *   | |      +------------nav----------+       | |
 *   | |      |                         |       | |
 *   | |      +-------------------------+       | |
 *   | +----------------------------------------+ |
 *   | +------------------main------------------+ |
 *   | |                                        | |
 *   | +----------------------------------------+ |
 *   +--------------------------------------------+
 */


/* contains nav information, full width, colour background or images */
header
{
  background: var(--accentbg);
  color: var(--accentfg);
  text-align: center;
}

header h1 
{ 
  font-size: 3rem;
  font-size: clamp(2rem, calc(2rem + 2vw), 4rem);
  margin: 0 auto 40px;
  padding: 20px 0 0 0;
}

header div.banner
{
  background: url('images/Swaledale1200.jpg') 50% 50%;
  height: 300px;
  font-size: 2rem;
}

@media (max-width: 600px)
{
  header div.banner { font-size: 1.5rem }
  header div.banner h1 { font-size: 2.5rem }
  head div.banner { height: 200px }
}

@media (max-width: 500px)
{
  header div.banner 
  { 
    background: url('images/Swaledale500.jpg') 50% 50%;
    height: 100px;
    font-size: 1.2rem;
  }

  header div.banner h1
  { 
    display: none;
    /*font-size: 1.2rem;
    padding: 0;
    margin: 0 0 5px;*/
  }
}


header img
{
  display: block;
  max-width: 100%;
  margin: auto;
}

/* contains nav buttons or icon, set positioning */
nav
{
  display: flex;
  justify-content: center;
  width: 100%;
  margin: auto;
  padding: 5px 0;
  text-align: center;
  background: var(--navbg);
  color: var(--navfg);
}

/* under nav header, all page content between header and footer */
main
{
  padding: 5px 5px 10px;
  background: var(--mainbg);
  color: black;
}


/* buttons for wide screen menu */
nav a
{
  display: block;
  font-size: 100%;
  text-decoration: none;
  margin: 5px 10px;
  width: max-content;
  padding: 0;
  background: var(--navbg);
  color: var(--navfg);
  text-align: center;
  font-family: sans-serif;
}

nav a:hover
{
  background: #7be;
  color: black;
}

nav a.selflink, nav a.selflink:hover
{
  border-bottom: 2px solid var(--navfg);
}



/* hide small menu and icon for wide screen */
nav.small { display: none }
div.menuicon { display: none }
div.menuiconcontainer { display: none }

/* Nav menu changes for small screen */

@media screen and ( max-width: 500px )
{
  nav { display: none }
  /* contains site name/logo and hamburger icon */
  nav.small 
  { 
    display: flex; 
    justify-content: space-between;
    padding: 0;
    min-height: 30px;
    font-size: 1.0rem;
    font-weight: bold;
  }

  nav.small.menu { flex-direction: column }

  nav.small div 
  { 
    text-align: left;
    margin-left: 3px;
    font-size: 1.3rem;
  }

  /* styles for dropdown menu */
  nav.small a 
  { 
    display: block;
    margin: 10px auto;
    width: 100%;
  }

  nav.small a.selflink
  {
    border: none;
    background: #030;
  }

  /* menu icon ("hamburger") and 'menu' text if shown */
  div.menuiconcontainer, div.menuiconcontainer a
  { 
    display: block; 
    float: right;
    height: 50px;
    background: none;
    color: white;
    text-decoration: none;
    font-size: 90%;
    margin-right: 3px;
  }


  div.menuicon
  {
    background: none;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    height: 20px;
  }

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

footer
{
  background: #030;
  color: white;
  text-align: center;
  font-family: sans-serif;
  padding: 5px 0;
  margin: 0;
}

footer a:link, footer a:visited
{ 
  color: white; 
  text-decoration: none; 
  background: green;
  padding: 0 10px;
  margin: 0 20px;
}

/* captioned images */
div.caption 
{ 
  font-family: 'Times New Roman', serif; 
  font-style: italic; 
  text-align: center;
  color: black;
  background: white;
  margin-bottom: 20px;
}

/* non-italic e.g. for poster info */
div.caption_ni
{
  text-align: center;
  color: black;
  background: white;
  margin-bottom: 20px;
}

/*********** message and error boxes ***********/
div.errorbox, div.msgbox
{
  width: max-content;
  max-width: 90%;
  padding: 10px;
  background: white;
  margin: 0 auto;
}

div.errorbox
{
  border: 2px solid #900;
  color: #900;
}
div.msgbox
{
  border: 2px solid #090;
  color: #090;
}

/**** text boxes ****/


div.panel
{
  background: white;
  width: 600px;
  max-width: 95%;
  border-radius: 5px;
  line-height: 1.5em;
}

div.panel.centred
{
  max-width: calc(100% - 20px);
  padding: 10px;
  margin: 10px auto;
}

div.panel.wide
{
  width: 800px;
}

/******************* buttons *******************/

/* this will apply to all forms and form-based buttons */
form { font-family: sans-serif }

form.centrebutton 
{ 
  width: max-content;
  margin-right: auto; 
  margin-left: auto 
}

form.spacedbutton
{
  margin-top: 10px;
  margin-bottom: 10px;
}

form.datarec_form input[type=submit]
{
  background: linear-gradient(white, #9e9)
}

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

form.datarec_form div.error
{
  color: red;
  font-style: italic;
  background: #fee;
  margin: 5px auto;
  text-align: center;
}

/* authentication form */
div.auth_form 
{ 
  width: 90%; 
  max-width: 500px;
  margin: 10px auto; 
  padding: 10px;
  background: #aca;
} 
div.auth_form input { width: 90%}
div.auth_form input[type="submit"] { width: max-content }
div.auth_form table tr td { padding: 0 2px }
div.auth_error { color: red; background: white; padding: 5px }

/* user signup and admin edit form */

form.user { background: #ded; margin: 10px; padding: 10px; }
form.user div.form_input_pair 
{ margin: 0; padding: 5px; background: none; }
form.user div.form_input_pair div.label 
{ display: inline-block; vertical-align: top; width: 30%;  }
form.user div.form_input_pair div.input { display: inline-block; width: 65%; }
form.user div.form_input_pair div.input input,
form.user div.form_input_pair div.input textarea { max-width: 100% }
form.user div.info 
{ 
  font-family: sans-serif;
  font-style: italic;
  color: green;
}

@media (max-width: 500px)
{
  form.user div.form_input_pair div.label,
  form.user div.form_input_pair div.input
  { width: 98% }
}

/********* images ***********/
figure
{
  width: 95%;
  margin: 10px auto;
}

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

figure img
{
  width: 100%;
}

figcaption
{
  font-style: italic;
  font-weight: bold;
  text-align: center;
}