/* Language section shared styles.

   developer:   marionm
   requires:    nothing
   ========================================================================== */

/* ==========================================================================
   utility styles (remove after global framework is in place)
   ========================================================================== */

html {
    font-size: 16px; /* set 'base' font size */
    min-height: 100%; /* set viewport height as the minimum page height */
    line-height: 100%; /* scale line height to the 'base' font size */
    min-width: 1000px;
    width: 100%; /* set viewport width as the minimum page width */
}

*,
*:after,
*:before {
    -moz-box-sizing: border-box; /* use better box model */
    -webkit-box-sizing: border-box; /* ^ */
    box-sizing: border-box; /* ^ */
    margin: 0;
    padding: 0;
}

body,
.language body { /* override colorbox's body { font-size: 0; } style */
    -moz-text-size-adjust: 100%; /* preserve font size on orientation change */
    -ms-text-size-adjust: 100%; /* ^ */
    -webkit-text-size-adjust: 100%; /* ^ */
    background: #fff;
    color: #535353;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    font-size: 100%; /* scale text to the base font size */
    font-weight: 400; /* better than 'normal' for Google fonts */
    min-height: 100%; /* set viewport height as the minimum page height */
    line-height: 1.5; /* scale line height to any font size */
    text-align: left;
    white-space: normal;
    width: 100%; /* set viewport width as the minimum page width */
    word-wrap: break-word; /* prevent long words from extending beyond the boundaries of their elements */
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.p,
h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-weight: 400; /* better than 'normal' for Google fonts */
    line-height: 1.5; /* scale line height to any font size */
    margin: 0; /* override normalize */
    padding: 0; /* ^ */
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 { line-height: 1.3; /* scale line height to any font size */ }

.b,
.strong,
b,
strong { font-weight: 600; /* better than 'bold' for Google fonts */ }

.em,
.i,
em,
i { font-style: italic; /* better than 'oblique' for Google fonts */ }

img { border: none; /* remove border from images inside anchor tags in IE */ }

.a,
a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* remove highlight triggered on tap on some mobile devices */
    -webkit-tap-highlight-color: transparent; /* ^ */
    background: transparent; /* remove gray background from active links in IE 10 */
    cursor: pointer;
    outline: 0;
    text-decoration: none;
}

caption,
col,
colgroup,
table,
tbody,
td,
tfoot,
thead,
tr {
    border-collapse: collapse; /* remove spacing between table cells */
    border-spacing: 0; /* ^ */
}

video { -webkit-transform-style: preserve-3d; /* attempt to preserve z-index on videos */ }

/* block and inline-block grids
   ========================================================================== */

.grid,
.grid-auto,
.grid-inline {
    display: block;
    position: relative; /* provide a relative starting position for absolute positioned rows */
    width: 100%;
}

.grid .row:after,
.grid .row:before,
.grid-auto > *:after,
.grid-auto > *:before,
.grid-inline > *:after,
.grid-inline > *:before {
    content: '';
    display: table;
}

.grid .row:after,
.grid-auto > *:after,
.grid-inline > *:after { clear: both; }

.grid .row,
.grid-auto > *,
.grid-inline > * {
    display: block;
    position: relative; /* provide a relative starting position for absolute positioned columns */
    width: 100%;
    zoom: 1;
}

.grid .column,
.grid-auto > * > * {
    display: block;
    float: left;
    height: 100%;
    min-height: 1px;
    position: relative; /* provide a relative starting position for absolute positioned content */
    vertical-align: top;
}

.grid-inline > * > * {
    display: inline-block;
    height: 100%;
    min-height: 1px;
    position: relative; /* provide a relative starting position for absolute positioned content */
    vertical-align: middle;
}

/* table grids
   ========================================================================== */

.table,
.heirs-table > *,
.table > *,
.heirs-table > * > *,
.table > * > *,
.heirs-table > * > * > * {
    border-collapse: collapse; /* remove excess spacing around table elements */
    border-spacing: 0; /* ^ */
}

.table,
.heirs-table > * {
    display: table;
    width: 100%;
}

.table > *,
.heirs-table > * > *,
.table-row > *,
.heirs-table-row > * > * {
    display: table-row;
    width: 100%;
}

.table > * > *,
.heirs-table > * > * > *,
.table-col > * > *,
.heirs-table-col > * > * > * {
    display: table-cell;
    vertical-align: middle;
}

/* mini grids
   ========================================================================== */

.mini,
.heirs-mini > *,
.mini-b,
.heirs-mini-b > *,
.mini-m,
.heirs-mini-m > *,
.mini-t,
.heirs-mini-t > * {
    display: block;
    page-break-inside: avoid;
    width: 100%;
}

