/************************************/ /* © Apricore 2025 */ /* http://haderslevungdomsskole.dk/ */ /* */ /* Haderslev Ungdomsskole */ /************************************/ @import url(https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap); /*********************************/ /* Grundlayout og grundtypografi */ /*********************************/ html { overflow-x: hidden; overflow-y: scroll; width: 100%; height: 100%; } body { width: 100%; height: 100%; background-attachment: scroll; background-image: url(images/background.png); background-repeat: repeat-x; background-size: auto; /* Gradient */ background-color: #ffffff; } body, td { font-size : 18px; color : #000000; font-family: 'Barlow Semi Condensed', sans-serif;;; } fieldset { border: 1px solid #333332; padding: 5px; } /************************/ /* Webdokument generelt */ /************************/ a, a:link, a:visited, a:active { color : #000000; text-decoration: none; background-color: transparent; } a:hover { color : #000000; text-decoration: underline overline; background-color: transparent; } .rubrik { font-family: inherit;;font-size: 48px; font-weight: 600; color: inherit; padding: 0px 0px 6px 0px !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-transform: uppercase; /* Customer specific */ word-wrap: break-word; word-break: keep-all; white-space: normal; } .underrubrik { font-family: inherit; font-weight: ; font-size: 22px; font-style: italic; color: inherit; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; word-wrap: break-word; word-break: keep-all; white-space: normal; } .lokalmenubar, a.lokalmenubar:link, a.lokalmenubar:visited, a.lokalmenubar:active { font-size: 14px; text-decoration: none; } a.lokalmenubar:hover { color : #000000; } .broedtekst { color : #000000; } a:link.broedtekst, a:visited.broedtekst, a:active.broedtekst { color : #000000; text-decoration: underline; } a:hover.broedtekst { color : #000000; text-decoration: none; } .mellemrubrik { font-family: inherit;; color: inherit;font-size: 23px; font-weight: bold; padding: 9px 0px 9px 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; word-wrap: break-word; word-break: keep-all; white-space: normal; } .lilletekst { font-size: 13px; } a.lilletekst, a.lilletekst:link,a.lilletekst:visited, a.lilletekst:active { text-decoration: none; } a.lilletekst:hover { text-decoration: underline; } .sidetal { /* Bruges til initialer i bunden */ font-size: 13px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /***********************/ /* Page Toolbar */ /***********************/ .pageToolBarContainer { font-size: 82%; } .pageToolBarContainer span { margin: 0px 0px 0px 3px; background: transparent; } .pageToolBarContainer span i { /* The background symbol */ color: inherit; } .pageToolBarContainer span a { color: inherit; text-decoration: none; } .pageToolBarContainer span a:hover, .pageToolBarContainer span a:focus { color: #ffffff; background: #ee4130; } /************/ /* Billeder */ /************/ .image { color: #000000; /* Must be set here too, since eg. images in comp_slideshow won't work */ background-color: transparent; border: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .billedtekst, a.billedtekst, a.billedtekst:link, a.billedtekst:visited, a.billedtekst:active, a.billedtekst:hover { color: #000000; font-size: inherit; font-weight: normal; padding: 7px 7px 7px 10px; text-decoration: none; } a.billedtekst:hover { text-decoration: underline; } table.billedbaggrund, div.billedbaggrund { background: transparent; } /********/ /* Menu */ /********/ #top_menu_outer_box { background-color: #ffffff; width: 100%; margin: 0 auto; margin-top: 0px; border-width: 2px 0 2px 0; border-style: solid; border-color: #e15353; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #top_menu { width: 1240px; height: 64px; padding: 0 0 0 0; margin: 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; line-height: 64px; background-repeat: no-repeat; background-color: #ffffff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* overflow: hidden; */ z-index: 401; } #top_menu li { flex: 1; } #top_menu li a { display: block; text-align: center; -webkit-transition: 170ms ease-out; transition: 170ms ease-out; } /************************/ /* DropDown Menu Styles */ /************************/ #top_menu li:hover > ul { /* On hover, display the next level's menu */ display: inline; } /* Level 2 */ #top_menu > li > ul { position: absolute; top: 66px; width: 300px; padding: 0; margin: 0; margin-top: -2px; display: none; } #top_menu > li { position: relative; } /* Level 3 */ #top_menu > li > ul > li > ul { position: absolute; top: 0px; right: -300px; width: 300px; display: none; } #top_menu li > ul > li { position: relative; } /* Level 4 */ #top_menu > li > ul > li > ul > li > ul { position: absolute; top: 0px; right: -200px; width: 200px; display: none; } #top_menu li > ul > li > ul > li { position: relative; } /* Level 1 - horizontal */ #top_menu li { float: none; list-style: none; border-right: 0px; } #top_menu li a { /* Level 1 menu */ font-family: inherit; font-size: 21px; font-weight: 900; text-transform: uppercase; text-decoration: none; color: #000000; padding: 0 0 0 0; margin: 0 0 0 0; background-color: #ffffff; white-space: nowrap; display: block; } #top_menu li a:hover { /* Level 1 menu */ color: #ffffff; background-color: #000000; } #top_menu li a.menu_horizontal_level_1_selected { font-weight: 900; } /* Level 2 - horizontal */ #top_menu li ul li { float: none; list-style: none; border-bottom: #000000 solid 1px; z-index: 401; } #top_menu li ul li a { /* Level 2 menu */ font-family: inherit; font-size: 21px; font-weight: 900; text-transform: uppercase; text-decoration: none; color: #000000; padding: 0 0 0 0; margin: 0 0 0 0; background-color: #ffffff; white-space: nowrap; display: block; z-index: 401; } #top_menu li ul li a:hover { /* Level 2 menu */ color: #ffffff; background-color: #000000; text-decoration: none; } /* Level 3 - horizontal */ #top_menu li ul li ul li { float: none; list-style: none; border-bottom: #000000 solid 1px; z-index: 401; } #top_menu li ul li ul li a { /* Level 3 menu */ font-family: inherit; font-size: 21px; font-weight: 900; text-transform: uppercase; text-decoration: none; color: #000000; padding: 0 0 0 0; margin: 0 0 0 0; background-color: #ffffff; white-space: nowrap; display: block; z-index: 401; } #top_menu li ul li ul li a:hover { /* Level 3 menu */ color: #ffffff; background-color: #000000; text-decoration: none; } #menu_left { margin: 0px; padding: 0px; } #burger_container { background-color: #ffffff; } /******************/ /* Special Column */ /******************/ .special_column_list div { /* Header over each list in the right column */ margin: 46px 0px 0px 0px; padding: 0px 0px 11px 0px; font-family: inherit; font-size: 16px; font-weight: 400; text-transform: uppercase; color: #05757f; border-bottom: #05757f solid 4px;} .special_column_list ul { margin: 0px; padding: 0px; } .special_column_list li { list-style: none; border-bottom: #05757f solid 2px;} .special_column_list li a { font-family: inherit; font-size: 14px; font-weight: ; color: #05757f; background-color: ; padding: 12px 0px 12px 0px; margin: 0 0 0 0; text-transform: none; text-decoration: none; display: block; white-space: normal; overflow: hidden; } .special_column_list li a:hover { text-decoration: underline overline; color: #05757f; background-color: ; } /************/ /* Formular */ /************/ select { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #000000; /* The text color in the dropdown */ font-size: 11px; font-weight: normal; } input[type="text"], input[type="password"], textarea, select { box-sizing: border-box; border: 1px solid #000000; } input[type="text"], input[type="password"] { height: 21px; } input[type="radio"], input[type="checkbox"] { /* Jakob: This should stay off, for at better user experience */ /* outline: none; */ } input[type="button"], input[type=submit] { outline: none; } input[disabled], button[disabled], textarea[disabled], select[disabled] { opacity: 0.5; } /***************/ /***************/ /*** MODULER ***/ /***************/ /***************/ /**************/ /* Afstemning */ /**************/ .poll_container { margin-top: 18px; border: 5px solid #000000; padding: 5px; background: #ffffff; text-align: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .poll_overskrift, a.poll_overskrift:link, a.poll_overskrift:visited, a.poll_overskrift:active, a.poll_overskrift:hover { font-family: Arial, Verdana, Helvetica, sans-serif; font-size : 15px; color : #000000; font-weight: bold; text-decoration: none; margin-bottom: 6px; } .poll_broedtekst, a.poll_broedtekst:link, a.poll_broedtekst:visited, a.poll_broedtekst:active, a.poll_broedtekst:hover { font-family: Arial, Verdana, Helvetica, sans-serif; font-size : 13px; color : #000000; font-weight: normal; text-decoration: none; } .poll_bar { background: #000000; margin: 1px 0px; font-family: Arial, Verdana, Helvetica, sans-serif; font-size : 10px; color : #ffffff; padding: 2px; margin: 4px 0px 0px 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .poll_button { font-family: Arial, Verdana, Helvetica, sans-serif; color: #ffffff; font-size: 11px; border: 1px solid #000000; text-align: center; font-weight: bold; background: #000000; } a:link.poll_button, a:visited.poll_button, a:active.poll_button { text-decoration: none; border: 1px outset; color: #000000; } a:hover.poll_button { text-decoration: none; border: 1px inset; color: #000000; } /************/ /* Kalender */ /************/ .kalender_overskrift { font-family: Arial, Verdana, Helvetica, sans-serif; color: #333332; font-size: 14px; font-weight: bold; } .kalender_dato { font-family: Arial, Verdana, Helvetica, sans-serif; color: #8b96a0; font-size: 11px; } /****************/ /* Klistermærke */ /****************/ .sticker_overskrift, a.sticker_overskrift:link, a.sticker_overskrift:visited, a.sticker_overskrift:active, a.sticker_overskrift:hover { font-family: Arial, Verdana, Helvetica, sans-serif; font-size : 12px; color : #333332; font-weight: bold; text-decoration: none; line-height: 11px; } .sticker_broedtekst, a.sticker_broedtekst:link, a.sticker_broedtekst:visited, a.sticker_broedtekst:active, a.sticker_broedtekst:hover { font-family: Arial, Verdana, Helvetica, sans-serif; font-size : 11px; line-height: 11px; color : #333332; font-weight: normal; text-decoration: none; } /*******************************/ /*******************************/ /*** KUNDESPECIFIKKE KLASSER ***/ /*******************************/ /*******************************/ .search_field { width: 210px; font-family: inherit; font-size: 21px; font-weight: bold; color: #ffffff; border: 0px; height: 35px; margin: -3px 0 0 0; padding: 0 0 0 4px; background-color: #d71352; background-image: url(images/magnify.ico.png); background-position: right; background-repeat: no-repeat; } #breadcrums { max-width: 1240px; font-family: inherit; font-size: 14px; text-transform: uppercase; text-align: right; font-weight: 900; color: #000000; background-color: #ffffff; margin: 0 auto; padding: 10px 0 0 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #breadcrums a { color: #6f6f6f; font-weight: 900; text-decoration: none; background: transparent; } #breadcrums a:hover { color: #000000; text-decoration: overline underline; background: transparent; } @media screen and (max-width: 1280px) { #breadcrums { padding: 20px 5.9% 0 5.9%; } } /***********/ /* Nyheder */ /***********/ #topNewsStoryContainer { width: 100%; /* for IE 6 */ padding: 0 0 0 0; position: relative; margin: 0 0 1% 0; } .topNewsStoryManchet { font-family: inherit; font-size: 24px; font-weight: 700; color: white; position: absolute; left: 20px; bottom: 20px; margin: 0px; padding: 18px 20px 18px 20px; background: rgb(107, 127, 132); /* fallback color */ background: rgba(107, 127, 132, 0.4); } .topNewsStoryImage img { width: 100%; height: auto; border: 0px; margin: 0 0 0 0; padding: 0 0 0 0; } .topNewsStoryText, a:link.topNewsStoryText, a:hover.topNewsStoryText, a:active.topNewsStoryText, a:visited.topNewsStoryText { width: 100%; font-family: inherit; font-size: 18px; text-transform: none; color: #000000; text-decoration: none; width: 100%; margin: 0 0 0 0; padding: 0 0 3.3% 0; } #topNewsStoryLinksContainer { width: 100%; font-family: inherit; font-size: 18px; font-weight: 700; margin: 6px 0 0 0; padding: 0 0 0 0; } #topNewsStoryLinksContainer div { width: 100%; margin: 0 0 0 0; padding: 0 0 0 0; } #topNewsStoryLinksContainer div a { color: #65af3d; text-decoration: none; text-transform: none; background: center right url(images/newsStoryLinkIcon.png) no-repeat; padding: 0 21px 0 0; } #topNewsStoryLinksContainer div a:hover { text-decoration: underline overline; } /* Normal news */ #newsStoryContainer { width: 100%; position: relative; padding: 0 0 0 0; margin: 0 0 1% 0; } .newsStoryManchet { font-family: inherit; font-size: 20px; font-weight: 700; color: white; position: absolute; left: 20px; bottom: 20px; margin: 0px; padding: 14px 16px; background: rgb(107, 127, 132); /* fallback color */ background: rgba(107, 127, 132, 0.4); } .newsStoryImage img { width: 100%; height: auto; border: 0px; margin: 0 0 0 0; padding: 0 0 0 0; } .newsStoryText, a:link.newsStoryText, a:hover.newsStoryText, a:active.newsStoryText, a:visited.newsStoryText { width: 100%; font-family: inherit; font-size: 18px; text-transform: none; color: #000000; text-decoration: none; width: 100%; margin: 0 0 0 0; padding: 0 0 3.3% 0; } #newsStoryLinksContainer { width: 100%; font-family: inherit; font-size: 18px; font-weight: 700; margin: 6px 0 0 0; padding: 0 0 0 0; } #newsStoryLinksContainer div { width: 100%; margin: 0 0 0 0; padding: 0 0 0 0; } #newsStoryLinksContainer div a { color: #65af3d; text-decoration: none; text-transform: none; background: center right url(images/newsStoryLinkIcon.png) no-repeat; padding: 0 21px 0 0; } #newsStoryLinksContainer div a:hover { text-decoration: underline overline; } .news_story_frontpage_box { float: left; width: 49%; } .news_story_frontpage_column_spacer { float: left; width: 2%; height: 1px; } /**************/ /* Responsive */ /**************/ header { width: 100%; height: 190px; margin: 0 0 0 0; padding: 34px 0 0 0; background-color: #ffffff; background-image: url(); background-position: left; background-repeat: no-repeat; font-size: 12px; font-weight: 300; text-transform: none; color: #707070; border-width: 0 0 0 0; border-style: solid; border-color: #000000; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #main_content { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* ----------------------- */ /* Larger than 1280px - PC */ /* ----------------------- */ @media screen and (min-width: 1280px) { .hide_for_tablets { display: normal !important; } .hide_for_pc { display: none !important; } #menu_column_fronpage, #menu_column_subpage { width: 27.13%; height: 1070px; padding: 0 0 300px 0; margin-top: 0; margin-bottom: 0; border-width: 0 0 0 0; border-style: solid; border-color: #004181; background-color: #ffffff; background-image: url();; background-repeat: no-repeat; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #content_column_frontpage { padding: 0 4.3% 0 2.3%; border-width: 19px 0 0 0; border-style: solid; border-color: #004181; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #content_column_subpage { margin-left: auto; margin-right: auto; padding-top: 39px; padding-right: 0; padding-bottom: 0; padding-left: 100px; max-width: 1240px; /* Limits width in one column designs */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #fake_content_top_margin { height: 39px; background-color: transparent; max-width: 1240px; /* Limits width in one column designs */ margin: 0 auto; } #fake_content_bottom_margin { height: 100px; background-color: transparent; max-width: 1240px; /* Limits width in one column designs */ margin: 0 auto; } /* One column design */ .apr_paragraph_width_unlimited { width: 100%; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .apr_paragraph_width_margins_included { width: 1240px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .apr_paragraph_width_normal { width: 1240px; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #special_column { /* The container */ width: 13.3%; margin-top: 0; margin-bottom: 150px; padding: 0 0 0 0; float: left; background-color: #ffffff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } footer { font-family: inherit; font-size: 24px; font-weight: normal; text-transform: none; color: #ffffff; min-height: 413px; padding: 48px 0 0 0; margin: 0 0 0 0; border-width: 0 0 0 0; border-style: solid; border-color: #950008; /* Gradient */ background: #313131; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } footer a:link, footer a:visited, footer a:active, footer a:hover { color: ##ffffff; } } /* ---------------------------- */ /* for 1280px or less - Tablets */ /* ---------------------------- */ @media screen and (max-width: 1279px) { .hide_for_tablets { display: none !important; } .hide_for_pc { display: normal !important; } #main_content, body { background-image: none !important; background-color: transparent !important; } header { width: 100%; margin: 0 0 0 0; padding: 6px 5.9% 0 5.9%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #content_column_frontpage { padding: 0.5% 2% 4% 2%; border-width: 0 0 0 0; border-style: solid; border-color: #004181; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #content_column_subpage { padding-top: 39px; padding-right: 0; padding-bottom: 0; padding-left: 100px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #fake_content_top_margin { height: 39px; background-color: transparent; max-width: 1240px; /* Limits width in one column designs */ margin: 0 auto; } #fake_content_bottom_margin { height: 100px; background-color: transparent; max-width: 1240px; /* Limits width in one column designs */ margin: 0 auto; } table.content_column_responsive:not([style*='display: none;']), td.content_column_responsive:not([style*='display: none;']), div.content_column_responsive:not([style*='display: none;']), img.content_column_responsive:not([style*='display: none;']), label.content_column_responsive:not([style*='display: none;']) { float: none !important; display: block !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .apr_paragraph_width_unlimited, .apr_paragraph_width_margins_included { width: 100%; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .apr_paragraph_width_normal { padding-left: 5.9%; padding-right: 5.9%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #special_column { width: 100%; float: left; width: 95.5%; padding: 8px 2.2% 5% 2.3%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } footer { font-family: inherit; font-size: 18px; font-weight: 400; text-transform: none; color: #ffffff; min-height: 413px; padding: 48px 0 0 0; margin: 0 0 0 0; border-width: 0 0 0 0; border-style: solid; border-color: #950008; /* Gradient */ background: #313131; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } footer a:link, footer a:visited, footer a:active, footer a:hover { color: ##ffffff; } } /* ------------------------- */ /* for 414px or less - Phone */ /* ------------------------- */ @media screen and (max-width: 414px) { .hide_for_phones { display: none !important; } .rubrik { font-size: 38.4px; } .underrubrik { font-size: 20px; } .mellemrubrik { font-size: 18px; } #main_content { /* Gradient */ background: transparent; background-size: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } header { width: 100%; margin: 0 0 0 0; padding: 6px 5.9% 0 5.9%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #content_column_frontpage { padding: 0.5% 2% 4% 2%; border-width: 0 0 0 0; border-style: solid; border-color: #004181; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #content_column_subpage { padding-top: 39px; padding-right: 0; padding-bottom: 100px; padding-left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #fake_content_top_margin { height: 39px; background-color: transparent; max-width: 1240px; /* Limits width in one column designs */ margin: 0 auto; } #fake_content_bottom_margin { height: 100px; background-color: transparent; max-width: 1240px; /* Limits width in one column designs */ margin: 0 auto; } #special_column { width: 100%; float: left; width: 95.5%; padding: 8px 2.2% 5% 2.3%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } footer { font-family: inherit; font-size: 18px; font-weight: 400; text-transform: none; color: #ffffff; min-height: 413px; padding: 48px 0 0 0; margin: 0 0 0 0; border-width: 0 0 0 0; border-style: solid; border-color: #950008; /* Gradient */ background: #313131; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } footer a:link, footer a:visited, footer a:active, footer a:hover { color: ##ffffff; } } a:focus > img { outline: solid 2px !important; outline-color: currentcolor; outline-offset: 5px; transition: outline-offset .2s; } /*******************************/ /*******************************/ /*** KUNDESPECIFIKKE KLASSER ***/ /*******************************/ /*******************************/ .frontpage_link_from_top_menu, a:link.frontpage_link_from_top_menu, a:visited.frontpage_link_from_top_menu, a:active.frontpage_link_from_top_menu, a:hover.frontpage_link_from_top_menu { color: #24588b; font-weight: 700; font-size: 24px; text-decoration: none; background: transparent; }