/*	Tim Did It

	Date updated: 2/1/2012
	Author: Tim Hopkins
	
	Purple: b983bc
	Orange: E14719
	Blue: 0092BF
	
--------------------------------------------------------------*/

/* Reset
-------------------------------------------------------------- */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;margin:0;padding:0;}
table{border-collapse:separate;border-spacing:0;margin-bottom:1.4em;}
caption,th,td{text-align:left;font-weight:400;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:;}
a img{border:none;}

/* Micro Clearfix - http://nicolasgallagher.com/micro-clearfix-hack/ */
.cf:before, .cf:after { content:""; display:table; }
.cf:after { clear:both; }
.cf { zoom:1; } /* For IE 6/7 (trigger hasLayout) */


/* Grid = 1220px max-width / 65px columns / 40px margins
-------------------------------------------------------------- */

.block {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  overflow: hidden; }

.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11 {
  margin-right: 3.2786885%;
  /* 40px/1220px */
  float: left;
  min-height: 1px;
  overflow: hidden; }

.col1 {
  width: 5.3278689%;
  /* 65px/1220px */ }

.col2 {
  width: 13.9344262%;
  /* 170px/1220px */ }

.col3 {
  width: 22.5409836%;
  /* 275px/1220px */ }

.col4 {
  width: 31.147541%;
  /* 380px/1220px */ }

.col5 {
  width: 39.7540984%;
  /* 485px/1220px */ }

.col6 {
  width: 48.3606557%;
  /* 590px/1220px */ }

.col7 {
  width: 56.9672131%;
  /* 695px/1220px */ }

.col8 {
  width: 65.5737705%;
  /* 800px/1220px */ }

.col9 {
  width: 74.1803279%;
  /* 905px/1220px */ }

.col10 {
  width: 82.7868852%;
  /* 1010px/1220px */ }

.col11 {
  width: 91.3934426%;
  /* 1115px/1220px */ }

.col12 {
  width: 100%;
  /* 1220px */
  float: left;
  overflow: hidden; }

.end {
  margin-right: 0;
  padding-right: 0; }

.mar1-left {
  margin-left: 8.6065574%; }

.mar2-left {
  margin-left: 17.2131148%; }

.mar3-left {
  margin-left: 25.81967245%; }

img, object, embed, video, iframe {
  max-width: 100%; }

img {
  height: auto; }
  
#content {
	margin: 30px auto;
	padding: 0 5%;
	overflow: hidden; }

/* Layout
-------------------------------------------------------------- */
html { overflow-y: auto; }

#header {
	clear:both;
	overflow: hidden;
}
#header h1 {
	margin: 2.5% 0;
}


/* Typography
-------------------------------------------------------------- */

body { 
	font-size: 100%;
 	line-height: 2;
	color: #111; 
	background: #fff url(/img/groovepaper.png);
	font-family: 'Gentium Basic', 'Gentium Book Basic', Georgia, serif;
	line-height: 1.4;
	border-top: 4px solid #000;
}

p	{ margin: 0 0 1.5em; }
strong	{ font-weight: bold; }
em	{ font-style: italic; }



/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { 
	font-weight: normal; 
	font-family: 'Francois One', Arial, sans-serif; 
	color: #000; 
	line-height: 1; 
	margin-bottom: 0.25em; 
	-webkit-transition: all .3s ease-in;
	-moz-transition: all .3s ease-in;
	-o-transition: all .3s ease-in;
	transition: all .3s ease-in; }

h1 { font-size: 3em;}
h2 { font-size: 2em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1em; }
h6 { font-size: 1em; }


h1 img, h2 img, h3 img, 
h4 img, h5 img, h6 img {
  margin:0;
}

/* Links
-------------------------------------------------------------- */

