/*===================================================================================================
	Mitel-53xx.css was designed by InGenius Software. 
	For Support:  www.TelML.com/go/MitelTemplates
	More features:  www.TelML.com/Mitel
	Version:       1.0
	Compatibility: Mitel 5330, 5340

	PLEASE DO NOT CHANGE ANYTHING IN THIS FILE!
===================================================================================================*/
html,body {overflow-x:hidden;overflow-y:hidden;font-family: Arial; }
/*=== Styles for divs with 'dial', 'link' or 'close' image next to text ===========*/
.dialKeyLeft, .linkKeyLeft, .closeKeyLeft, .alertKeyLeft {
	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-left: 0;
	padding-right: 15;
	padding-top: 0;
	padding-bottom: 0;
}

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

.alertKeyLeft {
	background-image: url(../images/icon-alert.gif);
}

/*=== 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 {
	font-family: Mitel_53xx_Large_V2;
	font-size: 14px;
	text-decoration: none;
	color: #000000;
	position:absolute;
	left: 0px;
	width: 150px;
	z-index: 20;
}

/*=== Styles for positioning divs next to phone key on the right side ===============*/
.PK12Large, .PK13Large, .PK14Large, .PK15Large, .PK16Large, .PK17Large, 
.PK18Large, .PK19Large, .PK20Large, .PK21Large, .PK22Large {
	text-align: right;
	left: 10px;
}

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

/*=== Font Styles ===================================================================*/
.smallFont {
	font-size: 11px;
	font-family: Mitel_53xx_Small_V2;
	text-decoration: none;
	color: #000000;
    line-height: 125%;
}

.largeFont {
	font-size: 14px;
	font-family: Mitel_53xx_Large_V2;
	text-decoration: none;
	color: #000000;
	line-height: 14px;
}

/*=== Screen styles =================================================================*/
/* This is the style for positioning background images */
.border {
	position:absolute;
	width:160;
	height:320;
	left: 0px;
	top: 0px;
}

/*=== Styles for positioning navigation arrows and home icon ========================*/
.arrowleft {
	position:absolute;
	left: 0px;
	top: 309px;
	z-index:35;
}

.arrowright {
	position:absolute;
	left: 151px;
	top: 309px;
	z-index:35;
}

.home {
	position:absolute;
	left: 76px;
	top: 309px;
	z-index:35;
}
/*=== Hyperlinks styles =============================================================*/
a:link
{
	text-decoration: none;
	color: Black;
	border-style: none;
}

a:visited
{
	text-decoration: none;
	color: Black;
	border-style: none;
}

a.largeFont {
	font-size: 14px;
	font-family: Mitel_53xx_Large_V2;
	text-decoration: none;
	color: #000000;
	visibility: visible;
}

