div#FrontPageBlock01ColA
{
	width:47.5%;
	font-size:.5em;
	text-align: left;
	float:left;
}

div#FrontPageBlock01ColA img
{
	width:40%;
	height:auto;
	float:left;
	margin-left:20%;
	padding-top:20px;
}

div#FrontPageBlock01ColB
{
	width:47.5%;
	font-size:.5em;
	text-align: right;
	float:right;
}


div.FontAdjuster {
/*  text-align: justify; */
  text-align: center;
/*  font-size: 4.8vw;
  line-height: 4.8vw;
*/
  font-size: 2.5vw;
  line-height: 2.5vw;
  color:yellow;

}

div.FontAdjuster:after {
  content: "";
  display: inline-block;
  width: 100%;
}

div#PostagelabelBackground
{
/*
	position:relative;
	z-index:1;
*/	
	background:url('/images/layout/designa/PostagelabelBackground.png');
	background-color:white;
	background-repeat: no-repeat;
		background-size:100% 100%;
		-moz-background-size:100% 100%;
		-webkit-background-size:100% 100%;
	width:100%;
	margin-left:0;
	padding-left:0;
	padding-right:0;
	margin-top:0;
	padding-top:10px;
	padding-bottom:0;
	color:#1B1463;
	font-size:.6em;
	/* 980 wide 160 high, therefore padding-bottom is 160/980 in percentage. */
	
}

div#PostagelabelBackground img
{
	float:right;
	width:20%;
	height:auto;
}

div#FrontPageBlock01
{
	font-family: futura;
	font-size:3.14em;
	line-height:.8em;
/*	text-align:center; */
	color:yellow;
	background-color:inherit;
	padding-top:25px;
}

div#FrontPageBlock01 img#VivaPorthcawlImage
{
	float:right;
	width:49%;
	height:auto;
	margin-right:.5%;
	margin-left:.5%;
}

div#FrontPageBlock01 span.BlueText
{
	color:#37C1FB;
	font-size:.7em;
}

div#FrontPageBlock01 span.WhiteText
{
	color:white;
	font-size:.4em;
	line-height:.1em;
}

div#FrontPageBlock01 a.RedButton
{
	background-color:red;
	color:white;
	width:60%;
	padding:10px 5% 10px 5%;
	font-size:.3em;
	text-transform:uppercase;
}

div#FrontPageBlock01 a.RedButton:hover
{
	background-color:red;
	color:white;
	width:60%;
	cursor: pointer;
}

div#FrontPageBlock01 fieldset.RegisterButton a
{
	font-size:1em;
	width:100%;
	padding:5px 15% 5px 15%;
}

/* Single Group */

div#SingleGroupOverallContainer div.Inner div.Flag
{
	width:5%;
	float:right;
	margin-left:1%;
}
div#SingleGroupOverallContainer div.Inner div.Flag img
{
	width:100%;
	height:auto;
}

div#SingleGroupOverallContainer div.Inner div.Image
{
	width:33%;
	float:left;
	margin-right:1%;
}
div#SingleGroupOverallContainer div.Inner div.Image img
{
	width:100%;
	height:auto;
}

strong {
  font-weight: bold;
}

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

span.AdminLoginError
{
  text-stroke: .2px black;
  -webkit-text-stroke: .2px black;
  -moz-text-stroke: .2px black;
}


div.ContentVideoWrapperFloatLeft, div.ContentVideoWrapperFloatRight, div.ContentVideoWrapperFloatCenter
{
	height:auto;
	padding-bottom:5px;
	padding-top:10px;
}

div.ContentVideoWrapperWidthA, div.ContentVideoWrapperWidthA
{
	width:33%;
}

div.ContentVideoWrapperWidthB, div.ContentVideoWrapperWidthB
{
	width:26%;
}

div.ContentVideoWrapperCenter
{
	margin:0 auto;
}

div.ContentVideoWrapperFloatLeft
{
	padding-right:1%;
	float:left;
}

div.ContentVideoWrapperFloatRight
{
	padding-left:1%;
	float:right;
}

div.ContentVideoWrapper
{
}


