/* Eric Meyer's Reset CSS v2.0 */
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{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
body,
main {
background: #FFF;
}
body {
font: 18px/1.5em 'Source Sans Pro', 'Helvetica Neue', sans-serif;
color: #333;
height: 100%;
}
main {
padding-top: 100px;
}
a {
color: #1D58B1;
}
a:hover {
color: #2AACFC;
}
b {
font-weight: bold;
}
i {
font-style: italic;
}
p,
li {
line-height: 1.75em;
}
p {
margin-bottom: 25px;
}
small {
font-size: 12px;
}
h1,
h2,
h3,
h4,
h5 {
text-align: center;
}
h1 {
font-family: Lato;
font-weight: 300;
font-size: 40px;
margin-bottom: 50px;
}
h2 {
font-size: 60px;
line-height: 1.25em;
}
h3 {
font-size: 48px;
margin-bottom: 30px;
line-height: 1.5em;
}
h4 {
font-size: 28px;
margin-bottom: 50px;
line-height: 1.25em;
}
h5,
footer h4 {
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: #A1B2C2; /* darker alternative: #698EB0 */
line-height: 1em;
margin: 50px auto;
}
h6 {
font-weight: bold;
text-align: left;
margin: 40px auto 5px;
}
/*
Neat hack! http://css-tricks.com/hash-tag-links-padding/
So when you navigate in-page, the sticky header doesn't cover it up
*/
h2[id]:before,
h3[id]:before,
h4[id]:before,
h5[id]:before,
h6[id]:before {
display: block;
content: " ";
margin-top: -75px;
height: 75px;
visibility: hidden;
}
ul,
ol {
margin: 0 0 0 2em;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
header,
main,
footer {
position: relative;
z-index: 1;
}
header,
.insignia {
background: #FFF;
border-color: #CCC;
border-style: solid;
box-shadow: 0 -4px 20px -3px rgba(0, 0, 0, 0.2);
}
header {
position: fixed;
top: 0;
width: 100%;
border-bottom-width: 1px;
}
section {
padding: 100px 0;
border-bottom: 1px solid #E3E3E3;
}
main h2 {
color: #253C50; /* #365DA3 */ /* #3D3D3D */ /* #9B0000 */
font-weight: 300;
line-height: 1.25em;
margin: 0px 0 50px;
}
main pre {
padding: 10px;
background: #F5F5F5;
}
.text-logo,
header .links a {
display: inline-block;
color: #777;
}
.text-logo {
font-family: Arvo, sans-serif;
letter-spacing: -1px;
color: #1D80AB;
font-size: 24px;
text-decoration: none;
padding: 15px 10px;
}
.text-logo:hover {
color: #66B0E2;
}
header .links a {
font-size: 14px;
padding: 15px 25px;
text-decoration: none;
}
header .links a:hover {
color: #000;
}
header .links a:first-child {
padding-left: 10px;
}
header .links a .fa {
margin-right: 5px;
}
.donate {
background: #D9FFD1;
}
.donate:hover {
background: #A1FF87 !important;
}
code {
font: 75%/1em 'Liberation Mono', 'Consolas', 'Monaco', 'Menlo', 'Courier New', monospace;
color: #000;
padding: 5px;
background: #F5F5F5;
}
h2 code {
font-size: 42px;
background: none;
}
pre > code {
display: block;
line-height: 1.5em;
font-size: 14px;
tab-size: 4;
}
.button,
button,
input[type=button],
button[type=submit] {
display: inline-block;
padding: 10px 25px;
color: #FFF;
border: 0;
text-decoration: none;
background: #366992;
margin: 5px;
transition: background .2s;
border-radius: 50px;
cursor: pointer;
outline: none;
line-height: 1.5em;
font-size: 18px;
}
.button[disabled],
button[disabled],
input[disabled] {
background: #BBB !important;
cursor: default !important;
}
.button:hover,
button:hover,
input[type=button]:hover,
button[type=submit]:hover {
text-decoration: none;
background: #4B91C9;
color: #FFF;
}
.button.red,
button.red {
background: #A01919;
}
.button.red:hover,
button.red:hover {
background: #DD2222;
}
.button.green,
button.green {
background: #419236;
}
.button.green:hover,
button.green:hover {
background: #4DB43F;
}
.button.gray,
button.gray {
background: #666;
}
.button.gray:hover,
button.gray:hover {
background: #999;
}
hr {
border: 0;
border-top: 1px solid #D0D0D0;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 20px;
font-size: 16px;
border-bottom: 1px solid #E0E0E0;
}
th {
font-weight: bold;
text-align: left;
}
table pre code {
font-size: 12px;
}
table pre,
li pre {
margin: 10px 0;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
footer {
z-index: 0;
background: #263A49;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
border-bottom: 0;
padding: 0;
font-weight: 300;
font-size: 15px;
color: #EFEFEF;
line-height: 1.5em;
margin-top: 75px;
}
footer a {
color: #EFEFEF;
text-decoration: underline;
}
/*
footer .footer-top {
padding: 20px;
background: #2C4252;
}
*/
footer .footer-main {
font-family: Lato;
padding: 65px 0;
}
footer .links a {
color: #A1B2C2;
text-decoration: none;
transition: color .2s;
display: block;
font-size: 14px;
font-weight: 300;
line-height: 2em;
}
footer .links a:hover {
color: #ACD7FF;
text-decoration: none;
}
footer h3 {
color: #FFF;
font-size: 22px;
margin: 0;
}
footer h4 {
margin: 0;
}
footer h4 a {
color: #A1B2C2;
text-decoration: underline;
}
footer h5 {
color: #FFF;
text-transform: uppercase;
font-size: 16px;
margin: 0 0 10px 0;
font-weight: normal;
text-align: left;
}
footer hr {
border: 0;
border-top: 1px solid #3E5566;
width: 60%;
min-width: 50px;
margin: 10px 0;
}
.logo {
display: inline-block;
color: #263A49;
font-family: Arvo;
font-size: 90px;
line-height: 1em;
background: #EFEFEF;
border-radius: 100px;
padding: 10px 30px;
}
.stuck {
position: fixed;
top: 0;
width: 100%;
border-top-width: 0;
border-bottom-width: 1px;
}
@media (max-width: 1100px) {
.text-logo {
font-size: 18px;
}
p,
li {
line-height: 1.5em;
}
}
@media (max-width: 970px) {
header .links a {
padding: 15px;
}
header > .grid-container,
header .mobile-grid-50 {
padding: 0;
}
}
@media (max-width: 840px) {
header .links a {
font-size: 12px;
}
}
@media (max-width: 767px) {
/* mobile */
p,
li {
line-height: 1.5em;
}
header,
.sticky-wrapper {
position: static;
margin-bottom: 50px !important;
}
header > .grid-container,
header .mobile-grid-50 {
padding: 0;
}
section {
padding: 50px 0;
}
header .links a {
font-size: 16px;
display: block;
text-align: left;
padding: 15px 10% !important;
}
main {
padding-top: 0;
}
main h2 {
font-size: 40px;
}
main h2 code {
font-size: 30px;
}
td,
th {
font-size: 14px;
padding: 10px;
}
footer h5 {
margin-top: 40px;
}
}