Windows 98

dabblet.css

/**
 * Windows 98
 */

* {
	box-sizing: border-box;
	cursor: default;
	user-select:none;
}
.selectable, input[type=text], input[type=email], textarea {
	user-select: text;
	cursor: text;
}
body {
	-webkit-font-smoothing: none;
	font-family: "MS Sans Serif", "Microsoft Sans Serif";
	margin: 0;
	padding: 0;
	background-color: #008080;
}
#taskbar {
	padding: 2px 0px;
	font-size: 12px;
	position:fixed;
	bottom: 0px;
	height: 28px;
	line-height: 18px;
	width: 100vw;
	background-color: #c1c1c1;
	border: 0;
	border-top: 1px solid white;
	box-shadow: 0px -1px 0px #e0e0e0;
	display: flex;
}
.taskbar-section {
	height: 22px;
	line-height: 18px;
	box-shadow: -1px 0px 0px white, -2px 0px 0px #808080;
	padding-left: 2px;
	margin: 0px;
	margin-left: 4px;
	flex: 1 0 auto;
	display: flex;
}
.taskbar-section.with-knob {
	padding-left: 6px;
	padding-right: 3px;
}
.taskbar-section.with-knob:before {
	content: '';
	display: block;
	position: relative;
	top: 2px;
	height: 16px;
	width: 1px;
	left: -4px;
	border-top: 1px solid white;
	border-left: 1px solid white;
	border-bottom: 1px solid #808080;
	border-right: 1px solid #808080;}
#start-section {
	margin-left: auto;
	box-shadow: none;
	flex:0 0 auto;
}
.quick-launch-section,
#tray-section {
	flex: 0 0 auto;
}
#tray-section {
	margin-left: auto;
}
.quick-launch-button {
	height: 22px;
	width: 22px;
	text-align: center;
	border: 1px solid transparent;
	line-height: 24px;
}
.quick-launch-button:hover {
	border-top-color: white;
	border-left-color: white;
	border-bottom-color: #808080;
	border-right-color: #808080;
}
.taskbar-button {
	border-top: 1px solid #e0e0e0;
	border-left: 1px solid #e0e0e0;
	border-bottom: 1px solid #808080;
	border-right: 1px solid #808080;
	height: 20px;
	line-height: 14px;
	padding: 2px;
	margin: 1px;
	margin-left: 3px;
	box-shadow: -1px -1px 0px white, -1px 0px 0px white, 0px -1px 0px white, 1px 1px 0px black, 1px -1px 0px black, -1px 1px 0px black;
	flex: 1 0 auto;
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.taskbar-button:first-child {
	margin-left: 1px;
}
.taskbar-button.active,
.taskbar-button:active {
	border-top: 1px solid #808080;
	border-left: 1px solid #808080;
	border-bottom: 1px solid #e0e0e0;
	border-right: 1px solid #e0e0e0;
	box-shadow: 1px 1px 0px white, 1px 0px 0px white, 0px 1px 0px white, -1px -1px 0px black, -1px 1px 0px black, 1px -1px 0px black, 0px 1px white inset;
	    background-image:
	    -moz-linear-gradient(45deg, white 25%, transparent 25%,transparent 75%, white 75%, white 100%),
	    -moz-linear-gradient(45deg, white 25%, transparent 25%,transparent 75%, white 75%, white 100%);
	    background-image:
	    -webkit-linear-gradient(45deg, white 25%, transparent 25%,transparent 75%, white 75%, white 100%),
	    -webkit-linear-gradient(45deg, white 25%, transparent 25%,transparent 75%, white 75%, white 100%);
	    -moz-background-size:2px 2px;
	    background-size:2px 2px;
	    -webkit-background-size:2px 2px;
	    background-position:0 0, 50px 50px;
}
.taskbar-button.active,
.taskbar-button.start-button {
	font-weight: bold;
}
.taskbar-button img {
	vertical-align: middle;
	display: inline;
	padding-right: 2px;
	margin-top: -3px;
}
.system-tray {
	border-top: 1px solid #808080;
	border-left: 1px solid #808080;
	border-bottom: 1px solid #e0e0e0;
	border-right: 1px solid #e0e0e0;
	float: right;
	margin-right: 3px;
	padding-left: 3px;
	padding-right: 3px;
	line-height: 20px;
	flex: 0 0 auto;
}

dabblet.html

<div id="taskbar" class="header">
	<div id="start-section" class="taskbar-section">
		<span class="taskbar-button start-button"><img src="data:image/gif;base64,R0lGODdhEAAOAKIAAAICAgY0/wL5Av8oAv/7AgAAAM13/38AACH5BAEAAAUALAAAAAAQAA4AAANCWLoLDiyWRyFkbzhB58waIHBXBQzh6AzRSpFsHJqOgqJP4BB5CwQ6AIH3KwSMQeCOqAAqfxTipUF7eCqY2scqmSQAADs=" alt="">Start</span>
	</div>
	<div class="taskbar-section with-knob quick-launch-section">
		<span class="quick-launch-button"><img src="data:image/gif;base64,R0lGODdhEAAOAKIAAAICAgY0/wL5Av8oAv/7AgAAAM13/38AACH5BAEAAAUALAAAAAAQAA4AAANCWLoLDiyWRyFkbzhB58waIHBXBQzh6AzRSpFsHJqOgqJP4BB5CwQ6AIH3KwSMQeCOqAAqfxTipUF7eCqY2scqmSQAADs=" alt=""></span>
	</div>
	<div id="task-list" class="taskbar-section with-knob">
		<span class="taskbar-button active"><img src="data:image/gif;base64,R0lGODdhEAAOAKIAAAICAgY0/wL5Av8oAv/7AgAAAM13/38AACH5BAEAAAUALAAAAAAQAA4AAANCWLoLDiyWRyFkbzhB58waIHBXBQzh6AzRSpFsHJqOgqJP4BB5CwQ6AIH3KwSMQeCOqAAqfxTipUF7eCqY2scqmSQAADs=" alt="">Welcome to Windows 98</span>
		<span class="taskbar-button"><img src="data:image/gif;base64,R0lGODdhEAAOAKIAAAICAgY0/wL5Av8oAv/7AgAAAM13/38AACH5BAEAAAUALAAAAAAQAA4AAANCWLoLDiyWRyFkbzhB58waIHBXBQzh6AzRSpFsHJqOgqJP4BB5CwQ6AIH3KwSMQeCOqAAqfxTipUF7eCqY2scqmSQAADs=" alt="">Internet Explorer</span>
	</div>
	<div id="tray-section" class="taskbar-section">
		<div class="system-tray">9:01 AM</div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}