div#bd-wrapper.ng-scope > div#Controls > div#text-wrapper > textarea,
div#bd-wrapper.ng-scope > div#Controls > div#text-wrapper > textarea
{
	width:95%;
}
div#bd-wrapper.ng-scope > div#canvas-wrapper > div.canvas-container > canvas.upper-canvas
{
	float:left;
	width:22%;
}


div#bd-wrapper.ng-scope > div#Controls > div#AdvancedImageControls > div#commands > ul.nav.nav-tabs > li
{
	width:50%;
	float:left;
}

div#bd-wrapper.ng-scope > div#Controls
{
	width:48%;
	padding:10px 1% 10px 1%;
	float:right;
}

div#bd-wrapper.ng-scope > div#canvas-wrapper > div.canvas-container > canvas.upper-canvas,
html > body.ng-scope > div#PageWrapperLayer01 > div.GenericWrapper.ContentWrapper.ContentWrapperMaxWidth > div#bd-wrapper.ng-scope > div#StandardControls
{
}

div#bd-wrapper.ng-scope > div#text-wrapper
{
	float:left;
	max-width:30%;
	
}

div#bd-wrapper.ng-scope > div#canvas-wrapper > div.canvas-container > canvas.upper-canvas,
div#bd-wrapper.ng-scope > div#Controls
{
	
	outline-color:blue;
	outline-width:1px;
	outline-style:solid;
}

div#bd-wrapper.ng-scope > div#canvas-wrapper > fieldset.ClickableButtons > a.null:hover
{
	color:inherit!important;
	color:#a3bf2a!important; /* This is to overide the style in the kithcen sink */
	
/*	background-color:#5bb75b; */
}

div#bd-wrapper.ng-scope > div#Controls > div#StandardControls > input#rasterize,
div#bd-wrapper.ng-scope > div#Controls > div#StandardControls > button#Addtext.btn,
div#bd-wrapper.ng-scope > div#Controls > div#StandardControls > div.object-controls > button#DeleteObjectButton,
div#bd-wrapper.ng-scope > div#Controls > div#StandardControls > button#ClearCanvasButton,
div#bd-wrapper.ng-scope > div#Controls > div#StandardControls > input#imgLoader
{
	float:right;
}

div#bd-wrapper.ng-scope > div#Controls > div#StandardControls > input#imgLoader
{
	width:24%;
	margin-right:-2%;
}

div#bd-wrapper.ng-scope > div#Controls > div#StandardControls > input#rasterize,
div#bd-wrapper.ng-scope > div#Controls > div#StandardControls > button#Addtext.btn,
div#bd-wrapper.ng-scope > div#Controls > div#StandardControls > div.object-controls > button#DeleteObjectButton,
div#bd-wrapper.ng-scope > div#Controls > div#StandardControls > button#ClearCanvasButton,
div#bd-wrapper.ng-scope > div#Controls > div#StandardControls > input#imgLoader
{
	width:48% !important;
	padding-left:2%;
	padding-right:2%;
}

div#bd-wrapper.ng-scope > div#StandardControls > input#imgLoader, div#bd-wrapper.ng-scope > div#StandardControls > input#imgLoader label
{
}

button#rasterize,
div#AdvancedImageControls,
div#AdvancedTextControls,
div#bd-wrapper.ng-scope > div#AdvancedImageControls
{
	display:none; 
}

/*
End of Customised Area
*/

div#xmasdivanimate
{
	background-color:red;
	width:100px;
	height:100px;
	position:absolute;
	z-index:99999;
}
html, Body /* This prevents and Iphone scrolling left to right */
{
	/* If you want to use negative z-index elements you must position the html and body */
	position:relative;
	max-width:100%;
	overflow-x:hidden;
}

body
{
	overflow-y:hidden; /* Thjis stop both an html and body scroll */
}

#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, div#EUcookiewarning > div#EUcookiewarningColumn1 > input.EUcookiewarningbuttons
{
/*
	View in chrome to identify fonts, firefox does not display some including Wingdings
	font-family: 'Open Sans', sans-serif;

	To test typekit font uncomment one of these, the final one is good to prove typekit loads

	font-family: Wingdings;
	font-family: "proxima-nova",helvetica;
	font-family: "proxima-nova","Brush Script MT";

*/
	border-style:solid;

    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: Helvetica, Arial, sans-serif;
	/*
	font-family: "proxima-nova",Wingdings,script,"merriweather";
	font-family: "al-fresco",Wingdings,script,"merriweather";
	font-family: alana,Wingdings,script,"merriweather";
	font-weight:100;
*/
}	


