.callout
{
    position                    : absolute;
    left                        : 0;
    top                         : 0;
}
.calloutUpArrow
{
	height						: 0;
	width						: 0;
	border-bottom				: 12px solid #FFFFFF;
	border-left					: 12px dotted transparent;
	border-right				    : 12px dotted transparent;
	left						: 0px;
	top							: 0px;
	margin-left					: 20px;
	z-index						: 10000;
}
.calloutUpArrowInner
{
	position					: relative;
	left						: -10px;
	top							: 2px;
	height						: 0;
	width						: 0;
	border-bottom				: 10px solid #c02316;
	border-left					: 10px dotted transparent;
	border-right				: 10px dotted transparent;
	z-index						: 10001;
}
.calloutDownArrow
{
	height						: 0;
	width						: 0;
	border-top					: 12px solid #FFFFFF;
	border-left					: 12px dotted transparent;
	border-right				: 12px dotted transparent;
	left						: 0px;
	top							: 0px;
	margin-left					: 20px;
	z-index						: 10001;
}
.calloutDownArrowInner
{
	position					: relative;
	left						: -10px;
	top							: -12px;
	height						: 0;
	width						: 0;
	border-top					: 10px solid #c02316;
	border-left					: 10px dotted transparent;
	border-right				: 10px dotted transparent;
	z-index						: 10000;
}
.calloutContainerUp
{
	background-color			: rgba(23, 45, 65, 0.8);
	border						: 2px solid #c02316;
	position					: relative;
	top							: -1px;
	z-index						: 9999;
	width						: 100%;
	padding						: 8px;
	color						: #FFFFFF;
	-webkit-border-radius		: 6px;
	-moz-border-radius			: 6px;
	border-radius				: 6px;
    -webkit-box-shadow          : 6px 6px 5px rgba(23, 45, 65, 0.25);
    -moz-box-shadow             : 6px 6px 5px rgba(23, 45, 65, 0.25);
    box-shadow                  : 6px 6px 5px rgba(23, 45, 65, 0.25);
}
.calloutContainerUpMessage
{
    width                       : 100%;
    display                     : block;
}
.calloutContainerUpButtons
{
    display                     : block;
    width                       : 100%;
    margin-top                  : 8px;
    height                      : 30px;
}
.calloutButton
{
    float                       : right; 
    margin-right                : 8px; 
    font-size                   : inherit; 
    padding                     : 4px 10px;
}
.calloutContainerDown
{
	background-color			: rgba(23, 45, 65, 0.8);
	border						: 2px solid #c02316;
	position					: relative;
	top							: 1px;
	z-index						: 9999;
	width						: 100%;
	padding						: 8px;
	color						: #FFFFFF;
	-webkit-border-radius		: 6px;
	-moz-border-radius			: 6px;
	border-radius				: 6px;
    -webkit-box-shadow          : 6px 6px 5px rgba(23, 45, 65, 0.25);
    -moz-box-shadow             : 6px 6px 5px rgba(23, 45, 65, 0.25);
    box-shadow                  : 6px 6px 5px rgba(23, 45, 65, 0.25);
}
/* Extended callout*/
.calloutEx 									{ position: absolute; left: 0; top: 0; z-index: 9999; }
.calloutExBox 								{ position: relative; background-color: rgba(23, 45, 65, 0.7); border: 2px solid rgba(255, 255, 255, 0.7); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 6px 6px 5px rgba(23, 45, 65, 0.25); -moz-box-shadow: 6px 6px 5px rgba(23, 45, 65, 0.25); box-shadow: 6px 6px 5px rgba(23, 45, 65, 0.25); }
.calloutExBox[direction="top"]:before 		{ bottom: 100%; left: -moz-calc(50% - 15px); left: -webkit-calc(50% - 15px); left: calc(50% - 15px); content: " "; height: 0; width: 0; position: absolute; border-style: solid; border-width: 0 0 30px 30px; border-color: transparent transparent rgba(23, 45, 65, 0.7) transparent; pointer-events: none; }
.calloutExBox[direction="left"]:before 		{ right: 100%; top: -moz-calc(50% - 15px); top: -webkit-calc(50% - 15px); top: calc(50% - 15px); content: " "; height: 0; width: 0; position: absolute; border-style: solid; border-width: 30px 30px 0 0; border-color: transparent rgba(23, 45, 65, 0.7) transparent transparent; pointer-events: none; }
.calloutExBox[direction="right"]:before 	{ left: 100%; top: -moz-calc(50% - 15px); top: -webkit-calc(50% - 15px); top: calc(50% - 15px); content: " "; height: 0; width: 0; position: absolute; border-style: solid; border-width: 30px 0 0 30px; border-color: transparent transparent transparent rgba(23, 45, 65, 0.7); pointer-events: none; }
.calloutExBox[direction="bottom"]:before	{ top: 100%; left: -moz-calc(50% - 15px); left: -webkit-calc(50% - 15px); left: calc(50% - 15px); content: " "; height: 0; width: 0; position: absolute; border-style: solid; border-width: 0px 30px 30px 0; border-color: transparent rgba(23, 45, 65, 0.7) transparent transparent; pointer-events: none; }
.calloutExBox .closeButton					{ position: absolute; right: 8px; top: 8px; height: 16px; width: 16px; cursor: pointer; z-index: 2001; background: url(images/callout/close.png) center center no-repeat; }
/*
.calloutEx { position: absolute; left: 0; top: 0; z-index: 9999; }
.calloutExBox { position: relative; background-color: #172D41; border: 2px solid #FFFFFF; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 6px 6px 5px rgba(23, 45, 65, 0.25); -moz-box-shadow: 6px 6px 5px rgba(23, 45, 65, 0.25); box-shadow: 6px 6px 5px rgba(23, 45, 65, 0.25); }
.calloutExBox[direction="top"]:after, .calloutExBox[direction="top"]:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.calloutExBox[direction="top"]:after { border-color: rgba(23, 45, 65, 0); border-bottom-color: #172D41; border-width: 20px; margin-left: -20px; }
.calloutExBox[direction="top"]:before { border-color: rgba(255, 255, 255, 0); border-bottom-color: #FFFFFF; border-width: 23px; margin-left: -23px; }
.calloutExBox[direction="right"]:after, .calloutExBox[direction="right"]:before { left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.calloutExBox[direction="right"]:after { border-color: rgba(23, 45, 65, 0); border-left-color: #172D41; border-width: 20px; margin-top: -20px; }
.calloutExBox[direction="right"]:before {border-color: rgba(255, 255, 255, 0); border-left-color: #FFFFFF; border-width: 23px; margin-top: -23px; }
.calloutExBox[direction="bottom"]:after, .calloutExBox[direction="bottom"]:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.calloutExBox[direction="bottom"]:after { border-color: rgba(23, 45, 65, 0); border-top-color: #172D41; border-width: 20px; margin-left: -20px; }
.calloutExBox[direction="bottom"]:before { border-color: rgba(255, 255, 255, 0); border-top-color: #FFFFFF; border-width: 23px; margin-left: -23px; }
.calloutExBox[direction="left"]:after, .calloutExBox[direction="left"]:before {	right: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.calloutExBox[direction="left"]:after { border-color: rgba(23, 45, 65, 0); border-right-color: #172D41; border-width: 20px; margin-top: -20px; }
.calloutExBox[direction="left"]:before { border-color: rgba(255, 255, 255, 0); border-right-color: #FFFFFF; border-width: 23px; margin-top: -23px; }
*/

