/*
WHAT THIS DOCUMENT IS
======================

USED IN BOTH BESPOKE AND OTS SITES


NOTES - READ THIS BEFORE ADDING ANYTHING HERE
================================================

This is for global stuff only (eg stuff that will only apply to ALL themes, and ALL sites)


OTS sites
- most stuff you would *not* put in this file. Instead put in OTS_DesignLayouts/XXXX/css-**** files so that colours can be controlled by the website manager
- Anything in here can not be controlled by the website manager so it is just for very general, global, non site specific, non page specific and non design layout specific stuff

Bespoke sites
- Please put CSS in website-global_bespoke.css instead and refrain from using this file!



CONTENTS
========
1) GENERAL
2) FLEXBOX
3) SHOP CLASSES (GLOBAL)
4) COOKIECUTTR
5) LIGHTGALLERY
6) CURRENCY/LANG SELECT
7) PAGE MESSAGE MODAL




CSS INFO & RULES
=================
1) List properties in alphabetical order (eg font-size would go before text-align which would go before z-index)
2) List each property on its own line rather than on one line
3) List things in the order in which they appear on the page
4) Comment out your code and indent it propery as per our coding standard
5) Make sure you put everything in the RIGHT PLACE below!
*/





    /*
    ==========================
    GENERAL [ START ]
    ==========================
    */

		.clear {
			clear:both;
		}

	   	/* USE THIS FOR TABLES WITH THE table CLASS WHICH YOU DON'T WANT TO BE 100% WIDE, AND JUST WANT TO FILL TO THE CONTENT */
			.table-nonfluid {
			   width: auto !important;
			}

		td, th {
			padding: 7px;
		}

		.highlightable-div
		{
			-webkit-transition: box-shadow 0.3s ease-in-out;
			-moz-transition: box-shadow 0.3s ease-in-out;
			-ms-transition: box-shadow 0.3s ease-in-out;
			-o-transition: box-shadow 0.3s ease-in-out;
			transition: box-shadow 0.3s ease-in-out;
		}

		.highlighted-div
		{
			-webkit-box-shadow: 0px 0px 17px 5px rgba(0,102,159,1);
			-moz-box-shadow: 0px 0px 17px 5px rgba(0,102,159,1);
			box-shadow: 0px 0px 17px 5px rgba(0,102,159,1);
		}

		button:active,
		button:focus {
		  outline: 0;
		  -webkit-box-shadow: none;
		          box-shadow: none;
		}

		.valign-top td
		{
			vertical-align: top;
		}


		/* get rid of stupid borders that bootstrap puts on tables */
			.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th {
				border: 0px;
				border-top:0px;
				border-bottom:0px;
				border-left:0px;
				border-right:0px;
			}

    /*
    ==========================
    GENERAL [ FINISH ]
    ==========================
    */



    /*
    ==========================
    FLEXBOX [ START ]
    ==========================
    */

		.row .display-flex
		{
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
		}

		.row .display-flex > [class*='col-']
		{
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-ms-flex-direction: column;
			flex-direction: column;
		}

		/*
		Fix bug on safari where catalogue detail images would incorrectly wrap using flexbox
		due to safari treating before and after pseudo elements as if they were
		actual elements.

		For example, over every other browser, an image would display like this
			[lightGallery Flexbox Image]

		In safari it was displaying like this, treating the pseudo elements as literal elements......
			[lightGallery Flexbox Image:before], [lightGallery Flexbox Image], [lightGallery Flexbox Image:after]

		Setting the content to normal fixes this issues as it tells
		safari that there is esentailly no content within the before
		or after elements, meaning there isn't anything in these elements
		so leave them alone and don't treat them as actaul elements.
		*/

			.display-flex:before,
			.display-flex:after,
			.display-flex > [class*='col-']:before,
			.display-flex > [class*='col-']:after
			{
			   content: normal;
			}


    /*
    ==========================
    FLEXBOX [ FINISH ]
    ==========================
    */



    /*
    ================================
    SHOP CLASSES (GLOBAL) [ START ]
    ================================
    */

		/* general dialog css */
			.ui-widget {
				font-family: inherit;
				font-size: inherit;
			}


		/* email a friend */
			#dialogEmailToAFriend {
				background-color: #ffffff;
				display: none;
			}

			/*
			THIS STYLE ONLY EFFECTS THE DROP MODAL, NOT THE POP UP MODAL
			============================================================
			*/
				#dialogEmailToAFriend form input[type="text"]
				{
					width: 100%;
				}

				#dialogEmailToAFriend form textarea
				{
					max-width: 100%    ;
					min-width: 100%    ;
					resize   : vertical;
					width    : 100%    ;
				}

				#dialogEmailToAFriend form .tc,
				#dialogEmailToAFriend form .c1
				{
					padding: 10px;
				}

			.EmailToAFriendBox {
				width: 200px;
			}

			.dialogEmailToAFriendTable {
				width: 100%;
			}

			.dialogEmailToAFriendTable td.tc {
				width: 35%;
			}


		/* email enquiry form */
			#dialogEmailEnquiry {
				display: none;
			}

			/*
			THIS STYLE ONLY EFFECTS THE DROP MODAL, NOT THE POP UP MODAL
			============================================================
			*/

				#dialogEmailEnquiry form input[type="text"]
				{
					width: 100%;
				}

				#dialogEmailEnquiry form textarea
				{
					max-width: 100%    ;
					min-width: 100%    ;
					resize   : vertical;
					width    : 100%    ;
				}

				.dialogEmail_Padding,
				#dialogEmailEnquiry form .tc,
				#dialogEmailEnquiry form .c1
				{
					padding: 10px;
				}

			.EmailEnquiryBox {
				width: 100% !important;
			}

			.EmailEnquiryBox_Enquiry {
				width: 280px;
				height: 80px;
			}

			.dialogEmailEnquiryTable {
				width: 100%;
			}

			.dialogEmailEnquiryTable td.tc {
				width: 35%;
			}

			#sEmailEnquiry_Enquiry {
				width: 100%;
			}



		/* add to basket modal */
			.ShopProd_AddToBasket_Price {
				line-height: 1.4em;
				padding: 0px;
				margin-bottom:10px;
				margin-top: 20px;
			}


			.ShopProd_AddToBasket_Price_MainPrice {
				display: block;
				font-size: 1.1em;
				font-weight: bold;
			}
			.ShopProd_AddToBasket_Price_MainPriceSub {
				display: block;
				font-size: 0.85em;
			}


			.ShopProd_AddToBasket_Price_Info {
				font-size: 0.85em;
			}

			.ShopProd_AddToBasket_Stock_Info {
				font-style: italic;
			}


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


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

			.ShopProd_AddToBasket_Price_Info_RRP {
				white-space: nowrap;
			}


			.ShopProd_AddToBasket_OptionsDropDown {
				margin-bottom: 15px;
			}

			.ShopProd_AddToBasket_TradePriceBandTable {
				margin-bottom: 15px;
			}

			.ShopProd_AddToBasket_QtyText {
				margin-right: 10px;
			}

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

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

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

			.ShopProd_AddToBasket_bDelivery_LeadTimes_VisitorMustAgreeToLeadTimeWhenAddingToBasket_Checkbox {

			}

			.ShopProd_HomePage_Price_Currencies {
				font-size: 0.9em;
			}




    /*
    ================================
    SHOP CLASSES (GLOBAL) [ START ]
    ================================
    */



    /*
    ========================
    COOKIECUTTR [ START ]
    ========================
    */
    .cc-cookies a:link
    {
    	color:#ffffff;
    	text-decoration:underline;
    }

    .cc-cookies a:hover
    {
    	color:#ffffff;
    	text-decoration:underline;
    }

    /*
    ========================
    COOKIECUTTR [ FINISH ]
    ========================
    */



    /*
    ========================
    LIGHTGALLERY [ START ]
	See https://docs.google.com/document/d/1K941wl3MWhBEE0SqzJTyJuTKDhNWJSE9D0xDSepOZ6g/edit#heading=h.wgbghq4flk4
    ========================
    */
		.lg-thumb-open .lg-img-wrap {
			padding-bottom: 100px !important;
		}

		.lg-img-wrap {
			padding-top: 48px !important;
		}
    /*
    ========================
    LIGHTGALLERY [ FINISH ]
    ========================
    */


	/*
	============================
	CURRENCY/LANG SELECT [START]
	============================
	*/

	#LangSelect
	{
		background:#FFFFFF;
		border-top-left-radius:10px;
		border-top-right-radius:10px;
		bottom:0px;
		-webkit-box-shadow: 0px 0px 9px 1px rgba(0,0,0,0.75);
		-moz-box-shadow: 0px 0px 9px 1px rgba(0,0,0,0.75);
		box-shadow: 0px 0px 9px 1px rgba(0,0,0,0.75);
		color:#000000;
		padding:10px;
		position:fixed;
		right:20px;
		z-index: 2000;
	}

	#LangSelect .languages
	{
		float:left;
	}

	#LangSelect .languages.currencylanguages
	{
		clear:both;
	}

	#LangSelect a:link
	{
		color: #000000;
	}

	#LangSelect a:hover
	{
		color: #000000;
	}

	#LangSelect img
	{
		float:right;
	}

	#LangSelect select
	{
		float:left;
		margin-right: 15px;
		margin-bottom: 10px;
	}

	/*
	============================
	CURRENCY/LANG SELECT [FINISH]
	============================
	*/


	/*
	============================
	PAGE MESSAGE MODAL [START]
	============================
	*/
	.no-padding {
		padding-right: 0px !important;
	}

	/* The below code prevents the modal from sticking to the top of the page which happens sometimes when the modal is shown */
		#page-message-modal .modal-dialog {
			margin-top: 0px !important;
			position: fixed;
			top: 50%;
			left: 50%;
			-webkit-transform: translateX(-50%) translateY(-50%);
			-moz-transform: translateX(-50%) translateY(-50%);
			-ms-transform: translateX(-50%) translateY(-50%);
			-o-transform: translateX(-50%) translateY(-50%);
			transform: translateX(-50%) translateY(-50%);
		}

	#page-message-modal .modal-body {
		/*color: black !important;*/
		padding-bottom: 0px;
		text-align: center;
	}

	#page-message-modal .modal-footer {
		border-top: none;
		text-align: center;
		padding: 5px 10px 10px 0px;
	}
	/*
	============================
	PAGE MESSAGE MODAL [FINISH]
	============================
	*/


	/*
	============================
	Privacy Policy Modal [START]
	============================
	*/
		.no-padding {
			padding-right: 0px !important;
		}

		/* The below code prevents the modal from sticking to the top of the page which happens sometimes when the modal is shown */
			#privacy-policy-modal .modal-dialog {
				margin-top: 0px !important;
				position: fixed;
				top: 50%;
				left: 50%;
				-webkit-transform: translateX(-50%) translateY(-50%);
				-moz-transform: translateX(-50%) translateY(-50%);
				-ms-transform: translateX(-50%) translateY(-50%);
				-o-transform: translateX(-50%) translateY(-50%);
				transform: translateX(-50%) translateY(-50%);
			}

		#privacy-policy-modal .modal-body {
			/*color: black !important;*/
			padding-bottom: 0px;
			text-align: center;
		}

		#privacy-policy-modal .modal-footer {
			border-top: none;
			text-align: center;
			padding: 5px 10px 10px 0px;
		}
	/*
	============================
	Privacy Policy Modal [FINISH]
	============================
	*/

	/*
	Custom table wrapper for testiminals
	https://docs.google.com/document/d/1aM_ItaO0K32F__9nFzmbPbx3BmftyioRs3OBjmnR9ec/edit#
	*/
		.testimonial
		{
			max-width: 1800px;
			margin: 0 auto;
			display: block;
			width: 100%!important;;
		}

		.testimonial tbody
		{
			display: block;
			width: 100%;
		}

		.testimonial tr td
		{
			display: block;
			float: left;
			height: 400px!important;
			overflow: hidden;
			position: relative;
			width: 23%!important;
			max-width: 23%!important;
			margin: 1%;
		}

		.testimonial tr
		{
			display: block;
			width: 100%;
		}

		.testimonial blockquote
		{
			position: absolute;
			left: 0px;
			width: 100%;
			margin: 0px;
			padding: 0px;
			bottom: 0px;
			background-color: rgba(21, 21, 21, 0.75);
		}

		.testimonial blockquote p
		{
			padding-left: 15px;
			padding-right: 15px;
			padding-bottom: 15px;
			color: white;
		}

		.testimonial tr td img
		{
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			position: absolute;
			width: auto!important;
			height: 400px!important;
		}





