body {
/*        background-image: url('img/warm-amber-patterns-3b.jpg');*/
        background-image: url('img/rockywall.png');
/*        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center 260px;*/
        height: 100vh;
/*        display: flex;
        flex-direction: column;
        font-family: Geneva,Arial,Helvetica,sans-serif;*/
        font-family: Overlock,Dosis,Geneva,Arial,Helvetica,sans-serif;
        color: #000;
}

h2 {
/*        font: bold 1.60em Geneva,Arial,Helvetica,sans-serif;*/
        text-align: center;
        margin-top: 9px;
        margin-bottom: 9px;
}

h3.right {
/*        font: bold 1.60em Geneva,Arial,Helvetica,sans-serif;*/
        text-align: right;
        margin-top: 0px;
        margin-bottom: 30px;
        color: #9C6921;
}

h4 {
/*        font: bold 1.60em Geneva,Arial,Helvetica,sans-serif;
        text-align: center;
        margin-top: 9px;*/
        margin-bottom: 9px;
        margin-left: 30px;
}

h3.orange {
        color: #9C6921;
        font: bold 20px Geneva,Arial,Helvetica,sans-serif;
        letter-spacing: 0.5px;
        margin-top: 30px;
/*        text-shadow: 0 0 1px black;
        font: bold 1.60em Geneva,Arial,Helvetica,sans-serif;
        text-align: center;
        margin-top: 9px;
        margin-bottom: 9px;
        margin-left: 30px;*/
}

h4.orange {
        color: #9C6921;
        font: bold 17px Geneva,Arial,Helvetica,sans-serif;
        letter-spacing: 0.5px;
/*        text-shadow: 0 0 1px black;
        font: bold 1.60em Geneva,Arial,Helvetica,sans-serif;
        text-align: center;
        margin-top: 9px;
        margin-bottom: 9px;
        margin-left: 30px;*/
}

h5.nav {
        color: #333;
        margin-left: 30px;
}

p {
        margin-left: 30px;
        margin-right: 30px;
        color: #ded;
        font-size: 19px;
        line-height: 130%;
        letter-spacing: 0.7px;
}

img.ki {
        margin-left: -20px;
        margin-top: 10px;
        margin-bottom: 10px;
}

img.kifree {
        margin-top: 10px;
        margin-bottom: 10px;
}

img.kiheader {
        margin-top: 0px;
        margin-bottom: 0px;
        border-radius: 0px 10px 10px 0px;
}

img.leftmargin {
        margin-left: 590px;
}

input.btn {
        cursor: pointer;
}

nobr {
        white-space: nowrap;
        hyphens: none;
}

.clear {
        clear: both;
        height: 0px;
        overflow: hidden;
}

.clear5p {
        clear: both;
        height: 5px;
        overflow: hidden;
}

.topleft {
        position: absolute;
        top: 18px;
        left: 16px;
        font-size: 18px;
        color: #fff;
        text-shadow: 0 0 4px black, 0 0 4px black;
}

.topleft-screens {
        position: absolute;
        top: 18px;
        left: 16px;
        font-size: 0.95em;
/*        font-size: 15px;*/
        color: #fff;
        text-shadow: 0 0 4px black, 0 0 4px black;
}

.topleft-preview {
        position: absolute;
        top: 5px;
        left: 12px;
        font-size: 0.95em;
/*        font-size: 15px;*/
        color: #fff;
        text-shadow: 0 0 4px black, 0 0 4px black;
}

.topleft-header {
        position: absolute;
/*        top: 18px;*/
        top: 9px;
        left: 26px;
        font-size: 16px;
        font-weight: bold;
        color: #000;
        letter-spacing: 1px;
        text-shadow: 0 0 4px white, 0 0 2px white;
}

.topleft-header2 {
        position: absolute;
/*        top: 18px;*/
        top: -5px;
        left: 26px;
        font-size: 16px;
        font-weight: bold;
        color: #000;
        letter-spacing: 1px;
        text-shadow: 0 0 4px white, 0 0 2px white;
}

