Название: Mag Mell
Автор или ссылка на источник: Я и Глория. Дизайн сделан на основе стандартного дизайна Mybb Lord of the Rings
Цветовая гамма: тёмная
Вёрстка: Резиновый
Тест на кроссбраузерность: не тестировался
Корректность отображения при разных разрешениях: не тестировался
Исходники или макет:

Код:

Структура style.css
Код:
/*************************************************************
A - SETUP
**************************************************************/

/* A1 Import the colour scheme
-------------------------------------------------------------*/

/* A1.1 */
@import url(style_cs.css);

/* A2 Deal with browser defaults and wonkiness
-------------------------------------------------------------*/

/* A2.1 */
html, body {margin: 0; padding: 0}

/* A2.2 */
.punbb * {
  margin: 0
  }

/* A2.3 */
.punbb ul, .punbb dl, .punbb li, .punbb dd, .punbb dt {
  padding: 0;
  list-style: none;
  }

/* A2.4 */
.punbb img {
  border:none
  }

/* A2.5 */
.punbb .main table {
  table-layout: fixed;
  width: 100%;
border-radius: 20px;
  }

/* A2.6 */
.checkfield input[type="checkbox"], .radiofield input[type="radio"] {margin: 0 0.3em;}

/* A2.7 */
p[class="checkfield"] *,
div[class="checkfield"] *,
fieldset[class="radiofield"] * {
  height: 1.8em;
  vertical-align: middle
  }


 /* A3 Text setup
-------------------------------------------------------------*/

/* A3.1 */
body {
  font-size: 100.01%;
height: auto;
  }

/* A3.2 */
.punbb {
  font: normal 68.75% Verdana, Tahoma, Arial, Trebuchet MS, Sans-Serif, Georgia, Courier, Times New Roman, Serif;
  }

/* A3.3 */
.punbb textarea, .punbb input, .punbb select, .punbb optgroup {
  font: 1em verdana, arial, helvetica, sans-serif
  }

/* A3.4 */
.punbb h1, .punbb h2, .punbb h3 {
  font-size: 1em;
  font-weight: bold;
  }

.punbb th {
  font-size: 1em;
  font-weight: bold;
  letter-spacing: 1px;
  }

.punbb h4, .punbb table {
  font-size: 1em;
  font-weight: normal;
  }

/* A3.5 */
.punbb h1 span, .punbb h2 span {
  font-size: 1.6em;
font-family: 'GothicRusMedium', 'Comic Sans MS', cursive;
}

.punbb legend span {
  font-size: 1.1em;
  }

/* A3.6 */
.punbb pre {
  font: 1.1em/140% monaco, "bitstream vera sans mono", "courier new", courier, monospace
  }

/* A3.7 */
.punbb address, .punbb em {
  font-style: normal
  }

/* A3.8 */
.punbb .post-content em {
  font-style: italic
  }

/* A3.9 */
.punbb .post-content em.bbuline {
  font-style: normal;
  text-decoration: underline;
  }

/* A3.10 */
.punbb a {
  text-decoration: underline
  }

/* A3.11 */
.punbb optgroup {
  font-weight: bold;
  }


/* A4 Float clearing and hidden items
-------------------------------------------------------------*/

/* A4.1 */
#pun:after,
.punbb .container:after,
.punbb .post-links ul:after,
.punbb .main div.inline:after,
.punbb .post-box:after,
.punbb .linksb:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  overflow:hidden;
  line-height: 0.0;
  font-size: 0;
  }

/* A4.2 */
.acchide,
#pun-index #pun-main h1,
#pun-navlinks h2,
#pun-pagelinks h2,
#pun-status h2,
#pun-ulinks h2,
.punbb .forum h2,
.punbb .multipage .topic h2,
.punbb dl.post-sig dt span,
.punbb p.crumbs strong,
.punbb .divider hr,
.punbb .required label em,
.punbb .formsubmit label,
.punbb .submitfield label,
.punbb .modmenu label,
#pun-userlist .main h2 {
  font-size: 0;
  height: 0;
  width: 0;
  line-height: 0.0;
  position:absolute;
  left: -9999px;
  overflow: hidden
  }


/* A5 Basic page layout and borders
-------------------------------------------------------------*/
#pun_wrap {
height: auto;
}

/* A5.1 */
#pun {
  margin: 0px auto auto auto;
  width :80%;
  border: none;
height: auto;
}

/* A5.2 */
.punbb {
  float: left;
  width: 100%;
  height: auto;
  }

/* A5.3 */
#pun-redirect, #pun-maint {
  margin: 50px 20% 12px 20%;
  width: auto;
  float: none;
  }

/* A5.4 */
.punbb .section, .punbb .main {
  margin-bottom: 1em;
  }

/* A5.5 */
.punbb .category {
  margin-top: 0.4em;
  }

.punbb .post {
margin-top: 2.4em;
}

/* A5.6 */
.punbb #pun-category1, .punbb .toppost, .punbb .topicpost {
  margin-top: 0;
  }

/* A5.7 */
#pun-post .topic {
  margin-top: 1em;
  }

/* A5.8 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
  border-style: none none solid none;
border-radius: 20px;
  border-width: 0px 0px 2px 0px
  }

/* A5.9 */
.punbb .container {
  border-style: solid;
  border-width: 1px;
border-radius: 20px;
  }

/* A5.10 */
#pun-main h1, .punbb .section h2, #pun-stats h2, #pun-debug h2 {
  padding: 0.4em 1em;
  border-style: none;
  border-width: 0;
  }

/* A5.11 */
#pun-main h2 {
  padding: 0.4em 1em;
  border-style: none;
  border-width: 0;
}

/* A5.12 */
#pun-stats div.statscon {
  border-radius: 20px;
}

/* A5.13 */
#tieser-bottom {
  border-radius: 20px;
}

/*************************************************************
B - MAIN CONTENT - GENERAL
**************************************************************/

/* B1 Parsed Content, Signatures and Scroll Boxes
-------------------------------------------------------------*/

/* B1.1 */
.punbb .post-content {
  padding: 0;
  margin: 0;
  width: 100%;
  overflow: hidden;
  }

/* B1.2 */
.punbb .post-sig dt {
  display: block;
  border-top: 1px solid #888;
  width: 250px;
  margin: 5px 0;
  }

/* B1.3 */
.punbb .post-content p {
  margin: 0;
  padding: 0 0 1em 0;
  line-height: 150%;
  }

/* B1.4 */
.punbb .post-content img {
  vertical-align: text-bottom
  }

/* B1.5 */
.punbb .post-content img.postimg {
  vertical-align: middle;
  }

/* B1.6 */
.punbb .post-content .blockcode, .punbb .post-content blockquote {
  width: 100%;
  overflow: hidden;
  }

/* B1.7 */
.punbb .post-content .scrollbox {
  width: 100%;
  overflow: auto;
  }

/* B1.8 */
.punbb .post-content .quote-box, .punbb .post-content .code-box {
  margin: 0.4em 1.8em 1.4em 1.8em;
  padding: 1em;
border-radius: 20px;
border: none !important;
  }

/* B1.9 */
.punbb .quote-box cite, .punbb .code-box strong.legend {
  display: block;
  padding-bottom: 0.7em;
  font-size: 1.1em;
  font-weight: bold;
  font-style: normal;
  margin: 0;
  }

