html,body {overflow-x:hidden;overflow-y:hidden;font-family: Arial;}
/*=== FONT DEFINITION ==============================================================*/
/* === LARGE FONT === */
.PK1Large, .PK2Large, .PK3Large, .PK4Large, .PK5Large, .PK6Large,
.PK7Large, .PK8Large, .PK9Large, .PK10Large, .PK11Large,
.PK12Large, .PK13Large, .PK14Large, .PK15Large, .PK16Large, .PK17Large, 
.PK18Large, .PK19Large, .PK20Large, .PK21Large, .PK22Large,
.largeFont,
#TextDisplay,
#TimeDisplay,
#DateDisplay,
.PK1LargeT, .PK2LargeT, .PK3LargeT, .PK12LargeT, .PK13LargeT, .PK14LargeT, .PK15LargeT
.TextDisplayT
 {
	font-family: Mitel_53xx_Large_V2;
	font-size: 14px;
	font-weight: normal;
}
/* === SMALL FONT === */
.smallFont,
#TimeDisplayT, #DateDisplayT, .TextDisplayT
{
	font-family: Mitel_53xx_Small_V2;
	font-size: 11px;
	font-weight: normal;
}
/*=== Styles for positioning divs next to phone key on the left side ===============*/
.PK1Large, .PK2Large, .PK3Large, .PK4Large, .PK5Large, .PK6Large,
.PK7Large, .PK8Large, .PK9Large, .PK10Large, .PK11Large,
.PK12Large, .PK13Large, .PK14Large, .PK15Large, .PK16Large, .PK17Large, 
.PK18Large, .PK19Large, .PK20Large, .PK21Large, .PK22Large {
	text-decoration: none;
	color: #000000;
	position:absolute;
	left: 0px;
	width: 600px;
	z-index: 0;
	visibility: visible;
}
/*=== Styles for positioning divs next to phone key on the right side ===============
The standard distance between the keys is 24px */
.PK12Large, .PK13Large, .PK14Large, .PK15Large, .PK16Large, .PK17Large, 
.PK18Large, .PK19Large, .PK20Large, .PK21Large, .PK22Large {
	text-align: right;
}
.PK1Large, .PK12Large {
	top: 48px;
}
.PK2Large, .PK13Large {
	top: 72px;
}
.PK3Large, .PK14Large {
	top: 96px;
}
.PK4Large, .PK15Large {
	top: 120px;
}
.PK5Large, .PK16Large {
	top: 144px;
}
.PK6Large, .PK17Large {
	top: 168px;
}
.PK7Large, .PK18Large {
	top: 192px;
}
.PK8Large, .PK19Large {
	top: 216px;
}
.PK9Large, .PK20Large {
	top: 240px;
}
.PK10Large, .PK21Large {
	top: 264px;
}
.PK11Large, .PK22Large {
	top: 288px;
}
/*=== Screen styles =================================================================*/
/* This is the style for positioning background images */
.border
{
	position: absolute;
	width: 160;
	height: 320;
	left: 0px;
	top: 0px;
}
/*=== Font Styles ===================================================================*/
.smallFont
{
	text-decoration: none;
	color: #000000;
}
.largeFont{
	text-decoration: none;
	color: #000000;
}
/*=== Hyperlinks styles =============================================================*/
a:link, a:visited
{
	text-decoration: none;
	color: Black;
	border-style: none;
}
/*=== Styles for divs with 'dial', 'link' or 'close' image next to text ===========*/
.dialKeyLeft, .linkKeyLeft, .closeKeyLeft
{
	background-position: left center;
	background-repeat: no-repeat;
	padding: 0px 0px 0px 15px;
}

.dialKeyRight, .linkKeyRight, .closeKeyRight
{
	background-position: right center;
	background-repeat: no-repeat;
	padding: 0px 15px 0px 0px;
}

.dialKeyLeft, .dialKeyRight
{
	background-image: url(../images/icon-dial.gif);
}

.linkKeyLeft, .linkKeyRight
{
	background-image: url(../images/icon-link.gif);
}

.closeKeyLeft, .closeKeyRight
{
	background-image: url(../images/icon-close.gif);
}
/*=== Styles for positioning navigation arrows and home icon ========================*/
#arrowLeft, #arrowRight{
	position:absolute;
	left: 0px;
	top: 308px;
	width: 10px;
	height: 10px;
	z-index:35;
}
#arrowRight{
	text-align: right;
	left: 60px;
	width: 100px;
}
#home{
	position: absolute;
	left: 76px;
	top: 309px;
	z-index: 35;
}

/*=== Special divs styles ===========================================================*/
/* This style is for a div which displays information 
   about telephony events happening on the phone. 
   This div must be present in all pages of the 
   GUI replacement mode applications which need 
   to display telephony info.
   The div is positioned below the logo and 
   above the dedicated Line 1 key.*/
#TextDisplay
{
	text-decoration: none;
	color: #000000;
	visibility: visible;
	position: absolute;
	left: 0px;
	top: 27px;
	width: 160px;
	height: 12px;
	z-index: 998;
	visibility: hidden;
	overflow-x: hidden;
	overflow-y: hidden;
}

/* This style is for a div which displays current time. 
   The div is positioned below the logo and above 
   the dedicated Line 1 key in the left side of the screen.*/
