Перейти к содержанию
IPSGuru.ru - Сообщество веб администраторов

Рекламный блок (Статистика + Картинка)


Рекомендуемые сообщения


post-5-0-31354100-1432298473_thumb.jpg

1. Внешний Вид - Управление стилями - Управление шаблонами и CSS
2. Во вкладке CSS выбираем "Добавить CSS-файл". С названием slider
3. Вставляем в него следующий код:

#slider {
	text-align: center;
}

label, a {
	cursor: pointer;
	text-decoration: none;
}
label:hover, a:hover {
	color: !important;
}

#slider {
	margin: 0 auto;
}




/* NEW EXPERIMENT */
/* Slider Setup */


#slide1:checked ~ #slides .inner { margin-left:0; }


#overflow {
	width: 100%;
	overflow: hidden;
}

article img {
	width: 100%;
}

#slides .inner {
	width: 500%;
	line-height: 0;
}

#slides article {
	width: 20%;
	float: left;
}

/* Slider Styling */




#slide1:checked ~ #active label:nth-child(1), {
	background: #333;
	border-color: #333 !important;
}

/* Info Box */

.infos {
	line-height: 20px;
	margin: 0 0 -150%;
	position: absolute;
	font-style: italic;
	padding: 30px 30px;
	opacity: 0;
	color: #000000;
	text-align: left;
}

.infos h3 {
	color: #000000;
	margin: 0 0 5px;
	font-weight: normal;
	font-size: 22px;
	font-style: normal;
}

/* Slider Styling */

#slides {
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	box-shadow: 1px 1px 4px #666;
	padding: 1%;
	background: #fff;
	background: rgb(252,255,244); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(252,255,244,1) 0%, rgba(219,218,201,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,255,244,1)), color-stop(100%,rgba(219,218,201,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* IE10+ */
	background: linear-gradient(top,  rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#dbdac9',GradientType=0 ); /* IE6-9 */
}




#slide1:checked ~ #slides article:nth-child(1) .infos
 {
	opacity: 1;
	-webkit-transition: all 1s ease-out 0.6s;
	-moz-transition: all 1s ease-out 0.6s;
	-o-transition: all 1s ease-out 0.6s;
	transition: all 1s ease-out 0.6s;
}

.infos, #slides, #active, #active label, .infos h3, .desktop, .tablet,{
	-webkit-transform: translateZ(0);
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

/* Respond Options */

#desktop:checked ~ #slider {
	-webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	height: 100%;
    background: #fff;
    width: 650px;
	margin-left: 660px;
        margin-top: -10px;
}

4. Сохраняем.
5. Добавляем еще один файл CSS с названием silencebgsoftware
6. И в него вставляем код:

/**
 * News, tops, shop, bans etc.
 *
 * hxtz_portal.css
 *
 * @pachage     HXTZ Portal
 * @version     1.0
 * @revision    1
 * @author      Vitaly 'hitz' Miller
 */

/* ==== Layout ovverides ==== */


.hxtz_portal > .ipsLayout_right > {
    width: 270px !important;
    margin-right: -300px !important;
}

.rPad_br {
    -webkit-border-bottom-right-radius: 4px;
     -webkit-border-bottom-left-radius: 4px;
        -moz-border-radius-bottomright: 4px;
         -moz-border-radius-bottomleft: 4px;
            border-bottom-right-radius: 4px;
             border-bottom-left-radius: 4px;
    margin: 0 -9px -9px -9px;
}

h3.maintitle > a#new_article {
    font-size: 12px;
}

/* ========================== */
/* ========= SIDEBAR ======== */


.button_pg {
    border: 0 none;
    border-radius: 2px 2px 2px 2px;
    color: #778492;
    cursor: pointer;
    font-family: Arial,sans-serif;
    font-size: 15px;
    font-weight: bold;
    line-height: 20px;
    text-transform: none;
    transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
}

.button_pg:hover {
    background: none repeat scroll 0 0 #658AB0;
    color: white;
}

/* New animated buttons */
.grid {
	overflow: hidden;
	margin: 0;
	width: 100%;
	max-width: 1920px;
	list-style: none;
	text-align: center;
}

.grid figure {
	position: relative;
	z-index: 1;
	display: inline-block;
	overflow: hidden;
	margin: 0 -0.135em 0.600em -0.135em;
	background: #3047A3;
	text-align: center;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	opacity: 0.8;
}

.grid figure figcaption {
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	font-weight: 300;
}

.grid figure h2 span {
	font-weight: 800;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}

figure.effect-sadie figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
	background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
	content: '';
	opacity: 0;
	-webkit-transform: translate3d(0,50%,0);
	transform: translate3d(0,50%,0);
}

figure.effect-sadie h2 {
	position: absolute;
	top: 82%;
	left: 0;
	width: 100%;
	color: #fff;
	-webkit-transition: -webkit-transform 0.35s, color 0.35s;
	transition: transform 0.35s, color 0.35s;
	-webkit-transform: translate3d(0,-50%,0);
	transform: translate3d(0,-50%,0);
    text-shadow: 1px 1px 0px rgba(0,0,0,.2);
}

figure.effect-sadie figcaption::before,
figure.effect-sadie p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-sadie {
    -webkit-transition: background 0.35s, -webkit-transform 0.35s;
	transition: background 0.35s, transform 0.35s;
}

figure.effect-sadie img {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-sadie:hover {
    background: transparent;
}

figure.effect-sadie:hover img {
    opacity: 1;
	-webkit-filter: blur(1px); 
       -moz-filter: blur(1px); 
        -ms-filter: blur(1px); 
         -o-filter: blur(1px);
            filter: blur(1px);
}

figure.effect-sadie p {
	position: absolute;
	bottom: 0;
	left: 0;
        padding: 0 0 6px 0;
	width: 100%;
	opacity: 0;
	-webkit-transform: translate3d(0,10px,0);
	transform: translate3d(0,10px,0);
}

figure.effect-sadie:hover h2 {
	color: #fff;
	-webkit-transform: translate3d(0,-70%,0) translate3d(0,-70px,0);
	transform: translate3d(0,-70%,0) translate3d(0,-70px,0);
}

figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.hxtz_portal > .ipsLayout_right > .sb-block {
    background: #fff;
    border: 1px solid #dedede;
    margin: 0 0 10px 0;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
}

.hxtz_portal > .ipsLayout_right > .sb-block > .title {
    height: 36px;
    border-bottom: 1px solid #dedede;
    color: #a6afba;
    font-weight: 600;
    font-size: 12px;
    padding: 0 0 0 10px;
    line-height: 38px;
    text-transform: uppercase;
    font-family: 'PT Sans Caption';
}

/* Forum feed list */

#sb_forum__feed > ul > li {
    border-bottom: 1px solid #f4f4f4;
}

#sb_forum__feed > ul > li:last-child {
    border-bottom: 0;
}

#sb_forum__feed > ul > li {
    -webkit-transition: all 0.3s ease;
       -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
         -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
    display: block;
    padding: 8px 10px;
    background: transparent;
    overflow: hidden;
}

#sb_forum__feed > ul > li:hover {
    background: #f9f9f9;
}

#sb_forum__feed > ul > li > .avatar {
    float: left;
}

#sb_forum__feed > ul > li > .avatar > img {
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}

#sb_forum__feed > ul > li > .topicName,
#sb_forum__feed > ul > li > .desc {
    display: block;
    margin: 0 0 0 42px;
}

#sb_forum__feed > ul > li > .topicName {
    display: block;
    overflow: hidden;
    max-width: 204px;
    position: relative;
    white-space: nowrap;
    margin: 2px 0 0 42px;
    font-weight: bold;
}

#sb_forum__feed > ul > li > .topicName:after {
    content: '';
    position: absolute;
    right: 0;
    width: 40px;
    height: 100%;
    top: 0;
    background: linear-gradient(to right, rgba(251, 251, 251, 0), rgba(251, 251, 251, 1));
}