/* B2 Information boxes
-------------------------------------------------------------*/

/* B2.1 */
.punbb .info-box {
  padding: 1.1em 1.7em 1em 1.7em;
  border-style: solid;
  border-width: 1px;
  margin: 0 0 1.1em 0;
  }

/* B2.2 */
.punbb .info-box * {
  padding: 0 0 0.7em 0;
  }

/* B2.3 */
.punbb #pun-main .info-box .legend {
  font-size: 1.1em;
  font-weight: bold;
  }


/* B3 Pagination and posting links
-------------------------------------------------------------*/

/* B3.1 */
.punbb .linkst {
  float: left;
  position: relative;
  width: 100%;
  font-size: 1.1em;
  height: 0;
  }

/* B3.2 */
.multipage {
  margin-top: 3em;
  }



.multipage .section .container th.tcl:nth-child(1) {
  border-radius: 20px 0 0 0 !important;
  }

.multipage .section .container th.tcl:nth-child(2) {
  border-radius: 0 !important;
  }

.multipage .section .container th.tc3 {
  border-radius: 0 20px 0 0 !important;
  }

.multipage .section .container td.tcl:nth-child(1) {
  border-radius: 0 0 0 20px !important;
  }

.multipage .section .container td.tcl:nth-child(2) {
  border-radius: 0 !important;
border-left: 1px solid #CD00CD;
  }

.multipage .section .container td.tc3 {
  border-radius: 0 0 20px 0 !important;
  }



/* B3.3 */
.linkst .pagelink {
  position: absolute;
  top: -4em;
  left: 1em;
  width: 24em;
  }

/* B3.4 */
.linkst .postlink {
  position: absolute;
  top: -4em;
  right: 1em;
  width: 16em;
  text-align: right;
  font-weight: bold;
  }

/* B3.5 */
.punbb .linksb {
  text-align: right;
  padding: 0.4em 1em 0.5em 1em;
  font-size: 1.1em;
  }

/* B3.6 */
.linksb .pagelink {
  float: left;
  width: 24em;
  text-align: left;
  }

/* B3.7 */
.linksb .postlink {
  float: right;
  width: 16em;
  font-weight: bold
  }

/* B3.8 */
.subscribelink {
  clear:both;
  padding-top: 0.3em;
  padding-bottom: 0.5em;
  }


/*************************************************************
C - MAIN CONTENT - SPECIFIC
**************************************************************/

/* C1 Form layout
-------------------------------------------------------------*/

/* C1.1 */
.punbb .formal .container {
  padding: 1.7em 2.3em 1.1em 2.3em;
  }

/* C1.2 */
.punbb .formsubmit {
  padding: 0 0 0 1.7em;
  margin: 1em 0 0 0;
  }

/* C1.3 */
.punbb .formsubmit input, .punbb .formsubmit a, .punbb .formsubmit span {
  margin: 0 0.6em 0 0
  }

/* C1.4 */
.punbb fieldset {
  border-style: solid;
  border-width: 1px;
  padding: 0 18px 0 18px;
  margin: 0 0 1em 0
  }

/* C1.5 */
.punbb fieldset legend {
  padding: 0;
  margin: 0 0 0 11px;
  font-size: 1.1em
  }

/* C1.6 */
.punbb fieldset legend span {
  padding: 0 5px;
  margin: 0 0 0 -15px;
  }

/* C1.7 */
.punbb fieldset fieldset {
  border-style: none;
  margin: 0;
  padding: 0 0 8px 0
  }

/* C1.8 */
.punbb .fs-box {
  padding: 1em 0 0.8em 0;
  }

/* C1.9 */
.punbb .fs-box p, .punbb .fs-box fieldset {
  padding: 0 0 0.8em 0
  }

/* C1.10 */
.punbb .inline .inputfield, .punbb .inline .selectfield, .punbb .inline .passfield {
  float: left;
  margin-right: 1em;
  }

/* C1.11 */
.punbb .inline .infofield {
  clear:both
  }

/* C1.12 */
.punbb .datafield br {
  display: none
  }

/* C1.13 */
.punbb .required label, .punbb .datafield span.input {
  font-weight: bold
  }

/* C1.14 */
.punbb .datafield span.input a {
  font-weight: normal;
  }

/* C1.15 */
.punbb .areafield span.input, .punbb p.longinput span.input {
  display: block;
  padding: 0 4em 0 0;
  height: 100%; /* For IE */
  }

/* C1.16 */
.punbb textarea, .punbb .longinput input {
  width: 64%;
  margin: 0;
  }

/* C1.17 */
.punbb .hashelp {
  position: relative;
  }

/* C1.18 */
.punbb .helplinks {
  display: block;
  position: absolute;
  top: 1em;
  right: 0;
  font-weight: normal;
  width: 36%;
  }

/* C1.19 */
.punbb #profile .helplinks {
  top: 1.5em;
  }

/* C1.20 */
.punbb .helplinks span {
  display: block;
  padding-bottom: 0.2em;
  }

.punbb .helplinks span INPUT {
  margin: 0px 2px 2px 0px;
}

/* C1.21 */
#pun-post .formal .info-box li {
  padding-left: 4px;
  list-style-type: square;
  list-style-position: inside;
  line-height: 1.5;
  margin: 0;
  }


/* C2 Table layout
-------------------------------------------------------------*/

/* C2.1 */
.punbb .main .tcl {
  overflow: hidden;
  text-align: center;
  width: 50%;
  }

/* C2.2 */
.punbb .main .tc2, .punbb .main .tc3, .punbb .main .tcmod {
  text-align: center;
  width: 10%;
  }

/* C2.3 */
.punbb .main .tcr {
  overflow: hidden;
  text-align: left;
  width: 30%;
  }

.punbb .main th.tcr {
border-radius: 0 20px 0 0;
  }

.punbb .main td.tcr {
border-radius: 0 0 20px 0;
  }

/* C2.4 */
#pun-searchtopics .main .tcl,
#pun-modviewforum .main .tcl {
  width: 40%
  }

/* C2.4A */
#pun-userlist .main .tcl {
  width: 30%
  }

#pun-userlist .main .tc3:nth-child(5) {
  text-align: center;
  width: 20%;
  }

/* C2.5 */
#pun-userlist .main .tc2,
#pun-searchtopics .main .tc2 {
  text-align: left;
  width: 20%;
  }

/* C2.6 */
#pun-debug table .tcl {
  width: 15%;
  white-space:normal;
  }

/* C2.7 */
#pun-debug .tcr {
  width: 90%;
  white-space: normal;
  }

/* C2.8 */
#pun-index .tcl h3 {
  font-size: 1.2em;
  font-weight: bold;
  }

/* C2.9 */
.punbb td span.youposted {
  font-weight: bold;
  margin-left: -1em;
  position: absolute;
  }

/* C2.10 */
.punbb td .modlist {
  display: block;
  padding-top: 0.3em
  }

/* C2.11 */
.punbb .main td {
  border-style: solid none none solid;
  border-width: 1px 0 0 1px;
  padding: 0.8em 1em;
  }

/* C2.12 */
.punbb .main th {
  border: none;
  padding: 6px 1em 6px 1em;
  }

/* C2.13 */
.punbb .main .tcl {
  border-left-style: none;
  border-left-width: 0;
  }

