/** Celerity CSS
 *
 * Authors:
 *     Emily Ravenwood <ravenwood@alltrees.org>
 *
 * Copyright (c) 2009 by Dreamwidth Studios, LLC.
 *
 * This program is free software; you may redistribute it and/or modify it under
 * the same terms as Perl itself.  For a copy of the license, please reference
 * 'perldoc perlartistic' or 'perldoc perlgpl'.
 */

 /*  Colors:
    dkgrn=#999966
    text dkgrn=#777711
    ltgrn=#DDDDAA
    vryltgrn=#EEEECC
    grygrn=#EEEEDD
    dkgrygrn=#DDDDCC
    link ltgrn=#888833
    link dkgrn=#666611
 *  Colors for template:
    oddcomment=#EEEECC
    evencomment=#DDDDBB
*/

/**
 * Global
 */

body {
    font-family: Arial, Verdana, sans-serif;
    line-height: 1.25em;
    background-color: #ffffff;
    color: #222211;
}

H1, H2, #content H2, H3, H4, table caption { font-family: "Century Gothic", Verdana, sans-serif;
    font-weight: normal;
    padding: .5em 0;
    line-height: 1.5;
    }
H1 { font-size: 175%; }
H2 { font-size: 150%; }
#content H2, table caption { font-size: 125%; }
H3 { font-size: 125%; }
H4 { font-size: 100%; }

ul { list-style: square;}

a:link,
.link {
    color: #888833;
}
a:visited {
    color: #666611;
}
a:hover,
a:active,
.link:hover {
    text-decoration: none;
}

#canvas {
    padding-top: 1px;  /*to ensure margin*/
}
#page {
    margin-bottom: 2em;
    padding-top: 1px;  /*to ensure margin*/
}
/*Scheme specific div to contain sidebar stripes*/
#page-decoration { background-image: url("/img/celerity/lt-stripe.jpg");
    background-repeat: repeat-x;
    background-position: top;
    width: 9em;
    height: 50px;
    margin-left: 1em;
    margin-top: -50px;
    float: left;
    display: inline; /* to defeat the IE double-margin bug */ }

/**
 * Header
 */
#masthead { position: absolute;
    top: 50px;
    right: 25px;
    }
    #sitename { font-family: "Century Gothic", Verdana, sans-serif;
        font-weight: normal;
        font-size: 175%;
        }
    #sitename a { color: #009e64; }

#account-links {
     position: absolute;
    top: 3px;
    left: 13em;
    text-align: left;
    font-size: small;
}
#account-links ul { list-style: none;
        margin-left: 0;
        padding-left: 0;
        margin-top: 5px;
        white-space: nowrap; /* to make sure the links don't wrap under short usernames */
        }
#account-links li { display: inline; margin-right: 0.5em;}

#account-links li:after {
    content: "•";
    margin-left: 0.5em;
}
#account-links li:last-child:after {
    content:"";
    margin-left: 0;
}

#account-links #login-table td {
    padding: 3px;
    text-align: left;
}
#account-links #login-table td.input-cell,
#account-links #login-table td.remember-me-cell {
    text-align: left;
}

/*Scheme specific divs to contain header stripes*/
#header-divider { position: absolute;
    top: 110px;
    left: 0;
    background-color: #ff6397;
    /*background-image: url("/img/celerity/dk-stripe.jpg");*/
    background-position: right;
    background-repeat: repeat-y;
    width: 100%;
    }
    #header-divider-insert { margin-left: 1em;
        height: 20px;
        width: 9em;
        background: url("/img/celerity/stripes.jpg");
        background-position: center;
        }

#header-search { position: absolute;
    top: 140px;
    right: 22px;
    text-align: right;
    }

/**
 * Sidebar and Menu
 */
nav { position: absolute;
    top: 0;
    left: 1em;
    width: 9em;
    background-color: #7dffcf;
    }
nav ul { margin-left: 5px;
        margin-right: 3px;
        margin-top: 40px;
        padding-left: 0;
        font-size: small;
        list-style: none;
        }
