/*	Personal site of Noah Blon
	noahblon.com
	...................................................................... *
	

/*	=reset (Courtesy of HTML5 Doctor and Eric Meyer)
	...................................................................... */

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}

body {line-height:1;}

article, aside, dialog, figure, footer, header, hgroup, nav, section {display:block;}

nav ul {list-style:none;}

blockquote, q {quotes:none;}

blockquote:before, blockquote:after,q:before, q:after {content:'';content:none;}

a {margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent;}

/*used to highlight elements based on context, i.e. search terms in search results*/
mark {background-color:#ff9;color:#000;	font-style:italic;font-weight:bold;}

del {text-decoration: line-through;}

abbr[title]{border-bottom:1px dotted #000;cursor:help;}

table {border-collapse:collapse;border-spacing:0;}

hr {display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}

input, select {vertical-align:middle;}

fieldset,img { border:0;}

address,caption,cite,code,em,strong,th,var {font-style:normal;font-weight:normal;}

ol,ul {list-style:none;}

caption,th {text-align:left;}

h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}

q:before,q:after {content:'';}

abbr,acronym {border:0;}

html{background:none repeat scroll 0 0}

body {line-height: 1.6;font-size: 100%;}

a {text-decoration:none;}
	
img {border: 0;vertical-align: middle;}
	

/*	=general
	...................................................................... */	

h1,h2,h3,h4,h5,h6 {font-family:"Helvetica Neue", helvetica,serif;-webkit-font-smoothing: subpixel-antialiased;}

h1 {font-size: 2.25em;font-weight: 200;line-height: 1.2;letter-spacing: -1px;color: #aaa;margin: 0 25% 0 0;padding: 0 0 1em 0;}

p{font-size:1em;line-height:1.6;margin:0 0 .875em;font-family: "droid-serif-1","droid-serif-2";}
	
a{font-family:Helvetica;}
/*	=layout
	...................................................................... */	

/*page is a wrapper giving an 8% margin*/
#page {margin: 0 8%;}

header {/*min-height: 180px;position: relative;margin: -40px 0 1em 0;padding: 0 0 1em 0;width: 70%;*/}

nav {/*overflow: hidden;width: 22%;float: right;margin: 0 0 0 3%;*/}

#content {/*width: 100%;padding: 0 0 3em 0*/}

#main {/*width: 72%;float: left;padding: 0 0 6em 0;*/}
	
#side {/*float: right;width: 22%;*/height:500px;width:200px;}
	
footer {clear: both;}

footer p {margin: 0;}
	
/*Articles*/
/*provides bottom margin and padding */
article {/*margin: 0 0 1em 0;padding: 0 0 0.5em 0;*/}
	
/*scales article images to fit the post box. You're going to have to use high-res images each time, a downside of the responsive web design method */

article img {height:auto;background-color:white;max-width: 98%;box-shadow:0px 1px 3px rgba(0,0,0,.6);-moz-box-shadow:0px 1px 3px rgba(0,0,0,.6);-webkit-box-shadow:0px 1px 3px rgba(0,0,0,.6);padding:1%;}
	
/*Side items*/

section{margin: 0 0 1em 0;background-repeat: no-repeat;background-position: 0 0.5em;}
	
#side section{margin: 0 0 3em 0;}

/*	=mobile
	...................................................................... */
	
@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px)  {

	/*layout*/
	html{background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFF2), to(#FFFCB0));}
	body {background:url(style/images/graph.png);}
	#page {margin: 0;}	
	article {clear:both;background:url(style/images/raster/bg-article.png);}


		#side {
			float: none;
			width: auto;
		}
#content	{	

width:100%;
padding-top:3%;

}
		#main {
			float: none;
			width:auto;
			text-shadow:0px 1px 0px rgba(255,255,255,1);
			margin:0 3% 3em;
				
		}
		#side {
			padding: 1.5em 0 3em 0;
						background:url(style/images/raster/bg-nav-mobile-active.png);

		}
	
	/*nav*/
			nav {width:98%;margin: 0 0;text-align: center;width:100%;height:60 px;}
		
			nav ul {height:60px;width:100%;font-size:.75em;background:url(style/images/raster/bg-nav-mobile-inactive.png);}
		
			nav li {width:25%;height:59px;float:left;}
		
			nav a {display: block;height:20px;padding:39px 0 0;font-weight: bold;font-size: 1em;color:#19a2f2;text-shadow:0 -1px 0px rgba(0,0,0,1); border-left:1px solid #0c3b63;border-right:1px solid black;-webkit-tap-highlight-color:rgba(0,0,0,0)}	
		
			/*nav*/

				.active{background:url(style/images/raster/bg-nav-mobile-active.png);height:60px;margin:0; -moz-box-shadow:2px 0px 1px rgba(0,0,0,.4),-2px 0px 1px rgba(0,0,0,.4);  -webkit-box-shadow:2px 0px 1px rgba(0,0,0,.4),-2px 0px 1px rgba(0,0,0,.4) ; z-index:1;border:none;}
			
				.active a {color:#032f54;text-shadow:0 1px 0px rgba(255,255,255,.7);padding:40px 0 0; }
			
				.homelink.active {-moz-box-shadow:2px 0px 1px rgba(0,0,0,.4) -webkit-box-shadow:2px 0px 1px rgba(0,0,0,.4);}
				
				.homelink a{background:url(style/images/raster/bg-home.png) no-repeat center 5px;border:none;margin:0px;}
				
				.homelink.active a{background:url(style/images/raster/bg-home-active.png) no-repeat center 5px;border:none;}
			
				.bloglink a{background:url(style/images/raster/bg-blog.png) no-repeat center 5px; }
			
				.bloglink.active a{background:url(style/images/raster/bg-blog-active.png) no-repeat center 5px !important;margin:0 -1px;}
			
				.portfoliolink a{background:url(style/images/raster/bg-portfolio.png) no-repeat center 5px;}
			
				.portfoliolink.active a{background:url(style/images/raster/bg-portfolio-active.png) no-repeat center 5px;margin:0 -1px;}
			
				.contactlink.active{-moz-box-shadow:-2px 0px 1px rgba(0,0,0,.4); -webkit-box-shadow:-2px 0px 1px rgba(0,0,0,.4);}

				.contactlink a{background:url(style/images/raster/bg-contact.png) no-repeat center 9px;border-right:none;}
			
				.contactlink.active a{background:url(style/images/raster/bg-contact-active.png) no-repeat center 9px;border-right:none;margin-left:-1px;}
	/*header*/
			header {width: 100%;min-height:66px;max-height:66px;background:url(style/images/raster/bg-titlebar.png);clear:both;-webkit-box-shadow:0px 2px 2px rgba(0,0,0,.3);-moz-box-shadow:0px 2px 0px rgba(0,0,0,.4);position: relative;text-align:center;}	
			.logo {background: url(style/images/raster/bg-logo.png) no-repeat center 5px;font-size:1em;display:block;height:21px;padding-top:40px;}
			.logo a{display:block;width:100%;height:26px;margin-top:-40px;padding-top:40px;color:white;font-weight:bold;text-shadow:0px 1px 0px rgba(0,0,0,.3);}
			

	h2 {font-size:1.75em;}
		
	h2 a{color:#032f54;}
				
	h4 {font-weight:bold;}


		
		.previouspost{
		background:url(style/images/raster/black/arrow_left_24x24.png) no-repeat;
		float:left;
		padding-left:20px;
		
}


.nextpost{
		background:url(style/images/raster/black/arrow_right_24x24.png) no-repeat right;
		float:right;
		padding-right:20px;
		
}

			
		footer{
		height:25px;
		width:100%;
		background-color:blue;
		bottom:0;
		
	
		
	}
			
		.pageheader{
				background:url(style/images/raster/blue/pen_24x24.png) no-repeat left;
text-align:left;padding-left:25px;letter-spacing:2px;font-size:1.3em;padding-top:10px;margin:0 3%;
		}
		
		
		#main img{
		
			
		}
		article{
		-webkit-box-shadow:0px 1px 3px rgba(0,0,0,.6);
			background-color:#fffdf9;
			
		-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
			padding: 5% 5% 2em 5%;

		}
	}




/* @end */

/* @group Responsive Typesetting */
/*
@media screen and (max-width: 500px) {
	nav ul{font-size: 0.75em;}}
	
@media screen and (max-width: 800px) {
	body { font-size: 95%; }}
	
@media screen and (min-width: 1024px) {
	body { font-size: 105%; }}
	*/
		
/* @end */

/* @group Layout */



@media screen and (min-width: 920px) {
	/*layouts larger than 900px*/
	nav, 
	.logo, 
	footer {	
		width: 16%;
		position: fixed;
		right: 8%;
		z-index: 100;
		}

	header {margin: 0 0 1em 0;width: auto;}
	h1 { padding: 0;}
	.logo { top: 40px; }
	nav { top: 255px; bottom: 20px; /*background: url(/images/corner-small.png) no-repeat left bottom;*/ }
	nav a {
		float: none;
		text-align: left;
		margin: 0.2em 0;
		width: auto;
	}
	/*selected states*/
	#default .n-work a,
	#work .n-work a,
	#speaking .n-speaking a,
	#journal .n-journal a,
	#archive .n-journal a,
	#tag .n-journal a,
	#goodies .n-goodies a,
	#boxmodel .n-goodies a,
	#iconreference .n-goodies a,
	#contact .n-contact a { 
		background: url(/images/here.png) no-repeat 90% 50%;	
	}
	#content { width: 76%; }
	.body { padding: 0 0 0 3.8em;}
	.link .body {background: url(/images/link.png) no-repeat;
	}
	footer {
		bottom: 2px;
		padding: 0;
		border: 0;
	}
	.icon img { width: auto; }
	
	.needs li {
	margin: 0 0 0.75em -3.8em;
	padding: 0 0 0 3.8em;
	background-position: 1em 0;
	}
	}
	
	
