html,article,aside,dialog,figure,footer,header,hgroup, nav,section,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}body{line-height:1.5;}table{border-collapse:collapse;border-spacing:none;}caption,th,td{text-align:left;font-weight:normal;}table,td,th{vertical-align:middle;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}a img{border:none;}b{font-weight:bold;}strong{font-weight:inherit;}.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}.clearfix{display:block;}.clear{clear:both;}
* html .clearfix{height:1%;}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
  display:block;
}

/* ============= */
/* = Typography = */
/* ============= */
html {
  -webkit-font-smoothing: antialiased;
  overflow-y: scroll;
}
body {
  background: #F5F5F5 url('background.png');
  font: 14px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
  color: #222;
  text-rendering: optimizelegibility;
}

h1, .h1 {
  font: bold 2.8em/1.0875 'Helvetica Neue', Arial, Helvetica, sans-serif; 
  color: #555;
  margin-bottom: .125em;
  letter-spacing: 0;
  border: none;
}

h2, .h2 {
  font: bold 2em/1.1 'Helvetica Neue', Arial, Helvetica, sans-serif;
  margin-bottom: .25em;
  color: #C8152B;
  letter-spacing: -1px;
}

h3, .h3 { 
  font: bold 1.8em/1.1 'Helvetica Neue', Arial, Helvetica, sans-serif;
  margin-bottom: .25em;
  color: #555;
  border: none;
  letter-spacing: 0;
}

p {
  margin-bottom: .5em;
}

ul {
  margin: 0 0 1em 1.33em;
  list-style-type: square;
  color: #666;
}

p + h3,
p + h2 {
  margin-top: .667em;
}

/* Cool sup that doesn't mess with line height */
sup {
  bottom: 0.33em;
  font-size: 10px !important;
  font-weight: normal !important;
  padding-left: 1px;
  position: relative;
  vertical-align: baseline;
}

a {
  text-decoration: none;
  color: #07A;
}
a:hover, a:focus {
  text-decoration: underline;
  color: #07C;
}

/* ========== */
/* = Layout = */
/* ========== */
#container {
  width: 500px;
  margin: 0 auto;
  position: relative;
}
  header {
    margin: 2.5em 0 2.5em;
    position: relative;
  }
    header p:first-child {
      margin-bottom: 0;
      font-size: 2em;
      font-weight: lighter;
    }
    header h1 {
      color: #777;
    }
    header h1:first-line {
      color: black;
    }
  #content {
    
  }
      
  footer {
    clear: both;
    padding: 1em 0 3em;
  }

.hr {
  height: 1px;
  overflow: hidden;
  background: #D9D9D9;
  border-bottom: 1px solid #fff;
  clear: both;
  margin: 1em 0;
}
/* ============= */
/* = specifics = */
/* ============= */
.light {
  color: #666;
}
.free {
  font-weight: bold;
  color: #00960F;
}
.busy {
  font-weight: bold;
  color: #650000;
}

/* ================ */
/* = Social icons = */
/* ================ */
.twitter-follow-button {
  position: absolute;
  top: -23px;
  left: 0;
}
#social {
  float: right;
  width: 255px;
  position: absolute;
  top: -30px;
  right: 0;
  list-style-type: none;
}
#social li {
  float: right;
}
#social a {
  padding-top: 24px;
  width: 24px;
  height: 0;
  background-image: url('icons.png');
  display: block;
  float: right;
  overflow: hidden;
  margin-top: 4px;
  margin-right: 8px;
  line-height: 1;
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 0.33s;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-duration: 0.33s;
  -moz-transition-timing-function: ease-out;
  opacity: 0.8;
  -moz-opacity: 0.8;
}
  #social a:hover, #social a:focus {
    opacity: 1;
    -moz-opacity: 1;
  }
  #twitter  { background-position: 0px 0px;}
  #linkedin  { background-position: 0px -24px;}
  #lastfm    { background-position: 0px -48px;}
  #flickr    { background-position: 0px -72px;}
  #facebook  { background-position: 0px -96px;}