/* Body, base and containers */
body {
    background-color: #dde;
    word-wrap: break-word;
}

.container {
    padding: 0 20px;
    background-color: #F6F6F6;
    box-shadow: 0 0 10px -5px #000000;
    margin-bottom: 20px;
    border-radius: 0 0 8px 8px;
}

/* Header */
.page-header,.logopic,.footer,.nav-pills {
    width: 100%;
    padding: 0 20px;
    margin-left: -20px;
}

.page-header {
    background: #1D2A4F no-repeat 0 0;
    height: 80px;
    font-family: Georgia, Times, serif;
}

.logopic {
    height: 240px;
    position: relative;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
}

.logopic-sourcelink {
    position: absolute;
    left: 8px;
    top: 8px;
    padding: 1px 6px;
    font-size: 12px;
    background-color: #333;
    background-color: rgba(50, 50, 50, 0.6);
    color: white;
    text-decoration: underline;
    display: inline-block;

    opacity: 0;
    pointer-events: none;
    transition-property: opacity;
    transition-duration: 500ms;
}

.logopic-sourcelink:hover {
    color: #cdcae9;
}

.logopic:hover .logopic-sourcelink {
    opacity: 1;
    pointer-events: auto;
}

.carousel {
    width: 500px;
    float: right;
    padding: 0 27px;
    margin: 20px 40px 0 0;
    max-height: 200px;
    overflow: hidden;
}

.carousel .slidesjs-container {
    background-color: rgba(255, 255, 255, 0.8);
}

.carousel h3 {
    padding-bottom: 4px;
}

.carousel p {
    line-height: 20px;
    margin-bottom: 4px;
    width: 97%;
}

.carousel .story-item {
    margin: 0px!important;
}
.carousel p.meta .gen {
    margin-bottom: 4px;
}

.carousel p.meta {
    margin-bottom: 0;
}

.slidesjs-navigation img {
    width: 32px;
    height: 32px;
}
a.slidesjs-navigation {
    position: relative;
    top: -37px;
    left: 425px;
    padding: 2px;
}


/* Footer */

.footer {
    font-size: 16px;
    line-height: 30px;
    padding: 10px 20px;
    background: #1D2A4F no-repeat 0 0;
    color: #FAFAE8;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

.footer a {
    color: inherit;
    text-decoration: underline;
}


/* NAVIGATION */

/* Common styles for header and footer nav */

ul.nav-items {
    list-style: none outside none;
    margin: 0;
}

ul.nav-items-right {
    float: right;
}

ul.nav-items > li {
    display: inline-block;
}

ul.nav-items > li.left {
    float: left;
}

ul.nav-items > li.right {
    float: right;
}

ul.nav-items > li > a {
    display: inline-block;
    line-height: 14px;
    padding: 8px 12px;
    color: #FAFAE8;
}

ul.nav-items > li.active a,
ul.nav-items > li:hover a {
    background-color: #FAFAE8;
    border-radius: 5px;
    color: #1D2A4F;
}

ul.nav-items > li.active a {
    text-decoration: none;
}


/* Header nav */

.nav-main {
    background: #1D2A4F no-repeat 0 0;
    margin-bottom: 0;
    font-size: 16px;
    overflow: visible;
    min-height: 40px;

    /* bootstrap sucks */
    margin-left: -20px;
    margin-right: -20px;
}

ul.nav-main-links {
    float: left;
    padding: 5px 20px 5px 20px;
    box-sizing: border-box;
}

.nav-main-profile {
    float: right;
    text-align: right;
    box-sizing: border-box;
    margin: 5px 0;
}

.nav-main-profile > ul.nav-items {
    margin: 0 20px;
}


.nav-icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 0 5px;
    cursor: pointer;
    background: none center center no-repeat;
    background-size: 16px 16px;
}

.nav-icon:hover, .nav-icon.active {
    background-color: #FAFAE8;
    border-radius: 5px;
}

.nav-icon-add {
    background-image: url('../i/icon-add.png');
    float: left;
}

.nav-icon-add:hover, .nav-icon-add.active {
    background-image: url('../i/icon-add-active.png');
}

/* Notification button */
.nav-icon-bell {
    background-image: url('../i/icon-bell.png');
    float: left;
    position: relative;
}
.nav-icon-bell:hover, .nav-icon-bell.active {
    background-image: url('../i/icon-bell-active.png');
}

.nav-icon-bell > .new-count {
    position: absolute;
    top: 10%;
    right: 10%;
    display: block;
    background-color: #d00;
    border-radius: 50%;
    font-size: 10px;
    color: white;
    line-height: 1em;
    min-width: 1em;
    min-height: 1em;
    text-align: center;
    padding: 2px;
    pointer-events: none;
}