a, a:visited	       	{ color: #e14719; text-decoration: none; }
a:focus, 
a:hover, a:visted:hover 	{ background: #0092BF color: #fff; }


/* Lists
-------------------------------------------------------------- */

li ul, 
li ol       { margin:0 1.5em; }
ul, ol      { margin: 0 0.5em 1.5em 1.5em; }

ul          { list-style-type: circle; }
ul + li		{}

ol          { list-style-type: decimal; }
ol + li		{}

dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}


/* Other Elements
-------------------------------------------------------------- */

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
dfn         { font-style: italic;font-weight: bold; background: #ffc; }
sup, sub    { line-height: 0; }

abbr, 
acronym     { border-bottom: 1px dotted #666; }
address     { margin: 0 0 1.5em; font-style: italic; }
del         { color:#666; }

pre,code    { margin: 1.5em 0; white-space: pre; }
tt          { display: block; margin: 1.5em 0; line-height: 1.5; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }

/* Page-Specific - based on the <body> class
-------------------------------------------------------------- */


/* Site Header + Navigation */

header {
	margin-top: 30px;
	padding-bottom: 10px;
}

header h1 {
	color: #000; 
	text-align: center;
	text-transform: uppercase;
	text-shadow: 1px 1px 1px #ccc;
	margin-bottom: 8px; 
	padding-bottom: 10px;
	font-weight: normal;}
	
	
header h1 a:link, header h1 a:visited {
	color: #161616;
	text-shadow: 3px 3px 3px #ccc;
	text-decoration: none;
	border: none;
	-webkit-transform: scale(1.1);
	-webkit-transition: all .2s ease-in-out;
}

header h1 a:hover, header h1 a:active {
	text-decoration: none;
	border: none;
	text-shadow: 1px 1px 0px #555, 2px 2px 0px #fff, 3px 3px 0px #E14719;
	-webkit-transform: scale(1.1);
}

header p {
	color: #111; 
	font-size: 0.80em;
	text-align: center; 
}	


nav#topnav {
	text-align: center; 
	font-size: 0.875em; /*  14px/16px  */
	font-family: Francois One, Arial, sans-serif; 
	text-transform: uppercase;
	height: 1.75em; }
	
nav#topnav ul {}

nav#topnav ul li {
	display: inline;
	padding: 3px 5px;
}

nav#topnav a {
	margin: 15px;
	color: #E14719;
	padding: 3px 5px;
}

nav#topnav a:hover, nav#topnav a:active {
	color: #fff;
	background: #e14719;
}


/* Article Post */

.post {
	margin-bottom: 20px;
}

.post header {
	padding: 10px 20px 5px;
	margin: 30px 10px 10px;
}

.post header p {
	color: #777;
	font-size: 0.6875em; /* 0.75em= 12px/16px */
	font-family: Francois One, Helvetica, sans-serif;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1px;
}

h2 {
	color: #222;
	text-align: center;
	padding-bottom: 30px;
	margin-bottom: 10px;}

h2 a, h2 a:visited {
	text-decoration: none;
	color: #0092BF;
	padding; 2px 3px;
}	

h2 a:hover {
	color: #FFF;
	background: #0092BF;
}

.post a:hover {
	opacity: 0.8;
}


.post p, .post ul, .post ol, .post blockquote, .text p, .text ul, .text ol, .quote, .quote blockquote .quote-inner {
	padding-left: 17.2131148%;
	padding-right: 17.2131148%;
}

.note_left, .note_right {
	width: 13.9344262%;
	/* 170px/1220px */
	font-size: 0.85em;
	line-height: 1.2;
	color: #777;
}

.note_left {
	padding-right: 3.2786885%;
	float: left;
	margin-left: 0px;
}

.note_right {
	padding-left: 3.2786885%;
	float: right;
	margin-right: 0px;
}

div.note p {
	padding: 0;
	margin: 0;
}

/* Quotes */

.quote {margin-top: 30px;}

.quote-inner {
	color: #fff;
	background: #0092BF url(http://timothylukehopkins.com/img/quote.png) no-repeat 15px 15px;
	margin-left: 5px;
	font-size: 30px;
	line-height: 36px;
	padding: 10px;
	margin-bottom: 20px;
}

.quote-inner blockquote {
	color: #fff;
	margin: 5px 0;
	padding: 0 8%;
}

.quote-inner p {
	padding: 1% 5%;
	font-size: 0.75em;
}

.quote-inner a:link, .quote-inner a:visited {
	color: #ccc; 
	border: none; }
	
