/* STYLES FOR REFERENCE DOCS ROOT GUIDE PAGE

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

body#languageRootGuide { background: #4b4b4b; }
#languageRootGuide .header { background: #4b4b4b; }
#languageRootGuide .header .inner { padding: 3rem 1rem 2rem; }
#languageRootGuide .main { margin: 0 0px 2rem; background: #4b4b4b; padding: 0 0 .5rem; overflow: hidden; }
#languageRootGuide .main .inner { overflow: visible; }
#languageRootGuide .container { text-align: center; font-size: 0; position: relative; clear: both; padding: 0; border: 0; }
#languageRootGuide .container .inner { padding: 0; max-width: 930px; }
#languageRootGuide .container:after { content: ''; display: block; clear: both; }
#languageRootGuide .container.left { text-align: left; }
#languageRootGuide section { margin: 0; }
#languageRootGuide .header .right { margin-top: 1.5%; }
#languageRootGuide .header .heading1 { color: #fff; font-size: 2.5rem; }
#languageRootGuide .header .heading2 { color: #888; font-size: 2.5rem; }
#languageRootGuide .header .right a.language-home { color: #bbb; opacity: .7; font-weight: 400; }
#languageRootGuide .header .right a.language-home:before { background-position: left bottom; }
#languageRootGuide .header .right a.language-home:hover { color: #bbb; opacity: 1; }

#languageRootGuide h2 { font-size: .875rem; color: #898989; margin: 2rem auto .625rem; font-weight: 300; text-transform: uppercase; max-width: 954px; padding: 0 12px; }

#languageRootGuide .thumb { text-align: left; display: inline-block; border-left: 1px solid #4b4b4b; border-top: 1px solid #4b4b4b; width: 33.33333%; cursor: pointer; vertical-align: top; }

#languageRootGuide .podheader { width: 100%; height: 93px; display: table; table-layout: fixed; position: relative; vertical-align: middle; overflow: hidden; }
#languageRootGuide .podheader:after { content: ''; width: 72px; display: table-cell; background-repeat: no-repeat; background-size: 66px 45px; vertical-align: middle; background-position: left center; opacity: .35; }
#languageRootGuide .podheader:before { content: ''; width: auto; display: table-cell; }
#languageRootGuide .selected .podheader:after, #languageRootGuide .thumb:hover .podheader:after { opacity: 1; }
#languageRootGuide   .podheader .title { display: table-cell; vertical-align: middle; color: #fff; line-height: 1.3; padding: 0 7%; width: 100%; font-size: 1.12rem; }
#languageRootGuide .podheader.icon23 .title { padding: 0 0 0 7%; }
#languageRootGuide  .selected .podheader .title, #languageRootGuide  .thumb:hover .podheader .title  { color: #fff; }

#languageRootGuide .container.left .thumb { box-shadow: inset 0px 2px 0px 0px rgba(255,255,255,.2); }
#languageRootGuide .container.left .thumb .podheader { height: 50px; }
#languageRootGuide .container.left .podheader .title { font-weight: 300; font-size: 1rem; }
#languageRootGuide .container.left .podheader:after { display: none; }

#languageRootGuide .links-list { background: #fff; position: relative; z-index: 9999; cursor: default; text-align: center; display: none; position: absolute; left: 1px; right: 0; padding: 1.5rem 0 2rem; }
#languageRootGuide .combine-together { display: inline-block; }
#languageRootGuide   .links-list ul { list-style-type: none; margin: 0; padding: 0; text-align: left; }
#languageRootGuide     .links-list ul li { background: none; padding: 0px; padding: 0 0 0 1rem; position: relative; }
#languageRootGuide .links-list a { font-size: 1.04rem; padding: .3em 0; color: #666; line-height: 1.2; font-weight: 600; display: block; }
#languageRootGuide   .links-list a:before { content: '\00bb'; display: inline-block; margin: 0 3px 0 0; font-size: 1.4rem; left: 0; top: .01rem; position: absolute; }
#languageRootGuide .selected .links-list ul { border-top: 1px solid #dedede; margin: .5rem 0 0; padding: .5rem 0 0; }
#languageRootGuide .links-list ul:first-child { border-top: 0; margin: 0; padding: 0; }

#languageRootGuide .icon1:after { background-image: url('/language-assets/img/icon_corelang2x.png'); }
#languageRootGuide .icon4:after { background-image: url('/language-assets/img/icon_symbolic2x.png'); }
#languageRootGuide .icon3:after { background-image: url('/language-assets/img/icon_visualization2x.png'); }
#languageRootGuide .icon2:after { background-image: url('/language-assets/img/icon_data2x.png'); }
#languageRootGuide .icon5:after { background-image: url('/language-assets/img/icon_strings2x.png'); }
#languageRootGuide .icon6:after { background-image: url('/language-assets/img/icon_graphs2x.png'); }
#languageRootGuide .icon7:after { background-image: url('/language-assets/img/icon_images2x.png'); }
#languageRootGuide .icon8:after { background-image: url('/language-assets/img/icon_geometry2x.png'); }
#languageRootGuide .icon9:after { background-image: url('/language-assets/img/icon_sound2x.png'); }
#languageRootGuide .icon10:after { background-image: url('/language-assets/img/icon_time2x.png'); }
#languageRootGuide .icon11:after { background-image: url('/language-assets/img/icon_geographic2x.png'); }
#languageRootGuide .icon12:after { background-image: url('/language-assets/img/icon_scientific2x.png'); }
#languageRootGuide .icon13:after { background-image: url('/language-assets/img/icon_eng2x.png'); }
#languageRootGuide .icon14:after { background-image: url('/language-assets/img/icon_finance2x.png'); }
#languageRootGuide .icon15:after { background-image: url('/language-assets/img/icon_social2x.png'); }
#languageRootGuide .icon16:after { background-image: url('/language-assets/img/icon_highermath2x.png'); }
#languageRootGuide .icon17:after { background-image: url('/language-assets/img/icon_documents2x.png'); }
#languageRootGuide .icon18:after { background-image: url('/language-assets/img/icon_ui2x.png'); }
#languageRootGuide .icon19:after { background-image: url('/language-assets/img/icon_system2x.png'); }
#languageRootGuide .icon20:after { background-image: url('/language-assets/img/icon_external2x.png'); }
#languageRootGuide .icon21:after { background-image: url('/language-assets/img/icon_cloud2x.png'); }
#languageRootGuide .icon22:after { background-image: url('/language-assets/img/icon_machine2x.png'); }
#languageRootGuide .icon23:after { background-image: url('/language-assets/img/icon_knowledge2x.png'); }
#languageRootGuide .icon24:after { background-image: url('/language-assets/img/icon_new2x.png'); }

#languageRootGuide .redbg { background: #ed6600; }
#languageRootGuide   .redbg.selected { background: #ff812e !important; }
#languageRootGuide .redbg:hover { background: #ff6501; }
#languageRootGuide   .redbg .links-list a:before { color: #ed6600; }
#languageRootGuide   .redbg .links-list a:hover { color: #ed6600; }

#languageRootGuide .orangebg { background: #e79e00; }
#languageRootGuide   .orangebg.selected { background: #ffa824 !important; }
#languageRootGuide .orangebg:hover { background: #f5ac0f; }
#languageRootGuide   .orangebg .links-list a:before { color: #e79e00; }
#languageRootGuide   .orangebg .links-list a:hover { color: #e79e00; }

#languageRootGuide .bluebg { background: #3f989f; }
#languageRootGuide   .bluebg.selected { background: #76BACF !important; }
#languageRootGuide .bluebg:hover { background: #41abb2; }
#languageRootGuide   .bluebg .links-list a:before { color: #31989f; }
#languageRootGuide   .bluebg .links-list a:hover { color: #31989f; }

#languageRootGuide .greenbg { background: #8ab52d; }
#languageRootGuide   .greenbg.selected { background: #abc54d !important; }
#languageRootGuide .greenbg:hover { background: #99c735; }
#languageRootGuide   .greenbg .links-list a:before { color: #8ab52d; }
#languageRootGuide   .greenbg .links-list a:hover { color: #8ab52d; }

#languageRootGuide .tealbg { background: rgba(67, 190, 155, .9); }
#languageRootGuide   .tealbg.selected { background: #55d4b0 !important; }
#languageRootGuide .tealbg:hover { background: rgba(67, 190, 155, 1); }
#languageRootGuide   .tealbg .links-list a:before { color: #43be9b; }
#languageRootGuide   .tealbg .links-list a:hover { color: #43be9b; }

#languageRootGuide .maingreybg { background: #45848d; }
#languageRootGuide .maingreybg.selected { background: #679b8a; }
#languageRootGuide .maingreybg:hover { background: #4b9ca7; }

#languageRootGuide .w1bg { background: rgba(255,255,255,.3); }
#languageRootGuide .w1bg:hover { background: rgba(255,255,255,.45); }

#languageRootGuide .w2bg { background: rgba(255,255,255,.2); }
#languageRootGuide .w2bg:hover { background: rgba(255,255,255,.35); }

#languageRootGuide .w3bg { background: rgba(255,255,255,.12); }
#languageRootGuide .w3bg:hover { background: rgba(255,255,255,.25); }

#languageRootGuide .w4bg { background: rgba(255,255,255,.09); }
#languageRootGuide .w4bg:hover { background: rgba(255,255,255,.15); }


#languageRootGuide .divider { color: #6f6f6f; margin: -10px 20px -5px 20px; margin: 1rem 0; width: 80%; }

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

#languageRootGuide .half { width: 28%; display: inline-block; vertical-align: top; margin: 0 8% 0 0; }
#languageRootGuide .half:last-child, .third:last-child { margin: 0; }
#languageRootGuide .third { width: 27.5%; display: inline-block; vertical-align: top; margin: 0; min-width: 180px; margin: 0 1%; }
#languageRootGuide .combine-together .third { width: 46%; }
#languageRootGuide .combine-together .third:first-of-type { margin: 0 3% 0 1%; }
#languageRootGuide .combine-together { width: 60%; }
#languageRootGuide .third + .combine-together .third:first-of-type { margin: 0 1% 0 4%; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
#languageRootGuide .footer-links { margin: 2rem 2% 4rem; text-align: center; }
#languageRootGuide .footer-links .inner { background: transparent; color: #888; border: 0; margin: 0 auto; padding: 2%; text-align: center; display: block; line-height: 1; display: inline-block; }
#languageRootGuide .footer-links a { color: #bbb; }
#languageRootGuide .footer-links .footer-main-links { padding: 0 0 1rem; margin: 0 0 1rem; border-bottom: 1px solid #6f6f6f; }
#languageRootGuide .footer-links .footer-main-links a { color: #f5f5f5; }
#languageRootGuide .fast-intro:before { width: 22px; background-size: 22px 20px; background-image: url('/language-assets/img/fast-intro-white2x.png'); }
#languageRootGuide .elementary-intro:before { width: 22px; background-size: 17px 20px; background-image: url('/language-assets/img/elementary-intro-white2x.png'); }

#languageRootGuide .new-features:before { background-image: url('../img/language-products2x.png'); }

/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */
@media (max-width: 900px) {
    #languageRootGuide .links-list a { font-size: 1.07rem; }
    #languageRootGuide .inner { padding: 0; }
    #languageRootGuide .header .inner { padding: 2rem 2% 1.5rem; }
    #languageRootGuide .header .heading1, #languageRootGuide .header .heading2 { font-size: 2.08rem; }
    #languageRootGuide .half { width: 43%; margin: 0 4% 0 0; }
    #languageRootGuide .podheader { height: 90px; }
    #languageRootGuide .podheader .title { font-size: 1.07rem; }
    #languageRootGuide .links-list { box-shadow: none; }
    #languageRootGuide .links-list ul, .links-list .divider { width: 90%; }
    #languageRootGuide .combine-together { width: 66%; }
}
@media (max-width: 600px) {
    #languageRootGuide .main .header span.heading1 { text-transform: none; }
    #languageRootGuide .header .right { display: none; }
    #languageRootGuide .thumb { width: 50%; }
    #languageRootGuide .third { width: 43%; margin: 0; }
    #languageRootGuide .selected { margin-bottom: -1px; }
    #languageRootGuide .footer-link a { font-size: .75rem; }
    #languageRootGuide .links-list ul { width: 100%; }
    #languageRootGuide .links-list ul.no-border { border-top: 0; margin: 0; padding: 0; }
    #languageRootGuide .footer-links { font-size: 0; }
    #languageRootGuide .podheader { height: 84px; }
    #languageRootGuide .podheader .title { font-size: 1.1rem; }
    #languageRootGuide .podheader:after { background-size: 53px 36px; width: 60px; }
    #languageRootGuide .half, #languageRootGuide .third { min-width: 240px; padding: 0 1rem; margin: 0; width: 43%; }
    #languageRootGuide .combine-together { min-width: 240px; width: 43%; }
    #languageRootGuide .combine-together .third { width: 100%; }
    #languageRootGuide .combine-together .third:last-of-type ul { border-top: 1px solid #dedede; padding: .5rem 0 0; margin: .5rem 0 0; }
    #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 12px; }
    #languageRootGuide .language-products:before { width: 17px; background-size: 16px 16px; }
}
@media (max-width: 500px) {
    #languageRootGuide .links-list ul:first-child { border-top: 1px solid #dedede; }
    #languageRootGuide .podheader:after { background-size: 40px 27px; width: 46px; }
    #languageRootGuide .half, #languageRootGuide .third { width:100%; padding: 0 1rem; border-top: 0 !important; margin: 0 !important; }
    #languageRootGuide .combine-together { width: 100%; padding: 0 !important; }
    #languageRootGuide .links-list ul:first-child { margin: 1rem 0 0; padding: 1rem 0 0; }
    #languageRootGuide .links-list div:first-child > ul:first-child { border-top: 0; margin: 0; padding: 0; }
    #languageRootGuide .links-list ul:first-child { border-top: 1px solid #dedede; }
}
@media (max-width: 320px) {
}