/*
Theme Name: Typophile White
Theme URI: http://intenseminimalism.com
Description: A clean, minimalist and stylish theme.
Version: 10.3.9
Author: Davide 'Folletto' Casali
Author URI: http://intenseminimalism.com
****************************************************************************************************
* Originally developed for intenseminimalism.com
* Copyright (C) 2009-2010 by Davide 'Folletto' Casali <folletto AT gmail DOT com>
*
* I've used this theme as a testbed for:
*  - HTML5: developed as cutting edge and then maximised compatibility.
*  - 960.gs: used and then merged inside the CSS (to maximize semantics).
*  - Accessibility: both screen and keyboard "skips".
*  - Microformats: not much in the end, just vcard.
*/

/****************************************************************************************************
 * General
 */
body {
	font-family: Helvetica, Arial, Tahoma, sans-serif;
	font-size: 14px;
	margin: 0;
	padding: 0;
	background: #ffffff;
}

a {
	color: #098eb7;
	text-decoration: none;
}

a:hover {
	color: #005a8c;
}

img { border: 0; }
form { margin: 0; }

/****************************************************************************************************
 * Layout
 */
section, article, aside, nav, header, footer { display: block; } time { display: inline; } /* HTML5 normalization */

section, .section {
  width: 918px; /* 960.gs - grid: 918px => columns:18 * (col-width:39px + gutter:12px) */
  margin: 0 auto; /* centering [IE6+] */
  
  position: relative;
}

#content {
  width: 612px;
  padding: 0 306px 0 0;
  margin: 0 auto; /* centering [IE6+] */
  
  position: relative;
}
* html #content { overflow: hidden; } /* [IEfix:6] avoid wrong alignment with 900px images */
*+html #content { overflow: hidden; } /* [IEfix:7] avoid scrollbar with 900px images */

/****************************************************************************************************
 * Typographic
 */
h1, h2, h3, h4, h5, h6 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: normal;
  margin: 0;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: #000000;
}

.article h2, .article h3, .article h4, .article h5, .article h6 {
  color: #000000; /*#098eb7;*/
  clear: both;
}

h2 {
  font-size: 24px;
  margin: 3em 0 1em;
}

.article h3 {
  font-size: 18px;
  margin: 1.5em 0 0.2em;
}

.article p,
.article ol,
.articleul,
.article li,
.article blockquote,
.article div {
  font-size: 14px;
  line-height: 20px;
}

ol {
  margin: .5em 12px;
  padding: 0 20px;
}

ul {
  list-style: circle;
  margin: .5em 12px;
  padding: 0 20px;
}

ul ul {
  margin: 0 12px;
}

pre {
  background: #f5f5f5;
  
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  
  font-family: Monaco, "Andale Mono", Courier, fixed, monospace;
  font-size: 1em;
  overflow: auto;
  
  width: 100%;
  padding: 6px;
}

blockquote {
  margin: 6px 12px;
  border-left: 1px solid #cccccc;
  padding: 0 12px;
}

#content .article .box.hilight {
  color: #666666;
  
  float: right;
  
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 1.4em;
  line-height: 30px;
  
  margin: 5px 0 5px 12px;
  border-right: 1px solid #cccccc;
  padding: 7px 10px 7px 0;
  
  text-align: right;
  
  width: 181px;
}

#content .article .box.side {
  border-top: 1px dotted #cccccc;
  border-bottom: 1px dotted #cccccc;
  
  color: #666666;
  
  font-style: italic;
  
  font-size: 12px;
  line-height: 20px;
  
  padding: 19px 20px;
  position: absolute;
  
  left: 612px;
  width: 274px; /* 294 - 20 */
}


#content .article img {
  /* nothing to allow white-on-white tricks */
}

.black {
  background: #323232;
  color: #ffffff;
  
  padding: 5px 5px 3px;
}

/****************************************************************************************************
 * Top
 */
#top {
  background: #333333;
  color: #ffffff;
  
  font-weight: normal;
  font-style: italic;
  
  line-height: 20px;
  
  height: 23px;
}

#top h1 {
  font-size: 12px;
  letter-spacing: +1px;
  line-height: 22px;
}

/****************************************************************************************************
 * Search
 */
#search {
  background: #098eb7;
  color: #ffffff;
  
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 16px;
  font-weight: normal;
  font-style: italic;
}

#search .toggle {
  background: transparent url(gfx/search.gif) no-repeat 5px 2px;
  
  display: block;
  position: absolute;
  right: 0;
  top: -23px;
  
  text-indent: -666em;
  
  width: 30px;
  height: 23px;
  
  z-index: 2px;
}
#search .toggle:active {
  outline: none; /* removes click outline */
}

