#source:spinneron {
    action-client: replaceInnerHTML;
    replaceInnerHTML-html: "Loading...";
}

#kss:mouseover, #kss *:mouseover {
    action-client: fx;
    fx-kssSelector: #kss;
    fx-opacity: 1;
    fx-behaviour: abort;
}

#kss:mouseout, #kss *:mouseout {
    action-client: fx;
    fx-kssSelector: #kss;
    fx-opacity: 0.25;
    fx-behaviour: abort;
}

.kssdemo:click, .kssdemohover:mouseover {
	action-server: get_kss url(/common/css/kss-demo.kss);
	get_kss-id: nodeAttr(id);
}


#height_auto:click {
    action-client: fx;
    fx-kssSelector: #demostyles2;
    fx-height: auto;
}

#scroll_tree2:click {
    action-client: fx;
    fx-kssSelector: #demoscroll;
    fx-scrollLeft: offsetLeft('demoscroll', 'content_tree2', -200);
    fx-scrollTop: offsetTop('demoscroll', 'content_tree2', -50);
    fx-duration: 2500;
    fx-transition: quadInOut;
    fx-behaviour: abort;
    fx-fps: 50;
}

#scroll_tree1:click {
    action-client: fx;
    fx-kssSelector: #demoscroll;
    fx-scrollLeft: offsetLeft('demoscroll', 'content_tree1', -200);
    fx-scrollTop: offsetTop('demoscroll', 'content_tree1', -50);
    fx-duration: 2500;
    fx-transition: quadInOut;
    fx-behaviour: abort;
    fx-fps: 50;
}

#fold:click {
    action-client: fx;
    fx-kssSelector: #demostyles1;
    fx-overflow: "hidden * * visible";
    fx-height: "50px * * 200px";
    fx-width: "* 0px * 600px";
    fx-paddingLeft: "* 0px * 5px";
    fx-paddingRight: "* 0px * 5px";
    fx-borderWidth: "* 0px * 1px";
    fx-duration: "1000 * * 0";
    fx-threshold: "0 * * 1";
    fx-transition: sineInOut;
    fx-behaviour: ignore;
    fx-fps: 50;
}

#scroll_left:click {
    evt-click-preventdefault: true;
    action-client: fx;
    fx-kssSelector: #body;
    fx-scrollLeft: 0%;
    fx-history: true;
    fx-duration: 1000;
    fx-transition: sineInOut;
    fx-behaviour: abort;
    fx-fps: 50;
}

#shake:click {
    action-client: fx;
    fx-kssSelector: #demostyles1;
    fx-left: list(10px, -10px, 10px, -10px, 10px, -10px, 10px, -10px, 0px);
    fx-duration: 100;
    fx-transition: sineInOut;
    fx-behaviour: ignore;
    fx-fps: 50;
}

#scroll_slide:click {
    evt-click-preventdefault: true;
    action-client: fx;
    fx-kssSelector: #body;
    fx-scrollLeft: fx_slide;
    fx-scrollTop: fx_slide;
    fx-history: true;
    fx-duration: 1000;
    fx-transition: sineInOut;
    fx-behaviour: abort;
    fx-fps: 50;
    action-client: fx alias(highlight);
    highlight-kssSelector: #fx_slide;
    highlight-backgroundColor: "#DBEAF0 transparent";
    highlight-duration: "0 500";
    highlight-repeat: 1;
    highlight-delay: 1500;
    highlight-transition: sineInOut;
    highlight-behaviour: abort;
    highlight-fps: 50;
}

#demotrail:mouseover {
    action-client: fx;
    fx-kssSelector: #tip;
    fx-opacity: 1;
    fx-duration: 500;
    fx-behaviour: abort;
    fx-fps: 50;
}

#demotrail:mousemove {
    evt-mousemove-allowbubbling: true;
    action-client: fx;
    fx-kssSelector: #tip;
    fx-left: clientX(16);
    fx-top: clientY(16);
    fx-duration: 0;
    fx-behaviour: combine;
    fx-fps: 50;
}

#demotrail:mouseout {
    action-client: fx;
    fx-kssSelector: #tip;
    fx-opacity: 0;
    fx-duration: 500;
    fx-behaviour: abort;
    fx-fps: 50;
}

