@charset "utf-8";
/* CSS Document */

/* 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; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;}
body {margin:0;}/* 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; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;}
body {margin:0;}

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

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

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

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

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

/* HTML tags the streamSWEET way
===================== */
body					{font-size:15px; color:#525252; font-weight: 300; line-height:23px; margin:0; background-color:#fff;}

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

h1						{font-size:40px; line-height:40px; font-weight:200; color:#394c4f; margin:20px 0px 22px 0px;} /* Dark Green */
h2						{font-size:30px; line-height:36px; font-weight:200; color:#394c4f; margin:16px 0px 7px 0px;} /* Dark Green */
h3						{font-size:20px; font-weight:200; color:#007889; margin:13px 0px 5px 0px;} /* Turquoise */
h4						{font-size:15px; font-weight:normal; color:#007889; margin:2px 0px 10px 0px;} /* Turquoise */
h5						{font-size:14px; font-weight:bold; color:#999; margin:10px 0px 2px 0px;} /* Grey */
h6						{font-size:14px; font-weight:bold; color:#999; margin:10px 0px 2px 0px;} /* Grey */

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

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

/* streamSWEET additional Fonts 
===================== */
/*
.TextStd				{}
.TextEmphasis	{color:#06F; font-style:italic; font-size:22px; font-weight:bold;}
.TextStrong		{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:14px; font-weight:bold; color:#4898d4; line-height:18px; font-style:italic;}
.TextLabel			{font-size:14px; color:#777 !important; vertical-align:top;}
.TextBold			{font-weight:bold;}


/* streamSWEET In-page alert panels
/*For 'background-image' Possibly good to include -webkit... to support Mac Safari.  That browser gained proper support only from early 2013*/
.PanelInPageAlert 		{width:90%; margin:20px; padding:15px; font-size:1.2em; background-color:#ffecd9; border:1px solid #ff9c2b; border-radius:2px; box-shadow:0 0 20px 0px #e5e5e5;}
.PanelInPageAlertTitle			{font-size:1.3em;}
.PanelInPageAlertEmphasis	{font-style:italic;}
.PanelInPageAlert a		{font-weight:bolder;}


/* streamSWEET predefined tables
===================== */
/* Data up to 5 columns */
/*
.Table1 table {border-collapse:collapse; text-align:left; width:100%; border:1px solid #ccc; margin:30px 0;}
.Table1 {font-size:14px; background:#fff;}
.Table1 table td, .Table1 table th {padding:5px 10px;}
.Table1 table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #333), color-stop(1, #666) ); background:-moz-linear-gradient( center top, #333 5%, #666 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333', endColorstr='#666'); background-color:#666; color:#fff; font-size:15px; font-weight:bold; border-left:1px solid #ccc;}
.Table1 table thead th:first-child {border:none;}
.Table1 table tbody td {color:#333; border-left:1px solid #ccc; font-size:14px; line-height:17px; font-weight:normal;}
.Table1 table tbody .alt td {background:#eef1f1; color:#000;}
.Table1 table tbody td:first-child {border-left:none;}
.Table1 table tbody tr:last-child td {border-bottom:none;}
.Table1SubHead	{background-color:#d7ddda; padding:5px 8px !important; font-size:12px !important; border-top:1px solid #d7ddda; border-bottom:1px solid #ccc;}


/* Data up to 10 columns */
/*
.Table2 table {border-collapse:collapse; text-align:left; width:100%; border:1px solid #ccc; margin:30px 0;}
.Table2 {font-size:12px; background:#fff;}
.Table2 table td, .Table2 table th {padding:5px;}
.Table2 table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #333), color-stop(1, #666) ); background:-moz-linear-gradient( center top, #333 5%, #666 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333', endColorstr='#666'); background-color:#666; color:#fff; font-size:13px; line-height:15px font-weight:bold; border-left:1px solid #ccc;}
.Table2 table thead th:first-child {border:none;}
.Table2 table tbody td {color:#333; border-left:1px solid #ccc; font-size:12px; font-weight:normal; line-height:15px;}
.Table2 table tbody .alt td {background:#eef1f1; color:#000;}
.Table2 table tbody td:first-child {border-left:none;}
.Table2 table tbody tr:last-child td {border-bottom:none;}
.Table2SubHead	{background-color:#d7ddda; padding:4px !important; font-size:11px !important; line-height:13px !important; border-top:1px solid #d7ddda; border-bottom:1px solid #ccc;}

/* Featured item */
/*
.Table3 table {border-collapse:collapse; text-align:left; width:100%; border:1px solid #ccc; margin:30px 0;}
.Table3 {font-size:14px; background:#f5f9f9;}
.Table3 table td, .Table3 table th {padding:10px 15px;}
.Table3 table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #67b7c2), color-stop(1, #4caab7) ); background:-moz-linear-gradient( center top, #67b7c2 5%, #4caab7 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#67b7c2', endColorstr='#4caab7'); background-color:#007C99; color:#fff; font-size:16px; font-weight:bold; border-left:1px solid #009CA8;}
.Table3 table thead th:first-child {border:none;}
.Table3 table tbody td {color:#045D6B; font-size:14px; line-height:20px !important; font-weight:200;}
.Table3 table tbody .alt td {background:#E1EEF4; color:#00496B;}
.Table3 table tbody td:first-child {border-left:none;}
.Table3 table tbody tr:last-child td {border-bottom:none;}
.Table3SubHead	{background-color:#d7ddda; padding:5px 8px !important; font-size:12px !important; border-top:1px solid #b7b8b8; border-bottom:1px solid #ccc;}
.Table3 hr			{border-top-width:2px; border-top-style:solid; border-right-style:none; border-bottom-style:none; border-left-style:none; border-top-color:#c5e4e4; margin-right:0px; margin-left:0px;}

.Table4					{width:100%; background-color:#edf4f4;  margin:30px 0; border:1px solid #c5e4e4;}
.Table4 th			{background-color:#e3f0f0; padding:8px 8px !important; font-size:14px !important; line-height:16px !important; font-weight:bold; color:#394c4f; border-bottom:3px solid #c5e4e4; text-align:left; border-left:1px solid #c5e4e4;}
.Table4SubHead	{background-color:#d8eded; padding:5px 8px !important; font-size:12px; font-weight:bold; border-top:1px solid #b7b8b8; border-bottom:1px solid #d8eded;}
.Table4 td			{font-size:12px; line-height:16px; padding:5px 8px; vertical-align:top;}
.Table4 hr			{border-top-width:2px; border-top-style:solid; border-right-style:none; border-bottom-style:none; border-left-style:none; border-top-color:#c5e4e4; margin-right:0px; margin-left:0px;}

.Table4Wide						{width:100%; background-color:#edf4f4;  margin:30px 0; border:1px solid #c5e4e4;}
.Table4Wide th					{background-color:#e3f0f0; padding:8px 8px !important; font-size:12px !important; line-height:14px !important; font-weight:bold; color:#394c4f; border-bottom:3px solid #c5e4e4; text-align:left; border-left:1px solid #c5e4e4;}
.Table4WideSubHead		{background-color:#e3f0f0; padding:5px 8px !important; font-size:12px; font-weight:bold; border-top:1px solid #b7b8b8; border-bottom:1px solid #b7b8b8;}
.Table4Wide td					{font-size:12px; line-height:16px; padding:5px 8px; vertical-align:top;}
.Table4Wide hr					{border-top-width:2px; border-top-style:solid; border-right-style:none; border-bottom-style:none; border-left-style:none; border-top-color:#c5e4e4; margin-right:0px; margin-left:0px;}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*Above here is generic with the admin CMS editors, apart from BODY background colour and margin.*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* 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:40px; font-weight:200; color:#394c4f; line-height:46px;}
.Head2			{font-size:30px; font-weight:200; color:#394c4f; line-height:36px;}
.Head3			{font-size:20px; font-weight:200; color:#007889; line-height:28px;}
.Head4			{font-size:14px; font-weight:bold; color:#999; line-height:18px;}
.Text1			{font-size:14px; color:#000;}
.Text2			{font-size:14px; color:#666;}
.Text3			{font-size:14px; color:#999; font-style:italic;}

/* Migrated from Admin */
/*
.Heading1 				{font-size:13px; line-height:17px; height:25px; vertical-align:top; color:#fff; font-weight:bold; background-color:#667486; padding:0 0 0 10px; border-top-left-radius:6px; border-top-right-radius:6px; overflow:hidden;}
.Heading1 .BtnAddNew {color:#fff;  border-top-right-radius:6px;}
.Heading2 				{font-size:12px; line-height:17px; height:22px; color:#fff; font-weight:bold; padding:0 0 0 5px; vertical-align:top; background-color:#93a1b7; background-image: linear-gradient(0deg, #93a1b7, #cfd6e3 90%); overflow:hidden;}
.Heading3 				{font-size:12px; line-height:17px; height:20px; vertical-align:top; color:#2e2e2e; font-weight:bold; padding:0 5px 0 5px !important; background-color:#e8eefa; background-image: linear-gradient(0deg, #e8eefa, #dadde6 90%); overflow:hidden; border-bottom:1px solid #d1d8e8;}
.Heading1 span, .Heading2 span, .Heading3 span {float:left; margin-top:3px;}

.Heading2Top			{font-size:12px; line-height:17px; height:22px; color:#fff; font-weight:bold; padding:0 0 0 5px; vertical-align:top; background-color:#93a1b7; background-image: linear-gradient(0deg, #93a1b7, #cfd6e3 90%); border-top-left-radius:4px; border-top-right-radius:4px; overflow:hidden;}
.Heading2Top .BtnAddNew {border-top-right-radius:4px;}
.Heading2Top span {float:left; margin-top:3px;}
.Heading2Top select {float:right; margin:2px 10px 0 0; !important; height:20px !important; font-size:11px; border-radius:3px;}

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

/* Main Content Area */
/*
.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 */

/*
.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;}
.PanelTabsContent  		{border:1px solid #888; margin-top:1px; padding:13px 5px 5px 5px; background-color:#efefef; background-image: linear-gradient(0deg, #efefef, #fff 90%); overflow:hidden;}

/* In-page alert and information panels */
/*
.PanelInPageAlert 				{width:80%; max-width:800px; margin:10px; padding:8px; font-size:1.2em; background-color:#ffecd9; border:1px solid #ff9c2b; border-radius:5px; box-shadow:0 0 20px 0px #ffdbd9; background-image:linear-gradient(0deg, #ffecd9, #fcf7f2 90%);}
.PanelInPageAlertTitle		{font-size:1.3em;}
.PanelInPageAlertEmphasis	{font-style:italic;}
.PanelInPageAlert a				{font-weight:bolder;}

.PanelInPageInform				{width:80%; max-width:800px; margin:10px; padding:8px 8px 8px 70px; font-size:1.2em; background-color:#ffc; border:1px solid #fc0; border-radius:5px; box-shadow:0 0 20px 0px #ffdbd9; background-repeat:no-repeat; background-position:10px 10px;}

.PanelEditorChanged					{max-width:800px;}
.PanelEditorChangedText			{float:left;}
.PanelEditorChangedHelp			{float:right; margin-right:10px;}
.PanelEditorChangedButtons	{margin-left:20px;}


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

.PanelLogin						{background-color:#f5f5f5; padding:15px 30px; border-top:1px solid #999; border-left:1px solid #999; border-right:1px solid #999; border-bottom:5px solid #999;}
.PanelLoginCont				{position:absolute; top:-15px; right:100px; height:0; overflow:hidden; z-index:10002}
.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; z-index:10002}
.PanelLoginProfile a:link, .PanelLoginProfile a:visited {color:#69646c;}
.PanelLoginProfile a:hover, .PanelLoginProfile a:active {color:#ff8c0a;}
.PanelLoginProfileSelect		{font-size:12px; padding:3px 10px;}
/* ======================================================================================== */
/* ======================================================================================== */
/* Template Layout */
/* ======================================================================================== */
/* ======================================================================================== */

/* Generic container for each logical section of the page - creates horizontal 'slices' of content at full screen width */
.wrapper					{clear:both; margin:0 auto; padding:0; max-width:1300px; width:94%;}

/* First level containers for each horizontal panel - set margins, background colours, panel widths etc */
.PageHeader				{max-width:1300px; margin:0px auto; overflow:hidden;}
.PageBanner				{max-width:1300px; margin:0px auto;}
.PageBannerHome		{max-width:1300px; margin:0px auto;}
.PageHero					{margin:0 auto; width:100%; -webkit-box-shadow:0 0 12px 12px rgba(31, 35, 37, 0.4); -moz-box-shadow:0 0 12px 12px rgba(31, 35, 37, 0.4); box-shadow:0 0 12px 12px rgba(31, 32, 37, 0.4);}
.PageHeroCustom		{margin:30px 0 20px 0; width:100%; -webkit-box-shadow:0 0 8px 8px rgba(76, 76, 76, 0.1); -moz-box-shadow:0 0 8px 8px rgba(76, 76, 76, 0.1); box-shadow:0 0 8px 8px rgba(76, 76, 76, 0.1);} /* Used on product pages */
.PageMenu					{margin:0 auto; position:relative; /*height:60px;*/ background-color:#f8f50d;}
.PageContent				{margin:0px auto; padding:20px 0; background-color:#fff; text-align:left; min-height:800px;}
.PageFooter				{margin:0px auto; background-color:#1f2325; padding:60px 0;}

/* Major element containers, for elements that show on most pages in the site */

/*
.Basket						{}
.Login						{}
.Logo							{}
.Banner						{border-bottom:4px solid #ccc; background-color:#fff;}
.Manu							{}
.SubMenu					{}
.Breadcrumbs			{}
.Content1					{}
.Content3					{padding:30px 0;}
.Content1Home			{}
.Content2Home			{}
.FooterNav				{}
.FooterStream			{}
.PagePanelContent 	{background-color:#e5e5dd; padding:40px 0 40px 0; margin: 25px 0;}

/* Template specific layout handlers */


/* Home 
===================== */
/*
.hNavMain							{width:100%; margin:0 auto; position:relative; height:60px;}
.hPage									{}
.hContent1							{text-align:left; vertical-align:top;}
.hContent2							{padding:20px 0px 20px 0; text-align:left; vertical-align:top;}
.hFooter								{vertical-align:top;}
/* Not Used */
/*
.hLogin									{width:425px; float:right; background-color:#f3eff4; padding:8px 3px 10px 24px; border-bottom:6px solid #ede8ec;}
.hBasket								{width:300px; float:left;}
.hBasket a:link, .hBasket a:visited	{color:#fff; text-decoration:none;}
.hBasket a:hover, .hBasket a:active	{color:#fff; text-decoration:underline;}	

.hContact							{padding:8px 12px; float:right; color:#fff; margin-left:0; margin-right:0; font-size:12px; text-align:center;}
.hContact a:link, .hContact a:visited	{color:#fff; text-decoration:none;}
.hContact a:hover, .hContact a:active	{color:#fff; text-decoration:underline;}	

.hNavBottom						{padding:15px 0; vertical-align:top; color:#fff;}
.hFooterInfo						{background-color:#144f97;}

/* Content - Standard
===================== */
/*
.MenuWrapper						{}
.cBanner								{padding:8px 0px; background-color:#aec1c8;}
.cNavMain							{width:90%; margin:0 auto; position:relative;}
.cNavSub								{padding:0px 0px 5px 0px; background-color:#fff; vertical-align:top; width:90%;}
/* Make Sub Nav disappear at 480px */
@media only screen and (max-width: 480px) {

	.cNavBottom						{text-align:center;}
}

.cPage									{padding:20px 0; text-align:left; min-height:400px; background-color:#fff;}
.cNavBottom						{padding:15px 30px 20px 0px; vertical-align:top; color:#fff;}
.cContent1							{padding:0; background-color:#fff; text-align:left; vertical-align:top; margin-left:auto; margin-right:auto;}
.cContent2							{width:90%; padding:20px 0px 20px 0; text-align:left; vertical-align:top; margin-left:auto; margin-right:auto;}
.cFooterInfo						{background-color:#144f97; padding-bottom:20px;}
.cFooter								{padding:15px; vertical-align:top;}
.cLogin									{min-width:200px; padding:8px 3px 10px 24px; margin-top:6px; font-weight:200; font-size:12px;}
.cBasket								{width:300px; float:left; margin-top:6px;}
.cBasket a:link, .cBasket a:visited	{color:#fff; text-decoration:none;}
.cBasket a:hover, .cBasket a:active	{color:#fff; text-decoration:underline;}
.cNavBreadcrumbs				{}

/* This is old stuff already and we should use group handling for this.  Needs a global find/replace done to remove instances of use and then delete this */
.clearfix:after				{visibility:hidden; display:block; font-size:0; content:""; clear:both; height:0;}
.clearfix 							{display:inline-block;}


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

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

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

.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-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-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-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-repeat:repeat-x;}
.AccountTableSub				{ border-bottom:1px solid #ccc;}

/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* Data Repeater*/
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/*
.TableDataRepeat						{width:100%; border-collapse:collapse;}
.TableDataRepeat caption		{text-align:left; font-size:14px; color:#2d4285; 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:#2d4285; font-weight:normal; text-align:left; padding:4px; background-color:#C3CAD6; background-image: linear-gradient(0deg, #C3CAD6, #EBEFF5 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;}

/* 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;}
.dataGridCont										{border-width:0 1px 1px 1px; border-style:sold; border-color:#999;}

/* Handling of the data rows */
/*
.datagrid												{background-color:#fefefe;}
.datagrid td										{padding:0 1px 0 4px !important; line-height:26px !important; font-size:12px; border-top:1px solid #ddd;}
.datagrid td a									{text-decoration:none; display:block;}

.datagridAlter									{background-color:#f5f5f5;}
.datagridAlter td								{padding:0 1px 0 4px !important; line-height:26px !important; font-size:12px; border-top:1px solid #ddd;}
.datagridAlter td a							{text-decoration:none; display:block;}

.datagridSelected								{background-color:#dfe6cf;}
.datagridSelected td						{padding:0 1px 0 4px !important; line-height:26px !important; font-size:12px; border-top:1px solid #999; border-bottom:1px solid #999;}
.datagridSelected td a					{text-decoration:none; display:block;}

.datagridOver										{background-color:#fcfce3;}
.datagridOver td								{padding:0 1px 0 4px !important; line-height:26px !important; font-size:12px; border-top:1px solid #999; border-bottom:1px solid #999;}
.datagridOver td a							{text-decoration:none; display:block;}

/* Apply a border to the bottom of the last row before pagination */
/*
.datagrid tr:nth-last-of-type(2) td		{border-bottom:1px solid #999;}

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

/*Set the line height of the heading row*/
/*
.datagrid tr:first-of-type td		{vertical-align:bottom;}

.datagridColumn									{font-size:12px; color:#2d4285; font-weight:normal; 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:hover::after	{content: "\21F5"; margin-left: 4px; color:#333;}
.datagridColumnSelected					{font-size:12px; color:#2d4285; font-weight:normal; 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 3px 0 0; font-weight:bold;}
.datagridPager td a             {padding:0 5px; margin:0 1px 0 0; color:#999; font-weight:bold; border:1px solid #333; 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;}
.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:#2d4285 !important; font-size:11px;}

/* Tabs 
===================== */
/*
.tabspanelcont							{height:35px;}
.tabspanel									{float:left; width:100%; font-size:90%; line-height:normal; border-bottom:2px solid #505050; margin-top:10px;}
.tabspanel ul							{margin:0; padding:0px 10px 0 10px; list-style:none;}
.tabspanel li							{display:inline; margin:0; padding:0;}
.tabspanel a								{float:left; margin:0; padding:0 0 0 5px; text-decoration:none; background-position:0% -42px;}
.tabspanel a span					{float:left; display:block; no-repeat right top; padding:10px 15px 6px 10px;  color:#000; background-position:100% -42px;}
.tabspanelon a							{float:left; margin:0; padding:0 0 0 5px; text-decoration:none;}
.tabspanelon a span				{float:left; display:block; padding:10px 15px 6px 10px; color:#407db4;}
.tabspanel a:hover				{background-position:0% 0px;}
.tabspanel a:hover span		{color:#ff6600; background-position:100% 0px;}

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

/* Alert Message Handling */
/*
.AlertBox                {width:350px; margin:0; padding:0; border-radius:10px; box-shadow:0 0 20px 0px #ffdbd9; 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:#d0fbc1; border:1px solid #54FF54;}
.AlertBoxInnerSuccess 		{ background-position:5px 10px;}
.AlertBoxError							{background-color:#fbc8c1; border:1px solid #FF2B2B;}
.AlertBoxInnerError				{ background-position:5px 10px;}
.AlertBoxInfo 							{background-color:#fee1ab; border:1px solid #FFAE17;}
.AlertBoxInnerInfo       { background-position:5px 10px;}

/* No Results Handling */
/*
.AlertNoResult							{padding:10px; border:1px solid #e5e5e5; background:#f7f7f7;}


/* Telerik
===================== */
/*
.TabHover							{color:#039}
.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;}

/* Modal 
===================== */
/*
.modalBackground				{background-color:Gray;}
.modalPopup						{display:none;}

.ModalOuter 						{position:fixed; top:0; right:0; bottom:0; left:0; background-color:rgba(0,0,0,0.5); z-index:10002; opacity:0; display:none; -webkit-transition: opacity 2s ease-in; transition: opacity 2s ease-in;}
.ModalOuter > div 			{position:relative; max-height:90vh; margin:5vh auto; border-radius:2px; background-color:#fff; box-shadow: 0 0 10px 5px #555; animation-name: ModalContent; animation-duration: 0.8s;}
.ModalCloser					{background-color:#fff; display:block; overflow:hidden;}
.ModalCloser > a					{border-radius:2px; text-decoration:none; float:right; padding:4px 10px; margin:5px 10px;}
.ModalCloser > a:hover, .ModalCloser > a:active		{background-color:#ddebf0; cursor:pointer; border-radius:14px;}
.ModalScroll							{overflow:auto; max-height:90vh;}
/* Add animation to make it a little more cool! */
/*
@keyframes ModalContent {
	from {top:-200px;opacity: 0;}
	to {top:0px;opacity:1;}
}
.PanelSearchCal				{width:600px; max-width:90vw; margin-top:30px; overflow:hidden;}
.PanelLogin						{width:400px; max-width:90vw; overflow:hidden;}


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

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

.FooterNavText {color:#fff; font-size:14px; line-height:18px; font-weight:300;}
.FooterNavText a:link, .FooterNavText a:visited {color:#fff; text-decoration:none;}
.FooterNavText a:hover, .FooterNavText a:active {color:#fff; text-decoration:underline;}
.FooterNavText p {margin: 6px 0 12px 0;}
.PageFooter hr 						{border-top-width:1px; border-top-style:solid; border-right-style:none; border-bottom-style:none; border-left-style:none; border-top-color:#666; margin-right:0px; margin-left:0px;}
.PageFooter a:link, .PageFooter a:visited		{color:#fff; text-decoration:none;}
.PageFooter a:hover, .PageFooter a:active		{color:#f60; text-decoration:underline;}
.FooterContactText 		{color:#fff; font-size:16px; line-height:21px; padding:20px 0; text-align:right;}

.PageFooterImg 				{float:left; margin:10px 0;}
/*
.StreamsweetLogo 			{float:right;}

/* 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					{ color:#fff; font-weight:bold; padding-left:15px;}
.FormButtonPopup				{padding:6px 12px 6px 12px; font-size:14px; color:#393b4a; background-color:#b0becd; border:inset 1px #708090; 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;}
.FormHeaderPopup				{padding:3px; font-size:14px; font-weight:bold; color:#393b4a; }
/* \PayPal_HTML.aspx */
/* \usercontrol\front\custom\BuyCredits.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;}


/* Responsive GMAP
===================== */
/*

.containerMap {width:100%; /* pick whatever width you want */ /*}
.containerMap .outerMap {width:100%; padding-top:75%; /* defines aspect ratio *//*position:relative;}
.containerMap .outerMap .innerMap {position:absolute; top:0; left:0; right:0; bottom:0;}

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

.TableFormLayout						{border:1px solid #ccc; width:100%; border-collapse:collapse; background-color:#efefef; max-width:1000px;}
.TableFormLayout caption	{text-align:left; font-size:14px; color:#2d4285; 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;}
.TableFormLayout caption span	{float:left; padding-right:10px;}
.TableFormLayout 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%);}
.TableFormLayout td				{text-align:left; vertical-align:top; padding:7px 3px 3px 3px;}
.TableFormLayout tr:first-of-type td	{padding:10px 3px 7px 3px;}

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


/*  The following block of CSS should all be deleted when the current process is complete - Bruce June 2015  
From here....  */
/*
.FormSectionTop					{margin-top:1px; border:1px solid #666;}
.FormSectionBottom			{border:1px solid #888; margin-top:1px;}
.FormSectionSeparator		{line-height:30px;}

.FormTextBox							{padding:8px; font-size:14px; color:#000; background-color:#fff; border-top:1px solid #e5e5dd; border-left:1px solid #e5e5dd; border-right: 1px solid #e5e5dd; border-bottom:1px dashed #e5e5dd; margin:10px 0;}
.FormTextBox							{padding:8px; font-size:14px; color:#000; background-color:#fff; border-top:1px solid #e5e5dd; border-left:1px solid #e5e5dd; border-right: 1px solid #e5e5dd; border-bottom:1px dashed #e5e5dd; margin:10px 0;}
.FormTextBoxGreen				{padding:8px; font-size:14px; color:#000; background-color:#b8eba9;}
.FormPulldown						{padding:8px; font-size:14px; line-height:19px; color:#000; /*background-color:#c7e2e4;*/ /*margin:10px 0;}
.FormPulldownLanguage		{padding:4px 6px; font-size:10px; color:#666; background-color:#e9f4f3; margin:10px;}
.FormPulldownSection		{padding:4px; font-size:12px; color:#446f83; background-color:#e9f4f3; margin:10px;}

.ImgBtnGeneric						{opacity:0.8;}
.ImgBtnGeneric:hover		{opacity:1.0;}
/* ....to here */


/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* Global Form Style Handling */
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */

/* Causes a star to display after mandatory form elements - apply class to a trailing span */
/*
.FormRequiredField::after 	{content:"\2605"; color:#fa613e; font-size:12px; right:-4px; top:0; position:relative; vertical-align:top; height:100%;}

/* Default form element styling */
/*
textarea										{width:90%; max-width:800px; height:75px;}
input[type="text"], input[type="password"] , textarea {padding:8px; margin:10px 0; font-size:14px !important; color:#000; background-color:#fff; border-top:1px solid #e5e5dd; border-left:1px solid #e5e5dd; border-right: 1px solid #e5e5dd; border-bottom:1px dashed #e5e5dd;}
input[type="text"], input[type="password"] {height:18px !important; margin:0 5px 0 0;}
select 											{padding:2px; margin:0 5px 0 0; font-size:14px; color:#000; background-color:#fff; border:1px solid #888;}
fieldset										{width:90%; max-width:800px; border-top:1px solid #e5e5dd; border:1px solid #e5e5dd; margin:10px 0; padding:8px;}
legend											{border:0; padding:0; margin:0 5px; font-size:12px; font-weight:normal;}

/* Give a hover effect to checkboxes and radio buttons */
/*
label				{padding:0 3px 0 5px; vertical-align:top;}
label:hover	{cursor:pointer; color:#f60;}
input[type="checkbox"]:hover, input[type="radio"]:hover	{cursor:pointer; color:#f60;}


/* Form element standard widths */
/*
input[type="text"]				{width:90%; max-width:794px;}
input[type="file"]				{width:100px !important;}
select											{width:200px;}
.FormWidthFull							{width:90%; max-width:800px;}
.FormWidthLong							{width:400px !important;}
.FormWidthMedium						{width:200px !important;}
.FormWidthShort						{width:100px !important;}
.FormWidthTiny							{width:50px !important;}

/* Change the appearance on selection, or if the element is disabled */
/*
input[type="text"]:hover, textarea:hover {border:1px solid #666;}
textarea:focus, input:focus, select:focus  {outline:none; box-shadow: 0 0 10px 0px #ccc;}
textarea:focus, input:focus  {background-color:#fffaed !important;}
textarea:disabled, input:disabled, select:disabled, submit:disabled  {box-shadow: 0 0 8px 0px #fab9b9;}


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

/* ItemFile control - applied at the central control level */
/*
.FormContItemFile					{width:90%; max-width:800px; border-collapse:collapse; border:1px solid #ccc; background-color:#efefef;}
.FormContItemFile caption	{text-align:left; font-size:14px; color:#2d4285; 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;}

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

/* Over-ride default form element settings for auto-complete search box - apply to a containing DIV */
/*
.FormContAutoComplete								{width:200px !important; float:left; margin:0 5px 0 0;}
.FormContAutoComplete div td				{height:22px !important;}
.FormContAutoComplete input					{height:16px !important;}
.FormContAutoComplete input:focus		{background-color:transparent !important;}
.FormContAutoComplete input:hover		{border:0px;}

/* Handle issues created by the the JQuery that handles the MaxChar functionality on textareas - apply to a containing DIV */
/*
.FormContTextAreaMaxChar						{width:90%; max-width:800px; display:inline-block;}
.FormContTextAreaMaxChar	textarea	{width:99%;}

/* Over-ride default table cell formatting for the Telerik HTML editor and apply a max width - apply to a containing DIV */
/*
.FormContHtmlEdit						{width:90%; max-width:800px; display:inline-block;}
.FormContHtmlEditWide				{width:90%; 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. */

/* Over-ride default settings for the Telerik Date Picker - apply to a containing DIV */
/*
.FormContDate								{padding:0; display:inline-block; margin-right:10px;}

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


/* BUTTONS (split out and set individual classes / customise as needed)  */

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


/* 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:10px 22px; font-size:14px; color:#da7c3e; border:0; background-color:#1f2326; cursor:pointer; border-radius:4px;}

.BtnAdd:hover, .BtnYes:hover					{background-color:#3f8f4b; background-image: linear-gradient(0deg, #3f8f4b, #70cf7e 90%);}
.BtnDelete:hover, .BtnNo:hover				{background-color:#8f3f43; background-image: linear-gradient(0deg, #8f3f43, #cf7076 90%);}
.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		{color:#fff; background-color:#1f2326;}

.BtnAdd:focus, .BtnYes:focus					{background-color:#3f8f4b; background-image: linear-gradient(0deg, #3f8f4b, #70cf7e 90%);}
.BtnDelete:focus, .BtnNo:focus				{background-color:#8f3f43; background-image: linear-gradient(0deg, #8f3f43, #cf7076 90%);}
.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; background-image: linear-gradient(0deg, #3F578F, #7086cf 90%);}

/* 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:#584b7a; background-image: linear-gradient(0deg, #584b7a, #bab3c9 90%); cursor:pointer; border-radius:3px;}

.BtnSmlAdd:hover, .BtnSmlYes:hover		{background-color:#3f8f4b; background-image: linear-gradient(0deg, #3f8f4b, #70cf7e 90%);}
.BtnSmlNo:hover												{background-color:#8f3f43; background-image: linear-gradient(0deg, #8f3f43, #cf7076 90%);}
.BtnSmlUpdate:hover, .BtnSmlSearch:hover, .BtnSmlContinue:hover, .BtnSmlSendTest:hover, .BtnSmlReportShow:hover, .BtnSmlSelect:hover, .BtnSmlClear:hover, .BtnSmlAssign:hover, .BtnSmlGo:hover				{background-color:#3f578f; background-image: linear-gradient(0deg, #3F578F, #7086cf 90%);}

.BtnSmlAdd:focus, .BtnSmlYes:focus		{background-color:#3f8f4b; background-image: linear-gradient(0deg, #3f8f4b, #70cf7e 90%);}
.BtnSmlNo:focus												{background-color:#8f3f43; background-image: linear-gradient(0deg, #8f3f43, #cf7076 90%);}
.BtnSmlUpdate:focus, .BtnSmlSearch:focus, .BtnSmlContinue:focus, .BtnSmlSendTest:focus, .BtnSmlReportShow:focus, .BtnSmlSelect:focus, .BtnSmlClear:focus, .BtnSmlAssign:focus, .BtnSmlGo:focus				{background-color:#3f578f; background-image: linear-gradient(0deg, #3F578F, #7086cf 90%);}

 /* 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:22px; 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; background-image: linear-gradient(0deg, #3F578F, #7086cf 90%);}
.BtnSmlGoSearch:focus	{background-color:#3f578f; background-image: linear-gradient(0deg, #3F578F, #7086cf 90%);}


/* A HREF based buttons */

.ButtonOrangeLge  {background-color:#ff9c2b; text-align:center; padding:4px 20px 4px 20px; margin:0 6px 0 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;}


/* Form Tables 
===================== */
/*
.FormTable								{margin-top:20px; margin-bottom:20px; background-color:#eff1f1;}
.FormTable th						{font-size:14px; color:#333; font-weight:bold; padding:12px 5px 12px 15px; text-align:left; border-bottom:2px solid #333; border-top:2px solid #e5e5e5;}
.FormTable td						{font-size:14px; color:#333; padding:4px 5px 4px 6px;}
.FormTableHead						{font-size:14px; color:#333; font-weight:bold; padding:12px 5px 12px 15px; border:1px solid #bebebe; }
.FormCellHeadSub					{font-size:14px; color:#000; font-weight:bold; padding:3px; background-color:#ecf1f7; }
.FormSectionTop					{border:1px solid #ccc; margin-top:1px;}
.InstructTextSml					{font-size:11px; color:#999;}
.FormRequired						{font-size:18px; color:#f60;}
.ErrStdRed								{font-size:12px; color:#f00; vertical-align:top}


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

.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:transparent; text-align:center; padding:12px 0; margin:10px 0 15px 0; border-radius:2px; font-size:16px; line-height: 18px; display: block; border: 1px solid #fff;}
a.ButtonALge:link, a.ButtonALge:visited   {color:#ccc; text-decoration:none !important;}
a.ButtonALge:hover, a.ButtonALge:active   {color:#ccc; background-color:#333; text-decoration:none;}



/* Form Buttons
===================== */
/*
.FormButton							{margin:20px 0; padding:12px 30px 12px 30px; font-size:14px; color:#fff; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2690a8), color-stop(1, #007C99) ); background:-moz-linear-gradient( center top, #2690a8 5%, #007C99 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2690a8', endColorstr='#007C99'); background-color:#007C99; border:none; text-decoration:none;}
.FormButton:hover				{margin:20px 0; padding:12px 30px 12px 30px; font-size:14px; color:#fff; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2690a8), color-stop(1, #007C99) ); background:-moz-linear-gradient( center top, #2690a8 5%, #007C99 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2690a8', endColorstr='#007C99'); background-color:#007C99; border:none; text-decoration:none; cursor:pointer; opacity:.8;}
.FormButtonSubmit				{margin:20px 0; padding:12px 30px 12px 30px; font-size:14px; color:#da7c3e; background-color:#1f2326; border:none; text-decoration:none;}
.FormButtonSubmit:hover	{margin:20px 0; padding:12px 30px 12px 30px; font-size:14px; color:#fff; background-color:#1f2326; border:none; text-decoration:none; cursor:pointer; opacity:.8;}


.FormButtonSubmit2				{margin:20px 0; padding:12px 30px 12px 30px; font-size:18px; color:#da7c3e; background-color:#1f2326; border:none; border-radius: 6px; text-decoration:none;}
.FormButtonSubmit2:hover	{margin:20px 0; padding:12px 30px 12px 30px; font-size:18px; color:#fff; background-color:#1f2326; border:none; text-decoration:none; cursor:pointer; opacity:.8;}


/* 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;  margin:0; padding:0;border:none; background-color:transparent; cursor:pointer; display:inline-block;}
.ImgBtnEventRemove			{width:165px; height:42px; ; margin:0; padding:0;border:none; background-color:transparent; cursor:pointer; display:inline-block;}
.ImgBtnEventFind					{width:67px; height:33px;  margin:0; padding:0;border:none; background-color:transparent; cursor:pointer; display:inline-block;}
.ImgBtnReportFind				{width:133px; height:33px; b; margin:0; padding:0;border:none; background-color:transparent; cursor:pointer; display:inline-block;}

.ImgBtnEventBook					{width:185px; height:40px; }
.ImgBtnEventBook:hover	{opacity:.8;}

.ImgBtnEventBookLge			{width:184px; height:51px; }
.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; padding:6px 5px;}
.EventGridTable td			{color:#000; font-size:11px; padding:3px; border-bottom:1px solid #cfcfcf;}

/* RUGBY SEARCH */
/*
.ImgBtnSearchGo					{width:33px; height:35px; }
.ImgBtnSearchGoLarge		{width:36px; height:28px; }

/* FEEDBACK BUTTONS */
/*
.ImgBtnFeedbackSubmit		{width:186px; height:38px;  margin:0; padding:0;border:none; background-color:transparent; cursor:pointer; display:inline-block;}
.ImgBtnFeedbackIconPlus	{width:24px; height:24px;  margin:0; padding:0;border:none; background-color:transparent; cursor:pointer; display:inline-block;}
.ImgBtnFeedbackIconPicture	{width:24px; height:24px;  margin:0; padding:0;border:none; background-color:transparent; cursor:pointer; display:inline-block;}

/* SHOPPING BASKET */
/*
.ImgBtnBacketQtyUpdate	{width:196px; height:22px;  margin:0; padding:0;border:none; background-color:transparent; cursor:pointer; display:inline-block;}
.ImgBtnBasketBrowse			{width:33px; height:25px; margin:0; padding:0;border:none; background-color:transparent; cursor:pointer; display:inline-block;}

/* MISC BUTTONS */
/*
.ImgBtnSubmit						{width:101px; height:29px;  margin:0; padding:0;border:none; background-color:transparent; cursor:pointer; display:inline-block;}
.ImgBtnSubmit:hover			{opacity:.8;} 
.ImgButtonCloseBox			{width:101px; height:31px; margin:0; padding:0;border:none; background-color:transparent; cursor:pointer; display:inline-block;}
.ImgBtnFind							{width:66px; height:24px;  margin:0; padding:0;border:none; background-color:transparent; cursor:pointer; display:inline-block;}
.ImgBtnForumSearch			{width:66px; height:24px; ; margin:0; padding:0;border:none; background-color:transparent; cursor:pointer; display:inline-block;}

.ImgBtnTop 							{width:141px; height:31px;  margin:20px 0 20px 0; padding:7px 0 0 5px; border:none; background-color:transparent; cursor:pointer; display:inline-block; text-align:left; font-size:13px; line-height:27px;}
.ImgBtnTop:link					{text-decoration:none; display:block; width:141px; height:31px; margin:0;}
.ImgBtnTop:hover 				{ -webkit-transition:all 0.5s linear; -ms-transition:all 0.5s linear; transition:all 0.5s linear;}

/* IC: these are new classes, out of full ImageButton conversion */
/*
.ImgBtnCPDPdfDownload		{width:132px; height:25px; margin:0; padding:0;border:none; background-color:transparent; cursor:pointer; display:inline-block;}
.ImgBtnCPDAddNew 	{width:48px; height:18px;  margin:0; padding:0;border:none; background-color:transparent; cursor:pointer; display:inline-block;}
.ImgBtnLoginFeature 	{width:101px; height:29px; margin:0; padding:0;border:none; background-color:transparent; cursor:pointer; display:inline-block;}

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

/* Responsive Menu
===================== */
/* main menu bar */
#nav {margin:0; z-index:2000; position:relative;}
/* Use 'transform' to set a new container reference for nested elements with 'position:fixed' */
/* #nav {-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);}  */
#nav > a {display:none;}

/* Generic */
#nav ul {list-style-type:none; margin:0; padding:0;}
#nav li {text-align:left;}
#nav li a {display:block; text-decoration:none; line-height:3.0em; padding:0 0.3em 0 0.8em;}

/* First level */
#nav > ul {display:block;}
#nav > ul > li {display:inline-block; height:100%; border:0;}
#nav > ul > li > a {height:100%; font-size:20px; line-height:normal; padding:20px 10px 20px 10px; color:black; font-weight:700;}
#nav > ul > li > a > span:after {content:"\25BC"; color:#ccc; position:relative; right:-7px; font-size:0.6em; font-family:Arial;}  /*  ▼ = ▼ = \25BC  || For special chars, convert entity code to CSS hex here: http://www.evotech.net/articles/testjsentities.html */
#nav > ul > li.active > a, #nav > ul > li.active > a > span::after {color:#f58026;} 
#nav > ul > li:hover > a, #nav > ul > li:hover > a > span::after {background-color:none; color:#f58026;}

/* Second level  */
#nav > ul > li > ul {border-bottom:1px solid #ccc; visibility:hidden; width:calc(100vw - 7vw); max-width:1300px; position:absolute; top:100%; left:0; padding:0; background-color:#fff; overflow:hidden; min-height:0; max-height:0; opacity:0.0; color:#fff; transition:padding 0.0s, min-height 1.0s, max-height 0.0s, opacity 0.3s; -webkit-transition:padding 0.0s, min-height 0.0s, max-height 1.0s, opacity 0.3s; box-shadow: 0 8px 4px -4px rgba(76, 76, 76, 0.3); }
#nav > ul > li > ul > li {display:inline-block; vertical-align:top; position:relative; font-weight:bold; width:178px; margin:20px 5px;}
#nav > ul > li > ul > li:first-of-type 	{margin-left:10px;}
/* #nav > ul > li:nth-of-type(4) > ul > li {width:160px;}   Shrink the base column width of the 'More' mega menu to accommodate 4 columns + the feature content at the right.  Ended up not needing this. Leaving this code in case becomes useful one day */
#nav > ul > li > ul > li:last-of-type {position:absolute; right:20px; top:0; width:40%; border:0 solid #ddd; padding:0 10px 10px 10px;}
#nav > ul > li > ul > li > a {border:1px solid transparent; border-radius:2px; font-size:14px;}
#nav > ul > li > ul > li > a::before {font-size:1.8em; font-weight:bold; color:transparent; vertical-align:top; margin:0 5px; content:"."; position:absolute; left:2px; /*border-left:1px solid #bbb;*/}
#nav > ul > li > ul > li > a:hover {color:#666; border:1px solid #ccc; background-color:#fefefe;}
#nav > ul > li:hover > ul {visibility:visible; min-height:370px; max-height:800px; opacity:1; overflow:visible; border-left: 1px solid #dfdfdf; border-right: 1px solid #dfdfdf;}
 
/* Third level */
#nav > ul > li > ul > li > ul > li {font-weight:400; padding:0 0 0 10px; border:1px solid transparent; border-radius:2px;}
#nav > ul > li > ul > li > ul > li:hover {border:1px solid #ccc; background-color:#fefefe;}
#nav > ul > li > ul > li > ul > li > a {color:#666; height:100%; font-size:14px; line-height:1.2em; font-weight:400; padding:0.7em 1.5em 0.7em 0.3em;}
#nav > ul > li > ul > li > ul > li > a:hover {color:#666;}

.FlyoutExtra 	{}
/* Provide for making the anchor act more like a full hot panel. Note. The HTML 'A' tag can't be put around the container DIV as source gets automagically messed up on saving in the HTML Editor when saved. */
.FlyoutHotPanel				{border:1px solid transparent; height:100%;}
.FlyoutHotPanel .span_1_of_2	{height:98%;}
.FlyoutHotPanel a			{display:block !important; line-height:normal !important; height:100%;}
.FlyoutHotPanel:hover	{border:1px solid #ddd;}

 @media only screen and ( max-width: 1080px) /* show hamburger */ {
	/* Menu icon / menu row */
	#nav {width:97%; position:relative; z-index:10000;}
	#nav > a {height:60px; position:relative; border-radius:7px;}
	#nav > a:hover {background-color:none; text-decoration:none; color:#107889;}
	#nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type {display:block;}
	#nav .menuicon {float:left; font-size:36px; font-weight:bold; margin:15px 10px 0 20px; color:#fff;}
	#nav .menutext {float:left; font-size:28px; margin-top:13px; color:#0602a6a34;}

	/* Generic */
	#nav li {display:block; border:none; float:none;}
	#nav li a {line-height:2.7em; padding:0 1.0em 0 0.5em;}

	/* First level */
	#nav > ul {display:none; position:absolute; left:calc(((100vw - 94vw) / 2) * -1); border:0; width:100vw;}
	#nav:target > ul {display:block;}
	#nav > ul > li {display:block; background-color:#f0f3f6; border-right:none; border-bottom:2px solid #ccc;}
	#nav > ul > li > a {line-height:2.5em; color:#107889; padding:15px 15px 10px 10px;}
	#nav > ul > li > a > span:after {content:"\25BC"; float:right; font-size:1.0em; text-shadow:none;}  /*  ? = ▼ = \25BC  || For special chars, convert entity code to CSS hex here: http://www.evotech.net/articles/testjsentities.html */

	/* Second and Third levels */
	#nav ul ul li:last-child {}

	/* Second level */
	#nav > ul > li > ul {width:100%; max-width:100vw; position:static; border:0; overflow:hidden; min-height:0;}
	#nav > ul > li:hover > ul {min-height:30px;}
 	#nav > ul > li > ul > li {display:block; font-weight:bold; width:100%; margin:0;}
	#nav > ul > li > ul > li:first-of-type 	{margin-left:0; padding-top:5px;}
	#nav > ul > li > ul > li:last-of-type {position:static; border:none; padding:0;}
	#nav > ul > li > ul > li > a {text-indent:0.8em; font-size:0.8em; line-height:1.5em;}
	/* #nav > ul > li > ul > li > a > span:after {content:'\25BC'; margin-right:0.5em; float:right; font-size:1.0em;} */ /*  ? = ▼ = \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 {max-height:2000px; opacity:1.0;}
	#nav ul ul ul li {border-left:none;}
	#nav ul ul ul li a {text-indent:1.5em; font-size:1.4em;}
	 
	.FlyoutExtra 	{display:none;}
}

/* Second level - Vertical 
===================== */
#navSub, #navSub ul			{width:100%; list-style:none; line-height:24px; padding:0; margin:0; font-size:14px;}
#navSub .sel							{background-color:#fde8d7; color:#000; /*background-image:url(/assets/images/arrow_subnav_1_on.gif);*/}
#navSub a								{display:block; color:#394c4f; text-decoration:none;}
#navSub li								{margin:0px; padding:0px; /*background:url(/assets/images/arrow_subnav_1.gif) 3px 6px no-repeat;*/ list-style:none;}
#navSub li a							{/*width:204px; w\idth:184px;*/ padding:4px 5px 4px 12px; /*background:url(/assets/images/arrow_subnav_1.gif) 3px 6px no-repeat;*/}
#navSub li ul						{border:0;}
#navSub li li .sel			{background-color:#fde8d7; /*background-image:url(/assets/images/arrow_subnav_2_on.gif);*/}
#navSub li li						{margin:0px; padding:0px; /*background:url(/assets/images/arrow_subnav_2.gif) 10px 6px no-repeat;*/}
#navSub li li a					{/*width:204px; w\idth:174px;*/ padding:4px 5px 4px 25px; /*background:url(/assets/images/arrow_subnav_2.gif) 10px 6px no-repeat;*/}
#navSub a:hover					{background-color:#fef6f0;}

/* Second level - 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 
===================== */
.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
===================== */
.MenuBotL1								{font-size:12px; color:#666; line-height:18px;}
.MenuBotL1 a:link				{color:#fff; text-decoration:underline;}
.MenuBotL1 a:visited		{color:#ccc; text-decoration:underline;}
.MenuBotL1 a:active, .MenuBotL1 a:hover		{color:#f60; text-decoration:underline; -webkit-transition:all 0.5s linear; -ms-transition:all 0.5s linear; transition:all 0.5s linear;}
.MenuBotL1 span     {padding:0 5px 0 5px;}

.MenuBotL2								{font-size:12px; color:#666; line-height:18px;}
.MenuBotL2 a:link				{color:#fff; text-decoration:underline;}
.MenuBotL2 a:visited		{color:#ccc; text-decoration:underline;}
.MenuBotL2 a:active, .MenuBotL2 a:hover		{color:#f60; text-decoration:underline; -webkit-transition:all 0.5s linear; -ms-transition:all 0.5s linear; transition:all 0.5s linear;}
.MenuBotL2 span     {padding:0 5px 0 5px;}

.FlyoutPanelText 			{font-weight: 300 !important; color: #666; font-size: 12px;}

/* ======================================================================================== */
/* ======================================================================================== */
/* 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 */
.FriendsPanel						{padding:2px;}
.FriendsPanelHeader			{padding:3px 5px; background-color:#e6e6e6; font-size:11px;}

/* Homepage Hero */
.HeroPosition						{margin:40px auto; width:94%;}

/* Product Listings 
===================== */
/* PRODUCT GRID LAYOUT*/

/* 2 Column - Product Category Layout */

.ProductPanel							{width:46%; /*31%*/ min-width:280px; /*180px*/ min-height:260px; float:left; margin-left:0; margin-bottom:24px; margin-right:3%; /*2%*/  border:1px solid #e1e1e1; box-shadow:0 0 2px 2px #e1e1e1;}
.ProductPanel:hover				{opacity:0.9; background-color:#fafafa;}
.ProductPanelInfo					{width:88%; margin:20px auto; text-align:center;}
.ProductPanelInfo h2			{font-size:22px !important; font-weight:200;}
.ProductPanelInfo p				{font-size:14px !important; color:#333; line-height:18px !important; font-weight:200;}
.ProductPanelInfo a:link, .ProductPanelInfo a:visited	{text-decoration:none;}
.ProductPanelInfo a:hover, .ProductPanelInfo a:active	{text-decoration:underline;}
.ProductPanelInfo img			{margin:30px auto;}

/* MAKE LAYOUT SHUFFLE at 860px */
@media only screen and (max-width: 860px) {

.ProductPanel {width:98%; margin-right:1%; margin-left:1%; border:1px solid #e1e1e1;}

}

/* MAKE LAYOUT SHUFFLE at 480px */
@media only screen and (max-width: 480px) {

.ProductPanel {min-height:260px; margin-right:1%; margin-left:1%; border:1px solid #e1e1e1;}

}

/* 3 Column - Product Category Layout */

.ProductPanel3Col									{width:31%; min-width:180px; min-height:340px; float:left; margin-left:1%; margin-right:1%; margin-bottom:14px; box-shadow:0 0 2px 2px #e1e1e1;}
.ProductPanel3Col:hover						{opacity:0.9; background-color:#fafafa;}

/* MAKE LAYOUT SHUFFLE at 768px */
@media only screen and (max-width: 768px) {

.ProductPanel3Col {width:47%; min-width:240px; min-height:260px; border:1px solid #f5f5f5;}

}

/* MAKE LAYOUT SHUFFLE at 480px */
@media only screen and (max-width: 480px) {

.ProductPanel3Col {width:98%; min-height:260px; border:1px solid #f5f5f5;}

}

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

/* 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-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:#666; font-size:11px;}

/* Ratings 
===================== */
/*
.filledRatingStar			{}
.ratingStar						{background-repeat:no-repeat; cursor:pointer; display:block; font-size:0; height:12px; margin:0; padding:0; width:13px;}
.emptyRatingStar			{}
.savedRatingStar			{}

/* Feedback 
===================== */
/*
.FeedbackTable				{width:850px;}
.feedbackPosition			{position:fixed; top:40px; right:0px;}

/* Shop - Shared 
===================== */
/*----------------------------------------------*/
/* Grid Layout -  Responsive Columns */

/*Generic handling to make the active area the same size as the contained DIV */
/*
.PanelItemGrid           {padding:0 5px;}
.PanelItemGrid > article       {float:left; background-color:#fff;}
.PanelItemGrid > article > a     {display:block; width:100%; text-decoration:none;}

/*Custom size handling for each column variant */
/*
.PanelItemGrid3Col > article     {width:31%; min-width:160px; margin:0 1% 14px 1%;}
.PanelItemGrid3ColNarrow > article   {width:31%; min-width:160px; margin:0 1% 14px 1%;}
.PanelItemGrid3ColReseller > article  {width:31%; min-width:300px; margin:0 1% 14px 1%;}
.PanelItemGrid3ColDownloads > article  {width:31%; min-width:180px; margin:0 1% 14px 1%;}

.PanelItemGrid2ColVideo > article 	{width:48%; min-width:200px; margin:0 1% 14px 1%;}
.PanelItemGrid4Col > article      	{width:23%; min-width:170px; margin:0 1% 14px 1%;}
.PanelItemGrid4ColProds > article   {width:23%; min-width:220px; margin:0 1% 14px 1%;}
.PanelItemGrid4ColImages > article 	{width:23%; min-width:200px; margin:0 1% 14px 1%; position:relative;}
.PanelItemGrid3ColVideo > article   {width:31%; min-width:300px; margin:0 1% 14px 1%;}

/*Set the heights by Grid type  (move generic handling from the next CSS block up into here if needed)*/
/*
.PanelItemGrid3Col > article > a > div     			{height:400px;}
.PanelItemGrid3ColNarrow > article > a > div   	{height:260px;}
.PanelItemGrid3ColReseller > article > a > div  {height:auto;}
.PanelItemGrid3ColDownloads > article > a > div {height:440px;}

.PanelItemGrid4Col > article > a > div      	{height:300px;}
.PanelItemGrid4ColProds > article > a > div   {height:350px;}
.PanelItemGrid4ColImages > article > a > div  {height:180px;}
.PanelItemGrid3ColVideo > article > a > div   {height:350px;}
.PanelItemGrid2ColVideo > article > a > div 	{height:390px;}

/*Generic handing to set the primary container size, and ensure the active area is the same size and support the image resize effect*/
/*
.PanelItemGrid > article > a > div     {border:1px solid #e1e1e1; padding:0 5%; overflow:hidden; box-shadow:0 0 2px 2px #e3e3e3;}
.PanelItemGrid > article > a > div:hover  {border:1px solid #b7b7b7; box-shadow:0 0 2px 2px #cacaca;}

/*Animate the Image*/
/*
.PanelItemGrid4ColProds > article > a > div > div:last-child img     {max-height:180px; max-width:190px;}
.PanelItemGrid > article > a > div > div:last-child img     {-webkit-transition:-webkit-transform 1s; transition: transform 1s;}
.PanelItemGrid > article > a > div:hover > div:last-child img  {transform:scale(0.9,0.9); -webkit-transform: scale(0.9,0.9);}

/*Image Gallery Custom*/
/*
.PanelItemGrid4ColImages	{margin-top:20px;}
.PanelItemGrid4ColImages > article > a > div     {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:180px; 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:16px; text-align:center; font-weight:bold; padding-top:7px; width:90%; margin:0 auto;}
.PanelItemGrid4ColImages .ImgDesc {text-align:left; padding:5px 0px 0px 5px;	font-size:12px;	line-height:14px; width:90%; margin:0 auto;}
.PanelItemGrid4ColImages .ImgRelatedProducts {text-align:left; padding:5px 0px 0px 5px;	font-size:12px;	line-height:14px; width:90%; margin:0 auto;}
.PanelItemGrid4ColImages .ImgRelatedProducts a:link, .PanelItemGrid4ColImages .ImgRelatedProducts a:visited {color:#ccc;}
.PanelItemGrid4ColImages .ImgRelatedProducts a:hover {color:#f60;}

/*Generic handling to deal with the content of each panel*/
/*
.PanelItemGrid > article > a > div > div     {margin:15px auto; text-align:center;}
.PanelItemGrid > article > a > div > div h2    {font-size:18px !important; line-height: 21px; color:#394c4f; margin:20px 0 5px 0;}
.PanelItemGrid > article > a > div > div p     {font-size:12px !important; line-height:17px; color:#525252; margin:0;}
.PanelItemGrid > article > a > div > div p:hover {cursor:pointer;}
.PanelItemGrid > article > a > div > div img   {margin:5px auto; z-index:50; position:relative;}

/*Layer in special markers*/
/*
.PanelItemGrid aside:nth-of-type(1)     {position:absolute; z-index:150;}
.PanelItemGrid aside:nth-of-type(1) > img  {margin:5px 0;}

/*Layer in add to basket to list control*/
/*
.PanelItemGrid aside:nth-of-type(2)     {position:absolute; z-index:150;}
.PanelItemGrid aside:nth-of-type(2) > a  {margin:300px 0;}

/* MAKE LAYOUT SHUFFLE at 900px */
/*
@media only screen and (max-width: 1000px) {
.PanelItemGrid4Col > article, .PanelItemGrid4ColProds > article, .PanelItemGrid4ColImages > article {width:31%; margin:0 1% 14px 1%;}
}
/* MAKE LAYOUT SHUFFLE at 768px */
/*
@media only screen and (max-width: 768px) {
	.PanelItemGrid3Col > article > a > div     			{height:380px;}

.PanelItemGrid3Col > article, .PanelItemGrid3ColNarrow > article, .PanelItemGrid3ColDownloads > article, .PanelItemGrid4Col > article, .PanelItemGrid4ColProds > article, .PanelItemGrid4ColImages > article, .PanelItemGrid3ColVideo > article {width:48%; margin:0 1% 14px 1%;}
.PanelItemGrid2ColVideo > article {width:98% !important; margin:15px auto !important;}
}
/* MAKE LAYOUT SHUFFLE at 480px*/
/*
@media only screen and (max-width: 480px) {
.PanelItemGrid3Col > article, .PanelItemGrid3ColNarrow > article, .PanelItemGrid3ColDownloads > article, .PanelItemGrid4Col > article, .PanelItemGrid4ColProds > article, .PanelItemGrid4ColImages > article, .PanelItemGrid3ColVideo > article {width:98%; float:none; margin:0 auto 10px auto;}
.PanelItemGrid > article > a > div     {height:auto;}
}

/* Product Listings Layout */

/* Product Detail Layout */


/* Animation 
===================== */

/* 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-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:100%; margin:20px 0 20px 0; border:1px solid #d9d9d9; background-color:#f5f9fa;}

.DashboardAvatar	 img				{margin:8px 16px;}
.DashboardProfileName				{font-size:22px; font-weight:bold; color:#006472;}

/* CRM Chat
===================== */
/*
.CRMChatPanel	{margin-top:20px; padding-bottom:10px;}
.CRMChatBorder {border:1px solid #ddd;}
.CRMChat_Item		{clear:both; padding:8px;}
.CRMChat_Right		{Width:600px; border-radius:8px; float:right; border:1px solid #aaa; background-color:#d4f7d2; padding:3px 6px;}
.CRMChat_Left	{Width:600px; border-radius:8px; float:left; border:1px solid #aaa; background-color:#f4f4f4; padding:3px 6px;}
.CRMChat_FileNote{Width:600px; 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 {Width:750px; }
.ChatBoxPanelInput {border:1px solid #999; background-color:#f9faeb; padding:2px;}
.ChatBox	{}
.ChatBoxButton {float:right;}
.CRMChat_AttachedFile {Margin-top:5px;}

/* ======================================================================================== */
/* ======================================================================================== */
/* Static */
/* ======================================================================================== */
/* ======================================================================================== */

.ShrinkWrap				{display:block;}
.ShrinkWrapInline				{display:inline-block;}
.nobr								{display:inline; white-space:nowrap;}
.BackgroundWhite		{background-color:#fff;}
.BackgroundGrey			{background-color:#ccc;}
.FloatLeft					{float:left;}
.FloatRight					{float:right; overflow:hidden;}
.OverflowHidden	{overflow:hidden;}
.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;}
.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;}
.MarginTop8					{margin-top:8px;}
.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;}
.MarginBottom30			{margin-bottom:30px;}
.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 #bbe7c8;}
.DividerLine			{margin:10px 0; background-color:#ccc; height:4px;}
.Border3Grey			{border:3px solid #e2dbe6;}
.Border1Black			{border:1px solid #000;}

.BackgroundHighlight		{background-color:#f7f8fd;}

/* % 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%;}
.Width28	{width:28%;}
.Width30	{width:30%;}
.Width33	{width:33%;}
.Width34	{width:34%;}
.Width35	{width:35%;}
.Width38	{width:38%;}
.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%;}

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


/* COLORS
===================== */
/*
.Red								{color:#f00;}
.Green							{color:#093;}
.Black							{color:#000 !important;}
.White							{color:#fff;} 
.Orange							{color:#f60;}

/* Expanding Panels  (FAQ's)
===================== */
/* Format our link that will be used to trigger the toggle */
/*
.TriggerText						{font-family:Arial Narrow, Arial; font-size:24px; width:95%; color:#333; padding:25px 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; width:auto;}


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


/*Example Generic Table Handling*/
/*
.TableStd						{width:90%; border-collapse:collapse; max-width:1000px;}
.TableStd > tbody		{border:1px solid #ccc;}
.TableStd caption		{text-align:left; font-size:14px; color:#2d4285; 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;}


/* Video */
/* standard youtube sizes: 560x315, 640x360, 853x480, 1280x720 */
/* Note that smallest possible video size to embed (according to some blogs) is 200x200 */
/* However, we found when CSS is left out video renders in 267x150 so that is the smallest we use*/
/*
.Video150 {width:267px; height:150px;}
.Video315 {width:560px; height:315px;}
.Video360 {width:640px; height:360px;}
.Video480 {width:853px; height:480px;}
.Video720 {width:1280px; height:720px;}

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


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

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


/*  IMPORT FONTS
===================== */




/* Generic */
.ImageRight					{float:right; margin:12px 6px 12px 25px;}
.ImageLeft						{float:left; margin:12px 25px 12px 0;}
/*
.NiceLists						{color:#6e757a; font-style:italic; border-left:4px solid #a0d0ce; padding:10px 20px 5px 36px; margin-top:20px; margin-bottom:20px; margin-left:25px; line-height:18px;}
.NiceLists	li				{margin-bottom:12px;}

/* PARTNER LINKS */
.PartnerLinks							{background-color:transparent; padding:6px; font-weight: 300;}
.PartnerLinks span				{margin:3px 12px 2px 3px; display:block; float:left;}
.PartnerLinks i 					{float:left; color: #4e4c45; font-size:20px !important; margin-top:3px;}
.PartnerLinksText a:link, .PartnerLinksText a:visited		{color:#171515; text-decoration:none;}
.PartnerLinksText a:hover, .PartnerLinksText a:active		{color:#ccc; text-decoration:underline;}
.PartnerLinksText					{text-align:left; font-size:13px; color:#fff;}

/*  GRID OF TWO - LINKS   ============================================================================= */
/*
.span_1_of_2Links {width:49.2%;}

/* SOCIAL LINKS */
/*
.SocialLinks								{width:145px; float:right;}
.SocialLinks img						{margin:0 auto;}

.MainLogo									{margin:20px 0;}
.SearchLink								{margin:20px 0; float:right;}

.SecondaryLinks						{text-align:right; width:100%; position:relative; margin-top:30px;}
.SecondaryLinksText				{font-family:BebasNeue, Arial Narrow, Arial; font-size:1.4em; padding:5px 7px;}
.SecondaryLinksText	 a:link, .SecondaryLinksText	 a:visited		{color:#394c50; text-decoration:none;}
.SecondaryLinksText	 a:hover, .SecondaryLinksText	 a:active		{color:#f60; text-decoration:underline;}

.MenuLinks									{float:right;}
.MenuLinkImage img				{padding:0 10px;}

.BigButtonGraphics					{margin:20px; background-color:#eef6f6; border-radius:6px;}
.BigButtonGraphics img			{margin: 10px auto;}
.BigButtonGraphics img:hover {opacity:.8; transform:scale(0.98,0.98); -webkit-transform: scale(0.98,0.98); -webkit-transition:-webkit-transform 1s; transition: transform 1s; cursor:pointer;}

/* Homepage Feature Panels */
/*
.HomepageFeature {width:90%; margin-bottom:20px; background-color:#eff1f1; box-shadow: 0 0 2px 2px #ececec;}
.HomepageFeature hr {border-top-width:2px; border-top-style:solid; border-right-style:none; border-bottom-style:none; border-left-style:none; border-top-color:#333; margin-right:0px; margin-left:0px;}

.HomepageFeature a:link, .HomepageFeature a:visited {text-decoration:none !important;}
.HomepageFeature a:hover, .HomepageFeature a:active {text-decoration:none !important;}

.HomepageFeature h2 {font-size:28px !important; font-family:BebasNeue, Arial Narrow, Arial; color:#fff; background-color:#000; text-align:center; margin:0; padding:14px 0 14px 0;}
.HomepageFeature p {color:#000; font-size:13px;}
.HomepageFeature p a:hover, .HomepageFeature a:active {text-decoration:none !important;}
.HomepageFeature:hover {background-color:#f7f9f9;}

.HomepageFeature img {margin:0 auto !important;}
.HomepageFeature img:hover {opacity:.8;}

.HomepageFeatureText	{padding:20px;}

.HomepageFeatureButton	{background-color:#8d9fa2; width:100%; text-align:center; color:#fff; padding:6px 0; margin-top:10px;}
.HomepageFeatureButton a:link, .HomepageFeatureButton a:visited {text-decoration:none !important; display:block; color:#fff !important;}
.HomepageFeatureButton a:hover, .HomepageFeature a:active {text-decoration:none !important;}
.HomepageFeatureButton:hover {background-color:#f38034; pointer:cursor;}

/* Side Features */
/*
.HomeSideFeature					{margin:10px;}
.HomeSideFeature	 img		{margin:10px auto;}
.HomeSideFeature img:hover {opacity:.8;}

/* Video Side Features */
/*
.HomeVideoPanel					{width:100%; margin:0 auto; background-color:#eff1f1; color:#394c4f; padding:0; vertical-align:top;}
.HomeVideoPanel	h1			{font-size:24px; line-height:normal; color:#fff; font-family:BebasNeue, Arial Narrow, Arial; background-color:#00788a; text-align:center; padding:12px 0; margin:0px;}
.HomeVideoPanel	h2			{font-size:15px; text-align:center; font-weight:bold;}
.HomeVideoPanel p				{font-size:12px;}
.HomeVideoPanelInner		{width:80%; margin:0 auto;}
.HomeVideoPanelInner img	{margin:10px auto;}
.HomeVideoPanelInner img:hover {opacity:.8;}

/* Footer Navigation */

/*  GRID OF FOUR  */

.span_1_of_4Footer {width:23.8%;}


/* Homepage Feature Panels */
/*
.ContactFeature {width:90%; margin-bottom:20px; background-color:#eff1f1; box-shadow: 0 0 2px 2px #ececec;}
.ContactFeature hr {border-top-width:2px; border-top-style:solid; border-right-style:none; border-bottom-style:none; border-left-style:none; border-top-color:#366; margin-right:0px; margin-left:0px;}

.ContactFeature a:link, .ContactFeature a:visited {text-decoration:none !important; color:#000 !important;}
.ContactFeature a:hover, .ContactFeature a:active {text-decoration:none !important;}

.ContactFeature h2 {font-size:28px !important; font-family:BebasNeue, Arial Narrow, Arial; color:#fff; background-color:#366; text-align:center; margin:0; padding:14px 0 14px 0;}
.ContactFeature p {color:#000; font-size:13px;}
.ContactFeature p a:hover, .ContactFeature a:active {text-decoration:none !important;}
.ContactFeature:hover {background-color:#f7f9f9;}

.ContactFeature img {margin:0 auto !important;}
.ContactFeature img:hover {opacity:.8;}

/* Shortcuts */
/*
.ShortCutsPanel						{width:95%; margin-left:auto; margin-right:auto; margin-bottom:24px; padding:0 0 20px 0; background-color:#f5fdfd; -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);}
.ShortcutsPanelHeader			{background-color:#007889; padding:5px 3px;}
.ShortCutsContent					{margin-top:20px; width:85%; margin-left:auto; margin-right:auto;}
.ShortCutsContent img:hover {opacity:.8;}

/* Installers */
/*
.ContactText								{border-left:2px solid #e1eef4; padding-left:15px;}

/* Get a Quote */
/*
.QuoteForm									{width:90%; padding:25px 30px; background-color:#eff1f1; color:#394c4f; margin-bottom:30px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px;}
.QuoteForm hr							{border-top-width:2px; border-top-style:solid; border-right-style:none; border-bottom-style:none; border-left-style:none; border-top-color:#333; margin-right:0px; margin-left:0px;}

/* Contact Page */
/*
.TradingHours							{font-size:11px; padding:6px; background-color:#e0e0e0; border-top:2px solid #333;}
.ContactNumbers						{color:#000;}
.ContactNumbers a:link, .ContactNumbers a:visted	{color:#000; text-decoration:none;}

/* Weatherboard Types */
/*
.WeatherboardsPanel							{width:42%; /*31%*/ /*min-width:260px; /*180px*//* min-height:260px; float:left; margin-left:0; margin-bottom:24px; margin-right:3%; /*2%*/  /*border:1px solid #e1e1e1; box-shadow:0 0 2px 2px #e1e1e1;}
.WeatherboardsPanel:hover				{opacity:0.9; background-color:#fafafa;}

.ApplicationIcon						{margin:8px; float:left;}
.ProductImageLge	 img			{border:8px solid #fff !important; -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); margin: 5px;}

/* Product Specs */
/*
.ProductSpecs							{font-size:13px; line-height:16px;}
.ProductSpecs h3						{font-size:16px; font-weight:normal; color:#333; background-color:#eceeea; padding:8px 18px;}
.ProductSpecs td						{padding:3px;}

.GetQuoteButton					{font-family:BebasNeue, Arial Narrow, Arial; -webkit-border-radius:1px; -moz-border-radius:1px; border-radius:1px; display:inline-block; color:#fff; background-color:#f58026; font-size:20px; line-height:20px; padding:10px 0; text-decoration:none !important; text-align:center; margin-top:10px; margin-bottom:10px; margin-left:auto; margin-right:auto; text-decoration:none; width:120px;}
.GetQuoteButton:hover		{color:#fff; opacity:0.8;}
.GetQuoteButton:active	{position:relative; top:1px;}

/* Learning Stuff */
/*
.TutorialBanner		{background-color:#ccc;}

.ProductHeader			{background-color:#eff1f1; padding:6px 16px 28px 20px; margin-bottom:8px;}

/* Gallery Link */
/*
.GalleryLinkText		{font-size:12px; color:#007889;}
.GalleryLinkText	 a:link, .GalleryLinkText	 a:visited	{text-decoration:none;}

/* CAD DRAWINGS */
/*
.CadHeading									{background-color:#eceeea; padding:14px 8px 14px 30px; margin:10px 0;}
.CadHeading	h3 							{margin:0; color:#333;}
.ProductImageTimspec				{margin:5px;}
.DownloadsColImage 					{width:25%;}
.DownloadsColSpacer 				{width:5%;}
.DownloadsColText 					{width:38%;}
.DownloadIconCell 					{width:8%;}
.DownloadIcon 							{width:45px; margin:3px;}
.DownloadIcon:hover 				{opacity:0.8;}

/*Google Map*/
/*
.containerMap {	width: 100%; /* pick whatever width you want *//*	}
.containerMap .outerMap	{	width: 100%;padding-top: 75%; /* defines aspect ratio *//* position: relative;}
.containerMap .outerMap .innerMap {position: absolute; top: 0;left: 0;	right: 0;	bottom: 0;}
.gmnoprint img {max-width: none;}

/* Certification */
/*
.Certificates			{mpadding-bottom:6px;}
.Certificates img	{float:left; margin-top:5px; margin-left:9px; margin-bottom:5px; margin-right:9px;}

/* Responsive iframe */
/*
.iframe4x3 {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. */
/*
.iframe4x3,.iframe16x9  iframe {position:absolute; top:0; left:0; width:100%; height:100%; }

/* Homepage */
.HomeNewsPanel				{margin:10px auto; border:2px solid #f48035; font-size:12px;}
.HomeNewsPanel h4		{color:#00788a; font-size:16px;}
.HomeNewsPanel p			{color:#00788a;}
.HomeNewsHeader			{background-color:#f48035; margin:0;}
.HomeNewsInfo				{background-color:#d7f1f0; margin:0; padding:15px 0;}
.HomeNewsInfo > div	{margin:auto 20px;}

/* CUSTOM BIG IMAGE POPUP HANDLING STARTS HERE */
/* Large Image Pop-up handline using Pure CSS */
/*
.ImagePopup-Trigger								{border:1px solid transparent;}
.ImagePopup-Trigger:hover					{border: 1px solid #e1e1e1; box-shadow: 0 0 2px 2px #e3e3e3;}

.ImagePopup-Modal 						{position:fixed; top:0; right:0; bottom:0; left:0; background-color:rgba(0,0,0,0.5); z-index:99999; opacity:0; display:none; -webkit-transition: opacity 2s ease-in; transition: opacity 2s ease-in;}
.ImagePopup-Modal:target 		{opacity:1; display:block;}
.ImagePopup-Modal > img 			{position:relative; max-height:90vh; max-width:90vw; margin:5vh auto; border-radius:5px; background-color:#fff; box-shadow: 0 0 10px 5px #555; animation-name: ModalContent; animation-duration: 0.8s;}

.ImagePopup-Closer  							{cursor:context-menu;}
.ImagePopup-CloserTarget 					{position:fixed; top:0; left:0; width:0; height:0;}  /* stops the page from scrolling when closing the pop-up */

/* Add animation to make it a little more cool! */
/*
@keyframes ModalContent {
	from {top:-200px;opacity: 0;}
	to {top:0px;opacity:1;}
}
/* CUSTOM BIG IMAGE POPUP HANDLING ENDS HERE */

/* Flyout Menu */
.FlyoutCol 					{padding:15px; background-color:#3a3a3a !important;}
.FlyoutCol hr 			{border-top-width:1px !important; border-top-style:solid; border-right-style:none; border-bottom-style:none; border-left-style:none; border-top-color:#666; margin-right:0px; margin-left:0px;}

.SignUpLink {position:relative; float: right; top:18px; text-align:center; font-weight:300; padding:5px 25px; font-size:18px; line-height:normal; display:inline-block; border-radius:2px; background-color:#e8762c; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s; transition:all 0.3s;}
a.SignUpLink:link, a.SignUpLink:visited {text-decoration:none; color:#fff;}
a.SignUpLink:hover, a.SignUpLink:active {text-decoration:none; color:#fff; background-color:#8d8d8d; transition:all 0.3s ease;}

/* Hero Section */
.HeroSection 				{background-color:#eae9e4; padding:40px 0;}

/* HOME - SEO & News */
.SEOandNewsSection 	{background:url() no-repeat #eaece6; background-size:61% 2000px;} /* Adjust background size to get bg color to extend all the way to the edge of the page */
.WhiteBackground 	{background:#FFF; background-size:61% 2000px;}

.NewsPanel 					{background-color:#eaece6; padding:20px 0;}
.HomeNews 					{padding:10px 0; margin:0 10px 0 20px;}
/* HOME - Brands */
.BrandsPanel 				{padding:30px 0; background-color:#5b5b56;}

/* Float 3 columns side by side */
.BrandsColumn 		{float:left; width:31%; padding:0 1%;}
/* Remove extra left and right margins, due to padding */
.BrandsRow 				{margin:0 -0.7%;}
/* Clear floats after the columns */
.BrandsRow:after 	{content:""; display:table; clear:both;}
/* Style the counter cards */
.BrandsCard 			{box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2); padding:16px 25px 10px 25px; text-align:center; font-size:12px; line-height:16px; background-color:#fff; margin-top:14px; margin-bottom:14px; min-height:160px; position:relative;}
.BrandsCard img 	{margin:5px auto;}
.BrandsCard p 		{margin-top:100px;}

.BrandsCard  a 	{position:absolute; top:0; left:0; bottom:0; right:0; z-index:1000; padding:16px 25px 10px 25px;}
.BrandsCard:hover img, .BrandsCard:hover p {opacity: 0.7;}


/* HOME - 1st Feature Panel Section - contains 4 links */
.FeaturePanel1 			{background-color:#1f2325; padding:60px 0;}
.WhitePanel1 			{background-color:#FFF; padding:60px 0;}

/* 1st Feature Panel - 4 Links */
/* SOURCE: [Demo] http://tympanus.net/Development/HoverEffectIdeas/ */
/*

.grid {position:relative; clear:both; margin:0 auto; list-style:none; text-align:center;}

/* Common style */
/*
.grid figure {position:relative; float:left; overflow:hidden; margin:10px 2%; /* Responsive margins *//* max-width:482px; width:21.8%; /* Responsive colum widths */ /*background:#494843; text-align:center; cursor:pointer;}
.grid figure:first-child 	{margin-left:0;}
.grid figure:last-child 	{margin-right:0;}

/* Make color images black n white */
/*
.grid figure img {position:relative; display:block; opacity:0.2; -webkit-filter:grayscale(100%); /* Safari 6.0 - 9.0 *//* filter:grayscale(100%);}
.grid figure span img {position:relative; display:block; opacity:1.0; margin: 15% auto 0 auto;} /* Push the image down *//*
.grid figure figcaption {color:#fff; text-align:center; text-transform:uppercase; -webkit-backface-visibility:hidden; backface-visibility:hidden;}
.grid figure figcaption::before,
.grid figure figcaption::after {pointer-events:none;}
.grid figure figcaption,
.grid figure figcaption > a {position:absolute; top:0; left:0; width:100%; height:100%;}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
/*
.grid figure figcaption > a {z-index:1000; text-indent:200%; font-size:0; opacity:0;}
.grid figure h2 {font-weight:300; font-size:70px;} /* Icon *//*
.grid figure h3 {font-weight:400; font-size:24px;} /* Heading *//*
.grid figure h2 span {font-weight:800;} /* Span handling - not used *//*
.grid figure h2, .grid figure h3,
.grid figure p {margin:0; text-align:center; color:#fff; width:100%;}
.grid figure p {letter-spacing:1px; font-size:68.5%;}

/* Animation effects */

/* SOURCE: [Demo] http://tympanus.net/Development/HoverEffectIdeas/ */

/*-----------------*/
/***** Goliath *****/
/*-----------------*/
/*
figure.effect-goliath {background:#333;} /* Colour used to show b+w image above *//*
figure.effect-goliath img,
figure.effect-goliath h2 {-webkit-transition:-webkit-transform 0.75s; transition:transform 0.75s;}
figure.effect-goliath img,
figure.effect-goliath h3 {-webkit-transition:-webkit-transform 0.6s; transition:transform 0.6s;}
figure.effect-goliath img {-webkit-backface-visibility:hidden; backface-visibility:hidden;}
figure.effect-goliath h2, figure.effect-goliath h3,
figure.effect-goliath p {position:absolute; bottom:0; left:0;}
figure.effect-goliath h2	{padding:/*30px 0 100px 0*/ /*5% 0 27% 0;	}
figure.effect-goliath h3	{padding:/*30px 0 40px 0*//* 5% 0 17% 0;}
figure.effect-goliath p {padding:0 0 40px 0;}
figure.effect-goliath p {text-transform:none; font-size:90%; opacity:0; -webkit-transition:opacity 0.75s, -webkit-transform 0.75s; transition:opacity 0.75s, transform 0.75s; -webkit-transform:translate3d(0,50px,0); transform:translate3d(0,50px,0);}
figure.effect-goliath:hover img {-webkit-transform:translate3d(0,-100px,0); transform:translate3d(0,-100px,0); opacity:1.0;}
figure.effect-goliath:hover img {-webkit-filter:grayscale(0%); /* Safari 6.0 - 9.0 */ /*filter:grayscale(0%); /* show this for blue rollover opacity effect::::-webkit-transition:0.6s ease-in-out; -moz-transition:0.6s ease-in-out;*//*}
figure.effect-goliath:hover h2 {-webkit-transform:translate3d(0,-100px,0); transform:translate3d(0,-100px,0);}
figure.effect-goliath:hover h3 {-webkit-transform:translate3d(0,-100px,0); transform:translate3d(0,-100px,0);}
figure.effect-goliath:hover p {opacity:1; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0);}
figure.effect-goliath:hover {background:#494843;} /* Background color for text panel */

/* HOME - 2nd Feature Panel */
.FeaturePanel2 			{background-color:#1f2325; padding:40px 0;}
.FeaturePanel2 h3 	{color:#fff; font-weight: 300; font-size:17px;}
.FeaturePanel2 a:link, .FeaturePanel2 a:visited {color:#fff; text-decoration:none;}
.FeaturePanel2 a:hover, .FeaturePanel2 a:active {color:#fff; text-decoration:underline;}

.FeatureIcon 				{opacity:0.6;}
.FeatureIcon:hover 	{opacity:1;}

/* HOME - Home Markets */
.HomeMarkets 				{padding:60px 0;}
.HomeMarketsCard 		{box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);}
.HomeMarkets p 			{font-size:12px; line-height: 17px; margin: 10px 0; padding:0 15px;}
.HomeMarkets h4 		{font-size:21px; line-height: 26px; color: #4e4c45; margin: 20px 0; padding:0 15px;}

/* EFFECTS */
/* 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.1); transform:scale(1.1);}

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

/* Product Search */
/*
.ProductSpeciesSearch input[type="text"]	{height:24px !important; font-size:18px !important;}

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

/* Remove column interspacing */
.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%;}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* @media handling to change layout and show/hide elements */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


/*  MAKE LAYOUT SHUFFLE at 1200px  ============================================ */

@media only screen and (max-width:1300px) {

	/* Support the jam packed 'More' mega menu to help everything fit. Ended up not following this path. Leaving this code in case it beoomes useful - high chance.
	#nav > ul > li:nth-of-type(4) > ul > li {width:160px;}
	#nav > ul > li:nth-of-type(4) > ul > li:last-of-type {width:35%;}
	*/
}

@media only screen and (max-width:1200px) and (min-width:767px) {
	/* Use most of the width of the screen */
	.grid figure h2 {font-size:50px !important;}
	.grid figure h3 {font-size:24px !important;}

	figure.effect-goliath p {padding:0 0 26px 0 !important;	}

	/* Support the jam packed 'More' mega menu to help everything fit. Ended up not following this path. Leaving this code in case it beoomes useful - high chance.
	#nav > ul > li:nth-of-type(4) > ul > li {width:155px;}
	#nav > ul > li:nth-of-type(4) > ul > li:last-of-type {width:30%;}
	*/
}


/*  MAKE LAYOUT SHUFFLE at 1000px  ============================================ */
@media only screen and (max-width: 1100px) {
	/* Use most of the width of the screen */
	.HeroSection 				{background-color:#3d3c37; padding:20px 0 !important;}
	.BrandsCard p 			{margin-top:110px;}

}

/* Responsive columns */
@media screen and (max-width: 800px) {
  .BrandsColumn 		{width:100%; display:block; margin-bottom:20px; padding: 0;}
	.BrandsCard 			{margin-top:6px; margin-bottom:6px;}
}

/* MAKE LAYOUT SHUFFLE at 768px */
@media only screen and (max-width: 768px) {
	.WeatherboardsPanel		{width:98% !important; margin-right:1%; margin-left:1%; border:1px solid #e1e1e1;}
	.span_1_of_4Footer 	{width:100%;}
	.PartnerLinks					{/*display:none;*/}
	.SignUpLink {font-size:14px !important;}
	.cNavSub	{display:none;}
	.MainLogo									{margin:10px auto !important; height: 50px;}
	.SearchLink 					{margin:10px auto !important;}
	.grid figure 			{display:inline-block !important; float:none !important; margin:10px auto !important; width:100% !important;} /* Make the Homepage buttons stack vertically */
	.grid figure span img {margin: 25% auto 0 auto;}
	.grid figure h3 {font-size:36px !important;}
	.FooterNavText {text-align:center; line-height:26px !important; border-bottom:1px solid #666; margin-bottom:15px; padding-bottom:10px;}
	.PageFooter hr 						{border-top-color:transparent;}
	.PageFooterImg 				{float:none; margin:10px auto;}
	.FooterContactText 		{padding:20px 0; text-align:center;}
	.StreamsweetLogo 			{float:none; margin: 10px auto;}

}

/* MAKE LAYOUT SHUFFLE at 640px */
@media only screen and (max-width: 640px) {
	
	h1						{font-size:35px; line-height:40px; font-weight:200; color:#394c4f; margin:20px 0px 22px 0px; text-align:center} /* Dark Green */
	h2						{font-size:25px; line-height:36px; font-weight:200; color:#394c4f; margin:16px 0px 7px 0px; text-align:center} /* Dark Green */
	.col {margin:1% 0 1% 0%;}
	/* Control images when they have more space to display */	
	.responsive-image img {height:auto !important; max-width:80% !important; width:80% !important;}
	/* Footer */
	.span_1_of_4Footer {width:100%;}
	.span_1_of_2Links {width:100%;}
	.SocialLinks				{float:none !important; margin:3px auto !important;}
	.cNavBottom	{text-align:center;}
	
	.SecondaryLinks						{text-align:center !important; width:99%; margin-top:0; font-size:1.0em;}
	.MenuLinks									{margin-top:8px; width:242px !important; margin-left:auto; margin-right:auto; float:none !important;}
	.MenuLinkImage							{}
	.cContent1							{width:94%;}
	.cContent2							{width:94%;}
	.SEOandNewsSection 		{background-color:#fff !important;}
	.WeatherboardsPanel		{width:98% !important; margin-right:1%; margin-left:1%; border:1px solid #e1e1e1;}
		/* Make containers center align */
	.hContent2						{}
	
	.hNavBottom						{text-align:center;}
	.DownloadsColImage 					{width:25%;}
	.DownloadsColSpacer 				{width:10%;}
	.DownloadsColText 					{width:40%; font-size:12px; line-height:16px;}
	.DownloadIconCell 					{width:5%;}
	.DownloadIcon 							{width:24px; margin:4px;}
	
}

/*  GO FULL WIDTH AT LESS THAN 640 PIXELS */
@media only screen and (max-width: 640px) {
	.span_2_of_2 {width:100%;}
	.span_1_of_2 {width:100%;}
}

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

/*  GO FULL WIDTH AT LESS THAN 640 PIXELS */
@media only screen and (max-width: 640px) {
	.span_3_of_3 {width:100%;}
	.span_2_of_3 {width:100%;}
	.span_1_of_3 {width:100%;}
}

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

/*  GO FULL WIDTH AT LESS THAN 640 PIXELS */
@media only screen and (max-width: 640px) {
	.span_4_of_4 {width:100%;}
	.span_3_of_4 {width:100%;}
	.span_2_of_4 {width:100%;}
	.span_1_of_4 {width:100%;}
}

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

/*  GO FULL WIDTH AT LESS THAN 640 PIXELS */
@media only screen and (max-width: 640px) {
	.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%;}
}

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

/*  GO FULL WIDTH AT LESS THAN 640 PIXELS */
@media only screen and (max-width: 640px) {
	.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%;}
}

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

/*  GO FULL WIDTH AT LESS THAN 640 PIXELS */
@media only screen and (max-width: 640px) {
	.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%;}
}

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

/*  GO FULL WIDTH AT LESS THAN 640 PIXELS */
@media only screen and (max-width: 640px) {
	.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%;}
}

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

/*  GO FULL WIDTH AT LESS THAN 640 PIXELS */
@media only screen and (max-width: 640px) {
	.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%;}
}

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

/*  GO FULL WIDTH AT LESS THAN 640 PIXELS */
@media only screen and (max-width: 640px) {
	.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%;}
}

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

/*  GO FULL WIDTH AT LESS THAN 640 PIXELS */

@media only screen and (max-width: 640px) {
	.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%;}
}

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

/*  GO FULL WIDTH AT LESS THAN 640 PIXELS */
@media only screen and (max-width: 640px) {
	.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%;}
}