#sb_forum__feed > ul > li:hover > .topicName:after {
    content: '';
    position: absolute;
    right: 0;
    width: 40px;
    height: 100%;
    top: 0;
    background: linear-gradient(to right, rgba(251, 251, 251, 0), rgba(249, 249, 249, 1));
}

/* End forum feed list */

/* ========================== */
/* ========= CONTENT ======== */

.hxtz_portal > .ipsLayout_content > .ipsBox {
    margin: 0 0 14px 0;
}

.hxtz_porta > .ipsLayout_content > .ipsBox:last-child {
    margin: 0;
}

.news {
    overflow: hidden;
}

.news > .news-item {
    border-bottom: 3px solid #f5f5f5;
    padding: 0 0 10px 0;
    margin: 0 0 10px 0;
}

.news > .more-news {
    -webkit-transition: all 0.5s ease;
       -moz-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
         -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
    display: block;
    text-align: center;
    background: #eee;
    color: #666;
    padding: 12px;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'PT Sans Caption';
}

.news > .more-news:hover {
    -webkit-transition: all 0.5s ease;
       -moz-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
         -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
    background: #dadada;
}


.news > .news-item > .title {
    margin: 0 0 2px 0;
}

.news > .news-item > .title > h2 > a {
    font-family: 'PT Sans Caption', sans-serif;
    font-size: 17px;
    color: #868686;
    font-weight: bold;
}

.news > .news-item > .title > h2 > a:hover {
    text-decoration: underline;
}

.news > .news-item > .title > h2 > a.ipsBadge {
    height: 18px;
    display: inline-block;
    vertical-align: top;
    font-size: 12px;
    font-family: Verdana,sans-serif;
    line-height: 18px;
    text-align: left;
    padding-left: 5px;
    padding-right: 10px;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-bottomleft: 2px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    text-decoration: none;
    font-weight: normal;
    background: url(http://zombr.org/ico/flags.png) no-repeat right 0px;
    color: #5c7f95;
    text-transform: lowercase;
    margin: 0 0 0 5px;
}

.news > .news-item > .title > h2 > span.ipsBadge.pinned_article {
    height: 18px;
    display: inline-block;
    vertical-align: top;
    font-size: 12px;
    font-family: Verdana,sans-serif;
    line-height: 18px;
    text-align: left;
    padding-left: 5px;
    padding-right: 10px;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-bottomleft: 2px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    text-decoration: none;
    font-weight: normal;
    background: url(http://zombr.org/ico/flags.png) no-repeat right -103px;
    color: #bb698f;
    text-transform: lowercase;
    margin: 0 0 0 5px;
    cursor: pointer;
}

.news > .news-item > .top-details,
.news > .news-item > .bottom-details {
    color: #868686;
}

.news > .news-item > .top-details > a,
.news > .news-item > .bottom-details > a {
    color: #868686;
}

.news > .news-item > .top-details > a:hover,
.news > .news-item > .bottom-details > a:hover {
    text-decoration: underline;
}

.news > .news-item > .top-details > .time {
    text-transform: lowercase;
}

.news > .news-item > .bottom-details > .taglist {
    -webkit-transition: opacity 0.3s ease;
       -moz-transition: opacity 0.3s ease;
        -ms-transition: opacity 0.3s ease;
         -o-transition: opacity 0.3s ease;
            transition: opacity 0.3s ease;
    opacity: 0;
}

.news > .news-item:hover > .bottom-details > .taglist {
    opacity: 1;
}

.news > .news-item > .bottom-details > .taglist > .ipsTag {
    background: none;
    padding: 0 0 0 0;
    margin: 5px 0px 0 0;
    font-size: 12px;
    color: #868686;
}

.news > .news-item > .bottom-details > .taglist > .ipsTag:nth-child(2) {
    padding: 0 0 0 4px;
}

.news > .news-item > .content {
    margin: 8px 0;
}

.news > .news-item > .content > ul {
    list-style: disc;
}

.news > .news-item > .content > ol {
    list-style: decimal;
}
 
.news > .news-item > .content > ul > li,
.news > .news-item > .content > ol > li{
    margin: 5px 10px 5px 30px;
}

/* === FULL VIEW  === */

.ipsBox_container.news {
    padding: 9px !important;
}
.ipsBox1.no-header {
    background: #e6eef7;
    border: 1px solid #d6e3f0;
}
.ipsBox.no-header .ipsPad {
    padding: 0;
}
.full-view > .news-item {
    border: 0;
}

.full-view > .news-item > .title {
    margin: 0 0 8px 0;
}

.full-view > .news-item > .title > h1 {
    font-family: 'PT Sans Caption', sans-serif;
    font-size: 21px;
    color: #868686;
    font-weight: bold;
}

.full-view > .news-item > .top-details {
    padding: 0 0 4px 0;
    border-bottom: 1px solid #eee;
}

.full-view > .news-item > .top-details > .right {
    font-weight: bold;
}

.full-view > .news-item > .top-details > .right > span:first-child {
    margin: 0 6px 0 0;
}

.hxtz_tags {
    overflow: hidden;
}

.hxtz_tags > .ipsTag {
    background: none;
    padding: 0 0 0 0;
    margin: 5px 0px 0 0;
    font-size: 12px;
    color: #868686;
}

.hxtz_tags > .ipsTag:nth-child(2) {
    padding: 0 0 0 6px;
}

.hxtz_tags > .edit_link {
    margin: 8px 0 0 0;
}

.hxtz_tags > .edit_link > a {
    -webkit-transition: opacity 0.3s ease;
       -moz-transition: opacity 0.3s ease;
        -ms-transition: opacity 0.3s ease;
         -o-transition: opacity 0.3s ease;
            transition: opacity 0.3s ease;
    color: #868686;
    opacity: 0.6;
}

.hxtz_tags > .edit_link > a:hover {
    opacity: 1;
}

/* ========================== */
/* ======== COMMENTS ======== */

.news-comments {
    
}

.news-comments > h4 {
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'PT Sans Caption';
    padding: 0 0 3px 0;
    margin: 0 0 5px 0;
    border-bottom: 2px solid #eee;
}

.news-comments > .inputbox_noauth {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 16px;
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 10px 10px 5px 8px;
    -webkit-box-shadow: inset 0 1px 4px 1px #d8d8d8;
    box-shadow: inset 0 1px 4px 1px #d8d8d8;
    outline: none;
    background: #eee;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #666;
}

.comments-list {
    margin: 6px 0 0 0;
}

.comment-item {
    padding-top: 10px;
}

.comment-item__avatar {
    float: left;
    width: 50px;
    height: 50px;
    margin-right: 11px;
    margin-left: 4px;
}

.comment-item__avatar > img {
    width: 50px;
    height: 50px;
    padding: 0;
    border: 0;
    background: transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.comment-item__right {
    min-height: 50px;
    padding-left: 65px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e6e6e6;
}

.comment-item__top {
    font-size: 11px;
    line-height: 14px;
}

.comment-item__top a {
    font-weight: bold;
    font-size: 12px;
    color: #666;
}

.comment-item__top .administration {
    font-weight: bold;
    font-size: 12px;
    color: #8392a3;
}

.comment-item__top .right i {
    -webkit-transition: opacity 0.3s ease;
       -moz-transition: opacity 0.3s ease;
        -ms-transition: opacity 0.3s ease;
         -o-transition: opacity 0.3s ease;
            transition: opacity 0.3s ease;
    opacity: 0.1;
}

.comment-item:hover .comment-item__top .right i {
    opacity: 0.2;
    cursor: pointer;
}

.comment-item:hover .comment-item__top .right i:hover {
    opacity: 0.6;
}

.comment-item__top a.rc_id {
    font-weight: normal;
    font-size: 11px;
}

div[id^=comment-item__text] {
    padding: 1px 0;
    font-size: 12px;
    line-height: 16px;
    padding-top: 4px;
    word-wrap: break-word;
}

.comment-item__bottom {
    overflow: hidden;
}

.comment-item__likes > span {
    -webkit-transition: opacity 0.3s ease;
       -moz-transition: opacity 0.3s ease;
        -ms-transition: opacity 0.3s ease;
         -o-transition: opacity 0.3s ease;
            transition: opacity 0.3s ease;
    opacity: 0.4;
    color: #8392a3;
    cursor: pointer;
}

.comment-item__likes > span:hover {
    opacity: 0.8;
}

.comment-item__likes > span.active {
    opacity: 0.8;
}

#comment-item__text_deleted {
    padding: 18px 0 0 0;
}

.no-comments {
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'PT Sans Caption';
    margin: 15px 0 0 0;
    font-size: 12px;
    color: #666;
}

#comment__send {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 16px;
    width: 100% !important;
    height: 50px;
    margin: 0;
    padding: 5px 20px 5px 5px;
    outline: none;
    background: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    resize: none;
    color: #666;
    border: 1px solid #ebebeb;
    overflow: hidden;
}

.send_pl__wrapper {
    position: relative;
}

#as_administration {
    -webkit-transition: all 0.5s ease;
       -moz-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
         -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
    position: absolute;
    right: 3px;
    top: 4px;
    cursor: pointer;
    opacity: 0.4;
    color: #9db0c4;
    padding: 2px;
}

