/* 

*********************************************    NOTE - TURN OFF BROWSWER CACHING  ********************************************************************
*********************************************    NOTE - TURN OFF BROWSWER CACHING   ********************************************************************

2023-02-26  I was tyring to modify H3 spacing and couldn't figure out why I could see local changes to the .css file but not remote changes.  It finally
occured to me it was a cache issue. Turn of cache in Google Chrome by:
right click in conent area
Inspect
Network button at top of right panel
Disable cache checkbox at to top of window
of course I could have just deleted the cache (which I did and it reloaded it, but presumably that is a short term fix)

*********************************************    NOTE - TURN OFF BROWSWER CACHING   ********************************************************************
*********************************************    NOTE - TURN OFF BROWSWER CACHING   ********************************************************************



general information on per page CSS Rules and sitewide CSS Rules
https://www.thesitewizard.com/css/how-to-add-css-rule.shtml
*/

/* https://digital.gov/guides/mobile-principles/tap-targets/#:~:text=Google%20recommends%20using%20at%20least,the%20size%20of%20the%20text.  */
/*body {font-size:16px;}*/

/* test to see if background color changes for small views */




h1 
{
	font-size: 250%;
	font-family: Arial, Verdana, Tahoma, sans-serif;
}

h2 
{
	font-size: 180%;
	font-family: Arial, Verdana, Tahoma, sans-serif;
	/*font-weight: bold;*/  /* doesn't change to bold, at least with 140% font size */
	color: #F00; /*BOLD RED; CHANGED FROM BLACK (NO COLOR TAG) 2026-03-06 */
}

h3 
{
	font-size: 120%;
	font-family: Arial, Verdana, Tahoma, sans-serif;
	
	/*margin-bottom:-12px; removed 2024-12-04 after changed paragraph default style */ /* added 2023-02-26 https://stackoverflow.com/questions/34899077/decrease-the-space-between-header-and-paragraph-vertically-in-html */
	/*color: darkorange; */
	
	/*color: peru;  /* used until 2026-03-06*/
	color: #F63; /* 2026-03-06 ORANGE RUST found in MS Office page*/
	/* mediumvioletred; */
	/*#0066ff is like middle blue*/
	padding: 1.2em 0em 0em 0.3em;   /* 4th parameter is indent from left side appear to change both the left edge to dot and also dot to text spacing */
}
/* 
c.f https://www.thesitewizard.com/css/change-space-between-paragraphs.shtml
em is a multipele of font size used by the user's browswer. eg in an element with a 2 inch font, 1em means 2 inches.
*/
p {
	font-family: Arial, Verdana, Tahoma, sans-serif;
  /*margin-top: 8em ;*/
  /*margin-bottom: 8em ;*/
  /*font-size: 120%; */
  /*line-height: 1.4em ; */
  
  padding: 0em 0em 0em 0em;

  /* 1st parameter is space on top, changed 2023-02-26 from 0.5em to 0.2em because H3 looks odd */
     /* 4th parameter is indent from left side */
  
  /*https://stackoverflow.com/questions/41253908/changing-spacing-between-paragraphs-and-inside-of-paragraphs*/
  /* top right bottom left */
  /* margin: 3em 0em 0em 0em; */
  
  /* changing the space between lines = leading  https://www.uvm.edu/~bnelson/computer/css/changethespacingbetweenlines.html */
  line-height: 14.75pt;  
  /* 2023-02-26 changed from 14.75 to see if H3's looked better */
  /* 13.75  appears to add no space between lines in win 10 chrome */
  
  /* on the laptop this makes the paragraph background light blue*/ 
   background: #d7f9f8;  /* color picker https://colorkit.co/color/d7f9f8/ */
  /* background: #effdfc; */   /* similar shade but hard to see at some screen angles*/

	margin-top: -8px;  // removes space from before paragraph 
}


/* MOBILE CODE WAS HERE */

div 
{
	font-family: Arial, Verdana, Tahoma, sans-serif;
}

table
{
	font-family: Arial, Verdana, Tahoma, sans-serif;
	color: #333;
	margin:	0em 0em 0em 0.6em; 	/* use margin to move box bordering entire table */

   /* 4th parameter is indent from left side of column 1 but table border is created that doesn't move */
	/*padding: 0em 0em 0em 0.6em;*/
}
img 
{
  /* https://www.w3schools.com/howto/howto_css_border_image.asp */
    border: 3px solid #555;
    
}

