/* ********************************************
  stylesjr.css

261026 Create table "clown" class for experiments.  Created simple
table "justtabs" class for frequency lists in JustRuns webpages.
261017 reduced body padding.
261014 still with simple fonts.

*/

	/*
	<!-- ------------------------------------------------- -->
	<!--   Style
		Type would default to "text/css" anyway.
		And the only defined value for "type" is "text/css".

		261014 This should be in a .css file and pulled in with a <link>?
		<link rel="stylesheet" href="styles.css">
	<style type="text/css">
	-->
	*/

	/* 261016 Need an html thingy to set background color
	outside the body?  */
	html {
		/* defined in root
		--paperyellow: #fdfdca;
		*/

		/*
		background-color: var( --paperyellow );
		background-color: #d0ffd0;
		*/
		background-color: var( --paperyellow );
	}

	/* -------------------------------------------- */

	/*
		Generally style goes in head.  Can be put in about any tag.
		Style has scope.
		Contains CSS stuff.
		If it is in <head> it is considered "Internal".
		If it is in another tag or element it is considered "Inline".
		If it is in a separate file it is considered "External".
	*/

	/* -------------------------------------------- */

	/*
		.indented
		{
			261016 There was a semicolon missing.
			padding-left: 50pt;
			padding-right: 50pt;
		}

		If the class name corresponds to a tag the style controls
		will be applied to that tag.
		A div can reference one of these with 'class="a_class_name"'.
		a_class_name {
			some_control: some_value;
		}
	*/

	/* -------------------------------------------- */

	/* Basically the place where global CSS variables are set. */ 
	/* ":root" selector selects the root element of the document */ 

	:root {
		/* 240301 My color pallet.       */
		--brightergreen: #008000;
		--lightergreen: #043200;
		--middlegreen: #034100;
		--darkergreen: #032100;
		--paperyellow: #fdfdca;		/* my official writing paper yellow */
		--yelgrnbrn: #b5a800;		/* a yellow green brown */
		--navyellow: #fffda3;
		--deeperyellow: #fffda3;
		/* more intense for dark theme nav chars. and links? */
		--yayellow: #ffff40;

		/* ------------------------------------ */
		/*  Dark set assignment.                    */
		/* Assign pallet colors to the applications. */
		/* This is the "dark" set.    */
		/* The light set is set in the ".light {" thing below. */

		--bgnav: var( --lightergreen );
		--bgbody: var( --darkergreen );
		--txtclr: var( --navyellow );
		--linkclr: var( --yayellow );
		--navlinkclr: var( --yayellow );
		--bordercolor: var( --middlegreen );

		/* ------------------------------------ */

		/* 240303  Don't see any way to make this work. */
		--srcprefix:	"./";

		/* 261016 */
		/* "Applying a visual rule inside :root can lead to
		a parsing error."
		background-color: #000080;
		*/
	}

	/* -------------------------------------------- */

	* {
		/* 240228 What does this do and why?  */
		/*
			240301 Sets things only if not already set?
			There is priority scheme I don't understand.
			Results can be viewed in
			 browser > page > right click > select.
			Something like this approximately in order:
				element css is higher.
				element style css is higher.
				* is middle high?
				parent is lower?
		*/

		/* 240301 This has been disabling for a long time.
			margin: 0;
			margin: 10px;
			padding: 10px;
		*/

		/* 240301 This had been enabled for a long time.
			I think the box-sizing is necessary.
			Should put that in the .side style?   */
		margin: 0;
		padding: 0;
		box-sizing: border-box;

		/* 240301 Messing with it.
			--bggreen: #000080 );
			color: #808080;
			background-color: #000080;
			border: 20px solid #800000;
		*/
	}

	/* -------------------------------------------- */

	/*
		while trying to get a row of images in the header.
		240229 Does it do anything?

		#images {
			white-space:	nowrap;
		}
	*/

	/* -------------------------------------------- */

	body {
		/*
		font-family: helvetica;
		font-family: verdana;
		font-family: albertus;
		font-family: "times new roman";
		*/
		font-family: verdana;
		/* Default font size is 16px. The setting here becomes
			the new default.  */
		/* <h#> bumps size relative to this value.  */
		/* Do I want 19 or the default 16? */
		/* Going with default 16 for now. 240228 */
		/*
		font-size: 19px;
		*/

		/* 240228 */
		/*
		border: 20px solid var( --bggreen );
		border: 12px solid var( --bordercolor );
		*/
		border: 8px solid var( --bordercolor );

		/* Margin is outside the border of the box.  */
		/* This give the whole page a nice outer margin.  */
		/* And our border is a nice ring with margin outside.  */
		margin: 10px;

		/* Padding is inside the border of the box.  */
		/* Spaces the content inward a bit way from the boarder. */
		/*
		padding: 30px;
		*/
		/* 261017 */
		padding: 20px;

		background-color: var( --bgbody );
		color: var( --txtclr );

	}

	.light {
		/* 240301 This is a class for body that gives the
			light color scheme.
		*/
		/* 261016 should make it a class for html?   */

		/* ------------------------------------ */
		/* Assign pallet colors to the applications. */
		/* This is the "light" set.    */

		--bgnav: var( --deeperyellow );
/* --bgnav: #bfa; */
		--bgbody: var( --paperyellow );

		/*
		--txtclr: var( --middlegreen );
		240301 Let's go with black.
		*/
		--txtclr: black;

		/*
		--linkclr: var( --middlegreen );
		240301 Let's go with a dark blue in the light color scheme.
		--linkclr: #0000f0;
		*/
		/* 240302 */
		--linkclr: var( --brightergreen );

		/*
		--navlinkclr: var( --middlegreen );
		240301 Let's go with black here too.
		*/
		--navlinkclr: black;

		/*
		--bordercolor: var( --yelgrnbrn );
		240301 At first I had this darker yellow/green/brown
		that I didn't like that much anyway.
		Let's go with this brighter green.
		But now I'm thinking go with black.
		Or maybe gray?
		--bordercolor: var( --brightergreen, #700000 );
		--bordercolor: black;
		--bordercolor: #7f7f7f;
		--bordercolor: #c0c0c0;
		--bordercolor: #cfcfcf;
		--bordercolor: #707070;
		--bordercolor: #a0a0a0;
		*/
		--bordercolor: #a0a080;

		/* ------------------------------------ */

		border: 8px solid var( --bordercolor );
		background-color: var( --bgbody );
		color: var( --txtclr );
	}

	.greenish {
		/* 240301 This is a class for body that gives the
			light color scheme.
		*/

		/* ------------------------------------ */
		/* Assign pallet colors to the applications. */
		/* This is the "light" set.    */

		--bgnav: var( --deeperyellow );
--bgnav: #af9;
		--bgbody: var( --paperyellow );
/* 240304 Yellow is kind of dingy. Green is more relaxing? */
--bgbody: #cfb;
--bgbody: #dfc;
--bgbody: #d8ffc4;	/* decent light green. */
--bgbody: #deffce;	/* trying to get lighter but still green.  not bad. */

		/*
		--txtclr: var( --middlegreen );
		240301 Let's go with black.
		*/
		--txtclr: black;

		/*
		--linkclr: var( --middlegreen );
		240301 Let's go with a dark blue in the light color scheme.
		--linkclr: #0000f0;
		*/
		/* 240302 */
		--linkclr: var( --brightergreen );

		/*
		--navlinkclr: var( --middlegreen );
		240301 Let's go with black here too.
		*/
		--navlinkclr: black;

		/*
		--bordercolor: var( --yelgrnbrn );
		240301 At first I had this darker yellow/green/brown
		that I didn't like that much anyway.
		Let's go with this brighter green.
		But now I'm thinking go with black.
		Or maybe gray?
		--bordercolor: var( --brightergreen, #700000 );
		--bordercolor: black;
		--bordercolor: #7f7f7f;
		--bordercolor: #c0c0c0;
		--bordercolor: #cfcfcf;
		--bordercolor: #707070;
		--bordercolor: #a0a0a0;
		*/
		--bordercolor: #a0a080;
/* 240304 */
--bordercolor: #a0a080;
--bordercolor: #dd0;
--bordercolor: #080;


		/* ------------------------------------ */

		border: 8px solid var( --bordercolor );
		background-color: var( --bgbody );
		color: var( --txtclr );
	}

	.yellowgreen {
		/* 240301 This is a class for body that gives the
			light color scheme.
		*/

		/* ------------------------------------ */
		/* Assign pallet colors to the applications. */
		/* This is the "light" set.    */

		--bgnav: var( --deeperyellow );
/*
--bgnav: #af9;   yucky
--bgnav: #bfa;
--bgnav: #cfb;	less yucky
--bgnav: #cfb;
--bgnav: #d8ffb8;  pretty pale.  might work.
--bgnav: #d8ffb8;
*/
--bgnav: #d8ffb8;

		--bgbody: var( --paperyellow );

		/*
		--txtclr: var( --middlegreen );
		240301 Let's go with black.
		*/
		--txtclr: black;

		/*
		--linkclr: var( --middlegreen );
		240301 Let's go with a dark blue in the light color scheme.
		--linkclr: #0000f0;
		*/
		/* 240302 */
		--linkclr: var( --brightergreen );

		/*
		--navlinkclr: var( --middlegreen );
		240301 Let's go with black here too.
		*/
		--navlinkclr: black;

		/*
		--bordercolor: var( --yelgrnbrn );
		240301 At first I had this darker yellow/green/brown
		that I didn't like that much anyway.
		Let's go with this brighter green.
		But now I'm thinking go with black.
		Or maybe gray?
		--bordercolor: var( --brightergreen, #700000 );
		--bordercolor: black;
		--bordercolor: #7f7f7f;
		--bordercolor: #c0c0c0;
		--bordercolor: #cfcfcf;
		--bordercolor: #707070;
		--bordercolor: #a0a0a0;
		*/
		--bordercolor: #a0a080;
--bordercolor: #080;

		/* ------------------------------------ */

		border: 8px solid var( --bordercolor );
		background-color: var( --bgbody );
		color: var( --txtclr );
	}

	.greenyellow {
		/* 240301 This is a class for body that gives the
			light color scheme.
		*/

		/* ------------------------------------ */
		/* Assign pallet colors to the applications. */
		/* This is the "light" set.    */

		--bgnav: var( --deeperyellow );
--bgnav: #af9;
--bgnav: var( --deeperyellow );
--bgnav: #ffffb0;

		--bgbody: var( --paperyellow );
/* 240304 Yellow is kind of dingy. Green is more relaxing? */
--bgbody: #cfb;
--bgbody: #dfc;
--bgbody: #d8ffc4;	/* decent light green. */
--bgbody: #deffce;	/* trying to get lighter but still green.  not bad. */

		/*
		--txtclr: var( --middlegreen );
		240301 Let's go with black.
		*/
		--txtclr: black;

		/*
		--linkclr: var( --middlegreen );
		240301 Let's go with a dark blue in the light color scheme.
		--linkclr: #0000f0;
		*/
		/* 240302 */
		--linkclr: var( --brightergreen );

		/*
		--navlinkclr: var( --middlegreen );
		240301 Let's go with black here too.
		*/
		--navlinkclr: black;

		/*
		--bordercolor: var( --yelgrnbrn );
		240301 At first I had this darker yellow/green/brown
		that I didn't like that much anyway.
		Let's go with this brighter green.
		But now I'm thinking go with black.
		Or maybe gray?
		--bordercolor: var( --brightergreen, #700000 );
		--bordercolor: black;
		--bordercolor: #7f7f7f;
		--bordercolor: #c0c0c0;
		--bordercolor: #cfcfcf;
		--bordercolor: #707070;
		--bordercolor: #a0a0a0;
		*/
		--bordercolor: #a0a080;
/* 240304 */
--bordercolor: #a0a080;
--bordercolor: #dd0;
--bordercolor: #080;
--bordercolor: #dc0;	/* for greenyellow class */


		/* ------------------------------------ */

		border: 8px solid var( --bordercolor );
		background-color: var( --bgbody );
		color: var( --txtclr );
	}


	/* -------------------------------------------- */
	/* -------------------------------------------- */

	nav {
		/*
			240229 Adding this to experiment with background
			colors in the nav bar.
		*/

		/* 240301 Nav just has links which have their own color.
		color: var( --txtclr );
		*/

		/* 240304 Put this here rather than sub div?  Yes.  */
		--linkclr: var(--navlinkclr);
		font-size: 20px;
		line-height: 2.0;

		/* 240304 Style 1.  Background border and yellower background color
			From 240229
		*/
		border: 4px solid var( --bgbody );
		background-color: var( --bgnav );

		/* 240304 Style 2.  Black border and global background color
		border: 2px solid black;
		*/
	}

	/* -------------------------------------------- */

	footer {
		/*
		font-family: helvetica;
		font-family: verdana;
		font-family: albertus;
		font-family: "times new roman";
		*/
		font-family: "times new roman";

		/* 240228 */
		/* border: 20px solid var( --bggreen ); */
		background-color: var( --bgbody );
		color: var( --txtclr );

		/* 240229 Adding border. */
		border: 2px solid var( --bordercolor, #884088);
	}


	/* ------------------------------------------------- */

	img {
		/* 240303 Just for fun.  */
		border-radius: 4%;
	}

	/* ------------------------------------------------- */

		/* anchor (links) aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa */
		/*  <A> is an "anchor".  */

	a:link {
		/*  link is an "unvisited".  */

		/* Default color is #0000ee   #0000ff?     */
		/*color: green;*/
		color: var( --linkclr, pink);

		background-color: transparent;

		/*
		font-weight: bold;
		*/
		/* Decoration here is the master?  'none' here clobers others? */
		/*
		text-decoration: none;
		text-decoration: underline;
		*/
		text-decoration: underline;
	}

	a:visited {
		/* Default color is #551abb   #800080?  */
		color: var( --linkclr, pink);
		font-weight: normal;
		font-weight: bold;
		/* background-color doesn't work here in visited but 
		 does in hover? */
		background-color: white;
		/*
		background-color: transparent;
		text-decoration: none;
		text-decoration: underline;
		text-decoration: none;
		*/
		/* text-decoration: none; does not work here */
	}

	/* Web 150603 says a:hover{} must come after link and visited. */
	a:hover {
		color: var( --linkclr, #7fff7f);
		/* background-color works here in hover but not visited? */
		background-color: white;
		background-color: transparent;
		text-decoration: underline;
		/* text-decoration: none; works here */
		text-decoration: none;
		text-decoration: underline;
	}

	a:active {
		/* This is when you are holding the button down on the link? */
		color: yellow;
		color: #00ff00;
		color: blue;
		background-color: transparent;
		text-decoration: underline;
		/* text-decoration: none; works here */
		text-decoration: none;
	}

	/* ------------------------------------------------- */

		/* tables  tttttttttttttttttttttttttttttttttttt */

	table.sample {
		border-width: 1px;
		border-spacing: ;
		border-style: solid;
		border-color: #00ff00;
		border-collapse: collapse;
		background-color: #ff0000;
	}
	table.sample th {
		border-width: 1px;
		/*
		padding: 0px;
		*/
		padding: 100px;
		border-style: solid;
		border-color: #0000ff;
		background-color: #e6e6e6;
		-moz-border-radius: ;
	}
	table.sample td {
		border-width: 2px;
		/*
		padding: 0px;
		*/
	padding: 20px;
		border-style: solid;
		border-color: var(--fgyellow, #884088);
		background-color: var( --bggreen, #e6e6e6);
	background-color: #000;
	background-color: #fff;
		color: var( --fgyellow, #e6e6e6);
		-moz-border-radius: ;
	}

	/* ------------------------------------------------- */

		/* For the <p> "paragraph" tag.
			Block-Level Element: It automatically starts on a new line
			and occupies the full width of its parent container.
			Automatic Spacing: Browsers automatically add a single
			blank line (top and bottom margins) before and after
			each <p> element.
			Whitespace Collapse: Browsers ignore extra whitespaces,
			tabs, and line breaks inside a <p> tag, collapsing
			them into a single space.
		*/

		/* 261026 Why is the normal modified here?
			Trying back to normal.  */
	p {
		/*
		margin: 20px;
		*/
		/* 261026 I think I'd like some margin. */
		margin: 0.1em;
	}

	/* ------------------------------------------------- */

	table.nav td {
		/* 240228 Added this to get the old table version
			nav to look better. More like before.  */
		/* 261026 Should have make it a separate class?
			Trying ".nav" now. */

		/*
		margin: 0;
		margin: 10px;
		padding: 10px;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		*/
		/*
		padding: 20px;
		border-style: solid;
		border-color: var(--fgyellow, #884088);
		*/
		padding: 20px;

	}

	/*
	 From https://www.w3schools.com/howto/tryit.asp?
	 filename=tryhow_make_a_website
	*/
	/* Column container */
	.row {  
		display: -ms-flexbox; /* IE10 */
		display: flex;
		-ms-flex-wrap: wrap; /* IE10 */
		flex-wrap: wrap;
	}

	/* Create two unequal columns that sit next to each other */
	/* Sidebar column */
	.side {
		/* 240228 */

		/* 240229 */
		border-width: 3px;

		/* 240228 What does padding do? */
		padding: 0px;
		padding: 100px;

		border-style: solid;
		/* 240229 */
		border-color: var( --bordercolor, #884088);

		-ms-flex: 30%; /* IE10 */

		flex: 30%;
		flex: 25%;
		/*
		flex: 200px;
		*/

		background-color: var( --bgbody, *400000);
		padding: 20px;

		/*
		min-width: 10px;
		max-width: 200px;
		*/
	}

	/* Main column */
	.main {   
		/* 240228  Main unique page content.  */


		border-style: solid;
		border-color: var( --bordercolor, #884088);
		/* Basically no border.   */
		border-width: 0px;

		/* Basically pointless Internet Explorer word around attempt. */
		-ms-flex: 70%; /* IE10 */

		/* This column takes 75% of the width of the window. */
		flex: 75%;

		background-color: var( --bgbody, *000040 );

		/* Padding is inside the border of the box.  */
		padding: 20px;

		/*
		min-width: 100px;
		max-width: 900px;
		*/
	}

	/* Responsive layout - when the screen is less
	 than 700px wide, make the two columns stack on
	 top of each other instead of next to each other

	 240229 Do I really want it to do this?
		Just let the pictures shrink.
		240403 Seems to be another one somewhere set
		narrower width.
	*/
	@me__disable__dia screen and (max-width: 700px) {
		.row {   
			flex-direction: column;
		}
	}

	/* ------------------------------------------------- */


		/* ---------------------------------------- */
		/* tables  clown */

		/* 261026 The table clown class has bizarre formating
			and may be useful/helpful for experiments.  */

	table.clown {
		border-width: 8px;
		/*
		border-spacing: ;
		*/
		border-spacing: 50;
		border-style: dashed;

		border-color: #00ff00;
		border-color: #0000ff;
		border-color: #ff0000;

		/*
		border-collapse: collapse;
		*/

		/*
		background-color: #ff0000;
		background-color: #f00;
		Between the individal cell borders?
		Is table background not cell background?
		background-color: #0f0;
		*/
		background-color: #00f;
	}

	table.clown th {
		border-width: 8px;
		padding: 0px;
		border-style: dotted;
		/*
		border-color: #0000ff;
		border-color: #f00;
		*/
		border-color: #f00;

		/*
		background-color: #e6e6e6;
		background-color: #8080ff;
		*/
		background-color: #8080ff;

		-moz-border-radius: ;
	}

	table.clown td {
		border-width: 8px;
		padding: 0px;
		border-style: outset;
		/*
		border-color: #8080ff;
		border-color: #f00;
		border-color: #0f0;
		*/

		/*
		background-color: #80ff80;
		background-color: #00f;
		background-color: #0f0;
		*/

		color: #ff8080;
		color: #ff0000;
		color: #00f;
		color: #000;

		-moz-border-radius: ;
	}

	/* ------------------------------------------------- */

		/* ---------------------------------------- */
		/* tables  justtabs */

		/* 261026 The table "justtabs" class is basic with no
			borders.  It was created for the frequency lists in
			https://justruns.com/ss/trail-communications/channels-frequencies/	
		*/

	table.justtabs {
		border-style: none;
	}

	table.justtabs th {
		-moz-border-radius: ;
	}

	table.justtabs td {
		/* Inherits settings from plain "table td{" ? */

		padding: 0.1em 0.7em;

		-moz-border-radius: ;
	}

	/* ------------------------------------------------- */


		/* ---------------------------------------- */

		/* This was when I was trying to do a non-table table in nav? */
		/* Using it in the banner.    */

		/* 261026 I used this in the banner and many trail pages    */

	.fltrow {  
		border-width: 2px;
		border-style: solid;
		border-color: blue;
	}

	.fltrow::after {  
		content: "";
		clear: both;
		display: table;
	}

	.fltcol {
		float:	left;
		width:	33.33%

		/* 230304 Has to have padding for margin to work
			even if padding is 0 */
		padding:	0px;
		/* 240304 */
		margin:	3px;

		/*
		border-width: 2px;
		border-style: solid;
		border-color: var(--fgyellow, #884088);
		*/
	}

	/* ------------------------------------------------- */

		/* ---------------------------------------- */

		/* Scootch unnumbered list to the right a bit. */

	ul {
		/*
		list-style-position: inside;
		*/

		/* do nothing?
		padding-left: 200px;
		margin-left: 200px;
		*/
		padding: 0px;
		margin: 0px;

		/*  This was for debugging?
		background-color: #000040;
		*/

		/*
		https://www.w3schools.com/css/css_font_size.asp
		1em is the current font size.
		Default size in browsers is 16px.
		User controlled scaling is browser on works on things
		designated in em?
		In my Chrome the scalling appears to work on both.
		Decimal fraction em works.
		font-size: 12em;
		font-size: 1.2em;
		*/
		font-size: 19px;
	}
	ul li {
		/* do nothing?
		padding-left: 200px;
		margin-left: 200px;
		*/
		padding: 0px;
		/* This does the scootch?  */
		margin: 15px;

		/*
		background-color: #400000;
		font-size: 20px;
		*/

		/* Do nothing?
		marker-offset: 9em;
		marker-offset: 0px;
		marker-offset: 200px;
		*/
	}

	/* ------------------------------------------------- */

		/* 261026 What is this?  Do I use it?

	.container {
		position: relative;
		overflow: hidden;
		width: 100%;
		padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
	}
	/* Then style the iframe to fit in the container div with
		full height and width */
	.responsive-iframe {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}

		/* ---------------------------------------- */

	/* ------------------------------------------------- */