/*Chat Header*/
/***************************************************/
.chatHeaderStyle
{
    width:100%;
    height:100%;
    background-image:url(Images/HeaderBanner.png);
    background-repeat:no-repeat;
    width: 600px;
}
.headerRowStyle
{
    height: 150px;
}
.cornerLogoImageStyle
{
    cursor:default; 
    width:250px;
    float: left;
    clear:both;
    background-image:url(Images/place-logo-here-option1.png);
    background-repeat:no-repeat;
}
.headerBannerImageStyle
{
    cursor: default; 
    width:435px;
}
/***************************************************/

/*Chat body*/
/***************************************************/
.chatBodyMainTableStyle
{
    width: 600px;
    min-height:452px;
    height:auto;
    height:452px;

    /*By default the chat body is disabled*/
    background-image:url(Images/ChatBodyDisabledBackGround2.gif);
    background-repeat:repeat-y;
}

.chatBodyDivStyle
{
    width:100%;
    height:100%;
}

.chatBodyTableStyle
{
    width:100%;
    height:100%;
}

.chatBodyHeaderStyle
{
	/* Top bar image*/
    height: 25px;
	background-image: url(Images/ChatBodyHeader.gif);
    background-repeat:repeat-x;
    color:Black;
	font-family: Arial, Verdana, Microsoft Sans Serif;
    font-size: 12px;
    font-weight: bold;
	text-align: left;
	padding-left: 5px;
	
}

.chatBodyHeaderStyleImg
{
    cursor:pointer;
    margin-right:5px;
}

.chatBodyContentStyle
{
    /*Background image once chat is enabled(after login)*/
    height: 380px;
    background-image:url(Images/ChatBodyEnabledBackGround.gif);    
    background-repeat:repeat-y;
}

.chatBodyContentTableStyle
{
    width:100%;
    height:100%;
}

.chatContentMessageListStyle
{
    /*Chat message list area*/
    width:100%;
    height:300px;
}

.chatMessageListDivStyle
{
    /*Chat message list area*/
    width: 570px; 
    height:90%;
    background-color: White; 
    overflow-y: scroll;
    margin-left:15px;
    margin-top:10px;
    border-style:solid;
    border-color:Gray;
    border-width:1px;
    
}

.chatMessageListDivStyle Table
{
    width: 550px;
    
}

.chatContentToolbarStyle
{
    /*Chat tool bar(where the tool buttons are located - end chat is located within this toolbar too)*/
    width:100%;
    height:30px;   
    padding-left:20px;
    padding-right:20px;
    background-image:url(Images/ToolBar.gif);
    background-repeat:repeat-x;
}

.chatContentToolbarStyle table
{
    width:100%;
    height:100%;
}

.chatContentToolbarButtonsStyle
{
    width: 100%;
    text-align:left;
}


#saveTranscriptButton {
    margin-top: 14px;
    margin-bottom: 8px;
}

#leaveChatButton {
    margin-top: 14px;
    margin-bottom: 8px;
    margin-left: 6px;
}

.chatContentSendCellStyle
{ 
    /* Send text part (where the typing text area and the send button are located)*/
    width:100%;
    height:50px;
    padding-left:15px;
    padding-top:5px;
}

.chatContentSendCellStyle Table
{
    width:98%;
    height:100%;
}

.chatSendMessageDivStyle
{
    /*Send text typing area*/
    width: 100%; 
    height:85%;
    background-color: White;
    text-align:center;
    vertical-align:middle;
    
    border-style:solid;
    border-color:Gray;
    border-width:1px;
}

.chatMessageListDivStyle {
    background-color: #ffffff;

}

.chatSendMessageDivStyle textarea
{
    /*Send textarea*/
    width: 98%;
    height:100%;  
}

.sendImgCellStyle
{
    /*Send Button Area*/
    width: 60px; 
    text-align: center;
}

/* Chat Footer*/
/***************************************************/
.chatBodyFooterCenterStyle
{
    /*Chat Body footer bar*/
    height: 25px;
    width: 100%;
    background-image:url(Images/ChatBodyFooter.gif);
    background-repeat:repeat-x;
}
/***************************************************/

/*Message bar (where the "user is typing message" displays)*/
.chatMessageBarStyle
{
    margin-left:15px;
    margin-bottom:10px;
    width: 570px;
    height:100%;
}

.chatMessageBarStyle table
{
    width:100%;
    height:100%;
}

