/** Gradation Vertical 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:
     vrylt=#888888 (borders)
    dk=#333333 (hover ul)
    vrydk=#222222 (hover a)
    med=#444444 (inactive tabs, evencomment)
    lt=#666666 (active tabs)
    altlt=#555555 (oddcomment, footer border)
*/

/**
 * Global
 */

body {
    font-family: Arial, Verdana, sans-serif;
    line-height: 1.25em;
    background-image: url('/img/gradation/blackfade.png');
    background-position: top;
    background-repeat: repeat-x;
    background-color: #111111;
    color: #e9e9e0;
}

H1, H2, H3, H4, table.caption {
    padding: 1em 0;
    line-height: 1em;
    }
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: circle; }

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

#canvas {
    padding-top: 1px;  /*to ensue margin*/
    margin-top: 120px;
}
#page {
    padding-top: 1px;  /*to ensue margin*/
}


/**
 * Header
 */
#masthead {
    position: absolute;
    top: 30px;
    right: 1em;
    }
    #sitename {
        font-weight: bold;
        font-size: 175%;
        }
    #sitename a { color: #ffffff; }

#account-links {
    position: absolute;
    top: 0;
    left: 0;
    height: 100px;
    padding-top: .5em;
    text-align: left;
    font-size: small;
    color: #ffffff;
    z-index: 200; /*keep log-in on top of search bar*/
}
#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 a {color: #ffffff; }

#account-links-text { margin-left: 100px; }

#account-links #login-table { margin-left: 5px; }
#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;
}
#account-links #login_user,
#account-links #login_password {  }
#account-links-userpic { text-align: center;
    height: 100px;
    width: 100px;
    position: absolute;
    top: 10px;
    left: 0;
    }
    #account-links-userpic img {
        border: none;
        }

#header-search { position: absolute;
    top: 120px;
    right: 0;
    width: 100%;
    height: 2.5em;
    text-align: right;
    background-color: #444444;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    }
    #header-search .appwidget-search {
        margin-right: .5em;
        margin-top: .25em;
        }
    #header-search #search {  }

/**
 * Menu
 */

/* Vertical */

body {
    background-color: #222222;
    }

#canvas.vertical-nav {
    margin-left: 8.25em;
    min-height: 60em;
    background-color: #111111;
    padding-bottom: 1px; /* to ensure margin*/
    }

#canvas.vertical-nav #header-search { z-index: 100; }

#canvas.vertical-nav nav { position: absolute;
    top: 120px;
    left: 0;
    width: 8.25em;
    background-color: #222222;
    }
#canvas.vertical-nav nav ul { margin-top: 3.5em; /*to clear search bar */
        padding-left: 0;
        margin-left: 0;
        font-size: small;
        list-style: none;
        }
#canvas.vertical-nav nav ul ul {
            margin-top: 0;  /* undo the above*/
        }
#canvas.vertical-nav nav a {color: #ffffff;
    display: block;
    text-decoration: none; }
nav a:hover { background-color: #444444; }
nav .topnav a {font-weight: bold;
        padding: .20em 5px;}
nav .subnav a {font-weight: normal;
        padding: .20em 5px .20em 1em; }

/* Horizontal */

#canvas.horizontal-nav { background-color: #111111; }

#canvas.horizontal-nav nav {
    position: absolute;
    top: 120px;
    left: 0;
    background-color: #444;
    height: 2.5em;
    width: auto;
    line-height: 2.5em;
    clear: both;
	padding-left: .5em;
	z-index: 100;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}
#canvas.horizontal-nav nav ul { margin-left: 0;
	padding-left: 0;
	list-style: none; }
