html {
	/* 14px for browsers unable to handle px */
	font-size: 87.5%;
	font-size: 14px;
}

body {
	/* Droid Sans is the google font for dev...replace with Myriad Pro once available */
	/*font-family: 'Droid Sans', Arial, Verdana, sans-serif;*/
	font-family: 'Myriad Pro', Arial, Verdana, sans-serif;
	font-size: 1em;
	/* probably should make the default text color read from skinning class ... */
	color: rgb(38, 37, 32);
	/* background: rgb(200, 200, 200); */
	background-color: #ffffff;
}
.page {
	/* position: relative; */
	margin: 0 auto 2em ;
	margin-bottom: 0;
	max-width: 960px;	/* max width of site */
	min-width: 240px;	/* smallest size of site */
	overflow: hidden;	/* removed to make infinite lines work */
	background: rgb(255, 255, 255);	/* candidate for moving to a skinning class */
	z-index: 1;
}

	.page_fixed-max-width {
		position: relative;
		margin: 1em auto;
		max-width: 960px;	/* max width of site */
		min-width: 240px;	/* smallest size of site */
		overflow: hidden;
		background: rgb(255, 255, 255);	/* candidate for moving to a skinning class */
	}
	
	.page_infinite {
		position: relative;
		margin: auto;
		overflow: hidden;
		background: rgb(255, 255, 255);	/* candidate for moving to a skinning class */
	}

.foundation_header, 
.foundation_nav, 
.foundation_body, 
.foundation_footer {
	/*position: relative;*/
	display: block;
}

.foundation_nav {
    margin-top: 32px;
	position: relative;
}
/* IE7 fix */
.lt-ie8 .foundation_nav {
	position: static;
}
.fw {
	position: relative;
	display: block;
	float: left;
}
.fw_content {
	padding: 0 1em;
}

/* basic markup framework:
 * 
 * 	<div class="foundation">									<--- major page section like header, main, footer ...
 * 		<div class="fw [semantic-name]">						<--- 'framework' element that floats and changes widths based on media query
 * 			<div class="fw_content [semantic and typo names]">	<--- content area - assumes text-based; if using presentation element drop class name altogether (but keep div level)
 */




/***** Browser Width Determined Styles
*****/

/* 4 columns 
 * these are default so no need to do mq 
 * @media screen and (min-width: 0px) and (max-width: 320px) { 
 * 
 * these are strictly for prototyping...once in production all mq should be stored in page.css
 */
	
	.size1of4, .size1of12, .size2of12, .size3of12, .size4of12, .size5of12 { width: 25%; }
	.size2of4, .size6of12, .size7of12, .size8of12 { width: 50%; }
	.size3of4, .size9of12, .size10of12, .size11of12 { width: 75%; }
	.size4of4 { width: 100%; }

	.shift1of4 { margin-left: 25%; }
	.shift2of4 { margin-left: 50%; }
	.shift3of4 { margin-left: 75%; }
	.shift4of4 { margin-left: 100%; }

	.size1of1 {
		width: 100%;
	}

	.hide-6,
	.hide-9,
	.hide-12 {
		display: block;
	}

	.hide-4 {
		display: none;
	}

/* } */

/* 6 columns */
@media screen and (min-width: 321px) and (max-width: 480px) {
	.size1of6, .size1of12, .size2of12, .size3of12 { width: 16.66666%; }
	.size2of6, .size4of12, .size5of12 { width: 33.33333%; }
	.size3of6, .size6of12, .size7of12 { width: 50%; }
	.size4of6, .size8of12, .size9of12 { width: 66.66666%; }
	.size5of6, .size10of12, .size11of12 { width: 83.33333%; }
	.size6of6 { width: 100%; }

	.shift1of6 { margin-left: 16.66666%; }
	.shift2of6 { margin-left: 33.33333%; }
	.shift3of6 { margin-left: 50%; }
	.shift4of6 { margin-left: 66.66666%; }
	.shift5of6 { margin-left: 83.33333%; }
	.shift6of6 { margin-left: 100%; }

	.hide-4,
	.hide-9,
	.hide-12 {
		display: block;
	}

	.hide-6 {
		display: none;
	}

}

/* 9 columns */
@media screen and (min-width: 481px) and (max-width: 720px) {
	.size1of8, .size1of12, .size2of12 { width: 12.5% }
	.size2of8, .size3of12, .size4of12 { width: 25% }
	.size3of8, .size5of12 { width: 37.5% }
	.size4of8, .size6of12, .size7of12 { width: 50% }
	.size5of8, .size8of12 { width: 62.5% }
	.size6of8, .size9of12, .size10of12 { width: 75% }
	.size7of8, .size11of12 { width: 87.5% }
	.size8of8 { width: 100% }

	.shift1of9 { margin-left: 11.1% }
	.shift2of9 { margin-left: 22.2% }
	.shift3of9 { margin-left: 33.3% }
	.shift4of9 { margin-left: 44.4% }
	.shift5of9 { margin-left: 55.5% }
	.shift6of9 { margin-left: 66.6% }
	.shift7of9 { margin-left: 77.7% }
	.shift8of9 { margin-left: 88.8% }
	.shift8of8 { margin-left: 100% }

	.hide-4,
	.hide-6,
	.hide-12 {
		display: block;
	}

	.hide-9 {
		display: none;
	}

}

