/*---------------------
  CSS Reset (slightly modified from http: //meyerweb.com/eric/tools/css/reset/ - v1.0 | 20080212)
---------------------*/
	html,body,div,span,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,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;  }
  ol,ul { list-style: none; }
  table { border-collapse: collapse; border-spacing: 0;  }

/*--------------------
  Elements
--------------------*/
	html, body { height: 100%; }
  body { background: #d5dee0 /*url(../images/background_noise.png)*/; border-top: 5px solid #333; color: #333; font-family: Georgia, 'Times New Roman', serif; font-size: 10px; }
  h1 { font-size: 42px; font-weight: normal; }
  h2 { font-size: 36px; font-weight: normal; }
  h3 { font-size: 16px; font-weight: normal; margin: 0 0 5px 0; }
  h1 a, h2 a, h3 a { text-shadow: none; }
  a, a:link, a:visited, a:active { color: #676B6C; outline: 0; text-decoration: none; }
	a:hover { color: #676B6C; }
  fieldset p { margin-bottom: 5px;  }
	blockquote { border-left: 2px solid #919191; color: #636363; font-size: 12px; font-style: italic; margin: 0 0 10px 20px; padding: 10px; }
	code { background-color: #232323; border: 1px solid #000; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: #E6E1DC; display: block; font-size: 11px; font-family: Monaco, monospace; line-height: 1.4; margin-bottom: 15px; overflow: auto; padding: 10px; white-space: pre-wrap; word-wrap: break-word; }

	code.tags { background-color: transparent; border: 0; color: #333; font-size: 10px; margin: 0; padding: 0; }

	p { font-size: 16px; line-height: 1.5; }
	p.code_header { padding-bottom: 5px; }
  p small { color: #555; font-size: 11px; }
	sup { font-size: 75%; vertical-align: super; }
	hr { background-color: #f0f0f0; border: 0; color: #f0f0f0; height: 1px; margin: 5px 0; }

  li { font-size: 16px; line-height: 1.5; margin-bottom: 5px; }
  
	ol, ul { margin: 0 0 20px 20px; }
	ul { list-style-type: disc; }
	ol li { padding: 0 0 10px 0; }
	ol li p { padding: 0; }
  ol li code { margin: 0; }

	
/*-------------------------------------------
  Global 
-------------------------------------------*/
	.clear { clear: both; }
	.left { float: left; }
	.block_left { float: left; margin: 0 15px 15px 0; }
	.block_right { float: right; margin: 0 0 15px 15px; }
	.right { float: right; }
  .content_inner { padding: 10px; }
  .centered { text-align: center; vertical-align: middle;  }
  .center { margin: auto;  }
	.step_number { color: #666; font-style: italic; padding: 0 5px 0 0; }
  .hidden_field { width: 0; height: 0; font-size: 0; display: none; }
	.thumbnail { -moz-box-shadow: 0 1px 4px #999; -webkit-box-shadow: 0 1px 4px #999; box-shadow: 0 1px 4px #999; }
	.thumbnail:hover { -moz-box-shadow: 0 1px 4px #444; -webkit-box-shadow: 0 1px 4px #444; box-shadow: 0 1px 4px #444; }
	.block { overflow: hidden; padding: 0 0 25px 0; }
	
	.divider { border-bottom: 1px solid #cdd3d6; border-top: 1px solid #cdd3d6; margin: 0 0 15px 0; padding: 5px 0; }
	
  /* Cufon */
	.cufon-loading h1, .cufon-loading h2, .cufon-loading p.date, .cufon-loading #footer h3 { visibility: hidden; }
  
	/* Page */
	.post a, .page a { background-color: #c7ced0; color: #676B6C; padding: 0 2px; -webkit-transition: background-color 0.2s linear; }
	.post a:hover, .page a:hover { background-color: #bfc4c7; }
	
	.page p, .post p { line-height: 1.6; margin-bottom: 21px; }
	
	p.intro { color: #555; font-size: 32px; line-height: 1.8; }
	
  img.left { margin-right: 5px; float: left; }
  img.bordered { border: 1px solid #cdd3d6; background-color: #fff; padding: 8px; margin-right: 20px;  }
  a.icon img { padding-right: 2px; margin-bottom: -3px;  }
  #about p { margin-bottom: 10px; line-height: 1.3;  }
  
  /* Social icons */
	a.social { background: url(../images/social_icons.sprite.png) no-repeat 5px top; color: #777; display: block; font-size: 13px; height: 30px; line-height: 30px; margin: 0 0 5px 0; padding: 0 0 0 28px; text-transform: lowercase; -webkit-transition: color 0.2s linear; }
	a.social:hover { background-color: rgb(86, 87, 88); background-color: rgba(123, 124, 124, 0.25); color: #fff; text-shadow: none; }
  a.rss { background-position: 5px top; }
	a.twitter { background-position: 5px -30px; }
	a.github { background-position: 5px -150px; }
	a.flickr { background-position: 5px -90px; }
	a.delicious { background-position: 5px -60px; }
	a.email { background-position: 5px -120px; }

  /* Bookmarklet */
	a.bookmarklet { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #666; color: #fff; display: inline-block; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif; font-size: 12px; height: 16px; line-height: 16px; padding: 0 10px; text-shadow: 0 1px 2px #666; }
	a.bookmarklet:hover { background-color: #666; }
	
	/* Zoom Plugin */
	#zoom_overlay { background-color: #333; height: 100%; left: 0; opacity: 0.8; position: absolute; top: 0; width: 100%; }
	#zoom { bottom: 0; cursor: pointer; position: absolute; top: 0; z-index: 999; }
	#zoom_content { -moz-box-shadow: 0 4px 8px #444; -webkit-box-shadow: 0 4px 8px #444; box-shadow: 0 4px 8px #444; position: absolute; z-index: 2; }
	#zoom_loading { background: #000 url(../images/zoom/loading.gif) no-repeat center center; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; height: 32px; padding: 10px; position: absolute; width: 32px; }
	#zoom_close { background: url(../images/zoom/close.png) no-repeat; display: block; height: 30px; left: -10px; position: absolute; top: -10px; width: 30px; z-index: 1000; }
		
	.footnotes, p.footnote { border-top: 1px dashed #ccc; color: #555; font-size: 11px; margin: 10px 0 0 0; padding-top: 5px; }
  .footnotes p { color: #555; font-size: 11px; }
	
  /* Download links */
	a.download { background: rgba(38, 38, 38, 0.05) url(../images/box_download.png) no-repeat 10px 10px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; display: block; font-size: 16px; font-weight: bold; height: 42px; line-height: 1; padding: 18px 15px 8px 63px; width: 122px; }
	a.download:hover { background-color: rgba(38, 38, 38, 0.15); }
	a.download:active { background-color: rgba(38, 38, 38, 0.25); }
	a.download small { color: #333; font-size: 12px; font-weight: normal; }
	
  /* Projects */
	#projects { min-height: 450px; }
	#project_filter { height: 30px; line-height: 30px; }
	#project_filter a { background-color: transparent; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: #666; display: inline-block; font-size: 16px; margin-right: 5px; padding: 0 10px; }
	#project_filter a:hover { background-color: #555; color: #fff; }
	#project_filter .selected { background-color: #333; color: #fff; }
	.project { background-color: rgba(38, 38, 38, 0.05); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; float: left; height: 165px; margin: 0 35px 35px 0; padding-top: 15px; position: relative; text-align: center; width: 180px; }
  .project a.link { background-color: transparent; display: block; }
	.project div { background: url(../images/beak_bottom.png) no-repeat center bottom; left: -60px; padding: 0 0 10px 0; position: absolute; top: 0; width: 300px; z-index: 1000; }
	.project div p { background-color: rgba(0, 0, 0, 0.8); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: #fff; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif; font-size: 12px; margin: 0; padding: 10px; text-align: left; }
	.project div p a { background-color: transparent; color: #fff; }
	.project h3 { margin: 5px 0; }
	
	#tumblr_controls { display: none; }


/*--------------------
  Main structure/layout
--------------------*/

  /* Header */
  #header { height: 150px; margin: 0 auto; position: relative; width: 860px; }
  #header em { bottom: 0; color: #afb5b7; font-size: 24px; left: 0; padding: 0 0 0 2px; position: absolute; }
  #logo { background: url(../images/logo.png) no-repeat left top; display: block; height: 59px; left: 0; position: absolute; text-indent: -9999px; top: 25px; width: 66px; }
	#logo:hover { background-position: left bottom; }
	
  /* Nav */
	#nav { height: 98px; position: absolute; right: 0; top: 0; }
	#nav li { display: block; float: left; }
	#nav a { color: #333; display: block; float: left; font-size: 16px; height: 98px; line-height: 100px; text-align: center; width: 75px; }
	#nav a:hover { background-color: #444; color: #fff; }
	#nav a.selected, #nav .current_page_item a, .section_projects #nav a.projects, .section_about #nav a.about, .section_blog #nav a.blog, .section_work #nav a.work { background: #333 url(../images/selected_page_curl.png) no-repeat left bottom; color: #fff; }
	
	.navigation a { font-size: 12px; }
	#wrapper { margin: 0 auto; padding: 0 0 400px 0; position: relative; width: 860px; }
  .main { float: left; width: 625px; }
  
  /* Footer */
	#non_footer { min-height: 100%; position: relative; }
  #footer_wrapper { background-color: #333; height: 250px; margin: -250px 0 0 0; position: relative; }
  #footer { height: 230px; margin: 0 auto; padding: 20px 0 0 0; position: relative; width: 860px; }
  #footer p { bottom: 20px; color: #555; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif; font-size: 12px; margin: 0; position: absolute; text-align: center; width: 100%; }
  #social ul { float: left; margin: 0; width: 150px; }
  #social a { color: #666; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif; font-size: 13px; }
  #social a:hover { color: #fff; }
  #social h3 { color: #fff; font-size: 20px; }
  

/*--------------------
  Tumblr blog
--------------------*/
	.post { overflow: hidden; padding-bottom: 15px; }
	.post h2 a, .post a.zoom { background-color: transparent; }
	.post h2 a { color: #333; font-size: 36px; }
	.post h2 a:hover { background-color: #bfc4c7; }
	.post a.zoom { padding: 0; }
  .posts .post { margin-bottom: 25px; }
  
  .divider p.date { color: #b6bcbf; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;  font-size: 14px; line-height: 1; margin: 0; padding: 0 0 0 2px; }
  .divider p.date a { background-color: transparent; color: #b6bcbf; height: 20px; line-height: 20px; }
  .divider p.date a.tag { background-color: rgb(194, 201, 204); background-color: rgba(38, 38, 38, 0.05); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; display: inline-block; font-size: 11px; height: 20px; line-height: 20px; padding: 0 6px; }
  .divider p.date a.tag:hover { background-color: #444; color: #fff; }
  
	.post_meta { background-color: rgb(194, 201, 204); background-color: rgba(38, 38, 38, 0.05); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; float: right; padding: 15px; width: 170px; }
  .post_meta a { color: #6c7274; display: block; font-size: 14px; line-height: 24px; }
  .post_meta .tags { background: url(../images/tag.png) no-repeat left 2px; margin: 0 0 8px 0; padding: 0 0 0 30px; }
  .post_meta .tags a { display: inline-block; font-size: 12px; line-height: 1.2; margin: 0 5px 0 0; }
  .post_meta img { vertical-align: middle; }
	.post_meta a.comments { background: url(../images/comments.png) no-repeat 2px 6px; display: block; height: 24px; line-height: 24px; margin: 0 0 8px 0; padding: 0 0 0 30px; }
	.post_meta a.share { background: url(../images/share.png) no-repeat 1px center; padding: 0 0 0 30px; }
	.post_meta p.date { color: #8c8c8c; font-size: 14px; font-weight: bold; margin: 0 0 5px 0; padding: 0 0 0 3px; }
	
  /* Notes */
	#notes { border-bottom: 1px dotted #E0DEDA; margin: 0 0 10px 0; padding: 0 0 10px 0; }
	#notes ol { padding: 0; }


/*-------------------------------------------
  Code Highlighter styles
-------------------------------------------*/
	/* Global styles for all languages, partially extracted from TextMate Railscasts theme */
	code .comment { color: #BC9458; float: none; font-style: italic; }
	code .string { color: #A5C261; }
	code .brackets { color: #fff; }
	code .keywords { color: #CC7833; }
	code .constant, code .symbol { color: #6D9CBE; }
	
	/* language specific styles */
	.javascript .global { color: #fff; }
	.css .properties { color: #608aa7; }
	.css .selectors { color: #dcaf5e; }
	.css .units { color: red; }
	.css .urls { color: green; }
	.html .tag, .html .attribute { color: #f0cc76; }
	
	
/*-------------------------------------------
  Disqus
-------------------------------------------*/
  #comments { border-top: 1px solid #cdd3d6; margin: 15px 0 0 0; padding: 15px 0 0 0; }
  #comments #disqus_thread { margin: 0 0 5px 0; }
  #comments #disqus_thread .dsq-options { background-image: none; }
  #comments #disqus_thread .dsq-comment-header { background-image: none; font-size: 14px; }
  #comments #disqus_thread .dsq-textarea .dsq-textarea-wrapper, #comments #disqus_thread .dsq-post-fields .dsq-input-wrapper { background-color: #fff; background-image: none; border: 1px solid #CCC; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }
  #comments #disqus_thread .dsq-comment { background-color: rgb(194, 201, 204); background-color: rgba(38, 38, 38, 0.05); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; margin: 0 0 10px 0; padding: 10px; }
  #comments #disqus_thread .dsq-odd { background-color: rgb(194, 201, 204); background-color: rgba(38, 38, 38, 0.1); }
  #comments #disqus_thread #dsq-new-post { border-top: 1px solid #cdd3d6; margin: 15px 0 0 0; padding: 15px 0 0 0; }
  #comments #disqus_thread #dsq-content .dsq-login-buttons { background-image: none; margin: 0; }
  #comments #disqus_thread #dsq-content .dsq-pagination { background-image: none; }
  #comments #disqus_thread .dsq-post-report { display: none; }
  #comments #disqus_thread .dsq-comment-message { font-size: 14px; line-height: 1.5; }
  #comments #disqus_thread #dsq-post-area h3 { color: #333; text-shadow: none; }
  #comments #disqus_thread .dsq-comment-hide-thread, #comments #disqus_thread .dsq-comment .dsq-sub-header { display: none; }