/*

Theme Name: Supemi
Theme URI: http://onethousandseas.org/you/supemi
Author: Zhong-I Ma
Author URI: http://onethousandseas.org
Version: 0.92
License Statement: Public domain (GPL-compatible)

Tags: one-column, fixed-width, custom-colors, custom-header, sticky-post, rtl-language-support

Description: Stands for SUPEr MInimalist.  <i>Very</i> easy customization.  A simple, clean, quick-loading, text-only minimalist design with widget-ready bottom sidebar, breadcrumb navigation, full validation, no extraneous repetition of content or navigation, a minimum of files, and heavily commented for beginners.  Started from <a href="http://binarybonsai.com/wordpress/kubrick/">Kubrick</a> and <a href="http://www.plaintxt.org/themes/sandbox/">Sandbox</a>.  <a href="http://mtekk.weblogs.us/code/breadcrumb-navxt/">Breadcrumb NavXT</a> plugin required, theme instructions & further resources at <a href="http://onethousandseas.org/you/supemi">theme website</a>.

*/

/* ####################
GENERAL
#################### */

body
{
background-color:white;  /*  I normally wouldn't set this, but my screengrabber doesn't take if I don't define a color.  */
margin:0;
}

img {
border: 0;
}

#fourohfour_supemi {		/*  Body of 404.  */
font-size: xx-large; 
text-align:center;
margin-bottom:25px;
}

#fourohfour_nav_supemi {	/*  Header nav of 404.  */
text-align:center;
margin-top:60px;
margin-bottom:60px;
font-family:serif;
}

/* ####################
EVERYTHING INSIDE
#################### */

#everything_inside_supemi {	/*  Everything inside, all the content between header and footer.  */
margin:0 auto;
padding-bottom:60px;
overflow:hidden;
width:800px;
}

/* ####################
TOP (POSTS)
#################### */

#top_container_supemi {		/*  Div containing 1.  Date positioning div, 2.  Blog post positioning div.  */
overflow:hidden;
}

.date_supemi {			/*  1.  Date positioning div.  */
width:130px;
float:left;
text-align:right;
}

/*  Nothing here.  */		/*  2.  Blog post positioning div is actually an inline style.  Why?  See: http://wordpress.org/support/topic/270619  */

/* ####################
BOTTOM (SIDEBARS)
#################### */

#bottom_container_supemi {	/*  Div containing 1.  Left sidebar positioning div, 2.  Right sidebar positioning div.  */
margin-right:150px;
margin-left:150px;
}

#left_sidebar_supemi {		/*  1.  Left sidebar positioning div.  */
width:49%;
float:left;
margin-left:-40px;
}

#right_sidebar_supemi {		/*  2.  Right sidebar positioning div.  */
width:49%;
float:right;
margin-right:40px;
}

/* ####################
HEADER/FOOTER
#################### */

#header_supemi {		/*  Positions header.  */
text-align:center;
margin-bottom:60px;
}

#subheader_supemi {		/*  Positions extra-title bits of the header.  */
overflow: hidden;
width: 100%;
}

#subheadernav_supemi {		/*  Positions breadcrumb.  */
width: 48%;
float: left;
text-align: left;
padding:5px;
}

#subheaderforms_supemi {	/*  Positions forms (search, etc.)  */
width: 48%;
float: right;
text-align: right;
padding:5px;
}

#footer_supemi {		/*  Positions footer.  */
clear:both;
text-align:center;
padding-top:15px;
padding-bottom:1px;
}

/* ####################
FIXES (CORRECTIONS FOR GLITCHES)
#################### */

.go_up_supemi {			/*  Makes sure post titles align to top with dates.  */
margin-top:0;
}

.navigation {			/*  Positions navigation.  */
text-align:center;
width : 500px;
margin-left : 150px;
margin-right : 150px;
padding-bottom : 60px;
}

#comment {			/*  Adjusts width of comment box.  */
width:500px;
}

/* ####################
READABILITY
#################### */

.date_supemi {			/*  Date typography.  */
font-weight:bold;
font-size:1.5em;
}

#meta_info_supemi {		/*  "single.php" meta info typography.  */
font-size:x-small;
font-weight:bold;
}

#top_container_supemi {		/*  Justifies text around pics.  */
text-align:justify;
}

.go_bold_supemi {		/*  Bolds things and spaces them apart when needed.  */
font-weight:bold;
margin-top:60px;
margin-bottom:15px;
}

.avatar {			/*  Spaces avatars in relation to comments.  */
float:right;
padding-left:5px;
}

.each_comment_supemi {		/*  Spaces comments apart.  */
border-top:1px solid;
margin-bottom:15px;
padding-top:15px;
}

#respond_supemi {		/*  Spaces response fields down from rest of the page.  */
margin-top:60px;
}

.sticky {			/*  Sticky post typography.  */
font-size:x-large;
}

/* ####################
OPTIONAL
#################### */

#blog_title_supemi {			/*  Typography and spacing of blog title to stand out.  */
font-size:3em;
text-transform:uppercase;
margin-top:60px;
}		

a:link#blog_title_text_supemi {		/*  Styles link if blog title is text.  Comment this entire section out if your title isn't text, such as a graphic.  */
color:black; 
text-decoration:none; 
}
a:visited#blog_title_text_supemi {
color:black; 
text-decoration:none;
}
a:active#blog_title_text_supemi {
color:white; 
text-decoration:none; 
background-color:black;
}
a:hover#blog_title_text_supemi {
color:white; 
text-decoration:none; 
background-color:black;
}

#everything_inside_supemi {		/*  Typography everything inside.  Distinguishes it from header/footer.  */
font-family: sans-serif;
}

#subheadernav_supemi, #subheaderforms_supemi, #footer_supemi, .navigation {	/* Typography of header/footer div. Distinguishes it from everything inside.  */
font-family:garamond, georgia, "times new roman", serif;
}

.comment_text_supemi {			/*  Pretties up comment-to-avatar spacing by justifying.  */
text-align:justify;
}

#left_sidebar_supemi,#right_sidebar_supemi {		/*  Sidebar typography.  */
font-size:x-small;
color: gray;
}

/* ####################
CSS CLASSES REQUIRED BY WORDPRESS
#################### */

.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.alignleft {
float: left;
margin-right:5px;
}

.alignright {
float: right;
margin-left:5px;
}