/*
THEME NAME: Potassium
THEME URI: http://blog.NOVALISTIC.com/past/2007/07/potassium
DESCRIPTION: A soft, silver, yet austere and Web 2.0, interface. Based on the <a href="http://www.plaintxt.org/themes/sandbox">Sandbox</a> theme.
VERSION: 1.0
AUTHOR: Daniel Tan
AUTHOR URI: http://blog.NOVALISTIC.com/
TEMPLATE: sandbox
*/

@import url('../sandbox/sandbox-layouts/2c-r.css');

/*
-------------------
Elements in general
-------------------
*/

/* The lonely paragraph. */
p {
	line-height: 1.5em;
}

/*******
 * List madness
 *******/

li {
	margin-left: -1em;
}

* html li {
	margin-left: 2em;
}

*+html li {
	margin-left: 2em;
}

ul {
	list-style-image: url('images/bullet.png');
	list-style-type: disc;
	margin: 0.3em 0px;
}

ol {
	list-style: decimal;
	margin: 0.3em 0px;
}

li ul {
	list-style: circle;
}

li ol {
	list-style: lower-alpha;
}

li li ul {
	list-style: square;
}

li li ol {
	list-style: lower-roman;
}

dt {
	font-weight: bold;
	border-bottom: 1px dotted #999;
}

dd {
	margin-left: 2em;
	margin-bottom: 0.5em;
	border-left: 1px dotted #999;
	padding-left: 5px;
}

/*******
 * Images
 *******/

img {
	border: 1px solid #999;
}

img.none {
	border: 0;
}

img.single {
	border: solid 1px #999;
}

img.alignleft {
	margin: 0px 0.5em 0.5em 0px;
}

img.alignright { 
padding: 4px;
	margin: 0px 0.5em 0px 0.5em; 
display: inline;
}

img.wp-smiley {
	border: 0px;
}
.caption { margin: 5px; padding: 5px; border: solid 1px #E5E5FF; float:left }
.captionr { margin: 5px; padding: 5px; border: solid 1px #E5E5FF; float:right }

/*******
 * Forms
 *******/

form {
	margin: 0px;
	padding: 0px;
}

input {
	height: 1.5em;
	padding: 2px;
}

* html input {
	height: 1.6em;
	padding: 0px;
}

html>body input, textarea {
	color: #999;
	background: #fff url('images/bg_textbox.png') left top repeat-x;
	border: 1px solid #999;
	padding: 2px 4px;
}

textarea {
	width: 80%;
}

input:focus, textarea:focus {
	color: #090;
	background-color: #f6fff6;
	background-image: url('images/bg_textbox_over.png');
	border: 1px dashed #090;
}

input[type="submit"], input[type="reset"], button {
	height: 2em;
	font-weight: bold;
	color: #000;
	background: #f3f3f3 url('images/bg_button.png') left top repeat-x;
}

input[type="submit"]:hover, input[type="reset"]:hover, button:hover {
	background-color: #e5f6ff;
	background-image: url('images/bg_button_over.png');
	cursor: pointer;
}

input[type="submit"]:focus, input[type="reset"]:focus, button:focus {
	color: #666;
	background-color: #ddd;
	background-image: url('images/bg_button_hit.png');
}

label {
	display: inline-block;
	margin-top: 0.5em;
}

#content #searchform {
	text-align: center;
	margin: 0px 3em;
}

#content #s {
	width: 90%;
}

/*******
 * Links
 *******/

a {
	font-weight: bold;
	text-decoration: none;
	color: #06f;
}

a:visited {
	font-weight: bold;
	text-decoration: none;
	color: #03c;
}

a:hover {
	text-decoration: underline;
	color: #0c0;
}

a:hover img {
	border-color: #0c0;
}

/*******
 * Et cetera
 *******/

:focus {
	outline: none;
}

pre, code, kbd, samp, var {
	font-family: 'Courier New', Courier, monospace;
	font-size: 1em;
	color: #666;
}

pre, blockquote {
	width: 90%;
	border: 1px solid #999;
	margin: 1em auto;
	padding: 0.3em;
	overflow: auto;
}

/*
The following language classes are GeSHi-compatible. But it doesn't
care about image names, so I'll use my own preferences here.
*/

pre {
	height: auto !important;
	height: 72px;
	min-height: 72px;
	background: #eee url('images/bg_pre.png') right top no-repeat;
}

