/* 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, .promotitle a:link, .promotitle 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;
	}
.break {
	font-size: 1.6em; /* was 1.2 */
	font-weight:600; /* was 100 */
	padding: 40px 0 10px 0;
	clear:both;
	}
.name {
	text-transform: uppercase;
	}
#tagline {
	text-transform: uppercase;
	letter-spacing: .5pt;
	}
#intro, rowspacer {
	clear:both;
	}
#intro .stats {
	font-size: 11px;
	line-height: 12px;
	}
.rowspacer {
	height: 20px;	
	}
/*

TYPE RECIPE

H1= 2.0em, bold
H2= 1.5em, bold
H3= 1.17em, bold
h4= 1.0em, bold


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, promotitle uses Title styling but side-steps the alignment definitions

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;
	}

ul, ol { /* overrides spec from boilerplate */
    margin: 10px 0;
    padding: 0 0 0 14px;
}



/* 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;
	}
.promotitle { /* content titles on index repeaters */
	font-size: 16px;
	}
.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;	
	}
#extended, .extended {
	font-size: 16px;
	}



/* 2 */
/* Larger exceptions and overrides begin here */

/* 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;
	}
.promotitle {
	font-size: 21px;
	}
	
.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;
	}	
#extended, .extended {
	font-size: 16px;
	}
}



/* 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;
	}	
.promotitle {
	font-size: 21px;
	line-height: 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;
	}
#extended, .extended {
	font-size: 21px;
	}
	
}



/* 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;
	}
}