/* Mathematica Products

   developer:   tajudeen
   requires:    framework.css.ja
   ========================================================================== */

/* ==========================================================================
   Common styles
   ========================================================================== */

#productglobal body, #productglobal p, #productglobal blockquote, #productglobal smaller, #productglobal textarea {
    font: 13px/19px Arial, Helvetica, sans-serif;
    color: #222222;
}

#productglobal blockquote .bigquote,
#productglobal blockquote .smalltext {
    text-align: right;
}

#productglobal blockquote {
    margin-left: 3rem;
}

#productglobal .pageWidth {
    margin: 0 auto;
    /*max-width: 57.8125rem;*/
    max-width: 68.0625rem;
}

#productglobal .doubleWidth.pageWidth {
    padding: 0.625rem 0rem 28px 1.25rem;
}

#productglobal h1.floated {
    margin-bottom: 1.25rem;
}

#productglobal p {
    margin-top: 0rem;
    color: #222;
    font: 13px/19px Arial, Helvetica, sans-serif;
}

#productglobal p.intro {
    color: #666;
    font: 16px/21px Arial, Helvetica, sans-serif;
    margin-top: 1.25rem;
}

#productglobal p.belowHeader {
    margin-top: 1.25rem;
}

#productglobal p span.red {
    color: #e00400;
    font-weight: bold;
}

#productglobal a, #productglobal object, #productglobal embed {
    outline: 0;
}

#productglobal a, #productglobal a:link {
    color: #e00400;
    outline: none;
}

#productglobal span.buttonRight a {
    color: #fff;
}

#productglobal a:visited {
    color: #e00400;
    outline: none;
}

#productglobal a:active, #productglobal a:hover, #productglobal a:link:hover, #productglobal a:visited:hover {
    color: #bb0000;
    outline: none;
}

#productglobal .buttonRight a {
    color: #fff !important;
}

#productglobal ul #productglobal li a, #productglobal ul li a:link {
    color: #666;
}

#productglobal ul li a:visited {
    color: #666;
}

#productglobal ul li a:active, #productglobal ul li a:hover, #productglobal ul li a:link:hover, #productglobal ul li a:visited:hover {
    color: #bb0000;
}

#productglobal ul li a.inline, #productglobal ul li a.inline:link {
    color: #e00400;
}

#productglobal ul li a.inline:visited {
    color: #e00400;
}

#productglobal ul li a.inline:active, #productglobal ul li a.inline:hover, #productglobal ul li a.inline:link:hover, #productglobal ul li a.inline:visited:hover {
    color: #bb0000;
}

#productglobal a.moreInfoLink, #productglobal a.moreInfoLink:link, #productglobal a.moreInfoLink:visited {
    color: #000;
}

#productglobal a.moreInfoLink:active, #productglobal a.moreInfoLink:hover, #productglobal a.moreInfoLink:link:hover, #productglobal a.moreInfoLink:visited:hover {
    color: #bb0000;
}

#productglobal h1 {
    font-family: Arial, Helvetica, sans-serif;
    color: #e00400;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 0;
    line-height: 27px;
}

#productglobal  h1 span {
    white-space: nowrap;
} 

#productglobal h1.small {
    font-size: 20px;
}

#productglobal .mono {
    font: 12px "Courier New", Courier, mono !important;
    font-weight: normal;
    white-space: pre-wrap; /* Preserve white spaces */
}

#productglobal h1.aboveHeader, #productglobal h1.belowHeader {
    color: #666;
    font-size: 18px;
    font-weight: normal;
    line-height: 21px;
}

#productglobal h1.aboveHeader {
    margin-bottom: 4px;
}

.aboveHeader.app {
    margin-bottom: 0.5rem !important;
}

/*#subpage #productglobal .content .app a:hover {
    color: unset;
}*/

#productglobal h1.belowHeader {
    margin-top: 4px;
}

#productglobal h1.aboveHeader div.return {
    font: 13px/19px Arial, Helvetica, sans-serif;
}

