/** * Styles for the base template + styles applied site-wide. * We have Bootstrap, so these styles come on top of that. */ :root { --dark-base: #913c0e; --dark-dark1: #6d2d0b; --dark-dark2: #491e07; --dark-light1: #b54b11; --dark-light2: #d95a15; --light-base: #e3d7ae; --light-light1: #f0ecd4; --light-dark1: #d6c488; --light-dark2: #c9b162; --red: #d71532; --red-dark: #910e22; --highlight: #E39941; --yellow-dark1: #d7bb15; --yellow-dark2: #a99310; --yellow: #edd64b; --green: #0e913c; --blue: #0e6391; --blue-dark2: #07394b; --grey: #544e4b; --background-color-primary: var(--light-base); --background-color-secondary: #913c0e; /* From old site, average color of left menu bg image (menu_hatterfa2.jpg) */ --text-color-primary: black; /*var(--dark-dark2);*/ --text-color-secondary: #e3d7ae; --dark-light0: #A75D27; --bs-primary-main: /*#096046*/ 9, 96, 70; --bs-primary-border: /*var(--bs-primary-main)*/ /*#096046*/ 9, 96, 70; --bs-primary-hover-background: /*darken(--bs-primary-main, 7.5%)*/ /*#063f2e*/ 6, 63, 46; --bs-primary-hover-border: /*darken(--bs-primary-border, 10%)*/ /*#053124*/ 5, 49, 36; --bs-primary-active-background: /*darken(--bs-primary-main, 10%)*/ /*#053124*/ 5, 49, 36; --bs-primary-active-border: /*darken(--bs-primary-border, 12.5%)*/ /*#04281d*/ 4, 40, 29; } .left-decor { max-width: 68px; min-width: 68px; width: 68px; background: url('../images/harkaly.png'); background-size: 64px; background-repeat: no-repeat repeat; padding: 0px; margin: 100px 0px 0px 0px; } .right-decor { max-width: 68px; min-width: 68px; width: 68px; background: url('../images/harkaly2.png'); background-size: 64px; background-repeat: no-repeat repeat; padding: 0px; margin: 100px 0px 0px 4px; } @media (max-width: 1200px) { .left-decor { display: none; visibility: collapse; } .right-decor { display: none; visibility: collapse; } } @media (min-width: 1200px) { .container { max-width: 1200px; } } .x-bg-secondary { background-color: var(--background-color-secondary); color: var(--text-color-secondary); } .x-bg-dark1 { background-color: var(--dark-dark1); } .x-bg-dark2 { background-color: var(--dark-dark2); } .x-overlay1 { background-color: rgba(0, 0, 0, 0.4); } .x-overlay2 { background-color: rgba(0, 0, 0, 0.5); } html { /* Static, full-size background. Src: https://css-tricks.com/perfect-full-page-background-image/#article-header-id-0 */ background: url('../images/erdov.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } body { /* Bootstrap/reboot sets it to white, but then it trumps the background image of */ background-color: unset; line-height: 1.25; } p { margin-bottom: 5px; } #main_site { /* Has similar effect as Bootstrap/reboot's setting on , except this is not 100% wide */ /* background-color: var(--background-color-secondary); /* Copied from old site. If needed somewhere else, make it a variable! */ background-image: linear-gradient(to right, var(--dark-base), var(--dark-light0)), url('../images/menu_bck.jpg'); background-color: unset; background-blend-mode: multiply; box-shadow: -2px 2px 1px 2px var(--dark-base), 2px 2px 1px 2px var(--dark-light0); background-size: cover, 500px 500px; margin-bottom: 20px; padding-left: 0px; padding-right: 0px; } .main-content { background-color: var(--background-color-primary); color: var(--text-color-primary); margin: 0px 0px 0px 0px; width: auto; box-shadow: 0px 5px 3px 3px var(--dark-dark1); padding: 25px; } .page-footer { margin-bottom: 10px; margin-top: 10px; margin-right: 5px; } .page-header { height: 180px; } .logo-image { max-width: 64px; max-height: 64px; } .logo-image-big { max-width: 110px; max-height: 100px; } .left-menu { min-width: 200px; width: 200px; height: 100px; background-color: rgba(0, 0, 0, 0.2); border-top: 1px solid var(--background-color-primary); border-bottom: 1px solid var(--background-color-primary); vertical-align: text-top; padding: 0px; } .right-content { padding: 0px; vertical-align: text-top; } .left-menu a { color: var(--light-base); text-decoration: none; } .left-menu .item { padding: 5px 5px 5px 5px; } .left-menu .item:hover { background-image: linear-gradient(to right, var(--dark-light1), var(--highlight)); } #left-menu-container { margin: 0px; padding: 0px; } .main-table { vertical-align: top; border-spacing: 50em; max-width: 100% !important; table-layout: fixed; } .navbar { background-color: rgba(0, 0, 0, 0.2); } .navbar-toggler.collapsed { margin-top: -80px; background-color: var(--dark-dark2); color: var(--text-color-secondary); outline: 0; } .navbar-toggler { margin-top: -80px; background-color: var(--light-light1); color: var(--text-color-primary); outline: 0; } /* adds some margin below the link sets */ .navbar .dropdown-menu div[class*="col"] { margin-bottom: 1rem; } .navbar .dropdown-menu { margin-top: 5px; border: none; background-color: var(--light-light1) !important; } .mmenu.category { font-weight: bold; text-transform: uppercase; color: black } .mmenu.item { color: var(--text-color-primary) } .mmenu.item a { color: var(--text-color-primary) } .nav-link { font-weight: bold; color: var(--text-color-secondary) } .nav-link:hover { color: #fff } .nav-link:focus { color: #fff } .extra-menu-item a { color: var(--text-color-secondary) !important; margin-right: 4px; } .extra-home a { color: var(--light-dark2) !important; } .extra-menu-item, .extra-home { display: none; margin-left: 5px; font-style: italic; } .noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } .form-group.required label:after { content: "*"; color: red; } @media screen and (min-width: 992px) { .extra-menu-item { float: right; margin-top: -20px; display: block; } .extra-home { float: left; margin-top: -20px; display: block; } /* remove the padding from the navbar so the dropdown hover state is not broken */ .navbar { padding: 0px; padding-left: 1px; } .navbar-nav { float: left; margin: 0; } .navbar .nav-item { padding: .5rem .5rem; } .navbar .dropdown { position: static; } .navbar .dropdown-menu { width: 100%; left: 0; right: 0; top: 45px; display: block; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.3s linear; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.3); border: 1px solid rgba(0,0,0,.45); border-top: 0; background-color: var(--light-light1); border-radius: 0px 0px 4px 4px; padding-top: 15px; } .navbar .dropdown .dropdown-menu { visibility: hidden; opacity: 0; transition: opacity 0.1s ease-in-out 0.2s, visibility 0.3s; -webkit-transition: opacity 0.1s ease-in-out 0.2s, visibility 0.3s; } /* shows the dropdown menu on hover */ .navbar .dropdown:hover .dropdown-menu, .navbar .dropdown .dropdown-menu:hover { display: block; visibility: visible; opacity: 1; transition: visibility 0s, opacity 0.3s ease-in-out; -webkit-transition: visibility 0s, opacity 0.3s ease-in-out; } .navbar .dropdown:hover { background: var(--light-light1); } .navbar .dropdown:hover .nav-link { color: black } .navbar .dropdown:not(:hover) .nav-link { color: var(--text-color-secondary); } } h1, h2 { font-size: 1.75rem; } .pointer-cursor { cursor: pointer; }