* {
    box-sizing: border-box;
}

body {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    color: #222222;
    margin: 0;
    padding: 10px;
}
body.mce-content-body {
    max-width: 1200px;
}
body.frontend {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    color: #222222;
	margin: 0;
	padding: 0;

	display: flex;
	flex-wrap: wrap;
}

a:link,
a:hover,
a:active,
a:visited {
    text-decoration: none;
    color: #DC5E00;
    border-bottom: 1px solid transparent;
    transition: color 150ms linear,
                border linear 150ms;
}

a img {
	border: none;
}

img {
    vertical-align: middle;
}

body.frontend > header,
body.frontend > footer {
    width: 100%;
}

body.frontend > header {
    background: #424242;
    color: #FFFFFF;
    font-size: 2em;
    line-height: 75px;
    padding: 0 15px;
}
body.frontend > header a:link,
body.frontend > header a:hover,
body.frontend > header a:active,
body.frontend > header a:visited {
    color: #FFFFFF;
}

body.frontend > header a.logout {
    float: right;
    font-size: .7em;
}

body > nav {
    background: #424242;
    color: #FFFFFF;
    min-height: calc(100vh - 75px);
    width: 20%;
    max-width: 250px;
}
body > nav a:link,
body > nav a:hover,
body > nav a:active,
body > nav a:visited {
    color: #DDDDDD;
    display: block;
}
body > nav a:hover {
    color: #FFFFFF;
}
body > nav li .active > span,
body > nav li .active > a {
    color: #DC5E00;
}
body > nav > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
body > nav ul ul {
    margin: 0;
    padding: 0 0 0 15px;
    font-size: .95em;
}
body > nav > ul > li {
    margin: 0 0 20px 0;
}
body > nav > ul > li > span {
    font-weight: bold;
    display: block;
    border-bottom: 1px solid #FFFFFF;
    margin: 0 0 5px 0;
    padding: 0 0 5px 10px;
}
body > nav > ul > li > ul {
    list-style: square;
    margin: 0 0 0 10px;
    color: #BBBBBB;
    padding-right: 10px;
}
body > nav > ul > li > ul ul {
    list-style: disc;
}

body.frontend > section {
    width: 80%;
    padding: 10px;
    overflow: auto;
    flex-grow: 1;
    max-width: 1200px;
}

body.frontend > section a:link,
body.frontend > section a:hover,
body.frontend > section a:active,
body.frontend > section a:visited {
    border-bottom: 1px solid transparent;
    transition: border linear 150ms;
}

body[contenteditable] a:hover,
body.frontend > section a:hover {
    border-color: #424242;
}

body[contenteditable] h1,
body.frontend > section h1 {
    border-bottom: 1px solid #424242;
}

body[contenteditable] h2:before,
body.frontend > section h2:before {
    content: " ";
    display: inline-block;
    background: #DC5E00;
    width: 15px;
    height: 15px;
    margin-right: 5px;
}

body[contenteditable] h3,
body.frontend > section h3 {
    color: #DC5E00;
    font-size: 1em;
}

.cms-blog-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cms-page > header {
    border-bottom: 1px solid #DDDDDD;
    padding-bottom: 20px;
    margin-bottom: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.cms-page > footer {
    border-top: 1px solid #DDDDDD;
    margin-top: 50px;
    padding-top: 20px;
    color: #666666;
    text-align: right;
    font-size: .9em;
}

.cms-page > header h1 {
    width: 100%;
}
.cms-page header div,
.cms-page header p,
.cms-page footer div,
.cms-page footer p {
    margin: 0;
    line-height: 30px;
}

.cms-page header .cms-navigation-container {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 20px;
}
.cms-page header .cms-navigation-container span {
    text-align: center;
    width: 33%;
}
.cms-page header .cms-navigation-container span.cms-page-navigation-previous {
    text-align: left;
}
.cms-page header .cms-navigation-container span.cms-page-navigation-previous:before {
    font-family: FontAwesome;
    content: "\f060";
    margin-right: 10px;
}
.cms-page header .cms-navigation-container span.cms-page-navigation-next {
    text-align: right;
}
.cms-page header .cms-navigation-container span.cms-page-navigation-next:after {
    font-family: FontAwesome;
    content: "\f061";
    margin-left: 10px;
}
.cms-page header .cms-page-navigation-disabled {
    color: #666666;
}


p.editor-code {
    background: #555555;
    color: #FFFFFF;
    padding: 5px;
    font-size: .8em;
    font-family: monospace;
}
span.editor-code {
    display: inline-block;
    color: #FFFFFF;
    background: #555555;
    font-family: monospace;
    font-size: .8em;
    padding: 2px;
    line-height: 1.2;
}
.mce-content-body p.editor-code [data-mce-selected="inline-boundary"] {
    background: transparent;
}

span.editor-highlight {
    font-style: italic;
    font-size: .95em;
    white-space: nowrap;
}
span.editor-highlight:before {
    content: "« ";
}
span.editor-highlight:after {
    content: " »";
}

span.editor-mustbe {
    text-transform: uppercase;
}

code[class*="language-"], pre[class*="language-"],
:not(pre) > code[class*="language-"], pre[class*="language-"] {
    background: #555555;
    border-radius: 0;
    padding: 5px;
    font-size: .9em;
    line-height: 1.2;
}

body.frontend.auth-require > section {
    max-width: inherit;
}
.form-login {
    background: #424242;
    color: #FFFFFF;
    padding: 30px;
    margin: 0 auto;
    width: 500px;
}
.form-login dl {
    display: flex;
    flex-wrap: wrap;
}
.form-login dl dt,
.form-login dl dd {
    margin: 10px 0 0 0;
    padding: 0;
}
.form-login dl dt {
    width: 35%;
}
.form-login dl dd {
    width: 65%;
}
.form-login dl dt#remember_me-label {
    width: 65%;
    margin: 20px 0 0 0;
}
.form-login dl dd#remember_me-element {
    width: 35%;
    margin: 20px 0 0 0;
    text-align: right;
}
.form-login input[type=submit] {
    cursor: pointer;
}