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