/*
 * Base structure
 */

/* Move down content because we have a fixed navbar that is 50px tall */
body {
  padding-top: 50px;
  background-color: #f5f5f5;
}


/*
 * Global add-ons
 */

.sub-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/*
 * Top navigation
 * Hide default border to remove 1px line.
 */
.navbar-fixed-top {
  border: 0;
}

/*
 * Sidebar
 */

/* Hide for mobile, show later */
.sidebar {
  display: none;
}
@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
  }
}

/* Sidebar navigation */
.nav-sidebar {
  margin-right: -21px; /* 20px padding + 1px border */
  margin-bottom: 20px;
  margin-left: -20px;
}
.nav-sidebar > li > a {
  padding-right: 20px;
  padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
  color: #fff;
  background-color: #428bca;
}


/*
 * Main content
 */

.main {
  padding: 20px;
}
@media (min-width: 768px) {
  .main {
    padding-right: 40px;
    padding-left: 40px;
  }
}
.main .page-header {
  margin-top: 0;
}


.container-fluid {
    padding: 0;
 }
  .navbar .container-fluid {
    padding: 0 5px;
  }
.no-hp {
  padding-left: 0;
  padding-right: 0;
}
.no-rp {
  padding-right: 0;
}
.no-lp {
  padding-left: 0;
}
.no-rm {
  margin-right: -15px;
}
.no-lm {
  margin-left: -15px;
}

    
@media (min-width: 500px) {
  .container-fluid {
    padding: 0;
  }
  .admin .container-fluid {
    margin-left: auto;
  }
}
@media (min-width: 768px) {
  .container-fluid {
    padding: 0;
  }
  .admin .container-fluid {
    margin-left: auto;
  }
}
@media (min-width: 992px) {
  .admin .container-fluid {
    margin-left: 50px;
  }
}


.blk {
  margin-bottom: 20px;
}
.blk h3 {
  margin: 2px 2px 6px;
}
.blk h3 a {
  color: #222222;
  text-decoration: none;
}
.blk h3 a:hover {
  color: #4c4c4c;
  text-decoration: none;
}
.blk-v {
  padding: 5px;
  background-color: #bfbfbf; 
  margin-right: -15px;
  margin-left: -5px;
}
.blk-c, .blk-ch {
  padding: 5px;
  background-color: #b9b9b9; 
  margin-right: -5px;
  margin-left: -15px;
}
.blk-ch {
  background-color: #fff; 
}
@media (min-width: 992px) {
  .blk-c, .blk-ch {
    margin-right: -15px;
    margin-left: -5px;
  }
}
.blk-g {
  padding: 5px;
  background-color: #b9b9b9; 
  margin-right: -15px;
  margin-left: -5px;
}

.blk-p {
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 992px) {
  .blk-p {
    padding-left: 15px;
  }
  .blk-p h3 {
    margin-left: -12px;
    margin-right: 15px;
  }
  .fr-p {
    margin-right: -5px;
    margin-left: -15px;
  }
}
.blk h3 .fa {
  padding-right: 5px;
}

.b-r {
  text-align: center;
  padding-bottom: 3px;
}
@media (min-width: 992px) {
  .b-r {
    text-align: left;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 3px;
  }
}
.blk-h1 {
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
}
.ch1 {
    margin: 5px 0px 1px;
    background-color: #fff;
    padding: 5px 5px 10px 3px;
    white-space: nowrap;
    overflow-x: scroll;
}
.ch1 .cDesc {
    right: 5px;
    position: absolute;
    background-color: #fff;
    padding: 0 5px;
}

.link-hide {
  cursor: pointer;
}

.tt {
  margin: 0;
  white-space: nowrap;
  overflow-x: scroll;
}
.tt .btn-group-justified {
  width: auto;
}
.tt a {
  text-align: center;
  font-size: 0.9em;
  text-transform: lowercase;
  padding-bottom: 12px;
  background-color: #fff;
  min-width: 100px !important;
}
.tt a:hover {
  border: 1px solid green;
}
.tt a b {
  display: block;
  font-size: 3em;
  line-height: 1em;
  padding-top: 6px;
}

.th { 
  padding: 0;
  margin-bottom: 15px;
}
.tc {
  padding: 0;
  margin: 0 3px;
  position: relative;
}
.tc > * {
  padding: 0 2px;
  display: block;
}

