/* $Id: base-weblog.css 14515 2006-01-12 00:01:26Z tfickes $ */


/* ====================================================================
COLUMNS LAYOUT
The layout methods on this page are largely the hard work (freely given) 
of many people from the css-discuss list [http://www.css-discuss.org], 
including (but not limited to) Big John, Holly Bergevin, 
Douglas Livingstone, Scott Sauyet, Victor Caston, Mike Papageorge, 
and me, Alex Robinson [css-stuff@alex.cloudband.com]
-------------------------------------------------------------------- */

#columns-float {
	float: left;
	width: 797px;
	}

#content {
	top: -12px;
	float: right;
	width: 590px;
	margin: 0 12px;
	padding-bottom: 25px;
	}

#left, #right { margin-bottom: 65px } /* Corresponds to #content padding above - this is to allow room for rounded corners to show at the bottom */

/* CSS HACK: Caio hide from NN4 since NN4's float model is all wrong */
/*/*/
#left { margin-right: 614px }
#right { margin-left: 797px }
/* */

/* CSS HACK:  position:relative needed by IE6 otherwise the header and col 2 don't show up on initial rendering - they're there but you have to minimise the window or switch to another app and back to see the full effect. But IE5(pc) doesn't like it. And neither does NN4.
NB. the use of pos:rel has to go way beyond skin-deep - any nested element that needs a background colour appears to require to be be relatively positioned */ 
/*/*/
#container, #columns-float, #content, #left, #right, h2 { p\osition: relative }
/* */

#clear { clear: both } /* CSS HACK: only for NN4, so now use Caio hack to cleanse palette */
/*/*/ #clear { display: none } /* */

/* container is only needed if you want to set a background color for the columns, put a border round the content block or fix the content width */

#fauxcolumns, #container {
	color: #fff;
	width: 980px;
	text-align: left;
	margin: 0 auto;
	padding: 0;
	}

/* CSS HACK: The following several rules will be applied only to IE 5-6.x/Windows browsers.
The '* html' declaration is known as the Tan Hack. Only Internet Explorer recognizes this declaration. IE5-Mac doesn't want to see all these however, so we incorporate the 'commented backslash hack' to hide the following rules from IE5-Mac. The next instance of a closing comment closes off the commented backslash hack. */

/* Hides from IE5-mac \*/
* html #columns-float { margin-right: -3px }
* html #content { margin: 0 6px 0 9px }
* html #left { margin-right: -3px }
* html #right { margin-left: -3px }
* html #curtain .entry { padding-top: 15px }

* html #left, * html #right, * html .entry, * html .photoentry, 
* html .posted, * html .acomment, * html #comments { height: 1px }

/* End hide from IE5-mac */
/* The #curtain .entry rule up top isn't truly needed, but it's a nice touch that the other browsers didn't think much of. */


/* CSS HACK: The following rule imports the stylesheet ONLY in IE5.0/Win.
See http://www.tantek.com/CSS/Examples/ie50winbandpass.html for details. */
@media tty {
 i{content:"\";/*" "*/}}; @import 'ie50win.css'; {;}/*";}
}/* */

/* documentation on the following '.clearfix' solution to clearing floats at the end of boxes is found at http://www.positioniseverything.net/easyclearing.html */

/* NOTE: the '.clearfix' class (or renamed equivalent) should be applied to the box CONTAINING the float */
.clearfix:after, .entry:after, .reverse:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix, .entry, .reverse { display: inline-block }

/* Backslash hack - hide code from IE-mac until next comment\*/
.clearfix, .entry, .reverse { display: block }
* html .clearfix, * html .entry, * html .reverse { height: 1% } /* End hide from IE-mac. The * makes this rule apply only to IE - the "Tan Hack" is documented at http://www.positioniseverything.net/articles/box-model.html */

/* ====================================================================
GENERAL STYLING

border:nones are for NN4
-------------------------------------------------------------------- */

html, body, div { margin: 0; padding: 0 }

img { border: 0 none }

body {
	background: #000;
	text-align: center;
	font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	}

