A Pen by Gene Miller

HTML

            
              <!DOCTYPE html>
<html>
<head id="Head1"><title>
	Contact Details Tab
</title>

<link href="green07.css.aspx" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="common02.js.aspx"></script><meta name="format-detection" content="telephone=no" />
<link href="sales04.css.aspx" rel="stylesheet" type="text/css" /><link href="tab7.css" rel="stylesheet" type="text/css" />

</head>

<body>

	<noscript>
		<center><h2><font color="red">Warning: Javascript is disabled on your browser!<br><br>This site needs to have it enabled.<br><br></font></h2></center>
	</noscript>

	<div align="center" id="DivHelp" style="display:none; position:absolute; top:50px; left:20px; background-color:#fff; border-style:solid; border-width:1px; border-color:#696969; z-index:999;">
		<div id="DivHelpHandle" style="background:#000080; padding:3px; margin:1px; width:450px; cursor:move;"><br /></div>
		<iframe id="IFrameHelp" frameborder="0" width="450" height="400" src="javascript:'<html></html>';"></iframe>
		<div id="DivBlock" style="display:none; background:black; width:450px; height:400px; z-index:550; position:absolute; top:0; left:0; color:White; filter:alpha(opacity=5); -moz-opacity:0.05; opacity:0.05;">drag</div>
		<br /><div style="margin:5px 0 5px 0;"><a href="javascript:helpPop();" class="bizHeader">Close help</a></div>
	</div>

	<script type="text/javascript">
	var one;
	function helpPop(){
		var two=document.getElementById('IFrameHelp');
		two.src='#';
		var three=document.getElementById('DivHelp');
		var display=three.style.display ? '' : 'none';
		three.style.display = display;
	}

	var theHandle=document.getElementById('DivHelpHandle');
	var theRoot=document.getElementById('DivHelp');
	Drag.init(theHandle,theRoot);
	</script>

	<table width="100%" cellpadding="0" cellspacing="0">
		<tr>
			<td>

				<table id="TableHeader" width="100%" cellpadding="0" cellspacing="0" style="border: 1px solid #072A66;">
					<tr>
						<td>

							<table width="100%" cellpadding="0" cellspacing="0" border="0">
								<tr class="mainback">
									<td><div class="mainbackText">Intranet.Net</div></td>
									<td align="right" class="topDate">Aug 17 2015 10:34 AM&nbsp;</td>
								</tr>
							</table>

							<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-style:solid; border-width:1px; border-color:#ffffff;">
								<tr class="subback">
									<td><span class="smallBlackText">User: GWM<span id="LblWhatKind">&nbsp;&nbsp;&nbsp;|AD|</span></span></td>
									<td align="right">
										<a class="biz" href="#"><b>Home</b></a><span class="divider"> |</span>
										<a class="biz" href="#"><b>Log Out</b></a><span class="divider"> |</span>
										<a id="HyperlinkMainHelp" class="biz" href="javascript:helpPop();"><b>Help</b></a>
										&nbsp;&nbsp;&nbsp;
									</td>
								</tr>
							</table>

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


			</td>
		</tr>    
		<tr>
			<td>
				<table width="100%" cellpadding="0" cellspacing="1" border="0">
					<tr>
						<td valign="top">
							<form method="post" action="personview.aspx?id=57465" id="form1" enctype="multipart/form-data">
								<div class="aspNetHidden">

								</div>


								<div align="center">

									<br />

									<table cellspacing="0" cellpadding="2" border="0" style="text-align:left;" id="barTable">
										<tr>
											<td width="10px" style="padding:0;"><img src="https://i.imgur.com/B8zZXEb.gif" border="0" height="32px" width="32px" title="Outreach Logo" alt="" /></td>
											<td valign="bottom">
												<span class="mediumGreenText"><b>Contact Details</b><span id="Main_LblEntityAbbr">&nbsp;-&nbsp;TAFV</span></span>
											</td>
											<td align="right" valign="bottom">
												<a href="#" class="bizHeader">Search</a>&nbsp;<span class="divider">|</span>
												<a href="#" class="bizHeader">Mailing Preferences</a>&nbsp;<span class="divider">|</span>
												<a href="#" class="bizHeader">Add New Contact</a>&nbsp;<span class="divider">|</span>
												<a href="#" class="bizHeader">Outreach Main</a>
											</td>
										</tr>
										<tr>
											<td colspan="4"><div style="border-top:2px solid #eeeef8;"><br /></div></td>
										</tr>
									</table>



									<!--[if lt IE 7]><style type="text/css">@import "https://www.touchmark.net/employee/style/ie6.css";</style><![endif]-->
									<div id="LightBoxWork" style="display:none; z-index:501; top:0px; left:0px;
									background-color:#000; filter:alpha(opacity=15); -moz-opacity:0.15; opacity:0.15;">
								</div>

								<!--[if lt IE 7]><iframe id="LightBoxIframeWork" src="javascript:'<html></html>';"></iframe><![endif]-->
								<div align="center" id="DivWork" class="popfixed" style="display:none; top:10%; left:50%;
								border-style:solid; border-width:1px; border-color:#696969; z-index:502; background-color:#fff;">
							</div>

							<div id="DivPhoto" style="display:none; padding:1px; position:absolute; top:150px; left:50%; margin-left:-250px; width:500px; background-color:#fff; border-style:solid; border-width:1px; border-color:#696969; z-index:502;">

								<div align="center" style="border-right:solid 2px #000080; border-left:solid 2px #000080; border-bottom:solid 2px #000080;">

									<div style="background-color:#000080; color:#ffffff; border:solid 3px #000080; text-align:left;">
										<table cellpadding="0" cellspacing="0" width="100%">
											<tr>
												<td><b>Browse for photo file</b></td>
												<td align="right">
													<a href="javascript:void(0);" onclick="photoPop();"><img src="https://i.imgur.com/lmSyhTQ.gif" height="14px" width="16px" border="0" alt="" /></a>
												</td>
											</tr>
										</table>
									</div>

									<table cellspacing="0" cellpadding="2" border="0" style="text-align:center;">
										<tr>
											<td><br /><input type="file" name="ctl00$Main$FileUpload" id="Main_FileUpload" onkeydown="javascript:return false;" /></td>
										</tr>
										<tr>
											<td><br /><br />
												<input onmouseover="this.style.background=&#39;#fff url(https://i.imgur.com/SoDO5Zq.gif) repeat-x top left&#39;" onmouseout="this.style.background=&#39;#fff url(https://i.imgur.com/G79j09U.gif) repeat-x top left&#39;" onmousedown="this.style.background=&#39;#fff url(https://i.imgur.com/pqubcie.gif) repeat-x top left&#39;" type="submit" name="ctl00$Main$ButtonSaveNewPhoto" value="Save Photo" id="Main_ButtonSaveNewPhoto" class="touchbutton" />
												<input onmouseover="this.style.background=&#39;#fff url(https://i.imgur.com/SoDO5Zq.gif) repeat-x top left&#39;" onmouseout="this.style.background=&#39;#fff url(https://i.imgur.com/G79j09U.gif) repeat-x top left&#39;" onmousedown="this.style.background=&#39;#fff url(https://i.imgur.com/pqubcie.gif) repeat-x top left&#39;" type="submit" name="ctl00$Main$ButtonDeletePhoto" value="Delete/No Photo" onclick="javascript:var ok=confirm(&#39;Are you sure?&#39;); if (!ok) {return false;}if (typeof(Page_Validators)==&#39;undefined&#39;) {var buttondiv=document.getElementById(&#39;Div_ButtonDeletePhoto&#39;); if (buttondiv) {buttondiv.style.display=&#39;&#39;; this.style.display=&#39;none&#39;;}} else {if (typeof(Page_ClientValidate)==&#39;function&#39;) {if (Page_ClientValidate()) {var buttondiv=document.getElementById(&#39;Div_ButtonDeletePhoto&#39;); if (buttondiv) {buttondiv.style.display=&#39;&#39;; this.style.display=&#39;none&#39;;}}}};" id="Main_ButtonDeletePhoto" class="touchbutton" />
												<input onmouseover="this.style.background=&#39;#fff url(https://i.imgur.com/SoDO5Zq.gif) repeat-x top left&#39;" onmouseout="this.style.background=&#39;#fff url(https://i.imgur.com/G79j09U.gif) repeat-x top left&#39;" onmousedown="this.style.background=&#39;#fff url(https://i.imgur.com/pqubcie.gif) repeat-x top left&#39;" type="submit" name="ctl00$Main$ButtonDeclinedPhoto" value="Declined Photo" onclick="javascript:var ok=confirm(&#39;Are you sure?&#39;); if (!ok) {return false;}if (typeof(Page_Validators)==&#39;undefined&#39;) {var buttondiv=document.getElementById(&#39;Div_ButtonDeclinedPhoto&#39;); if (buttondiv) {buttondiv.style.display=&#39;&#39;; this.style.display=&#39;none&#39;;}} else {if (typeof(Page_ClientValidate)==&#39;function&#39;) {if (Page_ClientValidate()) {var buttondiv=document.getElementById(&#39;Div_ButtonDeclinedPhoto&#39;); if (buttondiv) {buttondiv.style.display=&#39;&#39;; this.style.display=&#39;none&#39;;}}}};" id="Main_ButtonDeclinedPhoto" class="touchbutton" />
												<input onmouseover="this.style.background=&#39;#fff url(https://i.imgur.com/SoDO5Zq.gif) repeat-x top left&#39;" onmouseout="this.style.background=&#39;#fff url(https://i.imgur.com/G79j09U.gif) repeat-x top left&#39;" onmousedown="this.style.background=&#39;#fff url(https://i.imgur.com/pqubcie.gif) repeat-x top left&#39;" type="submit" name="ctl00$Main$ButtonEnlarge" value="Enlarge" onclick="var f=document.createElement(&#39;form&#39;);
												f.setAttribute(&#39;method&#39;, &#39;POST&#39;);
												f.setAttribute(&#39;action&#39;, &#39;Handler.ashx?id=6198&amp;size=2&amp;sta=0&#39;);
												f.setAttribute(&#39;target&#39;, &#39;_blank&#39;);
												document.body.appendChild(f); f.submit(); return false;" id="Main_ButtonEnlarge" class="touchbutton" />
											</td>
										</tr>
										<tr>
											<td><br />
												<input onmouseover="this.style.background=&#39;#fff url(https://i.imgur.com/SoDO5Zq.gif) repeat-x top left&#39;" onmouseout="this.style.background=&#39;#fff url(https://i.imgur.com/G79j09U.gif) repeat-x top left&#39;" onmousedown="this.style.background=&#39;#fff url(https://i.imgur.com/pqubcie.gif) repeat-x top left&#39;" type="submit" name="ctl00$Main$ButtonPhotoPopClose" value="Cancel" onclick="photoPop(); return false;" id="Main_ButtonPhotoPopClose" class="touchbutton" />
											</td>
										</tr>
									</table>
									<br />
								</div>
							</div>

							<script language="javascript" type="text/javascript">
							function photoPop(){
								var dp=document.getElementById('DivPhoto');
								var four=document.getElementById('LightBoxWork');
								var display=dp.style.display ? '' : 'none';
								dp.style.display = display;
								four.style.display = display;
								if(display=='none') {setIndexOn();} else {setIndexOff(dp);}
							}

							function addNewNote() {
								var inner='<iframe width=800px height=270px frameborder=0 scrolling=no src=personnotesadd.aspx?id=57465></iframe>';
								setDivWork(inner,'-400px');
							}

//function cloneUser() {
//var inner='<iframe width=650px height=300px frameborder=0 scrolling=no src=personclone.aspx?personid=57465></iframe>';
//setDivWork(inner,'-325px');
//}

function printLabel() {
	var inner='<iframe width=650px height=300px frameborder=0 scrolling=no src=printLabel.aspx?personid=57465></iframe>';
	setDivWork(inner,'-325px');
}

function printMenu() {
	var inner='<iframe width=650px height=300px frameborder=0 scrolling=no src=printMenu.aspx?personid=57465></iframe>';
	setDivWork(inner,'-325px');
}

function refreshPage() {
	document.location.href='personview.aspx?id=57465';
}

function setDivWork(inner,leftmargin) {
	var three=document.getElementById('DivWork');
	var four=document.getElementById('LightBoxWork');
	var display=three.style.display ? '' : 'none';

	if (display=='') {
		three.innerHTML=inner;
		three.style.marginLeft=leftmargin;
		var arr=three.getElementsByTagName('iframe');
		for(var i=0; i < arr.length; i++){
			arr[i].src=arr[i].src;
		}
		setIndexOff(three);
	} else {
		setIndexOn();
	}

	three.style.display = display;
	four.style.display = display;
	ie6(three);
}

function ie6(a) {
	var ie6frame=document.getElementById('LightBoxIframeWork');
	var ie6framedisplay=a.style.display ? 'block' : 'none';
	if(ie6frame) {ie6frame.style.display=ie6framedisplay;}
}
</script>



<div><table cellpadding="0" cellspacing="0" border="0"><tr><td class="tab7TD"><div class="tab7On"><a href="javascript:void(0);">Main</a></div></td><td class="tab7TD"><div class="tab7Off"><a href="sales.aspx?id=57465">Sales</a></div></td><td class="tab7TD"><div class="tab7Off"><a href="discovery.aspx?id=57465">Personal Profile</a></div></td><td class="tab7TD"><div class="tab7Off"><a href="relationships.aspx?id=57465">Relationships</a></div></td><td class="tab7TD"><div class="tab7Off"><a href="lemain.aspx?id=57465">Life Enrichment</a></div></td><td class="tab7TD"><div class="tab7Off"><a href="clinicalmain.aspx?id=57465">Transitions</a></div></td><td class="tab7TD"><div class="tab7Off"><a href="agreements.aspx?id=57465">Agreements</a></div></td></tr></table></div>





<table cellspacing="0" cellpadding="3" border="0" style="border-top:5px solid purple; width:850px;text-align:left;">
	<tr>
		<td><img src="https://i.imgur.com/nVglFw1.gif" width="19px" height="15px" alt="" /></td>
		<td align="right">

			<a href="javascript:void(0)" onclick="printMenu();" class="abutton">Print Menu</a>
			<a href="javascript:void(0)" onclick="printLabel();" class="abutton">Print Label</a>






			<a href="personviewedit.aspx?id=57465" id="Main_LinkButtonEdit" class="abutton">Edit</a>
		</td>
	</tr>
	<tr>
		<td colspan="2" align="center" style="border-top:2px solid purple; background-color:#fafafa">

			<table cellpadding="0" cellspacing="0" border="0" width="825px" style="text-align:left;" class="mediumBlackText">
				<tr>
					<td align="left" valign="top" colspan="2" style="font-weight:bold; color:#0000ff;">

						<span id="Main_LblSalutation"></span>
						<span id="Main_LblFirstName">Jane</span>
						<span id="Main_LblMiddleName"></span>
						<span id="Main_LblLastName">Doe</span>
						<span id="Main_LblSuffix"></span>

						<span id="Main_LblIsArchived" class="redstar" style="font-weight:bold;"></span>
					</td>
					<td align="right" valign="top" rowspan="3">
						<div style="padding:30px 0 0 1px;"><img id="Main_ImagePerson" class="shadow" src="https://i.imgur.com/cBld7Vc.jpg" width="70px" /></div>
						<div align="center"><a href="javascript:photoPop();" class="biz" id="LinkButtonEditPhoto">Edit/Enlarge</a></div>
						<div id="Main_DivLevel" style="text-align:center; margin:20px 0;" class="smallBlackText"><b>LE Level:</b><br /><a href="personlevel.aspx?id=57465" class="bizHeader">Level I</a></div>
					</td>
				</tr>
				<tr>
					<td class="smallBlackText" colspan="2" style="padding:3px 0;"><b>Preferred Name</b>&nbsp;<span id="Main_LblPreferredName"></span></td>
				</tr>
				<tr>
					<td valign="top" width="375px">

						<table border="0" cellpadding="0" cellspacing="0" width="350px" style="margin-top:7px;" class="smallBlackText tdYellowBorder">
							<tr>
								<td class="leftformat"><b>Primary Phone</b></td>
								<td><span id="Main_LblPrimaryPhone">123-456-7890</span>&nbsp;</td>
							</tr>
							<tr>
								<td class="leftformat"><b>Work Phone</b></td>
								<td><span id="Main_LblWorkPhone"></span>&nbsp;</td>
							</tr>
							<tr>
								<td class="leftformat"><b>Home Phone</b></td>
								<td><span id="Main_LblHomePhone"></span>&nbsp;</td>
							</tr>
							<tr>
								<td class="leftformat"><b>Mobile</b></td>
								<td><span id="Main_LblMobilePhone">123-456-7890</span>&nbsp;</td>
							</tr>
							<tr>
								<td class="leftformat"><b>FAX</b></td>
								<td><span id="Main_LblFAX">123-456-7890</span>&nbsp;</td>
							</tr>
							<tr>
								<td class="leftformat"><b>Subscrip. Email</b></td>
								<td><a id="Main_HyperlinkSubscriptionEmail" href="#"></a>&nbsp;</td>
							</tr>
							<tr>
								<td class="leftformat"><b>Other Email</b></td>
								<td><a id="Main_HyperlinkOtherEmail" href="#"></a>&nbsp;</td>
							</tr>
							<tr>
								<td class="leftformat" valign="top"><b>Title</b></td>
								<td><span id="Main_LblTitle"></span>&nbsp;</td>
							</tr>
							<tr>
								<td class="leftformat" valign="top"><b>Company</b></td>
								<td><span id="Main_LblCompany"></span>&nbsp;</td>
							</tr>
						</table>

					</td>
					<td valign="top">

						<table border="0" cellpadding="0" cellspacing="0" width="325px" style="margin-top:7px;" class="smallBlackText tdYellowBorder">
							<tr>
								<td class="leftformat"><b>Classification</b></td>
								<td><span id="Main_LblClassification">Resident</span>&nbsp;</td>
							</tr>
							<tr id="Main_TRHFC">
								<td class="leftformat"><b>HFC Class.</b></td>
								<td><span id="Main_LblHFC"></span>&nbsp;</td>
							</tr>

							<tr>
								<td class="leftformat"><b>Volunteer</b></td>
								<td><span id="Main_LblVolunteer"></span>&nbsp;</td>
							</tr>
							<tr>
								<td class="leftformat"><b>Spouse</b></td>
								<td><span id="Main_LblSpouse">John</span>&nbsp;</td>
							</tr>
							<tr>
								<td class="leftformat"><b>Gender</b></td>
								<td><span id="Main_LblGender">F</span>&nbsp;</td>
							</tr>


							<tr id="Main_DivHomeNumber">
								<td class="leftformat"><b>Home Number</b></td>
								<td><span id="Main_LblHomeNumber">MBA110</span>&nbsp;</td>
							</tr>

							<tr id="Main_DivCareType">
								<td class="leftformat"><b>Care Type</b></td>
								<td><span id="Main_LblCareType">IL</span>&nbsp;</td>
							</tr>

							<tr id="Main_DivResidentSince">
								<td class="leftformat"><b>Resident Since</b></td>
								<td><span id="Main_LblResidentSince">04/28/2014</span>&nbsp;</td>
							</tr>

							<tr id="Main_DivExpireDate">
								<td colspan="2"><b>Move Out/Deceased Date</b>&nbsp;&nbsp;&nbsp;
									<span id="Main_LblExpireDate"></span>&nbsp;</td>
								</tr>

								<tr>
									<td class="leftformat"><b>Date Created</b></td>
									<td><span id="Main_LblDateCreated">04/27/11</span>&nbsp;</td>
								</tr>
								<tr>
									<td class="leftformat"><b>Last Update</b></td>
									<td><span id="Main_LblLastUpdate">08/11/15 By: JAR2</span>&nbsp;</td>
								</tr>
							</table>

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

				<div align="left">
					<div style="margin:25px 0 5px 10px; text-align:left;"><span class="smallBlackText"><b>Contact Protocol</b></span><span id="Main_LblProtocol" class="smallBlackText">&nbsp;&nbsp;&nbsp;None specified</span></div>

				</div>

				<br />

				<div>

					<table cellpadding="0" cellspacing="0" border="0" width="825px" style="text-align:left; margin-top:10px;">
						<tr>
							<td align="left" class="mediumGreenText" width="375px"><u>Mailing address</u><br /><br />

								<table cellpadding="1" cellspacing="0" border="0" width="350px" class="smallBlackText tdYellowBorder">
									<tr>
										<td class="leftformat"><b>Street</b></td>
										<td><span id="Main_LblMailingStreet1">123 Main St.</span>&nbsp;</td>
									</tr>
									<tr>
										<td class="leftformat"><b>Street 2</b></td>
										<td><span id="Main_LblMailingStreet2"></span>&nbsp;</td>
									</tr>
									<tr>
										<td class="leftformat"><b>City</b></td>
										<td><span id="Main_LblMailingCity">Portland</span>&nbsp;</td>
									</tr>
									<tr>
										<td class="leftformat"><b>State</b></td>
										<td><span id="Main_LblMailingState">OR</span>&nbsp;</td>
									</tr>
									<tr>
										<td class="leftformat"><b>Postal Code</b></td>
										<td><span id="Main_LblMailingPostalCode">97214</span>&nbsp;</td>
									</tr>
									<tr>
										<td class="leftformat"><b>Country</b></td>
										<td><span id="Main_LblMailingCountry"></span>&nbsp;</td>
									</tr>
								</table>

							</td><td align="left" class="mediumGreenText"><u>Other address</u><br /><br />

							<table cellpadding="1" cellspacing="0" border="0" width="350px" class="smallBlackText tdYellowBorder">
								<tr>
									<td class="leftformat"><b>Street</b></td>
									<td><span id="Main_LblStreet1"></span>&nbsp;</td>
								</tr>
								<tr>
									<td class="leftformat"><b>Street 2</b></td>
									<td><span id="Main_LblStreet2"></span>&nbsp;</td>
								</tr>
								<tr>
									<td class="leftformat"><b>City</b></td>
									<td><span id="Main_LblCity"></span>&nbsp;</td>
								</tr>
								<tr>
									<td class="leftformat"><b>State</b></td>
									<td><span id="Main_LblState"></span>&nbsp;</td>
								</tr>
								<tr>
									<td class="leftformat"><b>Postal Code</b></td>
									<td><span id="Main_LblPostalCode"></span>&nbsp;</td>
								</tr>
								<tr>
									<td class="leftformat"><b>Country</b></td>
									<td><span id="Main_LblCountry"></span>&nbsp;</td>
								</tr>
							</table>

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

			</div>

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



<div id="Main_DivJournal">
	<table cellspacing="0" cellpadding="3" border="0" style="border-top:5px solid #A64285; margin-top:10px; width:850px; text-align:left;">
		<tr>
			<td><b>Journal</b>&nbsp;<span class="smallBlackText">Operations (sales please use sales tab)</span></td>
			<td>
				<a href="personnotes.aspx?id=57465" class="abutton">View All</a>
				<a id="Main_HyperLinkAddNewNote" class="abutton" onclick="addNewNote()" href="javascript:void(0)">Add</a>
			</td>
		</tr>
		<tr>
			<td colspan="2" style="border-top:2px solid #A64285; background-color:#fafafa">&nbsp;</td>
		</tr>
		<tr>
			<td colspan="2"> 

				<table cellpadding="2" cellspacing="0" style="margin-left:10px;" class="smallBlackText">
					<tr>
						<td>
							<span id="Main_LblNoteLastUpdate">Last update: 04/24/15&nbsp;&nbsp;<span class=redstar style=font-size:11px>*Notes shared*</span><br /><br /></span>
							<span id="Main_LblNotes">*** 4/24/2015 3:35:11 PM DMI2/Rita Garner *** 
								<br />Outcome/General discovery: LM regarding needing POA and Healthcare Directive
							</span>
							</td>
						</tr>
					</table>

				</td>
			</tr>
		</table>
	</div>



	<br /><br />
	<div align="center" style="border-top:2px solid #eeeef8; width:850px;"><br /></div>

</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br />



<script type="text/javascript">
//<![CDATA[
document.getElementById('HyperlinkMainHelp').style.color='#ffff00';//]]>
</script>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>

<br /><br />



</body></html>

CSS

            
              body {background:#ffffff; color:#333333;
font-family: Verdana, Tahoma, Trebuchet MS, Sans-Serif, Georgia, Courier, Times New Roman, Serif, Arial;
font-size:13px; margin:1px; padding:0; overflow-y:auto;} /* overflow-y:auto; ie10 right scrollbar */

form {margin:0;}
input,select,option,textarea {color:#333333; font-family:verdana,arial; font-size:13px;}
input,textarea {-webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
input,select,textarea {outline:none;}
textarea{resize:none; -webkit-appearance:none;}
iframe {display:block;} /* removes margin bottom */

/* *+html select {height:22px;} ie7 */

input.textSuperWide {width:400px;}
input.textExtraWide {width:250px;}
input.textWide {width:150px;}
input.textMedium {width:100px;}
input.textSmall{width:50px;}
input.textSuperWide, input.textExtraWide, input.textWide, input.textMedium, input.textSmall, textarea {padding-right:2px; /*ie8 bug */
border-bottom:solid 1px silver; border-left:solid 1px #696969; border-top:solid 1px #696969; border-right:solid 1px silver;
-webkit-appearance:none; /* ipad shadow */
padding-left:1px;} /* chrome */

table.main {border-style:solid; border-color:lavender; border-width:1px; border-collapse:collapse;}
td.front {border-style:solid; border-color:#006B54; border-width:1px; border-collapse:collapse;}
/*td.collapse {font-family:verdana,arial; font-size:13px; color:#333333; border-style:solid; border-width:1px; border-color:lavender;} use when top row needs different colspan */
td.main {font-family:verdana,arial; font-size:13px; color:#333333;}
.tdSilver, .tdSilverBottom{border-collapse:collapse;}
.tdSilver td{border:solid 1px silver;}
.tdSilverBottom td{border-bottom:solid 1px silver;}

a.link {text-decoration:none; color:#3152a5;}
a.link:visited {color:#3152a5;}
a.link:hover {color:#6B6BB3;}

img.menu {vertical-align:middle; margin-bottom:2px; margin-top:1px;}
img.shadow {-webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; box-shadow:2px 2px 2px #aaaaaa; border:1px solid #eeeeee;}

a.bizHeader {font-size:13px; color:#0000D9;}
a.biz {font-size:11px; color:#0000D9;}
a.bizHeaderBorder {font-size:13px; color:#0000D9; border-style:solid; border-width:1px; border-color:#fff;}
a.biz:visited, a.bizHeader:visited, a.bizHeaderBorder:visited {color:#0000D9;}
a.biz:hover, a.bizHeader:hover, a.bizHeaderBorder:hover {color:#6B6BB3;}

.mainback {background:url(/employee/images/green/mainback.jpg); background-color:#4BA069;}
.subback {background:url(/employee/images/green/subback.jpg); font-size:13px; background-color:#C3DFC6;}
.mainbackText {border:0px; color:#fff; font-size:13px; font-weight:bold; padding:3px 0 3px 3px;}
.topBar {margin:1px; padding:1px 0 2px 5px; background:url(/employee/mages/green/topbar.jpg); background-repeat:repeat-y; background-color:#eeeeee;}
.topDate {color:#fff; font-size:10px;}

.touchbutton {font-family:verdana,arial; font-size:13px; color:#333333; border-top:1px solid #F0F8FF; border-right:1px solid #8282AF; border-bottom:1px solid #8282AF; border-left:1px solid #F0F8FF; background:#fff url(/employee/images/green/form.gif) repeat-x top left;}
.divider {color:gray; font-size:9px;}
.lineHeight {line-height:150%;}
.lineHeight170 {line-height:170%;}
.error {font-family:verdana,arial; font-size:13px; color:#e41b17;font-weight:bold;}
.redstar {font-family:verdana,arial; font-size:13px; color:#e41b17;}
.mediumBlackText {font-family:verdana,arial; font-size:13px; color:#333333;}
.smallBlackText {font-family:verdana,arial; font-size:11px; color:#333333;}
.smallBlueText {font-family:verdana,arial; font-size:11px; color:#3868B0;}
.mediumGreenText {font-family:verdana,arial; font-size:13px; color:#006B54;}
.greenTable {background-color:#E6F0E6; border-width:1px; border-style:solid; border-bottom-color:#696969; border-left-color:Silver; border-top-color:Silver; border-right-color:#696969;}
.whiteTable {background-color:#fff; border-width:1px; border-style:solid; border-bottom-color:#696969; border-left-color:Silver; border-top-color:Silver; border-right-color:#696969;}
.admindrop{background-color:#FFFAE5;}
input.required,select.required,option.required,textarea.required{background-color:#fff1df;}

.ce .ajax__calendar_container{text-align:center; border:1px solid #646464; width:200px; padding:1px; background-color:white; font-family:verdana,arial; font-size:13px; z-index:10001;}
.ce .ajax__calendar_body{width:200px;}
.ce .ajax__calendar_days .ajax__calendar_dayname{font-family:verdana,arial; font-size:13px; padding:5px;}
.ce .ajax__calendar_days .ajax__calendar_day {font-family:verdana,arial; font-size:13px; padding:1px;}
.ce .ajax__calendar_other .ajax__calendar_day{color:silver;}
.ce .ajax__calendar_header{background-color:#eeeeee; text-decoration:underline; color:Blue;}
.ce .ajax__calendar_footer{font-size:11px;}
.ce .ajax__calendar_active .ajax__calendar_day,
.ajax__calendar_active .ajax__calendar_month,
.ajax__calendar_active .ajax__calendar_year {color:black; font-weight:bold;}
.ce .ajax__calendar_title {border:none;} /* Fixes the previous and next buttons in the popup title IE8 */
.ce .ajax__calendar_days td, .ajax__calendar_months td, .ajax__calendar_years td{border-width:0;}/* stops inheritance */

#barTable {width:90%;} /* initial loads */
#TableMain {width:80%;}
#LightBoxWork {position:fixed; width:100%; height:10000px;} /* ipad safari ignores height:100% */
.popfixed{position:fixed;}

.imgButWebKit {-webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px;} /* calendar image button */
.AutoExtender {font-family:Verdana, Helvetica, sans-serif; font-size:13px; border:solid 1px #006699;
line-height:22px; padding:10px; background-color:#ffffff; margin:1px 0 0 0; min-width:180px;}
.AutoExtenderList {border-bottom:dotted 1px #006699; cursor:pointer; color:maroon; list-style:none;}
.AutoExtenderHighlight {color:#ffffff; background-color:#006699; cursor:pointer; border-bottom:solid 1px #006699; list-style:none;}
td.grayborder,th.grayborder {border-bottom:2px solid #696969; padding:5px 0;}
td.yellowborder{border-bottom:1px solid #cccc99; padding:5px 0;}
td.leftformat {width:35%; white-space:nowrap;}
a.abutton {border-top:1px solid #F0F8FF; border-right:1px solid #8282AF; border-bottom:1px solid #8282AF; border-left:1px solid #F0F8FF; background:#fff url(/employee/images/green/form.gif) repeat-x top left; text-decoration:none; font-size:11px; font-weight:bold; color:#333333; padding:2px 4px; float:right; margin-left:6px;
-webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
a.abutton:visited {color:#333333;}
a.abutton:hover {color:#696969;}
/* input.editbox {height:13px; font-size:11px;} */
/* select.editbox {font-size:11px;} */
#custom ul {list-style:none; margin-left:0; padding-left:1em; text-indent:-1em;}
#custom li {list-style-image:none; list-style-type:none; margin-top:1em;}

.tdYellowBorder td{border-bottom:1px solid #cccc99; padding:5px 0;}
.tab7On, .tab7Off{-moz-border-radius-topright:5px; border-top-right-radius:5px; -moz-border-radius-topleft:5px; border-top-left-radius:5px;
padding:4px 10px 0 10px; height:20px;}
.tab7On, .tab7Off a {font-weight:bold;}
.tab7On{background:#A69CC3; border:solid 1px #8A7CB1;}
.tab7Off{background:#B0B8CF; border:solid 1px #909BBB;}
.tab7On a {text-decoration:underline; color:#000;}
.tab7On a:visited {color:#000;}
.tab7Off a {text-decoration:none; color:#fff;}
.tab7Off a:visited {color:#fff;}
.tab7Off a:hover {text-decoration:underline; color:#000;}
.tab7TD{padding:0 2px 0 0;}

JS

            
              /**************************************************
 * dom-drag.js
 * 09.25.2001
 * www.youngpup.net
 * Script featured on Dynamic Drive (http://www.dynamicdrive.com) 12.08.2005
 **************************************************
 * 10.28.2001 - fixed minor bug where events
 * sometimes fired off the handle, not the root.
 **************************************************/

var Drag = {

	obj : null,

	init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
	{
		o.onmousedown	= Drag.start;

		o.hmode			= bSwapHorzRef ? false : true ;
		o.vmode			= bSwapVertRef ? false : true ;

		o.root = oRoot && oRoot != null ? oRoot : o ;

		if (o.hmode  && isNaN(parseInt(o.root.style.left  ))) o.root.style.left   = "0px";
		if (o.vmode  && isNaN(parseInt(o.root.style.top   ))) o.root.style.top    = "0px";
		if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right  = "0px";
		if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";

		o.minX	= typeof minX != 'undefined' ? minX : null;
		o.minY	= typeof minY != 'undefined' ? minY : null;
		o.maxX	= typeof maxX != 'undefined' ? maxX : null;
		o.maxY	= typeof maxY != 'undefined' ? maxY : null;

		o.xMapper = fXMapper ? fXMapper : null;
		o.yMapper = fYMapper ? fYMapper : null;

		o.root.onDragStart	= new Function();
		o.root.onDragEnd	= new Function();
		o.root.onDrag		= new Function();
	},

	start : function(e)
	{
		var o = Drag.obj = this;
		e = Drag.fixE(e);
		var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
		var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
		o.root.onDragStart(x, y);

		o.lastMouseX	= e.clientX;
		o.lastMouseY	= e.clientY;

		if (o.hmode) {
			if (o.minX != null)	o.minMouseX	= e.clientX - x + o.minX;
			if (o.maxX != null)	o.maxMouseX	= o.minMouseX + o.maxX - o.minX;
		} else {
			if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
			if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
		}

		if (o.vmode) {
			if (o.minY != null)	o.minMouseY	= e.clientY - y + o.minY;
			if (o.maxY != null)	o.maxMouseY	= o.minMouseY + o.maxY - o.minY;
		} else {
			if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
			if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
		}

		document.onmousemove	= Drag.drag;showHideIframes('hidden');
		document.onmouseup		= Drag.end;

		return false;
	},

	drag : function(e)
	{
		e = Drag.fixE(e);
		var o = Drag.obj;

		var ey	= e.clientY;
		var ex	= e.clientX;
		var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
		var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
		var nx, ny;

		if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
		if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
		if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
		if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);

		nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
		ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));

		if (nx < 0) {nx=0;}
		if (ny < 0) {ny=0;}
		
		if (o.xMapper)		nx = o.xMapper(y)
		else if (o.yMapper)	ny = o.yMapper(x)

		Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
		Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
		
		Drag.obj.lastMouseX	= ex;
		Drag.obj.lastMouseY	= ey;

		Drag.obj.root.onDrag(nx, ny);
		return false;
	},

	end : function()
	{
		document.onmousemove = null;
		document.onmouseup   = null;
		Drag.obj.root.onDragEnd(	parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]), 
									parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
						
		Drag.obj = null;
		showHideIframes('visible');
	},

	fixE : function(e)
	{
		if (typeof e == 'undefined') e = window.event;
		if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
		if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
		return e;
	}
	
	
};

function showHideIframes(visibility){
var ifrs=document.getElementsByTagName('iframe');
var border=(visibility=='hidden')? '':'none';
var a=document.getElementById('DivBlock');
    for (var i=0; i<ifrs.length; i++){
    //ifrs[i].style.bgColor=border;
    a.style.display=border;
    }
}

//end dom drag

function setIndexOff(a) {

var temp=document.getElementsByTagName('input');
for(i=0; i<temp.length; i++) {
    temp[i].tabIndex=-1;
}

temp=document.getElementsByTagName('select');
for(i=0; i<temp.length; i++) {
    temp[i].tabIndex=-1;
}

temp=document.getElementsByTagName('textarea');
for(i=0; i<temp.length; i++) {
    temp[i].tabIndex=-1;
}

temp=document.getElementsByTagName('a');
for(i=0; i<temp.length; i++) {
    temp[i].tabIndex=-1;
}

//set back div
var divchild=a.getElementsByTagName('input');
for(i=0; i<divchild.length; i++) {
    divchild[i].tabIndex=0;
}

divchild=a.getElementsByTagName('select');
for(i=0; i<divchild.length; i++) {
    divchild[i].tabIndex=0;
}

divchild=a.getElementsByTagName('textarea');
for(i=0; i<divchild.length; i++) {
    divchild[i].tabIndex=0;
}

divchild=a.getElementsByTagName('a');
for(i=0; i<divchild.length; i++) {
    divchild[i].tabIndex=0;
}
}

function setIndexOn() {

var temp=document.getElementsByTagName('input');
for(i=0; i<temp.length; i++) {
    temp[i].tabIndex=0;
}

temp=document.getElementsByTagName('select');
for(i=0; i<temp.length; i++) {
    temp[i].tabIndex=0;
}

temp=document.getElementsByTagName('textarea');
for(i=0; i<temp.length; i++) {
    temp[i].tabIndex=0;
}

temp=document.getElementsByTagName('a');
for(i=0; i<temp.length; i++) {
    temp[i].tabIndex=0;
}
}

// check for session cookies
document.cookie = "test=cookiesEnabled";
var pos = document.cookie.indexOf( "test=" );
if( pos == -1 ) {
document.write('<h2><center><font color=\"red\">Your browser has cookies disabled.<br><br>This site needs to have it enabled.<br><br>');
document.write('</font></center></h2>');
}

//// flashing help
//var intCounterHelp=0;
//var intMinuteHelp=0;
//var fncFunction='';
//var twoMinutes=window.setInterval(twoMinuteTimer, 1000);

//function twoMinuteTimer(){
//intMinuteHelp++;
//if (intMinuteHelp>120) {killHelp();}
//}

//function flashHelpLink(){
//    if (intCounterHelp<=15) {
//        intCounterHelp++;
//        changeHelpLinkColor();
//    } else {
//        stopHelp();
//        if (intMinuteHelp<120) {
//            startHelp();
//        } else {
//            killHelp();
//        }
//    }
//}

//function changeHelpLinkColor() {
//var elm=document.getElementById('HyperlinkMainHelp');
//if (colorToHex(elm.style.color)=='#ffff00') {
//    elm.style.color='#0000D9';
//} else {
//    elm.style.color='#ffff00';
//}
//}

//function initHelp() {
//fncFunction=window.setInterval(flashHelpLink, 150);
//}

//function stopHelp() {
//fncFunction=window.clearInterval(fncFunction);
//intCounterHelp=0;
//}

//function startHelp() {
//window.setTimeout('initHelp();',10000);
//}

//function killHelp() {
//intCounterHelp=1000;
//intMinuteHelp=1000;
//twoMinutes=window.clearInterval(twoMinutes);
//}

//function resetColor() {
//var elm=document.getElementById('HyperlinkMainHelp');
//if (elm) {elm.style.color='#ffff00';};
//}

//function colorToHex(c) {
//var m = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/.exec(c);
//return m ? '#' + (1 << 24 | m[1] << 16 | m[2] << 8 | m[3]).toString(16).substr(1) : c;
//}

//var trackerMainHelp=null;

//if (window.addEventListener) {
//	window.addEventListener('load', trackLoadMainHelp, false);
//} else if (window.attachEvent) {
//	window.attachEvent('onload', trackLoadMainHelp);
//}
////window.onload = function trackLoadMainHelp() {
//function trackLoadMainHelp() {
//if(trackerMainHelp) {clearTimeout(trackerMainHelp);}
//var elmHyperlinkMainHelp=document.getElementById('HyperlinkMainHelp');
//    if(elmHyperlinkMainHelp) {
//        elmHyperlinkMainHelp.onclick=function() {killHelp();resetColor();};
//    } else {
//        trackerMainHelp=setTimeout("trackLoadMainHelp()",1000);
//    }
//}
//// end flashing help

999px

Loading ..................

Insecure Resource

About JavaScript Preprocessors

About External Resources

HTML

CSS

JS

Console

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Use npm Packages

Code Indentation

Save Automatically?

Auto-Updating Preview

HTML

CSS

JS

Console

Editor Commands

HTML Specific

Misc

Pen Actions