@charset "utf-8";
/* CSS Document */

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, dl, dt, dd, ol, ul, li {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	box-sizing: border-box;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

body {
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	line-height: 1;
}

.header-item {
	grid-area: header;
	border: 2px darkblue solid;
	padding:  4px;
}
.content-item {
	grid-area: main;
	background-image: url("../images/OC1bkg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	border: 4px darkblue solid;
	padding:  10px;
}
.sidebar-item {
	grid-area: sidebar-1;
	background-color: rgb(235, 235, 211);
/*	align-content:normal;
	align-items:normal;
	align-self:auto;
	height: auto;
	position: relative;
 		top: 87px;
		margin: 0;
		align-content:normal,align-items:normal,align-self:auto,alignment-baseline:auto
 */	
}
.footer-item {
	grid-area: footer;
	background-color: rgb(190, 229, 229);
	border: 2px darkturquoise solid;
	padding:  4px;
}

.grid {
	display: grid;
	grid-template-columns: 13% 50% 20% 15%;
	grid-template-rows: auto;
	grid-template-areas: 
	 "header header header header"
	 "main main main sidebar-1"
	 "footer footer footer sidebar-1";
	gap: 4px 4px;
	padding-left: 10px;
	padding-right: 10px;
}

/* .contactgrid {
	display: grid;
	grid-template-columns: 30% 30% 40%;
	grid-template-rows: auto;
	grid-template-areas: 
	 "info toplabelL toplabelR"
	 "info label1 entry1"
	 "info label2 entry2"
	 "info label3 entry3"
	 "info label4 entry4"
	 "info label5 entry5"
	 "info label6 entry6"
	 "info label7 entry7"
	 "info label8 entry8";
	padding:  4px 3px 4px;
}
 */
 .contactgrid {
	display: grid;
	grid-template-columns: 45% 55%;
	grid-template-rows: auto;
	grid-template-areas: 
	 "toplabelL toplabelR"
	 "label1 entry1"
	 "label2 entry2"
	 "label3 entry3"
	 "label4 entry4"
	 "label5 entry5"
	 "label6 entry6"
	 "label7 entry7"
	 "label8 entry8"
	 "info info";
	padding:  4px 3px 4px;
}

.commentinfo-item {
	grid-area: info;
}
.toplabelL-item, .label1-item, .label2-item, .label3-item, .label4-item, .label5-item, .label6-item, .label7-item, .label8-item {
	justify-self: right;
/*	align-self: top; */
}
.label5-item {
	column-fill: auto;
}

.toplabelL-item {
	grid-area: toplabelL;
}
.toplabelR-item {
	grid-area: toplabelR;
}
.toplabelL-item, .toplabelR-item {
	font-size: 130%;
	color: mediumblue;
}

.label1-item {
	grid-area: label1;
}
.data1-item {
	grid-area: entry1;
}
.label2-item {
	grid-area: label2;
}
.data2-item {
	grid-area: entry2;
}
.label3-item {
	grid-area: label3;
}
.data3-item {
	grid-area: entry3;
}
.label4-item {
	grid-area: label4;
}
.data4-item {
	grid-area: entry4;
}
.label5-item {
	grid-area: label5;
}
.data5-item {
	grid-area: entry5;
}
.label6-item {
	grid-area: label6;
}
.data6-item {
	grid-area: entry6;
}
.label7-item {
	grid-area: label7;
}
.data7-item {
	grid-area: entry7;
}
.label8-item {
	grid-area: label8;
}
.data8-item {
	grid-area: entry8;
}

header {
  top: 0;
  left: 0;
  background-image: url("../images/OC1bkg.jpg");
  width: 100%;
}

table {
 border-collapse: collapse;
 border-spacing: 0;
 border: 0;
 width: 100%;
 padding: 4px 4px;
} 
.col1 {
  width: 80%
}
.col2 {
  width: 20%
}
caption {
  padding: 5px 0px;	
}

.noborder, .noborder tr, .noborder th, .noborder td { 
	border: none; 
	padding: 8px;
}
.stripedList {
	border-collapse: collapse;
}
.stripedList tr:nth-child(even) {
	background-color: white;
}

.stripedTable {
	border-collapse: collapse;
}
.stripedTable th {
	text-align: center;
	color: maroon;
	padding: 1px;
}
.stripedTable td {
	width: 86%;
}
.stripedTable td:nth-child(1) {
	width: 14%;
}
.stripedTable tr:nth-child(even) {
	background-color: #f2f2f2;
}

.stripedTOC{
	border-collapse: collapse;
	margin-left: 15px;
	width: 99%;
}
.stripedTOC th {
	text-align: left;
	padding: 1px;
}
.stripedTOC td {
	width: 90%;
}
.stripedTOC td:nth-child(1) {
	width: 10%;
}
.stripedTOC td:nth-child(2) {
	width: 80%;
}
.stripedTOC td:nth-child(3) {
	width: 9%;
	margin-right: 15px;
}
.stripedTOC tr:nth-child(even) {
	background-color: #f2f2f2;
}

.cntr {
	width: 75%;
	margin:0 auto;
}
blockquote, q {
	quotes: none;
	margin: 5px 20px 10px 20px;
	/* width: 65%; */
	background-color: lightcyan;
	font-style: italic;
	text-align: justify;
}
blockquote:before, blockquote:after,  q:before, q:after {
	content: '';
	content: none;
}
hr {
	width: 80%; 
	margin-left: auto; 
	margin-right: auto;
	margin-top: 0px;
   margin-bottom: 0px;
}
.sep {
	height: 1px; 
	color: white;
	/* box-shadow: 0 0.5px 0 white; */
	background-color: white; 
}
h1, h2, h3, h4, h5 {
	padding: 5px 20px;
	/* text-align: center; */
	/* font-variant: small-caps; */
}
h1	{
  	font-size: 145%;
	text-align: center;
}
h2	{
  font-size: 120%;
  text-align: center;
}
h3	{
	font-size: 110%;
	text-align: center;
}

/* https://www.hscripts.com/tutorials/css/ */
.overl {
/* text-decoration: underline; */
text-decoration: overline;
/* text-decoration: line-through; */
/* text-decoration: blink; */
}
.dkbgrd {
	background-color: darkblue;
	color: whitesmoke;
}
.bld{
	font-weight: bold;
	font-size: 105%;
}
.red {
	color: maroon;
}
.blue {
	color: darkblue;
}
.purple {
	color: purple;
}
.green {
	color: darkgreen;
}
.greenu {
	color: darkgreen;
	text-decoration: underline;
}
.cent {
	text-align: center;
}
ul, ol {
	/* list-style: circle outside none; */
	list-style-position: outside;
	padding-left: 20px;
}
ul {
	/* list-style: circle outside none; */
	list-style-type: circle;
}
ol {	/* list-style: circle outside none; */
	list-style-type: numeral;
}

ol li {	/* list-style: circle outside none; */
	list-style-type: numeral;
	/* font-weight: bold; */
}

.nav ul {
  list-style: none;
  display: inline-block;
  margin-left: 15px;
  padding: 3px;

}
.nav li {
  list-style-type: none;
  text-align: center;
  float: left;
}
.nav ul li a {
  text-decoration: none
}

a {
	margin: 0;
	padding: 3px;
	font-size: 75%;
	vertical-align: baseline;
	background: transparent;
}
.book {
	font-size: 100%;
}
.nav a {
  color: black;
  display: block;
  
/*  background-image: url("images/pill2.jpg") ;
  background-repeat:no-repeat;*/
  background-color: rgb(235, 235, 204);
  box-shadow: 3px 3px 3px gray;
  margin-bottom: 2px;
  margin-right: 10px;
  border-radius: 12px;
  border: 2px outset #06066b;
}

.nav ul li a:hover {
	background-color: white;	
	color: maroon;
  font-size: 75%;
  border: 2px outset #06066b;
  }
/* .nav ul li a .active {
  background-color: rgb(88, 6, 6);
  color: whitesmoke;
  border: 2px outset #EEEEFF;
  }
 */
  .nav .active {
  background-color: rgb(88, 6, 6);
  font-size: 80%;
  font-weight: bold;
  color: whitesmoke;
  box-shadow: 4px 4px 4px gray;
  border: 4px outset #06066b;
  }
/* .nav .current:hover, .nav .current:active { */
.nav .active.current {
	font-size: 85%;
	font-weight: bold;
	background-color: white;	
	color: maroon;
	border: 3px outset maroon;
}

iframe {
	position: absolute;
	/* top: 0; */
	/* left: 0; */
	width: 100%;
	height: 100%; 
	border: 0;
	/* background-color: rgb(250, 239, 250); */
}
.pct {
	padding: 10px;
   font-size: 95%;
}
.pi {
	padding: 10px 50px;
}
.pc {
	padding: 5px 15px;
	text-align: center;
}
.ptb {
	/* padding: 10px 25px; */
 	font-weight: bold;
	margin-left: 40px;
	margin-right: 40px;
   font-size: 110%;
}
.pml10 {
	margin-left: 10px;
}
.pml20 {
	margin-left: 20px;
}
.pml30 {
	/* This is often used with H3 and 30px at larger size font was too much*/
	margin-left: 10px;
}
.pml40 {
	margin-left: 40px;
}
.pfsmall {
   font-size: 80%;
}
.pf0 {
   font-size: 100%;
}
.ps5 {
   font-size: 105%;
}
.ps10 {
   font-size: 110%;
}
.ps20 {
   font-size: 120%;
}
.pb {
	font-weight: bold;
}
.pj {
	text-align: justify;
}
.pml {
	text-align: left;
}
.h3left {
	/* cant get h3 to move left except by imbeding style */
	text-align: left ! important;
	margin-left:10px ! important;
}

.ptt {
	/* padding: 10px 25px; */
	/* font-weight: bold; */
	margin-left: 40px;
	margin-right: 40px;
	text-align: justify;
   font-size: 100%;
}
.pmed {
	margin-left: 15px;
	margin-right: 10px;
	text-align: justify;
   font-size: 96%;
}
.pt {
	margin-left: 30px;
	margin-right: 10px;
	text-align: justify;
   font-size: 92%;
}
.ptn {
	margin-left: 15px;
}
.ptl {
	margin-left: 30px;
   font-size: 105%;
}
.ps {
	color: darkolivegreen;
	padding: 5px 5px;
	text-align: center;
   font-size: 85%;
}
.pf {
	color: darkolivegreen;
}

p a {
	color: royalblue;
}
p a:visited {
  color: blueviolet;
}
p a:hover, a:active, a:focus {
  color: red;
}


input[type="submit"] {
   font-size: 110%;
   border-color: royalblue;
	color: black;
	display: block;
	background-color: lightblue;
	box-shadow: 3px 3px 3px gray;
	margin-bottom: 2px;
	border-radius: 7px;
	border: 3px outset #EEEEFF;
   cursor: pointer;
}

input[type="submit"]:hover {
    background: tan;
}
input:required, textarea:required, input.invalid, textarea.invalid {
	background-color: lightcyan;
/*	border: double; */
}
input.valid, textarea.valid{
	background-color: white;
}

.error{
	display: none;
	margin-left: 10px;
}		
.error_show{
	/*color: red;  */
	margin-left: 10px;
}
.resp-container-large {
	position: relative;
	overflow: hidden;
	padding-top: 105%;
}
.resp-container {
	position: relative;
	overflow: hidden;
	padding-top: 81%;
}
.resp-iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%; 
	border: 0;
	background-color: rgb(250, 239, 250);
}

@media screen and (max-width: 500px) {
	.pct {
	  display: none;
	}
 }

/* change border colour to suit your needs
hr {
	height: 1px;
	border: 0;
	border-top: 1px solid #cccccc;
	margin: 1em 0;
	padding: 0;
}
 */


/* change colours to suit your needs */
/* ins {
	background-color: #ff9;
	color: #000;
	text-decoration: none;
}

	<style>
			
		
	</style>


.data1-item, .data2-item, .data3-item, .data4-item, .data5-item, .data6-item, .data7-item, .data8-item {
	
}

/* change colours to suit your needs */
/* mark {
	background-color: #ff9;
	color: #000;
	font-style: italic;
	font-weight: bold;
}


/* input, select {
	vertical-align: middle;
} 

@media screen{
}

      .cc {
         text-align: center;
      }
      .bluecent{
         color :darkblue;
         font-weight: bold;
         font-size: 115%;
         padding: 15px;
      }

}