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
<!--{{{-->
<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>>
<<importTiddlers>>
<!--{{{-->
<link rel='alternate' type='application/rss+xml' title='RSS' href='index.xml' />
<!--}}}-->
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]]
<!--{{{-->
<div class='header' role='banner' 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' role='navigation' refresh='content' tiddler='MainMenu'></div>
<div id='sidebar'>
<div id='sidebarOptions' role='navigation' refresh='content' tiddler='SideBarOptions'></div>
<div id='sidebarTabs' role='complementary' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>
<div id='displayArea' role='main'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></div>
</div>
<!--}}}-->
/*{{{*/
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]];}

.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:0; top:0;}

.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:0 3px 0 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:0; padding-bottom:0;}

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

.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='toolbar' role='navigation' 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>
<!--}}}-->
<<tiddler Bop with:"
lick 4/4 | Cm7 f16 d eb g d c bb g# a c- eb g d c bb g# | F7 a8 c16 d eb8 f16 g a8 c16 d g f eb c# | Bbmaj d2 r8 d [ bb g eb ] | Ebmaj bb+1 |">><<twyp player>>
<html>
<div class=bopland>
$1
</div>
</html> 
{{{
Background:#FFF
Foreground:#333
PrimaryPale:#999
PrimaryLight:#777
PrimaryMid:#111
PrimaryDark:#000
SecondaryPale:#DDF
SecondaryLight:#CDF
SecondaryMid:#9AF
SecondaryDark:#05A
TertiaryPale:#EEE
TertiaryLight:#CCC
TertiaryMid:#999
TertiaryDark:#333
Error:#F88

PageBackground:#F9F9F9
Dim:#FDFDFF
}}}
<<tiddler Bop with:"
lick  4/4 | Am7-5 d4 [ c8 g eb ] d c f e
       | D7 eb g bb g# a f# eb c#
       | Gm7 d4 r r2 |
