/** 

CSS Notes: 

top | right | bottom | left

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

**/

body
{
	overflow: auto;
}

.body
{
	margin: 0 0 0 0px; 
	padding: 0 0 0 0; 
	background-color: #E2E2E2;
	background-image:url('../../templates/default/images/background.jpg');	
	background-repeat:repeat-x;
	font-family: Verdana, Arial;
	font-size: 12px;
	font-style: normal;
}

/*
* containers 
*
*/

.mainContainer 
{ 
	margin: 0 0 0 0; 
	padding: 0 0 0 0; 
	border: 0px solid #EDF1FA;
	width: 100%; 
	height: 100%;
	position:absolute;
	overflow: hidden;			
} 

.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 
{ 
	margin: 0 0 0 0; 
	padding: 2px 2px 2px 2px;
	border: 1px solid #bbbbbb; 
	top: 80px;
	left: 5px;
	position:absolute;
	background-color: #FFFFFF;
	overflow-y: auto;
	overflow-x: auto;
	word-wrap:break-word;
	background-repeat:no-repeat;
	background-position:center center;
	
	-moz-border-radius: 8px;
	border-radius: 8px;	
}

.userContainer 
{ 
	margin: 0 0 0 0; 
	padding: 0 0 0 0; 
	border: 1px solid #bbbbbb; 
	top: 106px;
	right: 5px;
	position:absolute;
	background-color: #c8c8c8;
	overflow-y: auto;
	overflow-x: hidden;
	color: #FFFFFF;
	
	-moz-border-radius: 3px;
	border-radius: 3px;		
}

.adverContainer 
{ 
	margin: 0 0 0 0; 
	padding: 6px 0px 0 5px;  
	right: 5px;
	top: 0px;
	height: 65px;
	width: 475px;
	position:absolute;
	border: 1px solid #666666; 
	background-color: #999999; 
	visibility: hidden;
	
	-moz-border-radius: 0px 0px 8px 8px;		
	border-radius: 0px 0px 8px 8px;	
}

.logoContainer 
{ 
	margin: 0 0 0 0; 
	padding: 0 0 0 0; 
	border: 0px solid #84B2DE; 
	left: 5px;
	top: 6px;
	width: 450px;
	height: 71px;
	position:absolute;
	background-image: url('../../templates/default/images/logo.png');
	background-repeat: no-repeat;
} 

.optionsContainer 
{ 
	margin: 0 0 0 0; 
	padding: 0 0 0 0; 
	border: 1px solid #bbbbbb; 
	left: 5px;
	bottom: 5px;
	height: 120px;
	position:absolute;
	background-color: #c8c8c8;	
	-moz-border-radius: 8px;
	border-radius: 8px;		
} 

/*
* 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-color: #666666;		
	background-image:url('../../templates/default/images/rooms.jpg');	
	background-repeat: repeat-x;
	color: #FFFFFF;

	-moz-border-radius: 8px 8px 0px 0px;		
	border-radius: 8px 8px 0px 0px;		
}

.webcamContainer
{
	padding: 5px 5px 5px 5px;
	border: 1px solid #666666;
	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: #CCCCCC;
	border: 1px solid #666666; 
	border-top: none;
}

/*
* options 
*
*/

.optionsSelectStatus
{
	margin: 0 0 0 0; 
	padding: 0 0 0 0;
	left: 5px; 
	bottom: 2px;
	height: 20px;
	width: 400px;
	position:absolute;
}

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

.optionsBar
{
	margin: 0 0 0 0; 
	padding: 2px 2px 2px 2px; 
	border: 1px solid #666666; 
	left: 5px;
	bottom: 25px;
	height: 50px;
	width: 100%;
	position:absolute;
	background-color: #FFFFFF;
	
	-moz-border-radius: 8px;
	border-radius: 8px;	
}

.optionsSend
{
	margin: 0 0 0 0; 
	padding: 0 0 0 0; 
	border: 1px solid #666666; 
	right: 5px;
	bottom: 25px;
	height: 56px;
	width: 80px;
	position:absolute;
	background-color: #FFFFFF;
	cursor:pointer;

	font-weight: bold;
	color: #FFFFFF;
		
	background-image:url('../../templates/default/images/send.jpg');	
	background-repeat:repeat-x;		
	
	-moz-border-radius: 3px;
	border-radius: 3px;		
}

