/* Display Properties demo applet — page coordinates (the page's origin is screen (9, 49) in the references). */
.dp { position: absolute; inset: 0; }
.dp > * { position: absolute; }
.dp > span { white-space: pre; }
.dp__monitor { left: 101px; top: 15px; }
.dp__display-label { left: 15px; top: 204px; }
.dp__display-name { left: 15px; top: 220px; }
.dp__colors-group { left: 15px; top: 247px; width: 173px; height: 70px; box-sizing: border-box; }
.dp__colors { left: 24px; top: 264px; width: 155px; }
.dp__colorbar { left: 24px; top: 293px; }
.dp__area-group { left: 198px; top: 247px; width: 173px; height: 70px; box-sizing: border-box; }
.dp__less { left: 207px; top: 264px; }
.dp__more { left: 333px; top: 264px; }
.dp__area { left: 238px; top: 266px; width: 87px; }
.dp__resolution { left: 198px; top: 296px; width: 170px; text-align: center; }
.dp__troubleshoot, .dp__advanced { top: 327px; width: 84px; }
.dp__troubleshoot { left: 196px; }
.dp__advanced { left: 286px; }

/* Background page */
.dp__wall-label { left: 15px; top: 215px; white-space: pre; }
.dp__walls { left: 15px; top: 231px; width: 272px; height: 114px; box-sizing: border-box; }
.dp__walls .w2k-header { display: none; }   /* LVS_NOCOLUMNHEADER */
.dp__browse, .dp__pattern { left: 297px; width: 75px; }
.dp__browse { top: 233px; }
.dp__picture-label { left: 297px; top: 269px; }
.dp__picture { left: 297px; top: 285px; width: 75px; }
.dp__pattern { top: 319px; }

/* Effects page */
.dp__icons-group { left: 15px; top: 10px; width: 356px; height: 153px; box-sizing: border-box; }
.dp__icons { left: 27px; top: 30px; width: 332px; height: 91px; box-sizing: border-box; }
.dp__change-icon, .dp__default-icon { top: 127px; width: 90px; height: 24px; --metric-button-label-top: 5px; }   /* 24px tall (measured) */
.dp__change-icon { left: 171px; }
.dp__default-icon { left: 268px; }
.dp__fx-group { left: 15px; top: 174px; width: 356px; height: 161px; box-sizing: border-box; }
.dp__fx { left: 27px; }
.dp__fx0 { top: 195px; }
.dp__fx1 { top: 218px; }
.dp__fx2 { top: 240px; }
.dp__fx3 { top: 263px; }
.dp__fx4 { top: 286px; }
.dp__fx5 { top: 309px; }
.dp__fx-kind { left: 264px; top: 191px; width: 96px; }

/* Screen Saver page */
.dp__saver-group { left: 15px; top: 186px; width: 357px; height: 78px; box-sizing: border-box; }
.dp__saver { left: 24px; top: 204px; width: 173px; }
.dp__saver-settings, .dp__saver-preview { top: 202px; }
.dp__saver-settings { left: 202px; }
.dp__saver-preview { left: 283px; }
.dp__saver-pw { left: 24px; top: 236px; }
.dp__saver-pw > .w2k-check__box { margin-top: 1px; }   /* the box 1px lower against its text than elsewhere (measured) */
.dp__saver-wait, .dp__saver-minutes { top: 236px; }
.dp__saver-wait { left: 235px; }
.dp__saver-minutes { left: 315px; }
/* The Wait edit with its up-down inside the edit's client edge (UDS_ALIGNRIGHT on a bordered buddy — measured). */
.dp__saver-spin { left: 264px; top: 233px; width: 45px; height: 20px; }
.dp__saver-spin > .w2k-edit { height: 100%; text-align: right; padding-right: 19px; }
.dp__energy-group { left: 15px; top: 267px; width: 357px; height: 85px; box-sizing: border-box; }
.dp__energy-star { left: 44px; top: 286px; }
.dp__energy-text { left: 132px; top: 285px; width: 230px; margin: 0; }
.dp__power { left: 282px; top: 324px; }

/* Web page: while Active Desktop is off the list is disabled (ButtonFace) and so are its buttons. */
.dp__web-show { left: 15px; top: 213px; }
.dp__web-show > .w2k-check__box { margin-top: 1px; }   /* as Password protected: the box 1px lower against its text */
.dp__web-list { left: 15px; top: 231px; width: 272px; height: 114px; --client-edge-padding: 0; }
.dp__web-item { position: absolute; left: 6px; top: 6px; white-space: pre; }
.dp__web-item > .dp__web-text { position: absolute; left: 16px; top: 0; }
.dp__web-new, .dp__web-delete, .dp__web-props { left: 297px; }
.dp__web-new { top: 233px; }
.dp__web-delete { top: 262px; }
.dp__web-props { top: 291px; }

