diff --git a/static/src/scss/alpha.scss b/static/src/scss/alpha.scss index e525d06..47a67b4 100644 --- a/static/src/scss/alpha.scss +++ b/static/src/scss/alpha.scss @@ -1,1927 +1,1831 @@ @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300italic,400italic"); /* - Alpha by HTML5 UP - html5up.net | @ajlkn - Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) + Alpha by HTML5 UP + html5up.net | @ajlkn + Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; + margin: 0; + border: 0; + padding: 0; + vertical-align: baseline; + font: inherit; + font-size: 100%; } /* Basic */ - body { - background: #f5f5f5; - } +body { + background: #F5F5F5; +} - body, input, select, textarea { - color: #777; - font-family: "Source Sans Pro", sans-serif; - font-size: 16pt; - font-weight: 300; - line-height: 1.65em; - letter-spacing: -0.015em; - } +body, input, select, textarea { + line-height: 1.65em; + letter-spacing: -0.015em; + color: #777; + font-family: "Source Sans Pro", sans-serif; + font-size: 16pt; + font-weight: 300; +} - a { - transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; - border-bottom: dotted 1px; - color: #e89980; - text-decoration: none; - } +a { + transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; + border-bottom: dotted 1px; + text-decoration: none; + color: #E89980; - a:hover { - border-bottom-color: transparent; - } + &:hover { + border-bottom-color: transparent; + } +} - strong, b { - color: #646464; - font-weight: 400; - } +strong, b { + color: #646464; + font-weight: 400; +} - em, i { - font-style: italic; - } +em, i { + font-style: italic; +} - p { - margin: 0 0 2em 0; - } +p { + margin: 0 0 2em 0; +} - h1, h2, h3, h4, h5, h6 { - color: #646464; - font-weight: 300; - line-height: 1em; - margin: 0 0 0.5em 0; - } +h1, h2, h3, h4, h5, h6 { + color: #646464; + font-weight: 300; + line-height: 1em; + margin: 0 0 0.5em 0; - h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { - color: inherit; - text-decoration: none; - } + & a { + color: inherit; + text-decoration: none; + } +} - h2 { - font-size: 2.25em; - line-height: 1.5em; - letter-spacing: -0.035em; - } +h2 { + font-size: 2.25em; + line-height: 1.5em; + letter-spacing: -0.035em; +} - h3 { - font-size: 1.75em; - line-height: 1.5em; - letter-spacing: -0.025em; - } +h3 { + font-size: 1.75em; + line-height: 1.5em; + letter-spacing: -0.025em; +} - h4 { - font-size: 1.1em; - line-height: 1.5em; - letter-spacing: 0; - } +h4 { + font-size: 1.1em; + line-height: 1.5em; + letter-spacing: 0; +} - h5 { - font-size: 0.9em; - line-height: 1.5em; - letter-spacing: 0; - } +h5 { + font-size: 0.9em; + line-height: 1.5em; + letter-spacing: 0; +} - h6 { - font-size: 0.7em; - line-height: 1.5em; - letter-spacing: 0; - } +h6 { + font-size: 0.7em; + line-height: 1.5em; + letter-spacing: 0; +} - sub { - font-size: 0.8em; - position: relative; - top: 0.5em; - } +sub { + font-size: 0.8em; + position: relative; + top: 0.5em; +} - sup { - font-size: 0.8em; - position: relative; - top: -0.5em; - } +sup { + font-size: 0.8em; + position: relative; + top: -0.5em; +} - hr { - border: 0; - border-bottom: solid 2px #e5e5e5; - margin: 2em 0; - } +hr { + border: 0; + border-bottom: solid 2px #e5e5e5; + margin: 2em 0; - hr.major { - margin: 3em 0; - } + &.major { + margin: 3em 0; + } +} - blockquote { - border-left: solid 4px #e5e5e5; - font-style: italic; - margin: 0 0 2em 0; - padding: 0.5em 0 0.5em 2em; - } +blockquote { + border-left: solid 4px #e5e5e5; + font-style: italic; + margin: 0 0 2em 0; + padding: 0.5em 0 0.5em 2em; +} - pre { - -webkit-overflow-scrolling: touch; - background: #f8f8f8; - border-radius: 6px; - border: solid 1px #e5e5e5; - font-family: monospace; - font-size: 0.9em; - line-height: 1.75em; - margin: 0 0 2em 0; - overflow-x: auto; - padding: 1em 1.5em; - } +pre { + -webkit-overflow-scrolling: touch; + background: #f8f8f8; + border-radius: 6px; + border: solid 1px #e5e5e5; + font-family: monospace; + font-size: 0.9em; + line-height: 1.75em; + margin: 0 0 2em 0; + overflow-x: auto; + padding: 1em 1.5em; +} - code { - background: #f8f8f8; - border-radius: 6px; - border: solid 1px #e5e5e5; - font-family: monospace; - font-size: 0.9em; - margin: 0 0.25em; - padding: 0.25em 0.65em; - } +code { + background: #f8f8f8; + border-radius: 6px; + border: solid 1px #e5e5e5; + font-family: monospace; + font-size: 0.9em; + margin: 0 0.25em; + padding: 0.25em 0.65em; +} - .align-left { - text-align: left; - } +.align-left { + text-align: left; +} - .align-center { - text-align: center; - } +.align-center { + text-align: center; +} - .align-right { - text-align: right; - } +.align-right { + text-align: right; +} /* Section/Article */ +section.special, article.special { + text-align: center; +} - section.special, article.special { - text-align: center; - } +header p { + color: #999; + position: relative; + margin: 0 0 1.5em 0; + font-style: italic; +} - header p { - color: #999; - position: relative; - margin: 0 0 1.5em 0; - font-style: italic; - } +header h2 + p { + font-size: 1.25em; + margin-top: -1em; + line-height: 1.5em; +} - header h2 + p { - font-size: 1.25em; - margin-top: -1em; - line-height: 1.5em; - } +header h3 + p { + font-size: 1.1em; + margin-top: -0.85em; + line-height: 1.5em; +} - header h3 + p { - font-size: 1.1em; - margin-top: -0.85em; - line-height: 1.5em; - } +header h4 + p, +header h5 + p, +header h6 + p { + font-size: 0.8em; + margin-top: -0.5em; + line-height: 1.5em; +} - header h4 + p, - header h5 + p, - header h6 + p { - font-size: 0.8em; - margin-top: -0.5em; - line-height: 1.5em; - } +header.major { + padding: 1em 0; + text-align: center; - header.major { - padding: 1em 0; - text-align: center; - } + h2 { + margin: 0; + } - header.major h2 { - margin: 0; - } - - header.major p { - display: inline-block; - border-top: solid 2px #e5e5e5; - color: #777; - margin: 1.5em 0 0 0; - padding: 1.5em 0 0 0; - font-style: normal; - } + p { + display: inline-block; + border-top: solid 2px #e5e5e5; + color: #777; + margin: 1.5em 0 0 0; + padding: 1.5em 0 0 0; + font-style: normal; + } +} /* Form */ +form { + margin: 0 0 2em 0; +} - form { - margin: 0 0 2em 0; - } +label { + color: #646464; + display: block; + font-size: 0.9em; + font-weight: 300; + margin: 0 0 1em 0; +} - label { - color: #646464; - display: block; - font-size: 0.9em; - font-weight: 300; - margin: 0 0 1em 0; - } +input[type="text"], +input[type="password"], +input[type="email"], +select, +textarea { + appearance: none; + background: #f8f8f8; + border-radius: 6px; + border: solid 1px #e5e5e5; + color: inherit; + display: block; + outline: 0; + padding: 0 1em; + text-decoration: none; + width: 100%; - input[type="text"], - input[type="password"], - input[type="email"], - select, - textarea { - appearance: none; - background: #f8f8f8; - border-radius: 6px; - border: solid 1px #e5e5e5; - color: inherit; - display: block; - outline: 0; - padding: 0 1em; - text-decoration: none; - width: 100%; - } + &:invalid { + box-shadow: none; + } - input[type="text"]:invalid, - input[type="password"]:invalid, - input[type="email"]:invalid, - select:invalid, - textarea:invalid { - box-shadow: none; - } + &:focus { + border-color: #e89980; + box-shadow: 0 0 0 2px #e89980; + } +} - input[type="text"]:focus, - input[type="password"]:focus, - input[type="email"]:focus, - select:focus, - textarea:focus { - border-color: #e89980; - box-shadow: 0 0 0 2px #e89980; - } +.select-wrapper { + text-decoration: none; + display: block; + position: relative; - .select-wrapper { - text-decoration: none; - display: block; - position: relative; - } + &:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: FontAwesome; + font-style: normal; + font-weight: normal; + text-transform: none !important; + color: #e5e5e5; + content: '\f078'; + display: block; + height: 3em; + line-height: 3em; + pointer-events: none; + position: absolute; + right: 0; + text-align: center; + top: 0; + width: 3em; + } - .select-wrapper:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: FontAwesome; - font-style: normal; - font-weight: normal; - text-transform: none !important; - } + select::-ms-expand { + display: none; + } +} - .select-wrapper:before { - color: #e5e5e5; - content: '\f078'; - display: block; - height: 3em; - line-height: 3em; - pointer-events: none; - position: absolute; - right: 0; - text-align: center; - top: 0; - width: 3em; - } +input[type="text"], +input[type="password"], +input[type="email"], +select { + height: 3em; +} - .select-wrapper select::-ms-expand { - display: none; - } +textarea { + padding: 0.75em 1em; +} - input[type="text"], - input[type="password"], - input[type="email"], - select { - height: 3em; - } +input[type="checkbox"], +input[type="radio"] { + appearance: none; + display: block; + float: left; + margin-right: -2em; + opacity: 0; + width: 1em; + z-index: -1; - textarea { - padding: 0.75em 1em; - } + & + label { + text-decoration: none; + color: #777; + cursor: pointer; + display: inline-block; + font-size: 1em; + font-weight: 300; + padding-left: 2.55em; + padding-right: 0.75em; + position: relative; - input[type="checkbox"], - input[type="radio"] { - appearance: none; - display: block; - float: left; - margin-right: -2em; - opacity: 0; - width: 1em; - z-index: -1; - } + &:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: FontAwesome; + font-style: normal; + font-weight: normal; + text-transform: none !important; + background: #f8f8f8; + border-radius: 6px; + border: solid 1px #e5e5e5; + content: ''; + display: inline-block; + height: 1.8em; + left: 0; + line-height: 1.725em; + position: absolute; + text-align: center; + top: 0; + width: 1.8em; + } + } - input[type="checkbox"] + label, - input[type="radio"] + label { - text-decoration: none; - color: #777; - cursor: pointer; - display: inline-block; - font-size: 1em; - font-weight: 300; - padding-left: 2.55em; - padding-right: 0.75em; - position: relative; - } + &:checked + label:before { + background: #666; + border-color: #666; + color: #ffffff; + content: '\f00c'; + } - input[type="checkbox"] + label:before, - input[type="radio"] + label:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: FontAwesome; - font-style: normal; - font-weight: normal; - text-transform: none !important; - } + &:checked + label:before { + border-color: #e89980; + box-shadow: 0 0 0 1px #e89980; + } +} - input[type="checkbox"] + label:before, - input[type="radio"] + label:before { - background: #f8f8f8; - border-radius: 6px; - border: solid 1px #e5e5e5; - content: ''; - display: inline-block; - height: 1.8em; - left: 0; - line-height: 1.725em; - position: absolute; - text-align: center; - top: 0; - width: 1.8em; - } +input[type="checkbox"] + label:before { + border-radius: 6px; +} - input[type="checkbox"]:checked + label:before, - input[type="radio"]:checked + label:before { - background: #666; - border-color: #666; - color: #ffffff; - content: '\f00c'; - } +input[type="radio"] + label:before { + border-radius: 100%; +} - input[type="checkbox"]:focus + label:before, - input[type="radio"]:focus + label:before { - border-color: #e89980; - box-shadow: 0 0 0 1px #e89980; - } +::-webkit-input-placeholder { + color: #999 !important; + opacity: 1.0; +} - input[type="checkbox"] + label:before { - border-radius: 6px; - } +:-moz-placeholder { + color: #999 !important; + opacity: 1.0; +} - input[type="radio"] + label:before { - border-radius: 100%; - } +::-moz-placeholder { + color: #999 !important; + opacity: 1.0; +} - ::-webkit-input-placeholder { - color: #999 !important; - opacity: 1.0; - } +:-ms-input-placeholder { + color: #999 !important; + opacity: 1.0; +} - :-moz-placeholder { - color: #999 !important; - opacity: 1.0; - } - - ::-moz-placeholder { - color: #999 !important; - opacity: 1.0; - } - - :-ms-input-placeholder { - color: #999 !important; - opacity: 1.0; - } - - .formerize-placeholder { - color: #999 !important; - opacity: 1.0; - } +.formerize-placeholder { + color: #999 !important; + opacity: 1.0; +} /* Box */ +.box { + background: #fff; + border-radius: 6px; + box-shadow: 0 2px 0 0 #e5e5e5; + margin: 0 0 2em 0; + padding: 3em; +} - .box { - background: #fff; - border-radius: 6px; - box-shadow: 0 2px 0 0 #e5e5e5; - margin: 0 0 2em 0; - padding: 3em; - } + .box > :last-child { + margin-bottom: 0; + } - .box > :last-child { - margin-bottom: 0; - } + .box.alt { + background: none !important; + border-radius: 0 !important; + box-shadow: none !important; + margin: 0 0 2em 0; + padding: 0 !important; + } - .box.alt { - background: none !important; - border-radius: 0 !important; - box-shadow: none !important; - margin: 0 0 2em 0; - padding: 0 !important; - } + .box.features .features-row { + border-top: solid 2px #e5e5e5; + position: relative; + } - .box.features .features-row { - border-top: solid 2px #e5e5e5; - position: relative; - } + .box.features .features-row:after { + clear: both; + content: ''; + display: block; + } - .box.features .features-row:after { - clear: both; - content: ''; - display: block; - } + .box.features .features-row section { + float: left; + padding: 3em; + width: 50%; + } - .box.features .features-row section { - float: left; - padding: 3em; - width: 50%; - } + .box.features .features-row section :last-child { + margin-bottom: 0; + } - .box.features .features-row section :last-child { - margin-bottom: 0; - } + .box.features .features-row section:nth-child(2n) { + padding-right: 0; + } - .box.features .features-row section:nth-child(2n) { - padding-right: 0; - } + .box.features .features-row section:nth-child(2n):before { + background: #e5e5e5; + content: ''; + display: block; + height: 100%; + margin-left: -3em; + position: absolute; + top: 0; + width: 2px; + } - .box.features .features-row section:nth-child(2n):before { - background: #e5e5e5; - content: ''; - display: block; - height: 100%; - margin-left: -3em; - position: absolute; - top: 0; - width: 2px; - } + .box.features .features-row section:nth-child(2n-1) { + padding-left: 0; + } - .box.features .features-row section:nth-child(2n-1) { - padding-left: 0; - } + .box.features .features-row:first-child { + border-top: 0; + } - .box.features .features-row:first-child { - border-top: 0; - } + .box.features .features-row:first-child section { + padding-top: 0; + } - .box.features .features-row:first-child section { - padding-top: 0; - } + .box.features .features-row:last-child { + padding-bottom: 0; + } - .box.features .features-row:last-child { - padding-bottom: 0; - } + .box.features .features-row:last-child section { + padding-bottom: 0; + } - .box.features .features-row:last-child section { - padding-bottom: 0; - } + .box.special { + text-align: center; + } - .box.special { - text-align: center; - } + .box .image.featured { + border-radius: 0; + display: block; + margin: 3em 0 3em -3em; + position: relative; + width: calc(100% + 6em); + } - .box .image.featured { - border-radius: 0; - display: block; - margin: 3em 0 3em -3em; - position: relative; - width: calc(100% + 6em); - } + .box .image.featured img { + border-radius: 0; + display: block; + width: 100%; + } - .box .image.featured img { - border-radius: 0; - display: block; - width: 100%; - } + .box .image.featured:first-child { + border-radius: 6px 6px 0 0; + margin-bottom: 3em; + margin-top: -3em; + } - .box .image.featured:first-child { - border-radius: 6px 6px 0 0; - margin-bottom: 3em; - margin-top: -3em; - } + .box .image.featured:first-child img { + border-radius: 6px 6px 0 0; + } - .box .image.featured:first-child img { - border-radius: 6px 6px 0 0; - } + .box .image.featured:last-child { + border-radius: 0 0 6px 6px; + margin-bottom: -3em; + margin-top: 3em; + } - .box .image.featured:last-child { - border-radius: 0 0 6px 6px; - margin-bottom: -3em; - margin-top: 3em; - } - - .box .image.featured:last-child img { - border-radius: 0 0 6px 6px; - } + .box .image.featured:last-child img { + border-radius: 0 0 6px 6px; + } /* Icon */ +.icon { + text-decoration: none; + border-bottom: none; + position: relative; +} - .icon { - text-decoration: none; - border-bottom: none; - position: relative; - } + .icon:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: FontAwesome; + font-style: normal; + font-weight: normal; + text-transform: none !important; + } - .icon:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: FontAwesome; - font-style: normal; - font-weight: normal; - text-transform: none !important; - } + .icon > .label { + display: none; + } - .icon > .label { - display: none; - } + .icon.major { + background: #666; + border-radius: 100%; + color: #ffffff; + cursor: default; + display: inline-block; + height: 5.5em; + line-height: 5.5em; + margin: 0 0 2em 0; + width: 5.5em; + } - .icon.major { - background: #666; - border-radius: 100%; - color: #ffffff; - cursor: default; - display: inline-block; - height: 5.5em; - line-height: 5.5em; - margin: 0 0 2em 0; - width: 5.5em; - } + .icon.major:before { + font-size: 2.5em; + } - .icon.major:before { - font-size: 2.5em; - } + .icon.major.accent1 { + background: #666; + color: #ffffff; + } - .icon.major.accent1 { - background: #666; - color: #ffffff; - } + .icon.major.accent2 { + background: #e89980; + color: #ffffff; + } - .icon.major.accent2 { - background: #e89980; - color: #ffffff; - } + .icon.major.accent3 { + background: #7fcdb8; + color: #ffffff; + } - .icon.major.accent3 { - background: #7fcdb8; - color: #ffffff; - } + .icon.major.accent4 { + background: #90b0ba; + color: #ffffff; + } - .icon.major.accent4 { - background: #90b0ba; - color: #ffffff; - } - - .icon.major.accent5 { - background: #e5cb95; - color: #ffffff; - } + .icon.major.accent5 { + background: #e5cb95; + color: #ffffff; + } /* Image */ - .image { - border-radius: 6px; - border: 0; - display: inline-block; - position: relative; - } +.image { + border-radius: 6px; + border: 0; + display: inline-block; + position: relative; +} - .image img { - border-radius: 6px; - display: block; - } + .image img { + border-radius: 6px; + display: block; + } - .image.left { - float: left; - padding: 0 1.5em 1em 0; - top: 0.25em; - } + .image.left { + float: left; + padding: 0 1.5em 1em 0; + top: 0.25em; + } - .image.right { - float: right; - padding: 0 0 1em 1.5em; - top: 0.25em; - } + .image.right { + float: right; + padding: 0 0 1em 1.5em; + top: 0.25em; + } - .image.fit { - display: block; - margin: 0 0 2em 0; - width: 100%; - } + .image.fit { + display: block; + margin: 0 0 2em 0; + width: 100%; + } - .image.fit img { - display: block; - width: 100%; - } + .image.fit img { + display: block; + width: 100%; + } /* List */ +ol { + list-style: decimal; + margin: 0 0 2em 0; + padding-left: 1.25em; +} - ol { - list-style: decimal; - margin: 0 0 2em 0; - padding-left: 1.25em; - } + ol li { + padding-left: 0.25em; + } - ol li { - padding-left: 0.25em; - } +ul { + list-style: disc; + margin: 0 0 2em 0; + padding-left: 1em; +} - ul { - list-style: disc; - margin: 0 0 2em 0; - padding-left: 1em; - } + ul li { + padding-left: 0.5em; + } - ul li { - padding-left: 0.5em; - } + ul.alt { + list-style: none; + padding-left: 0; + } - ul.alt { - list-style: none; - padding-left: 0; - } + ul.alt li { + border-top: solid 1px #e5e5e5; + padding: 0.5em 0; + } - ul.alt li { - border-top: solid 1px #e5e5e5; - padding: 0.5em 0; - } + ul.alt li:first-child { + border-top: 0; + padding-top: 0; + } - ul.alt li:first-child { - border-top: 0; - padding-top: 0; - } + ul.icons { + cursor: default; + list-style: none; + padding-left: 0; + } - ul.icons { - cursor: default; - list-style: none; - padding-left: 0; - } + ul.icons li { + display: inline-block; + padding: 0 1.25em 0 0; + } - ul.icons li { - display: inline-block; - padding: 0 1.25em 0 0; - } + ul.icons li:last-child { + padding-right: 0; + } - ul.icons li:last-child { - padding-right: 0; - } + ul.icons li .icon { + color: inherit; + } - ul.icons li .icon { - color: inherit; - } + ul.icons li .icon:before { + font-size: 1.75em; + } - ul.icons li .icon:before { - font-size: 1.75em; - } + ul.actions { + cursor: default; + list-style: none; + padding-left: 0; + } - ul.actions { - cursor: default; - list-style: none; - padding-left: 0; - } + ul.actions li { + display: inline-block; + padding: 0 1em 0 0; + vertical-align: middle; + } - ul.actions li { - display: inline-block; - padding: 0 1em 0 0; - vertical-align: middle; - } + ul.actions li:last-child { + padding-right: 0; + } - ul.actions li:last-child { - padding-right: 0; - } + ul.actions.small li { + padding: 0 0.5em 0 0; + } - ul.actions.small li { - padding: 0 0.5em 0 0; - } + ul.actions.vertical li { + display: block; + padding: 1em 0 0 0; + } - ul.actions.vertical li { - display: block; - padding: 1em 0 0 0; - } + ul.actions.vertical li:first-child { + padding-top: 0; + } - ul.actions.vertical li:first-child { - padding-top: 0; - } + ul.actions.vertical li > * { + margin-bottom: 0; + } - ul.actions.vertical li > * { - margin-bottom: 0; - } + ul.actions.vertical.small li { + padding: 0.5em 0 0 0; + } - ul.actions.vertical.small li { - padding: 0.5em 0 0 0; - } + ul.actions.vertical.small li:first-child { + padding-top: 0; + } - ul.actions.vertical.small li:first-child { - padding-top: 0; - } + ul.actions.fit { + display: table; + margin-left: -1em; + padding: 0; + table-layout: fixed; + width: calc(100% + 1em); + } - ul.actions.fit { - display: table; - margin-left: -1em; - padding: 0; - table-layout: fixed; - width: calc(100% + 1em); - } + ul.actions.fit li { + display: table-cell; + padding: 0 0 0 1em; + } - ul.actions.fit li { - display: table-cell; - padding: 0 0 0 1em; - } + ul.actions.fit li > * { + margin-bottom: 0; + } - ul.actions.fit li > * { - margin-bottom: 0; - } + ul.actions.fit.small { + margin-left: -0.5em; + width: calc(100% + 0.5em); + } - ul.actions.fit.small { - margin-left: -0.5em; - width: calc(100% + 0.5em); - } + ul.actions.fit.small li { + padding: 0 0 0 0.5em; + } - ul.actions.fit.small li { - padding: 0 0 0 0.5em; - } - - dl { - margin: 0 0 2em 0; - } +dl { + margin: 0 0 2em 0; +} /* Table */ +.table-wrapper { + -webkit-overflow-scrolling: touch; + overflow-x: auto; +} - .table-wrapper { - -webkit-overflow-scrolling: touch; - overflow-x: auto; - } +table { + margin: 0 0 2em 0; + width: 100%; +} - table { - margin: 0 0 2em 0; - width: 100%; - } + table tbody tr { + border: solid 1px #e5e5e5; + border-left: 0; + border-right: 0; + } - table tbody tr { - border: solid 1px #e5e5e5; - border-left: 0; - border-right: 0; - } + table tbody tr:nth-child(2n + 1) { + background-color: #f8f8f8; + } - table tbody tr:nth-child(2n + 1) { - background-color: #f8f8f8; - } + table td { + padding: 0.75em 0.75em; + } - table td { - padding: 0.75em 0.75em; - } + table th { + color: #646464; + font-size: 0.9em; + font-weight: 300; + padding: 0 0.75em 0.75em 0.75em; + text-align: left; + } - table th { - color: #646464; - font-size: 0.9em; - font-weight: 300; - padding: 0 0.75em 0.75em 0.75em; - text-align: left; - } + table thead { + border-bottom: solid 2px #e5e5e5; + } - table thead { - border-bottom: solid 2px #e5e5e5; - } + table tfoot { + border-top: solid 2px #e5e5e5; + } - table tfoot { - border-top: solid 2px #e5e5e5; - } + table.alt { + border-collapse: separate; + } - table.alt { - border-collapse: separate; - } + table.alt tbody tr td { + border: solid 1px #e5e5e5; + border-left-width: 0; + border-top-width: 0; + } - table.alt tbody tr td { - border: solid 1px #e5e5e5; - border-left-width: 0; - border-top-width: 0; - } + table.alt tbody tr td:first-child { + border-left-width: 1px; + } - table.alt tbody tr td:first-child { - border-left-width: 1px; - } + table.alt tbody tr:first-child td { + border-top-width: 1px; + } - table.alt tbody tr:first-child td { - border-top-width: 1px; - } + table.alt thead { + border-bottom: 0; + } - table.alt thead { - border-bottom: 0; - } - - table.alt tfoot { - border-top: 0; - } + table.alt tfoot { + border-top: 0; + } /* Button */ +input[type="submit"], +input[type="reset"], +input[type="button"], +.button { + appearance: none; + transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + background-color: #666; + border-radius: 6px; + border: 0; + color: #ffffff; + cursor: pointer; + display: inline-block; + font-weight: 400; + height: 3em; + line-height: 3em; + padding: 0 2em; + text-align: center; + text-decoration: none; + white-space: nowrap; +} - input[type="submit"], - input[type="reset"], - input[type="button"], - .button { - appearance: none; - transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - background-color: #666; - border-radius: 6px; - border: 0; - color: #ffffff; - cursor: pointer; - display: inline-block; - font-weight: 400; - height: 3em; - line-height: 3em; - padding: 0 2em; - text-align: center; - text-decoration: none; - white-space: nowrap; - } + input[type="submit"]:hover, + input[type="reset"]:hover, + input[type="button"]:hover, + .button:hover { + background-color: #737373; + } - input[type="submit"]:hover, - input[type="reset"]:hover, - input[type="button"]:hover, - .button:hover { - background-color: #737373; - } + input[type="submit"]:active, + input[type="reset"]:active, + input[type="button"]:active, + .button:active { + background-color: #595959; + } - input[type="submit"]:active, - input[type="reset"]:active, - input[type="button"]:active, - .button:active { - background-color: #595959; - } + input[type="submit"].icon, + input[type="reset"].icon, + input[type="button"].icon, + .button.icon { + padding-left: 1.35em; + } - input[type="submit"].icon, - input[type="reset"].icon, - input[type="button"].icon, - .button.icon { - padding-left: 1.35em; - } + input[type="submit"].icon:before, + input[type="reset"].icon:before, + input[type="button"].icon:before, + .button.icon:before { + margin-right: 0.5em; + } - input[type="submit"].icon:before, - input[type="reset"].icon:before, - input[type="button"].icon:before, - .button.icon:before { - margin-right: 0.5em; - } + input[type="submit"].fit, + input[type="reset"].fit, + input[type="button"].fit, + .button.fit { + display: block; + margin: 0 0 1em 0; + width: 100%; + } - input[type="submit"].fit, - input[type="reset"].fit, - input[type="button"].fit, - .button.fit { - display: block; - margin: 0 0 1em 0; - width: 100%; - } + input[type="submit"].small, + input[type="reset"].small, + input[type="button"].small, + .button.small { + font-size: 0.8em; + height: 2.7em; + line-height: 2.7em; + } - input[type="submit"].small, - input[type="reset"].small, - input[type="button"].small, - .button.small { - font-size: 0.8em; - height: 2.7em; - line-height: 2.7em; - } + input[type="submit"].big, + input[type="reset"].big, + input[type="button"].big, + .button.big { + font-size: 1.25em; + height: 2.7em; + line-height: 2.7em; + } - input[type="submit"].big, - input[type="reset"].big, - input[type="button"].big, - .button.big { - font-size: 1.25em; - height: 2.7em; - line-height: 2.7em; - } + input[type="submit"].alt, + input[type="reset"].alt, + input[type="button"].alt, + .button.alt { + background-color: transparent; + box-shadow: inset 0 0 0 2px #e5e5e5; + color: #777; + } - input[type="submit"].alt, - input[type="reset"].alt, - input[type="button"].alt, - .button.alt { - background-color: transparent; - box-shadow: inset 0 0 0 2px #e5e5e5; - color: #777; - } + input[type="submit"].alt:hover, + input[type="reset"].alt:hover, + input[type="button"].alt:hover, + .button.alt:hover { + background-color: #f8f8f8; + } - input[type="submit"].alt:hover, - input[type="reset"].alt:hover, - input[type="button"].alt:hover, - .button.alt:hover { - background-color: #f8f8f8; - } + input[type="submit"].alt:active, + input[type="reset"].alt:active, + input[type="button"].alt:active, + .button.alt:active { + background-color: #f0f0f0; + } - input[type="submit"].alt:active, - input[type="reset"].alt:active, - input[type="button"].alt:active, - .button.alt:active { - background-color: #f0f0f0; - } + input[type="submit"].alt.icon:before, + input[type="reset"].alt.icon:before, + input[type="button"].alt.icon:before, + .button.alt.icon:before { + color: #999; + } - input[type="submit"].alt.icon:before, - input[type="reset"].alt.icon:before, - input[type="button"].alt.icon:before, - .button.alt.icon:before { - color: #999; - } + input[type="submit"].special, + input[type="reset"].special, + input[type="button"].special, + .button.special { + background-color: #e89980; + color: #ffffff !important; + } - input[type="submit"].special, - input[type="reset"].special, - input[type="button"].special, - .button.special { - background-color: #e89980; - color: #ffffff !important; - } + input[type="submit"].special:hover, + input[type="reset"].special:hover, + input[type="button"].special:hover, + .button.special:hover { + background-color: #ecaa96; + } - input[type="submit"].special:hover, - input[type="reset"].special:hover, - input[type="button"].special:hover, - .button.special:hover { - background-color: #ecaa96; - } + input[type="submit"].special:active, + input[type="reset"].special:active, + input[type="button"].special:active, + .button.special:active { + background-color: #e4886a; + } - input[type="submit"].special:active, - input[type="reset"].special:active, - input[type="button"].special:active, - .button.special:active { - background-color: #e4886a; - } - - input[type="submit"].disabled, input[type="submit"]:disabled, - input[type="reset"].disabled, - input[type="reset"]:disabled, - input[type="button"].disabled, - input[type="button"]:disabled, - .button.disabled, - .button:disabled { - background-color: #777 !important; - box-shadow: inset 0 -0.15em 0 0 rgba(0, 0, 0, 0.15); - color: #f5f5f5 !important; - cursor: default; - opacity: 0.25; - } + input[type="submit"].disabled, input[type="submit"]:disabled, + input[type="reset"].disabled, + input[type="reset"]:disabled, + input[type="button"].disabled, + input[type="button"]:disabled, + .button.disabled, + .button:disabled { + background-color: #777 !important; + box-shadow: inset 0 -0.15em 0 0 rgba(0, 0, 0, 0.15); + color: #f5f5f5 !important; + cursor: default; + opacity: 0.25; + } /* Header */ +#page-wrapper { + padding-top: 3em; +} - #page-wrapper { - padding-top: 3em; - } +body.landing #page-wrapper { + padding-top: 0; +} - body.landing #page-wrapper { - padding-top: 0; - } +@keyframes reveal-header { + 0% { + top: -5em; + } - @-moz-keyframes reveal-header { - 0% { - top: -5em; - } + 100% { + top: 0; + } +} - 100% { - top: 0; - } - } +#header { + background: #444; + color: #bbb; + cursor: default; + height: 3.25em; + left: 0; + line-height: 3.25em; + position: fixed; + top: 0; + width: 100%; + z-index: 10000; +} - @-webkit-keyframes reveal-header { - 0% { - top: -5em; - } + #header h1 { + color: inherit; + height: inherit; + left: 1.25em; + line-height: inherit; + margin: 0; + padding: 0; + position: absolute; + top: 0; + } - 100% { - top: 0; - } - } + #header h1 a { + color: #fff; + font-weight: 400; + border: 0; + } - @-ms-keyframes reveal-header { - 0% { - top: -5em; - } + #header nav { + height: inherit; + line-height: inherit; + position: absolute; + right: 0.75em; + top: 0; + vertical-align: middle; + } - 100% { - top: 0; - } - } + #header nav > ul { + list-style: none; + margin: 0; + padding-left: 0; + } - @keyframes reveal-header { - 0% { - top: -5em; - } + #header nav > ul > li { + display: inline-block; + padding-left: 0; + } - 100% { - top: 0; - } - } + #header nav > ul > li > ul { + display: none; + } - #header { - background: #444; - color: #bbb; - cursor: default; - height: 3.25em; - left: 0; - line-height: 3.25em; - position: fixed; - top: 0; - width: 100%; - z-index: 10000; - } + #header nav > ul > li a { + display: inline-block; + height: 2em; + line-height: 1.95em; + padding: 0 1em; + border-radius: 6px; + } - #header h1 { - color: inherit; - height: inherit; - left: 1.25em; - line-height: inherit; - margin: 0; - padding: 0; - position: absolute; - top: 0; - } + #header nav > ul > li a:not(.button) { + color: #fff; + display: inline-block; + text-decoration: none; + border: 0; + } - #header h1 a { - color: #fff; - font-weight: 400; - border: 0; - } + #header nav > ul > li a:not(.button).icon:before { + color: #999; + margin-right: 0.5em; + } - #header nav { - height: inherit; - line-height: inherit; - position: absolute; - right: 0.75em; - top: 0; - vertical-align: middle; - } + #header nav > ul > li:first-child { + margin-left: 0; + } - #header nav > ul { - list-style: none; - margin: 0; - padding-left: 0; - } + #header nav > ul > li.active a:not(.button) { + background-color: rgba(153, 153, 153, 0.25); + } - #header nav > ul > li { - display: inline-block; - padding-left: 0; - } + #header nav > ul > li .button { + margin: 0 0 0 0.5em; + position: relative; + } - #header nav > ul > li > ul { - display: none; - } + #header input[type="submit"], + #header input[type="reset"], + #header input[type="button"], + #header .button { + background-color: transparent; + box-shadow: inset 0 0 0 2px #999; + color: #fff; + } - #header nav > ul > li a { - display: inline-block; - height: 2em; - line-height: 1.95em; - padding: 0 1em; - border-radius: 6px; - } + #header input[type="submit"]:hover, + #header input[type="reset"]:hover, + #header input[type="button"]:hover, + #header .button:hover { + background-color: rgba(153, 153, 153, 0.25); + } - #header nav > ul > li a:not(.button) { - color: #fff; - display: inline-block; - text-decoration: none; - border: 0; - } + #header input[type="submit"]:active, + #header input[type="reset"]:active, + #header input[type="button"]:active, + #header .button:active { + background-color: rgba(153, 153, 153, 0.5); + } - #header nav > ul > li a:not(.button).icon:before { - color: #999; - margin-right: 0.5em; - } + #header .container { + position: relative; + } - #header nav > ul > li:first-child { - margin-left: 0; - } + #header .container h1 { + left: 0; + } - #header nav > ul > li.active a:not(.button) { - background-color: rgba(153, 153, 153, 0.25); - } + #header .container nav { + right: 0; + } - #header nav > ul > li .button { - margin: 0 0 0 0.5em; - position: relative; - } + #header.reveal { + animation: reveal-header 0.5s; + } - #header input[type="submit"], - #header input[type="reset"], - #header input[type="button"], - #header .button { - background-color: transparent; - box-shadow: inset 0 0 0 2px #999; - color: #fff; - } + #header.alt { + animation: none; + background: none; + color: rgba(255, 255, 255, 0.75); + position: absolute; + } - #header input[type="submit"]:hover, - #header input[type="reset"]:hover, - #header input[type="button"]:hover, - #header .button:hover { - background-color: rgba(153, 153, 153, 0.25); - } + #header.alt nav > ul > li a:not(.button).icon:before { + color: rgba(255, 255, 255, 0.75); + } - #header input[type="submit"]:active, - #header input[type="reset"]:active, - #header input[type="button"]:active, - #header .button:active { - background-color: rgba(153, 153, 153, 0.5); - } + #header.alt nav > ul > li.active a:not(.button) { + background-color: rgba(255, 255, 255, 0.2); + } - #header .container { - position: relative; - } + #header.alt input[type="submit"], + #header.alt input[type="reset"], + #header.alt input[type="button"], + #header.alt .button { + box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); + } - #header .container h1 { - left: 0; - } + #header.alt input[type="submit"]:hover, + #header.alt input[type="reset"]:hover, + #header.alt input[type="button"]:hover, + #header.alt .button:hover { + background-color: rgba(255, 255, 255, 0.1); + } - #header .container nav { - right: 0; - } + #header.alt input[type="submit"]:active, + #header.alt input[type="reset"]:active, + #header.alt input[type="button"]:active, + #header.alt .button:active { + background-color: rgba(255, 255, 255, 0.2); + } - #header.reveal { - animation: reveal-header 0.5s; - } +.dropotron { + background: #fff; + border-radius: 6px; + box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.065), inset 0 -1px 0 0 #fff, inset 0 0 0 1px rgba(229, 229, 229, 0.5); + list-style: none; + margin: calc(-0.5em + 1px) 0 0 1px; + padding: 0.5em 0; + width: 11em; +} - #header.alt { - animation: none; - background: none; - color: rgba(255, 255, 255, 0.75); - position: absolute; - } + .dropotron li { + padding: 0; + } - #header.alt nav > ul > li a:not(.button).icon:before { - color: rgba(255, 255, 255, 0.75); - } + .dropotron li a, .dropotron li span { + transition: none; + border: 0; + border-top: solid 1px #f2f2f2; + color: inherit; + display: block; + padding: 0.15em 1em; + } - #header.alt nav > ul > li.active a:not(.button) { - background-color: rgba(255, 255, 255, 0.2); - } + .dropotron li:first-child > a, .dropotron li:first-child > span { + border-top: 0; + } - #header.alt input[type="submit"], - #header.alt input[type="reset"], - #header.alt input[type="button"], - #header.alt .button { - box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); - } + .dropotron li.active > a, .dropotron li.active > span, .dropotron li:hover > a, .dropotron li:hover > span { + background: #e89980; + color: #ffffff; + } - #header.alt input[type="submit"]:hover, - #header.alt input[type="reset"]:hover, - #header.alt input[type="button"]:hover, - #header.alt .button:hover { - background-color: rgba(255, 255, 255, 0.1); - } + .dropotron.level-0 { + font-size: 0.9em; + margin: 1em 0 0 0; + } - #header.alt input[type="submit"]:active, - #header.alt input[type="reset"]:active, - #header.alt input[type="button"]:active, - #header.alt .button:active { - background-color: rgba(255, 255, 255, 0.2); - } - - .dropotron { - background: #fff; - border-radius: 6px; - box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.065), inset 0 -1px 0 0 #fff, inset 0 0 0 1px rgba(229, 229, 229, 0.5); - list-style: none; - margin: calc(-0.5em + 1px) 0 0 1px; - padding: 0.5em 0; - width: 11em; - } - - .dropotron li { - padding: 0; - } - - .dropotron li a, .dropotron li span { - transition: none; - border: 0; - border-top: solid 1px #f2f2f2; - color: inherit; - display: block; - padding: 0.15em 1em; - } - - .dropotron li:first-child > a, .dropotron li:first-child > span { - border-top: 0; - } - - .dropotron li.active > a, .dropotron li.active > span, .dropotron li:hover > a, .dropotron li:hover > span { - background: #e89980; - color: #ffffff; - } - - .dropotron.level-0 { - font-size: 0.9em; - margin: 1em 0 0 0; - } - - .dropotron.level-0:before { - transform: rotate(45deg); - background: #fff; - border: solid 1px rgba(229, 229, 229, 0.5); - border-bottom: 0; - border-right: 0; - box-shadow: -0.25em -0.125em 0.125em 0 rgba(0, 0, 0, 0.015); - content: ''; - display: block; - height: 0.75em; - position: absolute; - right: 1.25em; - top: -0.375em; - width: 0.75em; - z-index: 0; - } + .dropotron.level-0:before { + transform: rotate(45deg); + background: #fff; + border: solid 1px rgba(229, 229, 229, 0.5); + border-bottom: 0; + border-right: 0; + box-shadow: -0.25em -0.125em 0.125em 0 rgba(0, 0, 0, 0.015); + content: ''; + display: block; + height: 0.75em; + position: absolute; + right: 1.25em; + top: -0.375em; + width: 0.75em; + z-index: 0; + } /* Banner */ +#banner { + background-attachment: scroll, fixed; + background-color: #666; + background-image: url("images/overlay.png"), url("../../images/banner.jpg"); + background-position: top left, center center; + background-repeat: repeat, no-repeat; + background-size: auto, cover; + color: #fff; + padding: 12em 0 20em 0; + text-align: center; +} - #banner { - background-attachment: scroll, fixed; - background-color: #666; - background-image: url("images/overlay.png"), url("../../images/banner.jpg"); - background-position: top left, center center; - background-repeat: repeat, no-repeat; - background-size: auto, cover; - color: #fff; - padding: 12em 0 20em 0; - text-align: center; - } + #banner :last-child { + margin-bottom: 0; + } - #banner :last-child { - margin-bottom: 0; - } + #banner h2, #banner h3, #banner h4, #banner h5, #banner h6 { + color: #fff; + } - #banner h2, #banner h3, #banner h4, #banner h5, #banner h6 { - color: #fff; - } + #banner h2 { + font-size: 3.5em; + line-height: 1em; + margin: 0 0 0.5em 0; + padding: 0; + } - #banner h2 { - font-size: 3.5em; - line-height: 1em; - margin: 0 0 0.5em 0; - padding: 0; - } + #banner p { + font-size: 1.25em; + margin-bottom: 1.75em; + } - #banner p { - font-size: 1.25em; - margin-bottom: 1.75em; - } + #banner input[type="submit"], + #banner input[type="reset"], + #banner input[type="button"], + #banner .button { + background-color: transparent; + box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); + color: #fff; + min-width: 12em; + } - #banner input[type="submit"], - #banner input[type="reset"], - #banner input[type="button"], - #banner .button { - background-color: transparent; - box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); - color: #fff; - min-width: 12em; - } + #banner input[type="submit"]:hover, + #banner input[type="reset"]:hover, + #banner input[type="button"]:hover, + #banner .button:hover { + background-color: rgba(255, 255, 255, 0.1); + } - #banner input[type="submit"]:hover, - #banner input[type="reset"]:hover, - #banner input[type="button"]:hover, - #banner .button:hover { - background-color: rgba(255, 255, 255, 0.1); - } + #banner input[type="submit"]:active, + #banner input[type="reset"]:active, + #banner input[type="button"]:active, + #banner .button:active { + background-color: rgba(255, 255, 255, 0.2); + } - #banner input[type="submit"]:active, - #banner input[type="reset"]:active, - #banner input[type="button"]:active, - #banner .button:active { - background-color: rgba(255, 255, 255, 0.2); - } - - #banner input[type="submit"].special, - #banner input[type="reset"].special, - #banner input[type="button"].special, - #banner .button.special { - background: #fff; - color: #666 !important; - } + #banner input[type="submit"].special, + #banner input[type="reset"].special, + #banner input[type="button"].special, + #banner .button.special { + background: #fff; + color: #666 !important; + } /* Main */ +#main { + padding: 4em 0; +} - #main { - padding: 4em 0; - } + #main > header { + text-align: center; + margin: 0 0 3em 0; + } - #main > header { - text-align: center; - margin: 0 0 3em 0; - } + #main > header h2 { + font-size: 2.75em; + margin: 0; + } - #main > header h2 { - font-size: 2.75em; - margin: 0; - } + #main > header p { + border-top: solid 2px #e5e5e5; + color: #777; + display: inline-block; + font-style: normal; + margin: 1em 0 0 0; + padding: 1em 0 1.25em 0; + } - #main > header p { - border-top: solid 2px #e5e5e5; - color: #777; - display: inline-block; - font-style: normal; - margin: 1em 0 0 0; - padding: 1em 0 1.25em 0; - } - - body.landing #main { - margin-top: -14em; - } +body.landing #main { + margin-top: -14em; +} /* Footer */ - #footer { - background: #f0f0f0; - padding: 4em 0 6em 0; - text-align: center; - } +#footer { + background: #f0f0f0; + padding: 4em 0 6em 0; + text-align: center; +} - #footer .icons a { - transition: opacity 0.2s ease-in-out; - opacity: 0.35; - } + #footer .icons a { + transition: opacity 0.2s ease-in-out; + opacity: 0.35; + } - #footer .icons a:hover { - opacity: 0.75; - } + #footer .icons a:hover { + opacity: 0.75; + } - #footer .copyright { - color: #999; - font-size: 0.9em; - line-height: 1em; - margin: 2em 0 0 0; - padding: 0; - text-align: center; - } + #footer .copyright { + color: #999; + font-size: 0.9em; + line-height: 1em; + margin: 2em 0 0 0; + padding: 0; + text-align: center; + } - #footer .copyright a { - color: inherit; - } + #footer .copyright a { + color: inherit; + } - #footer .copyright li { - border-left: solid 1px #dddddd; - display: inline-block; - list-style: none; - margin-left: 1em; - padding-left: 1em; - } + #footer .copyright li { + border-left: solid 1px #dddddd; + display: inline-block; + list-style: none; + margin-left: 1em; + padding-left: 1em; + } - #footer .copyright li:first-child { - border-left: 0; - margin-left: 0; - padding-left: 0; - } + #footer .copyright li:first-child { + border-left: 0; + margin-left: 0; + padding-left: 0; + } /* CTA */ +#cta { + background: #e89980; + color: #f9e5df; + padding: 3.5em 0 4em 0; + text-align: center; +} - #cta { - background: #e89980; - color: #f9e5df; - padding: 3.5em 0 4em 0; - text-align: center; - } + #cta h2, #cta h3, #cta h4, #cta h5, #cta h6 { + color: inherit; + } - #cta h2, #cta h3, #cta h4, #cta h5, #cta h6 { - color: inherit; - } + #cta form { + margin: 0 auto; + max-width: 100%; + width: 25em; + } - #cta form { - margin: 0 auto; - max-width: 100%; - width: 25em; - } + #cta input[type="submit"], + #cta input[type="reset"], + #cta input[type="button"], + #cta .button { + box-shadow: none; + background: #fff; + color: #e89980; + } - #cta input[type="submit"], - #cta input[type="reset"], - #cta input[type="button"], - #cta .button { - box-shadow: none; - background: #fff; - color: #e89980; - } + #cta input[type="text"], + #cta input[type="password"], + #cta input[type="email"], + #cta select, + #cta textarea { + color: #ffffff; + background: rgba(255, 255, 255, 0.15); + border: 0; + } - #cta input[type="text"], - #cta input[type="password"], - #cta input[type="email"], - #cta select, - #cta textarea { - color: #ffffff; - background: rgba(255, 255, 255, 0.15); - border: 0; - } + #cta input[type="text"]:focus, + #cta input[type="password"]:focus, + #cta input[type="email"]:focus, + #cta select:focus, + #cta textarea:focus { + box-shadow: inset 0 0 0 2px #fff; + } - #cta input[type="text"]:focus, - #cta input[type="password"]:focus, - #cta input[type="email"]:focus, - #cta select:focus, - #cta textarea:focus { - box-shadow: inset 0 0 0 2px #fff; - } + #cta ::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.75) !important; + } - #cta ::-webkit-input-placeholder { - color: rgba(255, 255, 255, 0.75) !important; - } + #cta :-moz-placeholder { + color: rgba(255, 255, 255, 0.75) !important; + } - #cta :-moz-placeholder { - color: rgba(255, 255, 255, 0.75) !important; - } + #cta ::-moz-placeholder { + color: rgba(255, 255, 255, 0.75) !important; + } - #cta ::-moz-placeholder { - color: rgba(255, 255, 255, 0.75) !important; - } + #cta :-ms-input-placeholder { + color: rgba(255, 255, 255, 0.75) !important; + } - #cta :-ms-input-placeholder { - color: rgba(255, 255, 255, 0.75) !important; - } - - #cta .formerize-placeholder { - color: rgba(255, 255, 255, 0.75) !important; - } + #cta .formerize-placeholder { + color: rgba(255, 255, 255, 0.75) !important; + } /* Wide */ +@media screen and (max-width: 1680px) { - @media screen and (max-width: 1680px) { + /* Basic */ + body, input, select, textarea { + font-size: 13pt; + } - /* Basic */ - - body, input, select, textarea { - font-size: 13pt; - } - - /* Banner */ - - #banner { - padding: 10em 0 18em 0; - } - - } + /* Banner */ + #banner { + padding: 10em 0 18em 0; + } +} /* Normal */ +@media screen and (max-width: 1280px) { - @media screen and (max-width: 1280px) { + /* Basic */ + body, input, select, textarea { + font-size: 11pt; + } - /* Basic */ + /* Header */ + .dropotron.level-0 { + font-size: 1em; + } - body, input, select, textarea { - font-size: 11pt; - } + /* Banner */ + #banner { + background-attachment: scroll; + } - /* Header */ - - .dropotron.level-0 { - font-size: 1em; - } - - /* Banner */ - - #banner { - background-attachment: scroll; - } - - #banner h2 { - font-size: 3.5em; - } - - } + #banner h2 { + font-size: 3.5em; + } +} /* Narrow */ +@media screen and (max-width: 980px) { - @media screen and (max-width: 980px) { - - /* Basic */ - - body, input, select, textarea { - font-size: 11pt; - } - - } + /* Basic */ + body, input, select, textarea { + font-size: 11pt; + } +} /* Narrower */ +#navPanel, #navButton { + display: none; +} - #navPanel, #navButton { - display: none; - } +@media screen and (max-width: 840px) { - @media screen and (max-width: 840px) { + /* Basic */ + html, body { + overflow-x: hidden; + } - /* Basic */ + body, input, select, textarea { + font-size: 11pt; + } - html, body { - overflow-x: hidden; - } + h2 br, h3 br, h4 br, h5 br, h6 br { + display: none; + } - body, input, select, textarea { - font-size: 11pt; - } + /* Section/Article */ + header br { + display: none; + } - h2 br, h3 br, h4 br, h5 br, h6 br { - display: none; - } + header.major { + padding: 0 4em; + } - /* Section/Article */ + /* Box */ + .box { + padding: 3em 2em; + } - header br { - display: none; - } + .box.features > section { + padding: 3em 2em; + } - header.major { - padding: 0 4em; - } + .box .image.featured { + margin-left: -2em; + width: calc(100% + 4em); + } - /* Box */ + .box .image.featured:first-child { + margin-bottom: 3em; + margin-top: -3em; + } - .box { - padding: 3em 2em; - } + .box .image.featured:last-child { + margin-bottom: -3em; + margin-top: 3em; + } - .box.features > section { - padding: 3em 2em; - } + /* Header */ + #page-wrapper { + padding-top: 0; + } - .box .image.featured { - margin-left: -2em; - width: calc(100% + 4em); - } + #header { + display: none; + } - .box .image.featured:first-child { - margin-bottom: 3em; - margin-top: -3em; - } + /* Banner */ - .box .image.featured:last-child { - margin-bottom: -3em; - margin-top: 3em; - } + /* Off-Canvas Navigation */ + #page-wrapper { + backface-visibility: hidden; + transition: transform 0.5s ease; + padding-bottom: 1px; + } - /* Header */ + #navButton { + backface-visibility: hidden; + transition: transform 0.5s ease; + display: block; + height: 44px; + left: 0; + position: fixed; + top: 0; + width: 100%; + z-index: 10001; + } - #page-wrapper { - padding-top: 0; - } + #navButton .toggle { + text-decoration: none; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + border: 0; + outline: 0; + } - #header { - display: none; - } + #navButton .toggle:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: FontAwesome; + font-style: normal; + font-weight: normal; + text-transform: none !important; + } - /* Banner */ + #navButton .toggle:before { + background: rgba(192, 192, 192, 0.75); + border-radius: 6px; + color: #fff; + content: '\f0c9'; + display: block; + font-size: 16px; + height: 2.25em; + left: 0.5em; + line-height: 2.25em; + position: absolute; + text-align: center; + top: 0.5em; + width: 3.5em; + } - /* Off-Canvas Navigation */ + #navPanel { + backface-visibility: hidden; + transform: translateX(-275px); + transition: transform 0.5s ease; + display: block; + height: 100%; + left: 0; + overflow-y: auto; + position: fixed; + top: 0; + width: 275px; + z-index: 10002; + background: #2b2b2b; + color: #bbb; + } - #page-wrapper { - backface-visibility: hidden; - transition: transform 0.5s ease; - padding-bottom: 1px; - } + #navPanel .link { + border-bottom: 0; + border-top: solid 1px rgba(255, 255, 255, 0.05); + color: #bbb; + display: block; + height: 44px; + line-height: 44px; + padding: 0 1em 0 1em; + text-decoration: none; + } - #navButton { - backface-visibility: hidden; - transition: transform 0.5s ease; - display: block; - height: 44px; - left: 0; - position: fixed; - top: 0; - width: 100%; - z-index: 10001; - } + #navPanel .link:first-child { + border-top: 0; + } - #navButton .toggle { - text-decoration: none; - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; - border: 0; - outline: 0; - } + #navPanel .link.depth-0 { + color: #fff; + } - #navButton .toggle:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: FontAwesome; - font-style: normal; - font-weight: normal; - text-transform: none !important; - } + #navPanel .link .indent-1 { + display: inline-block; + width: 1em; + } - #navButton .toggle:before { - background: rgba(192, 192, 192, 0.75); - border-radius: 6px; - color: #fff; - content: '\f0c9'; - display: block; - font-size: 16px; - height: 2.25em; - left: 0.5em; - line-height: 2.25em; - position: absolute; - text-align: center; - top: 0.5em; - width: 3.5em; - } + #navPanel .link .indent-2 { + display: inline-block; + width: 2em; + } - #navPanel { - backface-visibility: hidden; - transform: translateX(-275px); - transition: transform 0.5s ease; - display: block; - height: 100%; - left: 0; - overflow-y: auto; - position: fixed; - top: 0; - width: 275px; - z-index: 10002; - background: #2b2b2b; - color: #bbb; - } + #navPanel .link .indent-3 { + display: inline-block; + width: 3em; + } - #navPanel .link { - border-bottom: 0; - border-top: solid 1px rgba(255, 255, 255, 0.05); - color: #bbb; - display: block; - height: 44px; - line-height: 44px; - padding: 0 1em 0 1em; - text-decoration: none; - } + #navPanel .link .indent-4 { + display: inline-block; + width: 4em; + } - #navPanel .link:first-child { - border-top: 0; - } + #navPanel .link .indent-5 { + display: inline-block; + width: 5em; + } - #navPanel .link.depth-0 { - color: #fff; - } + body.navPanel-visible #page-wrapper { + transform: translateX(275px); + } - #navPanel .link .indent-1 { - display: inline-block; - width: 1em; - } + body.navPanel-visible #navButton { + transform: translateX(275px); + } - #navPanel .link .indent-2 { - display: inline-block; - width: 2em; - } - - #navPanel .link .indent-3 { - display: inline-block; - width: 3em; - } - - #navPanel .link .indent-4 { - display: inline-block; - width: 4em; - } - - #navPanel .link .indent-5 { - display: inline-block; - width: 5em; - } - - body.navPanel-visible #page-wrapper { - transform: translateX(275px); - } - - body.navPanel-visible #navButton { - transform: translateX(275px); - } - - body.navPanel-visible #navPanel { - transform: translateX(0); - } - - } + body.navPanel-visible #navPanel { + transform: translateX(0); + } +} /* Mobile */ +@media screen and (max-width: 736px) { - @media screen and (max-width: 736px) { + /* Basic */ + body, input, select, textarea { + font-size: 11pt; + } - /* Basic */ + h2 { + font-size: 1.75em; + line-height: 1.35em; + letter-spacing: -0.025em; + } - body, input, select, textarea { - font-size: 11pt; - } + h3 { + font-size: 1.5em; + } - h2 { - font-size: 1.75em; - line-height: 1.35em; - letter-spacing: -0.025em; - } + h4 { + font-size: 1em; + } - h3 { - font-size: 1.5em; - } + /* Section/Article */ + header.major { + padding: 1em; + } - h4 { - font-size: 1em; - } + header.major h2, header.major p { + padding-left: 0.5em; + padding-right: 0.5em; + } - /* Section/Article */ + /* Box */ + .box { + margin: 1em; + overflow-x: hidden; + padding: 2em 2em !important; + } - header.major { - padding: 1em; - } + .box.features .features-row { + border-top: 0; + padding: 0; + } - header.major h2, header.major p { - padding-left: 0.5em; - padding-right: 0.5em; - } + .box.features .features-row section { + border: 0; + border-top: solid 1px #e5e5e5 !important; + float: none; + margin: 2em 0 0 0 !important; + padding: 2em 0 0 0 !important; + width: 100%; + } - /* Box */ + .box.features .features-row:first-child section:first-child { + border-top: 0 !important; + margin-top: 0 !important; + padding-top: 0 !important; + } - .box { - margin: 1em; - overflow-x: hidden; - padding: 2em 2em !important; - } + .box .image.featured { + margin-left: -2em; + width: calc(100% + 4em); + } - .box.features .features-row { - border-top: 0; - padding: 0; - } + .box .image.featured:first-child { + margin-bottom: 2em; + margin-top: -2em; + } - .box.features .features-row section { - border: 0; - border-top: solid 1px #e5e5e5 !important; - float: none; - margin: 2em 0 0 0 !important; - padding: 2em 0 0 0 !important; - width: 100%; - } + .box .image.featured:last-child { + margin-bottom: -2em; + margin-top: 2em; + } - .box.features .features-row:first-child section:first-child { - border-top: 0 !important; - margin-top: 0 !important; - padding-top: 0 !important; - } + /* Banner */ + #banner { + padding: 4em 0; + } - .box .image.featured { - margin-left: -2em; - width: calc(100% + 4em); - } + #banner h2 { + font-size: 2.25em; + } - .box .image.featured:first-child { - margin-bottom: 2em; - margin-top: -2em; - } + #banner p { + font-size: 1.25em; + } - .box .image.featured:last-child { - margin-bottom: -2em; - margin-top: 2em; - } + /* Main */ + #main { + padding: 4em 0 0 0; + } - /* Banner */ + #main > header { + margin: 0 2em 1.5em 2em; + } - #banner { - padding: 4em 0; - } + #main > header h2 { + font-size: 2em; + } - #banner h2 { - font-size: 2.25em; - } + #main > header p { + font-size: 1em; + padding-bottom: 1em; + } - #banner p { - font-size: 1.25em; - } + body.landing #main { + padding: 0; + margin-top: 0; + } - /* Main */ + /* Footer */ + #footer { + padding: 4em 0; + } - #main { - padding: 4em 0 0 0; - } - - #main > header { - margin: 0 2em 1.5em 2em; - } - - #main > header h2 { - font-size: 2em; - } - - #main > header p { - font-size: 1em; - padding-bottom: 1em; - } - - body.landing #main { - padding: 0; - margin-top: 0; - } - - /* Footer */ - - #footer { - padding: 4em 0; - } - - #footer .copyright li { - border-left: 0; - display: block; - line-height: 2em; - margin-left: 0; - padding-left: 0; - } - - } + #footer .copyright li { + border-left: 0; + display: block; + line-height: 2em; + margin-left: 0; + padding-left: 0; + } +} /* Mobile (Portrait) */ +@media screen and (max-width: 480px) { - @media screen and (max-width: 480px) { + /* Basic */ + html, body { + min-width: 320px; + } - /* Basic */ + body, input, select, textarea { + font-size: 11pt; + } - html, body { - min-width: 320px; - } + /* Section/Article */ + header.major { + padding: 0; + } - body, input, select, textarea { - font-size: 11pt; - } + /* List */ + ul.actions { + margin: 0 0 2em 0; + } - /* Section/Article */ + ul.actions li { + display: block; + padding: 1em 0 0 0; + text-align: center; + width: 100%; + } - header.major { - padding: 0; - } + ul.actions li:first-child { + padding-top: 0; + } - /* List */ + ul.actions li > * { + width: 100%; + margin: 0 !important; + } - ul.actions { - margin: 0 0 2em 0; - } + ul.actions li > *.icon:before { + margin-left: -2em; + } - ul.actions li { - display: block; - padding: 1em 0 0 0; - text-align: center; - width: 100%; - } + ul.actions.small li { + padding: 0.5em 0 0 0; + } - ul.actions li:first-child { - padding-top: 0; - } + ul.actions.small li:first-child { + padding-top: 0; + } - ul.actions li > * { - width: 100%; - margin: 0 !important; - } + /* Box */ + .box { + border-radius: 0; + box-shadow: none; + margin: 1em 0 0 0; + padding: 3em 1em !important; + } - ul.actions li > *.icon:before { - margin-left: -2em; - } + .box.features .features-row section { + margin: 3em 0 0 0 !important; + padding: 3em 0 0 0 !important; + } - ul.actions.small li { - padding: 0.5em 0 0 0; - } + .box .image.featured { + margin-left: -1em; + border-radius: 0; + width: calc(100% + 2em); + } - ul.actions.small li:first-child { - padding-top: 0; - } + .box .image.featured img { + border-radius: 0 !important; + } - /* Box */ + .box .image.featured:first-child { + margin-top: -3em; + margin-bottom: 3em; + } - .box { - border-radius: 0; - box-shadow: none; - margin: 1em 0 0 0; - padding: 3em 1em !important; - } + .box .image.featured:last-child { + margin-top: 3em; + margin-bottom: -3em; + } - .box.features .features-row section { - margin: 3em 0 0 0 !important; - padding: 3em 0 0 0 !important; - } + /* Banner */ + #banner { + padding: 5em 1em 4em; + } - .box .image.featured { - border-radius: 0; - margin-left: -1em; - width: calc(100% + 2em); - } + /* Main */ + #main > .box:first-child { + margin-top: 0; + } - .box .image.featured img { - border-radius: 0 !important; - } - - .box .image.featured:first-child { - margin-bottom: 3em; - margin-top: -3em; - } - - .box .image.featured:last-child { - margin-bottom: -3em; - margin-top: 3em; - } - - /* Banner */ - - #banner { - padding: 5em 1em 4em 1em; - } - - /* Main */ - - #main > .box:first-child { - margin-top: 0; - } - - /* CTA */ - - #cta { - padding: 2.5em 1em 3em 1em; - } - - } + /* CTA */ + #cta { + padding: 2.5em 1em 3em; + } +} diff --git a/static/src/scss/style.scss b/static/src/scss/style.scss index ecb1790..4a7e64f 100644 --- a/static/src/scss/style.scss +++ b/static/src/scss/style.scss @@ -4,9 +4,9 @@ $fa-font-path: "../fonts"; @import "node_modules/bootstrap/scss/bootstrap-grid"; // Import Alpha theme (ish) -@import 'alpha'; +@import "alpha"; .box .box { - border-radius: 0px; + border-radius: 0; }