.optionsLogout
{
	margin: 0 0 0 0; 
	padding: 0 0 0 0; 
	border: 1px solid #666666; 
	right: 5px;
	bottom: 85px;
	height: 30px;
	width: 80px;
	position:absolute;
	background-color: #FFFFFF;
	cursor:pointer;	
	
	font-weight: bold;
	color: #FFFFFF;	
	
	background-image:url('../../templates/default/images/logout.jpg');	
	background-repeat:repeat-x;		
	
	-moz-border-radius: 3px;
	border-radius: 3px;		
}

/*
* icons 
*
*/

.iconSmilies
{
	background-image:url('../../templates/default/images/smilie.png');	
	background-repeat: no-repeat;
	height: 24px;
	width: 24px;
	margin-left: 2px;
	float: left;
	cursor:pointer;
	
	border: 0px solid #666666; 	
	background-color: #CCCCCC;	
	-moz-border-radius: 3px;
	border-radius: 3px;	
	
}

.iconSmiliesOver
{
	background-image:url('../../templates/default/images/smilie.png');	
	background-repeat: no-repeat;
	height: 24px;
	width: 24px;
	margin-left: 2px;
	float: left;
	cursor:pointer;
	
	border: 0px solid #CCCCCC; 	
	background-color: #666666;	
	-moz-border-radius: 3px;
	border-radius: 3px;	
	
}

.iconRingbell
{
	background-image:url('../../templates/default/images/bell.png');		
	background-repeat: no-repeat;
	height: 24px;
	width: 24px;
	margin-left: 2px;
	float: left;
	cursor:pointer;	
	
	border: 0px solid #666666; 	
	background-color: #CCCCCC;	
	-moz-border-radius: 3px;
	border-radius: 3px;		

}

.iconRingbellOver
{
	background-image:url('../../templates/default/images/bell.png');		
	background-repeat: no-repeat;
	height: 24px;
	width: 24px;
	margin-left: 2px;
	float: left;
	cursor:pointer;	
	
	border: 0px solid #CCCCCC; 	
	background-color: #666666;	
	-moz-border-radius: 3px;
	border-radius: 3px;		

}

.iconStyle
{
	background-image:url('../../templates/default/images/pen.png');		
	background-repeat: no-repeat;
	height: 24px;
	width: 24px;
	margin-left: 2px;
	float: left;
	cursor:pointer;
	
	border: 0px solid #666666; 	
	background-color: #CCCCCC;	
	-moz-border-radius: 3px;
	border-radius: 3px;		
}

.iconStyleOver
{
	background-image:url('../../templates/default/images/pen.png');		
	background-repeat: no-repeat;
	height: 24px;
	width: 24px;
	margin-left: 2px;
	float: left;
	cursor:pointer;
	
	border: 0px solid #CCCCCC; 	
	background-color: #666666;	
	-moz-border-radius: 3px;
	border-radius: 3px;	
}

.iconAvatar
{
	background-image:url('../../templates/default/images/avatar.png');		
	background-repeat: no-repeat;
	height: 24px;
	width: 24px;
	margin-left: 2px;
	float: left;
	cursor:pointer;
	
	border: 0px solid #666666; 	
	background-color: #CCCCCC;	
	-moz-border-radius: 3px;
	border-radius: 3px;		
}

.iconAvatarOver
{
	background-image:url('../../templates/default/images/avatar.png');		
	background-repeat: no-repeat;
	height: 24px;
	width: 24px;
	margin-left: 2px;
	float: left;
	cursor:pointer;
	
	border: 0px solid #CCCCCC; 	
	background-color: #666666;	
	-moz-border-radius: 3px;
	border-radius: 3px;	
}

.iconSounds
{
	background-image:url('../../templates/default/images/sfx.png');		
	background-repeat: no-repeat;
	height: 24px;
	width: 24px;
	margin-left: 2px;
	float: left;
	cursor:pointer;
	
	border: 0px solid #666666; 	
	background-color: #CCCCCC;	
	-moz-border-radius: 3px;
	border-radius: 3px;		
}

.iconSoundsOver
{
	background-image:url('../../templates/default/images/sfx.png');		
	background-repeat: no-repeat;
	height: 24px;
	width: 24px;
	margin-left: 2px;
	float: left;
	cursor:pointer;
	
	border: 0px solid #CCCCCC; 	
	background-color: #666666;	
	-moz-border-radius: 3px;
	border-radius: 3px;		
}

