/*ГРАФИКА -------------------------------------------------------------*/
/* Боди или фон форума */
body {
    background: url(http://co.forum4.ru/files/0017/df/ad/32283.jpg) top center repeat-x fixed, url(http://co.forum4.ru/files/0017/df/ad/45500.jpg) top center;
    background-color: #306486;
}

/* двигалка навигации, общие ссылки и пользовательские*/
div#pun-navlinks {
    position: fixed;
    width: auto;
    height: 57px;
    line-height: 29pt !important;
    text-align: center;
    left:0!important;
    top: 0px;
    right: -104px;
    margin-right:0;
    z-index: 999;
    background: url(http://co.forum4.ru/files/0017/df/ad/32283.jpg);
    url(http://co.forum4.ru/files/0017/df/ad/32283.jpg) top center repeat-x fixed, url(http://co.forum4.ru/files/0017/df/ad/45500.jpg) top center;
    }
div#pun-ulinks {position: fixed;width: 100%;text-align: center;top: 26px;margin-bottom: 0px;right: -172px;z-index: 999;}


/* Шапка */
#pun-title table {
    background-image: url(http://co.forum4.ru/files/0017/df/ad/61721.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    border: none;
    height: 655px;
    width: 935px;
    margin-left: -18px;
}

/* Пан или "тело" форума */
#pun {
    background-color: #f5f5f5;
    background-image: url(http://co.forum4.ru/files/0017/df/ad/69083.jpg);
}

/* футер */
#pun-about p.container {background-image: url(http://co.forum4.ru/files/0017/df/ad/70663.jpg);background-position: center top;background-repeat: no-repeat;height: 150px;width: 932px;margin-left: -30px;text-align: center;border-color: transparent;}

div#pun-about {
   margin-bottom: -41px;
}




#profilenav h2 {text-shadow: none;}

#pun-redirect.punbb  #pun-main h1 {
background: none;}


hr, .banner-line {
    height: 1px;
    background: #948080 center no-repeat;
    border: 1px solid #d08c8f;
    margin: 11px !important;
    box-shadow: 0 0 10px #b55757;
    }

/* Цвет текста на форуме */
.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 h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain 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: #000000; font-weight: normal;font-style: normal;}


/* Ссылки */

/* 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 {color: #3a6e90;font: bold 12px tahoma;letter-spacing: 0px;border-bottom: 0px none #000;text-decoration: none;-moz-transition: all 0.2s 0.02s ease;-o-transition: all 0.2s 0.02s ease;-webkit-transition: all 0.2s 0.02s ease;}

/* cs2.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: #598464;
    border-bottom: 0px none #000;
    }

/* cs2.3. верхняя навигация до наведения */
#pun-navlinks a {
    color: #fff;
    text-transform: uppercase;
    font: 14px arial black;
    letter-spacing: 0px;
    text-shadow: 1px 1px 0px #7ab98b;
}

/* cs2.4. нижняя навигация до наведения */
#pun-ulinks a {
    color: #ffffff;
    font: 600 8px tahoma;
    text-shadow: 1px 1px 0 #70a97e !important;
    border-bottom: 0px none #000;
    letter-spacing: 1px;
    padding: 2px 2px 2px 2px !important;
    text-transform: uppercase;
    -moz-transition: all 0.2s 0.02s ease;
    -o-transition: all 0.2s 0.02s ease;
    -webkit-transition: all 0.2s 0.02s ease;
    }

/* cs2.5. верхняя навигация после наведения */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  border-top: 4px solid #bbefc7;
  }

/* cs2.5. нижняя навигация после наведения */
#pun-ulinks a:hover, #pun-ulinks a:focus, #pun-ulinks a:active {
  border-bottom: 0px none #000;
  background: #a7d5e0;
  }

/*ИКОНКИ -------------------------------------------------------------*/

