Untitled

dabblet.css

*
 {
    font-family: 'Source Sans Pro';
    font-size: 0;
    line-height: 12px;
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    border: 0;
}

.text {
	font-size: 12px;
    color: rgba(255,255,255,0.5);
}

#desktop {
    display: block;
    position: absolute;
    width: 1280px;
    height: 720px;
    background-image: linear-gradient(to right, rgb(128,128,128), rgb(170,170,170));
}

#panel {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}

#panel #bar {
    display: block;
    width: inherit;
    height: 24px;
    list-style-type: none;
    background-color: rgba(0,0,0,0.67);
}

#panel #bar section#left {
	float: left;
}

#panel #bar section#right {
	float: right;
}

#panel #bar .item {
    display: inline-block;
}

#panel #bar #workspaces .workspace {
    margin: 0 0 0 6px;
}

#panel #bar #workspaces .name {
    display: inline-block;
    float: left;
    margin: 6px 6px 6px 0;
}

#panel #bar #workspaces .terms {
    display: inline-block;
    list-style-type: none;
}

#panel #bar #workspaces .terms li {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: rgba(255,255,255,0.33);
    margin: 4px 6px 4px 0;
}

#panel #bar #workspaces .terms li:last-child {
    margin: 4px 0;
}

#panel #bar #tray {
    display: inline-block;
    list-style-type: none;
}

#panel #bar #tray .icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: rgba(255,255,255,0.33);
    margin: 4px 6px 4px 0;
}

#panel #bar #clock {
	display: inline-block;
    list-style-type: none;
}

#panel #bar #clock .date,
#panel #bar #clock .time {
    display: inline-block;
}

dabblet.html

<section id="desktop">
        <section id="panel">
            <section id="bar">
            	<section class="item" id="left">
	            	<table class="item" id="workspaces">
		                <td class="item workspace">
		                    <section class="text name">System</section>
		                    <ul class="terms">
		                        <li class="term"></li>
		                        <li class="term"></li>
		                        <li class="term"></li>
		                        <li class="term"></li>
		                    </ul>
		                </td>
		                <td class="item workspace">
		                    <section class="text name">System</section>
		                    <ul class="terms">
		                        <li class="term"></li>
		                        <li class="term"></li>
		                        <li class="term"></li>
		                        <li class="term"></li>
		                    </ul>
		                </td>
	                </table>
                </section>
                <section class="item" id="right">
	                <ul id="tray">
	                   	<li class="icon"></li>
		                <li class="icon"></li>
		                <li class="icon"></li>
		                <li class="icon"></li>
	                </ul>
	                <ul id="clock">
	                	<li class="text date">05/23/13</li>
	                	<li class="text time">06:44:07</li>
	                </ul>
				</section>
            </section>
        </section>
    </section>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"50","seethrough":"","prefixfree":"","page":"all"}