| @import "variables"; |
| @import "reset"; |
| |
| body { |
| margin-top: $header-height; |
| } |
| |
| html, body { |
| position:relative; |
| color: $dark; |
| font-family: 'Open Sans', Arial, Helvetica, sans-serif; |
| font-weight: 400; |
| font-size: 15px; |
| word-wrap:break-word; |
| |
| h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { |
| font-weight: 600; |
| line-height: 140%; |
| margin-bottom: 14px; |
| margin-top: 28px; |
| } |
| |
| h1 { |
| font-size: 2.7em; |
| } |
| |
| h2 { |
| font-size: 2.2em; |
| } |
| |
| h3 { |
| font-size: 1.7em; |
| } |
| |
| h4 { |
| font-size: 1.4em; |
| } |
| |
| h5 { |
| font-weight: bold; |
| } |
| |
| h6 { |
| font-weight: bold; |
| color: $light-text; |
| } |
| |
| p { |
| line-height: 170%; |
| margin-bottom: 14px; |
| margin-top: 14px; |
| |
| &:first-child { |
| margin-top: 28px; |
| } |
| } |
| |
| strong { |
| font-weight: 700; |
| } |
| |
| hr { |
| margin: 30px 0 30px 0; |
| } |
| |
| a { |
| cursor: pointer; |
| } |
| |
| p, table, ul, li { |
| a { |
| color: $link; |
| cursor: pointer; |
| font-weight: 600; |
| |
| &:hover { |
| text-decoration: underline; |
| } |
| } |
| } |
| |
| ul { |
| margin-top: 14px; |
| margin-bottom: 14px; |
| line-height: 170%; |
| |
| li { |
| margin-left: 18px; |
| list-style-type: disc; |
| } |
| } |
| |
| ol { |
| margin-top: 14px; |
| margin-bottom: 14px; |
| line-height: 170%; |
| |
| li { |
| margin-left: 22px; |
| list-style-type: decimal; |
| } |
| } |
| |
| table { |
| width: 100%; |
| table-layout: fixed; |
| margin-top: 14px; |
| margin-bottom: 14px; |
| |
| |
| th { |
| font-weight: 700; |
| } |
| |
| th, td { |
| padding: 5px; |
| } |
| } |
| |
| blockquote { |
| font-size: 14px; |
| font-style: italic; |
| color: #777; |
| } |
| } |
| |
| .druid-header { |
| padding: 24px 0 34px; |
| margin-bottom: 14px; |
| color: #1c1c26; |
| text-align: center; |
| background-image: url('/img/watermark-light.png'); |
| background-size: 330px 330px; |
| background-repeat: no-repeat; |
| background-position: 18% -30px; |
| background-color: $light-bkg; |
| overflow: hidden; |
| |
| h1 { |
| margin-top: 14px; |
| font-size: 2.8em; |
| } |
| |
| h4 { |
| font-weight: 400; |
| font-size: 15px; |
| margin-top: -5px; |
| margin-bottom: 0; |
| |
| a { |
| color: $link; |
| font-weight: 600; |
| |
| .fa { |
| margin-right: 4px; |
| } |
| |
| &:hover { |
| text-decoration: underline; |
| } |
| } |
| } |
| } |
| |
| .text-indent { |
| padding-left: 50px; |
| } |
| |
| .text-indent-2 { |
| padding-left: 100px; |
| } |
| |
| .text-indent-p p { |
| padding-left: 50px; |
| } |
| |
| .image-large { |
| text-align: center; |
| margin-top: 28px; |
| margin-bottom: 28px; |
| |
| img { |
| width: 100%; |
| max-width: 660px; |
| } |
| } |
| |
| .large-button { |
| display: inline-block; |
| padding: 10px 22px; |
| color: white; |
| background: $link; |
| border-radius: 2px; |
| font-size: 15px; |
| margin-top: 14px; |
| margin-bottom: 14px; |
| |
| .fa { |
| margin-right: 3px; |
| } |
| |
| &:hover { |
| background: darken($link, 10); |
| text-decoration: none; |
| } |
| } |
| |
| .features { |
| margin-bottom: 28px; |
| margin-top: 38px; |
| |
| .feature { |
| padding-left: 74px; |
| margin-bottom: 34px; |
| |
| &:nth-child(3n-2) { |
| .fa { |
| background: $light-1; |
| } |
| } |
| |
| &:nth-child(3n-1) { |
| .fa { |
| background: $light-2; |
| } |
| } |
| |
| &:nth-child(3n) { |
| .fa { |
| background: $light-3; |
| } |
| } |
| |
| .fa { |
| top: 0; |
| left: 0; |
| position: absolute; |
| width: 54px; |
| height: 54px; |
| line-height: 54px; |
| border-radius: 40px; |
| text-align: center; |
| font-size: 20px; |
| background: $light-1; |
| color: $dark; |
| } |
| |
| p { |
| margin-top: 0; |
| } |
| |
| h5 { |
| margin-bottom: 0; |
| font-size: 1.2em; |
| } |
| } |
| } |