#pun { background-image : url("http://funkyimg.com/i/GKLj.png");
background-color : #dfd9cc;
background-position : center;}

/* CS1 Цвет фона, фона форума и остальное.
-------------------------------------------------------------*/

body { 
 background-color: #0c0c0c; 
 overflow-x: hidden;
 background-image : url("http://funkyimg.com/i/GKLk.png");
 background-repeat: repeat;
 background-position : top left;
}

/*Фон мини-профиля в Топике */
.punbb .post .post-author > ul {
background:url(http://funkyimg.com/i/GKLt.png) 0 top no-repeat,url(http://funkyimg.com/i/GKLs.png) 0 bottom no-repeat; /*Фон верха - низа*/
margin: 0px 9px 0px 0!important;
padding: 10px 15px!important;
}
.punbb .post .post-author {
background:url(http://funkyimg.com/i/GKLr.png) 0 0 repeat-y; /*Фон размножаемый по вертикали*/
overflow: visible!important;
margin: 0px 0!important;
}

/* 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 {
border-color:transparent;
  color: #000000;
  }

/* CS1.2 */
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {
border-color:transparent;
  color: #000000;
  }

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
border-color:transparent;
  color: #989495;
  font-weight: normal;
font-style: normal;

  }

/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
border-color:transparent;
  color: #000000;
  }

/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
border-color:transparent;
  color: #000000;
  }

/* CS1.6 */
.punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl  {
background-color: transparent;;
  color: #000000;
  }


/* CS1.8 */
#pun-navlinks .container {
  border-color:transparent;
  color: #989495;
  }

.offline li.pa-online strong {
  font-weight: normal
  }

.punbb textarea, .punbb select, .punbb input {
  background-color: #989495;
  color: #000000;
}

.punbb textarea, .punbb input {
  background-image : url("http://funkyimg.com/i/GKNC.png");
  background-color: #c0ada2;
  text-color: #151515;
  border-width: 0px;
  box-shadow: inset 0px 0px 0px 1px #b29b8f;
outline:1px solid #cdc4be;
border:1px solid #926c5e;
}

.punbb select, .punbb .quote-box, .punbb .code-box {
  background-image : url("http://funkyimg.com/i/GKNC.png");
  text-color: #151515;
  background-color: #c0ada2;
  border-width: 0px;
  box-shadow: inset 0px 0px 0px 1px #b29b8f;
outline:1px solid #cdc4be;
border:1px solid #926c5e;
}

/* CS2 Цвета границ
-------------------------------------------------------------*/

/* CS2.1 */
.punbb .container, .punbb .post-body, .post h3, #pun-title {
border-color:transparent;}

/* CS2.2 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
border-color:transparent;
  }

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

/* CS2.4 */
.punbb td, .punbb fieldset, #viewprofile ul, #profilenav ul, .punbb .post .post-body,
.punbb .post h3 span, .post-links ul, .post-links, .usertable table {
border-color:transparent;
  }

/* CS2.5 */
.punbb th {
border-color:transparent;
  }

/* CS2.6 */
.punbb .quote-box, .punbb .code-box {
border-color:transparent;
  }

#pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span {
border-color:transparent;
  }

#pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend {
border-color:transparent;
  }

.punbb .divider {
border-color:transparent;
  }

.punbb .formal fieldset .post-box, .punbb .info-box {
border-color:transparent;
  }

li.pa-online {
border-color:transparent;
  }

.punbb .post-sig dt {
  content: url(http://funkyimg.com/i/GKNM.png) ;
  width: auto;
  height: auto;
  margin: 20px;
border-color:transparent;
  }


/* CS3 Цвета ссылок и всё что с ними связанно
-------------------------------------------------------------*/

/* 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: #000000;
    border-bottom: 0px none #000;
  text-decoration: none;

  }

.punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {
  color: #060606
  }

/* 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: #151515;
    border-bottom: 0px none #241b06;
   text-decoration: none;

  }

/* CS3.3 */
#pun-navlinks a {
  color: #151515;
    border-bottom: 0px none #000;
  text-decoration: none;
  }

/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  color: #151515;
  font-weight: normal;
font-style: normal;
  border-bottom: 0px none #000;
   text-decoration: none;

  }
