@charset "UTF-8";
/* CSS home_os.css*/
/* Version 2.2 2/17/09*/

* {
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

p {
	margin-top: 0;
	margin-bottom: 0;
}

body {
	max-width: 920px;
	margin: 0 auto;
	padding: 64px 28px 48px;
	background-color: #f5f5f7;
	color: #252529;
	font-size: 15px;
	line-height: 1.55;
	min-width: 360px;
	text-align: left;
}


/* START NAVBAR STYLES */

#navbox {
	/* Fixed: span the full viewport width regardless of body's
	   max-width (920px). We use left+right rather than width:100% so
	   the bar pins flush to both edges no matter how the browser
	   computes the containing block. The body has padding-top:64px
	   (see the `body` rule), which clears the bar's 44px height. */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 44px;
	box-sizing: border-box;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	background-color: rgba(250, 250, 252, 0.96);
	backdrop-filter: saturate(180%) blur(8px);
	-webkit-backdrop-filter: saturate(180%) blur(8px);
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
	z-index: 99;
}

.gradient {
	background-image: none;
}

#navleftbox {
	position: absolute;
	top: 0;
	left: 22px;
}

#navrightbox {
	float: right;
	position: relative;
	top: 0;
	margin-right: 22px;
}

.navlink_left {
	color: #2474d2;
	font-size: 13px;
	font-weight: 500;
	line-height: 44px;
	text-align: left;
	vertical-align: top;
}

.navlink_right {
	color: #2474d2;
	font-size: 13px;
	font-weight: 500;
	line-height: 44px;
	margin-left: 8px;
	text-align: right;
	vertical-align: middle;
}

/* End Navbar styles */


/* START HEADER AREA STYLES */

#headerbox {
	clear: both;
	min-height: 42px;
	margin-top: 4px;
	margin-bottom: 30px;
}

h1 {
	color: #17171a;
	font-size: 27px;
	line-height: 1.2;
	font-weight: 650;
	letter-spacing: -0.02em;
	margin-top: 2px;
	margin-bottom: 0;
	text-align: left;
}

#iconbox {
	float: left;
}

#iconimg {}

#pagetitle {
	padding-left: 48px;
	padding-top: 2px;
	margin-left: 0;
}

/* End Header Area Styles */

/* START LINK STYLES */

/* These are link styles are shared by any link; font-size and weight
for a specific style are delinated in the "Left Column Styles" and
"Right Column Styles" section of this stylesheet. */

a {
	color: #1769c2;
	text-decoration: none;
}

a:hover {
	color: #0b55a7;
	text-decoration: underline;
}

a:visited {
	color: #4f4a94;
}


/* End Link Styles */

/* Content Styles */

#contentbox {
	margin-top: 20px;
	margin-bottom: 0;
}


/* End Content Style */

/* This wrapper holds the left and right
columns of the layout */
#columnshell {
	clear: both;
	display: flex;
	gap: 24px;
	position: relative;
	left: 0;
	margin: 0;
	width: 100%;
}

/* LEFT COLUMN STYLES */

#leftcolumn {
	float: none;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 24px;
	width: 52%;
}

.leftcolpadding {
	padding: 6px 6px 6px 0;
}

.subheadleft {
	color: #1769c2;
	font-size: 16px;
	font-weight: 600;
	text-align: left;
}

.leftcolumntext {
	color: #66666d;
	margin-bottom: 20px;
	padding-top: 3px;
}

/* End Left Column Styles */


/* START RIGHT COLUMN STYLES */

#rightcolumn {
	float: none;
	position: relative;
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 24px;
	width: 48%;
}

.rightcolpadding {
	padding-left: 0;
}

/* This div is for the content inside the frame */
#contentframe {
	padding: 22px;
	text-align: left;
	background-color: rgba(255, 255, 255, 0.82);
	border: 1px solid rgba(0, 0, 0, 0.09);
	border-radius: 14px;
	box-shadow: 0 5px 18px rgba(0, 0, 0, 0.055);
}

.headboxtopright {
	color: #77777e;
	font-size: 11px;
	font-weight: 650;
	letter-spacing: 0.12em;
	margin-bottom: 13px;
}

.boxlink {
	font-weight: 550;
	line-height: 1.35;
	margin-bottom: 12px;
	text-align: left;
}

.boxlinkglyphs, a.boxlinkglyphs:link {
	color: #333;
	text-decoration: none;
}

a.boxlinkglyphs:hover {
	text-decoration: underline;
}

.rightcolumntext {
	margin-bottom: 6px;
}

/* End Right Column Styles */


/* START RULE STYLES*/

#rule {
	margin-left: 0px;
	margin-right: 5px;
}

hr {
	background-color: #ECECEC;
	background-repeat: repeat-x;
	height: 1px;
	width: 100%;
	border-top: 1px solid #CCCCCC;
	border-right-style: none;
	border-bottom: 1px solid #F5F5F5;
	border-left-style: none;
	margin-top: 15px;
	margin-bottom: 14px;
}

/* End Rule Styles */


/* START FEEDBACK STYLES */

