/*------------------ @reset ------------------*/
body,html { margin:0; padding: 0; width: 100%; height:100%; }
body,h1,h2,h3,h4,h5,h6,pre,code { font-size: 1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,legend,
input,button,select,textarea,dl,dd,dt,hr,table,thead,tbody,tfoot,tr,th,td
{ margin:0; padding:0 }
a img,:link img,:visited img { border:0;padding:0;margin:0; }
address,cite,caption { font-style: normal }
caption,th { text-align: left }
ol,ul { margin:0; margin-left: 25px; }
a,button { outline: 0; }
input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, button::-moz-focus-inner { border: 0px; }


/*------------------ @body ------------------*/
body {
	background: #0e0901 url(images/dirt.jpg) repeat 0 0;
	color: #fff;
	font: normal 14px/21px "Open Sans", "Lucida Grande", "Helvetica Neue", Helvetica, sans-serif;
}



iframe#small
{display:none;
}

#footerp
{
font-size:10px;
color:white;
}
a {
	color: #fff;
	text-decoration: none;
	border-bottom: 0px solid #fff;
}
#image
{
	display:none;
}

#container {
	width: 100%;
	margin: 0 auto;

}

	h1 {
		margin: 0 auto;
	}

	h1, h1 a {
		width: 333px;
		height: 242px;
		display: block;
	}
	
		h1 a {
			text-indent: -9999px;
		
			border: 0;
		}
		
	h2#heading {
		width: 780px;
		height: 327px;
		background: url(images/heading.png) no-repeat 0 0;
		display: block;
		text-indent: -9999px;
	}
	
	#siteofday {
		
		width: 69px;
		height: 105px;
		position: fixed;
		right: 0;
		top: 0;
		display: block;
		text-indent: -9999px;
		border: 0;
	}
	
		#siteofday:hover { background-position: 0 -105px; }
		
		img
		{ max-width:100%;
		}
		
		
		

		
#top {
	width: 780px;
	margin: 0 auto;
	overflow: hidden;
	display: block;
	padding-top:40px;
	height: 500px;
	position: relative;
}

	#moon {
		
		width: 102px;
		height: 102px;
		position: absolute;
		right: 20px;
		top: 70px;
		text-indent: -9999px;
	}
		
nav {
	width: 77px;
	height:351px;
	background: url(images/nav.png) no-repeat 0 0;
	display: block;
	position:fixed;
	top: 0;
	left: -6px;
	z-index: 1000;
}

	nav ul {
		list-style: none;
		padding: 15px 0 0 0;
		width: 45px;
		margin: 0 auto;
	}

		nav li, nav li a {
			display: block;
			height: 45px;
			width: 45px;
		}
		
			nav li a { 
				text-indent: -9999px; 
				background: url(images/icons.png) no-repeat 0 0;
				border: 0;
			}
		
		nav li#work a { background-position: 0 0; }
		nav li#work a:hover { background-position: -45px 0;}
		
		nav li#about a { background-position: 0 -51px; }
		nav li#about a:hover { background-position: -45px -51px;}
		
		nav li#contact a { background-position: 0 -102px; }
		nav li#contact a:hover { background-position: -45px -102px;}
		
		nav li#twitter a { background-position: 0 -153px; }
		nav li#twitter a:hover { background-position: -45px -153px;}
		
		nav li#dribbble a { background-position: 0 -204px; }
		nav li#dribbble a:hover { background-position: -45px -204px;}
		
		nav li#forrst a { background-position: 0 -255px; }
		nav li#forrst a:hover { background-position: -45px -255px; margin-left:1px;}
		
#description {
	display: block;
	width: 780px;
	margin: 0 auto;
	overflow: hidden;
	padding: 40px 0;
}