.topleft-header3 {
        position: absolute;
/*        top: 18px;*/
        top: -15px;
        left: 30px;
        font-family: Dosis,Geneva,Arial,Helvetica,sans-serif;
        font-size: 24px;
        font-weight: bold;
        color: #000;
        letter-spacing: 1.2px;
        text-shadow: 0 0 4px white, 0 0 2px white;
}

.topleft-header-nav {
        position: absolute;
/*        top: 18px;*/
        top: -19px;
        left: 26px;
        font-size: 16px;
        font-weight: bold;
        color: #000;
        letter-spacing: 1px;
        text-shadow: 0 0 4px white, 0 0 2px white;
}

span.newstitle {
        display: inline-block;
        margin-top: 20px;
        font: bold 18px Geneva,Arial,Helvetica,sans-serif;
        letter-spacing: 0.5px;
/*        font: bold 1.20em Geneva,Arial,Helvetica,sans-serif;
        display: inline-block;
        float: left;
        margin-left: 0px;*/
}

span.newsdate {
        display: inline-block;
        float: right;
        width: 160px;
        margin-top: 23px;
        font: bold 16px Geneva,Arial,Helvetica,sans-serif;
/*        font: bold 1.0em Geneva,Arial,Helvetica,sans-serif;*/
        color: #9C6921;
}

div.logo {
        width: 814px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 15px;
}

div.logo img#logoleft {
        float: left;
        width: 102px;
        height: 102px;
        margin-top: 0px;
        border: 1px solid #9C6921;
        -webkit-transform: rotate(4deg);
        -moz-transform: rotate(4deg);
        box-shadow: 2px 3px 4px #444;
}

div.logo img#logoright {
        float: right;
        width: 102px;
        height: 102px;
        margin-top: 0px;
        border: 1px solid #9C6921;
        -webkit-transform: rotate(-3deg);
        -moz-transform: rotate(-3deg);
        box-shadow: 2px 3px 4px #444;
}

div.logomidden {
        width: 426px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0px;
        background: #FFEBB9;
        background-image: url('img/paper_2_@2X-008.png');
        border: 1px solid #9C6921;
        border-radius: 0px 0px 20px 20px;
        text-align: center;
}

div.kader {
        width: 814px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 22px;
/*        background: #CEB78B;*/
        background: #222;
/*        background: #CEB78B;
        background: #FFEBB9;
        background-image: url('img/paper_2_@2X-008.png');*/
        border: 3px solid #9C6921;
        border-radius: 20px 20px 20px 20px;
}

div.kader2 {
        width: 814px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 5px;
        background: #FFEBB9;
        background-image: url('img/paper_2_@2X-008.png');
        border: 1px solid #9C6921;
}

div.rounded {
/*        background: #FFEBB9;
        background-image: url('img/paper_2_@2X-008.png');
        border: 1px solid #9C6921;*/
        border-radius: 15px 15px 15px 15px;
}

div.rounded-header {
/*        background: #FFEBB9;
        background-image: url('img/paper_2_@2X-008.png');
        border: 1px solid #9C6921;*/
        margin-bottom: 20px;
        margin-top: 20px;
        border-radius: 20px 0px 0px 20px;
}

div.rounded-header-default {
/*        background: #FFEBB9;
        background-image: url('img/paper_2_@2X-008.png');
        border: 1px solid #9C6921;*/
        position: relative;
/*        background: #BD9B62;*/
        background: #CEB78B;
        height: 65px;
        margin-bottom: 20px;
        margin-top: 20px;
        border-radius: 10px 10px 10px 10px;
}

div.rounded-header-sub {
/*        background: #FFEBB9;
        background-image: url('img/paper_2_@2X-008.png');
        border: 1px solid #9C6921;*/
        position: relative;
        background: #CEB78B;
        height: 50px;
        margin-bottom: 20px;
        margin-top: 20px;
        border-radius: 20px 0px 0px 20px;
}

