AtomJump

You have freedom to include any HTML in this field, and we recommend that you include your CSS in your own page. Here is an example template which can be copied into the template field: note the required elements are n1 which is the wrapper div, and atomjump_table which determines where to pop up from.

<td style='border: 0 none; padding: 6px; text-align: right;' align="right">
				<div class="label" style="text-align: right;"><a href='javascript:hideObject();'>Close</a></div>
			</td>
		</tr>
		<tr>
			<td style="border: 0 none; background-color: #e7d9d9; padding: 6px;">
				<img align='right' src='http://www.atomjump.com/flags.png' width='104' height='10' border='0' usemap='#flags'><br/>
				<div class="label">You can contact $them between <span style='font-weight: bold;'>$short_time_str</span> in your local time*</div>
				<div class="label"><span style='color: rgb(0, 0, 0);'>Your timezone is $start_call_ext.  $be_their</span></div>

</td>
		</tr>
		<tr>
			<td style="border: 0 none; background-color: #d7cbcb; padding: 6px;">
				<div class="spacer1"></div>
				<div class="label" style="color: red">$call_now</div>
				<div class="label" style="color: #555555">$current_time_msg $current_time_day <big>$current_time_now</big> <small>$current_time_ext</small></div>
				<div class="label" style="color: #555555">$detected_auto</div>
				<div class="spacer2"></div>

</td>
		</tr>
		<tr>
			<td style="border: 0 none; padding: 6px;" >
				<div class="label"><small>* Includes daylight saving when applicable</small></div>

</td>
		</tr>
	</tbody>
   </table>

</div>
</div>

Here is the CSS which should be copied into your own page. Note the required element is a visibility:normal; which should wrap the entire div. This will be replaced with visibility:hidden internally, but you can use it for testing purposes.

<STYLE TYPE="text/css">
.img-shadow {
  position: absolute;
  background: url(http://www.atomjump.com/shadowAlpha.png) no-repeat bottom right !important;
  background: url(http://www.atomjump.com/shadow.gif) no-repeat bottom right;
  width:396px;	/*396, 400*/
  font-family: arial;
  font-weight: normal;
   visibility:hidden;
   z-index:10000;   
   text-align: left;
}

/* See css reset at http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/ Removed small from list */

.img-shadow body {
	line-height: 1;
}
.img-shadow ol, ul {
	list-style: none;
}
.img-shadow blockquote, q {
	quotes: none;
}
.img-shadow blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
.img-shadow :focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
.img-shadow ins {
	text-decoration: none;
}
.img-shadow del {
	text-decoration: line-through;
}

.label {

font-family: arial, sans-serif !important;
  font-size: 11px !important;    /* 10 works in all cases */
  font-weight: normal !important;
  margin: 0px;
  padding: 0px;
  color: #000;
  line-height: 1.2 !important;
  width:100% !important;
  text-align: left;
}

.label a {
  font-family: arial, sans-serif !important;
  font-size: 11px !important;   /* 10 works in all cases */
  font-weight: normal !important;
  color: #00000FF;
}

.label a:link {
  font-family: arial, sans-serif !important;
  font-size: 11px !important;   /* 10 works in all cases */
  font-weight: normal !important;
  color: #00000FF;
}

.img-shadow img {
  display: block;
  position: relative;
  background-color: #ffffff;
  
  margin: -6px 6px 6px -6px;
  padding: 0px;
  left: 3px;   /* ie only, normally 0 */ 
}
  
html>body .img-shadow img {
	left: 0px;
}

.normal {
	position: absolute;
	left: 3px;  /* ie only, normally 0 */
	top:2px;
}

html>body .normal {
	left: 0px;	/* firefox etc */
}

.normal img {
  background-color: #e7d9d9;
  margin: 0px 0px 0px 0px;
  padding: 0px;
}

.spacer1 {
	width: 100%;
	float: left;
	display: inline;
	height: 10px;	/* ie only, normally 10 */
	min-height:8px;
	height:auto !important;
	height:8px;
	margin-bottom: -3px;  /* ie only */
	margin: -9px;
	padding: 0px;
	overflow:hidden;
	clear: both;
 }

.spacer2 {
	width: 100%;
	float: left;
	display: inline;
	height: 10px; /* ie only, normally 8 */
	min-height:8px;
	height:auto !important;
	height:8px;
	margin-bottom: -3px;  /* ie only */
	margin: -6px;
	padding: 0px;
	overflow:hidden;
	clear: both;
 }
 
 #atomjump_table {
 	width:384px;
 	
 }
 
 #atomjump_table table, td, th{
 	border:none, 0px !important;
 }

</style>