/* Tykes News main stylesheet */

/* general */
@import url('normalize.css');

body
{
  background: white;
  color: black;
  font-family: 'DejaVu Sans', helvetica, Arial, sans-serif;
}

/* general omission of element on small screens */
@media screen and (max-width: 600px)
{
  .bigscreenonly { display: none; }
}
/* elements that show on small screen only */
@media screen and (min-width: 601px)
{
  .smallscreenonly { display: none; }
}


/* headings */
h1 { text-align: center; }
h2 { margin: 12px 0 6px; }
h3 { margin: 12px 0 3px; }
h4 { margin: 10px 0 2px; }

/* for any element that needs to start clear of floating pics */
.clear { clear: both; }

.redtext { color: red }

div.main    /* clears logo graphics, contains nave menu and content */ 
{
  clear: left;
}

/* restricted width general text */
div.textblock { margin: auto; width: 90%; min-width: 300px; max-width: 700px }

main
{
  padding: 20px 5vw;
  background: /* #ffffec */ white;
  color: black;
  min-height: 400px;
  max-width: 1500px;
  /* margin: 0 auto; */
}

@media screen and (max-width: 400px)
{
  main { padding: 10px }
}

table { border-collapse: collapse }

/* head.php - navigation menu */

div.headerimages { border-bottom: 1px solid #aaa; padding-bottom: 5px; }

div.navmenu_wide
{ 
  max-width: 1500px;
  padding: 2px;
  text-align: center;
  color: black;
}


div.navmenu_small
{
  display: none;
}

@media screen and ( max-width: 500px )
{
  div.navmenu_wide { display: none; }
  div.navmenu_small
  {
    display: block;
  }
}


a.navlink, a.navlink:visited
{ 
  display: inline-block;
  width: max-content;
  width: calc(max-content + 5px);
  color: black;
  background: #d8d8d8 linear-gradient(#f0f0f0, #bbb);
  margin: 3px 10px;
  padding: 2px;
  border-radius: 5px;
  text-decoration: none;
}

@media screen and (max-width: 600px)
{
  a.navlink, a.navlink:visited { margin: 3px; }
}

a.selflink, a.selflink:visited
{
  background: #333 linear-gradient(#666, black);
  color: white;
  border: none;
}

a.navlink:hover
{
  background: #eee linear-gradient(white, #ddd);
}

a.selflink:hover
{
  background: #666 linear-gradient(#666, #333);
  color: white;
}

/* mav menu link to Tykes News site */
div.tnlink
{
  max-width: 250px;
  margin: 100px auto 0;
  background: #d8d8d8;
  border: solid 1px black;
}

div.tnlink a
{
  display: block;
  text-decoration: none;
  color: black;
}


/* menu icon ("hamburger") */

div.menuicon { display : none }

@media screen and ( max-width: 500px )
{
  div.menuicon
  {
    display: block;
    float: right;
    text-align: center;
    height: 20px;
    margin: 10px 10px 0 0;
  }

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




/* small screen variants on nav menu */
@media screen and (max-width: 500px)
{
  a.navlink, a.navlink:visited, div.tnlink
  {
    display: block;
    padding: 2px;
    margin: 5px auto;
    width: 50%;
    text-align: center;
  }

}

img.tslogo { float: left; width: 15%; max-width: 120px; }
img.fflogo { vertical-align: top; max-width: 40%  }
img.ff1 { vertical-align: top; max-width: 30% }
h2.pageheading { color: #666; font-style: italic }

@media screen and ( max-width: 400px )
{
  img.ff1 { display: none }
  h2.pageheading { font-size: 120%; text-align: center; }
}


/* small screen adjustments */
@media screen and ( max-width: 500px)
{
  h1 { font-size: 120%; margin: 5px; padding: 0; }
  div.header_part img { width: 50% } 
  div.homepagetext
  {
    font-size: 95%;
    line-height: 1.3;
  }
}



/* logo and header */
div.logo_header
{
  text-align: center;
  vertical-align: middle;
}

div.header_part
{
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px;
}

div.header_part h1
{
  margin: 0;
}

div.logo_header img.header_part
{
  vertical-align: middle;
}

div.header_part i
{ 
  font-family: 'Times New Roman', serif;
  font-style: italic;
}

ul { padding: 0 0 0 20px; margin: 0; }
ul li 
{ 
  padding: 2px 0; margin: 0; 
}

table.noborders tr td,
table.noborders tr th
{
  border: none;
}


/* general info panel with border */
div.panel
{
  border: 1px solid black;
  border-radius: 10px;
  margin: 10px auto;
  max-width: 500px;
  padding: 10px;
  background: #ffe;
}


/* footer */
div.footer
{
  max-width: 1500px;
  margin: 10px 0 0;
  background: #eee;
  border-top: 1px solid #aaa;
  text-align: center;
  font-size: 80%;
}

div.footer1 /* slightly larger text for first line of footer */
{
  font-size: 120%;
  margin: 0 0 10px 0;
  padding: 5px;
}

/****** user forms and error boxes *****/
div.errorbox
{
  width: max-content;
  max-width: 95%;
  padding: 10px;
  margin: 10px;
  border: 2px solid red;
  border-radius: 10px;
  color: #900;
}

div.msgbox
{
  width: max-content;
  max-width: 95%;
  padding: 10px;
  margin: 10px;
  border: 2px solid #090;
  border-radius: 10px;
  color: #060;

}

div.form_input_pair
{ 
  max-width: 900px;
  background: #b8d0ee;
  margin: 3px 0;
  padding: 2px 1px;
  border-radius: 3px;
  display: grid;
  grid-template-columns: 1fr 3fr;
}

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

div.form_input_pair div.input input[type=text] { width: 98%; }

input[type=submit] 
{ 
  font-size: 90%; 
  height: 25px; 
  background: #ddd;
  background-image: linear-gradient(#eee, #ddd);
  border-radius: 5px;
}



/* events dates in table, each in its own 1-row table */

span.evt_date { white-space: nowrap; }
span.evt_date span.evt_dow { display: inline-block; width: 27px; }
span.evt_date span.evt_month 
{ 
  display: inline-block; 
  width: 25px; 
  padding: 0 2px;
}
span.evt_date span.evt_mday { display: inline-block; width: 20px; text-align: right; }
@media screen and ( max-width: 500px )
{ span.evt_date span.evt_dow { display: none; } }

/* edit page */
table.buttons { margin: 2px }
table.buttons tr td 
{ 
  padding: 2px 10px;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}
div.menu 
{
  border: 1px solid #ccc; 
  padding: 5px; 
  margin: 5px; 
  max-width: 200px;
}

form.mainsearch
{
  margin: 20px 0;
  background: #e0e8ff;
  padding: 2px 2px 10px;
  max-width: 600px;
}

a.menuitem
{
  display: block;
  width: 200px;
  text-align: center;
  color: black;
  background: #d8d8d8 linear-gradient(#e8e8e8, #ccc);
  margin: 10px 0;
  text-decoration: none;
}
div.menu h3 { margin: 10px 0 0; padding: 0; text-align: center}
div.formwrapper
{
  clear: right;
  margin: 5px;
  padding: 5px;
  border-radius: 5px;
  background: #e0f0ff;
}
form.inlinebutton
{
  display: inline-block;
  margin: 0 2px;
}
form.vspace 
{
  margin-top: 10px;
  margin-bottom: 10px;
}

form.delbutton input[type="submit"],
input.deletebutton
{
  background: #faa; 
  background: linear-gradient(white, #f99);
  color: black;
  border-radius: 7px;
}

form.spacedbutton { margin: 10px 0 }

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

div.mustlogin 
{ 
  margin: 10px; 
  padding: 10px; 
  border: 1px solid #999;
  border-radius: 10px; 
  width: 90%; 
  min-width: 300px; 
  max-width: 500px 
}

div.panel.userinfo
{
  width: 150px; 
  float: right; 
  padding: 5px; 
  font-size: 80%;
  border-radius: 5px; 
  background: #d8e8ff;
}



/* common venue details styles */

table.venuedetails tr td
{
  border: 1px solid #99c;
  padding: 2px 5px;
  vertical-align: top;
}

/*
table.venuedetails tr td:first-child
{
  white-space: nowrap;
}
*/

@media screen and ( max-width: 400px )
{
  table.venuedetails tr td 
  { 
    font-size: 90%; 
  }
}



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

/* contact page - application form */

/* hide the spambot trap */
form.editapp input.addr1 { display: none; }

@media screen and (max-width: 500px)
{
  form.datarec_form.editapp div.form_input_pair div.label,
  form.datarec_form.editapp div.form_input_pair div.input
  {
    display: block;
    width: 95%;
  }
}

/**** debug *****/
table.reqvars tr td
{
  font-family: monospace;
  
  border: 1px solid #cdc;
  padding: 1px;
  vertical-align: top;
}

div.testmode
{
  color: white; 
  background: #c00;
  border: 2px solid red;
  font-weight: bold;
  margin: 5px 0;
}