/*
FLOW
=====
A) DESCRIPTION COLUMN
B) MAIN IMAGE
C) ADDITIONAL IMAGES
D) MEDIA QUERIES (RESPONSIVE STUFF)



IMPORTANT - TO REMEMBER
========================
Many of the classes referenced below aren't referenced in catalogue_detail_inc-layout.php. Instead they
are in the shopprod.class.php which outputs pricing information etc (correct at time of writing on 22nd May 2019)
*/





/*
A) DESCRIPTION COLUMN
======================
(eg where there is the title, price, description etc)
*/

	/* general */
		#CatDetail_DescDiv h1 {
			margin:0 0 20px;
		}


	/* Add basket */
		#CatDetail_DescDiv .addBasket {
			border-bottom-width:1px;
			border-bottom-style: solid;
			border-top-width:1px;
			border-top-style: solid;
			padding:12px 0;
		}

		#CatDetail_DescDiv .addBasket p {
			float:left;
			margin:0;
		}

		#CatDetail_DescDiv .addBasket a {
			display:inline;
			margin-left:10px;
			font-style:italic;
		}

		#CatDetail_DescDiv .addBasket .price {
			font-size:1.4em;
			margin:0 30px 0 0;
			padding:0;
		}

		#CatDetail_DescDiv .addBasket .quantity, #CatDetail_DescDiv .addBasket .quantity a {
			font-size:1.1em;
			text-decoration:none;
		}


		#CatDetail_DescDiv .addBasket .quantity span {
			padding-right:16px;
		}

		#CatDetail_DescDiv .addBasket .ShopProdPrice_Currency {
			font-size:0.8em;
			font-style:italic;
			padding:0 0 0 15px;
		}

		#CatDetail_DescDiv .addBasket .b {
			float:left;
		}

		.AddToBasket_nShopProdOption_ID {
			font-size: 1.2em;
			box-sizing:border-box;
			width:100%;
		}


	/* details / description */
		#CatDetail_DescDiv .details {
			clear:both;
			margin-top:16px;
		}

		#CatDetail_DescDiv .details ul {
			list-style-type:none;
			margin:0;
			padding:0;
		}

		#CatDetail_DescDiv .details ul li {
			float:left;
			text-decoration: none!important;
			margin-bottom: 16px;
		}

		#CatDetail_DescDiv .details ul span {
			margin-right:15px;
			display:inline-block;
			text-decoration:none !important;
		}

		#CatDetail_DescDiv .desc {
			clear:both;
			line-height:17px;
		}


	/* buttons (eg print, enquire, email to a friend etc) */
		#CatDetail_DescDiv .tools {
			clear:both;
			margin: 30px 0 30px;
			padding-bottom: 5px;
		}

		#CatDetail_DescDiv .tools ul {
			list-style-type:none;
			margin:0;
			padding:0;
		}

		#CatDetail_DescDiv .tools ul li {
			float:left;
			margin-right:20px;
		}

		#CatDetail_DescDiv .tools ul li a {
			display:block;
			font-size: 1.1em;
		}


	/* dimensions */
		.ShopProd_Detail_Dimensions {
			display: inline-block;
		}
		.ShopProd_Detail_Dimensions_Width, .ShopProd_Detail_Dimensions_Height, .ShopProd_Detail_Dimensions_Depth, .ShopProd_Detail_Dimensions_Length, .ShopProd_Detail_Dimensions_Diameter {
			margin-left: 10px;
		}


	/* pricing (for detail pages etc) */
		.ShopProd_Detail_Price {
			line-height: 1.2em;
			padding: 0px;
			margin-bottom:10px;
			margin-top: 20px;
		}


		.ShopProd_Detail_Price_MainPrice {
			display: block;
			font-size: 1.3em;
			font-weight: bold;
		}
		.ShopProd_Detail_Price_MainPriceSub {
			display: block;
			font-size: 0.85em;
		}


		.ShopProd_Detail_Price_Info {
			font-size: 0.85em;
		}

		.ShopProd_Detail_Price_Currencies {
			display: block;
			font-size: 0.9em;
			padding-top: 7px;
		}

		.ShopProd_Detail_Price_Info_QtyPerPack {
			content: '\a';
			margin-right: 2px;
			white-space: nowrap;
		}


		.ShopProd_Detail_Price_Info_PriceEach {
			font-style: italic;
			white-space: nowrap;
		}

		.ShopProd_Detail_Price_Info_RRP {
			white-space: nowrap;
		}

		.ShopProd_Detail_Stock_Info {
			font-style: italic;
		}


		.ShopProd_Detail_OptionsDropDown {
			margin-bottom: 15px;
		}

		.ShopProd_Detail_TradePriceBandTable {
			margin-bottom: 15px;
		}

		.ShopProd_Detail_QtyText {
			margin-right: 10px;
		}

		.ShopProd_Detail_QtyInput {
			font-weight: bold;
			margin-right: 15px;
			text-align: center;
			width: 30px;
		}

		.ShopProd_Detail_sDelivery_LeadTimes_Text:after {
			content: '\a';
			display: block;
			margin-bottom: 10px;
		}

		.ShopProd_Detail_bDelivery_LeadTimes_VisitorMustAgreeToLeadTimeWhenAddingToBasket_Container:after {
			content: '\a';
			display: block;
			margin-bottom: 10px;
		}

		.ShopProd_Detail_bDelivery_LeadTimes_VisitorMustAgreeToLeadTimeWhenAddingToBasket_Checkbox {

		}



	/*
	personalisation stuff
	...eg if this item is an item which can be personalised (eg engraved)
	*/

		.ShopProd_Detail_Personalisation input, .ShopProd_Detail_Personalisation textarea
		{
			max-width: 100%;
			width: 255px;
		}



	/* dialog / modul window (for add to basket / email to a friend type windows) */
		.ui-dialog-title {
			line-height:1.5em;
		}



