/* basic styles type and lines on a 6px/12px grid... */
body {
	font-family: "museo-sans","Museo Sans","MuseoSans",sans-serif;
	font-size: 14px;
	line-height: 21px;
	font-weight:300;
}
.type {
	font-size: 14px;
	line-height: 14px;
	}
#typemark, #typemark a {
	float: left;
	font-weight:600;
	text-decoration:none;
	text-transform: uppercase;
	}
.title, .pagetitle { /* Content text titles, page header titles */
	font-weight: 300;
	text-transform:capitalize;	
	}
.title a:link, .title a:visited, .name a:link, .name a:visited {
	text-decoration: none;
	}
.subhead { /* used for dates and small types */
	font-size: 12px;
	font-weight: 300;
	}
.name, .section { /* Category Page titles and funky little Category links --- this should be h2 */
	font-family: "futura-pt","Futura STD Bold","FuturaStd-Bold",sans-serif;
	font-weight: 300;
	letter-spacing: -2pt;
}
.section { 
	text-transform:capitalize;	
	letter-spacing: -1pt;
	}
.name {
	text-transform: uppercase;
	}
.break {
	font-size: 1.2em;
	font-weight:100;
	padding-top: 40px;
	clear:both;
	}
	
	}
#tagline {
	text-transform: uppercase;
	letter-spacing: .5pt;
	}
#intro {
	clear:both;
	}
#intro .stats {
	font-size: 11px;
	line-height: 12px;
	}

/*

TYPE RECIPE



section (website areas)
	futura type
	capitalizes
	tightens letterspacing

pagetitle is larger size for category page titles, except for ENTRY title which uses the smaller size to match section

dark is color override, for non-links

name (project codes)
	futura type
	UPPERCASE
	

*/



/* layout block stylings */

#header { /* negative space below top-edge header. header heights get set in breakpoints */
	width:100%;
	background: url("../images/corner-303030.png") no-repeat right 12px;
	}
#pagehead {
	width:100%;
	}
#projectgrid {
	width:100%;
	margin-bottom: 20px;
	}
#projectgrid .name { /* position chunky name type in project grid... bottom space works with the gridspacer? */
/* should this get converted to relative/absolute positioning? */
	margin-bottom: 10px;
	margin-left: 4px;
	}
.thumb {
	width:100%;
	height:100%;
	overflow:hidden;
	}
#header, .pagetitle, .title, .subhead, .image, .half-image, #pagehead, #intro, #intro .left, #intro .right, .intro { /* open up the info stack */
	margin-bottom:12px;
	}
.post {
	margin-bottom:16px;	/* larger space between repeaters */
}
.illustration img { /* used for Profiles on the Cat pages */
	float:right;
	}
.divider {
	height:1px;
	border:1px;
	}
#hero .stats {
	margin-top: 5px;
	}
.stats ul {
	clear: left;
	list-style-type:none;
	margin-top: 0px;
	padding: 0;
	text-align: left;
	}
#footer {
	margin-top: 26px;
	}



/* category page name / specs block */
.illustration {
	float:right;
	}
.illustration img {
	width: 100%;
	}






/* utilities */
.fade {
	opacity: 0.25;
	}
.right {
	float:right;
	}
.left {
	float:left;
	}
.inline {
	display:inline;
	}



/* 1 * /

/* @media mobile baseline layout blocks  */
#bodywrapper {
	margin-top: 10px;
	}
.title { /* content titles on index repeaters */
	font-size: 19px;
	line-height: 24px;
	}
.pagetitle { /* large content titles */
	font-size: 24px;
	line-height: 24px;
	}
.name { /* Category Page titles */
	font-size: 38px;
	clear:both;
	}
#projectgrid .name { /* Chunky Category names used on the project grids */
	margin-top: -36px;
	}
.project { /*individual grid blocks */
	margin-bottom: 11px; 
	}
#header {
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	height: 26px;	/* 24px */
	}
#logo_lg {
	display: none;
	}
#logo_sm {
	float: left;
	margin-left: 4px;
	margin-top: 1px;
	width: 30px; /* 26px */
/*	height: 20px; */
	display: inline;
	}
