﻿/* ======================================================================================== */
/* ======================================================================================== */
/* Content - CMS related */
/* ======================================================================================== */
/* ======================================================================================== */

/* HTML tags 
	===================== */
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 17px;
	margin: 0;
	background-color: #fff;
}

p {
	font-size: 14px;
	line-height: 17px;
}

ul li {
	display: list-item;
	list-style: none;
	list-style-position: outside;
}

ol li {
	list-style-position: outside;
}

h1 {
	font-size: 26px;
	font-weight: bold;
	color: #000;
	line-height: 32px;
}

hr {
	border-top-width: 2px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #eaeaea;
	margin-right: 0px;
	margin-left: 0px;
}

IMG {
	border: 0;
	display: block;
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* Note: this one is bugging message styles from what i remember, collapse part it is */
a:link, a:visited {
	color: #ee3732;
	text-decoration: none;
}

a:active, a:hover {
	color: #000;
	text-decoration: none;
}

/* Font 
	===================== */
.Head1 {
	font-size: 26px;
	font-weight: bold;
	color: #000;
	line-height: 32px;
}

.Head2 {
	font-size: 20px;
	font-weight: bold;
	color: #000;
	line-height: 26px;
}

.Head3 {
	font-size: 24px;
	font-weight: bold;
	color: #333;
	line-height: 29px;
}

.Head4 {
	font-size: 20px;
	font-weight: bold;
	color: #d3222a;
	line-height: 24px;
}

.Text1 {
	font-size: 12px;
	color: #000;
	line-height: 15px;
}

.Text2 {
	font-size: 12px;
	color: #999;
}

.Text3 {
	font-size: 12px;
	color: #999;
	font-style: italic;
}

.TextSml1 {
	font-size: 10px;
	color: #666;
	line-height: 14px;
}

.TextSml2 {
	font-size: 10px;
	color: #999;
}

.TextLarge {
	font-size: 14px;
	line-height: 18px;
}
/* IC: only found in usercontrol\front\feedback\SubControl\Form****.ascx controls */
.TextQuote {
	font-size: 14px;
	font-weight: bold;
	color: #4898d4;
	line-height: 22px;
	font-style: italic;
}
/* IC: usercontrol\front\activity\provider\sub\Provider_Member.ascx only */

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

.TableBasic {
	border-width: 0px;
	width: 100%;
}

.Table1 {
	border-collapse: collapse;
	border: 1px solid #ccc;
}
/*seems outdated, found only in handful controls at front end, no code behind so feel free to do global text search */
.Table1Head {
	background-color: #3c3c3c;
	padding: 5px 5px 5px 3px;
	font-size: 14px;
	font-weight: bold;
	color: #f7f7f7;
	text-align: left;
	border: 1px solid #ccc;
}
/* not found anywhere */
.Table1SubHead {
	background-color: #d4d4d4;
	padding: 3px 3px 3px 3px;
	font-size: 12px;
	font-weight: bold;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
/* seems outdated, found only in handful controls at front end, no code behind so feel free to do global text search */
.Table1Content {
	background-color: #fbfbfb;
	padding: 2px 2px 2px 3px;
	font-size: 12px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
/* only found in one instance: usercontrol\front\homepage\product_list.ascx */
.TableWhiteBackground {
	border-collapse: collapse;
	border: 1px solid #ccc;
	background-color: #fff;
}
/* used in handful of places for the shop: usercontrol\front\shop\favourites.ascx, and usercontrol\front\shop\ProductDetail\ProductDetail_*****.ascx
		/* 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;
}

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

/* Grid 
	===================== */
.datagridTable {
	color: #f60;
	background-color: #fff;
}

.datagrid {
	padding: 0px;
	font-size: 12px;
	background-color: #fff;
	border-bottom: 1px solid #ccc;
}

	.datagrid td {
		padding: 4px 7px 3px 7px;
		border-bottom: 1px solid #eff0ed;
	}

		.datagrid td a {
			text-decoration: none;
		}

.datagridAlter {
	padding: 0px;
	font-size: 12px;
	background-color: #f5f5f5;
	border-bottom: 1px solid #ccc;
}

	.datagridAlter td {
		padding: 4px 7px 3px 7px;
		border-bottom: 1px solid #eff0ed;
	}

		.datagridAlter td a {
			text-decoration: none;
		}

.datagridSelected {
	color: #ee3732;
	font-size: 12px;
	background-color: #dfe6cf;
}

	.datagridSelected td {
		padding: 4px 7px 3px 7px;
		border-bottom: 1px solid #eff0ed;
	}

		.datagridSelected td a {
			text-decoration: none;
		}

.datagridOver {
	padding: 0px;
	font-size: 12px;
	color: #ee3732;
	background-color: #fcfce3;
}

	.datagridOver td {
		padding: 4px 7px 3px 7px;
		border-bottom: 1px solid #eff0ed;
	}

		.datagridOver td a {
			text-decoration: none;
		}
/*.datagridColumn								{font-size:10px; color:#fff; font-weight:normal; background-color:#fefefe; background:url(/assets/images/app/menu_bg.png) 0px -60px repeat-x; padding:4px 0px 4px 4px; border-bottom:1px solid #ddd; }*/
.datagridColumn {
	font-size: 11px;
	color: #fff;
	font-weight: normal;
	background-color: #7a7a7a;
	padding: 4px 0px 4px 4px;
	border-bottom: 1px solid #ddd;
}

	.datagridColumn a {
		text-decoration: none;
		color: #fff;
	}

.datagridColumnSelected {
	font-size: 11px;
	color: #fff;
	font-weight: bolder;
	background-color: #a5a7b3;
}

.datagridPager {
	font-size: 10px;
	color: #006;
	font-weight: normal;
	background-color: #e5e6e7;
}

	.datagridPager a {
		padding-right: 3px;
	}
/* drag and drop grid */
.HypergridTableHeader {
	overflow: hidden;
	width: 100%;
	table-layout: fixed;
	empty-cells: show;
	border-collapse: collapse;
}

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

/* Tabs 
	===================== */
.tabspanelcont {
	height: 35px;
}

.tabspanel {
	float: left;
	width: 100%;
	font-size: 90%;
	line-height: normal;
	border-bottom: 2px solid #505050;
}

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

		.tabspanel a span {
			float: left;
			display: block;
			background: url(/assets/images/tabspanelright.gif) no-repeat right top;
			padding: 10px 15px 6px 10px;
			color: #000;
		}

	.tabspanel a {
		background-position: 0% -42px;
	}

		.tabspanel a span {
			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: #fff;
	}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.tabspanel a span {
	float: none;
}
/* End IE5-Mac hack */
.tabspanel a:hover span {
	color: #ff6600;
}

.tabspanel a:hover {
	background-position: 0% 0px;
}

	.tabspanel a:hover span {
		background-position: 100% 0px;
	}

/* Stream 
	===================== */
.AlertHeader {
	font-size: 15px;
	padding: 4px 0 4px 10px;
	font-weight: bold;
	color: #fff;
}

.AlertImage1 {
	font-size: 12px;
	background-image: url(/assets/images/msg_type_01.jpg);
	padding: 2px 0 2px 0;
}

.AlertImage2 {
	font-size: 12px;
	background-image: url(/assets/images/msg_type_02.jpg);
	padding: 2px 0 2px 0;
}

.AlertImage3 {
	font-size: 12px;
	background-image: url(/assets/images/msg_type_03.jpg);
	padding: 2px 0 2px 0;
}

.AlertTxt {
	padding: 10px 4px 4px 4px;
	font-size: 12px;
}

.AlertBox {
	cursor: auto;
	visibility: visible;
	width: 238px;
	position: absolute;
	bottom: 20px;
	right: 20px;
	z-index: 10000;
}

.AlertBoxBackground {
	background-image: url(/assets/images/msg_tabletile.jpg);
	background-repeat: repeat-y;
	background-position: right;
	background-color: #666666;
	padding: 0;
}

.AlertBox_Ajax {
	cursor: auto;
	visibility: visible;
	width: 238px;
	position: relative;
	bottom: 80px;
	right: 20px;
	z-index: 10000;
	float: right;
}

.AlertBoxInner {
	top: 0px;
	left: 0px;
	position: absolute;
	z-index: 9999;
}

	.AlertBoxInner table {
		border-collapse: separate;
		border-spacing: 4px;
	}

.AlertBoxFrame {
	top: 0px;
	left: 0px;
	position: relative;
	width: 1px;
	height: 1px;
	z-index: 9998;
}

.AlertNoResult {
	padding: 10px;
	border: 1px solid #e5e5e5;
	background: #f7f7f7;
}

/* Telerik
	===================== */
.TabHover {
	color: #039
}

.TabDisabled {
	color: #999;
}
/* I belive this is used to overwrite telerik generated styles */
.rwControlButtons li {
	list-style-type: none;
}
/* did not find this one in the code, likely overriding a telerik control style */
.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;
	padding-left: 20px;
}

	.FooterText a:link, .FooterText a:visited {
		color: #666;
		text-decoration: underline;
	}

	.FooterText a:hover, .FooterText a:active {
		color: #f60;
		text-decoration: underline;
	}

/* 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;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
	position: absolute;
}

*html .popup_block {
	position: absolute;
}

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

/* Home 
	===================== */
.hBanner {
	padding: 0px;
	text-align: left;
	vertical-align: top;
	background-color: #9cf;
	background-image: url(/assets/images/tile_top_banner.jpg);
	background-repeat: no-repeat;
	height: 187px;
}

.hNavMain {
	padding: 0;
	height: 40px;
}

.hNavBottom {
	padding: 15px 15px 5px 15px;
}

.hBreadcrumbs {
	padding: 0px 0px 0px 20px;
}

.hPage {
	background-color: #e9e9e9;
}

.hMainLogo {
	padding: 30px 30px 7px 30px;
	background-color: #fff;
	text-align: left;
	vertical-align: top;
}

.hContent1 {
	height: 400px;
	padding: 50px 0px 20px 0px;
	text-align: left;
	vertical-align: top;
}

.hContent2 {
	width: 247px;
	padding: 0px;
	background-color: #efeff0;
	text-align: left;
	vertical-align: top;
}

.hFooter {
	padding: 15px;
	vertical-align: top;
}
/* Custom Homepage Styles */
.LoginHomeRow {
	background: url(/assets/images/tile_checker_black_right.jpg) top no-repeat #000;
	min-height: 100px;
}

.StoreLoginPanel {
	width: 460px;
	background: #fff;
	padding: 15px;
}

/* Content - Standard
	===================== */
.wrapper {
	clear: both;
	margin: 0 auto;
	padding: 0;
	position: relative;
	max-width: 1200px;
	width: 96%;
}

#cLayout {
	z-index: 1;
	width: 985px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	border: 0;
}

.cBanner {
	padding: 0px;
	text-align: left;
	vertical-align: top;
}

.cNavMain {
	padding: 0;
	height: 40px;
}

.cNavSub {
	padding: 0px 0px 5px 0px;
	vertical-align: top;
	width: 184px;
	background: url(/assets/images/tile_subnav.gif) #f2f2f3 repeat-y;
}

.cNavBottom {
	padding: 15px 15px 5px 15px;
	vertical-align: top;
}

.cNavBreadcrumbs {
}

.cContent1 {
	width: 801px;
	padding: 10px 30px 25px 30px;
	background: url(/assets/images/tile_content_1.gif) #fff repeat-y right;
	text-align: left;
	vertical-align: top;
}

.cContent1Information {
	vertical-align: top;
}

.cContent1FullWidth {
	padding: 0px 20px 10px 20px;
	text-align: left;
	vertical-align: top;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-collapse: collapse;
	background-color: #fff;
	height: 360px;
}

.cContent2 {
	width: 195px;
	padding: 0px;
	background-color: #fff;
	text-align: left;
	vertical-align: top;
}

.cFooter {
	padding: 15px;
	vertical-align: top;
}

.SpacerLeft {
	width: 10px;
	background-color: #fff;
}

.SpacerLeftHeight {
	width: 10px;
	background-color: #fff;
	height: 400px;
}

.SpacerRight {
	width: 10px;
	background-color: #fff;
}

.SpacerNoWidth {
	background-color: #fff;
}

/* ======================================================================================== */
/* ======================================================================================== */
/* Forms */
/* ======================================================================================== */
/* ======================================================================================== */

/* Form Elements 
	===================== */

/* TextArea 
	===================== */

/* TextBox 
	===================== */
.FormTextBox {
	padding: 4px;
	font-size: 14px;
	color: #000;
	background-color: #fff;
	border: 2px solid #e8e8e8;
}

.FormTextBox_ReadOnly {
	padding: 4px;
	font-size: 14px;
	color: #000;
	background-color: #fff;
	border: 2px solid #e8e8e8;
}

.FormTextBoxGreen {
	padding: 4px;
	font-size: 14px;
	color: #000;
	background-color: #b8eba9;
	border: 2px solid #e8e8e8;
}

/* Password 
	===================== */

/* Pulldown List 
	===================== */
.FormPulldown {
	padding: 4px;
	font-size: 12px;
	color: #000;
	background-color: #b0becd;
}

.FormPulldownLanguage {
	padding: 4px 6px;
	font-size: 10px;
	color: #666;
	background-color: #e9f4f3;
	margin: 10px;
}

.FormPulldownSection {
	padding: 4px;
	font-size: 12px;
	color: #446f83;
	background-color: #e9f4f3;
	margin: 10px;
}

/* Select List 
	===================== */

/* Checkbox 
	===================== */

/* Radio button 
	===================== */

/* Input
	===================== */
.FormInvalid {
	padding: 4px;
	font-size: 14px;
	color: #000;
	background-color: #fbb5b3;
	border: 2px solid #e8e8e8;
}

/* Captcha 
	===================== */

/* Form Tables 
	===================== */
.FormTable {
	margin-top: 10px;
	margin-bottom: 10px;
	background-color: #fff;
}

	.FormTable th {
		font-size: 16px;
		font-weight: bold;
		color: #000;
		background-color: #e1e0de;
		padding: 10px 10px 10px 20px;
		text-align: left;
	}

	.FormTable td {
		font-size: 14px;
		color: #000;
		padding: 8px 6px;
	}

.FormTableHead {
	font-size: 14px;
	color: #333;
	font-weight: bold;
	padding: 10px 10px 10px 20px;
}

.FormCellHeadSub {
	font-size: 14px;
	color: #000;
	font-weight: bold;
	padding: 3px;
	background-color: #ecf1f7;
}

.FormSectionTop {
	border: 1px solid #888;
	margin-top: 1px;
}

.InstructTextSml {
	font-size: 11px;
	color: #999;
}

.FormRequired {
	font-size: 16px;
	color: #f13c43;
}

.errStdRed {
	font-size: 12px;
	color: #f00;
	vertical-align: top
}

/* Buttons
	===================== */
.FormButton {
	padding: 4px 8px 4px 8px;
	font-size: 12px;
	color: #393b4a;
	background-image: url(/assets/images/button_tile.jpg);
	background-repeat: repeat-x;
	background-color: #b0becd;
	border: inset 1px #708090;
	text-decoration: none;
}

	.FormButton:hover {
		padding: 4px 8px 4px 8px;
		font-size: 12px;
		color: #393b4a;
		background-image: url(/assets/images/button_tile.jpg);
		background-repeat: repeat-x;
		background-color: #b0becd;
		border: inset 1px #708090;
		text-decoration: none;
	}

.FormButtonSubmit {
	padding: 4px 8px 4px 8px;
	font-size: 12px;
	color: #393b4a;
	background-image: url(/assets/images/button_tile.jpg);
	background-repeat: repeat-x;
	background-color: #b0becd;
	border: inset 1px #708090;
	text-decoration: none;
}

/* SWAP OUT FORM ELEMENTS FOR GRAPHICS  
	===================== */
.checkbox, .radio {
	background-image: url(/assets/images/quiz/checkbox2.png);
	background-repeat: no-repeat;
	display: block;
	width: 38px;
	height: 50px;
	padding: 0 5px 0 0;
	clear: left;
	float: left;
}

.radio {
	background-image: url(/assets/images/radio2.png);
	background-repeat: no-repeat;
}

.select {
	position: absolute;
	width: 158px; /* With the padding included, the width is 190 pixels:the actual width of the image. */
	height: 21px;
	padding: 0 24px 0 8px;
	color: #fff;
	font: 12px/21px arial,sans-serif;
	background: url(/assets/images/select.png) no-repeat;
	overflow: hidden;
}

/* Image Buttons
	===================== */
/* CPD - EVENT */
.ImgBtnEventAdd {
	width: 0px;
	height: 0px;
	background: url(/assets/images/button_add_event.gif) no-repeat 0px 0px;
	margin: 0;
	padding: 0;
	border: none;
	background-color: transparent;
	cursor: pointer;
	display: inline-block;
}

.ImgBtnEventRemove {
	width: 0px;
	height: 0px;
	background: url(/assets/images/button_remove_event.gif) no-repeat 0px 0px;
	margin: 0;
	padding: 0;
	border: none;
	background-color: transparent;
	cursor: pointer;
	display: inline-block;
}

.ImgBtnEventFind {
	width: 0px;
	height: 0px;
	background: url(/assets/images/button_find_events.gif) no-repeat 0px 0px;
	margin: 0;
	padding: 0;
	border: none;
	background-color: transparent;
	cursor: pointer;
	display: inline-block;
}

.ImgBtnReportFind {
	width: 0px;
	height: 0px;
	background: url(/assets/images/button_find_report.gif) no-repeat 0px 0px;
	margin: 0;
	padding: 0;
	border: none;
	background-color: transparent;
	cursor: pointer;
	display: inline-block;
}

/* 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 */
.ImgBtnAddNew {
	width: 48px;
	height: 18px;
	background: url(/assets/images/button_addnew.gif) no-repeat 0px 0px;
	margin: 0;
	padding: 0;
	border: none;
	background-color: transparent;
	cursor: pointer;
	display: inline-block;
}

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

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

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

/* First level - Horizontal - Flyout 
	===================== */
/* TEXT BASED MENU */
#navMain, #navMain ul {
	width: 500px;
	list-style: none;
	line-height: 14px;
	padding: 0;
	margin: 0px 0px 0px 0px;
	border-left: 1px solid #999;
	z-index: 500;
	position: relative;
}

	#navMain a {
		display: block;
		color: #18263e;
		text-decoration: none;
		padding: 2px 15px 1px 10px;
		font-size: 12px;
		font-weight: bold;
	}

		#navMain a.daddy {
			background: url(/assets/images/rightarrow2.gif) 140px 6px no-repeat;
		}

		#navMain a.sel {
			background-color: #fff;
			color: #C30;
		}

	#navMain li {
		list-style: none;
		float: left;
		padding: 0;
		border-right: 1px solid #999;
		background-color: #fff;
	}

		#navMain li ul {
			position: absolute;
			left: -2000px;
			height: auto;
			width: 175px;
			w\idth: 150px;
			margin: 0 0 0 -1px;
			border: solid #999;
			border-width: 0 1px 1px 1px;
		}

		#navMain li li {
			width: 150px;
			border: solid #999;
			border-width: 1px 0 0 0;
		}

		#navMain li ul a {
			width: 150px;
			w\idth: 125px;
			font-size: 11px;
			font-weight: normal;
		}

		#navMain li ul ul {
			margin: -21px 0 0 150px;
		}

		#navMain li:hover ul ul, #navMain li:hover ul ul ul, #navMain li.sfhover ul ul, #navMain li.sfhover ul ul ul {
			left: -2000px;
		}

		#navMain li:hover ul, #navMain li li:hover ul, #navMain li li li:hover ul, #navMain li.sfhover ul, #navMain li li.sfhover ul, #navMain li li li.sfhover ul {
			left: auto;
		}

		#navMain li:hover, #navMain li.sfhover {
			background: #d6dde1;
		}

		#navMain li.separator {
			background-color: #7c6240;
			padding: 4px 5px 3px 5px;
		}

