﻿body
{
/*	background-color: rgb(224,255,224);*/
	background-color: rgb(255,255,255);
	color: rgb(0,66,0);
	font-family: "Segoe UI",Arial,sans-serif;
	font-size: 1.0em; /*11pt;*/
	line-height: 1.25em;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 0;
	margin-bottom: 0;
	padding: 18px;
}

@media only screen and (max-device-width: 1080px) {
	body {
		margin: 10px;
		padding: 0px;
	}
}

a:link
{
	color: rgb(0,66,0); 
}

a:visited
{
;	color: rgb(102,153,204); 
	color: rgb(100,136,100); 
} 

a:active 
{
	color: rgb(255,51,0);
}

img
{
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px;
    box-shadow: 3px 3px 3px #888888; 
    vertical-align: top; 
    border: 1px solid;
    margin-right: 5px;
    margin-bottom: 5px;
}

p
{
	text-align: left;
}

p.list {
	line-height: 1.125em;
	margin-left: 20px;
	margin-top: 0.3em;
	margin-bottom: 0.3em;
}

p.list::before {
	content: "\25cf\00a0";
}

p.gallery {
	line-height: 1.125em;
	margin-top: 0.3em;
	margin-bottom: 0.3em;
	text-align: left;
}

@media only screen and (max-device-width: 1080px) {
	p.list {
		line-height: 1.125em;
		margin-left: 0px;
		margin-top: 0em;
		margin-bottom: 0em;
	}
}

.WidowOrphan {
	break-inside: avoid;
}

@media print {
/*	#MyTable, table, ul, ol {
	    break-inside: avoid;
	    break-before: avoid;
	}
	.SectionTitleOtherSpace, .SectionTitleOther {
		page-break-after: avoid;
	}
*/
}

li
{
	font-size: 1.0em;
	line-height: 1.25em;
	padding-bottom: 0.3em;
}

li::marker {
	font-size: 1.0em;
	vertical-align: middle;
}

ul.SquareIcon {
	list-style-image: url("images/Square15px.png");
	list-style-position: outside;
}


table, th, td
{
	background-color: white;
	border-collapse: collapse;
	border-color: black;
	border-style: solid;
	border-width: 1;
	color: black;
	font-size: 0.92em;
	line-height: 1.125em;
	max-width: 620px;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 4px;
	padding-bottom: 4px;
	page-break-inside: auto;
	table-layout: auto;
	text-align: center;
	vertical-align: top;
}

tr {
	break-inside: auto;
}


.MyMyTable td, .MyMyTable th {
	background-color: white;
	border-collapse: collapse;
	border-color: black;
	border-style: solid;
	border-width: 1;
	break-inside: auto;
	color: black;
	font-size: 0.92em;
	line-height: 1.125em;
	max-width: 620px;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 4px;
	padding-bottom: 4px;
	table-layout: auto;
	text-align: center;
	vertical-align: top;
}

.MyMyTable td {
	background-color: white;
	border-color: black;
	border-style: solid;
	border-width: 1;
	padding-right: 1.0em;
}

.MyMyTable td.Left, .MyMyTable th.Left {
	text-align: left;
	padding-left: 1.0em;
}


.MyMyTable thead, .MyMyTable th {
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: #707070;
	color: white;
	font-weight: bold;
}


.Money {
	text-align: right;
	padding-right: 0.5em;
}

#MyTable td {
	background-color: white;
	border-color: black;
	border-style: solid;
	border-width: 1;
	padding-right: 1.0em;
}

#MyTable td.Left, th.Left {
	text-align: left;
	padding-left: 1.0em;
}

#MyTable th {
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: #707070;
	color: white;
	font-weight: bold;
}

#MyTable table.NoBorder, td.NoBorder, th.NoBorder, tr.NoBorder {
	border-style: hidden;
}


h1, h2, h3, h4, h5, h6
{
	color: black;
	font-family: "Segoe UI",Arial,sans-serif;
	font-weight: bold;
}
h1
{
	font-size: 1.8em;
}
h2
{
	font-size: 1.30em;
}
h3
{
	font-size: 1.125em;
}
h4
{
	font-size: 0.92em;
}
h5
{
	color: rgb(204,51,51);
}
h6
{
	color: rgb(102,0,102);
}

.PageTitle, .PageTitleSpace {
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
	border-bottom: 1px;
	border-color: black;
	border-style: solid;
	color: black;
	font-family: "Segoe UI",Arial,sans-serif;
	font-weight: bold;
	font-size: 1.8em;
	padding-bottom: 0.35em;
	text-align: center;
}

