/* ----------------------------------------------------------
 *  kennylStyle.css
 *  Created on : Jun 22, 2012, 3:09:21 PM
 *  author     : kennyl
 * ----------------------------------------------------------
 * revised: 2021-11-20	kennyl	moved headerTable and the navbars to a
 * 								separate file (bigtable*)
 * 			2022-11-16	kennyl	rearranged the variable section.  Metadata
 * 								is lettered and sections are numbered
 * ----------------------------------------------------------
*/

:root{
	/* AAA Images AAA */
	--headerTable-bg-image: url('https://graphic.leistware.com:8443/client/kennyl/image/Political_long.jpg'); 
	--body-bg-image:url('https://graphic.leistware.com:8443/image/chalk.jpg');
	
	/* BBB fonts BBB */
	--font-family:Comic Sans MS, Verdana, Helvetica, Arial;
	
	/* CCC font sizes CCC */
	--base-font-vs: 14px;
	--base-font-sm: 18px;
	--base-font-med: 18px;
	--base-font-lg: 18px;
	
	/* DDD colors DDD */
	--color-bg: #6699FF;
	--color-butt-bg: #6699FF;
	--color-butt-fg: #FFEEFF;
	--color-fg: #121212;
	--color-hr-bg: #6699FF;
	--color-hr-fg: #121212;
	--color-link-bg: #6699FF;
	--color-link-fg: #FEFEFE;
	--color-link-bg-hover:none;
	--color-link-fg-hover:#FEFEFE;
	--color-title-bg: #6699FF;
	--color-title-fg: #121212;
	
	/* EEE border size EEE */
	--border-size-sm: .1em;
	--border-size-med: .25em;
	--border-size-lg: .5em;
	--border-style: solid;
	--border-color: #6699FF;

	/* 111 Main Page Table 111*/
	/* 222 Header Table 222 */
	
	/* hamburger button */
	--um-color-fg: #FEFEFE;
	--um-color-bg: #6699FF;
	--um-cont-color-fg: #6699FF;
	--um-cont-color-bg: #FEFEFE;
	
	/* 333 top nav bar specifics 333 */
	
	/* vs/vsl = very small/verysmall landscape */
	/* Use these for testing screen width */
	--top-nav-bar-color-bg-vs: #0000FF;
	--top-nav-bar-color-bg-vsl: #0000FF;
	--top-nav-bar-color-bg-ss: #00FF00;
	--top-nav-bar-color-bg-ssl: #00FF00;
	--top-nav-bar-color-bg-ms: #FF0000;
	--top-nav-bar-color-bg-msl: #FF0000;
	--top-nav-bar-color-bg-ls: #6699FF;
	--top-nav-bar-color-bg-lsl: #6699FF;
	/*
	--top-nav-bar-color-bg-vs: #6699FF;
	--top-nav-bar-color-bg-vsl: #6699FF;
	--top-nav-bar-color-bg-ss: #6699FF;
	--top-nav-bar-color-bg-ssl: #6699FF;
	--top-nav-bar-color-bg-ms: #6699FF;
	--top-nav-bar-color-bg-msl: #6699FF;
	--top-nav-bar-color-bg-ls: #6699FF;
	--top-nav-bar-color-bg-lsl: #6699FF;*/
/*	--top-nav-bar-color-bg: #6699FF;
	--top-nav-bar-color-fg: #000000;*/
	--top-nav-bar-color-bg-hover: #6699FF;
	--top-nav-bar-color-fg-hover: #FE2312;
	--top-nav-bar-border-color:#DEDEDE #6699FF #6699FF #DEDEDE;
	--top-nav-bar-border-style:outset;
	--top-nav-bar-border-radius:1em;
	--top-nav-bar-border-width:100%;

	/* 444 content table 444 */
	
	/* 4A side nav bar specifics 4A */
	--side-nav-bar-color-bg: none;
	--side-nav-bar-color-fg: #000000;
	--side-nav-bar-color-link-bg: none;
	--side-nav-bar-color-link-fg: #000000;
	--side-nav-bar-color-bg-hover: none;
	--side-nav-bar-color-fg-hover: #FE2312;
	--side-nav-bar-border-color:#DEDEDE #6699FF #6699FF #DEDEDE;
	--side-nav-bar-border-style:outset;
	--side-nav-bar-border-radius:1em;
	--side-nav-bar-border-width:100%;
	
	/* 4B Inner Content Table 4B/
	
	/* 4C info table 4C	*/
	--info-border-style:outset;
	--info-border-width:.15em;
	--info-border-color:#6893FE;
	--info-color-bg: #EBEF3D;
	--info-color-fg: #6699FF;
	--info-color-link-bg: none;
	--info-color-link-fg: #1212FE;
	--info-color-link-bg-hover: none;
	--info-color-link-fg-hover: #FE2312;

	/* 555 Copyright table 555 */
	--copy-color-bg:none;
	--copy-color-fg:#1242BD;
	--copy-border-type:solid;
	--copy-color-border:6699FF;
	
}
root {
	display: block;
}
.bigTableContentTableContainer{
	height:60vh;
}
/* ------------------------- Selectors -------------------------------*/
html, body {
	display:block;
	position:fixed;
	margin:0px;
	scroll-behavior:smooth;
}
body{
	color:#000000;
	background-color:#FFFFFF;
	background-image:url('https://graphic.leistware.com:8443/image/chalk.jpg');
	font-weight:normal;
	font-family:Comic Sans MS, Verdana, Helvetica, Arial;
	overflow:hidden scroll;
	padding-bottom:2em;
	padding-left:.25em;
	padding-right:.25em;
	padding-top:0em;
}
/* Head Liners */
h1{
	color:#6699FF; 
	font-size:1.4em;
	font-weight:bold;
	padding:0px;
	margin:0px;
}
h2{
	color:#6699FF; /* grey */
	font-size:1.2em;
	font-weight:bold;
	padding:0px;
	margin:0px;
	text-align:center;
}
h3{
	color:#6699FF; /* grey */
	font-size:1.0em;
	font-weight:bold;
	padding:0px;
	margin:0px;
}
h4{
	color:#6699FF; /* grey */
	font-size:.8em;
	font-weight:bold;
	padding:0px;
	margin:0px;
}
h5{
	color:#6699FF; /* grey */
	font-size:.6em;
	font-weight:bold;
	padding:0px;
	margin:0px;
}
h6{
	color:#6699FF; /* grey */
	font-size:.4em;
	font-weight:bold;
	padding:0px;
	margin:0px;
}
table{
/*	background-image:url('../image/chalk.jpg');*/
	width:100%;
}
tr{}
td{}
hr{
	border-width:0;
	background-color:#6699FF;
	height:3px;
	width:100%;
}
hr.minor{
	border-width:0;
	background-color:#AA5566;
	height:1px;
	width:80%;
}
hr.major{
	border-width:0;
	background-color:#6699FF;
	height:10px;
	width:100%;
}
p.article{
	margin:25px;
	font-size:1.2em;
}
abbr{color:#6699FF;}
/* links - plain old every day*/
a:link, a:visited{
	font-weight:bold;
	color:#000000;
	text-align:left;
	padding:6px;
}
a:hover, a:active{
	color:#0000FF;
	/*background-color:#6699FF;*/
	text-align:left;
}
/* links - anchor links */
.anchor:link, .anchor:visited{
	font-weight:bold;
	color:#0000FF;
	text-align:left;
	padding:6px;
}
.anchor:hover, .anchor:active{
	color:#0000FF;
	/*background-color:#6699FF;*/
	text-align:left;
}
/** -------------------------------------------------------------------
 * Main Page Table - has 4 rows.  The rows are stubs to house their 
 * respective content.  Each row has a set of nested tables.
 * ----------------------------------------------------------------- */
.mainPageTable {
	color:#000000;
	border:solid;
	border-color:#5588EE	;
	border-width:10px;
	border-radius:25px;
	height:100%;
	padding-bottom:25em;
	padding-left:.25em;
	padding-right:.25em;
	padding-top:.25em;
	table-layout:fixed;
	width:100%;
}
	/** Header row and Table where the headerRowTable resides */
	.headerRow{}
		.headerCell{
			width:100%;
		}
	.navBarRow{}
		.navBarCell{}
	.contentRow{}
		/* contentRowCell - a cell of contentRow - a row of mainPageTable */
		.contentCell{
			vertical-align:top;
			width:100%
		}

/* END - Main Page Table --------------------------------------------*/

/* ------------------------------------------------------------------
 * Header Table - moved to bigtableHeadertableStyle.css
 * ------------------------------------------------------------------*/




/* -------------------------------------------------------------------
 * This section of object live inside the contentCell of contentRow of
 * mainPageTable.  It is by far the most complex of the rows.
 * -------------------------------------------------------------------
 * contentRow - a row of mainPageTable - contains contentCell and 
 * contentTable. contentTable is made up of two cells 
 *  cell 1: side nav bar
 *  cell 2: main content of the page
 * -------------------------------------------------------------------*/


/* contentOuterTable - has one row and three cells.  Is the frame of the
 *  center section of the page. */
.bigTableOuterContentTable{
	width:100%;
}
	/** Row 1:  Only Row in this table - contains 3 cells (
	 * *sideNavBarCell, *ContentCell and *mirrorCell) */
	.bigTableOuterContentTableRow{}
		/** Cell 1:  Side nav bar.  child of (contentOuterTableRow) */
		.bigTableOuterContentTableSideNavBarCell{
			vertical-align:top;
			width:3em;
			}

			/* sidenavbar has been moved to it's own file bigTableSidenavbar.css */
			
		/** Cell 2: contains the contentTable or innerContentTable 
		 * (child of contentOuterTableRow)  */
		.bigTableOuterContentTableContentCell{
			vertical-align:top;
			
		}
		/** Like the header the content section had 3 cells accross.  
		 * MirrorCell contains info table which can hold additional
		 * crap*/
		.contentOuterTableMirrorCell{
			vertical-align:top;
			text-align:center;
			width:3em;
		}
			/** The container the info table is in... */
			/*.bigTableMirrorTableContainer{*/
			/*	background-color:#6699FF; */
			/*	border-radius:3em; */
			/*	height:auto; */
			/*	right:1.5em;*/
			/*	overflow:hidden; */
			/*	position:absolute; */
			/*	text-align:left;*/
			/*	transition-property: width;*/
			/*	transition-duration: 0.7s;*/
			/*	transition-timing-function: ease;*/
			/*	transition-delay:0s;*/
			/*	width:2em; */
			/*	z-index:302;*/
			/*}*/
			/** infoTable makes up the contents of 
			 * outerContentTableMirrorCell */
			/*.bigTableMirrorTable2{*/
			/*	border-spacing:.5em;*/
			/*	float:right;*/
			/*	margin-right:2em;*/
			/*	width:90%;*/
			/*}*/
/*				.bigTableMirrorTableRow{}*/
/*					.bigTableMirrorTableCell2{*/
/*						background-color:#FFFFFF;*/
/*						color:#6699FF;*/
/*						border:.15em outset #6699FF;*/
/*						border-width:.1em;*/
/*						border-style:double;*/
/*						border-bottom:.1em solid #AA5566;*/
/*						border-left:.1em solid #AA5566;*/
/*						border-right:.3em solid #6699FF;*/
/*						border-top:.3em solid #6699FF;*/
/*						border-radius:15px;*/
/*						float:right;*/
/*						font-size:1.4em;*/
/*						font-weight:bold;*/
/*						text-align:center;*/
/*					} */
					a.itLink:link, a.itLink:visited{
						font-weight:bold;
						color:#6699FF;
						text-align:center;
						text-decoration:none;
						text-transform:uppercase;
					}
					a.itLink:hover, a.itLink:active{
						color:#FF0000;
						/*background-color:#6699FF;*/
						text-align:right;
					}
/* ------------------------------------------------------------------
/* Copyright Table
/* ------------------------------------------------------------------*/
/* Copyright row - belongs to mainPageTable */
.copyrightRow{}
/* Copyright row cell - belongs to mainPageTable */
	.copyrightCell{
		color:#565656;
		vertical-align:bottom;
		height:55px;
		width:100%;
	}
		/* copyrightTable - the table within the copyrightRow of 
		 * mainPageTable */
		.bigTableCopyRightTable, .copyrightTable{
			background-color:#88AAFF;
			color:#FFFFFF;
			border:solid;
			border-color:#5588EE	;
			border-radius:15px;
			font-size:1.0em;
			padding:0;
			width:100%;
		}
			/* The three cells of the copyrightTable */
			.copyrightTableCellLeft{
				font-size:.8em;
				text-align:left;
				width:25%;
			}
			.copyrightTableCellCenter{
				font-size:.8em;
				text-align:center;
			}
			.copyrightTableCellRight{
				font-size:.80em;
				text-align:right;
				width:25%;
			}
			.copyrightTableUnderRow{
			}
				.copyrightTableUnderLeft{}
				.underworldListLeft{}
				li.underLinkItem{
					font-size:1.0em;
					display:inline;
					text-align:center;
				}
				.underLinkItem{}
				a.underLink:link, a.underLink.visited{
					font-weight:bold;
					color:#000000;
					text-align:center;
					text-decoration:none;
					text-transform:uppercase;
				}
				a.underLink:hover, a.underLink.active{
					color:#FF0000;
					text-align:right;
				}
/* ------------------------------------------------------------------
 * Other Classes
 * ------------------------------------------------------------------*/
table.linkTable{
/*	border:1px solid black;*/
}
td.linkTableCell{
/*	border:3px outset #9A9A9A;*/
	text-align:center;
}
td.imageCell{
	border:3px outset #9A9A9A;
	text-align:center;
	}
/*.comic{
	text-weight:bold;
	font-size:1.4em;
}*/
.clistCell{
	background-color:#6699FF;
	border-radius:.5em;
	color:#FEFEFE;
	font-size:1em;
}
.clistLinkCell{
	background-color:#FEFEFE;
	border-radius:.5em;
	border: .25em solid #111213;
	color:#FEFEFE;
	font-size:1em;
	width:12em;
}
/** Got this class from http://www.reignwaterdesigns.com */
.ingraybox, .code, .tidbits{
	background-color: #F5F5F5;
	border: 1px solid #D3D3D3;
	color: #2165A5;
	float:left;
	font-size: 12px;
	font-weight: normal;
	height:auto;
	padding: 15px;
	text-align: left;
	width:95%;
}
.logbutt {
	background-color: #FFFFFF;
	border-bottom:1px solid #AA3344;
	border-left:1px solid #AA3344;
	border-right:3px solid #99BBFF;
	border-top:3px solid #99BBFF;
	border-radius:25px;
	color: #6699FF;
	font-family: comic sans ms;
	font-size: 20px;
	text-decoration: none;
	cursor: pointer;

}
.logbutt:hover {
	border-bottom:1px solid #AA3344;
	border-left:1px solid #AA3344;
	border-right:3px solid #6699FF;
	border-top:3px solid #6699FF;
	background-color:#FF0000;
	color:#FFFFFF;
	box-shadow: 0px 0px 1px #777;
}
.errText{
	font-family:comic sans ms;
	font-weight:bold;
	font-size:1.4em;
	text-align:center;
	line-height:150%;
}
.errTextHigh{
	color:red;
	font-family:arial black;
	font-weight:bold;
	font-size:1.8em;
	text-align:center;
	line-height:150%;
}