/* ======= site wide ======= */
img{
	max-width: 100%;
	}


a, a:hover {
	color: #A21;
	text-decoration: none;
}

body {
	margin-left: 5%;
	margin-right: 5%;
/* 	color: #777; */
color: black;
	font-family: Avenir, Helvetica, sans-serif;
	line-height: 1.4em;
}

p {
	margin-bottom: 0em;
	margin-top: 0px;
}

h1 {
	padding-top: 1%;
	margin-bottom: 0;
	 font-weight: 400; 
	font-size: medium;
	margin-top: 2em;
}

.subhead {
color: #A21;
}

h2, h3 {
	font-size:1.0em;
	margin-bottom: 0;
}

h2, h3, h4, h5, h6 {
	font-weight: 300;
}

hr {
	border-color: #A21;
	margin-top: 0.2em;
	margin-bottom:2%;
    border-width: 0;
    border-top: 1px solid #A21;
}

/* ========= header ========== */
.pageHeader {
	display: grid;
	grid-template-columns: 15em 1fr;
	grid-template-rows: 1fr;
	margin-bottom: 1em;
	font-size: medium;
}

.siteNav {
	display: flex; 
	flex-direction: column; 
	justify-content: space-between; 
	align-items: flex-end;
	margin-left: 2em;
}

.siteNav a {
	margin: 0.1em;
}

@media only screen and (min-width: 40em) {
	.siteNav {
		flex-direction: row;
		margin-left: 30%;
	}
}


@media only screen and (max-width: 20em) {
	.pageHeader {
		grid-template-columns: 10em 1fr;
	}
}

/* ===== footer ====== */
.pageFooter {
margin-top: 15px;
}

.footerContent{
	display: flex; 
	flex-direction: row; 
	justify-content: space-between; 
	align-items: baseline;
	font-size: small;
}

.copyright, .contact {
	display: flex;
	flex-direction: column;
}

@media only screen and (min-width: 24em) {
	.copyright, .contact {
		flex-direction: row;
		justify-content: space-between;
	}
}

/* ======= Page Description  =======*/

.pageDescription {
	margin: 1em;
	font-size: 1.0em;
}

.pageDescription p {
	margin-bottom: 1em;
}

/* ====== Post Nav ======== */

.postNav {
	color: #AAA;
	font-size: .9em;
	margin-bottom: 2%;
	margin-top: -1%;
}




.postNav, .indexNav {
	display: flex; 
	flex-direction: row; 
	justify-content: space-between; 
	align-items: baseline;
	flex-wrap: wrap;
}

.indexNav {
	color: #AAA;
	font-size: .9em;
	margin-bottom: -1%;
	margin-top: 1%;
}




/* ======= Dated Item WIth Blurb ===== */

.datedItemWithBlurb {
	display: grid;
	margin-left: 1em;
	margin-right: 1em;
	margin-bottom: 1em;
	grid-template-columns: 1fr;
	grid-template-rows: auto-fill 1fr;
	font-size: medium;
	grid-gap: 0.2em;
}


.datedItemWithBlurb .itemDate {
	font-size: small;
	display: none;
}

@media only screen and (min-width: 40em) {
	.datedItemWithBlurb {
		grid-template-rows: 1fr;
		grid-template-columns: 1fr 2fr;
		grid-gap: 2em;
	}
	.datedItemWithBlurb .itemDate {
		display: inherit;
	}
}

/* =======  Item WIth Blurb ===== */

.itemWithBlurb {
	display: grid;
	margin-left: 1em;
	margin-right: 1em;
	margin-bottom: 1em;
	grid-template-columns: 1fr;
	grid-template-rows: auto-fill 1fr;
	font-size: medium;
	grid-gap: 0.2em;
}

.itemBlurb p {
	margin-bottom: 1.0em;
}


@media only screen and (min-width: 40em) {
	.itemWithBlurb {
		grid-template-rows: 1fr;
		grid-template-columns: 1fr 2fr;
		grid-gap: 2em;
	}
}

/* ======== Item List With Heading ========== */

.itemListWithHeading {
	display: grid;
	margin-left: 1em;
	margin-right: 1em;
	margin-bottom: 1em;
	grid-template-columns: 1fr;
	grid-template-rows: auto-fill 1fr 1fr;
	font-size: medium;
	grid-gap: 0.5em;
}

.itemList p {
	margin-bottom: 0.4em;
}

@media only screen and (min-width: 24em) {
	.itemListWithHeading {
		grid-template-columns: 1fr 3fr;
		grid-template-rows: auto-fill 1fr;
	}
}

/* ======= Blog ======= */

.blogContent {
	display: grid;
	grid-template-columns: minmax(10em,40em);
	margin-left: 1em;
	margin-right: 1em;
	justify-content: center;
}




.blogContent p, .blogContent ul, .blogContent ol, .blogContent code {
	font-size: 1.0em;
	padding-bottom: 1.5em;

}



.blogContent code{
	padding-bottom: 2 em;
	display: block;
}


.postDate {
	font-size: .8em;
	text-align: right;
}


.post{display: flex block; 
	flex-direction: column;
}

