/* ====================================================
 *
 * Dan Barber CV Styles
 * Based on:
 * 320 and Up boilerplate extension
 *
 * Author: Andy Clarke
 * Version: 0.9b
 * URL: http://stuffandnonsense.co.uk/projects/320andup/
 * _____________________________________________________
 *
 *  1.ROOT
 *  2.HEADINGS
 *  3.TYPOGRAPHY
 *  4.LINKS
 *  5.FIGURES & IMAGES
 *  6.TABLES
 *  7.FORMS (See css/mylibs/forms.css)
 *  8.BANNER header[role="banner"]
 *  9.NAVIGATION nav[role="navigation"]
 * 10.CONTENT
 * 11.MAIN div[role="main"]
 * 12.COMPLIMENTARY div[role="complementary"]
 * 13.CONTENTINFO footer[role="contentinfo"]
 * 14.GLOBAL OBJECTS
 * 15.VENDOR-SPECIFIC 
 * 16.TEMPLATE SPECIFICS
 * 17.MODERNIZR
 *
 * COLOURS

@import "iconfont"

*, *:before, *:after
  box-sizing: border-box

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
  margin: 0
  padding: 0
  border: 0
  font-size: 100%
  font: inherit
  vertical-align: baseline

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

abbr[title]
  border-bottom: 1px dotted
  cursor: help

/*  1.ROOT

html
  overflow-y: scroll
  background: white

body
  margin: 0 auto
  padding: 0 0
  font: 100% / 1.4 "museo-sans-1", "museo-sans-2", sans-serif
  font-weight: 100
  color: #262626
  background: white
  background: -moz-linear-gradient(left, rgba(239,239,239,1) 0%, rgba(255,255,255,1) 35%, rgba(255,255,255,1) 65%, rgba(239,239,239,1) 100%)
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(239,239,239,1)), color-stop(35%,rgba(255,255,255,1)), color-stop(65%,rgba(255,255,255,1)), color-stop(100%,rgba(239,239,239,1)))
  background: -webkit-linear-gradient(left, rgba(239,239,239,1) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,1) 65%,rgba(239,239,239,1) 100%)
  background: -o-linear-gradient(left, rgba(239,239,239,1) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,1) 65%,rgba(239,239,239,1) 100%)
  background: -ms-linear-gradient(left, rgba(239,239,239,1) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,1) 65%,rgba(239,239,239,1) 100%)
  background: linear-gradient(to right, rgba(239,239,239,1) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,1) 65%,rgba(239,239,239,1) 100%)

#stripe
  background: #262626
  height: 12px
  line-height: 0
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)
  canvas
    height: 12px
    width: 100%

.container
  margin: 0 auto
  padding: 0 0
  width: 90%

/*  2.HEADINGS

h1, h2, h3, h4, h5, h6
  font-family: "museo-slab-1","museo-slab-2", "Helvetica Neue", Helvetica, Arial, serif
  font-weight: black
  text-shadow: 1px 1px 1px white
  text-rendering: optimizeLegibility

h1
  margin-top: 0
  margin-bottom: .1em
  font-size: 3em
  /* 48 / 16 = 3
  line-height: 1.2
  font-weight: 900
  text-align: center
  width: 100%
  &:before
    display: block
    font-size: 1.5em
    margin-top: 0.3em
    margin-bottom: 0.1em
    text-align: center

/* Hide the logomark in ie7/8 as it just doesn't work correctly. It's not essential.

.ie8 h1:before, .ie7 h1:before
  border: 1px solid red
  display: none

h2
  margin-bottom: .75em
  font-size: 1.7em
  /* 36 / 16 = 2
  line-height: 1.2
  text-align: center

h3
  text-transform: uppercase
  margin-bottom: 1em
  font-size: 1.4em
  /* 24 / 16 = 1.5
  line-height: 1.3

h4
  margin-bottom: 0.75em
  margin-top: 1.7em
  font-size: 1.2em
  /* 20 / 16 = 1.25
  line-height: 1.25
  font-weight: 500

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

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

/*  3.TYPOGRAPHY

.link
  float: right

.period
  font-style: italic

p, ol, ul, dl, address
  margin-bottom: 0.75em
  font-size: 1em
  /* 16 / 16 = 1

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

ul
  ul
    padding-left: 0
  list-style-type: disc

ol
  list-style-type: decimal

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

.container>section
  border-top: 2px solid #666
  padding-top: 1em
  margin-bottom: 2em
  ul, ol
    list-style: none

dl, dd
  margin-bottom: 1.5em

dt
  font-weight: normal

blockquote
  margin: 0 0 1.5em -24px
  padding-left: 24px
  border-left: 1px solid rgb(200, 200, 200)
  font-style: italic
  &:before, &:after
    content: ''
    content: none

q
  &:before, &:after
    content: ''
    content: none

b, strong
  font-weight: bold

i, em
  font-style: italic

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

sup
  top: -0.5em

sub
  bottom: -0.25em

address
  font-style: normal

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

code
  font: .875em 'andale mono', 'lucida console', monospace
  line-height: 1.5

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

/*  4.LINKS

a
  outline: none
  color: rgb(23, 119, 175)
  text-decoration: none
  &:visited
    outline: none
    color: rgb(23, 119, 175)
    text-decoration: none
  &:hover, &:focus
    outline: none
    color: rgb(40, 40, 40)
    text-decoration: underline
  &:active
    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

/*  7.FORMS (See css/mylibs/forms.css)

/*  8.BANNER
/*  9.NAVIGATION
/* 10.CONTENT
/* 11.MAIN
/* 12.COMPLIMENTARY
/* 13.CONTENTINFO

/* 14.GLOBAL OBJECTS

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

/* 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
::-webkit-input-placeholder
  padding: 10px
  font-size: .875em
  line-height: 1.4

/* input[type=search] { -webkit-appearance: none; }
 *
 *input[type="search"]::-webkit-search-decoration, 
 *input[type="search"]::-webkit-search-cancel-button { display: none; }

input:-moz-placeholder
  padding: 10px
  font-size: .875em
  line-height: 1.4

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

div, input, textarea
  -webkit-box-sizing: border-box
  -moz-box-sizing: border-box
  -o-box-sizing: border-box
  box-sizing: border-box

/* Non-semantic helper classes

/* Image replacement

.ir
  display: block
  text-indent: -999em
  overflow: hidden
  background-repeat: no-repeat
  text-align: left
  direction: ltr

/* Hide for screenreaders and visual browsers

.hidden
  display: none
  visibility: hidden

/* Hide visually

.visuallyhidden
  position: absolute
  clip: rect(0 0 0 0)
  overflow: hidden
  margin: -1px
  padding: 0
  height: 1px
  width: 1px
  border: 0
  &.focusable
    &:active, &:focus
      position: static
      clip: auto
      overflow: visible
      height: auto
      margin: 0
      width: auto

/* Allow an element to be focusable via keyboard

/* Hide but maintain layout

.invisible
  visibility: hidden

/* 16.TEMPLATE SPECIFICS

#goog-fixurl
  ul
    list-style-type: none
  input
    margin-bottom: 1.5em

/* 17.MODERNIZR

/* MEDIA QUERIES

/*Print __________________________________________________________________________________________________________
@media print
  *
    background: transparent !important
    color: black !important
    text-shadow: none !important
    filter: none !important
    -ms-filter: none !important
  a
    color: #444 !important
    text-decoration: underline
    &:visited
      color: #444 !important
      text-decoration: underline
    &[href]:after
      content: " (" attr(href) ")"
  abbr[title]:after
    content: " (" attr(title) ")"
  a
    &[href^="javascript:"]:after, &[href^="#"]:after
      content: ""
  pre, blockquote
    border: 1px solid #999
    page-break-inside: avoid
  thead
    display: table-header-group
  tr, img
    page-break-inside: avoid
  @page
    margin: .5cm

  p, h2, h3
    orphans: 3
    widows: 3
  h2, h3
    page-break-after: avoid

/*/mediaquery