#search .toggle:hover, #search .toggle.lit {
  background: #098eb7 url(gfx/search.gif) no-repeat 5px -21px;
}

#search .dashboard {
  display: none;
  padding: 60px 0;
}

/****** Box */
#search .center {
  width: 350px;
  margin: 0 auto;
}

#search h1 {
  display: none;
}

#search label {
  font-size: 19px;
  margin: 0 7px 0 0;
  color: #add8e5;
}
*+html #search label { overflow: hidden; } /* [IEfix:7] text cut */

#search #s {
  background: #098eb7;
  border: 0;
  border-bottom: 1px solid #ffffff;
  
  color: #ffffff;
  
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 19px;
  font-style: italic;
  
  padding: 0;
  width: 200px;
}
/* HTML5 type="search" bug on Safari4 & Chrome needs hack to avoid white-on-white text */
@media screen and (-webkit-min-device-pixel-ratio:0) { #search #s { color: #000000; } }

/****** Lists */
#search ul {
  font-size: 16px;
  /*letter-spacing: 0.5px;*/
  
  list-style: none;
  
  padding: 0;
  margin: 60px 0 0;
}

#search ul li {
  position: relative;
  height: 30px;
  color: #add8e5;
}

#search ul ul {
  position: absolute;
  
  height: 20px;
  overflow: hidden;
  
  margin: 0;
  left: 225px;
  top: 0;
}

#search ul li li {
  display: inline;
}
*+html #search ul ul { width: 100%; } /* [IEfix:7] text cut */

#search ul label {
  color: #333333;
  display: block;
  font-size: 16px;
  
  width: 210px;
  text-align: right;
}

#search ul li li a {
  padding: 0 5px;
  text-transform: lowercase;
}

#search a {
  color: #ffffff;
}

#search a:hover {
  text-decoration: underline;
}

/****************************************************************************************************
 * Header
 */
#header {
  margin: 90px 0;
}

#header h1 a {
  background: transparent url(gfx/logo-intense-minimalism.png) no-repeat;
  
  overflow: hidden; /* removes click outline */
  
  position: absolute;
  right: 0;
  
  text-indent: -666em;
  
  width: 300px;
  height: 54px;
}
* html #header h1 a { /* [IEfix:6] thanks also for the absolute path -.- */
  background-image: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', src='/wp-content/themes/TypophileWhite/gfx/logo-intense-minimalism.png');
}

#header h2 {
  display: none;
  color: #cccccc;
  
  position: absolute;
  right: 5px;
  top: 52px;
  
  font-family: Helvetica, Arial, Tahoma, sans-serif;
  font-size: 10px;
  font-weight: normal;
  font-style: normal;
  
  margin-top: -14px;
  
  text-align: right;
  text-transform: uppercase;
}

/****************************************************************************************************
 * Nav
 */
#nav {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 17px;
  font-weight: normal;
  font-style: italic;
  
  padding: 4px 6px;
}

#nav h1 {
  display: none;
}

#nav a {
  color: #333333;
  text-transform: lowercase;
}

#nav a:hover, #nav a.lit {
  color: #098eb7;
}

#nav ul {
  border-left: 1px solid #e2e2e2;
  
  list-style: none;
  padding: 0;
  margin: 0;
  
  height: 44px;
}

#nav ul li {
  float: left;
  
  margin: 0;
  padding: 0;
}

#nav ul li a {
  display: block;
  
  border-right: 1px solid #e2e2e2;
  padding: 10px 0;
  
  text-align: center;
  
  width: 98px;
  height: 26px;
}

/****************************************************************************************************
 * Article & Trace
 */
#content h1 {
  display: none;
}

#content div h1,
#content article h1 {
  display: block;
}

.article .meta,
.trace .meta {
  color: #333333;
  
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 14px;
  font-weight: normal;
  font-style: italic;
}
* html .article .meta, * html .trace .meta { height: 1%; } /* [IEfix:6] avoid disappearing image */

.article .fold {
  font-size: 12px;
  font-style: italic;
}

/****************************************************************************************************
 * Article
 */
.article {
  margin: 0 6px 90px;
  
  position: relative;
}

.article h1 {
  font-size: 30px;
  margin: 0 0 20px;
}

.article p {
  
}

.article p.excerpt {
  color: #aaaaaa;
  margin: 14px 0 30px;
}

.article img.alignleft {
  float: left;
  margin: 0 6px 0 0;
}