"
>>
{{{
<<tiddler Bop with:"
lick  4/4 | Am7-5 d4 [ c8 g eb ] d c f e
       | D7 eb g bb g# a f# eb c#
       | Gm7 d4 r r2 |
"
>>
}}}
<<tiddler Bop with:"
guitar tabs unaccompanied | Fmaj Dm7 | Gm7 C7 | Fm7 | Bb7 | { c+8:3 a+~:1 | a4 s4 s2 | s2 (g-8:4 db+ f bb) c+:1 (e--:4 bb+ d a+) g+:1 | s4 s8 eb-:4 [c:5 cb bb] ab:6 e | bb+4 s4 s2 } { | f8:4 c+:3 (e:2 a) f-:4 d:5 f:4 (c+:3 f) d-:5 | g-:6 f+:4 (bb:3 d) f:4 s2 | f8:4 bb:3 (eb:2 ab) s8 s2 | r8 (ab-4:4 d g) s8 s2 }
"
>>
{{{
<<tiddler Bop with:"
guitar tabs unaccompanied | Fmaj Dm7 | Gm7 C7 | Fm7 | Bb7 | { c+8:3 a+~:1 | a4 s4 s2 | s2 (g-8:4 db+ f bb) c+:1 (e--:4 bb+ d a+) g+:1 | s4 s8 eb-:4 [c:5 cb bb] ab:6 e | bb+4 s4 s2 } { | f8:4 c+:3 (e:2 a) f-:4 d:5 f:4 (c+:3 f) d-:5 | g-:6 f+:4 (bb:3 d) f:4 s2 | f8:4 bb:3 (eb:2 ab) s8 s2 | r8 (ab-4:4 d g) s8 s2 }
"
>>
}}}
~BopLand.org is a free knowledge database for improvising musicians. It contains thousands of jazz licks over most common chord progressions. While not only oriented towards jazz musicians, but towards other musicians as well, the majority of patterns present in the database were composed during the bebop era. Hence comes the name.
From the technical point of view the project is based on the lick rendering web service provided by [[my.BopLand.org|http://my.bopland.org/]].
Source: http://www.bopland.org/about
----
To use Bopland's service in this ~TiddlyWiki you simply write:
{{{
<<tiddler Bop with:"
Your musical code here
">>
}}}
<<tag example "see examples">> (Click on the examples to access the playback feature and transposing options.)
<script src="http://my.bopland.org/render.js"></script> 
<html>
 <h2>Licks on your web page</h2>
    <p>
        This page will help you to post licks on your own page. Here are a few examples of how they might look. Click on the examples to access the playback feature and transposing options.
    </p>

    <div class="bopland save tag-joe-pass tag-apassionato">
        lick 4/4 g#8 | A7 a c# e g bb c16 bb a8 g | Dm7 f d a g f d a b~ | Dm7 b4 r r2 |
    </div>

    <br/>

    <div class="bopland save">
        walking bass 4/4 | Cm7 c4 g+ [ eb+8 d c ] g e | F7 f4 f+ eb8 c cb bb~ | Bbmaj bb4 bb- c d | Ebmaj eb g bb g# | Am7-5 a eb+ c c# | D7 d f#- a ab | Gm7 g r r2 | </div>

    <br/>

    <div class="bopland save">
        guitar tabs unaccompanied | Fmaj Dm7 | Gm7 C7 | Fm7 | Bb7 |
        {
        c+8:3 a+~:1
        | a4 s4 s2
        | s2 (g-8:4 db+ f bb) c+:1 (e--:4 bb+ d a+) g+:1
        | s4 s8 eb-:4 [c:5 cb bb] ab:6 e
        | bb+4 s4 s2
        }
        {
        | f8:4 c+:3 (e:2 a) f-:4 d:5 f:4 (c+:3 f) d-:5
        | g-:6 f+:4 (bb:3 d) f:4 s2
        | f8:4 bb:3 (eb:2 ab) s8 s2
        | r8 (ab-4:4 d g) s8 s2

        }
    </div>

    <br/>

    <div class="bopland save">
        piano solo
        | D7 | G7 | C | C7 |
        {
        | r8 c#+ e c# d c a a#
        | b d f a g f d d#
        | e c f d# e c b bb~
        | bb1 |
        }
        {
        | d4 (f# a c) a- (f#+ a c)
        | g- (f+ g b) d (f g b)
        | c (e g c) g- (e+ g c)
        | e c d e
        }
    </div>

    <p>
To enable rendering of licks, paste the line below into the head tag on your web page.
    </p>

    <pre>
&lt;script src="http://my.bopland.org/render.js"&gt;&lt;/script&gt;
    </pre>

    <p>
Now any <code>div</code> with the class <code>bopland</code> will be replaced with the lick corresponding to the code it contains. E.g. the following code
    </p>

    <pre>
&lt;div class="bopland"&gt;
    lick
    4/4 | Am7-5 d4 [ c8 g eb ] d c f e
        | D7 eb g bb g# a f# eb c#
        | Gm7 d4 r r2 |
&lt;/div&gt;
    </pre>

    <p>
        will be replaced with the lick below.
    </p>

    <div class="bopland save">
        lick 4/4 | Am7-5 d4 [ c8 g eb ] d c f e | D7 eb g bb g# a f# eb c# | Gm7 d4 r r2 |
    </div>

    <p>
        Each lick contains a "Source Code" tab to make it easy to copy it to your web page. If you want a particular lick to appear on your page click on the lick image with the left mouse button. The options menu will appear. Go to the "Source Code" tab and copy the text in it. All you have to do now is paste it on your web within a div tag with the class "bopland".
    </p>

    <h2>Types and patterns</h2>

    <p>
        Each lick should be prefixed with a type and a pattern telling the compiler which syntax to use and what type of lick it is. Type defines staves with clef, while pattern is used to enable filtering of licks by their purpose like "walking line" or "voicings" after the lick is saved. Valid types and patterns are listed below.
    </p>
    
    <table>
        <tr>
            <td>
                <strong>Types:</strong>
                <ul class="indent">
                    <li>treble clef</li>
                    <li>bass clef (or bass)</li>
                    <li>piano</li>
                    <li>guitar</li>
                    <li>guitar tabs</li>
                </ul>
            </td>
            <td>
                <strong>Patterns:</strong>
                <ul class="indent">
                    <li>solo (or lick)</li>
                    <li>comping</li>
                    <li>voicings</li>
                    <li>walking line</li>
                    <li>unaccompanied</li>
                </ul>
            </td>
        </tr>
    </table>

    <p>
        A valid prefix is obtained by joining type and pattern together, e.g. <code>treble clef solo</code>, <code>bass clef walking line</code>, <code>guitar voicings</code> etc. This can be used to move a lick from one clef to another. Take the following lick as an example.
    </p>

    <div class="bopland save">
        treble clef solo 4/4 | Am7 b+8 c g# b a g e c | G7 b a ab b a e g gb | F7 f a b c~ c f [ eb c bb ] | E7 g# a f e~ e4 r |
    </div>

    <p>
        Its source code starts with <code>treble clef solo</code> where <code>treble clef</code> is a type and <code>solo</code> is a pattern. To make it appear in bass clef, one should replace <code>treble clef solo</code> with <code>bass clef solo</code>:
    </p>

    <div class="bopland save">
        bass clef solo 4/4 | Am7 b+8 c g# b a g e c | G7 b a ab b a e g gb | F7 f a b c~ c f [ eb c bb ] | E7 g# a f e~ e4 r |
    </div>

    <p>
        There are also some aliases available to save typing:
    </p>

    <table>
        <tr>
            <th>Alias</th>
            <th>Full prefix</th>
        </tr>
        <tr>
            <td></td>
            <td>treble clef solo</td>
        </tr>
        <tr>
            <td>lick</td>
            <td>treble clef solo</td>
        </tr>
        <tr>
            <td>solo</td>
            <td>treble clef solo</td>
        </tr>
        <tr>
            <td>voicings</td>
            <td>treble clef voicings</td>
        </tr>
        <tr>
            <td>bass [pattern]</td>
            <td>bass clef [pattern]</td>
        </tr>
        <tr>
            <td>walking bass</td>
            <td>bass clef walking line</td>
        </tr>
        <tr>
            <td>guitar bass</td>
            <td>guitar walking line</td>
        </tr>
    </table>


    <h2>Tempo and swing</h2>

    <p>
         Playback tempo can be controlled by putting <code>tempo N</code> after lick prefix, where <code>N</code> is an integer number standing for number of quarters per minute. The following lick is played pretty fast - check the Source code tab:
    </p>

    <div class="bopland save">
        tempo 360 4/4 | Dm7-5 bb8 g ab c g f eb c# | G7 d f ab f# g b d f | Cm7 ab f# g eb+ r2 |
    </div>

    <p>
        All licks are swung by default. If you want to change the amount of swing - put  <code>swing N</code> after the lick prefix, where N is integer number denoting amount of swing per cent. The default value is 20. The two licks below are played with swing 0 and 99 respectively.
    </p>

    <div class="bopland save" style="display:none;">
        3/4 | Am7 c8 e b+ a g f | D7 f# a d- db c a# | G7 b d a+ g d b | Cmaj e4 r2 |
    </div>
    <div class="bopland">
        swing 0 3/4 | Am7 c8 e b+ a g f | D7 f# a d- db c a# | G7 b d a+ g d b | Cmaj e4 r2 |
    </div>

    <div class="bopland">
        swing 99 3/4 | Am7 c8 e b+ a g f | D7 f# a d- db c a# | G7 b d a+ g d b | Cmaj e4 r2 |
    </div>

<a name="options"></a>
    <h2>Options available</h2>

    <p>
        There are a couple of options for render.js script one can use to adjust the appearance.
    </p>

    <table>
        <tr>
            <th>Param</th>
            <th>Default</th>
            <th>Description</th>
        </tr>
        <tr>
            <td>lang</td>
            <td>en</td>
            <td>Language code corresponding to the interface language.</td>
        </tr>
        <tr>
            <td>width</td>
            <td>630</td>
            <td>Width of lick images in pixels.</td>
        </tr>
    </table>

    <p>
        If, for example, you want all the licks to appear smaller on your page, pass the <code>width</code> parameter to render.js script:
    </p>

    <pre>
&lt;script src="http://my.bopland.org/render.js?width=560"&gt;&lt;/script&gt;
    </pre>
</html>
<<closeAll>>{{dummy{<<toolbar jump>>}}}<<permaview>><<newTiddler label:+>><<saveChanges S>><<slider chkSliderOptionsPanel OptionsPanel "options »" "Change TiddlyWiki advanced options">>/%
!BOTTOM
<html><a href="#" class="button" onclick="jQuery('html, body').animate({ scrollTop: 0 });return false;">△</a></html>
<html><a href="#" class="button sidebarTop" onclick="jQuery('#sidebarTabs').animate({ scrollTop: 0 });return false;">△</a></html>
!END%/
<<tabs
	txtMainTab
	Recent "Recently edited tiddlers" TabTimeline
	Tags "All tags" TabTags
	All "All tiddlers" TabAll
	More "Admin stuff" TabMore
>>
Musical notes scratchpad
!Ack Värmeland du sköna  
//(Guitar solo arrangement. 4 voices - 1 hidden - to get stems right)//<<tiddler Bop with:"
guitar tabs unaccompanied
| Am E7/d Am/c E7/b | Amadd9 Am E7b9 E7b9  | Am G9 | Cadd9 C Cmaj7/g Gb7b5 | Bm7b5/f E7b9 | Am Am/g# Em/g D/f# | Bm7b5/f E7#5 Am Am |
{ e4:4 | a4.:3 b8 c4 d:3 | e2:1 g#4 b | b4 a a g | e2. e4 | d4:2 d f:1 e | c:2 c e:1 d:2 | b4.:2 c8 a2:3 | } 
{ | s2 s4  g#+:4  | (b4:2 c:4) a:5 (d2:3 f:2) | (c2:3 e:2) (b:3 d:2) | d4:2 c b bb:3 | a2:3 g# | a2:3 s4 a4~:3 | a2:3 s2 | }
{ | s1 }
{ | a4:5 d c b:6 | a4:5 s e2:6 | a2:5 g | (c2:5 g+:3) g4:6 gb | f2:6 e | a4:5 ab:6 g f# | f4:6 e a2:5 | }
"
>>
|Name|White-Theme|
|Description|a theme mimicking tw5 for standalone ~TiddlyWiki|
|PageTemplate|##PageTemplate|
|ViewTemplate|##ViewTemplate|
|EditTemplate|##EditTemplate|
|StyleSheet|##StyleSheet|
|Version|0.8.3 (2013-10-14)|
!PageTemplate
<!--{{{-->
<div id='messageArea'></div>

<div id='topMenu'>
    <div id='mainMenu' refresh='content' tiddler='MainMenu'></div>
</div>

<div id='displayArea'>
    <div id='sidebarTabs'>
        <div class='sidebarHeader header'>
            <div class='siteTitle' refresh='content' tiddler='SiteTitle'></div>
            <div class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></div>
            <div id='sidebarOptions' refresh='content' tiddler='SideBarOptions'></div>
            <div id='sidebarSearch' macro='search'></div>
        </div>
        <div class='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'>
        </div>
    </div>

    <div id='tiddlerDisplay'></div>
</div>
<!--}}}-->
!ViewTemplate
<!--{{{-->
<div class='tagInfo infoTags'>
    <div class='tidTags' macro='tags'></div>
</div>
<div class='toolbar'
    macro='toolbar [[ToolbarCommands::ViewToolbar]] icons:yes height:16 width:16 more:popup'>
</div>
<div class='heading'>
    <span class="titleBar">
        <div class='title' macro='view title text'></div>
        <div class="subtitle">
            last modified on
            <span macro="view modified date"></span>
            by
            <span class='hideIcon' macro='view modifier link'></span>
        </div>
    </span>
    <div class='tagClear'></div>
</div>
<div class='content'>
    <div class='viewer' macro='view text wikified'></div>
</div>
<div class='tagInfo infoTagging'>
    <div class='tagging' macro='tagging'></div>
</div>
<span class="openTiddler" macro='tiddler OnLoad'/>
<!--}}}-->
!EditTemplate
<!--{{{-->
<div class='toolbar'
    macro='toolbar [[ToolbarCommands::EditToolbar]] icons:yes'>
</div>
<div class='heading editorHeading'>
    <div class='editor title' macro='edit title'></div>
    <div class='tagClear'></div>
</div>
<div class='editor' macro='edit text'></div>
<div class='editorFooter'>
    <div class='tagTitle'>tags</div>
    <div class='editor' macro='edit tags'></div>
    <div class='tagAnnotation'>
        <span macro='message views.editor.tagPrompt'></span>
        <span macro='tagChooser excludeLists'></span>
    </div>
</div>
<!--}}}-->
!StyleSheet
/*{{{*/

/* DEFAULTS */

.clearFloat {
    clear: both;
}

body {
    font-size: 1em;
    font-family: helvetica, arial, sans-serif;
    background-color: [[ColorPalette::PageBackground]];
    color: [[ColorPalette::Foreground]];
}

body ul {
    margin: 0;
}

.right{
    float:right;
}

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

.viewer blockquote {
    border-left: 2px solid [[ColorPalette::TertiaryPale]];
}

.viewer table, table.twtable {
    border-collapse: collapse;
    margin: 5px 0;
    border: 1px solid [[ColorPalette::TertiaryMid]]  !important;
    max-width: 100%;
    word-break: normal;
    word-wrap: break-word;
}

.viewer tr, .viewer td,
.twtable tr, .twtable td {
    vertical-align:top;
    border: 1px solid [[ColorPalette::TertiaryMid]] !important;
}

.viewer th a:hover,
.viewer thead td a:hover,
.twtable th a:hover,
.twtable thead td :hover{
    color:[[ColorPalette::Background]] !important;
}

,viewer .listTitle{
    margin-left:0;
}

a,
.popup .button {
    color:[[ColorPalette::SecondaryDark]];
}

a:hover {
    text-decoration:underline;
    color:[[ColorPalette::SecondaryMid]];
    background:transparent;
}

a.tiddlyLink {
    font-weight:normal;
}

body .linkified .tiddlyLink.shadow,
a.tiddlyLink.shadow{
    color:[[ColorPalette::TertiaryMid]];
}

a.tiddlyLink.tiddlyLinkNonExisting {
    font-style:italic;
    font-weight:normal;
}

a.tiddlyLink:hover,
.popup .button:hover {
    background:none;
    color:[[ColorPalette::SecondaryMid]];
}

body .linkified .tiddlyLink{
    color:[[ColorPalette::SecondaryDark]];
}

body .linkified .tiddlyLink:hover{
    color:[[ColorPalette::SecondaryMid]];
}

.button,
.tagInfo ul li .button {
    color:[[ColorPalette::TertiaryMid]];
    background:[[ColorPalette::TertiaryPale]];
}

.button:hover,
.tagInfo ul li .button:hover {
    text-decoration:none;
    color:[[ColorPalette::Background]];
    background:[[ColorPalette::TertiaryMid]];
    border-color:[[ColorPalette::TertiaryLight]];
}

a.image:hover {
    background: transparent;
}

.tab{
    border: 1px solid [[ColorPalette::TertiaryLight]];
    border-bottom-color: [[ColorPalette::TertiaryPale]];
    background: [[ColorPalette::TertiaryLight]];
}

a.tabSelected,
.tabset .tab:hover {
    color:[[ColorPalette::TertiaryMid]];
    background: [[ColorPalette::PageBackground]];
    text-decoration: none;
}

.tabContents{
    background: [[ColorPalette::PageBackground]];
}

dd {
    margin-left: 20px;
}

dd:before {
    content: '» ';
}

iframe{
    width:98%;
    height:600px;
    border:2px solid [[ColorPalette::TertiaryPale]];
    z-index:0;
    position:relative;
}

object{
    z-index:0;
    position:relative;
}

.noTitle .listTitle{
    display:none !important;
}

.annotation{
    margin:0;
}

/* PAGE LAYOUT */

#displayArea {
    margin: 0;
    top: 0px;
    left: 0px;
    width: 100%;
    position: relative;
}

#contentWrapper {
    position: relative;
    padding-top: 1px;
    top: -1px;
}

#tiddlerDisplay,
#searchResults {
    margin: 8px 390px 0 42px;
    _position: relative; /* ie 6*/
}

* html #tiddlerDisplay {
    margin-top: 0px;
}


/* SEARCH */

#sidebarSearch {
    width: 200px;
}

#sidebarSearch .txtOptionInput {
    width: 100%;
    margin-top: 5px;
    _color: #bbb; /* ie6 danger */
}