#portfolio {
	width: 780px;
	overflow: hidden;
	margin: 0 auto;
	display: block;
}

	#portfolio section.column {
		width: 375px;
		float:left;
		overflow: hidden;
	}

	#portfolio section.column:first-child {
		padding-right: 30px;
	}
	
		#portfolio section a {
			position: relative;
			display: block;
			width: 375px;
			overflow: hidden;
			margin-bottom: 30px;
			border: 0;
		}
		
			#portfolio section a img {
				display: block;
			}
			
			
	#articles {
		background: url(images/leaves.png) no-repeat center 10px;
		display: block;
		width: 720px;
		padding: 70px 30px 10px 30px;
		clear: both;
		overflow: hidden;
	}
	
		#articles article {
			display: block;
			width: 220px;
			float: left;
			overflow: hidden;
		}
		
		#articles article:nth-child(odd) {
			padding: 0 0px;
		}
		
		#articles article a {
			width: 220px;
			display: block;
			text-align: center;
		}
		
		#articles article a span {
			display: block;
			padding: 15px 10px;
			background: #000;
			height: 45px;
			color: #3F372F;
		}
		
			#articles article a:hover span { color: #fff; }
			
		h2#tutorials {
			display: block;
			width: 100%;
			background: url(images/tutorials.png) no-repeat 0 0;
			height: 50px;
			text-indent: -9999px;
			padding-bottom: 100px;
			margin-top: -16px;
		}
			
#aboutme {
	width: 720px;
	padding: 90px 30px 0 30px;
	margin: 0 auto;
	overflow: hidden;
	display: block;
	background: url(images/leaves.png) no-repeat center 0;
}

	#aboutme img {
		float: left;
		margin-right: 30px;
		margin-bottom: 30px;
	}
	
	#aboutme p {
		color: #66553c;
		text-shadow: 0 -1px 1px #000;
		padding-top: 0px;
		margin-top: -5px;
		padding-bottom: 60px;
	}
	
		#aboutme p strong { background:000;color: #fff; }
	
#contactme {

	clear: both;
	margin-top: 60px;
	display: block;
	width: 757px;
	margin: 0 auto;
	overflow: hidden;
	border: 1px dashed #3F372F;
	padding: 11px 11px;
	height:485px;
}
#iframe
{
	display:block;
	
	
	}

#contactme form {
	background: #070101 url(images/contact.gif) no-repeat center center;
	display: block;
	padding: 35px 19px;
	width: 720px;
	overflow:hidden;
	min-height: 357px;
}

#contactme h2 {
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	padding-bottom: 15px;
	color: #130E08;
	text-shadow: 0 1px 1px #7F6537;
}

form p {
	padding-bottom: 5px;
	width: 418px;
	display: block;
	margin: 0 auto;
}

input, textarea, select {
	border: 1px solid #000;
	font: normal 12px/21px "Lucida Grande", "Helvetica Neue", Helvetica, sans-serif;
	padding: 8px;
	width: 400px;
	background: #120B05;
	background: rgba(0,0,0,.5);
	-moz-box-shadow: inset 1px 1px 3px #000, 0 0 1px #9F8863;
	-webkit-box-shadow: inset 1px 1px 3px #000, 0 0 1px #9F8863;
	box-shadow: inset 1px 1px -1px #000, 0 0 1px #9F8863;
	color: #fff;
	resize: none;
}

	::-webkit-input-placeholder { color: #9E866B !important; }
	:-moz-placeholder { color: #9E866B !important; }

	div.button {
		border: 1px solid #000;
		background: rgba(0,0,0,.5);
		-moz-box-shadow: inset 1px 1px 3px #000, 0 0 1px #9F8863;
		-webkit-box-shadow: inset 1px 1px 3px #000, 0 0 1px #9F8863;
		box-shadow: inset 1px 1px 3px #000, 0 0 1px #9F8863;
		display: block;
		margin-left: 296px;
		float: left;
		padding: 8px;
	}
	
	
	#submit {
		width: 114px;
		height: 48px;
		display: block;
		background: url(images/submit.png) no-repeat 0 0;
		border: 0 none;
		text-indent: -9999px;
		cursor: pointer;
		float: left;
	}
	
		#submit:hover { background-position: 0 -48px; }
		#submit:active { background-position: 0 -96px; }

	.error {
		border: 1px solid red;
	}

	select {
		width: 418px;
	}

	label {
		float: left;
		display: none;
		width: 286px;
		text-align: right;
		font-weight: bold;
		font-size: 12px;
		line-height: 12px;
		padding-top: 11px;
		padding-right: 10px;
		color: #130E08;
		text-shadow: 0 1px 1px #7F6537;
	}
	
	.message {
		height: 29px; 
		font-size: 11px;
		line-height: 11px;
		padding: 17px 15px 0 15px;
		text-align: center;
		width: 376px;
	}
	
	#success { 
		border: 1px solid #00ff06; 
		color: #00ff06;
		background: rgba(0,255,6,.2);
	}
	
	#error { 
		border: 1px solid red;
		color: red;
		background: rgba(255,0,0,.2);
	}
	
