/*
 * New Shoutbox CSS Design
 * -- Designed by: Karos (Jared Hussey)
 * -- Description:
 * The shoutbox is now a series of collapsable tabs that sit on the bottom of the window
 * the CSS stored here handles the styling and formatting of these "tabs."
 */
 
/* Main shoutbox format class */
#shoutbox_bar{
	width: auto;
	height: auto;
	position: fixed;
	bottom: 0px;
	z-index: 8;
	text-align: left;
	padding-left: 5px;
	overflow: visible;
}
.shoutbox{
	width: 250px;
	position: relative;
	background: url("../layouts/2/img/bg/alubgtile200pct.jpg");
	display: inline-block;
	text-align: center;
}

.shoutbox .collapser{
	cursor: pointer;
	background: rgba(255, 255, 255, 0.25);
}
.shoutbox .collapser:hover{
	background: rgba(255, 255, 255, 0.50);
}

.shoutbox .collapsable{
	display: none;
}

.shoutbox div.chatArea table{
	width: 100%;
	table-layout:fixed;
}
.shoutbox td{
    	word-wrap: break-word;
    	text-wrap: normal;
    	white-space: normal;
    	width: 100%
}

.shoutbox div.chatArea{
	overflow-y: auto;
	overflow-x: visible;
	
	height: 300px;
}
.shoutbox .chatArea td.uname {
  	padding: 0 2px 10px 0;
  	border-bottom: 1px dotted
}

@media (max-width: 700px) {
	.shoutbox{
		width: 150px;
	}
	.shoutbox div.chatArea{
		height: 100px;
	}
}