/* 12 columns */
@media screen and (min-width: 721px) {
	.size1of12 { width: 8.33333%; }
	.size2of12 { width: 16.66666%; }
	.size3of12 { width: 25%; }
	.size4of12 { width: 33.33333%; }
	.size5of12 { width: 41.66666%; }
	.size6of12 { width: 50%; }
	.size7of12 { width: 58.33333%; }
	.size8of12 { width: 66.66666%; }
	.size9of12 { width: 75%; }
	.size10of12 { width: 83.33333%; }
	.size11of12 { width: 91.66666%; }
	.size12of12 { width: 100%; }

	.shift1of12 { margin-left: 8.33333%; }
	.shift2of12 { margin-left: 16.66666%; }
	.shift3of12 { margin-left: 25%; }
	.shift4of12 { margin-left: 33.33333%; }
	.shift5of12 { margin-left: 41.66666%; }
	.shift6of12 { margin-left: 50%; }
	.shift7of12 { margin-left: 58.33333%; }
	.shift8of12 { margin-left: 66.66666%; }
	.shift9of12 { margin-left: 75%; }
	.shift10of12 { margin-left: 83.33333%; }
	.shift11of12 { margin-left: 91.66666%; }
	.shift12of12 { margin-left: 100%; }

	.hide-4,
	.hide-6,
	.hide-9 {
		display: block;
	}

	.hide-12 {
		display: none;
	}

}




/**** helper classes ****/

/* clearfix */
	.group {
	  *zoom: 1;
	}
	.group:before,
	.group:after {
	  display: table;
	  content: "";
	}
	.group:after {
	  clear: both;
	}
	
/* prevent wrapping */
.nowrap {
	white-space: nowrap;
}

/* "image replacement" */
.ir {
	display: block; 
	border: 0; 
	text-indent: -999em; 
	overflow: hidden; 
	background-color: transparent; 
	background-repeat: no-repeat; 
	text-align: left; 
	direction: ltr; 
	*line-height: 0; 
}
.ir br { display: none; }

/* hide from all (screen and screen readers (usually content that will be made visible via interaction)*/
.hidden { 
	display: none !important; 
	visibility: hidden; 
}

/* hide from screens only - allow screen readers to see (i.e. content that is meant for screen readers but not typical browsers)*/
.visuallyhidden { 
	border: 0; 
	clip: rect(0, 0, 0, 0); 
	height: 1px; 
	margin: -1px; 
	overflow: hidden; 
	padding: 0; 
	position: absolute; 
	width: 1px; 
}
.visuallyhidden.focusable:active, 
.visuallyhidden.focusable:focus { 
	clip: auto; 
	height: auto; 
	margin: 0; 
	overflow: visible; 
	position: static; 
	width: auto; 
}

/* keep layout intact by don't display content */
.invisible { visibility: hidden; }









/***** DEBUG STYLES

	to trigger debug styles, add the class name 
	"debug" to the parent tag of the section you 
	want to debug
	
	ex. <body class="debug">

*****/
.debug-breakpoint-status {
	position: absolute;
	display: none;
	bottom: 0;
	width: 100%;
	padding:0.5em;
	text-align: center;
	background: rgba(100,100,100,0.4);
}
	.debug .debug-breakpoint-status {
		position: fixed;
		display: block;
		text-shadow: 0 0 0.2em #fff, 0 0 0.2em #fff, 0 0 0.2em #fff, 0 0 0.2em #fff, 0 0 0.2em #fff;
	}
.debug-breakpoint {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 999em;
	background: rgba(0,0,0,0.5);
}
.debug .bp-text {
	display: none;
}
.debug .debug-breakpoint:hover .bp-text {
	display: block;
}

.debug:before {
  position: absolute;
  top: 0;
  right: 0;
  padding: .5em;
  color: #fff;
  font-size: 200%;
  z-index: 999;
}

@media only screen and (max-width: 320px) {
  .debug:before {
    content: "<320";
    background: red;
  }
}

@media only screen and (min-width: 321px) and (max-width: 480px) {
  .debug:before {
    content: "321-480";
    background: blue;
  }
}

@media only screen and (min-width: 481px) and (max-width: 720px) {
  .debug:before {
    content: "481-720";
    background: purple;
  }
}

@media screen and (min-width: 571px) {
  .debug:before {
    content: ">571";
    background: green;
  }
}

@media only screen and (min-width: 721px) {
  .debug:before {
    content: ">720";
    background: black;
  }
}