/*
THEME NAME: Angulo Blog Theme
THEME URI: http://jeremyricketts.com
DESCRIPTION: Custom theme by Jeremy, with love.
VERSION: 
AUTHOR: <a href="http://jeremyricketts.com/">Jeremy Ricketts</a>
AUTHOR URI:
TAGS: 
*/

/*
	On typography.js, text-transform:lowercase does not have any effect. So I've moved this operation to the
	back end using PHP's strtolower function. 
	Line #54, #56 of post-templater.php
	Line #635, #637 of post-templater.php
*/
@import url('http://static.theangulos.com/layout/css/reset.css');
@import url('http://static.theangulos.com/layout/css/colors.css');
/*@import url('css/diagnostics.css');*/


/*
	Author: Jeremy Ricketts
	Site: http://jeremyricketts.com
	Creation Date m/d/y: 12-15-08
	
	CSS Color Palette:
		Dark grey (text): #333333
		Dark Blue (headings, links): #000066
		Mid Blue (header): #333399
		Light blue (top navigation): #CCCCFF
		Mid grey: #666666
*/


/*	MAIN BLOCKS
-------------------------------------------------------------- */
body {
	font-size: 12px;
    line-height: 18px;
	font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
	background: #f4f5f0 url(http://static.theangulos.com/layout/img/layout/bg-tile.jpg) repeat left center;
}


/*	GENERAL STYLES
-------------------------------------------------------------- */
/* note: 
	Establishes a "baseline grid" with a 12px font size. Line height is 150%, or 18px.
	http://www.alistapart.com/articles/settingtypeontheweb 
*/

a:link, a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

h3 { 
	font-size: 18px;
	line-height: 18px; 
}

ul, ol 	{ margin-bottom: 18px; }
ol 		{ list-style: decimal; }
ul 		{ list-style: disc; }
li 		{ margin-left: 30px; }

p, dl, hr, ol, ul, pre, table, address, fieldset {
	margin-bottom: 18px; 
}
strong, b { font-weight: bold; }
em { font-style: italic; }

/* note: 
	To keep with the Baseline Grid, divs floated left and right should be given 18px margin or padding. 
	Also, make sure all divs and paragraphs and things line up to some number divisible by 18.

	Example:
		.left { 
			float: left; 
			margin: 0 18px 18px 0; 
		}
		.right { 
			float: right; 
			margin: 0 0 18px 18px; 
		}
*/

/*	LOGO
-------------------------------------------------------------- */
h1#blog-title {
	float: left;
	width: 288px; height: 189px;
	margin-top: 50px;
	position: relative;
}
h1#blog-title span {
	position: absolute; left: 0; top: 0;
	height: 72px; width: 86px;
}
h1#blog-title a {
	text-indent: -9999px;
	position: absolute; left: 0; top: 0;
	width: 288px; height: 189px;
	background: transparent url(http://static.theangulos.com/layout/img/branding/theangulos.png) no-repeat left top;
}

/*	MAIN SECTIONS
-------------------------------------------------------------- */
div#wrapper-outer {
	min-width: 960px;
	/*background: transparent url(/wp-content/themes/jeremy_custom/img/layout/bird.png) no-repeat fixed center bottom;*/
}
div#clouds {
	height: 200px;
	overflow: hidden;
	position: relative;
}
	div#clouds img { position: absolute; top: 0; left: 0;}
div#wrapper {
	margin: -200px auto 0 auto;
	width: 960px;
	position: relative;
	/*background: transparent url(/wp-content/themes/jeremy_custom/img/layout/bird.png) no-repeat fixed center bottom;*/
}
.ie6 div#wrapper {
	background: none;
}
.ie6 div#content {
	display: inline; /* double margin bug */
}
div#family {
	width: 348px; height: 431px;
	position: absolute; top: 35px; right: 0;
	background:  transparent url(http://static.theangulos.com/layout/img/branding/family.png) no-repeat left top;
}
	div#family #josh { position: absolute; top: 0; right: 110px; height: 150px; width: 100px; }
	div#family #casey {	position: absolute; top: 0; right: 9px; height: 150px; width: 100px; }
	div#family #caleb {	position: absolute; top: 140px; right: 190px; height: 70px; width: 40px;}
	div.tweet { position: absolute; width: 320px; font-size: 11px; padding: 2px 6px; color: #fff; }
	div.tweet a { color: #fff !important; opacity: .6; filter: alpha(opacity=60); font-weight: bold; }
	div#family #josh-t { top: 19px; left: -198px; }
	div#family #casey-t { top: -28px; right: 20px; }
	div#family #funny-caleb { position: absolute; top: 130px; right: 235px; }
/*.ie6 div#family {
	background:none
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/wp-content/themes/jeremy_custom/img/branding/family.png', sizingMethod='crop');
}*/

div#access {
	float: left; clear: left;
}

div#container {
	text-align: left;
	float: left; clear: left;
	position: relative;
	width: 100%;
				/*outline: 1px solid aqua;*/
	margin-top: 50px;
}

