/* Warning: too many captain-obvious comments ahead */

/* hiding post last edit info */
.post-content > .lastedit {
    display: none;
}

/* character info */
.pa-fld4,
.pa-fld5 {
    display: inline-block;
    vertical-align: middle;
}

/* full-size avatar*/
/*.full-size-avatar-container {
    position: fixed;
    top: 50%;
    left: 50%;
    display: none;
    z-index: 1;
    transform: translate(-50%, -50%);
    max-height: calc(100vh - 50px);
    max-width: calc(100% - 50px);
    overflow: auto;
}*/

#smilies-area {
    overflow: auto;
    max-height: 215px;
}

#smilies-area > div {
    margin-bottom: 15px;
}

/* autosave load button */
#autosave-options {
    float: right;
    max-width: 5%;
    padding: 1px 10px;
    margin: 15px 2px 10px 0;
    position: relative;
    z-index: 10;
}

/* fix of dialogs because of autosave */
#tags {
    position: relative;
}

.fs-box #tags .container {
    top: 0;
}

#load-autosaved-text-button {
    background: transparent url("http://forumstatic.ru/files/0003/67/b4/44150.png") 0 0 / 100% 100% no-repeat;
    border: none;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

td#imageupload-right {
    padding-left: 25px !important;
}

/* hide all posted messages in topic where it should be so */
#topic_t540,
#pun.hidepost #pun-main > .topic,
#pun.hidepost #topic-modmenu,
#pun.hidepost input[name="preview"] {
    display: none;
}

/* hide ava change link */
.post-content .hide_Nic-SIG {
    display: none;
}

/* announcement */
#announcement-container {
    display: flex;
    position: relative;
}

#announcement-navigation {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-basis: 100%;
}

#announcement-navigation button {
    padding: 5px 10px;
    border: none;
    height: 40px;
    margin: 5px;
    cursor: pointer;
    overflow: hidden;
    flex-basis: 20%
}

#announcement-content {
    text-align: center;
    flex-basis: 80%;
    top: 60px;
    position: absolute;
    z-index: 10; 
    border-style: solid;
    border-width: 2px;
    border-radius: 20px; 
    display: none; 
    width: 100%;
    padding: 10px;
}

#announcement-content > div {
    width: 100%;
}

#announcement-content #news-content {
	max-height: 200px;
    overflow: auto;
}

#news {
    margin-top: 20px;
}

#rpg-navigation {
    text-align: center;
    display: none;
}

#rpg-navigation > div {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    margin: 0 0 10px 0;
}

#rpg-navigation .locationMark {
    position: inherit;
    width: 100px;
    margin: 0 15px;
    text-decoration: none;
}

#roles > div {
    display: flex;
    flex-shrink: 0;
    width: 100%;
    overflow: auto;
}

#roles .character-card {
    margin-left: 10px;
    text-align: left;
    flex-shrink: 0;
    max-width: 150px;
}

#roles .character-card-wide {
    max-width: 100%;
}

#roles .character-card h3 {
    text-align: center;
}

#roles .character-card strong + span {
    padding-left: 5px;
}

#roles .character-card img {
    height: 150px;
    width: auto;
}

#roles .character-card p:last-of-type {
    margin-top: 10px;
    font-style: italic;
}

.close-button {
    width: 35px;
    height: 35px;
    border: none;
    position: absolute;
    top: -10px;
    right: -10px;
    cursor: pointer;
}

/* avatar change */
#characterChangeSettings {
    padding-top: 1em;
}

#characterChangeSettings > img,
#characterChange > img {
    width: 25px;
    margin: 0 5px;
    cursor: pointer;
}

#characterChange  {
    cursor: pointer;
    float: right;
    max-width: 50%;
    padding: 1px 10px;
    margin: 15px 2px 0 0;
}

#avtrChang-area {
    max-width: 350px;
    display: none;
}

#avtrChang-area > div {
    margin: 0 1em;
    text-align: center;
    vertical-align: top;
}

