Report file Manager page

by colin_young

HTML

<link rel="stylesheet" href="http://cdn.jsdelivr.net/skeleton/1.2/stylesheets/base.css">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/skeleton/1.2/stylesheets/layout.css">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/skeleton/1.2/stylesheets/skeleton.css">
<div class="container folder">
    <div class="twelve columns folder-header"> 
        <div style="float: left;" class="folder-name">Account</div>
        <ul class="action">
            <li class="permissions">permissions</li>
            <li class="configure">configure</li>
            <li class="upload">upload</li>
            <li class="selected-action">
                <div class="tooltip upload" id="test">upload</div>
                <div class="tooltip configure" id="test">configure</div>
                <div class="tooltip permissions" id="test">permissions</div>
            </li>
        </ul>
    </div>
    <div class="twelve columns file-details"> 
        <span class="file-configured">&#x2713;</span>
        <span class="file">AccountSummary.rpt</span>
        <ul class="action">
            <li class="permissions">permissions</li>
            <li class="configure">configure</li>
            <li class="delete">delete</li>
            <li class="selected-action">
                <div class="tooltip delete" id="test">delete</div>
                <div class="tooltip configure" id="test">configure</div>
                <div class="tooltip permissions" id="test">permissions</div>
            </li>
        </ul>
    </div>
    <div class="twelve columns file-details">
        <span class="file-not-configured">&#x2713;</span>
        <span class="file">AccountTermination.rpt</span>
        <ul class="action">
            <li class="permissions">permissions</li>
            <li class="configure">configure</li>
            <li class="delete">delete</li>
            <li class="selected-action">
                <div class="tooltip delete" id="test">delete</div>
                <div...

CSS

@font-face {
    font-family:'Oxygen';
    font-style: normal;
    font-weight: 400;
    src: local('Oxygen'), local('Oxygen-Regular'), url(http://themes.googleusercontent.com/static/fonts/oxygen/v2/RzoNiRR1p2Mqyyz2RwqSMw.woff) format('woff');
}
@font-face {
    font-family:'Oxygen';
    font-style: normal;
    font-weight: 700;
    src: local('Oxygen Bold'), local('Oxygen-Bold'), url(http://themes.googleusercontent.com/static/fonts/oxygen/v2/yVHpdQrmTj9Kax1tmFSx2j8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
    font-family:'HEDemo';
    src: local('☺'),
         url('https://dl.dropboxusercontent.com/u/11988413/he-demo-icons.eot?#iefix') format('embedded-opentype'),
         url('https://dl.dropboxusercontent.com/u/11988413/he-demo-icons.woff') format('woff'),
         url('https://dl.dropboxusercontent.com/u/11988413/he-demo-icons.ttf')  format('truetype'),
         url('https://dl.dropboxusercontent.com/u/11988413/he-demo-icons.svg') format('svg');
}
div.folder, div.folder-header, div.folder-details {
    box-sizing: border-box;
    font-family: 'Oxygen', sans-serif;
    overflow: auto;
}
div.folder .folder-header {
    background-color: #CCC;
    padding: 10px 0;
}
div.folder .file-details:nth-child(odd) {
    background-color: #F9F9F9;
}
div.folder .folder-name {
    font-weight: bold;
    font-size: larger;
    padding-left: 10px;
}
div.folder .file-configured, div.file-details .file-not-configured {
    padding-right: 10px;
}
div.folder {
    color: #666;
}
div.file-details .file-not-configured {
    color: #EEE;
}
div.file-details .file {
    width: 255px;
}
div.file-details {
    box-sizing: border-box;
    font-size: 90%;
    overflow: auto;
    padding: 5px 20px;
}
div.file-details > span {
    float: left;
}
div.folder .action {
    font-family: HEDemo;
    margin: 0;
}
/* Action menu */
div.folder-header > .action, div.file-details > .action {
    float: right;
    overflow: visible;
}
ul.action .selected-action div {
    font-size:...