body{
			font-family:arial,sans-serif;
			color:#333;
			margin:0;
			padding:0;
		}
		
		
		/* define responsive style for model profiles with class="modelimg" */
		.modelimg{
			max-width: 100%; 
			display: block; 
			height: auto;
		}
		
		/* define responsive style for model profiles with class="titleimg" */
		.titleimg{
			max-width: 100%; 
			display: block; 
			height: auto; */
		}

		
		p{ 
			padding-left:1.7em;
			padding-right:1.7em;
			margin-top: 1px;
		}
		
		p.small{
			font-size:80%;
		}
		
		div.listofvessels{ 
			padding-left:1.7em;
			/* padding-right:1.7em;*/
			margin-top: 1px;
			/* align:center;*/
		}

		div.citation{ 
			color:#9F9F9F;
			font-size:60%;
		}

		div.doimagebox{ 
			position: absolute;
			top: 30%;
			left: 50%;
			transform: translate(-50%, -30%);
			max-height: 95%;
			max-width: auto;
			padding-left: 20%;
			padding-right: 20%;
			text-align: center
		}

		#boundary{
			background:#f8f8f8;
			border:1px solid #333;
		}


		/* define style for yacht register tables */
		div.registertable{
			padding-left:1.7em;
			padding-right:1.7em;
			margin-top: 1px;
		}
		table{
			width:125%;
			font-size:80%;
			vertical-align: top;
			border-spacing:0px;
			cellpadding:0px;
			cellspacing:0px;
			border-collapse:collapse;
		}
		td{
			padding:0;
			vertical-align: top;
		}

		h1{
			font-family:"trebuchet ms",verdana,sans-serif;
			font-size:130%;
  			border-bottom: 1px solid #999;	/* add solid border at bottom */
			box-sizing: border-box;       	/* include padding and border within element's width */
  			width: calc(100% - 40px);     	/* set width 40px shorter than container's full width */
  			margin-left: 20px;            	/* add margin of 20px on left to shorten line */
  			margin-right: 20px;           	/* add margin of 20px on right to shorten line */
		}

		h2{
			font-family:"trebuchet ms",verdana,sans-serif;
			font-size:110%;
			margin-top: 0; 
			margin-bottom: 0;
			page-break-after: avoid;
		}
		
		h3{
			font-family:"trebuchet ms",verdana,sans-serif;
			font-size:100%;
			margin-bottom: 0;
			page-break-after: avoid;
		}
		h5{
			font-family:"trebuchet ms",verdana,sans-serif;
			font-size:90%;
			margin-top: 0; 
			margin-bottom: 0;
			page-break-after: avoid;
		}
		h6{
			font-size:70%;
			margin-top: 0.2em; 
			margin-bottom: 0;
			page-break-after: avoid;
		}


		/* formats for the site-header HERRESHOFF.INFO in the upper left corner */
		.site-header {
			position: absolute;
			top: 3px;	/* was: 13px */
			left: 15px;
			padding: 0 3em;
			max-width: 10%;
			display: block;
			height: auto;
			background: white; /* Optional: improves readability if over images */
			line-height: 1;
			z-index: 100;
		}
		.site-header h2 {
			font-family:Arial;
			/* font-size: clamp(0.9em, 3.5vw, 1.8em); */
			font-size: 1rem;
			font-weight: bold;
			color: #006400;
			margin: 0; /* Remove default margin for better alignment */
		}
		.site-header a {
		  color: #006400;
		  text-decoration: none;
		}
		.site-header a:visited {
			color: #006400;
		}
		.site-header a:hover,
		.site-header a:focus {
			text-decoration: underline;
		}

		/* center the model room heading and logo */
		#model-room-heading-and-logo {
			display: flex; 
			align-items: center; 
			justify-content: center;
			/* font-family:"trebuchet ms",verdana,sans-serif; */
			font-family:Arial; color:#006600;
			font-size:clamp(0.8em, 2.5vw, 1.8em); 
			padding-left:4.0em;
		}

		/* disallow page breaks within the image section bullets (the only bulleted list we have) */
		li{page-break-inside:avoid;}
		
		ul{margin-top: 1px;}

		/* disallow borders around images and hyperlink images */
		img {border-style: none;}

		/* define collapse/expand button position and border */
		h2 img{border:none;padding-right:.5em;}
		h5 img{border:none;padding-left:1.7em;padding-right:.5em;}
		h6 img{border:none;padding-left:1.7em;padding-right:.5em;}
				
		#content{
			font-size:90%;
			padding:0 2em 1em 2em;
		}

		strong {
		    color: teal;
		    font-weight: normal;
		} 

		/* span which looks like a hyperlink but will trigger a javascript function instead */
		.JSLink {
			color:blue;
			text-decoration:underline;
			cursor:pointer;
		}		

		/* style for HRef circled numbers in ArchDocs section */
		.numO {                          		 
		    font-size: 0.6em;                    /* font size for the inside number */
		    display: inline-flex;                /* use flex for better centering */
		    justify-content: center;             /* center horizontally */
		    align-items: center;                 /* center vertically */
		    width: 1.6em;                        /* circle width */
		    height: 1.6em;                       /* circle height */
		    border-radius: 50%;                  /* 50% ensures perfect circle */
		    padding: 0.1em;                      /* add horizontal padding between circle and number */
		    text-align: center;
		    border: 1px solid #0066cc;           /* blue border */
		    color: #0066cc;                      /* blue text color */
		    text-decoration: none;               /* remove default link underline */
		    vertical-align: 0.6em;               /* ensure circle is on same base line as any other text */
		    margin-right: 0.0em;                 /* add some space after circle */
		}

		/* prevent hyperlinks from being blue and underlined when the document is printed */
		/* also any divs or spans with class = "noprint" */
		@media print{
			a:link { 
				color: black;
				text-decoration: none;
			}
			a:visited { 
				color: black;
				text-decoration: none;
			}
			a:hover { 
				color: black;
				text-decoration: none;
			}
			a:active { 
				color: black;
				text-decoration: none;
			}
			strong {
				color: black;
				text-decoration: none;
			} 
			.JSLink {
				color: black;
				text-decoration: none;
			} 
			.noprint, .noprint * {
				display: none !important;
			}
		}