.FF { clear:both; height:1px; font-size:1px; line-height:1px; }

#Chat 
{
    font-size:80%;
    font-family:Verdana;
}

#Chat 
{
    width:740px;
    margin:auto;
    background-color:#ccc;
}

#Chat ul 
{
    margin:0;
    padding:0;
    list-style-type:none;
}

#Status ul li, #Tabs ul li, #RoomTabs ul li
{
    float:left;
}

#Status, #Tabs, #Panels, #RoomTabs, #Main, #Copyright
{   
    clear:left;
}


/* Status */

#Status 
{
  height:20px;
  border-bottom:1px solid #aaa;
  margin-bottom:5px;   
}

#Status ul li 
{
    line-height:20px;
}

#Status ul li div 
{
    float:left;
}

#Status div.StatusItemHeader 
{
    padding:0 10px 0 5px; 
}

#Status div.StatusItemContent 
{
    padding:0 5px 0 5px; 
    font-weight:bold;
} 

/* Tabs */

#Tabs ul li 
{

}

#Tabs div
{
   border:1px solid #888;
   border-bottom:0;    
   margin-left:10px;
   padding:0 5px;
   line-height:20px;
   cursor:pointer;
   cursor:hand;
}

#Tabs div.Selected 
{
    z-index:2;
    background-color:#fff;
    position:relative;
    top:1px;
    
}

#Panels 
{
 border:1px solid #888;   
 background-color:#fff;
 height:460px;
}

#SidePanels 
{
 width:200px;
 height:460px;
 border-left:1px solid #888;   
 float:right;
 overflow-y:scroll;
 background-color:#eee;
}


#ContentPanels 
{
    width:537px;
    height:460px;
    background-color:#fff;
    position:relative;
}

.ContentPanelContainer ul 
{
    margin-top:10px;
}
.ContentPanelContainer ul li 
{
    margin:0 0 10px 30px;
    list-style-type:square;
}


#ChatPanel .DialogContainer
{
    position:absolute;
    top:0;
    left:0;
    height:440px;
    width:537px;
    overflow-y:scroll;
}


#ChatPanel .Command 
{
    position:absolute;
    bottom:0;
    left:0;
    width:537px;
    height:20px;
}

#ChatPanel .Command input 
{
    border:1px solid #000;
    vertical-align:middle;
    width:452px;
    height:16px;
}

#ChatPanel .Command button 
{
    font-size:13px;
    border:1px solid #000;
    vertical-align:middle;
    float:right;
    width:55px;
    cursor:pointer;
    cursor:hand;
}
#ChatPanel .ChatPopup 
{
    width:18px;
    height:20px;
    float:left;
    margin:0 1px;
    background-position:center center;
    background-repeat:no-repeat;
    cursor:hand;
    cursor:pointer;
}    

#ChatPanel .Colours 
{
    background-image:url(../images/icons/colours_small.png);
}

#ChatPanel .Emoticons
{
    background-image:url(../images/icons/emoticons_small.png);
}


#Panels .ContentPanelContainer 
{
    height:460px;
    overflow-x:hidden;
    overflow-y:auto;   
}

.Dialog 
{
    margin-top:200px;
    width:500px;
}

.Dialog .DialogItem, .Dialog .UserLeave, .Dialog .UserJoin
{
 width:500px;
 border-top:1px dotted #ccc;
 margin-bottom:5px;   
}

.Dialog .DialogItem .Timestamp 
{
    color:#ccc;
    margin-right:5px;   
}

.Dialog .DialogItem .LocalUser, .Dialog .DialogItem .RemoteUser 
{
    font-weight:bold;
    margin-right:5px;
} 

.Dialog .DialogItem .LocalUser 
{
    color:#4564af;   
}

.Dialog .DialogItem .InlineEmoticon
{
    vertical-align:middle;
}

.Dialog .UserLeave, .Dialog .UserJoin 
{
    color:#aaa;
    background-position:0px 0px;
    background-repeat:no-repeat;
    font-style:italic;
    padding-left:20px;
}

