/*  #STYLE-GUIDE SETTINGS
 *  -----------------------------------
 *  Styling that relate to the style guide ONLY.
 *  -----------------------------------
*/
/* This styles individual sections of the style guide */
.ss-section:not(:last-child) {
    padding-bottom: 4rem;
    border-bottom: 2px solid #ccc;
    margin-bottom: 4rem;
}

.ss-section p {
    font-size: .875rem;
}

.ss-code-live p {
    font-size: 0.75rem;
}

.ss-section > h1 {
    font-size: 1.5rem;
    font-weight: 700;
    background-color: #6C6F70;
    color: #fff;
    padding: 0 20px;
    line-height: 2.5rem;
    margin-bottom: 1rem;
}

.ss-section h2 {
    font-size: 1.25rem;
    font-weight: 700;
    border-left: 6px solid #f37f00;
    padding-left: 14px;
    background-color: rgba(243,127,0,0.1);
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
}

/* This styles code blocks used for examples. */
.ss-code code {
    display: block;
    padding: 1rem;
    max-height: 34.375rem;
    height: auto;
    overflow: auto;
    margin-bottom: 1.5rem;
}

/* This styles the example rows used in the grid documentation. */
.row.display {
    background: #eee;
    font-size: 11px;
    margin-bottom: 10px;
    line-height: 2rem;
    border: solid 1px #c6c6c6;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.row.display .columns:nth-child(even),.row.display .columns.small-centered,.row.display .columns.large-centered {
    background: #e1e1e1;
}

.row.display .columns.color-end {
    background: #d4d4d4;
}

#styleGuide {
    font-size: .875rem;
    line-height: 1.375rem;
}

#styleGuide h1,#styleGuide h2,#styleGuide h3,#styleGuide h4,#styleGuide h5,#styleGuide h6 {
    font-family: 'AutoZoneCond-Heavy',Helvetica Neue,Arial,sans-serif !important;
}

/*
#styleGuide hr {
    margin: 2.5rem 0;
}
*/

#styleGuide section.display {
    position: relative;
    margin-bottom: 30px;
    border: 1px solid #c4c4c4;
}

#styleGuide section.display:before,
#styleGuide section.display .sectionContent:before {
    position: absolute;
    top: -1px;
    left: -1px;
    border: 1px solid #c4c4c4;
    font-family: monospace;
    font-size: 1rem;
    line-height: 1.6;
    padding: .125rem .3125rem .0625rem;
}

#styleGuide section.display:before {
    content: 'section';
}

#styleGuide section.display .sectionContent {
    margin-top: 30px;
    position: relative;
    padding-top: 40px;
}

#styleGuide section.display .sectionContent:before {
    content: 'section-content';
    left: 15px;
}

#styleGuide .sectionHeader > h2 {
    font-size: .875rem;
    line-height: .875rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}

#styleGuide section.display .sectionHeader {
    margin-top: 40px;
}


#styleGuide .secondary-link {
    font-size: inherit;
}

#styleGuide code,#styleGuide pre code,#styleGuide .code-result {
    overflow-x: auto;
    background: #f9f9f9;
    font-size: inherit;
    line-height: inherit;
}

#styleGuide code.css,#styleGuide code.html,#styleGuide code.js,#styleGuide code.scss,#styleGuide .code-result {
    padding: 2rem 1rem 1rem;
    margin: 1.5rem 0;
    position: relative;
    display: block;
}

#styleGuide code.css:before,#styleGuide code.html:before,#styleGuide code.js:before,#styleGuide code.scss:before {
    color: #fff;
    width: 3.75rem;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    font-family: monospace;
    font-size: 1rem;
    font-weight: 700;
}

#styleGuide code.html:before {
    content: 'HTML';
    background-color: #F37F00;
}

#styleGuide code.css:before {
    content: 'CSS';
    background-color: rebeccapurple;
}

#styleGuide code.js:before {
    content: 'JS';
    background-color: #4278a0;
}

#styleGuide code.scss:before {
    content: 'SCSS';
    background-color: #c71585;
}

#styleGuide h1.code-live,#styleGuide h2.code-live,#styleGuide h3.code-live,#styleGuide h4.code-live,#styleGuide h5.code-live,#styleGuide h6.code-live {
    font-weight: 400;
    font-style: normal;
    color: #231f20;
    text-rendering: optimizeLegibility;
    margin-top: 0;
    margin-bottom: .5rem;
    line-height: 1.4;
    height: auto;
    padding: 0;
    border: none;
    background: none;
}

