/*
Theme Name: wp_monochrome
Theme URI: http://nithinbekal.com/2010/02/07/wordpress-wp_monochrome-theme/
Description: Simple grey and black theme.
Version: 0.1
Author: Nithin Bekal
Author URI: http://nithinbekal.com/
Tags: grey, light, two-columns, right-sidebar, fixed-width

*/

* {
    font-family: Verdana, Arial, "Lucida Grande", sans-serif;
    margin: 0;
    padding: 0;
}
header, footer, section, article, nav {
    display: block;
}
p {
    margin: 1em 0 1em 0;
}
body {
    background-color: #0f0f0f;
}
#wrapper {
    background-color: #f4f4f4;
    border: 5px solid #222;
    margin: 20px auto;
    width: 960px;
}

a {
    color: #222;
    padding: 0 3px;
    text-decoration: none;
}
a:hover {
    background-color: #ccc;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
blockquote {
    background-color: #f8f8f8;
    border: 1px solid #d8d8d8;
    font-style: italic;
    padding: 10px 20px 10px 30px;
}
pre {
    background-color: #000;
    border: 1px solid #d8d8d8;
	color: #00CC00;
	font-family: monospace;
	font-size: 1em;
	line-height: 1.5em;
	margin: 10px 0;
    padding: 10px;
	white-space: pre-wrap;
}

/* Header */

#header {
    height: 140px;
}
#header h1.title {
    color: #000;
    font-family: Verdana, Arial, sans-serif;
    font-style: italic;
    height: 40px;
    padding: 30px 0 0 30px;
    width: 600px;
}
#header h1.title a {
    background: url(images/gradient.png) repeat-x;
    position: absolute;
    display: block;
    width: 600px;
    height: 50px;
}
#header .description {
    color: #555;
    font-family: Verdana, Arial, sans-serif;
    font-style: italic;
    height: 30px;
    padding: 10px 0 0 30px;
}
#header aside {
    background-color: #d4d4d4;
    display: table;
    float: right;
    height: 140px;
    overflow: hidden;
    #position: relative;
    width: 240px;
}
#header aside div {
    display: table-cell;
    #position: absolute;
    #top: 50%;
    vertical-align: middle;
}
#header aside div section {
    background-color: #f8f8f8;
    border: 1px solid #aaa;
    color: #666;
    font-size: 0.75em;
    margin: 0 15px;
    padding: 10px;
    position: relative;
    text-align: center;
    top: -50%;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
#header aside div section a.follow-me-twitter {
    color: #999;
    display: block;
    margin: 5px 0 0 0;
}

/* Header nav */
nav.site-nav {
    background-color: #000;
    font-family: Arial;
    height: 40px;
    position:relative;
}
nav.site-nav ul li.depth-1 {
    border: 2px solid #666;
    margin: 5px 0 0 10px;
}
nav.site-nav #nav-search {
    color: #888;
    float:right;
    margin: 0.4em 20px 0 0;
}
nav.site-nav #nav-search input {
    background: #222;
    border: 1px solid #888;
    color: #ddd;
    height: 1.3em;
    margin: 3px 0 0 0;
    width: 200px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

/* Main */

#posts {
    border-right: 240px solid #d4d4d4;
    color: #444;
    float: left;
    margin: 0 -240px 0 0;
    padding: 50px 0 30px 40px;
    width:680px;
}
.hentry {
    padding: 0 50px 40px 0;
}
.hentry header .post-meta-top {
    color: #aaa;
    display: block;
    float: right;
    font-size: 0.8em;
    text-align: right;
    width: 200px;
}
.hentry header h3 {
    margin: 0 0 15px 0;
    width: 400px;
}
.hentry header h3 a {
    text-decoration: none;
}
.hentry header p {
    font-size: 0.8em;
}
.hentry .post-content {
    font-size: 0.9em;
    line-height: 1.7em;
    margin: 25px 0 3em 0;
    overflow: hidden;
}
.hentry.post-content p {
    margin: 1em 0 1em 0;
}
.hentry .post-content a {
    background-color: #e0e0e0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.hentry .post-content a:hover {
    background-color: #ccc;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.hentry .post-content ol {
    margin-left: 25px;
}
.hentry .post-content ul {
    margin-left: 25px;
}
.hentry footer.post-footer {
	border-bottom: 1px solid #aaa;
    margin: 10px 0 0 0;
	padding: 0 0 30px 0;
}
.hentry footer.post-footer .tags-categories {
    font-size: 0.9em;
    text-align: right;
}
.hentry footer.post-footer .tags-categories p {
    margin-top:0;
}
.hentry footer.post-footer .tags-categories a {
    color: #888;
}
.hentry .post-content .wp-caption a {
	background-color: transparent;
}
#posts .popular-posts {
	margin: 0 100px 0 50px;
}
#posts .popular-posts li {
	margin: 0 0 5px 0;
}

