/*
// ************************************************************************************ //
/// Common.css 
// ------------------------------------------------------------------------------------ //
// Description: Sitewide Stylesheets													//
// Author:      M Computer Technologies (Haroun Mobarik, haroun@mcomputer.com)			//
// Date:        Last Updated 01-10-2020													//
// Copyright:	M Computer Technologies													//
//				All Rights Reserved														//
// ************************************************************************************ //
*/

html {
  padding: 0;
  margin:0;
}
body {
  background: #ffffff;
  font-family: "Work Sans","Source Sans Pro", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;*/
  font-size:14px;
  color: #000000;
  border: 0;
  margin: 0;
  padding: 0;
}
a { outline-color: transparent; }
button {outline-color: transparent;}
/*#LoaderBar, #CurrencyMessage { z-index: 1000 !important ;}*/
.CoreFont { font-family: "Work Sans","Source Sans Pro", "Century Gothic", "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; }
.WhiteText {
	color:#000000;
}
.HighlightText {
	color:#ffffff;
}
.Highlight2Text {
	color:#000000;
}
.GeneralText
{
	font-size:14px;	
	text-align: left;
}
.PopupText
{
	font-size:14px;	
	text-align: left;
}
h1, h2, h3 {
	font-size:14px;
	color:#000000;
	text-align:left;
}

.FormWarningText {
	font-size:13px;
	font-weight:bold;
	color:#F00;
}

/* ******************************************************************************** */
/* Genericons */

	.OrderCompleteIcon:before {
		color:#0C3;
		content: "\f418";
		display: inline-block;
		font-family: "Genericons";
		font-size: 10em;
		text-decoration: none;
		vertical-align: baseline;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	.OrderFailedIcon:before {
		color:#C03;
		content: '\f456';
		display: inline-block;
		font-family: "Genericons";
		font-size: 7em;
		text-decoration: none;
		vertical-align: baseline;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	
	.SearchIcon:after {
		color:#000;
		content: '\f400';
		display: inline-block;
		font-family: "Genericons";
		font-size: 2em;
		text-decoration: none;
		vertical-align: baseline;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		margin-left:-48px;
	}
	
	.MobileNavigationBarArrowIcon:after {
		color:#fff;
		content: "\f452";
		display: inline-block;
		font-family: "Genericons";
		font-size: 0.9em;
		text-decoration: none;
		vertical-align: -4px;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	
	.MobileDropMenuIcons:before {
		color:#000;
		display: inline-block !important;
		font-family: "Genericons";
		font-size: 1.5em;
		text-decoration: none;
		vertical-align: -4px;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	.Genericon-HollowStar:before { content: "\f511"; margin-left:-48px; }
	.Genericon-House:before { content: "\f409"; margin-left:-48px; }

/* ******************************************************************************** */

.MenuButtons a{
	color:#fff;
	text-decoration:none;
}	
.MenuButtons a:hover {
	text-decoration:underline;
}


#PnlHolderHolder{
	position:absolute;
	text-align:center;
	margin:0;
	padding-top:176px;
	top:0;
	width:100%;
}

.PnlHBarHolder {
	width:100%;
	margin:0;
	padding:0;
}
.XmasBackground {
	background: url(../Images/snow2.gif);	
}
#PnlHBarHolderTop{
	width:100%;
	height:176px;
	margin:0;
	padding:0;
	position:fixed;
  	top:0px;
	/*z-index:10000000 !important;*/
	z-index:50 !important;
	background-color:#fff;
}
.PnlHBarInner {
	margin:auto;
	padding:0;
	width:1200px;	
}

.PnlTopBar {
	margin-left:auto;
	margin-right:auto;
	padding-top:5px;
	width:1200px;
}

#PnlMainSections {
  position: relative;
  margin-left:auto;
  margin-right:auto;
}
#PnlMainSections p {
  padding: 0px;
  margin: 0px;
  color:#ffffff;
  letter-spacing: 1.5px;
  font-weight: normal;
  text-align:right;
}
#PnlMainSections a {
  color:#ffffff;
  font-weight:bold;
  text-decoration:none;
}
#PnlMainSections a:hover {
  color:#ffffff;
  font-weight:bold;
  text-decoration:none;
}

.PnlBlackBarHolder {
	width:100%;
	padding:0;
}

#PnlMainTableHolder {
	margin-left: auto;
	margin-right: auto;
	margin-top:0;
	margin-bottom:0;
	padding:0;
	width:1200px;
}

