/* STYLES FOR REFERENCE DOCS ROOT GUIDE PAGE

   developer:   suef
   requires:    /common/framework/css/framework.en.css
                /cloud-assets/css/global.css
   ========================================================================== */

body#languageRootGuide { background: #e5e5e5; }
#languageRootGuide .main { background: #e5e5e5; padding: 0; overflow: hidden; margin: 0 auto !important; }
#languageRootGuide .main .inner { overflow: visible; padding: 0; max-width: 100%; }
#languageRootGuide .footer-links { display: none; }


/* ==========================================================================
   OTHER
   ========================================================================== */
#languageRootGuide .main { margin: 0; padding: 1.5rem 0 0 0; }
#languageRootGuide .container { text-align: center; font-size: 0; position: relative; clear: both; max-width: 1200px; margin: 0 auto; }
#languageRootGuide .container { padding: 0; display: block; }
#languageRootGuide .container .inner { padding: 2px; }
#languageRootGuide section { margin: 0; }

#languageRootGuide .thumb { text-align: left; display: inline-block; width: 33.3333%; cursor: pointer; vertical-align: top; border: 2px solid #e5e5e5; position:relative; }

#languageRootGuide .podheader { position: relative; overflow: hidden; border-radius: 5px; background: #fff; display: block; }
#languageRootGuide .podheader-inner { display: table; table-layout: fixed; width: 100%; height: 93px; vertical-align: middle; }
#languageRootGuide .podheader svg { width: 58px; height: 58px; padding: 0 5px; vertical-align: middle; }
#languageRootGuide .podheader .svg { display: table-cell; width: 65px; vertical-align: middle; text-align: right; font-size: 1.875rem; text-align: center; }

#languageRootGuide .left .svg { color: #37a8ac; }
#languageRootGuide .left .thumb:hover .svg { color: #fff; }
#languageRootGuide .resources .svg { color: #898989; width: 70px; }
#languageRootGuide .resources .svg svg { color: #898989; width: 32px; height: 32px; fill: #898989; }
#languageRootGuide .podheader-inner:after { content: ''; width: auto; display: table-cell; }
#languageRootGuide .selected .podheader svg, #languageRootGuide .thumb:hover .podheader svg { fill: #fff; }
#languageRootGuide .podheader .title { display: table-cell; vertical-align: middle; color: #666; line-height: 1.3; padding: 0 0 0 7%; width: 100%; font-size: 1rem; }
#languageRootGuide  .selected .podheader .title, #languageRootGuide  .thumb:hover .podheader .title  { color: #fff; }
#languageRootGuide .links-list { background: #fff; z-index: 9999; cursor: default; text-align: center; display: none; position: absolute; left: 0; right: 0; padding: 2px 0; margin: 2px 0 0; }
#languageRootGuide .spacer { margin: 0 0 4px; }
#languageRootGuide   .links-list ul { list-style-type: none; margin: 0; padding: 0; text-align: left; }
#languageRootGuide     .links-list .list-table > ul > li { display: block; padding: .4rem 1rem .4rem 0; margin: 0 1.3rem 0 0; }
#languageRootGuide   .links-list .list-table li > a { color: #333; text-transform: none; font-size: .93rem; font-weight: 600; position: relative; display: inline; line-height: 1; vertical-align: top; }
#languageRootGuide .links-list li > a:after { content: '\00bb'; display: inline; margin: 0; font-size: 1.5rem; top: .4rem; font-weight: 300; right: -.2rem; position: relative; line-height: 0; vertical-align: top; }

#languageRootGuide .selected .links-list ul { border-top: 1px solid #dedede; margin: .5rem 5%; padding: .7rem 0 0; }
#languageRootGuide .links-list ul:first-child { border-top: 0; padding: 0; }

#languageRootGuide h2 { font-size: .875rem; color: #333; margin: 2rem auto .625rem; font-weight: 400; text-transform: uppercase; text-align: center; }

#languageRootGuide .container.left .thumb .podheader-inner { height: 40px; padding: 0; }
#languageRootGuide .container.left .podheader .title { font-weight: 400; font-size: .875rem; color: #646464; }
#languageRootGuide .container.left .thumb:hover .title { color: #fff; }
#languageRootGuide .container.left .podheader:before { display: none; }

