@import url('https://fonts.googleapis.com/css?family=Oswald:400,700&subset=cyrillic');

/* CS1 Background and text colours
-------------------------------------------------------------*/

body {
	background: url(http://s6.uploads.ru/HfW1T.png), #abb5bf; 
          font-size: calc(1.1em + 0.02vw)!important;
}


#pun_wrap:before {
margin-top: 76px;
 content: "";
  display: block;
    height: 296px;
    background: #555;
    z-index: -1;
   width: 100%;
  background: url('http://se.uploads.ru/eVpnM.png') top center no-repeat, #585657;
  box-shadow: 0 2px 5px #585657;
}

#pun {
  width: 70%;
  min-width: 850px;
  max-width: 1200px;
  background: url(http://se.uploads.ru/3HlvX.png) #e2e3dd;
  padding: 10px;
  box-shadow: 0 0 15px #585657;
  margin-top: -40px!important;
  border-top: 5px rgb(249, 206, 32) solid;
  border-left: 5px rgb(47, 49, 82) solid;
  border-right: 5px rgb(47, 49, 82) solid;
  margin-bottom: 30px!important;
  border-bottom: 5px rgb(47, 49, 82) solid;
}

.fs-box .container, .post_reputation .container {
  background: url(http://se.uploads.ru/3HlvX.png) #e2e3dd;
}

.post_reputation h1 {
margin: 0!important;
}

#pun-title, #pun-navlinks, #pun-ulinks {
  position: fixed;
  top: 0;
  display: block;
  height: 76px;
  background: #2f3a56;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.15em;
  z-index: 20;
}

#pun-navlinks ul {
  display: flex;
  align-content: stretch;
  padding: 0!important;
}

#pun-navlinks {
  display: flex;
  align-content: stretch;
}

#pun-navlinks a {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  padding: 0 0 0 5px;
  text-align: center;
  text-transform: uppercase;
}

#pun-navlinks a:hover {
  background: #1c2942;
  text-decoration: none!important;
}

#pun-title {
  width: 100%;
  left: 0;
  text-transform: uppercase;
}

#pun-navlinks {
  right: 140px;
}

#pun-ulinks {
  right: 0;
  width: 140px;
}

#pun-ulinks .container {
 display: none;
 background: url(http://se.uploads.ru/3HlvX.png) #e2e3dd;
}

#pun-ulinks h2 {
    height: 76px;
    display: flex;
    text-align: center;
    align-items: center;
   letter-spacing: 0.15em;
  color: #e0e0e0;
  cursor: pointer;
  text-transform: uppercase;
}

#pun-ulinks:hover h2 {
   background: #1c2942;
   color: #fff;
}

#pun-ulinks:hover .container {
  display: block;
}

#pun-ulinks .container li {
display: block;
}

/* CS1.1 */
.punbb .section .container, .punbb .post-body, .punbb .post-links, .punbb td.tc2, .punbb td.tc3,
.punbb .formal fieldset .post-box, #viewprofile li strong, #viewprofile li div, #setmods dd,
.punbb .info-box, .punbb #pun-main .info-box .legend {
  color: #333333;
  }

/* CS1.2 */
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {
  color: #333333;
  }

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  font-weight: normal;
  font-style: normal;
  background: url(http://sg.uploads.ru/n13Vh.png) top left no-repeat, #2f3a56;
  height: 25px;
  color: #d1d7d4;
  margin: 0 -15px;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.15em;
  text-align: center;
  font-size: 1.4em;
  }

/* CS1.4 */
#pun-title, #pun-title .container {
color: #fff;
  }

/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
  background-color: #DEDFDF;
  color: #333333
  }

/* CS1.6 */
.punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl  {
  color: #333333
  }

/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
      background: rgba(255, 255, 255, 0.24);
    border: 1px #ccc solid;
  }

