/* CS1 Background and text colours
-------------------------------------------------------------*/

/* Фон форума */
body {background: url(http://funkyimg.com/i/262k3.png) repeat; background-attachment: scroll; background-position: top center;}


/* Шапка */
#pun-title table {
background-image : url(http://funkyimg.com/i/262k2.png); 
background-repeat : no-repeat;
background-position: top center;
border: none;
width: 941px;
height: 311px;
margin-left: -30px;}

/* Тело форума */
#pun {
width: 941px; 
background-color: transparent; 
background-image: url(http://funkyimg.com/i/262k4.png); 
background-attachment: scroll; 
background-repeat: repeat; 
background-position: top center;}

.punbb {
padding: 0 30px!important;
width: 970px;}

/* Футер */
#pun-about p.container {
background-image : url(http://funkyimg.com/i/262k5.png);
margin: 0px 0px -50px -30px;
background-position : center top;
background-repeat : no-repeat;
width: 941px;
height: 121px; 
overflow-x: hidden;
}


/* CS1.1 Фон и цвет текста на форуме */
.punbb .section .container, .punbb .post-body, .punbb .post-links, .punbb td.tc2, .punbb td.tc3, #pun-navlinks .container,
.punbb .formal fieldset .post-box, #viewprofile li strong, #viewprofile li div, #setmods dd,
.punbb .info-box, .punbb #pun-main .info-box .legend, .punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer, #pun-stats h2, .punbb .main h2, #pun-title, #pun-title .container, .punbb .modmenu .container, .punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span, .punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl, #pun-navlinks .container  {background-color: transpanent;
color: #201213;
font-weight: normal;
font-style: normal;}

#pun-admain .adformal, #pun-admain .adcontainer
{border: none;
border-color:  transparent;}

.punbb .main h1, #pun-debug h2, .punbb-admin #pun-admain h2 {
background-color: transparent;
color: #171e20;
text-align:center; 
font-size: 15px; 
font-style: normal; font-weight: bold; font-family: "tahoma";}


/* Цитата и выделить код */
.punbb .quote-box, .punbb .code-box {
background-image: url("http://funkyimg.com/i/262mS.png");
background-color: #c5c1b7;
  color: #9a9d94;}


/* Область для ввода текста в форме ответа и админке */
.punbb textarea, .punbb select, .punbb input {
background-image: url("http://funkyimg.com/i/262mS.png");
color: #9a9d94}


/* Фон окна наград и репутации */
#pun-popup_awards div, #pun-reputation div {
background-image: url("http://funkyimg.com/i/239b9.png");
background-color: #ccb48b;}


/* CS2 Ссылки
-------------------------------------------------------------*/

/* CS2.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, .punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited, #pun-navlinks a, #pun-ulinks a {color: #000;
  text-decoration: none;
  text-shadow: 0px 0px 0px rgba(82, 46, 0, 0.4);}

/* CS2.2 */
.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, #pun-navlinks a:focus, #pun-navlinks a:active, #pun-ulinks a:focus, #pun-ulinks a:active {
  color: #201213; 
  text-decoration: none;
  text-shadow: 0px 0px 0px rgba(82, 46, 0, 0.4);}

.punbb a:hover, #pun-navlinks a:hover, #pun-ulinks a:hover {
  color: #201213;
  text-decoration: none;
  text-shadow: 0px 0px 0px rgba(43, 24, 0, 0.7);}

#pun-ulinks a {
  font-size: 11px;
  color: #000; 
  font-family: 'tahoma';
  text-decoration: bold;
  text-shadow: 0px 0px 0px rgba(82, 46, 0, 0.4);}

#pun-ulinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  text-decoration: none;
  color: #201213;
  font-family: 'tahoma';
  font-size: 11px;
  text-shadow: 0px 0px 0px rgba(43, 24, 0, 0.7);}


/* CS3 Остальное 
-------------------------------------------------------------*/

/* CS3.1 Иконки*/

