/*  
Theme Name: Grid Focus
Theme URI: http://5thirtyone.com/
Description: Grid aligned WordPress theme
Version: 1.1
Author: Derek Punsalan
Author URI: http://5thirtyone.com/
Tags: white, grid, whitespace, minimal, clean, widgets

Grid Focus was designed and coded by Derek Punsalan. Find
more info about the guy at http://5hthirtyone.com

Notes: Inspired and created for minimalist, content focused blogs 
or websites. Customize, edit, poke, prod, and adapt to your own 
style. Please leave credit where credit is due so that others may
find the source for your site and adapt a suitable version for their
own website.

See line 53 for a collection of the main font rules - size, line-height,
and color - combined for your convenience.

*/

* {
	margin: 0;
	padding: 0;
}
body {
	background: #fff url(images/bodybg.jpg);
	color: #333;
	font-size: 62.5%;
	font-family: arial, verdana, sans-serif;
	text-align: center;
} 
h1 {
	font-size: 2em;
}
h2 {
	font-size: 1.6em;
}
h3 {
	font-size: 1.4em;
}
.details h3{background:transparent url(images/limage.gif) left center no-repeat; padding:4px 0 4px 20px; border-bottom:1px #ccc dotted; border-top:1px #f4f4f4 solid;}
h4 {
	font-size: 1.2em;
}
a {
	color: #000;
	outline: none;
	text-decoration: none;
}
a:hover {
	color: #161616;
	background:#FF0;
}

/* =----------------------------------- oh the convenience */
#wrapper {
	/* 
		sets the minimum(s) for the entire site
		off of which everything else is based on
	*/
	font-size: 1.2em;
	line-height: 1.4em;
}
.nav li {
	line-height: 1.2em;
}
.nav li a {
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.nav li a span {
	color: #fff;
	font-size: 0.9em;
	font-weight: normal;
	text-transform: lowercase;
}
.nav li a:hover span {color:#000;}
.nav li a.focus span {
	color: #ccc;
}
.nav li a:hover {
	color: #fff;
}
.nav li a.focus { color: #161616;}
.nav .searchField input {
	color: #777;
}
.toggleCategories li a {
	color: #fff;
	padding:8px 4px;
}
.toggleCategories li a:hover {
	color: #161616;
}
.postMeta {
	font-size: 0.9em;
	text-transform: uppercase;
}
.postMeta span.date {
	color: #777;
}
.postMeta span.comments a,
.postMeta span.date a {
	color: #161616;
}
.post h2 {
	line-height: 1.2em;
}
.entry a,
#commentsContainer h3 a,
.commentlist .comment-author a {
	border-bottom: 1px dotted #ddd;
	color: #161616;
	font-weight: bold;
}
.entry a:hover,
.secondaryColumn a:hover,
#commentsContainer h3 a:hover,
.commentlist .comment-author a:hover,
.commentlist .comment-meta a:hover {
	color: #161616;
	border-bottom: 1px dotted #161616;
}
.secondaryColumn a {
	font-weight: normal;
}
.entry ul,
.entry ol,
.entry blockquote {
	color: #555;
}
.entry blockquote {
	font-style: italic;
}
.secondaryColumn h3,
#commentsContainer h3 {
	font-size: 1.2em;
}
#cancel-comment-reply-link {
	color: #161616;
	font-size: 0.8em;
}
.commentlist .comment-meta a {
	color: #777;
}
.commentlist .comment-author cite {
	font-style: normal;
	font-weight: bold;
}
.commentlist .comment-meta {
	font-size: 0.8em;
}
#commentform p span input,
#commentform span textarea {
	color: #333;
	font-family: arial,verdana,sans-serif;
	font-size: 1em;
}
#paginateIndex {
	font-size: 0.9em;
	text-transform: uppercase;
}
#footer {
	clear: both;
}
#footer p a {
	font-weight: bold;
	color:#333;
}

