/*
Theme Name: Griddy
Theme URI: http://adavidchan.com
Description: Making by breaking.
Version: 1.0
Author: David Chan
Author URI: http://adavidchan.com/
Tags: grid


*/



/* Begin Typography & Colors */
body {
	font-size: 62.5%; /* Resets 1em to 10px */
	font-family: Arial;
	background-color: #fff;
	color: #333;
	text-align: center;
}

/* anchors */

a {
	color:#333;
	text-decoration:none;
	outline:none;
}
a:hover {
/*.catgriditem .posttitlehover {*/
	color:#fff;
	background-color:#333;
	border-top: 0px;
}
a, 
a:hover {
	text-transform: uppercase;
}
a.fordiv,
a.fordiv:hover,
a.nostyle,
a.nostyle:hover {
	background-color:inherit !important;
	color:inherit !important;
	text-transform: none;
}

.ac {
	position: relative;
}
.ac .recentpicgrid {
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px; 
	border: 5px solid #dedede !important;
	border-bottom: 30px solid #dedede !important;
	
	margin-top:-4px !important;
	margin-left:1px !important;	
	margin-right: 1px !important;
	margin-bottom: -30px !important;
}
.ac .relatedpost {
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px; 
	border: 5px solid #dedede !important;
	border-bottom: 20px solid #dedede !important;
	
	border-left: 6px solid #dedede !important;
	border-right: 6px solid #dedede !important;
	
	margin-top:-4px !important;
	margin-left:-5px !important;	
	margin-right: -5px !important;
	margin-bottom: 11px !important;
}

.entry .thecontent a,
.entry .thecontent a:hover,
.commentsarea a,
.commentsarea a:hover,
a.standard,
a.standard:hover {
	text-decoration: underline;
	/*color: #009e76;*/
	/*color: #28CBEB;*/
	text-transform: none;
}
.entry .thecontent a:hover,
.commentsarea a:hover,
a.standard:hover {
	text-decoration: none;
	color: #fff;
	background-color: #333;
}

/* lists */
html>body .entry ul {
	margin-left: 0px;
	padding: 0 0 0 30px;
	list-style: none;
	padding-left: 10px;
	text-indent: -10px;
	}

html>body .entry li {
	margin: 7px 0 8px 10px;
	}

.entry ul li:before, #sidebar ul ul li:before {
	content: "\00BB \0020";
	}

.entry ol {
	padding: 0 0 0 35px;
	margin: 0;
	}

.entry ol li {
	margin: 0;
	padding: 0;
	}

/* Begin Various Tags & Classes */
acronym, abbr, span.caps {
	cursor: help;
	}

acronym, abbr {
	border-bottom: 1px dashed #999;
	}

blockquote {
	margin: 15px 30px 0 10px;
	padding-left: 20px;
	border-left: 5px solid #ddd;
	}

blockquote cite {
	margin: 5px 0 0;
	display: block;
	}

.center {
	text-align: center;
	}

hr {
	display: none;
	}

a img {
	border: none;
	}

/* general */
div.highlight {
	background-color: #fcffb7;
}

h1,h2,h3,h4 {
/*font-family:Georgia;*/
font-family:arial;
font-size:23px;
font-style:normal;
font-weight:bold;
letter-spacing:-1px;
line-height:21px;
margin:0 0 20px;
padding:0;
/*text-transform:lowercase;*/
}

strong {
	font-weight:bold;
}
div.center {
	text-align: center !important;
}

.pipe-light {
	color:#CCC;
}
.pipe-dark {
	color:#999;
}

/* general input */
input._button {
	font-family: arial;
	border: 1px #333 solid;
	background-color: #fff;
	color: #333;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: bold;
	letter-spacing:-1px;
	text-transform: lowercase;
}
input._text {
	border: 1px #333 solid;
	background-color: #fff;
	color: #333;
}

/* grids */
.container div {
	/*background-color:#fff; */
	text-align:left;
}
.container > div { 
	/* inherit left and right margins from 960 */
	margin-top:5px; 
	margin-bottom:10px; 
}

._recentgrid {
	margin-bottom: 20px;
}

