#divChatBody
{
    position: absolute;
    display: block;
	  background-color: #000066;
    width: 400px;
    height: 345px;
    border: 1px solid #0060c5;
    padding: 5px;
	  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#0065CA', EndColorStr='#000066');
    background-image: -moz-linear-gradient(top, #0065CA, #000066);
    background-image: -ms-linear-gradient(top, #0065CA, #000066);
	  background: -webkit-gradient(linear, left top, left bottom, from(#0065CA), to(#000066));
}

#divChatImage
{
	position: absolute;
	left: 399px; 
	top: -5px;
	width: 55px;
	height: 126px;
	background-color: transparent;
	background-image: url(../images/versaChat/chatnow.png);
	background-position: top;
	background-repeat: no-repeat;
}

#divBanner
{
	position: absolute; 
	left: 8px; 
	top: 310px; 
	width: 406px; 
	height: 30px; 
  z-index: 4000;
	padding: 6px 0 0 6px;
	background-color: transparent;
	background-position: left;
}

#divBusy
{
	position: absolute; 
	display: none; 
	left: 0;
	top: 0;	
  margin: 3px;
	padding: 106px 170px 106px 170px; 
	background-color: #FFFFFF; 
	border: 1px solid #cdcdcd;
	font-family: Segoe UI, Verdana, Arial, Tahoma;
	font-size: 8pt;
	font-style: italic;
	font-weight: normal;
	line-height: 10pt;	
	color: #000000;
}

#divControls
{
	position: absolute; 
	overflow: hidden; 
	left: 370px; 
	top: 6px; 
	width: 22px; 
	height: 301px; 
	background-color: #FFFFFF;
	border: 1px solid #FFFFFF;
	border-left: 1px solid #f0f0f0;
	filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#FFFFFF', EndColorStr='#E3EEFB', gradientType='1');
  background-image: -moz-linear-gradient(left, #FFFFFF, #E3EEFB);
  background-image: -ms-linear-gradient(left, #FFFFFF, #E3EEFB);
	background: -webkit-gradient(linear, left center, right center, from(#FFFFFF), to(#E3EEFB));
}

#divConversation
{
	position: relative;
  width: 365px;
  height: 278px;
  margin: 1px 0 0 0;
  padding: 4px;
  border: 1px solid #FFFFFF;
  background-color: #FFFFFF;
  overflow: auto;
}

#divMessage
{
	position: relative;
	float: left; 
	width: 316px; 
	height: 21px; 
	overflow-x: hidden; 
	overflow-y: auto; 
	margin: 0; 
	padding: 3px; 
	background-color: #FFFFFF;
  white-space: pre;
}

#imgSend {
    float: right; 
    width: 39px; 
    margin: 5px 10px 0 3px; 
    background-color: transparent; 
    cursor: pointer;
}

#divFooter
{
	display: block; 
	width: 373px; 
	overflow: hidden; 
	margin: 0; 
	border: 1px solid #FFFFFF; 
	border-top: 1px solid #f0f0f0;
	background-color: #FFFFFF;
}

.heading1, .heading2, .heading3, .tableheading3
{
	font-family: Segoe UI, Verdana, Arial, Tahoma;
	font-size: 14pt;
	font-style: normal;
	font-weight: normal;
	line-height: 12pt;	
	color: #000000;
}

.heading2
{
	font-size: 12pt;
	line-height: 14pt;
}

.heading3
{
	font-size: 10pt;
	line-height: 12pt;
}

.tableheading3
{
	font-size: 9pt;
	line-height: 11pt;
	font-weight: bold;
	background-color: #003467;
	color: #FFFFFF;
	padding: 4px;
	white-space: nowrap;
}

.chatStyle1, .chatStyle1a, .chatStyle2, .chatNotify1, .chatBold1, .chatBold2, .chatBold3, .chatComp1, .messageStyle, .chatDateTime1, input, select, textarea
{
	font-family: Segoe UI, Verdana, Arial, Tahoma;
	font-size: 9pt;
	font-style: normal;
	font-weight: normal;
	line-height: 11pt;	
	color: #000000;
  white-space: pre-wrap;
}

input, select, textarea
{
	font-family: Segoe UI, Verdana, Arial, Tahoma;
	font-size: 9pt;
	font-style: normal;
	font-weight: normal;
	line-height: 11pt;
	height:20px;	
	color: #000000;
  	white-space: pre-wrap;
}

.xmasStyle {
	font-family: Segoe UI, Verdana, Arial, Tahoma;
	font-size: 9pt;
	font-style: normal;
	font-weight: bold;
	line-height: 11pt;	
	color: rgb(27,250,244);
  white-space: pre-wrap;
}

.speechBubble1 
{
	position: relative;
	width: 92%;
	background-color: #f8f6c9;
	border: 1px solid #cdcdcd;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 1px 1px 4px #aaa;
	-moz-box-shadow: 1px 1px 4px #aaa;
	box-shadow: 1px 1px 4px #aaa;
	font-family: Segoe UI, Verdana, Arial, Tahoma;
	font-size: 9pt;
	font-style: normal;
	font-weight: normal;
	line-height: 11pt;	
	color: #000000;
  white-space: pre-wrap;
  padding: 8px;
  margin: 10px 0 20px 10px;
}

.speechBubble1:before
{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 30px;
	top: -20px;
	border: 10px solid;
  border-right: 1px solid;
	border-color: transparent transparent #666 transparent;
}

.speechBubble1:after
{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 30px;
	top: -19px;
	border: 10px solid;
  border-right: 1px solid;
	border-color: transparent transparent #f8f6c9 transparent;
}

.speechBubble2 
{
	position: relative;
	width: 92%;
	background-color: #c9e7f1;
	border: 1px solid #abd2e0;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 1px 1px 4px #aaa;
	-moz-box-shadow: 1px 1px 4px #aaa;
	box-shadow: 1px 1px 4px #aaa;

    text-align: right;
	font-family: Segoe UI, Verdana, Arial, Tahoma;
	font-size: 9pt;
	font-style: normal;
	font-weight: normal;
	line-height: 11pt;	
	color: #000000;

    white-space: pre-wrap;
    padding: 8px;
    margin: 10px 0 20px 10px;

}

.speechBubble2:before
{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	right: 30px;
	top: -20px;
	border: 10px solid;
    	border-right: 1px solid;
	border-color: transparent transparent #abd2e0 transparent;
}

.speechBubble2:after
{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	right: 30px;
	top: -19px;
	border: 10px solid;
    	border-right: 1px solid;
	border-color: transparent transparent #c9e7f1 transparent;
}

.chatStyle1a
{
	color: #ffffff;
}

a.hideChat
{
	color: #ffffff;
}

.chatStyleAlignLeft{
	font-family: Segoe UI, Verdana, Arial, Tahoma;
	font-weight: normal;
	line-height: 11pt;	

    white-space: pre-wrap;

	float: left;
	color: #808080;
    font-style: italic;
    font-size: 8pt;
}

.chatStyleAlignRight{
	font-family: Segoe UI, Verdana, Arial, Tahoma;
	font-weight: normal;
	line-height: 11pt;	

    white-space: pre-wrap;

	float: right;
	color: #808080;
    font-style: italic;
    font-size: 8pt;
}

.chatStyle1 {
    color: #808080;
    font-style: italic;
    font-size: 8pt;
}

.chatDateTime1 {
    color: #CDCDCD;
    font-style: italic;
    margin-left: 4px;
    font-size: 7pt;
}

.chatStyle2
{
	font-size: 8pt;
	line-height: 10pt;
}

.chatNotify1 {
	  font-style: italic;
    color: #039020;
    font-size: 8pt;
}

.chatBold1 
{
	font-weight: bold;
}

.chatBold2 
{
	font-weight: bold;
	color: #FFFFFF;
}

.chatBold3 
{
	font-weight: bold;
	font-style: italic;
}

.chatComp1
{
	font-weight: normal;
	font-style: italic;
	color: #FFFFFF;
}

.messageStyle {
	color: #ffffff;
}

#divChatMask {
	z-index: 4000; 
	position: absolute; 
	background-color: #cdcdcd; 
	left: 0; 
	top: 0;
    opacity: 0.7;
    filter: alpha(opacity=70);	
}

/* Colour Palette */
.colourPaletteContainer
{
	z-index: 1000;
	position: absolute;
	left: 5px;
	top: 109px;
    width: 145px;
    height: 125px;
    background-color: #f9f8f7;    
    border-top: solid 1px #808080;
    border-right: solid 1px #808080;
    border-bottom: solid 1px #808080;
    border-left: solid 1px #808080;	
}

.colourPaletteBody 
{
	  position: relative;
    width: 140px;
    height: 90px;
    background-color: #f9f8f7;
    border-top: none 1px #808080;
    border-right: none 1px #808080;
    border-bottom: none 1px #808080;
    border-left: none 1px #808080;
}

.colourCellRow
{
    position: relative;
    display: block;
    width: 100%;
    height: 20px;
    float:left;
    background-color: #f9f8f7;
}

.colourCell 
{
    position: relative;
    float: left;
    width: 12px;
    height: 12px;	
    border-top: solid 1px #808080;
    border-right: solid 1px #808080;
    border-bottom: solid 1px #808080;
    border-left: solid 1px #808080;
    margin: 3px 3px 3px 3px;	
}


.divFixedCol1
{
    position:relative;
    width:90px;
    height: 24px;
    padding: 4px 3px 2px 3px;
    float:left;        
    white-space: nowrap;
}                  

.divFixedCol2
{
    position:relative;
    width: 270px;
    height: 24px;
    padding: 3px;
    float:right;
    white-space: nowrap;
}  
 

/* CSS for phone
--------------------------------------------------------*/
@media (max-width: 480px) {
	#divChatBody
{
  display: none;
}

#divChatImage
{
	display: none;
}

#divBanner
{
	display: none;
}

#divBusy
{
	display: none;
}

#divControls
{
	display: none;
}

#divConversation
{
	display: none;
}

#divMessage
{
	display: none;
}
}