// Include the variables. @import “../../../partials/utility/variables/*”;

/* ***** GLOBAL for all nodes (not front) ***** */ .not-front ul.bullet li {

list-style: disc;
list-style-position: outside;

}

/*  *****  for SPECIFIC  nodes   *****  */

.node-type-page.not-front, .node-type-news-item.not-front, .node-type-pattern.not-front, .node-type-style.not-front, .node-type-component.not-front, .node-type-page.not-front, .node-type-blog.not-front, .page-blog.not-front, .page-blog1, .page-search, .page-search1 {

    #main-content-wrapper   {
            margin-left:        15em;
            max-width:          calc(98% - 15em);
            display:                        block;
            vertical-align:     top;
            padding:            0;
    }
aside.l-region--sidebar-first {                     // See the nav_index.scss file for main side bar styles
        position:                   relative;
            left:                           1%;
            width:              17%;
}

    #main-content-wrapper h4   {
            font-style:           $font-regular;
            font-size:                        1.1rem;
            line-height:              1.2rem;
            border-bottom:        $color-separator-line thin solid;
            margin-bottom:        0.5em;
    }

    #main-content-wrapper h5   {
            font-style:             $font-regular;
            font-size:                        1rem;
            line-height:              1.1rem;
            border-bottom:        $color-separator-line thin solid;
            margin-bottom:        0.5em;
    }

    .back2top-wrapper    {
            position:                       relative;
            right:                          0;
            top:                            -8em;
            font-size:                      0.75em;
            z-index:            3;
            background:             transparent;
            width:                          1px;
            height:                         1px;
            display:                        block;
    }

}

.front main-content-wrapper { // there is no sidebar on front page, don-t allocate it

padding:           0;

}

:not(.front) {

    #main-content-wrapper .flexbox   {
            display:       -webkit-flex;
            display:           -ms-flexbox;
            display:            -o-flex;
            display:               flex;
            -webkit-justify-content: space-between;
                -ms-justify-content: justify;
            justify-content:        space-between;
            -webkit-flex-wrap:      wrap;
            -ms-flex-wrap:          wrap;
                flex-wrap:          wrap;
            padding:                                0;

            height:                         auto;
            margin:                 1em auto;

            > div       {
                    text-align:     left;
                    padding:        0 1em 2em 0;
                    min-width:      14em;
                    margin:                 1em  1em  1em  0;
                    -webkit-flex:   1 1 0;
                    -ms-flex:   1 1 0;
                        flex:   1 1 0;
            }

            h4  {
                    font-size:              1.2rem;
                    line-height:    1.3rem;
                    font-family:    $font-light;
                    color:          $color-h4;
                    border-bottom:  1px solid #DDDDDD;
                    padding-bottom: 5px;
                    margin-bottom:  0.9em;
                    margin-top:     0;
            }

    }

.submitted  {
        color:              $color-submitted;
        font-style:         italic;
        font-size:                  smaller;
}

    .example-box {
            border:                         1px solid #e4e2e1;
            display:                        block;
            padding:                        24px;
            position:                       relative;
            margin-top:             24px;
            border-radius:          0 8px 0 0;

        &::before {
                content:            'Example';
                    font-weight:    700;
                    text-transform: uppercase;
                    font-size:              80%;
                    display:                inline-block;
                    background:     white;
                    padding:                0 6px;
                    position:               absolute;
                    top:                    -9px;
                    left:                   7px;
        }

        example-box-item {
                clear:              both;
                padding:            0    1em;
        }
    }
    .example-code {  // assumes that the prior '.example-box' is used in conjunction
        &::before {
                content:            'Code';
        }
    }
    .example-box-title {    // default to 'Rewriten' this connects with Javascript OnLoad to change titles dynamically
            &::before {
                    content:        'Rewritten';
                    content:        attr(data-title);

            }
    }

    /* pattern for grouping a set of boxes together in a fluid manner for responsive  */
    .cols-group  {
            width:                          100%;
            padding:                        0;
            margin:                         0;

            .cols,
            .cols-2,                                // cols-2 is  overriden below to allow 2 cols instead of 3
            .cols-3    {
                    display:                inline-block;
                    margin:         1%;
                    padding:                0.3em  1%  0.8em;
                    text-align:             left;
                    max-width:              28%;
                    min-width:              10em;
                    vertical-align: top;

                    h2   {
                            font-size:  1.9em;
                            margin:         0;
                            padding:    0;

                            a {
                                    color:                   inherit;
                                    text-decoration: none;
                            }
                    }

                    p   {
                            font-size:   1em;
                            line-height: 1.3em;
                    }

                    img   {
                            margin:  0;
                            padding: 0;
                    }
            }

            /*  Override to allow for 2 columns instead of 3   */
            .cols-2    {
                    max-width:              47%;
                    min-width:      40%;
            }

    }

    .list-block-group    {
            margin:                         1em 0 0 0;
            padding:                        0;
            display:                        block;

            section    {
                    margin:        1em 0;

                    div  {
                            display:        inline-block;
                            height:         100px;
                            width:          100px;
                            padding:        0.3em;
                    }

                    div:nth-child(1)  {
                            vertical-align: bottom;
                    }

                    div:nth-child(2)  {
                            width:          35em;
                            height:         100px;

                            h3 {
                                    margin:  0.7em 0 0 0;
                                    padding: 0;
                            }
                    }
            }
    }

}

