:root
{
  /* Declare colour variables */
  --themeColour: #004b84;
  --themeActiveColour: #0000CC;
  --unusedThemeColour: #CC0000;
}

/* Navigation start */

:root
{
  /* Declare colour variables0 */
  --headerBackgroundColour: var(--themeColour);
  --headerFontColour: #FFFFFF;
  --subMenuBackgroundColour: var(--themeColour);
}

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

/* Screen size independent styling */
nav {margin: 0; background: var(--headerBackgroundColour); padding: 0 15px; font-family: Verdana, Arial, Helvetica, sans-serif;}
nav * {box-sizing: border-box; padding: 0; margin: 0;}
nav a {text-decoration: none;}
nav table {width:100%; border-spacing: 3px;}
nav, nav td, nav a {color: var(--headerFontColour); font-weight: bold;}
nav ul {list-style-type: none;}
nav .logo {font-size: 20px; text-align: center;}
nav .item {padding: 10px; align-self: flex-end;}
nav table, nav tr, nav td {border-spacing: 0px; width: 100%; padding: 0; margin: 0}

/** Submenu items. The last styling inserts the down arrow used to activate the submenu **/
nav .submenu {display: none;}
nav .submenu-active .submenu {display: block;}
nav .submenu-active {background-color: var(--subMenuBackgroundColour); border-radius: 3px;}
nav .has-submenu i {font-size: 12px;}
nav .has-submenu > a::after 
{
    font-family: "Font Awesome 5 Free";
    font-size: 12px;
    line-height: 16px;
    font-weight: 900;
    content: "\f078";
    padding-left: 5px;
}

/* Desktop styling */
@media all and (min-width: 1000px)
{
  nav .desktop {display: inline;}
  nav .phone {display: none;}

  /* Logo */
  nav .logo {width: 55%; order: 0;  padding: 0px; }
  nav .resultsnet {display:inline-block; font-size: 1.4em; padding: 20px 0px 5px 0px}
  nav .tradScottishGames {display:inline-block; font-size: 0.7em; padding: 0px 0px 15px 0px}

  /* Menu */
  nav .menu li.item a {display: block; padding: 15px 5px;}
  nav .menu li.subitem a {padding: 15px;}
  nav .menu {display: flex; align-items: flex-start; flex-wrap: nowrap; background: none;}
  nav .item {order: 1; position: relative; display: block; width: auto;}
  nav .submenu-active .submenu {position: absolute; left: 0; top: 68px; background: var(--subMenuBackgroundColour);}
  nav .phoneMenuItem {display: none;}
  nav .submenu-active {border-radius: 0; z-index:2;}

  /* Without this, the top border of .phoneMenu .item is retained when maximising window on laptop */
  nav .phoneMenu li.item {border-top: none;}
}

/* Phone styling */
@media screen and (max-width: 999px)
{
  nav .desktop {display: none;}
  nav .phone {display: inline;}

  /* Logo */
  nav .logo {width: 90%; padding: 5px 0px 0px 0px;}
  nav .resultsnet {display:inline-block; font-size: 1.2em; padding: 8px 0px 0px 0px}
  nav .tradScottishGames {display:inline-block; font-size: 0.7em;  padding: 0px 0px 10px 0px}

  /* Menu */
  nav .menu li.item a {display: block; padding: 8px 5px 8px 5px}
  nav .menu li.subitem a {padding: 10px;}
  nav .menu {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
  nav .item {display: none;}
  nav .phoneMenuItem {order: 1; font-size: 20px;}
  nav .phoneMenu .item {order: 2; width: 100%; text-align: center; display: block; border-top: 1px black solid;}
}

/* End of Navigation */

/* Headers, section, para and gaps */
 
h1, h2, h3, p {font-family: Verdana, Arial, Helvetica, sans-serif;}
h1, h2, h3 {font-weight: bold;}
p {font-size: 1.0em;}

@media screen and (min-width: 1000px)
{
  h1 {font-size: 1.4em;}
  h2 {font-size: 1.2em;}
  h3 {font-size: 1.1em;}
  section.main {width: 60%;}
  div.smallGap {margin-top: 25px; 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;}
}

@media screen and (max-width: 999px)
{
  h1 {font-size: 1.3em;}
  h2 {font-size: 1.1em;}
  h3 {font-size: 1.0em;}
  section.main {width: 95%;}
  div.smallGap {margin-top: 10px; margin-bottom: 0px;}
  div.smallerGap {margin-top: 25px; margin-bottom: 0px;}
  div.mediumGap {margin-top: 50px; margin-bottom: 0px;}
  div.gap {margin-top: 70px; margin-bottom: 100px;}
}

/* End of Headers, section and gaps */

/* Footer */

footer {text-align: center; background-color: #595959; width: 100%; margin: 0px; padding: 0px}
footer table {padding: 0px; margin-bottom: 10px; border-spacing: 0; width: 100%;}
footer td.centre {width: 100%; font-family: Verdana; font-size: 0.8em; font-weight: normal; color: #FFFFFF; text-align: center; margin: 0px; padding: 5px; vertical-align: middle;}
footer td.top {padding: 20px 0px 10px}
footer td.bottom {padding: 10px 0px 20px}
footer a:link, footer a:visited, footer a:active, footer a:hover {color: #FFFFFF; text-decoration: none; font-weight: bold}

/* End of Footer */