#PnlMainLogo {
  width: 692px;
  margin: 0px;
  padding: 0px;
  float:left;  
}
#PnlMainLogo p {
  margin:0;
  text-align:right;
}

#PnlTopRight {
  width: 795px;
  margin:0px;
  padding: 0px;
  float:right;
}

#PnlAccount {
  position: relative;
  margin:0;
  width:100%;
}
#PnlAccount p {
  padding: 0px;
  margin: 0px;
  color:#888888;
  font-size:12px;
  font-weight: normal;
  text-align:right;
}
#PnlAccount a{
  color:#888888;
  font-size:12px;
  text-decoration:none;
}
#PnlAccount a:hover{
  color:#ff0099;
  font-size:12px;
  text-decoration:none;
}

.PnlCartDetails {
  padding: 0px;
  margin: 0px;
  color:#000000;
  line-height:23px;
  font-size:12px;
  font-weight: normal;
  text-align:right;
  vertical-align:bottom;
}
.PnlCartDetails a {
  text-decoration:none;
  color:#000000;
}
.PnlCartDetails a:hover {
  text-decoration:none;
  color:#ff0099;
}
#PnlAccount .MyBasketLink {
  color:#000000;
  font-size:12px;
  text-decoration:none;
}
#PnlAccount .MyBasketLink:hover {
  color:#ff0099;
  font-size:12px;
  text-decoration:none;
}
#PnlShoppingCart {
  margin:0px;
  padding:0px;
}

#PnlSearchNBookmark {
	width: 450px;	
	float:right;
}

#PnlBookmark {
  margin:0px;
  padding:0px;
  text-align:right;
  width:140px;
  float:right;
}
#PnlBookmark p {
  padding: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top:0px;
  margin-bottom:0px;
  color:#000000;
  font-weight: bold;
  text-align:right;
}

#PnlSearch {
  width:300px;
  margin:0px;
  padding-top:33px;
  float:right;
}
#PnlSearch p {
  padding:0px;
  margin:0;
  color:#000000;
  font-weight: normal;
  text-align:right;
}

.SearchForm{
	padding: 0px;
    margin: 0px;
    color:#000000;
    font-weight: normal;
	vertical-align:top;
	text-align:right;
}
.SearchInput{
	width:200px; 
	height:24px;
	color:#000000;
	background-color:#ffffff;
	border-style:none;
	border-bottom-style:solid;
	border-bottom-width:2px;
	border-color:#f2f2f2;
	font-family: "Source Sans Pro", "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	text-align:center;
	vertical-align:top;
}
.SearchSubmit{
	margin-left:5px;
}
.NewsletterInput{
	width:200px; 
	height:20px;
	color:#000000;
	background-color:#ffffff;
	border-style:solid;
	border-width:1px;
	border-color:#f2f2f2;
	font-family: "Source Sans Pro", "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	vertical-align:top;
}
.NewsletterSubmit{
	margin-left:5px;
}
.NewsletterFooter {
	text-align:center;
	line-height:24px;
	vertical-align:middle;
}

#PnlMainViewContainer {
  background-color: #ffffff;
  margin:0px;
  padding:0px;
  width:1200px;
}
#PnlRecentlyViewed{
	width:1180px;
	margin-left:auto;
	margin-right:auto;
	padding:10px;
	font-size:15px;
	text-align:left;
	color:#000;
}
#PnlRecentlyViewed img{
	width:100px;
	height:100px;
	border:none;
}
#PnlRecentlyViewed p{
	margin-top:0;
	margin-bottom:10px;
}

#PnlBottomPanel {
	width:1200px;
	margin-left:auto;
	margin-right:auto;
	font-size:14px;
	text-align:left;
}

#PnlBottomPanel a {
	color:#fff;
	text-decoration:none;
}
#PnlBottomPanel a:hover {
	color:#f09;
	text-decoration:none;
}

.PnlBottomCol1, .PnlBottomCol2, .PnlBottomCol3 {
	float:left;
	width:300px;
	margin-top:10px;
}
.PnlBottomCol4 {
	float:right;
	width:300px;
	margin-top:10px;
}