.mini > *,
.heirs-mini > * > *,
.mini-b > *,
.heirs-mini-b > * > *,
.mini-m > *,
.heirs-mini-m > * > *,
.mini-t > *,
.heirs-mini-t > * > * {
    display: table-cell;
    vertical-align: top;
}

.mini-b > *,
.heirs-mini-b > * > * { vertical-align: bottom; }

.mini-m > *,
.heirs-mini-m > * > * { vertical-align: middle; }

.mini-t > *,
.heirs-mini-t > * > * { vertical-align: top; }

.mini-collapse > *,
.heirs-mini-collapse > * > * {
    display: block;
    width: 100%;
}

/* grid column widths
   ================================== */

.width-25per,
.heirs-width-25per > * { width: 25%; }
.width-33_333per,
.heirs-width-33_333per > * { width: 33.333%; }
.width-50per,
.heirs-width-50per > * { width: 50%; }

/* positioning
   ========================================================================== */

.clear-both { clear: both !important; }
.clear-left { clear: left !important; }
.clear-right { clear: right !important; }

.float-left { float: left !important; }
.float-none { float: none !important; }
.float-right { float: right !important; }

/* cues & pointers
   ========================================================================== */

.cue { margin-left: 4px; }
.cue-right { margin-right: 4px; }

.arrow-after-each-child > *:after,
.arrow-between-each-child > *:after,
.arrow-after:after,
.bar-after-each-child > *:after,
.bar-between-each-child > *:after,
.bar-after:after,
.bullet-after-each-child > *:after,
.bullet-between-each-child > *:after,
.bullet-after:after,
.chevron-after-each-child > *:after,
.chevron-between-each-child > *:after,
.chevron-after:after,
.square-after-each-child > *:after,
.square-between-each-child > *:after,
.square-after:after {
    display: inline;
    margin-left: 4px;
}

.arrow-before-each-child > *:before,
.arrow-before:before,
.bar-before-each-child > *:before,
.bar-before:before,
.bullet-before-each-child > *:before,
.bullet-before:before,
.chevron-before-each-child > *:before,
.chevron-before:before,
.square-before-each-child > *:before,
.square-before:before {
    display: inline;
    margin-right: 4px;
}

.arrow-after-each-child > *:after,
.arrow-after:after,
.arrow-between-each-child > *:after { content: '›'; }

.arrow-before-each-child > *:before,
.arrow-before:before { content: '‹'; }

.bar-after-each-child > *:after,
.bar-after:after,
.bar-before-each-child > *:before,
.bar-before:before,
.bar-between-each-child > *:after { content: '|'; }

.bullet-after-each-child > *:after,
.bullet-after:after,
.bullet-before-each-child > *:before,
.bullet-before:before,
.bullet-between-each-child > *:after {
    content: '•';
    font-family: Arial;
}

.chevron-after-each-child > *:after,
.chevron-after:after,
.chevron-between-each-child > *:after { content: '»'; }

.chevron-before-each-child > *:before,
.chevron-before:before { content: '«'; }

.square-after-each-child > *:after,
.square-after:after,
.square-before-each-child > *:before,
.square-before:before,
.square-between-each-child > *:after {
    content: '■';
    font-family: Arial;
}

.arrow-between-each-child > *:last-child:after,
.bar-between-each-child > *:last-child:after,
.square-between-each-child > *:last-child:after,
.chevron-between-each-child > *:last-child:after,
.square-between-each-child > *:last-child:after {
    content: '';
    margin: 0;
}

/* ==========================================================================
   shared section styles
   ========================================================================== */

a { color: #f77700; }

a:hover,
a:active { color: #dd1100; }

.language .a *,
.language a * { color: inherit; }

.main,
main {
    margin: 0 auto;
    padding: 40px 0 100px 0;
    width: 960px;
}

.page-width {
    margin: 0 auto;
    width: 960px;
}

.page-padding { padding: 40px 0 100px 0; }

/* language section header
   ========================================================================== */

#language-header {
    background: #424242;
    background: -moz-linear-gradient(top, #424242 0%, #151515 100%);
    background: -ms-linear-gradient(top, #424242 0%, #151515 100%);
    background: -o-linear-gradient(top, #424242 0%, #151515 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #151515));
    background: -webkit-linear-gradient(top, #424242 0%, #151515 100%);
    background: linear-gradient(to bottom, #424242 0%, #151515 100%);
}

#language-header h1 {
    margin: 0 auto;
    width: 960px;
}

#language-header h1 a {
    background: url('/National_Library/20160517234414oe_/https://www.wolfram.com/language/img/wolfram-language-logo.png') no-repeat left center;
    color: #fff;
    display: inline-block;
    font-size: 48px;
    height: 148px;
    line-height: 148px;
    padding: 0 0 0 106px;
}

#language-header h1 span {
    color: #707070;
    font-size: 11px;
    position: relative;
    top: -10px;
    vertical-align: middle;
}

#language-header nav { background: #dd1100; }

#language-header nav > ul {
    list-style: none;
    margin: 0 auto;
    width: 960px;
}

#language-header nav > ul > li {
    display: inline-block;
    font-size: 16px;
    list-style: none;
    position: relative;
}

#language-header nav > ul > li > ul {
    background: #910000;
    display: none;
    list-style: none;
    position: absolute;
    width: 200px;
    z-index: 9999999;
}

