@charset "UTF-8";
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* See "Chapter Website SetUp.txt"                                         */
/*     "Sample Color Schemes.txt"                                          */
/*     "Menu Setup.txt"                                                    */
/*     "http://www.w3schools.com/html/html_colorvalues.asp"                */
/*      chsample2 - darkblue                                               */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@import url(//fonts.googleapis.com/css?family=Droid+Serif:400,700italic,700);
:root {
	--myFontColor:navy;
	--mySkinColor:darkblue;
	--myImgBrdrColor:darkblue;
	--myH2Color:maroon;
	/* myFontColor should be any dark color and may differ from the dark mySkinColor */
	/* myFontColor:darkblue; navy; black; */
	/* mySkinColor:darkred; darkslateblue; darkblue; forestgreen; #CC7700; */
	/* myImgBrdrColor:darkblue; navy; black; */
	/* As of Nov. 2017, the use of var(--myXXX) IS NOT supported by old Internet Explorer; YES Edge, Chrome, Firefox, Safari, Android Browsers */
	/* and that is why each use of var(--myXXX) is preceeded with a workable attribute.*/
}
 body {
	background-color:lightgray;		/* for old browsers that don't support the --var usage */
	border:0px;
	color:navy;
	color:var(--myFontColor);
	font-family:Verdana, Geneva, Tahoma, sans-serif, serif;
	font-size:0px;				/* 0=removes top border */
	margin:0px auto;
	max-width:1366px;
	min-width:340px;			/* min smartPhone screen width */
	padding:0px;
	text-align:center;
}
/* Banner Container Styles - - - - - - - - - - - - - - - - - - - - - - - */
#bannerContainer {
	color:white;
	margin:0px auto;
	min-width:320px;
	text-align:center;
	width:100%;
}
#bannerAndMenu {
	background-color:darkblue;
	background-color:var(--mySkinColor);
    background-image: linear-gradient(to bottom, darkblue, lightblue);
	border-top:medium black solid;
	border-right:medium black solid;
	border-left:medium black solid;
	border-bottom:0px;
	font-size:16px;
	margin:0px;
	padding:.2%;
}
/* Content Styles - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.mainContentCenter,
.mainContentLeft,
.mainContentPicsPage,
.mainContentMinNews {
	background-color:lemonchiffon;	/* white, ivory, oldlace, antiquewhite, lemonchiffon, seashell, snow, whitesmoke, ghostwhite */
	border:medium black solid;
	clear:both;
	font-size:16px;
	margin:0px;
	max-width:100%;
	padding-left:3%;
	padding-right:3%;
}

.mainContentCenter a:link,
.mainContentLeft a:link,
.mainContentPicsPage a:link,
.mainContentMinNews a:link,
.mainContentCenter a:visited,
.mainContentLeft a:visited,
.mainContentPicsPage a:visited,
.mainContentMinNews a:visited {
	color:blue;
	text-decoration:underline;
}
.mainContentCenter a:hover,
.mainContentLeft a:hover,
.mainContentPicsPage a:hover,
.mainContentMinNews a:hover {
	background-color:antiquewhite;
	color:darkslategrey;
	transition:background .2s ease;
}
.mainContentCenter,
.mainContentPicsPage {
	text-align:center;
	margin:auto;
}
.mainContentMinNews,
.mainContentLeft {
	text-align:left;
}
.mainContentMinNews:before,
.mainContentMinNews:after,
.mainContentCenter:before,
.mainContentCenter:after,
.mainContentLeft:before,
.mainContentLeft:after {
	clear:both;
	content:" ";
	display:block;
}
p {
	margin:1%;
	vertical-align:top;
}
.mainContentLeft p,
p.paraLeft {
	text-align:left;
}
p.paraCenter {
	text-align:center;
}
p.adobe {
	clear:both;
	font-size:14px;
	font-style:italic;
	text-align:center;
}
p.firstLtr::first-letter {
	color:maroon;
	float:left;
	font-size:234%;
	font-weight:bold;
    margin-right:.1em;
    margin-top:-.2em;
	text-shadow: 2px 1px 2px darkgrey;
}
p.firstLtr::first-letter::after {
	clear:left;
}
.divCenter {
	margin:1% auto;
	padding:6px;
	text-align:center;
}
.divLine {
	padding:.5% 1%;
	text-align:center;
}
.divLine img {
	border-radius:6px;
}
/*  These .divFloatRightXXXXX styles are all the same, except:
	. divFloatRight - does NOT center on narrow screen
	. Kick1 and Kick2 - auto centers on narrow screens, see bottom at Narrow Device Styles
	. Suggest using divFloatRight when left is NOT an Ordered or Unordered list
	. Suggest using Kick1 or Kick2 when left is an Ordered or Unordered list
	. Suggest using Kick1 when right is < approx. width:192px
	. Suggest using Kick2 when right is >= approx. width:192px
	. Be sure to TEST and reTEST across several devices wide and narrow.
*/
.divFloatRightMinNews,
.divFloatLeft,
.divFloatLeftKick1,
.divFloatLeftKick2,
.divFloatRight,
.divFloatRightKick1,
.divFloatRightKick2 {
	clear:both;
	margin:.6% 3%;
	text-align:center;
}
.divFloatLeft,
.divFloatLeftKick1,
.divFloatLeftKick2 {
	float:left;
}
.divFloatRight,
.divFloatRightKick1,
.divFloatRightKick2,
.divFloatRightMinNews {
	float:right;
}
.divMyCurrDate {
	font-weight:bold;
	margin:auto;
	padding-top:4px;
	text-align:center;
	width:38px;
}
.divMyCurrDate p:first-child {
	background-color:darkred;
	border:2px navy solid;
	border-top-left-radius:6px;
	border-top-right-radius:6px;
	color:white;
	font-size:12px;
	margin:0px;
	padding:0px;
	text-shadow: 2px 1px 2px darkgrey;
}
.divMyCurrDate p:last-child {
	background-color:white;
	border:2px navy solid;
	border-top:0px;
	color:navy;
	font-size:12px;
	margin:0px;
	padding:0px;
}
.divSubMenu p {
	text-align:left;
	margin-left:12%;
}
.mainContentMinNews ol.pdf,
.mainContentMinNews ul.pdf {
	padding-left:12%;
}

