/*
 Powered by Aleksandr Gromov aka MagentaWAVE
 Oficial webpage http://www.magentawave.com
 This CSS for Simple Click&Hover ToolTip
 Look DEMO and tutorial on http://www.magentawave.com/2013/02/simple-jquery-tooltip.html
 If you use or share it please don't remove info
 ----------------------*/
.tip {
 display:inline-block;
 position:relative;
}
.tip em,
.linktip em {
 background:#FD6E00;
 text-align:center;
 border-radius: 20px;
 border: 1px solid #ccc;
 color: #fff;
 font: normal bold 12px Arial;
 text-decoration: none;
 cursor:pointer;
 padding: 0 4px;
}
.tip>span>img {
 max-width: 50%;
 max-height: auto;
 margin: 3px;
 float: left;
}
.tip1 {
 display:inline-block;
 position:relative;
}
.tip1 em,
.linktip1 em {
 background:#FD6E00;
 text-align:center;
 border-radius: 20px;
 border: 1px solid #ccc;
 color: #fff;
 font: normal bold 12px Arial;
 text-decoration: none;
 cursor:pointer;
 padding: 0 4px;
}
.tip1>{
 max-width:70%;
 max-height: auto;
 margin:3px;
 float:right;
}
.answer>b,
.answer-left>b {
 position:absolute;
 font: normal bold 14px Comic Sans MS;
 color:#999;
 cursor:pointer;
 padding: 4px;
}
.answer>b {
 top:0;
 right:0;
}
.answer-left>b {
 top:0;
 left:0;
}
.answer>b:hover,
.answer-left>b:hover {color:#000;}

.answer, 
.answer-left { 
 display:none;
 position:absolute;
 z-index:9998;
 background: #EDEDED;
 border-radius: 3px;
 border: 1px solid #ccc;
 color: #000;
 font: normal 500 14px Trebuchet MS;
 text-align:left;
 text-shadow: 0 1px 2px #fff, 0 0 10px #E0F1FF;
 text-decoration: none;
 opacity: 1; 
 cursor:default;
 margin-top:-30px;
 width:400px;
 min-height: 50px;
 max-height: auto;
 white-space: normal;
}
.answer {
 box-shadow: 5px 5px 0.5em -0.1em rgba(0,0,6,0.5);
 right: -440px;
 padding: 5px 20px 7px 7px;
 text-align:justify;
}
.answer-left {
 box-shadow: -5px 5px 0.5em -0.1em rgba(0,0,6,0.5);
 left: -440px;
 padding: 5px 7px 7px 20px;
}
.a-top {
 bottom: -10px;
}
.a-top:before,
.answer:before, 
.answer-left:before {
 content:"";
 position:absolute;
 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAQAAACR313BAAAAaElEQVR4XoWQMQ6AMAwDna6wMXTjB/x/7E4i9SV9AwgxuJKDcKfqrlVizInrObwLHLng9sKhgm8nIQV4eWAFJig/EIogUATCTPh7zZUUuqHXOL4m7waglViyvVthNXvaGhNr2jnTLQTenE8VKUp0n4sAAAAASUVORK5CYII=) no-repeat;
 width: 9px;
 height: 15px;
}
.answer:before {
 left: -9px;
 margin-top: 10px;
 background-position: 0 0;
}
.answer-left:before {
 right: -9px;
 margin-top: 10px;
 background-position: -9px 0;
}
.a-top:before {
 bottom: 10px;
}
.tip>a:focus~span.answer,
.tip>a:focus~span.answer-left {
 display:block;
}
.tip>a[tabindex="1"]:focus {
 outline: none;
}
.tip>a[tabindex="1"]:focus>em {
 background:#FF4F19;
}