* {box-sizing: border-box;}

body {margin: 0px; padding: 0px; background-color: #FFFFFF;}

/* Header and navigation start */

:root
{
  /* Declare colour variables */
  --headingColour: #000000;
}

 /* Borders for debugging
table, th, td {border: 1px solid white;}
*.logo {border: 1px solid blue;} */


/* Section start */

/* <h4> is embedded in the many old report pages.  Instead of re-visiting them all, ensure it has the same styling as <h2> (by which it is replaced) */
h4 {font-family: Verdana, Arial, Helvetica, sans-serif;}
h4 {font-weight: bold;}
@media screen and (min-width: 1000px)
{
  h4 {font-size: 1.2em;}
}
@media screen and (max-width: 999px)
{
  h4 {font-size: 1.1em;}
}

section {background-color: #FFFFFF; width: 60%; border-style: none; margin: auto; padding: 10px 20px 30px 10px;}
section.main p.smaller, section.main li {font-family: Verdana; font-size: 0.9em; color: #000000; font-weight: medium; }
section h4 a:link, section h4 a:visited, section h4 a:active, section h4 a:hover {color: var(--headingColour);border-bottom: 2px solid #B3B3B3} 
section.main p.smaller {font-size: 0.8em;}
@media screen and (max-width: 800px) /* If screen 800 pixels or less */
{
  section {padding: 10px 10px 30px 10px;}
  section.main p, section.main li {font-size: 1.0em;}
}
section a:link, section a:visited, section a:active, section a:hover {color: #000000; text-decoration: none; padding-bottom: 1px; border-bottom: 1px solid #B3B3B3; font-weight: bold}
section hr {height:1px;border-width:0;color: #999999;background-color: #999999}
section li {padding-bottom:4px}
/*  Section end */

/* Tables start */

/** Standard table used for results etc. **/

div.resultsTable table, table.prizeMoney, table.finalSnapShotLineUp {border: 1px solid #0000DD; padding: 0px; border-collapse: collapse; border-spacing: 0}
div.resultsTable th, table.prizeMoney th, table.finalSnapShotLineUp th {padding: 4px; background-color: #0000DD; color: #FFFFFF; font-family: Verdana; font-size: 0.9em; font-weight: bold;}
div.resultsTable th.left, div.resultsTable th.leftPCOnly, table.prizeMoney th.left, table.finalSnapShotLineUp th.left {text-align:left}
div.resultsTable th.right, table.prizeMoney th.right, table.finalSnapShotLineUp th.right {text-align:right}
div.resultsTable th.centre, div.resultsTable th.centrePCOnly, table.prizeMoney th.centre, table.finalSnapShotLineUp th.centre {text-align:centre}
div.resultsTable td, table.prizeMoney td, table.finalSnapShotLineUp td {padding: 4px; font-family: Verdana; font-size: 0.9em; font-weight: medium; color: #000000;}
div.resultsTable td.left, div.resultsTable td.leftPCOnly, table.prizeMoney td.left, table.finalSnapShotLineUp td.left {text-align:left}
div.resultsTable td.right, table.prizeMoney td.right, table.finalSnapShotLineUp td.right {text-align:right}
div.resultsTable td.centre, div.resultsTable td.centrePCOnly, table.prizeMoney td.centre, table.finalSnapShotLineUp td.centre {text-align:center}
div.resultsTable tr:nth-child(even), table.prizeMoney tr:nth-child(even), table.finalSnapShotLineUp tr:nth-child(even) {background-color: #FFFFFF}
div.resultsTable tr:nth-child(odd), table.prizeMoney tr:nth-child(odd), table.finalSnapShotLineUp tr:nth-child(odd) {background-color: #E5E5E5}
div.phoneOnly, div.phoneOnlyMedium {display: none;} /* Used in div.resultsTable */

/* Table display on a phone */
@media screen and (max-width: 800px) /* If screen 800 pixels or less */
{
  div.resultsTable th.leftPCOnly, div.resultsTable th.centrePCOnly {display: none}
  div.resultsTable td.leftPCOnly, div.resultsTable td.centrePCOnly {display: none}
  div.phoneOnlyMedium {display: initial;}
  div.phoneOnly {font-size: 0.8em; display: initial;}
}

/*** CBA udating all the finalSnapShotLineUp pages to specify widths so do it here ***/
table.finalSnapShotLineUp {width: 75%; margin: auto;}
@media screen and (max-width: 800px) /* If screen 800 pixels or less */
{
  table.finalSnapShotLineUp {width: 200%; margin: auto;}
}

/** Table used as a form **/
table.form {margin: auto; background-color: #f2f2f2; border: 1px solid black; padding: 0px; border-collapse: separate; border-spacing: 8px; font-family: Verdana; font-size: 0.9em; color: #000000; font-weight: medium;}
table.form input, table.form label, table.form select {font-family: Verdana; font-size: 1.0em; color: #000000; font-weight: medium;}
table.form input[type=button], table.form input[type=submit] {background-color: #D0D0D0;}
table.form input, table.form select {padding: 5px 5px; border-radius: 4px; border: 1px solid #ccc; }
table.form td {vertical-align: bottom;}
table.form input[type=checkbox]{width: 18px; height: 18px}

/** Table that encloses a photo on the Meeting Report page **/
table.reportPhoto {width: 60%; height: auto; margin: auto; background-color: #FFFFFF; padding: 0px; border-collapse: collapse;}
table.reportPhoto td {border: 2px solid black; border-spacing: 0px; vertical-align: bottom; text-align: center; font-family: Verdana; font-size: 0.9em; color: #000000; font-weight: medium;}
table.reportPhoto img {width: 100%; height: auto; display: block; margin: 0px}
@media screen and (max-width: 800px)
{
  table.reportPhoto {width: 100%;}
}

/** Padding columns in #sprintSearchForm and #rollofHonour **/
#sprintSearchForm td.paddingColumn, #rollofHonourForm td.paddingColumn {width: 20%}
@media screen and (max-width: 800px) /* If screen 800 pixels or less */
{
  #sprintSearchForm td.paddingColumn, #rollofHonourForm td.paddingColumn {width: 0%}
}
#sprintSearchForm input[type=submit], #rollofHonourForm input[type=submit] {width: 100%;}

/* Tables end */


/* Divs Start */

/** Photos and captions: Meeting report, Photo finish and Winners Gallery **/
div.photo, div.winnersGalleryPhoto, div.photoFinish, div.reportPhoto, div.reportPhotoNarrow, div.reportPhotoVeryNarrow, div.finalSnapshotPhoto {margin: auto; background-color: #FFFFFF; border: 0px}
div.winnersGalleryPhoto {width: 40%;}
div.photoFinish {width: 60%;}
div.reportPhoto {width: 60%;}
div.reportPhotoNarrow {width: 40%;}
div.reportPhotoVeryNarrow {width: 30%;}
div.finalSnapshotPhoto {width: 50%;}
@media screen and (max-width: 800px)
{
  div.winnersGalleryPhoto {width: 60%;}
  div.photoFinish {width: 100%;}
  div.reportPhoto {width: 100%;}
  div.reportPhotoNarrow {width: 100%}
  div.reportPhotoVeryNarrow {width: 60%;}
  div.finalSnapshotPhoto {width: 100%;}
}
div.photo img, div.winnersGalleryPhoto img, div.photoFinish img, div.reportPhoto img, div.reportPhotoNarrow img, div.reportPhotoVeryNarrow img, div.finalSnapshotPhoto img{width: 100%; height: auto; display: block;}
div.photo p, div.winnersGalleryPhoto p, div.photoFinish p, div.reportPhoto p, div.reportPhotoNarrow p, div.reportPhotoVeryNarrow p, div.finalSnapshotPhoto p {width: 100%; background-color:#545454; padding: 10px 5px; margin: 0px; text-align: center;font-family: Verdana; font-size: 0.9em; color: #FFFFFF; font-weight: medium;}

/* Force a vertical gap */
/* DAVE
div.smallGap {margin-top: 30px; margin-bottom: 0px;}
div.smallerGap {margin-top: 50px; margin-bottom: 0px;}
div.mediumGap {margin-top: 80px; margin-bottom: 0px;}
div.gap {margin-top: 100px; margin-bottom: 100px;}
*/

/* Enable horizontal scrollbar for contents */
div.horizScroll {overflow-x: auto;}

/* Tile used for listings */
div.tile {border-top:3px solid var(--headingColour);border-bottom:1px solid var(--headingColour);padding:5px 10px 10px 10px;background-color: #FFFFE0}
div.tile h4 {margin:0px 0px 15px 0px}

/* Divs End */

/* Clear fix hack */
.clearFix::after {content: ""; clear: both; display: table;}