/** 

CSS Notes: 

top | right | bottom | left

margin: 0 0 0 0; 
padding: 0 0 0 0; 

**/

/** A lil' reset **/
:focus { outline: 0; }
::-moz-focus-inner { border: 0; }

.body
{
	background: url(images/chatroom_bg.png) repeat-x #86a6d4;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	margin: 2px;
	padding: 0;
}

/*
* containers 
*
*/

.mainContainer 
{
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	background: url(images/maincontainer_bg.png) repeat-x #ececec;
	border: 1px solid #385583;
	height: 100%;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 100%;
} 

.topContainer 
{ 
	margin: 0 0 0 0; 
	padding: 0 0 0 0; 
	border: 0px solid #84B2DE; 
	top: 5px;
	left: 5px;
	height: 70px;
	position:absolute;
	overflow: auto;
}

.chatContainer 
{ 
	background-color: #fff;
	background-position: center center;
	background-repeat: no-repeat;
	border-color: #b3b3b3 #c1d6eb #c1d6eb #b3b3b3;
	border-width: 1px;
	border-style: solid;
	left: 5px;
	margin: 0 0 0 0;
	overflow: auto;
	padding: 0 0 0 0;
	position: absolute;
	top: 80px;
	word-wrap: break-word;
}

.userContainer 
{ 
	background-color: #fff;
	border-color: #b3b3b3 #c1d6eb #c1d6eb #b3b3b3;
	border-width: 1px;
	border-style: solid;
	overflow-x: hidden;
	overflow-y: auto;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	position: absolute;
	right: 5px;
	top: 106px;
}

.advertContainer 
{ 
	margin: 0 0 0 0; 
	padding: 0 0 0 0;  
	right: 5px;
	top: 5px;
	height: 65px;
	width: 475px;
	position:absolute;
}

.logoContainer 
{ 
	background-image: url(images/logo.png);
	background-repeat: no-repeat;
	width: 384px;
	height: 50px;
	left: 16px;
	position: absolute;
	top: 18px;
} 

.optionsContainer 
{ 
	bottom: 15px;
	height: 120px;
	left: 5px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	position: absolute;
} 

/*
* webcam window
*
*/

.webcamTab
{
	position: absolute;
	margin: 0 0 0 0; 
	padding: 0 0 0 0; 
	height: 30px;
	width: 220px;
}

.webcamTitle
{
	margin: 0 0 0 0; 
	padding: 5px 0px 2px 0px; 
	height: 24px;
	width: 173px;
	background-image: url('../../plugins/webcams/images/tab.gif');
	background-repeat: no-repeat;
}

.webcamContainer
{
	padding: 5px 5px 5px 5px;
	border: 1px solid #84B2DE;
	background-color: #FFFFFF; 
	overflow: hidden; 
	height: 100%; 
	width: 100%; 
	min-height:165px;
	min-width:220px;
}

.selectSize
{
	height: 20px;
	width: 100px;
}

.selectSizeDiv
{
	padding: 2px 2px 2px 2px;
	height: 20px;
	width: 154px;
	background-color: #EDF1FA;
	border: 1px solid #84B2DE; 
	border-top: none;
}

/*
* options 
*
*/

.optionsSelectStatus
{
	bottom: -4px;
	color: #666;
	font-size: 11px;
	font-weight: bold;
	height: 20px;
	left: 5px;
	position: absolute;
	text-shadow: 0 1px 0 #fff;
	width: 400px;
}

.optionsIcons
{
	bottom: 82px;
	height: 30px;
	left: 5px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	position: absolute;
	width: 100%;
}

.optionsBar
{
	background-color: #fff;
	border-color: #b3b3b3 #c1d6eb #c1d6eb #b3b3b3;
	border-width: 1px;
	border-style: solid;
	bottom: 25px;
	height: 50px;
	left: 0px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	position: absolute;
	width: 100%;
}

.optionsSend
{
	bottom: 25px !important;
	height: 50px !important;
}

.optionsLogout, .optionsSend
{
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	background: url(images/button.png) repeat-x #eaeaea;
	border: 1px solid #ccc;
	bottom: 85px;
	color: #666;
	cursor: pointer;
	font: 12px Tahoma, Geneva, sans-serif;
	height: 30px;
	overflow: hidden;
	position: absolute;
	right: 5px;
	text-shadow: 0 1px 0 #fff;
	width: 80px;
}

.optionsLogout:hover, .optionsSend:hover
{
	background: #f7f7f7;
	border-color: #aaa;
}

/*
* icons 
*
*/

.iconSmilies, .iconRingbell, .iconStyle,
.iconAvatar, .iconSounds, .iconRubber,
.iconEdit, .iconTranscripts, .iconHelp
{
	background-repeat: no-repeat;
	background-position: center;
	height: 24px;
	width: 24px;
	margin: 0 5px;
	float: left;
	cursor:pointer;
}

.iconSmilies { background-image: url(images/icons/smilies.png); margin-left: 0; }

.iconRingbell { background-image: url(images/icons/ringbell.png); }

