﻿@media print {
	.no-print {display:none}
	.topNav {display:none  !important}
	.topBottomBorder {display:none}
	.sidebarLarge {display:none}
	.sidebarLeft {display:none}
	.sidebarRight {display:none}
	.img-with-text {display:none}
	#articleAuthor {display:none !important}
	#amp_floatingAdDiv{ display: none !important;} 
    img { width: 98%; height: auto; }
}

body { color: rgb(35,49,63); font-size: 20px; line-height:300%; font-family: 'Inter', 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; background-color: #FFFFF0; }

h1 {font-size: 36px; color: rgb(44,62,80); margin-bottom: 40px; font-weight: bold;  }
h2 {font-size: 28px; color: rgb(153, 0, 51); margin-bottom: 30px; font-weight: normal;  }
h3 {font-size: 24px; color: rgb(44,62,80); font-weight: bold;  }
h4 {font-size: 20px; color: rgb(153, 0, 51); font-weight: normal;  }
h5 {font-size: 18px; color: rgb(153, 0, 51); font-weight: normal;  }
h6 {font-size: 16px; color: rgb(153, 0, 51);  }
p { margin-bottom: 70px;  }

hr {color: rgb(211,84,0);}

footer { width: 75%; margin: auto; margin-left: 0;box-sizing: border-box; position: absolute; left: 0; padding: 50px;  }

table {font-style: normal; border-color: rgb(153, 45, 34); color: rgb(44,62,80); }
td {border-color: rgb(44,62,80);}

a:link {color: rgb(34, 142, 153);}
a:visited {color: rgb(44,62,80);}
a:active {color: rgb(34, 142, 153);}

summary { transition: background-color 0.3s ease; cursor: pointer; }
	summary:hover { background-color: rgb(34, 142, 153); text-decoration: underline;  }

li, li li { padding-bottom: 30px; line-height: 1.8; } 
ul { list-style-type: disc; padding-top: 10px; padding-bottom: 20px; margin-left: 20px; } 
ul ul { list-style-type: circle; padding-top: 15px; padding-bottom: 10px; margin-left: 20px; } 
ul ul ul { list-style-type: square; padding-top: 20px; margin-left: 20px; } 

.img-with-text img { max-width: 100%; max-height: 75vh; width: auto; height: auto; display: block; margin: 0 auto; }

div#adBanner     { width:100%; text-align:center; background-color:white; min-height: 90px; margin: 10px 0px }
div#adBox 		 { float:right; text-align:center; vertical-align:text-top; background-color:white; width:325px; padding-left:20px }
div.homeButtonHide  { float:left; width:120px; overflow:hidden; }
div#homeText     { float:left; padding:10px; width:100px; text-align:center; border: 1px solid brown; display:none;  }
div#searchBox    { float:left; height:40px; text-align:center; vertical-align:text-top; width:400px; padding:15px 0 5px 0 }
div#searchText   { float:left; padding:10px; width:100px; text-align:center; border: 1px solid brown; display:none;  }
div#socialMedia  { float:right; height:40px; width:275px; overflow:hidden; padding:10px 0 10px 0 }

.topBottomBorder { margin:auto; background-color:#FFFFF0; }
div.topButtons   { float:left; height:40px; width:100px; text-align:center; overflow:hidden; padding:20px 0 0px 0 }
div.bottomButtons { display: flex; flex-wrap: wrap; justify-content: center; font-size: medium; width: 100%; margin: 0 auto; text-align: center; }

div.container {
    width: 100%;
    margin: auto;
    background-color: #FFFFF0;
    display: block; /* remove flex */
}
div.containerTB { width: 80%; margin: auto; padding: 20px; background-color: white; }
.contentLarge { flex: 4; padding-left: 5%; padding-right: 1%; background-color: white; }
.content { flex: 3; padding: 0 1%; background-color: white; order: 2; }
.sidebarLarge { flex: 2; text-align: right; margin: auto; background-color: #FFFFF0; line-height: 100%; }
.sidebarRight { flex: 1; min-width: 325px; overflow: hidden; background-color: #FFFFF0; line-height: 100%; text-align: center; order: 3; }
.sidebarLeft {
    flex: 0.5;
    overflow: hidden;
    background-color: #FFFFF0;
    line-height: 200%;
    order: 1;
    font-size: medium;
}

.sidebarLeft a {
    display: block; /* Change from inline-block to block */
    padding: 10px 20px;
    margin: 10px 0 10px 5px;
    background-color: #FFFFF0;
    color: rgb(34, 142, 153);
    text-decoration: none;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.sidebarLeft a:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
    background-color: rgb(34, 142, 153);
    color: #FFFFF0;
}

div.columnsTwo { float: left; padding: 20px; margin: 0 20px 10px 0; width: 40%; border: 1px solid rgb(44, 62, 80); box-sizing: border-box; } 
	div.columnsTwo img { max-width: 100%; height: auto; display: block; object-fit: contain; }


div.columnsTwoNoBorder { float: left; padding: 5px; margin:0; width: 48% }
div.columnsThree { float: left; width: 28%; padding: 7px; border: 1px; border-style: solid; border-color: rgb(44,62,80); text-align: center; background-color: white; margin: 10px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s, color 0.3s; } 
	div.columnsThree:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); }
div.img-columnsThreeNoBorder { float: left; padding: 5px; margin: 5px; width: 230px }
div.columnsFour { float: left; padding: 5px; margin: 10px; width: 200px; border:1px; border-style: solid; border-color: rgb(44,62,80);text-align:center }
div.columnsSix { flex: 1 1 14%; max-width: 14%; min-width: 100px; height: 40px; border: 1px solid rgb(44,62,80); text-align: center; background-color: white; margin: 1%; padding-top: 10px; display: flex; align-items: center; justify-content: center; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s; } 
	div.columnsSix:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); }
