/*
DevelopersHome.com style sheet. Light mode
(c) 2021 DevelopersHome.com. All rights reserved.
*/

html {
	font-size: 1.1em;
}

body {
	background-color: #f4f4f4;
	margin: 0;
	font-family: "Times New Roman", serif;
/*	font-size: 110%;*/
/*	overflow-y: scroll;*/ /* Note: When hamburger icon is clicked, value of overflow can be changed. */
}

img {
	border: 0;
}

td, th {
	padding: 0; /*5px;*/
}

table[border="1"] td, table[border="1"] th {
	padding: 5px;
}

a {
	color: blue;
}
a:visited {
	color: gray;
}
a:hover, a:active, a:focus {
	color: red;
}

table#lTableOutterHomepage {
	width: 100%; /*1004px;*/
/*	max-width: 1366px;*/
	margin-left: auto;  /* Center position */
	margin-right: auto;  /* Center position */
	border-spacing: 0;
}

table#lTableTopHomepage1 {
	width: 100%;
	border-spacing: 0;
	background-color: #BFCFFF;
}

table#lTableTopHomepage1 a {
	text-decoration: none;
	color: black;
}
table#lTableTopHomepage1 a:visited {
	color: black;
}
table#lTableTopHomepage1 a:hover, table#lTableTopHomepage1 a:active, table#lTableTopHomepage1 a:focus {
	color: yellow;
}

table#lTableTopHomepage2, table#lTableCenterHomepage {
	width: 100%;
	border-spacing: 0;
}

tr#topImageRowHomepage {
	display: none;
}

table#lTableOutter {
	width: 100%; /*1004px; 780px;*/
/*	max-width: 1366px;*/
	margin-left: auto;  /* Center position */
	margin-right: auto;  /* Center position */
	border-spacing: 0;
}

div#topBox {
	width: 100%;  /* for "position: fixed" */
	-webkit-transition: top 0.5s;
	-o-transition: top 0.5s;
	-moz-transition: top 0.5s;
	transition: top 0.5s;
	background-color: #302b27;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
	margin-bottom: 25px;
/*	z-index: 150; */
}

table#lTableTop1 {
	width: 100%;
	border-spacing: 0;
	line-height: 0;
}

td#imgTop2bBox {
	width: 100%;
	text-align: right;
	padding-right: 20px;
}

div#imgTop3aBox, div#imgTop3bBox {
	display: none;
}

/* div#mainTopCell {
}*/

div#menuTopBtnBox {
	padding: 5%;
	text-align: right;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}

div#mainCenterCell {
	padding-top: 0;
	padding-right: 25px;
	padding-bottom: 25px;
	padding-left: 25px;
	background-color: white;
	overflow: auto;
}

div#mainCenterCell p img {
	max-width: 100%;
	height: auto;
}

h1 {
	font-size: 1.7rem;
}
h2 {
	font-size: 1.5rem;
}
h3 {
	font-size: 1.3rem;
}
h4 {
	font-size: 1.2rem;
}
h5 {
	font-size: 1.2rem;
}

p {
	font-family: "Arial", sans-serif; /*"Verdana", sans-serif;*/
/*	font-size: 97%; /*91%; 80%;*/
	line-height: 1.8; /*1.7;*/
/*	overflow: auto;*/
}

/*
.mainText {
}
*/

.codeText {
	display: block;
/*	width: 1000px; /*800px; 740px;*/
	white-space: nowrap;
	overflow: auto;
	font-family: "Consolas", monospace;
}

.figureText {
/*	font-size: 85%;*/
	font-style: italic;
}

/*
li p {
	margin-top: 0px;
	margin-bottom: 0px;
}
*/

.homepgTextHeading {
	font-size: 1.4rem;
}

.disclaimerBfHeading {
	font-family: "Times New Roman", serif;
	font-size: 1.3rem;
}

a.homepgLinkHeading {
	text-decoration: none;
	color: #00248F;
}
a.homepgLinkHeading:visited {
	color: #00248F;
}
a.homepgLinkHeading:hover, a.homepgLinkHeading:active, a.homepgLinkHeading:focus {
	color: red;
}

ul.menu {
	list-style-type: none;
/*	margin: 0;*/
	padding: 0;
	margin-left: 5%;
	margin-right: 5%;
}

a.menuItem1 {
	text-decoration: none;
	color: #00248F;
/*	border: 1px solid #302b27;*/
	display: inline-block;
	font-family: "Arial", sans-serif;
	font-size: 0.8rem;
	font-weight: bold;
	padding: 2px;
	margin-top: 5px;
	margin-bottom: 5px;
}
a.menuItem1:visited {
	color: #00248F;
}
a.menuItem1:hover, a.menuItem1:active, a.menuItem1:focus {
	color: white;/*yellow;*/
	background: #096e73;
/*	border: 1px solid #ccaa88;*/
}

