/*
Theme Name:	Skittlish
Theme URI: http://journal.barleyhut.com/themes
Description:	A candy coloured theme. Comes in 7 flavors (orange, blue, green, pink, cyan, red, violet).
Version:1.1
Author: <a href="http://evil.che.lu/">Cristi Balan</a> (ported to Wordpress by <a href="http://journal.barleyhut.com">A.M. Griffin</a> and widgets by <a href="http://magarto.com/blog/">Magarto</a>)
*/
/* 
	--TABLE OF CONTENTS--
	01: REST
	02. CORE STRUCTURE
	03: BASICS
	04: HEADER/MENU
	05: HEADINGS
	06: IMAGES
	07: WEBLOG CONTENT
	08: SIDEBAR
	09: FOOTER
	10: COMMENTS
	11: SKITTLISH OPTIONS (COLORS+MENUS)
	12: MISCELLANEOUS
/*
------------------------------------------------------------------------
=RESET (From Eric Meyer)- 
------------------------------------------------------------------------
*/ 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100.01%;
	vertical-align: baseline;
	background: transparent;
	}
html {
	height: 101%;
	margin-bottom: 1px;
	min-height: 101%; 
	}
body {
	line-height: 1;
	min-height: 101%; 
	}
ol, ul {
	list-style: none;
	}
blockquote, q {
	quotes: none;
	}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
	}
:focus {
	outline: 0;
	}
ins {
	text-decoration: none;
	}
del {
	text-decoration: line-through;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
.clearfix:after {
	clear: both; 
	content: "."; 
	display: block; 
	height: 0;
	visibility: hidden;
	}
* html .clearfix {
	height: 1%;
	}
.clearfix {
	display:inline-block;
	}
.clearfix {
	display:block;
	}
body {
	background: #e3e3e3 url(images/bg.gif) repeat-x;
	color: #333;
	font: normal 1em Calibri, Verdana, sans-serif;
	}
/*
------------------------------------------------------------------------
=CORE STRUCTURE- 
------------------------------------------------------------------------
*/
#wrapper {
	background: url(images/left_bg.gif) right repeat-y;
	border-left: solid 1px #9a9a9a;
	margin: 0 auto;
	padding-right: 5px;
	position: relative;
	width: 980px;
	}
#header {
	background: #1c1c1c url(images/header_bg.gif) repeat-x;
	border-bottom: solid 1px #343434;
	padding: 30px 0 20px 80px;
	}
#contentwrapper {
	background: #fff url(images/x_default_sidebar_bg.gif) right top repeat-y;
	}
#content {
	background: url(images/content_top_bg.gif) repeat-x;
	float: left;
	margin-right: -380px;
	width: 100%;
	}
#innerwrapper {
	margin: 2.5em 380px 80px 80px;
	}
#sidebar {
	background: url(images/x_default_sidebar_top.gif) right top no-repeat;
	float: right;
	overflow: hidden;
	padding-bottom: 1.25em;
	padding-top: 1.25em;
	width: 380px;
	}
#footer {
	background: #272727 url(images/footer_bg.gif) left bottom repeat-x;
	border-top: solid 1px #343434;
	color: #555;
	font-size: .875em;
	padding: 40px 380px 40px 80px;
	text-align: center;
	text-shadow: #272727 1px 1px 1px;
	}
/*
------------------------------------------------------------------------
=BASICS- 
------------------------------------------------------------------------
*/
p {
	font-size: 0.875em;
	margin-bottom: 1.43em;
	line-height: 1.43em;
	}
	p.last {
		margin-bottom:0;
		}
a {
	color: #000;
	text-decoration: none;
	}
	a:hover {
		color: #900;
		text-decoration: none;
		}
blockquote {
	font-size: 1em;
	line-height: 1.25em;
	margin: 2em 2em 2em 2em; 
	text-align:justify;
	}
strong{
	font-weight: 700; 
	}
em{ 
	font-style: italic;
	}
pre{ 
	background: #eee; 
	border: 1px solid #ddd; 
	line-height:20px; 
	margin-bottom: 20px;
	padding: 10px;
	}
ul { 
	font-size: 0.875em;
	list-style-type:none;
	margin: 1.43em 0 1.43em 0;
	}
ol {
	font-size: 0.875em;
	list-style-type:none;
	margin: 1.43em 0 1.43em 0;
	}
dl{ 
	margin: 20px 0;
	}
abbr, 
acronym, 
span.abbr {
	border: none;
	 }