div.imgFlex {   display: flex; }
	div.imgFlex img { width: 100%; max-height: 75vh;  height: auto; object-fit: contain; }

.img-flexibleTwo {
    	display: inline-block; width: 38%; margin: 0 3% 100px; text-align: center; padding: 25px; font-size: 26px; line-height: 1.8;
    	border: 1px solid rgb(44,62,80); vertical-align: top; float: left; 
		border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease; }
	.img-flexibleTwo:hover { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); transform: scale(1.03); }
	.img-flexibleTwo img { max-width: 100%;  max-height: 75vh;  width: auto; height: auto;  margin: 0 auto 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease; }
		.img-flexibleTwo img:hover { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); transform: scale(1.03); }
	.img-flexibleTwo * { display: block; width: 100%; text-align: center; }

.printVersion { background-color: #ffff00; }

.indexSection { background-color: #DDDDDD; font-weight: bold;}

.textLarge { font-size: large; }
.textMedium { font-size: medium; }
.textSmall { font-size: small; }

.floatStop { clear:both; }
.floatRight { float: right; margin: 10px 0 40px 20px; vertical-align: text-top; text-align:center; }
div.floatRightGrey { float: right; margin: 10px 0 40px 20px; vertical-align: text-top; text-align:center; background-color:#E0E0E0; border: 1px solid gray }
.floatLeft { float: left; margin: 0 20px 5px 0; vertical-align: text-top; text-align:center; }

#author { font-size:small; font-style:italic }

.topNav { display: flex; justify-content: center; align-items: center; padding: 10px; gap: 20px; flex-wrap: wrap; } 
	.topNav a { display: inline-block; margin-top: 30px; padding: 10px 20px; background-color: #FFFFF0; color: rgb(51, 51, 51); text-decoration: none; border-radius: 5px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease, transform 0.3s ease; } 
	.topNav a:hover { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); transform: scale(1.05); background-color: rgb(34, 142, 153); color: rgb(51, 51, 51); }

.pageTitleShrink { font-size: medium; font-family: Helvetica, Arial, sans-serif }

/*  Styles for new branding in January 2021  */
nav#DLTKtopborder { width:100%; line-height:100%; }
div#DLTKadBanner { width:100%; text-align:center; color: #000000; }
hr.DLTKtophr { clear:both; padding: 0px; margin: 1px; background-color: #FFFFF0; }
div#DLTKbranding { width:100%; margin: auto; background-color: #FFFFF0; text-align:center; }
#DLTKsitenav{display:flex;align-items:center;justify-content:space-between;padding:10px;background-color:#FFFFF0;}
#DLTKsitenavButtons{display:flex;align-items:center;gap:10px;}
	#DLTKsitenavButtons button{padding:10px 20px;background-color:#FFFFF0;color:rgb(51,51,51);border:1px solid rgb(44,62,80);border-radius:5px;cursor:pointer;box-shadow:0 4px 8px rgba(0,0,0,0.1);transition:box-shadow 0.3s ease,transform 0.3s ease;}
	#DLTKsitenavButtons button:hover{box-shadow:0 8px 16px rgba(0,0,0,0.2);transform:scale(1.05);background-color:rgb(34,142,153);color:#FFFFF0;}
#DLTKsitenavSearch{flex-grow:1;text-align:center;margin:0 20px;}
#DLTKsitenavSocial{display:flex;align-items:center;gap:10px;}
	#DLTKsitenavSocial a{margin-right:0;transition:background-color 0.3s;}
	#DLTKsitenavSocial a:hover{background-color:rgb(34,142,153);}
#rightSideBarLinks { font-size: medium; font-weight:normal; line-height: 200%; text-align:center; }
p.rightSideBarLinks { font-size: medium; font-weight:normal; line-height: 150%; text-align:center; }
hr.rightSideBarLine { margin: 5px 0px 5px 0px; clear: both; }

/* Updated CSS for Author section at the end of the article */
#articleAuthor { background-color: #FFFFF0; border: 1px solid rgb(44,62,80); padding: 20px; margin: 20px 0; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); font-size: 1.1em; clear: both; }
	#articleAuthor img { border-radius: 50%; max-width: 150px; height: auto; margin-bottom: 15px; float: right; margin-left: 20px; }
	#articleAuthor .thumbText { font-size: 1.2em; font-weight: bold; margin-top: 10px; text-align: center; }
	#articleAuthor .textMedium { overflow: hidden; }

/* CSS for StickyAds Javascript implementation */
#stickyHeader, #stickyFooter { }
#stickyContainer, #stickyMover { margin-top: 0; margin-bottom: 0; }
.stickyAdDiv { margin-top: 10px; }

/* Updated style for Features creating hover effects and rounded corners */ 
div#FeaturesInsert { width: 95%; margin-left: 10%; font-size: 20px; line-height: 2; text-align: left; } 
div#featuresColA, div#featuresColB { min-height: 225px; padding: 1%; margin: 0 2%; width: 40%; float: left; border: 1px solid rgb(51, 51, 51); border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); text-align: center; background-color: #FFFFFF; transition: transform 0.3s ease, box-shadow 0.3s ease; } 
	div#featuresColA:hover, div#featuresColB:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } 
img#featuresImgA, img#featuresImgB { max-width: 100%; height: auto; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); display: block; margin: 20px auto; transition: transform 0.3s ease, box-shadow 0.3s ease; } 
	img#featuresImgA:hover, img#featuresImgB:hover { transform: scale(1.1); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); }

/* mid sized screen adjustments */
@media only screen and (max-width: 1200px) {
    .sidebarRight, .sidebarLeft { display: none; }
}
