* { margin: 0; padding: 0; }
p { margin: 10px 0 10px 0; }
a:link, a:visited { color: #46c; text-decoration: none; }
a:hover, a:active { color: #666; text-decoration: none; }

html
{
	background: #2a2a2a url('../images/main_bg.png') top center no-repeat;
	color: #fff;
	font: 75%/140% Arial, Helvetica, Verdana, sans-serif;
}
	
	#header
	{
		width: 970px;
		margin: 40px auto 0 auto;
		font-family: Georgia, "Times New Roman", Times, serif;
	}
		#header h1 a img { border: 0; }
		#header p
		{
			margin: 20px 0 40px 0;
			font-size: 2em;
			line-height: 1.5em;
			text-align: justify;
			color: #eee;
		}
			#header p em
			{
				font-style: italic;
				color: #fff;
			}

	#categories
	{
		width: 970px;
		margin: 0 auto 40px auto;
	}
		#categories a
		{
			display: inline-block;
			padding: 3px 5px 3px 5px;
			margin-left: 5px;
			color: #fff;
			background: #347;
			text-decoration: none;
			text-transform: uppercase;
			font-size: 0.9em;
		}
		#categories a:hover { background: #666; }
		#categories a.active { background: #000; }


	
	#portfolio
	{
		width: 970px;
		margin: 0 auto 0 auto;
	}
		#portfolio .case
		{
			width: 950px;
			height: 380px;
			background: url('../images/case_bg.gif') no-repeat;
			clear: both;
			margin: 0 0 40px 0;
			padding: 10px;
		}
			#portfolio .case_image { display: block; padding: 0; margin: 0; border: 0; font-size: 0; line-height: 0; width: 650px; height: 380px; overflow: hidden; position: relative; }
			#portfolio .case_image img
			{
				position: absolute;
				z-index: 20;
				left: 0px;
				top: 0px;
				margin: -2px 0 0 -2px;
			}
			#portfolio .case .info
			{
				width: 270px;
				height: 350px;
				padding: 10px 10px 20px 20px;
				float: right;
				margin: 0;
				background: #181818;
				position: relative;
			}
				#portfolio .case .info h2
				{
					font: normal 1.7em Georgia, "Times New Roman", Times, serif;
				}
					#portfolio .case .info h2 a:link,
					#portfolio .case .info h2 a:visited
					{
						color: #fff;
					}
					#portfolio .case .info h2 a:hover,
					#portfolio .case .info h2 a:active
					{
						color: #57c;
					}
				#portfolio .case .info a.category
				{
					float: left;
					padding: 3px 5px 3px 5px;
					margin-right: 5px;
					color: #fff;
					background: #347;
					text-decoration: none;
					text-transform: uppercase;
					font-size: 0.9em;
				}
				#portfolio .case .info a.category:hover { background: #666; }
				
				#portfolio .case .info .visit_site
				{
					line-height: 1em;
					font-size: 0.9em;
					margin: 1px 0 -20px 0;
				}
				#portfolio .case .info .visit_site dt
				{
					text-transform: uppercase;
					font-size: 0.9em;
					color: #888;
				}
				
				#portfolio .case .info .software:before { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; margin-bottom: 20px; }
				#portfolio .case .info .software
				{
					margin: 20px 0 10px 0;
					padding-left: 19px;
				}
					#portfolio .case .info .software > li
					{
						padding-left: 0px;
						margin: 4px 0 0 0;
						list-style-type: square;
					}
					#portfolio .case .info .software > li.illustrator,
					#portfolio .case .info .software > li.photoshop,
					#portfolio .case .info .software > li.flash,
					#portfolio .case .info .software > li.indesign,
					#portfolio .case .info .software > li.wordpress
					{
						list-style: none;
						margin-left: -19px;
						padding-left: 19px;
					}
					#portfolio .case .info .software > li.illustrator { background: url('../images/icon_illustrator.gif') no-repeat; }
					#portfolio .case .info .software > li.photoshop { background: url('../images/icon_photoshop.gif') no-repeat; }
					#portfolio .case .info .software > li.flash { background: url('../images/icon_flash.gif') no-repeat; }
					#portfolio .case .info .software > li.indesign { background: url('../images/icon_indesign.gif') no-repeat; }
					#portfolio .case .info .software > li.wordpress { background: url('../images/icon_wordpress.gif') no-repeat; }
				#portfolio .case .info iframe
				{
					position: absolute;
					right: 0;
					bottom: 0;
				}

	#footer
	{
		width: 100%;
		margin: 40px 0 0 0;
		background: #181818;
		border-top: 10px solid #141414;
		padding: 20px 0 0px 0;
	}
	#footer:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; }
	
		#footer-content
		{
			width: 970px;
			margin: 0 auto 0 auto;
		}
			#footer h2
			{
				font: normal 1.7em Georgia, "Times New Roman", Times, serif;
				margin: 0 0 10px 0;
			}
		
			#about { width: 450px; float: left; margin: 0 50px 0 10px; }
				#about p { text-align: justify; line-height: 1.6em; color: #ddd; margin: 10px 0 19px 0; }
				#about p img { float: left; margin: 5px 10px 5px 0; }
				#about p strong { text-transform: uppercase; font-size: 0.9em; }
				#about p a.pdf
				{
					display: block;
					background: url('../images/icon_pdf.gif') no-repeat;
					height: 16px;
					width: 5.6em;
					padding: 0 0 0 23px;
					line-height: 1.4em;
				}
		
			#contact { width: 450px; float: left; margin: 0 0 30px 0; }
			
				#contact dl dt { float: left; clear: left; margin: 0 8px 5px 0; height: 16px; }
				#contact dl dd { margin: 0 0 5px 0; height: 16px; }
				
				#contact hr { border: 0; border-top: 1px solid #222; height: 0; margin: 10px 0 10px 0; }
				
				#contact form fieldset { border: 0; }
				
					#contact form div
					{
						float: left;
						width: 223px;
					}
						#contact form label { display: block; }
						#contact form input
						{
							width: 215px;
							border: 0;
							background: #333;
							padding: 4px;
						}
						#contact form fieldset div:first-child { margin-right: 4px; }
						
					#contact form textarea
					{
						width: 442px;
						height: 130px;
						border: 0;
						padding: 4px;
						background: #333;
						margin: 4px 0 0 0;
					}
					#contact form input,
					#contact form textarea
					{
						font: normal 1em/1.2em Arial, Helvetica, Verdana, sans-serif;
						color: #fff;
					}
					#contact form input:focus,
					#contact form textarea:focus
					{
						background: #444;
					}
					
					#contact form button
					{
						margin: 5px 0 0 0;
					}
				#copyright
				{
					clear: both;
					border-top: 1px solid #1f1f1f;
					text-align: center;
					font-size: 0.9em;
					color: #444;
				}