/* WolframU section shared styles.

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



/* ==========================================================================
   setup the environment
   ========================================================================== */
html { font-family: 'Source Sans Pro', Arial, sans-serif; }

main a { color: #172942; }

main a:focus,
main a:hover { color: #ff6c00; }



/* ==========================================================================
   header
   ========================================================================== */
#section-header {
    background: #172942;
    line-height: 0;
    text-align: center; 
    width: 100%;
}

#section-header h1 { padding: 2.6875rem 1rem; }
#section-header h1.subpages { padding: 2.0625rem 0; }

#section-header h1 span {
    display: block;
    position: absolute;
    text-indent: -999999999px;
}



/* ==========================================================================
   subpage nav
   ========================================================================== */
#section-header .page-padding { 
    position: relative; 
    z-index: 1;
}
a.section-topics {
    color: #fff;
    display: inline-block;
    font-size: 1rem; 
    line-height: 2rem;
    outline: none;
    text-transform: uppercase;
}
a.section-topics i.browse-icon {
    background: url(/wolfram-u/img/subpages/menu-icons3.png) no-repeat;
    background-position: -290px 0; /*276*/
    background-size: 430px 45px;
    display: inline-block;
    font-size: 0;
    height: 12px;
    line-height: 0;
    margin-left: 2px;
    min-width: 12px;
    overflow: hidden;
    width: 12px;
}
/*a.section-topics.active i.browse-icon { background-position: -288px 0; }*/
.section-topics-list {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    box-shadow: 0 0 4px rgba(0,0,0,0.1);
    box-sizing: border-box;
    display: none;
    padding: 10px;
    position: absolute;
    right: 1rem;
    top: 5.25rem;
    width: 250px;
}
.section-topics-list .no-icons {
    border-top: 1px solid #e5e5e5;
    margin: 6px -10px -5px;
    padding: 12px 10px 0;
    width: calc(100% + 20px) !important;
}
.section-topics-list a {
    color: #535353;
    display: block;
    font-size: 0.8125rem;
    line-height: 1rem;
    margin-bottom: 4px;
    padding: 4px 7px;
}
.section-topics-list a:hover {
    background: #e5e5e5;
    border-radius: 3px;
    color: #535353;
}
i.topic-icon {
    background: url(/wolfram-u/img/subpages/menu-icons3.png) no-repeat;
    background-size: 430px 45px; 
    display: inline-block;
    font-size: 0;
    height: 20px;
    line-height: 0;
    margin: 4px 6px 0 0; 
    min-width: 20px;
    overflow: hidden;
    width: 20px;
}
.data-science .topic-icon { background-position: 0px 0; }
.machine-learning .topic-icon { background-position: -20px 0; }
.modeling-simulation .topic-icon { background-position: -40px 0; }
.visualization .topic-icon { background-position: -60px 0; }
.programming-applications .topic-icon { background-position: -80px 0; }
.finance .topic-icon { background-position: -100px 0; }
.image-signal-processing .topic-icon { background-position: -120px 0; }
.mathematics .topic-icon { background-position: -140px 0; }
.wolfram-language .topic-icon { background-position: -160px 0; }
.product-training .topic-icon { background-position: -200px 0; }
.content-authoring .topic-icon { background-position: -200px 0; }
.classroom-resources .topic-icon { background-position: -220px 0; }
.product-training-mathematica .topic-icon { background-position: -240px 0; }
.product-training-systemmodeler .topic-icon { background-position: -260px 0; }
.product-training-finance .topic-icon { background-position: -100px 0; }
.livecoding .topic-icon { background-position: -302px 0px; }
.computational-thinking .topic-icon{ background-position: -323px 0; }
.wolfram-certificate .topic-icon{ background-position: -345px 0; }



/* ==========================================================================
   custom training footer
   ========================================================================== */
.page-padding#custom-training-footer section {
    border-top: 1px solid #b3b3b3;
    padding-top: 3.2rem;
    padding-bottom: 4.5rem;
}
#custom-training-footer {
    background-color: #ffffff;
}

#custom-training-footer a {
    display: inline-block;
    font-size: 1.0625rem;
    text-align: left;
}
#custom-training-footer div.chevron-after{
    vertical-align: top;
    padding-top: 0.375rem;
}

#custom-training-footer a:focus,
#custom-training-footer a:hover { color: #ff6c00; }

#custom-training-footer img { margin-right: 0.8125rem; }



/* ==========================================================================
   shared section standards
   ========================================================================== */

/* page wrappers
   ========================================================================== */
.page-width {
    margin: 0 auto;
    max-width: 900px;
    width: 100%;
}

.page-padding { padding: 0 1rem; }


/* headings
   ========================================================================== */
.heading {
    color: #ff6c00;
    font-size: 1.69rem; /*2.8125rem*/
    font-weight: 600;
    line-height: 1.15;
    margin-bottom: .5rem;
}

.subheading {
    color: #535353;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.2;
    margin-bottom: 1rem;
    text-transform: uppercase;
}


/* summary
   ========================================================================== */
#summary p { line-height: 1.5; margin: 0 0 1rem; }
#summary a,
#about a { color: #ff6c00; }
#summary a:hover,
#about a:hover { color: #ff8933; }


/* buttons
   ========================================================================== */
