<!--{{{-->
<link rel='alternate' type='application/rss+xml' title='RSS' href='index.xml' />
<!--}}}-->
Background: #fff
Foreground: #000
PrimaryPale: #8cf
PrimaryLight: #18f
PrimaryMid: #04b
PrimaryDark: #014
SecondaryPale: #ffc
SecondaryLight: #fe8
SecondaryMid: #db4
SecondaryDark: #841
TertiaryPale: #eee
TertiaryLight: #ccc
TertiaryMid: #999
TertiaryDark: #666
Error: #f88
/*{{{*/
body {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}

a {color:[[ColorPalette::PrimaryMid]];}
a:hover {background-color:[[ColorPalette::PrimaryMid]]; color:[[ColorPalette::Background]];}
a img {border:0;}

h1,h2,h3,h4,h5,h6 {color:[[ColorPalette::SecondaryDark]]; background:transparent;}
h1 {border-bottom:2px solid [[ColorPalette::TertiaryLight]];}
h2,h3 {border-bottom:1px solid [[ColorPalette::TertiaryLight]];}

.button {color:[[ColorPalette::PrimaryDark]]; border:1px solid [[ColorPalette::Background]];}
.button:hover {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::SecondaryLight]]; border-color:[[ColorPalette::SecondaryMid]];}
.button:active {color:[[ColorPalette::Background]]; background:[[ColorPalette::SecondaryMid]]; border:1px solid [[ColorPalette::SecondaryDark]];}

.header {background:[[ColorPalette::PrimaryMid]];}
.headerShadow {color:[[ColorPalette::Foreground]];}
.headerShadow a {font-weight:normal; color:[[ColorPalette::Foreground]];}
.headerForeground {color:[[ColorPalette::Background]];}
.headerForeground a {font-weight:normal; color:[[ColorPalette::PrimaryPale]];}

.tabSelected{color:[[ColorPalette::PrimaryDark]];
	background:[[ColorPalette::TertiaryPale]];
	border-left:1px solid [[ColorPalette::TertiaryLight]];
	border-top:1px solid [[ColorPalette::TertiaryLight]];
	border-right:1px solid [[ColorPalette::TertiaryLight]];
}
.tabUnselected {color:[[ColorPalette::Background]]; background:[[ColorPalette::TertiaryMid]];}
.tabContents {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::TertiaryPale]]; border:1px solid [[ColorPalette::TertiaryLight]];}
.tabContents .button {border:0;}

#sidebar {}
#sidebarOptions input {border:1px solid [[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel {background:[[ColorPalette::PrimaryPale]];}
#sidebarOptions .sliderPanel a {border:none;color:[[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel a:hover {color:[[ColorPalette::Background]]; background:[[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel a:active {color:[[ColorPalette::PrimaryMid]]; background:[[ColorPalette::Background]];}

.wizard {background:[[ColorPalette::PrimaryPale]]; border:1px solid [[ColorPalette::PrimaryMid]];}
.wizard h1 {color:[[ColorPalette::PrimaryDark]]; border:none;}
.wizard h2 {color:[[ColorPalette::Foreground]]; border:none;}
.wizardStep {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];
	border:1px solid [[ColorPalette::PrimaryMid]];}
.wizardStep.wizardStepDone {background:[[ColorPalette::TertiaryLight]];}
.wizardFooter {background:[[ColorPalette::PrimaryPale]];}
.wizardFooter .status {background:[[ColorPalette::PrimaryDark]]; color:[[ColorPalette::Background]];}
.wizard .button {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::SecondaryLight]]; border: 1px solid;
	border-color:[[ColorPalette::SecondaryPale]] [[ColorPalette::SecondaryDark]] [[ColorPalette::SecondaryDark]] [[ColorPalette::SecondaryPale]];}
.wizard .button:hover {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::Background]];}
.wizard .button:active {color:[[ColorPalette::Background]]; background:[[ColorPalette::Foreground]]; border: 1px solid;
	border-color:[[ColorPalette::PrimaryDark]] [[ColorPalette::PrimaryPale]] [[ColorPalette::PrimaryPale]] [[ColorPalette::PrimaryDark]];}

