/*

The following CSS prooperties need to be set in a page's own CSS using px units:
	body { background-position } .......... sets the vertical position of where the dark footer starts
	div.PayriteFooterContainer { top } .... same as body { background-position }
	div.PayriteMainContainer { height } ... equal to body { background-position } - 150
	div.PayriteMainTabs { top } ........... sets the vertical position of where the horizontal top border separating off the tab area should appear

*/

/******************************************************************************************************/

html {
	height: 100%;
}

body {
	background-color: #ffffff;
	background-image: url('/PayriteAssets/FooterBackground_Zoned_8x1200.png');
/*
Set background-position for body in the page's own CSS.
This should be the same position as the Top CSS property of the PayriteFooterContainer
class which again should be set in the page's own CSS.
By doing this it stops the effect of a transition from white to dark grey for the
footer area while the page is loaded, but more importantly, if the page is shorter
than the browser window, it extends the footer's background to the bottom of the window.
For example:
	background-position: 0 700px;
*/
	background-repeat: repeat-x;
	border: 0px none;
	color: #24303B;
	font-family: Arial, sans-serif;
	font-size: 12pt;
	height: 100%;
	margin: 0px;
	padding: 0px;
}

h3 {
	background-color: transparent;
	border: 0px none;
	color: #24303B;
	font-family: Arial, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: bold;
	margin-bottom: 4px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 8px;
	padding: 0px;
}

h4 {
	background-color: transparent;
	border: 0px none;
	color: inherit;
	font-family: Arial, sans-serif;
	font-size: 16pt;
	font-style: normal;
	font-weight: normal;
	margin-bottom: 4px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	padding: 0px;
	text-decoration: none;
}
p {
	background-color: transparent;
	border: 0px none;
	color: inherit;
	font-family: Arial, sans-serif;
	font-size: inherit;
	font-style: normal;
	font-weight: normal;
	margin-bottom: 1px;
	margin-left: 0px;
	margin-right: 4px;
	margin-top: 16px;
	line-height: 1.2em;
	padding: 0;
	text-decoration: none;
}

ul {
	margin: 0;
	padding: 0;
}

li {
	background-image: url('/PayriteAssets/BulletList_LtGreyTx_6x7.png');
	background-repeat: no-repeat;
	background-position: 3px 4px;
	line-height: 1.2em;
	list-style: none;
	margin-bottom: 4px;
	margin-left: 6px;
	margin-right: 4px;
	margin-top: 6px;
	padding-bottom: 0px;
	padding-left: 16px;
	padding-right: 0px;
	padding-top: 0px;
}

a {
	color: #62B5E5;
	font-style: normal;
	font-weight: normal;
	font-size: 1em;
	font-variant: inherit;
	text-decoration: none;
}
a.footer {
	color: #62B5E5;
}

em {
	color: #ED8B00;
	font-style: normal;
	font-weight: normal;
	font-size: 1em;
	font-variant: inherit;
	text-decoration: none;
}
em.footer {
	color: #ED8B00;
}

/******************************************************************************************************/

div.PayriteCookieContainer {
	background-color: #62B5E5;
	border: 0px none;
	clear: both;
	height: 130px;
	left: 0px;
	margin: 0px;
	overflow: hidden;
	padding: 0px;
	position: absolute;
	text-align: left;
	vertical-align: baseline;
	width: 100%;
	top: 0px;
}

div.PayriteCookieContent {
	background-color: transparent;
	border: 0px none;
	cursor: pointer;
	margin: 0px auto;
	padding-bottom: 0px;
	padding-left: 5px;
	padding-right: 0px;
	padding-top: 0px;
	position: relative;
	text-align: left;
	vertical-align: baseline;
	width: 810px;
}

div.PayriteCookieMessage {

	background-color: transparent;
	border: 0px none;
	color: #ffffff;
	font-size: 11pt;
	line-height: 1.2em;
	margin: 0;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 25px;
}

div.PayriteCookieDismiss {
	background-color: transparent;
	border: 0px none;
	color: #C8102E;
	font-size: 100%;
	font-weight: bold;
	line-height: 1.2em;
	margin: 0;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 15px;
	text-align: center;
}