.nav-icon-bell-link {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.bell-popup {
    position: absolute;
    right: 0;
    background-color: #F6F6F6;
    top: 35px;
    width: 370px;
    overflow: visible;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.bell-popup-content {
    min-height: 3em;
    max-height: 25em;
    overflow: auto;
    cursor: auto;
    text-align: left;
}

.bell-popup:before {
    position: absolute;
    bottom: 100%;
    right: 9px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-bottom-color: #F6F6F6;
    content: '';
    pointer-events: none;
}

.mobile-menu-btn {
    display: none;
    float: left;
    background-image: url('../i/mobile-menu.png');
}

.mobile-menu-btn:hover, .mobile-menu-btn.active {
    background-image: url('../i/mobile-menu-active.png');
}

.nav-profile-menu {
    position: relative;
    display: inline-block;
}

.nav-profile-menu-header {
    line-height: 30px;
    color: white;
    cursor: pointer;
}

.nav-profile-menu-text {
    display: inline-block;
    padding: 0 10px;
    vertical-align: top;
}

.nav-profile-menu-text:before {
    display: inline-block;
    content: '';
    width: 12px;
    height: 12px;
    background: url('../i/menu-arrow.png') center center no-repeat;
    background-size: 12px 12px;
    vertical-align: middle;
    margin-right: 5px;
}

.nav-profile-menu-header:hover .nav-profile-menu-text {
    background-color: #FAFAE8;
    color: #1D2A4F;
    border-radius: 5px;
}

.nav-profile-menu-header:hover .nav-profile-menu-text:before {
    background: url('../i/menu-arrow-active.png') center center no-repeat;
    background-size: 12px 12px;
}


.nav-user-avatar {
    width: 30px;
    height: 30px;
    margin: 0 5px;
    vertical-align: top;
    display: inline-block;
}

ul.nav-profile-menu-content {
    position: absolute;
    background-color: #1D2A4F;
    list-style: none;
    margin: 5px 0 0 0;
    padding: 0;
    min-width: 100%;
    text-align: left;
    right: 0;
    z-index: 10;
    white-space: nowrap;
    display: none;
}

ul.nav-profile-menu-content.shown {
    display: block;
}

ul.nav-profile-menu-content > li {
    margin: 0;
    display: block;
    line-height: 30px;
    padding: 5px 20px;
}

ul.nav-profile-menu-content > li > a {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 640px) {
    ul.nav-main-links {
        float: none;
        clear: both;
        display: none;
    }

    ul.nav-main-links.shown {
        display: block;
    }

    ul.nav-main-links.nav-items > li {
        display: block;
    }

    ul.nav-items > li > a {
        width: 100%;
        box-sizing: border-box;
    }

    .mobile-menu-btn {
        display: inline-block;
        margin: 5px;
    }
    .nav-icon {
        width: 7%;
        width: calc(30px);
    }
    .nav-main-profile {
        width: 93%;
        width: calc(100% - 40px);
    }
    .nav-profile-menu {
        width: 86%;
        width: calc(100% - 80px);
        min-width: auto;
    }
}

/* Login form */
.login-form {
    margin: 2px 0 0;
}

.login-form input {
    border-color: transparent;
}

.login-form .input-small {
    width: 110px;
}

.login-form a {
    font-size: 11px;
    line-height: 12px;
    margin-left: 6px;
    display: inline-block;
    vertical-align: middle;
}

/* Breadcrumbs */
.breadcrumb {
    margin-bottom: 0;
    padding: 14px 0 8px;
}
/* End Header, Menus, Login Form and Breadcrumbs */

/* Headings and stuff inside them */
h1 {
    font-size: 32px;
    line-height: 42px;
    margin: 6px 0 6px;
}

h1 sup {
    font-size: 17px;
}

h2 {
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 6px;
}

h2 sup {
    font-size: 14px;
}

h3 {
    font-size: 20px;
    line-height: 20px;
    margin: 0 0 5px;
}

h3 sup {
    font-size: 12px;
    color: gray;
}

h4 {
    font-size: 17px;
    line-height: 20px;
    margin: 0 0 5px;
}

/* Index-specific stuff */
.welcome-box {
    margin-top: 16px;
}

.genra {
    margin-bottom: 16px;
}

/* Story item */
.story-item {
    padding: 10px 12px 6px;
    margin: 0 0 10px -12px;
}

#content .story-item:nth-child(2n+1), .comment-item:nth-child(2n+1), .comment-tree-loader:nth-child(2n+1) {
    background-color: #fefefe;
}

.notification .comment-item:nth-child(2n+1) {
    background-color: transparent;
    padding: 0;
}

.sidelist.top-list .story-item {
    padding: 8px 12px 10px;
    margin-bottom: 6px;
}

.story-item h3 {

}

.story-item h4 {

}

.sidelist .story-item h3 {
    font-size: 16px;
    line-height: 18px;
}

.story-item p {
    font-size: 12px;
    margin-bottom: 4px;
}

.sidelist .story-item h3 {
    margin: 0 0 3px;
}

.sidelist .story-item p {
    font-size: 11px;
    line-height: 16px;
    margin-bottom: 0;
    color: #999;
}

a.authorlink,a.edit-link {
    color: #999;
}

a.authorlink:hover,a.edit-link:hover {
    color: #ff3368;
}

.story-item p.meta {
    font-size: 12px;
    color: #999;
}

img.avatar-small, .character-list img {
    width: 20px;
    height: 20px;
    margin-right: 4px;
}

.more {
    margin: 0 0 30px;
    font-size: 12px;
}

.story-control-btn {
    float: right;
    font-family: 'Trebuchet MS', Arial, sans-serif;
    font-weight: normal;
}

.story-control-btn a {
    text-decoration: none;
}

/* Vote-buttons */
.vote-area {
    display: block;
    margin: 10px 0px;
}

.starblock {
    display: inline-block;
    width: 120px;
    height: 24px;
    vertical-align: middle;
    line-height: 24px;
    overflow: hidden;
}

.vote-area .starblock {
    vertical-align: baseline;
}

.starvote {
    background: transparent url('../i/votes.png') no-repeat;
    width: 24px;
    height: 24px;
    display: inline-block;
    background-position: 0px 0px;
    background-size: 100%;
}

.starvote.star-button:hover {
    background-position: 0px -48px;
}

.starvote.star-0 {
    background-position: 0px 0px;
}

.starvote.star-1 {
    background-position: 0px -24px;
}

.starvote.star-2 {
    background-position: 0px -48px;
}

.starvote.star-3 {
    background-position: 0px -72px;
}

.starvote.star-4 {
    background-position: 0px -96px;
}

.starvote.star-5 {
    background-position: 0px -120px;
}

.starvote.star-6 {
    background-position: 0px -144px;
}

h1 .alert {
    display: inline-block;
    font-size: 12px;
    line-height: 12px;
    padding-right: 14px;
    margin: 0;
    position: relative;
    top: 4px;
    vertical-align: top;
}

/* Thumbnails */
.thumbnail,.characters-select img,.story-thumbnails img {
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
    border: 1px solid #eee;
    padding: 4px;
    background: rgba(255, 255, 255, 0.7)
}

.story-page .thumbnail,.story-thumbnails img {
    margin-right: 4px;
}

.characters-select img {
    margin-bottom: 4px;
}

.characters-group {
    display: inline-block;
    padding-right: 23px;
}

/* Genra */
.gen {
    padding: 4px 9px;
    border-radius: 5px;
    color: #fff;
    text-decoration: none;
    display: inline-block;
    line-height: 16px;
    margin: 0 4px 4px 0;
}

.error .gen {
    color: #ffffff !important;
}

p.meta .gen {
    padding: 2px 7px;
    margin: 0 4px 0 0;
}

a.gen:hover {
    color: #fff;
    background-color: #999;
}

label.gen {
    min-height: 18px;
}

label.gen input {
    margin: 2px 4px 0 0 !important;
}

/* Story page */
.story-page {
    margin-bottom: 60px;
}

.green,.complete {
    color: green;
}

.on-moderation {
    color: #ff7700;
}

.incomplete, .draft {
    color: #f2c200;
}

.suspended {
    color: red;
}

.translation {
    color: #aaa;
}

.story-chapters {
    margin-top: 12px;
}

.more-info p, .more-info form {
    font-size: 12px;
    font-weight: 300;
}

#story_chapters {
    list-style-type: none;
    margin-left: 0;
}

