/* Valid ormesby.css 31 DEC 2020 */
/* Variable Declarations */
:root {
	  --grey: 	   #333333;
	  --orange:    #ff6600;
	  --blue: 		 #99cccc;
		--lightblue: #ccffff;
	  --white: 		 #ffffff;
	  --red: 		 	 #ff0000;
}

/* Simple Reset */
*   {margin:0; padding:0; border:0; outline:0; text-decoration:none; font: inherit; box-sizing: border-box;}
ul  {list-style: none;}

body {
  	font-family: Calibri, Tahoma, Verdana, Arial, sans-serif;
  	color: var(--grey);
		background: var(--blue);
		font-size: 1.1em;}

		 
/*  STRUCTURE   */
/* - ORDER GRID ITEMS ON SMALL DEVICES - */

.wrapper {}
				 
.page {
		display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto 260px auto auto;
		gap: 2em;
		margin-top: 1em;
/*  border for testing  */
/*  border: 1px solid var(--orange);   */
		width: 96%;
		/* below centres page block */
		margin-left: auto;
		margin-right: auto;
}
@media screen and (max-width: 1024px) and (min-width: 700px) {.page {grid-template-rows: auto 300px auto auto;}}

/* - ROW 1 - */
header   {grid-column: 1 / 7; border: 2px solid var(--orange);}

/* - ROW 2 - */
.meetingtimes {grid-column: 1 / 3;  border: 3px solid var(--orange); padding: 2%; border-radius:1em;}
.meetingtimes ul li:first-of-type	 {font-size: 20px; font-weight: bold;}
@media screen and (max-width: 700px) and (min-width: 320px) {.meetingtimes {grid-column: 1 / 7;}}
@media screen and (max-width: 1024px) and (min-width: 700px) {.meetingtimes {grid-column: 1 / 4;}}

/* - ROW 3 - */
/*  border for testing  */
/*  border: 1px solid var(--orange);   */
.navhome {grid-column: 1 / 3;}
@media screen and (max-width: 700px) and (min-width: 320px) {.navhome {grid-column: 1 / 7; }}
@media screen and (max-width: 1024px) and (min-width: 700px) {.navhome {grid-column: 1 / 4;}}

.main   {grid-column: 3 / 7; grid-row: 2 / 4;}
@media screen and (max-width: 700px) and (min-width: 320px) {.main {grid-column: 1 / 7; }}
@media screen and (max-width: 1024px) and (min-width: 700px) {.main {grid-column: 4 / 7;}}

.main 	{padding: 0 150px;}
@media screen and (max-width: 1024px) and (min-width: 320px) {.main {padding: 0 5px; }}

.main p	{padding: 0.2em 0em; text-align: justify;}
.main h1, .main h2, figure {text-align: left;}

.navigation, .archivenavigationevents {display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 20px 10px;}
.archivenavigationevents       {padding: 0 20px ;}
@media screen and (max-width: 1024px) and (min-width: 320px) {.main p, .main h1, .main h2 {padding: 0;}}

.gallery					{display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem;}
@media screen and (max-width: 780px) and (min-width: 320px) {.gallery{display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.5rem;}}
@media screen and (max-width: 1024px) and (min-width: 781px) {.gallery{display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.5rem;}}

img 				 {max-width: 100%;}

/* - ROW 4 - */
footer   {grid-column: 1 / 7; border: 2px solid var(--orange); margin-bottom: 1em;}

/*  HEADERS AND FOOTERS   */
header, footer							 {padding: 0.3em 0; background: var(--white);}
header ul li, header ul li a, footer ul li, footer ul li a {display: inline;}
header ul li a, footer ul li a {text-decoration: underline;}
@media screen and (max-width: 1024px) and (min-width: 320px) {header ul li, header ul li a, footer ul li a {display: block; padding-left: 10px;}}
header ul li:first-of-type	 {font-family: SDScript; font-size: 15px;}
footer ul li:last-of-type		 {padding-left: 750px; font-family: SDScript, "Comic Sans MS"; font-size: 15px;}
@media screen and (max-width: 1024px) and (min-width: 320px){footer ul li:last-of-type		 {padding-left: 0; font-family: SDScript, "Comic Sans MS"; font-size: 15px;}}

