<html><head></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; ">As Fabian mentioned we currently do not really support CSS directly but basic support can be reached quite simple.<div><br></div><div>First of all look how existing examples like the mentioned sketch morphs, the Markdown morph in the PartsBin, or the <a href="http://lively-kernel.org/repository/webwerkstatt/users/robertkrahn/animations-expt.xhtml">CSS animation experimentation page</a> make use of stylesheets.</div><div><br></div><div>The basic usage pattern is the following:</div><div><br></div><div>1) Load or define a stylesheet and append it to the DOM. The following method (used as a prototype on the animation page) provides a try simple interface for inserting / removing / changing stylesheets and extends the WorldMorph interface:</div><div><br></div><div><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 0, 139); outline-style: none; outline-width: initial; outline-color: initial; ">this</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; ">.world().addScript(</span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 0, 139); outline-style: none; outline-width: initial; outline-color: initial; ">function</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "> getStyleSheet(id) </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 128, 0); outline-style: none; outline-width: initial; outline-color: initial; ">{</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "> </span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "> </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 0, 128); outline-style: none; outline-width: initial; outline-color: initial; ">var</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "> existing = $(</span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 128, 128); outline-style: none; outline-width: initial; outline-color: initial; ">'#'</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "> + id), css = existing.length > </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 0, 255); outline-style: none; outline-width: initial; outline-color: initial; ">0</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "> ? existing : $(</span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 128, 128); outline-style: none; outline-width: initial; outline-color: initial; ">'<style type="text/css" id="'</span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(128, 0, 0); outline-style: none; outline-width: initial; outline-color: initial; "> + id + </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 128, 128); outline-style: none; outline-width: initial; outline-color: initial; ">'"></style>'</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; ">); wrapper = </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 128, 0); outline-style: none; outline-width: initial; outline-color: initial; ">{</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "> </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(139, 0, 0); outline-style: none; outline-width: initial; outline-color: initial; ">css:</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "> css, </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(139, 0, 0); outline-style: none; outline-width: initial; outline-color: initial; ">toString:</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "> </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 0, 139); outline-style: none; outline-width: initial; outline-color: initial; ">function</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; ">() </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 128, 0); outline-style: none; outline-width: initial; outline-color: initial; ">{</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "> </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 0, 128); outline-style: none; outline-width: initial; outline-color: initial; ">return</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "> </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 128, 128); outline-style: none; outline-width: initial; outline-color: initial; ">'CSS<'</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "> + </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 0, 139); outline-style: none; outline-width: initial; outline-color: initial; ">this</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; ">.css.text() + </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 128, 128); outline-style: none; outline-width: initial; outline-color: initial; ">'>'</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "> </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 128, 0); outline-style: none; outline-width: initial; outline-color: initial; ">}</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; ">, </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(139, 0, 0); outline-style: none; outline-width: initial; outline-color: initial; ">add:</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "> </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 0, 139); outline-style: none; outline-width: initial; outline-color: initial; ">function</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; ">(cssText) </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 128, 0); outline-style: none; outline-width: initial; outline-color: initial; ">{</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "> </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 0, 139); outline-style: none; outline-width: initial; outline-color: initial; ">this</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; ">.css.text(</span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 0, 139); outline-style: none; outline-width: initial; outline-color: initial; ">this</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; ">.css.text() + </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 128, 128); outline-style: none; outline-width: initial; outline-color: initial; ">'\n'</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "> + cssText); </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 128, 0); outline-style: none; outline-width: initial; outline-color: initial; ">}</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; ">, </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(139, 0, 0); outline-style: none; outline-width: initial; outline-color: initial; ">append:</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "> </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 0, 139); outline-style: none; outline-width: initial; outline-color: initial; ">function</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; ">() </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 128, 0); outline-style: none; outline-width: initial; outline-color: initial; ">{</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "> </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 0, 139); outline-style: none; outline-width: initial; outline-color: initial; ">this</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; ">.css.appendTo(document.head); </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 128, 0); outline-style: none; outline-width: initial; outline-color: initial; ">}</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; ">, </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(139, 0, 0); outline-style: none; outline-width: initial; outline-color: initial; ">remove:</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "> </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 0, 139); outline-style: none; outline-width: initial; outline-color: initial; ">function</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; ">() </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 128, 0); outline-style: none; outline-width: initial; outline-color: initial; ">{</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "> </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 0, 139); outline-style: none; outline-width: initial; outline-color: initial; ">this</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; ">.css.remove(); </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 128, 0); outline-style: none; outline-width: initial; outline-color: initial; ">}</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; ">, </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(139, 0, 0); outline-style: none; outline-width: initial; outline-color: initial; ">inDOM:</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "> </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 0, 139); outline-style: none; outline-width: initial; outline-color: initial; ">function</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; ">() </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 128, 0); outline-style: none; outline-width: initial; outline-color: initial; ">{</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "> </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 0, 128); outline-style: none; outline-width: initial; outline-color: initial; ">return</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "> </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 0, 139); outline-style: none; outline-width: initial; outline-color: initial; ">this</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; ">.css.parent().length > </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 0, 255); outline-style: none; outline-width: initial; outline-color: initial; ">0</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "> </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 128, 0); outline-style: none; outline-width: initial; outline-color: initial; ">}</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "> </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 128, 0); outline-style: none; outline-width: initial; outline-color: initial; ">}</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "> </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 0, 128); outline-style: none; outline-width: initial; outline-color: initial; ">return</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "> wrapper; </span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 128, 0); outline-style: none; outline-width: initial; outline-color: initial; ">}</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; ">);</span><br><div><br></div><div>2) Assign / remove CSS classes to morphs:</div><div><br></div><div>Currently morphs provide no direct interface but by using jQuery this is very simple: <span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; ">morph.jQuery().addClass(</span><span style="font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; color: rgb(0, 128, 128); outline-style: none; outline-width: initial; outline-color: initial; ">'foo'</span><span style="color: rgb(0, 0, 0); font-family: Monaco, monospace; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(243, 243, 243); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; ">);</span> will add the CSS class "foo" to morph. We can simply define a morphic interface for CSS classes and stylesheets.</div><div><br></div><div>Remaining problems to solve are:</div><div><br></div><div>1) Include CSS information in the serialization. This should be very simple to do. Also (as in the anim example) morph names are well suited to serve as CSS class names. This allows what some call "semantic CSS", styling based on what an object is intended to represent. E.g. by calling a morph "sidebar", the sidebar CSS rules are applied. With the "morphic CSS interface" above this should not take long to implement.</div><div><br></div><div>2) Integrate direct and declarative styling. This is the harder part and can be split in two sub-problems:</div><div><br></div><div>2.1) We have to fix the "eagerness" of propagating CSS settings to morph and shape nodes. If you currently look at the morph shape representation in the DOM you will see that all visual properties are written into the style attribute of morph and shape nodes. Since the style attribute takes precedence over stylesheet rules, no stylesheet applying for example a background color to a morph will have an effect. This problem can be solved by using stylesheets throughout and having base stylesheets that define default values so that morphs just have to set CSS properties directly when they differ from the defaults.</div><div><br></div><div>2.2) The current rendering system does not read DOM data. Cached values are used throughout. When styling used in the very simple way as this is now than this provides two advantages: We don't have to take browser (DOM) inconsistencies into account and performance is hugely improved (as compared to the Morphic1 implementation used until early last year. The first problem can be addressed by using a DOM library like jQuery. The second problem might turn out to be complicated or not -- here we need a prototype and do some profiling to see the performance characteristics.</div><div><br></div><div>When approaching these things, I would start at the end ;)</div><div><br></div><div>Best,</div><div>Robert</div><div><br></div><div><br></div><div><br><div><div>On Apr 2, 2012, at 6:09 PM, Manciero, Christopher wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><div>Is it possible to add style sheets to Lively pages?<br><br>Thanks,<br><br><br><br>Christopher Manciero<br><br>EPM Innovation<br><br>SAP Labs, LLC<br><br>383 Main Avenue<br><br>5th Floor<br><br>Norwalk, CT 06851<br><br>T +1-203-295-2213<br><br>M +1-203-815-8641<br><br><a href="mailto:christopher.manciero@sap.com">mailto:christopher.manciero@sap.com</a><br><br>http://www.sap.com<http://www.sap.com/><br><br>_______________________________________________<br>lively-kernel mailing list<br>lively-kernel@hpi.uni-potsdam.de<br>http://lists.hpi.uni-potsdam.de/listinfo/lively-kernel<br></div></blockquote></div><br></div></div></body></html>