.th .tc .caption {
  /*overflow: hidden;*/
}
.th .tc .caption.top {
    position: relative;
    display: none;
    /*top: -30px;*/
    left: 0;
    right: 0;
    visibility: hidden;
    height: 30px;
    z-index: -1;
}
.th .tc .caption.top .cont {
    padding: 4px 0;
}
.th .tc .caption.top input[type='checkbox'],
.th .tc .caption.top .checkbox {
  visibility: hidden;
}
.th .tc .content {
  padding: 2px;
}
.th .tc .caption.bottom {
    position: relative;
    display: none;
    /*bottom: -50px;*/
    left: 0;
    right: 0;
    visibility: hidden;
    /*height: 50px;*/
    z-index: -1;
    padding-bottom: 4px;
}
.th .tc .caption.bottom .cont {
  background-color: #fff;
}
.th .tc .caption.bottom ul {
  margin: 0;
      overflow-x: scroll;
    white-space: nowrap;
}
.th .tc .caption.bottom ul>li {
    vertical-align: middle;
}
.th .tc .caption.bottom .avatar-holder  {
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
    max-height: 20px;
}
.th .tc .caption.bottom img.avatar {
    width: 100%;
    height: auto;
    display: block;
}
.th .tc .caption .btn {
    padding: 1px 5px;
    margin: 0 1px;
}


.th .tc .caption.bottom .tags {
  position: relative;
  display: block;
  font-size: 0.75em;
  line-height: 1.2em;
  max-height: 20px;
  overflow: hidden;
  padding-bottom: 5px;
  -webkit-transition: max-height .5s;
  transition: max-height .5s;

/*
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  */
}
.th .tc .caption.bottom .tags:after {
  position: absolute;
  bottom: 0;  
  height: 100%;
  width: 100%;
  content: "";
  background: linear-gradient(to top,
     rgba(255,255,255, 1) 20%, 
     rgba(255,255,255, 0) 80%
  );
  pointer-events: none; /* so the text is still selectable */
}
.th .tc .caption.bottom .tags:hover,
.th .tc .caption.bottom:hover .tags {
  max-height: 199px;
}
.th .tc .caption.bottom:hover .tags:after,
.th .tc .caption.bottom .tags:hover:after {
  background: none;
}

.th .tc .caption.bottom .views { 
  font-size: 0.85em;
}
.th .tc .caption.bottom .likes { 
  padding-top: 1px;
  /*font-size: 0.85em;*/
      position: absolute;
    right: 0;
}
.th .tc .caption.bottom .likes a {
  color: #008cba;
  text-decoration: none;
}
.th .tc .caption.bottom .likes a:hover {
  color: #0da54c;
}
.th .tc .caption.bottom .likes a.clicked {
  color: #fff;
}
.th .tc .caption.bottom .likes a.liked {
  cursor: not-allowed;
  color: #ccc;
}


.th .pic-type.gif {
  position: absolute;
  top: 5px;
  left: 5px;
  /*border: 10px solid #d5f5e3;*/
  border-radius: 30px;
  /*border-top: 10px solid #36ab28;*/
  /*width: 0px;
  height: 0px;*/
  /*padding: 1px;*/
  background-color: #d5f5e3;
  /*-webkit-animation: spin2 2s linear infinite;
  animation: spin2 2s linear infinite;*/

  background-image: url(/app/1.1.2/public/img/pie.gif);
  background-size: 20px 20px;
  border: 0px solid #d5f5e3;
  width: 20px;
  height: 20px;
}


/* hovers */
.th.hover .tc,
.th:hover .tc  {
  z-index: 10;
  margin: 0;
  /*box-shadow: 0px 0px 40px rgb(4, 46, 66);*/
  box-shadow: 0px 0px 40px 10px rgba(4,46,66,0.61);
  top: -2px;
}
.th:hover .tc > *,
.th.hover .tc > * {
  padding: 0 5px;
}
.th.hover .tc .caption.top,
.th:hover .tc .caption.top {
    visibility: visible;
    z-index: 10;
    display: block;
}
.th:hover .tc .content,
.th.hover .tc .content {
  padding: 4px 5px 2px 5px;
}
.th.hover .tc .caption.bottom,
.th:hover .tc .caption.bottom {
    visibility: visible;
    z-index: 10;
    display: block;
}