div.rounded-header-partnav {
/*        background: #FFEBB9;
        background-image: url('img/paper_2_@2X-008.png');
        border: 1px solid #9C6921;*/
        border: 1px solid #CEB78B;
        position: relative;
/*        background: #CEB78B;
        background: none;
        background-color: rgba(255,255,255,0.5);*/
        background-color: rgba(206,183,139,0.3);
        height: 24px;
        margin-bottom: 20px;
        margin-top: 20px;
        border-radius: 10px 0px 0px 10px;
}

div.rounded-header-partnav ul {
/*        background-color: none;*/
        list-style-type: none;
        margin: 0;
        margin-left: 150px;
        padding: 0;
        overflow: hidden;
}

div.rounded-header-partnav li {
        float: left;
}

div.rounded-header-partnav li a {
        display: block;
        color: #222;
        text-align: center;
        width: 140px;
        padding-top: 2px;
        padding-bottom: 3px;
/*        padding-left: 50px;
        padding-right: 50px;*/
        text-decoration: none;
}

div.rounded-header-partnav li a.pn3 {
        width: 170px;
        padding-left: 10px;
        padding-right: 10px;
}

div.rounded-header-partnav li a.pn4 {
        width: 135px;
        padding-left: 5px;
        padding-right: 5px;
}

div.rounded-header-partnav li a.pn5 {
        width: 110px;
        padding-left: 5px;
        padding-right: 5px;
/*        padding-left: 40px;
        padding-right: 40px;*/
}

div.rounded-header-partnav li a.live {
        padding-top: 5px;
        padding-bottom: 6px;
}

div.rounded-header-partnav li a:hover {
        background-color: rgba(206,183,139,0.8);
        letter-spacing: 0.5px;
}

div.kaderbinnen {
        width: 790px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0px;
}

div.kaderscreens {
/*        min-width: 373px;
        max-width: 800px;*/
        width: 760px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0px;
}

div.table {
        margin: 5px 0px 5px 0px;
        font: 16px Geneva,Arial,Helvetica,sans-serif;
        line-height: 160%;
        float: left;
}

div.time {
/*        background: #FFD99B;*/
        background: #F7E4B3;
        background-image: url('img/paper_2_@2X-006.png');
        font: 15px Geneva,Arial,Helvetica,sans-serif;
        line-height: 160%;
}

div.menu-small {
        width: 550px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 25px;
        margin-bottom: 25px;
/*        background: red;
        font: 14px Geneva,Arial,Helvetica,sans-serif;
        line-height: 160%;
        font-weight: bold;*/
}

div.menu-small span.menu-item {
        display: inline-block;
        float: left;
        width: 160px;
        border: 1px solid black;
        text-align: center;
        margin: 0 10px;
}

div.menu-small a:hover {
/*        background: red;
        font: 14px Geneva,Arial,Helvetica,sans-serif;
        line-height: 160%;*/
        font-weight: bold;
}

div.opaq {
        background-color: rgba(206,183,139,0.2);
/*        border: 1px solid #9C6921;*/
        border-radius: 20px 20px 20px 20px;
        padding-top: 1px;
        padding-bottom: 1px;
}

div.opaq2 {
/*        background-color: rgba(206,183,139,0.2);
        border: 1px solid #9C6921;
        background-image: url('img/paper_2_@2X-008.png');
        background: #CEB78B;*/
        background: #222;
        border: 2px solid #9C6921;
        border-radius: 10px 10px 10px 10px;
        padding-top: 1px;
        padding-bottom: 1px;
}

div.opaq2 p {
        margin-left: 60px;
        margin-right: 60px;
/*        color: #ded;
        font-size: 19px;
        line-height: 130%;
        letter-spacing: 0.7px;*/
}

div.kitable {
        width: 350px;
        padding-left: 60px;
}

div.kitable span.kileft {
        width: 170px;
        display: inline-block;
}

