﻿/* всплывающая ссылка исправления раскладки */
@media (max-width: 999px) {
  #popup-search-warning {
      display: none;
  }
}

/* css header - узкая синяя шапка для смартфонов */
@media screen and (max-width: 919px) {
  .wrapper {
      min-width: 600px;
  }
  .topheader {
      display: none;
  }

  .header {
    background: #3178a8;
    height: 46px;
    padding-top: 0;
  }
  .header-sidebar {
    position: absolute;
    height:200px;
    margin-left: 0;
  }
  .left-sidebar {
      padding-top: 76px;
  }

  .user-reg-toptext { margin: -1px 0; }
  .user-reg-toptext a { color: #ddd; }

	.header__picture, .header__picture.newyear {
		margin: 0px 8px 0 25px;
		width: 44px;
		height: 54px;
		background: url(/img/FL_mobile_logo3.svg) center center no-repeat;
    background-size: 38px;
    background-position-x:0px;
    background-position-y:0px;
	}

	.header__title {
		background: none;
		color: #a9c3d3;
		text-transform: uppercase;
		line-height: 15px;
		margin-top: 8px;
		font-size: 13px;
		padding-top: 0;
		padding-left: 0px;
		margin-right: 20px;
	}

  .user-reg .title {
    padding: 2px 0 0 10px;
  }

  body,
  table,
  td,
  textarea,
  blockquote {
    font: 12px Verdana, Arial;
    line-height: 1.4;
  }

  #gmenu > li > a {
    font: 12px Verdana, Arial;
  }

  .pm-hr {
    font-size: 12px;
  }

  .community-topic-new div {
    font-size: 12px;
  }

  .community-topic-new .newposts {
    font-size: 12px;
  }

	.header__title span {
		color: #a9c3d3;
	}

  .search {
      padding-top: 8px;
      padding-right: 10px;
  }

  .search .search_link {
    position: relative;
    z-index: 100; /* чтобы ссылки нормально клацались по всей высоте, не блокируясь наезжающим снизу блоком*/
    padding: 5px 5px 2px 5px;
    margin-left: -15px;
    border-radius: 5px;
    text-decoration: none;
    color: #a9c3d3;
    background-color: #3178a8;
  }

  .search__picture {
      display:none;
  }

  /* хак для таблиц в карточках изданий/юзеров/и др - столбцы становятся блоками и уходят вертикально */
  .td-block {
      display:block;
  }

  /* для форума */
  .videoframe, .film-trailers iframe {
    width: 100%;
    height: 200px;
  }

  .msg-txt a, .msg-attachment a {
    white-space: normal;
    word-break: break-word; /* автоперенос длинных слов/ссылок ( break-all ) */
  }

  p.genre-option {
    margin-bottom: 4px;
  }

  span.hidden-numbers {
    display: none;
  }

  div#searchInput {
    right: 50px;
  }
  /* выравниваем оформление формы авторизации для анрегов */
  .user-reg .title-left-edge {
    display: none;
  }
  .user-reg .title span {
    padding-bottom: 4px; 
    border-radius: 5px;
  }
  .td-block-right {
    padding-left: 5px;
  }
}

/* hack в карточке издания, что б не наползал блок книжных полок на имя автра */
@media screen and (max-width: 860px) {
  .edition-show .titles-block-center {
      clear: both;
      padding-top: 4px;
  }
  .edition-show .right-up-block, .film-show .right-up-block {
    display: block;
    width: 100%;
    float: right;
    padding-bottom: 5px;
  }
}

