table
{
	border: 1px solid gray;
	border-collapse: collapse;
	border-spacing: 0px;
	width: auto; /* undoes default 100% */
}

.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;
}

td
{
/*
	border: 1px solid black;
*/
	padding: 0px;
	padding-left: 8px;
	padding-right: 8px;
}

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: 1px solid gray;
}

.arightrborder
{
	text-align:right;
	border-right: 1px 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 .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 .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 .tttwide {
    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 .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 .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 -------------------------------- */
/* ---------------------------------- */
/* ---------------------------------- */
/* ---------------------------------- */
/* ---------------------------------- */
/* ---------------------------------- */