img.roundedcorner25
{
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
}

div#MenuCategoryOuterWrapper
{
	background-color:#555;
	width:96%;
	padding:2%;
	float:left;
}

div.MenuProductOuterWrapper 
{
	background-color:#888;
	width:96%;
	padding:2%;
}

div.MenuCategory
{
	width:25%;
	padding:2%;
	margin:2%;
	background-color:green;
	float:left;
}

div.MenuCategory.LastColumn
{
	float:right;
}

div.MenuCategory.FirstColumn:before
{
	clear:both;
	background-color:red;
}

div.MenuProduct
{
	width:90%;
	margin:2%;
	float:left;
	background-color:blue;
	color:yellow;
	background-color:red;
}


form.QuoteMeForm
{

}

form.QuoteMeForm fieldset
{
}

form.QuoteMeForm label
{
	clear:both;
	float:left;
	width:40%;
}

form.QuoteMeForm input, form.QuoteMeForm select
{
	width:50%;
	float:right;
	margin-bottom:10px;
}

form.QuoteMeForm img#SecurityImage
{
	width:30%;
	float:right;
}




/***
Remember to move all files to the dynamic system pre launch, nothing above this line please.
***/
/****************************************************************************/
/*Style Sheet *****************************************/
/* https://typekit.com/ */
/***************************************************************************/
/*
Start of Customised Area
*/
/*
End of Customised Area
*/


* {
  margin: 0;
  padding: 0;
  }

form#QuickContactFormRightSideMenu img.CaptchaImage
{
	padding-left:20%;
	padding-right:20%;
	width:60%;
	height:auto;
}

form#ContactUsForm img.CaptchaImage
{
	padding-left:30%;
	padding-right:30%;
	width:40%;
	height:auto;
}


html
{
}

#Inner-Wrapper
{
	width:100%;
/*
	position:relative;
	z-index:1;
*/
}

#BrowserVersionWarning
{
	position:fixed;
	z-index:9999;
	left:0;
	top:0;
	width:400px;
	padding:20px;
	font-size:1.2em;
	line-height:19px;
}

div#ErrorAlertOuter, div#CopyMissingFilesTextBoxOuter
{
	position:fixed;
	/* Always on top */
	z-index:9999;
	left:0;
	width:100%;
}

div#ErrorAlertOuter
{
	top:0;
	text-align:center;
}

div#CopyMissingFilesTextBoxOuter
{
	margin-left:25%;
	width:50%;
	top:20%;
}

div#ErrorAlert, div#CopyMissingFilesTextBox
{
	margin:0 auto;
}





/* Rest css */
Body , h1, fieldset, #HeaderBar, #HeaderFlash , #HeaderBarLeftHomePageLink, #HeaderBarRightHomePageLink, #AccessibilityMenu, #GoogleSearchMenuMenu, #HeaderMiniMenu, #TopMenuBar, #LeftSideMenuBar, #RightSideMenuBar, #GenericWrapper, #Content, #AdminMiniMenu , #Footer , #FooterBar, #LanguageBar, #GoogleSearchForm, #GalleryPanelTop, #GalleryPanelCenter, #GalleryPanelLeft, #GalleryPanelRight, #GalleryPanelBottom
{
	border-width:0;
	margin: 0;
	padding: 0;
}

Body 
{
	border-style: solid;
	border-color:yellow; 
}

Body, h1,h2, h3, textarea
{
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-family: Georgia, serif;
    font-family: "Courier New", Courier, monospace;
    font-family: "Times New Roman", Times, serif;
    font-family: Verdana, Geneva, sans-serif;
    font-family: Arial, Helvetica, sans-serif;
	font-family: "adobe-garamond-pro",sans-serif;
	font-style: italic;	
/*

	To test typekit font uncomment this
    font-family: "Caflisch Script Pro";
	*/
	
	border-style:solid;
/*
	font-size:9pt; equivalent to 12px
	This is via adobe typekit
	// Don't forget to set adobe type kit is system variables and add the font on the typekit editor
	font-family: "charlemagne-std";
	font-family: "allumi-std-extended";
*/
  	margin:0;
	border:0;
}

Body, h3
{
    font-size:14px;
	line-height:1.4em;
}

h2
{
	font-size:1.2em;
}

#PageFooterDiv
{
/*
	This is the full width footer bar, use a repeating pattern in possible
	These two figures should match
	height:100px;
	margin-top:-100px;
	The height should be the same as the footerbar
	height:100px;
*/
	border-style: solid;
	border-width:0;
	height:186px;
	margin-top:-186px;
	width: 100%;
}

p
{
	margin-bottom:0.5em;
}

img#SSLCertImage
{
	position:absolute;
}

#OverallContent
{
/*
	This controls the minimum height of the page
	min-height:1500px;
*/
	border-width:0;
	border-style:solid;
	margin:0 auto; 
	max-width:1200px;
	/* This is important to ensure the zoomer system on product detail works */
	position:relative;
}