#languageRootGuide .podheader:before { width: auto; display: table-cell; }

#languageRootGuide .redbg svg { fill: #ed6600; }
#languageRootGuide .redbg:hover .podheader { background: #ec6601; }
#languageRootGuide   .redbg.selected .podheader, #languageRootGuide   .redbg.selected:hover .podheader { background: #ff6e00; }
#languageRootGuide .redbg .links-list { border: .25rem solid #ff6e00; } 
#languageRootGuide   .redbg .links-list a:after { color: #ff6e00; }
#languageRootGuide   .redbg .links-list a:hover { color: #ec6601; }

#languageRootGuide .orangebg svg { fill: #e79e01; }
#languageRootGuide .orangebg.selected .podheader, #languageRootGuide   .orangebg.selected:hover .podheader { background: #ffae00; }
#languageRootGuide .orangebg .links-list { border: .25rem solid #ffae00; }
#languageRootGuide .orangebg:hover .podheader { background: #e69e01;  }
#languageRootGuide   .orangebg .links-list a:after { color: #ffae00; }
#languageRootGuide   .orangebg .links-list a:hover { color: #e69e01; }

#languageRootGuide .bluebg svg { fill: #37abe6; }
#languageRootGuide   .bluebg.selected .podheader, #languageRootGuide   .bluebg.selected:hover .podheader { background: #4eb4e8; }
#languageRootGuide .bluebg .links-list { border: .25rem solid #4eb4e8; }
#languageRootGuide .bluebg:hover .podheader { background: #4eb4e8; }
#languageRootGuide   .bluebg .links-list a:after { color: #37abe6; }
#languageRootGuide   .bluebg .links-list a:hover { color: #4eb4e8; }

#languageRootGuide .greenbg svg { fill: #8ab52d; }
#languageRootGuide   .greenbg.selected .podheader, #languageRootGuide   .greenbg.selected:hover .podheader { background: #9dcf34;  } 
#languageRootGuide .greenbg .links-list { border: .25rem solid #9dcf34; }
#languageRootGuide .greenbg:hover .podheader { background: #8ab52d;  }
#languageRootGuide   .greenbg .links-list a:after { color: #9dcf34; }
#languageRootGuide   .greenbg .links-list a:hover { color: #8ab52d; }

#languageRootGuide .maingreybg svg { fill: #1986b5; }
#languageRootGuide .maingreybg.selected .podheader { background: #22a4dc; }
#languageRootGuide .maingreybg:hover .podheader { background: #22a4dc; }

#languageRootGuide .w1bg:hover .podheader { background: #37a8ac; }
#languageRootGuide .w1bg:active .podheader { background: #41c0c4; }
#languageRootGuide .w1bg .svg { font-weight: 400; }
#languageRootGuide .resources .w1bg:hover .podheader { background: #5691a3 !important; }
#languageRootGuide .resources .w1bg:active .podheader { background: #64a8bd; }
#languageRootGuide .w1bg.selected .podheader { background: #5691a3 !important; }
#languageRootGuide .selected .podheader .title { color: #fff; }
#languageRootGuide .selected .podheader .svg { color: #fff; }
#languageRootGuide .w1bg:hover .podheader svg { fill: #fff; }
#languageRootGuide .selected svg { fill: #fff; }
#languageRootGuide .w1bg.selected .podheader .title { color: #fff; }
#languageRootGuide   .w1bg .links-list a:after { color: #5691a3; font-size: 1.4rem; }
#languageRootGuide   .w1bg .links-list { border: 3px solid #5691a3; margin: 4px 2px 0; }
#languageRootGuide   .w1bg .links-list a:hover { color: #5691a3; }

#languageRootGuide .dropdown { float: none; height: inherit; width: 33.33333% !important; position: relative; display: inline-block !important; background: transparent !important; right: 0; top: 0; overflow: visible; }
#languageRootGuide .dropdown .sub_menu { position: absolute; top: auto; left: 0; }
#languageRootGuide .dropdown .sub_menu a { font-size: .8rem; padding: .37rem 1.35rem; }
#languageRootGuide .divider { color: #cacaca; margin: -10px 20px -5px 20px; margin: 1rem 0; width: 80%; }