div#content {
	float: left; margin-left: 240px;
				/*outline: 1px solid red;*/
	width: 480px;
}
span.comment-count a {
	background: transparent url(http://static.theangulos.com/layout/img/layout/icon-sprite.gif) no-repeat 4px -98px;
	padding-left: 28px;
}
#comment-notes {
	font-size: 10px;
}

/*	WITHIN CONTENT AREA
-------------------------------------------------------------- */
div.post {
	/*background: #666;*/
	position: relative;
}
div.post {
	margin-bottom: 50px;
}

div.entry-date {
	background: #999;
	color: #E6E6E6;
	width: 50px;
	text-align: center;
	padding: 5px 0;
	position: absolute; top: 0; left: 0;
	margin-left: -60px;
	text-transform: lowercase;
}
div.entry-author {
	margin-bottom: 1em;
	text-transform: lowercase;
}
div.entry-meta {
	border-top: 1px solid #D3D3D3;
	text-transform: lowercase;
	font-size: 10px;
}
div.entry-meta p {
	opacity: 0.6;
	-moz-opacity: 0.6;
	filter: alpha(opacity=60);
}
p#wwsgd {
	border-top: 1px dotted #999;
	border-bottom: 1px dotted #999;
	padding: 5px;
	position: absolute; left: -240px; top: 170px;
	width: 140px;
}
	/*<p id="wwsgd">If you're new here, you may want to subscribe to my <a href="http://feeds2.feedburner.com/theangulos">RSS feed</a>. Thanks! <br /><small><a href="#rss-desc-content" rel="facebox">What's RSS?</a></small></p>*/
	
.jump-back {
	position: absolute; top: -40px; left: 240px;
	color: #999 !important;
}
p.wp-caption-text {
	color: #666;
	font-size: 11px;
}
	
/*	CONTENT IMAGES
-------------------------------------------------------------- */
.entry-content img {
	border: 1px solid #D3D3D3;
	background: #fff;
	padding: 5px;
}
/*.entry-content img.alignleft { float: left; margin: 0 10px 5px 0;}
.entry-content img.alignright { float: right; margin: 0 0 5px 10px;}*/
.entry-content img.alignleft { float: none; margin: 0 10px 5px 0; display: inline; }
.entry-content img.alignright { float: none; margin: 0 0 5px 10px; display: inline; }


/*	COMMENTS AREA
-------------------------------------------------------------- */
#comments-list {
	/*background: yellow;*/
}
#comments-list li {
	list-style: none outside;
	margin: 10px 0;
	background: #fff;
	width: 438px;
	padding: 15px 20px;
	float: left; clear: left;
	position: relative;
	border: 1px solid #D3D3D3;
}
#comments-list li img {
	position: absolute; top: 15px; right: 15px;
	border: 1px solid #fff;
}
#comments-list li.bypostauthor {
	color: #fff;
}
#comments-list li .comment-author span {
	text-transform: lowercase;
	font-size: 18px;
}
#comments-list li.bypostauthor .comment-author span {
	color: #fff;
	font-weight: lighter;
}
div.comment-meta {
	font-size: 10px;
	opacity: 0.6;
	-moz-opacity: 0.6;
	filter: alpha(opacity=60);
}
#comments-list .unapproved {
	font-style: italic;
	font-weight: bold;
	background: #FCFCA2;
}
#comments-list li.bypostauthor .unapproved { color: #000;}
/* Comment Form */
#respond {
	float: left; clear: left;
	padding-top: 20px;
	position: relative;
}
#respond p.comment-rss {
	float: right;
	width: 200px;
	text-align: right;
}
#respond p.comment-rss a.rss-linky-poo {
	background: transparent url(http://static.theangulos.com/layout/img/layout/icon-sprite.gif) no-repeat -1px -38px;
	padding-left: 20px;
	display: inline-block;
}
#respond p.comment-rss span {
	font-size: 10px;
}
#commentform div.form-label {
	font-weight: bold;
	margin-top: 1em;
}
#commentform div.form-label,
#commentform div.form-input {
	float: left; clear: left;
}
#commentform span.required {
	color: #666;
}
#commentform .form-input input,
#commentform .form-textarea textarea {
	float: left; clear: left;
	border: 1px solid #999;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-khtml-border-radius: 2px;	
	-moz-border-radius: 2px;
	padding: 6px;
	font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
	font-size: 12px;
	width: 200px;
}
#commentform .form-textarea textarea {
	width: 480px;
	height: 60px;
}
#commentform .form-submit input {
	float: left; clear: both;
	margin: 20px 0;
}

