Chris@0: /** Chris@0: * @file Chris@0: * Footer Styling. Chris@0: */ Chris@0: Chris@0: .site-footer { Chris@18: padding: 35px 0 30px; Chris@0: font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; Chris@0: } Chris@0: .site-footer .layout-container { Chris@0: padding: 0 15px; Chris@0: } Chris@14: Chris@0: @media all and (min-width: 560px) { Chris@0: .site-footer__top .region { Chris@18: position: relative; Chris@0: float: left; /* LTR */ Chris@0: width: 50%; Chris@0: } Chris@0: [dir="rtl"] .site-footer__top .region { Chris@0: float: right; Chris@0: } Chris@0: } Chris@14: Chris@0: @media all and (min-width: 560px) and (max-width: 850px) { Chris@0: .site-footer .region { Chris@0: box-sizing: border-box; Chris@0: } Chris@0: .site-footer__top .region:nth-child(2n+1) { Chris@0: padding-right: 10px; /* LTR */ Chris@0: } Chris@0: [dir="rtl"] .site-footer__top .region:nth-child(2n+1) { Chris@18: padding-right: 0; Chris@0: padding-left: 10px; Chris@0: } Chris@0: .site-footer__top .region:nth-child(2n) { Chris@0: padding-left: 10px; /* LTR */ Chris@0: } Chris@0: [dir="rtl"] .site-footer__top .region:nth-child(2n) { Chris@18: padding-right: 10px; Chris@0: padding-left: 0; Chris@0: } Chris@0: .region-footer-third { Chris@0: clear: both; Chris@0: } Chris@0: } Chris@14: Chris@0: @media all and (min-width: 851px) { Chris@0: .site-footer__top .region { Chris@0: width: 24%; Chris@0: padding: 0 0.65%; Chris@0: } Chris@0: .site-footer__top .region:first-child { Chris@0: padding-left: 0; /* LTR */ Chris@0: } Chris@0: [dir="rtl"] .site-footer__top .region:first-child { Chris@18: padding-right: 0; Chris@0: padding-left: 10px; Chris@0: } Chris@0: .site-footer__top .region:last-child { Chris@0: padding-right: 0; /* LTR */ Chris@0: } Chris@0: [dir="rtl"] .site-footer__top .region:last-child { Chris@18: padding-right: 10px; Chris@0: padding-left: 0; Chris@0: } Chris@0: } Chris@0: .site-footer h2 { Chris@0: color: #c0c0c0; Chris@0: color: rgba(255, 255, 255, 0.65); Chris@0: } Chris@0: .site-footer blockquote { Chris@0: color: #555; Chris@0: } Chris@0: .site-footer .content { Chris@0: color: #c0c0c0; Chris@0: color: rgba(255, 255, 255, 0.65); Chris@0: font-size: 0.857em; Chris@0: } Chris@0: .site-footer .menu-item { Chris@0: padding: 0; Chris@0: } Chris@0: .site-footer .content ol:not(.menu), Chris@0: .site-footer .content ul:not(.menu) { Chris@0: padding-left: 1.4em; /* LTR */ Chris@0: } Chris@0: [dir="rtl"] .site-footer .content ol:not(.menu), Chris@0: [dir="rtl"] .site-footer .content ul:not(.menu) { Chris@0: padding-right: 1.4em; Chris@0: padding-left: 0; Chris@0: } Chris@0: .site-footer .content a, Chris@0: .site-footer .content a.is-active { Chris@0: color: #fcfcfc; Chris@0: color: rgba(255, 255, 255, 0.8); Chris@0: } Chris@0: .site-footer .content a:hover, Chris@0: .site-footer .content a:focus { Chris@0: color: #fefefe; Chris@0: color: rgba(255, 255, 255, 0.95); Chris@0: } Chris@0: .site-footer .block { Chris@0: margin: 20px 0; Chris@18: padding: 10px; Chris@0: border: 1px solid #444; Chris@0: border-color: rgba(255, 255, 255, 0.1); Chris@0: } Chris@0: .site-footer table { Chris@0: font-size: 1em; Chris@0: } Chris@0: .site-footer tr td, Chris@0: .site-footer tr th { Chris@0: border-color: #555; Chris@0: border-color: rgba(255, 255, 255, 0.18); Chris@0: } Chris@0: .site-footer tr.odd { Chris@0: background-color: transparent; Chris@0: } Chris@0: .site-footer tr.even { Chris@0: background-color: #2c2c2c; Chris@0: background-color: rgba(0, 0, 0, 0.15); Chris@0: } Chris@0: Chris@0: /* Footer Top Styling. */ Chris@0: .site-footer__top h2 { Chris@0: margin-bottom: 0; Chris@0: padding-bottom: 3px; Chris@0: text-transform: uppercase; Chris@18: border-color: rgba(255, 255, 255, 0.15); Chris@18: border-bottom: 1px solid #555; Chris@18: font-size: 1em; Chris@0: } Chris@0: .site-footer__top .content { Chris@0: margin-top: 0; Chris@0: } Chris@0: .site-footer__top p { Chris@0: margin-top: 1em; Chris@0: } Chris@0: .site-footer__top .content .menu { Chris@0: padding-left: 0; /* LTR */ Chris@0: } Chris@0: [dir="rtl"] .site-footer__top .content .menu { Chris@0: padding-right: 0; Chris@0: } Chris@0: .site-footer__top .content li a { Chris@0: display: block; Chris@0: padding: 0.8em 2px 0.8em 20px; /* LTR */ Chris@0: text-indent: -15px; Chris@18: border-color: rgba(255, 255, 255, 0.15); Chris@18: border-bottom: 1px solid #555; Chris@18: line-height: 1.2; Chris@0: } Chris@0: [dir="rtl"] .site-footer__top .content li a { Chris@0: padding: 0.8em 20px 0.8em 2px; Chris@0: } Chris@0: .site-footer__top .content li a:hover, Chris@0: .site-footer__top .content li a:focus { Chris@18: text-decoration: none; Chris@0: background-color: #1f1f21; Chris@0: background-color: rgba(255, 255, 255, 0.05); Chris@0: } Chris@0: .site-footer__top .block-menu, Chris@0: .site-footer__bottom .block { Chris@0: margin: 0; Chris@0: padding: 0; Chris@0: border: none; Chris@0: } Chris@0: Chris@0: /* Footer Bottom Styling. */ Chris@0: .site-footer__bottom .block { Chris@0: margin: 0.5em 0; Chris@0: } Chris@0: .site-footer__bottom .content { Chris@18: margin-top: 0; Chris@0: padding: 0.5em 0; Chris@0: } Chris@0: .site-footer__bottom .block h2 { Chris@0: margin: 0; Chris@0: } Chris@0: .site-footer__bottom { Chris@18: margin-top: 30px; Chris@0: letter-spacing: 0.2px; Chris@18: border-color: rgba(255, 255, 255, 0.15); Chris@0: border-top: 1px solid #555; Chris@0: } Chris@0: .site-footer__bottom .region { Chris@0: margin-top: 20px; Chris@0: } Chris@0: .site-footer__bottom .block { Chris@0: clear: both; Chris@0: } Chris@0: Chris@0: /* We need to be specific to overwrite [dir="rtl"] .block ul in block.css. */ Chris@0: .site-footer__bottom .block .menu { Chris@0: padding: 0; Chris@0: } Chris@0: .site-footer__bottom .menu-item a { Chris@18: display: block; Chris@0: float: left; /* LTR */ Chris@0: padding: 0 12px; Chris@18: border-color: rgba(255, 255, 255, 0.15); Chris@0: border-right: 1px solid #555; /* LTR */ Chris@0: } Chris@0: [dir="rtl"] .site-footer__bottom .menu-item a { Chris@0: float: right; Chris@18: border-right: none; Chris@0: border-left: 1px solid #555; Chris@0: } Chris@0: .site-footer__bottom .menu-item:first-child a { Chris@0: padding-left: 0; /* LTR */ Chris@0: } Chris@0: [dir="rtl"] .site-footer__bottom .menu-item:first-child a { Chris@0: padding-right: 0; Chris@0: padding-left: 12px; Chris@0: } Chris@0: .site-footer__bottom .menu-item:last-child a { Chris@0: padding-right: 0; /* LTR */ Chris@0: border-right: none; /* LTR */ Chris@0: } Chris@0: [dir="rtl"] .site-footer__bottom .menu-item:last-child a { Chris@18: padding-right: 12px; Chris@0: padding-left: 0; Chris@0: border-left: none; Chris@0: } Chris@0: Chris@0: /** Chris@0: * When the item is both first and last, :last-child overrides the right padding Chris@0: * when using [dir="rtl"]. We need this rule to remove the right padding. Chris@0: */ Chris@0: [dir="rtl"] .site-footer__bottom .menu-item:first-child:last-child a { Chris@0: padding-right: 0; Chris@0: }