/*
	reset
*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video
{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font-weight: normal;
	vertical-align: baseline;
	background: transparent;
}

ol, ul
{
	list-style: none;
}

table
{
	border-collapse: separate;
	border-spacing: 0;
}

	caption, th, td
	{
		text-align: left;
		font-weight: normal;
	}

article, aside, dialog, figure, footer, header, hgroup, nav, section
{ 
	display: block;
}

a
{
	outline: 0;
}

/*
	site styles
*/
html
{
	/*background: #fff url(img/bg-main.jpg) 0 0 repeat-x;*/
	background: #333 url(img/bg-html.jpg) 50% 0 repeat;
	/*background: -moz-linear-gradient(0 50%, #000, #fff);
	background: -webkit-gradient(linear, left top, right top, from(#000), to(#fff));*/
	padding: 55px 0 0;
}

body
{
	font: 12px/1.3 Verdana, Arial, sans-serif;
	color: #333;
	
	width: 900px;
	margin: 120px auto 40px;
	padding: 19px 19px 0 20px;
	border: 1px solid #999;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background: #666;
	background: rgba(102,102,102,0.6);
	position: relative; /* IE 7 */
}

h1, h2, h3
{
	font: italic 32px Georgia, Times, "Times New Roman", serif;
	margin: 20px 0;
}

h2
{
	font-size: 22px;
	margin-bottom: 0;
}

h3
{
	font-size: 18px;
}

img
{
	display: block;
}

abbr[title]
{
	border-bottom: 1px dotted;
}

body > header
{
	color: #fff;
	margin: -180px -20px 0;
	padding: 20px;
	position: absolute;
	overflow: hidden;
	height: 160px;
	width: 920px;
	right: 20px; /* IE 7 */
}

body > header h1
{
	position: absolute;
	margin: 0;
	top: 14px;
	right: 15px;
}

body > header h2
{
	font: italic 22px/1.2 Georgia, Times, "Times New Roman", serif;
	margin: -95px auto 0;
	padding: 80px 265px 0 0;
	width: 620px;
	text-align: center;
	text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2);
}

body > header > nav
{
	position: absolute;
	overflow: hidden;
	bottom: 80px;
	left: 20px;
}

	body > header > nav li
	{
		float: left;
		padding: 0 3px 0 0;
	}
	
	body > header > nav a
	{
		display: block;
		background: #666;
		color: #ccc;
		border: 1px solid #333;
		-moz-border-radius: 0.4em 0.4em 0 0;
		-webkit-border-radius: 0.4em 0.4em 0 0;
		border-radius: 0.4em 0.4em 0 0;
		text-decoration: none;
		text-shadow: 1px 1px 1px rgba(0,0,0, 0.2);
		font-size: 12px;
		padding: 5px 15px;
	}
	body > header > nav .current_page_item a
	{
		padding-top: 3px;
		padding-bottom: 3px;
		margin: 4px 0 -4px;
	}
	body > header > nav a:hover,
	body > header > nav a:focus
	{
		background: #79a;
		color: #fff;
	}

