/*@font-face { font-family: "Open Sans"; src: url("css/OpenSans-Medium.ttf"); }*/
/*@import url(https://fonts.googleapis.com/css?family=Open+Sans);*/

body {font-family: 'Open Sans';
	font-size: 18px; 
	line-height:1.6em; 
	/*background-color: beige;*/
	width: 98%;
	max-width: 98vw;
}
.bg01{background-color: white;}
.bg02{background-color: tan;}

.smalltext {font-size:50%;}
.largetext {font-size:150%;}

.txtframe {
	/*width:90%;*/
	width:100%;
	/* offset-x | offset-y | blur-radius | spread-radius | color */
	box-shadow: 3px 4px 5px 0px rgba(0, 0, 0, 0.38);
	/* top-left | top-right | bottom-right | bottom-left */
	border-radius: 1vw 1vw 1vw 1vw;
	padding:10px;
}

.headFrame {
	box-shadow: 	3px 4px 5px 0px rgba(0, 0, 0, 0.38);
	border-radius: 	1vw 1vw 1vw 1vw;
	padding:		10px;
	width: 70vw;
	/*width: 50%;*/
/*	background-color:peru;
	border:			3px solid green;*/
}

.title	{text-align:center; vertical-align: middle; margin:auto;  	/*toCenter*/
		padding:0px; margin:0px; line-height:12px; font-size:14px;  /*nospace*/
	}



/*================ TEXT ====================*/
.txtColor1 {color:green;}
.t01 {color:red;}
.tred {color:red;}
.tgrn {color:green;}

.cour	{font-family: 'Courier New', monospace;}
.nospace{padding:0px; margin:0px; line-height:12px; font-size:14px; }
.uline	{text-decoration: underline;} 
.bld	{font-weight: bold;}
/*.bld {font: normal normal bold Open Sans ;}*/
/*.bld {font-family:Open Sans, font-weight:bold;}*/
.bigbold {font-weight: bold; font-size:200%;}
.narrow	{line-height: 1;}
.ital 	{font-style:italic;}
.lh50 {line-height:50%;}
.shad {text-shadow: -1px 3px #888;}
.dblshad {text-shadow: 2px 2px #bbb, 3px 3px #000;}
.glowShad {text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;} /*Text-shadow with a red and blue neon glow:*/
.hardShad {text-shadow: 1px 1px #999, -2px -2px #999;}

.dropcap {
	font-family: 'Verdana, sans-serif;
	font-weight: bold;
	font-style:italic;
	/*font-style:underline;*/
	float: left;
    font-size: 300%;
    line-height: 1;
    font-weight: bold;
    margin-right: 9px;
}


/*================ COLORS ====================*/
.pal01 {background-color:peru; border: 3px solid green;}
.pal02 {background-color:white; border: 3px solid red;}
.palBrn {background-color:peru; border: 3px solid brown;}

/* #paletteA.BGcolor1 		{background-color:cornsilk;}*/
/* #paletteA .TxtColor1 	{color:green;}*/
/* #paletteA BGcolor2 		{background-color:teal;}*/
/* #paletteA > span 		{color:brown;}*/
.c01{color:green;}
.cred{color:red;}
.cbrown{color:brown;}


.toCenter 	{text-align:center; vertical-align:middle; margin:auto;}
.tc 		{text-align:center; vertical-align:middle; margin:auto;}

.wid { width:99%; background-color:green; color:red; }

/*unordered list witout bullets*/
ul.no-bullets {
  list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margins */
}

.no-bullets {
  list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margins */
}


audio {
	width:100%;
	margin:auto;
	padding:2%;
	height:100px;
	}

mediadiv {
  	background-image: 	url("img/modern-gothic-dsc00389c.jpg") ;
  	//background-image: url("img/bkgd-tile_200x200.png") ;
  	/*background-repeat: repeat-y repeat-x; 	invalid code*/ 
  	background-repeat: 	repeat;  
 	//background-size: 	99%;		//scale the background image to cover the whole div
 	background-size: 	cover;		//scale the background image to cover the whole div
	//background-size: 	contain;  	//To scale the background image to fit inside the div
	}

/*==============column spillover =============*/
.fitScreen { height: 100vh; width: 100vw;}



/*========== columns ======================*/ 

.columns {
	display: flex;						/* study */
	flex-flow: row wrap;				/* study */
	justify-content: center;
	margin: 10px 0;
	border: 1px solid gray;
	}

.column {
	flex: 2;
	border: 1px solid gray;
	margin: 10px;
	padding: 10px;
	line-height:100%;
  border-top: 1px solid purple;
  border-left: 1px solid purple;
    
	}

#colum01a.column {
	flex: 1;
	border: 1px solid gray;
	margin: 2px;
	padding: 10px;
	line-height:100%;
//	height: 500px;
	height: 80vh;
	}

/*see: column focus.txt*/

/*.container {*/
.splitCol {		/*.container { renamed */
	/*shorthand for next 2 = columns: 2 200px; */
	column-count: 2;
	/*column-width: 300px;*/
	/*column-width: 50vw;*/
	/*max-width: 51vw;*/
	/*height: auto !important;*/	// full screen - no columns but will scroll for entire content
	/*height: auto ;*/			//looses column border
	/*max-height: 100vh;*/  	// truncates content on full screen
  	/*height: 500px;*/
	border: 1px dashed;
	/*overflow-y: scroll*/
	/*overflow-x: hidden;*/
	/*overflow-y: auto;*/
	/*overflow: auto;*/
	/*contain: layout paint style;*/
	}

/*========== END columns ======================*/ 






@media (max-width: 960px) {
	.splitCol {
		column-count: 1;
		column-width: 100vw;
		overflow-x: auto;
	}
} /*@media960*/
/*==============END column spillover =============*/