/* CSS as of 30Aug2020 

NOTES:
1- One obj (class) can have many superior obj - polymorphic
	- thus for example, the class .center could be used by any element like img.center and other classes. 
2- Entering img h1 p elements etc (no dot, not a class of) in CSS overrides 
	the whole native element, whereas p. etc overrides the sub-element
3- CSS files do not always update in browsers;
	force a reload in Windows with cache clear CNTL-ALT-DEL (rhs)
4-	To have class1 have exclusively sub-class2, use HTML to create a <div>
	and in CSS use .class1 {} and .class1 .class2 {}  *note the space
	https://stackoverflow.com/questions/558721/css-classes-subclasses
5-	Container approach here: note class .container is used, contradicts #2?
	https://codedamn.com/news/frontend/how-to-put-image-and-text-side-by-side-in-html
TO-DOa:
1- Flex containers

REFERENCES:
Containers with image/text
https://medium.com/@PavelLaptev/css-weekly-2-an-image-on-the-left-text-on-the-left-a5e59b2acdb5

*/

/*	||||| ||||| |||||				||||| ||||| ||||| |||||	BODY	*/

body {
	font-size: 100%
	margin: 0;
	padding: 20px;
}
.header {
	background-color: lightblue;
	padding: 10px;
	text-align: left;
}
/*	||||| ||||| |||||				||||| ||||| ||||| |||||	IMAGES	*/

/* use for responsive img */
.responsive {
	max-width: 50%;
	height: auto;
}
.center20 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 20%;
}
.center60 {
	display: block;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  max-width: 350px;
}

/* Side by side responsive - W3 */
* {
  box-sizing: border-box;
}
/*	||||| ||||| |||||				||||| ||||| ||||| |||||	CONTAINERS	*/

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

/* https://medium.com/@PavelLaptev/css-weekly-2-an-image-on-the-left-text-on-the-left-a5e59b2acdb5 */

/*.container {
	padding: 1px 1px 1px;
	max-width 650px;
}*/
  .container-image350 {
    width: 350px;
	margin: 1px 10px 1px 0;
	float: center;
  }
  .container-image100 {
    width: 100px;
	margin: 1px 10px 1px 0;
	float: left;
  }
 .container-image {
    width: 250px;
	margin: 1px 10px 1px 0;
	float: left;
	vertical-align: top;
  }
 .container-text {
    display: inline;
  }
  .container-textBottom {
	display: inline;
	vertical-align: bottom;
  }
  .container-image-center {
	   display: block;
	  margin-left: auto;
	  margin-right: auto;
	  width: 50%;
  }
/*	||||| ||||| |||||				||||| ||||| ||||| |||||	FORMAT & Grids	*/
 
hr {
	width:50%;
	text-align:left;
	height:3px;
	color:black;
	background-color:black;
}	
div.line{
	max-width:650px;
}
/* create a box with text */
div.box{
	background-color: black;
	width: 100%;
	margin: 1px;
	padding: 1px;
}
div.row{
	max-width:650px;
}
div.left {
	text-align: left;
}
div.indent {
	text-indent: 3em;
}
div.hanging {
	text.indent: -3em;
}
div.center {
	text-align: center;
}

/*	||||| ||||| |||||				||||| ||||| ||||| |||||	H1 etc	*/	
h1{
	font-family:"Trebuchet MS", Helvetica, sans-serif;
	font-size: max(2em, 6vw); 
	color:black;
}
h1.text-align-c{
	max-width:650px;
	text-align:center;
}
h2{
	font-family:"Trebuchet MS", Helvetica, sans-serif;
	font-size:1.3em;
	color:black;
}
h2.color {		
	color:black;
}
h3{
	font-family:"Trebuchet MS", Helvetica, sans-serif;
	font-size:1.1em;
	color:black;
/*	text-align:center;	*/
}
h3.italics {
	font-style: italic;
}
/*	||||| ||||| |||||				||||| |||||	POLYMORPHIC & IMAGES	*/
.left {
	display: block;
/*	margin-left: auto;
	margin-right: auto;
	text-align: center; */
}
.center {
	text-align: center;
}
.40pc {
    width: 10%;
	float: left;
  }
.250px {
	display: block;
    width: 250px;
	height: 250px;
	margin: 1px 10px 1px 0;
	float: left;
  }