/* manage bg */
.th .tc,
.th.hover .tc .caption,
.th:hover .tc .caption {
    background-color: #fff;
}
.th.vip .tc,
.th.vip.hover .tc .caption,
.th.vip:hover .tc .caption {
  /* .vip */
    background-color: #730de2;
}
.th.closed .tc,
.th.closed.hover .tc .caption,
.th.closed:hover .tc .caption {
  /* .closed */
    background-color: #e99002;
}
.th.danger .tc,
.th.danger.hover .tc .caption,
.th.danger:hover .tc .caption {
  /* .danger */
    background-color: #e65353;
}
.th.primary .tc,
.th.primary.hover .tc .caption,
.th.primary:hover .tc .caption {
  /* .primary */
    background-color: #008cba !important;
    box-shadow: 0px 0px 40px #008cba !important;
}


.th:hover .pic-type.gif,
.th.hover .pic-type.gif {
  top: 7px;
  left: 8px;
}


/* manage admin */
.admin .th.hover .tc,
.admin .th:hover .tc  {
  top: -32px;
}
.admin .th .tc .caption.top,
.admin .th .tc .caption.bottom {
  
}

.admin .th .tc .caption.bottom {
}
.admin .th .pic-type.gif {
  top: 7px;
  left: 5px;
}
.admin .th:hover .pic-type.gif,
.admin .th.hover .pic-type.gif {
  top: 39px;
  left: 8px;
}

.is_admin .th.hover .tc,
.is_admin .th:hover .tc  {
  top: 0;
}
.is_admin .th:hover .tc .content,
.is_admin .th.hover .tc .content {
  padding: 2px 5px;
}
.is_admin .th .tc .caption.top,
.is_admin .th .tc .caption.bottom {
  display: block;
  position: relative;
  visibility: visible;
  top: 0;
  bottom: 0;
  z-index: 10;
}
.is_admin .th.danger .tc,
.is_admin .th.danger.hover .tc .caption,
.is_admin .th.danger:hover .tc .caption {
  /* .danger */
    background-color: #fff;
}
.is_admin .th .tc .caption.bottom .tags {
  max-height: 199px;
}
.is_admin .th .tc .caption.bottom .tags:after {
  background: none;
}
.is_admin .th .pic-type.gif {
  top: 37px;
  left: 5px;
}
.is_admin .th:hover .pic-type.gif,
.is_admin .th.hover .pic-type.gif {
  top: 37px;
  left: 8px;
}
.is_admin .tags .ca {
  font-size: 1.34em;
  line-height: 1.74em;
  font-weight: bold;
  text-decoration: underline;
}


/* images in div (backgrounded) */
.th div.img {
  background-position: center;
  background-size: cover;
}
.th.comics div.img {
  min-height: 200px; 
}
.th.video div.img,
.th.game div.img {
  min-height: 140px; 
}
@media (min-width: 500px) {
  .th.comics div.img {
    min-height: 400px; 
  }
  .th.video div.img,
  .th.game div.img {
    min-height: 260px; 
  }
}
@media (min-width: 768px) {
  .th.comics div.img {
    min-height: 160px; 
  }
  .th.video div.img,
  .th.game div.img {
    min-height: 100px; 
  }
}
@media (min-width: 992px) {
  .th.comics div.img {
    min-height: 170px; 
  }
  .comics .th.comics div.img {
    min-height: 270px; 
  }
  .th.video div.img,
  .th.game div.img {
    min-height: 140px; 
  }
}




.best-recent h3 {
  margin: 2px -5px 5px;
  padding-bottom: 5px;
  white-space: nowrap;
  overflow-x: scroll;
}

.mfp-bottom-bar {
  /*min-height: 100%;*/
}



