.diary {
    display: flex;

    width: 100%;
    height: 500px;

    border: 1px solid #aaa;

    background: #fffafa;
}


/* LEFT */

.diary-list {
    width: 190px;

    flex-shrink: 0;

    padding: 12px;

    box-sizing: border-box;

    border-right: 1px solid #aaa;

    background: #f5eeee;

    overflow-y: auto;
}


.diary-list h3 {
    margin-top: 0;

    color: #cc4455;
}


/* ENTRY LINKS */

.diary-entry {
    display: block;

    padding: 8px;

    margin-bottom: 7px;

    text-decoration: none;

    border: 1px solid transparent;
}


.diary-entry:hover {
    background: #eee2e2;

    border: 1px dashed #cc4455;
}


.date {
    display: block;

    font-size: 10px;

    color: #888;

    margin-bottom: 3px;
}


.title {
    display: block;

    font-size: 13px;

    color: #555;
}


/* RIGHT */

.diary-content {
    flex: 1;

    min-width: 0;

    height: 100%;

    overflow: hidden;
}


/* THE BLOG */

.diary-content iframe {
    width: 100%;

    height: 100%;

    border: none;
}