pre.php {
	background-image: url('images/bg_pre_php.png');
}

pre.html4strict {
	background-image: url('images/bg_pre_html.png');
}

pre.xml {
	background-image: url('images/bg_pre_xml.png');
}

pre.css {
	background-image: url('images/bg_pre_css.png');
}

pre.javascript {
	background-image: url('images/bg_pre_js.png');
}

pre.actionscript {
	background-image: url('images/bg_pre_as.png');
}

pre.asp {
	background-image: url('images/bg_pre_asp.png');
}

pre.c {
	background-image: url('images/bg_pre_c.png');
}

pre.cpp {
	background-image: url('images/bg_pre_cpp.png');
}

pre.csharp {
	background-image: url('images/bg_pre_cs.png');
}

pre.java {
	background-image: url('images/bg_pre_java.png');
}

pre.sql {
	background-image: url('images/bg_pre_sql.png');
}

/*
Phew!
*/

code {
	background-color: #eee;
	border-bottom: 1px dotted #999;
	padding: 0px 0.2em;
}

div#comments-list li.alt code {
	background-color: #fff;
}

/* Blockquotes, lots of them! */
blockquote {
	background: #eee url('images/bg_quote.png') right top no-repeat;
}

blockquote blockquote {
	background: #fff url('images/bg_quote_alt.png') right top no-repeat;
}

blockquote blockquote blockquote {
	background: #eee url('images/bg_quote.png') right top no-repeat;
}

li.alt pre, li.alt blockquote {
	background-color: #fff;
}

li.alt blockquote {
	background-image: url('images/bg_quote_alt.png');
}

li.alt blockquote blockquote {
	background: #eee url('images/bg_quote.png') right top no-repeat;
}

abbr, acronym, dfn {
	border-bottom: 1px dotted;
	cursor: help;
}

.clear {
	clear: both;
}

/*
IE6 seems to remove the underline because I told it to above. Let's put it back if it's
in an <ins> element, looks better. We can't color the underline according to the <ins>
text's color but this is probably the best we can go. It's IE6 after all.
*/
* html ins a {
	text-decoration: underline !important;
}

del {
	color: #999;
}

del a {
	font-weight: normal;
	color: #66c;
}

del a:visited {
	font-weight: normal;
	color: #339;
}

q, cite {
	font-style: italic;
}

.caps {
	font-variant: small-caps;
}

.important {
	font-weight: bold;
	color: #f00;
}

/*
----------------------------------------
Core styles, putting the layout together
----------------------------------------
*/

/*******
 * Body and wrapper
 *******/

body {
	font-size: 0.8em;
	text-align: center;
	background: #fff url('images/bg.png') left top repeat-x;
}

body, table *, form * {
	font-family: 'Lucida Grande', 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
}

#wrapper {
	width: 85%;
	min-width: 900px;
	text-align: left;
	background: transparent url('images/bg_wrapper.png') 0px 130px repeat-x;
	margin: 0px auto;
	padding: 0px 1em;
}

/* Normalization */
body, div, h1 {
	margin: 0px;
}

/*******
 * Headers
 *******/

#header {
	height: auto !important;
	height: 100px;
	min-height: 100px;
	font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	background: #ddd url('images/bg_header.png') left top repeat-x;
}

#blog-title {
	font-size: 2.5em;
	margin: 0px auto !important;
	padding-top: 20px;
}

#blog-title a {
	color: #fff;
}

#blog-description {
	font-variant: small-caps;
	color: #999;
	padding-bottom: 20px;
}

/*******
 * Menu bar
 *******/

#access div.skip-link a {
	position: absolute;
	top: 0px;
	left: 0px;
	text-transform: lowercase;
	color: #999;
	background: #fff url('images/bg_skiplink.png') left bottom repeat-x;
	border: solid #999;
	border-width: 0px 0.3em 0.3em 0px;
	padding: 7px;
}

#access div.skip-link a:hover {
	text-decoration: none;
	background-image: url('images/bg_skiplink_over.png');
}

#access div.contact a {
	position: absolute;
	top: 0px;
	right: 0px;
	text-transform: lowercase;
	color: #999;
	background: #fff url('images/bg_skiplink.png') left bottom repeat-x;
	border: solid #999;
	border-width: 0px 0px 0.3em 0.3em;
	padding: 7px;
}

