/*
Theme Name: Chalkboard
Theme URI: http://elementwebmedia.com
Description: The first theme for JustinGable.com
Version: 1.0
Author: Justin Gable
Author URI: http://justingable.com
*/

/*******************************************************************************
COLORS ------------------

    dark grey: #1e1f1e
   light grey: #dfdfdf
         blue: #1ebbd7
         pink: #d85a89
       orange: #e97e00
        green: #828943
       purple: #7976ab

*******************************************************************************/ 

* {
  margin: 0;
  padding: 0; 
}

img, fieldset {
  border: 0;
}

body {
  background: #1e1f1e url(images/bg.jpg) top center no-repeat;
  font: 12px Arial;
  color: #DFDFDF;
}

#con {
  width: 700px !important;
  width: 730px;
  margin: 0 auto;
}

#mid {
  margin: 0 0 20px;
}

/***
HEADER -----------------------------------------------------------------------*/
#hdr {
  position: relative;
  height: 77px;
  height: 119px;
}

#hdr h1 a {
  display: block;
  width: 252px;
  height: 77px;
  background: url(images/logo3.gif) bottom center no-repeat;
  text-indent: -9000px;
}

#hdr h1 a:hover {
  background-position: top center;
}

#hdr form {
  position: absolute;
  top: 28px;
  right: /*35px*/0;
  float: right;  
  width: 220px;
}

#hdr input.itf {
  float: left;
  width: 144px;
  height: 28px;
  background: url(images/bg_search.gif) top center no-repeat;
  border:0;
  line-height: 10px;
  font: 18px "Comic Sans MS";
  color: #ccc;
}

#hdr input.isb {
  float: left;
  width: 72px;
  height: 28px;
  background: url(images/btn_search.gif) bottom center no-repeat;
  border: 0;
  font-size: 1px;
  text-indent: -9000px;
  cursor: pointer;
}

/***
CONTENT ----------------------------------------------------------------------*/
#content {
  float: left;
  width: 500px;
}

#content h1.pagetitle {
  margin: 0 0 10px;
  font: bold italic 12px Arial;
}

#content h2 {
  margin: 0 0 10px;
  font: bold 18px "Century Gothic", Arial;
  color: #dfdfdf;  
}

#content h2 a {
  color: #dfdfdf;
  text-decoration: none;
}

#content h2 a:hover {
  color: #e97e00;
}

#content h3, #content h3 a, #content h4, #content h4 a {
  margin: 0 0 10px;
  font-family: "Century Gothic", Arial;
  font-weight: bold;
  color: #dfdfdf;
}

#content h3 {
  font-size: 16px;
}

#content h4 {
  font-size: 14px;
}

#content h3 a:visited, #content h4 a:visited {
  color: #7976ab;
}

#content h3 a:hover, #content h4 a:hover {
  color: #e97e00;
}

#content .entry p {
  margin: 0 0 22px;
  line-height: 22px;
}

#content a, .comententry p a {
  color: #1ebbd7;
}

#content a:visited, .comententry p a:visited {
  color: #7976ab;
}

#content a:hover, .comententry p a:hover {
  color: #e97e00;
}

#content .entry ul {
  margin: 0 0 22px 15px;
  background: url(images/ul_line.gif) top left repeat-y;
  list-style: none;
}

#content .entry ul li {
  margin: 0 0 0 -10px;
  padding: 0 0 0 21px;
  background: url(images/bullet_arrow.gif) top left no-repeat;
  line-height: 28px;
}

#content .entry ol {
  margin: 0 0 22px 15px;
  background: url(images/ul_line.gif) top left repeat-y;
  line-height: 28px;
}

#content .entry ol li {
  margin: 0 0 0 11px;
  line-height: 28px;
}

#content .entry ol li span {
  font: normal 12px/28px Arial, Helvetica, sans-serif;
  line-height: 28px;    
  color: #dfdfdf;
}

#content .entry img, #content .entry a img {
  padding: 8px;
  border: 1px solid #333;
}

