<!--{{{-->
<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]];}
.readOnly {background:[[ColorPalette::TertiaryPale]];}

#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>>

Hello! This is a [[TiddlyWiki|http://tiddlywiki.com]] to create ~PocketBooks, small [[dinky booklets|http://natbat.net/2009/May/21/pocketbooks/]] which are made from a single piece of paper. 

[[Download|TiddlyPocketBook.zip]] a copy of this [[TiddlyWiki|http://tiddlywiki.com]] to save your changes locally.

This version has a few //issues//, notably printing only works in modern browsers which support CSS transforms, such as Safari and Firefox 3.5 beta, for other people, there's a [[PDF|/books/psd/TiddlyWikiPocketBook.pdf]] version of this page to download and instructions on how to fold pocketbooks on [[pocketmod.com|http://pocketmod.com]].
//{{{

merge(config.macros.saveChanges,{
        label: "save",
        prompt: "Save the TiddlyResume",
        accessKey: "S"});

merge(config.macros.selectTheme,{
        label: "theme",
        prompt: "Change the style of the TiddlyResume"});

merge(config.commands.editTiddler,{
	text: "edit",
	tooltip: "Edit this section",
	readOnlyText: "view",
	readOnlyTooltip: "View the source of this section"});

merge(config.commands.saveTiddler,{
	text: "done",
	tooltip: "Save changes to this section"});

merge(config.commands.cancelTiddler,{
	text: "cancel",
	tooltip: "Undo changes to this section",
	warning: "Are you sure you want to abandon your changes to '%0'?",
	readOnlyText: "done",
	readOnlyTooltip: "View this section normally"});

merge(config.commands.deleteTiddler,{
	text: "delete",
	tooltip: "Delete this section",
	warning: "Are you sure you want to delete '%0'?"});

config.messages.backstage = {
        open: {text: "", tooltip: "Open the backstage area to perform authoring and editing tasks"},
        close: {text: "", tooltip: "Close the backstage area"},
        prompt: "backstage: ",
        decal: {
                edit: {text: "edit", tooltip: "Edit the tiddler '%0'"}
        }
};

//}}}
[[1]]
[[2]]
[[3]]
[[4]]
[[5]]
[[6]]
[[7]]
[[8]]
<<saveChanges>><<selectTheme>><<slider chkSliderOptionsPanel OptionsPanel 'options»' 'Change TiddlyPocketBook options'>><<slider chkSliderTiddlyPocketBookPanel TiddlyPocketBook 'help»' 'TiddlyPocketBook help'>>
//{{{

/*
 *  Theme
 */
config.options.txtTheme = "PocketBookTheme";
//config.options.txtTheme = "DinkyBookTheme";
//config.options.txtTheme = "PrintTheme";

/*              
 *  Faster fading messages!
 */
config.options.txtFadingMessagesTimeout = 1;

/*
 *  Backups folder
 */
config.options.txtBackupFolder = "backups";

/*
 *  Hide backstage
 */
config.options.chkBackstage = false;

/*
 *  calculate a fixed width container for pages
 */
config.options.txtFlexiWidthContainer = '#displayArea';
config.options.txtFlexiWidthBox = '#tiddler1 > .page:first';
config.options.txtFlexiWidthMinBoxes = '1';
config.options.txtFlexiWidthMaxBoxes = '4';

//}}}
a TiddlyWiki for your pocket
~TiddlyPocketBook
http://tiddlypocketbook.com/
/*{{{*/

body {
	background-color: [[ColorPalette::BodyBackground]];	
	color: [[ColorPalette::TextColor]];
	font-size: 100%;
	font-family: Georgia, serif;
}

#caveat {
	font-family: Helvetica, Arial, sans-serif;
	background-color: #F88;
	color: #FFF;
	padding: 0.5em;
	text-align: center;
	border-top: 1px #FFF solid;
	border-bottom: 1px #FFF solid;
}

#controlBar {
	background-color: [[ColorPalette::MenuBackground]];
	border-bottom: solid 1px [[ColorPalette::MenuBorder]];
	color: [[ColorPalette::MenuText]];
	font-size: 0.8em;
	padding-left: 1em;
	padding-bottom: 0.2em;
}

#controlBar a {
	color: [[ColorPalette::MenuText]];
	border-style: none;
	margin-right: 2em;
}

#controlBar a:hover {
	color: [[ColorPalette::MenuTextHover]];
	background-color: [[ColorPalette::MenuBackground]];
}

#controlBar div.sliderPanel {
	color: [[ColorPalette::MenuText]];
	margin: 2em 2em;
}

#controlBar div.sliderPanel a {
	margin-right: 0;
}

#backstageButton a {
	color: [[ColorPalette::MenuText]];
}

#messageArea {
	border: none;
	background: transparent;
	padding-top: 15px;
}

#messageArea .messageBox {
	position: fixed;
	top: 1.1em; 
	right: 0;
	margin: 0.5em;
	padding: 0.5em;
	z-index: 2000;
	_position: absolute;
	font-family: Helvetica, Arial, sans-serif;
	border: 1px solid [[ColorPalette::MessageBoxBorder]];
	background: [[ColorPalette::MessageBoxBackground]]; 
	width: 12em;
	padding: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	filter: alpha(opacity=90%);
}

