/* 
    Document   : leistwareStyle.css
    Created on : Dec 30, 2012, 11:24:30 AM
    Author     : kennyl
	Description:
	Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/
:root { 
	/* AAA Images AAA */
	--headerTable-bg-image: url('https://graphic.leistware.com:8443/client/leistware/image/LeistwareHeader.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;
}
/** ***********************************************************************************
 * LeistwareStyleSheet -  All classes have a serialized name.  For example:  The first 
 * row in mainPageTable is headerRow which houses headerCell.  Under headerCell is 
 * headerTable.  From there headerTable is used as the prefix for headerTableRow and
 * headerTableCell.  The 3 header table cells are named  differently, headerTableLogoCell,
 * headerTableTitleCell and headerTableMirrorCell.  This allows the use of unique class
 * names instead of the third row in the first table of the second row of the 5 cell...
 * 
 * ************************************************************************************/
/* Selectors *********************************************/
html, body {
	bottom: 0px;
	left: 0px;
	margin:auto;
	right: 0px;
	scroll-behavior:smooth;
	top: 0px;
	width:1080px;
}
.bigTableContentTableContainer{
	height:60vh;
}
body{
	color:#000000;
	background-color:#EFEFEF;
	font-family:"Comic Sans MS";
	font-size:14px;
}
/* Head Liners */
h1{
	color:#1F1F1F; 
/*	color:#6699FF; */
	font-size:36px;
	font-weight:bold;
	padding:0px;
	margin:0px;
}
h2{
	color:#6699FF;
	font-size:30px;
	font-weight:bold;
	padding:0px;
	margin:0px;
	text-align:center;
}
h3{
	color:#6699FF;
	font-size:28px;
	font-weight:bold;
	padding:0px;
	margin:0px;
}
h4{
	color:#6699FF;
	font-size:24px;
	font-weight:bold;
	padding:0px;
	margin:0px;
}
h5{
	color:#6699FF;
	font-size:18px;
	font-weight:bold;
	padding:0px;
	margin:0px;
}
h6{
	color:#6699FF; 
	font-size:14px;
	font-weight:bold;
	padding:0px;
	margin:0px;
}
table{
	width:100%;
}
tr{}
td{}
th.boxCellHeader{
	background-color: #6699FF;
	border:1px solid black;
}
td.boxCell{
	border:1px solid black;
}
hr{
	border-width:0;
	background-color:#FF9966;
	height:3px;
	width:100%;
}
hr.minor{
	border-width:0;
	background-color:#FF9966;
	height:1px;
	width:80%;
}
hr.major{
	border-width:0;
	background-color:#FF9966;
	height:10px;
	width:100%;
}

