整理demo+UI

2019-10-30 18:02:09 +08:00
parent 48ae81c20e
commit dcf1065c04
150 changed files with 1228 additions and 0 deletions
--- a/demo/data/document.js
+++ b/demo/data/document.js
@@ -0,0 +1,7 @@
+$axure.loadDocument(
+(function() {
+    var _ = function() { var r={},a=arguments; for(var i=0; i<a.length; i+=2) r[a[i]]=a[i+1]; return r; }
+    var _creator = function() { return _(b,_(c,d,e,f,g,d,h,d,i,d,j,k,l,d,m,f,n,f,o,d,p,f),q,_(r,[_(s,t,u,v,w,x,y,z),_(s,A,u,B,w,x,y,C),_(s,D,u,E,w,x,y,F)]),G,[H,I,J],K,[L,M,N],O,_(P,Q),R,_(S,_(s,T,U,V,W,X,Y,Z,ba,bb,bc,_(bd,be,bf,bg,bh,bi),bj,bk,bl,f,bm,bn,bo,Z,bp,Z,bq,br,bs,f,bt,_(bu,bv,bw,bv),bx,_(by,bv,bz,bv),bA,d,bB,f,bC,T,bD,_(bd,be,bf,bE),bF,_(bd,be,bf,bG),bH,bI,bJ,be,bh,bI,bK,bL,bM,bN,bO,bP,bQ,bP,bR,bP,bS,bP,bT,_(),bU,null,bV,null,bW,bL,bX,_(bY,f,bZ,ca,cb,ca,cc,ca,bf,_(cd,ce,cf,ce,cg,ce,ch,ci)),cj,_(bY,f,bZ,bv,cb,ca,cc,ca,bf,_(cd,ce,cf,ce,cg,ce,ch,ci)),ck,_(bY,f,bZ,bi,cb,bi,cc,ca,bf,_(cd,ce,cf,ce,cg,ce,ch,cl)),cm,cn),co,_(cp,_(s,cq),bU,_(s,cr,bH,bL),cs,_(s,ct,U,V,W,X,Y,Z,ba,bb,bc,_(bd,be,bf,cu,bh,bi),bj,cv,bF,_(bd,be,bf,cw),bH,bI,bJ,be,bK,cx,bD,_(bd,be,bf,bE),bm,bn,bM,bN,bO,cy,bQ,cz,bR,cy,bS,cz),cA,_(s,cB,U,V,W,X,Y,Z,ba,bb,bc,_(bd,be,bf,bE,bh,bi),bj,cv,bF,_(bd,be,bf,cC),bH,bI,bJ,be,bK,cx,bD,_(bd,be,bf,cC),bm,bn,bM,bN,bO,cy,bQ,cz,bR,cy,bS,cz),cD,_(s,cE,bH,bL,bD,_(bd,be,bf,cF)),cG,_(s,cH,bj,cI,W,cJ,bH,bL,bD,_(bd,be,bf,cK),bm,cL,bM,cM,bO,bL,bQ,bL,bR,bL,bS,bL),cN,_(s,cO,bj,cP,W,cJ,bH,bL,bD,_(bd,be,bf,cK),bm,cL,bM,cM,bO,bL,bQ,bL,bR,bL,bS,bL),cQ,_(s,cR,bj,cS,W,cJ,bH,bL,bD,_(bd,be,bf,cK),bm,cL,bM,cM,bO,bL,bQ,bL,bR,bL,bS,bL),cT,_(s,cU,bj,cv,W,cJ,bH,bL,bD,_(bd,be,bf,cK),bm,cL,bM,cM,bO,bL,bQ,bL,bR,bL,bS,bL),cV,_(s,cW,W,cJ,bH,bL,bD,_(bd,be,bf,cK),bm,cL,bM,cM,bO,bL,bQ,bL,bR,bL,bS,bL),cX,_(s,cY,bj,cZ,W,cJ,bH,bL,bD,_(bd,be,bf,cK),bm,cL,bM,cM,bO,bL,bQ,bL,bR,bL,bS,bL),da,_(s,db,bj,cv,bH,bL,bD,_(bd,be,bf,cK),bm,cL,bM,cM,bO,bL,bQ,bL,bR,bL,bS,bL),dc,_(s,dd,bH,bL,bD,_(bd,be,bf,bg)),de,_(s,df,bH,bL,bD,_(bd,be,bf,cK),bm,cL,bM,cM,bO,bL,bQ,bL,bR,bL,bS,bL),dg,_(s,dh,bc,_(bd,be,bf,di,bh,bi)),dj,_(s,dk,bD,_(bd,be,bf,dl)),dm,_(s,dn,bD,_(bd,dp,dq,_(bu,dr,bw,bv),ds,_(bu,dr,bw,bi),dt,[_(bf,bE,du,bv),_(bf,cF,du,bv),_(bf,dv,du,bi),_(bf,bE,du,bi)])),dw,_(s,dx,bF,_(bd,be,bf,cF)),dy,_(s,dz,bH,bb,bD,_(bd,be,bf,cK)),dA,_(s,dB,bc,_(bd,be,bf,dC,bh,bi),bm,cL,bM,bN),dD,_(s,dE,bc,_(bd,be,bf,dC,bh,bi),bm,cL,bM,cM),dF,_(s,dG,bc,_(bd,be,bf,bE,bh,bi),bD,_(bd,be,bf,dH),bH,bL,bK,bP),dI,_(s,dJ),dK,_(s,dL,bD,_(bd,be,bf,cF),bH,bL),dM,_(s,dN,U,dO,W,dP,bc,_(bd,be,bf,dQ,bh,bi),bj,dR,bm,cL,bH,bL),dS,_(s,dT,bj,dR,bF,_(bd,be,bf,dQ),bK,dU,bX,_(bY,f,bZ,bv,cb,bv,cc,dV,bf,_(cd,dW,cf,dX,cg,dY,ch,dZ))),ea,_(s,eb,bj,dR,bF,_(bd,be,bf,dQ),bH,bL,bK,dU,bX,_(bY,d,bZ,bv,cb,bv,cc,dV,bf,_(cd,dW,cf,dX,cg,dY,ch,dZ))),ec,_(s,ed,bF,_(bd,be,bf,dv),bH,bI,bX,_(bY,d,bZ,bv,cb,ee,cc,ef,bf,_(cd,ce,cf,ce,cg,ce,ch,eg))),eh,_(s,ei,U,ej,bc,_(bd,be,bf,cu,bh,bi),bj,cv,bF,_(bd,be,bf,cw),bH,bI,bJ,be,bK,cx,bD,_(bd,be,bf,bE),bm,cL,bM,bN,bO,ek,bQ,bL,bR,ek,bS,bL),el,_(s,em,U,ej,bc,_(bd,be,bf,cu,bh,bi),bj,cv,bH,bL,bJ,be,bm,cL,bM,bN,bO,en,bQ,bL,bR,eo,bS,bL),ep,_(s,eq,bF,_(bd,be,bf,cw),bH,bI,bJ,be,bK,bP,bD,_(bd,be,bf,bE)),er,_(s,es,U,ej,bc,_(bd,be,bf,cC,bh,bi),bj,cv,bH,bL,bJ,be,bm,cL,bM,bN,bO,en,bQ,bL,bR,eo,bS,bL),et,_(s,eu,bF,_(bd,be,bf,cC),bH,bI,bJ,be,bK,bP,bD,_(bd,be,bf,cC)),ev,_(s,ew)),ex,_(ey,cr,ez,cq,eA,df)));}; 
+var b="configuration",c="showPageNotes",d=true,e="showPageNoteNames",f=false,g="showAnnotations",h="showAnnotationsSidebar",i="showConsole",j="linkStyle",k="displayMultipleTargetsOnly",l="linkFlowsToPages",m="linkFlowsToPagesNewWindow",n="useLabels",o="useViews",p="loadFeedbackPlugin",q="sitemap",r="rootNodes",s="id",t="obs1oq",u="pageName",v="Security Policy Create",w="type",x="Wireframe",y="url",z="security_policy_create.html",A="54yxm3",B="Security Policy List",C="security_policy_list.html",D="06vijp",E="材料",F="材料.html",G="additionalJs",H="plugins/sitemap/sitemap.js",I="plugins/page_notes/page_notes.js",J="plugins/debug/debug.js",K="additionalCss",L="plugins/sitemap/styles/sitemap.css",M="plugins/page_notes/styles/page_notes.css",N="plugins/debug/styles/debug.css",O="globalVariables",P="onloadvariable",Q="",R="stylesheet",S="defaultStyle",T="627587b6038d43cca051c114ac41ad32",U="fontName",V="'ArialMT', 'Arial'",W="fontWeight",X="400",Y="fontStyle",Z="normal",ba="fontStretch",bb="5",bc="foreGroundFill",bd="fillType",be="solid",bf="color",bg=0xFF333333,bh="opacity",bi=1,bj="fontSize",bk="13px",bl="underline",bm="horizontalAlignment",bn="center",bo="lineSpacing",bp="characterSpacing",bq="letterCase",br="none",bs="strikethrough",bt="location",bu="x",bv=0,bw="y",bx="size",by="width",bz="height",bA="visible",bB="limbo",bC="baseStyle",bD="fill",bE=0xFFFFFFFF,bF="borderFill",bG=0xFF797979,bH="borderWidth",bI="1",bJ="linePattern",bK="cornerRadius",bL="0",bM="verticalAlignment",bN="middle",bO="paddingLeft",bP="2",bQ="paddingTop",bR="paddingRight",bS="paddingBottom",bT="stateStyles",bU="image",bV="imageFilter",bW="rotation",bX="outerShadow",bY="on",bZ="offsetX",ca=5,cb="offsetY",cc="blurRadius",cd="r",ce=0,cf="g",cg="b",ch="a",ci=0.349019607843137,cj="innerShadow",ck="textShadow",cl=0.647058823529412,cm="viewOverride",cn="19e82109f102476f933582835c373474",co="customStyles",cp="shape",cq="40519e9ec4264601bfb12c514e4f4867",cr="75a91ee5b9d042cfa01b8d565fe289c0",cs="el-button",ct="c04c1e8b87924b32bbab89956f07f0f5",cu=0xFF606266,cv="14px",cw=0xFFDCDFE6,cx="4",cy="20",cz="12",cA="el-button-primary",cB="da384a9ff2ad42c584e5fd6af5d3e9fa",cC=0xFF409EFF,cD="box_2",cE="e1085ab5b18a4f05b4c3847d756c4fb4",cF=0xFFF2F2F2,cG="heading_1",cH="1111111151944dfba49f67fd55eb1f88",cI="32px",cJ="bold",cK=0xFFFFFF,cL="left",cM="top",cN="heading_2",cO="b3a15c9ddde04520be40f94c8168891e",cP="24px",cQ="heading_3",cR="8c7a4c5ad69a4369a5f7788171ac0b32",cS="18px",cT="heading_4",cU="e995c891077945c89c0b5fe110d15a0b",cV="heading_5",cW="386b19ef4be143bd9b6c392ded969f89",cX="heading_6",cY="fc3b9a13b5574fa098ef0a1db9aac861",cZ="10px",da="label",db="2285372321d148ec80932747449c36c9",dc="icon",dd="54b982cedb03476f8b3b7a763ec758e2",de="paragraph",df="4988d43d80b44008a4a415096f1632af",dg="form_hint",dh="4889d666e8ad4c5e81e59863039a5cc0",di=0xFF999999,dj="form_disabled",dk="9bd0236217a94d89b0314c8c7fc75f16",dl=0xFFF0F0F0,dm="flow_shape",dn="df01900e3c4e43f284bafec04b0864c4",dp="linearGradient",dq="startPoint",dr=0.5,ds="endPoint",dt="stops",du="offset",dv=0xFFE4E4E4,dw="line",dx="804e3bae9fce4087aeede56c15b6e773",dy="arrow",dz="d148f2c5268542409e72dde43e40043e",dA="text_field",dB="44157808f2934100b68f2394a66b2bba",dC=0xFF000000,dD="droplist",dE="85f724022aae41c594175ddac9c289eb",dF="_选项组_选中",dG="9fabcd7ab617491c8e5e9b8e6516413d",dH=0xFF31759C,dI="_选项组_未选中",dJ="dca23e606ee64fa28d569d737a28e626",dK="_内容",dL="7e898ce7da404093afdd5c6a8c95f3c3",dM="table_text",dN="7e5a2c33d56a4cb9bb764a3c1843551b",dO="'OpenSans-Light', 'Open Sans Light', 'Open Sans'",dP="200",dQ=0xFFD7D7D7,dR="12px",dS="_默认边框",dT="639f4a5e4c284fdcb276efbd31baa501",dU="6",dV=16,dW=49,dX=117,dY=156,dZ=0.298039215686275,ea="_弥散边框",eb="52bbbce3519f49b89ffc89fc8e100e00",ec="el-shadow",ed="b15c7ba917a848219e2d3e3608f41efd",ee=2,ef=12,eg=0.0980392156862745,eh="inputed",ei="6d851363870a4ac893edee6528302c64",ej="'PingFangSC-Regular', 'PingFang SC'",ek="15",el="checkbox-label-uncheck",em="8dbf051675ac49c4bee48f133e4b9992",en="10",eo="30",ep="checkbox-uncheck",eq="90973a924d7a46af9c8c69bae23c8b4f",er="checkbox-label-check",es="f0f1a14aa15248b59f4225ddb71952aa",et="checkbox-check",eu="3d247cec6176423d91aae5cca059dbb0",ev="box_1",ew="ff4f53abb54d4783912497ff0a8c8876",ex="duplicateStyles",ey="a2a60c45b87d410da919910177b749a5",ez="0952ed0c789b43f4af8f009e3f12ff3e",eA="bb099aeb4c9f45e2bc9e9848a50f89da";
+return _creator();
+})());
--- a/demo/data/styles.css
+++ b/demo/data/styles.css
@@ -0,0 +1,157 @@
+.ax_default {
+  font-family:'ArialMT', 'Arial';
+  font-weight:400;
+  font-style:normal;
+  font-size:13px;
+  letter-spacing:normal;
+  color:#333333;
+  vertical-align:none;
+  text-align:center;
+  line-height:normal;
+  text-transform:none;
+}
+.shape {
+}
+.image {
+}
+.el-button {
+  font-family:'ArialMT', 'Arial';
+  font-weight:400;
+  font-style:normal;
+  font-size:14px;
+  color:#606266;
+  text-align:center;
+}
+.el-button-primary {
+  font-family:'ArialMT', 'Arial';
+  font-weight:400;
+  font-style:normal;
+  font-size:14px;
+  color:#FFFFFF;
+  text-align:center;
+}
+.box_2 {
+}
+.heading_1 {
+  font-family:'ArialMT', 'Arial';
+  font-weight:bold;
+  font-style:normal;
+  font-size:32px;
+  text-align:left;
+}
+.heading_2 {
+  font-family:'ArialMT', 'Arial';
+  font-weight:bold;
+  font-style:normal;
+  font-size:24px;
+  text-align:left;
+}
+.heading_3 {
+  font-family:'ArialMT', 'Arial';
+  font-weight:bold;
+  font-style:normal;
+  font-size:18px;
+  text-align:left;
+}
+.heading_4 {
+  font-family:'ArialMT', 'Arial';
+  font-weight:bold;
+  font-style:normal;
+  font-size:14px;
+  text-align:left;
+}
+.heading_5 {
+  font-family:'ArialMT', 'Arial';
+  font-weight:bold;
+  font-style:normal;
+  text-align:left;
+}
+.heading_6 {
+  font-family:'ArialMT', 'Arial';
+  font-weight:bold;
+  font-style:normal;
+  font-size:10px;
+  text-align:left;
+}
+.label {
+  font-size:14px;
+  text-align:left;
+}
+.icon {
+}
+.paragraph {
+  text-align:left;
+}
+.form_hint {
+  color:#999999;
+}
+.form_disabled {
+}
+.flow_shape {
+}
+.line {
+}
+.arrow {
+}
+.text_field {
+  color:#000000;
+  text-align:left;
+}
+.droplist {
+  color:#000000;
+  text-align:left;
+}
+._选项组_选中 {
+  color:#FFFFFF;
+}
+._选项组_未选中 {
+}
+._内容 {
+}
+.table_text {
+  font-family:'OpenSans-Light', 'Open Sans Light', 'Open Sans';
+  font-weight:200;
+  font-style:normal;
+  font-size:12px;
+  color:#D7D7D7;
+  text-align:left;
+}
+._默认边框 {
+  font-size:12px;
+}
+._弥散边框 {
+  font-size:12px;
+}
+.el-shadow {
+}
+.inputed {
+  font-family:'PingFangSC-Regular', 'PingFang SC';
+  font-weight:400;
+  font-style:normal;
+  font-size:14px;
+  color:#606266;
+  text-align:left;
+}
+.checkbox-label-uncheck {
+  font-family:'PingFangSC-Regular', 'PingFang SC';
+  font-weight:400;
+  font-style:normal;
+  font-size:14px;
+  color:#606266;
+  text-align:left;
+}
+.checkbox-uncheck {
+}
+.checkbox-label-check {
+  font-family:'PingFangSC-Regular', 'PingFang SC';
+  font-weight:400;
+  font-style:normal;
+  font-size:14px;
+  color:#409EFF;
+  text-align:left;
+}
+.checkbox-check {
+}
+.box_1 {
+}
+textarea, select, input, button { outline: none; }
--- a/demo/files/security_policy_create/data.js
+++ b/demo/files/security_policy_create/data.js
--- a/demo/files/security_policy_create/styles.css
+++ b/demo/files/security_policy_create/styles.css
--- a/demo/files/security_policy_list/data.js
+++ b/demo/files/security_policy_list/data.js
--- a/demo/files/security_policy_list/styles.css
+++ b/demo/files/security_policy_list/styles.css
--- a/demo/files/材料/data.js
+++ b/demo/files/材料/data.js
@@ -0,0 +1,7 @@
+$axure.loadCurrentPage(
+(function() {
+    var _ = function() { var r={},a=arguments; for(var i=0; i<a.length; i+=2) r[a[i]]=a[i+1]; return r; }
+    var _creator = function() { return _(b,c,d,e,f,_(g,h,i,_(j,k,l,k)),m,[],n,_(h,o),p,[q],r,_(s,t,u,v,g,w,x,_(),y,[],z,_(A,B,C,D,E,_(F,G,H,I),J,null,K,L,L,M,N,O,null,P,Q,R,S,T,U,V,Q,W,X,_(F,G,H,Y),Z,Q,ba,bb,_(bc,bd,be,bf,bg,bf,bh,bf,H,_(bi,bj,bk,bj,bl,bj,bm,bn)),i,_(j,k,l,k)),bo,_(),bp,_(),bq,_(br,[_(bs,bt,bu,h,bv,bw,u,bx,by,bx,bz,bA,z,_(A,bB,i,_(j,bC,l,bD),J,null),bo,_(),bE,_(),bF,_(bG,bH)),_(bs,bI,bu,h,bv,bw,u,bx,by,bx,bz,bA,z,_(A,bB,i,_(j,bC,l,bD),bJ,_(bK,k,bL,bM),J,null),bo,_(),bE,_(),bF,_(bG,bN)),_(bs,bO,bu,h,bv,bw,u,bx,by,bx,bz,bA,z,_(A,bB,i,_(j,bC,l,bD),bJ,_(bK,k,bL,bP),J,null),bo,_(),bE,_(),bF,_(bG,bQ))])),bR,_(),bS,_(bT,_(bU,bV),bW,_(bU,bX),bY,_(bU,bZ)));}; 
+var b="url",c="材料.html",d="generationDate",e=new Date(1572416573270.29),f="defaultAdaptiveView",g="name",h="",i="size",j="width",k=0,l="height",m="adaptiveViews",n="sketchKeys",o="s0",p="variables",q="OnLoadVariable",r="page",s="packageId",t="8d71df56ed424c23a56583b3be8fdcde",u="type",v="Axure:Page",w="材料",x="notes",y="annotations",z="style",A="baseStyle",B="627587b6038d43cca051c114ac41ad32",C="pageAlignment",D="center",E="fill",F="fillType",G="solid",H="color",I=0xFFFFFFFF,J="image",K="imageAlignment",L="near",M="imageRepeat",N="auto",O="favicon",P="sketchFactor",Q="0",R="colorStyle",S="appliedColor",T="fontName",U="Applied Font",V="borderWidth",W="borderVisibility",X="borderFill",Y=0xFF797979,Z="cornerRadius",ba="cornerVisibility",bb="outerShadow",bc="on",bd=false,be="offsetX",bf=5,bg="offsetY",bh="blurRadius",bi="r",bj=0,bk="g",bl="b",bm="a",bn=0.349019607843137,bo="adaptiveStyles",bp="interactionMap",bq="diagram",br="objects",bs="id",bt="3889b89b5c0141f0a611b6260e3a47c8",bu="label",bv="friendlyType",bw="Image",bx="imageBox",by="styleType",bz="visible",bA=true,bB="75a91ee5b9d042cfa01b8d565fe289c0",bC=1919,bD=1097,bE="imageOverrides",bF="images",bG="normal~",bH="images/材料/u508.png",bI="adbe2316703046ba9fb1dd2e9bebd9d1",bJ="location",bK="x",bL="y",bM=1157,bN="images/材料/u509.png",bO="2fa6f431acdc46cd8416245cc6f55d43",bP=2314,bQ="images/材料/u510.png",bR="masters",bS="objectPaths",bT="3889b89b5c0141f0a611b6260e3a47c8",bU="scriptId",bV="u508",bW="adbe2316703046ba9fb1dd2e9bebd9d1",bX="u509",bY="2fa6f431acdc46cd8416245cc6f55d43",bZ="u510";
+return _creator();
+})());
--- a/demo/files/材料/styles.css
+++ b/demo/files/材料/styles.css
@@ -0,0 +1,108 @@
+body {
+  margin:0px;
+  background-image:none;
+  position:relative;
+  left:0px;
+  width:1919px;
+  margin-left:auto;
+  margin-right:auto;
+  text-align:left;
+}
+.form_sketch {
+  border-color:transparent;
+  background-color:transparent;
+}
+#base {
+  position:absolute;
+  z-index:0;
+}
+#u508_img {
+  border-width:0px;
+  position:absolute;
+  left:0px;
+  top:0px;
+  width:1919px;
+  height:1097px;
+}
+#u508 {
+  border-width:0px;
+  position:absolute;
+  left:0px;
+  top:0px;
+  width:1919px;
+  height:1097px;
+  display:flex;
+}
+#u508 .text {
+  position:absolute;
+  align-self:center;
+  padding:2px 2px 2px 2px;
+  box-sizing:border-box;
+  width:100%;
+}
+#u508_text {
+  border-width:0px;
+  word-wrap:break-word;
+  text-transform:none;
+  visibility:hidden;
+}
+#u509_img {
+  border-width:0px;
+  position:absolute;
+  left:0px;
+  top:0px;
+  width:1919px;
+  height:1097px;
+}
+#u509 {
+  border-width:0px;
+  position:absolute;
+  left:0px;
+  top:1157px;
+  width:1919px;
+  height:1097px;
+  display:flex;
+}
+#u509 .text {
+  position:absolute;
+  align-self:center;
+  padding:2px 2px 2px 2px;
+  box-sizing:border-box;
+  width:100%;
+}
+#u509_text {
+  border-width:0px;
+  word-wrap:break-word;
+  text-transform:none;
+  visibility:hidden;
+}
+#u510_img {
+  border-width:0px;
+  position:absolute;
+  left:0px;
+  top:0px;
+  width:1919px;
+  height:1097px;
+}
+#u510 {
+  border-width:0px;
+  position:absolute;
+  left:0px;
+  top:2314px;
+  width:1919px;
+  height:1097px;
+  display:flex;
+}
+#u510 .text {
+  position:absolute;
+  align-self:center;
+  padding:2px 2px 2px 2px;
+  box-sizing:border-box;
+  width:100%;
+}
+#u510_text {
+  border-width:0px;
+  word-wrap:break-word;
+  text-transform:none;
+  visibility:hidden;
+}
--- a/demo/images/security_policy_create/u184.svg
+++ b/demo/images/security_policy_create/u184.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="401px" height="2px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1170 -132 )">
+    <path d="M 1170 132.5  L 1570 132.5  " stroke-width="1" stroke="#f2f2f2" fill="none" />
+  </g>
+</svg>
--- a/demo/images/security_policy_create/u210.png
+++ b/demo/images/security_policy_create/u210.png
--- a/demo/images/security_policy_create/u281.svg
+++ b/demo/images/security_policy_create/u281.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="481px" height="2px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -395 -1361 )">
+    <path d="M 395 1361.5  L 875 1361.5  " stroke-width="1" stroke="#d7d7d7" fill="none" />
+  </g>
+</svg>
--- a/demo/images/security_policy_create/u79.svg
+++ b/demo/images/security_policy_create/u79.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="383px" height="2px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1180 -1200 )">
+    <path d="M 1180 1200.5  L 1562 1200.5  " stroke-width="1" stroke="#f2f2f2" fill="none" />
+  </g>
+</svg>
--- a/demo/images/security_policy_list/u315.svg
+++ b/demo/images/security_policy_list/u315.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="1239px" height="2px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -293 -78 )">
+    <path d="M 293 78.5  L 1531 78.5  " stroke-width="1" stroke="#f2f2f2" fill="none" />
+  </g>
+</svg>
--- a/demo/images/security_policy_list/u370.svg
+++ b/demo/images/security_policy_list/u370.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="629px" height="2px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -922 -1130 )">
+    <path d="M 922 1130.5  L 1550 1130.5  " stroke-width="1" stroke="#f2f2f2" fill="none" />
+  </g>
+</svg>
--- a/demo/images/security_policy_list/u416.svg
+++ b/demo/images/security_policy_list/u416.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px" height="12px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -793 -1094 )">
+    <path d="M 11.91 6.21  C 12.03 6.096  12.03 5.904  11.91 5.79  L 10.224 4.11  C 10.11 3.996  9.918 3.996  9.804 4.11  C 9.69 4.224  9.69 4.416  9.804 4.53  L 10.98 5.7  L 6.3 5.7  L 6.3 1.02  L 7.47 2.196  C 7.584 2.31  7.776 2.31  7.89 2.196  C 8.004 2.082  8.004 1.89  7.89 1.776  L 6.21 0.0899999999999997  C 6.096 -0.0240000000000003  5.904 -0.0240000000000003  5.79 0.0899999999999997  L 4.11 1.776  C 3.996 1.89  3.996 2.082  4.11 2.196  C 4.224 2.31  4.416 2.31  4.53 2.196  L 5.7 1.02  L 5.7 5.7  L 1.02 5.7  L 2.196 4.53  C 2.31 4.416  2.31 4.224  2.196 4.11  C 2.082 3.996  1.89 3.996  1.776 4.11  L 0.0899999999999997 5.79  C -0.0240000000000003 5.904  -0.0240000000000003 6.096  0.0899999999999997 6.21  L 1.776 7.89  C 1.89 8.004  2.082 8.004  2.196 7.89  C 2.31 7.776  2.31 7.584  2.196 7.47  L 1.02 6.3  L 5.7 6.3  L 5.7 10.98  L 4.53 9.804  C 4.416 9.69  4.224 9.69  4.11 9.804  C 3.996 9.918  3.996 10.11  4.11 10.224  L 5.79 11.91  C 5.904 12.024  6.096 12.024  6.21 11.91  L 7.89 10.224  C 8.004 10.11  8.004 9.918  7.89 9.804  C 7.776 9.69  7.584 9.69  7.47 9.804  L 6.3 10.98  L 6.3 6.3  L 10.98 6.3  L 9.804 7.47  C 9.69 7.584  9.69 7.776  9.804 7.89  C 9.918 8.004  10.11 8.004  10.224 7.89  L 11.91 6.21  Z " fill-rule="nonzero" fill="#000000" stroke="none" fill-opacity="0.596078431372549" transform="matrix(1 0 0 1 793 1094 )" />
+  </g>
+</svg>
--- a/demo/images/security_policy_list/u417.svg
+++ b/demo/images/security_policy_list/u417.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="12px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -831 -1094 )">
+    <path d="M 7 0.0177210365853656  L 13.9602272727273 6.42016006097561  L 9.64581853693182 6.42016006097561  L 9.64581853693182 11.9837080792683  L 4.35418146306818 11.9837080792683  L 4.35418146306818 6.42016006097561  L 0.0397727272727273 6.42016006097561  L 7 0.0177210365853656  Z M 5.11079545454545 11.2877286585366  L 8.88920454545454 11.2877286585366  L 8.88920454545454 5.7241806402439  L 12.1347212357955 5.7241806402439  L 7 1.00095274390244  L 1.86527876420455 5.7241806402439  L 5.11079545454545 5.7241806402439  L 5.11079545454545 11.2877286585366  Z " fill-rule="nonzero" fill="#000000" stroke="none" fill-opacity="0.596078431372549" transform="matrix(1 0 0 1 831 1094 )" />
+  </g>
+</svg>
--- a/demo/images/security_policy_list/u418.svg
+++ b/demo/images/security_policy_list/u418.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="14px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -811 -1092 )">
+    <path d="M 0 0  L 14 0  L 14 1.4  L 0 1.4  L 0 0  Z M 0 8.8921  L 7 2.1  L 14 8.8921  L 9.926 8.8921  L 9.9421 14  L 4.0761 14  L 4.0761 8.8921  L 0 8.8921  Z " fill-rule="nonzero" fill="#000000" stroke="none" fill-opacity="0.596078431372549" transform="matrix(1 0 0 1 811 1092 )" />
+  </g>
+</svg>
--- a/demo/images/security_policy_list/u435.svg
+++ b/demo/images/security_policy_list/u435.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="594px" height="2px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -283 -1140 )">
+    <path d="M 283 1140.5  L 876 1140.5  " stroke-width="1" stroke="#f2f2f2" fill="none" />
+  </g>
+</svg>
--- a/demo/images/security_policy_list/u446.svg
+++ b/demo/images/security_policy_list/u446.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="60.5px" height="31px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -828.5 -1337 )">
+    <path d="M 864 1364  L 876 1352.5  L 864 1341  L 864 1364  Z " fill-rule="nonzero" fill="#31759c" stroke="none" />
+    <path d="M 831 1352.5  L 867 1352.5  " stroke-width="5" stroke="#31759c" fill="none" />
+  </g>
+</svg>
--- a/demo/images/材料/u508.png
+++ b/demo/images/材料/u508.png
--- a/demo/images/材料/u509.png
+++ b/demo/images/材料/u509.png
--- a/demo/images/材料/u510.png
+++ b/demo/images/材料/u510.png
--- a/demo/index.html
+++ b/demo/index.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <title>Untitled Document</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <link type="text/css" href="resources/css/reset.css" rel="Stylesheet" />
+    <link type="text/css" href="resources/css/default.css" rel="Stylesheet" />
+    <link rel="shortcut icon" href="resources/images/favicon_play.ico" />
+    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600' rel='stylesheet'>
+
+    <script type="text/javascript">
+        if (location.href.toString().indexOf('file://localhost/') == 0) {
+            location.href = location.href.toString().replace('file://localhost/', 'file:///');
+        }
+    </script>
+
+    <!--<link type="text/css" rel="Stylesheet" href="plugins/sitemap/styles/sitemap.css" />
+    <link type="text/css" rel="Stylesheet" href="plugins/page_notes/styles/page_notes.css" />
+    <link type="text/css" rel="Stylesheet" href="plugins/debug/styles/debug.css" />
+    <link type="text/css" rel="Stylesheet" href="plugins/handoff/styles/handoff.css" />
+    <link type="text/css" rel="Stylesheet" href="plugins/handoff/styles/codemirror.css" />-->
+</head>
+<body scroll="no" class="hashover" style="overflow: hidden;">
+    <div id="topPanel">
+        <div id="interfaceControlFrame">
+            <div id="interfaceControlFrameLeft">
+                <div id="interfaceControlFrameMinimizeContainer">
+                    <a title="Collapse" id="interfaceControlFrameMinimizeButton">
+                        <div id="minimizeArrow" class="minimizeButtonHover minimizeIcon"></div>
+                        <div id="minimizeX" class="minimizeButton minimizeIcon"></div>
+                    </a>
+                </div>
+                <div id="interfaceControlFrameCloseContainer">
+                    <a title="Close" id="interfaceControlFrameCloseButton">CLOSE</a>
+                </div>
+
+                <div id="sitemapControlFrameContainer" title="Project Pages">
+                    <div id="projectControlFrameHeaderContainer">
+                        <ul id="projectControlFrameHeader"></ul>
+                    </div>
+                    
+                    <div id="interfacePageNameContainer">
+                        <div id="interfacePageNameButton" class='pageNameHeader'>
+                            &nbsp;
+                        </div>
+                    </div>
+                </div>
+
+
+                <div id="interfaceAdaptiveViewsContainer" title="Adaptive Views">
+                    <div id="interfaceAdaptiveViewsIconButton">&nbsp;</div>
+                    <div id="interfaceAdaptiveViewsButton" class='adaptiveViewHeader'>
+                        &nbsp;
+                    </div>
+                    <div id="adaptiveViewsDropdown" class="caret"></div>
+                </div>
+            </div>
+            
+            <div id="interfaceControlFrameContainer">
+                <div id="handoffControlFrameHeaderContainer">
+                    <ul id="handoffControlFrameHeader"></ul>
+                </div>
+                <div id="interfaceControlFrameLogoContainer">
+                    <div id="previewNotice">
+                        Local Preview
+                    </div>
+                </div>
+            </div>
+
+            <div id="interfaceControlFrameRight">
+                <div id="publishContainer">
+                    <a id="publishButton">Share Prototype</a>
+                </div>
+                
+                <div id="inspectControlFrameHeaderContainer">
+                    <ul id="inspectControlFrameHeader">
+                        <li id="overflowBtn">
+                            <a id="overflowMenuButton" title="View Options"></a>
+                        </li>
+                    </ul>
+                </div>
+
+                <div id="separatorContainer">
+                    <div class="separator"></div>
+                </div>
+
+                <div id="overflowMadeWith"><a href="https://www.axure.com" id="axureLogo" target="_blank"></a></div>
+
+            </div>
+
+        </div>
+    </div>
+    <div id="popupContainer">
+        <div id='interfaceAdaptiveViewsListContainer'>
+        </div>
+
+        <div id='interfaceScaleListContainer'>
+        </div>
+
+        <div id='accountLoginContainer'>
+        </div>
+
+        <div id='overflowMenuContainer'>
+        </div>
+    </div>
+    <div id="outerContainer">
+        <div id="clippingBounds">
+            <div id="clippingBoundsScrollContainer"></div>
+        </div>
+
+        <div id="mHideSidebar"></div>
+        <div id="lsplitbar" class="splitbar"></div>
+
+        <div id="mainPanel">
+            <div id="mainPanelContainer" style="position: relative; width:100%; height: 100%;">
+                <div id="clipFrameScroll" style="position: relative; width:100%; height: 100%; background-color: #ffffff;">
+                    <iframe id="mainFrame" name="mainFrame" width="100%" height="100%" src="about:blank" frameborder="0" style="display: block;position:absolute;" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+                </div>
+            </div>
+        </div>
+
+        <div id="rsplitbar" class="splitbar"></div>
+
+    </div>
+
+    <div id="maximizePanelContainer" class="maximizePanelContainer">
+        <div id="maximizePanelOver">
+            <div id="maximizePanel" title="Expand" class="maximizePanelOver">
+                <div id="maximizeButton" class="maximizeButton maximizeIcon"></div>
+            </div>
+        </div>
+    </div>
+
+    <div id="mobileControlFrameContainer"></div>
+
+<!-- 9.0.0.3669 -->
+<script src="resources/scripts/jquery-3.2.1.min.js"></script>
+<script src="resources/scripts/axure/jquery.nicescroll.min.js"></script>
+<script src="resources/scripts/axutils.js"></script>
+<script src="resources/scripts/messagecenter.js"></script>
+<script src="resources/scripts/player/axplayer.js"></script>
+<script src="resources/scripts/player/init.js"></script>
+
+
+</body>
+</html>
--- a/demo/plugins/debug/debug.js
+++ b/demo/plugins/debug/debug.js
@@ -0,0 +1,171 @@
+// use this to isolate the scope
+(function () {
+
+    if(!$axure.document.configuration.showConsole) { return; }
+
+    $(document).ready(function () {
+        $axure.player.createPluginHost({
+            id: 'debugHost',
+            context: 'inspect',
+            title: 'Console',
+            gid: 3
+        });
+
+        generateDebug();
+
+        $('#variablesClearLink').click(clearvars_click);
+        $('#traceClear').click(cleartrace_click);
+        $('#traceToggle').click(stoptrace_click);
+        $('#traceStart').click(starttrace_click);
+        $('#traceClear').hide();
+        $('#traceToggle').hide();
+
+        $('#closeConsole').click(close);
+
+        var currentStack= [];
+        var finishedStack = [];
+
+        $axure.messageCenter.addMessageListener(function (message, data) {
+            if(message == 'axCompositeEventMessage') {
+                for(var i = 0; i < data.length; i++) {
+                    processMessages(data[i].message, data[i].data);
+                }
+            } else processMessages(message, data);
+        });
+
+        var processMessages = function(message, data) {
+            if(message == 'globalVariableValues') {
+                $('#variablesDiv').empty();
+                for(var key in data) {
+                    var value = data[key] == '' ? '(blank)' : data[key];
+                    $('#variablesDiv').append('<div class="variableList"><div class="variableName">' + key + '</div><div class="variableValue">' + value + '</div></div>');
+                }
+            } else if(message == 'axEvent') {
+                var addToStack = "<div class='axEventBlock'>";
+                addToStack += "<div class='axEventContainer'>";
+                addToStack += "    <div class='axTime'>" + new Date().toLocaleTimeString() + "</div>";
+                addToStack += "    <div class='axEvent'>" + data.event.description + ": </div>";
+                addToStack += "    <div class='axLabel'>" + data.label + " (" + data.type + ")</div>";
+                addToStack += "</div>";
+
+                currentStack.push(addToStack);
+            } else if (message == 'axEventComplete') {
+                currentStack[currentStack.length - 1] += "</div>";
+                finishedStack.push(currentStack.pop());
+                if(currentStack.length == 0) {
+                    $('#traceEmptyState').hide();
+                    $('#traceClear').show();
+                    $('#traceToggle').show();
+
+                    for(var i = finishedStack.length - 1; i >= 0; i--) {
+                        if($('#traceDiv').children().length > 99) $('#traceDiv').children().last().remove();
+                        $('#traceDiv').prepend(finishedStack[i]);
+                    }
+                    finishedStack = [];
+                }
+            } else if (message == 'axCase') {
+                //var addToStack = "<div class='axCaseContainer' style='background-color: #" + data.color + "'>";
+                var addToStack = "<div class='axCaseContainer'>";
+                addToStack += "    <div class='axCaseItem'>" + data.item + "</div>";
+                if (data.description) { addToStack += "    <div class='axCaseDescription' title='" + data.description + "'>" + data.description + "</div>" };
+                addToStack += "</div>";
+
+                currentStack[currentStack.length - 1] += addToStack;
+            } else if (message == 'axAction') {
+                var addToStack = "<div class='axActionContainer'>";
+                addToStack += "    <div class='axActionItem'>" + data.name + "</div>";
+                //addToStack += "    <div class='axActionItem'>" + data.item + "</div>";
+                //if (data.description) { addToStack += "    <div class='axActionDescription' title='" + data.description + "'>" + data.description + "</div>" };
+                addToStack += "</div>";
+
+                currentStack[currentStack.length - 1] += addToStack;
+            } else if (message == 'axInfo') {
+                var addToStack = "<div class='axInfoContainer'>";
+                addToStack += "    <div class='axInfoItem'>" + data.item + "</div>";
+                if (data.description) { addToStack += "    <div class='axInfoDescription' title='" + data.longDescription + "'>" + data.description + "</div>" };
+                addToStack += "</div>";
+
+                currentStack[currentStack.length - 1] += addToStack;
+            }
+        }
+
+        // bind to the page load
+        $axure.page.bind('load.debug', function () {
+            var traceStr = $axure.player.getHashStringVar(TRACE_VAR_NAME);
+            if (traceStr.length > 0) $axure.messageCenter.setState("isTracing", true);
+            else $axure.messageCenter.setState("isTracing", false);
+            $axure.messageCenter.postMessage('getGlobalVariables', '');
+
+            return false;
+        });
+
+        function clearvars_click(event) {
+            $axure.messageCenter.postMessage('resetGlobalVariables', '');
+        }
+
+        function close() {
+            $axure.player.pluginClose("debugHost");
+        }
+
+        function cleartrace_click(event) {
+            $('#traceDiv').html('');
+        }
+
+        function starttrace_click(event) {
+            $axure.messageCenter.setState("isTracing", true);
+            //$('#traceDiv').html('');
+            $('#traceEmptyState').hide();
+            $('#traceClear').show();
+            $('#traceToggle').text('Stop Trace');
+            $('#traceToggle').off("click");
+            $('#traceToggle').click(stoptrace_click);
+            $('#traceToggle').show();
+            console.log("starting trace");
+            $axure.player.setVarInCurrentUrlHash(TRACE_VAR_NAME, 1);
+        }
+
+        function stoptrace_click(event) {
+            $axure.messageCenter.setState("isTracing", false);
+            $('#traceDiv').prepend('<div class="tracePausedNotification">Trace Paused<div>');
+            $('#traceToggle').text('Restart Trace');
+            $('#traceToggle').off("click");
+            $('#traceToggle').click(starttrace_click);
+            console.log("stopping trace");
+            $axure.player.deleteVarFromCurrentUrlHash(TRACE_VAR_NAME);
+        }
+    });
+
+    function generateDebug() {
+        var pageNotesUi = "<div id='debugHeader'>";
+        pageNotesUi += "<div id='debugToolbar'>";
+        pageNotesUi += "<div id='consoleTitle' class='pluginNameHeader'>Console</div>";
+
+        pageNotesUi += "</div>";
+        pageNotesUi += "</div>";
+
+        pageNotesUi += "<div id='variablesContainer' style='max-height:300px; overflow-y:auto'>";
+        pageNotesUi += "<div id='variablesTitle' class='sectionTitle'>Variables</div>";
+        pageNotesUi += "<a id='variablesClearLink' class='traceOption'>Reset Variables</a>";
+        pageNotesUi += "<div id='variablesDiv'></div></div>";
+        pageNotesUi += "<div id='traceContainer'>";
+
+        pageNotesUi += "<div id='traceHeader'>";
+        pageNotesUi += "<span class='sectionTitle'>Trace</span><a id='traceClear' class='traceOption'>Clear Trace</a><a id='traceToggle' class='traceOption'>Stop Trace</a>";
+        pageNotesUi += "</div>";
+        pageNotesUi += "</div>";
+        pageNotesUi += "<div id='debugScrollContainer'>";
+        pageNotesUi += "<div id='debugContainer'>";
+
+
+        pageNotesUi += "<div id='traceEmptyState'>";
+        pageNotesUi += "<div class='startInstructions'>Click the button below to start recording interactions as you click through the prototype.</div>";
+        pageNotesUi += "<div id='traceStart' class='startButton'>Start Trace</div>";
+        pageNotesUi += "</div>";
+        pageNotesUi += "<div id='traceDiv'></div></div>";
+        pageNotesUi += "</div></div>";
+
+        $('#debugHost').html(pageNotesUi);
+        $('#traceEmptyState').show();
+    }
+
+})();   
--- a/demo/plugins/debug/styles/debug.css
+++ b/demo/plugins/debug/styles/debug.css
@@ -0,0 +1,265 @@
+#debugHost {
+    display: flex;
+    flex-direction: column;
+    font-size: 13px;
+    color: #4a4a4a;
+    height: 100%;
+}
+
+#debugHostBtn {
+    order: 4;
+}
+
+#debugHostBtn a {
+    background: url('images/console_panel_on.svg') no-repeat center center, linear-gradient(transparent, transparent);
+}
+
+#debugHostBtn a.selected, #debugHostBtn a.selected:hover {
+    background: url('images/console_panel_off.svg') no-repeat center center, linear-gradient(transparent, transparent);
+}
+
+#debugToolbar {
+    margin-left: 8px;
+}
+
+#variablesClearLink {
+    display: inline-block;
+    margin-bottom: 15px;
+}
+
+#variablesClearLink:hover {
+    color: #0a6cd6;
+}
+
+#traceClearLink {
+    display: inline-block;
+    margin-bottom: 15px;
+}
+
+#traceClearLink:hover {
+    color: #0a6cd6;
+}
+
+#debugScrollContainer 
+{
+    overflow: auto;
+    width: 100%;
+    -webkit-overflow-scrolling: touch;
+    flex: 1;
+}
+
+#debugContainer {
+    padding: 10px 0px 10px 0px;
+}
+
+#consoleTitle {
+    clear: right;
+    margin: 12px 0px;
+}
+
+.variableName
+{
+	font-weight: bold;
+}
+
+.variableDiv
+{
+    margin-bottom: 20px;
+    line-height: 16px;
+
+}
+
+#variablesDiv
+{
+    clear: right;
+}
+
+#variablesContainer {
+    border-bottom: solid 1px #e7e7e7;
+    padding: 0px 10px 12px 10px;
+}
+
+#traceContainer {
+    margin-bottom: 5px;
+    padding: 15px 10px 0px 10px;
+}
+
+#variablesTitle {
+    margin-bottom: 9px;
+}
+
+.sectionTitle {
+    font-size: 11px;
+    color: #2c2c2c;
+    display: inline-block;
+}
+
+.debugToolbarButton 
+{
+	font-size: 1em;
+	color: #069;
+}
+
+.axEventBlock {
+    display: inline-block;
+    width: 100%;
+    margin: 5px 0px 5px 0px;
+    line-height: 21px;
+    border-bottom: solid 5px #e7e7e7;
+}
+
+.axEventContainer {
+    background-color: #e7e7e7;
+    padding: 0px 10px 0px 10px;
+}
+
+.axTime {
+    margin: 0px 0px 0px 5px;
+    font-size: 10px;
+    color: #575757;
+    display: inline-block;
+    float: right;
+}
+
+.axLabel {
+    display: inline-block;
+}
+
+.axEvent {
+    margin: 0px 0px 2px 0px;    
+    font-size: 15px;
+    font-weight: bold;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.axCaseContainer, .axActionContainer, .axInfoContainer {
+    justify-content: space-between;
+    padding: 0px 10px 0px 10px;
+}
+    .axCaseContainer {
+        border-top: solid 2px #e7e7e7;
+        /*background-color: #47b6b5;*/
+        background-color: #e7e7e7;
+        /*color: #ffffff;*/
+    }
+    .axActionContainer {
+        border-top: solid 3px #e7e7e7;
+    }
+    .axInfoContainer {
+        border-top: solid 1px #e7e7e7;
+    }
+
+.axCaseItem, .axActionItem, .axInfoItem {
+    overflow: hidden;
+    text-overflow: ellipsis; 
+}
+    .axCaseItem {
+        font-size: 15px;
+        font-weight: bold;
+    }
+    .axActionItem {
+        font-weight: bold;
+    }
+    .axInfoItem {
+        color: #8c8c8c;
+    }
+
+.axCaseDescription {
+    flex: 5 0 33%;
+    margin-left: 10px;
+    text-align: right;
+}
+/*.axActionDescription, .axInfoDescription {
+    flex: 5 0 33%;
+    margin-left: 10px;
+    text-align: right;
+}*/
+    .axCaseDescription, .axActionDescription {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    .axInfoDescription, .axActionDescription {
+        color: #8c8c8c;
+        font-size: 11px;
+    }
+
+.variableName {
+    width: 55%;
+    line-height: 0.92;
+    text-align: left;
+    color: #0891b3;
+    display: inline-block;
+    word-wrap: break-word;
+    vertical-align: top;
+}
+
+.variableValue {
+    width: 45%;
+    line-height: 0.92;
+    text-align: right;
+    color: #373d48;
+    display: inline-block;
+    word-wrap: break-word;
+}
+
+.traceEvent {
+    border-bottom: solid 1px #e7e7e7;
+}
+
+.tracePausedNotification {
+    height: 25px;
+    /*background-color: #e7e7e7;*/
+    border-radius: 5px;
+    line-height: 25px;
+    margin: 5px 10px;
+    text-align: center
+}
+
+#traceEmptyState.emptyStateContainer {
+    margin-top: 0px;
+}
+
+.variableList{
+    width: 100%;
+    margin-bottom: 4px;
+}
+
+.traceOption {
+    margin-left: 11px;
+    height: 16px;
+    float: right;
+    font-size: 12px;
+    font-style: italic;
+    line-height: 1.45;
+    text-align: right;
+    color: #8c8c8c;
+    text-decoration: underline;
+    display: inline-block;
+}
+
+.startInstructions {
+    margin: auto;
+    width: 179px;
+    font-size: 11px;
+    text-align: center;
+    color: #666666;
+}
+
+.startButton {
+    margin: auto;
+    margin-top: 10px;
+    width: 181px;
+    height: 24px;
+    border-radius: 2px;
+    border: solid 1px #008fe0;
+    text-align: center;
+    line-height: 24px;
+    color: #008fe0;
+    cursor: pointer;
+}
+
+.debugLinksContainer {
+    text-align: right;
+}
--- a/demo/plugins/debug/styles/images/console_panel_off.svg
+++ b/demo/plugins/debug/styles/images/console_panel_off.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <path fill="#008DCB" fill-rule="evenodd" d="M14 2.5l-2 1V2H2v12h12v1a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v1.5zm-2.981 3.702c.78-1.06 1.407-1.803 1.882-2.23.475-.428.938-.641 1.389-.641.54 0 .913.184 1.118.553.11.192.164.424.164.698 0 .28-.113.536-.339.769a1.1 1.1 0 0 1-.82.348c-.198 0-.422-.075-.672-.225-.25-.15-.439-.226-.569-.226-.253 0-.494.13-.723.39-.229.26-.623.81-1.184 1.65l.195 1.026c.102.526.188.959.256 1.297.069.338.144.651.226.938.11.397.219.684.328.862.11.177.27.266.482.266.191 0 .424-.14.697-.42.15-.15.38-.427.687-.83l.43.297a8.113 8.113 0 0 1-1.409 1.733c-.578.546-1.143.82-1.697.82-.465 0-.848-.192-1.148-.574-.171-.205-.322-.486-.452-.841a11.32 11.32 0 0 1-.282-.98 24.82 24.82 0 0 0-.23-.866l-.144.246c-.677 1.162-1.172 1.918-1.487 2.266-.471.52-1.018.78-1.64.78-.356 0-.665-.122-.928-.364a1.172 1.172 0 0 1-.395-.898c0-.294.097-.565.292-.815.195-.25.467-.374.815-.374.212 0 .474.075.785.226.31.15.514.225.61.225.212 0 .395-.094.548-.282.154-.188.457-.654.908-1.4l.41-.676c-.068-.287-.142-.64-.22-1.056-.079-.417-.16-.845-.241-1.282l-.164-.872c-.117-.629-.301-1.042-.554-1.24-.144-.117-.38-.175-.708-.175a14.992 14.992 0 0 0-.636.051v-.564c.616-.075 1.29-.17 2.026-.287a52.738 52.738 0 0 0 1.471-.246c.205.274.374.605.508.995.133.39.234.803.302 1.24l.113.688z"/>
+</svg>
--- a/demo/plugins/debug/styles/images/console_panel_on.svg
+++ b/demo/plugins/debug/styles/images/console_panel_on.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <path fill="#6D6D6D" fill-rule="evenodd" d="M14 2.5l-2 1V2H2v12h12v1a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v1.5zm-2.981 3.702c.78-1.06 1.407-1.803 1.882-2.23.475-.428.938-.641 1.389-.641.54 0 .913.184 1.118.553.11.192.164.424.164.698 0 .28-.113.536-.339.769a1.1 1.1 0 0 1-.82.348c-.198 0-.422-.075-.672-.225-.25-.15-.439-.226-.569-.226-.253 0-.494.13-.723.39-.229.26-.623.81-1.184 1.65l.195 1.026c.102.526.188.959.256 1.297.069.338.144.651.226.938.11.397.219.684.328.862.11.177.27.266.482.266.191 0 .424-.14.697-.42.15-.15.38-.427.687-.83l.43.297a8.113 8.113 0 0 1-1.409 1.733c-.578.546-1.143.82-1.697.82-.465 0-.848-.192-1.148-.574-.171-.205-.322-.486-.452-.841a11.32 11.32 0 0 1-.282-.98 24.82 24.82 0 0 0-.23-.866l-.144.246c-.677 1.162-1.172 1.918-1.487 2.266-.471.52-1.018.78-1.64.78-.356 0-.665-.122-.928-.364a1.172 1.172 0 0 1-.395-.898c0-.294.097-.565.292-.815.195-.25.467-.374.815-.374.212 0 .474.075.785.226.31.15.514.225.61.225.212 0 .395-.094.548-.282.154-.188.457-.654.908-1.4l.41-.676c-.068-.287-.142-.64-.22-1.056-.079-.417-.16-.845-.241-1.282l-.164-.872c-.117-.629-.301-1.042-.554-1.24-.144-.117-.38-.175-.708-.175a14.992 14.992 0 0 0-.636.051v-.564c.616-.075 1.29-.17 2.026-.287a52.738 52.738 0 0 0 1.471-.246c.205.274.374.605.508.995.133.39.234.803.302 1.24l.113.688z"/>
+</svg>
--- a/demo/plugins/page_notes/page_notes.js
+++ b/demo/plugins/page_notes/page_notes.js
@@ -0,0 +1,474 @@
+// use this to isolate the scope
+(function () {
+    // No notes shown specified by generation config
+    if (!$axure.document.configuration.showPageNotes && !$axure.document.configuration.showAnnotationsSidebar && !$axure.document.configuration.showAnnotations) { return; }
+
+    $(window.document).ready(function () {
+        // Load right panel for Page Notes
+        if ($axure.document.configuration.showPageNotes || $axure.document.configuration.showAnnotationsSidebar) {
+            $axure.player.createPluginHost({
+                id: 'pageNotesHost',
+                context: 'inspect',
+                title: 'Documentation',
+                gid: 2,
+            });
+        }
+
+        // Load footnotes on widgets
+        if ($axure.document.configuration.showAnnotations) {
+            $('#overflowMenuContainer').prepend('<div id="showNotesOption" class="showOption" style="order: 3"><div class="overflowOptionCheckbox"></div>Show Note Markers</div>');
+        }
+
+        createNotesOverlay();
+        generatePageNotes();
+
+        if ($axure.player.isMobileMode()) {
+            $('#showNotesOption').hide();
+        } else {
+            $('#showNotesOption').click(footnotes_click);
+            $('#showNotesOption').find('.overflowOptionCheckbox').addClass('selected');
+        }
+
+        function populateNotes(pageForNotes) {
+            var hasNotes = false;
+            if ($axure.document.configuration.showPageNotes) {
+                var pageNoteUi = '';
+
+                function populatePageNotes(pageOrMaster) {
+                    //populate the page notes
+                    var notes = pageOrMaster.notes;
+                    if (notes && !$.isEmptyObject(notes)) {
+                        pageNoteUi += "<div class='notesPageNameHeader'>" + pageOrMaster.pageName + "</div>";
+
+                        var showNames = $axure.document.configuration.showPageNoteNames;
+                        for(var noteName in notes) {
+                            pageNoteUi += "<div class='pageNoteContainer'>";
+                            if(showNames) {
+                                pageNoteUi += "<div class='pageNoteName'>" + noteName + "</div>";
+                            }
+                            pageNoteUi += "<div class='pageNote'>" + linkify(notes[noteName]) + "</div>";
+                            pageNoteUi += "</div>";
+                            //$('#pageNotesContent').append(pageNoteUi);
+
+                            hasNotes = true;
+                        }
+                    }
+                }
+
+                populatePageNotes(pageForNotes);
+                if (pageForNotes.masterNotes) {
+                    for (var i = 0; i < pageForNotes.masterNotes.length; i++) {
+                        populatePageNotes(pageForNotes.masterNotes[i]);
+                    }
+                }
+
+                if (pageNoteUi.length > 0) {
+                    pageNoteUi += "<div class='lineDivider'></div>";
+                    var pageNotesHeader = "<div id='pageNotesSectionHeader' class='notesSectionHeader pluginNameHeader'>Page Notes</div>";
+                    $('#pageNotesContent').append(pageNotesHeader + pageNoteUi);
+                }
+            }
+
+            if ($axure.document.configuration.showAnnotationsSidebar) {
+                var widgetNoteUi = '';
+                //var widgetNotes = pageForNotes.widgetNotes;
+                function populateWidgetNotes(widgetNotes){
+                    if (widgetNotes) {
+                        for (var i = 0; i < widgetNotes.length; i++) {
+                            var widgetNote = widgetNotes[i];
+                            widgetNoteUi += "<div class='widgetNoteContainer' data-id='" + widgetNote["ownerId"] + "'>";
+                            widgetNoteUi += "<div class='widgetNoteFootnote'>" + widgetNote["fn"] + "</div>";
+                            widgetNoteUi += "<div class='widgetNoteLabel'>" + widgetNote["label"] + "</div>";
+
+                            for (var widgetNoteName in widgetNote) {
+                                if (widgetNoteName != "label" && widgetNoteName != "fn" && widgetNoteName != "ownerId") {
+                                    widgetNoteUi += "<div class='pageNoteName'>" + widgetNoteName + "</div>";
+                                    widgetNoteUi += "<div class='pageNote'>" + linkify(widgetNote[widgetNoteName]) + "</div>";
+                                    //widgetNoteUi += "<div class='nondottedDivider'></div>";
+                                }
+                            }
+                            widgetNoteUi += "</div>";
+                            //widgetNoteUi += "<div class='nondottedDivider'></div>";
+                            //$('#pageNotesContent').append(widgetNoteUi);
+                            hasNotes = true;
+                        }
+                    }
+                }
+
+                populateWidgetNotes(pageForNotes.widgetNotes);
+                if (pageForNotes.masterNotes) {
+                    for (var i = 0; i < pageForNotes.masterNotes.length; i++) {
+                        populateWidgetNotes(pageForNotes.masterNotes[i].widgetNotes);
+                    }
+                }
+
+                if (widgetNoteUi.length > 0) {
+                    var widgetNotesHeader = "<div id='widgetNotesSectionHeader' class='notesSectionHeader pluginNameHeader'>Widget Notes</div>";
+                    $('#pageNotesContent').append(widgetNotesHeader + widgetNoteUi);
+
+                    //$('.widgetNoteContainer').children(':last-child').remove();
+                    //$('.widgetNoteFootnote').append("<div class='annnoteline'></div><div class='annnoteline'></div><div class='annnoteline'></div>");
+                    $('.widgetNoteContainer').click(function () {
+                        var wasSelected = $(this).hasClass('widgetNoteContainerSelected');
+                        $('.widgetNoteContainerSelected').removeClass('widgetNoteContainerSelected');
+                        if (!wasSelected) $(this).addClass('widgetNoteContainerSelected');
+
+                        var dimStr = $('.currentAdaptiveView').attr('data-dim');
+                        var h = dimStr ? dimStr.split('x')[1] : '0';
+                        var $leftPanel = $('.leftPanel:visible');
+                        var leftPanelOffset = (!$axure.player.isMobileMode() && $leftPanel.length > 0) ? $leftPanel.width() : 0;
+                        var $rightPanel = $('.rightPanel:visible');
+                        var rightPanelOffset = (!$axure.player.isMobileMode() && $rightPanel.length > 0) ? $rightPanel.width() : 0;
+                        var viewDimensions = {
+                            h: h != '0' ? h : '',
+                            scaleVal: $('.vpScaleOption').find('.selectedRadioButton').parent().attr('val'),
+                            height: $('.rightPanel').height(),
+                            panelWidthOffset: leftPanelOffset + rightPanelOffset
+                        };
+                        $axure.messageCenter.postMessage('toggleSelectWidgetNote', { id: this.getAttribute('data-id'), value: !wasSelected, view: viewDimensions});
+                    });
+                }
+
+                
+                //if (pageForNotes.masterNotes) {
+                //    for (var i = 0; i < pageForNotes.masterNotes.length; i++) {
+                //        var master = pageForNotes.masterNotes[i];
+                //        hasNotes = populateNotes(master) || hasNotes;
+                //    }
+                //}
+            }
+            
+            return hasNotes;
+        }
+
+        // bind to the page load
+        $axure.page.bind('load.page_notes', function () {
+            closeAllDialogs();
+
+            var hasNotes = false;
+
+            $('#pageNotesContent').html("");
+            hasNotes = populateNotes($axure.page);
+            
+            if(hasNotes) $('#pageNotesEmptyState').hide();
+            else $('#pageNotesEmptyState').show();
+
+            //If footnotes enabled for this prototype...
+            if ($axure.player.isMobileMode()) {
+                $axure.messageCenter.postMessage('annotationToggle', false);
+            } else if($axure.document.configuration.showAnnotations == true) {
+                //If the fn var is defined and set to 0, hide footnotes
+                //else if hide-footnotes button selected, hide them
+                var fnVal = $axure.player.getHashStringVar(FOOTNOTES_VAR_NAME);
+                if(fnVal.length > 0 && fnVal == 0) {
+                    $('#showNotesOption').find('.overflowOptionCheckbox').removeClass('selected');
+                    $axure.messageCenter.postMessage('annotationToggle', false);
+                } else if(!$('#showNotesOption').find('.overflowOptionCheckbox').hasClass('selected')) {
+                    //If the footnotes button isn't selected, hide them on this loaded page
+                    $axure.messageCenter.postMessage('annotationToggle', false);
+                }
+            }
+
+            // Get multiple click call if not removing beforehand
+            $('#notesOverlay').off('click');
+            $('#notesOverlay').on('click', '.closeNotesDialog', function () {
+                var ownerId = $(this).attr("data-ownerid");
+                _toggleAnnDialog(ownerId);
+            });
+            
+            $axure.player.updatePlugins();
+            return false;
+        });
+
+        $axure.messageCenter.addMessageListener(function (message, data) {
+            //var messageData = { id: elementId, x: event.pageX, y: event.pageY }
+            if (message == 'toggleAnnDialog') {
+                _toggleAnnDialog(data.id, data.x, data.y, data.page);
+            }
+        });
+
+    });
+
+    function linkify(text) {
+        var urlRegex = /(\b(((https?|ftp|file):\/\/)|(www\.))[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
+        return text.replace(urlRegex, function (url, b, c) {
+            var url2 = (c == 'www.') ? 'http://' + url : url;
+            return '<a href="' + url2 + '" target="_blank" class="noteLink">' + url + '</a>';
+        });
+    }
+
+    function getWidgetNotesHtml(ownerId, page) {
+        var pageForNotes = page || $axure.page;
+        var widgetNoteUi = '';
+
+        widgetNoteUi += "<div data-ownerid='" + ownerId + "' class='closeNotesDialog'></div>";
+        widgetNoteUi += "<div class='notesDialogScroll'>";
+
+        function getNotesForPage(widgetNotes) {
+            for (var i = 0; i < widgetNotes.length; i++) {
+                var widgetNote = widgetNotes[i];
+                if (widgetNote["ownerId"] == ownerId) {
+                    widgetNoteUi += "<div class='widgetNoteContainer' data-id='" + widgetNote["ownerId"] + "'>";
+                    widgetNoteUi += "<div class='widgetNoteFootnote'>" + widgetNote["fn"] + "</div>";
+                    widgetNoteUi += "<div class='widgetNoteLabel'>" + widgetNote["label"] + "</div>";
+
+                    for (var widgetNoteName in widgetNote) {
+                        if (widgetNoteName != "label" && widgetNoteName != "fn" && widgetNoteName != "ownerId") {
+                            widgetNoteUi += "<div class='pageNoteName'>" + widgetNoteName + "</div>";
+                            widgetNoteUi += "<div class='pageNote'>" + linkify(widgetNote[widgetNoteName]) + "</div>";
+                        }
+                    }
+                    widgetNoteUi += "</div>";
+                }
+            }
+        }
+
+        getNotesForPage(pageForNotes.widgetNotes);
+        if (pageForNotes.masterNotes) {
+            for (var i = 0; i < pageForNotes.masterNotes.length; i++) {
+                getNotesForPage(pageForNotes.masterNotes[i].widgetNotes);
+            }
+        }
+
+        widgetNoteUi += "</div>";
+        widgetNoteUi += "<div class='resizeNotesDialog'></div>";
+
+        return widgetNoteUi;
+    }
+
+    var maxZIndex = 1;
+    var dialogs = {};
+    var _toggleAnnDialog = function (id, srcLeft, srcTop, page) {
+
+        if(dialogs[id]) {
+            var $dialog = dialogs[id];
+            // reset the dialog
+            dialogs[id] = undefined;
+            $dialog.find('.notesDialogScroll').getNiceScroll().remove();
+            $dialog.remove();
+            return;
+        }
+        
+        var bufferH = 10;
+        var bufferV = 10;
+        var blnLeft = false;
+        var blnAbove = false;
+        var mfPos = $('#mainPanelContainer').position();
+        var viewablePanelLeftMargin = parseInt($('#mainPanelContainer').css('margin-left'));
+
+        var sourceTop = srcTop + mfPos.top;
+        var sourceLeft = srcLeft + viewablePanelLeftMargin;
+
+        var width = 300;
+        var height = 300;
+
+        if(sourceLeft > width + bufferH) {
+            blnLeft = true;
+        }
+        if(sourceTop > height + bufferV) {
+            blnAbove = true;
+        }
+
+        var top = 0;
+        var left = 0;
+        if(blnAbove) top = sourceTop - height - 20;
+        else top = sourceTop + 10;
+        if(blnLeft) left = sourceLeft - width - 4;
+        else left = sourceLeft - 6;
+
+        //need to set the zindex
+        maxZIndex = maxZIndex + 1;
+        
+        var $dialog = $('<div class="notesDialog"></div>')
+            .appendTo('#notesOverlay')
+            .html(getWidgetNotesHtml(id, page));     
+
+        $dialog.css({ 'left': left, 'top': top, 'z-index': maxZIndex });
+
+        $dialog.find('.notesDialogScroll').niceScroll({ cursorcolor: "#8c8c8c", cursorborder: "0px solid #fff" });
+
+        $dialog.find('.notesDialogScroll').on($axure.eventNames.mouseDownName, function(event) {
+            event.stopPropagation();
+        });
+        
+        $dialog.find('.closeNotesDialog').on($axure.eventNames.mouseDownName, function (event) {
+            event.stopPropagation();
+        });
+
+        $dialog.on($axure.eventNames.mouseDownName, startDialogMove);
+        var startMouseX;
+        var startMouseY;
+        var startDialogX;
+        var startDialogY;
+        function startDialogMove() {
+            startMouseX = window.event.pageX;
+            startMouseY = window.event.pageY;
+            var position = $dialog.position();
+            startDialogX = position.left;
+            startDialogY = position.top;
+
+            $dialog.addClass('active');
+            $('<div class="splitterMask"></div>').insertAfter($('#notesOverlay'));
+            $(document).bind($axure.eventNames.mouseMoveName, doDialogMove).bind($axure.eventNames.mouseUpName, endDialogMove);
+
+            $dialog.find('.notesDialogScroll').getNiceScroll().hide();
+        }
+
+        function doDialogMove() {
+            var currentX = window.event.pageX;
+            var currentY = window.event.pageY;
+            $dialog.css({ 'left': startDialogX + currentX - startMouseX, 'top': startDialogY + currentY - startMouseY });
+        }
+
+        function endDialogMove() {
+            $('div.splitterMask').remove();
+            $dialog.removeClass('active');
+            $(document).unbind($axure.eventNames.mouseMoveName, doDialogMove).unbind($axure.eventNames.mouseUpName, endDialogMove);
+
+            $dialog.find('.notesDialogScroll').getNiceScroll().resize();
+            $dialog.find('.notesDialogScroll').getNiceScroll().show();
+        }
+
+        $dialog.find('.resizeNotesDialog').on($axure.eventNames.mouseDownName, startDialogResize);
+
+        var startDialogW;
+        var startDialogH;
+        function startDialogResize() {
+            event.stopPropagation();
+
+            startMouseX = window.event.pageX;
+            startMouseY = window.event.pageY;
+            startDialogW = Number($dialog.css('width').replace('px',''));
+            startDialogH = Number($dialog.css('height').replace('px', ''));
+
+            $dialog.addClass('active');
+            $('<div class="splitterMask"></div>').insertAfter($('#notesOverlay'));
+            $(document).bind($axure.eventNames.mouseMoveName, doDialogResize).bind($axure.eventNames.mouseUpName, endDialogResize);
+
+            $dialog.find('.notesDialogScroll').getNiceScroll().hide();
+        }
+
+        function doDialogResize() {
+            var currentX = window.event.pageX;
+            var currentY = window.event.pageY;
+            var newWidth = Math.max(200, startDialogW + currentX - startMouseX);
+            var newHeight = Math.max(200, startDialogH + currentY - startMouseY);
+            $dialog.css({ 'width': newWidth, 'height': newHeight });
+        }
+
+        function endDialogResize() {
+            $('div.splitterMask').remove();
+            $dialog.removeClass('active');
+            $(document).unbind($axure.eventNames.mouseMoveName, doDialogResize).unbind($axure.eventNames.mouseUpName, endDialogResize);
+
+            $dialog.find('.notesDialogScroll').getNiceScroll().resize();
+            $dialog.find('.notesDialogScroll').getNiceScroll().show();
+        }
+
+        dialogs[id] = $dialog;
+
+        // scroll ... just for IE
+        //window.scrollTo(scrollX, scrollY);
+    };
+    
+    $(document).on('sidebarCollapse', function (event, data) {
+        clearSelection();
+    });
+
+    $(document).on('pluginShown', function (event, data) {
+        if(data != 2) {
+            clearSelection();
+        }
+    });
+
+    function clearSelection() {
+        var selectedNote = $('#pageNotesContainer').find('.widgetNoteContainerSelected');
+        if(selectedNote.length > 0) {
+            selectedNote.removeClass('widgetNoteContainerSelected');
+            //var dimStr = $('.currentAdaptiveView').attr('data-dim');
+            //var h = dimStr ? dimStr.split('x')[1] : '0';
+            //var $leftPanel = $('.leftPanel:visible');
+            //var leftPanelOffset = (!$axure.player.isMobileMode() && $leftPanel.length > 0) ? $leftPanel.width() : 0;
+            //var $rightPanel = $('.rightPanel:visible');
+            //var rightPanelOffset = (!$axure.player.isMobileMode() && $rightPanel.length > 0) ? $rightPanel.width() : 0;
+            //var viewDimensions = {
+            //    h: h != '0' ? h : '',
+            //    scaleVal: $('.vpScaleOption').find('.selectedRadioButton').parent().attr('val'),
+            //    scrollLeft: $('#clipFrameScroll').scrollLeft(),
+            //    scrollTop: $('#clipFrameScroll').scrollTop(),
+            //    height: $('.rightPanel').height(),
+            //    panelWidthOffset: leftPanelOffset + rightPanelOffset
+            //};
+            //$axure.messageCenter.postMessage('toggleSelectWidgetNote', { id: '', value: false, view: viewDimensions });
+            $axure.messageCenter.postMessage('toggleSelectWidgetNote', { id: '', value: false });
+            //$axure.messageCenter.postMessage('toggleSelectWidgetNote', '');
+        }
+    }
+
+    function closeAllDialogs() {
+        for (var id in dialogs) {
+            var $dialog = dialogs[id];
+            if ($dialog !== undefined) _toggleAnnDialog(id);
+        }
+    }
+
+    $axure.player.toggleFootnotes = function(val) {
+        var scaleCheckDiv = $('#showNotesOption').find('.overflowOptionCheckbox');
+        if (scaleCheckDiv.hasClass('selected')) {
+            if (!val) $('#showNotesOption').click();
+        } else {
+            if (val) $('#showNotesOption').click();
+        }
+    }
+
+    function footnotes_click(event) {
+        var scaleCheckDiv = $('#showNotesOption').find('.overflowOptionCheckbox');
+        if (scaleCheckDiv.hasClass('selected')) {
+            closeAllDialogs();
+
+            scaleCheckDiv.removeClass('selected');
+            $axure.messageCenter.postMessage('annotationToggle', false);
+            //Add 'fn' hash string var so that footnotes stay hidden across reloads
+            $axure.player.setVarInCurrentUrlHash(FOOTNOTES_VAR_NAME, 0);
+        } else {
+            scaleCheckDiv.addClass('selected');
+            $axure.messageCenter.postMessage('annotationToggle', true);
+            //Delete 'fn' hash string var if it exists since default is visible
+            $axure.player.deleteVarFromCurrentUrlHash(FOOTNOTES_VAR_NAME);
+        }
+    }
+
+    function createNotesOverlay() {
+        var $targetPanel = $('#clippingBounds');
+
+        if (!$('#notesOverlay').length) {
+            var notesOverlay = document.createElement('div');
+            notesOverlay.setAttribute('id', 'notesOverlay');
+
+            $targetPanel.prepend(notesOverlay);
+            $(notesOverlay).append('&nbsp;');
+        }
+    }
+
+    function generatePageNotes() {
+        var pageNotesUi = "<div id='pageNotesHeader'>";
+
+        pageNotesUi += "<div id='pageNotesToolbar' style='height: 12px;'>";
+        pageNotesUi += "</div>";
+        pageNotesUi += "</div>";
+
+
+        pageNotesUi += "<div id='pageNotesScrollContainer'>";
+        pageNotesUi += "<div id='pageNotesContainer'>";
+        pageNotesUi += "<div id='pageNotesEmptyState' class='emptyStateContainer'><div class='emptyStateTitle'>No notes for this page.</div><div class='emptyStateContent'>Notes added in Axure RP will appear here.</div><div class='dottedDivider'></div></div>";
+        pageNotesUi += "<span id='pageNotesContent'></span>";
+        pageNotesUi += "</div></div>";
+
+        $('#pageNotesHost').html(pageNotesUi);
+
+        if(!$axure.document.configuration.showAnnotations) {
+            $('#pageNotesHost .pageNameHeader').css('padding-right', '55px');
+        }
+    }
+
+})();   
--- a/demo/plugins/page_notes/styles/images/notes_panel_off.svg
+++ b/demo/plugins/page_notes/styles/images/notes_panel_off.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16">
+    <path fill="#008DCB" fill-rule="evenodd" d="M1 0h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zm1 2v12h10V2H2zm2 2h6a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 3h6a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 3h6a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
+</svg>
--- a/demo/plugins/page_notes/styles/images/notes_panel_on.svg
+++ b/demo/plugins/page_notes/styles/images/notes_panel_on.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16">
+    <path fill="#6D6D6D" fill-rule="evenodd" d="M1 0h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zm1 2v12h10V2H2zm2 2h6a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 3h6a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 3h6a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
+</svg>
--- a/demo/plugins/page_notes/styles/page_notes.css
+++ b/demo/plugins/page_notes/styles/page_notes.css
@@ -0,0 +1,209 @@
+#pageNotesHost {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+#pageNotesHostBtn {
+    order: 2;
+}
+
+#pageNotesHostBtn a {
+    background: url('images/notes_panel_on.svg') no-repeat center center,linear-gradient(transparent, transparent);
+}
+
+#pageNotesHostBtn a.selected, #pageNotesHostBtn a.selected:hover {
+    background: url('images/notes_panel_off.svg') no-repeat center center,linear-gradient(transparent, transparent);
+}
+
+#pageNotesScrollContainer {
+    overflow: auto;
+    width: 100%;
+    flex: 1;
+    -webkit-overflow-scrolling: touch;
+}    
+
+#pageNotesContent {
+	overflow: visible;
+}
+
+.pageNoteContainer {
+    padding: 0px 12px 8px 12px;
+}
+
+.mobileMode .pageNoteContainer {
+    padding: 0px 16px 8px 17px;
+}
+
+.pageNoteName {
+    font-size: 13px;
+    font-weight: bold;
+    color: #2c2c2c;
+    margin: 15px 0px 5px 0px;
+    white-space: nowrap;
+}
+
+.pageNote {
+    font-size: 13px;
+    color: #2a2e38;
+    line-height: 1.67;
+    word-wrap: break-word;
+}
+
+.pageNote ul {
+    list-style: disc;
+    padding: 0px 0px 0px 40px;
+}
+
+.pageNote ul ul{
+    list-style: circle;
+}
+
+.pageNote ul ul ul{
+    list-style: square;
+}
+
+.pageNote ul ul ul ul {
+    list-style: disc;
+}
+
+.pageNote ul ul ul ul ul {
+    list-style: circle;
+}
+
+.pageNote ul ul ul ul ul ul {
+    list-style: square;
+}
+
+.widgetNoteContainer {
+    padding: 12px;
+    border-bottom: 1px solid transparent;
+    border-top: 1px solid transparent;
+    cursor: pointer;
+}
+
+.mobileMode .widgetNoteContainer {
+    padding: 12px 16px 12px 17px;
+}
+
+.widgetNoteContainerSelected {
+    background-color: white;
+    border-bottom: 1px solid #c2c2c2;
+    border-top: 1px solid #c2c2c2;
+}
+
+.widgetNoteFootnote {
+    display: inline-block;
+    padding-top: 1px;
+    background-color: #fff849;
+    font-size: 11px;
+    font-weight: bold;
+    line-height: 16px;
+    margin-right: 8px;
+    padding: 0px 5px;
+    color: #000;
+}
+
+div.annnoteline {
+    display: inline-block;
+    width: 9px;
+    height: 1px;
+    border-bottom: 1px solid white;
+    margin-top: 1px;
+}
+
+.widgetNoteLabel {
+    font-size: 13px;
+    font-weight: 600;
+    color: #58167d;
+    margin-top: 4px;
+    float: right;
+}
+
+.noteLink {
+    text-decoration: inherit;
+    color: inherit;
+}
+
+.noteLink:hover {
+    background-color: white;
+}
+
+.notesSectionHeader {
+    margin: 0px 8px 0px 12px;
+}
+
+.notesPageNameHeader {
+    margin: 8px 8px 15px 12px;
+}
+
+.mobileMode .notesPageNameHeader {
+    margin: 18px 14px 5px 16px;
+}
+
+#notesOverlay {
+    width: 0;
+    height: 0;
+    position: absolute;
+    overflow: visible;
+    z-index: 1;
+}
+
+div.closeNotesDialog {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    width: 11px;
+    height: 10px;
+    object-fit: contain;
+    background: url(../../../resources/images/close_x.svg) no-repeat center center, linear-gradient(transparent, transparent);
+    margin-left: auto;
+    cursor: pointer;
+}
+
+div.resizeNotesDialog {
+    position: absolute;
+    bottom: 2px;
+    right: 2px;
+    width: 11px;
+    height: 10px;
+    object-fit: contain;
+    background: url(../../../resources/images/resize.svg) no-repeat center center, linear-gradient(transparent, transparent);
+    margin-left: auto;
+    cursor: nwse-resize;
+}
+
+div.notesDialog {
+    position: absolute;
+    padding: 16px 3px 10px 3px;
+    background-color: #efefef;
+    width: 300px;
+    height: 300px;
+    line-height: normal;
+    border: #8F949A solid 1px;
+    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.4);
+    cursor: move;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+}
+
+div.notesDialog.active {
+    user-select: none;
+}
+
+div.notesDialog .widgetNoteContainer {
+    cursor: auto;
+    padding: 2px 26px 16px 14px;
+}
+
+div.notesDialogScroll {
+    overflow-x: hidden;
+    overflow-y: auto;
+    height: 100%;
+    cursor: auto;
+}
+
+.mobileMode .pageNoteName, .mobileMode #pageNotesToolbar, .mobileMode .dottedDivider {
+    display: none;
+}
--- a/demo/plugins/recordplay/recordplay.js
+++ b/demo/plugins/recordplay/recordplay.js
@@ -0,0 +1,479 @@
+// use this to isolate the scope
+(function() {
+
+        if(!$axure.document.configuration.showRecordPlay) { return; }
+
+    $(window.document).ready(function() {
+        $axure.player.createPluginHost({
+            id: 'recordPlayHost',
+            context: 'interface',
+            title: 'Recording'
+        });
+        _generateRecordPlay();
+
+        $('#recordButton').click(_recordClick);
+        $('#playButton').click(_playClick);
+        $('#stopButton').click(_stopClick);
+        $('#deleteButton').click(_deleteClick);
+
+        // bind to the page load
+
+        $axure.page.bind('load.page_notes', function() {
+            
+            $.ajax({
+                type: "POST",
+                url: '/RecordController/ListRecordings',
+                success: function(response) {
+
+                    $('#recordNameHeader').html("");
+                    $('#recordPlayContent').html("");
+                    //populate the notes 
+                    
+                    axRecordingList = [];
+
+                    if(!eventList) {
+                        recordingIndex = 0;
+                        eventList = [];
+                        recordingStartTime = 0;
+                        bulkEventElement = "";
+                        lastBulkEvent = {};
+                    }
+
+                    for(var idx in response.recordingList) {
+                        getOneRecording(response.recordingList[idx]);
+                    }
+
+                    return false;
+                },
+                //                dataType: 'json'
+            });
+        });
+    });
+    
+    var nameMatcher = new RegExp("^axRecording[0-9]{4}$", "i");
+    var indexMatcher = new RegExp("[0-9]{4}$", "i");
+
+    var convertFromJson = function(oneRecording) {
+        
+        if(nameMatcher.exec(oneRecording.recordingName)) {
+            var myArray = indexMatcher.exec(oneRecording.recordingName);
+            var currIdx = parseInt(myArray);
+            if(recordingIndex < currIdx) {
+                recordingIndex = currIdx;
+            }
+        }
+        
+
+        for(var idx in oneRecording.eventList) {
+            var thisEvent = oneRecording.eventList[idx];
+                thisEvent.eventInfo = {};
+                            thisEvent.eventInfo.srcElement = thisEvent.elementID;
+                // TODO: check that this is correct.
+
+            if(isBulkMouse(thisEvent.eventType)) {
+                thisEvent.eventInfo.mousePositions = [];
+                thisEvent.eventInfo.mousePositions = thisEvent.mousePositions;
+                thisEvent.timeStamp = thisEvent.mousePositions[0].timeStamp;
+            }
+            if(isSingleMouse(thisEvent.eventType)) {
+                thisEvent.eventInfo.cursor = {};
+                thisEvent.eventInfo.cursor = thisEvent.cursor;
+                
+            }
+            if(thisEvent.eventType === 'OnDrag') {
+                thisEvent.eventInfo.dragInfo = {};
+                thisEvent.eventInfo.dragInfo = thisEvent.dragInfo;
+                thisEvent.timeStamp = thisEvent.dragInfo.startTime;
+            }
+
+        }
+        return oneRecording;
+    };
+
+    var getOneRecording = function(recordingItem) {
+        $.ajax({
+                type: "POST",
+                url: '/RecordController/GetRecording',
+                data: { 'recordingId': recordingItem.recordingId },
+            success: function(response) {
+                        axRecordingList[axRecordingList.length] = convertFromJson(response);
+                        var axRecordingContainer = $('#recordingContainer').find('li').filter('.recordingRootNode');
+                        axRecordingContainer.append(_formAxRecordingBranch(response));
+                        _attachEventTriggers(response);     
+            },                //                dataType: 'json'
+        });
+
+    };
+    
+    var axRecordingList;
+    var eventList;
+    var recordingIndex;
+    var recordingStartTime;
+    var recordingId;
+    var recordingName;
+
+
+    var leadingZeros = function(number, digits) { // because this thing doesn't have string.format (or does it?)
+        var recurseLeadingZeros = function(number, digitsLeft) {
+            if(digitsLeft > 0) {
+                return recurseLeadingZeros("0" + number, digitsLeft - 1);
+            } else {
+                return number;
+            }
+        };
+        return recurseLeadingZeros(number, digits - String(number).length);
+    };
+    
+
+    var generateRecordingName = function() {
+        return "axRecording" + leadingZeros(recordingIndex, 4);
+    };
+
+    var isSingleMouse = function(eventType) {
+        return (eventType === 'OnClick' ||
+            eventType === 'OnMouseUp' ||
+            eventType === 'OnMouseDown' ||
+            eventType === 'OnMouseOver' ||
+            eventType === 'OnKeyUp' ||
+            eventType === 'OnSelectedChange' ||
+            eventType === 'OnSelect' ||
+            eventType === 'OnUnselect' ||
+            eventType === 'OnTextChange' ||
+            eventType === 'OnMouseOut');
+    };
+
+    var isBulkMouse = function(eventType) {
+        return (eventType === 'OnMouseHover' ||
+            eventType === 'OnMouseMove');
+    };
+
+    var bulkEventElement;
+    var lastBulkEvent;
+
+
+    $axure.messageCenter.addMessageListener(function(message, eventData) {
+        var lastEvent, lastBulkData;
+        
+        if(message === 'logEvent') {
+            
+            if(bulkEventElement !== eventData.elementID) {
+                lastBulkEvent = {};
+                bulkEventElement = eventData.elementID;
+            }
+            
+            if(isBulkMouse(eventData.eventType)) {
+                lastEvent = lastBulkEvent[eventData.eventType];
+
+                if(lastEvent) {
+                    // this is the second or third or whatever onmousemove in a row
+                    lastBulkData = lastEvent.eventInfo.mousePositions;
+                    lastBulkData[lastBulkData.length] = {
+                        cursor: eventData.eventInfo.cursor,
+                        timeStamp: eventData.timeStamp
+                    };
+                } else {
+
+                    eventData.eventInfo.mousePositions = [];
+                    eventData.eventInfo.mousePositions[0] = {
+                        cursor: eventData.eventInfo.cursor,
+                        timeStamp: eventData.timeStamp
+                    };
+                    eventList[eventList.length] = eventData;
+                    lastBulkEvent[eventData.eventType] = eventData;
+                }
+            } else {
+                var z = true;
+            }
+            
+            if(isSingleMouse(eventData.eventType) ) {
+                eventList[eventList.length] = eventData;
+                lastBulkEvent = {};
+                bulkEventElement = eventData.elementID;
+            }
+
+            if(eventData.eventType === 'OnDrag') {
+
+                lastEvent = lastBulkEvent[eventData.eventType];
+                
+                if (lastEvent) {
+                    // this is the second or third or whatever onmousemove in a row
+                    lastBulkData = lastEvent.eventInfo.mousePositions;
+                    lastBulkData[lastBulkData.length] = {
+                        dragInfo: eventData.eventInfo.dragInfo,
+                        timeStamp: eventData.timeStamp
+                    };
+                } else {
+                    eventData.eventInfo.mousePositions = [];
+                    eventData.eventInfo.mousePositions[0] = {
+                        dragInfo: eventData.eventInfo.dragInfo,
+                        timeStamp: eventData.timeStamp
+                    };
+                    eventList[eventList.length] = eventData;
+                    lastBulkEvent[eventData.eventType] = eventData;
+                }
+            }
+//            if(eventData.eventType === 'OnKeyUp') {
+//                transmissionFields.eventInfo = eventData.eventInfo;
+//                $.ajax({
+//                    type: "POST",
+//                    url: '/RecordController/LogMouseClick',
+//                    data: transmissionFields,
+//                });
+//            }            
+        }
+
+    });
+    
+    
+    var _recordClick = function(event) {
+        $('#recordButton').addClass('recordPlayButtonSelected');
+        recordingIndex++;
+        //        $axure.recording.startRecord();
+
+        recordingStartTime = new Date().getTime();
+
+        $.ajax({
+            type: "POST",
+            url: '/RecordController/CreateRecording',
+            data: {
+                'recordingName': generateRecordingName(),
+                timeStamp: recordingStartTime
+            },
+            success: function(response) {
+                recordingId = response.recordingId;
+                recordingName = response.recordingName;
+        $axure.messageCenter.postMessage('startRecording', {'recordingId' : recordingId, 'recordingName': recordingName});
+            },
+            //                dataType: 'json'
+        });
+        
+    };
+
+    var _playClick = function(event) {
+        $('#playButton').addClass('recordPlayButtonSelected');
+    };
+
+    var _stopClick = function(event) {
+        var axRecording, axObjectDictionary, axRecordingContainer, transmissionFields;
+        $('#sitemapLinksContainer').toggle();
+        if($('#recordButton').is('.recordPlayButtonSelected')) {
+            $('#recordButton').removeClass('recordPlayButtonSelected');
+            //            $axure.recording.stopRecord();
+
+            axRecording = {
+                'recordingId' : recordingId,
+                'recordingName': recordingName,
+                'eventList': eventList
+            };
+            
+            axRecordingList[axRecordingList.length] = axRecording;
+            axRecordingContainer = $('#recordingContainer').find('li').filter('.recordingRootNode');
+            axRecordingContainer.append(_formAxRecordingBranch(axRecording));
+            _attachEventTriggers(axRecording);
+
+            lastBulkEvent = {};
+
+            var recordingStepList = [];
+
+            for(var eventListIdx in eventList) {
+                var eventListItem = eventList[eventListIdx];
+
+                if(eventListItem.eventType === 'OnDrag') {
+                    var lastDrag = eventListItem.eventInfo.mousePositions[eventListItem.eventInfo.mousePositions.length - 1].dragInfo;
+                    eventListItem.eventInfo.dragInfo.currentX = lastDrag.currentX;
+                    eventListItem.eventInfo.dragInfo.currentY = lastDrag.currentY;
+                    eventListItem.eventInfo.dragInfo.currentTime = lastDrag.currentTime;
+                    eventListItem.eventInfo.dragInfo.xDelta = eventListItem.eventInfo.dragInfo.currentX - eventListItem.eventInfo.dragInfo.lastX;
+                    eventListItem.eventInfo.dragInfo.yDelta = eventListItem.eventInfo.dragInfo.currentY - eventListItem.eventInfo.dragInfo.lastY;
+                    transmissionFields = {};
+                    transmissionFields = tackItOn(transmissionFields, eventListItem, ['eventType', 'elementID', 'path']);
+                    transmissionFields = tackItOn(transmissionFields, eventListItem.eventInfo, ['dragInfo']);
+                    transmissionFields.recordingId = recordingId;
+                }
+
+                if(isSingleMouse(eventListItem.eventType)) {
+                    transmissionFields = {};
+                    transmissionFields = tackItOn(transmissionFields, eventListItem, ['timeStamp', 'eventType', 'elementID', 'path']);
+                    transmissionFields = tackItOn(transmissionFields, eventListItem.eventInfo, ['cursor']);
+                    transmissionFields.recordingId = recordingId;
+                }
+
+                if(isBulkMouse(eventListItem.eventType)) {
+                    transmissionFields = {};
+                    transmissionFields = tackItOn(transmissionFields, eventListItem, ['eventType', 'elementID', 'path']);
+                    transmissionFields = tackItOn(transmissionFields, eventListItem.eventInfo, ['mousePositions']);
+                    transmissionFields.recordingId = recordingId;
+                }
+                recordingStepList[recordingStepList.length] = transmissionFields;
+            }
+
+            eventList = [];
+            $axure.messageCenter.postMessage('stopRecording', axObjectDictionary);
+
+            var jsonText = {
+                'recordingName': recordingName,
+                'recordingId': recordingId,
+                recordingStart: new Date().getTime(),
+                recordingEnd: recordingStartTime,
+                'eventList': recordingStepList
+            };
+
+            $.ajax({
+                type: "POST",
+                url: '/RecordController/StopRecording',
+                data: { 'jsonText': JSON.stringify(jsonText) }
+                
+            });
+
+        }
+
+        if($('#playButton').is('.recordPlayButtonSelected')) {
+            $('#playButton').removeClass('recordPlayButtonSelected');
+        }
+    };
+    
+    var _deleteClick = function(event) {
+        $.ajax({
+                type: "POST",
+                url: '/RecordController/DeleteRecordings',
+            success: function(response) {
+                var x = true;
+            },                //                dataType: 'json'
+        });
+    };
+
+    var tackItOn = function(destination, source, fields) {
+
+        for(var idx in fields) {
+            destination[fields[idx]] = source[fields[idx]];
+        }
+        return destination;
+    };
+
+    var makeFirstLetterLower = function(eventName) {
+        return eventName.substr(0, 1).toLowerCase() + eventName.substr(1);
+    };
+
+    var _attachEventTriggers = function(axRecording) {
+        for(var eventIdx in axRecording.eventList) {
+            var eventObject = axRecording.eventList[eventIdx];
+            var eventID = axRecording['recordingId'] + '_' + eventObject.timeStamp;
+            currentEvent = eventID;
+            $('#' + eventID).click(_triggerEvent(axRecording['recordingId'], eventObject.timeStamp));
+            //            $('#' + eventID).click(event.trigger);
+        }
+    };
+
+    var _formAxRecordingBranch = function(axRecording) {
+        var eventObject, eventID, RDOID;
+        var recordPlayUi = '<ul class="recordingTree">';
+        recordPlayUi += "<li class='recordingNode recordingExpandableNode'>";
+        recordPlayUi += '<div class="recordingContainer" style="margin-left:15px">';
+        recordPlayUi += '<a class="recordingPlusMinusLink"><span class="recordingMinus"></span></a>';
+        recordPlayUi += '<a class="recordingPageLink" nodeurl="home.html">';
+        recordPlayUi += '<span class="recordingPageIcon"></span>';
+        recordPlayUi += '<span class="recordingPageName">' + axRecording['recordingName'] + '</span>';
+        recordPlayUi += '</a>';
+
+        recordPlayUi += '<ul>';
+
+        for(eventID in axRecording.eventList) {
+
+            eventObject = axRecording.eventList[eventID];
+
+            recordPlayUi += '<li class="recordingNode recordingLeafNode">';
+            recordPlayUi += '<div class="recordingEventContainer" style="margin-left:44px">';
+            var eventID = axRecording['recordingId'] + '_' + eventObject.timeStamp;
+            recordPlayUi += '<a id="' + eventID + '" class="sitemapPageLink">';
+            recordPlayUi += 'Event ID: ' + eventID + '<br/>';
+
+            recordPlayUi += '<span class="sitemapPageIcon"></span>';
+            recordPlayUi += '<span class="sitemapPageName">';
+
+            recordPlayUi += 'elementID: ' + eventObject.elementID + '<br/>';
+            recordPlayUi += 'eventType: ' + eventObject.eventType + '<br/>';
+//            recordPlayUi += 'cursor: ' + eventObject.eventInfo.cursor.x + ',' + eventObject.eventInfo.cursor.y + '<br/>';
+
+            for(RDOID in eventObject.path) {
+                recordPlayUi += '/' + eventObject.path[RDOID];
+            }
+            recordPlayUi += '<br/>';
+            recordPlayUi += '</span>';
+            recordPlayUi += '</a>';
+            recordPlayUi += '</div>';
+            recordPlayUi += '</li>';
+        }
+
+        recordPlayUi += '</ul>';
+
+        recordPlayUi += '</div>';
+
+        recordPlayUi += "</li>";
+        recordPlayUi += "</ul>";
+
+        return recordPlayUi;
+    };
+
+    var currentEvent = '';
+
+    var _triggerEvent = function(axRecording, timeStamp) {
+        //            $axure.messageCenter.postMessage('triggerEvent', false);
+
+
+        for(var axRecordingIdx in axRecordingList) {
+            if(axRecordingList[axRecordingIdx].recordingId === axRecording) {
+                for(var eventIdx in axRecordingList[axRecordingIdx].eventList) {
+                    if(axRecordingList[axRecordingIdx].eventList[eventIdx].timeStamp === timeStamp) {
+
+                        var thisEvent = axRecordingList[axRecordingIdx].eventList[eventIdx];
+                        //                            thisEvent.trigger();
+
+                        var thisEventInfo, lowerEventType;
+                        lowerEventType = thisEvent.eventType.toLowerCase();
+                        if(lowerEventType === 'onclick' || lowerEventType === 'onmousein') {
+                            thisEventInfo = {};
+                            thisEventInfo = tackItOn(thisEventInfo, thisEvent.eventInfo, ['cursor', 'timeStamp', 'srcElement']);
+                            if(thisEvent.eventInfo.inputType) {
+                                thisEventInfo = tackItOn(thisEventInfo, thisEvent.eventInfo, ['inputType', 'inputValue']);
+                            }
+                        } else {
+                            thisEventInfo = thisEvent.eventInfo;
+                        }
+
+                        var thisParameters = {
+                            'element': thisEvent.elementID,
+                            'eventInfo': thisEventInfo,
+                            //                            'axEventObject': thisEvent.eventObject,
+                            'eventType': thisEvent.eventType
+                        };
+
+                        return function() {
+                            $axure.messageCenter.postMessage('playEvent', thisParameters);
+                        };
+
+                    }
+                }
+            }
+        }
+    };
+
+    var _generateRecordPlay = function() {
+        var recordPlayUi = "<div id='recordPlayContainer'>";
+
+        recordPlayUi += "<div id='recordPlayToolbar'>";
+
+        recordPlayUi += "<div style='height:30px;'>";
+
+        recordPlayUi += "<a id='recordButton' title='Start a Recording' class='recordPlayButton'></a>";
+        recordPlayUi += "<a id='playButton' title='Play Back a Recording' class='recordPlayButton'></a>";
+        recordPlayUi += "<a id='stopButton' title='Stop' class='recordPlayButton'></a>";
+        recordPlayUi += "<a id='deleteButton' title='Delete All Recordings' class='recordPlayButton'></a>";
+        recordPlayUi += "</div>";
+
+        recordPlayUi += "<div id='recordingContainer'><li class='recordingNode recordingRootNode'></li></div>";
+        recordPlayUi += "</div>";
+
+        $('#recordPlayHost').html(recordPlayUi);
+    };
+
+})();   
--- a/demo/plugins/recordplay/styles/recordplay.css
+++ b/demo/plugins/recordplay/styles/recordplay.css
@@ -0,0 +1,90 @@
+#recordPlayHost {
+    font-size: 12px;
+    color:#333;
+    height: 100%;
+}
+
+
+#recordPlayContainer 
+{
+    overflow: auto;
+    width: 100%;
+    height: 100%;
+    padding: 10px 10px 10px 10px;
+}
+
+#recordPlayToolbar 
+{
+	margin: 5px 5px 5px 5px;
+    height: 22px;
+}
+
+#recordPlayToolbar .recordPlayButton
+{
+    float: left;
+    width: 22px;
+    height: 22px;
+    border: 1px solid transparent;
+}
+
+#recordPlayToolbar .recordPlayButton:hover
+{
+    border: 1px solid rgb(0,157,217);
+    background-color : rgb(166,221,242);
+}
+
+#recordPlayToolbar .recordPlayButton:active
+{
+    border: 1px solid rgb(0,157,217);
+    background-color : rgb(204,235,248);
+}
+
+#recordPlayToolbar .recordPlayButtonSelected {
+    border: 1px solid rgb(0,157,217);
+    background-color : rgb(204,235,248);    
+}
+
+/* removed images */
+/*#recordButton {
+    background: url('../../sitemap/styles/images/233_hyperlink_16.png') no-repeat center center;
+}
+
+#playButton {
+    background: url('../../sitemap/styles/images/225_responsive_16.png') no-repeat center center;
+}
+
+#stopButton {
+    background: url('../../sitemap/styles/images/228_togglenotes_16.png') no-repeat center center;
+}
+
+#deleteButton {
+    background: url('../../sitemap/styles/images/231_event_16.png') no-repeat center center;
+}*/
+
+#recordNameHeader
+{
+    /* yeah??*/
+	font-size: 13px;
+	font-weight: bold;
+	height: 23px;
+	white-space: nowrap;
+}
+
+#recordPlayContent 
+{
+    /* yeah??*/
+	overflow: visible;
+}
+
+.recordPlayName 
+{
+	font-size: 12px;
+	margin-bottom: 5px;
+	text-decoration: underline;
+	white-space: nowrap;
+}
+
+.recordPlay 
+{
+	margin-bottom: 10px;
+}
--- a/demo/plugins/sitemap/sitemap.js
+++ b/demo/plugins/sitemap/sitemap.js
@@ -0,0 +1,553 @@
+var currentNodeUrl = '';
+var allNodeUrls = [];
+
+var openNextPage = $axure.player.openNextPage = function () {
+    var index = allNodeUrls.indexOf(currentNodeUrl) + 1;
+    if(index >= allNodeUrls.length) return;
+    var nextNodeUrl = allNodeUrls[index];
+    currentNodeUrl = nextNodeUrl;
+    $('.sitemapPageLink[nodeUrl="' + nextNodeUrl + '"]').parent().mousedown();
+};
+
+var openPreviousPage = $axure.player.openPreviousPage = function () {
+    var index = allNodeUrls.indexOf(currentNodeUrl) - 1;
+    if(index < 0) return;
+    var nextNodeUrl = allNodeUrls[index];
+    currentNodeUrl = nextNodeUrl;
+    $('.sitemapPageLink[nodeUrl="' + nextNodeUrl + '"]').parent().mousedown();
+};
+
+// use this to isolate the scope
+(function() {
+
+    var SHOW_HIDE_ANIMATION_DURATION = 0;
+
+    var HIGHLIGHT_INTERACTIVE_VAR_NAME = 'hi';
+
+    var currentPageLoc = '';
+    var currentPlayerLoc = '';
+    var currentPageHashString = '';
+
+    $(window.document).ready(function() {
+        $axure.player.createPluginHost({
+            id: 'sitemapHost',
+            context: 'project',
+            title: 'Project Pages',
+            gid: 1,
+        });
+
+        $(window.document).bind('keyup', function (e) {
+            if (e.target.localName == "textarea" || e.target.localName == "input") return;
+            switch(e.which) {
+                case 188:
+                    openPreviousPage();
+                    break;
+                case 190:
+                    openNextPage();
+                    break;
+                default: return; // exit this handler for other keys
+            }
+        });
+
+        generateSitemap();
+
+        $('.leftArrow').click(openPreviousPage);
+        $('.rightArrow').click(openNextPage);
+
+        $('.sitemapPlusMinusLink').click(collapse_click);
+        $('.sitemapPageLink').parent().mousedown(node_click);
+
+        $('#interfaceAdaptiveViewsListContainer').hide();
+
+        $('#projectOptionsShowHotspots').click(showHotspots_click);
+        $('#searchIcon').click(searchBoxClose_click);
+        $('#searchDiv').click(searchBoxExpand_click);
+        $('#searchBox').keyup(search_input_keyup);
+
+        // bind to the page load
+        $axure.page.bind('load.sitemap', function() {
+            currentPageLoc = $axure.page.location.split("#")[0];
+            var decodedPageLoc = decodeURI(currentPageLoc);
+            currentNodeUrl = decodedPageLoc.substr(decodedPageLoc.lastIndexOf('/') ? decodedPageLoc.lastIndexOf('/') + 1 : 0);
+            currentPlayerLoc = $(location).attr('href').split("#")[0].split("?")[0];
+            currentPageHashString = '#p=' + currentNodeUrl.substr(0, currentNodeUrl.lastIndexOf('.'));
+
+            $axure.player.setVarInCurrentUrlHash(PAGE_ID_NAME, $axure.player.getPageIdByUrl(currentNodeUrl));
+            $axure.player.setVarInCurrentUrlHash(PAGE_URL_NAME, currentNodeUrl.substring(0, currentNodeUrl.lastIndexOf('.html')));
+
+            $('#sitemapTreeContainer').find('.sitemapHighlight').removeClass('sitemapHighlight');
+            $('.sitemapPageLink[nodeUrl="' + currentNodeUrl + '"]').parent().parent().addClass('sitemapHighlight');
+
+            var pageName = $axure.page.pageName;
+            $('.pageNameHeader').html(pageName);
+
+            //If highlight var is present and set to 1 or else if
+            //sitemap highlight button is selected then highlight interactive elements
+            var hiVal = $axure.player.getHashStringVar(HIGHLIGHT_INTERACTIVE_VAR_NAME);
+            if(hiVal.length > 0 && hiVal == 1) {
+                $('#showHotspotsOption').find('.overflowOptionCheckbox').addClass('selected');
+                if ($('#projectOptionsHotspotsCheckbox').length > 0) $('#projectOptionsHotspotsCheckbox').addClass('selected');
+                $axure.messageCenter.postMessage('highlightInteractive', true);
+            } else if ($('#showHotspotsOption').find('.overflowOptionCheckbox').hasClass('selected')) {
+                $axure.messageCenter.postMessage('highlightInteractive', true);
+            }
+
+            generateAdaptiveViews(false);
+            if (MOBILE_DEVICE) generateAdaptiveViews(true);
+
+            $axure.player.suspendRefreshViewPort = true;
+
+            //Set the current view if it is defined in the hash string
+            //If the view is invalid, set it to 'auto' in the string
+            //ELSE set the view based on the currently selected view in the toolbar menu
+            var viewStr = $axure.player.getHashStringVar(ADAPTIVE_VIEW_VAR_NAME);
+            if(viewStr.length > 0) {
+                var $view = $('.adaptiveViewOption[val="' + viewStr + '"]');
+                if($view.length > 0) $view.click();
+                else $('.adaptiveViewOption[val="auto"]').click();
+            } else if($('.selectedRadioButton').length > 0) {
+                var $viewOption = $('.selectedRadioButton').parents('.adaptiveViewOption');
+                $viewOption.click();
+            }
+            updateAdaptiveViewHeader();
+
+            function setDefaultScaleForDevice() {
+                if(MOBILE_DEVICE && $axure.player.isMobileMode()) {
+                    $('.projectOptionsScaleRow[val="0"]').click();
+                } else {
+                    $('.vpScaleOption[val="0"]').click();
+                }
+            }
+
+            var scaleStr = $axure.player.getHashStringVar(SCALE_VAR_NAME);
+            if(scaleStr.length > 0) {
+                var $scale = $('.vpScaleOption[val="' + scaleStr + '"]');
+                if($scale.length > 0) $scale.click();
+                else setDefaultScaleForDevice();
+            } else {
+                setDefaultScaleForDevice();
+            }
+
+            var rotateStr = $axure.player.getHashStringVar(ROT_VAR_NAME);
+            if(rotateStr.length > 0) {
+                $('#vpRotate').prop('checked', true);
+            }
+
+            $axure.player.suspendRefreshViewPort = false;
+
+            if (!$axure.player.isViewOverridden()) $axure.messageCenter.postMessage('setAdaptiveViewForSize', { 'width': $('#mainPanel').width(), 'height': $('#mainPanel').height() });
+
+            $axure.player.refreshViewPort();
+
+            $axure.messageCenter.postMessage('finishInit');
+
+            showMainPanel();
+            return false;
+        });
+
+        var $vpContainer = $('#interfaceScaleListContainer');
+        
+        var scaleOptions = '<div class="vpScaleOption" val="0"><div class="scaleRadioButton"><div class="selectedRadioButtonFill"></div></div>Default Scale</div>';
+        scaleOptions += '<div class="vpScaleOption" val="1"><div class="scaleRadioButton"><div class="selectedRadioButtonFill"></div></div>Scale to Width</div>';
+        scaleOptions += '<div class="vpScaleOption" val="2"><div class="scaleRadioButton"><div class="selectedRadioButtonFill"></div></div>Scale to Fit</div>';
+        $(scaleOptions).appendTo($vpContainer);
+
+        $('#overflowMenuContainer').append('<div id="showHotspotsOption" class="showOption" style="order: 1"><div class="overflowOptionCheckbox"></div>Show Hotspots</div>');
+        $('#overflowMenuContainer').append($vpContainer);
+        $vpContainer.show();
+
+        $('#showHotspotsOption').click(showHotspots_click);
+        $('.vpScaleOption').click(vpScaleOption_click);
+        $('.vpScaleOption').mouseup(function (event) {
+            event.stopPropagation();
+        });
+
+        if (MOBILE_DEVICE) {
+            var scaleOptions = '<div class="projectOptionsScaleRow" val="1"><div class="scaleRadioButton"><div class="selectedRadioButtonFill"></div></div>Scale to fit width</div>';
+            scaleOptions += '<div class="projectOptionsScaleRow" val="0"><div class="scaleRadioButton"><div class="selectedRadioButtonFill"></div></div>Original size (100%)</div>';
+            scaleOptions += '<div class="projectOptionsScaleRow" val="2" style="border-bottom: solid 1px #c7c7c7"><div class="scaleRadioButton"><div class="selectedRadioButtonFill"></div></div>Fit all to screen</div>';
+            $(scaleOptions).appendTo($('#projectOptionsScaleContainer'));
+
+            $('.projectOptionsScaleRow').click(vpScaleOption_click);
+        }
+
+        $('#searchBox').focusin(function() {
+            if($(this).is('.searchBoxHint')) {
+                $(this).val('');
+                $(this).removeClass('searchBoxHint');
+            }
+        }).focusout(function() {
+            if($(this).val() == '') {
+                $(this).addClass('searchBoxHint');
+            }
+        });
+
+
+        $('#searchBox').focusout();
+    });
+
+    var _formatViewDimension = function(dim) {
+        if(dim == 0) return 'any';
+        if(dim.toString().includes('.')) return dim.toFixed(2);
+        return dim;
+    };
+
+    function generateAdaptiveViews(forProjectOptions) {
+        var $container = forProjectOptions ? $('#projectOptionsAdaptiveViewsContainer') : $('#interfaceAdaptiveViewsListContainer');
+        var $viewSelect = forProjectOptions ? $('#projectOptionsViewSelect') : $('#viewSelect');
+        var adaptiveViewOptionClass = forProjectOptions ? 'projectOptionsAdaptiveViewRow' : 'adaptiveViewOption';
+        var currentViewClass = forProjectOptions ? '' : 'currentAdaptiveView';
+
+        $container.empty();
+        $viewSelect.empty();
+
+        //Fill out adaptive view container with prototype's defined adaptive views, as well as the default, and Auto
+        var viewsList = '<div class="' + adaptiveViewOptionClass + '" val="auto"><div class="adapViewRadioButton selectedRadioButton"><div class="selectedRadioButtonFill"></div></div>Adaptive</div>';
+        var viewSelect = '<option value="auto">Adaptive</option>';
+        if (typeof $axure.page.defaultAdaptiveView.name != 'undefined') {
+            //If the name is a blank string, make the view name the width if non-zero, else 'any'
+            var defaultView = $axure.page.defaultAdaptiveView;
+            var defaultViewName = defaultView.name;
+
+            var widthString = _formatViewDimension(defaultView.size.width);
+            var heightString = _formatViewDimension(defaultView.size.height);
+
+            var viewString = defaultViewName + ' (' + widthString + ' x ' + heightString + ')';
+
+            viewsList += '<div class="' + adaptiveViewOptionClass + ' ' + currentViewClass + '" val="default"data-dim="' + defaultView.size.width + 'x' + defaultView.size.height + '">' +
+                '<div class="adapViewRadioButton"><div class="selectedRadioButtonFill"></div></div>' + viewString + '</div>';
+            viewSelect += '<option value="default">' + viewString + '</option>';
+        }
+
+        var useViews = $axure.document.configuration.useViews;
+        var hasViews = false;
+        if(useViews) {
+            for(var viewIndex = 0; viewIndex < $axure.page.adaptiveViews.length; viewIndex++) {
+                var currView = $axure.page.adaptiveViews[viewIndex];
+
+                var widthString = _formatViewDimension(currView.size.width);
+                var heightString = _formatViewDimension(currView.size.height);
+
+                var viewString = currView.name + ' (' + widthString + ' x ' + heightString + ')';
+                viewsList += '<div class="' + adaptiveViewOptionClass +
+                    ((forProjectOptions && (viewIndex == $axure.page.adaptiveViews.length - 1)) ? '" style="border-bottom: solid 1px #c7c7c7; margin-bottom: 15px;' : '') + 
+                    '" val="' +
+                    currView.id +
+                    '"  data-dim="' +
+                    currView.size.width +
+                    'x' +
+                    currView.size.height +
+                    '"><div class="adapViewRadioButton"><div class="selectedRadioButtonFill"></div></div>' +
+                    viewString +
+                    '</div>';
+                viewSelect += '<option value="' + currView.id + '">' + viewString + '</option>';
+
+                hasViews = true;
+            }
+        }
+
+        $container.append(viewsList);
+        $viewSelect.append(viewSelect);
+
+        if (!hasViews) {
+            if (forProjectOptions) {
+                $('#projectOptionsAdaptiveViewsHeader').hide();
+                $('#projectOptionsAdaptiveViewsContainer').hide();
+            } else $('#interfaceAdaptiveViewsContainer').hide();
+        } else {
+            if (forProjectOptions) {
+                $('#projectOptionsAdaptiveViewsHeader').show();
+                $('#projectOptionsAdaptiveViewsContainer').show();
+            } else $('#interfaceAdaptiveViewsContainer').show();
+        }
+
+        $(('.' + adaptiveViewOptionClass)).click(adaptiveViewOption_click);
+
+        if (!forProjectOptions) {
+            $(('.' + adaptiveViewOptionClass)).mouseup(function (event) {
+                event.stopPropagation();
+            });
+        }
+    }
+
+
+    function collapse_click(event) {
+        if($(this).children('.sitemapPlus').length > 0) {
+            expand_click($(this));
+        } else {
+            $(this)
+                .children('.sitemapMinus').removeClass('sitemapMinus').addClass('sitemapPlus').end()
+                .closest('li').children('ul').hide(SHOW_HIDE_ANIMATION_DURATION);
+        }
+        event.stopPropagation();
+    }
+
+    function expand_click($this) {
+        $this
+            .children('.sitemapPlus').removeClass('sitemapPlus').addClass('sitemapMinus').end()
+            .closest('li').children('ul').show(SHOW_HIDE_ANIMATION_DURATION);
+    }
+
+    function searchBoxExpand_click(event) {
+        if (!$('#searchIcon').hasClass('sitemapToolbarButtonSelected')) {
+            $('#searchIcon').addClass('sitemapToolbarButtonSelected')
+            $('#searchBox').width(0);
+            $('#searchBox').show();
+            $('#searchBox').animate({ width: '95%' }, { duration: 200, complete: function () { $('#searchBox').focus(); } });
+        }
+    }
+
+    function searchBoxClose_click(event) {
+        if ($('#searchIcon').hasClass('sitemapToolbarButtonSelected')) {
+            $('#searchBox').animate({ width: '0%' }, { duration: 200,
+                complete: function () {
+                    $('#searchBox').hide();
+                    $('#searchIcon').removeClass('sitemapToolbarButtonSelected')
+                }});
+            $('#searchBox').val('');
+            $('#searchBox').keyup();
+        }
+    }
+
+    function node_click(event) {
+        hideMainPanel();
+        $('#sitemapTreeContainer').find('.sitemapHighlight').removeClass('sitemapHighlight');
+        $(this).parent().addClass('sitemapHighlight');
+        $axure.page.navigate($(this).children('.sitemapPageLink')[0].getAttribute('nodeUrl'), true);
+    }
+
+    function hideMainPanel() {
+        $('#mainPanel').css('opacity', '0');
+        $('#clippingBounds').css('opacity', '0');
+    }
+    function showMainPanel() {
+        $('#mainPanel').animate({ opacity: 1 }, 10);
+        $('#clippingBounds').animate({ opacity: 1 }, 10);
+    }
+
+    $axure.messageCenter.addMessageListener(function(message, data) {
+        if(message == 'adaptiveViewChange') {
+            $('.adaptiveViewOption').removeClass('currentAdaptiveView');
+            if(data.viewId) {$('.adaptiveViewOption[val="' + data.viewId + '"]').addClass('currentAdaptiveView');}
+            else $('.adaptiveViewOption[val="default"]').addClass('currentAdaptiveView');
+
+            //when we set adaptive view through user event, we want to update the checkmark on sitemap
+            if(data.forceSwitchTo) {
+                $('.adapViewRadioButton').find('.selectedRadioButtonFill').hide();
+                $('.adapViewRadioButton').removeClass('selectedRadioButton');
+                $('div[val="' + data.forceSwitchTo + '"]').find('.adapViewRadioButton').addClass('selectedRadioButton');
+                $('div[val="' + data.forceSwitchTo + '"]').find('.selectedRadioButtonFill').show();
+            }
+
+            updateAdaptiveViewHeader();
+            $axure.player.refreshViewPort();
+
+        } else if(message == 'previousPage') {
+            openPreviousPage();
+        } else if(message == 'nextPage') {
+            openNextPage();
+        }
+    });
+
+    $axure.player.toggleHotspots = function (val) {
+        var overflowMenuCheckbox = $('#showHotspotsOption').find('.overflowOptionCheckbox');
+        if ($(overflowMenuCheckbox).hasClass('selected')) {
+            if (!val) $('#showHotspotsOption').click();
+        } else {
+            if (val) $('#showHotspotsOption').click();
+        }
+    }
+
+    function showHotspots_click(event) {
+        var overflowMenuCheckbox = $('#showHotspotsOption').find('.overflowOptionCheckbox');
+        var projOptionsCheckbox = $('#projectOptionsHotspotsCheckbox');
+
+        if ($(overflowMenuCheckbox).hasClass('selected')) {
+            overflowMenuCheckbox.removeClass('selected');
+            if (projOptionsCheckbox.length > 0 ) projOptionsCheckbox.removeClass('selected');
+            $axure.messageCenter.postMessage('highlightInteractive', false);
+            //Delete 'hi' hash string var if it exists since default is unselected
+            $axure.player.deleteVarFromCurrentUrlHash(HIGHLIGHT_INTERACTIVE_VAR_NAME);
+        } else {
+            overflowMenuCheckbox.addClass('selected');
+            if (projOptionsCheckbox.length > 0) projOptionsCheckbox.addClass('selected');
+            $axure.messageCenter.postMessage('highlightInteractive', true);
+            //Add 'hi' hash string var so that stay highlighted across reloads
+            $axure.player.setVarInCurrentUrlHash(HIGHLIGHT_INTERACTIVE_VAR_NAME, 1);
+        }
+    }
+
+
+    function adaptiveViewOption_click(event) {
+        var currVal = $(this).attr('val');
+
+        $('.adaptiveViewOption').removeClass('currentAdaptiveView');
+        if(currVal) {$('.adaptiveViewOption[val="' + currVal + '"]').addClass('currentAdaptiveView');}
+        else $('.adaptiveViewOption[val="default"]').addClass('currentAdaptiveView');
+
+        $('.adapViewRadioButton').find('.selectedRadioButtonFill').hide();
+        $('.adapViewRadioButton').removeClass('selectedRadioButton');
+        $('div[val="' + currVal + '"]').find('.adapViewRadioButton').addClass('selectedRadioButton');
+        $('div[val="' + currVal + '"]').find('.selectedRadioButtonFill').show();
+
+        selectAdaptiveView(currVal);
+        $axure.player.closePopup();
+        updateAdaptiveViewHeader();
+    }
+
+    var selectAdaptiveView = $axure.player.selectAdaptiveView = function(currVal) {
+        if (currVal == 'auto') {
+            $axure.messageCenter.postMessage('setAdaptiveViewForSize', { 'width': $('#mainPanel').width(), 'height': $('#mainPanel').height() });
+            $axure.player.deleteVarFromCurrentUrlHash(ADAPTIVE_VIEW_VAR_NAME);
+        } else {
+            currentPageLoc = $axure.page.location.split("#")[0];
+            var decodedPageLoc = decodeURI(currentPageLoc);
+            var nodeUrl = decodedPageLoc.substr(decodedPageLoc.lastIndexOf('/')
+                ? decodedPageLoc.lastIndexOf('/') + 1
+                : 0);
+            var adaptiveData = {
+                src: nodeUrl
+            };
+
+            adaptiveData.view = currVal;
+            $axure.messageCenter.postMessage('switchAdaptiveView', adaptiveData);
+            $axure.player.setVarInCurrentUrlHash(ADAPTIVE_VIEW_VAR_NAME, currVal);
+        }
+    }
+
+    $axure.player.updateAdaptiveViewHeader = updateAdaptiveViewHeader = function () {
+        var hasDefinedDim = true;
+        var dimensionlessViewStr = '(any x any)';
+
+        var viewString = $('.adaptiveViewOption.currentAdaptiveView').text();
+        if (viewString != null && viewString.indexOf(dimensionlessViewStr) >= 0) hasDefinedDim = false;
+
+        if (!hasDefinedDim) {
+            var viewName = viewString.substring(0, viewString.lastIndexOf(' ('));
+            var widthString = $('#mainPanelContainer').width();
+            viewString = viewName + ' (' + widthString + ' x any)';
+        }
+
+        $('.adaptiveViewHeader').html(viewString);
+    }
+
+    $axure.player.selectScaleOption = function (scaleVal) {
+        var $scale = $('.vpScaleOption[val="' + scaleVal + '"]');
+        if ($scale.length > 0) $scale.click();
+    }
+
+    function vpScaleOption_click(event) {
+        var scaleCheckDiv = $(this).find('.scaleRadioButton');
+        var scaleVal = $(this).attr('val');
+        if (scaleCheckDiv.hasClass('selectedRadioButton')) return false;
+
+        var $selectedScaleOption = $('.vpScaleOption[val="' + scaleVal + '"], .projectOptionsScaleRow[val="' + scaleVal + '"]');
+        var $allScaleOptions = $('.vpScaleOption, .projectOptionsScaleRow');
+        $allScaleOptions.find('.scaleRadioButton').removeClass('selectedRadioButton');
+        $allScaleOptions.find('.selectedRadioButtonFill').hide();
+        $selectedScaleOption.find('.scaleRadioButton').addClass('selectedRadioButton');
+        $selectedScaleOption.find('.selectedRadioButtonFill').show();
+
+        if (scaleVal == '0') {
+            $axure.player.deleteVarFromCurrentUrlHash(SCALE_VAR_NAME);
+        } else if (typeof scaleVal !== 'undefined') {
+            $axure.player.setVarInCurrentUrlHash(SCALE_VAR_NAME, scaleVal);
+        }
+
+        $axure.player.refreshViewPort();
+    }
+
+    function search_input_keyup(event) {
+        var searchVal = $(this).val().toLowerCase();
+        //If empty search field, show all nodes, else grey+hide all nodes and
+        //ungrey+unhide all matching nodes, as well as unhide their parent nodes
+        if(searchVal == '') {
+            $('.sitemapPageName').removeClass('sitemapGreyedName');
+            $('.sitemapNode').show();
+        } else {
+            $('.sitemapNode').hide();
+
+            $('.sitemapPageName').addClass('sitemapGreyedName').each(function() {
+                var nodeName = $(this).text().toLowerCase();
+                if(nodeName.indexOf(searchVal) != -1) {
+                    $(this).removeClass('sitemapGreyedName').parents('.sitemapNode:first').show().parents('.sitemapExpandableNode').show();
+                }
+            });
+        }
+    }
+
+
+    function generateSitemap() {
+        var treeUl = "<div id='sitemapHeader'' class='sitemapHeader'>";
+        treeUl += "<div id='sitemapToolbar' class='sitemapToolbar'>";
+
+        treeUl += '<div id="searchDiv"><span id="searchIcon" class="sitemapToolbarButton"></span><input id="searchBox" type="text"/></div>';
+        treeUl += "<div class='leftArrow sitemapToolbarButton'></div>";
+        treeUl += "<div class='rightArrow sitemapToolbarButton'></div>";
+
+        treeUl += "</div>";
+        treeUl += "</div>";
+
+        ///////////////////
+
+        var sitemapTitle = $axure.player.getProjectName();
+        if (!sitemapTitle) sitemapTitle = "Pages";
+        treeUl += "<div class='sitemapPluginNameHeader pluginNameHeader'>" + sitemapTitle + "</div>";
+
+        treeUl += "<div id='sitemapTreeContainer'>";
+        treeUl += "<ul class='sitemapTree' style='clear:both;'>";
+        var rootNodes = $axure.document.sitemap.rootNodes;
+        for(var i = 0; i < rootNodes.length; i++) {
+            treeUl += generateNode(rootNodes[i], 0);
+        }
+        treeUl += "</ul></div>";
+
+        if (!MOBILE_DEVICE) {
+            treeUl += "<div id='changePageInstructions' class='pageSwapInstructions'>Use  ";
+            treeUl += '<span class="backKeys"></span>';
+            treeUl += "  and  ";
+            treeUl += '<span class="forwardKeys"></span>';
+            treeUl += "  keys<br>to move between pages";
+            treeUl += "</div>";
+        }
+
+        $('#sitemapHost').html(treeUl);
+    }
+
+    function generateNode(node, level) {
+        var hasChildren = (node.children && node.children.length > 0);
+        var margin, returnVal;
+        if(hasChildren) {
+            margin = (9 + level * 17);
+            returnVal = "<li class='sitemapNode sitemapExpandableNode'><div><div class='sitemapPageLinkContainer' style='margin-left:" + margin + "px'><a class='sitemapPlusMinusLink'><span class='sitemapMinus'></span></a>";
+        } else {
+            margin = (19 + level * 17);
+            returnVal = "<li class='sitemapNode sitemapLeafNode'><div><div class='sitemapPageLinkContainer' style='margin-left:" + margin + "px'>";
+        }
+
+        var isFolder = node.type == "Folder";
+        if(!isFolder) {
+            returnVal += "<a class='sitemapPageLink' nodeUrl='" + node.url + "'>";
+            allNodeUrls.push(node.url);
+        }
+        returnVal += "<span class='sitemapPageIcon";
+        if(isFolder) { returnVal += " sitemapFolderIcon"; }
+
+        returnVal += "'></span><span class='sitemapPageName'>";
+        returnVal += $('<div/>').text(node.pageName).html();
+        returnVal += "</span>";
+        if(!isFolder) returnVal += "</a>";
+        returnVal += "</div></div>";
+
+        if(hasChildren) {
+            returnVal += "<ul>";
+            for(var i = 0; i < node.children.length; i++) {
+                var child = node.children[i];
+                returnVal += generateNode(child, level + 1);
+            }
+            returnVal += "</ul>";
+        }
+        returnVal += "</li>";
+        return returnVal;
+    }
+})();
--- a/demo/plugins/sitemap/styles/images/back_keys.svg
+++ b/demo/plugins/sitemap/styles/images/back_keys.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <g fill="none" fill-rule="evenodd">
+        <rect width="18" height="18" x="1" y="1" stroke="#E1E0E0" stroke-width="2" rx="4"/>
+        <rect width="19" height="19" x=".5" y=".5" stroke="#979797" rx="4"/>
+        <path fill="#666" d="M9 5V4L4.448 6.5v1L9 9.5v-1C6.733 7.513 5.567 7.013 5.5 7c.069-.017 1.235-.683 3.5-2zM5.292 14.262a.675.675 0 0 1 .195-.477.676.676 0 0 1 .225-.147.753.753 0 0 1 .288-.054c.12 0 .227.022.321.066a.641.641 0 0 1 .234.183.827.827 0 0 1 .141.27c.032.102.048.213.048.333 0 .18-.026.367-.078.561a2.996 2.996 0 0 1-.222.576 3.439 3.439 0 0 1-.84 1.053l-.18-.174a.222.222 0 0 1-.078-.168c0-.052.028-.106.084-.162.04-.044.091-.103.153-.177s.125-.159.189-.255.123-.202.177-.318c.054-.116.093-.24.117-.372h-.078a.709.709 0 0 1-.282-.054.647.647 0 0 1-.219-.153.698.698 0 0 1-.144-.234.834.834 0 0 1-.051-.297z"/>
+    </g>
+</svg>
--- a/demo/plugins/sitemap/styles/images/closed_item.svg
+++ b/demo/plugins/sitemap/styles/images/closed_item.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="5px" height="8px" viewBox="0 0 5 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>open item copy</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Tree-item" transform="translate(-6.000000, -9.000000)" fill="#8C8C8C">
+            <g id="closed-item" transform="translate(5.062500, 9.000000)">
+                <polygon id="Rectangle-13" transform="translate(3.500000, 4.000000) rotate(-90.000000) translate(-3.500000, -4.000000) " points="0 1.6 7 1.6 3.5 6.4"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/demo/plugins/sitemap/styles/images/folder_closed_blue.svg
+++ b/demo/plugins/sitemap/styles/images/folder_closed_blue.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15">
+    <g fill="#138CDE" fill-rule="evenodd">
+        <path d="M2 4.061h11v8.485H2z"/>
+        <path d="M2 3h4.583v3.182H2z"/>
+    </g>
+</svg>
--- a/demo/plugins/sitemap/styles/images/forward_keys.svg
+++ b/demo/plugins/sitemap/styles/images/forward_keys.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <g fill="none" fill-rule="evenodd">
+        <rect width="18" height="18" x="1" y="1" stroke="#E1E0E0" stroke-width="2" rx="4"/>
+        <rect width="19" height="19" x=".5" y=".5" stroke="#979797" rx="4"/>
+        <path fill="#666" d="M4.448 8.5v1L9 7V6L4.448 4v1c2.267.987 3.433 1.487 3.5 1.5-.069.017-1.235.683-3.5 2z"/>
+        <text fill="#666" font-family="Lato-Regular, Lato" font-size="12">
+            <tspan x="4.728" y="16">.</tspan>
+        </text>
+    </g>
+</svg>
--- a/demo/plugins/sitemap/styles/images/left_arrow.svg
+++ b/demo/plugins/sitemap/styles/images/left_arrow.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="6" height="11" viewBox="0 0 6 11">
+    <path fill="#6D6D6D" fill-rule="evenodd" d="M5.5 11L0 5.5 5.5 0v2L2 5.5 5.5 9z"/>
+</svg>
--- a/demo/plugins/sitemap/styles/images/open_item.svg
+++ b/demo/plugins/sitemap/styles/images/open_item.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="9px" height="10px" viewBox="0 0 9 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>open item</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="open-item" fill="#8C8C8C">
+            <polygon id="Rectangle-13" points="0 0 9 0 4.5 6"></polygon>
+        </g>
+    </g>
+</svg>
--- a/demo/plugins/sitemap/styles/images/page_lt_grey.svg
+++ b/demo/plugins/sitemap/styles/images/page_lt_grey.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="9" height="11" viewBox="0 0 9 11">
+    <g fill="none" fill-rule="evenodd" stroke="#979797">
+        <path d="M.5.5h8v10h-8z"/>
+        <path stroke-linecap="square" d="M2.5 7.5h4M2.5 3.5h4M2.5 5.5h4"/>
+    </g>
+</svg>
--- a/demo/plugins/sitemap/styles/images/right_arrow.svg
+++ b/demo/plugins/sitemap/styles/images/right_arrow.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="6" height="11" viewBox="0 0 6 11">
+    <path fill="#6D6D6D" fill-rule="evenodd" d="M.5 11L6 5.5.5 0v2L4 5.5.5 9z"/>
+</svg>
--- a/demo/plugins/sitemap/styles/images/search_off.svg
+++ b/demo/plugins/sitemap/styles/images/search_off.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11">
+    <g fill="none" fill-rule="evenodd" stroke="#018DCC" transform="translate(1 1)">
+        <path stroke-linecap="square" d="M6.5 6.5l2.791 2.865"/>
+        <circle cx="3.5" cy="3.5" r="3.5"/>
+    </g>
+</svg>
--- a/demo/plugins/sitemap/styles/images/search_on.svg
+++ b/demo/plugins/sitemap/styles/images/search_on.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11">
+    <g fill="none" fill-rule="evenodd" stroke="#535353" transform="translate(1 1)">
+        <path stroke-linecap="square" d="M6.5 6.5l2.791 2.865"/>
+        <circle cx="3.5" cy="3.5" r="3.5"/>
+    </g>
+</svg>
--- a/demo/plugins/sitemap/styles/images/sitemap_panel_off.svg
+++ b/demo/plugins/sitemap/styles/images/sitemap_panel_off.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="14" viewBox="0 0 16 14">
+    <path fill="#008DCB" fill-rule="nonzero" d="M14.965 6C15.532 6 16 6.433 16 7s-.434 1-1.002 1H1.002A.983.983 0 0 1 0 7c0-.567.434-1 1.002-1h13.963zm-4.001 6c.568 0 1.036.433 1.036 1s-.435 1-1.003 1H1.003A.984.984 0 0 1 0 13c0-.567.435-1 1.003-1h9.96zM1.003 2A.984.984 0 0 1 0 1c0-.567.435-1 1.003-1h9.994A.984.984 0 0 1 12 1c0 .567-.435 1-1.003 1H1.003z"/>
+</svg>
--- a/demo/plugins/sitemap/styles/images/sitemap_panel_on.svg
+++ b/demo/plugins/sitemap/styles/images/sitemap_panel_on.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="14" viewBox="0 0 16 14">
+    <path fill="#6D6D6D" fill-rule="nonzero" d="M14.965 6C15.532 6 16 6.433 16 7s-.434 1-1.002 1H1.002A.983.983 0 0 1 0 7c0-.567.434-1 1.002-1h13.963zm-4.001 6c.568 0 1.036.433 1.036 1s-.435 1-1.003 1H1.003A.984.984 0 0 1 0 13c0-.567.435-1 1.003-1h9.96zM1.003 2A.984.984 0 0 1 0 1c0-.567.435-1 1.003-1h9.994A.984.984 0 0 1 12 1c0 .567-.435 1-1.003 1H1.003z"/>
+</svg>
--- a/demo/plugins/sitemap/styles/sitemap.css
+++ b/demo/plugins/sitemap/styles/sitemap.css
@@ -0,0 +1,380 @@
+
+#sitemapHost {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+#sitemapHostBtn a {
+    background: url('images/sitemap_panel_on.svg') no-repeat center center, linear-gradient(transparent, transparent);
+}
+
+#sitemapHostBtn a.selected, #sitemapHostBtn a.selected:hover {
+    background: url('images/sitemap_panel_off.svg') no-repeat center center, linear-gradient(transparent, transparent);
+}
+
+#sitemapHost .pageButtonHeader {
+    top: -27px;
+}
+
+#sitemapTreeContainer {
+    overflow: auto;
+    width: 100%;
+    flex: 1;
+    -webkit-overflow-scrolling: touch;
+}
+
+.mobileMode #sitemapTreeContainer {
+    margin-left: 5px;
+    overflow-x: hidden;
+}
+
+.sitemapTree {
+    margin: 0px 0px 10px 0px;
+    overflow:visible;
+}
+
+.sitemapTree ul {
+    list-style-type: none;
+    margin: 0px 0px 0px 0px;
+    padding-left: 0px;
+}
+
+ul.sitemapTree {
+    display: inline-block;
+    min-width: 100%;
+}
+
+.pageSwapInstructions {
+    width: 129px;
+    font-size: 12px;
+    text-align: center;
+    color: #8c8c8c;
+    margin: 0 auto;
+    padding: 12px 0px;
+    line-height: 20px;
+}
+
+.sitemapMinus, .sitemapPlus {
+	vertical-align:middle;
+    background-repeat: no-repeat;
+	margin-right: 3px;	
+    width: 7px;
+    height: 8px;
+    object-fit: contain;
+    display:inline-block;
+}
+    .sitemapMinus {
+        margin-bottom: 0px;
+        background: url('images/open_item.svg') no-repeat center center, linear-gradient(transparent,transparent);
+    }
+    .sitemapPlus {
+        margin-bottom: 2px;
+        background: url('images/closed_item.svg') no-repeat center center, linear-gradient(transparent,transparent);
+    }
+
+.mobileMode .sitemapMinus, .mobileMode .sitemapPlus {
+    width: 10.5px;
+    height: 12px;
+    margin-right: 5px;	
+    background-size: contain;
+}
+
+.sitemapPageLink {
+    margin-left: 0px;
+}
+
+.sitemapPageIcon {
+	margin: 0px 6px -3px 3px;
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+    background: url('images/page_lt_grey.svg') no-repeat center center, linear-gradient(transparent,transparent);
+}
+
+.mobileMode .sitemapPageIcon {
+    margin-right: 7px;	
+    background-size: contain;
+}
+
+.sitemapFolderIcon {
+    background: url('images/folder_closed_blue.svg') no-repeat center center, linear-gradient(transparent,transparent);
+}
+
+.mobileMode .sitemapFolderIcon {
+    width: 18px;
+    height: 18px;
+    margin-left: 1px;
+    background-position-y: 1px;
+    background-size: contain;
+}
+
+.sitemapFolderOpenIcon {
+    background: url('images/folder_open.png') no-repeat center center;
+    background: url('images/folder_open.svg') no-repeat center center, linear-gradient(transparent,transparent);
+}
+
+.sitemapPageName {
+    font-size: 14px;
+    line-height: 1.93;
+    color: #4a4a4a;
+}
+
+.sitemapPageName.mobileText {
+    line-height: 1.69;
+}
+
+.sitemapNode  {
+    white-space:nowrap;
+}
+
+.sitemapPageLinkContainer {
+    cursor: pointer;
+    padding-right: 10px;
+}
+
+.mobileMode .sitemapPageLinkContainer {
+    margin-bottom: 13px;
+}
+
+.sitemapHighlight {
+    background-color: #e6e6e6;
+}
+
+.sitemapGreyedName
+{
+	color: #AAA;
+}
+
+.sitemapPluginNameHeader {
+    margin: 13px 9px 5px 9px;
+    font-size: 14px;
+    color: #444444;
+}
+
+.sitemapHeader {
+    padding-top: 7px;
+}
+
+.mobileMode .sitemapHeader {
+    padding-top: 0px;
+}
+
+.sitemapToolbar {
+    margin: 0px 3px 0px 5px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.sitemapToolbarButton {
+    width: 19px;
+    height: 18px;
+    border: 1px solid transparent;
+    cursor: pointer;
+    flex: 0 0 auto;
+}
+
+.hashover .sitemapToolbarButton:hover {
+    border-radius: 3px;
+    background-color: #e6e6e6 !important;
+}
+
+.sitemapToolbarButton.sitemapToolbarButtonSelected, .sitemapToolbarButton.sitemapToolbarButtonSelected:hover{
+    background-color: inherit !important;
+}
+
+.leftArrow {
+    background: url('images/left_arrow.svg') no-repeat center center, linear-gradient(transparent,transparent);
+    margin-left: 11px;
+}
+
+.rightArrow {
+    background: url('images/right_arrow.svg') no-repeat center center, linear-gradient(transparent,transparent);
+    margin-left: 3px;
+    margin-right: 2px;
+}
+
+#searchIcon {
+    width: 10px;
+    height: 10px;
+    object-fit: contain;
+    background: url('images/search_on.svg') no-repeat center center, linear-gradient(transparent,transparent);
+    vertical-align: bottom;
+    padding: 5px 4px 5px 4px;
+    display: inline-block;
+}
+
+#searchIcon.sitemapToolbarButtonSelected {
+    padding: 5px 3px 5px 5px;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    border-left: solid 1px #cccccc;
+    border-top: solid 1px #cccccc;
+    border-bottom: solid 1px #cccccc;
+    background: url('images/search_off.svg') no-repeat center center, linear-gradient(transparent,transparent);
+    background-color: #FFFFFF !important;
+}
+
+.backKeys {
+    width: 20px;
+    height: 21px;
+    object-fit: contain;
+    vertical-align: bottom;
+    margin: 2px;
+    display: inline-block;
+    background: url('images/back_keys.svg') no-repeat center center, linear-gradient(transparent,transparent);
+}
+
+.forwardKeys {
+    width: 20px;
+    height: 21px;
+    object-fit: contain;
+    vertical-align: bottom;
+    margin: 2px;
+    display: inline-block;
+    background: url('images/forward_keys.svg') no-repeat center center, linear-gradient(transparent,transparent);
+}
+
+#interfaceAdaptiveViewsListContainer {
+    position: absolute;
+    display: none;
+    width: 220px;
+    left: 155px;
+    padding: 6px 9px;
+    top: 36px;
+}
+
+#interfaceScaleListContainer {
+    padding: 7.5px 9px 12px 16px;
+    margin-top: 9px;
+    border-top: solid 1px #bdbcbc;
+    order: 10;
+}
+
+.adaptiveViewOption, .vpPresetOption, .vpScaleOption {
+    padding: 3px 0px 3px 0px;
+    color: #3B3B3B;
+    display: flex;
+}
+
+.projectOptionsScaleRow, .projectOptionsAdaptiveViewRow, .projectOptionsHotspotsRow {
+    border-top: solid 1px #c7c7c7;
+    display: flex;
+    padding: 13px 7px 13px 0px;
+}
+
+.adaptiveViewOption:hover, .vpScaleOption:hover, .vpPresetOption:hover, .projectOptionsAdaptiveViewRow:hover, .projectOptionsScaleRow:hover
+{ 
+	cursor: pointer;
+}
+
+.scaleRadioButton, .adapViewRadioButton {
+    border: solid 1px #8c8c8c;
+    display: inline-block;
+    position: relative;
+    width: 12px;
+    height: 12px;
+    border-radius: 48px;
+    margin-right: 12px;
+    top: 2px;
+    flex-shrink: 0;
+}
+
+.mobileMode .scaleRadioButton, .mobileMode .adapViewRadioButton {
+    width: 20px;
+    height: 20px;
+    border-radius: 60px;
+    margin-right: 22px;
+    margin-left: 22px;
+    top: 0px;
+    flex-shrink: 0;
+}
+
+.selectedRadioButton {
+    border: solid 1px #20aca9;
+}
+
+.selectedRadioButtonFill { 
+    position: relative;
+    display: none;
+    background-color: #20aca9;
+    margin: auto;
+    width: 8px;
+    height: 8px;
+    border-radius: 30px;
+    top: 2px;
+}
+    .mobileMode .selectedRadioButtonFill {
+        width: 12px;
+        height: 12px;
+        border-radius: 48px;
+        top: 4px;
+    }
+
+#searchDiv {
+    display: flex;
+    margin-right: auto;
+    flex: 1;
+}
+
+#searchBox {
+    display: none;
+    width: 0%;
+    height: 22px;
+    padding-left: 5px;
+    border-radius: 0px 5px 5px 0px;
+    border-right: solid 1px #cccccc;
+    border-top: solid 1px #cccccc;
+    border-bottom: solid 1px #cccccc;
+    border-left: none;
+    -webkit-appearance: none;
+}
+
+#searchBox:focus {
+    outline-width: 0;
+}
+
+.searchBoxHint {
+	color: #8f949a;
+}
+
+#sitemapHost.popup #searchDiv{
+    display: none;
+}
+
+#sitemapHost.popup #sitemapHeader{
+    display: none;
+}
+
+#sitemapHost.popup #changePageInstructions{
+    display: none;
+}
+
+.mobileMode #sitemapHeader {
+    display: none;
+}
+
+
+
+/* Expo Sitemap
+******************************************************************************/
+
+.expoSitemapNode {
+    padding: 15px;
+    text-align: center;
+}
+
+.sitemapPageImg {
+    max-width: 90%;
+    max-height: 150px;
+}
+
+.popup .sitemapPageImg {
+    display: none;
+}
+
+.popup .expoSitemapNode {
+    padding: 0 0 0 10px;
+    text-align: left;
+}
--- a/demo/resources/Other.html
+++ b/demo/resources/Other.html
@@ -0,0 +1,35 @@
+<html>
+	<head>
+		<title></title>
+	</head>
+	<body>
+	<br />
+	<div style="width:100%; text-align:center; font-family:Arial; font-size:12px;" id=other></div>
+	<br />
+	<div style="width:100%; text-align:center; font-family:Arial; font-size:12px;">
+	    <button onclick="parent.window.close();">
+		    Close
+	    </button>
+	</div>
+	
+	<SCRIPT src="axurerp_pagescript.js"></SCRIPT>
+	
+	<script language=javascript>
+	function getQueryVariable(variable) {
+      var query = window.location.hash.substring(1);
+      var vars = query.split("&&&");
+      for (var i=0;i<vars.length;i++) {
+        var pair = vars[i].split("=");
+        if (pair[0] == variable) {
+          return decodeURI(pair[1]);
+        }
+      } 
+    }
+
+	var other = document.getElementById('other');
+	other.innerHTML = getQueryVariable('other');
+
+	</script>
+	
+	</body>
+</html>
--- a/demo/resources/chrome/allow-access.png
+++ b/demo/resources/chrome/allow-access.png
--- a/demo/resources/chrome/axure-chrome-extension.crx
+++ b/demo/resources/chrome/axure-chrome-extension.crx
--- a/demo/resources/chrome/axure_logo.png
+++ b/demo/resources/chrome/axure_logo.png
--- a/demo/resources/chrome/chrome.html
+++ b/demo/resources/chrome/chrome.html
@@ -0,0 +1,186 @@
+<html>
+<head>
+    <title>Install the Axure RP Chrome Extension</title>
+    <style type="text/css">
+        *
+        {
+            font-family: NunitoSans, Helvetica, Arial, sans-serif;
+        }
+        body
+        {
+            text-align: center;
+            background-color: #fafafa;
+        }
+        p
+        {
+            font-size: 14px;
+            line-height: 18px;
+            color: #333333;
+        }
+        div.container
+        {
+            width: 980px;
+            margin-left: auto;
+            margin-right: auto;
+            text-align: left;
+        }
+        a
+        {
+            text-decoration: none;
+            color: #009dda;
+        }
+        .button
+        {
+            background: #A502B3;
+            font: normal 16px Arial, sans-serif;
+            color: #FFFFFF;
+            padding: 10px 30px 10px 30px;
+            border: 2px solid #A502B3;
+            display: inline-block;
+            margin-top: 10px;
+            text-transform: uppercase;
+            font-size: 14px;
+	    border-radius: 4px;
+        }
+        a:hover.button
+        {
+            border: 2px solid #A502B3;
+	    color: #A502B3;
+	    background-color: #FFFFFF;
+        }
+        div.left
+        {
+            width: 400px;
+            float: left;
+            margin-right: 80px;
+        }
+        div.right
+        {
+            width: 400px;
+            float: left;
+        }
+        div.buttonContainer
+        {
+            text-align: center;
+        }
+        h1
+        {
+            font-size: 36px;
+            color: #333333;
+            line-height: 50px;
+            margin-bottom: 20px;
+            font-weight: normal;
+        }
+        h2
+        {
+            font-size: 24px;
+            font-weight: normal;
+            color: #08639C;
+            text-align: center;
+        }
+        h3
+        {
+            font-size: 16px;
+            color: #333333;
+            font-weight: normal;
+	    text-transform: uppercase;
+        }
+        .heading
+        {
+            border-bottom: 1px solid black;
+	    height: 36px;
+            line-height: 36px;
+            font-size: 22px;
+            color: #000000;
+
+        }
+        span.faq
+        {
+            font-size: 16px;
+	    line-height: 24px;
+            font-weight: normal;
+	    text-transform: uppercase;
+            color: #333333;
+            display: block;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <br />
+        <br />
+        <img src="axure_logo.png" alt="axure" />
+        <br />
+	<br />
+        <h1>
+            AXURE RP EXTENSION FOR CHROME</h1>
+        <p style="font-size: 14px; color: #666666; margin-top: 10px;">
+            Google Chrome requires an extension to view locally stored projects. Alternatively,
+            upload your RP file to <a href="https://share.axure.com">Axure Cloud</a> or use a different
+            browser.</p>
+        <h3 class="heading">
+            VIEW LOCAL PROJECTS IN CHROME</h3>
+        <div class="left">
+            <h3>
+                1. Install Extension from Chrome Store</h3>
+            <div class="buttonContainer">
+                <a class="button" href="https://chrome.google.com/webstore/detail/dogkpdfcklifaemcdfbildhcofnopogp"
+                    target="_blank">Install Extension</a>
+            </div>
+        </div>
+        <div class="right">
+            <h3>
+                2. Open "More Tools > Extensions"</h3>
+            <img src="extensions.png" alt="extensions"/>
+        </div>
+        <div style="clear: both; height: 20px;">
+            &nbsp;</div>
+       <div class="left">
+            <h3>
+                3. View Axure RP Extension Details</h3>
+            <img src="details.png" alt="extension details"/>
+            </div>
+	<div class="right">
+            <h3>
+                4. Check "Allow access to file URLs"</h3>
+            <img src="allow-access.png" alt="allow access"/>
+        </div>
+   <div style="clear: both; height: 20px;">
+            &nbsp;</div>
+        <div class="left">
+            <h3>
+                5. Click the button below</h3>
+            <div class="buttonContainer">
+                <a class="button" href="../../start.html">View in Chrome</a>
+            </div>
+        </div>
+        <div style="clear: both; height: 20px;">
+        </div>
+        <h3 class="heading">
+            EXTENSION FAQ</h3>
+        <p>
+            <span class="faq">What is a Chrome Extension?</span> Extensions are downloadable
+            plug-ins for Google Chrome that modify the browser
+            and allow you additional capabilities.
+        </p>
+        <p style="margin-top: 25px;">
+            <span class="faq">Why do I need to install the extension?</span> Google requires
+            this extension to be installed to allow the viewing of local files in
+            Chrome
+        </p>
+        <p style="margin-top: 25px; margin-bottom: 25px;">
+            <span class="faq">Why does this extension require a high access level?</span> This
+            extension requires a high access level to allow the viewing of the file://
+            protocol. Axure does not track or access any of your information.
+        </p>
+        <h3 class="heading">
+           WE'RE HERE TO HELP</h3>
+        <p>
+            Need help or have any questions? Contact our support team at <a href="mailto:support@axure.com">
+                support@axure.com</a>.
+        </p>
+        <div style="clear: both; height: 20px;">
+        </div>
+    </div>
+</body>
+</html>
--- a/demo/resources/chrome/details.png
+++ b/demo/resources/chrome/details.png
--- a/demo/resources/chrome/extensions.png
+++ b/demo/resources/chrome/extensions.png
--- a/demo/resources/chrome/safari.html
+++ b/demo/resources/chrome/safari.html
@@ -0,0 +1,154 @@
+<html>
+<head>
+    <title>Axure RP - Safari Local File Restrictions</title>
+    <style type="text/css">
+        *
+        {
+            font-family: Helvetica, Arial, sans-serif;
+        }
+        body
+        {
+            text-align: center;
+            background-color: #fafafa;
+        }
+        p
+        {
+            font-size: 14px;
+            line-height: 18px;
+            color: #333333;
+        }
+        div.container
+        {
+            width: 980px;
+            margin-left: auto;
+            margin-right: auto;
+            text-align: left;
+        }
+        a
+        {
+            text-decoration: none;
+            color: #009dda;
+        }
+        .button
+        {
+            background: #A502B3;
+            font: normal 16px Arial, sans-serif;
+            color: #FFFFFF;
+            padding: 10px 30px 10px 30px;
+            border: 2px solid #A502B3;
+            display: inline-block;
+            margin-top: 10px;
+            text-transform: uppercase;
+            font-size: 14px;
+	    border-radius: 4px;
+        }
+        a:hover.button
+        {
+            border: 2px solid #A502B3;
+	    color: #A502B3;
+	    background-color: #FFFFFF;
+        }
+        div.left
+        {
+            width: 400px;
+            float: left;
+            margin-right: 80px;
+        }
+        div.right
+        {
+            width: 400px;
+            float: left;
+        }
+        div.buttonContainer
+        {
+            text-align: center;
+        }
+        h1
+        {
+            font-size: 36px;
+            color: #333333;
+            line-height: 50px;
+            margin-bottom: 20px;
+            font-weight: normal;
+        }
+        h2
+        {
+            font-size: 24px;
+            font-weight: normal;
+            color: #08639C;
+            text-align: center;
+        }
+        h3
+        {
+            font-size: 16px;
+            line-height: 24px;
+            color: #333333;
+            font-weight: normal;
+        }
+        .heading
+        {
+            border-bottom: 1px solid black;
+	    height: 36px;
+            line-height: 36px;
+            font-size: 22px;
+            color: #000000;
+        }
+        span.faq
+        {
+            font-size: 16px;
+            font-weight: normal;
+	    text-transform: uppercase;
+            color: #333333;
+            display: block;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <br />
+        <br />
+        <img src="axure_logo.png" alt="axure" />
+        <br />
+        <h1>
+            SAFARI LOCAL FILE RESTRICTIONS</h1>
+        <p style="font-size: 16px; line-height: 24px; color: #666666; margin-top: 10px;">
+            To view locally stored projects in Safari, you will need to "disable local file restrictions". Alternatively,
+            you can upload your RP file to <a href="https://share.axure.com">Axure Cloud</a> or publish the local files to a web server.</p>
+        <h3 class="heading">
+            VIEW LOCAL PROJECTS IN SAFARI</h3>
+        <div class="">
+            <h3>
+                1. Open "Safari > Preferences > Advanced" from the top menu menu, and check the option to "Show Develop menu in menu bar"</h3>
+            <img src="safari_advanced.png" alt="advanced" />
+        </div>
+        <div style="clear: both; height: 20px;">
+            &nbsp;
+        </div>
+        <div class="">
+            <h3>
+                2. In the Develop menu that appears in the menu bar, click "Develop > Disable Local File Restrictions" to un-select the menu option</h3>
+            <img src="safari_restrictions.png" alt="extensions" />
+        </div>
+        <div style="clear: both; height: 20px;">
+            &nbsp;</div>
+        <div class="left">
+            <h3>
+                3. Click the button below
+            </h3>
+            <div class="buttonContainer">
+                <a class="button" href="../../start.html">View in Safari</a>
+            </div>
+        </div>
+        <div style="clear: both; height: 20px;">
+        </div>
+        <h3 class="heading">
+            We're Here to Help</h3>
+        <p>
+            Need help or have any questions? Drop us a line at <a href="mailto:support@axure.com">
+                support@axure.com</a>.
+        </p>
+        <div style="clear: both; height: 20px;">
+        </div>
+    </div>
+</body>
+</html>
--- a/demo/resources/chrome/safari_advanced.png
+++ b/demo/resources/chrome/safari_advanced.png
--- a/demo/resources/chrome/safari_restrictions.png
+++ b/demo/resources/chrome/safari_restrictions.png
--- a/demo/resources/chrome/splitter.gif
+++ b/demo/resources/chrome/splitter.gif
--- a/demo/resources/chrome/splitter.png
+++ b/demo/resources/chrome/splitter.png
--- a/demo/resources/css/axure_rp_page.css
+++ b/demo/resources/css/axure_rp_page.css
@@ -0,0 +1,292 @@
+/* so the window resize fires within a frame in IE7 */
+html, body {
+    height: 100%;
+}
+
+.mobileFrameCursor div * {
+    cursor: inherit !important;
+}
+
+a {
+    color: inherit;
+}
+
+p {
+    margin: 0px;
+    text-rendering: optimizeLegibility;
+    font-feature-settings: "kern" 1;
+    -webkit-font-feature-settings: "kern";
+    -moz-font-feature-settings: "kern";
+    -moz-font-feature-settings: "kern=1";
+    font-kerning: normal;
+}
+
+ul {
+    margin:0px;
+}
+
+iframe {
+    background: #FFFFFF;
+}
+
+/* to match IE with C, FF */
+input {
+    padding: 1px 0px 1px 0px;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+}
+
+input[type=text]::-ms-clear {
+    width: 0;
+    height: 0;
+    display: none;
+}
+
+textarea {
+    margin: 0px;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+}
+
+.focused:focus, .selectedFocused:focus {
+    outline: none;
+}
+
+div.intcases {
+    font-family: arial; 
+    font-size: 12px;
+    text-align:left; 
+    border:1px solid #AAA; 
+    background:#FFF none repeat scroll 0% 0%; 
+    z-index:9999; 
+    visibility:hidden; 
+    position:absolute;
+    padding: 0px;
+    border-radius: 3px;
+    white-space: nowrap;
+}
+
+div.intcaselink {
+    cursor: pointer;
+    padding: 3px 8px 3px 8px;
+    margin: 5px;
+    background:#EEE none repeat scroll 0% 0%; 
+    border:1px solid #AAA;
+    border-radius: 3px;
+}
+
+div.refpageimage {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    font-size: 0px;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    background-image: url(images/newwindow.gif);
+    background-repeat: no-repeat;
+}
+
+div.annnoteimage {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    font-size: 0px;
+    /*width: 16px;
+    height: 12px;*/
+    cursor: help;
+    /*background-image: url(images/note.gif);*/
+    /*background-repeat: no-repeat;*/
+    width: 13px;
+    height: 12px;
+    padding-top: 1px;
+    text-align: center;
+    background-color: #138CDD;
+    -moz-box-shadow: 1px 1px 3px #aaa;
+    -webkit-box-shadow: 1px 1px 3px #aaa;
+    box-shadow: 1px 1px 3px #aaa;
+}
+
+div.annnoteline {
+    display: inline-block;
+    width: 9px;
+    height: 1px;
+    border-bottom: 1px solid white;
+    margin-top: 1px;
+}
+
+div.annnotelabel {
+    /*position: absolute;
+    left: 0px;
+    top: 0px;*/
+    font-family: Helvetica,Arial;
+    white-space: nowrap;
+    
+    padding-top: 1px;
+    background-color: #fff849;
+    font-size: 10px;
+    font-weight: bold;
+    line-height: 14px;
+    margin-right: 3px;
+    padding: 0px 4px;
+    color: #000;
+
+    -moz-box-shadow: 1px 1px 3px #aaa;
+    -webkit-box-shadow: 1px 1px 3px #aaa;
+    box-shadow: 1px 1px 3px #aaa;
+}
+
+div.annnote {
+    display: flex;
+    position: absolute;
+    cursor: help;
+    line-height: 14px;
+}
+
+.annotation {
+    font-size: 12px;
+    padding-left: 2px;
+    margin-bottom: 5px;
+}
+
+.annotationName {
+    /*font-size: 13px;
+    font-weight: bold;
+    margin-bottom: 3px;
+    white-space: nowrap;*/
+
+    font-family: 'Trebuchet MS';
+    font-size: 14px;
+    font-weight: bold;
+    margin-bottom: 5px;
+    white-space: nowrap;
+}
+
+.annotationValue {
+    font-family: Arial, Helvetica, Sans-Serif;
+    font-size: 12px;
+    color: #4a4a4a;
+    line-height: 21px;
+    margin-bottom: 20px;
+}
+
+.noteLink {
+    text-decoration: inherit;
+    color: inherit;
+}
+
+.noteLink:hover {
+    background-color: white;
+}
+
+/* this is a fix for the issue where dialogs jump around and takes the text-align from the body */
+.dialogFix {
+    position:absolute;
+    text-align:left;
+    border: 1px solid #8f949a;
+}
+
+
+@keyframes pulsate {
+  from {
+    box-shadow: 0 0 10px #15d6ba;
+  }
+  to {
+    box-shadow: 0 0 20px #15d6ba;
+  }
+}
+
+@-webkit-keyframes pulsate {
+  from {
+    -webkit-box-shadow: 0 0 10px #15d6ba;
+    box-shadow: 0 0 10px #15d6ba;
+  }
+  to {
+    -webkit-box-shadow: 0 0 20px #15d6ba;
+    box-shadow: 0 0 20px #15d6ba;
+  }
+}
+ 
+@-moz-keyframes pulsate {
+  from {
+    -moz-box-shadow: 0 0 10px #15d6ba;
+    box-shadow: 0 0 10px #15d6ba;
+  }
+  to {
+    -moz-box-shadow: 0 0 20px #15d6ba;
+    box-shadow: 0 0 20px #15d6ba;
+  }
+}
+
+.legacyPulsateBorder {
+    /*border: 5px solid #15d6ba;
+    margin: -5px;*/
+    -moz-box-shadow: 0 0 10px 3px #15d6ba;
+    box-shadow: 0 0 10px 3px #15d6ba;
+}
+
+.pulsateBorder {
+  animation-name: pulsate;
+  animation-timing-function: ease-in-out;
+  animation-duration: 0.9s;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+  
+  -webkit-animation-name: pulsate;
+  -webkit-animation-timing-function: ease-in-out;
+  -webkit-animation-duration: 0.9s;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-direction: alternate;
+
+  -moz-animation-name: pulsate;
+  -moz-animation-timing-function: ease-in-out;
+  -moz-animation-duration: 0.9s;
+  -moz-animation-iteration-count: infinite;
+  -moz-animation-direction: alternate;
+}
+
+.ax_default_hidden, .ax_default_unplaced{
+    display: none;
+    visibility: hidden;
+}
+
+.widgetNoteSelected {
+    -moz-box-shadow: 0 0 10px 3px #138CDD;
+    box-shadow: 0 0 10px 3px #138CDD;
+    /*-moz-box-shadow: 0 0 20px #3915d6;
+    box-shadow: 0 0 20px #3915d6;*/
+    /*border: 3px solid #3915d6;*/
+    /*margin: -3px;*/
+}
+
+
+.singleImg {
+    display: none;
+    visibility: hidden;
+}
+
+#ios-safari {
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+#ios-safari-html {
+    display: block;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+#ios-safari-fixed {
+    position: absolute;
+    pointer-events: none;
+    width: initial;
+}
+
+#ios-safari-fixed div {
+    pointer-events: auto;
+}
--- a/demo/resources/css/default.css
+++ b/demo/resources/css/default.css
--- a/demo/resources/css/images/images.html
+++ b/demo/resources/css/images/images.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+	<head>
+		<title></title>
+	</head>
+	<body>
+	<p>
+	    <img border="0" src="note.gif" width="1" height="1">
+        <img border="0" src="newwindow.gif" width="1" height="1">
+        <img border="0" src="ui-bg_flat_0_aaaaaa_40x100.png" width="1" height="1">
+        <img border="0" src="ui-bg_glass_55_fbf9ee_1x400.png" width="1" height="1">
+        <img border="0" src="ui-bg_glass_65_ffffff_1x400.png" width="1" height="1">
+        <img border="0" src="ui-bg_glass_75_dadada_1x400.png" width="1" height="1">
+        <img border="0" src="ui-bg_glass_75_e6e6e6_1x400.png" width="1" height="1">
+        <img border="0" src="ui-bg_glass_75_ffffff_1x400.png" width="1" height="1">
+        <img border="0" src="ui-bg_highlight-soft_75_cccccc_1x100.png" width="1" height="1">
+        <img border="0" src="ui-bg_inset-soft_95_fef1ec_1x100.png" width="1" height="1">
+        <img border="0" src="ui-icons_222222_256x240.png" width="1" height="1">
+        <img border="0" src="ui-icons_2e83ff_256x240.png" width="1" height="1">
+        <img border="0" src="ui-icons_454545_256x240.png" width="1" height="1">
+        <img border="0" src="ui-icons_888888_256x240.png" width="1" height="1">
+        <img border="0" src="ui-icons_cd0a0a_256x240.png" width="1" height="1">
+   </p>
+   </body>
+</html>
--- a/demo/resources/css/images/newwindow.gif
+++ b/demo/resources/css/images/newwindow.gif
--- a/demo/resources/css/images/note.gif
+++ b/demo/resources/css/images/note.gif
--- a/demo/resources/css/images/touch.cur
+++ b/demo/resources/css/images/touch.cur
--- a/demo/resources/css/images/touch.svg
+++ b/demo/resources/css/images/touch.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>touch_update</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <circle id="path-1" cx="859" cy="783" r="24"></circle>
+        <filter x="-26.0%" y="-26.0%" width="152.1%" height="152.1%" filterUnits="objectBoundingBox" id="filter-2">
+            <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+            <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <filter x="-41.7%" y="-41.7%" width="183.3%" height="183.3%" filterUnits="objectBoundingBox" id="filter-3">
+            <feGaussianBlur stdDeviation="7.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
+            <feOffset dx="5" dy="8" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.356034873 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Sitemap-expanded" transform="translate(-827.000000, -751.000000)" fill-rule="nonzero">
+            <g id="touch_update">
+                <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                <use fill-opacity="0.236894248" fill="#E4DEDE" fill-rule="evenodd" xlink:href="#path-1"></use>
+                <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
+                <use stroke-opacity="0.225798234" stroke="#CACACA" stroke-width="1" xlink:href="#path-1"></use>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/demo/resources/css/images/ui-bg_flat_0_aaaaaa_40x100.png
+++ b/demo/resources/css/images/ui-bg_flat_0_aaaaaa_40x100.png
--- a/demo/resources/css/images/ui-bg_glass_55_fbf9ee_1x400.png
+++ b/demo/resources/css/images/ui-bg_glass_55_fbf9ee_1x400.png
--- a/demo/resources/css/images/ui-bg_glass_65_ffffff_1x400.png
+++ b/demo/resources/css/images/ui-bg_glass_65_ffffff_1x400.png
--- a/demo/resources/css/images/ui-bg_glass_75_dadada_1x400.png
+++ b/demo/resources/css/images/ui-bg_glass_75_dadada_1x400.png
--- a/demo/resources/css/images/ui-bg_glass_75_e6e6e6_1x400.png
+++ b/demo/resources/css/images/ui-bg_glass_75_e6e6e6_1x400.png
--- a/demo/resources/css/images/ui-bg_glass_75_ffffff_1x400.png
+++ b/demo/resources/css/images/ui-bg_glass_75_ffffff_1x400.png
--- a/demo/resources/css/images/ui-bg_highlight-soft_75_cccccc_1x100.png
+++ b/demo/resources/css/images/ui-bg_highlight-soft_75_cccccc_1x100.png
--- a/demo/resources/css/images/ui-bg_inset-soft_95_fef1ec_1x100.png
+++ b/demo/resources/css/images/ui-bg_inset-soft_95_fef1ec_1x100.png
--- a/demo/resources/css/images/ui-icons_222222_256x240.png
+++ b/demo/resources/css/images/ui-icons_222222_256x240.png
--- a/demo/resources/css/images/ui-icons_2e83ff_256x240.png
+++ b/demo/resources/css/images/ui-icons_2e83ff_256x240.png
--- a/demo/resources/css/images/ui-icons_454545_256x240.png
+++ b/demo/resources/css/images/ui-icons_454545_256x240.png
--- a/demo/resources/css/images/ui-icons_888888_256x240.png
+++ b/demo/resources/css/images/ui-icons_888888_256x240.png
--- a/demo/resources/css/images/ui-icons_cd0a0a_256x240.png
+++ b/demo/resources/css/images/ui-icons_cd0a0a_256x240.png
--- a/demo/resources/css/jquery-ui-themes.css
+++ b/demo/resources/css/jquery-ui-themes.css
@@ -0,0 +1,412 @@
+/*
+* jQuery UI CSS Framework
+* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
+* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
+*/
+
+/* Layout helpers
+----------------------------------*/
+.ui-helper-hidden { display: none; }
+.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
+.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
+.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
+.ui-helper-clearfix { display: inline-block; }
+/* required comment for clearfix to work in Opera \*/
+* html .ui-helper-clearfix { height:1%; }
+.ui-helper-clearfix { display:block; }
+/* end clearfix */
+.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
+
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled { cursor: default !important; }
+
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }/* Accordion
+----------------------------------*/
+.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
+.ui-accordion .ui-accordion-li-fix { display: inline; }
+.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
+.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em 2.2em; }
+.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
+.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; }
+.ui-accordion .ui-accordion-content-active { display: block; }
+
+/* Datepicker
+----------------------------------*/
+.ui-datepicker { width: 17em; padding: .2em .2em 0; }
+.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
+.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
+.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
+.ui-datepicker .ui-datepicker-prev { left:2px; }
+.ui-datepicker .ui-datepicker-next { right:2px; }
+.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
+.ui-datepicker .ui-datepicker-next-hover { right:1px; }
+.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px;  }
+.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
+.ui-datepicker .ui-datepicker-title select { float:left; font-size:1em; margin:1px 0; }
+.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
+.ui-datepicker select.ui-datepicker-month, 
+.ui-datepicker select.ui-datepicker-year { width: 49%;}
+.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: right; }
+.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
+.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }
+.ui-datepicker td { border: 0; padding: 1px; }
+.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
+.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
+.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
+.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }
+
+/* with multiple calendars */
+.ui-datepicker.ui-datepicker-multi { width:auto; }
+.ui-datepicker-multi .ui-datepicker-group { float:left; }
+.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
+.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
+.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
+.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
+.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
+.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
+.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
+.ui-datepicker-row-break { clear:both; width:100%; }
+
+/* RTL support */
+.ui-datepicker-rtl { direction: rtl; }
+.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
+.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
+.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }
+.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }
+.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
+.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
+.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
+.ui-datepicker-rtl .ui-datepicker-group { float:right; }
+.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
+.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
+
+/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
+.ui-datepicker-cover {
+    display: none; /*sorry for IE5*/
+    display/**/: block; /*sorry for IE5*/
+    position: absolute; /*must have*/
+    z-index: -1; /*must have*/
+    filter: mask(); /*must have*/
+    top: -4px; /*must have*/
+    left: -4px; /*must have*/
+    width: 200px; /*must have*/
+    height: 200px; /*must have*/
+}
+
+/* Dialog
+----------------------------------*/
+.ui-dialog { position: relative; padding: 0px; width: 300px;}
+.ui-dialog .ui-dialog-titlebar { padding: .3em .3em .1em .8em; font-size:.7em; position: relative; background-image: none; }
+.ui-dialog .ui-dialog-title { float: left; margin: .1em 0 .2em;     
+                              font-family: 'Trebuchet MS';
+    font-size: 15px;
+    font-weight: normal;
+    color: #ffffff;} 
+.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .1em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
+.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
+.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { /*padding: 0;*/ }
+.ui-dialog .ui-dialog-content { border: 0; padding: .5em .2em; background: none; overflow: auto; zoom: 1; background-color: #ffffff;}
+.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
+.ui-dialog .ui-dialog-buttonpane button { float: right; margin: .5em .4em .5em 0; cursor: pointer; padding: .2em .6em .3em .6em; line-height: 1.4em; width:auto; overflow:visible; }
+.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
+.ui-draggable .ui-dialog-titlebar { cursor: move; background-color: #8f949a; border-bottom: 1px solid #d9d9d9;}
+
+/* Progressbar
+----------------------------------*/
+.ui-progressbar { height:2em; text-align: left; }
+.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }/* Resizable
+----------------------------------*/
+.ui-resizable { position: relative;}
+.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
+.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
+.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px; }
+.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0px; }
+.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; }
+.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%; }
+.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
+.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
+.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
+.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}/* Slider
+----------------------------------*/
+.ui-slider { position: relative; text-align: left; }
+.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
+.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; }
+
+.ui-slider-horizontal { height: .8em; }
+.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
+.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
+.ui-slider-horizontal .ui-slider-range-min { left: 0; }
+.ui-slider-horizontal .ui-slider-range-max { right: 0; }
+
+.ui-slider-vertical { width: .8em; height: 100px; }
+.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
+.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
+.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
+.ui-slider-vertical .ui-slider-range-max { top: 0; }/* Tabs
+----------------------------------*/
+.ui-tabs { padding: .2em; zoom: 1; }
+.ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: .2em .2em 0; }
+.ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 .2em -1px 0; padding: 0; }
+.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .5em 1em; }
+.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; border-bottom-width: 0; }
+.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
+.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
+.ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block; border-width: 0; background: none; }
+.ui-tabs .ui-tabs-hide { display: none !important; }
+/*
+* jQuery UI CSS Framework
+* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
+* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
+* To view and modify this theme, visit http://jqueryui.com/themeroller/
+*/
+
+
+/* Component containers
+----------------------------------*/
+.ui-widget { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; }
+.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1em; }
+.ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_glass_75_ffffff_1x400.png)/*{bgImgUrlContent}*/ 0/*{bgContentXPos}*/ 0/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/; }
+.ui-widget-content a { /*color: #222222*//*{fcContent}*/; }
+.ui-widget-header { border: none /*1px solid #aaaaaa*//*{borderColorHeader}*/; background: #D3D3D3/*{bgColorHeader}*/ url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)/*{bgImgUrlHeader}*/ 0/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/; color: #000000/*{fcHeader}*/; font-weight: bold; }
+.ui-widget-header a { color: #222222/*{fcHeader}*/; }
+
+/* Interaction states
+----------------------------------*/
+.ui-state-default, .ui-widget-content .ui-state-default { border: none /*1px solid #d3d3d3*//*{borderColorDefault}*/; /*background: #e6e6e6*//*{bgColorDefault}*/ /*url(images/ui-bg_glass_75_e6e6e6_1x400.png)*//*{bgImgUrlDefault}*/ /*0*//*{bgDefaultXPos}*/ /*50%*//*{bgDefaultYPos}*/ /*repeat-x*//*{bgDefaultRepeat}*/ font-weight: normal/*{fwDefault}*/; color: #555555/*{fcDefault}*/; outline: none; }
+.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555/*{fcDefault}*/; text-decoration: none; outline: none; }
+.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { border: none /*1px solid #999999*//*{borderColorHover}*/; /*background: #dadada*//*{bgColorHover}*/ /*url(images/ui-bg_glass_75_dadada_1x400.png)*//*{bgImgUrlHover}*/ /*0*//*{bgHoverXPos}*/ /*50%*//*{bgHoverYPos}*/ /*repeat-x*//*{bgHoverRepeat}*/ font-weight: normal/*{fwDefault}*/; color: #212121/*{fcHover}*/; outline: none; }
+.ui-state-hover a, .ui-state-hover a:hover { color: #212121/*{fcHover}*/; text-decoration: none; outline: none; }
+.ui-state-active, .ui-widget-content .ui-state-active { border: 1px solid #aaaaaa/*{borderColorActive}*/; background: #ffffff/*{bgColorActive}*/ url(images/ui-bg_glass_65_ffffff_1x400.png)/*{bgImgUrlActive}*/ 0/*{bgActiveXPos}*/ 50%/*{bgActiveYPos}*/ repeat-x/*{bgActiveRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcActive}*/; outline: none; }
+.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121/*{fcActive}*/; outline: none; text-decoration: none; }
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-highlight, .ui-widget-content .ui-state-highlight {border: 1px solid #fcefa1/*{borderColorHighlight}*/; background: #fbf9ee/*{bgColorHighlight}*/ url(images/ui-bg_glass_55_fbf9ee_1x400.png)/*{bgImgUrlHighlight}*/ 0/*{bgHighlightXPos}*/ 50%/*{bgHighlightYPos}*/ repeat-x/*{bgHighlightRepeat}*/; color: #363636/*{fcHighlight}*/; }
+.ui-state-highlight a, .ui-widget-content .ui-state-highlight a { color: #363636/*{fcHighlight}*/; }
+.ui-state-error, .ui-widget-content .ui-state-error {border: 1px solid #cd0a0a/*{borderColorError}*/; background: #fef1ec/*{bgColorError}*/ url(images/ui-bg_inset-soft_95_fef1ec_1x100.png)/*{bgImgUrlError}*/ 0/*{bgErrorXPos}*/ 50%/*{bgErrorYPos}*/ repeat-x/*{bgErrorRepeat}*/; color: #cd0a0a/*{fcError}*/; }
+.ui-state-error a, .ui-widget-content .ui-state-error a { color: #363636/*{fcError}*/; }
+.ui-state-error-text, .ui-widget-content .ui-state-error-text { color: #cd0a0a/*{fcError}*/; }
+.ui-state-disabled, .ui-widget-content .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
+.ui-priority-primary, .ui-widget-content .ui-priority-primary { font-weight: bold; }
+.ui-priority-secondary, .ui-widget-content .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
+.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
+.ui-widget-header .ui-icon {background-image: url(images/ui-icons_454545_256x240.png)/*{iconsHeader}*/; }
+.ui-state-default .ui-icon { background-image: url(images/ui-icons_888888_256x240.png)/*{iconsDefault}*/; }
+.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_222222_256x240.png)/*{iconsHover}*/; }
+.ui-state-active .ui-icon {background-image: url(images/ui-icons_454545_256x240.png)/*{iconsActive}*/; }
+.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_2e83ff_256x240.png)/*{iconsHighlight}*/; }
+.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_cd0a0a_256x240.png)/*{iconsError}*/; }
+
+/* positioning */
+.ui-icon-carat-1-n { background-position: 0 0; }
+.ui-icon-carat-1-ne { background-position: -16px 0; }
+.ui-icon-carat-1-e { background-position: -32px 0; }
+.ui-icon-carat-1-se { background-position: -48px 0; }
+.ui-icon-carat-1-s { background-position: -64px 0; }
+.ui-icon-carat-1-sw { background-position: -80px 0; }
+.ui-icon-carat-1-w { background-position: -96px 0; }
+.ui-icon-carat-1-nw { background-position: -112px 0; }
+.ui-icon-carat-2-n-s { background-position: -128px 0; }
+.ui-icon-carat-2-e-w { background-position: -144px 0; }
+.ui-icon-triangle-1-n { background-position: 0 -16px; }
+.ui-icon-triangle-1-ne { background-position: -16px -16px; }
+.ui-icon-triangle-1-e { background-position: -32px -16px; }
+.ui-icon-triangle-1-se { background-position: -48px -16px; }
+.ui-icon-triangle-1-s { background-position: -64px -16px; }
+.ui-icon-triangle-1-sw { background-position: -80px -16px; }
+.ui-icon-triangle-1-w { background-position: -96px -16px; }
+.ui-icon-triangle-1-nw { background-position: -112px -16px; }
+.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
+.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
+.ui-icon-arrow-1-n { background-position: 0 -32px; }
+.ui-icon-arrow-1-ne { background-position: -16px -32px; }
+.ui-icon-arrow-1-e { background-position: -32px -32px; }
+.ui-icon-arrow-1-se { background-position: -48px -32px; }
+.ui-icon-arrow-1-s { background-position: -64px -32px; }
+.ui-icon-arrow-1-sw { background-position: -80px -32px; }
+.ui-icon-arrow-1-w { background-position: -96px -32px; }
+.ui-icon-arrow-1-nw { background-position: -112px -32px; }
+.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
+.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
+.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
+.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
+.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
+.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
+.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
+.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
+.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
+.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
+.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
+.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
+.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
+.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
+.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
+.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
+.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
+.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
+.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
+.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
+.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
+.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
+.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
+.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
+.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
+.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
+.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
+.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
+.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
+.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
+.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
+.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
+.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
+.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
+.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
+.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
+.ui-icon-arrow-4 { background-position: 0 -80px; }
+.ui-icon-arrow-4-diag { background-position: -16px -80px; }
+.ui-icon-extlink { background-position: -32px -80px; }
+.ui-icon-newwin { background-position: -48px -80px; }
+.ui-icon-refresh { background-position: -64px -80px; }
+.ui-icon-shuffle { background-position: -80px -80px; }
+.ui-icon-transfer-e-w { background-position: -96px -80px; }
+.ui-icon-transferthick-e-w { background-position: -112px -80px; }
+.ui-icon-folder-collapsed { background-position: 0 -96px; }
+.ui-icon-folder-open { background-position: -16px -96px; }
+.ui-icon-document { background-position: -32px -96px; }
+.ui-icon-document-b { background-position: -48px -96px; }
+.ui-icon-note { background-position: -64px -96px; }
+.ui-icon-mail-closed { background-position: -80px -96px; }
+.ui-icon-mail-open { background-position: -96px -96px; }
+.ui-icon-suitcase { background-position: -112px -96px; }
+.ui-icon-comment { background-position: -128px -96px; }
+.ui-icon-person { background-position: -144px -96px; }
+.ui-icon-print { background-position: -160px -96px; }
+.ui-icon-trash { background-position: -176px -96px; }
+.ui-icon-locked { background-position: -192px -96px; }
+.ui-icon-unlocked { background-position: -208px -96px; }
+.ui-icon-bookmark { background-position: -224px -96px; }
+.ui-icon-tag { background-position: -240px -96px; }
+.ui-icon-home { background-position: 0 -112px; }
+.ui-icon-flag { background-position: -16px -112px; }
+.ui-icon-calendar { background-position: -32px -112px; }
+.ui-icon-cart { background-position: -48px -112px; }
+.ui-icon-pencil { background-position: -64px -112px; }
+.ui-icon-clock { background-position: -80px -112px; }
+.ui-icon-disk { background-position: -96px -112px; }
+.ui-icon-calculator { background-position: -112px -112px; }
+.ui-icon-zoomin { background-position: -128px -112px; }
+.ui-icon-zoomout { background-position: -144px -112px; }
+.ui-icon-search { background-position: -160px -112px; }
+.ui-icon-wrench { background-position: -176px -112px; }
+.ui-icon-gear { background-position: -192px -112px; }
+.ui-icon-heart { background-position: -208px -112px; }
+.ui-icon-star { background-position: -224px -112px; }
+.ui-icon-link { background-position: -240px -112px; }
+.ui-icon-cancel { background-position: 0 -128px; }
+.ui-icon-plus { background-position: -16px -128px; }
+.ui-icon-plusthick { background-position: -32px -128px; }
+.ui-icon-minus { background-position: -48px -128px; }
+.ui-icon-minusthick { background-position: -64px -128px; }
+.ui-icon-close { background-position: -80px -128px; }
+.ui-icon-closethick { background-position: -96px -128px; }
+.ui-icon-key { background-position: -112px -128px; }
+.ui-icon-lightbulb { background-position: -128px -128px; }
+.ui-icon-scissors { background-position: -144px -128px; }
+.ui-icon-clipboard { background-position: -160px -128px; }
+.ui-icon-copy { background-position: -176px -128px; }
+.ui-icon-contact { background-position: -192px -128px; }
+.ui-icon-image { background-position: -208px -128px; }
+.ui-icon-video { background-position: -224px -128px; }
+.ui-icon-script { background-position: -240px -128px; }
+.ui-icon-alert { background-position: 0 -144px; }
+.ui-icon-info { background-position: -16px -144px; }
+.ui-icon-notice { background-position: -32px -144px; }
+.ui-icon-help { background-position: -48px -144px; }
+.ui-icon-check { background-position: -64px -144px; }
+.ui-icon-bullet { background-position: -80px -144px; }
+.ui-icon-radio-off { background-position: -96px -144px; }
+.ui-icon-radio-on { background-position: -112px -144px; }
+.ui-icon-pin-w { background-position: -128px -144px; }
+.ui-icon-pin-s { background-position: -144px -144px; }
+.ui-icon-play { background-position: 0 -160px; }
+.ui-icon-pause { background-position: -16px -160px; }
+.ui-icon-seek-next { background-position: -32px -160px; }
+.ui-icon-seek-prev { background-position: -48px -160px; }
+.ui-icon-seek-end { background-position: -64px -160px; }
+.ui-icon-seek-first { background-position: -80px -160px; }
+.ui-icon-stop { background-position: -96px -160px; }
+.ui-icon-eject { background-position: -112px -160px; }
+.ui-icon-volume-off { background-position: -128px -160px; }
+.ui-icon-volume-on { background-position: -144px -160px; }
+.ui-icon-power { background-position: 0 -176px; }
+.ui-icon-signal-diag { background-position: -16px -176px; }
+.ui-icon-signal { background-position: -32px -176px; }
+.ui-icon-battery-0 { background-position: -48px -176px; }
+.ui-icon-battery-1 { background-position: -64px -176px; }
+.ui-icon-battery-2 { background-position: -80px -176px; }
+.ui-icon-battery-3 { background-position: -96px -176px; }
+.ui-icon-circle-plus { background-position: 0 -192px; }
+.ui-icon-circle-minus { background-position: -16px -192px; }
+.ui-icon-circle-close { background-position: -32px -192px; }
+.ui-icon-circle-triangle-e { background-position: -48px -192px; }
+.ui-icon-circle-triangle-s { background-position: -64px -192px; }
+.ui-icon-circle-triangle-w { background-position: -80px -192px; }
+.ui-icon-circle-triangle-n { background-position: -96px -192px; }
+.ui-icon-circle-arrow-e { background-position: -112px -192px; }
+.ui-icon-circle-arrow-s { background-position: -128px -192px; }
+.ui-icon-circle-arrow-w { background-position: -144px -192px; }
+.ui-icon-circle-arrow-n { background-position: -160px -192px; }
+.ui-icon-circle-zoomin { background-position: -176px -192px; }
+.ui-icon-circle-zoomout { background-position: -192px -192px; }
+.ui-icon-circle-check { background-position: -208px -192px; }
+.ui-icon-circlesmall-plus { background-position: 0 -208px; }
+.ui-icon-circlesmall-minus { background-position: -16px -208px; }
+.ui-icon-circlesmall-close { background-position: -32px -208px; }
+.ui-icon-squaresmall-plus { background-position: -48px -208px; }
+.ui-icon-squaresmall-minus { background-position: -64px -208px; }
+.ui-icon-squaresmall-close { background-position: -80px -208px; }
+.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
+.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
+.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
+.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
+.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
+.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Corner radius */
+.ui-corner-tl { -moz-border-radius-topleft: 4px/*{cornerRadius}*/; -webkit-border-top-left-radius: 4px/*{cornerRadius}*/; }
+.ui-corner-tr { -moz-border-radius-topright: 4px/*{cornerRadius}*/; -webkit-border-top-right-radius: 4px/*{cornerRadius}*/; }
+.ui-corner-bl { -moz-border-radius-bottomleft: 4px/*{cornerRadius}*/; -webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/; }
+.ui-corner-br { -moz-border-radius-bottomright: 4px/*{cornerRadius}*/; -webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/; }
+.ui-corner-top { -moz-border-radius-topleft: 4px/*{cornerRadius}*/; -webkit-border-top-left-radius: 4px/*{cornerRadius}*/; -moz-border-radius-topright: 4px/*{cornerRadius}*/; -webkit-border-top-right-radius: 4px/*{cornerRadius}*/; }
+.ui-corner-bottom { -moz-border-radius-bottomleft: 4px/*{cornerRadius}*/; -webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/; -moz-border-radius-bottomright: 4px/*{cornerRadius}*/; -webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/; }
+.ui-corner-right {  -moz-border-radius-topright: 4px/*{cornerRadius}*/; -webkit-border-top-right-radius: 4px/*{cornerRadius}*/; -moz-border-radius-bottomright: 4px/*{cornerRadius}*/; -webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/; }
+.ui-corner-left { -moz-border-radius-topleft: 4px/*{cornerRadius}*/; -webkit-border-top-left-radius: 4px/*{cornerRadius}*/; -moz-border-radius-bottomleft: 4px/*{cornerRadius}*/; -webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/; }
+.ui-corner-all { -moz-border-radius: 0px/*{cornerRadius}*/; -webkit-border-radius: 0px/*{cornerRadius}*/; }
+
+/* Overlays */
+.ui-widget-overlay { background: #aaaaaa/*{bgColorOverlay}*/ none/*{bgImgUrlOverlay}*/ 0/*{bgOverlayXPos}*/ 0/*{bgOverlayYPos}*/ repeat-x/*{bgOverlayRepeat}*/; opacity: .3;filter:Alpha(Opacity=30)/*{opacityOverlay}*/; }
+.ui-widget-shadow { margin: -4px/*{offsetTopShadow}*/ 0 0 -4px/*{offsetLeftShadow}*/; padding: 4px/*{thicknessShadow}*/; background: #aaaaaa/*{bgColorShadow}*/ none/*{bgImgUrlShadow}*/ 0/*{bgShadowXPos}*/ 0/*{bgShadowYPos}*/ repeat-x/*{bgShadowRepeat}*/; opacity: .35;filter:Alpha(Opacity=35)/*{opacityShadow}*/; -moz-border-radius: 4px/*{cornerRadiusShadow}*/; -webkit-border-radius: 4px/*{cornerRadiusShadow}*/; }
--- a/demo/resources/css/previewfonts.css
+++ b/demo/resources/css/previewfonts.css
@@ -0,0 +1,12 @@
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url('previewfonts/SourceSansPro-Regular.woff2') format('woff2'), url('previewfonts/SourceSansPro-Regular.woff') format('woff');
+}
+@font-face {
+  font-family: 'Source Sans Pro Semibold';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url('previewfonts/SourceSansPro-Semibold.woff2') format('woff2'), url('previewfonts/SourceSansPro-Semibold.woff') format('woff');
+}
--- a/demo/resources/css/previewfonts/SourceSansPro-OpenFontLicense.txt
+++ b/demo/resources/css/previewfonts/SourceSansPro-OpenFontLicense.txt
@@ -0,0 +1,93 @@
+Copyright 2010, 2012, 2014 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name ‘Source’.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
--- a/demo/resources/css/previewfonts/SourceSansPro-Regular.woff2
+++ b/demo/resources/css/previewfonts/SourceSansPro-Regular.woff2
--- a/demo/resources/css/previewfonts/SourceSansPro-Semibold.woff2
+++ b/demo/resources/css/previewfonts/SourceSansPro-Semibold.woff2
--- a/demo/resources/css/reset.css
+++ b/demo/resources/css/reset.css
@@ -0,0 +1,24 @@
+html,body,div,span,
+applet,object,iframe,
+h1,h2,h3,h4,h5,h6,p,blockquote,pre,
+a,abbr,acronym,address,big,cite,code,
+del,dfn,em,font,img,ins,kbd,q,s,samp,
+small,strike,strong,sub,sup,tt,var,
+dd,dl,dt,li,ol,ul,
+fieldset,form,label,legend,
+table,caption,tbody,tfoot,thead,tr,th,td {
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+ol,ul {
+	list-style: none;
+}
+q:before,q:after,
+blockquote:before,blockquote:after {
+	content: "";
+}
--- a/demo/resources/expand.html
+++ b/demo/resources/expand.html
@@ -0,0 +1,60 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+    <title></title>
+    <link type="text/css" href="css/default.css" rel="Stylesheet" />
+    <script type="text/javascript" src="scripts/jquery-3.2.1.min.js"></script>
+    <script type="text/javascript" src="scripts/messagecenter.js"></script>
+    <script type="text/javascript">
+<!--
+            $(document).ready(function () {
+                $axure.messageCenter.addMessageListener(messageCenter_message);
+                function messageCenter_message(message, data) {
+                    if(message == 'collapseFrameOnLoad') {
+                        setTimeout(function() {
+                            $('#maximizePanel').animate({
+                                left:'-' + maxPanelWidth + 'px'
+                            }, 300);
+                        }, 2000);
+                    }
+                }
+                $axure.messageCenter.postMessage('getCollapseFrameOnLoad');
+
+                if(MOBILE_DEVICE) {
+                    $('#maximizePanel').height('45px');
+                }
+                var maxPanelWidth = $('#maximizePanel').width();
+
+                $('#maximizePanel').click(function () {
+                    $(this).removeClass('maximizePanelOver');
+                    $axure.messageCenter.postMessage('expandFrame');
+                });
+
+                if(!MOBILE_DEVICE) {
+                    $('#maximizePanel').mouseenter(function() {
+                        $(this).addClass('maximizePanelOver');
+                    });
+                    $('#maximizePanel').mouseleave(function() {
+                        if($(this).hasClass('maximizePanelOver')) {
+                            $(this).animate({
+                                left:'-' + maxPanelWidth + 'px'
+                            }, 300);
+                        }
+                        $(this).removeClass('maximizePanelOver');
+                    });
+                    $('#maximizePanelOver').mouseenter(function() {
+                        $('#maximizePanel').animate({
+                            left:'0px'
+                        }, 100);
+                    });
+                }
+            });
+        --></script>
+</head>
+<body style="background-color: transparent;">
+    <div id="maximizePanelOver">
+        <div id="maximizePanel" class="maximizePanel" title="Expand">
+        </div>
+    </div>
+</body>
+</html>
--- a/demo/resources/images/axure9_logo.svg
+++ b/demo/resources/images/axure9_logo.svg
@@ -0,0 +1 @@
+<svg height="14" viewBox="0 0 50 14" width="50" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="#3f4040"><path d="m6.7827 7.0792v2.741c-.866.119-2.101.146-2.521.146-1.998 0-2.09-.542-2.09-1.581 0-1.013.345-1.306 1.541-1.306zm-2.619-6.916c-.624 0-1.476.017-2.547.147l-.056.012c-.367.105-.561.358-.561.731v.432c0 .445.287.732.733.732h2.431c1.885 0 2.619.476 2.619 1.698v1.13h-3.07c-2.568 0-3.713 1.03-3.713 3.34 0 2.568 1.184 3.615 4.085 3.615 1.159 0 3.295-.091 4.09-.334.504-.14.76-.472.76-.987v-6.881c0-2.446-1.561-3.635-4.771-3.635z" transform="translate(0 .8362)"/><path d="m8.6973.3014h-.686c-.425 0-.733.308-.733.732v8.913h-2.717c-1.659 0-2.345 0-2.345-2.796v-6.117c0-.424-.309-.732-.733-.732h-.667c-.429 0-.752.315-.752.732v6.117c0 4.1 1.56 4.85 4.633 4.85 1.101 0 2.608 0 4.057-.205l.039-.008c.526-.132.636-.473.636-.736v-10.018c0-.424-.308-.732-.732-.732" transform="translate(22 .8362)"/><path d="m5.2529.3297-.062-.017c-.411-.086-1.525-.149-2.076-.149-2.549 0-3.085 1.348-3.085 2.478v8.527c0 .425.308.733.733.733h.686c.425 0 .733-.308.733-.733v-8.371c0-.272 0-.58 1.11-.58l1.688-.003c.206.026.402-.032.553-.161.165-.14.256-.342.256-.569v-.431c0-.341-.201-.611-.536-.724" transform="translate(34 .8362)"/><path d="m5.4444.1637c-2.024 0-3.174.399-3.843 1.335-.691.966-.83 2.466-.83 4.574 0 4.099.675 5.927 4.673 5.927.472 0 2.083-.009 3.032-.125.443-.073.641-.417.641-.725v-.451c0-.429-.323-.752-.752-.752h-2.921c-2.113 0-2.466-.47-2.521-3.345v-.958c.018-2.946.372-3.426 2.521-3.426 1.957 0 2.317.406 2.393 2.867h-3.282v2.073h4.457c.451 0 .988-.161.988-.929v-.576c-.063-4.207-1.127-5.489-4.556-5.489" transform="translate(40 .8362)"/></g><path d="m19.9341 1.496c-.111-.237-.346-.378-.629-.378h-.882c-.305 0-.543.128-.661.349l-1.362 1.994 1.314 1.802 2.101-3.022c.269-.328.173-.63.119-.745" fill="#74bb11"/><path d="m13.0293 1.4428-.003-.004c-.159-.213-.382-.321-.661-.321h-.862c-.274 0-.498.128-.618.351-.121.227-.098.498.068.746l3.139 4.361-3.621 5.062c-.157.237-.178.503-.056.73.119.223.344.351.617.351h.882c.274 0 .522-.144.636-.36l4.172-5.762z" fill="#009cd9"/><path d="m20.3711 11.6977-2.687-3.699-1.296 1.793 2.109 2.822.086.038c.105.045.206.067.31.067h.863c.257 0 .476-.117.601-.32.128-.207.134-.462.014-.701" fill="#eb2084"/></g></svg>
--- a/demo/resources/images/axure_logo.png
+++ b/demo/resources/images/axure_logo.png
--- a/demo/resources/images/axure_logo.svg
+++ b/demo/resources/images/axure_logo.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="52px" height="12px" viewBox="0 0 52 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>axure_logo</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="updated_header-copy" transform="translate(-1371.000000, -12.000000)" fill="#3D4557">
+            <g id="axure_logo" transform="translate(1371.000000, 12.000000)">
+                <path d="M23.6337569,0.211361346 L19.4142734,6.12413879 C20.5929844,7.76544547 22.4073623,10.3236224 23.4927644,11.7946181 L20.5223167,11.7946181 L17.9762186,8.20017753 C17.1271762,9.43098196 16.2788199,10.5887458 15.4297775,11.7946181 L12.5066702,11.7946181 L16.5141504,6.12413879 C15.1944469,4.24193858 13.6623971,2.1427235 12.3420075,0.211361346 L15.2884419,0.211361346 L17.9762186,4.04915352 L20.6633092,0.211361346 L23.6337569,0.211361346 Z" id="Fill-5-Copy-124"></path>
+                <path d="M11.6136895,6.03116989 L11.6136895,11.8575336 L9.24336066,11.8575336 L9.24336066,10.4558287 C8.49296706,11.4226674 7.06182513,12.0035446 5.7952372,12.0035446 C2.6052109,12.0035446 0,9.31940634 0,6.03116989 C0,2.74293344 2.6052109,0.0591470426 5.7952372,0.0591470426 C7.06182513,0.0591470426 8.49296706,0.638265082 9.24336066,1.60580737 L9.24336066,0.228027151 L11.6136895,0.228027151 L11.6136895,6.03116989 L11.6136895,6.03116989 Z M5.7952372,9.56146783 C7.69648468,9.56146783 9.24336066,7.98841998 9.24336066,6.03116989 C9.24336066,4.07216063 7.69648468,2.50052012 5.7952372,2.50052012 C3.89467252,2.50052012 2.34745514,4.07216063 2.34745514,6.03116989 C2.34745514,7.98841998 3.89467252,9.56146783 5.7952372,9.56146783 L5.7952372,9.56146783 Z" id="Fill-1-Copy-126"></path>
+                <path d="M33.9017123,11.8397627 L31.548487,11.8397627 L31.548487,10.8706411 C31.0307226,11.6705454 29.8537675,12.0086274 29.006579,12.0086274 C25.8999928,12.0086274 24.0885024,9.73230222 24.0885024,6.9218849 L24.0885024,0.211361346 L26.4413853,0.211361346 L26.4413853,6.9218849 C26.4413853,8.39971598 27.5477984,9.56237985 29.006579,9.56237985 C30.39516,9.56237985 31.4776026,8.4233359 31.548487,6.99485986 L31.548487,0.211361346 L33.9017123,0.211361346 L33.9017123,11.8397627" id="Fill-2-Copy-128"></path>
+                <path d="M37.4691032,5.23094818 L37.4691032,11.7946181 L35.1006626,11.7946181 L35.1006626,0.211361346 L37.4691032,0.211361346 L37.4691032,1.27329157 C37.8195915,0.596591985 39.2986725,0.211361346 40.307478,0.211361346 L40.7524991,0.211361346 L40.7524991,2.67269366 L40.307478,2.67269366 C39.2747833,2.67269366 37.4691032,3.1548465 37.4691032,5.23094818" id="Fill-3-Copy-125"></path>
+                <path d="M50.9313232,9.28841829 C49.5903307,11.130254 47.7551081,11.8564131 46.1557058,11.8564131 C43.004476,11.8564131 40.4405722,9.21685989 40.4405722,5.9706465 C40.4405722,2.6997578 43.004476,0.0591470426 46.1557058,0.0591470426 C49.8254664,0.0591470426 52.6002052,3.64482221 51.7777435,7.32743609 L42.9805175,7.32743609 C43.404241,8.63452255 44.8150555,9.60390976 46.1557058,9.60390976 C47.1670976,9.60390976 47.7082178,9.26480049 48.3208714,8.73181378 L50.9313232,9.28841829 L50.9313232,9.28841829 Z M42.910011,4.97693648 L49.3794957,4.97693648 C48.9554299,3.57220629 47.6616699,2.48155755 46.1557058,2.48155755 C44.6976588,2.48155755 43.3806247,3.6201469 42.910011,4.97693648 L42.910011,4.97693648 Z" id="Fill-4-Copy-124"></path>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/demo/resources/images/caret_down.svg
+++ b/demo/resources/images/caret_down.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="5" viewBox="0 0 10 5">
+    <path fill="#666" fill-rule="evenodd" d="M10 0L5 5 0 0h2l3 3 3-3z"/>
+</svg>
--- a/demo/resources/images/caret_down_off.svg
+++ b/demo/resources/images/caret_down_off.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="5" viewBox="0 0 10 5">
+    <path fill="#008DCB" fill-rule="evenodd" d="M10 0L5 5 0 0h2l3 3 3-3z"/>
+</svg>
--- a/demo/resources/images/close_x.svg
+++ b/demo/resources/images/close_x.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="9" height="8" viewBox="0 0 9 8">
+    <g fill="#666" fill-rule="evenodd">
+        <path d="M7.682.11l.707.708-7.071 7.071-.707-.707z"/>
+        <path d="M8.39 7.182l-.708.707L.611.818l.707-.707z"/>
+    </g>
+</svg>
--- a/demo/resources/images/close_x_minimize.svg
+++ b/demo/resources/images/close_x_minimize.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9">
+    <g fill="#6D6D6D" fill-rule="evenodd">
+        <path d="M7.018-.053l1.178 1.178-7.07 7.071-1.18-1.178z"/>
+        <path d="M1.125-.053l7.07 7.07-1.178 1.18-7.071-7.072z"/>
+    </g>
+</svg>
--- a/demo/resources/images/divider.png
+++ b/demo/resources/images/divider.png
--- a/demo/resources/images/divider.svg
+++ b/demo/resources/images/divider.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="58" height="2" viewBox="0 0 58 2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+ <defs>
+  <path id="path-1" d="M245.5,521 L305.5,521" stroke-linejoin="round" stroke="#bababa" stroke-dasharray="1 8" stroke-width="2" stroke-linecap="round"/>
+ </defs>
+ <g id="Axshare---Web-View" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+  <g id="Share-Page-Notes-Copy" sketch:type="MSArtboardGroup" transform="translate(-244.000000, -520.000000)">
+   <g id="divider">
+    <use xlink:href="#path-1"/>
+   </g>
+  </g>
+ </g>
+</svg>
--- a/demo/resources/images/exit.svg
+++ b/demo/resources/images/exit.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19">
+    <g fill="#FFF" fill-rule="nonzero">
+        <path d="M16.305 18.94H6.547a.714.714 0 0 1-.717-.712v-3.344c0-.393.321-.712.717-.712.395 0 .716.319.716.712v2.632h8.325V1.484H7.263v2.632c0 .393-.32.712-.716.712a.714.714 0 0 1-.717-.712V.772c0-.394.321-.713.717-.713h9.758c.395 0 .716.32.716.713v17.456c0 .394-.32.713-.716.713z"/>
+        <path d="M.363 9.01l3.29-3.476a.719.719 0 0 1 1.217.277.71.71 0 0 1-.174.699L2.548 8.787h9.072c.396 0 .717.32.717.713 0 .394-.321.713-.717.713H2.548l2.148 2.277a.71.71 0 0 1-.353 1.192.719.719 0 0 1-.69-.216L.363 9.99a.71.71 0 0 1 0-.978z"/>
+    </g>
+</svg>
--- a/demo/resources/images/favicon_play.ico
+++ b/demo/resources/images/favicon_play.ico
--- a/demo/resources/images/overflow-icon.svg
+++ b/demo/resources/images/overflow-icon.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="3" height="12" viewBox="0 0 3 12">
+    <g fill="#6D6D6D" fill-rule="evenodd">
+        <circle cx="1.5" cy="10.5" r="1.5"/>
+        <circle cx="1.5" cy="1.5" r="1.5"/>
+        <circle cx="1.5" cy="6" r="1.5"/>
+    </g>
+</svg>
--- a/demo/resources/images/overflow_checkmark.svg
+++ b/demo/resources/images/overflow_checkmark.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="8" viewBox="0 0 10 8">
+    <path fill="#FFF" fill-rule="evenodd" d="M8.404 0L10 1.548 3.865 7.5 0 3.75l1.596-1.548 2.27 2.202L8.403 0z"/>
+</svg>
--- a/demo/resources/images/overflow_icon_off.svg
+++ b/demo/resources/images/overflow_icon_off.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="3" height="12" viewBox="0 0 3 12">
+    <g fill="#008DCB" fill-rule="evenodd">
+        <circle cx="1.5" cy="10.5" r="1.5"/>
+        <circle cx="1.5" cy="1.5" r="1.5"/>
+        <circle cx="1.5" cy="6" r="1.5"/>
+    </g>
+</svg>
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				<svg height="14" viewBox="0 0 50 14" width="50" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="#3f4040"><path d="m6.7827 7.0792v2.741c-.866.119-2.101.146-2.521.146-1.998 0-2.09-.542-2.09-1.581 0-1.013.345-1.306 1.541-1.306zm-2.619-6.916c-.624 0-1.476.017-2.547.147l-.056.012c-.367.105-.561.358-.561.731v.432c0 .445.287.732.733.732h2.431c1.885 0 2.619.476 2.619 1.698v1.13h-3.07c-2.568 0-3.713 1.03-3.713 3.34 0 2.568 1.184 3.615 4.085 3.615 1.159 0 3.295-.091 4.09-.334.504-.14.76-.472.76-.987v-6.881c0-2.446-1.561-3.635-4.771-3.635z" transform="translate(0 .8362)"/><path d="m8.6973.3014h-.686c-.425 0-.733.308-.733.732v8.913h-2.717c-1.659 0-2.345 0-2.345-2.796v-6.117c0-.424-.309-.732-.733-.732h-.667c-.429 0-.752.315-.752.732v6.117c0 4.1 1.56 4.85 4.633 4.85 1.101 0 2.608 0 4.057-.205l.039-.008c.526-.132.636-.473.636-.736v-10.018c0-.424-.308-.732-.732-.732" transform="translate(22 .8362)"/><path d="m5.2529.3297-.062-.017c-.411-.086-1.525-.149-2.076-.149-2.549 0-3.085 1.348-3.085 2.478v8.527c0 .425.308.733.733.733h.686c.425 0 .733-.308.733-.733v-8.371c0-.272 0-.58 1.11-.58l1.688-.003c.206.026.402-.032.553-.161.165-.14.256-.342.256-.569v-.431c0-.341-.201-.611-.536-.724" transform="translate(34 .8362)"/><path d="m5.4444.1637c-2.024 0-3.174.399-3.843 1.335-.691.966-.83 2.466-.83 4.574 0 4.099.675 5.927 4.673 5.927.472 0 2.083-.009 3.032-.125.443-.073.641-.417.641-.725v-.451c0-.429-.323-.752-.752-.752h-2.921c-2.113 0-2.466-.47-2.521-3.345v-.958c.018-2.946.372-3.426 2.521-3.426 1.957 0 2.317.406 2.393 2.867h-3.282v2.073h4.457c.451 0 .988-.161.988-.929v-.576c-.063-4.207-1.127-5.489-4.556-5.489" transform="translate(40 .8362)"/></g><path d="m19.9341 1.496c-.111-.237-.346-.378-.629-.378h-.882c-.305 0-.543.128-.661.349l-1.362 1.994 1.314 1.802 2.101-3.022c.269-.328.173-.63.119-.745" fill="#74bb11"/><path d="m13.0293 1.4428-.003-.004c-.159-.213-.382-.321-.661-.321h-.862c-.274 0-.498.128-.618.351-.121.227-.098.498.068.746l3.139 4.361-3.621 5.062c-.157.237-.178.503-.056.73.119.223.344.351.617.351h.882c.274 0 .522-.144.636-.36l4.172-5.762z" fill="#009cd9"/><path d="m20.3711 11.6977-2.687-3.699-1.296 1.793 2.109 2.822.086.038c.105.045.206.067.31.067h.863c.257 0 .476-.117.601-.32.128-.207.134-.462.014-.701" fill="#eb2084"/></g></svg>