.punbb .quote-box cite, .punbb .code-box cite {
    background: url(http://se.uploads.ru/3HlvX.png), linear-gradient(to bottom, #becbd4 0%, #e2e3dd 100%);
    margin: -11px -11px 10px !important;
    padding: 3px 8px;
}

/* CS1.8 */
#pun-navlinks .container {
  color: #FFFFFF;
  }

.offline li.pa-online strong {
  font-weight: normal
  }

.punbb textarea, .punbb select, .punbb input {
  background: url(http://se.uploads.ru/3HlvX.png) #FFFFFF;
  color: #333333
}



/* CS3 Links
-------------------------------------------------------------*/

/* CS3.1 */
.punbb a, .punbb a:link, .punbb a:visited,
.punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited {
  color: #2f3a56;
    border-bottom: 0px none #000;
  text-decoration: none;
    font-family: 'Oswald', sans-serif;
       letter-spacing: 0.1em;
  }

.punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {
  color: #333333
  }

/* CS3.2 */
.punbb a:hover, .punbb a:focus, .punbb a:active,  .punbb-admin #pun-admain .nodefault,
.punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active {
  color: #1c2942;
    border-bottom: 0px none #000;
  }

/* CS3.3 */
#pun-navlinks a {
  color: #efefef;
    border-bottom: 0px none #000;
  text-decoration: none;

  }

/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  color: #FFFFFF;
  font-weight: normal;
font-style: normal;
  border-bottom: 0px none #000;
  text-decoration: underline;

  }

#pun-pagelinks a:active, #pun-pagelinks a:focus {
  background-color: #333;
  color: #fff;
  }

/* CS4 Post status icons
 -------------------------------------------------------------*/

div.icon {
    position: relative!important;
    float: left;
    border-width: 0!important;
    background: url(http://s7.uploads.ru/FhgOf.png) center center;
    width: 40px!important;
    height: 47px!important;
    display: block;
    margin-left: -50px!important;
    margin-top: -5px!important;
}
div.icon.inew, div.icon.icon-new {
  background: url(http://s5.uploads.ru/uPaJt.png) center center;
}

.isticky div.icon {
background: url(http://s7.uploads.ru/JHhf0.png) center center;
}

#pun-main div.catleft, #pun-main div.catright {display: none}

#pun-announcement h2 {
display: none;
}

#pun-announcement {
    margin: -10px -15px 10px!important;
    border-left: 5px rgb(153, 157, 172) solid;
    border-right: 5px rgb(153, 157, 172) solid;
    border-top: 1px rgb(153, 157, 172) solid;
    background: url(http://se.uploads.ru/3HlvX.png), linear-gradient(to bottom, #becbd4 0%, #e2e3dd 100%);
}

#pun-announcement .container {
    padding: 0 1em 1em 1em!important;
}

#main-menu {
  display: flex;
  margin-bottom: 10px;
}

#main-menu li {
  display: inline-block;
  margin-top: -6px;
 border-top: 5px transparent solid;
  border-bottom: 1px transparent solid;
  font-size: 1.4em;
    text-transform: uppercase;
}

#main-menu li:hover {
    border-top: 5px #f1d772 solid;
    border-bottom: 1px #f9ce20 solid;
    background: linear-gradient(to bottom, rgb(171, 181, 191) 0%, transparent 100%);
}

#main-menu li:hover a {
  color: #fff;
}

#main-menu li a {
  display: block;
  padding: 10px 5px;
  height: 100%;
  width: 100%;
}

.post-box {
background: rgba(255, 255, 255, 0.24);
    border: 1px #ccc solid;
   border-top: none!important;
   line-height: 1.5em!important;
}

.post-links ul {
border-color: #ccc;
}

.item5 {
  border-width: 0!important;
}

.divider {
  display: none;
}

#html-footer {
    background: rgba(84, 84, 84, 0.25);
    height: 50px;
    margin: 10px -10px -10px;
    border-top: 5px rgb(249, 206, 32) solid;
}

#left-top-corner {
    height: 5px;
    width: 5px;
    position: absolute;
    top: -5px;
    left: -5px;
    background: rgb(249, 206, 32);
}