div.kitable span.kiright {
        width: 100px;
        display: inline-block;
        text-align: right;
}

div#logo-gallerij{
/*        float: left;*/
        clear: left;
        width: 815px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 25px;
        margin-bottom: 10px;
/*        border: 1px solid #394A9C;*/
        border: 1px solid #9C6921;
/*        background: #F4F9FF;*/
        background: #FFEBB9;
}

div#logo-gallerij ul{
        list-style: none;
/*        width: 550px;*/
/*        margin: 10px 0 10px 10px;*/
        margin: 5px 0px 0px 4px;
        padding: 0px;
        overflow: hidden;
        border: none;
/*        background: #F4F9FF;*/
        background: #FFEBB9;
}

div#logo-gallerij ul li{
        float: left;
        width: 400px;
        height: auto;
        margin: 0px 5px 5px 0px;
        text-align: center;
}

div#logo-gallerij ul li img{
/*        cursor: pointer;
        cursor: default;*/
        border: 1px solid #eee;
        border-right: 1px solid #666;
        border-bottom: 1px solid #666;
}

div#logo-gallerij img:hover {
/*        cursor: pointer;
        cursor: default;*/
        border: 1px solid #eee;
        border-left: 1px solid #666;
        border-top: 1px solid #666;
}

div#logo-gallerij img:active {
/*        cursor: pointer;*/
        cursor: default;
        border: 1px solid red;
}

div.gallery{
/*        float: left;*/
        clear: left;
/*        background: #FFEBB9;*/
/*        background: #F4F9FF;*/
        background: #CEB78B;
        background-image: url('img/paper_2_@2X-008.png');
        width: 734px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 25px;
        margin-bottom: 0px;
        padding-bottom: 7px;
/*        border: 1px solid #394A9C;*/
        border: 1px solid #9C6921;
        border-radius: 20px 20px 0px 0px;
        color: #000;
        letter-spacing: 1px;
        text-shadow: 0 0 4px white, 0 0 2px white;
        text-align: center;
}

div.gallery ul{
        list-style: none;
/*        width: 550px;*/
/*        margin: 10px 0 10px 10px;*/
        margin: 5px 0px 0px 4px;
        padding: 0px;
        overflow: hidden;
        border: none;
/*        background: #F4F9FF;
        background: #FFEBB9;*/
}

div.gallery ul li{
        position: relative;
        float: left;
/*        width: 177px;
        height: auto;*/
        width: 177px;
        height: 100px;
        margin: 0px 5px 5px 0px;
        text-align: center;
}

div.gallery ul li img{
        width: 177px;
        height: 100px;
/*        cursor: pointer;
        cursor: default;*/
        border: 1px solid #eee;
        border-right: 1px solid #666;
        border-bottom: 1px solid #666;
}

div.gallery ul li img.s1024{
        width: 133px;
        height: 100px;
}

div.gallery ul li img:hover {
/*        cursor: pointer;
        cursor: zoom-in;
        cursor: default;*/
        border: 1px solid #eee;
        border-left: 1px solid #666;
        border-top: 1px solid #666;
}

div.gallery ul li img:active {
/*        cursor: pointer;
        cursor: zoom-in;*/
        border: 1px solid red;
}

ul.toc {
/*        margin-left: 200px;
        list-style-type: circle;
        list-style-image: url('img/bullet-orange01.png');*/
}

ul.toc li {
        line-height: 140%;
}

ul.toc a {
        text-decoration: none;
}

ul.shardlist {
        margin-left: 200px;
        list-style-type: circle;
        list-style-image: url('img/bullet-orange01.png');
}

ul.shardlist li {
        line-height: 160%;
}

ul.shardlist a {
        text-decoration: none;
}

.bcrborder {
        width: 700px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 5px;
        margin-bottom: 0px;
        border: 1px solid #9C6921;
        line-height: 160%;
        border-radius: 4px 4px 4px 4px;
}

.bcrborder b {
        margin: 0 10px;
}

