/*
	Theme Name: Food.Recentrunes.com 5.1
	Theme URI: http://www.recentrunes.com
	Description: A clean wordpress theme for Recent Runes 5.1
	Version: 5.1.2008Sept14
	Author: Ivan ng
	Author URI: http://www.recentrunes.com
*/


/*---------------------------------------------------------------------------

	SETUP

---------------------------------------------------------------------------*/

html {
	/*
		To prevent the screen elements jumping around because of
		the unpredictable scrollbar. This reduces the visible working
		width but it gives some predictability, i.e. less jarring.
	 */
/*	height: 100%; margin-bottom: 1px; */
}

/*
	I prefer non-black backgrounds. Baggage from the early Mosaic days
	(fudge, I'm that old) where every "homepage" was in black background
	and had animated gifs. Or heaven forbid, gray backgrounds...

	*shudder*

	It looks cool, but it is darn tootin' harder to read with black
	backgrounds. Unless, of course, you use old-school luminous green
	(for easier night reading) or amber (for easier morning reading)
	fonts.

	I guess black backgrounds are eye-catching if used judiciously...

	No; no black for now.
*/

body {
	background: #f1f1e9;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left 				aligned default in the #container selector */
	color: #000000;
}


/*---------------------------------------------------------------------------

	TYPOGRAPHY & COLORS

---------------------------------------------------------------------------*/

/*
	I am freaking working with too many different fonts here; not a
	good practice as it looks messy. However, I like large titles in
	serif like Georgia (the "in" thing now), small titles in Helvetica
	or its lesser cousin Arial.

	I am conflicted as to whether to use Helvetica or Trebuchet as the
	reading type. Helvetica looks great but is harder to read in small
	type.

	Trebuchet is easier to read but looks really ugly.

	Expect a lot of switching in the initial launch phase.

	Possibly use Georgia? Hmmm...

	Palatino Linotype looks great with cleartype tech on IE.

	I'm older now, so easy-to-read takes precedence over coolness.

*/

/*
	I've converted to using "em" instead of "px" because of
	print-compatibility.
*/

body {
	font-size: 62.5%; /* Resets 1em to 10px */
	font-family: Georgia, "Times New Roman", Serif;
	color: #333;
}


a {
	text-decoration: none;
}

a img {
	border: 0;
	color: #1c1c1c;
}


/* faux interactivity :) */
a:hover {
	text-decoration: underline;
}


h1, h2{
	font-family: "Palatino Linotype", "Baskerville Old Face", "Times New Roman", Serif;
	font-weight: normal; /* firefox renders type horribly, so it sucks no matter what setting*/
}


h3{
	font-family: Helvetica, Arial, "Trebuchet MS", Sans-Serif;
	font-weight: normal;
}


h1 {
	margin-top:10px;
	font-size: 2em;
}

h2 {
	font-size: 1.8em;
}

h3 {
	font-size: 1.5em;
}


p {
	font-family: Georgia, "Times New Roman", Serif;
        padding:0 12px 0 12px;
	font-size: 1.4em;
	line-height: 140% /* slightly less than x1.5 spacing */
}


ul {
	list-style-position: inside;
	list-style-type: square;
	font-family: Georgia, "Times New Roman", Serif;
	font-size: 1.4em;
	line-height: 140% /* slightly less than x1.5 spacing */

}

ol {
	list-style-position: inside;
	font-family: Georgia, "Times New Roman", Serif;
	font-size: 1.4em;
	line-height: 140% /* slightly less than x1.5 spacing */

}

li {
	line-height: 150% /* slightly less than x1.5 spacing */

}

blockquote {
	font-family: Georgia, "Times New Roman", Serif;
	font-size: 1.0em;
	border-left:5px solid #1c1c1c;
	padding-left: 10px;
	font-style: italic;

}


/*

	CUSTOM TEXT

*/

.footer_text{

	color:#000000;

}

.header_text{

	color:#000000;

}

.column_title{
	font-family: Helvetica, Arial, "Trebuchet MS", Sans-Serif;
	text-transform: uppercase;
	font-size: 0.9em;
	line-height: 1.8em;
	font-weight: bolder;
	padding: 0 0 0.6em 0;
	letter-spacing: 0.1em;
	color: #a11b1b; /* only non-monochromatic font color I use */
}

.pages_bar_text{
	font-family: Helvetica, Arial, "Trebuchet MS", Sans-Serif;
	text-transform: uppercase;
	font-size: 1.0em;
	line-height: 1.8em;
	font-weight: bolder;
	letter-spacing: 0.1em;
	color: #a11b1b; /* only non-monochromatic font color I use */
}

.post_title_text{
	color: #000000;
}

.meta_text{
	padding-top: 0;
	margin-top:0px;
	font-size: 1.0em;
	color: #a11b1b; /* only non-monochromatic font color I use */

}

.asides{

	font-size: 1.2em;

}