/* IMAGE BASED 
		#navMain, #navMain ul				{width:940px; list-style:none; line-height:14px; padding:0; margin: 0px 0px 0px 0px; z-index:500; position:relative;}
		#navMain a									{display:block; color:#18263e; text-decoration:none; font-size:12px;}
		#navMain a.daddy						{background:url(/assets/images/rightarrow2.gif) 140px 6px no-repeat;}
		#navMain a.sel							{background-color:#d6dde1;}
		#navMain li									{list-style:none; float:left; padding:0;}
		#navMain li ul							{position:absolute; left:-2000px; height:auto; width:195px; width:170px; margin:0 0 0 -1px; border:solid #999; border-width:0 1px 1px 1px; background-color:#f1f3f4;}
		#navMain li li							{width:170px; border:solid #999; border-width:1px 0 0 0; }
		#navMain li ul a						{width:170px; w\idth:145px; padding:6px 15px 6px 10px;}
		#navMain li ul ul						{margin:-21px 0 0 170px; }
		#navMain li:hover ul ul, #navMain li:hover ul ul ul, #navMain li.sfhover ul ul, #navMain li.sfhover ul ul ul {left:-2000px;}
		#navMain li:hover ul, #navMain li li:hover ul, #navMain li li li:hover ul, #navMain li.sfhover ul, #navMain li li.sfhover ul, #navMain li li li.sfhover ul {left:auto;}
		#navMain li:hover, #navMain li.sfhover { background:#d6dde1; }
		#navMain li.separator				{}
		*/

