/* Font definitions ---------------- We are using some Webfonts. The fonts are from the Fontsquirrel (http://www.fontsquirrel.com/) website. */ @font-face { font-family: 'Text'; src: url('../fonts/PTS55F-webfont.eot'); src: url('../fonts/PTS55F-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/PTS55F-webfont.woff') format('woff'), url('../fonts/PTS55F-webfont.ttf') format('truetype'), url('../fonts/PTS55F-webfont.svg#pt_sansregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Text'; src: url('../fonts/PTS56F-webfont.eot'); src: url('../fonts/PTS56F-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/PTS56F-webfont.woff') format('woff'), url('../fonts/PTS56F-webfont.ttf') format('truetype'), url('../fonts/PTS56F-webfont.svg#pt_sansitalic') format('svg'); font-weight: normal; font-style: italic; } @font-face { font-family: 'Text'; src: url('../fonts/PTS75F-webfont.eot'); src: url('../fonts/PTS75F-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/PTS75F-webfont.woff') format('woff'), url('../fonts/PTS75F-webfont.ttf') format('truetype'), url('../fonts/PTS75F-webfont.svg#pt_sansbold') format('svg'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Text'; src: url('../fonts/PTS76F-webfont.eot'); src: url('../fonts/PTS76F-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/PTS76F-webfont.woff') format('woff'), url('../fonts/PTS76F-webfont.ttf') format('truetype'), url('../fonts/PTS76F-webfont.svg#pt_sansbold_italic') format('svg'); font-weight: bold; font-style: italic; } @font-face { font-family: 'TextCond'; src: url('../fonts/PTN57F-webfont.eot'); src: url('../fonts/PTN57F-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/PTN57F-webfont.woff') format('woff'), url('../fonts/PTN57F-webfont.ttf') format('truetype'), url('../fonts/PTN57F-webfont.svg#pt_narrowregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'TextCond'; src: url('../fonts/PTN77F-webfont.eot'); src: url('../fonts/PTN77F-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/PTN77F-webfont.woff') format('woff'), url('../fonts/PTN77F-webfont.ttf') format('truetype'), url('../fonts/PTN77F-webfont.svg#pt_narrowbold') format('svg'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Caption'; src: url('../fonts/PTC55F-webfont.eot'); src: url('../fonts/PTC55F-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/PTC55F-webfont.woff') format('woff'), url('../fonts/PTC55F-webfont.ttf') format('truetype'), url('../fonts/PTC55F-webfont.svg#pt_sans_captionregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Caption'; src: url('../fonts/PTC75F-webfont.eot'); src: url('../fonts/PTC75F-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/PTC75F-webfont.woff') format('woff'), url('../fonts/PTC75F-webfont.ttf') format('truetype'), url('../fonts/PTC75F-webfont.svg#pt_sans_captionbold') format('svg'); font-weight: normal; font-style: italic; } /* @font-face { font-family: 'Title'; src: url('../fonts/TrajanPro-Regular.eot'); src: url('../fonts/TrajanPro-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/TrajanPro-Regular.woff') format('woff'), url('../fonts/TrajanPro-Regular.ttf') format('truetype'), url('../fonts/TrajanPro-Regular.svg#TrajanPro-Regular') format('svg'); font-weight: normal; font-style: normal; } */ @font-face { font-family: 'Title'; src: url('../fonts/Cinzel-Regular.eot'); src: url('../fonts/Cinzel-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Cinzel-Regular.woff') format('woff'), url('../fonts/Cinzel-Regular.ttf') format('truetype'), url('../fonts/Cinzel-Regular.svg#Cinzel-Regular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Special'; src: url('../fonts/Georgia-webfont.eot'); src: url('../fonts/Georgia-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Georgia-webfont.woff') format('woff'), url('../fonts/Georgia-webfont.ttf') format('truetype'), url('../fonts/Georgia-webfont.svg#Georgia-webfont') format('svg'); font-weight: normal; font-style: normal; } @dim-header-border-top: 0.5em; @dim-header-logo-base-width: 350px; @dim-footer-height: 12em; @dim-main-nav-breakpoint: 68em; @dim-main-body-breakpoint: 68em; @dim-page-width: 80em; @media screen { * { box-sizing: border-box; } /* Styles for Screenreaders */ /* Hide text for other media than screenreaders. We can't simply use display:none because display:none is interpreted by screenreaders and hides for them also. The approach here is the same as used in Bootstrap, with some refinements. References: http://webaim.org/techniques/css/invisiblecontent/ */ .hidden.accessibility { position: absolute; top : auto; left : -99999em; width : 1px; height : 1px; overflow: hidden; } /* * Mixin class for the gradient. */ .mixin-gradient { background-image: -ie-linear-gradient(top, @color-gradient1 @dim-gradient-light, @color-gradient2 @dim-gradient-dark); background-image: -moz-linear-gradient(top, @color-gradient1 @dim-gradient-light, @color-gradient2 @dim-gradient-dark); background-image: -o-linear-gradient(top, @color-gradient1 @dim-gradient-light, @color-gradient2 @dim-gradient-dark); background-image: -webkit-linear-gradient(top, @color-gradient1 @dim-gradient-light, @color-gradient2 @dim-gradient-dark); background-image: linear-gradient(top, @color-gradient1 @dim-gradient-light, @color-gradient2 @dim-gradient-dark); } html { margin : 0; position: relative; } body { /* Flexbox container for header, nav, breadcrumbs-top, main-wrapper, and footer (and debug pannel & cookie-notice at top) */ display: flex; flex-flow: column nowrap; min-height:100vh; //necessay to achieve a sticky footer at the bottom /* Textured background from subtlepatterns.com */ background-image: url("../images/foil.png"); margin : 0 ; padding : 0; div#cookie-notice { display: none; } &.cookie-notice { div#cookie-notice { background-color: #fff; /*background-color: rgba(255,255,255,0.9);*/ border : 2px solid @color-nav-background2; display : block; position : absolute; left : 0; top : 0; margin : 0.5em; padding : 1em 2em; a { margin-left : 0.5em; text-decoration: none; &:link, &:visited { color: @color-main-link; } &:active, &:focus, &:hover { color: @color-main-link-hover; } } button { background-color: @color-main-background; border : 1px solid @color-nav-background2; border-radius : 0.25em; color : @color-nav-background2; font-weight : bold; margin-left : 0.5em; } } } } header { /* is a flexbox item of body! */ /* header takes the complete width of the viewport without any restriction. Width restrictions are introduces by inner wrapper */ background-color: @color-header-background; margin : 0; padding: 0; /* Styles for the blue bar in the header containing the language selector * and the service menu. * Takes the complete width of the viewport to create a blue overall * background for the bar. */ #service-panel { .mixin-gradient(); box-shadow : 0 0 20px 0 @color-service-panel-shadow; color : @color-service-panel; font-family : "TextCond", serif; font-variant: small-caps; height : 2.8em; margin : 0; padding : 0; #service-panel-wrapper { /* Restricts the width of the service panel bar */ margin-left : auto; margin-right: auto; max-width : @dim-page-width; div#language-switcher { position: relative; button { background-color: transparent; border : 1px solid @color-service-panel; border-radius : 0.5em; color : @color-service-panel; font-size : 1.1em; margin-top : 0.55em; margin-left : 0.55em; span.fa { margin-right: 0.4em; } } ul { display : none; background-color: @color-service-panel-background2; z-index : 999; } } div#shortcuts { button {} ul { display: none; } } ul { list-style : none; margin : 0; padding-left : 1em; padding-right: 1em; li { a { text-decoration: none; &:link, &:visited { background-color: transparent; color : @color-service-panel; } &:active, &:focus, &:hover { background-color: transparent; color : @color-service-panel-active; } } } } } } .header-logo { background-color: @color-header-background; margin-left: auto; margin-right: auto; text-align: center; img { margin-top: 1em; } p { color: @color-brand-text; font-family: "Title", serif; font-size: 2.5em; font-variant: small-caps; margin: 0 1em 0 0.6em; text-align: center; } } } nav#main-navigation { .mixin-gradient(); background-color: transparent; // chrome! border : none; margin-bottom : 0; padding-top : 0; padding-bottom : 0; width : 100%; /* NOTE: Bug (Dec. 2018) * Chrome, Firefox, iOS, and Android browsers expand the blue navigation * bar downwards, Safari Mac OSx does not. */ min-height : 2.8em !important ; div#nav-wrapper { margin-left : auto; margin-right : auto; max-width : @dim-page-width; padding-bottom: 0.0em; text-align : center; button { background-color: transparent; border : 1px solid @color-nav; border-radius : 0.2em; color : @color-nav; font-size : 1.9em; margin-top : 0.20em; span.fa { margin-right: 0.4em; } } ul.home-link { li { border-left : none !important; border-right : none; padding-left : 0.5em; padding-right: 0.5em; } } ul { display : none; list-style : none; margin-top : 0.75em; margin-bottom: 0.75em; padding-left : 0; text-align : center; li { border-right: 1px solid @color-gradient2; &:first-child { border-left: 1px solid @color-gradient2; } &:active, &:focus, &:hover { /*background-color: transparent;*/ background-color: @color-gradient2; color : @color-nav-active; } a { display : block; font-family : 'TextCond', sans-serif; font-size : 1.2em; font-variant : small-caps; font-weight : bold; text-decoration: none; width : 100%; height : 100%; &:link, &:visited { color: @color-nav; } &:active, &:focus, &:hover { /*background-color: transparent;*/ background-color: @color-gradient2; color : @color-nav-active; } span { display: block; padding: 0.4em 0.9em; } } } } } } div#breadcrumbs-top { background-color: @color-main-background; background-image: url("../images/foil.png"); font-size : 1.2em; padding-top : 1em; max-width : @dim-page-width; margin-left : auto; margin-right : auto; width: 100%; div#breadcrumbs-top-wrapper { width: 100%; margin-left : auto; margin-right : auto; max-width : @dim-page-width; padding-bottom: 0.6em; .breadcrumb-prefix { font-family : 'TextCond', sans-serif; font-size : 0.9em; font-variant: small-caps; margin-right: 0.6em; padding-top : 0.6em; } ol { display : inline; list-style : none; padding-left: 0; li { display : inline; font-family : 'TextCond', sans-serif; font-size : 0.9em; padding-left: 0; a { &:link, &:visited { color: @color-breadcrumb-link; } &:active, &:focus, &:hover { color: @color-breadcrumb-link-hover; } } } li + li::before { color : @color-breadcrumb-separator; content : "/ "; padding-left : 0.4em; padding-right: 0.4em; } } } } div#main-wrapper { /* main-wrapper is flex child of body */ flex : 1; width : 100%; max-width : @dim-page-width; margin-left : auto; margin-right: auto; } .mixin-main { background-color: @color-main-background; border-radius : 0 0 0.5em 0.5em; box-shadow : 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35); padding : 1em; } main { article { .mixin-main(); border-radius: 0.5em; margin-bottom: 2em; } div.address { /*.mixin-main();*/ font-family : 'Text', sans-serif; margin-bottom: 2em; pre.addresstext { font-family: 'Text', sans-serif; margin-top : 0; } } div.agenda, div.contact, div.job, div.minutes, div.person, div.service { dl { /*.mixin-main();*/ font-family: 'text', sans-serif; dt { font-weight: bold; } dd { margin-left : 0; margin-bottom: 0.5em; &.description-of-minutes { pre { margin-top : 0; font-family: 'Test'; } } a { text-decoration: none; &:link, &:visited { color: @color-main-link; } &:active, &:focus, &:hover { color: @color-main-link-hover; } } } } } div.bookmark-url { /*.mixin-main();*/ font-family : 'Text', sans-serif; margin-bottom: 2em; a { &:link, &:visited { color: @color-main-link; } &:active, &:focus, &:hover { color: @color-main-link-hover; } } } div.contact { div.person { /*.mixin-main();*/ } div.address { /*.mixin-main();*/ margin-bottom: 2em; pre.addresstext { font-family: 'Text', sans-serif; margin-top : 0; } } } div.decisiontree { div.main { h2 { margin-top: 0em; } } div.section-instructions { margin-bottom: 1em; } form { div.submit-cancel-section { margin-top: 1em; input[type="submit"] { background-color: @color-main-background; border : 1px solid @color-main-link; border-radius : 0.3em; color : @color-main-link; font-weight : bold; padding : 0.2em 0.4em; } input[type="submit"] { &:focus, &:hover { border-color: @color-main-link-hover; color : @color-main-link-hover; } } input[type="submit"]:first-child { margin-right: 1em; } } } } div.formitem { /*.mixin-main();*/ margin-bottom: 2em; span.label { display : block; font-weight: bold; } span.label.mandatory::after { content : "*"; font-weight: bold; } } div.fsi-desc { /*.mixin-main();*/ } div.fsi-links { /*.mixin-main();*/ margin-top : 2em; margin-bottom: 2em; text-align : center; a { /*.mixin-main();*/ margin-left : 4em; margin-right : 4em; padding-left : 2em; padding-right : 2em; text-decoration: none; &:link, &:visited { color: @color-main-link; } &:active, &:focus, &:hover { color: @color-main-link-hover; } &.download::before, &.stream::before { font-family: "FontAwesome"; } &.stream::before { content: "\f06e"; } &.download::before { content: "\f019"; } } } div.government-uid { /*.mixin-main();*/ margin-bottom: 1em; } div.image { div.image-data { /*.mixin-main();*/ display : -webkit-flex; display : flex; margin-bottom: 2em; a.thumbnail { -webkit-flex: 1; flex : 1; text-align : center; } table { -webkit-flex: 1; flex : 1; border : none; td, th, tr { border: none; } th { text-align : left; font-weight: bold; } td { padding-left: 0.5em; } } } } div.lead { /*.mixin-main();*/ font-weight : bold; margin-bottom: 1em; } div.lead, div.main { font-family: 'Text', sans-serif; } div.main { /*background-color: @color-main-background;*/ /*border-radius: 0.5em;*/ /*box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);*/ margin-bottom: 0; padding : 1em; :first-child { margin-top: 0; } ul { overflow: hidden; } } div.news-date { background-color: @color-main-background; border : 1px solid @color-nav-background2; border-radius : 0.4em; color : @color-nav-background2; float : right; font-weight : bold; margin : 0.3em; padding : 0.5em; } div.notes { border : thin ridge @color-main-notes-border; border-radius: 0.5em; float : right; font-size : 0.85em; margin : 1em; padding : 1em; width : 18em; } div.person { div.address { /*.mixin-main();*/ margin-bottom: 2em; p { margin-top : 0; margin-bottom: 0; } pre { margin-top: 0; } } } div.pressrelease { div.contactinfo { /*.mixin-main();*/ border-top-left-radius: 0; border-top-left-radius: 0; } div.referencecode { /*.mixin-main();*/ margin-top : 1em; margin-bottom: 2em; } } div.related-links-file-attachments { margin-top: 0; ul.related-links { border-bottom-left-radius : 0.5em; border-bottom-right-radius: 0; } ul.file-attachments { border-bottom-left-radius : 0; border-bottom-right-radius: 0.5em; } } div.journal, div.scipublication { div.data {} dl { /*.mixin-main();*/ dt { font-weight : bold; margin-bottom: 0.2em; } dd { margin-left : 0; margin-bottom: 0.7em; a { text-decoration: none; &:link, &:visited { color: @color-main-link; } &:active, &:focus, &:hover { color: @color-main-link-hover; } } } } div:last-child, table:last-child, ul:last-child { margin-bottom: 2em; } div.export-links { margin-top: 0; h2 { border-top-left-radius : 0.5em; border-top-right-radius: 0.5em; padding-left : 0.3em; padding-right : 0.3em; } ul { /*.mixin-main();*/ border-top-left-radius : 0; border-top-right-radius: 0; list-style : none; text-align : center; li { line-height: 1.3em; a { text-decoration: none; &:link, &:visited { color: @color-main-link; } &:active, &:focus, &:hover { color: @color-main-link-hover; } } } } } div.journal-abstract { /*.mixin-main();*/ } div.textinfo { /*.mixin-main();*/ border-top-left-radius : 0; border-top-right-radius: 0; } ul.articles { /*.mixin-main();*/ border-top-left-radius : 0; border-top-right-radius: 0; list-style : none; li { margin-bottom: 0.8em; a { text-decoration: none; &:link, &:visited { color: @color-main-link; } &:active, &:focus, &:hover { color: @color-main-link-hover; } } } li:last-child { margin-bottom: 0; } } table.library-signatures { /*.mixin-main();*/ border-top-left-radius : 0; border-top-right-radius: 0; width : 100%; tr { th {} td { a { text-decoration: none; &:link, &:visited { color: @color-main-link; } &:active, &:focus, &:hover { color: @color-main-link-hover; } } } } } } div.sciorga { div.tab { /*.mixin-main();*/ border-top-left-radius: 0; margin-bottom : 2em; div.addendum, div.shortdesc { font-weight : bold; margin-bottom: 1em; } div.funding, div.members, div.scicontact { a { text-decoration: none; &:link, &:visited { color: @color-main-link; } &:active, &:focus, &:hover { color: @color-main-link-hover; } } dl { dt { font-weight: bold; } dd { margin-left: 0; } } h2 { font-size : 1.5em; margin-bottom: 0.5em; } ul { list-style : none; margin-top : 0; padding-left: 0; li { a { text-decoration: none; &:link, &:visited { color: @color-main-link; } &:active, &:focus, &:hover { color: @color-main-link-hover; } } } } } span.key { font-weight: bold; } } ul.nav.nav-tabs { list-style : none; margin-bottom: 0; padding : 0; li { background-color : @color-nav-background2; border-top-left-radius : 0.5em; border-top-right-radius: 0.5em; box-shadow : 0.2em 0 0 0 rgba(0, 0, 0, 0.35); display : inline-block; margin-left : 0; margin-right : 0; /*padding: 0.6em 1em;*/ a { display : inline-block; font-weight : bold; padding : 0.6em 1em; text-decoration: none; &:link, &:visited { color: @color-nav; } &:active, &:focus, &:hover { color: @color-nav-active; } } } li.active { background-color: @color-main-background; a { &:link, &:visited { color: @color-main-link-hover; } &:active, &:focus, &:hover { color: @color-main-link-hover; } } } } } div.series { div.abstract { /*.mixin-main();*/ margin-bottom: 1em; } ul.articles { margin-top: 0; } form { background-color: @color-main-background; box-shadow : 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35); padding : 1em; margin-bottom : 0; label { display : block; font-weight: bold; margin-top : 0.5em; } } } div.service { margin-bottom: 2em; } dl.event-details { /*.mixin-main();*/ dt { font-weight: bold; } dd { margin-left : 0; margin-bottom: 1em; padding-left : 0; } } h1 { color : @color-brand-text; font-family : "TextCond", sans-serif; font-size : 2em; font-variant: small-caps; font-weight : normal; margin-top : 1em; } h2 { font-size : 1.8em; font-variant: small-caps; } h2.subheading { .mixin-gradient(); background-color : @color-nav-background2; border-top-left-radius : 0.5em; border-top-right-radius: 0.5em; box-shadow : 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35); clear : both; color : @color-nav; font-family : 'TextCond'; font-size : 1.2em; font-weight : bold; font-variant : small-caps; margin-bottom : 0; padding-top : 0.4em; padding-bottom : 0.4em; text-align : center; } article h2.subheading { border-radius: 0.5em; box-shadow : none; margin-top : 0; margin-bottom: 0.5em; } h2.subheading + ul { margin-top: 0; } h3 { font-family : 'TextCond'; font-size : 1.6em; font-variant: small-caps; } h4 { font-family : 'TextCond'; font-size : 1.4em; font-variant: small-caps; } h5 { font-family : 'TextCond'; font-size : 1.2em; font-variant: small-caps; } h6 { font-family : 'TextCond'; font-size : 1.0em; font-variant: small-caps; font-weight : bold; } figure { margin : 0; padding: 0; figure { // figure is supposed to be left aligned! float : left; margin : 1.5em 1.5em 1.5em 0em; position: relative; width : 150px; } figure + figure { display: none; } &.multiple, &.single { a::after { background-color: rgba(0, 0, 0, 0.5); border : 1px solid rgba(0, 0, 0, 0.75); color : #fff; font-family : "FontAwesome"; padding : 0.1em 0.2em; position : absolute; left : 0; top : 0; } } &.multiple { a:after { content: "\f03e"; } } &.single { a::after { content: "\f002"; } } } ul.item-list, ul.new-list { .mixin-main(); } ul.item-list, ul.news-list, ul.related-links, ul.file-attachments { box-shadow : 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35); list-style : none; margin-top : 0; margin-bottom: 3em; padding-left : 0; li { /*position: relative;*/ background-color: @color-main-background; padding : 0.5em; a { font-size : 1.2em; font-weight : bold; text-decoration: none; &:link, &:visited { color: @color-main-link; } &:active, &:focus, &:hover { color: @color-main-link-hover; } } .event-date { border : thin solid @color-brand-text; float : left; font-weight : bold; margin-right : 0.75em; vertical-align: middle; div { text-align: center; } .day { background-color: @color-brand-text; color : #fff; padding : 0.3em 0.75em 0.1em 0.75em; } .month { background-color: #fff; color : @color-brand-text; padding : 0.1em 0.75em 0.3em 0.75em; } } .lead { background-color: transparent; border-radius : 0; box-shadow : none; padding : 0; font-weight : normal; } .news-date { border : thin solid @color-brand-text; border-radius : 0.75em; color : @color-brand-text; float : right; font-weight : bold; height : 1.5em; line-height : 1em; padding : 0.3em 0.75em; vertical-align: middle; } div.person-list { dl { margin-top: 0.3em; dt { display : inline-block; font-weight: bold; &::after { content: ": "; } } dd { display : inline-block; margin-left : 0; margin-right: 1em; a { font-size : 1em; font-weight: normal; } } } } div.sciproject-list { div.lifespan { margin-top: 0.3em; span.lifespan-text { font-weight: bold; &::after { content: ": "; } } } div.members { margin-top: 0.4em; } div.lead { margin-top: 0.3em; } } span.fa { margin-right: 0.4em; } } li:nth-last-child(n+2) { //All but last child border-bottom: 1px solid #ddd; } } ul.mpa-paginator { list-style : none; text-align : center; margin-bottom: 3em; li { /*.mixin-main();*/ display : inline; margin-left : 1em; margin-right : 1em; padding-left : 2em; padding-right: 2em; a { text-decoration: none; &:link, &:visited { color: @color-main-link; } &:active, &:focus, &:hover { color: @color-main-link-hover; } &::after, &::before { font-family: "FontAwesome"; } &.prev::before { content : "\f0a8"; margin-right: 0.2em; } &.next::after { content : "\f0a9"; margin-left: 0.2em; } } } } ul.mpa-toc { /*.mixin-main();*/ /*background-color: @color-nav-background2;*/ border-top-left-radius : 0.5em; border-top-right-radius: 0.5em; /*box-shadow: 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35);*/ -moz-column-count : 2; -webkit-column-count : 2; column-count : 2; list-style : none; min-height : 11em; li { a { font-weight : bold; text-decoration: none; &:link, &:visited { color: @color-main-link; } &:active, &:focus, &:hover { color: @color-main-link-hover; } } } li.active { a { color: @color-main-link-hover; } } } ul.sitemap { .mixin-main(); list-style: none; ul { list-style: none; } li { a { &:link { color: @color-main-link; } &:visited { color: @color-main-link-visited; } &:active, &:focus, &:hover { color: @color-main-link-hover; } } } } } main.welcome { aside {} } nav.subnav { display : none; font-family: 'Text', sans-serif; font-size : 1.15em; font-weight: normal; margin-left: 2em; padding-top: 0.5em; padding-bottom: 0.5em; ul { background-color: @color-main-background; border : 1px solid @color-brand-text; border-radius : 0.5em; color : @color-brand-text; list-style : none; padding : 0.6em 0.4em 0.6em 0.4em; li { width: 100%; a { border-radius : 0.5em; display : block; line-height : 1.3em; padding : 0.2em 1em; position : relative; text-decoration: none; width : 100%; &:link, &:visited { color: @color-brand-text; } &:active, &:focus, &:hover { background-color: @color-subnav-link-hover-background; color : @color-subnav-link-hover; } } } a::before { font-family: "FontAwesome"; font-weight: bold; margin-right: 0.6em; content : "\f0a4"; // hand-point-right } li.active > a { background-color: @color-subnav-link-hover-background; color : @color-subnav-link-hover; } li.active ul { margin-left: 2em; } } } div.nav-quicklinks { // nav-quicklinks is a flex item of body max-width : @dim-page-width; width : 100%; margin-top : auto; margin-bottom: 1em; margin-right : auto; margin-left : auto; .mixin-main(); padding : 0.0em; border-top-left-radius : 0.5em; border-top-right-radius: 0.5em; h2.subheading { .mixin-gradient(); background-color : @color-nav-background2; border-top-left-radius : 0.5em; border-top-right-radius: 0.5em; box-shadow : 0.1em 0.2em 0.35em 0 rgba(0, 0, 0, 0.35); clear : both; color : @color-nav; font-family : "TextCond", sans-serif; font-size : 1.2em; font-weight : bold; font-variant : small-caps; margin-top : 0em; margin-bottom : 0; padding-top : 0.4em; padding-bottom : 0.4em; text-align : center; } dl { padding : 0 0.4em; dt { a { font-size : 1.2em; font-weight : bold; text-decoration: none; &:link, &:visited { color: @color-main-link; } &:active, &:focus, &:hover { color: @color-main-link-hover; } } } dd { margin-top : 0.5em; margin-left : 0; padding-left: 1.0em; } } } footer { // footer is a flex item of body margin:auto auto 0 auto; //to achieve a sticky footer at bottom background-image: -moz-linear-gradient(90deg, @color-footer-background1 0%, @color-footer-background2 100%); background-image: -ms-linear-gradient(90deg, @color-footer-background1 0%, @color-footer-background2 100%); background-image: -webkit-linear-gradient(90deg, @color-footer-background1 0%, @color-footer-background2 100%); background-image: linear-gradient(0deg, @color-footer-background1 0%, @color-footer-background2 100%); border-top : 3px solid @color-footer-border; font-size : 1em; height : @dim-footer-height; width : 100%; #footer-wrapper { margin-left : auto; margin-right: auto; max-width : @dim-page-width; position : relative; #breadcrumbs-bottom { font-size : 1.2em; padding-top: 1em; .breadcrumb-prefix { color : @color-footer; font-family : 'TextCond', sans-serif; font-size : 0.9em; font-variant: small-caps; margin-right: 0.6em; padding-top : 0.6em; } ol { display : inline; list-style : none; padding-left: 0; li { display : inline; font-family : 'TextCond', sans-serif; font-size : 0.9em; padding-left: 0; a { text-decoration: none; &:link, &:visited { color: @color-footer-link; } &:active, &:focus, &:hover { color: @color-footer-link-hover; } } } li + li::before { color : @color-footer; content : "/ "; padding-left : 0.4em; padding-right: 0.4em; } } } div#footer-logo-wrapper { margin-top: 2em; a { text-decoration: none; &:link, &:visited { img { filter: url(../images/filters.svg#grayscale); } } &:active, &:focus, &:hover { img { filter: none; } } img { max-width: 130px; } } } ul#footer-links { list-style: none; position : absolute; top : 2em; right : 0.3em; li { display: inline; margin-right: 0.6em; a { background-color: transparent; font-family : 'TextCond', sans-serif; font-variant : small-caps; text-decoration : none; &:link, &:visited { color: @color-footer-link; } &:active, &:focus, &:hover { color: @color-footer-link-hover; } } } li:last-child { margin-right: 0.0em; } } } } } @media print { div#foundry-debug-panel { display: none; } div#cookie-notice { display: none; } div#service-panel { display: none; } div.header-logo { margin-left : auto; margin-right: auto; text-align : center; p { color : @color-brand-text; font-family : "Title", serif; font-size : 2.5em; font-variant: small-caps; margin : 0 1em 0 0.6em; text-align : center; } } div#breadcrumbs-top { background-color: @color-main-background; background-image: url("../images/foil.png"); font-size : 1.2em; padding-top : 1em; div#breadcrumbs-top-wrapper { margin-left : auto; margin-right : auto; max-width : @dim-page-width; padding-bottom: 0.6em; .breadcrumb-prefix { font-family : 'TextCond', sans-serif; font-size : 0.9em; font-variant: small-caps; margin-right: 0.6em; padding-top : 0.6em; } ol { display : inline; list-style : none; padding-left: 0; li { display : inline; font-family : 'TextCond', sans-serif; font-size : 0.9em; padding-left: 0; a { &:link, &:visited { color: @color-breadcrumb-link; } &:active, &:focus, &:hover { color: @color-breadcrumb-link-hover; } } } li + li::before { color : @color-breadcrumb-separator; content : "/ "; padding-left : 0.4em; padding-right: 0.4em; } } } } nav { display: none; } footer { display: none; } } @import "media-breaks.less";