#TimeDisplay
{
	text-decoration: none;
	color: #000000;
	position: absolute;
	left: 1px;
	top: 27px;
	width: 63px;
	height: 12px;
	z-index: 46;
	visibility: visible;
}

/* This style is for a div which displays current date. 
   The div is positioned below the logo and above 
   the dedicated Line 1 key in the right side of the screen.*/
#DateDisplay
{
	text-decoration: none;
	color: #000000;
	position: absolute;
	left: 59px;
	top: 27px;
	width: 100px;
	height: 12px;
	z-index: 45;
	text-align: right;
	visibility: visible;
}

/*=== Shared styles for divs with particular IDs ====================================*/
/* 'page' part of the following style names refers to the whole screen 160 x 320 px.
   All of the 'page' styles are used for positioning elements in the top part 
   of the page where there are no SCREENKEYS available*/
#pageTitle
{
	position: absolute;
	width: 160px;
	height: 9px;
	z-index: 21;
	left: 0;
	top: 0;
	visibility: visible;
}
#pageHeaderImage, #pageLogoImage
{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 160;
	z-index: 0;
}
#pageDescription1
{
	position: absolute;
	left: 0;
	top: 21px;
	width: 160;
	height: 9;
	z-index: 9;
}
#pageDescription2
{
	position: absolute;
	left: 0;
	top: 31px;
	width: 160;
	height: 9;
	z-index: 8;
}

/* TwoTabTab1label and TwoTabTab1label are styles for divs which display 
   the labels of the 2-tab pages on the bottom of the page*/
#TwoTabTab1label
{
	position: absolute;
	left: 11px;
	top: 306px;
	width: 68px;
	height: 9px;
	z-index: 30;
	text-align: center;
}

#TwoTabTab2label
{
	position: absolute;
	left: 82px;
	top: 306px;
	width: 68px;
	height: 9px;
	z-index: 31;
	text-align: center;
}

/* 'FourTabTab' are styles for divs which display 
   the labels of the 4-tab pages on the bottom of the page.
   'long' refers to the current tab label, 
   'short' refers to the inactive hidden tabs labels*/
#FourTabTab1long, .PrevText{
	position: absolute;
	left: 17px;
	top: 306px;
	width: 80px;
	height: 9px;
	z-index: 40;
}
#FourTabTab2long{
	position: absolute;
	left: 35px;
	top: 306px;
	width: 80px;
	height: 9px;
	z-index: 40;
}
#FourTabTab3long{
	position: absolute;
	left: 52px;
	top: 306px;
	width: 80px;
	height: 9px;
	z-index: 40;
}
#FourTabTab4long, .NextText{
	position: absolute;
	left: 68px;
	top: 306px;
	width: 80px;
	height: 9px;
	z-index: 43;
}
.NextText{
	left: 120px;
}
#FourTabTab1short{
	position: absolute;
	left: 17px;
	top: 306px;
	width: 9px;
	height: 9px;
	z-index: 40;
}
#FourTabTab4short{
	position: absolute;
	left: 137px;
	top: 306px;
	width: 9px;
	height: 9px;
	z-index: 43;
}

/* 'tab' part of the following style names refers to the part of the screen 
   delimited by the background 11-key-high tab image.
   All of the 'tab' styles are used for positioning elements in the top part 
   of the 11-key-high tab next to SCREENKEYS 1,2,3*/
#tabTitle{
	position: absolute;
	left: 7px;
	top: 49px;
	width: 156px;
	height: 15px;
	z-index: 44;
}
#tabDescription, .tabDescription{
	position: absolute;
	left: 7px;
	top: 70px;
	width: 156px;
	height: 38px;
	z-index: 44;
	overflow: hidden;
}
#tabHeaderImage{
	position: absolute;
	left: 3;
	top: 45px;
	z-index: 7;
}

/*This style is for a div which displays phone extension. 
  The div is positioned next to the logo in the right side of the screen.*/
#Room{
	position: absolute;
	left: 99px;
	top: 13px;
	width: 60px;
	height: 7px;
	text-align: right;
	z-index: 498;
}

/*=== Telephony div styles =======================================================*/
.TelephonyT{
	position: absolute;
	left: 3000px;
	top: 0px;
	visibility: visible;
	z-index: 500;
}
.PK1LargeT, .PK2LargeT, .PK3LargeT, .PK12LargeT, .PK13LargeT, .PK14LargeT, .PK15LargeT{
	text-decoration: none;
	color: #000000;
	position: absolute;
	left: -1px;
	width: 162px;
	z-index: 20;
}
.PK12LargeT, .PK13LargeT, .PK14LargeT, .PK15LargeT{
	text-align: right;
}
.PK1LargeT, .PK12LargeT{
	top: 48px;
}
.PK2LargeT, .PK13LargeT{
	top: 72px;
}
.PK3LargeT, .PK14LargeT{
	top: 96px;
}
.PK15LargeT{
	top: 122px;
}
#TimeDisplayT, #DateDisplayT, .TextDisplayT{
	text-decoration: none;
	color: #000000;
	text-align: left;
	position: absolute;
	left: 83px;
	top: 0px;
	width: 87px;
	height: 12px;
	z-index: 998;
}
#TimeDisplayT{
	left: 20px;
	width: 60px;
	text-align: right;
}
.TextDisplayT{
	left: 0px;
	top: 15px;
	width: 600px;
}