#content .entry img.alignnone {
  display: block;
  margin: 0 auto 22px;
}

#content .entry a:hover img {
  border: 1px solid #7976ab;
}

#content .entry blockquote {
  padding: 0 0 0 55px;
  background: url(images/bg_quote.gif) top left no-repeat;
  font-style: italic;
  color: #ababab;
}

div.photo {
  position: relative;
  /*width: 382px;*/
  margin: 0 auto 16px;
  padding: 8px 8px 40px;
  background: #dfdfdf;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #777;
}

div.photo span.tape {
  position: absolute;
  top: -15px;
  left: 130px;
  width: 130px;
  height: 35px;
  background: url(images/tape.png) top center no-repeat; 
}

div.photo span.title {
  position: absolute;
  left: 0;
  bottom: 13px;
  width: 100%;
  font: 12px "Comic Sans MS";
  color: #333;
  text-align: center;
}

#content .post {
  position: relative;
  margin: 0 0 60px;
}

#content .postmeta {
  position: absolute;
  left: -145px;
}

#content ul.timestamp, #content ul.keywords, #content ul.catcom {
  width: 130px;
  margin: 0 0 22px;
  line-height: 22px;
  text-align: right;
  list-style: none;
}

#content ul.timestamp, #content ul.timestamp a {
  color: #1ebbd7;
}

#content ul.timestamp a {
  text-decoration: none;
}

#content ul.catcom a {
  color: #d85a89;
  text-decoration: none;  
}

#content ul.keywords a {
  color: #e97e00;
  text-decoration: none;
}

#content ul.timestamp a:hover, #content ul.catcom a:hover, #content ul.keywords a:hover {
  text-decoration: underline;
}

#content #page-links a {
  padding: 3px;
  border: 1px solid #555;
  color: #1ebbd7;
  text-decoration: none;
}

#content #page-links a:visited {
  color: #7976ab;
}

#content #page-links a:hover {
  border: 1px solid #dfdfdf;
  color: #e97e00;
}

#content a.offsite {
  padding: 0 10px 0 0;
  background: url(images/offsite_orange.gif) top right no-repeat;
}

#content a.pdf {
  padding: 0 20px 0 0;
  background: url(images/pdflink.gif) top right no-repeat;
}

#content code {
  color: #e97e00;
}

#content code.file {
  color: #828943;
}

/***
CODE -------------------------------------------------------------------------*/


/***
SIDEBAR ----------------------------------------------------------------------*/
#sidebar {
  float: right;
  width: 170px;
  min-height: 721px;
  margin: 0 0 0 15px;
  padding: 0 0 0 15px;
  background: url(images/divider.gif) top left no-repeat;
}

#sidebar ul#nav {
  margin: 0 0 22px;
  list-style: none;
}

#nav li a {
  display: block;
  width: 146px;
  height: 29px;
  margin: 0 0 5px;
  background: url() top center no-repeat;
  text-indent: -9000px;
}

#nav li a.about {
  background-image: url(images/btn_about_green.gif);
}

#nav li a.contact {
  background-image: url(images/btn_contact_green.gif);
}

#nav li a.subscribe {
  background-image: url(images/btn_subscribe_green.gif);
}

#nav li a.about:hover, #nav li a.contact:hover, #nav li a.subscribe:hover {
  background-position: bottom center;
}

#sidebar .categories {
  margin: 0 0 20px;
}

#sidebar .categories h3 {
  display: block;
  width: 112px;
  height: 23px;
  margin: 0 0 5px;
  background: url(images/title_categories.gif) top center no-repeat;
  text-indent: -9000px;
}

#sidebar .categories ul {
  margin: 0 0 0 5px;
  list-style: none;
}

#sidebar .categories ul ul {
  margin: 0 0 0 10px;
}

#sidebar .categories li a {
  line-height: 22px;
  color: #d85a89;
  text-decoration: none;
}

#sidebar .categories li a:hover {
  text-decoration: underline;
}

#sidebar .twitter {
  margin: 0 0 20px;
}

