/* styles.css for http://jayts.com/computingliberty */

@import "/css/normalize.css";

/* *************** Global Settings ********************* */

html, body
{
	overflow: visible;
	color: rgb(0%,0%,0%);  /* black #000 */
	background-color: rgb(100%,100%,100%);  /* white #fff */
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 100%;

	margin-left:  2px;
	margin-right: 2px;
	box-sizing: border-box;
	width: calc(100% - 4px);
}

/* ************** <h1> through <h6> **************** */

h1, h2, h3, h4, h5, h6 { color: blue; }

h1 { font-size: 120%; }
h2 { font-size: 100%; }
h3 { font-size:  90%; }
h4 { font-size:  80%; }
h5 { font-size:  70%; }
h6 { font-size:  50%; }

.hidden
{
	display: none;
}

/* *************** Monospace Text ******************* */

pre, tt { font-family: "Lucida Console", "Lucida Sans Typewriter", Monaco, monospace; }

.code
{
	font-family: "Lucida Console", "Lucida Sans Typewriter", Monaco, monospace;
	padding: 2px;
	border-width: 1px;
	width: fit-content;
	border-color: rgb(20%,20%,20%);
	border-style: solid;
	background-color: rgb(80%,95%,100%);
}

/* *************** Header *************************** */

header
{
	display: inline;
}

div.header
{
	display: grid;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	white-space: nowrap;
}

span.header_left
{
	display: inline-grid;
	grid-row: 1 / 1;
	grid-column: 1;
	overflow: visible;
	background-color: rgb(100%,100%,100%);  /* white #fff */
	width: 16vw;
	height: auto;
	margin-left: 2vw;
}

/* At the top, to the right of the Jay Ts logo. Title for the page. */

span.header_right
{
	display: inline-grid;
	grid-row: 1 / 1;
	grid-column: 2;
	overflow: visible;
	color: rgb(30%,30%,30%);	/* gray */
	background-color: rgb(100%,100%,100%);  /* white #fff */
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 4vw;
	transform: translate(calc(150px - 18vw),calc(60px - 0.6em));
}

/* Paragraphs */

p
{
	margin-left: 0.5em;
	margin-right: 0.5em;
}

/* List elements */

ul li
{
	margin: 0.3em;
}

/* *************** Link Behavior ********************** */

a
{
	text-decoration: none;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	color: rgb(0%,0%,100%); /* bright blue #00f */
}

a:link
{
	color: rgb(0%,0%,100%); /* bright blue #00f */
}

a:visited
{
	color: rgb(20%,20%,100%); /* lighter blue */
}

/* :hover must be specified after :visited */

a:hover
{
	color: rgb(0%,67%,0%); /* medium green #0a0 */
}

/* while it's being clicked */

a:active
{
	color: rgb(100%,6.7%,40%); /* bright magenta-red #f16 */
}

/* Link behavior for links that do not change on hover, active, visited. */

a.plain
{
	text-decoration: none;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	color: rgb(0%,0%,0%); /* black #000 (same as default text color) */
	font-weight: bold;
}

a.plain:link
{
        color: rgb(0%,0%,0%); /* black #000 (same as default text color) */
}

a.plain:visited
{
	color: rgb(0%,0%,0%); /* black #000 */
}

a.plain:hover
{
	color: rgb(0%,67%,0%); /* medium green, same as default link behavior #0a0 */
}

a.plain:active
{
	color: rgb(100%,6.7%,40%); /* bright magenta-red. Same as default link behavior #f16 */
}

/* ********** Top Intro ************* */

img.myphoto
{
	height: 300px;
	width: auto;
	max-width: 200px;
}

/* ********** Top Intro Grid ************* */

/* Grid Item 1 */

div.grid_item1
{
	display: inline-grid;
	grid-row: 1 / 1;
	grid-column: 1 / 1;
}

/* Grid Item 2 */

div.grid_item2
{
	display: inline-grid;
	grid-row: 1 / 1;
	grid-column: 2 / 2;
}

/*
div.features
{
	min-height: 14vw;
        padding: 1em;

	text-align: center;
        font-size: 105%;
        font-weight: bold;
}
*/

/* Grid Item 3 */

div.grid_item3
{
	display: inline-grid;
	grid-row: 1 / 1;
	grid-column: 3 / 3;
}

div.summary
{
	background: transparent;
        min-height: 14vw;
	margin-top: 0.5em;
}

div.col3_title
{
	font-size: 125%;
	color: rgb(0%,0%,100%);
	margin-top: 0.5em;
	margin-bottom: 0;
	max-width: 19em;
}

div.col3
{
	font-size: 110%;
	margin-top: 0;
}

/* Where is ul.col3 used? It is no longer in the intuitive coaching page. */
ul.col3
{
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	margin-left: 2em;
}

ul.col3 li
{
	margin-top: 1em;
	margin-bottom: 1em;
}

div.top_intro
{
	display: grid;
}

div.summary
{
	background: transparent;
        min-height: 14vw;
	margin-top: 0.5em;
}

/* ************************* Div styles ********************** */

/* Section Headings */

