/*
For each field in lpcttButtonStateControlsList you must define 4 classes,
each class defines how the field is displayed when the dynamic button have 
the specified status which is one of: "Availaable", "Busy", "Offline", "Alternate". 
The class name is the field name followed by the status,
for example when the field name is lpcttDiv we have 4 classes:
lpcttDivAvailable, lpcttDivBusy, lpcttDivOffline, lpcttDivAlternate.

In the example we use relative position for the parent div because we want
that all the controls in the div will be relative to the div and when we use
static position for the div they will be relative to the window.
Absolute position may be used for the div too.
*/

#lpcttDiv {
	display: none;
}
#lpcttDiv input, #livePersonDiv input {border: 1px solid #dedede}


.lpcttDivDefault {
	position: relative;
	width: 385px;
	height: 160px;
	background-image: url("/web/common/all_languages/all_regions/images/bundle-sales-voice/en-loading.gif");
}
.lpcttDivAlternate {
	position: relative;
	width: 385px;
	height: 160px;
	background-image: url("/web/common/all_languages/all_regions/images/bundle-sales-voice/en-error.gif");
}

.lpcttDivAvailable {
	position: relative;
/* 	width: 385px;
	height: 160px;
	background-image: url("/web/common/all_languages/all_regions/images/bundle-sales-voice/en-reponline.gif");*/
}

.lpcttDivOffline, .lpcttDivBusy {
	position: relative;
	width: 385px;
	height: 160px;
	background-image: url("/web/common/all_languages/all_regions/images/bundle-sales-voice/en-repoffline.gif");
}
.lpcttDivDefault a.closeWindow,
.lpcttDivOffline a.closeWindow,
.lpcttDivAvailable a.closeWindow,
.lpcttDivBusy a.closeWindow{
	line-height: .9em;
	display: block;
	position: absolute;
	top: 10px;
	right: 14px;
	padding: 0 3px 1px;
	border: 1px solid #000;
}
.lpcttButtonDefault, .lpcttButtonAlternate {
	visibility: hidden;
}
.lpcttButtonAvailable {
	position: absolute;
	left: 245px;
	bottom: 16px;
	width: 88px;
	height: 25px;
	background-image: url("/web/common/all_languages/all_regions/images/bundle-sales-voice/reponline-en.gif");
}
.lpcttButtonOffline,.lpcttButtonBusy {
	position: absolute;
	left: 245px;
	top: 118px;
	width: 1px;
	height: 1px;
	background-image: url("/web/common/all_languages/all_regions/images/bundle-sales-voice/transparent.gif");
}

.lpcttTwoStepsDefault, .lpcttTwoStepsAlternate {
	visibility: hidden;
}
.lpcttTwoStepsAvailable, .lpcttTwoStepsBusy, .lpcttTwoStepsOffline {
	visibility: visible;
	white-space: nowrap;
	position: absolute;
	left: 7px;
	bottom: 20px;
	width: 130px;
}

/* If you have more than one field for entering phone number */
.lpcttPhoneNumber1Default, .lpcttPhoneNumber1Alternate, .lpcttPhoneNumber1Busy, .lpcttPhoneNumber1Offline {
	visibility: hidden;
}
.lpcttPhoneNumber1Available {
	visibility: visible;
	position: absolute;
	left: 113px;
	bottom: 20px;
	width: 30px;line-height:1.3em;
}
.lpcttPhoneNumber2Default, .lpcttPhoneNumber2Alternate, .lpcttPhoneNumber2Busy, .lpcttPhoneNumber2Offline{
	visibility: hidden;
}
.lpcttPhoneNumber2Available {
	visibility: visible;
	position: absolute;
	left: 153px;
	bottom: 20px;
	width: 30px;line-height:1.3em;
}
.lpcttPhoneNumber3Default, .lpcttPhoneNumber3Alternate, .lpcttPhoneNumber3Busy, .lpcttPhoneNumber3Offline {
	visibility: hidden;
}
.lpcttPhoneNumber3Available {
	visibility: visible;
	position: absolute;
	left: 193px;
	bottom: 20px;
	width: 40px;line-height:1.3em;
}