nav ul ul { margin-left: 1em;
            margin-right: 0;
            margin-top: 0;
        }
nav li { padding: .15em 0; }
nav .subnav a,
nav .topnav a {color: #222200; }

#header-userpic { text-align: center;
    height: 100px;
    background-image: url("/img/celerity/square.jpg");
    background-repeat: no-repeat;
    background-position: center;
    }
    #header-userpic img { margin-top: 10px;
        border: none;
        background-color: #DDDDAA; /*so the square doesn't show behind transparent icons */
        }

/**
 * Footer
 */
footer { border-top: 4px double #999966;
    border-bottom: 4px double #999966;
    margin: 1em;
    text-align: center;
    }
    footer ul { list-style: none;
        margin: .25em 0;
        margin-left: 0;
        padding-left: 0;
        }
    footer li { display: inline; }
    footer p { margin: .25em 0;
        padding: 0;
        font-size: small;
        color: #666666;
        }

/**
 * #content
 */
#content {
    margin-left: 1em;
    border-left: 9em solid #DDDDAA;
    margin-top: 170px;
    padding: 1px 1em 1em 1.5em;
    min-height: 73rem;
}

#content p {
    margin-bottom: 1em;
}
#content p.note {
    font-style: italic;
    font-size: 0.8em;
}
#content ul.bullet-list {
    list-style: square outside;
    margin-left: 2em;
    margin-bottom: 1em;
}

/**
 * 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.
 */

 /* Mostly re-measuring width */
/* full page (default) */
#primary,
#secondary {
    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: 0.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-color: #ccc;
    border-style: solid;
    margin: 0 0 0.166667em 0;
    overflow: hidden;
}
#content .panel .sidebar,
#content .panel .contents,
#content .panel .item,
#content .panel .actions {
    border-color: #ccc;
}
#content #primary .panel h2 {
    line-height: 2em;
    border-style: none;
}
#content #primary .panel p {
    clear: both;
}
#content #secondary .panel h2 {
    line-height: 30px;
    border-style: none;
}
#content .panel .sidebar ul {
     list-style: none;
     margin-left: 0;
}
#content .panel ul {
    list-style: square;
    margin-left: 1em;
}

/**
 * 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;
    border-left: 1px solid #ccc;
    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;
}

/* generic classes */
.disabled {
    color: #999 !important;
    background-color: #ddd !important;
    border-color: #ccc !important;
}
.read, .inactive {
    color: #888;
}
.read:hover {
    color: #000;
}
.read a , .inactive a {
    color: #999 !important;
}
.read:hover a {
    color: inherit !important;
}

.detail {
    color: #555;
}
.status-hint {
    color: #ddd;
}

.tablist .tab a {
    background: #DDDDAA;
    color: #000;
    border-color: #999966;
}
.tablist .tab a:hover, .tablist .tab a.active {
    background: #EEEECC;
}
.tab-header {
    background: #EEEECC;
    border-top-color: #EEEECC;
    border-left: 1px solid #999966;
    border-right: 1px solid #999966;
}
.tab-container {
  background-color:#f7f7f7;
  border: 1px solid #999966;
  border-top: none;
}

.action-bar {
    text-align: center;
    background-color: #EEEECC;
}
.action-box .inner, .comment-page-list {
    color: #000;
    border: 1px solid #555555;
    background-color: #DDDDAA;
}

.select-list input {
    color: #222;
    background-color: #DDDDAA;
    border: 2px solid #999966;
}
.select-list input:active {
    color: #555;
    background-color: #EEEEBB;
    border: 2px solid #BBBB88;
}

.message-box .title {
    font-weight: bold;
}
.message-box h1.title {
    text-align: center;
}
.highlight-box {
    border: 1px solid;
}
.highlight, .highlight-box, .pagination .current {
    border-color: #999966;
    background: #EEEECC;
    color: #000;
}
.searchhighlight {
    background: #eeeecc;
    color: #000;
    padding: 0.2em;
    font-weight: bold;
}
.inset-box {
    border-right: 1px solid #DDDDAA;
    border-bottom: 1px solid #DDDDAA;
    background: #fff;
    padding: 3px 5px;
}
.highlight-box, .message-box, .error-box, .alert-box {
    margin: 1em auto;
    padding: 0.5em;
}
.warning-box {
    border: 1px solid #999966;
    background-color: #DDDDAA;
    color: #000;
}
.error-box, .alert-box {
    color: #000;
    background-color: #fcf6db;
    border: 1px solid #ffdfc0;
}