/*/6060*/
#pun-pagelinks a:active, #pun-pagelinks a:focus {
  background-color: #1b0d04;
  color: #151515;
  }

#pun-main .post-author ul {color : #7c4642; text-shadow: #0b0b0b 1px 1px 1px}
.post-author ul li a:link {color: #7c4642; text-shadow: #0b0b0b 1px 1px 1px} - просто ссылка
.post-author ul li a:visited {color: #7c4642; text-shadow: #0b0b0b 1px 1px 1px} - посещенная ссылка
.post-author ul li a:hover {color: #595959; text-shadow: #0b0b0b 1px 1px 1px} - ссылка при наведении

/* CS4 Фон всем категориям и разделение между сообщениями. + Сдвиг рекламы.
 -------------------------------------------------------------*/

#pun  .section {border-style: none; width: 738px;   }
#pun  .tc2, #pun-main .post-author ul  {text-align: center; }

.punbb .post div.container {
  background: url("") no-repeat scroll center bottom transparent;
}

.punbb .section h2, #pun-main h1, #pun-stats h2, #pun-main h2, #pun-debug h2 {
  background: url() top center;
  text-align: center;
  color: #000;
  }

/*верх.баннер*/
#pun-title table tbody tr .title-logo-tdr 
{position: absolute; z-index: 1;  left: -220px; top: 20px;
}

#pun-category1.category h2 {
font-size:0 !important;}


#pun-stats.section h2 {
background: url(http://funkyimg.com/i/GKPp.png) no-repeat top center;
height: 188px;
width: 1005px;
margin-left: -105px;
border-style: none;
font-size:0 !important;}

/*  CS5 Категории форума и кнопки 
------------------------------------------------------------*/


/* CS6 Логотип снизу
 -------------------------------------------------------------*/

 #pun-about p.container {background-color: #;
   background-image : url(http://funkyimg.com/i/GKLm.png);
   margin-left: -117px;
   background-position : center top;
   background-repeat : no-repeat;
   height : 215px;
   width:1005px;
   overflow-x: hidden;}

 div#html-footer {
        margin: 0px 0px 0px 0px;}

 div#pun-about {
       margin-top: 0px;
       margin-bottom: -20px;
}

 #pun-announcement.section h2 span {display:  none; }
    a.menu:link, a.menu:visited, a.menu:active{text-decoration: none; }

/* CS7 Остальные коды для оформления форума
 -------------------------------------------------------------*/

/* CS4 Картинки категорий */
#pun-category1.category h2 {
background: url(http://funkyimg.com/i/GKPh.png) no-repeat top center;
height: 188px;
width: 1005px;
margin-left: -106px;
font-size:0 !important;}

#pun-category2.category h2 {
background: url(http://funkyimg.com/i/GKPi.png) no-repeat top center;
height: 188px;
width: 1005px;
margin-left: -106px;
font-size:0 !important;}

#pun-category3.category h2 {
background: url(http://funkyimg.com/i/GKPj.png) no-repeat top center;
height: 188px;
width: 1005px;
margin-left: -106px;
font-size:0 !important;}

#pun-category4.category h2 {
background: url(http://funkyimg.com/i/GKPk.png) no-repeat top center;
height: 188px;
width: 1005px;
margin-left: -106px;
font-size:0 !important;}

#pun-category5.category h2 {
background: url(http://funkyimg.com/i/GKPm.png) no-repeat top center;
height: 188px;
width: 1005px;
margin-left: -106px;
font-size:0 !important;}

#pun-category6.category h2 {
background: url(http://funkyimg.com/i/GKPn.png) no-repeat top center;
height: 188px;
width: 1005px;
margin-left: -106px;
font-size:0 !important;}

#pun-category7.category h2 {
background: url(http://funkyimg.com/i/GKPo.png) no-repeat top center;
height: 188px;
width: 1005px;
margin-left: -106px;
font-size:0 !important;}