#typemark {
	margin-top: -1px;
	margin-left: 6px;
	font-size:16px; /*14px*/
	}
.contact-icon {
	height: 16px;
	margin-left:8px; 
	margin-top:0px;
	}
#tagline {
	clear:left;
	float:left;
	margin-left: 40px;
	margin-top: -14px;
	font-size: 8px;
	}
.illustration {
	width: 65%;
	float:right;
	margin-bottom: 40px;
	}
#home #tempheader { /* added this for temp home page */
	height: 200px;
	}
.stats { /* tidy little off-grid stack on Cat pages */
	font-size: 10px;
	line-height: 10px;
	font-weight: 500;	
	}


/* 2 */

/* Tablet Portrait Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
body {
	font-size: 14px;
	line-height: 21px;
}
#projectgrid .name { /* Chunky Category names used on the project grids */
	margin-top: -36px;
	}
.title {
	font-size: 28px;
	line-height: 32px;
	max-width: 90%;
	}
.pagetitle {
	font-size: 36px;
	line-height: 36px;
	max-width: 90%;
	}
.subhead {
	font-size: 13px;
	}
.stats {
	font-size: 12px;
	line-height: 13px;
	}
#intro .stats {
	font-size: 11px;
	}
.name { /*Cat page giants, and... home grid & hero type */
	line-height: 36px;
	font-size: 46px; /* line height should match .pagetitle */
	}
#list .post .section:after { /* drop a slash after the category section link */
    content:"\a";
    white-space: pre;
	}
#typemark {
	margin-top: 2px;
	margin-left: 6px;
	font-size:18px;/*16px*/
	}
.contact-icon {
	height: 16px;
	margin-left:9px; 
	margin-top:0px;
	}
#tagline {
	margin-left: 46px;
	margin-top: -14px;
	font-size: 9px;
	}
#header {
	height: 36px; /* 34px */
	background-position: right 16px;
	}
#logo_sm {
	display: none;
	}
#logo_lg {
	display: inline;
	clear: none;
	float: left;
	margin-left: 4px;
	margin-top: 4px;
	width: 35px;
	}
.illustration {
	width: 45%;
	float:right;
	}
#home #tempheader { /* added for temp page */
	height: 280px;
	}	
}



/* 3 */

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

6 col
75/25 content

 */
@media only screen and (min-width: 769px) {
body {
	font-size: 13px;
	line-height: 21px;
	}
#header { /* negative space below top-edge header. header heights set in breakpoints */
	margin-bottom: 32px;
	}	
.title {
	font-size: 32px;
	line-height: 32px;
	}
.pagetitle {
	font-size: 36px;
	line-height: 34px;
	max-width: 85%;
	}
.subhead {
	font-size: 14px;
	}
.stats {
	font-size: 13px;
	line-height: 14px;
	}
#intro .stats {
	font-size: 11px;
	line-height: 13px;
	}
.post {
	margin-bottom:32px;	
}
.name {
	font-size: 64px;
	line-height: 20px; 	/* line height should match .pagetitle */
	}
.illustration {
	width: 40%;
	float:right;
	}
#home #tempheader { /* added for temp page */
	height: 400px;
	}
	
}



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

@media only screen and (min-width: 900px) {
body {
	font-size: 14px;
	}
#typemark {
	margin-top: 4px;
	margin-left: 7px;
	font-size: 24px;
}
#logo_sm {
	display:none;
}
#logo_lg {
	display: inline;
	clear: none;
	float: left;
	margin-left: 4px;
	margin-top: 4px;
	width: 42px;
	}
.contact-icon {
	height: 18px;
	margin-left:9px; 
	margin-top:2px;
	}
#header {
	height: 40px;
	margin-bottom: 36px;
	background-position: right 21px;
	}
#tagline {
	margin-left: 53px;
	margin-top: -14px;
	font-size: 11px;
	}

#intro .stats {
	font-size: 12px;
	line-height: 14px;
	}

#home .section:after {
    content:"\a";
    white-space: pre;
	}
.divider { /* don't really need these with so much screen space */
	display: none;
	}
}


/* 4.5 */

@media only screen and (min-width: 1200px) {
body {
	font-size: 15px;
	}
}
