#header {
	background-color: #303030;
	background-image: none;
	}
#tagline {
	color: #68645D;
	}



.gridleft, .block .left {
	clear: both;
	float: left;
	margin-left: 0;
	width: 48%;
	display: block;
	}
.gridright, .block .right {
	clear: none;
	float: left;
	margin-left: 4%;
	width: 48%;
	display: block;
	}



.kitrow {
	float: left;
	margin: 0px;
	}





.project {
	float: left; /* this fixed all the vertical spacing issues */
	margin-bottom: 30px; /* this is the only styling parameter from style.css */
	position: relative; 
	}
	
/* de-generalize this so the kit heros "name" are addressed separately from the works blocks... their name is inside 'info' which is what we want to position */

.kitrow .project .name { /* Chunky Category names used on the project grids */
	position: absolute; /*works relative to parent */
	bottom: 5%;
	margin-left: 4px;
	}
.works .project .info { /* Chunky Category names used on the project grids */
	position: absolute; /*works relative to parent */
	bottom: 5%;
	margin-left: 4px;
	}




.kits {
	margin-bottom: 30px;
	padding-bottom: 10px;
	border-bottom: 1px solid #262626;
	}
.kits .thumb {
	width: 96%;
	margin-bottom: 10px;
	}
.kits .stats {
	margin-left: 3%;
	}


.works .project {
	margin-bottom: 20px;
	}
.works img {
	width: 100%;
	}
.works .thumb {
	overflow:hidden;
	}


.rowspacer {
	height:40px;
	clear:both;
	}




/* ------ color overrides ------------ */
.project a, .stats a  {
	color: #FFF;
	}
.project a:hover, .stats a:hover {
	color: #ff6100;  
	}





/* project hero images */
/* remember, ID names can't start with a number! */
#p962, #xjr11, #mkiii, #p35 {
/*	background-color: #222; */
	background-size:cover;
	background-repeat:no-repeat;
	}
#p962 {
	background-size:cover;
	width:100%;
	background-image: url("../projects/962_8313.jpg");
	background-position:10% 40%; /* left */
	}
#xjr11 {
	background-size:cover;
	width:100%;
	background-image: url("../grid/20011204_xjr11_pa_0080pf9-900.jpg");
	background-position:0% 50%; /* left */
	}
#mkiii {
	background-size:cover;
	width:100%;
	background-image: url("../grid/20030309_ports_0029_p9-900.jpg");
	background-position:0% 50%; /* left */
	}
#p35 {
	background-size:cover;
	width:100%;
	background-image: url("../grid/20030830_P35_B_0053_p9-900.jpg");
	background-position:0% 50%; /* left */
	}





/* 1 * /

/* @media mobile baseline layout blocks  */

.gridleft {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	}
.gridright {
	clear: none;
	float: left;
	margin-left: 0%;
	width: 100%;
	display: block;
	}


.project {
	height: 160px;
	} 
	
.info .name {
	line-height: 26px;
/*	font-size: 38px; /* line height should match .pagetitle */
	}


@media only screen and (max-width: 480px) {
#upper {
	display: none;	
	}
}


/* 2 */

/* Tablet Portrait Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
	
.gridleft {
	clear: both;
	float: left;
	margin-left: 0;
	width: 48.5%;
	display: block;
	}
.gridright {
	clear: none;
	float: left;
	margin-left: 3%;
	width: 48.5%;
	display: block;
	}

.project {
	height: 170px; 
	}

.works .project {
	height: 128px; 	
	}

.info .name {
	line-height: 36px;
/*	font-size: 46px; /* line height should match .pagetitle */
	}


#lower {
	display: none;	
	}
}


/* 2.5 */
@media only screen and (min-width: 580px) {

.works .project {
	height: 160px; 	
	}

}


/* 3 */

/* Desktop + Tablet Landscape Single Column Layout: 769px up to 1000px

 */
@media only screen and (min-width: 769px) {

.gridleft {
	clear: both;
	float: left;
	margin-left: 0;
	width: 49%;
	display: block;
	}
.gridright {
	clear: none;
	float: left;
	margin-left: 2%;
	width: 49%;
	display: block;
	}

.project, .works .project {
height: 200px;
	}
.kitrow .project .name { /* Chunky Category names used on the project grids */
	bottom: 9%;
	}

.info .name {
/*	font-size: 64px; */
	line-height: 52px; 	/* override from style.css */
	}
		
	
#intro .right {
	width: ; /* 23.5%; */
	}

}

/* 4 */
/* alignments for side-rail layouts */

@media only screen and (min-width: 900px) {

.project, .works .project {
	height: 260px;
	}

}