.nobr
{
	white-space:nowrap;
}

table
{
	border: 2px solid gray;
	border-collapse: collapse;
	border-spacing: 0px;
	width: auto; /* undoes default 100% */
	margin-right: 200px; /* no effect? */
}

.cntr
{
	margin: auto; /* centers a table */
}

th
{
/*
	border: 1px solid black;
*/
	font-weight: normal;
	background: #e0e0e0;
	padding: 0px;
	padding-left: 8px;
	padding-right: 8px;
	text-align: center;
/*	border-spacing: 0px; */
}

td.graycell
{
	background: #e0e0e0;
	text-align: right;
}

td.graycelltopborder
{
	background: #e0e0e0;
	text-align: right;
	border-top: 2px solid gray;
}

td
{
/*
	border: 2px solid red;
*/
	padding: 0px;
	padding-left: 8px;
	padding-right: 8px;
/*	border-spacing: 0px; NO EFFECT */
}

.underbar
{
	border-bottom: 2px solid black;
}

a:link {color: blue;}
a:visited {color: #b000d0;}
a:hover {color: red;}
a:active {color: orange;}

/* can't get this to work (on brown background)
a.anchorlight
{
	link {color: #c0c0ff;}
	visited {color: #d000ff;}
	hover {color: red;}
	active {color: orange;}
}
*/

.aleft
{
	text-align:left;
}

.aright
{
	text-align:right;
}

.rborder
{
	border-right: 2px solid gray;
}

.arightrborder
{
	text-align:right;
	border-right: 2px solid gray;
}

/*
.rw
{
	color: white;
	background-color: red;
}
*/

input[type=checkbox].ckxxx /* modeled from w3.css */
{
	width: 25px;
	height: 25px;
	position:relative;
	top: 5px;
	color: yellow;
	border: 2px solid black;
}

/* -- TOOLTIPS -------------------------------- */
.tt {
    position: relative;
    display: inline-block;
}

.ttt
{
	font-size: 110%;
}

.tt .ttt {
    visibility: hidden;
    width: 100px;
    background-color: pink;
    color: #000;
    
    border-radius: 4px;
    padding: 2px 0;
		text-align: center;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;

		/* below text */
/*		top: 130%; for tooltip below */
		bottom: 130%; /* for tooltip above */
    left: 50%;
    margin-left: -50px;
}

.tt .tttbelow {
    visibility: hidden;
    width: 100px;
    background-color: pink;
    color: #000;
    
    border-radius: 4px;
    padding: 2px 0;
		text-align: center;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;

		/* below text */
		top: 130%; /* for tooltip below */
/*		bottom: 130%; for tooltip above */
    left: 50%;
    margin-left: -50px;
}


.tt .tttwide {
/*		font-size: 80%; */
		font-family: "Arial", sans-serif;

    visibility: hidden;
    width: 240px;
    background-color: pink;
    color: #000;
    
    border-radius: 4px;
    padding: 2px 0;
		text-align: center;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;

		/* below text */
/*		top: 130%; for tooltip below */
		bottom: 130%; /* for tooltip above */
    left: 50%;
    margin-left: -120px;

/*		max-width: 200px; this sets width of tooltip not text */
/*		word-wrap:break-word; does not work */
}

.tt .tttbelowwide {
/*		font-size: 80%; */
		font-family: "Arial", sans-serif;

    visibility: hidden;
    width: 240px;
    background-color: pink;
    color: #000;
    
    border-radius: 4px;
    padding: 2px 0;
		text-align: center;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;

		/* below text */
		top: 130%; /* for tooltip below */
/*		bottom: 130%; for tooltip above */
    left: 50%;
    margin-left: -120px;

/*		max-width: 200px; this sets width of tooltip not text */
/*		word-wrap:break-word; does not work */
}

.tt .tttrow {
/*		font-size: 80%; */
		font-family: "Arial", sans-serif;

    visibility: hidden;
    width: 240px;
    background-color: pink;
    color: #000;
    
    border-radius: 4px;
    padding: 2px 0;
		text-align: center;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;

		/* below text */
/*		top: 130%; for tooltip below */
		bottom: 130%; /* for tooltip above */
/*    left: 50%; */
/*		right: 100%; */
    margin-left: -14px;

/*		max-width: 200px; this sets width of tooltip not text */
/*		word-wrap:break-word; does not work */
}

.tt .tttww {
		font-size: 80%;
		font-family: "Arial", sans-serif;

    visibility: hidden;
    width: 360px;
    background-color: pink;
    color: #000;
    
    border-radius: 4px;
    padding: 2px 0;
		text-align: center;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;

		/* below text */
/*		top: 130%; for tooltip below */
		bottom: 130%; /* for tooltip above */
    left: 50%;
    margin-left: -180px;

/*		max-width: 200px; this sets width of tooltip not text */
/*		word-wrap:break-word; does not work */
}

.tt:hover .ttt {
    visibility: visible;
}

.tt:hover .tttbelow {
    visibility: visible;
}

.tt:hover .tttwide {
    visibility: visible;
}

.tt:hover .tttbelowwide {
    visibility: visible;
}

.tt:hover .tttrow {
    visibility: visible;
}

.tt:hover .tttww {
    visibility: visible;
}

.tt:hover {
  color:red;
}

/* arrow */
.tt .ttt::after {
    content: "";
    position: absolute;
/*    bottom: 100%; arrow points up from top */
		top: 100%; /* arrow points down from bottom */
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: pink transparent transparent transparent;
}

/* arrow */
.tt .tttbelow::after {
    content: "";
    position: absolute;
    bottom: 100%; /* arrow points up from top */
/*		top: 100%; arrow points down from bottom */
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
/*    border-color: pink transparent transparent transparent; */
    border-color: transparent transparent pink transparent;
}

/* arrow */
.tt .tttwide::after {
    content: "";
    position: absolute;
/*    bottom: 100%; arrow points up from top */
		top: 100%; /* arrow points down from bottom */
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: pink transparent transparent transparent;
}

/* arrow */
.tt .tttbelowwide::after {
    content: "";
    position: absolute;
    bottom: 100%; /* arrow points up from top */
/*		top: 100%;  arrow points down from bottom */
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
/*    border-color: pink transparent transparent transparent; */
    border-color: transparent transparent pink transparent;
}

/* arrow */
/* tttrow is for row numbers, tooltip is to right of row number */
.tt .tttrow::after {
    content: "";
    position: absolute;
/*    bottom: 100%; arrow points up from top */
		top: 80%; /* arrow points down from bottom */
    left: 9px;
    margin-left: -10px;
    border-width: 13px;
    border-style: solid;
    border-color: pink transparent transparent transparent;
}

/* arrow */
.tt .tttww::after {
    content: "";
    position: absolute;
/*    bottom: 100%; arrow points up from top */
		top: 100%; /* arrow points down from bottom */
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: pink transparent transparent transparent;
}

/* -- END TOOLTIPS -------------------------------- */

div.fixed
{
	visibility: hidden;
/*	opacity: 1.0; */
	z-index: 100000; /* this prevents the color key AA letters from bleeding through */
	position: fixed;
	top: 100px;
	left: 100px;
	border: 2px solid red;
	border-radius: 15px;
	padding: 25px;
	background-color: #ffe8e8;
	font-size: 140%;
}


/* ---------------------------------- */
/* ---------------------------------- */
/* ---------------------------------- */
/* ---------------------------------- */
/* ---------------------------------- */