@CHARSET "UTF-8";

/* Set up the cell dimensions */
table.jsx-tooltip {
	position:absolute;
	width: 300px;
	top:30px;
	left:30px;
	z-index:1001;
}
	
table.jsx-tooltip td.east,
table.jsx-tooltip td.northeast,
table.jsx-tooltip td.southeast,
table.jsx-tooltip td.west,
table.jsx-tooltip td.northwest,
table.jsx-tooltip td.southwest {
	width:18px;
}

table.jsx-tooltip td.north,
table.jsx-tooltip td.northwest,
table.jsx-tooltip td.northeast,
table.jsx-tooltip td.southwest,
table.jsx-tooltip td.southeast,
table.jsx-tooltip td.south {
	height:38px;
}
	
table.jsx-tooltip td.content{
	background-color:#d1d5f1;
}

/* Assign proper background image to each side of the table */
table.jsx-tooltip td.north {
	background-image: url(images/tooltip/north.png);
	background-repeat: repeat-x;
	background-position: top left;
}

table.jsx-tooltip td.south {
	background-image: url(images/tooltip/south.png);
	background-repeat: repeat-x;
	background-position: bottom left;
}
	
table.jsx-tooltip td.east {
	background-image: url(images/tooltip/east.png);
	background-repeat: repeat-y;
	background-position: top right;
}

table.jsx-tooltip td.west {
	background-image: url(images/tooltip/west.png);
	background-repeat: repeat-y;
	background-position: top left;
}

table.jsx-tooltip td.northeast {
	background-image: url(images/tooltip/northeast.png);
	background-repeat: no-repeat;
	background-position: top right;
}


table.jsx-tooltip td.northwest {
	background-image: url(images/tooltip/northwest.png);
	background-repeat: no-repeat;
	background-position: top left;
}

table.jsx-tooltip td.southeast {
	background-image: url(images/tooltip/southeast.png);
	background-repeat: no-repeat;
	background-position: bottom right;
}
	
table.jsx-tooltip td.southwest {
	background-image: url(images/tooltip/southwest.png);
	background-repeat: no-repeat !important;
	background-position: bottom left !important;	
}

/* Show arrows with proper backgrounds and positions */

table.jsx-tooltip td.north div,
table.jsx-tooltip td.south div {
	width:30px;
	height:38px;
	background-repeat: no-repeat;
}

table.jsx-tooltip td.south div.nw_arrow{
	margin-bottom: 4px;
	margin-left: 230px;
	background-image: url(images/tooltip/nw_zobak.png);
	background-position: top right;
}

table.jsx-tooltip td.south div.ne_arrow{
	margin-bottom: 4px;
	background-image: url(images/tooltip/ne_zobak.png);
	background-position: top left;
}

table.jsx-tooltip td.north div.sw_arrow{
	margin-top: 3px;
	margin-left: 230px;
	background-image: url(images/tooltip/sw_zobak.png);
	background-position: bottom right;
}

table.jsx-tooltip td.north div.se_arrow{
	margin-top: 3px;
	background-image: url(images/tooltip/se_zobak.png);
	background-position: bottom left;
}

/* FIX TO SHOW THE PNG BACKGROUNDS EVEN ON IE6
   Microsoft's AlphaImageLoader required absolute URL to work, so need to configure it before deploy.
table[class].jsx-tooltip td.southwest {
	background-image: url(images/tooltip/southwest.png);
	background-repeat: no-repeat !important;
	background-position: bottom left !important;	
}
table.jsx-tooltip td.southwest {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='/JSXShowcase/jsx/components/misc/images/tooltip/southwest.png');
}*/