@font-face {
    src: url('/pub/fonts/MR.woff2') format("woff2");
    font-family: 'MainFont';
    font-style: normal;
    font-weight: normal;
}
@font-face {
    src: url('/pub/fonts/MI.woff2') format("woff2");
    font-family: 'MainFont';
    font-style: italic;
    font-weight: normal;
}
@font-face {
    src: url('/pub/fonts/MB.woff2') format("woff2");
    font-family: 'MainFont';
    font-style: normal;
    font-weight: bold;
}
@font-face {
    src: url('/pub/fonts/TB.woff2') format("woff2");
    font-family: 'TitleFont';
    font-style: normal;
    font-weight: bold;
}
@font-face {
    src: url('/pub/fonts/TN.woff2') format("woff2");
    font-family: 'TitleFont'; 
    font-style: normal;
    font-weight: normal;
}
@font-face 
{
    src: url('/pub/fonts/DCF4.woff2') format("woff2");
    font-family: 'DropcapFont';
    font-style: normal;
    font-weight: bold;
}
@viewport {width: device-width;}

html
{
    --tkx-font-scale: 1;
    font-size: calc(15px * var(--tkx-font-scale));
    line-height: 1.33;
    -webkit-text-size-adjust: 113.33%;
    text-size-adjust: 113.33%;
}

*, *:before, *:after 
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;   
    box-sizing: border-box;    	
}
body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, 
blockquote, pre,a, abbr, acronym, address, big, cite, code, del, dfn, em, font, 
ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, 
ul, li, fieldset, form, label, legend, table
{
    border: none;
	margin: 0;
	outline: 0;
	padding: 0;
}
:focus { outline: 0; }
body, input, textarea 
{
    font-family: MainFont, Helvetica, "Helvetica Neue Light", "Helvetica Neue", Arial, sans-serif;
    font-size: 1.125rem;
}
body
{
	margin: 0;
	padding: 0;
	border: 0;
	overflow-y: scroll;
	overflow-x: hidden;
	background-color: #E0E0E0;
}
h1,h2,h3,h4,h5,h6 
{
	clear: both;
}

#content_wrapper
{
	max-width: 1140px;
	padding: 0 0;
	margin: 0 auto;
	color: #111;
	background-color: #FFFFFF !important;	
}