/*
B) MAIN IMAGE
==============
(eg the image which shows largest on the page.... the main image representing this item)
*/
	.mainPic
	{
		margin-bottom: 35px;
		cursor: pointer;
		max-width: 100%;
	}





/*
C) ADDITIONAL IMAGES
=====================
(the thumbs of additional images)
*/


	#lightGallery {
		margin-top: 0px;
	}

	#lightGallery img
	{
		cursor: pointer;
		margin-bottom: 35px;
		max-width: 100%;
	}

	.video-play-button
	{
		display: block;
		width: 50px;
		height: 50px;
		position: absolute;
		left: 50%;
		top: calc(50% - 18px);
		transform: translate(-50%, -50%);
	}




/*
D) MEDIA QUERIES (RESPONSIVE STUFF)
===================================
*/


	/*
	Max-width 960px
	----------------
	*/
		@media screen and (max-width: 960px) {

			/*
			Made to order
			--------------
			The "made to order" or "custom order form" or "request quote form" (also known by other names) is a system that allows
			customers to fill in an enquiry form and request a custom quote for an item. Especially useful for items which aren't off
			the shelf, and are made bespoke to order, and require a quote.
			*/

				.addBasketLargeContent > .price, .addBasketLargeContent > div {
					float:none!important;
					margin:0 auto;
					text-align:center;
					width:auto;
				}


				#CatDetail_DescDiv .addBasketLargeContent .price {
					margin-bottom:10px;
				}

				.addBasketLargeContent > div > .b {
					float:none!important;
				}

		}



	/*
	Max-width 900px
	----------------
	*/

		@media screen and (max-width: 900px) {
			#CatDetail_DescDiv .addBasket .price {
				margin-bottom:10px;
			}
			#CatDetail_DescDiv .addBasket .quantity {
				clear:both;
			}
		}



	/*
	Max-width 768px
	----------------
	*/
		@media screen and (max-width: 768px) {
			#CatDetail_DescDiv .details ul li {
				margin-bottom:10px;
				line-height:17px;
			}
			#CatDetail_DescDiv .tools ul li {
				margin-bottom:10px;
			}

			#additionalImages ul li {
				width:14%;
			}

			#additionalImages ul li a img {
				max-width:100%;
			}
		}


	/*
	Max-width 600px
	----------------
	*/
		@media screen and (max-width: 600px) {
			section#images {
				float:none;
				margin-top:25px;
				width:100%;
			}
			#CatDetail_DescDiv {
				float:none;
				width:100%;
			}
			#additionalImages {
				height:auto;
			}
			#additionalImages ul li {
				display: inline-block;
				height: auto;
				margin: 0 2.5% 20px;
				width: 40%;
				zoom: 1;
			}
		}


	/*
	Max-width 550px
	----------------
	*/
		@media(max-width: 550px) {
			.EmailToAFriendBox {
				width: 170px;
			}

			.recaptchaCell {
				padding: 0px;
				transform:scale(0.77);
				-webkit-transform:scale(0.77);
				transform-origin:0 0;
				-webkit-transform-origin:0 0;
			}
		}


	/*
	Max-width 430px
	----------------
	*/
		@media(max-width: 430px) {
			input.sCountdownMessage {
				width: 100%;
			}

			select.ShopProd_Detail_OptionsDropDown {
				width: 100%;
			}
		}