wp-normalize.sass

// *Normalizing styles have been helped along thanks to the fine work of
// *Nicolas Gallagher and Jonathan Neal http://necolas.github.io/normalize.css/
// --------------------------------------------------------------
// > TABLE OF CONTENTS:
// --------------------------------------------------------------
// Normalize
// Typography
// Elements
// Forms
// Navigation
// ## Links
// ## Menus
// Accessibility
// Alignments
// Clearings
// Widgets
// Content
// ## Posts and pages
// ## Comments
// Infinite scroll
// Media
// ## Captions
// ## Galleries
// --------------------------------------------------------------

// Normalize

html
    font-family: sans-serif
    -webkit-text-size-adjust: 100%
    -ms-text-size-adjust: 100%

body
    margin: 0

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary
    display: block

audio, canvas, progress, video
    display: inline-block
    vertical-align: baseline

audio:not([controls])
    display: none
    height: 0

[hidden], template
    display: none

a
    background-color: transparent
    &:active, &:hover
        outline: 0

abbr[title]
    border-bottom: 1px dotted

b, strong
    font-weight: bold

dfn
    font-style: italic

h1
    font-size: 2em
    margin: 0.67em 0

mark
    background: #ff0
    color: #000

small
    font-size: 80%

sub
    font-size: 75%
    line-height: 0
    position: relative
    vertical-align: baseline

sup
    font-size: 75%
    line-height: 0
    position: relative
    vertical-align: baseline
    top: -0.5em

sub
    bottom: -0.25em

img
    border: 0

svg:not(:root)
    overflow: hidden

figure
    margin: 1em 40px

hr
    box-sizing: content-box
    height: 0

pre
    overflow: auto

code, kbd, pre, samp
    font-family: monospace, monospace
    font-size: 1em

button, input, optgroup, select, textarea
    color: inherit
    font: inherit
    margin: 0

button
    overflow: visible
    text-transform: none

select
    text-transform: none

button, html input[type="button"]
    -webkit-appearance: button
    cursor: pointer

input
    &[type="reset"], &[type="submit"]
        -webkit-appearance: button
        cursor: pointer

button[disabled], html input[disabled]
    cursor: default

button::-moz-focus-inner
    border: 0
    padding: 0

input
    &::-moz-focus-inner
        border: 0
        padding: 0
    line-height: normal
    &[type="checkbox"], &[type="radio"]
        box-sizing: border-box
        padding: 0
    &[type="number"]
        &::-webkit-inner-spin-button, &::-webkit-outer-spin-button
            height: auto
    &[type="search"]
        &::-webkit-search-cancel-button, &::-webkit-search-decoration
            -webkit-appearance: none

fieldset
    border: 1px solid #c0c0c0
    margin: 0 2px
    padding: 0.35em 0.625em 0.75em

legend
    border: 0
    padding: 0

textarea
    overflow: auto

optgroup
    font-weight: bold

table
    border-collapse: collapse
    border-spacing: 0

td, th
    padding: 0

// Typography

body, button, input, select, textarea
    color: #404040
    font-family: sans-serif
    font-size: 16px
    font-size: 1rem
    line-height: 1.5

h1, h2, h3, h4, h5, h6
    clear: both

p
    margin-bottom: 1.5em

dfn, cite, em, i
    font-style: italic

blockquote
    margin: 0 1.5em

address
    margin: 0 0 1.5em

pre
    background: #eee
    font-family: "Courier 10 Pitch", Courier, monospace
    font-size: 15px
    font-size: 0.9375rem
    line-height: 1.6
    margin-bottom: 1.6em
    max-width: 100%
    overflow: auto
    padding: 1.6em

code, kbd, tt, var
    font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace
    font-size: 15px
    font-size: 0.9375rem

abbr, acronym
    border-bottom: 1px dotted #666
    cursor: help

mark, ins
    background: #fff9c0
    text-decoration: none

big
    font-size: 125%

// Elements

html
    box-sizing: border-box

*
    // Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
    box-sizing: inherit
    &:before, &:after
        // Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
        box-sizing: inherit

body
    background: #fff
    // Fallback for when there is no custom background color defined.

