/*  
Theme Name: Kaleidoscope
Theme URI: http://www.ikirudesign.com/themes/kaleidoscope/
Description: A development release of a dynamic theme that envisions dates as colors, and offers an innovative archives page. Now with full 2.7 support. By <a href="http://www.ikirudesign.com/">Ikiru Design</a>.
Tags: sticky-post, threaded-comments, two-columns, fixed-width, right-sidebar, theme-options
Version: 0.7.9
Author: Ikiru Design
Author URI: http://www.ikirudesign.com
License: GPL 2.0 (http://www.gnu.org/licenses/old-licenses/gpl-2.0.html)

INDEX
I) Override Browser Defaults
II) Basic Layout
III) Basic Typography
IV) Styling Header
V) Styling Navigation
VI) Styling Content Column
  a) Pagination
  b) Entries
  c) Other
VII) Styling Comments Section
VIII) Styling Sidebar
IX) Styling Footer
X) Creating Classes for Images/Ads
*/
/* ===================================
      I) OVERRIDE BROWSER DEFAULTS 
  ===================================*/
* {
  margin: 0;
  padding: 0;
  font-size: 1em; 
}
a {
  text-decoration: none;
}
a img {
  border: none;
}
/* ===================================
        II) BASIC LAYOUT
  ===================================*/
#container { /*container for everything, below elements inside of it*/
  width: 76em;
  margin: 0 auto; /*centers #page */
}
#content {
  width: 57em;
  float: left;
}
#sidebar {
  width: 16.5em;
  margin-left: 59em;
}
#footer {
  clear: both; /*stops footer from drifting up*/
}
#footercontainer {
  width: 69em;
  margin: 0 auto;
}
/* ===================================
        III) BASIC TYPOGRAPHY
  ===================================*/
body {
  font: 62.5% Georgia, "Times New Roman", Times, serif; /*makes 1em=10px in most cases*/
  color: white;
}
input, textarea {
  font-family: Georgia, "Times New Roman", Times, serif;
}
a {
  color: #d4d4d4;
  text-decoration: underline;
}
a:visited {
  text-decoration: none;
}
a:hover {
  background-color: #aaa;
  color: white;  
}

/* ===================================
      IV) HEADER (Nameplate) STYLING
  ===================================*/
/*body>#page>#header                */ 
#header {
  padding: .5em;  
  text-align: center;
  background: white;
}
h1 {
  font-size: 5.5em;
  font-weight: bold;
}
h1 a, h1 a:visited {
  color: black;
}
h3.description {
  font-size: 2.2em;
  color: #888;
  text-transform: lowercase;
  font-weight: normal; 
}

/* ===================================
        V) NAVIGATION STYLING
  ===================================*/
/*body>#page>#mainnav (under #header)*/
#mainnav {
  padding: 2px 0;
  background: black;
  text-align: center;
}
#mainnav li {
  font-size: 1.6em;
  text-transform: lowercase;
  list-style: none;
  display: inline;
}
#mainnav a {
  padding: 0em .6em;  
  color: white;
}

/* ===================================
        VI) CONTENT STYLING
  ===================================*/
/*body>#page>#container>#content>.post>.topmeta,.entry (under #mainnav)*/
#content {
  padding: 0 .5em 2em .5em;
}

/********** a) Pagination **********/
.paginationtop {
  margin: .5em .1em;  
  padding: .5em .5em;
  font-size: 1.3em;
  line-height: 1.5em; 
}
.pagination {
  font-size: 1.3em;
  line-height: 1.5em; 
}
.alignleft {
  float: left;
}
.alignright {
  float: right;
}

/********** b) Entries      **********/
.post {
  margin: 0;
  padding: 3em 2em 1em 0;
}
#content #search .post { /*use h3 for subsections within a single post; also comments titles*/
  padding: .5em 2em .5em 0;
}

/* %%%%%%%% b) i) Top      %%%%%%%% */
#content h2 { 
  clear: both;
  font-size: 2.7em;
  line-height: 1.444em;
  padding: .2em 3em;
  text-align: center;
  font-weight: bold;
}
#content h2.pagetitle { /*a title space correction for pages that aren't posts*/
  margin-top: 1.1em;
}
#content h2 a {
  color: white;
}
.post .searchmeta { /*for the time/category on search results*/
  font-size: 1.1em;
  text-align: center;
}
.post .topmeta { /*for your average post*/
  font-size: 1.3em;
  border-bottom: 1px dotted white;
  text-align: center;
  color: white;
}
.topmeta a {
  color: white;
}
.post .topmeta .thedate {
  float: left;
  display: block;
  width: 19%;
  text-align: left;
}
.post .topmeta .thecategory {
  text-transform: capitalize;
  font-style: italic;
  text-align: center;
  display: block;
  float: left;
  margin: 0 auto;
  width: 62%;
}
.post .topmeta .thecomments {
  float: right;
  display: block;
  text-align: right;
  width: 19%;
}

