body {
	/* 2020may30 background:	White url(../images/RNR-Marine-Inc-Header-Flag_Spray-Up-Down.gif) no-repeat top left; */
	/* 2020may30 background:	White url(images/RNR-Marine-Inc-Header-Flag_Spray-Up-Down.gif) no-repeat top left; */
	/* 2020MAY30 background:	White url(/images/RNR-Marine-Inc-Header-Flag_Down_640x.jpg) no-repeat top left; */
	/* 2024may12 background:	White url(/images/RNR-Marine-Inc-Header-Flag_Down_420x.jpg) no-repeat top left; */
	/* 2024may12-NO background:	White url("../images/RNR-Marine-Inc-Header-Flag_Down_420x.jpg") no-repeat top left ; */
	background: white url("../images/RNR-Marine-Inc-Header-Flag_Down_420x.jpg") no-repeat top left !important cover ;
	
	/* try to get the image width to NOT set the page width on Iphone, IPad and Chrome tablet browsers */
	/* 	overflow: 	Hidden;		NO - this cuts off ALL scroll bars, vertical AND horizontal	*/
	/* 	overflow: 	Scroll; 	NO - doesn't help	`		*/
	/*	overflow-x:	hidden; 	NO, but close on Safari, didn't help on Android Chrome, ref: http://stackoverflow.com/questions/1336600/css-only-horizontal-overflow */
	/* see http://stackoverflow.com/questions/10964170/100-width-images-on-horizontal-scrolling-page */
	color:		Black ;
	font-family:	"Arial","Verdana","Arial Narrow","Helvetica",sans-serif;
	text-align:	Left;
	font-weight:	Normal;
	font-size:	14px;
	line-height:	1.05;
	}

table td {
	display:		table-cell;		/* 9/1/26 Restore default table cell behavior */
	vertical-align:	 middle  !important;	/* 9/1/26 Options: top, middle, bottom */
 
	color:		Black ;
	font-family:	"Arial","Verdana","Arial Narrow","Helvetica",sans-serif;
	font-weight:	Normal;
	font-size:		14px;
	line-height:	1.05;
	}

/* 9/1/26 Apply padding to all table data cells and header cells */
/* 9/1/26 By default, HTML table cells (<td> or <th>) support vertical alignment.  */

td, th {
  
	padding: 5px ;
	display:		table-cell;		/* 9/1/26 Restore default table cell behavior */
	vertical-align:	middle  !important;	/* 9/1/26 Options: top, middle, bottom */
 
}

/* 2025jun08 Wrap long URLs at a word */
a {
			white-space: normal;
			overflow-wrap: break-word;
	}
/* works sometimes	overflow-wrap: break-word;	*/
/* no better		overflow-wrap: break-all;	*/
/* nope			display: inline-block;	*/

p {
	color:		Black ;
	font-family:	"Arial","Verdana","Arial Narrow",sans-serif;
	text-align:	Left;
	font-weight:	Normal;
	font-size:	14px;
	line-height:	1.1;
	}

/* 2020may09... add .20em spacing to top and bottom to help mobile (button too close) per https://stackoverflow.com/questions/19254411/how-do-i-set-vertical-space-between-list-items */
	li:not(:last-child) {
	    margin-top: .20em;
	    margin-bottom: .20em;
	}

/* these did not work:
	ol {
	    margin-bottom: .5em;
	}
	ul {
	    margin-bottom: .1px;
	}
*/
/* ... 2020may09 */

/* 2026apr29... */
ul {
 	list-style-type:		disc;   /* Filled circle (Default) 2026apr29 */
}
/* ...2026apr29 */


li {
/*	border:			2px solid BLUE;	*/	/* to troubleshoot */
	color:			Black ;
	font-family:		"Arial","Verdana","Arial Narrow",sans-serif;
	text-align:		Left;
	font-weight:		Normal;
	font-size:			14px;
/*	line-height:		1.1;	     2026apr29 */
	line-height:		1.3;	/* 2026apr29 */
	color:			#000;	/* 2026apr29	Colors the bullet black  */
	list-style-type:		disc; 	/* 2026apr29	Filled circle (Default)  */
	}

h1 {
	color:		Black ;
	font-family:	"Arial","Verdana","Helvetica",sans-serif;
	text-align:	Center;
	font-weight:	Bolder;
	font-size:	16px;
	line-height:	1.0;
	margin-top:	10px;
	margin-bottom:	10px;
	}