#productglobal h2 {
    color: #222;
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 0.5rem 0;
}

#productglobal h2 a, h2 a:link, #productglobal h2 a:visited {
    color: #222;
}

#productglobal h2 a:active, #productglobal h2 a:hover, #productglobal h2 a:link:hover, #productglobal h2 a:visited:hover {
    color: #bb0000;
}

#productglobal h3 {
    color: #222;
    font-size: 14px;
    font-weight: bold;
    margin: 2px 0 0 0;
}

#productglobal h3 a, #productglobal h3 a:link, #productglobal h3 a:visited {
    color: #222;
}

#productglobal h3 a:hover, #productglobal h3 a:visited:hover {
    color: #bb0000;
}

#productglobal h3.red {
    color: #e00400;
}

#productglobal h3.red a, #productglobal h3.red a:link, #productglobal h3.red a:visited {
    color: #e00400;
}

#productglobal h3.red a:hover, #productglobal h3.red a:visited:hover {
    color: #bb0000;
}

#productglobal h3.lightgray {
    font-size: 13px;
    color: #555;
    margin: 0;
}

#productglobal h3.lightgrayHover {
    font-size: 13px;
    color: #888;
    margin: 0;
}

#productglobal h3.black {
    font-size: 13px;
    color: #000;
    margin: 0;
}

#productglobal h5 {
    font: 11px / 15px Verdana, Geneva, Arial, sans-serif;
    font-weight: bold;
    margin-bottom: 0.2rem;
    margin-top: 1rem;
}

#subpage #productglobal .content.questions h5 {
     margin-top: 0rem; 
}

#subpage #productglobal .content.questions ul li {
    margin-bottom: 1rem;
}

#productglobal .details span {
    display: block !important;
}

#productglobal hr {
    margin: .5rem 0;
    border: 1px solid #ccc;
}

#productglobal .boldtitle {
    font-size: 12px;
    font-weight: bold;
    line-height: 16px;
    color: #333;
}

#productglobal .allCapSubHeader {
    font-size: 12px;
    color: #555;
}

#productglobal .captionText {
    font: 11px/14px Arial, Helvetica, sans-serif;
    color: #666;
}

#productglobal .clearingFloats {
    clear: both;
}

#productglobal .footerText {
    margin: 1.25rem 0 0 0.375rem;
}

#productglobal .headerSubText {
    font-size: 12px;
    color: #222;
    font-weight: bold;
    float: right;
}

#productglobal .paragraphTitle {
    margin: 1.25rem 0 0 0;
}

#productglobal .chevron, #productglobal .required {
    color: #e00400;
}

#productglobal .required {
    color: #e00400;
    padding-left: 2px;
}

#productglobal #more {
    color: #333333;
    font-weight: bold;
    font-size: 14px;
    margin-top: 1.25rem !important;
    margin-top: 0.625rem;
    margin-bottom: 0.5rem;
}

#productglobal .textRight {
    text-align: right;
    margin: 0.625rem 0 0.3125rem 0;
}

/* TOP NAV ON ALL PAGES */

#productglobal #topnav_wrap {
    position: relative;
    height: auto;
    margin: 3.375rem auto 3.375rem auto;
    display: flex;
    justify-content: space-between;
}

#productglobal #topnav_wrap img#M8logo {
    margin-left: 0.9375rem;
}

#productglobal #topnav_wrap table#topnav_buttons {
    position: absolute;
    top: 0;
    right: 0;
}

#productglobal #M8logo {
    margin: 0 0 0 0.9375rem;
}

#productglobal #topnav {
    width: 100%;
    overflow: hidden;
}

#productglobal #topnav table td img {
    margin: 0 0.3125rem 0 1.25rem;
}

#productglobal #topnav div {
    float: left;
    display: inline;
    font: 13px/30px Arial, Helvetica, sans-serif;
}

#productglobal #topnav div a, #productglobal #topnav div a:link {
    display: inline-block;
    height: 1.875rem;
    margin-left: 1.25rem;
    padding-right: 1.25rem;
    color: #5d5d5d;
}

