/* I Love Dust - Global
============================================================================= */

/* Reset
------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font,
img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i,
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, button {
	border: 0;
	font-size: 100%;
	margin: 0;
	outline: 0;
	padding: 0;
	text-decoration: none;
	vertical-align: baseline;
}

ul {list-style: none;}

a img { border: none; }

button {
	cursor: pointer;
	display: block;
}

p span, a span, h1 span, h2 span, h3 span, button span, #navigation span {
	display: none;
}
div.blog-post span {
	display: inline;
}
div.blog-post .alignnone {
	margin-bottom: 10px;
}

/* Typography
------------------------------------------------------------------------------*/

body {
	color: #fff;
	font: italic 12px/15px Georgia, "Times New Roman", Times, serif;
	overflow-x: hidden;
	height: 100%;
	background:#000;
}

h1 {
	font: italic 14px/17px Georgia, "Times New Roman", Times, serif;
	margin-top: 6px;
}

h2 {height: 17px;}

h2.categories {margin-top: 4px; width: 92px;}
h2.archives {margin-top: 20px; width: 75px;}
h2.links {margin-top: 20px; width: 37px;}

.blog-sidebar {
	width: 100%;
	overflow: hidden;
}
.blog-sidebar h2 {
	float: left;
}
.blog-sidebar h2.archives {
	width: 160px;
}

p {margin-top: 10px;}

p.standard,.standard p {font: italic 12px/20px Georgia, "Times New Roman", Times, serif;}

p.small {
	font: italic 11px/15px Georgia, "Times New Roman", Times, serif;
	margin: 0;
}

p.light {
	color: #a2a09a;
	font: italic 11px/15px Georgia, "Times New Roman", Times, serif;
	margin: 0;
}

p.margin-top-small {margin-top: 10px;}
p.margin-top-medium {margin-top: 20px;}
p.no-margin {margin-top: 0;}

ul.archives {
	border-top: 1px dotted #fff;
	float: left;
	line-height: 29px;
	margin: 9px 10px 0 0;
}

ul.archives li {
	border-bottom: 1px dotted #fff;
	float: left;
	width: 150px;
}

#footer p {
	float: right;
	margin-top: 15px;
}

#footer ul {
	overflow: hidden;
}

#footer li {
	float: left;
	font: italic 11px/15px Georgia, "Times New Roman", Times, serif;
}

/* Columns
------------------------------------------------------------------------------*/

/* Grid floating and margins */
.column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6,
div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12 {
	float: left;
	margin-right: 10px;
}

/* Use these classes to set the width of a column */

.span-1 {width: 70px;}
.span-2 {width: 150px;}
.span-3 {width: 230px;}
.span-4 {width: 310px;}
.span-5 {width: 390px;}
.span-6 {width: 470px;}
.span-7 {width: 550px;}
.span-8 {width: 630px;}
.span-9 {width: 710px;}
.span-10 {width: 790px;}
.span-11 {width: 870px;}
.span-12 {width: 950px;}

/* Add these to prepend a column */

.prepend-1 {padding-left: 10px;}
.prepend-2 {padding-left: 20px;}

/* Add these to append a column */

.append-1 {padding-right: 10px;}
.append-2 {padding-right: 20px;}
.append-3 {padding-right: 30px;}

/* Apply to columns and elements to eliminate right margins */

div.last, .last, ul.last {margin-right: 0;}


/* Links
------------------------------------------------------------------------------*/

p a, li a, h1 a {color: #fff;}

p a:hover, li a:hover, h1 a:hover {
	text-decoration: underline;
}

a.back-to-top {
	background: url(/media/img/icons/arrow-up.gif) 0 3px no-repeat;
	height: 17px;
	padding-left: 24px;
}

div.previous-project a {
	background: url(/media/img/icons/arrow-left.gif) 0 0 no-repeat;
	height: 17px;
	padding-left: 15px;
}
div.next-project {
	float: right;
	text-align: right;
}
div.next-project a {
	background: url(/media/img/icons/arrow-right.gif) right 0 no-repeat;
	height: 17px;
	padding-right: 15px;
}

/* Layout
------------------------------------------------------------------------------*/

/* General */

#body {
	background-color: #000;
	margin: 0 auto;
	padding-bottom: 30px;
	text-align: center;
}

.left {float: left;}
.right {float: right;}

/* Apply to clear floats */
.clear {clear: both;}

#header {
	height: 91px;
	background:url(/media/img/backgrounds/header-border.png) no-repeat left bottom;
}