/* Second level - Vertical 
	===================== */
#navSub, #navSub ul {
	width: 184px;
	list-style: none;
	line-height: 14px;
	padding: 0;
	margin: 0;
}

	#navSub .sel {
		color: #c00;
		background-image: url(/assets/images/arrow_subnav_1_on.gif);
	}

	#navSub a {
		display: block;
		color: #333;
		text-decoration: none;
	}

	#navSub li {
		margin: 0px;
		padding: 0px;
		background: url(/assets/images/arrow_subnav_1.gif) 7px 6px no-repeat;
		list-style: none;
	}

		#navSub li a {
			width: 184px;
			w\idth: 164px;
			padding: 4px 5px 3px 15px;
			background: url(/assets/images/arrow_subnav_1.gif) 7px 6px no-repeat;
		}

		#navSub li ul {
			border: 0;
		}

		#navSub li li .sel {
			color: #c00;
			background-image: url(/assets/images/arrow_subnav_2_on.gif);
		}

		#navSub li li {
			margin: 0px;
			padding: 0px;
			background: url(/assets/images/arrow_subnav_2.gif) 10px 6px no-repeat;
			background-color: #f7f7f7;
		}

			#navSub li li a {
				width: 184px;
				w\idth: 154px;
				padding: 4px 5px 3px 25px;
				background: url(/assets/images/arrow_subnav_2.gif) 10px 6px no-repeat;
			}

	#navSub a:hover {
		color: #c00;
	}