.catgriditem div {
	padding:0;margin:0;
}
.catgriditem .posttitle {
	border-top: 1px #dedede solid;
	word-spacing: 0.1em;
	line-height:13px;
	margin-bottom:3px;
}
.catgriditem .newlabel {
	color:red;
	margin-left:5px;
}
.recentpicgrid, 
.relatedpost {
	overflow: hidden;
}
.recentpicgrid {
	height:123px !important;
	width: 228px !important;
	border: 1px #dedede solid;
}
.recentpicgrid div.title,
.relatedpost div.title {
	font-size:46px;
	font-weight:bold;
	line-height:42px;
	color:#fff;
	background-color:#333;
	padding:0 0 0 2px;
}
.recentpicgrid div.postdate,
.relatedpost div.postdate {
	background-color:transparent;
	overflow:hidden;
	position:relative;
	top:-12px;
	height: 12px;
	text-align:right;
}
.recentpicgrid div.postdate span,
.relatedpost div.postdate span {
	background-color:#fff;
	color:#333;
	padding-left:2px;
}
div.relatedposts div.relatedpost {
	border:1px #dedede solid;
}

/* header */
#header {
	text-align:left;
	overflow:hidden;
	height:50px;
}
#header ._title h1,
#header ._title ._description {
	float:left;
}
#header ._title ._description {
	/*margin:0 0 0 5px;*/
	position:relative;
	left:5px;
	padding:0;
}
#header ._nav {
	text-align:right;
}
#header ._nav span.pipe-light {
	padding: 0 5px;
}

/* single page */
div.singletitle {
	margin: 0 0 20px;
}
div.singletitle h2 {
	margin:0 0 6px;
}
div.singletitle .date {
	border-top: 1px #dedede solid;
}

.entry .thecontent,
.commenttext {
	font-family: "Lucida Sans","sans-serif",Arial;
	background-color: #fff;
	color: #333;
	text-decoration: none;
	word-spacing: 0.2em;
	letter-spacing: 0;
	line-height: 1.8em;
	font-size: 1.2em;
}
.entry .thecontent p {
	margin: 14px 0;
}
.entry .postmetadata {
	margin: 10px 0;
	padding: 4px;
	/*border-top: 1px #dedede solid;*/
	/*border-bottom: 1px #dedede solid;*/
	background-color: #dedede;
	font-size: 10px;
	word-spacing: 0.2em;
	text-align: left;
	letter-spacing: 0;
	line-height: 1.4em;
}
.relatedposts .relatedpost {
	height: 50px;
	margin-bottom: 30px;
}
.relatedposts .relatedpost .title {
	font-size: 22px;
	line-height: 26px;
}

/* comments */
.commentsarea {
	margin-top: 20px;
}

.commentlist .comment {
	border-top: 1px #dedede solid;
	margin-bottom: 20px;
}

.commentcontent .commentmeta p {
	margin: 10px 0;
}

.commenttext {
	margin: 8px 0 0 0;
}
.commenttext p {
	margin-bottom: 10px;
}

.commentavatar,
.commentcontent {
	float:left;
}
.commentavatar {
	width: 60px;
}
.commentcontent {
	width: 650px;
}

.commentmeta {
	background-color: #dedede;
}
.bypostauthor .commentmeta {
	background-color: #fcffb7;
}

#commentform .inputform p {
	margin: 10px 0;
}
#commentform .inputform label {
	margin-left: 8px;
}
textarea#comment {
	border: 1px #333 solid;
	margin: 10px 0;
}


/* footer */
#footer {
	padding-top:15px;
}
#footer div.footerarea {
	background-color:#dedede;
}
#footer div.creditsarea {
	position:relative;
	top:-66px;
	text-align: right;
}

/* twitter section */
div.tweet {
	clear: both;
	margin: 0 0 10px 0;
	border-top: 1px #333 solid;
}
div.tweet div.avatar {
	float:left;
	margin: 0 5px 10px 0;
}
div.tweet div.tweetcontent {
	margin: 5px 0 0 30px;
}
div.tweet div.avatar img {
	width: 25px;
	height: 25px;
}
div.tweet span.date {
	display:block;
	/*padding: 0 0 0 10px;*/
}
div.tweet span.date a,
div.tweet span.date a:hover {
	text-transform: lowercase;
}

