/* Stylesheet for jill/txt */

/* The basics were done by Jill Walker, with plenty of borrowing (URLs below)
and then when it didn't work in Explorer the skilled, generous and heroic Frank Schaap of http://fragment.nl stepped in and simplified the code and loaded the main image in CSS instead of in HTML and did the Universal Font thing and I so totally owe him a beer or five. */

/* If any of this is useful to you, please use it. Jill. */

body {
	background-color: #fff;
	color: black;
	font-family: verdana, sans-serif;
	margin: 0;
	padding: 0;
	font-family: "Lucida Grande", Verdana, "Bitstream Vera Sans", "Luxi Sans", Lucida, Geneva, Arial, Helvetica, sans-serif; 
	font-size: 76%;
	}
	/* This is Owen Brigg's Universal Font Definition which will look pretty much the same across almost every graphical browser of the late 20th, early 21st century. It also includes some of the RealWorldStyle tips on how to be nice to OSX and *nix users. See: http://www.realworldstyle.com/ and http://www.thenoodleincident.com/tutorials/typography/index.html
	Setting the font to 76% on the body allows you to set sizes on the fonts for the rest of the document in EMs, meaning that the fonts will resize correctly in every browser. Most fonts set to 1 or 1.1em will look like the often used 11 or 12px settings for body text; going up to 1.4 to 2em will give you a nice heading size font */


/* These are the main layout boxes */

/* THE THREE COLUMN LAYOUT.*/

/* I have three columns, which I've called left, right and main. In the HTML I refer to these as  <div id="blogposts"> etc. This allows me to put the main content of my page (the centre column) at the beginning of the HTML code, and the sidebars at the end - and so if you're reading my page in a text-only browser (as you might if you're browsing from a PDA or if you're blind and are using a text-to-voice browser) you'll see the main content before you see all the boring navigational links. */

/* Using a container around the whole layout is an idea from Russ Weakley's tutorial on how to make columns that are as long as each other even when one of them has less content than the other. The background image for the left column goes in the container, not the column itself, and so stretches right down.Having a footer also seems to be necessary. See http://nemesis1.f2o.org/articles */

#container {
	margin: 0;
	padding: 0;
	background-image: url(http://jilltxt.net/images/bkgd-left-column.gif);
	background-repeat: repeat-y;
	width:100%;
	}

#left {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	width: 215px;
	background-image: url(http://jilltxt.net/images/bloggingthis.jpg);
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: left top;
	}

#blogposts {
	margin: 170px 185px 0px 230px;
	padding: 0px 0px 0px 0px;
 	}

#right {
	position: absolute;
	top: 0;
	right: 0; 
	margin: 0;
	padding: 60px 0 0 0;
	width: 170px;
	}

/* Further */


h1,h2,h3 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	}


h1 {
	font-size: 5em;
	position: absolute;
	top: 60px;
	left: 200px;
	z-index: 10;
	margin: 0;
	padding: 0;
	color: #993366;
	}

h2 {
	font-size: 1.6em;
	color: #511515;
	}

/* This sets the font size for any and all paragraph tags in the main blogposts div, you may want to set block level elements such as blockquote and/or lists separately; you can also add some nice paddings and such there. Anything that is not deliberately styled here will show up unstyled, giving you finegrained access to the styling of your page. */

#blogposts p, td {
	font-size: 1.1em;
	line-height: 150%;
	}

#blogposts blockquote {
                                          	font-size: 1.1em;
                                          }
#blogposts li {
	font-size: 1.1em;
	}
#blogposts li ul {
	font-size: 1.1em;
	}

#blogposts .posted	{text-align:right;
		  padding: 3px 4px 0 50px;
		  color: #993366;
		}

/* To start with: properties that both side lists have in common. Notice that the position is set to absolute here, but only relation to the top is specified. The right and left stuff happens in the #left and #right. */

div.sides { 
	font-size: .9em;
	}

div.sides h2 {
	font-size: 1.5em;
	}

#left-boxes {
	margin: 430px 0 0 0;
	padding: 0;
	}

/* START - round-cornered box code from http://www.redmelon.net/tstme/4corners/ */

 /* set millions of background images */
.rbroundbox { background: url(http://jilltxt.net/images/c00.gif) repeat;  }
.rbtop div  { background: url(http://jilltxt.net/images/c11.gif) no-repeat top left; }
.rbtop      { background: url(http://jilltxt.net/images/c12.gif) no-repeat top right; }
.rbbot div  { background: url(http://jilltxt.net/images/c21.gif) no-repeat bottom left; }
.rbbot      { background: url(http://jilltxt.net/images/c22.gif) no-repeat bottom right; }

/* I need different tags for the left column boxes because they're against a dark background */

.rbtop-dark div  { background: url(/images/c11-dark.gif) no-repeat top left; }
.rbtop      { background: url(/images/c12.gif) no-repeat top right; }
.rbbot div  { background: url(/images/c21.gif) no-repeat bottom left; }
.rbbot      { background: url(/images/c22.gif) no-repeat bottom right; }

/* height and width stuff, width not really necessary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
	width: 100%;
	height: 7px;
	font-size: 1px;
}

.rbroundbox { margin: 1.2em;  }
.rbcontent  { margin: 0 7px; }

/*  END  - first example */

/* footer is now superfluous, so unstyled */

#footer {
	}

#drjill {
	position: absolute;
	top: 3px;
	right: 3px;
	font-size: .9em;
	color: #003333;
	} 


/* these are to style images and so on within the round-cornered boxes. Inspired by Eric Meyer http://www.complexspiral.com/publications/containing-floats/ */

div.rbroundbox img {float:left;
                                        padding: 10px;}
p.imgtxt                      {}
p.more                        {clear:left;
                                       padding-left:5px;
                                     }

/* end of Eric Meyer stuff */

A{text-decoration:none;font-weight:bold;} 
A:link{color:#663333;}
A:visited{color:#330000;}