// Minimal base styles

// Credit where credit is due
// Much inspiration was taken from the HTML5 Boilerplate

@import compass/css3
@import partials/typography

$base-font-size: 14px
$base-link-color: green
$base-link-color-hover: lighten($base-link-color,10)
$base-form-text-color: #444
$webkit-tap-highlight-color: #59bef2
$invalid-box-shadow-color: red

// Links
a
  color: $base-link-color
  text-decoration: none
  &:hover
    color: $base-link-color-hover
    text-decoration: underline
  &:focus, &:active
    outline: none

// Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test

a
  &:hover, &:active
    outline: none

ul, ol
  margin-left: 2em

ol
  list-style-type: decimal

// Remove margins for navigation lists

nav
  ul, li
    margin: 0
    list-style: none
    list-style-image: none

small
  font-size: 85%

strong, th
  font-weight: bold

td
  vertical-align: top

// Set sub, sup without affecting line-height: gist.github.com/413930

sub, sup
  font-size: 75%
  line-height: 0
  position: relative

sup
  top: -0.5em

sub
  bottom: -0.25em

pre
  // www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/
  white-space: pre
  white-space: pre-wrap
  word-wrap: break-word
  padding: 15px

textarea
  overflow: auto

// www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/

.ie6 legend, .ie7 legend
  margin-left: -7px

// Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css

input
  &[type="radio"]
    vertical-align: text-bottom
  &[type="checkbox"]
    vertical-align: bottom

.ie7 input[type="checkbox"]
  vertical-align: baseline

.ie6 input
  vertical-align: text-bottom

// Hand cursor on clickable input elements

label
  cursor: pointer

input
  &[type="button"], &[type="submit"], &[type="image"]
    cursor: pointer

button
  cursor: pointer
  margin: 0

// Webkit browsers add a 2px margin outside the chrome of form elements

input, select, textarea
  margin: 0

// Colors for form validity

input:valid, textarea:valid
  // Set valid styles here

input:invalid, textarea:invalid
  +border-radius(1px)
  +box-shadow($invalid-box-shadow-color 0px 0px 5px)

.no-boxshadow
  input:invalid, textarea:invalid
    background-color: lighten($invalid-box-shadow-color,42)

// These selection declarations have to be separate
// No text-shadow: twitter.com/miketaylr/status/12228805301
// Also: hot pink!

// \:
// &:-moz-selection, &:selection
//   background: #FF5E99
//   color: #fff
//   text-shadow: none

// j.mp/webkit-tap-highlight-color

a:link
  -webkit-tap-highlight-color: $webkit-tap-highlight-color

// Make buttons play nice in IE:
// www.viget.com/inspire/styling-the-button-element-in-internet-explorer/

button
  width: auto
  overflow: visible

// Bicubic resizing for non-native sized IMG:
// code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/

.ie7 img
  -ms-interpolation-mode: bicubic

// You might tweak these

body, select, input, textarea
  // #444 looks better than black: twitter.com/H_FJ/statuses/11800719859
  color: $base-form-text-color
  // Set your base font here, to apply evenly
  font-family: "Helvetica-Neue", Helvetica, Arial, sans-serif
  font-size: $base-font-size

// Bold the headers

h1, h2, h3, h4, h5, h6
  font-weight: bold