/* Theme colors (default: light) */
:root {
    --bg: #f9f9fb;
    --text: #333;
    --box-bg: #fff;
    --highlight: #007acc;
    --box-shadow: rgba(0,0,0,0.06);
}

/* Dark mode overrides */
body.dark-mode {
    --bg: #1e1e1e;
    --text: #e4e4e4;
    --box-bg: #2c2c2c;
    --highlight: #66b2ff;
    --box-shadow: rgba(255,255,255,0.04);
}


* {outline:0}
body{margin:0; padding:0; font:12px arial}
body a{color:#E30F0C}
body a:hover{color:#58628E}
label {display:block;float:left;width:100px}
#c {width:990px; border-left:1px solid #eee; border-bottom:1px solid #eee; border-right:1px solid #eee; text-align:left}
#b {width:970px; height:36px; line-height:36px; margin-left:10px}
#b #title{float:left; font-size:14px; font-weight:bold; color:#000; text-decoration:none}
#b form{float:right}
#b #userinfo{float:right; margin-right:10px;}
#h{width:970px; background:#eee; height:115px; margin-left:10px}
#m{width:970px; background:#EEEEEE; height:58px; margin:0px 0px 10px 10px}
#m #menu{list-style:none; margin:0; padding:0; height:29px; width:970px}
#m #menu li{float:left; width:100px; text-align:center; height:29px; line-height:29px; text-transform:uppercase}
#m #bc{list-style:none; margin:0; padding:0; height:29px; width:943px; margin-left:27px}
#m #bc li{float:left; text-align:center; height:29px; line-height:29px; text-transform:uppercase; font-size:10px; padding:0px 5px 0px 5px}
#cc{width:970px; margin:0px 0px 10px 10px}
#cc #l{width:600px; float:left}
#cc #l .itembox{height:260; width:600px; margin:0px 0px 10px 0px; padding:0; list-style:none}
#cc #l .singleitembox{width:600px; margin:0px 0px 10px 0px; padding:0; list-style:none}
#cc #l .itembox a, .singleitembox a{color:#0077BA}
#cc #l .itembox a:hover, .singleitembox a:hover{color:#58628E}
#cc #l .itembox .t, .singleitembox .t{background:#EEEEEE url(/i/bar.png); height:30px; line-height:30px;padding-left:10px;font-weight:bold}
#cc #l .itembox .t span, .singleitembox .t span{float:right; margin-right:10px; text-transform:uppercase;}
#cc #l .itembox .b, .singleitembox .b{background:#F5F5F5; height:115px; margin-bottom:5px;padding:10px 10px 0px 10px;line-height:19px}
#cc #l .itembox .b img, .singleitembox .b img{float:left;margin-right:10px}
#cc #l .itembox .b .response, .singleitembox .b .response{display:inline;background:url(/i/reaction.png) no-repeat;height:12px;padding-left:18px}
#cc #l .itembox .b a, .singleitembox .b a{line-height:25px;font-weight:bold}
#cc #l .itembox .s, .singleitembox .s{height:20px; line-height:20px; width:300px; float:left; overflow:hidden}
#cc #l .singleitembox .text{line-height:20px; display:block;}
#cc #l .singleitembox .cf{margin-bottom:10px; width:600px;}
#cc #r{width:360px; margin-left:10px; float:left; background:#fff}
#cc #r .itembox{width:360px; background:blue; margin-bottom:10px}
#cc #l .itembox .ministar05{background:url(/i/ministar.png) 0px 0px; width:44px; float:left; height:8px; margin-top:6px; margin-right:4px; font-size:4px}
#cc #l .itembox .ministar1{background:url(/i/ministar.png) 0px -8px; width:44px; float:left; height:8px; margin-top:6px; margin-right:4px; font-size:4px}
#cc #l .itembox .ministar15{background:url(/i/ministar.png) 0px -16px; width:44px; float:left; height:8px; margin-top:6px; margin-right:4px; font-size:4px}
#cc #l .itembox .ministar2{background:url(/i/ministar.png) 0px -24px; width:44px; float:left; height:8px; margin-top:6px; margin-right:4px; font-size:4px}
#cc #l .itembox .ministar25{background:url(/i/ministar.png) 0px -32px; width:44px; float:left; height:8px; margin-top:6px; margin-right:4px; font-size:4px}
#cc #l .itembox .ministar3{background:url(/i/ministar.png) 0px -40px; width:44px; float:left; height:8px; margin-top:6px; margin-right:4px; font-size:4px}
#cc #l .itembox .ministar35{background:url(/i/ministar.png) 0px -48px; width:44px; float:left; height:8px; margin-top:6px; margin-right:4px; font-size:4px}
#cc #l .itembox .ministar4{background:url(/i/ministar.png) 0px -56px; width:44px; float:left; height:8px; margin-top:6px; margin-right:4px; font-size:4px}
#cc #l .itembox .ministar45{background:url(/i/ministar.png) 0px -64px; width:44px; float:left; height:8px; margin-top:6px; margin-right:4px; font-size:4px}
#cc #l .itembox .ministar5{background:url(/i/ministar.png) 0px -72px; width:44px; float:left; height:8px; margin-top:6px; margin-right:4px; font-size:4px}
#cc #l .itembox .itemreaction{width:55px; height:14px; background:url(/i/reaction-fade.png) no-repeat; float:right; display:block; position:relative; text-align:right; margin-left:-50px; margin-right:10px; margin-top:3px; line-height:15px; font-size:10px}
#cc #fl{background:#EEEEEE; height:100%; width:180px; float:left; margin-right:10px; margin-bottom:10px}
#cc #fl .button{display:block; height:25px; width:153px; margin:10px; background:url(/i/button_bg.png); border:1px solid #000; line-height:25px; padding-left:5px; color:#fff; text-decoration:none}
#cc #fl .board{display:block; height:24px; width:153px; margin:10px; background:url(/i/board_bg.png); line-height:25px; padding-left:5px; color:#fff; text-decoration:none}
#cc #fr{background:#EEEEEE; height:100%; width:335px; float:left; margin-bottom:10px}
#cc #fm{float:left; width:435px; margin-right:10px; margin-bottom:10px}
#cc #fm h2{ background:url(/i/board_bg.png); font-size:15px; width:430px; height:24px; line-height:24px; padding-left:5px; color:#fff}
#cc .forums{list-style:none; margin:0; padding:0;}
#cc .forums li {height:20px; line-height:20px}
#cc .forums li .o{color:#666666; font-weight:bold; text-decoration:none;}
#cc .forums li .n{color:#E30F0C; font-weight:bold; text-decoration:none;}
#cc .forums .rr{background:#eee}

#s {background:#ccc; width:970px; height:100px; margin-left:10px; margin-top:-10px}
#f {width:970px; height:30px; text-align:center; margin:10px 0px 10px 0px; color:#58628E; font-size:11px}
#f a{color:#58628E}
#f a:hover{color:#000}
#l #registerform{list-style:none; margin:0; padding:0 0 0 30px; width:530px}
#l #registerform li{float:left; display:block; margin-bottom:10px; height:20px;}
#l #registerform li span{float:right; display:block; height:20px; width:100px; line-height:20px; text-align:center; color:#fff; font-weight:bold;}
#l #registerform .text{width:200px}
#l #registerform .input{width:300px}
#l #registerform .input{width:300px}
#l #registerform .input input{width:200px}
#l #registerform .input select{width:200px}
#l #registerform .input #submitbutton{float:right; margin-right:100px; width:100px}
#l #reactions{font-size:12px; font-weight:normal; display:block; float:left; margin-top:1px; margin-left:5px;}
#sm{float:right}
#facebook{height:16px; width:16px; background:green; display:block; float:left; margin-right:6px; background:url(/i/fb.png)}
#twitter{height:16px; width:16px; background:green; display:block; float:left; margin-right:6px; background:url(/i/tw.png)}  
#googleplus{margin-top:4px; width:30px; float:left; margin-right:8px; margin-top:-2px;}
#stumbleupon{float:left; margin-right:6px;}
#linkedin{float:left; margin-right:6px; margin-top:-2px;}
.fb-like{float:left; display:block; width:85px; margin-top:-2px;}
.rateit{display: -moz-inline-box;display: inline-block;position: relative;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-o-user-select: none;user-select: none;webkittouch-callout: none;}
.rateit .rateit-range{position: relative;display: -moz-inline-box;display: inline-block;background: url(/i/star.gif);height: 16px;}
* html .rateit, * html .rateit .rateit-range{display: inline;}
* + html .rateit, * + html .rateit .rateit-range{display: inline;}
.rateit .rateit-hover, .rateit .rateit-selected{position: absolute;left: 0px;}
.rateit .rateit-hover-rtl, .rateit .rateit-selected-rtl{left: auto;right: 0px;}
.rateit .rateit-hover{background: url(/i/star.gif) left -32px;}
.rateit .rateit-hover-rtl{background-position: right -32px;}
.rateit .rateit-selected{background: url(/i/star.gif) left -32px;}
.rateit .rateit-selected-rtl{background-position: right -32px;}
.rateit .rateit-preset{background: url(/i/star.gif) left -48px;}
.rateit .rateit-preset-rtl{background: url(/i/star.gif) left -48px;}
.rateit .rateit-reset:hover{background-position: 0 -16px;}

/* Algemene layout voor alle tools */
/* Use CSS variables */
body {
    background: var(--bg);
    color: var(--text);
}
.container {
    background: var(--box-bg);
    box-shadow: 0 0 10px var(--box-shadow);
}
h1, h2, h3 {
    color: var(--text);
}
a {
    color: var(--highlight);
}
button,
input[type="submit"] {
    background: var(--highlight);
}
.output-box {
    background: var(--box-bg);
    border-left: 5px solid var(--highlight);
}

.container {
    max-width: 960px;
    margin: 2rem auto;
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0,0,0,0.06);
}

form {
    margin-top: 1.5rem;
}
label {
    display: block;
    font-weight: bold;
    margin-top: 1rem;
}
input[type="text"],
input[type="number"],
input[type="url"],
textarea,
select {
    width: 100%;
    padding: 0.5em;
    font-size: 1rem;
    margin-top: 0.3em;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;
}

input[type="checkbox"],
input[type="radio"] {
    margin-right: 0.5em;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

button,
input[type="submit"] {
    background: #007acc;
    color: white;
    padding: 0.7em 1.2em;
    border: none;
    border-radius: 6px;
    margin-top: 1em;
    font-size: 1rem;
    cursor: pointer;
}
button:hover,
input[type="submit"]:hover {
    background: #005fa3;
}

/* Output of generated content */
.output-box {
    margin-top: 2rem;
    background: #f4f4f4;
    padding: 1rem;
    border-left: 5px solid #007acc;
    font-family: monospace;
    white-space: pre-wrap;
    border-radius: 6px;
}

/* Utilities */
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; }
.text-center { text-align: center; }

/* Responsive */
@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }
}