div.Sub360WideDisplay
{
	display:inline;
}


/***
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
*/

html, Body /* This prevents and Iphone scrolling left to right */
{
	max-width:100%;
	overflow-x:hidden;
}


#Inner-Wrapper-depracated
{
/*
	position:relative;
	z-index:1;
*/
}


div#OverlayText
{
	font-size:22px;
	position: absolute;
	display:block;
	width:50%;
	padding-bottom:10%;
	height:0;
	margin-left:25%;
	background-color:black;
	color:red;
	text-align:center;
	z-index: 99 !important;
}

@media screen and (max-width: 480px) 
{
	div#OverlayText
	{
		font-size:18px;
		top:100px;
		width:90%;
		padding-bottom:50%;
		height:0;
		margin-left:5%;
	}
}




div#WhiteContent
{
	background-color:white;
	background:url('/images/layout/designa/WhiteContentBackground.png');
	background-repeat: repeat;
}

div#mainimage
{
	text-align:center;
	margin-bottom:-7px;
}

#BrowserVersionWarning
{
	position:fixed;
	z-index:9999;
	left:0;
	top:0;
	width:80%;
	padding:0 5% 0 5%;
	font-size:1.2em;
	line-height:1.4em;
}

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

div#ErrorAlertOuter, div#ErrorAlertOuter a
{
	top:0;
	text-align:center;
	font-family: verdana;
	font-size:14px;
	line-height:20px;

	text-shadow: none;
}

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

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


Body 
{
/*
    max-width:1920px;
    overflow-x:hidden;
*/
	border-style: solid;
	border-color:yellow; 
	border-width:0;
}

Body, h1,h2, h3, textarea
{
	font-family: "john-doe",sans-serif;
    
/*
	To test typekit font uncomment this
	font-family: "Caflisch Script Pro";
	To test for font check uncomment this
	font-family:  "Plexifont BV";
*/
	
	border-style:solid;
/*
	View in chrome to identify fonts, firefox does not display Wingdings
	font-family: 'Open Sans', sans-serif;
*/
  	margin:0;
	border:0;
}

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

h2
{
	font-size:1.2em;
}

#PageFooterDiv-deparacted
{
/*
	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:182px;
	margin-top:-182px;
	width: 100%;
}

p
{
	margin-bottom:0.5em;
}

img#SSLCertImage
{
	position:absolute;
	z-index:9999;
}

div#CookieInfo
{
    display:none;
}

div#JavascriptWarning,div#CookieInfo
{
    position:absolute;
    top:0;
    padding-top:1px;
    padding-bottom:2px;
    height:20px;
    width:100%;
    text-align:center;
    overflow:hidden;
    color:red;
    font-size:14px;
    background-color:#eee;
}    
div#JavascriptWarning
{
    z-index:99998;
}    
div#CookieInfo
{
    z-index:99999;
}

#OverallContent-depracated
{
/*
	This controls the minimum height of the page
	min-height:1500px;
*/
	border-width:0;
	border-style:solid;
	margin:0 auto; 
	max-width:980px;
	/* 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:1000;
	border-style: solid;
	margin:0 1.75% 0 1.75%;
	width:96.5%;
	float:left;
	margin-top:0;
	text-align:center;
}

#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:2%;
	padding-right:2%;
	width:96%;
	float:left;
}

#CrumbleTrail
{
	/* There are controls in stylefp*/
	padding-left:20px;
}

div#AdvertBar
{
	padding-left:1%;
	padding-right:1%;
	width:98%;
	text-align:center;
	clear:both;
}
div#AdvertBar img
{
	width:auto;
	max-height:90px;
	padding-right:5%;
	margin-bottom:15px;
}

@media screen and (min-width: 950px) 
{
	div#AdvertBar  img.LastImage
	{
		padding-right:inherit;
	}
	div#AdvertBar img
	{
		margin-bottom:inherit;
	}

}
#FooterBar-deparacted
{
	
/*
	background: url('/images/layout/footerbar.png') top left no-repeat;
*/
	border-style: solid;
	font-size:11px;
	padding-top:20px;
	height:202px;
	width:100%;
	clear:both;
}

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

#FooterBarLeftColumn
{
/*
*/
	float:left;
	width:5%;
}