/* MEDIA QUERIES */
	@media print
	{
		a[href]:after
		{
			content: "";
		}
	}


	@media screen and (max-width: 1260px)
	{
		.testimonial tr td
		{
			width: 48%!important;
			max-width: 48%!important;
		}

		.testimonial tr td img
		{
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			position: absolute;
			width: 100%!important;
			height: auto!important;
		}
	}
		

	@media screen and (max-width: 960px)
	{
		
		.testimonial tr td
		{
			width: 98%!important;
			max-width: 98%!important;
		}


		/*
		Email Enquiry Dialog
		====================
		*/

			#dialogEmailEnquiry form tr td
			{
				display: block;
				width  : 100% ;
			}

			#dialogEmailEnquiry form input[type="button"]
			{
				display: block;
				width: 100%;
			}

			#dialogEmailToAFriend form tr td
			{
				display: block;
				width  : 100% ;
			}

			#dialogEmailToAFriend form input[type="button"]
			{
				display: block;
				width: 100%;
			}
	}

/*
BOOTSTRAP BIGGER THAN MD
*/

	@media screen and (max-width: 992px)
	{
		.display-block-on-md-or-lower
		{
			display: block!important;
			float : none!important;
			width: 100%!important;
			height : auto!important;
		}

		.display-block-on-md-or-lower tbody tr td,
		.display-block-on-md-or-lower tbody tr,
		.display-block-on-md-or-lower tbody
		{
			display: block!important;
			float : none!important;
			width: 100%!important;
			height : auto!important;
		}

		#additionalPageMessageButton
		{
			margin-top : 10px!important;
		}

		#page-message-modal .modal-dialog
		{
			width : 75%;
		}

		#page-message-modal .modal-dialog .modal-footer button
		{
			position: relative;
			display: block;
			width: 75%;
			margin: 0 auto;
		}
	}