/* FILE DESCRIPTION: Part of ode theme: logic 1.2.1 , 2010/0427 Distributed with Ode 1.2.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. Removed $found_theme_url prefix from relative links to resources associated with the theme. Starting with this version (1.2.1) the script no longer requires that $found_theme_url be included in theme files. This change was made because HTML editors, design, and development apps will not recognize this Ode-specific variable and as a result links to resources, including images and stylesheets, break. 2. Added additional style rules to preformatted text (pre) which allows text to wrap in preformatted blocks. I've only tested this in a limited way. It may not work under all circumstances, and it's possible that some of the rules aren't required. But, it's a big improvement over the old behavior. (Before now preformatted text would never wrap.) */ /* 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: 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.png); /* 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 */