/*---------------------
  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;  }
  /* HTML5 support */
  article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }


/*--------------------
  Elements
--------------------*/
	html, body { height: 100%; }
  body { background: #dde2e7 url(../images/background_noise.png); color: #20282e; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /*font-family: Georgia, 'Times New Roman', serif;*/ font-size: 10px; }
  h1 { font-size: 36px; font-weight: normal; margin-bottom: 5px; text-shadow: 0 1px 0 #fff; }
  h2 { font-size: 24px; font-weight: normal; text-shadow: 0 1px 0 #fff; }
  h3 { font-size: 18px; font-weight: normal; margin: 0 0 5px 0; text-shadow: 0 1px 0 #fff; }
  a { color: #20282e; outline: 0; text-decoration: none; }
  fieldset p { margin-bottom: 5px;  }
	blockquote { border-left: 2px solid #919191; color: #444; font-size: 12px; font-style: italic; margin: 0 0 10px 20px; padding: 10px; }
	blockquote p { margin-bottom: 0; }
	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; }
  p a { text-shadow: none; }
	sup { font-size: 75%; vertical-align: super; }
	hr { background-color: #f0f0f0; border: 0; color: #f0f0f0; height: 1px; margin: 5px 0; }

  header { height: 30px; margin: 0 auto; position: relative; width: 860px; }
  article header { height: auto; margin: 0; width: auto; }
	
/*-------------------------------------------
  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: 2px 2px 4px #999; -webkit-box-shadow: 2px 2px 4px #999; box-shadow: 2px 2px 4px #999; }
	.thumbnail:hover { -moz-box-shadow: 0 1px 4px #444; -webkit-box-shadow: 0 1px 4px #444; box-shadow: 0 1px 4px #444; }
	.photo { -moz-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25); display: block; margin-bottom: 5px; }
	.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; }

  img.left { margin-right: 5px; float: left; }
  img.bordered { border: 1px solid #cdd3d6; background-color: #fff; padding: 4px; margin-right: 20px;  }
  a.icon img { padding-right: 2px; margin-bottom: -3px;  }
  
/*--------------------
  Main structure/layout
--------------------*/

  /* Header */
  #logo { -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; border: 4px solid #e6e9ec; color: #cacdd0; display: block; font-size: 24px; height: 50px; left: 0; letter-spacing: -0.3px; line-height: 50px; position: absolute; text-align: center; text-shadow: -2px 2px 0 #e6e9ec; top: 25px; width: 50px; }
  #logo span { -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; border: 4px solid #cacdd0; display: block; height: 50px; margin: -2px 0 0 -2px; width: 50px; }
  
  #logo:hover span { border-color: #b8bbbf; color: #b8bbbf; }
	
  /* Nav */
  #header { background: #20282e url(../images/dark_noise_texture.png); border-bottom: 1px solid #fff; height: 35px; margin-bottom: 50px; padding-top: 5px; }
  header a.home { color: #dde2e7; font-family: "museo-sans-1","museo-sans-2","Helvetica Neue","Helvetica","Arial",sans-serif; font-size: 18px; line-height: 30px; text-shadow: 0 -1px 0 #000; }
  header a.home span { color: rgba(221, 226, 231, 0.75); }
	nav { height: 30px; position: absolute; right: 0; top: 0; }
	nav li { display: block; float: left; height: 30px; line-height: 30px; }
	nav a { border-right: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.5); display: block; float: left; font-size: 14px; height: 30px; line-height: 30px; padding: 0 15px; }
	nav a.about { border: 0; }
	nav a:hover { color: #e7e7e7; }
	nav a.selected, nav .current_page_item a, .section_home nav a.home, .section_projects nav a.projects, .section_about nav a.about, .section_blog nav a.blog, .section_work nav a.work { color: #fff; }
	
	#wrapper { margin: 0 auto; padding: 0 0 400px 0; position: relative; width: 860px; }
  .main { float: left; width: 625px; }
  #sidebar { float: right; width: 200px; }
  
  /* Footer */
	#non_footer { min-height: 100%; position: relative; }
  #footer_wrapper { background: #20282e url(../images/dark_noise_texture.png); 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 h3 { text-shadow: none; }
  footer p { bottom: 20px; color: #787E80; font-size: 12px; margin: 0; position: absolute; text-align: center; width: 100%; }
  #social ul { float: left; margin: 0; width: 150px; }
  #social ul li { list-style: none; }
  #social a { color: #787E80; font-size: 13px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
  #social a:hover { color: #fff; }
  #social h3 { color: #fff; font-size: 20px; }
  
  
/*-------------------------------------------
  Content styles
-------------------------------------------*/  

  /* Page */
/*  .post a, .page a { background-color: #c7ced0; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 0 6px; -webkit-transition: background-color 0.2s linear; }
*/
	.post a:hover, .page a:hover { color: #676B6C; }
	.post p a, .page p a { border-bottom: 1px solid rgba(0, 0, 0, 0.2); color: #444; font-weight: bold; }
	
	.post li, .page li { font-size: 16px; line-height: 1.5; margin-bottom: 5px; }
  
	.post ol, .page ol, .post ul, .page ul { margin: 0 0 20px 20px; }
	.post ul, .page ul { list-style-type: disc; }
	.post ol li, .page ol li { padding: 0 0 10px 0; }
	.post ol li p, .page ol li p { padding: 0; }
  .post ol li code, .page ol li code { margin: 0; }
  	
	.page p, .post p { line-height: 1.6; margin-bottom: 21px; }
	.page p, .post .main p { text-shadow: 0 1px 0 #fff; }
	.page p code, .post .main p code { text-shadow: none; }
	.post blockquote p { margin-bottom: 0; }
	
	p.intro { color: #333; font-size: 32px; line-height: 1.8; }
	
  #about p { margin-bottom: 10px; line-height: 1.3; }
  

  /* Social icons */
	a.social { background: url(../images/social_icons.sprite.png?1289487067) 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; }
	a.dribbble { background-position: 5px -180px; }

  
  /* 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; }
	#zoom_title { background-color: rgba(0, 0, 0, 0.8); bottom: 0; color: #fff; font-size: 13px; left: 0; padding: 5px 0; position: absolute; text-align: center; text-shadow: 0 -1px 0 #000; }
	
	
	.footnotes, p.footnote { border-top: 1px solid #cdd3d6; 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.crosshairs { background-image: url(../images/crosshairs_app_icon_48x48.png); }
	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; }
	
	div.download { background-color: rgba(38, 38, 38, 0.05); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; margin-bottom: 25px; padding: 18px 15px 8px 15px; width: 170px; }
	div.download img.icon { display: block; margin: 0 auto 15px auto; }
	div.download a { background-color: #4e81b4; border: 1px solid #44709d; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: #fff; display: block; font-size: 16px; height: 30px; line-height: 30px; text-align: center; text-shadow: 0 -1px 0 #000; }
	div.download a:hover { background-color: #44709d; color: #fff; }
	div.download p { line-height: 1.2; margin-bottom: 15px; text-align: center; }
	
	
  /* Screenshots */
  .screenshots { margin-bottom: 20px; overflow: hidden; }
  .screenshots a.zoom { background-color: #fff; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5); box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); display: block; float: left; height: 100px; line-height: 0; margin: 0 15px 15px 0; padding: 5px; }
  .screenshots a img { height: 100%; }
	
  /* Filter bar */
	.filter_bar { height: 30px; line-height: 30px; }
	.filter_bar a { background-color: transparent; border: 0; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: #666; display: inline-block; font-size: 14px; font-weight: normal; margin-right: 2px; padding: 0 10px; }
	.filter_bar a:hover { background-color: #555; color: #fff; }
	.filter_bar .selected { background-color: #333; color: #fff; }
	
  /* Projects */
	#projects { min-height: 450px; }	
	.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 .tooltip { left: -60px; padding: 0 0 10px 0; position: absolute; top: 0; width: 300px; z-index: 1000; }
  .project .tooltip 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; text-shadow: none; }
  .project .tooltip p a { background-color: transparent; color: #fff; }
	.project h3 { margin: 5px 0; }
	.project h3 a { background-color: transparent; text-shadow: none; }
  .project div.arrow { border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(0, 0, 0, 0.8); bottom: 0; height: 0; left: 140px; position: absolute; width: 0; }
	
	
  /* Work */
  .work { border-bottom: 1px solid #cdd3d6; margin-bottom: 20px; overflow: hidden; padding-bottom: 20px; }
  .work h2 { margin-bottom: 10px; }


/*--------------------
  Blog
--------------------*/
	#tumblr_controls { display: none; }
	.section_blog header, .section_blog #wrapper, .section_blog footer { width: 675px; }
		
	.post { margin-bottom: 50px; width: 675px; }
	.post h1 a { color: #333; font-size: 36px; }
	.post header { position: relative; width: 625px; }
	.post header time { color: #666; display: block; font-size: 14px; left: -175px; position: absolute; text-align: right; top: 20px; width: 150px; }
  
  .post .main { float: none; }
  .post .footnote { margin-bottom: 15px; }
  
  .tags { background: url(http://zachwaugh.com/images/tags.png) no-repeat left center; padding-left: 20px; }
  .tags 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: 12px; font-weight: normal; height: 20px; line-height: 20px; padding: 0 6px; }
  .tags a.tag:hover { background-color: #555; color: #fff; }
	
  /* Notes */
	#notes { border-top: 1px solid #cdd3d6; padding: 20px 0 0 0; margin: 25px 0 0 0; }
	ol.notes { margin: 0; }
  ol.notes li.note { font-size: 12px; padding: 0 0 10px 0; }
  ol.notes li.note img.avatar { vertical-align: -4px; margin-right: 5px; width: 16px; height: 16px; }


/*-------------------------------------------
  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; }