@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout Baseline: 480px and below. uses 20% grid margins */

.gridContainer {
/* sets total page width and center float -*/
	margin-left: auto;
	margin-right: auto;
	width: 94%;
	}
.grid1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 48%;
	display: block;
}
.grid2 {
	clear: none;
	float: left;
	margin-left: 4%;
	width: 48%;
	display: block;
}
.gridspacer {
	clear: both;
	width: 100%;
	display: block;	
}
.grid3 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 48%;
	display: block;
	}
.grid4 {
	clear: none;
	float: left;
	margin-left: 4%;
	width: 48%;
	display: block;
	}
.grid5, .grid6, #projectlinks {
	display: none;
	}
	
	
#projects .gridleft {
	clear: both;
	float: left;
	margin-left: 0;
	width: 47%;
	display: block;
	}
#projects .gridright {
	clear: none;
	float: left;
	margin-left: 6%;
	width: 47%;
	display: block;
	}
	
#projectmini {
	display: inline;
	}


#header, #projectgrid, #bodywrapper, .promo, .image, .right-image, .post, .bodycontent, #footer, .subhead, #extended {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.half-image {
	margin-left: 0;
	width: 49.95%;
/*	clear: both; */
	float: left;
	display: inline;
}

#intro .left {
	width: 100%;
	}
#intro .right {
	width: 100%;
	margin-left: 0px;
	}
#archive .promo {
	margin-top: -36px;
	margin-bottom: 24px;
	}	

#cats, #tags {
	float: left;
	}


/* Tablet Layout: 550px to 900px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 550px) {
.gridContainer {
	width: 94%; /* 96 */
}
#home .grid1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 23.125%;
	display: block;
}
#home .grid2 {
	clear: none;
	float: left;
	margin-left: 2.5%;
	width: 23.125%;
	display: block;
}
#home .grid3 {
	clear: none;
	float: left;
	margin-left: 2.5%;
	width: 23.125%;
	display: block;
}
#home .grid4 {
	clear: none;
	float: left;
	margin-left: 2.5%;
	width: 23.125%;
	display: block;
}
.grid5, .grid6, #home .gridspacer, #projectmini {
	display: none;
}

#intro .left {
	width: 48%;
	}
#intro .right {
	width: 48%;
	margin-left: 4%;
	}
#archive .promo {
	margin-top: -24px;
	margin-bottom: 32px;
	}	

#projectlinks {
	display: inline;
	}

#cats {
	display: inline;
	padding-right: 10pt;
	}
#tags {
	display: inline;
	}


/* wide-right-column layout for listing index pages - home, cat, entry are 100% */
#listing .image {
	clear: none;
	float: left;
	margin-left: 0%;
	width: 35.8974%;
	display: block;
	}
	
#listing .bodycontent {
	float: right;
	clear: none;
	margin-left: 2.5641%;
	width: 61.5384%;
	display: block;
	}

}





/* 3 */

/* Desktop Layout

6 col
66/33 content


 */

@media only screen and (min-width: 900px) {
.gridContainer {
	width: 94%; /* 96 */
	margin: auto;
}
#home .grid1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 15.25%;
	display: block;
}
#home .grid2 {
	clear: none;
	float: left;
	margin-left: 1.7%;
	width: 15.25%;
	display: block;
}
#home .grid3 {
	clear: none;
	float: left;
	margin-left: 1.7%;
	width: 15.25%;
	display: block;
}
#home .grid4 {
	clear: none;
	float: left;
	margin-left: 1.7%;
	width: 15.25%;
	display: block;
}
#home .grid5 {
	clear: none;
	float: left;
	margin-left: 1.7%;
	width: 15.25%;
	display: block;
}
#home .grid6 {
	clear: none;
	float: left;
	margin-left: 1.7%;
	width: 15.25%;
	display: block;
}
#home .gridspacer, #projectmini {
	display: none;
}
#projects .grid1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 23.125%;
	display: block;
}
#projects .grid2 {
	clear: none;
	float: left;
	margin-left: 2.5%;
	width: 23.125%;
	display: block;
}
#projects .grid3 {
	clear: none;
	float: left;
	margin-left: 2.5%;
	width: 23.125%;
	display: block;
}
#projects .grid4 {
	clear: none;
	float: left;
	margin-left: 2.5%;
	width: 23.125%;
	display: block;
}

#intro .left {
	width: 48%;
	}
#intro .right {
	width: 48%; /* 32.2% */
	}

.right-image {
	margin-left: 0.5%;
	width: 49.5%;
	clear: none;
	float: right;
	display: inline;
}

/* now home and cat pages get into the multi-column game, entry stays 100% */
#home .image, #archive .image  {
	clear: none;
	float: left;
	margin-left: 0;
	width: 66.1016%;
	display: block;
	}
#home .title, #archive .title, #home .bodycontent, #archive .bodycontent {
	clear: none;
	float: right;
	margin-left: 1.6949%;
	width: 32.2033%;
	display: block;
	}

#listing .image {
	clear: none;
	float: left;
	margin-left: 0%;
	width: 32.2033%;
	display: block;
}
#listing .bodycontent {
	clear: none;
	float: left;
	margin-left: 1.6949%;
	width: 66.1016%;
	display: block;
	}
#archive .promo {
	margin-top: -48px;
	margin-bottom: 32px;
	}	
.promo {
	width: 66.1016%; 
	}	
}




/* 4 */
/* 6 col and 66/33 content */


@media only screen and (min-width: 1400px) { /* put a cap on body width */
.gridContainer {
	width: 90%;
	max-width: 1900px;
	margin: auto;
	}
#archive .promo {
	margin-top: -64px;
	margin-bottom: 32px;
	}	
}