div#NoTypeKitOrGoogleFont, div#TypeKitFont, div#GoogleFont
{
	color:red;
	font-size:18px;
}
div#TypeKitFont, div#GoogleFont
{
/*
*/	
	font-family: proxima-nova,"Comic Sans MS",wingdings,script;
}


Body, h3
{
/*
	font-size:9pt; equivalent to 12px
*/
	font-size:18px;
	line-height:1.3em;
}

h1
{
	font-size:1.4em;
}

h2
{
	font-size:1.2em;
}

h3
{
	font-size:1em;
}

	p
{
	margin-bottom:0.5em;
}

img#SSLCertImage
{
	position:absolute;
}

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

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

#TopMenuBar
{
/*	display:none; */
}	

#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
{
	position:relative;
	float:left;
	padding-left:0;
	padding-right:2%;
	width:45%;
/*	background-color:red; */
}

div#AdvertBar img
{
	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;
	}

}


div#FooterBarBCBCArea
{
/*
	background: url('/images/layout/footerbar.png') top left no-repeat;
*/
	font-size:1.0em;
	width:50%;
	float:left;
}

div#FooterBarBCBCArea img
{
	margin-top:10px;
	width:15%;
	margin-right:85%;
	height:auto;
	clear:both;
}

div#FooterBarLinksArea
{
	font-size:2.0em;
	width:45%;
	float:right;
}

div#FooterBarLinksArea a
{
	position:relative;
	top:10px;
	color:white;
	font-size:.5em;
}
div#FooterBarLinksArea .VerticalHeaderMenuSpacer
{
	position:relative;
	top:10px;
	margin:0;
	font-size:.5em;	
}


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

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

#FooterBarMiddleColumn img
{
/*
*/
}

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

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

div#Footer 
{
/*
	This will center the footer;
	margin:0 auto; 
*/
	border-style: solid;
	font-size:9px;
	line-height:1.2em;
	padding-top:10px;
}




#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
{
	display:block;
	font-weight:900;
	font-size:1.2em;
	line-height:2.4em;
/*	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;
}


#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: url(../../images/layout/designa/UL-MainImage.png) disc;
}

.GenericWrapper ul,
.GenericWrapper ol
{
/*
	list-style-position:outside;
*/
	list-style-position:inside;
}

.GenericWrapper ol
{
    display: block;
    list-style-type: decimal;
}

/* This is effectively a ul li indent */
.GenericWrapper ol,
.GenericWrapper ul
{
    margin-bottom: .3em;
    margin-left: 5%;
    margin-right: 0;
}



/*
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%;
}
*/


div#FooterBarBCBCArea, div#FooterBarLinksArea
{
	padding-top:50px;
	padding-bottom:20px;
}

div#FooterBarBCBCArea
{
/*
	background: url('/images/layout/footerbar.png') top left no-repeat;
*/
	font-size:2.0em;
	width:50%;
	float:left;
}
div#FooterBarBCBCArea img
{
	margin-top:10px;
	width:15%;
	margin-right:85%;
	height:auto;
	clear:both;
}

div#FooterBarLinksArea
{
	font-size:2.0em;
	width:46%;
	float:right;
}

div#FooterBarLinksArea a
{
	position:relative;
	top:10px;
	color:white;
	font-size:.5em;
}
div#FooterBarLinksArea .VerticalHeaderMenuSpacer
{
	position:relative;
	top:10px;
	margin:0;
	font-size:.5em;	
}

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 label
{
	width:25%;
	float:left;
}

.QuickContactForm input[type="text"]
{
	width:70%;
}

.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;
	z-index:-1;
        top:27%;
	margin-left:3%;
	background:url('/media/flash/TCRM-arm.gif');
		background-size:cover;
		-moz-background-size:cover;
		-webkit-background-size:cover;
	background-repeat: no-repeat;
	background-position:top center;
	width:25%;
        height:65%;
}