#messageArea .messageText {
	display: block;
	width: 12em;
	margin: 0;
	padding: 0;
	color: [[ColorPalette::MessageBoxForeground]];
}

#messageArea .messageText a {
	text-decoration: none;
	color: [[ColorPalette::MessageBoxForeground]];
}

#messageArea .messageClear {
	display: none;
}

#mainMenu {
	display: none;
}

#header {
	padding: 0px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
}

#footer {
	clear: both;
	padding: 1em;
}

.siteTitle {
	display: block;
	color: [[ColorPalette::SiteTitle]];
	background-color: [[ColorPalette::HeaderBackground]];
	padding: 20px 0px 20px 0px;
	font-size: 3em;
	font-weight: bold;
	font-style: italic;
	letter-spacing: 2px;
	text-align: center;
}

#mainArea {
	margin-left: auto;
	margin-right: auto;
}

#displayArea {
	display: inline-block; /* IE bugfix: give layout (hasLayout = true) */
}

#displayArea {
	display: block; /* restore proper behavior (see IE bugfix above) */
	background-color: [[ColorPalette::PaperShadow]];
	margin: 0.5em auto 0.5em auto;
}

.tiddler div.toolbar {
	margin: 0;
	padding: 0 0 0 0;
	height: 0.1em;
	display: block;
	float: right;
}

.tiddler {
	padding: 0 0 0 0;
}

.selected div.toolbar,
.editor div.toolbar {
	visibility: visible;
}

.editor > .tags {
	display: none;
}

.editor {
	border: thin solid [[ColorPalette::EditorBorder]];
	padding: 1em;
}

.profile  > .title {
	display: none;
}

.hint {
	color: [[ColorPalette::MenuText]];
	font-size: 0.8em;
}

.label {
	padding-top: 1em;
}

.label:after {
	content: ":";
}

li.selected a {
	font-weight: bold;
}

textarea {
	width: 99%;
	height: 300px;
	display: block;
	margin-top: 4em;
}

.page {
	background: [[ColorPalette::PageBackground]];
	width: 74mm;
	height: 105mm;
	margin: 3mm;
	overflow: hidden;
	outline: 1px solid #C7C7C7;
	float: left;
	font-size: 13px;
}

.page div.title {
	width: 2em;
	display: inline;
}


.inner {
	margin: 4mm 4mm 2mm 4mm;
}

hr {
	border: none;
	border-bottom: 2px dotted [[ColorPalette::TertiaryLight]];
	height: 2px;
}

.amp {
	font-family: "Baskerville", "Bell MT", "Adobe Caslon Pro", "Goudy Old Style";
	font-style: italic;
	font-weight: normal;
	font-size: 1.3em;
	line-height: 0.7;
	margin: 0 0.2em 0 0.1em;
}

.tiddler h1 {
	font-size: 1.5em;
}

.tiddler h1,
.tiddler h2,
.tiddler h3 {
	margin-top: 0.8em;
	color: #511;
}

h1 span {
	font-size: 0.6em;
	line-height: 1em;
	color: #999;
	display: block;
	margin-bottom: 0.3em;
}

table.twtable {
	width: 100%;
	border-top: 1px solid #888;
	border-bottom: 1px solid #888;
	border-left: none;
	border-right: none;
	margin-left: 0mm;
}

.twtable th {
	background-color: #111;
	font-weight: normal;
}

.twtable th,
.twtable tr,
.twtable td {
	border: none;
}


.twtable .evenRow {
	background-color: #e8e8e8;
}

.twtable .oddRow {
	background-color: #f8f8f8;
}

/*}}}*/
/*{{{*/
@media print {
body { 
	background-color: #FFF;
}

#header,
#caveat,
#controlBar,
#mainMenu,
#sidebar,
#messageArea,
.toolbar,
#backstageButton,
#backstageArea { 
	display: none ! important; 
}

[[StyleSheetPrintPage]]

}
/*}}}*/
[[StyleSheetPrintA4]]
body { 
	background-color: #FFF;
}

#book {
	position: relative;
	height: 296mm;
	width: 210mm;
	margin: 0;
	margin-left: 1mm;
}

.tiddler, .page {
	position: absolute;
	float: none;
	margin: 0 ! important; 
	padding: 0 ! important;
	width: 74mm;
	height: 105mm;
	overflow: hidden;
	outline: 1px solid #C7C7C7;
}

/* rotated left */
#tiddler1,
#tiddler8,
#tiddler7,
#tiddler6 {
	-webkit-transform: translate(15.5mm, -15.5mm) rotate(-90deg);
	-moz-transform: translate(15.5mm, -15.5mm) rotate(-90deg);
}

