/* 
Theme Name: Dashifen.com
Description: The custom-theme for Dashifen.com
Author: David Dashifen Kees
Author URI: http://dashifen.com
Version: 1.0
*/

@charset "utf-8";

/****************************************************************************** RESET AND UTILITY STYLES */

* {
	margin: 0em; 
	padding: 0em;
}

html { 
	font-size: 62.5%; 
	height: 100%; 
}

body   { 
	height: 100%;
}

a {
	outline: none;
} 

img { 
	border: 1px solid #FFF;
}

img.borderless { 
	border-style: none;
}

label { 
	font-weight: bold;   
}

label.hidden {
	font-weight: normal;
}

.error { 
	color: #F99;         
}

p,
ul,
ol,
pre,
form,
table,
blockquote {
	line-height: 22px;
	margin-bottom: 20px;
}

form table,
table form {
	margin-bottom: 0em;
}


ul,
ol,
blockquote {
	margin-left: 45px;
}

li {
	margin-bottom: 10px;
}

fieldset { 
	border-style: none;           
}

select,
textarea,
input[type=text],
input[type=password] {
	font: inherit;
}

textarea {
	font: inherit;
}

input[type=image] { 
	border: 0em; 
	margin: 0em;
	padding: 0em;
}

.email span {
	display: none;
}

/* setup styles for smaller type-face for legaltext (i.e. fine print) and errortext.  in case we need legaltext within 
   errortext, we'll also set things up to avoid really small print (that is 90% of 90% type-face) in both cases */

.legaltext { 
	font-size: 90%; 
	line-height: 16px;
}

.mono {
	font-family: "Courier New", Courier, monospace;
}

/* these styles can be applied to any element in the site to control the sizing of said elements.  most often, though,
   they're applied to form elements with tables to keep things well proportioned with respect to the expected amount 
   of input into said forms. */
   
.full    { width: 100%; }
.widest  { width:  99%; }
.wider	 { width:  90%; }
.wide    { width:  75%; }
.two3rds { width:  66%; }
.half    { width:  45%; }
.third   { width:  32%; }
.thin    { width:  25%; }
.petite  { width:  10%; }
.tiny    { width:   5%; }


.xsmall  { height:  3em; }
.small   { height:  7em; }
.medium  { height: 11em; }
.large   { height: 15em; }
.xlarge  { height: 19em; }
.xxlarge { height: 23em; }

.nowrap  { white-space: nowrap; }

/* the following classes can be applied to anything in order to change their border styles.  they're kept short in 
   order to facilitate easy of use and less clutter inline for class names. */
   
.t { border-top:    1px solid #999; }
.l { border-left:   1px solid #999; }
.r { border-right:  1px solid #999; }
.b { border-bottom: 1px solid #999; }

/* these can be used to move things to the right, left, and center sides of the screen and are ususally used with images
   or divs as sidebars. */
   
.right  { 
	float: right; 
	margin: 0 0 0 20px;
}

.left   { 
	float: left;  
	margin: 0 20px 0 0; 
}

.center {
	display: block; 
	margin: 0 auto 20px;
}

.clearing { clear: both; }

.pad_t { padding-top:    20px; }
.pad_l { padding-left:   20px; }
.pad_r { padding-right:  20px; }
.pad_b { padding-bottom: 20px; }

.mar_t { margin-top:     20px; }
.mar_l { margin-left:    20px; }
.mar_r { margin-right:   20px; }
.mar_b { margin-bottom:  20px; }

.css_hide {
	left: -100000000px;
	position: absolute;
}

/****************************************************************************** HEADER STYLES ************/

html {
	background: #343A3D  url("images/html.jpg") top left repeat;
}

body {
	background: url("images/body-horiz.png") top left repeat-x;
	color: #EDEDED;
	font-size: 1.2em;
	font-family: Verdana, Arial, sans-serif;
}

a {
	color: #20BBD9;
	text-decoration: none;
}

a:focus,
a:hover {
	color: #B5FF86;
}

div#body {
	background: url("images/body-vert.png") 50% 0 repeat-y;
	padding: 0 20px;
	width: 960px;
	
	/* the following four styles are the requirements for the CSS Sticky Footer technique
	   described online here: http://ryanfait.com/sticky-footer/ */
	
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -57px;	
}

div#header {
	background: url("images/header.png") top left no-repeat;
	height: 212px;
	margin: 0 auto;
	position: relative;
}

div#masthead {
	float: left;
	font-family: Georgia, "Times New Roman", Times, serif;
	position: absolute;
	top: 135px;
	width: 45%;
}

span#site_name a {
	color: #FFF;
	display: block;
	font-size: 300%;
	text-decoration: none;
}

strong#motto {
	font-size: 150%;
}

div#main_nav {
	position: absolute;
	top: 35px;
	width: 100%;
}

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