ol,
ul {
	margin:.6% 3%;
	padding:0px 6px;
	text-align:left;
}

ol li {
	margin:2% 1%;
}

/* Interfears with Pagination
ul li {
	margin:1%;
} */

ol li ol,
ul li ol,
ol li ul,
ul li ul {
	margin:.6%;
}
ol li ol li,
ul li ul li {
	margin:.6% 1%;
}

ul.htm,
ul li.htm {
	list-style-image:url('https://szt-genealogy.us/graphics/icon16-htm.png');
	padding:0px 6px;
}
ul.doc,
ul li.doc {
	list-style-image:url('../graphics/icon16-doc.png');
	padding:0px 6px;
}
ul.pdf,
ul li.pdf {
	list-style-image:url('../graphics/icon16-pdf.png');
	padding:0px 6px;
}
ul.txt,
ul li.txt {
	list-style-image:url('../graphics/icon16-txt.png');
	padding:0px 6px;
}
ul.award,
ul li.award {
	list-style-image:url('https://szt-genealogy.us/graphics/icon16-award.png');
	padding:0px 6px;
}
/*  By default:
	1. Normal section images are NOT set to have a border,
	2. Picture section images are set to have a border; add class="brd1" to force a thin border.
*/
img,
img.brd0,
img.brd1 {
	margin:0px;
	max-width:100%;
	padding:0px;
}
img,
img.brd0 {
	border:0px;
}
img.brd1 {
	border:thin navy solid;
	border:thin var(--myImgBrdrColor) solid;
}
img.brd2 {
	border:2px navy solid;
	border:2px var(--myImgBrdrColor) solid;
}
hr {
	background-color:darkblue;
	background-color:var(--myImgBrdrColor);
	border:0px;
	border-top:medium navy solid;
	border-top:medium var(--myImgBrdrColor) solid;
	clear:both;
	padding:0px;
}
hr.hrLight,
hr.hrLightClear {
	background-color:gray;
	border:thin white dashed;
	border-style:none none dashed;
}
hr.hrLight {
	clear:none;
}
hr.hrLightClear {
	clear:both;
}
hr.hrRedWhtBlu {
	background:blue;
	background-image:linear-gradient (to bottom, red 33%, white 33%, white 67%, blue 67%, blue 100%);
	border:thin navy solid;
	border-radius:14px;
	clear:both;
	height:20px;
	width:96%;
}
h1,
h2,
h3,
h4,
h5 {
	font-style:italic; 
	font-weight:bold;
	margin:1% .6% .6% .6%;
	text-shadow: 2px 1px 2px darkgrey;
}
h1 span,
h2 span,
h3 span,
h4 span,
h5 span {
	white-space:nowrap;
}
h1 {
	color:navy;
	color:var(--myFontColor);
	text-align:center;
	font-size:24px;
}
h2 {
	color:maroon;
	color:var(--myH2Color);
	text-align:center;
	font-size:22px;
}
h3 {
	color:navy;
	color:var(--mySkinColor);
	text-align:left;
	font-size:18px;
}
h4,
h5 {
	color:navy;
	color:var(--myFontColor);
	text-align:center;
	font-size:16px;
}
h4.h4left,
h5.h5left {
	text-align:left;
}
/* Column Styles- - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

/* anchor Styles - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
a.email,
a.phone {
	color:blue;
	text-decoration:none;
	white-space:nowrap;
}
/* General Size Styles- - - - - - - - - - - - - - - - - - - - - - - - - */
.styleXXLarge,
.styleXXLargeBold,
.styleXXLargeMaroon,
.styleXXLargeMaroonBold {
	font-size:24px;
}
.styleXLarge,
.styleXLargeBold,
.styleXLargeMaroon,
.styleXLargeMaroonBold {
	font-size:22px;
}
.styleLarge,
.styleLargeBold,
.styleLargeMaroon,
.styleLargeMaroonBold {
	font-size:18px;
}
.styleSmall, 
.styleSmallBold, 
.styleSmallItalic,
.styleSmallMaroon {
	font-size:14px;
}
.styleItalic,
.styleSmallItalic {
	font-style:italic;
}
.styleSuperScript {
	font-size:12px;
	vertical-align:super;
}
.styleXXLargeBold,
.styleXXLargeMaroonBold,
.styleXLargeBold,
.styleXLargeMaroonBold,
.styleLargeBold,
.styleLargeMaroonBold,
.styleBold,
.styleMaroonBold,
.styleSmallBold {
	font-weight:bold;
}
.styleXXLargeMaroon,
.styleXXLargeMaroonBold,
.styleXLargeMaroon, 
.styleXLargeMaroonBold,
.styleLargeMaroon,
.styleLargeMaroonBold,
.styleMaroon,
.styleMaroonBold,
.styleSmallMaroon {
	color:maroon;
}
.styleBlue {
	color:blue;
}
.styleGreen {
	color:darkgreen;
}
/* Misc Styles- - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.styleNowrap {
	white-space:nowrap;
}
.styleClear {
	clear:both;
} 
.styleBrd1 {
	border:thin navy solid;
	border:thin var(--myImgBrdrColor) solid;
}
.styleBrd2 {
	border:2px navy solid;
	border:2px var(--myImgBrdrColor) solid;
}
.styleDate,
.styleLocation,
.styleName,
.stylePatriot,
.stylePlace,
.styleTime,
.styleTitle {
	font-weight:bold;
	white-space:nowrap;
}
.styleDate,
.stylePatriot,
.styleTime,
.styleTitle {
	color:maroon;
}
.stylePatriot {
	color:darkgreen;
}
.styleTitle {
	font-style:italic;
}
.styleShadow,
.MtgNext,
.BOMNext {
	font-weight:bold;
	text-shadow: 2px 1px 2px darkgrey;
}
.MtgNext {
	color:green;
	white-space:nowrap;
}
.BOMNext {
	color:navy;
	white-space:nowrap;
}
/* Sticky-menu - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.sticky-menu {
	background-color:#ffffe0;
	border-bottom:thin navy solid;
	border-bottom:thin var(--myImgBrdrColor) solid;
	line-height:22px;
	margin:0px;
	padding:0px; 
	position:relative;
	text-align:center;
	width:99.9%;
}
.sticky-menu a:hover {
	background-color:#e6e6e6;
	transition:background .2s ease;
}
.sticky-menu a img {
	border:0px;
}
.divAlert,
.divHoliday1,
.divHoliday2 {
	clear:both;
	width:98%;
}
.divAlert p, 
.divHoliday1 p,
.divHoliday2 p {
	border:medium darkgray dashed;
	border-radius:12px;
	display:inline-block;
	margin:auto;
	padding:6px 16px;
	text-shadow:2px 1px 2px lightgrey;
}
.divAlert p,
.divHoliday1 p {
	background-color:#ffffcc;
}
.divHoliday2 p {
	animation-name: divHoliday2;
	animation-duration: 6s;
	animation-iteration-count: 40;
	background-color:crimson;
	color:white;
}
@keyframes divHoliday2 {
	0%		{background-color:crimson}
	10%		{background-color:crimson}
	40%		{background-color:#355e3b}	/* Hunter Green */
	60%		{background-color:#355e3b}
	90%		{background-color:crimson}
	100%	{background-color:crimson}
}
/* Anniversary Date Styles - - - - - - - - - - - - - - - - - - - - - - - */
.divAnnivDate {
	clear:both;
	margin: .5% 3%;
}
.mainContentCenter .divAnnivDate a,
.mainContentLeft .divAnnivDate a {
	text-decoration:none;
}
.divAnnivDate p {
	background-color:navy;
	background-color:var(--mySkinColor);
	background-image:url('https://szt-genealogy.us/graphics/bkgrnd_deep_red_marbled.jpg');
/*	background-image:url('https://szt-genealogy.us/graphics/bkgrnd_deep_navy_marbled.jpg'); */
	border:medium silver solid;
	border-radius:12px;
   	color:white;
	font-family:Georgia, Times, "Times New Roman", serif;
	font-size:16px;
	font-weight:bold;
	margin:auto;
	padding:2px 10px 10px 10px;
	text-align:center;
	text-shadow: 2px 1px 2px darkgrey;
	white-space:nowrap;
}
.AnnivDateNum {
	font-family:Times, "Times New Roman", serif;
	font-size:38px;
	text-shadow: 2px 1px 2px darkgrey;
}
.AnnivDateYears {
	font-size:22px;
	position:relative;
	top:-7px;
}
/* Equal Height div columns- - - - - - - - - - - - - - - - - - - - - - - */
.divColContainer {
	clear:both;
	display:table;
	margin:auto;
	width:100%;
}
.divColContainer div {
	border-radius:12px;
	display:table-cell;
	vertical-align:middle;
}
.rightFormat {
	padding-left:1%;
}
.rightFormat img {
	border:thin navy solid;
	border-radius:8px;
}
/* Picture Page Styles - - - - - - - - - - - - - - - - - - - - - - - - - */
.divRowContainer,
.divPicsRow,
.divPicsEqHtRow {
	clear:both;
	margin:1%;
	width:100%;
}
.divPicsRow div {
	display:inline-block;
	margin:2% .5%;
	vertical-align:top;
}
.divPicsRow div {
	vertical-align:top;
}
.divPicsEqHtRow div {
	vertical-align:middle;
}
.divPicsRow div img,
.divPicsEqHtRow div img {
	border:thin navy solid;
	border:thin var(--myImgBrdrColor) solid;
	border-radius:12px;
	max-width:100%;
}
.divPicsRow div img.brdr0,
.divPicsEqHtRow div img.brdr0 {
	border:0px;
	max-width:100%;
}
.divPicsRow p,
.divPicsRow div p {
	margin:0% 1%;
	text-align:center;
}
/* Calendar Table Styles - - - - - - - - - - - - - - - - - - - - - - - - */
.calTable {
	background-color:silver;
	border:2px navy solid;
	border-collapse:collapse;
	font-size:12px;
	margin:auto;
	min-width:156px;
	padding-left:.5%;
}
.calTable th {			/* Days of the Week */
	background-color:maroon;
	border:0px;
	color:white;
	font-family:sans-serif, Tahoma, Geneva, Verdana;
	font-variant:small-caps;
	font-weight:normal;
	margin:auto auto;
	padding:0px; 
	text-align:center;
}
.calTable th.calHdr1,
.calTable th.calHdr2 {
	font-size:14px;
	font-weight:bold;
}
.calTable th.calHdr2 {
	color:gold;			/* Current Month of Year */
}
.calTable td {
	background-color:#EEE7D7;
	background-position:center;
	background-repeat:no-repeat;
	border:thin navy solid;
	color:navy;
	color:var(--myFontColor);
	font-weight:normal;
	text-align:center;
	vertical-align:middle;
}
.calTable td.calDayMtg {
	background-color:lime;
	background-image:url('https://szt-genealogy.us/graphics/choose.png');
	border:2px navy solid;
	font-weight:bold;
}
.calTable td.calDayMtgMissed {
	background-color:#FF6666; 	/* bittersweet red */
	background-image:url('https://szt-genealogy.us/graphics/choose.png');
	border:2px maroon solid;
}
.calTable td.calDayBOM {
	background-color:lightblue;
	background-image:url('https://szt-genealogy.us/graphics/choose.png');
	color:purple;
	font-weight:bold;
}
.calTable td.calDayCurr {
	background-color:#ffe680; 	/* light yellow */
	color:purple;
	font-weight:bold;
}
.calTable td.calDayFill {
	background-color:#ECEEEC;	/* aqua spring */
}
/* Fading Division Styles- - - - - - - - - - - - - - - - - - - - - - - - */
#Images img,
#Images p {
	text-align:center;
}
.divHidden {
	display:none;
	opacity:0;
}
.divVisible,
.divVisibleAnimate {
	display:block;
}
@keyframes divVisible {
	0%		{opacity:0;}
	100%	{opacity:1;}
}
.divVisibleAnimate {
	animation:divVisible 1.5s;
}
#divVisible img,
#divVisibleAnimate img {
	border:thin navy solid;
	border-radius:12px;
}
/* Line Separator Styles - - - - - - - - - - - - - - - - - - - - - - - - */
.divRibbon {
	clear:both;
	margin:auto;
	padding:0%;
	text-align:center;
}
.divRibbon a img {
	border:0px;
	border-radius:12px;
	height:18px;
	margin:0px;
	max-width:99%;
}
/* Responsive iFrame for Google Calendar - - - - -*/
.calendar-iframe-container {
	margin:0px;
	padding:1%;
	position:relative;
} 
.calendar-iframe-container iframe,   
.calendar-iframe-container object,  
.calendar-iframe-container embed {
    width:99%;
}
/* divInlineRow and Column Styles- - - - - - - - - - - - - - - - - - - - */
.divInlineRow {
	padding:1% 6%;
	text-align:left;
}
.divInlineRow div {
	display:inline-block;
	text-align:left;
	vertical-align:middle;
}
.colDate {
	font-weight:bold;
	white-space:nowrap;
	width:140px;
}
.colPresenter {
	color:maroon;
	font-weight:bold;
	padding-right:1.5%;
}
.colVideo {
	width:32px;
}
.colOrg {
	white-space:nowrap;
}
.colTopic {
	font-weight:bold;
}
.colByline{
	font-style:italic;
}