.PnlBottomLower {
	width:100%;
	vertical-align:bottom;
}
.PnlBottomL1{
	float:left;
	width:400px;
	font-size:12px;
	margin-left:10px;
	margin-bottom:10px;
	vertical-align:bottom;
}
.PnlBottomL2 {
	float:right;
	width:450px;
	margin-right:10px;
	margin-bottom:10px;
	vertical-align:bottom;
	text-align:right;
}


.PnlBottomBar {
	margin:auto;
	padding:0;
	width:1200px;
}
#PnlBottomBar a {
  color: #000000;
  text-decoration: none;
}
#PnlBottomBar a:hover {
  color: #ff0099;
  text-decoration: underline;
}

#PnlBrands{
	margin:0;
	padding:0;
}
#PnlBrands p{
  margin:0;
  padding:0;
  text-align:center;
}

#PnlBlackBar {
  background-color: #000000;
  color:#ffffff;
  width: 1200px;
  margin-left:auto;
  margin-right:auto;
  font-weight: bold;
  font-size:20px;
  text-align:center;
  line-height:30px;
  vertical-align:middle;
}
#PnlBlackBar a {
  color:#ffffff;
  font-weight:bold;
  text-decoration:none;
}
#PnlBlackBar a:hover {
  color:#ff0099;
  font-weight:bold;
  text-decoration:underline;
}

.PnlGreyBar {
  background-color: #f2f2f2;
  color:#000;
  width: 1180px;
  margin-left:auto;
  margin-right:auto;
  padding: 0 10px;
  font-size:12px;
  text-align:left;
}
.PnlGreyBar a {
  color:#000;
  text-decoration:none;
}
.PnlGreyBar a:hover {
  color:#ff0099;
  text-decoration:none;
}
.PnlGreyBarDescription {
	float:left;
	width:1160px;
}
.PnlGreyBarColumn {
	float:left;
	width:140px;
}
.PnlGreyBarSpacerRight {
	float:right;
	width:200px;
	height:200px;
}

.PnlBannerBar {
	background-color: #fff;
  color:#000;
  width: 1200px;
  margin-left:auto;
  margin-right:auto;
  font-size:12px;
  text-align:left;
}
.PnlBannerBarOverlay {
	position:relative;
	top:-30px;
	margin-bottom:-20px;
	width: 1200px;
	height: 20px;
	line-height: 20px;
	font-size: 13px;
	text-align:center;
}

#PnlBlackBarLeft {
  background-color: #000000;
  color:#ffffff;
  width: 1180px;
  margin-left:auto;
  margin-right:auto;
  padding-left:10px;
  padding-right:10px;
  font-weight: bold;
  font-size:18px;
  text-align:left;
  line-height:30px;
  vertical-align:middle;
}
#PnlBlackBarLeft a {
  color:#ffffff;
  font-weight:bold;
  text-decoration:none;
}
#PnlBlackBarLeft a:hover {
  color:#ff0099;
  font-weight:bold;
  text-decoration:underline;
}

#PnlFooter {
  margin:0;
  padding:0 0 10px 0;
}
#PnlFooter p{
  color:#000000;
  font-size:12px;
  margin:0;
  padding:0;
  text-align:center;
}

#PnlPicHolder {
  background-color: #ffffff;
  position: relative;
  width: 290px;
}
#PnlPicHolder p {
  padding: 0px;
  margin: 0px;
}

#PnlPaymentTypes{
  width: 224px;
  height: 64px;
}

.PnlAddressOption {
	text-align:right;	
}
.PnlAddressOption p {
	text-align:right;	
}
.PnlAddressOption form p {
	text-align:right;	
}

.ShoppingCartHeading {
	font-weight:bold;
	font-size: 15px;
	background-color:#f2f2f2;
	color:#000;
}
.ShoppingCartRow {
	font-weight:normal;
	font-size: 15px;
	color:#000000;
}

	.NewsTitle {
		float:left;  
		width:770px; 
		margin-bottom: 10px;
		text-align:left;		
	}
	.NewsTitleH2 {
		line-height:30px !important;
		font-size:28px !important;
		font-weight:normal !important;
		margin:0 !important;
		padding:0 !important;
	}	
	.NewsDate {
		float:right; 
		width:230px; 
		margin-bottom: 10px;
		font-weight:normal;
		font-size:14px;
		text-align:right;
		line-height:30px;
	}
	.NewsContent p {
		margin-bottom:15px;	
	}
	
	.NewsSeparator {
		width: 500px;
		height: 1px;
		background-color:#fd0000;
		font-size:1px;
		line-height:1px;
		margin-right:auto;
		margin-left:auto;
	}