div.stripheader
{
	color: black;
	background-color: rgb(80%,80%,80%);

	border-width: 1px 2px;
	border-color: black;
	border-style: solid;

	padding-bottom: 4px;
	padding-top:    3px;
	padding-left: 2em;

	margin-top:    6px;
	margin-bottom: 8px;

	text-align: center;
	font-size:   100%;
	font-weight: bold;

	box-sizing: border-box;
	overflow: visible;
	width: 100%;
	min-width: fit-content;
}

div.subheader
{
	color: black;

	border-width: 1px 2px;
	border-color: black;
	border-style: solid;

	padding-bottom: 4px;
	padding-top:    3px;
	padding-left:  1em;
	padding-right: 1em;

	margin-top:    6px;
	margin-bottom: 8px;
	margin-left: 0.5em;	/* Indent */

	font-size:   100%;
	font-weight: bold;

	box-sizing: border-box;
	overflow: visible;

	width: fit-content;
}

/* Git Repos */

.repo_header
{
	text-align: center;
	font-size: 175%;
	font-weight: bold;
}

.repo_description
{
	font-size: 120%;
}

/* Git repos for Pico Projects */

.project_header
{
	font-size: 135%;
	font-weight: bold;
}

.project_description
{
	font-size: 100%;
}

.columns	/* Can be used with <div>, <p>, and others. */
{
	column-width: 25em;	/* automatically chooses the number of columns */
	margin-left: 0.5em;
	margin-right: 0.5em;
}

div.banner
{
	text-align: center;
}

.largebold
{
	font-size: 125%;
}

.blue
{
	color: rgb(0%,0%,100%);
}

.largeboldblue
{
	font-size: 125%;
	color: rgb(0%,0%,100%);
}

.largeteal
{
	font-size: 125%;
	color: rgb(0%,50%,50%);	/* slightly-light teal */
}

/* Center text */

.center { text-align: center; }

/* Center the containing box */

.centercontent
{
	display: grid;
	justify-content: center;
	margin: 1em;
}

.strikeout
{
	text-decoration: line-through red;
}

div.vertspace
{
	margin-bottom: 20em;
}

div.footer
{
	font-size: 75%;
	margin-bottom: 5px;
}

/* ****************** Span styles ******************** */

/* Error message from SSI failure */

span.errormsg
{
	color: red;
	font-style: italic;
}

span.mvrt
{
	padding-left: 1em;
}

/* *********************************************** */
/* ******************* MOBILE ******************** */
/* *********************************************** */

/* Samsung Galaxy S8+ width is 980 px */

@media screen and (max-width: 992px)
{
	html { font-size: 80% }

	body {
		font-size : 1.5em;
	}

	h1, h2, h3, h4, h5, h6 { color : blue; }

	h1 { font-size : 1.7em; }
	span.h1size { font-size : 1.7em; }
	div.h1size { font-size : 1.7em; }

	h2 { font-size : 1.4em; }
	span.h2size { font-size : 1.4em; }
	div.h2size { font-size : 1.4em; }

	h3 { font-size : 1.2em; }
	span.h3size { font-size : 1.2em; }
	div.h3size { font-size : 1.2em; }

	h4 { font-size : 1em; }
	span.h4size { font-size : 1em; }
	div.h4size { font-size : 1em; }

	h5 { font-size : 0.84em; }
	span.h5size { font-size : 0.84em; }
	div.h5size { font-size : 0.84em; }

	h6 { font-size : 0.7em; }
	span.h6size { font-size : 0.7em; }
	div.h6size { font-size : 0.7em; }

	pre, kbd { font-family : Courier, monospace; }

	img.myphoto
	{
		width: 50%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}

	img.map
	{
		width: 100%;
		height: auto;
	}

	img.gridphoto300
	{
		width: 50%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}

	/* Mobile: Grid Item 2 */

	div.grid_item2
	{
		grid-row: 2 / 2;
		grid-column: 1 / 1;
		padding-bottom: 0;
		border-bottom: 0;
		margin-bottom: 0;
	}

	/* Mobile: Grid Item 3 */

	div.grid_item3
	{
		grid-row: 3 / 3;
		grid-column: 1 / 1;
		margin-top: 0;
		padding-top: 0;
		border: 0;
	}

	/* Mobile: Grid Item 4 */

	div.grid_item4
	{
		grid-row: 4 / 4;
		grid-column: 1 / 1;
		margin-top: 0;
		padding-top: 0;
		border: 0;
	}

	/* Mobile: Top Intro Grid */

	div.top_intro
	{
		display: grid;
		justify-content: initial;
	}

	span.header_left
	{
		display: grid;
		grid-column: 1 / 1;
		grid-row: 1;

		width: auto;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}

	img.logo
	{
		width: 100%;
	}

	span.header_right
	{
		display: grid;
		grid-column: 1 / 1;
		grid-row: 2;

		color: rgb(0%,50%,50%);	/* slightly-light teal */
		font-family: Arial, Verdana, Helvetica, sans-serif;
		font-size: 8vw;
		width: auto;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 1vw;
		transform: none;
	}

	div.stripheader
	{
		padding-left: 0.5em;
	}

	div.subheader
	{
		padding-left: 0.5em;
		padding-right: 0.5em;
	}

	/* Mobile: Misc stuff */

	img { border : 0; }

	/* Mobile: Footer */

	div.footer
	{
		font-size: 50%;
	}

}

/* End */