body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

.browser-window {
    text-align: left;
}

.browser-window .top-bar {
    height: 30px;
    border-radius: 5px 5px 0 0;
    border-top: thin solid #eaeae9;
    border-bottom: thin solid #dfdfde;
    background: -webkit-gradient(linear, left top, left bottom, from(#e7e7e6), to(#E2E2E1));
    background: linear-gradient(#e7e7e6, #E2E2E1);
}

.browser-window .circles {
    margin: 5px 12px;
}

#close-circle {
    background-color: #FF5C5A;
}

#minimize-circle {
    background-color: #FFBB50;
}

#maximize-circle {
    background-color: #1BC656;
}

.browser-window .circle {
    height: 10px;
    width: 10px;
    display: inline-block;
    border-radius: 50%;
    background-color: #fff;
    margin-right: 1px;
}

.browser-window .content {
    margin: 0;
    width: 100%;
    display: inline-block;
    border-radius: 0 0 5px 5px;
    background-color: #fafafa;
}

#site-layout-example-top {
    background-color: grey;
    height: 42px;
}

#site-layout-example-right {
    background-color: #26a69a;
    height: 400px;
}

.browser-window .row {
    margin: 0;
}

.circle {
    border-radius: 50%;
}

*,
::before,
::after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

.flat-text.full-width {
    width: 100%;
}

.flat-text {
    height: 25px;
    width: 80%;
    background-color: rgba(0, 0, 0, 0.15);
    display: block;
    margin: 27px auto;
}