a.menuItem2 {
	text-decoration: none;
	color: blue;
/*	border: 1px solid #302b27;*/
	display: inline-block;
	font-family: "Arial", sans-serif;
	font-size: 0.78rem;
	padding: 2px;
	margin-top: 5px;
	margin-bottom: 5px;
}
a.menuItem2:visited {
	color: blue;
}
a.menuItem2:hover, a.menuItem2:active, a.menuItem2:focus {
	color: white;/*yellow;*/
	background: #096e73;
/*	border: 1px solid #ccaa88;*/
}

div.menuText1 {
	font-weight: bold;
	padding: 2px;
	margin-top: 5px;
	margin-bottom: 5px;
	border-bottom: 1px solid gray;
}

div.menuText2 {
	font-size: 0.9rem;
	padding: 2px;
	margin-top: 5px;
	margin-bottom: 5px;
}

/*hr.menuHr {
	width: 100%;
	height: 1px;
	border: 0px;
	color: gray;
	background-color: gray;
}*/

a.menuItem_prefs {
	color: #00248F;
	font-family: "Arial", sans-serif;
	font-weight: bold;
	padding: 2px;
	margin-top: 2px;
	margin-bottom: 2px;
}
a.menuItem_prefs:visited {
	color: #00248F;
}
a.menuItem_prefs:hover, a.menuItem_prefs:active, a.menuItem_prefs:focus {
	color: white;/*yellow;*/
	background: #096e73;
}

p.tcLevel1 {
	margin-top: 50px;
	margin-left: 3%;
}
p.tcLevel2 {
	margin-left: 6%;
}
p.tcLevel3 {
	margin-left: 9%;
}
p.tcLevel4 {
	margin-left: 12%;
}
p.tcLevel5 {
	margin-left: 15%;
}
p.tcLevel1 a, p.tcLevel2 a, p.tcLevel3 a, p.tcLevel4 a, p.tcLevel5 a {
	text-decoration: none;
}

hr.prefsHr {
	width: 100%;
	height: 1px;
	border: 0px;
	color: gray;
	background-color: gray;
}

div#dialogOK {
	display: none;
}

#wmlscriptLibRefHomeTC {
	margin-left: 3%;
}

div.pageFrame {
	border: 1px solid gray;
/*	width: 1000px;/*740px;*/
	overflow: auto;
}

table.compTable {
	 border-spacing: 0;
}

table.compTable th {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	background-color: white;
}

table.compTable tbody tr {
	vertical-align: top;
}

table#pageBottomNavBox {
	width: 100%; /*70%; 81%;*/
	max-width: 660px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

td.pageBottomNavBoxTd1 {
	width: 31%;
	font-size: 1.2rem;
}

td.pageBottomNavBoxTd2 {
	width: 7%;
}

a.pageBottomNavBoxButton {
	display: block;
	font-family: "Arial", sans-serif;
	font-weight: bold;
	text-decoration: none;
	padding: 12px;
	color: white;
	background: #00248F;
}
a.pageBottomNavBoxButton:visited {
	color: white;
}
a.pageBottomNavBoxButton:hover, a.pageBottomNavBoxButton:active, a.pageBottomNavBoxButton:focus {
	color: white;
	background: #096e73;
}

a#pageBottomNavBoxPrevLink {
	border-radius: 30px 7px;
}

a#pageBottomNavBoxNextLink {
	border-radius: 7px 30px;
}

div#tcBox {
	border: 1px solid #809FFF;
	padding: 20px;
	font-family: "Arial", sans-serif;
	font-size: 0.9rem; /*80%;*/
}

div#tcBox ul {
	list-style-type: none;
	padding-left: 3%;
}

div#tcBox li {
	margin-top: 6px;
}

div#tcBox li a {
	text-decoration: none;
}

div#pageToolsBox {
	border: 1px solid #809FFF;
	font-family: "Arial", sans-serif;
	font-size: 0.9rem; /*80%;*/
	text-align: center;
	padding-top: 5px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;
}

div#searchBoxBottom {
	border: 1px solid #809FFF;
	padding-top: 25px;
	padding-bottom: 25px;
}

div#searchBoxBottom > div {
	margin-left: auto;
	margin-right: auto;
	width: 90%;
}

div#pageFeedbackBox {
	border: 1px solid #809FFF;
	font-family: "Arial", sans-serif;
	font-size: 0.8rem;
	padding: 20px;
}

div#pageFeedbackBox a#collapsePageFeedbackFormAnchor {
	display: none;
}

div#pageFeedbackBox div#optionalElements {
	display: none;
}

div#pageFeedbackBox p {
	font-family: "Verdana", sans-serif;
	font-size: 0.7rem; /*85%;*/
	padding-left: 3%; /*20px;*/
/*	padding-right: 20px;*/
}

div#pageFeedbackBox input[type="submit"], div#pageFeedbackBox input[type="reset"] {
	font-size: 1rem;
}

div#footer {
	font-family: "Arial", sans-serif;
	font-size: 0.8rem;
	text-align: center;
	padding-top: 25px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
}

div#footer a {
	text-decoration: none;
	color: blue;
}
div#footer a:visited {
	color: gray;
}
div#footer a:hover, div#footer a:active, div#footer a:focus {
	text-decoration: underline;
	color: red;
}