li {
	line-height: 1.43em;
	list-style-type: none;
	}
a img {
	border-style: none;
	}
code {
	background: #eee;
	border-bottom:1px solid #ccc;
	display:block;
	font-family: "Andale Mono", Consolas, Courier, monospace;
	margin: 1.25em 0 1.25em 0;
	overflow: auto;
	padding:10px;
	}
/*
------------------------------------------------------------------------
=HEADER/MENU 
------------------------------------------------------------------------
*/
#menu {
	clear: both;
	display: inline;
	float: left;
	font-size: 0.9em;
	margin-right: 10px;
        margin-left: 50px
	margin-top: -1.25em;
	text-align: left;
	}
	#menu li {
		color: #bbb;
		display: inline;
		margin-right: 10px;
		}
	#menu a {
		color: #bbb;
		text-shadow: #000 2px 2px 2px;
		}
		#menu a:hover {
			color: #fff;
			}
	#menu li.selected a {
		border-bottom: 1px solid #fff;
		color: #fff;
		}
/*
--------------------------------------------------------------------------------------------
=HEADINGS- (if something seems to be missing check the specific sections (ie: the TOC above)
--------------------------------------------------------------------------------------------
*/
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	}
/*=====for the weblog title in header=====*/
#header h1 {
	float: left;
	font-size: 1.875em;
	font-weight: 700;
	line-height: 0.666em;
	margin-bottom: 0;
	text-transform: uppercase;
	}
	#header h1 a {
	color: #eee;
	display: block;
	padding-top: 1.25em;
	text-shadow: #000 2px 2px 2px;
	}
	#header h1 a:hover {
		color: #bbb;
		text-decoration: none;
		}
/*=====for the weblog post titles=====*/
div.article h1, div.article h2 {
	clear: both;
	font-size: 1.25em;
	font-weight: 700;
	margin: 1.25em 0 0 0;
	text-transform: uppercase;
	}
	div.article h1 a, div.article h2 a {
		color: #f79910; /* default color */
		}
		div.article h1 a:hover, div.article h2 a:hover {
			color: #000;
			}
/*=====for comments=====*/
h4.comments-header {
	clear: both;
	font-size: 1.25em;
	letter-spacing: 1px;
	margin: 1.25em 0 1.25em 0;
	text-transform: uppercase;
	}
/*=====generic, for posts=====*/
h3 {
	font-size: 15px;
	font-weight: bold;
	line-height: 1.11em;
	margin: 1.11em 0 1.11em;
	text-transform: uppercase;
	}
h4 {
	font-size: 16px;
	font-weight: bold;
	margin: 1.25em 0 1.25em 0;
	}
h5, h6 {
	font-size: 14px;
	font-weight: bold;
	line-height: 1.43em;
	}
/*
------------------------------------------------------------------------
=IMAGES
------------------------------------------------------------------------
*/
.article img {
	border: 1px solid #bbb;
	margin: 0.4em auto;
	padding: 3px;
	}
.article img.center {
	display: block;
	margin: 0.4em auto;
	}
.article img.alignright {
	margin: 0.4em 0 0.4em 1.1em
	}
.article img.alignleft {
	margin: 0.4em 1.1em 0.4em 0;
	padding: 3px;
	border: 1px solid #bbb; 
	}
/*-smilies without a border-*/
body img.wp-smiley {
	border:none;
	}
/*
------------------------------------------------------------------------
=WEBLOG CONTENT 
------------------------------------------------------------------------
*/
div.article {
	border-bottom: 1px dotted #7c7cc7;
	margin-bottom: 2.5em;
	padding-bottom: 2.5em;
	}
div.article .body {
	margin-bottom: 1.25em;
	}
/*=====post link colors will change with color options (see Section 11)=====*/
div.article a {
	color: #000;
	text-decoration: none;
	}
div.article a:hover {
	border-bottom: 1px solid #333;
	color: #000;
	}
/*=====META: for post time/category=====*/
div.article .meta {
	color: #999;
	font-size: .75em;
	font-style: italic;
	line-height: 1.66em;
	margin-bottom: 1.66em;
	}
	div.article .meta a {
		color: #999;
		}
		div.article .meta a:hover {
			color: #000;
			}
/*=====for the comment section at the bottom of your posts=====*/
div.article .comments {
	background: url(images/comments.gif) left center no-repeat;
	float: right;
	font-size: 14px;
	line-height: 30px;
	margin: -3.2em 0 0 0;
	}
	div.article .comments a {
		padding: 0 0px 10px 35px;
		}
