/* DO NOT COPY AND USE THIS */
/* THIS IS FOR THE STYLE GUIDE SETUP */

body {
    padding-top:70px;
    padding-bottom:30px;
}

.clearfix.gap-xl {
    height:48px;
}

.clearfix.gap-lg {
    height:36px;
}

.clearfix.gap-md {
    height:24px;
}

.clearfix.gap-sm {
    height:12px;
}

.clearfix.gap-xs {
    height:6px;
}

mark {
    cursor: pointer;
    outline:0 !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

pre {/*
    z-index: 9999;
    position: relative;
*/    width:40%;
}

.breadcrumb {
    position: fixed;
    width: 100%;
    z-index: 99;
}

section.container{
    padding-top:48px;
    padding-bottom:48px;
}
article{
    padding-bottom:400px;
}

@media (max-width: 768px) {
    pre {
        width:100%;
    }
}

@media (min-width: 768px) {
    pre {
        width:100%;
    }
}

@media (min-width: 992px) {
    pre {
        width:80%;
    }
}

@media (min-width: 1200px) {
    pre {
        width:50%;
    }
}

.code-switch {
   position: fixed;
   right: 6px;
   top: 55px;
   z-index: 100;
}

.mute-bg {
    background-color:#f4f4f4;
    padding:10%
}



.dropdown-menu li a {
    cursor: pointer;
}


.color-swatches{
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: #FFFFFF;
    width: 100%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    margin-bottom: 24px;
}
.color-swatches .normal, .color-swatches .hover, .color-swatches .disabled {
    width: 33.33333333333%;
    height: 50px;
}
.color-swatches .normal {
    -webkit-border-radius: 4px 0 0;
    -moz-border-radius: 4px 0 0;
    border-radius: 4px 0 0;
}
.color-swatches .hover {
    -webkit-border-radius:0px;
    -moz-border-radius:0px;
    border-radius: 0px;
}
.color-swatches .disabled {
    -webkit-border-radius: 0 4px 0 0;
    -moz-border-radius: 0 4px 0 0;
    border-radius: 0 4px 0 0;
}






.color-swatches .infos {
    padding: 5px 10px;
}
.color-swatches .infos h4, .color-swatches .infos p {
    margin: 0;
}
.color-swatches .infos h4 {
    margin-bottom: 3px;
    font-weight: 700;
    font-size: 14px;
}
.color-swatches .infos p {
    font-size: 12px;
}