.PageTitleSpace {
	margin-bottom: 0.5em!important;
	padding-bottom: 0.35em!important;
}

.SectionTitleFirst, .SectionTitleFirstSpace {
	color: black;
	font-family: "Segoe UI",Arial,sans-serif;
	font-weight: bold;
	font-size: 1.30em;
	padding-top: 0.5em;
}

.SectionTitleOtherSpace, .SectionTitleOther {
	border-top: 1px;
	border-left: 0px;
	border-right: 0px;
	border-bottom: 0px;
	border-color: black;
	border-style: solid;
	color: black;
	font-family: "Segoe UI",Arial,sans-serif;
	font-weight: bold;
	font-size: 1.30em;
	margin-top: 1.0em;
	padding-top: 0.5em;
}

.SectionTitleOtherSpace, .SectionTitleFirstSpace, .PageTitleSpace {
	padding-bottom: 1.0em;
}

@font-face {
    font-family: Goudy-LT-Handtooled;
    src: url('images/fonts/lt-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#WillowHeader
{
	color: rgb(0,66,0);
	font-family: Goudy-LT-Handtooled;
	font-size: 250%;
	font-weight: 400;
	line-height: 0.1em;
	margin: 0;
	letter-spacing: 2pt;
	padding: 18px;
}

#HailingPort {
	color: rgb(0, 66, 0);
	font-family: Arial, sans-serif;
	font-size: 1.2em;
	font-weight: bold;
	margin-top: 0em;
}
@media only screen and (max-device-width: 1080px) {
	#HailingPort {
		margin-top: 0.75em;
	}
}

/* style information for the title page */

#WillowTitlePage table, td, tr
{
	border-style: hidden;
	border-collapse: collapse;
	border-width: 0;
	border-right-style: none; 
	border-top-style: none; 
	border-bottom-style: none; 
	border-left-style: none; 
	table-layout: auto;
}

#MainPageHeadings {
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: left;
}

#SearchButton {
	font-size: 0.9em;
}

.header { grid-area: header; }
.systems { grid-area: systems; }
.search { grid-area: search; width: 10%;}
.info { grid-area: info; }
.OtherLinks {grid-area: OtherLinks;}
.PhotoGallery { 
	grid-area: PhotoGallery; 
	text-align: center;
}

.grid-container {
  display: grid;
  grid-template-areas:
    'header header search'
    'systems info PhotoGallery'
    'OtherLinks . PhotoGallery'
    '. . .';
  grid-gap: 20px;
  background-color: white;
  max-width: 800px;
  padding: 10px;
}
@media only screen and (max-device-width: 1080px) {
	.systems, .search, .info .PhotoGallery .OtherLinks { 
		width: 50%;
		grid-gap: 2px;
		padding: 0px;
	}
	.grid-container {
	 	display: grid;
	 	grid-template-areas:
	 	   'header header'
	 	   'systems search'
	 	   'systems PhotoGallery'
	 	   'info OtherLinks';
/*		max-width: 1080px;*/
	}
	#SearchButton {
		font-size: 1.0em;
	}
}


.Item1 { grid-area: Item1; }
.Item2 { grid-area: Item2; }
.Item3 { grid-area: Item3; }

.grid1x3, .grid1x3Fixed {
  display: grid;
  grid-template-areas:
    'Item1 Item2 Item3';
  grid-gap: 20px;
  grid-auto-columns: max-content;
  background-color: white;
  max-width: 600px;
  padding: 10px;
}

.grid1x3Fixed {
	grid-template-columns: 16em 16em;
}

@media only screen and (max-device-width: 1080px) {
	.grid1x3, .grid1x3Fixed {
	 	display: grid;
	 	grid-template-areas:
	 	   'Item1 Item2'
	 	   'Item3 .';
		max-width: 1080;
		grid-template-columns: auto auto;
	}
}

/* For use in expressing fractions that aren't part of the Unicode set */
.vulgar-frac {
    display: inline-block;
    font-family: inherit;
    font-size: x-small;
    font-weight: 500;
    letter-spacing: 0.1em;
}

.vulgar-frac sup {
	letter-spacing: normal;
    vertical-align: 0.46em;
}

.vulgar-frac sub {
	letter-spacing: normal;
    vertical-align: 0.0em;
}