/* FILE DESCRIPTION:

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

   Part of ode theme: logic 1.2.5 , 2010/0721

   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

   The theme, along with all associated files, is made available
   under the terms of the following license:

   Creative Commons Attribution-Share Alike 3.0 United States

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

*/


/* CHANGES / INFO SPECIFIC TO THIS VERSION OF THE THEME

   None noted.

*/


/* STYLE MAP

   [ body
   [ wrapper_header ]
   [ wrapper
   |
   |  + site_header
   |  + content_header
   |  + content_header_caption
   |
   |  [ two_column_container
   |  |
   |  |
   |  |  [ content_area_container
   |  |  |  + site_description
   |  |  |  + content_area_message
   |  |  |  + ode_response (status messages)
   |  |  |  + request_breadcrumb_trail
   |  |  |  [ posts_container
   |  |  |    [ individual_post
   |  |  |       + post_title
   |  |  |       + post_body
   |  |  |       [ post_footer
   |  |  |         + post_date
   |  |  |         + category
   |  |  |         + breadcrumb_trail
   |  |  |         + permalink
   |  |  |       post_footer ]
   |  |  |    individual_post ]
   |  |  |  posts_container ]
   |  |  |    + posts_container_footer
   |  |  content_area_container ]
   |  |
   |  |
   |  |  [ sidebar
   |  |  |  [ block
   |  |  |    + block_header
   |  |  |    + block_subheader
   |  |  |    + block_content
   |  |  |    + block_footer
   |  |  |  block]
   |  |  sidebar ]
   |  |
   |  |
   |  two_column_container ]
   |
   wrapper ]
   [wrapper_footer]
   body ]

*/


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

   a:link    (unvisited)
   a:visited
   a:hover
   a:active  (selected link)

*/

/* @group LAYOUT STYLES */

/* Styles related to the structural layout of the page.
   body, wrapper, two_column_container, ... */

body {
	margin: 0;
	background-color: #efefef; /* light grey */
	padding: 0 20px;

	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: 14px;

	color: #444; /* dark grey but distinctly
	                softer than black */
}

/* - */

#wrapper_header {
	margin:  20px auto 5px auto;
	width: 782px;
	padding: 0 5px;
	text-align: center;

} /* The wrapper_header sits outside the wrapper
     and appears to be off the page defined by
     the wrapper's border.

     Contents in this element will appear against the
     background of the body. */

  /* The wrapper_header is commented out
     by default in the associated
     page theme file. */


#wrapper_header h2 {
	font-size: 14px;
	font-weight: normal;
}

/* - */

#wrapper {
	margin:  20px auto 15px auto;
	width: 782px;
	border: 1px solid #beb7ae; /* light grey with
	                              slight yellow tint */

	background-color: #fff;    /* white */
	text-align: left;

} /* Specifies an area inside the browser window
	 which contains all of the site content.

	 Everything else can be considered
	 empty space */

/* - */

#site_header {
	margin: 2% 0 2% 6px;

} /* The site_header is the top-most element in the
     wrapper container.
     
     By default it contains a variable representing
     the site title (defined in
     Ode's config file). */


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

/* - */

#content_header {
	display: table-cell;
	width: 782px;
	background-color: #fff; /* white */
	vertical-align: middle;

} /* The content_header is the primary banner visible
	 near the top of the page (directly under
	 the site title. The default content
	 is a 321px x 131px image of the Ode mascot. */


#content_header img {
	display: block;
	margin: 0;
}

/* - */

#content_header_caption {
	display: block;
	margin: 0;
	border-bottom: 1px solid #bcbcbc; /* light-med grey */
	padding: 5px 10px 15px 5px;
	text-align: right;
}

#content_header_caption ul {
	margin: 0;
	padding: 0;
	font-size: 15px;
	list-style-type: none;
}

#content_header_caption li {
	display: inline;
}

#content_header_caption li.title {
	font-size: 12px;
	font-style: italic;
	font-weight: bold;
}

#content_header_caption li.description {
	font-size: 12px;
	font-style: italic;
	font-weight: normal;
}

/* - */