/* 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: #000;
	line-height: 14px;
}

	.MenuBotL1 a:link {
		color: #666;
		text-decoration: underline;
	}

	.MenuBotL1 a:visited {
		color: #666;
		text-decoration: underline;
	}

	.MenuBotL1 a:active, .MenuBotL1 a:hover {
		color: #f60;
		text-decoration: underline;
	}

.MenuBotL2 {
	font-size: 9px;
	color: #000;
	line-height: 14px;
}

	.MenuBotL2 a:link {
		color: #666;
		text-decoration: underline;
	}

	.MenuBotL2 a:visited {
		color: #666;
		text-decoration: underline;
	}

	.MenuBotL2 a:active, .MenuBotL2 a:hover {
		color: #f60;
		text-decoration: underline;
	}
/*
		Now this is really weird!!
		If you put 'background-color' in the line above, instead of 'background' only it stops working properly in IE7!
		In that case menus do not disappear on rollout, if there is a focus on the form-field.
		*/
#navMain li.separator {
	background-color: #7c6240;
	padding: 4px 5px 3px 5px;
}

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

/* Product Listings 
	===================== */
.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);
	}

/* 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;
	top: 40px;
	right: 0px;
}

/* Outer Container */
.APIcontainer {
	width: 957px;
	height: 108px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	background: url(/assets/tools/FeedbackCustomer/feedback_banner.gif) no-repeat left top;
}