/*TABLES BEGIN*/
.updatebox {width: 300px; height:132px; overflow: auto; text-align: justify;margin: auto;background: rgba(247,247,247,0.6);padding: 15px;box-shadow: 2pt 2px 3px rgba(0, 0, 0, 0.2);-moz-box-shadow: 2pt 2px 3px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 2pt 2px 3px rgba(0, 0, 0, 0.2);color: #000000;line-height: 12px; border: 3px #000 double;}

.bannercont {width: 396px; z-index:100; margin-top:-48px!important; margin-left:-20px!important}

#bannerlinks2 a {
font: normal normal 8px/20px arial;
	text-decoration: none;
	letter-spacing: 2px;
	display: block!important;
	background: #251113;
	margin: 0px;
        margin-top:1px;
	text-transform: uppercase;
	color: #FFFFFF;
	text-align: center;
	border-bottom: 1px #e8e8e8 solid;
        width:140px;
        }

#bannerlinks2 a:hover {
    -moz-transition: 1s ease; -webkit-transition: 1s ease; 
    font: normal normal 8px/20px arial;
	text-decoration: none;
	letter-spacing: 6px;
	display: block!important;
	background: #251113;
	margin: 0px;
	text-transform: uppercase;
	color: #999999;
	text-align: center;
	border-bottom: 2px #000 solid;
        }

#vote a {
font: normal normal 8px/20px arial;
	text-decoration: none;
	letter-spacing: 2px;
	display: block!important;
	background: #251113;
	margin: 0px;
        margin-top:1px;
	text-transform: uppercase;
	color: #FFFFFF;
	text-align: center;
	border-bottom: 1px #e8e8e8 solid;
        width:65px;
        }

#vote a:hover {
    -moz-transition: 1s ease; -webkit-transition: 1s ease; 
    font: normal normal 8px/20px arial;
	text-decoration: none;
	letter-spacing: 6px;
	display: block!important;
	background: #251113;
	margin: 0px;
	text-transform: uppercase;
	color: #999999;
	text-align: center;
	border-bottom: 2px #000 solid;
        }