.aaa
{
		background-size:contain;
		-moz-background-size:contain;
		-webkit-background-size:contain;         
}

div#HeaderBar
{
/*
*/
	position:relative;
	z-index:1;
	background:url('/images/layout/designa/HeaderBackground.png');
	background-repeat: no-repeat;
	background-position:center 35px;
		background-size:contain;
		-moz-background-size:contain;
		-webkit-background-size:contain;
	padding-top:29.27%;
	padding-bottom:40px;
	/* 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#OverallTopLineRow
{
/*
    height:50px;
    background-color:red;
*/
	position:relative;
	top:10px;
	z-index:9999;
	width:42%;
	z-index:9999;
	float:right;
}

div#HeaderMiniMenu
{
	float:right;
}

div#SocialMediaHeaderPanel
{
	position:absolute;
	top:10px;
	z-index:9999;
	width:70%;
	float:left;
	margin-left:3%;
}

div#SocialMediaHeaderPanel img
{
	margin-right:3%;
}

div#HeaderBarText
{
	position:relative;
	top:5px;
	width:70%;
	float:left;
}


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



div#AccessibilityMenu, div#HeaderMiniMenu, div#LanguageBar
{
	position:relative;
	font-size:1em;
}

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

div#LanguageBar
{
/*
*/
	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
{
	position:relative;
	left:0;
	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#HeaderMiniMenu, div#LanguageBar
{
    float:right;
}

div#HeaderMiniMenu
{
	padding:0 1% 0 1%;
	max-width:98%;
}

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


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

/*  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:30%;
	padding-right:0;
	width:40%;
}

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 */
/************** 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:black;
	border-color:white;
	border-width:10px;
	border-style:solid;
	border-radius: 25px; 
	-moz-border-radius: 25px; 
	-webkit-border-radius: 25px; 
/*
	background-color:red;
*/
}

div#EmailSentConfirmationBox
{
	color:white;
	background: #000;
}

div#EmailSentConfirmationBox > span:hover
{
	text-decoration:underline; /* Makes sure the link doesn't get underlined */
}

div#EmailSentConfirmationBox div#CloseBox
{
    float:right;
    margin-top:-40px;
    margin-right:-40px;
    cursor:pointer;
    color: #fff;
    border: 1px solid #AEAEAE;
    border-radius: 30px;
/*    background-color: #ff0000; */
    font-size: 31px;
    font-weight: bold;
    display: inline-block;
    line-height: 0px;
    padding: 11px 3px;       
}

div#EmailSentConfirmationBox div#CloseBox:before {
    content: "×";
}

 /*****************  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;	
}
ul.tweet > li.tweet
{
	padding-left:10%;
}
.tweet-status, .tweet-details
{
	padding-left:5%;
}


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


html
{
	background-color:inherit; /*Background color of the total page */
}

body
{
/*
	background-color:#fff !important;
	color:red !important;
	background-color:#00f !important;
*/
	background-color:#00f; /*Background color of the total body */
	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;
	padding-bottom:0;
}

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

div#PageWrapperLayer01
{
/*
*/
	position:relative;
}

/* 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;
	top:0;
	width:100%;
	height:250px;
}

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


div.ContentWrapper
{
	background-color:#1b1464;
	border-style: solid;
	border-color: red;
	border-width: 0 5px 0 5px;
}

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-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:920px;
	padding:0 30px 0 30px;
}


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

div#PageWrapperLayer01BottomBackground
{
/*
	left:0;
*/
	position:absolute;
	bottom:0;
	width:100%;
}

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


div#PageWrapperLayer01FooterBar
{
/*
*/
	
	margin:0 auto;
	background-position:bottom center;
	padding-bottom:10px;
}


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

div#PageWrapperLayer01 div.ContentWrapper.group.ContentWrapperMaxWidthWithoutPadding div#OverallTopLineRow div#HeaderMiniMenu
{
	display:none;
}

div#HeaderMiniMenu
{
	position:absolute;
	display:inline;
	top:0;
	right:-39%;
}

div.ContentWrapperMaxWidth
{
	padding-top:10px;
}


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

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

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

}