#languageRootGuide .toplink { display: none !important; }

#languageRootGuide .thumb:last-child { border-right: 1px solid #e2e2e2 !important; }
#languageRootGuide .resources { padding: 0 0 2rem; }

#languageRootGuide .thumb:hover .podheader { z-index: 9; }
#languageRootGuide .selected .podheader, #languageRootGuide .selected .links-list { z-index: 10; }
#languageRootGuide.tile-selected .thumb:not(.selected):after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 4px; background: rgba(0,0,0,.3); z-index: 8; }

/* Resources
   ========================================================================== */
#languageRootGuide .list-table~.resources { text-align: left; padding: 0 5% .5rem; }
#languageRootGuide .list-table~.resources:before { border-top: 1px solid #dedede; padding: 5px 0 .5rem; color: #a6a6a6; content: 'Related items in:'; display: block; font-size: 10px; }
html[lang="ja"] #languageRootGuide .list-table~.resources:before { content: '関連する項目：'; }
html[lang="zh"] #languageRootGuide .list-table~.resources:before { content: '更多相关函数：';}

#languageRootGuide .related-in { background-size: 14px auto !important; background-position: left top; color: #828282; display: block !important; font-size: 12px !important; padding: 0 0 10px 18px !important; margin: 0; line-height: .7; }
#languageRootGuide .related-in .chevron-after:after { font-size: 16px; line-height: .7; position: relative; top: 1px; }
#languageRootGuide a.function { background-image: url('/language-assets/img/wolfram-function-repository.png'); background-repeat: no-repeat; }
#languageRootGuide a.data { background-image: url('/language-assets/img/wolfram-data-repository.png'); background-repeat: no-repeat; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
#languageRootGuide footer .inner { margin: 0 auto; padding: 0 12px; text-align: center; display: block; line-height: 1; }
#languageRootGuide .root-guide-footer-links { text-align: center; padding: 0 0 2rem !important; }
#languageRootGuide .root-guide-footer-links a { color: #646464; margin: 0 2rem; display: inline-block; vertical-align: middle; line-height: 2; }
#languageRootGuide .root-guide-footer-links a:hover { color: #a6a6a6; }


#languageRootGuide .root-guide-footer-links .pipe { color: #7d7d7d; display: inline-block; margin: 0 1rem; }
#languageRootGuide .root-guide-footer-links .dropdown { position: relative; vertical-align: middle; width: auto !important; }
#languageRootGuide .root-guide-footer-links .menu { background: transparent; border: 0; color: #646464; }
#languageRootGuide .root-guide-footer-links .dropdown .hover .menu { background: transparent; }
#languageRootGuide .root-guide-footer-links .menu:hover { color: #a6a6a6; }
#languageRootGuide .root-guide-footer-links .sub_menu { width: auto; top: -90px; }
#languageRootGuide .root-guide-footer-links .sub_menu a { display: block; line-height: 1.2; margin: 4px; }

