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

.node-type-style, .node-type-pattern {

#main-content-wrapper h4   {
        font-style:           $font-semibold;
        font-size:                        .9rem;
        line-height:              1rem;
        margin-bottom:        .5em;
}

#main-content-wrapper h5   {
        font-style:             $font-semibold;
        font-size:                      .88em;
        text-transform:         none;
        line-height:            .96rem;
        margin-bottom:      .5em;
}

/* ** ******  Color Pallette   ******* ** */
.color-palette-wrapper {
        font-size:      1em;
        color:                  #666666;
}

.color-palette-wrapper section.row {
        display:                block;
        margin:                 0.5em 0 2em 0;
}
.color-palette-item  {
       display:         inline-block;
       vertical-align:  top;
       padding:         .85em;
       height:          auto;
       width:           161.8px;
       margin:          10px 0 ;
       padding:                 0;
   }

.color-palette-item section:first-child {
       display:         block;
       vertical-align:  top;
       padding:         .8em;
       height:          60px;
       width:           161.8px;
       border:          rgba(222,222,222, 0.3) solid thin;
       margin:          10px 0 ;
       padding:                 0;
       background:      #EBEFF1;
       z-index:                 2;
   }

.color-palette-item section:first-child  p {
       text-align:      center;
       vertical-align:  middle;
       color:           #666666;
   }

.color-palette-item.dark section:first-child  p {
       color:                   white;
   }
   .color-palette-item .details   {
       display:         block;
       padding:         0 0 0 0.4em;
       width:           calc(300 / 330 * 100%);
       height:          auto;
       text-align:      left;
       height:          auto;
       margin:          0  0;
       vertical-align:  top;
   }
   .color-palette-item .details h3 {
       color:           #444444;
       font-size:               .95em;
       font-weight:     300;
       text-align:      left;
       margin:                  0.1em 0;
       padding:         0;
   }
   .color-palette-item .details li {
       list-style:              none;
       font-size:       .8em;
       text-indent:     .9em;
       list-style-position: outside;           
   }
   .color-palette-item .details p,
   .color-palette-item .details ul,
   .color-palette-item .details li {
           font-size:           .8rem;
       color:           #999999;
       font-weight:     100;
       line-height:     1rem;
       margin:          0;
       padding:         0;
   }

   .color-palette-wrapper.color-palette-hover .color-palette-item { position: relative; }
   .color-palette-wrapper.color-palette-hover .color-palette-item section { cursor: pointer; }
   .color-palette-wrapper.color-palette-hover .color-palette-item .details {
           opacity:     0;
           position:    absolute;
           overflow:    hidden;
           width:               80%;
           top:                 55%;
           left:                10%;
           height:              0;
           background-color:    white; /* Fallback if color not specified */
           transition:                  opacity 0.4s;
   }

   .color-palette-wrapper.color-palette-hover .color-palette-item:hover .details {
           opacity:     1;
           height:              auto;
           z-index:     9;
           padding:     0 0.3em 0.3em;
           border:      rgba(102,102,102, 0.5) thin solid;
   }
.clearfix {
        clear: both;
}

}