#sidebarSearch .txtOptionInput:focus {
    color: #000;
}

#sidebarSearch .searchButton {
    display: none;
}

/* SIMPLESEARCH */
#searchResults {
     margin-top:0;
}

#displayArea #searchResults .button{
    padding:2px 6px;
    margin-right:3px;
    float:right;
}

/* FINDR */

#sidebarTabs #searchResults {
    margin: 0 1em 0 0;
}

#searchResults #findr-buttons{
    margin:0.5em 0 0 5px;
}

#searchResults .search_list .button{
    float:none;
    background:transparent;
    padding:2px;
    margin: 0;
}

#searchResults .search_list .button:hover{
    color:[[ColorPalette::SecondaryMid]];
}

#searchResults #findr-buttons .button{
    float:none;
}

.search_details strong{
   font-weight:normal;
   color:[[ColorPalette::TertiaryMid]];
}

.findr > strong{
    display: block;
    clear: both;
    padding-top: 0.5em;
}

/* TOPMENU */

.header {
    background:transparent;
}

#topMenu {
    left: 0;
    margin: 0.5em 32px 0 42px;
    clear:left;
    position: relative;
    padding: 0.5em 0 ;
    min-height: 1em;
    overflow: hidden;
    _width: 100%; /* for ie 6 */
}

/* MAIN MENU */

#mainMenu {
    color:[[ColorPalette::TertiaryLight]];
    position: static;
    text-align: left;
    margin: 0;
    float: left;
    width: auto;
    padding: 0;
    margin-left:4px;
    font-size: 1em;
    line-height: normal;
}

#mainMenu br{
   display:none;
}

#topMenu #sideBarOptions {
    margin-right:16px;
}

#mainMenu a,
#mainMenu .tiddlyLink,
#mainMenu .button,
#sidebarOptions a,
#sidebarOptions .button {
    margin: 0;
    background:none;
    color: [[ColorPalette::TertiaryMid]];
    font-size: 0.9em;
    padding: 4px 6px;
}

#sidebarOptions a,
#sidebarOptions .button {
    display:inline-block;
}

