/* CSS Document */

body{
	margin:0px;
	font-family:Arial;
	font-size:14px;
	
	background-color:#0e91a1;
	/*background-image:url(/images/chat_background.png);*/
}

/* mozilla need this for main cell height */
#wrapper{
	width:100%;
	height:100%;
}

#left_cell{
	background-color:#075a72;
	color:#CCC;
	width:150px;
	display:block;
	height:calc(100% - 20px);
	float:left;
	overflow-x:hidden;
	overflow-y:auto;
	padding:10px;
}

#main_cell{
	display:block;
	
	width:calc(100% - 190px);
	height:calc(100% - 100px);
	float:right;
	overflow-y:auto;
	padding:10px;
	padding-bottom:0px;
}

#bottom_cell{
	display:block;
	width:calc(100% - 190px);
	height:50px;
	float:right;
	padding:10px;
	border-top:1px dotted #CCC;
}

#bottom_cell_row{
	background-color:#FFF;
	padding:10px;
	height:50px;
	border-radius:4px;
	box-shadow: 1px 1px 1px #555;
}

/* 
this is an empty container in top of the chat lines, 
we will increase it to move chat lines lower when there are just 1-2 
*/
#comments_pusher{
	display:block;
	width:100%;
	height:0px;
}

#comments_container{
	float:left;
}

.comment{
	padding:10px;
	margin:0px;
	margin-bottom:10px;
	background-color:#FFF;
	border-radius:4px;
	box-shadow: 1px 1px 1px #555;
	min-height:50px;
	display:block;
	position:relative;
	
	float:left;
	width:calc(100% - 20px);
}

/* this is a container that prevents text from going underneath the avatar */
.comment_container{
	display:block;
	width:calc(100% - 60px);
	float:left;
	margin-bottom:0px;
}

.comment_text{
	font-family:monospace, Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New";
}

.comment_text:after{
	/* make some space for date 1 Jan 1970 00:00:00 */
	content:".. .. .... ........";
	visibility:hidden;
}

.comment_date{
	font-family:monospace, Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New";
	color:#CCC;
	line-height:1em;

    position: absolute;
    bottom: 10px;
    right: 10px;
}

img.comment_avatar{
	/*border-radius:4px;*/
	position:relative;
	display:inline;
	margin-right:10px;
}
.comment_name{
	font-weight:bold;
	margin-right:10px;
}



.comment_external_image{
	position:relative;
	display:inline-block;
	margin-top:5px;
	vertical-align:text-bottom;
}

.comment_external_image img{
	border:1px solid #CCC; 
	padding:4px; 
	background-color:#FFF;
	display:inline-block;
	width:calc(100% - 10px);
	max-width:300px;
	max-height:300px;
}



.channel_button{
	
	padding:0px;
	display:inline-block;
	width:150px;
	margin-bottom:10px;
	float:left;

}

.channel_button_label{
	background-color:#FFF;
	display:block;
	width:130px;
	float:left;
	padding:10px;
	line-height:17px;
	
	border-radius:4px;
	cursor:pointer;
	color:#CCC;
	box-shadow: 1px 1px 1px #555;
	
	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
}

.channel_button_label_active{
	border-bottom:4px solid #F00;
	color:#000;
	padding-bottom:6px;
	font-weight:bold;
}

.channel_button_label_user{
	background-image:url(/images/avatar_25x25.jpg);
	background-repeat:no-repeat;
	background-size: 25px 25px;
	background-position:6px 6px;
	padding-left:35px;
	width:105px;
}



/* the delete link on chat buttons that show on rollover */
.channel_button_delete{
	padding:10px;
	background-color:#F00;
	/* hidden by default, then block */
	display:none;
	float:right;
	height:17px;
	margin-top:-37px;
	border-top-right-radius:4px;
	border-bottom-right-radius:4px;
	/*border-left:1px solid #BF0005;*/
	cursor:pointer;
}




img.delete_comment_button{
	padding:5px; 
	float:right; 
	cursor:pointer; 
	margin:-8px; 
	/*display:none;*/
}

#sound_button_on{
	background-image:url(/images/sound.png); 
	background-repeat:no-repeat;
	display:none;
	width:16px;
	height:16px;
	cursor:pointer;
	margin-left:10px;
}

#sound_button_off{
	background-image:url(/images/sound.png); 
	background-repeat:no-repeat;
	display:none;
	width:16px;
	height:16px;
	background-position:0px -20px;
	cursor:pointer;
	margin-left:10px;
}

.join_button{
	background-image:url(/images/plus_28x28.png); 
	background-repeat:no-repeat; 
	display:inline-block;
	cursor:pointer; 
	padding:5px; 
	padding-left:35px; 
	font-size:16px; 
	color:#83adb9;
	margin-bottom:10px;
}
.join_button:hover{
	color:#FFF;
}

/* this is the submit button on the place-to-join box */
#join_submit_button{
	width:100%; 
	padding:10px; 
	margin-top:1.5em;
}

a.logout_button{
	display:inline-block;
	width:31px;
	height:30px;
	background-image:url(/images/power_button_31x30.png);
	background-repeat:no-repeat;
	float:right;
}
a.logout_button:hover{
	background-position:0px -30px;
}


#comment_box{
	width:calc(100% - 150px);
	height:50px; 
	padding:5px; 
	float:left;
}

#comment_box_disabled{
	width:calc(100% - 150px);
	height:40px; 
	padding:5px; 
	float:left;
		  
	background-color:#EBEBEB; 
	border:1px solid #CCC; 
	font-family:monospace;
}