#sidebar .twitter h3 {
  display: block;
  width: 76px;
  height: 21px;
  margin: 0 0 10px;
  background: url(images/title_twitter.gif) top center no-repeat;
  text-indent: -9000px;  
}

#sidebar .twitter ul {
  list-style: none;
}

#sidebar .twitter li {
  margin: 0 0 10px;
}

#sidebar .twitter a {
  color: #1ebbd7;
  text-decoration: none;
}

#sidebar .twitter a:hover {
  color: #e97e00;
  text-decoration: underline;
}

#sidebar .twitter a.twitter-user {
  color: #7976ab;
}

#sidebar .twitter .twitter-timestamp {
  display: block;
  font-size: 10px;
  color: #e97e00;
}

#sidebar .recommends h3 {
  display: block;
  width: 137px;
  height: 20px;
  margin: 0 0 15px;
  background: url(images/title_recommends.gif) top center no-repeat;
  text-indent: -9000px;   
}

#sidebar .recommends ul {
  list-style: none;
}

#sidebar .recommends li {
  margin: 0 0 5px;
}

/***
COMMENTS ---------------------------------------------------------------------*/
#commentlist .comment {
  position: relative;
  color: #777;
}

#commentlist .comment.alt {
  color: #bababa;
}

.comment {
  margin: 0 0 15px;
  min-height: 132px;
}

ul.commentmeta {
  position: absolute;
  top: 3px;
  left: -145px;
  width: 130px;
  line-height: 22px;
  text-align: right;
  list-style: none;
}

.comblue ul.commentmeta, .comblue ul.commentmeta a {
  color: #1ebbd7;
}

.compink ul.commentmeta, .compink ul.commentmeta a {
  color: #d85a89;
}

.comorange ul.commentmeta, .comorange ul.commentmeta a {
  color: #e97e00;
}

.commentmeta a img {
  padding: 2px;
  border: 1px solid #555;
}

.commententry {

  padding: 0 0 15px;
}

.commententry p {
  margin: 0 0 11px;
  line-height: 22px;
}

#commentform input.itf {
  width: 250px;
}

#commentform p {
  margin: 0 0 10px;
  font-size: 10px;
}

#commentform input.itf, #commentform textarea {
  padding: 3px;
  background: #2F2F2F;
  border: 1px solid #555;
  font: 12px Arial;
  color: #dfdfdf;
}

#commentform textarea {
  width: 492px;
  overflow: auto;
}

#commentform .isb {
  width: 72px;
  height: 22px;
  background: url(images/btn_submit.gif) bottom center no-repeat;
  border: 0;
  font-size: 1px;
}

div.comment div.btm {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 538px;
  height: 2px;
  background: url(images/comment_line.gif) top center no-repeat;
}

#content p.small {
  font-size: 11px;
  color: #ababab;
}
/***
CONTACT FORM -----------------------------------------------------------------*/
#cf input.itf, #cf textarea {
  padding: 3px;
  background: #2F2F2F;
  border: 1px solid #555;
  font: 12px Arial;
  color: #d1d1d1;  
}

#cf textarea {
  width: 392px;
  overflow: auto;
}

#content #cf p {
  margin: 0 0 10px;
}

#cf .isb {
  width: 72px;
  height: 22px;
  background: url(images/btn_submit.gif) bottom center no-repeat;
  border: 0;
  font-size: 1px;
  color: #1E1F1E;
  letter-spacing: -1px;
  text-align: right;
}

#cf div.msg {
  margin: 0 0 15px;
  padding: 4px;
  border-top: 1px solid #555;
  border-bottom: 1px solid #555;  
  font: 12px Comic Sans MS;
  color: #777;
  text-align: center;
}

/***
MISC -------------------------------------------------------------------------*/
.navigation .alignleft a {
  float: left;
  display: block;
  width: 113px;
  height: 27px;
  background: url(images/btn_previous.gif) top center no-repeat;
  text-indent: -9000px;
}

.navigation .alignright a {
  float: right;
  display: block;
  width: 113px;
  height: 27px;
  background: url(images/btn_next.gif) top center no-repeat;
  text-indent: -9000px;
}