#productglobal #topnav div a:visited {
    color: #5d5d5d;
}

#productglobal #topnav div a:hover, #productglobal #topnav div a:visited:hover {
    color: #bb0000;
}

/* ==========================================================================
   Home page
   ========================================================================== */

#productglobal #header h1 {
    font-size: 2.25rem;
    font-weight: 400;
    color: #dd1100;
    display: inline-block;
    font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', Arial, sans-serif;
    line-height: 1.2;
}

#subpage #productglobal .content .common a.button,
#productglobal a.button {
    float: right;
    background: #d10;
    border: 0; 
    color: #fff;
    padding: 0.6rem 1rem 0.5rem 1rem !important;
    border-radius: 0.5rem;
    cursor: pointer;
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    padding: .45rem 1rem .5rem;
    text-align: center;
    width: 7.625rem;
    height: 2.125rem;
}

#subpage #productglobal h1 {
    margin-bottom: 1rem;
}

#subpage #productglobal .content .common a.button {
    float: unset !important;
    margin-bottom: 1rem;
    color: #fff;
}

#subpage #productglobal .content .common a.button:hover,
#productglobal a.button:hover {
    background: #fe0000;
    color: #fff !important;
}

#subpage #productglobal .content .common .button,
#productglobal .button {
    background: #5bb2a6;
    border-radius: 0.25rem;
    color: #fff;
    display: inline-block;
    padding: 0.5rem 1.5rem;
}

#productglobal .header-inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-top: 1px solid #ccc;
    padding: 10px 0 0 0;
}

#productglobal #header {
    width: 100%;
}

#productglobal .doubleWidth {
    display: flex;
    gap: 1.875rem;
}

#productglobal .doubleWidth.pageWidth .leftcol img {
    margin-right: 0.625rem;
    border-radius: 0.5rem;
    outline: solid 2px #ebebeb;
    margin-right: 1.5rem;
    justify-content: space-between;
} 

#productglobal ._leftcol>div {
    margin-left: 0.5625rem;
}

#productglobal .app {
    /*max-width: 26.125rem;*/
    max-width: 33.125rem;
}

#productglobal .app:hover .largefont {
    color: #ff7700;
}

#productglobal .app:hover img {
    outline: 2px solid #ff7700 !important;
}

#productglobal .doubleWidth.pageWidth .col_one {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 3rem;
}

#productglobal .rightcol {
    max-width: 23.6875rem;
}

.doubleWidth.pageWidth .app {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 3.375rem;
    height: 86px;
}

#productglobal .aboveHeader, #productglobal .aboveHeader a {
    color: #222 !important;
    font-size: 1.08rem;
    font-weight: 500;
    font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', Arial, sans-serif;
    margin: 0 0 10px 0;
}

#productglobal .largefont {
    line-height: 1.09;
    font-size: 1.375rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 3px;
    color: #232323;
    font-family: 'Source Sans Pro', Arial, sans-serif;
}

#productglobal a.link, #productglobal a.link:link, #productglobal a.link:visited {
    color: #222222;
    outline: medium none;
    text-decoration: none;
}

#productglobal a.link:active, a.link:link:hover, #productglobal a.link:visited:hover, #productglobal table.app .leftcol:hover+.rightcol>a>span.largefont {
    color: #BB0000;
    text-decoration: none;
}

#productglobal .app .smallfont {
    font-size: 1.0125rem;
    line-height: 1.536 !important;
    color: #535353;
    font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', Arial, sans-serif;
}

#productglobal .topheader {
    margin: 0 auto;
}

#productglobal  #pageWrapper {
    overflow: hidden;
    padding: 0.625rem 0 0 1.25rem;
}

#productglobal .top-paragraph {
    display: inline;
}

#productglobal .top-paragraph img {
    float: right;
}

#productglobal .top-paragraph span {
    font: 11px / 15px Verdana, Geneva, Arial, sans-serif;
}