#two_column_container {
	background: url("images/background_wrapper.jpg") repeat-y;
		/* Here the background-image is a 5px tall
		image extending the full length of
		the wrapper. It is repeated vertically and provides
		the sidebar color and vert line which
		provides the visual separation of the content
		are from the sidebar. */

	overflow: hidden;

}	/* Specifies the two (2) columns
	   which dominate the layout of the site.

	   Note: Color used in the background image that provides
	   the visual separation between content area
	   and sidebar is #e3e9ef (very light blue).
	   The vertical separator is equivalent to:
	   border-right: 1px solid #d9d9d9; (light grey).

	  (These visual elements are supplied by the specified
	   background image.) */

/* - */

#content_area_container {
	width:	516px;
	margin: 0 0 0 5px;
	float:	left;

} /* The primary column of this two-column layout.
     As the name suggests, this is
     the area of the page reserved for the post
     file content. */

/* - */

#site_description {
	margin: 3% 0 3% 1px;

} /* Defines the area in the content_area_container
     immediately under the content_header.
     By default, this element includes a value representing
     the $site_description */


h2#site_description {
	font-size: 14px;
	font-weight: normal;
}

/* - */

#content_area_message {
	margin: 3% 0;
	border-top: 1px solid #90b557;           /* med green */
	border-bottom: 1px solid #90b557;        /* med green */
    background-color: #e7f1d7;        /* mint light green */
	padding: 3%;
	font-size: 12px;
	color: #606060;                      /* med-dark grey */

} /* Specifies a larg-ish area below the site_description
     and above req_breadcrumb_trail that can
     be used to display a persistent
     message to visitors.

     If you prefer to remove the message area entirely
     simply remove the content_area_message div
     from the page theme file, (and optionally
     remove this rule). */


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

/* - */

#ode_response {
	margin: 3% 0;
	border-top: 1px solid #ffc2ca; /* pink */
	border-bottom: 1px solid #ffc2ca; /* pink */
	background-color: #ffedef; /* light pink */
	padding: 2%;
	color: #838383; /* med grey */

} /* Specifies the containing element for notifications
     from Ode and installed addins.
     Note that both the message and the containing
     div are inserted into the page
     by Ode when necessary. So, you will not find
     the div in the page theme file.
	 These responses are delivered between
	 the content_area_message and the req_breadcrumb_trail */

/* - */

#req_breadcrumb_trail {
	margin: 3% 0 5% 2px;
	font-size: 12px;

} /* Defines an area used to provide a clickable
     breadcrumb trail from the destination category back to
     the root of the site's content directory. */


/* - */

#posts_container {
	margin: 5% 0 12% 0;

} /* The posts_container is where most of content related
     action of the page takes place.
     It contains one or more 'individual_post' div
     each of which corresponds to a single
     post. The posts_container element contains all of them
     as well as the date elements that
     come between posts occuring on separate days.
 	 In summary: Contains post dates,
 	 individual_post(s), and nothing else */


#posts_container .date {
	margin: 0 0 6% 0;
	border-top: 1px dotted #cfcfcf;  /* light grey */
	border-bottom: 1px dotted #cfcfcf;  /* light grey */
	padding: 1% 0;

} /* Specifies the date elements inserted between every two
     consecutive posts with distinct post dates.
     Note: These elements are inserted by the script
     as needed, so you will not find these
     elements in the page theme file.
     Also note that there may be one or more of these
     depending on a given request, and the
     posts making up the site. */


#posts_container .date ul {
	margin: 0;
	padding: 0;
	font-size: 15px;
	list-style-type: none;
}

#posts_container .date li {
	display: inline;
}


#posts_container .date li.wkday_name { ; }

#posts_container .date li.separator {
	vertical-align: 1px;
}

#posts_container .date li.month_day { ; }
#posts_container .date li.month_name { ; }
#posts_container .date li.year { ; }

/* - */

#posts_container .individual_post {
	margin: 0 0 12% 0;
	font-size: 14px;

}	/* Specifies one individual post, containing a
       post title, body, and footer
       and cooresponding to a single post file.
       You will find a single individual_post class element
       in the page theme file.
       The rendered page will contain one for each post
       that satisfies the request. */


/* @group .individual_post header styles */

.individual_post h1 {
	font-size: 21px;
	font-weight: bold;
}

.individual_post h2 { 
	font-size: 21px;
	font-weight: normal;
}

.individual_post h3 { 
	font-size: 16px;
	font-weight: bold;
}

.individual_post h4 { 
	font-size: 16px;
	font-weight: normal;
}

