/* *******
* <link rel="stylesheet" type="text/css" href="frame.css">
* 
*/

* { box-sizing: border-box; } /*  */
/* html { box-sizing: content-box; }  */

/* .debug { display: none; }  */

body { 
	/* width: auto; fit-content 100vw  */
	/* margin: 0px;  */
} /* text-align: center;  */

table { margin: 0px; } /*  border: 3px dotted pink; */
.viewer { border: 1px solid black; }
iframe { margin: 0px; border-width: 0px; } /* border: 15px solid gray; */

.box,.flex,nav,main,footer,iframe,div { } /* box-sizing: border-box; */

.box       { padding: 0px 20px; display: block; } /* flow-root width: 520px; */
header    { width: 100%; }

section#main      {
			 padding: 5px;
			 width: 100%; /* fit-content  display: flex; flow */
			 /* min-width: fit-content; 70vw    */
			 /* height: auto; 100% fit-content  */
			 min-height: 70vh; /* 100vh 500px auto  */
			 /* overflow: auto; visible  "bad to styicky with auto"  */
			 display: flex; /* flow-root block  */
			 /* flex-direction: column; */
} 
	nav { 
			/* width: auto; */
			min-width: 10rem; /* 20vw */
			/* max-width: max-content; */
			flex: 0 1 auto; /* 100px  min-content */
			/* flex-basis: min-content; max-content */
			height: auto; 
			/* top: 0px; */
			padding-bottom: 20px;
			/* display: block;  inline-block */
	} /*  */
	#menu	{
			position: sticky;
			top: 10px;
			max-height: 95vh; /* */
			/* bottom: 0px */
			overflow-y: auto; /* visible */
	}
	main { 
			/* width: 100%; auto fit-content  max-content */
			/* min-width: 70vw; 100% fit-content    */
			flex: 1 1 auto; /* "for .main" 100% fit-content content min-content */
			/* height: auto; 100vh 80vh 100% fit-content */
			/* min-height: 80vh; min-content max-content  100% */
			/* max-height: 2000vh;    */
			/* overflow: auto; visible */
			/* align-content: stretch; */
			/* align-self: stretch; */
			display: flex; /* block inline-inline-block inline-flex flow flow-root */
			flex-direction: column; /* */
			padding-left: 5px;
			/* box-sizing: content-box; border-box */
			/* padding-right: 15px; */
	} /*  */
	main div:not([class]):not([id]) { /* iframe */
			width: 100%; /* */
			flex: 1 1 auto; /* */
			height: auto; /* 100% fit-content */
			/* max-height: 2000vh; */
			border: 1px solid red; /*  */
			overflow: auto; /* visible */
			display: block; /* flex inline-block */
	} 
	.viewer {
			/* box-sizing: border-box; content-box */
			/* width: 100%; fit-content auto */
			/* min-width: 100%; min-content fit-content 95% auto 100% max-content 95vw 68vw */
			/* max-width: 100%; 97% fit-content auto 100% max-content 95vw 68vw */
			flex: 1 1 auto; /* 100% content fit-content */
			height: auto; /* 80vh fit-content 100% */
			min-height: 80vh;/*  fit-content 100% auto */
			overflow: auto; /* visible hidden */
			display: flex; /* block flow-root block inline-inline */
	}
	iframe { /* viewer>div iframe    */
			/* box-sizing:; content-box "bad" border-box */
			/* width: 100%; -moz-stretch -webkit- stretch auto 100% max-content 68vw 100%; */
			min-width: min-content; /* fit-content 100% max-content auto 95% 100% 95vw 68vw */
			/* max-width: 100%; min-content 100% max-content 100vw 1000px; 80vw 50% 80% 500px fit-content max-content */
		/* 	right: 0px;
			left: 0px;
			position: fixed; */
			/* height: 100%; -moz-stretch -webkit- stretch 80vh auto 120% */
			min-height: min-content; /* 100% 80vh auto fit-content max-content */
			/* max-height: 100%; 80vh auto fit-content max-content */
			/* overflow: visible; auto */
			/* bottom: 0; */
			/* object-fit: fill; none */
			/* overflow: visible; auto */
			/* overflow: hidden; auto */
			flex: 1 1 100%; /* auto content fit-content */
			/* flex-direction: column; */
			/* flex-basis: content; */
			/* display: block; inline-flow-root block  flex */
	}
footer    { width: 100%; margin-top: 5px; padding-top: 10px; min-height: 40vh; clear: both; }

.box       { text-align: center; } /* text-align: left; border: 1px solid red;  */
header { text-align: center; }
:where(h1,h2,h3,h4,h5,h6) img {
	float: left; /* */
	/* flex: auto; */
	/* vertical-align: middle; */
}
:where(h1,h2,h3,h4,h5,h6):has(img)::after {
	content: "";
	display: block;
	clear: both;
} /* */
:where(h1,h2,h3,h4,h5,h6):has(img) {
	/* display: flex; */
	/* height: 25%; */
	vertical-align: middle; /* */
}
section#main      { border-top: 2px solid #DDDDDD; } /*   border-top: 2px solid #DDDDDD; */
  nav    { margin-right: 1px; border-right: 1px solid #DDDDDD; }
  .selectedlink { background: yellow; }
  /* main { border: 1px solid aquamarine; } background: var(--color-lavenderblush, lavenderblush);  */
  .viewer  { padding: 20px; margin: 0px; border-width: 0px; background: honeydew; } /*  */
footer    { border-top: 2px solid #DDDDDD; }

.mailaddr  { text-align: center; }
section#main      { text-align: left; font-size: 100%; }
  nav    { }
  main { text-align: left; }
footer    { text-align: center; }
footer span { font-size: 80%; font-weight: normal; }

.counter { float: left; }

/* div { margin: 2px; border: 1px solid blue; }  debug */
/* .viewer { margin: 2px; border: 1px solid blue; }  debug */
/* 
<body onload='onload()'>
<div class="box">
  <div class="header">
    <h1>memo</h1>
  </div><!-- end of header -->
  <div class="main">
    <div class="menu">
		<ol id='menu'>
		<li><a target='view' href='./memo.html' rel='noopener'>memo</a></li>
		</ol>
    </div><!-- end of manu -->
    <div class="content">
  		<div style='border: 1px solid yellow;'>test2</div>
  		<iframe id='view' name='view' class="viewer" title='viewer' src="./memo.html"></iframe>
  		<div style='border: 1px solid green;'>test</div>
    </div><!-- end of content -->
  </div><!-- endof main -->
  <div class="footer"><span>Copyright &copy; 2021</span></div>
</div><!-- end of box -->

</body>
</html>

 */