Windows 8 Explorer Remake

HTML

<ul class="files">
    <li>
        <span class="icon folder"></span>
        <span class="name">Folder 1</span>
    </li>
   
</ul>

CSS

html, body {
	height: 100%;
}

.files {
	list-style: none;
	padding: 0px;
	margin: 0px;
}
.files li {
	display: block;
	padding: 2px;
	border: 1px solid transparent;
	cursor: default;
}
body:not(.blur) .files li:not(.selected):hover {
	border-color: #70C0E7;
	background-color: #E5F3FB;
}
.files li.selected {
	border-color: #66A7E8;
	background-color: #D1E8FF;
}
body.blur .files li.selected {
	border-color: #DEDEDE;
	background-color: #F7F7F7;
}
.files li > * {
	display: inline-block;
	vertical-align: middle;
}
.files li > .name {
	position: relative;
	top: -.5px;
	height: 15px;
	font-size: 12px;
}

/* Icons */
.icon {
	width: 16px;
	height: 16px;
	background-size: 16px;
	background-repeat: no-repeat;
	margin-right: 2px;
}
.icon.folder {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACq0lEQVR42nWT/UtTURjHv2tuu3fzZZt3wTLfnU4RLAqLIiuNEILot/6AqKA3+qEXIiKEitLSCsIoCunl9+iHIJIiLEIIKWimTF3WmuXLJrbt7r6ezj3Tuwx8uM95zn043895zn3OtYBaOtbzglj03USDVVdVEJ0AxAJd1+hcY3HRI/S91990rQuLZklN3bDSqNqLarDKthli4hmkVByJ+ALKgm2w2uxLa6HKScyG30RK1ndVmQBjoBBid9exRB7XzuLkx+NIKatRGWyC3eWhldDKNBXTo6+wdkO3ZUVAFrIHE4MHkcwIELw8fFXNFCBD1xTMjL9D2cab/wFiFOD5F9CO8PsDSMs+FHt4CBVNVCwxj09+Qnnz7eWAPz87CedtYAmdlmrjdmF04BBEVUCxm4O3NAiiZgGJqTAqN91ZDlj4cZXwQiMT66oMG9+CkYETkFQvA7j9FTQvMU8vzEGRpd7qLXePmID5b5cI72tkYk2RaDeqMTZ4nQKKGKBQ8NPdM1mIJiOdyqBm632LCYhPdBC+uJ6JVSVD2yUiOtwPSSlggHyPmwmNI3DlV5D4ehaBbQ9ygNnwBcJ5ak2x4bHRt5AVJ7wU4Cx00hZmu+AK3EJ8+AxqWx7mAL9HzhFHUZUpViURvyY+QJYdrALOZaNtVNhdKKi/h7nQKdRt78sBpr6cJraCUlNsxOnvQ5ClPAi0jQ4eTGzYxUwPzjs6ENzxKAeIfj5J8px+U6zRo8zFQhRgoRVkAUt2NHoZ3Ws6Ub/zcQ4wOXSMWO2CKTZ8fmYckkjoTXQtAxCsgqTljzW0PgmYgMjg4X5ZzrRpms7+QtBFyfkoRJF+AwqwchzNE/oQAzFGh96G1qfdJsCw0Ov9JYoktityZi/R9daZ2XQonSR9gUrfy3X7nkewgv0FLcF8ICRfRkwAAAAASUVORK5CYII=);
}