#mainMenu a:hover,
#mainMenu .tiddlyLink:hover,
#mainMenu .button:hover,
#sidebarOptions a:hover,
#sidebarOptions .button:hover {
    background:none !important;
    color:[[ColorPalette::TertiaryDark]];
}

#mainMenu .button,
#sidebarOptions .button {
    border: 1px solid transparent;
}

.topMenu #sidebarOptions {
    float: right;
    padding: 0;
    margin: 0 0 0 1em;
}


/* SIDEBAR */

#sidebarTabs {
    width: 360px;
    position: absolute;
    right: 0;
    top: 0;
}

#sidebarTabs .lf-search {
    background:transparent;
    padding:0 0 5px 0;
}

#sidebarTabs .lf-label{
    display:none;
}

#sidebarTabs .sidebarHeader{
    padding: 1em 0 0 10px;
}

#sidebarTabs .siteTitle,
#sidebarTabs .siteTitle a {
    display: block;
    font-size: 32px;
    line-height: 32px;
    font-weight:normal;
    color: [[ColorPalette::SecondaryDark]];
    background: transparent;
}

#sidebarTabs .siteTitle a:hover {
    color: [[ColorPalette::TertiaryDark]];
}

#sidebarTabs .siteSubtitle {
    display: block;
    float: none;
    font-size: 14px;
    margin: 1em 0 0 1em;
    color: [[ColorPalette::TertiaryMid]];
    clear: both;
    margin: 0;
}

#sidebarTabs #sidebarOptions {
    margin-top: 1em;
    padding:0;
}

#sidebarTabs #sidebarOptions .button:hover,
#sidebarTabs #sidebarOptions .button:active {
    color:[[ColorPalette::PrimaryMid]];
    text-decoration:none;
    background:transparent;
}

.sidebarTabs{
    clear:both;
    margin-top:1em;
}

#sidebarTabs .tabsetWrapper .tabset {
    width: 87px;
    text-align:right;
    border: 0;
    height: auto;
    float: left;
    word-wrap: break-word;
    top: 0;
    padding: 0 5px 0 0;
}

#sidebarTabs .tabContents li a:hover {
    color: [[ColorPalette::SecondaryMid]];
}

#sidebarTabs .tabsetWrapper .tabset .tab {
    font-size: 0.9em;
    padding: 2px 5px 2px 2px;
    color: [[ColorPalette::TertiaryMid]];
    background: transparent;
    border: 0;
    border-right: 1px solid [[ColorPalette::TertiaryLight]];
    line-height: 16px;
    position: relative;
    display: block;
    margin: 2px 0 0 0;
    background-color: #f9f9f9;
    background-image: linear-gradient(left, rgb(249,249,249) 0%, rgb(236,236,236) 100%);
    background-image: -o-linear-gradient(left, rgb(249,249,249) 0%, rgb(236,236,236) 100%);
    background-image: -moz-linear-gradient(left, rgb(249,249,249) 0%, rgb(236,236,236) 100%);
    background-image: -webkit-linear-gradient(left, rgb(249,249,249) 0%, rgb(236,236,236) 100%);
    background-image: -ms-linear-gradient(left, rgb(249,249,249) 0%, rgb(236,236,236) 100%);
}

#sidebarTabs .tabsetWrapper .tabset a:hover,
#sidebarTabs .tabsetWrapper .tabset .tabSelected {
    border:0;
    border-right: 1px solid [[ColorPalette::TertiaryLight]];
    z-index: 10;
    color: [[ColorPalette::TertiaryMid]];
    background:transparent;
    text-decoration:none;
}

#sidebarTabs .tabsetWrapper .tabset a:hover{
    color: [[ColorPalette::SecondaryMid]];
}


#sidebarTabs .tabContents li {
    border: none;
    margin-left: 0;
    word-wrap: break-word;
}

#sidebarTabs .tiddlyLinkExisting{
    font-weight:normal;
}

.tabContents li.listTitle{
    font-size: 1em;
    border: 0;
    padding: 0.3em  0.11em;
    color: [[ColorPalette::TertiaryLight]];
}

#sidebarTabs .tabContents .list-missing a {
    font-style:italic;
}

.tabContents .timeline {
    background: transparent;
    margin-bottom: 8px;
}

#sidebarTabs .timeline li.listTitle {
    color: [[ColorPalette::TertiaryLight]];
    margin-left: 8px 0;
    padding: 0.3em 0.11em;
}

#sidebarTabs .tabContents div > ul > li.listTitle {
    padding-top:0;
}

#sidebarTabs .tabContents li a {
    display: block;
    text-align: left;
    margin: 0 0 1px 0;
    padding: 2px 0;
    background: transparent;
}

#sidebarTabs .tabsetWrapper .tabContents {
    position: relative;
    background-color: transparent;
    border: 0;
    width:16em;
    min-height: 200px;
    padding: 0 0 0 5px;;
    font-size: 0.9em;
}

.tabContents .listTitle:first-child {
    margin-top: 0px;
}

/*SUPPORT FOR SECONDARY TABS*/
#sidebarTabs > div > .tabsetWrapper > .tabset{
    padding-left:10px;
    width:90%;
    float:none;
    text-align:left;
}

#sidebarTabs > div > .tabsetWrapper > .tabset > .tab {
    display: inline-block;
    background: transparent;
    margin: 0 3px -1px 0;
    padding:2px 4px;
    color: [[ColorPalette::TertiaryMid]];
    background: [[ColorPalette::TertiaryPale]];
    border: 0;
    border-top: 2px solid [[ColorPalette::TertiaryPale]];
    border-bottom: 2px solid [[ColorPalette::TertiaryPale]];
}

#sidebarTabs > div > .tabsetWrapper > .tabset > .tab:hover,
#sidebarTabs > div > .tabsetWrapper > .tabset > .tabSelected {
    background: transparent;
    border-top-color: transparent;
    color: [[ColorPalette::SecondaryDark]];
}

#sidebarTabs > div > .tabsetWrapper > .tabContents{
    margin-top:5px;
}

#sidebarTabs > div > .tabsetWrapper .tabsetWrapper {
    margin-top:5px;
}

#sidebarTabs > div > .tabsetWrapper .tabsetWrapper > .tabset{
    width:70px;
}

#sidebarTabs > div > .tabsetWrapper .tabsetWrapper,
#sidebarTabs > div > .tabsetWrapper .tabsetWrapper > .tabContents{
    width:auto;
}


/* TIDDLER */

.tiddler {
    position: relative;
    padding:0;
    width: 100%;
    margin-bottom: 2em;
    border-top: 1px solid [[ColorPalette::TertiaryPale]];
    background: [[ColorPalette::Background]];
    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
}

.heading {
    top: 22px;
    left: 0;
    width: 95%;
    padding: 1em 2.5% 5px 2.5%;
    border-bottom:3px solid [[ColorPalette::Dim]];
}

.tiddler .heading .title {
    position: relative;
    display: block;
    font-weight:normal;
    word-wrap: break-word;
    font-size:24px;
    line-height:24px;
    margin-right: 120px;
}

.tiddler .subtitle {
    display:block;
    float:left;
    font-style: normal;
    font-size: 0.9em;
    color: [[ColorPalette::TertiaryMid]];
    margin: 5px 0 0 0;
}

.tiddler .subtitle:hover {
    font-weight: normal;
    background: none;
}

.tiddler .subtitle a {
    color: [[ColorPalette::SecondaryMid]];
}

.tiddler .subtitle a:hover {
    color: [[ColorPalette::SecondaryDark]];
    background: [[ColorPalette::Background]];
}

.tiddler .headingClear {
    clear: both;
}

.tiddler .viewer {
    padding: 5px 2.5% 16px 2.5%;
    width: 95%;
    margin: 0;
    line-height: 1.4em;
    overflow:hidden;
}