/* "Daisy, Daisy, give me your answer do. I'm half crazy all for the love of you.
	It won't be a stylish marriage, I can't afford a carriage.
	But you'll look sweet upon the seat of a bicycle built for two." */


/*
	Variable Grid System.
	Learn more ~ http://www.spry-soft.com/grids/
	Based on 960 Grid System - http://960.gs/

	Licensed under GPL and MIT.
*/


/* Containers
----------------------------------------------------------------------------------------------------*/
.container_12 {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
}

/* Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 5px;
	margin-right: 5px;
}

/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
	margin-left: 0;
}

.omega {
	margin-right: 0;
}

/* Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .grid_1 {
	width:70px;
}

.container_12 .grid_2 {
	width:150px;
}

.container_12 .grid_3 {
	width:230px;
}

.container_12 .grid_4 {
	width:310px;
}

.container_12 .grid_5 {
	width:390px;
}

.container_12 .grid_6 {
	width:470px;
}

.container_12 .grid_7 {
	width:550px;
}

.container_12 .grid_8 {
	width:630px;
}

.container_12 .grid_9 {
	width:710px;
}

.container_12 .grid_10 {
	width:790px;
}

.container_12 .grid_11 {
	width:870px;
}

.container_12 .grid_12 {
	width:950px;
}



/* Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .prefix_1 {
	padding-left:80px;
}

.container_12 .prefix_2 {
	padding-left:160px;
}

.container_12 .prefix_3 {
	padding-left:240px;
}

.container_12 .prefix_4 {
	padding-left:320px;
}

.container_12 .prefix_5 {
	padding-left:400px;
}

.container_12 .prefix_6 {
	padding-left:480px;
}

.container_12 .prefix_7 {
	padding-left:560px;
}

.container_12 .prefix_8 {
	padding-left:640px;
}

.container_12 .prefix_9 {
	padding-left:720px;
}

.container_12 .prefix_10 {
	padding-left:800px;
}

.container_12 .prefix_11 {
	padding-left:880px;
}



/* Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .suffix_1 {
	padding-right:80px;
}

.container_12 .suffix_2 {
	padding-right:160px;
}

.container_12 .suffix_3 {
	padding-right:240px;
}

.container_12 .suffix_4 {
	padding-right:320px;
}

.container_12 .suffix_5 {
	padding-right:400px;
}

.container_12 .suffix_6 {
	padding-right:480px;
}

.container_12 .suffix_7 {
	padding-right:560px;
}

.container_12 .suffix_8 {
	padding-right:640px;
}

.container_12 .suffix_9 {
	padding-right:720px;
}

.container_12 .suffix_10 {
	padding-right:800px;
}

.container_12 .suffix_11 {
	padding-right:880px;
}



/* Push Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .push_1 {
	left:80px;
}

.container_12 .push_2 {
	left:160px;
}

.container_12 .push_3 {
	left:240px;
}

.container_12 .push_4 {
	left:320px;
}

.container_12 .push_5 {
	left:400px;
}

.container_12 .push_6 {
	left:480px;
}

.container_12 .push_7 {
	left:560px;
}

.container_12 .push_8 {
	left:640px;
}

.container_12 .push_9 {
	left:720px;
}

.container_12 .push_10 {
	left:800px;
}

.container_12 .push_11 {
	left:880px;
}



/* Pull Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .pull_1 {
	left:-80px;
}

.container_12 .pull_2 {
	left:-160px;
}

.container_12 .pull_3 {
	left:-240px;
}

.container_12 .pull_4 {
	left:-320px;
}

.container_12 .pull_5 {
	left:-400px;
}

.container_12 .pull_6 {
	left:-480px;
}

.container_12 .pull_7 {
	left:-560px;
}

.container_12 .pull_8 {
	left:-640px;
}

.container_12 .pull_9 {
	left:-720px;
}

.container_12 .pull_10 {
	left:-800px;
}

.container_12 .pull_11 {
	left:-880px;
}




/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}