/*
	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
		#ff7010	cheerful orange for most links
		#0b3	eco-friendly green for link hover states only
		#c40	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-size: 0.68em;
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	line-height: 1.4;
	margin: 0;
	padding: 0;
	}

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

/*	Show orange when mousing over a link */
a:hover {
	background-color: inherit;
	color: #f60; 
	}
	
table {
	border:solid 1px #000;
	margin:0;border-collapse: collapse;
	margin:10px
	}
		
tr,td {
	border:solid 1px #000;
	margin:0;border-collapse: collapse
	}
	
th {
	background-color:#000;
	color:#fff;
	margin:0;
	border-collapse: collapse;
	padding:0 2px;
	border:solid 1px #fff
	}
	
/*	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: 4.3em;
	line-height: 1em;
	}

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

/*	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: 925px;
	/* min-width: 25em;
	   max-width: 98%;*/
	text-align: left;
	margin: 0 auto 0 25px;
	}

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

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

/*	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;
	color: #222;
	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: 10em;
	margin: 1em 0 0.24em 0;
	padding: 0;
	}

/*	The header guards its white space */
#header {
	margin: 2em 0 2em 0;
	padding:0.5em;
	border-bottom:solid 2px #ddd;
	}

#header a:hover {
	color: #222;
	text-decoration: none;
}

/*	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: #000;
	}

/*	Used for Archive & Search page headers as well as the top of 'Pages' */
h2.pagetitle {
	background-color: #F9F9F9;
	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: #222;
	}

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

/*	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 {
        background-color: inherit;
	font-weight: bold;
}

.entry a:hover {
	background-color: inherit;
	color: #F60;
	}

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

/*	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 {
	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;
	border:solid 1px #ccc
	}

/*	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;
	border:solid 1px #ccc
	}

img.alignright {
	margin: 0.6em 0 0.6em 0.9em;
	border:solid 1px #ccc
	}

/*	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: 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: #f60;
	}

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