/* Legacy Styles ------------------------- */

blockquote {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

/* a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
} */
/* .html-external-link {
    color: -internal-light-dark(rgb(0, 0, 238), rgb(159, 180, 214));
    text-decoration: none;
}
.html-attribute-value {
    color: -internal-light-dark(rgb(26, 26, 166), rgb(242, 151, 102));
}
.html-attribute-name {
    color: -internal-light-dark(rgb(153, 69, 0), rgb(155, 187, 220));
}
.line-content {
    padding: 0px 5px !important;
}
.html-tag {
    color: -internal-light-dark(rgb(136, 18, 128), rgb(93, 176, 215));
}
.line-number {
    box-sizing: border-box;
    width: 31px;
    background-color: -internal-light-dark(rgb(240, 240, 240), rgb(60, 60, 60));
    user-select: none;
    text-align: right;
    color: -internal-light-dark(rgb(148, 132, 132), rgb(128, 128, 128));
    word-break: normal;
    white-space: nowrap;
    font-size: 9px;
    font-family: Helvetica;
    padding: 0px 4px !important;
    border-right: 1px solid rgb(187, 187, 187) !important;
} */


/* Footer Styles - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#footer {
	background-color:navy;
	background-color:var(--mySkinColor);
	border-top:0px;
	border-right:medium black solid;
	border-bottom:medium black solid;
	border-left:medium black solid;
	font-size:12px;
	margin:0px;
	padding:0px;
}
#footer p {
	color:white;
	margin:0px;
	padding:4px;
}
#footer a {
	color:white;
	text-decoration:underline;
}
#footer a:hover {
	background-color:transparent;
	color:yellow;
	text-decoration:underline;
}
/* Narrow Device Styles - - - - - - - - - - - - - */
@media screen and (max-width:689px) { 
.divFloatLeftKick2,
.divFloatRightKick2 {float:none;clear:both;max-width:96%;margin-left:auto;margin-right:auto}
.mainContentCenter,
.mainContentLeft,
.mainContentPicsPage,
.mainContentMinNews {padding-left:1%;padding-right:1%}
.divSubMenu p {margin-left:6%;max-width:260px}
.content{width: 79%}
}
/* @media screen is also in menuStyle.css */
@media screen and (max-width:499px) {
.divFloatLeftKick1,
.divFloatRightKick1 {float:none;clear:both;max-width:96%;margin-left:auto;margin-right:auto}
.divFloatRight {height:auto}
.styleXLarge,
.styleXLargeBold,
.styleXLargeMaroon,
.styleXLargeMaroonBold {font-size:18px}
.styleLarge,
.styleLargeBold,
.styleLargeMaroon,
.styleLargeMaroonBold {font-size:16px}
.mainContentMinNews,
.mainContentCenter,
.mainContentPicsPage,
.mainContentLeft {font-size:14px}
.content{width: 75%}
}
@media screen and (max-width:439px) {
.styleName,
.styleLocation,
.stylePlace,
.stylePatriot,
.styleTitle {white-space:normal}
}