#story_chapters li {
    padding: 0 0 6px;
    font-size: 12px;
}

#story_chapters h4 {
    margin-bottom: 0;
}

.chapter-text {
    width: 70%;
    margin: 0 auto;
    font-family: Verdana, Arial, sans-serif;
    font-size: 14px;
    line-height: 26px;

    -ms-hyphens: none;
    -moz-hyphens: none;
    -webkit-hyphens: none;
    hyphens: none;
}

.chapter-text p,.chapter-text span {
    margin-bottom: 20px;
}

.chapter-text.mode-justify {
    text-align: justify;
    -moz-text-align-last: left;
    text-align-last: left;

    -ms-hyphens: manual;
    -moz-hyphens: manual;
    -webkit-hyphens: manual;
    hyphens: manual;
}

.chapter-text.mode-indent-left p, .chapter-text.mode-indent-left span {
    margin-bottom: 0px;
    text-indent: 2em;
}

.chapter-text p[align="center"],.chapter-text span[align="center"] {
    display: inline-block;
    width: 100%;
    text-align: center;
}

.chapter-text p[align="left"],.chapter-text span[align="left"] {
    text-align: left;
}

.chapter-text p[align="right"],.chapter-text span[align="right"] {
    display: inline-block;
    width: 100%;
    text-align: right;
}

.chapter-text.mode-justify p[align="center"], .chapter-text.mode-justify span[align="center"] {
    display: inline-block;
    width: 100%;
    text-align: center;
    -moz-text-align-last: center;
    text-align-last: center;
}

.chapter-text.mode-indent-left p[align="center"], .chapter-text.mode-indent-left span[align="center"] {
    text-indent: 0;
}

.chapter-text.mode-justify p[align="left"], .chapter-text.mode-justify span[align="left"] {
    text-align: justify;
    -moz-text-align-last: left;
    text-align-last: left;
}

.chapter-text.mode-justify p[align="right"], .chapter-text.mode-justify span[align="right"] {
    display: inline-block;
    width: 100%;
    text-align: justify;
    -moz-text-align-last: right;
    text-align-last: right;
}