div#main_nav a {
	color: #FFF;
	display: block;
	float: left;
	padding: 0 15px;
	text-decoration: none;
	text-transform: uppercase;
}

div#main_nav a:hover,
div#main_nav a:focus {
	border-bottom-color: #B5FF86;
	color: #B5FF86;
}

div#main_nav li.current_page_item a {
	background: #171017;
	border: 1px solid #FFF;
	border-bottom-color: #171017;
}

div#header form {
	position: absolute;
	top: 45px;
	right: 275px;
}

div#header #s {
	background: #CCC;
	border: 1px solid #111;
	padding: 2px 2px;
	width: 200px;
	
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

div#header #s:focus {
	background: #FFF;
}

div#header form input[type=image] {
	position: relative;
	top: 3px;
}

div#header img {
	position: absolute;
	top: 35px;
	right: 80px;
}

div#header img#HHV_voicetag {
	height: 105px;
	right: 275px;
	top: 85px;
	width: 105px
}

div#header img#compassion {
	border-color: #697;
	border-style: solid;
	border-width: 8px 1px 9px;
	right:400px;
	top:85px;
}

/****************************************************************************************** CONTENT STYLES */

div#wrapper {
	overflow: hidden;	
}

div#content {
	border-right: 190px solid;
	border-color: transparent;
	float: left;
	margin-right: -190px;
	padding: 30px 30px 30px 0;
	width: 685px;
}

div#content h1,
div#sidebar h2 {
	border-bottom: 1px solid #999;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 175%;
	font-variant: small-caps;
	font-weight: normal;
	letter-spacing: 1px;
	position: relative;
}

div#content h2 {
	border-bottom: 1px solid #999;
	font-family: Georgia, "Times New Roman", Times, serif;
	position: relative;
	text-align: left;	
}

div#content h1 span.date {
	bottom: 3px;
	font-size: 75%;
	letter-spacing: -1px;
	position: absolute;
	right: 0;
}	

div#content h2 span.date {
	position: absolute;
	right: 0;
}

div#page,
div#posts div.first {
	background-color: #101010;
	border: 1px solid #FFF;
	overflow: hidden;
	padding: 30px;
}

div#page div.excerpt,
div#posts div.excerpt {
	font-size: 90%;
	margin: 30px 15px 0 0;
	padding: 15px;
	text-align: justify;
	width: 295px;			
}

div#page div.content + div.excerpt,
div#page div.content + div.excerpt + div.excerpt {
	margin-top: 0px;
}

div.excerpt p {
	line-height: 16px;
}

div.clearing.excerpt + div.excerpt {
	margin-left: 15px;
	margin-right: 0px;
}

div.excerpt img {
	display: none;
}

div.extended.excerpt {
	background-color: #101010;
	border: 1px solid #FFF;
	padding-bottom: 28px;	/* exact height (reported from firebug) of the div.footer */
	position: relative;
}

div.extended.excerpt div.footer {
	bottom: 28px;			/* exact height (reported from firebug) of the div.footer */
	position: absolute;
}

div#page.single {
	margin-bottom: 30px;
}

div#page div.footer {
	font-size: 90%;
	line-height: 16px;
	text-align: right;
}

div#page div.footer p {
	margin-bottom: 0;
}

div.codecolorer-container {
	margin-bottom: 20px;
}

div.codecolorer-container table {
	margin-bottom: 0px;
}

/****************************************************************************************** TABLE STYLES */

table {
	border-style: none;
}

tr.t { border-top-style: none;    }			/* these styles override the .t, .l, .b, and .r styles in global.css */
tr.l { border-left-style: none;   }
tr.b { border-bottom-style: none; }
tr.r { border-right-style: none;  }

tr.t th, tr.t td, tbody.t td { border-top: 1px solid #999;    }		/* then, these four styles add borders to cells within a row */
tr.l th, tr.l td, tbody.l td { border-left: 1px solid #999;   }
tr.b th, tr.b td, tbody.b td { border-bottom: 1px solid #999; }
tr.r th, tr.r td, tbody.r td { border-right: 1px solid #999;  }

th {
	font-weight: bold;
	padding: 5px;
	text-align: left;
	vertical-align: bottom;
}

thead.nowrap th {
	white-space: nowrap;
}

th.centered {
	text-align: center;
}

th[scope=row] {
	vertical-align: top;
}

th[scope=row].right {
	float: none;
	margin-left: 0px;
	text-align: right;
}

td {
	padding: 5px;
	vertical-align: top;
}

td.colorize,
table.colorize th {
	background: #434;
}


table.colorize th.colorless {
	background: #111;
}

table.colorize th[scope=row],
table.colorize td {
	background: #222;
}

table.colorize tr.colorless td {
	background: transparent;
}

div#content table.v_list td.highlight,
table.h_list tbody tr:hover th.colorless,
table.h_list tbody tr:hover td {
	background: #443;
}

/****************************************************************************************** FORM STYLES */

div#content fieldset {
	background-color: #101010;
	border: 1px solid #FFF;
	color: #EDEDED;
	margin-bottom: 20px;
	padding: 15px 15px 0;
	position: relative;
}

div#content div#page fieldset {
	background-color: #222;
}

div#content fieldset legend label {
	color: #EDEDED;
	font-size: 125%;
	padding: 0 8px;
}

div#content fieldset p {
	margin: 0 0 0 8px;
}

