body {
    font-family: Calibri, Verdana, arial, sans-serif;
    font-size: 17px;
    background-color: #f0f0f0;
    
    padding: 1em 2em;
}

body > div.title {
    text-align: center;
    margin-bottom: 2em;
}

body > div.title > .small {
    font-size: 0.7em;
    color: #606060;
}

ul {
    margin: 0.5em 0 0.5em 0;
}

.rev {
    border: 1px solid #e0e0e0;
    font-size: 0.7em;
    color: #808080;
    border-radius: 0.5em;
    color: #909090;
    padding: 0.1em 0.5em;
    margin: 0 0.4em 0 0;
    background-color: #f0f0f0;
}

.rev::before {
    content: "revision ";
}

a {
    color: blue;
    text-decoration: none;
}

a.obsolete {
    color: #909090;
}

a:hover {
    text-decoration: underline;
}

h1 {
    font-size: 1.35em;
    margin-top: 0;
}

h2 {
    font-size: 1.25em;
    margin-top: 0em;
}

h2 img {
    height: 2.6em;
    vertical-align: middle;
    margin-right: 0.5em;
}

h3 {
    font-size: 1.1em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    color: #404040;
}

h4 {
    font-size: 1.05em;
    margin-top: 1em;
    margin-bottom: 0.5em;
    color: #606060;
}

div.intro {
    font-size: 0.9em;
    color: #808080;
    margin: 1em 0 2em 0;
    line-height: 1.4em;
}

div.main_area {
    border: 1px solid #e0e0e0;
    background-color: white;
    border-radius: 0.5em;
    
    padding: 1em;
    margin-bottom: 2em;
}

div.doc_group {
    border: 1px solid #e0e0e0;
    background-color: white;
    border-radius: 0.25em;
    
    padding: 0em 1em 1em 1em;
    margin-top: 2em;
}

div.doc_group:first-of-type {
    margin-top: 0;
}

div.doc_group > div.line {
    /*border-bottom: 1px solid #e0e0e0;*/
    padding: 0.2em 1em;
    color: #808080;
}

div.doc_group > div.line:last-child {
    border-bottom: none;
}

div.doc_group > div.line.level1 {
    margin-left: 2em;
}

.tag {
    font-size: 0.7em;
    border-radius: 0.5em;
    color: white;
    padding: 0.1em 0.5em;
    margin: 0 0.4em 0 0;
}

.tag.locked {
    background: url(../images/icon_lock.png) no-repeat center center;
    background-size: cover;
    width: 2em;
    height: 2em;
    display: inline-block;
    padding: 0;
    vertical-align: text-bottom;
    filter: saturate(0);
    opacity: 0.6;
}

.tag.unlocked {
    background: url(../images/icon_unlock.png) no-repeat center center;
    background-size: cover;
    width: 2em;
    height: 2em;
    display: inline-block;
    padding: 0;
    vertical-align: text-bottom;
    filter: saturate(0);
    opacity: 0.4;
}

.tag.file_type {
    background-color: #8080FF;
}

.tag.wip {
    background-color: #40A040;
}
.tag.wip::after {
    content: "WIP";
}

.tag.beta {
    background-color: #40A040;
}
.tag.beta::after {
    content: "BETA";
}

.tag.todo {
    background-color: #E0E040;
}
.tag.todo::after {
    content: "TODO";
}

.tag.obsolete,
.tag.legacy {
    background-color: #C0C0C0;
}
.tag.obsolete::after {
    content: "OBSOLETE";
}
.tag.obsolete::legacy {
    content: "LEGACY";
}