/* 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', sans-serif, 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;}

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%; font-weight:300;}
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, menu {border:0; padding:0; margin: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					{margin:0; font-size:1rem; color:#4e4e50;}

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

h1						{font-size:3em; margin: 0.67em 0; font-weight:300;}
h2						{font-size:2rem; font-weight:300; line-height: 1.5; margin-bottom:0.5rem;}
h3						{font-size:1.75rem; line-height: 1.5; font-weight: 300; margin-bottom:0.5rem;}
h4						{font-size:1.5rem; font-weight:300; margin-top:0; margin-bottom:0.5rem;}
h5						{font-size:1.25rem; font-weight:300; margin-bottom:0.5rem;}
h6						{font-size:1rem; margin-bottom:0.5rem; font-weight:400;}

blockquote		{margin: 0 0 1rem}
hr						{border-top-width:1px; 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; margin-top:1rem; margin-bottom:1rem;}
img						{border:0; display:block; max-width:100%; height:auto; width:auto\9; /* ie8 */}

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

/* streamSWEET additional Fonts 
===================== */
.TextStd				{}
.TextGrey									{color:#aaaaac;}
.TextEmphasis	{color:#999; font-style:italic;}
.TextStrong		{font-weight:bold;}
.TextSml1			{font-size:90% !important; color:#939598; line-height: 1.5;}
.TextSml2			{font-size:11px; color:#999;}
.TextLarge			{font-size:18px;}
.TextLarge1			{font-size:22px; line-height:32px;}
.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;}
.TextInstruct		{font-size:12px; color:#2d4285;}
.TextBold			{font-weight:bold;}
.TextCaps			{text-transform:uppercase;}
.TextOrange								{color:#f63;}
.KeynotesTxtColor   {color: #1c1cff;}
/* streamSWEET predefined tables
===================== */
.Table1					{border-collapse:collapse; border:1px solid #b7b8b8;}
.Table1Head		{background-color:#3c3c3c; padding:5px 5px 5px 3px; font-size:14px; font-weight:bold; color:#f7f7f7; text-align:left; border:1px solid #b7b8b8;}
.Table1SubHead	{background-color:#d4d4d4; padding:3px 3px 3px 3px; font-size:12px; font-weight:bold; border-top:1px solid #b7b8b8; border-bottom:1px solid #b7b8b8;}
.Table1Content	{background-color:#fbfbfb; padding:2px 2px 2px 3px; font-size:12px; border-top:1px solid #b7b8b8; border-bottom:1px solid #b7b8b8;}
.FormContItemFile	{width:90%; max-width:800px; border-collapse:collapse; border:1px solid #ccc;}
.FormContItemFile td		{padding:2px;}

.TableWidth80			{width:80%; border:0; margin:30px 0;}
.TableWidth80 td		{padding:5px; font-size:14px;}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*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:3em; margin:0.67em 0; font-weight:300;}
.Head2			{font-size:2rem; font-weight:300; line-height:1.5; margin-bottom:0.5rem;}
.Head3			{font-size:1.75rem; line-height:1.5; font-weight:300; margin-bottom:0.5rem;}
.Head4			{font-size:1.5rem; font-weight:300; margin-top:0; margin-bottom:0.5rem;}
.Text1			{font-size:12px; color:#000;}
.Text2			{font-size:12px; color:#999;}
.Text3			{font-size:12px; 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; background-image:url(/assets/images/tile_Heading1.jpg); background-repeat:repeat-x; 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:#fff;}
.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;}
.PanelTabsContentTelerik  		{margin-top:-1px; border:1px solid #888; padding:13px 10px 10px 10px; background-color:#fff; overflow:hidden;}
.PanelContentItemSet					{margin:15px 10px 0 10px;}
.PanelContentItemSet > span 	{display:block; line-height:16px;}

/*.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:20px 6px; padding:18px; font-size:1.2em; background-color:#fcf7f2; border:1px solid #ff9c2b; border-radius:5px; box-shadow:0 0 20px 0px #ccc; /*background-image:linear-gradient(0deg, #ffecd9, #fcf7f2 90%);*/}
.PanelInPageAlert h2			{margin-top:0;}
.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-image:url('/assets/admin/images/icon_warning_sign.gif'); 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;}

.PanelLogin						{background-color:#f5f5f5; padding:15px 30px; border-left:1px solid #999; border-right:1px solid #999; border-bottom:5px solid #999; text-align:left;}
.PanelLoginCont				{position:absolute; top:0; right:150px; 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;}


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

.PanelAddressBilling > span {display:block;}
.PanelAddressBilling  {margin:15px 5px 5px 5px;}
.PanelAddressBilling span[data-address=Name], .PanelAddress span[data-address=TradingName] {font-size:1.2em;}
.PanelAddressBilling span[data-address=Email] {margin-top:15px;}

.PanelAddressDelivery > span {display:block;}
.PanelAddressDelivery  {margin:15px 5px 5px 5px;}
.PanelAddressDelivery span[data-address=Name], .PanelAddress span[data-address=TradingName] {font-size:1.2em;}
.PanelAddressDelivery span[data-address=Phone] {margin-top:15px;}
/* ======================================================================================== */
/* ======================================================================================== */
/* 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; position:relative; max-width:1400px; width:94%;}

/* First level containers for each horizontal panel - set margins, background colours, panel widths etc */
.PageHeader				{margin:0px auto; overflow:hidden;}
.PageBanner				{margin:0px auto; padding:8px 0px; background-color:#aec1c8; overflow:hidden;}
.PageBannerHome			{background-image:url(/assets/images/Home-sample-1.jpg); min-height:300px; margin-top:0; background-repeat:no-repeat; background-size:cover; /*contain;*/ background-position:50% 50%; overflow: hidden; /*background-attachment:fixed;*/}
.PageBannerHome h1 	{font-weight:300; line-height: 1.6; font-size:2.4em; margin:0.5em 0;}
.PageBannerHome hr	{border-color:#bdbebf;}
.HeroPanel						{width:60%; margin:90px 0; color:#fdfdfd; background-color:rgba(87, 111, 131, 0.8); padding:1rem 2rem; float:right; position:relative;}
		
.PageHero					{margin:0px auto;}
.PageMenu					{margin:8px auto; padding:0 0; background-color:#ccc; border-radius:7px; height:50px;}
.PageContent				{mmargin:0px auto; padding:20px 0; background-color:#fff; text-align:left; min-height:800px;}
.PageFooter				{margin:0px auto; background-color:#4e4e50; padding:30px 0;}

/* Major element containers, for elements that show on most pages in the site */
.Basket						{}
.Login						{}
.Logo							{}
.Banner						{}
.Manu							{}
.SubMenu					{}
.Breadcrumbs			{}
.Content1					{}
.Content2					{}
.Content1Home			{}
.Content2Home			{}
.FooterNav				{}
.FooterStream			{}

/* Template specific layout handlers */


/* Home 
===================== */
.hNavMain							{margin:0 auto; position:relative; background-color:#4e4e50;}
.hContent1							{width:90%; padding:0; background-color:#fff; text-align:left; vertical-align:top; margin-left:auto; margin-right:auto;}
.hContent2							{padding:0px 0px 20px 0; text-align:left; 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 30px 20px 30px; vertical-align:top; color:#fff;}
.hFooterInfo						{background-color:#144f97;}

/* Content - Standard
===================== */
.MenuWrapper						{}
.cBanner								{padding:8px 0px; background-color:#aec1c8;}
.cNavMain							{margin:0 auto; position:relative; background-color:#4e4e50;}
.cNavSub							{padding:0; background-color:#fff; vertical-align:top; border:1px solid #ddd; border-radius: 0.25rem; margin:20px 0;}

.cPage									{width:100%}
.cNavBottom						{padding:15px 0 20px 0; vertical-align:top; color:#fff;}
.cContent1							{width:94%; padding:10px 0 30px 0; /*background-color:#fff;*/ text-align:left; vertical-align:top; margin-left:auto; margin-right:auto; min-height:400px;}
.cContent2							{padding:0px 0px 30px 0; text-align:left; vertical-align:top;}
.cFooterInfo						{background-color:#144f97; padding-bottom:20px;}
.cFooter								{padding:15px; vertical-align:top;}
.cBannerCol1						{width:300px; float:left; height:160px; overflow:hidden;}
.cBannerCol2						{width:662px; float:left; height:160px; overflow:hidden;}
.cLogin									{min-width:200px; float:right; background-color:#f5f5f5; padding:8px 3px 10px 24px; border-bottom:6px solid #d8d8d8; margin-top:6px;}
.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;}

/* Generic Layout
===================== */
.LogoRow											{height:70px;}
.LogoRow > div:nth-of-type(1)		{width:50%; max-width:270px; float:left;}
.LogoRow > div:nth-of-type(2)		{width:50%; float:right; text-align:right;}
.LogoRow aside									{display:inline;}


/* 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;}
/* start commented backslash hack \*/
* html .clearfix {height:1%; }
.clearfix {display:block; }
/* close commented backslash hack */

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

/* MISC CLASSES */
.NoDisplay						{display:none;}

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

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

/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* 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:#fbeadb; 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:#ffffff;width:100%; border-collapse:collapse;}
.datagrid td										{font-size: 14px; line-height: 20px; border-top:1px solid #ddd; padding:8px 5px;}
.datagrid td a									{text-decoration:none; position:relative; color:#222324; display:block;}

.datagrid tr:first-of-type td		{border-width: 0px;}

.datagridAlter									{background-color:#f9f9f9;}
.datagridAlter td								{font-size: 14px; line-height: 20px; border-top:1px solid #ddd;}
.datagridAlter td a							{text-decoration:none; position:relative; color:#222324; display:block;}

.datagridSelected								{background-color:#dfe6cf;}
.datagridSelected td						{font-size: 14px; line-height: 20px; border-top:1px solid #ddd;}
.datagridSelected td a					{text-decoration:none; position:relative; color:#222324; display:block;}

.datagridOver										{background-color:#fbeadb;}
.datagridOver td								{font-size: 14px; line-height: 20px; border-top:1px solid #ddd;}
.datagridOver td a							{text-decoration:underline; color:#e98b3a; cursor:pointer;}

/* 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									{line-height: 16px!important; vertical-align: bottom; font-size: 14px; font-weight:bold; text-align:left; padding:10px 5px 4px 5px; background-color:#fafafa; border-bottom:2px solid #ccc; border-top:2px solid #ccc;}
.datagridColumn a:link, .datagridColumn a:visited, .datagridColumn a:active		{text-decoration:none; position:relative; color:#222324; display:block;}
.datagridColumn a:hover					{text-decoration:none; color:#f63; cursor:pointer;}

.datagridColumnSelected					{line-height: 16px!important; vertical-align: bottom; font-size: 14px; font-weight:bold; text-align:left; padding:10px 5px 4px 5px; background-color:#edf2f3; /*border-top:2px solid #ccc !important;*/}
.datagridColumnSelected a:link, .datagridColumnSelected a:visited, .datagridColumnSelected a:active		{text-decoration:none; position:relative; color:#222324; display:block;}
.datagridColumnSelected a:hover	{text-decoration:none;  color:#f63; cursor:pointer;}
.datagridColumnSelected a::after	{content: "\21C5"; margin-left: 10px;}

/*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 10px 0 10px; font-weight:bold;}
.datagridPager td a    {padding:5px 10px; margin:0 1px 0 0; color:#999; font-weight:bold; border:1px solid #666; display:inline-block; line-height:20px; height:24px; border-radius:3px;}
.datagridPager td a:hover    {background-color:#555; border-color:#000; color:#fff; font-weight:bold;}

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

/* RadGrid - used for drag and drop grid */
.HypergridTableHeader			{overflow:hidden; width:100%; table-layout:fixed; empty-cells:show; border-collapse:collapse;}
.HypergridTableHeader th	{padding:4px 2px 4px 4px;}
.DivDragDropImage					{margin-left:auto; margin-right:auto; width:16px; height:16px; text-align:center; background-image:url(/assets/images/icon_sort_up_down.gif);}
.RadGridDragDropEnabled		{cursor:move;}
.rgPager .rgCurrentPage		{text-decoration:none; color:Black;}
.rgPager .rgInfoPart			{display:none;}
.rgMasterTable						{border-collapse:collapse !important;}
.rgMasterTable tr th			{vertical-align:bottom;}
.rgMasterTable tr:last-of-type td		{border-bottom:1px solid #999;}
.rgFooterWrapper					{border-top:2px solid #999; padding-top:5px; color:#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; background:url(/assets/images/tabspanelleft.gif) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; background-position:0% -42px;}
.tabspanel a span					{float:left; display:block; background:url(/assets/images/tabspanelright.gif) no-repeat right top; padding:10px 15px 6px 10px;  color:#000; background-position:100% -42px;}
.tabspanelon a							{float:left; background:url(/assets/images/tabspanelleft.gif) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none;}
.tabspanelon a span				{float:left; display:block; background:url(/assets/images/tabspanelright.gif) no-repeat right top;padding:10px 15px 6px 10px; color:#e98b3a;}
.tabspanel a:hover				{background-position:0% 0px;}
.tabspanel a:hover span		{color:#ff6600; background-position:100% 0px;}

/* New tabs, all contained in the page, with only display values modified. */
.TabSet							{width:100%; margin:0 auto;}
.TabSet > nav				{border:none; position:relative; margin:0 10px;}		/* Must keep the 'border' attribute or the rendering engines get confused.*/
.TabSet > nav > a			{display:inline-block; min-width:60px; text-decoration:none; color:#000; text-align:center; padding:10px 20px 10px 20px; font-size:14px; letter-spacing:0.5px; border:1px solid #bcbcbc; outline:0; margin:0; z-index:1000; background-color:#efefef; border-top-right-radius:4px; border-top-left-radius:4px;}
.TabSet > nav > a:nth-of-type(n+2)		{margin-left:-1px;}
.TabSet > nav > a:hover		{background-color: #576F83; color:#fff;}
.TabSet .TabSel			{border-bottom:none; background-color:#fff; padding-top:15px; z-index:1002; position:relative;}
.TabSet .TabSel:hover			{background-color:#fff; cursor:default; color:#ccc;}
.TabSet > article				{border:1px solid #bcbcbc; margin:-2px 10px 0 10px; z-index:1001; position:; padding:15px; background-color:#fff; font-weight:300;}
.TabSet > article > header		{display:none;}
.TabSet > article > header:nth-of-type(1)		{display:block;}
.TabSet > article > header > div		{margin:40px;}
.NarrowViewText	{display:none;}
/* Special handling where a smaller tab size is required. */
.TabSetSml > nav > a	{min-width:40px; padding:10px 5px 10px 5px; font-size:12px; letter-spacing:0.0px;}
.TabSetSml > article > header > div		{margin:20px;}



/* 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-image:url('/assets/images/msg_type_01_01.gif'); background-repeat:no-repeat; background-position:5px 10px;}
.AlertBoxError							{background-color:#fbc8c1; border:1px solid #FF2B2B;}
.AlertBoxInnerError				{background-image:url('/assets/images/msg_type_02_01.gif'); background-repeat:no-repeat; background-position:5px 10px;}
.AlertBoxInfo 							{background-color:#fee1ab; border:1px solid #FFAE17;}
.AlertBoxInnerInfo    {background-image:url('/assets/images/msg_type_03_01.gif'); background-repeat:no-repeat; background-position:5px 10px;}*/

.AlertBoxSuccess				{background-color:#d0fbc1; border:1px solid #54FF54; animation: ActionSuccess 7.0s forwards;}
.AlertBoxInnerSuccess		{background-image:url('/assets/images/msg_type_01_01.gif'); background-repeat:no-repeat; background-position:5px 10px;}
.AlertBoxError					{background-color:#fbc8c1; border:1px solid #FF2B2B; animation: ActionAlert 1.5s forwards;}
.AlertBoxInnerError			{background-image:url('/assets/images/msg_type_02_01.gif'); background-repeat:no-repeat; background-position:5px 10px;}
.AlertBoxInfo						{background-color:#fee1ab; border:1px solid #FFAE17; animation: ActionAlert 1.5s forwards;}
.AlertBoxInnerInfo			{background-image:url('/assets/images/msg_type_03_01.gif'); background-repeat:no-repeat; background-position:5px 10px;}

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


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

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


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

/* Telerik
===================== */
.riTextBox {height: 24px!important;}
.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;}

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

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

.FooterNavText 				{color:#fff; font-size:12px; line-height:18px; font-weight:200;}
.FooterNavText p {margin: 2px 0 16px 0;    }
.FooterNavText a:link, .FooterNavText a:visited {color:#fff; text-decoration:none;}
.FooterNavText a:hover, .FooterNavText a:active {color:#fff; text-decoration:underline;}
.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:#a7a7a7; margin-right:0px; margin-left:0px;}
.PageFooter h5 				{font-weight:300; font-size:20px;}

/* Social Icons */
.SocialLinks					{width:100%;}
.SocialIcon						{float:left; height:24px; width;24px; margin-right: 18px;}

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

/* Ajax Popup 
===================== */
/* shop */
.FormTopPopup					{background-image:url(/assets/images/tile_stripe.jpg); background-repeat:repeat-x; color:#fff; font-weight:bold; padding-left:15px;}
.FormButtonPopup				{padding:6px 12px 6px 12px; font-size:14px; color:#393b4a; background-image:url(/assets/images/tile_ajaxform_header.jpg); background-repeat:repeat-x; background-color:#b0becd; 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; background-image:url(/assets/images/tile_ajaxform_header.jpg); background-repeat:repeat-x;}
.FormHeaderPopup				{padding:3px; font-size:14px; font-weight:bold; color:#393b4a; background-image:url(/assets/images/tile_ajaxform_header.jpg); background-repeat:repeat-x;}
/* \PayPal_HTML.aspx */
/* \usercontrol\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 */
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */

/* GENERIC FORMATTING */
textarea, input[type="text"]				{font-family:Arial, Helvetica, sans-serif;}

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

/* Form for the NG2 */
.FormPanel {
    width: 100%;
    border: 1px solid #c6c8cb;
}
.FormTitle {
    background: url(/assets/images/app/tile_header_standard.gif) repeat-x #f1f1f1;
    padding: 8px;
    font-size: 12px;
    text-align: left;
    color: #606063;
    font-weight: bold;
}
.FormTextBoxLine		{font-family:Arial, Helvetica, sans-serif; padding:3px; font-size:14px; line-height:20px; color:#000; background-color:#fff; border:solid 1px #a9a9a9; height:auto !important;}
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* 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; font-family:Arial, Helvetica, sans-serif;}

textarea, input[type="text"], input[type="password"], input[type="select"], input[type="number"], textarea {box-sizing:border-box; padding:4px; margin:0; font-size:16px; line-height:1.5; color:#000; background-color:#fff; border:2px solid #8e8e8e; border-radius:0.25rem; box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}
input[type="text"], input[type="password"] {margin:0 5px 0 0;}
textarea:focus, input[type="text"]:focus, input[type="select"]:focus, input[type="number"]:focus, input[type="password"]:focus{border-color:#ccc; outline:none; box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6)}

select 											{padding:2px; margin:0 5px 0 0; font-size:12px; color:#000; background-color:#fff; border:1px solid #888; height:24px;}
fieldset										{width:90%; max-width:800px; border:1px solid #ccc; margin:0 2px; padding:0.35em 0.625em 0.75em;}
legend											{border:0; padding:0; margin:0 5px; font-size:12px; font-weight:normal;}

/* Forces actual size of  */
/*html{box-sizing:border-box}
*,*:before,*:after{box-sizing:inherit}*/

/* Text that shows as text, but when hovered looks like a button */
.TextLink, .TextLink:link, .TextLink:visited 	{font-size: 1.2em; display: inline-block; color: #f63; background-color: transparent; text-align: center; padding: 3px 15px 3px 15px; text-decoration: none; margin: 0; border-radius: 3px;}
.TextLink:hover, .TextLink:active  						{background-color: #f08c3d; color: #fff;}

.TextLinkSmall, .TextLinkSmall:link, .TextLinkSmall:visited 		{font-size: 1.0em; display: inline-block; color: #f63; text-align: center; padding: 3px 5px; text-decoration: none; margin: 0 6px; border-radius: 3px;}
.TextLinkSmall:hover, .TextLinkSmall:active 										{background-color: #f08c3d; color: #fff;}
/* Manage/Print Button */
.TextLinkMngPrint, .TextLinkMngPrint:link, .TextLinkMngPrint:visited 		{color:#000; background-color:#fff; border:1px solid #888; width:110px; font-size: 11px; display: inline-block; line-height:none; text-align: center; padding: 5px 6px 4px 6px; text-decoration: none; margin: 0 4px 3px 4px; border-radius: 5px; font-family:Arial, Helvetica, sans-serif;}
.TextLinkMngPrint:hover, .TextLinkMngPrint:active 												{background-color:#f08c3d; color: #fff; font-family:Arial, Helvetica, sans-serif;}

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

/* Carried back from ng2_spec to make the NG2 forms work. e.g. Org Profile  */
.FormPulldown {padding:4px; font-size:12px; color:#000; background-color:#b0becd; width:auto !important; height:auto !important;}
.FormTextBox {padding:4px; font-size:12px; color:#000; background-color:#fff; border:2px solid #e8e8e8;}
.FormButton {padding:6px 12px 6px 12px; font-size:14px; color:#393b4a; background-image:url(/assets/images/button_tile.jpg);  background-repeat:repeat-x; background-color:#e9e9e9; border:2px solid #d3d3d3; text-decoration:none;}
.FormButtonSubmit {padding:6px 12px 6px 12px; font-size:14px; color:#393b4a; background-image:url(/assets/images/button_tile.jpg); background-repeat:repeat-x; background-color:#e9e9e9; border:2px solid #d3d3d3; text-decoration:none;}

/* Change the appearance on selection, or if the element is disabled */
input[type="text"]:hover, textarea:hover {border:2px solid #ccc;}
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:#fafafa;}
.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;}
.FormButtonSubmitted		{background-color:#993300; cursor:progress;}

/* Full size buttons */
.BtnAdd, .BtnUpdate, .BtnDelete,	.BtnCancel, .BtnSearch, .BtnUpload, .BtnSubmit, .BtnClone, .BtnImport, .BtnArchive, .BtnGo, .BtnContinue, .BtnUpdateQty, .BtnUnlock, .BtnActivate, .BtnResendActivateEmail, .BtnSynch, .BtnPreview, .BtnReportShow, .BtnReportExport, .BtnSchedule, .BtnSend, .BtnSendTest, .BtnSendStop, .BtnClearUnsent, .BtnConfirm, .BtnBack, .BtnSelect, .BtnAssign, .BtnClose, .BtnCheck, .BtnSet, .BtnInvite, .BtnRemind, .BtnClear, .BtnCloseOff, .BtnRecalculate, .BtnValidate, .BtnRestore, .BtnYes, .BtnNo, .BtnEdit, .BtnLogin
{margin:0 5px 0 0; padding:8px 22px; font-size:12px; color:#fff; border:0; background-color:#e98b3a; cursor:pointer; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); font-weight: 300; border: 0.0625rem solid #e98b3a; border-radius: 0.25rem; -webkit-border-radius: 0.25rem; -moz-border-radius: 0.25rem;}

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

.BtnLogin:focus  {background-color:red; border:0.0625rem solid #d87118;}

/* 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; cursor:pointer; border-radius:3px;}

.BtnSmlAdd:hover, .BtnSmlYes:hover		{ background-color:transparent;}
.BtnSmlNo:hover												{background-color:#8f3f43;}
.BtnSmlUpdate:hover, .BtnSmlSearch:hover, .BtnSmlContinue:hover, .BtnSmlSendTest:hover, .BtnSmlReportShow:hover, .BtnSmlSelect:hover, .BtnSmlClear:hover, .BtnSmlAssign:hover, .BtnSmlGo:hover
{background-color:#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%);}

/* The following is being updated.  IVAN please clean this as you adopt / accept the new CSS handling */
.BtnAddNew 					{background-color:transparent; margin:0; padding:0 10px 0 8px; font-size:12px; height:100%; border:none; cursor:pointer; color:#222; font-weight:normal; float:right;}
.BtnAddNew:hover 		{background-color:#b9faca; background-image: linear-gradient(0deg, #b9faca, #e6fcec 90%); text-decoration:none; color:#222;}
/* Make a button that looks like Text that then looks like a button on hover */
.BtnText					{color:#333; font-size:100%; border:1px solid transparent; padding:5px 10px; background-color:transparent; cursor:pointer; border-radius:4px;}
.BtnText:hover, .BtnText:focus		{border:1px solid #333; background-color:#fff !important;}
.BtnTextShow 			{border:1px solid #f00; background-color:#fff;}

/* Form Tables 
===================== */
.FormTable								{margin-top:20px; margin-bottom:20px; background-color:#fff;}
.FormTable th						{2rem color:#333; font-weight:bold; padding:12px 5px 12px 6px; text-align:left; border-bottom:1px solid #eaeaea;}
.FormTable td						{1rem color:#333; padding:6px 6px 6px 6px;}
.FormTableHead						{1.5rem color:#333; font-weight:bold; padding:7px 5px 5px 15px; border:1px solid #bebebe; background-image:url(/assets/images/tile_formheader.jpg); background-repeat:repeat-x;}
.FormCellHeadSub					{1rem color:#000; font-weight:bold; padding:3px; background-color:#ecf1f7; background-image:url(/assets/images/tile_formheader_sub.jpg); background-repeat:repeat-x;}
.FormSectionTop					{border:1px solid #888; margin-top:1px;}
.InstructTextSml					{font-size:12px; color:#999;}
.FormRequired						{font-size:14px; color:#f60;}
.ErrStdRed								{font-size:11px; 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:#ff9c2b; text-align:center; padding:4px 20px 4px 20px; margin:0 6px; border-radius:4px; font-size:16px;}
a.ButtonALge:link, a.ButtonALge:visited   {color:#393b4a; text-decoration:none;}
a.ButtonALge:hover, a.ButtonALge:active   {color:#7a7a7a; background-color:#d7d7d7; text-decoration:none;}

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

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

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

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

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

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

/* SHOPPING BASKET */
.ImgBtnBacketQtyUpdate	{width:196px; height:22px; background:url(/assets/images/button_update_qty.gif) no-repeat 0px 0px; margin:0; padding:0;border:none; background-color:transparent; cursor:pointer; display:inline-block;}
.ImgBtnBasketBrowse			{width:33px; height:25px; background:url(/assets/images/button_browse.gif) no-repeat 0px 0px; margin:0; padding:0;border:none; background-color:transparent; cursor:pointer; display:inline-block;}

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

.ImgBtnTop 									{width:141px; height:31px; background:url(/assets/images/button_top.gif)no-repeat 0px 0px; margin:20px 0 0 0; padding:0; border:none; background-color:transparent; cursor:pointer; display:inline-block; text-align:center; font-size:13px;}
.ImgBtnTop a:link, .ImgBtnTop a:visited		{text-decoration:none; color:#fff; display:block; width:141px; height:31px; margin:0; padding-top:7px;}
.ImgBtnTop a:hover, .ImgBtnTop a:active 	{background:url(/assets/images/button_top_on.gif) no-repeat 0px 0px;}

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

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

/* Responsive Menu
===================== */
/* main menu bar */
#nav {margin:0 auto; width:96%; z-index:2000; height:58px; 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 {color:#a6a6a7; display:block; text-decoration:none; line-height:1.0em; padding:1.0em 0.3em 1.0em 0.8em;}

/* First level */
#nav > ul { height:58px; }
#nav > ul > li:first-of-type {visibility:hidden; width:0;}  /* Hide the HOME button */
#nav > ul > li {display:inline-block; height:100%;  float:left; border:0;}
#nav > ul > li > a {font-size:16px; line-height:3.5em; font-weight:300; padding:0 1.5em 0 0.8em;}
#nav > ul > li > a > span:after {content:"\25BC"; color:#a6a6a7; position:relative; right:-10px; font-size:0.7em;}  /*  ? = &#9660; = \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:#fff;} 
#nav > ul > li:hover > a, #nav > ul > li:hover > a > span::after {color:#fff;}


/* Second level  */
#nav > ul > li > ul {text-align:center; visibility:hidden; background-color:#fcf8f5; width:100%; left:0; right:0; box-shadow: 0 0 15px #999; padding:0; border-bottom-right-radius:5px; border-bottom-left-radius:5px; background-color:#fefefe; position:absolute; top:100%; overflow:hidden; max-height:0; opacity:0.0; transition:padding 0.0s, max-height 1.0s, opacity 0.3s; -webkit-transition:padding 0.0s, max-height 1.0s, opacity 0.3s;}
#nav > ul > li > ul > li 	{display:inline-block; vertical-align:top; position:relative; font-weight:bold; width:200px; margin-top:10px; margin-bottom:30px;}
#nav > ul > li > ul > li:first-of-type 	{margin-left:10px;}
#nav > ul > li > ul > li:first-of-type 	{margin-right:10px;}
#nav > ul > li > ul > li > a {color:#5e5e5e; border:1px solid transparent; border-radius:5px; font-size:16px;}
#nav > ul > li > ul > li > a::before {font-size:0.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:#222; border:1px solid #999; background-color:#fefefe;}
#nav > ul > li:hover > ul {visibility:visible; max-height:800px; opacity:1; overflow:visible; border:1px solid #777; border-top:0;}

/* Third level */
#nav > ul > li > ul > li > ul > li {font-weight:400; padding:0 0 0 10px; border:1px solid transparent; border-radius:5px;}
#nav > ul > li > ul > li > ul > li:hover {border:1px solid #999; background-color:#fefefe;}
#nav > ul > li > ul > li > ul > li > a {color:#5e5e5e; 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:#222;}



/* Second level - Vertical 
===================== */
#navSub, #navSub ul				{list-style:none; line-height:14px; padding:0; margin:0; font-size:14px;}
#navSub .sel					{background-color:#fff1e5; color:#555;}
#navSub a						{display:block; color:#555; text-decoration:none;}
#navSub li						{margin:0px; padding:0px; list-style:none; border-bottom:1px solid #ddd;}
#navSub li:first-child	{/*border-top:none;*/ border-top-left-radius:0.25rem !important; border-top-right-radius:0.25rem !important; overflow:auto;}
#navSub li:last-child		{border-bottom:none; border-bottom-left-radius:0.25rem !important; border-bottom-right-radius:0.25rem !important; overflow:auto;}
#navSub li a					{padding:12px 20px 10px 20px;}
#navSub>li a.plus:after			{content:"+"; padding:1px 4px 1px 3px; border:solid 1px #aaa; border-radius:3px; color:#999; float:right;}
#navSub>li a.minus:after		{content:"-" !important; padding:1px 6px 1px 5px; border:solid 1px #aaa; border-radius:3px; color:#999; float:right;}
#navSub li ul					{border:0;}
#navSub li li .sel				{background-color:#fff1e5; color:#4e4e50;}
#navSub li li					{margin:0px; padding:0px;}
/* #navSub li li a				{padding:20px 10px 20px 50px; color:#939598;} */
#navSub li li a					{padding:10px 10px 8px 30px; color:#939598;}#navSub li li:first-child	{/*border-top:none;*/ border-top-left-radius:0 !important; border-top-right-radius:0 !important; overflow:auto; border-top:1px solid #ddd;}
#navSub li li:last-child		{border-bottom:none; border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important; overflow:auto;}
#navSub a:hover					{background-color:#f5f5f5; color:#555;}

/* 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:10px; color:#fff; line-height:14px;}
.MenuBotL1 a:link {color:#a6a6a7; text-decoration:none;}
.MenuBotL1 a:visited  {color:#a6a6a7; text-decoration:none;}
.MenuBotL1 a:active, .MenuBotL1 a:hover  {color:#f60; text-decoration:underline;}
.MenuBotL1 span  {padding:0 5px 0 5px;}


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


/* Callout Panel
===================== */
.CalloutIcon			{display:inline-block; position:relative;}
.CalloutIcon > i:hover  {cursor:pointer;}
.CalloutIcon:hover .Callout  {visibility:visible; opacity:1.0;}

.Callout {position:absolute; left:100%; transform:perspective(1px) translateY(-1.5rem); margin:-10px 0 0 20px; background:#fff; padding:0; border:1px solid rgba(0,0,0,0.2); border-radius:0.3rem; width:275px; z-index:2000; box-shadow:0 5px 10px rgba(0,0,0,0.2); visibility:hidden; opacity:0; transition:visibility 1s, opacity 1s;}
.Callout::after, .Callout::before {right:100%; top:1.5rem; border:solid transparent; content:" "; height:0; width:0; position: absolute; pointer-events: none;}
.Callout::after {border-color:rgba(255, 255, 255, 0); border-right-color:#f7f7f7; border-width:8px; margin-top:-8px;}
.Callout::before {border-color:1px solid rgba(255, 255, 255,0); border-right-color:rgba(0,0,0,0.2); border-width:9px; margin-top:-9px;}
.Callout > div:first-of-type	{background-color:#f7f7f7; padding:8px 14px; line-height:1.5rem; font-weight:300 !important; color:#919191; font-size:1.0rem; border-top-left-radius:0.3rem; border-top-right-radius:0.3rem; border-bottom:1px solid #ebebeb;}
.Callout > div:last-of-type		{background-color:#ffffff; padding:9px 14px; line-height:1.5rem; font-weight:400; font-size:0.95rem; border-bottom-left-radius:0.3rem; border-bottom-right-radius:0.3rem;}


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

/* Homapage Hero CIL */

/*!
 *  Font Awesome 4.4.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
@font-face{
    font-family:'FontAwesome';
    src:url("/assets/fonts/fontawesome-webfont.eot?v=4.4.0");
    src:url("/assets/fonts/fontawesome-webfont.eot?#iefix&v=4.4.0") format("embedded-opentype"),url("/assets/fonts/fontawesome-webfont.woff2?v=4.4.0") format("woff2"),url("/assets/fonts/fontawesome-webfont.woff?v=4.4.0") format("woff"),url("/assets/fonts/fontawesome-webfont.ttf?v=4.4.0") format("truetype"),url("/assets/fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular") format("svg");
    font-weight:normal;
    font-style:normal
}

.HomepageHeroCIL_Citation_Outer {
    max-width: 100%;
}

.HomepageHeroCIL_Citation {
    position: absolute;
    right: 20px;
    bottom: 20px;
    background-color: #576F83;
    color: #fff;
    padding: 5px 10px;
    line-height: 1.4;
    opacity: 0.6;
}

.HomepageHeroCIL_Citation i {
   font: normal normal normal 14px/1 FontAwesome;
   font-size: 1em;
}

.HomepageHeroCIL_Citation i::before {
    content: "\F05A";
}

.HomepageHeroCIL_Citation span {
    font-family: "Open Sans",sans-serif;
    font-size: 1rem;
    font-style: italic;
    color: #fff;
    text-decoration: none;
}

.HomepageHeroCIL_Citation a {
    font-family: "Open Sans",sans-serif;
    font-size: 1rem;
    font-style: italic;
    color: #fff;
    text-decoration: none;
}

.HomepageHeroCIL_Citation a:hover {
   text-decoration: underline!important;
}

/* Home - MS Libraries */
.MSLibrariesHome							{background-image:url(/assets/images/section_libraries_home.jpg); min-height:400px; margin-top:0; background-repeat:no-repeat; background-size:cover; /*contain;*/ /*background-position:50% 50%;*/ overflow: hidden; /*background-attachment:fixed;*/ padding:38px 5px 60px 5px;}
.MSLibrariesHome	 h2					{margin-bottom:30px;}

/* Home - Features & Benefits */
.HomeFeaturesBenefits				{padding:50px 0; background:url(/assets/images/tile_home_features_benefits.jpg) bottom center repeat-x; background-size:contain;}
.HomeFeaturesBenefits	 h2		{line-height:normal;}
.HomeFeaturesBenefits ul		{margin:25px 0;}
.HomeFeaturesBenefits li		{margin:14px 0; font-weight:300; font-size:16px; line-height:20px;}

/* Jims Tabs Demo */
.TabbedPanel									{width:100%; background-color:#fff; padding:10px 0;}
.TabbedPanelInner						{margin:40px;}

.TabbedText									{width:90%; margin:0 auto;}

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

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

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

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

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

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

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

/* Shop - Shared 
===================== */

/* PRODUCT GRID LAYOUT*/

/* Product Category Layout */

.ProductPanel							{width:31%; min-width:180px; min-height:260px; float:left; margin-left:0; margin-bottom:14px; margin-right:2%; /* border:1px solid #e1e1e1;*/ box-shadow:0 0 2px 2px #e1e1e1;}
.ProductPanel:hover						{opacity:0.9; background-color:#fafafa;}
.ProductPanelInfo					{width:88%; margin:10px auto; text-align:center;}
.ProductPanelInfo h2			{font-size:14px !important; color:#36C;}
.ProductPanelInfo p				{font-size:10px !important; color:#333; line-height:12px !important;}
.ProductPanelInfo a:link, .ProductPanelInfo a:visited	{text-decoration:none; color:#c30 !important;}
.ProductPanelInfo a:hover, .ProductPanelInfo a:active	{text-decoration:underline;}
.ProductPanelInfo img			{margin:5px 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-image:url(/assets/images/profile_box_tile.gif); background-repeat:repeat-y; background-color:#fff; padding-left:4px; padding-right:3px;}
.ProfileCountColumn			{color:#666; font-size:10px; text-align:right; padding-right:3px;}
.ProfileIcon						{padding:4px 8px 4px 8px; text-align:center;}

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


/* Dashboard */
.DashboardProfileBox				{width:95%; margin:20px 0 20px 0; border:1px solid #d9d9d9; background-color:#fff;}
.DashboardProfileBox h2			{margin:0;}
.DashboardAvatar	 img				{/*-webkit-box-shadow:0 0 5px 5px rgba(76, 76, 76, 0.1); -moz-box-shadow:0 0 5px 5px rgba(76, 76, 76, 0.1); box-shadow:0 0 5px 5px rgba(76, 76, 76, 0.1);*/ border:1px solid #e1e1e1; margin:8px;}
.DashboardProfileName				{font-size:22px; font-weight:bold;}

/* 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; margin:20px 20px 0 20px;}
.AlignRightImage		{float:right; margin:20px 10px 20px 20px}
.AlignVertMiddle		{vertical-align:middle;}
.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;}
.PaddingTop10				{padding-top:10px;}
.PaddingTop20				{padding-top:20px;}
.PaddingTop25				{padding-top:25px;}
.PaddingTop30				{padding-top:30px;}
.PaddingTopBot2			{padding:2px 0;}
.PaddingRight2			{padding-right:2px}
.PaddingRight3			{padding-right:3px}
.PaddingRight5			{padding-right:5px}
.PaddingRight10			{padding-right:10px}
.PaddingRight15			{padding-right:15px}
.PaddingRight25			{padding-right:25px}
.PaddingLeft5			{padding-left:5px;}
.PaddingLeft10			{padding-left:10px;}
.PaddingLeft20			{padding-left:20px;}
.PaddingLeft25			{padding-left:25px;}
.PaddingLeft50			{padding-left:50px;}
.PaddingLeft100		{padding-left:100px;}
.MarginAuto						{margin: auto;}
.Margin5						{margin:5px;}
.Margin10						{margin:10px;}
.Margin20						{margin:20px;}
.MarginSides30				{margin:0 30px;}
.MarginTop3					{margin-top:3px;}
.MarginTop5					{margin-top:5px;}
.MarginTop10				{margin-top:10px;}
.MarginTop20				{margin-top:20px;}
.MarginTop30				{margin-top:30px;}
.MarginTop40				{margin-top:40px;}
.MarginTopBot2			{margin-top:2px; margin-bottom:2px;}
.MarginLeft5				{margin-left:5px;}
.MarginLeft7			{margin-left:7px;}
.MarginLeft10			{margin-left:10px;}
.MarginLeft12			{margin-left:12px;}
.MarginLeft20				{margin-left:20px;}
.MarginLeft40				{margin-left:40px;}
.MarginLeft50				{margin-left:50px;}
.MarginLeft60				{margin-left:60px;}
.MarginLeft80				{margin-left:80px;}
.MarginLeft100				{margin-left:100px;}
.MarginBottom2			{margin-bottom:2px;}
.MarginBottom3			{margin-bottom:3px;}
.MarginBottom5			{margin-bottom:5px;}
.MarginBottom7			{margin-bottom:7px;}
.MarginBottom15			{margin-bottom:15px;}
.MarginBottom20			{margin-bottom:20px;}
.MarginBottom100			{margin-bottom:100px;}
.MarginRight5				{margin-right:5px;}
.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:#fafafa;}

/* % WIDTH SETTINGS
===================== */
.Width1		{width:1%;}
.Width2		{width:2%;}
.Width3		{width:3%;}
.Width4		{width:4%;}
.Width5		{width:5%;}
.Width6		{width:6%;}
.Width7		{width:7%;}
.Width8		{width:8%;}
.Width9		{width:9%;}
.Width10	{width:10%;}
.Width12	{width:12%;}
.Width15	{width:15%;}
.Width17	{width:17%;}
.Width19	{width:19%;}
.Width20	{width:20%;}
.Width25	{width:25%;}
.Width30	{width:30%;}
.Width33	{width:33%;}
.Width34	{width:34%;}
.Width35	{width:35%;}
.Width40	{width:40%;}
.Width45	{width:45%;}
.Width50	{width:50%;}
.Width55	{width:55%;}
.Width60	{width:60%;}
.Width65	{width:65%;}
.Width70	{width:70%;}
.Width75	{width:75%;}
.Width80	{width:80%;}
.Width85	{width:85%;}
.Width90	{width:90%;}
.Width93	{width:93%;}
.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;}
.BorderTop1					{border-top: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;}
.White							{color:#fff;} 
.Orange							{color:#f60;}
.SteelBlue					{color:#959fa7;}

/* ======================================================================================== */
/* ======================================================================================== */
/* Responsive Layouts */
/* ======================================================================================== */
/* ======================================================================================== */

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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


/*Example Generic Table Handling*/
.TableStd						{width:100%; margin:40px 0;}
.TableStd > tbody		{}
.TableStd caption		{text-align:left; font-size:14px; color:#2d4285; font-weight:bold; padding:10px 5px 4px 10px; border-color:#a9a9a9; 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-size: 14px; font-weight:bold; text-align:left; padding:10px 5px 10px 5px; background-color:#fff; border-bottom:2px solid #ccc; }
.TableStd td				{font-size: 14px; line-height:17px; border-top:1px solid #ddd; padding:8px 5px 8px 5px;}
.TableStd td.date		{ white-space:nowrap;}
.TableStd > tbody > tr:nth-child(odd)				{background-color:#f9f9f9;}
.TableStd > tbody > tr:nth-child(even)			{background-color:#ffffff;}
.TableStd > tbody > tr:first-child>td				{border-top:0}
.TableStd > tbody > tr:last-child>td				{border-bottom:0}
.TableStd > tbody > tr:hover td							{background-color:#fbeadb;}
.TableStd > tbody > tr > td > a							{text-decoration:none; position:relative; color:#222324; display:block;}
.TableStd > tbody > tr > td > a:hover, .TableStd > tbody > tr > td > a:active 		{text-decoration:underline; color:#e98b3a; cursor:pointer;}
.TableStd > thead > tr > th > a							{text-decoration:none; position:relative; color:#222324;}
.TableStd > thead > tr > th > a:hover, .TableStd > thead > tr > th > a:active 		{text-decoration:none; color:#f63; cursor:pointer;}
.TableStd > tbody > tr > td .deleted					{color:#ccc;}

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

/* Product Partners Pricing Table */
.HeadProductPartners			{background-color:#fac08f !important; text-align:center !important;}
.HeadNonProductPartners	 	{background-color:#fdeada !important; text-align:center !important;}

/* Miproducts Pricing Table*/
.TableMiproducts						{border:1px solid #ccc; margin:20px 0;}
.TableMiproducts th				{padding:8px 5px; border-bottom:1px solid #ccc; border-right:1px solid #ccc; background-color:#f5f5f5;}
.TableMiproducts th:last-child	{border-right:0;}
.TableMiproducts td				{padding:5px; border-bottom:1px solid #ccc; border-right:1px solid #ccc;}
.TableMiproducts td:last-child	{border-right:0;}
.TableMiproducts img			{float:left; margin-left:5px; margin-right:5px; position:relative;}

/* Module Sets */
.TableModuleSets						{width:100%; margin:30px 0;}
.TableModuleSets	 th				{background-color:#fff; padding:40px 6px 20px 10px;}
.TableModuleSets	 td				{background-color:#f2f2f2; padding:6px 6px 6px 10px;}
.TableModuleSets	 td:first:child	{}
.TableModuleSets	 td:last:child	{}

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

.HomePartnersPanel		{background-color:#fff; margin:0;}
.HomePartnersPanel h6	{margin-top:10px;}
.HomePartnersPanel img	{margin-right:20px;}
.PartnerLogo							{padding:2px 20px 2px 2px;}

.HomeFeaturesPanel			{background-color:#dfe2e6; margin:0;}
.HomeFeaturesPanel h1		{font-size:2.1rem;}
.HomeNewsPanel						{background-color:#fff; margin:0; padding:20px 0;}
.HomeNewsPanel	 h3				{margin-top:20px;}
.HomeTestimonialPanel		{background-color:#dfe2e6; margin:0; padding:2px 10px 20px 10px;}

/* News & Events */
.NewsDate														{color:#fff; font-size:12px; font-weight:400; background-color:#ccc; border-radius:10px; padding:0 8px; line-height:22px; float:right; margin:0px 3px 8px 20px;}
.NewsFeed, .EventFeed								{border:1px solid #dddddd; border-radius:5px; background-color:#fff; box-shadow:0 5px 5px rgba(0, 0, 0, 0.1); margin-bottom:20px;}
.NewsFeedStory, .EventFeedStory		{border-bottom:1px solid #dddddd; padding:20px;}
.NewsFeed h6, .EventFeed h6				{margin:2px 0; color:#4e4e50;}
.NewsFeed h6, .EventFeed h6				{margin:2px 0; color:#4e4e50}
.NewsFeed p, .EventFeed p						{font-size:12px; color:#999; font-weight:300;}

.EventDate, .EventLocation									{color:#fff; font-size:12px; font-weight:400; background-color:#ccc; border-radius:10px; padding:0 8px; line-height:22px; margin:0px 8px 8px 0px;}
.EventFeed a:link, .EventFeed a:visited		{text-decoration:none !important; color:#ddd !important;}
.NewsFeed a:link, .NewsFeed a:visited			{text-decoration:none !important; color:#ddd !important;}

.NewsFeedStory:hover			{background-color: #f5f5f5;}
.EventFeedStory:hover			{background-color: #f5f5f5;}

.TestimonialFeature				{width:65%; background-color:#fff; border:0.0625rem solid #e5e5e5; border-radius:0.25rem; margin:25px auto; padding:1.25rem; /*box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5)*/ box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2);}
.TestimonialFeature img		{margin:8px auto;}
.TestimonialFeature p			{font-size:1.25rem; font-weight:300; margin-top:0; margin-bottom:1rem; padding:0.5rem 1rem;}

.TestimonialFeaturePage				{width:85%; background-color:#fff; border:0.0625rem solid #e5e5e5; border-radius:0.25rem; margin:25px auto; padding:1.25rem; /*box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5)*/ box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2);}
.TestimonialFeaturePage img		{margin:8px auto;}
.TestimonialFeaturePage p			{font-size:1.25rem; font-weight:300; margin-top:0; margin-bottom:1rem; padding:0.5rem 1rem;}



/* Main Buttons */
.BtnBase {display:inline-block; text-align:center; white-space:nowrap; vertical-align:middle; -ms-touch-action:manipulation; touch-action:manipulation; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.BtnBase a {display: block;}
		
.BtnFlatRight						{border-bottom-right-radius:0 !important; border-top-right-radius:0 !important; margin-right:-2px !important;}
.BtnFlatLeft						{border-bottom-left-radius:0 !important; border-top-left-radius:0 !important; margin-left:-2px !important;}
.BtnFlatBoth						{border-radius:0 !important; margin-left:-3px !important; margin-right:-3px !important;}

.BtnGroup>button.BtnFlatBoth:last-of-type {border-bottom-left-radius:0 !important; border-top-left-radius:0 !important; margin-left:-2px !important;}

.BtnXLarge							{font-size:2.0rem; padding:0.6rem 1.5rem;}
.BtnLarge							{font-size:1.3rem; padding:0.5rem 1.3rem;}
.BtnMedium							{font-size:1.0rem; padding:0.375rem 1rem;}
.BtnSmall							{font-size:0.7rem; padding:0.375rem 1rem;}
.BtnXSmall							{font-size:0.5rem; padding:0.275rem 1rem;}

.BtnFullWidth					{width:100%; padding-left:0 !important; padding-right:0 !important;} /* removes box effect padding */
.BtnHalflWidth					{width:50%; padding-left:10px !important; padding-right:10px !important; margin-left:auto !important; margin-right:auto !important;}

.BtnGroup							{display:inline-block;}

.BtnColorBlue					{background-color:rgba(97, 111, 131, 0.2);}

/* Primary Button */
.BtnPrimary {background-color:#576F83; position:relative; box-shadow:0 5px 5px rgba(0, 0, 0, 0.2); font-weight:300; border:0.0625rem solid #576F83; border-radius:0.25rem; -webkit-border-radius:0.25rem; -moz-border-radius:0.25rem; margin:10px 0;}
.BtnPrimary a:link, .BtnPrimary a:visited {text-decoration:none !important; color:#fff !important;}
.BtnPrimary:hover				{text-decoration:none !important; background-color:#435564; border:0.0625rem solid #3f505e;}
.BtnPrimary:active			{background-image:none; box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.25);}

/* Primary Button Outline */
.BtnPrimaryOutline {background-color:#fff; position:relative; box-shadow:0 5px 5px rgba(0, 0, 0, 0.2); font-weight:300; border:0.0625rem solid #576F83; border-radius:0.25rem; -webkit-border-radius:0.25rem; -moz-border-radius:0.25rem; margin:10px 0;}
.BtnPrimaryOutline a:link, .BtnPrimaryOutline a:visited {text-decoration:none !important; color:#576F83;}
.BtnPrimaryOutline:hover		{text-decoration:none !important; background-color:#435564; color:#fff; border:0.0625rem solid #3f505e;}
.BtnPrimaryOutline a:hover	{color:#fff !important;} /*Force the white text appear on LINKS */
.BtnPrimaryOutline:active		{background-image:none; box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.25);}

/* Secondary Button */
.BtnSecondary {background-color:#e98b3a; position:relative; box-shadow:0 5px 5px rgba(0, 0, 0, 0.2); font-weight:300; border:0.0625rem solid #e98b3a; border-radius:0.25rem; -webkit-border-radius:0.25rem; -moz-border-radius:0.25rem; margin:10px 0;}
.BtnSecondary a:link, .BtnSecondary a:visited {text-decoration:none !important; color:#fff !important;}
.BtnSecondary:hover			{text-decoration:none !important; background-color:#d87118; border:0.0625rem solid #d87118;}
.BtnSecondary:active		{background-image:none; box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.25);}

/* Secondary Button */
.BtnSecondaryOutline {background-color:transparent; position:relative; box-shadow:0 5px 5px rgba(0, 0, 0, 0.2); font-weight:300; border:0.0625rem solid #e98b3a; border-radius:0.25rem; -webkit-border-radius:0.25rem; -moz-border-radius:0.25rem; margin:10px 0;}
.BtnSecondaryOutline a:link, .BtnSecondaryOutline a:visited {text-decoration:none !important; color:#fff !important;}
.BtnSecondaryOutline:hover			{text-decoration:none !important; background-color:#d87118; border:0.0625rem solid #d87118;}
.BtnSecondaryOutline:active		{background-image:none; box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.25);}

/* Homepage Main Button */
.HomepageFeatureButton {background-color:#576F83; position:relative; box-shadow:0 5px 5px rgba(0, 0, 0, 0.2); font-weight:300; border:0.0625rem solid #576F83; border-radius:0.25rem; -webkit-border-radius:0.25rem; -moz-border-radius:0.25rem; margin:10px 0;}
.HomepageFeatureButton a:link, .HomepageFeatureButton a:visited {text-decoration:none !important; color:#fff !important;}
.HomepageFeatureButton:hover				{text-decoration:none !important; background-color:#435564; border:0.0625rem solid #3f505e;}
.HomepageFeatureButton:active			{background-image:none; box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.25);}

/* Homepage Secondary Button */
.HomepageFeatureButtonAlt {background-color:#e98b3a; position:relative; box-shadow:0 5px 5px rgba(0, 0, 0, 0.2); font-weight:300; border:0.0625rem solid #e98b3a; border-radius:0.25rem; -webkit-border-radius:0.25rem; -moz-border-radius:0.25rem; margin:10px 0;}

.HomepageFeatureButtonAlt a:link, .HomepageFeatureButtonAlt a:visited {text-decoration:none !important; color:#fff !important;}
.HomepageFeatureButtonAlt:hover		{text-decoration:none !important; background-color:#d87118; border:0.0625rem solid #d87118;}
.HomepageFeatureButtonAlt:active		{background-image:none; box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.25);}

/* Icons and rollovers */
.RolloverMoreInfo											{background-image:url(/assets/images/link/icon_info.gif); background-position:left; background-repeat:no-repeat; height:16px; width:33px; display:block; }
.RolloverMoreInfo span								{display:none;}
.RolloverMoreInfo:hover								{background-image:url(/assets/images/link/icon_info_on.gif); }

.RolloverPreviewDoc										{background-image:url(/assets/images/link/icon_preview.gif); background-position:left; background-repeat:no-repeat; height:16px; width:33px; display:block; }
.RolloverPreviewDoc span							{display:none;}
.RolloverPreviewDoc:hover							{background-image:url(/assets/images/link/icon_preview_on.gif); }

.RolloverWizard												{background-image:url(/assets/images/link/icon_wizard_wand.gif); background-position:left; background-repeat:no-repeat; height:16px; width:33px; display:block; margin-left:2px;}
.RolloverWizard span									{display:none;}
.RolloverWizard:hover									{background-image:url(/assets/images/link/icon_wizzard_wand_on.gif); }

.RolloverDownloadlink									{text-decoration:none;}
.RolloverDownloadlink img							{background-image:url(/assets/images/link/icon_download_section.gif); background-position:left; background-repeat:no-repeat; height:16px; width:33px;margin-left:2px; vertical-align:middle;}
.RolloverDownloadlink:hover img				{background-image:url(/assets/images/link/icon_download_section_on.gif);  vertical-align:middle;}

.RolloverNextQuestion									{background-image:url(/assets/images/link/button_next_lge.gif); background-position:left; background-repeat:no-repeat; height:40px; width:95px; display:block;}
.RolloverNextQuestion span						{display:none;}
.RolloverNextQuestion:hover						{background-image:url(/assets/images/link/button_next_lge_on.gif); }

.RolloverBackQuestion									{background-image:url(/assets/images/link/back_nor.gif); background-position:left; background-repeat:no-repeat; height:20px; width:42px; display:block;}
.RolloverBackQuestion span						{display:none;}
.RolloverBackQuestion:hover						{background-image:url(/assets/images/link/back_on.gif); }

.RolloverCancelQuestion								{background-image:url(/assets/images/link/cancel_nor.gif); background-position:left; background-repeat:no-repeat; height:20px; width:48px; display:block;}
.RolloverCancelQuestion span					{display:none;}
.RolloverCancelQuestion:hover					{background-image:url(/assets/images/link/cancel_on.gif); }

.RolloverAddToDocument								{background-image:url(/assets/images/link/button_download_worksection.gif); background-position:left; background-repeat:no-repeat; height:56px; width:194px; display:block;}
.RolloverAddToDocument span						{display:none;}
.RolloverAddToDocument:hover					{background-image:url(/assets/images/link/button_download_worksection_on.gif); }

.RolloverMergeWizard									{background-image:url(/assets/images/link/button_mergeupdatedselections.png); background-position:left; background-repeat:no-repeat; height:58px; width:237px; display:block;}
.RolloverMergeWizard span							{display:none;}
.RolloverMergeWizard:hover						{background-image:url(/assets/images/link/button_mergeupdatedselections_on.png); }

.RolloverRedoWizard										{background-image:url(/assets/images/link/button_fullreplacement.png); background-position:left; background-repeat:no-repeat; height:58px; width:196px; display:block;}
.RolloverRedoWizard span							{display:none;}
.RolloverRedoWizard:hover							{background-image:url(/assets/images/link/button_fullreplacement_on.png); }

a.button_download_content							{background-image:url(/assets/images/link/button_download_content.gif); background-position:left; background-repeat:no-repeat; height:50px; width:52px; display:block; text-decoration:none; margin-left:3px;}
a.button_download_content:hover				{background-image:url(/assets/images/link/button_download_content_on.gif); }



/* Custom Tables */
.table {width:100%; max-width:100%; margin-bottom:1rem;}
.table th, .table td {padding:0.75rem; line-height:1.5; vertical-align:top; border-top:1px solid #bdbebf;}
.table thead th {vertical-align:bottom; border-bottom:2px solid #bdbebf;}
.table tbody+tbody {border-top:2px solid #bdbebf;}
.table .table {background-color:#fff;}
.table--features th[scope=row] {font-size:80%;}
.table--features th[scope=row] {font-weight:300; color:#939598;}
.table--features th[scope=row] {font-weight:700;}
.table--features tbody td {font-size:0.75rem;}
.table--features tr:last-child {border-bottom:1px solid #bdbebf;}
.table-active, .table-active>th, .table-active>td {background-color:#f5f5f5;}
.table-hover .table-active:hover {background-color:#e8e8e8;}
.table-hover .table-active:hover>td, .table-hover .table-active:hover>th {background-color:#e8e8e8;}
		
/* Attendees */

.TableAddAttendees					{background-color:#fbf7f2; border-top:3px solid #f7efe5; border-bottom:3px solid #f7efe5; margin-bottom:30px;}
.TableAddAttendees caption	{text-align:left; padding:10px 0; font-size:16px; font-weight:bold;}
.AttendeeListing							{margin:20px 0; border:2px solid #f7efe5;}
.AttendeeListing	 td					{padding:5px 10px;}
.AttendeeListingHeader h6		{margin:0; background-color:#f7efe5; padding:8px 15px;}

/* FEATURE TABLE */
.TableFeature			{margin-bottom:1rem; padding:0.75rem; line-height:1.5; border-top:1px solid #bdbebf; background-color:#fff;}
.TableFeature th		{background-color:#f5f5f5; padding:10px;}
.TableFeature th	[scope=row] {font-weight:300; color:#939598; background-color:#fff !important;}
.TableFeature tr		{border-bottom:1px solid #bdbebf;}
.TableFeature tr:hover {background-color:#fdf4ec;}
.TableFeature td		{font-size:0.75rem; padding:8px; /*vertical-align:top;*/}
.TableFeature td	 [scope=row]	{font-weight:bold;}
.TableFeatureSubHead	{color:#939598; font-weight:bold;}

/* Custom Headings */
.Lead {font-size:1.25rem; font-weight:300;}

.Display-1 {font-size:3.5rem; font-weight:300;}

.Display-2 {font-size:4.5rem; font-weight:300;}

.Display-3 {font-size:5.5rem; font-weight: 300;}

.Display-4 {font-size:6rem; font-weight:300;}

/* Card */

.CardBox			{position:relative; margin-bottom:0.75rem; border:0.0625rem solid #e5e5e5; border-radius:0.25rem; background-color:#fff; padding:1.25rem;}
.CardBox h4			{font-size:1.5rem; color:#4e4e50; font-weight:300;}
.CardBox h5			{font-size:1.25rem; color:#4e4e50 !important; font-weight:300;}
.CardBoxHeader		{padding:0.75rem 1.25rem; background-color:#f5f5f5; border-bottom:0.0625rem solid #e5e5e5;}
.CardBoxTitle		{margin-top:0; margin-bottom:0.75rem;}
.CardBoxSubTitle	{margin-top:-0.375rem; margin-bottom:0;}
.CardBoxText		{font-size:1rem; font-weight:300;}
.CardBoxTextTotal		{font-size:1rem; color:#4e4e50 !important; font-weight:700;}
.CardBoxBase		{padding:0.75rem 1.25rem; background-color:#f5f5f5; border-top:0.0625rem solid #e5e5e5;}

small, .CardBox	{color:#939598;}

.CardBoxNoPadding		{position:relative; margin-bottom:0.75rem; border:0.0625rem solid #e5e5e5; border-radius:0.25rem; background-color:#fff; overflow:hidden;}

/* More Features Panel - Height Setting */
.MoreFeatures			{height:380px;}

.ShadowBox1			{box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.2);}

/* Sections */
.SectionBlueLarge				{background-color:rgba(97, 111, 131, 0.2);}
.SectionBlueLarge hr		{border-top:0.0625rem solid rgba(0,0,0,0.1);}
.SectionBlueLarge h2		{font-weight:300; line-height:1.5; font-size:2rem; color:#4e4e50;}

.SectionPanel						{width:100%; margin:40px 0; color:#fdfdfd; background-color:rgba(87, 111, 131, 0.8); border-color: transparent; padding:1rem 0; float:right; position:relative; border-radius:0.25rem;}
.SectionPanel h1 				{color:#fff; font-weight:300; margin:0.5em 0;}
.SectionPanel hr					{border-color:rgba(0,0,0,0.1);}

/* Banners */
.ProductsBanner				{background-image:url(/assets/images/section-product.jpg); min-height:220px; margin-top:0; background-repeat:no-repeat; background-size:cover; /*contain;*/ background-position:50% 50%; overflow: hidden; /*background-attachment:fixed;*/}
.ProductsBanner2				{background-image:url(/assets/images/product-shot2.jpg); min-height:220px; margin-top:0; background-repeat:no-repeat; background-size:cover; /*contain;*/ background-position:50% 50%; overflow: hidden; /*background-attachment:fixed;*/}

.SimpleBanner					{background-color:#fff;}
.SimpleBanner h1				{margin-top:1.2rem;}

/* SECONDARY NAVIGATION */

.UserLink						{font-size:0.75rem; color:#576F83; float:right; margin:6px 10px; text-align:center;}
.UserLink a:link, .UserLink a:visited			{text-decoration:none;}

.ButtonSubscribe {font-size:1.0rem; padding:0.375rem 1rem; margin-right:20px;}
.ButtonSubscribe a:hover	{text-decoration:none !important;}

.BtnLoginNav {background-color:#e98b3a; position:relative; box-shadow:0 5px 5px rgba(0, 0, 0, 0.2); font-weight:300; border:0.0625rem solid #e98b3a; border-radius:0.25rem; -webkit-border-radius:0.25rem; -moz-border-radius:0.25rem; margin:10px 0; float:right;}
a.BtnLoginNav:link, a.BtnLoginNav:visited {text-decoration:none !important; color:#fff !important;}
.BtnLoginNav:hover		{text-decoration:none !important; background-color:#d87118; border:0.0625rem solid #d87118;}
.BtnLoginNav:active		{background-image:none; box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.25);}

.LoginPhone 						{display:none;}

.PanelLoginAccount		{margin:20px 0;}

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

/* PRICING SYSTEM */
.tile{display:inline-block;vertical-align:middle;background-color:#fff;cursor:pointer;width:120px;height:120px;margin:10px;padding-top:20px;font-size:1.25rem;border-radius:0.25rem;border:solid #d9e0e6 1px;text-transform:capitalize}
.tile i{color:#576F83}
.tile:hover,.tile.active{background-color:#e9edf0;border:solid #617c92 1px}
.tile.tile--color-secondary{border:solid #f8dcc4 1px}
.tile.tile--color-secondary i{color:#e98b3a}
.tile.tile--color-secondary:hover,.tile.tile--color-secondary .active{background-color:#fbeadb;border:solid #ec9951 1px}

.fa-star-o:before{content:"N"}
.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.fa-3x{font-size:3em}
.fa-thumbs-o-up:before{content:"E"}
.fa-question-circle:before{content:"?"}

/*.form-control{display:inline-block; width: 100%; padding:0.375rem 0.75rem; }*/

.form-select-number {height: 38px!important; width: 100%;}

/* Subscription Form */
.TxtSpecialNote {font-size:11px; color:#c00; line-height:15px;}

/* CBI Navigation - Start */

.CBILinkShow1 {font-size: 18px; text-decoration: none!important; display: block;}
.CBILinkShow2 {font-size: 16px; text-decoration: none!important; display: block;}
.CBILinkShow3 {font-size: 14px; text-decoration: none!important; display: block;}
.CBILinkHide1 {font-size: 18px; text-decoration: none!important; display: none;}
.CBILinkHide2 {font-size: 16px; text-decoration: none!important; display: none;}
.CBILinkHide3 {font-size: 14px; text-decoration: none!important; display: none;}
.CBIChangeLogNote {color:#666666 !important; font-size:12px !important; max-width:400px; background-color:#fff;}
.rtPlus {background-image:url('/assets/images/btPlusMinus.png');	background-position:0 0;	margin-top:5px; margin-right:3px;	padding:0;	width:11px; height:11px; background-repeat:no-repeat; font-size:0; display:inline-block;	vertical-align:top;}
.rtMinus {background-image:url('/assets/images/btPlusMinus.png');	background-position:0 -11px;	margin-top:5px; margin-right:3px;	padding:0;	width:11px; height:11px; background-repeat:no-repeat; font-size:0;	display:inline-block; vertical-align:top;}

/* Set the container DIV that will be transitioned */
.CBIOuter {padding-top: 5px;	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 */
.CBIInner {padding:5px 5px 5px 20px;	width:auto;}
.CBIHeading{font-size:15px; line-height:20px; font-weight:400; color:#333;}
.CBIText		{font-size:13px; line-height:17px;}
.CBINoContent	{font-size:13px; line-height:17px; color:#666;}

/* Compare - Box Filter - Start */
.mix  {display: none}
.colBoxFilter 	{float:left; padding:4px 6px 0 6px; box-sizing:border-box;}
.colBoxFilter:before, .colBoxFilter:after 	{box-sizing:border-box;}



.hrGray {margin-top: 24px; margin-bottom: 24px; border: 0; border-top: 0.0625rem solid #c9ccd0 !important; box-sizing: content-box; height: 0; display: block; -webkit-margin-before: 8px; -webkit-margin-after: 8px; -webkit-margin-start: auto; -webkit-margin-end: auto;}

/* Compare - Box Filter - End */

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

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

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

/* Partner Net Logo */
.PartnerNetLogo					{margin-top:60px; margin-bottom:20px; border-top:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9; padding:22px 0;}
.PartnerNetLogo img			{margin:0 auto;}

/* New CSS by Bruce in an attempt to set new standards.  If accepted, these need to be named properly and applied through all related templates*/
.TemplateNavSub								{padding:30px 0px 5px 10px; background-color:#fff; text-align: left; vertical-align:top; width:184px;}

.TemplateTitle h1					{margin:30px 0px 30px 0px; border-bottom:3px solid #333; font-size:24px; font-weight:bold; line-height:40px;}
.TemplateTitle h3					{margin-bottom: 10px}
.TemplateCMSContent				{margin-top: 30px;}
.TemplateControlContent		{margin-top: 30px;}

.TemplateNavLeftOuter							{padding:7px 0px 40px 50px; min-height:400px; text-align: left; vertical-align:top; background-color:#fff; max-width:1200px; width:90%; }
.TemplateNavLeftProdPartOuter			{padding:7px 30px 40px 50px; min-height:400px; vertical-align:top; background-color:#fff;}
.TemplateCentreOuter							{padding:7px 10px 40px 10px; min-height:400px; vertical-align:top; background-color:#fff; text-align: left; width: 100%; max-width:1400px; margin-left: auto; margin-right: auto;}
.TemplateFullPageOuter						{padding:7px 0px 7px 0px; min-height:400px; vertical-align:top; background-color:#fff; text-align:left; text-align:left;}

/* TEMPORARY DEBUG */
.b1 {border: 1px solid blue!important;}
.b2 {border: 1px solid red!important;}
.b3 {border:1px solid magenta!important;}

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

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

.NewsMenuDate							{font-size:12px; color:#999;}
.NewsMenuTitle							{font-weight:700;}
.NewsTeaser								{font-size:14px; color:#666;}
.CommentCount							{font-size:10px; color:#333; padding:1px 5px; background-color:#f7f7f7; margin-left:4px; border:1px solid #ccc; border-radius:3px;}
.NewsMenuViewCount				{font-size:10px; color:#333; padding:1px 5px; background-color:#f7f7f7; margin-left:10px; border:1px solid #ccc; border-radius:3px;}

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

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

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

/* Editor Images */
.FloatLeftImage					{float:left; margin:20px 20px 20px 0;}
.FloatRightImage					{float:right; margin:20px 10px 20px 20px;}

/* Feature Table Info */
.TableInfo					{border:1px solid #e5eaf0; background-color:#f5f3f2; vertical-align:top; margin:20px auto;}
.TableInfo td			{vertical-align:top; padding:5px; border-bottom:2px solid #ffffff;}
.TableInfoAlt			{background-color:#f9f9f9;}

/* Tips & Tricks */
.TipsTricksPanel							{background-color:#fdeada; border:1px solid #a5a5a5; padding:15px 20px; font-size:15px; line-height:18px; margin:20px 0;}
.TipsTricksPanel	 p					{margin:8px 0;}

/* Tutorial Heading */
.TutorialHeading							{background-color:#576f83; color:#fff; font-size:15px; line-height:18px; margin:20px 0; padding:15px 20px;}
.TutorialHeading	 p					{margin:8px 0;}

/* Updates and Changes*/

.UpdatesSummary				{background-color:#fbf7f2; color:#6c6c6c; border-bottom:3px solid #f7efe5; border-top:3px solid #f7efe5; margin:20px auto; width:100%;}
.UpdatesSummary	 td			{padding:8px 10px;}
.span_1_of_4_CBI				{width:23.8%;}

/* NextGen2 */
.TextSml3									{font-size:11px; color:#999;}
.TextLinkLabrariesSmall		{font-size:11px; color:#999; line-height:normal !important;}

.bardiv					{padding:0 0 0 0px; background-color:#fff; max-width:1200px;}
.bardivfilter		{padding:5px; background-color:#f8f8f8;}
.bartbl					{width:100%;}

.txtkeyword			{width:300px; padding-top:5px;}
.txtkeyword .RadComboBox_Default .rcbInputCell				{background-color:#ffffff;}
.txtkeyword .RadComboBox_Default .rcbInputCellLeft 		{background-image:url(/assets/images/null.gif); border:solid 1px #aaa; height:33px;}
.txtkeyword .RadComboBox_Default .rcbArrowCellRight 	{background-image:url(/assets/images/null.gif);}
.txtkeyword .RadComboBox_Default .rcbInput						{font:16px Arial, Helvetica, sans-serif; }




/* Subscriber Overview Project List */
.ProjList {
    font-size:12px;
}
.ProjList .Width160 {width:130px;}
.ProjList .Width400 {width:360px;}
.ProjList .RowList					{border-bottom:1px solid #e8e6e6; background-color:#fff;}
.ProjList .RowList :hover 			{background-color:#fff1e5;}
.ProjList .RowListInner 			{padding:10px 5px 10px 10px;}
.ProjList .btnsearch			{padding:8px 0 0 0;}
.ProjList .btnsearchimage	{background-color:#f79c4a; -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; width:36px; height:36px;}

.ProjList .barsortfilterproj		{border-left:1px solid #aaa; padding-left:10px; margin-left:10px;}
.ProjList .barsortfilterspec		{padding-left:10px; padding-right:10px; }
.ProjList .barview							{border-left:1px solid #aaa; padding-left:10px; display:block;}
.ProjList .barsortspec					{padding-left:15px;}
.ProjList .barview a        {padding-left:2px;}
.ProjList .barview a img    {padding-left:2px; line-height:17px;}

.ProjList .ib_list img					{border:1px solid #aaa; background-color:#f5f5f5; -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; float:left; margin-left:1px;}
.ProjList .ib_list_on img				{border:1px solid #aaa; background-color:#fb9d18; -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; float:left; margin-left:1px;}
.ProjList .ib_gallery img				{border:1px solid #aaa; background-color:#f5f5f5; -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;  float:left; margin-left:1px;}
.ProjList .ib_gallery_on img		{border:1px solid #aaa; background-color:#fb9d18; -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; float:left; margin-left:1px;}
.ProjList .ib_brief img					{border:1px solid #aaa; background-color:#f5f5f5; -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; float:left; margin-left:1px;}
.ProjList .ib_brief_on img			{border:1px solid #aaa; background-color:#fb9d18; -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; float:left; margin-left:1px;}
.ProjList .barddlist .rddlInner	{padding-top:4px !important; padding-bottom:4px !important;}

/* Home page search list view */
.ProjList .bartd_keyword			{width:36px;}
.ProjList .bartd_search				{width:40px;}
.ProjList .bartd_sort					{width:36px;}
.ProjList .bartd_statusproj		{width:120px;}
.ProjList .bartd_statusspec		{width:120px;}
.ProjList .bartd_space				{width:100%;}
.ProjList .bartd_view				{width:106px; min-width:106px; }
.ProjList .bardiv_newspec			{float:right; padding-right:10px; padding-top:1px;}
.ProjList .bartbl_search			{float:left; padding-left:20px;}

/* Home page search gallery view */
.ProjList .divgallery											{}
.ProjList .divgallery .row								{float:left; width:150px; height:220px; border:1px solid #ccc; overflow:hidden; margin:20px 0 0 20px;}
.ProjList .divgallery .row .thumbimg			{width:150px; height:110px; background-color:#f5f5f5;}
.ProjList .divgallery .row .thumbimg .space			{height:85px;}
.ProjList .divgallery .row .thumbimg .addimg		{width:150px; height:24px; line-height:24px; background-color:#656567; color:#fff; text-align:right;}
.ProjList .divgallery .row .thumbimg .addimg a	{color:#fff; padding-right:10px; text-decoration:none;}
.ProjList .divgallery .row .thumbimg .addimg a:hover	{color:#f63;}
.ProjList .divgallery .row .title					{font-size:13px; color:#666666; line-height:20px;}
.ProjList .divgallery .row .speclist			{padding:5px 0px;}
.ProjList .divgallery .row .speclist div	{padding:2px 0;}
.ProjList .divgallery .row .speclist div img {width:12px; height:12px; display:inline;}
.ProjList .divgallery .row .speclist div a{color:#666666; text-decoration:none;}
.ProjList .divgallery .row .speclist div a:hover {color:#f63;}
.ProjList .iconarrow	{font-weight:bold; font-size:10px;}

.ProjList .divgallery_pager {margin-top:20px; text-align:right;}
.ProjList .divgallery_pager a {color:#333; font-size:12px; text-decoration:none; line-height:12px; border:1px solid #666; border-radius:3px; padding:5px; box-shadow:0px 0px 1px 1px #ddd; margin-left:2px;}
.ProjList .divgallery_pager a:hover {background-color:#f63; color:#fff; border:1px solid #f63;}
.ProjList .divgallery_pager a.current {color:#333; font-size:12px; text-decoration:none; line-height:12px; border:0;  padding:5px; font-weight:bold; box-shadow:0 0 0 0;}
.ProjList .divgallery_pager a.current:hover {background-color:#fff; color:#333; border:0;}

.ProjList .divlist_pager {margin-top:20px; text-align:right;}
.ProjList .divlist_pager a {color:#333; font-size:12px; text-decoration:none; line-height:12px; border:1px solid #666; border-radius:3px; padding:5px; box-shadow:0px 0px 1px 1px #ddd; margin-left:2px;}
.ProjList .divlist_pager a:hover {background-color:#f63; color:#fff; border:1px solid #f63;}
.ProjList .divlist_pager a.current {color:#333; font-size:12px; text-decoration:none; line-height:12px; border:0;  padding:5px; font-weight:bold; box-shadow:0 0 0 0;}
.ProjList .divlist_pager a.current:hover {background-color:#fff; color:#333; border:0;}

.ProjList .dvgrid_pager table{float:right; margin-top:5px;}
.ProjList .dvgrid_pager td{text-align:right;}
.ProjList .dvgrid_pager a {color:#333; font-size:12px; text-decoration:none; line-height:12px; border:1px solid #666; border-radius:3px; padding:5px; box-shadow:0px 0px 1px 1px #ddd; margin-left:2px;}
.ProjList .dvgrid_pager a:hover {background-color:#f63; color:#fff; border:1px solid #f63;}
.ProjList .dvgrid_pager span {color:#333; font-size:12px; text-decoration:none; line-height:12px; border:0;  padding:5px; font-weight:bold; box-shadow:0 0 0 0;}

/* Modal pop-up styles - Used to replace JavaScript Alert/Confirm dialogues*/
@keyframes ModalPopup_ModalContent {
		from {top:-100px; opacity:0;}
		to {top:0px; opacity:1;}
}
.ModalPopup_ModalOuter 					{position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.5); z-index: 9999999; opacity:0; -webkit-transition: opacity 10s ease-in; transition: opacity 2s ease-in; display:none;}
.ModalPopup_ModalOuter:target 		{opacity:1; display:block;}
.ModalPopup_ModalOuter > div 			{width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 5px; background: #fff; box-shadow: 0 0 10px 5px #555; animation-name: ModalPopup_ModalContent; animation-duration: 0.8s; text-align:left;}

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

.ModalPopup_ModalOuter .FormButton				{padding:6px 12px 6px 12px; font-size:14px; color:#393b4a; background-image:url(/assets/images/button_tile.jpg);  background-repeat:repeat-x; background-color:#e9e9e9; border:2px solid #d3d3d3; text-decoration:none;}
.ModalPopup_ModalOuter .FormButton:hover		{padding:6px 12px 6px 12px; font-size:14px; color:#7a7a7a; background-image:url(/assets/images/button_tile_hover.jpg); background-repeat:repeat-x; background-color:#d7d7d7; border:2px solid #d3d3d3; text-decoration:none; cursor:hand; cursor:pointer;}

/* CRM */
.CRMComm_Item		{clear:both; padding:8px;}
.CRMComm_Left		{max-width:500px; width:100%; border-radius:8px; float:right; border:1px solid #aaa; background-color:#e7fce6; padding:3px 6px;}
.CRMComm_Right	{max-width:500px; width:100%; border-radius:8px; float:left; border:1px solid #aaa; background-color:#e6eefc; padding:3px 6px;}
.CRMComm_FileNote{max-width:500px; width:100%; border-radius:8px; float:left; border:1px solid #aaa; background-color:#d4dcff; padding:3px 6px;}
.CRMComm_Left_NotRead {width:32px; height:32px; float:left; }
.CRMComm_Right_NotRead {width:32px; height:32px; float:right; }
.CRMComm_Bottom {overflow:hidden; margin:8px 5px 0 5px;}
.CRMComm_Bottom img {display:block; float:left;}
.CRMComm_Bottom span {display:block; float:right; color:#999; font-size:10px; margin:5px 0 0 0;}
.CRMComm_ItemDateTime {text-align:right; color:#999; font-size:10px; vertical-align:bottom;}
.CRMComm_AttachedFile{margin-top:5px;}
.CRMComm_Edit {color:#999;}
.CRMComm_Edit:hover {color:#f30;}
.CRM_Popup	{width:98%; margin:10px auto auto auto;}
.CallCycleDate {font-weight:bold; font-size:18px;}
.CallCycleDateRed {font-weight:bold; font-size:18px; color:Red;}
.iconmore {width:100%; margin:auto; display:block; padding:10px;}
.iconmore img {margin:auto; cursor:pointer;}




/* Left Contact Overview */
/*
.ContactTitle {width:100%; border-radius:8px; border:1px solid #aaa; background-color:#eeeeee; padding:3px 6px;}
.ContactSubject {font-size:14px; font-weight:bold; float:left;}
.ContactStatus {font-size:14px; font-weight:bold; float:right;}
.ContactContent {}
.ContactDatetime {font-size:10px; float:right; color:#666;}
.ContactSummary {width:100%; border-radius:8px; border:1px solid #aaa; background-color:#f6f6f6; padding:3px 6px;}
.ResponseLink {width:100%; border-radius:8px; border:1px solid #aaa; background-color:#eeeeee; padding:12px 6px; text-align:center; display:block;}
.ResponseLink {}
.ContactStatusLogList {width:100%; border-radius:8px; border:1px solid #aaa; background-color:#f6f6f6; padding:3px 6px;}
*/

/* Left Contact Overview */
/*
.ResponseLink {width:100%; border-radius:8px; border:1px solid #aaa; background-color:#eeeeee; padding:12px 6px; text-align:center; display:block;}
.ResponseLink {}
.ContactStatusLogList {width:100%; border-radius:8px; border:1px solid #aaa; background-color:#f6f6f6; padding:3px 0px;}
.ChatFormText em {color:#999;  font-style:normal; line-height:24px;}
.ChatFormText {width:100%; height:auto; min-height:28px; font-size:14px; line-height:24px; color:#000; background-color:#fff; border:2px solid #e8e8e8;}
.ContactNoChat {text-align:center; padding:10px; font-size:14px;}
.ChatFormButton{padding:6px 12px 6px 12px; font-size:14px; color:#393b4a; background-image:url(/assets/images/button_tile.jpg);  background-repeat:repeat-x; background-color:#e9e9e9; border:2px solid #d3d3d3; text-decoration:none;}
.ChatFormButton:hover{padding:6px 12px 6px 12px; font-size:14px; color:#7a7a7a; background-image:url(/assets/images/button_tile_hover.jpg); background-repeat:repeat-x; background-color:#d7d7d7; border:2px solid #d3d3d3; text-decoration:none; cursor:hand; cursor:pointer;}
.ContactsListTr:hover {cursor:pointer;}
*/

/*----------------------------------------------*/
/* 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%;}
.PanelItemGrid3ColDownloads > article  	{width:31%; min-width:180px; margin:0 1% 14px 1%;}
.PanelItemGrid3ColVideo > article   	{width:31%; min-width:210px; 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;}

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

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

/*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:170px;}
.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; text-align:center;}
.PanelItemGrid4ColImages .ImgDesc {text-align:left; padding:5px 0px 0px 5px;	font-size:12px;	line-height:14px;}
.PanelItemGrid4ColImages .ImgRelatedProducts {text-align:left; padding:5px 0px 0px 5px;	font-size:12px;	line-height:14px;}

/*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:#333; margin:20px 0 5px 0;}
.PanelItemGrid > article > a > div > div p     {font-size:14px !important; line-height:17px; color:#939598; font-weight:300; 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;}


/* TabStrip */
.TabStrip													{border-bottom:2px solid #6d6d6d;height:34px;background:url(/assets/images/app/tile_miproducts_tabs.gif) repeat-x #fff;}

/* MIPRODUCTS TABS PANEL - Used for presentation of content in a tabbed view */

.MiproductsTabs										{float:left;width:100%;font-size:12px;line-height:16px; margin-top: 6px; height:31px;}
.MiproductsTabs ul								{margin:0 0 0 10px; padding:0; list-style:none;}
.MiproductsTabs li								{display:inline;margin:0;padding:0;}
.MiproductsTabs a									{float:left;background:url(/assets/images/app/tabspanelleft.gif) no-repeat left top;margin:0;padding:0 0 0 4px;text-decoration:none;}
.MiproductsTabs a span						{float:left;display:block;background:url(/assets/images/app/tabspanelright.gif) no-repeat right top;padding:10px 15px 6px 10px;color:#fff; font-weight:bold;}
.MiproductsTabs a									{background-position:0% -42px;}
.MiproductsTabs a span						{background-position:100% -42px;}
.MiproductsTabsOn a								{float:left;background:url(/assets/images/app/tabspanelleft.gif) no-repeat left top;margin:0;padding:0 0 0 4px;text-decoration:none;}
.MiproductsTabsOn a span					{float:left;display:block;background:url(/assets/images/app/tabspanelright.gif) no-repeat right top;padding:10px 15px 6px 10px;color:#fff; font-weight:bold;}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
.MiproductsTabs a span						{float:none;}
/* End IE5-Mac hack */
.MiproductsTabs a:hover span			{color:#f93;}
.MiproductsTabs a:hover						{background-position:0% 0px;}
.MiproductsTabs a:hover span			{background-position:100% 0px;}

/* Quick links for learning pages */
.QuickLinksPanel				{width:98%; margin-left:auto; margin-right:auto; padding-bottom:30px;}
.QuickLinksTitle      {padding:20px 0 0 0; font-size:14px;}
.QuickLinks           {padding:10px 0;}
.QuickLinks  a 				{display:block; text-decoration:none; margin:8px 0; font-size:12px; line-height:14px;}
.QuickLinks  a.sel 		{font-weight:bold;}
.QuickLinks h4					{font-size:16px; line-height:18px;}

.NextAndPrevLinks		{padding:10px 0;}
.NextAndPrevLinks > div		{width:50%; float:left; min-height:1px;}
.NextAndPrevLinks > div > a {text-decoration:none !important; font-size:16px; line-height:16px;}
.NextAndPrevLinks > div > a > i {margin:4px;}
.NextAndPrevLinksTop > div	{margin:10px 0 0 0; padding:0;}
.NextAndPrevLinksBottom > div:last-of-type		{text-align:right;}
.NextAndPrevLinksBottom  > div:first-of-type > a	{margin:20px 0 0 20px;}
.NextAndPrevLinksBottom  > div:last-of-type > a	{margin:20px 20px 0 0;}

.ContentList {}
.ContentList a {display:block;text-decoration:none;}
.ContentList > div {padding:20px 0 0 0;}


/* Dashboard */
.UserPanel										{background-color:#fafafa; padding:12px 10px; border-bottom:1px solid #dedede;}
.UserPanelImage							{display:table;}
.UserPanelText								{vertical-align:middle; display:table-cell; font-weight:300; font-size:18px; line-height:24px; color:#9d9d9d; padding:0 20px;}


.DashShortcutButtons					{width:50%; font-size:12px; font-weight:300; padding-top:20px; padding-bottom:10px; text-align:right;}

.DashShortcutBtn  {background-color:#fff; text-align:center; padding:8px 15px; margin:0 10px; border:1px solid #ccc; border-radius:8px;}
a.DashShortcutBtn:link, a.DashShortcutBtn:visited   {color:#393b4a; text-decoration:none;}
a.DashShortcutBtn:hover, a.DashShortcutBtn:active   {color:#7a7a7a; background-color:#f5f5f5; text-decoration:none;}

.DashShortcutLinks					{padding:8px 12px; border-bottom:1px solid #dedede;}
.DashShortcutLinks:hover			{background-color:#fafafa;}
.DashShortcutLinks a:link			{text-decoration:none; }
.DashShortcutLinks a:hover		{color:#F60;}

.StatusDot_1					{color:#f60;} /*Editing*/
.StatusDot_2					{color: #333;} /*Completed*/

.DashProjIcon									{padding:6px;}
.DashCustomerImgContainer		{width:55px; height:55px; border-radius:50%; overflow:hidden;}
.DashCustomerImg				{width:55px; height:55px;}
.DashCompanyImg					{max-height:55px;}
.DashProjIconBorder				{border:solid 2px #ccc; border-radius:50%; width:28px; height:28px; padding:3px; margin:5px 10px; text-align:center;}
.DashProjIconBorder i			{line-height:28px; color:#ccc; height:20px; width:20px;}
.DashProjIconBorder:hover		{border:solid 2px #aaa;}
.DashProjIconBorder:hover i		{color:#aaa;}
.DashProjIconBorder i.fa-angle-down {margin-top:0;}		/*Fix the verticle space difference*/
.DashProjIconBorder i.fa-angle-up {margin-top:-2px;}	/*Fix the verticle space difference*/

.DashShortcutBtn i			{color:#aaa !important;}

.DashProjectMore i			{color:#ccc;}
.DashProjectMore:hover i	{color:#aaa;}

a:link i, a:visited i	{color: #ddd;}
a:hover i				{color: #aaa;}

/* Project List */

.DashProjectPanel							{width:95%; padding:20px 10px;}

.DashProjectList								{width:95%; margin:10px 0;}
.DashProjectList>tbody>tr						{border-bottom:1px solid #dedede !important;}
.DashProjectList>tbody>tr:hover			{background-color:#fafafa;}
.DashProjectList td						{padding:8px 12px; font-size:16px; line-height:20px; color:#838383; font-weight:400;}
.DashProjectList a							{display:block; padding:0; border-radius:3px;}
.DashProjectList a:link				{text-decoration:none; color:#838383;}
.DashProjectList tr:not(last-of-type) a:hover				{color:#e98b3a; background-color:#fff1e5;}
.DashStatusDot	 span						{font-size:38px; line-height:none;}
.DashArrowLink									{width:24px; height:25px; background:url(/assets/images/arrow_project_dashboard.png) no-repeat top center;}
.DashArrowLink	:hover					{background:url(/assets/images/arrow_project_dashboard_on.png) no-repeat top center;}

.DashProjectList .dvgrid_pager table{float:right; margin-top:5px;}
.DashProjectList .dvgrid_pager td{text-align:right;}
.DashProjectList .dvgrid_pager a {color:#333; font-size:12px; text-decoration:none; line-height:12px; border:1px solid #666; border-radius:3px; padding:5px 10px; box-shadow:0px 0px 1px 1px #ddd; margin-left:2px;}
.DashProjectList .dvgrid_pager a:hover {background-color:#f63; color:#fff; border:1px solid #f63;}
.DashProjectList .dvgrid_pager span {color:#333; font-size:12px; text-decoration:none; line-height:12px; border:0;  padding:5px; font-weight:bold; box-shadow:0 0 0 0;}

.DashSubscription					{padding:5px 10px 5px 25px;}


/* News story */
.DashStoryPanel								{padding:5px 0 15px 0;}
.DashStoryPanel h3						{color:#ff7900; margin:5px 0;}
.DashStoryPanel hr						{border-top-width:3px; border-top-style:solid; border-right-style:none; border-bottom-style:none; border-left-style:none; border-top-color:#ff7900; margin-right:0px; margin-left:0px; margin-top:5px; margin-bottom:1rem;}

.DashStoryHeading							{font-weight:300; color:#333; font-size:18px; line-height:21px;}
.DashStoryText								{font-weight:300; color:#333; font-size:14px; line-height:18px;}
.DashStoryText a:link					{text-decoration:none;}
.DashStoryImage								{margin:18px 0;}

.NotesBanner											{background-color:#595959; margin:10px auto;}

.HeaderProductPartners					{background-color:#fac08f; text-align:center;}
.HeaderNonProductPartners				{background-color:#fdeada; text-align:center;}


/* Shrink */
.ProjectImgContainer {width:100px; height:70px; overflow:hidden; }
.ProjectImgContainer img{width:100%; height:100%; max-height:100% !important; max-width:100% !important;}

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

/* Video */
.VideoDetailOuter  {max-width:1000px; margin:0 auto; padding:20px 2%;}

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

/*video list icons and news list icons*/
.ib_gallery img				{cursor:pointer; 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		{cursor:pointer; display:inline-block; border:1px solid #aaa; background-color:#fb9d18; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;}
.ib_brief img					{cursor:pointer; 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				{cursor:pointer; display:inline-block; border:1px solid #aaa; background-color:#fb9d18; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;}
.ib_list img						{cursor:pointer; 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				{cursor:pointer; 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; width:30%; margin:0 20px 0 0; vertical-align:top;}
.ListItem article > div:nth-of-type(2)	{float:left; width:65%; vertical-align:top;}
.ListItem h2	{font-size:22px;}

/* Product partner dashboard panels */
.TopBar					{border:1px solid #c6c8cb; padding:0; background:url(/assets/images/app/tile_header_miproducts.gif) #f1f1f1 repeat-x; vertical-align:middle;}
.TopBarNoBorder			{padding:0; background:url(/assets/images/app/tile_header_miproducts.gif) #f1f1f1 repeat-x; vertical-align:middle;}
.WhiteBox               {border:1px solid #d9d9d9; background-color:#fff;}
.WhiteBoxHeader         {padding:7px 8px; color:#68605e; border-bottom:1px solid #e9eae2; background-color:#f5f6f1; border-top:1px solid #fff; font-size:14px; font-weight:bold;}
.WhiteBoxHeaderSub      {padding:7px 8px; color:#68605e; border-bottom:1px solid #e9eae2; background-color:#f9faf5; border-top:1px solid #fff; font-size:12px;}
.DashboardH1			{font-size:14px; font-weight:bold; color:#333; border-bottom:3px solid #333;  position:relative;}
.DashboardBigNumber	{background-color:#ff7900; padding:8px 18px; text-align:center; color:#fff; font-weight:bold; font-size:36px; line-height:36px;}

/* Authorise Spec */
.FooterAuthorise								{border-top:1px solid #333; padding:15px 0; margin:20px auto; width:90%;}
.FooterAuthQR									{width:25%; float:left; padding-top:10px;}
.FooterAuthText								{width:75%; float:left;}

.AuthCheckAlert 				{margin:20px auto; padding:20px; font-size:1.2em; background-color:#fcf7f2; border:1px solid #ff9c2b; border-radius:5px; box-shadow:0 0 20px 0px #ccc;}

.AuthCheck									{padding:20px 0 0 0;}
.AuthCheck > div						{height:57px; width:95px; margin:0 5px; position:relative; display:inline-block;}
.AuthCheck > div:nth-of-type(2)						{width:5px; margin:0 0 0 -10px;}
.AuthCheck > div span				{position:absolute; left:0; bottom:0; line-height:35px; font-size:18px;}
.AuthCheck > div input			{position:absolute; left:0; bottom:0;}
.AuthCheck > div label			{position:absolute; left:0; top:0; font-size:14px; color:#ccc; cursor:context-menu;}
.AuthCheck .BtnBase         {position:absolute; left:0; bottom:0; margin:0;}

.AuthCheckResults					{margin:20px auto; padding:10px;}

.AuthReportErrorGroup							{min-width: 300px; padding: 0 10px; margin:20px auto;}
.AuthReportErrorHeader							{border: 1px solid #c0c0c0; background-color: #efefef; padding: 5px; cursor: pointer;}
.AuthReportErrorBody							{border: 1px solid #c0c0c0; border-top: 0px; padding: 5px 10px;}
.AuthReportErrorHeader div:nth-of-type(1) {float:left; margin:0 10px 0 5px;}
.AuthReportErrorHeader div:nth-of-type(2) {float:left; max-width:85%;}

.AuthReportErrorForm							{padding:20px 0 0 0;}
.AuthReportErrorForm > div						{height:57px; width:295px; margin:0 5px; position:relative; display:inline-block;}
.AuthReportErrorForm > div input				{position:absolute; left:0; bottom:0;}
.AuthReportErrorForm > div label				{position:absolute; left:0; top:0; font-size:14px; color:#ccc; cursor:context-menu;}
.AuthReportErrorForm .BtnBase					{position:absolute; left:0; bottom:0; margin:0;}


/*Chat icon*/
.ImgMessage				{height:24px; width:auto; display:inline-block; margin:0 15px -5px 0;}

/* Upload Chat Image */
#PreviewChatImage       {height:150px; overflow: hidden; text-align:center;}
#PreviewChatImage img   {height:150px; max-width: 200px; max-height: 150px; margin:0 auto;}
.UploadChatImage        {position: relative; height:26px; line-height:24px; text-align: center; color: #FFF; padding: 3px; margin: 15px auto;}
.UploadChatImage form   {width:100%;position:absolute; left:0; top:0;opacity:100; filter:alpha(opacity=100);}
.UploadChatImage form input{position:absolute;clip:rect(0 0 0 0);}

/* Product partner contact request list page */
.cmrequestlist a {color:#e98b3a !important;}
.cmrequestlist tr {cursor:pointer;}

/* MAKE LAYOUT SHUFFLE at 1100px */
@media only screen and (max-width:1180px) {
	.span_1_of_4_CBI {width:100%;}
}

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

/*  MAKE LAYOUT SHUFFLE at 1000px  ============================================ */
@media only screen and (max-width: 1000px) and (min-width: 641px) {
	/* Use most of the width of the screen */

}

/* MAKE LAYOUT SHUFFLE at 900px */
@media only screen and (max-width: 900px) {
	.UserPanelText	{font-size:12px; line-height:16px;}
}

/* MAKE LAYOUT SHUFFLE at 870px */
 @media only screen and ( max-width: 870px) {
	/* Menu icon / menu row */
	.LogoRowCont .wrapper									{width:100%;}
	.LogoRowCont .PanelLoginAccount				{margin:0; line-height:20px;}
	.LogoRow											{height:50px;}
	.LogoRow > div:nth-of-type(1)		{position:fixed; top:0; left:0; width:100vw; max-width:70vw; background-color:#fff; z-index:99999; height:60px;}  /* Logo */
	.LogoRow > div:nth-of-type(1) img  {max-width:170px; float:left; max-width:207px;}
	.LogoRow > div:nth-of-type(2)		{position:absolute; width:100%; text-align:right; top:60px; left:0; background-color:#ddd; height:35px;}  /* Login button / logged in text */
	.LogoRow .UserLink							{text-align:right; color:#000; width:90%; vertical-align:top;}
	.feedbackPosition							{display:none;}

	/*Chat icon*/
	.LinkImgMessage		{}
	.ImgMessage				{height:18px;}
	
	.ContentStartRow  							{margin-top:33px;}
	/*.LogoRow aside									{display:none;}			hide the pipe separateor */
	.BtnLoginNav									{margin:0 !important; font-size:12px !important; padding:2px 8px !important; box-shadow:none !important;} /* force buttons in Nav to be smaller */
	.ButtonSubscribe							{margin:0 20px 0 0; font-size:12px !important; padding:2px 8px !important; box-shadow:none !important;} /* force buttons in Nav to be smaller */

	.hNavMain .wrapper, .cNavMain .wrapper 	{width:100vw;}		/* Full width when we go to the mobile view. */
	#nav {position:fixed; top:0; right:0; width:100vw; margin:0; float:left; z-index:88888; height:60px; background-color:#fff; border-bottom:1px solid #bbb;}
	#nav > a {height:30px; position:relative; float:right; margin-top:4px; width:60px; color:#000;}
	#nav > a:hover {text-decoration:none; color:#222 !important;}
	#nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type {display:block;}
	#nav > ul {height:auto; display:none; position:absolute; left:0; border:0; width:100%; top:100%;}
	#nav .menuicon {float:left; font-size:34px; line-height:1.4em; font-weight:400; padding:0 14px 5px 20px;}
	#nav .menutext {float:left; font-size:24px; line-height:2.4em; font-weight:300;}


	/* Make the header row smaller */
	.HdrSmaller													{height:40px !important; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
	.HdrSmaller > div:nth-of-type(1)			{height:40px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
	.HdrSmaller > div:nth-of-type(1) img		{ max-width:138px;}
	.HdrSmaller .menuicon								{font-size:22px !important; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
	
	/*
	.HdrSmaller .LogoMain				{height:50px; top:0;}
	.HdrSmaller #nav > ul > li > a 	{padding:14px 20px;}	
	*/
	
	/* Generic */
	#nav li {width:100%; border:none; border-top:1px solid #c5c5c5; float:none;}
	#nav li a {line-height:2.7em; padding:0 1.0em 0 0.5em;}

	/* First level */
	/*#nav:target > ul {display:block; width:300px;}*/
  #nav:target > ul {display:block; width:100vw;}
	#nav > ul > li {background-color:#f0f3f6; width:100%; border-right:none;}
	#nav > ul > li > a {line-height:2.5em;}
	#nav > ul > li > a > span:after {content:"\25BA"; float:right; font-size:1.2em; text-shadow:none;}  /*  ? = &#9660; = \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:#222;} 
	#nav > ul > li:hover > a, #nav > ul > li:hover > a > span::after {color:#222;}

	.navFirstLevelTitle {position:fixed; top:50px; background-color:#fefefe; width:100vw; border-top:1px solid #bbb;}
	.navFirstLevelTitle span:after {content:"" !important;}
	.navFirstLevelTitle span:before {content:"\25C0  " !important;}

	/* Second level */
  #nav > ul > li > ul {display: none; visibility:visible !important; }
	#nav > ul > li > ul {width:100% !important; position:static; border:0; padding:0; margin:0; box-shadow: none; border-radius:0; max-height:0; opacity:0.0; transition:max-width 2.0s, opacity 0.75s; -webkit-transition:max-width 2.0s, opacity 0.75s;}
	#nav > ul > li > ul > li:first-of-type 	{margin:0;}
	#nav > ul > li > ul > li  {display:block; width:100%; border:none; margin:0; padding:0; font-size:1em; border-bottom:1px solid #c5c5c5;}
	#nav > ul > li > ul > li:first-child {border-top:1px solid #c5c5c5;}
	#nav > ul > li > ul > li:last-child {border-bottom:none;}
	#nav > ul > li > ul > li > a {text-indent:0.8em; font-size:1.0em; border-radius:0;}
	#nav > ul > li > ul > li > a:hover,  #nav ul > li > ul:not( :hover ) li.active a {background-color:#dfe2e6; color:#000; border:1px solid transparent;}
	#nav > ul > li > ul > li > a::before {margin:0; content:""; position:absolute; left:0; border:none;}
	#nav > ul > li > ul > li > a > span:after {content:'\25BC'; margin-right:0.5em; float:right; font-size:1.1em;} /*  ? = &#9660; = \25BC  || For special chars, convert entity code to CSS hex here: http://www.evotech.net/articles/testjsentities.html */
	/*#nav > ul > li:hover > ul {max-height:800px; opacity:1; overflow:visible; padding:0;}*/

	/* Third level */
	#nav > ul > li > ul > li > ul {position:static; border:0; padding:0; margin:0; box-shadow: none; border-radius:0; max-height:0; opacity:0.0; transition:max-height 2.0s, opacity 0.75s; -webkit-transition:max-height 2.0s, opacity 0.75s;}
	#nav > ul > li > ul > li > ul {width:100%; position:static;}
	#nav > ul > li > ul > li:hover > ul {max-height:800px; opacity:1;}
	#nav > ul > li > ul > li > ul > li	{font-size:1em; border-bottom:1px solid #c5c5c5; padding:0; border-left:none; border-radius:0;}
	#nav > ul > li > ul > li > ul > li:hover	{border-left:none; border-right:none; border-top:none;}
	#nav > ul > li > ul > li > ul > li:first-child {border-top:1px solid #c5c5c5;}
	#nav > ul > li > ul > li > ul > li:last-child {border-bottom:none;}
	#nav > ul > li > ul > li > ul > li > a {text-indent:1.5em; border:0;}
	#nav > ul > li > ul > li > ul > li > a:hover,  #nav ul > li > ul > li > ul:not( :hover ) > li.active a {background-color:#dfe2e6; color:#000;}
}

 
/* MAKE LAYOUT SHUFFLE at 768px */
@media only screen and (max-width: 768px) {
  .span_1_of_4Footer 	{width:100%;}

	.FooterNavText			{text-align:center; font-size:16px !important; line-height:24px !important; border-bottom:1px solid #666; margin-bottom:15px; padding-bottom:10px;}
	.PageFooter hr 		{display:none;}
	.PageBannerHome h1 	{line-height: 1.4; font-size:2em;}
	.HeroPanel					{width:70% !important; margin:50px auto; float:none !important;}
	.SectionPanel			{margin:20px auto !important;}
	.TableWidth80			{width:100%;}
	.TableWidth80 td		{font-size:12px;}

	.ProductPanel {width:47%; min-width:240px; min-height:260px; margin-right:2%; border:1px solid #f5f5f5;}

	.PanelItemGrid3Col > article, .PanelItemGrid3ColNarrow > article, .PanelItemGrid3ColDownloads > article, .PanelItemGrid3ColVideo > article, .PanelItemGrid4Col > article, .PanelItemGrid4ColProds > article, .PanelItemGrid4ColImages > article {width:48%; margin:0 1% 14px 1%;}

	/* Change the tabs to be vertically listed panels */
	.TabSet							{width:100%; max-width:600px; margin:50px auto;}
	.TabSet > nav				{display:none;}
	.TabSet > article			{border:none; margin:0; z-index:1001; padding:0; background-color:transparent;}
	.TabSet > article > header		{display:block; background-color:#fff; border:1px solid #bcbcbc; margin:0 10px 15px 10px; padding:5px;}
	.NarrowViewText {display:block}
	
	.SocialLinks					{width:190px !important; margin: 0 auto;} /* Center Aligns the Social Icons */
	.SocialIcon						{margin-right: 0; margin-left:18px;}
}

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

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

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

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

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

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

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

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

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

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

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

    .col {margin:1% 0 1% 0%;}
	/* Use the full width of the screen */
	/* Control images when they have more space to display */	
	.responsive-image img {height:auto !important; max-width:80% !important; width:80% !important;}
	/* Footer */
	.cNavBottom				{text-align:center;}
	.HomePartnersPanel img	{margin:20px auto !important;}
	.HomePartnersPanel h6	{text-align:center;}
	.HomepageFeatureButton {width:88%; margin:6px auto;}
	.HomepageFeatureButtonAlt {width:88%; margin:6px auto;}
	.PartnerLogo		{padding:2px !important;}
	.AlignLeftImage					{float:none !important; margin:20px auto !important;}
	.AlignRightImage					{float:none !important; margin:20px auto !important;}
	/* .UserLink					{float:none !important;} */

    /* Get the login to fly down from the right place on smaller devices, otherwise it falls off the edge of the screen. */
	.PanelLoginCont			{position:absolute; top:0; right:20px; height:0; overflow:hidden; z-index:10002;}
	.cNavSub						{display:none;}
	.NextAndPrevLinksTop	{text-align:left; display:none;}

  /*.LoginFull 					{display:none;}  */
	.LoginPhone 				{display:inline-block; float:right;}
	/* Quicl Links */
	.QuickLinksPanel				{border-top: 2px solid #eaeaea;}
	.QuickLinksTitle      {text-align:center;}
	.QuickLinks           {text-align:center;}
	.QuickLinks h4					{text-align:center;}
	
}


@media only screen and (max-width: 480px) {
	.ListItem article > div:nth-of-type(1)	{width:90%;}
	.ListItem article > div:nth-of-type(2)	{width:90%;}

  /* Compare - Box Filter */
	.colBoxFilter {margin:1% 0 1% 0%;}

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

	.PanelItemGrid3Col > article, .PanelItemGrid3ColNarrow > article, .PanelItemGrid3ColVideo > article, .PanelItemGrid3ColDownloads > article .PanelItemGrid4Col > article, .PanelItemGrid4ColProds > article, .PanelItemGrid4ColImages > article {width:98%; float:none; margin:0 auto 10px auto;}
	.PanelItemGrid > article > a > div     {height:auto;}
	.PanelItemGrid4ColImages > article .ImgInfo {top:100%;}
	
	/* Auth Check */
	.AuthCheck 								{padding-top:55px;}
	.AuthCheck > div						{height:45px; margin:5px 5px 0 5px; display:block;}
	.AuthCheck > div input				{top:0; bottom:initial; margin:0 0 0 100px;}
	.AuthCheck > div label				{top:0; bottom:initial; margin:10px 0 0 0; font-size:14px; color:#ccc; cursor:context-menu;}
	.AuthCheck .BtnBase             {top:0; bottom:initial; margin:0 0 0 100px;}
	.AuthCheck > div:nth-of-type(2)	{display:none;}
	
}


/* miproducts panel */
.mip_Head2												{font-size:16px; font-weight:bold; color:#000;}
.mip_Head3												{font-size: 12px; font-weight: bold; color: #666;}
.mip_Head20												{font-size: 16px; font-weight: bold; color: #000;}
.mip_Head25												{font-size: 14px; font-weight: bold; color: #000;}
.DataSheetsLinks									{border-top: 1px solid #f3f3f3;}
.DataSheetsLinks td								{border-bottom: 1px solid #f3f3f3; font-size: 14px; padding:8px 10px;}
.listItem													{display: list-item; list-style: disc; list-style-position: outside; font-size: 12px; line-height: 15px;}
/* SEARCH LISTINGS */
#mip_container							  {width:100%; clear:both; border-top:1px solid #ccc; padding:4px 0; vertical-align:top;} 
.mip_container							{width:100%; clear:both; border-top:1px solid #ccc; padding:4px 0; vertical-align:top;} 
/* 2 columns */
.mip_col_left								{float:left; width:20%; margin:0px; margin:4px 0;} 
.mip_col_right 							{float:right; width:80%; margin:0px; margin:3px 0; text-align:left;}
.mip_ImageList							{margin-top:5px; margin-bottom:5px; text-align:center; padding-top:5px; padding-bottom:5px;}
.mip_ImageList img					{max-width:425px;}

.MiproductsPDSView										{margin-top:5px; margin-bottom:5px;}
.iconSearchResult {float:left;
}