#TopMenuBar
{
/*	
	// Use this to control the vertical position of the menubar
*/	
	/*
		The Z-Index is needed for IE7
	*/
/* Fixing a height will break the dropdown for a responsive site */
	position:relative;
	z-index:9999;
	border-style: solid;
	width:100%;
	float:left;
}

#Content
{
/*	
	// Use this to control the vertical position of the Content
	// These two figues (top and margin-bottom) should match exactly, negative if required.
*/	
}

#Content
{
	z-index:5;
	border-style:solid;
    padding-left:0;
    padding-right:0;
	width:100%;
	float:left;
}

#CrumbleTrail
{
	/* There are controls in stylefp*/
	padding:4px 1% 0 1%;
	float:left;
	width:98%;
}

#FooterBar
{
	
/*
	background: url('/images/layout/footerbar.png') top left no-repeat;
*/
	position:relative;
	z-index:9;
	border-style: solid;
	font-size:11px;
	height:186px;
	width:100%;
	clear:both;
	overflow:hidden;
	
}

#FooterBarLeftColumn, #FooterBarMiddleColumn, #FooterBarRightColumn
{
/*
*/
}

#FooterBarLeftColumn
{
/*
*/
	padding-top:20px;
	float:left;
	width:20%;
}

#FooterBarMiddleColumn img
{
/*
*/
}

#FooterBarMiddleColumn
{
/*
*/
	float:left;
	width:0;
	text-align:center;
}

#FooterBarRightColumn
{
/*
*/
	float:right;
	width:79%;
	padding-right:1%;
}

div#FooterBarRightColumn img
{
/*
	height:auto;
	width:29%;
*/
	height:100%;
	width:auto;
	float:right;
	margin-left:2%;
}

#Footer 
{
	border-style: solid;
    font-size:9px;
	line-height:1.2em;
	margin:0 auto; 
	padding-top:10px;
	max-width:1260px;
	padding-left:3%;
}


#AdminMiniMenu, #AccessibilityMenu, #HeaderMiniMenu 
{
/*
*/
	position:absolute;
	z-index:9999;
	top:0;
	padding:0 1% 0 1%;
	font-size:10px;
}

#HeaderMiniMenu
{
	right:1.53%;
}



#LanguageBar
{
	position:absolute;
	z-index:9999;
	top:0;
	float:left;
	font-size:10px;
	width:20%;
	left:40%;
	text-align:center;
}

#AdminMiniMenu, #MiddleHeaderFiller, #AccessibilityMenu, #HeaderBarLeftHomePageLink, #SocialMediaPanel
{
	float:left;
}


#AdminMiniMenu, #AccessibilityMenu
{
/*
	overflow:hidden;
*/
}

#AccessibilityMenu,#AdminMiniMenu
{
	max-width:33%;
}

#AccessibilityMenu:Hover .PopoutLabel
{
	display:none;
	overflow:hidden;
	width:0;
}

#AccessibilityMenu:hover
{
}

#RightSideMenuBar
{
	border-style: solid;
	float:right;
}

#LeftSideMenuBar .CustomerPageHeaderFormat, #RightSideMenuBar .CustomerPageHeaderFormat
{
	margin-top:5px;
}

#RightSideMenuBar img.StandardImageWidthforContainer
{
	width:94%;
	height:auto;
	padding:3%;
}

.CustomerPageHeaderFormat
{
	font-weight:bold;
	font-size:1.4em;
	line-height:1.0em;
}

.CustomerPageSubHeaderFormat, .CustomerPageSubHeaderFormat h2
{
	font-weight:bold;
	font-size:.9em;
}

.LeftSideLatestSiteImage
{
	overflow:hidden;
	max-height:50px;
}

.LeftSideLatestSiteImage img
{
	padding:0;
	max-width:400px;
	width:100%;
	height:auto;
}

#LeftSideMenuBar, #GenericWrapper, #RightSideMenuBar
{
    font-size:16px;
	padding-top:10px;
	padding-bottom:10px;
}

#LeftSideMenuBar
{
	border-style: solid;
	float:left;
}

#LeftSideEmbeddedMenuBar
{
	float:left;
	width:20%;
	padding-right:2%;
	padding-bottom:5px;
}

#GenericWrapper
{
	border-style:solid;
	float:left;
/*	min-height:400px;
	height: auto !important;
*/
}

#GenericWrapper  ul
{
/*
*/
	list-style-type: square;
	list-style: url(../../images/layout/designa/UL-MainImage.png) disc;
	list-style-position:inside;
}





/*
div.StandardULDiscFormat ul
{

	list-style-type: square;
	margin-left:5%;
	list-style: url(../../images/layout/designa/UL-MainImage.png) disc;
	line-height:1.3em;
	margin-left:5%;
}
*/
.QuickContactForm
{
	border-width:1px;
}

