//** 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 {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; }

.serif {
  @include serif-family; }

.sans {
  @include sans-family; }

.mono {
  @include monospace-family; }

.caps {
  letter-spacing: 0.1em; }

.allcaps {
  @extend .caps;
  text-transform: uppercase; }

.smallcaps {
  @extend .caps;
  font-variant: small-caps; }

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

body {
  @extend .serif;
  color: $base; }

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

@mixin accessible-color($background: white) {
  @if lightness($background) >= 65% {
    color: $base; }
  @else {
    color: white; } }

::-moz-selection {
  @include accessible-color($alt);
  background: $alt;
  text-shadow: none; }

::selection {
  @include accessible-color($alt);
  background: $alt;
  text-shadow: none; }

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

a {
  &:link, &:visited {
    color: $alt; }
  &:link, &:visited, &:hover, &:active {
    outline: none; }
  &:focus, &:hover, &:active {
    color: complement($alt);
    text-decoration: none; }
  &:focus {
    outline: thin dotted; } }

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

h2, h3, h4, h5, h6 {
  @include trailer; }

h1 {
  @include adjust-font-size-to(21px);
  @include trailer(1, 21px); }

h1, h2 {
  @extend .allcaps; }

h3 {
  font-weight: bold; }

h4 {
  @extend .smallcaps;
  text-transform: lowercase; }

h5, h6 {
  font-style: italic; }

/* 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 {
  @include adjust-font-size-to(12px); }

q {
  font-style: italic;
  em {
    font-style: normal; } }

pre, code, tt {
  @extend .mono; }

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

p {
  @include 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 {
  @include trailer;
  margin-left: $base-rhythm-unit; }

ol {
  list-style: decimal; }

ul {
  list-style: disc;
  li & {
    list-style-type: circle; } }

dt {
  @include leader;
  font-style: italic; }

dd {
  padding-left: $base-rhythm-unit; }

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

table {
  @include 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 {
  @include trailing-border(1px, 0.5); }

tfoot {
  @include adjust-font-size-to(14px); }

caption {
  @extend .allcaps; }

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

fieldset {
  @include trailer;
  @include rhythm-borders(1px); }

legend {
  @include 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; }

label {
  font-weight: bold; }

// box-sizing helps us control the width of inputs
// which are otherwise very hard to manage in the grid.
.textinput {
  @include sans-family;
  @include adjust-font-size-to(14px, 1, 16px);
  @include rhythm-borders(1px, 0.25, 14px);
  @include trailer(0.5);
  @include box-sizing(border-box);
  width: 100%;
  margin-top: 0;
  border-color: $base;
  height: $base-line-height / 14px * 1.5; }

textarea {
  @extend .textinput;
  height: $base-line-height / 14px * 6.5;
  vertical-align: text-bottom; }

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; }
  // reset webkit search styles
  &[type=search] {
    -webkit-appearance: none;
    &::-webkit-search-decoration {
      display: none; } } }

button {
  width: auto;
  overflow: visible; }