/*--GENERAL--*/

/* Category Layout Styles */

	#catalogue .category_colleft											{ margin: 0; padding: 0; width: 100%; }
	#catalogue .category_colright											{ margin: 0; padding: 0; width: 100%; }
	
	#catalogue.navigation .category_colleft									{ margin-right: 2%; width: 18.5%; float: left; }
	#catalogue.navigation .category_colright								{ margin-left: 1.7%; width: 77.8%; float: right; }

/* Category Text Styles */

	#catalogue #category_header h1											{ margin: 0; padding: 0.25em 0.875em; font-size: 1.5em; font-weight: 400; color: #FFFFFF; background-color: #232021; display: block; }
	#catalogue #category_header img											{ margin: 0 auto; max-width: 100%; display: block; }
	#catalogue .category_description										{ margin: 0 0 20px; padding: 15px; width: 100%; font-size: 0.875em; color: #FFFFFF; background-color: #444444; }
	#catalogue .category_description_left									{ margin: 50px 0 0; width: 100%; background-color: #EFEFEF; float: left; clear: left; }
	#catalogue .category_description_left p									{ padding: 10px; font-size: 0.75em; line-height: 1.25em; }

/* Category List Styles, Default 3 Columns */

	#catalogue ul#categories												{ margin: 1em 0 0; padding: 0; width: 100%; font-size: 1em; list-style-type: none; }
	#catalogue ul#categories li												{ margin: 0 0 2% 2%; padding: 0; height: auto; font-size: 1em; vertical-align: top; display: inline-block; }

	/* Use of Variables is limited, so for wider availability manual override is needed.
	When support is more readily available.  Use --margin-spacing: 2%; and var(--margin-spacing) to easily override styles
	Also add in col_# --row-count: #;.  Allows for easier changes for margin.  width only overriden on col_1 otherwise on li width: calc((100 - (var(--margin-spacing) * (var(--row-count) - 1)))/ var(--row-count));*/
	#catalogue.col_6 ul#categories li										{ width: 15%; }
	#catalogue.col_5 ul#categories li										{ width: 18.4%; }
	#catalogue.col_4 ul#categories li										{ width: 23.5%; }
	#catalogue.col_3 ul#categories li										{ width: 32%; }
	#catalogue.col_2 ul#categories li										{ width: 49%; }
	#catalogue.col_1 ul#categories li										{ margin-left: 0; width: 100%; }

	#catalogue.col_6 ul#categories li:nth-of-type(6n+1),
	#catalogue.col_5 ul#categories li:nth-of-type(5n+1),
	#catalogue.col_3 ul#categories li:nth-of-type(3n+1),
	#catalogue.col_4 ul#categories li:nth-of-type(4n+1),
	#catalogue.col_2 ul#categories li:nth-of-type(2n+1)						{ margin-left: 0; }

	#catalogue.col_1 ul#categories li.category_products_list,
	#catalogue.col_2 ul#categories li.category_products_list,
	#catalogue.col_3 ul#categories li.category_products_list,
	#catalogue.col_4 ul#categories li.category_products_list,
	#catalogue.col_5 ul#categories li.category_products_list,
	#catalogue.col_6 ul#categories li.category_products_list				{ width: 100%; margin-left:0; border:none; }

	#catalogue ul#categories li.category_products_list h2					{ text-align:left; }
	#catalogue ul#categories li.category_products_list ul					{ padding:0; }

/* Category Styles */

	#catalogue ul#categories li .detail										{ padding: 10px 0 5px; width: 100%; background-color: #CCDEE0; }
	#catalogue ul#categories li .title										{ font-size: 1em; font-weight: 400; text-transform: uppercase; color: #292929; text-align: center; }
	#catalogue ul#categories li .title a									{ color: inherit; }
	#catalogue ul#categories li .summary									{ display: none; }

