/* Theme Name: Dokumenthantering Description: Ett dokumenthanteringssystem för bland annat rutiner och policydokument. Version: 1.0 Author: Tobias Hassgård Author URI: https://hillsidepeak.com/ Copyright: Svedala kommun */ /* ================================ INDEX: 01 Defaults 02 Commons 03 Navigations 04 Layouts and contents 05 Misc 06 Overriding styles ================================ ------------------------------------------------------------------------------------------------------------- 01 Defaults ------------------------------------------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ /*** Imports ***/ @import url('css/reset.css'); @import url('css/fonts/lato.css'); @import url('css/color-palette.css'); :root { color-scheme:light dark; } :root { --filter-lighten: invert(98%) sepia(14%) saturate(184%) hue-rotate(233deg) brightness(115%) contrast(73%); } /*** Elements ***/ input, button, .button, select, textarea { font-family:'Lato', sans-serif; font-weight:400; font-size:1rem; text-decoration:none; width:100%; border:1px solid; padding:0.75rem 1.25rem; margin-top:0.5rem; box-sizing:border-box; } button, button[type="reset"], input[type="submit"], .button, input[type="reset"] { font-size:0.75rem; line-height:normal; text-transform:uppercase; text-decoration:none; letter-spacing:1px; border-radius:2rem; position:relative; -webkit-appearance:none; appearance:none; -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; -ms-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; } .button { display:flex; flex:1 1 content; justify-content:center; align-items:center; width:auto; font-size:0.625rem; letter-spacing:1px; border-radius:3px; margin:0; min-width:2.625rem; min-height:2.625rem; text-decoration:none; } input[type="submit"], .button.submit { border:1px solid !important; } input[disabled], button[disabled] { cursor:not-allowed; } input[disabled]:hover, input[disabled]:active, input[disabled]:focus { opacity:0.8; } *[data-button-role="favorite"]::before { content:'\2606' !important; font-size:1.125rem; } *[data-button-role="favorite"][aria-pressed="true"]::before { content:'\2605' !important; } *[data-button-role="back"]::before { content:'\21B2' !important; font-size:1.125rem; display:inline-block; width:1rem; height:1rem; transform:rotate(90deg); } *[data-button-role="prev"]::before { display:inline-block; width:0.95rem; height:0.95rem; content:url('media/icons/iconArrowcircle.svg'); background-size:cover; position:absolute; left:1.25rem; top:0.65rem; transform:rotate(180deg); } *[data-button-role="edit"]::before { content:'\22EE' !important; font-size:1.125rem; } *[data-button-role="save"]::before { content:'\1F5AB' !important; font-size:1.125rem; } *[data-button-role="new"]::before { content:'\002B' !important; } *[data-button-role="cancel"]::before{ content:'\2A2F' !important; font-size:1.125rem; } *[data-button-role="close"] { width:0; height:0; padding:1rem; font-size:1rem; } *[data-button-role="close"]::before { content:'\2A2F' !important; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); } *[aria-expanded="false"].iconAfter::after, *[aria-expanded="true"].iconAfter::after { width:1rem; height:1rem; } *[aria-expanded="false"].iconAfter::after, *[aria-selected="false"].iconAfter::after { content:'+'; } *[aria-expanded="true"].iconAfter::after, *[aria-selected="true"].iconAfter::after { content:'-'; } *[data-editor-tag="strong"] { font-weight:700; } *[data-editor-tag="u"] { text-decoration:underline; } *[data-editor-tag="i"] { font-style:italic; } *[contenteditable="true"] { border: 1px dotted; } select { display:block; padding:0.75rem 4.25rem 0.75rem 1.25rem; cursor:pointer; line-height:normal; appearance:none; -webkit-appearance:none; overflow:hidden; background:url('media/icons/dropdownArrow.svg') no-repeat 100% 50%; } label { display:block; } *[data-required="true"]::after { content:'*'; margin-left:0.25rem; } img { transition:transform 300ms; } hr { margin:1.75rem 0; } article, .article { line-height:1.5; } article img, .article img { padding:0.25rem; } article ul, article ol, .article ul, .article ol { margin:0.5rem 0; } article ul li, .article ul li { margin:0 0 0.25em 2.5em; list-style-type:inherit; } article ol li, .article ol li { margin:0 0 0.25em 2.5em; list-style-type:inherit; } article ol li ul, .article ol li ul { margin-bottom:1em; } article ul.dashlist li, .article ul.dashlist li { list-style-type:none; } article ul.dashlist li::before, .article ul.dashlist li::before { display:inline-block; content:'-'; width:1rem; margin-left:-1rem; } article table th, article td, .article table th, .article td { padding:0.5rem 1rem; } footer ul li { margin-left:2rem; } dialog { width:40rem; max-width:90%; flex-direction:column; row-gap:1rem; box-sizing:border-box; padding:0; border:1px solid; box-shadow:0 3px 7px rgba(0,0,0,0.05); } dialog[open] { display:flex; } dialog button[data-button-role="close"] { position:absolute; top:-1rem; right:0; margin-top:0; } dialog label { text-align:left; } dialog .description { text-align:left; } dialog textarea { min-height:7rem; } dialog input[type="submit"] { margin-top:auto; } *[role="note"], *[role="alert"], .errorMessage, .successMessage, .infoMessage, .warningMessage { border-style:solid; border-width:1px; border-radius:0; padding:0.5rem 0.75rem; box-sizing:border-box; text-align:left; } .group:after { display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ } /*** Typography ***/ body { font-family:'Lato', sans-serif; background-image:none; background-repeat:repeat; background-size:cover; background-attachment:fixed; background-position:center; } h1, h2, h3, h4, h5, h6 { font-family:'Lato', serif; font-weight:700; } h1 { font-size:2rem; font-weight:400; text-transform:none; text-align:left; } h2 { font-size:1.5rem; margin-bottom:0.5rem; } h3 { font-size:1.25rem; margin:0.5rem 0; } h4 { font-family:'Lato', sans-serif; font-size:1rem; font-weight:700; font-style:italic; margin:0.5em auto 0 auto; } blockquote { padding:1rem 1.5rem; margin:0; } a { text-decoration:underline; font-weight:normal; display:inline-block; -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; -ms-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; } a:focus, button:focus { outline:3px solid; outline-offset:0px; } a.button:focus, button:focus, #sideNav a:focus { outline-offset:-3px; } a[target="_blank"]:not(:empty)::after, .anchor::after, a[href$=".pdf"]::after, a[href$=".pptx"]::after, a[href$=".docx"]::after, a[href$=".xlsx"]::after { content:''; display:inline-block; position:relative; width:0.625rem; height:0.625rem; background-size:0.625rem; margin-right:0.625rem; left:0.25rem; top:0; } a[target="_blank"]:not(:empty)::after { mask:url('media/icons/iconNewWindow.svg'); mask-image:url('media/icons/iconNewWindow.svg'); } .anchor::after { mask:url('media/icons/iconAnchorLink.svg'); mask-image:url('media/icons/iconAnchorLink.svg'); } a[href$=".pdf"]::after { mask:url('media/icons/iconPdf_simple.svg'); mask-image:url('media/icons/iconPdf_simple.svg'); width:0.875rem; height:0.875rem; background-size:0.875rem; } a[href$=".pptx"]::after { background-image:url('media/icons/iconPowerpoint.svg'); width:1rem; height:1rem; background-size:cover; } a[href$=".docx"]::after { background-image:url('media/icons/iconWord.svg'); width:1rem; height:1rem; background-size:cover; } a[href$=".xlsx"]::after { background-image:url('media/icons/iconExcel.svg'); width:1rem; height:1rem; background-size:cover; } ::backdrop { opacity:1; } /* ---------------------------------------------------------------------------------------------------------- 02 Commons ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ /*** Animations ***/ @keyframes fadein { from { opacity:0; } to { opacity:1; } } @keyframes fadeinUp { from { transform:translate3d(0,40px,0); } to { transform:translate3d(0,0,0); opacity:1; } } @keyframes fadeinLeft { from { transform:translate3d(100px,0,0); opacity:0; } to { transform:translate3d(0,0,0); opacity:1; } } @keyframes spin { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } } *[data-animation="fade-up"] { transition-duration:1s; transition-timing-function:ease; transition-property:opacity, transform; opacity:0; transform:translate3d(0,100px,0); } *[data-animation="fade-up"].animated { opacity:1; transform:translateZ(0); } /*** Joint elements ***/ main, #mainHeaderCover { -webkit-animation:fadein 1s; -moz-animation:fadein 1s; -o-animation:fadein 1s; -ms-animation:fadein 1s; animation:fadein 1s; } .sectionRow, .section, article, .article { width:100%; display:block; height:auto; margin:auto; box-sizing:border-box; } .wp-caption-text { margin:0; padding:0; position:relative; top:-1.25em; left:1.25em; font-size:0.875em; font-style:italic; } a img:hover, article img:hover, .article img:hover { transform:scale(1.05); } header img:hover, footer img:hover { transform:none; } .wp-video, .wp-video-shortcode { width:auto !important; max-width:100%; height:auto !important; } .mejs-mediaelement { position:relative !important; } .mejs-layers { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:6.25em; height:6.25em; } .section { max-width:87.5rem; } footer .content { text-align:left; line-height:1.5; display:flex; flex-wrap:wrap; justify-content:space-between; align-content:flex-start; align-items:stretch; } /*** Common classes ***/ .cover { min-height:12.5em; background-size:cover; background-position:center; } .ingress { font-size:1.25rem; } .alignleft { float:left; } .alignright { float:right; } .clear { clear:both; margin:0; padding:0; } .fixed { position:fixed !important; } .visible { visibility:visible !important; opacity:1; transition:opacity 250ms linear; } .hidden { visibility:hidden; opacity:0; transition:visibility 0s 250ms, opacity 250ms linear; } #backToTop.hidden { display:block !important; } /* Fix because some addons or external classes might interfere */ .home .fixed { position:absolute !important; } /* Style fix for headerbanner on homepage */ .loadingSpinner { border:10px solid; border-top:10px solid; border-radius:50%; width:3.75rem; height:3.75rem; animation:spin 1s linear infinite; } button .loadingSpinner { width:1em; height:1em; border-width:2px; display:inline-block; margin-right:0.5rem; } .postMessage { width:100%; margin:1rem 0; padding:1rem; font-style:italic; border-left:3px solid; } /*** Icons ***/ .iconBefore { display:flex; align-items:center; column-gap:0.25rem; } .iconBefore::before, .iconAfter::after { display:flex; align-items:center; justify-content:center; content:''; width:1rem; height:1rem; min-width:1rem; min-height:1rem; position:relative; line-height:normal; vertical-align:text-bottom; background-repeat:no-repeat; background-position:center; background-size:cover; } .iconBell::before { mask:url('media/icons/iconBell.svg'); mask-image:url('media/icons/iconBell.svg'); } .logged-in .iconBell::before { mask:url('media/icons/iconBellActive.svg'); mask-image:url('media/icons/iconBellActive.svg'); } .iconBug::before { mask:url('media/icons/iconBug.svg'); mask-image:url('media/icons/iconBug.svg'); } .iconProfile::before { mask:url('media/icons/iconProfile.svg'); mask-image:url('media/icons/iconProfile.svg'); } .logged-in .iconProfile::before { mask:url('media/icons/iconProfileActive.svg'); mask-image:url('media/icons/iconProfileActive.svg'); } .iconDocument::before { mask:url('media/icons/iconDocument.svg'); mask-image:url('media/icons/iconDocument.svg'); } .iconProtected::before { mask:url('media/icons/iconShield.svg'); mask-image:url('media/icons/iconShield.svg'); } .iconLocked::before { mask:url('media/icons/iconLocked.svg'); mask-image:url('media/icons/iconLocked.svg'); } .iconHelp { mask:url('media/icons/iconHelp.svg'); mask-image:url('media/icons/iconHelp.svg'); cursor:help; } .iconCategory::before { mask:url('media/icons/iconCategory.svg'); mask-image:url('media/icons/iconCategory.svg'); } .iconTableOfContents::before { mask:url('media/icons/iconTOC.svg'); mask-image:url('media/icons/iconTOC.svg'); } .iconHierachy::before { mask:url('media/icons/iconHierachy.svg'); mask-image:url('media/icons/iconHierachy.svg'); } /* ---------------------------------------------------------------------------------------------------------- 03 Navigations --------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ nav { font-size:1rem; font-weight:300; text-align:center; } #sideNav { font-size:0.875rem; width:15.625rem; height:100%; padding:0 0 1.875rem 0; position:fixed; z-index:100; top:0; left:0; bottom:0; overflow:hidden auto; text-align:left; margin-top:0; display:flex; flex-direction:column; row-gap:2rem; transition:none; } #sideNav .logo { width:5rem; max-width:80%; height:100%; display:flex; } #sideNav nav { text-align:left; margin:0 auto; } #sideNav header { font-size:0.875rem; font-weight:400; padding:0 1.25rem; margin-bottom:1rem; text-transform:uppercase; } #sideNav nav ul li { list-style-type:none; text-align:left; } #sideNav nav ul li a { display:flex; justify-content:flex-start; column-gap:1.25rem; align-items:center; width:100%; font-size:0.875rem; padding:0.75rem 1.75rem; text-decoration:none; position:relative; box-sizing:border-box; transition:none; } #sideNav nav ul li a span { flex:1 1 auto; } #sideNav .iconBefore { padding-left:0 !important; } #sideNav .iconBefore::before { display:none; } #sideNav .iconBefore a::before { flex:0 0 auto; display:block; content:''; width:1.75em; height:1.75em; } #sideNav .iconHome a::before { mask:url('media/icons/iconHome.svg'); mask-image:url('media/icons/iconHome.svg'); } #sideNav .iconSearch a::before { mask:url('media/icons/iconSearch.svg'); mask-image:url('media/icons/iconSearch.svg'); } /* #sideNav .iconFavorites { display:none; } .logged-in #sideNav .iconFavorites { display:list-item; } */ #sideNav .iconMyStaff a::before { mask:url('media/icons/iconMyStaff.svg'); mask-image:url('media/icons/iconMyStaff.svg'); } #sideNav .iconMyUnit a::before { mask:url('media/icons/iconMyUnit.svg'); -mask-image:url('media/icons/iconMyUnit.svg'); } #sideNav .iconFavorites a::before { mask:url('media/icons/iconFavorites.svg'); mask-image:url('media/icons/iconFavorites.svg'); } #sideNav .iconManagement a::before { mask:url('media/icons/iconManagement.svg'); mask-image:url('media/icons/iconManagement.svg'); } #sideNav .iconEducation a::before { mask:url('media/icons/iconEducation.svg'); mask-image:url('media/icons/iconEducation.svg'); } #sideNav .iconCulture a::before { mask:url('media/icons/iconCulture.svg'); mask-image:url('media/icons/iconCulture.svg'); } #sideNav .iconSocialcare a::before { mask:url('media/icons/iconSocialcare.svg'); mask-image:url('media/icons/iconSocialcare.svg'); } #sideNav .iconTechnical a::before { mask:url('media/icons/iconTechnical.svg'); mask-image:url('media/icons/iconTechnical.svg'); } #sideNav .iconEnvironment a::before{ mask:url('media/icons/iconEnvironment.svg'); mask-image:url('media/icons/iconEnvironment.svg'); } #sideNav[data-collapsed="true"] { width:5rem; } #sideNav[data-collapsed="false"] { width:15.625rem; } #sideNav[data-collapsed="true"] header { padding:0; margin-bottom:0.625rem; text-align:center; font-size:0.625rem; } #sideNav[data-collapsed="true"] + #mainWrapper { width:calc(100% - 5rem);/*Width of sideNav when minimized*/ } #sideNav[data-collapsed="false"] + #mainWrapper { width:calc(100% - 15.625rem);/*Width of sideNav when minimized*/ } #headerBanner { width:100%; height:auto; display:flex; border-bottom:1px solid; box-shadow:0 3px 7px rgba(0,0,0,0.05); z-index:10; } #headerBanner #quick_search_form { display:flex; width:100%; padding:0 2rem; } #headerBanner #quick_search_form button { margin:0; flex:0 0 2rem; border-radius:0.25rem 0 0 0.25rem; z-index:2; font-size:0.625rem; min-width:auto; min-height:auto; } #headerBanner #quick_search_form input, #headerBanner #quick_search_form select, #headerBanner #quick_search_form *[role="separator"] { margin:0; font-size:0.875rem; z-index:2; } #headerBanner #quick_search_form input { min-width:10rem; border-width:1px 1px 1px 0; } #headerBanner #quick_search_form *[role="separator"] { padding:0.75rem 0.5rem; border-style:solid; border-width:1px 0; } #headerBanner #quick_search_form select { flex:1 1 10rem; min-width:fit-content; } #headerBanner #quick_search_form span { font-size:0.75rem; margin:auto; } #headerBanner #quick_search_form .overlay { position:fixed; top:0; bottom:0; left:0; right:0; width:100%; height:100%; background-color:rgba(0,0,0,0.4); } #headerBanner #quick_search_form .overlay[aria-hidden="false"] { z-index:1; opacity:1; visibility:visible; transition:opacity 200ms ease-in-out; } #headerBanner #quick_search_form .overlay[aria-hidden="true"] { z-index:-1000; opacity:0; visibility:hidden; } #userControls { display:flex; justify-content:flex-end; align-items:stretch; margin:0; } #logoBox { height:auto; padding:1rem; position:absolute; left:0; top:0; border:solid; border-width:0 1px 1px 1px; } .logo { width:auto; text-align:center; display:block; position:relative; margin:auto; } .logo img { width:100%; max-width:100%; height:auto; max-height:100%; } #siteLogo { height:4.375em; } #menuTop ul, #menuTop ul li { display:inline-block; } #menuTop ul li a { display:block; font-size:0.75rem; padding:1.75rem; border-left:1px solid; text-decoration:none; text-transform:uppercase; line-height:1; } #headerBanner .button { display:block; border:solid; border-width:0 0 0 1px; position:relative; border-radius:0; padding:1.25rem 1.75rem; transition:none; } #headerBanner > .button { border-width:0 1px 0 0; } #headerBanner #toggleBtnMenu { flex:0 1 content; font-size:0.75rem; text-indent:1.75rem; padding:1.25rem 3rem 1.25rem 1.75rem; } #headerBanner #toggleBtnMenu .icon { position:absolute; left:25%; top:50%; transform:translate(-25%, 0); } #headerBanner #toggleBtnMenu .icon, #headerBanner #toggleBtnMenu .icon::before, #headerBanner #toggleBtnMenu .icon::after { content:''; width:1.25rem; height:1px; display:block; } #headerBanner #toggleBtnMenu .icon::before { position:relative; top:-5px; transform:rotate(0deg); transition:all 0.2s ease; } #headerBanner #toggleBtnMenu .icon::after { position:relative; top:4px; transform:rotate(0deg); transition:all 0.2s ease; } #headerBanner .iconBefore { padding:1.25rem 1.75rem !important; } #headerBanner .iconBefore::before { width:1.75rem; height:1.75rem; } #headerBanner #toggleBtnNotifications .indicator { font-size:0.75rem; text-indent:0; line-height:normal; width:auto; min-width:1rem; height:1rem; padding:0.125rem; border-radius:50%; position:absolute; top:20%; right:25%; } #userControls section { width:auto; min-width:20rem; position:absolute; top:100%; right:0; left:auto; transition:all 150ms; border:1px solid; text-align:left; } #userControls .row { padding:1rem; display:block; box-sizing:border-box; border-top:1px solid; } #userControls header { display:grid !important; grid-template-columns:10% calc(90% - 1rem); column-gap:1rem; justify-content:start; border-top:0 !important; } #userControls header > div { margin:auto; margin-left:0; } #userControls header h1 { font-size:1rem !important; font-weight:700; margin-bottom:0; position:relative; } #userControls header h2 { font-size:1rem !important; font-weight:400; margin-bottom:0.25rem; } #userControls li { margin-left:1rem; } #userControls li a { padding:0.125rem 0; } #userControls > button { font-size:0; } #userControls dialog header { grid-template-columns:2.5rem calc(100% - 2.5rem - 1rem - 1px); padding:1rem; } #userControls dialog header > div { width:100%; } #userControls dialog form { } #profileMenu header { grid-template-columns:15% calc(85% - 1rem); } #profileMenu header h1 { padding-bottom:0.25rem; top:0; } .userControlMenu[aria-hidden="false"] { opacity:100%; z-index:5; visibility:visible; } .userControlMenu[aria-hidden="true"] { opacity:0; z-index:-1; visibility:hidden; } #headerBanner .userControlMenu .button { display:flex; width:100%; padding:0.75rem; font-size:0.75rem; font-weight:300; border:0; } button[role="switch"] { width:3.5rem; padding:0.25rem; transition:all 200ms ease-in-out; } button[role="switch"] span { display:block; width:1rem; height:1rem; border-radius:50%; transition:all 100ms ease-in-out; } button[role="switch"][aria-checked="false"] span { margin:0 auto 0 0; } button[role="switch"][aria-checked="true"] span { margin:0 0 0 auto; outline:5px solid; outline-offset:-10px; } .toggleBtnIcon { } .toggleBtnText { padding:1.75rem; display:block; } #breadcrumbs { width:100%; font-size:0.875em; text-align:left; } #breadcrumbs span { font-weight:normal; word-break:break-word; hyphens:auto; } #breadcrumbs .separator { margin:auto 0.25rem; } #breadcrumbsLeveler { display:inline-block; transform:rotate(180deg); font-size:2.5rem; position:absolute; top:-0.75rem; } #breadcrumbs > a:first-of-type { padding-left:2rem; } .pagination .nav-links { display:flex; justify-content:flex-start; flex-wrap:wrap; text-align:center; } .pagination .page-numbers { flex:0 0 1rem; font-size:0.875rem; border:1px solid; padding:0.675rem; margin:0.25rem; } .pagination .current { } .pagination a { text-decoration:none; } .pagination h2, .pagination label { font-size:1rem; margin-bottom:0.25rem; } .pagination select { display:inline-block; width:auto; } .tablePageControllers { width:100%; display:flex; justify-content:flex-end; column-gap:2rem; row-gap:2rem; margin-top:3rem; } .tablePageControllers nav { margin:0; } .tablePageControllers .selectResultsOrder, .tablePageControllers .selectRowsPerPage { flex:0 0 1rem; font-size:0.875rem; padding:0.675rem; margin:0.25rem; } #tablePageControllers_top { margin:0 0 1rem 0; padding:0; column-gap:4rem; } #tablePageControllers_bottom { } #table_page_navigation { text-align:left; } .tableSorting { display:flex; justify-content:flex-end; margin-left:0; } .tableOrderResults, .tableRowsPerPage { text-align:right; flex:0; } #menuCloseBtnMain { width:0; height:0; padding:1rem; position:absolute; top:3rem; right:1rem; margin:auto; } #menuCloseBtnMain::after{ content:'\2715'; display:block; position:absolute; left:52.5%; top:52.5%; transform:translate(-50%, -50%); } #mainMenu { width:31.25rem; max-width:90%; height:100vh; overflow-y:auto; position:fixed; top:0; right:0; padding:2rem; transition:all 500ms; border-left:1px solid; } #mainMenu[aria-hidden="true"] { z-index:4; transform:translateX(100%); } #mainMenu[aria-hidden="false"] { z-index:4; transform:translateX(0%); } #mainMenu .logo { height:6rem; margin:1rem auto 3rem auto; } #mainMenu .logo:focus, #mainNav a:focus { outline:1px dashed; } #mainNav { text-align:left; } #mainNav ul:first-child { } #mainNav li { list-style-type:none; border-bottom:1px solid; } #mainNav li a { display:block; padding:0.75rem; text-transform:uppercase; letter-spacing:1px; font-size:0.875rem; text-decoration:none; } #mainNav li li a:hover { text-decoration:underline !important; } #mainNav li a:first-child:nth-last-child(2) { } #mainNav ul li ul { margin-top:1em; } #mainNav ul li ul li ul { margin:0 0 0 1em; } #mainNav ul li ul li ul li a::before { content:'-'; margin-right:0.25em; } #mainNav li.current-menu-item > a { font-weight:700 !important; } #mainNav ul.sub-menu li a { display:block; font-size:1em; text-decoration:none; padding:0.25em 0; font-weight:300; text-transform:none; border:0; } #subMenu { margin:auto 5em auto 1em; } #subMenu ul { display:block; text-align:right; } .home #subMenu ul { float:right; } #subMenu li { display:inline-block; } #subMenu li a { display:block; padding:0.75em 1.5em; } .home #subMenu li a { padding:1.25em 1.5em; } #subMenu a { text-decoration:none; } #subMenu a:hover { text-decoration:underline; } #customBtnNav { margin:-3rem auto 3rem auto; z-index:1; text-align:left; padding:0 5rem; } #customBtnNav li { display:inline-block; } #customBtnNav .button { margin-right:1rem; text-align:center; } #gotoMain { position:absolute; top:0; left:-100vw; z-index:9999; padding:1em; border:1px solid; } #gotoMain:focus { left:10%; top:3em; } #submenu { margin-bottom:2em; text-align:left; } #submenu a.button { margin:0 0.5em 0.5em 0; } #submenu a.button:last-child { margin-right:0; } #backToTop { visibility:hidden; font-size:1rem; position:fixed; bottom:2em; right:1em; z-index:3; padding:1em; border:1px solid; text-decoration:none; box-shadow:0 3px 7px rgba(0,0,0,0.15); } #backToTop::after { display:none; } /*** Google Translate ***/ #google_translate_wrapper { display:inline-block; position:absolute; top:-11em; right:0; z-index:9999; } .goog-te-banner-frame { display:none !important; } #gTranslate { display:block; width:1.625em; height:0.8125em; position:absolute; top:-8em; right:0.5em; z-index:9999; } .countryFlag { width:100%; height:auto; } /* ---------------------------------------------------------------------------------------------------------- 04 Layouts and contents ------------------------------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ main { text-align:left; } #mainWrapper { width:calc(100% - 15.625rem);/*Width of sideNav*/ height:100%; margin-right:0; transition:none; } .row { display:flex; width:100%; padding:2.5rem; row-gap:1rem; } .column { flex:1 1 auto; text-align:left; vertical-align:top; margin:0; max-width:100%; } .box { display:flex; flex:1 1 20%; flex-direction:column; row-gap:0.25rem; padding:1.5rem 2rem; border:1px solid; margin:0; text-align:center; } #pageHeader { display:flex; } #pageHeader > .row { column-gap:1rem; row-gap:1rem; padding:1.5rem 2.5rem; } #pageHeader .column:first-of-type { display:flex; flex:1 1 70%; flex-direction:column; row-gap:0.5rem; } #pageHeader .column:last-of-type { display:flex; justify-content:flex-end; align-items:flex-start; flex:1 1 30%; flex-wrap:wrap; row-gap:0.25rem; column-gap:0.25rem; text-align:right; } #pageHeader .heading { display:flex; align-items:center; font-size:1.25rem; font-weight:300; text-transform:uppercase; word-wrap:break-word; word-break:break-word; hyphens:auto; } #pageHeader .button { flex:0 1 content; } main aside { display:block; font-size:0.9375rem; background-color:transparent; border:0; z-index:1; } main aside .row { flex:1 1 auto; margin:0; padding:0 2.5rem; } main aside .row:first-of-type { z-index:2; } #metaInformation { display:flex; padding:0 2.5rem; border:solid; border-width:1px 0; } main aside .column { display:flex; flex-direction:column; flex-grow:0; justify-content:center; transition:background-color 250ms; padding:0; border:solid; border-width:0 0 0 1px; min-height:0.75rem; } main aside > .row > .column:last-of-type { padding:0.75rem 1.5rem; } main aside .button { font-size:0.875rem; letter-spacing:0; text-transform:none; font-weight:700; border:0; } main aside header .button { border-radius:0; } main aside #toggleBtnFilters::before { content:'\23DA'; } main aside #toggleBtnSearch::before { content:'\26B2'; scale:1.5; width:1rem; height:1rem; transform:rotate(-45deg); } #toggleBtnColumns::before { width:1em; height:1em; margin-right:0.125rem; } main aside #toggleBtnMeta[aria-expanded="false"]::after { content:'+'; } main aside #toggleBtnMeta[aria-expanded="true"]::after { content:'-'; } main aside #toggleBtnEdit::before { content:'\2710'; transform:rotate(180deg); } main aside #toggleBtnEdit[disabled]::before { content:'\26A0'; transform:none; } main aside #toggleBtnFavorites[aria-pressed="true"] { outline:1px solid; outline-offset:-5px; font-weight:normal; } .metaSectionContainer { flex-wrap:wrap; align-items:stretch; transform:none; transition:all 150ms ease 0s; border-bottom:1px solid; overflow-x:clip; } .metaSectionContainer[data-collapsed="false"] { visibility:visible; height:auto; opacity:1; padding-top:1.5rem; padding-bottom:1.5rem; } .metaSectionContainer[data-collapsed="true"] { visibility:hidden; height:0; opacity:0; border:0; } .metaSectionContainer .tableOrderResults, .metaSectionContainer .tableRowsPerPage { text-align:left; } .metaSectionContainer .tableOrderResults label, .metaSectionContainer .tableRowsPerPage label { margin-bottom:0; } .metaSectionContainer h2 { font-size:1rem; } .metaSectionContainer .row { padding:0; flex-wrap:wrap; column-gap:2rem; row-gap:0.75rem; } .metaSectionContainer .column { flex:0 1 auto; justify-content:flex-start; border:0; padding:0; } .metaSectionContainer .column section { margin:0; } .metaSectionContainer .box span { font-size:1.75rem; } .metaSectionContainer .box h2 { font-size:0.75rem; text-transform:uppercase; font-weight:400; margin:0; } .metaSectionContainer input { font-size:0.875rem; width:100%; min-width:15rem; line-height:1rem; box-sizing:border-box; } .metaSectionContainer button { margin-top:0.5rem; margin-left:0; } .metaSectionContainer button[type="submit"] { border-radius:0.25rem; } .metaSectionContainer select { font-size:0.875rem; line-height:1rem; } .metaSectionContainer[role="search"] .row { column-gap:1rem; } .metaSectionContainer[role="search"] .column:nth-child(2) { flex:0 1 25rem; } .buttonCollection { display:flex; flex-wrap:wrap; width:100%; justify-content:flex-start; column-gap:0.25rem; row-gap:0.25rem; } .buttonCollection .button { flex-grow:0; font-weight:normal; font-size:0.625rem; text-transform:uppercase; letter-spacing:1px; margin:0; } #searchSection.metaSectionContainer .row { column-gap:1.5rem; } #metaSection .column { row-gap:1rem; } #columnSettings { flex-direction:row; flex:1 1 auto; flex-wrap:wrap; column-gap:1.5rem; justify-content:flex-start; } #columnSettings input[type="checkbox"] { width:auto; min-width:auto; margin-right:0.5rem; } #editorButtons { margin-top:0.75rem; } #post_editor_style_buttons { position:fixed; z-index:9999; padding:1rem; border:solid; border-width:1px 0 0 0; bottom:0; left:0; justify-content:center; box-shadow: 0 -3px 7px rgba(0,0,0,0.1); } #post_editor_style_buttons *[data-button-role] { padding-left:1.25rem !important; } #post_editor_style_buttons *[data-button-role]::before { left:auto; font-size:1rem; } #pageContent.row { max-width:68.75rem; padding:2.5rem 2.5rem; flex-wrap:wrap; row-gap:2rem; } #pageContent.row.articlesTable { max-width:none; padding-bottom:4rem; overflow-x:auto; } article.row, .article.row { padding:2.5rem; flex-wrap:wrap; column-gap:2.5rem; overflow-y:hidden; border:1px solid; } article.row header, .article.row header { flex:0 1 100%; } article.row .column, .article.row .column { flex:1 1 20%; } article#section1.row, .article#section1.row { margin-top:auto; } table { width:100%; } table caption { visibility:hidden; height:0; } table th, table td { padding:1rem; position:relative; vertical-align:middle; } table tr { transition:all 150ms ease-in-out; } table tbody button { margin-top:auto; padding:0.625rem 1rem; font-size:0.625rem; width:auto; } table tbody .successMessage, table tbody .errorMessage { font-size:0.625rem; text-transform:uppercase; letter-spacing:1px; display:inline-block; } table[data-table-type="results"] { table-layout:auto; } table[data-table-type="results"] th, table[data-table-type="results"] td { max-width:10rem; white-space:nowrap; mask:linear-gradient(90deg, #000 60%, transparent); mask-image:linear-gradient(90deg, #000 60%, transparent); -webkit-mask-image:linear-gradient(90deg, #000 60%, transparent); } table[data-table-type="results"] tr:nth-child(even), table[data-table-type="results"] tr:nth-child(odd) { border-width:0 0 1px 0; } table[data-table-type="results"] tr:hover { cursor:pointer; } table[data-table-type="results"] tr:focus-within td { mask:none; } table[data-table-type="results"] th { resize:horizontal; overflow:hidden; } table[data-table-type="results"] th::after { content:'\21C5'; margin-left:0.375rem; font-size:0.875rem; font-weight:normal; } table[data-table-type="results"] th .resizer { position:absolute; right:0; top:0; width:5px; height:100%; cursor:col-resize; user-select:none; } table[data-table-type="results"] th span:hover { cursor:pointer; } table#myStaff th:hover, table#myStaff tbody tr:hover { cursor:auto; } .searchResults span[role="status"] { display:block; font-size:1.25rem; } .notificationContainer { display:flex; flex-wrap:wrap; column-gap:0.25rem; row-gap:0.25rem; } .notification { display:inline-block; font-size:0.75rem; padding:0.4375rem; border:1px solid; white-space:nowrap; } .notification::before { display:inline-block; text-indent:0.375rem; line-height:normal; width:1rem; height:1rem; flex:0 0 auto; padding:0.125rem; margin-right:0.25rem; } .notification[aria-hidden="true"] { border:0; /*height:1.375rem;*/ } .notificationBanner { } .notificationInfo::before { content:'i'; border-radius:50%; } .notificationWarning::before { content:'!'; } .noticeFlag { font-size:0.75rem; padding:0.4375rem 0.675rem 0.4375rem 0.4375rem; border:1px solid; white-space:nowrap; } .noticeFlag::before { padding:0.125rem; } .noticeFlag[aria-hidden="true"] { border:0; } .postMessage .iconBefore { column-gap:0.375rem; } .postMessage .iconBefore::before { padding:0.125rem; } .heading .iconBefore::before { width:1em; height:1em; margin-right:0.25em; } section.notification { font-size:0.875rem; white-space:normal; padding:0.75rem 1rem; display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center; column-gap:0.75rem; row-gap:0.75rem; } section.notification .column:first-of-type { flex:1 1; } section.notification .column:last-of-type { flex:0 0; justify-items:center; } .notification h2 { font-size:0.875rem; display:inline-block; margin-bottom:auto; } .notification p { display:inline-block; margin-bottom:auto; } .notification .button { font-size:0.625rem; display:block; width:auto; margin-top:auto; border-radius:3px; white-space:nowrap; } .description { display:block; font-size:0.875rem; font-style:italic; } /*** Category tree list ***/ .categoryTreeContainer { display:inline-block; width:auto; max-width:100%; margin:0; border:1px solid; box-shadow:0 3px 7px rgba(0,0,0,0.15); } .categoryTreeContainer ul li { list-style-type:none; } .categoryTreeContainer ul { display:flex; flex-direction:column; margin:0; row-gap:1px; } .category[data-collapsed="true"] { display:none; } .category[data-collapsed="false"] { display:flex; } .categoryTreeContainer .category a { text-decoration:none; margin:auto; padding:0.75rem; flex:1 1 auto; align-self:stretch; line-height:normal; border-left: 3px solid; } .categoryTreeContainer .category a:hover { text-decoration:underline; } .categoryTreeContainer .category a::before { content:'»'; display:inline-block; margin-right:0.25rem; } /*.categoryTreeContainer .category button { width:1.375rem; height:1.375rem; flex:0 1 auto; padding:0; border:0; margin:auto; background:url(media/icons/iconArrowcircle.svg) 100%; transform:rotate(-90deg); }*/ /*.categoryTreeContainer .category button[aria-expanded="true"] { transform:rotate(0); }*/ .categoryTreeContainer .category button { flex:0 0 auto; align-self:stretch; min-width:auto; min-height:auto; padding:0.625rem !important; border-radius:0; margin:0; font-size:1rem; text-align:center; } .categoryTreeContainer .category button::after { margin:0; font-weight:300; } .categoryTreeContainer .category .category { padding:0 0 0 0.875rem; margin:0; border-style:solid; border-width:1px 0 0 0; } .categoryTreeContainer .category li { display:flex; flex-direction:column; margin:0; padding:0; } .categoryTreeContainer .category .row { display:flex; flex-direction:row; justify-content:flex-start; align-items:center; column-gap:1rem; row-gap:0; padding:0; } /*** Custom select box ***/ .select_box { width:auto; min-width:10rem; max-width:100%; font-size:0.875rem; line-height:1; cursor:pointer; margin:0; } .select-button { display:flex; justify-content:space-between; align-items:center; border-radius:0; letter-spacing:0; text-transform:none; font-size:0.875rem; } .selected-value { text-align:left; margin-right:0.75rem; } .arrow { border-left:5px solid; border-right:5px solid; border-top:6px solid; transition:transform ease-in-out 200ms; } .select-button[aria-expanded="true"] .arrow { transform:rotate(180deg); } .select-dropdown { width:100%; min-width:fit-content; max-height:20rem; overflow:auto; position:absolute; top:calc(100% + 2px); z-index:10; box-shadow:0 3px 7px rgba(0,0,0,0.2); border:1px solid; } .select-dropdown[data-collapsed="true"] { display:none; } .select-dropdown[data-collapsed="false"] { display:block; } .select_box li { list-style-type:none; white-space:nowrap; } .select_box input { padding:0; margin:0; display:none; } .select_box label { padding:0.375rem 1rem; font-weight:normal; } .select_box label::before { margin-right:0.25rem; } .select_box label::after { font-size:0.625rem; margin-left:0.25rem; padding:0.125rem 0.25rem; box-sizing:border-box; border-radius:3px; vertical-align:middle; } /*.select_box li[data-level="1"] label::after { content:'nivå 1'; }*/ .select_box li[data-level="2"] label::before { content:'—'; } .select_box li[data-level="2"] label::after { content:'nivå 2'; } .select_box li[data-level="3"] label::before { content:'— —'; } .select_box li[data-level="3"] label::after { content:'nivå 3'; } .select_box li[data-level="4"] label::before { content:'— — —'; } .select_box li[data-level="4"] label::after { content:'nivå 4'; } .select_box li[data-level="5"] label::before { content:'— — — —'; } .select_box li[data-level="5"] label::after { content:'nivå 5'; } .select_box li[data-level="6"] label::before { content:'— — — — —'; } .select_box li[data-level="6"] label::after { content:'nivå 6'; } .select_box li.search { display:grid; grid-template-columns:2.5rem calc(100% - 2.5rem); } .select_box li.search label { display:flex; padding:0; } .select_box li.search label::before { content:'\23DA'; margin:auto; } .select_box input.select-filtering { width:100%; min-width:auto; height:auto; display:block; padding:0.5rem; font-style:italic; border-style:dashed; } #search_setting { border-radius:0; font-size:0.875rem; text-transform:none; letter-spacing:normal; width:auto; } #search_setting[aria-pressed="true"] { outline:1px solid; outline-offset:-5px; } .content video { max-width:100%; display:inline-block; } span.button { display:inline-block; min-width:auto; min-height:auto; padding:0; } span.button a { padding:0.75rem 1.25rem; text-decoration:none; /*Style fix*/ } .textwidget { margin:0; } .sectionNumber { position:absolute; right:1.25em; top:0.75em; font-size:0.75rem; } /*** Table of contents ***/ #pageSidebarWrapper { position:absolute; top:8rem; bottom:2.5rem; right:0; z-index:5; } #pageSidebar { position:sticky; top:1rem; box-shadow:0 3px 7px rgba(0,0,0,0.15); } #pageSidebar[data-collapsed="false"] #pageSidebarContent { visibility:visible; opacity:1; } #pageSidebar[data-collapsed="true"] #pageSidebarContent { visibility:hidden; width:0; opacity:0; } #pageSidebar > button { position:absolute; right:100%; border:0; width:1rem; height:1rem; padding:0.25rem; margin-top:auto; border-radius:3px 0 0 3px; font-size:1rem; } #pageSidebar > button::before { width:100%; height:100%; } #pageSidebarContent { display:flex; width:18rem; padding:2rem 0; border:1px solid; overflow:hidden; } #pageSidebarContent div { width:100%; mask:linear-gradient(180deg, #FFF calc(100% - 1.5rem), transparent); } #pageSidebar .article { max-height:50vh; padding:0 2rem; overflow-y:auto; } #pageSidebar header { font-size:1.125rem; font-weight:700; } #pageSidebar header a { font-weight:inherit; } #pageSidebar a { text-decoration:none; } #pageSidebar a:hover { text-decoration:underline; } #pageSidebar nav { text-align:left; } #pageSidebar nav a { vertical-align:top; } #pageToc { padding-bottom:1rem; } #pageToc ul { margin:auto; } #pageToc ul li { list-style-type:none; margin: 0.25rem auto; } #pageToc ul ul { padding-left:0.875rem; } #pageToc li a { font-size:0.875rem; } /*** Gallery ***/ .gallery ul { width:100%; margin:auto; display:flex; flex-wrap:wrap; border:1px solid; padding:1%; box-sizing:border-box; } .gallery ul li { margin:1%; list-style-type:none; flex:1 1 31%; } .gallery ul li img { border:0; padding:0; box-shadow:none; width:100%; height:100%; object-fit:cover; cursor:pointer; } .gallery ul[data-gallery-columns="1"] li { flex:1 1 100%; } .gallery ul[data-gallery-columns="2"] li { flex:1 1 48%; } .gallery ul[data-gallery-columns="3"] li { flex:1 1 31%; } .gallery ul[data-gallery-columns="4"] li { flex:1 1 23%; } .gallery ul[data-gallery-columns="5"] li { flex:1 1 18%; } /*** Lightbox ***/ .lightboxContainer { display:none; z-index:10000; position:fixed; width:100%; height:100%; top:0; right:0; bottom:0; left:0; padding:5rem; text-align:center; } .lightboxContainer ul { display:block; height:100%; padding:0; border:0; } .lightboxContainer ul li { width:100%; height:100%; margin:0; } .lightboxContainer ul li img { width:auto; height:auto; max-height:100%; object-fit:contain; border:1px solid; box-shadow:0 0 20px rgba(0,0,0,0.25); } .lightboxContainer nav { top:-1.5em; width:auto; display:inline-block; padding:0.5em; border:1px solid; } .lightboxContainer .button { display:inline-block; appearance:none; -webkit-appearance:none; border:0; margin:auto 0.5em; } .lightboxContainer .button:hover{ opacity:1; } .lightboxContainer .previous { } .lightboxContainer .next { } .lightboxContainer .close { } /*** Footer parts ***/ footer#mainFooter { font-size:0.875rem; border:solid; border-width:1px 0; } footer #footerHeading { visibility:hidden; width:0; height:0; margin:0; padding:0; margin:0; } /* Visually hidden without using display:none; */ footer#mainFooter h2 { font-family:'Lato', sans-serif; font-size:1.75rem; font-weight:300; line-height:1; text-transform:none; margin:auto auto 1rem auto; } footer#mainFooter ul li a { padding:0.25rem 0; } footer#mainFooter .content { max-width:110rem; text-align:left; line-height:1.5; display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:stretch; column-gap:2.5rem; padding:0; margin-left:0; } footer#mainFooter .column { flex:1 1 20%; display:flex; flex-direction:column; row-gap:2rem; text-align:left; margin:0; max-width:100%; padding:3rem 0; } footer#mainFooter .column:first-of-type { flex:0 1 25%; padding:5%; } footer#mainFooter .column:last-of-type { padding-right:5%; } footer#mainFooter .column:first-of-type img { width:100%; max-width:100%; height:100%; object-fit:contain; } footer#mainFooter .column > div { margin:0; padding:1rem; } #copyright { position:absolute; bottom:0.5rem; right:0.75rem; font-size:0.75rem; } #copyright p { text-align:right; } #copyright p a::after { display:none; } /* ---------------------------------------------------------------------------------------------------------- 05 Misc ---------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ /*** Login page ***/ body.login { background-image:url('media/landskap.jpg'); background-position:bottom; background-repeat:no-repeat; background-size:cover; background-attachment:fixed; text-align:left; font-family:'Lato', sans-serif; } body.login #login, body.login .language-switcher { width:100%; max-width:31.25rem; height:100%; position:absolute; right:0; padding:3rem 2rem; box-shadow:-5px 0 15px rgba(0,0,0,0.15); } body.login .language-switcher { height:auto; padding:1.5rem 2rem; bottom:0; box-shadow:none; border-top:1px solid; } body.login .language-switcher form { margin-top:0; } body.login .language-switcher label { margin-right:0.25rem; } body.login .language-switcher select { width:auto; display:inline-block; } body.login form { padding:0; margin-top:3rem; box-shadow:none; border:0; } body.login .privacy-policy-page-link { text-align:left; margin:2rem 0 0 0; } body.login label { font-weight:bold; font-size:1rem; } body.login #loginform input { font-size:1rem; font-family:'Lato', sans-serif; padding:0.875rem 1.2rem; border:1px solid; border-radius:0; font-weight:400; box-sizing:border-box; line-height:1; } body.login #backtoblog { display:none; } body.login #login h1 a { background-image:url('media/logotype/organization_logotype.svg'); background-size: 100% auto; padding-bottom: 0px; width:18.75rem; height:14.375rem; } body.login .button-primary { float:none; } body.login #mo_saml_button { height:auto !important; margin-bottom:2rem; } body.login #mo_saml_button::after { content:''; display:block; padding-bottom:1rem; border-bottom:1px solid; } body.login #mo_saml_button div { display:none; } body.login #mo_saml_login_sso_button { border:1px solid; font-size:0.75rem !important; letter-spacing:1px; border-radius:0.25rem; padding:0.75rem 1.25rem; } body.login input[type="submit"] { width:auto; border:1px solid !important; } body.login #loginform { border-radius:0; } body.login #loginform input[type="submit"] { width:100%; font-size:0.875em; padding:1rem 2rem; text-transform:uppercase; letter-spacing:1px; border:none; border-radius:2rem; line-height:1.5; transition:all 250ms ease-in-out; margin-top:1rem; } body.login .button:hover { opacity:0.8; } #miniorange-saml-sp-sso-login-form a.anchor::after { display:none; } /*** System information ***/ #systemInfo { font-family:monospace; font-size:0.75rem; padding:0.5rem; } #systemInfo a { font-weight:700; }