.iconTranscripts
{
	background-image:url('../../templates/default/images/transcripts.png');		
	background-repeat: no-repeat;
	height: 24px;
	width: 24px;
	margin-left: 2px;
	float: left;
	cursor:pointer;
	
	border: 0px solid #666666; 	
	background-color: #CCCCCC;	
	-moz-border-radius: 3px;
	border-radius: 3px;		
}

.iconTranscriptsOver
{
	background-image:url('../../templates/default/images/transcripts.png');		
	background-repeat: no-repeat;
	height: 24px;
	width: 24px;
	margin-left: 2px;
	float: left;
	cursor:pointer;
	
	border: 0px solid #CCCCCC; 	
	background-color: #666666;	
	-moz-border-radius: 3px;
	border-radius: 3px;		
}

.iconHelp
{
	background-image:url('../../templates/default/images/help.png');		
	background-repeat: no-repeat;
	height: 24px;
	width: 24px;
	margin-left: 2px;
	float: left;
	cursor:pointer;
	
	border: 0px solid #666666; 	
	background-color: #CCCCCC;	
	-moz-border-radius: 3px;
	border-radius: 3px;		
}

.iconHelpOver
{
	background-image:url('../../templates/default/images/help.png');		
	background-repeat: no-repeat;
	height: 24px;
	width: 24px;
	margin-left: 2px;
	float: left;
	cursor:pointer;
	
	border: 0px solid #CCCCCC; 	
	background-color: #666666;	
	-moz-border-radius: 3px;
	border-radius: 3px;	
}

.iconeCredits
{
	background-image:url('../../templates/default/images/ecredits.png');		
	background-repeat: no-repeat;
	height: 18px;
	width: 18px;
	padding-top: 2px;
	padding-left: 20px;	
}

.iconGames
{
	background-image: url('../../templates/default/images/games.png');
	background-repeat: no-repeat;
	height: 24px;
	width: 24px;
	margin-left: 2px;
	float: left;
	cursor:pointer;
	
	border: 0px solid #666666; 	
	background-color: #CCCCCC;	
	-moz-border-radius: 3px;
	border-radius: 3px;		
}

.iconGamesOver
{
	background-image: url('../../templates/default/images/games.png');
	background-repeat: no-repeat;
	height: 24px;
	width: 24px;
	margin-left: 2px;
	float: left;
	cursor:pointer;
	
	border: 0px solid #CCCCCC; 	
	background-color: #666666;	
	-moz-border-radius: 3px;
	border-radius: 3px;		
}

.iconShare
{
	background-image: url('../../templates/default/images/share.png');
	background-repeat: no-repeat;
	height: 24px;
	width: 24px;
	margin-left: 2px;
	float: left;
	cursor:pointer;
	
	border: 0px solid #666666; 	
	background-color: #CCCCCC;	
	-moz-border-radius: 3px;
	border-radius: 3px;		
}

.iconShareOver
{
	background-image: url('../../templates/default/images/share.png');
	background-repeat: no-repeat;
	height: 24px;
	width: 24px;
	margin-left: 2px;
	float: left;
	cursor:pointer;
	
	border: 0px solid #CCCCCC; 	
	background-color: #666666;	
	-moz-border-radius: 3px;
	border-radius: 3px;		
}

.iconRubber
{
	background-image:url('../../templates/default/images/rubber.png');			
	background-repeat: no-repeat;
	height: 24px;
	width: 24px;
	margin-left: 2px;
	float: left;
	cursor:pointer;
	
	border: 0px solid #666666; 	
	background-color: #CCCCCC;	
	-moz-border-radius: 3px;
	border-radius: 3px;		
}

.iconRubberOver
{
	background-image:url('../../templates/default/images/rubber.png');			
	background-repeat: no-repeat;
	height: 24px;
	width: 24px;
	margin-left: 2px;
	float: left;
	cursor:pointer;
	
	border: 0px solid #CCCCCC; 	
	background-color: #666666;	
	-moz-border-radius: 3px;
	border-radius: 3px;		
}

.iconEdit
{
	background-image:url('../../templates/default/images/edit.png');		
	background-repeat: no-repeat;
	height: 24px;
	width: 24px;
	margin-left: 2px;
	float: left;
	cursor:pointer;
	
	border: 0px solid #666666; 	
	background-color: #CCCCCC;	
	-moz-border-radius: 3px;
	border-radius: 3px;		
}

.iconEditOver
{
	background-image:url('../../templates/default/images/edit.png');		
	background-repeat: no-repeat;
	height: 24px;
	width: 24px;
	margin-left: 2px;
	float: left;
	cursor:pointer;
	
	border: 0px solid #CCCCCC; 	
	background-color: #666666;	
	-moz-border-radius: 3px;
	border-radius: 3px;		
}

