/* @import url(//fonts.googleapis.com/css?family=Open+Sans);  */
@import url(//fonts.googleapis.com/css?family=Raleway);

:root {
	--html-text--color: LightGray;

	--body-bg-color: black;

	--banner-text-color: white;

	--menuBar-background-color:#555;
	--menuBar-text-color: White;
	--menuBar-border-top:1px solid #CCC;
	--menuBar-link-color: #999;
	--menuBar-hover-color: white;

	--whiteColumn-background-color: #333;

	--link-color: LightBlue;
	--link-hover-color:White;

	--menu-current-link-color: White;
	--current-link-hover-color: White;

	--tintbox-odd-bg-color: var(--whiteColumn-background-color);
	--tintbox-odd-text-color: White;

	--tintbox-even-bg-color: #222;
	--tintbox-even-text-color: White;
	--tintbox-even-border-color: #111;

	--image-border-color: Gray;
	--image-border: 2px solid var(--image-border-color);

	--quotation-color: White;
}


html, body {
	background-color: var(--body-bg-color);
}


html, body {
	color: var(--html-text--color);
	font-family: 'Raleway', sans-serif;
	font-weight:100; 
	height: 100%;
	font-size: calc(0.5em + 1.0vw); /* This lets text change when zoom in and out */
	/* Replace Raleway's text figures (letters which reach below the line) with Lining figures */ 
	/* See https://www.codesmite.com/article/fixing-raleway-and-similar-fonts-numerals */
	-webkit-font-feature-settings: "lnum";
	-moz-font-feature-settings: "lnum";
	font-feature-settings: "lnum";
	margin: 0px;
    padding: 0px;
}

.banner {
	top:0px;
	width:100%;
	color:var(--banner-text-color);
	font-weight:100;
	font-size:4vw;
	padding-top:15px;
}

.menuBar {
	background-color:var(--menuBar-background-color);
	/*height:3vw;*/
	line-height: 3.5vw; /* puts text in vertical center of div */
	width:100%;
	color: var(--menuBar-text-color);
	font-size:2.0vw;
	font-weight: 700;
	border-top: var(--menuBar-border-top);
	text-transform: uppercase;
	/* word-spacing: 200%;	this doesn't work on Chrome */
	word-spacing:0.7vw;
	/* top-left corner,  top-right corner, bottom-right corner,  bottom-left corner */
	border-radius: 10px 10px 0 0;
	margin-left:auto;
	margin-right:auto;
	display:block;
	text-align:center;
}

.menuBar a {
	text-decoration: none;
	color: var(--menuBar-link-color);
	vertical-align: middle;
}

.menuBar a:hover {
	color: var(--menuBar-hover-color);
}

/* This is the correct order: Link, Visited, Hover, Active */

a.menuCurrentLink {
	background-color: black;
	padding-left:1vw;
	padding-right:1vw;
	padding-top:0.4vw;
	padding-bottom:0.3vw;
	margin-top:0.5vw;
	margin-bottom:0.5vw;
	border-radius:1vw;
	color:var(--menu-current-link-color);
	font-weight: 900;
}

a.menuCurrentLink:hover {
	color:var(--current-link-hover-color);
}


.whiteColumn { 
	background: var(--whiteColumn-background-color);
	text-align: justify;
	margin:auto;
	display:block;
	border-radius:10px;
	max-width:1600px;
}


.insideWhiteColumn {  /* top right bottom left*/
	padding: 0 3vw 3vw 3vw;
}

.tintBoxes {
	padding:15px;
}

/*odd and even row striping */
.tintBoxes > :nth-child(odd)  {
	background: var(--tintbox-odd-bg-color);
	color:var(--tintbox-odd-text-color);

}

.tintBoxes > :nth-child(even)  {
	background: var(--tintbox-even-bg-color);
	color:var(--tintbox-even-text-color);
	padding: 1.5vw;
	border-radius:1vw;
	margin-left:2.5vw;
	margin-right:2.5vw;
	border:1px solid var(--tintbox-even-border-color);
}


strong{
	font-weight:900;
}

img.okSize {
	max-width:25%;
}

img.smallerSize {
	max-width:12%;
}

img.niceImage {
	border: var(--image-border);
	/* offset-x | offset-y | blur-radius | spread-radius | color */
	box-shadow: 2vw 2vw 5vw #000;
}


img.far-left {
    float: left;
    margin-right: 2vw;
    margin-bottom: 0.3vw;
	margin-top: 1vw;
}

img.far-right {
    float: right;
    margin-left: 2vw;
    margin-bottom: 0.3vw;
	margin-top: 1vw;
}

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
	
.centeredText {
	display: block;
	margin-left: auto;
	margin-right: auto;
}	

p {
	text-align:justify;
}

h1                { font-size:150%;  font-weight:bold; color:#ED6C14; }
h2                { margin-bottom:-1vw;font-size:125%;  font-weight:bold; color:White;}
h3                { font-weight:bold;  margin-bottom:-15px; }

 .heading2 {
	 margin-top:2vh;
	 font-size: 115%;
	 font-weight: bold;
	 color: White;
 }

.articleTitle {
	font-size:135%;
	color: var(--menuBar-text-color);
	text-align:center;
	background-color: var(--tintbox-even-bg-color);
	padding:1vw;
	max-width: 90%;
	margin:auto;
	display:block;
	border-radius:10px;
}

a {
	color:var(--link-color);
	text-decoration:underline;
}

a:hover {
	color: var(--link-hover-color);
	text-decoration:underline;
}

ul li {
		margin-top: 1em;
	}

ul li .keyword {
	font-size: 125%;
	font-style: italic;
}	

.galleryImageTable  {
	text-align:center;
	table-layout: fixed;
	width: 100%;   
}
 

.galleryImageTable img {
	margin-top: 25px;
	margin-bottom: 5px;	
	margin-right: 25px;
	max-width:85%;
	border: var(--image-border);
	box-shadow: 8px 8px 30px #000;
}

.dropShadowImage {
	border: var(--image-border);
	box-shadow: 8px 8px 30px #000;
}

.responsive-youtube
{overflow:hidden; padding-bottom:56.25%; position:relative; height:0;}

.responsive-youtube iframe
{left:0; top:0; height:100%; width:100%; position:absolute;}

.buttonLinkLeft, .buttonLinkRight {
	padding: 1vw;
	box-shadow: 1vw 1vw 2vw Black;
	background-color: white;
	color: Black;
	border-radius: 0.6vw;
	text-decoration: none;
}

.buttonLinkLeft:hover, .buttonLinkRight:hover {
	color:black;
}

.buttonLinkLeft {
	float:left;
}

.buttonLinkRight {
	float:right;
}

.quotation {
	margin-left: 8%;
	margin-right: 8%;
	font-style: italic;
	color: var(--quotation-color);
}

.quote {
	font-style: italic;
	color: var(--quotation-color);
}

.introText {
	color:lightGray;
	font-size:85%;
}

.middleWayImage {
	margin-top: 25px;
	margin-bottom: 5px;
	margin-right: 25px;
	max-width: 85%;
	border: var(--image-border);
	box-shadow: 8px 8px 30px #000;
}

 .viddyDiv {
	 width:60vw;
	 height:34vw;
	 box-shadow: 2vw 2vw 5vw #000;
	 /*margin-left:40px;  !* same as standard UL LI spacing *!*/
 }

.viddy {
	display:block;
	width:60vw;
	height:34vw;
	border: 0.2vw solid Gray;
	/*border-radius:10px;*/
}

.marginLikeLIMargin {
	margin-left:40px;
}

.audioTextIcon {
	width:3vw;
	height:auto;
	margin-bottom:-0.5em;
	margin-left:0.4vw;
}

audio {
	width:45vw;
	vertical-align: middle;
	background-color:black;
	/*border: 0.2vw solid Gray;*/
	/*border-radius:5px;*/
}

.whiteyWhite {
	color:white;
	font-size: 110%;
}