/* Style sheet for OpenTX Clinic
	Based on the one for Ethos Clinic
   Mobile first, with media queries for larger devices
   Author: M. Shellim
   Date: 2 July 2021
*/

@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@1,300&display=swap'); 

/* || COLORS */
:root {
	--menu_color: #72727eff; /* sonic silver */
	--menu_bg_color:#d4f1ff;
	--menu_hover:#eff7fd;
	--masthead_bg_color:#369AD9;
	--link_color:#369AD9;
	--table_header_background: #e8e8e8;
	--table_background_color: #f3f3f3;
	--img_caption_background: #fcfcfc;
	--sidebar-a-color:#72727eff;
	--codeblock-bg-color:#ecfcec;
	--code-comment-color:darkgreen;
	--code-section-color:black;
	--newsflash-bg-color:#f4f4f4;
	--newsflashloud-bg-color:#f5cdad;
	--download-bg-color:#c4ffc4;
	--toc-bg-color: #fffae5;
	/* --toc-color: #f00; */
	}  

/* || BODY */

body {
	margin:auto;
	padding:10px;
	max-width: 1000px;
	color:#333;
	background-color:white;
	overflow:scroll;
}

/* || GRID LAYOUT 
   Grid is three rows, two columns
   Mobile layout below, media queries for larger devices 
   grid-area: row-start / col-start / row-end / col-end 
   after https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area
*/

#grid-container {
	display: grid;
	grid-template-rows: 70px 1fr;
   grid-template-columns: 115px 1fr;
}

#sidebar {grid-area: 2 / 1 / 3 / 2;} /* start-row / start-col / end-row / end-col */
#masthead {grid-area: 1 / 1 / 2 / 3;}
#logo {	grid-area: 1 / 1 / 2 / 2;}
#banner {grid-area: 1 / 1 / 2 / 3;}
#content{grid-area: 2 / 2 / 3 / 3;}

 
#content { margin: 15px 15px 0px 15px; }

#logo img { /* Hide the logo on small devices */
    display:none;
	}

/* || fonts and font sizes */

/*
px  rem
10	0.625
12	0.75
14	0.875
16	1
18	1.125
20	1.25
24	1.5
26	1.625
30	1.875
32	2
*/

body {
    font-family: Arial, Helvetica, sans-serif;
	font-size:1rem; 
	line-height: 1.5;
	}

h1 {font-family: Verdana, Arial, Helvetica, sans-serif;
	}
	

#banner {
    font-family: 'Merriweather Sans', sans-serif;
	font-size:1.875rem; 
    font-style: italic;
	line-height: 1; /* to prevent overflow when wrapping */
	}

#menu {
	font-size: 0.875rem; 
	line-height: 1.2;
	}


/*|| COMMON STYLING */

#banner {
	grid-area:1 / 1 / 2 / 3;
	color: white;
	padding: 0 0 0 10px;
	margin: auto 0;
	}
	
#masthead {
	background-color: var(--masthead_bg_color);
}


/* || link styling */

a:link 		{color: var(--link_color); text-decoration:none; }
a:visited 	{color:var(--link_color); text-decoration:none; }
a:hover 	{color:var(--link_color); text-decoration:underline; }
a:active 	{color:var(--link_color); text-decoration:none; }

/* || GENERAL STYLES  */

dd {margin-bottom:0.5em;}
dt {font-style:italic;}

/* line up lists with left edge of surrounding text  */
#content ul, #content ol {
	padding-left:20px;
	}

.itsnew {
	color:red; 
	font-weight:bold;
	font-style:italic;
}

/* || IMAGES */

img {
	max-width:100%;
	border:1px gray dotted;
	}

img.noborder {
	border:0px
	}

/* style images and captions as a table, so we can shrink the caption  to fit the image */
.imgandcaption {
	display:table;
	margin: 1em 0;
	border-style: solid;
	border-color: lightgrey;
	border-width:1px 1px 0px 1px;
	}

.imgandcaption img {
	display:table-cell;
	max-width:100%;
	/* border:0px; */
	}