.viewer pre {
    margin-left: 0;
}


/* TOOLBAR */

/* ie hacks */
.toolbar .svgIconText {
    *display: inline;
}

* html .toolbar {
    right: 8px;
}

.tiddler .originButton div {
    display: inline-block;
}

.tiddler .spaceSiteIcon .siteIcon {
    _display: inline; /* IE doesn't like inline-block */
}

.tiddler .originButton {
    display: block;
}

.originButton.highlight{
    background:transparent;
}

.content {
    width: 100%; /* IE */
    font-size: 0.9em;
}

/* TOOLBAR */ 


div.toolbar {
    visibility:hidden;
    right: -6px;
    position: absolute;
    padding: 0;
    top: 10px;
    z-index: 1;
}

.selected div.toolbar {
    visibility: visible;
}

div.tiddler .toolbar a {
    cursor: pointer;
    float: left\9;
    display: inline\9;
}

div.tiddler .toolbar a.command_deleteTiddler{
    margin-right: 34px !important;
}

.toolbar svg {
    width: 16px;
    height: 16px;
}

.toolbar svg .glyph {
    fill: #ccc;
}

.toolbar a:hover .glyph {
    fill: black;
}

.toolbar a:active .glyph {
    fill: [[ColorPalette::Background]];
}

.toolbar .moreCommand.highlight {
    background: none;
}

.tiddler .toolbar .button {
    border: none;
    display: inline;
    padding: 0px;
    margin-right: 16px;
    background:transparent;
}

.tiddler .tagged .listTitle {
    display: none;
}


/*! EDITMODE */

.heading.editorHeading {
    margin: 2em 0 0 0;
    width: 100%;
    padding: 0;
}

.tiddler .editor {
    padding: 0px;
    margin: 0 2.5%;
}

.heading .editor input {
    width: 99%;
    padding: 2px 0.5%;
    font-size: 0.8em;
    margin-top:1em;
}

.tiddler .heading .editor.title {
    font-size: 1.7em;
    line-height: normal;
}

.editor input, .editor textarea {
    width: 99%;
    padding: 2px 0.5%;
    border: 2px solid [[ColorPalette::TertiaryPale]];
}

.tagTitle {
    position: absolute;
    text-align: right;
    padding-right: 10px;
    top: 0px;
    margin-left: -95px;
    width: 100px;
}

.tagAnnotation {
    margin: 8px 0 0 20px;
    padding-bottom: 8px;
}

.annotationsBox {
    padding: 0;
    margin: 0 2.2% 0 2.5%;
}

.annotationsBox  .annotation {
    margin: 0;
    padding: 3px 5px;
}

.editorFooter {
    position: relative;
    padding: 0;
    margin-top: 16px;
    margin-left: 64px;
}

.tiddler .editorFooter .editor {
    padding-left: 0px;
}


/* TAGGING */
.selected .tagging,
.selected .tagging:hover {
    border: none;
    background: none;
}
.tagging {
    float: none;
    background: none;
    border: none;
}

.tagInfo {
    color: [[ColorPalette::TertiaryMid]];
    background: [[ColorPalette::Dim]];
    margin: 0;
    padding: 0;
    font-size:0.9em;
}

.tagInfo .tidTags,
.tagInfo .tagging{
    font-size:1em;
    padding: 0 0 2px 0;
}

.tagInfo ul {
    list-style: none;
    padding-left: 10px;
}

.tagInfo ul li {
    display:inline-block;
    margin-top:3px;
}

.tagInfo ul li.listTitle,
.tagInfo .tagging ul li.listTitle {
    display:inline-block;
    width:60px;
    text-align: right;
    padding: 5px 5px 3px 0;
    text-align:right;
    color: [[ColorPalette::TertiaryLight]];
    margin:0;
}

.tagInfo .tagging ul li.listTitle + li {
   margin-top: -20px;
}

.tagInfo .tagging ul li {
    float: none;
    display: block;
    clear:left;
    margin-left: 65px;
}

.tagInfo .tagging ul li a {
    display:block;
}

.infoTags {
    padding: 3px 5px;
}

.infoTags .tidTags{
    max-width:75%;
}

.infoTags ul {
    padding-left:0;
}

/* POPUPS (/ SIDEBAR) */

.popup {
    padding:3px;
    border-color:transparent;
    background-color: [[ColorPalette::Background]];
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

.popup ul,
.popup li {
    margin:0;
    padding:0;
    list-style-type:none;
}

.popup.block a{
    display:block;
}

.popup.block br{
    display:none;
}

.popup a,
.popup li a,
.popup a.button {
    padding:3px;
    color: [[ColorPalette::SecondaryDark]];
    border:0;
}

.popup a :hover,
.popup li a:hover,
.popup a.button:hover,
a.popupbutton.highlight {
    color: [[ColorPalette::SecondaryMid]];
    background: transparent;
}

.popup li a.tiddlyLink {
    font-weight: bold;
}

.taggedTiddlerList li:last-child a.tiddlyLink{
    font-weight:normal;
}

.popup li.disabled,
.popup li.listTitle {
    border-bottom: 1px solid [[ColorPalette::TertiaryPale]];
    color: [[ColorPalette::TertiaryMid]];
    font-weight:normal;
    padding:7px 5px;
    margin: 0;
}

.popup .button{
    background:transparent;
}

.popup.confirmationPopup,
.followList {
    font-size: 0.8em;
    padding: 1em;
    border: 0;
}

.popup.confirmationPopup .button {
    border: 0;
    margin: 4px 4px 0 4px;
    display: inline-block;
}

.popup.confirmationPopup .button:hover {
    background:transparent;
    color:[[ColorPalette::SecondaryDark]];
}

.popup hr{
    color: transparent;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #ccc;
}

.listBreak{
   border-bottom: 1px solid  [[ColorPalette::TertiaryPale]];;
}

.listBreak div{
   display:none;
}


/* REVISIONS */

.revButton {
    float: right;
}

.revisionCloak {
    position: absolute;
    position: fixed !important;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    border: 0;
    margin: 0;
    padding: 0;
    opacity: 0.5;
    filter: alpha(opacity=50);
    background-color: #000;
}

.viewRevision .toolbar {
    right: 48px;
    top: 8px;
}

.viewRevision .modifierIcon img,
.viewRevision .modifierIcon svg {
    margin-right: 16px;
}

.viewRevision .toolbar svg {
    width: 32px;
    height: 32px;
}


/* ACTIVITY */

#sidebarTabs .tabContents .activityStream .feedItem a {
    display: inline-block;
    padding: 0;
    background: none;
}


/* FOLLOWING */

.tiddler .followPlaceHolder {
    display: block;
    position: absolute;
    top: 58px;
    right: 60px;
    _right: 126px; // add width of modifierIcon
}

.followButton a {
    position: absolute;
    top: 0px;
    right: 0;
    display: block;
    margin: 0;
    padding: 6px 20px;
    background: transparent;
    text-align: center;
    color: [[ColorPalette::TertiaryMid]];
    display: block;
    margin-top: 0px;
}

.followButton a:hover {
    color: [[ColorPalette::TertiaryMid]];
    text-decoration: none;
}

.followButton.hasReplies a {
    font-weight:bold;
    color: [[ColorPalette::SecondaryMid]];
}

.followButton.hasReplies a:hover {
    color: [[ColorPalette::SecondaryDark]];
}


* html .followButton a {
    margin: 0px 8px 0 0;
}