/* убираем левый блок в значок меню */
@media screen and (max-width: 719px) {
  body {
	  background: #FFFFFF url("/img/bgg10m.jpg") repeat-x;
  }
  .layout {
	  background: #FFFFFF url("/img/bgg10m.jpg") repeat-x;
  }

  .wrapper {
    min-width: 300px;
    transition: all ease 0.2s;
  }
  .layout .on {
    transform: translateX(230px);
    transition: all ease 0.2s;
  }
  .layout .on .c-ontent { /* серым фоном залить странице при выводе меню */
      background: rgba(0,0,0,0.8);
      opacity: 0.5;
      -webkit-transition: opacity 0.25s ease-in-out;
      -moz-transition: opacity 0.25s ease-in-out;
      transition: opacity 0.25s ease-in-out;
  }
    /* хак чтоб скрытая левая колонка не создавала пустоту до подвала  */
	.layout .left-sidebar{     display:none;  }
	.layout .on .left-sidebar{ display:block; }

  .left-sidebar, .header-sidebar {
		left:-230px;
	}
  .header-content {
    padding: 0 10px 0 10px;
  }

  .content {
    padding: 0px 10px 0 10px;
  }

	.navbar-tog {
    position: relative;
		height: 20px;
		width: 24px;
		cursor: pointer;
		display: block;
		float: left;
		margin-top: 13px;
		background: url('data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI1MC41NzkgMjUwLjU3OSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjUwLjU3OSAyNTAuNTc5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCI+CjxnIGlkPSJNZW51Ij4KCTxwYXRoIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDsiIGQ9Ik0yMi4zNzMsNzYuMDY4aDIwNS44MzJjMTIuMzU2LDAsMjIuMzc0LTEwLjAxNywyMi4zNzQtMjIuMzczICAgYzAtMTIuMzU2LTEwLjAxNy0yMi4zNzMtMjIuMzc0LTIyLjM3M0gyMi4zNzNDMTAuMDE3LDMxLjMyMywwLDQxLjMzOSwwLDUzLjY5NkMwLDY2LjA1MiwxMC4wMTcsNzYuMDY4LDIyLjM3Myw3Ni4wNjh6ICAgIE0yMjguMjA1LDEwMi45MTZIMjIuMzczQzEwLjAxNywxMDIuOTE2LDAsMTEyLjkzMywwLDEyNS4yODljMCwxMi4zNTcsMTAuMDE3LDIyLjM3MywyMi4zNzMsMjIuMzczaDIwNS44MzIgICBjMTIuMzU2LDAsMjIuMzc0LTEwLjAxNiwyMi4zNzQtMjIuMzczQzI1MC41NzksMTEyLjkzMywyNDAuNTYxLDEwMi45MTYsMjI4LjIwNSwxMDIuOTE2eiBNMjI4LjIwNSwxNzQuNTFIMjIuMzczICAgQzEwLjAxNywxNzQuNTEsMCwxODQuNTI2LDAsMTk2Ljg4M2MwLDEyLjM1NiwxMC4wMTcsMjIuMzczLDIyLjM3MywyMi4zNzNoMjA1LjgzMmMxMi4zNTYsMCwyMi4zNzQtMTAuMDE3LDIyLjM3NC0yMi4zNzMgICBDMjUwLjU3OSwxODQuNTI2LDI0MC41NjEsMTc0LjUxLDIyOC4yMDUsMTc0LjUxeiIgZmlsbD0iI0ZGRkZGRiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=') center center no-repeat;
	}
  .navbar-tog span {
    position: absolute;
    padding-left: 5px;
    padding-right: 5px;
    height: 16px;
    background: #f48618;
    text-align: center;
    line-height: 16px;
    border-radius: 7px;
    color: #fff;
    font-size: 10px;
      font-weight:bold;
    left: 16px;
    top: -8px;
    z-index: 10;
  }

  .search {
      padding-right: 0px;
  }
  .leftbar-wrap {
      visibility: hidden;
  }


  /*** Адаптив элементов внутренних шаблонов (не лайтаут) ***/
  .translations-block dl dd {
      margin-left:26px
  }
  .work-show .workclassif ul {
      margin-left:0px
  }
  #work-bookcase-unit {
    display:none;
  }

  #genrevote {
      width:80%;
      min-width:298px;
      left:-2%;
      box-sizing: border-box;
  }

  #savebutton {
    padding: 4px 4px;
  }

  #deletebutton {
    padding: 4px 4px;
  }

  /* что бы блок книжных полок начал занимать целую строку и не мешал названию */
  .titles-block-center {
      clear: both;
  }

  .edition-show .bookcase-block {
      margin-bottom: 10px;
  }

  /* чуть меняем цвет у шапки, что б залиние синено не давило */
  .main-info-block-header {
      background-color: #50A0D7;
  }

  /* хитрый хак для карточки ворка - в дисктопе мы работает без flex (IE потому что),
      но для мобильного включаем flex и переносим блок рейтинга под блок названия в выводе */
  .work-show .work-title-rating-bookcase {
    display:flex;
    flex-direction:column-reverse;
  }
  .work-show .right-up-block {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin-top:3px;
  }

  /* для таблиц в details */
  #user_marks_table table { margin-left:0 }
  #user_marks_table table td { padding: 2px; }

  /* таблицы из двух клонок - в список */
  .table-key-value td {
      display:block;
      all: unset;
  }

  /* таблица изданий (4 колонки) */
  .edition-list-table td, div.cole {
      width:100%;
      display:block;
  }

  .edition-slot {
    width:100% !important;
    display:block !important;
  }

  .layout-flbook.on {
    width:calc(100% + 230px);
  }

}



@media screen and (max-width: 780px) {
  /* адаптив для титульной */
  .community-content {
    background: white;
  }
  .community-topic-list {
      margin-left: 40px;
  }
  .community-icon {
    display: block;
    width: 40px;
    height: 40px;
  }
  .community-title {
    text-align: left;
  }
  .champions {
      display: none;
  }
  .blog-avatar-new-topics-td {
      padding-left: 0px;
  }
  .adaptimg {
    margin: 5px;
  }

  .adaptimg.right {
    padding: 5px 0px 5px 5px;
  }

  .adaptimg.left {
    padding: 5px 5px 5px 0px;
  }
}