/* ==========================================================================
   Subpages common style
   ========================================================================== */

#productglobal .page-width {
    max-width: 49.0625rem;
    margin: 0 auto;
}

#productglobal .two-columns {
    display: flex;
    margin-top: 3.625rem;
    margin-bottom: 1rem;
    position: relative;
}

#productglobal .two-columns .content {
    flex: 1 1 33.4375rem;
    padding-top: 0.875rem;
}

#productglobal .two-columns .sidebar {
    flex: 0 0 13.125rem;
    padding-left: 1.125rem;
}

#subpage #productglobal.sub .content > h4 a,
#subpage #productglobal h1,
#subpage #productglobal h2 {
    padding: 0;
    margin: 0 0 1.25rem 0;
    font-size: 20px;
    font-weight: normal;
    color: #3054af;
    line-height: 110%;
}

#subpage #productglobal h3 {
    color: #333333;
    font-size: 0.875rem;
    font-weight: bold;
    padding-bottom: 0rem;
    margin-bottom: 12px;
    line-height: 1.25;
}

#subpage #productglobal.sub h3 {
    margin-bottom: 0px;
}

#subpage #productglobal .content ul li,
#subpage #productglobal .content p {
    font: 11px / 15px Verdana, Geneva, Arial, sans-serif;
}

#subpage #productglobal .content p {
    margin-bottom: 0.6875rem;
}

#subpage #productglobal .content ul li {
    margin-bottom: 6.5px;
    display: flex;
    align-items: flex-start;
}

#subpage #productglobal .content.contents h5 {
    margin-bottom: 0.5rem;
}

#subpage #productglobal .content ul ul {
    padding-bottom: 0;
}

#productglobal .two-columns p > img {
    float: left;
    margin: 0 0.5rem;
}

#subpage #productglobal ul.hr {
    border-top: 1px solid #ccc;
}

#subpage #productglobal ul:last-of-type li:first-of-type {
    margin-top: 0.5rem;
}

#subpage #productglobal #bestviewpoints_adj img {
    margin-bottom: 1rem;
}

#subpage #productglobal #bestviewpoints_adj h5 {
    margin-bottom: 0.5rem;
}

#subpage #productglobal .caps {
    text-transform: uppercase;
}

#subpage #productglobal .content h5 .chevron-after {
    color: #e00400;
}

#subpage #productglobal .bigquote {
    font: 16px / 22px Times New Roman, Times, serif;
    font-style: italic;
    font-weight: bold;
    color: #d77411;
    letter-spacing: .08em;
    text-indent: 30px;
}

#subpage #productglobal .content h5.dark a {
    color: #333333;
}

#subpage #productglobal .content h5.dark {
    margin-bottom: 1rem !important;
}

#subpage #productglobal ul.excel_link_examples li:first-of-type,
#subpage #productglobal ul.excel_link li:first-of-type {
    margin-top: 0 !important;
}

/*do not show on other pages not gallery, excel_link*/
#subpage #productglobal ul.excel_link,
#subpage #productglobal ul.excel_link_examples,
#subpage #productglobal ul.gallery {
    padding-bottom: 0 !important;
    display: none !important;
}

/*except on gallery, excel_link pages*/
#subpage #productglobal.excel_link ul.excel_link,
#subpage #productglobal.excel_link_examples ul.excel_link_examples,
#subpage #productglobal.gallery ul.gallery {
    display: block !important;
}

#subpage #productglobal ul.gallery li {
    margin-top: 0 !important;
    color: #ababaa;
}

#subpage #productglobal .smalltext {
    font-size: 10px;
}

#productglobal .two-columns .content hr {
    width: 30%;
}

#subpage #productglobal .sidebar h4 a,
#subpage #productglobal .sidebar h4 a:hover,
#subpage #productglobal .sidebar h4 a:visited {
    font: 10px / 12px Verdana, Geneva, Arial, sans-serif;
    text-decoration: none;
    color: #d86c00;
    font-weight: bold;
}

#subpage #productglobal .content a:hover {
    color: #e00400 !important;
}