#styleGuide h1.code-live {
    font-size: 3rem;
    background: none;
    padding-left: 0;
}

#styleGuide h2.code-live {
    font-size: 2.5rem;
}

#styleGuide h3.code-live {
    font-size: 1.9375rem;
}

#styleGuide h4.code-live {
    font-size: 1.5625rem;
}

#styleGuide h5.code-live {
    font-size: 1.25rem;
}

#styleGuide h6.code-live {
    font-size: 1rem;
}

#styleGuide table {
    margin-top: 1.25rem;
    border: .0625rem solid #c4c4c4;
}

#styleGuide .ss-code-live table {
    margin-top: 0;
}

#styleGuide .ss-code-live table.scroll {
    white-space: nowrap;
}

#styleGuide table thead {
    background-color: #dedede;
    color: #231f20;
    border: none;
    border-bottom: .0625rem solid #c4c4c4;
}

    #styleGuide table thead.dark {
        background-color: #acaeaf;
        color: #fff;
        border: 1px solid #fff;
        border-color: #acaeaf;
    }

#styleGuide table thead tr th:not(:first-child):not(:last-child) {
    border-right: .0625rem solid #c4c4c4;
    border-left: .0625rem solid #c4c4c4;
}

    #styleGuide table thead.dark tr th:not(:first-child):not(:last-child) {
        border-right: 1px solid #fff;
        border-left: 1px solid #fff;
    }

#styleGuide table tfoot {
    background-color: #dedede;
    color: #231f20;
    border: none;
    border-top: .0625rem solid #c4c4c4;
}

#styleGuide table tbody {
    border: none;
}

#styleGuide table tbody tr {
    border: none;
}

#styleGuide table tbody tr td:not(:first-child):not(:last-child) {
    border-right: .0625rem solid #c4c4c4;
    border-left: .0625rem solid #c4c4c4;
}

#styleGuide table > tbody > tr > td {
    padding: .625rem 1.25rem;
    font-size: inherit;
}

#styleGuide table td.non-rectangular-cell-indentation {
    border-top: hidden;
    min-width: 2em;
    background-color: white;
}

#styleGuide .section {
    padding: 20px;
}

#styleGuide .section p {
    margin-bottom: 0;
    font-size: inherit;
    line-height: inherit;
}

#styleGuide .section a {
    color: #4278a0;
    text-decoration: underline;
    font-weight: 700;
}

#styleGuide .section .subHead {
    background: #c4c4c4;
    padding: 10px;
    margin-bottom: 20px;
    max-width: 75rem;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    float: left;
    padding-left: .625rem;
    padding-right: .625rem;
}

#styleGuide .section .subHead::before,#styleGuide .section .subHead::after {
    content: ' ';
    display: table;
    -webkit-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
}

#styleGuide .section .subHead::after {
    clear: both;
}

@media screen and (min-width: 40em) {
    #styleGuide .section .subHead {
        padding-left: .9375rem;
        padding-right: .9375rem;
    }
}

#styleGuide .section .subHead:last-child:not(:first-child) {
    float: right;
}

#styleGuide .section .subHead,#styleGuide .section .subHead:last-child {
    float: none;
}

#styleGuide .section .subHead > h3 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1rem;
    margin-bottom: 0;
}

#styleGuide .section .content-section {
    padding: 20px;
}

#styleGuide .section .content-section > h4 {
    font-size: .875rem;
    font-weight: 700;
    line-height: .875rem;
    margin-bottom: 1.25rem;
    color: #f37f00;
    text-decoration: underline;
}

#styleGuide .section .content-section hr {
    margin: 2.5rem 0;
}

#styleGuide .section .content-section .callout {
    margin-top: 1.25rem;
}

#styleGuide .color-block {
    padding: .625rem;
    border: .0625rem solid #c4c4c4;
    border-radius: .3125rem;
    text-align: center;
    margin: 2rem 0 0;
}

#styleGuide .color-block p {
    margin-bottom: .5rem;
}