blockquote
    &:before, &:after
        content: ""

q
    &:before, &:after
        content: ""

blockquote, q
    quotes: "" ""

hr
    background-color: #ccc
    border: 0
    height: 1px
    margin-bottom: 1.5em

ul, ol
    margin: 0 0 1.5em 3em

ul
    list-style: disc

ol
    list-style: decimal

li >
    ul, ol
        margin-bottom: 0
        margin-left: 1.5em

dt
    font-weight: bold

dd
    margin: 0 1.5em 1.5em

img
    height: auto
    // Make sure images are scaled correctly.
    max-width: 100%
    // Adhere to container width.

figure
    margin: 1em 0
    // Extra wide images within figure tags don't overflow the content area.

table
    margin: 0 0 1.5em
    width: 100%

// Forms

button
    border: 1px solid
    border-color: #ccc #ccc #bbb
    border-radius: 3px
    background: #e6e6e6
    color: rgba(0, 0, 0, 0.8)
    font-size: 12px
    font-size: 0.75rem
    line-height: 1
    padding: .6em 1em .4em

input
    &[type="button"], &[type="reset"], &[type="submit"]
        border: 1px solid
        border-color: #ccc #ccc #bbb
        border-radius: 3px
        background: #e6e6e6
        color: rgba(0, 0, 0, 0.8)
        font-size: 12px
        font-size: 0.75rem
        line-height: 1
        padding: .6em 1em .4em

button:hover
    border-color: #ccc #bbb #aaa

input
    &[type="button"]:hover, &[type="reset"]:hover, &[type="submit"]:hover
        border-color: #ccc #bbb #aaa

button:focus
    border-color: #aaa #bbb #bbb

input
    &[type="button"]:focus, &[type="reset"]:focus, &[type="submit"]:focus
        border-color: #aaa #bbb #bbb

button:active
    border-color: #aaa #bbb #bbb

input
    &[type="button"]:active, &[type="reset"]:active, &[type="submit"]:active
        border-color: #aaa #bbb #bbb
    &[type="text"], &[type="email"], &[type="url"], &[type="password"], &[type="search"], &[type="number"], &[type="tel"], &[type="range"], &[type="date"], &[type="month"], &[type="week"], &[type="time"], &[type="datetime"], &[type="datetime-local"], &[type="color"]
        color: #666
        border: 1px solid #ccc
        border-radius: 3px
        padding: 3px

textarea
    color: #666
    border: 1px solid #ccc
    border-radius: 3px
    padding: 3px

select
    border: 1px solid #ccc

input
    &[type="text"]:focus, &[type="email"]:focus, &[type="url"]:focus, &[type="password"]:focus, &[type="search"]:focus, &[type="number"]:focus, &[type="tel"]:focus, &[type="range"]:focus, &[type="date"]:focus, &[type="month"]:focus, &[type="week"]:focus, &[type="time"]:focus, &[type="datetime"]:focus, &[type="datetime-local"]:focus, &[type="color"]:focus
        color: #111

textarea
    &:focus
        color: #111
    width: 100%

// Navigation
// Links
a
    color: royalblue
    &:visited
        color: purple
    &:hover, &:focus, &:active
        color: midnightblue
    &:focus
        outline: thin dotted
    &:hover, &:active
        outline: 0

// Menus
.main-navigation
    clear: both
    display: block
    float: left
    width: 100%
    ul
        display: none
        list-style: none
        margin: 0
        padding-left: 0
    li
        float: left
        position: relative
    a
        display: block
        text-decoration: none
    ul ul
        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2)
        float: left
        position: absolute
        top: 1.5em
        left: -999em
        z-index: 99999
        ul
            left: -999em
            top: 0
        a
            width: 200px
        li
    li
        &:hover > a, &.focus > a
    ul
        ul
            \:hover > a, .focus > a
            a
                &:hover, &.focus
        li
            &:hover > ul, &.focus > ul
                left: auto
        ul li
            &:hover > ul, &.focus > ul
                left: 100%
    .current_page_item > a, .current-menu-item > a, .current_page_ancestor > a, .current-menu-ancestor > a

// Small menu.
.menu-toggle, .main-navigation.toggled ul
    display: block

