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

ul {
	list-style-type:circle;
}
li:hover {
	background-color: palegreen;
}

body {
    display:flex;
	flex-direction: column;
	height: 100vh;
	min-height: 300px;		/* 全体の高さ */
	width: 100%;
	min-width:50em;
}

header {
	flex-basis:3.5em;flex-grow:0;				/* ヘッダーの高さ（nav.navbar に合わせる） */
	min-height: 3.5em;
	min-width: 100%;
	vertical-align: middle;
	text-align: left;
	background:linear-gradient(to bottom, white, #F0F8FF);
	box-shadow: 2px 2px 4px 0px lightgrey;
}
header h1 {
	margin-top: 0.25em;
	margin-left: 20px;
	font-size: 18pt;
	color: gray;
}
header ul {
	position: absolute;
	right: 0em;
	top: 0em;
	white-space: nowrap;
}
header span.user {
	position: absolute;
	top: -1.25em;
	right: 0em;
	white-space: nowrap;
}
header span.user::before {
	content:"ようこそ ";
}
header span.user::after {
	content:" 様";
}

footer {
	flex-basis:3em;flex-grow:0;
	min-height: 3em;
	border: solid 1px #E8E8E8;
	min-width: 100%;
/*	position: absolute;
	bottom: 0em;
	height: 3em; */
	text-align: right;
	background-color: #F0F8FF;
	font-size: 9pt;
    z-index: 200;
}
footer div {
	height: 100%;
	padding-top: 1em;
	padding-right: 10px;
	right: 100px;
	font-size: 9pt;
	color: gray;
}

section.body {
	flex-basis:100%;flex-grow:1;
	display:flex;
	flex-direction: row;
	height: 100vh;
	min-height:200px;
}

nav {
	flex-basis:17em;flex-grow:0;
	display:flex;
	flex-direction: column;
/*	height: 100vh; */
	border: solid 1px #E8E8E8;
/*	width: 20em; */
	background-color: #F0F8FF;
}
nav section {
	flex-basis:1.3em;
	border: solid 1px #E8E8E8;
	width: 100%;
}
nav section#publishedContent {
	cursor: pointer;
}
nav div#publishedContentArea {
	background-color: white;
	visibility: visible;
}


nav section#privateContent {
	flex-basis: 200px;
	flex-grow: 1;
}
nav div#privateContentArea {
	background-color: white;
}

nav section div.title {
	background:linear-gradient(to bottom, white 0%, #F0F8FF 30%, #E8F0F8 90%);
	height: 100%
	width: 100%;
	padding-left:1em;
	font-size: 10pt;
	color: black;
}
nav section div.title:hover {
    background: radial-gradient(ellipse at center, white, lightcyan 80%);
}
nav section[id="login"] div.title:hover, nav section[id="privateContent"] div.title:hover {		/* hover でも変化しないタイトル */
	background:linear-gradient(to bottom, white 0%, #F0F8FF 30%, #E8F0F8 90%);
}

nav section div.content {
	background-color: #F0F8FF;
	margin-left:1em;
	font-size: 10pt;
	min-height: 200px;
	overflow-y: auto;
	overflow-x: hidden;
}
nav section table {
	border-collapse: collapse;
	border-spacing: 0px;
	line-height: 100%;
}
nav section table td {
	padding: 3px 0px 0px 0px;
}
nav section label {
	margin: 0px;
}

div#publishedContentArea ul, div#privateContentArea ul {
    padding-left: 1em;
}

section#information, section#contactUs {
    z-index: 100;
}
section#information div.title, section#contactUs div.title {
    z-index: 110;
}

section.content {
	flex-basis:10em;flex-grow:1;
/*	height: 100vh; */
	border: none;
/*	width: 100%; */
	background-color: white;
	padding: 5px;
}
section.content span.title {
  margin-left:0px;
  border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
  padding:0px 10px;
  background-color: blue;
  color: white;
  font-size: 12pt;
}
section.content h1 {
  margin: 0px;
  font-size:18pt;
  font-weight: bold;
  color: blue;
}
section#login div.scrollBox {
  margin: 0px 0px;
  height: 100%;
  overflow-y: auto;
}
section.content div.scrollBox {
  margin: 0px 10px;
  height: 100%;
  overflow-y: auto;
}


/* リスト */
table.list {
  margin 3px 10px;
  width:100%;
  border-collapse: collapse;
}
table.list * {
  width:100%;
}

table.list thead tr {
  border:solid 1px lightgrey;
  background-color: lightcyan;
  padding: 0px;
}
table.list thead div.container {
  padding: 0px 0px 0px 0px;
}
table.list thead div.container div {
  border-right:solid 1px lightgrey;
}
table.list thead div.container div:last-child {
  border-right:none;
}
table.list tbody div.container {
  padding: 0px 0px 0px 0px;
}
table.list tbody td {
  border:solid 1px lightgrey;
}
table.list tbody tr:nth-child(odd) {
  border:none;
  background-color: white;
}
table.list tbody tr:nth-child(even) {
  border:none;
  background-color: lightyellow;
}
table.list tbody div.container div {
  border-right:solid 1px lightgrey;
}
table.list tbody div.container div:last-child {
  border-right:none;
}

table.list div.container:nth-child(1) {
  display:flex;
  flex-direction:row;
/*  align-items:center; */
  align-items:stretch;
  width:100%;
}
table.list div.container:nth-child(1) div {
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
  margin:0px;
  padding:1px 3px;
  font-size:9pt;
}
table.list div.container:nth-child(1) div.pre {
  word-wrap: break-word;
  white-space: pre-wrap;
}
/*
table.list div.container:nth-child(2) {
  display:flex;
  flex-direction:row;
  margin:-5px 0px 1px 0px;
  width:100%;
  align-items:center;
}
table.list div.container:nth-child(2) div {
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
  padding:0px 3px;
  font-size:9pt;
}
*/
table.list div.container div:empty:before {
  content:"　";
}


table.list div.number {
  text-align: right;
}
table.list div.center {
  text-align: center;
}
/*
table.list div.pre {
  display: block;
  word-wrap: break-word;
  white-space: pre-wrap;
}
*/

/* エラー */
div.error {
  margin-left:0px;
  border: solid 2px crimson;
  border-radius: 5px / 5px;
  padding:0px 10px;
  background-color: mistyrose;
  color: crimson;
  font-size: 12pt;
}

/* bootstrap */
.tooltip.in {
    opacity:1;
}
.tooltip.right .tooltip-arrow {
    border-right:5px solid khaki;
}
.tooltip-inner {
    box-shadow: 3px 3px 5px 0px lightgrey, 1px 1px 3px 0px #CCC inset;
	border-radius: 10px / 10px;
	border:5px solid khaki;
    background-color: lightyellow;
	color: black;
}