@import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin');

/* Border-Box */

*, *:before, *:after {box-sizing: inherit;}

html {box-sizing: border-box;}
input[type="text"], input[type="email"], input[type="search"], input[type="password"] {-webkit-appearance: none; -moz-appearance: none;}
html {font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}

body {margin: 0;}

/* HTML5 display definitions */

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {display: block;}
audio,canvas,progress,video {display: inline-block; vertical-align: baseline;}
audio:not([controls]) {display: none; height: 0;}

[hidden],template {display: none;}

/* Links */

a {background: transparent;}
a:active,a:hover {outline: 0;}

/* Text-level semantics */

abbr[title] {border-bottom: 1px dotted;}

/* Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */

b,strong {font-weight: bold;}

/* Address styling not present in Safari and Chrome. */

dfn { font-style: italic;}
h1 {font-size: 2em; margin: 0.67em 0;}
mark {background: #ff0; color: #000;}
small {font-size: 80%;}
sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
img, i {border: 0; vertical-align: middle;}
svg:not(:root) {overflow: hidden;}
figure {margin: 1em 40px;}
hr {height: 0;}
pre {overflow: auto;}
code, kbd, pre, samp {font-family: monospace, monospace; font-size: 1em;}

/* Forms */

button,input,optgroup,select,textarea {color: inherit; font: inherit; margin: 0;}
button {overflow: visible;}
button,select {text-transform: none;}
button,html input[type="button"],input[type="reset"],input[type="submit"] {-webkit-appearance: button; cursor: pointer;}
button[disabled],html input[disabled] {cursor: default;}
button::-moz-focus-inner,input::-moz-focus-inner {border: 0; padding: 0;}

input {line-height: normal;}
input[type="checkbox"],input[type="radio"] {box-sizing: border-box; padding: 0;}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {height: auto;}
input[type="search"] {-webkit-appearance: textfield;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}

fieldset {border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;}
legend {border: 0; padding: 0;}
textarea {overflow: auto;}
optgroup {font-weight: bold;}

/* Tables */

table {border-collapse: collapse; border-spacing: 0;}
td, th {padding: 0;}

/***************** Основное *********************/

html, body, #main {height: 100%;}
html {font-size: 15px;}
body {margin: auto; padding: 0px; overflow-x: hidden; min-width: 300px; background-color: #fafafa; color: #636b6f; font-family: 'Raleway', sans-serif; max-width: 600px; font-size: 15px; line-height: 1.4285em; font-smoothing: antialiased;}

/* Headers */

h1, h2, h3, h4, h5 {font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; line-height: 1.2857em; margin: calc(2rem -  0.14285em ) 0em 1rem; font-weight: bold; padding: 0em;}
h1 {min-height: 1rem; font-size: 2rem;}
h2 {font-size: 1.714rem;}
h3 {font-size: 1.28rem;}
h4 {font-size: 1.071rem;}
h5 {font-size: 1rem;}

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child {margin-top: 0em;}
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child {margin-bottom: 0em;}

/* Text */

p {margin: 0em 0em 1em; line-height: 1.4285em;}
p a {vertical-align: top;}
p:first-child {margin-top: 0em;}
p:last-child {margin-bottom: 0em;}

/* Links */

a {color: #4183C4; text-decoration: none;}
a:hover {color: #1e70bf; text-decoration: none;}

@-webkit-keyframes blink {
    from {opacity: 1;}
    to {opacity: 0.1;}
}
#messages > *{
    display: block;
}
#container_content {margin-top: 55px;}

#title {max-width: 600px; top: 0; margin: 0em 0em 3em 0em;position: fixed;z-index: 1000;-webkit-backface-visibility: hidden; backface-visibility: hidden;}
#title .tIcon {display: block;}
#title .tIcon.mail {color: orange;}
#title .tIcon.notification {color: orange;}
#title .tIcon.friend {color: orange;}
#title .tIcon.friend, #title .tIcon.mail, #title .tIcon.notification {display: none;}
#title .tIcon.mail, #title .tIcon.notification {display: none;}
#title .tIcon.friend, #title .tIcon.notification {display: none;}
#title.friend .tIcon.friend, #title.mail .tIcon.mail {display: block; -webkit-animation: blinker 1s cubic-bezier(0, 0.99, 1, 1.01) infinite; -moz-animation: blinker 1s cubic-bezier(0, 0.99, 1, 1.01) infinite; -o-animation: blinker 1s cubic-bezier(0, 0.99, 1, 1.01) infinite; animation: blinker 1s cubic-bezier(0, 0.99, 1, 1.01) infinite;}
#title.friend .tIcon.friend, #title.mail .tIcon.mail, #title.notification .tIcon.notification {display: block; -webkit-animation: blinker 1s cubic-bezier(0, 0.99, 1, 1.01) infinite; -moz-animation: blinker 1s cubic-bezier(0, 0.99, 1, 1.01) infinite; -o-animation: blinker 1s cubic-bezier(0, 0.99, 1, 1.01) infinite; animation: blinker 1s cubic-bezier(0, 0.99, 1, 1.01) infinite;}
#title.mail .tIcon.mail, #title.notification .tIcon.notification {display: block; -webkit-animation: blinker 1s cubic-bezier(0, 0.99, 1, 1.01) infinite; -moz-animation: blinker 1s cubic-bezier(0, 0.99, 1, 1.01) infinite; -o-animation: blinker 1s cubic-bezier(0, 0.99, 1, 1.01) infinite; animation: blinker 1s cubic-bezier(0, 0.99, 1, 1.01) infinite;}
#title.friend .tIcon.friend, #title.notification .tIcon.notification {display: block; -webkit-animation: blinker 1s cubic-bezier(0, 0.99, 1, 1.01) infinite; -moz-animation: blinker 1s cubic-bezier(0, 0.99, 1, 1.01) infinite; -o-animation: blinker 1s cubic-bezier(0, 0.99, 1, 1.01) infinite; animation: blinker 1s cubic-bezier(0, 0.99, 1, 1.01) infinite;}
.tIcon {display: block;}
.tIcon.left {padding: 0; display: none;}
.returns.tIcon.left {display: block;}

#actions a {display: inline-block; margin-left: 5px; font-weight: normal; line-height: 1.25; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; border: 1px solid #ccc; padding: 0.25rem 0.5rem; font-size: 0.875rem; border-radius: 0.25rem; color: #373a3c; background-color: #f6f7f9;}
#actions a:hover {color: #373a3c; background-color: #e6e6e6; border: 1px solid #adadad;}

#options a {display: inline-block; margin-left: 5px; font-weight: normal; line-height: 1.25; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; border: 1px solid #e1e8ed; padding: 0.25rem 0.5rem; font-size: 0.875rem; border-radius: 0.25rem; color: #373a3c; background-color: #fff;}
#options a:hover {color: orange; border-bottom: 1px solid orange;}

#footer {margin-top: 1em; padding: 0 .5em; text-align: right; font-size: 0.8em; color: #969696;}

section#content {padding: 0.3em; font-size: .8em;}

#tabs {margin-top: 5px; margin-bottom: 5px; text-align: center; background: #fff;}
#tabs a.tab {display: inline-block; padding: .5em; font-size: 14px; text-decoration: none; color: #969696; line-height: 2em; border: 1px solid transparent; border-bottom: none; margin-bottom: -1px;}
#tabs a.tab.sel1 {color: grey; cursor: default; border-bottom: 2px solid grey;}

@keyframes blink {  
    0% {color: white;}
    100% {color: yellow;}
}
@-webkit-keyframes blink {
    0% {color: white;}
    100% {color: yellow;}
}
.blink {-webkit-animation: blink 1s linear infinite;-moz-animation: blink 1s linear infinite;animation: blink 1s linear infinite;} 

td.icon {width: 16px; padding-right: 3px;}
td.title {position: relative; white-space: nowrap;}
td.right {text-align: right;}
td.content {padding: .5em 0;}
td.image {width: 48px; padding-right: .5em;}

span.counter {background: #fff; border: 1px solid #e9ebee; border-radius: 2px; color: grey; display: inline-block; min-width: 3em; padding: 2px 5px; position: absolute; right: 0; text-align: center; top: 0; vertical-align: baseline;}
span.time {color: #969696; font-size: 0.8em; line-height: 1.5em;}
span.vote_name {font-weight: bold; display: block; text-align: center; padding: 0.5em;}

.user a {display: inline-block; background-color: #fff; height: 1.5em; line-height: 1.5em; vertical-align: middle; padding: 0 .5em; overflow: hidden; text-overflow: ellipsis; width: 100%; text-align: left;}
.user .nick {color: grey; font-weight: bold;}
.user .login, .reg {color: grey; border-left: 2px solid grey; margin: 5px;}

.textarea {position: relative;}
.textarea.smiles .smiles {border: 1px solid rgba(34, 36, 38, 0.15); position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow-y: auto; padding: .1em; display: block; background-color: #fff;}
.textarea .smiles {display: none;}

.smiles_button {position: absolute; bottom: .1em; right: .1em; width: 1.5em; height: 1.5em; color: #ccc;}
.smiles .smile {margin: .5em;}

#adt_top, #adt_bottom {text-align: center; margin-bottom: 20px;}
#adt_top a, #adt_bottom a {display: block; margin: 5px;}
#adt_top {border-radius: 5px;}
#content {padding: 3px; position: relative; overflow: hidden;}

.nick_on:after {content: '●'; margin-left: 2px; color: #07BE07;}
.nick_off:after {content: '●'; margin-left: 2px; color: grey;}
.nick_on, .nick_off, .nick_donate, .nick_birthday {vertical-align: baseline;}
.nick_birthday i {color: orange;}
.nick_donate i {color: green;}

.listing {margin-bottom: 10px; box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.06); background-color: #fff; border-radius: 2px; overflow: hidden; border: 1px solid #e1e8ed;}
.listing .post {margin: 0; padding: 10px 5px; border: none; color: #383838; display: block; font-size: 100%; overflow: hidden; position: relative; border-bottom: 1px solid #e1e8ed;}
.listing .comment {margin: 0; padding: 10px 5px; border: none; color: #383838; display: block; font-size: 100%; overflow: hidden; position: relative; border-bottom: 1px solid #e1e8ed;}
.listing .post:hover:not([data-post-url=""]) {background-color: #f5f8fa; cursor: pointer;}
.listing .post:not([data-post-url=""]) {transition: all 500ms;}
.listing .post.highlight {background-color: rgb(246, 247, 249);}
.listing .post.icon {display: inline-block; vertical-align: middle;}

.comment:not([data-post-url=""]) {transition: all 500ms;}
.comment:hover:not([data-post-url=""]) {text-decoration: none !important; background-color: #f5f8fa; cursor: pointer;}
.segment:not([data-post-url=""]) {transition: all 500ms;}
.segment:hover:not([data-post-url=""]) {text-decoration: none !important; background-color: #f5f8fa; cursor: pointer;}

.post {display: block; padding: 1em 0;}
.post.highlight td.title {font-weight: bold; color: #383838;}
.post td.content a {color: #373a3c; text-decoration: none;}
.post td.icon, .post td.title {vertical-align: middle;}
.post.icon .post_icon {display: inline-block; vertical-align: middle;}
.post.image .post_image {float: left; display: inline-block; width: 50px; overflow: hidden; border-radius: 2px; border: 1px solid #BBB; box-shadow: 1px 1px 3px #E4E4E4;}
.post:first-child {border-top-left-radius: 3px; border-top-right-radius: 3px;}
.post:last-child {border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;}

.select_bar {display: block; text-align: center; font-size: 0.66em; line-height: 3em;}
.select_bar > * {display: inline-block; padding: 0 .5em; margin: .2em; border-radius: .2em; background-color: #ccc; max-width: 30%; overflow: hidden; text-overflow: ellipsis;}

/* Цитирование */
.quote {border-left: 2px solid grey; padding: 4px; color: #838383; font-size: 90%;}
.quote a {color: #838383;}
.quote_title {}

.chart {margin-bottom: 10px; border: 1px solid #DBDBDB; border-radius: 2px; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.14);}
.photo {display: block; margin: 2px auto; background: #EBEBEB; padding: 5px; border: 1px solid #DFDFDF; border-radius: 5px;}
/* Маркер - выделение текста в поисках и тд*/
.mark {box-shadow: 0 0 0 2px #0077FF; background-color: #E2E8FF; border-radius: 2px; padding: 0 3px; margin: 0 2px;}

.rating_up {color: #00711B;}
.rating_down {color: #96000E;}

.hr {margin: 5px 0 5px 0; border-bottom: 1px #e5e5e5 solid;}