/** Tropospherical CSS
 *
 * Authors:
 *     Janine Smith <janine@netrophic.com>
 *     Jesse Proulx <jproulx@jproulx.net>
 *     Elizabeth Lubowitz <grrliz@gmail.com>
 *     Denise Paolucci <denise@dreamwidth.org>
 *
 * Copyright (c) 2009 by Dreamwidth Studios, LLC.
 *
 * This program is NOT free software or open-source; you can use it as an
 * example of how to implement your own site-specific extensions to the
 * Dreamwidth Studios open-source code, but you cannot use it on your site
 * or redistribute it, with or without modifications.
 *
 */

/**
 * Dreamwidth Site Scheme
 *
 * Standard layout for Dreamwidth
 *
 * Mockups designed by grrliz, hence grrliz.css
 *
 * @project         Dreamwidth Site Design
 * @author          Jesse Proulx
 * @date            2009-01-07
 * @version         Alpha
 * @revision        $Revision$
 * @copyright       Copyright (c) 2009 by Dreamwidth Studios, LLC
 */

body {
    font: 100%/1 Verdana, Helvetica, Arial, sans-serif;
}

/**
 * Default browser font size is 16px, we want 12px. All width/height measurements
 * are now calculated using the element's font-size in pixels.
 *
 * For example, a 30px wide box with a font-size of 12px = 30/12 = 2.5em
 */

#canvas {
    font-size: .75em;
    line-height: 1.5;
    margin: 0;
    width: 92%;
    padding: 0 4%;
    border-style: solid;
    border-width: 2em 0;
}
.ui-widget {
    font-size: 0.75em;
}

#page {
    max-width: 80em;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/**
 * Masthead is the space for our logo and account links
 */

#masthead {
    height: 8.833333em;
    width: 100%;
    position: relative;
}
#masthead #logo {
    display: block;
    position: absolute;
    top: 2.25em;
    left: 0;
}

#account-links {
    position: absolute;
    top: 0;
    right: 0;
    padding-right: 1em;
    text-align: right;
}
#account-links ul li {
    list-style: none;
    float: left;
    margin: 0 .5em;
}
#account-links li:after {
    content: "•";
    margin-left: .5em;
}
#account-links li:last-child:after {
    content:"";
    margin-left: 0;
}
#account-links #login-table {
    margin-top: 1em;
}
#account-links #login-table td {
    padding: 3px;
    text-align: right;
}
#account-links #login-table td.input-cell,
#account-links #login-table td.remember-me-cell {
    text-align: left;
}
#account-links #login-table td.input-cell a {
    font-size: .8em;
}
#account-links-text {
    float: right;
    padding-right: 1em;
    padding-top: 2em;
}
#account-links-text .ljuser {
    font-size: 1.5em;
}
#account-links-text .ljuser img {
    vertical-align: middle !important;
}
#account-links-userpic {
    float: right;
}
#account-links-userpic img {
    margin-top: 0.75em;
    max-height: 7.5em;
    max-width: 7.5em;
}

/**
 * Menu navigation
 *
 * The menu follows the content in the markup source, so we absolutely position it underneath the masthead
 */

nav[role="navigation"] {
    position: absolute;
    top: 8.833333em;
    left: 0;
    height: 2.5em;
    width: 100%;
    line-height: 2.5em;
    clear: both;
}
nav[role="navigation"] ul {
    margin-left: 0;
}
nav[role="navigation"] ul li {
    float: left;
    position: relative;
    display: block;
    height: 100%;
    width: 0;
}
nav[role="navigation"] ul > li {
    width: auto;
}
nav[role="navigation"] ul li a {
    display: block;
    text-decoration: none;
    text-indent: 2em;
    padding-right: .75em;
}

/* .hover is a class added by js for the currently hovered/focused menu */
nav[role="navigation"] ul li.hover a {
    height: 100%;
    width: auto;
}
nav[role="navigation"] ul li.hover a:hover {
    cursor: pointer;
}
nav[role="navigation"] ul li ul {
    display: none;
}
nav[role="navigation"] ul li.hover ul {
    display: block;
    position: absolute;
    top: 2.5em;
    left: 0;
    width: inherit;
    white-space: nowrap;
    padding-right: 0.5rem;
}
nav[role="navigation"] ul li ul li {
    float: none;
    width: 100%;
}
nav[role="navigation"] ul li ul li a {
    text-align: left;
    display: block;
    width: 100%;
}
nav[role="navigation"] .appwidget-search {
    text-align: right;
    line-height: 2.1em;
    padding-right: .833333em;
    position: static;
}
nav[role="navigation"] .appwidget-search input#search {
    width: 15.5em;
}
nav[role="navigation"] .appwidget-search {
    margin-left: 25em;
}
nav[role="navigation"] .appwidget-search {
    white-space: nowrap;
}
nav[role="navigation"] .appwidget-search input {
    max-width: 30%;
}
nav[role="navigation"] .appwidget-search select {
    max-width: 20%;
}