#bg_border:click {
    action-client: fx;
    fx-kssSelector: #demostyles1;
    fx-backgroundColor: "* #f99 #9f9 #99f #ffffe1";
    fx-borderWidth: "20px * * * 1px";
    fx-borderColor: "* #00a #a00 #0a0 #000";
    fx-duration: 1000;
    fx-transition: sineInOut;
    fx-behaviour: combine;
    fx-fps: 50;
}

#width_auto:click {
    action-client: fx;
    fx-kssSelector: #demostyles2;
    fx-width: auto;
}

#scroll_bottom:click {
    evt-click-preventdefault: true;
    action-client: fx;
    fx-kssSelector: #body;
    fx-scrollTop: 100%;
    fx-history: true;
    fx-duration: 1000;
    fx-transition: sineInOut;
    fx-behaviour: abort;
    fx-fps: 50;
}

#slide_in:click {
    action-client: fx;
    fx-kssSelector: #demoslide;
    fx-marginTop: 0;
    fx-marginLeft: 0;
    fx-duration: 1500;
    fx-transition: sineInOut;
    fx-behaviour: abort;
    fx-fps: 50;
}

#scroll_right:click {
    evt-click-preventdefault: true;
    action-client: fx;
    fx-kssSelector: #body;
    fx-scrollLeft: 100%;
    fx-history: true;
    fx-duration: 1000;
    fx-transition: sineInOut;
    fx-behaviour: abort;
    fx-fps: 50;
}

#bg_position:click {
    action-client: fx;
    fx-kssSelector: #demostyles1;
    fx-backgroundPositionX: "50% 75% 100% 50% 0% 50% 50%";
    fx-backgroundPositionY: "50% 0% 50% 100% 50% 0% 50%";
    fx-duration: "0 500 * 800 * * 500";
    fx-transition: linear;
    fx-behaviour: combine;
    fx-fps: 50;
}

#surprise:mouseover {
    action-client: fx;
    fx-className: hide;
    fx-duration: 2000;
    fx-transition: sineInOut;
    fx-behaviour: abort;
    fx-fps: 50;
}

#surprise:mouseout {
    action-client: fx;
    fx-className: show;
    fx-duration: 2000;
    fx-transition: sineInOut;
    fx-behaviour: abort;
    fx-fps: 50;
}

#slide_out_horizontal:click {
    action-client: fx;
    fx-kssSelector: #demoslide;
    fx-marginLeft: offsetWidth('demoslide', 0, -1);
    fx-duration: 1500;
    fx-transition: sineInOut;
    fx-behaviour: abort;
    fx-fps: 50;
}

#scroll_scroll:click {
    evt-click-preventdefault: true;
    action-client: fx;
    fx-kssSelector: #body;
    fx-scrollLeft: fx_scroll;
    fx-scrollTop: fx_scroll;
    fx-history: true;
    fx-duration: 1000;
    fx-transition: sineInOut;
    fx-behaviour: abort;
    fx-fps: 50;
    action-client: fx alias(highlight);
    highlight-kssSelector: #fx_scroll;
    highlight-backgroundColor: "#DBEAF0 transparent";
    highlight-duration: "0 500";
    highlight-repeat: 1;
    highlight-delay: 1500;
    highlight-transition: sineInOut;
    highlight-behaviour: abort;
    highlight-fps: 50;
}

#scroll_top:click {
    evt-click-preventdefault: true;
    action-client: fx;
    fx-kssSelector: #body;
    fx-scrollTop: 0%;
    fx-history: true;
    fx-duration: 1000;
    fx-transition: sineInOut;
    fx-behaviour: abort;
    fx-fps: 50;
}

#dropout:click {
    action-client: fx;
    fx-kssSelector: #demostyles1;
    fx-top: "200px * 0";
    fx-opacity: "0 * 1";
    fx-duration: "1000 * 0";
    fx-transition: backInOut;
    fx-behaviour: ignore;
    fx-fps: 50;
}

#scroll_styles:click {
    evt-click-preventdefault: true;
    action-client: fx;
    fx-kssSelector: #body;
    fx-scrollLeft: fx_styles;
    fx-scrollTop: fx_styles;
    fx-history: true;
    fx-duration: 1000;
    fx-transition: sineInOut;
    fx-behaviour: abort;
    fx-fps: 50;
    action-client: fx alias(highlight);
    highlight-kssSelector: #fx_styles;
    highlight-backgroundColor: "#DBEAF0 transparent";
    highlight-duration: "0 500";
    highlight-repeat: 1;
    highlight-delay: 1500;
    highlight-transition: sineInOut;
    highlight-behaviour: abort;
    highlight-fps: 50;
}