#banner {
	height: 159px;
	padding: 0;
	}
	
#banner h1 {
	width:100%; 
	height:159px;
}

#banner a { text-decoration: none }
#banner a:hover { cursor: pointer }

#content {
	color: #000;
	background: url(/i/dingbat_large.gif) no-repeat 50% bottom;
	}


/* -- -- -- -- -- the headers -- -- -- -- -- */

h1, h2, h3 {
	margin: 0;
	padding: 0;
	font-weight: normal;
	}

#left h2, #right h2 {
	height: 37px;
	text-indent: -1000em; /* This amount is corrected for in ie50win.css */
	}

#right h2 { background-position: right }


/* -- -- -- -- -- link tags -- -- -- -- -- */

a:hover, #curtain a:hover, #curtain .posted a, #curtain .extended a:hover, .entry .genre a { color: #fff }

.genre a { text-decoration: none }

a:hover, #curtain a:hover { text-decoration: underline }

.entry a:hover { color: #000 }


/* -- -- -- -- -- Center Column -- -- -- -- -- */

#content pre { font-size: larger }

#content blockquote, #content .blockquote {
	line-height: 120%;
	margin: 0 20px 10px;
	background-color: #eee;
	padding: 5px;
	font-family: Georgia, Times, serif;
	}

#content li { line-height: 150% }

#content h3 {
	font-family: Verdana, Arial, sans-serif;
	font-size: 1.1em;
	letter-spacing:1px;
	text-align: left;
	font-weight: bold;
	padding-left: 5px;
	margin-bottom: 10px;
}

#content h4, #content .posted, .postedcomment, #comments { color: #666 }

#content h4 {
	font-size: small;
	margin: 0 0 .8em;
}

#content .posted {
	background: #ddd;
	border-top: 1px solid #999;
	padding: 3px 8px;
	font-size: 80%;
	margin: 0;
}

.entry {
	color: #000;
	background: #fff url(/i/entrybase.gif) no-repeat bottom;
	padding-bottom: 7px;
	border: none;
	margin: 0 0 12px;
	}

#content .entry h3 { padding: 6px 15px 2px; text-align: right }
/* Note: text-align: right is to force the .genre class to stay to the right.
Originally it was floated to the right and came first, but this way, the .genre
text wraps before the heading does. */

.entry h3 a.title { text-decoration: none }

.entry .header {
	display: block;
	float: left;
	text-transform: uppercase;
	}

.genre {
	color: #000;
	font-size: 75%;
	font-weight: normal;
	padding: 2px 0;
	height: 21px;
	}

.entry p, .entry h4, .entry h5, .entry h6 { margin: 0 10px 10px}
.entry table { margin: 10px }
.entry h1, .entry h2 { margin: 1em 10px .3em }
.entry h1 { font-size: 1.5em }
.entry h2 { font-size: 1.2em }

.entry .section { padding-top: .5em; border-top: 1px solid #ccc }

.entry p {
	font-weight: normal;
	line-height: 150%;
	text-align: left;
	}


.entry .callout {
	float: right;
	margin: .2em 10px 1em 1em;
	width: 240px; /* i.e., roughly 40% of #content width */
	padding: 1em 5px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	font-family: Georgia, serif;
	font-size: 120%;
	line-height: 1.7em;
	color: #111;
	}

.entry span.callout { margin-top: 1em }

.center, .center * { text-align: center !important }

/* -- -- -- -- -- comment styling -- -- -- -- -- */

.comment { padding:12px 15px 0 }

.comment, .comments, #comments { background-color:#ddd }

.comments, .comments-content, .comment-content, .comment-footer { margin: 0 }

.comments-open {
	background: url(/i/entrybase.gif) no-repeat bottom;
	padding-bottom: 7px;
	margin-bottom: 0px;
	}

.comment form { margin: 0 }

#content h3#comments {
	padding: 0 0 .4em;
	background-image: none;
	text-align: left;
	float: none;
	}

.comment p {
	padding: 0;
	margin-bottom: .75em;
	}

