/*
   Theme Name: Skimmed Milk
   Theme URI: http://thortz.com/skimmed-milk/
   Description: Another clean, white theme for WordPress
   Author: Thortz
   Author URI: http://thortz.com
   Version: 1.2

   October 2007
   Requires Wordpress 2.3+
   
   Note that a few rules are subsequently overriden by print.css for print media
   The .ui class is only used by print media (to prevent display of user interface elements)

   This theme was developed from
   White As Milk version 1.6 http://www.azeemazeez.com/stuff/themes/
   by Azeem Azeez http://www.azeemazeez.com
   which was based on WordPress Default http://wordpress.org/
   itself based on Kubrick by Michael Heilemann http://binarybonsai.com/kubrick/

   The CSS, XHTML and design is released under GPL:
   http://www.opensource.org/licenses/gpl-license.php

   Fonts requested:
      Lucida Grande
      Trebuchet MS
      New Courier

      with Verdana & Arial as secondary choices

   Colours used:
      #fff  clean white for the background, of course
      #484848 serious dark gray for body text and many headers
      #d00000  cheerful red for most links
      #6A0000 eco-friendly green for link hover states only
      #FF5959  murky brown for visited links in entries & comments
      #c00  alarming red to border comments awaiting moderation & for 404 titles
      #888  a low key mid gray for low key text
      #f0f0f0 light gray wash under page titles
      #f9f9f9  alt text blocks have a lighter wash
      #ddd  to top and tail alt text & for blockquote bars
*/


/*
   Short pages don't require a scroll bar, but long pages do. And since a scroll bar consumes
   some horizontal screen space, and since our rendering is centred within the screen
   an irritating sideways jump occurs when navigating between long and short pages.

   This hack forces the scroll bar to always appear by making the page want to be one pixel
   taller than it is. This prevents the jumping but you end up with an irritating ugly
   scroller hanging about when it's not wanted.

   Personally, I'd rather have clean short pages & a little jumping.
   If your preferences differ then uncomment this rule:

html {
   height: 100%;
   margin-bottom: 1px;
}
*/

/* Some defaults. Change the font size here to shrink or enlarge the whole design */
body {
   background-color: #fff;
   color: #888;
   font-size: 0.66em;
   font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
   line-height: 1.4;
   margin: 0;
   padding: 0;
   }

/* Links in orange. Background explicitly specified just to keep css validator happy */
a {
   background-color: inherit;
   color: #FF0000;
   text-decoration: none;
   }

/* Show green when mousing over a link */
a:hover {
   background-color: inherit;
   color: #E80000;
   }

/* Most headers use the thinner Trebuchet font */
h1, h2, h3, h4, h5 {
   font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
   font-weight: bold;
   line-height: normal;
   margin: 0;
   padding: 0;
   }

/* Blog title in header */
h1 {
   font-size: 3.2em;
   line-height: 1em;
   }

/* Page title at top of content, and post titles in index and single */
h2 {
   font-size: 1.8em;
   }

/* Post titles in archive and search, certain headers in comments */
h3 {
   font-size: 1.5em;
   }

/* For user use */
h4 {
   font-size: 1.3em;
   margin: 0 0 0.5em 0;
   }

h5 {
   font-size: 1.1em;
   margin: 0 0 0.3em 0;
   }

/* Paragraphs have some space below */
p {
   margin: 0 0 1.1em 0;
   }

/* The page contains everything, it centres itself horizontally within the browser */
#page {
   width: 66em;
   min-width: 25em;
   max-width: 98%;
   text-align: left;
   margin: 0 auto 0 auto;
   }

/* The side bar contains the menu of useful links on the left
   Padding added just to stop Firefox overflowing this column when click and hold link */
#sidebar {
   width: 25%;
   float: left;
   text-align: left;
   /*text-transform: lowercase;*/
   overflow: auto;
   margin: 3em 0 0 0;
   padding: 0 1px 0 0;
   }