/* Режимы просмотра текста */
.chapter-text.serif-font {
    font-family: Georgia, Utopia, Palatino, 'Palatino Linotype', serif;
    /* 'Times New Roman', Times, serif */
    font-size: 16px;
    line-height: 28px;
}

.chapter-text.mono-font {
    font-family: 'Courier New', Courier, monospace;
    font-size: 15px;
}

.chapter-text.small-font {
    font-size: 12px;
}

.chapter-text.big-font {
    font-size: 17px;
}

.chapter-text.serif-font.big-font {
    font-size: 21px;
    width: 90%;
}

.chapter-text.serif-font.small-font {
    font-size: 13px;
}

.chapter-text.mono-font.big-font {
    font-size: 21px;
    width: 90%;
}

.chapter-text.mono-font.small-font {
    font-size: 13px;
    line-height: 22px
}

.chapter-text.serif-font p {

}

.chapter-text.mono-font p {

}

.chapter-text.serif-font.small-font p {

}

.chapter-text.mono-font.small-font p {

}

hr {
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #ddd;
}

/* Storypanel */
.story-panel {
    margin-left: -12px;
    margin-right: -12px;
    background-color: #fff;
    padding: 10px 10px 10px 14px;
    border-radius: 10px;
    line-height: 16px;
    font-size: 12px;
    box-sizing: border-box;
    z-index: 10;
    transition-property: opacity;
    transition-duration: 200ms;
}

.story-panel-sticky {
    position: sticky;
    top: 0;
}

.story-panel.no-js .js-required {
    display: none;
}

.story-panel .scon.up {
    transition: opacity;
    transition-duration: 250ms;
    opacity: 0;
    pointer-events: none;
    vertical-align: middle;
}

.story-panel.story-panel-floating {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    opacity: 0;
}

.story-panel.story-panel-floating:hover {
    opacity: 1;
}

.story-panel.no-js .scon.up,
.story-panel.story-panel-floating .scon.up {
    opacity: 1;
    pointer-events: auto;
}

.story-panel select {
    height: auto;
    font-size: 11px;
    margin-bottom: 0;
    padding: 2px;
    vertical-align: middle;
}

select.select-font {
    width: 110px;
}

select.select-size {
    width: 90px;
}

.btn-mini-story-style {
    padding: 0;
    line-height: 1;
}

.btn-mini-story-style > .story-style-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 3px;
    vertical-align: top;

    background: url('../i/story-style-buttons.png');
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

.btn-mini-story-style.story-style-align-left > .story-style-icon {
    background-position: 0px 0px;
}

.btn-mini-story-style.story-style-align-justify > .story-style-icon {
    background-position: 0px -12px;
}

.btn-mini-story-style.story-style-indent-bottom > .story-style-icon {
    background-position: -12px 0px;
}

.btn-mini-story-style.story-style-indent-left > .story-style-icon {
    background-position: -12px -12px;
}


.story-item .chapter-controls {
    float: right;
    margin-left: 12px;
}

.chapter-controls .get,.chapter-controls .scon {
    margin-left: 4px;
    margin-right: 0;
}

.chapter-switch, .chapter-switch .left {
    margin-right: 20px;
}

.get,.scon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    vertical-align: top;
    cursor: pointer;
}

.get:hover,.scon:hover {
    opacity: 0.75;
}

.story-panel .get, .story-panel .scon {
    vertical-align: middle;
}

.pdf {
    background: transparent url('../i/pdf.png') no-repeat 0 0;
}

.txt {
    background: transparent url('../i/txt.png') no-repeat 0 0;
}

.html {
    background: transparent url('../i/html.png') no-repeat 0 0;
}

.fb2 {
    background: transparent url('../i/fb2.png') no-repeat 0 0;
}

.mobi {
    background: transparent url('../i/epub.png') no-repeat 0 0;
}

.up {
    background: transparent url('../i/up.png') no-repeat 0 0;
}

.down {
    background: transparent url('../i/down.png') no-repeat 0 0;
}

.smaller {
    background: transparent url('../i/smaller.png') no-repeat 0 0;
}

.bigger {
    background: transparent url('../i/bigger.png') no-repeat 0 0;
}

.favorite {
    background: transparent url('../i/star.png') no-repeat 0 0;
}

.bookmark {
    background: transparent url('../i/bookmark.png') no-repeat 0 0;
}

.feed {
    background: transparent url('../i/feed.png') no-repeat 0 0;
}

.feed:hover,.favorited,.scon.favorite:hover,.bookmarked,.bookmark:hover
    {
    background-position: 0 -16px;
    opacity: 1;
}

p.meta .chapter-controls {
    padding: 2px;
}

.alert-mini {
    padding: 3px;
}

/* Series page */
.series-item {
    margin-bottom: 30px;
}

.series-item .story-item {
    margin-left: 8px;
}

.series-item h2 {
    font-size: 26px;
}

.series-block {
    padding-bottom: 20px;
}

.series-block h2 button {
    vertical-align: top;
    margin-top: 3px;
}

