@import "grid.css";
@import "reset.css";

body
{
	background: #262626 url('bg_dark.gif');
	color: #B2B2B2;
	font: normal 20px/150% Georgia, "Times New Roman", Times, serif;
	text-shadow: #000 0 -1px 0;
}

h1
{
	color: #fff;
}

h2
{
	color: #fff;
	font: bold 32px Helvetica, Arial, sans-serif;
	margin: 75px 0 20px 0;
	text-transform: uppercase;
}
	
	h2 span
	{
		color: #9bebff;
		font: italic 20px Georgia, "Times New Roman", Times, serif;
		text-transform: lowercase;
	}

p { margin-bottom: 1em; }

p a
{
	border-bottom: 1px solid #fff;
	color: #9bebff;
	padding-bottom: 4px;
	text-decoration: none;
}
p a:hover { border-bottom-width: 2px; }

#outside-wrapper
{
	background-color: #111;
	width: 100%;
}

#inside-wrapper
{
	margin: 0 auto;
	padding-top: 80px;
	width: 780px;
}

#inside-wrapper #logo
{
	height: 180px;
	margin: 0;
	padding: 0;
}

#inside-wrapper #logo a
{
	border: none;
}

#inside-wrapper #meta
{
	margin-top: 20px;
}

#inside-wrapper h1 { font: bold 40px/100% Helvetica, Arial, sans-serif; text-transform: uppercase; }

#inside-wrapper strong { color: #9bebff; font: bold 16px Helvetica, Arial, sans-serif; }
#inside-wrapper strong span { color: #fff; }

#menu-wrapper
{
	background-color: #181818;
	border-bottom: 5px solid #000;
	display: block;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9999;
}

#menu-content h1 a
{
	background: #181818 url(header_dark.gif) no-repeat top left;
	color: #fff;
	float: left;
	height: 14px;
	margin-top: 16px;
	width: 101px;
	text-indent: -9999px;
}

	#menu-content span
	{
		color: #9bebff;
		display: block;
		float: left;
		font: bold 11px Helvetica, Arial, sans-serif;
		margin: 17px 0 0 15px;
	}
		
		#menu-content span a { color: #9bebff; text-decoration: none; }
		#menu-content span a:hover { color: #fff; }

#menu-content ul
{
	border-left: 1px solid #000;
	border-right: 1px solid rgb(58, 46, 57);
	width: 366px;
}
	
	#menu-content li
	{
		display: block;
		float: left;
		list-style-type: none;
	}
		
		#menu-content li a
		{
			background: #181818 url('menu.gif') no-repeat;
			border-left: 1px solid #4c4c4c;
			border-right: 1px solid #000;
			display: block;
			height: 50px;
			text-indent: -9999px;
			width: 120px;
		}
			
			#menu-content li a:hover { background-position: 0 -50px; }
			#menu-content li a:active { background-position: 0 -100px; }
			
			#menu-content li a.work { background-position: -120px 0; }
			#menu-content li a.work:hover { background-position: -120px -50px; }
			#menu-content li a.work:active { background-position: -120px -100px; }
			
			#menu-content li a.contact { background-position: -240px 0; }
			#menu-content li a.contact:hover { background-position: -240px -50px; }
			#menu-content li a.contact:active { background-position: -240px -100px; }

#about, #work, #contact { padding-bottom: 50px; padding-top: 50px; }

#work
{
	font-size: 13px;
	line-height: 150%;
}
	
	.thumbs li
	{
		display: inline;
		float: left;
		list-style-type: none;
		margin-bottom: 2em;
		width: 260px;
	}
		
		.thumbs li a img
		{
			border: 5px solid #ccc;
			display: block;
			margin-right: 40px;
		}
			
			.thumbs li a:hover img
			{
				border: 5px solid #9bebff;
			}
		
		.thumbs li em
		{
			display: inline-block;
			font-style: normal;
			margin: 5px 5px 0 5px;
			padding: 0;
			width: 208px;
		}
			
			.thumbs li em a
			{
				background: transparent url('plus-icon.gif') no-repeat center right;
				border: none;
				color: #b2b2b2;
				padding-right: 20px;
				text-decoration: none;
			}
				
				.thumbs li em a:hover { color: #fff; }
		
		.thumbs li strong
		{
			font: bold 11px Helvetica, Arial, sans-serif;
			margin: 5px 5px 0 5px;
			text-transform: uppercase;
		}

#contact dt
{
	clear: both;
	display: block;
	float: left;
	line-height: 100%;
	margin-bottom: 1em;
	margin-top: 8px;
	width: 130px;
}

#contact dd
{
	display: block;
	float: right;
	margin-bottom: 1em;
	text-align: right;
	width: 650px;
}

#contact label
{
	color: #9bebff;
}
	
	#contact label em
	{
		color: #fff;
		font: normal 11px/150% Helvetica, Arial, sans-serif;
	}

#contact input[type=text], #contact textarea
{
	border: none;
	color: #000;
	font: normal 16px Georgia, "Times New Roman", Times, serif;
	padding: 10px;
	width: 600px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
	
	#contact input[type=text]:focus, #contact textarea:focus { background-color: #fff; }

#contact textarea
{
	padding-top: 13px;
	height: 137px;
}

#contact input[type=submit]
{
	background-color: #ccc;
	border: none;
	clear: both;
	color: #111;
	cursor: pointer;
	float: right;
	font: bold 11px Helvetica, Arial, sans-serif;
	height: 40px;
	margin-bottom: 30px;
	text-transform: uppercase;
	width: 130px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
	
	#contact input[type=submit]:focus, #contact input[type=submit]:hover { background-color: #fff; }

#contact p.submit
{
	margin-top: 1em;
}

.success, .error { font: bold 11px Helvetica, Arial, sans-serif; }
.success { color: #92D24D; }
.error { color: #FF2B37; }

#link-love { font: bold 11px/150% Helvetica, Arial, sans-serif; margin-top: 200px; }
	
	#link-love a { padding-bottom: 2px; }

#footer { color: rgb(135, 137, 135); font: bold 11px/150% Helvetica, Arial, sans-serif; }
	
	#footer a { padding-bottom: 2px; }

.alignleft { text-align: left; }
.alignright { text-align: right; }
.floatleft { float: left; }
.floatright { float: right; }