/* The main column contains everything except the side bar, and sits against the right
   of the page */
#header, #content, #footer {
   width: 80%;
   float: right;
   }

/* The main headers within the side bar are in upper case & in the wider font */
#sidebar h2 {
   font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
   font-size: 1.2em;
   text-transform: uppercase;
   margin: 0;
   padding: 0.5em 0 0.4em 0;
   }

/* We don't want bullets drawn in our lists */
#sidebar ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   }

/* Some space below each sublist, separating it from the next h2 header */
#sidebar ul ul {
   margin: 0 0 1em 0;
   }

/* This places a right guillemot glyph before list items and
   similarly before the search submit link (fails in IE) */
#sidebar ul ul li:before, #searchform p:before {
   content: "\00BB  ";
   }

/* A touch of space to separate links */
#sidebar ul ul li {
   margin: 0 0 0.24em 0;
   }

/* Tighten up around sub-page & sub-category lists */
#sidebar ul ul ul {
   margin: 0;
   }

/* Sub-pages & sub-categories don't get a smaller guillemot thingie (not IE) */
#sidebar ul ul ul li:before {
   content: "\203a  ";
   }

/* Sub-sub-pages & sub-sub-categories and sub-sub-sub-etc don't get any blips */
#sidebar ul ul ul ul li:before {
   content: "";
   }

/* The text box of the search form has space above it, and a little below too
   Can't say font: inherit as IE don't get it */
#searchform .s {
   font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
   width: 8em;
   margin: 1em 0 0.24em 0;
   padding: 0;
   }

/* The header guards its white space */
#header {
   margin: 4em 0 4em 0;
   }

/* The footer resides below both the main column and the side bar (WinIE not sidebar)
   Arial preferred over Verdana to keep text narrow enough for wayward browsers */
#footer {
   clear: both;
   margin: 4em 0 1em 0;
   padding: 0.2em 0 0 0;
   border-top: 1px solid #888;
   font-family: 'Lucida Grande', Arial, Verdana, Sans-Serif;
   }

/* content includes everything between the header and the footer. Body text dark gray */
#content {
   background-color: inherit;
   color: #484848;
   }

/* Used for Archive & Search page headers as well as the top of 'Pages' */
h2.pagetitle {
   background-color: #f0f0f0;
   color: inherit;
   padding: 0.5em 0 0.4em 0.2em;
   margin: 0 0 2em 0;
   }

/* This class holds the next posts/previous posts links
   1px lower padding just required to get Opera to honour margin setting (!) */
.navigation {
   margin: 0 0 1.6em 0;
   padding: 0 0 1px 0;
   font-family: 'Lucida Grande', Arial, Verdana, Sans-Serif;
   font-size: 1.2em;
   }

.alignright {
   float: right;
   }

.alignleft {
   float: left;
   }

/* Blocks containing only floating child elements seem to have no height. This hack allows
   an empty, non-floating, div to be appended to give the container its true height.
   Used in #page and .navigation */
.snap-to-fit {
   clear: both;
   visibility: hidden;
   }

/* Each post has a some space below it */
.post {
   margin: 0 0 3em 0;
   }

/* Post titles on the index and single pages use h2 with a line above
   (Post titles in searches and archives use unadorned h3)
   Only posts following other posts (ie all but the first) have a line above
   Not understood (so ignored) by WinIE */
.post+.post h2 {
   padding: 0.2em 0 0 0;
   border-top: 1px solid #888;
   }

/* Post titles are also links but are shown in normal text colour.
   Have to give text colour explicitly (rather than inherit) for IE */ 
.post h2 a, .post h3 a {
   background-color: inherit;
   color: #484848;
   }

/* ..so we highlight them in orange as they are moused over */
.post h2 a:hover, .post h3 a:hover {
   background-color: inherit;
   color: #FF0000;
   }