h2 {
	background:	White ;
	color:		White ;
	font-family:	"Arial Narrow","Arial","Verdana",sans-serif;
	text-align:	Center;
	font-weight:	bold;
	font-size:	1px;
	line-height:	0.10;
	}

h3 {
	color:		Black ;
	font-family:	"Arial","Verdana","Arial Narrow",sans-serif;
	text-align:	Left;
	font-weight:	Normal;
	font-size:	14px;
	line-height:	1.1;
	}

h4 {
	color:		Black ;
	font-family:	"Arial Narrow","Arial","Verdana",sans-serif;
	text-align:	Center;
	font-size:	18px;
	line-height:	1.0;
	}

h5 {
	color:		Black ;
	font-family:	"Arial Narrow","Arial","Verdana",sans-serif;
	text-align:	Center;
	text-align:	Left;
	font-weight:	Bold;
	font-size:	16px;
	line-height:	1.1;
	}

h6 {
	color:		Black ;
	font-family:	"Arial","Verdana","Arial Narrow",sans-serif;
	text-align:	Left;
	font-weight:	Bold;
	font-size:	16px;
	line-height:	1.0;
	}

h7 {
	color:		Black ;
	font-family:	"Arial","Verdana","Arial Narrow",sans-serif;
	text-align:	Right;
	font-weight:	Normal;
	font-size:	16px;
	line-height:	1.0;
	}

h8 {
	background:	White ;
	color:		Gray ;
	font-family:	"Arial","Verdana","Arial Narrow",sans-serif;
	text-align:	Center;
	font-weight:	Normal;
	font-size:	13px;
	line-height:	1.2;
	}

h9 {
	color:		White ;
	font-family:	"Arial Narrow","Arial","Verdana",sans-serif;
	text-align:	Center;
	font-weight:	Normal;
	font-size:	1px;
	line-height:	0.10;
	}


.highlighted { 
	background:	yellow;
	color:		Black ;
	}

.sddm {
	margin: 0;
	padding: 0;
	z-index: 300
	}

.sddm li {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font-family:	"Arial","Verdana",sans-serif;
	font-weight:	Bold;
	font-size:		13px;
	}

.sddm li a {
	display: block;
	margin: 0 1px 0 0;
	padding: 4px 10px;
	width: 122px;
	background: #5970B2;
	color: #FFF;
	text-align: center;
	text-decoration: none
	}

.sddm li a:hover {
	color: #FFF;
	background: #49A3FF
	}

.sddm div {
	position: absolute;
		text-align:	left;
		float:		left;
	visibility:	hidden;
	margin:		0;
	padding:	0;
	color:		#FFF;
	background:	#EEEEEE;
	border:		1px solid #5970B2
	}

	.sddm div a {
		position:	relative;
		display:	block;
		margin:		0;
		padding:	3px 10px;
		width:		auto;
	/*	white-space:	nowrap;		2025jun08 */
			white-space: normal;		/* 2025jun08 */
			overflow-wrap: break-word;		/* 2025jun08 */
		text-align:	left;
		text-decoration: none;
		background:	#EEEEEE;
		color:		#ee6611;
		font-family:	"Arial","Verdana",sans-serif;
		font-weight:	Bold;
		font-size:	12px;
		}

		.sddm div a:hover {
			background:	#49A3FF;
			color:		#FFF
			}

/* buttons 9/1/26 */
.btn {
  
	border: 2px solid black;
	cursor: pointer ;
  
	font-family: inherit ;
  
	font-weight: bold ;
  
	color: #000000 ;
  /* black */
	/*	background-color: #007bff ;
	*/ 
	/*	background-color: ORANGE ;
  */
		background-color: #FFA500 ;  
	vertical-align:	 middle ; 		/* 9/1/26 Options: top, middle, bottom */
 
}



	/* Hover effects */
  
	.btn:hover {
  
	/*	background-color: GREEN;
 	*/
		background-color: #98FF98 ;
 	}

  

	/* Active click effect */
  
	.btn:active {
 
		transform: scale(0.98);
  
	}

/* Small Button */

.btn-S {
  
	padding: 6px 12px;
  
	font-size: 12px;
  
	border-radius: 4px; /* Small curve */

}



/* Medium Button */

.btn-M {
  
	padding: 10px 16px;
  
	font-size: 16px;
  
	border-radius: 8px; /* Medium curve */

}



/* Large Button */

.btn-L {
  
	padding: 14px 24px;
  
	font-size: 20px;
  
	border-radius: 12px; /* Large curve */

}