#canvas.horizontal-nav nav ul li {
    float: left;
    position: relative;
    display: block;
    height: 100%;
    width: 0;
}
#canvas.horizontal-nav nav ul > li {
    width: auto;
}
#canvas.horizontal-nav nav ul li a {
    display: block;
    color: #fff;
    text-decoration: none;
    text-indent: 1.5em;
    padding-right: 0.75em;
}
/* .hover is a class added by js for the currently hovered/focused menu */
#canvas.horizontal-nav nav ul li.hover a {
    height: 100%;
    background-color: #333;
    color: #fff;
    width: 100%;
}
#canvas.horizontal-nav nav ul li.hover a:hover {
    background-color: #222;
    cursor: pointer;
}
#canvas.horizontal-nav nav ul li ul {
    display: none;
}
#canvas.horizontal-nav nav ul li.hover ul {
    display: block;
    position: absolute;
    top: 2.5em;
    left: 0;
    width: inherit;
    white-space: nowrap;
    background-color: #333;
}
#canvas.horizontal-nav nav ul li ul li {
    float: none;
    width: 100%;
}
#canvas.horizontal-nav nav ul li ul li a {
    text-align: left;
    display: block;
    width: 100%;
}

/* This is to make the update page look decent in horizontal */

#canvas.horizontal-nav #updateForm { margin: 0 auto; }

/**
 * Footer
 */
footer {
    margin: 1em;
    text-align: center;
    border-top: 1px solid #555555;
    clear: both;
    }
    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: #999999;
        }

/**
 * #content
 */
#content { margin: 0;
    padding: 1px 1em 1em 1.5em;
    margin-top: 2em;
}

#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.155567em 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: circle;
    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;
}

textarea, input {
    background-color: #222;
    color: #fff;
    border: 1px solid #888;
}

.recaptchatable input {
    color: #fff;
}

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

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

.tablist .tab a {
    background: #444444;
    border-color: #888888;
    color: #eeeeee;
}
.tablist .tab a:hover, .tablist .tab a.active {
    background: #666666;
}
.tab-header {
    background: #666666;
    border-top-color: #666666;
    border-left: 1px solid #888888;
    border-right: 1px solid #888888;
}
.tab-container {
  background-color:#222;
  border: 1px solid #888;
  border-top: none;
}

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

.select-list input {
    background: #444444;
    color: #fff;
    border: 2px solid #444;
    border-top: 2px solid #888;
    border-left: 2px solid #888;
}
.select-list input:active {
    background: #666666;
    color: #eee;
    border: 2px solid #888;
    border-top: 2px solid #444;
    border-left: 2px solid #444;
}

.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: #888888;
    background: #333333;
    color: #fff;
}
.searchhighlight {
    background: #333;
    color: #fff;
    padding: 0.2em;
    font-weight: bold;
}
.inset-box {
    background: #111;
    border: 1px solid #888;
    padding: 3px 5px;
}
.highlight-box, .message-box, .error-box, .alert-box {
    margin: 1em auto;
    padding: 0.5em;
}
.warning-box {
    border: 1px solid #fff;
    background-color: #333;
    color: #fff;
}
.error-box, .alert-box {
    color: #fff;
    background-color: #916E10;
    border: 1px solid #ffdfc0;
}

.odd, tr.odd th, tr.odd td {
    background-color: #111;
}
.even, tr.even th, tr.even td,
thead th, tfoot td {
    background-color: #1a1a1a;
}
.column-table tbody th {
    background-color: #333;
    border-right: 1px solid #888888;
}

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

.select-list li, .NotificationTable td {
    border-color: #888;
}
.select-list li img {
    border-color: #666666;
}
.selected, .select-list li.selected, tr.selected td {
    background-color: #666666;
    border-color: #888888;
}

form, fieldset, legend, legend span {
    border-color: #888888;
}
.hint-input {
    color: #999;
    border: 1px solid #888888;
}
.hint-input:focus {
    color: #fff;
    border: 1px solid #888888;
}
.multiple-select {
    background-color: #444444;
}

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

