//** DEFAULT STYLES **//

// Based heavily on the work of:
// Andy Clarke: http://forabeautifulweb.com/
// Paul Irish & Divya Manian: http://html5boilerplate.com/
// And many others, less directly...

// Imports --------------------------------------------------------------

@import base
@import susy/reset

/* Typography --------------------------------------------------------------
/* The following classes are for use with @extend.

html
  word-wrap: break-word
  text-rendering: optimizeLegibility
  -webkit-font-smoothing: antialiased
  // -webkit-text-size-adjust: none

.serif
  +serif-family

.sans
  +sans-family

.mono
  +monospace-family

.caps
  letter-spacing: 0.1em

.allcaps
  @extend .caps
  text-transform: uppercase

.smallcaps
  @extend .caps
  font-variant: small-caps

/* Body --------------------------------------------------------------

body
  @extend .sans
  color: $base

/* Selected Text --------------------------------------------------------------
/* -moz- must be declared separately

=accessible-color($background)
  @if lightness($background) >= 65%
    color: $base
  @else
    color: $background

\::-moz-selection
  +accessible-color($alt)
  background: $alt
  text-shadow: none

\::selection
  +accessible-color($alt)
  background: $alt
  text-shadow: none

/* Links --------------------------------------------------------------

a
  &:link, &:visited
    color: $alt
    text-decoration: none
  &:link, &:visited, &:hover, &:active
    outline: none
  &:focus, &:hover, &:active
    border-bottom: thin dotted
  &:focus
    outline: thin dotted

/* Headings --------------------------------------------------------------

h1, h2, h3, h4, h5, h6
  +trailer
  @extend .serif

/* Inline --------------------------------------------------------------

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

strong, dfn, b
  font-weight: bold

sup, sub
  font-size: smaller
  line-height: 0

sup
  vertical-align: super

sub
  vertical-align: sub

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

ins
  text-decoration: underline

del
  text-decoration: line-through

mark
  background: #ffff99
  background-color: rgba(yellow, 0.5)
  text-shadow: none

small
  +adjust-font-size-to(12px)

q
  font-style: italic
  em
    font-style: normal

pre, code, tt
  @extend .mono

/* Block --------------------------------------------------------------

p
  +trailer

pre
  margin: $base-rhythm-unit
  white-space: pre
  white-space: pre-wrap
  white-space: pre-line
  word-wrap: break-word

blockquote
  margin: $base-rhythm-unit
  font-style: italic

/* Replaced --------------------------------------------------------------

img
  vertical-align: text-bottom
  max-width: 100%
  -ms-interpolation-mode: bicubic

/* Lists --------------------------------------------------------------

ol, ul, dl
  +trailer
  margin-left: $base-rhythm-unit

ol
  list-style: decimal

ul
  list-style: disc
  li &
    list-style-type: circle

dt
  +leader
  font-style: italic

dd
  padding-left: $base-rhythm-unit

/* Tables --------------------------------------------------------------
/* tables still need 'cellspacing="0"' in the markup

table
  +trailer
  width: 100%
  border-collapse: separate
  border-spacing: 0

table, td, th
  vertical-align: top

th, thead th
  font-weight: bold

th, td, caption
  padding: $base-rhythm-unit * 0.5
  text-align: left
  font-weight: normal

table, th
  +trailing-border(1px, 0.5)

tfoot
  +adjust-font-size-to(14px)

caption
  @extend .allcaps

/* Forms --------------------------------------------------------------

fieldset
  +trailer
  +rhythm-borders(1px)

legend
  +adjust-font-size-to(18px)
  font-weight: bold

input[type="radio"], input[type="checkbox"]
  vertical-align: baseline

label, input[type=button], input[type=submit], button
  cursor: pointer

// box-sizing helps us control the width of inputs
// which are otherwise very hard to manage in the grid.

.textinput
  +sans-family
  +adjust-font-size-to(14px, 1, 16px)
  +box-sizing(border-box)
  width: 100%
  margin-top: 0
  border: 1px solid ($base * 7)
  @include trailer(0.75)
  -webkit-appearance: none
  +border-radius(!radius / 2)
  padding: 0.5em
  background: $background
  background: -moz-linear-gradient(0 12% 90deg, $background, #d2d2d2)
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d2d2d2), color-stop(0.12, $background))
  +box-shadow(1px, 1px, 1px, $background)

textarea
  @extend .textinput
  vertical-align: text-bottom
  height: 15em + ((15 * 2) /14)
  resize: none
  background: -moz-linear-gradient(0 2% 90deg, $background, #d2d2d2)
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d2d2d2), color-stop(0.02, $background))

input
  &[type=text], &[type=password], &[type=email], &[type=url], &[type=tel],
  &[type=date], &[type=datetime], &[type=datetime-local], &[type=month], &[type=week], &[type=time],
  &[type=number], &[type=range], &[type=search], &[type=color]
    @extend .textinput

select
  +adjust-font-size-to(16px)

button
  width: auto
  overflow: visible