article.card-group {

    display:       -webkit-flex;
    display:           -ms-flexbox;
    display:            -o-flex;
    display:               flex;
    -webkit-justify-content: flex-start;
        -ms-justify-content: start;
    justify-content:        flex-start;
    -webkit-flex-wrap:      wrap;
    -ms-flex-wrap:          wrap;
        flex-wrap:          wrap;
-webkit-align-items:        flex-start;
    -ms-align-items:        start;
        align-items:        flex-start;
    padding:                                0;

    height:                         auto;
    margin:                 1em auto;

    .card {
            text-align:     left;
            padding:        0 1em 2em 0;
            max-width:      15em;
            margin:                 0;
            -webkit-flex:   1 1 auto;
            -ms-flex:   1 1 auto;
                flex:   1 1 auto;

            /* background-color: #80c251; */
            //background-image: -webkit-linear-gradient(top, #80c251 0,  #80c251 34px, #fff 35px, #fff 100%);
            //background-image:    -moz-linear-gradient(top, #80c251 0,  #80c251 34px, #fff 35px, #fff 100%);
            //background-image:      -o-linear-gradient(top, #80c251 0,  #80c251 34px, #fff 35px, #fff 100%);
            //background-image:         linear-gradient(top, #80c251 0,  #80c251 34px, #fff 35px, #fff 100%);

            background-repeat: no-repeat;

            h2    {
                    border:                         none;
                    margin:                         0.2em  0  0.4em  0;
                    padding:            0;          
                    color:                  $color-link-active;
                    font-size:              1.33em;
                    padding:                        0;
                    border:                         none;
                    font-family:            $font-regular;

               a    {
                            color:                  inherit;
                    }
            }
            .card-body {
                    border:                 $color-card-border thin solid;
                    padding:                        0.2em 1em 1em 1em;
            }
            ul   {
                    padding-left:       0;
            }
            li   {
                    list-style:             none;
                    margin-left:        1em;
            }
    }

}

article.cell-group {

display:       -webkit-flex;
display:           -ms-flexbox;
display:            -o-flex;
display:               flex;
-webkit-justify-content:space-between;
    -ms-justify-content:justify;
justify-content:        space-between;
-webkit-flex-wrap:      wrap;
-ms-flex-wrap:          wrap;
    flex-wrap:          wrap;          
padding:                                0;

height:                         auto;
margin:                 1em auto;

.cell {
        text-align:     left;
        padding:        0 1% 1em 0;
        max-width:      16em;
        margin:                 0;
        -webkit-flex:   1 1 auto;
        -ms-flex:   1 1 auto;
            flex:   1 1 auto;

        /* background-color: #80c251; */
        //background-image: -webkit-linear-gradient(top, #80c251 0,  #80c251 34px, #fff 35px, #fff 100%);
        //background-image:    -moz-linear-gradient(top, #80c251 0,  #80c251 34px, #fff 35px, #fff 100%);
        //background-image:      -o-linear-gradient(top, #80c251 0,  #80c251 34px, #fff 35px, #fff 100%);
        //background-image:         linear-gradient(top, #80c251 0,  #80c251 34px, #fff 35px, #fff 100%);

        background-repeat: no-repeat;

        h2    {
                border:                         none;
                margin:                         0.2em  0  0.1em  0;
                padding:            0;          
                color:                  $color-link-active;
                font-size:              1.33em;
                padding:                        0;
                border:                         none;
                font-family:            $font-regular;

            a    {
                        color:                  inherit;
                }
        }

        h3    {
                margin:                         0.2em  0  0.3em  0;
                padding:            0;          
                font-size:              1.2em;
                font-weight:            100;
                line-height:            1.8em;
                padding:                        0;
                border:                         none;
                font-family:            $font-regular;

            a    {
                        color:                  inherit;
                }
        }

        .cell-body {
                border:                 none;
                padding:                        0.2em   1%   0.5em ;

                p  {
                        line-height:    1.3em;
                        margin-top:     0;
                }
        }
        ul   {
                padding-left:       0;
        }
        li   {
                list-style:             none;
                margin-left:        1em;
        }
}

}