/* ======== 190922 simplifying Consoc nav stuff ============ */

nav {
   display: block;
   margin: 0.5em 0;
   text-align: center;  /*  For align-right, override this in local style="" */
   list-style: none;
   }

/* Do we really need ul ?  Try without. Works, but no space is provided before or after the list; so put a margin in "nav". */
nav ul {
   display: block;  /*  This avoids the left indent usually given to a list, I found. */
   text-align; center;
   list-style: none;
   padding: 0;
   }

nav li {
   display: inline;
   text-align: center;
   background-color: rgb(0%,66%,0%);   /* Impression green is too light at 80%; CSS green is too dark at 50% */
   font-family: sans-serif;
   font-weight: bold;
   font-size: 9pt;
   margin: 0.5em 0 0 0.2em; /* air only above and left of box, to separate it from previous box */
   border-style: solid;
   border-width: 1px;
   border-color: white;
   padding: 0.1em 0.25em;  /* Air around the text within the box. Will my use of em rather than pt mean the airspace shrinks if @media shrinks text size? */
   }

nav .active {
   border-color: transparent;
   background-color: transparent;
   font-style: italic;
   color: black;
   }

nav li a {
   text-decoration: none;
   color: white;
/* note placement for making the <a> text white -- after the main list-nav section! */
   }

@media screen and (max-width: 414px) {
   nav li {
      font-size: 8pt;
      }
   }

@media screen and (max-width: 200px) {
   nav li {
      font-size: 7pt;
      }
   }


/* ======== flag (masthead) ============ */
/* 190908  Simplifying the masthead and making it adapt to small screens */
/* 190922 unchanged */

.masthead {
/*    font-family: Homerton, Helvetica, Arial, sans-serif; */
   font-family: sans-serif;
   font-weight: bold;
   font-size: 20pt;
   vertical-align: bottom;
   }
.masthead td {
   padding: 0
   }
.masthead img {
   height: 60pt;
/*    padding-right: 6pt;   190917 decrease because tablet screen was wanting to be 804px wide rather than 800px to fit flag in one line*/
   padding-right: 3pt;
   }

@media screen and (max-width: 444px) {
   .masthead {
      font-size: 15pt;
      }
   .masthead img {
      height: 30pt;
/*       height: 15pt; */
      }
   }


/* ======== tiles to advertise stories ============ */
/* 190927.f new, imitating Times website */
/* 191007.t Following Bart's advice, tile is now a .class rather than a <tag>.  My idea now is to treat each tile as a list item. */

.tile {
   display: block;
   padding: 0;   /* Places first tile flush left (note this is NOT part of "ul" style defn) */
   }

.tile li {
/*   display: block;  This suppressed the usual bullet for <li>, but Bart's suggn of list-style-type is better. */
   list-style-type: none;
   float: left;   /* Netsurf still needs this, despite the "flex" above */
   box-sizing: border-box;   /* 191010 Bart suggestion */
   width: 24%;               /* 191010 Up from 23% after Bart suggn */
   height: 2in;
   margin: 1pt;
   padding: 6pt;
   border: 1px dotted blue;
   background-color: #dfd;
   font: bold italic 11pt sans-serif ;
/*    overflow-x: hidden;   /* 191010 Bart says placing command here should clip width of pic that is too wide for the tile. Yes, success, except that it leaves no padding-right before box border. Better, set max-width in "img" definition.*/
   }

.tile a {
   text-decoration: none;
   color: black;
   }

.tile img {
   max-width: 100%;
   height: auto;
   max-height: 90pt;
/*    overflow-x: hidden;  This, I hope, will clip width of pic that is too wide for the tile */
/*    width: auto; */
/*    overflow: auto;      I intended this to repel text beside pic. No luck; I'll simply use a "br" in the PHP function */
   display: block;  /* Bart says this obviates the need for "br" (he points out that by default images display inline). */
   padding-bottom: 1em;
/* margin-bottom: 1em; */
   }

@media screen and (max-width: 444px) {
   .tile li {
      width: 49%;    /* 191011 Up from 45% after Bart suggn */
      }
   .tile img {
      max-height: 72pt;
      }
   }

@supports (display: grid) {
	ul.tile {
		display: grid;
		grid-gap: 6pt;
		grid-template-columns: repeat(auto-fit, minmax(2in, 1fr));
	}
	.tile li {
		width: auto;
		float: none;
		height: auto;
	}
}