/*	FILE DESCRIPTION:

	Part of ode theme: logic 1.1 , 2010/0402
	Distributed with Ode 1.1 package

    Author: Rob Reed
    Contact: rob at ode-is-simple.com

    Project: Ode (pronounced oh-dee)
    Website: ode-is-simple.com/
    Weblog:  news.ode-is-simple.com/weblog
    Forum:   ode-is-simple.com/vanilla2_forum/


    License
    ----------

    Creative Commons Attribution-Share Alike 3.0 United States

    For more information refer to:
    http://creativecommons.org/licenses/by-sa/3.0/us/

    Note: Be aware that continued use of this license is something that
    I am still considering.

    Future versions may be released under some other license.

    I do expect that any future license will be for the most part compatible
    this one.

    Changes introduced with this version of the theme
    ----------
    Keep in mind that these changes are not necessarily limited to the
    stylesheet. They may include changes to the page._
    file or other aspects of the theme as well.

    1. Added variables for the new breadcrumb trail feature
    to the page._ file.
    + ----------
    2. Replaced $previous_post_string and $next_post_string in the
    page._ file with the single combination variable 

    $previous_and_next_post_string,

    which is required for next and previous post
    strings to be handled properly for post type requests.
    + ----------
    3. Slightly reorganized the structure of the page and some of the
    styles.

    Some of these changes:
    
    a. I've updated the header styles so that h1 - h6 are
    legitimately useful. Whereas before
    
    h1 was too big to fit the theme,
    h4 - h6 were too small to be used effectively.

    That left only 2 usable header styles which I felt was limiting.

    b. The blockquote style has been updated.
    
    What was was sort of a gaudy green
    theme before has been replaced by much subtler 'quoted text'
    type left border.

    c. Added several highlight styles (pink, green, blue, and yellow).
    
    I've always found highlighting to be a useful way to emphasize text
    without overusing bold and underlining.

    This also sets the stage for highlighting of matching terms
    in search results.

    d. ... There are other minor changes as well.
*/


/*	STYLE MAP

	Misc formatting bits	

	+ body
	|	+ #wrapper
	|	|	+ #site_header
	|	|	|	+ #site_header_text
	|	|	+ #content_header
	|	|	+ #two_column_container
	|	|	|	+ #content_area_container
	|	|	|	|	+ #site_description
	|	|	|	|	|	+ #site_description_text
	|	|	|	|	+ #ode_response
	|	|	|	|	+ #req_breadcrumb_trail
	|	|	|	|	+ #content_area_message
	|	|	|	|	+ #content_area_banner
	|	|	|	|	+ #posts_container
	|	|	|	|	|	+ .date
	|	|	|	|	|	+ .individual_post
	|	|	|	|	|	|	+ .post_title
	|	|	|	|	|	|	+ .post_body
	|	|	|	|	|	|	+ .post_footer
	|	|	|	|	|	|	|	+ .post_breadcrumb_trail
	|	|	|	|	+ #content_area_footer
	|	|	|	+ #sidebar
	|	|	|	|	+ #sidebar .block
	|	|	|	|	+ #sidebar .footer
	|	|	|	|	+ #sidebar .spacer
 */


/*	ORDER OF STYLE RULES

	display
	position
	top, right, bottom, left, 
	margin
	margin-top, margin-right, margin-bottom, margin-left
	height
	width
	border
	border-top, border-right, border-bottom, border-left
	border-color, border-width, border-style
	background
	background-color, background-image, background-repeat
	padding
	float
	clear
	line-height
	text-align
	vertical-align
	font-family
	font-size
	font-style
	font-weight
	color
	text-decoration
	list-style
	list-style-type, list-style-position
	overflow
*/

/* Changes
	

*/

/* @group FORMATTING BITS */


/* @group LINK STYLES */

a { text-decoration: none; }

a:link {
	border-bottom: 1px solid #c6c6c6; /* light grey */
	color: #4870a3; /* med dull blue */
}

a:visited {
	border-bottom: none; /* light grey */
	color: #4870a3; /* med dull blue */
}

