/*
 * @package AJAX_Chat
 * @author Sebastian Tschan
 * @copyright (c) Sebastian Tschan
 * @license GNU Affero General Public License
 * @link https://blueimp.net/ajax/
 * 
 * Color palette inspired by Simple Machines Forum style "SMF Default Theme - Core":
 * http://www.simplemachines.org/
 */


@import url('positions.css');
@import url('borders.css');
@import url('fonts.css');
@import url('misc.css');
@import url('print.css');


/*
 * Colors
 */


@media screen,projection,handheld {
	
	#loginContent {
		/*background-color:#E5E5E8;*/
		color:#000;
	}
	#loginContent h1 {
		color:#000;
	}
	#loginContent a {
		color:#000;
	}
	#loginContent input, #loginContent select {
		/*background-color:#FFF;*/
		color:#000;
	}
	#loginContent #loginFormContainer #loginButton {
		/*background-color:#F7F5F1;*/
		color:#000;
	}
	#loginContent #errorContainer {
		color:red;
	}
	
	#content {
		background-color:#f5f5f5;
		/*color:#000;*/
	}
	#content h1 {
		color:#000;
	}
	#content a {
		color:#000;
	}
	#content input, #content select, #content textarea {
		/*background-color:#FFF;*/
		color:#000;
	}
	#content #chatList, #content #onlineListContainer, #content #helpContainer, #content #settingsContainer, #content #bbCodeContainer, #content #colorCodesContainer, #content #emoticonsContainer {
		border-color:#ADADAD;
		/*background-color:#FFF;*/
	}
	.statusContainerOn {
		background-image: url('../img/loading.png');
	}
	.statusContainerOff {
		background-image: url('../img/loading-done.png');
	}
	.statusContainerAlert {
		background-image: url('../img/loading-trouble.png');
	}
	#content #bbCodeContainer input, #content #logoutButton, #content #submitButton {
		/*background-color:#F7F5F1;*/
		color:#000;
	}
	#content #colorCodesContainer a {
		border-color:black;
	}
	#content #optionsContainer input {
	    /*background-color:transparent;*/
	}
	#content #optionsContainer #helpButton {
	    background:url('../img/help.png') no-repeat;
	}
	#content #optionsContainer #settingsButton {
	    background:url('../img/settings.png') no-repeat;
	}
	#content #optionsContainer #onlineListButton {
	    background:url('../img/users.png') no-repeat;
	}
	#content #optionsContainer #audioButton {
	    background:url('../img/audio.png') no-repeat;
	}
	#content #optionsContainer #audioButton.off {
	    background:url('../img/audio-off.png') no-repeat;
	}
	#content #optionsContainer #autoScrollButton {
	    background:url('../img/autoscroll.png') no-repeat;
	}
	#content #optionsContainer #autoScrollButton.off {
	    background:url('../img/autoscroll-off.png') no-repeat;
	}
	#content .rowEven {
		/*background-color:#ECEDF3;*/
	}
	#content .rowOdd {
		/*background-color:#F6F6F6;*/
	}
	#content .guest {
		color:gray;
	}
	#content .user {
		color:#000;
	}
	#content .moderator {
		color:#0000FF;
	}
	#content .admin {
		color:#FF0000;
	}
	#content .chatBot {
		color:#476C8E;
	}
	#content #chatList .chatBotErrorMessage {
		color:red;
	}
	#content #chatList a {
		color:#476C8E;
	}
	#content #chatList .delete {
		background:url('../img/delete.png') no-repeat right;
	}
	#content #chatList .deleteSelected {
		border-color:red;
	}
	#content #onlineListContainer h3, #content #helpContainer h3, #content #settingsContainer h3 {
		/*background-color:#88A6C0;*/
		color:#FFF;
	}
	#content #settingsContainer #settingsList input.playback {
	    background:url('../img/playback.png') no-repeat;
	}
	
}

*{font-family: 'Raleway', sans-serif;}

body {margin:0px; padding:0px; }

#loginContent {
    background: #F3F3F3;
    font-size:0.8em;
    position:absolute;
    width:100%;
}
#chatList{
    background-color: #FFFFFF;
}
#loginContent #errorContainer {
    background: url("../img/errorChat.png") no-repeat scroll left top transparent;
    color: #A40C0C;
    font-size: 11px;
    font-weight:bold;
    margin-left: 295px;
    padding-left: 18px;
    width: 200px;
}