code{
	font-size:14px;
	color:#0000FF;
}
abbr{color:#FF9966;}
/* 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;
}
/*************************************************************************************
 * Leistware Style Sheet - Classes are grouped in sections in order of appearance of the parent
 * ************************************************************************************/
/*************************************************************************************
 * 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:#FE2312;
	border-width:10px;
	border-radius:35px;
	height:100%;
	margin-left:25px;
	width:95%;
}
	/** 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 - and its rows and cells
/* ************************************************************************************/
.headerTable{
	background-image:url('https://graphic.leistware.com:8443/client/leistware/image/LeistwareHeader.jpg');
	background-size: 100% 100%;
	background-repeat:no-repeat;
	border:none;
	border-radius:25px;
	height:175px;
	width:100%;
}
	/** Row for the link table located inside the header table*/
	.headerTableLinkRow{
		width:100%;
	}
		/** Links in the linkTable, located as the first row in the 
		 * headerTable.  Its ancestory back to headerTable is:
		 * linkTableCell, linkTableRow, linkTable, headerTableLinkRowCell, 
		 * headerTableLinkRow */
		a.hLink:link, a.hLink:visited{
			font-weight:bold;
			color:#FFFFFF;
			text-align:center;
			padding:6px;
		}
		a.hLink:hover, a.hLink:active{
			color:#FF0000;
			/*background-color:#6699FF;*/
			text-align:center;
		}

	/** The only row in the header table if a link row is not used.
	The second row in the header table if link row is employed 
	headerTableRow has 3 cells */
	.headerTableRow{
		text-align:center;
		width:100%;
		height:90%;
		width:100%;
	}
		/** First cell (left) of headerTableRow is the headerTableLogoCell
		or logoCell.  It is where the company name or logo goes. */
		.headerTableLogoCell, .logoCell{
			width:20%;
			color:#252525;
			text-align:left;
			vertical-align:bottom;
			/*height:125px;*/
			font-size:12px;
			font-weight:bold;
			text-transform:uppercase;
			width:20%;
		}
		/** The Second cell (middle) of headerTableRow - is the 
		headerTableTitleCell or titleCell(depreciated). It is designed to 
		hold the page title so it can be in large letters, but a 
		table can be inserted here to break it up into smaller units */
		.headerTableTitleCell, .titleCell{
			color:#0000FF;
			/*color:#7799EE;*/
			text-align:center;
			vertical-align:middle;
			/*height:125px;*/
			font-size:2.0em;
			font-weight:bold;
			text-transform:uppercase;
			height:125px;
			width:60%;
		}

		/** Remaining cell (right) of the 3 cells in headerTableRow. Is the 
		headerTableMirrorCell or mirrorCell(depreciated)*/
		.headerTableMirrorCell, .mirrorCell{
			width:20%;
			text-align:right;
			vertical-align:top;
			font-size:.75em;
			text-transform:uppercase;
			width:20%;
		}
			/** The mirrorTable is optional under the headerTableMirrorCell */
			.mirrorTable{
				width:100px;
				}
				.mirrorTableRow{}
					.mirrorTableCell{
						border:2px outset grey;
					}
						/** Links in the mirrorTable, located as the second or only row in the 
						 * headerTable depending if there is a linkTable.  it is an optional table
						 * in the third cell of the headerTable. */
						a.mirrorLink:link, a.mirrorLink:visited{
							font-weight:bold;
							color:#FFFFFF;
							text-align:center;
							padding:6px;
							text-decoration:none;
						}
						a.mirrorLink:hover, a.mirrorLink:active{
							color:#FF0000;
							text-align:center;
						}
	/** Row for the link table located inside the header table*/
	.headerBottomTableLinkRow{
		width:100%;
	}
		.bottomLinkTableCell{
			text-align:center;
		}
			/** Links in the linkTable, located as the first row in the 
			 * headerTable.  Its ancestory back to headerTable is:
			 * linkTableCell, linkTableRow, linkTable, headerTableLinkRowCell, 
			 * headerTableLinkRow */
			a.hbLink:link, a.hbLink:visited{
				font-weight:bold;
				color:#FFFFFF;
				text-align:center;
				padding:6px;
			}
			a.hbLink:hover, a.hbLink:active{
				color:#FF0000;
				/*background-color:#6699FF;*/
				text-align:center;
			}						
/* END - Header Table** **************************************************************/

/*************************************************************************************
 * Top NavBar - resides in the navBarRow/navBarCell of mainPageTable.  Hold the top 
 * 							Navigational Bar which is a horizontal unordered list.
 * ************************************************************************************/
/** topNavBarTable or navBarTable(Deprecated) describes the table that holds the top nav bar. */
.navBarTable, .topNavBarTable{
	background-color:#FE2312;
	border-color:#DEDEDE #9A9A9A #9A9A9A #DEDEDE;
	border-style:outset;
	border-width:3px;
	border-radius:15px;
	font-family:comic sans ms;
	font-size:24px;
	height:20px;
	width:100%
}
	.navBarTableRow, .topNavBarTableRow{}
		.navBarTableCell, .topNavBarTableCell{}
			/** the list that makes the top nav bar.  */
			ul.topNavBar{
				list-style-type:none;
				margin-top:0px;
				margin:0;
				padding:0;
				padding-top:0px;
				padding-bottom:0px;
			}
				/** The list item that bears the link for the top nav bar
				* the display selector determines that it will be accross */
				li.topNavBarItem{
					display:inline;
					font-family:comic sans ms;
					font-size:18px;
					text-align:center;
				}
					/* The links that go in the items of the top nav bar */
					.topNavBarLink:link, .topNavBarLink:visited{
						color:#FFFFFF;
						font-weight:bold;
						padding:6px;						
						text-align:left;
						text-decoration:none;
						text-transform:uppercase;
					}
					.topNavBarLink:hover, .topNavBarLink:active{
						color:#000000;
						/*background-color:#6699FF;*/
						text-align:left;
					}
/* END - topNavBarRow ****************************************************************/

/* ************************************************************************************
 * This section of object lives 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. */
.contentOuterTable{
	width:100%;
}
	/** Row 1:  Only Row in this table - contains 3 cells (*sideNavBarCell, *ContentCell and *mirrorCell) */
	.contentOuterTableRow{}
		/** Cell 1:  Side nav bar.  child of (contentOuterTableRow) */
		.contentOuterTableSideNavBarCell{
			vertical-align:top;
			width:20%;
			}

			.sideNavBarTable{
				width:100%;
			}
				.sideNavBarTableRow{}
					.sideNavBarTableCell{
						text-align:left;
						vertical-align:top;
						width:15%;
						height:100%;
					}
						.sideNavBar{
						/*	background-color:#6699FF;*/
						/*	border-color:#DEDEDE #9A9A9A #9A9A9A #DEDEDE;*/
						/*	border-style:outset;*/
						/*	border-width:3px;*/
						/*	border-radius:15px;*/
							font-size:1.0em;
							width:100%
						}

							ul.sideNavBar{
								list-style-type:none;
								margin-top:10px;
								margin:0;
								padding:0;
								padding-top:6px;
								padding-bottom:6px;
							}
								li.sideNavBarItem{
									margin-left:5px;
									text-align:left;
									font-size:.9em;
								}
									li.sideNavBarSubItem{
										margin-left:5px;
										text-align:left;
										font-size:.8em;
									}
										li.sideNavBarSubSubItem{
											margin-left:5px;
											text-align:left;
											font-size:8pt;
										}

						/* Side Nav bar links */
						.sideNavBarLink:link, .sideNavBarLink:visited{
							font-weight:bold;
							color:#000000;
							text-align:left;
							padding:2px;
							text-decoration:none;
							text-transform:uppercase;
						}
						.sideNavBarLink:hover, .sideNavbarLink:active{
							color:#FF0000;
							text-align:left;
							text-decoration:underline;
						}
					/** Additional Image cells for the side nav bar (child of sideNavBarTableRow) */
					.sideNavBarTableImage, .sideNavBarImageCenter{
						text-align:center;
					}
					.sideNavBarTableImageLeft{
						text-align:left;
					}
					.sideNavBarTableImageRight{
						text-align:right;
					}
		/** Cell 2: contains the contentTable or innerContentTable (child of contentOuterTableRow)  */
		.contentOuterTableContentCell{
			vertical-align:top;
			/*float:right;*/
			width:60%;
/*			height:500px;*/
		}
		/** 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:20%;
		}
			/** infoTable makes up the contents of outerContentTableMirrorCell */
			.infoTable{
				border-spacing:10px;
				float:right;
				width:100%;
			}
				.infoTableRow{}
					.infoTableCell{
						color:#000000;
						border:3px outset gray;
						background-color:#FFFFFF;
/*						float:right;*/
						font-weight:bold;
						text-align:center;
					}
					a.itLink:link, a.itLink:visited{
						font-weight:bold;
						color:#000000;
						text-align:center;
						text-decoration:none;
						text-transform:uppercase;
					}
					a.itLink:hover, a.itLink:active{
						color:#FF0000;
						/*background-color:#6699FF;*/
						text-align:right;
					}
					.itName{
						color:#000000;
						font-size:1.2em;
						font-weight: 800;
					}
/* ************************************************************************************/
/* 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 */
		.copyrightTable{
			background-color:#6798FE;
			border:solid;
			border-color:#5588EE	;
			border-radius:20px;	
			color:#FEFEFE;
			height:50px;
			padding:0;
			width:100%;
		}
			/* The three cells of the copyrightTable */
			.copyrightTableCellLeft{
				text-align:left;
				height:50px;
				width:25%;
			}
			.copyrightTableCellCenter{
				text-align:center;
			}
			.copyrightTableCellRight{
				text-align:right;
				height:50px;
				width:25%;
			}
			.copyrightTableUnderRow{
			}
				.copyrightTableUnderLeft{}
				.underworldListLeft{}
				.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;
}*/
/** Got this class from http://www.reignwaterdesigns.com */
.ingraybox, .code, .tidbits{
	background-color: #F5F5F5;
	border: 1px solid #D3D3D3;
	color: #2165A5;
	font-family:courier;
	font-size: 14px;
	font-weight: normal;
	height:auto;
	padding: 15px;
	text-align: left;
	width:auto;
}
td.boxCell{
	border:1px solid black;
	padding:10px;
	vertical-align: top;
}