body    { background-color: #fff; font-family: georgia; margin: 0; line-height: 1.8; }

#index { background-color: #F6F1DE; }

/* Headings */
/* -------- */
h1, h2, h3  { font-family: helvetica, arial, sans-serif; }

/*h1 { margin-top: 25px; margin-bottom: 15px; }*/
h1 { margin-top: 0; margin-bottom: 15px; }
h2 { margin-top: 20px; margin-bottom: 10px; }
h3 { margin-top: 20px; margin-bottom: 5px; }

h1 { margin-top: 0; margin-bottom: 0.7em; }
h1 { margin-top: 3em; margin-bottom: 0.7em; }
h2 { margin-top: 1.5em; margin-bottom: 0.8em;}
h3 { margin-top: 1.5em; margin-bottom: 0.8em; }

h1, h2, h3 { font-weight: normal; }
h1 { font-size: 1.5em; }
h2 { font-size: 1.2em; }
h3 { font-size: 1.1em; }

h1 { line-height: 1.5; }

h1 { font-weight: bold; color: #333; }


ul, ol  { padding-left: 0; margin: 1.5em auto 2em; }
ul      { list-style: square; }

.column { float: left; width: 15em; }

.column h2 { margin: 0; background-color: #EFE6CE; text-align: center;
	-moz-border-radius-topleft: 0.5em;
	-moz-border-radius-bottomright: 0.5em;
}

.column li { margin-bottom: 0; }
.column li a { display: block; padding-top: 1em; color: #000; border-bottom-color: #ef2929; }
.column li a:hover { padding-bottom: 1px; }

#index ul { list-style: none; }
#index .header { float: left; width: 15em; margin-right: 1em; background-color: transparent; border: none; }
#index .logo { font-size: 250%; background-color: transparent; line-height: 1.1; }
#index #footer { margin-top: 1em; border: none; }


/* Hack to fix IE's mis-handling of hanging bullets */
#wrapper > ul,
#wrapper > ol {
	padding-left: 1.5em;
	position: relative;
	left: -1.5em;
}

#wrapper ul.ui-tabs-nav { padding-left: 0; left: 0; }

.ui-tabs * { border: none; }

#index .column ul {
	padding-left: 0;
	left: 0;
}

#column2 { margin: 0 1em; padding: 0 1em; border-left: 1px solid #eee; border-right: 1px solid #eee; }

ol span { font-weight: normal; font-family: georgia; }

li      { margin-bottom: 0.6em; }

table { margin: 1em 0 2em; }

.ldquo, .rdquo { color: #EF2929; }
.ldquo { float: left; line-height: 1; margin-left: -1em; text-align: right; }
.rdquo { font-size: 200%; line-height: 0.5; vertical-align: bottom; }
.ldquo span, .rdquo span { font-size: 200%; }

blockquote { margin: 1.5em 0 3em; line-height: 1.6; font-style: italic; color: #333; }

blockquote p.citation { /*font-size: 85%;*/ text-align: right; margin-top: 0; }
blockquote em { font-weight: bold; }
blockquote ul { margin-bottom: 1em; padding-top: 1em; margin-left: 1em; }

a img   { border: none; }
abbr { cursor: help; font-variant: small-caps; letter-spacing: 0.1em; }

body#index h1 { margin-top: 1em; border-bottom: 1px solid #ccc; }
body#index img#mainphoto { float: left; margin-bottom: 1em; }

img.screenshot { margin-bottom: 1em; border: 1px solid #eee; display: block; }
.caption { font-style: italic; margin-top: 0; color: #666; }

form#addcomment fieldset { border: 1px solid #eee; }
form#addcomment label { display: block; margin-top: 1em; cursor: pointer; }
form#addcomment textarea,
form#addcomment input[type="text"] { border: 1px solid #ccc; }

form#addcomment textarea#comment { height: 20em; }
form#addcomment textarea#comment,
form#addcomment input#url { width: 30em; max-width: 100%; }

form#addcomment input#name,
form#addcomment input#email { width: 20em; max-width: 100%; }

#sidebar { float: right; }

#index #content { /*float: left;*/ clear: both; width: 65%; }
#index #sidebar { width: 30%; }
#index #sidebar h2 { margin-top: 0; margin-bottom: 0.125em; }

h3.date { font-size: 1em; }

p { margin: 1em 0; }


/* inline elements */
ins { text-decoration: none; border-bottom: 1px dotted; }

#addcomment input, #addcomment textarea { font-size: 1em; font-family: arial, helvetica, sans-serif; }

a { text-decoration: none; border-bottom: 1px solid; padding-bottom: 2px; }
a.imagelink { border: none; }
a:hover { border-width: 2px; }

.logo a { border: none; }
:link { color: #EF2929; }
:visited { color: #A40000; }

p.intro { font-family: arial; font-size: 110%; font-weight: bold; color: #666; }
p.intro:after { content: '.'; visibility: hidden; height: 0; display: block; clear: left; }

p.featured { /*font-size: 1.1em;*/ text-align: center; padding: 0.5em 1em; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin: 1.4em 0; }

p.error { font-weight: bold; background-color: #EF2929; padding: 0.5em; color: #fff;
	font-family: arial, sans-serif; }

.example { border: 1px solid #eee; padding: 1em; }

/* Hover styles for example blocks */
/*
.example:hover h1 { background-color: #CEE14B; }
.example:hover h2 { background-color: #EFE6CE; }
.example:hover p  { background-color: #ffc; }
.example:hover *  { outline: 1px solid #ddd; }
.example:hover div { outline: none; }
*/

#breadcrumbs    { /*border-bottom: 2px solid #ddd;*/ padding: 0;
	padding-left: 0.5em; float: left; width: 100%; margin: 0; 
	font-weight: bold; background-color: #ccc;
	font-family: arial, sans-serif; }

#breadcrumbs li { margin: 0; list-style: none; }

.header li { float: left; }


/* Service links */
.header ul.service-links { margin: 0.2em 0 0; padding-left: 1em; font-weight: bold; }
.header ul.service-links li { margin-right: 1em; }
.header ul.service-links a { padding-left: 24px; }

#sl-twitter { background: url('/images/favicons/twitter-com.ico') no-repeat; }
#sl-rss, #sl-atom { background: url('http://www.feedburner.com/fb/images/pub/feed-icon16x16.png') no-repeat; }
#sl-delicious { background: url('http://delicious.com/favicon.ico') no-repeat; }
#sl-flickr { background: url('http://flickr.com/favicon.ico') no-repeat; }


/* Breadcrumbs */
#breadcrumbs a, #breadcrumbs span  { padding: 0.5em; display: block; }

#breadcrumbs span { color: #333; }

#breadcrumbs a { padding: 0; margin: 0.5em; }

#breadcrumbs a { padding: 1px; }
#breadcrumbs a:hover { padding-bottom: 0; }

.header { font-family: arial; background-color: #EEEEEE; overflow: hidden; border-bottom: 1px solid #A40000; }

.logo { background-color: #EEEEEE; float: left; line-height: 1; font-size: 200%; }
.logo { font-size: 60%; text-align: center; text-transform: uppercase; }
.logo { font-family: georgia; margin-right: 1em; }

#l1 { color: #F57900; }
#l3 { color: #9DB029; }

#l1 { color: #333; font-size: 6em; font-weight: bold; letter-spacing: 0.01em; line-height: 0.9; }
#l2 { color: #333; font-size: 4em; font-weight: normal; letter-spacing: -0.05em; line-height: 0.6; }
#l3 { color: #000; font-size: 2.7em; line-height: 1.2; letter-spacing: -1px; }

.logo a { /*background-color: #f6f6f6;*/ padding: 0.5em; display: block; }

.logo span { display: block;  }

.welcome { font-weight: bold; font-family: arial; color: #EF2929; }


.header ul { overflow: auto; width: auto; list-style: none; /*font-size: 90%;*/ }

#breadcrumbs { /*font-size: 90%;*/ width:auto; float: none; overflow: auto; background-color: #eee;
	/*border-top: 2px solid transparent;*/
	/*border-bottom: 2px solid transparent;*/ }

#mainnav { margin: 0; list-style: none; padding-left: 1em; font-family: arial; font-weight: bold; }

#mainnav li { margin-right: 1em; }


/* Site links */
#mainnav a, #mainnav span { padding-left: 24px; background-repeat: no-repeat; }

#sitelink-blog a,
#sitelink-blog span { background-image: url('http://www.feedburner.com/fb/images/pub/feed-icon16x16.png'); }

#sitelink-articles a,
#sitelink-articles span,
#sitelink-cssarticles a,
#sitelink-cssarticles span { background-image: url('/images/icons/book.png'); }

#sitelink-onepagers a,
#sitelink-onepagers span { background-image: url('/images/icons/page.png'); }

.comment { margin-bottom: 1em; padding: 1em; overflow: auto; }
.comment p { margin-bottom: 0; }

img.avatar { float: left; margin-right: 1em; padding: 0.25em; border: 1px solid #ccc; background-color: #f5f5f5; }
.comment h3 { margin-top: 0pt; margin-left: 60px; }
/*.comment div { margin-left: 60px; }*/

.contents { margin-top: 0; padding-left: 1em; }

/*#wrapper   { width: 70%; margin: 0 auto 1em; }*/
#index #wrapper   { width: 50em; max-width: 100%; }
#wrapper { width: 33em; margin: 0 auto 1em; }

.clear { clear: both; }

hr.clear { visibility: hidden; margin: 0; }

.codetab { padding: 0.25em; color: #fff; background-color: #EF2929; line-height: 1.1; float: left;
	margin-top: 1em; }
.codetab + * { clear: left; }

pre.html, pre.css, pre.js { padding: 0.5em; border: 1px solid #ccc; }
pre.html { background-color: #ffc; }
pre.js   { background-color: #000; color: #fff; }

pre.code { background-color: #eee; border: 1px solid #ccc; padding: 1em; overflow: auto; }

.date { font-variant: small-caps; color: #d00; margin-bottom: 1em; }

#footer { clear: both; text-align: center; margin-top: 4em; margin-bottom: 3em; border-top: 1px solid #ccc; padding-top: 1em; }
#footer img { vertical-align: middle; }
#footer a { padding: 1em; padding-bottom: 0.25em; margin: 1em; }


#values { list-style: none; overflow: auto; float: left; margin-top: 0; }
#values li { cursor: pointer; float: left; padding: 0.25em; border: 1px solid #999; line-height: 1; margin-right: 0.5em; }
#values li.selected,
#values li:hover { background-color: #eee; }

pre#css { background-color: #f6f6f6; padding: 1em; border: 1px solid #f0f0f0; margin-top: 0; }

.css-sample-caption { font-style: italic; margin-bottom: 0; clear: left; }

ul.default,
.default ul,
a.default,
.default a,
li.default,
.default li {
    color: black;
    background-image: none;
    border: none;
}

li.default,
.default li {
    list-style-type: disc;
}

a.default,
.default a
{
   text-decoration: underline;
       color: blue;
}

div.intro-drop-cap {
    width: 1.2em; text-align: right; float: left;
    font-size: 5em; margin-left: -1.3em;
    line-height: 1; font-family: arial;
}

div.intro-drop-cap span {
    color: #fff; background-color: #EF2929;
    padding: 0 0.1em;
    -moz-border-radius-bottomright: 0.15em;
    -moz-border-radius-topleft: 0.15em;
    -webkit-border-radius: 0.05em;
    -opera-border-radius: 0.05em;
    border-radius: 0.05em;
}

.tags { list-style: none; overflow: hidden;
	background-image: url('/images/icons/tag_red.png'); background-repeat: no-repeat;
	padding-left: 24px; background-position: left center; color: rgb(221, 0, 0);
	margin-top: 0pt; font-variant: small-caps;
	}

.tags li { float: left; margin-right: 1em; /*border: 1px solid #666;*/ line-height: 1; }
/*.tags a { border: none; padding: 0.25em; display: block; }
.tags a:hover { background-color: #ffc; }*/

.quickbar { font-size: 90%; line-height: 1; position: fixed; width: 9em; padding: 0.5em; margin: 0 }
.quickbar li { margin: 0; }
.quickbar li.first a { -moz-border-radius-topleft: 0.5em; -moz-border-radius-topright: 0.5em; background-color: #EFE6CE; }
.quickbar a { background-color: #F6F1DE; padding: 0.5em; border: none; display: block;  }
.quickbar li a:hover { background-color: #CEE14B; }
.quickbar li.first a:hover { background-color: #9DB029; }

h1.newheader { font-family: georgia; background-color: #000; color: #fff;
    margin-left: -1em; /*margin-right: -1em;*/ padding-left: 1em;
    padding-top: 0.75em; padding-bottom: 0.25em; }

h2.newheader { font-family: georgia; background-color: #eee;
    margin-left: -1.3em; /*margin-right: -1.3em;*/ padding-left: 1.3em;
    padding-top: 0.75em; padding-bottom: 0.25em; }

.article-list dt { display: block; float: left; width: 5em; }
.article-list dd { margin-left: 6em; margin-bottom: 1em; }
.article-list p { margin: 0.5em 0; }

#footer { background-color: #eee; text-align: left; padding-left: 1em; overflow: hidden; margin-top: 1em; }
#footer { padding-bottom: 3em; margin-bottom: 0; background-color: #eee; font-size: 90%; }
#footer #mugshot { width: 52px; background-color: #f6f6f6; padding: 0.5em; border: 1px solid #ddd; float: left;
	margin-right: 1em; }
#footer a { margin: 0; padding: 0; }
#footer p { margin: 0 0 0.5em; line-height: 1.8; }