.Dialog .UserJoin 
{
    background-image:url(../images/icons/join.png);
}

.Dialog .UserLeave 
{
        background-image:url(../images/icons/leave.png);
}

#RoomTabs 
{
    min-height:30px;
    _height:30px;
}

.RoomTabItems 
{
    white-space:nowrap;
}

#RoomTabs .RoomTabItems li
{
    padding:2px;
    margin-right:5px;
    float:left;
    border:1px solid #000;
    cursor:pointer;
    cursor:hand;
}

#RoomTabs .RoomTabItems .Selected 
{   
    background-color:#fff;
}



#RoomTabs .RoomTabItems .RoomTabItem img 
{
    margin-left:5px;
    vertical-align:middle;
}


#Emoticons  
{
    position:absolute;
    bottom:20px;
    left:0px;
    display:none;
    width:200px;
    z-index:20px;
}

#Emoticons ul  
{
    list-style-type:none;
}

#Emoticons ul li 
{
    border:1px solid #aaa;    
    padding:2px;
    margin:2px;
    list-style-type:none;
    float:left;
    background-color:#eee;
    cursor:pointer;
    cursor:hand;
    opacity:0.75;
}

#Emoticons ul li:hover {
    opacity:1;
}

#Emoticons ul li img 
{
    vertical-align:middle;
}

/* -- */
#SidePanels p 
{
    margin:0 5px 10px 5px;
}
#SidePanels p.SidePanelHeader
{
    margin-top:10px;
    font-weight:bold;
}


#SidePanels .SidePanelContainer 
{
    display:none;
}

#SidePanels .SidePanelContainer .DialogSidePanelHeader 
{
    padding-bottom:5px;
    margin-bottom:5px;
    border-bottom:1px dotted #888;      
}

#SidePanels .SidePanelContainer .DialogSidePanelHeader span 
{
    display:block;
    font-weight:bold;
}



/* -- */


.ErrorMessage, .PingMessage, .ConnectionInformation, .GenericInformation, .ConnectionInformationSuccess, .ConnectionInformationFail 
{
    padding:5px;
    padding-left:20px;
    padding-top:0;
    margin-bottom:5px;    
    border-bottom:1px dotted #ccc; 
    background-position:0 1px;
    background-repeat:no-repeat;
}

.GenericInformation 
{
    color:blue;
    background-image:url(../images/icons/system.png);  
}

.ConnectionInformation 
{
    color:green;
    background-image:url(../images/icons/info.png); 
}

.ConnectionInformationSuccess
{
    color:green;
    background-image:url(../images/icons/success.png); 
}

.ErrorMessage, .ConnectionInformationFail
{
    color:Red;  
    background-image:url(../images/icons/fail.png); 
}

.PingMessage 
{
    color:#ccc;
    font-style:italic;  
    background-image:url(../images/icons/ping.png);
}

#RoomList .RoomItem 
{
    margin:5px;
    display:block;
    border:1px dotted #ccc;
    padding:5px;    
}
#RoomList .RoomItem .JoinRoomTrigger, #RoomList .RoomItem .LeaveRoomTrigger 
{
    float:right;   
}

#RoomList .RoomItem .LeaveRoomTrigger 
{
     float:right;
     display:none;
}

#RoomList .UserJoined .JoinRoomTrigger 
{
    display:none;   
}

#RoomList .UserJoined .LeaveRoomTrigger 
{
    display:block;   
}



#FriendList .FriendItem 
{
    margin:5px;
    display:block;
    border:1px dotted #ccc;
    padding:5px;    
}
#FriendList .online 
{
    border:1px dotted green;
}



#FriendList .FriendItem .FriendChatTrigger 
{
    float:right;   
}

#UserList .UserItem 
{
    margin:5px;
    display:block;
    border:1px dotted #ccc;
    padding:5px;    
}
#UserList .UserItem .UserChatTrigger 
{
    float:right;   
}



#Copyright 
{
    padding:5px;
    border-top:1px solid #888;
    margin-top:5px;
}