.punbb .main th.tcl {
  border-radius: 20px 0 0 0;
  }

.punbb .main th.pmtc24 {
  border-radius: 0 20px 0 0;
  }

td.pmtc24 {
  border-radius: 0 0 20px 0;
  }

.punbb .main .usertable th.tc3:nth-child(6) {
  border-radius: 0 20px 0 0;
  }

.punbb .main .usertable td.tc3:nth-child(6) {
  border-radius: 0 0 20px 0;
  }

* html .tclcon {height: 1px}

/* C2.14 */
.punbb td div.tclcon {
    margin-left: 110px;
padding-top: 2em;
}

/* C2.15 */
.punbb div.icon {
	float: left;
    display: block;
    width: 110px;
    height: 80px;
    padding-top: 1px;
    margin-top: 1px;
}

/* C2.16 */
#active_users th.tc3:nth-child(5), #max_visit_time th.tc3:nth-child(4), #most_invites th.tc3:nth-child(5), 
#administration th.tc3:nth-child(5), #max_views_topics th.tc3:nth-child(4), #max_posts_topics th.tc3:nth-child(4) {
border-radius: 0 20px 0 0;
}

#active_users td.tc3:nth-child(5), #max_visit_time td.tc3:nth-child(4), #most_invites td.tc3:nth-child(5), 
#administration td.tc3:nth-child(5), #max_views_topics td.tc3:nth-child(4), #max_posts_topics td.tc3:nth-child(4) {
border-radius: 0 0 20px 0;
}


 /* C3 Topics
-------------------------------------------------------------*/

/* C3.1 */
.punbb .post .container {
  border: none;
  margin-top: -1px;
  padding-bottom: 1px;
  }

.post, .post .container {
border-radius: 20px;
}

/* C3.2 */
.punbb .post h3 {
  border: none;
  }

/* C3.3 */
.punbb .post h3 span {
  border: none;
  padding: 0.5em 1em;
  display: block;
  margin-left: 19em;
  }

/* C3.4 */
.punbb .post h3 strong {
  float: right;
  width: 5em;
  text-align: right;
  font-weight: normal;
  }

/* C3.5 */
.punbb .post .post-author {
  float: left;
  width: 19em;
  margin-top: -1.8em;
  overflow: hidden;
  }

.punbb .post li.pa-author {
  padding-bottom: 0.2em;
  }

/* C3.6 */
.punbb .post .post-author ul, .punbb .post .post-author p {
  padding: 1em 1em 1em 1em;
  line-height: 140%;
  }

/* C3.7 Перенос .pa-author в E2.2 Шрифт автора поста*/


/* C3.8 */
.pa-author a {
  text-decoration: underline
  }

/* C3.9 */
li.pa-title {
  padding-bottom: 0.2em;
text-align: center;
  }

/* C3.10 */
li.pa-online {
  line-height: 0.8em;
  border-left-style: solid;
  border-left-width: 0.7em;
  padding-left: 0.4em;
  margin-top: 0.7em;
  }

/* C3.11 */
.punbb .post-body {
  margin-left: 19em;
  border: none;
  padding: 0 0 1px 0;
  }

/* C3.12 */
.punbb .post-box {
  padding: 1em;
  }

/*C3.13 */
.punbb fieldset .post-box {
  margin-bottom: 0.8em
  }

/* C3.14 */
.punbb .post-links {
  margin-left: 19em;
  border: none;
  }

/* C3.15 */
.punbb .post-links ul {
  padding: 0 1em 0 0;
  height: 2em;
  line-height: 2em;
  margin-left: -19em;
  border: none;
  background: transparent;
  text-align: right;
  }

/* C3.16 */
.punbb .post-links li {
  display: inline;
  padding-left: 1em;
  }

/* C3.17 */
.pl-email, .pl-website {
  float: left;
  }

/* C3.18 */
.punbb .clearer {
  clear: both;
  height: 0;
  font-size: 0;
  }

/* C3.19 */
li.pa-avatar {
text-align: center;
  }

/* C3.20 */
.punbb .modmenu, .punbb .modmenu .container {
border-radius: 20px;
}

/* C3.21 */
.punbb .post, .post-body, .post-box {
border: none;
}

/* C3.22 */
.post-body, .post-box, .post-links, .post-links ul, .post-author, .post h3 span {
border-radius: 20px;
}

/* C4 Moderator menu
-------------------------------------------------------------*/

/* C4.1 */
.punbb .modmenu .container {
        margin-top: 4px;
  padding: 0.5em 1em;
  text-align: right;
  }

/* C4.2 */
.punbb .modmenu strong, .punbb .modmenu a {
  height: 1.8em;
  line-height: 1.8em;
  }

/* C4.3 */
.punbb .modmenu .container strong {
  float: left;
  }

/* C4.4 */
.punbb .modmenu input {
  margin-left: 1em;
  }


/* C5 Message boxes
-------------------------------------------------------------*/

/* C5.1 */
.punbb .info .container {
  padding: 0.8em 1em
  }

/* C5.2 */
.punbb .info .container .backlink {
  padding-top: 0.8em;
  }


/* C6 Profile
-------------------------------------------------------------*/

/* C6.1 */
#profile .container {
  padding-left: 18.6em;
  }

/* C6.2 */
#profilenav {
  float: left;
  width: 14em;
  margin-left: -16.3em;
  display: inline;
  }

/* C6.3 */
#profilenav li {
  padding-bottom: 0.8em;
  font-weight: bold;
  }

/* C6.4 */
#viewprofile ul, #profilenav ul {
  border-style: solid;
  border-width: 1px;
  padding: 1.5em 18px 0.8em 18px;
  margin: 0 0 1em 0;
  }

/* C6.5 */
#viewprofile h2, #profilenav h2 {
  background: transparent;
  border: none;
  padding: 0 0 0 0;
  margin: 0 14px -0.6em 14px;
  }

/* C6.6 */
#viewprofile h2 span, #profilenav h2 span {
  padding: 0 5px;
  position: relative;
  }

/* C6.7 */
#viewprofile li, #setmods dl {
  padding: 0 0 0 16em;
  margin-bottom: 0.2em;
  }

/* C6.8 */
#viewprofile li span {
  float: left;
  width: 14em;
  margin-left: -16em;
  padding: 0.5em 1em;
  font-weight: bold;
  }

/*C6.9 */
#setmods dt {
  float: left;
  width: 14em;
  margin-left: -16em;
  padding: 0.8em 1em;
  font-weight: bold;
  display: inline;
  }

/* C6.10 */
#viewprofile li strong, #viewprofile li div, #setmods dd {
  display: block;
  padding: 0.5em 1em;
  font-weight: normal;
  }

/* C6.11 */
.punbb img.avatardemo {
  float: right;
  margin: 0 0 0.8em 1.8em
  }


/* C7 User list
-------------------------------------------------------------*/

/* C7.1 */
#pun-userlist .formal, #pun-userlist .formal .container {
  border-bottom: none;
  margin-bottom: 0;
  }

/* C7.2 */
#pun-userlist .usertable .container {
  padding: 0 2.3em 2.3em 2.3em;
  border-top: none;
  }

/* C7.3 */
#pun-userlist .usertable table {
  border-style: solid;
  border-width: 1px;
  }


/*************************************************************
D - PUNBB SECTIONS OTHER THAN MAIN CONTENT
**************************************************************/

