/* ---------- GLOBAL ----------------- */

	/* HTML5 Support for Legacy Browsers */
	article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary { display: block; }

	/* kills font smoothing and anti-aliasing on images */
	html { image-rendering: -moz-crisp-edges; } /* all images, videos, background-images */
	img { -ms-interpolation-mode: nearest-neighbor; } /* all images, IE */
	html,body,nav,header,footer,table,th,td,font,p,div,span,h1,h2,h3 { font-smooth: none; -ms-filter: ""; filter: ""; } /* Attempt to null ClearType */
	
	/* clearfix */
	.clearfix:before,.clearfix:after { content: ""; display: block; height: 0; overflow: hidden; } /*  */
	.clearfix:after { clear: both; }
	.clearfix { zoom: 1; }

	/* body { background: url("images/bg.gif") top left repeat-y #121921; margin: 0; } */
	body { background: url("images/bg_main.gif") top left no-repeat #121921; background-attachment: fixed; margin: 0; }
	div { color: #B9C1C3; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; text-align:justify; line-height: 16px; } /* color: #BCB9C3; */
	img { border: 0; }
	a,a:active,a:visited { color: #A4D4D6; }
	a:hover	{ color: #FFF; text-decoration: underline; }
	
/* ---------- STRUCTURE -------------- */
	
	.container { width: 944px; height: 768px; }
	.art1a { width: 45px; height: 768px; background: url("images/art1a.gif") top left no-repeat; float: left; padding: 0 0 0 5px; }
	.art2a,.art2b { width: 854px; min-height: 758px; float: right; padding: 20px; }
	.art2a { background: url("images/art2a.gif") top left no-repeat; }
	.art2b { background: url("images/art2b.gif") top left no-repeat; }
	
	/* .heading { background: url('images/bg_txt.gif') #2D373F; width: 672px; padding: 10px;
	           color: #537925; font-size: 14px; font-weight: bold; font-family: Arial; }  color: #87676D; */
			   
	.arch_title { background-color: #0e141a; padding: 3px 4px 4px 6px; margin: 0 0 0 20px; }
	.arch_text { padding: 0px 20px 20px 20px; }
	.arch_text img { margin: 0 0 5px 0; border: solid #0e141a; border-width: 1px 1px 2px 1px; }
	/* Revisit this idea later :(
	.arch_text a img,.arch text a:visited img {
	
		-webkit-transition: opacity .3s ease-in-out;
		-moz-transition: opacity .3s ease-in-out;
		-o-transition: opacity .3s ease-in-out;
		transition: opacity .3s ease-in-out;
	
	}
	.arch_text a:hover img { opacity: .65; }
	*/
	.block { background: #2D373F; padding-top: 20px; border: solid 1px #0E141A; width: 690px; margin: 0 0 32px 0; }
	.block_art { background: #2D373F; padding: 20px; border: solid 1px #0E141A; width: 650px; margin: 0 0 32px 0; }
	.block_art2 { background: #2D373F; padding: 16px; border: solid 1px #0E141A; width: 658px; margin: 0 0 32px 0; }
	
	.copy { color: #888E8F; margin: 3px 0 0 0; font-size: 10px; font-weight: normal; }
	.rtf { color: #9FA7AE; font-size: 11px; line-height: 14px; padding: 0 0 0 10px; }
	.mypic { float: right; padding: 10px 10px 20px 20px; }
	.listy { list-style-image: url("images/bullet.gif"); margin-bottom: 0; }
	h2.heading { background: url('images/bg_txt.gif') #2D373F; width: 672px; padding: 10px; text-shadow: 1px 1px #000;
	             color: #537925; font-size: 14px; font-weight: bold; font-family: Arial; margin: 0; text-transform: uppercase; } /* color: #87676D; */
	
/* ---------- NAVIGATION -------------- */

nav { position: fixed; width: 45px; height: 768px; background: url("images/art1a.gif") top left no-repeat; padding: 0 0 0 5px; }

nav ul { margin: 0; padding: 0; }
nav li { list-style: none; margin-bottom: 4px; }
nav a { width: 45px; height: 48px; display: block; }
nav img { width: 45px; height: 48px; display: block; }
	
	nav li {
		background-image: url("images/nav.gif"); background-repeat: no-repeat;
		-webkit-transition: background 0.2s ease;
		   -moz-transition: background 0.2s ease;
		     -o-transition: background 0.2s ease;
		        transition: background 0.2s ease;
	}
	nav li:hover { background-color: #FFF; }
	nav li span { position: absolute; left: -1000px; } /* SEO */
	
nav .n_about     { background-position: 0px -11px; background-color: #486668; }
nav .n_projects  { background-position: 0px -60px; background-color: #537925; }
nav .n_archivism { background-position: 0px -109px; background-color: #55DCB7; }
nav .n_art       { background-position: 0px -158px; background-color: #7E975F; }
nav .n_visuals   { background-position: 0px -207px; background-color: #B2E7E0; }
nav .n_contact   { background-position: 0px -256px; background-color: #6E9F9B; }
	
	nav .n_home { background: url("images/n_home.gif") top left no-repeat; }
	nav .n_home:hover { background: url("images/n_home2.gif") top left no-repeat; }
	nav .n_home a { width: 45px; height: 10px; }
	nav .n_home img { width: 45px; height: 10px; border: 0; }
	
/* ---------- CONTENT -------------- */

	#content { position: absolute; left: 50px; padding: 20px 20px 100px 20px; }
	
			
/* ---------- ART BLOCKS -------------- */

	.art_blocks { list-style: none; padding: 0; margin: 20px 0px 5px 15px; } /* margin: 20px 0px 12px 32px; */
	.art_blocks li { width: 90px; height: 90px; position: relative; float: left; margin: 0 10px 10px 0; }
	.art_blocks img { width: 90px; height: 90px; border: 0; }
	
	.thumb { position: absolute; width: 90px; height: 90px; border: 1px solid #000; }
	
	.trans {
		position: absolute;
		width: 90px; height: 90px;
		border: 1px solid #000;
		background-image: url("art/thumb_overlay.png");
		background-repeat: no-repeat;
		background-position: 0 90px;
		-webkit-transition: background-position .3s ease;
		   -moz-transition: background-position .3s ease;
			 -o-transition: background-position .3s ease;
				transition: background-position .3s ease;
	}
	
	.trans:hover {
		background-position: 0 0;
	}

/* ---------- OTHER -------------- */

	.logos { padding: 0 0 0 20px; }
	.logos img { width: 315px; height: 194px; float: left; margin: 0 20px 20px 0; border: 0; }
	
	.skills { width: 100%; border-collapse: collapse; border-spacing: 0; }
	.skills td { padding: 7px; }
	.skills td { border: dashed #657683; border-width: 1px; }
	.skills .title { font-weight: bold; background-color: #354049; }
	
	.heading a,
	.heading img { display: block; width: 21px; height: 16px; } /* img-gyj fix */
	
	 /*
	.arch_text a,
	.arch_text img { display: block; width: 244px; height: 53px; } img-gyj fix */