/*	TITLES AND HEADINGS
-------------------------------------------------------------- */
h2.entry-title, h3.entry-title,
h2.page-title, h2.page-title strong {
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-weight:bold;
	font-size:24px;
	letter-spacing: -1px;
	line-height: 24px;
	color: #353434;
	text-transform: lowercase;
}
h2.page-title strong, h2.page-title span {
	color: #666;
	margin-left: .3em;
}
.ie7 h2.entry-title a,
.ie7 h2.entry-title, .ie7 h3.entry-title,
.ie7 h2.page-title, .ie7 h2.page-title strong {
	cursor: pointer;
	display: inline-block; /*Hack for typeface.js. Only canvas items were being linked and not gap between letters*/
}
h2.page-title, div.page h2.entry-title {
	margin-bottom: 20px;
}
#birdy {
	position: absolute; top: -31px; left: -44px;
}
.ie6 #birdy {
	display: none;
}
#funny-tweet {
	position: absolute; top: -40px; left: -84px;
}
.ie6 #funny-tweet {
	display: none;
}

/*	SIDEBARS
-------------------------------------------------------------- */
div.sidebar {
	overflow:hidden;
	width:200px;
				/*outline: 1px solid green;*/
}
	/* Left sidebar */
	div#primary {
		position: absolute; top: 0; left: 0;
	}
	/* Right Sidebar */
	div#secondary {
		float: right;
		margin-top: 160px;
	}
div.sidebar ul,
div.sidebar ul li,
div.sidebar li ul {
	margin: 0;
}
div.sidebar li,
div.sidebar h3,
a.close-modal,
p.modal-heading {
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-weight:bold;
	font-size:24px;
	letter-spacing: -1px;
	line-height: 24px;
	margin-top: 1em;
}
div.sidebar h3 {
	color: #666;
}
#secondary h3 {
	margin-bottom: 12px;
}
.ie7 div.sidebar li a {
	cursor: pointer;
	display: inline-block; /*Hack for typeface.js. Only canvas items were being linked and not gap between letters*/
}
div.sidebar li ul li,
div.sidebar li div {
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size:12px;
	letter-spacing: 0;
	line-height: 18px;
	font-weight: normal;
}
/* Stay Connected section */
#rss-links li {
}
li.connect-twitter, li.connect-email, li.connect-facebook, li.connect-rss {
	padding-left: 20px;
	background-color: transparent;
	background-image: url(http://static.theangulos.com/layout/img/layout/icon-sprite.gif);
	background-repeat: no-repeat;
}
li.connect-twitter { background-position: 0 -67px; }
li.connect-email { background-position: -1px -18px; }
li.connect-facebook { background-position: -1px 3px; }
li.connect-rss { background-position: -1px -38px; }
li.connect-rss span { font-size: 10px; }
#email-sub-input, #s-404 { 
	width: 100px; 
	color: #999; 
	border: 1px solid #999;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-khtml-border-radius: 2px;	
	-moz-border-radius: 2px;
	padding: 2px;
}
#s-404 { width: 200px;}
#email-sub-input:focus { color: #000; border: 1px solid #666;}
#email-sub-go { /*float: left;*/}

/*	MODAL WINDOWS
-------------------------------------------------------------- */
p.modal-heading {margin-top: .2em; color: #666;}
#searchform input.text {
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-khtml-border-radius: 2px;	
	-moz-border-radius: 2px;
	/*border-color:#8E8E8E #E1E1E1 #E1E1E1 #8E8E8E;*/
	border-color:#8E8E8E;
	border-style:solid;
	border-width:1px;
	padding: 4px;
	width: 200px;
}


/*	FOOTER
-------------------------------------------------------------- */
div#flowers {
	width:100%;
	position: fixed; bottom: 0; left: 0;
	text-align: center;
	background: transparent url(http://static.theangulos.com/layout/img/layout/flowers.png) no-repeat center bottom;
	height: 100px;
	z-index: -1;
}
div#footer {
	clear:both;
	width:480px;
	margin: 0 auto;
	display: block;
}
div#footer p {
	font-size: 10px;
	opacity: 0.6;
	-moz-opacity: 0.6;
	filter: alpha(opacity=60);
}



/*	CLEARED ELEMENTS
-------------------------------------------------------------- */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/*	MISC
-------------------------------------------------------------- */
a:focus { outline: 0; }
hr {
	border-color: #ccc;
	border-style: solid;
	border-width: 1px 0 0;
	clear: both;
	height: 0;
}
/* Line Height Fixes for sup and sub */
	sup { vertical-align: top; }
	sub { vertical-align: bottom; }
/* Ordered lists in ie6 and ie7 can get easily off track when li's are not inline */
	.ie6 ol, .ie7 ol {
		float: none;
		width: auto;
	}