/* =----------------------------------- main structure */
#wrapper {
	background:#FFF url(images/wrapperbg.jpg) top left no-repeat;
	margin: 0px auto;
	text-align: left;
	width: 970px;
	border-left:1px #fbfbfb solid;
	border-right:1px #fbfbfb solid;
	padding: 0 10px;
}
#masthead {
	padding: 7px 0;
	border-bottom:1px dotted #fff;
}
#filler {}
#mainColumn {
	float: left;
	margin: 28px 0 0 0;
	width: 420px;
	background:#f8f8f8 url(images/entryshade.png) top right repeat-y scroll 0 0;
}
.secondaryColumn {
	color:#CCC;
	float: left;
	margin: 28px 0 0 1px;
	padding-left:32px;
	border-left:1px #fff dotted;
	background:url(images/sidebarbg.png) left top repeat-y;
	overflow: hidden;
	width: 240px;
}
.secondaryColumn a {color:#CCC !important;}
.columnbottom {float: left; margin: 0 0 0 -33px; border-left:1px #fff dotted; background:url(images/sidebarbgend.png) left top no-repeat; overflow: visible; width: 240px; height:41px; display:block}
.columntop {float: left; margin: 0 0 0 -33px; border-left:1px #fff dotted; background:url(images/sidebarbgstart.png) left top no-repeat; overflow: visible; width: 240px; height:41px; display:block}
.secondaryColumn:hover {border-left:1px #FFF solid; color:#666 !important;}
.secondaryColumn:hover a {color:#333 !important; border-bottom:1px #CCC dotted;}

/* =----------------------------------- header elements */
#masthead h1 {
	float: right;
	margin: 15px 7px 0 0;
}
#masthead h1 a {
	text-transform: uppercase;
	width: 400px;
	background:#FF0;
	font-size:1.6em;
}
#blogLead img {
	background: #fff;
	border: 1px dotted #fff;
	float: right;
	height: 42px;
	margin: 0 7px;
	padding: 2px;
	width: 42px;
}
#authorIntro {
	float: right;
	margin: 8px 0 0 0;
	width: 340px;
	padding:2px 0;
	background:#FF0;
	border-top:1px #FFF solid;
}

/* =----------------------------------- top + bottom navigation */
.arrow {font-weight:bold; font-stretch:ultra-expanded;}
.navStripWrapper {
	position: relative;
	clear: both;
}
.nav {
	background: #fff;
	padding:0 0 4px 0;
	border-bottom: 1px #fbfbfb dotted;
}
.nav li {
	display: block;
	float: left;
}
.nav li a {
	display: block;
	padding: 7px 4px 10px 18px;
	width: 110px;
	height: 42px;
	background: url(images/navbgUP.jpg) bottom center no-repeat;
}
.nav li a span {}
.nav li a:hover {
	color:#000;
	background: #FF0 url(images/navbg.jpg) bottom center no-repeat;
}
.nav li a.focus {
	color:#000;
	background: #FFF;
	text-transform:uppercase;
}
.nav li.searchField {
	float: right;
	border: 0;
}
.nav .searchField div {
	margin: 9px 8px 0 0;
}
.nav .searchField span {
	background: #FFF;
	border-bottom: 1px solid #f4f4f4;
	display: block;
	padding: 2px;
}
.nav .searchField input {
	border: 1px solid #fff;
	outline: none;
	padding: 4px;
	width: 220px;
}
.toggleCategories {
	background:#161616 url(images/toggleheaderbottom.png) bottom left repeat-x;
	padding:0px 0px 23px 0px;
}
.toggleCategories ul,
.toggleCategories2 ul {
	padding: 8px 7px 7px;
}
.toggleCategories ul li {
	display: block;
	float: left;
	width: auto;
}
.toggleCategories li a {
	margin: 3px 8px 4px 8px;
}

/* =----------------------------------- meta lead for each post */
.postMeta {
	border-top: 1px dotted #ccc;
	text-align: right;
	margin-bottom: 14px;
	position: relative;
}
.postMeta .container {
	position: absolute;
	top: -9px;
	right: 0;
}
.postMeta span.date {
	background: #fff;
	padding: 0 4px;
}
.postMeta span.comments {
	background: #fff url(images/chat_grey.gif) no-repeat 2px -1px;
	padding-left: 18px;
}
.postMeta span.totop {
	background: #fff url(images/totop.gif) no-repeat 2px -1px;
	padding-left:18px;
}
/* =----------------------------------- general post */
.post {
	margin: 0 0 21px 0;
}
.post h2 {
	margin-bottom: 10px;
	padding: 0 3px;
}
.post h2 a {
	display:block;
	background: url(images/headerimage.gif) left center no-repeat;
	padding: 2px 0px 0px 32px;
}
.post h2 a:hover { background:#FF0;}
/* =----------------------------------- entry body */
.entry {
	padding: 0 3px;
	overflow: hidden;
}
.entry p {
	line-height: 1.6em;
	margin: 10px 0;
}
.more-link{float:right; display:block; text-indent:-999em; background:url(images/moreplz.jpg) top left no-repeat; width:69px; height:69px;}
.more-link a{background:url(images/moreplz.jpg) top left no-repeat; background-position:0 0; border:none}
.more-link:hover{background:url(images/moreplz.jpg) ; background-position:0 69px; border:none}
.entry ul,
.entry ol,
.entry blockquote {
	margin: 0 14px;
}
.entry ol {
	list-style: decimal;
}
.entry ul li,
.entry ol li {
	margin: 0 0 7px 18px;
}
.entry ul li {
	list-style: circle;
}
.entry blockquote {
	border-left: 1px dotted #ccc;
	font-size: 1.1em;
	line-height: 1.4em;
	margin-left: 21px;
	padding-left: 10px;
}
.entry img,
.entry a img {
	background: #fff;
	padding:2px;
	border:1px solid #FFF;
}
.entry a:hover img {
	border-color: #FFF;
}

.entry.meta {
	background: #fff;
	border: 1px dotted #ccc;
	border-width: 1px 0;
}
.entry.meta p {
	margin: 5px 7px;
}
.entry.meta .highlight {
	text-transform: uppercase;
	font-size: 10px;
}
.entry.meta .category {background:url(images/category.png) left center no-repeat; padding-left:16px;}
.entry.meta .tagged {background:url(images/tag.png) left center no-repeat; padding-left:16px;}
.entry.meta a {
	color: #333;
	border-color: #bbb;
}
.entry.meta a:hover {
	color: #000;
	border-color: #000;
}

/* =----------------------------------- main index pagination */
#paginateIndex { 
	margin-bottom: 25px;
}
#paginateIndex a,
.commentlist li .reply a {
	color: #777;
	font-size: 0.9em;
	text-transform: uppercase;
	display: block;
	padding: 4px 7px 3px;
	background: #fff;
	border: 1px dotted #ddd;
}
.commentlist li .reply a {
	color: #aaa;
}
#paginateIndex a:hover,
.commentlist li .reply a:hover {
	color: #161616;
	border-color: #161616;
	background: #ff0;
}

/* =----------------------------------- widget enabled sidebar */
.secondaryColumn h3 {
	border-top: 1px dotted #ccc;
	border-bottom: 1px dotted #eee;
	margin: 0 0 10px 0;
	padding: 7px 4px;
	text-transform:uppercase;
}
.widgetContainer {
	margin: 0 0 20px 0;
}
.widgetContainer ul li {
	margin: 0 3px 7px 5px;
	padding-left:16px;
	list-style:none;
	background:url(images/limage.gif) left center no-repeat;
}
.widgetContainer ul li ul {
	margin-top: 5px;
}
.widgetContainer .textwidget {
	margin: 0 3px;
	line-height: 1.5em;
}
.widgetContainer .texwidget:hover {
	color:#333;
}
.widgetContainer #wp-calendar {
	border-collapse: collapse;
	width: 100%;
}
#wp-calendar caption {
	font-weight: bold;
	margin-bottom: 7px;
}
#wp-calendar thead {}
#wp-calendar thead th {
	padding: 4px 0 4px 3px;
	border: 1px dotted #ccc;
	border-width: 1px 0;
}
#wp-calendar td {
	padding: 3px 0 4px 3px;
	color: #777;
}
#wp-calendar td a {
	font-weight: bold;
}

