/*--\	 /	     HAZE		\	 /----
-----\/\/	by Ben Buffone	 \/\/---*/

/*-----------------------------------------------------------------

Haze is a lean, rapid CSS framework that makes sense. It's set of
rules, CSS best practices, subtle styles and other enjoyable tidbits
that I use to make sites look mega.

* Version 1.0 *

- First release! Wooo!

* SECTION 1 - Default Styles
* SECTION 2 - Haze.Grid | A Grid That Makes Sense

-----------------------------------------------------------------*/




/*/////////////////////////////////////////////////////////////////
/// SECTION 1 - Default Styles ////////////////////////////////////
/////////////////////////////////////////////////////////////////*/




html {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
	text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;

	/* Make fonts look sexy in WebKit browsers */

	-webkit-font-smoothing:antialiased;

	/* Natural box layout */

	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	-o-box-sizing: border-box;
  	-ms-box-sizing: border-box;
  	box-sizing: border-box;
}

/*
	Applies natural box layout to all elements, but allows components to change.
	Forked from http://www.paulirish.com/2012/box-sizing-border-box-ftw/
*/

*, *:before, *:after {
	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
  	-o-box-sizing: border-box;
 	-ms-box-sizing: border-box;
 	box-sizing: border-box;
}

body,div,h1,h2,h3,h4,h5,h6,p,ol,ul,li,form,header,footer,menu,nav,
label,blockquote,article,figure,section {
	margin:0;padding:0;border:0;
}

/* Removed unwanted link decoration. */

a, a:link, a:active, a:visited {text-decoration:none};
a:hover {text-decoration:underline}

/* Buttons are now clickable. */

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
  vertical-align: middle;
  text-align:center;
}

/* Checkboxes are now spaced properly. */

input[type="checkbox"], input[type="radio"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

/* Removed horrible default borders and focus outlines on text inputs. */

input[type="text"] {
	border:none;
}

input[type="text"]:focus {
	outline:none;
}

/* <textarea>s have a habit of not scrolling. Now they do. */

textarea {
  overflow: auto;
}

/* Handy classes for making non-draggable text in web apps */

.no-select {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

/* Handy class for fading CSS animations. 0.25s is optimum. */

.fade {
	-webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

/*/////////////////////////////////////////////////////////////////
/// SECTION 2 - Haze.Grid | A Grid That Makes Sense ///////////////
/////////////////////////////////////////////////////////////////*/



.container {
	margin-right:auto;
	margin-left:auto;
	max-width:1200px;
	padding-left:5%;
	padding-right:5%;
	position: relative;
	display: block;
	overflow: hidden;
	min-height:100%;
}

@media (min-width: 1200px) {
	.container {
		max-width: 1400px;
	}
}

.haze-12 {width:100%}
.haze-11 {width:calc(100% / 12 * 11)}
.haze-10 {width:calc(100% / 12 * 10)}
.haze-9 {width:calc(100% / 4 * 3)}
.haze-8 {width:calc(100% / 3 * 2)}
.haze-7 {width:calc(100% / 12 * 7)}
.haze-6 {width:50%}
.haze-5 {width:calc(100% / 12 * 5)}
.haze-4 {width:calc(100% / 3)}
.haze-3 {width:calc(100% / 4)}
.haze-2 {width:calc(100% / 6)}
.haze-1 {width:calc(100% / 12)}

.haze-1, .haze-2, .haze-3, .haze-4, .haze-5, .haze-6, .haze-7, .haze-8,
.haze-9, .haze-10, .haze-11, .haze-12 {
	position:relative;
	float:left;
	padding-left:10px;
	padding-right:10px;
	margin-bottom:15px;
	min-height:1px;
}

@media (max-width: 768px) {
	.haze-1, .haze-2, .haze-3, .haze-4, .haze-5, .haze-6, .haze-7, .haze-8,
	.haze-9, .haze-10, .haze-11, .haze-12 {
		width:100%;
		padding-left:10px;
		padding-right:10px;
	}
}

/* Handy classes for floating divs. */

.left {float:left}
.right {float:right}