/* Bottom navigation */

nav.prev-next-links {
    height: 2em;
    margin: 10px 40px 30px 0;
    padding: 0 10px 0 0;
}
nav.prev-next-links ul {
    font-size: 1em;
    line-height: 2em;
    list-style-type: none;
}
nav.prev-next-links ul li.prev-link {
    display: block;
    float: left;
}
nav.prev-next-links ul li.next-link {
    display: block;
    float: right;
}

/* Sidebar */

aside#sidebar {
    background-color: #d4d4d4;
    float: left;
	font-size: 0.8em;
    height: 100%;
    width: 240px;
}
.sidebar-widget {
    background-color: #e8e8e8;
    border: 4px solid #666;
    font-size: 0.9em;
    margin: 20px 15px 10px 15px;
    padding: 10px 15px 15px 15px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}
.sidebar-widget h3 {
    border-bottom: 1px dashed #888;
    font-size: 1em;
    padding: 5px 0 10px 10px;
    margin: 0 0 10px 0;
}
.sidebar-widget ul {
    margin: 3px 0 3px 10px;
}
.sidebar-widget ul ul {
    margin: 3px 0 3px 20px;
}
.sidebar-widget ul li {
    line-height: 1.5em;
}

/* Footer */

.blog-footer {
    background-color: #ccc;
    clear: both;
    font-size: 0.8em;
    line-height: 1.5em;
}
.blog-footer h4 {
    font-size: 1em;
    margin: 0 0 0.8em 0;
}
.blog-footer .footer-main {
    background-color: #ccc;
    border-right: 240px solid #aaa;
    float: left;
    margin: 0 -240px 0 0;
    padding: 20px 0;
    width: 720px;
}
.blog-footer .footer-main .footer-left {
    border-right: 3px dashed #888;
    float: left;
    padding: 0 30px 40px 50px;
    text-align: justify;
    width: 280px;
}
.blog-footer .footer-main .footer-center {
    float: left;
    padding: 0 0 0 30px;
    width: 320px;
}
.blog-footer .footer-main a:hover {
    background-color: #aaa;
}
.blog-footer .footer-right {
    background-color: #aaa;
    color: #444;
    float: left;
    padding: 20px 0 20px 30px;
    width: 210px;
}
.blog-footer .footer-right a:hover {
    background-color: #666;
    color: #ccc;
}
.blog-footer .footer-copyright {
    background-color: #000;
    color: #aaa;
    clear: both;
    padding: 10px 0;
    text-align: center;
}
.blog-footer .footer-copyright a {
    background-color: #333;
    color: #aaa;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.blog-footer .footer-copyright a:hover {
    color: #333;
    background-color: #aaa;
}
.blog-footer ul {
    margin-left: 10px;
}

/* Comments template styling */


#comments-template {
    margin: 0;
}
#commentlist {
    margin: 20px 0 50px 0;
}
#commentlist li {
    margin: 0 0 10px 0;
    font-size: 0.8em;
}
#commentlist li .comment-text {
    background-color: #e8e8e8;
    border: 3px solid #888;
    font-size: 0.9em;
    line-height: 1.8em;
    margin: 20px;
    padding: 20px 20px 10px 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
#commentlist li.odd .comment-text {
    background-color: #f0f0f0;
}
#commentlist li.comment-author-admin .comment-text {
    background-color: #fff;
}
h2#postcomment {
    margin: 50px 0 30px 0;
}
#comment {
    width: 400px;
    height: 10em;
}
#submit {
    background-color: #222;
    color: #fff;
    font-weight: bold;
    padding: 0.5em;
}

/* Wordpress default classes */

.alignleft {
    float: left;
}
.alignright {
    float: right;
	margin-left: 2em;
}
.aligncenter {
    text-align: center;
}
.wp-caption-text {
	color: #888;
	font-size: 0.8em;
	padding: 0 10px;
}
/* Error styling */

#s-404 {
    height: 1.5em;
    margin: 20px;
    padding: 0.5em;
    width: 300px;
}