.odd, tr.odd th, tr.odd td {
    background-color: #fff;
}
.even, tr.even th, tr.even td {
    background-color: #eee;
}
thead th, tfoot td {
    background-color: #ffd;
}
.column-table tbody th  {
    background-color: #fbfbfb;
    border-right: 1px solid #cdcdcd;
}

table.grid {
    border-collapse: collapse;
}
table.grid, table.grid td {
    border: 1px solid #999;
}

.select-list li, .NotificationTable td {
    border-color: #ccc;
}
.select-list li img {
    border-color: #EEEECC;
}
.selected, .select-list li.selected, tr.selected td {
    background-color: #EEEECC;
    border-color: #999966;
}

form, fieldset, legend, legend span {
    border-color: #999966;
}
.hint-input {
    color: #777;
    border: 1px solid #CCC;
}
.hint-input:focus
{
    color: #000;
    border: 1px solid #999;
}
.multiple-select {
    background-color: #eee;
}

.table-form table {
  background-color:#fff;
}

.simple-form .error input, form .error input {
    border: 3px solid #ff0000;
}
.simple-form .error .error-msg, form .error .error-msg {
    color: #ff0000;
    display: block;
}

.section-nav {
    background-color: #EEEECC;
}
.section-nav li a, .section-nav ul, .section-nav li, .section-nav-separator {
    border-color: #999966;
    color: #777711;
}
.section-nav li a:visited {
    color: #999966;
}
.section-nav li.on {
    background-color: #fff;
}
.section-nav-content {
    border-color: #999966;
}
.section-nav-inner-wrapper {
    background: url("/img/celerity/celgrn-borderpixel.gif") repeat-y scroll 134px 50%;;
}

.collapsible .collapse-button {
    width: 20px;
}
.collapsible.collapsed .collapse-button {
    background-image: url("/img/celerity/celgrn-arrow-right.gif");
}
.collapsible.expanded .collapse-button {
    background-image: url("/img/celerity/celgrn-arrow-down.gif");
}

.header {
    background-color: #EEEEDD;
    border-bottom: 1px solid #999966;
}
.subheader {
    background-color: #EEEECC;
    border-bottom: 1px solid #999966;
    margin: 1em 0 0;
    padding: 0.2em;
    font-size: 110%;
}

.preview-image {
    border: 1px solid #fff;
}

.token:hover, .token.hover, .token:focus, .token.focus {
    color: #999966;
    border-color:#666611;
}

.token .token_remove:hover, .token .token_remove:focus {
    color: #999966;
    background-color: #EEEECC;
}

#iconselector_icons_list li:hover, .kwmenu .selected, #iconselector_icons_list .iconselector_selected {
    border-color: #999966;
}

.slidecontrols a:hover {
    color: #999966;
}

/* contextualhover.css */
div.ContextualPopup div.Inner {
    background-color: #fff !important;
    color: #000 !important;
    border: 1px solid #999966;
    }
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
        color: #999966 !important;
        }

.ippu {
    color: #000000
}
.ippu .track_title {
    color: #DDDDAA;
}

/**
 * Temporary page-specific styling
 * /
/* talkpage */

.talkform .disabled {
    background: transparent !important;
}