#styleGuide .color-block > span {
    padding: 1.25rem 0;
    width: 100%;
    margin-bottom: 1rem;
    color: #fff;
    display: block;
    text-transform: uppercase;
    font-weight: 700;
}

#styleGuide .color-block.primary > span {
    background-color: #f37f00;
}

#styleGuide .color-block.warning > span {
    background-color: #f26100;
}

#styleGuide .color-block.alert > span {
    background-color: #d52b1e;
}

#styleGuide .color-block.success > span {
    background-color: #008300;
}

#styleGuide .color-block.warning > span {
    background-color: #f26100;
}

#styleGuide .color-block.blue > span {
    background-color: #4278a0;
}

#styleGuide .color-block.light-gray > span {
    background-color: #f1f1f1;
    color: #3a3c3d;
}

#styleGuide .color-block.medium-gray > span {
    background-color: #c4c4c4;
}

#styleGuide .color-block.dark-gray > span {
    background-color: #3a3c3d;
}

#styleGuide .color-block.black > span {
    background-color: #231f20;
}

#styleGuide [type='checkbox'] + label,#styleGuide [type='radio'] + label {
    margin-right: 1rem;
}

#styleGuide .input-group > .input-group-button > input.button {
    height: 40px;
    margin-bottom: 0;
}

#styleGuide [type="button"] + .button.info,#styleGuide button.button.info {
    background-color: #4278a0;
}

#styleGuide .az-element {
    width: 18.75rem;
    height: 12.5rem;
    padding: 0;
    background-color: #f8f8f8;
    border: .0625rem solid #c4c4c4;
}

#styleGuide .az-element .padding-display {
    height: 100%;
    border: 20px solid #C2F8FD;
    padding-top: 3.125rem;
}

/*
.ss-section:before,
.ss-code-live:before {
    display: block;
    content: " ";
    margin-top: -92px;
    height: 92px;
    visibility: hidden;
}
*/

.row.display .columns:nth-child(2),.row.display .columns.small-centered,.row.display .columns.large-centered {
    background: #e1e1e1;
}

#stickySidebar-wrap {
    height: 100% !important;
    padding-left: 0;
}

#stickySidebar-wrap #leftNav {
    width: 100%;
}

#stickySidebar-wrap #leftNav.is-stuck {
    margin-top: 1.875rem !important;
}

#leftNav ul {
    line-height: 2;
}

#leftNav ul li:last-of-type {
    margin-top: 0;
    line-height: 2;
}

#leftNav ul li > ul.nested {
    margin-left: 1rem;
    color: #6c6f70;
}

#leftNav ul li > ul.nested li,
#leftNav ul li > ul.nested li a {
    color: inherit;
    text-decoration: none;
}

#leftNav ul.vertical.menu > li > a {
    padding: 0.5rem 0;
}

#leftNav ul.vertical.menu li.is-submenu-item a strong {
    color: #3a3c3d;
}

#leftNav ul.nested li.is-submenu-item:last-child {
    margin-bottom: 1rem;
}

#styleGuide code.html span.tag {
    color: #4278a0;
}

#styleGuide code.html span.nested {
    margin-left: 20px;
}

#styleGuide code.html span.selector {
    color: #006400;
}

#styleGuide code.html span.calc {
    color: #ff8c00;
}

#styleGuide code.css span.selector,#styleGuide code.scss span.selector {
    color: rebeccapurple;
}

#styleGuide code.css span.attribute,#styleGuide code.scss span.attribute {
    margin-left: 1.25rem;
}

#styleGuide code.css span.attribute span.name,#styleGuide code.scss span.attribute span.name {
    color: #4278a0;
}

#styleGuide code.css span.attribute span.styled,#styleGuide code.scss span.attribute span.styled {
    color: #006400;
}

#styleGuide code.css span.attribute span.calc,#styleGuide code.scss span.attribute span.calc {
    color: #c71585;
}

#styleGuide .code-result p,#styleGuide .code-result ul,#styleGuide .code-result ol,#styleGuide .code-result .sectionHeader {
    margin-bottom: 0;
}

#styleGuide .code-result > .sectionHeader {
    margin-top: 1.25rem;
}

.ss-section p.help-text {
    margin-top: 1rem;
    font-size: .625rem;
    font-style: italic;
    color: #231f20;
}

#icon-set .azp {
    margin-right: 5px;
}