/* D1 Logo and description
-------------------------------------------------------------*/

/* D1.1 */
#pun-title {
        margin: 0;
        border: none;
        margin: 0px ;
        margin-bottom: -60px;
}

/* D1.2 */
#pun-title h1 {
        display : block;
        height : 120px;
        margin: -1px 0px 0px -1px;
width: 390px;
float: left;
}

/* D1.3 */
#pun-title .container {
  border-style: none solid none solid;
  padding: 0 1em 0.8em 1em;
  }

/* D1.4 */
#pun-title h1 span {
        display: none;
}

#pun-title TABLE {
        border: none;
        height: 600px;
        width: 100%;
}

#pun-title TD.title-logo-tdl {
        border: none;
        width: 100%;
}

#pun-title TD.title-logo-tdr {
        border: none;
        width: 468px;
        vertical-align: top;
}

/* D2 Page navigation
-------------------------------------------------------------*/

/* D2.1 */
#pun-pagelinks {
  position: absolute;
  top: -15px;
  left: 0;
  margin: 0;
  border: none;
  padding: 0;
  width: 100%;
  }

/* D2.2 */
#pun-pagelinks .container {
  background: transparent;
  border: none;
  padding: 0
  }

/* D2.3 */
#pun-pagelinks .container li {
  display: inline
  }

/* D2.4 */
#pun-pagelinks li a, #pun-pagelinks a:link, #pun-pagelinks a:hover {
  height: 2em;
  line-height: 2em;
  padding: 0;
  font-size: 1.2em;
  margin-left: -9999px;
  display: block;
  float:left;
  width: 100%;
  }

/* D2.5 */
#pun-pagelinks a:active, #pun-pagelinks a:focus {
  position:relative;
  margin: 0;
  }

#pun-pagelinks li a span {
  display:block;
  margin: 0 1em
  }

/* D3 Forum navigation
-------------------------------------------------------------*/

/* D3.1 */
#pun-navlinks {
  border-style: none;
  border-width: 0px;
  margin: 0;
  margin-bottom: 0px;
}

#pun-navlinks .container {
  border-style: none;
  border-width: 0px;
  margin: 0;
  }

/* D3.2 */
#pun-navlinks .container {
  padding-top: 10px;
  height: 30px;
  font-weight: bold;
  text-align: right;
  margin-left:0%;
}

/* D.3 */
#pun-navlinks li {
  display: inline;
  margin: 1%;
}

/* D3.4 */
#pun-navlinks li a {
  letter-spacing: 0px;
  }

/* D3.5 */
#pun-navlinks li a {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    background-color: #000000;
    padding: 5px 10px;
    border: 1px solid #003333;
    background-image: linear-gradient(bottom, rgb(0.0.51) 0%, rgb(0.0.58) 100%);
    background-image: -o-linear-gradient(bottom, rgb(0.0.51) 0%, rgb(0.0.58) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(0.0.51) 0%, rgb(0.0.58) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(0.0.51) 0%, rgb(0.0.58) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(0.0.51) 0%, rgb(0.0.58) 100%);
 
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(0.0.51)),
        color-stop(1, rgb(0.0.58))
    );
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-shadow: 0px -1px 0px rgba(0,0,0,.5);
    -webkit-box-shadow: 0px 4px 0px #003333, 0px 3px 10px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
    -moz-box-shadow: 0px 4px 0px #003333, 0px 3px 10px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
    box-shadow: 0px 4px 0px #003333, 0px 3px 10px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);

	-webkit-transition: all .1s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
	
}

/* D3.6 */
#pun-navlinks li a:hover {
    text-decoration: none;
    background-image: linear-gradient(bottom, #C1FFC1 0%, #8B668B 100%);
    background-image: -o-linear-gradient(bottom, #C1FFC1 0%, #8B668B 100%);
    background-image: -moz-linear-gradient(bottom, #C1FFC1 0%, #8B668B 100%);
    background-image: -webkit-linear-gradient(bottom, #C1FFC1 0%, #8B668B 100%);
    background-image: -ms-linear-gradient(bottom, #C1FFC1 0%, #8B668B 100%);
 
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #C1FFC1),
        color-stop(1, #8B668B)
    );
}

/* D3.7 */
#pun-navlinks li a:active {
    background-image: linear-gradient(bottom, rgb(0.0.51) 0%, rgb(0.0.58) 100%);
    background-image: -o-linear-gradient(bottom, rgb(0.0.51) 0%, rgb(0.0.58) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(0.0.51) 0%, rgb(0.0.58) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(0.0.51) 0%, rgb(0.0.58) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(0.0.51) 0%, rgb(0.0.58) 100%);
 
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(0.0.51)),
        color-stop(1, rgb(0.0.58))
    );

/* D3.8 */
-webkit-box-shadow: 0px 2px 0px #003333, 0px 1px 6px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
-moz-box-shadow: 0px 2px 0px #003333, 0px 1px 6px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
box-shadow: 0px 2px 0px #003333, 0px 1px 6px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);

-webkit-transform: translate(0, 2px);
-moz-transform: translate(0, 2px);
transform: translate(0, 2px);
}

/* D4 User links
-------------------------------------------------------------*/

/* D4.1 */
#pun-ulinks  {
  margin-top: 2px;
  margin-bottom: 0px;
  border: none;
  }

/* D4.2 */
#pun-ulinks .container {
  padding: 0.9em 1em;
  text-align:right;
  border: none;
  margin-left: 0%;
  }

/* D4.3 */
#pun-ulinks li, #pun-ulinks li a {
  display: inline;
  border-left-style: none;
  border-left-width: 1px;
  white-space: nowrap;
  font-size: 1em;

  }

/* D4.4 */
#pun-ulinks li a {
  padding: 0 0.3em 0 0.6em
  }

/* D4.5 */
#pun-ulinks li.item1, #pun-ulinks li.item1 a {
  border-left-style: none;
  border-left-width: 0;
  padding-left: 0
  }

/* D5 Welcome box and Top Breadcrumbs
-------------------------------------------------------------*/

/* D5.1 */
#pun-status, #pun-status .container {
  border-bottom: none;
  margin-bottom: 0;
  }

/* D5.2 */
#pun-status .container {
  padding: 0.8em 1em 1em 1em;
  }

/* D5.3 */
#pun-status span {
  white-space: nowrap;
  margin-right: 0.5em;
  }

/* D5.4 */
#pun-crumbs1 {
  font-weight: bold;
  overflow: hidden;
  margin-top: 0;
  }

/* D5.5 */
#pun-crumbs1 p.container {
  border-top: none;
  padding: 1em 1em 0.8em 1em;
  font-size: 1.1em;
  }

/* D5.6 */
#pun-break1 {
  margin: 0 1em;
  border-style: solid none;
  border-width: 1px 0;
  height: 0;
  margin: -2px 1em;
  position: relative;
  z-index: 1;
  }

/* D6 Announcement
-------------------------------------------------------------*/

/* D6.1 */
#pun-announcement h2 {
  padding: 0;
  margin: 0 1em -3.5em 1em;
  border-style: none none solid none;
  border-width: 0 0 1px 0;
  position: relative;
  font-weight: bold;
  }

/* D6.2 */
#pun-announcement h2 span {
display: none;
  }

