/*
Theme Name:		Tales of a Design v.4
Theme URI:		http://www.jwphill3.com
Description:	The 4th version of Tales of a Designer
Version:		4.0
Author:			John Phillips
Author URI:		http://www.jwphill3.com
*/

/* 
======================================================
>>COLORS
======================================================
#
#
*/

/* 
======================================================
>>SITE WIDE STYLES
======================================================
*/
* { margin:0; padding:0; }
.bn { border:0; }
.fl { float:left; }
.fr { float:right; }
.cl { clear:left; }
.clear { clear: both; }

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
* html .clearfix { height:1px; }

* { padding: 0; margin: 0; }
body { font-size:62.5%; color: #545353; font-family: Helvetica,Arial,Verdana,Sans-Serif; }
p { margin: 0 0 20px 0; font-size:.87em; line-height:20px; }
p.datecat { font-size:.85em; color:#bcb3b3; margin: 5px 0 10px 0; }
a { color: #a23b1a; text-decoration: none; outline:none;}
a:hover { text-decoration: underline; }
img { border: none;}
div.entry p a { text-decoration:underline; }
div.entry p a:hover { text-decoration:none; background:#a23b1a; color:#fff; }

img.fl { float: left; margin:0 10px 10px 0; border:4px solid #E68566; }

blockquote { text-align: center; padding: 18px; margin:0 auto; margin-top: 20px; width:80%; border-top: 1px solid #e0e0c3; border-bottom: 1px solid #e0e0c3; background: #f5f5e6; margin-bottom:20px; }
blockquote p { margin:6px 0 !important; padding:0; font-size:1.5em !important; font-family:times,Times New Roman,times-roman,georgia,serif; color: #777070; font-style:italic; }

code { color: #25977C; font-family: "Courier New", Courier, monospace; font-size:.85em; }
pre { width: 500px; color: #25977C; margin: 18px 0; font-size: 1.3em; }
.quick_date { margin:0 0 0 10px; font-size:.7em; }

.clr { clear:both; }

img.rss { position:absolute; right:0; bottom:4px;}
acronym { border-bottom:1px dotted #545353; }

/* 
======================================================
>>LAYOUT
======================================================
*/
div#navigation { background:url(images/body-bg.gif) top repeat-x; position:fixed; z-index:9999; top:0; left:0; width:100%; height:33px; margin:0; padding:0; }
div#container { width: 740px; margin:0 0 0 100px; }
div#header { position:relative; height:90px; margin:0; background:url(images/header-bottom.gif) bottom repeat-x; padding:60px 0 0; }

div#content { margin:50px 0 0; background:url(images/content-bottom.gif) bottom repeat-x; float:left; }
div.post { border-bottom:1px dotted #E68566; padding:0 0 36px; margin: 0 0 36px; }
div.post:last-child { border-bottom:none; }
div.info { float:left; width:180px; }
div.entry { margin:0 0 0 20px; float:left; width:540px; }
div.tags { border-left:10px solid #c4c4c4; border-top:1px solid #c4c4c4; height:30px; background:#f3f2f2; }
div#sidebar { margin:60px 0 0; float:left; }
div#bottom-nav { width:540px; margin:0 0 0 20px; float:left; }
* html div#bottom-nav { margin-left:100px;}
div#footer { margin-top:30px; padding:15px 0; border-top: 2px solid #A23919; font-size: .9em; clear: both}


/* 
======================================================
>>NAVIGATION
======================================================
*/
div#navigation ul { list-style: none; margin:10px 0 0 100px; height:33px; }
div#navigation li { float: left; disply:inline; margin:0 15px 0 0; font-size:1.2em; }
div#navigation li a { color:#fff; }
div#navigation li a:hover { text-decoration:underline; }



/* 
======================================================
>>HEADERS
======================================================
*/
h1 { font-weight: bold; font-size: 1.5em; }
h1.masthead { width:457px; height:57px; float:left; }
h1.masthead a { width:457px; height:57px; text-indent:-9999px; display:block; background:url(images/tales.gif) no-repeat; }
h2 { font-size:3.6em; font-weight: bold; margin:0 0 18px; color:#8D8C8C; }
h2 a { color:#e68566; }
div#comments h2 { font-size:2.4em !important; }
h2 a:hover { text-decoration:none; color: #999; }
h2.comment_head { color: #999; padding:5px 0 0 0; }
h3.form_head { color: #999; line-height: 5px; font-size:1.1em; padding:10px 0 0 0; }
h3 { font-weight: margin:10px 0 0 0; normal; font-size: 2em; margin: 0 0 18px 200px; color: #999; }
.entry h3 { margin: 0 0 18px 0; }
h4 { font-weight: normal; padding: 4px; line-height: 1.0em; font-size: .8em; text-transform: uppercase; }

h4.expander { margin:0 0 6px; }


/* 
======================================================
>>PARAGRAPHS
======================================================
*/
p { font-size:1.2em;}
p.niner a { width:43px; height:48px; text-indent:-9999px; display:block; background:url(images/9r.gif) no-repeat; float:left; margin:0 0 0 20px; }
div.info p { margin:0; padding:0; font-size:1.2em; }
div.info p.date { background:url(images/date.gif) left no-repeat; padding:0 0 0 20px; }
div.info p.comment-number { background:url(images/chat.gif) left no-repeat; padding:0 0 0 20px; }

div.entry p { font-size:1.2em; line-height:20px; margin:0 0 18px; }
div.entry div.tags p { color:#c4c4c4; margin:5px 0 0 18px; }

div#sidebar p.linkage { background:url(images/linkage.gif) left no-repeat; padding:0 0 0 20px; font-size:1.2em; }
p.num_comments { padding-left: 27px; margin-bottom: 0; line-height: 1.6em; background: url('/images/icon_excl.gif') 0 50% no-repeat; float: right; }		
p.tagged { padding-left: 27px; margin-bottom: 0; line-height: 1.6em; background: url('/images/icon_file.gif') 0 50% no-repeat; float: left; }

/* 
======================================================
>>LISTS
======================================================
*/
ul { list-style-type:none; font-size:1.2em; }
.entry ul, .entry ol { margin: 0 0 15px 0; }
.entry ul { list-style-type: none; margin:30px 15px; border-left:1px solid #C4C4C4; padding-left:15px; }
.entry li { padding: 6px 0; margin:0 0 9px 0; font-family:georgia, Times, serif; font-size:1.2em !important;}
.entry ul li ul, .entry ul li ol, .entry ol li ul, .entry ol li ol { margin: 0 0 0 30px; }
.entry dl { margin-bottom: 15px; }


/* 
======================================================
>>IMAGES
======================================================
*/
.entry img.left { padding: 5px; margin: 10px; background-color: #f5f5e6; float: left; }
.entry img.right { padding: 3px; border: 1px solid #E68566; margin: 10px; background-color: #f5f5e6; float: right; }
.entry img.center { display: block; padding: 6px; margin: 0 auto 15px auto; background: #f5f5f5; border: 1px solid #bbb; }


/* 
======================================================
>>SIDEBAR
======================================================
*/
.panel { clear: both; display: none; }
.panel.active-tab-body { display: block; margin:42px 0 30px 200px; width:540px; }
#tabs { position: absolute; height: 28px; list-style: none; }
#tabs ul { margin:0 0 10px 0; }
#tabs li { float: left; }
#tabs a { float: left; padding:0; margin:0 18px 0 0; font-size:2.4em; font-weight:bold; color:#c4c4c4; }
* html #tabs a { /*margin-right:0;*/ font-size:2em; }
#tabs a.active-tab { color:#8d8c8c; }

div#distractions ul { list-style:none; margin:0; }
div#distractions ul li { margin:0 0 12px 0; font-size:1.3em; }
div#distractions ul li a { margin:0; background:url(images/bullet.gif) left no-repeat; display:block; padding:0 0 0 18px;}

div#recently ul { list-style:none; margin:0; }
div#recently ul li { margin:0 0 12px 0; font-size:1.3em; }
* html div#recently ul li { margin:0 0 6px 0; }
div#recently ul li a { margin:0; background:url(images/post.gif) left no-repeat; display:block; padding:0 0 0 18px;}

div#tags ul { list-style:none; margin:0; }
div#tags ul li { margin:0 0 12px 0; font-size:1.3em; float:left; width:50%; }
div#tags ul li a { margin:0; background:url(images/tag.gif) left no-repeat; display:block; padding:0 0 0 18px; }

/* 
======================================================
>>FOOTER
======================================================
*/
#footer p { text-align: center; }
#footer a { text-decoration: none; }
#footer a:hover { text-decoration: none; border-bottom:1px solid #F2F2DA; }


/* 
======================================================
>>COMMENTS
======================================================
*/

div#comments { font-size: 1.2em; color: #444; float: left; clear: both; margin:48px 0 0; }
ul.comment_list { list-style: none; margin:0 0 40px 0; border-top: 1px dotted #bbb; float: left; border-left:none !important; padding-left:0 !important; font-size:.8em; }
ul.comment_list li, ul.comment_list li.alt, ul.comment_list li.author_comment_, ul.comment_list li.author_comment_alt { width: 480px; padding: 15px 10px; border-bottom: 1px dotted #bbb; float: left; }
ul.comment_list li.alt, li.author_comment_alt{ background: #f5f5e6; }
.comment_intro { width: 480px; margin-bottom: 15px; line-height: normal; float: left; }
* html .comment_intro { margin-bottom: 0; }
.author_comment_ .comment_intro { }
.comment_author { font-weight: bold; font-size: 1.4em; background:url(images/user.gif) left no-repeat; padding: 5px 0 5px 24px; height:25px;  }
.comment_meta { font-size: 1em; color:#A23B1A; }
.comment_meta a, .comment_meta a:visited, .comment_meta a:hover { display:block; margin:6px 0 0; color: #A23B1A; text-decoration: none; }
		
#comment_form { width: 500px; padding: 10px 0; float: left; }
#comment_form p { padding: 6px 0; margin-bottom: 0; }
#comment_form label { padding-left: 10px; font-size: .9em; }
#comment_form .text_input { width: 40%; padding: 3px; color: #444; background:#eaeaea; border:1px solid #c1c1bf; }
#comment_form .text_area { width: 95%; padding: 3px; color: #444; background:#eaeaea; border:1px solid #c1c1bf; }
#comment_form .text_input:focus, #comment_form .text_area:focus { border:1px solid #c1c1bf; }
#comment_form input#submit { background:none; border:none; }	

/* 
======================================================
>>SEARCH FORM
======================================================
*/

#search_form { text-align: left; }
#search_form .text_input { width: 300px; padding: 3px; color: #444; font: normal 1.4em; border-top: 1px solid #999; border-left: 1px solid #999; border-right: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5; }
#search_form .text_input:focus { border-top: 1px solid #444; border-left: 1px solid #444; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; }
label { font-size:1.2em;}

div.row { border-bottom:1px dotted #ccc; }
div.row strong { font-size:1.3em; }
.emptymonth, .fullmonth { font-size:1.2em; margin: 6px 0 0 6px; }
.emptymonth { color:#ccc; }
.previous { padding-left: 27px; margin-bottom: 0; background: url('/images/icon_previous.gif') 0 50% no-repeat; float: left; }	
.next { padding-right: 27px; margin-bottom: 0; background: url('/images/icon_next.gif') 100% 50% no-repeat; float: right; }
	
.jump { padding: 4px 6px 4px 33px; margin: 0 0 10px 10px; background: #f5f5f5 url('/images/icon_down.gif') 6px 50% no-repeat; float: right; clear: both; }