#header #logo {
	display: block;
	float: left;
	margin: 19px 10px 0 7px;
}

#header a.blog {
	float: right;
	margin-top: 9px;
	margin-right: 22px;
}

#page-container {
	width: 950px;
	margin: 0 auto;
	text-align: left;
	overflow: hidden;
}

.border-bottom-1 {
	border-bottom: 1px dotted #fff;
	padding: 10px 0 8px 0;
}

.border-bottom-2 {
	border-bottom: 1px dotted #fff;
	padding: 0 0 15px 0;
}

.divider-1 {
	border-top: 1px dotted #fff;
	clear: both;
	height: 1px;
	line-height: 1px;
	margin: 33px 0 10px 0;
}

.divider-2 {
	border-top: 1px dotted #fff;
	height: 1px;
	line-height: 1px;
	margin: 13px 0 10px 0;
	width: 600px;
}

#content {padding: 20px 0;}

.project {border: 10px solid #fff;}

.project:hover {
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}

.project-detail {
	border: 10px solid #fff;
	margin-bottom: 10px;
}

.options-container {
	border-bottom: 1px dotted #fff;
	padding: 3px 0 15px 0;
}

img.blog-post {
	border-top: 10px solid #fff;
	margin-top: 16px;
}

/* Navigation */

ul#navigation {
	float: right;
	margin-top: 45px;
}

ul#navigation li {
	float: left;
	padding-right: 8px;
	background:url(/media/img/navigation/divider.png) no-repeat right center;
	padding-left: 2px;
}

ul#navigation li a {
	display: block;
	height: 17px;
}

#navigation li a:hover {
	text-decoration: none;
	background: none;
}

ul#navigation li.last {
	background: none;
	padding-right: 6px;
}

/* Footer */

#footer {padding: 29px 0;}

/* Buttons
------------------------------------------------------------------------------*/

ul#categories a {
	cursor: pointer;
	display: block;
	float: left;
	height: 42px;
	margin-top: 17px;
}

a.blogroll {
	background: url(/media/img/buttons/blogroll.gif) 0 0 no-repeat;
	margin-right: 10px;
	width: 71px;
}

a.general {
	background: url(/media/img/buttons/general.gif) 0 0 no-repeat;
	margin-right: 10px;
	width: 87px;
}

a.our-work {
	background: url(/media/img/buttons/our-work.gif) 0 0 no-repeat;
	margin-right: 9px;
	width: 54px;
}

a.weird {
	background: url(/media/img/buttons/weird.gif) 0 0 no-repeat;
	width: 69px;
}

a.blogroll:hover, a.general:hover, a.our-work:hover, a.weird:hover {
	background-position: 0 -42px
}

form#add-comment button {
	clear: left;
	cursor: pointer;
	display: block;
	float: left;
	margin-left: 160px;
}

form#add-comment button:hover {
	background-position: 0 -32px
}

/* Form
------------------------------------------------------------------------------*/

form#add-comment {
	padding: 20px 0;
	margin: 17px 0 5px 0;
	width: 600px;
}

form#add-comment .row {height: 35px;}

form#add-comment .textarea-row {height: 230px;}

form#add-comment textarea-container {height: 230px;}

form#add-comment label {
	display: block;
	float: left;
	height: 25px;
	line-height: 25px;
	text-align: right;
	width: 150px;
}

form#add-comment input, form#add-comment textarea, #add-comment p.logged {
	border: none;
	float: left;
	margin-left: 10px;
	width: 230px;
}

form#add-comment input {height: 23px;}
form#add-comment textarea {height: 218px;}

form#add-comment p.required {
	float: left;
	font-size: 11px;
	line-height: 25px;
	margin: 0 0 0 10px;
}
.no-margin {
	margin: 0;
}
.relative {
	position:relative;
}
#representation {
	position:absolute;
	bottom: 6px;
	left: 645px;
	width: 377px;
	overflow: hidden;
}
#representation li {
	float: left;
	margin-right: 27px;
}

.button-16 {
    height: 16px;
    overflow: hidden;
    display: inline-block;
    position:relative;
}
.button-16 img {
    position:relative;
    top: 0;
    left: 0;
}
.button-16:hover img {
    top: -16px;
}

.button-64 {
    height: 64px;
    overflow: hidden;
    display: inline-block;
    position:relative;
}
.button-64 img {
    position:relative;
    top: 0;
    left: 0;
}
.button-64:hover img {
    top: -64px;
}