/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */
@media (min-width: 601px) {
    #languageRootGuide .bluebg .links-list { bottom: 84px; }
    #languageRootGuide .bluebg:nth-of-type(5) .links-list { bottom: 90px; }
}
@media (max-width: 900px) {
    #languageRootGuide .inner { padding: 0; }
    #languageRootGuide .podheader-inner { height: 90px; }
    #languageRootGuide .links-list ul, .links-list .divider { width: 90%; }
    #languageRootGuide .podheader svg { width: 45px; }
    #languageRootGuide .podheader .svg { width: 65px; }
    #languageRootGuide .left .svg { color: #37a8ac; width: 30px; }
    #languageRootGuide .resources .svg { width: 40px; }
}
@media (max-width: 600px) {
    #languageRootGuide .header .right { display: none; }
    #languageRootGuide .thumb { width: 50% !important; }
    #languageRootGuide .sub-menu { left: 0; right: auto; }
    #languageRootGuide .selected { margin-bottom: -1px; }
    #languageRootGuide .podheader-inner { height: 70px; padding: 0 !important; }
    #languageRootGuide .podheader-inner .title { font-size: 1rem !important; font-weight: 600; }
    #languageRootGuide .podheader .svg { width: 45px; }
    #languageRootGuide .left .svg { color: #37a8ac; }
    #languageRootGuide .fast-intro:before { width: 17px; background-size: 17px 16px; }
    #languageRootGuide .elementary-intro:before { width: 17px; background-size: 13px 16px; }
    #languageRootGuide .quick-reference:before { width: 17px; background-size: 17px 16px; }
    #languageRootGuide .new-features:before { width: 17px; background-size: 12px 16px; }
    #languageRootGuide .language-products:before { width: 17px; background-size: 16px 16px; }
    #languageRootGuide .half, #languageRootGuide .third { min-width: 240px; padding: 0 1rem; margin: 0; width: 43%; }
    #languageRootGuide .links-list { padding: 2px 0; }
}
@media (max-width: 500px) {
    #languageRootGuide .left .svg { color: #37a8ac; width: 30px; }
    #languageRootGuide .podheader .title { font-size: 1.08rem; height: 30px; }
    #languageRootGuide .podheader-inner { padding: 1rem 0; }
    #languageRootGuide .root-guide-footer-links a { margin: 0 .5rem; }
}
@media (max-width: 320px) {
}

/* max-height media queries */
@media (max-height: 900px) {
    #languageRootGuide .podheader-inner { max-height: 80px; }
}
@media (max-height: 600px) {
    #languageRootGuide .podheader-inner { max-height: 70px; }
}
@media (max-height: 500px) {
    #languageRootGuide .podheader-inner { max-height: 61px; }
}

@media (max-width: 500px) and (max-height: 600px) {
    #languageRootGuide .icon1 .podheader-inner, 
    #languageRootGuide .icon2 .podheader-inner, 
    #languageRootGuide .icon5 .podheader-inner, 
    #languageRootGuide .icon6 .podheader-inner,
    #languageRootGuide .icon13 .podheader-inner, 
    #languageRootGuide .icon14 .podheader-inner,
    #languageRootGuide .icon17 .podheader-inner, 
    #languageRootGuide .icon18 .podheader-inner, 
    #languageRootGuide .icon19 .podheader-inner, 
    #languageRootGuide .icon20 .podheader-inner, 
    #languageRootGuide .icon21 .podheader-inner, 
    #languageRootGuide .icon22 .podheader-inner 
    { max-height: 80px !important; height: 80px !important; }
}
@media (max-width: 500px) and (max-height: 500px) {

}
@media (max-width: 320px) {
    #languageRootGuide h2 { margin: .625rem 0; text-align: left; padding: 0 2%; }
    #languageRootGuide .thumb { display: block; width: 100% !important; border: 0; border-bottom: 1px solid #e5e5e5; border-radius: 0; }
    #languageRootGuide .podheader-inner { height: 30px  !important; padding: 0; }
    #languageRootGuide .icon1 .podheader-inner, 
    #languageRootGuide .icon2 .podheader-inner, 
    #languageRootGuide .icon5 .podheader-inner, 
    #languageRootGuide .icon6 .podheader-inner,
    #languageRootGuide .icon11 .podheader-inner,
    #languageRootGuide .icon12 .podheader-inner,
    #languageRootGuide .icon13 .podheader-inner, 
    #languageRootGuide .icon14 .podheader-inner,
    #languageRootGuide .icon17 .podheader-inner, 
    #languageRootGuide .icon18 .podheader-inner, 
    #languageRootGuide .icon19 .podheader-inner, 
    #languageRootGuide .icon20 .podheader-inner, 
    #languageRootGuide .icon21 .podheader-inner, 
    #languageRootGuide .icon22 .podheader-inner 
    {  height: 30px !important; }
    #languageRootGuide .container.left .thumb .podheader-inner, #languageRootGuide .podheader-inner { height: 30px !important; }
    #languageRootGuide .podheader .title { font-size: 13px; padding: 0 2%; }
    #languageRootGuide .podheader .svg { width: 40px; }
    #languageRootGuide .podheader svg { width: 35px; }
    #languageRootGuide .resources .svg svg { width: 32px;  }
    #languageRootGuide .links-list { margin: 0; }
}