#right-top-corner {
height: 5px;
    width: 5px;
    position: absolute;
    top: -5px;
    right: -5px;
    background: rgb(249, 206, 32);
}

.punbb .post .post-author {
    background: url(http://s0.uploads.ru/l8XjK.png) #ceccc3;
    border-top: 5px rgb(249, 206, 32) solid;
    border-left: 5px rgb(47, 49, 82) solid;
    border-right: 5px rgb(47, 49, 82) solid;
    border-bottom: 5px rgb(47, 49, 82) solid;
}

.post-body, .punbb .post h3 span {
 margin-left: 21em!important;
}

.punbb .post h3 span {
 background: rgba(224, 224, 224, 0.44);
    border: 1px #ccc solid;
    border-bottom: none!important;
}

.pa-author, .pa-title, .pa-avatar, .pa-online {
text-align: center;
}

.pa-avatar img {
    border: 2px rgb(47, 49, 82) solid;
}

.pa-title {
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.1em;
}


.tab-body {
  display: none;
  background: url(http://se.uploads.ru/3HlvX.png) #efefef;
   padding: 3px;
   height: 20px;
   border-top: 1px #abb5bf solid;
}

.tab-title {
  display: inline-block;
  padding: 3px 5px;
     width: 75px;
    text-align: center;
    border-bottom: 3px rgb(153, 157, 172) solid;
    letter-spacing: 0.2em;
  cursor: pointer;
}

.tab-header.active .tab-title {
  border-top: 1px #ccc solid;
  background: url(http://se.uploads.ru/3HlvX.png) #efefef;
}

.tab-title:hover, .tab-title.active {
    border-bottom: 3px rgb(249, 206, 32) solid;
}


.tab {
  position: absolute;
  bottom: 10px;
  width: calc(100% - 70px);
  border-bottom: 1px #abb5bf solid;
}

.tclcon {
  padding-bottom: 1.4em;
}

#pun-index tr {
  position: relative;
  display: flex;

}

#pun-index .tc2,  #pun-index .tc3 {
  position: absolute;
  bottom: 0;
  text-align: left;
  padding-left: 25px;
  width: 70px;
}

#pun-index .tc2 {
  right: 10%;
  background: url(http://s4.uploads.ru/gzmMh.png) center left no-repeat;
  
}

 #pun-index .tc3 {
   right: 0;
   background: url(http://sa.uploads.ru/Ukpdo.png) center left no-repeat;
 }

 #pun-index .tcr {
      padding-bottom: 33px;
 }

  #pun-index .tcl {
    width: calc(100% - 200px)!important;
   position: relative;
  }

#pun-index thead {
display: none;
}


.fs-box .container {
z-index: 1000;
}

.forum-image {
    float: left;
    margin-top: -20px!important;
    margin-right: 16px!important;
}

.forum-image img {
    border: 2px #999dac solid!important;
}

/**
#forum_f7 h3, #forum_f7 .tab {
margin-left: 180px!important;
 width: calc(100% - 250px);
}
**/

.tab-body table td {
  padding: 0 10px!important;
  margin-top: -3px!important;
}

.tab-body table td:nth-child(2n) {
  padding-top: 4px!important;
  padding-left: 2px!important;
}

.announcement-row {
  display: flex;
 justify-content: space-between;
}

.announcement-row .col {
  max-width: 50%;
}

.modlist, #pun-live-rusff, .lastedit, #pun-ulinks li.item5 {
display: none!important;
}

.pa-fld1 {
  margin-top: -1em!important;
}
.pa-fld1:first-line {
  font-size: 0;
}

.pa-fld1 h4 {
  text-align: center;
  font-size: 1.2em!important;
  margin: 0!important;
  padding: 0!important;
}

.pa-fld1 a {
  display: block;
  text-align: center;
}

#spn {
  position: fixed;
  right: 0;
  top: calc(50% - 60px);
}