@media screen and (max-width: 539px) {
  /* блоки в карточки издания */
  .td-block-left, .td-block-right {
    display: block;
    padding: 0 0 10px 0;
  }
  .edition-cover {
    text-align: center;
  }

  /* меньше аватарки в переписках */
  .avatar {
    width: 50px;
  }
  .avatar-sex {
    display: none;
  }
  .avatar-class {
    display: none;
  }
  .avatar-login {
    margin: 0 -4px;
    white-space: normal;
    word-break: break-word;
    font-size: 8px;
    hyphens: auto;
  }
  .message-user-info {
    width: 54px;
  }

  .home-glogs-avatar {
    display: none;
  }
  .blog-journal-hot-autor {
    padding-left: 0px;
  }
  .content {
    padding-left: 2px;
    padding-right: 2px;
  }
  .forum-last tr td {
    padding: 2px;
  }
  .topic-icon {
    padding: 1px;
  }
  .community-topic-new {
    padding-right: 1px;
  }
  .adaptimg {
    padding-left: 0px;
    padding-right: 0px;
  }
  .fl-work-edition-image {
    width: 60px;
  }
  .autor-all-analogs-div {
    max-height: 80px;
    overflow: -webkit-paged-x;
  }
  .hide-on-mobile {
    display: none;
  }
  .block-on-mobile {
    display: block;
  }
  a.link-tab {
    padding-left: 2px;
    padding-right: 2px;
  }
  a.link-tab-active {
    vertical-align: bottom;
    padding-left: 2px;
    padding-right: 2px;
  }
  div#searchInput {
    right: 0px;
  }
  .forum-search-input > div {
    width: 175px;
  }
}

@media screen and (max-width: 450px) {
  /* чтобы ссылки доппоисков не сваливались на новую строку на малых экранах */
  .search > form > a {
    margin-right: 20px;
  }
}

@media screen and (max-width: 374px) {
  /* блоки титульной в одну колонку  */
  .left_block, .right_block {
    width:100%;
    border:0;
  }

  /* уменьшение меню в левой колонке */
  .user-reg dd {
    padding:1px 0;
  }
  .left-block-menu {
    padding-top: 0px;
    margin-bottom: -20px;
  }
  #gmenu li a {
    font: 9px Verdana, Arial;
    width: 95px;
    height: 22px;
    line-height: 9px;
    padding-left: 0px;
  }
  li#gmenu1 a, li#gmenu2 a, li#gmenu3 a, li#gmenu4 a, li#gmenu5 a, li#gmenu6 a, li#gmenu7 a, li#gmenu8 a, li#gmenu9 a, li#gmenu10 a,
  li#gmenu1 a.l:hover, li#gmenu2 a.l:hover, li#gmenu3 a.l:hover, li#gmenu4 a.l:hover, li#gmenu5 a.l:hover, li#gmenu6 a.l:hover, li#gmenu7 a.l:hover, li#gmenu8 a.l:hover, li#gmenu9 a.l:hover, li#gmenu10 a.l:hover {
    background-position: -42px 0px;
  }
  li#gmenu1 a.l_a, li#gmenu2 a.l_a, li#gmenu3 a.l_a, li#gmenu4 a.l_a, li#gmenu5 a.l_a, li#gmenu6 a.l_a, li#gmenu7 a.l_a, li#gmenu8 a.l_a, li#gmenu9 a.l_a, li#gmenu10 a.l_a {
    background-position: -440px 0px;
  }
  .forum-search-input > div {
    width: 100%;
    padding-left: 5px;
  }
}


@media screen and (max-width: 340px) {
  /* на смартфоне убираем название сайта, чтобы поиск влез хорошо */
  .header__title {
    display:none;
  }

  /* хак для обтекания картинки в карточке ворка */
  .translations-block {
    display: block;
  }

  /* хак раздела листинга премий */
  .tableaward td.aw_years {
    white-space: normal;
  }

  .search .search_link {
    padding: 5px 2px 2px 2px;
  }
}


/* адаптивные помогатели из bootstrap - блоки скрывается/выводятся в зависимости от размеров экрана,
   подробнее - http://getbootstrap.ru/docs/v4-alpha/layout/responsive-utilities/  */

.hidden-xs-up {
  display: none !important;
}

@media (max-width: 543px) {
  .hidden-xs-down {
    display: none !important;
  }
}

@media (min-width: 544px) {
  .hidden-sm-up {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .hidden-sm-down {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .hidden-md-up {
    display: none !important;
  }
}

@media (max-width: 991px) {
  .hidden-md-down {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .hidden-lg-up {
    display: none !important;
  }
}

@media (max-width: 1199px) {
  .hidden-lg-down {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .hidden-xl-up {
    display: none !important;
  }
}

.hidden-xl-down {
  display: none !important;
}