/* TYPOGRAPHY */
/* ----------------------------------------- */

/* This helps to identify headings at the initial build stage, so I thought it'd be useful to have it */

h1, h2, h3, h4, h5, h6 { color: #5f5f5f; }
h1, h2, h3, h3 a, h4, h4 a, h5, h6 { margin-bottom: 20px; font-family: Graublau, Arial; }
body { font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif; font-weight: normal; } 

::selection { background-color: #972324; color: #fff; }
::-moz-selection { background-color: #972324; color: #fff; }

a::selection { color: #f3ac00; }
a::-moz-selection { color: #f3ac00; }

pre::selection { color: #f4fcfe; }
pre::-moz-selection { color: #f4fcfe; }

h2 a { font-size: 26px; font-family: Graublau, Arial; }
#content h2 { margin-bottom: 0px; line-height: 34px; }
body.home #content p { margin-bottom: 10px; }

a { color: #22c3eb; }
a:hover { color: #972324; }
a:active { background-color: #fef9e4; border-bottom: 1px solid #fbecac; } 

blockquote { background-color: #f4fcfe; padding: 10px; border-left: 2px solid #cceaf1; }

p, li { color: #5f5f5f; }

p, ul { margin-bottom: 20px; }

p, a, li, input, textarea { font: normal normal normal 16px/28px "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif; font-weight: normal; line-height: 24px; }

h3, h3 a, #sidebar h2 { font-size: 26px; }
#content h3, #content h4 { background-color: #fafafa; margin: 20px -20px 20px; padding: 5px 20px; border-bottom: 1px solid #efefef; border-top: 1px solid #efefef; }
h4, h4 a { font-size: 20px; }

ul li { list-style: disc; }
pre { margin-bottom: 20px; }

input[type="text"] { font-family: Graublau; }



/* Font stack options

	The following represents a list of font stacks, as recommended by Nathan Ford in
	http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

	I've added inverted commas around the relevant family names to ensure compatibility.
	p = balanced for paragraphs or body copy
	t = balanced for headlines or titles

	- - - -

Arial, 'Helvetica Neue', Helvetica, sans-serif - p, t

Baskerville, 'Times New Roman', Times, serif - p
Baskerville, 'Times, Times New Roman', serif - t

Cambria, Georgia, Times, 'Times New Roman', serif - p, t
'Century Gothic', 'Apple Gothic', sans-serif - p, t

Consolas, 'Lucida Console', Monaco, monospace - p, t

'Copperplate Light', 'Copperplate Gothic Light', serif - p, t

'Courier New', Courier, monospace - p, t

'Franklin Gothic Medium', 'Arial Narrow Bold', Arial, sans-serif - p, t

Futura, 'Century Gothic', 'Apple Gothic', sans-serif - p, t

Garamond, 'Hoefler Text', 'Times New Roman', Times, serif - p
Garamond, 'Hoefler Text', Palatino, 'Palatino Linotype', serif - t

Geneva, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif - p
Geneva, Verdana, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif - t

Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif - p
Georgia, Times, 'Times New Roman', serif - t

GillSans, Calibri, Trebuchet, sans-serif - p
GillSans, Trebuchet, Calibri, sans-serif - t

'Helvetica Neue', Arial, Helvetica, sans-serif - p
Helvetica, 'Helvetica Neue', Arial, sans-serif - t

Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif - p, t

'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif - p, t

Palatino, 'Palatino Linotype', Georgia, Times, 'Times New Roman', serif - p
Palatino, 'Palatino Linotype', 'Hoefler Text', Times, 'Times New Roman', serif - t

Tahoma, Geneva, Verdana - p
Tahoma, Verdana, Geneva - t

Times, 'Times New Roman', Georgia, serif - p, t

Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif - p
Trebuchet, Tahoma, Arial, sans-serif - t

Verdana, Geneva, Tahoma, sans-serif - p
Verdana, Tahoma, Geneva, sans-serif - t

*/

/* ----- @font-face goodness (Usable fonts: http://webfonts.info/wiki/index.php?title=Fonts_available_for_%40font-face_embedding) -----*/

/*

– Link colour: 22c3eb
– Text colour: 

*/

@font-face { font-family: Graublau; src: url(../fonts/GraublauWeb.otf) format("opentype") }

#header #navigation a { font-family: Graublau; font-size: 16px; text-transform: uppercase; }
#header #navigation a:hover { color: #fff; background-color: #22c3eb; }

#devbar p.dev-devtext { font-family: Graublau; font-size: 28px; color: #398700; }
#devbar a.livelink, a.adminlink { position: relative; top: -13px; }
#devbar a.livelink img { position: relative; top: 13px; }
#devbar a img:hover, a.smashing-network img:hover { -webkit-box-shadow: none; }

#subscribe p { font-family: Graublau; margin: 0 5px 0 0; width: 145px; text-align: right; line-height: 20px; }
#subscribe p a { font-family: Graublau; font-size: 24px; font-weight: bold; }

h1#logo { margin-bottom: 0px; }
h1#logo a { background: url(../images/logoSprite.png) 0px 0px; text-indent: -9999px; width: 589px; height: 120px; display: block; }
h1#logo a:hover { background: url(../images/logoSprite.png) 0px -120px; -webkit-transform: rotate(-1deg) scale(1.02); -moz-transform: rotate(-1deg) scale(1.02); }
h1#logo a:active { background: url(../images/logoSprite.png) 0px -240px; border-bottom: none; -webkit-transform: rotate(-1deg) scale(1); -moz-transform: rotate(-1deg) scale(1); }
h1#logo p { display: none; } 

#title h2 { padding: 20px 0; font-family: Graublau, Arial; font-size: 36px; }

h3 strong { font-weight: normal; }

#related h3, #authorinfo h3, #comments h3.comment_title { background: none; border: none; margin-top: 0px; }
#authorinfo h3, #comments h3.comment_title { margin-bottom: 10px; }
#authorinfo h3, #comments h3.comment_title, #related h3 { margin-bottom: 0px; }
#authorinfo p { margin-bottom: 0px; }
#related h3 { margin-bottom: -10px; }

#sidebar h2 { padding: 30px 0 0 30px; }
#sidebar #tags h2 { padding: 20px 0 0 30px; }
#sidebar #twitter h2 { padding: 0 0 0 30px; margin-bottom: 0px; }
#sidebar #twitter li, #sidebar #twitter li a { font-size: 14px; }

#sidebar #popular li { font-size: 12px; vertical-align: middle; }
#sidebar #popular li a, #related li a { font-family: Graublau; font-size: 18px; line-height: 14px; text-transform: uppercase; position: relative; }
#sidebar #popular li a { top: 3px; }

#sidebar #tags li { list-style: none; margin-left: 30px; line-height: 20px; }
#sidebar #tags li a { font-size: 14px; }

#comments h3.comment_title { margin: 0; border-bottom: 0px; }
#respond p.moderation { line-height: 16px; }

textarea { font-size: 14px; }

#footer p.copy { font-size: 12px; }

body.postid-5872 #title h2.title { font-size: 34px; }





/* CODE */

/*

Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>

*/

pre code {
  display: block;
  background: #fafafa;
  padding: 10px;
}

pre code,
pre .ruby .subst,
pre .xml .title,
pre .lisp .title {
  color: #5f5f5f;
}

pre .string,
pre .title,
pre .parent,
pre .tag .attribute .value,
pre .rules .value,
pre .rules .value .number,
pre .preprocessor,
pre .ruby .symbol,
pre .instancevar,
pre .aggregate,
pre .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .addition,
pre .flow,
pre .stream,
pre .bash .variable,
pre .apache .tag,
pre .apache .cbracket {
  color: #800;
}

pre .comment,
pre .annotation,
pre .template_comment,
pre .diff .header,
pre .chunk {
  color: #888;
}

pre .number,
pre .date,
pre .regexp,
pre .literal,
pre .smalltalk .symbol,
pre .smalltalk .char,
pre .change {
  color: #080;
}

pre .label,
pre .javadoc,
pre .ruby .string,
pre .decorator,
pre .filter .argument,
pre .localvars,
pre .array,
pre .attr_selector,
pre .pseudo,
pre .pi,
pre .doctype,
pre .deletion,
pre .envvar,
pre .shebang,
pre .apache .sqbracket {
  color: #aa862f;
}

pre .keyword,
pre .id,
pre .phpdoc,
pre .title,
pre .built_in,
pre .aggregate,
pre .smalltalk .class,
pre .winutils,
pre .bash .variable,
pre .apache .tag {
  font-weight: bold;
}