/* content.css
   This style sheet conrols items specific to the "content" window;
   that is, the large window in the lower right of the browser.
*/
html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;

}
/* class=main appears in index.htm and separates
   the title bar above from the button bar and content
   window below */
.main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background: white;
  flex: 1;
  overflow: hidden; /* Prevents body scroll */
}
@media (min-width: 768px) { /* large screens */
  .main {
    flex-direction: row;
    align-items: stretch;
  }
}
.sidebar {
  overflow-y: auto;
}
/* class=content_frame appears in index.html and wraps the
   large content window in the lower right of the browser */
.content_frame {
  flex-grow: 1;
  flex: 1;
  overflow-y: auto;
  width: 100%;
  min-height: 0;
}
@media (min-width: 768px) { /* override for large screen */
  .content_frame {
    padding: 1em;
  }
}
/* If the HTML in the content frame has a title, wrap it in
   <div class="frame_title"> */
.frame_title {
	text-align: center;
	font-size: 30px;
	font-weight: bold;
	padding-bottom: 20px;
}
/* If the HTML in the content frame has a subtitle, wrap it in
   <div class="frame_subtitle"> */
.frame_subtitle {
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	margin: 0 auto; /* horizontal center */
	padding-bottom: 30px;
}
@media (min-width: 768px) { /* large screens */
  .frame_subtitle {
	font-size: 24px;
  }
}