#subpage #productglobal .content .app a:hover {
    color: unset !important;
}

#subpage #productglobal .content a {
    color: #0e3eb9;
}

#subpage #productglobal .sidebar h4 {
    margin-bottom: 0.5625rem;  
}

#subpage .imgs img {
    margin: 0.3rem 1rem 2rem 1rem;
}

#subpage #productglobal li.bulletflex {
    display: flex;
    flex-direction: column;
}

#subpage #productglobal .sidebar ul li a {
    color: #0e3eb9;
    font-size: 10px;
    font-weight: bold;
    line-height: 12px;
    text-decoration: none;
    display: inline-table;
}

#subpage #productglobal .sidebar ul li > ul li {
    padding-left: 1rem;
}

#subpage #productglobal ul {
    color: #222;
    line-height: 100%;
    padding: 0;
    padding-bottom: 0.375rem;
}

#productglobal .heirs-bullet-before > *:before,
#subpage #productglobal .sidebar ul li {
    font: 13px/16px Arial, Helvetica, sans-serif;
    padding-left: 0.2rem;
    vertical-align: middle;
}

#subpage #productglobal .content ul li {
    display: flex;
    align-items: flex-start;
}

#productglobal .heirs-bullet-before > *:before {
    color: #ababaa;
    font-size: 1rem;
}

#subpage .heirs-square-before > *:before {
    display: inline-block;
    width: 4px;
    height: 6px;
    line-height: 4px;
    color: #ababaa;
    font-size: 9px;
    vertical-align: middle;
}

#subpage #productglobal .sidebar ul li a:hover,
#subpage .heirs-square-before.heirs-red > *:before {
    color: #dd1100 !important;
}

#subpage #productglobal .sidebar ul li a:visited {
    color: #6080c2;
}

#subpage #productglobal .sidebar h4 span.m,
#subpage #productglobal svg.hamburger {
    display: none;
}

/* ==========================================================================
   Subpages of subpages common style
   ========================================================================== */

#subpage #productglobal .content h4 a,
#productglobal.sub .content li {
    font: 11px / 15px Verdana, Geneva, Arial, sans-serif;
}

#productglobal.sub .content li {
    margin-bottom: 7.5px;
/*    display: flex;*/
}

#productglobal.sub .two-columns .content {
    padding-top: 0rem; 
}

#subpage #productglobal h3 a {
    font: 11px / 15px Verdana, Geneva, Arial, sans-serif;
    font-weight: 600;
}

#productglobal .clear {
    clear: both;
}

#subpage #productglobal.sub .content > h4 a {
    font-size: 18px;
    line-height: 22px; 
}

#subpage #productglobal.sub .content > h4 {
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

#subpage #productglobal.sub .page-width {
    margin: 0 auto 30px auto;
}

#subpage #productglobal.sub .columns {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
}

#subpage #productglobal.sub .edascreens .columns {
    border-bottom: 1px double #ccc;
    padding-bottom: 1rem;
}

/*#subpage #productglobal.sub .edacontents ol > li,*/
#subpage #productglobal.sub ol > li {
    display: list-item;
    list-style: decimal;
    margin-left: 1rem;
}

#subpage #productglobal .linkagedesignercontent ol > li {
    list-style: none;
}

p.footer-wrapper img {
    vertical-align: top;
    margin-right: 0.2rem;
}

p.footer-wrapper {
    margin-top: 1rem;
}

#subpage #productglobal.sub .columns .desc > a {
    font: 11px / 15px Verdana, Geneva, Arial, sans-serif;
    color: #0e3eb9;
}

#subpage #productglobal.sub .columns .desc > a:hover {
    color: #d86c00;
}

#subpage #productglobal.sub .columns .desc > a:active,
#subpage #productglobal.sub .columns .desc > a:link:hover,
#subpage #productglobal.sub .columns .desc > a:visited:hover {
    color: #d86c00;
}

