/* This is based on sample code from the CSS Ninja: http://cssn.in/ja/026 */
*, html { font-family: Verdana, Arial, Helvetica, sans-serif; }
html { font-size: 100%; /* IE hack */ }
body { font-size: 1em; /* Sets base font size to 16px */ }
table { font-size: 100%; /* IE hack */ }
input, select, textarea, th, td { font-size: 1em; }
body { background-color: #ddd; margin: 0 0; }
img { border: none; }
p { font-size: 1em; margin: 0 0 1em 0; }
input, select, textarea, th, td { font-size: 1em; }
ol.tree { position: absolute; top: 30px; left: 30px; right: 30px; }

li { position: relative; margin-left: -15px; list-style: none; }
li.file { margin-left: 0px !important; }
li.file a { background: url(document.png) 0 0 no-repeat; padding-left: 21px; text-decoration: none; display: block; }
li.file a .filesize { font-size: 0.8em; text-decoration: italic; color: #666; }

li input { position: absolute; left: 0; margin-left: 0; opacity: 0; z-index: 2; cursor: pointer; height: 1em; width: 1em; top: 0; }
li input ~ ol { margin: -0.968em 0 0 -44px; height: 1em; visibility: hidden; opacity: 0; transition: visibility 0.5s linear 0s, opacity 0.25s linear 0s; }
li input ~ ol > li { display: none; margin-left: 0px !important; padding-left: 1px; }

li label { cursor: pointer; display: block; padding-left: 21px; }
li input ~ label { background: url(toggle-small-expand.png) 0 2px no-repeat; }
li input:checked ~ label { background: url(toggle-small.png) 0 2px no-repeat; }

li input:checked ~ ol { margin: -1.25em 0 0 -44px; padding: 1.563em 0 0 64px; height: auto; visibility: visible; opacity: 1; }
li input:checked ~ ol > li { display: block; margin: 0 0 0.125em; }
li input:checked ~ ol > li:last-child { margin: 0 0 0.063em; }