@media screen and (max-width: 768px) 
{
	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;
	}
	div#SocialMediaHeaderPanel
	{
		top:100px;
	}
	
	div#FrontPageBlock01ColA
	{
		width:100%;
		font-size:.4em;
		line-height:1.2em;
		text-align: center;
		float:inherit;
	}
	div#FrontPageBlock01ColB
	{
		width:100%;
		font-size:.5em;
		text-align: right;
		float:right;
	}
	div.FontAdjuster {
	/*  text-align: justify; */
	  font-size: .4em;
	  line-height: 1.2em;
	*/
	}
	
	
}

@media screen and (max-width: 460px) 
{
	div#PageWrapperLayer01
	{
	/*
	*/
		margin-top:15px;
	}
	div#OverallTopLineRow
	{
		margin-top:-15px;
	}

	#AdminMiniMenu, #AccessibilityMenu, #LanguageBar, #LeftSideEmbeddedMenuBar, div.zoomtracker, #FooterBarMiddleColumn
	{
		display:none;
	}
	
	div#AccessibilityMenu
	{
		padding:0 5% 0 2%;
		max-width:18%;
	}

	div#LanguageBar
	{
	/*
	*/
		padding:0 1% 0 1%;
		max-width:20%;
	}

	div#HeaderMiniMenu
	{
		max-width:47%;
	}

	
	div.ContentWrapperMaxWidth, div#PageWrapperLayer01Footer, div#PageWrapperLayer01FooterBar,div#OverallTopLineRow, div.ContentWrapperMaxWidthWithoutBackground, div#Footer
	{
	/*
	*/	
		padding:0 10px 0 10px;
	}
	
	div#OverallTopLineRow
	{
	/*
	height:50px;
	background-color:red;
	*/
	/*  font-size:.6em; */
	}
	.RoundedBoxBackground
	{
		width:96%;
		padding:10px 2% 10px 2%;
		border-radius: 10px; 
		-moz-border-radius: 10px; 
		-webkit-border-radius: 10px; 
		border-width: 2px; /* at 360px this represents .55% so the padding must reduce by this much each side */
	}

	div#SocialMediaHeaderPanel
	{
		display:none;
	}

	fieldset.ClickableButtons { /* Containing fieldset must have a position value */
	/*	background-color:#f00; */
		max-width:130px;
	}

	form#ProductFormSearch > fieldset > select#Parent_Category_ID > option,
	form#ProductFormSearch > fieldset > select
	{
		max-width:160px;
	}
	
}

@media screen and (max-width: 320px) 
{
	div.ContentWrapperMaxWidth, div#PageWrapperLayer01Footer, div#PageWrapperLayer01FooterBar,div#OverallTopLineRow, div.AdminSection, div.ContentWrapperMaxWidthWithoutBackground
	{
	/*
	*/	
		max-width:300px;
		padding:0 10px 0 10px;
	}
}


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

html > body > div#PageWrapperLayer01 > div#PageWrapperLayer01BottomBackgroundShim.ContentWrapper.group.ContentWrapperMaxWidth
{
	padding-bottom:320px;
}

div#PageWrapperLayer01BottomBackgroundShim
{
/*
*/
	padding-bottom:280px;
}

html > body > div#PageWrapperLayer01 > div#PageWrapperLayer01BottomBackground > div#PageWrapperLayer01FooterBar.group
{
	text-align:center;
}
html > body > div#PageWrapperLayer01 > div#PageWrapperLayer01BottomBackground > div#PageWrapperLayer01FooterBar.group > img
{
	width:20%;
	margin-right:1%;
	height:auto;
	margin-bottom:5px;
	max-height:90px;
}


div#FooterBarLinksArea
{
	color:white;
}

div#FooterBarLinksArea a
{
	position:relative;
	color:white;
	top:10px;
	font-size:.3em;
}