/*#loginContent h1{display:none;}*/

#loginContent a {text-decoration:none;}

#loginContent a:hover {text-decoration:underline;}

#loginContent #loginRegisteredUsers, #panelAdmin {font-size:1em; color:#888;}

#loginContent #copyright {display:none;}

#loginContent #loginFormContainer{
    border-radius: 0 0 8px 8px;
    border-top: 0;
    border: 2px solid #eee;
    padding: 10px 20px;
    width: auto;
    min-width: 220px;
    max-width: 300px;
    background: #fff;
    margin: auto;
}

#loginFormContainer label {color:#215A9A; font-weight:600;}

#loginFormContainer #userNameField, #loginFormContainer #passwordField, #loginFormContainer #languageSelection, #loginFormContainer #channelField {
	border:1px solid #ccc;
	width: 88%;
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 15px
}
#loginFormContainer #languageSelection, #loginFormContainer #channelField { width: 92%;}

#content h1 {display:none;}

#content h3 {font-size:1.0em;}

#content a {text-decoration:none; color:#393939;}

#content a:hover {text-decoration:underline;}

#content #copyright {display:none;}

#content #chatList span.dateTime {font-size:0.7em;}

#content #chatList span.guest {font-weight:bold;}

#content #chatList span.user {font-weight:bold;}

#content #chatList span.moderator {font-weight:bold;}

#content #chatList span.admin {font-weight:bold;}

#content #chatList span.chatBot {font-style:italic; font-size:12px;}

#content #chatList .chatBotMessage {font-style:normal;}

#content #chatList .chatBotErrorMessage {font-style:italic;}

#content #chatList .privmsg {font-style:italic;}

#content #chatList .action {font-style:italic;}

#content #chatList q {font-variant:small-caps;}

#content #chatList code {font-size:1.2em;}

#content #onlineListContainer #onlineList div {font-size:0.9em;}

#content #helpContainer #helpList td {font-size:0.9em;}

#content #helpContainer #helpList td.code {font-style:italic;}

#content #settingsContainer #settingsList td {font-size:0.9em;}


