/* GLOBAL STYLES FOR REFERENCE DOCS

   developer:   suef
   requires:    /common/framework/css/framework.en.css
   ========================================================================== */
/*
  Colors:

  333     dark-grey
  636363  medium-grey
  848484  light-medium-grey
  888     main heading sub-text grey
  cacaca  grey divide
  e7e7e7  grey divide
  f3f3f3  lightest grey
  0549a6  blue
  f3fbff  lightest-blue
  d9e5f3  border-blue
  136eb7  badge-blue
  7d93b0  grey-blue
  608bab. light-grey-blue
  f77700  hover
  d96500  dark-orange
  fffcb8  pale-yellow
*/
/* ==========================================================================
   MAIN
   ========================================================================== */
*, :after, :before { box-sizing: border-box; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font: inherit; line-height: 1.2; }
dd, dl, dt, li, ol, ul { display: block; list-style: none; }
.main { font-family: 'Source Sans Pro', Arial, sans-serif; color: #333; margin: 0; font-size: .94rem; }
.main p { line-height: 1.6; margin: .67rem 0; }
.main a { color: #0549a6; text-decoration: none; }
.main a:hover { color: #f77700; }
sub, sup { font-size: smaller; }
.ExLine { margin: 23px 0 21px 0; border-top: 1px solid #e7e7e7; }
.main .inner img { vertical-align: middle; max-width: 100%; height: auto; }
 
/* Bullets */
.inlineSeparator:before, .formatIntroWrap .inlineSeparator:before, ul.functionList li:before, ul.FormatList li:before, .filter_list li:before, li.BulletedText:before, .special-character.FilledSmallSquare:before, .Notes li:before
{ content: ''; background: #adadad; width: 4px; height: 4px; display: inline-block; top: .55rem; vertical-align: top; position: absolute; margin: 0 .37rem; left: -1rem; }

/* ==========================================================================
   HEADING title
   ========================================================================== */
.topContentWrap a[href="#DetailsAndOptions"], .topContentWrap a[href="#Examples"]{ display: none; }
.topContentWrap.sticky { background: #f0f0f0; border-bottom: 1px solid #ddd; left: 0; right: 0; max-width: 100%; z-index: 100; height: auto; }
.topContentWrap.sticky a[href="#DetailsAndOptions"], .topContentWrap.sticky a[href="#Examples"]{ display: inline-block; }

/* icons */
.iconography { float: right; display: inline-block; margin: .28rem 0 0 0; height: 46px; }
.iconography span { display: inline-block; margin: 0 0 0 .3rem; vertical-align: middle; }
.iconography:empty { display: none; }

.iconography .media-icons { position: relative; margin: .45rem 0 0 .3rem; vertical-align: top; }
.iconography .media { font-size: 0; position: relative; }
.iconography .media:before { opacity: .5; }
.iconography .media.hover .triangle:before { position: absolute; content: ''; border-top: 9px solid transparent; border-bottom: 9px solid #fff; border-left: 9px solid transparent; border-right: 9px solid transparent; top: 14px; right: 5px; z-index: 12; }
.iconography .media.hover .triangle:after { position: absolute; content: ''; border-top: 10px solid transparent; border-bottom: 10px solid #e5e5e5; border-left: 10px solid transparent; border-right: 10px solid transparent; top: 12px; right: 4px; z-index: 11; }
.iconography .tooltip { display: none; text-align: left; border: 1px solid #e5e5e5; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); background: #fff; font-weight: 400; color: #5d5c5c; padding: 8px 14px 8px 14px; height: auto; position: absolute; right: 0; font-size: 10px; border-radius: 3px; width: auto; top: 32px; margin: auto; left: auto; bottom: auto; z-index: 10; white-space: nowrap; }
.iconography .media.hover:before { opacity: 1; }
.iconography .media.hover + .tooltip { display: block; }

.iconography .updated { cursor: pointer; padding: .33rem; margin: -.13rem 0 0 .8rem; color: #d96500; font-style: italic; text-transform: uppercase; font-size:  1.27rem; font-weight: 400; line-height: 1.1; position: relative; }
.iconography .updated .changes, .updated .hide-changes { font-size: .77rem; color: #999; margin: 0; text-transform: none; font-style: normal; }
.iconography .updated .changes { display: block; }
.iconography .updated .hide-changes { display: none; }
.iconography .updated:hover { color: #f77700; }
.iconography .new { color: #d96500; font-style: italic; text-transform: uppercase; font-size:  1.27rem; font-weight: 400; line-height: 1.1; }
.iconography .pipe { border-right: 1px solid #e5e5e5; margin: 0 .6rem; height: 26px; }
.iconography .experimental { font-size: 1rem; color: #848484; text-transform: uppercase; letter-spacing: 0; position: absolute; top: -1rem; left: 0; font-weight: 600; margin: 0; }
.iconography .experimental .text { color: #136eb7; margin: 0; vertical-align: top; top: 1px; position: relative; }

.main-heading { position: relative; margin: 2rem 0 1.07rem; }
.main-heading:after { clear:both; content: ''; display: block; }
.main-title { font-size: 2.67rem; font-weight: 600; margin: 2rem 0 1.07rem; display: inline-block; }
.main-heading .main-title { margin: 0; }
.c .main-title { color: #3f7f1f; }
.menuitem .main-title img { top: -2px; position: relative; }
#techNote .main-title, #tutorialOverview .main-title { font-family: 'Linux Libertine', Georgia, Times, serif; font-weight: 400; }
.indicator .main-title, .format .main-title, .service .main-title, .device .main-title, .frontendobject .main-title { font-weight: 400; }
.message .main-title { color: #dd1100; }
.AwaitingReviewNote + .main-title, .ObsolescenceNote + .main-title { margin: 0 0 1.07rem; }
.main-heading-type { color: #888; font-size: 1.6rem; }
.main-title-top { color: #848484; font-size: 1.27rem; font-weight: 600; top: -1rem; position: absolute; display: block; }
.ContextNameCell { display: none; }
.quote { color: #a5a5a5; }
p.subheading { color: #888; font-weight: 300; font-size: 1.2rem; margin: -1rem 0 0 .95rem; position: relative; }

.highlighting { background: #fffcb8; }
.highlighting .changes { display: none; }
.highlighting .hide-changes { display: block; }

/* ==========================================================================
   FUNCTION INTRO
   ========================================================================== */
.functionIntroWrap { padding: 1rem 0px; background: #f3fbff; margin: 0 0 1.07rem; border: 2px solid #d9e5f3; }
.functionIntro { border-bottom: 1px solid #d9e5f3; margin: 0 1.64rem; padding: .87rem 0; }
.functionIntro:last-child { border-bottom: 0; padding: .7rem 0; }
.functionIntro .code { margin: 0; line-height: 1.1; }
.functionIntro .code a { font-size: 1.07rem; }
.functionIntro .code-description { margin: .2rem 0 0 1.07rem; font-size: .97rem; line-height: 1.3; }
.functionIntro .TI { font-size: 1rem; padding: 0 0 0 .08rem; }
sub .TI, sup .TI, .functionIntro sub .TI, .functionIntro sup .TI { font-size: .8rem; }

.c .functionIntroWrap { background: #f8fffa; border-color: #dcebd1; }

.character .functionIntro table { margin: 0; width: 100%; }
.character .functionIntroWrap { background: #f3f3f3; padding: 1.37rem 1.87rem; border: 0; margin: 0 0 2.2rem; }
.character .functionIntroWrap .functionList { margin: 0; padding: 0; }

.device .functionIntroWrap { margin: 0 .3rem 1.07rem; }
.device #DeviceDescription { padding: 0 2.1rem .7rem; }
.device #DeviceDescription li { margin: 0; }
.device #DeviceDescription li:before { margin: 0; left: -.8rem; }
.device section .functionIntroWrap { border-width: 1px; padding: 0; }
.device section .functionIntro  { margin: 0 1rem; padding: .8rem 0; }

.character-img { width: 23%; padding: 0 1rem 0 0; }
.character-img img { max-width :100%; }
.MenuName a { color: #545454; font-weight: 600; }
.functionIntroWrap .MenuName { font-weight: 600; }

.indicatorIntro { line-height: 2.3; margin: 0 0 .45rem; }
.formatIntro { color: #636363; font-size: 1.2rem; font-weight: 300; }


/* ==========================================================================
   SECTION
   ========================================================================== */
section { margin: 1.5rem 0; }
.main section:last-of-type { padding: .82rem 0; }
.main section:last-of-type h1.toggle { padding: 8px 2px !important; }
.main section#DetailsAndOptions:last-of-type { padding: .82rem 0; }
.main-title ~ section, .main-heading ~ section { border-top: 1px solid #cacaca; margin: 1.5rem auto 0; padding: .82rem 0 0; }
section:first-of-type { margin: 2rem 0 0; }
.main-title + section, .main-heading + section { margin: 1.5rem auto 0; padding: 0; }
.functionIntroWrap + section, .FormatList + section, .formatIntroWrap + section { border-top: 0; margin: 0; }
#techNote section { margin: 2.53rem 0 0; }
section + #SeeAlso { margin: 1.5rem 0 0; }
section h1 { color: #8b8b8b; margin: 0; font-size: 1.07rem; }

#SeeAlso a { font-weight: 600; }

p.intro { font-size: .9rem; line-height: 1.6; color: #636363; margin: 0 0 1.3rem; }
p.intro a { font-weight: 300; }
p.intro span a { font-size: 1.07rem; }
.service p.intro { padding: 0 0 0 .8rem; margin: 0; }

section .toggle { color: #d96500; letter-spacing: .043rem; border-top: 0; padding-top: 0; position: relative; padding: .6rem .27rem; cursor: pointer; }
  section .toggle:hover { color: #f77700; }
section .toggle:before { content: ''; background: none; display: inline-block; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); border-left: 0; border-color: #d96500; border-width: 0 2px 2px 0; border-style: solid; width: 6px; height: 6px; left: -4px; top: -.2rem; position: relative; }
section .toggle:hover:before { border-color: #f77700; }
section .toggle.open:before { border-width: 0 0 2px 2px; left: -3px; top: -.25rem; }
  section .toggle.open:hover:before { border-color: #f77700; }

section h1.toggle.open { padding: 8px 2px; }
section h1.toggle:before { content: ''; margin: 0 .33rem 0 0; vertical-align: text-bottom; left: -2px; top: -.5rem; width: 7px; height: 7px; }
section h1.toggle:hover:before { border-color: #f77700; }
section h1.toggle { padding: 8px 2px 0; }
section h1.toggle.open:before { border-color: #d96500; top: -.5rem; left: 0; }
  section h1.toggle.open:hover:before { border-color: #f77700; }

section h2.toggle:before { top: -.1rem; }

section h3.toggle:before { top: -.15rem; }
section h3.toggle.open:before { top: -.18rem; }

section h4.toggle:before { content: ''; border-width: 0 1px 1px 0; margin: 0 3px 0 0; vertical-align: text-bottom; left: -3px; top: -.45rem; width: 4px; height: 4px; }
section h4.toggle.open:before { top: -.5rem; left: -2px; border-width: 0 0 1px 1px; }
section h5.toggle:before { content: ''; border-width: 0 1px 1px 0; margin: 0 3px 0 0; vertical-align: text-bottom; left: -3px; top: -.3rem; width: 4px; height: 4px; }
section h5.toggle.open:before { top: -.4rem; left: -2px; border-width: 0 0 1px 1px; }
section h6.toggle:before { content: ''; border-width: 0 1px 1px 0; margin: 0 3px 0 0; vertical-align: text-bottom; left: -3px; top: -.3rem; width: 4px; height: 4px; }
section h6.toggle.open:before { top: -.4rem; left: -2px; border-width: 0 0 1px 1px; }

section > .hideable { margin: 0 12px 2.53rem; }
#Examples > .hideable { margin: 0 12px 2.53rem; }
.hideable { margin: 0 12px; display: none; position: relative; }
.hideable .hideable { margin: 0 .73rem; }

section .toggle { color: #d96500; }
section h1.toggle { font-size: 1.18rem; }
section h2.toggle { font-size: 1.08rem; }
section h2 .total-examples { font-size: .7rem; }
section h3.toggle { font-size: 1rem; padding: .18rem .13rem; }
section h3 .total-examples { font-size: .67rem; }
section h4.toggle { font-size: .9rem; padding: .15rem .1rem; }
section h4 .total-examples { font-size: .64rem; }

.total-examples { top: -1px; position: relative; }
.total-examples, .open-all, .close-all { font-size: .7rem; color: #888888; font-weight: 300; }
.open-all, .close-all { display: none; }
.on.close-all, .on.open-all { display: inline-block; margin: 0 .7rem; top: -1px; position: relative; cursor: pointer; padding: 0 .3rem 1px; border: 1px solid #cacaca; border-radius: 3px; }
.open-all:hover, .close-all:hover { color: #fff; background: #cacaca; }
#Examples h1 { display: inline-block; }
#Examples p { font-size: .94rem; }
h2.toggle:last-of-type { padding: .6rem .2rem .2rem .27rem; }

.service h3 { color: #b46625; font-size: 1rem; margin: 1rem 0; }

.format .FormatList { background: #f3f3f3; padding: .77rem  1.27rem; margin: 2.07rem 0 1.07rem; }
.format .formatIntroWrap { position: relative; margin: 0 0 0 .95rem; }
.format .formatIntro td { vertical-align: top; }
.format .FormatList li { margin: .57rem 0 .57rem 1rem; position: relative; }
.format .SpanColumn .formatIntro, .format .lineAbove .formatIntro { width: 94%; margin: 0; font-size: .93rem; font-weight: 400; padding: 0 0 .5rem; }
.format .SpanColumn:last-child .formatIntro { margin: 0; padding: 0 0 .2rem; }
ul.functionList li.WeakDivider { border-top: 1px solid #ddd; margin: 0 0 0 .3rem; }
ul.functionList li.WeakDivider:before { display: none; }

.device .subheading + .formatIntroWrap { margin: 2rem 0; }
.device .formatIntroWrap { background: #f3f3f3; padding: 1.5rem 2rem; margin: 1rem 0 2rem; }
.device .formatIntro { font-size: 1rem; color: #333; font-weight: 400; line-height: 1.5; }
.device .format-intro-label { color: #636363; }

#FunctionEssay .functionList { column-count: 2; margin: .44rem 0 0 0; }
#FunctionEssay .functionessay { margin: 0 0 1.3rem 0; }

a.hideable-close-button { color: #aaa; font-size: .7rem; display: block; position: absolute; z-index: 10; bottom: -2rem; }
a.hideable-close-button:before { content: ''; border-top: 1px solid #aaa; border-left: 1px solid #aaa; transform: rotate(45deg); width: 6px; height: 6px; display: inline-block; top: 2px; right: 3px; position: relative; }
a.hideable-close-button:hover:before { border-color: #f77700; }

p.smallTitle { margin: 0; font-size: .9rem; color: #a4a4a4; text-transform: uppercase; }
h2.Section { font-size: 1.5rem; color: #333; margin: 2rem 0 1rem; border-top: 1px solid #cacaca; padding: .5rem 0 0 0; font-weight: 600; }
h3.Subsection { color: #333; font-size: 1.3rem; margin: 2rem 0 1rem; }
h4.Subsubsection { font-size: 1rem; line-height: 1.2; font-weight: 600; color: #666; margin: 1.1rem 0 .5rem; }

.howto-main-links { margin: .6rem 0; }

/* ==========================================================================
   FUNCTION LIST
   ========================================================================== */
ul.functionList { margin: .44rem 0 1.32rem 1.07rem; padding: 0; color: #333; }
ul.functionList li { padding: 0; margin: .47rem 0 0 1rem; line-height: 1.4; position: relative; }
#SeeAlso .inlineFunctionList { margin: .44rem 0 0 1.52rem; font-size: .98rem; display: block; max-width: 900px; }
#Tutorials ul.functionList, section[id^="Related"] ul.functionList { margin: .44rem 0 0 1.3rem; font-size: .98rem; }
#Tutorials ul.functionList li, section[id^="Related"] ul.functionList li { margin: .44rem 1rem; }

section { position: relative; }
section ul.functionList { margin: .44rem 0 1.32rem .82rem; }
section ul.functionList li { margin: .3rem 0 0 1.52rem; font-size: .98rem; line-height: 1.4; }
.service section ul.functionList { margin: .44rem 0 1.32rem 0; }
.device section ul.functionList { margin: .44rem .8rem .5rem .8rem; }
.device section ul.functionList li { margin: .67rem 1rem; }
.inlineFunctionList .inlineSeparator:before { position: relative; left: 0; top: .65rem; }

.hideable ul.functionList:last-child { margin: .44rem 0 0 1.07rem; }
.hideable ul.functionList li { margin: .67rem 0; }
.hideable ul.functionList li:last-child { margin-bottom: 0; }
#DetailsAndOptions ul.functionList:last-of-type { margin: .44rem 0 0 1.07rem; }

ul.functionList li.functionessay { margin: 0 0 1.3rem -1rem; }
ul.functionList li.functionessay:before { display: none; }

/* ==========================================================================
   DETAILS AND OPTIONS
   ========================================================================== */
#DetailsAndOptions { margin: 0 auto; padding: .83rem 0 0; }
#DetailsAndOptions .open ~ .NotesThumbnails, .alternateHeader .open ~ .NotesThumbnails { display: none; }
.NotesThumbnails { padding: .82rem; margin: .5rem 0 0; position: relative; position: relative; overflow: hidden; white-space: nowrap; }
.NotesThumbnails img { width: 188px; box-sizing: content-box; padding: 0 5px 0 0; }
.NotesThumbnails td:first-of-type { display: none; }

#DetailsAndOptions:hover h1.toggle { color: #f77700; }
#DetailsAndOptions:hover h1.toggle:before { border-color: #f77700; }
#DetailsAndOptions:hover h1.toggle.open { color: #d96500; }
#DetailsAndOptions:hover h1.toggle.open:before { border-color: #d96500; }
#DetailsAndOptions h1.toggle.open:hover { color: #f77700; }
#DetailsAndOptions h1.toggle.open:hover:before { border-color: #f77700; }
#DetailsAndOptions h1.toggle:hover:before { border-color: #f77700; }

#DetailsAndOptions:hover .NotesThumbnails:after, .alternateHeader:hover .NotesThumbnails:after { cursor: pointer; content: ''; background: #00aaff; position: absolute; top: 0; bottom: 0; right: 0; left: 0; opacity: .06; z-index: 10; }
.c #DetailsAndOptions:hover .NotesThumbnails:after { background: #00ff2b; }

#DetailsAndOptions + #Examples { margin: 1rem auto 0; padding: 0; }

.NotesThumbnails td { padding: 1rem; }

.DeviceAbstract { font-size: 1rem; margin: 1rem 0; }
.DeviceImageCaption { font-size: .9; margin: 1rem 0; font-style: italic; }

/* ==========================================================================
   COMPATIBILITY
   ========================================================================== */
p.UpgradeLabel { color: #42821f; font-weight: 600; margin: 1rem 0 0 0; }
.UpgradeObjectName { font-size: 2.5rem; font-weight: 600; margin: 0 0 1.07rem; display: inline-block; font-family: 'Source Code Pro'; }
.UpgradeSummary { padding: .5rem 1rem; border: 1px solid #42821f; background: #d9f2da; }
.LegacyVersion { color: #42821f; width: 60px; display: inline-block; text-align: center; vertical-align: middle; }
.LegacyInput img { vertical-align: middle; border: 1px solid #42821f; padding: .5rem 1rem; display: inline-block; box-sizing: content-box; }

/* ==========================================================================
   ALPHABET LISTING
   ========================================================================== */
.AlphabetListingJumpTo + h3, .AlphabeticalListing + h3  { margin: 0; padding-top: 5px; border-top: 1px solid silver; }
.AlphabeticalListing { margin: 0 0 1rem; }
.AlphabetListingJumpTo { margin: 0 0 2rem; padding: 10px; background: #ededed; border: 1px solid silver; font-weight: bold; z-index: 10; }
.AlphabetListingJumpTo a { margin: 0 10px 0 0; }
.AlphabeticalListing table { margin: .5rem 0 0; }
.AlphabeticalListing table td { width: 218px; }
.AlphabeticalListing table a { display:inline-block; }

/* ==========================================================================
   INPUTS AND OUTPUTS
   ========================================================================== */
.lab { width: 35px; font-size: 9px; line-height: 1; font-family: Arial, sans-serif; color: #999; text-align: right; vertical-align: top; padding: 8px 0 0 0; white-space: nowrap; }
.Input { padding: 2px 4px 2px; }
.Output { padding: 1px 4px 2px; }
.IO { position: relative; margin: 1rem 0; }
.IO table { width: auto; max-width: 100%; }
.IO .Output img { max-width: 100%; height: auto; }
.IO .Message { margin: 0 0 1rem 73px; }
.InCell { min-width: 210px; margin: .5rem 0; }
.number { display: none; }
.celllabelTableForm { font-size: .7rem; line-height: 1; font-family: Arial, sans-serif; color: #828282; margin: .37rem 0 0 1.57rem; }
.IO .Print { margin: 0 73px 5px; }
.IO .Print:last-of-type { margin: 0 73px 1.4rem; }
p + .IO { margin: 0 0 1rem; }

/* ==========================================================================
   PLAY ANIMATION
   ========================================================================== */
.playAnimation { display: none; }
.animation .playAnimation + span:after { content: ''; left: 0; top: 0; display: inline-block; width: 100%; height: 100%; position: absolute; z-index: 100; }
.animation { box-shadow: 0 0 4px 0 transparent; }
.animation:hover { padding: .33rem; position: relative; border-radius: .33rem; }
.animation:active .playAnimation + span:before { background-position: -26px 0; background-size: 52px; }
.animation.pause:hover .playAnimation + span:before { background: 0 -26px; background-size: 52px; }
.animation.pause:active .playAnimation + span:before { background: -26px -26px; background-size: 52px; }
.animation object { display: inline-block; }

/* ==========================================================================
   MISC
   ========================================================================== */
.hideable:after { content: ''; clear: both; display: block; height: 1px; }
.toggle + .hideable { display: none; }
.opened, .open + .hideable, .open + span + span + .hideable, .open + .NotesThumbnails ~ .hideable
{ display: block !important; }
.last { margin-bottom: 0 !important; }
.last *:last-child { margin-bottom: 0; }

/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for large screens (1200px)
   ========================================================================== */

@media all and (max-width: 1200px) {
    .main { font-size: 1rem; }
    .main #Examples p { font-size: 1rem; }
}

/* styles for medium screens (900px)
   ========================================================================== */

@media all and (max-width: 900px) {
    .AlphabeticalListing table td { width: 100%; display: block; }
    .header .right { width: 37% !important; }
}

/* styles for small screens (600px)
   ========================================================================== */

@media all and (max-width: 600px) {
    .iconography .updated { top: -.2rem; }

    /* inputs and outputs */
    .lab { display: none; }
    .IO .Message { margin: 0; }
    .InCell .number:after, .OCell .number:after { font-family: Arial, sans-serif; content: ''; display: inline-block; line-height: 1; color: #bbb; font-size: 1rem;
    position: relative; width: 4px; height: 7px; left: 1px; top: 0; }
    .InCell .number:after { content: '\00bb'; }
    .OCell .number:after { content: '\203a'; }
    .InCell .number, .OCell .number { font-size: .7rem; font-family: Arial, sans-serif; position: relative; display: table-cell; color:#999; width: 1rem; vertical-align: text-top; top: 5px; right: 3px; white-space: nowrap; text-align: left; left: 1px; }
    .OCell img { max-width: 100%; }
    .IO .Print { margin: 0 0 5px; }

    #techNote .IO, .howto .IO { margin: 1rem 0 0 1.2rem; }

    .character-img, .character-img + td { width: 100%; display: block; }

    /* clipboard */
    .clipboard { display: none; }
    .tooltip { left: 0; }
    .InCell, .OCell { left: -18px; position: relative; }
    #Examples .hideable { margin: 0 0 0 .37rem; }
    #Examples .hideable .hideable { margin: 0 0 0 .67rem; }
    #Examples .hideable .hideable .hideable { margin: 0; }

    .functionIntroWrap { margin: 0 -1rem; position: relative; border-left: 0; border-right: 0; }
    .device .functionList { margin: 0; }

    .AlphabetListingJumpTo, .AlphabetListingJumpTo.sticky { margin: 0 10px 25px !important; }

    .search { width: 100%; }

    .animation:hover .playAnimation + span:before { left: -2px !important; }
}