/* ======================================================================

    Portfolio.css

    timmychristensen.com

    Stylesheet prepared by Timothy Christensen
    Version: 4-5-10 

 ======================================================================== */

/*----------------------------------------------------------------------- 
    Reset first. Modified version of Eric Meyer and Paul Chaplin reset 
    from http://meyerweb.com/eric/tools/css/reset/
 ------------------------------------------------------------------------ */

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, font, 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,
header, nav, section, article, aside, footer
{ border: 0; margin: 0; outline: 0; padding: 0; background: transparent; vertical-align: baseline; }

blockquote, q { quotes: none; }
blockquote:before,blockquote:after,q:before,q:after { content: ''; content: none; }

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


/*----------------------------------------------------------------------- 
    Basic Layout
 ------------------------------------------------------------------------ */

body {
  background: #FFF;
  color: #989898;
  font: 0.75em/1.5em "Helvetica Neue", Helvetica, Arial, "Liberation Sans", "Bitstream Vera Sans", sans-serif;
}
html>body { font-size: 12px; }

img { display: inline-block; vertical-align: bottom; }

h1,h2,h3,h4,h5,h6,strong,b,dt,th { font-weight: 700; }
address,cite,em,i,caption,dfn,var { font-style: italic; }

h1 { font-size: 2.0em; margin: 0 0 0.75em; }
h2 { font-size: 1.5em; margin: 0 0 1.0em; }
h3 { font-size: 1.167em; margin: 0 0 1.286em; }
h4 { font-size: 1.0em; margin: 0 0 1.5em; }
h5 { font-size: 0.834em; margin: 0 0 1.8em; }
h6 { font-size: 0.75em; margin: 0 0 2.0em; }

p,ul,ol,dl,blockquote,pre { margin: 0 0 1.5em; }

li ul,li ol { margin: 0; }
ul { list-style: outside disc; }
ol { list-style: outside decimal; }
li { margin: 0 0 0 2em; }
dd { padding-left: 1.5em; }
blockquote { padding: 0 1.5em; }

a { text-decoration: underline; }
a:hover { text-decoration: none; }
abbr,acronym { border-bottom: 1px dotted; cursor: help; }
del { text-decoration: line-through; }
ins { text-decoration: overline; }
sub { font-size: 0.834em; line-height: 1em; vertical-align: sub; }
sup { font-size: 0.834em; line-height: 1em; vertical-align: super; }

tt,code,kbd,samp,pre { font-family: "Courier New", Courier, monospace; font-size: 1.0em; }


/*----------------------------------------------------------------------- 
    Layout
 ------------------------------------------------------------------------ */

div#container { margin: 6.0em auto; width: 890px; }


/*----------------------------------------------------------------------- 
    Header
 ------------------------------------------------------------------------ */

div#header { margin-bottom: 64px; position: relative; }

h1#logo { margin-bottom: 0; }
h1#logo a { display: block; height: 39px; width: 239px; }
h1#logo img,
h1#logo span { display: block; float: left; }
h1#logo span {
  background: transparent url(img/timmychristensen_com_bg.png) left top no-repeat;
  height: 15px;
  margin: 12px 0 0 11px;
  text-indent: -9999px;
  width: 160px;
}


/*----------------------------------------------------------------------- 
    Navigation
 ------------------------------------------------------------------------ */

ul#navigation {
  margin-bottom: 0;
  position: absolute;
  right: 0;
  top: 8px;
}
ul#navigation li {
  display: block;
  float: left;
  list-style: none;
  margin-left: 38px;
}
ul#navigation a {
  background-image: url(img/navigation_sprite_bg.png);
  background-repeat: no-repeat;
  display: block;
  height: 20px;
}
ul#navigation span { display: none; }
a#blog-link { background-position: 0 0; width: 32px; }
a#about-link { background-position: 0 -20px; width: 42px; }
a#twitter-link { background-position: 0 -40px; width: 46px; }
a#contact-link { background-position: 0 -60px; width: 54px; }


/*----------------------------------------------------------------------- 
    Callout
 ------------------------------------------------------------------------ */

p#callout {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
}
img.screenies { display: block; height: 363px; margin: 0 auto; width: 766px; }

/*----------------------------------------------------------------------- 
    Columns
 ------------------------------------------------------------------------ */

div.column { float: left; position: relative; width: 290px; }
div.column + div.column { margin-left: 10px; }
div.column h2 { color: #989898; font-size: 1.1666em; }
div.column li { margin-left: 1.0em; }
div.column p { white-space: break-word; }
div.column p,
div.column ul {
  font-size: 1.1666em;
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 36px;
}
div.column blockquote { margin-bottom: 2.0em; padding: 6px 0 0; }
div.column blockquote p {
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0;
  line-height: 22px;
  margin-bottom: 0;
}
div.column p.citation {
  bottom: 0;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 22px;
  margin-bottom: 0;
  position: absolute;
  right: 0;
  text-align: right;
}
div.column p.citation em { font-weight: bold; }

/*
h2#what-i-can-do { color: #4183C4; }
h2#what-i-can-do-for-you { color: #93CB1D; }
h2#what-people-are-saying { color: #CA30A0; }
*/


/*----------------------------------------------------------------------- 
    Clearfix
 ------------------------------------------------------------------------ */

.clearfix:after, .container:after { clear: both; content:"\0020"; display:block; height: 0; overflow: hidden; visibility: hidden; }
.clearfix, .container { display: inline-block; }
html[xmlns] .clearfix, html[xmlns] .container { display: block; }
* html .clearfix, * html .container { height: 1%; }