/* rotated right */
#tiddler2,
#tiddler3,
#tiddler4,
#tiddler5 {
	-webkit-transform: translate(-15.5mm, -15.5mm) rotate(90deg);
	-moz-transform: translate(-15.5mm, -15.5mm) rotate(90deg);
}	
/* cover */
#tiddler1 {
	top: 0.1mm;
	left: 0.1m;
}
#tiddler2 {
	top: 0.1mm;
	right: 0.1mm;
}
#tiddler3 {
	top: 74.3mm;
	right: 0.1mm;
}
#tiddler4 {
	top: 148.6mm;
	right: 0.1mm;
}
#tiddler5 {
	top: 222.9mm;
	right: 0.1mm;
}
#tiddler6 {
	top: 222.9mm;
	left: 0.1mm;
}
#tiddler7 {
	top: 148.6mm;
	left: 0.1mm;
}
/* back page */
#tiddler8 {
	top: 74.3mm;
	left: 0.1mm;
}

/*}}}*/
/*{{*/
body { 
        background-color: #FFF; 
} 

#book { 
        position: relative; 
        height: 279mm; 
        width: 216mm; 
        margin: 0; 
        margin-left: 1mm; 
} 

.tiddler, .page { 
        position: absolute; 
        float: none; 
        margin: 0 ! important; 
        padding: 0 ! important; 
        height: 108mm; 
        width: 69.7mm; 
        overflow: hidden; 
        outline: 1px solid #C7C7C7; 
} 

/* rotated left */ 
#tiddler1, 
#tiddler8, 
#tiddler7, 
#tiddler6 { 
        -moz-transform: translate(19.2mm, -19.2mm) rotate(-90deg); 
} 

/* rotated right */ 
#tiddler2, 
#tiddler3, 
#tiddler4, 
#tiddler5 { 
        -moz-transform: translate(-19.2mm, -19.2mm) rotate(90deg); 
} 

/* cover */ 
#tiddler1 { 
        top: 0.1mm; 
        left: 0.1m; 
} 

#tiddler2 { 
        top: 0.1mm; 
        right: 0.1mm; 
} 

#tiddler3 { 
        top: 70.0mm; 
        right: 0.1mm; 
} 

#tiddler4 { 
        top: 140.0mm; 
        right: 0.1mm; 
} 

#tiddler5 { 
        top: 210.0mm; 
        right: 0.1mm; 
} 

#tiddler6 { 
        top: 210.0mm; 
        left: 0.1mm; 
} 

#tiddler7 { 
        top: 140.0mm; 
        left: 0.1mm; 
} 

/* back page */ 
#tiddler8 { 
        top: 70.0mm; 
        left: 0.1mm; 
} 

/*}}}*/ 
{{{

BodyBackground: #FFF
HeaderBackground: #111
PageBackground: #FFF

SiteTitle: #FFF

MenuText: #888
MenuBorder: #333
MenuTextHover: #FFF
MenuBackground: #000

PaperBackground: #FFF
PaperBorder: #222
PaperShadow: #EEE
PaperColor: #000

EditorBackground: #888
EditorBorder: #222

MessageBoxBorder: #222
MessageBoxBackground: #222
MessageBoxForeground: #FFF
MessageBoxClose: #FFF

TextColor: #000

Background: #fff
Foreground: #000
PrimaryPale: #EEE
PrimaryLight: #18f
PrimaryMid: #444
PrimaryDark: #014
SecondaryPale: #ffc
SecondaryLight: #fe8
SecondaryMid: #db4
SecondaryDark: #841
TertiaryPale: #eee
TertiaryLight: #ccc
TertiaryMid: #999
TertiaryDark: #666
Error: #f88

}}}
<!--{{{-->
<div>
        <div id='controlBar' tiddler='MainMenu' refresh='content'></div>
        <div id='header'><span class='siteTitle' refresh='content' tiddler='SiteTitle'></span></div>
        <div id='messageArea'></div>
	<div id='book'><div id='mainArea'><div id='displayArea'><div id='tiddlerDisplay'></div></div></div>
	<div id='footer'></div>
</div>
<!--}}}-->
<!--{{{-->
<div class="page">
<div class='toolbar' macro='toolbar +saveTiddler -cancelTiddler'></div>
<div class='inner' macro='edit text 20'></div>
</div>
<!--}}}-->
<!--{{{-->
<div class="page">
<div class='toolbar' macro='toolbar +editTiddler'></div>
<div class='inner' macro='view text wikified'></div>
</div>
<!--}}}-->
These interface options for customising TiddlyPocketBook are saved in your browser:

<<option chkAnimate>> EnableAnimations
<<option chkSaveBackups>> SaveBackupCopies