.article img.alignright {
  float: right;
  margin: 0 0 0 6px;
}

.article img.aligncenter {
  display: block;
  margin: 0 auto;
}

.article .shadow {
  -moz-box-shadow: 0 4px 10px #cccccc;
  -webkit-box-shadow: 0 4px 10px #cccccc;
  box-shadow: 0 4px 10px #cccccc;
}

/****************************************************************************************************
 * Trace
 */
.trace {
  margin: 0 6px;
}

.trace h1 {
  font-size: 18px;
  margin: 0 0 4px;
}

.trace .fold {
  font-size: 12px;
}

#traces {
  margin: 0 0 90px;
}
*+html #traces { width: 100%; margin: 0; } /* [IEfix:7] too much white without this. WTF? */

#traces .trace {
  float: left;
  margin: 0 6px 0;
  width: 141px;
}

.list .trace {
  margin: 0 6px 90px;
}

/****************************************************************************************************
 * Months
 */
#months {
  clear: both;
  margin: 0 6px 0;
  padding: 90px 0 0;
}

#months ul {
  list-style: none;
  padding: 0;
  margin: 4px 0 50px;
}
* html #months ul { height: 1%; } /* [IEfix:6] avoid image disappearing */

#months h1 {
  font-size: 15px;
  margin: 3px 0;
}

#months h1 a {
  display: block;
  padding: 0 0 0 18px;
}

#months .black {
  font-size: 11px;
  text-transform: uppercase;
}

#months .tracescount {
  font-size: 11px;
  margin: 0 0 0 20px;
}

/****************************************************************************************************
 * Icons
 */
.ico-article {
  background: transparent url(gfx/icon-article.gif) no-repeat -20px 1px;
  padding: 0 0 0 12px;
}
a.ico-article:hover { background-position: 0px -17px; }

h1 .ico-article, h3 .ico-article { background-position: -20px 4px; }
h1 a.ico-article:hover, h3 a.ico-article:hover { background-position: 0px -14px; }

.ico-trace {
  background: transparent url(gfx/icon-trace.gif) no-repeat -20px 2px;
  padding: 0 0 0 12px;
}
a.ico-trace:hover { background-position: 0px -16px; }

.meta.ico-article, .meta.ico-trace { background-position: -20px 4px; }
a .meta.ico-article:hover, a .meta.ico-trace:hover { background-position: 0px -14px; }

.fold .ico-article, .fold .ico-trace { background-position: -20px 1px; }
a .fold .ico-article:hover, a .fold .ico-trace:hover { background-position: 0px -17px; }


/****************************************************************************************************
 * Search
 */
.searchresults.hgroup {
  margin: 0 6px 90px;
}

.searchresults.hgroup small {
  color: #333333;
  font-size: 12px;
  text-transform: uppercase;
}

.searchresults.hgroup h1 {
  
}

.searchresults.hgroup h1 em {
  color: #098eb7;
  padding: 0 4px 0 0;
}

/****************************************************************************************************
 * Related posts
 */
#related {
  margin: 0 6px 90px;
  line-height: 16px;
}

#related .black {
  font-size: 11px;
  text-transform: uppercase;
}

#related .tray {
  border-bottom: 1px solid #333333;
  padding: 1px 0;
}

#related ul {
  list-style: none;
  padding: 0;
  margin: 4px 0;
}

#related ul li a {
  display: block;
  margin: 8px 0;
  padding: 0 0 0 18px;
}
* html #related ul li a { height: 1%; } /* [IEfix:6] disappearing icon */

#related .categories {
  font-size: 11px;
  float: right;
  
  padding: 2px 0 0;
  text-transform: uppercase;
}
* html #related .categories { margin-top: -20px; } /* [IEfix:6] disaligned */
*+html #related .categories { margin-top: -20px; } /* [IEfix:6] disaligned */

#related .categories a {
  color: #333333;
}

#related .categories a.lit {
  color: #098eb7;
}

#related .categories a.lit:hover {
  color: #005a8c;
}


/****************************************************************************************************
 * Comments
 */
#comments {
  margin: 0 6px;
}

.comment {
  color: #333333;
  clear: both;
  
  margin: 60px 0;
  
  position: relative;
}

.comment.author .time a {
  color: #098eb7;
}

.comment.author h2 a {
  color: #666666;
}

.comment h2 {
  font-size: 22px;
}

.comment h2 a {
	color: #098eb7;
	text-decoration: none;
}

.comment h2 a:hover {
	color: #005a8c;
}