.individual_post h5 { 
	font-size: 12px;	
	font-weight: bold;
}

.individual_post h6 { 
	font-size: 10px;
	font-weight: bold;
}

/* @end */

/* - */

.individual_post .post_title { ; }
	/* The first line of every post file
	   becomes the title of
	   an individual post. */

 h2.post_title { 
	font-size: 18px;
	font-weight: normal;
}


/* @group .post_title link styles */

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

}

.post_title a:link { ; }
.post_title a:visited { ; }

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

.post_title a:active { ; }

/* @end */

/* - */

.individual_post .post_body {
	font-size: 14px;

	} /* The post_body contains the content of
	     a post file with the exception of
	     the first line, which is the title of
	     the post. */

/* @group .post_body list styles */

.post_body ul, ol {
	margin: 0;
	padding: 0;	
}

.post_body ul, ol p {
	margin-top: .5em;
	margin-bottom: .5em;
}

.post_body ul {
	margin-left: 20px;
}

.post_body ol {
	margin-left: 25px;
}

/* @end */


/* @group .post_body img styles */

.post_body img {
	display: block;
 	margin: 20px auto;
}

/* @end */


/* @group .post_body link styles */

.post_body a { text-decoration: none; }

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

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

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

/* @end */


/* @group .post_body misc styles */

.post_body blockquote {
	margin: 6% 10px;
	border-left: 3px solid #cbcccb; /* light grey */
	padding: 1px 0 1px 8px;
	line-height: 1.5em;
}

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

.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;
    font-family: Monaco, Courier, "Courier New", mono;
    text-decoration: none;

    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 WILL PROBABLY change in some future version
       of the theme. */
}

.post_body iframe {
	display: block;
 	margin: 10px auto;
}

.post_body object {
	display: block;
 	margin: 10px auto;
}

/* @end */

/* - */

.individual_post .post_footer { ; }
	/* The post footer contains information
	   related to an individual post,
	   but which is not the post content including
	   by default: post date, category,
	   a post specific breadcrumb trail, and
	   permalink. */


/* @group .post_footer list styles */

.post_footer ul {
	padding: 0;
	list-style-type: none;
}

.post_footer li {
	padding: 1% 0;
}

.individual_post .post_footer li.post_date { ; }
.individual_post .post_footer li.category { ; }
.individual_post .post_footer li.breadcrumb_trail { ; }
.individual_post .post_footer li.permalink { ; }

/* @end */

/* - */

#posts_container_footer {
	margin-bottom: 10px;
}


#posts_container_footer h2 {
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-weight: normal;
}

/* - */

#sidebar {
	width: 256px;
	float: right;

} /* The secondary column of this two-column layout.
     The siderbar is intended to serve as an
     area for links, and info about the site itself,
     and other info that is not the
     post content itself. */

/* - */

#sidebar .block {
	margin: 4% 10px 15% 10px;
	font-size: 12px;

} /* The sidebar area contains 0 or more sidebar
     bocks which are self-contained groupings
     of content. The design concept is that each sidebar
     block will consist of a heading,
     optional subheading, content, and a footer. */


/* @group #sidebar .block header styles */

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

#sidebar .block h3 {
	margin: 0 0 6% 0;
	font-size: 12px;
	font-style: italic;
	font-weight: normal;
}

/* @end */


/* @group #sidebar .block list styles */

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

#sidebar .block ol {
	margin: 0;
	padding: 0;
}

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

#sidebar .block ol li {
	margin: 0 0 0 20px;
	padding: 1px 0;
}

/* @end */


/* @group #sidebar .block img styles */

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

/* @end */

/* - */

#wrapper_footer {
	text-align: center;
	margin:  5px auto 15px auto;
	width: 782px;

}

#wrapper_footer h2 {
	font-size: 12px;
	font-weight: normal;
}

/* @end */

/* @group GENERIC FORMATTING BITS / DEFAULT STYLES */

/* @group HEADER STYLES */

h  { ; }
h1 { ; }
h2 { ; }
h3 { ; }
h4 { ; }
h5 { ; }
h6 { ; }

/* @end */


/* @group LIST STYLES */

ul { ; }
ol { ; }

li { ; }

/* @end */


/* @group IMG STYLES */

img { ; }

/* @end */

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

/* @end */


/* @group MISC STYLES */

/*nothing defined */

/* @end */


/* @end */

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