a:hover {
	border-bottom: 1px solid #c6c6c6; /* light grey */	
	color: #008000; /* strong green */
}

.feedback a:hover {
	border-bottom: none;
	color: inherit;
}

.post_title a:link {
	border-bottom: none;
	color: #0062a9; /* med bright blue */
}

.post_title a:visited {
	border-bottom: none;
	color: #0062a9; /* med bright blue */
}

.post_title a:hover {
	border-bottom: 1px solid #c6c6c6; /* light grey */
	color: #008000; /* strong green */
}

/* @end */


/* @group HEADER STYLES */

h {
	font-family: Verdana, sans-serif;
	color: #555; /* dark grey */
}

h1 {
	font-size: 18px;
	font-weight: normal;
}

#content_area_message h1 {
	margin-top: 0;
	font-weight: normal;
}

#content_area_banner h1 {
	margin: 0;
	padding: 0;
	font-size:	14px;
	font-weight: normal;
}	/* #content_area_banner specifies the area
	   immediately beneath the site description area,
	   which includes the word "Posts" and
	   the small feed image in the theme */

.post_body h1 {
	margin: 20px 0 10px 0;
}

#sidebar h1 {
	margin: 0 0 5px 0;
	border-bottom: 1px solid #ccc;
	font-size: 14px;
	font-weight: normal;
}

h2 {
	font-size: 16px;
	font-weight: normal;
}

.post_body h2 {
	margin: 20px 0 10px 0;
}

#sidebar h2 {
	margin: 0 0 12px 0;
	font-size: 12px;
	font-style: italic;
	font-weight: normal;
}

h3 {
	font-size: 16px;
	font-style: italic;
	font-weight: normal;
}

.post_body h3 {
	margin: 20px 0 10px 0;
}

#sidebar h3 {
	margin:  0 0 5px 0;
	font-size: 12px;
	font-weight: normal;
}


h4 {
	font-size: 14px;
	font-weight: normal;
}

.post_body h4 {
	margin: 20px 0 10px 0;
}

.tangent h4 {
	margin-top: 10px;
	font-size: 14px;
	font-weight: normal;
}

h5 {
	font-size: 14px;
	font-style: italic;
	font-weight: normal;
}

.post_body h5 {
	margin: 20px 0 10px 0;
}

h6 {
	font-size: 12px;
}

.post_body h6 {
	margin: 20px 0 10px 0;
}


/* @end */


/* @group IMG STYLES */

img {
	border: none;
	margin: 0;
	padding: 0;
}

#content_header img {
	border: none;
	margin: 10px 0 0 0;
	padding: 0;
}

#content_area_banner img {
	margin-top: 4px;
}	/* #content_area_banner specifies the area
	   immediately beneath the site description area,
	   which includes the word "Posts". */

.post_body img {
	display: block;
 	margin: 10px auto;
	/* border: 1px solid #444; */
}

.post_body img.left {
	margin: 10px 0 10px 0;
}

.post_body img.float_left {
	float: left;
	margin: 0 10px 0 0;
}

.post_body p img.float_right {
	float: right;
	margin: 0 0 0 10px;
}

#sidebar .block img {
	display: block;
 	margin: 10px auto;
 	border: 1px solid #cbcccb;
}

/* @end */

/* @group MISC STYLES */

#content_area_message .critical {
	color: #cf1a17; /* med-dark red */
	font-weight: bold;
	
}

.post_title p {
	margin: 0;
	padding: 0;
}

.post_body ul p {
	margin: 5px 0;
	padding: 0;
}

.post_body ol p {
	margin: 5px 0;
	padding: 0;
}

.post_body iframe {
	display: block;
 	margin: 10px auto;
	/* border: 1px solid #444; */	
}

.post_body object {
	display: block;
 	margin: 10px auto;
	/* border: 1px solid #444; */	
}

.post_body pre {
	border-top: 1px solid #c6c6c6; /* light grey-purple */
	border-bottom: 1px solid #c6c6c6; /* light grey-purple */
	background-color: #e8e8e8; /* lighter grey-purple */
	padding: 5px;
	text-decoration: none;
	font-family: Monaco, Courier, "Courier New", mono;

	white-space: pre-wrap;       /* css-3 */
	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
	/* I picked up these white-space rules from
	myy.helia.fi/~karte/ \
	pre-wrap-css3-mozilla-opera-ie.html
	via vafer.org/blog/.
	They do seem to help the situation with text wrapping in
	preformatted blocks.
	Some of these may be unnecessary and I'm not sure
	it resolves the situation completely (I've done only the most
	limited of testing at this point).
	This may change in some future version of the theme.
	robreed 2010-0415 5:21 pm */
}

.post_body code { 
		font-family: Monaco, "Courier New", Courier, mono;
}

.post_body blockquote {
	margin: 20px 10px;
	border-left: 3px solid #cbcccb; /* strong green */
	padding: 0 10px;
	line-height: 1.5em;
	text-align: left;
	color: #444; /* dark grey, nearly black */
}

/* .post_body blockquote {
	margin: 20px 0;
	border-top: 1px solid #99cc66; */ /* strong green */
	/* border-bottom: 1px solid #99cc66; */ /* strong green */
	/* background-color: #ebf7d1; */ /* very weak green */
	/* padding: 5px 10px;
	line-height: 1.5em;
	text-align: left;
	color: #444; */ /* dark grey, nearly black
} */

.post_body .tangent {
	margin: 20px 10px;
	border: 1px solid #cbcccb;
	padding: 0 5px 0 5px;
}

.post_body .tangent .note {
	font-style: italic;
}

.post_body .2px_border {
	border: 2px solid #303030; /* med dark grey */
}

# sidebar .block p { ; }

.text-align_left {
	text-align: left;
}

.text-align_center {
	text-align: center;
}

.text-align_right {
	text-align: right;
}

.strike_that {
	text-decoration: line-through;
}	/* it's probably easier
	   to just use <strike></strike> */

.hl_pink {
	background-color: #fabbc3; /* light pink
								works well behind black text */
	padding: 3px;
}	/*  the 'hl' in the name is an abreviation
		for 'highlight' */

.hl_green {
	background-color: #abdba1; /* light bright green
								works well behind black text */
	padding: 3px;
}	/*  the 'hl' in the name is an abreviation
		for 'highlight' */

.hl_blue {
	background-color: #9dd7fb; /* light bright blue
								works well behind black text */
	padding: 3px;
}	/*  the 'hl' in the name is an abreviation
		for 'highlight' */

.hl_yellow {
	background-color: #ebfa89; /* med yellow
								works well behind black text */
	padding: 3px;
}	/*  the 'hl' in the name is an abreviation
		for 'highlight' */

.italicize_me {
	font-style: italic;
}	/* it's probably easier
	   to just use <em></em> */

/* @end */

/* @group LIST STYLES */

#content_area_banner ul {
	margin: 0;
	padding: 0;
	text-align: left;
	font-size: 10px;
	color: #76797c; /* dark-med grey */
	list-style-type: none;
}	/* #content_area_banner specifies the area
	   immediately beneath the site description area,
	   which includes the word "Posts". */

#content_area_banner li {
 	display: inline;
}	/* #content_area_banner specifies the area
	   immediately beneath the site description area,
	   which includes the word "Posts". */

.post_body ul {
	margin: 0 0 0 20px;
	padding: 0;
	list-style-type: disc;
	list-style-position: outside;
}

.post_body ol {
	margin: 0 0 0 24px;
	padding-left: 10px; /* Updated 2011_0103 so that list numbers don't disappear
	                       off the left boundary of a container.
	                       
	                       Value was:
	                       padding: 0;
	                    */

	list-style-type: decimal;
	list-style-position: outside;
}

.post_body li { ; }

#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#sidebar .block li {
	margin: 10px 0;
	padding: 0 0 0 14px;
}

/* @end */

/* @end */


/* @group LAYOUT/STRUCTURAL STYLES */

body {
	margin: 0;
	background-color: #efefef; /* light grey */
	padding: 0;
	text-align: center;
	/* centered to fix centered layout
	   auto left/right margins of wrapper
	   in some browsers (IE 6)
	   text left aligned again in #wrapper */

	font-family: Verdana, sans-serif;
	font-size: 12px;
}


#wrapper {
	margin:  25px auto 15px auto;
	width: 782px;
	border: 1px solid #beb7ae; /*light grey-yellow */
	background-color: #fff; /* white */
	
	padding: 5px;
	text-align: left;
	color: #444;
}	/* specifies an area inside the browser window
	   which contains all content.
	   Everything else can be considered empty space */

#site_header {
	height: 22px;
	padding: 5px 0;
	overflow: hidden;
}

#site_header_text {
	padding: 0 0 0 2px;
	vertical-align: middle;
}

#content_header {
	padding: 0;
	height: 150px;
	width: 782px;
	background-color: #444; /* dark grey, nearly black */
	margin: 0;
	text-align: center;
}	/*	specifies the space reserved for the content header.
		The default is a 321px x 151px image
		of the Ode mascot. */

#two_column_container {
	margin: 0 0 0 0;
	background-image: url("images/background_wrapper.jpg");
	/* background-color: #e3e9ef; */ /* very light blue */
	overflow: hidden;
}	/* Specifies the two (2) columns
	   which dominate the design of the site */

#content_area_container {
	width:	515px;
	/* border-right: 1px solid #d9d9d9; */
	background-color: #fff;
	padding: 0 10px 0 0;
	float:	left;
}

#site_description {
	margin: 10px 0 10px 2px;
	height: 18px;
	padding: 0 0 0 0;
	overflow: hidden;
}

#site_description_text {
	;
}

#content_area_message {
	margin: 10px 0;
	border-top: 1px solid #90b557; /* med green */
	border-bottom: 1px solid #90b557; /* med green */
    background: #e7f1d7; /* mint light green */
	padding: 10px;
	color: #656565; /* med-dark grey */
}

#content_area_message_text {
	;
}

#ode_response {
	margin: 10px 0;
	border-top: 1px solid #ffc2ca;
	border-bottom: 1px solid #ffc2ca;
	background: #ffedef; /* light red */
	padding: 5px;
	color: #838383; /* med grey */
}

#req_breadcrumb_trail { 
	margin: 10px 0 10px 2px; 
}

#content_area_banner {
	padding: 10px 0;
}	/* #content_area_banner specifies the area 
	   immediately beneath the site description area,
	   which by default includes
	   the word "Posts". */

#posts_container {
	background-color: #fff;
}	/* contains post dates, individual_post(s)
	   and nothing else */

#posts_container .date {
	margin: 0 0 30px 0;
	border-top: 1px dotted #cfcfcf;  /* light grey */
	border-bottom: 1px dotted #cfcfcf;  /* light grey */
	padding: 5px 0;
	text-align: left;
}

#posts_container .individual_post {
	margin: 0 0 60px 0;
	padding: 0;
}	/* specifies one individual post,
	   as opposed to posts_container,
	   which holds all individual_post(s) */


.post_title {
	margin: 0 0 10px 0;
	font-size:	16px;
	font-weight: normal;	
}

.post_body { 
	padding: 0;
	margin: 0;
}

.post_footer {
	margin: 0 0 0 0;
	padding-top: 10px;
	clear: both;
}

.post_breadcrumb_trail { ; }

#content_area_footer {
	visibility: visible;
}
/*	Specifies the area immediately after
	the end of the #posts_container.
*/

#sidebar {
	height: 100%;
	width: 256px;
	float: right;
}

#sidebar .block {
	padding: 10px 10px 0 10px;
}


#sidebar .block .footer5 {
	height: 5px;
}

#sidebar .block .footer10 {
	height: 10px;
}

#sidebar .block .footer25 {
	height: 25px;
}

#sidebar .spacer {
	height: 5px;
}

#sidebar .spacer10 {
	height: 10px;
}
#sidebar .spacer25 {
	height: 25px;
}

/* @end */

/* border: 1px solid #CCC; */ /* med grey */
/* Visual layout guide */