.postedcomment { font-size: 90%; margin: 0 }

h3#comments {
	border-bottom: 1px solid #999;
	margin: 1em 0 0;
	}

#postacomment {
	border-top: 1px solid #999;
	padding: 1em 0;
	}

#comments + #postacomment { border: 0; }

.acomment {
	margin: 1em 0;
	padding: 5px;
/* IE6/Win displays the 'Peekaboo bug' in relation to the .acomment class. 
A fix is provided above inside the first Tan Hack. */
}

/* -- -- --  comment switching, author comments -- -- --  */
.comment1, .comment2 { background: #ccc }
/* so it turns out we're not doing comment switching after all */

.mycomment { background-color:#fff }

.mycomment .commentnumber { color: #000 }

/* -- -- --  comment number -- -- -- */
a.commentnumber {
	font-size:250%;
	position: relative;
	display: block;
	float:right;
	padding: 6px 10px 8px;
	top: -5px;
	right: -15px;
	font-weight:normal;
	font-family: Georgia, "Trebuchet MS", Meta, serif; /* and why the heck not? */
	text-decoration:none;
}

a.commentnumber:hover {
	color:#000;
	background: #fff;
	text-decoration: none;
	border-style: solid;
	border-width: 0 0 1px 1px;
}

/* -- test -- */


/* -- Forms -- */

input { 
	background-image: none;
	margin-bottom: 6px;
	}

#left input, #right input { 
	background: #000;
	color: #fff;
	}

input .submit { font-weight: bold }

label.column {
	display: block;
	float: left;
	width: 100px;
	}

/* -- -- -- -- -- sidebars -- -- -- -- -- */

#left p, #right p { color: #fff }

#left p, #right p, #left h3, #right h3 { margin-left: 10px }

#left ul, #right ul {
	padding-left: 10px;
	margin: 10px 0 20px;
	}

#left ul ul, #right ul ul { margin: 0 }

#left #categories ul, #right #categories ul { padding-left: 10px }

#left li, #right li {
	color: #ccc;
	text-align: left;
	line-height: 150%;
	margin-top: 5px;
	list-style-type: none;
	}

/* This is really just for the help page, I think... */
#left .explicit li, #right .explicit li {
	list-style-type: disc;
	list-style-position: inside;
	font-size: 90%;
	margin-bottom: 10px;
	}

#left #categories li, #right #categories li { list-style-type: none }

#left img, #right img { border: 3px solid #fff }

.blogosphere li {
	line-height:1.2em;
	padding-left:1.3em;
	margin-bottom:-4px;
}


/* -- 'Stroll' area and below 'nowplaying' or 'recently' -- */

.stroll {
	text-align: center;
	margin:1em 12px 2em;
}

h1.stroll {
	text-align: left;
	margin:10px 12px 5px;
	font-size: 1.2em;
	}

#content h1.stroll, .outsideheader, #left .playingnote, #right .playingnote {
	font-weight: normal;
	letter-spacing: 1px;
	color: #fff;
}

.outsideheader, #left .playingnote, #right .playingnote { text-align: right }

.outsideheader {
	margin: 1em 12px .3em;
	font-size: small;
}

.stroll+.outsideheader { margin: .2em }

#left .playingnote { margin: .3em 5px .3em 16px }
#right .playingnote { margin: .3em 16px .3em 5px }

#left h3, #right h3 {
	font-weight:bold;
	font-size:85%;
}
	

/* -- -- -- -- -- Floating Images & Captions -- -- -- -- -- */

.left {
	float: left;
	margin: 0 10px 1em 0;
	}

.right {
	float: right;
	margin: 0 0 1em 10px;
	text-align: right !important;
	}

p.left, p.right {
	padding: 0;
	width: 340px;
	font-style: italic;
	font-family: Georgia, Times, serif;
	}

.left img, .right img { display: block }

#curtain .left, #curtain .right { float: none; margin: 0; text-align: center }

.reverse {
	background: #000;
	color: #fff;
	padding: 10px;
	margin: -10px 0 0;
	border-right: 1px solid #999;
	border-left: 1px solid #999;
	}