#spnTop {
  width: 35px;
  height: 45px;
  background: url(http://s5.uploads.ru/d/Nu0SF.png);
}

#spnBottom {
  width: 35px;
  height: 45px;
  background: url(http://s4.uploads.ru/d/CLHqU.png);
}

#topic-users-in a:after {
    content: ",";
    visibility: visible;
}

#topic-users-in a:last-child:after {
    visibility: hidden;
}

#banners {
    overflow: hidden;
    margin: 0 40px;
    padding: 8px 0;
    position: relative;
}

#banner-container {
  white-space: nowrap;
  height: 33px;
  margin-left: 0px;
}

#banners-to-left {
float: left;
width: 20px;
  display: inline-block;
  font-size: 30px;
  cursor: pointer;
  margin-left: 10px;
}
#banners-to-right {
float: right;
width: 20px;
  display: inline-block;
   font-size: 30px;
  cursor: pointer;
  margin-right: 10px;
}

#pun-viewtopic #pun-title.hidden, #pun-viewtopic #pun-navlinks.hidden, #pun-viewtopic #pun-ulinks.hidden {
    padding-top: 8px;
    height: 0;
    overflow: hidden;
    font-size: 0;
    border-bottom: 3px rgb(249, 206, 32) solid;
}

/**
#pun-viewtopic #pun-title, #pun-viewtopic #pun-navlinks.active, #pun-viewtopic #pun-ulinks.active {
 border-bottom: none;
 font-size: 1.1em;
 height: 76px;
 padding-top: 0;
  overflow: visible;
}
**/

#pun-viewtopic #pun_wrap:before {
 margin-top: 11px;
}

.post-content td {
border-color: transparent;
}

.pa-online {
border-color: transparent;
}

.post-content table[style="table-layout:auto;width:300px"] {
  margin: auto;
}

#pun-category3 tr h3, #pun-category3 tr .tab {
margin-left: 180px!important;
 width: calc(100% - 250px);
}

.location-score table {
  margin-top: 3px;
}

#copyright {
    text-align: center;
    margin-top: 8px;
    color: #3e4246;
    font-size: 0.8em;
}

#header-admins {
float: right;
    margin-top: 5px;
    text-align: right;
}

#npc-form-area {
display: none;
}
#button-npc {
background-image: url(http://s7.uploads.ru/t0oLn.png);
}

.toppost {
  margin-top: 10px!important;
}

#modal.black {
position: fixed;
    width: 100%;
    height: 100%;
    background: #000;
    display: block;
    top: 0;
    left: 0;
}

#warning {
position: fixed;
    width: 400px;
    height: 200px;
    top: calc(50% - 100px);
    left: calc(50% - 200px);
    background: #ccc;
    padding: 10px 10px 30px;
}

#modal .btn {
padding: 4px;
    display: inline-block;
    margin-right: 10px;
    margin-left: 15px;
    cursor: pointer;
    text-decoration: none;
}

#modal .btn-stop {
    border: 1px #378468 solid;
    background: #a9d2a9;
}

#modal .btn-ok {
    background: rgba(255, 0, 0, 0.24);
    border: #632525 1px solid;
}

.pa-title+.post-img-Sp, .pa-title+.pa-gifts {
 display: block!important;
   font-size: 0!important;
  padding-top: 180px;
  margin-left:8%;
  padding-left:8%;
  padding-right: 120px;
  background: url(http://pay-keys.com/wp-content/uploads/2017/03/p1_2286370_25f1f5ac-180x180.jpg) top left no-repeat;
}

.icon[data-new-topics]:before, .subforums span[data-new-topics]:before {
margin: 0 0 0 30px!important
}

#forum_f15 .icon[data-new-topics]:before {
display: none;
}

#currency-exchange {
   position: fixed;
    width: 500px;
    height: 150px;
    top: calc(50% - 75px);
    left: calc(50% - 250px);
}

/**
#currency {
 width: 0;
 height: 0;
}
**/