/* Minification failed. Returning unminified contents.
(2069,72): run-time error CSS1035: Expected colon, found ';'
 */
/* Normalize.css   http://necolas.github.io/normalize.css/2.1.3/normalize.css
Use this in preference to the classic 'reset' options http://www.cssreset.com/which-css-reset-should-i-use/ as it is lighter and less confusing/easier to analyse.  
===================== */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
audio:not([controls]) { display: none; height: 0; }
[hidden], template { display: none; }

html { font-family: 'Montserrat', Sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; }

a { background: transparent; }
	a:focus { outline: thin dotted; }
	a:active, a:hover { outline: 0; }

h1 { font-size: 2em; margin: 0.67em 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
dfn { font-style: italic; }
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }
mark { background: #ff0; color: #000; }
code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; }
pre { white-space: pre-wrap; }
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

img { border: 0; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }

fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend { border: 0; padding: 0; }
button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; }
button, input { line-height: normal; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
	button[disabled], html input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
	input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; }

table { border-collapse: collapse; border-spacing: 0; }

/* HTML tags the streamSWEET way
===================== */
body { font-size: 17x; line-height: 27px; font-weight: 300; color: #000; margin: 0; background-color: #e9eaea; }

p { margin: 2px 0 22px 0; }

h1 { font-size: 42px; line-height: 48px; color: #000; margin: 0 0 32px 0px; position: relative; padding-bottom: 15px; }
	h1:after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 37px; height: 2px; background: #00953b; }
h2 { font-size: 32px; line-height: 40px; color: #000; margin: 34px 0px 20px 0px; position: relative; padding-bottom: 15px; }
	h2:after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 37px; height: 2px; background: #00953b; }
h3 { font-size: 24px; line-height: 28px; font-weight: 700; color: #000; margin: 22px 0px 18px 0px; }
h4 { font-size: 18px; line-height: 24px; font-weight: 700; color: #000; margin: 20px 0px 12px 0px; }
h5 { font-size: 14px; line-height: 16px; font-weight: bold; color: #000; margin: 10px 0px 12px 0px; }
h6 { font-size: 13px; line-height: 16px; font-weight: bold; color: #000; margin: 10px 0px 12px 0px; }

blockquote { quotes: none; font-style: italic; }

hr { border-top-width: 2px; border-top-style: solid; border-right-style: none; border-bottom-style: none; border-left-style: none; border-top-color: #eaeaea; margin-right: 0px; margin-left: 0px; }
img { border: 0; display: block; max-width: 100%; height: auto; width: auto\9; /* ie8 */ }

a { margin: 0; padding: 0; font-size: 100%; font: inherit; vertical-align: baseline; background: transparent; }
	a:link, a:visited { color: #00953b; text-decoration: none; }
	a:active, a:hover, a:focus { color: #f60; text-decoration: none; }

/* For this site */

/* Home */
.ShellHome { position: relative; }
.ShellHomeInner { background: rgba(255,255,255,.9); padding: 60px 40px; position: relative; top: -30px; }
/* Move content over the top of the Hero */
.HomeLeadText { margin: 0; color: #00953b; font-size: 24px; }

/* Home - About */
.HomeAbout { overflow: hidden; background-color: #fff; position: relative; margin-top: 60px; }
.HomeAboutCol1 { float: left; width: 35%; display: block; }
	.HomeAboutCol1 article { width: 80%; margin: 8% auto; }
.HomeAboutCol2 { float: left; width: 65%; background: url(/assets/images/shiny_metal.jpg) no-repeat; position: relative; min-height: 480px; }

/* Home - Recycling */
.HomeRecycling { overflow: hidden; background-color: #000; position: relative; }
.HomeRecyclingCol1 { float: left; width: 65%; background: url(/assets/images/background_copper_pipe.jpg) no-repeat; background-size: cover; position: relative; min-height: 480px; }
/* Image */
.HomeRecyclingCol2 article { width: 80%; margin: 8% auto; }
.HomeRecyclingCol2 { float: left; width: 35%; color: #fff; display: block; }
	/* Content */
	.HomeRecyclingCol2 h2 { color: #fff; }
.HomeRecyclingColWide { float: left; width: 100%; background: url(/assets/images/background_copper_pipe.jpg) no-repeat; background-size: cover; position: relative; min-height: 480px; display: none; }
/* Hidden Image Panel */


.GreenButton { background-color: #00953b; text-align: center; padding: 10px 25px; font-weight: bold; font-size: 17px; }
a.GreenButton:link, a.GreenButton:visited { color: #fff; text-decoration: none; }
a.GreenButton:hover, a.GreenButton:active { color: #000; text-decoration: none; }

.BlackButton { background-color: #000; text-align: center; padding: 10px 45px; font-weight: bold; font-size: 17px; margin: 30px 0; display: block; border-radius: 3px; }
a.BlackButton:link, a.BlackButton:visited { color: #fff; text-decoration: none; }
a.BlackButton:hover, a.BlackButton:active { color: #ccc; text-decoration: none; }

/* FEATURE TABLE */
.TableMemberType { margin-bottom: 20px; line-height: 1.5; border: 1px solid #bdbebf; background-color: #FAFAFA; }
	.TableMemberType th { background-color: #00953b; font-weight: 300; color: #fff; padding: 10px; }
	.TableMemberType tr { border-bottom: 1px solid #bdbebf; }
		.TableMemberType tr:hover { background-color: #e9eaea; }
	.TableMemberType td { font-size: 14px; padding: 8px; /*vertical-align:top;*/ }
.TableMemberTypeSubHead { color: #939598; font-weight: bold; }

.GreyBox { background-color: #e9eaea; }


/* streamSWEET additional Fonts 
===================== */
.TextStd { }
.TextEmphasis { color: #999; font-style: italic; }
.TextBold { font-weight: bold; }
.TextSml1 { font-size: 12px; color: #666; line-height: 14px; }
.TextSml2 { font-size: 11px; color: #999; }
.TextLarge { font-size: 18px; }
.TextQuote { font-size: 16px; font-weight: bold; color: #4898d4; line-height: 22px; font-style: italic; }
.TextLabel { font-size: 12px; color: #777 !important; vertical-align: top; }
.TextInstruct { font-size: 12px; color: #999; font-style: italic; }
.TextNoData { color: #999; padding: 20px 5px 10px 5px; display: block; }

.TextTime { font-weight: normal; }
.TextDate { font-weight: bold; }

/* Font - Legacy Support until replaced throughout the code.  Meantime manually align with h1 h2 etc tags above and text classes used above.
===================== */
.Head1 { font-size: 36px; line-height: 42px; color: #384f7b; }
.Head2 { font-size: 28px; line-height: 36px; color: #333; }
.Head3 { font-size: 20px; line-height: 28px; color: #384f7b; }
.Head4 { font-size: 14px; line-height: 18px; color: #3182e0; }
.Text1 { font-size: 12px; color: #000; }
.Text2 { font-size: 12px; color: #999; }
.Text3 { font-size: 12px; color: #999; font-style: italic; }

.TextStrong { font-weight: bold; }

/* ======================================================================================== */
/* ======================================================================================== */
/* Template Layout */
/* ======================================================================================== */
/* ======================================================================================== */

/* First level full screen width horizontal containers for each logical section of content. Set vertical padding, background colours/images, height (if explicit) */
.ShellUserDetail { padding: 0 0; background-color: #00953b; color: #fff; }
.ShellLogoMenuHome { padding: 8px 0; background-color: #fff; z-index: 1000; height: 110px; transition: all 0.3s; }
.ShellLogoMenu { padding: 8px 0; background-color: #fff; z-index: 1000; height: 110px; transition: all 0.3s; }
.ShellLogoBanner { padding: 8px 0; background-color: #fff; z-index: 1000; height: 110px; transition: all 0.3s; }
.ShellMenu { padding: 0 0; background-color: #e3e3e3; height: 110px; }
.ShellHero { padding: 0; background-color: #00953b; }
.ShellContentStd { padding: 80px 0 80px 0; min-height: 500px; }
.ShellFooter { padding: 50px 0; background-color: #00953b; }
.ShellBottom { padding: 10px 0; background-color: #008c38; color: #82d8a4; }

/* Second level container, nested within each logical section of the page per above. Set horizontal alignment, usable width and position (to give an anchor for nested elements with position handling). */
.SectionWrapper { margin: 0 auto; position: relative; max-width: 1380px; width: 96%; }

/* Template specific layout handlers */

/* Home 
===================== */
.hContent1 { width: 90%; padding: 0; background-color: #fff; text-align: left; vertical-align: top; margin-left: auto; margin-right: auto; }
/* Content 1 */
.hContent2 { padding: 0px 0px 20px 0; text-align: left; vertical-align: top; }
/* Content 2 */

/* Content - Standard
===================== */
.cNavSub { padding: 0px 0px 5px 0px; vertical-align: top; }
.cContent1 { width: 90%; padding: 5%; background-color: #fff; text-align: left; vertical-align: top; margin-left: auto; margin-right: auto; }
/* Content 1 */
.cContent2 { padding: 20px 0; text-align: left; vertical-align: top; }
/* Content 2 */

/* Container for User Login Text/Name*/
.cLogin { float: right; padding: 0 24px; margin: 10px; font-weight: 300; font-size: 13px; }
	.cLogin a:link, .cLogin a:visited { color: #fff; text-decoration: none; }
	.cLogin a:hover, .cLogin a:active { color: #000; text-decoration: none; }
/* Container for basket */
.cBasket { margin: 5px 50px 0 0; float: right; color: #666; font-weight: 300; font-size: 13px; }
	.cBasket a:link, .cBasket a:visited { color: #fff; text-decoration: none; text-align: right; }
	.cBasket a:hover, .cBasket a:active { text-decoration: none; color: #000 }

.BasketIcon { float: left; padding: 8px 6px; }
.BasketCount { float: left; padding-top: 9px; line-height: normal; }

/* Footer
===================== */
.FooterText { font-size: 9px; color: #666; line-height: 15px; }
	.FooterText a:link, .FooterText a:visited { color: #666; text-decoration: underline; }
	.FooterText a:hover, .FooterText a:active { color: #f60; text-decoration: underline; }

/* Custom Footer Navigation */
/*  GRID OF FOUR  */
.span_1_of_4Footer { width: 23.8%; }

.FooterNavText { color: #fff; font-size: 14px; line-height: 24px; font-weight: 200; }
	.FooterNavText a:link, .FooterNavText a:visited { color: #fff; text-decoration: none; }
	.FooterNavText a:hover, .FooterNavText a:active { color: #fff; text-decoration: underline; }
.ShellFooter hr { border-top-width: 2px; border-top-style: solid; border-right-style: none; border-bottom-style: none; border-left-style: none; border-top-color: #a7a7a7; margin-right: 0px; margin-left: 0px; }
.ShellFooter h2 { font-weight: bold; font-size: 32px; line-height: 36px; margin-bottom: 20px; }

.FooterSocialIcons { float: right; margin: 5px; }
.FooterTextRight { text-align: right; }
.ShellBottom h3 { font-size: 40px; line-height: 42px; font-weight: 700; color: #82d8a4; }
.ShellBottom p { margin-top: 30px; }

/* Material Icons */

.material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; /* WebKit */ -webkit-font-smoothing: antialiased; /* Chrome */ text-rendering: optimizeLegibility; /* Firefox */ -moz-osx-font-smoothing: grayscale; /* IE */ font-feature-settings: 'liga'; font-variation-settings: "FILL" 1; }

	/* Rules for sizing the icons. */
	.material-icons.md-14 { font-size: 14px; }
	.material-icons.md-16 { font-size: 16px; }
	.material-icons.md-18 { font-size: 18px; }
	.material-icons.md-24 { font-size: 24px; }
	.material-icons.md-30 { font-size: 30px; }
	.material-icons.md-36 { font-size: 36px; }
	.material-icons.md-48 { font-size: 48px; }

	/* Rules for using icons as black on a light background. */
	.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
		.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

	/* Rules for using icons as white on a dark background. */
	.material-icons.md-light { color: rgba(255, 255, 255, 1); }
		.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

.material-icon-centered { width: 50px; height: 50px; margin: 5px auto; }

/* ======================================================================================== */
/* ======================================================================================== */
/* Navigation */
/* ======================================================================================== */
/* ======================================================================================== */

/* Responsive Menu
===================== */
/* Menu bar setup */
#nav { z-index: 10000; position: absolute; top: 0; padding-left: 360px; }
	/* 300px indent to allow for Logo */
	#nav > a { display: none; }

	/* Generic */
	#nav ul { list-style-type: none; margin: 0; padding: 0; background-color: #fff; }
	#nav li { position: relative; text-align: left; }
		#nav li a { display: block; text-decoration: none; color: #000; }

	/* First level */
	#nav > ul > li { display: inline-block; }
		#nav > ul > li > a { color: #000; font-size: 17px; line-height: 24px; font-weight: bold; padding: 46px 18px; border-bottom: 2px solid #fff; }
		#nav > ul > li.NavParent > a:after { /*content:'\25BC'; font-size:10px; color:#888; position:absolute; top:28px; right:5px;*/ }
		#nav > ul > li.NavParent > a:hover { cursor: context-menu; }
		#nav > ul > li.NavSelected > a { color: #00953b; border-bottom: 2px solid #00953b; }
			#nav > ul > li.NavSelected > a:after { /*color:#555;*/ }
		#nav > ul > li:hover > a, #nav > ul > li:hover > a:after { color: #222; }

		/* Second level  */
		#nav > ul > li > ul { z-index: 10001; width: 200px; position: absolute; top: calc(100% - 14px); overflow: hidden; padding: 0; max-height: 0; opacity: 0; transition: padding 0.0s, max-height 1.5s, opacity 0.5s; }
		#nav > ul > li:hover > ul { padding: 15px 0; max-height: 800px; opacity: 1; overflow: visible; border: 1px solid #ccc; border-radius: 4px; }
		#nav > ul > li > ul > li > a { font-size: 14px; font-weight: bold; padding: 8px 15px; }
		#nav > ul > li > ul > li.NavParent > a:after { /*content:'\25BA'; font-size:10px; color:#000; position:absolute; top:8px; right:5px;*/ }
		#nav > ul > li > ul > li:hover > a, #nav > ul > li > ul > li:hover > a:after { color: #222; }

		/* Third level. !*!* Note that JQuery is used to set the left/right offset value AND flyout direction of the 2nd level flyout on the last element in the main nav.  master_jq.js --> // FLYOUT MENU */
		#nav > ul > li > ul > li > ul { z-index: 10002; position: absolute; top: -1px; left: calc(100% - 5px); padding: 0; width: 0; max-height: 0; opacity: 0; transition: padding 0.0s, width 0.0s, max-height 1.5s, opacity 0.75s; }
		#nav > ul > li > ul > li:hover > ul { padding: 5px 0; width: 200px; max-height: 800px; opacity: 1; border: 1px solid #ccc; border-radius: 4px; }
		#nav > ul > li > ul > li > ul > li { display: none; }
		/* without this, the LI elements have size and were wrongly triggering hover events. */
		#nav > ul > li > ul > li:hover > ul > li { display: block; }
		#nav > ul > li > ul > li > ul > li > a { font-size: 14px; padding: 8px 15px; }
			#nav > ul > li > ul > li > ul > li > a:hover { color: #222; }

/* Second level Sub Nav - Vertical 
===================== */
#navSub, #navSub ul { width: 100%; list-style: none; line-height: 18px; padding: 0; margin: 0; font-size: 16px; font-weight: bold; }
	#navSub .sel { color: #00953b; background-image: url(/assets/images/arrow_subnav_1_on.svg); }
	#navSub a { display: block; color: #000; text-decoration: none; }
	#navSub li { margin: 0px; padding: 0px; background: url(/assets/images/arrow_subnav_1.svg) 10px 10px no-repeat; list-style: none; }
		#navSub li a { width: 90%; w\idth: 85%; padding: 8px 5px 5px 36px; background: url(/assets/images/arrow_subnav_1.svg) 10px 10px no-repeat; }
		#navSub li ul { border: 0; }
		#navSub li li .sel { color: #00953b; background-image: url(/assets/images/arrow_subnav_2_on.svg); }
		#navSub li li { margin: 0px; padding: 0px; background: url(/assets/images/arrow_subnav_2.svg) 26px 10px no-repeat; }
			#navSub li li a { width: 90%; w\idth: 85%; padding: 8px 5px 5px 50px; background: url(/assets/images/arrow_subnav_2.svg) 26px 10px no-repeat; }
	#navSub a:hover { background-color: #fff; color: #00953b; transition: all 0.5s linear; }

/* Second level Sub Nav - Horizontal 
===================== */
.navSubH { font-size: 10px; color: #5d6786; line-height: 14px; }
	.navSubH a:link { color: #5d6786; text-decoration: none; }
	.navSubH a:visited { color: #666; text-decoration: none; }
	.navSubH a:active, .navSubH a:hover { color: #f60; text-decoration: underline; }

/* Breadcrumbs Nav 
===================== */
.MenuBCrumb { font-size: 10px; color: #333; font-weight: bold; }
	.MenuBCrumb a:link, .menuBCrumb a:visited { color: #666; text-decoration: none; }
	.MenuBCrumb a:active, .menuBCrumb a:hover { color: #a60e0e; text-decoration: underline; }

/* Bottom Text Nav
===================== */
.MenuBotL1 { font-size: 12px; color: #82d8a4; line-height: 14px; margin-top: 35px; }
	.MenuBotL1 a:link { color: #82d8a4; text-decoration: none; }
	.MenuBotL1 a:visited { color: #82d8a4; text-decoration: underline; }
	.MenuBotL1 a:active, .MenuBotL1 a:hover { color: #fff; text-decoration: underline; }
	.MenuBotL1 span { padding: 0 5px 0 5px; color: #82d8a4; }

.MenuBotL2 { font-size: 12px; color: #82d8a4; line-height: 14px; margin-top: 10px; }
	.MenuBotL2 a:link { color: #82d8a4; text-decoration: none; }
	.MenuBotL2 a:visited { color: #82d8a4; text-decoration: underline; }
	.MenuBotL2 a:active, .MenuBotL2 a:hover { color: #fff; text-decoration: underline; }
	.MenuBotL2 span { padding: 0 5px 0 5px; color: #82d8a4; }

/* Main Logo */
.LogoMain { z-index: 10005; position: absolute; left: 3%; top: 0; width: 285px; display: block; transition: all 0.3s; }
/* Keep 'display:block;' otherwise MS Edge fails on image size!! --- Edge works 100% if a width/height is given */

/* streamSWEET Branding */
.streamSWEETLogo { float: right; margin: 20px auto; }

/* group is used to replace clearfix */
.group:after { content: ""; display: table; clear: both; }

/* Sticky Panel */
.sticky { position: -webkit-sticky; position: sticky; top: 0; }
	.sticky:before, .sticky:after { content: ' '; display: table; }

/* Sticky top logo / Navigation row resize handling.  Triggered by JavaScript function "init"
===================== */
header.HdrSmaller { height: 40px; padding: 3px 0; }
.HdrSmaller .LogoMain { width: 120px; }
.HdrSmaller .SignUpLink { top: 5px; font-size: 14px; }
.HdrSmaller #nav > ul > li > a { padding: 7px 20px; }
.HdrSmaller #nav > ul > li > ul { top: calc(100%); }
.HdrSmaller #nav > ul > li.NavParent > a:after { top: 8px; }

/* Sign Up Button */
.SignUpLink { position: absolute; right: 0; top: 34px; text-align: center; font-weight: bold; padding: 8px 25px; font-size: 16px; line-height: normal; display: inline-block; border-radius: 5px; z-index: 10009; background-color: #fff; transition: all 0.3s; border: 2px solid #00953b; }
a.SignUpLink:link, a.SignUpLink:visited { text-decoration: none; color: #000; }
a.SignUpLink:hover, a.SignUpLink:active { text-decoration: none; color: #fff; background-color: #00953b; transition: all 0.3s ease; }

/* Add an item to the basket - animated flydown
===================== */
.BasketPreview { display: block; animation: BasketAdd 20.0s forwards; opacity: 0; width: 400px; max-width: calc(95vw - 40px); padding: 5px 10px 16px 10px; background-color: #fff; border: 1px solid #ccc; box-shadow: 4px 4px 8px 0px #ccc; position: fixed; top: 20px; right: 5%; z-index: 10000; overflow: hidden; }
	.BasketPreview:target { display: none; }
	.BasketPreview > a { display: block; }
/* Close Button */
.CloseIt { float: right; vertical-align: middle; margin: 5px 10px 12px 5px; padding: 4px 16px 3px 12px; font-size: 12px; line-height: 12px; border: 1px solid transparent; border-radius: 12px; }
	.CloseIt span { position: relative; top: -2px; left: 4px; }
	/* align text with icon */
	.CloseIt a:hover { border: 1px solid #ccc; transition: all 1.0s ease; }
/* Product Info */
.BasketPreviewName { float: left; padding: 3px 10px; font-size: 12px; }
.BasketPreviewPrice { font-weight: 700; }
/* View Cart Link */
.BasketPreviewCart { float: right; }
.CartLink { float: right; vertical-align: middle; margin: 3px; color: #fff; border: 1px solid #ccc; background-color: #f8f8f8; padding: 3px 20px 3px 16px; font-size: 12px; line-height: 12px; border-radius: 5px; }
	.CartLink span { position: relative; top: -3px; left: 3px; }
	/* align text with icon */
	.CartLink:hover { border-color: #3eb7ed; box-shadow: 0 0 3px 3px rgba(76, 76, 76, 0.1); transition: all 1.0s ease; }

@keyframes BasketAdd {
	0% { top: -200px; }
	5% { top: 20px; opacity: 1.0; }
	90% { top: 20px; opacity: 1.0; }
	95% { top: 20px; opacity: 0.5; }
	99% { opacity: 0.0; }
	100% { top: -9000px; }
}

/* Added heading styles where we do not want to use h1, h2 etc */
.Heading1 { font-size: 18px; line-height: 22px; height: 38px; vertical-align: top; color: #1c374a; font-weight: bold; background-color: #f8f8f8; padding: 0 0 0 20px; border: 1px solid #ccc; border-top-left-radius: 6px; border-top-right-radius: 6px; overflow: hidden; }
	.Heading1 span, .Heading1 div { float: left; margin-top: 8px; }
	.Heading1 div { float: left; margin-top: 1px; }
	.Heading1 .BtnAddNew { border-top-right-radius: 6px; color: #1c374a; height: 38px; }

.Heading2 { font-size: 16px; line-height: 20px; height: 34px; color: #1c374a; font-weight: normal; padding: 0 0 0 10px; vertical-align: top; background-color: #dfe3ea; overflow: hidden; }
.Heading2Top { font-size: 16px; line-height: 20px; height: 34px; color: #000; font-weight: normal; padding: 0 0 0 10px; vertical-align: top; background-color: #e4e4e4; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid #ccc; border-bottom: 0; overflow: hidden; }
	.Heading2 span, .Heading2Top span { float: left; margin-top: 6px; }
	.Heading2 div, .Heading2Top div { float: left; margin-top: 1px; }
	.Heading2 aside, .Heading2Top aside { float: right; margin: 3px 10px 0 0; }
	.Heading2Top .BtnAddNew { border-top-right-radius: 4px; color: #000; }
	.Heading2Top i { color: #1c374a !important; }
	.Heading2Top select { float: right; margin: 2px 10px 0 0 !important; height: 20px !important; font-size: 11px; border-radius: 3px; }

.Heading3 { font-size: 12px; line-height: 17px; color: #1c374a; font-weight: bold; padding: 4px 5px 4px 8px !important; background-color: #e8eefa; overflow: hidden; border-bottom: 1px solid #d1d8e8; margin: 0; }
.Heading3Top { font-size: 12px; line-height: 17px; height: 20px; color: #1c374a; font-weight: bold; padding: 0 0 0 5px; vertical-align: top; background-color: #e8eefa; border-top-left-radius: 4px; border-top-right-radius: 4px; overflow: hidden; }
	.Heading3 span, .Heading3Top span, .Heading3 div, .Heading3Top div { float: left; margin-top: 1px; }
.Heading3 > a { float: right; margin-right: 5px; }
.Heading3Top .BtnAddNew { border-top-right-radius: 3px; }

/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* CONTENT LAYOUT - DIV based (being phased IN) */
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */

/* Main Content Area - Admin */
.ContentShell { overflow: hidden; padding: 0 5px 10px 5px; border-color: #eee; border-width: 0 1px 1px 1px; border-style: solid; background-color: #fcfcfc; min-height: 600px; }
.ContentColSet1Left { width: 30%; float: left; }
.ContentColSet1Right { width: 70%; float: right; }
.ContentColSet2Left { width: 40%; float: left; }
.ContentColSet2Right { width: 60%; float: right; }
.ContentColSet3Left { width: 50%; float: left; }
.ContentColSet3Right { width: 50%; float: right; }
.ContentColSet4Left { width: 65%; float: left; }
.ContentColSet4Right { width: 35%; float: right; }
.ContentColContRight { margin-left: 8px; }

/* Panels within content area - Admin */
.PanelShell { margin: 13px 0 0 0; }
.PanelShellTop { margin: 0; }
/* Occasionally needed for a panel that sits at the top, where spacing is already applied at the container level*/
.PanelContainTable { border: solid 1px #ccc; background-color: #fafafa; }
.PanelContainText { padding: 10px; border: solid 1px #ccc; background-color: #efefef; background-image: linear-gradient(0deg, #efefef, #fff 90%); border-top-left-radius: 4px; border-top-right-radius: 4px; }
.PanelContainTextSquare { padding: 10px; border: solid 1px #ccc; background-color: #efefef; background-image: linear-gradient(0deg, #efefef, #fff 90%); }
.PanelContainChart { padding: 10px; border: solid 1px #ccc; background-color: #efefef; background-image: linear-gradient(0deg, #efefef, #fff 90%); border-radius: 5px; }
.PanelContainTree { border-style: solid; border-width: 0 1px 1px 1px; border-color: #ccc; background-color: #efefef; background-image: linear-gradient(0deg, #efefef, #fff 90%); padding: 10px 5px 25px 5px; }
.PanelContainColumns { overflow: hidden; }
.PanelContainRow { overflow: hidden; background-color: #fff; border-top: 1px solid #ccc; padding: 6px; }
	.PanelContainRow:hover { background-color: #fcfce3; }
	.PanelContainRow img { border: 1px solid #ccc; }
.PanelContainImgCrop { position: relative; width: 600px; }
/* if desired to change container size, you must update class level variable inside ItemFileImageCrop control to match*/
.PanelTabsContentTelerik { margin-top: -1px; border: 1px solid #ccc; padding: 13px 10px 10px 10px; background-color: #fff; overflow: hidden; }
.PanelContentItemSet { margin: 15px 10px 0 10px; }
	.PanelContentItemSet > span { display: block; line-height: 16px; }

.PanelAccount { position: absolute; right: 75px; top: 0; padding-top: 5px; font-size: 14px; }
.PanelAccountBasket { display: inline-block; margin: 0 30px 0 0; }
.PanelAccountBasketCount { color: #f00; font-weight: bold; }
.PanelLoginAccount { display: inline-block; }
.PanelLoginAccount { color: #fff; }
	.PanelLoginAccount a { color: #fff; }
		.PanelLoginAccount a:hover { color: #000; }

.ChangeButton { background-color: #333; padding: 3px 8px; border-radius: 3px; }

.PanelLoginOuter1 { position: fixed; top: 0; width: 100%; z-index: 10005; }
.PanelLoginOuter2 { margin: 0 auto; max-width: 1100px; position: relative; }

.PanelLogin { margin: 0 auto; background-color: #f5f5f5; padding: 15px 30px; border-left: 1px solid #999; border-right: 1px solid #999; border-bottom: 5px solid #999; }
.PanelLoginCont { position: absolute; top: 0; right: 150px; height: 0; overflow: hidden; }
.PanelLogin input { display: inline-block; margin: 5px 0 !important; }
.PanelLoginHide { float: right; margin: -20px -20px 50px 0; color: #666; padding: 0 10px; border: 1px solid transparent; }
	.PanelLoginHide:hover { border: 1px solid #000; background-color: #fff; cursor: pointer; }

.PanelLoginProfile { background-color: #f5f5f5; padding: 15px 30px; border-left: 1px solid #999; border-right: 1px solid #999; border-bottom: 5px solid #999; width: 300px; font-size: 14px; }
.PanelLoginProfileCont { position: absolute; top: 0; right: 50px; height: 0; overflow: hidden; }
.PanelLoginProfile a:link, .PanelLoginProfile a:visited { color: #69646c; }
.PanelLoginProfile a:hover, .PanelLoginProfile a:active { color: #ff8c0a; }
.PanelLoginProfileSelect { font-size: 12px; padding: 3px 10px; }

/* Address Handling*/
/* data-address fields:Name, NameTradingAs, Building, StreetPOBox, Suburb, TownCity, PostZipCode, StateProvince, Country, Email, Phone*/
/* Note that for each country we may have custom formating, with several fields in one line. In those instances use first field data-address name i.e. TownCity for Auckland 1001*/
.PanelAddress > span { display: block; }
.PanelAddress { margin: 15px 5px 5px 5px; font-size: 13px; line-height: 18px; }
	.PanelAddress span[data-address=Name], .PanelAddress span[data-address=NameTradingAs] { font-size: 18px; line-height: 24px; }
	.PanelAddress span[data-address=Email] { margin-top: 15px; }

.PanelAddressBilling > span { display: block; }
.PanelAddressBilling { margin: 15px 5px 5px 5px; font-size: 13px; line-height: 17px; }
	.PanelAddressBilling span[data-address=Name], .PanelAddress span[data-address=NameTradingAs] { font-size: 18px; line-height: 24px; }
	.PanelAddressBilling span[data-address=Email] { margin-top: 15px; }

.PanelAddressDelivery > span { display: block; }
.PanelAddressDelivery { margin: 15px 5px 5px 5px; font-size: 13px; line-height: 17px; }
	.PanelAddressDelivery span[data-address=Name], .PanelAddress span[data-address=NameTradingAs] { font-size: 18px; line-height: 24px; }
	.PanelAddressDelivery span[data-address=Phone] { margin-top: 15px; }

/* Added heading styles where we do not want to use h1, h2 etc */
.Heading1 { font-size: 18px; line-height: 22px; height: 38px; vertical-align: top; color: #1c374a; font-weight: bold; background-color: #f8f8f8; padding: 0 0 0 20px; border: 1px solid #ccc; border-top-left-radius: 6px; border-top-right-radius: 6px; overflow: hidden; }
	.Heading1 span, .Heading1 div { float: left; margin-top: 8px; }
	.Heading1 div { float: left; margin-top: 1px; }
	.Heading1 .BtnAddNew { border-top-right-radius: 6px; color: #1c374a; height: 38px; }

/* ======================================================================================== */
/* ======================================================================================== */
/* Content - Coded outputs */
/* ======================================================================================== */
/* ======================================================================================== */

/* Responsive Containers */
/* Video */
.VideoDetailOuter { max-width: 1000px; margin: 0 auto; padding: 20px 2%; }
/* iframe */
.iframe43 { position: relative; height: 0; overflow: hidden; padding-bottom: 75%; }
/* Aspect ratio is achieved through "padding-bottom"....  75% = 4x3; 56.25% = 16x9. */
.iframe16x9 { position: relative; height: 0; overflow: hidden; padding-bottom: 56.25%; }
	/* Aspect ratio is achieved through "padding-bottom"....  75% = 4x3; 56.25% = 16x9. */
	.iframe43, .iframe16x9 iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Container for the DIV based Map handling	*/
.containerMap { width: 100%; }
.outerMap { position: relative; width: 100%; padding-top: 75%; }
.innerMap { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

.GoogleMapInfoWindow { min-height: 100px; min-width: 200px; }

.GoogleMapHeading1 { font-weight: bold; color: #00953b; font-size: 16px; }
.GoogleMapText1 { font-size: 10px; }
/* St No. */
.GoogleMapText2 { font-size: 10px; color: #000; }
/* Suburb. */
.GoogleMapText3 { font-size: 10px; color: #000; }
/* City. */
.GoogleMapText4 { font-size: 10px; color: #000; }
/* Country. */
.GoogleMapText5 { font-size: 10px; color: #000; font-weight: bold; padding: 7px 0; }
/* Phone. */
.GoogleMapText6 { font-size: 10px; color: #3488c1; }
/* Web Address */
.GoogleMapText7 { font-size: 10px; color: #000; }
/* Business type. */
.GoogleMapText8 { font-size: 10px; color: #000; }
/* Untried as yet */
.GoogleMapText9 { font-size: 10px; color: #000; }
/* Untried as yet */
.GoogleMapText10 { font-size: 10px; color: #000; }
/* Untried as yet */

.GoogleMapButton { text-align: center; text-shadow: 0px 2px #0c1c5d; font-weight: 700; padding: 3px 20px; margin: 15px auto; font-size: 14px; line-height: normal; display: inline-block; border-radius: 5px; background-color: #0099ff; background-image: linear-gradient(0deg, #296abf, #1d327b 90%); cursor: pointer; }
a.GoogleMapButton:link, a.GoogleMapButton:visited { text-decoration: none; color: #fff; }
a.GoogleMapButton:hover, a.GoogleMapButton:active { text-decoration: none; background-color: #2a6abf; background-image: linear-gradient(0deg, #0099ff, #2a6abf 90%); transition: all 0.3s ease; }

.GMapResultTable { margin-bottom: 20px; line-height: 1.5; border-top: 1px solid #bdbebf; background-color: #fff; width: 99%; }
	.GMapResultTable th { background-color: #11598a; font-weight: 300; color: #fff; padding: 10px; }
	.GMapResultTable tr { border-bottom: 1px solid #cdd6e1; }
		.GMapResultTable tr:hover { background-color: #f3f5f8; }
	.GMapResultTable td { font-size: 14px; padding: 12px 8px; /*vertical-align:top;*/ }
		.GMapResultTable td > h4 { margin: 4px 0 6px 0; }
.GMapResultTableSubHead { color: #939598; font-weight: bold; }

.GMapResultCol1 { width: 70%; }
.GMapResultCol2 { width: 15%; }
.GMapResultCol3 { width: 15%; }
.GMapResultCol4 { width: 15%; }

/* Table
===================== */
.TableBorder { background-color: #fff; border: 1px solid #888; margin-top: 1px; }
.TableBasic { border: none; width: 100%; border-collapse: collapse; }
	.TableBasic td { padding: 0; }

.TableInfoLayout { width: 100%; border-collapse: collapse; }
	.TableInfoLayout > tbody > tr > th { text-align: left; font-size: 12px; color: #333; font-weight: bold; padding: 3px 5px 2px 10px !important; border: 1px solid #bebebe; background-color: #efefef; background-image: linear-gradient(0deg, #efefef, #fff 90%); }
	.TableInfoLayout > tbody > tr > td { text-align: left; vertical-align: top; padding: 7px 3px 3px 3px; }
	.TableInfoLayout > tbody > tr:first-of-type > td { padding: 10px 3px 3px 3px; }

/* should probably be reworked, because this has been moved from rugby for a handful of controls that we placed in streamSWEET. */
/* These controls are still not made part of the system properly, so we can either update them to use generic styles, or remove styles and controls */
/* usercontrol\SHOP\Payment\Front\CreditsLogBought.ascx */
/* usercontrol\front\custom\CreditsLogUsed.ascx */
/* usercontrol\front\Network\FriendsResultsList.ascx */
/* usercontrol\front\Network\MyFriends.ascx */
.AccountTable { margin-bottom: 6px; }
	.AccountTable td { padding: 4px 2px; }
	.AccountTable th { text-align: left; background-color: #fff; border: 2px solid #cde9b4; font-size: 15px; padding: 6px; background-image: url(/assets/images/tile_header_profile.jpg); background-repeat: repeat-x; }
.AccountTableLeft { text-align: left; font-weight: bold; background-color: #fff; border-top: 2px solid #cde9b4; border-left: 2px solid #cde9b4; border-bottom: 2px solid #cde9b4; font-size: 15px; padding: 6px; background-image: url(/assets/images/tile_header_profile.jpg); background-repeat: repeat-x; }
.AccountTableCenter { text-align: left; font-weight: bold; background-color: #fff; border-top: 2px solid #cde9b4; border-bottom: 2px solid #cde9b4; font-size: 15px; padding: 6px; background-image: url(/assets/images/tile_header_profile.jpg); background-repeat: repeat-x; }
.AccountTableRight { text-align: left; font-weight: bold; background-color: #fff; border-top: 2px solid #cde9b4; border-right: 2px solid #cde9b4; border-bottom: 2px solid #cde9b4; font-size: 15px; padding: 6px; background-image: url(/assets/images/tile_header_profile.jpg); background-repeat: repeat-x; }
.AccountTableSub { background-image: url(/assets/images/tile_account_sub.jpg); background-repeat: repeat-x; border-bottom: 1px solid #ccc; }

/* Also from TR */
.TableInformation { padding: 2px; border: 1px solid #cde9b4; background-color: #fafcfa; width: 100%; max-width: 1200px; }
	.TableInformation th { font-size: 12px; color: #000; background-image: url(/assets/images/tile_header_profile.jpg); background-repeat: repeat-x; text-align: left; padding: 5px; border-bottom: 2px solid #cde9b4; }
.TableInformationSub { font-size: 12px; padding: 4px; border-bottom: 2px solid #cde9b4; background-color: #ccc; }
.TableInformation td { padding: 3px; vertical-align: top; border-bottom: 1px dashed #cde9b4; line-height: normal; }

.TableAddAttendees { margin-top: 25px !important; }
	.TableAddAttendees caption { text-align: left; padding-left: 5px; font-size: 12px; font-style: italic; }

/* streamSWEET predefined tables
===================== */
.Table1 { border-collapse: collapse; border: 1px solid #b7b8b8; }
.Table1Head { background-color: #3c3c3c; padding: 5px 5px 5px 3px; font-size: 14px; font-weight: bold; color: #f7f7f7; text-align: left; border: 1px solid #b7b8b8; }
.Table1SubHead { background-color: #d4d4d4; padding: 3px 3px 3px 3px; font-size: 12px; font-weight: bold; border-top: 1px solid #b7b8b8; border-bottom: 1px solid #b7b8b8; }
.Table1Content { background-color: #fbfbfb; padding: 2px 2px 2px 3px; font-size: 12px; border-top: 1px solid #b7b8b8; border-bottom: 1px solid #b7b8b8; }
.FormContItemFile { width: 90%; max-width: 800px; border-collapse: collapse; border: 1px solid #ccc; }
	.FormContItemFile td { padding: 2px; }

/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* Data Repeater*/
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */

.TableDataRepeat { width: 100%; border-collapse: collapse; }
	.TableDataRepeat caption { text-align: left; font-size: 14px; color: #4b5267; font-weight: bold; padding: 7px 5px 4px 10px; border-color: #ccc; border-style: solid; border-width: 1px 1px 0 1px; background-color: #efefef; background-image: linear-gradient(0deg, #efefef, #fff 90%); border-top-left-radius: 4px; border-top-right-radius: 4px; }
	.TableDataRepeat th { font-size: 12px; color: #000; font-weight: normal; text-align: left; padding: 4px; background-color: #eeeef1; }
	.TableDataRepeat td { font-size: 12px; text-align: left; padding: 4px 3px; }
		.TableDataRepeat td a { text-decoration: none; display: block; }
			.TableDataRepeat td a:hover { text-decoration: none; color: #f30; }
	.TableDataRepeat tr:nth-child(even) { background-color: #fff; border-bottom: 1px solid #fff; }
	.TableDataRepeat tr:nth-child(odd) { background-color: #efefef; border-bottom: 1px solid #efefef; }
	.TableDataRepeat tr:hover { background-color: #fcfce3; border-bottom: 1px solid #c4c4b5; }
	.TableDataRepeat address { line-height: normal; font-style: normal; margin: 5px; }
		.TableDataRepeat address > a { margin-top: 5px; }

/* Data Grid 
===================== */
/* Note. There is a level of repetition and !important handling on the grid rows to override default Telerik values applied, where Telerik Grid is used.  */
.datagridTable { color: #f60; background-color: #fff; width: 100%; }
.dataGridCont { border-width: 0 1px 1px 1px; border-style: sold; border-color: #999; }
	.dataGridCont img { display: inline-block; margin: 0; vertical-align: middle; }

.datagrid { background-color: #fefefe; width: 100%; }
	.datagrid td { padding: 0 1px 0 4px !important; font-size: 12px; border-top: 1px solid #ddd; height: 26px; }
		.datagrid td a { text-decoration: none; display: block; }
			.datagrid td a:before { content: ''; height: 100%; display: inline-block; vertical-align: middle; }
	.datagrid tr:first-of-type td a { height: 100%; white-space: nowrap; display: block; }
	/* Custom hanlding for the sortable Header Row */
	.datagrid tr:last-of-type td { border-bottom: 1px solid transparent; }
	/* Stop the bottom row from vertical jumping - applicable where pagination exists */
	.datagrid tr td:last-of-type { padding-right: 3px !important; }
/* Make sure we have suitable white space at the right hand edge of the grid */

.datagridAlter { background-color: #f5f5f5; }
	.datagridAlter td { padding: 0 1px 0 4px !important; font-size: 12px; border-top: 1px solid #ddd; height: 26px; }
		.datagridAlter td a { text-decoration: none; display: block; }
			.datagridAlter td a:before { content: ''; height: 100%; display: inline-block; vertical-align: middle; }

.datagridSelected { background-color: #dfe6cf; }
	.datagridSelected td { padding: 0 1px 0 4px !important; font-size: 12px; border-top: 1px solid #999; border-bottom: 1px solid #999; height: 26px; }
		.datagridSelected td a { text-decoration: none; display: block; }
			.datagridSelected td a:before { content: ''; height: 100%; display: inline-block; vertical-align: middle; }

.datagridOver { background-color: #fcfce3; }
	.datagridOver td { padding: 0 1px 0 4px !important; font-size: 12px; border-top: 1px solid #999; border-bottom: 1px solid #999; height: 26px; }
		.datagridOver td a { text-decoration: none; display: block; }
			.datagridOver td a:before { content: ''; height: 100%; display: inline-block; vertical-align: middle; }

/* datagridHeader is only applied to the header row of non-sortable, non drag n drop grids. */
.datagridHeader { padding: 0; }
	.datagridHeader td { padding: 4px 2px 4px 4px; }

/* Extra handling for the Header Row */
.datagridColumn { color: #2d4285; background-color: #C3CAD6; background-image: linear-gradient(0deg, #C3CAD6, #EBEFF5 90%); }
	.datagridColumn a:link, .datagridColumn a:visited, .datagridColumn a:active { text-decoration: none; color: #2d4285; }
	.datagridColumn a:hover { color: #f30; }
	.datagridColumn a::after { content: "\21F5"; margin-left: 4px; color: transparent; }
	.datagridColumn a:hover::after { content: "\21F5"; margin-left: 4px; color: #333; }
.datagridColumnSelected { color: #2d4285; background-color: #C3CAD6; background-image: linear-gradient(0deg, #C3CAD6, #EBEFF5 90%); }
	.datagridColumnSelected a:link, .datagridColumnSelected a:visited, .datagridColumnSelected a:active { text-decoration: none; color: #2d4285; }
	.datagridColumnSelected a::after { content: "\21F5"; margin-left: 5px; color: #333; }
	/*\21C5 \21E7 \21E9 \2191 \2193 */
	.datagridColumnSelected a:hover { color: #f30; }

/*Format pagination handling. */
.datagridPager td { height: 35px; font-size: 14px; color: #006; font-weight: normal; background-color: #fff; padding: 8px 40px 6px 0 !important; text-align: right; vertical-align: bottom; border-top: 1px solid #999; }
	.datagridPager td span { padding: 0 5px 0 5px; font-weight: bold; }
	.datagridPager td a { padding: 0 8px; margin: 0 1px 0 0; color: #999; font-weight: normal; border: 1px solid #666; display: inline-block; line-height: 20px; height: 24px; border-radius: 3px; }
		.datagridPager td a:hover { background-color: #555; border-color: #000; color: #fff; font-weight: bold; }

/*Apply colours to key columns with data such as "Yes" and "No" so they stand out more. */
.datagridRed { font-size: 11px; color: #006; font-weight: normal; background-color: #ffd9d9; }
.datagridGreen { font-size: 11px; color: #006; font-weight: normal; background-color: #d0ffce; }
.datagridOrange { font-size: 11px; color: #006; font-weight: normal; background-color: #ffe6b0; }

/* RadGrid - used for drag and drop grid */
.HypergridTableHeader { overflow: hidden; width: 100%; table-layout: fixed; empty-cells: show; border-collapse: collapse; }
	.HypergridTableHeader th { padding: 4px 2px 4px 4px; }
.DivDragDropImage { margin-left: auto; margin-right: auto; width: 16px; height: 16px; text-align: center; background-image: url(/assets/images/icon_sort_up_down.gif); }
.RadGridDragDropEnabled { cursor: move; }
.rgPager .rgCurrentPage { text-decoration: none; color: Black; }
.rgPager .rgInfoPart { display: none; }
.rgMasterTable { border-collapse: collapse !important; }
	.rgMasterTable tr th { vertical-align: bottom; }
	.rgMasterTable tr:last-of-type td { border-bottom: 1px solid #999; }
.rgFooterWrapper { border-top: 2px solid #999; padding-top: 5px; color: #4b5267 !important; font-size: 11px; }


/* TABS PANEL - Used for presentation of content in a tabbed view.  This handles the tabs that sit in Div which sits directly above a content panel. */
.Tabs { font-size: 0; padding: 0 10px 0 10px; border-bottom: 1px solid #ccc; }

	.Tabs a { background-color: #f5f5f2; text-align: center; border: 1px solid #ccc; border-top-left-radius: 4px; border-top-right-radius: 4px; margin-bottom: -1px; vertical-align: bottom; color: #999; padding: 7px 14px 5px 14px; font-size: 14px; display: inline-block; }
	.Tabs:not(a:first-of-type) { margin-left: -1px; }
	.Tabs a:hover, .Tabs a:link, .Tabs a:visited, .Tabs a:active { color: #999; text-decoration: none; }
	.Tabs a:hover { background-color: #fff; }

	.Tabs .TabsOn { background-color: #fff; border-bottom: 1px solid #fff; padding: 9px 14px 6px 14px !important; }
		.Tabs .TabsOn a:link, .Tabs .TabsOn a:visited, .Tabs .TabsOn a:active, .Tabs .TabsOn a:hover { color: #999; text-decoration: none; }

/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* Telerik Tabs */
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */

/* Overrides to get the base environment as Stream needs it. Note this CSS Class "PanelTabsContentTelerik" (above) which is set to margin-top:-1px; */
.RadTabStrip .rtsLevel1 { border: none !important; }
.RadTabStrip .rtsLink { border: none !important; }
.RadTabStrip .rtsUL { border-bottom: 1px solid transparent; margin-bottom: 0 !important; }

/* Primary handling - Class applies to the LI */
.RadTabStrip .RadTab { background-color: #f5f5f2; text-align: center; border: 1px solid #ccc; border-top-left-radius: 4px; border-top-right-radius: 4px; margin-bottom: -1px; vertical-align: bottom !important; }
	.RadTabStrip .RadTab:not(:first-child) { margin-left: -1px; }

/* Control the various additional states that a tab can have */
.RadTabStrip .RadTabSelected { background-color: #fff; border-bottom: 1px solid #fff; }
.RadTabStrip .RadTabHovered { background-color: #e5e5de; }
.RadTabStrip .RadTabSelected.RadTabHovered { background-color: #fff; }
.RadTabStrip .RadTabDisabled { color: #999; }

/* Control how the text sits within the tab, and in doing so also control the overall height of each tab */
.RadTabStrip .rtsLink { padding: 7px 14px 5px 14px !important; }
.RadTabStrip .RadTabSelected .rtsLink { padding: 9px 14px 6px 14px !important; }

/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */


/* Stream 
===================== */

/* In-page alert and information panels */
.in-page-alert-panel { width: calc(100% - 126px); max-width: 800px; margin: 18px 10px; padding: 10px 30px 10px 70px; font-size: 1.1em; position: relative; min-height: 40px; }
	.in-page-alert-panel i { position: absolute; top: 15px; left: 10px; }
	.in-page-alert-panel p { color: #333; }
	.in-page-alert-panel a { font-weight: bolder; }
.in-page-alert-title { font-size: 1.3em; }
.in-page-alert-emphasis { font-style: italic; }
.in-page-alert-btn { margin: 20px 10px 15px 10px; }

.in-page-alert-note { background-color: #eaf7fd; border-left: 6px solid #2d465d; }
	.in-page-alert-note i { color: #2d465d; }

.in-page-alert-warning { background-color: #fff8d0; border-left: 6px solid #ff9c2b; }
	.in-page-alert-warning i { color: #ff9c2b; }

.in-page-alert-error { background-color: #f9e1df; border-left: 6px solid #e83724; }
	.in-page-alert-error i { color: #e83724; }



/* ################ */
/* In-page alert and information panels */
.PanelInPageAlert { max-width: 800px; margin: 18px 10px; padding: 16px 20px; font-size: 1.2em; }
	.PanelInPageAlert i { float: left; margin: 0 auto; width: 8%; min-width: 50px; }
	.PanelInPageAlert p { float: left; margin: 4px 0 0 0; width: 85%; color: #333; }

.Note { background-color: #eaf7fd; border-left: 6px solid #2d465d; }
	.Note i { color: #2d465d; }

.Warning { background-color: #fff8d0; border-left: 6px solid #ff9c2b; }
	.Warning i { color: #ff9c2b; }

.Error { background-color: #f9e1df; border-left: 6px solid #e83724; }
	.Error i { color: #e83724; }
/* ################ */



.PanelInPageAlertTitle { font-size: 1.3em; }
.PanelInPageAlertEmphasis { font-style: italic; }
.PanelInPageAlert a { font-weight: bolder; }

.PanelInPageInform { width: 80%; max-width: 800px; margin: 10px; padding: 14px 10px 14px 70px; font-size: 1.2em; background-color: #ffc; border: 1px solid #fc0; border-radius: 2px; box-shadow: 0 0 20px 0px #ccc; background-image: url('/assets/admin/images/icon_warning_sign.svg'); background-repeat: no-repeat; background-position: 16px 16px; }


/* Alert Message Handling - Appears at bottom right of screen after content/form updates */
.AlertBox { width: 350px; margin: 0; padding: 0; border-radius: 3px; box-shadow: 0 0 20px 0px #ccc; overflow: hidden; cursor: auto; position: fixed; bottom: 20px; right: 20px; z-index: 10000; }
.AlertBoxInner { padding: 10px 10px 10px 70px; overflow: hidden; z-index: 9999; }
.AlertBoxTitle { margin: 5px 0 0 0; font-size: 24px; font-weight: bold; color: #333; }
.AlertBoxText { margin: 15px 10px 10px 0; font-size: 1.1em; color: #333; }

.AlertBoxSuccess { background-color: #e0fcd0; border: 1px solid #b0cba7; animation: ActionSuccess 10.0s forwards; }
/*Green Box */
.AlertBoxInnerSuccess { background-image: url('/assets/images/msg_type_01_01.svg'); background-repeat: no-repeat; background-position: 5px 10px; }
.AlertBoxError { background-color: #f9d6d5; border: 1px solid #cf756a; animation: ActionAlert 1.5s forwards; }
/* Red Box */
.AlertBoxInnerError { background-image: url('/assets/images/msg_type_02_01.svg'); background-repeat: no-repeat; background-position: 5px 10px; }
.AlertBoxInfo { background-color: #fff8d0; border: 1px solid #dac48f; animation: ActionAlert 1.5s forwards; }
/* Orange Box */
.AlertBoxInnerInfo { background-image: url('/assets/images/msg_type_03_01.svg'); background-repeat: no-repeat; background-position: 5px 10px; }

@keyframes ActionSuccess {
	0% { right: -360px; }
	5% { right: 40px; opacity: 0.6; }
	8% { right: 10px; opacity: 1.0; }
	10% { right: 27px; }
	12% { right: 17px; }
	13% { right: 22px; }
	14% { right: 20px; }
	80% { opacity: 1.0; }
	99% { right: 20px; opacity: 0.0; }
	100% { right: -1000px; opacity: 0.0; }
}

@keyframes ActionAlert {
	0% { right: -360px; }
	50% { right: 40px; opacity: 1.0; }
	70% { right: 10px; }
	85% { right: 27px; }
	90% { right: 17px; }
	95% { right: 22px; }
	100% { right: 20px; }
}

/* No Results Handling */
.AlertNoResult { padding: 20px 10px 20px 20px; border: 1px solid #e5e5e5; background: #f7f7f7; margin: 30px auto; }
.AlertNoResultIcon { float: left; width: 7%; margin-right: 10px; color: #F93; text-align: center; }
.AlertNoResultText { float: left; width: 88%; font-size: 18px; line-height: 24px; padding: 5px; }

/* Error Pages */
.ErrorBox { margin-left: auto; margin-right: auto; width: 65%; max-width: 800px; margin-top: 60px; border-top: 9px solid #FF0; background-color: #96aebb; padding: 60px 60px; color: #fff; box-shadow: 0 0 10px 10px rgba(76, 76, 76, 0.1); }
	.ErrorBox h1 { color: #fff !important; }
	.ErrorBox h2 { color: #ff0 !important; }
		.ErrorBox h2:after { content: ''; display: none; }
	.ErrorBox p { color: #3c515c !important; }
	.ErrorBox hr { border-top-width: 4px; border-top-style: solid; border-right-style: none; border-bottom-style: none; border-left-style: none; border-top-color: #b9c7ce; margin-right: 0px; margin-left: 0px; }
.ErrorLink { margin-left: auto; margin-right: auto; width: 65%; padding: 30px; }
.ErrorIcon { font-size: 120px !important; }


/* Telerik
===================== */
.RadTabStrip a:active, .RadTabStrip a:hover { color: #f60 !important; }
.TabDisabled { color: #999; }
/* Over-ride telerik generated styles */
.rwControlButtons li { list-style-type: none; }
.rcbHeader ul, .rcbHeader ul li, .rcbFooter ul, .rcbFooter ul li, .rcbItem ul, .rcbItem ul li, .rcbHovered ul, .rcbHovered ul li, .rcbDisabled ul, .rcbDisabled ul li { list-style-type: none !important; margin: 0px; padding: 0px; }

.RadWinManager { z-index: 9999999; }
/* to make rad windows show above everything else */

/* Modal 
===================== */
.ModalBackground { background-color: Gray; }
.ModalPopup { display: none; }

/* Tool Tip 
===================== */

/* File Upload
===================== */
.FileUploadHeader { font-size: 12px; font-weight: bold; color: #464c55; background-color: #c1d82f; padding: 4px; border-bottom: 1px solid #666; }

/* Ajax Popup 
===================== */
/* shop */
.FormTopPopup { background-image: url(/assets/images/tile_stripe.jpg); background-repeat: repeat-x; color: #fff; font-weight: bold; padding-left: 15px; }
.FormButtonPopup { padding: 6px 12px 6px 12px; font-size: 14px; color: #393b4a; background-image: url(/assets/images/tile_ajaxform_header.jpg); background-repeat: repeat-x; background-color: #b0becd; text-decoration: none; }
/* feedback only */
.FormTablePopup { padding: 0; margin-left: auto; margin-right: auto; background-color: #fff; }
/* carried from rugby - PayPal popup,  Login Message popup */
.FormHeaderPopup { padding: 5px 30px; font-size: 16px; font-weight: bold; color: #fff; background-image: url(/assets/images/tile_ajaxform_header.jpg); background-repeat: repeat-x; }
.FormHeaderPopup { padding: 3px; font-size: 14px; font-weight: bold; color: #393b4a; background-image: url(/assets/images/tile_ajaxform_header.jpg); background-repeat: repeat-x; }
/* \PayPal_HTML.aspx */
/* \usercontrol\SHOP\Payment\Front\CreditsBuy.ascx */
.CreditDisplay { font-size: 14px; color: #000; padding: 6px 10px; background-color: #dbefde; border: 1px solid #6eaf4e; }
/* PayPal popup - \PayPal_HTML.aspx */
.TableBuyStuff { width: 100%; margin: 10px 0px; border-top: 2px solid #000; border-bottom: 2px solid #000; }
	.TableBuyStuff th { background-color: #f1eded; padding: 4px; }
	.TableBuyStuff td { padding: 4px; }
/* BUY NOW POP-UP */
/* ref:http://www.sohtanaka.com/web-design/inline-modal-window-w-css-and-jquery/ */
#fade { display: none; background: #000; position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: .80; z-index: 9999; }
.popup_block { display: none; background: #fff; padding: 0px; border: 2px solid #ddd; float: left; position: fixed; top: 50%; left: 50%; z-index: 99999; }


/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* FORMS */
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */


/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* Forms :: Layout (Note. The 'section' element is used to show panels of content based on user selection) */
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */

.FormSetHor, .FormSetVert { /*border:1px solid #ccc; border-top-left-radius:5px; border-top-right-radius:5px; background-color:#fefefe;*/ margin-bottom: 10px; }
	.FormSetHor > section, .FormSetVert > section, .FormSetHor .FormSetHor, .FormSetVert .FormSetVert { margin: 0; padding: 0; border: none; width: 100%; }
	/*On occasion we need 'sub form' layout, so make it appear as though it is part of the standard form.*/
	.FormSetHor > h1, .FormSetVert > h1 { font-size: 20px; font-weight: 400; background-color: #eee; margin: 10px 0 0 0; padding: 10px 10px 5px 10px; }
		.FormSetHor > h1:after { content: ''; display: none; }
	.FormSetHor > h2, .FormSetVert > h2 { font-size: 30px; font-weight: 700; /*background-color:#eee;*/ margin: 20px 0 10px 0; padding: 10px 18px 10px 0; }
		/*.FormSetHor > h2:after {content:''; display:none;}*/
		.FormSetHor > h2:first-of-type, .FormSetVert > h2:first-of-type { margin: 0; border-top-left-radius: 5px; border-top-right-radius: 5px; }
	.FormSetHor > h3, .FormSetHor > section > h3, .FormSetVert > h3, .FormSetVert > section > h3 { font-size: 16px; font-weight: 400; background-color: #eee; margin: 10px 0 0 0; padding: 14px 14px 14px 20px; }
		.FormSetHor > h3:first-child, .FormSetHor > section > h3:first-child, .FormSetVert > h3:first-child, .FormSetVert > section > h3:first-child { margin: 0; border-top-left-radius: 5px; border-top-right-radius: 5px; padding: 10px 15px; line-height: 20px; }
	/* For when used as a top heading where sub-level forms are needed. */

	.FormSetHor > div, .FormSetHor > section > div, .FormSetVert > div, .FormSetVert > section > div { padding: 10px 10px 0 10px; }
		.FormSetHor > div:last-of-type, .FormSetVert > div:last-of-type { padding-bottom: 10px; }
		.FormSetHor > div > div:nth-of-type(1), .FormSetHor > section > div > div:nth-of-type(1) { width: 25%; min-width: 150px; max-width: 200px; font-size: 14px; line-height: 18px; color: #666; display: inline-block; }
		.FormSetHor > div > div:nth-of-type(2), .FormSetHor > section > div > div:nth-of-type(2) { width: 70%; max-width: 850px; display: inline-block; position: relative; }
		.FormSetVert > div > div:nth-of-type(1), .FormSetVert > section > div > div:nth-of-type(1) { width: 95%; min-width: 200px; max-width: 95%; font-size: 14px; color: #666; padding: 0 0 5px 0; }
		.FormSetVert > div > div:nth-of-type(2), .FormSetVert > section > div > div:nth-of-type(2) { width: 95%; position: relative; max-width: 850px; }

/* Forms that do not require any heading rows */
.FormSetFilter { border: 1px solid #ccc; border-top-left-radius: 5px; border-top-right-radius: 5px; background-color: #fefefe; margin-bottom: 10px; }
	.FormSetFilter > div { padding: 10px 10px 0 10px; }
		.FormSetFilter > div:last-of-type { padding-bottom: 10px; }
		.FormSetFilter > div > div:nth-of-type(1) { width: 25%; min-width: 150px; max-width: 200px; font-size: 14px; color: #666; display: inline-block; }
		.FormSetFilter > div > div:nth-of-type(2) { width: 70%; max-width: 850px; display: inline-block; position: relative; }

		/* Globally handle vertical alignment */
		.FormSetHor > div > div, .FormSetHor > section > div > div, .FormSetFilter > div > div { vertical-align: top; }
			.FormSetHor > div > div:nth-child(2) > *, .FormSetHor > section > div > div:nth-child(2) > *, .FormSetVert > div > div:nth-child(2) > *, .FormSetVert > section > div > div:nth-child(2) > *, .FormSetFilter > div > div:nth-child(2) > * { /*vertical-align:top;*/ }
	/* Get the vertical alignment fully consistent */

	/* Provide for inline help text */
	.FormSetHor aside, .FormSetVert aside, .FormSetFilter aside { color: #999; font-style: italic; padding: 4px 0; max-width: calc(100% - 10px); }
	.FormSetHor > aside, .FormSetVert > aside, .FormSetFilter > aside { padding: 15px; max-width: calc(100% - 30px); }

/* Provide for situations where Text is presented in place of a form field */
.FormSetHor > div > div:nth-of-type(2) > span, .FormSetHor > section > div > div:nth-of-type(2) > span, .FormSetVert > div > div:nth-of-type(2) > span, .FormSetVert > section > div > div:nth-of-type(2) > span { font-size: 1.2em; }

/* This is no longer used on forms but is still used in the display of LEGACY shopping invoices, CPD, activity history, etc */
.FormTable { margin-top: 30px; margin-bottom: 30px; background-color: #fff; -webkit-box-shadow: 0 0 4px 4px rgba(76, 76, 76, 0.1); -moz-box-shadow: 0 0 4px 4px rgba(76, 76, 76, 0.1); box-shadow: 0 0 4px 4px rgba(76, 76, 76, 0.1); }
	.FormTable th { font-size: 24px; color: #333; font-weight: 300; padding: 18px 10px 18px 18px; background-color: #fafafa; text-align: left; border-bottom: 3px solid #e8e8e8; }
	.FormTable td { font-size: 16px; color: #333; font-weight: 300; padding: 6px 15px; }
.FormTableHead { font-size: 14px; color: #41ae35; font-weight: bold; padding: 7px 5px 5px 15px; border-left: 4px solid #41ae35; }
.FormCellHeadSub { font-size: 14px; font-weight: 300; background-color: #fafafa !important; }
.InstructTextSml { font-size: 10px; color: #999; }
.FormRequired { font-size: 14px; color: #f60; }
.ErrStdRed { font-size: 14px; color: #f00; vertical-align: top }


/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* Forms :: Generic styling of elements */
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */

.FormInvalid { background-color: #eaced1 !important; }
/* IC: important useful when dealing with telerik */

/* Causes a star to display after mandatory form elements - apply class to a trailing span */
.FormRequiredField::after { content: "*"; color: #00953b; font-size: 20px; font-weight: 500; position: absolute; top: 0; left: calc(90% + 5px); }
.FormRequiredFieldNarrow::after { content: "*"; color: #00953b; font-size: 20px; font-weight: 500; margin-left: 5px; vertical-align: top; }

/* Default form element styling */
input[type="text"], input[type="password"], textarea { display: inline-block; padding: 6px; font-size: 16px; color: #000; background-color: #fbfbfb; border: 1px solid #e5e5e5; }
input[type="text"], input[type="password"] { height: 24px; margin: 0 5px 0 0; }
select { display: inline-block; padding: 2px; margin: 0 5px 0 0; font-size: 12px; color: #000; background-color: #fff; border: 2px solid #888; height: 36px; }
/* Padding, border and margin are REDUCED from the 'height'.*/
fieldset { width: 90%; max-width: 800px; border: 2px solid #ccc; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend { border: 0; padding: 0; margin: 0 5px; font-size: 12px; font-weight: normal; }
label { padding: 3px 3px 0 5px; vertical-align: top; }
.RadInput_Default input[type="text"] { height: 32px !important; padding: 5px !important; font-size: 14px !important; color: #000 !important; background-color: #fff !important; border: 1px solid #bbb !important; margin: 0 20px 0 0 !important; }
/* Telerik in their wisdom set: box-sizing:border-box; so padding and margin etc do not alter the set size.*/

/* Give a HOVER effect to form elements */
input[type="text"]:hover, input[type="password"]:hover, textarea:hover, select:hover { border: 1px solid #333; }
input[type="checkbox"]:hover, input[type="radio"]:hover { cursor: pointer; color: #f60; }
label:hover { cursor: pointer; color: #f60; }
.RadInput_Default input[type="text"]:hover { border: 1px solid #333 !important; }
.RadComboBox input[type="text"]:hover { border: none; }

/* Change the appearance on FOCUS of a form element */
textarea:focus, input:focus, select:focus { outline: none; box-shadow: 0 0 10px 0px #ccc; }
input[type="text"]:focus, textarea:focus { background-color: #fffaed; }
input[type="button"]:focus { background-color: #fffaed; }
.RadInput_Default input[type="text"]:focus { background-color: #fffaed !important; }
.RadComboBox input:focus { background-color: #fff !important; }

/* Stop above styling affecting rad combo box*/
.rcbInputCell input[type="text"]:hover { border: initial !important; }
.rcbInputCell input[type="text"]:focus { background-color: initial !important; outline: initial !important; box-shadow: initial !important; }

/* Change the appearance if the element is disabled */
textarea:disabled, input:disabled, select:disabled, submit:disabled { box-shadow: 0 0 8px 0px #fab9b9; }

/* Form element standard widths. Note the 'calc' handling, to account for padding and bordres etc and ensure the contained form elements match exactly their set % width. */
textarea { width: calc(100% - 12px); max-width: 800px; height: 75px; }
/* Assumed to ALWAYS be in a maxchar DIV */
input[type="text"] { width: calc(90% - 19px); max-width: 800px; }
input[type="file"] { width: 100px !important; }
select { width: 200px; }

.FormWidthLong { width: 400px !important; }
.FormWidthMedium { width: 200px !important; }
.FormWidthShort { width: 100px !important; }
.FormWidthTiny { width: 50px !important; }
.FormTextAreaLarge1 { font-size: 12px; width: 90%; max-width: 1200px; height: 400px; }
.FormTextAreaLarge2 { font-size: 12px; width: 90%; max-width: 1200px; height: 700px; }
.FormTextAreaLarge3 { font-size: 12px; width: 90%; max-width: 1200px; height: 200px; }
.FormTextAreaSmall1 { font-size: 12px; height: 60px; }
.FormTextAreaCodeSnippet { font-size: 10px; background-color: #f4f4f4; color: #2d4285; height: 50px; }
.FormTextAreaEmailPreview { width: 100%; max-width: 1200px; height: 700px; border: none; }
.CheckboxMultiCol td { padding-right: 15px; }

/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* Forms :: Containers */
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */

/* Wrap form elements and special sets of form elements to solves issues where the element is made up of multiple parts and/or comes from Telerik.  
This goes last as it often applies over-ride values
The standard width is calc(90% - 5px) to ensure no overlap. Some widths vary to suport contained elements with dodgy code, sch as: width:100%; border:1px solid #000; */

/* ItemFile control - applied at the central control level */
.FormContItemFile { width: calc(90% - 2px); max-width: 800px; border-collapse: collapse; border: 1px solid #ccc; background-color: #efefef; }
	.FormContItemFile caption { text-align: left; font-size: 14px; color: #4b5267; font-weight: bold; padding: 7px 5px 4px 10px; border-color: #ccc; border-style: solid; border-width: 1px 1px 0 1px; background-color: #efefef; background-image: linear-gradient(0deg, #efefef, #fff 90%); border-top-left-radius: 4px; border-top-right-radius: 4px; }
	.FormContItemFile td { padding: 7px 3px 3px 3px; }
	.FormContItemFile tr:first-of-type td { padding: 10px 3px 3px 3px; }

.FormContFileUp { }
	.FormContFileUp input[type="text"] { width: 300px; }
	.FormContFileUp input[type="file"] { width: 65px !important; }
		.FormContFileUp input[type="file"]:hover { cursor: pointer; }
	/* Telerik overrides to get the presentation in line with streamSWEET standard */
	.FormContFileUp .ruFileWrap { height: 32px !important; }
	.FormContFileUp .ruFakeInput { height: 18px !important; padding: 5px !important; font-size: 14px !important; border: 2px solid #e5e5e5 !important; }
		.FormContFileUp .ruFakeInput:hover { border: 1px solid #333 !important; }
	.FormContFileUp .ruButton { height: 32px !important; background-image: none !important; padding: 2px 10px !important; font-size: 12px !important; color: #fff !important; background-color: #538bd0 !important; border-radius: 3px !important; }
	.FormContFileUp .ruButtonHover { background-color: #3f8f4b !important; }

/* Over-ride default image handling for the Telerik tree view - apply to a containing DIV */
.FormContTree img { display: inline; }

/* Remove expand/colaps icon (plus/minus) at top level node of a tree */
.RadTreeView > ul > li > div > span:nth-child(2) { display: none }

/* Prev Next Links */
.NavTreePrevNext { width: 94%; margin: 10px auto; font-size: 12px; border-bottom: 1px solid #ccc; }
	.NavTreePrevNext span { padding: 4px 10px; border-radius: 8px; border: 1px solid #BABABA; margin: 4px 4px 8px; }
		.NavTreePrevNext span:hover { background-color: #fafafa; border: 1px solid #458cc7; }

/* Over-ride default form element settings for auto-complete search box - apply to a containing DIV */
.FormContAutoComplete { width: 202px !important; float: left; margin: 0 5px 0 0; height: 24px; border: 1px solid #ccc; color: #666 !important; background-color: #fff; }
	.FormContAutoComplete .RadComboBox_Default .rcbInputCell, .FormContAutoComplete .RadComboBox_Default .rcbArrowCell { background-image: none !important; padding: 0 !important; border: none !important; }
	.FormContAutoComplete .RadComboBox input[type="text"] { height: 24px !important; font-size: 16px !important; line-height: 24px !important; border: 0 !important; padding: 0 0 0 5px !important; }

/* Handle issues created by the the JQuery that handles the MaxChar functionality on textareas - apply to a containing DIV */
.FormContTextAreaMaxChar { width: calc(90% - 5px); max-width: 800px; display: inline-block; margin: 0 5px 0 0; }
.maxlength-feedback { font-size: 12px; color: #ccc; }

/* Over-ride default table cell formatting for the Telerik HTML editor and apply a max width - apply to a containing DIV */
.FormContHtmlEdit { width: calc(90% - 2px); max-width: 800px; display: inline-block; }
.FormContHtmlEditWide { width: calc(90% - 2px); max-width: 1000px; display: inline-block; }
	.FormContHtmlEdit td, .FormContHtmlEditWide td { padding: 0 !important; }
	/* Wrap a Telerik Editor with a Div and apply this Class, otherwise inherited cellpadding causes the editor layout to mess up. */
	.FormContHtmlEdit textarea, .FormContHtmlEditWide textarea { border: none !important; max-width: none !important; }

/* Over-ride default settings for the Telerik Date Picker - apply to a containing DIV */
.FormContDate { padding: 0; display: inline-block; margin-right: 10px; }
	.FormContDate > div, .FormContDate > div > table { width: 140px !important; }
	.FormContDate td > span > input:first-of-type { height: 32px !important; /*margin-top:-1px !important;*/ padding: 5px !important; }

/* OContain radio button in a controlled manner */
.FormContRadioSet { max-width: 800px; display: inline-block; }
	.FormContRadioSet td { padding: 0 10px 0 0; }

/* Special handling to make a nice 'QUICK search' that appears at the top right of the screen, typically within an admin module */
.ContQuickSearch { right: 30px; position: absolute; top: 88px; width: 250px; }
	.ContQuickSearch input[type="text"] { margin: 0; display: block; float: left; }

/* Special handling to make a nice 'FILTER search' where multiple form elements sit on a single row */
.ContFilterSearch { overflow: hidden; }
	.ContFilterSearch img, .ContFilterSearch input[type="text"], .ContFilterSearch input[type="password"], .ContFilterSearch select, .ContFilterSearch input[type="button"], .ContFilterSearch input[type="submit"], .ContFilterSearch span, .ContFilterSearch .FormContDate { display: block; float: left; }

/* Give nice layout of the form buttons that sit at the bottom of each form - apply to a containing DIV */
.ContFormSubmit { overflow: hidden; margin: 10px 0 20px 5px; }

/*Special handling for 'Groups' where added data is requested after ticking a checkbox.  This 'slides' the textbox into view on the user ticking the related checkbox.  Note!  Assumes only 1 checkbox per GroupSet.*/
.GroupCheckboxList label { margin-left: 5px; }
.GroupCheckboxList input[type="checkbox"], .GroupCheckboxList label, .GroupCheckboxList input[type="text"] { /*display:block; float:left;*/ }
.GroupCheckboxList input[type="text"] { margin: -3px 0 0 10px; visibility: hidden; width: 0; transition: width 1.0s; -webkit-transition: width 1.0s }
.GroupCheckboxList input[type="checkbox"]:checked + input[type="text"] { visibility: visible; width: 150px; }
.GroupCheckboxList input[type="checkbox"]:checked + label + input[type="text"] { visibility: visible; width: 150px; }


/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* Forms :: Buttons */
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */

/* Applied 'OnClick' event to disable the button from being double clicked */
submit:disabled { box-shadow: 0 0 8px 0px #fab9b9; background-color: #993300; cursor: progress; }
.FormButtonSubmitted { background-color: #993300; cursor: progress; }

/* Full size buttons */
.BtnAdd, .BtnUpdate, .BtnDelete, .BtnCancel, .BtnSearch, .BtnUpload, .BtnSubmit, .BtnClone, .BtnImport, .BtnArchive, .BtnGo, .BtnContinue, .BtnUpdateQty, .BtnUnlock, .BtnActivate, .BtnResendActivateEmail, .BtnSynch, .BtnPreview, .BtnReportShow, .BtnReportExport, .BtnSchedule, .BtnSend, .BtnSendTest, .BtnSendStop, .BtnClearUnsent, .BtnConfirm, .BtnBack, .BtnSelect, .BtnAssign, .BtnClose, .BtnCheck, .BtnSet, .BtnInvite, .BtnRemind, .BtnClear, .BtnCloseOff, .BtnRecalculate, .BtnValidate, .BtnRestore, .BtnYes, .BtnNo, .BtnEdit, .BtnLogin { margin: 0 5px 0 0; padding: 8px 22px; font-size: 16px; color: #fff; border: 0; background-color: #000; cursor: pointer; border-radius: 4px; }

	.BtnAdd:hover, .BtnYes:hover { background-color: #3f8f4b; }
	.BtnDelete:hover, .BtnNo:hover { background-color: #8f3f43; }
	.BtnUpdate:hover, .BtnCancel:hover, .BtnSearch:hover, .BtnUpload:hover, .BtnSubmit:hover, .BtnClone:hover, .BtnImport:hover, .BtnArchive:hover, .BtnGo:hover, .BtnContinue:hover, .BtnUpdateQty:hover, .BtnUnlock:hover, .BtnActivate:hover, .BtnResendActivateEmail:hover, .BtnSynch:hover, .BtnPreview:hover, .BtnReportShow:hover, .BtnReportExport:hover, .BtnSchedule:hover, .BtnSend:hover, .BtnSendTest:hover, .BtnSendStop:hover, .BtnClearUnsent:hover, .BtnConfirm:hover, .BtnBack:hover, .BtnSelect:hover, .BtnAssign:hover, .BtnClose:hover, .BtnCheck:hover, .BtnSet:hover, .BtnInvite:hover, .BtnRemind:hover, .BtnClear:hover, .BtnCloseOff:hover, .BtnRecalculate:hover, .BtnValidate:hover, .BtnRestore:hover, .BtnEdit:hover, .BtnLogin:hover { background-color: #000; }

	.BtnAdd:focus, .BtnYes:focus { background-color: #3f8f4b; }
	.BtnDelete:focus, .BtnNo:focus { background-color: #8f3f43; }
	.BtnUpdate:focus, .BtnCancel:focus, .BtnSearch:focus, .BtnUpload:focus, .BtnSubmit:focus, .BtnClone:focus, .BtnImport:focus, .BtnArchive:focus, .BtnGo:focus, .BtnContinue:focus, .BtnUpdateQty:focus, .BtnUnlock:focus, .BtnActivate:focus, .BtnResendActivateEmail:focus, .BtnSynch:focus, .BtnPreview:focus, .BtnReportShow:focus, .BtnReportExport:focus, .BtnSchedule:focus, .BtnSend:focus, .BtnSendTest:focus, .BtnSendStop:focus, .BtnClearUnsent:focus, .BtnConfirm:focus, .BtnBack:focus, .BtnSelect:focus, .BtnAssign:focus, .BtnClose:focus, .BtnCheck:focus, .BtnSet:focus, .BtnInvite:focus, .BtnRemind:focus, .BtnClear:focus, .BtnCloseOff:focus, .BtnRecalculate:focus, .BtnValidate:focus, .BtnRestore:focus, .BtnEdit:focus, .BtnLogin:focus { background-color: #3f578f; }

/* Small buttons (short to fit normal line height) */
.BtnSmlAdd, .BtnSmlUpdate, .BtnSmlSearch, .BtnSmlContinue, .BtnSmlSendTest, .BtnSmlReportShow, .BtnSmlSelect, .BtnSmlClear, .BtnSmlAssign, .BtnSmlGo, .BtnSmlYes, .BtnSmlNo { margin: 0 5px 0 0; padding: 1px 15px 3px 15px; border: 0; height: 24px; font-size: 12px; color: #fff; background-color: #000; cursor: pointer; border-radius: 3px; }

	.BtnSmlAdd:hover, .BtnSmlYes:hover { background-color: #3f8f4b; }
	.BtnSmlNo:hover { background-color: #8f3f43; }
	.BtnSmlUpdate:hover, .BtnSmlSearch:hover, .BtnSmlContinue:hover, .BtnSmlSendTest:hover, .BtnSmlReportShow:hover, .BtnSmlSelect:hover, .BtnSmlClear:hover, .BtnSmlAssign:hover, .BtnSmlGo:hover { background-color: #000; }

	.BtnSmlAdd:focus, .BtnSmlYes:focus { background-color: #3f8f4b; }
	.BtnSmlNo:focus { background-color: #8f3f43; }
	.BtnSmlUpdate:focus, .BtnSmlSearch:focus, .BtnSmlContinue:focus, .BtnSmlSendTest:focus, .BtnSmlReportShow:focus, .BtnSmlSelect:focus, .BtnSmlClear:focus, .BtnSmlAssign:focus, .BtnSmlGo:focus { background-color: #3f578f; }

/* custom button for the generic search at the top right of the screen */
.BtnSmlGoSearch { margin: 0 0 0 -7px; padding: 1px 5px 3px 5px; border: 0; height: 26px; font-size: 12px; color: #fff; background-color: #584b7a; background-image: linear-gradient(0deg, #584b7a, #bab3c9 90%); cursor: pointer; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
	.BtnSmlGoSearch:hover { background-color: #3f578f; }
	.BtnSmlGoSearch:focus { background-color: #3f578f; }

/* Generic - create a new item button */
.BtnAddNew { background-color: transparent; margin: 0; padding: 0 10px 0 8px; font-size: 12px; height: 100%; border: none; cursor: pointer; color: #222; font-weight: normal; float: right; border: 1px solid transparent; }
	.BtnAddNew:hover, .BtnAddNew:focus { background-color: #b9faca; text-decoration: none; color: #222; border: 1px solid #57bd71; }

/* Make a button that looks like Text that then looks like a button on hover */
.BtnText { color: #333; font-size: 100%; border: 1px solid transparent; padding: 5px 10px; background-color: transparent; cursor: pointer; border-radius: 4px; }
	.BtnText:hover, .BtnText:focus { border: 1px solid #333; background-color: #fff !important; }
/* Update Shopping Cart Qty - make it  more obvious */
.BtnTextShow { border: 1px solid #191e92; color: #fff; background-color: #191e92; animation-name: UpdateCartQty; animation-duration: 2s; animation-iteration-count: 20; -webkit-animation-name: UpdateCartQty; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: 20; }
	.BtnTextShow:hover, .BtnTextShow:focus { color: #90c6fc; }

/* BOOKING BUTTONS */
.BookingButtons { margin: 5px auto; padding: 8px 22px; font-size: 16px; color: #fff; border: 0; text-align: center; background-color: #000; display: block; cursor: pointer; border-radius: 4px; }
	.BookingButtons:hover { background-color: #3f8f4b; }
	.BookingButtons:focus { background-color: #3f8f4b; }




/* SHOPPING BASKET */
.ImgBtnBacketQtyUpdate
.ImgBtnBacketQtyUpdateAlert { border: 1px solid #f00; background-color: #f3f3f3; }
.ImgBtnBacketQtyUpdate:hover, .ImgBtnBacketQtyUpdate:focus { color: #522e91; border: 1px solid #999; background-color: #ddd; }

/* A HREF Buttons
===================== */

.ButtonOrangeLge { background-color: #ff9c2b; text-align: center; padding: 4px 20px 4px 20px; margin: 10px 6px 10px 6px; border-radius: 4px; font-size: 16px; white-space: nowrap; }
a.ButtonOrangeLge:link, a.ButtonOrangeLge:visited { color: #fff; text-decoration: none; }
a.ButtonOrangeLge:hover, a.ButtonOrangeLge:active { background-color: #ffae52; }

.ButtonA { background-color: #e9e9e9; text-align: center; padding: 3px 15px 3px 15px; margin: 0 6px; border-radius: 3px; }
a.ButtonA:link, a.ButtonA:visited { color: #393b4a; text-decoration: none; }
a.ButtonA:hover, a.ButtonA:active { color: #7a7a7a; background-color: #d7d7d7; text-decoration: none; }

.ButtonALge { background-color: #ff9c2b; text-align: center; padding: 4px 20px 4px 20px; margin: 0 6px; border-radius: 4px; font-size: 16px; }
a.ButtonALge:link, a.ButtonALge:visited { color: #393b4a; text-decoration: none; }
a.ButtonALge:hover, a.ButtonALge:active { color: #7a7a7a; background-color: #d7d7d7; text-decoration: none; }

/* Button Base */
/* New direction for standardising buttons */
.BtnBase { display: inline-block; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
	.BtnBase a { display: block; }
.BtnLarge { font-size: 1.3rem; padding: 0.5rem 1.3rem; }

/* Image Buttons
===================== */
/* EVENT */
/* IC:these were created/scheduled for conversion while ago, and finally put to use now. I got them updated with correct sizes and new path (/cpd/) */
.ImgBtnEventAdd { width: 165px; height: 42px; background: url(/assets/images/cpd/button_add_event.gif) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; }
.ImgBtnEventRemove { width: 165px; height: 42px; background: url(/assets/images/cpd/button_remove_event.gif) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; }
.ImgBtnEventFind { width: 67px; height: 33px; background: url(/assets/images/cpd/button_find_events.gif) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; }
.ImgBtnReportFind { width: 133px; height: 33px; background: url(/assets/images/cpd/button_find_report.gif) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; }

.ImgBtnEventBook { width: 125px; height: 33px; background: url(/assets/images/button_booknow.svg) no-repeat 0px 0px; margin: 10px 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; }
	.ImgBtnEventBook:hover { opacity: .8; }

.ImgBtnEventBookLge { width: 193px; height: 51px; background: url(/assets/images/button_booknow_lge.svg) no-repeat 0px 0px; margin: 20px 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; }
	.ImgBtnEventBookLge:hover { opacity: .8; }

/* EVENT MULTIPLE LOCATIONS */
.EventGridTable { width: 100%; margin-top: 20px; margin-bottom: 30px; background-color: #f6f7f5; }
	.EventGridTable th { background-color: #666; color: #fff; font-size: 12px; line-height: 15px; padding: 6px 5px; }
	.EventGridTable td { color: #000; font-size: 11px; font-size: 13px; padding: 3px; border-bottom: 1px solid #cfcfcf; }

/* RUGBY SEARCH */
.ImgBtnSearchGo { width: 33px; height: 35px; background: url(/assets/images/button_search_go.gif) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; }
.ImgBtnSearchGoLarge { width: 36px; height: 28px; background: url(/assets/images/button_go_lge.gif) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; }

/* FEEDBACK BUTTONS */
.ImgBtnFeedbackSubmit { width: 186px; height: 38px; background: url(/assets/images/button_submit_feedback.svg) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; }
.ImgBtnFeedbackIconPlus { width: 24px; height: 24px; background: url(/assets/images/icon_plus_feedback.svg) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; }
	.ImgBtnFeedbackIconPlus:hover { background: url(/assets/images/icon_plus_feedback_on.svg) no-repeat 0px 0px; }
.ImgBtnFeedbackIconPicture { width: 24px; height: 24px; background: url(/assets/images/icon_picture_feedback.svg) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; }
	.ImgBtnFeedbackIconPicture:hover { background: url(/assets/images/icon_picture_feedback_on.svg) no-repeat 0px 0px; }

/* CHECKOUT */
.BacktoCheckoutLink { background-color: #069; color: #fff; padding: 8px 20px; text-align: center; font-size: 12px; border-radius: 4px; }
a.BacktoCheckoutLink:link, a.BacktoCheckoutLink:visited { color: #fff; text-decoration: none; display: block; }
a.BacktoCheckoutLink:hover, a.BacktoCheckoutLink:active { color: #fff; text-decoration: none; background-color: #333; pointer: cursor; }

/* MISC BUTTONS */
.ImgBtnSubmit { width: 101px; height: 29px; background: url(/assets/images/button_submit.gif) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; }
	.ImgBtnSubmit:hover { opacity: .8; }
.ImgButtonCloseBox { width: 101px; height: 31px; background: url(/assets/images/button_closebox.gif) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; }
.ImgBtnFind { width: 66px; height: 24px; background: url(/assets/images/button_find.gif) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; }

.ImgBtnTop { width: 141px; height: 34px; background: url(/assets/images/button_top.svg)no-repeat 0px 0px; margin: 20px 0 20px 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; text-align: center; font-size: 13px; line-height: 27px; }
	.ImgBtnTop a:link { text-decoration: none; display: block; width: 141px; height: 34px; margin: 0; }
	.ImgBtnTop:hover { background: url(/assets/images/button_top_on.svg) no-repeat 0px 0px; transition: all 0.9s ease; }

.IconButton { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; background-color: #000; padding: 8px 16px 8px 8px; }
	.IconButton:hover { cursor: pointer; }
	.IconButton a:link { color: #fff; }

/* IC:these are new classes, out of full ImageButton conversion */
.ImgBtnCPDPdfDownload { width: 132px; height: 25px; background: url(/assets/images/icon_download_report_pdf.png) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; }
.ImgBtnCPDAddNew { width: 48px; height: 18px; background: url(/assets/images/CPD/button_addnew.gif) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; }
.ImgBtnLoginFeature { width: 101px; height: 29px; background: url(/assets/images/button_login.gif) no-repeat 0px 0px; margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; display: inline-block; }

/* A special link on the logged in user membership pages for a user to link through to the cancel tab */
.btn-cancel-membership { padding: 20px 40px 10px 0; text-align: right; }


/* ======================================================================================== */
/* ======================================================================================== */
/* Modules - Shared */
/* ======================================================================================== */
/* ======================================================================================== */

/* Home Feature Controls
===================== */
.NewsHomeFeatureHead { padding: 5px; background-color: #ccc; }
/* usercontrol\front\homepage\News.ascx */
.EventsHomeFeatureHead { padding: 5px; background-color: #ccc; }
/* usercontrol\front\homepage\Events.ascx */
.CaseStudyFeatureHead { padding: 5px; background-color: #ccc; }
/* usercontrol\front\homepage\CaseStudy.ascx */
.HomeEvents { padding: 10px 0; border-bottom: 1px solid #ccc; }
.HomeCaseStudy { padding: 10px 0; border-bottom: 1px solid #ccc; }
.FriendsPanel { padding: 2px; }
.FriendsPanelHeader { padding: 3px 5px; background-color: #e6e6e6; font-size: 11px; }

/* Homepage Hero */
.HeroPosition { margin: 0 auto; }

/* HERO - STATIC 
===================== */
.HeroPanel { width: 70%; margin: 110px 0; color: #fff; padding: 1rem 2rem; float: left; position: relative; }

/* Homepage Main Button */
.HeroStaticButton { background-color: #fff; position: relative; font-size: 16px; padding: 12px 30px; font-weight: bold; margin: 10px 0; }
	.HeroStaticButton a:link, .HeroStaticButton a:visited { text-decoration: none !important; color: #000 !important; }
	.HeroStaticButton:hover { opacity: 0.8; }
	.HeroStaticButton:active { background-image: none; }

/* Homepage Secondary Button */
.HeroStaticButtonAlt { background-color: #333; position: relative; font-size: 16px; padding: 12px 36px; font-weight: bold; margin: 10px 0 10px 30px; }
	.HeroStaticButtonAlt a:link, .HeroStaticButtonAlt a:visited { text-decoration: none !important; color: #fff !important; }
	.HeroStaticButtonAlt:hover { opacity: 0.8; }
	.HeroStaticButtonAlt:active { background-image: none; }

/* Citation */
.HomepageHeroStatic_Citation_Outer { max-width: 100%; }
.HomepageHeroStatic_Citation { position: absolute; right: 20px; bottom: 36px; background-color: #333; color: #fff; padding: 5px 10px; line-height: 1.4; opacity: 0.6; }
	.HomepageHeroStatic_Citation i { font-family: Material Icons; font-size: 1em; font-style: normal; vertical-align: middle; }
		.HomepageHeroStatic_Citation i::before { content: "\E88F" }
	.HomepageHeroStatic_Citation span { font-size: 12px; font-style: italic; color: #fff; text-decoration: none; }
	.HomepageHeroStatic_Citation a { font-size: 12px; font-style: italic; color: #fff; text-decoration: none; }
		.HomepageHeroStatic_Citation a:hover { text-decoration: underline !important; }
/* Background Image */
.HeroImageStatic { min-height: 300px; margin-top: 0; background-repeat: no-repeat; background-size: cover; /*contain;*/ background-position: right; overflow: hidden; /*background-attachment:fixed;*/ }
	.HeroImageStatic h1 { font-weight: 700; color: #fff; margin: 0; font-size: 50px; }
		.HeroImageStatic h1:after { content: ''; display: none; }
	.HeroImageStatic h3 { color: #fff; margin-top: 5px; font-weight: 300; }
	.HeroImageStatic hr { border-color: #bdbebf; margin: 20px 0; }

/* Product Listings 
===================== */
/*** THIS BLOCK OF CSS NEEDS TO BE FULLY REWORKED - IT WAS COPIED WITHOUT THOUGHT IS IS WAY, WAY, WAY OVER COMPLICATED FOR WHAT IT DOES ***/
.TableHeadProductList { font-size: 12px; font-weight: bold; color: #fff; background-color: #666; padding: 3px 3px 3px 6px; text-align: left; }
#ProductList, #ProductList ul, .ProductList, .ProductList ul { list-style: none; line-height: 14px; padding: 0; margin: 0; background-color: #e5e5e5; }
	#ProductList .sel, .ProductList .sel { background-color: #fff; background-image: url(/assets/images/arrow_prod_toplevel_on.gif); }
	#ProductList a, .ProductList a { font-weight: normal; display: block; text-decoration: none; color: #000; }
	#ProductList li, .ProductList li { margin: 0; padding: 0; background: url(/assets/images/arrow_prod_toplevel.gif) 3px 6px no-repeat; list-style: none; border-bottom: 1px solid #f7f7f7; }
		#ProductList li a, .ProductList li a { width: 146px; width: 126px; padding: 4px 5px 3px 15px; background: url(/assets/images/arrow_prod_toplevel.gif) 3px 6px no-repeat; color: #878c9c; }
		#ProductList li ul, .ProductList li ul { border-width: 0; }
		#ProductList li li .sel, .ProductList li li .sel { background-color: #fff; color: #c00; background-image: url(/assets/images/arrow_prod_level2_on.gif); }
		#ProductList li li, .ProductList li li { margin: 0; padding: 0; background: url(/assets/images/arrow_prod_level2.gif) 10px 6px no-repeat; background-color: #f7f7f7; border-bottom: 1px solid #fff; }
			#ProductList li li a:hover, .ProductList li li a:hover { color: #c00; background-image: url(/assets/images/arrow_prod_level2_on.gif); }
			#ProductList li li a, .ProductList li li a { width: 146px; width: 116px; padding: 4px 5px 3px 25px; background: url(/assets/images/arrow_prod_level2.gif) 10px 6px no-repeat; }
	#ProductList a:hover, .ProductList a:hover { color: #c00; background-image: url(/assets/images/arrow_prod_toplevel_on.gif); }

.ProductVariationTable { width: 100%; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; background-color: #fff; }
	.ProductVariationTable th { padding: 3px 2px; font-size: 11px; background-color: #fafafa; }
	.ProductVariationTable td { padding: 3px 2px; font-size: 11px; }

.ProductHeader { border-radius: 4px; color: #fff; text-align: center; padding: 16px 0; background-color: #425d91; font-size: 18px; line-height: 20px; font-weight: 400; margin: 20px auto; }
	.ProductHeader h3 { margin: 0; color: #fff; }

/* Image Album 
===================== */
.AlbumImagePopup { background-color: #fff; border-collapse: collapse; margin: 0px; padding: 0px; width: 955px; }
.AlbumImagePopupCellHeader { vertical-align: top; font-size: 12px; height: 40px; background-image: url(/assets/images/tile_stripe.jpg); background-repeat: repeat-x; color: #fff; font-weight: bold; }
.AlbumImagePopupCellImage { vertical-align: middle; text-align: center; padding: 0px 5px 5px 5px; width: 740px; }
.AlbumImagePopupCellThumbs { vertical-align: top; text-align: left; width: 225px; }
.AlbumImageScrollerMainImage { width: 100%; text-align: left; padding: 10px; }
.AlbumImageScrollerThumbnails { width: 100%; }
.AlbumImageLargeImage { width: 700px; height: 100%; }
.AlbumImageThumbnailImageBorder { margin: 0px 5px 5px 0px; width: 90px; height: 90px; }
	.AlbumImageThumbnailImageBorder td { border: 1px solid #ccc; }
		.AlbumImageThumbnailImageBorder td:hover, .AlbumImageThumbnailImageBorder .AlbumImageThumbnailSelected { border: 2px solid #f60; }
	.AlbumImageThumbnailImageBorder img { padding-top: 3px; margin-left: auto; margin-right: auto; }
.AlbumImageFileDescriptionBox { display: none; position: absolute; margin: 0px; padding: 0px; float: left; border: 1px solid #ccc; background-color: #ddd; text-align: left; width: 400px; }
	.AlbumImageFileDescriptionBox p { padding: 5px; margin: 0px; }

/* Image Rotator 
===================== */
.RotatorImageList { margin-left: auto; margin-right: auto; }
.AlbumImageRotatorImageBorder { margin: 0px 5px 5px 0px; width: 90px; height: 78px; }
	.AlbumImageRotatorImageBorder td { border: 1px solid #ccc; }
		.AlbumImageRotatorImageBorder td:hover { border: 2px solid #f60; }
	.AlbumImageRotatorImageBorder img { padding-top: 3px; }
.RadRotator li { list-style: none; }

/* Comments 
===================== */
.CommentHeader { border-bottom: 3px solid #666; color: #000; font-weight: bold; padding: 6px 0; }
.CommentAvatar, .CommentAvatarAlt { border-bottom: 1px solid #808080; padding: 5px; }
.CommentText, .CommentTextAlt { background-color: #fff; border-bottom: 1px solid #808080; color: #000; font-size: 12px; padding: 10px 5px 8px; }
.CommentItemNumber { color: #333; font-size: 12px; }
.CommentTextUserName { color: #333; font-size: 12px; font-weight: bold; }
.CommentTextDate { color: #999; font-size: 11px; }
.CommentTextTime { color: #999; font-size: 11px; }

/* Ratings 
===================== */
.filledRatingStar { background-image: url(/assets/images/FilledStar.png); }
.ratingStar { background-repeat: no-repeat; cursor: pointer; display: block; font-size: 0; height: 12px; margin: 0; padding: 0; width: 13px; }
.emptyRatingStar { background-image: url(/assets/images/EmptyStar.png); }
.savedRatingStar { background-image: url(/assets/images/SavedStar.png); }

/* Feedback 
===================== */
.FeedbackTable { width: 850px; }
.feedbackPosition { position: fixed; bottom: 40px; right: 0px; }
.FeedbackMenu { padding: 20px 0 0 0; }
	.FeedbackMenu img { margin: 5px 0; }
.FeedbackSlider { width: 400px; }
	.FeedbackSlider td { padding: 12px 0; }

/* Shop - Shared 
===================== */
.PriceText { Color: #333; font-size: 16px; font-weight: bold; }
.PriceTextHasOnSale { Color: #333; font-size: 14px; text-decoration: line-through; }
.PriceTextOnSale { Color: #333; font-size: 16px; font-weight: bold; }
.PriceGroup { color: #999; font-size: 12px; font-style: italic; padding-left: 6px; }

/* Search Form */

/* Telerik Combo Box */
.SearchPanel .RadComboBox input[type="text"] { height: 40px !important; font-size: 20px !important; line-height: normal !important; border: 0 !important; padding: 3px 0 0 20px !important; }
.SearchPanel .RadComboBox_Default .rcbInputCell, .SearchPanel .RadComboBox_Default .rcbArrowCell { background-image: none !important; padding: 0 !important; }


/*----------------------------------------------*/
/* Grid Layout -  Responsive Columns */

/* ----Generic handling----*/

/* Make the active area the same size as the contained DIV */
.PanelItemGrid { padding: 0 5px; }
	.PanelItemGrid > article { float: left; position: relative; background-color: #fff; }
		.PanelItemGrid > article > a { display: block; text-decoration: none; }

			/* Set the primary content container, including a visual border and hover effect for the panel */
			.PanelItemGrid > article > a > div { /*border: 1px solid #e1e1e1;*/ overflow: hidden; }
				.PanelItemGrid > article > a > div:hover { box-shadow: 0 0 1px 1px #e3e3e3; }

				/* Manage design of each ELEMENT within the panel */
				.PanelItemGrid > article > a > div > div { width: 90%; margin: 15px auto; text-align: center; }
					.PanelItemGrid > article > a > div > div > img { max-height: 180px; margin: 5px auto; z-index: 50; transition: transform 1s; border: 0; }
				.PanelItemGrid > article > a > div:hover > div > img { transform: scale(1.1,1.1); }
				.PanelItemGrid > article > a > div > div h2 { font-size: 16px !important; line-height: 18px; color: #000; margin: 20px 0 5px 0; }
					.PanelItemGrid > article > a > div > div h2:after { content: ''; display: none; }
				/* Hide green underline */
				.PanelItemGrid > article > a > div > div p { font-size: 13px !important; line-height: 16px; color: #333; margin: 0; }
					.PanelItemGrid > article > a > div > div p:hover { cursor: pointer; }

	/* Layer in special markers such as 'NEW' */
	.PanelItemGrid aside:nth-of-type(1) { position: absolute; z-index: 150; top: 10px; left: 0; }

	/* Layer in ADD TO BASKET button */
	.PanelItemGrid aside:nth-of-type(2) { position: absolute; z-index: 150; bottom: 10px; left: 0; right: 0; }
		.PanelItemGrid aside:nth-of-type(2) a { display: block; width: calc(90% - 16px); margin: 0 auto; text-align: center; padding: 8px 5px; border: 3px solid #fff; }

/* ----Case handling----*/

/* Downloads - 3 columns */
.PanelItemGrid3ColDownloads > article { width: 31%; min-width: 180px; margin: 0 1% 14px 1%; }
	.PanelItemGrid3ColDownloads > article > a > div { height: 380px; }

/* What we Recycle - 3 columns */
.PanelItemGrid3ColRecycle > article { width: 31%; min-width: 180px; margin: 5px 1% 20px 1%; }
	.PanelItemGrid3ColRecycle > article > a > div { height: 380px; background-color:#f6f8fa;}
.CategoryRecycleHeading 		{padding:10px 20px; color:#fff; background-color:#00953b; font-weight:bold; font-size:16px; margin:20px auto 10px auto;}

.PanelItemGrid4ColDownloads > article { width: 23%; min-width: 130px; margin: 5px 1% 20px 1%; }
	.PanelItemGrid4ColDownloads > article > a > div { height: 370px; }

/* Video - 3 columns */
.PanelItemGrid3ColVideo > article { width: 31%; min-width: 300px; margin: 0 1% 14px 1%; }
	.PanelItemGrid3ColVideo > article > a > div { height: 350px; }

/* Generic - 4 columns */
.PanelItemGrid4Col > article { width: 23%; min-width: 130px; margin: 5px 1% 20px 1%; }
	.PanelItemGrid4Col > article > a > div { height: 300px; }

/* Products Categories - 4 columns */
.PanelItemGrid4ColProds > article { width: 23%; min-width: 220px; margin: 5px 1% 20px 1%; }
	.PanelItemGrid4ColProds > article > a > div { height: 380px; }

/* Image Gallery - 4 columns */
.PanelItemGrid4ColImages { margin-top: 20px; }
	.PanelItemGrid4ColImages > article { width: 23%; min-width: 200px; margin: 5px 1% 20px 1%; }
		.PanelItemGrid4ColImages > article > a > div { height: 180px; padding: 0; border: 1px solid #e1e1e1; box-shadow: none; background-color: #fcfcfc; }
			.PanelItemGrid4ColImages > article > a > div:hover { border: 1px solid #b7b7b7; box-shadow: none; }
			.PanelItemGrid4ColImages > article > a > div > img { margin: 0 auto; height: 100%; width: auto; max-width: 480px; }
		.PanelItemGrid4ColImages > article .ImgInfo { z-index: 51; overflow: hidden; background-color: #2b2b2b; color: #fff; opacity: 0.9; position: absolute; top: 40px; height: 0; width: 100%; -webkit-transition: -webkit-transform 0s, height 0.7s; transition: transform 0s, height 0.7s; }
		.PanelItemGrid4ColImages > article:hover .ImgInfo { transform: translate(0,0); -webkit-transform: translate(0,0); height: 110px; border-bottom: 2px solid #eee; }
	.PanelItemGrid4ColImages .ImgTitle { font-size: 13px; line-height: 15px; text-align: center; margin-top: 10px; font-weight: bold; }
	.PanelItemGrid4ColImages .ImgDesc { text-align: center; padding: 5px 10px 0px 10px; font-size: 12px; line-height: 14px; }
	.PanelItemGrid4ColImages .ImgRelatedProducts { text-align: left; padding: 5px 0px 0px 5px; font-size: 12px; line-height: 14px; }

/* Login Dashboard - usercontrol\front\customer\cust_login_dashboard.ascx
===================== */
.LoginField { padding: 3px; width: 120px; background-color: #f4f4f4; border: 2px solid #069; }
.ProfileBoxTable { width: 160px; border: 0; color: #666; font-size: 11px; }
.ProfileInnerTable { width: 130px; margin-left: auto; margin-right: auto; border: 0; }
.ProfileBoxTile { background-image: url(/assets/images/profile_box_tile.gif); background-repeat: repeat-y; background-color: #fff; padding-left: 4px; padding-right: 3px; }
.ProfileCountColumn { color: #666; font-size: 10px; text-align: right; padding-right: 3px; }
.ProfileIcon { padding: 4px 8px 4px 8px; text-align: center; }

.LoginPanelProfile { z-index: 1000; position: absolute; right: 10px; top: 35px; background-color: #fff; width: 250px; }
	.LoginPanelProfile a:link, .LoginPanelProfile a:visited { color: #69646c; }
	.LoginPanelProfile a:hover, .LoginPanelProfile a:active { color: #ff8c0a; }
.LoginPanelProfileHeader { color: #fff; background-color: #384f7b; padding: 8px 12px; font-size: 12px; font-weight: bold; }
.LoginPanelProfileSelect { font-size: 12px; padding: 3px 10px; }
.LoginPanelCancel { background-color: #ccc; font-size: 11px; text-align: center; padding: 2px 8px; margin: 0 10px 6px 0; }
a.LoginPanelCancel:link, a.LoginPanelCancel:visited { text-decoration: none; }
a.LoginPanelCancel:hover, a.LoginPanelCancel:active { color: #fff; background-color: #06c; }

/* Dashboard */
.DashboardProfileBox { width: 95%; margin: 30px 0 30px 0; border: 1px solid #d9d9d9; font-size: 14px; padding: 2px 10px 10px 20px; /*background-color:#f5f5f5;*/ }
	.DashboardProfileBox h2 { margin: 0 0 16px 0; }

.DashboardAvatar img { /*-webkit-box-shadow:0 0 5px 5px rgba(76, 76, 76, 0.1); -moz-box-shadow:0 0 5px 5px rgba(76, 76, 76, 0.1); box-shadow:0 0 5px 5px rgba(76, 76, 76, 0.1);*/ border: 1px solid #e1e1e1; margin: 4px auto; height: 50px !important; }
.DashboardProfileName { font-size: 22px; font-weight: normal; color: #000; }
.DashboardButtonRow { padding: 26px 0; }

.DashboardCompanyInfo { width: 95%; margin: 30px 0 30px 0; border: 1px solid #d9d9d9; font-size: 14px; padding: 2px 10px 10px 20px; /*background-color:#f5f5f5;*/ }
.DashboardTable { width: 100%; margin: 50px auto; background-color: #fafafa; }
	.DashboardTable th { padding: 12px 10px; color: #384f7b; background-color: #eee; }
	.DashboardTable td { padding: 5px 10px; color: #000; border-bottom: 1px solid #e6e6e6; }
.DashboardTableSub { background-color: #DEDEDE !important; }

/* Wizard */
.WizardButtons { padding: 20px 10px; border-top: 2px solid #ccc; margin-top: 20px; }
.WizardPrev { float: left; text-align: left; }
.WizardNext { float: right; text-align: right; }
.WizardSteps { padding: 5px; }
	.WizardSteps > div { float: left; margin: 0 10px 10px 0; padding: 8px 8px 8px 20px; border: 1px solid #ccc; border-radius: 10px; width: 15%; min-width: 100px; text-align: center; white-space: nowrap; }
	.WizardSteps i, .WizardSteps span { vertical-align: middle !important; /*margin:0 !important;*/ line-height: normal; padding: 0; }
	.WizardSteps aside { font-size: 0.8em; }
	.WizardSteps > .StepSel { color: #fff; background-color: #00953b; border: 1px solid #00953b; }

/* CRM Chat
===================== */
.CRMChatOuter { width: 100%; }
.CRMChatPanel { padding: 20px 0 15px 0; border: 1px solid #ddd; }
.CRMChat_Item { clear: both; padding: 8px; }
.CRMChat_Right { Width: 90%; border-radius: 8px; float: right; border: 1px solid #aaa; background-color: #e6eefc; padding: 6px 10px; }
.CRMChat_Left { Width: 90%; border-radius: 8px; float: left; border: 1px solid #aaa; background-color: #f4f4f4; padding: 6px 10px; }
.CRMChat_FileNote { Width: 90%; border-radius: 8px; float: left; border: 1px solid #aaa; background-color: #ffea00; padding: 3px 6px; }
.CRMComm_Left_NotRead { width: 32px; height: 32px; float: left; }
.CRMComm_Right_NotRead { width: 32px; height: 32px; float: right; }
.CRMChat_ItemDateTime { text-align: right; color: #999; font-size: 10px; }
.ChatBoxPanel { background-color: #f0f0f0; border: 1px solid transparent; }
.ChatBoxPanelInput { margin: 15px 10px 0 10px; }
.ChatBox { }
.ChatBoxButton { float: right; margin: 2px 30px 10px 0; overflow: hidden; }
.CRMChat_AttachedFile { Margin-top: 5px; }
.CRMChat_ChatSubject { color: #888; display: block; }

/* Learning */
.QualStandout { border: 3px solid #cbcbcb; padding: 15px 10px; background-color: #f8f4de; }
.CourseDetailBox { border: 1px solid #ccc; padding: 20px; }
.TableInfoHeader { background-color: #ccc; font-size: 18px; color: #333; padding: 12px 18px; }
	.TableInfoHeader h1 { margin: 0; }

/* ======================================================================================== */
/* ======================================================================================== */
/* Static */
/* ======================================================================================== */
/* ======================================================================================== */
.ShrinkWrap { display: block; }
.ShrinkWrapInline { display: inline-block; }
.nobr { display: inline; white-space: nowrap; }
.BackgroundWhite { background-color: #fff; }
.BackgroundGrey { background-color: #ccc; }
.BackgroundTransparent { background-color: transparent; }
.Hidden { visibility: hidden; }
.NoDisplay { display: none; }
.FloatLeft { float: left; }
.FloatRight { float: right; overflow: hidden; }
.OverflowHidden { overflow: hidden; }
.Rotate90 { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }
.Rotate270 { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); }
.AlignLeft { text-align: left; }
.AlignRight { text-align: right; }
.AlignCenter { text-align: center; }
.AlignTop { vertical-align: top; }
.AlignBottom { vertical-align: bottom; }
.AlignCenterImage { margin-left: auto; margin-right: auto; }
.AlignCenterObject { margin-left: auto; margin-right: auto; }
.AlignLeftImage { float: left; }
.AlignRightImage { float: right; }
.AlignVertMiddle { vertical-align: middle; }
.AlignVertMiddle2 { position: relative; top: 50%; transform: perspective(1px) translateY(-50%); }
.RemovePadding { padding: 0 !important; }
.Padding2 { padding: 2px; }
.Padding3 { padding: 3px; }
.Padding4 { padding: 4px; }
.Padding5 { padding: 5px; }
.Padding10 { padding: 10px; }
.Padding20 { padding: 20px; }
.Padding25 { padding: 25px; }
.Padding30 { padding: 30px; }
.PaddingBottom6 { padding-bottom: 6px; }
.PaddingBottom10 { padding-bottom: 10px; }
.PaddingBottom20 { padding-bottom: 20px; }
.PaddingTop5 { padding-top: 5px; }
.PaddingTop6 { padding-top: 6px; }
.PaddingTop8 { padding-top: 8px; }
.PaddingTop20 { padding-top: 20px; }
.PaddingTopBot2 { padding: 2px 0; }
.PaddingRight2 { padding-right: 2px }
.PaddingRight3 { padding-right: 3px }
.PaddingRight5 { padding-right: 5px }
.PaddingRight10 { padding-right: 10px }
.PaddingRight15 { padding-right: 15px }
.PaddingLeft10 { padding-left: 10px; }
.PaddingLeft20 { padding-left: 20px; }
.PaddingLeft50 { padding-left: 50px; }
.PaddingLeft100 { padding-left: 100px; }
.Margin5 { margin: 5px; }
.Margin10 { margin: 10px; }
.Margin20 { margin: 20px; }
.MarginTop3 { margin-top: 3px; }
.MarginTop5 { margin-top: 5px; }
.MarginTop10 { margin-top: 10px; }
.MarginTop20 { margin-top: 20px; }
.MarginTopBot2 { margin-top: 2px; margin-bottom: 2px; }
.MarginLeft5 { margin-left: 5px; }
.MarginLeft7 { margin-left: 7px; }
.MarginLeft12 { margin-left: 12px; }
.MarginLeft20 { margin-left: 20px; }
.MarginBottom3 { margin-bottom: 3px; }
.MarginBottom5 { margin-bottom: 5px; }
.MarginBottom7 { margin-bottom: 7px; }
.MarginBottom20 { margin-bottom: 20px; }
.MarginRight6 { margin-right: 6px; }
.MarginRight20 { margin-right: 20px; }
.Border1Purple { border: 1px solid #e9dcf2; }
.Border1Grey { border: 1px solid #ccc; }
.Border3White { border: 3px solid #fff; }
.BorderRightGrey { border-right: 1px solid #ccc; }
.BorderLeftGrey { border-left: 1px solid #ccc; }
.BorderTopGrey { border-top: 1px solid #ccc; }
.BorderBottomGrey { border-bottom: 1px solid #ccc; }
.BorderTop { border-top: 3px solid #ccc; }
.DividerLine { margin: 10px 0; background-color: #ccc; height: 4px; }
.Border3Grey { border: 3px solid #e2dbe6; }
.Border1Black { border: 1px solid #000; }
.BorderNone { border: none; }

.BackgroundHighlight { background-color: #f7f8fd; }
.BackgroundGreyLight { background-color: #e5e5e5; }
.BackgroundGreyMid { background-color: #ccc; }

.BackgroundDark { background-color: #333; }

.Headline { padding: 20px; text-align: center; background-color: #eee; }
/* Style Guide Presentation */

/* % WIDTH SETTINGS
===================== */
.Width1 { width: 1%; }
.Width2 { width: 2%; }
.Width3 { width: 3%; }
.Width4 { width: 4%; }
.Width5 { width: 5%; }
.Width6 { width: 6%; }
.Width7 { width: 7%; }
.Width8 { width: 8%; }
.Width9 { width: 9%; }
.Width10 { width: 10%; }
.Width12 { width: 12%; }
.Width15 { width: 15%; }
.Width17 { width: 17%; }
.Width19 { width: 19%; }
.Width20 { width: 20%; }
.Width25 { width: 25%; }
.Width30 { width: 30%; }
.Width33 { width: 33%; }
.Width34 { width: 34%; }
.Width35 { width: 35%; }
.Width40 { width: 40%; }
.Width45 { width: 45%; }
.Width50 { width: 50%; }
.Width55 { width: 55%; }
.Width60 { width: 60%; }
.Width65 { width: 65%; }
.Width70 { width: 70%; }
.Width75 { width: 75%; }
.Width80 { width: 80%; }
.Width85 { width: 85%; }
.Width90 { width: 90%; }
.Width95 { width: 95%; }
.Width96 { width: 96%; }
.Width97 { width: 97%; }
.Width98 { width: 98%; }
.Width99 { width: 99%; }
.Width100 { width: 100%; }

.Height250 { height: 250px; }
.Height500 { height: 500px; }
.MinHeight200 { min-height: 200px; }
.MinHeight400 { min-height: 400px; }

.Zindex9 { z-index: 9000; }
.Zindex7 { z-index: 7000; }
.Zindex5 { z-index: 5000; }
.Zindex3 { z-index: 3000; }
.Zindex1 { z-index: 1000; }

/* IMAGE SIZES
===================== */
.ImageBasic { border: 0px; }
.ImageBorderWhite1 { border: 1px solid #fff; }
.ImageBorderWhite2 { border: 2px solid #fff; }
.ImageBorderWhite3 { border: 3px solid #fff; }
.ImageBorderWhite10 { border: 10px solid #fff; }
.ImageBorderGrey1 { border: 1px solid #ccc; }
.ProductImage { margin: 5px auto !important; }

/* Used for square images */
.Image16 { width: 16px; height: 16px; }
.Image18 { width: 18px; height: 18px; }
.Image24 { width: 24px; height: 24px; }
.Image32 { width: 32px; height: 32px; }
.Image40 { width: 40px; height: 40px; }
.Image48 { width: 48px; height: 48px; }
.Image72 { width: 72px; height: 72px; }
.Image128 { width: 128px; height: 128px; }
.Image256 { width: 256px; height: 256px; }

.ImgItem { border: 1px solid #bbb; }


/* COLORS
===================== */
.Red { color: #f00; }
.Green { color: #093; }
.Black { color: #000; }
.White { color: #fff; }
.Orange { color: #f60; }
.Yellow { color: #ff0; }
.GreyDark { color: #333; }
/* ======================================================================================== */
/* ======================================================================================== */
/* Responsive Layouts */
/* ======================================================================================== */
/* ======================================================================================== */

/* For Help with the responsive grid system, follow the link below */
/* http://www.responsivegridsystem.com */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Custom */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* Apply this style directly within an 'img' tag to create images that automatically resize as the parent space shrinks */
.responsive-image img { height: auto !important; max-width: 100% !important; width: 100% !important; }

/* Button to copy content from a form field to the clipboard. It must not be a form element or .NET web forms thinks it is another postback, which can have unexpected issies. */
.copy-html-button { display: inline-block; }

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Column system  */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*  GRID COLUMN SETUP   ==================================================================== */
.col { display: block; float: left; margin: 1% 0 1% 1.6%; }
	.col:first-child { margin-left: 0; }

.colMargin_0 { display: block; float: left; margin: 0; }
	/* Tight Columns */
	.colMargin_0:first-child { margin-left: 0; }

/*  GRID OF TWO   ============================================================================= */
.span_2_of_2 { width: 100%; }
.span_1_of_2 { width: 49.2%; }

/*  GRID OF THREE   ============================================================================= */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }

/*  GRID OF FOUR   ============================================================================= */
.span_4_of_4 { width: 100%; }
.span_3_of_4 { width: 74.6%; }
.span_2_of_4 { width: 49.2%; }
.span_1_of_4 { width: 23.8%; }

/*  GRID OF FIVE   ============================================================================= */
.span_5_of_5 { width: 100%; }
.span_4_of_5 { width: 79.68%; }
.span_3_of_5 { width: 59.36%; }
.span_2_of_5 { width: 39.04%; }
.span_1_of_5 { width: 18.72%; }

/*  GRID OF SIX   ============================================================================= */
.span_6_of_6 { width: 100%; }
.span_5_of_6 { width: 83.06%; }
.span_4_of_6 { width: 66.13%; }
.span_3_of_6 { width: 49.2%; }
.span_2_of_6 { width: 32.26%; }
.span_1_of_6 { width: 15.33%; }

/*  GRID OF SEVEN   ============================================================================= */
.span_7_of_7 { width: 100%; }
.span_6_of_7 { width: 85.48%; }
.span_5_of_7 { width: 70.97%; }
.span_4_of_7 { width: 56.45%; }
.span_3_of_7 { width: 41.94%; }
.span_2_of_7 { width: 27.42%; }
.span_1_of_7 { width: 12.91%; }

/*  GRID OF EIGHT   ============================================================================= */
.span_8_of_8 { width: 100%; }
.span_7_of_8 { width: 87.3%; }
.span_6_of_8 { width: 74.6%; }
.span_5_of_8 { width: 61.9%; }
.span_4_of_8 { width: 49.2%; }
.span_3_of_8 { width: 36.5%; }
.span_2_of_8 { width: 23.8%; }
.span_1_of_8 { width: 11.1%; }

/*  GRID OF NINE   ============================================================================= */
.span_9_of_9 { width: 100%; }
.span_8_of_9 { width: 88.71%; }
.span_7_of_9 { width: 77.42%; }
.span_6_of_9 { width: 66.13%; }
.span_5_of_9 { width: 54.84%; }
.span_4_of_9 { width: 43.55%; }
.span_3_of_9 { width: 32.26%; }
.span_2_of_9 { width: 20.97%; }
.span_1_of_9 { width: 9.68%; }

/*  GRID OF TEN   ============================================================================= */
.span_10_of_10 { width: 100%; }
.span_9_of_10 { width: 89.84%; }
.span_8_of_10 { width: 79.68%; }
.span_7_of_10 { width: 69.52%; }
.span_6_of_10 { width: 59.36%; }
.span_5_of_10 { width: 49.2%; }
.span_4_of_10 { width: 39.04%; }
.span_3_of_10 { width: 28.88%; }
.span_2_of_10 { width: 18.72%; }
.span_1_of_10 { width: 8.56%; }

/*  GRID OF ELEVEN   ============================================================================= */

.span_11_of_11 { width: 100%; }
.span_10_of_11 { width: 90.76%; }
.span_9_of_11 { width: 81.52%; }
.span_8_of_11 { width: 72.29%; }
.span_7_of_11 { width: 63.05%; }
.span_6_of_11 { width: 53.81%; }
.span_5_of_11 { width: 44.58%; }
.span_4_of_11 { width: 35.34%; }
.span_3_of_11 { width: 26.1%; }
.span_2_of_11 { width: 16.87%; }
.span_1_of_11 { width: 7.63%; }

/*  GRID OF TWELVE   ============================================================================= */
.span_12_of_12 { width: 100%; }
.span_11_of_12 { width: 91.53%; }
.span_10_of_12 { width: 83.06%; }
.span_9_of_12 { width: 74.6%; }
.span_8_of_12 { width: 66.13%; }
.span_7_of_12 { width: 57.66%; }
.span_6_of_12 { width: 49.2%; }
.span_5_of_12 { width: 40.73%; }
.span_4_of_12 { width: 32.26%; }
.span_3_of_12 { width: 23.8%; }
.span_2_of_12 { width: 15.33%; }
.span_1_of_12 { width: 6.86%; }


/* Image Crop - Keep this so the refrence point of the selector is the immediate container, and NOT <BODY>.  Refer the _ReadMe file with this tool.
===================== */
#MyImgAreaSelect { position: relative; }


/* Expanding Panels  (FAQ's or Attach a File Link)
===================== */
/* Format our link that will be used to trigger the toggle */
.TriggerText { font-size: 20px; width: 95%; color: #333; padding: 15px 10px 15px 10px; }
.CRMAttchFile .TriggerText { font-family: Arial Narrow, Arial; font-size: 16px; width: 95%; color: #333; padding: 15px 10px 5px 10px; }
div.TriggerText:hover { color: #449246; text-decoration: none; cursor: pointer; }

/* Set the container DIV that will be transitioned */
.Outer { height: 0; position: relative; overflow: hidden; width: auto }

/* Set the inner DIV(s), that hold the real content.  *** THIS MUST HAVE A BORDER OR PADDING APPLIED!  Otherwise the dynamic height calc may fail due to not recognising margin values */
.Inner { padding: 5px 5px 5px 30px; width: auto; }



/* ======================================================================================== */
/* ======================================================================================== */
/* Custom */
/* ======================================================================================== */
/* ======================================================================================== */


/*Example Generic Table Handling*/
.TableStd { width: 90%; border-collapse: collapse; max-width: 1000px; }
	.TableStd > tbody { border: 1px solid #ccc; }
	.TableStd caption { text-align: left; font-size: 14px; color: #4b5267; font-weight: bold; padding: 10px 5px 4px 10px; border-color: #ccc; border-style: solid; border-width: 1px 1px 1px 1px; background-color: #efefef; background-image: linear-gradient(0deg, #efefef, #fff 90%); border-top-left-radius: 4px; border-top-right-radius: 4px; }
	.TableStd th { font-weight: bold; text-align: left; vertical-align: bottom; padding: 10px 5px 4px 5px; background-color: #fff; border-bottom: 1px solid #ccc; }
	.TableStd td { vertical-align: bottom; line-height: 30px; border-top: 1px solid transparent; padding: 0 5px; }
	.TableStd > tbody > tr:nth-child(odd) { background-color: #efefef; }
	.TableStd > tbody > tr:nth-child(even) { background-color: #fefefe; }
	.TableStd > tbody > tr:hover td { border-top: 1px solid #999; border-bottom: 1px solid #999; background-color: #fcf4e6; }
	.TableStd > tbody > tr > td > a { display: block; text-decoration: none; position: relative; }
		.TableStd > tbody > tr > td > a:hover, .TableStd > tbody > tr > td > a:active { text-decoration: underline; color: #f63; cursor: pointer; }

/*Apply additional custom rendering per table*/
/*Customer Profile Table*/
.TableCustProf > thead { border-left: 1px solid #ccc; border-right: 1px solid #ccc; }
	/*Set matching left and right borders in the heading row*/
	.TableCustProf > thead > tr > th:nth-of-type(3), .TableCustProf > tbody > tr > td:nth-of-type(3) { text-align: right; }
	/*Make the number in the 3rd column align right*/
	.TableCustProf > thead > tr > th:nth-of-type(4), .TableCustProf > tbody > tr > td:nth-of-type(4) { text-align: center; }
/*Make the size / button in the 4th column align in the middle*/
.TableCustProf > tbody > tr > td:first-of-type { font-weight: bold; }
/*Make the text in the first column bold*/
.TableCustProf > tbody > tr > td > a.ABtnStd { display: inline-block; text-decoration: none; width: 75px; }
/*Override the A tag handling that the table handling applies over the standard button*/


/*Site wide button style from an Anchor tag */
.ABtnStd { text-align: center; padding: 4px 12px; margin: 3px; font-size: 14px; line-height: normal; display: inline-block; }
a.ABtnStd:link, a.ABtnStd:visited { text-decoration: none; }
a.ABtnStd:hover, a.ABtnStd:active { text-decoration: none; color: #fff !important; background-color: #f08c3d; border-radius: 3px; }

/* Rounded Button */
.BtnRounded { text-align: center; font-weight: 400; padding: 6px 18px; margin: 3px; font-size: 12px; line-height: normal; display: inline-block; border-radius: 12px; background-color: #fff; }
a.BtnRounded:link, a.BtnRounded:visited { text-decoration: none; }
a.BtnRounded:hover, a.BtnRounded:active { text-decoration: none; color: #fff !important; background-color: #458cc7; transition: all 0.3s ease; }

.BtnGroup { display: inline-block; }

/*video list icons*/
.ib_gallery img { display: inline-block; border: 1px solid #aaa; background-color: #f5f5f5; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.ib_gallery_on img { display: inline-block; border: 1px solid #aaa; background-color: #fb9d18; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.ib_brief img { display: inline-block; border: 1px solid #aaa; background-color: #f5f5f5; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.ib_brief_on img { display: inline-block; border: 1px solid #aaa; background-color: #fb9d18; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.ib_list img { display: inline-block; border: 1px solid #aaa; background-color: #f5f5f5; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.ib_list_on img { display: inline-block; border: 1px solid #aaa; background-color: #fb9d18; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }

/*----------------------------------------------*/
/* List Grid Layout -  Responsive Columns */

/*Containers */
.ListItem { }
	.ListItem article { border-top: 1px solid #e3e3e3; padding: 10px 5px; overflow: hidden; }
		.ListItem article > div:nth-of-type(1) { float: left; margin: 0 20px 0 0; vertical-align: top; }
		.ListItem article > div:nth-of-type(2) { float: left; width: 50%; vertical-align: top; }

/* Responsive News */

.NewsMenuHeader { font-weight: 700; font-size: 18px; }
.NewsNavCont { border: 1px solid #ccc; padding: 0 0 0 10px; border-radius: 4px; width: 100%; /*max-width:600px;*/ }
#NewsNav { position: relative; top: 0; height: 40px; background-color: #fafafa; }
	#NewsNav > nav { line-height: 40px; }
		#NewsNav > nav > article { float: left; }
		#NewsNav > nav > aside { float: right; background-color: #777; border-radius: 4px; color: #fff; font-weight: 600; font-size: 16px; width: 40px; height: 40px; text-align: center; }
	#NewsNav:hover { }
		#NewsNav:hover > nav > aside { background-color: #555; }
	#NewsNav a { display: block; padding: 5px 8px; text-decoration: none; color: #222; border-radius: 5px; font-size: 18px; border: 1px solid transparent; }
		#NewsNav a:nth-child(odd) { background-color: #fff; color: #000; border: 1px solid #ccc; }
		#NewsNav a:nth-child(even) { background-color: #f7f7f7; color: #000; border: 1px solid #ccc; }
		#NewsNav a:hover { background-color: #fcf6e8; color: #000; border: 1px solid #e6d39e; }
	#NewsNav > div { border: 1px solid #666; border-radius: 4px; margin: 0; overflow: hidden; width: 100%; position: absolute; top: 40px; left: -10px; max-height: 0; opacity: 0; transition: max-height 2.0s, opacity 0.75s; -webkit-transition: max-height 2.0s, opacity 0.75s; font-weight: 200; color: #333; background-color: #fff; z-index: 500; text-align: left; }
		#NewsNav > div > div { padding: 7px 7px; background-color: #e0e0e0; }
	#NewsNav:hover > div { max-height: 600px; opacity: 1.0; overflow: visible; overflow-y: scroll; }
.NewsMenuDate { font-size: 12px; color: #999; }
.NewsMenuTitle { font-weight: 700; }
.NewsMenuTeaser { font-size: 12px; color: #666; }
.NewsTeaser { font-size: 14px; color: #666; }
.CommentCount { font-size: 10px; color: #333; padding: 1px 5px; background-color: #f7f7f7; margin-left: 4px; border: 1px solid #ccc; border-radius: 3px; }
.NewsMenuViewCount { font-size: 10px; color: #333; padding: 1px 5px; background-color: #f7f7f7; margin-left: 10px; border: 1px solid #ccc; border-radius: 3px; }

.NewsPrevNext { text-decoration: none !important; display: block; float: right; overflow: hidden; padding: 0 10px; background-color: #fff; border-radius: 10px; }
	.NewsPrevNext div { display: block; float: left; line-height: 40px; margin: 0 3px; }
	.NewsPrevNext:hover { background-color: #ddd; color: #fff; }
.NewsArrow { font-weight: bold; font-size: 30px; }
.NewsArrowLeft { transform: rotate(180deg); -webkit-transform: rotate(180deg); }
.NewsArrowRight { float: right; }

.NewsList { padding-left: 24px; background-image: url(/assets/images/bullet_arrow_circle.gif); background-repeat: no-repeat; line-height: 22px; }
.NewsHeader { height: 42px; padding-left: 12px; }

/* Product Keyword Search */
.SearchPanel .RadComboBox input[type="text"] { line-height: normal !important; border: 0 !important; margin: 0; }
.SearchPanel .RadComboBox_Default .rcbInputCell, .SearchPanel .RadComboBox_Default .rcbArrowCell { background-image: none !important; padding: 0 !important; }
.SearchPanel { }

.SearchPanelCol1 { float: left; width: 80%; }
	.SearchPanelCol1 input[type="text"] { width: 95% !important; margin-right: 4px; }
.SearchPanelCol2 { float: left; width: 15%; padding: 3px 0; }

/*
	Support for the 'Auto Complete' search handling, which is based on "Typeahead". On GIT: https://github.com/twitter/typeahead.js
	'Typeahead' is the 'UI' view. Find documentation here: https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#class-names
	'Bloodhound' is a paired component that is the 'suggstion engine'.
*/
.typeahead, .tt-query, .tt-hint { height: 26px !important; padding: 8px 0 8px 12px !important; font-size: 18px !important; border: 2px solid #ccc; border-radius: 2px; outline: none; width: 100%; }
.typeahead { background-color: #fff; }
	.typeahead:focus { border: 1px solid #0097cf; }
.tt-query { box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); color: red !important; }
.tt-hint { color: #bbb !important; }
/* This is the text that shows after the cursor within the form field. */
.tt-menu { width: 420px; margin: 0; padding: 8px 0; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 2px; box-shadow: 0 5px 10px rgba(0,0,0,.2); }
.tt-suggestion { padding: 3px 20px; font-size: 18px; line-height: 24px; color: #000; }
	/* This is the text that shows as the suggestions below the form field. */
	.tt-suggestion:hover { cursor: pointer; color: #fff; background-color: #0097cf; }
	/* .tt-suggestion.tt-cursor				{color:#fff; background-color:#0097cf;  color:purple !important;} */
	.tt-suggestion p { margin: 0; }
.gist { font-size: 14px; color: yellow !important; }


/* Modal pop-up styles - Used to replace JavaScript Alert/Confirm dialogues*/
@keyframes ModalPopup_ModalContent {
	from { top: -100px; opacity: 0; }
	to { top: 0px; opacity: 1; }
}

.ModalPopup_ModalOuter { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.5); z-index: 99999; opacity: 0; -webkit-transition: opacity 10s ease-in; transition: opacity 2s ease-in; display: none; }
	.ModalPopup_ModalOuter:target { opacity: 1; display: block; }
	.ModalPopup_ModalOuter > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 5px; background: #fff; box-shadow: 0 0 10px 5px #555; animation-name: ModalPopup_ModalContent; animation-duration: 0.8s; text-align: left; }

.ModalPopup_ModalCloser { background: #606061; color: #fff; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; border-radius: 12px; box-shadow: 1px 1px 3px #000; }
	.ModalPopup_ModalCloser:hover, .ModalPopup_ModalCloser:link, .ModalPopup_ModalCloser:visited { text-decoration: none; color: #fff; }
	.ModalPopup_ModalCloser:hover { background: #00d9ff; }


/* EFFECTS */
/* Many of these effects come from here:http://ianlunn.github.io/Hover/  */
/*----------------------------------------------*/

/* STREAMSWEET PRODUCTS - HOVER TEXT */
.streamSweet-item { height: auto; float: left; position: relative; }
	.streamSweet-item:hover .img-title { opacity: 0.8; }
.img-title { position: absolute; top: 0; margin: 0; height: 100%; width: 100%; text-align: center; opacity: 0; background-color: #fff; transition: all 1.0s ease; }
	.img-title p { position: absolute; color: #333; top: 30%; width: 100%; text-align: center; }

/* Shadow */
.BtnShadow { -webkit-transition: box-shadow 0.3s; transition: box-shadow 0.3s; }
	.BtnShadow:hover, .BtnShadow:focus, .BtnShadow:active { box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5); }

/* Shrink */
.HoverShrink { -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); }
	.HoverShrink:hover, .HoverShrink:focus, .HoverShrink:active { -webkit-transform: scale(0.9); transform: scale(0.9); }

/* Grow */
.HoverGrow { -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); }
	.HoverGrow:hover, .HoverGrow:focus, .HoverGrow:active { -webkit-transform: scale(1.3); transform: scale(1.1); }

/* Hover Fade */
.HoverFade { }
	.HoverFade:hover { opacity: 0.8; }


/* 'Lazy Load' Animations
===================== */

.animation-element { opacity: 0; position: relative; }

	/*animation element sliding from the left*/
	.animation-element.slide-left { opacity: 0; -webkit-transition: all 1200ms linear; transition: all 1200ms linear; -webkit-transform: translate(-300px, 0px); transform: translate(-300px, 0px); }
		.animation-element.slide-left.in-view { opacity: 1; -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); }


/* USEFUL SNIPPETS */
/* ----------------------------------------------------------------------------------------------------------------------  *
/* Download */
.DownloadFeature { background-color: #f2f9fb; padding: 8px 10px; color: #6c6c6c; border-bottom: 3px solid #e5f4f7; border-top: 3px solid #e5f4f7; margin: 30px auto; }
	.DownloadFeature img { margin: 6px auto; }

/* Editor Images */
.FloatLeftImage { float: left; margin: 20px 20px 20px 0; }
.FloatRightImage { float: right; margin: 20px 10px 20px 20px; }
.CaptionRight { width: 45%; float: right; margin: 0 10px 20px 20px; padding: 20px; }
	.CaptionRight img { margin-bottom: 14px; }

/* TABLE NO BORDER */
.TableNoBorder { margin-bottom: 20px; line-height: 1.5; border-top: 1px solid #bdbebf; background-color: #fff; }
	.TableNoBorder th { background-color: #f5f5f5; font-weight: 300; color: #939598; padding: 10px; }
	.TableNoBorder tr { border-bottom: 1px solid #bdbebf; }
		.TableNoBorder tr:hover { background-color: #f2f9fb; }
	.TableNoBorder td { font-size: 14px; padding: 8px; /*vertical-align:top;*/ }
.TableNoBorderSubHead { color: #939598; font-weight: bold; }

/* TABLE WITH BORDER */
.TableWithBorder { margin-bottom: 20px; line-height: 1.5; border: 2px solid #bdbebf; background-color: #fff; }
	.TableWithBorder th { background-color: #f5f5f5; font-weight: 300; color: #939598; padding: 10px; }
	.TableWithBorder tr { border-bottom: 1px solid #bdbebf; }
		.TableWithBorder tr:hover { background-color: #f2f9fb; }
	.TableWithBorder td { font-size: 14px; padding: 8px; /*vertical-align:top;*/ }
.TableWithBorderSubHead { color: #939598; font-weight: bold; }

/* FEATURE TABLE */
.TableFeature { margin-bottom: 20px; line-height: 1.5; border-top: 1px solid #bdbebf; background-color: #fff; }
	.TableFeature th { background-color: #f5f5f5; font-weight: 300; color: #939598; padding: 10px; }
	.TableFeature tr { border-bottom: 1px solid #bdbebf; }
		.TableFeature tr:hover { background-color: #f2f9fb; }
	.TableFeature td { font-size: 14px; padding: 8px; /*vertical-align:top;*/ }
.TableFeatureSubHead { color: #939598; font-weight: bold; }


/* KEYNOTE */
.Keynote { margin: 20px auto; width: 90%; padding: 25px 30px; border-left: 4px solid #00953b; font-size: 16px; line-height: 24px; display: block }




/* Vote */
.VotePanel { text-align: center; max-width: 160px; color: #ccc; margin: 8px auto; font-size: 14px; line-height: 17px; }
.VoteHeading { font-size: 18px; margin: 0; color: #333; font-weight: 500; }
.VoteSelect { text-align: center; }
.VoteCountLge { font-size: 34px; line-height: 34px; padding: 5px; }
	.VoteCountLge p { margin: 0 0 4px 0; color: #666; }
.VoteUp { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); }
.VoteDown { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }

/* Ratings */
.RatingHeading { padding: 10px 0; color: #666; font-size: 14px; font-weight: bold; }
.RatingContainer { padding: 16px 0; }
.RatingContainerIndividual { padding: 8px 0; }
/* Reduce vertical space a bit */

.SocialCount { color: #ccc; font-weight: normal; }
.SocialTextSmall { font-size: 12px; color: #909090; }


/* ----------------------------------------------------------------------------------------------------------------------  */
/* Media Queries - MUST ALWAYS BE THE LAST BLOCK OF CSS - Always work with biggest screen to smallest.  */
/* ----------------------------------------------------------------------------------------------------------------------  */



/* 1360px*/
@media only screen and ( max-width:1360px) {

	/* Logo / header rows. Smaller for smaller screen + smaller on scroll */
	.ShellLogoMenuHome, .ShellLogoMenu { height: 50px; }
	.LogoMain { width: 140px; left: 3%; }
	.SignUpLink { padding: 3px 15px; font-size: 14px; top: 10px; }
	#nav > ul > li > a { padding: 10px 20px; }
	#nav > ul > li.NavParent > a:after { top: 17px; }

	header.HdrSmaller { height: 45px; }
	.HdrSmaller .LogoMain { width: 100px; }
	.HdrSmaller .SignUpLink { padding: 4px 18px; font-size: 12px; margin-top: 2px; }
	.HdrSmaller #nav > ul > li > a { padding: 7px 20px; }
	.HdrSmaller #nav > ul > li.NavParent > a:after { text-outline: 5px; px; }

	.SignUpLink { right: 25%; }


	/* Menu icon / menu row */
	#nav { top: 10px; padding: 0; width: 100%; text-align: right; }
		#nav > a { color: #00953b; }
			#nav > a:hover { text-decoration: none; color: #222; }
		#nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type { display: inline-block; }
		#nav > ul { display: none; position: absolute; top: calc(100% + 15px); border: 0; width: 100%; height: auto; max-height: 90vh; overflow-y: auto; }
		#nav .menuicon { font-size: 50px; line-height: 20px; margin: 0 30px 0 0; }
		#nav .menutext { display: none; }

		/* First level */
		#nav:target > ul { display: block; }
		#nav > ul > li { display: block; border-bottom: 1px solid #ddd; }
			#nav > ul > li:first-child { border-top: 1px solid #ddd; }
			#nav > ul > li > a { padding: 10px 15px; font-size: 16px; }
			#nav > ul > li.NavParent > a:after { content: "\25BC"; font-size: 14px; color: #888; position: absolute; top: 8px; right: 10px; }
			/*  ? = &#9660; = \25BC  || For special chars, convert entity code to CSS hex here: http://www.evotech.net/articles/testjsentities.html */

			/* Second level */
			#nav > ul > li > ul { width: 100%; position: static; }
			#nav > ul > li:hover > ul { padding: 5px 0 15px 0; border: none; border-top: 1px solid #efefef; }
			#nav > ul > li > ul > li > a { padding: 8px 20px; font-size: 14px; }
			#nav > ul > li > ul > li.NavParent > a:after { content: "\25BC"; font-size: 12px; color: #555; position: absolute; top: 8px; right: 20px; }
			/*  ? = &#9660; = \25BC  || For special chars, convert entity code to CSS hex here: http://www.evotech.net/articles/testjsentities.html */

			/* Third level */
			#nav > ul > li > ul > li > ul { width: 100%; position: static; }
			#nav > ul > li > ul > li:hover > ul { padding: 5px 0 15px 0; border: none; border-top: 1px solid #efefef; max-height: 800px; width: 100%; }
			#nav > ul > li > ul > li > ul > li > a { padding: 8px 25px; font-size: 12px; }

	.HdrSmaller #nav { top: 5px; }
		.HdrSmaller #nav .menuicon { margin: 3px 30px 0 0; }
		.HdrSmaller #nav > ul { top: calc(100% + 5px); }

	.FormSetHor > div > div:nth-of-type(1), .FormSetHor > section > div > div:nth-of-type(1), .FormSetFilter > div > div:nth-of-type(1) { width: 100%; display: block; padding: 0 0 3px 0; }
	.FormSetHor > div > div:nth-of-type(2), .FormSetHor > section > div > div:nth-of-type(2), .FormSetFilter > div > div:nth-of-type(2) { width: 100%; display: block; padding: 0 0 5px 0; }

	.HomeAboutCol1 { width: 100%; }
	.HomeAboutCol2 { width: 100%; }
	.HomeRecyclingCol1 { display: none; }
	.HomeRecyclingCol2 { width: 100%; }
	.HomeRecyclingColWide { display: block; }
}

/* 1080px*/
@media only screen and (max-width:1080px) {

	/* Panel grid */
	.PanelItemGrid4Col > article, .PanelItemGrid4ColProds > article, .PanelItemGrid4ColImages > article { width: 31%; margin: 0 1% 14px 1%; }
}


/* 768px */
@media only screen and (max-width:768px) {
	.PanelItemGrid3Col > article, .PanelItemGrid3ColNarrow > article, .PanelItemGrid3ColDownloads > article, .PanelItemGrid3ColVideo > article, .PanelItemGrid4Col > article, .PanelItemGrid4ColProds > article, .PanelItemGrid4ColImages > article { width: 48%; margin: 0 1% 14px 1%; }

	.FloatRightImage { float: none !important; margin: 30px 0 !important; }
	.FloatLeftImage { float: none !important; margin: 30px 0 !important; }
	.CaptionRight { width: 100%; float: none; margin: 20px auto; }

	.OuterShadowBox { width: 98%; }
	.FooterNavText { text-align: center; font-size: 18px !important; line-height: 26px !important; /*border-bottom:1px solid #666;*/ margin-bottom: 15px; padding-bottom: 10px; }
	.ShellFooter hr { border-top-width: 2px; border-top-style: solid; border-right-style: none; border-bottom-style: none; border-left-style: none; border-top-color: #ccc; margin-right: 0px; margin-left: 0px; text-align: center; }
	.ShellFooter img { margin: 10px auto; }
	.HeroPanel { width: 70% !important; margin: 50px auto; float: none !important; }

	.span_1_of_4Footer { width: 100%; }
	.SearchPanelCol1 { float: left; width: auto; }
	.FooterTextRight { text-align: center; }
	.FooterSocialIcons { float: none; }
}

/* 720px*/
@media only screen and (max-width:720px) {
	.FormWidthLong { width: 100px; }
	.HeroStaticButtonAlt { margin: 10px 0 10px 0; }
	.SignUpLink { display: none; }
}

/* 640px */
@media only screen and (max-width:640px) {
	.PanelItemGrid > article > a > div { height: auto; }
	.PanelItemGrid3Col > article, .PanelItemGrid3ColNarrow > article, .PanelItemGrid3ColVideo > article, .PanelItemGrid3ColDownloads > article, .PanelItemGrid4Col > article, .PanelItemGrid4ColProds > article, .PanelItemGrid4ColImages > article { width: 98%; float: none; margin: 0 auto 10px auto; }
		.PanelItemGrid4ColProds > article > a > div { padding-bottom: 60px; }
		/* Give white space for the layered, bottom positioned 'Buy Now' button, now the height changes to auto. */
		.PanelItemGrid4ColImages > article .ImgInfo { top: 100%; }

	/* Control images when they have more space to display */
	.responsive-image img { height: auto !important; max-width: 80% !important; width: 80% !important; }

	/* Navigation */
	.cNavSub { display: none; }

	.streamSWEETLogo { float: none; margin: 10px auto !important; }

	/* Position the flydown login panel for smaller screens  */
	.PanelLoginCont { right: 5vw; }

	/* Grid Column Handling */
	.col { margin: 1% 0 1% 0%; }

	.span_2_of_2 { width: 100%; }
	.span_1_of_2 { width: 100%; }

	.span_3_of_3 { width: 100%; }
	.span_2_of_3 { width: 100%; }
	.span_1_of_3 { width: 100%; }

	.span_4_of_4 { width: 100%; }
	.span_3_of_4 { width: 100%; }
	.span_2_of_4 { width: 100%; }
	.span_1_of_4 { width: 100%; }

	.span_5_of_5 { width: 100%; }
	.span_4_of_5 { width: 100%; }
	.span_3_of_5 { width: 100%; }
	.span_2_of_5 { width: 100%; }
	.span_1_of_5 { width: 100%; }

	.span_6_of_6 { width: 100%; }
	.span_5_of_6 { width: 100%; }
	.span_4_of_6 { width: 100%; }
	.span_3_of_6 { width: 100%; }
	.span_2_of_6 { width: 100%; }
	.span_1_of_6 { width: 100%; }

	.span_7_of_7 { width: 100%; }
	.span_6_of_7 { width: 100%; }
	.span_5_of_7 { width: 100%; }
	.span_4_of_7 { width: 100%; }
	.span_3_of_7 { width: 100%; }
	.span_2_of_7 { width: 100%; }
	.span_1_of_7 { width: 100%; }

	.span_8_of_8 { width: 100%; }
	.span_7_of_8 { width: 100%; }
	.span_6_of_8 { width: 100%; }
	.span_5_of_8 { width: 100%; }
	.span_4_of_8 { width: 100%; }
	.span_3_of_8 { width: 100%; }
	.span_2_of_8 { width: 100%; }
	.span_1_of_8 { width: 100%; }

	.span_9_of_9 { width: 100%; }
	.span_8_of_9 { width: 100%; }
	.span_7_of_9 { width: 100%; }
	.span_6_of_9 { width: 100%; }
	.span_5_of_9 { width: 100%; }
	.span_4_of_9 { width: 100%; }
	.span_3_of_9 { width: 100%; }
	.span_2_of_9 { width: 100%; }
	.span_1_of_9 { width: 100%; }

	.span_10_of_10 { width: 100%; }
	.span_9_of_10 { width: 100%; }
	.span_8_of_10 { width: 100%; }
	.span_7_of_10 { width: 100%; }
	.span_6_of_10 { width: 100%; }
	.span_5_of_10 { width: 100%; }
	.span_4_of_10 { width: 100%; }
	.span_3_of_10 { width: 100%; }
	.span_2_of_10 { width: 100%; }
	.span_1_of_10 { width: 100%; }

	.span_11_of_11 { width: 100%; }
	.span_10_of_11 { width: 100%; }
	.span_9_of_11 { width: 100%; }
	.span_8_of_11 { width: 100%; }
	.span_7_of_11 { width: 100%; }
	.span_6_of_11 { width: 100%; }
	.span_5_of_11 { width: 100%; }
	.span_4_of_11 { width: 100%; }
	.span_3_of_11 { width: 100%; }
	.span_2_of_11 { width: 100%; }
	.span_1_of_11 { width: 100%; }

	.span_12_of_12 { width: 100%; }
	.span_11_of_12 { width: 100%; }
	.span_10_of_12 { width: 100%; }
	.span_9_of_12 { width: 100%; }
	.span_8_of_12 { width: 100%; }
	.span_7_of_12 { width: 100%; }
	.span_6_of_12 { width: 100%; }
	.span_5_of_12 { width: 100%; }
	.span_4_of_12 { width: 100%; }
	.span_3_of_12 { width: 100%; }
	.span_2_of_12 { width: 100%; }
	.span_1_of_12 { width: 100%; }

	.ForumAvatar { width: 128px; height: 128px; margin: 10px auto; }
}

/* 480px */
@media only screen and (max-width:480px) {
}

/* TELERIK RAD WINDOW Transparency overrides */
div.RadWindow.RadWindow_Stream .rwCorner,
div.RadWindow.RadWindow_Stream .rwTitlebar,
div.RadWindow.RadWindow_Stream .rwStatusbarRow,
div.RadWindow.RadWindow_Stream .rwFooterCenter 
{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); opacity:100; -moz-opacity:100; display:none; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;}

div.RadWindow.RadWindow_Stream .rwTitlebar .rwIcon	{display:none;}

div.RadWindow.RadWindow_Stream .rwWindowContent div	{width:100%;}

div.RadWindow.RadWindow_Stream .rwWindowContent .CloseButton	{margin-right:5px;}
div.RadWindow.RadWindow_Stream	{background-color:#ced7e5; border-width:3px; border-style:solid; border-color:#5176B5; padding:3px;}

/* RadEditor Overrides */
.RadEditor	{height:100%;}

/* RadToolTip Overrides */
div.RadToolTip_ImagePopup .rtWrapperTopLeft,
div.RadToolTip_ImagePopup .rtWrapperTopCenter,
div.RadToolTip_ImagePopup .rtWrapperTopRight,
div.RadToolTip_ImagePopup .rtWrapperLeftMiddle,
div.RadToolTip_ImagePopup .rtWrapperRightMiddle,
div.RadToolTip_ImagePopup .rtWrapperBottomLeft,
div.RadToolTip_ImagePopup .rtWrapperBottomCenter,
div.RadToolTip_ImagePopup .rtWrapperBottomRight
{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); opacity:100; -moz-opacity:100; display:none; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;}