#FooterBarMiddleColumn img
{
/*
*/
}

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

#FooterBarRightColumn
{
/*
*/
	float:right;
	width:5%;
}

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




#SocialMediaFooterPanel
{
	float:left;
}


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

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

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

.CustomerPageHeaderFormat, .CustomerPageHeaderFormat h1, h1,
div#OverallProductCategoryWrapper > div.IndividualProductCategoryWrapper > div.ProductCategoryTitle,
div#OverallProductWrapper > div.IndividualProductWrapper > div.ProductTitle
{
	display:block;
	font-weight:900;
	font-size:2.0em;
	line-height:1.6em;
	text-transform: uppercase;
/*	margin-bottom:5px; */
}

.CustomerPageSubHeaderFormat, .CustomerPageSubHeaderFormat h2, h2, h3
{
	font-weight:100;
	font-size:1.2em;
	line-height:1.4em;
/*
	margin-bottom:5px;
*/	
}
h3
{
	font-weight:100;
	font-size:1em;
	line-height:1.2em;	font-weight:lighter;
	display:inline;
}

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

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

#LeftSideMenuBar, #GenericWrapper, #RightSideMenuBar
{
	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;
/*	min-height:400px;
	height: auto !important;
*/
}

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

/* This is effectively a ul li indent */
#GenericWrapper ul li
{
	padding-left:5%;
}


#GenericWrapper ol
{
}



/*
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%;
}
*/
form#QuickContactFormRightSideMenu img.CaptchaImage
{
	padding-left:20%;
	padding-right:20%;
	width:60%;
	height:auto;
}

.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
{

/* at 980px this represents .2% so the padding must reduce by this much each side */
	border-width: 2px; 
	padding:10px 1.8% 10px 1.8%;
/*
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjM5JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjgyIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk2JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjA3Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	width:96%;
	border-radius: 25px; 
	-moz-border-radius: 25px; 
	-webkit-border-radius: 25px; 
	border-style: solid;
	border-color: #555;
	background: -moz-linear-gradient(45deg,  rgba(0,0,0,1) 39%, rgba(0,0,0,0.82) 50%, rgba(255,255,255,0.07) 96%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(linear, left bottom, right top, color-stop(39%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,0.82)), color-stop(96%,rgba(255,255,255,0.07)), color-stop(100%,rgba(255,255,255,0)));
	background: -webkit-linear-gradient(45deg,  rgba(0,0,0,1) 39%,rgba(0,0,0,0.82) 50%,rgba(255,255,255,0.07) 96%,rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(45deg,  rgba(0,0,0,1) 39%,rgba(0,0,0,0.82) 50%,rgba(255,255,255,0.07) 96%,rgba(255,255,255,0) 100%);
	background: -ms-linear-gradient(45deg,  rgba(0,0,0,1) 39%,rgba(0,0,0,0.82) 50%,rgba(255,255,255,0.07) 96%,rgba(255,255,255,0) 100%);
	background: linear-gradient(45deg,  rgba(0,0,0,1) 39%,rgba(0,0,0,0.82) 50%,rgba(255,255,255,0.07) 96%,rgba(255,255,255,0) 100%);
*/
}

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;
}


div#HeaderFlash
{
	position:absolute;
	top:53px;
	margin-left:1.747%;
}

div#HeaderBar
{
/*
*/
	position:relative;
	z-index:10;
	background:url('/images/layout/designa/headerbackground.png') top center no-repeat;
	background-repeat: no-repeat;
	background-color:transparent;
	background-position:top center;
		background-size:contain;
		-moz-background-size:contain;
		-webkit-background-size:contain;
	padding-top:9.2%;
	/* 980 wide 160 high, therefore padding-bottom is 160/980 in percentage. */
}

/*, div#MiddleHeaderFiller */

div#HeaderBarLeftHomePageLink, div#HeaderBarRightHomePageLink
{
	position:absolute;
	top:0;
	width:50%;
	max-height:100%;
	overflow:hidden;
}

div#HeaderBarLeftHomePageLink
{
	left:0;
}

div#HeaderBarRightHomePageLink
{
	right:0;
}

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

