/** * Styling for the start page on bolagsverket.se. */ /* * Media-independent styling * ------------------------- */ /* Basic styling of HTML elements */ h1 {position:absolute; left:-999em} /* Classes */ /* Page elements */ /* * Screen-only styling * ------------------- */ @media screen { /* Basic styling of HTML elements */ main {margin:0; padding:0} /* Classes */ .block.icon {min-height:2em; padding-left:4em !important; background-repeat:no-repeat; background-position:1em 1.25em; background-size:2em 2em} .block.list.emphasize li {margin-bottom:0; border-radius:0; padding:0; background-color:transparent} .icon.clock {background-image:url("/img/clock.svg")} .icon.faq {background-image:url("/img/faq.svg")} /* Page elements */ #start-quick-links {padding:1em; background-color:#e6f4fc} #start-quick-links .column-splitter {} #start-quick-links .column-splitter>h2 {text-align:center} #start-quick-links .emphasize {border:0} #start-quick-links .emphasize li {border:0} #start-quick-links .accordion {min-height:3.375rem} #start-quick-links .accordion>button {display:block; width:100%; border-radius:0.25em; padding:1em 2.5em 1em 1em; background:url("/img/collapsed-large.svg") no-repeat right 1em center/2em 2em transparent; color:inherit; text-align:left} #start-quick-links .accordion>button:focus {outline-color:#0065bd} #start-quick-links .accordion>button:hover {outline:none;} #start-quick-links .accordion>button[aria-expanded=true] {background-image:url("/img/expanded-large.svg")} #start-quick-links .accordion .link {display:inline} #start-quick-links .accordion .link a {display:inline; padding:0; background-image:none; text-decoration:underline} #start-quick-links .accordion .link a[href^="http:"], #start-quick-links .accordion .link a[href^="https:"] {padding-right:14px; background:url("/img/external-link.png") no-repeat 100% 50%} #start-quick-links .accordion>div .link a {text-decoration:underline} #start-quick-links .link {display:block; margin:0 0 1em; padding:0; font-weight:bold;background-color: #fff} #start-quick-links .link a {display:inline-block; border-radius:0.25em; padding:1em 2em 1em 1em; background: no-repeat right 1em center #fff; color:#002857; text-decoration:none} #start-quick-links .link a[href^="http:"], #start-quick-links .link a[href^="https:"] {background-image: url("/img/external-link.png");} #start-quick-links .link a:hover {text-decoration:underline} #start-quick-links .list {margin:0 0 1em; padding:0; background-color:#fff} #start-quick-links .list h2 {margin:0; font-size:1em} #start-quick-links .list h2:first-child {margin-top:0} #start-quick-links .list ul {margin-top:1em; padding:0} #start-quick-links .list li {list-style-type:none} #start-quick-links .list li+li {border-top:1px solid #e2e2e2} #start-quick-links .list a:link {color:#002857} #start-quick-links .list .link {margin:0; padding:0; background:transparent; font-weight:normal} #start-quick-links .list .link a:link {color:#002857} #start-quick-links .list .link a:visited {color:#800080} #start-misc {margin:0.5em 0} #start-misc>* {display:block; margin:0.5em 0; border-radius:0.25em; padding:1.5em 1em; background-color:#8fcae7; color:#002857} #start-misc a {font-weight:bolder} #start-misc a:link {color:#002857} #start-news {} #start-news .teaser {margin:1.5em 0 0} #start-news .teaser h2 {margin-top:0; padding:0 1rem; font-size:130%; line-height:1.3} #start-news .teaser h2 a {color:inherit} #start-news .teaser>div {padding:0 1em} #start-news .teaser.wide>div {padding:1em 1em 0.5em; background:#0065bd; color:#fff} #start-news .teaser.wide a {color:inherit} #start-news .teaser.wide h2 {padding:0; color:inherit} #start-news .teaser.wide a:focus {outline-color:#fecb00} #start-news .teaser.wide .pubdate {background-color:#cdeafa; color:#0065bd} } /* * Medium screen styling * -------------------- */ @media screen and (min-width:40em) { /* Page elements */ body>header {position:relative; z-index:1; padding-bottom:1.5em; box-shadow:0 0.1em 0.5em #ccc} body>header+* {margin-top:0} #start-quick-links {padding:2em 1em} #start-quick-links>div {max-width:60em; margin:0 auto} #start-content {max-width:60em; margin:0 auto} #start-misc {display:flex; flex-flow:row wrap; justify-content:space-between} #start-misc>* {display:block; box-sizing:border-box; flex:0 0 48%} #start-news {display:flex; flex-flow:row wrap} #start-news>* {flex:1 1 30%} #start-news>*:nth-child(n+2) {margin-left:1em} #start-news>*.wide {flex:0 0 100%} #start-news>*.wide+* {margin-left:0} #start-news .teaser {} #start-news .teaser h2, #start-news .teaser>div {padding:0} #start-news .teaser .image img {width:100%} #start-news .teaser.wide {max-width:none} #start-news .teaser.wide>div {width:40%; min-width:20em; margin:1.5em 1em 1em auto; padding:2em 2em 1em; background:#0065bd; color:#fff} } /* * Small screen styling * -------------------- */ @media screen and (max-width:40em) { /* Page elements */ #start-news .teaser .image img {width:100%} } /* IE11 bug workarounds */ @media screen and (min-width:40em) and (-ms-high-contrast:active), (-ms-high-contrast:none) { #start-quick-links>div>* {flex:0 0 44%} #start-misc>* {flex:0 0 39%} } /** * Print styling * ------------- */ @media print { /* Basic styling of HTML elements */ /* Classes */ .block.link {display:none} /* Page elements */ body>header {} body>header .alerts {margin:0 0 1.5em; border:2pt solid #999; padding:1em} body>header .alerts h2 {margin-top:0} body>footer {} body>footer h2 {display:none} #start-quick-links {display:none} #start-content {} #start-news {display:flex; flex-flow:row wrap} #start-news>* {flex:1 1 30%} #start-news>*:nth-child(n+2) {margin-left:1em} #start-news>*.wide {flex:0 0 100%} #start-news>*.wide+* {margin-left:0} #start-news .teaser {} #start-news .teaser h2, #start-news .teaser>div {padding:0} #start-news .teaser .image img {max-width:6cm; height:auto} #start-news .teaser.wide {max-width:none} #start-news .teaser.wide>div {width:40%; min-width:20em; margin:1.5em 1em 1em auto; padding:2em 2em 1em; background:#5e5e5e; color:#fff} }