.mainHeader
{
	width: 100%;
	display: block;
	position: relative;
	text-align: right;
	margin: 0 0;
	padding: 0 0;
	background: #007BA7;
}
.mainHeader_img
{
	width: 100%;
	height: auto;
	margin: 0 0;
	padding: 0 0;
}
.mainHeader_txtContainer
{
    position: absolute;
	width: 100%;
	height: 30%;
	bottom: 0px;
	margin: 0 0;
	padding: 0 0;
	background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.75));
}
.mainHeader_txt
{
	float: right; 
	width: auto;
	position: absolute;
	margin: 0 0;
	padding: 0 0;
	right: 1rem;
	bottom: 1rem;
	text-align: right;
}
.mainHeader_title
{
    font-family: MainFont, Helvetica, "Helvetica Neue", Arial, sans-serif;  
    font-weight: bold;
    font-size: 1.4375rem;
	text-align: right;
    color: #FFF;
}
.mainHeader_title a
{
	color: #FFF !important;
    background-color: transparent;
}
.mainHeader_title a:focus, .mainHeader_title a:active, .mainHeader_title a:hover
{
    text-decoration: none;
    text-shadow: -2px -2px 0px rgba(128, 128, 128, 0.5), 2px 2px 0px rgba(0, 0, 0, 0.7);    
}
.mainHeader_desc
{
    font-family: TitleFont, "Helvetica Neue Condensed", "Arial Narrow";
	font-weight: bold;
	font-size: 1.0625rem;
	bottom: 0px;
    color: #FFF;
    letter-spacing: 1.0px;
}
.mainHeader_menu 
{
    color: #000;
    font-family: MainFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 1.375rem;
	background: #0095CA;
	margin: 0 0;
    padding: 0.5rem 0.125rem;
    border-top: 2px solid #444;
	border-bottom: 2px solid #444;
	text-align: center;
}
.mainHeader_menu a
{
    color: #000;
}
.mainHeader_menu a:hover, .mainHeader_menu a:active, .mainHeader_menu a:focus
{
    color: #FFF !important;
    text-decoration: none;
    text-shadow: -1px -1px 0px rgba(128, 128, 128, 0.5), 1px 1px 0px rgba(0, 0, 0, 0.7);
}
#colophon
{
	position: relative;
	clear: both;
}
.mainFooter
{	
	display: static;
	clear: both;
    font-family: TitleFont, "Helvetica Neue Condensed", "Arial Narrow";
	font-weight: bold;
	font-size: 0.9375rem;
    padding: 0.8rem 0;
	text-align: center;
	background-color: #0095CA;
	border-bottom: 2px solid #444;
	border-top: 2px solid #444;
	letter-spacing: 1px;	
}
#main_wrapper
{
	width: 100%;
	padding: 1.0rem 1.0rem;
}
.contentRow
{
	width: 100%;
	padding: 0 0;
	margin: 0 0;
	overflow: hidden;
}
h2
{
    font-family: TitleFont, "Helvetica Neue Condensed", "Arial Narrow";
	font-weight: bold;
	font-size: 1.25rem;
	text-transform: uppercase;
    margin-top: 1.5rem;
    margin-bottom: 1.0rem;
}
h2 a
{
	color: #111;
}
h3
{
    font-family: TitleFont, "Helvetica Neue Condensed", "Arial Narrow";
    font-weight: bold;
	font-size: 1.1875rem;
	text-transform: uppercase;
    margin-top: 1.25rem;
    margin-bottom: 1.0rem;
}
h4
{
    font-family: TitleFont, "Helvetica Neue Condensed", "Arial Narrow";
	font-weight: bold;
	font-size: 1.125rem;
	text-transform: uppercase;
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;
}
p
{
	text-align: justify;
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;
	hyphens: auto;
	hyphenate-character: "–";
}
img { width: 100%; }
a
{
    font-weight: bold;
	color: #007BA7;
    text-decoration: none;
}
a:focus, a:active, a:hover 
{ 
    text-decoration: underline;
    text-decoration-thickness: 2px;
}
a img
{
	outline: 2px solid #555;
  	outline-offset: -2px;
}
a img:focus, a img:active, a img:hover 
{
    outline: 3px solid #007BA7;
  	outline-offset: -3px;
}
.smallTitle 
{
    font-family: TitleFont, "Helvetica Neue Condensed", "Arial Narrow";
    font-size: 0.875rem;
	text-align: center;
	display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;	
	margin-top: 0.25rem !important;
	margin-bottom: 0.5rem !important;
}
.contactnotes
{
    font-family: TitleFont, "Helvetica Neue Condensed", "Arial Narrow";
	font-weight: normal;
	font-size: 1.0rem;
	text-align: right;
	letter-spacing: 0.5px;
}
.contactnotes1
{
    font-family: TitleFont, "Helvetica Neue Condensed", "Arial Narrow";
	font-weight: normal;
	font-size: 1.0rem;
	text-align: left;
	letter-spacing: 0.5px;
}
.contact_input
{
	width: 25%;
	padding: 0 0px;
    border: none;
    outline: none;
    font-family: MainFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
	font-style: italic;
    line-height: 25px;
    background-attachment: local;
    background-image: linear-gradient(to right, white 0px, transparent 0px), linear-gradient(to left, white 0px, transparent 0px), repeating-linear-gradient(white, white 24px, #BBB 24px, #BBB 25px, white 25px);
}
.contact_textarea
{
	width: 100%;
	height: 135px;
	padding: 0 0px;
    border: none;
    outline: none;
	overflow: hidden;
    font-family: MainFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-style: italic;
    line-height: 25px;
    background-attachment: local;
    background-image: linear-gradient(to right, white 0px, transparent 0px), linear-gradient(to left, white 0px, transparent 0px), repeating-linear-gradient(white, white 24px, #BBB 24px, #BBB 25px, white 25px);
}
.jswarning
{
    font-family: TitleFont, "Helvetica Neue Condensed", "Arial Narrow";
	font-weight: bold;
	font-size: 1.25rem;
	color: #ed1b2e;
	width: 100%;
	text-align: center;
	margin: 0.5rem 0.5rem;
	background: #ffffee;
}
.left_col
{
	float: left;
	text-align: right;
	margin: 0 1.2rem 0 0;
	flex: 200px 0 0;
}
.right_col, .right_col1 { text-align: justify; }

.left_col1
{
	float: right;
	text-align: left;
	margin: 0 0 0 1.2rem;
	flex: 200px 0 0;
}
.squareImage
{
	width: 170px;
	margin: 1rem 0rem;
}
.stampImage
{
	max-width: 150px;
	width: 100%;
}
*,
*:after,
*:before 
{
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
q
{ 
    font-style: italic;
}
q:before 
{ 
    content: "«";
    font-style: normal;
    font-size: 133%;
    line-height: 75%;
    padding-left: 5px;
    padding-right: 5px;
}
q:after 
{ 
    content: "»";
    font-style: normal;
    font-size: 133%;
    line-height: 75%;
    padding-left: 5px;
    padding-right: 5px;
}
.table9Col 
{
	display: block;
	float: left;
	width: 12.5%;
	padding: 1px 1px;
}
.table9ColRow 
{
  	width: 100%;
	display: block;
   	float: left;  	
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    container-type: inline-size;
}
.table9ColRow:after
{
	clear: both;
	content: "";
	display: block;
}
.table9Col img
{
    vertical-align: bottom;
	margin: 1px 1px;
}
#conash3D0 { display:none; }
.first_para
{
    margin-top: 0.5rem;
}
.first_para::first-line 
{
    font-family: TitleFont, "Helvetica Neue Condensed", "Arial Narrow";
    font-weight: bold;
    color: #111;
    letter-spacing: 1px;
}
.first_para::first-letter 
{
    float: left;
    font-family: DropcapFont, "Helvetica Neue Condensed", "Arial Narrow";
    font-size: 2.9rem;
    line-height: 36px;
    margin: 0 0;
    padding: 5px 10px 0px 0px;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.7);    
}
hr
{ 
    width: 40%; 
    text-align: center;
    border-top: 2px solid #444;
    margin-bottom: 1.0rem;
}
@media only screen and (max-width: 640px) 
{
	#main_wrapper { padding: 1.0rem 0.75rem; }
	.left_column, .right_column
	{ 
		width: 100% !important;
		padding: 0px 0px !important;
	}
}
@media only screen and (max-width: 480px)
{
	#main_wrapper { padding: 0.75rem 0.5rem; }
	.mainHeader_desc { display: none; }
	.left_column, .right_column
	{ 
		width: 100% !important;
		padding: 0px 0px !important;
		margin: 0 0 !important;
	}
	.left_col, .left_col1, .right_col, .right_col1
	{
		width: 100% !important;
		padding: 0px 0px !important;
		margin: 0 0 !important;
	}
    .squareImage { width: 100%; }
	.contactFormLeftCol, .contactFormRightCol
	{
		width: 100% !important;
		padding: 0px 0px !important;
		margin: 0 0 !important;
	}
}
@media only screen and (max-width: 360px)
{
	#main_wrapper { padding: 0.5rem 0.25rem; }
	.mainHeader_desc { display: none; }
	.left_col, .left_col1, .right_col, .right_col1
	{
		width: 100% !important;
		padding: 0px 0px !important;
	}
    .squareImage { width: 100%; }
	.contactFormLeftCol, .contactFormRightCol
	{
		width: 100% !important;
		padding: 0px 0px !important;
	}
}

@supports not (contain: inline-size) 
{
    @media only screen and (max-width : 1220px) { .table9Col { display: block; width: 14.2%; } }
    @media only screen and (max-width : 960px) { .table9Col { display: block; width: 16.6%; } }
    @media only screen and (max-width : 800px) { .table9Col { display: block; width: 20.0%; } }
    @media only screen and (max-width : 640px) { .table9Col { display: block; width: 25.0%; } }
    @media only screen and (max-width : 480px) { .table9Col { display: block; width: 33.3%; } }
    @media only screen and (max-width : 320px) { .table9Col { display: block; width: 50.0%; } }
    @media only screen and (max-width : 160px) { .table9Col { display: block; width: 100.0%; } }
}
@container (max-width : 1220px) { .table9Col { display: block; width: 14.2%; } }
@container (max-width : 960px) { .table9Col { display: block; width: 16.6%; } }
@container (max-width : 800px) { .table9Col { display: block; width: 20.0%; } }
@container (max-width : 640px) { .table9Col { display: block; width: 25.0%; } }
@container (max-width : 480px) { .table9Col { display: block; width: 33.3%; } }
@container (max-width : 320px) { .table9Col { display: block; width: 50.0%; } }
@container (max-width : 160px) { .table9Col { display: block; width: 100.0%; } }

::selection {
    background: #00AFEE;
}

@media (prefers-color-scheme: dark) {
	body 
	{
    	background-color: #303030 !important;
    	color: #EEE;
  	}
  	body, input, textarea { color: #EEE; }
    #content_wrapper
    {
    	background-color: #000000 !important;
        color: #EEE;
    }
    .mainHeader_menu { border-top: 2px solid #BBB; border-bottom: 2px solid #BBB; }
    .mainFooter { border-bottom: 2px solid #BBB; border-top: 2px solid #BBB; color: #000}
    a img { outline: 2px solid #AAA; outline-offset: -2px; }    
	.first_para::first-line { color: #EEE; }    
    hr { border-top: 2px solid #BBB; }
    .first_para::first-line { color: #EEE; }
    .first_para::first-letter { color: #EEE; text-shadow: 1px 1px 2px rgba(255,255,255,0.7); }
	.contact_input, .contact_textarea
	{
    	background-image: linear-gradient(to right, black 0px, transparent 0px), linear-gradient(to left, black 0px, transparent 0px), repeating-linear-gradient(black, black 24px, #BBB 24px, #BBB 25px, black 25px);
	}
	.signatureImg { filter: brightness(500%); }
}

.left_column
{
	float: left;
	width: 50%;
	text-align: justify;
	padding-right: 0.65rem;
}
.right_column
{
	float: right;
	width: 50%;
	text-align: right;
	padding-left: 0.65rem;	
}

.right_column .left_col
{
	float: right;
	text-align: left;
	margin: 0 0 0 1.2rem;
	flex: 200px 0 0;
}
.right_column .right_col
{
	text-align: justify;
}

.right_column .left_col1
{
	float: left;
	text-align: right;
	margin: 0 1.2rem 0 0;
	flex: 200px 0 0;
}
.right_column .right_col1
{
	text-align: justify;
}
.signatureImg
{
	width: 200px;
}
.contactFormLeftCol
{
	width: 17%;
	float: left; 
	text-align: right; 
	padding: 0 0.5rem 0 0;
}
.contactFormRightCol
{
 	width: 83%;
 	float: right; 
 	text-align: left;
 	padding: 0 0 0 0.5rem;
}
/* ==== floating nav (front pages) =========================================
   Deliberately separate from the blog's floating nav, which lives in
   blog/wp-content/themes/tkxtheme/style.css. This one has home + top +
   the font scaler only — no prev/next paging. */
.floating-nav
{
    position: fixed;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 100;
    background-color: #E0E0E0;
    /* px (not rem) so the bar itself does not grow/shrink with the font scaler */
    padding: 8px 8px;
}
.floating-nav a, .floating-nav a:hover, .floating-nav a:active, .floating-nav a:focus
{
    all: unset;
    background: none;
    border: none;
}
.floating-nav a img
{
    all: unset;
}
.floating-nav a img:hover, .floating-nav a img:active, .floating-nav a img:focus
{
    all: unset;
    outline: 2px solid #444;
    outline-offset: 2px;
}
/* line-height:0 keeps each 24px icon row tight, so the bar keeps a fixed
   height instead of growing with the (scalable) inherited line-height */
.floating-nav-icon
{
    line-height: 0;
    font-size: 0;
    margin: 6px 0px;
}
/* separates the +/- pair from the nav icons above: one full 24px cell */
.floating-nav-gap
{
    margin-top: 24px;
}
.floating-nav-font
{
    position: relative;
    display: block;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    color: #007BA7;
    /* the +/- are drawn as solid bars below, so the glyphs stay as accessible
       text but are not painted; title/aria-label carry the meaning */
    font-size: 0;
    line-height: 0;
    cursor: pointer;
}
/* 22x7 bars give the plus ~45% ink coverage of its 24x24 box, matching the
   measured coverage of the home/top icons above */
.floating-nav-font:before, .floating-nav-font:after
{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.floating-nav-font:before
{
    width: 22px;
    height: 7px;
}
#tkx-font-plus:after
{
    width: 7px;
    height: 22px;
}
.floating-nav-font:hover, .floating-nav-font:active, .floating-nav-font:focus
{
    outline: 2px solid #444;
    outline-offset: 2px;
}
.floating-nav-font:disabled
{
    opacity: 0.3;
    cursor: default;
    outline: none;
}
@media (prefers-color-scheme: dark) {
    .floating-nav { background-color: #404040; }
    /* the dark block's generic "a img { outline }" must not ring these icons */
    .floating-nav a img { outline: none; }
    .floating-nav a img:hover, .floating-nav a img:active, .floating-nav a img:focus { outline: 2px solid #BBB; outline-offset: -2px; }
    .floating-nav-font:hover, .floating-nav-font:active, .floating-nav-font:focus { outline: 2px solid #BBB; outline-offset: -2px; }
}
