Navigating through multimedia content - Build Windows 8 Apps with HTML5 and JavaScript - page 169

</div>
</div>
</div>
<!-- Template for the zoomed-out master view -->
<div id="zoomed-out-template" data-win-control="WinJS.Binding.Template">
<div class="zoomed-out-item-container">
<h1 data-win-bind="innerText: category"></h1>
</div>
</div>
The elements in the markup are richly styled; so some more work on default.css is in order, too.
Open the file and enter the following CSS styles:
.header-title {
width: 50px;
height: 50px;
padding: 8px;
}
.zoomed-in-item-container {
width: 280px;
height: 70px;
padding: 5px;
overflow: hidden;
display: -ms-grid;
}
.zoomed-in-item-container img {
width: 60px;
height: 60px;
margin: 5px;
-ms-grid-column: 1;
}
.zoomed-in-item-container div {
margin: 5px;
-ms-grid-column: 2;
}
.zoomed-out-item-container {
width: 220px;
height: 130px;
background-color: #31cfd4;
}
.zoomed-out-item-container h1 {
padding: 10px;
line-height: 150px;
white-space: nowrap;
color: #fff;
}