@font-face 
{  
  font-family: BPreplay;  
  src: url(BPreplay.otf ) format("opentype");  
}  

.BPreplay 
{ 
	font-family: BPreplay, Arial, sans-serif;  
}

body
{
	margin: 0;
	color: #fff;
	font-size: 62.5%;
	text-align: center;
	font-family: BPreplay, Arial, sans-serif; 
	background: #3c464f url(body_bg.png) top left repeat;
}

a
{
	color: #fff;
	text-decoration: none;
	text-shadow: 0px 1px 0px rgba(0,0,0,0.3);
}

img
{
	border: none;
}

p,li
{
	font-size: 1.4em;
	line-height: 2em;
	text-shadow: 0px 1px 0px rgba(0,0,0,0.3);
}

h1,h2,h3,h4,h5
{
	font-weight: normal;
}

h3
{
	margin: 0 0 25px 20px;
	font-size: 2.4em;
	text-shadow: 0px 1px 0px rgba(0,0,0,0.3); 
}

#container
{
	background: transparent url(header_bg.png) top center no-repeat;
}

	#wrapper
	{
		width: 1000px;
		margin: auto;
		text-align: left;
	}
	
		#header
		{
			text-align: center;
			position: relative;
			margin-bottom: 50px;
		}
		
			#leftnav
			{
				position: absolute;
				top: 0;
				left: 0;
				
				margin: 0;
				padding: 80px 0 0 60px;
			}
			
			#rightnav
			{
				position: absolute;
				top: 0;
				right: 0;
				
				margin: 0;
				padding: 80px 60px 0 0;
			}
		
			#leftnav, #rightnav
			{
				list-style: none;
				overflow: hidden;
			}
			
			#leftnav li, #rightnav li
			{
				float: left;
			}
			
			#leftnav li
			{
				position: relative;
				margin-right: 100px;
			}
			
			#rightnav li
			{
				position: relative;
				margin-left: 100px;
			}
			
			#leftnav li a, #rightnav li a
			{
				position: relative;
				top: 0px;
				-webkit-transition: top 0.2s ease-in;
			}
			
			#leftnav li a:hover, #rightnav li a:hover
			{
				position: relative;
				top: -10px;
			}
			
			#leftnav li a span, #rightnav li a span
			{
				opacity: 0;
				display: block;
				padding: 0 10px 0 10px;
				background-color: rgba(0,0,0,0.3);
				border-radius: 5px;
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
				-webkit-transition: opacity 0.1s ease-in;
			}
			
			#leftnav li a:hover span, #rightnav li a:hover span
			{
				opacity: 1;
			}

			#myname
			{
				margin: 0;
				padding: 50px 0 0 0;
				font-size: 5em;
				text-shadow: 0px 1px 0px rgba(0,0,0,0.3);
			}
			
			#tagline
			{
				margin: 0;
				padding: 0;
				font-size: 2em;
				color: #171e24;	
				text-shadow: 0px 1px 0px rgba(255,255,255,0.2);
			}
			
		#content
		{

		}
		
			#welcome
			{
				padding: 20px;
				margin: 0 0 50px 0;
				background-color: #262c31;
				background: rgba(0,0,0,0.3) url(welcome_bg.png) top left repeat-x;
				border-bottom: 1px #53616d solid;
				border-radius: 15px;
				-moz-border-radius: 15px;
				-webkit-border-radius: 15px;
			}
			
			#welcome h3
			{
				margin: 0;
				font-size: 2.6em;
				text-shadow: 0px 1px 0px rgba(0,0,0,0.3);
			}
			
			#welcome p
			{
				color: #949ba3;
				margin: 10px 0 0 0;
				text-shadow: 0px 1px 0px rgba(0,0,0,0.3);
			}
			
			#featured
			{
				float: left;
			}
			
			#featuredimgbg
			{
				position: relative;
				width: 430px;
				height: 355px;
				margin-right: 20px;
				padding: 10px;
				background-color: #eeeeee;
				box-shadow: 0 5px 0 0 #aaaaaa;
				-moz-box-shadow: 0 5px 0 0 #aaaaaa;
				-webkit-box-shadow: 0 5px 0 0 #aaaaaa;
				border-radius: 15px;
				-moz-border-radius: 15px;
				-webkit-border-radius: 15px;	
			}
			
			#featuredimgbg span
			{
				display: none;	
			}
			
			#featuredimgbg a:hover span
			{
				position: absolute;
				top: 160px;
				left: 120px;
				display: block;	
				color: #101010;
				padding: 10px;
				font-size: 2em;
				background-color: #eeeeee;
				border-radius: 5px;
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
				box-shadow: 0 5px 0 0 #aaaaaa;
				-moz-box-shadow: 0 5px 0 0 #aaaaaa;
				-webkit-box-shadow: 0 5px 0 0 #aaaaaa;
			}
			
			#featuredimgbg a:active span
			{
				position: absolute;
				top: 163px;
				box-shadow: 0 2px 0 0 #aaaaaa;
				-moz-box-shadow: 0 2px 0 0 #aaaaaa;
				-webkit-box-shadow: 0 2px 0 0 #aaaaaa;
			}
			
			#featuredimgbg img
			{
				border-radius: 8px;
				-moz-border-radius: 8px;
				-webkit-border-radius: 8px;
				-webkit-transition: opacity 0.2s ease-in;
			}
			
			#featuredimgbg a:hover img
			{
				opacity: 0.2;
			}
			
			#dribbble
			{
				float: left;
				width: 530px;
			}
			
			#dribbble h3
			{
				margin: 0 0 25px 50px;
			}
			
			#dribbble .hcs ul
			{
				margin: 0;
				padding: 0;
				list-style: none;
				
			}
			
			#dribbble .hcs li
			{
				float: left;
				display: block;
				margin: 0 0 19px 30px;
				
			}
			
			#dribbble .hcs li a img
			{
				width: 235px;
				height: 175px;
				border-radius: 8px;
				-moz-border-radius: 8px;
				-webkit-border-radius: 8px;
				border-bottom: 1px rgba(0,0,0,0.5) solid;
				-webkit-transition: -webkit-transform 0.2s ease-in;
			}
			
			#dribbble .hcs li a img:hover
			{
				transform: rotate(3deg) scale(1.1);
				-moz-transform: rotate(3deg) scale(1.1);
				-webkit-transform: rotate(3deg) scale(1.1);
				
				box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
				-moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
				-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
			}
			
		#footer
		{
			clear: both;
		}
		
		
		/***************   Work   **************/
		
		.workpiece 
		{
			clear: both;
			height: 380px;
			overflow: hidden;
			margin-bottom: 50px;
		}
		
			.workthumbnail
			{
				float: left;
				width: 430px;
				height: 355px;
				margin-right: 50px;
				padding: 10px;
				background-color: #eeeeee;
				box-shadow: 0 5px 0 0 #aaaaaa;
				-moz-box-shadow: 0 5px 0 0 #aaaaaa;
				-webkit-box-shadow: 0 5px 0 0 #aaaaaa;
				border-radius: 15px;
				-moz-border-radius: 15px;
				-webkit-border-radius: 15px;
			}
			
			.workthumbnail img
			{
				border-radius: 8px;
				-moz-border-radius: 8px;
				-webkit-border-radius: 8px;
				-webkit-transition: opacity 0.2s ease-in;
			}
			
			.workinfo
			{
				width: 500px;
				float: left;
			}
			
				.workinfo h4
				{
					margin: 40px 0 0 0;
					font-size: 4em;
					text-shadow: 0px 2px 0px rgba(0,0,0,0.4);
				}
				
				.workinfo .brief
				{
					clear: both;
					color: #ced9e5;
					font-size: 2em;
					line-height: 1.5em;
				}
				
				.workinfo p
				{
					color: #8f9faf;
				}
				
				
		/***************   About   **************/
		
		.imagebg
		{
			float: left;
			width: 430px;
			height: 355px;
			margin: 0 50px 20px 0;
			padding: 10px;
			background-color: #eeeeee;
			box-shadow: 0 5px 0 0 #aaaaaa;
			-moz-box-shadow: 0 5px 0 0 #aaaaaa;
			-webkit-box-shadow: 0 5px 0 0 #aaaaaa;
			border-radius: 15px;
			-moz-border-radius: 15px;
			-webkit-border-radius: 15px;
		}
		
		.imagebg img
		{
			border-radius: 8px;
			-moz-border-radius: 8px;
			-webkit-border-radius: 8px;
		}
		
		h3#hey
		{
			padding: 35px 0 0 0;
		}
		
		
		/***************   Contact   **************/
		
		form
		{
			position: relative;
		}
		
		input, textarea
		{
			max-width: 450px;
			color: #fff;
			font-family: BPreplay, Arial, sans-serif; 
			text-shadow: 0px 1px 0px rgba(0,0,0,0.3);
			padding: 15px;
			margin: 0 0 10px 0;
			background-color: #262c31;
			background: rgba(0,0,0,0.3) url(welcome_bg.png) top left repeat-x;
			border-top: none;
			border-right: none;
			border-left: none;
			border-bottom: 1px #53616d solid;
			border-radius: 15px;
			-moz-border-radius: 15px;
			-webkit-border-radius: 15px;
		}
		
		input:focus, textarea:focus
		{
			outline: 0;
			background: rgba(0,0,0,0.4);
		}
		
		form p 
		{ 
			position: relative; 
		}
		
		form p label 
		{ 
			position: absolute; 
			top: 0; 
			left: 0;
			padding: 10px 10px 10px 15px;
		}
		
		input#submit
		{
			float: right;
			width: 100px;
			color: #fff;
			padding: 10px;
			background-image: none;
			background-color: #65dc36;
			text-transform: uppercase;
			border: none;
			border-radius: 5px;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			box-shadow: 0 5px 0 0 #469a25;
			-moz-box-shadow: 0 5px 0 0 #469a25;
			-webkit-box-shadow: 0 5px 0 0 #469a25;
		}
		
		input#submit:hover
		{
			cursor: pointer;
		}
		
		input#submit:active
		{
			position: relative;
			top: 3px;
			box-shadow: 0 2px 0 0 #469a25;
			-moz-box-shadow: 0 2px 0 0 #469a25;
			-webkit-box-shadow: 0 2px 0 0 #469a25;
		}		
				
		
		#contactme
		{
			width: 450px;
			float: left;
			margin-right: 50px;
		}
		
		#contactme h3
		{
			margin: 0;
		}
		
		#services
		{
			width: 460px;
			float: left;
			color: #000;
			padding: 20px;
			background-color: #eeeeee;
			box-shadow: 0 5px 0 0 #aaaaaa;
			-moz-box-shadow: 0 5px 0 0 #aaaaaa;
			-webkit-box-shadow: 0 5px 0 0 #aaaaaa;
			border-radius: 15px;
			-moz-border-radius: 15px;
			-webkit-border-radius: 15px;
		}
		
		#services h3
		{
			margin: 0;
		}
		
		#services p, #contactme p#c
		{
			padding: 0 0 0 20px;
		}
		
		#services p, #services li
		{
			color: #252525;
		}
		
		#services li, #services h3, #services p
		{
			text-shadow: 0px 1px 0px rgba(255,255,255,0.5);
		}
		
		#services ul
		{
			padding: 0 0 0 20px;
		}