@charset "UTF-8";
/*
-------------------

	Type & Shape Platform

	Gridde 1.0
	APR . 2014

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

body {
	margin: 0px 0px 0px 0px;
	overflow-y: scroll;
	display: block !important;
}

/*

	# HELPERS

*/

.clear {
	clear: both;
}

* {
	transition-timing-function: ease-in;
	-moz-transition-timing-function: ease-in;
	-webkit-transition-timing-function: ease-in;
}

.loading *,
.resizing * {
	transition: none !important;
	-moz-transition: none !important;
	-webkit-transition: none!important;
}


/*

	# MASTER COLUMNS

*/

/* Columns */
.master-column {
	float: left;
}

	/* Columns . Left */
	.master-column.left {
		padding-right: 10px;
		user-select: none;
		-moz-user-select: none;
		-webkit-user-select: none;
	}

	.anchored .master-column.left {
		position: fixed;
		top: 0px;
		left: 0px;
	}

		.master-column.left .master-column-content {
			padding-top: 13px;
		}

	/* Columns . Center */
	.master-column.center {
		padding-top: 13px;
	}

	.anchored .master-column.center {
		float: none;
		margin: 0px auto 0px auto;
	}

	/* Columns . Right */
	.master-column.right {
		padding-left: 10px;
		user-select: none;
		-moz-user-select: none;
		-webkit-user-select: none;
	}

	.anchored .master-column.right {
		position: fixed;
		top: 0px;
		right: 0px;
	}

		.master-column.right .master-column-content {
			padding-top: 13px;
		}


/*

	# BUTTONS

*/

/* Sizes */
.tiny .menu-button,
.tiny .context-button {
	height: 32px;
	width: 32px;
}

.small .menu-button,
.small .context-button {
	height: 32px;
	width: 32px;
}

.medium .menu-button,
.medium .context-button {
	height: 64px;
	width: 64px;
}

.large .menu-button,
.large .context-button {
	height: 64px;
	width: 64px;
}

.extra-large .menu-button,
.extra-large .context-button {
	height: 72px;
	width: 72px;
}

/* Menu */
.menu-button {
	float: right;
	cursor: pointer;
}

.menu-button:hover {
}

.menu-button.pressed {
}

.menu-button.active {
}

.menu-button.inactive {
}

/* Context */
.context-button {
	
	cursor: pointer;
}

.context-button:hover {
}

.context-button.pressed {
}

.context-button.active {
}

.context-button.inactive {
}


/*

	# CONTEXT PANEL

*/

.content-panel.context {
	height: 0px;
	overflow: hidden;
	transition: 0.2s height;
	-moz-transition: 0.2s height;
	-webkit-transition: 0.2s height;
}

	.anchored .content-panel.context {
		position: fixed;
		top: 13px;
		z-index: 999;
	}


/*

	# MAIN PANEL

*/

.content-panel.main {
	transition: 0.2s;
	-moz-transition: 0.2s;
	-webkit-transition: 0.2s;
}

/*

	# MENU PANEL

*/

.content-panel.menu {
	float: left;
	position: absolute;
	width: 0px;
	overflow: hidden;
	transition: 0.2s width;
	-moz-transition: 0.2s width;
	-webkit-transition: 0.2s width;
	z-index: 999;
}


/*

	# WARNINGS

*/

.warning {
	display: none;
	margin: 0px auto 0px auto;
	text-align: center;
}

.warning .warning-content {
	padding-top: 108px;
}

.warning .label {
}

	/* Resize */
	.warning.resize {
		background: transparent url(images/resize.png) no-repeat top center;
	}


/*

	# THE GRID

*/

/* Blocks */
.grid .grid-block {
	float: left;
	font-size: 0px;
	transition: 0.2s;
	-moz-transition: 0.2s;
	-webkit-transition: 0.2s;
}

	/* Blocks . Sizes */
	.tiny .grid .grid-block {
		width: 100%;
	}

	.small .grid .grid-block {
		width: 50%;
	}

	.medium .grid .grid-block {
		width: 33.3%;
	}

	.large .grid .grid-block {
		width: 25%;
	}

	.extra-large .grid .grid-block {
		width: 25%;
	}