footer {
	display: block;
	width: 780px;
	margin: 0 auto;
	padding-top: 30px;
	text-align: center;
	font-size: 11px;
	color: #3F372F;
	padding-bottom: 60px;
}

	footer p {
		padding-bottom: 0;
		width: 500px;
		margin: 0 auto;
		display: block;
		clear: both;
	}

	footer a {
		color: #3F372F;
		text-decoration: none;
		border-bottom: 0px double #4F4740;
	}

		footer a:hover {
			color: white;
	
		}
		
	footer .twitter-share-button {
		float: right;
	}
	
	footer .twitter-follow-button {
		float: left;
	}
		
	#totop {
		display: block;
		background: url(images/top.png) no-repeat 0 0;
		width: 76px;
		height: 75px;
		position: fixed;
		bottom: 5px;
		left: -6px;
		border: 0;
		text-indent: -9999px;
		z-index: 1000;
	}
	
		#totop:hover { background-position: 0 -75px; }
		
		div#new
		{display:none;
		}


/* GETTING RESPONSIVE */


@media (max-width: 1215px)
{     
        #container
		{
		width:100%;
		}
		img#heading 
		{
			width:100%;
			height:100%;}
		
		#heading
		{
			width:100%;
			height:100%;
		}
		#description
		{
			width:66%;
			height:66%;
			}
	#aboutme
	{
	 width:70%;
	
		}
		
		img#selected
	{
		width:22%;
		height:22%;
		}	
		div#new
{
	display:block;
	}

	
		
  
}

@media (min-width: 916px)
{
.second
{
display:none;
}
}

@media (max-width: 915px)
{

.first
{
display:none;
} 
.second
{
display:block;
}

#portfolio
{display:none;
}
iframe#large
{
display:none;
}
iframe#small
{display:block;
}
#slideshow-bg
{
	width:500px;
	height:250px;
}
	
#header-bar2
{display:none;

} 
	
#image
{display:block;}	
#lcd
{
display:none;}
}
#heading
		{
			width:100%;
			height:100%;
		}


        #container
		{
		width:100%;
		}
		img#heading 
		{
			width:100%;
			height:100%;}
			
			#description img
		{
			width:100%;
			height:100%;
			}
			
	
		
   div.header-bar2 hide-for-small
   {display:none;}
   footer
   {width:50%;
   }

#articles
{width:74%;
height:100%;

	
	}	


	
			
}

  @media (min-width: 915px)
{
div.second
{
display:none;

}
     
}

@media (max-width: 769px)
{      



        #articles article#articles1
		{
			float:none;
		}
		#heading
		{
			width:100%;
			height:100%;
			margin-left:0px;
		}
		
		 #container
		{
		width:100%;
		}
		img#heading
		{
			width:100%;
			height:100%;}
		
			
			#description img
		{
			width:100%;
			height:100%;
			}

		
		  
	img#selected
	{
		width:60%;
		height:60%;
		}	 
		
	
	
		
		
}

@media (max-width: 400px)
{
section#articles
{
margin-left:-20%;
}
img#music
{
width:80%;

}
img#one
{width:90%;
}		 



img#selected
	{
		width:60%;
		height:60%;
		}
     
		
	 #container
		{
		width:100%;
		height:100%;
		}
		img#heading 
		{
			width:100%;
			height:100%;}
		
				

		  

	

		
			
			
		
	
}