:root { --primary: #2d6a82; --primary-dark: #1a4a5e; --accent: #5a9ab8; --accent-light: #e8f1f5; --bg-body: #d8d8d8; --bg-content: #ffffff; --bg-header: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); --bg-menu: var(--primary); --bg-menu-hover: var(--primary-dark); --bg-block: #f5f5f5; --bg-block-header: var(--primary); --bg-block-light: #e8f1f5; --text-main: #333333; --text-light: #666666; --text-white: #ffffff; --border: #d0ddd7; --shadow: 0 2px 8px rgba(0,0,0,0.08); --shadow-hover: 0 4px 16px rgba(0,0,0,0.12); --radius: 8px; --radius-sm: 4px; } *, *::before, *::after { box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; font-size: 14px; line-height: 1.6; color: var(--text-main) !important; background-color: var(--bg-body) !important; background-image: none !important; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; } p { color: var(--text-main) !important; } a { color: var(--primary) !important; text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--primary-dark) !important; text-decoration: underline; } a:visited { color: var(--primary) !important; } img { max-width: 100%; height: auto; } .site-wrapper { max-width: 1200px; margin: 0 auto; background: var(--bg-content) !important; box-shadow: var(--shadow); min-height: 100vh; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 767px) { .site-wrapper { padding-top: 160px; } .site-wrapper.has-sticky-header { padding-top: 80px; } } .site-header { background: #ffffff !important; background-image: none !important; min-height: 100px; padding: 20px 30px; color: var(--text-main) !important; display: flex; align-items: center; justify-content: space-between; border-radius: 0; gap: 20px; position: static !important; } @media (max-width: 767px) { .site-header.sticky { min-height: 50px; padding: 8px 16px; } .site-header.sticky .header-logo img { max-height: 45px; } } .header-logo { flex-shrink: 0; } .header-logo img { max-height: 123px; width: auto; display: block; border-radius: var(--radius-sm); transition: max-height 0.3s ease; } .header-logo a:hover img { opacity: 0.9; } .site-nav { background: var(--bg-menu) !important; padding: 0; display: flex; flex-wrap: wrap; } .site-nav a { color: var(--text-white) !important; padding: 12px 18px; display: inline-block; font-weight: 500; text-decoration: none; } .site-nav a:hover { background: var(--bg-menu-hover) !important; text-decoration: none !important; } .site-main { display: flex; flex-direction: row; gap: 16px; padding: 16px; background: var(--bg-content) !important; } .sidebar-left { width: 180px; flex-shrink: 0; } .sidebar-right { width: 180px; flex-shrink: 0; } .content-area { flex: 1; min-width: 0; } .site-footer { background: var(--bg-header) !important; min-height: 60px; padding: 20px; color: var(--text-white) !important; text-align: center; font-size: 13px; } .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; } .cat-card { display: flex; align-items: center; gap: 10px; padding: 10px; background: #f8f8f8; border-radius: 6px; border: 1px solid #eee; } .cat-card img { width: 60px; height: 60px; border-radius: 4px; object-fit: cover; flex-shrink: 0; } .cat-card a { font-weight: 600; color: #1f89c4; } .showcase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .showcase-card { background: #f8f8f8; border-radius: 6px; border: 1px solid #eee; padding: 10px; transition: box-shadow 0.2s; } .showcase-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .showcase-card-body { display: flex; align-items: flex-start; gap: 10px; } .showcase-img { flex-shrink: 0; } .showcase-img img { width: 80px; height: 80px; border-radius: 4px; object-fit: cover; display: block; } .showcase-info { flex: 1; min-width: 0; } .showcase-info h3 { margin: 0 0 4px 0; font-size: 14px; line-height: 1.3; } .showcase-info h3 a { color: var(--text-main); text-decoration: none; } .showcase-info h3 a:hover { color: var(--primary); } .showcase-info p { margin: 0; font-size: 12px; color: #666; line-height: 1.4; } .tableblock img, .tableblock2 img, .mod\3\ category\20 \blocks img { width: 80px !important; height: 80px !important; object-fit: cover; border-radius: var(--radius); } .headertitle { font-size: 28px; font-weight: 700; margin: 0; } .headertitle a { color: var(--text-white) !important; text-decoration: none; } .headertitle a:hover { text-decoration: none; opacity: 0.9; } .headerslogan { font-size: 13px; font-weight: 400; opacity: 0.9; margin-top: 4px; } .titleslogan { float: none !important; margin: 0 !important; } .banner_header { float: none !important; margin: 0 !important; } .banner_header img { border-radius: var(--radius-sm); } #menu, body > div:first-of-type > table tr:first-child td, td[colspan="3"] { background: var(--bg-menu) !important; background-image: none !important; padding: 0 !important; } #menu a, td[colspan="3"] a, body > div:first-of-type > table tr:first-child td a { color: var(--text-white) !important; padding: 12px 16px; display: inline-block; font-weight: 500; transition: background 0.2s ease; } #menu a:hover, td[colspan="3"] a:hover { background: var(--bg-menu-hover) !important; text-decoration: none !important; } table[width] { max-width: 100%; } .tableblock, .tableblock2 { background-color: var(--bg-block) !important; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); width: 100% !important; max-width: 300px; margin-bottom: 15px; } td[width] { padding: 12px !important; } .tableblock td, .tableblock2 td { border: none !important; color: var(--text-main) !important; } .tableblock td > div[style*="float:left"], .tableblock td > div[style*="float: left"] { width: 48% !important; margin: 1% !important; height: auto !important; min-height: 80px; } .tableheader, .tableheader2 { background: var(--primary-dark) !important; background-image: none !important; padding: 12px 16px !important; } .tableheader .blocks, .tableheader2 .blocks { color: var(--text-white) !important; font-size: 16px; margin: 0; font-weight: 600; } .tablefooter, .tablefooter2 { background: var(--primary-dark) !important; background-image: none !important; height: 8px !important; padding: 0 !important; } .block-card { background: var(--bg-block); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 15px; } .block-header { background: var(--primary-dark) !important; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; min-height: 24px; } .block-header .blocks { color: var(--text-white) !important; font-size: 16px; margin: 0; font-weight: 600; line-height: 1.3; } .block-body { padding: 12px 14px; color: var(--text-main) !important; } .block-body > h1:first-child, .block-body > h2:first-child, .block-body > h3:first-child { margin-top: 0; } .block-row { padding: 5px 0; } .block-footer { background: var(--primary-dark) !important; height: 8px; } .cat-item { display: flex; align-items: center; gap: 12px; padding: 10px; min-height: 76px; } .cat-item img { width: 60px; height: 60px; border-radius: var(--radius); object-fit: cover; flex-shrink: 0; } .social-row { display: flex; gap: 16px; justify-content: center; align-items: flex-start; } .social-col { flex: 1; text-align: center; } .admin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .admin-item { text-align: center; padding: 10px; background: var(--bg-content); border-radius: var(--radius-sm); border: 1px solid var(--border); transition: box-shadow 0.2s ease; } .admin-item:hover { box-shadow: var(--shadow-hover); } .admin-item img { width: 64px; height: 64px; border-radius: 4px; object-fit: cover; } .admin-icon { width: 64px; height: 64px; background: var(--primary); color: var(--text-white); line-height: 64px; text-align: center; border-radius: 4px; margin: 0 auto; font-weight: 600; font-size: 18px; } input[type="text"], input[type="email"], input[type="password"], textarea, select { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease; width: 100%; max-width: 400px; } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(45,138,110,0.15); } input[type="submit"], input[type="button"], button { background: var(--primary); color: var(--text-white); border: none; padding: 12px 24px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.2s ease, transform 0.1s ease; } input[type="submit"]:hover, input[type="button"]:hover, button:hover { background: var(--primary-dark); transform: translateY(-1px); } .footer { background: var(--bg-header) !important; background-image: none !important; height: auto !important; min-height: 60px; padding: 20px; color: var(--text-white) !important; text-align: center; font-size: 13px; } .footer a { color: #c8e0eb !important; } .footer a:hover { color: #ffffff !important; } .footer-inner a { color: #ffffff !important; } .footer-inner a:hover { color: #c8e0eb !important; } .overview-item, .advertentie { background: var(--bg-content); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow); transition: box-shadow 0.2s ease; } .overview-item:hover, .advertentie:hover { box-shadow: var(--shadow-hover); } .page-content h2, .page-content h3 { margin-top: 16px !important; margin-bottom: 8px !important; color: var(--primary-dark) !important; } .page-content ul, .page-content ol { margin-top: 4px !important; margin-bottom: 8px !important; padding-left: 24px !important; } .page-content li { margin-bottom: 4px !important; line-height: 1.5 !important; } .page-content p { margin-top: 4px !important; margin-bottom: 8px !important; } .page-content br + br { display: none !important; } .page-content li::marker { color: var(--primary) !important; } .page-content ol li { list-style-type: decimal; } .paginatie a, .pagination a { display: inline-block; padding: 6px 12px; margin: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-content); } .paginatie a:hover, .pagination a:hover { background: var(--bg-block-light); border-color: var(--primary); text-decoration: none; } .mobile-menu-toggle { display: none !important; background: none; border: none; cursor: pointer; padding: 8px; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; z-index: 1001; } .mobile-menu-toggle .bar { display: block; width: 24px; height: 3px; background: var(--text-white); border-radius: 2px; transition: all 0.3s ease; } .mobile-menu-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; opacity: 0; transition: opacity 0.3s ease; } .mobile-menu-content { position: absolute; top: 0; left: 0; width: 280px; height: 100%; background: var(--bg-content); padding: 20px; overflow-y: auto; transform: translateX(-100%); transition: transform 0.3s ease; box-shadow: 2px 0 8px rgba(0,0,0,0.2); } .mobile-menu-content .block-card { margin-bottom: 12px; } .mobile-login { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .mobile-login a { color: var(--primary) !important; font-weight: 500; padding: 8px 0; text-decoration: none; } body.mobile-menu-open .mobile-menu-overlay { display: block; opacity: 1; } body.mobile-menu-open .mobile-menu-content { transform: translateX(0); } body.mobile-menu-open .mobile-menu-toggle .bar:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } body.mobile-menu-open .mobile-menu-toggle .bar:nth-child(2) { opacity: 0; } body.mobile-menu-open .mobile-menu-toggle .bar:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); } body.mobile-menu-open .mobile-menu-toggle .bar { background: #ffffff !important; } @media (max-width: 991px) { .site-wrapper { margin: 0 10px; } .site-header { flex-direction: column; text-align: center; gap: 10px; } .header-logo img { max-height: 98px; } .banner_header { margin-top: 10px !important; } } @media (max-width: 767px) { body { font-size: 15px; } .site-wrapper { margin: 0; box-shadow: none; padding-top: 80px; } .site-header { padding: 8px 12px; min-height: 60px; flex-direction: row; justify-content: flex-start; background: #ffffff !important; position: fixed !important; top: 0; left: 0; width: 100%; max-width: 100%; z-index: 999; overflow: hidden; box-sizing: border-box; } .site-header.sticky { min-height: 50px; padding: 8px 16px; } .site-header.sticky .header-logo img { max-height: 45px; } .site-wrapper.has-sticky-header { padding-top: 80px; } .mobile-menu-toggle { display: flex !important; order: 2; margin-left: auto !important; flex-shrink: 0; } .mobile-menu-toggle .bar { background: #0077C8; } .header-logo { order: 1; text-align: left; max-width: calc(100% - 60px); flex-shrink: 1; min-width: 0; } .header-logo img { max-height: 70px; height: auto; max-width: 100%; } .banner_header { display: none; } .headertitle { display: none; } .site-nav { display: none; } .site-main { flex-direction: column; padding: 10px; gap: 10px; } .sidebar-left { display: none; } .content-area { width: 100%; order: -1; } .sidebar-right { width: 100% !important; display: flex !important; flex-wrap: wrap; gap: 10px; } .sidebar-right > .block-card { width: 100% !important; margin-bottom: 0 !important; min-width: 0; display: flex; flex-direction: column; } .sidebar-right > .block-card .block-body { flex-grow: 1; } .sidebar-right > .block-card .block-footer { margin-top: auto; } .sidebar-right .block-login, .sidebar-right .block-admin, .sidebar-right .block-twitter { display: none; } .sidebar-right .block-search { width: 100% !important; order: -1; } .sidebar-right > .block-card:not(.block-search) { width: calc(50% - 5px) !important; flex: 0 0 calc(50% - 5px); } .sidebar-right .block-card .block-body + .block-body:not(:nth-last-child(2)) { display: none; } input[type="text"], input[type="email"], input[type="password"], textarea, select { max-width: 100%; font-size: 16px; } table { display: block; overflow-x: auto; } } input, textarea, select, button { font-size: 16px; } @media (max-width: 479px) { .headertitle { font-size: 18px; } .headerslogan { font-size: 11px; } .site-footer { padding: 8px 10px; font-size: 12px; min-height: auto; } } .tab-container { margin: 20px 0; border: 1px solid #ddd; border-radius: 4px; } .tab-buttons { display: flex; border-bottom: 1px solid #ddd; } .tab-button { padding: 10px 20px; border: none; border-radius: 4px 4px 0 0; cursor: pointer; } .tab-button.active { color: #fff; } .tab-button.inactive { background: #e0e0e0; color: #333; } .tab-content { padding: 20px; } .overview-item { display: flex; gap: 20px; align-items: flex-start; padding: 15px; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 10px; background: #fff; } .overview-item h3 { margin: 0 0 10px 0; color: #333; } .overview-item p { margin: 5px 0; color: #666; } .overview-item img { max-width: 100%; border: 1px solid #ddd; border-radius: 4px; }