/* Feedback Layout */
/* Col 1 */
.FeedbackSpacer {
	width: 257px;
	height: 108px;
	float: left;
}
/* Col 2 */
.FeedbackRating {
	width: 80px;
	height: 108px;
	background-color: transparent;
	float: left;
}

	.FeedbackRating img {
		border: none;
	}
/* Col 3 */
.FeedbackLinks {
	width: 620px;
	vertical-align: middle;
	float: left;
}

.FeedbackLinksButton1 {
	border: none;
	margin-top: 34px;
	margin-left: 190px;
	display: inline-block;
	cursor: pointer;
}

.FeedbackLinksButton2 {
	border: none;
	margin-top: 5px;
	margin-left: 190px;
	display: inline-block;
	cursor: pointer;
}
/* Allowing for an additional button */

/* Feedback Listings */

.FeedbackListHeading {
	color: #000;
	font-size: 20px;
	font-weight: bold;
}

.FeedbackListText {
	color: #000;
	font-size: 14px;
	padding: 10px 0;
}

.FeedbackListHeadingDislike {
	color: #666;
	font-size: 20px;
	font-weight: bold;
}

.FeedbackListTextDislike {
	color: #666;
	font-size: 14px;
	padding: 10px 0;
}

.FeedbackListDate {
	color: #ababab;
	font-size: 13px;
	float: right;
}