/* Иконка старых сообщений*/
Div.icon {
background-image : url(http://co.forum4.ru/files/0017/df/ad/58267.png);
background-repeat: no-repeat;
}

/* Иконка новых */
TR.inew Div.icon {
background-image : url(http://co.forum4.ru/files/0017/df/ad/66443.png);
background-repeat: no-repeat;
}

/* Иконка важных*/
TR.isticky Div.icon {
background-image : url(http://co.forum4.ru/files/0017/df/ad/79053.png);
background-repeat: no-repeat;
}

/* Иконка закрытых*/
TR.iclosed Div.icon {
background-image : url(http://co.forum4.ru/files/0017/df/ad/16989.png);
background-repeat: no-repeat;
}


/*Фон под контейнеры в форме Ответа*/
#pun_wrap #post .container[id$="-area"]{
border: outset 2px #e3eef4!important;
border-radius: 10px;
background: #f5f5f5;
padding: 9px;
font: normal normal 400 11px/normal Verdana;
}


/* Статус картинки с надписью "статистика" над статистикой форума*/
#pun-stats.section h2 {
    background-attachment: scroll;
    background-clip: border-box;
    height: 55px;
    width: 900px;
    margin-left: -5px;
    background-color: transparent;
    background-image: url(http://co.forum4.ru/files/0017/df/ad/12594.png);
    background-origin: padding-box;
    background-position: 10% 10%;
    background-repeat: no-repeat;
    background-size: auto;
    }

/* Закругленные края цитаты и кода с тенью */
.punbb .quote-box, .punbb .code-box 
{    background: #e3ecec;
    color: #1d3240 !important;
    border: 6px solid #b0dcbb !important; }

.punbb textarea, .punbb select {
    background: #e6ebec;
    border: 2px solid rgb(209, 225, 225) !important;
    }

/* название категорий*/
#pun-main .category h2 span {visibility: visible;}

/*------------------------скролинг-----------------------*/
::-webkit-scrollbar-thumb:vertical {
    background-color:#8eca9d;
}

::-webkit-scrollbar-thumb:horizontal {
    background-color:#8eca9d;
}

::-webkit-scrollbar-thumb:vertical:hover { background-color:#c8e2f3;}
::-webkit-scrollbar-thumb:horizontal:hover { background-color:#c8e2f3;}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #92b5cc;
    }


/*---------------ЛИНКИ---------------*/
.urls {
 margin-top: 4px!important;
 color: #396b46 !important;
 font: bold 8px arial black !important;
 text-align: center;
 width: 145px;
 text-shadow: 1px 1px 0 #c3d8e8 !important;
 padding: 4px 0px 4px 0px;
 background: #a6cbde;
 letter-spacing: 0px!important;
 text-transform: uppercase;
 display: inline-block;
 -webkit-transition: .3s all;
 -moz-transition: .3s all;
 -ms-transition: .3s all;
 -o-transition: .3s all;
 transition: .3s all;
}
.urls:hover {
    color: #1c3e54 !important;
    text-shadow: 1px 1px 0 #d1ded5 !important;
    background: #b2e0be;
    text-align: center;
    letter-spacing: 1px !important;
}


/*---------------кнопки---------------*/
input.button {
    cursor: pointer;
    height: 0px;
    padding: 9px 9px 9px 9px;
    background: #d7e1e3;
    color: #25462e !important;
    border: 2px solid #f5f5f5;
    font: bold 8px arial !important;
    text-align: center;
    letter-spacing: 2px!important;
    line-height: 0px !important;
    margin-left: 10px!important;
    text-transform: uppercase;
    }

.dtratios { color: white; font: 30px playball; text-align: center; } 
.dtname { font: 10px montserrat; text-transform: uppercase; background: #454545; color: white; text-align: center; } 
.dtgroup { width: 100px; height: 20px; border: #ffffff double 5px; background: #f70000; } 
.dtgroup1 {width: 100px; height: 20px; border: #ffffff double 5px; background: #f7dd00; } 
.dtgroup2 {width: 100px; height: 20px; border: #ffffff double 5px; background: #11ea00; } 
.dtgroup3 {width: 100px; height: 20px; border: #ffffff double 5px; background: #0086f7; } 
.dtgroup4 {width: 100px; height: 20px; border: #ffffff double 5px; background: #990ff1; } 
.dtgroup5 { width: 100px; height: 20px; border: #ffffff double 5px; background: #a4a4a4; } 
.dtgroup6 {width: 100px; height: 20px; border: #ffffff double 5px; background: #ff0033; } 
.dtgroup7 { width: 100px;height: 20px; border: #ffffff double 5px; background: #f78292; } 
.dtgroup8 { width: 100px;height: 20px; border: #ffffff double 5px; background: #003399; }

.sp-slideshow {position: absolute;margin: 79px 4px!Important;width: 892px;height: 492px;}

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

.sp-slideshow input {position: absolute;bottom: 15px;left: 50%;width: 9px;height: 9px;z-index: 1001;cursor: pointer;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);opacity: 0;} 

.sp-slideshow input + label {position: relative;bottom: -43em;left: 48%;width: 6px;height: 6px;display: inline-block;z-index: 10;border: 3px solid #fff;border: 3px solid rgba(255,255,255,0.9);-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;-webkit-transition: background-color linear 0.1s;-moz-transition: background-color linear 0.1s;-o-transition: background-color linear 0.1s;-ms-transition: background-color linear 0.1s;transition: background-color linear 0.1s;} 

.sp-slideshow input:checked + label {background-color: #fff;background-color: rgba(255,255,255,0.9);} .sp-selector-1, .button-label-1 {margin-left: -36px;} .sp-selector-2, .button-label-2 {margin-left: -18px;} .sp-selector-3, .button-label-3 {margin-left: 0px;} .sp-selector-4, .button-label-4 {margin-left: 18px;} .sp-selector-5, .button-label-5 {margin-left: 36px;}

.sp-arrow {position: absolute;top: 50%;width: 36px;height: 41px;margin-top: -19px !important;display: none;opacity: 0.8;cursor: pointer;z-index: 1000;background: transparent url(http://i.imgur.com/AJJZZre.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: 1;} .sp-arrow:active{margin-top: -18px;} .sp-selector-1:checked ~ .sp-arrow.sp-a2, .sp-selector-2:checked ~ .sp-arrow.sp-a3, .sp-selector-3:checked ~ .sp-arrow.sp-a4, .sp-selector-4:checked ~ .sp-arrow.sp-a5 {right: 15px;display: block;background-position: top right;} .sp-selector-2:checked ~ .sp-arrow.sp-a1, .sp-selector-3:checked ~ .sp-arrow.sp-a2, .sp-selector-4:checked ~ .sp-arrow.sp-a3, .sp-selector-5:checked ~ .sp-arrow.sp-a4 {left: 15px;display: block;background-position: top left;}


.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 .sp-parallax-bg {-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;}

input.sp-selector-1:checked ~ .sp-content {background-position: 0 0;} input.sp-selector-2:checked ~ .sp-content {background-position: -100px 0;} input.sp-selector-3:checked ~ .sp-content {background-position: -200px 0;} input.sp-selector-4:checked ~ .sp-content {background-position: -300px 0;} input.sp-selector-5:checked ~ .sp-content {background-position: -400px 0;} input.sp-selector-1:checked ~ .sp-content .sp-parallax-bg {} input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;} input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;} input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;} input.sp-selector-5:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;}


.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; } 

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%;} input.sp-selector-4:checked ~ .sp-content .sp-slider {left: -300%;} input.sp-selector-5:checked ~ .sp-content .sp-slider {left: -400%;}


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), input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4), input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5){ opacity: 1; }

@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; }