div#FullWidth2024SarasPanel
{
	background:url('/images/layout/designa/FrontPage2024.png');
	background-size: cover;
	
	color:white;
	width:106.2%;
	margin-left:-3.1%;
	padding-bottom:55%;
}
div#FullWidth2025SarasPanel
{
/*	background:url('/immages/layout/designa/FrontPage2025.png'); 
	background:url('/images/layout/designa/FrontPage2026.png');*/
	background:url('/images/layout/designa/FrontPage2025.png');
	background:url('/images/layout/designa/elvis-hero-image-blue.jpg'); 

	background-size: cover;
	
	color:white;
	width:106.2%;
	margin-left:-3.1%;
	padding-bottom:55%;
}
/*
div#FullWidth2025SarasPanel img
{
	width:106.5%;
	height:auto;
	margin-left:-3.3%;
	margin-bottom:-13.3%;
}
*/

div#FullWidth2024CountdownPanel
{
	width:106.2%;
	margin-left:-3.1%;
	padding-bottom:55px;
	height:60px;
/*	background-color:#A69446; */
	background-color:#000000;
}
div#FullWidth2024CountdownPanelImg
{
	background:url('/images/layout/designa/FrontPage2024-Countdown-01.png');
	background-size: cover;
	color:white;
	width:106.2%;
	margin-left:-3.1%;
	padding-top:0;
	padding-bottom:7%;
/*	background-color:#A69446; */
	background-color:#000000;
}

img#ElvisBayDayImage
{
	width:106.2%;
	margin-left:-3.1%;
	padding-top:0;
	padding-bottom:7%;
	height:auto;
}




div#FPFacebookImage2024
{
	width:91.2%;
	margin-left:-3.1%;
	display: block;
	margin: auto;
	text-align: center;
	font-size:.5em;
}
div#FPFacebookImage2024 img
{
	width:7%;
	height:auto;
}

div#FrontPageBlock032024
{
	padding-left:17%;
	width:67.5%;
	font-size:.8em;
	text-align: center;
	padding-top:5px;
}

div#FrontPageBlock032024 h2
{
	text-align:center;
	padding-top:10px;
	padding-bottom:10px;
	font-size:1.8em;
	color:white;
}

div#PostagelabelBackground2024
{
/*
	position:relative;
	z-index:1;
*/	
	background:url('/images/layout/designa/PostagelabelBackground.png');
	background-color:white;
	background-repeat: no-repeat;
		background-size:100% 100%;
		-moz-background-size:100% 100%;
		-webkit-background-size:100% 100%;
	width:100%;
	margin-left:0;
	padding-left:0;
	padding-right:0;
	margin-top:0;
	padding-bottom:50px;
	color:#1B1463;
	font-size:.8em;
	/* 980 wide 160 high, therefore padding-bottom is 160/980 in percentage. */
	
}

div#PostagelabelBackground2024 img
{
	float:right;
	width:15%;
	padding-right:3%;
	height:auto;
	margin-top:-50px;;
}
div#PostagelabelBackground2024 form
{
}

div#PostagelabelBackground2024 form input
{
		width:70%;
		float:left;
		margin-left:11%;
		padding:11px 0 11px 0;
}

div#PostagelabelText2024
{
	width:100%;
	padding-left:9%;
	padding-top:50px;
	text-align:left;
	font-size:1.8em;
	font-weight:bold;
}

div#FrontPageBlock032024 a.RedButton
{
	display:block;
	width:40%;
	background-color:red;
	color:white;
	font-weight:bold;
	margin:auto;
	text-align:center;
	font-size:1.2em;
	padding:5px 5% 5px 5%;
}

fieldset.RegisterButton
{
		margin-left:-3%;
		width:50%;
}

@media screen and (max-width: 768px) 
{
	div#FullWidth2024SarasPanel
	{
		background-size: contain;
		width:106.2%;
		margin-left:-3.1%;
		background-repeat:no-repeat;
		padding-bottom:52%;
	}

	div#FullWidth2024CountdownPanelImg
	{
		background-size: contain;
		color:white;
		width:106.2%;
		margin-left:-3.1%;
		background-repeat:no-repeat;
		padding-bottom:3%;
		background-color:#A69446;
	}

	div#FullWidth2024CountdownPanel
	{
		font-size:.5em;
		height:50px;	}

	div#FrontPageBlock032024 a.RedButton
	{
		font-size:.6em;
	}
	div#PostagelabelText2024
	{
		font-size:1.2em;
	}
}