.tiddler .followButton {
    width: 24px;
    position: relative;
    height: 22px;
    text-align: left;
    color:  [[ColorPalette::SecondaryDark]];
    background: [[ColorPalette::TertiaryPale]];
    padding: 10px 0px 0px 10px;
    width: 38px;
    margin: -16px -8px 24px 0;
}

/* the triangle */
.followButton:before {
    content: "\00a0";
    display: block; /* reduce the damage in FF3.0 */
    position: relative;
    bottom: -20px;
    right: 0;
    width: 0;
    height: 0;
    border-width: 0 0 20px 20px;
    border-style: solid;
    border-color: transparent [[ColorPalette::TertiaryPale]];
}

.followList .listTitle {
    text-decoration: underline;
}

.followTiddlersList .label {
    display: block;
    left: 10px;
    top: 0px;
    line-height: 16px;
    position: relative;
}

.popup.followList {
    margin: 10px 0 0 -335px;
    max-width: 400px;
}

.popup .followTiddlersList a {
    display: inline;
    padding: 0;
}

.popup .followTiddlersList ul{
   margin:0;
   padding:0;
}

.popup .followTiddlersList li{
    position: relative;
    display: block;
    clear: both;
    margin-bottom: 8px;
}

.popup .followTiddlersList .siteIcon{
    height: auto;
    width: auto;
    margin-right:5px;
}


/* ICONS */

.titleBar .hideIcon .image {
    display: none;
}

.titleBar .siteIcon,
.titleBar .label {
    display: inline;
}

.siteIcon .label {
    color: [[ColorPalette::TertiaryDark]];
}

.tiddler .spaceSiteIcon {
    float: left;
    margin: 0 5px 0 0;
    position: relative;
    display: block;
}

/* for following */
.popup .siteIcon {
    float: left;
    height: 25px;
}

.originButton,
.followPlaceHolder,
.tiddler .subtitle {
    cursor: pointer;
}

.originButton img,
.originButton svg {
    margin-left: 0px;
}

.modifierIcon .externalImage .image a:hover,
.spaceSiteIcon .externalImage .image a:hover {
    background: none;
}

.modifierIcon {
    position: absolute;
    width: 42px;
    top: 42px;
    right: 0;
    text-align: right;
}

.modifierIcon img,
.modifierIcon svg {
    margin-right: 16px;
}

.editSpaceSiteIcon .originButton {
    cursor: auto;
}

.editSpaceSiteIcon .originButton img,
.editSpaceSiteIcon .originButton svg {
    margin:  0 5px 5px 3px;
    width: 16px;
    height: 16px;
}

.editSpaceSiteIcon, .privacyEdit {
    float: left;
}

.editSpaceSiteIcon svg,
.editSpaceSiteIcon img,
.editSpaceSiteIcon .roundelLabel {
    float: left;
}

.tiddler .privacySettings {
    text-align: center;
}
.tiddler .privacySettings .originButton {
    display: inline;
}


/* BACKSTAGE */

#app-picker:hover{
    background-color:transparent;
}

#backstageToolbar {
    padding-left: 50px;
}

#backstageToolbar .backstageTask {
    background: transparent;
    color: [[ColorPalette::TertiaryPale]] !important;
}

#backstageArea a.backstageSelTab,
#backstageToolbar .backstageTask:hover {
    text-decoration:none;
    background: transparent;
    color: [[ColorPalette::Background]] !important;
}

/* MESSAGE AREA */

#messageArea {
    position: fixed;
    top: 0 !important;
    right: 0;
    width:350px;
    margin:0;
    padding:7px 1%;
    font-size:0.9em;
    border:1px solid [[ColorPalette::SecondaryMid]];
    background:[[ColorPalette::SecondaryPale]];
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:3px;
}

#messageArea .messageToolbar {
    display:block;
    float:right;
    padding:0.1em;
    text-align:right;
    width:60px;
}

#messageArea a,
#messageArea .button {
    background:transparent;
    text-decoration:none;
    color:[[ColorPalette::TertiaryDark]];
    border:0;
}

#messageArea a:hover{
    color:black;
    border-bottom:1px solid [[ColorPalette::TertiaryDark]];
}

#backstageToolbar {
    text-align:center;
}

/* RESPONSIVE */

@media all and (max-device-width: 480px) {
    div.toolbar {
        visibility:visible;
    }
}

@media only screen and (device-width: 768px) {
    div.toolbar {
        visibility:visible;
    }
}

@media all and (max-width: 960px){
    #tiddlerDisplay,
    #searchResults {
        margin: 16px 366px 0 16px;
    }

    #mainMenu {
        margin-left: 16px;
    }

    #sidebarSearch,
    #sidebarOptions,
    #sidebarTabs {
        right: 16px;
        width: 326px;
    }

    #sidebarTabs .tabsetWrapper .tabset {
        font-size: 0.9em;
        width: 77px;
    }

    #sidebarTabs .tabsetWrapper .tabContents {
        width:auto;
        padding:0 0 0 5px;
    }

    #sidebarTabs .tabContents li a {
        font-size: 0.9em;
    }


     /* TIDDLER */

    .tiddler .modifierIcon img,
    .tiddler .modifierIcon svg,
    .tiddler .spaceSiteIcon .originButton img,
    .originButton svg {
        width: 12px;
        height: 12px;
        margin-left: 0px;
        margin-right: 0px;
    }

    .tiddler .viewer {
        margin: 0;
        padding-top: 0;
    }

    br {
        line-height: 0.5em;
    }
}


/* PRINT */

@media print {
    #mainMenu,
    #sidebar,
    #messageArea,
    .toolbar,
    .followPlaceHolder,
    #backstageButton,
    #backstageArea,
    #sidebarTabs,
    #sidebarSearch .txtOptionInput,
    #sidebarOptions {
        display: none !important;
    }
    #displayArea {
        margin: 1em 1em 0em;
    }

    #tiddlerDisplay {
        margin: 16px 16px;
    }

    /* Fixes a feature in Firefox 1.5.0.2 where print preview displays the noscript content */
    noscript {
        display:none;
    }
}

[[StyleSheet]]

