/* ----------------------------------------- 01. General ----------------------------------------- */ /* Basic Typography =================================== */ body { line-height: 1.714285714; font-size: 14px; background-color: $body-bg; color: $text-color; font-family: $primary-font; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { line-height: normal; margin: 0 0 15px 0; -ms-word-wrap: break-word; word-wrap: break-word; font-weight: 600; } h1 { font-size: 28px; } h2 { font-size: 24px; } h3 { font-size: 20px; } h4 { font-size: 18px; } h5 { font-size: 16px; } h6 { font-size: 14px; } p { margin: 0 0 15px 0; } img { display: inline-block; vertical-align: middle; max-width: 100%; height: auto; } a { transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease; outline: none; color: $primary-color; text-decoration: none; &:hover, &:focus { color: lighten($primary-color, 10%); outline: none; text-decoration: none; } &:active { outline: none; } } .group { @include clearfix(); } /* General Element Styling =================================== */ /* Reset figure margin from normalize.css */ figure { margin: 0; } /* Lists */ ul, ol { padding-left: 20px; } ul { list-style: disc; } ol { list-style: decimal; } dl { margin: 0 0 20px; } dt { font-weight: bold; } dd { margin: 0 0 15px; } /* Blockquotes */ blockquote { margin: 20px 0; padding-left: 15px; border-left: 3px solid #ccc; font-size: 17px; font-weight: 300; cite { display: block; @include font-style; font-style: normal; margin: 15px 0 0; } } /* Tables */ table { border-collapse: separate; border-spacing: 0; width: 100%; } .entry-content { table { border-width: 1px 0 0 1px; margin-bottom: 24px; } th:first-child, td:first-child { padding-left: 0; } th, td { border-bottom: 1px solid rgba(0,0,0,0.1); } caption, th, td { font-weight: normal; text-align: left; padding: 5px; vertical-align: middle; } th { border-width: 0 1px 1px 0; font-weight: bold; text-transform: uppercase; font-size: 85%; } td { border-width: 0 1px 1px 0; } } /* Code */ code, kbd, tt, var, samp, pre { font-family: monospace, serif; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; font-style: normal; } pre { padding: 15px; border: 1px solid rgba(0,0,0,0.1); } /* Various */ address { margin: 0 0 15px; } .sr-only, .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* Embeds and iframes =================================== */ embed, iframe, object, video, audio { margin-bottom: 15px; max-width: 100%; } p > embed, p > iframe, p > object, p > audio, span > embed, span > iframe, span > object, span > audio { margin-bottom: 0; } #map, .map * { max-width: none !important; } /* General Form Styling =================================== */ label { @include font-style; display: block; margin: 0 0 5px; font-weight: normal; } input, textarea, select { display: inline-block; font-size: inherit; width: 100%; max-width: 100%; height: 50px; padding: 6px 15px; line-height: normal; border: 1px solid $border-color; background-color: $secondary-bg; background-image: none; border-radius: 0; transition: box-shadow 0.18s ease; box-shadow: inset 2px 2px 0 0 transparent; &:focus { outline: none; box-shadow: inset 2px 2px 0 0 lighten($border-color, 50%); } @media ( max-width: $screen-xs-max ) { width: 100%; } } select { appearance: none; background-clip: padding-box; background-size: 9px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"); background-position: right .75rem center; background-repeat: no-repeat; max-width: 100%; // Unstyle the caret on `