/* Initialise the cursor to wait over the whole page */

/* DAVE
* {cursor: wait;}
*/

div.panel {background-color: #eeeeee; padding: 0px 10px 20px; border-radius: 8px;}
div.panel h3 {font-weight: bold; margin: 10px 0px 0px}
button.displayResults {background: var(--themeColour); color:#FFFFFF; border-radius: 40px; box-sizing: border-box; margin: auto; display: block}
form {width: 100%; margin auto;}
form select, form label, button {font-size: 1.0em}
form select {padding: 10px; border-radius: 10px; box-sizing: border-box; width:90%; margin-top: 5px; color:#000000; background-color: #FFFFFF; border: 1px solid #777777}
form table {width: 100%; margin auto; border-collapse: separate;}

/* The Results panel and contents */

span.tableCaption {font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; text-align: center} /* Display the caption outside of the table as the table may be empty and we don't want the resulting flattened box */
table.results {font-family: Verdana, Arial, Helvetica, sans-serif; background: #FFFFFF;margin:auto; border: 1px solid #777777; border-radius: 5px;}
/*table.results caption {font-weight: bold;} */
table.results th {color: #777777; text-align:left}
table.results th.place {text-align: center}
table.results .centre {text-align: center;}

@media screen and (min-width: 1000px)
{
  button.listEventsButton {margin: auto; padding: 10px 20px 10px;}
  .listEventsContents
  {
    min-width: 500px;
    font-size: 1.1em;
  }
  .listEventsContainer a, .listEventsContainer a:link, .listEventsContainer a:visited, .listEventsContainer a:active, .listEventsContainer a:hover
  {
    font-size: 0.9em;
  }
  table.results {width: 85%;}
  table.results PCOnly {display: block;}
  table.results th .PCOnly {display: inline;}
  span.tableCaption {font-size: 1.1em; padding: 10px 0px;}
  /* table.results caption {font-size: 1.1em; padding: 10px 0px;} */
  table.results th {font-size: 0.8em; padding: 10px 5px}
  table.results th.place {width: 10%;}
  table.results th.name {width: 40%;}
  table.results th.club {width: 25%;}
  table.results th.start {width: 10%;}
  table.results th.perf {width: 15%;}
  table.results td {font-size: 1.0em; padding: 5px 5px 10px;}
  table.results .phoneOnly{display: none;}

  div.panel div.smallGap {margin-top: 25px; margin-bottom: 0px;}
}

@media screen and (max-width: 999px)
{
  button.listEventsButton {margin: auto; padding: 8px 20px 10px;}
  .listEventsContents
  {
    min-width: 330px;
    font-size: 1.1em;
  }
  .listEventsContainer a, .listEventsContainer a:link, .listEventsContainer a:visited, .listEventsContainer a:active, .listEventsContainer a:hover
  {
    font-size: 0.8em;
  }
  table.results {width: 100%;}
  table.results .PCOnly {display: none;}
  span.tableCaption {font-size: 1.0em; padding: 0px 0px 10px;}
  /* table.results caption {font-size: 1.0em; padding: 0px 0px 10px;} */
  table.results th {font-size: 0.8em; padding: 5px 5px}
  table.results th.place {width: 15%;}
  table.results th.name {width: 55%;}
  table.results th.club {width: 30%;}
  table.results th.start {width: 15%;}
  table.results th.perf {width: 15%;}
  table.results td {font-size: 0.9em; padding: 5px 5px; vertical-align: text-top;}
  table.results .phoneOnly{font-size: 0.8em; display: initial;}

  div.panel div.smallGap {margin-top: 25px; margin-bottom: 0px;}
}

/* debug */
/* table.results, table.results th, table.results td {border: 1px solid black;} */

html {scroll-behavior: smooth;}

/* Style The Dropdown Button */
.listEventsButton
{
  background-color: var(--themeColour);
  color: white;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

/* All the following relates to the List Events "button" and the pop-up event list it generates */

/* The container <div> - needed to position the dropdown content */
.listEventsContainer
{
  position: relative;
  display: inline-block;
  margin: auto;
}

/* Dropdown Content (Hidden by Default) */
.listEventsContents
{
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.listEventsContainer a, .listEventsContainer a:link, .listEventsContainer a:visited, .listEventsContainer a:active, .listEventsContainer a:hover
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: black;
  padding: 5px;
  border: none;
  font-weight: normal;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.listEventsContents a:hover
{
  background-color: #d9d9d9d9;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.listEventsContainer:hover .listEventsButton
{
  background-color: var(--themeActiveColour);
}