/***
|''Name:''|WikifiedMessagesPlugin|
|''Description:''|Wikify displayMessage text  |
|''Author:''|PaulDowney (psd (at) osmosoft (dot) com) |
|''Source:''|http://whatfettle.com/2008/07/WikifiedMessagesPlugin/ |
|''CodeRepository:''|http://svn.tiddlywiki.org/Trunk/contributors/PaulDowney/plugins/WikifiedMessagesPlugin/ |
|''Version:''|0.4|
|''License:''|[[BSD License|http://www.opensource.org/licenses/bsd-license.php]] |
|''Comments:''|Please make comments at http://groups.google.co.uk/group/TiddlyWikiDev |
|''~CoreVersion:''|2.4|
!!Documentation
A plugin to replace the core displayMessage function with a version which wikifies the message text.
The construction of the [close] single message and [close all] buttons has been seperated to be overrideable and the created message div is returned by displayMessage, for extensibility by other plugins.
!!Code
***/
//{{{
if(!version.extensions.WikifiedMessagesPlugin) {
version.extensions.WikifiedMessagesPlugin = {installed:true};

	if(!config.extensions){
		config.extensions = {};
	}

	config.extensions.WikifiedMessages = {

		createClearAllButton: function(msgArea)
		{
			return (msgArea.hasChildNodes())? null :
				createTiddlyButton(createTiddlyElement(msgArea,"div",null,"messageToolbar"),
					config.messages.messageClose.text,
					config.messages.messageClose.tooltip,
					clearMessage);
		},
		createClearMessageButton: function(e)
		{
			return null;
		},
		getMessageDiv: function()
		{
			var msgArea = document.getElementById("messageArea");
			var me = config.extensions.WikifiedMessages;
			if(!msgArea){
				return null;
			}
			msgArea.style.display = "block";
			me.createClearAllButton(msgArea);
			e = createTiddlyElement(msgArea,"div",null,"messageBox");
			me.createClearMessageButton(e);
			return e;
		},
		displayMessage: function(text,linkText)
		{
			var e = getMessageDiv();
			if(!e) {
				alert(wikifyPlain(text));
				return null;
			}
			if(linkText) {
				text = "[["+text+"|"+linkText+"]]";
			}
			t = createTiddlyElement(e,"span",null,"messageText");
			t.innerHTML = wikifyStatic(text);
			return e;
		}
	};

	displayMessage = config.extensions.WikifiedMessages.displayMessage;
	getMessageDiv = config.extensions.WikifiedMessages.getMessageDiv;

        // macro, useful for testing
        config.macros.DisplayMessage = {
                handler: function(place,macroName,params,wikifier,paramString,tiddler){
                        displayMessage(paramString);
                }
        };
}
//}}}
/***
|''Name:''|FadingMessagesPlugin|
|''Description:''|Automatically clear a displayed message after an interval |
|''Author:''|PaulDowney (psd (at) osmosoft (dot) com) |
|''Source:''|http://whatfettle.com/2008/07/FadingMessagesPlugin/ |
|''CodeRepository:''|http://svn.tiddlywiki.org/Trunk/contributors/PaulDowney/plugins/FadingMessagesPlugin/ |
|''Version:''|0.2|
|''License:''|[[BSD License|http://www.opensource.org/licenses/bsd-license.php]] |
|''Comments:''|Please make comments at http://groups.google.co.uk/group/TiddlyWikiDev |
|''~CoreVersion:''|2.4|
|''Overrides:''|displayMessage|
|''Requires:''|WikifiedMessagesPlugin|
!!Documentation
Displayed messages automatically fade away after a short interval. 
!!Options
|<<option txtFadingMessagesTimeout>>|<<message config.optionsDesc.txtFadingMessagesTimeout>>|
|<<option chkAnimate>>|<<message config.optionsDesc.chkAnimate>>|
!!Code
***/
//{{{
if(!version.extensions.FadingMessagesPlugin) {
version.extensions.FadingMessagesPlugin = {installed:true};

	config.options.txtFadingMessagesTimeout = 5;
	config.optionsDesc.txtFadingMessagesTimeout = "seconds before a displayed message clears itself";

	config.animDurationFade = 900;

	config.extensions.FadingMessages = {
		Fader: function(e,done)
		{
			e.style.overflow = 'hidden';
			e.style.display = 'block';
			var p = [];
			p.push({style: 'display', atEnd: 'none'});
			p.push({style: 'opacity', start: 1, end: 0, template: '%0'});
			p.push({style: 'filter', start: 100, end: 0, template: 'alpha(opacity:%0)'});
			return new Morpher(e,config.animDurationFade,p,done);
		},  
		clearMessageBox: function(e)
		{
			try { removeNode(e); } catch(ex) {}
			var msgArea = document.getElementById("messageArea");
			var n = msgArea.getElementsByTagName('div');
			if(!(n&&n.length)){
				msgArea.style.display = "none";
			}
		},
		fadeMessageBox: function(e)
		{
			var me = config.extensions.FadingMessages;
			if(config.options.chkAnimate && anim){
				anim.startAnimating(new me.Fader(e,me.clearMessageBox));
			}else{
				me.clearMessageBox(e);
			}
		},
		createClearAllButton: function(e)
		{
			return null;
		},
		createClearMessageButton: function(e)
		{
			var me = config.extensions.FadingMessages;
			return createTiddlyButton(createTiddlyElement(e,"span",null,"messageClear"),
				"×","",
				function(){me.clearMessageBox(e);});
		},
		_displayMessage: displayMessage,
		displayMessage: function(text,linkText)
		{
			var me = config.extensions.FadingMessages;
			var e = me._displayMessage(text,linkText);
			if(e){
				window.setTimeout(function(){me.fadeMessageBox(e);},config.options.txtFadingMessagesTimeout*1000);
			}
			return e;
		}
	};

	displayMessage = config.extensions.FadingMessages.displayMessage;
	config.extensions.WikifiedMessages.createClearMessageButton = config.extensions.FadingMessages.createClearMessageButton;
	config.extensions.WikifiedMessages.createClearAllButton = config.extensions.FadingMessages.createClearAllButton;
}
//}}}
/*{{{*/
#messageArea {
	border:none;
	background: transparent;
}