/* D6.3 */
#pun-announcement .container {
  padding: 4.3em 1em 1em 1em;
  }

/* D6.4 Вставка своего слова вместо слова "Объявление" */
#pun-announcement h2:before {
content: "Полезная Информация";
display: block;
padding: 1.4em 0 0.4em 0;
border: none;
font-size: 1.6em;
font-family: 'GothicRusMedium', 'Comic Sans MS', cursive;
text-align: center;
}

/* D6.4 Вставка разделительной черты под словом "Объявление" */
#pun-announcement h2:after {
display: block;
content: attr(hr);
border-style: solid;
border-width: 1px 0;
border-color: #ccbb00 #CD00CD #CD00CD #CD00CD;
}

/* D7 Statistics
-------------------------------------------------------------*/

/* D7.1 */
#pun-stats .container {
  padding: 0.8em 1em
  }

/* D7.2 */
#pun-stats li.item1, #pun-stats li.item2 {
  float: left;
  clear: both;
  line-height: 150%;
  }

/* D7.3 */
#pun-stats li.item3, #pun-stats li.item4 {
  text-align: right;
  line-height: 150%;
  }

/* D7.4 */
li#onlinelist {
  margin-top: 1em;
  border-top-style: solid;
  border-top-width: 1px;
  float: left;
  width: 100%;
  line-height: 130%;
  }

/* D7.5 */
li#onlinelist div {
  border-top-style: solid;
  border-top-width: 1px;
  padding: 0.7em 0 0 0;
  }

/* D8 Quick Jump - About - Bottom Breadcrumbs
-------------------------------------------------------------*/

/* D8.1 */
#pun-qjump {
  margin: 0;
  border: none;
  width: 50%;
  position: relative;
  float: left;
  }

/* D8.2 */
#pun-qjump .container {
  border: none;
  background: transparent;
  padding: 0.8em 1em;
  }

/* D8.3 */
#pun-about {
  margin-top: 0;
  }

/* D8.4 */
#pun-about .container {
  border-top-style: none;
  text-align: right;
  line-height: 150%;
  padding: 0.8em 1em;
  }

/* D8.5 */
#pun-about p span {
  display:block;
  padding-left: 50%;
  }

/* D8.6 */
#pun-crumbs2 {
  font-weight: bold;
  overflow: hidden;
  margin-bottom: 0;
  border-bottom: none;
  }

/* D8.7 */
#pun-crumbs2 .container {
  border-bottom: none;
  padding: 0.8em 1em;
  font-size: 1.1em;
  }

/* D8.8 */
#pun-break4 {
  margin: -2px 1em;
  border-style: solid none;
  border-width: 1px 0;
  position: relative;
  height: 0;
  z-index: 1;
  }

/* D8.9 */
div.punbb-admin #pun-about .container {
  border-top-style: solid;
  border-top-width: 1px;
  }


/* D9 Help file
-------------------------------------------------------------*/

/* D9.1 */
#pun-help .formal .info-box h3.legend {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  padding-bottom: 0;
  margin-bottom: 0.8em;
  }

/* D9.2 */
#pun-help .formal .info-box h3.legend span {
  padding-bottom: 0.6em;
  display: block;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  font-size: 1.1em;
  }

/* D9.3 */
#pun-help .formal p, #pun-help .formal dd {
  margin-bottom: 1em
  }

/* D9.4 */
#pun-help .formal ul, #pun-help .formal dl {
  padding: 0 0 0 1em
  }

/* D9.5 */
#pun-help .formal li {
  padding: 0;
  line-height: 130%
  }

/* D9.6 */
#pun-help .formal li * {
  vertical-align: text-top
  }

/* D9.7 */
#pun-help .formal dt span {
  font: 1.4em/120% monaco, "bitstream vera sans mono", "courier new", courier, monospace
  }

/* D9.8 */
#pun-help .formal .parsedmsg, #pun-help .formal .parsedmsg .incode {
  padding-bottom: 0;
  }

/*************************************************************
E - Шрифты
**************************************************************/

/* E1 Подгрузка шрифтов
-------------------------------------------------------------*/

/* E1.1 Scribish */
@font-face {
    font-family: 'MedievalScribishRegular';
    src: url('https://forumstatic.ru/files/0013/ba/02/53669.svg');
    src: url('https://forumstatic.ru/files/0013/ba/02/53669.svg') format('embedded-opentype'),
         url('https://forumstatic.ru/files/0013/ba/02/55946.svg') format('woff'),
         url('https://forumstatic.ru/files/0013/ba/02/79653.svg') format('truetype'),
         url('https://forumstatic.ru/files/0013/ba/02/93368.svg#MedievalScribishRegular') format('svg');
}

/* E1.2 GothicRus */
@font-face {
    font-family: 'GothicRusMedium';
    src: url('https://forumstatic.ru/files/0013/ba/02/31716.svg');
    src: url('https://forumstatic.ru/files/0013/ba/02/31716.svg') format('embedded-opentype'),
         url('https://forumstatic.ru/files/0013/ba/02/59852.svg') format('woff'),
         url('https://forumstatic.ru/files/0013/ba/02/99329.svg') format('truetype'),
         url('https://forumstatic.ru/files/0013/ba/02/57348.svg#GothicRusMedium') format('svg');
}

/* E2.1 Шрифт меню */
#pun-navlinks li a {
font-family: 'GothicRusMedium', 'Comic Sans MS', cursive;
font-size: 18px;
}

/* E2.2 Шрифт автора поста */
.punbb .post li.pa-author {
font-family: 'MedievalScribishRegular', 'GothicRusMedium', 'Comic Sans MS', cursive;
  font-size: 1.8em;
  font-weight: bold;
letter-spacing: 2px;
text-align: center;
}

/* F1 Левая выдвижная панель */

/* ВНЕШНИЙ БЛОК */
#panel_left {
    position: fixed; /* положение */
    top: 25%; /* отступ сверху */
    left: 0; /* отступ слева */
    width: 72px; /* ширина блока */
    height: 300px; /* высота блока */
    font: 14px Arial; /* размер и тип шрифта */
    text-align: center; /* выравнивание текста по центру */
    padding: 5px; /* отступы от границ внутри блока */

    -webkit-transition-duration: 0.3s; /* анимационное выдвижение для всех браузеров*/
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;

    -webkit-border-radius: 0 5px 5px 0; /* закругление границ для всех браузеров*/
    -moz-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
z-index: 1000;
    }

/* СКРЫТЫЙ БЛОК */
#hidden_panel_left {
    position: fixed; /* положение */
    top: 25%; /* отступ сверху */
    left: -388px; /* отступ слева */
    width: 388px; /* ширина блока */
    height: 300px; /* высота блока */
    
    text-align: left; /* выравнивание текста */

    -webkit-transition-duration: 0.3s; /* анимационное выдвижение для всех браузеров*/
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;

    -webkit-border-radius: 0 5px 5px 0; /* закругление границ для всех браузеров*/
    -moz-border-radius: 5px;
    border-radius: 5px;
z-index: 1000;
    }
#panel_left:hover {
    left: 388px; /* при наведении выдвигается на скрытые 200px + 20px отступы */
}
#panel_left:hover #hidden_panel_left {
    left: 0; /* отступ слева */
}

#text_panel_left {
margin: 60px 0px 60px 60px;
padding-left: 15px;
}