@media screen and (min-width: 37.5em)
    .menu-toggle
        display: none
    .main-navigation ul
        display: block

.site-main
    .comment-navigation, .posts-navigation, .post-navigation
        margin: 0 0 1.5em
        overflow: hidden

.comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous
    float: left
    width: 50%

.comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next
    float: right
    text-align: right
    width: 50%

// Accessibility
// Text meant only for screen readers.
.screen-reader-text
    clip: rect(1px, 1px, 1px, 1px)
    position: absolute !important
    height: 1px
    width: 1px
    overflow: hidden
    word-wrap: normal !important
    // Many screen reader and browser combinations announce broken words as they would appear visually.
    &:focus
        background-color: #f1f1f1
        border-radius: 3px
        box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6)
        clip: auto !important
        color: #21759b
        display: block
        font-size: 14px
        font-size: 0.875rem
        font-weight: bold
        height: auto
        left: 5px
        line-height: normal
        padding: 15px 23px 14px
        text-decoration: none
        top: 5px
        width: auto
        z-index: 100000
        // Above WP toolbar.

// Do not show the outline on the skip link target.

#content[tabindex="-1"]:focus
    outline: 0

// Alignments

.alignleft
    display: inline
    float: left
    margin-right: 1.5em

.alignright
    display: inline
    float: right
    margin-left: 1.5em

.aligncenter
    clear: both
    display: block
    margin-left: auto
    margin-right: auto

// Clearings

.clear
    &:before, &:after
        content: ""
        display: table
        table-layout: fixed

.entry-content
    &:before, &:after
        content: ""
        display: table
        table-layout: fixed

.comment-content
    &:before, &:after
        content: ""
        display: table
        table-layout: fixed

.site-header
    &:before, &:after
        content: ""
        display: table
        table-layout: fixed

.site-content
    &:before, &:after
        content: ""
        display: table
        table-layout: fixed

.site-footer
    &:before, &:after
        content: ""
        display: table
        table-layout: fixed

.clear:after, .entry-content:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after
    clear: both

// Widgets

.widget
    margin: 0 0 1.5em
    select
        max-width: 100%

// Make sure select elements fit in widgets.

// Content
// Posts and pages

.sticky
    display: block

.hentry
    margin: 0 0 1.5em

.byline, .updated:not(.published)
    display: none

.single .byline, .group-blog .byline
    display: inline

.page-content, .entry-content, .entry-summary
    margin: 1.5em 0 0

.page-links
    clear: both
    margin: 0 0 1.5em


// Comments

.comment-content a
    word-wrap: break-word

.bypostauthor
    display: block

// Infinite scroll
// Globally hidden elements when Infinite Scroll is supported and in use.

.infinite-scroll
    .posts-navigation, &.neverending .site-footer
        // Theme Footer (when set to scrolling)
        display: none

// When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before.

.infinity-end.neverending .site-footer
    display: block

// Media

.page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley
    border: none
    margin-bottom: 0
    margin-top: 0
    padding: 0

// Make sure embeds and iframes fit their containers.

embed, iframe, object
    max-width: 100%

// Captions

.wp-caption
    margin-bottom: 1.5em
    max-width: 100%
    img[class*="wp-image-"]
        display: block
        margin-left: auto
        margin-right: auto
    .wp-caption-text
        margin: 0.8075em 0

.wp-caption-text
    text-align: center

// Galleries

.gallery
    margin-bottom: 1.5em

.gallery-item
    display: inline-block
    text-align: center
    vertical-align: top
    width: 100%

.gallery-columns-2 .gallery-item
    max-width: 50%

.gallery-columns-3 .gallery-item
    max-width: 33.33%

.gallery-columns-4 .gallery-item
    max-width: 25%

.gallery-columns-5 .gallery-item
    max-width: 20%

.gallery-columns-6 .gallery-item
    max-width: 16.66%

.gallery-columns-7 .gallery-item
    max-width: 14.28%

.gallery-columns-8 .gallery-item
    max-width: 12.5%

.gallery-columns-9 .gallery-item
    max-width: 11.11%

.gallery-caption
    display: block