.comment .meta {
  color: #cccccc;
  
  float: right;
  
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: normal;
  font-size: 13px;
  
  padding: 10px 0 0;
}
.comment .meta a {
  color: #cccccc;
}
.comment .meta a:hover {
  text-decoration: underline;
}

.comment p {
  font-size: 14px;
  line-height: 20px;
  margin: 4px 0 1em;
}

.comment .notice {
  background: #323232;
  color: #ffffff;
  
  padding: 5px 5px 3px;
}

/********** Pingback */
.comment.pingback {
  
}

.comment.pingback h2,
.comment.pingback p {
  padding: 0 0 0 20px;
}

.comment.pingback .pushout {
  position: absolute;
  top: 0;
  left: 0;
}

.comment.pingback h2 {
  font-size: 16px;
}

.comment.pingback .meta {
  padding: 3px 0 0;
}

.comment.pingback p {
  color: #888888;
  font-size: 12px;
  line-height: 16px;
}

/****************************************************************************************************
 * Comment Form
 */
#comment-form {
  margin: 90px 6px;
}

#comment-form #comment {
  width: 600px;
}

#comment-form p {
  margin: 6px 0;
  padding: 0;
}

#comment-form label {
  color: #666666;
  
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: normal;
  font-size: 18px;
  
  text-transform: lowercase;
}

#comment-form input {
  width: 190px;
}

#comment-form input.button {
  font-size: 17px;
  width: 300px;
}

#comment-form p small {
  color: #cccccc;
  font-size: 10px;
}

#comment-form .signature {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: normal;
  font-size: 16px;
  
  text-align: right;
  
  width: 600px;
}

#comment-form .allowedtags {
  color: #cccccc;
  font-size: 10px;
}

/****************************************************************************************************
 * Forms
 */
input, textarea {
  background: #ffffff url(gfx/input-filler-top.gif) repeat-x top;
  border: 1px solid #cccccc;
  
  font-family: Helvetica, Arial, Tahoma, sans-serif;
	font-size: 14px;
  
  padding: 3px 2px;
}

label {
  display: block;
  float: left;
  width: 100px;
}

button, .button {
  background: #098eb7;
  border: 0;
  color: #ffffff;
  
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: normal;
  font-size: 16px;
	
	text-transform: lowercase;
	
  padding: 10px 20px;
}

fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

/****************************************************************************************************
 * Paginator
 */
.paginator {
  color: #cccccc;
  
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: normal;
  font-size: 16px;
  
  height: 20px;
  margin: 0 6px 90px;
}

.paginator .next,
.paginator .prev {
  display: block;
  
  padding: 0 6px;
  
  text-transform: lowercase;
  
  width: 288px;
}

.paginator .next a span,
.paginator .prev a span {
  color: #666666;
  font-size: 18px;
}

.paginator .next {
  
}

.paginator .prev {
  
}

/****************************************************************************************************
 * Others: Messages & Edit Link
 */
.notice {
  margin: 0 6px 190px;
}

.editlink {
  font-size: 8px;
  font-style: normal;
  
  position: absolute;
  bottom: -12px;
  right: -10px;
  
  text-transform: uppercase;
}

.editlink a {
  color: #cccccc;
  display: block;
  padding: 4px;
}

.editlink a:hover {
  background: #333333;
  color: #ffffff;
  padding: 4px;
}

/****************************************************************************************************
 * Footer
 */
#footer {
  background: #333333;
  color: #ffffff;
  clear: both;
  
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 17px;
  font-weight: normal;
  font-style: italic;
  
  height: 50px;
  padding: 40px 0;
}

#footer h1 {
  display: none;
}

#footer address {
  margin: 14px 6px 0;
}
#footer address small {
  color: #666666;
  font-size: 17px;
}
#footer address .email {
  color: #ffffff;
}
#footer address .email small {
  color: #4c8eb4;
  font-size: 14px;
}

#footer img {
  position: absolute;
  right: 6px;
  top: -1em;
}
* html #footer img { top: 0; } /* [IEfix:6] alignment */
*+html #footer img { top: 0; } /* [IEfix:7] alignment */

#footer .n,
#footer .fn {
  display: none;
}

/****************************************************************************************************
 * Accessibility Support (Screen Readers & Keyboard Navigation)
 * http://www.webaim.org/techniques/css/invisiblecontent/
 */
#skip a {position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
#skip a:focus {position:absolute;left:0;top:0;width:auto;height:auto;}
#skip a:focus {/*Skinning*/color:#ffffff;background:#333333;padding:16px 24px;font-size: 22px;z-index:100;}