#messageArea .messageBox {
	border:2px solid [[ColorPalette::SecondaryMid]];
	color:[[ColorPalette::Foreground]];
	background:[[ColorPalette::SecondaryLight]]; 
	width:20em;
	padding:10px;
	margin-top:0px;
	margin-bottom:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	filter:alpha(opacity=80);
}

#messageArea .messageText {
	display:block;
	width:15em;
	margin:0;
	padding:0;
}

#messageArea .messageClear {
	display:block;
	float:right;
	width:1em;
}

#messageArea .messageClear a {
	text-decoration:none;
	background-color: transparent;
	color:[[ColorPalette::Foreground]];
}

/*}}}*/
/***
|''Name:''|BackstageTiddlersPlugin|
|''Description:''|Adds a backstage panel allowing easy access to all tiddlers|
|''Author:''|JeremyRuston|
|''Source:''|http://www.osmosoft.com/#BackstageTiddlersPlugin |
|''CodeRepository:''|http://svn.tiddlywiki.org/Trunk/contributors/JeremyRuston/plugins/BackstageTiddlersPlugin.js |
|''Version:''|0.0.1|
|''Date:''|Feb 28, 2008|
|''Comments:''|Please make comments at http://groups.google.co.uk/group/TiddlyWikiDev |
|''License:''|[[BSD License|http://www.opensource.org/licenses/bsd-license.php]] |
|''~CoreVersion:''|2.3|

***/

//{{{
if(!version.extensions.BackstageTiddlersPlugin) {

version.extensions.BackstageTiddlersPlugin = {installed:true};

config.tasks.tiddlers = {
	text: "tiddlers",
	tooltip: "Access the raw tiddlers",
	content: "<<tabs txtMainTab 'Timeline' 'Timeline' TabTimeline 'All' 'All tiddlers' TabAll 'Tags' 'All tags' TabTags 'More' 'More lists' TabMore>>"};
config.backstageTasks.push("tiddlers");

} //# end of 'install only once'
//}}}
/***
|''Name:''|ThemeSwitcherPlugin|
|''Description:''|Theme Switcher|
|''Author:''|Martin Budden|
|''Source:''|http://www.martinswiki.com/#ThemeSwitcherPlugin |
|''~CodeRepository:''|http://svn.tiddlywiki.org/Trunk/contributors/MartinBudden/plugins/ThemeSwitcherPlugin.js |
|''Version:''|0.0.10|
|''Status:''|Not for release - still under development|
|''Date:''|Oct 31, 2007|
|''Comments:''|Please make comments at http://groups.google.co.uk/group/TiddlyWikiDev |
|''License:''|[[Creative Commons Attribution-ShareAlike 2.5 License|http://creativecommons.org/licenses/by-sa/2.5/]] |
|''~CoreVersion:''|2.3|

!!Description
This plugin defines a theme selector button that allows you to select a theme from a list of tiddlers tagged with "systemTheme".

!!Usage
Include
{{{<<selectTheme>>}}}
in any tiddler to create a select theme button.

***/