/* F1 Правая выдвижная панель */

/* ВНЕШНИЙ БЛОК */
#panel_right {
    position: fixed; /* положение */
    top: 25%; /* отступ сверху */
    right: 0; /* отступ слева */
    width: 72px; /* ширина блока */
    height: 300px; /* высота блока */
    font: 14px Arial; /* размер и тип шрифта */
    text-align: center; /* выравнивание текста по центру */
    padding: 5px 5px 5px 0; /* отступы от границ внутри блока */

    -webkit-transition-duration: 0.3s; /* анимационное выдвижение для всех браузеров*/
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;

    -webkit-border-radius: 0 5px 5px 0; /* закругление границ для всех браузеров*/
    -moz-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
z-index: 1000;
    }

/* СКРЫТЫЙ БЛОК */
#hidden_panel_right {
    position: fixed; /* положение */
    top: 25%; /* отступ сверху */
    right: -388px; /* отступ слева */
    width: 388px; /* ширина блока */
    height: 300px; /* высота блока */
    padding: 10px 0 10px 10px; /* отступы от границ внутри блока */
    text-align: left; /* выравнивание текста */

    -webkit-transition-duration: 0.3s; /* анимационное выдвижение для всех браузеров*/
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;

    -webkit-border-radius: 0 5px 5px 0; /* закругление границ для всех браузеров*/
    -moz-border-radius: 5px;
    border-radius: 5px;
z-index: 1000;
    }
#panel_right:hover {
    right: 388px; /* при наведении выдвигается на скрытые 200px + 20px отступы */
}
#panel_right:hover #hidden_panel_right {
    right: 0; /* отступ слева */
}

#text_panel_right {
margin: 60px 75px 60px 0px;
}

/* G #color-area, #color-area table, #video-area, #image-area, #size-area, #font-area, #addition-area, #table-area, #smilies-area, #keyboard-area */
#color-area, #color-area table, #video-area, #image-area, #size-area, #font-area, #addition-area, #table-area, #smilies-area, #keyboard-area {
border: 2px solid #8B668B;
border-radius: 20px;
box-shadow: 0 7px 7px #8B668B, 0 -7px 7px #8B668B, 23px 0 20px -23px #8B668B;
}

/* H Админка */
.punbb-admin #pun-admain h2, .adcontainer, .adformal {
border: none !important;
border-radius: 20px !important;
}

#pun-admain fieldset {
border-radius: 20px !important;
}

/* I Вкладки в Объвлении */

/* I1 */
.tabs {
      position: relative;   
      min-height: 200px; /* This part sucks */
      clear: both;
      margin: 25px 0;
    }

/* I2 */
.tab1 {
      float: left;
    }
	
.tab2 {
      float: right;
    }

/* I3 */
.tab1 label {
      margin-left: -1px;
      left: 1px;
	  bottom: -5px;
	}
	
.tab2 label {
	  margin-right: -19px;
      right: 19px;
	  bottom: -3px;
	}

/* I4 */
.tab1 label, .tab2 label {
cursor: pointer;
      /* Скругляем верхние уголки */
  -webkit-border-top-left-radius: 15px;
  -webkit-border-top-right-radius: 15px;
  -moz-border-radius-topleft: 15px;
  -moz-border-radius-topright: 15px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
      padding: 10px; 
      border: none;
      position: relative;
      z-index: 5; 
    }

/* I5 */
.tab1 [type=radio], tab2 [type=radio] {
      display: none;   
    }

/* I6 */
.content1 {
	  left: 0;
	}

.content2 {
	  right:0;
	}

/* I7 */
.content1, .content2 {
      position: absolute;
      top: 28px;
      width: 45%;
      right: 0;
      bottom: 0;
      padding: 20px; 
	  border-width: 0 2px 2px 2px;
      border-style: groove;
	  overflow: hidden;
    }

/* I8 */
.content1 > * {
      opacity: 0;
      
      -webkit-transform: translate3d(0, 0, 0);
    
      -webkit-transform: translateX(-100%);
      -moz-transform:    translateX(-100%);
      -ms-transform:     translateX(-100%);
      -o-transform:      translateX(-100%);
      
      -webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
    }

.content2 > * {
      opacity: 0;
      
      -webkit-transform: translate3d(0, 0, 0);
    
      -webkit-transform: translateX(100%);
      -moz-transform:    translateX(100%);
      -ms-transform:     translateX(100%);
      -o-transform:      translateX(100%);
      
      -webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
    }

/* I9 */
[type=radio]:checked ~ label {
      border: none;
      z-index: 2;
    }

/* I10 */
[type=radio]:checked ~ label ~ .content1, [type=radio]:checked ~ label ~ .content2 {
      z-index: 1;
    }

/* I11 */
[type=radio]:checked ~ label ~ .content1 > *, [type=radio]:checked ~ label ~ .content2 > * {
      opacity: 1;
      
      -webkit-transform: translateX(0);
      -moz-transform:    translateX(0);
      -ms-transform:     translateX(0);
      -o-transform:      translateX(0);
    }


/* J Кнопки вверх-вниз */

/* J1 */
.go-up, .go-down {
 display: none;
 position: fixed;
 cursor: pointer;
 z-index: 9999;
 right: 1%;
 }

/* J2 */
.go-up { bottom: 230px; }
.go-down { bottom: 150px; }

/* J3 */
.go-up {
width: 80px;
height: 80px;
}

/* J4 */
.go-up:active {
width: 70px;
height: 70px;
}

/* J5 */
.go-down {
width: 80px;
height: 80px;
}

/* J6 */
.go-down:active {
width: 70px;
height: 70px;
}

/* K */
.closedatafield {
color: #ff6699;
}

.stickytext {
color: #66bbff;
}
Цвета style_cs.css
Код:
/* CS1 Background and text colours
-------------------------------------------------------------*/

html, body {
        background: url(http://s6.uploads.ru/2pZzJ.jpg) #553355 no-repeat;
background-size: 100% auto;
background-attachment: fixed;
height: auto;

}

#pun-title {
 background: url(http://s7.uploads.ru/e3wH8.gif) no-repeat center top;
}

#pun-title TABLE {
        background: url(http://s7.uploads.ru/VXeZG.gif) no-repeat center bottom;
background-size: 100% 50%;
}

#pun-title h1 {
        background-color: transparent;
}

#pun-title h1:before {
content: "Mag Mell";
display: block;
padding: 0;
border: none;
font-size: 6em;
font-family: 'MedievalScribishRegular', 'Comic Sans MS', cursive;
text-align: center;
color: #000000;
}

#pun-title h1:after {
content: "Равнина блаженства";
display: block;
padding: 0;
border: none;
font-size: 3em;
font-family: 'GothicRusMedium', 'Comic Sans MS', cursive;
text-align: center;
color: #ddee00;
}

#pun {
        background-color : transparent;
        padding:  0px 0px 0px 0px;
        color: #fff

}

/* CS1.1 */
.punbb .main .container,
.punbb .section .container,
.punbb .section .formal .container,
.punbb .formal fieldset,
#viewprofile li strong, #viewprofile li div,#setmods dd,
.punbb .info-box, .punbb #pun-main .info-box .legend {
  background-color: #111111;
  color: #fff;
  }

.punbb-admin #pun-admain .adcontainer {
  background-color: #000000;
  color: #000000;
}