/* This sizes the main body text of posts.
   The overflow declaration stops oversized items such as images from bursting out of the
   page bounds; a local scroll bar is provided on demand instead
   Width 100% required by WinIE else it just lets the overflow occur */
.entry {
   width: 100%;
   font-size: 1.2em;
   margin: 1em 0 0 0;
   overflow: auto;
   }

.entry a:visited, .commentlist p a:visited {
   background-color: inherit;
   color: #FF5959;
   }

/* small is used for blog tag line, the time below post titles, the footer text,
   and in comments for form labels and comment metadata */
small, .postmetadata, blockquote, strike {
   font-size: 1em;
   line-height: 1.5em;
   color: #888;
   background-color: inherit;
   }

/* A little space above & below post metadata */
.postmetadata {
   margin: 0.3em 0 1em 0;
   }

/* Both postmetadata on single, and alternate comments use this light backwash 
   but comment padding & margin is set separately below */
.alt {
   background-color: #f9f9f9;
   color: inherit;
   border-top: 1px solid #ddd;
   border-bottom: 1px solid #ddd;
   padding: 0.5em 1em 0.5em 1em;
   margin: 0;
   }

/* Used to hold phrases such as "Read more >>" together */
.nowrap {
   white-space: nowrap;
   }

/* For Number-of-Comments and Leave-a-Comment headers below single post */
h3.comments {
   margin: 2em 0 1em 0;
   }

/* Contains all the comments, and gives them a neat right margin by justifying the text */
.commentlist {
   padding: 0;
   text-align: justify;
   }

/* Each comment is a list item in an ordered list; could be numbered but we choose not */
.commentlist li {
   margin: 1.6em 0 0.4em 0;
   padding: 0.6em 1em 0.4em 1em;
   list-style: none;
   font-weight: normal;
   }

/* Can't say font: inherit; as IE don't get it */
.commentlist li, #commentform input, #commentform textarea {
   font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
   }

/* Comment paragraphs are indented by 0.6em */
.commentlist p {
   margin: 1em 0.6em 1em 0;
   font-weight: normal;
   line-height: 1.5em;
   text-transform: none;
   }

/* The name of the commenter is cited a little larger */
.commentlist cite {
   font-weight: bold;
   font-style: normal;
   font-size: 1.2em;
   }

/* Spaces text in the form area */
#commentform p {
   margin: 0.6em 0;
   }

/* Gives the name/mail/web text input boxes their width & spacing */
#commentform input {
   width: 16em;
   padding: 0.25em;
   margin: 0.6em 0.6em 0 0;
   }

/* The main comment entry box fills the width of the content column */
#commentform textarea {
   width: 100%;
   margin: 0.6em 0 0 0;
   }

/* The text of the "Submit Comment" link should be on the right */
#commentform #submitcomment {
   margin: 0;
   float: right;
   }

/* Highlight comments in limbo */
.awaitingmoderation {
   border: 1px solid #c00;
   }

/* A little more gravitas for the "comments are now closed" line */  
.nocomments {
   font-weight: bold;
   }

/* For 404 & 'no posts found' page titles */
.problem {
   color: #c00;
   background-color: inherit;
   }

hr {
   margin: 0;
   padding: 0;
   }

/* Image defaults
   Safari bug squishes image out of aspect when shrinking for max-width: 100% here
   But current (November 06) Web-kit builds seem to have fixed this so next release might be OK
   Removing the max-width line allows large images to be full size: scroll to see all */
img {
   max-width: 100%;
   padding: 0;
   margin: 0;
   }

a img {
   border: none;
   }

/* Using these classes with img elements is preferable to align="..." attribute */
img.centered {
   display: block;
   margin: 0.6em auto 0.6em auto;
   }

/* The actual alignment is done by the general .alignleft rule above
   Typical usage would be for a leading  small picture with text flowing past its right edge */
img.alignleft {
   margin: 0.6em 0.9em 0.6em 0;
   }

