/* notebooks landing page styles.

   developer:   rmiske
   requires:    /common/framework/css/framework.en.css
   ========================================================================== */



/* ==========================================================================
   setup the environment
   ========================================================================== */
html {
    font-family: 'Source Sans Pro', Arial, sans-serif;
}
body {
    color: #656565;
}
p {
    font-weight: 400;
    line-height: 1.875rem;
    margin: 0.3125rem 0 1rem;;
}
noscript p {
    line-height: 1;
    margin: initial;
}
.blue {
    color: #008bad !important;
}
.chevron {
    color: #f57300;
}



/* ==========================================================================
   sections
   ========================================================================== */
header#hero,
section,
#cta {
    border-top: 1px solid #b7b7b7;
    padding: 1.25rem 0 2.25rem;
    width: 100%;
}
div[id$="-content"], .features-intro {
    margin: 0 auto;
    max-width: 56rem/*(960px)*/;
    width: 100%;
    text-align: left;
}
div[id$="-content"] h2 {
    font-weight: 300;
    font-size: 2.1875rem;
    line-height: 1.5;
    margin-bottom: 0.3125rem;
}
div[id$="-content"] img,
div[id$="-content"] iframe {
    max-width: 100%;
}



/* ==========================================================================
   hero
   ========================================================================== */
header#hero {
    background: #FFFFFF;
    background: linear-gradient(to top, #ffffff 0%,#ffffff 130px,#ececec 130px,#ececec 130px,#ffffff 100%);
    border: none;
    padding: 0;
}
a.link-tab {
    background: #008bad;
    color: #fff;
    float: left;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.5;
    padding: 5px 20px 5px 20px;
    text-transform: uppercase;
}
a.link-tab:hover {
    background: #1284a9;
}
#hero h1 {
    color: #000;
    font-size: 44px;
    font-weight: 500;
    letter-spacing: normal;
    margin-top: 3rem;
    white-space: nowrap;
}
#hero .tagline {
    color: #656565;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.9;
    margin: 0;
    padding-bottom: 1.25rem;
}
#hero-pic {
    text-align: center;
}



/* ==========================================================================
   intro
   ========================================================================== */
section#intro {
    border: none;
    padding-top: 2rem;
}
#intro p:first-child {
    font-weight: 300;
    font-size: 1.625rem;
    line-height: 2.8125rem;
    margin: 0;
}



/* ==========================================================================
   resources
   ========================================================================== */
#resources h3 {
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.9375rem;
    margin: 2.1875rem 0 0 0;
}
#resources h3 a {
    color: #ed7200;
}
#resources h3 a:hover {
    color: #f49e2f;
}
#resources div.grid {
    margin-left: -4%;
    width: 105%;
}
#resources div.grid div {
    margin-left: 4%;
    width: 46% !important;
}
#resources div.grid div p:last-child {
    margin-bottom: 0;
}



/* ==========================================================================
   notebooks:shared
   ========================================================================== */
#how-notebooks-work-content, 
#features-content {
    max-width: 100%;
    text-align: center;
}
.feature-container {
    display: inline-flex; 
    margin-top: 1rem;
    max-width: 100%;
    width: 1200px;
}
.feature-left-col {
    order: 1; 
    width: 15%; /*180px*/
}
.feature-left-col div {
    text-align: right;
    width: 100%;
    z-index: 5;
}
.feature-main-img {
    order: 2;
    padding: 0 2.08333333333%; /*25px*/
    width: 70%; /*840px*/
}
.feature-main-img .notebook-img { 
    border-radius: 6px 6px 0 0;
    box-shadow: 0px 0px 1rem 0px rgba(0, 0, 0, 0.2);
    margin-top: 9px; 
}
.feature-right-col {
    order: 3; 
    width: 15%; /*180px*/
}
.feature-right-col div {
    text-align: left;
    width: 100%;
}
.feature-left-col div img,
.feature-right-col div img {
    margin-top: 0.75rem;
}
.feature-left-col div img + h3,
.feature-right-col div img + h3 {
    margin-top: 0.5rem;
}
.feature-container h3 {
    font-size: 0.875rem;
    font-weight: 600;
}
.feature-container div.pod {
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 0.625rem;
    padding: 0.5rem 0.625rem 0.625rem;
    position: absolute;
    width: 116.666666667%; /*210px*/
}
.feature-left-col div.pod { 
    right: -8.33333333333%; /*15px*/
}
.feature-right-col div.pod { 
    left: -8.33333333333%; /*15px*/
}
div.pod p {
    color: #333;
    font-size: 0.75rem;
    line-height: 1.3;
    margin: 0;
}
div.pod hr {
    background: #e5e5e5;
    border: 0;
    height: 1px;
    margin: 0.5rem 0;
}
div.pod img {
    margin: 0;
}
div.pod p + img {
    margin-top: 0.625rem;
}
.feature-main-img .pointer {
    z-index: 2;
}
.feature-main-img .pointer.left {
    left: 1.07142857143%; /*9px*/
}
.feature-main-img .pointer.right {
    right: 1.07142857143%; /*9px*/
}
.wl-functions {
    font-variant: small-caps;
}