div#content fieldset ol {
	float: left;
	list-style-type: none;
	margin: 0 0 0 .75em;
	padding: .75em 0 .5em 0;
	width: 96%;					/* 96% accounts for the padding when we create .full fields */
}

div#content fieldset ol li {
	display: block;
	float: left;
	margin-bottom: 20px;
	width: 100%;
}

div#content fieldset label {
	color: #EDEDED;
	display: block;
	position: relative;
}

div#content fieldset label strong {
	display: block;
	font-style: italic;
}

div#content fieldset label.error {
	color: #F33;
}

div#content fieldset li p {
	margin-left: 0px;
}

button,
a.button,
input[type=button],
input[type=submit] {
	background: #CCC;
	border: 1px solid #979797;
	color: #111;

	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

a.button {
	padding: 2px;
}

input[type=submit].cancel {
	background: #ECC;
	border-color: #900;
}

input[type=submit].okay {
	background: #CEC;
	border-color: #090;
}

button:hover,
button:focus,
a.button:hover,
a.button:focus,
input[type=button]:hover,
input[type=button]:focus,
input[type=submit]:hover,
input[type=submit]:focus {
	background: #EEE;
    border-color: #111;
    cursor: pointer;
}

input[type=radio],
input[type=checkbox] {
	position: relative;
	top: 2px;
}

select,
textarea,
input[type=text],
input[type=password] {
	background: #CCC;
	border: 1px solid #101710;
	padding: 2px;

	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

select:focus,
textarea:focus,
input[type=text]:focus,
input[type=password]:focus {
    background: #FFF;        
}

/****************************************************************************************** COMMENT STYLES */

div#page + form,
div#page + a#comment_form_anchor { 
	display: block;
	margin-top: 30px;
}

form#comment_form p.login {
	background-color: #101010;
	border: 1px solid #FFF;
	font-size: 90%;
	line-height: 16px;
	padding: 15px;
	position: absolute;
	right: 60px;			/* eyeballed to be roughly the center of the available space */
	top: 20px;
	width: 33%;
}

ol#comments {
	border: 1px solid #FFF;
	border-bottom-style: none;
	list-style-type: none;
	margin: 30px 0;
}

ol#comments li {
	border-bottom: 1px solid #FFF;
	margin-bottom: 0px;
	padding: 20px;
	overflow: hidden;
}

ol#comments li h3 {
	margin-bottom: 8px;		/* eyeballed */
}
 
ol#comments li p {
	margin-bottom: 0px;
}

ol#comments li p + p {
	margin-top: 30px;
}

ol#comments li.odd {
	background: #333;
}

ol#comments li.even {
	background: #222;
}

ol#comments li.highlight {
	background: #171017;
}

ol#comments div.comment {
	margin-left: 70px;
}

img.avatar {
	float: left;
	margin-top: 7px;
}
	
/****************************************************************************************** SIDEBAR STYLES */

div#sidebar {
	float: left;
	font-size: 90%;
	margin-top: 63px;		/* eyeballed to match bottom border of h2 from content side */
	padding: 0 10px;
	width: 170px;
}

div#sidebar ul {
	margin-left: 20px;
}

div#sidebar li {
	margin-bottom: 0px;
}

div#sidebar .widget_twitter li {
	list-style-type: none;
	margin-left: -20px;
}

div#sidebar p,
div#sidebar li {
	line-height: 16px;
}

div#sidebar img.lastfm-img {
	margin: 0 auto;
}

div#sidebar a.twitterwidget,
div#sidebar a.twitterwidget:focus,
div#sidebar a.twitterwidget:hover {
	color: #EDEDED;
	cursor: default;
	text-decoration: none;
}

div#sidebar span.entry-meta {
	display: none;
}
	
/****************************************************************************************** FOOTER STYLES */

div#push,
div#footer {
	clear: both;
	height: 57px;
	margin: 0 auto;
	width: 960px;
}

div#footer p {
	color: #979797;
	padding-right: 30px;
	text-align: right;
	width: 685px;
}

div#footer a {
	color: #1590A7;
}

div#footer a:hover,
div#footer a:focus {
	color: #4BBD00;
}