.series-block .story-item ul li {
    margin: 6px 0;
}

.series-block .story-item ul li sup .green {
    font-size: 13px;
}

/* Author and contributing stories tabs */

.tab-author-stories-input,
.tab-contributing-stories-input {
    display: none;
}

.tab-author-stories-input + label,
.tab-contributing-stories-input + label {
    display: inline-block;
    font-family: 'Trebuchet MS', Arial, sans-serif;
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 6px;
    color: #0086E5;
    border-bottom: 1px dotted #0086E5;
    cursor: pointer;
}

.tab-author-stories-input + label:hover,
.tab-contributing-stories-input + label:hover {
    color: #ff3368;
    border-bottom: 1px dotted #ff3368;
}

.tab-author-stories-input:checked + label,
.tab-contributing-stories-input:checked + label,
.tab-author-stories-input:checked + label:hover,
.tab-contributing-stories-input:checked + label:hover {
    color: inherit;
    border-bottom: 1px dotted transparent;
}

.tab-author-stories,
.tab-contributing-stories {
    display: none;
}

.tab-author-stories-input:checked ~ .tab-author-stories,
.tab-contributing-stories-input:checked ~ .tab-contributing-stories {
    display: block;
}

/* Search page and results */
.search-results {
    margin-bottom: 100px;
    overflow: visible;
}

#searchTabNav li {
    display: inline-block;
}

.search-page div.collapse {

}

.search-page div.collapse h3 {
    margin-bottom: 8px;
    margin-top: 12px;
}

.padded.medium-input {
    padding-left: 20px;
}

.padded.medium-input > input {
  margin: 0 8px;
  width: 100px;
}
/* === Editing, Forms, Active elements, Buttons === */
/* Forms and stuff */
.checkbox.inline+.checkbox.inline {
    margin-left: 0;
}

.checkbox.inline {
    margin-right: 10px;
}

.genres-select  .checkbox.inline {
    margin-bottom: 6px;
    margin-right: 0;
}

div.padded {
    margin: 0 0 10px 0;
}

.form-sumbit {
    margin: 12px 0;
}

.events label.checkbox {
    width: 260px;
}

input.hidden {
    display: none;
}

.controls .help-inline {

}

.controls.radio .help-inline {
    vertical-align: middle;
}

.controls textarea {

}

.buttons-data {
    display: inline-block;
}

.controls.radio {
    padding-left: 0;
}

.form-actions {
    padding-left: 0;
    background-color: transparent;
}

.nav-pills.nav-simple ul {
    margin-bottom: 0px;
}

.nav-pills.nav-simple>li>a {
    text-decoration: none;
}

.nav-pills.nav-simple>li>a:hover {
    color: #0088cc;
}
.nav-pills.nav-simple>li.active>a:hover {
    color: #ffffff;
}
.bootstrap > label {
  font-size: 16px;
  margin-bottom: 10px;
}
blockquote {
    margin: 5px 0;
}
blockquote > p {
    line-height: inherit;
}

/* Registration form */
.registration-form {

}

.reg-complete {
    padding-bottom: 200px;
}

.help-inline,.help-block {
    font-style: italic;
    color: #999;
}

.controls .help-block {
    padding: 5px 0;
}

/* Buttons and stuff */
.btn-collapse {
    border-style: dashed;
    margin-bottom: 6px;
}

.collapse {
    font-size: 12px;
}
.collapse-normal {
    font-size: 14px!important;
}
.story-page .collapse {
    background-color: #fff;
}

.collapse p {
    padding: 8px 0 8px 10px;
    line-height: 22px;
    margin: 0;
}

.story-title-link,
.story-title-link:visited {
    color: inherit;
    text-decoration: none;
}

.story-title-link:hover {
    text-decoration: underline;
}

.story-page .story-genres {
    margin-bottom: 4px;
}

.story-page .story-thumbnails {
    margin-bottom: 6px;
}

img.ui-selected {
    background-color: #66CC66;
    border-color: transparent;
}

/* Add and edit story */
a.btn {
    text-decoration: none;
}

.chapters-control {
    margin: 0;
    list-style-type: none;
}

.chapters-control li.btn-large {
    display: block;
    text-align: left;
    font-size: 17px;
    margin: 5px 0;
    padding: 8px 12px 7px;
    width: 70%;
    background-image: none;
    background-color: #F5F5F5;
}

.chapters-control li.btn-large:hover {
    background-color: #F1F1F1;
}

.chapters-control li .btn-group {
    float: right;
}

.chapters-control li .btn-success {
    margin-top: 8px;
}

.btn-mini .caret {
    margin-top: 8px;
}

.chapter-textarea {
    width: 90%;
    height: 300px;
}

.notop {
    border-top: none;
    padding-top: 0;
}
/* Стиль для автодополнение */
.ui-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    display: none;
    min-width: 160px;
    padding: 4px 0;
    margin: 2px 0 0 0;
    list-style: none;
    background-color: #ffffff;
    border-color: #ccc;
    border-color: rgba(0, 0, 0, 0.2);
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

