//** DEFAULT STYLES **//

// Based on the work of:
// Andy Clarke: http://forabeautifulweb.com/

// Imports --------------------------------------------------------------*/

@import "base";
@import "susy/reset";

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

body {
  @include serif-family;
  color: $base;
}

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

a {
  &:link, &:visited {
    color: $alt;
  }
  &:focus, &:hover, &:active {
    color: darken($alt,5);
    text-decoration: none;
  }
  img {
    border: none;
  }
}

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

h1, h2, h3, h4, h5, h6 { 
  font-weight: normal;
  img {
    margin: 0;
  }
}

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

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

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

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

h5, h6 { 
  @include trailer(1);
  font-weight: bold;
}

/* Text --------------------------------------------------------------*/

cite, em, dfn { 
  font-style: italic;
}

strong, dfn { 
  font-weight: bold;
}

sup, sub { 
  line-height: 0;
}

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

address {
  @include trailer;
  font-style: italic;
}

ins { 
  text-decoration: underline;
}

del { 
  text-decoration: line-through;
}

pre, code, tt {
  margin: $base-rhythm-unit {
    left: -$base-rhythm-unit;
  };
  padding-left: $base-rhythm-unit;
  border-left: 1px dotted;
  @include monospace-family;
}

pre { 
  white-space: pre;
}

code { 
  display: block;
}

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

p {
  @include trailer;
}

blockquote, q {
  quotes : "" "";
}

blockquote { 
  margin: $base-rhythm-unit {
    left: -$base-rhythm-unit;
  };
  padding-left: $base-rhythm-unit;
  border-left: 1px solid;
  @include serif-family;
  font-style: italic;
}

blockquote, q {
  &:before, &:after { 
    content: "";
  }
}

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

img {
  vertical-align: bottom;
}

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

@mixin list-default($ol: false) {
  margin: 0 $base-rhythm-unit $base-rhythm-unit 0;
  @if $ol {
    list-style: decimal;
  } @else {
    list-style: disc;
  } 
}

@mixin no-style-list {
  @include no-bullets;
  margin: 0;
  padding: 0;
}

ol {
  @include list-default(ol);
}

ul {
  @include list-default;
}

li {
  ul, ol { 
    list-style-type: circle;
    margin: 0 $base-rhythm-unit $base-rhythm-unit*.5;
  }
}

dl {
  @include trailer;
  @include leading-border(1px);
  dt {
    @include adjust-font-size-to(18px);
    @include trailer(.5,18px);
  }
}

dd {
  @include trailer;
  @include trailing-border(1px);
}

/* 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*.5;
  text-align: left;
  font-weight: normal;
}

th, td {
  @include trailing-border(1px,.5);
}

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

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

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

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

legend {
  @include adjust-font-size-to(18px);
  font-weight: bold;
}

label {
  font-weight: bold;
}

textarea, input:not([type="radio"]) {
  // box-sizing will help us control the width of inputs
  // which are otherwise very hard to manage in the grid.
  @include box-sizing(border-box);
  width: 100%;
}