/**
 * Footer
 */

footer {
    width: 100%;
    height: 4.166667em;
    clear: both;
    padding: .45em 0 0 .63em;
}
footer ul {
    overflow: hidden;
}
footer ul li {
    list-style: none;
    float: left;
    margin-right: .8em;
}

/**
 * #content houses the page-specific innards, and creates margins for the absolutely
 * positioned masthead and footer
 */

#content {
    margin-top: 4.6em;
    margin-bottom: 2.75em;
}
#content h1 {
    font: bold 2em/1.5 Arial, sans-serif;
    margin: 0;
    padding: 0;
}
#content h2 {
    font: 1.5em/1.5 Arial, sans-serif;
    margin: 0;
    padding: 0;
}
#content p {
    margin-bottom: 1em;
}
#content p.note {
    font-style: italic;
    font-size: .8em;
}
#content ul.bullet-list {
    list-style: disc outside;
    margin-left: 2em;
    margin-bottom: 1em;
}

ul, ol {
    margin-left: 1.5em;
}

/**
 * Content Layouts
 *
 * Content layouts are determined based on the class assigned to #content. Potential layouts include:
 * -- wide sidebars
 * -- thin sidebars
 * -- equal width/height columns
 * -- full page (default)
 *
 * Columns/rows inside of #content are named primary, secondary, tertiary, etc and
 * content is placed inside based on order of importance.
 */

/* full page (default) */
#primary,
#secondary {
    width: 100%;
    margin-bottom: 2em;
}

/* 2 column wide right sidebar */
.layout-wide-right-sidebar #primary {
    width: 65%;
    margin-right: 1.25em;
    float: left;
    padding: 0;
}
.layout-wide-right-sidebar #secondary {
    float: right;
    width: 30%;
    margin: 0;
    padding: 0;
    padding-top: .5em;
}

/**
 * Panels are generic boxes for divs inside of #content
 */

#content #primary .panel,
#content #secondary .panel {
    width: 100%;
    border-width: 1px 0 1px 0;
    border-style: solid;
    margin: 0 0 .166667em 0;
    overflow: hidden;
}
#content #primary .panel h2 {
    line-height: 2em;
    border-style: none;
    font: bold 1.5em/2 Arial, sans-serif;
}
#content #primary .panel p {
    clear: both;
}
#content #secondary .panel h2 {
    line-height: 30px;
    border-style: none;
    font: bold 1.166667em/2.142857 Arial, sans-serif;
}
#content .panel .sidebar ul {
     list-style: none;
     margin-left: 0;
}
#content .panel ul {
    list-style: circle;
    margin-left: 2em;
}

/**
 * Panels have different styles for different content layouts
 */

.layout-wide-right-sidebar #primary .panel .sidebar {
    float: left;
    width: 22%;
}
.layout-wide-right-sidebar #primary .panel .contents {
    float: left;
    padding-top: 6px;
    padding-left: 14px;
    width: 75%;
    line-height: 1.8;
}
.layout-wide-right-sidebar #secondary .panel .contents {
    margin: 0.5em 0;
    line-height: 1.8;
}

/* panel-first class is added through js */
#content .panel-first {
    border-top: 0 !important;
}

/**
 * Scheme-specific blocks
 */

#shim-alpha {
    font-size: .75em;
    position: absolute;
    top: 2em;
    left: 0;
    height: 7.833333em;
    width: 100%;
}
#updateinsobject {
    z-index: 5;
}

.highlight-box, .message-box,  .error-box, .alert-box {
    margin: 1em auto;
    padding: 0.5em;
}
.message-box .title {
    font-weight: bold;
}
.message-box h1.title {
    text-align: center;
}

table.grid {
    border-collapse: collapse;
}

form.simple-form fieldset ul {
    padding-top: 3em;
}

.subheader {
    margin: 1em 0 0;
    padding: 0.2em;
    font-size: 110%;
}

/* update.bml */
#draft {
    font-size: medium;
}

/* for pages which we know may have wide content, and we want this content visible */
.self_wrap  #content {
    overflow: visible;
}

#page_talkread #entry, #page_talkread  #Comments .talk-comment,
#page_inbox .InboxItem_Content {
    max-width: 80em;
}

.slidepanel {
    margin-top: -2em;
}

.session-msg-box.info {
    background-color:#e9e9e9;
    border-color:#c8c8c8;
    color:#4f4f4f
}

.session-msg-box.warning {
    background-color:#fbf9dd;
    border-color:#f4efa2;
    color:#4f4f4f
}

.session-msg-box.error {
    background-color:#fff0e4;
    border-color:#ffcaa0;
    color:#4f4f4f
}

.session-msg-box.success {
    background-color:#e1eed7;
    border-color:#c0dbaa;
    color:#4f4f4f
}
