/*
** Style Semantics.
------------------
** Styleboxes: Every chunk of CSS is separated into styleboxes. Each with a Name, Goal and Description, with occasional notes.
*** Title: What is being created.
*** Type: States the purpose of the following CSS properties.
**** [Global]: The CSS selectors can be used anywhere. These selectors can not have a hierarchy.
**** [Stylebox]: The CSS selectors are modular and may be placed anywhere; however their is an HTML hierarchy that must be followed. 
*** Description: Detailed explanation of the stylebox.
*** Note:  Thoughts or information other developers might find worthy of a read.
------------------
** Selector Groups: How the CSS selectors are organized for better readability.
*** [Tag Names]: Where HTML tags are modified: they may contain a class equivalent of the tag name.
*** [Hierarchy]: The class structure for the HTML markup using _ (underscore) notation.
*** [Extension]: A modification to a class structure using - (dash) notation.
*** [Device Size Response]: How the stylebox will respond to different device sizes.
*** [Column Size Response]: How the stylebox will respond to different column sizes.
------------------
** CSS Properties: Modifies the visuals of the selector.
*** Display: How the selector will render and interace with other HTML elements.
*** Size: Calculation properties that dictate the HTML box model size (Examples: width, height. padding. margin. border-width).
*** Content: Affects internal inline type content is rendered (Examples: font-family, font-weight, vertical-align).
*** Aesthetic: Non essential, strict visual appeal only (Examples: box-shadow, color).
------------------
*/

/*
** IMPORTANT! When you apply changes...
*** [1] - Make sure id.css, structure.css, and theme.css have the same introduction comments (Style Semantics, IMPORTANT, and Color Theme.
*** [2] - If a change to a stylebox hierarchy is made, make sure it's extensions, themes, and size responses are updated as well.
*/

/* 
** Core classnames used by playbox. 
** Structure: [.section, .row, .col]
** Theme: [.wrapper, .header, .subheader, .anchor, .selection] 
*/

/*
** Color Theme
------------------
Non Applicable.
*/

/*
** ==================================================
** ====================[Core CSS]====================
** ==================================================
*/

/*
** Title: Normalize.
** Type: [Global]
** Description: Normalizes the browser agent styles across all browsers.
*/

/* [Tag Names] */
* {
	/* Display */
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}
html, body {
	/* Display */
	display: block;
	
	/* Size */
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: none;
}
header, main, footer, section, article, aside {
	/* Display */
	display: block;
	
	/* Size */
	padding: 0;
	margin: 0;
}

/*
** Title: Section
** Goal: [Global]
** Description: A section to contain like content.
*/

/* [Hierarchy] */
.section {
	/* Display */
	display: block;
	
	/* Size */
	width: 100%;
}

/*
** Title: Row
** Goal: [Global]
** Description: A block container of columns.
*/

/* [Hierarchy] */
.row {
	/* Display */
	display: inline-block;
	
	/* Size */
	width: 100%;
	
	/* Content */
	vertical-align: top;
}

/*
** Title: Columns
** Goal: [Global]
** Description: A responsive layout controller.
*/

/* [Hierarchy] */
div[class^="col-"], div[class*=" col-"] {
	/* Display */
	display: inline-block;

	/* Size */
	vertical-align: top;
}

/* [Device Size Response] */
@media screen and (max-width: 720px) {
	.col-12-12 {
		/* Size */
		width: 100%;
	}
	.col-11-12 {
		/* Size */
		width: 100%;
	}
	.col-10-12 {
		/* Size */
		width: 100%;
	}
	.col-9-12 {
		/* Size */
		width: 100%;
	}
	.col-8-12 {
		/* Size */
		width: 100%;
	}
	.col-7-12 {
		/* Size */
		width: 100%;
	}
	.col-6-12 {
		/* Size */
		width: 100%;
	}
	.col-5-12 {
		/* Size */
		width: 100%;
	}
	.col-4-12 {
		/* Size */
		width: 100%;
	}
	.col-3-12 {
		/* Size */
		width: 100%;
	}
	.col-2-12 {
		/* Size */
		width: 100%;
	}
	.col-1-12 {
		/* Size */
		width: 100%;
	}
}
@media screen and (min-width: 720px) {
	.col-12-12 {
		/* Size */
		width: 100%;
	}
	.col-11-12 {
		/* Size */
		width: 91.666666666%;
	}
	.col-10-12 {
		/* Size */
		width: 83.333333333%;
	}
	.col-9-12 {
		/* Size */
		width: 75%;
	}
	.col-8-12 {
		/* Size */
		width: 66.666666666%
	}
	.col-7-12 {
		/* Size */
		width: 58.333333333%;
	}
	.col-6-12 {
		/* Size */
		width: 50%;
	}
	.col-5-12 {
		/* Size */
		width: 41.666666666%;
	}
	.col-4-12 {
		/* Size */
		width: 33.333333333%;
	}
	.col-3-12 {
		/* Size */
		width: 25%;
	}
	.col-2-12 {
		/* Size */
		width: 16.666666666%;
	}
	.col-1-12 {
		/* Size */
		width: 8.333333333%;
	}
}

/*
** Title: Stylebox
** Goal: [Stylebox]
** Description: A prefix for all styleboxes.
*/

/* [Hierarchy] */
.stylebox {
	/* Display */
	display: block;
	
	/* Size */
	width: 100%;
	margin: 0;
}