.QuickContactFormText
{
	font-size:9px;
	padding:0;
}

.QuickContactForm input
{
	border-width:1px;
	padding:0;
	width:100%;
}

.QuickContactForm input[type="submit"]
{
	border: 1px outset;
	cursor:pointer;
}

.QuickContactForm p
{
	width:100%;
	text-align:center
}

.QuickContactForm input[type="submit"]
{
	border: 1px outset;
	cursor:pointer;
}

.RoundedBoxBackground
{
	width:96%;
	padding:10px 2% 10px 2%;
	border-radius: 25px; 
	-moz-border-radius: 25px; 
	-webkit-border-radius: 25px; 
	-webkit-border-radius: 25px;
	background-color:#F0DBBD;
	-webkit-box-shadow: #f4dfc0 2px 2px 2px;
	-moz-box-shadow: #f4dfc0 2px 2px 2px;
	box-shadow: #f4dfc0 2px 2px 2px;
}

#RightSideMenuBar .RoundedBoxBackground
{
	width:92%;
	padding:10px 4% 10px 4%;

}


div#google_translate_element
{
	line-height:95%;	
	width:100%;
	height:auto;
	height:55px;
	padding:10px;
}
div#google_translate_element select
{
	/* font size is overidden for ie in the ie stykesheets(s) */ 
	font-size:9px;
	margin-bottom:5px;
}
div#google_translate_element a 
{
	display: block;
	margin-top:5px;
}


#HeaderFlash
{
	position:absolute;
	left:1.53%;
	top:22px;
}


a.LanguageBarLink
{
	margin-right:5%;
}
#HeaderBarLeftHomePageLink, #HeaderBarRightHomePageLink, #MiddleHeaderFiller, #HeaderBar, #HeaderBarLeftHomePageLink img, #HeaderBarRightHomePageLink img, #MiddleHeaderFiller img
{
/*
	max-height:160px;
*/
}

#HeaderBar
{
/*
*/
	padding-top:17.1%;
	background:url('/images/layout/designa/OverallBackground.png'), url('/images/layout/designa/ContentBackground.png');
	background-repeat: no-repeat, repeat-y;
	background-color:transparent;
	background-position:top left, top left;
		background-size:contain;
		-moz-background-size:contain;
		-webkit-background-size:contain;}



#HeaderBarLeftHomePageLink, #HeaderBarRightHomePageLink, #MiddleHeaderFiller
{
	position:absolute;
	top:0;
	width:16.32653061224489795%;
}

#HeaderBarLeftHomePageLink a, #HeaderBarRightHomePageLink a, #MiddleHeaderFiller a
{
	padding:0;
	margin:0;
}

#HeaderBarLeftHomePageLink a img, #HeaderBarRightHomePageLink a img, #MiddleHeaderFiller a img
{
	padding:0;
	margin:0;
}


#HeaderBarLeftHomePageLink
{
	position:absolute;
	left:1.53%;
}

#MiddleHeaderFiller
{
	left:43%;
}

#HeaderBarRightHomePageLink
{
	position:absolute;
	right:1.53%;
}



#MiddleHeaderFiller
{
}


#HeaderBarLeftHomePageLink img, #HeaderBarRightHomePageLink img, #MiddleHeaderFiller img
{
	
	width:100%;
	opacity:.3;
}

#SocialMediaPanel
{
/*
	background-color:red;
*/
	left:43%;
	position:relative;
	margin-top:-5%;
	width:22%;
}


/*  Start of social media icons */
.stretchysocialmediasmall
{
	display:block;
	float:left;
	position:relative;
	overflow:hidden;
/*
	This gived the maximum width of the sprite using any of the files
	max-width:118px;
	max-width:24px;
*/
	max-width:25px;
}

.stretchysocialmediasmall .spacer {width: 100%; height: auto;}
.stretchysocialmediasmall .sprite {position:absolute; top:0; left:0; max-width:none; max-height:100%;}

.stretchysocialmediasmall .sprite.gp {left:0;}
.stretchysocialmediasmall .sprite.gp:hover{left:-100%;}

.stretchysocialmediasmall .sprite.pi {left:-200%;background-color:white;}
.stretchysocialmediasmall .sprite.pi:hover{left:-300%;}

.stretchysocialmediasmall .sprite.fk {left:-400%;}
.stretchysocialmediasmall .sprite.fk:hover{left:-500%;}

.stretchysocialmediasmall .sprite.bs {left:-600%;}
.stretchysocialmediasmall .sprite.bs:hover{left:-700%;}

.stretchysocialmediasmall .sprite.yt {left:-800%;}
.stretchysocialmediasmall .sprite.yt:hover{left:-900%;}

.stretchysocialmediasmall .sprite.li {left:-1000%;}
.stretchysocialmediasmall .sprite.li:hover{left:-1100%;}