@-webkit-keyframes spin2 {
  0% { -webkit-transform: rotate(0deg); }
  10% { -webkit-transform: rotate(10deg); }
  50% { -webkit-transform: rotate(90deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin2 {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(10deg); }
  50% { transform: rotate(90deg); }
  100% { transform: rotate(360deg); }
}


.upload-comics-holder ul.sortable {
  overflow: hidden;
  margin: 0px;
  padding: 0px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.upload-comics-holder ul.sortable li {
  list-style: none;
  border: 1px solid #CCC;
  list-style: none;
  width: 152px;
  height: 245px;
  float: left;
  margin: 5px;
  padding: 0px;
  text-align: center;
}

.upload-comics-holder.widen ul.sortable li {
  width: 245px;
  height: 152px;
}
.upload-comics-holder.widen ul.sortable li img {
  width: 240px;
  height: auto;
  max-height: 150px;
}
.upload-comics-holder ul.sortable li.sortable-placeholder {
  border: 1px dashed #CCC;
  background: none;
}
.upload-comics-holder ul.sortable li p.handle {
  margin-bottom: 0px;
  padding-bottom: 1px;
  border-bottom: 1px solid #CCC;
  cursor: move;
  cursor: grab;
}
.upload-comics-holder ul.sortable li p.handle > span {
  font-size: 0.67em;
  letter-spacing: 0em;
  overflow-x: hidden;
  display: inline-block;
  width: 110px;
  white-space: nowrap;
}
.upload-comics-holder ul.sortable li p.handle a.btn {
  padding: 2px 3px 1px 5px;
}


.story-holder {
  word-wrap: break-word;
}
.short-story {
  position: relative;
  max-height: 110px;
  overflow-y: hidden;
}
.story-holder .panel .short-story {
  max-height: 210px;
}

.short-story:after {
  position: absolute;
  bottom: 0;  
  height: 100%;
  width: 100%;
  content: "";
  background: linear-gradient(to top,
    rgba(255,255,255, 1) 10%, 
    rgba(255,255,255, 0) 80%
  );
  pointer-events: none; /* so the text is still selectable */
}

body.add-category .dropzone .dz-preview,
body.add-character .dropzone .dz-preview {
  width: 470px;
}
body.add-category .dropzone .dz-preview .dz-image,
body.add-character .dropzone .dz-preview .dz-image {
  width: 470px;
  height: 290px;
  border-radius: 0px;
}
body.the-category .dropzone {
  min-height: 0;
  border: none;
  background: transparent;
  padding: 0;
}
body.the-category .dropzone .dz-preview {
  width: 160px;
}
body.the-category .dropzone .dz-preview .dz-image {
  width: 160px;
  height: 120px;
  border-radius: 0px;
}
.dropzone .dz-preview .dz-progress {
  border-radius: 0px !important;
}

body.single-game-page .dropzone h1 {
  cursor: pointer;
}
body.single-game-page .dropzone {
  border: 1px dashed black;
  padding: 0 10px;
  margin: 10px;
}
body.single-game-page .dropzone .dz-details {
  width: 320px;
  height: 240px;
}
body.single-game-page .dropzone .dz-preview {
  width: 320px;
  height: 240px;
}
body.single-game-page .dropzone .dz-preview .dz-image {
  width: 320px;
  height: 240px;
  border-radius: 0px;
}

ol.breadcrumb {
  margin-bottom: 5px;
  overflow-x: scroll;
  white-space: nowrap;
  border-radius: 0px;
  border-left: 0;
  border-right: 0;
  background-color: #fbfbfb;
}
ol.breadcrumb .right-image {
  position: absolute;
  right: 0;
}
ol.breadcrumb .right-image:before {
  content: '';
}
ol.breadcrumb .right-image img {
    max-height: 40px !important;
    margin-top: -20px !important;
    margin-bottom: -20px !important;
}

a.fancybox {
  /*position: relative;*/
}
a.fancyvid .img,
a.fancygame .img {
  position: relative;
}

a.fancyvid .img:before,
a.fancygame .img:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.05);
}
a.fancyvid .img:after,
a.fancygame .img:after {
  content: "\f16a";
  font: normal normal normal 14px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  height: 1em;
  font-size: 5em;
  color: rgba(255,255,255,0.9);
}
a.fancygame .img:after {
  content: "\f144";
  font-size: 3.5em;
}
a.fancyvid:hover .img:before,
a.fancygame:hover .img:before {
  background-color: rgba(0,0,0,0);
}
a.fancyvid:hover .img:after,
a.fancygame:hover .img:after {
  visibility: hidden;
}


.no-hand {
  cursor: default;
}
.col-pd-2 {
  padding-left: 5px;
  padding-right: 5px;
}


.select2-container .co,
.tags .co {
  color: #9b9999;
}
.select2-container .ca,
.tags .ca {
  /*color: #fc6f02;*/
  color: #ae530c;
}
.select2-container .ch,
.tags .ch {
  color: #11910c;
}
.select2-container .ch.f,
.tags .ch.f {
  color: #ea3757;
}
.select2-container .ch.m,
.tags .ch.m {
  color: #216ed7;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  min-height: 27px !important;
}
.select2-container--default .select2-results>.select2-results__options {
  max-height: 400px !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #c9d5ec !important;
}
.select2-container--default .select2-results__option[aria-selected=true] .ch {
  font-style: italic;
  opacity: 0.7;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #fcd4c0 !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] .ch {
  text-decoration: underline;
}

/* glyphicon animation (rotating) */
.gly-spin {
  -webkit-animation: spin 2s infinite linear;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(359deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
  }
}
@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(359deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}