.wizard .notChanged {background:transparent;}
.wizard .changedLocally {background:#80ff80;}
.wizard .changedServer {background:#8080ff;}
.wizard .changedBoth {background:#ff8080;}
.wizard .notFound {background:#ffff80;}
.wizard .putToServer {background:#ff80ff;}
.wizard .gotFromServer {background:#80ffff;}

#messageArea {border:1px solid [[ColorPalette::SecondaryMid]]; background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]];}
#messageArea .button {color:[[ColorPalette::PrimaryMid]]; background:[[ColorPalette::SecondaryPale]]; border:none;}

.popupTiddler {background:[[ColorPalette::TertiaryPale]]; border:2px solid [[ColorPalette::TertiaryMid]];}

.popup {background:[[ColorPalette::TertiaryPale]]; color:[[ColorPalette::TertiaryDark]]; border-left:1px solid [[ColorPalette::TertiaryMid]]; border-top:1px solid [[ColorPalette::TertiaryMid]]; border-right:2px solid [[ColorPalette::TertiaryDark]]; border-bottom:2px solid [[ColorPalette::TertiaryDark]];}
.popup hr {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::PrimaryDark]]; border-bottom:1px;}
.popup li.disabled {color:[[ColorPalette::TertiaryMid]];}
.popup li a, .popup li a:visited {color:[[ColorPalette::Foreground]]; border: none;}
.popup li a:hover {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; border: none;}
.popup li a:active {background:[[ColorPalette::SecondaryPale]]; color:[[ColorPalette::Foreground]]; border: none;}
.popupHighlight {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
.listBreak div {border-bottom:1px solid [[ColorPalette::TertiaryDark]];}

.tiddler .defaultCommand {font-weight:bold;}

.shadow .title {color:[[ColorPalette::TertiaryDark]];}

.title {color:[[ColorPalette::SecondaryDark]];}
.subtitle {color:[[ColorPalette::TertiaryDark]];}

.toolbar {color:[[ColorPalette::PrimaryMid]];}
.toolbar a {color:[[ColorPalette::TertiaryLight]];}
.selected .toolbar a {color:[[ColorPalette::TertiaryMid]];}
.selected .toolbar a:hover {color:[[ColorPalette::Foreground]];}

.tagging, .tagged {border:1px solid [[ColorPalette::TertiaryPale]]; background-color:[[ColorPalette::TertiaryPale]];}
.selected .tagging, .selected .tagged {background-color:[[ColorPalette::TertiaryLight]]; border:1px solid [[ColorPalette::TertiaryMid]];}
.tagging .listTitle, .tagged .listTitle {color:[[ColorPalette::PrimaryDark]];}
.tagging .button, .tagged .button {border:none;}

.footer {color:[[ColorPalette::TertiaryLight]];}
.selected .footer {color:[[ColorPalette::TertiaryMid]];}

.sparkline {background:[[ColorPalette::PrimaryPale]]; border:0;}
.sparktick {background:[[ColorPalette::PrimaryDark]];}

.error, .errorButton {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::Error]];}
.warning {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::SecondaryPale]];}
.lowlight {background:[[ColorPalette::TertiaryLight]];}

.zoomer {background:none; color:[[ColorPalette::TertiaryMid]]; border:3px solid [[ColorPalette::TertiaryMid]];}

.imageLink, #displayArea .imageLink {background:transparent;}

.annotation {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; border:2px solid [[ColorPalette::SecondaryMid]];}

.viewer .listTitle {list-style-type:none; margin-left:-2em;}
.viewer .button {border:1px solid [[ColorPalette::SecondaryMid]];}
.viewer blockquote {border-left:3px solid [[ColorPalette::TertiaryDark]];}

.viewer table, table.twtable {border:2px solid [[ColorPalette::TertiaryDark]];}
.viewer th, .viewer thead td, .twtable th, .twtable thead td {background:[[ColorPalette::SecondaryMid]]; border:1px solid [[ColorPalette::TertiaryDark]]; color:[[ColorPalette::Background]];}
.viewer td, .viewer tr, .twtable td, .twtable tr {border:1px solid [[ColorPalette::TertiaryDark]];}

.viewer pre {border:1px solid [[ColorPalette::SecondaryLight]]; background:[[ColorPalette::SecondaryPale]];}
.viewer code {color:[[ColorPalette::SecondaryDark]];}
.viewer hr {border:0; border-top:dashed 1px [[ColorPalette::TertiaryDark]]; color:[[ColorPalette::TertiaryDark]];}

.highlight, .marked {background:[[ColorPalette::SecondaryLight]];}

.editor input {border:1px solid [[ColorPalette::PrimaryMid]];}
.editor textarea {border:1px solid [[ColorPalette::PrimaryMid]]; width:100%;}
.editorFooter {color:[[ColorPalette::TertiaryMid]];}

#backstageArea {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::TertiaryMid]];}
#backstageArea a {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::Background]]; border:none;}
#backstageArea a:hover {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; }
#backstageArea a.backstageSelTab {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
#backstageButton a {background:none; color:[[ColorPalette::Background]]; border:none;}
#backstageButton a:hover {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::Background]]; border:none;}
#backstagePanel {background:[[ColorPalette::Background]]; border-color: [[ColorPalette::Background]] [[ColorPalette::TertiaryDark]] [[ColorPalette::TertiaryDark]] [[ColorPalette::TertiaryDark]];}
.backstagePanelFooter .button {border:none; color:[[ColorPalette::Background]];}
.backstagePanelFooter .button:hover {color:[[ColorPalette::Foreground]];}
#backstageCloak {background:[[ColorPalette::Foreground]]; opacity:0.6; filter:'alpha(opacity=60)';}
/*}}}*/
/*{{{*/
* html .tiddler {height:1%;}

body {font-size:.75em; font-family:arial,helvetica; margin:0; padding:0;}

h1,h2,h3,h4,h5,h6 {font-weight:bold; text-decoration:none;}
h1,h2,h3 {padding-bottom:1px; margin-top:1.2em;margin-bottom:0.3em;}
h4,h5,h6 {margin-top:1em;}
h1 {font-size:1.35em;}
h2 {font-size:1.25em;}
h3 {font-size:1.1em;}
h4 {font-size:1em;}
h5 {font-size:.9em;}

hr {height:1px;}

a {text-decoration:none;}

dt {font-weight:bold;}

ol {list-style-type:decimal;}
ol ol {list-style-type:lower-alpha;}
ol ol ol {list-style-type:lower-roman;}
ol ol ol ol {list-style-type:decimal;}
ol ol ol ol ol {list-style-type:lower-alpha;}
ol ol ol ol ol ol {list-style-type:lower-roman;}
ol ol ol ol ol ol ol {list-style-type:decimal;}

.txtOptionInput {width:11em;}

#contentWrapper .chkOptionInput {border:0;}

.externalLink {text-decoration:underline;}

.indent {margin-left:3em;}
.outdent {margin-left:3em; text-indent:-3em;}
code.escaped {white-space:nowrap;}

.tiddlyLinkExisting {font-weight:bold;}
.tiddlyLinkNonExisting {font-style:italic;}

/* the 'a' is required for IE, otherwise it renders the whole tiddler in bold */
a.tiddlyLinkNonExisting.shadow {font-weight:bold;}

#mainMenu .tiddlyLinkExisting,
	#mainMenu .tiddlyLinkNonExisting,
	#sidebarTabs .tiddlyLinkNonExisting {font-weight:normal; font-style:normal;}
#sidebarTabs .tiddlyLinkExisting {font-weight:bold; font-style:normal;}

.header {position:relative;}
.header a:hover {background:transparent;}
.headerShadow {position:relative; padding:4.5em 0 1em 1em; left:-1px; top:-1px;}
.headerForeground {position:absolute; padding:4.5em 0 1em 1em; left:0px; top:0px;}

.siteTitle {font-size:3em;}
.siteSubtitle {font-size:1.2em;}

#mainMenu {position:absolute; left:0; width:10em; text-align:right; line-height:1.6em; padding:1.5em 0.5em 0.5em 0.5em; font-size:1.1em;}

#sidebar {position:absolute; right:3px; width:16em; font-size:.9em;}
#sidebarOptions {padding-top:0.3em;}
#sidebarOptions a {margin:0 0.2em; padding:0.2em 0.3em; display:block;}
#sidebarOptions input {margin:0.4em 0.5em;}
#sidebarOptions .sliderPanel {margin-left:1em; padding:0.5em; font-size:.85em;}
#sidebarOptions .sliderPanel a {font-weight:bold; display:inline; padding:0;}
#sidebarOptions .sliderPanel input {margin:0 0 0.3em 0;}
#sidebarTabs .tabContents {width:15em; overflow:hidden;}

.wizard {padding:0.1em 1em 0 2em;}
.wizard h1 {font-size:2em; font-weight:bold; background:none; padding:0; margin:0.4em 0 0.2em;}
.wizard h2 {font-size:1.2em; font-weight:bold; background:none; padding:0; margin:0.4em 0 0.2em;}
.wizardStep {padding:1em 1em 1em 1em;}
.wizard .button {margin:0.5em 0 0; font-size:1.2em;}
.wizardFooter {padding:0.8em 0.4em 0.8em 0;}
.wizardFooter .status {padding:0 0.4em; margin-left:1em;}
.wizard .button {padding:0.1em 0.2em;}

#messageArea {position:fixed; top:2em; right:0; margin:0.5em; padding:0.5em; z-index:2000; _position:absolute;}
.messageToolbar {display:block; text-align:right; padding:0.2em;}
#messageArea a {text-decoration:underline;}

.tiddlerPopupButton {padding:0.2em;}
.popupTiddler {position: absolute; z-index:300; padding:1em; margin:0;}

.popup {position:absolute; z-index:300; font-size:.9em; padding:0; list-style:none; margin:0;}
.popup .popupMessage {padding:0.4em;}
.popup hr {display:block; height:1px; width:auto; padding:0; margin:0.2em 0;}
.popup li.disabled {padding:0.4em;}
.popup li a {display:block; padding:0.4em; font-weight:normal; cursor:pointer;}
.listBreak {font-size:1px; line-height:1px;}
.listBreak div {margin:2px 0;}

.tabset {padding:1em 0 0 0.5em;}
.tab {margin:0 0 0 0.25em; padding:2px;}
.tabContents {padding:0.5em;}
.tabContents ul, .tabContents ol {margin:0; padding:0;}
.txtMainTab .tabContents li {list-style:none;}
.tabContents li.listLink { margin-left:.75em;}

#contentWrapper {display:block;}
#splashScreen {display:none;}

#displayArea {margin:1em 17em 0 14em;}

.toolbar {text-align:right; font-size:.9em;}

.tiddler {padding:1em 1em 0;}

.missing .viewer,.missing .title {font-style:italic;}

.title {font-size:1.6em; font-weight:bold;}

.missing .subtitle {display:none;}
.subtitle {font-size:1.1em;}

.tiddler .button {padding:0.2em 0.4em;}

.tagging {margin:0.5em 0.5em 0.5em 0; float:left; display:none;}
.isTag .tagging {display:block;}
.tagged {margin:0.5em; float:right;}
.tagging, .tagged {font-size:0.9em; padding:0.25em;}
.tagging ul, .tagged ul {list-style:none; margin:0.25em; padding:0;}
.tagClear {clear:both;}

.footer {font-size:.9em;}
.footer li {display:inline;}

.annotation {padding:0.5em; margin:0.5em;}

* html .viewer pre {width:99%; padding:0 0 1em 0;}
.viewer {line-height:1.4em; padding-top:0.5em;}
.viewer .button {margin:0 0.25em; padding:0 0.25em;}
.viewer blockquote {line-height:1.5em; padding-left:0.8em;margin-left:2.5em;}
.viewer ul, .viewer ol {margin-left:0.5em; padding-left:1.5em;}

.viewer table, table.twtable {border-collapse:collapse; margin:0.8em 1.0em;}
.viewer th, .viewer td, .viewer tr,.viewer caption,.twtable th, .twtable td, .twtable tr,.twtable caption {padding:3px;}
table.listView {font-size:0.85em; margin:0.8em 1.0em;}
table.listView th, table.listView td, table.listView tr {padding:0px 3px 0px 3px;}

.viewer pre {padding:0.5em; margin-left:0.5em; font-size:1.2em; line-height:1.4em; overflow:auto;}
.viewer code {font-size:1.2em; line-height:1.4em;}

.editor {font-size:1.1em;}
.editor input, .editor textarea {display:block; width:100%; font:inherit;}
.editorFooter {padding:0.25em 0; font-size:.9em;}
.editorFooter .button {padding-top:0px; padding-bottom:0px;}

.fieldsetFix {border:0; padding:0; margin:1px 0px;}

.sparkline {line-height:1em;}
.sparktick {outline:0;}

.zoomer {font-size:1.1em; position:absolute; overflow:hidden;}
.zoomer div {padding:1em;}

* html #backstage {width:99%;}
* html #backstageArea {width:99%;}
#backstageArea {display:none; position:relative; overflow: hidden; z-index:150; padding:0.3em 0.5em;}
#backstageToolbar {position:relative;}
#backstageArea a {font-weight:bold; margin-left:0.5em; padding:0.3em 0.5em;}
#backstageButton {display:none; position:absolute; z-index:175; top:0; right:0;}
#backstageButton a {padding:0.1em 0.4em; margin:0.1em;}
#backstage {position:relative; width:100%; z-index:50;}
#backstagePanel {display:none; z-index:100; position:absolute; width:90%; margin-left:3em; padding:1em;}
.backstagePanelFooter {padding-top:0.2em; float:right;}
.backstagePanelFooter a {padding:0.2em 0.4em;}
#backstageCloak {display:none; z-index:20; position:absolute; width:100%; height:100px;}

.whenBackstage {display:none;}
.backstageVisible .whenBackstage {display:block;}
/*}}}*/
/***
StyleSheet for use when a translation requires any css style changes.
This StyleSheet can be used directly by languages such as Chinese, Japanese and Korean which need larger font sizes.
***/
/*{{{*/
body {font-size:0.8em;}
#sidebarOptions {font-size:1.05em;}
#sidebarOptions a {font-style:normal;}
#sidebarOptions .sliderPanel {font-size:0.95em;}
.subtitle {font-size:0.8em;}
.viewer table.listView {font-size:0.95em;}
/*}}}*/
/*{{{*/
@media print {
#mainMenu, #sidebar, #messageArea, .toolbar, #backstageButton, #backstageArea {display: none !important;}
#displayArea {margin: 1em 1em 0em;}
noscript {display:none;} /* Fixes a feature in Firefox 1.5.0.2 where print preview displays the noscript content */
}
/*}}}*/
<!--{{{-->
<div class='header' macro='gradient vert [[ColorPalette::PrimaryLight]] [[ColorPalette::PrimaryMid]]'>
<div class='headerShadow'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
<div class='headerForeground'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
</div>
<div id='mainMenu' refresh='content' tiddler='MainMenu'></div>
<div id='sidebar'>
<div id='sidebarOptions' refresh='content' tiddler='SideBarOptions'></div>
<div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>
<div id='displayArea'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></div>
</div>
<!--}}}-->
<!--{{{-->
<div class='toolbar' macro='toolbar [[ToolbarCommands::ViewToolbar]]'></div>
<div class='title' macro='view title'></div>
<div class='subtitle'><span macro='view modifier link'></span>, <span macro='view modified date'></span> (<span macro='message views.wikified.createdPrompt'></span> <span macro='view created date'></span>)</div>
<div class='tagging' macro='tagging'></div>
<div class='tagged' macro='tags'></div>
<div class='viewer' macro='view text wikified'></div>
<div class='tagClear'></div>
<!--}}}-->
<!--{{{-->
<div class='toolbar' macro='toolbar [[ToolbarCommands::EditToolbar]]'></div>
<div class='title' macro='view title'></div>
<div class='editor' macro='edit title'></div>
<div macro='annotations'></div>
<div class='editor' macro='edit text'></div>
<div class='editor' macro='edit tags'></div><div class='editorFooter'><span macro='message views.editor.tagPrompt'></span><span macro='tagChooser excludeLists'></span></div>
<!--}}}-->
To get started with this blank [[TiddlyWiki]], you'll need to modify the following tiddlers:
* [[SiteTitle]] & [[SiteSubtitle]]: The title and subtitle of the site, as shown above (after saving, they will also appear in the browser title bar)
* [[MainMenu]]: The menu (usually on the left)
* [[DefaultTiddlers]]: Contains the names of the tiddlers that you want to appear when the TiddlyWiki is opened
You'll also need to enter your username for signing your edits: <<option txtUserName>>
These [[InterfaceOptions]] for customising [[TiddlyWiki]] are saved in your browser

Your username for signing your edits. Write it as a [[WikiWord]] (eg [[JoeBloggs]])

<<option txtUserName>>
<<option chkSaveBackups>> [[SaveBackups]]
<<option chkAutoSave>> [[AutoSave]]
<<option chkRegExpSearch>> [[RegExpSearch]]
<<option chkCaseSensitiveSearch>> [[CaseSensitiveSearch]]
<<option chkAnimate>> [[EnableAnimations]]

----
Also see [[AdvancedOptions]]
<<importTiddlers>>
!!!<<tabs gearTab
Instructable "Gearstruct" Gearstruct >>
[[Moonshot]]
<html><!-- Facebook Badge START --><a href="http://www.facebook.com/people/Aaron-Brewer/80901574" title="Aaron Brewer&#039;s Facebook profile" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal;font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;">Aaron Brewer's Facebook Profile</a><br /><a href="http://www.facebook.com/people/Aaron-Brewer/80901574" title="title" target="_TOP"><img src="http://badge.facebook.com/badge/80901574.138.1773446928.png" alt="Aaron Brewer&#039;s Facebook profile" style="border: 0px;" /></a></html>
<<tiddler ReplaceDoubleClick with: none>>
| <html><object width="800" height="600"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=7610390&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=ffffff&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=7610390&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=ffffff&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="800" height="600"></embed></object></html> |
[[My Portfolio]]
[[Contact Information]]
!<<slider gearSlide 'Cardstock Gears' 'Cardstock Gears' "View the Cardstock Gear Project">><<slider variousSlide 'Other Projects' 'Other Projects' "View some of the other projects I've been involved in">><<slider diySlider 'D.I.Y Mechanical Engineering' 'D.I.Y Mechanical Engineering' "How to create gears and mechanical parts from cardboard.">><<tiddler ReplaceDoubleClick with: none>>
| <html><div><object width="425" height="425" align="middle"><param name="movie" value="http://www.instructables.com/static/flash/viewer.swf"></param><param name="quality" value="high"></param><param name="wmode" value="transparent"></param><param name="FlashVars" value="title=How_to_Build_Gears_from_Junkmail_and_Cardstock"></param><embed src="http://www.instructables.com/static/flash/viewer.swf" quality="high" bgcolor="#ffffff" width="425" height="425" align="middle" allowScriptAccess="always" wmode="transparent" FlashVars="title=How_to_Build_Gears_from_Junkmail_and_Cardstock" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object><br><font size="1"><a href="http://www.instructables.com/id/How_to_Build_Gears_from_Junkmail_and_Cardstock/">How to Build Working Gears from Junkmail and Cardstock</a> - <a href="http://www.instructables.com/">More DIY How To Projects</a></font></div></html> |
!<<slider moonSlider 'Moonshine' 'Moonshine' "A generative planetary landscape">><<slider memSlider 'Memory Hole' 'Memory Hole' "A project that parsed private Instant Messenger messages being sent over WiFi.">><<tiddler ReplaceDoubleClick with: none>><<slider ragSlide 'Processing Ragdoll' 'Processing Ragdoll' "A java applet showing ragdoll physics applied to a body.">><<slider triSlide 'Tribilical' 'Tribilical' "A java applet using 2D physics to build a ribbon of shapes.">>
| <html><p>Game Created in Processing using 2D physics</p><p><a href="http://jointforge.blogspot.com/">Click Here to go to the Jointforge Homepage.</p><p><img src="images/jointforge.png"></img></p></a></html> |
!!!!This project was very much inspired by post-9/11 and the fear it generated though it's own reaction to fear. Me and some other performers dressed in chemical suits and gas-masks, then ran through Bolton Hill in Baltimore. Our stated goal by doing this was to protect ourselves from the risks of chemical attack and pollution while getting the proper exercise our bodies needed. 
| <html><embed src="files/movies/GasketNoSound.mov" width=768 height=590> </embed></html> |
!!!!![[Aaron Brewer|My Portfolio]]
[[Professional References]]
[[Design and Prototyping]]
[[Interactive Media]]
[[Social Intervention]]
[[Contact Information]]


!!!!Memory hole was a project that used packet sniffing to grab instant messenger messages on unencrypted WiFi. The messages were stripped of their screen names and printed on an LCD screen along with a receipt printer. The printed messages terminated into a pile on the basement floor which could then be tactilely explored by visitors. The warning label developed for the piece is being read aloud in the video, cautioning students that their personal information may be in jeopardy.

| <html><object width="800" height="600"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=7609415&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=ffffff&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=7609415&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=ffffff&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="800" height="600"></embed></object></html> |
!!!!Requires Mac OS X 10.5 and an Intel Architecture.
|[img[The Moonshine Project as a downloadable application|images/filetypes/Package.png][files/moonapp/Moonshine.pkg]]|
| [[Installer Package|files/moonapp/Moonshine.pkg]] |
Comming Soon
!!!!Moonshine was a project that used the Quartz Composer application to create unique worlds. All textures are generated through Perlin Noise operations and names are generated through random operations as well. This was an experiment in making worlds, a theme I am extremely interested in.

!!!<<tabs moonPrev 
'Images' "Moonshot" Moonshot 
'Download' "Moonapp" Moonapp >>
| <html><object width='640' height='476'><param name='movie' value='images/moonkey.swf'><embed src='images/moonkey.swf' width='640' height='476'></embed></object><p>Click on image to change slides.</p></html> |
This web page is a profile of the works I've completed and developed over the last few years. I'm an extremely adaptable problem-solver with a multitude of skills from user interface design, to scripting and programming, to product design and user experience. The themes of my artwork range from the socio-political, to exoteric creativity.

!<<slider resumeSlide 'Resumé' 'My Resumé' "Download and view my resumé">>

<<slider gearSlide 'Gearstruct' 'Cardstock Gears' "View the Cardstock Gear Project.">><<slider moonSlider 'Moonshine' 'Moonshine' "A generative planetary landscape.">><<slider joySlider 'Joy Joggers' 'Joy Joggers' "A project involving a citywide jog in gasmasks and chemical suits.">><<slider diySlider 'D.I.Y Mechanical Engineering' 'D.I.Y Mechanical Engineering' "How to create gears and mechanical parts from cardboard.">><<slider memSlider 'Memory Hole' 'Memory Hole' "A project that parsed private Instant Messenger messages being sent over WiFi.">><<slider ragSlide 'Processing Ragdoll' 'Processing Ragdoll' "A java applet showing ragdoll physics applied to a body.">><<slider triSlide 'Tribilical' 'Tribilical' "A java applet using 2D physics to build a ribbon of shapes.">><<slider rainSlide 'Rainy Day' 'Rainy Day' "A screensaver built in Quartz Composer">><<slider jointSlide 'Jointforge' 'Jointforge' "A Java Applet game using 2D physics">><<slider variousSlide 'designShot' 'Other Projects' "View some of the other projects I've been involved in.">>
<<tiddler ReplaceDoubleClick with: none>>
!!!<<tabs variousTab 
'Screenshots' "Screenshots" designShot >>
<!--{{{-->

<div id='topMenu' refresh='content' tiddler='MainMenu'></div>
<!--div id='sidebar'>
<div id='sidebarOptions' refresh='content' tiddler='SideBarOptions'></div>
<div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div-->
</div>
<div id='displayArea'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></div>
</div>
<!--}}}-->
| <html><div id="content"><div id="dancedude_container"><!--[if !IE]> --><object classid="java:dancedude.class" type="application/x-java-applet" archive="files/dancedude/dancedude.jar" width="800" height="600"standby="Loading Processing software..." ><param name="archive" value="files/dancedude/dancedude.jar" /><param name="mayscript" value="true" /><param name="scriptable" value="true" /><param name="image" value="loading.gif" /><param name="boxmessage" value="Loading Processing software..." /><param name="boxbgcolor" value="#FFFFFF" /><param name="test_string" value="outer" /><!--<![endif]--><object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" codebase="http://java.sun.com/update/1.4.2/jinstall-1_4_2_12-windows-i586.cab" width="800" height="600" standby="Loading Processing software..."  ><param name="code" value="dancedude" /><param name="archive" value="files/dancedude/dancedude.jar" /><param name="mayscript" value="true" /><param name="scriptable" value="true" /><param name="image" value="loading.gif" /><param name="boxmessage" value="Loading Processing software..." /><param name="boxbgcolor" value="#FFFFFF" /><param name="test_string" value="inner" /><p><strong>This browser does not have a Java Plug-in.<br /><a href="http://java.sun.com/products/plugin/downloads/index.html" title="Download Java Plug-in">Get the latest Java Plug-in here.</a></strong></p></object><!--[if !IE]> --></object><!--<![endif]--></div><p></p></div></html> |
!<<slider resumeSlide 'Resumé' 'My Resumé' "Download and view my resumé">>
<<tiddler ReplaceDoubleClick with: none>>
| <html><p>Screensaver created using Quartz Composer</p><p><a href="http://sribs.blogspot.com/2008/04/rainy-day-2.html">Click Here to go to the Rainy Day homepage.</p><p><img src="images/rainyday2.png"></img></p></a></html> |
/%
!info
|Name|ReplaceDoubleClick|
|Source|http://www.TiddlyTools.com/#ReplaceDoubleClick|
|Version|2.0.0|
|Author|Eric Shulman|
|License|http://www.TiddlyTools.com/#LegalStatements|
|~CoreVersion|2.1|
|Type|transclusion|
|Description|disable doubleclick-to-edit-tiddler or replace doubleclick with shift/ctrl/alt+singleclick|
Usage:
<<<
{{{
<<tiddler ReplaceDoubleClick>> or
<<tiddler ReplaceDoubleClick with: key trigger>>
}}}
*''key'' (optional)
**''none'' (default=disables double-click)
**''ctrl, shift,'' or ''alt'' invokes the action only when the indicated key is used in combination with the mouse.
*''trigger'' (optional)<br>is either 'click' or 'doubleclick' (default).
<<<
Example:
<<<
{{{<<tiddler ReplaceDoubleClick with: shift click>>}}}
<<tiddler ReplaceDoubleClick with: shift click>>//(use shift+click to edit this tiddler)//
<<<
!end
!show
<<tiddler {{
	var here=story.findContainingTiddler(place);
	if (here && here.ondblclick) {
		here.setAttribute('editKey','none');
		var key='$1'; if (key=='$'+'1') key='none'
		if (['shift','ctrl','alt'].contains(key))
			here.setAttribute('editKey',key+'Key');
		var trigger=('$2'=='click')?'onclick':'ondblclick';
		here.save_dblclick=here.ondblclick;
		here.ondblclick=null;
		if (here.getAttribute('editKey')!='none')
			here[trigger]=function(e) {
				var ev=e?e:window.event;
				if (ev[this.getAttribute('editKey')])
					this.save_dblclick.apply(this,arguments);
			}
	}'';}}>>
!end
%/<<tiddler {{var src='ReplaceDoubleClick';src+(tiddler&&tiddler.title==src?'##info':'##show')}} with: [[$1]] [[$2]]>>
| [<img[My Resume in Microsoft Word Format|images/filetypes/Word.png][files/resume/resumeAB09.doc]] | [<img[My Resume in PDF Format|images/filetypes/PDF.png][files/resume/resumeAB09.pdf]] | [<img[My Resume in Apple Pages Format|images/filetypes/Pages.png][files/resume/resumeAB09.pages]] |
| [[Word Document|files/resume/resumeAB09.doc]] | [[PDF Document|files/resume/resumeAB09.pdf]] | [[Pages Document|files/resume/resumeAB09.pages]] |
Interactive Media Portfolio
Aaron Brewer
!<<slider joySlider 'Joy Joggers' 'Joy Joggers' "A project involving a citywide jog in gasmasks and chemical suits">>
<<tiddler ReplaceDoubleClick with: none>>
/*{{{*/
/*Blackicity Theme for TiddlyWiki*/
/*Design and CSS by Saq Imtiaz*/
/*Version 1.0*/
/*}}}*/
/*{{{*/
body{	font-family: "Neue Helvetica", Helvetica, "Lucida Grande", Verdana, sans-serif;
	background-color: #fff;
	color: #333;}

#topMenu {position:relative; background:#282826; padding:10px; color:#fff;font-family:'Lucida Grande', Verdana, Sans-Serif;}
#topMenu br {display:none;}

#topMenu a{			color: #999;
			padding: 0px 8px 0px 8px;
			border-right: 1px solid #444;
}
#topMenu a:hover {color:#fff; background:transparent;}

#displayArea {margin-left:1em; margin-bottom:2em; margin-top:0.3em;}


a, a:hover{
color:#333;
text-decoration: none;   background:transparent; 
}

.viewer a, .viewer a:hover {font-weight:bold;}


.viewer .button, .editorFooter .button{
display:block;
padding:0.3em 0.3em 0.3em 0.3em;
color: #fefefe;
background: #333;
border: 2px solid #fefefe;
}

.viewer .button:hover,
.editorFooter .button:hover, .viewer .button:active, .viewer .highlight,.editorFooter .button:active, .editorFooter .highlight{
display:block;
padding:0.3em 0.3em 0.3em 0.3em;
color: #fefefe;
background: #666;
border: 2px solid #fefefe;
}

.tiddler .viewer {line-height:1.45em;}
.title {color:#222; border-bottom:1px solid#222; font-family:'Lucida Grande', Verdana, Sans-Serif; font-size:1.5em;}
.subtitle, .subtitle a { color: #999999; font-size: 0.95em;margin:0.2em;}
.shadow .title{color:#999;}

.toolbar {font-size:90%;}
.selected .toolbar a {color:#999999;}
.selected .toolbar a:hover {color:#333; background:transparent;border:1px solid #fff;}

.toolbar .button:hover, .toolbar .highlight, .toolbar .marked, .toolbar a.button:active{color:#333; background:transparent;border:1px solid #fff;}

/***
!Sidebar
***/3
#sidebar { margin-bottom:2em !important; margin-bottom:1em; right:0;
}

/***
!SidebarOptions
***/
#sidebarOptions { padding-top:2em;background:#f3f3f3;padding-left:0.5em;}

#sidebarOptions a {
			color:#333;
                        background:#f3f3f3;
                        border:1px solid #f3f3f3;
			text-decoration: none;
}

#sidebarOptions	a:hover, #sidebarOptions a:active {
			color:#222;
			background-color:#fff;border:1px solid #fff;
		}

#sidebarOptions input {border:1px solid #ccc; }

#sidebarOptions .sliderPanel {
	background: #f3f3f3; 	font-size: .9em;
}

#sidebarOptions .sliderPanel input {border: none;}
#sidebarOptions .sliderPanel .txtOptionInput {border:1px solid #999;width:9em;}

#sidebarOptions .sliderPanel a {font-weight:normal; color:#555;background-color: #f3f3f3; border-bottom:1px dotted #333;}


#sidebarOptions .sliderPanel a:hover {
color:#111;
background-color: #f3f3f3;
border:none;
border-bottom:1px dotted #111;
}
/***
!SidebarTabs
***/
 .listTitle {color:#222;}
#sidebarTabs {background:#f3f3f3;}

#sidebarTabs .tabContents {background:#cfcfcf;}

#sidebarTabs .tabUnselected:hover {color:#999;}

#sidebarTabs .tabSelected{background:#cfcfcf;}

#sidebarTabs .tabContents .tiddlyLink, #sidebarTabs .tabContents .button{color:#666;}
#sidebarTabs .tabContents .tiddlyLink:hover,#sidebarTabs .tabContents .button:hover{color:#222;background:transparent; text-decoration:none;border:none;}

#sidebarTabs .tabContents .button:hover, #sidebarTabs .tabContents .highlight, #sidebarTabs .tabContents .marked, #sidebarTabs .tabContents a.button:active{color:#222;background:transparent;}

#sidebarTabs .txtMoreTab .tabSelected,
#sidebarTabs .txtMoreTab .tab:hover,
#sidebarTabs .txtMoreTab .tabContents{
 color: #111;
 background: #f3f3f3;
}

#sidebarTabs .txtMoreTab .tabUnselected {
 color: #555;
 background: #AFAFAF;
}



/***
!Tabs
***/
.tabSelected{color:#fefefe; background:#999;}
 .tabSelected, .tabSelected:hover {
/*display:block;*/
padding:0.3em 0.3em 0.3em 0.3em;
color: #fefefe;
background: #333;
border: 2px solid #fefefe;
}

 .tabUnselected {
/*display:block;*/
padding:0.3em 0.3em 0.3em 0.3em;
color: #fefefe;
background: #666;
border: 2px solid #fefefe;
}
.tabUnselected:hover {text-decoration:none;}
.tabContents {background:#fefefe; padding-left:4px; margin-right:0.3em; text-align: center;}
.tabset {padding: 8px 0.0em 0.0em 0.3em;};
.tab {padding:0.3em 0.3em 0.3em 0.3em;}




.tagging, .tagged {
border: 1px solid #eee;
background-color: #F7F7F7;
}

.selected .tagging, .selected .tagged {
background-color: #f3f3f3;
border: 1px solid #ccc;
}

.tagging .listTitle, .tagged .listTitle {
color: #bbb;
}

.selected .tagging .listTitle, .selected .tagged .listTitle {
color: #333;
}

.tagging .button, .tagged .button {
color:#ccc;
}
.selected .tagging .button, .selected .tagged .button {
color:#aaa;
}

.highlight, .marked {background:transparent; color:#111; border:none; text-decoration:underline;}

.tagging .button:hover, .tagged .button:hover, .tagging .button:active, .tagged .button:active {
border: none; background:transparent; text-decoration:underline; color:#333;
}



.popup {
background: #cfcfcf;
border: 1px solid #333;
}

.popup li.disabled {
color: #000;
}

.popup li a, .popup li a:visited {
color: #555;
border: none;
}

.popup li a:hover {
background: #f3f3f3;
color: #555;
border: none;
}



#messageArea {

border: 4px dotted #282826;
background: #F3F3F3;
color: #333;
font-size:90%;
}

#messageArea a:hover { background:#f5f5f5; border:none;}


#messageArea .button{
color: #333;
border: 1px solid #282826;
}

#messageArea .button:hover {
color: #fff;
background: #282826;
border-color: #282826;
}






.tiddler {padding-bottom:10px;}

.viewer blockquote {
border-left: 5px solid #282826;
}

.viewer table, .viewer td {
border: solid #fff;
background: #cfcfcf;
}

.viewer th, thead td {
background: #282826;
border: 1px solid #282826;
color: #fff;
}
.viewer pre {
border: 1px solid #ccc;
background: #f5f5f5;
}

.viewer code {
color: #111; background:#f5f5f5;
}

.viewer hr {
border-top: dashed 1px #222; margin:0 1em;
}

.editor input {
border: 1px solid #ccc; margin-top:5px;
}

.editor textarea {
border: 1px solid #ccc;
}

/*preload classes*/ 
.svw {width: 50px; height: 20px; background: #fff;} 
.svw ul {position: relative; left: -999em;} 
 
/*core classes*/ 
.stripViewer {  
position: relative; 
overflow: hidden;  
border: 5px solid #ff0000;   
margin: 0 0 1px 0; 
} 
.stripViewer ul { /* this is your UL of images */ 
margin: 0; 
padding: 0; 
position: relative; 
left: 0; 
top: 0; 
width: 1%; 
list-style-type: none; 
} 
.stripViewer ul li {  
float:left; 
} 
.stripTransmitter { 
overflow: auto; 
width: 1%; 
} 
.stripTransmitter ul { 
margin: 0; 
padding: 0; 
position: relative; 
list-style-type: none; 
} 
.stripTransmitter ul li{ 
width: 20px; 
float:left; 
margin: 0 1px 1px 0; 
} 
.stripTransmitter a{ 
font: bold 10px Verdana, Arial; 
text-align: center; 
line-height: 22px; 
background: #ff0000; 
color: #fff; 
text-decoration: none; 
display: block; 
} 
.stripTransmitter a:hover, a.current{ 
background: #fff; 
color: #ff0000; 
}

h1,h2,h3,h4,h5 { color: #282826; border-bottom: none; background: transparent; font-family: Arial, Helvetica, sans-serif; margin-top:0em; margin-bottom:0em; }
h1 {font-size:16px;}
h2 {font-size:16px;padding-left: 1.5em;}
h3 {font-size: 16px;padding-left: 3.0em;}
h4 {font-size: 12px;padding-left: 3.0em;padding-right: 5.0em;}
h5 {font-size: 32px;}
/*}}}*/
/*{{{*/
* html .tiddler {height:1%;}

body {font-size:.75em; font-family:arial,helvetica; margin:0; padding:0;}

h1,h2,h3,h4,h5,h6 {font-weight:bold; text-decoration:none;}
h1,h2,h3 {padding-bottom:1px; margin-top:1.2em;margin-bottom:0.3em;}
h4,h5,h6 {margin-top:1em;}
h1 {font-size:1.35em;}
h2 {font-size:1.25em;}
h3 {font-size:1.1em;}
h4 {font-size:1em;}
h5 {font-size:.9em;}

hr {height:1px;}

a {text-decoration:none;}

dt {font-weight:bold;}

ol {list-style-type:decimal;}
ol ol {list-style-type:lower-alpha;}
ol ol ol {list-style-type:lower-roman;}
ol ol ol ol {list-style-type:decimal;}
ol ol ol ol ol {list-style-type:lower-alpha;}
ol ol ol ol ol ol {list-style-type:lower-roman;}
ol ol ol ol ol ol ol {list-style-type:decimal;}

.txtOptionInput {width:11em;}

#contentWrapper .chkOptionInput {border:0;}

.externalLink {text-decoration:underline;}

.indent {margin-left:3em;}
.outdent {margin-left:3em; text-indent:-3em;}
code.escaped {white-space:nowrap;}

.tiddlyLinkExisting {font-weight:bold;}
.tiddlyLinkNonExisting {font-style:italic;}

/* the 'a' is required for IE, otherwise it renders the whole tiddler in bold */
a.tiddlyLinkNonExisting.shadow {font-weight:bold;}

#mainMenu .tiddlyLinkExisting,
	#mainMenu .tiddlyLinkNonExisting,
	#sidebarTabs .tiddlyLinkNonExisting {font-weight:normal; font-style:normal;}
#sidebarTabs .tiddlyLinkExisting {font-weight:bold; font-style:normal;}

.header {position:relative;}
.header a:hover {background:transparent;}
.headerShadow {position:relative; padding:4.5em 0em 1em 1em; left:-1px; top:-1px;}
.headerForeground {position:absolute; padding:4.5em 0em 1em 1em; left:0px; top:0px;}

.siteTitle {font-size:3em;}
.siteSubtitle {font-size:1.2em;}

#mainMenu {position:absolute; left:0; width:10em; text-align:right; line-height:1.6em; padding:1.5em 0.5em 0.5em 0.5em; font-size:1.1em;}

#sidebar {position:absolute; right:3px; width:16em; font-size:.9em;}
#sidebarOptions {padding-top:0.3em;}
#sidebarOptions a {margin:0em 0.2em; padding:0.2em 0.3em; display:block;}
#sidebarOptions input {margin:0.4em 0.5em;}
#sidebarOptions .sliderPanel {margin-left:1em; padding:0.5em; font-size:.85em;}
#sidebarOptions .sliderPanel a {font-weight:bold; display:inline; padding:0;}
#sidebarOptions .sliderPanel input {margin:0 0 .3em 0;}
#sidebarTabs .tabContents {width:15em; overflow:hidden;}

.wizard {padding:0.1em 1em 0em 2em;}
.wizard h1 {font-size:2em; font-weight:bold; background:none; padding:0em 0em 0em 0em; margin:0.4em 0em 0.2em 0em;}
.wizard h2 {font-size:1.2em; font-weight:bold; background:none; padding:0em 0em 0em 0em; margin:0.4em 0em 0.2em 0em;}
.wizardStep {padding:1em 1em 1em 1em;}
.wizard .button {margin:0.5em 0em 0em 0em; font-size:1.2em;}
.wizardFooter {padding:0.8em 0.4em 0.8em 0em;}
.wizardFooter .status {padding:0em 0.4em 0em 0.4em; margin-left:1em;}
.wizard .button {padding:0.1em 0.2em 0.1em 0.2em;}

#messageArea {position:fixed; top:2em; right:0em; margin:0.5em; padding:0.5em; z-index:2000; _position:absolute;}
.messageToolbar {display:block; text-align:right; padding:0.2em 0.2em 0.2em 0.2em;}
#messageArea a {text-decoration:underline;}

.tiddlerPopupButton {padding:0.2em 0.2em 0.2em 0.2em;}
.popupTiddler {position: absolute; z-index:300; padding:1em 1em 1em 1em; margin:0;}

.popup {position:absolute; z-index:300; font-size:.9em; padding:0; list-style:none; margin:0;}
.popup .popupMessage {padding:0.4em;}
.popup hr {display:block; height:1px; width:auto; padding:0; margin:0.2em 0em;}
.popup li.disabled {padding:0.4em;}
.popup li a {display:block; padding:0.4em; font-weight:normal; cursor:pointer;}
.listBreak {font-size:1px; line-height:1px;}
.listBreak div {margin:2px 0;}

.tabset {padding:1em 0em 0em 0.5em;}
.tab {margin:0em 0em 0em 0.25em; padding:2px;}
.tabContents {padding:0.5em;}
.tabContents ul, .tabContents ol {margin:0; padding:0;}
.txtMainTab .tabContents li {list-style:none;}
.tabContents li.listLink { margin-left:.75em;}

#contentWrapper {display:block;}
#splashScreen {display:none;}

#displayArea {margin:1em 17em 0em 14em;}

.toolbar {text-align:right; font-size:.9em;}

.tiddler {padding:1em 1em 0em 1em;}

.missing .viewer,.missing .title {font-style:italic;}

.title {font-size:1.6em; font-weight:bold;}

.missing .subtitle {display:none;}
.subtitle {font-size:1.1em;}

.tiddler .button {padding:0.2em 0.4em;}

.tagging {margin:0.5em 0.5em 0.5em 0; float:left; display:none;}
.isTag .tagging {display:block;}
.tagged {margin:0.5em; float:right;}
.tagging, .tagged {font-size:0.9em; padding:0.25em;}
.tagging ul, .tagged ul {list-style:none; margin:0.25em; padding:0;}
.tagClear {clear:both;}

.footer {font-size:.9em;}
.footer li {display:inline;}

.annotation {padding:0.5em; margin:0.5em;}

* html .viewer pre {width:99%; padding:0 0 1em 0;}
.viewer {line-height:1.4em; padding-top:0.5em;}
.viewer .button {margin:0em 0.25em; padding:0em 0.25em;}
.viewer blockquote {line-height:1.5em; padding-left:0.8em;margin-left:2.5em;}
.viewer ul, .viewer ol {margin-left:0.5em; padding-left:1.5em;}

.viewer table, table.twtable {border-collapse:collapse; margin:0.8em 1.0em;}
.viewer th, .viewer td, .viewer tr,.viewer caption,.twtable th, .twtable td, .twtable tr,.twtable caption {padding:3px;}
table.listView {font-size:0.85em; margin:0.8em 1.0em;}
table.listView th, table.listView td, table.listView tr {padding:0px 3px 0px 3px;}

.viewer pre {padding:0.5em; margin-left:0.5em; font-size:1.2em; line-height:1.4em; overflow:auto;}
.viewer code {font-size:1.2em; line-height:1.4em;}

.editor {font-size:1.1em;}
.editor input, .editor textarea {display:block; width:100%; font:inherit;}
.editorFooter {padding:0.25em 0em; font-size:.9em;}
.editorFooter .button {padding-top:0px; padding-bottom:0px;}

.fieldsetFix {border:0; padding:0; margin:1px 0px 1px 0px;}

.sparkline {line-height:1em;}
.sparktick {outline:0;}

.zoomer {font-size:1.1em; position:absolute; overflow:hidden;}
.zoomer div {padding:1em;}

* html #backstage {width:99%;}
* html #backstageArea {width:99%;}
#backstageArea {display:none; position:relative; overflow: hidden; z-index:150; padding:0.3em 0.5em 0.3em 0.5em;}
#backstageToolbar {position:relative;}
#backstageArea a {font-weight:bold; margin-left:0.5em; padding:0.3em 0.5em 0.3em 0.5em;}
#backstageButton {display:none; position:absolute; z-index:175; top:0em; right:0em;}
#backstageButton a {padding:0.1em 0.4em 0.1em 0.4em; margin:0.1em 0.1em 0.1em 0.1em;}
#backstage {position:relative; width:100%; z-index:50;}
#backstagePanel {display:none; z-index:100; position:absolute; width:90%; margin:0em 3em 0em 3em; padding:1em 1em 1em 1em;}
.backstagePanelFooter {padding-top:0.2em; float:right;}
.backstagePanelFooter a {padding:0.2em 0.4em 0.2em 0.4em;}
#backstageCloak {display:none; z-index:20; position:absolute; width:100%; height:100px;}

.whenBackstage {display:none;}
.backstageVisible .whenBackstage {display:block;}
/*}}}*/
| <html><div id="content"><div><applet code="Tribilical" archive="files/tribilical/Tribilical.jar" width="640" height="480" mayscript="true"><param name="image" value="loading.gif"><param name="boxmessage" value="Loading Processing software..."><param name="boxbgcolor" value="#FFFFFF"><!-- This is the message that shows up when people don't have Java installed in their browser. Any HTML can go here (i.e. if you wanted to include an image other links, or an anti-Microsoft diatribe. --> To view this content, you need to install Java from <A HREF="http://java.com">java.com</A></applet></div><p>Click to toggle cursor between repel and attract mode </p></div></html> |
<!--{{{-->
<div class='toolbar' macro='toolbar [[ToolbarCommands::ViewToolbar]]'></div>
<div class='title' macro='view title'></div>
<div class='subtitle'></div>
<div class='viewer' macro='view text wikified'></div>
<!--div class='tagClear'></div-->
<!--div class='tagging' macro='tagging'></div-->
<!--div class='tagged' macro='tags'></div-->
<!--}}}-->
| <html><object width='640' height='476'><param name='movie' value='images/various.swf'><embed src='images/various.swf' width='640' height='476'></embed></object><p>Click on image to change slides.</p></html> |