.RedRankText {
	color: #ee3a3d;
	font-size: 18px;
	line-height: 20px;
	font-weight: bold;
}

.BlackText {
	color: #000;
	font-size: 12px;
	line-height: 13px;
}

.CustomerRankBox {
	width: 80%;
	text-align: center;
	vertical-align: top;
	padding: 0;
}

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

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

/* Homepage Hero - X 
	===================== */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: "";
	clear: both;
	height: 0;
}

* html .clearfix {
	zoom: 1;
}
/* IE6 */
.alignleft {
	float: left;
}
/* all lowercase so not to conflict with standard AlignLeft style */
.alignright {
	float: right;
}
/* all lowercase so not to conflict with standard AlignRight style */
#hero {
	width: 720px;
	height: 288px;
	clear: left;
	padding: 0 8px 8px 8px;
	position: relative;
}

	#hero div.hero_wrapper {
		width: 720px;
		height: 288px;
		overflow: hidden;
		display: block;
		position: relative;
	}

.hero_message {
	background: url(/assets/images/hero_trans.png) 0 0;
	position: absolute;
	bottom: 0px;
	left: 0px;
	min-height: 39px;
	display: block;
	width: 700px;
	padding: 18px 15px;
}

	.hero_message p {
		color: #fff;
		margin-bottom: 0;
		font-size: 14px;
	}

	.hero_message .message_title {
		font-weight: bold;
		font-size: 16px;
	}

	.hero_message p a {
		font-weight: bold;
	}

		.hero_message p a:hover {
		}

