/*
 * shared software stylesheet
 */

@import url( /software/stylesheets/schemes.css );

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 * root
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

html, body 
{
   margin: 0;
   padding: 0;
}

html
{
   position: relative;
}

body
{
   font-family: Helvetica, Verdana, sans-serif;
   font-size: small;
   line-height: 1.3;
   text-rendering: optimizeLegibility;
   color: var( --body-text-color );
}

q
{
   quotes: "\201C" "\201D";
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 * layout
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
body
{
   background-color: var( --page-background-color );
   background-position: 20px 30px;
   background-repeat: no-repeat;
   -webkit-background-size: 256px;
}

#content
{
   position: absolute;
   top: 150px;
   left: 325px;
   right: 0;
}

#nav
{
   position: absolute;
   top: 15px;
   right: 30px;
   height: 100px;
}

#sidebar
{
   position: absolute;
   width: 300px;
   top: 400px;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 * general content
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

#content
{
   margin-right: 3em;
}

#content hgroup
{
   position: relative;
   left: -25px;
}

#content hgroup h1
{
   color: var( --header-text-color );
   text-shadow: 0 1px 0 var( --header-shadow-color );
   font-weight: bold;
   font-size: 300%;
   letter-spacing: -1px;
   margin: 0;
   padding: 0;
}

#content hgroup h2
{
   margin: 0 0 2em 0;
   padding: 0;
   color: var( --header-text-color );
   text-shadow: 0 1px 0 var( --header-shadow-color );
   font-weight: normal;
   font-size: 140%;
}

#content h3
{
   color: var( --header-text-color );
   text-shadow: 0 1px 0 var( --header-shadow-color );
   font-weight: bold;
   font-size: 150%;
   text-transform: uppercase;
   padding: 0.6em 0 0.5em 0;
   border-top: 1px solid var( --header-text-color );
   margin-top: 1.5em;
   margin-left: -25px;
}

#content h3 .notransform
{
   text-transform: none;
}

#content h4
{
   color: var( --header-text-color );
   font-weight: bold;
   font-size: 140%;
   margin: 1.5em 0 0 0;
}

#content section
{
   margin: -10px 0 -10px -25px;
   padding: 10px 0 10px 25px;
}

#content p
{
   margin-top: 0.75em;
}

#content blockquote
{
   border-left: 20px solid var( --box-border-color );
   padding: 1em 1em;
   margin: 1em 0;
   background-color: var( --box-background-color );
   color: var( --box-text-color );
}

#content blockquote h4:first-child
{
   font-size: 110%;
   display: inline;
   margin: 0;
}

#content blockquote.quote
{
   padding: 0;
   border-left: none;
   padding-left: 2.75em;
   padding-right: 5em;
   text-indent: -2em;
   background-color: inherit;
}

#content blockquote.quote .marker
{
   padding: 0 5px;
   font-size: 3.5em;
   vertical-align: -0.5em;
   line-height: 0.1em;
   color: var( --decorative-text-color );
}

#content ol,
#content ul
{
   margin: 1em 0;
}

#content ol li,
#content ul li
{
   margin: 0.75em 0;
}

#content pre
{
   border: 1px solid var( --box-border-color );
   padding: 1em 1em;
   margin: 1em 0;
   background-color: var( --box-background-color );
   color: var( --box-code-text-color );
   white-space: pre;
}

#content blockquote pre
{
   color: var( --box-background-color );
   background-color: var( --box-code-text-color );
}

#content blockquote.caution
{
   border-left-color: var( --caution-border-color );
   color: var( --caution-text-color );
}

#content .expr-evaluation
{
   font-family: "Menlo", monospace;
   font-size: 90%;
   padding-left: 0.1em;
   padding-right: 0.1em;
}

#content .expr-evaluation-true
{
   color: white;
   background-color: rgb( 39, 205, 65 );
}

#content .expr-evaluation-false
{
   color: white;
   background-color: rgb( 255, 49, 57 );
}

@media (prefers-color-scheme: dark)
{
   #content picture.template
   {
      filter: invert( 1 );
   }
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 * links and targets
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

#content a:link
{
   text-decoration: none;
   color: var( --link-text-color );
   border-bottom: 1px dotted var( --link-text-color );
}

#content a:visited
{
   color: var( --link-text-visited-color );
   border-bottom: 1px dotted var( --link-text-visited-color );
}

@-webkit-keyframes 'target-heading-highlight'
{
   from  { color: var( --header-text-color ); padding-left: 0; }
   50%   { color: var( --target-heading-highlight-color ); padding-left: 40px; }
   to    { color: var( --header-text-color ); padding-left: 0; }
}

#content h3:target,
#content h4:target
{
   -webkit-animation-name: target-heading-highlight;
   -webkit-animation-duration: 1s;
}

@-webkit-keyframes 'target-section-highlight'
{
   from  { background-color: var( --page-background-color ); }
   10%   { background-color: var( --target-section-highlight-color ); }
   to    { background-color: var( --page-background-color ); }
}

#content section:target
{
   -webkit-animation-name: target-section-highlight;
   -webkit-animation-duration: 2s;
}

#content abbr
{
   text-decoration: none;
   color: var( --body-secondary-text-color );
   border-bottom: 1px dashed var( --body-secondary-text-color );
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 * sig-info tables
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

#content .sig-info
{
   border-collapse: collapse;
   margin-top: 0.5em;
}

#content .sig-info thead
{
   color: var( --table-header-text-color );
   background-color: var( --table-header-background-color );
}

#content .sig-info th,
#content .sig-info td
{
   padding: 0.5em 1em;
}

#content .sig-info td
{
   padding: 0.5em 1em;
   border: 1px solid var( --table-border-color );
}

#content .sig-info p
{
   margin: 0.5em 0 0 0;
}

#content .sig-info td.icon img
{
   margin: 0 auto;
   display: block;
}

#content .sig-info td.value
{
   font-family: "Menlo", monospace;
   font-size: 85%;
   text-align: left;
   max-width: 300px;
   overflow-wrap: break-word;
}

#content .sig-info caption
{
   caption-side: bottom;
   font-size: 90%;
   text-align: right;
   color: var( --header-text-color );
   margin: 0;
   padding-top: 0.5em;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 * user guide
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

#content.user-guide,
#content.faq,
#content.scripting,
#content.relnotes
{
   line-height: 1.6;
}

#content p.with-shot,
#content blockquote,
#content h3,
#content h4
{
   clear: both;
}

#content img.shot-window
{
   margin: 1em 0;
   border: 1px solid var( --shot-clip-border-color );
   border-radius: 5px;
}

#content img.shot-clip
{
   border: 1px solid var( --box-border-color );
   margin: 0 0 1.5em 0;
}

#content img.shot-clip.shot-left
{
   margin-right: 1em;
   float: left;
}

#content img.shot-clip.shot-right
{
   float: right;
   margin-left: 1em;
}

#content img.shot-clip.shot-middle
{
   float: none;
   clear: both;
   display: block;
   margin: 1em 0 1.5em 2em;
   border-radius: 10px;
}

#content img.shot-clip.shot-natural
{
   float: none;
   clear: both;
   display: block;
   margin: 1em 0 1.5em 0;
   border: none;
}

#content img.inline-button
{
   position: relative;
   top: 5px;
}

#content img.inline-icon
{
   float: right;
   padding: 0.5em;
}

#content img.inline-icon-alt
{
   float: left;
   padding: 0.5em;
}

#content .uie
{
   padding: 0.15em 0.5em;
   border-radius: 3px;
   background-color: var( --ui-element-background-color );
   white-space: nowrap;
}

#content blockquote .uie
{
   background-color: var( --ui-element-box-background-color );
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 * download page
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

#content .download-link:link
{
   display: inline-block;
   min-height: 36px;
   background: var( --box-background-color ) url( /software/images/download.png ) 15px 50% no-repeat;
   background-image: -webkit-image-set( url( /software/images/download.png ) 1x, url( /software/images_2x/download.png ) 2x );
   -webkit-background-size: 32px;
   padding: 10px 20px 10px 60px;
   border-radius: 5px;
   border: 1px solid var( --box-border-color );
   color: var( --box-text-color );
}

#content .download-link:visited
{
   color: var( --box-text-color );
}

#content .download-link:link:hover
{
   background-color: var( --box-background-highlight-color );
}

#content .download-link span
{
   display: block;
}

#content .download-link .primary
{
   font-size: 120%;
}

#content #show-image-info:link
{
   font-size: 90%;
   margin-left: 1em;
}

#content #show-image-info:link, #content #show-image-info:visited
{
   color: var( --link-text-color );
   border-bottom-color: var( --link-text-color );
}

#content #instrux
{
   font-size: 120%;
   color: var( --header-text-color );
   margin: 1.5em 0 2em 20px;
}

#content #instrux blockquote
{
   font-size: small;
   clear: none;
   display: inline-block;
   margin: 1em auto;
}

@media (prefers-color-scheme: dark)
{
   #content .download-link:link
   {
      background-image: -webkit-image-set( url( /software/images_dark/download.png ) 1x, url( /software/images_dark_2x/download.png ) 2x );
   }
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 * image info
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

#content #image-info
{
   display: none;
   border-collapse: collapse;
}

#content #image-info.visible
{
   display: block;
}

#content #image-info th
{
   text-align: right;
   padding: 0.35em 0.5em 0.25em 1em;
   color: var( --header-text-color );
   font-weight: bolder;
   background-color: var( --box-background-color );
}

#content #image-info td
{
   color: var( --box-text-color );
   padding: 0.35em 1em 0.2em 0.5em;
   border-bottom: 1px solid var( --box-background-color );
   font-family: "Menlo", monospace;
   font-size: 12px;
}

#content #image-info tr:last-child td
{
   border-bottom-width: 0;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 * FAQ page
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

#content #toc > ul
{
   list-style-type: none;
   padding-left: 0;
}

#content #toc ul ul
{
   list-style-type: disc;
   padding-left: 20px;
   margin-bottom: 1em;
}

#content #toc li
{
   margin: 0;
}

#content #toc li a:link
{
   border: none;
   color: var( --body-text-color );
}

#content #toc li a:visited
{
   color: var( --body-text-color );
}

#content #toc li a:hover
{
   color: var( --link-text-color );
}

#content #toc > ul > li > a
{
   font-size: 110%;
   font-weight: bold;
   color: var( --header-text-color );
}

#content #toc > ul > li > a:visited
{
   color: var( --header-text-color );
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 * release history page
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

table#versions
{
   margin-top: 1em;
   width: 100%;
   border-collapse: collapse;
   border: 1px solid var( --table-border-color );
}

#versions caption
{
   caption-side: bottom;
   font-size: 90%;
   text-align: right;
   color: var( --header-text-color );
   margin: 0;
   padding-top: 0.5em;
}

#versions thead tr
{
   background-color: var( --table-row-background-color );
   color: var( --header-text-color );
}

#versions tbody tr
{
   background-color: var( --table-row-background-color );
}

#versions tbody tr:nth-child( 2n+1 )
{
   background-color: var( --table-row-background-color-alternate );
}

#versions th
{
   padding: 0.75em 0 0.5em 0;
   border-bottom: 1px solid var( --table-border-color );
   font-weight: normal;
}

#versions td
{
   vertical-align: baseline;
   padding-top: 10px;
   padding-bottom: 10px;
}

#versions td.vnum, #versions th.vnum
{
   width: 15%;
   text-align: center;
   border-right: 1px solid var( --table-border-color );
}

#versions td.vnum .bundle-version
{
   color: var( --body-secondary-text-color );
}
   
#versions th.vnotes
{
   text-align: left;
   padding-left: 0.75em;
}

#versions td.vnotes
{
   padding-left: 5px;
   padding-right: 15px;
}

#versions td.vnotes ul
{
   padding-left: 30px;
   margin-left: 0;
   line-height: 1.4;
}

#versions td.vnotes ul ul
{
   list-style-type: square;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
}

#versions td.vnotes li
{
   margin: 0 0 0.25em 0;
}

#versions td em.date 
{
   font: normal 14px Helvetica, sans-serif;
   font-variant: small-caps;
   color: var( --header-text-color );
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 * support page
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

#license-agreement
{
   margin-top: 2em;
   padding: 0.75em 1.25em;
   background-color: var( --box-background-color );
   border: 1px solid var( --box-border-color );
   font-size: smaller;
}

#license-agreement .title
{
   font-size: larger;
   font-weight: bold;
   margin: 0 auto 0.25em auto;
}

#license-agreement .copyright
{
   font-weight: bold;
   margin: 0 auto 0.5em auto;
}

#license-agreement .term
{
   margin: 1em auto 0 auto;
}

#license-agreement .subterm
{
   margin: 0 auto;
   text-indent: 3em;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 * sidebar navigation
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

#sidebar h1
{
   visibility: hidden;
   margin: 0;
   padding: 0;
   height: 0;
}

#sidebar ul
{
   list-style-type: none;
   margin: 0 0 0 1em;
   padding: 0;
   width: 250px;
   
   font-size: 18px;
   line-height: 20px;
   color: var( --sidebar-text-color );
}

#sidebar > ul > li
{
   padding: 0;
   margin: 0;
   background-color: var( --sidebar-element-background-color );
   border-radius: 8px;
   padding-right: 25px;
}

#sidebar > ul > li.active,
#sidebar > ul > li.active:hover
{
   color: var( --sidebar-text-active-color );
   background-color: var( --sidebar-element-background-active-color );
}

#sidebar > ul > li:hover
{
   color: var( --sidebar-text-highlight-color );
   background-color: var( --sidebar-element-background-highlight-color );
}

#sidebar > ul li > a:link,
#sidebar > ul li > a:visited
{
   width: 250px;
   height: 2em;
   line-height: 2;
   padding: 15px 0;
   margin: 0 0 0.5em 0;
   text-transform: uppercase;
   text-align: center;
   text-decoration: none;
   color: currentColor;
   display: block;
}

#sidebar > ul li > a.detailed
{
   line-height: 1.2;
}

#sidebar > ul li > a.detailed > .sub
{
   display: block;
   font-size: 70%;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 * top navigation
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
#nav h1
{
   visibility: hidden;
   margin: 0;
   padding: 0;
   height: 0;
}

#nav ul
{
   list-style-type: none;
   margin: 0;
   padding: 0;
   
   font-size: 18px;
   line-height: 20px;
   text-transform: uppercase;
   color: var( --nav-text-color );
}

#nav > ul > li /* first level */
{
   float: left;
   padding: 8px 12px;
   height: 20px;
   margin-left: 0.5em;
   border: 1px solid transparent;
   border-radius: 8px;
   position: relative;
}

#nav > ul > li.item-open
{
   background-color: var( --nav-menu-highlight-color );
}

#nav > ul > li:last-child
{
   padding-right: 44px;
   background-image: url( /software/images/MRSoftIconSmall.png );
   background-image: -webkit-image-set( url( /software/images/MRSoftIconSmall.png ) 1x, url( /software/images_2x/MRSoftIconSmall.png ) 2x );
   background-position: 98% 50%;
   background-repeat: no-repeat;
   -webkit-background-size: 32px;
}

#nav > ul > li > ul /* second level */
{
   display: none;
}

#nav > ul > li.item-open > ul /* open second level */
{
   display: block;
   position: absolute;
   top: 37px;
   left: -1px;
   width: 150%;
   background-color: var( --nav-menu-background-color );
   box-shadow: 0 1px 5px var( --nav-menu-shadow-color );
   border: 1px solid var( --nav-menu-shadow-color );
   border-radius: 8px;
   padding: 0.5em 10px;
}

#nav > ul > li > ul > li
{
   text-transform: none;
}

#nav > ul > li > ul > li > a
{
   padding: 0.5em 12px;
}

#nav > ul > li > ul > li > a:hover
{
   background-color: var( --nav-menu-highlight-color );
   border-radius: 8px;
}

#nav > ul li > a:link,
#nav > ul li > a:visited
{
   text-decoration: none;
   color: currentColor;
   display: block;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 * code sample controls
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
#content .code-sample-view
{
   background: var( --code-sample-background-color );
   border: 1px solid var( --code-sample-border-color );
   line-height: 1.3;
   padding: 0;
   margin: 0;
}

#content .code-sample-view ul.code-selector 
{
   list-style-type: none;
   text-align: right;
   padding: 0;
   margin: 0;
   background-color: var( --code-sample-border-color );
   font: menu;
}

#content .code-sample-view ul.code-selector li
{
   display: inline-block;
   border: 1px solid var( --code-sample-border-color );
   border-width: 0 0 1px 1px;
   margin: 0;
   color: var( --link-text-color );
}

#content .code-sample-view ul.code-selector li a:link,
#content .code-sample-view ul.code-selector li a:visited
{
   padding: 8px 12px;
   color: var( --body-secondary-text-color );
   background-color: var( --page-background-color );
   border-bottom: none;
   display: block;
}

#content .code-sample-view ul.code-selector li.active
{
   border-bottom-color: var( --code-sample-background-color );
}

#content .code-sample-view ul.code-selector li.active a,
#content .code-sample-view ul.code-selector li a:hover
{
   color: var( --code-sample-text-active-color );
   background-color: var( --code-sample-background-color );
}

#content .code-sample-view.enabled .code-sample-block
{
   display: none;
}

#content .code-sample-view.enabled .code-sample-block.active
{
   display: block;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 * print-specific overrides
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

@media print
{
   #sidebar,
   #nav
   {
      display: none;
   }
   #content
   {
      top: 300px;
      left: 0;
      margin-left: 3em;
   }
}