body > section
{
	width: 655px;
	background: #fff;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
	padding: 0 19px 19px;
	margin: -60px 0 -20px -40px;
	float: left;
	overflow: hidden;
	line-height: 1.4;
	position: relative;
	min-height: 400px;
}

	body > section > h1
	{
		color: #a67d00;
	}
	
	body > section > nav ul
	{
		margin: 1em 0 0;
		overflow: hidden;
	}
	
	body > section > nav .previous
	{
		float: left;
	}
	
	body > section > nav .next
	{
		float: right;
	}
	
	body > section > article + article
	{
		padding: 20px 0 0;
	}
	
	body > section > article > header
	{
		padding: 16px 0 0;
	}

	body > section > article > header > h1
	{
		float: left;
		width: 480px;
		margin: 0 0 20px;
	}
	
	body > section > article > header > h1 a
	{
		text-decoration: none;
		font-weight: normal;
		color: #000 !important;
	}
	body > section > article > header > h1 a:hover,
	body > section > article > header > h1 a:focus
	{
		text-decoration: underline;
	}
	
	body > section > article > header > p
	{
		position: absolute;
		right: 0;
		margin: -2px -1px 0 0;
		padding: 8px 10px;
		text-align: center;
		background: #000;
		color: #fff;
		width: 160px;
		-moz-border-radius: 10px 0 0 10px;
		-webkit-border-radius: 10px 0 0 10px;
		border-radius: 10px 0 0 10px;
	}
	
	body > section > article > header > p time
	{
		display: block;
	}
	
	body > section > article > header > p a
	{
		text-decoration: none;
		color: #fec !important;
	}
	body > section > article > header > p a:hover,
	body > section > article > header > p a:focus
	{
		text-decoration: underline;
	}
	
	body > section > article > section
	{
		clear: both;
	}
	
	body > section > article figure
	{
		float: right;
		margin: 1em 0 1em 20px;
		border: 1px solid #eee;
		padding: 9px;
		-moz-box-shadow: 0 0 10px rgba(0,0,0,0.2);
		-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2);
		box-shadow: 0 0 10px rgba(0,0,0,0.2);
		background: #fff;
		width: 180px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
	}
	
	body > section > article ol
	{
		margin: 1.5em 0 1.5em 20px;
		list-style-type: decimal;
	}
	
	body > section > article ul
	{
		margin: 1.5em 0 1.5em 20px;
		list-style-type: disc;
	}
	
	body > section > article li
	{
		margin: 1.5em 0;
	}
	
	body > section > article li ol,
	body > section > article li ul
	{
		margin-top: 0.5em;
		margin-bottom: 0.5em;
	}
	
	body > section > article li li
	{
		margin: 0.5em 0;
	}
	
	body > section > article ol ul, body > section > article ol ol,
	body > section > article ul ul, body > section > article ul ol
	{
	}
	
	body > section > article figure dt
	{
		margin: 0;
		padding: 10px 0 0;
	}
	
	body > section > article .more-link
	{
		display: inline-block;
		margin: 1em 0 0;
		color: #79a !important;
		text-decoration: none;
	}
	body > section > article .more-link:hover,
	body > section > article .more-link:focus
	{
		text-decoration: underline;
	}
	
	body > section > article > footer
	{
		-moz-border-radius: 0 10px 10px 0;
		-webkit-border-radius: 0 10px 10px 0;
		border-radius: 0 10px 10px 0;
		background: #eee;
		padding: 1em 20px;
		margin: 1em 0 0 -20px;
	}
	
	body > section > article > footer p
	{
		margin: 0;
	}

	body > section p
	{
		margin: 1.5em 0;
	}

	body > section a
	{
		font-weight: bold;
		color: #79a;
	}
	body > section a:hover,
	body > section a:focus
	{
		color: #a97;
	}
	
	body > section form
	{
		background: #a97;
		color: #fff;
		margin: 20px 0;
		padding: 18px 20px 20px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
	}