div.icon {
            background: url(http://funkyimg.com/i/262kp.png) no-repeat;}

    tr.inew div.icon {
            background: url(http://funkyimg.com/i/262kq.png) no-repeat;}

     tr.isticky div.icon {
            background: url(http://funkyimg.com/i/262kn.png) no-repeat;}

    tr.iclosed div.icon {
            background: url(http://funkyimg.com/i/262ks.png) no-repeat;}


/* CS3.2 Всё подряд*/
#pun-main div.catleft, #pun-main div.catright {display: none}
#pun-main .post-author ul {text-align: center}
ul.post-ul-Sp, .post-img-Sp {text-align:center;}
#pun th, #pun-main h2 {text-align: center}
#pun-navlinks .container, #pun-ulinks .container {text-align: center;}
.modlist {font-size: 95.05%;}
#pun-announcement .container {font-size: 101%; font-family: "tahoma";}
.category h2 span{display: none;}
#pun-stats h2 span {visibility: hidden;}
#pun td .modlist{display:none;}
.lastedit {display:none}
#pun-announcement h2 {display: none}
#pun-navlinks #navawards{display:none}







a.tvm, a.tvm:active, a.tvm:link, a.tvm:visited {
font-family: tahoma;
font-size: 11px;
background-color:#2e2217;
color: #201213; 
font-weight: normal;
text-align:center;
display: block;
margin: 2px;
text-decoration: none;
border-left-style: solid;
border-left-color: #ac8565;
border-left-width: 5px;
width:150px;
}

a.tvm:hover {
font-family: tahoma;
font-size: 11px;
color: #201213; 
background-color:#211710;
display: block;
font-weight: bold;
text-align:center;
cursor:crosshair; 
text-decoration: none;
border-left-style: solid;
border-left-color: #2c2016;
border-left-width: 5px;
width:150px;
}









/*Фон мини-профиля в Топике*/
.punbb .post .post-author {
  background:url(http://funkyimg.com/i/262ko.png) 0 0 repeat-y; /*Фон размножаемый по вертикали*/
  overflow: visible!important;
  margin:12px 0!important;
}
.punbb .post .post-author > ul {
  background:url(http://funkyimg.com/i/262km.png) 0 top no-repeat,url(http://funkyimg.com/i/262kr.png) 0 bottom no-repeat;/*Фон верха - низа*/
  margin:-12px 0 -12px 0!important;
  padding:12px 13px!important;
}



/* скроллбар */
::-webkit-scrollbar-thumb:vertical {
    background-color:#000000;
    }

::-webkit-scrollbar-thumb:horizontal {
    background-color:#000000;
    }

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color:#d0d0d0; margin-top: 
    }



.post-body a:link {
  font-weight: bold
}

a:hover {
   color:#263235;
   -webkit-transition:color 700ms ease-in;
   -moz-transition:color 700ms ease-in;
   -o-transition:color 700ms ease-in;
   transition:color 700ms ease-in;
}

#pun-index.punbb .tclcon h3 > a {
  color: #000;
font-family: Georgia;
   font-size: 14px !important;
   letter-spacing: 1px;
   text-transform: uppercase;

}
#pun-index.punbb .tclcon h3 > a:hover {
   color:#263235;

}



.miniprofile { 
width: 181px;
}

.hoverprofile { width: 181px; height: 181px; background-image: url("http://funkyimg.com/i/262mS.png"); opacity: 0; position: absolute; z-index: 2; margin-top: 1px; transition: 0.6s; -moz-transition: 0.6s; -webkit-transition: 0.6s; -o-transition: 0.6s; }

.hoverprofile:hover { opacity: 1; transition: 0.6s; -moz-transition: 0.6s; -webkit-transition: 0.6s; -o-transition: 0.6s;}

.pa-fld1 {color: #ffffff !important; font-size:10px;}



/*мини-темки*/
#tem {
    width: 500px;
    height: 322px;
    text-align: justify;
    background-image: url(https://41.media.tumblr.com/144f4b681477a7b68898ccefdd2a7965/tumblr_nk1da5fAwG1tjf9x3o1_500.jpg);
}

#temii {
        position: absolute;
    width: 439px;
    height: 250px;
    margin-top: 31px;
    margin-left: 20px;
    padding: 10px;
    background-color: #e7e7e7;
    color: #060f11;
}

#temiii {
    position: absolute;
    background-color: #38261c;
    color: #cccccc;
    font-family: Georgia;
    font-weight: bold;
    font-size: 14px !important;
    text-align: center;
    letter-spacing: 1px;
    margin-left: -10px;
    text-transform: uppercase;
    margin-top: -19px;
    width: 449px;
    padding: 5px;
}

/*рамка на аватар*/
.pa-avatar { 
    width: 180px;
    max-height: 180px;
    border: 0px solid #000000;
}




/*мини-темки*/
#nan {
    width: 500px;
    height: 600px;
    text-align: justify;
    background-image: url(https://s-media-cache-ak0.pinimg.com/736x/db/3b/00/db3b00c1eb2ccccd7d8ff0249b4f4793.jpg
);
}

#nani {
        position: absolute;
    width: 439px;
    height: 500px;
    margin-top: 31px;
    margin-left: 20px;
    padding: 10px;
    background-color: #e7e7e7;
    color: #060f11;
}

#nanii {
    position: absolute;
    background-color: #38261c;
    color: #cccccc;
    font-family: Georgia;
    font-weight: bold;
    font-size: 14px !important;
    text-align: center;
    letter-spacing: 1px;
    margin-left: -10px;
    text-transform: uppercase;
    margin-top: -19px;
    width: 449px;
    padding: 5px;
}

#textnz { 
width: 400px; 
padding: 12px; 
background-color: #EEEEEE; 
font-family: calibri; 
color: #000000; 
background-image: url(http://funkyimg.com/i/21Qpj.png); 
font-size: 12px;
line-height: 90%; 
text-align: justify; 
overflow: auto;
}



/*** TEMPLATES ***/
.announcecont {
	border-top:1px solid #000;
	width:300px;
	margin:auto;
}
.anntitle {
	font-family:intro;
	color:#000;
	font-size:20px;
	border-top:1px solid #000;
	padding:10px;
	width:300px;
	margin:auto;
}
.annborder {
	border:1px solid #000;
	padding:10px;
	width:280px;
}
.anncontent {
	width:260px;
	padding:10px;
	border-bottom:5px solid #000;
	margin:auto;
	text-align:justify;
}
.public {
font-family:intro; font-size:50px; color:#000; padding-bottom:4px; width:850px; padding-top:20px;
}
.public a {
	color:#E67343 !important;
}


.pa-fld3 {color: #0e0e0e!important; font-size:11px;}

/*баннерки*/
#banners a img {opacity:0.3; -moz-opacity:0.3; 
-moz-transition: 1s ease; 
-webkit-transition: 1s ease; 
filter:alpha(opacity=90); }
#banners a:hover img {opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100); }


.ssl {position: absolute; top: 85px; left: 1200px; width; 22px;  text-align: right;
-webkit-transition: all 2s ease-out;
  -moz-transition: all 2s ease-out;
  -o-transition: all 2s ease-out;
  transition: all 2s ease-out; }
.ssl:hover {left: 1200px; width: 45px; background: url(http://funkyimg.com/i/255Vh.png) /*полный круг*/  no-repeat;  text-align: right;}


.view {
   width: 500px;
   height: 200px;
   margin: 10px;
   float: center;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
   background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
   width: 500px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0 0 0;
}
.view p {
line-height: 100%;
   position: relative;
   color: #000;
   margin: 20px 20px 20px 20px;
   padding: 40px 40px 40px;
   text-align: justify;
}
.view a.info {
   display: inline-block;
   text-decoration: none;
   padding: 7px 14px;
   background: #000;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.view a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
} 


.view-first img {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
background-image: url("http://funkyimg.com/i/239b9.png");
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.view-first h2 {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first p {
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
.view-first a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view-first:hover p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.view-first:hover a.info {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
				


.summary-hide {
    display: none;
    white-space: pre-line;
    position: absolute;
    background-image: url("http://guardiansofharmony.ru/files/0015/2b/14/28084.jpg");
    box-shadow: 1px 1px 0 #957685 inset, 1px 1px 0 #957685;
    padding: 10px;
    width: 30%;
}

.summary-show {
    cursor: pointer;
}



.ch-grid {
	margin: 20px 0 0 0;
	padding: 0;
	list-style: none;
	display: block;
	text-align: center;
	width: 100%;
}

.ch-grid:after,
.ch-item:before {
	content: '';
    display: table;
}

.ch-grid:after {
	clear: both;
}

.ch-grid li {
	width: 200px;
	height: 200px;
	display: inline-block;
	margin: 5px;
}



#JampPanel:hover {
    margin-right: 32px;
}
#JampPanel, #JampPanel .container {
    background: url(http://funkyimg.com/i/25FjQ.png) no-repeat;
    width: 249px;
    height: 231px;
}
#JampPanel {
    background: transparent;
    height: 231px;
    margin-right: -191px;
    opacity: 0.86;
    position: fixed;
    right: 0;
    top: 80px;
    transition-duration: 0.33s;
    width: 250px;
    z-index: 1200;
}
#JampPanel .container {
    height: 231px;
margin:-1px 0 0 30px;
    padding: 12px;
    width: 100%;
}
#Zaslonyalka {
    background-color: transparent;
    height: 249px;
    margin: -12px 0 0 -18px;
    position: absolute;
    width: 0px;
}
#textjamp {
  text-align: center;
    height: 195px;
    margin-left: 20px;
    margin-top: 3px;
    overflow-y: auto;
    padding: 5px;
    width: 195px;
}