#puff:click {
    action-client: fx;
    fx-kssSelector: #demostyles1;
    fx-left: "-100px * 0";
    fx-top: "-100px * 0";
    fx-opacity: "0 * 1";
    fx-duration: "1000 * 0";
    fx-transition: sineInOut;
    fx-behaviour: ignore;
    fx-fps: 50;
}

#scroll_grass:click {
    action-client: fx;
    fx-kssSelector: #demoscroll;
    fx-scrollLeft: offsetLeft('demoscroll', 'content_grass', -200);
    fx-scrollTop: offsetTop('demoscroll', 'content_grass', -50);
    fx-duration: 2500;
    fx-transition: quadInOut;
    fx-behaviour: abort;
    fx-fps: 50;
}

#margin_zero:click {
    action-client: fx;
    fx-kssSelector: #demostyles2;
    fx-marginLeft: 0;
}

#height_fixed:click {
    action-client: fx;
    fx-kssSelector: #demostyles2;
    fx-height: 200px;
}

#fly:click {
    action-client: fx;
    fx-kssSelector: #animated;
    fx-opacity: "1 * 0";
    fx-width: "* 300px 400px 10px";
    fx-left: "* 750px 1000px 5px";
    fx-top: "* 300px 400px 5px";
    fx-duration: "0 8000 900 0";
    fx-transition: "cubicIn * linear";
    fx-behaviour: ignore;
    fx-fps: 50;
}

#slide_out_vertical:click {
    action-client: fx;
    fx-kssSelector: #demoslide;
    fx-marginTop: offsetHeight('demoslide', 0, -1);
    fx-duration: 1500;
    fx-transition: sineInOut;
    fx-behaviour: abort;
    fx-fps: 50;
}

#width_fixed:click {
    action-client: fx;
    fx-kssSelector: #demostyles2;
    fx-width: 600px;
}

#scroll_trail:click {
    evt-click-preventdefault: true;
    action-client: fx;
    fx-kssSelector: #body;
    fx-scrollLeft: fx_trail;
    fx-scrollTop: fx_trail;
    fx-history: true;
    fx-duration: 1000;
    fx-transition: sineInOut;
    fx-behaviour: abort;
    fx-fps: 50;
    action-client: fx alias(highlight);
    highlight-kssSelector: #fx_trail;
    highlight-backgroundColor: "#DBEAF0 transparent";
    highlight-duration: "0 500";
    highlight-repeat: 1;
    highlight-delay: 1500;
    highlight-transition: sineInOut;
    highlight-behaviour: abort;
    highlight-fps: 50;
}

#scroll_center:click {
    action-client: fx;
    fx-kssSelector: #demoscroll;
    fx-scrollLeft: 50%;
    fx-scrollTop: 50%;
    fx-duration: 2500;
    fx-transition: quadInOut;
    fx-behaviour: abort;
    fx-fps: 50;
}

#pulsate:click {
    action-client: fx;
    fx-kssSelector: #demostyles1;
    fx-className: "hide show hide show hide show";
    fx-duration: 100;
    fx-transition: sineInOut;
    fx-behaviour: ignore;
    fx-fps: 50;
}

#margin_auto:click {
    action-client: fx;
    fx-kssSelector: #demostyles2;
    fx-marginLeft: auto;
}

#font_color:click {
    action-client: fx;
    fx-kssSelector: #demostyles1;
    fx-fontSize: "50px * * * 20px";
    fx-color: "* #00e #e00 #090";
    fx-fontStyle: "italic * * * normal";
    fx-letterSpacing: "0.0em 0.5em 0.0em";
    fx-duration: 1000;
    fx-threshold: "1 0";
    fx-transition: sineInOut;
    fx-behaviour: combine;
    fx-fps: 50;
}

#scroll_sky:click {
    action-client: fx;
    fx-kssSelector: #demoscroll;
    fx-scrollLeft: offsetLeft('demoscroll', 'content_sky', -200);
    fx-scrollTop: offsetTop('demoscroll', 'content_sky', -50);
    fx-duration: 2500;
    fx-transition: quadInOut;
    fx-behaviour: abort;
    fx-fps: 50;
}