/*
Theme Name: HTML 5
Theme URI: http://html-five.net/
Description: HTML 5 theme for Wordpress.
Version: 1.0
Author: Leo
Author URI: http://ama.to/
Tags: html5
*/

/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */
@font-face { font-family: Delicious; src: url(fonts/Delicious-Roman.otf) format("opentype"); }
@font-face { font-family: Delicious; src: url(fonts/Delicious-Italic.otf) format("opentype"); font-style: italic; }
@font-face { font-family: Delicious; src: url(fonts/Delicious-Heavy.otf) format("opentype"); font-weight: bold; }
@font-face { font-family: Delicious; src: url(fonts/Delicious-BoldItalic.otf) format("opentype"); font-weight: bold; font-style: italic;  }

header, footer, section, article, aside, nav { display: block; }
*, body { margin: 0; padding: 0; }
body { width: 890px; margin: 0 auto; font: 16px/1.5em Delicious, Arial, sans-serif; color: #555; background: #fff; }

a { text-decoration: none; color: #0066CC;	}
a:hover { text-decoration: underline; color: #CC0066; }

img { border: none; }
img.alignleft { float: left; margin: 0 15px 15px 0; }
img.alignright { float: right; margin: 0 0 15px 15px; }
img.border { padding: 4px; border: 1px #ccc solid; }

abbr, acronym { cursor: help; border-bottom: 1px #ccc dashed; }

span.amp { font-family: Baskerville, Palatino, Constantia, "Book Antiqua", "URW Palladio L", serif; font-style: italic; font-size: 110%; }

/* Header */
#header { position: relative; padding: 20px 0; }
	#header h1 { height: 59px; text-indent: -9999px; background: url(img/logo.png) center no-repeat; }
		#header h1 a { outline: none; display: block; height: 59px; text-decoration: none; }

/* Nav */
#nav { border: #ddd solid; border-width: 3px 0 1px 0; font-size: 14px; line-height: 1em; font-weight: bold; text-transform: uppercase; letter-spacing: 1.5px; margin: 10px 0 30px 0; }
	#nav ul { height: 25px; list-style: none; }
		#nav ul li { display: inline;  }
			#nav ul li a { display: block; float: left; padding: 5px 10px; color: #666; border-left: 1px #ddd solid;  }
			#nav ul li.first a { border: none; }
			#nav ul .current-cat a { background: #f7f7f7; }

/* Content */
#content { clear: both; width: 500px; float: left; background: #fff; }
	#content .head { font-size: 25px; margin: 0 0 50px 0; padding: 0 0 10px 0; font-weight: normal; color: #aaa; border-bottom: 2px #eee solid; }
		#content .head strong { color: #666; }
	#content .banner { text-align: center; padding: 0 0 40px 0; margin: 0 0 40px 0; border-bottom: 4px #ddd dotted; }
	#content nav { margin: 20px 0 0 0; text-transform: uppercase; text-align: center; font-size: 12px; letter-spacing: 2px; }
		#content nav a { font-weight: bold; color: #666; }
		#content nav a:hover { color: #000; }

/* Posts */
#content article { position: relative; padding: 0 0 40px 0; margin: 0 0 40px 0; border-bottom: 4px #ddd dotted; }
	#content article code, #content article pre { font-family: sans-serif; letter-spacing: 0.5px; font-style: normal; color: #4d6680; }
	#content article a:hover code { color: #CC0066; }
	#content article header { margin: 0 0 20px 0; }
		#content article header h1 { font-size: 35px; font-weight: normal; line-height: 1em; letter-spacing: -1px; }
	#content article section { font-family: Helvetica, Arial, sans-serif; }
		#content article section p { margin: 0 0 1em 0; }
		#content article section blockquote { font-family: Delicious, sans-serif; color: #7a8a99; font-size: 1.2em; margin: 0 40px 1em 40px; }
			#content article section blockquote p { margin: 0 0 10px 0; }
			#content article section blockquote cite { display: block; font-style: normal; font-size: 11px; line-height: 1em; text-align: right; color: #888; }
				#content article section blockquote cite a { color: #666; }
		#content article section q { color: #7a8a99; font-style: italic; }
		#content article section ul { list-style: none; margin: 0 0 1em 30px; }
			#content article section ul li { padding: 3px 0 3px 15px; background: url(img/li.png) 0 13px no-repeat; }
		#content article section pre { overflow: auto; margin: 0 0 1.2em 0; font-size: .8em; background: #f7f7f7; padding: 5px; }
		#content article section .vvqbox  { margin: 0 auto 1em auto; padding: 5px; border: 1px #ddd solid; }
	#content article footer { margin: 20px 0 0 0; }
		#content article footer p { text-align: center; font-size: 11px; font-weight: bold; line-height: 1.2em; text-transform: uppercase; letter-spacing: 2px; color: #999; }
		#content article footer p.comments { font-size: 15px; } 
			#content article footer p a { color: #666; }
			#content article footer p.comments a { padding: 0 16px 0 0; background: url(img/icon-comments.png) right no-repeat; }
			
/* Miniposts */
#content .category-miniposts { }
	#content .category-miniposts header, #content .category-miniposts section { position: relative; width: 525px; left: -25px; margin: 0; padding: 0 0 0 20px; border-left: 5px #eee solid; }
		#content .category-miniposts header h1 { font-weight: bold; text-transform: uppercase; font-size: 18px; letter-spacing: 0; }
		#content .category-miniposts header a, #content .category-miniposts section a  { color: #CC0066; }
		#content .category-miniposts header a:hover, #content .category-miniposts section a:hover { color: #0066CC; }
		#content .category-miniposts section { padding: 5px 0 0 20px; font-size: .9em; }
		
/* Showcase */
#content .category-html-5-showcase { }
	#content .category-html-5-showcase section a img { padding: 1px; border: 4px #eee solid; }
	#content .category-html-5-showcase section a:hover img { border-color: #0066CC; }	

/* Comments */
#comments {}
	#comments h3 { font-size: 26px; color: #888; text-transform: uppercase; margin: 0 0 20px 0; }
	#comments article { border: none; padding: 0; margin: 0 0 30px 0; font-size: 14px; }
	#comments .depth-2 { margin: 0 0 30px 40px; }
	#comments .depth-3 { margin: 0 0 30px 80px; }
		#comments article header { position: relative; height: 25px; padding: 5px; background: #eee; border-bottom: 2px #ddd solid; margin: 0 0 10px 0; }
		#comments .bypostauthor header { background: #e6f0fa; border-color: #cce0f4; }
			#comments article header h4 { font-size: 15px; line-height: 25px; }
				#comments article header h4 img { vertical-align: middle; }
				#comments article header h4 cite { font-style: normal; }
				#comments article header h4 time {  color: #888; font-size: 12px; }
			#comments article header .comment-reply-link { font-size: 12px; line-height: 1em; position: absolute; top: 10px; right: 10px; background: #0066CC; color: #fff; padding: 3px; text-decoration: none; }
			#comments article header .comment-reply-link:hover { background: #CC0066; }
		#comments section {}
			#comments section .moderation { text-align: center; font-weight: bold; color: #999; }
		#comments article footer { text-align: center; margin: 0; font-size: 13px; line-height: 1em; font-weight: bold; text-transform: uppercase; }

#respond { position: relative; margin: 0 0 20px 0; background: #f7f7f7; padding: 10px; border: 3px #ddd double; }
	#respond legend { padding: 0 5px; text-transform: uppercase; color: #888; font-size: 13px; letter-spacing: 2px; }
	#respond label { font-weight: bold; font-size: 12px; line-height: 1em; color: #999; }
	#respond input, #respond textarea { margin: 0 0 10px 0; width: 460px; padding: 5px; border: 1px #ddd solid; }
	#respond input:focus, #respond textarea:focus { border-color: #000; }
	#respond #submit { display: block; width: auto; margin: 0 auto; background: #0066cc; color: #fff; cursor: pointer; }
	#respond .html { margin: 10px 0 0 0; font-size: 11px; line-height: 1em; color: #777; }
	#respond #cancel-comment-reply-link { padding: 3px; font-size: 11px; line-height: 1em; background: #fff; }

/* Contact */
#contact {}
	#contact h1 { font-size: 35px; margin: 0 0 10px 0; }
	#contact fieldset { border: 3px #eee double; padding: 10px 10px 0 10px; }
		#contact fieldset p { margin: 0 0 10px 0; }
			#contact fieldset p label { font-weight: bold; color: #888; }
			#contact fieldset p input, #contact fieldset p textarea { font: 13px Delicious, sans-serif; width: 460px; padding: 4px; border: 1px #ccc solid; }
			#contact fieldset p input:focus, #contact fieldset p textarea:focus { border-color: #000; }
			#contact fieldset p #submit { display: block; width: auto; margin: 0 auto; border: none; cursor: pointer; color: #fff; font-weight: bold; text-transform: uppercase; background: #CC0066; }
			#contact fieldset p span.error { display: block; font-weight: bold; color: #CC0066; font-size: 13px; }
			#contact fieldset p input.error, #contact fieldset p textarea.error { border-color: #CC0066; }

/* Sidebar */
#sidebar { width: 300px; float: right; font-size: 12px; line-height: 1em; background: #f2f9ff; padding: 15px; }
	#sidebar h1, #sidebar h3 { text-transform: uppercase; font-size: 16px; color: #CC0066; padding: 5px 0; border-bottom: 1px #dae0e5 solid; }
	#sidebar ul { list-style: none;  }
		#sidebar ul li { }
			#sidebar ul li ul { margin: 0 0 20px 0; }
				#sidebar ul li ul li { border-bottom: 1px #ccc dotted; padding: 5px 0 5px 12px; background: url(img/li.png) 0 8px no-repeat; }
					#sidebar ul li ul li ul { margin: 0; } 
						#sidebar ul li ul li ul li { border: none; padding: 5px 0 0 12px; } 

	/* Subscribers */
	.subscribers {}
		.subscribers a { display: block; width: 160px; height: 30px; font-size: 15px; font-weight: bold; padding: 5px 0 0 45px; background: url(img/bg-feed.png) no-repeat; color: #777; margin: 0 auto 20px auto; text-decoration: none; }
		.subscribers a:hover { color: #333; }
			.subscribers a strong { color: #000; font-size: 22px; }
			.subscribers a span { display: block; font-size: 11px; font-weight: normal; text-transform: uppercase; }

	/* Ads */
	#sidebar .ads { margin: 0 0 20px 0; padding: 0 0 20px 0; border-bottom: 1px #dae0e5 solid; }

	/* Tagcloud */
	#sidebar #tagcloud { margin: 0 0 20px 0; }
		#sidebar #tagcloud ul { text-align: center; margin: 10px 0 0 0; line-height: 1.8em; }
			#sidebar #tagcloud ul li { display: inline; }
				#sidebar #tagcloud ul li a { padding: 0 2px; white-space: nowrap; }
				
	/* Search */
	#sidebar .search { margin: 0 0 20px 0; text-align: center; }
		#sidebar .search input { font: 13px Delicious, sans-serif; padding: 3px; }
		#sidebar .search label { display: none; }
		#sidebar .search #s { width: 210px; border: 1px #ccc solid; }
		#sidebar .search #s:focus { border-color: #000; } 
		#sidebar .search .button { width: 70px; border: none; cursor: pointer; color: #fff; font-weight: bold; text-transform: uppercase; background: #CC0066; }

	/* Showcase */
	#showcase { width: 150px; float: left;  }
		#showcase h1 { margin: 0 0 20px 0; }
		#showcase article { position: relative; margin: 0 0 20px 0; padding: 0 0 20px 0; border-bottom: 1px #ccc dotted; }
			#showcase article h2 { position: absolute; background: #fff; bottom: 24px; right: 2px; padding: 2px; font-size: 12px; line-height: 1em; letter-spacing: 1px; }
			#showcase article a { text-decoration: none; }
		#showcase footer { text-align: center; font-weight: bold; }
		
	/* Extras */
	#extras { width: 120px; float: right; }

/* Footer */
#footer {	padding: 50px 0 10px 0; text-align: center; clear: both; font-size: 12px; line-height: 1em; letter-spacing: 1px; }