#access div.contact a:hover {
	text-decoration: none;
	background-image: url('images/bg_skiplink_over.png');
}
#menu {
	width: 100%;
	height: auto !important;
	height: 30px;
	min-height: 30px;
	text-align: center;
}

#menu ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

#menu ul li {
	display: inline;
	line-height: 2.3em;
}

#menu ul li a {
	font-size: 1.2em;
	text-transform: lowercase;
	color: #fff;
	background: #f80 url('images/bg_menu_link.png') left top repeat-x;
	margin: 0.7em;
	border: 1px solid #b40;
	padding: 2px 5px;
}

* html #menu ul li a {
	margin: -0.5em;
}

*+html #menu ul li a {
	margin: -0.5em;
}

*+html #menu ul li:first-child {
	margin-left: -1em;
}

#menu ul li.current_page_item a, #menu ul li a:hover {
	background: #07f url('images/bg_menu_link_curr.png') left top repeat-x;
	border-color: #039;
}

/* Hide page children */
#menu ul ul {
	display: none;
}

#menu ul ul li {
	float: none;
}

/*******
 * On to the container and sidebars
 *******/

* html #container {
	margin-left: -187px !important;
}

/*
http://blog.NOVALISTIC.com/past/2007/07/workaround-for-ie6s-box-expanding-bug
http://www.NOVALISTIC.com/exp/ie_expand_fix.php
*/

* html #container, * html div.sidebar {
	 overflow:hidden;
}
* html #container img, * html div.sidebar li {
	position: relative;
}

#content {
	padding: 2em;
}

div.sidebar {
	padding: 2em 10px; 
}

#content, #primary {
	background: #fff url('images/bg_content.png') left top repeat-x;
}

#content {
	height: auto !important;
	height: 800px;
	min-height: 360px;
        text-align: justify;
	background-color: #fff;
	/*
	A known issue in my IE6 expanding box bug workaround is
	that once an image really triggers the expansion (that then
	gets negated by the workaround), the right margin disappears
	and #content is joined back to #sidebar.
	*/
	margin-right: 1em !important;

width :70%;
float:left;
}

#primary {
	padding-bottom: 0px;
}

#secondary {
	padding-top: 0px;
height: auto !important;
}

div.sidebar {
height: auto !important;
min-height: 100px;
        font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.85em;
	background: #fff;
width: 178px;
float:right;
}

div.sidebar div, div.sidebar h3, div.sidebar ul, div.sidebar li {
	margin: 0px;
	padding: 0px;
}

/*******
 * And finally our footer
 *******/

#footer {
	position: relative;
	width: 100%;
	background: #fff url('images/bg_footer.png') center top no-repeat;
	height: auto !important;
	height: 100px;
	min-height: 100px;
	text-align: center;
	padding-top: 0.3em;
clear:both;
}

/*
------------------------------
Less major parts of the layout
------------------------------
*/

/*******
 * Posts
 *******/

/*
Asides
*/

body.home div.category-asides * {
	display: inline;
}

body.home div.category-asides .entry-title, body.home div.category-asides .entry-date, body.home div.category-asides .entry-author, body.home div.category-asides .entry-meta {
	display: none;
}

body.home div.category-asides .entry-content {
	display: block;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.85em;
	color: #999;
	background: #fff url('images/bg_aside.png') left top repeat-y;
	margin: 0px 0px 3em 1.5em;
	padding: 0.5em;
	padding-left: 1em;
}

/* Password-protected, draft and private posts */
div.protected {
	background: url('images/protected.png') right top no-repeat;
}

div.private {
	background: url('images/private.png') right top no-repeat;
}

div.draft {
	background: url('images/draft.png') right top no-repeat;
}

div.navigation {
	width: 100%;
	height: auto !important;
	height: 20px;
	min-height: 20px;
	font-size: 0.9em;
	font-weight: bold;
}

div.navigation a, div.navigation span.meta-nav {
	color: #06f !important;
}

#nav-above {
	background: #fff url('images/bg_nav_above.png') left top repeat-x;
	margin-bottom: 3em;
}

#nav-below {
	background: #fff url('images/bg_nav_below.png') left bottom repeat-x;
}

.alignleft, div.nav-previous {
	float: left;
}

.alignright, div.nav-next {
	float: right;
}

.center {
	display: block;
	margin: auto;
}