#linkfeedbackbox {
	clear: both;
	position: relative;
	left: 0px;
	margin-bottom: 18px;
	width: 100%;
}

.linkfeedback {
	color: #000000;
}
.shortcut {
	border: 1px solid #b9b9bf;
	border-bottom-color: #9999a0;
	border-radius: 5px;
	padding: 1px 5px;
	background: #fff;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
	white-space:nowrap;
}
.button {
	border: 1px solid #b9b9bf;
	border-radius: 7px;
	padding: 1px 9px;
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
/* End Feedback Styles */

img {
	max-width: 100%;
	height: auto;
}

@media (max-width: 620px) {
	body {
		min-width: 0;
		padding: 60px 18px 36px;
	}

	#columnshell {
		display: block;
	}

	#leftcolumn,
	#rightcolumn {
		width: 100%;
	}

	#rightcolumn {
		margin-top: 8px;
	}
}

/* ────────────────────────────────────────────────────────────────────────
   Task-page styles (merged in from the old task.css, used selectors only).
   Of the 75 rules in task.css, only 7 class/id selectors were ever
   referenced by any HTML in this book; the rest was Apple's 2009 template
   boilerplate. Kept here are those 7 plus the element-level (h2/h3/h4/pre/
   ul-bullet) rules that style basic topic-page content.
   ──────────────────────────────────────────────────────────────────────── */

h2 {
	color: #1d1d20;
	font-size: 17px;
	line-height: 1.3;
	font-weight: 650;
	letter-spacing: -0.01em;
	margin-top: 0;
	margin-bottom: 10px;
}

h3 {
	color: #55555c;
	font-size: 11px;
	font-weight: 650;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-top: 0;
	margin-bottom: 8px;
	text-align: left;
}

h4 {
	color: #000;
	font-weight: bold;
	line-height: 12pt;
	margin-top: 0.25em;
	margin-bottom: 0;
	text-align: left;
}

pre {
	margin: 0;
}

ul li:before {
	color: #666;
	position: relative;
	top: -.05em;
	float: left;
	margin-right: .25em;
	margin-left: -1.2em;
}

/* Numbered task lists (step-by-step instructions). */
.tasklistnumbered p {
	color: #333;
	text-align: left;
	line-height: 18px;
	margin-top: 9px;
}

/* Intro / feature-list blocks at the top of a topic page. */
#introbox,
.introprimtext {
	margin: 0;
}

.introprimtext p {
	margin-top: 9px;
}

/* Boxed task content — the "card" sections like Add Paths / Select & move. */
.taskbox {
	margin-top: 16px;
	margin-bottom: 16px;
	padding: 20px 22px 18px;
	text-align: left;
	background-color: rgba(255, 255, 255, 0.82);
	border-radius: 14px;
	border: 1px solid rgba(0, 0, 0, 0.09);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.045);
}

.taskbox img {
	margin-top: 15px;
	border-radius: 8px;
}

#rule {
	margin-top: 22px;
	margin-bottom: 0;
}

/* Section-index pages (Getting Started / Setup / Usage / FontInfo): a
   narrower column with each <p><a>...</a></p> rendered as a clickable
   card. Activated by adding class="section-list" on the <body>. Replaces
   the standalone sty/genlist_style.css. */
body.section-list {
	max-width: 760px;
}

body.section-list p {
	margin: 0 0 10px;
	padding: 12px 15px;
	background: rgba(255, 255, 255, 0.78);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 10px;
}

/* "Related topics" link block at the bottom of topic pages. */
#linkinternalbox,
#linkexternalbox {
	margin-top: 26px;
	margin-bottom: 5px;
	padding: 18px 20px;
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0.5);
	border: 1px solid rgba(0, 0, 0, 0.07);
}

.linkinternal,
.linkexternal {
	margin-top: 0;
	margin-bottom: 5px;
}


@media (prefers-color-scheme: dark) {
	body {
		background-color: #1e1e20;
		color: #e5e5e7;
	}

	#navbox {
		background-color: rgba(38, 38, 41, 0.96);
		border-bottom-color: rgba(255, 255, 255, 0.12);
	}

	h1,
	.headboxtopright {
		color: #f3f3f5;
	}

	h2 {
		color: #f1f1f3;
	}

	h3,
	h4 {
		color: #b9b9c0;
	}

	#linkinternalbox,
	#linkexternalbox {
		background-color: rgba(255, 255, 255, 0.035);
		border-color: rgba(255, 255, 255, 0.1);
	}

	body.section-list p {
		background: #29292c;
		border-color: rgba(255, 255, 255, 0.1);
	}

	.leftcolumntext {
		color: #aaaab1;
	}

	#contentframe,
	.taskbox {
		background-color: #29292c;
		border-color: rgba(255, 255, 255, 0.1);
	}

	a,
	.navlink_left,
	.navlink_right {
		color: #69aaf0;
	}

	.boxlinkglyphs,
	a.boxlinkglyphs:link,
	a.boxlinkglyphs:visited {
		color: #d7d7dc;
	}

	hr {
		background-color: #3a3a3e;
		border-top-color: #4a4a4f;
		border-bottom-color: #242427;
	}
}