.stretchysocialmediasmall .sprite.fb {left:-1200%;}
.stretchysocialmediasmall .sprite.fb:hover {left:-1300%;}

.stretchysocialmediasmall .sprite.tw {left:-1400%;}
.stretchysocialmediasmall .sprite.tw:hover {left:-1500%;}

.stretchysocialmediasmall .sprite.in {left:-1600%;}
.stretchysocialmediasmall .sprite.in:hover {left:-1700%;}

.stretchysocialmediasmall .sprite.wa {left:-1800%;}
.stretchysocialmediasmall .sprite.wa:hover {left:-1900%;}

.stretchysocialmediasmall.no-limit {max-width: none;} /*you could also set this to a pixel size, for example 320px, to limit the maximum*/
.stretchysocialmediasmall.no-limit .sprite {min-height: 100%;}

a.stretchysocialmediasmall img {border:0; padding: 0; margin: 0 ; display: block;}

/*
	This set the width of the image under normal circumstances, if you have four images it would be set at 100/4 % less the margin
	.stretchysocialmediasmall {width:24%; margin-right:1%;}
*/
.stretchysocialmediasmall {width:16%; margin-right:4%;}

/*  End of social media icons */


form#ButtonPanel1
{
	background-color:green;
}

div#ButtonPanel2
{
	background-color:red;
}

div#ButtonPanel3
{
	background-color:blue;
}

/*  Start of button icons */

.stretchybuttons
{
	display:block;
	float:left;
	position:relative;
	overflow:hidden;
/*
	This gived the maximum width of the sprite using any of the files
	max-width:118px;
	max-width:24px;
*/
	max-width:150px;
}
/* This is the for a 400 by 400 image, an aspect ratio of 1 by 1 
.stretchybuttons .spacer {width: 100%; height: auto;}
 This is the adaption for a 400 by 150 image, an aspect ratio of 8 by 3 
 */
.stretchybuttons .spacer {width: 100%; padding-bottom:37.5%;height:0;}
.stretchybuttons  .sprite {position:absolute; top:0; left:0; max-width:none; max-height:100%;}

.stretchybuttons .sprite.send {left:0;}
.stretchybuttons .sprite.send:hover{left:-100%;}

.stretchybuttons .sprite.submit {left:-200%;}
.stretchybuttons .sprite.submit:hover{left:-300%;}

.stretchybuttons .sprite.add {left:-400%;}
.stretchybuttons .sprite.add:hover{left:-500%;}

.stretchybuttons .sprite.previous {left:-600%;}
.stretchybuttons .sprite.previous:hover{left:-700%;}

.stretchybuttons .sprite.next {left:-800%;}
.stretchybuttons .sprite.next:hover{left:-900%;}

.stretchybuttons .sprite.checkout {left:-1000%;}
.stretchybuttons .sprite.checkout:hover{left:-1100%;}

.stretchybuttons .sprite.continue {left:-1200%;}
.stretchybuttons .sprite.continue:hover {left:-1300%;}

.stretchybuttons .sprite.more {left:-1400%;}
.stretchybuttons .sprite.more:hover {left:-1500%;}

.stretchybuttons .sprite.basket {left:-1600%;}
.stretchybuttons .sprite.basket:hover {left:-1700%;}

.stretchybuttons .sprite.home {left:-1800%;}
.stretchybuttons .sprite.home:hover {left:-1900%;}

.stretchybuttons.no-limit {max-width: none;} /*you could also set this to a pixel size, for example 320px, to limit the maximum*/
.stretchybuttons.no-limit .sprite {min-height: 100%;}

a.stretchybuttons img {border:0; padding: 0; margin: 0 ; display: block;}

/*
	This set the width of the image under normal circumstances, if you have four images it would be set at 100/4 % less the margin
	.stretchybuttons {width:24%; margin-right:1%;}
*/
.stretchybuttons {width:32%; margin-right:1%;}

fieldset.shoppingcart1 .stretchybuttons {width:48%; margin-right:2%;}

fieldset.shoppingcart1 
{
	width:50%;
	background-color:red;
	overflow:hidden;
}

fieldset.shoppingcart2 .stretchybuttons {width:50%; margin-right:1%;}

fieldset.shoppingcart2 
{
	padding-left:25%;
	width:50%;
	background-color:grey;
	overflow:hidden;
}



fieldset.shoppingcart3 .stretchybuttons {width:32%; margin-right:1%;}

fieldset.shoppingcart3 
{
	width:66%;
	background-color:yellow;
	overflow:hidden;
}

fieldset.customerlogin .stretchybuttons {width:100%; margin-right:0;}

fieldset.customerlogin
{
/*
	background-color:yellow;
*/	
	margin-top:10px;
	margin-bottom:10px;
	padding-left:20%;
	padding-right:20%;
	width:40%;
	overflow:hidden;
}