/*=====for the post footer: tags, etc.=====*/
div.article .post-footer {}
div.article .post-footer p.tags {}
div.article ul li {
	list-style-type: disc;
	}
div.article ol li {
	list-style-type: decimal-leading-zero;
	}
/*
------------------------------------------------------------------------
=SIDEBAR- 
------------------------------------------------------------------------
*/
.boxy {
	background-color: #f79910; /* changes based on choosen color option */
	background-repeat: no-repeat;
	color: #fff;
	margin: 0px 2.5em 0px 5em;
	padding: 0px 1.25em 2.5em 1.25em;
	text-shadow: #ccc 1px 1px 1px;
	}
	.boxy a {
		color: #fff;
		}
		.boxy a:hover {
			color: #eee;
			border-bottom: 1px solid #fff;
			}
#sidebar .short, #sidebar .tall {
	padding-top: 10px; /* only have top padding if we have a background */
	}
#sidebar .short {
	background-image: url(images/x_default_boxy_short.gif);
	}
#sidebar .tall {
	background-image: url(images/x_default_boxy_tall.gif);
	}
/* ems are nifty, eh? :) */
#sidebar .minor {
	font-size: .8em;
	}
#sidebar .minor h3 {
	font-size: 1.25em;
	}
#sidebar .minor dt {
	font-size: 1.25em;
	}
.boxy h3, .boxy h4 {
	color: #fff;
	font-size: 1.25em;
	font-weight: 400;
	margin: .5em 0 .5em 0;
	text-transform: uppercase;
	}
.boxy li {
	margin-left: 1.25em;
	margin-bottom: .25em;
	}
.boxy ul, .boxy dt {
	margin-top: 1.43em;
	}
.boxy dt {
	font-size: 1.25em;
	vertical-align: middle;
	}
.boxy dd {
	margin-left: 1.25em;
	}
.boxy ul dd, .boxy dl li {
	margin-left: 0;
	}
.boxy ul dt, .boxy dl ul {
	margin-top: 0 !important;
	}
/* feed icons */
.feed {
	background: url(images/feed.gif) 0% 100% no-repeat;
	margin-left: 5px;
	padding-left: 20px;
	}
	.feed span {
		font-size: .8em;
		}
/*
------------------------------------------------------------------------
=FOOTER 
------------------------------------------------------------------------
*/
#footer a {
	color: #555;
	text-decoration: none;
	}
	#footer a:hover {
		color: #eaeaea;
		}
/*
------------------------------------------------------------------------
=COMMENTS
------------------------------------------------------------------------
*/
.comment-meta {
	margin: .75em 0 1.25em .75em;
	}
.comment-text {
	border-bottom: 1px solid #ccc;
	font-size: 1.1em;
	margin: 10px 0 1.25em .75em;
	padding: 5px 5px 5px 5px;
	}
#comments-form {
	margin: 4em 0 0 0;
	}
#comments-form a img {
	border:none !important;
	}
#respond {
	}
#trackbacks {
	margin: 0 0 2em 0;
	}
.comment-meta img {
	background: #fff;
	margin: .75em .75em 0 0;
	padding: 5px;
	float:right;
	border:1px solid #E0E0E0;
	}
.comment-author {
	font-size: 1.25em;
	line-height: 1.25em;
	margin:0;
	}
.comment-date {
	color: #999;
	font-style: italic;
	}
.even {
	background: #F0F0F0;
	}
.odd {
	background: #FAFAFA;
	}
.highlight {
	background: #FBFBFE;
	padding: 3px;
	border-top: 3px double #BBBBBB;
	border-bottom:  3px double #BBBBBB;
	}
#comments-form textarea {
	width: 99%;
	}
#comments-form textarea, #comments-form input  {
	background: #eee;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #eee;
	border-right: 1px solid #eee;
	border-top: 1px solid #eee;
	}
	#comments-form textarea:focus, #comments-form input:focus  {
		background: #fff;
		border-bottom: 1px solid #ccc;
		border-left: 1px solid #eee;
		border-right: 1px solid #eee;
		border-top: 1px solid #eee;
		}