.NavTopUL {
  margin: 0px;
  padding: 0px;
}
.NavTopUL li {
  list-style: none;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 5px;
  padding-right: 0px;
  margin-top:3px;
  margin-bottom: 3px;
  margin-left:5px;
  margin-right:2px;
  font-size: 15px;
  font-weight:bold;
  text-align:left;
}
.NavUL {
  margin:3px 0 0 0;
  padding: 0px;
}
.NavUL li {
  background: url(../Images/BulletPoint.gif) no-repeat;
  list-style: none;
  padding: 0 0 0 16px;
  margin: 4px 0;
  font-size: 14px;
  font-weight:normal;
  text-align:left;
  line-height:16px;
}
.NavHeading, .NavHeading2 {
	width:146px;	
}
.NavHeading a {
	color:#000 !important;	
}
.NavHeading a:hover {
	color:#ff0099 !important;
}

/* ************************************************* */
	.Inline {display:inline;}
	
	.Clear 		{clear:both;font-size:1px;line-height:1px;}
	.Clear4px 	{clear:both;font-size:4px;line-height:4px;}
	.Clear5px 	{clear:both;font-size:5px;line-height:5px;}
	.Clear10px 	{clear:both;font-size:10px;line-height:10px;}
	.Clear15px 	{clear:both;font-size:15px;line-height:15px;}
	.Clear20px 	{clear:both;font-size:20px;line-height:20px;}
	.Clear40px 	{clear:both;font-size:40px;line-height:40px;}
	
	.Spacer1px 	{font-size:1px;line-height:1px;}
	.Spacer5px 	{font-size:5px;line-height:5px;}
	.Spacer10px {font-size:10px;line-height:10px;}
	.Spacer15px {font-size:15px;line-height:15px;}
	.Spacer20px {font-size:20px;line-height:20px;}
	.Spacer40px {font-size:40px;line-height:40px;}
	
	.HSpacer4px  {float: left;width: 4px;}
	.HSpacer5px  {float: left;width: 5px;}
	.HSpacer10px {float: left;width: 10px;}
	.HSpacer15px {float: left;width: 15px;}
	.HSpacer20px {float: left;width: 20px;}
	.HSpacer22px {float: left;width: 22px;}
	.HSpacer26px {float: left;width: 26px;}
	.HSpacer27px {float: left;width: 27px;}
	.HSpacer34px {float: left;width: 34px;}
	.HSpacer50px {float: left;width: 50px;}
	
	.HPadding10px {	padding-left:10px; padding-right:10px; }
	
	.FloatLeft 	{float:left; }
	.FloatRight {float:right; }
	
	.FullWidth { width:100%; }
	
	.TextBlack 		{ color: #000000;}
	.TextWhite 		{ color: #ffffff;}
	.TextAlmostWhite{ color: #eeeeee;}
	.TextGrey 		{ color: #888888;}
	.TextDarkGrey 	{ color: #555555;}
	.TextPink 		{ color: #ff0099;}
	.TextRed 		{ color: #ff0000;}
	.TextBlue 		{ color: #0c7396;}
	.TextLightBrown { color: #ac847b;}
	
	.TextBold {	font-weight:700;}
	.TextItalic { font-style:italic; }
	
	.Text10px {	font-size:10px;	}
	.Text12px {	font-size:12px;	}	
	.Text14px {	font-size:14px;	}
	.Text16px {	font-size:16px;	}
	.Text18px {	font-size:18px;	}
	.Text22px {	font-size:22px;	}
	.Text24px {	font-size:24px;	}
	
	.LineHeight40px { line-height: 40px; }
	
	.LeftBorder {  border-left: 1px solid black; }
	.RightBorder { border-right: 1px solid black; }
	
	.FullJustify {  text-align:justify; }
	.LeftJustify {  text-align:left;  }
	.RightJustify {	text-align:right; }
	.CentreJustify {text-align:center;}
	
	.UpperCase { text-transform: uppercase; }
	
	.BkgDarkBrown {	background-color:#250d0b;}
	.BkgMidBrown {	background-color:#3a1e1a;}
	.BkgLightBrown {background-color:#4f2e27;}
	.BkgDarkRed {	background-color:#990000;}
	.BkgMidRed {	background-color:#b90000;}
	.BkgLightRed {	background-color:#e90000;}
	.WhiteOnDarkRed{background-color:#ad3333;}
	.BkgDarkGrey {	background-color:#999999;}
	.BkgMidGrey {	background-color:#c7c7c7;}
	.BkgLightGrey {	background-color:#e7e7e7;}
	.BkgBlue {		background-color:#2196F3;}
	.BkgDarkBlue {	background-color:#3F51B5;}
	.BkgWhite { 	background-color:#ffffff;}
	.BkgBlack {		background-color:#000000;}
	.BkgGreen {		background-color:#2E7D32;}
	.BkgDarkGreen { background-color:#186329;}
	.BkgOrange {	background-color:#F4511E;}
	
	.BkgDarkGreenImportant { background-color:#186329 !important;}
	.BkgOrangeImportant { background-color:#FF6F00 !important;}
	
	.BkgTrans70 { opacity:0.7; }
	.BkgTrans80 { opacity:0.8; }
	
	.BorderTop0px {border-top:none !important;}
	
	.RoundedCorners5px {border-radius: 5px;}
	.RoundedCorners10px {border-radius: 10px;}
	
	.FixedBottomBar {	position: fixed;
						z-index: 100; 
						bottom: 0; 
						left: 0;
						width: 100%;}

.CentreLayer {
	margin-left:auto;
	margin-right:auto;
}
.Width100 {	width:100%;	}
.Width90 {	width:90%;	}
.Width80 {	width:80%;	}
.Width75 {	width:75%;	}
.Width66 {	width:66%;	}
.Width50 {	width:50%;	}
.Width49 {	width:49%;	}
.Width48 {	width:48%;	}
.Width45 {	width:45%;	}
.Width40 {	width:40%;	}
.Width33 {	width:33%;	}
.Width25 {	width:25%;	}
.Width20 {	width:20%;	}
.Width20 {	width:10%;	}
.Width950px {	width:950px;	}
.Width760px {	width:760px;	}
.Width700px {	width:700px;	}
.Width200px {	width:200px;	}
.Width50px {	width:50px;	}

.Height40px {	height:40px;	}
.Height50px {	height:50px;	}
.Height60px {	height:60px;	}

.HorizontalRuleGrey, .HorizontalRuleGreyNoMargin {
	font-size:1px;
	background-color:#f2f2f2;
	line-height:1px;
}
.HorizontalRuleGrey {
	margin-bottom:5px;
}

.LineHeight15px {
	line-height:15px;	
}
.LineHeight20px {
	line-height:20px;	
}
.LineHeight50px {
	line-height:50px;	
}
.GreyBorder {
	border: 1px solid #f2f2f2;	
}
.MarginTop1px { margin-top:1px; }
.HPaddingOverride {
	padding-left:1px !important;
	padding-right:1px !important;
}
.BottomMarginOverride {
	margin-bottom:1px !important;	
}
.ColumnTitle {
	height:50px;	
}
.OverflowHidden {
	overflow: hidden;	
}
.AlignTop { vertical-align:top; }
.AlignBottom { vertical-align:bottom; }
.AlignMiddle { vertical-align:middle; }

/* select with custom icons */
    .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item { padding: 0.5em 0 0.5em 3em; }
    .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {
      height: 24px;
      width: 28px;
      top: 0.1em;
    }

    .ui-icon.GBP { background: url("../Images/CurrencyGBP28px.png") 0 -2px no-repeat !important; }
    .ui-icon.EUR { background: url("../Images/CurrencyEUR28px.png") 0 -2px no-repeat !important; }
    .ui-icon.USD { background: url("../Images/CurrencyUSD28px.png") 0 -2px no-repeat !important; }
	
	#SelCurrency-button { margin-top:5px;	margin-bottom:-5px;	}
	#SelCurrency-button span.ui-selectmenu-text { padding:0 10px !important;	}
	
	.CurrentCurrencyIcon     { height: 16px; width:28px; vertical-align: middle; display: inline-block; margin-top: -2px; margin-right: 2px; }
    .CurrentCurrencyIcon.GBP { background: url("../Images/CurrencyGBP28px.png") 0 -6px no-repeat !important; }
    .CurrentCurrencyIcon.EUR { background: url("../Images/CurrencyEUR28px.png") 0 -6px no-repeat !important; }
    .CurrentCurrencyIcon.USD { background: url("../Images/CurrencyUSD28px.png") 0 -6px no-repeat !important; }