/* Responsive page template - Block 3 Part 3 Responsive design */

/* PAGE GRID ******************************************************************/

body {
    display: grid;
    grid-gap: 1rem;

    /* Arrange in three rows: each as tall as their content */
    grid-template-rows: max-content max-content max-content max-content;

    /* Arrange in two columns:
     - right-hand-side a fixed width,
     - left-hand-side with the remaining space */
    grid-template-columns: 1fr;

    /* As a default, in case the screen is VERY wide,
     - limit page width to a sensible maximum
     - and centre the page in the screen */
    max-width: 90rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0rem 0.5rem;
}

p {
  margin: 0.5rem 0;
}

p.important {
  font-weight: bold;
}

/* Date details were confirmed on "Where" page */
p.confirmed {
    /*background-color: #f0f8ff;*/
    /*border: none;*/
    font-size: 0.8rem;
    padding-top: 0.1rem;
}

p.note {
    border: none;
    font-size: 0.8rem;
    padding-top: 0.1rem;
    text-align: right;
}


header {
  grid-row: 1;
  grid-column: 1 / -1;
}

nav {
    /* Place navigation across the top of the page:
     - in first row, from first to last column */
    grid-row: 2;
    grid-column: 1 / -1;
}

footer {
    /* Place navigation across the top of the page:
     - in last row, from first to last column */
    grid-row: -1;
    grid-column: 1 / -1;
}

ul.forsale {
    padding-left:1rem; 
    margin-bottom: 0.5rem;
}

ul.forsale li {
    list-style-type: disc;
}

section ul li {
  color: #000000;
  font-weight: normal;
  list-style-type: none;
  padding-bottom: 0.5rem;
}

section ul li.first {
  color: #007700;
  font-weight: bold;
}

section ul {
  padding: 0;
}

section ul hr {
  border-top: 1px solid #aaa;
  border-bottom: none;
  margin-bottom: 1rem;
}

/* main and aside will be placed in middle row */

/* MAIN GRID ******************************************************************/

main {
    display: grid;
    grid-gap: 1rem;

    /* Four evenly spaced columns */
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

main.forsale {
    /* Three evenly spaced columns */
    /* Reduced to 2 for better image size... */
    grid-template-columns: 1fr 1fr;
}


/* PAGE FORMATTING ************************************************************/

html * {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100%;
}

body {
    /* background-color: #ffc; */
    background-color: #f0f8ff;
}

main {
    /* background-color: #eee; */
    /*background-color: #ffffff;*/
}

footer {
    /*
    background-color: #444;
    color: #fff;
    */
    background-color: #f0f8ff;
    font-size: 0.8rem;
    text-align: center;
}

/* NAVIGATION *****************************************************************/

nav, footer ul {
    /* The ul element is semantic, indicating that the menu options are related,
     but we don't want it to display like a bulleted list */
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul {
  padding: 0;
}

nav li {
    /* Allow menu options to flow across the page and wrap */
    display: inline-block;

    /*background-color: #080; */
    /*border: 1px solid #fff;*/
    /*background-color: #ffffff;*/
    /*border: 1px solid #002158;*/
    padding: 0 0.5em 0 0;
}

nav a {
  text-align: center;
  /*color: #002158;*/
  font-weight: bold;
}

/* CONTENT ********************************************************************/

#menu a.active {
  background-color: #1177d1;
  color: white;
}

/* me28 - new rule */
a {
  color: #1177d1;
  text-decoration: none;
}

a:hover {
  color: #002158;
}

a.forsale {
  padding: 0.3rem;
  background-color: #002158;
  color: #ffffff;
  font-weight: bold;
  margin: 0 auto;
  border-radius: 0.5rem;
}
a.forsale:hover {
  background-color: #1177d1;
}

span.highlight {
  color: #ff0000;
}

div.button{
  display:flex;
  justify-content:center;
  padding-top: 0.5rem;
  padding-bottom: 1rem;
}

/* me28 - new rule */
h1 {
  font-size: 1.5rem;
  color: #002158;
  text-align: center;
  margin-bottom: 0;
}

/* me28 - new rule */
h2 {
  font-size: 1.2rem;
  color: #002158;
  text-align: center;
}

main section#Second-hand h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  text-align: center;
}


