// font-sizes:
// base: 16px = 1em
// 10px = .625em
// 12px = .75em
// 14px = .875em
// 16px = 1em
// 17px = 1.0625em (body text in articles)
// 18px = 1.125em
// 24px = 1.5em
// 30px = 1.875em
// 32px = 2em

ol, ul, li, dl
    list-style: none
    margin: 0
    padding: 0
    border: 0
    outline: 0
    background: transparent

blockquote, q
    quotes: none
hr
    display: none
\:focus
    outline: 0

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
    display: block
    margin: 0
    padding: 0

// 1.ROOT

html
    overflow-y: scroll
    background: rgb(255, 255, 255) /*url(../img/grid.jpg) 50% 0 repeat-y*/
    border-top: 3px $brown solid

body
    margin: 0 auto
    padding: 0
    width: 90%
    font: normal 100% ff-meta-serif-web-pro, unquote("Hoefler Text"), Georgia, unquote("Times New Roman"), Times, serif 
    color: $brown
    background-color: transparent
    

// 2.HEADINGS

h1, h2, h3, h4, h5, h6
    font-family: unquote("Helvetica Neue"), Helvetica, Verdana, sans-serif

h1
    font-size: 1.875em
    line-height: 1.3em
    font-weight: normal

h2
    margin-bottom: .75em
    font-size: 1.5em /* 36 / 16 = 2 */
    line-height: 1.5
    font-weight: normal

h3
    margin-bottom: 1em
    font-size: 1.6em
    line-height: 1.5

h4
    margin-bottom: 1.25em
    font-size: 1.25em /* 20 / 16 = 1.25 */
    line-height: 1.25

h5
    margin-bottom: 1.5em
    font-size: 1em /* 16 / 16 = 1 */

h6
    font-size: 1em /* 16 / 16 = 1 */

// 3.TYPOGRAPHY 

p
    font-size: 1.0625em /* 17px / 16px */
    line-height: 1.5em /* 24px / 16px */
    margin: 1em 0 0

ul, ol
    margin: 0 0 1.5em -24px
    padding-left: 24px

ul
    list-style-type: disc

ol
    list-style-type: decimal

li
    ul, ol
        margin: 0
        font-size: 1em /* 16 / 16 = 1 */

dl, dd
    margin-bottom: 1.5em

dt
    font-weight: normal


b, strong
    font-weight: bold

i, em
    font-style: italic

footer p
    font-size: .625em
    text-align: center
a
    text-decoration: none
    color: $brown
    -webkit-transition: color 0.3s ease-out
    -moz-transition: color 0.3s ease-out
    -o-transition: color 0.3s ease-out
    -ms-transition: color 0.3s ease-out
    transition: color 0.3s ease-out
    &:hover
        color: $orange
sup
    font: normal .625em Helvetica, Verdana, sans-serif
small
    font: normal .75em Helvetica, Verdana, sans-serif

blockquote
    font-style: italic
    font-size: 1em
    line-height: 1.625em
    p
        font-size: 1em
    cite
        font-style: normal
img 
    border: 10px $brown solid

pre
    margin-bottom: 1.5em
    white-space: pre
    white-space: pre-wrap
    word-wrap: break-word
    
pre, code
    font: .875em 'andale mono', 'lucida console', monospace
    line-height: 1.5
    
//Classes

//.dateline, .breadcrumbs li, .geo, .legend h3, time

.bl, time, #photo-galleries h1
    text-transform: uppercase
    font-size: 11px
    letter-spacing: 1px

.drop
    font-size: 3em
    float: left
    display: block
    padding: 18px 10px 5px 0
    overflow: visible
.double .drop, .drop-small
    font-size: 3.1em
    display: block
    float: left
    padding: 16px 8px 5px 0
    overflow: visible
.button 
    display: block
    margin-top: 8px
    a    
        padding: 9px 14px 7px 14px
        font-weight: bold
        line-height: 25px
        text-transform: uppercase
        background: #d7d7d7
        color: #666 !important
        -moz-border-radius: 25px
        -webkit-border-radius: 25px
        border-radius: 25px
        font: bold 10px Helvetica, Verdana, sans-serif
        width: auto
    a:hover
        background: $orange
        color: white !important
.alert
    color: #ff3530
//Pagination
//next previous table
#page-navigation
    margin: 24px auto
    strong
        display: block
        text-align: right
        margin-top: 1px
        text-transform: uppercase
        font-size: .75em
        letter-spacing: .1625em
        font-weight: normal
        font-style: normal

//pagination in archives
#pagination
    margin-top: 1em
    border-top: 1px $brown dotted
    border-bottom: 1px $brown dotted
    text-align: center
    font-family: unquote("Helvetica Neue"), Helvetica, Verdana, sans-serif
    padding: .25em 0
    ul
        margin-bottom: 0
    li
        display: inline
        text-align: center

// 4.LINKS 

a
    outline: none
    color: #111
    text-decoration: none
    &:visited
        outline: none
        color: #111
        text-decoration: none
    &:hover
        outline: none
        color: $orange
        text-decoration: none
    &:active, &:focus
        outline: none
        color: rgb(0, 0, 0)

/* 5.FIGURES & IMAGES

figure
    margin-bottom: 1.5em
    img, object, embed
        margin-bottom: .75em
        max-width: 100%

figcaption
    display: block
    font-weight: normal

// 6.TABLES

table
    border-collapse: collapse
    border-spacing: 0
    margin-bottom: 1.4em
    width: 100%
    font-size: .875em
    /* 14 / 16 = .875

th
    font-weight: bold
    padding: .25em 10px .25em 5px

td, caption
    padding: .25em 10px .25em 5px

tfoot
    font-style: italic

caption
    background-color: transparent

// 14.GLOBAL OBJECTS 

.clearfix
    zoom: 1
    &:before, &:after
        content: "\0020"
        display: block
        height: 0
        overflow: hidden
    &:after
        clear: both

.hide
    display: none
    
///* 15.VENDOR-SPECIFIC

body
    -webkit-text-size-adjust: 100%
    -ms-text-size-adjust: 100%

a:link
    -webkit-tap-highlight-color: rgb(52, 158, 219)

::-webkit-selection
    background: rgb(23, 119, 175)
    color: rgb(250, 250, 250)
    text-shadow: none
::-moz-selection
    background: rgb(23, 119, 175)
    color: rgb(250, 250, 250)
    text-shadow: none
::selection
    background: rgb(23, 119, 175)
    color: rgb(250, 250, 250)
    text-shadow: none


.ie7 img, .iem7 img
    -ms-interpolation-mode: bicubic