/* ======== CtFrontendCssService: CSS compression is disabled ======== */ /* ======== CtFrontendCssService: Inlining of @imports is enabled ======== */ /* ======== CtFrontendCssService: start of file style.css ======== */ /* This is style.css, containing common style for all channels (desktop, mobile). Styles for desktop(default channel) is found in default.css, mobile styles in mobile.css Browser specific CSS files are found in firefox.css, ie.css etc. "Header comments": All elements styled in some of the files style.css, default.css and/or mobile.css have "header comments". Emtpy "header comments" indicates that the style is not specified in current file, but styled in one or more other files. The purpose with these empty "header comments" is to indicate where style should be put in the stylesheet if additional styling is added so that selector orders are consistently in all files. */ /* Note that you can put @import statements here, and the CtFrontendCssService.php class will parse the @import statements and 'inline'/merge them, making all the CSS files beeing sent as one large file. If the site is in development mode, this is disabled by default to make it easier to debug. the import statement must use double quoutes, no paranthesis and semicolon at the end. */ /* -------------------------------------------------------------------------- */ /* 1. General HTML elements */ /* -------------------------------------------------------------------------- */ html { height: 100%; font-size: 10px; line-height: 2.05em;} body { height: 100%; margin: 0; padding: 0; } a { color: #003399; text-decoration: none; } a:hover { text-decoration: underline; } a img { border: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: normal;} h1 { font-size: 4rem; line-height: 4.5rem; margin-bottom: 13px; } h2 { font-size: 2.8rem; margin-bottom: 5px; } p, blockquote { margin-top: 0; margin-bottom: 1.8rem;} form { margin: 0; padding: 0; } ul, ol { margin: 0; } ul { list-style-type: none; margin: 0px; padding: 0px; } /* html5 semantic elements must be reset */ header, section, footer, aside, nav, main, article, figure { display: block; margin: 0px; } /* -------------------------------------------------------------------------- */ /* 2. Container/placeholder positioning */ /* -------------------------------------------------------------------------- */ #container { width: 100%; overflow: hidden; font-size: 1.6rem; } #placeholder-top { width: 100%; background: #555; /* If placeholder top should be sticky, position absolute is set with javascript */ /* Don't add overflow hidden to this because of mega menu*/ } /* Sticky point, given as scrolled pixels from window top, is set in javascript and may differ on different design themes */ #placeholder-top.sticky-scrolled { position: fixed; z-index: 999; box-shadow: 2px 3px 7px 0 rgba(172, 171, 171, 0.5); } #placeholder-bottom { padding-top: 25px; padding-bottom: 12px; background: #3d3b3b; } /* -------------------------------------------------------------------------- */ /* 3. Non tile spesific common styles */ /* -------------------------------------------------------------------------- */ /* Form elements */ input, select option, textarea { padding: 0px 10px; } input:not([type="submit"]), select, textarea { font-size: 1.4rem; border: 1px solid #999; } textarea, input:not([type="submit"]) { padding-left: 8px; padding-right: 8px; } input, select:not([multiple]) { height: 2.4rem; line-height: 2.4rem; } select:not([multiple]) { padding-left: 6px;} input[type="radio"], input[type="checkbox"] { height: auto; line-height: auto;} button.default, a.button.default, input[type="submit"].default { font-size: 1.4rem; color: #fff; font-weight: normal; text-transform: uppercase; border: none; background: #e05206; height: 3.2rem; line-height: 3.2rem; min-width: 150px; /* Prevent rounded borders on safari */ -webkit-appearance: none; -webkit-border-radius: 0; } a.button.default { text-decoration: none; display: block; text-align: center; } .error, .message { display: block; padding: 12px 17px 15px 17px; margin-bottom: 18px; border: 2px solid #f00;} .error { border: 2px solid #f00;} .message { border: 2px solid green;} /* iframe */ iframe { width: 100%;} /* Content link */ #content-link a { display: block; position: absolute; left: -2000px; top: 0px; } #content-link a:focus { left: 10px; top: 40px; font-size: 3rem; padding: 8px; z-index: 999; text-decoration: underline; border: 1px solid; background: #fff; } /* Tables */ table { width: 100%; border-collapse: collapse; } table caption { font-weight: bold; text-align: left; } table th, table td { padding: 4px 0px 5px 5px; font-size: 1.4rem; } table th { text-align: left; color: #000;} table thead th { border-bottom: 1px solid #999; } table tr:nth-child(even) { background: #f6f6f6; } /* Table - blank */ /* Resetting common table styling for tables marked "blank" Can't use table:not(.blank) on the common styling because other tables (e.g. for montly activity list) get wrong styling because of css selector rules for overriding */ table.blank { width: auto; border-collapse: separate; } table.blank caption { font-weight: normal; } table.blank th, table.blank td { padding: 1px; } table.blank th { color: #000; border-bottom: none; } table.blank tr { height: auto; } table.blank tr:nth-child(even) { background: none; } /* Slick buttons */ /* Colofon */ .colofon, .colofon a {color: #6f6c6c; font-size: 1.3rem; } .colofon a { text-decoration: none; } /* -------------------------------------------------------------------------- */ /* 4. Common tile styling */ /* -------------------------------------------------------------------------- */ /* IMPORTANT INFO: What we do here is to set the style for the tile common classes. We do two things: 1. Add border, header and other stuff to create "tile-look". In the default design, this layout is used in the left and right placeholders. 2. Remove this layout for tiles in placeholder-top, placeholder-content, placeholder-content-no-right and placeholder-bottom. Tiles here are usually styled differently Since 2. overrides the default tile styles for the listed placeholder, you need to be equally specific when setting any of these styles. */ /* -- Across tiles and placeholders, and also some frontpage specific styling -- */ .byline { font-size: 1.4rem; color: #666; } /* RWD toggle */ body #container .rwd-toggle-content.rwd-toggled-open { display: block; } /* -- Placeholder top -- */ /* -- Placeholder content -- */ /* -- Placeholder bottom -- */ #placeholder-bottom .tile-common, #placeholder-bottom .tile-common a { color: #cecdcd; font-size: 1.4rem; text-decoration: none; } #placeholder-bottom .tile-common a:hover { color: #e05206; text-decoration: underline; } /* Tiles with stretched background, that are tiles where background stretches outside placeholders inner wrapper */ #container .tile-common.stretched-mode { background: #efefef; } /* -------------------------------------------------------------------------- */ /* 5. Styling for specific tiles and other components */ /* -------------------------------------------------------------------------- */ /* -- In all placeholders -- */ /* Some styling is given here to override global styling from above, and some styling for elements here are also overrided for certain placeholders below this section */ /* Full articledisplay */ .articledisplay { overflow: hidden; } .articledisplay .top-content { margin-bottom: 20px;} .articledisplay .digest { font-size: 2.8rem; font-weight: lighter; line-height: 3.6rem; } .articledisplay .digest p { margin-bottom: 5px; } .articledisplay .digest + div { margin-top: 13px; } /* Case when not having byline info on the article */ .articledisplay .byline { margin-bottom: 10px; } .articledisplay .main-content p { line-height: 2.7rem; } .articledisplay .main-content table { margin-bottom: 1em; } .articledisplay img { display: block; } .articledisplay .tile-content ol, .articledisplay .tile-content ul { margin-bottom: 1.8rem; } .articledisplay .tile-content ul li { padding-left: 18px; list-style-type: none; position: relative; } .articledisplay .tile-content ul li:before { content: ""; position: absolute; left: 0px; top: 0.8rem; display: inline-block; height: 0.6rem; width: 0.6rem; background: #e05206; } /* Article display - stretched mode */ #container .articledisplay.stretched-mode { padding-top: 1.8rem; color: #000; } /* Article display - tags */ .articledisplay .tags { overflow: hidden; } .articledisplay .tags h2 { font-size: 1.6rem; font-weight: normal; color: #666; margin-bottom: 9px; } .articledisplay .tile-content .tags ul, .articledisplay .tile-content .tags li { margin: 0px; padding: 0px; float: left; list-style-type: none; margin-right: 10px;} .articledisplay .tile-content .tags li { margin-bottom: 10px;} .articledisplay .tile-content .tags li:before { display: none; } .articledisplay .tags li a { font-size: 1.4rem; display: block; text-decoration: none; color: #3c3b3b; height: 3rem; line-height: 3rem; padding: 0px 15px 0px 15px; border-radius: 9px; background: #e5e5e5; } .articledisplay .tags li a:hover { color: #fff; background: #e05400; } /* Article display - activity */ .articledisplay .calendar-date { color: #eee; font-size: 1.4rem; text-transform: uppercase; margin-bottom: 10px; background: #e05206; } .articledisplay .calendar-date .dates { margin-right: 30px; } .articledisplay .activity-instance { color: #666; font-size: 1.3rem; margin-bottom: 20px; box-sizing: border-box; padding: 5px 18px 5px 18px; overflow: hidden; display: table; width: 100%; border: 1px solid #ccc; } .articledisplay .tile-content .activity-instance ul { padding: 0px;} .articledisplay .tile-content .activity-instance ul, .articledisplay .tile-content .activity-instance .location, .articledisplay .tile-content .activity-instance a.expand { margin: 0px 0px 0px 20px;} .articledisplay .tile-content .activity-instance .dates { overflow: hidden; border-right: 1px solid #cc6600; display: table-cell; padding-left: 2px; height: 100%; width: 80px; vertical-align: top; } .articledisplay .tile-content .activity-instance .dates span { color: #e05206; display: block; } .articledisplay .tile-content .activity-instance .dates time { float: left; display: block; text-align: center; } .articledisplay .tile-content .activity-instance .dates time span.month { text-transform: uppercase; } .articledisplay .tile-content .activity-instance .dates time.start-date span.day { font-size: 2.4rem; font-weight: bold; } .articledisplay .tile-content .activity-instance .dates time.end-date { line-height: 1.3rem; margin-left: 12px; position: relative; } .articledisplay .tile-content .activity-instance .dates time.end-date span.day:before { content: " - "; position: absolute; top: 0px; left: -8px; } .articledisplay .tile-content .activity-instance .dates time.end-date span.day { font-size: 1.6rem; font-weight: bold; } .articledisplay .tile-content .activity-instance .dates time.end-date span.month { font-size: 1.15rem; } .articledisplay .activity-instance ul.days li:before, .articledisplay .activity-instance .location:before { content: ""; display: inline-block; vertical-align: middle; } .articledisplay .activity-instance ul.days li:before { width: 13px; height: 13px; margin-bottom: 3px; margin-right: 10px; position: static; background: url(images/sprite.png) -180px -220px no-repeat;} .articledisplay .activity-instance .location:before { width: 11px; height: 13px; margin: 0px 10px 2px 1px; background: url(images/sprite.png) -160px -220px no-repeat;} .articledisplay .activity-instance ul.days li { margin-right: 12px; text-transform: lowercase; padding-left: 0px;} .articledisplay .tile-content .activity-instance a.expand:before { content: "+"; color: #666; font-size: 2.3rem; margin-right: 10px; display: inline-block; vertical-align: top; text-decoration: none;} .articledisplay .tile-content .activity-instance a.expand { text-decoration: none; } .articledisplay .tile-content .activity-instance a.expand span { text-decoration: underline; } .articledisplay .tile-content .activity-instance a.expand:hover span { text-decoration: none; } /* Article display - ctwebform */ .articledisplay form.ctform table { width: auto; } .articledisplay form.ctform table tr { background: none; } .articledisplay form.ctform input, .articledisplay form.ctform select, .articledisplay form.ctform textarea { margin-bottom: 11px; } .articledisplay form.ctform span.ctwebform-element-validationerror { color: red;} .articledisplay form.ctform td.ctwebform-label { vertical-align: top; } .articledisplay form.ctform td.ctwebform-element-type-submit { text-align: right; } .articledisplay form.ctform .ctwebform-element-container-validationerror input, .articledisplay form.ctform .ctwebform-element-container-validationerror textarea { border-color: red;} /* Article display - slideshow */ .articledisplay .articleelement.gallery { margin: 0px auto 20px auto; } .articledisplay .articleelement.gallery .ctgallery-elements .gallery-file.filetype-4 /*video*/, .articledisplay .articleelement.gallery .ctgallery-elements .gallery-file .img-container { overflow: hidden; background: #e5e5e5; display: flex; display: -webkit-flex; /* Safari */ display: -ms-flex; align-items: center; -webkit-align-items: center; /* Safari 7.0+ */ -ms-align-items: center; } .articledisplay .articleelement.gallery .ctgallery-elements .gallery-file video, .articledisplay .articleelement.gallery .ctgallery-elements .gallery-file figure { margin: auto; } .articledisplay .articleelement.gallery .ctgallery-elements img { display: block; width: 100%; height: auto;} .articledisplay .articleelement.gallery .ctgallery-thumbnails button.slick-prev, .articledisplay .articleelement.gallery .ctgallery-thumbnails button.slick-next { height: 24px; width: 14px; min-width: 14px; margin: auto; top: 13px; bottom: 0; } .articledisplay .articleelement.gallery .ctgallery-thumbnails button.slick-prev::before, .articledisplay .articleelement.gallery .ctgallery-thumbnails button.slick-next::before { content: ""; } .articledisplay .articleelement.gallery .ctgallery-thumbnails button.slick-prev:hover, .articledisplay .articleelement.gallery .ctgallery-thumbnails button.slick-prev:focus, .articledisplay .articleelement.gallery .ctgallery-thumbnails button.slick-prev { left: -26px; background: url(images/sprite.png) no-repeat -240px -80px; } .articledisplay .articleelement.gallery .ctgallery-thumbnails button.slick-next:hover, .articledisplay .articleelement.gallery .ctgallery-thumbnails button.slick-next:focus, .articledisplay .articleelement.gallery .ctgallery-thumbnails button.slick-next { right: -26px; background: url(images/sprite.png) no-repeat -260px -80px; } .articledisplay .articleelement.gallery .ctgallery-thumbnails button.slick-prev, .articledisplay .articleelement.gallery .ctgallery-thumbnails button.slick-next { min-width: auto; } .articledisplay .articleelement.gallery .slick-slider { margin-bottom: 10px; } .articledisplay .articleelement.gallery .ctgallery-thumbnails { margin: 0px auto; } .articledisplay .articleelement.gallery .ctgallery-thumbnails .thumbnail-wrapper { outline: 0; padding: 11px 0px 11px 0px; margin-top: 14px; } .articledisplay .articleelement.gallery .ctgallery-thumbnails .thumbnail-wrapper img { margin: 0px auto; display: block; } .articledisplay .articleelement.gallery .ctgallery-thumbnails .thumbnail-wrapper.slick-current { padding: 6px 0px 6px 0px; background: #e5e5e5; position: relative; } .articledisplay .articleelement.gallery .ctgallery-thumbnails .thumbnail-wrapper.slick-current:before { content: ''; height: 0px; width: 0px; display: block; position: absolute; top: -14px; left: 0; right:0; margin-left: auto; margin-right: auto; /* Making this a triangle marker */ border-bottom: 14px solid #e5e5e5; border-left: 14px solid transparent; border-right: 14px solid transparent; } /* Article display - article inner grid */ /* (Not implemented for mobile, css only in default.css) */ /* User display */ .userdisplay .user-info { overflow: hidden; } .userdisplay .user-info .photo, .userdisplay .user-info .properties { float: left; } .userdisplay .user-info .photo { margin-right: 30px; } .userdisplay .user-info .properties .property { margin-bottom: 8px; } .userdisplay .user-info .properties .property span.label { font-weight: bold; display: inline-block; width: 80px; } .userdisplay .user-info a.vcard { display: inline-block; height: 30px; padding: 3px 0 0 45px; background: url(images/sprite.png) no-repeat -5px -407px; } .userdisplay .homearticle { margin-top: 10px; } .userdisplay .homearticle .digest { font-size: 1em; line-height: 2rem; } /* Full list, common list class for tiles like articlelist, searchresult and userlist */ .full-list { } .full-list h3 { font-size: 2.2rem; margin-bottom: 8px; } .full-list a, .full-list h3 a { text-decoration: none; color: #040404; } .full-list a h3:hover, .full-list h3 a:hover { text-decoration: underline; color: #003399; } .full-list .digest { overflow: hidden;} .full-list p { margin-top: 10px; margin-bottom: 0px; overflow: hidden;} .full-list .digest p:first-child { margin-top: 0px; } .full-list .byline, .full-list .calendar-date { margin-bottom: 10px; } .full-list .calendar-date { font-size: 1.4rem; color: #666; } .full-list article { border-bottom: 1px solid #eee; padding-top: 23px; padding-bottom: 27px; overflow: hidden; } .full-list ul.links { margin-top: 3px; } .full-list .thumbnail { float: left; } .full-list.busy { opacity:0.5; } /* Article list sortbar */ /* the sort select from articlefilter is moved with js into the article list */ .articlelist.full-list .sortbar { background: #999 none repeat scroll 0 0; padding: 7px 5px 3px 5px; height: 30px; text-align: right; } /* Article list - faq articles*/ .articlelist li article.faq { padding: 0px; margin-bottom: 10px; border: none; } .articlelist article.faq h3, .articlelist article.faq h3 a { color: #fff; } .articlelist article.faq h3 a:hover { text-decoration: none; } .articlelist article.faq h3 { margin: 0px; font-weight: normal; display: block; padding: 9px 18px 10px 18px; cursor: pointer; } .articlelist article.faq.collapsed h3 { background: #555; } .articlelist article.faq.expanded h3 { background: #e05400; } .articlelist article.faq h3:after { float: right; } .articlelist article.faq.expanded h3:after { content: '-';} .articlelist article.faq.collapsed h3:after { content: '+';} .articlelist article.faq .answer-wrapper { line-height: 2.7rem; overflow: hidden; background: #eee; } .articlelist article.faq.collapsed .answer-wrapper { display: none; } /* Search result */ .search-result ul.links a, .search-result h3 a:hover { text-decoration: underline; color: #003399;} .search-result b { font-weight: normal; color: #e05206; } .search-result a b:hover { color: #003399; } /* User list */ /* User list - search fields */ .userlist .search-fields { margin-bottom: 23px;} .userlist .search-fields .searchfield { overflow: hidden; } .userlist .search-fields input[type="text"] { width: 315px; } #placeholder-left .userlist .search-fields select, #placeholder-right .userlist .search-fields select, #placeholder-content:not(.no-right):not(.no-left) .userlist .search-fields select { width: 100%;} .userlist .search-fields select option { padding-top: 3px; padding-bottom: 3px; } /* User list - list layout */ .userlist { font-size: 1.4rem; } .userlist h2 { font-size: 2.2rem; font-weight: normal; margin-bottom: 5px; } .userlist a { text-decoration: underline; color: #003399; } .userlist h2 a { text-decoration: none; color: #040404; } .userlist h2 a:hover { text-decoration: underline; color: #003399; } .userlist .list-layout { overflow: hidden;} .userlist .list-layout .photo.no-avatar { width: 100px; height: 105px; background: url(images/sprite.png) no-repeat; background-position: 0px -40px; } .userlist .list-layout article.female .photo.no-avatar { background-position: -120px -40px; } .userlist .list-layout .properties { float: left; } .userlist .list-layout .properties span.property { display: block; } .userlist a.loadMore { color: #fff; display: block; margin: 14px auto 0px auto; width: 15rem; text-decoration: none; } .userlist a.loadMore.busy { background: none; } .userlist a.loadMore.busy span { display: none; } .userlist a.loadMore .spinner { margin: 0px auto; top: 14px; } /* User list - table layout */ .userlist .table-layout table th { border-bottom: 1px solid #e05206; } /* Monthly activity list */ .monthly-activity-list a { color: #3c3b3b; font-weight: bold; text-decoration: none; } .monthly-activity-list a:hover { color: #003399; text-decoration: underline; } .monthly-activity-list table caption { text-align: left; font-weight: normal; font-size: 4rem; line-height: 4.5rem; margin-bottom: 13px; } .monthly-activity-list table th, .monthly-activity-list table tr { background: none; } .monthly-activity-list table tr { border-bottom: 1px solid #ddd; } .monthly-activity-list table th, .monthly-activity-list table td { text-align: left; padding: 0px; } .monthly-activity-list table td { vertical-align: top;} .monthly-activity-list table tr.month, .monthly-activity-list table tr.month th { color: #e05206; border: none; } .monthly-activity-list table tr.month { border-bottom: 1px solid #e05206; } .monthly-activity-list table tr.month th { padding-top: 27px; padding-bottom: 7px; font-size: 1.8rem;} .monthly-activity-list table tr.month:first-child th { padding-top: 0px; } .monthly-activity-list table tr.activity td { font-size: 1.4rem; padding-top: 8px; padding-bottom: 8px; } .monthly-activity-list table td.duration { vertical-align: top; width: 96px; padding-left: 18px; } .monthly-activity-list table td.duration .dates { margin-right: 12px; overflow: hidden; border-right: 1px solid #ddd; } .monthly-activity-list table td.duration span { color: #e05206; display: block; } .monthly-activity-list table td.duration time { float: left; display: block; text-align: center; } .monthly-activity-list table td.duration time span.month { text-transform: uppercase; } .monthly-activity-list table td.duration time.start-date span.day { font-size: 2.4rem; font-weight: bold; } .monthly-activity-list table td.duration time.end-date { line-height: 1.3rem; margin-left: 12px; position: relative; } .monthly-activity-list table td.duration time.end-date span.day:before { content: " - "; position: absolute; top: 0px; left: -8px; } .monthly-activity-list table td.duration time.end-date span.day { font-size: 1.6rem; font-weight: bold; } .monthly-activity-list table td.duration time.end-date span.month { font-size: 1.15rem; } .monthly-activity-list table td.description a { display: block; } .monthly-activity-list table td.description .times, .monthly-activity-list table td.description .location { color: #666; font-size: 1.3rem; } .monthly-activity-list table td.description .times:before, .monthly-activity-list table td.description .location:before { content: ""; display: inline-block; vertical-align: middle; } .monthly-activity-list table td.description .times:before { width: 13px; height: 13px; margin-bottom: 3px; margin-right: 2px; background: url(images/sprite.png) -180px -220px no-repeat;} .monthly-activity-list table td.description .location:before { width: 11px; height: 13px; margin-bottom: 2px; margin-right: 5px; background: url(images/sprite.png) -160px -220px no-repeat;} .monthly-activity-list table td.description .times { margin-right: 12px; text-transform: lowercase; } /* Page navigator (used in e.g. full article/activity list and search result) */ .page-navigator { text-align: center; margin-top: 30px;} .page-navigator ul { display: inline-block; margin-bottom: 6px;} .page-navigator ul li { display: inline-block;} .page-navigator a { color: #e05206; text-decoration: none; display: block;} .page-navigator a:hover { background: #d9d9d9; } .page-navigator .first-page, .page-navigator .last-page, .page-navigator ul.pages span, .page-navigator .previous-page, .page-navigator .next-page { display: inline-block; height: 3.7rem; line-height: 3.7rem; width: 3.9rem; border: 1px solid #aea9a9; border-radius: 4px; } .page-navigator .next-page span, .page-navigator .previous-page span, .page-navigator .first-page span, .page-navigator .last-page span { display: none;} .page-navigator .first-page:after { content: "<<"; font-weight: bold; } .page-navigator .previous-page:after { content: "<"; font-weight: bold; } .page-navigator .next-page:after { content: ">"; font-weight: bold; } .page-navigator .last-page:after { content: ">>"; font-weight: bold; } /* Small lists, common list class for tiles like e.g. small articlelist, activitylist, rsslist */ .small-list { font-size: 1.4rem; } .small-list li { margin-bottom: 16px; } .small-list li:last-child { margin-bottom: 0px; } .small-list time, .small-list span.entry-postfix { color: #666; display: block; font-size: 1.3rem; } .small-list .bottomlink { float: right; } .small-list .bottomlink li { margin-bottom: 0px; } .small-list .bottomlink a:after { content: " \00bb"; } /* Small article list*/ .small-articlelist a { color: #3c3b3b; font-weight: bold; text-decoration: none; } .small-articlelist a:hover { color: #003399; text-decoration: underline; } /* Activity list */ .activity-list li { overflow: hidden; } .activity-list li:last-child { margin-bottom: 16px; } .activity-list span.start-date { float: left; display: block; width: 4.5rem; height: 4.5rem; margin-right: 18px; text-align: center; background: #e05206; } .activity-list span.start-date time { color: #fff; } .activity-list span.month, .activity-list span.day { display: block; } .activity-list span.day { font-size: 2.8rem; text-align: center; margin-top: 5px; } .activity-list span.month { font-weight: normal; text-transform: uppercase; } .activity-list a span.header { display: table-cell; vertical-align: middle; float: left; } .activity-list a:hover, .activity-list a span.header:hover { text-decoration: underline; color: #003399;} .activity-list .location { color: #666; font-size: 1.3rem; display: block; float: left; } /* News archive */ .newsarchive li { margin-bottom: 16px; } .newsarchive li:last-child { margin-bottom: 0px; } .newsarchive ul ul { margin: 16px 0px 0px 18px; } .newsarchive li.selected > a { color: #e05206; } .newsarchive .bottomlink { float: right; } .newsarchive .bottomlink a:after { content: " \00bb"; } /* Article elements tile */ .article-elements .linkcollection li { margin-bottom: 16px; } .article-elements .linkcollection li:last-child { margin-bottom: 0px; } .article-elements .tile-content h3, body.mobile #placeholder-content .article-elements .tile-content h3 { color: #3c3b3b; font-size: 2.2rem; margin-bottom: 18px; padding: 0px 0px 8px 0px; text-transform: none; border-bottom: 1px solid #acacac; background: none; } /* Side menu */ /* (Not implemented for mobile, css only in default.css) */ /* Search - simple search (all searchfields with only one input field and submit button, e.g. small searchinput, userlist search)*/ .simple-search input[type="text"] { float: left; padding: 0px 15px; } .simple-search button { min-width: 80px;} /* Link toolbar */ /* The link toolbar styling for placeholder top and bottom extends some of the css given here. */ body #container .linktoolbar { position: relative; overflow: visible; } .linktoolbar .links { display: inline-block; } .linktoolbar .links ul, .linktoolbar .links li { float: left; } .linktoolbar .links li:not(.last) { margin-right: 12px; } .linktoolbar .links span.label { font-size: 1.4rem; } .linktoolbar .links.sharing-links span.label { float: left; margin-left: 10px; margin-right: 5px; display: block; height: 4rem; line-height: 4rem; } .linktoolbar .links.follow-links span.label { font-weight: bold; display: block; margin-bottom: 10px;} .linktoolbar .links a:not(.font_size_link) span { display: none; } .linktoolbar .links a { display: inline-block; box-sizing: border-box; height: 40px; width: 40px; border-radius: 70px; background: #e1e1e1 url(images/sprite.png); } .linktoolbar .links a:hover { background-color: #df5300; } .linktoolbar .links a.print_link { background-position: 0px -340px; } .linktoolbar .links a.tipafriend_link { background-position: -60px -340px; } .linktoolbar .links a.facebook_link { background-position: -120px -340px; } .linktoolbar .links a.facebook_link:hover { background-position: -120px -400px; } .linktoolbar .links a.twitter_link { background-position: -180px -340px; } .linktoolbar .links a.twitter_link:hover { background-position: -180px -400px; } .linktoolbar .links a.linkedin_link { background-position: -240px -340px; } .linktoolbar .links a.linkedin_link:hover { background-position: -240px -400px; } .linktoolbar .links a.youtube_link { background-position: -300px -340px; } .linktoolbar .links a.youtube_link:hover { background-position: -300px -400px; } .linktoolbar .links a.googleplus_link { background-position: -418px -340px; } .linktoolbar .links a.googleplus_link:hover { background-position: -418px -400px; } .linktoolbar .links a.pinterest_link { background-position: -480px -340px; } .linktoolbar .links a.pinterest_link:hover { background-position: -480px -400px; } .linktoolbar .links a.delicious_link { background-position: -600px -340px; } .linktoolbar .links a.delicious_link:hover { background-position: -600px -400px; } .linktoolbar .links a.digg_link { background-position: -660px -342px; } .linktoolbar .links a.digg_link:hover { background-position: -660px -400px; } .linktoolbar .links a.reddit_link { background-position: -720px -340px; } .linktoolbar .links a.reddit_link:hover { background-position: -720px -400px; } .linktoolbar .links a.flickr_link { background-position: -360px -340px; } .linktoolbar .links a.flickr_link:hover { background-position: -360px -400px; } .linktoolbar .links a.font_size_link { text-align: center; text-decoration: none; position: relative; padding-top: 8px; } .linktoolbar .links a.font_size_link:not(:hover) { background: #e1e1e1; } .linktoolbar .links a.font_size_link:hover span { color: #fff; } .linktoolbar .links a.font_size_link .font-size-box { display: none; } .linktoolbar .links a.font_size_link:hover .font-size-box { color: #353535; text-align: left; display: block; position: absolute; top: 50px; left: 0px; z-index: 2; box-sizing: border-box; width: 330px; padding: 5px 8px 0px 8px; background: #efefef; box-shadow: 2px 3px 7px 0 rgba(172, 171, 171, 0.5); } /* Suggestion form */ .linktoolbar .suggestionform:not(.visible) { display: none; } .linktoolbar .suggestionform.visible { padding: 2px 20px 20px 20px; box-shadow: 2px 3px 7px 0px rgba(172, 171, 171, 0.5); border: 1px solid #eaeaea; background: #fff; } .linktoolbar .suggestionform.visible.success { height: 68px; } .linktoolbar .suggestionform a.close-button { display: block; height: 30px; width: 30px; position: absolute; top: -11px; right: -11px; background: url(images/sprite.png) -60px 0px no-repeat; } .linktoolbar .suggestionform a.close-button span { display: none; } .linktoolbar .suggestionform h1 { text-transform: uppercase; color: #666666; font-size: 1.6rem; font-weight: normal; margin-bottom: 0px; } .linktoolbar .suggestionform .input-elements { width: 340px; margin-right: 20px;} .linktoolbar .suggestionform .error { border: 2px solid red; } .linktoolbar .suggestionform .message { border: none; padding: 0px; } .linktoolbar .suggestionform .error ul li:before { content: ""; display: inline-block; height: 0.6rem; position: absolute; left: 0; top: 0.8rem; width: 0.6rem; background: none repeat scroll 0 0 #e05206; } .linktoolbar .suggestionform .error ul li { list-style-type: none; padding-left: 18px; position: relative; } .linktoolbar .suggestionform label, .linktoolbar .suggestionform textarea, .linktoolbar .suggestionform input:not([type="submit"]) { display: block; box-sizing: border-box; width: 100%; } .linktoolbar .suggestionform label { margin-top: 4px; margin-bottom: 2px; } .linktoolbar .suggestionform input.inputerror { border: 2px solid red; } .linktoolbar .suggestionform input[type="submit"] { margin-top: 10px; float: right; } .linktoolbar .suggestionform .ctcaptchatextual label, .linktoolbar .suggestionform .ctcaptchatextual input { display: inline-block; margin-right: 10px;} /* Login form */ .login-form { overflow: hidden; } #placeholder-content.no-left .login-form, #placeholder-content.no-right .login-form, #placeholder-content.no-left.no-right .login-form, body.mobile #placeholder-content .login-form { width: 365px; } .login-form label, .login-form input { display: inline-block; } .login-form label { width: 99px; } .login-form .label-input-group { margin-bottom: 11px; } .login-form input:not([type="submit"]) { width: 242px; } .login-form a.toggler { float: left; cursor: pointer; height: 3.2rem; line-height: 3.2rem; } .login-form a.button, .login-form input[type="submit"] { float: right; } .login-form .changePassword form { clear: both; } /* User bar */ #container .tile-common.userbar { font-size: 1.4rem; color: #fff; text-align: right; background: #e05206; } .userbar a { color: #fff; } .userbar .user, .userbar .hyper-links { display: inline-block; } .userbar .hyper-links { margin-left: 18px; } /* Billboard tile, default styling */ /* (No common billboard styling for desktop and mobile is done here except slick dots and slider styling, so each channel has their inpendendent styling done in their stylesheet. Remember to update both default.css and mobile.css if changes that should affect both channels are done) */ /* slick buttons, used in billboard */ /* slick dots, used in billboard */ /* (Not implemented for mobile, css only in default.css) */ /* slick slider, used in billboard */ .billboard .slick-slider { margin-bottom: 0px; } /* slick buttons, used in billboard */ /* File list */ .file-list table th, .file-list table td { padding-top: 0px; padding-bottom: 0px; } .file-list h3 { margin-bottom: 10px; } .file-list table caption { font-weight: normal; text-align: left; font-size: 2.8rem; padding-bottom: 10px; } .file-list table td.size { width: 130px; } .file-list table th.name, .file-list table td.name { padding-left: 10px; } .file-list table td.name a { padding: 4px 0px 4px 0px; float: left; } .file-list table td.name a:before { content: ""; height: 25px; width: 20px; display: inline-block; float: left; margin-right: 10px; background: url(images/sprite.png) 0px -180px no-repeat; /* Default icon */ } .file-list table td.name a.doc:before, .file-list table td.name a.docx:before, .file-list table td.name a.odf:before { background-position: -40px -180px; /* Word icon */} .file-list table td.name a.xls:before, .file-list table td.name a.ods:before { background-position: -80px -180px; /* Xls icon */} .file-list table td.name a.ppt:before, .file-list table td.name a.odp:before { background-position: -120px -180px; /* Powerpoint icon */} .file-list table td.name a.pdf:before { background-position: -160px -180px; /* Pdf icon */} .file-list table td.name a.jpg:before, .file-list table td.name a.jpeg:before, .file-list table td.name a.gif:before, .file-list table td.name a.bmp:before, .file-list table td.name a.png:before { background-position: -200px -180px; /* Image icon */} .file-list table td.name a.mov:before, .file-list table td.name a.swf:before, .file-list table td.name a.wmv:before, .file-list table td.name a.avi:before, .file-list table td.name a.mp4:before { background-position: -240px -180px; /* Movie icon */} /* Site map */ .sitemap li { padding-left: 18px; margin-top: 4px; list-style-type: none; position: relative; } .sitemap li:before { content: ""; position: absolute; left: 0px; top: 0.8rem; display: inline-block; box-sizing: border-box; height: 0.6rem; width: 0.6rem; background: #e05206; } .sitemap li li:before { background: none; border: 1px solid #e05206; } .sitemap li li li:before { border: none; background: #555; } .sitemap li li li li:before { background: none; border: 1px solid #555; } /* Article rating */ .article-rating { overflow: hidden; } .article-rating form { float: left;} .article-rating button, .article-rating input[type="submit"] { min-width: auto; font-size: 0px; textIndent: '-1px'; } .article-rating .rating-label { color: #666; font-size: 1.4rem; float: left; margin-top: 2px; } .article-rating .rating-container.active button, .article-rating .rating-container.active input[type="submit"] { cursor: pointer; } /* Article rating - star rating */ .article-rating .starrating fieldset { display: none; } .article-rating .starrating .stars-wrapper { float: left; margin-right: 8px; } .article-rating .starrating.active .stars-wrapper { cursor: pointer; } /* More styling is done in javascript (starrating.js), where a star-sprite image is used. */ /* Article rating - agreedisagree rating */ .article-rating .agreedisagreerating .rating-label { margin-top: 3px; } .article-rating .agreedisagreerating button { width: 28px; min-width: 28px; height: 24px; margin-right: 8px; float: left; background: url(images/sprite.png) no-repeat; } .article-rating .agreedisagreerating button.disagree { margin-left: 8px; margin-top: 7px; } .article-rating .agreedisagreerating.active button.agree { background-position: 0px -260px; } .article-rating .agreedisagreerating.active button.agree:hover { background-position: 0px -300px; } .article-rating .agreedisagreerating.active button.disagree { background-position: -40px -260px; } .article-rating .agreedisagreerating.active button.disagree:hover { background-position: -40px -300px; } .article-rating .agreedisagreerating.disabled button.agree { background-position: 0px -220px; } .article-rating .agreedisagreerating.disabled button.disagree { background-position: -40px -220px; } /* Article rating - recommend rating */ .article-rating .recommendrating input[type="submit"] { height: 23px; width: 27px; min-width: 27px;margin-right: 8px; background: url(images/sprite.png) no-repeat; } .article-rating .recommendrating.active input[type="submit"] { background-position: -80px -260px; } .article-rating .recommendrating.active input[type="submit"]:hover { background-position: -80px -300px; } .article-rating .recommendrating.disabled input[type="submit"] { background-position: -80px -220px; } /* Entity comment */ .entitycomment {} /* Entity comment - comments */ .entitycomment .toggle-link-wrapper button { display: block; margin: 0px auto 18px auto; } .entitycomment h2 { padding-bottom: 10px; border-bottom: 1px solid #aeabab; } .entitycomment .comments { margin-bottom: 30px; } .entitycomment .comments a { color: #555; } .entitycomment .comments a:hover { color: #003399; } .entitycomment .comments a.toggler { text-decoration: none; float: right; padding-right: 9px; margin-right: 10px; border-right: 1px solid #aeabab; } .entitycomment .comments li a.toggler:after { font-size: 2rem; color: #aeabab; } .entitycomment .comments li.expanded a.toggler:after { content: "-"; } .entitycomment .comments li.collapsed a.toggler:after { content: "+"; } .entitycomment .comments a.toggler span { display: none; } .entitycomment .comments ul li { margin-top: 20px; } .entitycomment .comments ul ul { margin-left: 18px; } .entitycomment .comments ul ul ul ul ul { margin-left: 0px; /* Only have indentation in four levels */ } .entitycomment .comments li.collapsed > ul, .entitycomment .comments li.collapsed > div > article > div.post-content { display: none; } .entitycomment .comments .post-body { margin-bottom: 3px; margin-right: 45px; } .entitycomment .comments button, .entitycomment .comments .entity-comment-post-tag-offensive { float: right;} .entitycomment .comments .entity-comment-post-tag-offensive button { width: 11px; min-width: 11px; height: 11px; cursor: pointer; margin-top: 6px; background: url(images/sprite.png) -140px -220px no-repeat; } .entitycomment .comments button span { display: none; } .entitycomment .comments button:hover { color: #003399; } .entitycomment .comments button.entity-comment-answer { margin-right: 15px; } .entitycomment .comments .headerblock h3 { font-size: 1.6rem; font-weight: bold; margin-right: 5px; } .entitycomment .comments .headerblock h3 a { text-decoration: none; } .entitycomment .comments li.collapsed .headerblock h3, .entitycomment .comments li.collapsed .headerblock h3 a { color: #555555;} .entitycomment .comments .headerblock header, .entitycomment .comments .headerblock footer, .entitycomment .comments .headerblock .entitycomment-urls { display: inline-block; } .entitycomment .comments .headerblock footer, .entitycomment .comments .headerblock .entitycomment-urls { font-size: 1.3rem; font-style: italic; color: #555; } .entitycomment .comments .headerblock footer { margin-right: 10px;} .entitycomment .comments .headerblock footer time:before { content: "•"; display: inline-block; margin-right: 9px; } .entitycomment .comments a.entity-comment-answer { font-size: 1.4rem; } .entitycomment .comments span.response-to { margin-right: 6px; } .entitycomment .comments span.response-to:before { content: ""; display: inline-block; height: 8px; width: 14px; margin-right: 10px; background: url(images/sprite.png) -120px -220px no-repeat; } .entitycomment .entitycomment-trackback-link { margin-bottom: 16px; text-align: right;} /* Entity comments - single thread */ .entitycomment .comments.single-thread li { margin-top: 10px; padding-bottom: 11px; border-bottom: 1px solid #eee; } /* Entity comment - form */ .entitycomment-form { overflow: hidden; } .entitycomment-form-note { margin: 14px 0px 10px 0px; } .entitycomment-form-quoted { margin-top: 14px; font-style: italic; } .entitycomment-form label, .entitycomment-form textarea, .entitycomment-form input:not([type="submit"]) { float: left; } .entitycomment-form textarea, .entitycomment-form input:not([type="submit"]) { margin-bottom: 10px; } .entitycomment-form textarea, .entitycomment-form input:not([type="submit"]) { width: 439px; } .entitycomment-form label { clear: both; width: 175px;} .entitycomment-form .ctcaptchatextual label { width: 310px; } .entitycomment-form .entitycomment-form-submit { float: right; clear: both;} /* Entity comment answer form */ .entitycomment .comments form.entitycomment-form { margin-left: 18px; } .entitycomment .comments form.entitycomment-form h3 { margin-top: 10px; } .entitycomment .comments form.entitycomment-form textarea, .entitycomment .comments form.entitycomment-form input:not([type="submit"]) { width: 100%; box-sizing: border-box; } /* Advanced search */ /* (Not implemented for mobile, css only in default.css) */ /* Calendar */ .calendar { overflow: hidden; background: #fff; } .calendar header .month-year-header { text-align: center; font-weight: bold; display: inline-block; } .calendar header span.pageLink { display: inline-block; cursor: pointer; background: url(images/sprite.png) no-repeat; } .calendar header span.pageLink.next-year, .calendar header span.pageLink.previous-year { width: 14px; height: 11px; } .calendar header span.pageLink.previous-year { background-position: -160px 0px; } .calendar header span.pageLink.next-year { background-position: -180px 0px; } .calendar header span.pageLink.next-month-year, .calendar header span.pageLink.previous-month-year { width: 15px; height: 22px; } .calendar header span.pageLink.next-month-year { background-position: -220px 0px; } .calendar header span.pageLink.previous-month-year { background-position: -200px 0px; } .calendar header .next-links { float: right; text-align: right;} .calendar header .previous-links { float: left; } .calendar table { margin-top: 10px; margin-bottom: 20px; } .calendar table tr { background: #fff; } .calendar table th, .calendar table td { text-align: center; padding: 4px; font-size: 1.6rem; } .calendar table th { font-weight: normal; border-bottom: 2px solid #555; } .calendar table td.inactive, .calendar table td.previousMonth, .calendar table td.nextMonth { color: #999; } .calendar table td span { padding: 0px 4px 1px 4px; border-radius: 15px; } .calendar table td.eventful span { cursor: pointer; border: 2px solid #efa882; background: #efa882; } .calendar table td.selected span { color: #fff; border: 2px solid #e05206; background: #e05206; } .calendar table td.today span { border: 2px solid #e05206; } .calendar ul.activity-details, .calendar ul.activity-details li { overflow: hidden; } .calendar ul.activity-details { font-size: 1.4rem; } .calendar ul.activity-details .events-today-title { text-transform: uppercase; margin-bottom: 5px;} .calendar ul.activity-details .text, .calendar ul.activity-details span.all-day, .calendar ul.activity-details span.start-date { display: inline-block; float: left; } .calendar ul.activity-details span.all-day, .calendar ul.activity-details span.start-date { margin-right: 5px; } .calendar ul.activity-details .location { color: #666; font-size: 1.3rem; } .calendar ul.links { font-size: 1.4rem; float: right; margin-top: 16px; } .calendar ul.links a:after { content: " »"; } /* Datepicker */ /* (Not implemented for mobile, css only in default.css) */ /* Tooltip */ .tooltip.visible { display: block; font-size: 1.4rem; } .tooltip.visible:before { content: ''; display: block; position: absolute; top: -10px; left: 20px; margin: auto; padding-top: 5px; width: 0; height: 0; /* Making it a triangle */ border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 13px solid #e1e1e1; } .tooltip.hidden { display: none; } .tooltip p { margin: 8px 0px 0px 0px; padding: 3px 8px 5px 8px; max-width: 290px; box-sizing: border-box; background: #e1e1e1; } /* -- Placeholder top -- */ /* (Styling for tiles in placeholder top are done in default.css and mobile.css since desktop and mobile uses different tiles) */ /* -- Placeholder bottom -- */ /* (Some styling for tiles in placeholder bottom are done in default.css and mobile.css since desktop and mobile uses different tiles) */ /* Newsletter form */ #placeholder-bottom .newsletter-form { margin-bottom: 15px;} #placeholder-bottom .newsletter-form h3 { font-size: 1.6rem; font-weight: bold; margin-bottom: 2px; } #placeholder-bottom .newsletter-form input[type="text"] { height: 3.2rem; line-height: 3.2rem; width: 140px; float: left; color: #444343; padding: 0px 10px 0px 10px; font-size: 1.4rem; border: none; background: #ccc; } #placeholder-bottom .newsletter-form input[type="submit"] { min-width: 80px; padding: 0px; float: left; } #placeholder-bottom .newsletter-form .signon-options, #placeholder-bottom .newsletter-form .subscription-categories { margin-bottom: 5px; } /* Link toolbar */ /* This styling extends some styling written above for linktoolbar */ #placeholder-bottom .linktoolbar .links li:not(.last) { margin-right: 9px;} #placeholder-bottom .linktoolbar .links span.label { font-size: 1.6rem; font-weight: bold; } #placeholder-bottom .linktoolbar .links a { height: 53px; width: 53px; border-radius: 70px;} /* Article filter tile */ /* enable this to make items with count 0 disappear */ /* .articlefilter .filteritems .noitems { display:none; } */ #placeholder-right .articlefilter h1, #placeholder-left .articlefilter h1 { margin-bottom: 0; background: #e05206 none repeat scroll 0 0; } .articlefilter h2 { margin-top:12px; font-size: 1.6rem; text-transform: uppercase; font-weight: bold; } .articlefilter h2.collapsable { cursor: pointer; } .articlefilter h2.collapsable:hover { color: #e05206; text-decoration:underline; } .articlefilter h2.collapsable .postcontent:after { content:" \2013 " } .articlefilter h2.collapsable.collapsed .postcontent:after { content:" + " } .articlefilter h2 span { text-transform: none; } .articlefilter h2 span.postcontent { float: right;} .articlefilter .tile-content { background: #eaeaea; } .articlefilter input[type=text] { font-weight: bold; } .articlefilter input[type=submit] { float: right; min-width: 10px; height: 2.4rem; line-height: 2.4rem; margin-left: 5px; } .articlefilter .range input.from, .articlefilter .range input.to { width: 80px; } .articlefilter .freetext input.freetext { width: 190px; } .articlefilter ul li label { cursor: pointer; } .articlefilter ul li label:hover { text-decoration:underline; } .articlefilter ul li.noitems label { cursor: not-allowed; } .articlefilter ul li.noitems label:hover { text-decoration:none; } .articlefilter ul.valuelist.type-tagcloud { line-height: 3.0rem; } .articlefilter ul.valuelist.type-tagcloud li { display:inline-block; xheight: 32px; xline-height: 1.6rem;} .articlefilter ul.valuelist.type-tagcloud li input { display: none; } .articlefilter ul.valuelist.type-tagcloud li label { height: 22px; font-size: 1.4rem; display: block; color: black; padding: 1px 6px 8px 6px; margin:5px 10px 5px 0px; border-radius: 9px; background: #999999; } .articlefilter ul.valuelist.type-tagcloud li label.selected { color: #fff; background: #e05400; } .articlefilter ul.valuelist.type-tagcloud li label:hover { color: #fff; background: #e05400; } .articlefilter ul.valuelist.type-tagcloud li label.selected:hover { } .articlefilter ul.valuelist.type-tagcloud li.noitems label { color: #3c3b3b; background: #cccccc; } .articlefilter ul.valuelist.type-tagcloud li.noitems label.selected { background: #e3b59c; } /* -- Lightbox -- */ /* (Not implemented for mobile, css only in default.css) */ /* -- Direct Edit -- */ .directedit-link-container { width: 100%; margin-bottom: 10px; overflow: hidden; } .directedit-link-container ul, .directedit-link-container-top, .directedit-link-container-bottom { clear: both; float: right;} #placeholder-bottom .directedit-link-container ul, #placeholder-bottom .directedit-link-container-top, #placeholder-bottom .directedit-link-container-bottom { float: left;} .directedit-link-container ul li { float: left; list-style-type: none; margin-right: 10px; } div.directedit-link-container li a { display: block; height: 16px; width: 16px; background: url(images/sprite.png) no-repeat; } div.directedit-link-container li span { display: none; } div.directedit-link-container li a.new-article { background-position: -400px 0px; } div.directedit-link-container li a.edit-category { background-position: -420px 0px; } div.directedit-link-container li a.new-category { background-position: -440px 0px; } div.directedit-link-container li a.delete-category { background-position: -460px 0px; } div.directedit-link-container li a.edit-article { background-position: -480px 0px; } div.directedit-link-container li a.delete-article { background-position: -500px 0px; } /* -- Elements for rwd -- */ /* (Styled in different sections in default.css and mobile.css ) */ /* Mobile menu */ .mobilemenu { position: relative; } .mobilemenu .toggle-link-wrapper { position: absolute; } .mobilemenu .toggle-link-wrapper a { display: block; width: 60px; height: 60px; background: url(images/sprite.png) -60px -620px no-repeat; } .mobilemenu .toggle-link-wrapper a.open { background: url(images/sprite.png) -60px -680px no-repeat; } .mobilemenu .toggle-link-wrapper span { display: none; } .mobilemenu .tile-content { display: none; overflow: hidden; position: relative; box-sizing: border-box; border-top: 1px solid #fff; position: absolute; top: 0; right: 0; z-index: 1;} .mobilemenu > .tile-content > ul { display: block; transition: all 0.3s ease; -webkit-transform: translate3d(0, 0, 0); } .mobilemenu > .tile-content > ul[data-activelevel="0"] { left: 0%; } .mobilemenu > .tile-content > ul[data-activelevel="1"] { left: -100%; } .mobilemenu > .tile-content > ul[data-activelevel="2"] { left: -200%; } .mobilemenu > .tile-content > ul[data-activelevel="3"] { left: -300%; } .mobilemenu > .tile-content > ul[data-activelevel="4"] { left: -400%; } .mobilemenu > .tile-content > ul[data-activelevel="5"] { left: -500%; } .mobilemenu > .tile-content > ul[data-activelevel="6"] { left: -600%; } .mobilemenu > .tile-content > ul[data-activelevel="7"] { left: -700%; } .mobilemenu > .tile-content > ul[data-activelevel="8"] { left: -800%; } .mobilemenu > .tile-content > ul[data-activelevel="9"] { left: -900%; } .mobilemenu > .tile-content ul { left: 100%; } .mobilemenu ul { display: none; position: absolute; top: 0; list-style-type: none; width: 100%; padding: 0; z-index: 11; } .mobilemenu li.current ul { display: block; } .mobilemenu ul.active { display: block; } .mobilemenu li { overflow: visible; border-bottom: 1px solid #fff; background: #555; } .mobilemenu li.overview { background: #e05206; } .mobilemenu li:last-child { border-bottom: none; } .mobilemenu li a { color: #fff; font-size: 2.5rem; line-height: 3rem; text-decoration: none; display: block; padding: 15px 30px 20px 35px; } .mobilemenu li.has-submenu > a:after, .mobilemenu li.overview > a:after { content: ""; float: right;} .mobilemenu li.has-submenu > a:after { width: 16px; height: 28px; margin-top: 4px; background: url(images/sprite.png) -120px -620px no-repeat; } .mobilemenu li.overview > a:after { margin-top: 3px; width: 30px; height: 30px; background: url(images/sprite.png) -200px -620px no-repeat; } .mobilemenu li.overview > a { padding-left: 25px; } .mobilemenu li.levelup > a { padding-left: 26px; } .mobilemenu li.levelup > a:before { content: ""; width: 16px; height: 28px; float: left; margin-right: 22px; margin-top: 4px; background: url(images/sprite.png) -160px -620px no-repeat; } .mobilemenu ul ul li > a { padding-left: 45px; } .mobilemenu li .spinner { display: none; } .mobilemenu li.busy.has-submenu > a { background-image: none; } .mobilemenu li.busy .spinner { display: block; top: -14px; left: 413px; } /* Small search input - rwd-toggle style */ /* (styled in section placeholder top in mobile.css and inside media query (for tablet portrait) in default.css) */ /* The style for mobile and tablet is almost identical, so any changes done for this must be done two places The reason for this is small-searchinput should be styled in two different ways for desktop, one for ordinary display and one inside a breakpoint. Having it here in style.css will make them affect each other.*/ /* -- Debug info -- */ table.debuginfo { width: auto; margin-bottom: 10px; } table.debuginfo tr { background: #fff; } /* ======== CtFrontendCssService: end of file style.css ======== */ /* ======== CtFrontendCssService: start of css for channel [default] ======== */ /* -- Default channel specific style -- */ /* Empty "header comments": See style.css for further description of the purpose of thse. */ /* -------------------------------------------------------------------------- */ /* 1. General HTML elements */ /* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */ /* 2. Container/placeholder positioning */ /* -------------------------------------------------------------------------- */ #container { } /* Define all tiles in placholder top that shouldn't be visible in the sticky version */ #placeholder-top.sticky-scrolled .standard-menu.quick-mode, #placeholder-top.sticky-scrolled .tile-common:not(.standard-menu):not(.mega-menu) { display: none; } #main-content { margin-top: 20px; } #placeholder-left { clear: both; float: left; width: 32.1%; margin-right: 18px; } #placeholder-content { float: left; width: 32.1%; } /*#placeholder-content.no-left, #placeholder-content.no-right { width: 66%; }*/ #placeholder-content.no-right.no-left { width: 100%; max-width: 100%; } #placeholder-right { float: right; width: 32.1%; } #placeholder-bottom { overflow: hidden; clear: both; } #coretrek-footer { margin-top: 8px; margin-bottom: 30px; text-align: right; } /* Do not set overflow hidden on this element since it will break tiles with stretched background and tiles with shadows */ .inner-wrapper { max-width: 960px; margin: 0 auto; /*padding: 0px 30px 0px 30px;*/ } /* -------------------------------------------------------------------------- */ /* 3. None tile spesific common styles */ /* -------------------------------------------------------------------------- */ /* Form elements */ /* iframe */ /* Content link */ /* Tables */ /* Colofon */ /* -- Placeholder top -- */ /* -------------------------------------------------------------------------- */ /* 4. Common tile styling */ /* -------------------------------------------------------------------------- */ /* IMPORTANT INFO: What we do here is to set the style for the tile common classes. We do two things: 1. Add border, header and other stuff to create "tile-look". In the default design, this layout is used in the left and right placeholders. 2. Remove this layout for tiles in placeholder-top, placeholder-content, placeholder-content-no-right and placeholder-bottom. Tiles here are usually styled differently Since 2. overrides the default tile styles for the listed placeholder, you need to be equally specific when setting any of these styles. */ /* -- Across tiles and placeholders, and also some frontpage specific styling -- */ /* RWD toggle */ .toggle-link-wrapper { display: none; } /* -- Placeholder top -- */ /* -- Placeholder content -- */ /* Tiles with stretched background, that are tiles where background stretches outside placeholders inner wrapper */ #placeholder-top .sitelocator, #placeholder-top .standard-menu:not(.quick-mode), #placeholder-top .mega-menu, #container .tile-common.stretched-mode { clear: both; margin-left: -100%; margin-right: -100%; } #container #placeholder-content > .stretched-mode { margin-top: -20px; /* To override padding set on #main-content */ } #placeholder-top .sitelocator .tile-content, #placeholder-top .mega-menu .tile-content, #placeholder-top .standard-menu:not(.quick-mode) .tile-content, #container .tile-common.stretched-mode header, #container .tile-common.stretched-mode .tile-content { max-width: 960px; margin: 0px auto; } /* But all tiles in the stretched top content placeholder should always have full width, which includes the tile content as well. Override. */ #container #placeholder-stretched-top-content .tile-common { margin: 0px; } #container #placeholder-stretched-top-content .tile-content { width: 100%; max-width: 100%; } /* -------------------------------------------------------------------------- */ /* 5. Styling for specific tiles and other components */ /* -------------------------------------------------------------------------- */ /* -- In all placeholders -- */ /* Some styling is given here to override global styling from above, and some styling for elements here are also overrided for certain placeholders below this section */ /* Full articledisplay */ .articledisplay h3 { margin-bottom: 5px; } .articledisplay .tile-content ul { padding-left: 20px; } .articledisplay .tile-content ol { padding-left: 38px; } /* Article display - blockquote */ .articledisplay blockquote { margin-left: 20px; margin-right: 20px; } /* Article display - stretched mode */ /* Article display - tags */ /* Article display - activity */ .articledisplay .calendar-date { padding: 5px 18px 7px 18px; } .articledisplay .activity-instance { padding: 5px 18px 5px 18px; } /* Article display - ctwebform */ /* Article display - slideshow */ .articledisplay .articleelement.gallery { width: 635px; } .articledisplay .articleelement.gallery .ctgallery-elements .gallery-file.filetype-4 /*video*/, .articledisplay .articleelement.gallery .ctgallery-elements .gallery-file .img-container { height: 410px; } .articledisplay .articleelement.gallery .ctgallery-thumbnails { width: 555px; } .articledisplay .articleelement.gallery .ctgallery-thumbnails .thumbnail-wrapper img { height: 82px; width: 149px; } .articledisplay .articleelement.gallery .ctgallery-thumbnails .thumbnail-wrapper.slick-center img { height: 92px; width: 149px; } /* Article display - article inner grid */ /* (Only implemented for desktop) */ .articledisplay .article-inner-grid { overflow: hidden; width: 100%; } .articledisplay .article-inner-grid .grid-item { float: left; overflow: hidden; margin: 0px 0px 18px 18px; } .articledisplay .article-inner-grid.columns-2 .grid-item:nth-child(2n + 1), .articledisplay .article-inner-grid.columns-3 .grid-item:nth-child(3n + 1), .articledisplay .article-inner-grid.columns-4 .grid-item:nth-child(4n + 1) { clear: left; margin-left: 0px; } .articledisplay .article-inner-grid .grid-item img { width: 100%; height: auto; } /* Not in use and gives errors in my ide. .articledisplay .article-inner-grid.columns-2 .grid-item { width: calc((100% - 18px * 1) / 2); } .articledisplay .article-inner-grid.columns-3 .grid-item { width: calc((100% - 18px * 2) / 3); } .articledisplay .article-inner-grid.columns-4 .grid-item { width: calc((100% - 18px * 3) / 4); }*/ /* User display */ /* Full list, common list class for tiles like articlelist, searchresult and userlist */ .full-list .thumbnail { margin-right: 18px; } /* Article list - faq articles*/ .articlelist article.faq h3 { padding: 9px 18px 10px 18px; } .articlelist article.faq .answer-wrapper { padding: 3px 18px 13px 18px; } /* Search result */ /* User list */ /* User list - search fields */ #placeholder-left .userlist .search-fields input[type="text"], #placeholder-right .userlist .search-fields input[type="text"], #placeholder-content:not(.no-right):not(.no-left) .userlist .search-fields input[type="text"] { width: 159px; } .userlist .search-fields select { width: 196px; min-width: 189px; height: 3.5rem; } .userlist .search-fields .searchfield + select { margin-top: 18px; } #placeholder-left .userlist .search-fields select, #placeholder-right .userlist .search-fields select, #placeholder-content:not(.no-right):not(.no-left) .userlist .search-fields select { margin-top: 18px; width: 100%; } .userlist .search-fields select.department { margin-right: 30px; } /* User list - list layout */ .userlist .list-layout .photo { float: left; margin-right: 40px; } #placeholder-left .userlist .list-layout .photo, #placeholder-right .userlist .list-layout .photo, #placeholder-content:not(.no-right):not(.no-left) .userlist .list-layout .photo { margin-right: 10px; } #placeholder-left .userlist .list-layout .properties, #placeholder-right .userlist .list-layout .properties, #placeholder-content:not(.no-right):not(.no-left) .userlist .list-layout .properties { width: 160px; } /* User list - table layout */ /* Monthly activity list */ .monthly-activity-list table td.description .times, .monthly-activity-list table td.description .location { display: inline-block; } /* Page navigator (used in e.g. full article/activity list and search result) */ /* Small lists, common list class for tiles like e.g. small articlelist, activitylist, rsslist */ .small-list h3 { padding: 6px 0px 3px 0px; } /* Small article list*/ /* Activity list */ .activity-list .location, .activity-list a span.header { width: 18.2rem; } /* News archive */ /* Small articledisplay */ /* Small articledisplay - secondary design (without e.g. paddings and shadow) */ /* Article elements tile */ /* Side menu */ /* (Only implemented for desktop) */ .side-menu { box-shadow: none; } .side-menu h3 { font-size: 1.8rem; color: #555; padding-bottom: 5px; margin-bottom: 12px; border-bottom: 3px solid #555; background: none; } .side-menu ul:first-child > li { margin: 0px; border-bottom:1px solid #ccc; } .side-menu a, .side-menu li.active > span, .side-menu li.sub-active > span { text-decoration: none; font-size: 1.8rem; color: #040404; display: block; padding: 7px 0px 8px 18px; border-bottom: 1px solid #c4c4c4; } .side-menu .tile-content a:hover { color: #e05206; text-decoration: underline; background: #eaeaea; } #placeholder-right .side-menu a:hover { color:#fff; } .side-menu .tile-content > ul > li.active.expanded + li a, .side-menu .tile-content > ul > li.sub-active.expanded + li a { border-top: 1px solid #c4c4c4; } #placeholder-right .side-menu li.expanded:not(.active):not(.sub-active) > a { color:#fff; background:#055a87; } .side-menu li.last span, .side-menu li.last a { border: none; } .side-menu li li a, .side-menu li li.active span { border: none; font-size: 1.6rem; padding-left: 0px; } .side-menu ul ul ul { padding-left: 9px; } .side-menu li > span span { cursor: pointer; } .side-menu li > span, .side-menu li a { position: relative; padding-right: 12px; } .side-menu li.collapsed ul { display: none; } .side-menu span.child-indicator { color: #040404; } .side-menu span.child-indicator:after { font-size: 2.8rem; position: absolute; top: 3px; } .side-menu li.collapsed > span span.child-indicator:after, .side-menu li.collapsed > a span.child-indicator:after { content: "+"; right: 9px; } .side-menu a:hover > span span.child-indicator:after, .side-menu a:hover span.child-indicator:after { color:#fff; } .side-menu li.expanded > span span.child-indicator:after, .side-menu li.expanded > a span.child-indicator:after { content: "-"; right: 12px; top: 0; font-size: 3.4rem; } .side-menu .tile-content > ul > li.expanded > ul { background: #eaeaea; } .side-menu ul ul { padding-left: 27px; } .side-menu li li.active > a, .side-menu li li.active > span { color: #e05206; } /* Search - simple search (all searchfields with only one input field and submit button, e.g. small searchinput, userlist search)*/ .simple-search input[type="text"] { height: 3rem; line-height: 3rem; } /* Link toolbar */ /* The link toolbar styling for placeholder top and bottom extends some of the css given here. */ /* Suggestion form */ .linktoolbar .suggestionform.visible { position: absolute; top: 65px; left: -20px; height: 345px; } .linktoolbar .suggestionform.visible.above { top: -380px; } .linktoolbar .suggestionform.visible.above.success { top: -103px; } .linktoolbar .suggestionform .input-elements { float: left; } .linktoolbar .suggestionform .error { width: 210px; float: right; } /* Login form */ #placeholder-left .login-form input:not([type="submit"]), #placeholder-right .login-form input:not([type="submit"]), #placeholder-content:not(.no-right):not(.no-left) .login-form input:not([type="submit"]) { width: 149px; } #placeholder-left .login-form a.button, #placeholder-right .login-form a.button, #placeholder-content:not(.no-right):not(.no-left) a.button, #placeholder-left .login-form input[type="submit"], #placeholder-right .login-form input[type="submit"], #placeholder-content:not(.no-right):not(.no-left) .login-form input[type="submit"] { min-width: 80px; } /* User bar */ .userbar { padding: 3px 0px 7px 0px; } /* Billboard tile, default styling */ /* (No common styling with mobile exists except slick dots and slider styling. Changes that should be affected in mobile as well must also be implemented in the mobile.css file) */ #container .billboard.stretched-mode { overflow: hidden; background: #d7d7d7; } #container #placeholder-content .billboard .tile-content { padding: 0px; } .billboard .article-wrapper { position: relative; height: 350px; background-position: center center; background-size: cover; } .billboard article.veil .article-content { position: absolute; bottom: 0; box-sizing: border-box; width: 100%; font-size: 1.6rem; background: rgba(112, 112, 112, 0.8); height: 90px; } .billboard article.veil h1 { font-size: 2.8rem; line-height: 1.2em; font-weight: normal; margin-bottom: 5px; } .billboard article.veil p { margin: 0px; } .billboard article.veil .digest { font-size: 1.8rem; line-height: 1.23em; } .billboard .article-content a { color: #fff; display: block; text-decoration: none; padding: 9px 46px 18px 46px; } /* slick dots, used in billboard */ /* (Only implemented for desktop) */ .billboard ul.slick-dots { bottom: 90px; width: auto; height: 25px; } .billboard ul.slick-dots li button { width: 18px; min-width: 18px; height: 18px; border: 2px solid #fff; border-radius: 10px; background: #ccc; } .billboard ul.slick-dots li button:before { content: none; } .billboard ul.slick-dots li.slick-active button { border-color: #e05206; background: #e05206; } /* Billboard with full width styling, This the one placed in the wrapper placeholder-stretched-top-content Overrides some style from the default billboard styling */ #placeholder-stretched-top-content .billboard article.veil { max-width: 960px; height: 100%; margin: 0 auto; position: relative; top: 0; left: 0; right: 0; margin-left: auto; margin-right: auto; } #placeholder-stretched-top-content .billboard article.veil .article-content { margin: 32px 0px 32px 0px; width: 336px; height: auto; top: 0; bottom: 0; left: 42px; color: #1d1d1d; padding: 9px 18px 18px 18px; background: #fff; opacity: 0.8; } #placeholder-stretched-top-content .billboard article.veil .article-content a { color: #1d1d1d; padding: 0px; } #placeholder-stretched-top-content .billboard article.veil .article-content h1 { margin-bottom: 10px; } #placeholder-stretched-top-content .billboard ul.slick-dots { text-align: right; max-width: 960px; bottom: 18px; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 100%; } /* slick slider, used in billboard */ /* File list */ /* Site map */ /* Article rating */ /* Article rating - star rating */ /* Article rating - agreedisagree rating */ /* Article rating - recommend rating */ /* Entity comment */ /* Entity comment - comments */ /* Entity comments - single thread */ /* Entity comment - form */ .entitycomment-form .ctcaptchatextual input { width: 304px; } /* Entity comment answer form */ /* Advanced search */ /* (Only implemented for desktop) */ .advanced-searchinput .searchfield input[type="text"] { float: left; height: 3rem; line-height: 3rem; padding: 0 15px; border-color: #e05206; } .advanced-searchinput .searchfield button { min-width: 80px; } .advanced-searchinput .searchstring em { color: #e05206; } .advanced-searchinput ul.tabs { overflow: hidden; margin-top: 10px; } .advanced-searchinput ul.tabs li { float: left; border: 1px solid #747372; background: #eee; } .advanced-searchinput ul.tabs li.active { border-bottom: 1px solid #fff; background: #fff; } .advanced-searchinput ul.tabs li:not(:last-child) { margin-right: 5px; } .advanced-searchinput ul.tabs li a { color: #444; text-decoration: none; text-transform: uppercase; font-size: 1.3rem; text-align: center; display: block; line-height: 2.7rem; heigth: 2.7rem; width: 120px; padding: 0px 0px 0px 0px; } .advanced-searchinput .pane:not(.active) { display: none; } .advanced-searchinput .pane.active { font-size: 1.4rem; margin-top: -1px; padding: 5px 18px 5px 18px; border: 1px solid #747372; } .advanced-searchinput .pane select { width: 100%; } .advanced-searchinput .pane.summary span.remove-parameter-link { margin-left: 10px; } .advanced-searchinput .pane.summary span.summarycriteria-item { display: inline-block; margin-right: 5px; } .advanced-searchinput .pane.dates label { display: block; } /* Calendar */ .calendar header .month-year-header { width: 242px; } /* Datepicker */ /* (Only implemented for desktop) */ a.datepicker-select { display: inline-block; margin-left: 10px; width: 18px; height: 26px; vertical-align: middle; background: url(images/sprite.png) -140px 0px no-repeat; } a.datepicker-select.active { position: relative; z-index: 2; } a.datepicker-select span { display: none; } .datepicker { display: none; } .datepicker.active { display: block; } .datepicker .calendar { font-size: 1.6rem; width: 308px; box-shadow: 2px 3px 7px 0px rgba(172, 171, 171, 0.5); } .datepicker .calendar .title { height: 4rem; line-height: 4rem; padding: 0px 18px 0px 40px; text-transform: uppercase; color: #fff; background: #555; } .datepicker .calendar .content { margin: 6px 18px 9px 18px; } .datepicker .calendar header .month-year-header { line-height: 2.7rem; } .datepicker .calendar header span.pageLink { margin-bottom: 5px; display: block; } .datepicker .calendar table td span { cursor: pointer; } /* Tooltip */ /* -- Placeholder top -- */ /* Logo tile */ #placeholder-top .logo-tile { float: left; margin-top: 7px; margin-bottom: 3px; } /* Language selector */ #placeholder-top .language-selector { float: right; margin-top: 5px; position: relative; } #placeholder-top .language-selector a { color: #fff; font-size: 1.4rem; text-decoration: none; } #placeholder-top .language-selector .toggle-link-wrapper { display: block; position: relative; z-index: 4; } #placeholder-top .language-selector .toggle-link-wrapper a:after { content: ""; height: 9px; width: 13px; display: inline-block; background: url(images/sprite.png) -320px -100px no-repeat; } #placeholder-top .language-selector .toggle-link-wrapper a.open { color: #555; } #placeholder-top .language-selector .toggle-link-wrapper a.open:after { background: url(images/sprite.png) -320px -80px no-repeat; } #placeholder-top .language-selector .rwd-toggle-content { display: none; position: absolute; right: -5px; top: 0; z-index: 3; box-sizing: border-box; padding: 22px 5px 13px 5px; min-width: 200px; background: #ccc; box-shadow: 2px 3px 5px 0px rgba(0, 0, 0, 0.35); } #placeholder-top .language-selector .rwd-toggle-content li.entitylink.last { margin-bottom: 4px; padding-bottom: 6px; border-bottom: 1px solid #acacac; } #placeholder-top .language-selector .rwd-toggle-content a { display: block; color: #003399; padding: 0px 5px 0px 5px; } #placeholder-top .language-selector .rwd-toggle-content a.active { color: #000; } #placeholder-top .language-selector .rwd-toggle-content a:hover { color: #fff; background: #e05206; } /* Link toolbar - font size */ /* This styling extends some styling written above for linktoolbar */ #placeholder-top .linktoolbar { float: right; margin-top: 5px; } #placeholder-top .linktoolbar ul, #placeholder-top .linktoolbar li { float: none; } #placeholder-top .linktoolbar a.font_size_link { width: auto; height: auto; padding: 0px; font-size: 1.4rem; background: none; } #placeholder-top .linktoolbar a.font_size_link span { color: #fff; } #placeholder-top .linktoolbar .links a.font_size_link:hover .font-size-box { top: 35px; left: -100px; } /* Small search input */ #placeholder-top .small-searchinput { clear: right; float: right; margin-top: 30px; margin-bottom: 12px; } #placeholder-top .simple-search input[type="text"] { width: 177px; color: #444343; height: 3.2rem; line-height: 3.2rem; border: none; background: #ccc; } /* Standard menu - single mode */ #placeholder-top .standard-menu.quick-mode { float: right; margin-top: 5px; } #placeholder-top .standard-menu.quick-mode li { margin-left: 15px; } #placeholder-top .standard-menu.quick-mode span, #placeholder-top .standard-menu.quick-mode a { color: #fff; text-decoration: none; font-size: 1.4rem; } #placeholder-top .standard-menu.quick-mode a:hover, #placeholder-top .standard-menu.quick-mode li.active a, #placeholder-top .standard-menu.quick-mode li.active span { padding-bottom: 2px; border-bottom: 6px solid #fff; transition: all 0.25s ease 0s; } /* Mega menu */ /* (Only implemented for desktop) */ #placeholder-top .mega-menu { clear: both; background: #e1e1e1; position: relative; } #placeholder-top .mega-menu .tile-content { position: relative; } #placeholder-top .mega-menu.open:after { content: ""; width: 100%; height: 2000px; z-index: 1; position: absolute; top: 42px; left: 0; background: #555; opacity: 0.5; } #placeholder-top .mega-menu a { text-decoration: none; } #placeholder-top .mega-menu li, #placeholder-top .mega-menu li a { color: #000; } #placeholder-top .mega-menu .tile-content > ul > li { font-size: 1.8rem; height: 4.3rem; line-height: 4.3rem; } #placeholder-top .mega-menu .tile-content > ul > li:before { content: "|"; color: #fff; display: inline-block; width: 28px; text-align: center; } #placeholder-top .mega-menu .tile-content > ul > li:first-child:before { display: none; } #placeholder-top .mega-menu .tile-content > ul > li > a:hover, #placeholder-top .mega-menu .tile-content > ul > li.active > a, #placeholder-top .mega-menu .tile-content > ul > li.main-active > a, #placeholder-top .mega-menu .tile-content > ul > li.sub-active > a, #placeholder-top .mega-menu .tile-content > ul > li.active > span, #placeholder-top .mega-menu .tile-content > ul > li.main-active > span, #placeholder-top .mega-menu .tile-content > ul > li.sub-active > span { padding-bottom: 2px; border-bottom: 6px solid #e05206; transition: all 0.25s ease 0s; } #placeholder-top .mega-menu .tile-content > ul > li > .level-content { display: none; } #placeholder-top .mega-menu .tile-content > ul > li.visible > .level-content { display: block; position: absolute; left: 11px; top: 4.2rem; z-index: 2; box-sizing: border-box; padding: 23px 0px 0px 25px; width: 100%; max-width: 938px; margin: 0px auto; border-top: 1px solid #e05206; background: #eee; } #container #placeholder-top .mega-menu li .level-content ul li { display: list-item; line-height: normal; } #placeholder-top .mega-menu li .level-content h1 { font-weight: normal; font-size: 3.4rem; margin-bottom: 20px; } #placeholder-top .mega-menu li .level-content a:hover { text-decoration: underline; } #placeholder-top .mega-menu .tile-content > ul > li .content-bottom { display: block; height: 16px; width: 938px; position: absolute; bottom: -16px; left: 0px; background: #e05206; } #placeholder-top .mega-menu .tile-content > ul > li .content-bottom:after { content: ''; display: block; margin: auto; padding-top: 5px; width: 0; height: 0; /* Making it a white triangle */ border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #fff; } #placeholder-top .mega-menu .tile-content > ul > li > .level-content > ul > li > a, #placeholder-top .mega-menu .tile-content > ul > li > .level-content > ul > li > span { font-weight: bold; } /* Double mode */ #placeholder-top .mega-menu.double-mode li section { float: left; width: 41%; box-sizing: border-box; padding-right: 60px; } #placeholder-top .mega-menu.double-mode li section p { line-height: 2.5rem; font-size: 1.6rem; } #placeholder-top .mega-menu.double-mode .tile-content > ul > li.visible > .level-content { padding-bottom: 25px; } #placeholder-top .mega-menu.double-mode li .sub-menu { width: 59%; overflow: hidden; } #placeholder-top .mega-menu.double-mode li ul { float: left; margin-top: 69px; width: 50%; } #placeholder-top .mega-menu.double-mode li ul:nth-child(odd) { clear: left; } #placeholder-top .mega-menu.double-mode li ul li.single-slot:first-child { margin-top: 10px; } #placeholder-top .mega-menu.double-mode li ul li.single-slot { margin-bottom: 2px; } #placeholder-top .mega-menu.double-mode li a img, #placeholder-top .mega-menu.double-mode li span img { vertical-align: middle; margin: 4px 13px 3px 0px; } #placeholder-top .mega-menu.double-mode li li { font-weight: bold; } /* Trible mode */ #placeholder-top .mega-menu.triple-mode .tile-content > ul > li > .level-content > ul { float: left; clear: both; } #placeholder-top .mega-menu.triple-mode .tile-content > ul > li > .level-content > ul > li { float: left; box-sizing: border-box; margin-bottom: 25px; margin-left: 5px; } #placeholder-top .mega-menu.triple-mode .tile-content > ul > li > .level-content > ul > li.clear { clear: left; } #placeholder-top .mega-menu.triple-mode .tile-content > ul > li > .level-content > ul > li.leaf, #placeholder-top .mega-menu.triple-mode .tile-content > ul > li > .level-content > ul > li ul { width: 177px; } #placeholder-top .mega-menu.triple-mode .tile-content > ul > li > .level-content > ul > li ul { box-sizing: border-box; float: left; padding-right: 20px; margin-left: 5px; } #placeholder-top .mega-menu.triple-mode .tile-content > ul > li > .level-content > ul > li ul:first-child { margin-left: 0px; } #placeholder-top .mega-menu.triple-mode .tile-content > ul > li > .level-content > ul > li li { font-size: 1.4rem; line-height: 2.0rem; margin-top: 6px; } /* Standard menu - first, common style single and double mode (that is, not quick-mode) */ #placeholder-top .standard-menu:not(.quick-mode) { clear: both; position: relative; background: #d7d7d7; } /*#placeholder-top .standard-menu:not(.quick-mode):before { content: ''; width: 100%; height: 4.3rem; display: block; position: absolute; left: 0; top: 0; z-index: 1; background: #e1e1e1; } */ #placeholder-top .standard-menu:not(.quick-mode) .tile-content { overflow: hidden; position: relative; z-index: 2;} #placeholder-top .standard-menu:not(.quick-mode) a { text-decoration: none; } #placeholder-top .standard-menu:not(.quick-mode) a:hover, #placeholder-top .standard-menu:not(.quick-mode) li.active > a, #placeholder-top .standard-menu:not(.quick-mode) li.main-active > a, #placeholder-top .standard-menu:not(.quick-mode) li.sub-active > a, #placeholder-top .standard-menu:not(.quick-mode) li.active > span, #placeholder-top .standard-menu:not(.quick-mode) li.main-active > span, #placeholder-top .standard-menu:not(.quick-mode) li.sub-active > span { padding-bottom: 2px; border-bottom: 4px solid #fff; transition: all 0.25s ease 0s; } #placeholder-top .standard-menu:not(.quick-mode) li, #placeholder-top .standard-menu:not(.quick-mode) ul li { height: 4.3rem; line-height: 4.3rem; float: left; } #placeholder-top .standard-menu:not(.quick-mode) ul li:before { content: " "; color: #fff; display: inline-block; width: 20px; text-align: center; } #placeholder-top .standard-menu:not(.quick-mode) ul li.first:before { display: none;} /* Standard menu - only double mode where second level is styled */ #placeholder-top .standard-menu.double-mode ul li.expanded li { font-size: 1.4rem; margin-right: 20px; height: 3.9rem; line-height: 3.9rem; } #placeholder-top .standard-menu.double-mode ul li li.last { margin-right: 0px; } #placeholder-top .standard-menu.double-mode ul li.expanded { height: 8.5rem; } #placeholder-top .standard-menu.double-mode ul li.expanded li:before { display: none; } #placeholder-top .standard-menu.double-mode ul li.expanded ul { position: absolute; left: 0; bottom: 0px; background: #d7d7d7; } #placeholder-top .standard-menu.double-mode .tile-content > ul > li.expanded > a, #placeholder-top .standard-menu.double-mode .tile-content > ul > li.expanded > span { border: none; position: relative; } /* Added */ #placeholder-top .standard-menu.double-mode .tile-content > ul > li.expanded > span { color:#fff; font-size:14px; } /* Site locator */ #placeholder-top .sitelocator { font-size: 1.3rem; clear: both; padding-top: 20px; background: #fff; } #placeholder-top .sitelocator .prefix, #placeholder-top .sitelocator ul { display: inline; } #placeholder-top .sitelocator a { text-decoration: none; } #placeholder-top .sitelocator a:hover { text-decoration: underline; } #placeholder-top .sitelocator li:after { content: "/"; width: 18px; text-align: center; display: inline-block; } #placeholder-top .sitelocator li:last-child:after { display: none; } /* Mobile menu */ /* (Mobile menu should be visible in portrait tablet, hiding it to start with)*/ .mobilemenu { display: none; } /* -- Placeholder bottom -- */ /* Article display */ #placeholder-bottom .stretched-mode, #placeholder-bottom .articledisplay { margin-top: -25px; /* to override padding set on placeholder bottom */ margin-bottom: 25px; } /* Small article display */ #placeholder-bottom .small-articledisplay { float: left; margin-right: 11%; } /* Main menu */ #placeholder-bottom .standard-menu { float: left; margin-right: 6%; } #placeholder-bottom .standard-menu a { text-decoration: none; } /* Newsletter form */ #placeholder-bottom .newsletter-form { clear: right; float: right; margin-bottom: 15px; } /* -- Lightbox -- */ /* (Only implemented for desktop) */ #lightbox-overlay { z-index: 999; background-color: #000; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } #lightbox { overflow: auto; width: 100%; height: 100%; padding: 0; margin: 0; position: absolute; top: 0; left: 0; } #lightbox-container { z-index: 1000; position: relative; margin: auto; } #lightbox-spinner { background: url(images/spinner-large.gif) no-repeat center center; } #lightbox-container { padding: 0; top: 25px; } #lightbox-close-container { z-index: 1000; position: absolute; right: 0; top: 0px; } #lightbox-close span { display: none; } #lightbox-close { display: block; width: 30px; height: 30px; margin: 3px 12px 0 0; } #lightbox-start { height: 26px; background: url(images/lightbox/start-center.png) repeat-x; position: relative; margin: 0 51px 0 39px; } #lightbox-start div.left { background: url(images/lightbox/start-left.png) no-repeat; position: absolute; left: -38px; top: 0px; bottom: -6px; width: 38px; } #lightbox-start div.right { z-index: 100; background: url(images/lightbox/start-right.png) no-repeat; position: absolute; right: -50px; top: 0px; bottom: -24px; width: 50px; } #lightbox-outer-content { border: 1px solid #fff; padding: 0 10px 0 10px; background: #fff; position: relative; margin: 0 26px 0 14px; } #lightbox-content { font-size: 1.6rem; } #lightbox-content-left { background: url(images/lightbox/content-left.png) repeat-y; position: absolute; left: 0px; top: 32px; bottom: 34px; width: 14px; } #lightbox-content-right { background: url(images/lightbox/content-right.png) repeat-y; position: absolute; right: 12px; top: 50px; bottom: 34px; width: 14px; } #lightbox-end { height: 34px; background: url(images/lightbox/end-center.png) repeat-x; position: relative; margin: 0 50px 0 38px; } #lightbox-end div.left { background: url(images/lightbox/end-left.png) no-repeat; position: absolute; left: -38px; top: 0px; bottom: 0px; width: 38px; } #lightbox-end div.right { background: url(images/lightbox/end-right.png) no-repeat; position: absolute; right: -38px; top: 0px; bottom: 0px; width: 38px; } #lightbox .tile-common { border: 0px; } #lightbox-placeholder-content { overflow: hidden; width: 750px; } /* -- Direct Edit -- */ /* Removed a lot of code regarding break points. */ /* ======== CtFrontendCssService: end of css for channel [default] ======== */ /* ======== CtFrontendCssService: start of css for browser [chrome] ======== */ /* Chrome specific styling */ /* ======== CtFrontendCssService: end of css for browser [chrome] ======== */ /* ======== CtFrontendCssService: start of css from php script ======== */ /* ======== CtFrontendCssService: end of css from php script ======== */ /* ======== CtFrontendCssService: start of css from design editor ======== */ /* -- Design Editor generated style -- */ body { } .full-articledisplay .header h1 { } .full-articledisplay .digest { } .full-articledisplay .article-content { } .full-articlelist h3 { } .full-articlelist p { } .vertical-menu ul li { } .vertical-menu ul li a { } .vertical-menu ul li li { } .vertical-menu ul li li li { } .small-articledisplay h3 { } .small-articledisplay .tile-content p { } .back-button a { } .home-button a { } #placeholder-top { } #placeholder-content { } #placeholder-bottom { } /* ======== CtFrontendCssService: end of css from design editor ======== */ /* CtPageCache: cached at 2016-08-08 15:36:55, expires at 2016-08-09 15:36:55 */ /* CtPageCache.outputCacheFile(): Cachefile was used for device [default] from store [CtFileCachestore] on host [cas] */