.comment_meta_text{
	font-size: 1.0em;
	line-height: 1.8em;
	padding: 0 0 0.6em 0;
	color: #a11b1b; /* only non-monochromatic font color I use */

}

.blogroll_text{
	font-family: Helvetica, Arial, "Trebuchet MS", Sans-Serif;
	font-size: 1.0em;
	line-height: 50%;
	padding: 0px;
}

.recent_comments_text{
	font-family: Helvetica, Arial, "Trebuchet MS", Sans-Serif;
	font-size: 1.0em;
}

/* picture caption */
.pic_cap{
	font-family: Helvetica, Arial, "Trebuchet MS", Sans-Serif;
	font-size: 1.0em;
}



/*---------------------------------------------------------------------------

	CONTENT PANELS

---------------------------------------------------------------------------*/

/* Container to put everything in */

/*
	I'm not happy with the 1px margin from the browser border at 1024
	rendering, but I'm constrained	by the fact that most visitors are
	still on 1024x768 resolution.

	Yes, I collect visitor statistics to improve on the site and not
	to see how popular I am. I am a Saggitarius, we don't really care
	what people think of us as long as we do what we think is right.

	I hope Safari renders this ok. Can't ask Joe now as she's not
	speaking to me.

	The ideal width for 1024 is 960-980px, but alas, I need the space
	as I am using bigger fonts as it is easier to read. My demographics
	seem to imply that my audience is part of a more mature group.

	Would you believe I still get visitors on 640x480?

	Hmmm... need to check out mobile device rendering.
*/

/*
	I've shifted all navigational items to the right. This has always
	been my preference (shizz, I remember fighting "design"committees
	on this) as we read from left to right in English and since this
	is a blog, blog entries should appear first.

	Besides, left-handed or not, 95% of the time, the mouse cursor is
	on the right side of the screen because of the scroll bar, so it's
	very convenient to have navigational elements to the right of the
	screen.

	Of course, now with mouse wheels, I'm not sure what's the new
	equation... buggerit.

	It's the little things... :}

*/

/*
	Ok, the concept here is simple. Have a container to contain a
	content container. In turn, the content container will contain...
	ahahaha... content.

	It's easier to manipulate different types content in a content
	container.

	Likewise, it's easier to position content containers in a
	container.

	(There is definitely an easier way and I wish you all the best
	when you find it. Bye bye now.)

	I am not too precise with the positioning because I have a day
	job and I can live with a little imprecison now and then, but
	feel free to tweak to your heart's content.

	Just be sure to check that it looks ok on Firefox, IE and Safari.

*/

#container_header {
	height: 150px;
	width: 100%;  /* this will create a container for the header */
	background: #1c1c1c;
	margin: 0px auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: center;
}

#container_pages_bar{
	width: 100%;  /* this will create a container for the wordpress pages */
	background: #ffffff;
	margin: 0px auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: center;
	border-top: 1px solid #c0c0c0;
	border-bottom: 1px solid #c0c0c0;
}


#container {
	width: 990px;  /* this will create a container of 990 pixels. */
	background: #f1f1e9;
	margin: 20px auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
}

#container_footer {
	width: 100%;  /* this will create a container for the header */
	background: #e4e2db;
	margin: 0px auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: center;
	border-top: 1px solid #c0c0c0;
}

#pages_bar{
	width: 990px;
	background: #ffffff;
	margin: 0px auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	padding:0,0,0,0;
}



#header{
	width: 990px;
	background: #1c1c1c;
	margin: 0px auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	padding:0,0,0,0;
}

#footer{
	width: 990px;
	margin-top:0px;
	background: #e4e2db;
	margin: 0px auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	padding:0,0,0,0;
}

#panel_left {
	float:left;
	width:540px; /* because of float, a width must be given */
	margin-top:10px;
	padding: 5px;
}

#panel_right {
	float:right;
	width:430px; /* because of float, a width must be given */
	margin-top:10px;
}

#panel_right_subleft {
	float:left;
	width:250px; /* because of float, a width must be given */

}

#panel_right_subright {
	float:right;
	width:164px; /* because of float, a width must be given */
}


#content_post{
	width:530px;
	background: #ffffff;
	padding:5px;
	margin-bottom:20px;
	border: 1px solid #c0c0c0;
}


#content_asides{
	padding:0px;
}


#content_sidebar{
	padding:0px;
}

#content_pages_bar{
	text-align: center;

}

#content_footer{
	padding:10px;
	text-align: center;

}

#container_comment_meta
{
	float:left;
	width:500px; /* because of float, a width must be given */
}


#content_comment_flickr_icon
{
	float:left;
	width:60px; /* because of float, a width must be given */
}

#content_comment_metatext
{
	float:right;
	width:440px; /* because of float, a width must be given */
}

/*---------------------------------------------------------------------------

	TWEAKS

---------------------------------------------------------------------------*/

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain its child floats */
	clear: both;
	height: 0;
	font-size: 1px;
	line-height: 0px;
}