/* %%%%%%%% b) ii) Body      %%%%%%%% */
#content h3 { /*use h3 for subsections within a single post; also comments titles*/
  margin: 1.0833em 0;
  border-bottom: 1px dotted white;
  font-size: 1.8em;
  line-height: 1.0833em;
  text-align: center;
}
#content #search h3 {
  margin-bottom: 0;
}
#content h3 a {
  color: white;
}
.entry p {
  margin: 1.5em 0;
  font-size: 1.3em;
  line-height: 1.5em;
}
.excerpt { /*used for search results*/
  margin: 1.3em 0;
  font-size: 1.2em;
  line-height: 1.3em;
  font-style: italic;
}
blockquote {
  margin: 1.5em .2em;
  border-left: 3px solid white;
  padding: 0 1.6em;
  color: #eee;
}
pre, code { 
  font-size: 1.2em;
  line-height: 1.625em;
  font-family: Courier, monospace;
}
pre {
  overflow: auto;
  clear: both; 
  margin: 1.625em .2em;
  border-left: 2px solid white;
  padding: 0 .8em;
  color: #eee;
}
code {
  color: #e9e9e9;
}
#content h4 {
  font-size: 1.3em;
  line-height: 1.5em;
  text-transform: uppercase;
  font-style: italic;
}
#content h5 {
  line-height: 1.5em;
  font-size: 1.3em;
  text-transform: uppercase;
}
#content h6 {
  font-size: 1.3em;
  line-height: 1.5em;
  font-style: italic;
}
/* %%%%%%%% b) iii) Bottom      %%%%%%%% */
.bottommeta {
  margin: .8em 0 2em 0;
  padding: .3em 0 .2em 0;
  border-top: 1px dotted white;
  border-bottom: 1px dotted white;
  font-size: 1.3em;
  position: relative;
  overflow: auto; /*more elegant than empty divs, see http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/*/
}
.bottommeta .indextags {
  display: block;
  float: left;
  text-indent: -4em;
  margin-left: 4em;
  width: 31em;
}
.bottommeta .indexcomments {
  float: right;
  display:  block;
}
.bottommeta p {
  text-align: center
}
.bottommeta a {
  color: white
}
/********** c) Other     **********/
#quilt {
  padding: 5px;
  background: white;
}
.dummydiv {
  clear: both; /*this makes #quilt actually hold all it's components */
}
#content .archives h3 {
  margin-bottom: .2em;
}
.archives ul.quiltbox {
  margin: 0;
}
.archives ul.quiltbox li {
  float: left;
  list-style-type: none;
}
.archives ul.quiltbox li a {
  display: block;
  width: 9.3em; /*121px*/
  height: 5em;
  border: 3px solid white;
  font-size: 1.3em; /*13 px*/
  line-height: 1.1em;
  padding: 4px;
  color: white;
}
.archives ul.quiltbox li a:hover {
  border: 3px solid #222;
}
#archivesleft h3, #archivesright h3, #archivestags h3 {
  padding-top: 1.2em;
}
#archivesleft {
  width: 48%;
  float: left;
}
#archivesright {
  margin-left: 52%;
  width: 48%;
}
.tags a {
  margin: 0 .1em;
}
.entry li, ul.annoying li, .entry dt, .entry dd { /* annoying is because of an unforseen problem with the quilt*/
  margin: 0em 2em;
  font-size: 1.3em;
  line-height: 1.5em;
}
.entry dt {
  font-style: italic;
}
.verboselist li {
  margin: 1.5em 2em;
  font-size: 1.3em;
  line-height: 1.5em;
}
.entry ul, .entry ol, .archives ul {
  margin: 1.5em 1em;
}
.entry fieldset, .entry table {
  font-size: 1.3em;
  line-height: 1.5em;
}
.entry table {
  border-collapse: collapse;
}
.entry table td, .entry table tr, .entry table th {
  border-width: .1em;
  border-style: solid;
  padding: .1em 1em;
}
.entry fieldset p {
  font-size: 1em;
}
.entry dl {
  margin: 1.5em 0;
}
.entry li ul li, .entry li ol li {
  font-size: 1em;
}
.archives ul.annoying li ul {
  margin: 0 .2em;
}
.archives ul.annoying li ul li {
  font-size: 1em;
}
/* ===================================
        VII) COMMENT STYLING
  ===================================*/