body > aside
{
	overflow: hidden;
	padding: 0 0 0 20px;
	color: #fff;
	text-shadow: 2px 2px 1px rgba(0,0,0, 0.2);
}

	body > aside h1
	{
		float: none;
		width: auto;
		margin-bottom: 20px;
	}
	
	body > aside h1, body > aside h1 a
	{
		font-size: 18px;
		font-weight: bold;
		font-style: normal;
		color: #ccc;
	}
	body > aside h1 a:hover
	{
		color: #fff;
	}

	body > aside a
	{
		font-weight: bold;
		color: #fec;
	}
	body > aside a:hover,
	body > aside a:focus
	{
		color: #cef;
	}
	
	body > aside .widget_text
	{
		padding: 30px 0 0;
		font: italic 15px Georgia, Times, "Times New Roman", serif;
		text-align: center;
	}
	
	body > aside .widget_search label
	{
		visibility: hidden;
		display: block;
		height: 0;
	}
	
	body > aside .widget_search input[type="text"]
	{
		border-width: 1px;
		border-style: solid;
		border-color: #333 #999 #999 #333;
	}
	body > aside .widget_search input[type="text"]:focus
	{
		background: #fec;
	}
	
	body > aside .widget_search input[type="submit"]
	{
		background: #ccc;
		background: -moz-linear-gradient(top, #fff 25%, #999 75%);
		background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#999), color-stop(0.25, #fff), color-stop(0.75, #999));
		border-width: 1px;
		border-style: solid;
		border-color: #999 #333 #333 #999;
		-moz-border-radius: 3px;
		-webkit-border-radios: 3px;
		border-radius: 3px;
		outline: 0;
	}
	body > aside .widget_search input[type="submit"]::-moz-focus-inner
	{
		border: 0;
	}
	body > aside .widget_search input[type="submit"]:active:hover
	{
		border-color: #333 #999 #999 #333;
	}
	
	body > aside .widget_categories ul
	{
		list-style-type: square;
		margin: -5px 0 0 20px;
	}
	
	body > aside .widget_categories li
	{
		padding: 5px 0 0;
	}
	
	body > aside .widget_archive ul
	{
		list-style-type: square;
		margin: -5px 0 0 20px;
	}
	
	body > aside .widget_archive li
	{
		padding: 5px 0 0;
	}

	body > aside .widget_twitter li
	{
		margin: 20px 0 0;
		padding: 0 0 19px;
		border-bottom: 1px solid #ccc;
		width: 225px;
		overflow: hidden;
	}
	
	body > aside .widget_twitter li:last-of-type
	{
		border: none;
	}
	
	body > aside .widget_twitter li a
	{
		white-space: nowrap;
	}
	
	body > aside .widget_twitter .time-meta a
	{
		display: block;
		padding: 5px 0 0;
		font-size: 10px;
		color: #999;
	}
	body > aside .widget_twitter .time-meta a:hover,
	body > aside .widget_twitter .time-meta a:focus
	{
		color: #fff;
	}
	
	body > aside .widget_twitter .from-meta
	{
		display: none;
	}

body > footer
{
	clear: both;
	background: #999;
	background: rgba(153,153,153,0.3);
	color: #fff;
	margin: 20px -20px -1px -21px;
	padding: 38px 20px 20px;
	-moz-border-radius: 0 0 10px 10px;
	-webkit-border-radius: 0 0 10px 10px;
	border-radius: 0 0 10px 10px;
}

	body > footer a
	{
		color: #fff;
	}
	body > footer a:hover,
	body > footer a:focus
	{
		color: #fec;
	}

/* portfolio */
.portfolio .intro
{
	margin: 0 0 40px;
}

.portfolio .item
{
	margin: -10px -10px 0;
	padding: 15px 10px 35px;
	-moz-box-shadow: 0 -5px 10px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 -5px 10px rgba(0,0,0,0.2);
	box-shadow: 0 -5px 10px rgba(0,0,0,0.2);
	-moz-border-radius: 10px 10px 0 0;
	-webkit-border-radius: 10px 10px 0 0;
	border-radius: 10px 10px 0 0;
	/* auto clear */
	overflow: hidden !important; overflow: visible;
	height: auto !important; height: 1%;
}

.portfolio .item h2
{
	margin: 0;
}

.portfolio .item > img
{
	float: left;
	width: 200px;
	height: 150px;
	padding: 4px;
	margin: 1.5em 20px 0 0;
	border: 1px solid #999;
}

.portfolio .item .link
{
	float: left;
	clear: left;
	margin: 5px 0 0;
	width: 210px;
	text-align: center;
}

.portfolio .item .summary ul
{
	margin: 1.5em 0 0;
}

.portfolio .item .summary li
{
	display: inline;
	margin: 0;
	list-style: none;
}

.portfolio .item .summary .icon
{
	display: inline;
	width: 64px;
	height: 64px;
	background: url(img/spr-portfolio-icons.png) 0 0 no-repeat;
}

.portfolio .item .summary .icon-html
{
	background-position: -64px 0;
}
.portfolio .item .summary .icon-xml
{
	background-position: -128px 0;
}
.portfolio .item .summary .icon-flash
{
	background-position: -192px 0;
}
.portfolio .item .summary .icon-dotnet
{
	background-position: 0 -64px;
}
.portfolio .item .summary .icon-css
{
	background-position: -64px -64px;
}
.portfolio .item .summary .icon-xslt
{
	background-position: -128px -64px;
}
.portfolio .item .summary .icon-asp
{
	background-position: 0 -128px;
}
.portfolio .item .summary .icon-js
{
	background-position: -64px -128px;
}