div#SocialMediaHeaderPanel, div#SocialMediaFooterPanel
{
/*
	background-color:red;
*/
	position:relative;
	z-index:9999;	
}

div#SocialMediaHeaderPanel
{
	position:absolute;
	top:120px;
	margin-left:44%;
	width:25%;
}

div#SocialMediaFooterPanel
{
	margin-top:0;
	width:100%;
	right:0;
}

div#OverallTopLineRow
{
/*
    height:50px;
    background-color:red;
*/
	top:-5px;
	position:absolute;
	z-index:9999;
	width:98%;
}

div#AccessibilityMenu, div#HeaderMiniMenu, div#LanguageBar
{
	position:relative;
}

div#AccessibilityMenu
{
	padding:0 2% 0 2%;
}

div#LanguageBar
{
/*
*/
	padding:0 1% 0 1%;
}

div#HeaderMiniMenu
{
	padding:0 1% 0 1%;
}



/* This css on this div need to be the same as the AdminMiniMenu div in admin.css */
/* div#AdminMiniMenu */
div#AccessibilityMenu, div#AdminMiniMenu
{
	float:left;
	margin-left:.5%;
}

p.adminnavtext
{
	font-family: Verdana, Geneva, sans-serif;
	font-size:12px;
	line-height:15px;
	text-shadow: 0 0 0 transparent;
	font-weight:600;
}


div#LanguageBar
{
}
div#HeaderMiniMenu, div#LanguageBar
{
    float:right;
}

div#MiddleHeaderFiller, div#AccessibilityMenu, div#HeaderBarLeftHomePageLink, div#SocialMediaHeaderPanel
{
	float:left;
}

form fieldset label#ChristianNameLabel,form fieldset input#ChristianName
{
	display:none;
}

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

span.VerticalHeaderMenuSpacer
{
    border-style:solid;
	border-color:#ffffff;
/*
	border-color:transparent;
*/    
	border-width:0 1px 0 0;
	margin-right:1px;
	margin-left:1px;
}



/*  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.pp {left:-1600%;}
.stretchysocialmediasmall .sprite.pp:hover {left:-1700%;}

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

.stretchysocialmediasmall .sprite.in {left:-2000%;}
.stretchysocialmediasmall .sprite.in:hover {left:-2100%;}

.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%;}
*/
div#SocialMediaHeaderPanel .stretchysocialmediasmall {width:7%; margin-right:2%;}
div#SocialMediaFooterPanel .stretchysocialmediasmall {width:27%; margin-right:12%;}

/*  End of social media icons */


form#ButtonPanel1
{
	background-color:green;
}

div#ButtonPanel2
{
	background-color:red;
}

div#ButtonPanel3
{
	background-color:blue;
}

/************** Start of buttons *******************************/

/************** Start of button sprite system *****************/

.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:400px;
}
/* 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 .sprite.oos {left:-2000%;}
.stretchybuttons .sprite.oos:hover {left:-2100%;}

.stretchybuttons .sprite.call {left:-2200%;}
.stretchybuttons .sprite.call:hover {left:-2300%;}

.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 .stretchybuttons {width:100%; margin-right:0;}

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

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

fieldset.customerchangepassword
{
/*
	background-color:yellow;
*/	
	margin-top:15px;
	margin-left:33%;
	width:66%;
	overflow:hidden;
}


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

fieldset.WhereWeAre
{
/*
	background-color:yellow;
*/	
	margin-top:10px;
	margin-bottom:10px;
	margin-left:20%;
	margin-right:20%;
	width:60%;
	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.customerlogin,fieldset.QuickBuy,fieldset.giftaid, 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;
	margin:0 auto;
}


form#TellAFriendForm > fieldset.requestaquoteform
{
	margin-left:20%;
}


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

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

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

fieldset.whereweare
{
/*
	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.QuickBuy .stretchybuttons {width:100%; margin-right:0;}

fieldset.QuickBuy
{
/*
	background-color:yellow;
*/	
	padding-left:40%;
	padding-right:40%;
	width:20%;
	padding-top:25px;
}

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

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


fieldset.ProductsFormAddtoCartButton .stretchybuttons,
fieldset.ProductsFormAddButton .stretchybuttons,
fieldset.ProductsFormCallButton .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 sprite system *****************/

