* {
	font-family: Times New Roman, Arial, Consolas;
}

/* fit to 1200px X 1080px */
:root {
	--outermost-width: 1138px;  /* 1200 - 2 * 10(for margin) - 2 * 10(for padding) - 2 * 1(for border) */
	
	--accessedLeft-width: 30px;
	--accessedRight-width: 1100px;		
	--accessedSrcs-height: 128px;
	--accessedWord-height: 58px;
	--accessedDsts-height: 644px;
	
	--storyToRead-width: 1040px;
	
	--searchedLeft-width: 530px;
	--searchedMiddle-width: 78px;
	--searchedRight-width: 530px;
	--searchedFootTable-width: 1138px;
	--searched-height: 744px;
}


a:link,
a:visited {
	color: black;
	text-decoration: none;
}

a:hover,
a:active {
	color: red;
	text-decoration: none;
}

.lean {
	padding: 0px;
	margin: 0px;
}

input, 
button {
  	font-size: 16px;
}

input[type="submit"],
button {
	width: fit-content;
}

div.message {
	width: var(--outermost-width);
	border: 1px solid gray;
	padding: 10px;
	margin: 10px;
	margin-top: 20px;
}

div.longUnderline {
	width: var(--outermost-width);
	border-bottom: 1px solid gray;  /* DEPLOY */
	/* border: 1px solid gray;  DEVELOP */
	padding: 10px;
	padding-bottom: 0px;
	margin: 10px;
}

table.menu {
	/* border: 1px solid lightgray;  DEVELOP */
	border-collapse: collapse;
	font-size: 20px;
	color: brown;
	padding: 0px;
	margin: 0px;
	margin-left: 40px;
}

table.menu td {
	/* border: 1px solid lightgray;  DEVELOP */
	padding: 10px;
	margin: 0px;
}

/* 1st child for hidden */
form.searchForm input:nth-child(2) {width: 260px; padding: 0px; margin: 0px; }
form.searchForm input:nth-child(3) {width: 30px; padding: 0px; margin: 0px; }

div.accessed {
	/* border: 1px solid lightgray;  DEVELOP */
	width: var(--outermost-width);
	padding: 10px;
	margin: 10px;
}

span.accessedLeft {
	display: inline-block;  /* for width to be effective */
	width: var(--accessedLeft-width);
	/* border: 1px solid lightgray;  DEVELOP */
	vertical-align: top;	
	font-size: 30px;
	padding: 0px;
	margin: 0px;
}

span.accessedRight {
	display: inline-block;  /* for width to be effective; to contain inline-table */
	width: var(--accessedRight-width);
	border: 1px solid lightgray;
	overflow-y: scroll;
	padding: 0px;
	margin: 0px;
}

span.accessedRightWithoutBorder {
	display: inline-block;  /* for width to be effective; to contain inline-table */
	width: var(--accessedRight-width);
	/* border: 1px solid lightgray;  DEVELOP */
	overflow-y: scroll;
	padding: 0px;
	margin: 0px;
}

span.accessedSrcs {
	height: var(--accessedSrcs-height);
}

span.accessedWord {
	height: var(--accessedWord-height);
	border: 1px solid gray;
}

span.accessedDsts {
	height: var(--accessedDsts-height);
}

table.accessedWordList {
	display: inline-table;
	/* border: 1px solid lightgray;  DEVELOP */
  	border-collapse: collapse;
  	font-size: 16px;
  	padding: 0px;
  	margin: 10px;
}

table.accessedWordList td {
	/* border-bottom: 1px solid platinum; */
	border-bottom: 1px solid gainsboro;  /* DEPLOY */
	/* border: 1px solid lightgray;  DEVELOP */
	text-align: left;
	padding: 8px;
	margin: 0px;
}

/* width = 1054 */
table.accessedWordList td:nth-child(1) { width: 640px; }
table.accessedWordList td:nth-child(2) { width: 60px; font-size: 10px; }
table.accessedWordList td:nth-child(3) { width: 24px; font-size: 10px; }
table.accessedWordList td:nth-child(4) { width: 50px; font-size: 10px; }
table.accessedWordList td:nth-child(5) { width: 60px; font-size: 10px; text-align: right; }  /* wordPoint */
table.accessedWordList td:nth-child(6) { width: 60px; font-size: 10px; text-align: right; }	 /* linkKind or copy-wordId */
table.accessedWordList td:nth-child(7) { width: 60px; font-size: 10px; text-align: right; }  /* linkPoint */