.ui-menu-item>a.ui-corner-all {
    display: block;
    padding: 3px 15px;
    clear: both;
    font-weight: normal;
    line-height: 18px;
    color: #555555;
    white-space: nowrap;
}

.ui-state-hover,.ui-state-active {
    color: #ffffff;
    text-decoration: none;
    background-color: #0088cc;
    border-radius: 0px;
    background-image: none;
}

/* Author page */
.userpic {
    vertical-align: top;
    margin-right: 2px;
    border-radius: 5px;
    margin-top: -2px;
}

.story-item:nth-child(2n) .collapse {
    background-color: transparent;
}

.chapters-list {
    list-style-type: none;
    margin: 10px 0 10px 12px;
}

.collapse .chapters-list {
    margin-top: 4px;
}

.chapters-list li {
    font-size: 13px;
    padding: 4px 0;
}

.chapters-list .chapter-title {
    font-size: 15px;
}

.contact-links {
    line-height: 30px;
}

.contact-links a {
    line-height: 16px;
    height: 16px;
}

/* === Bottom of the page stuff === */
/* Comments */
.comments {
    margin-top: 60px;
}

.comment-item {
    padding: 8px 12px 8px;
    line-height: 22px;
    border-left: 0.2em solid #ddd;
}

.comment-item.comment-item-short {
    border: 0;
}

.comment-item.comment-new {
    border-left: 0.2em solid #9e9;
    background-color: rgba(180, 255, 180, 0.3);
}

.comment-item.comment-new:nth-child(2n+1) {
    background-color: rgba(192, 255, 192, 0.7);
}

.comment-item-notify-label {
    font-size: 11px;
    line-height: 12px;
    color: #888;
}

/* index page */
.sidelist .comment-item {
    margin-left: -12px;
    border-left: 0;
}

.comment-vote-area {
    float: right;
    padding-left: 0.5em;
    line-height: 22px;
    font-weight: bold;
}

.comment-vote-area.voting {
    opacity: 0.4;
}

.comment-vote-area .vote-total {
    color: #888;
    display: inline-block;
    vertical-align: top;
    font-size: 12px;
}

.comment-vote-area .vote-total.voted-positive {
    color: #51983c;
}

.comment-vote-area .vote-total.voted-negative {
    color: #da4242;
}

.comment-vote-area .vote-up, .comment-vote-area .vote-down {
    width: 16px;
    height: 16px;
    display: inline-block;
    cursor: pointer;
    opacity: 0.5;
    vertical-align: middle;
}

.comment-vote-area .vote-up:hover, .comment-vote-area .vote-down:hover {
    opacity: 0.9;
}

.comment-vote-area .vote-up.vote-disabled, .comment-vote-area .vote-down.vote-disabled {
    opacity: 0.1;
    cursor: default;
}

.comment-vote-area .vote-up.voted, .comment-vote-area .vote-down.voted {
    opacity: 1;
}

.comment-vote-area .vote-up {
    background: url('../i/upvote.png') center center no-repeat;
}

.comment-vote-area .vote-down {
    background: url('../i/downvote.png') center center no-repeat;
}

.comment-text, .comment-text p {
    font-size: 12px;
    margin-bottom: 4px;
}

.comment-text-deleted {
    color: #888;
    font-size: 0.8em;
    font-style: italic;
}

.comment-meta {
    font-size: 12px;
    color: #999;
    margin: 0 0 4px;
}

.comments-tree {
    margin: 6px 0 6px -12px;
    line-height: 22px;
}

.comments-tree .comment-item {
    width: 70%;
    box-sizing: border-box;
}

.comment-tree-loader {
    width: 70%;
    box-sizing: border-box;
    padding-left: 0.5em;
    border-left: 0.2em dotted #ddd;
}

.comment-tree-loading {
    opacity: 0.3;
}

.authorlink {
    font-weight: bold;
}

.userlink-guest {
    font-weight: bold;
}

.comment-link, .comment-parent-link {
    text-decoration: none;
    display: inline-block;
    margin-left: 0.3em;
}

.comment-link:hover, .comment-parent-link:hover {
    text-decoration: underline;
}

.comment-answer-link {
    text-decoration: underline;
    text-decoration-style: dotted;
    display: inline-block;
    margin-left: 0.3em;
}

.comment-add-link {
    font-size: 22px;
    line-height: 32px;
    margin-bottom: 6px;
    text-decoration: underline;
    text-decoration-style: dotted;
    font-family: 'Trebuchet MS', Arial, sans-serif;
    display: inline-block;
}

.comment-form-content {
    background-color: white;
    width: 70%;
    border-left: 0.2em solid #ddd;
    padding: 8px 12px 8px;
    box-sizing: border-box;
}

/* Костыли */
.comment-form-content #markItUpId_text {
    margin-top: 0;
    padding-top: 5px;
}

.comment-form .markItUp textarea {
    height: 9em;
}

/* Pagination */
#pagination, .pagination {
    margin: 10px 0;
}

#pagination .input-xlarge, .pagination .input-xlarge {
    margin-bottom: -1px;
    width: 50px;
    text-align: center;
}

