@import url('/includes/css/primary-layout.css');
@import url('/includes/css/chatControls.css');

.chatRoom-messageContainer { display: none; clear: both; }
.chatRoom-privateMessageInline { font-style: italic; color: #456C89; }
.chatRoom-helpMenu { position: relative; box-sizing: border-box; width: 45%; margin: 10px; padding: 10px; border: #0033CC solid 2px; background-color: #C9DBF1; color: #333333 }
.helpMenuButton { position: absolute; top: 0px; right: +5px; }
.chatRoom-messageSender { font-weight: bold; }
.chatRoom-messageTime { color: #666666; font-style: italic; }
.chatRoom-actionSender { font-style: italic; color: #0099FF; }
.chatRoom-actionContent { font-style: italic; }
.chatRoom-italics { font-style: italic; }
.chatRoom-bold { font-weight: bold; }
.chatRoom-strike { text-decoration: line-through; }
.chatRoom-genericInfo { font-weight: bold; color: #626262; }
.chatRoom-userAway { font-style: italic; color: #525252; opacity:0.6; filter:alpha(opacity=60); }
.chatRoom-code { font-family: Consolas, monaco, monospace; }

.chatRoom-WelcomeMessage { font-size: 20px; font-style: italic; }
.chatRoom-SystemMessage { color: #273F6B; font-style: italic; }
.chatRoom-ErrorMessage { color: #FF0000; background-color: #FFD2D2; }
.chatRoom-infoText { color: #FF0000; font-weight: bold; }

.chatRoom-userListItem { display: none; clear: both; padding-left: 2px; padding-right: 2px; padding-top: 5px; padding-bottom: 5px;}

.chatRoom-userListItem-myName { color: #00A414; background-color: #CCFFD2; }
.chatRoom-userListItem-guest { color: #333333; }
.chatRoom-userListItem-peon { color: #333333; }
.chatRoom-userListItem-super { color: #FF0080; font-weight: bolder; }
.chatRoom-userListItem-admin { color: #FF0000; font-weight: bolder; }
.chatRoom-userListItem-bot { color: #007E95; font-weight: bold; }
.chatRoom-userListItem-staff { color: #0066FF; font-weight: bold; }
.chatRoom-userListItem-junior { color: #FF6600; }

.chatRoom-userListItem-guest-selected { background-color: #999999; }
.chatRoom-userListItem-peon-selected { background-color: #D8CBB4; }
.chatRoom-userListItem-super-selected { background-color: #FFAAD5; }
.chatRoom-userListItem-admin-selected { background-color: #FFB7B9; }
.chatRoom-userListItem-bot-selected { background-color: #272727; }
.chatRoom-userListItem-staff-selected { background-color: #8CC6FF; }
.chatRoom-userListItem-junior-selected { background-color: #FFC68C; }

.chatRoom-userInfo { color: #208FFF; font-style: italic; }
.chatRoom-userActions { padding-left: 3px; font-weight: bold; font-family: verdana; color: #000099; cursor: pointer; }
.chatRoom-userAvatar { width: 100px; height: 100px; border: #00366C 1px solid; margin-top: 5px; }
.chatRoom-userIsTyping { vertical-align: +2px; display: none; }
.chatRoom-highlightMyName { color: #FF6600; background-color: #FFFF99; }

.chatRoom-listLogin { font-weight: bold; color: #D6A229; }
.chatRoom-listUser { font-weight: bold; color: #FF0000; }
.chatRoom-listStaff { font-weight: bold; color: #1D67E2; }

.system-clientInputMessage { width: 100%; height: 100%; resize: none; border: 0; box-sizing: border-box; background-color: inherit; }
.system-clientInputSend { width: 100%; height: 100%; box-sizing: border-box; text-align: center; border: #000000 2px solid; float: left; cursor: pointer; }

#lightBox { 
	position: absolute; width: 100%; height: 100%; background-color: #000000; opacity: 0.7; 
	z-index: 1000; top: 0; left: 0; color: #FFFFFF; font-weight: bold; display: none; text-align: center;
}

#lightBoxAck { padding: 10px; background-color: #333333; border: #000000 solid 2px; width: auto; height: auto; margin-top: 10px; text-align: center; cursor: pointer; }
#lightBoxAck:hover { background-color: #222D39; }

#lightBoxInner {
	padding: 10px; background-color: #003399; padding: 10px; position: absolute; 
	width: 400px; border: #FFFFFF solid 2px; z-index: 1001; color: #FEFEFE; text-align: center;
}

#clientSendMessage {
    color: #FFFFFF;
    background-color: #0052B7;
    padding: 0;
	box-sizing: border-box;
    text-align: center;
    vertical-align: middle;
    font-size: 16px;
    font-weight: bold;
    box-shadow:
        3px 3px 3px 0 #374760;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
	-moz-box-pack:center;
	-moz-box-align:center;
}
#clientSendMessage:hover {
    background-color: #0073FF;
}
#clientSendMessage:active {
    background-color: #0058C4;
    box-shadow: 1px 1px 5px 0 #000000;
    -webkit-box-shadow: 1px 1px 5px 0 #000000;    
    -moz-box-shadow: 1px 1px 5px 0 #000000;
    margin-top: 2px;
    margin-left: 2px;
}	

* {
    box-sizing: border-box;
    box-sizing: -webkit-border-box;
    box-sizing: -moz-border-box;
    -moz-box-sizing: border-box;
	box-pack: -webkit-box-pack;
	box-pack: -moz-box-pack;
	box-pack: -ms-flex-pack;
	box-align: -ms-flex-align;
	box-align: -moz-box-align;
	box-align: -webkit-box-align;
}

@font-face
{
	font-family: OpenDyslexic;
	src: url(/includes/fonts/OpenDyslexic-Regular.otf);
}
@font-face
{
	font-family: OpenDyslexic;
	src: url(/includes/fonts/OpenDyslexic-Bold.otf);
	font-weight: bold;
}
@font-face
{
	font-family: OpenDyslexic;
	src: url(/includes/fonts/OpenDyslexic-Italic.otf);
	font-style: italic;
}
@font-face
{
	font-family: OpenDyslexic;
	src: url(/includes/fonts/OpenDyslexic-BoldItalic.otf);
	font-style: italic;	
	font-weight: bold;
}