div#backToTopButtonShadow {
	position: fixed;
	bottom: 1%;
	right: 0;
	z-index: 100;
	width: 53px;
	height: 55px;
	border-radius: 27px; /* Icon width / 2 = 54/2 */
	box-shadow: -4px 1px 4px rgba(0, 0, 0, 0.3);
	opacity: 0;
	-webkit-transition: opacity 1s, right 1s;
	-o-transition: opacity 1s, right 1s;
	-moz-transition: opacity 1s, right 1s;
	transition: opacity 1s, right 1s;
}

a#backToTopButton {
	line-height: 0;
	position: fixed;
	bottom: 1%;
	right: 0;
	z-index: 101;
	opacity: 0;
	-webkit-transition: opacity 1s, right 1s;
	-o-transition: opacity 1s, right 1s;
	-moz-transition: opacity 1s, right 1s;
	transition: opacity 1s, right 1s;
}

div#backToTopButtonCover {
	position: fixed;
	bottom: 1%;
	right: 0;
	z-index: 102;
	width: 54px;
	height: 56px;
}

form.myForm input[type="text"], form.myForm textarea { /* Need .myForm to prevent affecting Google search box. */
	border: solid 2px silver;
	font-family: "Arial", sans-serif;
	font-size: 1rem;
	padding: 10px;
	-webkit-transition: border-color 0.5s, box-shadow 0.5s;
	-o-transition: border-color 0.5s, box-shadow 0.5s;
	-moz-transition: border-color 0.5s, box-shadow 0.5s;
	transition: border-color 0.5s, box-shadow 0.5s;
	max-width: 93%;
}

form.myForm input[type="text"] {
	border-radius: 5px 15px;
}

form.myForm textarea {
	border-radius: 5px 20px;
	overflow-y: auto;  /* IE 11 shows a vertical scrollbar even when text box is empty. */
}

form.myForm input[type="text"]:focus, form.myForm textarea:focus {
	outline: none;  /* Chrome shows an outline by default. */
	border-color: #96c8ff;
	box-shadow: 0 0 10px rgba(150, 200, 255, 0.7);
}
/*
form.myForm input[type="text"][disabled] {
	background-color: #e5e5e5;
}
*/

form.myForm input[type="submit"], form.myForm input[type="reset"], input[type="button"] {
	background-color: white;
	border: solid 2px silver;
	border-radius: 5px;
	font-family: "Times New Roman", sans-serif;
	font-size: 1.1rem;
	outline: none;  /* Chrome shows an outline by default when the button has focus. */
	-webkit-transition: background-color 0.5s, color 0.5s;
	-o-transition: background-color 0.5s, color 0.5s;
	-moz-transition: background-color 0.5s, color 0.5s;
	transition: background-color 0.5s, color 0.5s;
}
form.myForm input[type="submit"]:hover, form.myForm input[type="reset"]:hover, input[type="button"]:hover {
	background-color: silver;
	color: white;
}

span.formIndent {
	margin-left: 2%;
}

div.aunit {
	display: inline-block;
	width: 300px;
	height: 250px;
/* background-color: #eee; */
}

div.aunitCustom {
	display: inline-block;
}

@media only screen and (max-width: 991px) {  /* width <= 991px */
div#mainLeftCell, div#mainRightCell {
	width: 100%;
	height: 0;
	position: fixed;
	top: 0;
	left: 0;
	overflow: auto;
	z-index: 200;
	background-color: rgb(244, 244, 244); /* same as #f4f4f4; */
	background-color: rgba(244, 244, 244, 0.95);
	-webkit-transition: height 0.5s;
	-o-transition: height 0.5s;
	-moz-transition: height 0.5s;
	transition: height 0.5s;
}

div#mainLeftCell div.aunit, div#mainRightCell div.aunit, div#mainRightCell div.aunitCustom, div.mobileNo {
	display: none;
}
}

@media only screen and (min-width: 992px) {  /* 992px <= width */
td#imgTop2bBox a {
	display: none;
}

div.fbox {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

div#mainLeftCell {
	width: 160px;
	min-width: 160px;
	padding-top: 10px;
	padding-right: 25px;
	padding-bottom: 25px;
	padding-left: 25px;
}

div#menuTopBtnBox {
	display: none;
}

div#mainRightCell {
	width: 302px;
	min-width: 302px;
	padding-right: 25px;
	padding-bottom: 25px;
	padding-left: 25px;
}

div#mainRightCellSticky {
	padding-top: 10px;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}

div#mainCenterCell {
	width: 100%;
/*padding-right: 2%;
padding-bottom: 2%;
padding-left: 2%; */
	border-radius: 7px 30px;
}

ul.menu {
	margin-left: 0;
	margin-right: 0;
}

a.menuItem1, a.menuItem2 {
	display: block;
}

div#mainCenterCell div.aunitCustom {
	display: none;
}

div.floatRight {
	margin: 2px;
	float: right;
}
}