.pagination-loading {
    opacity: 0.5;
}

.message-500 {
    margin-bottom: 300px;
}

.passres-form-text {
    margin-bottom: 160px;
}

.login-text {
    margin-bottom: 80px;
}

.login-text form,.passres-form form {
    margin-top: 20px;
}

.page-faq h2,.page-terms h2,.page-help h2 {
    margin-top: 24px;
}

.page-faq li,.page-terms li,.page-help li {
    margin-bottom: 8px;
}

.text-faq, .text-terms, .text-help {
    width: 70%;
}

.main-menu {
    padding: 34px 0 0;
    margin: 0;
    color: #CDCAE9;
    list-style-type: none;
}

.main-menu li {
    display: inline-block;
    font-size: 22px;
    padding: 5px 20px 0 0;
}

.main-menu .logolink {
    font-size: 38px;
    padding: 0 23px 0 0;
}

.main-menu .logolink a {
    color: #CDCAE9 !important;
    text-decoration: none;
}

.main-menu li a {
    color: #FAFAE8;
}

.main-menu li a:hover {
    color: #fff;
}

#menu {
    width: 100%;
    height: 40px;
    margin: 0 auto;
    font-size: 17px;
    background-color: #DEE2FC;
    clear: both;
    overflow: hidden;
}

#menu ul {
    float: left;
    padding: 0 0 0 1%;
}

#menu li {
    float: left;
    display: inline;
    color: #333;
    padding-right: 1%;
    padding-top: 1.5%;
}

/* ajax loading icon */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.15s ease;
    transition-delay: 0.15s;
    z-index: 15;
}

.loader-hidden {
    opacity: 0;
    transition-delay: 0s;
}


/* editing contributors */

.controls-contributors-item {
    margin: 4px 0;
}

.controls-contributors-user {
    display: inline-block;
    min-width: 140px;
    text-align: right;
}

.controls-contributors-user > input {
    width: 126px;
}

.controls-contributors-access {
    display: inline-block;
}

.controls-contributors-access > select {
    width: auto;
}

.controls-contributors-visible {
    display: inline-block;
}

.controls-contributors-addlabel {
    width: 100px;
    margin-left: -100px;
    display: inline-block;
    text-align: right;
}


/* edit log */

ul.editlog {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

.editlog-item {
    margin: 0;
    padding: 6px;
    line-height: 1.25;
}

ul.editlog .editlog-item:nth-child(2n+1) {
    background-color: #fefefe;
}

.editlog-date {
    font-size: 12px;
    color: #888;
}

.editlog-changed-items {
    margin-left: 28px;
}

.editlog-changes-link {
    font-size: 12px;
    margin-left: 24px;
}

.editlog-chapter-diff {
    word-break: normal;
    max-height: 20em;
    overflow-y: auto;
    background-color: white;
    line-height: 1.25;
}

.editlog-chapter-diff ins {
    text-decoration: none;
    background-color: #7f7;
}

.editlog-chapter-diff del {
    text-decoration: none;
    background-color: #f77;
}

.editlog-unchanged {
    color: #999;
}

.editlog-expand-btn-wrap {
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 12px;
    padding: 4px;
    line-height: 1.1;
    background-color: #eee;
    border-radius: 4px;
}

.editlog-expand-btn, .editlog-expand-btn:visited {
    color: #555;
    text-decoration: none;
    display: inline-block;
    border-bottom: 1px dotted #555;
}


/* news */

.newsitem {
    margin: 0 0 10px -12px;
    padding: 10px 12px 6px;
}

.news-list-short .newsitem {
    margin-bottom: 0;
}

.newsitem-listitem:nth-child(2n+1) {
    background-color: #fefefe;
}

.newsitem-title, .newsitem-title-link {
    font-size: 20px;
    font-family: 'Trebuchet MS', Arial, sans-serif;
}

.news-list-short .newsitem-title-link {
    font-size: 16px;
}

.newsitem-date {
    font-size: 10px;
    color: #555;
}


/* notifications */

.notification {
    font-size: 12px;
    line-height: 22px;
    padding: 8px 10px;
}

.notification:nth-child(2n+1) {
    background-color: #fefefe;
}

.notification-meta {
    color: #999;
    margin-bottom: 4px;
}

.notification-viewed-line {
    position: relative;
    font-size: 12px;
    height: 22px;
    line-height: 22px;
    text-align: center;
}

.notification-viewed-line > div {
    position: relative;
    display: inline-block;
    z-index: 1;
    background-color: #f6f6f6;
    padding: 0 1em;
}

.notification-viewed-line:before {
    position: absolute;
    left: 0;
    right: 0;
    top: 11px;
    height: 1px;
    background-color: #999;
    z-index: 0;
    content: '';
}

.notifications-older-link {
    text-align: center;
    font-size: 12px;
}

.subscription-form {
    font-size: 12px;
    line-height: 22px;
}

.subscription-form input {
    margin: 0;
}

.subscription-form label {
    display: inline-block;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
}


/* popup notifications */

.popup-notifications {
    position: fixed;
    top: 3%;
    right: 3%;
    width: 16em;
    max-width: 94%;
    overflow: visible;
    z-index: 15;
}

.popup-notification {
    background-color: rgba(0, 140, 0, 0.9);
    margin-bottom: 1em;
    padding: 0.5em;
    color: white;
    font-size: 0.8em;
    cursor: pointer;
    border-radius: 0.35em;
    box-shadow: 0 0 0.2em rgba(0, 70, 0, 0.8);
    transition: ease 0.3s;
    transition-property: transform, opacity;
    position: relative;
    opacity: 1.0;
}

.popup-notification.notice-hidden {
    transform: translateY(-1em);
    opacity: 0.0;
}

.popup-notification.notice-error {
    background-color: rgba(140, 0, 0, 0.9);
    box-shadow: 0 0 0.2em rgba(70, 0, 0, 0.8);
}

/* === Adaptive overrides === */
/* Tablets */
@media ( min-width : 768px) and (max-width: 979px) {
    .container {
        width: auto;
        min-width: 728px;
        padding: 0;
    }
    .nav-main {
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }
    .logopic,.page-header {
        box-shadow: none;
    }
    .page-header,.nav-pills,.footer,.logopic {
        margin-left: 0;
        width: auto;
    }
    #content {
        padding: 0 0 0 20px;
    }
    .span12 {
        width: 96%;
    }
    .span8 {
        width: 62%;
        min-width: 475px;
        max-width: 626px;
    }
    .span4 {
        width: 31%;
        min-width: 242px;
        max-width: 313px;
    }
    .welcome-box .span4,.welcome-box .span8 {
        width: 96%;
        max-width: 96%;
    }
    .main-menu .logolink {
        font-size: 32px;
    }
    .chapter-text {
        width: 96%;
    }
}