span.wordPoint {
	color: blue;
}

span.linkPoint {
	color: red;
}

div.searchedHead {
	width: var(--outermost-width);
	border-top: 1px solid lightgray;  /* DEPLOY */
	/* border: 1px solid lightgray;  DEVELOP */
	text-align: center;
	padding: 10px;
	padding-bottom: 0px;
	margin: 10px;
}

div.searched {
	width: var(--outermost-width);
	height: var(--searched-height);
	border: 1px solid lightgray;
	overflow-y: scroll;
	padding: 10px;
	margin: 10px;
}

div.searchedFoot {
	width: var(--outermost-width);	
	border-top: 1px solid lightgray;  /* DEPLOY */
	/* border: 1px solid lightgray;  DEVELOP */
	padding: 10px;
	margin: 10px;
}

span.searchedHead {
	border-bottom: 1px solid gray;  /* DEPLOY */
	/* border: 1px solid lightgray;  DEVELOP */
	padding: 4px;
	margin: 0px;
}

table.searchedWordList {
	/* border: 1px solid lightgray;  DEVELOP */
  	border-collapse: collapse;
  	font-size: 16px;
  	padding: 0px;
  	margin: 0px;
}

table.searchedWordList td {
	border-bottom: 1px solid lightgray;  /* DEPLOY */
	/* border: 1px solid lightgray;  DEVELOP */
	padding: 4px;
	margin: 0px;
}

table.searchedWordList td:nth-child(1) { width: var(--searchedLeft-width); text-align: right; }
table.searchedWordList td:nth-child(2) { width: var(--searchedMiddle-width); font-size: 30px; text-align: center; }
table.searchedWordList td:nth-child(3) { width: var(--searchedRight-width); text-align: left; }

table.searchedFoot {
	width: var(--outermost-width);
	/* border: 1px solid lightgray;  DEVELOP */
  	border-collapse: collapse;	
  	text-align: center;
  	font-size: 16px;
  	padding: 0px;
  	margin: 0px;
}

table.searchedFoot td {
	padding: 4px;
}

div.read {
	width: var(--outermost-width);
	/* border: 1px solid lightgray;  DEVELOP */
	overflow-y: scroll;
	padding: 10px;
	margin: 10px;
}

table.storyToRead {
	display: inline-table;
  	border-collapse: collapse;
	border: 1px solid lightgray;
	margin: 10px;
}

table.storyToRead td {
	width: var(--storyToRead-width);
	height: 768px;
	border: 1px solid lightgray;
	vertical-align: top;
	text-align: left;
	overflow: scroll;
	padding: 10px;
}

div.twoColumns {
	width: var(--outermost-width);
	border: 1px solid lightgray;
	padding: 10px;
	margin: 10px;
	font-size: 16px;
}

table.twoColumns {
	border-collapse: collapse;
	/* border: 1px solid lightgray;  DEVELOP */
	padding: 0px;
	margin: 0px;
}

table.twoColumns td {
	/* border: 1px solid lightgray;  DEVELOP */
	padding: 4px;	
}

table.twoColumns td:nth-child(1) { width: 200px; vertical-align: top; text-align: right; }
table.twoColumns td:nth-child(2) { width: 880px; }

input {
	width: 940px;
	padding: 4px;
	margin: 4px;
}

input.short {
	width: 80px;
}

input.medium {
	width: 120px;
}

input.likeAnchor[type="submit"] {
  	background: none;
  	border: none;
  	font: inherit;
  	cursor: pointer;
  	color: blue;
  	text-decoration: none;
  	padding: 0px;
  	margin: 0px;
}

input.likeAnchor[type="submit"]:hover {
  	text-decoration: none;
}

button {
	padding: 4px;
	margin: 4px;
}

textarea {
	padding: 4px;
	margin: 4px;
	overflow: scroll;
}

select {
	padding: 4px;
	margin: 4px;	
}

/*
td.alignTopRight {
	vertical-align: top;
	text-align: right;
}
*/