/*  
Theme Name: Kalei_temp_11
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.8.0
Author: Ikiru Design
Author URI: http://www.ikirudesign.com
License: GPL 2.0 (http://www.gnu.org/licenses/old-licenses/gpl-2.0.html)
*/

/* If you're not certain of what you're doing, it's probably best to begin editting at IV. */
/* ===================================
      I) OVERRIDE BROWSER DEFAULTS 
  ===================================*/
@import url(reset.css);

/* ===================================
        II) BASIC LAYOUT
  ===================================*/
#header {}
 #header ul#mainnav {}
#container { width: 76em; margin: 0 auto; }
  #container #content { width: 57em; float: left; }
  #container #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: none; }
  a:visited { color: #e6e6e6; }
  a:hover { background-color: #aaa; color: white; }

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

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

/* ===================================
        VI) CONTENT STYLING
  ===================================*/
#container #content { padding: .5em .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-family: Courier, monospace;
}
pre {
  overflow: auto;
  clear: both; 
  margin: 1.625em .2em;
  border-left: 2px solid white;
  padding: 0 .8em;
  font-size: 1.2em;
  line-height: 1.625em;
}
#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
  ===================================*/
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: 360px; /*deviates from 1em=10px standard*/
}

/* ===================================
        VIII) SIDEBAR STYLING
  ===================================*/
#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
  ===================================*/
#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;
}