/************** Start of css buttons *****************/


/* This section is now redundant */
/* 
form#ContactUsForm > fieldset.ContactUsFormSubmitButton
{
	background-color: #006ab2;
	text-align: center;
}
*/
form.Register > fieldset.ClickableButtons, 
form.MyDetails > fieldset.ClickableButtons,
form.customerloginform > fieldset.ClickableButtons
{
	outline-color:transparent;
}


fieldset.ClickableButtons { /* Containing fieldset must have a position value */
	clear:both;
	position:relative;
	background-color:#000;
/*	background-color:#f00; */
	width:75%;
	max-width:150px;
	margin:5px auto; /* This centres the fieldset in the container */
/*	
	border-radius: 50px 100px 50px 100px;
	-webkit-border-radius: 50px 100px 50px 100px;
	-moz-border-radius: 50px 100px 50px 100px;
*/
	border-width: 0;
	border-color:grey;
	border-style:solid;
	opacity: .9; /*workaround to make ClickableButtons in IE */
	filter: alpha(opacity=.5); /*workaround to make ClickableButtons in IE */
}

fieldset.ClickableButtons:hover {
	opacity: 1; /*workaround to make ClickableButtons in IE */
	filter: alpha(opacity=1); /*workaround to make ClickableButtons in IE */
}

fieldset.ClickableButtons a {
	display:block;
	font-size:1.4em;
	text-align:center;
	/* text-align:right; */
	padding:5px 5% 10px 5%;
	width:90%;
	height:100%;
	text-decoration:none; /* Makes sure the link   doesn't get underlined */
	z-index:10; /* raises anchor tag above everything else in div */
}

div#OverallProductCategoryWrapper fieldset.ClickableButtons > a
{
	color:#f39200;
	background-color:#ffffff;
	font-size:1.2em;
}

div#OverallProductCategoryWrapper fieldset.ClickableButtons > a::after {
    content: " -->";
}



fieldset.ClickableButtons a:hover {
	text-decoration:underline; /* Makes sure the link doesn't get underlined */
}

fieldset.ClickableButtons.LeftFieldSet, fieldset.ClickableButtons.RightFieldSet
{
	clear:none;
}

fieldset.ClickableButtons.RightFieldSet
{
	float:right;
}
fieldset.ClickableButtons.LeftFieldSet
{
	float:left;
}


/************** End of css buttons *****************/

/************** End of buttons  *****************/


/* This has to stay in the main style.css file, it is used in several places */
div#EmailSentConfirmationBox
{
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	top:200px;
	max-width:60%;
	padding:3%;
	z-index:15000;
	background-color:#EFEEEB;
	border-color:black;
	border-width:10px;
	border-style:solid;
	border-radius: 25px; 
	-moz-border-radius: 25px; 
	-webkit-border-radius: 25px; 
/*
	background-color:red;
*/
}




 /*****************  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-bottom: 10px;
	min-height: 50px;
	word-wrap: break-word;	
}
div#FPEmbeddedTweetsWrapper ul.tweet > li.tweet
{
	padding-left:15%;
}
.tweet-status
{
}

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


/**************************** Start Of Gift Aid **************************/


form#GiftAidForm 
{
	border-style: solid;
	border-width:0;
	padding:2%;
	width:70%;
	background-color:grey;
	margin-left:15%;
}

form#GiftAidForm input[type="radio"]
{
	border-style: outset;
	border-width:0;
    margin-left:100px;
}

form#GiftAidForm input[type="text"]
{
	border-style: solid;
	border-width:0;
	float:right;
	width:66%;
}

form#GiftAidForm input[type="checkbox"]
{
	border-style: solid;
	border-width:0;
}

form#GiftAidForm input[type="password"]
{
	border-style: solid;
	border-width:0;
	width:200px;
	margin-right:10px;
}

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

fieldset.giftaid
{
/*
	background-color:yellow;
*/	
	margin-left:40%;
	width:33%;
}

form#GiftAidForm fieldset.Captcha
{
	width:50%;
}

form#GiftAidForm fieldset.Captcha input[type="text"]
{
/*	border-width:1px; */
	float:left;
	width:48%;
	margin-right:2%;
	text-align:left;
	font-size:3em;
	height:100%;
}