fieldset.customerregister .stretchybuttons, fieldset.customerregistervalidate .stretchybuttons , fieldset.customerchangepassword .stretchybuttons, fieldset.customerdetails .stretchybuttons
{
	width:100%; margin-right:0;
}

fieldset.customerregister, fieldset.customerregistervalidate, fieldset.customerchangepassword, fieldset.customerdetails
{
/*
	background-color:yellow;
*/	
	margin-top:10px;
	margin-bottom:10px;
	margin-left:40%;
	margin-right:40%;
	width:20%;
	overflow:hidden;
}

fieldset.CustomerfeedbackForm .stretchybuttons {width:100%; margin-right:0;}

fieldset.CustomerfeedbackForm
{
/*
	background-color:yellow;
*/	
	margin-top:10px;
	margin-bottom:10px;
	padding-left:35%;
	padding-right:35%;
	width:30%;
	overflow:hidden;
}

fieldset.TestimonialAdd .stretchybuttons {width:100%; margin-right:0;}

fieldset.TestimonialAdd
{
/*
	background-color:yellow;
*/	
	margin-top:10px;
	margin-bottom:10px;
	padding-left:30%;
	padding-right:30%;
	width:40%;
	overflow:hidden;
}

fieldset.customercontactus, fieldset.directoryadd, fieldset.requestaquoteform, fieldset.ProductsFormMoreButton, fieldset.ProductsFormAddtoCartButton, fieldset.ProductsFormAddButton, fieldset.ProductsFormNextStepButton, fieldset.ProductsFormPreviousStepButton, fieldset.ProductsCartContinueButton, fieldset.ProductsEmptyCartContinueButton, fieldset.ProductsCartCheckoutButton, fieldset.ProductsCartConfirmButton,fieldset.ProductsCartThanksHomeButton, fieldset.ProductsCartOrderConfirmedHomeButton, fieldset.quickcontactsendbutton, fieldset.rightmenucartcheckoutbutton
{
	margin-top:10px;
	margin-bottom:10px;
	overflow:hidden;
}

fieldset.directoryadd .stretchybuttons {width:100%; margin-right:0;}

fieldset.directoryadd
{
/*
	background-color:yellow;
*/	
	padding-left:40%;
	padding-right:40%;
	width:20%;
}

fieldset.customercontactus .stretchybuttons {width:100%; margin-right:0;}

fieldset.customercontactus
{
/*
	background-color:yellow;
*/	
	padding-left:20%;
	padding-right:20%;
	width:60%;
}

fieldset.ProductsFormMoreButton .stretchybuttons {width:100%; margin-right:0;}

fieldset.ProductsFormMoreButton
{
	padding-left:15%;
	padding-right:15%;
	width:70%;
}

fieldset.ProductsFormAddtoCartButton .stretchybuttons, fieldset.ProductsFormAddButton .stretchybuttons
{
	width:100%; margin-right:0;
}

fieldset.ProductsFormAddtoCartButton, fieldset.ProductsFormAddButton
{
/*
	background-color:yellow;
*/	
	padding-left:15%;
	padding-right:15%;
	width:70%;
}

fieldset.ProductsFormNextStepButton .stretchybuttons
{
	width:100%; margin-right:0;
}

fieldset.ProductsFormNextStepButton
{
/*
	background-color:yellow;
*/	
	padding-left:15%;
	padding-right:15%;
	width:70%;
}


fieldset.ProductsFormPreviousStepButton .stretchybuttons
{
	width:100%; margin-right:0;
}

fieldset.ProductsFormPreviousStepButton
{
/*
	background-color:yellow;
*/	
	padding-left:15%;
	padding-right:15%;
	width:70%;
}

fieldset.ProductsCartContinueButton
{
	float:left;
}

fieldset.ProductsCartContinueButton .stretchybuttons
{
	width:100%; margin-right:0;
	float:left;
}

fieldset.ProductsCartContinueButton
{
	padding-left:0;
	padding-right:10%;
	width:25%;
}

fieldset.ProductsEmptyCartContinueButton .stretchybuttons
{
	width:100%; margin-right:0;
	float:left;
}

fieldset.ProductsEmptyCartContinueButton
{
	padding-left:30%;
	padding-right:35%;
	width:30%;
}

fieldset.ProductsCartCheckoutButton
{
	float:right;
}

fieldset.ProductsCartCheckoutButton .stretchybuttons
{
	width:100%; margin-right:0;
	float:right;
}

fieldset.ProductsCartCheckoutButton
{
	padding-left:10%;
	padding-right:0;
	width:25%;
}


/*
Moved to dynamic on Productconfirmorder
fieldset.ProductsCartConfirmButton .stretchybuttons
{
	width:100%; margin-right:0;
	float:right;
}

fieldset.ProductsCartConfirmButton
{
	padding-left:27%;
	padding-right:33%;
	width:30%;
}

*/