.imgandcaption p {
	display:table-caption;
	caption-side: bottom;
	border-style: solid;
	border-color: lightgrey;
	border-width:0px 1px 1px 1px;

	background-color:var(--img_caption_background);
	padding:0.3em 0.5em;
	margin:0;
	font-size:0.7em;
	font-style:italic;
	/* border: 1px lightgrey solid; */
	}

 .imgandcaption.small {max-width:200px;}
 .imgandcaption.medium {max-width:400px;}
 img.medium {max-width:400px;}
 .imgandcaption.large {max-width:700px;}
 .imgandcaption.screenshot {max-width:600px;}
 .imgandcaption.wide {max-width:900px;}


/* || TABLE STYLING */

table.compact_table {
	font-family: verdana, Arial, Helvetica, sans-serif;
	font-size:0.75rem;
	line-height:1.4;
	background-color: var(--table_background_color);
	border: 1px dotted #ccc;
	margin: 1.3em 0 1.3em 0;
	border-collapse: collapse;
}


table.compact_table p{
	margin: 0px;
	padding: 0;
}

table.compact_table td, th {
	border: dotted #ccc 1px;
	vertical-align: top;
	padding: 0.2em 0.6em;
	}
	
table.compact_table th {
	font-style: normal;
	font-weight: bold;
	background-color: var(--table_header_background);
}

table.compact_table th {
	text-align:left;
}


/* || OVERRIDES */

#content h1:first-child {
	margin-top: 0px;
}

/*
a[href^="http"] {
  background: url("/edgetx/external-link-52.png") no-repeat 100% 0;
  background-size: 1rem 1rem;
  padding-right: 1.2rem;
	margin-right:0.2rem;
}
*/
  
/* || MENU
    Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/
    
    Consider converting to collapsible menu using CSS-only
    after https://www.youtube.com/watch?v=POxn1x3kAyY 
*/

#menu {
	 display:flex;
	 flex-direction:row;
	 flex-wrap:wrap;
	 justify-content:space-between;
	 padding: 1vh 0.75vh 1vh 0.75vh;
	 background-color:var(--menu_bg_color); /*#af46a3ff; */
	 font-family: Tahoma, sans-serif;
}

#menu p  {  /* category heading */
	color: var(--menu_color);
	font-weight:bold;
	padding: 1px 0px 0px 2px;
	margin:0px;
}
	
#menu div { /* group of menu items starting with a header and followed by individual items */
  padding-top:10px;
  }

	
#menu li {  /* list item containing <a> */
	list-style:none;
	padding:0px;
	margin:0px;
    padding: 1px 3px;
    margin:0;
    border-bottom:lightgray dotted 1px;
	}
	
#menu li:has( a:hover ) {  /* for unknown reason need spaces around :has argument. */
	background-color:var(--menu_hover);
	border-radius: 5px;
	}
	
#sidebar #menu li.activeitem {  /* active list item */
	background-color: var(--masthead_bg_color);
	border-radius: 5px;
	}
	
#menu li.activeitem a:link,
#menu li.activeitem a:visited,
#menu li.activeitem a:hover,
#menu li.activeitem a:active {
	color:white;
	}
	
#menu ul {
	padding:0px 2px 2px 2px;
	line-height:1.2;
	margin:0px;
	}

#sidebar a:link, #sidebar a:visited, #sidebar a:hover, #sidebar a:active {
	color:var(--sidebar-a-color); text-decoration:none;
	}


/* || SPECIFICATION BLOCK (flexbox) */

#specification {
	display:flex;
	flex-direction: row;
	justify-content: flex-start;
	/* justify-content: space-around; */
	align-items: flex-start;
	margin-bottom:2em;
	font-size:0.875rem;
	flex-wrap: wrap;
}

#specification > div {
    margin:0.5em;
	width:20em; 
}

#specification h4 {
    font-style:italic;              
	margin:0;
	padding:0;
	}
    
#specification p {
    margin:0;
    padding:0 0 0 1em; 
    }

#specification p::before {
    content: "- ";
    }

    
/* || AUTHOR DETAILS */

#docinfo {
    font-size: 0.875rem;
    width: fit-content;
    padding: 0.3em 0.6em;
    margin-top: 2em;
    font-style: italic;
    border-top: 1px solid;
    border-color: #CCCCCC;
}

#docinfo p {
	margin:0px;
	padding:0px;
}