/*body>#page>#container>#content>#commentsection>#singlecomment*/
ol.commentlist {
  list-style-type: none;
}
ul.children {
  margin-left: 4em;
  list-style-type: none;
}
ol.commentlist .reply {
  float: right;
  font-size: 1em;
}
#commentssection .navigation {
  font-size: 1.3em;
  clear: both;
  padding: .2em 0 1em 0;
}
/*This is the pre 2.7 stuff*/
#commentssection {
  padding: 0 2.5em 1em 0;
}
#singlecomment {
  margin: .8em 0 2em 0;
  padding: 0 .1em;  
}
.commentmeta {
  position: relative;
  font-size: 1.5em;
  line-height: 1.3em;
  border-bottom: 1px dotted white;
  text-align: center;
}
.postauthor .commentmeta {
  border-bottom: 1px solid white;
}
.commentmeta .thenumber {
  position: absolute;
  left: 0px;
}
.commentmeta .thecitation {
  font-style: italic;
}
.commentmeta .thedate {
  position: absolute;
  right: 0px;
}
#commentssection p {
  margin: 1.5em 0;
  font-size: 1.3em;
  line-height: 1.5em;
} 
#responsesection {
  padding: 1em 0 0 0;
  line-height: 1.8em;
}
#textarea{ /*this is the text-entry field, poorly named*/
  width: 35em; /*deviates from 1em=10px standard*/
}

/* ===================================
        VIII) SIDEBAR STYLING
  ===================================*/
/*body>#page>#container>#sidebar> (right of #conent)*/
#sidebar {
  text-align: left;
  padding: 1em 0;
}
#sidebar h4 {
  margin-left: 0;
  padding: 1.1em 0 0 0;
  text-align: center;
  border-bottom: 1px dotted white;
  font-size: 1.7em;
  line-height: 1.1em;
}
.search_input {
  width: 14.6em;
  margin-top: .3em;
  font-size: 1.1em;
}
#sidebar ul {
  list-style-type: none;
}
#sidebar ul ul {
  margin: 0 2.6em;   
  padding: .3em 0em;
  font-size: 1.1em;
  line-height: 1.4em;
  list-style-type: disc;
}
#sidebar ul ul ul {
  padding: 0;
  margin: 0 1em;
}
#sidebar ul ul ul li {
  font-size: .9em;
  padding: 0;
  line-height: 1.4em;
  list-style-type: disc;
}
#sidebar ul ul.miniquiltbox {
  margin: 4px 1px 0 1px;
  padding: 1px;
  background-color: white;
  overflow: auto;
}
#sidebar ul ul.miniquiltbox li {
  float: left;
  list-style-type: none;
}
#sidebar ul ul.miniquiltbox li a {
  display: block;
  width: 1.727em; /*19px x 19px*/
  height: 1.727em;
  border: 2px solid white;
}
#sidebar ul ul.miniquiltbox li a:hover {
  border: 2px solid #222;
}
/* ===================================
        IX) FOOTER STYLING
  ===================================*/
/*body>#page>#footer> (below #conent & #sidebar)*/
#footer {
  background: black;
  font-size: 1.1em;
  line-height: 1.3em;  
  color: white; 
  padding: 1.1em 0;
  overflow: auto;
}
#footer ul, #footer ul li {
  display: inline;
  list-style-type: square;
}
ul.wp-tag-cloud li {

}
.footerright {
  float: right;
  text-align: right;
  margin: .5em 0;
  width: 35%;
}
.footerleft {
  text-align: left;
  float: left;
  width: 65%;
}
/* ===================================
      X) CREATING CLASSES FOR IMGS
  ===================================*/
/*Whenever you want to use the "align" html tag, 
    avoid the urge and use the much better "class" tag, 
    which accepts the same values: "left" and "right".
  And, it's not considered depricated, as "align" is.*/
img.left {
  float: left;
  margin: .1em .5em .1em 0;
}
img.right {
  float: right;
  margin: .1em 0 .1em .5em;
}
img.center {
  display: block;
  clear: both;
  margin: .2em auto .2em auto; 
}
.ad, .ad_right {
  float: right;
  margin: .1em 0em .1em .5em;
}
.ad_left {
  float: left;
  margin: .1em .5em .1em 0;
}
/* needed for WP 2.5+*/
.alignright {
  float: right;
}
.alignleft {
  float: left;
}
.aligncenter {
  display: block;
  margin: 0 auto;
}
/* copied from wordpress.org for 2.6 Captions*/
.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   /* optional rounded corners for browsers that support it */
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
}
.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}
.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}