div.nav-previous {
	min-width: 10px;
	height: 20px;
	padding-left: 0.4em;
}

div.nav-next {
	min-width: 10px;
	height: 20px;
	padding-right: 0.4em;
}

#nav-above div.nav-previous {
	background: url('images/bg_nav_above_left.png') left top no-repeat;
}

#nav-above div.nav-next {
	background: url('images/bg_nav_above_right.png') right top no-repeat;
}

#nav-below div.nav-previous {
	background: url('images/bg_nav_below_left.png') left bottom no-repeat;
}

#nav-below div.nav-next {
	background: url('images/bg_nav_below_right.png') right bottom no-repeat;
}

div.protected form label input {
	width: 20em;
}

#archives-page, #links-page {
	list-style: none;
	margin: 0px;
	padding: 0px;
	margin-left: 1em;
}

#archives-page ul li, #links-page ul li {
	list-style-image: url('images/bullet.png');
	list-style-type: disc;
}

#archives-page ul ul li {
	list-style: circle;
}

#archives-page ul ul ul li {
	list-style: square;
}

a[title="RSS"], a.rss {
	font-size: 0.8em;
	font-weight: bold;
	color: #fff;
	background-color: #f90;
	margin: auto 0.3em;
	padding: 0.1em 0.5em;
}

h2, .entry-title, div.noresults .entry-title {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 1.6em;
	font-weight: normal;
	text-align: left;
	color: #666;
	margin-top: 0px;
	border: 0px;
	padding: 0.2em;
	padding-left: 0.4em;
	clear: both;
}

/*
Entry titles, an assortment of them.
*/

.entry-title {
	background: transparent url('images/bg_post_title.png') left top no-repeat;
	padding-left: 1.5em !important;
}

div.page .entry-title {
	background-image: url('images/bg_page_title.png');
}

div.draft .entry-title {
	background-image: url('images/bg_post_title_draft.png');
}

body.archive .entry-title {
	background-image: url('images/bg_post_title_archive.png');
}

div.protected .entry-title {
	background-image: url('images/bg_post_title_protected.png');
}

body.search .entry-title {
	background-image: url('images/bg_post_title_search.png');
}

div.noresults .entry-title, body.four04 .entry-title {
	background-image: url('images/bg_post_title_notfound.png');
}

.page-title #search-terms {
	font-style: italic;
	color: #0c0;
}

/* The infamous pilcrow (paragraph) symbol */
.entry-title:hover:after {
	content: ' \00B6';
	font-size: 0.8em;
	color: #999;
}

h2, .entry-title a {
	text-decoration: none !important;
	color: #666 !important;
}

.entry-title a {
	font-weight: normal !important;
}

body.archive h2, body.search h2 {
	font-size: 1.8em;
	font-weight: 600;
	border-bottom: 1px dotted #666;
}

.entry-date, .entry-meta, .comment-meta {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.85em;
	color: #999;
}

div.entry-date abbr, div.entry-meta abbr {
	border: 0px;
	cursor: auto;
}

div.entry-meta {
	clear: both;
	height: auto !important;
	height: 30px;
	min-height: 30px;
	background: transparent url('images/bg_postmeta.png') left top no-repeat;
	margin-bottom: 3em;
	padding-left: 3em;
}

/* The ubiquitous more-link */
.more-link {
	float: right;
	clear: both;
	font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	text-align: right;
	text-transform: lowercase;
	margin-bottom: 1em;
}

div.page-link {
	clear: both;
	font-size: 0.9em;
	text-align: center;
	color: #666;
	margin-bottom: 1em;
}

div.page-link a {
	margin: auto 0.2em;
}

div.page-link a:before {
	content: '\2039';
}

div.page-link a:after {
	content: '\203A';
}

/*******
 * Comments
 *******/

#commentform label.form-label {
	margin-top: 1em;
}

#commentform span.required {
	color: #f00;
	background-color: #fff;
}

#commentform, #commentform p {
	padding: 0px;
}

#author, #email, #url {
	width: 45%;
}

#comment {
	height: 12em;
	margin: 0px 0px 0.5em 0px;
	overflow: auto;
	width: 70%;
}

#comments h3 span {
	font-size: 1.7em;
	color: #0c0;
}

#comments div.nopassword {
	margin-top: 1em;
}

div.comments ol {
	margin: 0px;
	padding: 0px;
}