/* Appearance page: the preview (windows drawn by the real components at their measured places) and the controls. */
.dp__preview { left: 16px; top: 11px; width: 355px; height: 193px; --client-edge-padding: 0; overflow: hidden; }
.dp__preview > .w2k-window { position: absolute; }
.dp__pv-inactive { left: 10px; top: 10px; width: 317px; height: 151px; }
.dp__pv-active { left: 14px; top: 33px; width: 335px; height: 133px; }
.dp__pv-menu { flex: none; margin-top: -1px; }   /* the menu bar starts right under the caption (as in the apps) */
.dp__pv-menu > .w2k-menubar__item { padding-top: calc(var(--metric-menubar-text-top) - 1px); height: calc(var(--metric-menubar-item-height) - 1px); }
.dp__pv-bar .w2k-scrollbar__thumb { display: none; }   /* the preview's scroll bar has no thumb (measured) */
/* … and its track is the scheme's Scrollbar colour, solid — desk.cpl paints it with that brush, not the dither. */
.dp__pv-bar .w2k-scrollbar__track { background: var(--sys-scrollbar); }   /* allow: the preview drawn in the scheme's colours */
.dp__pv-bar .w2k-scrollbar__track::before { display: none; }
.dp__pv-client { position: relative; flex: 1; margin: 0; --client-edge-padding: 0; }
.dp__pv-text { position: absolute; left: 4px; top: 4px; font: var(--font-ui); font-weight: 700; white-space: pre; }   /* allow: the preview's sample text */
.dp__pv-bar { position: absolute; right: 2px; top: 2px; bottom: 2px; }
.dp__pv-msg { left: 22px; top: 118px; width: 213px; height: 69px; }
.dp__pv-msg .w2k-window__body { position: relative; }
.dp__pv-msgtext { position: absolute; left: 3px; top: 2px; white-space: pre; }
.dp__pv-ok { position: absolute; left: 67px; top: 17px; width: 72px; height: 24px; --metric-button-label-top: 5px; }
.dp > label { white-space: pre; }
.dp__scheme-label { left: 15px; top: 213px; }
.dp__scheme { left: 15px; top: 230px; width: 197px; }
.dp__save-as { left: 217px; top: 230px; }
.dp__delete { left: 297px; top: 230px; }
/* desk.cpl's are full 23px buttons, 2px below the 21px combo (measured); Graphite lines them up with it (field height). */
:root:not([data-theme="graphite"]) .dp > .w2k-button--field { height: var(--metric-button-height); --metric-button-label-top: 4px; }
.dp__item-label { left: 15px; top: 260px; }
.dp__item { left: 15px; top: 277px; width: 197px; }
.dp__size-label { left: 217px; top: 260px; }
.dp__size { left: 217px; top: 277px; width: 57px; height: 21px; }
.dp__size > .w2k-edit { height: 100%; }
.dp__color-label { left: 280px; top: 260px; }
.dp__color { left: 280px; top: 277px; }
.dp__color2-label { left: 328px; top: 260px; }
.dp__color2 { left: 328px; top: 277px; }
.dp__font-label { left: 15px; top: 308px; }
.dp__font { left: 15px; top: 324px; width: 197px; }
.dp__fsize-label { left: 217px; top: 308px; }
.dp__fsize { left: 217px; top: 324px; width: 57px; }
.dp__fcolor-label { left: 280px; top: 308px; }
.dp__fcolor { left: 280px; top: 324px; }
.dp__bold { left: 328px; top: 324px; width: 21px; height: 21px; min-width: 0; font-weight: 700; font-family: var(--font-family-ui); --metric-button-label-top: 2px; }   /* allow: the Bold toggle's "B" in bold */
.dp__italic { left: 349px; top: 324px; width: 21px; height: 21px; min-width: 0; }

/* Advanced... › General (extension): Display › Scaling. */
.dpa__group { left: 7px; top: 7px; right: 7px; height: 118px; box-sizing: border-box; }
.dpa__label { left: 16px; top: 30px; }
.dpa__scale { left: 70px; top: 26px; width: 180px; }
.dpa__note { left: 16px; top: 56px; }