/* - BUTTONS - */
.button1 {display: inline-block;
   background: var(--lightblue);
	 font-family: SDScript, "Comic Sans MS"; font-size: 0.9em ;
	 border: 2px solid var(--orange);
	 border-radius:7.3em;
	 text-align:center;
	 width:7.3em;
	 height:7.3em;
	 margin: 5px auto;
	 }
.button1 a {padding: 2em 0.5em 0 0.5em; line-height:1.3em;}
.button1:hover {box-shadow:0 0 2em var(--orange) inset;}

.button2 {display: inline-block;
   background: var(--lightblue);
	 border: 2px solid var(--orange);
	 text-align:center;
	 width:7em;
	 height:6em;
	 }
.button2 a {padding: 0.5em 0.5em 0 0.5em; line-height:1.2em;}
.button2:hover {box-shadow:0 0 2em var(--orange) inset;}

.navigationbox {display: inline-block; width: 100%; height: 150px;  border: 1px solid var(--orange); }

/* - SLIDESHOW in Meetingtimes - */
#myslideshow {margin: 0 auto; }

/* FONTS */
@font-face {
    font-family: 'SDScript';
    src: url('fonts/Gondola_SD-webfont.eot');
    src: url('fonts/Gondola_SD-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Gondola_SD-webfont.woff') format('woff'),
         url('fonts/Gondola_SD-webfont.ttf') format('truetype'),
         url('fonts/Gondola_SD-webfont.svg#GondolaSDRegular') format('svg');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'SDScriptSwash';
    src: url('fonts/Gondola_SD-Swash-webfont.eot');
    src: url('fonts/Gondola_SD-Swash-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Gondola_SD-Swash-webfont.woff') format('woff'),
         url('fonts/Gondola_SD-Swash-webfont.ttf') format('truetype'),
         url('fonts/Gondola_SD-Swash-webfont.svg#GondolaSDSwashRegular') format('svg');
    font-weight: normal;
    font-style: normal;}		
/* .SDScriptSwash		{font-family: SDScriptSwash, Tahoma, Verdana, Arial, Helvetica, san-serif;} */

p  {margin: 1em 0;}									

h1 {font-family: SDScript, "Comic Sans MS", Calibri, Tahoma, Verdana, Arial, sans-serif; font-size: 1.3em;}
h2 {font-family: SDScript, "Comic Sans MS", Calibri, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em;} 
h3 {font-family: SDScript, "Comic Sans MS", Calibri, Tahoma, Verdana, Arial, sans-serif;} 
h4 {font-family: SDScript, "Comic Sans MS", Calibri, Tahoma, Verdana, Arial, sans-serif;} 
h5 {font-family: SDScript, "Comic Sans MS", Calibri, Tahoma, Verdana, Arial, sans-serif;}

.center		{padding: 0 30px;}

/*  ANCHORS   */
a:link 		    {color: var(--grey); background: transparent;}	 			 	/* unvisited link */		
a:visited 	  {color: var(--grey); background: transparent;}				 	/* visited link */ 
a:hover 		  {color: var(--orange); background: transparent;} 				/* mouse over link */
a:active 		  {color: var(--grey); background: transparent;}				 	/* selected link */
a							{color: var(--grey); text-decoration: none; display: block; width: 100%; height: 100%;}

.spacer10 {height: 10px;}
.spacer30 {height: 30px;}

/*     SENDMAIL     */
.mailboxtext p    {margin: 15px 0 0 0;}
input, textarea 	{background: var(--white); width: 330px; padding: 5px;} 
textarea			 		{height: 200px;}
.border	 			 		{border: 1px solid var(--orange); padding: 3px 10px; margin-left: 0; width: 140px;}
.errors				 		{color: var(--red);}

/*   ODDS AND ENDS   */
/* .lefting  {float: left; shape-outside: circle(50%); margin: 0 10px 10px 0;} */
.lefting {float: left;}
.righting {float: right; shape-outside: circle(50%); margin: 0 0 10px 10px;}
.clear 		{clear: both;}

.merryxmas {margin-left: 5em;}
.bordertest {border: 2px solid var(--white);}

/* Media Examples
@media screen and (max-width: 361px) {.text {padding: 2px;}}	
@media screen and (max-width: 641px) {table.bracecamp {margin-left: 0; width: 100%; font-size: 0.8em;}}	
@media screen and (max-width: 1025px) {table.bracecamp {margin-left: 0; width: 100%;}}
*/