#avtrChang-area .character {
    display: flex;
    cursor: pointer;
    flex-direction: column;
}

#avtrChang-area .character img {
    max-height: 90px;
    max-width: 90px;
    margin-top: 5px;
}

/* word and symbol counter */
#input-counter {
    display: inline-block;
    margin: 15px 0 0 2px;
    max-width: 50%;
}

#word-counter,
#symbol-counter {
    margin: 5px 0;
}

#word-counter span,
#symbol-counter span {
    font-weight: bold;
}

/* location marks */
.locationMark {
    position: fixed;
    top: 10px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 60px;
}

.punbb .locationMark > img,
.locationMark > img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border-style: solid;
    border-width: 2px;
}

.locationMark > span {
    font-size: 16px;
}

#BookmCntToggle {
    background: url("http://forumstatic.ru/files/0003/67/b4/33283.png") 0 0 / 100% 100% no-repeat;
    height: 25px !important;
    width: 25px !important;
}

#BookmCntToggle:after,
#BookmCntToggle:before {
    display: none;
}

/* html bottom banners */
#banners {
    background-color: rgba(27, 55, 48, 71%);
    overflow: auto;
    position: absolute;
    padding: 10px;
    left: 10px;
    top: 10px;
}

/* categories are collapsing/expanding on clicking so need pointer */
.punbb .category h2 {
    cursor: pointer;
}

/* and collapsed/expanded arrows */
.punbb .category h2 span::before {
    border-style: solid;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    content: "";
    transform: rotate(45deg);
    margin-right: 10px;
    margin-bottom: 3px;
}

.punbb .category h2 span.arrow-right::before {
    transform: rotate(-45deg);
	margin-bottom: 1px;
}

/* clearing the color of #post-form in messages */
#pun-messages #post-form {
	background: transparent;
}


/* aligning text of the posts */
.punbb .post-content {
  text-align: justify;
}


/* CS1 Background and text colours
-------------------------------------------------------------*/

/* removing not needed part of background on redirection page */
.redirect-page #pun {
	background: none;
}

/* CS2 Border colours
-------------------------------------------------------------*/

/* CS2.1 */

/* answer and message forms */
#post {
   border: none;
}

/* CS2.3 */
.punbb .main h1,
.punbb .main h2,
.punbb-admin #pun-admain h2 {
  border: none;
}

/* CS2.4 */
.post-links ul,
.post-links,
.usertable table {
  border: none;
}

/* does it exits? */
#pun-break3 {
  border: none;
}

.punbb .formal fieldset .post-box,
.punbb .info-box {
  border-style: solid;
  border-width: 1px;
}


/* 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 {
  text-decoration: underline;
}

.punbb li.isactive a,
.punbb li.isactive a:link,
.punbb li.isactive a:visited {
  text-decoration: underline;
}

/* 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 {
  text-decoration: none;
}

/* CS3.3 */
#pun-navlinks a {
  text-decoration: undeline;
}

/* CS3.4 */
#pun-navlinks a:hover,
#pun-navlinks a:focus,
#pun-navlinks a:active {
  text-decoration:none;
}

#pun-ulinks a {
  text-decoration: underline;
}

#pun-ulinks a:hover,
#pun-ulinks a:focus,
#pun-ulinks a:active {
  text-decoration: none;
}

.post h3 span a:link,
.post h3 span a:visited {
  font-weight: normal;
  font-size: 0.9em;
  text-decoration: none;
}

/* CS4 Post status icons
 -------------------------------------------------------------*/

#profilenav h2 span, 
#viewprofile h2 span {
	background-image: none
}

td.tcr a {
	background: transparent;
}

/* text under the statistics icon, depends on icon size */
#onlinelist.onlinelist {
	margin-top: 2em;
}

#pun-crumbs2 .container,
#pun-stats div.statscon,
#pun-about .container {
	background-color: transparent;
}

/* CS5 Navigation icons
 -------------------------------------------------------------*/

#pun-navlinks li {
	background: none;
}