div.comments li {
	height: auto !important;
	height: 100px;
	min-height: 100px;
	list-style-position: inside !important;
	list-style-position: outside;
	margin: 0px;
	padding: 0.5em;
}

div#comments-list li {
	background: #fff url('images/bg_comment.png') right top no-repeat;
}

div#comments-list li.alt {
	background: #eee url('images/bg_comment_alt.png') right top no-repeat;
}

div#comments-list li.byuser {
	background: #ddd url('images/bg_comment_byuser.png') right top no-repeat;
}

/* Sorry, IE6 */
html>body div#comments-list li.byuser.alt {
	background: #ccc url('images/bg_comment_byuser_alt.png') right top no-repeat;
}

div#comments-list li.bypostauthor {
	background: #ddd url('images/bg_comment_bypostauthor.png') right top no-repeat;
}

/* Sorry, IE6 */
html>body div#comments-list li.bypostauthor.alt {
	background: #ccc url('images/bg_comment_bypostauthor_alt.png') right top no-repeat;
}

div#trackbacks-list li {
	background: #fff url('images/bg_trackback.png') right top no-repeat;
}

div#trackbacks-list li.alt {
	background: #eee url('images/bg_trackback_alt.png') right top no-repeat;
}

div.comment-author {
	display: inline;
	font-weight: bold;
}

.unapproved {
	font-weight: bold;
	color: #900;
}

.unapproved:before {
	content: url('images/head_unapproved.png');
	padding-right: 0.2em;
}

/*******
 * More sidebar madness
 *******/

div.sidebar h3 {

	height: auto !important;
	height: 23px;
	min-height: 23px;
	font-family: 'Lucida Grande', 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	text-align: center;
	color: #999;
	background: #eee url('images/bg_sidebar_head.png') left top no-repeat;
	border-bottom: 1px dotted #999;
	padding-top: 7px;
}

div.sidebar h3 label {

	margin-top: 0px;
}

div.sidebar ul.xoxo > li {
	background: #eee url('images/bg_sidebar_bottom.png') center bottom no-repeat;
	padding-bottom: 1.2em;

}

/* Separate rule sets because IE6 wants things that way. */
* html div.sidebar ul.xoxo li {
	background: #eee url('images/bg_sidebar_bottom.png') center bottom no-repeat;
	padding-bottom: 1.2em;
}

* html div.sidebar ul.xoxo li li {
	background-color: transparent;
	background-image: none;
	padding-bottom: 0px;
}

/*
Different widgets
*/

div.sidebar li#pages {
	background-image: url('images/bg_sidebar_bottom_pages.png');
}

div.sidebar li#categories {
	background-image: url('images/bg_sidebar_bottom_categories.png');
}

div.sidebar li#pages li, div.sidebar li#categories li {
	list-style-image: url('images/head_page.png');
}

div.sidebar li#archives {
	background-image: url('images/bg_sidebar_bottom_archives.png');
}

div.sidebar li#archives li {
	list-style-image: url('images/head_archive.png');
}

div.sidebar li#search {
	background-image: url('images/bg_sidebar_bottom_search.png');
}

div.sidebar li.linkcat {
	background-image: url('images/bg_sidebar_bottom_links.png') !important;
}

div.sidebar li#rss-links {
	background-image: url('images/bg_sidebar_bottom_rss.png');
}

div.sidebar li#rss-links li {
	list-style-image: url('images/head_rss.png');
}

div.sidebar li#meta {
	background-image: url('images/bg_sidebar_bottom_meta.png');
}

div.sidebar input#s {
	width: 7em;
}

/*
More list stuff. This is getting really confusing!
*/

div.sidebar li {
	list-style-image: none;
	list-style-type: none;
	margin-bottom: 1em;
}

div.sidebar li form {
	text-align: center;
	margin: 0px;
	padding: 0.5em;
}

div.sidebar ul ul {
	margin: 0px;
	padding: 0.5em;
}

div.sidebar ul ul li {
	list-style-image: url('images/bullet.png');
	list-style-type: disc;
	list-style-position: inside !important;
	list-style-position: outside;
	margin: 0px;
}

* html div.sidebar ul ul li {
	margin-left: 1.2em;
	padding-left: 0.3em;
}

div.sidebar ul ul ul li {
	list-style-image: none;
	list-style-type: circle;
	margin-left: 0.5em;
}