/*=== 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
{
	font-size: 14px;
	font-family: Mitel_53xx_Large_V2;
	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 {
	font-size: 14px;
	font-family: Mitel_53xx_Large_V2;
	text-decoration: none;
	color: #000000;
	position:absolute;
	left: 0px;
	top: 27px;
	width:63px;
	height:12px;
	z-index:498;
	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 {
	font-size: 14px;
	font-family: Mitel_53xx_Large_V2;
	text-decoration: none;
	color: #000000;
	position:absolute;
	left: 73px;
	top: 27px;
	width:87px;
	height:12px;
	z-index:498;
	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:20;
	left: 0;
	top: 0;
	visibility: visible;
}

#pageHeaderImage,#pageLogoImage
{
	position:absolute;
	left: 0px;
	top: 0px;
	width:160px;
	height:40px;
	z-index:20;
}

#pageDescription1 {
	position:absolute;
	left: 0;
	top: 21px;
	width:160;
	height:9;
	z-index:20;
}

#pageDescription2 {
	position:absolute;
	left: 0;
	top: 31px;
	width:160;
	height:9;
	z-index:20;
}

/* 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:20;
	text-align:center;
}

#TwoTabTab2label {
	position:absolute;
	left: 82px;
	top: 306px;
	width:68px;
	height:9px;
	z-index:20;
	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 {
	position:absolute;
	left: 17px;
	top: 306px;
	width:80px;
	height:9px;
	z-index:20;
}

#FourTabTab1short {
	position:absolute;
	left: 17px;
	top: 306px;
	width:9px;
	height:9px;
	z-index:20;
}

#FourTabTab4long {
	position:absolute;
	left: 68px;
	top: 306px;
	width:80px;
	height:9px;
	z-index:20;
}

#FourTabTab4short {
	position:absolute;
	left: 137px;
	top: 306px;
	width:9px;
	height:9px;
	z-index:20;
}

/* '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:148px;
	height:15px;
	z-index:20;
}

#tabDescription
{
	position:absolute;
	left: 7px;
	top: 70px;
	width:96px;
	height:38px;
	z-index:20;
}

#tabHeaderImage
{
	position:absolute;
	left: 3;
	top: 45px;
	z-index:20;
}

/*== See Handbook template =======================================================
 Handbook template has 'template-5330-2tab' or 'template-5330-card' backgrounds */

/* This is the style for div which displays short instructions phrase. 
   This div is positioned in the bottom part of the tab next to SCREENKEYS 10,11*/
#instructionsDiv {
	position:absolute;
	left: 9px;
	top: 263px;
	width:145px;
	height:10px;
	z-index:20;
}

/* 'card' part of the following style names refers to the part of the screen 
   delimited by the background 11-key-high card image.
   All of the 'card' styles are used for positioning elements in 
   the top and middle part of the 11-key-high card next to SCREENKEYS 1-9*/
#cardTitle {
	position:absolute;
	left: 9;
	top: 50px;
	width:147px;
	height:11px;
	z-index:20;
}

#cardDescription {
	position:absolute;
	left: 9;
	top: 74px;
	width:143px;
	height:59px;
	z-index:20;
}

#cardDescription2 {
	position:absolute;
	left: 9;
	top: 134px;
	width:143px;
	height:39px;
	z-index:20;
}

#cardImage {
	position:absolute;
	left: 2;
	top: 69px;
	width:156;
	height:191px;
	z-index:20;
}

/*== See Hospitality, Retail templates =======================================================
  Hospitality, Retail templates have 
  'template-5330-2tab-short' or 'template-5330-card-short' backgrounds */

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

/* 'tabShort' part of the following style names refers to the part of the screen 
   delimited by the background 10-key-high tab image 
   (short one key - the dedicated Line 1 key on top).
   All of the 'tabShort' styles are used for positioning elements in the top part 
   of the 10-key-high tab next to SCREENKEYS 2,3,4*/
#tabShortTitle
{
	position:absolute;
	left: 7px;
	top: 75px;
	width:86px;
	height:15px;
	z-index:20;
}

#tabShortDescription
{
	position:absolute;
	left: 7px;
	top: 97px;
	width:91px;
	height:38px;
	z-index:20;
}

#tabShortHeaderImage
{
	position:absolute;
	left: 3;
	top: 71px;
	z-index:20;
}

/* 'card' part of the following style names refers to the part of the screen 
   delimited by the background 10-key-high card image
   (short one key - the dedicated Line 1 key on top).
   All of the 'card' styles are used for positioning elements in 
   the top and middle part of the 10-key-high card next to SCREENKEYS 1-9*/
#cardShortTitle
{
	position:absolute;
	left: 7px;
	top: 75px;
	width:148px;
	height:15px;
	z-index:20;
}

#cardShortDescription
{
	position:absolute;
	left: 7px;
	top: 97px;
	width:147px;
	height:160px;
	z-index:20;
}

#cardShortImage
{
	position:absolute;
	left: 2px;
	top: 96px;
	z-index:20;
}