essPresenterLayout

by Mike Gleeson

HTML

<div class="containerLeft">
    <div class="categoryView"> <span>My Presentations</span>

    </div>
    <div class="categoryView"> <span>Catergories</span>

        <div class="categoryCBs">
            <label>
                <input value="cb_mypres" type="checkbox" />My Presentations</label>
            <label>
                <input label="cb_myfavs" type="checkbox" />My Favorites</label>
            <label>
                <input label="cb_recview" type="checkbox" />Recently Viewed</label>
            <label>
                <input label="cb_recadded" type="checkbox" />Recently Added</label>
            <label>
                <input label="cb_recupdated" type="checkbox" />Recently Updated</label>
            <label>
                <input label="cb_category1" type="checkbox" />Category 1</label>
            <label>
                <input label="cb_category2" type="checkbox" />Category 2</label>
            <label>
                <input label="cb_category3" type="checkbox" />Category 3</label>
            <label>
                <input label="cb_category4" type="checkbox" />Category 4</label>
            <label>
                <input label="cb_category5" type="checkbox" />Category 5</label>
        </div>
    </div>
</div>
<div class="containerRight">
    <div class="contentView">
        <div class="SearchBar"> <span style="font-weight:bold;">   Search   </span>

            <input type="text" style="min-width:400px;" />
            <input type="button" value="  Search  " class="searchBtn" />
            <input style="float:right;" type="button" value="  Show Favorites  " class="searchBtn" />
        </div>
    </div>
    <div class="contentView">
        <div class="presentationView">
            <div class="divHeader">Recently Added</div>
            <div class="slideThumbnail"> <span>Presentation Title 1</span>
            </div>
            <div class="slideThumbnail"> <span>Presentation Title 2</span>
            </div>
            <div...

CSS

body {
    height:100%;
    width:100%;
}
label {
    display:block;
}
.containerRight {
    overflow:hidden;
    width:auto;
    min-height:960px;
}
.containerLeft {
    float:left;
}
.contentView {
    width:100%;
    height:100%;
    background-color:#4F81BD;
    border-width:3px;
    border-style:solid;
    border-color: #385D8A;
}
.presentationView {
    min-height: 300px;
    width:100%;
    padding-left:70px;
}
.divHeader {
    background-color:#DCE6F2;
    border-style:solid;
    border-width: 3px;
    border-color:#1F497D;
    overflow:hidden;
    padding:5px 5px 5px 5px;
    margin-left:-70px;
    margin-bottom:8px;
    margin-top:8px;
}
.slideThumbnail {
    display:inline-block;
    background-color:#DCE6F2;
    max-width:250px;
    min-width:250px;
    max-height:250px;
    min-height:250px;
    text-align:center;
    padding-top:10px;
    border-color:Black;
    border-width:3px;
    border-style:solid;
    margin-right:10px;
}
.slideThumbnail span {
    font-weight:bold;
    background-color:White;
    border-bottom:thick dotted Black;
    min-width:350px;
}
.categoryView {
    display:block;
    background-color:#4F81BD;
    color:White;
    min-width:230px;
    text-align:center;
    border-color: #385D8A;
    border-style:solid;
    border-width:4px;
    height:100%;
}
.categoryCBs {
    background-color:#FFFFFF;
    color:Black;
    text-align:left;
    height:100%;
    min-height:900px;
}
.SearchBar {
    color:White;
    background-color:#1F497D;
    display:block;
    width:100%;
    border-width:5px;
    border-color: #385D8A;
    border-style:solid;
    border-width:5px;
}
.searchBtn {
    color: White;
    background-color: #4F81BD;
    border-width: 5px;
    border-style: Solid;
    border-color: #385D8A;
}