.reverse a:hover, #curtain a:hover { color: #fff !important }

/* -- -- -- -- -- curtain -- -- -- -- -- */

/*
General note regarding the curtain:
IE6/Win displays the 'Peekaboo bug' in relation to the .entry class. A fix is provided above,
but any additional classes created to correspond to the .entry class (such as .photoentry) need to also be added to the list of classes inside the first Tan Hack.
*/

#curtain .reverse {
	margin: 0;
	padding: 0;
	border-width: 0;
	}

#curtain {
	margin-right: 1px; /* curtain valance graphic ended up being a pixel too narrow. Rather than re-do, I'm going to fudge this 1px. */
	margin-bottom: 1em;
	z-index: 0;
	}

#front-n-center {
	position: relative;
	text-indent: -1000em; /* This amount is corrected for in ie50win.css */
	height: 73px;
	}

#curtain .entry, #curtain .photoentry { /* general for all styles we may create in the curtain area */
	margin: 10px 120px 0;
	background: none;
	color: #fff;
	font-family: Georgia, serif;
	font-size: 110%;
	}

#curtain .photoentry { text-align: center }

/* was #curtain .entry */

#curtain .entry .textentry {
	margin:0; /* added */
	padding: .8em 15px 0;
	color: #fff;
	border: 1px solid #fff !important;
	}

#curtain .extended {
	text-align: center;
	margin-top: 2px;
	margin-bottom: 0;
	}

#curtain .posted {
	color: #fff;
	text-align: center;
	padding-top: 13px;
	border-top: none;
	background: url(/i/dingbat.gif) no-repeat 50% top;
	margin: 10px 120px 0; /* need this if outside of entry div */
	}


/* -- -- -- -- -- Search Form -- -- -- -- -- */
#searchform { margin: 5px 10px }

/* -- -- -- -- -- Donate Form -- -- -- -- -- */
/* based on work by Robert Hanson, http://archivist.incutio.com/viewlist/css-discuss/41900 */

#donateform { height: 104px; margin: 0 }

#donateform input { border: 0px solid #000 !important }

.donatebutton {
      position: absolute; top: 0px; left: 0px;
      cursor: pointer;
      overflow: hidden;
      /* WIDTH: The actual width of the image */
      width: 183px;
      /* HEIGHT: First number of padding, and number in 2nd height = actual height of image */
      padding-top: 104px;
      height: 0px !important;
      height /**/: 104px;
      /* background image set in color-specific stylesheets */
      }

.donatebutton:hover { background-position: left -104px }

#topbutton { z-index: 2 }
#bottombutton { z-index: 1 }


/* -- -- -- -- -- calendar -- -- -- -- -- */

#calendar {
	width:160px;
  	line-height: 140%;
	color: #fff;
	font-family: Verdana, Arial, sans-serif;
	font-size: x-small;
  	padding: 2px 8px;
	text-align: center;
	margin-bottom: 20px;
	}

#calendar table {
	padding: 2px;
	border-collapse: collapse;
	border: 1px solid #ccc;
	width: 100%;
	background: #000;
	}

#calendar caption {
	color: #fff;
	font-family: Verdana, Arial, sans-serif;
	font-size: x-small;
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .3em;
	}

#calendar th, #calendar td {
	text-align: center;
	font-weight: normal;
	color: #fff;
	}

#calendar td a {
	text-decoration:none;
	font-weight: bold;
}

#calendar td a:hover {
	text-decoration:none;
	background:#333;
	color: #fff;
}







div.adspot {
	border: 0;
}

div#feedburnerNetwork259 {
	width: 150px;
	margin: 20px auto;
	padding: 10px 2px;
}

div.feedburnerNetworkBlock p#proudMember,
div.feedburnerNetworkBlock p#aFeedBurnerNetwork {
	color: black;
}

div.feedburnerNetworkBlock a {
	text-decoration: none;
}

div#feedburnerNetwork259 form input#fillField {
	background: #fff;
	color: #000;
	width: 110px;
}