/* If you have only one field for phone number */
.lpcttPhoneNumberDefault, .lpcttPhoneNumberAlternate  {
	visibility: hidden;
}
.lpcttPhoneNumberAvailable, .lpcttPhoneNumberBusy, .lpcttPhoneNumberOffline {
	visibility: visible;
	position: absolute;
	left: 7px;
	top: 100px;
	width: 80px;
}

/* If you have Extension */
.lpcttExtensionLabelDefault, .lpcttExtensionLabelAlternate {
	visibility: hidden;
}
.lpcttExtensionLabelAvailable, .lpcttExtensionLabelBusy, .lpcttExtensionLabelOffline {
	visibility: visible;
	position: absolute;
	left: 90px;
	top: 100px;
	width: 40px;
}
.lpcttExtensionDefault, .lpcttExtensionAlternate {
	visibility: hidden;
}
.lpcttExtensionAvailable, .lpcttExtensionBusy, .lpcttExtensionOffline {
	visibility: visible;
	position: absolute;
	left: 115px;
	top: 100px;
	width: 35px;
}

#lpcttQueueStatus {
    position: absolute;
    top: 70px;
}

#lpcttSkill {
    position: absolute;
    top: 70px;
    left: 110px;
}




.livePersonAvailable {
	position: relative;
	width: 739px;
	height: auto;
}
.livePersonTop {
	background: url(/web/common/all_languages/all_regions/images/backgrounds/popup_top.png) repeat-y left top;
	width: 739px; height: 25px;
	float: left;
}
.livePersonCenter {
	background: url(/web/common/all_languages/all_regions/images/backgrounds/popup_center.png) repeat-y left top;
	width: 707px;
	padding: 0 20px 0 12px;
	float: left;
}
.livePersonBottom {
	background: url(/web/common/all_languages/all_regions/images/backgrounds/popup_bottom.png) no-repeat left bottom;
	width: 739px; height: 39px;
	float: left;
}
.livePersonAvailable img.logo{
	padding: 5px 20px;
}
.livePersonAvailable img.bg_livePerson{
	padding: 5px 20px;
	position: absolute;
	right: -1px;
	top: 80px;
}

.livePersonDefault p.close,
.livePersonOffline p.close,
.livePersonAvailable p.close,
.livePersonBusy p.close{
	position: absolute;
	top: 20px;
	right: 25px;
}
h1#livePerson {
	text-indent: -20000px;
	width: 289px;
	height: 75px;
	margin-top: 20px;
	background: url("/web/common/en/all_regions/images/titles/t_youCanHaveItSooner.gif") no-repeat 100px bottom;
	padding-left: 100px;
}

h2#introducing {
	text-indent: -20000px;
	width: 214px;
	height: 12px;
	margin-top: 20px;
	background: url("/web/common/en/all_regions/images/titles/st_youCanHaveItSooner.gif") no-repeat 102px top;
	padding-left: 102px;
}

#livePersonDiv .secondPart{
	background: url("/web/common/all_languages/all_regions/images/backgrounds/bg_popupTalkToUs.gif") repeat-x left top;
	width: 100%;
	height: auto;
	margin-top: 35px;
	float: left;
}
#livePersonDiv .secondPart p{
	padding: 10px 0 5px 100px;
}
#livePersonDiv .secondPart ul{
	padding: 0 0 10px 115px;
}

#livePersonDiv form {
	background: url("/web/common/all_languages/all_regions/images/backgrounds/woman_talk.jpg") no-repeat left bottom;
	width: 439px;
	height: auto;
	padding: 20px 0 60px 100px;
	margin-top: -20px;
	float: left;
	position: relative;
}
#livePersonDiv form.none {
	background: none !important;
}
#livePersonDiv .secondPart form h3{
	padding: 10px 0 10px 0;
	color: #666;
	font-size: 1em !important;
}
#livePersonDiv .secondPart form p{
	padding: 0 0 10px 0;
}
#livePersonDiv .secondPart form .lpcttPhoneNumber1Available {
	left: 100px;
	bottom: 40px;
}
#livePersonDiv  .secondPart form .lpcttPhoneNumber2Available {
	left: 135px;
	bottom: 40px;
}
#livePersonDiv  .secondPart form .lpcttPhoneNumber3Available {
	left: 170px;
	bottom: 40px;
}
#livePersonDiv  .secondPart form .lpcttButtonAvailable {
	left: 225px;
	bottom: 36px;
}