.iconStyle { background-image: url(images/icons/styles.png); }

.iconAvatar { background-image: url(images/icons/avatar.png); }

.iconSounds { background-image: url(images/icons/sounds.png); }

.iconRubber { background-image: url(images/icons/eraser.png); }

.iconEdit { background-image: url(images/icons/edit.png); }

.iconTranscripts { background-image: url(images/icons/history.png); }

.iconHelp { background-image: url(images/icons/help.png); }

.iconeCredits
{
	background-image: url(../../images/menu/timer.gif);
	background-repeat: no-repeat;
	height: 18px;
	width: 18px;
	padding-top: 2px;
	padding-left: 20px;
}

.iconGames
{
	background-image: url(../../plugins/games/games.gif);
	background-repeat: no-repeat;
	height: 24px;
	width: 24px;
	padding-left: 5px;
	float: left;
	cursor:pointer;
}

.iconShare
{
	background-image: url(../../avatars/share.gif);
	background-repeat: no-repeat;
	height: 24px;
	width: 24px;
	padding-left: 5px;
	float: left;
	cursor:pointer;
}

.iconCopyright
{
	background-image: url(../../images/copyright.gif);
	background-repeat: no-repeat;
	height: 24px;
	width: 24px;
	padding-left: 5px;
	float: left;
	cursor:pointer;
}

/*
* private windows 
*
*/

.pWin
{
	position: absolute;
	left: 180px;
	top: 180px;
}

.pChatWin
{
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	background: url(../../images/private.jpg) no-repeat center center #fff;
	border: 1px solid #ccc;
	height: 300px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	position: absolute;
	width: 400px;
}

.ptitle
{
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
	background-color: #f7f7f7 !important;
	border-bottom: 1px solid #ccc;
	height: 20px;
	margin: 0 0 0 0;
	padding: 2px 0 2px 0;
	width: 100%;
}

.pcontent
{
	margin: 0 0 0 0; 
	padding: 2px 2px 2px 2px;
	height: 210px;
	overflow: auto;
	word-wrap:break-word; 
}

.psendbox
{
	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
	background-color: #f7f7f7;
	bottom: 0;
	height: 30px;
	margin: 0 0 0 0;
	padding: 2px 2px 2px 2px;
	position: absolute;
	width: 396px;
}

.pmenuBar
{
	background-color: #f7f7f7;
	border-top: 1px solid #ccc;
	bottom: 30px;
	height: 26px;
	margin: 0 0 0 0;
	padding: 4px 2px 2px 2px;
	position: absolute;
	width: 396px;
}

.poptionsSend
{
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	background: url(images/button.png) repeat-x #eaeaea;
	border: 1px solid #ccc;
	bottom: 4px;
	color: #666;
	cursor: pointer;
	font: 12px Tahoma, Geneva, sans-serif;
	height: 29px;
	overflow: hidden;
	position: absolute;
	right: 5px;
	text-shadow: 0 1px 0 #fff;
	width: 50px;
}
.poptionsSend:hover {
	background: #f7f7f7;
	border-color: #aaa;
}

.poptionsBar
{
	background-color: #fff;
	border-color: #b3b3b3 #c1d6eb #c1d6eb #b3b3b3;
	border-style: solid;
	border-width: 1px;
	bottom: 4px;
	height: 24px;
	left: 4px;
	margin: 0 0 0 0;
	padding: 0 2px 2px 2px;
	position: absolute;
	width: 330px;
}

/*
* room select 
*
*/

.roomIcon 
{ 
	right: 210px;
	top: 76px;
	position:absolute;
	cursor: pointer;
} 

.roomSelect 
{ 
	border-color: #b3b3b3 #c1d6eb #c1d6eb #b3b3b3;
	border-style: solid;
	border-width: 1px;
	font: 12px Tahoma, Geneva, sans-serif;
	padding: 2px 1px;
	position: absolute;
	right: 5px;
	top: 80px;
	width: 200px;
}

.roomCreate 
{ 
	margin: 0 0 0 0; 
	padding: 2px 2px 2px 2px; 
	background-color: #EDF1FA;
	border: 1px solid #84B2DE; 
	right: 5px;
	top: 80px;
	height: auto;
	width: 200px;
	position:absolute;
	visibility: hidden;
	z-index: 100;
}

/*
* userlist 
*
*/

.roomheader
{
	background-color: #f3f3f3;
	border: 1px solid #fff;
	color: #888;
	cursor: pointer;
	font-size: 11px;
	font-weight: bold;
	height: 20px;
	padding: 4px 4px 0;
	text-shadow: 0 1px 0 #fff;
}

.usercount
{
	color: #999999;
}

.userlist
{
	height: 24px;
	padding: 0px 0px 0px 4px; 
	cursor: pointer;
}

/*
* user info options
*
*/

.userInfo
{
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	background-color: #fff;
	border: 1px solid #ccc;
	height: auto;
	left: 3px;
	padding: 0 0 10px;
	position: absolute;
	width: 200px;
}