.calloutBalloon 
{ 
    position                : absolute; 
    left                    : 0; 
    top                     : 0; 
    z-index                 : 9999; 
}
.calloutBalloonBox 
{ 
    position                : relative; 
    background-color        : rgba(23, 45, 65, 0.7); 
    border                  : 2px solid rgba(255, 255, 255, 0.7); 
    -webkit-border-radius   : 6px; 
    -moz-border-radius      : 6px; 
    border-radius           : 6px; 
    -webkit-box-shadow      : 6px 6px 5px rgba(23, 45, 65, 0.25); 
    -moz-box-shadow         : 6px 6px 5px rgba(23, 45, 65, 0.25); 
    box-shadow              : 6px 6px 5px rgba(23, 45, 65, 0.25); 
}




/*
http://nicolasgallagher.com/pure-css-speech-bubbles/
http://cssarrowplease.com/
http://apps.eky.hk/css-triangle-generator/
http://css-tricks.com/examples/ShapesOfCSS/
http://hedgerwow.appspot.com/demo/arrows
http://html-generator.weebly.com/css-triangle-generator.html
http://html-generator.weebly.com/css-speech-bubble-generator.html
http://html-generator.weebly.com/css-tooltip-generator.html
http://cssdeck.com/labs/bv45bh6p
*/