.navigation .alignleft a:hover, .navigation .alignright a:hover {
  background-position: bottom center;
}

.pink {
  color: #d85a89;
}

.purple {
  color: #7976ab;
}

.orange {
  color: #e97e00;
}

br.clear {
  clear: both;
}



/***
sIFR -----------------------------------------------------------------------*/
/*=:project
    scalable Inman Flash Replacement (sIFR) version 3.

  =:file
    Copyright: 2006 Mark Wubben.
    Author: Mark Wubben, <http://novemberborn.net/>

  =:history
    * IFR: Shaun Inman
    * sIFR 1: Mike Davidson, Shaun Inman and Tomas Jogin
    * sIFR 2: Mike Davidson, Shaun Inman, Tomas Jogin and Mark Wubben

  =:license
    This software is licensed and provided under the CC-GNU LGPL.
    See <http://creativecommons.org/licenses/LGPL/2.1/>    
*/

/*---- sIFR ---*/
.sIFR-flash {
  visibility: visible !important;
  margin: 0;
  padding: 0;
}

.sIFR-replaced, .sIFR-ignore {
  visibility: visible !important;
}

.sIFR-alternate {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  display: block;
  overflow: hidden;
}

.sIFR-replaced div.sIFR-fixfocus {
  margin: 0pt; 
  padding: 0pt; 
  overflow: auto; 
  letter-spacing: 0px; 
  float: none;
}

/*---- Header styling ---*/
.sIFR-active #content h2 {
  visibility: hidden;
  font-family: Verdana;
  font-size: 26px;
  color: #dfdfdf;
}

.sIFR-active h3#respond, .sIFR-active h3#comments {
  visibility: hidden;
  font-family: Verdana;
  font-size: 20px;
  color: #828943;
  margin: 0 0 10px;
}

.sIFR-active #content h3, .sIFR-active #content h4 {
  visibility: hidden;
  font-family: Verdana;
  font-size: 18px;
  color: #dfdfdf;
}

.sIFR-active #content h4 {
  font-size: 16px;
}