ul
{
	font-family: Arial, Verdana, Tahoma, sans-serif;
	background: #cce5ff;
	color: darkblue;
	//margin: 0 px;  /* 2023-10-06 I can't see that changing this does anything */
	//margin-top: 10px;  // adds space before first item of second level indent but before first first level indent? 
	//line-height: 10pt; // changed from 18pt 2023-03-08  // this is space between lines of same paragraph
	/*padding: 4.5em 0em 0em 150.6em; */
	  /* 4th parameter is indent from left side appear to change both the left edge to dot and also dot to text spacing */
	/*font-variant: small-caps;*/
	/*margin is actually shorthand for 4 other properties
	margin-top
	margin-right
	margin-bottom
	margin-left */  // 2024-04-19 saw that the close comment is backwards; it is commenting out everything until padding in li, which thus become properties for ul
}

li
{
	/* no space between number and em units
	f1st parameter top
	second parameter right
	third paramer bottom of each item (not between lines of same item)
	fourth paramter left (between bulletpoint dot and text)
	*/	
  	padding: 0em 0em 0.2em 0em;   
	font-family: Arial, Verdana, Tahoma, sans-serif;
}

table, th, td {
  border: 1px solid;
}

<! TAGS FOR 2 COLUMNS C.F. https://www.w3schools.com/howto/howto_css_two_columns.asp>
* {
  box-sizing: border-box;
}

.row {
  display: flex;
  style = "text-indent: -36px; padding-left: 36px;"

}

/* Create two equal columns that sits next to each other */
.column {
	font-family: Arial, Verdana, Tahoma, sans-serif;

  flex: 50%;
  padding: 10px;
  style = "text-indent: -36px; padding-left: 36px;"
  /*height: 300px;*/ /* Should be removed. Only for demonstration */
}

.rb_orange {
	/* color: #FF8040;  /* orange color used until 2026-03-08*/
	color: #F00; /* 2026-03-08 more red color used for h2*/
}

/* https://resilienteducator.com/instructional-design/hanging-indents-in-html-and-css-for-instructional-designers/ */ 
.rb_hanging 
{
	style="text-indent: -36px; padding-left: 36px;"
		color: red;
}


/*  
CREATED FOR p TAG SO FOLLOWING BULLET POINTS (ul TAG) ARE IMMEDIATELY FOLLOWING
e.g. <p class="closer">
https://stackoverflow.com/questions/51611223/need-to-apply-css-to-a-p-tag
*/
.closer 
{
	margin-bottom:-1em;
}


/* TO APPLY A STYLE SELECTIVELY E.G. ONLY TO A PARICULAR LOCATION IN THE HEIRARCHY, USE THE GREATER THAN OPERATOR
aka Greater-Than Sign (>) Selector

https://www.linkedin.com/pulse/understanding-greater-than-sign-selector-css-kranthi-shaik#:~:text=The%20greater%2Dthan%20sign%20(%3E)%20selector%20in%20CSS%20is,within%20another%20(parent)%20element.
*/
/* for 
<ul class="ulAfterli">
  <li> up to an hour for shellac, but why not just blast solvent (alcohol) through it every time when done
  	<ul> next level in 
    	<li> another level
        </li>    
    </ul>
    <li> back out </li>
   </li>
</ul>
*/	
/* .ulAfterli  >li  MEANS only do tomost items "up to an hour".  and any at that same level but no children*/
/* .ulAfterli  >li > ul  MEANS "next level in" and "another level" gets the attibute, not sure why "another level" gets it since it is child of ul */
/* .ulAfterli  > li > ul > li MEANS ONLY "another level" gets the attribute */
/* .ulAfterli  > li > ul > ul MEANS none in the example code get the attribute */
.ulAfterli  > li > ul > ul
{
	color: #3F0
}.gray_text {
	color: #666;
}

/* 
2025-11-07
this is for my cell phone.  specifically my galaxy s24 ultra as of 2025-11-07
on the trip to hawaii, i got tired of always increasing the font on every page
so I added the @media@html tags and modified the @media@p tags
*/
@media (max-width: 1000px) 
{
    html {
		font-size:36px;
		line-height: 36pt;  
	}
	
	
    p {
		/* for cell phone make background more of a cream color */
         background: #FFFFE8; 
		  line-height: 36.75pt; 
		 /* margin-bottom:30pt; */  
		  style = "text-indent: -36px; padding-left: 36px;"
		  
		}
		
	h1 	
	{
		line-height:1.1em;
	}

	h2 	
	{
		line-height:1.1em;
	}
		
	h3 	
	{
		line-height:1.1em;
	}
				

}
.RB_YELLOW_TEXT {
	color: #FFFF3E;
}
.RB_GREEN_TEXT {
	color: #00FF40;
}