/* Homepage Hero - y etc
	===================== */

/* Login Dashboard - usercontrol\front\customer\cust_login_dashboard.ascx
	===================== */
.LoginField {
	padding: 3px;
	width: 120px;
	background-color: #f4f4f4;
	border: 2px solid #7dbc3f;
}

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

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

.nobr {
	display: inline;
	white-space: nowrap;
}

.BackgroundWhite {
	background-color: #fff;
}

.BackgroundGrey {
	background-color: #ccc;
}

.FloatLeft {
	float: left;
}

.FloatRight {
	float: right;
	overflow: hidden;
}

.AlignLeft {
	text-align: left;
}

.AlignRight {
	text-align: right;
}

.AlignCenter {
	text-align: center;
}

.AlignTop {
	vertical-align: top;
}

.AlignBottom {
	vertical-align: bottom;
}

.AlignCenterImage {
	margin-left: auto;
	margin-right: auto;
}

.AlignCenterObject {
	margin-left: auto;
	margin-right: auto;
}

.AlignLeftImage {
	float: left;
}

.AlignRightImage {
	float: right;
}

.AlignVertMiddle {
	vertical-align: middle;
}

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

.PaddingBottom20 {
	padding-bottom: 20px;
}

.PaddingTop5 {
	padding-top: 5px;
}

.PaddingTop6 {
	padding-top: 6px;
}

.PaddingTop8 {
	padding-top: 8px;
}

.PaddingTop20 {
	padding-top: 20px;
}

.PaddingTopBot2 {
	padding: 2px 0;
}

.PaddingRight2 {
	padding-right: 2px
}

.PaddingRight3 {
	padding-right: 3px
}

.PaddingRight5 {
	padding-right: 5px
}

.PaddingRight10 {
	padding-right: 10px
}

.PaddingRight15 {
	padding-right: 15px
}

.PaddingLeft10 {
	padding-left: 10px;
}

.PaddingLeft20 {
	padding-left: 20px;
}

.Margin5 {
	margin: 5px;
}

.Margin10 {
	margin: 10px;
}

.Margin20 {
	margin: 20px;
}

.MarginTop3 {
	margin-top: 3px;
}

.MarginTop5 {
	margin-top: 5px;
}

.MarginTop10 {
	margin-top: 10px;
}

.MarginTopBot2 {
	margin-top: 2px;
	margin-bottom: 2px;
}

.MarginLeft5 {
	margin-left: 5px;
}

.MarginLeft20 {
	margin-left: 20px;
}

.MarginBottom3 {
	margin-bottom: 3px;
}

.MarginBottom5 {
	margin-bottom: 5px;
}

.MarginRight6 {
	margin-right: 6px;
}

.MarginRight20 {
	margin-right: 20px;
}