/*
------------------------------------------------------------------------
=SKITTLISH OPTIONS
------------------------------------------------------------------------
*/
/*=====01: NOTE: SKITTLISH DEFAULTS TO AN ORANGE/FIXED WIDTH WEBLOG=====*/
/*=====02: to change these default settings open the app.js file, and on line 75 you'll see
a line that begins with "cookie=" change the first color word there to your preferred color option - 
the second word to either fixed or fluid=====*/
#options {
	margin-right: 30px;
	margin-top: 10px;
	position: absolute;
	right: 0;
	top: 0;
	}
#options ul {
	display: inline;
	float: left;
	margin-left: 10px;
	}
#options li {
	float: left;
	margin: 1px;
	padding: 2px;
	}
#options li a {
	border: solid 1px #9a9a9a;
	background-color: #1c1c1c;
	background-repeat: no-repeat;
	display: block;
	height: 10px;
	width: 10px;
	}
#options li a span {
	display: none;
	}
/* options box */
#header h2, #header h3, #options h3 {
	display: none;
	}
#options h2 {
	display: block;
	float: left;
	margin-top: 3px;
	color: #9a9a9a;
	font: normal 10px/12px calibri, verdana, sans-serif;
	text-transform: uppercase;
	}
/*=====this shows the little border around the currently selected menu options and on hover =====*/
body.fixed #options li.fixed,
body.fluid #options li.fluid,
body.blue #options li.blue,
body.cyan #options li.cyan,
body.green #options li.green,
body.orange #options li.orange,
body.pink #options li.pink,
body.red #options li.red,
body.violet #options li.violet,
#options li:hover {
	padding: 2px;
	background-color: #fff;
	}
/*=====you don't really want to change any of this unless you're into big changes=====*/
/* width menu icons */
#options li.fixed a { background-image: url(images/fixed.gif); }
#options li.fluid a { background-image: url(images/fluid.gif); }
/* menu colors swatches */
#options li.blue a { background-color: #0870c9; }
#options li.cyan a { background-color: #1088f7; }
#options li.green a { background-color: #61ac00; }
#options li.orange a { background-color: #f79910; }
#options li.pink a { background-color: #f122be; }
#options li.red a { background-color: #c90808; }
#options li.violet a { background-color: #ae3bd4; }
/*=====cristi used this for the site logo / not used by default now, but play if you want=====*/
body.che #header h1 a {
	padding-left: 53px;
	background: url(images/logo.gif) left bottom no-repeat;
	line-height: .8;
	}
body.che #header h1 a:hover {
	background-position: -2000px 100%;
	}
/* skittlish fixed width setting */
.fixed #wrapper {
	margin: 0 auto;
	width: 980px;
	}
/* skittlish fluid width setting */
.fluid #wrapper {
	margin: 0 80px;
	width: auto;
	}