fieldset.ProductsCartThanksHomeButton .stretchybuttons
{
	width:100%; margin-right:0;
	float:right;
}

fieldset.ProductsCartThanksHomeButton
{
/*
	background-color:yellow;
*/	
	padding-left:0;
	width:10%;
}



fieldset.ProductsCartOrderConfirmedHomeButton .stretchybuttons
{
	width:100%; margin-right:0;
	float:right;
}

fieldset.ProductsCartOrderConfirmedHomeButton
{
	padding-left:0;
	width:25%;
}


fieldset.quickcontactsendbutton .stretchybuttons
{
	width:100%; margin-right:0;
	float:right;
}

fieldset.quickcontactsendbutton
{
	padding-left:10%;
	padding-right:10%;
	width:80%;
}

fieldset.rightmenucartcheckoutbutton .stretchybuttons
{
	width:100%; margin-right:0;
	float:right;
}

fieldset.rightmenucartcheckoutbutton
{
	padding-left:10%;
	padding-right:10%;
	width:80%;
}

/*  End of button icons */



/*  Start of icons for carts etc */
.stretchyicons
{
	display:block;
	float:left;
	position:relative;
	overflow:hidden;
/*
	This gived the maximum width of the sprite using any of the files
	max-width:118px;
	max-width:24px;
*/
	max-width:33px;
}


/* This is the for a 400 by 400 image, an aspect ratio of 1 by 1 */
/*
.stretchyicons .spacer {width: 100%; height: auto;}
*/

.stretchyicons .spacer {width: 100%; height: auto;}
.stretchyicons .sprite {position:absolute; top:0; left:0; max-width:none; max-height:100%;}

.stretchyicons .sprite.basketnotempty {left:0;} /* Shopping basket full*/
.stretchyicons .sprite.basketnotempty:hover{left:-100%;} 

.stretchyicons .sprite.basketempty {left:-200%;} /*Shopping basker empty */
.stretchyicons .sprite.basketempty:hover{left:-300%;} 

.stretchyicons .sprite.login {left:-400%;}
.stretchyicons .sprite.login:hover{left:-500%;} /* Login */

.stretchyicons .sprite.logout {left:-600%;}
.stretchyicons .sprite.logout:hover{left:-700%;}

.stretchyicons .sprite.next {left:-800%;}
.stretchyicons .sprite.next:hover{left:-900%;}

.stretchyicons .sprite.checkout {left:-1000%;}
.stretchyicons .sprite.checkout:hover{left:-1100%;}

.stretchyicons .sprite.continue {left:-1200%;}
.stretchyicons .sprite.continue:hover {left:-1300%;}

.stretchyicons .sprite.more {left:-1400%;}
.stretchyicons .sprite.more:hover {left:-1500%;}

.stretchyicons .sprite.basket {left:-1600%;}
.stretchyicons .sprite.basket:hover {left:-1700%;}

.stretchyicons .sprite.home {left:-1800%;}
.stretchyicons .sprite.home:hover {left:-1900%;}

.stretchyicons.no-limit {max-width: none;} /*you could also set this to a pixel size, for example 320px, to limit the maximum*/
.stretchyicons.no-limit .sprite {min-height: 100%;}

a.stretchyicons img {border:0; padding: 0; margin: 0 ; display: block;}

/*
	This set the width of the image under normal circumstances, if you have four images it would be set at 100/4 % less the margin
	.stretchyicons {width:24%; margin-right:1%;}
*/
.stretchyicons {width:32%; margin-right:1%;}



/* End of icons for carts etc */


#GoogleSearchForm
{
	border-style: solid;
	width:100%;
}

#GoogleSearchForm fieldset
{
	border-style: solid;
	width:100%;
	float:left;
}

#GoogleSearchForm input
{
	float:left;
}

#GoogleSearchForm input[type="image"]
{
	width:10%;
	height:auto;
}

#GoogleSearchForm input[type="text"]
{
	float:left;
	border: 1px solid #444444;
	width:65%;
}

#GoogleSearchForm label
{
	float:right;
	width:35%;
	font-size:.2em;
	overflow:hidden;
}

/**************************** Start of Visitor Tracker **************************/
div.VisitorTracker img
{
	max-width:33%;
	padding-right:67%;
	height:auto;
}

div.VisitorTracker
{
	font-size:.6em;
}
/**************************** End of Visitor Tracker **************************/


ul.tweet
{
	display:block;
	list-style:none;
	list-style-type: none;
	list-style-image: none;
	padding-left: 0;
	margin-left: 0;
	margin-top: 5px;
	/*margin-top:-10px;*/
}

.tweet li
{
/*	list-style-type: square;*/
	/*list-style: url(../../images/layout/designa/LI-TweetImage.png); */
	list-style: none;
	list-style-type: none;
	list-style-image: none;
	background:url(../../images/layout/designa/LI-TweetImage.png) left top no-repeat; 
	margin-left:0;
	margin-right:10px;
	margin-bottom: 10px;
	padding-left:55px;
	min-height: 50px;
}
.tweet-status
{
}