h3 {
/*  font-size: 1.2rem;*/
  color: #002158;
}

main section h3 {
  text-align: center;
}

/* Remove gap above section headings */
/*
h2:first-child {
    margin-top: 0;
}
*/

/* Make space around figures respond to container size */
figure {
    margin: 10%;
}
header img.responsive {
    width: 100%;
    height: auto;
}
/* 14/07/2023 */
section img.responsive {
    width: 100%;
    height: auto;
}

section img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

section img.facebook {
  vertical-align: middle;
}

/* Allow images to respond to container size */
.responsive {
    max-width: 100%;
    height: auto;
}

section.image picture {
  margin: 0.2rem 0;
}

/* Add a border around each section in the main element */
main section {
    background-color: #ffffff;
    border: 1px solid #aaa;
    padding: 1rem;
}

main section.image {
    background-color: #f0f8ff;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
}

div section.image {
    background-color: #f0f8ff;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
}

/* Add a border around each section in the main element */
section {
    background-color: #ffffff;
    border: 1px solid #aaa;
    padding: 0 1rem;
}

/* Used for RYA regions in "Where" page */
section.rya {
    background-color: #f0f8ff;
    border: none;
}

/* "Back to top" in "Where" page */
section.back {
    background-color: #f0f8ff;
    border: none;
    font-size: 0.8rem;
    padding-top: 0.1rem;
}

section.forsale {
  padding:0;
}

.hide {
  visibility: hidden;
  display: none;
}

.sold {
  text-decoration:line-through;
}

sup {
    font-size: 0.8em; 
    vertical-align: super;"
}

sub {
    font-size: 0.8em; 
    vertical-align: sub;"
}

/* Events table */
table {
  width: 100%;
  border-spacing: 0;
  border: 1px solid #eee;
}

table caption {
  margin: 0.5rem auto;
  text-align: left
}

table thead th {
  background: #dddddd;
  padding: 0.3rem 0.5rem;
}

table tbody td {
  padding: 0.3rem 0.5rem;
}

table tbody tr.highlight {
  color: #aa0000;
  font-weight: bold;
}

table tbody tr.special {
  color: #ffffff;
  background-color: #007700;
  font-weight: bold;
}

table tbody tr.wpnsa {
  /*color: #ffffff;*/
  background-color: #ffff4d;
  font-weight: bold;
}

table tbody tr:nth-child(2n) {
  background: #efefef;
}

table tbody tr.active {
  background-color: #FFB6C1;
  font-weight: bold;
}

table tbody tr.active td {
  border-color: #FFB6C1;
}

.youtube {
  aspect-ratio: 16 / 9;
  width: 100%;    
}

/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
https://css-tricks.com/responsive-data-tables/
*/
@media
only screen and (max-width: 30rem)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	tr { border: 1px solid #ccc; }

	td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 50%;
	}

	td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 0.3rem;
		left: 0.3rem;
		width: 45%;
		/*padding-right: 10px; */
    padding-right: 0.5rem;
		white-space: nowrap;
	}
}
/* MEDIA QUERIES TO REARRANGE ELEMENTS ****************************************/

/* Down to two columns of sections on smaller laptop screens */
@media screen and (max-width: 70rem) {
    main {
        grid-template-columns: 1fr 1fr 1fr;
    }
    main.forsale {
        grid-template-columns: 1fr 1fr;
    }
}

/* Hide sidebar column on tablets */
@media screen and (max-width: 50rem) {
    main {
        grid-template-columns: 1fr 1fr;
    }
    main.forsale {
        grid-template-columns: 1fr;
    }
}

/* Down to one columns of sections on smartphone screens */
@media screen and (max-width: 30rem) {
    main {
        grid-template-columns: 1fr;
    }
    main.forsale {
        grid-template-columns: 1fr;
    }

    body {
        /* Remove 8 pixel default margin around outside of page */
        margin: 0;
    }
}

/* Show menu options underneath each other on smaller smartphone screens */

@media screen and (max-width: 25rem) {
    nav li {
        display: block;
    }
  /*header picture {
    display: none;
  }*/
}

@media only screen and (max-height: 30rem) and (orientation: landscape) {
    main {
        grid-template-columns: 1fr;
    }

    body {
        /* Remove 8 pixel default margin around outside of page */
        margin: 0;
    }
}