html { width: 100%; height: 100%; overflow: scroll; font: normal 11px Arial, Helvetica, sans-serif; line-height: 170%; }
body { width: 700px; margin: 30px auto; padding: 10px 0; }

a { color: #4756b1; cursor: pointer; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Styling for the view mode switcher control */

#controls { padding: 5px 0; font-size: 14px; }
#controls .active { font-weight: bold; }

/* General styling of items */

#container { width: 700px; margin: 0; padding: 0; }
#container li { float: left; display: inline; list-style: none; margin: 20px 0 0 0; padding: 10px; border: 1px solid #ccc; }
#container li div a.overlay { display: block; position: absolute; margin: 0; }

/* Styling for list view mode */ 

#container.list li { width: 660px; margin: 20px 0 0 0; }
#container.list li div { height: 150px; overflow: hidden; }
#container.list li a.overlay { width: 660px; height: 150px; background: url('overlay_list.png') repeat-x; }

/* Styling for icon view mode */

#container.icon li { width: 200px; margin: 10px 10px 0 0; }
#container.icon li div { height: 350px; overflow: hidden; }
#container.icon li a.overlay { width: 200px; height: 350px; background: url('overlay_icon.png') repeat-x; }