title: styles.css
type: text/css

body {
	position: relative;
	background: #eee;
	padding-top: 40px;
}

.tw-story-element {
	position: relative;
	margin: 30px 5px 30px 5px;
	padding: 20px 20px 20px 20px;
	border: 1px solid #999;
	background-color: #fff;
	-webkit-box-shadow: 1px 1px 6px rgba(0,0,0,0.4);
	   -moz-box-shadow: 1px 1px 6px rgba(0,0,0,0.4);
			box-shadow: 1px 1px 6px rgba(0,0,0,0.4);
}

.tw-story-element .body {
	margin-top: 12px;
}

.title {
	font-weight: bold;
	font-size: 33px;
	line-height: 40px;
	color: #844;
}

.title button {
	vertical-align: top;
}

.title > span {
	margin-right: 10px;
}

.tw-tiddler-missing .title {
	font-style: italic;
	font-weight: normal;
}

.tw-ticked-menu-item::before {
	position: absolute;
	content: "\2022";
	left: 4px;
}

.dropdown-menu {
	position: static;
}

.dropdown-menu a {
	position: relative;
}

.btn-invisible {
	border: none;
	background: none;
	margin: 0;
	padding: 0;
}

.tw-tags-wrapper .label {
	margin-right: 6px;
}

.tw-edit-field {
	border: 1px dotted #888;
}

textarea.tw-edit-field {
	width: 100%;
}

canvas.tw-edit-field  {
	cursor: crosshair;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

img, canvas {
	max-width: 100%;
}

a.tw-tiddlylink {
	font-style: normal;
	font-weight: normal;
}

a.tw-tiddlylink-resolves {
	font-style: normal;
	font-weight: bold;
}

a.tw-tiddlylink-missing {
	font-style: italic;
}

.tw-suppress-missing-tiddlylink a.tw-tiddlylink-missing {
	font-style: inherit;
}

/* This is needed to make the dropdown arrows abutt to the dropdown itself */
.navbar .dropdown-menu::before {
top: -5px;
}
.navbar .dropdown-menu::after {
top: -4px;
}

.splitLabel {
	font-size: 9.5px;
	margin-right: 5px;
}

.splitLabelLeft {
	text-transform: uppercase;
	font-weight: bold;
	padding: 3px 2px 3px 5px;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
	background-color: #ccc;
}

.splitLabelRight {
	padding: 3px 5px 3px 2px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	background-color: #eee;
}

.javascript-source {
	border: 1px solid #888;
	padding: 18px 18px 18px 18px;
	-webkit-box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
	box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
}

.javascript-source .javascript-boolean {
	color: #066;
}

.javascript-source .javascript-identifier {
	color: #606;
}

.javascript-source .javascript-keyword {
	color: #008;
	font-weight: bold;
}

.javascript-source .javascript-null {
	color: #080;
}

.javascript-source .javascript-numeric {
	color: #066;
}

.javascript-source .javascript-punctuator {
	color: #660;
}

.javascript-source .javascript-string {
	color: #080;
}

.javascript-source .javascript-comment {
	color: #800;
	padding: 4px 4px 4px 4px;
	border: 1px solid #feed77;
	background: #feed77;
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#dede80),color-stop(7%,#feed77),color-stop(92%,#feed77),color-stop(100%,#dede80));
	background: -webkit-linear-gradient(72deg,rgba(255, 255, 255, 0.5) 8%,rgba(255, 255, 255, 0.1) 80%),-webkit-linear-gradient(top,#dede80 0,#feed77 7%,#feed77 92%,#dede80 100%);
	background:    -moz-linear-gradient(72deg,rgba(255, 255, 255, 0.5) 8%,rgba(255, 255, 255, 0.1) 80%),   -moz-linear-gradient(top,#dede80 0,#feed77 7%,#feed77 92%,#dede80 100%);
	background:      -o-linear-gradient(72deg,rgba(255, 255, 255, 0.5) 8%,rgba(255, 255, 255, 0.1) 80%),     -o-linear-gradient(top,#dede80 0,#feed77 7%,#feed77 92%,#dede80 100%);
	background:     -ms-linear-gradient(72deg,rgba(255, 255, 255, 0.5) 8%,rgba(255, 255, 255, 0.1) 80%),    -ms-linear-gradient(top,#dede80 0,#feed77 7%,#feed77 92%,#dede80 100%);
	background:         linear-gradient(72deg,rgba(255, 255, 255, 0.5) 8%,rgba(255, 255, 255, 0.1) 80%),        linear-gradient(top,#dede80 0,#feed77 7%,#feed77 92%,#dede80 100%);
	-webkit-box-shadow: 1px 1px 6px rgba(0,0,0,0.4);
	   -moz-box-shadow: 1px 1px 6px rgba(0,0,0,0.4);
			box-shadow: 1px 1px 6px rgba(0,0,0,0.4);
}

.javascript-source .javascript-block-comment {
	font-family: Helvetica, Arial, sans-serif;
}

.javascript-source .javascript-line-comment {
	font-family: Helvetica, Arial, sans-serif;
}