/* own */
body {
	background: transparent;
}

#pun_wrap {
	width: 900px;
	margin: 30px auto;
	border-image-source: url("http://forumstatic.ru/files/0003/67/b4/88384.png");
	border-image-width: 30px;
	border-image-slice: 96;
	border-image-repeat: repeat;
	border-style: solid;
	border-width: 30px;
}

#pun,
#pun-ulinks,
.punbb .category h2,
.punbb .forum h1,
.punbb .section .container,
.modmenu .container {
	border: none;
}

#html-footer .container {
	position: relative;
}

/* remove "Поделиться" on text selection */
.share_more_selection {
    display: none;
}

/* top-bottom-category navigation */

#arrow-to-top,
#arrow-to-bottom {
    width: 31px; 
    height: 28px; 
    cursor: pointer;
    display: inline-block;
}

#arrow-to-top {
	margin-bottom: 10px;
}

#arrow-to-bottom {
	margin-top: 10px;
	transform: rotate(180deg);
}

#navigation {
    bottom: 25%;
    position:fixed;
    right :5%;
    text-align: center;
    z-index: 11;
}

#navigation #categories {
    background-color: #ADCBDC;
    border-style: solid;
    border-width: 2px;
    border-radius: 10px;
    opacity: 0.8;
    width: 185px;
}

#categories > li {
    margin: 0.25em;
    padding: 0 5px;
}

#categories-navigation-display,
#categories a {
    cursor: pointer;
}

#categories-navigation-display {
    width: 12px;
    height: 12px;
    display: inline-block;
	border-style: solid;
    border-width: 1px;
    margin: 0 auto;
	border-radius: 50%
}

/* auto-resize avatar */
.pa-avatar.item2 > img, img.avatardemo,
div#viewprofile td#profile-left img {
    height: auto;
    max-width: 160px;
}

#post-form .container {
	border-bottom-style: solid;
	border-bottom-width: 1px;
}

/* disable changes in PR profile */
#pun-main #profile1[action$="id=4"] {
  display:none;
}

/* progress bars */
.progressBar { 
	height: 5px;
	border-radius: 25px;
	padding: 3px;
}

.progressBar > span {
  display: block;
  height: 100%;
  border-radius: 20px 8px 8px 20px;
  overflow: hidden;
}

.progressBar > span.complete {
	border-radius: 20px;
}

#location-navigation-container {
	display: flex; 
	text-align: center;
	height: 250px;
}

#location-navigation-container.location-navigation-many-locations {
	height: 200px;
}

#location-navigation-container.location-navigation-many-locations {
	height: 150px;
}

#location-navigation-container .location-navigation-link {
	background-color: #ADCBDC;
	font-size: 1.5em;
	padding: 20px;
	border: solid 2px #00401D;
	border-radius: 6px;
	margin: auto;
}

#location-navigation-container.location-navigation-medium-locations .location-navigation-link {
    padding: 12px;
    font-size: 1.3em;
}

#location-navigation-container.location-navigation-many-locations .location-navigation-link {
    padding: 8px;
    font-size: 1.2em;
}

#styleSwitcher {
    width: 30px;
    height: 30px;
    position: fixed;
    bottom: 10px;
    left: 10px;
    border-radius: 50%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 75% 75%;
    background-color: transparent;
    cursor: pointer;
}

/* mobile */
@media screen and (max-width: 540px) {
    .locationMark {
        width: 45px;
    } 

    .punbb .locationMark > img,
    .locationMark > img {
        border-color: #7D0909;
        height: 30px;
        width: 30px;
    }

    .locationMark > span {
        font-size: 12px;
        color: #7D0909;
    }

    #announcement-container {
        position: static;
    }
	
	#announcement-content {
		width: 90%;
	}

    #announcement-navigation button {
        width: 50px;
    }
	
	#announcement-content {
		top: 70px !important;
	}
	
	#announcement-content #rpg-navigation {
		max-height: 200px;
		overflow: auto;
	}
}