#language-header nav > ul > li > a {
    color: #fff;
    display: block;
    padding: 10px 23px;
}

#language-header nav > ul > li > a:active,
#language-header nav > ul > li > a:hover,
#language-header nav > ul > li > a.active,
.language.home #language-header nav > ul > li > a.home,
.language.principles #language-header nav > ul > li > a.principles,
.language.uses #language-header nav > ul > li > a.uses,
.language.new-in-11 #language-header nav > ul > li > a.new-in-11,
.language.features #language-header nav > ul > li > a.new-in-11,
.language.for-experts #language-header nav > ul > li > a.resources,
.language.faq #language-header nav > ul > li > a.resources,
.language.ecosystem #language-header nav > ul > li > a.resources { background-color: #ac0000; }

#language-header nav > ul > li > a.resources,
#language-header nav > ul > li > a.resources:hover,
#language-header nav > ul > li > a.resources:active,
#language-header nav > ul > li > a.resources.active {
    background: url(/National_Library/20160517234414oe_/https://www.wolfram.com/language/img/icon-white-down.png) no-repeat 100px 20px;
    background-size: 10px 7px;
    cursor: pointer;
    padding-right: 41px;
}

#language-header nav > ul > li > a.resources:hover,
#language-header nav > ul > li > a.resources:active,
#language-header nav > ul > li > a.resources.active { background-color: #ac0000; }

#language-header nav > ul > li > ul > li > a {
    border-bottom: 1px solid #9f3633;
    color: #fff;
    display: block;
    font-size: 14px;
    line-height: 1.2;
    padding: 10px 13px;
}

#language-header nav > ul > li > ul > li:last-of-type > a {
    border-bottom: none;
}

#language-header nav > ul > li > ul > li > a:hover,
#language-header nav > ul > li > ul > li > a:active {
    background: #b80900;
}

#language-header nav > ul > li > .divide {
    background: #ac0000;
    height: 26px;
    left: -1px;
    position: absolute;
    top: 9px;
    width: 1px;
}

#language-header nav > ul > li:hover > .divide { left: 1px; }

#language-header #back {
    display: none;
    margin: 0 auto;
    position: relative;
    width: 960px;
}

.each-feature #language-header #back,
.each-example #language-header #back { display: block; }

#language-header #back a {
    bottom: -55px;
    color: #535353;
    font-size: 17px;
    position: absolute;
}

#language-header #back a:hover,
#language-header #back a:before { color: #dd1100; }

/* layout
   ========================================================================== */

.hr,
hr {
    border: none;
    border-top: 1px solid #ddd;
    display: block;
    margin: 40px 0;
}

.row,
.grid-auto > * { margin: 0 0 40px 0; }

.row:last-of-type,
.grid-auto > *:last-child { margin: 0; }

.column.width-50per:first-child,
.grid-auto > * > *.width-50per:first-child { padding: 0 30px 0 0; }

.column.width-50per:last-child,
.grid-auto > * > *.width-50per:last-child { padding: 0 0 0 30px; }

/* headings & text
   ========================================================================== */

.h2,
h2 {
    color: #dd1100;
    font-size: 40px;
    font-weight: 400;
    margin-bottom: 30px;
}

.h3,
h3 {
    color: #535353;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 30px;
}

.h4,
h4 {
    color: #dd1100;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 2px;
}

.tm {
    color: #707070 !important;
    font-size: 60% !important;
    position: relative !important;
    top: -.5em !important;
}

/* lists
   ========================================================================== */

.styled-list {
    display: inline-block;
    font-size: 0;
    list-style: none;
    position: relative;
}

.styled-list > * {
    display: block;
    font-size: 16px;
    line-height: 1.3;
    list-style: none;
    margin-bottom: 8px;
    padding-left: 12px;
}

.styled-list > *:last-child { padding-bottom: 0; }

.styled-list > *:before {
    color: #dd1100;
    content: '■';
    display: inline-block;
    font-family: Arial;
    font-size: 9px;
    left: 0;
    line-height: 18px;
    position: absolute;
}