@media screen and (min-width: 1350px) {
	
	#side, .icon { width: 32%; }
	#main { width: 60%; }
	
	#side section {
		width: 46%;
		margin: 0 8% 2em 0;
		float: left;
	}
	
	#side section:nth-child(odd) { clear: left; }
	#side section:nth-child(even) { margin: 0 0 2em 0; }
	
	section.fusion, section.emaillink, section.clients { border: 0; padding: 0;}
	.emaillink .next a { text-align: left;}
	.thumbs li {width: 21%;}
	}
	
@media screen and (min-width: 1500px) {
	.page { margin: 0 8% 0 12%; }
	}
	
/*Just iPhone*/
@media only screen and (max-device-width: 480px) {
	h2 {
	letter-spacing: 0;
	text-transform: capitalize;
	}
}
	
/*iPad styles*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		html {background-color: #f9f2e3;padding: 12px;}
		body { margin: 0; padding: 66px 24px 24px 24px;}
		.page { margin: 0; }	
		a, .posted b {font-weight: normal!important;} /*because Gill Sans bold is too chunky!*/
		h1 {color: #ccc;}
		footer {clear: both;position: static;}
	}
	
/* @end */
/*html5 elements*/	
article,section,nav,header,footer {
	display: block;
	}
	
: 100%;
}