/******************************************************************************************************/

div.PayriteHeaderContainer {
	background-color: #24303B;
	border: 0px none;
	clear: both;
	height: 145px;
	left: 0px;
	margin: 0px;
	overflow: hidden;
	padding: 0px;
	position: absolute;
	text-align: left;
	vertical-align: baseline;
	width: 100%;
	top: 0px;
}

div.PayriteHeaderContent {
	background-color: transparent;
	border: 0px none;
	margin: 0px auto;
	padding: 0px;
	position: relative;
	text-align: left;
	vertical-align: baseline;
	width: 800px;
}

div.PayriteHeaderWallpaper {
	background-color: #24303B;
	background-position: 0% 100%;
	background-repeat: no-repeat;
	height: 105px;
	left: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

div.PayriteHeaderToContent {
	background-color: #ED8B00;
	background-image: url('/PayriteAssets/ContentEdgeTop_Zoned_10x40.png');
	background-position: 0 100%;
	background-repeat: repeat-x;
	height: 40px;
	left: 0px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 105px;
	width: 100%;
}

div.PayriteHeaderAvatar {
	background-color: transparent;
	background-position: 0% 100%;
	background-repeat: no-repeat;
	height: 100px;
	left: 0px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 5px;
	width: 1px;
}

div.PayriteHeaderPayriteLogo {
	background-color: transparent;
	background-image: url('/PayriteAssets/IrisPayrite_LogoTx_281x66.png');
	background-position: 0% 100%;
	background-repeat: no-repeat;
	height: 66px;
	left: 0px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 20px;
	width: 285px;
}

/******************************************************************************************************/

div.PayriteFooterContainer {
	background-color: #f6f6f7;
	background-image: url('/PayriteAssets/FooterBackground_Zoned_8x1200.png');
	border: 0px none;
	color: #020202;
	clear: both;
	height: 240px;
	left: 0px;
	margin: 0px;
	overflow: hidden;
	padding: 0px;
	position: absolute;
	text-align: left;
	vertical-align: baseline;
	width: 100%;
/*
Set top for PayriteFooterContainer in the page's own CSS.
This should be the same position as the background-position CSS property of the body
class which again should be set in the page's own CSS.
By doing this it stops the effect of a transition from white to dark grey for the
footer area while the page is loaded, but more importantly, if the page is shorter
than the browser window, it extends the footer's background to the bottom of the window.
For example:
	top: 700px;
*/
}

div.PayriteFooterEdgeTop {
	background-color: inherit;
	height: 32px;
	left: 0px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0px;
	width: 100%;
}

div.PayriteFooterContent {
	background-color: transparent;
	border: 0px none;
	margin: 0px auto;
	padding: 0px;
	position: relative;
	text-align: left;
	vertical-align: baseline;
	width: 800px;
}

div.PayriteFooterInfo {
	border: 0px none;
	left: 0px;
	font-size: 10pt;
	margin: 0;
	padding: 0;
	width: 240px;
}

div.PayriteFooterInfoHelpdesk {
	left: 0px;
	position: absolute;
	top: 34px;
	width: 245px;
}

div.PayriteFooterInfoClientZone {
	left: 320px;
	position: absolute;
	top: 34px;
	width: 190px;
}

div.PayriteFooterInfoContact {
	left: 620px;
	position: absolute;
	top: 34px;
}


div.PayriteFooterFmpLogo {
	background-color: #ff00e0;
	background-image: url('/PayriteAssets/FmpLogo_ImageWhite_57x52.png');
	background-position: 1px 3px;
	background-repeat: no-repeat;
	border: 1px solid #f000ff;
	border-radius: 4px;
	height: 56px;
	left: 738px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 34px;
	width: 59px;
}

div.PayriteFooterLegal {
	border: 0px none;
	font-size: 12pt;
	left: 0px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 210px;
	height: 40px;
	width: 100%;
}

div.PayriteFooterCopyright {
	border: 0px none;
	color: #020202;
	left: 0px;
	font-size: 9pt;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 8px;
}

/******************************************************************************************************/

div.PayriteMainContainer {
	background-color: transparent;
	border: 0px none;
	clear: both;
	left: 0px;
	margin: 0px;
	overflow: hidden;
	padding: 0px;
	position: absolute;
	text-align: left;
	vertical-align: baseline;
	width: 100%;
	top: 130px;
}

div.PayriteMainContent {
	background-color: transparent;
	border: 0px none;
	margin-bottom: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	padding: 0px;
	position: relative;
	text-align: left;
	vertical-align: baseline;
	width: 800px;
}

div.PayriteMainBlurb {
	background-color: transparent;
	border: 0px none;
	left: 0px;
	margin: 0;
	position: absolute;
	padding-bottom: 0px;
	top: 0px;
}

div.PayriteMainTabs {
	background-color: transparent;
	border-bottom: 0px none;
	border-left: 0px none;
	border-right: 0px none;
	border-top: 1px solid #d8d9d9;
	font-size: 12pt;
	left: 0px;
	margin: 0;
	padding: 0;
	position: absolute;
	width: 100%;
}

/******************************************************************************************************/

div.PayriteMainTabsTitle {
	font-size: 14pt;
	height: 35px;
	left: 0px;
	position: absolute;
	top: 19px;
	width: 250px;
}

/*
If 2 tabs are required define new class PayriteMainTab_0_2 and PayriteMainTab_1_2
Or if 4 tabs are needed define new classes PayriteMainTab_0_4, PayriteMainTab_1_4, PayriteMainTab_3_4 and PayriteMainTab_3_4
*/
div.PayriteMainTab_0_3 {
	left: 298px;
	position: absolute;
	top: 19px;
}

div.PayriteMainTab_1_3 {
	position: absolute;
	left: 468px;
	top: 19px;
}

div.PayriteMainTab_2_3 {
	position: absolute;
	left: 638px;
	top: 19px;
}

div.PayriteMainTabOnOver {
	background-color: #ffffff;
	background-image: none;
	border-bottom: 1px solid #ffffff;
	border-left: 1px solid #d8d9d9;
	border-right: 1px solid #d8d9d9;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	border-top: 1px solid #d8d9d9;
	color: #5e5e5e;
	cursor: pointer;
	font-size: 12pt;
	height: 26px;
	margin: 0;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 9px;
	text-align: center;
	width: 160px;
}

div.PayriteMainTabOnOut {
	background-color: #ffffff;
	background-image: none;
	border-bottom: 1px solid #ffffff;
	border-left: 1px solid #d8d9d9;
	border-right: 1px solid #d8d9d9;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	border-top: 1px solid #d8d9d9;
	color: #5e5e5e;
	cursor: default;
	font-size: 12pt;
	height: 26px;
	margin: 0;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 9px;
	text-align: center;
	width: 160px;
}

div.PayriteMainTabOffOver {
	background-color: #ffffff;
	background-image: none;
	background-repeat: repeat-x;
	border-color: #d8d9d9;
	border-style: solid;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	border-width: 1px;
	color: #5e5e5e;
	cursor: pointer;
	font-size: 12pt;
	height: 26px;
	margin: 0;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 9px;
	text-align: center;
	width: 160px;
}

div.PayriteMainTabOffOut {
	background-color: #767676;
	background-image: url('/PayriteAssets/ContentTabBackground_GreyGrey_7x35.png');
	background-repeat: repeat-x;
	border-bottom-color: #d8d9d9;
	border-left-color: #767676;
	border-right-color: #767676;
	border-style: solid;
	border-top-color: #767676;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	border-width: 1px;
	color: #ffffff;
	cursor: default;
	font-size: 12pt;
	height: 26px;
	margin: 0;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 9px;
	text-align: center;
	width: 160px;
}

/******************************************************************************************************/

div.PayriteMainTabPanel {
	background-color: transparent;
	border-bottom: 0px none;
	border-left: 0px none;
	border-right: 0px none;
	border-top: 1px solid #d8d9d9;
	font-size: 11pt;
	left: 0px;
	position: absolute;
	top: 55px;
	width: 100%;
}