Chris@2: // =============================================================================
Chris@2: // Normalize.scss settings
Chris@2: // =============================================================================
Chris@2: 
Chris@2: // Set to false if you want to drop support for IE6 and IE7
Chris@2: // Notice: setting to false might render some elements
Chris@2: // slightly differently than when set to true
Chris@2: 
Chris@2: $support-for-ie6-and-ie7: false;
Chris@2: 
Chris@2: // =============================================================================
Chris@2: // HTML5 display definitions
Chris@2: // =============================================================================
Chris@2: 
Chris@2: // Corrects block display not defined in IE6/7/8/9 & FF3
Chris@2: 
Chris@2: article,
Chris@2: aside,
Chris@2: details,
Chris@2: figcaption,
Chris@2: figure,
Chris@2: footer,
Chris@2: header,
Chris@2: hgroup,
Chris@2: nav,
Chris@2: section,
Chris@2: summary {
Chris@2:     display: block;
Chris@2: }
Chris@2: 
Chris@2: // Corrects inline-block display not defined in IE6/7/8/9 & FF3
Chris@2: 
Chris@2: audio,
Chris@2: canvas,
Chris@2: video {
Chris@2:     display: inline-block;
Chris@2:     @if $support-for-ie6-and-ie7 {
Chris@2:         *display: inline;
Chris@2:         *zoom: 1;
Chris@2:     }
Chris@2: }
Chris@2: 
Chris@2: // 1. Prevents modern browsers from displaying 'audio' without controls
Chris@2: // 2. Remove excess height in iOS5 devices
Chris@2: 
Chris@2: audio:not([controls]) {
Chris@2:     display: none; // 1
Chris@2:     height: 0; // 2
Chris@2: }
Chris@2: 
Chris@2: // Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
Chris@2: // Known issue: no IE6 support
Chris@2: 
Chris@2: [hidden] {
Chris@2:     display: none;
Chris@2: }
Chris@2: 
Chris@2: // =============================================================================
Chris@2: // Base
Chris@2: // =============================================================================
Chris@2: 
Chris@2: // 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
Chris@2: //    http://clagnut.com/blog/348/#c790
Chris@2: // 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
Chris@2: //    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
Chris@2: 
Chris@2: html {
Chris@2:     @if $support-for-ie6-and-ie7 {
Chris@2:         font-size: 100%; // 1
Chris@2:     }
Chris@2:     -webkit-text-size-adjust: 100%; // 2
Chris@2:     -ms-text-size-adjust: 100%; // 2
Chris@2: }
Chris@2: 
Chris@2: // Addresses font-family inconsistency between 'textarea' and other form elements.
Chris@2: 
Chris@2: html,
Chris@2: button,
Chris@2: input,
Chris@2: select,
Chris@2: textarea {
Chris@2:     font-family: sans-serif;
Chris@2: }
Chris@2: 
Chris@2: // Addresses margins handled incorrectly in IE6/7
Chris@2: 
Chris@2: body {
Chris@2:     margin: 0;
Chris@2: }
Chris@2: 
Chris@2: // =============================================================================
Chris@2: // Typography
Chris@2: // =============================================================================
Chris@2: 
Chris@2: // Addresses font sizes and margins set differently in IE6/7
Chris@2: // Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5
Chris@2: 
Chris@2: h1 {
Chris@2:     font-size: 2em;
Chris@2:     margin: 0.67em 0;
Chris@2: }
Chris@2: 
Chris@2: #header h1 {
Chris@2:    margin: 0 0;
Chris@2: }
Chris@2: 
Chris@2: h2 {
Chris@2:     font-size: 1.5em;
Chris@2:     margin: 0.83em 0;
Chris@2: }
Chris@2: 
Chris@2: h3 {
Chris@2:     font-size: 1.17em;
Chris@2:     margin: 1em 0;
Chris@2: }
Chris@2: 
Chris@2: h4 {
Chris@2:     font-size: 1em;
Chris@2:     margin: 1.33em 0;
Chris@2: }
Chris@2: 
Chris@2: h5 {
Chris@2:     font-size: 0.83em;
Chris@2:     margin: 1.67em 0;
Chris@2: }
Chris@2: 
Chris@2: h6 {
Chris@2:     font-size: 0.75em;
Chris@2:     margin: 2.33em 0;
Chris@2: }
Chris@2: 
Chris@2: // Addresses styling not present in IE7/8/9, S5, Chrome
Chris@2: 
Chris@2: abbr[title] {
Chris@2:     border-bottom: 1px dotted;
Chris@2: }
Chris@2: 
Chris@2: // Addresses style set to 'bolder' in FF3+, S4/5, Chrome
Chris@2: 
Chris@2: b,
Chris@2: strong {
Chris@2:     font-weight: bold;
Chris@2: }
Chris@2: 
Chris@2: @if $support-for-ie6-and-ie7 {
Chris@2:     blockquote {
Chris@2:         margin: 1em 40px;
Chris@2:     }
Chris@2: }
Chris@2: 
Chris@2: // Addresses styling not present in S5, Chrome
Chris@2: 
Chris@2: dfn {
Chris@2:     font-style: italic;
Chris@2: }
Chris@2: 
Chris@2: // Addresses styling not present in IE6/7/8/9
Chris@2: 
Chris@2: mark {
Chris@2:     background: #ff0;
Chris@2:     color: #000;
Chris@2: }
Chris@2: 
Chris@2: // Addresses margins set differently in IE6/7
Chris@2: @if $support-for-ie6-and-ie7 {
Chris@2:     p,
Chris@2:     pre {
Chris@2:         margin: 1em 0;
Chris@2:     }
Chris@2: }
Chris@2: 
Chris@2: // Corrects font family set oddly in IE6, S4/5, Chrome
Chris@2: // en.wikipedia.org/wiki/User:Davidgothberg/Test59
Chris@2: 
Chris@2: pre,
Chris@2: code,
Chris@2: kbd,
Chris@2: samp {
Chris@2:     font-family: monospace, serif;
Chris@2:     @if $support-for-ie6-and-ie7 {
Chris@2:         _font-family: 'courier new', monospace;
Chris@2:     }
Chris@2:     font-size: 1em;
Chris@2: }
Chris@2: 
Chris@2: // Improves readability of pre-formatted text in all browsers
Chris@2: 
Chris@2: pre {
Chris@2:     white-space: pre;
Chris@2:     white-space: pre-wrap;
Chris@2:     word-wrap: break-word;
Chris@2: }
Chris@2: 
Chris@2: // 1. Addresses CSS quotes not supported in IE6/7
Chris@2: // 2. Addresses quote property not supported in S4
Chris@2: 
Chris@2: // 1
Chris@2: @if $support-for-ie6-and-ie7 {
Chris@2:     q {
Chris@2:         quotes: none;
Chris@2:     }
Chris@2: }
Chris@2: 
Chris@2: // 2
Chris@2: 
Chris@2: q:before,
Chris@2: q:after {
Chris@2:     content: '';
Chris@2:     content: none;
Chris@2: }
Chris@2: 
Chris@2: small {
Chris@2:     font-size: 75%;
Chris@2: }
Chris@2: 
Chris@2: // Prevents sub and sup affecting line-height in all browsers
Chris@2: // gist.github.com/413930
Chris@2: 
Chris@2: sub,
Chris@2: sup {
Chris@2:     font-size: 75%;
Chris@2:     line-height: 0;
Chris@2:     position: relative;
Chris@2:     vertical-align: baseline;
Chris@2: }
Chris@2: 
Chris@2: sup {
Chris@2:     top: -0.5em;
Chris@2: }
Chris@2: 
Chris@2: sub {
Chris@2:     bottom: -0.25em;
Chris@2: }
Chris@2: 
Chris@2: // =============================================================================
Chris@2: // Lists
Chris@2: // =============================================================================
Chris@2: 
Chris@2: // Addresses margins set differently in IE6/7
Chris@2: @if $support-for-ie6-and-ie7 {
Chris@2:     dl,
Chris@2:     menu,
Chris@2:     ol,
Chris@2:     ul {
Chris@2:         margin: 0;
Chris@2:         padding: 0;
Chris@2:     }
Chris@2: }
Chris@2: 
Chris@2: @if $support-for-ie6-and-ie7 {
Chris@2:     dd {
Chris@2:         margin: 0 0 0 40px;
Chris@2:     }
Chris@2: }
Chris@2: 
Chris@2: // Addresses paddings set differently in IE6/7
Chris@2: @if $support-for-ie6-and-ie7 {
Chris@2:     menu,
Chris@2:     ol,
Chris@2:     ul {
Chris@2:         padding: 0 0 0 40px;
Chris@2:     }
Chris@2: }
Chris@2: 
Chris@2: // Corrects list images handled incorrectly in IE7
Chris@2: 
Chris@2: nav {
Chris@2:     ul,
Chris@2:     ol {
Chris@2:         list-style: none;
Chris@2:         padding: 0;
Chris@2:         @if $support-for-ie6-and-ie7 {
Chris@2:             list-style-image: none;
Chris@2:         }
Chris@2:     }
Chris@2: }
Chris@2: 
Chris@2: // =============================================================================
Chris@2: // Embedded content
Chris@2: // =============================================================================
Chris@2: 
Chris@2: // 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
Chris@2: // 2. Improves image quality when scaled in IE7
Chris@2: //    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
Chris@2: 
Chris@2: img {
Chris@2:     border: 0; // 1
Chris@2:     @if $support-for-ie6-and-ie7 {
Chris@2:         -ms-interpolation-mode: bicubic; // 2
Chris@2:     }
Chris@2: }
Chris@2: 
Chris@2: // Corrects overflow displayed oddly in IE9
Chris@2: 
Chris@2: svg:not(:root) {
Chris@2:     overflow: hidden;
Chris@2: }
Chris@2: 
Chris@2: // =============================================================================
Chris@2: // Figures
Chris@2: // =============================================================================
Chris@2: 
Chris@2: // Addresses margin not present in IE6/7/8/9, S5, O11
Chris@2: 
Chris@2: figure {
Chris@2:     margin: 0;
Chris@2: }
Chris@2: 
Chris@2: // =============================================================================
Chris@2: // Forms
Chris@2: // =============================================================================
Chris@2: 
Chris@2: // Corrects margin displayed oddly in IE6/7
Chris@2: @if $support-for-ie6-and-ie7 {
Chris@2:     form {
Chris@2:         margin: 0;
Chris@2:     }
Chris@2: }
Chris@2: 
Chris@2: // Define consistent border, margin, and padding
Chris@2: 
Chris@2: fieldset {
Chris@2:     border: 1px solid #c0c0c0;
Chris@2:     margin: 0 2px;
Chris@2:     padding: 0.35em 0.625em 0.75em;
Chris@2: }
Chris@2: 
Chris@2: // 1. Corrects color not being inherited in IE6/7/8/9
Chris@2: // 2. Corrects text not wrapping in FF3
Chris@2: // 3. Corrects alignment displayed oddly in IE6/7
Chris@2: 
Chris@2: legend {
Chris@2:     border: 0; // 1
Chris@2:     padding: 0;
Chris@2:     white-space: normal; // 2
Chris@2:     @if $support-for-ie6-and-ie7 {
Chris@2:         *margin-left: -7px; // 3
Chris@2:     }
Chris@2: }
Chris@2: 
Chris@2: // 1. Corrects font size not being inherited in all browsers
Chris@2: // 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
Chris@2: // 3. Improves appearance and consistency in all browsers
Chris@2: 
Chris@2: button,
Chris@2: input,
Chris@2: select,
Chris@2: textarea {
Chris@2:     font-size: 100%; // 1
Chris@2:     margin: 0; // 2
Chris@2:     vertical-align: baseline; // 3
Chris@2:     @if $support-for-ie6-and-ie7 {
Chris@2:         *vertical-align: middle; // 3
Chris@2:     }
Chris@2: }
Chris@2: 
Chris@2: // Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
Chris@2: 
Chris@2: button,
Chris@2: input {
Chris@2:     line-height: normal; // 1
Chris@2: }
Chris@2: 
Chris@2: // 1. Improves usability and consistency of cursor style between image-type 'input' and others
Chris@2: // 2. Corrects inability to style clickable 'input' types in iOS
Chris@2: // 3. Removes inner spacing in IE7 without affecting normal text inputs
Chris@2: //    Known issue: inner spacing remains in IE6
Chris@2: 
Chris@2: button,
Chris@2: input[type="button"],
Chris@2: input[type="reset"],
Chris@2: input[type="submit"] {
Chris@2:     cursor: pointer; // 1
Chris@2:     -webkit-appearance: button; // 2
Chris@2:     @if $support-for-ie6-and-ie7 {
Chris@2:         *overflow: visible;  // 3
Chris@2:     }
Chris@2: }
Chris@2: 
Chris@2: // Re-set default cursor for disabled elements
Chris@2: 
Chris@2: button[disabled],
Chris@2: input[disabled] {
Chris@2:     cursor: default;
Chris@2: }
Chris@2: 
Chris@2: // 1. Addresses box sizing set to content-box in IE8/9
Chris@2: // 2. Removes excess padding in IE8/9
Chris@2: // 3. Removes excess padding in IE7
Chris@2: //    Known issue: excess padding remains in IE6
Chris@2: 
Chris@2: input[type="checkbox"],
Chris@2: input[type="radio"] {
Chris@2:     box-sizing: border-box; // 1
Chris@2:     padding: 0; // 2
Chris@2:     @if $support-for-ie6-and-ie7 {
Chris@2:         *height: 13px; // 3
Chris@2:         *width: 13px; // 3
Chris@2:     }
Chris@2: }
Chris@2: 
Chris@2: // 1. Addresses appearance set to searchfield in S5, Chrome
Chris@2: // 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
Chris@2: // 3. Removes inner padding and search cancel button in S5, Chrome on OS X
Chris@2: 
Chris@2: input[type="search"] {
Chris@2:     -webkit-appearance: textfield; // 1
Chris@2:     -moz-box-sizing: content-box;
Chris@2:     -webkit-box-sizing: content-box; // 2
Chris@2:     box-sizing: content-box;
Chris@2:     &::-webkit-search-decoration, &::-webkit-search-cancel-button { // 3
Chris@2:         -webkit-appearance: none;
Chris@2:     }
Chris@2: }
Chris@2: 
Chris@2: // Removes inner padding and border in FF3+
Chris@2: // www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
Chris@2: 
Chris@2: button, input {
Chris@2:     &::-moz-focus-inner {
Chris@2:         border: 0;
Chris@2:         padding: 0;
Chris@2:     }
Chris@2: }
Chris@2: 
Chris@2: // 1. Removes default vertical scrollbar in IE6/7/8/9
Chris@2: // 2. Improves readability and alignment in all browsers
Chris@2: 
Chris@2: textarea {
Chris@2:     overflow: auto; // 1
Chris@2:     vertical-align: top; // 2
Chris@2: }
Chris@2: 
Chris@2: // =============================================================================
Chris@2: // Tables
Chris@2: // =============================================================================
Chris@2: 
Chris@2: // Remove most spacing between table cells
Chris@2: 
Chris@2: table {
Chris@2:     border-collapse: collapse;
Chris@2:     border-spacing: 0;
Chris@2: }