/* Feature 1w (23 Oct 2026): a wider page.
   The site's look comes from the host's theme (Turbify "Mentor", loaded by sunshine_includes/hheader.php). The theme
   fixes the page at 802 px: 580 px for the page's content and 190 px for the menu on the right, and draws the page,
   the header and the footer with 802 px pictures. These rules let the page grow with the browser window (up to a
   limit); the content column gets all of the extra width, the menu keeps its 190 px.
   The theme's pictures are reused as pieces (images/wide_*.png, cut from the theme's hd.jpg, doc.jpg and ft.jpg) so
   the header picture, the yellow menu column and the footer's rounded corners stay where they were, at any width.
   Loaded by sunshine_includes/header.php, so every page with the site header uses it. Pop-up windows (no header) keep
   the theme's 802 px. media="screen", like the theme's own style sheets: printing is not affected.
   To change the page width, edit the SETTING lines. */

@media screen {
	/* SETTING: page width = the window minus 100 px (the blue pattern stays visible left and right), never
	   narrower than the theme's 802 px, never wider than 1000 px (Will, 23 Oct: 1400 was too big). */
	#doc {
		width: calc(100% - 100px);
		min-width: 802px;
		max-width: 1000px;
		/* the page: white, with the yellow menu column on the right (the theme's doc.jpg, right part) */
		background: url(../images/wide_doc_right.png) right top repeat-y #fff;
		/* the thin frame around the page that the theme draws with its 820 px poundbody.jpg: 9 px white, 1 px gray */
		box-shadow: -9px 0 0 #fcfdff, 9px 0 0 #fcfdff, -10px 0 0 #c7c7c9, 10px 0 0 #c7c7c9;
	}

	/* the content column: everything except the menu column (802 - 580 = 222 px in the theme) */
	#bd {
		width: calc(100% - 222px);
	}
	#pageName {
		width: auto;
		margin-right: 20px;
	}

	/* header (Feature 1w fix 1): the theme's picture in two pieces, split at the pencil tip. The pencils and blocks
	   (290 px) stay at the right, unstretched, over the menu column; the sky and the white wave to their left are
	   stretched sideways to fill the rest, so the curve stays smooth at any width (at 802 px nothing is stretched).
	   Fix 2: without the theme picture's 1 px gray edge on the left (Will).
	   Fix 3: the sky runs 6 px under the pencils piece (it is drawn on top), so no thin line shows where the two
	   meet when the screen scales the page (e.g. 150%); the pencils piece without the gray edge on the right. */
	#hd {
		background: url(../images/wide_hd_pencils2.png) right bottom no-repeat,
		            url(../images/wide_hd_sky.png) left bottom / calc(100% - 284px) 160px no-repeat,
		            #4fbbec;
	}
	/* the logo: centered over the content column (theme: 470 px box, left-aligned) */
	#headerContent {
		width: calc(100% - 222px);
		margin: 45px 0 55px 20px;
	}
	/* SETTING: logo width = 71% of the content column, at least 464 px, at most 551 px (= 128 px tall, the old logo's
	   height; reached at the 1000 px page). Fix 2: the new logo (images/sunshine_logo_2x.png, 1240 x 288, drawn at twice
	   the size it is shown so it stays sharp on high-resolution screens); its own proportions (620 x 144). */
	#headerContent img.yssImg {
		width: clamp(464px, 71%, 551px) !important;
		height: auto !important;
		aspect-ratio: 620 / 144;
	}

	/* footer: the theme's rounded left and right corners at the two ends, the middle filled */
	#ft {
		background: url(../images/wide_ft_left.png) left top no-repeat,
		            url(../images/wide_ft_right.png) right top no-repeat,
		            url(../images/wide_ft_fill.png) left top repeat-x,
		            #4ebbec;
	}
}