/**************************** End of Embedded Tweeting **************************/





/**************************** Form Elements ****************************** */
.StandardForm
{
	border-width:0;
}

.FormElement
{
	margin-bottom: 10px;
	float: left;
	height: auto;
	display: block;
	width: 100%;
}

.FormElement label
{
	display: block;
	margin: 0;
}

.FormElement input
{
	width:auto;
}

.FormElement input[type="submit"]
{
	width:auto;
}

.FormElement input[type="button"]
{
	width:auto;
	
}

.FormElement input[type="password"]
{
	border-style: solid;
	border-width:1px;
}

.FormElement input[type="text"]
{
	border-style: solid;
	border-width:1px;
	width: 33%;
}

.FormElement input[type="checkbox"]
{
	width:auto;
	display:inline;

}

.FormElement select
{
	width:auto;
	border-style: solid;
	border-width:1px;
}

.FormElement textarea
{
	width: 32%;
	min-height: 100px;
	border-style: solid;
	border-width:1px;
}

.FormElement img
{
	margin: 0;
	padding: 0;
}

.FormElement .MultipleList label
{
	display: inline;
	width: auto;
	float: left;
}

.FormElement .MultipleList  input[type="radio"]
{
	width: auto;
	float: left;
}

.FormElement .HelpSection
{
	margin: 0;
	display: inline;
}

.FormElement .HelpTextInvisible
{
	display:none;
}

.FormElement .HelpTextVisible
{
	display:block;
	margin: 0;
	margin-left: 5%;
	margin-bottom: 5px;
	border-left: 1px solid;
}

.FormElement .HelpTextVisible p
{
	margin: 0;
	margin-left: 1%;
}


.FormElement .DatePicker 
{
	width:auto;
}

.StandardForm fieldset 
{
	border-width:0;
}

.StandardForm .StandardFormOptions 
{
	margin: 1%;
}

.SecurityCode input[type="text"]
{
	width: 200px;
	text-align: center;
}

/* ************************** End of Form Elements *********************** */


/**************************** Start of buttons **************************/
/* The background graphics for these buttons have been moved into the language style sheet, style-00.css etc*/

input.GraphicRegisterButton[type="submit"], input.GraphicSendButton[type="submit"], input.GraphicAddToCartButton[type="submit"], input.GraphicCheckoutButton[type="submit"]
,input.GraphicPreviousStepButton[type="submit"], input.GraphicNextStepButton[type="submit"], input.GraphicPreviousStepButton[type="button"], input.GraphicNextStepButton[type="button"]
, input.GraphicCheckoutButton[type="submit"], input.GraphicCheckoutButton[type="submit"]:hover, input.GraphicContinueShoppingButton[type="submit"], input.GraphicContinueShoppingButton[type="submit"]:hover

{
/*
	// These are the original sizes of the TCRM Graphics
	width:146px;
	height:33px;
	If the original graphic is 146 by 33 (Width by Height), you set the width to what is required in percentage terms, say 100% the padding bottom will the inverse of the aspect ratio.
	display:block;
*/
	border-width:0;
	width: 100%;
	height: 0;
	padding-bottom: 34.24%;
	background-size:200% 2100%; /* This is to oversize the image to cater for the hover and the multiple images*/
}

input.GraphicCheckoutButton[type="submit"]
{
}

fieldset.ResponsiveButton, fieldset.ResponsiveButtonRight
{
	max-width:146px;
	max-height:33px;
}

fieldset.ResponsiveButton, fieldset.ResponsiveButtonRight
{
	margin:0 auto;
}



input.AAAButton[type="submit"], input.AAAButton[type="submit"]

{
/*
	// These are the original sizes of the TCRM Graphics
	width:50px;
	height:50px;
	If the original graphic is 146 by 33 (Width by Height), you set the width to what is required in percentage terms, say 100% the padding bottom will the inverse of the aspect ratio.
	display:block;
*/
	border-width:0;
	width: 300%;
	height: 0;
	padding-bottom: 150%;
	background-size:200% 2000%; /* This is to oversize the image to cater for the hover and the multiple images*/
}


fieldset.AAAButton
{
/*
	max-width:50px;
	max-height:50px;
*/
}
/**************************** End of buttons **************************/

.group:after {
  content: "";
  display: table;
  clear: both;
}


div#PageWrapperLayer01, div#PageWrapperLayer01TOPBackground,div#PageWrapperLayer01BottomBackground, div#PageWrapperLayer01Footer,
div.ContentWrapper, div.ContentWrapperMaxWidth, div.ContentWrapperMinimumHeight
{
/*
	font-style:italic;
	font-size:.2em;
*/

}