img.alignright {
   margin: 0.6em 0 0.6em 0.9em;
   }

/* Lists inside posts
   The html>body prefix is not understood by IE which therefore doesn't read these rules
   as the stylized bullets don't work in IE anyway */
html>body .entry ul {
   margin: 0;
   padding: 0 0 0 2em;
   list-style: none;
   text-indent: -1em;
   }

html>body .entry li {
   margin: 0.8em 0 0.9em 1.1em;
   }

.entry ul li:before {
   content: "\00BB  ";
   }

.entry ol {
   padding: 0 0 0 2em;
   margin: 0;
   }

.entry ol li {
   margin: 0;
   padding: 0;
   }

ol li {
   list-style: decimal outside;
   }

/* Code should be used for just a few words.. */
code {
   font: 1.1em 'Courier New', Courier, Monospace;
   }

/* ..and the pre tag works better for whole code excerpts */
pre {
   background-color: #f9f9f9;
   color: black;
   padding: 0.6em 0 0.6em 0.6em;
   margin: 0 0 1em 0;
   font: 1.1em 'Courier New', Courier, Monospace;
   white-space: pre;
   overflow: auto;
   border: 1px solid #ddd;
   }

/* Horrible hack to try to stop IE6 overflowing on long lines in pre elements.
   IE needs a width to turn on overflow, but 100% here with padding leads to the
   overflow scroller itself causing the entry to overflow in turn. Nasty.
   So this just truncates the pre block. Also nasty, but slightly less ugly.
   (The * html prefix selects IE out of all browsers as its the only one to think
   there is a super-element surrounding the html one) */
* html pre {
   width: 30em;
   }

acronym, abbr, span.caps {
   font-size: 1em;
   letter-spacing: .08em;
   cursor: help;
   }

acronym, abbr {
   border-bottom: 0.2em solid #ddd;
   }

blockquote {
   margin: 1.6em 2.8em 0 1.4em;
   padding: 0 0 0 2em;
   border-left: 0.6em solid #ddd;
   }

strong, b {
   font-weight: bold;
   }

em, i {
   font-style: italic;
   }

/* Here we start on styling for the standard calendar widget or my skimmed version */
#wp-calendar {
   empty-cells: show;
   margin: 0 0 0.6em auto;
   }

/* Match the sidebar h2 settings so the month caption appears as any other heading.
   Width 100% seems required for Firefox to right-align the caption. */
#wp-calendar caption {
   font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
   font-size: 1.2em;
   font-style: normal;
   font-weight: bold;
   text-transform: uppercase;
   text-align: right;
   line-height: normal;
   margin: 0;
   padding: 0.5em 0 0 0;
   width: 100%;
   }

/* The header cells with letters demarking days and the data cells holding numbers
   should have the same settings if they are to align */
#wp-calendar th, #wp-calendar td {
   font-style: normal;
   text-transform: lowercase;
   text-align: center;
   padding: 0 0 0 1px;
   margin: 0;
   }

#wp-calendar a {
   text-decoration: none;
   display: block;
   }

#wp-calendar #next a {
   text-align: right;
   }

#wp-calendar #prev a {
   text-align: left;
   }

/* Add space below standard text widgets so as to match other sidebar items */
li.widget_text {
   margin: 0 0 1.24em 0;
   }

/* RSS widget titles are also links but are shown in normal text colour */
li.widget_rss h2 a {
   background-color: inherit;
   color: #888;
   }

/* ..so we highlight them in orange as they are moused over */
li.widget_rss h2 a:hover {
   background-color: inherit;
   color: #FF0000;
   }

/* Set size of embedded audio players in sound attachments (generous height so pad a little) */
.audio_object {
   width: 100%;
   height: 100px;
   }

/* Set size of embedded video in video attachments. Note the height is just a generous
   guess as there seems no simple way to find the actual video height */
.video_object {
   width: 100%;
   height: 400px;
   }