/*500px __________________________________________________________________________________________________________
@media only screen and (min-width: 500px)
  /*  1.ROOT
  body
    font-size: 1.05em
  /*  2.HEADINGS
  h1
    margin-top: 0.5em
    text-align: left
    margin-bottom: 0
    font-size: 3.3em
    &:before
      float: right
      font-size: 1.5em
      width: 78px
      background-size: 78px
      background-position: top center
      position: relative
      top: 0em
      text-align: right
      margin-top: 0
      margin-bottom: -0.5em
  h2
    text-align: left
  /*  3.TYPOGRAPHY
  /*  4.LINKS
  /*  5.FIGURES & IMAGES
  /*  6.TABLES
  /*  7.FORMS
  /*  8.BANNER
  /*  9.NAVIGATION
  /* 10.CONTENT
  /* #experience h4 { float: left; margin-top: 0; }
   *#experience li { margin-top: 2.2em; }
   *#experience .period { clear: none; text-align: right; position: relative; top: 0.1em; }
   *#experience p { clear: both; }
  /* 11.MAIN
  /* 12.COMPLIMENTARY
  /* 13.CONTENTINFO
  /* 14.GLOBAL OBJECTS
  /* 15.VENDOR-SPECIFIC
  /* 16.TEMPLATE SPECIFICS
  /* 17.MODERNIZR

/*/mediaquery

