/*
Theme Name: tomphippen.com
Theme URI: http://www.tomphippen.com/
Description: The Theme for my website, by me.
Version: 3.0.0
Author: Tom Phippen
Author URI: http://www.tomphippen.com/
Tags: minimal
*/
/*
	Contents

	HTML Reset
	html tags
	basic classes
	easy clearing
	layout
	typekit fonts
	header
	search
	footer
	maincontent
		post header
		post
		meta data
		short post on homepage
		post page
		comments
		404
		post nav
	
	Media Queries
	- for mobiles/screen orientation
	- for print

*/
/* 
  HTML5 ✰ Boilerplate 
  
  style.css contains a reset, font normalization and some base styles.
  
  credit is left where credit is due.
  much inspiration was taken from these projects:
    yui.yahooapis.com/2.8.1/build/base/base.css
    camendesign.com/design/
    praegnanz.de/weblog/htmlcssjs-kickstart
*/
/* 
  html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
  v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
  html5doctor.com/html-5-reset-stylesheet/
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}                  
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display:block;
}
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#444; text-decoration:none; }
mark { background-color:#ff9; color:#444; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }
/* END RESET CSS */

/* html tags */
html { background: #292b2d; }
body {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, arial, sans-serif;
	font-size: 76%;
	color: #dfdfdf;
	background: #292b2d url(images/bg.png) repeat top left scroll; 
}
h1,h2,h3,h4,h5,h6 {
	margin: 0 0 20px 0;
	font-weight: bold;
	line-height: 22px;
}
h1 {
	font-size: 1.5em;
	color: #dfdfdf;
}
h2 {
	font-size: 1.4em;
	color: #dfdfdf;
}
h3 {
	font-size: 1.3em;
	color: #dfdfdf;
}
h4 {
	font-size: 1.2em;
	color: #dfdfdf;
}
h5 {
	font-size: 1.1em;
	color: #dfdfdf;
}
h6 {
	font-size: 1.0em;
	color: #dfdfdf;
}
p, pre {
	margin: 0 0 20px 0;
	color: #dfdfdf;
	line-height: 20px;
}
pre {
  /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
  white-space: pre; /* CSS2 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
}
blockquote {
	margin: 0 20px 20px;
	padding: 19px 20px 1px;
}
a:link {
	color: #3399dd;
	text-decoration: none;
}
a:visited {
	color: #3399dd;
	text-decoration: none;
}
a:hover { 
	color: #b4ee8d;
	text-decoration: none;
}
a:active {
	color: #3399dd;
	background: transparent;
	text-decoration: none;
}
ul, ol {
	margin: 0 0 20px 0px;
	padding: 0;
}
ul ul { margin-left: 20px; padding-top: 0.5em; }
li {
	margin: 0;
	padding: 0 0 20px 0;
	line-height: 20px;
	color: #dfdfdf;
}
ul.nopadd li, ol.nopadd li { padding: 0; }
/* Remove margins for navigation lists */
nav ul, nav li { margin: 0; }
/* form bits */
form { margin: 0; padding: 0; }
textarea { overflow: auto; } /* thnx ivannikolic! www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */
.ie6 legend, .ie7 legend { margin-left: -7px; }
/* align checkboxes, radios, text inputs with their label
   by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
/* hand cursor on clickable input elements */
label, input[type=button], input[type=submit], button { cursor: pointer; }
 /* webkit browsers add a 2px margin outside the chrome of form elements */  
button, input, select, textarea { margin: 0; }
/* colors for form validity */
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid { 
      border-radius: 1px;
    -moz-box-shadow: 0px 0px 5px red; 
 -webkit-box-shadow: 0px 0px 5px red; 
         box-shadow: 0px 0px 5px red;
}
.no-boxshadow input:invalid, 
.no-boxshadow textarea:invalid { background-color: #f0dddd; }
/* make buttons play nice in IE:    
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {  width: auto; overflow: visible; }

strong { font-weight: bold; color: #e1e1e1; }
img, a img { border: none; }
/* bicubic resizing for non-native sized IMG: 
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }
a:link img, a:visited img, a:hover img, a:active img { border-bottom: none; }
table, tr, th, td { margin: 0; padding: 0; border: none; font-size: 1em; }
table { border: 1px solid #ccc; }
th { font-size: 1.1em; }
th, td { padding: 0.2em; border: 1px solid #ccc; text-align: center; }
acronym, abbr { border-bottom: 1px dotted #333; }
sup { line-height: 0; vertical-align: super; font-size: smaller; } /* hacked in ie6 */
/* basic classes */
.clear { clear: both; }
.clearleft { clear: left; }
.clearright { clear: right; }
.left { float: left; }
.right { float: right; }
.imgleft {
	float: left;
	padding: 0 10px 10px 0;
}
.imgright {
	float: right;
	padding: 0 0 10px 10px;
}
.imgcentre {
	display: block;
	margin: 0 auto;
	padding: 10px 0;
}
#container .push0, .push0 { margin-bottom: 0; }
#container .push1, .push1 { margin-bottom: 20px; }
#container .push2, .push2 { margin-bottom: 40px; }
#container .top0, .top0 { margin-top: 0; }
#container .top1, .top1 { margin-top: 20px; }
#container .top2, .top2 { margin-top: 40px; }
/* Hide for both screenreaders and browsers
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; } 
/* Hide only visually, but have it available for screenreaders 
   www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden  */
.visuallyhidden, #skip { position: absolute !important;    
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px); }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* easy clearing */
/* float clearing for IE6 */
* html .clearfix, 
* html #content, 
* html #search, 
* html footer
{
 height: 1%;
 overflow: visible;
}
/* float clearing for IE7 */
*+html .clearfix, 
*+html #content, 
*+html #search, 
*+html footer
{
 min-height: 1%;
}
/* float clearing for everyone else */
.clearfix:after, 
#content:after, 
#search:after, 
footer:after
{
 clear: both;
 content: ".";
 display: block;
 height: 0;
 visibility: hidden;
}
/* Float Clearing - End */

/* layout */
#container {
	width: 620px;
	margin: 0 auto;
	padding: 20px 0;
}
header {
	margin: 0 0 20px;
}
#content {
	/* easycleared */
	padding-bottom: 20px;
}
#maincontent {
	
}
footer {
	/* easycleared */
}
/** typekit fonts */
header h2, #maincontent header h1
{ font-family: "chaparral-pro-1", "chaparral-pro-2", ChaparralPro-Semibold, "Chaparral Pro Semibold", ChaparralPro, "Chaparral Pro", "Bitstream Charter", Georgia, sans-serif; }