/* =----------------------------------- style some comments */
#commentsContainer {
	margin-bottom: 30px;
}
#commentsContainer span.hook {
	position: relative;
	display: block;
}
#commentsContainer h3 {
	background:#fff url(images/comments.png) left center no-repeat;
	display: block;
	margin: 10px 0;
	padding: 7px 4px 7px 32px;
	border-top: 2px solid #FF0;
}
.cancel-comment-reply {
	position: absolute;
	top: -1px;
	right: 4px;
}
.commentlist {
	list-style: none;
	margin: 0 0 20px;
}
.commentlist .comment-author {
	border-top: 1px dotted #ccc;
	padding-top: 7px;
	margin-top: 10px;
	overflow: hidden;
}
.commentlist .comment-author img.avatar {
	display: block;
	float: left;
	height: 16px;
	width: 16px;
	margin: 0 4px 0 0;
}
.commentlist .comment-meta {
	margin: 0 0 0 20px;
}
.commentlist li .reply {
	text-align: right;
	padding-bottom: 10px;
}
.commentlist li .reply a {
	display:inline;
}
.commentlist li p {
	margin: 1em 0;
	padding: 0 3px;
	background:#FF0;
}
.commentlist li ul,
.commentlist li ol,
.commentlist li blockquote {
	margin: 0 20px;
}
.commentlist .children {
	margin: 0 0 0 40px;
}
.commentlist .children li {
	list-style: none;
}
#commentform .contain {
	margin: 0 0 10px 0 !important;
}
#commentform #author,
#commentform #email,
#commentform #url,
#commentform textarea {
	padding: 4px 3px;
	border: 1px dotted #ccc;
	border-left-color: #bbb;
	border-bottom-color: #bbb;
	background: #fff;
	margin-right: 4px;
}
#commentform #author,
#commentform #email,
#commentform #url,
#commentform textarea {
	border: 1px dotted #bbb;
	outline: none;
	padding: 4px 3px;
	width: 160px;
}
#commentform p label {
	margin: 4px 0 0 0;
}
#commentform textarea {
	float: none;
	width: 98%;
	overflow: auto;
}

/* =----------------------------------- boring footer */
#footer {
	border-top: 1px dotted #161616;
	margin: 35px 0;
}
#footer p {
	padding: 14px 3px 0; 
}

/* =----------------------------------- floats + clearing rule */
.floatleft,
.alignleft {
	float: left;
	margin: 3px 7px 0 0;
}
.floatright,
.alignright {
	float: right;
	margin: 3px 0 0 7px;
}
.right {
	float:right;
}
.left {
	float: left;
}
.clear {
	clear: both;
}
.fix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.fix {
	display: inline-block;
} 
* html .fix{
	height: 1%;
}
.fix{
	display:
	block;
}
.postform{color:#333; background:#fff; border-bottom:1px #FF0 solid;}