/* ==========================================================================
   how notebooks work
   ========================================================================== */
#how-input {
    top: 3.80228136882%; /*40px*/
}
#pointer-how-input {
    top: 4.56273764259%; /*48px*/
    width: 4.7619047619%; /*40px*/
}

#how-output {
    top: 6.65399239544%; /*70px*/
}
#pointer-how-output {
    top: 7.4144486692%; /*78px*/
    height: 6.08365019011%; /*64px*/
    width: 4.16666666667%; /*35px*/
}
    #pointer-how-output .callOut-bot {
        width: 42.8571428571%; /*15px*/
    }
    #pointer-how-output .callOut-mid {
        width: 57.1428571429%; /*20px*/
        right: 57.1428571429%; /*20px*/
    }
    #pointer-how-output .callOut-top {
        width: 57.1428571429%; /*20px*/
    }

#how-shift-enter {
    padding-bottom: 0.375rem;
    top: 15.6844106464%; /*165px*/
    width: 97.2222222222%; /*175px*/
}
#how-shift-enter p + img {
    margin-top: 0.5rem;
}

#how-recent-output {
    top: 28.9923954373%; /*305px*/
}
#pointer-how-recent-output {
    top: 25.1901140684%; /*265px*/
    height: 4.84790874525%; /*51px*/
    width: 31.4285714286%; /*264px*/
}

#how-interactive {
    top: 72.9087452471%; /*767px*/
}
#pointer-how-interactive {
    top: 73.6692015209%; /*775px*/
    width: 11.6666666667%; /*98px*/
}

#how-cells {
    top: 3.99239543726%; /*42px*/
}
#pointer-how-cells {
    top: 5.51330798479%; /*58px*/
    width: 3.09523809524%; /*26px*/
}

#how-computable-entities {
    top: 22.8136882129%; /*240px*/
}
#pointer-how-computable-entities {
    top: 31.2737642586%; /*329px*/
    width: 48.8095238095%; /*410px*/
}

#how-translate {
    top: 51.0456273764%; /*537px*/
}
#pointer-how-translate {
    top: 52.566539924%; /*553px*/
    width: 69.6428571429%; /*585px*/
}



/* ==========================================================================
   features of notebooks
   ========================================================================== */
#feat-cell-opener {
    top: 3.3969716919%; /*129px*/
}
#pointer-feat-cell-opener {
    top: 3.81830151415%; /*145px*/
    width: 3.92857142857%; /*33px*/
}

#feat-text {
    top: 6.76761026991%; /*257px*/
}
#pointer-feat-text {
    top: 6.97827518104%; /*265px*/
    width: 8.33333333333%; /*70px*/
}

#feat-graphics {
    top: 10.9019091508%; /*414px*/
}
#pointer-feat-graphics {
    top: 11.323238973%; /*430px*/
    width: 8.33333333333%; /*70px*/
}

#feat-edit-code {
    top: 19.7708360764%; /*747px*/
}
#pointer-feat-edit-code {
    top: 20.211658986%; /*763px*/
    width: 4.7619047619%; /*40px*/
}

#feat-data-import {
    top: 38.551678736%; /*1464px*/
}
#pointer-feat-data-import {
    top: 38.9730085583%; /*1480px*/
    width: 8.33333333333%; /*70px*/
}

#feat-visualizations {
    top: 66.4647794602%; /*2524px*/
}
#pointer-feat-visualizations {
    top: 66.8861092824%; /*2540px*/
    width: 8.33333333333%; /*70px*/
}

#feat-special-char {
    top: 81.2166556945%; /*3088px*/
}
#pointer-feat-special-char {
    top: 81.6379855168%; /*3104px*/
    width: 4.40476190476%; /*37px*/
}