/* Chat interno */
	#content #onlineListContainer #onlineList {  background: #f5f5f5;}

	#logoutChannelContainer #channelSelection, #logoutChannelContainer #languageSelection{font-size:11px; border:1px solid #ccc; }
	

	#loginContent input, #loginContent select {
		background-color:#FFF;
		color:#333333;
	}

	

	#logoutChannelContainer{
		margin-bottom:10px;
	}
	
	#loginContent #loginFormContainer #loginButton {
		background-image: -moz-linear-gradient(center bottom , #009a3e 0%, #007e33 100%);
		background-color:#00aeef;
		color:#FFF;
		border: 0;
		margin-bottom: 10px;
		padding:6px 15px;
	}
	
	#logoutChannelContainer #logoutButton{
		background-image: -moz-linear-gradient(center bottom , #009a3e 0%, #007e33 100%);
		background-color:#ed2121;
		color:#FFF;
		border: 0;
		margin: 15px 15px 15px 0;
		padding:6px 12px;
	}
	
	
	#submitButtonContainer #submitButton{
		background-image: -moz-linear-gradient(center bottom , #009a3e 0%, #007e33 100%);
		background-color:#215a9a;
		color:#FFF;
		border: 0;
		padding: 4px 14px;
	}
	
	
	
	#content h1 {
		color:#333333;
	}

	#content input, #content select, #content textarea {
		background-color:#FFF;
		color:#333333;
	}
	#content #chatList, #content #onlineListContainer, #content #helpContainer, #content #settingsContainer, #content #bbCodeContainer, #content #colorCodesContainer, #content #emoticonsContainer {
		border-color:#ccc; margin-top: 10px;
	}
	
	#emoticonsContainer a {margin:0px 3px 0px 3px;}
	
	#emoticonsContainer a img {border:none;}
		
	.statusContainerOn {
		background-image: url('../img/loading.png');
	}
	.statusContainerOff {
		background-image: url('../img/loading-done.png');
	}
	.statusContainerAlert {
		background-image: url('../img/loading-trouble.png');
	}
	
	
	#inputFieldContainer textarea{font-size:12px;}
	
	
	#content #bbCodeContainer input {
		background: url(../img/btnCont.gif) left top repeat-x;
		color:#333333;
		padding-left:4px;
		padding-right:4px;
		border: 1px solid #bfc0c1;
		color:#403f3f;
		height:22px;
	}
	
	
	
	#content #colorCodesContainer a {
		border-color:black;
	}
	#content #optionsContainer input {
	    background-color:transparent;
	}
	#content #optionsContainer #helpButton {
	    background:url('../img/help.png') no-repeat;
	}
	#content #optionsContainer #settingsButton {
	    background:url('../img/settings.png') no-repeat;
	}
	#content #optionsContainer #onlineListButton {
	    background:url('../img/users.png') no-repeat;
	}
	#content #optionsContainer #audioButton {
	    background:url('../img/audio.png') no-repeat;
	}
	#content #optionsContainer #audioButton.off {
	    background:url('../img/audio-off.png') no-repeat;
	}
	#content #optionsContainer #autoScrollButton {
	    background:url('../img/autoscroll.png') no-repeat;
	}
	#content #optionsContainer #autoScrollButton.off {
	    background:url('../img/autoscroll-off.png') no-repeat;
	}
	#content .rowEven {
		padding:3px;
		margin-bottom:6px;
	}
	#content .rowOdd {
		padding:3px;
		margin-bottom:3px;
	}
	#content .guest {
		color:#386ca6;
		font-weight:bold;
	}
	#content .user {
		color:#333333;
	}
	#content .moderator {
		color:#00AA00;
	}
	#content .admin {
		color:#AA0000;
	}
	#content .chatBot {
		color:#215A9A;
		
	}
	
	#content .chatBotMessage{
		color:#a3a3a3;
	}
	
	#content #chatList .chatBotErrorMessage {
		color:red;
	}
	#content #chatList a {
		color:#D31141;
	}
	#content #chatList .delete {
		background:url('../img/delete.png') no-repeat right;
	}
	#content #chatList .deleteSelected {
		border-color:red;
	}
	#content #onlineListContainer h3, #content #helpContainer h3,  h3{color:#fff; margin-bottom: 5px; padding: 4px 10px; margin:0px; text-align:center;
	background:#00aeef;}
	
	
	#content #settingsContainer #settingsList input.playback {
	    background:url('../img/playback.png') no-repeat;
	}
	
	#onlineListContainer #onlineList ul {margin:0px; padding:0px; list-style:none;}
	
	#onlineListContainer #onlineList ul li{background: url(../img/vinnetaChat.gif) left 5px no-repeat; font-size:11px;}
	
	#onlineListContainer #onlineList ul li a{padding-left:16px; padding-bottom:2px; text-decoration:none;}
	
	#onlineListContainer #onlineList ul li a:hover{color:#215a9a;}
	

#loginContent #loginRegisteredUsers {
    padding-top:5px;
}


#content {
	position:absolute;
	width:100%;
	height:100%;
}


#content #logoutChannelContainer {
	position:absolute;
	top:15px;
}

#content #logoutChannelContainer label{color:#0c4da1; font-weight:bold; margin-left: 10px;}

#content #headlineContainer {
	height: 67px;
	background: url(../img/logoChat.png) no-repeat;
}

#content #chatList {
	position:absolute;
	left:20px;
	right:230px;
	bottom:150px;
	overflow:auto;
        height: 385px;
}
#content #inputFieldContainer {
	position:absolute;
	left:20px;
	right:20px;
	bottom:95px;
	padding-right:4px;
}
#content #submitButtonContainer {
	position:absolute;
	right:20px;
	bottom:60px;
}
#content #onlineListContainer {
	position:absolute;
	right:20px;
	width:200px;
	bottom:150px;
}
#content #helpContainer {
	position:absolute;
	right:20px;
	top:55px;
	width:360px;
	bottom:150px;
}
#content #settingsContainer {
	position:absolute;
	right:20px;
	top:55px;
	width:360px;
	bottom:150px;
}
#content #bbCodeContainer {
	position:absolute;
	left:20px;
	bottom:20px;
	padding:3px;
}
#content #emoticonsContainer {
	position:absolute;
	left:20px;
	bottom:57px;
	padding:3px;
}
#content #optionsContainer {
	position:absolute;
	right:20px;
	bottom:20px;
	padding:3px;
	padding-right:0px;
}

