/* @override http://jennmartinelli.net/ode_site/themes/html-2010_0301/logic.css */

/*	FILE DESCRIPTION:

	Part of ode theme: logic 1.0 , 2010/0301
	Distributed with Ode 1.0 package
	Project home: ode-is-simple.com
	Contact: rob at ode-is-simple dot 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_message
	|	|	|	|	+ #content_area_banner
	|	|	|	|	+ #posts_container
	|	|	|	|	|	+ .date
	|	|	|	|	|	+ .individual_post
	|	|	|	|	|	|	+ .post_title
	|	|	|	|	|	|	+ .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-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
	font-family
	font-size
	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: 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 */

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

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

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

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

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

.post_title h2 {
	margin: 0;
	padding: 0;
	font-size: 16px ;
	font-weight: normal;
}	/* These post titles are anchor links
	   in the theme by default, 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;
}

.tangent h4 {
	margin-top: 10px;
	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 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 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;
}

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

/* @end */

/* @group MISC STYLES */

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

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

.post_title p {
	margin: 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 */
	padding: 5px;
	background-color: #e8e8e8; /* lighter grey-purple */
	text-decoration: none;
}

.post_body code { ; }

.post_body .tangent {
	margin: 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> */

.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 20px 0 30px;
	border-bottom-color: #bdbdbd;
	padding: 0;
	list-style-type: disc;
	list-style-position: outside;
}

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

.post_body li {
	margin: 10px 0;
}

#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: 0px !important;
	height: 28px;
	background-image: url("images/title_blogging_in_boston.png");
	background-repeat: no-repeat;
	padding: 28px 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: 279px;
	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. */

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

#site_description {
	margin-top: 10px;
	height: 0px !important;
	height: 44px;
	padding: 44px 0 0 0;
	background-image: url("images/tagline_im_always_right.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.
*/

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

#content_area_banner {
	padding: 10px 0 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 { ; }

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

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

#content_area_footer { ; }
/*	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;
}

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