.staffbox {width: 220px; height:158px; text-align: justify;margin: auto;background: rgba(247,247,247,0.6);padding: 2px;box-shadow: 2pt 2px 3px rgba(0, 0, 0, 0.2);-moz-box-shadow: 2pt 2px 3px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 2pt 2px 3px rgba(0, 0, 0, 0.2);font-family:  Calibri, serif;font-size: 10px;color: #000000;line-height: 12px; border: 3px #000 double;}

.otmbox {width: 150px; height: 64px; background: rgba(247,247,247,0.6);padding: 2px;box-shadow: 2pt 2px 3px rgba(0, 0, 0, 0.2);-moz-box-shadow: 2pt 2px 3px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 2pt 2px 3px rgba(0, 0, 0, 0.2);font-family:  Calibri, serif;font-size: 10px;color: #000000;line-height: 12px; border: 3px #000 double; margin: 5px;}

.needbox {width: 125px; height:158px; background: rgba(247,247,247,0.6);padding: 2px;box-shadow: 2pt 2px 3px rgba(0, 0, 0, 0.2);-moz-box-shadow: 2pt 2px 3px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 2pt 2px 3px rgba(0, 0, 0, 0.2);font-family:  Calibri, serif;font-size: 10px;color: #000000;line-height: 12px; border: 3px #000 double; margin: 5px;}

.wantedsbox {width: 170px; height: 220px; background: rgba(247,247,247,0.6);padding: 2px;box-shadow: 2pt 2px 3px rgba(0, 0, 0, 0.2);-moz-box-shadow: 2pt 2px 3px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 2pt 2px 3px rgba(0, 0, 0, 0.2);font-family:  Calibri, serif;font-size: 10px;color: #000000;line-height: 12px; border: 3px #000 double; margin: 5px;}

.activebox {width: 280px; height:220px; text-align: justify;margin: auto;background: rgba(247,247,247,0.6);padding: 2px;box-shadow: 2pt 2px 3px rgba(0, 0, 0, 0.2);-moz-box-shadow: 2pt 2px 3px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 2pt 2px 3px rgba(0, 0, 0, 0.2);font-family:  Calibri, serif;font-size: 10px;color: #000000;line-height: 12px; border: 3px #000 double;}

.staff2 {width:87px; height: 48px;}

.bannerbox {width: 300px; height:40px; text-align: justify;margin: auto;background: rgba(247,247,247,0.6);padding: 2px;box-shadow: 2pt 2px 3px rgba(0, 0, 0, 0.2);-moz-box-shadow: 2pt 2px 3px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 2pt 2px 3px rgba(0, 0, 0, 0.2);font-family:  Calibri, serif;font-size: 10px;color: #000000;line-height: 12px;}
/*TABLE END*/

/*SLIDE TWO BEGIN*/

.otm {  transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s; opacity: 0.0; background-color: #121212; width: 150px; height: 64px;}
.otm:hover { opacity: 0.9 }

.otmb {  transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s; opacity: 0.0; background-color: #121212; width: 64px; height: 60px;}
.otmb:hover { opacity: 0.9 }

.otmw {  transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s; opacity: 0.0; background-color: #121212; width: 80px; height: 60px;}
.otmw:hover { opacity: 0.9 }

#mainlinks a {
        font-family:  Calibri, serif;
        font-size: 12px;
	text-decoration: none;
	display: block!important;
	background: rgba(247,247,247,0);
	margin: 0px;
        margin-top:1px;
	color: #4b1f23;
	text-align: center;
        padding: 4px;
	border-left: 2px #e8e8e8 solid;
	border-right: 2px #e8e8e8 solid;
        width:108px;
        }

#mainlinks a:hover {
        font-family:  Calibri, serif;
        font-size: 12px;
	text-decoration: none;
	display: block!important;
	background: rgba(247,247,247,0);
	margin: 0px;
	color: #fff;
	text-align: center;
        padding: 4px;
	border-left: 2px #660722 solid;
        border-right: 2px #660722 solid;
        }

.wantedtitle {
font: normal normal 8px/20px arial;
	text-decoration: none;
	letter-spacing: 2px;
	display: block!important;
	background: #251113;
	margin: 0px;
        margin-top:1px;
	text-transform: uppercase;
	color: #FFFFFF;
	text-align: center;
	border-bottom: 1px #e8e8e8 solid;
        width:164px;
        }

.wantedtitle2 {
font: normal normal 8px/20px arial;
	text-decoration: none;
	letter-spacing: 2px;
	display: block!important;
	background: #251113;
	margin: 0px;
        margin-top:1px;
	text-transform: uppercase;
	color: #FFFFFF;
	text-align: center;
	border-bottom: 1px #e8e8e8 solid;
        width:280px;
        }

/*SLIDE TWO END*/

.thattable {width: 830px; height: 326px; padding: 10px;} 

/*CAROUSEL BEGIN*/
.sp-slideshow { background-image:none!important; width: 830px; height: 316px; margin-left:-10px; position:absolute; z-index:100; padding: 10px; overflow:hidden}

.sp-content { background-image:none!important; position: relative;width: 100%;height: 100%; position:absolute; z-index:100; overflow:hidden; left: -10px;} 

.sp-parallax-bg { background-color: transparent;-webkit-background-size: cover;-moz-background-size: cover;background-size: cover;position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;}


/*arrows*/
.sp-arrow {position: absolute;top: 50%;width: 28px;height: 38px;margin-top: -19px;display: none;opacity: 0;cursor: pointer;z-index: 1000;background: transparent url(http://s020.radikal.ru/i711/1404/b3/c43e462774c6.png) no-repeat;-webkit-transition: opacity linear 0.3s;-moz-transition: opacity linear 0.3s;-o-transition: opacity linear 0.3s;-ms-transition: opacity linear 0.3s; transition: opacity linear 0.3s;} 

.sp-arrow:hover{opacity: 0;} 
.sp-arrow:active{margin-top: -18px;} 
.sp-selector-1:checked ~ .sp-arrow.sp-a2, 
.sp-selector-2:checked ~ .sp-arrow.sp-a3 {right: 15px;display: block;background-position: top right;}

.sp-selector-2:checked ~ .sp-arrow.sp-a1, 
.sp-selector-3:checked ~ .sp-arrow.sp-a2 {left: 15px;display: block;background-position: top left;}

.slideone { width:825px; height:230px; padding:0px; background-image:url('');}

/*transition*/
.sp-slideshow input:checked ~ .sp-content {-webkit-transition: background-position linear 0.6s, background-color linear 0.8s;-moz-transition: background-position linear 0.6s, background-color linear 0.8s;-o-transition: background-position linear 0.6s, background-color linear 0.8s;-ms-transition: background-position linear 0.6s, background-color linear 0.8s;transition: background-position linear 0.6s, background-color linear 0.8s;} 

.sp-slideshow input:checked ~ .sp-content {-webkit-transition: background-position linear 0.7s;-moz-transition: background-position linear 0.7s;-o-transition: background-position linear 0.7s;-ms-transition: background-position linear 0.7s;transition: background-position linear 0.7s;}

/*li etc*/
.sp-slider { position: relative;left: 0; width: 500%;height: 100%;list-style: none; margin: 0;padding: 0;-webkit-transition: left ease-in 0.8s; -moz-transition: left ease-in 0.8s; -o-transition: left ease-in 0.8s; -ms-transition: left ease-in 0.8s;transition: left ease-in 0.8s; } 
.sp-slider > li { height:100%; padding:0 60px; width: 20%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; float:left; text-align:center; opacity:0.4; -webkit-transition:opacity ease-in 0.4s 0.8s; -moz-transition:opacity ease-in 0.4s 0.8s; -o-transition:opacity ease-in 0.4s 0.8s; -ms-transition:opacity ease-in 0.4s 0.8s; transition:opacity ease-in 0.4s 0.8s; }
.sp-slider > li img{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;display: block;margin: 0 auto;padding: 40px 0 50px 0;max-height: 100%;max-width: 100%;}

input.sp-selector-1:checked ~ .sp-content .sp-slider {left: 0;} 

/*slides loc*/
input.sp-selector-1:checked ~ .sp-content .sp-slider {left: 0;} 
input.sp-selector-2:checked ~ .sp-content .sp-slider {left: -100%;} 
input.sp-selector-3:checked ~ .sp-content .sp-slider {left: -200%;}

/*arrows on slides*/
input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child, 
input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2), 
input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3){ opacity: 1; }


/*mobile*/
@media screen and (max-width: 840px){ .sp-slideshow { height: 345px; } } @media screen and (max-width: 680px){ .sp-slideshow { height: 285px; } } @media screen and (max-width: 560px){ .sp-slideshow { height: 235px; } } @media screen and (max-width: 320px){ .sp-slideshow { height: 158px; }
/*CAROUSEL END*/

/* Увеличилка*/
.moverbox
{
  cursor: default;
  list-style: none;
}

.moverbox a
{
  cursor: default;
}

.moverbox a .preview
{
  display: none;
}

.moverbox a:hover .preview
{
  display: block;
  position: absolute;
  top: -33px;
  left: -45px;
  z-index: 1;
}

.moverbox img
{
  background: transpanent;
  border-color: transpanent;
  border-style: solid;
  border-width: 1px;
  color: inherit;
  padding: 2px;
  vertical-align: top;
}

.moverbox li
{
  background: transpanent;
  color: inherit;
  display: inline;
  float: left;
  margin: 3px;
  padding: 5px;
  position: relative;
}

 
#pun-main .post-author ul, #pun-main .post .container {line-height: 11px}

/*tooltip begin*/
.tooltip {
 position: relative;
 }
.tooltip em {
 display: none;
 }
.tooltip:hover em {
 font-style: normal;
 display: block;
 position: absolute;
 background: #514646;
 color: #000;
 padding: 20px 20px;
 bottom: 20px;
 right: 20px;
 box-shadow: 0 0 5px #fff;
 border-radius: 20px;
 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 -webkit-box-shadow: 0 0 20px #fff;
 -moz-box-shadow: 0 0 20px #fff;
}
.tooltip:hover em i {
 position: absolute;
 bottom: -7px;
 right: 5px;
 border-top: 7px solid #fff;
 border-left: 7px solid transparent;
 display: block;
}
/*tooptip end*/

/*idek what is this start*/
#menu span {
padding: 5px;
margin-right: 10px;
margin: 20px 0;
width: 150px!important;
height: 20px!important;
text-decoration: none;
border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-webkit-border-radius: 8px;
background: # 
font-size: 10px !important;
color: white;
}
#menu .tabactive {
text-align: center;
background: #;
}

#submenu {
padding:5px;
height: 250px;
text-align: left;
margin-left: -160px;
font-size: 11px;
width: 800px;
}

.submenutext {
text-align: center;
position:absolute;
width:100%;
max-width: 850px;
display: none; 
height: 230px!important;
/*end*/