//{{{
if(!version.extensions.ThemeSwitcherPlugin) {
version.extensions.ThemeSwitcherPlugin = {installed:true};

config.macros.selectTheme = {
	label: "select theme",
	prompt: "Select the current theme"
};

config.macros.selectTheme.handler = function(place)
{
	createTiddlyButton(place,this.label,this.prompt,this.onClick);
};

config.macros.selectTheme.onClick = function(ev)
{
	var e = ev ? ev : window.event;
	var popup = Popup.create(this);
	var tiddlers = store.getTaggedTiddlers('systemTheme');
	for(var i=0; i<tiddlers.length; i++) {
		var t = tiddlers[i].title;
		var name = store.getTiddlerSlice(t,'Name');
		var desc = store.getTiddlerSlice(t,'Description');
		var className = config.options.txtTheme==t ? 'selected' : null;
		var btn = createTiddlyButton(createTiddlyElement(popup,'li',null,className),name ? name : t,desc ? desc : config.macros.selectTheme.label,config.macros.selectTheme.onClickTheme);		btn.setAttribute('theme',t);
	}
	Popup.show();
	return stopEvent(e);
};

config.macros.selectTheme.onClickTheme = function(ev)
{
	story.switchTheme(this.getAttribute('theme'));
	return false;
};
} //# end of 'install only once'
//}}}
/***
|''Name:''|ThemeSwitchRefreshPlugin|
|''Description:''|Force a refresh on switching a theme, even when the default View or Edit template hasn't been changed |
|''Author:''|PaulDowney (psd (at) osmosoft (dot) com)|
|''CodeRepository:''|http://svn.tiddlywiki.org/Trunk/contributors/PaulDowney/plugins/ThemeSwitchRefreshPlugin |
|''Version:''|0.1|
|''License:''|[[BSD License|http://www.opensource.org/licenses/bsd-license.php]] |
|''Comments:''|Please make comments at http://groups.google.co.uk/group/TiddlyWikiDev |
|''~CoreVersion:''|2.4|
|''Overrides''|Story.prototype.swtichTheme() |
!!Documentation
The core Story.themeSwitch function has an optimization to avoid refreshing the story when the View or Edit templates haven't been altered. This causes issues with plugins which extend the chooseTemplateForTiddler functionality, such as the TaggedTemplateTweak and TaggedTemplatePlugin.
This plugin refreshes the page and story on a theme switch, regardless of the templates defined.
!!Code
***/
//{{{
if(!version.extensions.ThemeSwitchRefreshPlugin) {
version.extensions.ThemeSwitchRefreshPlugin = {installed:true};

Story.prototype._themeSwitchRefresh_switchTheme = Story.prototype.switchTheme;
Story.prototype.switchTheme = function(theme)
{
	this._themeSwitchRefresh_switchTheme.apply(this,arguments);
	//TBD: be canny to see if the theme contained a View or Edit template and avoid this:
	refreshAll();
	this.refreshAllTiddlers(true);
};
}
//}}}
/***
|''Name:''|FlexiWidthPlugin|
|''Description:''|Dynamically build a fixed width container for centering floating tiddlers|
|''Author:''|PaulDowney (psd (at) osmosoft (dot) com) |
|''Source:''|http://whatfettle.com/2008/07/FlexiWidthPlugin/ |
|''CodeRepository:''|http://svn.tiddlywiki.org/Trunk/contributors/PaulDowney/plugins/FlexiWidthPlugin/ |
|''Version:''|0.1|
|''License:''|[[BSD License|http://www.opensource.org/licenses/bsd-license.php]] |
|''Comments:''|Please make comments at http://groups.google.co.uk/group/TiddlyWikiDev |
|''~CoreVersion:''|2.5|
!!Documentation
For an example of this plugin in use, see http://tiddlypocketbook.com

!!Options
|<<option txtFlexiWidthContainer>>|<<message config.optionsDesc.txtFlexiWidthContainer>>|
|<<option txtFlexiWidthBox>>|<<message config.optionsDesc.txtFlexiWidthBox>>|
|<<option txtFlexiWidthMinBoxes>>|<<message config.optionsDesc.txtFlexiWidthMinBoxes>>|
|<<option txtFlexiWidthMaxBoxes>>|<<message config.optionsDesc.txtFlexiWidthMaxBoxes>>|

!!Code
***/
//{{{
if(!version.extensions.FlexiWidthPlugin) {
version.extensions.FlexiWidthPlugin = {installed:true};

	config.optionsDesc.txtFlexiWidthContainer = 'selector for div containing tiddlers';
	config.options.txtFlexiWidthContainer = '#displayArea';

	config.optionsDesc.txtFlexiWidthBox = 'selector for contained boxes, to be centered inside the containg div';
	config.options.txtFlexiWidthBox = '#displayArea > .page';

	config.optionsDesc.txtFlexiWidthMinBoxes = 'minimum number of tiddlers on a row';
	config.options.txtFlexiWidthMinBoxes = '1';

	config.optionsDesc.txtFlexiWidthMaxBoxes = 'maximum number of tiddlers on a row';
	config.options.txtFlexiWidthMaxBoxes = '4';
	config.extensions.FlexiWidth = {};

	config.extensions.FlexiWidth.setWidth = function() {
		var container = jQuery(config.options.txtFlexiWidthContainer);
		var box = jQuery(config.options.txtFlexiWidthBox);
		var minBoxes = config.options.txtFlexiWidthMinBoxes;
		var maxBoxes = config.options.txtFlexiWidthMaxBoxes;

		// may be simplified with outerWidth when provided by TiddlyWiki jQuery core
		var boxWidth = 1 + box.width()
			+ parseInt(box.css("padding-left"),10) 
			+ parseInt(box.css("padding-right"),10)
			+ parseInt(box.css("margin-left"),10)
			+ parseInt(box.css("margin-right"),10)
			+ parseInt(box.css("borderLeftWidth"),10)
			+ parseInt(box.css("borderRightWidth"),10);
		var nBoxes = parseInt(jQuery(window).width()/boxWidth,10);
		nBoxes = (nBoxes > maxBoxes) ? maxBoxes : 
			(nBoxes < minBoxes) ? minBoxes : 
			nBoxes;

		return container.width(nBoxes*boxWidth);
	};

	/*
	 *  on TiddlyWiki ready
	 */
	config.extensions.FlexiWidth.__restart = window.restart;
	window.restart = function(){
		window.config.extensions.FlexiWidth.__restart();
		config.extensions.FlexiWidth.setWidth();
		jQuery(window).resize(config.extensions.FlexiWidth.setWidth);
	}

	/*
	 * on TiddlyWiki refresh
	 */
	config.extensions.FlexiWidth.__refreshAll = refreshAll;
	refreshAll = function(){
		config.extensions.FlexiWidth.__refreshAll();
		config.extensions.FlexiWidth.setWidth();
	}
}
//}}}
|''~StyleSheet''|##StyleSheet|