/***
Lightbox ---------------------------------------------------------------------*/
div.pictureHolder .top .left { background: url(images/tl.gif) top left no-repeat; } /* Top left corner */
div.pictureHolder .top .middle { background: #fff; } /* Top pattern/color */
div.pictureHolder .top .right { background: url(images/tr.gif) top left no-repeat; } /* Top right corner */

div.pictureHolder .content { background-color: #fff; } /* Content background */
div.pictureHolder .content a.next:hover { background: url(images/btnNext.gif) center right no-repeat; cursor: pointer; } /* Next button */
div.pictureHolder .content a.previous:hover { background: url(images/btnPrevious.gif) center left no-repeat; cursor: pointer; } /* Previous button */
div.pictureHolder .content a.expand { background: url(images/btnExpand.gif) top left no-repeat; cursor: pointer; } /* Expand button */
div.pictureHolder .content a.expand:hover { background: url(images/btnExpand.gif) bottom left no-repeat; cursor: pointer; } /* Expand button hover */
div.pictureHolder .content a.contract { background: url(images/btnContract.gif) top left no-repeat; cursor: pointer; } /* Contract button */
div.pictureHolder .content a.contract:hover { background: url(images/btnContract.gif) bottom left no-repeat; cursor: pointer; } /* Contract button hover */
div.pictureHolder .content a.close { width: 61px; height: 22px; background: url(images/btnClose.gif) center left no-repeat; cursor: pointer; } /* Close button */

div.pictureHolder .content .details .nav a.arrow_previous { background: url(images/arrow_previous.gif) top left no-repeat; } /* The previous arrow in the bottom nav */
div.pictureHolder .content .details .nav a.arrow_next { background: url(images/arrow_next.gif) top left no-repeat; } /* The next arrow in the bottom nav */

div.pictureHolder .bottom .left { background: url(images/bl.gif) top left no-repeat; } /* Bottom left corner */
div.pictureHolder .bottom .middle { background: #fff; } /* Bottom pattern/color */
div.pictureHolder .bottom .right { background: url(images/br.gif) top left no-repeat; } /* Bottom right corner */

div.pictureHolder .loaderIcon { background: url(images/loader.gif) center center no-repeat; } /* Loader icon */

div.prettyPhotoTitle div.prettyPhotoTitleLeft { background: url(images/ttl.gif) top left no-repeat; }
div.prettyPhotoTitle div.prettyPhotoTitleRight { background: url(images/ttr.gif) top left no-repeat; }
div.prettyPhotoTitle div.prettyPhotoTitleContent { background: url(images/ttp.gif) top left repeat-x; }

/* ------------------------------------------------------------------------
	DO NOT CHANGE
------------------------------------------------------------------------- */

div.prettyPhotoOverlay{background:#000;position:absolute;top:0;left:0;z-index:9500;width:100%}div.pictureHolder{position:absolute;z-index:10000;width:100px}div.pictureHolder .top{position:relative;height:20px}* html div.pictureHolder .top{padding:0 20px}div.pictureHolder .top .left{position:absolute;left:0;width:20px;height:20px}div.pictureHolder .top .middle{position:absolute;left:20px;right:20px;height:20px}* html div.pictureHolder .top .middle{position:static}div.pictureHolder .top .right{position:absolute;top:0;left:auto;right:0;width:20px;height:20px}div.pictureHolder .content{position:relative;text-align:left;width:100%;height:40px}div.pictureHolder .content .details{display:none;margin:10px 15px 0 20px}div.pictureHolder .content .details p.description{display:none;float:left;margin:0}div.pictureHolder .content .details .nav{float:left;margin:4px 0 0 0}div.pictureHolder .content .details .nav p{float:left;margin:0 4px}div.pictureHolder .content .details .nav a.arrow_previous,div.pictureHolder .content .details .nav a.arrow_next{float:left;display:block;width:8px;height:9px;text-indent:-10000px;margin-top:4px}div.pictureHolder .content .details .nav a.disabled{background-position:0 -10px;cursor:default}div.pictureHolder .content div.hoverContainer{position:absolute;z-index:10000;top:0;left:0;width:100%}div.pictureHolder .content a.next{position:relative;z-index:2000;display:block;float:right;text-indent:-10000px;width:49%;height:100%;background:url(../images/prettyPhoto/images/btnNext.gif) 10000px 50% no-repeat}div.pictureHolder .content a.previous{cursor:pointer;display:block;text-indent:-10000px;width:49%;height:100%;background:url(images/btnNext.gif) 10000px 50% no-repeat}div.pictureHolder .content a.expand,div.pictureHolder .content a.contract{position:absolute;z-index:20000;top:10px;right:30px;cursor:pointer;display:none;text-indent:-10000px;width:20px;height:20px}div.pictureHolder .content a.close{float:right;display:block;text-indent:-10000px}div.pictureHolder .bottom{position:relative;height:20px}* html div.pictureHolder .bottom{padding:0 20px}div.pictureHolder .bottom .left{position:absolute;left:0;width:20px;height:20px}div.pictureHolder .bottom .middle{position:absolute;left:20px;right:20px;height:20px}* html div.pictureHolder .bottom .middle{position:static}div.pictureHolder .bottom .right{position:absolute;top:0;left:auto;right:0;width:20px;height:20px}div.pictureHolder .loaderIcon{display:none;position:absolute;top:50%;left:50%;margin:-12px 0 0 -12px;width:24px;height:24px}div.pictureHolder #fullResImageContainer{width:100%;text-align:center}div.prettyPhotoTitle{display:none;position:absolute;top:0;left:0;z-index:9999;color:#fff;font-size:13px}div.prettyPhotoTitle div.prettyPhotoTitleLeft,div.prettyPhotoTitle div.prettyPhotoTitleRight{float:left;width:19px;height:23px;overflow:hidden}div.prettyPhotoTitle div.prettyPhotoTitleContent{float:left;line-height:23px}

/***
Code Highlighter ------------------------------------------------------*/

#content .dp-highlighter
{
	font-family: "Consolas", "Courier New", Courier, mono, serif;
	font-size: 12px;
	background-color: #E7E5DC;
	width: 99%;
	overflow: auto;
	margin: 18px 0 18px 0 !important;
	padding-top: 1px; /* adds a little border on top when controls are hidden */
}

/* clear styles */
#content .dp-highlighter ol,
#content .dp-highlighter ol li,
#content .dp-highlighter ol li span 
{
	margin: 0;
	padding: 0;
	border: none;
}

#content .dp-highlighter a,
#content .dp-highlighter a:hover
{
	background: none;
	border: none;
	padding: 0;
	margin: 0;
}

#content .dp-highlighter .bar
{
	padding-left: 40px;
}

#content .dp-highlighter.collapsed .bar,
#content .dp-highlighter.nogutter .bar
{
	padding-left: 0px;
}

#content .dp-highlighter ol
{
	list-style: decimal; /* for ie */
	background-color: #fff;
	margin: 0px 0px 1px 40px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
	padding: 0px;
	color: #5C5C5C;
}

#content .dp-highlighter.nogutter ol,
#content .dp-highlighter.nogutter ol li
{
	list-style: none !important;
	margin-left: 0px !important;
}

#content .dp-highlighter ol li,
#content .dp-highlighter .columns div
{
	list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
	list-style-position: outside !important;
	border-left: 3px solid #6CE26C;
	background-color: #F8F8F8;
	color: #5C5C5C;
	padding: 0 3px 0 10px !important;
	margin: 0 !important;
	line-height: 14px;
}

#content .dp-highlighter.nogutter ol li,
#content .dp-highlighter.nogutter .columns div
{
	border: 0;
}

#content .dp-highlighter .columns
{
	background-color: #F8F8F8;
	color: gray;
	overflow: hidden;
	width: 100%;
}

#content .dp-highlighter .columns div
{
	padding-bottom: 5px;
}

#content .dp-highlighter ol li.alt
{
	background-color: #FFF;
	color: inherit;
}

#content .dp-highlighter ol li span
{
	color: black;
	background-color: inherit;
}

/* Adjust some properties when collapsed */

#content .dp-highlighter.collapsed ol
{
	margin: 0px;
}

#content .dp-highlighter.collapsed ol li
{
	display: none;
}

/* Additional modifications when in print-view */

#content .dp-highlighter.printing
{
	border: none;
}

#content .dp-highlighter.printing .tools
{
	display: none !important;
}

#content .dp-highlighter.printing li
{
	display: list-item !important;
}

/* Styles for the tools */

#content .dp-highlighter .tools
{
	padding: 3px 8px 3px 10px;
	font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: silver;
	background-color: #f8f8f8;
	padding-bottom: 10px;
	border-left: 3px solid #6CE26C;
}

#content .dp-highlighter.nogutter .tools
{
	border-left: 0;
}

#content .dp-highlighter.collapsed .tools
{
	border-bottom: 0;
}

#content .dp-highlighter .tools a
{
	font-size: 9px;
	color: #a0a0a0;
	background-color: inherit;
	text-decoration: none;
	margin-right: 10px;
}

#content .dp-highlighter .tools a:hover
{
	color: red;
	background-color: inherit;
	text-decoration: underline;
}

/* About dialog styles */

#content .dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
#content .dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
#content .dp-about td { padding: 10px; vertical-align: top; }
#content .dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
#content .dp-about .title { color: red; background-color: inherit; font-weight: bold; }
#content .dp-about .para { margin: 0 0 4px 0; }
#content .dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
#content .dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }

/* Language specific styles */

#content .dp-highlighter .comment, #content .dp-highlighter .comments { color: #008200; background-color: inherit; }
#content .dp-highlighter .string { color: blue; background-color: inherit; }
#content .dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
#content .dp-highlighter .preprocessor { color: gray; background-color: inherit; }


#content pre {
  margin: 0 0 22px 0;
}