#content #colorCodesContainer a {
	display:block;
	float:left;
	width:20px;
	height:20px;
}
#content #optionsContainer input {
    vertical-align:middle;
}
#content #optionsContainer input.button {
    width:22px;
	height:22px;
}
#content #emoticonsContainer a {
	margin-left:1px;
	margin-right:1px;
}
#content #emoticonsContainer img {
	vertical-align:middle;
	margin-bottom:2px;
}


#content #chatList img {
	vertical-align:middle;
	margin-bottom:2px;
}
#content #chatList cite {
	margin-right:5px;
}
#content #chatList .bbCodeImage {
	vertical-align:top;
	overflow:auto;
	margin:5px;
}
#content #chatList .delete {
	display:block;
	float:right;
	width:10px;
	height:10px;
	margin-top:2px;
	padding-left:5px;
}
#content #inputFieldContainer #inputField {
	width:100%;
	height:40px;
}

#content #onlineListContainer #onlineList, #content #helpContainer #helpList, #content #settingsContainer #settingsList {
	position:absolute;
	left:0px;
	right:0px;
	top:25px;
	bottom:0px;
	overflow:auto;
}
#content #onlineListContainer #onlineList div {
	padding-left:10px;
	padding-top:2px;
	padding-right:10px;
	padding-bottom:2px;
	margin-bottom:3px;
}
#content #onlineListContainer #onlineList a {
	display:block;
}
#content #onlineListContainer #onlineList ul {
	margin-left:0px;
	margin-top:5px;
	margin-bottom:5px;
}
#content #helpContainer #helpList td, #content #settingsContainer #settingsList td {
	padding-left:10px;
	padding-top:4px;
	padding-right:10px;
	padding-bottom:4px;
	vertical-align:top;
}
#content #settingsContainer #settingsList td {
	vertical-align:middle;
}
#content #settingsContainer #settingsList td.setting {
	width:115px;
}
#content #settingsContainer #settingsList input.text {
	width:100px;
}
#content #settingsContainer #settingsList select.left {
	text-align:right;
}
#content #settingsContainer #settingsList input.button {
    width:22px;
	height:22px;
	vertical-align:middle;
	margin-bottom:2px;
}

/**Chat Texto**/
#loginHeadlineContainer .msgChat {
	width:500px;
	padding-left:280px;
	margin-top: -12px;
}
.msgChatLoggedIn {
	margin:5px 10px;
	background-color:#dedede;
	border-radius:3px;
	padding:0px 5px;
	font-weight:bold;
	color:#4e4e4e;
}

/**Mensaje Privado**/
.msgPrivateChat a{
	background-color:#0063af;
	border-radius:3px;
}
#content .msgPrivateChat a {
	color:#fff;
	font-weight:bold;
}

#content .msgPrivateChat a:hover {
	color:#69d2ff;
}

/**Nuevos estilos**/
#loginContent #loginFormContainer div {
    margin-bottom: 0;
}
#passwordRegisteredUsers {
	color: #888;
    padding: 9px;
    background: #F6F6F6;
    text-align: initial;
    font-weight: initial;
    width: auto;
    font-size: 1em;
    border: 1px solid #ccc;
    margin-bottom: 20px !important;
}
#loginContent #loginHeadlineContainer {
	width: 300px;
    margin: 30px auto 0;
    background: #215A9A;
    padding: 5px 20px;
    border-radius: 8px 8px 0 0;
    border: 2px solid #eee;
    border-bottom: 0;
}
#loginContent #loginHeadlineContainer h1 {
	color: #fff;
	font-size: 1.7em;
    text-align: center;
    font-family: 'Raleway', sans-serif;
}
@media screen and (max-width:430px) {
	#loginContent #loginHeadlineContainer { width: auto; }
	#loginContent #loginFormContainer {	width: 100%; }
}