/*
Blue: #00bfff rgb(0, 191, 255)
Pink: #db2a62 rgb(219, 42, 98)
Green: #d7ff18 rgb(215, 255, 24)
Light Grey: #2d3235 rgb(45, 50, 53)
Mid Grey: #24282a rgb(36, 40, 42)
Dark Grey #16191a rgb(22, 25, 26)
*/

body { background: #2d3235 url('/images/back.gif') repeat-x fixed; color: #fff; font-family: verdana, arial, sans-serif; font-size: 70%; line-height: 160%; }

a { text-decoration: none; }
abbr { border-bottom: 1px dotted; }
.clear { clear: both; }
.hidden { display: none; }

div#wrap { position: absolute; z-index: -5; width: 960px; }
	/* Start Header */
	header#masthead { float: left; margin: 22px 0 30px 108px; }
		div#skip { margin: 0 0 30px 0; }
				div#skip a { color: #fff; text-decoration: none; border-bottom: 2px solid; padding: 0 0 1px 0; }
				div#skip a:link { color: inherit; border-color: #127495; }
				div#skip a:visited { color: inherit; border-color: #127495; }
				div#skip a:hover { color: inherit; border-color: #00bfff; }
				div#skip a:active { color: inherit; border-color: #00bfff; }
				div#skip a:focus { color: inherit; border-color: #00bfff; }
		
		header#masthead img { position: fixed; top: 290px; left: 18px; }
		header#masthead p { font-family: Arial; font-size: 274%; text-transform: lowercase; }
			header#masthead p  span { display: block; margin: 0 0 17px 0; }
				header#masthead p span span { margin: 0; display: inline; padding: 2px 6px 6px 6px; color: #fff; background-color: #16191a; background: rgba(0, 0, 0, 0.5); }
		header#masthead p a:link { color: #00bfff; }
		header#masthead p a:visited { color: #00bfff; }
		header#masthead p a:hover { color: #00bfff; }
		header#masthead p a:active { color: #00bfff; }
		header#masthead p a:focus { color: #00bfff; }
	/* End Header */
	
	/* Start Nav */
	nav#main { clear: both; float: left; margin: 0 0 0 108px; }
		nav#main li { float: left; margin: 0 5px 4px 0; }
			nav#main li a { padding: 6px 8px 12px 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; }
			nav#main li a:link { color: #efffbf; background-color: #24282a; }
			nav#main li a:visited { color: #efffbf; background-color: #24282a; }
			nav#main li a:hover { color: #000; background-color: #fff; }
			nav#main li a:active { outline: none; position: relative; top: -2px; color: #000; background-color: #fff; }
			nav#main li a:focus{ outline: none; color: #000; background-color: #fff; }
			nav#main li a.selected { color: #000; background-color: #fff; }
	/* End Nav */
	
	/* Start Content */
	#content { clear: both; float: left; background-color: #fff; color: #2d3235; padding: 20px; width: 560px; min-height: 750px; margin: 0 0 0 86px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
		#content h1 { font-family: Arial; font-size: 274%; text-transform: lowercase; font-weight: normal; margin: 0 0 8px 0; line-height: 120%; }
		#content h2 { clear: both; font-weight: normal; color: #fff; margin: 24px 0 12px 0; position: relative; left: -30px; }
			#content h2 span { background-color: #e25481; border-left: 10px solid #b82b59; padding: 6px 6px 6px 20px; }
		#content p { margin: 0 0 10px 0; line-height: 160%; }
		#content blockquote { margin: 0 0 10px 10px; padding: 0 0 0 10px; border-left: 10px solid #cccccc; }
		#content img.frame { border: 10px solid #f2f2f2; margin: 0 0 10px 0; }
		#content div.video { margin: 20px 0 10px 0; }
		#content a { padding: 0 0 1px 0; text-decoration: none; border-bottom: 2px solid; }
		#content a:link { color: inherit; border-color: #cccccc; }
		#content a:visited{ color: inherit; border-color: #cccccc; }
		#content a:hover { color: inherit; border-color: #db2a62; }
		#content a:active { color: inherit; border-color: #db2a62; }
		#content a:focus { color: inherit; border-color: #db2a62; }
		#content a.addthis_button { border: 0; margin-top: 30px; }
		#content dl { float: left; margin: 0 0 20px 0; }
		#content dl dt { width: 130px; float: left; clear: both; margin: 0 0 6px 0; }
		#content dl dt span { background: rgba(0, 0, 0, 0.1); padding: 4px; }
		#content dl dd { float: left; }
			/* Start Meta */
			div#meta { float: left; margin: 0; }
				div#meta p { margin: 0 0 14px 0; color: #cccccc; }
				div#meta ul { float: left; }
				div#meta ul li { float: left; margin: 0 5px 12px 0; }
					div#meta ul li a { border:0; padding: 6px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
					div#meta ul li a:link { background-color: #f2f2f2; color: #2d3235; }
					div#meta ul li a:visited { background-color: #f2f2f2; background: rgba(0, 0, 0, 0.05); color: #2d3235; }
					div#meta ul li a:hover { background-color: #d7ff18; color: #000; }
					div#meta ul li a:active { position: relative; top: -2px; background-color: #d7ff18; color: #000; }
					div#meta ul li a:focus { background-color: #d7ff18; color: #000; }
			/* End Meta */
		#content ul.articles { margin: 30px 20px 0 0; }
		#content ul.articles li h2 { margin: 20px 0 6px 0; position: static; }
			#content ul.articles li h2 a { background: url(http://mattobee.com/images/icons/document.gif) 8px 8px no-repeat; padding: 6px 6px 6px 21px; border: 0; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
				#content ul.articles li h2 a:link { background-color: #e25481; color: #fff; }
				#content ul.articles li h2 a:visited { background-color: #e25481; color: #fff; }
				#content ul.articles li h2 a:hover { background-color: #db2a62; color: #fff; }
				#content ul.articles li h2 a:active { background-color: #db2a62; color: #fff; position: relative; top: -2px; }
				#content ul.articles li h2 a:focus { background-color: #db2a62; color: #fff; }
		#content ul.articles li p { margin: 0; }
			#content ul.articles li p.date { color: #cccccc; }
			/* Start Related */
			#related { margin: 40px 0 4px 0; }
				#related ul li { margin: 0 0 12px 0; }
					#related ul li.last { margin: 0; }
					#related strong { text-transform: lowercase; }
					#related ul li a { background: url(http://mattobee.com/images/icons/document.gif) 7px 8px no-repeat; padding: 7px 6px 6px 20px; border: none; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
					#related ul li.prev a { background: url(http://mattobee.com/images/icons/arrow_left.gif) 7px 10px no-repeat; }
					#related ul li.next a { background: url(http://mattobee.com/images/icons/arrow_right.gif) 7px 10px no-repeat; }
						#related ul li a:link { background-color: #e25481; color: #fff; }
						#related ul li a:visited { background-color: #e25481; color: #fff; }
						#related ul li a:hover { background-color: #db2a62; color: #fff; }
						#related ul li a:active { background-color: #db2a62; color: #fff; }
						#related ul li a:focus { background-color: #db2a62; color: #fff; }
			/* End Related */
	/* End Content */
	
	/* Start Sidebar */
	#sidebar  { position: absolute; left: 697px; top: 290px; width: 290px; }
		/* Start Tagcloud */
		#tagcloud h2 { margin: 0 0 10px 0; }
			#tagcloud ul li { float: left; margin: 0 5px 12px 0; }
				#tagcloud ul li a { padding: 6px; border: none; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
				#tagcloud ul li a:link { background-color: #24282a; color: #efffbf; }
				#tagcloud ul li a:visited { background-color: #24282a; color: #efffbf; }
				#tagcloud ul li a:hover { background-color: #d7ff18; color: #000; }
				#tagcloud ul li a:active { position: relative; top: -2px; background-color: #d7ff18; color: #000; }
				#tagcloud ul li a:focus { background-color: #d7ff18; color: #000; }
				#tagcloud ul li a.selected { background-color: #d7ff18; color: #000; }
		/* End Tagcloud */
		
		/* Start Twitter */
		#twitter { float: left; clear: both; margin: 26px 0 0 0; width: 290px; }
			#twitter h2 { float: left; margin: 0 0 6px 0; }
				a#follow { float: right; margin: 6px 1px 0 0; border: none; padding: 6px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; line-height: 110%; }
				a#follow:link { color: #fff; background-color: #127495; background: rgba(0, 191, 255, 0.5); }
				a#follow:visited { color: #fff; background-color: #127495; background: rgba(0, 191, 255, 0.5); }
				a#follow:hover { color: #fff; background-color: #00bfff; background: rgba(0, 191, 255, 1); }
				a#follow:active { position: relative; top: -2px; color: #fff; background-color: #00bfff; background: rgba(0, 191, 255, 1); }
				a#follow:focus { outline: none; color: #fff; background-color: #00bfff; background: rgba(0, 191, 255, 1); }
			#twitter ul { clear: both; }
				#twitter ul li { background-color: #24282a; background: rgba(0, 0, 0, 0.2); padding: 8px; margin: 0 0 6px 0; line-height: 160%; }
				#twitter ul li.latest { background-color: #16191a; background: rgba(0, 0, 0, 0.5); }
					#twitter ul li a { padding: 0 0 1px 0; text-decoration: none; border-bottom: 2px solid; }
					#twitter ul li a:link { color: inherit; border-color: #127495; }
					#twitter ul li a:visited{ color: inherit; border-color: #127495; }
					#twitter ul li a:hover { color: inherit; border-color: #00bfff; }
					#twitter ul li p.date { background: url(http://mattobee.com/images/icons/comment.gif) center left no-repeat; padding-left: 14px; margin: 4px 0 0 2px; }
		/* End Twitter */
		
	/* Start Elsewhere */
	#elsewhere { float: left; clear: left; width: 560px; position: relative; top: -20px; z-index:-1; margin: 0 0 0 86px; padding: 40px 20px 10px 20px; background-color: #24282a; background: rgba(0, 0, 0, 0.2); border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; }
		#elsewhere h2 { float: left; position: relative; top: -2px; }
		#elsewhere ul { float: right; margin: 4px 0 0 10px; }
			#elsewhere ul li { display: inline; margin: 0 1px 0 0; }
				#elsewhere ul li.last { margin: 0; }
				#elsewhere ul li a { border: none; padding: 6px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
				#elsewhere ul li a:link { color: #fff; background-color: #127495; background: rgba(0, 191, 255, 0.5); }
				#elsewhere ul li a:visited { color: #fff; background-color: #127495; background: rgba(0, 191, 255, 0.5); }
				#elsewhere ul li a:hover { color: #fff; background-color: #00bfff; background: rgba(0, 191, 255, 1); }
				#elsewhere ul li a:active { position: relative; top: -2px; color: #fff; background-color: #00bfff; background: rgba(0, 191, 255, 1); }
				#elsewhere ul li a:focus { outline: none; color: #fff; background-color: #00bfff; background: rgba(0, 191, 255, 1); }
	/* End Elsewhere */
	
	/* Start Footer */
	footer { clear: both; width: 560px; padding: 20px; margin: 0 0 0 86px; }
		footer p { margin: 0 0 12px 0; }
			footer p span { padding: 6px; background-color: #16191A; background: rgba(0, 0, 0, 0.5); }
			footer p a:link { color: #127495; }
			footer p a:visited { color: #127495; }
			footer p a:hover { color: #00bfff; }
			footer p a:active { color: #00bfff; }
			footer p a:focus { color: #00bfff; }
			footer p a { text-decoration: underline; }
		a.backtotop { border: none; float: right; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; background: #24282a url(http://mattobee.com/images/icons/arrow_up.gif) 7px 9px no-repeat; padding: 6px 6px 6px 18px; line-height: 116%; }
			a.backtotop:link { color: #fff; background-color: #127495; }
			a.backtotop:visited { color: #fff; background-color: #127495; }
			a.backtotop:hover { color: #fff; background-color: #00bfff; }
			a.backtotop:active { position: relative; top: -2px; color: #fff; background-color: #00bfff; }
			a.backtotop:focus { color: #fff; background-color: #00bfff; }
	/* End Footer */