.quote-inner a:hover, quote-inner a:active { 
	color: #FFF; 
	border-bottom: 1px dotted #E14719; }

.words, .source { padding-left: 55px; }
.quote-inner a:link, .quote-inner a:visted {color: #000;}
.quote-inner a:hover { border-bottom: 1px dotted #e14719; text-decoration: none; }

.previous-next { text-align: center; font-size: 16px;}
.previous-next a:link, .previous-next a:visited { padding: 10px; -webkit-border-radius: 5px; margin: 5px; background: none; color: #000; }
.previous-next a:hover { border: none; color: #0092BF;}



.getsocial a {
	padding-bottom: 20px;
	background: transparent;
	text-align: center;
	font-family: Francois One, Arial, sans-serif;
	font-weight: normal;
	font-size: 14px;
	text-transform: uppercase;
	padding: 10px;
	color: #e14719;
}

#info {
	padding-top: 30px;
	padding-bottom: 30px;
	background: #000;
	background: rgba(0, 0, 0, 0.85) url(/img/darkstripes.png);
	color: #fff;
	margin-bottom: 30px;
	font-size: 14px;
}

#info h4 {
	color: #fff;
	padding-bottom: 15px;
	text-transform: uppercase;
}

#info a:link, #info a:visited {
	color: #e14719;
}



#info ul {
	list-style-type: none;
	padding: 0;
	margin: 0; }

#info span  {
	display: block;
	clear: both;
}	


.previous-next {
	text-align: center;
	color: #333;
}

.previous-next a:link, .previous-next a:visited {
	color: #0092BF;
	padding: 3px 5px;
}

.previous-next a:hover {
	opacity: 0.75;
}

.previous, .next {
	font-family: Francois One, sans-serif;
	color: #333;
}

.previous {
	margin-right: 40px;}

a.dsq-comment-count {
	color: #0092BF;
	text-transform: uppercase;
	font-family: Francois One, sans-serif;
}

.dsq-comment-count a:link, .dsq-comment-count a:visited {
	color: #0092BF;
	font-family: Francois One, sans-serif;
}

.dsq-comment-count a:hover {
	color: #333;
}

/*blockquote { font-size:18px; line-height:24px; padding:0 0 20px 0; border-top:1px solid #999; border-bottom:1px solid #999 }*/
blockquote p { padding:0 2%; color:#8ca0b0; font-style: italic; }

cite { font-size:12px; line-height:20px;  color:#369; padding:0 0 0 60px }
input { margin:0 }
abbr { border:none; outline:none }
code { color:#000; background:#ccc }


.caption, .was-reblogged {
	color: #555;
	font-style: italic;
}

.caption {
	text-align: center;
}

.photo img, .html_photoset, .photo, .photo img a, .audio { text-align: center; }

#getsocial {
	text-align: center;
	margin-bottom: 30px;
	margin-top: 0px;
	padding-bottom: 5px;
	font-size: 12px;
	line-height: 16px;
	font-family: Francois One, sans-serif;
} 

#getsocial a:link, #getsocial a:visited {
	text-align: center;
	margin: 15px 7px;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	color: #fff;
	background-color: #e14719;
}

#getsocial a:hover {
	border: none;
	opacity: 0.75;
}

footer {
	font-size: 85%;
	text-align: center;
	color: #444;
}

footer a, footer a:visited {
	color: #0092BF; }

footer a:hover, footer a:active {
	opacity: 0.8;}
	
/* @media Queries -------------------------------------------- */

/* @iPhone < 480px - One column fluid.
-------------------------------------------------------------- */
@media screen and (max-width:480px) {
	header h1 a { font-size: 90%; }
}

/* @1-Col < 640px - One column fluid.
-------------------------------------------------------------- */
@media screen and (max-width: 640px) {
	html{
		-webkit-text-size-adjust:none;
		-ms-text-size-adjust:none
	}
	
	body{
		font-size: 82.5%;
	}
	
	#content {
		margin: 30px auto;
		padding: 0 5%;
		overflow: hidden; }


  body, .block, .container {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0; }

  .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .note_left, .note_right, .quote, .quote-inner {
    width: auto;
    float: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0; }

	.content-pad-left,
	.content-pad-right {
		margin-left:0;
		margin-right:0;
	}
	
	header {
		padding-bottom: 15px;
	}
	
	#post p, #post ul, #post ol.post p, .post ul, .post ol, .post blockquote, .text p, .text ul, .text ol, .quote blockquote .quote-inner, #info {
		padding: 0 2%; }
	.quote-inner, .blockquote {
		background: #0092BF;
		background-image: none;		}
		
	#info {
		padding: 10px 2%; }
		
	#post img {
		margin: 0;
		padding; 8px 1%;
		clear: both;
	}
	
	.note_left, .note_right {
		display: none; 
		padding: 1%;}
	
	blockquote {
		padding: 0 2%; }
}