/* CSS Document for Grandma's Pancake House (All Media) */

/********************************************************************************************************/
/*		PAGE DEFAULT STYLE																				*/
/********************************************************************************************************/

body,td,th {
	font-family: "Comic Sans MS", cursive;
	font-size: medium;
	color: #fff;
}
body {
	background-color:#a63726;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
a {
	font-size: medium;
	color: #00F;
}
a:visited {
	color: #00F;
}
a:hover {
	color: #00F;
}
a:active {
	color: #00F;
}
h1,h2,h3 {
	font-family: "Times New Roman", Times, serif;
	font-variant:small-caps;
	color:#a63726;
}
h1 {
	font-size: 18px;
}
h2 {
	font-size: 14px;
}
h3 {
	font-size: 12px;
}

/********************************************************************************************************/
/*		PAGE DEFAULT LAYOUT (GRID)																		*/
/********************************************************************************************************/

#content	{
	display: grid;
	max-width: 960px;
	grid-template-columns: repeat(12, 1fr);
	margin: 1em auto;
	grid-template-areas:
	"logo logo logo topper topper topper topper topper topper topper topper topper"
	"logo logo logo topper topper topper topper topper topper topper topper topper"
	". . . contact contact contact contact contact contact contact contact contact"
	"nav nav nav playground playground playground playground playground playground playground playground playground"
	"nav nav nav playground playground playground playground playground playground playground playground playground"
	"nav nav nav playground playground playground playground playground playground playground playground playground"
	"nav nav nav playground playground playground playground playground playground playground playground playground"
	"nav nav nav playground playground playground playground playground playground playground playground playground"
	"social social social playground playground playground playground playground playground playground playground playground"
	". . . trailer trailer trailer trailer trailer trailer trailer trailer trailer";
}

	/**********		GRID AREAS		**********/

	contact	{
		grid-area: contact;
			display: grid;
			grid-template-columns: repeat(9, 1fr);
			width: 100%;
			box-sizing: border-box;		/*	PREVENTS THIS GRID FROM BEING A TAD WIDER THAN THE PLAYGROUND GRID	*/
			border: solid 1px #000;
			border-bottom: none;
			background-color: #fff;
			color: #a63726;
			font-size: smaller;
	}
	logo	{
		grid-area: logo;
			height: 100px;
			text-align: center;
	}
	nav	{
		grid-area: nav;
	}
	nav	ul	{
		padding: 0;
		list-style-type: none;
	}
	nav a	{
		display: block;
		width: 5em;
		margin: .5em 1em;
		padding: .5em 3em .5em 2em;
		color: #fff;
		border-left: solid 2px #fff;
		border-bottom: solid 2px #fff;
		text-decoration: none;
	}
	nav a:visited	{
		color: #fff;
	}
	nav a:hover	{
		color: #a63726;
		border-left: solid 2px #000;
		border-bottom: solid 2px #000;
		background-color: #fff;
	}
	playground	{						/****************************************/
		grid-area: playground;			/*	THIS FORMATTING REMAINS CONSTANT	*/
			min-height: 600px;			/*										*/
			border: solid 1px #000;		/*	TO CUSTOMIZE THIS SECTION FOR		*/
			border-top: none;			/*	EACH PAGE, USE THE "PLAYGROUND		*/
			background-color: #fff;		/*	LAYOUTS" SECTION BELOW.				*/
			color: #a63726;				/*										*/
	}									/****************************************/
	social	{
		grid-area: social;
			text-align: center;
	}
	topper	{
		grid-area: topper;
			height: 100px;
			text-align: center;
	}
	trailer	{
		grid-area: trailer;
			display: grid;
			width: 100%;
			grid-template-columns: repeat(9, 1fr);
			font-family: Arial, Helvetica, sans-serif;
			font-size: smaller;
			font-variant: small-caps;
	}

/********************************************************************************************************/
/*		PLAYGROUNG LAYOUTS	(CUSTOMIZED FOR EACH INDIVIDUAL PAGE)										*/
/********************************************************************************************************/

	/**********	INDEX PAGE	**********/

	#playground_index	{
		display: grid;
		width: 100%;
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: minmax(150px, auto);
		grid-gap: 10px;
	}

	#playground_index *	{
			text-align: center;
	}

	/**********	MENU CATEGORIES PAGE	**********/

	#playground_categories	{
		display: grid;
		width: 100%;
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: minmax(150px, auto);
		grid-gap: 10px;
	}

	#playground_categories *	{
			text-align: center;
	}

	/**********	MENU PAGE	**********/

	#playground_menu	{
		display: grid;
		width: 100%;
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: minmax(150px, auto);
		grid-gap: 10px;
	}

	#playground_menu *	{
			text-align: center;
	}

	/**********	MAP PAGE	**********/

	#playground_map	{
		display: grid;
		width: 100%;
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: minmax(150px, auto);
		grid-gap: 10px;
	}

	#playground_map *	{
			text-align: center;
	}

/********************************************************************************************************/
/*		MISCILANIOUS COMMON RESOURCES																	*/
/********************************************************************************************************/

.para_left_12	{
	padding: 0 1em;
	text-align: left;
	grid-column: 1 / 5;
}
.para_center_12	{
	padding: 0 1em;
	text-align: center;
	grid-column: 5 / 9;
}
.para_right_12	{
	padding: 0 1em;
	text-align: right;
	grid-column: 9 / 13;
}
.para_left_9	{
	padding: 0 1em;
	text-align: left;
	grid-column: 1 / 4;
}
.para_center_9	{
	padding: 0 1em;
	text-align: center;
	grid-column: 4 / 7;
}
.para_right_9	{
	padding: 0 1em;
	text-align: right;
	grid-column: 7 / 10;
}