/* CS1.2 */
.punbb .altstyle .post-body, .altstyle .post-box, .punbb .altstyle .post-links, .punbb .altstyle .post-author, .punbb .post .post-links ul, .punbb .post h3 span {
background-color: #8B795E !important;
box-shadow: inset 0px 0px 40px 0px #440011;
color: #fff;
}

.punbb .topicpost .post-body, .topicpost .post-box, .punbb .topicpost .post-links, .punbb .post-body, .post-box, .punbb .post-links, .punbb .topicpost .post-author, .punbb .post .post-author {
background-color: #8B7765;
box-shadow: inset 0px 0px 40px 0px #440011;
color: #fff;
}

.punbb .post, .punbb .post .container, .punbb .post h3 {
background: transparent;
}

.punbb td.tc2, .punbb td.tcr {
  background-color: #000000;
  color: #fff;
  }

.punbb td.tc3{
  background-color: #111111;
  color: #fff;
}

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

/* CS1.4 */
.punbb .modmenu .container {
  background-color: #000000;
  color: #fff;
box-shadow: 0 -7px 7px #8B668B, 0 7px 7px #8B668B, 23px 0 20px -23px #8B668B;
  }

/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
  background-color: #3a5a3e;
  color: #fff;
  }

.punbb .post h3 strong {
  font-size: 0.9em;
  color: #EBEBEB;
  text-decoration: underline
}

/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
  background-color: #8B8378;
box-shadow: inset 0px 0px 40px 0px #440011;
  color: #fff
  }

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

#pun-ulinks .container {
  background: #000000;
}

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

.punbb th {
  color:#FFEFDB;
  background: #8B3A3A;
}

.punbb textarea {
  background-color: #8B795E;
box-shadow: inset 0px 0px 40px 0px #440011;
  color: #fff
}

.punbb select, .punbb input {
background-color: #8B795E;
  color: #fff;
cursor: pointer;
}

.inputfield input {
cursor: text;
}

/* CS2 Border colours
-------------------------------------------------------------*/
#pun-title, #pun-navlinks {
        border-color: #8B668B;
}

#pun-ulinks .container {
        border-color:#8B668B;
}

.punbb .post .container {
  border-top-color: #fff;
}

/* CS2.1 */
.punbb .container, .post h3 {
  border-color: #8B668B #8B668B #8B668B #8B668B
  }

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

.punbb .category {
border-top: none;
}

.punbb .post h3,
.punbb .post h3 span {
  border-bottom: 1px solid #fff;
}

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

.punbb .main h2 {
border-top: none;
}

/* CS2.4 */
.punbb fieldset {
  border-color: #CD00CD;
  }

.punbb td, #viewprofile ul, #profilenav ul, .usertable table {
  border-color: #CD00CD;
  }

/* CS2.5 */
#pun-break2, #pun-break2 hr {
display: none;
}


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

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

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

.punbb .divider {
  border-color:  #ccbb00 #CD00CD #CD00CD #CD00CD;
  }

#pun-break4 {
  border-color: #8B008B #CD00CD #CD00CD #CD00CD;
  }

.punbb .formal fieldset .post-box, .punbb .info-box {
  border: 1px solid #334F37;
  }

li.pa-online {
  border-left-color: #CD00CD;
  }


/* CS3 Links
-------------------------------------------------------------*/

/* CS3.1 */
.punbb a, .punbb a:link, .punbb a:visited, .punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited {
  color: #fff;
  text-decoration: none;
  }

#pun-admain .adlabel a {
  color: #104E8B !important;
  text-decoration: none;
  }

.punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {
  color: #fff;
   text-decoration: none;
  }

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

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

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

#pun-pagelinks a:active, #pun-pagelinks a:focus {
  background-color: #333;
  color: #fff;
  }

#pun-ulinks a {
  text-decoration: none;

}

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

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

div.icon {
        background: url(http://s0.uploads.ru/mnJI7.gif) no-repeat;
background-position: 50% 50%;
}

tr.inew div.icon {
        background: url(http://s7.uploads.ru/zTPOA.gif) no-repeat;
background-position: 50% 50%;
}

tr.iclosed div.icon {
        background: url(http://s2.uploads.ru/9qpa7.gif) no-repeat;
background-position: 50% 50%;
}

tr.iredirect div.icon {
        background: url(http://s0.uploads.ru/cjdel.gif) no-repeat;
background-position: 50% 50%;
}

tr.isticky div.icon {
        background: url(http://s5.uploads.ru/z6ENf.gif) no-repeat;
background-position: 50% 50%;
}

.punbb .main h1 span, .punbb .main h2 span, #pun-stats h2 span {
        background: transparent url(http://st1.bbcorp.ru/img/Mybb_Lord_of_the_Rings/arrow.gif) no-repeat 0% 3px;
        padding-left: 16px;
}

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

td.tcr a{
        background: transparent url(http://st1.bbcorp.ru/img/Mybb_Lord_of_the_Rings/post.gif) no-repeat 0% 3px;
        padding-left: 20px;
}

#pun-stats ul.container {
        background: transparent url(http://savepic.net/4346239.gif) no-repeat 10px bottom;
        padding-left: 131px;
}

#pun-stats div.statscon {
        background-color: #000000;
box-shadow: 0 7px 7px #8B668B, 7px 0 7px #8B668B, 23px 23px 20px -23px #8B668B;
}

#pun-crumbs2 .container,
#pun-about .container {
        background-color: #000000;
}

#pun-main div.catleft, #pun-main div.catright {display: none}

#tieser-bottom {
box-shadow: 0 7px 7px #8B668B, 7px 0 7px #8B668B, 23px 23px 20px -23px #8B668B;
}


/* CS5 box-shadow
 -------------------------------------------------------------*/

.punbb .main .category .container table {
box-shadow: 0 7px 7px #8B668B, 7px 0 7px #8B668B, 23px 23px 20px -23px #8B668B;
}

#pun-crumbs1, #pun-about {
box-shadow:  0 7px 7px #8B668B, 23px 0 20px -23px #8B668B;
}

#pun-status .container, #pun-crumbs2 {
box-shadow:  0 -7px 7px #8B668B, 23px 0 20px -23px #8B668B;
}

#pun-announcement .container {
box-shadow:  0 7px 7px #8B668B,  0 -7px 7px #8B668B, 23px 0 20px -23px #8B668B;
}

/* CS6 Левая выдвижная панель
 -------------------------------------------------------------*/
/* ВНЕШНИЙ БЛОК */
#panel_left {
    background: url(http://s7.uploads.ru/GK49W.gif) no-repeat; /* цвет фона */
    color: #fff; /* цвет текста */
    }

/* СКРЫТЫЙ БЛОК */
#hidden_panel_left {
    background: url(http://s7.uploads.ru/58h2E.gif) no-repeat; /* цвет фона */
    color: #000; /* цвет текста */
    }

#text_panel_left, #text_panel_right {
background: transparent;
color: #DCDCDC;
}

/* CS6 Правая выдвижная панель
 -------------------------------------------------------------*/
/* ВНЕШНИЙ БЛОК */
#panel_right {
    background: url(http://s7.uploads.ru/W4meX.gif) no-repeat; /* цвет фона */
    color: #fff; /* цвет текста */
    }