.iconCopyright
{
	background-image:url('../../templates/default/images/copyright.png');		
	background-repeat: no-repeat;
	height: 24px;
	width: 24px;
	margin-left: 2px;
	float: left;
	cursor:pointer;
	
	border: 0px solid #666666; 	
	background-color: #CCCCCC;	
	-moz-border-radius: 3px;
	border-radius: 3px;		
}

.iconCopyrightOver
{
	background-image:url('../../templates/default/images/copyright.png');		
	background-repeat: no-repeat;
	height: 24px;
	width: 24px;
	margin-left: 2px;
	float: left;
	cursor:pointer;
	
	border: 0px solid #CCCCCC; 	
	background-color: #666666;	
	-moz-border-radius: 3px;
	border-radius: 3px;		
}

/*
* private windows 
*
*/

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

	-moz-border-radius: 8px;
	border-radius: 8px;		
}

.pChatWin
{
	position: absolute;
	margin: 0 0 0 0; 
	padding: 0 0 0 0; 
	border: 1px solid #666666; 
	background-color: #FFFFFF;
	height: 300px;
	width: 400px;
	background-image:url('../../images/private.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	
	-moz-border-radius: 8px;
	border-radius: 8px;		
}

.ptitle
{
	margin: 0 0 0 0; 
	padding: 2px 0px 2px 0px; 
	background-color: #999999;
	border-bottom:1px solid #333333;
	height: 20px;
	width: 100%;
	
	-moz-border-radius: 8px 8px 0px 0px;		
	border-radius: 8px 8px 0px 0px;		
}

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

.psendbox
{
	position:absolute; 
	margin: 0 0 0 0; 
	padding: 2px 2px 2px 2px; 
	background-color: #c8c8c8;
	height: 30px;
	width: 396px;
	bottom: 0px;

	-moz-border-radius: 0px 0px 8px 8px;		
	border-radius: 0px 0px 8px 8px;		
}

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

.poptionsSend
{
	margin: 0 0 0 0; 
	padding: 0 0 0 0; 
	border: 1px solid #666666; 
	right: 5px;
	bottom: 4px;
	height: 28px;
	width: 50px;
	position:absolute;
	background-color: #FFFFFF;
	cursor:pointer;
	color: #FFFFFF;
	
	background-image:url('../../templates/default/images/send.jpg');	
	background-repeat:repeat-x;		
	
	-moz-border-radius: 5px;
	border-radius: 5px;		
}

.poptionsBar
{
	position:absolute; 
	margin: 0 0 0 0; 
	padding: 0px 2px 2px 2px; 
	background-color: #FFFFFF;
	border: 1px solid #666666; 
	height: 24px;
	width: 330px;
	bottom: 4px;
	left: 4px;
	
	-moz-border-radius: 5px;
	border-radius: 5px;		
}

/*
* room select 
*
*/

.roomIcon 
{ 
	right: 216px;
	top: 79px;
	position:absolute;
	cursor: pointer;
} 

.roomSelect 
{ 
	margin: 0 0 0 0; 
	padding: 0 0 0 0; 
	border: 1px solid #84B2DE; 
	right: 10px;
	top: 80px;
	height: 20px;
	width: 200px;
	position:absolute;
	
	-moz-border-radius: 5px;
	border-radius: 5px;	
}

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

.roomButtons
{
	height: 24px;
	width: 90px;
	border: 1px solid #333333;
	background-color: #666666;
	color: #FFFFFF;
	cursor: pointer;
	
	-moz-border-radius: 5px;
	border-radius: 5px;	
}

.roomInput
{
	border: 1px solid #666666; 
	-moz-border-radius: 5px;
	border-radius: 5px;	
}

/*
* userlist 
*
*/

.roomheader
{
	min-height: 26px;
	background-color: #999999;
	border: 0px solid #666666;
	padding: 2px 4px 0px 4px; 
	cursor: pointer;
	font-weight: normal;
	color: #FFFFFF;
	background-image:url('../../templates/default/images/rooms.jpg');	
	background-repeat:repeat-x;	
}

.usercount
{
	color: #999999;
}

.userlist
{
	height: 26px;
	padding: 2px 0px 0px 4px; 
	cursor: pointer;
	color: #000000
}

/*
* user info options
*
*/

.userInfo
{
	position:absolute;
	margin: 0 0 0 0; 
	padding: 2px 2px 10px 2px; 
	border: 1px solid #666666; 
	background-color: #999999;
	height: auto;
	width: 180px;
	left: 3px;
	
	-moz-border-radius: 5px;
	border-radius: 5px;		
}

.userInfoTitle
{
	height: 30px;
	padding: 4px 4px 0px 4px;
	background-color: #999999;
	color: #FFFFFF;
	background-image:url('../../templates/default/images/rooms.jpg');	
	background-repeat:repeat-x;	
}

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

/*
* div windows
*
*/

.titleWin
{
	background-color:#EDF1FA;
}

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

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

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

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

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

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

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

/*
* chat messages 
*
*/

.welcomeMessage 
{ 
	padding: 2px 2px 2px 2px; 
	border: 1px solid #F5F5DC; 
	height: auto;
	background-color: #FFFACD;
} 

.chatMessage
{
	padding: 2px 2px 2px 2px;
	border: 0px solid #FFFFFF; 	
	background-color: #FFFFFF;
	min-height: 40px;
	height: auto;
}

/*
* mouse over
*
*/

.highliteOn
{
	border: 1px solid #CCCCCC;
	background-color: #666666; 
	color: #FFFFFF;
}

.highliteOff
{
	border: 1px solid #666666;
	background-color: #CCCCCC;
	color: #000000;	
}

/*
* info boxes
*
*/

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

.innerInfo
{
	position:relative;
	margin: 0 auto;
	background-color: #CCCCCC;
	border: 0px solid #333333; 
	visibility: hidden;
	overflow-y: auto;
	overflow-x: auto;
	
	-moz-border-radius: 8px;
	border-radius: 8px;		
}

/*
* div window buttons
*
*/

.button
{
	height: 24px;
	width: 140px;
	border: 1px solid #333333;
	background-color: #666666;
	color: #FFFFFF;
	cursor: pointer;
	
	-moz-border-radius: 5px;
	border-radius: 5px;		
}

/*
* captcha box
*
*/

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

/*
* whisper box
*
*/

.whisper
{
	width: 80px;
	height: 14px;
	background-color: #FFFFFF;
	border: 1px solid #666666;
	
	-moz-border-radius: 5px;
	border-radius: 5px;	
}

/*
* delete message
*
*/

.deleteMessage
{
   cursor:pointer;
   float:right;
   width: 10px;
   height: 10px;      
   background-image:url('../../templates/default/images/deleteMessageIMG.png');   
}

/*
* speech bubbles
*
*/

.chatMessageBackground
{
	padding: 0px 0px 0px 0px;
	border: 0px solid #FFFFFF; 	
	background-color: #FFFFFF;
	min-height: 40px;
	height: auto;
}

/* arrow left */
	
.left_arrow_box {
	position: relative;
	background: #ffffff; /* #88b7d5 */
	border: 1px solid #cccccc; /* #c2e1f5; */
	width: auto;
	/*height: auto;*/
	height:100px;
	margin-left: 15px;
	margin-top: 5px;	
	padding: 5px;
	border-radius: 5px;
	box-shadow: 5px 5px 5px #888888;		
}
	
.left_arrow_box:after, .arrow_box:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.left_arrow_box:after {
	border-color: rgba(136, 0, 20, 0);
	border-right-color: #cccccc; /* #88b7d5 */
	border-width: 11px;
	margin-top: -11px;
}
	
.left_arrow_box:before {
	border-color: rgba(194, 225, 245, 0);
	border-right-color: #ccccccc; /* #c2e1f5 */
	border-width: 36px;
	margin-top: -36px;
}	
	
/* arrow right */
	
.right_arrow_box {
	position: relative;
	vertical-align: middle;				
	background: #c2e1f5; /* #88b7d5 */
	border: 1px solid #88b7d5; /* #c2e1f5 */
	width: auto;
	height: auto;
	margin-right: 15px;
	margin-top: 5px;
	text-align: right;
	padding: 5px;
	border-radius: 5px;
	box-shadow: 5px 5px 5px #888888;			
}
	
.right_arrow_box:after, .arrow_box:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;	
}

.right_arrow_box:after {
	border-color: rgba(136, 183, 213, 0);
	border-left-color: #88b7d5;
	border-width: 11px;
	margin-top: -11px;
}
	
.right_arrow_box:before {
	border-color: rgba(194, 225, 245, 0);
	border-left-color: #c2e1f5;
	border-width: 36px;
	margin-top: -36px;
}