.svg {
/*	display: block;
	margin-left: auto;
	margin-right: auto;*/
	width: 10%;
  }
 
	  
/*	||||| ||||| |||||				||||| ||||| ||||| |||||	Paragraphs	*/
p {
	font-family:"Trebuchet MS", Helvetica, sans-serif;
	font-size:16px; 
	color:black;
	max-width:650px;
	line-height: 1.5;
}
p.indent {
	text-indent: 20px;
}
p.smaller {
	font-size:60%;
	text-align:left;
}
p.larger {
	font-size:120%;
	font-weight:bold;
}
p.right {
	text-align:right;
}
p.lineheight {
	line-height:0.7;
}
p.center {
	text-align: center;
	font-style: italic;
}
	
font.larger {
	font-size:110%;
	color:black;
}
/*	||||| ||||| |||||				||||| ||||| ||||| |||||	TABLES	*/
table {
	font-family:"Trebuchet MS", Helvetica, sans-serif;
	font-size: 15px; 
	max-width: 650px;
	border-spacing: 15px;
	padding-left:0px;
	vertical-align: top;
	text-align: left;
}
.column1 {
  float: left;
  width: 35.0%;
  padding: 5px;
}
.column2 {
  float: left;
  width: 5.0%;
  padding: 5px;
}
.column3 {
  float: left;
  width: 60.0%;
  padding: 5px;
}

table.border {
	border: 1px solid black;
	border-spacing:2px;
	border-collapse: separate;
	margin-left: auto;
	margin-right: auto;
	font-size: 13px;
}
table.small {
	font-size: 13px;
	border-spacing:3px;
}

td.narrow {
 vertical-align: top;
 text-align: left;
 min-width: 150px;
 max-width: 150px;
 padding-left: 0px;
 font-weight:bold;
}
td.norm {
 vertical-align: text-top;
 text-align: left;
 min-width: 200px;
 max-width: 300px;
 font-style: italic;
 padding-left: 0px;
}
tr.lefttop {
 vertical-align:text-top;
 text-align: left;	 
}
td.small {
 vertical-align: text-top;
 text-align: left;
 min-width: 150px;
 max-width: 150px;
 padding-left: 0px;
/** font-size:small;**/
}
td.right {
	text-align:right;
}
td.left {
	text-align:left;
}
td.fontCN {
	font-family:"Courier New";	
} 
td.center {
	text-align: center;
}
td.lefttop {
	vertical-align:top;
}
td.vertical {
	vertical-align: middle;
}

/*	||||| ||||| |||||				||||| ||||| ||||| |||||	GRIDS	*/
.item1 { grid-area: picture; }
.item2 { grid-area: text; }

.grid-container {
  display: grid;
  grid-template-areas:
    'picture text';
  gap: 10px;
  padding: 10px;
  max-width:650px;
}

.grid-container > div {
  text-align: left;
  padding: 20px 0;
  font-size: 15px;
}
/*	||||| ||||| |||||				||||| ||||| ||||| |||||	LISTS	*/
li {
	font-family:"Trebuchet MS", Helvetica, sans-serif;
	font-size:1.0em; 
	color:black;
	max-width:650px;
}

/*	||||| ||||| |||||				||||| ||||| ||||| |||||	LINKS	*/
a:link {
  color: black;
  font-weight: normal;
  font-size:large;
  text-decoration: none;
}
a.large:link {
	color:black;
	font-weight:bold;
	font-size:1.0em;
	text-decoration:none;
}
a.large:visited {
	color:blue;
	font-weight:bold;
	font-size:1.0em;
	text-decoration:none;
}
a:visited {
  color: navy;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  color: grey;
  font-weight: normal;
  text-decoration: underline;
}
a:active {
  text-decoration: none;
}

/*	||||| ||||| |||||				||||| ||||| ||||| |||||	UTILITIES	*/
/*Floating Back-To-Top Button*/
 #myBtn {
	position: fixed;
	bottom: 30px;
	float: right;
	right: 8.5%;
	left: 87.25%;
	max-width: 40px;
	width: 100%;
	font-size: 10px;
	border-color: rgba(85, 85, 85, 0.2);
	background-color: rgb(100,100,100);
	padding: .5px;
	border-radius: 4px;
    }
/*On Hover Color Change*/
#myBtn:hover {
	background-color: #7dbbf1;
    }