/* DEMO */

.docs-layout
{
    font-size: 14px;

    background: #fff;
}

.content-box .example-html + .docs-btn-wrapper
{
    padding-bottom: 25px;

    text-align: center;
}

/* Demo example box */

.example-box-wrapper
{
    position: relative;

    margin-bottom: 40px;
    padding: 67px 25px 0;

    border-width: 1px;
    border-style: solid;
    border-radius: 6px;
}

.row.mrg25T + .example-box-wrapper
{
    margin-top: 25px;
}

.frontend-layout .example-box-wrapper
{
    margin-bottom: 25px;
    padding: 0;

    border: 0;
}

.frontend-layout .example-box-wrapper::after
{
    display: none;
}

.title-hero,
p
{
    margin-bottom: 25px;
}

.title-hero
{
    margin-top: 25px;
}

.example-box
{
    padding: 25px;
}

h4.title-hero + .title-lead
{
    font-size: 100%;

    margin-top: -15px;
    margin-bottom: 15px;
}

h3.title-hero + .title-lead
{
    margin-top: -15px;
}

.example-box-wrapper::after
{
    font-size: 11px;
    font-weight: bold;

    position: absolute;
    top: 19px;
    left: 25px;

    padding: 6px 15px;

    content: 'Example';
    letter-spacing: 1px;
    text-transform: uppercase;

    color: #2792ff;
    border-radius: 34px;
    background: #f7f7f7;
}

.example-box-wrapper + h2.title-hero
{
    margin-top: 50px;
    margin-bottom: 10px;
}

.example-box-wrapper + h3.title-hero
{
    margin-top: 40px;
}

.example-box-wrapper + h4.title-hero
{
    margin-top: -25px;
}

.example-box-wrapper .docs-btn-wrapper
{
    position: absolute;
    top: 17px;
    right: 25px;

    display: none;

    background: #fafafa;
}

.example-box-wrapper:hover .docs-btn-wrapper
{
    display: block;
}

.example-html
{
    display: none;

    margin-bottom: 25px;
}

.example-html.show-source
{
    position: fixed;
    z-index: 5000;
    top: 50px;
    left: 50%;

    display: block;

    width: 80%;
    margin: 0 0 0 -40%;

    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 15px rgba(0,0,0,.5);
}

.example-html.show-source pre
{
    margin: 50px;
}

.example-close-modal
{
    font-size: 24px;
    line-height: 40px;

    position: fixed;
    z-index: 6000;
    top: 15px;
    right: 15px;

    display: none;

    width: 40px;
    height: 40px;

    text-align: center;

    border-radius: 10px;
    background: #fff;
}

.example-box-wrapper.rm-border-bottom
{
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.example-html,
.example-box-wrapper
{
    border-color: #eee;
}

.example-box-wrapper > .pagination
{
    margin-top: 0;
}

.example-box,
.demo-margin,
.example-box-wrapper .icon-box,
.example-box-wrapper .ui-slider,
.example-box-wrapper .ui-rangeSlider,
.example-box-wrapper .panel-layout,
.example-box-wrapper .image-box,
.example-box-wrapper .ui-accordion,
.example-box-wrapper .dashboard-box,
.example-box-wrapper .content-box,
.example-box-wrapper .tile-box,
.example-box-wrapper .jvectormap-container,
.example-box-wrapper > .hasDatepicker,
.example-box-wrapper > .minicolors,
.example-box-wrapper .minicolors,
.example-box-wrapper .ui-tabs,
.example-box-wrapper > img,
.example-box-wrapper > .thumbnail,
.example-box-wrapper > .img-humbnail,
.example-box-wrapper > .display-block.dropdown-menu,
.example-box-wrapper > .dropdown,
.example-box-wrapper > .dropup,
.example-box-wrapper > form,
.example-box-wrapper > .progressbar,
.example-box-wrapper .loading-spinner,
.example-box-wrapper .loading-stick,
.example-box-wrapper .nav,
.example-box-wrapper .jcrop-holder,
.example-box-wrapper .alert,
.example-box-wrapper .list-group,
.example-box-wrapper > h6,
.example-box-wrapper .dataTables_wrapper,
.example-box-wrapper .scrollable-content,
.example-box-wrapper > .pagination,
.example-box-wrapper > .btn-group-vertical,
.example-box-wrapper > .btn-toolbar,
.example-box-wrapper > .btn-group,
.example-box-wrapper > .btn
{
    margin-bottom: 25px;
}

.example-box-wrapper .ui-slider + .input-group
{
    margin-bottom: 25px;
}

.example-box-wrapper .display-block.popover
{
    margin-bottom: 25px;
}

.example-box-wrapper > img,
.example-box-wrapper > .thumbnail,
.example-box-wrapper > .img-humbnail
{
    margin-right: 25px;
}

.example-box-wrapper .input-group
{
    margin-bottom: 10px;
}

.example-box-wrapper .input-group:last-child
{
    margin-bottom: 0;
}

.example-box-wrapper .loading-stick,
.example-box-wrapper .loading-spinner
{
    float: left;

    margin-top: 5px;
}

@media (max-width: 1050px)
{
    #docs-nav
    {
        position: static !important;
    }
}

/* Dummy content */

.dummy-poly-1,
.dummy-poly-2,
.dummy-poly-3,
.dummy-poly-4,
.dummy-dark-bg,
.dummy-dark-bg2,
.dummy-dark-bg3,
.dummy-light-bg,
.dummy-light-bg2
{
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.dummy-dark-bg
{
    background-image: url('../dummy-images/big-bg.jpg');
}

.dummy-dark-bg2
{
    background-image: url('../dummy-images/bg31.jpg');
}

.dummy-dark-bg3
{
    background-image: url('../dummy-images/bg-airbnb.jpg');
}

.dummy-light-bg
{
    background-image: url('../dummy-images/bg6b.jpg');
}

.dummy-light-bg2
{
    background-image: url('../dummy-images/bg.jpg');
}

.dummy-poly-1
{
    background-image: url('../dummy-images/poly/orange.jpg');
}

.dummy-poly-2
{
    background-image: url('../dummy-images/poly/gray.jpg');
}

.dummy-poly-3
{
    background-image: url('../dummy-images/poly/black.jpg');
}

.dummy-poly-4
{
    background-image: url('../dummy-images/poly/blue.jpg');
}

.iphone-bg
{
    background-image: url('../dummy-images/iphone_hand.png');
}