!StyleSheet
/*{{{*/
[[StyleSheet]]

/* 
 *  Theme based on Natalie Downe's Dinky Pocket Books, the inspiration for TiddlyPocketBook:
 *
 *  git clone git://github.com/natbat/pocketbook.git
 */

#book {
	font-family: "helvetica neue", arial, helvetica, sans-serif;	
	font-size: 14px;
}

.inner {
	line-height: 0.1em;
}

pre, code, kbd, tt, samp, tt {
	font-family: "andale mono", monospace;
	line-height: 1.5em;
	font-color: #333;
}

pre {
	white-space: pre;
	width: 100%;
	font-size: 0.7em;
	overflow: hidden;
	border-top: 3px double #C7C7C7;
	border-bottom: 3px double #C7C7C7;
	padding: 0.5em 0;
}

p, ul, ol, dl, address, table, pre, form, fieldset {
	font-size: 1em /* 14px */;
	margin-bottom: 0.5em; 
}

h1 {
	font-size: 2.571em /* 36px */;
	line-height:1em /* 36px */;
	margin-top:0.1667em /* 6px */;
	margin-bottom:0.5833em /* 21px */;
	color: #000;
}

h1 span {
	font-size: 0.5em;
	line-height: 1em;
	color: #999;
	display: block;
	margin-bottom: 0.3em;
}

h2, h3 {
	font-size:1.143em /* 16px */;
	margin-top:0;
	padding-bottom: 0.5em;
	margin-bottom:0.5em /* 8px */; 
	text-align: center;
	border-bottom: 1px solid #999;
	color: #000;
}

.amp {
	font-family: "Bell MT", "Adobe Caslon Pro", "Goudy Old Style";
	font-style: italic;
	font-size: 1.3em;
	line-height: 0.7;
	margin: 0 0.2em 0 0.1em;
}

.micro p,
.micro h3,
.micro h4,
.micro h5,
.micro h6,
h3.micro,
h4.micro,
h5.micro,
h6.micro,
p.micro,
span.micro {
	font-size: 0.7em;
	line-height: 1.5em;
	display: block;
}

.lines hr {
	padding-bottom: 0.5em;
}

/*}}}*/
|''~StyleSheet''|##StyleSheet|

!StyleSheet
/*{{{*/
[[StyleSheet]]
/*}}}*/
|''~StyleSheet''|##StyleSheet|

!StyleSheet
/*{{{*/
[[StyleSheet]]
[[StyleSheetPrintA4]]

/*}}}*/
!{{sub{~TiddlyPocketBook}}} ~TiddlyWiki
TiddlyWiki is a wiki in a single HTML document containing all of the content along with the ability to edit,  save changes, tag and search. Open Source, it's readily tailored using templates, style-sheets, macros and plugins. 

