/* The base template code - DO NOT DELETE */
@import url(https://static.moshtix.com.au/directory/uploads/content/BookingSkinCSS-2023-Template.css);

/* Background */
body {
  background-color: #ffffff; /* Update if you need a solid background */
  background-image: url(https://static.moshtix.com.au/directory/uploads/images/TNC%2030th%20Birthday%20%E2%80%94%20Moshtix%20[Background].png);
  background-repeat: no-repeat; /* Use no-repeat or repeat */
  background-position: center top;
  background-attachment: fixed;
  background-size: cover; /* Make auto auto if repeating tile */
}

/* Header */
#container > #header,
#header {
  background-image: url(https://static.moshtix.com.au/directory/uploads/images/TNC25%20LOGO%20LANDSCAPE.png);
  background-color: transparent; /* Update if you need a solid background or use word transparent */
  background-size: contain;
  background-position: center top;
  height: 440px; /* You need to add 40px to this to make the nav banner not cover the image */
  max-width: 1000px;
  aspect-ratio: 2.272727272727273; /* Header height + 40 divided by width */ 
}

[data-is-mobile="true"] > #wrapper > #container > #header,
[data-is-mobile="true"] #header,
#header {
  height: auto;
  width: auto;
  aspect-ratio: 2.5; /* Header height divided by width */ 
}

/* Footer */
#container > footer {
  background-color: transparent; /* Update if you need a solid background or use word transparent */
  background-image: url(https://static.moshtix.com.au/directory/uploads/images/TNC%2030th%20Birthday%20%E2%80%94%20Moshtix%20[Footer].png);
  background-position: center left;
  background-size: 100% auto;
  max-width: 1000px;
  height: auto;
  width: auto;
  aspect-ratio: 10;
  justify-content: flex-end; /* To align logo left use flex-start to align center use center. Also change alignment of text below */
}

#container > footer > #Poweredby-Logo {
  text-align: right !important; /* Change to center if using centered logo or left for left logo */
}		

/* Navigation */

/* Navigation elements */
header > nav > ul {
  text-align: right; /* change to center or left */
  background-color: #181818; /* If you need to change the navbar colour */
}

/* Navigation items - style links that look like buttons */
header > nav > ul > li > a,
header > nav > ul > li > a:active,
header > nav > ul > li > a:visited {
  color: #ffffff; /* If you need to change the text colour also change below border */
}

#nav_login {
  border-left: 2px solid #ffffff; /* If you need to change the text colour */
}

/* All button colours (excludes navigation) */
.button_orange, .button_green {
  background: ; /* DO NOT MAKE BLACK */
}

@media (max-width: 680px) {
  /* Mobile Header */
  #container > #header,
  #header {
    background-image: url(https://static.moshtix.com.au/directory/uploads/images/TNC%2030th%20Birthday%20%E2%80%94%20Moshtix%20[Header].png); /* Update if you need a different Header on Mobile */
  }

  /* Mobile Footer */
  #container > footer {
    background-image: url(https://static.moshtix.com.au/directory/uploads/images/TNC%2030th%20Birthday%20%E2%80%94%20Moshtix%20[Footer].png); /* Update if you need a different Footer on Mobile */
  }

}
/* End 680px media query */