/* header */
header h2 {
	/* typekit */
	margin: 0;
	padding: 0.3em 0 0.15em 0;
	font-size: 2em;
	line-height: 1.25em;
}
header p, header h1 {
	margin: 0;
	padding: 0;
	font-size: 1.2em;
	line-height: 20px;
	font-weight: normal;
}
header h1 a { font-weight: normal; }
header div.posttime { font-size: 1em; }
/* search */
/* search is easycleared */
#search { padding-top: 6px; }
#search p {
	float: left;
	padding-right: 1em;
}
label.hidden, .screen-reader-text {
	display: none;
}
#s {
	float: left;
	width: 158px;
	height: 18px;
	border: 1px solid #919295;
	margin: 0 1em 0 0;
	padding: 0;
}
#searchsubmit {
	float: left;
	width: 60px;
	height: 20px;
}
/* footer */
footer .col1, footer .col2, footer .col3 {
	float: left;
}
footer .col1 {
	width: 200px;
	margin-right: 40px;
}
footer .col2 {
	width: 200px;
	margin-right: 20px;
}
footer .col3 {
	width: 140px;
}

/* maincontent */
#maincontent h3.title {
	margin: 0 0 20px 0;
	padding: 0;
	font-size: 1.2em;
}

/* 	post header */
#maincontent header { margin: 0; }
#maincontent header h1 {
	/* typekit */
	margin: 0;
	padding: 0 0 5px 0;
	font-size: 2em;
	line-height: 1.25em;
	font-weight: bold;
	clear: both; /* just in case */
}
#maincontent header h1 a:link, 
#maincontent header h1 a:visited, 
#maincontent header h1 a:active { color: #3399dd; }
#maincontent header h1 a:hover { color: #b4ee8d; }

#maincontent header div.posttime { font-style: italic; line-height: 1.667em; margin-bottom: 20px; }
#maincontent .posttime span.tags {
	font-style: normal;
	padding-left: 6px;
}
/* 	post */
#maincontent article.post {
	margin-bottom: 40px;
}
#maincontent article.post div.img {
	margin: 0;
	padding: 0 0 20px 0;
}
#maincontent article.post div.img img {
	display: block;
	margin: 0;
	padding: 0;
}
/* 	entry */

/* meta data */
#maincontent p.postmetadata {
	clear: both;
	margin: 20px 0;
}
/* short post on homepage */
#maincontent article.category-short p.postmetadata { display: none; }
#maincontent article.category-short div.posttime { float: left; padding: 0 1em 20px 0; }
#maincontent article.category-short div.posttime span.tags { display: block; width: 120px; padding-left: 0; }
	/* fixes for postpage */
	.postpage #maincontent article.category-short div.posttime { float: none; padding: 0; }
	.postpage #maincontent article.category-short div.posttime span.tags { display: inline; padding-left: 0.5em; }

/* post page */
.postpage #maincontent p.postmetadata {
	display: block;
	clear: both;
	margin: 40px 20px 20px 20px;
}

/* 404 */
#e404search { width: 260px; }
#e404search #btn_search { float: left; }
#e404arch { width: 160px; float: left; }
#e404cat  { width: 300px; float: left; margin-left: 20px; }

/* post nav */
div.navigation { clear: both; line-height: 22px; }
/* for single pages*/
div.snavigation { margin: 80px 0; }
/*
 * Media queries for responsive design
 * These follow after primary styles so they will successfully override. 
 */

@media all and (orientation:portrait) { 
  /* Style adjustments for portrait mode goes here */
  
}

@media all and (orientation:landscape) { 
  /* Style adjustments for landscape mode goes here */
  
}

/* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome)  
   Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {
  
  
  /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you
     j.mp/textsizeadjust 
  html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}

/* 
 * print styles
 * inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/ 
 */
@media print {
  * { background: transparent !important; color: #444 !important; text-shadow: none !important; }
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a:after { content: " (" attr(href) ")"; } 
  abbr:after { content: " (" attr(title) ")"; }
  .ir a:after { content: ""; }  /* Don't show links for images */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ 
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}