div#PageWrapperLayer01,
div#PageWrapperLayer01TOPBackground,
div#PageWrapperLayer01BottomBackground,
div.ContentWrapper
{
/*
	max-width:100px; // This can limit the width of the site on very large monitors but should be used with caution
	max-width:1720px; 
	max-width:1920px; 
	The maximum width is currently https://www.extremetech.com/computing/189342-dell-unveils-5k-desktop-monitor-with-almost-2x-the-pixels-of-your-puny-4k-display
	
*/
	max-width:5120px;
	padding-bottom:200px;
}

div#PageWrapperLayer01
{
/*
*/
	margin:0 auto; /* This centres any divs within this wrapper */
}

div#PageWrapperLayer01
{
/*
*/
	position:relative;
	background:#e1bd78 url('/images/layout/designa/bodybackground.jpg') repeat center top; 
	color:#883a24;
		background-size:100% auto;
		-moz-background-size:100% auto;
		-webkit-background-size:100% auto;
}

/* Now we have a full width bar, this can be a repeating image or a scaled imaged */

div#PageWrapperLayer01TOPBackground
{
/*
	background-color:#444;
	background-image:
	    linear-gradient(
	      to right, 
		rgba(55,253,194,.05),
		rgba(55,253,194,.05) 5%,
		rgba(55,153,194,.05) 10%,
		rgba(55,153,194,.05) 90%,
		rgba(55,253,194,.05) 95%
	    );
*/
	position:absolute; /* These two commands force this div under and allows at the top of the page  */
	z-index:-1;
	top:0;
	/* Min-Width may break the mobile verification */
	width:100%;
	height:250px;
}

div.ContentWrapper
{
/*
	background-color:#666;
*/
	margin:0 auto;
}

div.ContentWrapperMinimumHeight
{
/*
	background-color:#888;
	background-color:red;
*/
}
div.ContentWrapperStandardPadding
{
/*
*/
	padding:0 2% 0 2%;
}
	

/* This is effectively if we need a full width block for an effect such as a layer slider. */
div.ContentWrapperMaxWidth,div.ContentWrapperMaxWidthWithoutPadding
{
/*
	background-color:#888;
	background:url('/images/layout/designa/ContentBackground.png');
	background-color:inherit; /*Background color of the inner boundary content 
	background-repeat: repeat-y;
	background-position:top center;
		background-size:contain;
		-moz-background-size:contain;
		-webkit-background-size:contain;
	
*/
		

	
	
}

div.ContentWrapperMaxWidth, div#PageWrapperLayer01Footer, div#PageWrapperLayer01FooterBar,div#OverallTopLineRow, div.ContentWrapperMaxWidthWithoutBackground, div#Footer
{
/*
*/	
	max-width:1200px;
	padding:0 30px 0 30px;
}


div.ContentWrapperMaxWidthWithoutPadding, div#HeaderBarLeftHomePageLink, div#HeaderBarRightHomePageLink
{
	max-width:1260px;
	padding:0 0 0 0;
}

div#PageWrapperLayer01BottomBackground
{
/*
	left:0;
*/
	position:absolute;
	bottom:0;
	width:100%;
	background-image:
	    linear-gradient(
	      to right, 
		rgba(55,253,194,.05),
		rgba(55,253,194,.05) 5%,
		rgba(55,153,194,.05) 10%,
		rgba(55,153,194,.05) 90%,
		rgba(55,253,194,.05) 95%
	    );
}

div#PageWrapperLayer01FooterBar a
{
/*
	color:blue;
*/
	color:black;
}


div#PageWrapperLayer01FooterBar
{
/*
*/
	margin:0 auto;
	background:url('/images/layout/designa/footerbarbackground.png');
		background-size:100% 100%;
		-moz-background-size:100% 100%;
		-webkit-background-size:100% 100%;
	background-repeat: no-repeat;
	background-position:bottom center;
	padding-top:20px;
	padding-bottom:20px;
}


div#PageWrapperLayer01Footer
{
/*
	background-color:#ccc;
*/	
	margin:0 auto;
}


/**************************** Responsive Section **************************/

/* This width is set as a system variable, it should match */

@media screen and (max-width: 950px) 
{
	/* Flash is turned off for anything below a full desktop */
	div#HeaderFlash, div#google_translate_element, div.addthis_toolbox
	{
		display:none;
		visibility:hidden;
	}
	li#MobileEcomerce
	{
		display:block;
	}
	
}



@media screen and (max-width: 600px) 
{
	#AccessibilityMenu
	{
		display:none;
	}
	#SocialMediaPanel
	{
		left:40%;
	}
}

@media screen and (max-width: 360px) 
{
	#AdminMiniMenu, #AccessibilityMenu, #LanguageBar, #HeaderMiniMenu , #LeftSideEmbeddedMenuBar, div.zoomtracker, #FooterBarMiddleColumn
	{
		display:none;
	}
}


/**************************** End of Responsive Section **************************/