/*
 * top-level software stylesheet
 */

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;
}

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

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 * layout
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
body
{
   background-color: rgb( 241, 241, 241 );
   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: 5em;
}

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

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

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

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

#content h4
{
   color: rgb( 85, 85, 85 );
   font-weight: bold;
   font-size: 140%;
   margin: 1.5em 0 0 0;
}

@-webkit-keyframes 'target-heading-highlight'
{
   from  { color: rgb( 85, 85, 85 ); padding-left: 0; }
   50%   { color: rgba( 82, 135, 255, 1.0 ); padding-left: 40px; }
   to    { color: rgb( 85, 85, 85 ); padding-left: 0; }
}

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

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

@-webkit-keyframes 'target-section-highlight'
{
   from  { background-color: rgb( 241, 241, 241 ); }
   10%   { background-color: rgba( 164, 188, 255, 0.35 ); }
   to    { background-color: rgb( 241, 241, 241 ); }
}

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

#content a:link
{
   text-decoration: none;
   color: rgb( 82, 135, 255 );
   border-bottom: 1px dotted rgb( 82, 135, 255 );
}

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

#content blockquote
{
   border-left: 20px solid rgb( 153, 153, 153 );
   padding: 1em 1em;
   margin: 1em 0;
   background-color: rgb( 221, 221, 221 );
   color: rgb( 85, 85, 85 );
}

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

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

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

#content pre
{
   border: 1px solid rgb( 153, 153, 153 );
   padding: 1em 1em;
   margin: 1em 0;
   background-color: rgb( 221, 221, 221 );
   color: rgb( 51, 51, 51 );
   white-space: pre;
}

#content blockquote pre
{
   background-color: rgb( 238, 238, 238 );
}

#caution
{
   font-size: 120%;
   padding: 0.5em 1em 0.25em 1em;
   margin: 1em 0;
   border: 1px solid rgb( 227, 50, 58 );
   background-color: rgb( 254, 193, 194 );
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 * intro page
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

#content #intro
{
   font-size: 120%;
   color: rgb( 85, 85, 85 );
   margin: 1.5em 0 2em 20px;
}

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

#content .feature
{
   clear: both;
   padding: 40px 25px 40px 0;
   font-size: 120%;
   border-top: 1px solid rgb( 221, 221, 221 );
   min-height: 150px;
   color: rgb( 85, 85, 85 );

   padding-left: 25px;
   margin-left: -25px;
   background-image: -webkit-linear-gradient( top, rgb( 236, 236, 236 ), rgb( 241, 241, 241 ) 150px );
}

#content .feature:nth-child( 2n+1 )
{
   color: rgb( 51, 51, 51 );
}

#content .feature:nth-of-type( 1 )
{
   border-top-width: 0;
   background-image: none;
}

#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 #999;
   border-radius: 5px;
}

#content img.shot-clip
{
   border: 1px solid rgb( 153, 153, 153 );
   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;
}

#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 .uie
{
   padding: 0.15em 0.5em;
   border-radius: 3px;
   background-color: rgb( 225, 225, 225 );
   white-space: nowrap;
}

#content blockquote .uie
{
   background-color: rgb( 210, 210, 210 );
}

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

#content .download-link:link
{
   display: inline-block;
   min-height: 36px;
   background: rgb( 210, 210, 210 ) 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 rgb( 150, 150, 150 );
   color: rgb( 75, 75, 75 );
}

#content .download-link:visited
{
   color: rgb( 75, 75, 75 );
}

#content .download-link:link:hover
{
   background-color: rgb( 200, 200, 200 );
}

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

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

#content #instrux
{
   font-size: 120%;
   color: rgb( 85, 85, 85 );
   margin: 1.5em 0 2em 20px;
}

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

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 * 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: black;
}

#content #toc li a:visited
{
   color: black;
}

#content #toc li a:hover
{
   color: rgb( 82, 135, 255 );
}

#content #toc > ul > li > a
{
   font-size: 110%;
   font-weight: bold;
   color: rgb( 85, 85, 85 );
}

#content #toc > ul > li > a:visited
{
   color: rgb( 85, 85, 85 );
}

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

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

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

#versions thead tr
{
   background-color: white;
   color: rgb( 85, 85, 85 );
}

#versions tbody tr
{
   background-color: white;
}

#versions tbody tr:nth-child( 2n+1 )
{
   background-color: rgb( 237, 243, 254 );
}

#versions th
{
   padding: 0.75em 0 0.5em 0;
   border-bottom: 1px solid #bbb;
   font-weight: normal;
}

#versions td.vnum, #versions th.vnum
{
   width: 15%;
   text-align: center;
   border-right: 1px solid #aaa;
}

#versions td.vnum .bundle-version
{
   color: #888;
}
   
#versions th.vnotes
{
   text-align: left;
   padding-left: 0.75em;
}

#versions td.vnotes
{
   padding: 10px 15px 10px 5px;
}

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

#versions td.vnotes ul ul
{
   list-style-type: square;
   line-height: 1.2;
   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: rgb( 85, 85, 85 );
}

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

#legaliseBox
{
   margin-top: 2em;
   padding: 0.75em 1.25em;
   background-color: #DDD;
   border: 1px solid #999;
   font-weight: bold;
}

#noWarranty
{
   font-weight: normal;
   font-size: smaller;
   text-transform: uppercase;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 * 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: rgb( 119, 119, 119 );
}

#sidebar > ul > li
{
   padding: 0;
   margin: 0;
   background-color: rgb( 220, 220, 220 );
   padding-right: 25px;
}

#sidebar > ul > li.active,
#sidebar > ul > li.active:hover
{
   color: white;
   background-color: rgb( 82, 135, 255 );
}

#sidebar > ul > li:hover
{
   color: white;
   background-color: rgb( 150, 150, 150 );
}

#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: rgb( 119, 119, 119 );
}

#nav > ul > li /* first level */
{
   float: left;
   padding: 8px 12px;
   height: 20px;
   margin-left: 0.5em;
   border: 1px solid transparent;
   position: relative;
/*    background-color: rgb( 220, 220, 220 ); */
}

#nav > ul > li.item-open
{
   border: 1px solid rgb( 153, 153, 153 );
   background-color: rgb( 220, 220, 220 );
}

#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: 36px;
   left: -1px;
   width: 150%;
   border: 1px solid rgb( 153, 153, 153 );
   padding: 0.5em 12px;
   background-color: rgb( 241, 241, 241 );
}

#nav > ul > li > ul > li
{
   text-transform: none;
   margin: 0.5em 0;
}

#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: #fff;
   border: 1px solid #bbb;
   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: #bbb;
   font: menu;
}

#content .code-sample-view ul.code-selector li
{
   display: inline-block;
   border: 1px solid #bbb;
   border-width: 0 0 1px 1px;
   margin: 0;
   color: rgb( 82, 135, 255 );
}

#content .code-sample-view ul.code-selector li a:link,
#content .code-sample-view ul.code-selector li a:visited
{
   padding: 8px 12px;
   color: rgb( 82, 135, 255 );
   background-color: rgb( 241, 241, 241 );
   border-bottom: none;
   display: block;
}

#content .code-sample-view ul.code-selector li.active
{
   border-bottom-color: #fff;
}

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

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

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