/* Tablet Styles */

	@media only screen and (min-width: 0px) and (max-width: 800px)
	{
		/* Category Layout Styles */

			#catalogue.navigation .category_colleft,
			#catalogue.navigation .category_colright						{ margin: 0; width: 100%; float: none; }

		/* Category Text Styles */

			#catalogue #category_header h1									{ font-size: 1.4em; }
			#catalogue #category_header img									{ margin: 0; }

		/* Category List Styles, Default 2 Columns */

			#catalogue ul#categories										{ margin: 2% 0 0; font-size: 1.25em; }
			#catalogue ul#categories li										{ margin-bottom: 5%; padding: 0; }

			#catalogue.tcol_4 ul#categories li								{ width: 23.5%; }
			#catalogue.tcol_3 ul#categories li								{ width: 32%; }
			#catalogue.tcol_2 ul#categories li								{ width: 49%; }
			#catalogue.tcol_1 ul#categories li								{ width: 100%; }

			/* Cancels desktop column styles */
			#catalogue.tcol_4 ul#categories li:nth-of-type(n),
			#catalogue.tcol_3 ul#categories li:nth-of-type(n),
			#catalogue.tcol_2 ul#categories li:nth-of-type(n)				{ margin-left: 2%; }

			/* Sets Tablet column styles */
			#catalogue.tcol_4 ul#categories li:nth-of-type(4n+1),
			#catalogue.tcol_3 ul#categories li:nth-of-type(3n+1),
			#catalogue.tcol_2 ul#categories li:nth-of-type(2n+1),
			#catalogue.tcol_1 ul#categories li:nth-of-type(n)				{ margin-left: 0; }

		/* Category Styles */

			#catalogue ul#categories li .detail .title						{ margin: 0; min-height: 35px; font-size: 1em; line-height: 1.05em; }

			#catalogue .category_description								{ margin: 0; padding: 5% 5% 8%; width: 100%; font-size: 1.3em; }
			#catalogue .category_description_left							{ margin: 0; }
	}

/* Mobile Styles */

	@media only screen and (min-width: 0px) and (max-width: 600px)
	{
		/* Category List Styles, Default 1 Columns */

			#catalogue ul#categories										{ font-size: 1.125em; }
			#catalogue ul#categories li										{ padding: 0; width: 100%; }

			#catalogue.mcol_2 ul#categories li								{ width: 49%; }
			#catalogue.mcol_1 ul#categories li								{ width: 100%; }

			#catalogue.mcol_2 ul#categories li:nth-of-type(n),
			#catalogue.mcol_1 ul#categories li:nth-of-type(n)				{ margin-left: 0; }

			#catalogue.mcol_2 ul#categories li:nth-of-type(2n)				{ margin-left: 2%; }
	}

/* Small Mobile Styles */

	@media only screen and (min-width: 0px) and (max-width: 450px)
	{
		/* Category List Styles, Default 1 Column */

			#catalogue.smcol_2 ul#categories li								{ width: 49%; }
			#catalogue.smcol_1 ul#categories li								{ width: 100%; }

			#catalogue.smcol_2 ul#categories li:nth-of-type(n),
			#catalogue.smcol_1 ul#categories li:nth-of-type(n)				{ margin-left: 0; }

			#catalogue.smcol_2 ul#categories li:nth-of-type(2n)				{ margin-left: 2%; }
	}

	@media only screen and (min-width: 0px) and (max-width: 300px)
	{
		/* Category List Styles, List Always 1 Column */

			#catalogue.mcol_2 ul#categories li								{ width: 100%; }
			#catalogue.mcol_2 ul#categories li:nth-of-type(n)				{ margin-left: 0; }
	}

/*--TEMPLATE_1--*/

	#catalogue ul#categories li												{ border: 1px solid #CCDEE0; border-radius: 1px; }
	#catalogue ul#categories li .image_container							{ padding-top: 100%; }
	#catalogue ul#categories li .image_container .image_dimensions			{ padding: 0; border: 0 none; }
	#catalogue ul#categories li .detail										{ padding: 0.5em 0.875em 0.5em 0.875em; }
	#catalogue ul#categories li h2											{ padding: 0 0; margin:0; font-size: 1.25em; font-weight: 700; text-align: center; }
	#catalogue ul#categories li p											{ margin: 0; font-size: 0.8125em; text-align: left; }
	#catalogue ul#categories li a											{ text-decoration: none; display: block; }
	#catalogue ul#categories li .icon										{ margin: 0.125em auto 0; font-size: 2.75em; width:100%; line-height: 1em; display: inline-block; }