@import url("main.css");

/* Dates in post titles */

h3 small	{ font-size: 100%; margin-left: 1em; font-weight: normal; }

/* General page layout, divided into two columns */

.post, .page-navigation,
#add-comment blockquote,
#comments .comment			{ float: left; width: 70%; }

#sidebar,
#comments .metadata,
#add-comment .metadata		{ float: right; width: 25%; }

/* Sidebar stuff */
#sidebar			{ padding-bottom: 2em; }
#search				{ width: 75%; }
#sidebar .section	{ margin-bottom: 1em; }
#sidebar .sub		{ color: #c4cbcd; text-shadow: rgba(0, 0, 0, 0.33) 0 -1px 0; white-space: nowrap; }


/* Thine posting */

.post
{
	padding-bottom: 24px;
	background: url("../images/divider.png") 50% 100% no-repeat;
}

.post .metadata
{
	padding: 0;
	margin: 2em 0 0;
	list-style: none;
	text-transform: uppercase;
	text-align: center;
	color: #364857;
	font-weight: bold;
}
.post .metadata li	{ display: inline; margin: 0 0.5em; }

.controls			{ list-style: none; padding: 0; text-align: center; font-size: 90%; }
.controls li		{ padding: 0 0.25em; display: inline; }
#comments .controls	{ float: right; width: 25%; clear: right; text-align: left; }

/* Previous/Next/Home navigation for blog */

.page-navigation
{
	margin: 0 0 3em;
	padding: 0;
	list-style: none !important;
	background: url("../images/gradient_20.png") repeat-x;
	/* background: url("../images/gradient_20.png") repeat-x,
				url("../images/glow_oval_256_reversed.png") 50% 100% no-repeat;
	-webkit-background-size: auto auto, 100% auto; */
	min-height: 2em;
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	
	-webkit-box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0;
	-moz-box-shadow: rgba(255, 255, 255, 0.1) 0 0.5px 0;
}

.page-navigation li		{ width: 40%; padding: 0.33em 0; }
.page-navigation .pill	{ margin: 0 0.33em; }
.page-navigation em		{ color: #9fabae; }
.home-page				{ margin: 0 auto; width: 20% !important; text-align: center; }
.next-page				{ float: right; text-align: right; }
.prev-page				{ float: left; text-align: left; }


/* Comments */

#comments>ol				{ padding: 0 !important; list-style: none; }
#comments>ol>li				{ clear: both; margin: 1em 0; }
#comments .comment			{ width: auto; max-width: 70%; }
#comments .metadata,
#add-comment cite			{ font-style: normal; text-transform: uppercase; }
#comments .metadata a		{ color: white; text-shadow: inherit; text-shadow: rgba(0, 0, 0, 0.33) 0 -1px 0; }
#comments a:hover,
#comments a:focus			{ color: #621; text-shadow: rgba(255, 255, 255, 0.15) 0 1px 0; }
#comments a:active			{ color: #510; }
#comments .metadata small	{ display: block; color: #b1babc; text-shadow: rgba(0, 0, 0, 0.33) 0 -1px 0; }

#add-comment blockquote,
#comments .comment			{ padding: 0; margin: 0; background: url("../images/quote_left.png") no-repeat; }
#add-comment blockquote>div,
#comments .comment>div		{ background: url("../images/quote_right.png") 100% 0 no-repeat; padding: 0 32px; }

/* Special style for my own comments */

.me .comment			{ color: #d7dbde; text-shadow: rgba(0, 0, 0, 0.33) 0 -1px 0; background-image: url("../images/quote_light_left.png") !important; }
.me .comment>div		{ background-image: url("../images/quote_light_right.png") !important; }

.me .comment a			{ color: white; text-shadow: inherit; }
.me .comment a:hover,
.me .comment a:focus	{ color: #632; text-shadow: rgba(255, 255, 255, 0.25) 0 1px 0; }
.me .comment a:active	{ color: #521; }


/* New comment form */

#add-comment label			{ color: #9fabae; }
#add-comment label small	{ font-size: 95%; color: #7c8b9a; }
#add-comment label			{ white-space: nowrap; }
#add-comment textarea		{ width: 99%; display: block; margin: 0 auto; }
#add-comment .submit		{ margin-top: 1em; }

/* Notification messages */

#messages	{ margin-bottom: 1em; }
.message, .notice
{
	background: #1C4 url("../images/gradient_20_reversed.png") 0 100% repeat-x;
	padding: 0 1em;
	margin: 0 0.5em 0.5em 0;
	line-height: 1.5em;
	-webkit-border-radius: 0.75em;
	-moz-border-radius: 0.75em;
	display: inline-block;
	-webkit-box-shadow: rgba(0, 0, 0, 0.75) 0 1px 2px;
	-moz-box-shadow: rgba(0, 0, 0, 0.75) 0 1px 2px;
}

.message	{ background-color: #fea; color: #963; }