/* || FOOTER */

.footer {
    font-style: italic; 
    font-size: 0.875rem;
    }


/* || NEWS FLASH - used in template pages, probably needs renaming */

div.newsflashquiet {
	/* color: #863737; */
	border: 1px solid;
	border-color:#ccc;
	border-radius: 9px;
	background-color: var(--newsflash-bg-color);
	padding: 0.5em 0.75em;
	margin:1em 2em 1em 0px;
	width: fit-content;
	font-size:0.875rem;
	}

div.newsflashquiet p {
	margin:0px;
	padding:0px;
	}
	
div.newsflashloud {
	/* color: #863737; */
	border: 1px solid;
	border-color:#ccc;
	border-radius: 9px;
	background-color: var(--newsflashloud-bg-color);
	padding: 0.5em 0.75em;
	margin:1em 2em 1em 0px;
	width: fit-content;
	font-size:0.875rem;
	}

div.newsflashloud p {
	margin:0px;
	padding:0px;
	}

/* || CODE BLOCK */

div.codeblock {
  margin:1em 0 1em 0;
  padding: 0.2em 2em;
  text-indent:-1.5em;
  background-color: var(--codeblock-bg-color);
  font-family:monospace;
  font-size: 1rem;
  max-width: 40em;
  border: lightgray dotted 1px;
  border-left: lightgreen solid 5px;
}

.codeblock p {
	margin:0;
  	padding:0;
  }
  
 .codeblock .comment {
 	color:var(--code-comment-color);
	}

div.codeblock p.section {
	font-weight:bold;
	color: #a5702a;
	}
	
/* || DOWNLOAD */

div#download {
	max-width:25em;
	border-radius: 20px;
	background-color:var(--download-bg-color);
	padding: 1em;
	margin-bottom: 2em;
	}

div#download h3:first-child {
    margin-top: 0px;
	margin-bottom: 0.5em;
}

div#download h4 {
	margin-top:0.5em;
	margin-bottom:0.5em;
}

div#download ul {
	margin-top:0.5em;
}


.subscript {
	vertical-align:sub;
	font-size:smaller;
	}


/* || TABLE OF CONTENTS (generated in toc.js) */

#ToC{
	/* display:inline-block; */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.75rem;
	background-color:var(--toc-bg-color);
	border-radius: 1em;
	border: 2px solid lightgray;
	padding: 1em;
	margin: 1em 0;
	width: fit-content;
	/* color: var(--toc-color); */
}

#ToC div {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	width:fit-content;
	}

#ToC > div {
	min-width: 200px;
	margin-right: 2em;
	}

#ToC ul {
	padding: 0 0 0 20px;
	margin: 0;
	margin-right: 2em;
}

#ToC h3 {
	margin: 0;
	padding:0;
}

.toclink {
	display:block;
	width:fit-content;
	background-color:var(--toc-bg-color);
	padding: 0em 0.6em;
	font-size:0.75rem;
	border:1px solid lightgrey;
	border-radius: 0.5em;
	margin: 1em 0em 1.5em 0em;
	}


/* || MEDIA QUERIES */

/* 
after https://ricostacruz.com/til/css-media-query-breakpoints 
(default)	Mobile-portrait
min-width: 480px	Mobile-landscape (and larger)
min-width: 768px	Tablet-portrait (and larger)
min-width: 992px	Tablet-landscape (and larger)
min-width: 1200px	Laptops (and langer)
*/

@media only screen and (min-width: 480px) {

	#banner {grid-area: 1 / 2 / 2 / 3;}
	
	#grid-container {
		grid-template-columns: 130px 1fr;
	}
	
	#logo img {
		display:block;
		max-width:100%; 
		padding:10px 0 0 8px;
	}
/*	
	#banner { font-size:30px; }
	#menu { font-size:14px;}
	body {
		font-size:0.9rem;
		line-height:1.4;}
*/
	/* debug      
	#banner::before {
		content:" >= 480px "
	*/
}
 
@media only screen and (min-width: 768px) {

    
    /* debug
    #banner::before {content:" >= 768px " }
    */ 
}

@media only screen and (min-width: 992px) {
    
  /*  
    #banner::before {content:" >= 992px " }
  */  
}