Untitled

dabblet.css

@import url('http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css');
@import url('http://fonts.googleapis.com/css?family=Handlee');

body {
background: url('img/noise.png');
}
#usermenu {
position: absolute;
right: 0;
left: auto !important;
border-radius: 4px;
}
.u {
font-size: 20px;
text-decoration: underline;
font-family: 'Handlee', cursive;
}
.failure {
background-color: red;
border-color: darkred;
}

dabblet.html

<ul id="usermenu" class="topbar-inner nav" data-dropdown="dropdown">
<li class="dropdown"><a href='#' class="dropdown-toggle">kurtextrem</a> 
<ul class="dropdown-menu">
<li>Test1</li>
<li class="divider"></li>
<li>Test2</li>
</ul>
</li>
</ul>
<div class="container">
	<h1>S4 Event Plan</h1>
	<div class="alert-message info">  
		<a class="close" href="#">×</a>  
		<p><em><span class="label success">Neu</span> Du hast keinen Plan und bist unorganisiert? Dann bist <strong>Du</strong> genau richtig hier!</em></p>
	</div>

	<form>
		<fieldset>
		<div class="clearfix">
			<p class="u">Touchdown</p>
			<label for="td1-counter">TD 1</label>
			<div class="input">
				<div class="input-prepend">
					<label class="add-on"><input type="checkbox" class="failure"></label>
					<input type="text" readonly class="small" value="Abgeschlossen">
				</div>
			</div>
		</div>
		<div class="clearfix">			
			<label for="dm-counter">Death Match</label>
			<div class="input">
				<div class="input-append">
					<input class="mini count" id="dm-counter" type="number" min=0 value=0>
					<label class="add-on">
						<input type="checkbox" disabled>
					</label>
				</div>
			</div>
		</div>
		<div class="clearfix">			
		<label for="chaser-counter">Chaser</label>
			<div class="input">
				<div class="input-append">
					<input class="mini count" id="chaser-counter" type="number" min=0 value=0>
					<label class="add-on">
						<input type="checkbox" disabled>
					</label>
				</div>
			</div>
		</div>
		<div class="clearfix">			
		<label for="siege-counter">Siege</label>
			<div class="input">
				<div class="input-append">
					<input class="mini count" id="siege-counter" type="number" min=0 value=0>
					<label class="add-on">
						<input type="checkbox" disabled>
					</label>
				</div>
			</div>
		</div>
		<div class="clearfix">			
		<label for="captain-counter">Captain</label>
			<div class="input">
				<div class="input-append">
					<input class="mini count" id="captain-counter" type="number" min=0 value=0>
					<label class="add-on">
						<input type="checkbox" disabled>
					</label>
				</div>
			</div>
		</div>
		<div class="clearfix">			
		<label for="br-counter">Battle Royal</label>
			<div class="input">
				<div class="input-append">
					<input class="mini count" id="br-counter" type="number" min=0 value=0>
					<label class="add-on">
						<input type="checkbox" disabled>
					</label>
				</div>
			</div>
		</div>
		</fieldset>
	</form>
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-alerts.js"></script>
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-dropdown.js"></script>
<script>$(".alert-message").alert();$('.topbar-inner').dropdown();
$('.count').change(function(){
if($(this).val() >= 3)
	$(this).prop('checked', true);
});

$('.add-on :checkbox').click(function () {
    if ($(this).prop('checked')) {
      $(this).parents('.add-on').addClass('active').removeClass('failure');
    } else {
      $(this).parents('.add-on').removeClass('active').addClass('failure');
    }
  })
</script>

settings.json

{"page":"html","view":"split"}