<div id='header'>
    <span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
    <span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
    <div id='searchBox' macro='search'></div>
</div>
<div id='mainMenu'>
<div id='submainMenu' refresh='content' tiddler='MainMenu'></div>
<div id='sidebarOptions' refresh='content' tiddler='SideBarOptions'></div>
</div>
<div id='sidebar'>
        <div id='adhome'></div>
        <div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>
<div id='displayArea'>
    <div id='messageArea'></div>
    <div id='tiddlerDisplay'></div>
</div>

/*
 * page layout
 */

body {
    font-family: "Lucida Grande", Helvetica, sans-serif;
}

#header {
    position: relative;
    border-bottom: 2px solid [[ColorPalette::TertiaryDark]];
    padding: 10px 10px 5px;
    background-color: [[ColorPalette::Foreground]];
}

#header,
#header a {
    color: [[ColorPalette::Background]];
}

#header a:hover {
    color: [[ColorPalette::Foreground]];
    background-color: [[ColorPalette::Background]];
}

#searchBox {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

#searchBox .searchButton {
    margin-right: 5px;
    font-weight: bold;
}

/*
 * sidebars
 */

#mainMenu a {
    color: [[ColorPalette::Foreground]];
}

#mainMenu a:hover {
    color: [[ColorPalette::Background]];
    background-color: [[ColorPalette::Foreground]];
}

#mainMenu .logos {
    margin-top: 25px;
}

#mainMenu .logos img {
    width: 100px;
    margin: 2px;
}

#mainMenu .osmologo a {
    display: block; /* adjust height */
    float: right; /* shrink-wrap */
    background-color: #000;
}

#mainMenu .logos a:hover {
    background-color: transparent;
}

#sidebarOptions {
    margin-top: 20px;
}

#sidebarOptions .button {
    padding: 0 2px;
}

#sidebarOptions .button:hover {
    border-color: [[ColorPalette::TertiaryDark]];
}

#sidebarTabs .tabset,
#sidebarTabs .tabContents,
#sidebarTabs .tabsetWrapper a {
    color: [[ColorPalette::Foreground]];
    background-color: [[ColorPalette::Background]];
}

#sidebarTabs .tabsetWrapper a:hover {
    color: [[ColorPalette::Background]];
    background-color: [[ColorPalette::Foreground]];
}

#sidebarTabs .tiddlyLinkNonExisting {
    font-style: italic;
}

/*
 * story
 */

.tiddler {
    margin-bottom: 10px;
    border: 1px solid [[ColorPalette::TertiaryPale]];
    padding-bottom: 10px;
}

.selected {
    border-color: [[ColorPalette::TertiaryLight]];
}

/*
 * comments
 */

.comments {
    margin: 5em 1em 1em;
    border-top: 2px solid [[ColorPalette::TertiaryMid]];
    padding: 2em;
}

.comments .comments {
    margin: 1em;
    border: none;
}

#adsense {
    margin-top: 1em;
    padding: .5em;
    border: solid thin black;
    background: [[ColorPalette::TertiaryPale]];
}

#twitter_div {
    padding-bottom: .5em;
}

#twitter_div  ul {
    display: block;
    padding-left: 0;
    margin-left: 0;
}

#twitter_div  li {
    display: block;
}

#twitter_div span {
    display: block;
}