/*=====BELOW YOU HAVE YOUR COLOR OPTIONS AND WHAT CHANGES WHEN YOU SWITCH THEM.  BASICALLY, COLORS CHANGE AND NOT MUCH ELSE=====*/
/*=====if BLUE COLOR option=====*/
body.blue .article h2 a { color: #0870c9; }
body.blue .article a   { color:#0870c9; }
body.blue .boxy { background-color: #0870c9; }
body.blue #contentwrapper { background-image: url(images/x_blue_sidebar_bg.gif); }
body.blue #sidebar { background-image: url(images/x_blue_sidebar_top.gif); }
body.blue #sidebar .short { background-image: url(images/x_blue_boxy_short.gif); }
body.blue #sidebar .tall { background-image: url(images/x_blue_boxy_tall.gif); }
/*=====if CYAN COLOR option=====*/
body.cyan .article h2 a   { color:#1088f7; }
body.cyan .article a { color:#1088f7; }
body.cyan .boxy { background-color: #1088f7; }
body.cyan #contentwrapper { background-image: url(images/x_cyan_sidebar_bg.gif); }
body.cyan #sidebar { background-image: url(images/x_cyan_sidebar_top.gif); }
body.cyan #sidebar .short { background-image: url(images/x_cyan_boxy_short.gif); }
body.cyan #sidebar .tall  { background-image: url(images/x_cyan_boxy_tall.gif); }
/*=====if GREEN COLOR option=====*/
body.green .article h2 a   { color:#61ac00; }
body.green .article a { color:#61ac00; }
body.green .boxy { background-color: #61ac00; }
body.green #contentwrapper { background-image: url(images/x_green_sidebar_bg.gif); }
body.green #sidebar { background-image: url(images/x_green_sidebar_top.gif); }
body.green #sidebar .short { background-image: url(images/x_green_boxy_short.gif); }
body.green #sidebar .tall  { background-image: url(images/x_green_boxy_tall.gif); }
/*=====if ORANGE COLOR option=====*/
body.orange .article h2 a   { color:#f79910; }
body.orange .article a { color:#f79910; }
body.orange .boxy { background-color: #f79910; }
body.orange #contentwrapper { background-image: url(images/x_orange_sidebar_bg.gif); }
body.orange #sidebar { background-image: url(images/x_orange_sidebar_top.gif); }
body.orange #sidebar .short { background-image: url(images/x_orange_boxy_short.gif); }
body.orange #sidebar .tall  { background-image: url(images/x_orange_boxy_tall.gif); }
/*=====if PINK COLOR option=====*/
body.pink .article h2 a   { color:#f122be; }
body.pink .article a { color:#f122be; }
body.pink .boxy { background-color: #f122be; }
body.pink #contentwrapper { background-image: url(images/x_pink_sidebar_bg.gif); }
body.pink #sidebar { background-image: url(images/x_pink_sidebar_top.gif); }
body.pink #sidebar .short { background-image: url(images/x_pink_boxy_short.gif); }
body.pink #sidebar .tall  { background-image: url(images/x_pink_boxy_tall.gif); }
/*=====if RED COLOR option=====*/
body.red .article h2 a   { color: #c90808; }
body.red .article a { color:#c90808; }
body.red .boxy { background-color: #c90808; }
body.red #contentwrapper { background-image: url(images/x_red_sidebar_bg.gif); }
body.red #sidebar { background-image: url(images/x_red_sidebar_top.gif); }
body.red #sidebar .short { background-image: url(images/x_red_boxy_short.gif); }
body.red #sidebar .tall  { background-image: url(images/x_red_boxy_tall.gif); }
/*=====if VIOLET COLOR option=====*/
body.violet .article h2 a   { color: #ae3bd4; }
body.violet .article a { color:#ae3bd4; }
body.violet .boxy { background-color: #ae3bd4; }
body.violet #contentwrapper { background-image: url(images/x_violet_sidebar_bg.gif); }
body.violet #sidebar { background-image: url(images/x_violet_sidebar_top.gif); }
body.violet #sidebar .short { background-image: url(images/x_violet_boxy_short.gif); }
body.violet #sidebar .tall  { background-image: url(images/x_violet_boxy_tall.gif); }
/*
------------------------------------------------------------------------
=MISCELLANEOUS
------------------------------------------------------------------------
*/
.alignleft, div.nav-previous {
	float: left;
`}
.alignright, div.nav-next {
	float: right;
`}
/*=====for navigation=====*/
.navigation {
	 width: 450px; 
	 margin: 2em 0 2em 0; 
	 float: left; 
	}
* html .navigation { 
	margin: 0 0 2.5em 0; 
	}
.previous { 
	font-size: 1.1em;
	padding: 0 20px 0 0; 
	float: left; 
	}
.next { 
	font-size: 1.1em;
	float: right; 
	}
.clear {
	 width: 450px; 
	height: 1px; 
	clear: both; 
	}
/* forms */
#comment-message, #comment-errors {
	margin-bottom: 1em;
	padding: .5em 3%;
	border-bottom-style: dotted;
	border-bottom-width: 1px;
	color: #1b1b1b;
	font-weight: bold;
	}
#comment-message {
	background-color: #f6f6f6;
	border-bottom-color: #3a3a3a;
	}
#comment-errors {
	border-bottom-color: #9a3a3a;
	background-color: #fff0f0;
	}
.fieldset {
	margin-bottom: 1em;
	border-style: none;
	}
.fieldset dt {
	margin-bottom: .25em;
	color: #838383;
	font-weight: bold;
	}
.fieldset dd {
	margin-bottom: 1em;
	}
.fieldset input, fieldset textarea {
	padding: 2px 4px;
	border: solid 1px #838383;
	background-color: #eaeada;
	font-family: monospace;
	font-size: 1.2em;
	}
.fieldset input:hover, fieldset textarea:hover {
	 background-color: #f2f2e2;
	}
.fieldset input:focus, fieldset textarea:focus {
	background-color: #fafaea;
	}
input {
	padding: 2px 4px;
	}
.fieldset textarea {
	width: 500px;
	height: 200px;
	}
#search {}
#search fieldset {
	text-align: right;
	}
#search fieldset input {
	width: 90%;
	}