#as_administration.active {
    opacity: 1;
}

#as_administration:hover {
    opacity: 1;
}

.edit_box {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 16px;
    width: 100% !important;
    height: 50px;
    margin: 0;
    padding: 5px;
    outline: none;
    background: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    resize: none;
    color: #666;
    border: 1px solid #ebebeb;
    margin-top: 3px;
}

.sendComment__buttons {
    overflow: hidden;
}

.doSend__comment,
.doSend__editComm {
    -webkit-transition: all 0.5s ease;
       -moz-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
         -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
    background: rgba(94, 130, 168, 1);
    border-radius: 3px;
    margin: 3px 0 0 0;
    color: #FFF;
    padding: 6px 10px;
    border: 0;
    outline: 0;
    cursor: pointer;
    float: left;
}

.doSend__comment:hover,
.doSend__editComm:hover {
    background: rgba(94, 130, 168, 0.8);
}

.doSend__editComm {
    padding: 4px 8px;
    margin: 3px 6px 0 0;
    line-height: 17px;
}

.reply-info {
    color: #666;
    float: left;
    margin: 10px 0 0 5px;
    position: relative;
}

.reply-info i {
    font-size: 9px;
    margin: 1px 0 0 4px;
    position: absolute;
    opacity: 0.6;
    cursor: pointer;
}

#len-mess {
    -webkit-transition: all 0.5s ease;
       -moz-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
         -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
    color: #666;
    margin: 10px 0 0 0;
    opacity: 0;
}

#len-mess.showed {
    opacity: 1;
}

.editbox__controls {
    overflow: hidden;
    line-height: 30px;
}

.cancel_editing {
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    padding: 4px 8px;
    cursor: pointer;
}

.cancel_editing:hover {
    background: #f6f6f6;
}

/* ========================== */
/* ====== NOTIFICATIONS ===== */

div[id^=generic_notify__] {
    position: fixed;
    top: 0;
    width: 100%;
    text-align: center;
    height: 34px;
    line-height: 32px;
    margin-top: -35px;
}

div[id^=generic_notify__] > i {
    opacity: 0.6;
    margin: 0 4px 0 0;
}

#generic_notify__error {
    color: #b94a48;
    background-color: #f2dede;
    border-bottom: 1px solid #ebccd1;
}

#generic_notify__success {
    color: #468847;
    background-color: #dff0d8;
    border-bottom: 1px solid #d6e9c6;
}

/* ========================== */
/* ======== MONITORING ====== */

#gameservers_st__wrapper > .servers > .server-row {
    -webkit-transition: background 100ms linear;
       -moz-transition: background 100ms linear;
        -ms-transition: background 100ms linear;
         -o-transition: background 100ms linear;
            transition: background 100ms linear;
    padding: 5px;
    cursor: pointer;
}

#gameservers_st__wrapper > .servers > .server-row:hover {
    background: #f6f7f8;
}

#gameservers_st__wrapper > .servers > .server-row > .server-name {
    white-space: nowrap;
    overflow: hidden;
    font-family: 'Open Sans';
    font-size: 11px;
    margin: 0 0 2px 0;
}

#gameservers_st__wrapper > .servers > .server-row > .server-name.no-space {
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
}

#gameservers_st__wrapper > .servers > .server-row > .status-bar {
    background: #dcdcdc;
    height: 16px;
    border: 1px solid #cfcfcf;
}

#gameservers_st__wrapper > .servers > .server-row > .status-bar {
    background: #dcdcdc;
    height: 16px;
    border: 1px solid #cfcfcf;
}

#gameservers_st__wrapper > .servers > .server-row > .status-bar .mon-active {
    background: url(http://zombr.org/public/style_images/bulletin/monitoring/mon-statusbar-active.png) no-repeat left 0, url(http://zombr.org/public/style_images/bulletin/monitoring/mon-statusbar-active.png) no-repeat right -18px, url(http://zombr.org/public/style_images/bulletin/monitoring/mon-statusbar-active.png) repeat-x 0 -36px;
    height: 18px;
    margin: -1px 0;
}

#gameservers_st__wrapper > .servers > .server-row > .status-bar .mon-active > .mon-players {
    display: block;
    text-align: center;
    width: 230px;
    line-height: 18px;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    text-shadow: 1px 1px 0 #7A7A7A;
}

#gameservers_st__wrapper > .servers > .server-row > .server-connection {
    margin: 3px 0 0 0;
}

#gameservers_st__wrapper > .servers > .server-row > .server-connection > .server-ip {
    font-family: 'Cuprum';
    font-size: 14px;
    color: #959ca4;
}

#gameservers_st__wrapper > .servers > .server-row > .server-connection > .server-game,
#gameservers_st__wrapper > .servers > .server-row > .server-connection > .server-map {
    float: right;
}

#gameservers_st__wrapper > .servers > .server-row > .server-connection > .server-game > i.ico-cstrike {
    background: url(http://zombr.org/public/style_images/bulletin/monitoring/cstrike.gif) no-repeat 0;
    height: 16px;
    width: 16px;
    display: block;
}

#gameservers_st__wrapper > .servers > .server-row > .server-connection > .server-game > i.ico-smp {
    background: url(http://zombr.org/public/style_images/bulletin/monitoring/minecraft.png) no-repeat 0;
    height: 16px;
    width: 16px;
    display: block;
}

#gameservers_st__wrapper > .servers > .server-row > .server-connection > .server-map > i.ico-map {
    background: url(http://zombr.org/public/style_images/bulletin/monitoring/map.png) no-repeat 0;
    height: 16px;
    width: 16px;
    display: block;
    margin: 0 5px 0 0;
}

#gameservers_st__wrapper > .servers > .mon-divider {
    background: url(http://zombr.org/public/style_images/bulletin/monitoring/mon-divider.png) repeat-x 0;
    height: 3px;
}

#gameservers_st__wrapper > .servers > .mon-divider:last-child {
    height: 1px;
    background: #dedede;
}

#gameservers_st__wrapper > .total-counter {
    height: 21px;
    text-align: center;
    line-height: 21px;
    font-weight: 700;
    color: #8e8e8e;
}

#update_serv__status {
    margin: 0 10px 0 0;
    cursor: pointer;
}

#gameservers_st__wrapper > .update_info {
    margin: 0 0 0 82px;
}

/* ========================== */
/* ======== SCROLLING ======= */