.postTitle {display: flex; 
	flex-direction: row; 
	justify-content: space-between; 
	align-items: baseline;
	flex-wrap: wrap;
}
	
.postTitle p, .postTitle h1 {
		flex: 1;
	}




/* ========= Books and Videos - Main Page ========== */

.visualDisplayItems {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	margin-left: 1em;
	margin-right: 1em;
	grid-gap: 2em;;

}

.videoItems img {
	margin-bottom: 1em;
	margin-top: 1em;
}


.visualItem img {
	box-shadow: 0 5px 15px #AAA;		
	border:1px solid #777;
	width: 10em;
	object-fit: cover;
}

@media only screen and (min-width: 40em) {
	.visualDisplayItems {
	grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr;
	}
}


@media only screen and (min-width: 50em) {
	.visualDisplayItems {
	grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: 1fr;
	}
}

/* ========= Event Listings ========== */

.eventList {
	display: grid;
	margin-left: 1em;
	margin-right: 1em;
	margin-bottom: 1em;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto-fill 1fr;
	grid-gap: 2em;
}

.eventItem {
	display: flex; 
	flex-direction: column; 
	justify-content: space-between; 
	align-items: baseline; 
	flex-wrap:wrap;
	padding-bottom: 2em;
	font-size: medium;
}

.eventName, .eventDetail, .eventDate {
	flex: 1;
}

.eventDate, .eventDetail {
	font-size: 0.9em;
}

@media only screen and (min-width: 40em) {
	.eventList {
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	}
}

@media only screen and (min-width: 50em) {
	.eventList {
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	}
}


.eventItem {
	display: none;
}

.speaking .speakingEvent,
.training .trainingEvent,
.booking .eventItem {
	display: inherit;
}

.whatsNext .eventItem,
.speakingVideos .eventItem {
	display: inherit;
}

/*
.speakingVideos .eventItem {
	text-align: center;
}
*/

.whatsNext .blockedOutEvent,
.whatsNext .privateEvent {
	display: none;
}

.trainingSubhead {
	margin-bottom: 1.0em;
	text-decoration: underline;
}


kbd {
	color: #2165FB;
}
cite {
	color: #232323;
	font-family: "Avenir-MediumOblique";
}

/* Code location 

code cite{
	color: #737373;
	font-family: "Avenir-MediumOblique";
	font-size: 0.85em;
	text-align: left;
}
code cite strong{
	color: #000000;
}*/

.codeFilePath{
	color: #737373;
	font-family: "Avenir-MediumOblique";
	font-size: 0.85em;
	text-align: left;
}
.codeFile{
	color: #000000;
}

/* Code location */

code cite{
	color: #737373;
	font-family: "Avenir-MediumOblique";
	font-size: 0.85em;
	text-align: left;
	text-decoration: underline;
	line-height: 3em;
}
code cite strong{
	color: #000000;
	font-weight: 100;
	font-family: "Avenir-MediumOblique";
}


/* App Page */

.imageWithSideDescription {
	display: grid;
	margin-left: 1em;
	margin-right: 1em;
	margin-bottom: 2em;
	grid-template-columns: 1fr;
	grid-template-rows: auto-fill 1fr 1fr;
	font-size: medium;
	grid-gap: 4em;
}

.imageWithSideDescription .appImage
 {
	box-shadow: 0 5px 15px #AAA;		
	border:1px solid #777;
	object-fit: cover;
}

.imageWithSideDescription .appImage {
	width: 8em;
}


.imageWithSideDescription .appBlurb {
	padding-left: 0em;
}

@media only screen and (min-width: 40em) {
	.imageWithSideDescription {
		grid-template-columns: auto 1fr;
		grid-template-rows: auto-fill 1fr;
		justify-content: center;
	}
	.imageWithSideDescription .appBlurb {
		padding-left: 4em;
	}

	

}


/* End App Page */



/* Code Blocks */

/* samp is for playground response and console output.
   em is for comments
   strong is for new code */
   
  

code {
	display: block;
	color: #3242A2;
/* 	font-style: normal; */
	margin-bottom: 2em;
	padding: 1em;
	background-color:#EEE;
	overflow-x: scroll;
/*
	margin-left: -2em;
	margin-right: -2em;
*/
}

code, code em, code strong {
	line-height: 1.5em;
	font-family:    monospace;
	white-space: pre;
}


var, samp, strong, em {
	/*font-family:  Menlo, "SourceCodePro-Regular", Courier;*/
	font-family:  Menlo, Courier;
	font-style: normal;
	font-size: 1.0em;
}
var {
	color: #3242A2;
	font-size: 0.9em;
}
em {
    color: #444444;
}
strong {
	color: #B01600;
	font-weight: 100;
}
strong.remove {
	text-decoration: line-through;
}

samp {
	/*color: #CC66CC;*/
	display: block;
	font-size: 0.9em;
	color: #000000;
}

code samp {
	text-align: right;
	margin-bottom: 0em;
	margin-top: 0.5em;
	/*margin-right: 40pt;*/
	/*color: #CC66CC;*/
	display: block;
	color: #000000;
}