.Border1Grey {
	border: 1px solid #ccc;
}

.Border3White {
	border: 3px solid #fff;
}

.BorderRightGrey {
	border-right: 1px solid #ccc;
}

.BorderTopGrey {
	border-top: 1px solid #ccc;
}

.BorderBottomGrey {
	border-bottom: 1px solid #ccc;
}

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

.Width15 {
	width: 15%;
}

.Width20 {
	width: 20%;
}

.Width25 {
	width: 25%;
}

.Width30 {
	width: 30%;
}

.Width35 {
	width: 35%;
}

.Width40 {
	width: 40%;
}

.Width45 {
	width: 45%;
}

.Width50 {
	width: 50%;
}

.Width55 {
	width: 55%;
}

.Width60 {
	width: 60%;
}

.Width65 {
	width: 65%;
}

.Width70 {
	width: 70%;
}

.Width75 {
	width: 75%;
}

.Width80 {
	width: 80%;
}

.Width85 {
	width: 85%;
}

.Width90 {
	width: 90%;
}

.Width95 {
	width: 95%;
}

.Width96 {
	width: 96%;
}

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

.Image16 {
	width: 16px;
	height: 16px;
}

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

.Red {
	color: #f00;
}

.Green {
	color: #093;
}

.Black {
	color: #000;
}

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

/* REPORTS */
.ReportHead1 {
	background-color: #eeeeee;
	padding: 8px;
	color: #333;
	font-size: 14px;
	font-weight: bold;
}
/* Feedback Banner & Text */
.FeedbackBanner {
}

.FeedbackTitle {
	width: 100%;
	border-radius: 10px;
	height: 73px;
	overflow: hidden;
	background: url(/assets/images/Feedback/title_feedback_background.gif) repeat-x #000;
	margin: 5px auto 10px auto;
}

.FeedbackTitleLeft {
	width: 70%;
	float: left;
}

.FeedbackTitleRight {
	width: 30%;
	float: left;
}

.LowRank {
	display: block;
}

.HighRank {
	display: block;
}

.NarrowRank {
	display: none;
}
/* 640px*/
@media only screen and (max-width:640px) {
	.wrapper {
		width: 90%;
	}

	.NarrowRank {
		display: block;
	}

	.LowRank {
		display: none;
	}

	.HighRank {
		display: none;
	}
}


/* Handling of a layer, and a contained image, which operate as a Screen Saver when a web page is left idle for a period of time (Triggered using JavaScrip and CSS).  */
.ScreenSaver {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #fff;
	z-index: 99999;
	opacity: 0;
	transition: opacity 2s ease-in;
	display: none;
}

.ScreenSaver:target {
	opacity: 1;
	display: block;
}

/* Move and animate the logo around on the screen - Jim */

.track {
	position: absolute;
	top: 30%;
	left: 30%;
	animation: trackAnimate 100s infinite;
}

.left {
	float: left;
}

.PitStopLogo {
	height: 182px;
	width: 300px;
	margin: 0;
}


@keyframes trackAnimate {
	0% {
		transform: translate(-100%, -100%);
		opacity: 0;
	}

	10% {
		transform: translate(100%, 100%);
		opacity: 1;
	}

	20% {
		transform: translate(-100%, 100%);
		opacity: 1;
		-webkit-transform: scale(1.3);
		transform: scale(1.3);
	}

	30% {
		transform: translate(100%, -100%);
		opacity: 1;
	}

	40% {
		transform: translate(-100%, -100%);
		opacity: 1;
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
	}

	50% {
		transform: translate(100%, 100%);
		opacity: 1;
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
	}

	60% {
		transform: translate(100%, -100%);
		opacity: 1;
	}

	70% {
		transform: translate(-100%, 100%);
		opacity: 1;
		-webkit-transform: scale(1.3);
		transform: scale(1.3);
	}

	80% {
		transform: translate(-100%, -100%);
		opacity: 1;
	}

	90% {
		transform: translate(100%, -100%);
		opacity: 1;
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
	}

	100% {
		transform: translate(100%, 100%);
		opacity: 0;
	}
}

/* Something to present mock up page content. */
.PageContent {
	margin: 50px auto;
	max-width: 500px;
	padding: 40px;
	min-height: 100px;
	font-family: arial;
	font-size: 16px;
	border: 1px solid #ccc;
	background-color: azure;
}