.bcrborder e {
        margin: 0 10px;
        font-weight: normal;
}

.bcrborder i {
        font-style: normal;
        margin: 0 10px;
}

.name {
        display: inline-block;
        width: 200px;
        margin: 0;
/*        padding: 0 10px;*/
        background: #CEB78B;
}

.syntax {
        display: inline-block;
        width: 494px;
        margin: 0;
        padding: 0;
/*        padding: 0 10px;*/
        background: #ddb96d;
}

.chatcmd {
        display: block;
        margin: 0;
/*        padding: 0 10px;*/
        background: #ddb96d;
        border-radius: 4px 4px 0px 0px;
}

.desc {
        display: block;
        margin: 0;
        padding: 0 10px;
}

.syn {
        display: block;
        margin: 0;
        padding: 0 10px;
        font-style: italic;
}

.example {
        display: block;
        margin: 0;
        padding: 0 10px;
        background: #FBDEA9;
        font: 16px Courier,Monospace;
        line-height: 160%;
        border-radius: 0px 0px 4px 4px;
}

.invisible {
        display: none;
}

span.chatcmd {
        width: 30%;
        display: inline-block;
        margin-left: 11px;
        margin-right: 11px;
}

.none {
        border: none;
}

.dgreen {
        display: inline-block;
        width: 120px;
        margin-right: 30px;
        color: #145274;
/*        color: #147401;*/
}

.agreen {
        color: #12743e;
}

div.emote {
        margin-left: 11px;
        margin-right: 11px;
        margin-top: 2px;
        margin-bottom: 2px;
        background: #ddb96d;
        letter-spacing: 0.5px;
        cursor: default;
        border-radius: 4px 4px 4px 4px;
}

div.shortcut {
        margin-left: 11px;
        margin-right: 11px;
        margin-top: 2px;
        margin-bottom: 2px;
        background: #ddb96d;
        letter-spacing: 0.5px;
        line-height: 180%;
        cursor: default;
/*        border-radius: 4px 4px 4px 4px;*/
}

div.key {
        margin-left: 11px;
        margin-right: 2px;
        margin-top: 4px;
        margin-bottom: 4px;
        background: #ceb78b;
        text-align: center;
        letter-spacing: 0.5px;
        cursor: default;
        border-radius: 5px 0px 0px 5px;
}

div.gest {
        margin-left: 2px;
        margin-right: 11px;
        margin-top: 4px;
        margin-bottom: 4px;
        padding-left: 20px;
        background: #ddb96d;
        letter-spacing: 0.5px;
        cursor: default;
        border-radius: 0px 5px 5px 0px;
}

div.emote:hover {
        background-color: rgba(206,183,139,0.3);
}

div#voet {
        width: 814px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 35px;
        margin-bottom: 25px;
        font-size: 18px;
        letter-spacing: 0.5px;
/*        color: #F5E20C;*/
        color: #000;
        background: #CEB78B;
/*        background: #FFEBB9;
        background-image: url('img/paper_2_@2X-008.png');*/
        border: 1px solid #9C6921;
        border-radius: 5px 5px 5px 5px;
}

div#voet div#voetbinnen {
        width: 760px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0px;
        text-align: right;
}

span.voettext {
        display: inline-block;
        float: left;
        margin-left: 0px;
}

@font-face {
        font-family: 'Dosis Medium';
        font-style: normal;
        font-weight: normal;
        src: local("Dosis Medium"),
/*             url('../fnt/dosis/Dosis-Medium.ttf') format('truetype');*/
             url('https://hoppertunes.nl/fnt/dosis/Dosis-Medium.ttf') format('truetype');
}

@font-face {
        font-family: 'Dosis Bold';
        font-style: normal;
        font-weight: bold;
        src: local("Dosis Bold"),
/*             url('../fnt/dosis/Dosis-Bold.ttf') format('truetype');*/
             url('https://hoppertunes.nl/fnt/dosis/Dosis-Bold.ttf') format('truetype');
}