.button {
    background: #5bb2a6;
    border-radius: .25rem;
    color: #fff;
    display: inline-block;
    padding: .5rem 1.5rem;
}

.button:focus,
.button:hover { background: #ff6c00; }

button.button {
    border: 0;
    padding: .3rem 2rem;
    font-size: .8rem;
}

#begin span.button {
    padding: .65rem 1.25rem;
    font-size: 1.2rem;
}
#begin a:hover img {
    box-shadow: 0 0 0 2px #ff6c00;
} 


/* tables
   ========================================================================== */
.styled-table {
    border-collapse: separate;
    border: 1px solid #ddd;
    margin-bottom: 3rem;
    width: 100%;
}

.styled-table th {
    border-bottom: 4px solid #5bb2a6;
    color: #535353;
    padding: .5rem .7rem;
    text-align: left;
    vertical-align: middle;
}

.styled-table td {
    background: #fff;
    color: #767676;
    font-size: .9rem;
    padding: .5rem .7rem;
    position: relative;
    vertical-align: middle;
    width: 15%;
}

.styled-table tr:not(:last-of-type) td { border-bottom: 1px solid #ddd; }

.styled-table tr td:not(:last-of-type) { border-right: 1px solid #ddd; }

.styled-table td:nth-child(1) {
    background: #eef7f6;
    color: #535353;
    font-size: 1rem;
    font-weight: 600;
    width: 35%;
}

.styled-table td:nth-child(2) { width: 20%; }

.styled-table .button {
    font-size: .8rem;
    padding: .3rem .5rem;
    text-align: center;
    width: 100%;
}

.styled-table .button:focus,
.styled-table .button:hover { color: #fff; }


/* tooltips
   ================================== */
.time-tooltip,.styled-table .info-tooltip {
    display: block;
    height: 15px;
    line-height: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.time-tooltip{
    width: 15px;
}
.info-tooltip {
    position: relative;
    text-align: left;
}
img.info-tooltip-icon {
    cursor: pointer;
    margin-left: 5px;
    vertical-align: text-top;
}
.time-tooltip-content,.styled-table .info-tooltip-content{
    background: #fff;
    border-radius: .5rem;
    border: 1px solid #ddd;
    box-shadow: 0 0 6px #ddd;
    display: none;
    font-size: .875rem;
    font-weight: 400;
    left: 15px;
    line-height: 1.2;
    padding: .75rem 1rem;
    position: absolute;
    top: 15px;
    width: 12rem;
    z-index: 9999998;
}
.info-tooltip-content {
    float: left;
    position: absolute;
    top: 13px;
    left: -45px;
    background: #fff;
    border-radius: .5rem;
    border: 1px solid #ddd;
    box-shadow: 0 0 6px #ddd;
    display: none;
    font-size: .875rem;
    font-weight: 400;
    left: 15px;
    line-height: 1.2;
    padding: .75rem 1rem;
    top: 15px;
    width: 12rem;
    z-index: 9999998;
}
.time-tooltip-content *,
.info-tooltip-content * { z-index: 9999999; }

.time-tooltip-content > span:nth-of-type(1) {
    color: #656565;
    display: inline-block;
    font-weight: 600;
    margin-bottom: .75rem;
}

.time-tooltip-content > span:nth-of-type(2),
.time-tooltip-content > span:nth-of-type(4) {
    color: #656565;
    display: inline-block;
    font-weight: 600;
    margin-bottom: .5rem;
    width: 2.5rem;
}

.time-tooltip-content > span:nth-of-type(3),
.time-tooltip-content > span:nth-of-type(5) {
    color: #656565;
    margin-bottom: .5rem;
}

.time-tooltip-content > span:nth-of-type(6) {
    display: block;
    font-size: .7rem;
}

.time-tooltip-content > span:nth-of-type(6) > span {
    display: inline-block;
    margin-top: .5rem;
}

.info-tooltip-content a {
    color: #ff6c00;
    display: inline-block;
}

.info-tooltip-content a:focus,
.info-tooltip-content a:hover { color: #000; }

.info-tooltip-content br + span a { margin-top: .5rem; }




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

/* styles for large screens (1200px)
   ========================================================================== */
@media all and (max-width: 1200px) {}


/* styles for medium screens (900px)
   ========================================================================== */
@media all and (max-width: 900px) {
    a.section-topics { 
        margin-right: 10px; 
    }
	a.section-topics i.browse-icon {
        position: relative;
        top: 1px;
    }
	.section-topics-list {
        border-radius: 0;
        border-width: 0 0 1px;
        right: 0;
        top: 100%;
        width: 100%;
    }
    .section-topics-list a {
        font-size: 1rem;
    }
}


/* styles for small screens (600px)
   ========================================================================== */
@media all and (max-width: 600px) {
    #section-header h1.subpages { padding: 1.125rem 0; }
    #section-header h1.subpages img { width: 183px; }
    a.section-topics { margin-right: 7px; }
    .section-topics-list a { font-size: 1.07692rem; line-height: 1.14286; }
    #custom-training-footer a { font-size: 1rem; }
}


/* styles for minimum supported screen width (320px)
   ========================================================================== */
@media all and (max-width: 320px) {
    #section-header h1.subpages img { width: 137px; }
    .section-topics-list ul.has-icons, 
    .section-topics-list ul.no-icons li {
        width: 100% !important;
    }
}


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