Untitled

dabblet.css

.descisionTree:hover {
	background: #eee;
}

.descisionTree {
	display: table; 
	border-bottom: 1px solid #ccc;
	padding: 10px;
	transition: all .5s;
	cursor: pointer;
}
.descisionTree img {
	width: 50px;
	margin-right: 20px;
	transition: all .5s;
}
.descisionTree img:hover {
	width: 55px;
}
.descisionTree span {
	display: table-cell;
	vertical-align: middle;
	width: 600px;
}

.descisionTree.completed {
	color: #999;
	opacity: 0.4;
}

.descisionTree.completed img {
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
         -o-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
            filter: grayscale(100%); 
}

dabblet.html

<div class="descisionTree completed">
	<img src="https://cdn1.iconfinder.com/data/icons/Isloo_icons_by_IconFinder/128/light_bulb.png" />
	<span>Stap 1</span>
</div>

<div class="descisionTree completed">
	<img src="https://cdn1.iconfinder.com/data/icons/Isloo_icons_by_IconFinder/128/home_house.png" />
	<span>Stap 2</span>
</div>

<div class="descisionTree ">
	<img src="https://cdn1.iconfinder.com/data/icons/Isloo_icons_by_IconFinder/128/screen_on.png" />
	<span>Stap 3</span>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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