/*SCREENCAST - mechanicalexpression*/
#productglobal.sub .content.screencast .st_over {
    float: left;
    margin-left: 465px;
    margin-top: 5px;
    height: 32px;
    width: 63px;
}

/* Add responsive styles for the video */
#productglobal.sub .content.screencast #vid_holder1310 {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

#productglobal.sub .content.screencast #vimeo_vid1310 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

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

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

@media all and (max-width: 1200px) {
    /*    HOME*/
    #productglobal .doubleWidth.pageWidth {
        padding: 0.625rem 1.25rem 1.75rem 1.25rem;
    }
    #productglobal #topnav_wrap {
        padding: 0 1.25rem;
    }
    /*    SUB PAGES*/

}

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

@media all and (max-width: 900px) {
    /*    SUB PAGES*/
    #subpage #productglobal .page-width {
        padding: 0 1.25rem;
    }
    #productglobal .two-columns p > img {
        float: unset;
    }
    #subpage .imgs .clear {
        clear: left;
    }
    #subpage .imgs img {
        margin: 0.3rem 0rem 2rem 0rem;
    }
    #productglobal .doubleWidth.pageWidth .leftcol img {
        width: 70px;
        height: 70px;
        margin-right: .8rem;
    }
    #productglobal blockquote {
        margin-left: 0rem;
    }
    #productglobal.screencast .two-columns {
        flex-direction: column !important;
    }
    .doubleWidth.pageWidth .app {
        height: auto;
    }
    #productglobal #topnav_wrap {
        margin: 2.375rem auto 2.375rem auto;
    }
    #productglobal .app .smallfont {
        font-size: 1.08rem;
        line-height: 1.56 !important;
    }
    #productglobal .largefont {
        line-height: 1.18;
        font-size: 1.275rem;
    }
    #productglobal #topnav_wrap {
        padding: 0 0.625rem;
    }
    #productglobal .doubleWidth.pageWidth {
        padding: 0.625rem 0.625rem 1.75rem 0.625rem;
    }
}

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

@media all and (max-width: 600px) {
    #productglobal .two-columns, #productglobal .doubleWidth,
    #subpage #productglobal.sub .columns {
        flex-direction: column;
    }
    #productglobal .doubleWidth {
        gap: unset;
    }
    #productglobal ._leftcol>div {
        margin-left: 0rem;
    }
    #productglobal .rightcol, #productglobal .app {
        max-width: 100%;
    }
    #productglobal #topnav_wrap {
        flex-direction: column;
        gap: 0.625rem;
        margin: 2rem auto 0.625rem auto;
    }
    #productglobal .header-inner {
        flex-direction: column-reverse;
        align-items: flex-start;
    }
    #productglobal .header-inner h1 {
        margin-bottom: 1rem;
    }
    /*    SUBMENU MOBILE VIEW */
    #productglobal .two-columns .sidebar {
        padding-left: 0rem;
    }
    #subpage #productglobal ul.hr {
        max-width: 200px;
    }
    #productglobal .two-columns .content {
        flex: 1 1 100%;
    }
    #subpage #productglobal .columns.reverse {
        flex-direction: column-reverse !important;
    }    
    #productglobal .doubleWidth.pageWidth {
        padding: 1.25rem 1.25rem 1.75rem 1.25rem;
    }
    #productglobal .doubleWidth.pageWidth .col_one {
        grid-template-columns: 1fr;
    }
    #productglobal #pageWrapper {
        padding: 0.625rem 0 0 1.25rem;
    }
    #productglobal .largefont {
        line-height: 1.2;
        font-size: 1.5rem;
    }
    #productglobal .doubleWidth.pageWidth .leftcol img {
        width: 78px;
        height: 78px;
        margin-right: 1rem;
    }
}

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

@media all and (max-width: 320px) {}

/* GENERAL */

/* These styles are used in every section */

@media print {
    #productglobal #pageWrapper, #productglobal #pageWrapperUsesDropShadows {
        overflow: visible !important;
    }
    #productglobal #mainWrap {
        float: none !important;
    }
}