/*S2 talkpage*/
.entry .link, .comment .link {color: #222211; } /*overrides having link color applied to :before and :after elements*/

.comment .header { border-bottom: none; border-right: none; }
.comment-depth-odd > .dwexpcomment .header  { background-color: #EEEECC; }
.comment-depth-even > .dwexpcomment .header { background-color: #DDDBBB; }
.screened .header{ background-color: #EEEEEE; }

/* bml talkpage*/
.cmtbar { border-bottom: none; border-right: none; }
td.odd  { background-color: #EEEECC; }
td.even { background-color: #DDDBBB; }
td.screened { background-color: #EEEEEE; }

/* profile.css */
.section, .username, .actions li {
    background-color: #EEEECC;
    border-bottom: 1px solid #999966;
    color: #777711;
}
.section span.section_link {
    color: #000;
}

/* lj_settings.css */
.section_head {
    background-color: #DDDDAA;
    border: none;
}
.field_name {
    background-color: #EEEECC;
}

/* esn.css */
.CategoryRow td {
    border-bottom: 1px solid #ddd;
}

/* community/settings */
.community-settings legend {
    color: #888833;
}

/* shop pages */
.shop-item-highlight {
    border: 1px solid #999966;
}

/* inbox */
.folders a {
    color: #000;
    border: 1px solid #fff;
}
.folders a.selected {
    background: #EEEECC;
    border-color: #999966;
}
.folders a:hover {
    border-color: #DDDDCC;
    background: #EEEEDD;
}

/* entry.css */
a#lj_userpicselect {color:#999966;}
#lj_userpicselect_img {border:1px solid #fff;}
#lj_userpicselect_img:hover {border:1px solid #999966;}
#lj_userpicselect_img_txt {color:#999966 !important;}
#userpic_preview_image.userpic_loggedout {border:1px solid #999966;}
.userpic_preview_border {border:1px solid #ccc;}
#infobox {border-left:1px solid #000;}
#compose-entry {border-bottom:1px solid #bbb;}
#compose-entry ul li a {background-color:#fff;border:1px solid #bbb;border-bottom:none;}
#compose-entry ul li.on a {border-bottom:1px solid #fff;}
#draft-container {border:1px solid #bbb;border-top:none;}
#draftstatus {background-color:#fff;}
#spellcheck-results {border:1px solid #DDDDAA;background-color: #fff;}
#htmltools {border-right:1px solid #bbb;border-left:1px solid #bbb;background:#fff;}
#htmltools ul {border-bottom:1px solid #8D8D8D;}
#options, #public, #submitbar {border:1px solid #DDDDCC;background-color:#EEEEDD;}

/* create flow */
.appwidget-createaccount .create-button, .appwidget-createaccountprogressmeter .step-block-inactive { color: #222; background-color: #DDDDAA; }
.appwidget-createaccountprogressmeter .step-block-active { color: #fff; background-color: #777711; }
.appwidget-createaccountprogressmeter .step-selected, .appwidget-createaccountprofile .header { color: #777711; }
.appwidget-createaccountprogressmeter .step-previous { color: #DDDDAA; }
.appwidget-createaccountprogressmeter .step-next { color: #222; }
.appwidget-createaccountprofile .field-name { background-color: #e0e0e0; }

/* lj_base-app.css */
hr.hr {
    color: #999966;
    background-color: #999966;
}

.appwidget .more-link {
    color: #999966 !important;
    background: url('/img/arrow-double-black.gif') no-repeat 0 60%;
}

.message {
    border: 5px solid #eee;
}
.message blockquote {
    border: 1px solid #aaa;
}

/* MonthPage */

#archive-month .navigation li, #archive-month .navigation a { display: inline; }

#archive-month .navigation a {
    font-weight: bold;
    background-color: transparent;
    color: #888833;
    text-decoration: underline;
}

#archive-month .navigation a:visited {
    color: #666611;
}
#archive-month .navigation a:hover,
#archive-month .navigation a:active {
    text-decoration: none;
}

#archive-month .highlight-box {margin: auto; text-align: center;display: inline-block;}
#archive-month {text-align: center;}
#archive-month .month {text-align: left;}
#archive-month h3.entry-title {display: inline; font-size:1em;font-weight: normal;}

#archive-month .entry-title, #archive-month .access-filter, #archive-month .poster {margin-left:1em;}
#archive-month .empty {margin: 0;}
#archive-month .datetime {font-style: italic;}
#archive-month .tag li {display: inline; list-style:none;}


.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
}