@media ( min-width : 768px) {
    .modal {
        left: 45%;
        width: 640px;
    }
    .modal-body {
        max-height: 450px!important;
    }
    .modal textarea.span4 {
        max-width: 85%;
    }
}

/* Tablets portrait */
@media ( max-width : 767px) {
    .container {
        width: auto;
        min-width: 480px;
        padding: 0;
    }
    .nav-main {
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }
    .logopic,.page-header {
        box-shadow: none;
    }
    .page-header,.nav-pills,.footer {
        margin-left: 0;
        width: auto;
    }
    #content {
        padding: 0 0 0 20px;
    }
    .span12,.span8,.span4 {
        width: 99%;
    }
    .logopic {
        display: none
    }
    .main-menu .logolink {
        font-size: 26px;
    }
    .main-menu li {
        font-size: 17px;
        padding-right: 14px;
    }
    .nav-pills {
        font-size: 12px;
        padding: 10px 12px 10px;
    }
    .nav-pills>li>a {
        padding: 6px 8px;
    }
    .story-panel {
        padding: 10px 0 10px 14px;
    }
    .story-panel.story-panel-floating {
        opacity: 1;
    }
    .chapter-text {
        width: 100% !important;
    }
    .controls textarea {
        max-width: 400px;
        max-height: 200px;
    }
    .story-chapter-page .story-panel {
        height: auto;
        line-height: 16px;
    }
    .story-chapter-page .story-panel .chapter-switch {
        display: block;
        padding-bottom: 6px;
    }
    .story-chapter-page .story-panel .chapter-controls {
        float: none;
    }
    .markItUpHeader ul li {
        float: left;
    }
    .markItUpHeader ul li:nth-child(20n) {
        clear: both;
    }
    .comments-tree .comment-item {
        width: 90%;
    }
    #comment-add-link + .comment-form {
        background-image: none;
        min-height: auto;
    }
}

/* Smartphones */
@media ( max-width : 480px) {
    .container {
        min-width: 240px;
    }
    #content {
        padding: 0 0 0 12px;
    }
    .page-header {
        height: 68px;
        padding-top: 12px;
    }
    .controls textarea {
        width: 100%;
    }
    .main-menu .logolink {
        font-size: 15px;
        padding-right: 6px;
    }
    .main-menu li {
        font-size: 14px;
        padding-right: 4px;
    }
    .nav-pills {
        font-size: 14px;
        padding: 4px 12px 8px;
    }
    .nav-pills>li>a {
        padding: 6px 8px;
    }
    .nav-tabs>li,.nav-pills>li {
        padding: 0 0 0px;
    }
    .chapter-text {
        font-size: 12px;
        line-height: 22px;
    }
    .characters-group {
        display: inline;
        padding-right: 0;
    }
    .padded>.bootstrap.radio {
        display: none;
    }
    .markItUpHeader ul li {
        float: left;
    }
    .markItUpHeader ul li:nth-child(15n) {
        clear: both;
    }
}

/* 320 px screens */
@media ( max-width : 320px) {
    .main-menu .logolink {
        display: none;
    }
    .nav-pills>li>a {
        padding: 4px;
        font-size: 13px;
    }
    .gen {
        font-size: 12px;
        line-height: 14px;
        padding: 4px 5px;
    }
    h1 {
        font-size: 22px;
    }
    .login-form .input-small {
        width: 56px;
    }
}