#feat-cells-within-cells-interlinked {
    top: 3.29163923634%; /*125px*/
}
#pointer-feat-cells-within-cells-interlinked {
    top: 3.71296905859%; /*141px*/
    width: 3.92857142857%; /*33px*/
}

#feat-closed-cell {
    top: 7.82093482554%; /*297px*/
}
#pointer-feat-closed-cell {
    top: 8.24226464779%; /*313px*/
    width: 4.7619047619%; /*40px*/
}

#feat-annotations {
    top: 19.1651744569%; /*724px*/
}
#pointer-feat-annotations {
    top: 19.416839368%; /*732px*/
    width: 55.3571428571%; /*465px*/
}

#feat-knowledge {
    top: 31.1150757077%; /*1174px*/
}
#pointer-feat-knowledge {
    top: 31.5600724161%; /*1189px*/
    width: 16.9047619048%; /*142px*/
}

#feat-maps {
    top: 49.0585911784%; /*1863px*/
}
#pointer-feat-maps {
    top: 49.5062541145%; /*1880px*/
    width: 40.7142857143%; /*342px*/
}

#feat-math-typesetting {
    top: 77.5246872943%; /*2944px*/
}
#pointer-feat-math-typesetting {
    top: 77.9460171165%; /*2960px*/
    width: 59.1666666667%; /*497px*/
}

#feat-manipulation {
    top: 88.8479262673%; /*3374px*/
}
#pointer-feat-manipulation {
    top: 89.2692560895%; /*3390px*/
    width: 37.1428571429%; /*312px*/
}



/* ==========================================================================
   CTA Sticky
   ========================================================================== */
#cta {
    background:#ed7200; 
    border: none;
    color: #fff; 
    padding-bottom: 1.25rem;
    transition: background .2s ease;
    position: fixed;
    bottom: 0; 
    z-index: 5; 
}
#cta h2 {
    margin-bottom: 0;
    text-align: center;
}
#cta a {
    color: #fff !important;
}
#cta:hover {
    background: #f49e2f;
}



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

/* styles for large screens (1200px)
   ========================================================================== */
@media all and (max-width: 1200px) {
    .feature-container { 
        width: 1000px; 
        max-width: 95%
    }
    .feature-left-col,
    .feature-right-col {
        width: 16%; /*160px*/
    }
    .feature-main-img { 
        width: 68%; /*680px*/
    }
    .feature-container div.pod {
        /*background: none;
        border: none;
        border-radius: 0;
        padding: 0;
        padding: 0.25rem;*/
        width: 190px !important; 
    }
    /*.feature-left-col div.pod { 
        right: 0;
        text-align: right !important;
    }
    .feature-right-col div.pod {
        left: 0;
        text-align: left !important;
    }*/
    div.pod img {
        max-width: 80%;
    }
    /*div.pod br {
        display: none;
    }*/
    #how-shift-enter {
        top: 14.8844106464%;
    }
    #how-recent-output {
        top: 29.9676806084%;
    }
    #pointer-how-recent-output {
        top: 25.3098859316%; 
    }
}


/* another exception (1023px)
   ========================================================================== */
@media all and (max-width: 1023px) {
    .feature-container {
        max-width: 1000px;
    }
}


/* styles for medium screens (900px)
   ========================================================================== */
@media all and (max-width: 900px) {
    div[id$="-content"], 
    .features-intro,
    .feature-container {
        padding: 0 1.5rem;
    }
    #how-notebooks-work-content,
    #features-content {
        padding: 0;
    }
    header#hero {
        background: linear-gradient(to top, #ffffff 0%,#ffffff 118px,#ececec 118px,#ececec 118px,#ffffff 100%);
    }
}


/* styles for small screens (600px)
   ========================================================================== */
@media all and (max-width: 600px) {
    header#hero {
        background: linear-gradient(to top, #ffffff 0%,#ffffff 75px,#ececec 75px,#ececec 75px,#ffffff 100%);
    }
    #resources div.grid {
        margin: 0;
        width: 100%;
    }
    #resources div.grid div {
        margin: 0;
        width: 100% !important;
    }
}


/* styles for minimum supported screen width (320px)
   ========================================================================== */
@media all and (max-width: 320px) {
    header#hero {
        background: linear-gradient(to top, #ffffff 0%,#ffffff 50px,#ececec 50px,#ececec 50px,#ffffff 100%);
    }
    /*#hero h1 {
        white-space:normal
    }*/
}


/* printer styles
   ========================================================================== */
@media print {}