.messageBarTextCellStyle
{
    width:100%;
    height:20px;
    background-image:url(Images/backgroundMessageBar.png);
    background-repeat:repeat-x;
}

.messageBarTextCellStyle span
{
    width:100%;
    height:100%;
    font-family: Arial, Verdana, Microsoft Sans Serif;
    font-size:12px;
    font-weight:bold;
    color:#2F566D;
}
/***************************************************/

/***************************************************/
/*User Credentials popup (Log in component)*/
.userCredentialsDivStyle
{
    position:absolute;
    width:270px;
    height:150px;
    z-index:2;
    top:30%;
    left:42%;
}

.userCredentialsDivStyle Table
{
    width:100%;
    height:100%;
    font-family:Arial;
    font-size:12px;
}

.userCredentialsHeaderStyle
{
    width:auto;
    height:35px;
    text-align:center;
    background-image:url(Images/UserCredentialPopUpHeader.gif);    
    background-repeat:repeat-x;
}

.userCredentialsHeaderStyle span
{
    color:White;
    font-family: Arial, Verdana, Microsoft Sans Serif;
    font-size:12px;
    font-weight:bold;
}

.userCredentialsLeftCornerHeaderStyle
{
    width:20px;
    height:25px;
    background-image:url(Images/UserCredentialPopUpLeftCornerHeader.gif);    
    background-repeat:no-repeat;
}

.userCredentialsRightCornerHeaderStyle
{
    width:20px;
    height:25px;
    background-image:url(Images/UserCredentialPopUpRightCornerHeader.gif);    
    background-repeat:no-repeat;
}

.credentialBodyTableStyle
{
    width:100%;
    background-image:url(Images/UserCredentialPopUpBackground.gif);
    background-repeat:repeat-y;
}

.credentialBodyTableStyle td
{
    padding-left:5px;
}

.credentialBodyTableStyle span
{
    font-family: Arial, Verdana, Microsoft Sans Serif;
    font-size:12px;
    font-weight:bold;
    color:#2F566D;
}

.credentialBodyTableStyle input
{
    width:180px;
}

.userCredentialsFooterStyle
{
    width:100%;
}

.userCredentialsFooterStyle td
{
    width:100%;
    height:20px;
    text-align:center;
}

.userCredentialsFooterStyle img
{
    cursor:pointer;
    height:auto;
}

.credentialWarningMessageStyle
{
    width:100%;
    height:10px;
}

.credentialWarningMessageStyle td
{
    width:100%;
    text-align:center;
}

.credentialWarningMessageStyle span
{
    width:100%;
    font-family: Arial, Verdana, Microsoft Sans Serif;
    font-size:11px;   
    color:Red;
    text-align:center;
}
/***************************************************/

/***************************************************/
/* application disabled/locked screen*/
#transparentDiv
{
    min-height:600px;
    min-width:650px;
    width: 100%; 
    height: 100%;
    background-color:#a7c4d6;
    position:absolute; 
    left:0px; 
    top:0px;    
    filter:alpha(opacity=60); 
    -moz-opacity: 0.6; 
    opacity: 0.6;
    z-index:1;
}
/***************************************************/

/***************************************************/
/*Enabled and Disabled control*/
.controlEnabled
{
    background-color:White;
}

.controlDisabled
{
    background-color:#D8D8D8;
}

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

/*Message list content styles (user messages text, system messages...)*/
/***************************************************/
.userNameMessageTextStyle
{
    font-family:Verdana;
    color:#157DEC;
    font-size:8pt;
}

.userNameMessageMargingTextStyle
{
    font-family:Verdana;
    color:#157DEC;
    font-size:8pt;
    margin-left:15px;
}
.messageTextStyle
{
    font-family:Arial;
    color:Black;
    font-size:10pt;
}
#messageListTable tr {
    margin-bottom: 30px;
}
.messageDateTimeStyle
{
    font-family:Verdana;
    text-align:right;
    color:#157DEC;
    font-size:7.5pt;
    font-style:italic;
    width:80px;
}

.systemUserNameMessageTextStyle
{
    font-family:Verdana;
    color:Red;
    font-size:8pt;
    font-style:italic;
}

.systemMessageTextStyle
{
    font-family:Verdana;
    color:Gray;
    font-size:9pt;
    font-style:italic;
}

.myRowStyle
{
    background-color:#E3ECF1; 
}
/***************************************************/