/* СКРЫТЫЙ БЛОК */
#hidden_panel_right {
    background: url(http://s7.uploads.ru/VC3M5.gif) no-repeat; /* цвет фона */
    color: #000; /* цвет текста */
    }

/* CS7 Цвет текста при загрузке изображения */
.uploadifyQueueItem {
color: #000000;
}

/* CS8 Админка */
#pun-admain li.isactive a {
color: #00ccff !important;
}

#pun-admain a:hover {
color: #ff6699 !important;
}

#pun-admain a:visited {
color: #bb00ee;
}

.punbb-admin #pun-admain h2, .adcontainer, .adformal, #pun-admain fieldset {
box-shadow: 0 7px 7px #8B668B, 7px 0 7px #8B668B, 23px 23px 20px -23px #8B668B;
}


#pun-admain fieldset {
border-color: #8B668B !important;
}

/* CS9 Вкладки в Объявлении, Цвета и Фон */

/* CS9.1 */
.tab1 label, .tab2 label {
      color: black;
      background: #8B668B;      
    }

/* CS9.2 */
.content1, .content2 {
      background-color: #000000;
      color: #fff;
      border-color: #8B668B; 
      box-shadow: 0 7px 7px #8B668B, 0 -7px 7px #8B668B, 23px 0 20px -23px #8B668B;
    }
/* CS9.3 */

[type=radio]:checked ~ label {
      background-color: #000000;
      box-shadow: 0 -7px 7px #8B668B, 23px 0 20px -23px #8B668B;
      color: #fff;
    }

/* CS10 Кнопки Вверх-Вниз, картинки */

/* CS10.1 */
.go-up {
background: url(http://s6.uploads.ru/g0oXc.gif) no-repeat;
}

/* CS10.2 */
.go-up:active {
background: url(http://s6.uploads.ru/cMjNL.gif) no-repeat;
}

/* CS10.4 */
.go-down {
background: url(http://s6.uploads.ru/aiSYR.gif) no-repeat;
}

/* CS10.3 */
.go-down:active {
background: url(http://s7.uploads.ru/Ue9J4.gif) no-repeat;
}
HTML верх
Код:
<!--Левая боковая панель-->
<div id="panel_left">
    <div id="hidden_panel_left">
         <div id="text_panel_left">
        Содержание блока да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да
         </div>
    </div>
</div>

<!--Правая боковая панель-->
<div id="panel_right">
    <div id="hidden_panel_right">
         <div id="text_panel_right">
         Содержание блока да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да да
         </div>
    </div>
</div>
HTML низ
Код:
<!--Кнопки в верх в низ-->
<div class="go-up" title="Вверх" id='ToTop'></div>
<div class="go-down" title="Вниз" id='OnBottom'></div>
<script type="text/javascript">
  $(function(){
 if ($(window).scrollTop()>="250") $("#ToTop").fadeIn("slow")
 $(window).scroll(function(){
  if ($(window).scrollTop()<="250") $("#ToTop").fadeOut("slow")
   else $("#ToTop").fadeIn("slow")
 });

 if ($(window).scrollTop()<=$(document).height()-"999") $("#OnBottom").fadeIn("slow")
 $(window).scroll(function(){
  if ($(window).scrollTop()>=$(document).height()-"999") $("#OnBottom").fadeOut("slow")
   else $("#OnBottom").fadeIn("slow")
 });

 $("#ToTop").click(function(){$("html,body").animate({scrollTop:0},"slow")})
 $("#OnBottom").click(function(){$("html,body").animate({scrollTop:$(document).height()},"slow")})
});
</script>

<!--Куки для вкладок-->
<script type="text/javascript">
function setcOOkie(a,b,c) {if(c){var d = new Date();d.setDate(d.getDate()+c);}if(a && b) document.cookie = a+'='+ encodeURIComponent(b) +(c ? '; expires='+d.toUTCString() : '');else return false;}
function getcOOkie(a) {var b = new RegExp(a+'=([^;]){1,}');var c = b.exec(document.cookie);if(c) c = c[0].split('=');else return false;return c[1] ? decodeURIComponent(c[1]) : false;}
var radio1 = getcOOkie('radio1');
var radio2 = getcOOkie('radio2');
if(radio1)$('input[type="radio"][name="tab-group-1"]').eq(+radio1).click();
if(radio2)$('input[type="radio"][name="tab-group-2"]').eq(+radio2).click();
$('input[type="radio"][name="tab-group-1"]').change(function() {
  var i = $('input[type="radio"][name="tab-group-1"]').index(this)
  setcOOkie('radio1',''+i,30)
});
$('input[type="radio"][name="tab-group-2"]').change(function() {
  var i = $('input[type="radio"][name="tab-group-2"]').index(this)
  setcOOkie('radio2',''+i,30)
});
</script>
Объявление
Код:
<div class="tabs">
  <div class="tab2">
       <input type="radio" id="tab-4" name="tab-group-2" checked>
       <label for="tab-4"><span>Закладка №1</span></label>
       
       <div class="content2">
           <p>Содержание закладки №1</p>
       </div> 
   </div>
    
   <div class="tab2">
       <input type="radio" id="tab-5" name="tab-group-2">
       <label for="tab-5"><span>Закладка №2</span></label>
       
       <div class="content2">
           <p>Содержание закладки №2</p>
           
           <img src="http://placekitten.com/200/100">
       </div> 
   </div>
    
    <div class="tab2">
       <input type="radio" id="tab-6" name="tab-group-2">
       <label for="tab-6"><span>Закладка №3</span></label>
     
       <div class="content2">
           <p>Содержание закладки №3</p>
           
           <img src="http://placedog.com/200/100">
       </div> 
   </div>

 <div class="tab1">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1" class="active"><span>Закладка №1</span></label>
       
       <div class="content1">
           <p>Содержание закладки №1</p>
       </div> 
   </div>
    
   <div class="tab1">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2"><span>Закладка №2</span></label>
       
       <div class="content1">
           <p>Содержание закладки №2</p>
           
           <img src="http://placekitten.com/200/100">
       </div> 
   </div>
    
    <div class="tab1">
       <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3"><span>Закладка №3</span></label>
     
       <div class="content1">
           <p>Содержание закладки №3</p>
           
           <img src="http://placedog.com/200/100">
       </div> 
   </div>
</div>

Исходники (картинки):

Исходники (картинки)

http://s6.uploads.ru/2pZzJ.jpg
http://s7.uploads.ru/e3wH8.gif
http://s7.uploads.ru/VXeZG.gif
http://s6.uploads.ru/g0oXc.gif
http://s6.uploads.ru/cMjNL.gif
http://s6.uploads.ru/aiSYR.gif
http://s7.uploads.ru/Ue9J4.gif
http://s7.uploads.ru/58h2E.gif
http://s7.uploads.ru/GK49W.gif
http://s7.uploads.ru/VC3M5.gif
http://s7.uploads.ru/W4meX.gif
http://s0.uploads.ru/mnJI7.gif
http://s7.uploads.ru/zTPOA.gif
http://s2.uploads.ru/9qpa7.gif
http://s0.uploads.ru/cjdel.gif
http://s5.uploads.ru/z6ENf.gif

Скриншот:

Скриншоты

http://s9.uploads.ru/t/XuhCo.gif
http://s8.uploads.ru/t/P985m.gif
http://s8.uploads.ru/t/Di8Xd.gif