layout

by secretgspot

HTML

<header id="header">Toolbar</header>

<div id="main" role="main">
    <nav class="" id="sidebar">
        <ul>
            <li><a href="/60062/tasks" title="Tasks" class="nav icons-tasks tasks-target" data-name="tasks">Tasks</a></li>
            <li><a href="/60062/projects" title="Projects" class="nav icons-projects" data-name="projects">Projects</a></li>
            <li><a href="/60062/notes" title="Notes" class="nav icons-notes" data-name="notes">Notes</a></li>
        </ul>
    </nav>
    <div class="three-col task-content" id="content">
        <div class="detail-wrapper">
            <div class="detail" id="detail"></div>
            <div class="detail overlay" id="detail-overlay" style="left: -394px; "></div>
        </div>
        <div class="list">
            <div class="list-header"></div>
            <nav class="list-controls">Navigation</nav>
            <div class="list-body scrollable">

                <section class="task-list-wrapper ui-sortable" style="">

                    <section class="pending empty-list hidden">
                        <div class="header">
                            <button class="small icon" data-action="toggleList"></button>
                            <span class="label" data-type="label">Incoming</span>
                        </div>
                        <ul class="item-wrapper clearfix pending ui-sortable" style=""></ul>
                    </section>

                    <section class="non-section empty-list"><ul class="item-wrapper clearfix droppable ui-sortable"></ul></section>

                    <section class="section">
                        <ul class="item-wrapper clearfix droppable ui-sortable">
                            <div class="section-bar" data-nav="skip" data-type="section" data-id="s_121039">
                                <span class="section-drag-handle draggable"></span>
                                <a href="javascript:void(0)" class="expando" title="Collapse Section"...

CSS

#header {
background: url(https://d1vk1po2s93fx0.cloudfront.net/assets/header/background-1f0a6561a95c8e345fd2d70c2fd064db.png) repeat-x top left;
border-bottom: 1px solid #010101;
height: 48px;
width: 100%;
}
#header #logo {
width: 72px;
background: url(https://d1vk1po2s93fx0.cloudfront.net/assets/header/do-9882af7c3df65986a0bb87044ce20bf6.png) center 2px no-repeat;
cursor: pointer;
}


#main {
position: absolute;
top: 49px;
bottom: 0;
left: 0;
right: 0;
min-width: 1024px;
overflow: hidden;
}
#sidebar {
float: left;
height: 100%;
width: 72px;
background-image: url(https://d1vk1po2s93fx0.cloudfront.net/assets/sidebar/background-406d8f614c631fc7f96b28195857bcc2.png);
border-right: 1px solid #A3A09E;
}
#content {
position: absolute;
left: 73px;
right: 0;
top: 0;
bottom: 0;
}
.icons-sprite, #sidebar .icons-tasks, #sidebar .icons-projects, #sidebar .icons-notes, #sidebar .icons-contacts, #sidebar .icons-activity, #sidebar.ideal .icons-tasks, #sidebar.ideal .icons-projects, #sidebar.ideal .icons-notes, #sidebar.ideal .icons-contacts, #sidebar.ideal .icons-activity {
background: url(https://d1vk1po2s93fx0.cloudfront.net/assets/icons-sd44c27e7f3-6b38038bb02ab61752ca88410248aebb.png) no-repeat;
}
#sidebar .icons-tasks:target, #sidebar .icons-tasks.tasks_target, #sidebar .icons-tasks.tasks-target {
background-position: 0 -144px;
}
#sidebar .nav {
display: block;
width: 72px;
height: 72px;
text-indent: -9999px;
}
.detail-wrapper {
float: right;
width: 432px;
height: 100%;
background: #2D2D2D url(https://d1vk1po2s93fx0.cloudfront.net/assets/background-795c90d31c51caa37ba669e999d607cb.png) repeat;
position: relative;
z-index: 99;
-moz-box-shadow: inset 0px 0px 20px 1px rgba(0,0,0,0.85);
-webkit-box-shadow: inset 0px 0px 20px 1px rgba(0,0,0,0.85);
-o-box-shadow: inset 0px 0px 20px 1px rgba(0,0,0,0.85);
box-shadow: inset 0px 0px 20px 1px rgba(0,0,0,0.85);
}
.list {
position: relative;
height: 100%;
overflow: hidden;
z-index: 100;
background-color: white;
-moz-box-shadow: 4px 0...