.scrolltotop {
    -webkit-transition: all 0.5s ease;
       -moz-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
         -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
    opacity: 0;
    position: fixed;
    width: 4%;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 9000;
    cursor: pointer;
}

.scrolltotop.showed {
    opacity: 1;
}

.scrolltotop__side {
    position: fixed;
    width: 4%;
    height: 100%;
    top: 0;
    left: 0;
    background: black;
    opacity: 0.1;
}

.scrolltotop__arrow {
    position: fixed;
    width: 4%;
    height: 100%;
    top: 50px;
    left: 0;
    background: url(http://zombr.org/public/style_images/bulletin/totop.png) top no-repeat;
    opacity: 0.4;
}

/* ========================== */
/* ========== BANS ========== */

.bans-ico {
    position: absolute;
    background: url(http://zombr.org/public/style_images/bulletin/bans_index.png?r=66) no-repeat;
    height: 128px;
    width: 128px;
    right: 10px;
    bottom: -32px;
}

.bans_header {
    -webkit-border-top-right-radius: 3px;
     -webkit-border-top-left-radius: 3px;
         -moz-border-radius-topleft: 3px;
        -moz-border-radius-topright: 3px;
             border-top-left-radius: 3px;
            border-top-right-radius: 3px;
    position: relative;
    background: #ECF2F8;
    border-bottom: 1px solid #d6e3f0;
    padding: 20px 20px;
    overflow: hidden;
}

.bans_header > h1 {
    font-size: 1.4em;
    text-transform: uppercase;
    font-family: 'PT Sans Caption';
    font-weight: bold;
    color: #99ADC2;
    text-shadow: 1px 1px 0px rgba(214, 227, 240, 0.4);
}

.bans_header > div {
    margin: 10px 0 0 0;
    color: #7F97AF;
    text-shadow: 1px 1px 0px rgba(214, 227, 240, 0.4);
}

.bans__server {
    display: block;
    padding: 8px 10px;
    margin: 4px 0;
}

.bans__server:hover {
    background: #e9edf1;
}

/* BANS TABLE */

.hxtzBans {
    width: 97% !important;
    margin: 9px;
}

.hxtzBans > tbody > tr.row {
    cursor: pointer;
    color: rgba(43, 88, 122, 0.8);
    border-left: 1px solid #ECF0F5;
    border-right: 1px solid #ECF0F5;
}

.hxtzBans > tbody > tr.row:hover {
    background: rgba(236, 242, 248, 0.5);
}

.hxtzBans > tbody > tr.row:nth-child(odd) {
    background: rgba(236, 242, 248, 0.2);
}

.hxtzBans > tbody > tr.row:nth-child(odd):hover {
    background: rgba(236, 242, 248, 0.5);
}

.hxtzBans > tbody > tr.row > td {
    padding: 8px 6px;
}

.hxtzBans > tbody > tr.row > td > i.icon-attention {
    color: #D95C5C;
}

.load_bans {
    text-align: center;
    cursor: pointer;
    padding: 10px 0;
    margin: 5px 0 0 0;
    color: #7F97AF;
}

.load_bans:hover {
    background: #e9edf1;
}

/* ========== */

/* FULL BAN */

.full_ban {
    padding: 9px;
    overflow: hidden;
}

.full_ban > .forum_member > .avatar > img {
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    padding: 0;
    border: none;
    background: transparent;
}

.full_ban > .forum_member > .nickname {
    text-align: center;
    padding: 4px 0 0 0;
}

.ban__general_info {
    margin: 0 110px 0 0;
}

.ban__general_info > .line {
    border-bottom: 1px solid #ECF0F5;
    padding: 5px 0;
}

.ban__general_info > .line > .title {
    float: left;
    font-weight: bold;
    width: 150px;
}

.ban__general_info > .line > .value.by_server {
    font-weight: bold;
    color: #7F97AF;
}

.ban__general_info > .line > .value.created,
.ban__general_info > .line > .value.expired {
    text-transform: lowercase;
}

.request_unban {
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    -webkit-transition: all 0.3s ease;
       -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
         -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    color: #fff;
    background: #D95C5C;
    text-align: center;
    padding: 8px 0;
    margin: 8px 0 0 0;
    color: #fff;
}

.request_unban:hover {
    background: #C04B4B;
    color: #fff;
}

.request_unban.filled {
    opacity: 0.7;
}

.request_unban.send {
    display: block;
    width: 100%;
    border: 0;
    background: rgba(14, 81, 167, 0.5);
    outline: 0;
    cursor: pointer;
}

.request_unban.send:hover {
    background: rgba(14, 81, 167, 0.6);
}

/* ======== */

/* SEND UNBAN REQUEST */

.ban__unban_request {
    margin: 0 110px 0 0;
}

.ban__unban_request > .line {
    border-bottom: 1px solid #ECF0F5;
    padding: 5px 0;
}

.ban__unban_request > .line > .title {
    float: left;
    font-weight: bold;
    width: 150px;
    height: 20px;
    line-height: 20px;
}

.ban__unban_request > .line > .title > .required {
    color: red;
    cursor: pointer;
}

.ban__unban_request > .line > .value > input {
    color: rgb(140, 142, 145); 
    border: 1px solid #C3CBD4;
    padding: 3px;
    outline: none;
    width: 422px;
}

.ban__unban_request > .line > .value > input:focus { 
    border: 1px solid #B2BDC9;
}

.ban__unban_request > .line > .value > input[name=screenshot-2],
.ban__unban_request > .line > .value > input[name=screenshot-3] {
    margin: 4px 0 0 150px;
}

.ban__unban_request > .line > .value > textarea {
    color: rgb(140, 142, 145); 
    border: 1px solid #C3CBD4;
    padding: 3px;
    outline: none;
    width: 422px;
    resize: none;
    overflow-y: hidden;
    height: 170px;
}

.ban__unban_request > .line > .value > textarea:focus {
    border: 1px solid #B2BDC9;
}

.ban__unban_request > .line > .value > .desc {
    margin: 4px 0 0 150px; 
}

/* ================== */

/* ACTIVE BANS WARNS */

.ban_warning {
    padding: 8px;
    margin: 0 0 8px 0;
    border: 1px solid #ebccd1;
    color: #b94a48;
    background: #f2dede;
}

.ban_warning > b {
    display: block;
    margin: 0 0 3px 0;
}

.ban_warning > span {
    
}

/* ================= */

/* ========================== */
/* ====== AJAX SPINNER ====== */

.spinner {
    position: fixed;
    z-index: 1031;
    top: 14px;
    right: 14px;
}

.spinner > .spinner-icon {
    -webkit-animation: ajax-spinner 400ms linear infinite;
            animation: ajax-spinner 400ms linear infinite;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: solid 2px transparent;
    border-top-color: #29d;
    border-left-color: #29d;
    border-radius: 50%;
}

/* ========================== */
/* ========== SLIDER ======== */

.sl_stats {
    margin: 0 0 8px 0;
    background: #7991AC !important;
    border: none !important;
}

.sl_stats > .ipsBox_container {
    border: none !important;
    background: #7991AC !important;
}

.protoshow,
.protoshow .show {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 650px;
	height: 180px;
}

.slide {
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	height: 100%;
    background: #fff;
    width: 650px;
}

.slide > div[class^=item] {
	height: inherit;
    width: inherit;
    padding: 5px;
}

.slide > div[class^=item] > .title {
	font-weight: bold;
    font-size: 16px;
    font-family: 'PT Sans Caption', sans-serif;
    padding: 10px 0 8px 20px;
}

.slide > div[class^=item] > .content {
    padding: 0 0 0 20px;
    width: 400px;
    
}

.slide > div[class^=item] > .content > p {
    margin: 7px 0;
}

.slide > div[class^=item] > .content > p ul {
    list-style: disc;
}

.slide > div[class^=item] > .content > p ol {
    list-style: decimal;
}
 
.slide > div[class^=item] > .content > p ul > li,
.slide > div[class^=item] > .content > p ol > li{
    margin: 5px 10px 5px 30px;
}

.slide > .item1 {
    color: #FFFFFF;   
    background: url(http://zombr.org/ico/slide_bg1.png?r=8) no-repeat;
}

.slide > .item2 {
    background: url(http://zombr.org/ico/slide_bg2.png?r=8) no-repeat;
}

.slide > .item3 {
    background: url(http://zombr.org/ico/slide_bg3.png) no-repeat;
}

.active-slide {
	z-index: 100;
}

.protoshow .slide-caption {
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 100;
	padding: 1em 10px;
	background-color: #000;
	background-color: rgba(0,0,0,.4);
	color:#fff;
}

.proto-progress-timer {
	position: absolute;
	top: 7px;
	right: 7px;
	z-index: 9999;
}


/* TRANSITION SLIDE
------------------------------------------------*/

.transition-slide .show-window {
	overflow: hidden;
	position: relative;
}

.transition-slide .show {
	position: absolute;
	top: 0;
	left: 0;
	width: 999999px;
}

.transition-slide .slide {
	position: static; /*overide*/
	float: left;
	display: block;
}


/* PROTO CONTROLS
------------------------------------------------*/

.proto-controls,
.proto-navigation {
	margin: 0;
	padding: 0;
	list-style: none;
}

.proto-controls a:link,
.proto-controls a:visited,
.proto-navigation a:link,
.proto-navigation a:visited {
	display: block;
	text-indent: -9999px;
	overflow: hidden;
}

.proto-controls li {
	position: absolute;
	top: 50%;
	margin-top: -36px;
	left: 10px;
	width: 10%;
	height: 100%;
	z-index: 110;
}

.proto-controls .forward {
	right: 10px;
	left: auto;
}

.proto-controls a {
	width: 100%;
	height: 61px;
	background: url(/img/proto_controls_bg.png) no-repeat 0 0;
	opacity: 0.2;
	-moz-opacity: 0.2;
	filter:alpha(opacity=20);
}

.proto-controls a:hover,
.proto-controls a:focus {
	opacity: 1;
	-moz-opacity: 1;
	filter:alpha(opacity=100);
}

.proto-controls .forward a {
	background-position: 100% -90px;
}


/* PROTO NAVIGATION
------------------------------------------------*/

.proto-navigation {
	position: absolute;
  	bottom: 0;
    right: 50%;
    float: right;
    z-index: 120;
}

.proto-navigation li {
    float: left;
    left: 50%;
    padding: 12px 6px;
    position: relative;

}

.proto-navigation a {
	-webkit-box-shadow: inset 0 1px 0 1px rgba(0, 0, 0, .1);
       -moz-box-shadow: inset 0 1px 0 1px rgba(0, 0, 0, .1);
	        box-shadow: inset 0 1px 0 1px rgba(0, 0, 0, .1);
	background-color: #fff;
  	background-color: rgba(0,0,0,.2);
    height: 12px;
    text-decoration: none;
  	 width: 12px;
	-moz-border-radius:30px;
	-webkit-border-radius:30px;
	border-radius:30px;
}

.proto-navigation a:hover,
.proto-navigation a:focus {
	background-color: #999;
}

.proto-navigation .current-slide a {
	background-color: #363F4E;
}

/* ========================== */
/* ======= SUMM STATS ======= */

.summary_stats {
    width: 380px;
    padding: 9px;
    margin-right: 50px;
}

.summary_stats > .stats_title {
    font-family: 'PT Sans Caption';
    font-weight: bold; 
    font-size: 18px;
    text-transform: uppercase;
    color: #fcfcfc;
    text-shadow: 0 0 1px #6B6B6B;
    padding: 6px 0 10px 0;
    text-align: center;
}

.summary_stats > .stats_wrap {
    float: left;
    font-family: 'PT Sans Caption';
    overflow: hidden;
}

.summary_stats > .stats_wrap:after {
    content: '';
    clear: both;
    display: block;
}

.summary_stats > a {
    -webkit-transition: all 0.3s ease 0s;
       -moz-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
    float: left;
    width: 270px;
    display: block;
    border: 0 none;
    border-radius: 2px 2px 2px 2px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 20px;
    margin: 10px 0 10px 10px;
    padding: 7px 10px;
    text-transform: none;
    text-align: center;
    background: none repeat scroll 0 0 #88A9CC;
    color: white;
}

.summary_stats > a:hover {
    background: none repeat scroll 0 0 #7A9CC0;
    color: white;
}

span.ts_bg { 
    display: block; 
    float: left; 
    margin: 2px; 
    width: 155px; 
    height: 54px; 
    overflow: hidden; 
    position: relative; 
    border-radius: 3px; 
}

span.ts_icon { 
    display: block; 
    position: absolute; 
    top: 11px; 
    left: 5px; 
}

span.ts_icon > i { 
    font-size: 32px; 
    color: #fcfcfc;
    text-shadow: 0 0 1px #6B6B6B;
}

span.ts_title { 
    display: block; 
    position: absolute; 
    top: 14px; 
    right: 5px; 
    width: 90px; 
    text-align: center; 
    font-size: 8pt; 
    height: 10px; 
    line-height: 10px; 
    white-space: nowrap; 
    text-transform: uppercase;
    color: #fcfcfc;
    text-shadow: 0 0 1px #6B6B6B
}

span.ts_data { 
    position: absolute; 
    top: 26px; 
    right: 5px;
    width: 90px; 
    text-align: center; 
    font-weight: bold; 
    font-size: 16px;
    color: #fcfcfc;
    text-shadow: 0 0 1px #6B6B6B;
}

/* ========================== */
/* ========== SHOP ========== */

/* Dashboard */

.shop_header {
    -webkit-border-top-right-radius: 3px;
     -webkit-border-top-left-radius: 3px;
         -moz-border-radius-topleft: 3px;
        -moz-border-radius-topright: 3px;
             border-top-left-radius: 3px;
            border-top-right-radius: 3px;
    position: relative;
    background: #ECF2F8;
    margin: -9px -9px 10px -9px;
    border-bottom: 1px solid #d6e3f0;
    padding: 6px 10px;
    overflow: hidden;
}

.shop_header > a {
    -webkit-transition: all 0.3s ease 0s;
       -moz-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
    display: block;
    border: 0 none;
    border-radius: 2px 2px 2px 2px;
    color: #FFFFFF;
    cursor: pointer;
    display: block;
    width: 710px;
    font-family: Arial,sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 20px;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 7px 10px;
    text-transform: none;
    background: #60CF7D;
    text-shadow: 1px 1px 1px #3CA357;
    opacity: 0.6;
    overflow: hidden;
}

.shop_header > a#buy {
    -webkit-border-top-left-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-bottomleft: 2px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    width: 670px;
    float: left;
    border-radius: 0;
}

.shop_header > a#buy-key {
    -webkit-border-top-right-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    -moz-border-radius-topright: 2px;
    -moz-border-radius-bottomright: 2px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    width: 20px;
    font-size: 16px;
    height: 22px;
    border-left: 1px solid #58BD73;
    border-radius: 0;
}

.shop_header > a > span {
    -webkit-transition: all 0.3s ease 0s;
       -moz-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
    margin: 0 0 0 -33px;
}

.shop_header > a > span > i {
    font-size: 16px;
    margin: 0 10px 0 0;
}


.shop_header > a:hover {
    color: #fff;
    opacity: 0.8;
}

.shop_header > a:hover > span {
    padding: 0 0 0 30px;
}

.shop_header > .my_balance {
    border-left: 1px solid #DDE5EC;
    width: 195px;
    margin: 10px 0;
    padding: 0 0 0 12px;
    height: 82px;
    font-weight: bold;
    color: #99ADC2;
    text-shadow: 1px 1px 0px rgba(214, 227, 240, 0.4);
    font-family: 'PT Sans Caption';
}

.shop_header > .my_balance > .title {
    text-transform: uppercase;
    font-size: 1.2em;
    display: block;
    margin: 20px 0 10px 0;
}

.shop_header > .my_balance > .balance > strong {
    font-size: 1.6em;
}

.shop_ds_table.header {
    background: #CFDAE2;
    color: #7F97B3;
    font-family: 'PT Sans Caption';
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 8px 10px;
    border-bottom: 1px solid #C4D0DA;
    margin: 6px 0 0 0;
}

.shop_ds_table.header:first-child {
    margin: 0;
}

.shop_ds_table tr.expires {
    background: rgba(237, 20, 61, 0.02);
}

.shop_ds_table th,
.shop_ds_table td {
    padding: 10px;
    font-family: 'PT Sans Caption';
}

.shop_ds_table th {
    background: #F7F7F7;
    color: #929292;
    border-bottom: 1px solid #EBEBEB;
    padding: 6px 10px;
}

.shop_ds_table th.fs,
.shop_ds_table td.fs {
    width: 3px;
    padding: 0;
}

.shop_ds_table td {
    border-bottom: 1px solid #f4f4f4;
}

.shop_ds_table td.controls > div {
    float: right;
}

.shop_ds_table td.controls > div > a {
    opacity: .2;
    -webkit-transition: all 0.3s ease;
       -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
         -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
}

.shop_ds_table tr:hover .controls > div > a {
    opacity: .6;
}

.shop_ds_table td.date {
    font-weight: bold;
    color: #7795B6;
}

.shop_ds_table td.date.ends {
    font-weight: bold;
    color: crimson;
}

.shop_ds_table td.no_act_services {
    padding: 12px;
}

.shop_ds_table td.no_act_services > a {
    background: #8ED8BA;
    padding: 4px;
    color: #fff;
    text-align: center;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
}

.prolong_service_row {
    background: #fafafa;
}

.prolong_service_row h4 {
    font-weight: bold;
    margin: 0 0 3px 0;
    color: #7795B6;
}

.prolong_service_row select {
    outline: 0;
    border: 1px solid #C3CBD4;
    padding: 2px;
    -webkit-transition: all 0.3s ease;
       -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
         -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
}

.ps_row {
    overflow: hidden;
    margin: 10px 0 0 0;
}

.ps_row > .payments {
    width: 640px;
}

.ps_row > .support {
    width: 320px;
}

.shop_callback {
    padding: 6px 0 0 0;
}

.shop_callback > .line {
    overflow: hidden;
    margin: 0 0 12px 0;
}

.cbf-icon {
    float: left;
    margin: 0 5px 0 0;
    opacity: .6;
}

.cbf-cont > b {
    color: #8F8F8F;
}

/* Buy service page */

.buy-service.wrapper {
    position: absolute;
    text-align: center;
    width: 530px;
    background: none repeat scroll 0% 0% #FFF;
    line-height: 180%;
    border-bottom: 1px solid #E4E4E4;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.15);
    left: 50%;
    top: 50%;
    margin: -200px 0px 0px -250px;
}

.buy-service.title {
    text-align: left;
    padding: 0 10px;
    border-bottom: 1px solid #878E9C;
    background: #9bb2c6;
    background: -moz-linear-gradient(top,  #9bb2c6 0%, #8ea2b7 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9bb2c6), color-stop(100%,#8ea2b7));
    background: -webkit-linear-gradient(top,  #9bb2c6 0%,#8ea2b7 100%);
    background: -o-linear-gradient(top,  #9bb2c6 0%,#8ea2b7 100%);
    background: -ms-linear-gradient(top,  #9bb2c6 0%,#8ea2b7 100%);
    background: linear-gradient(to bottom,  #9bb2c6 0%,#8ea2b7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9bb2c6', endColorstr='#8ea2b7',GradientType=0 );
    height: 40px;
    line-height: 40px;
    color: #fff;
    font-weight: 600;
    text-shadow: 1px 1px 1px #858585;
}

.buy-service.title > span {
    text-transform: none;
    font-weight: 400;
}

.buy-service.title a {
    color: #fff;
}

.buy-service.title a:hover {
    text-decoration: underline;
}

.buy-service.content {
    text-align: left;
    padding: 0;
}

.buy-service.field {
    padding: 8px 0 8px 0;
    border-bottom: 1px solid #f9f9f9;
}

.buy-service.field_title {
    float: left;
    line-height: 26px;
    width: 120px;
}

.buy-service.field_title.d_nl {
    line-height: 20px;
}

.buy-service.field_title > span {
    float: right;
    margin: 0 10px 0 0;
    font-weight: bold;
    color: #5680A0;
}

.buy-service.field_content {
    position: relative;
}

.buy-service.field_content > .tooltip_ico {
    -webkit-transition: all 0.3s ease;
       -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
         -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
    position: absolute;
    top: 2px;
    right: 26px;
    color: #99ADC2;
    cursor: pointer;
}

.buy-service.field_content > .tooltip_ico:hover {
    color: #889DB3;
}

.buy-service.field_content > input,
.buy-service.field_content > select {
    -webkit-transition: all 0.3s ease;
       -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
         -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
    outline: 0;
    border: 1px solid #C3CBD4;
}

.buy-service.field_content > input:focus {
    border: 1px solid #B1BECC;
    box-shadow: 0px 0px 2px #E2E7EC;
}

.buy-service.field_content > input[type=text] {
    width: 380px;
    padding: 4px;
}

.buy-service.field_content > select {
    width: 390px;
    padding: 2px;
}

.buy-service.s_desc {
    padding: 4px 8px;
    background: #f9f9f9;
    border-top: 1px solid #f4f4f4;
    border-bottom: 1px solid #f4f4f4;
    margin: 6px 0 0 0;
}

.buy-service.s_desc_general {
    overflow: hidden;
}

#bs__name {
    float: left;
}

#bs__coast {
    float: right;
}

#bs__name > span,
#bs__coast > span {
    font-weight: bold;
    color: #5680A0;
}

.buy-service.controls {
    padding: 8px;
}

.buy-service.controls > input {
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
        -ms-border-radius: 4px;
         -o-border-radius: 4px;
            border-radius: 4px;
    -webkit-transition: all 0.3s ease;
       -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
         -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
    font-family: 'PT Sans Caption';
    background-color: #3cc05e;
    color: #fff;
    display: block;
    font-size: 14px;
    line-height: 44px;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    border: 0;
    outline: 0;
    cursor: pointer;
    opacity: .8;
}

.buy-service.controls > input:hover {
    background-color: #38b458;
}

.buy-service.controls > input.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.check-data.field {
    padding: 8px 0 8px 0;
    border-bottom: 1px solid #f9f9f9;
}

.check-data.field_title {
    float: left;
    width: 200px;
}

.check-data.field_title > span {
    float: right;
    margin: 0 10px 0 0;
    font-weight: bold;
    color: #5680A0;
}

.check-data.field_content {
    position: relative;
}

.manage.field {
    padding: 8px 0 8px 0;
    border-bottom: 1px solid #f9f9f9;
}

.manage.field:after {
    content: '';
    display: block;
    clear: both;
}

.manage.field_title {
    float: left;
    width: 200px;
}

.manage.field_title > span {
    float: right;
    margin: 0 10px 0 0;
    font-weight: bold;
    color: #5680A0;
}

.manage.field_content {
    position: relative;
    margin: 0 0 0 200px;
}

.manage.field_content input {
    outline: 0;
    border: 1px solid #C3CBD4;
    margin: 0 0 6px 0;
    -webkit-transition: all 0.3s ease;
       -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
         -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
}

.manage.field_content input:focus {
    border: 1px solid #B1BECC;
    box-shadow: 0px 0px 2px #E2E7EC;
}

.manage.field_content input[type=text] {
    width: 300px;
    padding: 4px;
}

.manage.field_content .edit_ico {
    cursor: pointer;
}

.manage.field_content .edit_ico i {
    font-size: 11px;
    color: #8696B8;
}

.manage.field_content .save_pass {
    float: left;
    background: #ccc;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
        -ms-border-radius: 4px;
         -o-border-radius: 4px;
            border-radius: 4px;
}

.manage.field_content .save_pass {
    float: left;
    background: #6786a6;
    color: #fff;
    cursor: pointer;
    padding: 0 8px;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
        -ms-border-radius: 4px;
         -o-border-radius: 4px;
            border-radius: 4px;
}

.successed_pc {
    color: green;
}

.flash {
    overflow: hidden;
    padding: 6px 8px;
    text-align: left;
    margin: 0 0 3px 0;
}

.flash.notice {
    background-color: #F7F7F7;
    color: #929292;
    border-bottom: 1px solid #EBEBEB;
}

.flash.notice.tb {
    background-color: #F7F7F7;
    color: #929292;
    border-top: 1px solid #EBEBEB;
    border-bottom: 1px solid #EBEBEB;
}

.flash.edit_warn {
    text-align: center;
    color: #965050;
}

.flash.success {
    background-color: #c4ecc6;
    color: #39A23C;
    text-shadow: 1px 1px 0 rgba(57, 162, 60, .1);
}

.buy-service.success {
    text-align: center !important;
}

.buy-service.success > .icon-ok,
.buy-service.success > .icon-cancel {
    font-size: 68px;
    color: #9bb2c6;
}

/* Shop introduction for guests */

.shop_introduction {
    background: #adbccc url(http://zombr.org/public/style_images/bulletin/shop/shop_intro.jpg?6) center right;
    width: 100%;
    height: 300px;
    margin: -10px 0 20px 0;
    text-align: center;
}

.shop_introduction .main_width {
    padding: 50px 0 0 0;
}

.shop_introduction h1 {
    font-size: 38px;
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    color: #fff;
    margin: 0 0 30px 0;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
}

.shop_introduction h2 {
    font-size: 18px;
    font-family: 'PT Sans Caption', sans-serif;
    font-weight: 400;
    color: #fff;
    margin: 0 0 102px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
}

.shop_introduction .join {
    display: block;
    padding: 14px 10px;
    width: 250px;
    margin: 0 auto;
    background: #41A85F;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    font-family: 'PT Sans Caption';
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
}

.shop_introduction .join:hover {
    -webkit-transition: background 400ms ease-out;
    -moz-transition: background 400ms ease-out;
    -ms-transition: background 400ms ease-out;
    -o-transition: background 400ms ease-out;
    transition: background 400ms ease-out;
    background: #3D9758;
}

.shop_introduction__conveniences {
    text-align: center;
    padding: 25px 0 0 0;
}

.shop_introduction__conveniences h1 {
    font-size: 28px;
    font-family: 'PT Sans Caption', sans-serif;
    font-weight: 300;
    color: #9c9c9c;
    margin: 0 0 20px 0;
}

.shop_introduction__conveniences p {
    font-size: 14px;
    font-family: 'Lato', sans-serif;
    color: #828282;
    margin: 0 0 20px 0;
}

.shop_introduction__conveniences .row {
    oveflow: hidden;
}

.shop_introduction__conveniences .row .col-sm-4 {
    float: left;
    width: 30.33399999%;
    padding-left: 15px;
    padding-right: 15px;
}

.shop_introduction__conveniences .row .feature-box {
    background: #e4e4e4;
}

.shop_introduction__conveniences .row .feature-box .icon {
    width: 100px;
    height: 55px;
    color: #fff;
    position: relative;
    background: #bbbcbc;
    margin: 35px auto 20px;
}

.shop_introduction__conveniences .row .feature-box .icon i {
    font-size: 48px;
}

.shop_introduction__conveniences .row .feature-box .icon:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid #bbbcbc;
}

.shop_introduction__conveniences .row .feature-box .icon:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid #bbbcbc;
}

.shop_introduction__conveniences .row .feature-box .description {
    padding: 20px 15px 10px;
}

.shop_introduction__conveniences .row .feature-box .description h4 {
    font-size: 15px;
    font-family: 'PT Sans Caption', sans-serif;
    font-weight: 600;
    color: #8D8D8D;
    margin: 0 0 6px 0;
}

.fadeInDown {
    -webkit-animation: fadeInDown 1s;
       -moz-animation: fadeInDown 1s;
            animation: fadeInDown 1s;
}

/* ========================== */
/* ======= STATISTICS ======= */

.stats-ico {
    position: absolute;
    background: url(http://zombr.org/public/style_images/bulletin/Sheet_Line_Graph.png?r=66) no-repeat;
    height: 128px;
    width: 128px;
    right: 10px;
    bottom: -32px;
}

.stats_header {
    position: relative;
    background: #ECF2F8;
    border-bottom: 1px solid #d6e3f0;
    padding: 20px 20px;
    overflow: hidden;
}

.stats_header > h1 {
    font-size: 1.4em;
    text-transform: uppercase;
    font-family: 'PT Sans Caption';
    font-weight: bold;
    color: #99ADC2;
    text-shadow: 1px 1px 0px rgba(214, 227, 240, 0.4);
}

.stats_header > div {
    margin: 10px 0 0 0;
    color: #7F97AF;
    text-shadow: 1px 1px 0px rgba(214, 227, 240, 0.4);
}

.stats__players_top {
    width: 728px;
}

.stats__players_top td {
    padding: 0;
    vertical-align: top;
}

.stats__players_top .main_panel {
    padding: 5px 15px 6px 15px;
}

.stats__players_top .side_panel {
    background: #ecf2f8;
    border-left: 1px solid #d6e3f0;
    width: 200px;
}

.stats__players_top .side_panel > .server_link {
    display: block;
    padding: 10px 2px 10px 8px;
    color: #7F97AF;
    font-weight: bold;
    border-bottom: 1px solid #d6e3f0;
}

.stats__players_top .side_panel > .server_link:hover,
.stats__players_top .side_panel > .server_link.active {
    background: #E4EAF0;
}

.stats__players_top .side_panel > .server_link_archive {
    display: block;
    padding: 6px 2px 6px 16px;
    color: #7F97AF;
    font-weight: bold;
    border-bottom: 1px solid #d6e3f0;
}

.stats__players_top .side_panel > .server_link_archive:hover,
.stats__players_top .side_panel > .server_link_archive.active {
    background: #E4EAF0;
}

.stats__players_top .side_panel > .archive_link {
    display: block;
    padding: 10px 2px 10px 8px;
    color: #7F97AF;
    font-weight: bold;
    border-bottom: 1px solid #d6e3f0;
    opacity: .6;
}

.stats__players_top .side_panel > .archive_link:hover {
    background: #E4EAF0;
    opacity: 1;
}

.stats__players_rating th,
.stats__players_rating td {
    padding: 8px 4px;
}

.stats__players_rating tr.heading_row > th {
    text-transform: uppercase;
    border-bottom: 1px solid #e4e4e4;
    font-weight: bold;
    color: #99adc2;
}

.stats__players_rating tr.player_row > td {
    border-bottom: 1px solid #ededed;
    color: #2B587A;
}

.stats__players_rating tr.player_row.top10 > td {
    font-weight: bold;
}

.stats__players_rating tr.player_row.section_header > td,
.stats__players_rating tr.player_row.no_players > td {
    text-align: center;
}

/* ========================== */
/* ========= DONATE ========= */

.pricing_table {
    background: #fff;
    border-bottom: 2px solid #f1f1f1;
    display: none;
    font-family: 'PT Sans Caption';
    margin: 15px 0 0;
    width: 100%;
}

.pricing_table.active {
    display: table;
}

.pricing_table_row:nth-child(even) {
    background: transparent;
}

.pricing_table_row:nth-child(odd) {
    background: #fcfcfc;
}

.pricing_table_row th {
    color: #fff;
    text-align: center;
}

.pricing_table_row th .title {
    background: #9db0c4;
    font-size: 16px;
    padding: 10px 0;
}

.pricing_table_row th .amount {
    background: #92a6bb;
    padding: 16px 0;
}

.pricing_table_column {
    border-right: 1px solid #f1f1f1;
    text-align: center;
    padding: 10px;
}

.pricing_table_column:first-child {
    text-align: left;
}

.pricing_table_column:last-child {
    border-right: none;
}

.pricing_table_column span {
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
    color: #fff;
    font-size: 10px;
    padding: 2px 2px 2px 3px;
}

.pricing_table_column span.icon-ok {
    background: #89c09d;
}

.pricing_table_column span.icon-cancel {
    background: #8b8b8b;
}

.pricing_table_column_buy {
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    -webkit-transition: background 400ms ease-out;
       -moz-transition: background 400ms ease-out;
        -ms-transition: background 400ms ease-out;
         -o-transition: background 400ms ease-out;
            transition: background 400ms ease-out;
    background: #99abc0;
    box-shadow: 0px 2px 0px 0px #899AAD;
    color: #fff;
    display: block;
    padding: 6px 0 4px 0;
    text-decoration: none;
    margin: 4px 0;
}

.pricing_table_column_buy:hover {
    background: #8098B4;
    color: #fff;
}

.pricing_table_switch {
    background: #fff;
    padding: 12px;
    margin: 0 0 15px 0;
}

.pricing_table_switch:after {
    content: '';
    clear: both;
    display: block;
}

.pricing_table_switch span {
    color: #969696;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 28px;
}

.selectbox {
	vertical-align: middle;
	cursor: pointer;
    float: right;
}
.selectbox .select {
	width: 185px;
	height: 30px;
	padding: 0 45px 0 10px;
	font: 12px/30px Arial, Tahoma, sans-serif;
	color: #333;
	text-shadow: 1px 1px #FFF;
	border: 1px solid #f1f1f1;
}
.selectbox .select:hover {
	background-color: #fcfcfc;
}
.selectbox .select:active {
	background: #f5f5f5;
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
}
.selectbox.focused .select {
	border: 1px solid #5794BF;
}
.selectbox .select .text {
	display: block;
	width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.selectbox .trigger {
	position: absolute;
	top: 0;
	right: 0;
	width: 34px;
	height: 100%;
	border-left: 1px solid #f1f1f1;
}
.selectbox .trigger .arrow {
	position: absolute;
	top: 14px;
	right: 12px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #000;
	width: 0;
	height: 0;
	overflow: hidden;
	opacity: 0.3;
	filter: alpha(opacity=30);
}
.selectbox:hover .arrow {
	opacity: 1;
	filter: alpha(opacity=100);
}
.selectbox .dropdown {
	top: 33px;
	width: 240px;
	margin: 0;
	padding: 4px 0;
	background: #fff;
	border: 1px solid #C6CBD0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
	font: 14px/18px Arial, Tahoma, sans-serif;
}
.selectbox li {
	padding: 5px 10px 6px;
	color: #231F20;
}
.selectbox li.selected {
	background: #A3ABB1;
	color: #fff;
}
.selectbox li:hover {
	background: #9db0c4;
	color: #fff;
}
.selectbox li.disabled {
	color: #aaa;
}
.selectbox li.disabled:hover {
	background: none;
}

/* ========================== */
/* ======= ANIMATIONS ======= */

@-webkit-keyframes ajax-spinner {
    0%   { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes ajax-spinner {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity:0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
    100% {
        opacity:1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-moz-keyframes fadeInDown {
    0% {
        opacity: 0;
        -moz-transform: translateY(-20px);
        transform: translateY(-20px)
    }
    100% {
        opacity: 1;
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
} 

7. Сохраняем
8. Внешний Вид - Управление стилями - Управление шаблонами и CSS
9. Во вкладке Шаблоны выбираем "Добавить новый".
post-5-0-18661700-1432298656.jpg 
В названии шаблона указываем slider группа skin_global
И выбираем "Добавить"
10. Вставляем следующий код:

<link rel="stylesheet" href="style_css/css_6/slider.css" type="text/css"/>
<style>
.forforum {display: none;}
</style>
<div class="silencebgsoftware">
<div class="ipsBox table_wrap no-header sl_stats">
<div class="ipsBox_container">
    <div class="summary_stats right">
        <div class="stats_title">Статистика сайта</div>
<ul class="ipsType_small ipsList_inline">
        <div class="stats_wrap">
           <span class="ts_bg">
                <span class="ts_icon"><i class="icon-user"></i></span>
                <img src="http://i.imgur.com/DPHGCic.png" width="50" height="50" >
                <span class="ts_title">Пользователей</span>
                <span class="ts_data">{$this->caches['stats'][mem_count]}</span>
            </span>
            <span class="ts_bg">
                <span class="ts_icon"><i class="icon-chat"></i></span>
                <img src="http://i.imgur.com/RfUnPRD.png" width="50" height="50" >
                <span class="ts_title">Тем</span>
                <span class="ts_data">{$this->caches['stats'][total_topics]}</span>
            </span>
            <span class="ts_bg">
                <span class="ts_icon"><i class="icon-users"></i></span>
                <img src="http://i.imgur.com/j0qc3BR.png" width="50" height="50" >
                <span class="ts_title">Участник</span>
                <span class="ts_data">{$this->caches['stats'][last_mem_name_seo]}</span>
            </span>
            <span class="ts_bg">
                <span class="ts_icon"><i class="icon-attention"></i></span>
                <img src="http://i.imgur.com/68v0jqa.png" width="50" height="50" >
                <span class="ts_title">Ответов</span>
                <span class="ts_data">{$this->caches['stats'][total_replies]}</span>
            </span>
        </div>
    </div>
    <div id="zombr_slider" class="protoshow transition-slide animating">
        <div class="show-window" style="width: 650px; height: 170px;"><ul class="show" style="left: -660.334px; top: -10px;">
            <li class="slide active-slide" data-slide-interval="">    
            </li>
            <li class="slide" data-slide-interval="">
                <div class="item2">
                <input checked type=radio name=respond id=desktop />
	<input type=radio name=respond id=tablet />
	<input type=radio name=respond id=mobile />
	<article id=slider>
		<input checked type=radio name=slider id=slide1 />
		<input type=radio name=slider id=slide2 />
		<div id=slides>
			<div id=overflow>
				<div class=inner>
					<article><div class=infos><h3>Добро пожаловать</h3> Добро пожаловать на наш сайт. Здесь вы можете <br>найти все для вашего сайта, задать вопрос на интересующий вам вопрос<br> или просто пообщаться.</div><img src="http://i.imgur.com/tg8lcYJ.png" height="165" /></article>			
				</div> 		
			</div>
		</div> 	
		<div id=controls>
			<label for=slide></label>
		</div> 
		<div id=active>
			<label for=slide></label>		
		</div></article>
                    </div>
                </div>
            </li>
        </ul></div>
</div>
</div>
</div>

11. Меняем первую строчку 

<link rel="stylesheet" href="style_css/css_6/slider.css" type="text/css"/>

А именно путь к файлу slider.css. 
 
12. Переходим в globalTemplate
Ищем в нем

<div id='content' class='clearfix'>

А после него вставляем 

{parse template="slider" group="skin_global" params=""}

Где template="slider" это название вашего файла(Шаблона), а group="skin_global" та группа, где этот файл находится.

  • Нравится 4
Ссылка на комментарий

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйтесь. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти
  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...