.userInfoTitle
{
	-moz-border-radius: 10px 10px 0 0;
	-webkit-border-radius: 10px 10px 0 0;
	border-radius: 10px 10px 0 0;
	background-color: #f3f3f3;
	color: #888;
	font-size: 13px;
	height: 22px;
	padding: 3px 0 0 5px;
	text-shadow: 0 1px 0 #fff;
}

.userInfoOptions
{
	padding: 2px 2px 2px 2px; 
}

/*
* div windows
*
*/

.titleWin
{
	background-color:#EDF1FA;
}

.smiliesWin, .avatarsWin, .sFXWin, .colorsWin,
.fontfamilyWin, .fontsizeWin, .editWin
{
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
}

.smiliesWin
{
	position:absolute;
	bottom:140px;
	left:10px;
	width:auto;
	height:auto;
	cursor:pointer;
	padding: 1px 1px 0 1px; 
	border: 1px solid #ccc;
	background-color:#FFFFFF;
	visibility: hidden;
}

.avatarsWin
{
	position:absolute;
	bottom:140px;
	left:80px;
	width:auto;
	height:auto;
	cursor:pointer;
	padding: 1px 1px 0 1px; 
	border: 1px solid #ccc;
	background-color:#FFFFFF;
	visibility: hidden;
}

.sFXWin
{
	position:absolute;
	bottom:140px;
	left:130px;
	width:160px;
	height:200px;
	cursor:pointer;
	padding: 1px 1px 0 1px; 
	border: 1px solid #ccc;
	background-color:#FFFFFF;
	visibility: hidden;
	overflow-y: scroll;
}

.colorsWin
{
	position:absolute;
	bottom:140px;
	left:47px;
	width:auto;
	height:auto;
	cursor:pointer;
	padding: 1px 1px 3px 1px; 
	border: 1px solid #ccc;
	background-color:#FFFFFF;
	visibility: hidden;
	overflow-y: none;
}

.fontfamilyWin
{
	position:absolute;
	bottom:140px;
	left:150px;
	width:auto;
	height:auto;
	cursor:pointer;
	padding: 1px 1px 2px 1px; 
	border: 1px solid #ccc;
	background-color:#FFFFFF;
	visibility: hidden;
	overflow-y: none;
}

.fontsizeWin
{
	position:absolute;
	bottom:140px;
	left:253px;
	width:auto;
	height:auto;
	cursor:pointer;
	padding: 1px 1px 0 1px; 
	border: 1px solid #ccc;
	background-color:#FFFFFF;
	visibility: hidden;
	overflow-y: none;
}

.editWin
{
	position:absolute;
	bottom:140px;
	left:180px;
	width:auto;
	height:auto;
	padding: 1px 1px 0 1px; 
	border: 1px solid #ccc;
	background-color:#FFFFFF;
	visibility: hidden;
}

/*
* chat messages 
*
*/

.welcomeMessage 
{ 
	background-color: #f7f7f7;
	border-bottom: 1px solid #eee;
	height: auto;
	padding: 2px;
} 

.chatMessage
{
	padding: 2px 2px 2px 2px;
	height: auto;
}

/*
* mouse over
*
*/

.highliteOn, .highliteOff
{
	margin-bottom: 1px;
	padding: 2px 0;
}

.highliteOn
{
	border-top: 1px solid #F0F0F0;
	border-bottom: 1px solid #F0F0F0;
	background-color: #f7f7f7;
}

.highliteOff
{
	border-top: 1px solid #F5F5F5;
	border-bottom: 1px solid #F5F5F5;
	background-color: #FFFFFF;
}

.highliteOn img, .highliteOff img { padding-left: 5px; }
.highliteOn span, .highliteOff span { padding-left: 4px !important; }

/*
* info boxes
*
*/

.oInfo
{
	/** do not edit **/
	height: 1px;
	position: absolute;
	text-align: center;
	top: 0;
	width: 99%;
	z-index: 100;
	visibility: hidden;
}

.innerInfo
{
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	background-color: #fff;
	border: 1px solid #ccc;
	margin: 0 auto;
	overflow: auto;
	position: relative;
	visibility: hidden;
}

/*
* div window buttons
*
*/

.button
{
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	background: url(images/button.png) repeat-x #eaeaea;
	border: 1px solid #ccc;
	cursor: pointer;
	font: 12px Tahoma, Geneva, sans-serif;
	height: 30px;
	overflow: hidden;
	text-shadow: 0 1px 0 #fff;
}

.button:hover
{
	background: #f7f7f7;
	border-color: #aaa;
}

/*
* captcha box
*
*/

.captcha
{
	color: #000000;
	background-color: #CCCCCC;
	border: 1px solid #84B2DE;
	padding: 2px;
}

/*
* whisper box
*
*/

.whisper
{
	background-color: #FFFFFF;
	border-color: #b3b3b3 #c1d6eb #c1d6eb #b3b3b3;
	border-width: 1px;
	border-style: solid;
	height: 14px;
	padding: 1px;
	width: 130px;
}

/** fix Iframe Transcript */
iframe#viewTranscripts {
	top: 90px !important;
}