TiddlyWiki is very portable -- running offline as well as from the Web, and easily passed via Email and USB sticks.
|Download| tiddlywiki.com|
|Community| tiddlywiki.org|
|Developers| trac.tiddlywiki.org|
|Discussion| tiddlywiki.org/wiki/Groups|
|Chat| freenode #~TiddlyWiki|
|<html><a rel="license" href="http://creativecommons.org/licenses/by/2.0/uk/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/2.0/uk/80x15.png" width="70"/></a></html>| 2011  osmosoft.com|
!!Linking {{amp{&amp;}}} Embedding
{{{WikiWord}}}
{{{~EscapedWikiWord}}}
{{{[[Wiki Word With Spaces]]}}} 
{{{[[display text|WikiWord]]}}}
{{{[[display text|URL]]}}}
{{{[img[title text|URL]]}}}
!!Formatting
{{{''Bold text''}}}
{{{//Italic text//}}}
{{{__Underlined text__}}}
{{{--Strikethrough text--}}}
{{{~~Subscripted text~~}}}
{{{^^Superscripted text^^}}}
{{{@@Highlighted text@@}}}
<html><code>{{{Monospaced text}}}</code></html>

"""{{{"""
{{{Preformatted text}}}
"""}}}"""
!!Dashes {{amp{&amp;}}} Rules
{{{--}}}  Em dash
{{{----}}} Horizontal rule
!!Headings
{{{!Heading Level 1}}}
{{{!!Heading Level 2}}}
{{{!!!Heading Level 3}}}
!!Lists
{{{#Ordered List Level 1}}}
{{{##Ordered List Level 2}}}
{{{###Ordered List Level 3}}}

{{{*Unordered List Level 1}}}
{{{**Unordered List Level 2}}}
{{{***Unordered List Level 3}}}

{{{;Definition List Title}}}
{{{:Definition List Definition}}}
!!Tables
{{{|Table caption|c}}}
{{{|Heading 1|Heading 2|h}}}
{{{|Table|Footer|f}}}
{{{|!Heading 1|!Heading 2|}}}
{{{| Centered |cell|}}}
{{{|Left-Aligned |cell|}}}
{{{| Right-Aligned|cell|}}}
{{{|bgcolor(blue):Coloured|cell|}}}
{{{|>|Colspan cell|}}}
{{{|Rowspan|cells|}}}
{{{|~|~|}}}
!!Block Quotations
{{{<<<}}}
{{{blockquoted text}}}
{{{<<<}}}

{{{>Blockquote Level 1}}}
{{{>>Blockquote Level 2}}}
{{{>>>Blockquote Level 3}}}
!!Escaping 
{{{"""Escaped text"""}}}
{{{/%Hidden text%/}}}
!!Markup{{amp{&amp;}}} Styling
{{{&amp;}}} -- HTML entity
{{{&#171;}}} -- Character entity
{{{<br>}}} -- Line break
{{{<}}}{{{html}}}{{{>HTML markup</}}}{{{html}}}{{{>}}}

{{{@@}}}//css//{{{:}}}//value//{{{;}}}//css//{{{:}}}//value//{{{:}}}//text//{{{@@}}}
{{{{{}}}//class//{{{{styled text}}}}}}
!!Macros
{{{<<today [}}}//format//{{{]>>}}}
{{{<<version>>}}}
{{{<<tiddler }}}//~WikiWord//{{{>}}}
{{{<<tabs }}}//id label tip ~WikiWord// &#x2026;{{{>>}}}
{{{<<slider }}}//id ~WikiWord label tip//{{{>>}}}
 
!!Listing {{amp{&amp;}}} Tagging Macros
{{{<<timeline [}}}//date//{{{][}}}//len//{{{][}}}//format//{{{]>>}}}
{{{<<list [all|missing|default|}}}
&nbsp; &nbsp; &nbsp; {{{orphans|shadowed|touched|}}}
&nbsp; &nbsp; &nbsp; //filter//{{{>>}}}

{{{<<allTags>>}}}
{{{<<tag }}}//name//{{{ [}}}//label//{{{] [}}}//tip//{{{]>>}}}
{{{<<tags [}}}//WikiWord//{{{]>>}}}
{{{<<tagging [}}}//tag//{{{]>>}}}
!!Button Macros
{{{<<newJournal [}}}//format//{{{]>>}}}
{{{<<newTiddler label:}}}//WikiWord//
&nbsp; &nbsp; {{{text:"}}}//text//{{{" tag:}}}//tag//{{{ tag:}}}//tag//
&nbsp; &nbsp; {{{accessKey:}}}//key//{{{ focus:}}}//field//{{{>>}}}
{{{<<saveChanges [}}}//label//{{{] [}}}//tip//{{{]>>}}}
{{{<<search [}}}//term//{{{]>>}}}
{{{<<closeAll>>}}}
{{{<<permaview>>}}}
!!Date Format
{{{DDD}}} -- full day of week
{{{ddd}}} -- short day of week
{{{DD}}} -- day of month
{{{0DD}}} -- adds leading zero
{{{DDth}}} -- adds suffix
{{{WW}}} -- ~ISO-8601 week number
{{{MMM}}} -- full month
{{{mmm}}} -- short month 
{{{MM}}} -- month number
{{{0MM}}} -- leading zero
{{{YYYY}}} -- full year
{{{YY}}} -- two digit year
{{{wYY}}} with week number
{{{hh}}} -- hours
{{{0hh}}} -- leading zero
{{{hh12}}} -- hours in 12 hour clock
{{{mm}}} -- minutes
{{{0mm}}} -- leading zero
{{{ss}}} -- seconds
{{{0ss}}} -- leading zero
{{{am}}} or {{{pm}}} or {{{AM}}} or {{{PM}}} -- indicator
!!Startup Parameters
{{{#[open:]}}}//WikiWord//
{{{#[open:]}}}//WikiWord//{{{%20}}}//WikiWord//&#x2026;
{{{#start:safe}}}
{{{#search:}}}//text//
{{{#tag:}}}//text//
{{{#newTiddler:}}}//WikiWord//
{{{#newJournal:}}}//format//
!!Keyboard Shortcuts
|!Function |!PC |!Mac |
|Search|//~Alt-F//|&#x2303;F|
|New Tiddler|//~Alt-N//|&#x2303;N|
|New Journal|//~Alt-J//|&#x2303;J|
|Save Edit|//~Shift-Ctrl-Enter//|&#x21E7;&#x2303;&#x21A9;|
|Done Edit|//~Ctrl-Enter//|&#x2303;&#x21A9;|
|Cancel Edit|//Escape//|&#x238B;|
|Save Changes|//~Alt-S//|&#x2303;S|