.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: #444444;
}
.section-nav li a, .section-nav ul, .section-nav li, .section-nav-separator {
    border-color: #888888;
}
.section-nav-content {
    border-color: #888888;
}
.section-nav li.on {
    background-color: #111;
}
.section-nav li a:visited {
    color: #888888;
}
.section-nav-inner-wrapper {
    background: url("/img/gradation/gradgray-borderpixel.gif") repeat-y scroll 134px 50%;
}

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

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

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

/* posts page */
.slidepanel {
    margin-top: 0.5em;
}

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

.ippu {
    color: #eee
}
.ippu .track_title {
    color: #444444;
}

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

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

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

.screened .header {
    border-bottom: none;
    border-right: none;
    background-image: url("/img/gradation/blackfade_screened.png") !important;
    background-position: top;
    background-repeat: repeat-x;
    background-color: #333333;
}

.comment .header {
    border-bottom: none;
    border-right: none;
    background-image: url("/img/gradation/blackfade.png");
    background-position: top;
    background-repeat: repeat-x;
}
.comment-depth-odd > .dwexpcomment .header { background-color: #444444; }
.comment-depth-even > .dwexpcomment .header { background-color: #555555; }


/*bml talkpage*/
.cmtbar {
    border-bottom: none;
    border-right: none;
    background-image: url("/img/gradation/blackfade.png");
    background-position: top;
    background-repeat: repeat-x;
}

td.odd { background-color: #444444; }
td.even { background-color: #555555; }
td.screened {
    border-bottom: none;
    border-right: none;
    background-image: url("/img/gradation/blackfade_screened.png") !important;
    background-position: top;
    background-repeat: repeat-x;
    background-color: #333333;}

/* lj_settings.css */
.section_head, div.username {
    background-color: #666666;
    color: #CCC;
}
.field_block .field_name { background: #333333; }

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

/* For the community/settings page */
.community-settings legend {
    color: #CCCC99;
    }

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

/* inbox */
.folders a {
    color: #fff;
    border: 1px solid #111;
}
.folders a.selected {
    background: #333;
    border-color: #999;
}
.folders a:hover {
    border-color: #666;
    background: #666;
}
/* entry.css */
a#lj_userpicselect {color: #888888;}
#lj_userpicselect_img {border: 1px solid #111111;}
#lj_userpicselect_img:hover {border: 1px solid #888888;}
#lj_userpicselect_img_txt {color: #888888 !important;}
#userpic_preview_image.userpic_loggedout {border: 1px solid #888888;}
.userpic_preview_border {border: 1px solid #ccc;}
#infobox {border-left: 1px solid #eee;}
#entry {border-bottom: 1px solid #bbb;}
#entry ul li a {background-color: #222;border: 1px solid #bbb;border-bottom: none;}
#entry ul li.on a {background-color: #222;border-bottom: 1px solid #222;}
#draft-container {border: 1px solid #bbb;border-top: none;}
#draftstatus {background-color: #222;}
#spellcheck-results {border: 1px solid #444444;background-color: #222;}
#htmltools {border-right: 1px solid #bbb;border-left: 1px solid #bbb;background: #222;}
#htmltools ul {border-bottom: 1px solid #8D8D8D;}
#options, #public, #submitbar {border: 1px solid #888888;background-color: #444444;}
#compose-entry ul li.on a {background-color: #222;} /* # Makes sure the tab doesn't end up white */

/* create flow */
.appwidget-createaccount .create-button { color: #eee; background-color: #444444; }
.appwidget-createaccountprogressmeter .step-block-active { color: #111111; background-color: #888888; }
.appwidget-createaccountprogressmeter .step-block-inactive { color: #111111; background-color: #444444; }
.appwidget-createaccountprogressmeter .step-selected, .appwidget-createaccountprofile .header { color: #888888; }
.appwidget-createaccountprogressmeter .step-previous { color: #444444; }
.appwidget-createaccountprogressmeter .step-next { color: #666666; }
.appwidget-createaccountprofile .field-name { background-color: #e0e0e0; }

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

input.text,
textarea.text,
select,
.autocomplete_container {
    /*background: #fff url("/img/input-bg.gif") repeat-x 0 -1px;*/
    background-color: #222;
    border: 1px solid #666666;
    border-top: 1px solid #888888;
    border-left: 1px solid #888888;
    color: #ccc;
}
.appwidget .more-link {
    color: #888888 !important;
    background: url('/img/arrow-double-black.gif') no-repeat 0 60%;
}

.arrow-link,
.more-link {
    background: url('/img/arrow-double-black.gif') no-repeat 0 50%;
}

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

/* profile.css */
.section, .username, .actions li {
    background-color: #444444 !important;
    border: none;
    color: #fff;
}
.actions li { border-top: 1px solid #888888; }
.section span.section_link {
        color: #ccc;
    }

/* tags.css */
.taginfo {
    background-image: none;
    background-color: #222;
    border-color: #888;
    color: #CCC;
}

/* manage/settings */

.display_label {
    color: #fff;
}

.display_option, .mobile_option, .privacy_option, .othersites_option {
    color: #fff;
}

/* Support */

div.box {
    color: #fff !important;
}

/* This makes the FAQ header not overlap with itself */
.box h1 {
    line-height: 1em;
}

div.blue {
    background-color: #3D606B !important;
    border:1px solid #6DB5C2 !important;
}

div.green {
    background-color: #2B5229 !important;
    border:1px solid #53914D !important;
}

.green, .green td {
    background-color: #2B5229 !important;
}
.yellow, .yellow td {
    background-color: #815E00 !important;
}
.red, .red td {
    background-color: #831815 !important;
}
.clicked, .clicked td {
    background-color: #3D606B !important;
}

/* For the manage/circle page */
/* These are in the page CSS, so must be important. */

.editfriends td, .editfriends td, .editfriends th, #addfriends td, #addfriends th {
    border-color: #888 !important;
}

.editfriends tr:hover {
    background-color: #333 !important;
}

/* /manage/circle/filters */

.editfilters select {
    background-color: #222;
    color: #CCC;
}

/* Import */

h1.gradient, h2.gradient, h3.gradient, h4.gradient, h5.gradient {
    background-image: none;
    background-color: #222;
    border-color: #888;
}

.importer .importoption {
    background-color: #222;
    border-color: #888;
}

.importer .importoption p {
    color: #888;
}

.importer-status .table-header {
    background-color: #222;
}

.importer-status td {
    border-color: #444;
}

/* manage/subscriptions/filters */

#cf-select, #cf-edit, #cf-filtopts, #cf-intro {
    background-color: #222;
    border-color: #888;
}

div#cf-edit select {
    background-color: #111;
    border-color: #888;
    color: #888;
}


.proptbl .h {
    background-image: none;
    background-color: #222;
}

/* MonthPage */

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

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

#archive-month .navigation a:visited {
    color: #999966;
}
#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;}

#canvas .row {
    margin-top: 2em;
    padding: 1.5em 1.5em 0em;
    margin-bottom: -2em;
}

#canvas .appwidget-currenttheme .row {
    margin: 0;
    padding: 0;
}

/** Dark theme for color picker **/

#clr-picker {
  background-color: #444;
}

#clr-picker .clr-segmented {
  border-color: #777;
}

#clr-picker .clr-swatches button:after {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}

#clr-picker input.clr-color {
  color: #fff;
  border-color: #777;
  background-color: #555;
}

#clr-picker input.clr-color:focus {
  border-color: #1e90ff;
}

#clr-picker .clr-preview:after {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}

#clr-picker .clr-alpha,
#clr-picker .clr-alpha div,
#clr-picker .clr-swatches button,
#clr-picker .clr-preview:before {
  background-image: repeating-linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #888 75%, #888), repeating-linear-gradient(45deg, #888 25%, #444 25%, #444 75%, #888 75%, #888);
}