/* Minification failed. Returning unminified contents.
(1131,19): run-time error CSS1030: Expected identifier, 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:'Open Sans', Arial, 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;}
span.txtsmall {    font-size: 14px !important;    color: #5a5a5a;}	
table {border-collapse:collapse; border-spacing:0;}

/* HTML tags the streamSWEET way
===================== */
body					{font-size:16px; line-height:1.9em; color:#000; margin:0; background-color:#fff;}

p						{margin:2px 0 22px 0;}

h1						{font-size:38px; line-height:44px; color:#000; margin:20px 0px 12px 0px;}
h2						{font-size:32px; line-height:36px; font-weight:normal; color:#000; margin:34px 0px 10px 0px;}
h3						{font-size:24px; line-height:28px; font-weight:normal; color:#000; margin:22px 0px 8px 0px;}
h4						{font-size:18px; line-height:24px; font-weight:bold; color:#333; margin:20px 0px 2px 0px;}
h5						{font-size:16px; line-height:20px; font-weight:bold; color:#333; margin:10px 0px 2px 0px;}
h6						{font-size:13px; line-height:16px; font-weight:bold; color:#666; margin:10px 0px 2px 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:#5699BE;}
a:active, a:hover, a:focus	{color:#385B4C;}

/* 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; font-weight:normal; color:#384f7b;}
.Head2			{font-size:28px; line-height:36px; font-weight:normal; color:#333;}
.Head3			{font-size:20px; line-height:28px; font-weight:normal; color:#384f7b;}
.Head4			{font-size:14px; line-height:18px; font-weight:bold; 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:#f5f5f5;}
.ShellLogoMenuHome		{padding:0; background-color:#fff; z-index:1000; height:60px; transition:all 0.3s;}
.ShellLogoMenu				{padding:0; background-color:#fff; z-index:1000; height:60px; transition:all 0.3s;}
.ShellLogoBanner			{padding:8px 0 0 0; background-color:#fff; z-index:1000; /*height:68px;*/ border-bottom:1px solid #ddd; transition:all 0.3s;}
.ShellMenu						{padding:0 0; background-color:#e3e3e3; height:58px;}
.ShellHero						{padding:0; background-color:#ccc;}
.ShellContentStd			{padding:20px 0 30px 0; background-color:#fff; min-height:500px;}
.ShellHome1 					{background-color:#fff;}
.ShellHome2 					{background-color:#E0E9E5; padding:40px 0;}
.ShellHome2 p 				{font-size:15px; line-height:19px;}
.ShellHome2 h2 				{color:#fff; font-size:24px; line-height: 30px;}
.ShellHome3 					{background-color:#F1F3F6; padding:30px 0;}
.ShellHome4 					{background-color:#fff; padding:30px 0;}
.ShellHome5 					{background-color:#fff; padding:20px 0;}

.ShellFooter					{background-color:#fafafa;}
.ShellFooterInner 		{background-color:#4D7E69; padding:40px 0}
.ShellBottom					{padding:10px 0;}

/* 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:1280px; width:90%;}
.Wrapper	{margin:0 auto; position:relative; max-width:1280px;}

/* Template specific layout handlers */

/* Home 
===================== */
.hContent1							{padding:40px 0; margin-left:auto; margin-right:auto;} /* Content 1 */
.hContent2							{padding:0px 0px 20px 0; text-align:left; vertical-align:top;} /* Content 2 */

.HomePeople 						{margin:0 auto; max-width:1980px;}
.HomePeopleCol 					{width:16.6666667%; float:left;}
.HomePeople img					{height:auto; max-height:330px;}
.HomeHeading 						{background-color:#000; padding:10px;}
.HomeHeading h1 				{font-size:24px; line-height:28px; color:#fff; text-align:center; margin:5px 0;}
.HomeProject 						{margin:40px 0 20px 0;}

.HomeLinkSpeakers 					{min-height:260px; background-repeat:no-repeat; background-size:cover; /*contain;*/ background-position:50% 50%; background-image:url(/assets/images/home_speakers.jpg); background-color:#4D7E69; margin-bottom: 30px;}
.HomeLinkSpeakers > h4 			{top:90px; position: relative; font-size:42px; line-height: 48px; color: #fff;}
.HomeLinkSpeakers:hover			{background-image:url(/assets/images/home_speakers_on.jpg); transition:all 0.3s ease;}

.HomeLinkProgram 						{min-height:260px; background-repeat:no-repeat; background-size:cover; /*contain;*/ background-position:50% 50%; background-image:url(/assets/images/home_program.jpg); background-color:#4D7E69; margin-bottom: 30px;}
.HomeLinkProgram > h4 			{top:90px; position: relative; font-size:42px; line-height: 48px; color: #fff;}
.HomeLinkProgram:hover			{background-image:url(/assets/images/home_program_on.jpg); transition:all 0.3s ease;}

.HomeLinkSponsors 					{min-height:260px; background-repeat:no-repeat; background-size:cover; /*contain;*/ background-position:50% 50%; background-image:url(/assets/images/home_sponsors.jpg); background-color:#4D7E69; margin-bottom: 30px;}
.HomeLinkSponsors > h4 			{top:90px; position: relative; font-size:42px; line-height: 48px; color: #fff;}
.HomeLinkSponsors:hover			{background-image:url(/assets/images/home_sponsors_on.jpg); transition:all 0.3s ease;}

/* Content - Standard
===================== */
.cNavSub								{padding:0px 0px 5px 0px; background-color:#fff; vertical-align:top;}
.cContent1							{width:94%; padding:10px 0; background-color:#fff; text-align:left; vertical-align:top; margin-left:auto; margin-right:auto;} /* Content 1 */
.cContent2							{padding:0px 0px 20px 0; text-align:left; vertical-align:top;} /* Content 2 */

/* Banners */
.BannerWordForWord 			{background:url(/assets/images/banner_word_for_word.jpg); background-size:cover; /*contain;*/ background-position:50% 50%; overflow:hidden; min-height:180px; background-color:#121f1e; padding:10px;}
.BannerTreaty30 				{overflow:hidden; min-height:180px; background-color:#021520; padding:10px;}

/* Program Info */

.ProgrammeTable {width:100%; background-color:#f6fdf3; margin:30px 0; font-size:14px}

.ProgrammeTable th {background-color:#3b8672; color:#fff; padding:10px 15px; text-align:left; border-bottom:1px solid #e0e9e5}

.ProgrammeTable td {padding:7px 15px; border-bottom:1px solid #e0e9e5}

.ProgrammeTableSubHead {
    padding: 15px 15px !important;
    border-bottom:1px solid #e0e9e5
}
.ButtonRegister  {background-color:#e7c36a; text-align:center; padding:8px 25px; margin:10px 6px 10px 6px; border-radius:4px; font-size:18px; line-height:18px; white-space:nowrap;}
a.ButtonRegister:link, a.ButtonRegister:visited   {color:#424547; text-decoration:none;}
a.ButtonRegister:hover, a.ButtonRegister:active   {background-color:#3B3024; color:#fff;}

/* Container for User Login Text/Name*/
.cLogin									{float:right; /*background-color:#fff;*/ padding:0 14px; margin:10px; font-weight:400; font-size:14px; line-height: normal;}
.cLogin a:link, .cLogin a:visited	{color:#666; text-decoration:none;}
.cLogin a:hover, .cLogin a:active	{color:#333; text-decoration:underline;}
/* Container for basket */
.cBasket								{margin:5px 30px 0 0; float:right; color:#666; line-height:normal; text-align:right;}
.cBasket a:link, .cBasket a:visited	{color:#666; text-decoration:none;}
.cBasket a:hover, .cBasket a:active	{text-decoration:underline; color:#333}

.BasketIcon 						{float:left;}
.BasketCount 						{float:left; padding-top:4px; line-height:normal;}

/* Contact Button */
.Contact 							{float:right; padding:0 14px; margin:10px; font-weight:400; font-size:14px; line-height:normal;}
.Contact a:link, .Contact a:visited	{color:#666; text-decoration:none;}
.Contact a:hover, .Contact a:active	{text-decoration:underline; color:#333}

/* 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:18px; 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;}

.FooterSocialIcons 			{float:left; margin:5px;}

/* 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';}

/* 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); }

/* ======================================================================================== */
/* ======================================================================================== */
/* Navigation */
/* ======================================================================================== */
/* ======================================================================================== */

/* Responsive Menu
===================== */
/* Menu bar setup */
#nav {z-index:10000; position:absolute; top:0;} /* 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:#555;}

/* First level */
#nav > ul > li {display:inline-block;}
#nav > ul > li > a {color:#000; font-size:16px; padding:14px 14px; border-top:2px solid #999; margin:0 2px;}
/*#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:#4D7E69; background-color:#E0E9E5; border-top: 2px solid #4D7E69;}
#nav > ul > li.NavSelected > a:after {color:#555;}
#nav > ul > li:hover > a, #nav > ul > li:hover > a:after {color:#222; background-color:#E0E9E5;}

/* 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 #E0E9E5; border-radius:4px; background-color:#f1f4f3; box-shadow:0 0 3px 3px rgba(76, 76, 76, 0.1);}
#nav > ul > li > ul > li > a {font-size:14px; padding:8px 15px; color:#333;}
#nav > ul > li > ul > li.NavParent > a:after {content:'\25BA'; font-size:10px; color:#555; position:absolute; top:8px; right:5px;}
#nav > ul > li > ul > li:hover > a, #nav > ul > li > ul > li:hover > a:after {color:#4D7E69;}

/* Third level. !*!* Note that JQuery is used to affect the direction of the flyout on the last item in the main nav. */
#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:15px 0; width:200px; max-height:800px; opacity:1; border:1px solid #E0E9E5; border-radius:4px; background-color:#f1f4f3; box-shadow:0 0 3px 3px rgba(76, 76, 76, 0.1);}
#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:#4D7E69;}

/* Second level Sub Nav - Vertical 
===================== */
#navSub, #navSub ul			{width:100%; list-style:none; font-size:14px; line-height:14px; padding:0; margin:0;}
#navSub .sel							{background-color:#fff; color:#4D7E69; background-image:url(/assets/images/arrow_subnav_1_on.svg);}
#navSub a								{display:block; color:#666; text-decoration:none;}
#navSub li								{margin:4px 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			{background-color:#fff; color:#4D7E69; 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:#4D7E69; 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:#ccc; line-height:14px; margin-top:35px;}
.MenuBotL1 a:link    	{color:#7c939a; text-decoration:underline;}
.MenuBotL1 a:visited  {color:#7c939a; text-decoration:underline;}
.MenuBotL1 a:active, .MenuBotL1 a:hover  {color:#fff; text-decoration:underline;}
.MenuBotL1 span     	{padding:0 5px 0 5px; color:#7c939a;}

.MenuBotL2       			{font-size:12px; color:#ccc; line-height:14px; margin-top:10px;}
.MenuBotL2 a:link    	{color:#7c939a; text-decoration:underline;}
.MenuBotL2 a:visited  {color:#7c939a; text-decoration:underline;}
.MenuBotL2 a:active, .MenuBotL2 a:hover  {color:#fff; text-decoration:underline;}
.MenuBotL2 span     	{padding:0 5px 0 5px; color:#7c939a;}

/* Main Logo */
.LogoMain				{z-index:10005; position:relative; left:3%; top:0; /*height:68px;*/ transition:all 0.3s;}
.LogoNZSTI 			{float:right;}


/* 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"
===================== */

/* No need for any of this
header.HdrSmaller						{height:44px; padding:3px 0;} 
.HdrSmaller .LogoMain				{} 
.HdrSmaller #nav > ul > li > a 	{padding:7px 14px;}
.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:10px;*/ display:inline-block; z-index:10009; transition:all 0.3s;}
.SignUpLink:hover 	{opacity:0.6;}

/* 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:#e0e9e5; overflow:hidden;}
.Heading2Top						{font-size:16px; line-height:20px; height:34px; color:#1c374a; font-weight:normal; padding:0 0 0 10px; vertical-align:top; background-color:#e0e9e5; 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:#1c374a;}
.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:#efefef; background-image:linear-gradient(0deg, #efefef, #fff 90%);}
.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:#666;}
.PanelLoginAccount a				{}
.PanelLoginAccount a:hover	{color:#006f98;}

.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;}

.Heading2 							{font-size:16px; line-height:20px; height:34px; color:#1c374a; font-weight:normal; padding:0 0 0 10px; vertical-align:top; background-color:#e0e9e5; overflow:hidden;}
.Heading2Top						{font-size:16px; line-height:20px; height:34px; color:#1c374a; font-weight:normal; padding:0 0 0 10px; vertical-align:top; background-color:#e0e9e5; 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:#1c374a;}
.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 - 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:#11598a;}
.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; 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:#4b5267; font-weight:normal; text-align:left; padding:4px; background-color:#f2f4f3; background-image:linear-gradient(0deg, #f2f4f3, #eeeff1 90%);}
.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;}

/* 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 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:#e0e9e5; margin:10px 0 0 0; padding:10px 10px 5px 10px;}
.FormSetHor > h2, .FormSetVert > h2	{font-size:20px; font-weight:400; background-color:#e0e9e5; margin:10px 0 0 0; padding:18px 18px 16px 20px;}
.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:#f2f4f3; 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; 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:"\2605"; color:#fa613e; font-size:12px; position:absolute; top:0; left:calc(90% + 5px);}
.FormRequiredFieldNarrow::after 	{content:"\2605"; color:#fa613e; font-size:12px; 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:0 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:110px;}

.FormWidthLong							{width:400px !important;}
.FormWidthMedium						{width:150px !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;}

/* 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:94px; height:31px; background:url(/assets/images/button_top.svg)no-repeat 0px 0px; margin:20px 0 20px 0; padding:3px 0 0 3PX; border:none; background-color:transparent; cursor:pointer; display:inline-block; text-align:center; font-size:13px; line-height:27px;}
.ImgBtnTop a:link., a:visited					{text-decoration:none; display:block; width:94px; height:31px; margin:0; color:#333;}
.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:#eaeaea; padding:8px 16px 8px 8px;}
.IconButton:hover								{cursor:pointer;}

/* 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;}


/* ======================================================================================== */
/* ======================================================================================== */
/* 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:30%; margin:90px 0; color:#fdfdfd; background-color:rgba(0, 0, 0, 0.6); padding:1rem 2rem; float:right; position:relative;}

/* Homepage Main Button */
.HeroStaticButton 							{background-color:#3b8672; position:relative; box-shadow:0 5px 5px rgba(0, 0, 0, 0.2); font-weight:400; border:0.0625rem solid #3b8672; border-radius:0.25rem; -webkit-border-radius:0.25rem; -moz-border-radius:0.25rem; margin:10px 5px; font-size:18px; line-height:18px;}
.HeroStaticButton a:link, .HeroStaticButton a:visited {text-decoration:none !important; color:#fff !important;}
.HeroStaticButton:hover					{text-decoration:none !important; background-color:#435564; border:0.0625rem solid #3f505e;}
.HeroStaticButton:active				{background-image:none; box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.25);}

/* Homepage Secondary Button */
.HeroStaticButtonAlt						{background-color:#8fc260; position:relative; box-shadow:0 5px 5px rgba(0, 0, 0, 0.2); font-weight:400; border:0.0625rem solid #8fc260; border-radius:0.25rem; -webkit-border-radius:0.25rem; -moz-border-radius:0.25rem; margin:10px 5px; font-size:18px; line-height:18px;}
.HeroStaticButtonAlt a:link, .HeroStaticButtonAlt a:visited {text-decoration:none !important; color:#fff !important;}
.HeroStaticButtonAlt:hover			{text-decoration:none !important; background-color:#efc258; border:0.0625rem solid #efc258;}
.HeroStaticButtonAlt:active		{background-image:none; box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.25);}

/* Citation */
.HomepageHeroStatic_Citation_Outer			{max-width:100%;}
.HomepageHeroStatic_Citation						{position:absolute; right:20px; bottom:20px; 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:50% 50%; overflow:hidden; /*background-attachment:fixed;*/}
.HeroImageStatic h1											{font-weight:400; font-size:32px; line-height:36px; margin:0.5em 0; color:#fff;}
.HeroImageStatic h2 										{font-size:24px; line-height:28px; color:#fff;}
.HeroImageStatic h3 										{font-size:18px; line-height:22px; color:#fff;}
.HeroImageStatic hr											{border-color:#666; 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 */
.SearchProductsBtn						{height:68px; width:23%; float:left; background:url(/assets/images/btn_search_products.jpg) top center no-repeat; margin:0 !important; padding:0; border-bottom-right-radius:1em; border-top-right-radius:1em; border:1px solid #97060f;}
.SearchProductsBtn:hover			{opacity:.8;}
.SearchProductsTextBox				{float:left; width:72%; background-color:#fff; padding:0; font-size:20px; line-height:normal; color:#666 !important; height:66px; border-left:1px solid #333; border-top:1px solid #333; border-bottom:1px solid #333; border-right:1px solid #97060f;}

/*----------------------------------------------*/
/* 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;}
.PanelItemGrid > article > a > div:hover > div > img  {transform:scale(1.1,1.1);}
.PanelItemGrid > article > a > div > div h2    				{font-size:18px !important; line-height:22px; color:#36C; margin:20px 0 5px 0;}
.PanelItemGrid > article > a > div > div p     				{font-size:14px !important; line-height:18px; 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;}

/* 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;*/}

.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:#4d7e69; border:1px solid #4d7e69;}

/* 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:#8fc260;}
.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;}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* 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:#f60; 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 */
/* ======================================================================================== */
/* ======================================================================================== */

/* Main Icons */

.BigIconPanel 			{color:#484849;}
.BigIconPanel p 		{font-size:16px;}
.BigIcon 						{float:left; width:20%; min-width:90px;}
.BigIconText h2			{float:left; width:80%; margin:24px 0 0 0; font-size:28px;}

.SearchInterpreter 	{float:right; margin:0 0 6px 0;}
.SearchTranslator 	{float:right; margin:2px 0 0 0;}

/*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 #768f82; background-color:#f5f5f5; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;}
.ib_gallery_on img		{display:inline-block; border:1px solid #768f82; background-color:#b0dc80; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;}
.ib_brief img					{display:inline-block; border:1px solid #768f82; background-color:#f5f5f5; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;}
.ib_brief_on img				{display:inline-block; border:1px solid #768f82; background-color:#b0dc80; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;}
.ib_list img						{display:inline-block; border:1px solid #768f82; background-color:#f5f5f5; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;}
.ib_list_on img				{display:inline-block; border:1px solid #768f82; background-color:#b0dc80; -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:#f5fbe9; color:#000; border:1px solid #e9f3ee;}
#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.3);}

/* 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 #BCCEE0; font-size:16px; line-height:24px; display:block;}

/* Vote */
.VotePanel 							{text-align:center; max-width:160px; color:#ccc; margin:8px auto;}
.VoteHeading 						{font-size:18px; margin:0; color:#333;}
.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.  */
/* ----------------------------------------------------------------------------------------------------------------------  */


/* 1080px*/
@media only screen and (max-width:1080px) {
	/* Use most of the width of the screen */
	.ShellLogoMenuHome .SectionWrapper  {width:100%;}

	/* Panel grid */
	.PanelItemGrid4Col > article, .PanelItemGrid4ColProds > article, .PanelItemGrid4ColImages > article {width:31%; margin:0 1% 14px 1%;}
	
	#nav {/*padding-left:20%;*/}
}

/* 1000px*/
 @media only screen and ( max-width:1000px) {
	 
	/* Logo / header rows. Smaller for smaller screen + smaller on scroll */
	.ShellLogoMenuHome, .ShellLogoMenu	{height:50px;}
	.LogoMain									{/*height:50px;*/ left:3%;}
	.SignUpLink 							{top:20px; right:5%; height:30px;}
	#nav > ul > li > a 				{padding:10px 20px;}
	#nav > ul > li.NavParent > a:after {top:17px;}
	 /* No need
	 	header.HdrSmaller					{height:45px;}
	.HdrSmaller .LogoMain			{height:35px;}
	.HdrSmaller #nav > ul > li > a 		{padding:7px 20px;}
	.HdrSmaller #nav > ul > li.NavParent > a:after {text-outline: 5px;px;}
	 */
	 
	/* Menu icon / menu row */
	#nav {top:10px; padding:10px 0 0 4px; width:100%; background-color:#fafafa; border:1px solid #ccc;}
	#nav > a {color:#4D7E69; text-decoration:none;}
	#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:44px; line-height:20px; margin:3px 30px 3px 40px;}
	#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; box-shadow:none;}
	#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; box-shadow:none;}
	#nav > ul > li > ul > li > ul > li > a {padding:8px 25px; font-size:12px;}

	.HdrSmaller  #nav 				{top:5px;}
	.HdrSmaller  #nav .menuicon {font-size:28px; margin:0 30px 3px 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;}
}

/* 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;}

	.span_1_of_4Footer 	{width:100%;}
	.SearchPanelCol1 					{float:left; width:auto;}
	.HomeHeading h1 				{font-size:18px; line-height:20px; margin:2px 0;}


}

/* 720px*/
@media only screen and (max-width:720px) {
	.FormWidthLong						{width:100px;}
	
	/* Sticky Panel */
	.sticky		{position:relative;}
	.sticky:before,.sticky:after	{}
	
	
}

/* 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;}
	.HeroPanel					{width:80% !important; margin:50px auto; float:none !important;}
	
	.LogoMain				{margin:0 auto; left:0; top:0;}
	.LogoNZSTI 			{float:none; margin:0 auto; height:60px;}
	
	.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;}


