Created
May 11, 2017 02:27
-
-
Save monkeycycle/9a9ccbe1a8d3952e3083c9758b3f85f3 to your computer and use it in GitHub Desktop.
admin-mod.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| box-sizing: border-box; | |
| } | |
| .clearfix:after { | |
| visibility: hidden; | |
| display : block; | |
| font-size : 0; | |
| content : " "; | |
| clear : both; | |
| height : 0; | |
| } | |
| .clearfix { | |
| display: inline-block; | |
| } | |
| * html .clearfix { | |
| height: 1%; | |
| } | |
| .clearfix { | |
| display: block; | |
| } | |
| body { | |
| margin : 0; | |
| padding: 0; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| margin: 0; | |
| } | |
| p { | |
| margin: 0 0 20px; | |
| } | |
| a { | |
| color : #333; | |
| text-decoration: none; | |
| } | |
| img { | |
| width: 100%; | |
| } | |
| ul { | |
| margin : 0; | |
| padding : 0; | |
| list-style-type: none; | |
| } | |
| body { | |
| color : #333; | |
| gily : "PrattRegular",Georgia,"Times New Roman",serif; | |
| font-size : 16px; | |
| line-height : 1.5; | |
| letter-spacing: 0.5px; | |
| } | |
| @media (min-width: 768px) { | |
| body { | |
| font-size: 18px; | |
| } | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| .disable { | |
| opacity: 0.5; | |
| } | |
| .show-banner .gi-header { | |
| transform: translate(0, 0); | |
| opacity : 1; | |
| } | |
| .gi-header.active { | |
| transform: translateY(0px); | |
| opacity : 1; | |
| } | |
| .gi-header { | |
| box-shadow : 0 0 5px rgba(0,0,0,0.25); | |
| position : fixed; | |
| opacity : 0; | |
| top : 0; | |
| transform : translate(0, -50px); | |
| transition : all 0.3s; | |
| z-index : 15; | |
| width : 100%; | |
| background : #000; | |
| color : white; | |
| font-family : "GMSansC","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| text-transform : uppercase; | |
| line-height : 1; | |
| letter-spacing : 0.5px; | |
| display : flex; | |
| justify-content: space-between; | |
| align-items : left; | |
| } | |
| .gi-header__meta { | |
| text-align : right; | |
| display : flex; | |
| align-items: center; | |
| } | |
| .gi-header__pub { | |
| font-size : 10px; | |
| line-height: 1.5; | |
| } | |
| .gi-share { | |
| margin: 0 1rem; | |
| } | |
| .gi-share ul { | |
| display: flex; | |
| } | |
| .gi-share ul li { | |
| margin-left: 1rem; | |
| } | |
| .gi-series-banner { | |
| height: 50px; | |
| } | |
| .gi-series-banner img.gi-header_logo { | |
| width : 50px; | |
| height : 50px; | |
| margin-right: 10px; | |
| top : 0; | |
| left : 0; | |
| } | |
| .gi-series-banner h1.gi-series-title { | |
| position : absolute; | |
| top : 17px; | |
| left : 60px; | |
| font-size : 14px; | |
| font-weight: bold; | |
| } | |
| .gi-series-banner h1.gi-series-title span.gi-series-subtitle { | |
| color : #777; | |
| font-size : 12px; | |
| font-weight: normal; | |
| } | |
| @media (min-width: 768px) { | |
| .gi-header { | |
| height : 50px; | |
| border-bottom: none; | |
| } | |
| } | |
| a.js-gi-share { | |
| color: #fff; | |
| } | |
| .gi-share a.gi-share_all { | |
| display : inline-block; | |
| width : 28px; | |
| height : 28px; | |
| margin-right: 10px; | |
| padding-top : 5px; | |
| color : #fff; | |
| text-align : center; | |
| } | |
| .gi-share a.gi-share_facebook { | |
| background: #3b579d; | |
| } | |
| .gi-share a.gi-share_twitter { | |
| background: #2caae1; | |
| } | |
| .gi-share a.gi-share_email { | |
| background: #666; | |
| } | |
| footer.gi-footer { | |
| background-color: #eee; | |
| } | |
| footer.gi-footer .gi-footer__legal { | |
| padding : 15px 0; | |
| font-size : 12px; | |
| line-height: 1.4; | |
| text-align : center; | |
| border-top : 1px #ddd solid; | |
| } | |
| footer.gi-footer .gi-footer__legal a { | |
| color : #444; | |
| text-decoration: none; | |
| } | |
| footer.gi-footer .gi-footer__legal a:hover { | |
| color: #CE2A23; | |
| } | |
| footer.gi-footer .gi-footer__legal ul { | |
| margin : 0 auto; | |
| padding: 0; | |
| } | |
| footer.gi-footer .gi-footer__legal li { | |
| font-family: "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| display : inline-block; | |
| list-style : none; | |
| padding : 0 6px; | |
| } | |
| footer.gi-footer .gi-footer__copyright { | |
| padding : 14px 0; | |
| color : #555; | |
| font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; | |
| font-size : 10px; | |
| line-height: 1.4; | |
| text-align : center; | |
| border-top : 1px solid #ddd; | |
| } | |
| footer.gi-footer .gi-footer__copyright address { | |
| margin : 0; | |
| font-style : normal; | |
| font-weight : normal; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| footer.gi-footer .gi-footer__copyright abbr { | |
| border: none; | |
| } | |
| .gi-photo { | |
| position : relative; | |
| width : 100%; | |
| margin-left: 0; | |
| display : block; | |
| margin-top : 2rem; | |
| } | |
| .gi-photo h3 { | |
| text-align : left; | |
| margin : 0; | |
| padding : 0; | |
| font-size : 1.2rem; | |
| line-height : 1.2; | |
| margin-bottom : 1rem; | |
| text-transform: none; | |
| border : none; | |
| } | |
| .gi-photo h3:after { | |
| border: none; | |
| } | |
| @media (min-width: 768px) { | |
| .gi-photo { | |
| margin-top: 3rem; | |
| } | |
| } | |
| .gi-photo-caption { | |
| display : inline-block; | |
| margin-top : 0.8rem; | |
| margin-bottom: 3rem; | |
| color : #777; | |
| font-family : "GMSansC","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| font-size : 0.8em; | |
| line-height : 1.4em; | |
| position : relative; | |
| } | |
| @media (min-width: 768px) { | |
| .gi-photo-caption { | |
| font-size: 0.7em; | |
| } | |
| } | |
| .gi-photo img { | |
| display : block; | |
| width : 100%; | |
| opacity : 0; | |
| transition: opacity 1s; | |
| } | |
| .gi-photo img.loaded { | |
| opacity: 1; | |
| } | |
| .gi-photo--lrg { | |
| width : 100%; | |
| margin-left: -gutter(); | |
| } | |
| .gi-photo--sml { | |
| width: 100%; | |
| } | |
| @media (min-width: 768px) { | |
| .gi-photo--sml { | |
| float : right; | |
| max-width : 300px; | |
| margin-left: 2rem; | |
| } | |
| } | |
| .gi-photo--doc { | |
| margin-bottom: 3rem; | |
| } | |
| .gi-photo-quote.active { | |
| opacity : 1; | |
| transform: translateY(0); | |
| } | |
| @media (min-width: 1260px) { | |
| .gi-photo-quote.active { | |
| opacity : 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .gi-photo-quote { | |
| font-family : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| font-size : 1.3rem; | |
| line-height : 1.2em; | |
| margin-bottom: 1.2rem; | |
| } | |
| .gi-photo-quote.gi-photo-quote--doc { | |
| margin-top : 1.2rem; | |
| margin-bottom: 3rem; | |
| } | |
| @media (min-width: 768px) { | |
| .gi-photo-quote { | |
| font-size : 1.5rem; | |
| line-height : 1.2em; | |
| margin-bottom: 1.5rem; | |
| } | |
| } | |
| @media (min-width: 1260px) { | |
| .gi-photo-quote { | |
| opacity : 0; | |
| transform : translateY(1rem); | |
| transition : all 0.8s; | |
| transition-timing-function: ease-out; | |
| width : 35%; | |
| float : right; | |
| margin-right : calc(-2.2rem - 35%); | |
| margin-top : 2.5rem; | |
| margin-bottom : 0; | |
| } | |
| .gi-photo-quote.gi-photo-quote--left { | |
| float : left; | |
| margin-left: calc(-2.2rem - 35%); | |
| text-align : right; | |
| } | |
| .gi-photo-quote.gi-photo-quote--left cite { | |
| text-align: right; | |
| } | |
| .gi-photo-quote.gi-photo-quote--doc { | |
| position : absolute; | |
| top : 0; | |
| margin-top: 1rem; | |
| } | |
| } | |
| @media (min-width: 1440px) { | |
| .gi-photo-quote { | |
| font-size : 1.5rem; | |
| line-height : 1.15em; | |
| width : 45%; | |
| margin-right: calc(-2.2rem - 45%); | |
| } | |
| .gi-photo-quote.gi-photo-quote--left { | |
| margin-left: calc(-2.2rem - 45%); | |
| } | |
| } | |
| .gi-photo-quote cite { | |
| display : block; | |
| font-family : "GMSansC","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| text-align : left; | |
| font-style : normal; | |
| text-transform: uppercase; | |
| font-size : 0.7rem; | |
| line-height : 1.1rem; | |
| margin-top : 0.8rem; | |
| } | |
| @media (max-width: 414px) { | |
| .gi-photo--lrg { | |
| margin-left: 0; | |
| } | |
| } | |
| .gi-photo--fb { | |
| width : 100vw; | |
| margin-left: calc( 0px - (100vw - 100%)/2); | |
| } | |
| @media (min-width: 768px) { | |
| .gi-photo--lrg { | |
| width : 90vw; | |
| margin-left: calc( 0px - (90vw - 620px)/2); | |
| } | |
| } | |
| @media (min-width: 940px) { | |
| .gi-photo--lrg { | |
| width : 75vw; | |
| margin-left: calc( 0px - (75vw - 620px)/2); | |
| } | |
| } | |
| .powa-shot-play-btn { | |
| width : 70px; | |
| height : 70px; | |
| bottom : 20px !important; | |
| left : 20px !important; | |
| text-indent: -1000em; | |
| border : 1px solid #666; | |
| } | |
| @media (min-width: 768px) { | |
| .powa-shot-play-btn { | |
| width : 82px; | |
| height: 82px; | |
| bottom: 30px !important; | |
| left : 30px !important; | |
| } | |
| } | |
| .powa-shot-play-btn:after { | |
| position : absolute; | |
| content : ''; | |
| width : 0; | |
| height : 0; | |
| border-style: solid; | |
| border-color: transparent transparent transparent #ffffff; | |
| border-width: 18px 0 18px 32px; | |
| top : 16px; | |
| left : 20px; | |
| } | |
| @media (min-width: 768px) { | |
| .powa-shot-play-btn:after { | |
| top : 18px; | |
| left : 24px; | |
| border-width: 22px 0 22px 36px; | |
| } | |
| } | |
| .powa-shot-play-btn:hover { | |
| opacity: 0.9; | |
| } | |
| .top-grp { | |
| margin-top : 0; | |
| position : relative; | |
| margin-left : calc( 0px - (100vw - 100%)/2); | |
| width : 100vw; | |
| padding : 0 1rem; | |
| background : #fff; | |
| color : #111; | |
| font-family : "PrattRegular",Georgia,"Times New Roman",serif; | |
| padding-bottom: 0; | |
| } | |
| .top-grp .bg { | |
| background : #000; | |
| margin-left: calc( 0px - (100vw - 100%)/2); | |
| width : 100vw; | |
| text-align : center; | |
| } | |
| @media (orientation: landscape) { | |
| .top-grp .bg { | |
| height : 100vh; | |
| max-height: 60vh; | |
| } | |
| } | |
| .top-grp .bg-img { | |
| height: 100%; | |
| margin: auto 0; | |
| } | |
| @media (orientation: portrait) { | |
| .top-grp .bg-img { | |
| display: block; | |
| width : 100%; | |
| height : auto; | |
| } | |
| } | |
| @media (orientation: landscape) { | |
| .top-grp .bg-img { | |
| width : auto; | |
| max-height: 60vh; | |
| } | |
| } | |
| .top-grp .top-grp_content { | |
| margin : 0 auto; | |
| padding-top : 1rem; | |
| position : relative; | |
| max-width : 640px; | |
| margin-bottom: 0; | |
| } | |
| .top-grp .top-grp_content.top-grp_content--nophoto { | |
| margin-top: 4rem; | |
| } | |
| @media (min-width: 768px) { | |
| .top-grp .top-grp_content { | |
| margin: 2rem auto; | |
| } | |
| } | |
| @media (min-width: 768px) { | |
| .top-grp { | |
| margin: 0 auto; | |
| } | |
| } | |
| .top-grp .gi-series-subtitle { | |
| font-family : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| text-transform: uppercase; | |
| letter-spacing: 0.06rem; | |
| display : inline-block; | |
| margin-bottom : 0.2rem; | |
| font-weight : normal; | |
| font-size : 1.1rem; | |
| } | |
| .top-grp h1 { | |
| position : relative; | |
| font-weight : normal; | |
| font-family : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| text-transform: uppercase; | |
| letter-spacing: -0.01rem; | |
| font-size : 2.3rem; | |
| line-height : 0.95em; | |
| margin-bottom : 0.5rem; | |
| } | |
| @media (min-width: 400px) { | |
| .top-grp h1 { | |
| font-size: 2.3rem; | |
| } | |
| } | |
| @media (min-width: 768px) { | |
| .top-grp h1 { | |
| font-size : 3.4rem; | |
| line-height : 0.9em; | |
| margin-bottom: 1.2rem; | |
| } | |
| } | |
| .top-grp .deck { | |
| font-family : "PrattRegular",Georgia,"Times New Roman",serif; | |
| text-rendering: geometricPrecision; | |
| font-weight : normal; | |
| margin : 0; | |
| line-height : 1.4em; | |
| } | |
| @media (min-width: 768px) { | |
| .top-grp .deck { | |
| font-size : 1.4rem; | |
| line-height : 1.4em; | |
| margin-bottom: 1rem; | |
| } | |
| } | |
| .top-grp .meta { | |
| text-rendering: geometricPrecision; | |
| font-family : "GMSansC","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| font-size : 0.7rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.09rem; | |
| line-height : 1.6em; | |
| } | |
| .top-grp .meta strong { | |
| font-family: "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| } | |
| .top-grp .meta.link { | |
| font-family : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| text-decoration: none; | |
| color : #CE2A23; | |
| display : block; | |
| } | |
| .gi-header_logo { | |
| width : 50px; | |
| top : 1rem; | |
| left : 1rem; | |
| z-index : 1; | |
| position: absolute; | |
| } | |
| @media (max-width: 375px) { | |
| .top-grp .top-grp_content { | |
| margin-top: 20px; | |
| } | |
| } | |
| .top-grp-invert { | |
| background : #333; | |
| color : white; | |
| padding-bottom: 3rem; | |
| } | |
| @media (min-width: 768px) { | |
| .top-grp-invert { | |
| padding-bottom: 6rem; | |
| } | |
| } | |
| .top-grp-invert .top-grp_content { | |
| padding: 6rem 0 0; | |
| margin : 0 auto; | |
| } | |
| .top-grp-invert.top-grp-fullscreen .top-grp_content { | |
| padding-top: 0; | |
| } | |
| .top-grp-fullscreen { | |
| height: 100vh; | |
| } | |
| .top-grp-fullscreen .top-grp_content { | |
| width : 70%; | |
| margin : 0 auto; | |
| position : absolute; | |
| top : 50%; | |
| left : 50%; | |
| transform: translate(-50%, -50%); | |
| max-width: 640px; | |
| } | |
| @media (min-width: 768px) { | |
| .top-grp-fullscreen .top-grp_content { | |
| margin: 0 auto; | |
| } | |
| } | |
| .top-grp-fullscreen .bg { | |
| height: 100vh; | |
| } | |
| .top-grp-overlay .bg { | |
| position : absolute; | |
| width : 100vw; | |
| top : 0; | |
| left : 0; | |
| background-size : cover; | |
| background-repeat : no-repeat; | |
| background-position: center; | |
| z-index : 0; | |
| } | |
| .top-grp-overlay .bg-img { | |
| position: absolute; | |
| width : 100vw; | |
| top : 0; | |
| left : 0; | |
| z-index : 0; | |
| } | |
| .fb-top { | |
| width : 100vw; | |
| margin-left : 0; | |
| background : #ddd; | |
| height : 80vh; | |
| position : relative; | |
| margin-bottom: 2rem; | |
| } | |
| .gi-stack div { | |
| position: absolute; | |
| top : 0; | |
| left : 0; | |
| } | |
| .bg-img-1 { | |
| width : span(12); | |
| background : #ddd; | |
| height : 80vh; | |
| background-image : url("http://www.theglobeandmail.com/static/interactive/angeline-pete/images/angeline_top_before.jpg"); | |
| background-size : cover; | |
| background-position: center; | |
| position : relative; | |
| } | |
| @keyframes fadein { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| .bg-scroll-trigger { | |
| position: absolute; | |
| top : -250px; | |
| left : 0; | |
| width : 10px; | |
| height : 1px; | |
| z-index : 100; | |
| } | |
| .banner-scroll-trigger { | |
| position: absolute; | |
| top : 0; | |
| left : 0; | |
| width : 10px; | |
| height : 1px; | |
| z-index : 100; | |
| } | |
| .bg-img-2 { | |
| width : span(12); | |
| background : #ddd; | |
| height : 80vh; | |
| background-image : url("http://www.theglobeandmail.com/static/interactive/angeline-pete/images/angeline_top_after.jpg"); | |
| background-size : cover; | |
| background-position: center; | |
| position : relative; | |
| transition : opacity 1s; | |
| opacity : 1; | |
| } | |
| .active .bg-img-2 { | |
| opacity: 0; | |
| } | |
| .bg-cover { | |
| width : span(12); | |
| height : 80vh; | |
| background-image: linear-gradient(to left top, #000, #000); | |
| position : relative; | |
| transition : opacity 1s; | |
| opacity : 0; | |
| } | |
| .active .bg-cover { | |
| opacity: 0.5; | |
| } | |
| .bg-title { | |
| width : span(12); | |
| height : 80vh; | |
| position : relative; | |
| opacity : 0; | |
| transition: opacity 1s; | |
| } | |
| .active .bg-title { | |
| opacity: 1; | |
| } | |
| .bg-title .bg-title-grp { | |
| text-align: center; | |
| top : 80%; | |
| width : 100%; | |
| color : white; | |
| padding : 0 1rem; | |
| transform : translateY(-50%); | |
| position : absolute; | |
| } | |
| .bg-title .bg-title-grp h2 { | |
| line-height : 1em; | |
| text-transform: uppercase; | |
| font-weight : normal; | |
| font-family : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| font-size : 3rem; | |
| } | |
| html * { | |
| box-sizing: border-box; | |
| } | |
| body, | |
| html { | |
| margin : 0 auto; | |
| font-size : 18px; | |
| line-height: 28px; | |
| overflow-x : hidden; | |
| } | |
| @media (min-width: 768px) { | |
| body, | |
| html { | |
| font-size : 20px; | |
| line-height: 36px; | |
| } | |
| } | |
| b, | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| i, | |
| li, | |
| p, | |
| strong { | |
| font-weight: normal; | |
| } | |
| .ed-note { | |
| margin : 2rem 0; | |
| padding : 2rem; | |
| border : rebeccapurple 3px solid; | |
| text-align: center; | |
| color : rebeccapurple; | |
| } | |
| .article { | |
| max-width: 640px; | |
| margin : 2rem 1rem; | |
| } | |
| @media (min-width: 768px) { | |
| .article { | |
| margin: 2rem auto; | |
| } | |
| } | |
| .article-copy { | |
| margin-top: 3rem; | |
| } | |
| @media (min-width: 768px) { | |
| .article-copy { | |
| margin-top: 4rem; | |
| } | |
| } | |
| p.gi-lead::first-letter { | |
| position : relative; | |
| margin-top : 14px; | |
| padding-right: 8px; | |
| float : left; | |
| font-family : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| font-size : 3.3rem; | |
| line-height : 1.6rem; | |
| opacity : 1; | |
| color : #111; | |
| } | |
| @media (min-width: 768px) { | |
| p.gi-lead::first-letter { | |
| font-size : 3.6rem; | |
| line-height: 2.2rem; | |
| } | |
| } | |
| p > a { | |
| text-decoration: underline; | |
| color : #111; | |
| } | |
| p > em > a { | |
| text-decoration: underline; | |
| color : #111; | |
| } | |
| .end { | |
| width : 100%; | |
| text-align : center; | |
| color : #999; | |
| margin-top : 4em; | |
| position : relative; | |
| margin-bottom: 4em; | |
| } | |
| .end > div { | |
| display : inline-block; | |
| background: white; | |
| padding : 1em; | |
| z-index : 10; | |
| position : relative; | |
| } | |
| .end:after { | |
| content : " "; | |
| width : 100%; | |
| height : 1px; | |
| background: #999; | |
| position : absolute; | |
| left : 0; | |
| top : 50%; | |
| z-index : 0; | |
| } | |
| .credits { | |
| font-size : 0.6rem; | |
| line-height : 1.5em; | |
| font-family : 'GMSansC', Helvetica, Arial, sans-serif; | |
| position : relative; | |
| padding-top : 3rem; | |
| padding-bottom: 3rem; | |
| color : #666; | |
| margin-bottom : 0; | |
| } | |
| .gi-bg_light { | |
| background : #efefef; | |
| padding-top: 2em; | |
| } | |
| .gi-bg_dark { | |
| color : #111; | |
| background : #ddd; | |
| padding-top: 2em; | |
| } | |
| .txt-col { | |
| max-width: 640px; | |
| margin : 0 auto; | |
| } | |
| .end { | |
| width : 100%; | |
| text-align : center; | |
| color : #999; | |
| position : relative; | |
| margin-top : 2em; | |
| margin-bottom: 2em; | |
| } | |
| .end > div { | |
| display : inline-block; | |
| background: white; | |
| padding : 1em; | |
| z-index : 10; | |
| position : relative; | |
| } | |
| .end:after { | |
| content : " "; | |
| width : 100%; | |
| height : 1px; | |
| background: #999; | |
| position : absolute; | |
| left : 0; | |
| top : 50%; | |
| z-index : 0; | |
| } | |
| p.email-tag { | |
| margin-bottom: 60px; | |
| } | |
| h2 { | |
| text-align : center; | |
| font-weight : normal; | |
| line-height : 1.2em; | |
| font-size : 2.1rem; | |
| position : relative; | |
| margin-bottom : 2rem; | |
| margin-top : 2rem; | |
| letter-spacing: 0; | |
| font-family : "PrattRegular",Georgia,"Times New Roman",serif; | |
| color : #111; | |
| } | |
| h2.subhead { | |
| margin-top : 4rem; | |
| padding-bottom: 2rem; | |
| } | |
| h2.subhead:after { | |
| content : " "; | |
| position : absolute; | |
| width : 200px; | |
| border-bottom: 2px solid #000; | |
| bottom : 0; | |
| left : 50%; | |
| transform : translate(-50%, 0); | |
| } | |
| h2:after { | |
| content : " "; | |
| position : absolute; | |
| width : 200px; | |
| border-bottom: 2px solid #000; | |
| bottom : 0; | |
| left : 50%; | |
| transform : translate(-50%, 0); | |
| } | |
| @media (min-width: 768px) { | |
| h2 { | |
| line-height: 1.2em; | |
| font-size : 2.4rem; | |
| } | |
| } | |
| h3 { | |
| font-family : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| font-size : 1.4rem; | |
| letter-spacing: 0.02rem; | |
| text-transform: uppercase; | |
| line-height : 1.2em; | |
| margin-top : 1rem; | |
| margin-bottom : 0.6rem; | |
| } | |
| @media (min-width: 768px) { | |
| h3 { | |
| font-size : 30px; | |
| line-height: 36px; | |
| } | |
| } | |
| h4 { | |
| font-family : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| font-size : 16px; | |
| letter-spacing: 0.06rem; | |
| text-transform: uppercase; | |
| line-height : 17px; | |
| margin-top : 1rem; | |
| margin-bottom : 0; | |
| } | |
| .giChartEmbed { | |
| margin: 4rem 0; | |
| } | |
| em, | |
| i { | |
| font-family: "PrattItalic",Georgia,"Times New Roman",serif; | |
| font-weight: normal; | |
| } | |
| .related { | |
| margin-top: 3rem; | |
| background: #ddd; | |
| color : #111; | |
| } | |
| .related h3 { | |
| font-family : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| font-weight : regular; | |
| font-size : 1.4rem; | |
| line-height : 1.2; | |
| margin-top : 0.6rem; | |
| margin-bottom: 1.4rem; | |
| } | |
| .related h3.subhead { | |
| font-size : 1.1rem; | |
| margin-bottom: 0.6rem; | |
| } | |
| @media (min-width: 768px) { | |
| .related h3 { | |
| font-size: 1.5rem; | |
| } | |
| } | |
| .related h5 { | |
| font-family : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| font-weight : regular; | |
| margin-bottom : 0; | |
| text-transform: uppercase; | |
| font-size : 0.8rem; | |
| line-height : 1rem; | |
| } | |
| .related .label { | |
| font-size : 0.6rem; | |
| line-height : 0.8rem; | |
| text-transform: uppercase; | |
| color : #666; | |
| margin : 0.6rem 0 -0.3rem; | |
| } | |
| .related .pointer { | |
| cursor : pointer; | |
| padding : 0.8rem 0; | |
| border-bottom: #bbb solid 1px; | |
| } | |
| .related .pointer:hover .meta h4, | |
| .related .pointer:hover .meta p { | |
| color: #111; | |
| } | |
| .related .pointer:hover .thumb { | |
| opacity: 0.9; | |
| } | |
| .related .pointer img { | |
| width : 100%; | |
| background: #ddd; | |
| display : block; | |
| margin-top: 0; | |
| } | |
| .related .pointer .thumb { | |
| transition : opacity 0.5s linear; | |
| display : inline-block; | |
| vertical-align: top; | |
| opacity : 1; | |
| width : 100%; | |
| margin-bottom : 0.2rem; | |
| } | |
| @media (min-width: 768px) { | |
| .related .pointer .thumb { | |
| width: 30%; | |
| } | |
| } | |
| .related .pointer .meta { | |
| margin-bottom : 1rem; | |
| margin-left : 0; | |
| display : inline-block; | |
| font-family : 'GMSansC'; | |
| margin-left : 1rem; | |
| color : #111; | |
| vertical-align: top; | |
| } | |
| @media (min-width: 768px) { | |
| .related .pointer .meta { | |
| width: calc(70% - 1rem); | |
| } | |
| } | |
| .related .pointer .meta h4 { | |
| font-family : "PrattRegular",Georgia,"Times New Roman",serif; | |
| font-size : 1em; | |
| line-height : 1.4em; | |
| letter-spacing: 0.02rem; | |
| font-weight : normal; | |
| margin : 0.5rem 0 0; | |
| text-transform: none; | |
| } | |
| .related .pointer .meta p { | |
| transition : color 0.3s 0.1s linear; | |
| font-size : 0.9rem; | |
| line-height: 1.6em; | |
| margin : 0; | |
| } | |
| .related .note { | |
| font-size : 0.6rem; | |
| line-height : 0.8rem; | |
| margin-top : 1rem; | |
| text-align : center; | |
| font-family : "GMSansC","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| text-transform: uppercase; | |
| color : #666; | |
| } | |
| @media (max-width: 414px) { | |
| .related { | |
| margin-top: 3em; | |
| } | |
| .txt-col { | |
| max-width: 320px; | |
| } | |
| .related .pointer .meta { | |
| margin-left: 0; | |
| } | |
| h3.subhead { | |
| margin-top: 2em; | |
| } | |
| } | |
| @media (max-width: 320px) { | |
| .txt-col { | |
| max-width: 280px; | |
| } | |
| } | |
| .series-pointer { | |
| display : none; | |
| margin-top : 2rem; | |
| margin-bottom: 2rem; | |
| border-top : 2px solid #222; | |
| padding-top : 1rem; | |
| } | |
| .series-pointer h2 { | |
| font-family : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05rem; | |
| display : inline-block; | |
| margin-bottom : 0; | |
| font-weight : normal; | |
| font-size : 1.1rem; | |
| line-height : 1.3; | |
| margin-top : 0; | |
| margin-bottom : 1rem; | |
| text-align : left; | |
| } | |
| .series-pointer h2:after { | |
| content: none; | |
| } | |
| .series-pointer h3 { | |
| font-size : 0.8rem; | |
| line-height: 1rem; | |
| } | |
| .series-pointer p { | |
| font-family : "GMSansC","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| font-size : 0.8rem; | |
| line-height : 1.5; | |
| border-bottom : 1px solid #ddd; | |
| padding-bottom: 0.8rem; | |
| } | |
| .series-pointer a { | |
| display : block; | |
| text-decoration: underline; | |
| } | |
| .series-pointer a:hover { | |
| color: #CE2A23; | |
| } | |
| .series-pointer ul { | |
| font-family: "GMSansC","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| } | |
| .series-pointer li { | |
| list-style : none; | |
| margin-bottom: 0.6rem; | |
| font-size : 0.65rem; | |
| line-height : 1.6; | |
| } | |
| .series-pointer li.note { | |
| font-family: "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| margin-top : 1rem; | |
| } | |
| @media (min-width: 768px) { | |
| .series-pointer { | |
| display : block; | |
| float : right; | |
| max-width : 300px; | |
| margin-left: 2rem; | |
| } | |
| } | |
| .series-pointer__subtitle { | |
| font-family : "PrattRegular",Georgia,"Times New Roman",serif; | |
| text-transform: none; | |
| } | |
| .big-number { | |
| position : relative; | |
| width : 100%; | |
| padding-bottom: 100%; | |
| background : #222; | |
| margin : 2rem 0; | |
| } | |
| @media (min-width: 768px) { | |
| .big-number { | |
| float : right; | |
| max-width : 300px; | |
| padding-bottom: 300px; | |
| margin-left : 2rem; | |
| } | |
| } | |
| .big-number img { | |
| position: absolute; | |
| width : 100%; | |
| top : 0; | |
| left : 0; | |
| z-index : -1; | |
| display : block; | |
| } | |
| .big-number .content { | |
| top : 50%; | |
| transform : translate(-50%, -50%); | |
| left : 50%; | |
| position : absolute; | |
| padding : 0; | |
| color : white; | |
| text-align : center; | |
| font-family: "GMSansC","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| line-height: 1em; | |
| width : 80%; | |
| } | |
| .big-number .content .value { | |
| font-size : 3rem; | |
| font-family : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| line-height : 1em; | |
| margin-bottom: 1rem; | |
| } | |
| .big-number .content .description { | |
| font-size: 0.7rem; | |
| } | |
| .big-number .content .source { | |
| text-transform: uppercase; | |
| font-size : 0.7rem; | |
| letter-spacing: 0.1rem; | |
| margin-top : 1rem; | |
| } | |
| .pullquote { | |
| padding : 4rem 0; | |
| margin-left: 0; | |
| width : calc(100% + 0em); | |
| } | |
| .pullquote quote { | |
| font-family : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| font-size : 1.6rem; | |
| line-height : 1.2em; | |
| display : block; | |
| margin-bottom : 1rem; | |
| letter-spacing: 0; | |
| } | |
| @media (min-width: 768px) { | |
| .pullquote quote { | |
| font-size : 2rem; | |
| margin-bottom: 1rem; | |
| line-height : 1.1em; | |
| } | |
| } | |
| .pullquote cite { | |
| display : block; | |
| font-family : "GMSansC","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| text-align : left; | |
| font-style : normal; | |
| text-transform: uppercase; | |
| font-size : 0.8rem; | |
| line-height : 1.2rem; | |
| } | |
| .single-profile { | |
| text-align : center; | |
| padding : 2rem 1rem; | |
| margin-bottom: 2rem; | |
| } | |
| .single-profile h2 { | |
| font-family: "Permanent Marker"; | |
| font-weight: regular; | |
| } | |
| @media (min-width: 768px) { | |
| .single-profile { | |
| float : right; | |
| max-width : 300px; | |
| margin-bottom: 0; | |
| } | |
| } | |
| .single-profile .btn { | |
| text-transform: uppercase; | |
| border : 1px solid #111; | |
| padding : 0.5rem 1.5rem; | |
| font-family : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| font-size : 0.7rem; | |
| border-radius : 3px; | |
| } | |
| .section { | |
| position : relative; | |
| width : 100%; | |
| padding-bottom: 100%; | |
| } | |
| .section img { | |
| position: absolute; | |
| width : 100%; | |
| top : 0; | |
| left : 0; | |
| z-index : -1; | |
| display : block; | |
| } | |
| .section h2 { | |
| opacity : 1; | |
| color : white; | |
| top : 50%; | |
| transform : translate(-50%, -50%); | |
| left : 50%; | |
| position : absolute; | |
| padding : 0; | |
| font-size : 2rem; | |
| font-family : 'Permanent Marker'; | |
| line-height : 1em; | |
| margin-bottom: 1rem; | |
| text-align : center; | |
| } | |
| @media (min-width: 768px) { | |
| .section h2 { | |
| font-size : 3rem; | |
| margin-bottom: 1rem; | |
| } | |
| } | |
| .section h2 small { | |
| display : block; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5rem; | |
| font-family : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| font-size : 0.7rem; | |
| } | |
| .gi-lookup { | |
| border-bottom : 1px solid #ddd; | |
| border-left : none; | |
| border-right : none; | |
| padding : 1rem; | |
| margin : 0 0 2rem; | |
| padding-bottom: 2rem; | |
| text-align : center; | |
| } | |
| .gi-lookup i { | |
| margin : 0 auto; | |
| font-size: 3rem; | |
| } | |
| .gi-lookup h2 { | |
| font-family : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| font-size : 1.4rem; | |
| letter-spacing: 0; | |
| text-transform: uppercase; | |
| line-height : 1.2em; | |
| padding-bottom: 0; | |
| margin : 0; | |
| } | |
| .gi-lookup h2:after { | |
| border: none; | |
| } | |
| .gi-lookup .btn { | |
| text-decoration: none; | |
| cursor : pointer; | |
| font-family : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| text-transform : uppercase; | |
| font-size : 0.7rem; | |
| line-height : 1rem; | |
| display : block; | |
| color : #333; | |
| border : 1px solid #bbb; | |
| padding : 0.7rem 1rem; | |
| border-radius : 3px; | |
| max-width : 280px; | |
| margin : 0 auto; | |
| text-align : center; | |
| transition : all 0.3s; | |
| } | |
| .gi-lookup .btn:hover { | |
| background: #fdfdfd; | |
| } | |
| .resp-card { | |
| border : 1px solid #ddd; | |
| padding : 0.6rem; | |
| margin : 0.5rem 0 1rem 0.6rem; | |
| text-align : right; | |
| line-height: 1rem; | |
| clear : both; | |
| width : 45%; | |
| float : right; | |
| } | |
| @media (min-width: 768px) { | |
| .resp-card { | |
| width : 30%; | |
| float : right; | |
| margin-right: 0; | |
| margin-left : 2rem; | |
| padding : 1rem; | |
| } | |
| } | |
| @media (min-width: 1260px) { | |
| .resp-card { | |
| border : none; | |
| padding : 0; | |
| width : 28%; | |
| float : left; | |
| margin-bottom: 1.6rem; | |
| margin-left : calc(-2.2rem - 28%); | |
| } | |
| } | |
| .resp-card h2 { | |
| display : inline; | |
| width : 100%; | |
| text-align : right; | |
| margin : 0; | |
| padding : 0; | |
| font-size : 1rem; | |
| line-height : 1.5rem; | |
| border-bottom: 1px solid #222; | |
| } | |
| .resp-card h2:after { | |
| border: none; | |
| } | |
| @media (min-width: 768px) { | |
| .resp-card h2 { | |
| font-size : 1.2rem; | |
| line-height: 1.5rem; | |
| } | |
| } | |
| .resp-card h3 { | |
| margin-top : 0.2rem; | |
| font-size : 0.6rem; | |
| line-height : 0.8rem; | |
| margin-bottom: 0; | |
| } | |
| @media (min-width: 768px) { | |
| .resp-card h3 { | |
| font-size : 0.7rem; | |
| line-height: 0.9rem; | |
| } | |
| } | |
| .resp-card .population { | |
| border-bottom: 1px solid #ddd; | |
| padding : 0 0 0.5rem; | |
| margin-bottom: 0.7rem; | |
| margin-top : 0.2rem; | |
| font-family : "GMSansC","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| font-size : 0.55rem; | |
| line-height : 0.75rem; | |
| } | |
| @media (min-width: 768px) { | |
| .resp-card .population { | |
| font-size : 0.6rem; | |
| line-height: 0.9rem; | |
| } | |
| } | |
| .resp-card .rate .big-num { | |
| font-family : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| font-size : 2.2rem; | |
| line-height : 1.3rem; | |
| margin-bottom: 0.4rem; | |
| } | |
| .resp-card .rate .label { | |
| font-family: "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| line-height: 0.8rem; | |
| font-size : 0.6rem; | |
| } | |
| @media (min-width: 768px) { | |
| .resp-card .rate .label { | |
| line-height : 1rem; | |
| font-size : 0.75rem; | |
| margin-bottom: 0.6rem; | |
| } | |
| } | |
| @media (min-width: 768px) { | |
| .resp-card .rate .label { | |
| font-size: 0.8rem; | |
| } | |
| } | |
| .resp-card .rate .val { | |
| margin-top: 0.6rem; | |
| } | |
| .resp-card .rate .allegations { | |
| font-family: "GMSansC","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| font-size : 0.55rem; | |
| line-height: 0.75rem; | |
| } | |
| @media (min-width: 768px) { | |
| .resp-card .rate .allegations { | |
| font-size : 0.6rem; | |
| line-height: 0.9rem; | |
| } | |
| } | |
| .resp-card:hover h2 { | |
| color : #CE2A23; | |
| border-color: #CE2A23; | |
| } | |
| .gi-data { | |
| display: none !important; | |
| } | |
| .gc-chart .gc-x-axis .tick.gc-minor line { | |
| visibility: hidden; | |
| } | |
| .gc-chart .gc-x-axis .tick text { | |
| visibility: hidden; | |
| } | |
| .gc-chart .gc-chart_title-text { | |
| font-size : 1.2rem; | |
| line-height: 1.2; | |
| } | |
| .gc-chart .gc-chart_qualifier, | |
| .gc-chart .gc-chart_qualifier.gc-chart_qualifier-bar { | |
| font-size : 16px; | |
| line-height: 1; | |
| margin-top : 5px; | |
| } | |
| .gc-chart svg { | |
| margin-top: 30px; | |
| } | |
| .gc-chart .gc-primary.gc-type_bar .gc-series_group .gc-bar-0 rect { | |
| opacity: 1; | |
| } | |
| .gc-chart .gc-primary.gc-type_bar .gc-series_group .gc-bar-0 rect.gc-muted { | |
| opacity: 0.5; | |
| } | |
| .gc-chart .gc-y-axis .tick text { | |
| font-size : 0.9rem; | |
| line-height: 1; | |
| } | |
| .gc-chart .gc-annotation { | |
| display: block; | |
| float : left; | |
| margin : 0; | |
| padding: 0; | |
| } | |
| .gc-chart .gc-annotation h3 { | |
| font-size: 0.9rem; | |
| } | |
| .gc-chart .gc-bar-label.inside, | |
| .gc-chart .gc-primary.gc-type_bar .gc-series_group .gc-series_0 .gc-bar .gc-bar-label.inside { | |
| color: #fff !important; | |
| fill : #fff !important; | |
| } | |
| .gc-chart .gc-annotation-line { | |
| stroke-width: 1px; | |
| stroke : #000; | |
| } | |
| .gc-chart .gc-annotation-text { | |
| fill : #000000; | |
| font-size: 12px; | |
| } | |
| #nat-map { | |
| width : calc(100%); | |
| height : 400px; | |
| margin-top : 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .form-wrapper { | |
| margin-top : 60px; | |
| font-family: "GMSansC","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| } | |
| .form-wrapper h3 { | |
| text-transform: none; | |
| border-left : 10px solid #CF2724; | |
| padding-left : 20px; | |
| } | |
| .gi-form-section { | |
| display : block; | |
| float : left; | |
| width : 100%; | |
| margin : 0 0 40px; | |
| padding-bottom: 40px; | |
| border-bottom : 2px dotted #cccccc; | |
| } | |
| .gi-form-section--no-break, | |
| .gi-form-section.gi-form-header { | |
| margin-top : 20px; | |
| margin-bottom: 0; | |
| border-bottom: 0; | |
| } | |
| .gi-form-subsection { | |
| display : block; | |
| float : left; | |
| width : 100%; | |
| margin-top: 20px; | |
| } | |
| .gi-form-question-desc, | |
| .gi-form-question-text { | |
| display : block; | |
| float : left; | |
| font-family : "GMSansC","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| margin : 0; | |
| padding : 0; | |
| font-size : 1.2rem; | |
| line-height : 1.2; | |
| margin-bottom: 10px; | |
| width : 100%; | |
| } | |
| .gi-form-question-desc { | |
| font-size: 0.8rem; | |
| width : 100%; | |
| } | |
| .gi-label--text { | |
| display : block; | |
| float : left; | |
| width : 100%; | |
| padding-bottom: 10px; | |
| } | |
| .gi-label--radio { | |
| display: block; | |
| float : left; | |
| width : 100%; | |
| } | |
| .gi-label--checkbox { | |
| display: block; | |
| float : left; | |
| width : 100%; | |
| } | |
| .gi-label--checkbox span, | |
| .gi-label--radio span { | |
| display : block; | |
| float : right; | |
| width : 90%; | |
| margin-bottom : 20px; | |
| padding : 0; | |
| font-size : 1rem; | |
| line-height : 1.3; | |
| vertical-align:top : | |
| } | |
| input:placeholder-shown { | |
| font-size: 0.9rem; | |
| } | |
| .gi-input--checkbox, | |
| .gi-input--radio { | |
| margin-right: 10px; | |
| width : 20px; | |
| height : 20px; | |
| font-size : 1.2rem; | |
| } | |
| .gi-input--text, | |
| .gi-input--textarea { | |
| width : 100%; | |
| border : 1px solid #c9c9c9; | |
| border-bottom: 3px solid #c9c9c9; | |
| margin-bottom: 20px; | |
| text-align : left; | |
| padding : 5px; | |
| font-size : 1.2rem; | |
| } | |
| .gi-input--textarea { | |
| min-height: 80px; | |
| } | |
| .qnumber { | |
| font-weight: bold; | |
| } | |
| a { | |
| text-decoration: underline; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment