/*	FILE DESCRIPTION:

	Part of ode theme: logic .1 , 2007/10218
	Distributed with ode .1 package
	Project home: ode-is-simple.com/weblog
	Contact: Rob Reed (rob@ode-is-simple.com)
*/


/*	STYLE MAP

	Misc formatting bits	

	+ body
	|	+ #wrapper
	|	|	+ #site_header
	|	|	|	+ #site_header_text
	|	|	+ #content_header
	|	|	+ #breadcrumbs
	|	|	+ #two_column_container
	|	|	|	+ #content_area_container
	|	|	|	|	+ #site_description
	|	|	|	|	|	+ #site_description_text
	|	|	|	|	+ #ode_response
	|	|	|	|	+ #content_area_banner
	|	|	|	|	+ #posts_container
	|	|	|	|	|	+ .date
	|	|	|	|	|	+ .individual_post
	|	|	|	|	|	|	+ .post_ 
	|	|	|	|	|	|	+ .post_body
	|	|	|	|	|	|	+ .post_footer
	|	|	|	|	|	|	+ .feedback
	|	|	|	|	|	|	+ .comment_response
	|	|	|	|	+ #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-left, margin-bottom
	height
	width
	border
	border-color, border-width, border-style
	background
	background-color, background-image, background-repeat
	padding
	float
	clear
	line-height
	text-align
	font-family
	font-size
	font-weight
	color
	text-decoration
	list-style
	list-style-type, list-style-position
	overflow
*/

/* Changes from default
	
	2009-0425 11:57p:
	Changed background color of .date element.
	Changed top and bottom border colors of .date element.

*/

/* @group MISC 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 {
	font-weight: bold;
	border-bottom: none;
	color: #494949; /* dark-med grey */
}

/* .post_title a:link { ; } */


/* .post_title a:visited { ; } */

/* .post_title a:hover { ; } */

/* @end */


/* @group HEADER STYLES */

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

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

#content_area_banner h1 {
	margin: 0 0 0 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 */

#content_area_banner .subscriptions {
	margin-top: 0;
	padding-bottom: 5px;
}

#content_area_banner .subscriptions img {
	position: relative;
	top: 2px;
}

.badge {
	position: relative;
	top: 2px;
}

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

#site_message h2 {
	margin: 0 0 12px 0;
	font-size: 14px;
	font-weight: normal;
}

.post_title h2 {
	margin: 0;
	padding: 0;
	font-size: 12px;
}	/* These post titles are anchor links in
	   by default in the theme so may
	   appear to be different than what is described here */

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

h3 {
	font-size: 14px;
	font-weight: bold;
}

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

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

h5 {
	font-size: 12px;
	font-weight: normal;
}

h6 {
	font-size: 10px;
	font-weight: normal;
}

/* @end */


/* @group IMG STYLES */

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

#content_header img {
	border: none;
	margin: 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" and
	   the small feed image in the theme */

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

.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 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;
}

/* @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" and
	   the small feed image in the theme */

.post_body ul {
	margin: 0 20px 0 30px;
	border-bottom-color: #bdbdbd;
	padding: 0;
	list-style-type: disc;
	list-style-position: outside;
}

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

.post_body ol {
	margin: 0 0 0 32px;
	padding: 0;
	list-style-type: decimal;
	list-style-position: outside;
}

#content_area_banner li {
 display: inline;
}	/* #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 li {
	margin: 10px 0;
}

/* #sidebar .block li {
	margin: 5px 0;
	padding: 0 0 0 2px;
} */

/* @end */


pre {
	border-top: 1px solid #c6c6c6; /* light grey-purple */
	border-bottom: 1px solid #c6c6c6; /* light grey-purple */
	padding: 5px;
	background-color: #e8e8e8; /* lighter grey-purple */
	text-decoration: none;
}

code { ; }

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 */
}

.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> */

/* @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: 0px !important;
	height: 22px;
	background-image: url("images/ode_title.png");
	background-repeat: no-repeat;
	padding: 22px 0 0 0;
	overflow: hidden;
}

#site_header_text {
	display: none;
}

/*	site_header is implemented using the
	Leahy/Langridge Image Replacement (LIR) technique
	Browsers with CSS support will see
	the image specified above.
	Browsers without CSS support will see
	equivalent text
	Browsers with CSS support but images disabled
	will see nothing.
	The only technique that addresses all of these
	issues is sIFR (Scalable Inman Flash Replacement)
	but I decided that technique was too involved for a
	default theme.
	The only (2) places in this theme where images are
	used rather than text are the site_header and
	site_description.
	It is easy enough to disable image replacement.
*/

#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. */

#content_header img {
	margin-top: 10px;
}

#breadcrumbs { ; }

#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;
}

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

#site_description {
	margin-top: 10px;
	height: 0px !important;
	height: 18px;
	padding: 18px 0 0 0;
	background-image: url("images/ode_tag.png");
	background-repeat: no-repeat;
	overflow: hidden;
 }

#site_description_text {
	display: none;
}

/*	site_description is implemented using the
	Leahy/Langridge Image Replacement (LIR) technique
	Browsers with CSS support will see
	the image specified above.
	Browsers without CSS support will see
	equivalent text
	Browsers with CSS support but images disabled
	will see nothing.
	The only technique that addresses all of these
	issues is sIFR (Scalable Inman Flash Replacement)
	but I decided that technique was too involved from a
	default theme.
	The only (2) places in this theme where images are
	used rather than text are the site_header and
	site_description.
	It is easy enough to turn disable image replacement.
*/

#site_message {
	margin: 10px 0;
	border-top: 1px solid #90b557; /* med green */
	border-bottom: 1px solid #90b557; /* med green */
	/* border-bottom: 1px solid #1b5790; */ /* med blue */
	/* border-bottom: 1px solid #6cd379; */ /* med bright green */
	/* border-bottom: 1px solid #97D330; */ /* med-dark yellowish-green */
    background: #e7f1d7; /* mint light green */
    /* background: #d7ffcd; */ /* mint light green */
    /* background: #bcfebe; */ /* muted med green */
    /* background: #e3feb3; */ /* light-med pale orangish yellow */
	padding: 10px;
	color: #656565; /* med-dark grey */
}

#site_message .critical {
	color: #cf1a17; /* med-dark red */
	font-weight: bold;
	
}
#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 */
}

#content_area_banner {
	padding-top: 10px;
}	/* #content_area_banner specifies the area 
	   immediately beneath the site description area,
	   which by default includes
	   the word "Posts" and the small feed image in the theme */

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

#posts_container .date {
	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: 30px 0;
	padding: 0;
}	/* specifies one individual post,
	   as opposed to posts_container,
	   which holds all individual_post(s) */

.post_title { ; }

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

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

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

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

#content_area_footer { ; }
/*	Specifies the area immediately after
	the end of the #posts_container.
	As distributed, contains a short message
	'Thanks for stopping by!'
*/

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

# sidebar .block p { ; }


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

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

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


#sidebar .spacer {
	height: 5px;
}

#sidebar .spacer25 {
	height: 25px;
}

#sidebar .spacer10 {
	height: 10px;
}

.feedback {
	padding-top: 20px;
	margin-top: 10px;
}

.inputtext {
	width: 505px;
	height: 144px;
	padding: 5px 0 0 5px;
}

/* @end */

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