form#GiftAidForm fieldset.Captcha img
{
	width:50%;
	height:auto;
	float:right;
}


form#GiftAidForm textarea
{
	border-style: solid;
	border-width:0;
	min-height:100px;
	width:100%;
}

/**************************** End Of Gift Aid **************************/





/**************************** CSS Characters **************************/
.right-arrow {
	display: inline-block;
	position: relative;
	float:right;
	padding: 0;
	right: 10%;
}
.right-arrow:after {
	content: '';
	display: block;  
	position: absolute;
	left: 100%;
	top: 50%;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid white;
}
/**************************** End of CSS Characters **************************/


/**************************** 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
{
	}

.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"]
{
	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;
*/

}

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 **************************/


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

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

@media screen and (max-width: 1023px) 
{
	/* Flash is turned off for anything below a full desktop */
	div#HeaderFlash, div#google_translate_element, div.addthis_toolbox
	{
		display:none;
		visibility:hidden;
	}
	div#AccessibilityMenu, div#HeaderMiniMenu, div#LanguageBar
	{
		/*
		*/
		font-size:.8em;
	}
	    
	li.MobileEcomerce
	{
		display:block;
	}
	#TopMenuBar
	{
		text-align:left;
	}	
}


@media screen and (max-width: 980px) 
{
	#FooterBarMiddleColumn
	{
		font-size:.6em;
	}
}

div#FooterBarMiddleColumnSplitEmail
{
	display:none;
}
@media screen and (max-width: 600px) 
{
	div#OverallTopLineRow
	{
		padding-left:unset;
	}
	span#FooterBarMiddleHideEmailText
	{
		display:none;
	}
	div#FooterBarMiddleColumnSplitEmail
	{
		display:block;
	}
	div#AccessibilityMenu
	{
		display:none;
	}
	#GenericWrapper a
	{
		word-break: break-all;	  /* This ensures the mobile view can split long email addresses accross lines */  
	}	
	img#SSLCertImage
	{
		position:fixed;
		z-index:9999;
		bottom:5px;
		left:5px;
	}
	.list_carousel {
		background-color: transparent;
	}
	div#HeaderBar
	{
	/*
	*/
		background:url('/images/layout/designa/HeaderBackground600.png') top center no-repeat;
		background-repeat: no-repeat;
		background-color:transparent;
		background-position:top center;
			background-size:contain;
			-moz-background-size:contain;
			-webkit-background-size:contain;
		padding-top:9.2%;
	}
	div#HeaderMiniMenu
	{
	    float:inherit;
	}
	
}
@media screen and (max-width: 360px) 
{
	#AdminMiniMenu, #AccessibilityMenu, #LanguageBar, #LeftSideEmbeddedMenuBar, div.zoomtracker,
	div#FooterBarRightColumn > div#SocialMediaFooterPanel
	{
		display:none;
	}
	
	div#AccessibilityMenu
	{
		padding:0 5% 0 2%;
		max-width:18%;
	}
	div#AboutUsColumnA, div#AboutUsColumnB
	{
		width:100%;
	}
	Body, h3
	{
		font-size:14px;
	}
	fieldset.ClickableButtons.LeftFieldSet, fieldset.ClickableButtons.RightFieldSet
	{
		max-width:124px;
	}
	
	fieldset.ClickableButtons a
	{
		font-size: 0.8em;
	}
  
	div#LanguageBar
	{
	/*
	*/
		padding:0 1% 0 1%;
		max-width:20%;
	}

	div.Sub360WideDisplay
	{
		display:none;
	}
	div#HeaderMiniMenu
	{
		padding:0 1% 0 1%;
		max-width:inherit;
	}
	div#OverallTopLineRow > div#HeaderMiniMenu
	{
		font-size:6px;
	}
	div#OverallTopLineRow > div#HeaderMiniMenu > span.VerticalHeaderMenuSpacer
	{
		display:none;
	}

	
	div#OverallTopLineRow
	{
		/*
		height:50px;
		background-color:red;
		*/
		/*  font-size:.6em; */
	}
	.RoundedBoxBackground
	{
	}
}


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

html
{
	background-color:inherit;
}