/*}}}*/
/***
|''Name:''|twyp|
|''Description:''|search, play and associate youtube videos|
|''Author:''|Tobias Beer|
|''Version:''|0.9.7 (2010-10-25)|
|''Status:''|beta|
|''Source:''|http://twyp.tiddlyspace.com/#twyp|
|''Documentation:''|http://tobibeer.tiddlyspace.com/#twYp|
|''Readable source:''|http://tbsource.tiddlyspace.com/#twyp|
|''Requires:''|TW Version 2.5.3 or better|
!Example
{{{
<<twyp>>
}}}
<<twyp>>
!Code
***/
//{{{
(function(a){window.twyp={maxSearch:6,maxRelated:10,maxUser:10,vidWidth:380,vidHeight:320,restrictTo:"",field:"youtube",txtRelated:"Related",txtUser:"Best rated videos by ",txtPage:"Go to page ",lblShow:"Play %0",tipShow:"Click to play %0",lblHide:"Close video",tipHide:"Click to close video player",txtInfo:"by %0 | viewed: %1 | favourited: %2 | published: %3",txtRating:"rating: ",txtDuration:"duration: ",txtSearch:"-search-",lblSearch:"Please enter a search-term...",txtTag:"-category/tag-",lblTag:"Please enter a category or tag filter to constrain the search results by...",twypTemplate:"twyp##TEMPLATE",fmtSlider:'<<slider chk%0 twyp##TEMPLATE "Search videos" "Search videos on youtube and add one to the tiddler">>',fmtPlayer:'<h2><a class="tiddlyLinkExisting" href="#" title="add to current tiddler (hold CTRL to skip the prompt and use the title as is)" rel="%0">%1</a></h2> <object width="%2" height="%3"> <param name="movie" value="%0%4&fs=1&format=5&iv_load_policy=3&enablejsapi=1&playerapiid=%5"/> <param name="allowFullScreen" value="true" /> <param name="iv_load_policy" value="3" /> <param name="wmode" value="transparent" /> <param name="allowScriptAccess" value="always"> <embed src="%0%4&format=5&fs=1&iv_load_policy=3&enablejsapi=1&playerapiid=%5" 	type="application/x-shockwave-flash" 	allowscriptaccess="always" 	wmode="transparent" 	width="%2" height="%3" 	allowfullscreen="true"> </embed></object>',relRelated:"http://gdata.youtube.com/schemas/2007#video.related",mimeFlash:"application/x-shockwave-flash",feeds:"http://gdata.youtube.com/feeds/standardfeeds/",mapQuery:{rated:"top_rated",recent:"most_recent",popular:"most_popular",respond:"most_responded",discuss:"most_discussed",featured:"recently_featured",all:"videos"},usrSuffix:"/uploads",activeTwyp:null,shadows:[],appendScript:function(c,e,d){a("#"+e).remove();a("head").append(a("<script>").attr({src:c+"&alt=json-in-script&callback="+d,id:e,type:"text/javascript"}))},findHref:function(f,c){var e,d;for(e=0;d=f.link[e];e++){if(d.rel==c){return d.href}}return null},findMediaHref:function(g,f){var e,j,h,d;for(e=0;j=g.media$group.media$content[e];e++){if(j.type==f){d=j.url;h=d.indexOf("?");return h<1?d:d.substr(0,h)}}alert("?!?");return null},getResults:function(f,k,m){var j,d,i=1,h=a(f).closest(".twyp"),g=a(f).closest("[tiddler]"),e=twyp.activeTwyp=g.attr("twyp"),l=m;l=l!=""&&l!=twyp.txtSearch?l:"";if(k){j=f.category.value;j=j!=""&&j!=twyp.txtTag?"&category="+j:"";h.attr({id:e,field:g.attr("field"),search:l,cat:j,query:k})}else{l=h.attr("search");j=h.attr("cat");k=h.attr("query");i=parseInt(a(f).attr("page"))}d=twyp.feeds+twyp.mapQuery[k];if(k=="all"){d=d.replace("standardfeeds/","")}d+="?prettyprint=true&restriction="+twyp.restrictTo+"&max-results="+twyp.maxSearch+"&start-index="+(((i-1)*twyp.maxSearch)+1)+(l==""?"":"&vq="+l)+(j?j:"");twyp.appendScript(d,"twypResults","twyp.cbResults");twyp.updateNav(i,h)},cbResults:function(f){try{var d=a("#"+twyp.activeTwyp),c=a(".vids",d).empty();d.data("main",f.feed);a(f.feed.entry).each(function(j,m){if(!m.yt$noembed){var k=m.media$group.media$title.$t,h=a("<img/>"),o=a("<a/>"),n=m.media$group.media$description.$t,l=a("<p>").html(n);h.attr({src:m.media$group.media$thumbnail[0].url,title:twyp.info(m)}).click(twyp.clickPlay(j,"main",h[0]));o.attr({href:"#","class":"tiddlyLinkExisting"}).click(twyp.clickPlay(j,"main",o[0])).html(k);c.append(a("<div/>").attr("class","vid").append(a("<div/>").attr("class","desc").append(o).append(h).append(a("<span/>").append(a("<div/>").html(twyp.info(m,true)))).append(l).append(a("<div/>").attr("class","tagClear"))))}});if(a.fn.linkify){a("p",c).linkify()}}catch(g){alert(g)}},getRelated:function(e,h,g){var f=g.data(h).entry[e],d=twyp.findHref(f,twyp.relRelated),c=a(".vidRel",g).empty();if(d){d=d.split("?")[0];c.html("<h3>"+twyp.txtRelated+"</h3>");d+="?&restriction="+twyp.restrictTo+"&max-results="+twyp.maxRelated;twyp.appendScript(d,"twypRelated","twyp.cbMore")}},getByUser:function(e,d,c){a(".vidUser",e).empty().html("<h3>"+twyp.txtUser+c+"</h3>");twyp.appendScript(d+twyp.usrSuffix+"?&restriction="+twyp.restrictTo+"&max-results="+twyp.maxUser+"&orderby=rating","twypUser","twyp.cbMore")},cbMore:function(h){var d,c,j,f=a("#"+twyp.activeTwyp),g=h.feed.title.$t.indexOf("Videos related to")==0?"related":"user";f.data(g,h.feed);for(d=0;j=h.feed.entry[d];d++){c=a("<img/>");a(g=="user"?".vidUser":".vidRel",f).append(c.attr({src:j.media$group.media$thumbnail[0].url,rel:j.media$group.media$title.$t,title:twyp.info(j)+" | "+twyp.info(j,true)}).click(twyp.clickPlay(d,g,c[0])).bind("mouseover mouseout",function(k){var l=k?k:window.event,i=a("."+g+"Info");i.empty().html(l.type=="mouseover"?this.getAttribute("rel"):"&nbsp;")}))}},info:function(h,g){var d,c,f;if(g){g=h.gd$rating,c=h.media$group.media$content[0].duration;return[g?twyp.txtRating+g.average.toString().substr(0,3)+" | ":"",twyp.txtDuration,Math.floor(c/60),":",String.zeroPad(c%60,2)].join("")}d=h.author,f=h.yt$statistics;return twyp.txtInfo.format([d?d[0].name.$t:"",f?f.viewCount:"n/a",f?f.favoriteCount:"n/a",h.published.$t.substr(0,10)])},clickPlay:function(d,e,c){return function(){twyp.playVideo(d,e,c);return false}},playVideo:function(d,i,g){twyp.activePlayer=null;twyp.newPlayer=true;var h=a(g).closest(".twyp"),k=h.find(".twplr"),j=h.data(i).entry[d],c=j.author,f=twyp.fmtPlayer.format([twyp.findMediaHref(j,twyp.mimeFlash),j.media$group.media$title.$t,twyp.vidWidth,twyp.vidHeight,"&autoplay=1",h.attr("id")]);k.html(f);k.find("a").first().attr("field",h.attr("field")).click(function(l){var m=l?l:window.event;twyp.addToTiddler(m,this)});k.append(a("<div/>").attr({"class":"vidDescr",title:(twyp.info(j)+twyp.info(j,true))}).html(j.media$group.media$description.$t));if(a.fn.linkify){a(".vidDescr",k).linkify()}twyp.getRelated(d,i,h);if(c&&c.length>0){twyp.getByUser(h,c[0].uri.$t,c[0].name.$t)}},updateNav:function(f,e){var g=f,c=twyp.txtPage,h=g-1<1?"disabled":"";a(".vidNext",e).css("display","inline").attr({page:g+1,title:c+(g+1)});a(".vidPrev",e).css("display","inline").attr({page:g-1,title:c+(g-1),disabled:h})},reset:function(c){var d=a(c).closest(".twyp");a(".vids, .colPlayer div[class]",d).empty();a(".twplr",d).html("&nbsp;");a(".resultsNav",d).hide()},addToTiddler:function(f,d){var h=story.findContainingTiddler(d),g=a(d),c=g.html();h=h?h.getAttribute("tiddler"):"";if(!h){return}if(!f.ctrlKey){c=prompt("Enter your desired video title",c)}if(!c){return}store.setValue(h,g.attr("field"),"[["+c+"|"+g.attr("rel")+"]]");if(config.options.chkAutoSave){story.saveTiddler(h)}},stateChange:function(g){var f,h=a(this),e=h.attr("last"),c=twyp.activePlayer.getVideoUrl(),d=c.indexOf("?v=")>0;c=c.split(d?"?v=":"#!v=")[1].split("&")[0];if(e!=c){h.attr("last",c);if(twyp.newPlayer){twyp.newPlayer=false;return}if(e){twyp.activePlayer.pauseVideo();f="http://gdata.youtube.com/feeds/api/videos/"+c+"?v=2";twyp.appendScript(f,"twypVideoInfo","twyp.getVideo")}}twyp.newPlayer=false},getVideo:function(d){var c=a("#"+twyp.activeTwyp);d.feed={entry:[d.entry]};c.data("video",d.feed);twyp.playVideo(0,"video",c.first())}};config.macros.twyp={handler:function(k,g,x,h,j,r){var y,d,i,o,z,v,l,t=story.findContainingTiddler(k),q=j.parseParams(null,null,true),u=getParam(q,"field",twyp.field),e=x.contains("notitle"),c=x.contains("slider"),n="twyp"+Math.random().toString().substr(3),m=x.contains("search");if(x.contains("player")){m=m?"<<twyp %0>>".format([j.replace("player","")]):"";t=t?t.getAttribute("tiddler"):"";v=getParam(q,"video",store.getValue(t,u));wikify(m,k);if(!v){return}o=v.indexOf("|");z=v.substr(2,o-2);i=["<html>",twyp.fmtPlayer.format([v.substr(o+1,v.length-o-3),z,getParam(q,"width",twyp.vidWidth),getParam(q,"height",twyp.vidHeight),c&!x.contains("noautoplay")?"&autoplay=1":"",n]),"</html>"].join("");if(c){d=a("<div/>");d.addClass("twypSlider");l=d[0];a(k).append(a("<a>"+twyp.lblShow.format([z])+"</a>").attr({href:"#",twyp:n,"class":"button",title:twyp.tipShow.format([z])}).click(function(w){var s=a(this),f=z,B=s.attr("twyp"),A=s.next();if(A.css("display")!="block"){s.attr({title:twyp.tipHide,video:f}).html(twyp.lblHide);A.attr("twyp",B);config.shadowTiddlers[B]=i;A.slideDown("slow")}else{f=s.attr("video");s.attr("title",twyp.tipShow.format([f])).html(twyp.lblShow.format([f]));delete config.shadowTiddlers[B];A.slideUp("slow")}})).append(d)}wikify(i,l?l:k);y=a("a",l?l:k).last();if(e){y.parent().hide().next().css("margin-top","0.5em")}else{y.click(function(f){var p=f?f:window.event;twyp.addToTiddler(p,this)})}}else{wikify(c?twyp.fmtSlider.format([n]):store.getTiddlerText(twyp.twypTemplate),k);a(".txtSearch",k).last().val(twyp.txtSearch).attr("title",twyp.lblSearch);a(".txtTag",k).last().val(twyp.txtTag).attr("title",twyp.lblTag);d=c?a("[tiddler]",k).last():a(k).closest("[tiddler]");d.attr({twyp:n,field:u,not:e})}}};story.closeTiddlerTWYP=story.closeTiddler;story.closeTiddler=function(c){a(".twypSlider",this.getTiddler(c)).each(function(e,d){delete config.shadowTiddlers[a(d).attr("twyp")]});story.closeTiddlerTWYP.apply(this,arguments)};try{a.getJSON("http://www.geoplugin.net/json.gp?jsoncallback=?",function(c){if(c){twyp.restrictTo=c.geoplugin_countryCode}})}catch(b){}window.onYouTubePlayerReady=function(c){a("object, embed",a("#"+c)).each(function(d){try{this.addEventListener("onStateChange","twyp.stateChange");twyp.activePlayer=this;a(this).attr("last",null)}catch(f){}})};config.shadowTiddlers.StyleSheetTwyp="/*{{{*/\n.twyp {font-size:12px;} \n.twyp .frmSearch{margin:10px 0 0 10px;} \n.twyp .txtSearch, .twyp .txtTag{width:100px;} \n.twyp input{border:1px solid #ddd;padding:1px 3px;cursor:pointer;} \n.twyp input:hover{border:1px solid #999;} \n.twyp .colResults {float:left;margin-top:0.5em;width:390px;padding-left:10px;} \n.twyp .vids {width:100%;} \n.twyp .vids img{margin:5px 0 5px 5px;width:100px;cursor:pointer;float:right;clear:none;} \n.twyp .vid{clear:both;font-size:0.9em;padding:5px;} \n.twyp .vid:hover{background:#ddd;} \n.twyp .desc a{display:block;padding:1px 3px;} \n.twyp .desc p{max-height:70px;overflow:hidden;margin-top:5px;display:block;max-width:380px;} \n.twyp .desc p a{display:inline;} \n.twyp .desc:hover p{width:270px;max-height:200px;overflow:auto;} \n.twyp .desc span {font-weight:bold;color:#666;} \n.twyp .resultsNav{text-align:right;margin-bottom:2em;} \n.twyp .resultsNav input, .btnSearch{margin:0.5em 0 0 0.5em;font-weight:bold;width:80px;} \n.twyp .colPlayer {float:left;width:390px;margin:0 5px;} \n.twplr .vidDescr {max-height:1.5em;overflow:hidden;} \n.twplr .vidDescr:hover {max-height:250px;overflow:auto;} \n.twyp .colPlayer img {margin:1px;cursor:pointer;width:72px;height:56px;} \n.twyp h2, .twyp h3 {margin-top: 0.6em;} \n.twyp .vidUser, .vidRel{margin:0 1em 0 0;} \n.twyp .userInfo, .twyp .relatedInfo{padding-right:20px;height:auto;overflow:hidden;font-weight:bold;color:#666;} \n.twypSlider {display:none;margin-bottom:10px;} \n.twypSlider object{display:block;} \n/*}}}*/";store.addNotification("StyleSheetTwyp",refreshStyles)})(jQuery);
//}}}
// /%
/***
!TEMPLATE
<html>
<div class="twyp">
	<form class="frmSearch" onsubmit="twyp.getResults(this,this.query.value,this.search.value); return false;">
		<select name="query">
			<option value="all" selected="true">all videos</option>
			<option value="rated">top rated</option>
			<option value="recent">most recent</option>
			<option value="popular">most popular</option>
			<option value="discuss">most discussed</option>
			<option value="respond">most responded</option>
			<option value="featured">recently featured</option>
		</select>
		<input name="search" class="txtSearch" type="text" value="" onclick="this.select();">
		<input name="category" class="txtTag" type="text" value="" onclick="this.select();">
		<input type="submit" class="btnSearch" value="Search">
		<input type="button" class="btnSearch" value="Reset" onclick="twyp.reset(this);">
	</form>
	<div class="colPlayer">
		<div class="twplr"></div>
		<div>
			<div class="vidRel"></div>
			<div class="relatedInfo">&nbsp;</div>
			<div class="vidUser"></div>
			<div class="userInfo">&nbsp;</div>
		</div>
	</div> 
	<div class="colResults">
		<div class="vids"></div>
		<form class="resultsNav">
			<input type="button" class="vidPrev" value="&laquo; back" style="display: none;" onclick="twyp.getResults(this);"></input>
			<input type="button" class="vidNext" value="next &raquo;" style="display: none;" onclick="twyp.getResults(this);"></input>
		</form>
	</div>
</div>
<div class="tagClear"></div>
</html>
!END*/
//%/
/*{{{*/
config.options["chkBackstage"]=false; //HIDE BACKSTAGE
config.options.txtTheme='White-Theme'; //START WITH WHITE-THEME
/*}}}*/