/*480px __________________________________________________________________________________________________________
@media only screen and (min-width: 540px)
  /*  1.ROOT
  /*  2.HEADINGS
  /*  3.TYPOGRAPHY
  /*  4.LINKS
  /*  5.FIGURES & IMAGES
  /*  6.TABLES
  /*  7.FORMS
  /*  8.BANNER
  /*  9.NAVIGATION
  /* 10.CONTENT
  #profile, #experience
    float: left
    width: 63%
  #skills
    float: right
    width: 30%
    margin-left: 7%
  #portfolio
    float: left
    width: 63%
  #interests, #contact
    float: right
    width: 30%
    margin-left: 7%
  /* 11.MAIN
  /* 12.COMPLIMENTARY
  /* 13.CONTENTINFO
  /* 14.GLOBAL OBJECTS
  /* 15.VENDOR-SPECIFIC
  /* 16.TEMPLATE SPECIFICS
  /* 17.MODERNIZR

/*/mediaquery

/*768px __________________________________________________________________________________________________________
@media only screen and (min-width: 768px)
  /*  1.ROOT
  body
    font-size: 1.1em
  /*  2.HEADINGS
  h1
    font-size: 5em
    margin-bottom: 0em
    &:before
      width: 130px
      background-size: 130px
      background-position: top center
      position: relative
      top: 0em
  h2
    font-size: 2em
  /*  3.TYPOGRAPHY
  /*  4.LINKS
  /*  5.FIGURES & IMAGES
  /*  6.TABLES
  /*  7.FORMS
  /*  8.BANNER
  /*  9.NAVIGATION
  /* 10.CONTENT
  /* 11.MAIN
  /* 12.COMPLIMENTARY
  /* 13.CONTENTINFO
  /* 14.GLOBAL OBJECTS
  /* 15.VENDOR-SPECIFIC
  /* 16.TEMPLATE SPECIFICS
  /* 17.MODERNIZR

/*/mediaquery

/*992px __________________________________________________________________________________________________________
@media only screen and (min-width: 992px)
  /*  1.ROOT
  .container
    max-width: 890px
  /*  2.HEADINGS
  /*  3.TYPOGRAPHY
  /*  4.LINKS
  /*  5.FIGURES & IMAGES
  /*  6.TABLES
  /*  7.FORMS
  /*  8.BANNER
  /*  9.NAVIGATION
  /* 10.CONTENT
  /* 11.MAIN
  /* 12.COMPLIMENTARY
  /* 13.CONTENTINFO
  /* 14.GLOBAL OBJECTS
  /* 15.VENDOR-SPECIFIC
  /* 16.TEMPLATE SPECIFICS
  /* 17.MODERNIZR

/*/mediaquery

/*1382px __________________________________________________________________________________________________________
@media only screen and (min-width: 1382px)
  /*  1.ROOT
  /*  2.HEADINGS
  /*  3.TYPOGRAPHY
  /*  4.LINKS
  /*  5.FIGURES & IMAGES
  /*  6.TABLES
  /*  7.FORMS
  /*  8.BANNER
  /*  9.NAVIGATION
  /* 10.CONTENT
  /* 11.MAIN
  /* 12.COMPLIMENTARY
  /* 13.CONTENTINFO
  /* 14.GLOBAL OBJECTS
  /* 15.VENDOR-SPECIFIC
  /* 16.TEMPLATE SPECIFICS
  /* 17.MODERNIZR

/*/mediaquery

/*2x __________________________________________________________________________________________________________
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)
  /*  1.ROOT
  /*  2.HEADINGS
  /*  3.TYPOGRAPHY
  /*  4.LINKS
  /*  5.FIGURES & IMAGES
  /*  6.TABLES
  /*  7.FORMS
  /*  8.BANNER
  /*  9.NAVIGATION
  /* 10.CONTENT
  /* 11.MAIN
  /* 12.COMPLIMENTARY
  /* 13.CONTENTINFO
  /* 14.GLOBAL OBJECTS
  /* 15.VENDOR-SPECIFIC
  /* 16.TEMPLATE SPECIFICS
  /* 17.MODERNIZR

/*/mediaquery

/* 
 * Sources: 
 * http://meyerweb.com/eric/tools/css/reset
 * http://people.opera.com/patrickl/experiments/keyboard/test
 * http://gist.github.com/413930
 * http://pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap
 * http://sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars
 * http://tjkdesign.com/ez-css/css/base.css
 * http://viget.com/inspire/styling-the-button-element-in-internet-explorer
 * http://code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing
 * http://html5doctor.com/html-5-reset-stylesheet/
 * http://praegnanz.de/weblog/htmlcssjs-kickstart/
 * http://camendesign.com/design/
 * http://yui.yahooapis.com/2.8.1/build/base/base.css
 * http://webaim.org/techniques/css/invisiblecontent/
 * http://drupal.org/node/897638