body
{
/*
	background-color:#fff !important;
	color:red !important;
*/
	margin-bottom:100px; /* This forces a bit of space under the body just to show the color of the html */

}

.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;
}

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

}

div#PageWrapperLayer01
{
/*
*/
	position:relative;
	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%
	    );	
}


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

div#PageWrapperLayer01TOPBackground
{
/*
	background-color:#444;
*/
	position:absolute; /* These two commands force this div under and allows at the top of the page  */
	z-index:-1;
	background-image:
	    linear-gradient(
	      to right, 
		rgba(0,0,0,.5),
		rgba(0,0,0,.5) 5%,
		rgba(0,0,0,.5) 10%,
		rgba(0,0,0,.5) 90%,
		rgba(0,0,0,.5) 95%
	    );
	width:100%;
	overflow:hidden;
	top:0;
	height:0;
	margin-top:6.05%;
	margin-top:116px;
	padding-bottom:2.3%;
	padding-bottom:60px;
	
	/* 9.21 */
	
	/* 116 */
	
	/* 62 */
	
}

div.ContentWrapper, div.AdminSection
{
/*
	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-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.AdminSection, div.ContentWrapperMaxWidthWithoutBackground
{
/*
*/	
	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#PageWrapperLayer01BottomBackgroundShim
{
/*
*/
	padding-bottom:216px;
}

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;
	height:176px;
}


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

@media screen and (max-width: 1260px) 
{
	div#PageWrapperLayer01TOPBackground
	{
		background:url('/images/layout/designa/footerbarbackground.png');
	}
	div#TopMenuBar
	{
		text-align:left;
		background-image:
		    linear-gradient(
		      to right, 
			rgba(0,0,0,.5),
			rgba(0,0,0,.5) 5%,
			rgba(0,0,0,.5) 10%,
			rgba(0,0,0,.5) 90%,
			rgba(0,0,0,.5) 95%
		    );
	}
}














































/*
Splash
*/

div#dhtmlwindowholder
{
	position:relative;
	z-index:99999;
}

.FrontPageSplash
{
	color:#001c4d;
	background-color:#ffffff;
	padding:10px 1% 10px 1%;
	font-weight:bold;
	height:auto;
}



.FrontPageSplash a
{
	color:red;
}

img.FrontPageSplash, .FrontPageSplash img
{
	float:right;
	margin-bottom:5px;
	width:25%;
	height:auto;
	margin-left:2%;
	border: 1px solid black;
}

.FrontPageSplash a:link,.FrontPageSplash a:visited
{
	color:#001c4d;
	text-decoration: none;
}

.FrontPageSplash a:hover
{
	background-color:#ffffff;
	text-decoration: underline;
}

.dhtmlwindow
{
	position: absolute;
	border: 5px solid black;
	visibility: hidden;
	background-color: white;
	margin: 0 auto;
	max-width:66%;
}

.drag-handle{ /*CSS for Drag Handle*/
padding: 1px;
text-indent: 3px;
font: bold 14px Arial;
background-color: #CA0000;
background-color: #001c4d;
color: white;
cursor: move;
overflow: hidden;
/* filter:progid:DXImageTransform.Microsoft.alpha(opacity=100); 
-moz-opacity: 1;
*/
opacity: 1;
}

.drag-handle .drag-controls{ /*CSS for controls (min, close etc) within Drag Handle*/
position: absolute;
right: 2px;
top: 2px;
/* 
cursor: hand;
*/
cursor: pointer;
}

* html .drag-handle{ /*IE6 and below CSS hack. Width must be set to 100% in order for opaque title bar to render*/
width: 100%;
}


.drag-contentarea{ /*CSS for Content Display Area div*/
border-top: 1px solid brown;
background-color: white;
color: black;
padding: 2px;
overflow: auto;
}

.drag-statusarea{ /*CSS for Status Bar div (includes resizearea)*/
border-top: 1px solid gray;
background-color: #F8F8F8;
height: 13px; /*height of resize image*/
}


.drag-resizearea{ /*CSS for Resize Area itself*/
float: right;
width: 13px; /*width of resize image*/
height: 13px; /*height of resize image*/
cursor: nw-resize;
font-size: 0;
}