Futura: каталог аниме форумов

Объявление

SECTOR-15
2022 г. Швейцария. Город Монтрё, ныне Мардо. Мир недалекого будущего. Научные открытия, технологии, достижения цивилизации – каждый месяц в мире становится известно о том или ином новейшем достижении современности. Городок Мардо шагает гораздо быстрей всех остальных своих соседей из других стран.
Бесконечное приключение
Сто двадцать девять лет назад известные земли этого мира покорились уникальному в своем роде существу именовавшему себя Демоном. Более ста лет находились они под узурпаторской властью демона Даха`ага. Приспешники и создания Даха`ага, именуемые низшими демонами, мучали и истязали покоренные народы. Но в один день, небо осветила победоносная вспышка.
07ARK: Oberon
Общество будущего сделало своей целью очиститься от тысячелетий кровавой истории. Равные возможности и всеобщая справедливость - таков курс нового человечества. Человечество бросило вызов даже той несправедливости, которая зависела исключительно от случая. Неизлечимо больные от рождения, жертвы несчастных случаев - политика нового общества не позволяла просто развести руки и сказать: "Прости, но такова жизнь!" Именно для них был создан проект "Ковчег".
Shinsei School
Хоккайдо – самый северный остров Японии, очаровывающий красотой заснеженных горных вершин, диких лесов и скованных льдами берегов с обнаженными ветром и водой скалами. Именно здесь, где богатейшая природа поражает воображение разнообразием форм и буйством красок, вдали от шумных мегаполисов и мирской суеты, было основано уникальное в своем роде учебное заведение – школа Shinsei.
30.06 В связи с отсутствием Чибимун примерно до сентября, главной по тарелочкам пока будет урса (⁄ ⁄•⁄ω⁄•⁄ ⁄) Так что функционируем в обычном режиме, не забывая про тему исправлений!
12.01 С новым годом, ребятки! немного юбилеев, новых крутых дизайнов и мандаринок в ваш дом ヽ(・∀・)ノ
17.10 Чибимун тут болела серьезно, периодами училась и впадала в реальную жизнь, а на ролевых все так же ничего не меняется. Но вы не теряйте, котики!
27.08 Новый дизайн, спасибо великолепной полтергейст ♥
18.08 Чиби уходит в отпуск до 24 числа (даже заходить не будет возможности), так что не грустите и новые ролочки не делайте :")
07.05 Светло, розово (и немного непривычно), но все по-старому футурно, не переживайте! А за дизайн спасибо большое cannibals circus. Надеюсь, он растопит ваши холодные сердца и подарит чуточку тепла и весны вам, господа любители посплетничать ♥
02.04 Стряхну пыль с колонки новостей (тут должна быть шутка про то, что какая активность на аниме сообществе, такие и мы), напомню неравнодушным про тему исправления в каталоге, где Чибимун горячо желает видеть ссылки на новые форумы, поскольку сама не успевает все отслеживать. Спасибо, что остаетесь с нами, ребятки, даже в такие тяжелые времена. Всех люблю, не стесняйтесь писать, обращаться с вопросами и проявлять признаки жизни ♥
Футура — это форум поддержки аниме ролевых. Мы оказываем помощь на различных уровнях для различных категорий людей: от рядовых игроков до администрации всевозможных проектов. Футура объединяет все форумы аниме тематики и их игроков в одном месте, так что мы всегда будем вам рады!

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Futura: каталог аниме форумов » Дизайны и верстка » Структура для дизайна или делаем свой стиль (CSS)


Структура для дизайна или делаем свой стиль (CSS)

Сообщений 1 страница 5 из 5

1

При использовании данной структуры большая просьба не убирать копирайты из стиля. В вашем копирайте/футере указывать адрес Футуры или ник Чиби необязательно, но последней точно будет очень приятно :з Все вопросы и проблемы решаются в этой теме.

С чего начать?
1. Для начала нужно обязательно ознакомиться с основами в первом сообщении этой темы, там прописаны основные свойства, которые задаются элементам.
2. Сокращенные названия: "структура style.css" - первое окно; "цвета style_cs.css" - цвета, второе окно.
3. Теперь, чтобы не было непоняток, пройдемся по основным названиям, с которыми может возникнуть путанница

верхняя часть

http://savepic.net/6518920.jpg
http://savepic.net/6518920.jpg

1 - шапка
2 - основной фон
3 - верхний фон

4 - меню навигации
5 - пользовательские ссылки
6 - категория
7 - тело
8 - название форума
9 - описание форума

нижняя часть

http://savepic.net/6490248.jpg
http://savepic.net/6490248.jpg

2 - основной фон
10 - нижний фон
11 - копирайт/футер

+1

2

Структура style.css

Код:
/* structure by futura.rusff.ru
-------------------------------------------------------------*/

/*************************************************************
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%;}

/* 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%;}

/* A3.2 */
.punbb {
  font: normal 68.75% verdana;}

/* 3.3 */
.punbb textarea, .punbb input, .punbb select, .punbb optgroup {
  font: 1em verdana, arial, helvetica, sans-serif}
  .punbb input, .punbb select {padding: 2px;}

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

/* A3.5 */
.punbb h1 span, .punbb h2 span, .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: normal}

/* 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
-------------------------------------------------------------*/

/* A5.1 */
#pun {
  margin: 0px auto auto auto;
  width: 945px;}

/* A5.2 */
.punbb { 
  width: 910px; 
  position: relative;
  height: auto;
  margin-left: 15px;}

/* A5.3 */
#pun-redirect, #pun-maint {
  margin: 0;
  width: 100%;
  height: 100%;
  float: none; 
  top: 0 !important;
  left: 0 !important; }

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

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

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

/* 5.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;
  border-width: 0px 0px 0px 0px}

/* A5.9 */
.punbb .container {
  border-style: none;
  border-width: 0px;}

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


/*************************************************************
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;
  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 0.2em 1.8em;
  padding: 1em;}

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

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

/* B2.1 */
.punbb .info-box {
  padding: 1.1em 1.7em 1em 1.7em;
  border-style: none;
  border-width: 0px;
  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;}

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

/* B3.4 */
.linkst .postlink {
  position: absolute;
  top: -4.5em;
  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: none;
  border-width: 0px;
  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 12em 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; }

/* 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: left;
  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%; }

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

/* 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: none;
  border-width: 1px 0 0 1px;
  padding: 0.8em 1em;}

/* C2.12 */
.punbb .main th {
  border-style: none;
  border-width: 0 0 0 1px;
  padding: 0.4em 1em 0.4em 1em; }

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

/* C2.14 */
.punbb tbody.hasicon td.tcl {
  margin-right: 15px;}

/* C2.15 */
.punbb div.icon {
    float: left;
    display: block;}

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

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

/* C3.2 */
.punbb .post h3 {
  border-style: none;
  border-width: 0px; }

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

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

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

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

/* C3.7 */
.pa-author {
  font-size: 1.1em;
  font-weight: bold;
  text-align: center;}

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

/* C3.9 */
li.pa-title {
  padding-bottom: 0.4em;}

li.pa-online {
  line-height: 0.8em;
  padding-left: 0.4em;
  margin-top: 0.7em;}

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

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

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

/* C3.14 */
.punbb .post-links {
  border-left-style: solid;
  border-left-width: 1px;}

/* C3.15 */
.punbb .post-links ul {
  padding: 0 1em 0 0;
  height: 2em;
  line-height: 2em;
  border-top-style: dashed;
  border-top-width: 1px;
  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;}


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

/* C4.1 */
.punbb .modmenu .container {
  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;}

/* 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 15px -1em 4px; }

/* 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: none;
  border-width: 0px;}


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

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

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

/* D1.2 */
#pun-title h1 {
  display : block;
  height : 40px;
  padding: 2em 1em 0 1em; }

/* D1.3 */
#pun-title .container {
  border-style: none; }

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

#pun-title table {
  border: none;
  height: 400px;
  width: 100%;}

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

/* D2.1 */
#pun-pagelinks {
  position: absolute;
  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, #pun-navlinks .container {
  border-style: none;
  border-width: 0;
  margin: 0;}

/* D3.2 */
#pun-navlinks .container {
  padding: 0.8em 1em;
  text-align: center;}

/* D.3 */
#pun-navlinks li {
  display: inline;
  padding-right: 1em;}

/* D3.4 */
#pun-navlinks li a {
  font-size: 1.1em;}

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

/* D4.1 */
#pun-ulinks  {
  padding-bottom: 1px;}

/* D4.2 */
#pun-ulinks .container {
  border-top: none;
  text-align: center;
  padding: 0em 1em;}

/* D4.3 */
#pun-ulinks li, #pun-ulinks li a {
  display: inline;
  border-left-style: none;
  border-left-width: 0px;
  white-space: nowrap;
  padding-left: 3px;}

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

/* 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 1.2em 1em;
  font-size: 1.1em; }

/* D5.6 */
#pun-break1 {
  margin: 0 1em;
  border-style: none none;
  border-width: 0px 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 none none;
  border-width: 0 0 0px 0;
  position: relative;
  display: none; }

/* D6.2 */
#pun-announcement h2 span {
  display: block;
  padding: 1em 0 0.8em 0;
  border-bottom-style: solid;
  border-bottom-width: 1px; }

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

/* 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: 1px; }

/* 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%;
  margin-bottom: 4px; }

/* D8.6 */
#pun-crumbs2 {
  font-weight: bold;
  overflow: hidden;
  margin-bottom: 0px;
  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: none none;
  border-width: 0px 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; }

.pl-share { display: none !important; }
li.reports { display: none !important; }
p.lastedit {display:none;}
/* structure by futura.rusff.ru
-------------------------------------------------------------*/

Что нужно знать обязательно?

/* A5.1 */
#pun {
  margin: 0px auto auto auto;
  width: 945px;}

/* A5.2 */
.punbb {
  width: 910px;
  position: relative;
  height: auto;
  margin-left: 15px;}


/* A5.1 */ - ширина тела форума (такой же будет ширина вашей картинки, они обязательно должны совпадать)
width: 945px; - ширина в пикселях

/* A5.2 */ - ширина текста в теле форума, иными словами не сам форум, а текст в нем. значение ширины обязательно должно быть меньше, чем в 5.1, иначе текст будет просто вылезать за границы.
width: 910px;  - ширина в пикселях
margin-left: 15px; - отступ от левого края

/* D3.2 */
#pun-navlinks .container {
  padding: 0.8em 1em;
  text-align: center;}


/* D4.1 */
#pun-ulinks  {
  padding-bottom: 1px;}


/* D3.2 */ - расположение меню навигации
/* D4.1 */ - расположение пользовательских ссылок
регулируется с помощью:
   position: relative; - добавляем для блока
   top: -400px; - в данном случае меню поднимется вверх на 400 пикселей, положительное значение опустит вниз.

/* A3.5 */
.punbb h1 span, .punbb h2 span, .punbb legend span {
  font-size: 1.1em;}

/* A3.5 */ - расположение текста в категориях
регулируется с помощью:
   position: relative; - добавляем для блока
   top: 40px; - в данном случае текст опускается вниз на 40 пикселей

0

3

Цвета style_cs.css

Код:
/* structure by futura.rusff.ru
-------------------------------------------------------------*/

/* CS1 Основа
-------------------------------------------------------------*/

/* CS1.1 Фон */ 
body {
  background: url("верхний фон") repeat-x top center, url("нижний фон") repeat-x bottom center, url("основной фон") repeat;}

#pun {
  background: url("фон тела форума") repeat-y;}

/* CS1.2 Шапка */
#pun-title.section {
  background: transparent url("картинка шапки") top center scroll no-repeat; 
  height: 307px;
  width: 952px; 
  margin-top: 0px;
  margin-left: 2px;}

/* CS1.3 Копирайт */
#copyright {
  text-align: center;
  background: url("картинка копирайта") scroll center; 
  width: 960px; 
  height: 111px;
  margin-left: 2px;}

#html-footer {
  margin: 0px;
  text-align: center; }

/* CS2 Форум
-------------------------------------------------------------*/

/* CS2.1 Текст на форуме */
.punbb .main .container, .punbb .post .container, .punbb .post h3, #pun-title, #pun-title .container, .punbb .modmenu .container, .punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span, .punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl, #pun-navlinks .container, #pun-status .container, #pun-crumbs1 p.container, #pun-stats .container, #pun-about .container, #pun-crumbs2 .container, .linkst .pagelink, .linksb .pagelink {
  color: #060200;
  background-color: transparent;}

/* CS2.2 Категории */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2  {
  background: url("фон категории") no-repeat left;
  height: 70px;
  margin-left: 6px;
  font-style: normal;
  text-align: center;
  color: #212121;
  font-size: 12px;}

/* CS2.3 Цитата*/
.punbb .quote-box {
  background-image: url(фон цитаты);
  color: #060200;
  border: solid;
  border-width: 0px 0px 0px 4px;
  border-color: #0A0F0E;}

/* Код */
.punbb .code-box {
  background-image: url(фон кода);
  color: #060200;}

/* Форма ответа */
.punbb textarea, .punbb select, .punbb input, .punbb .button {
  background-image: url(фон формы ответа);
  color: #060200;}

/* CS2.4 Прокрутка */
::-webkit-scrollbar {width: 9px; height: 5px; background-color: #AAB8AD;}  
::-webkit-scrollbar-thumb {background-color: #0A1716;}
::-webkit-scrollbar-thumb:active {background: #CE621A;}

/* выделенный текст */
::selection {background: #1C6259; color: #C3CBC6;}

/* CS2.5 Переадресация */
#pun-redirect { 
  background: url("общий фон") repeat; 
  position: fixed;
  text-align: center;
  font-size: 12px;}

#pun-redirect .main-title {
  margin-bottom: 0px!important;
  text-align: center;
  margin-top: 10px;
  background: url(фон заголовка) center no-repeat; }

/* CS2.6 Профиль */
 /* Фон */
.punbb .post .post-author {
  text-align: center;
  background: url(верхний фон) top center no-repeat, url(нижний фон) bottom center no-repeat, url(основной фон) repeat-y;
  width: 200px;
  margin-top: -20px;
  padding-top: 1px;
  margin-left: 9px;}

/* меняем ссылку ника */
li.pa-author a, li.pa-author {
  color: #899B8D !important;
  font: 12px 'Calibri';}

li.pa-author a:hover, li.pa-author a:focus, li.pa-author a:active {
  color: #AAB8AD !important;}

/* CS2.7 Форумы */
/* описание форумов */
.tclcon {
  font-size: 12px;
  padding-left: 3px;
  color: #362F1B;}

/* название форумов */
#pun-index .tcl h3 a {
  font-size: 12px;
  font-style: normal;
  text-align: center;}

/* CS2.8 Окна, кнопки и прочее */
/* Окно репутации */
.punbb-admin #pun-admain .adcontainer, #pun-reputation div.inner div.container, #pun-report div.inner div.container , #pun-popup_awards div.inner div.container {
  color: #060200;
  background: url(фон) repeat;}

#pun-reputation .tc2 textarea {width: 600px !important;}
#pun-reputation .tcl {width: 80px !important;}
#pun-reputation h1 {
   background: url(фон) repeat;
   text-align: center; width: 757px; height: 15px; margin-left: 0px; padding-top: 20px !important;}

/* Настройки кнопок "отправить", "посмотреть" и др. */
#pun-main .formsubmit input {
  background: #FFFFFF;
  padding: 5px;
  border: none !important;
  text-transform: lowercase;
  margin-top: -20px !important;}

#pun-main .formsubmit input:hover {
  background: #FFFFFF;}

/* Настройки выпадающих списков */
.punbb input, .punbb select {
  background-color: #CFCFCF;
  color: #002C1D;
  padding: 2px;}

/* Окна в форме ответа */
#size-area, #font-area, #color-area, #smilies-area, #keyboard-area, #imageup-area, #font-area, #size-area, #color-area, #smilies-area, #image-area, #imageup-area, #imageattach-area, #keyboard-area, #video-area, #table-area, #addition-area {
  background: url(фон) repeat;
  color: #7e7e7e;
  padding: 5px;
  border: solid #c4c4c4 1px !important;}

/* Линия разделитель */
hr {
  color: #1C6258;
  background-color: #1C6258;
  height: 2px;
  border: none;}

/* CS3 Рамки
-------------------------------------------------------------*/

.punbb .post-body, .post h3, #pun-title, .punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info, .punbb .category, .punbb .post, #pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2, .punbb td, .punbb fieldset, #viewprofile ul, #profilenav ul, .punbb .post .post-body, .punbb .post h3 span, .post-links ul, .post-links, .usertable table, #pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span, #pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend, .punbb .divider, .punbb .formal fieldset .post-box, .punbb .info-box, .punbb-admin #pun-admain .adcontainer {
  border-color: transparent;}

/* CS4 Ссылки
-------------------------------------------------------------*/

/* CS4.1 Обычные ссылки*/
.punbb a, .punbb a:link, .punbb a:visited, .punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited, .punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {
  text-decoration: none;
  color: #4D5953;}

.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: #253930;}

/* CS4.2 Ссылки в меню навигации */
#pun-navlinks a {
  color: #899B8D;
  font-weight: normal;
  font-style: normal;}

#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active, #pun-pagelinks a:active, #pun-pagelinks a:focus {
  color: #AAB8AD;}

/* CS4.3 Пользовательские ссылки */
#pun-ulinks a {
 color: #BDCAC0;}

#pun-ulinks a:hover, #pun-ulinks a:focus, #pun-ulinks a:active {
  color: #D3E2D6;}

/* CS5 Иконки сообщений
 -------------------------------------------------------------*/

/* Старые */
.punbb table Div.icon {
  float: left;
  display: block;
  width: 47px;
  height: 35px;
  background-image: url(старые);
  background-repeat: no-repeat;
  position: relative;
  margin-left: 5px;
  margin-top: 0px;
  margin-right: 5px;}

/* Новые */
TR.inew Div.icon {
  background: url(новые) no-repeat;}

/* Важно */
TR.isticky Div.icon {
  background: url(важные) no-repeat;}

/* Закрыто */
TR.iclosed Div.icon {
  background: url(закрытые) no-repeat;}


/*CS6 Таблицы и прочее
 ---------------------------------*/


/* structure by futura.rusff.ru
-------------------------------------------------------------*/

HTML-низ, самый низ

Код:
<! ВСЕ КОДЫ И БАННЕРЫ СТАВИТЬ ВЫШЕ КОПИРАЙТА --------------------------->
<div id="copyright">
</div>
<!-------------------------------------------------------->

/* CS1 Основа */

/* CS1.1 Фон */
body - задает задний фон, здесь достаточно просто вставить свои картинки. Фон чаще всего задается текстурами, поэтому необязательно делать размер картинки 2000 на 2000, лучше, если вы сделаете небольшую картинку (например, 50-200 пикселей), а она уже автоматически будет размножаться. Главное - следите за стыками. Абсолютно также поступайте с верхним и нижним фоном, но в высоту они должны быть равны исходным на макете, ширина же должна быть небольшой.
#pun - задет фон тела форума, не забываем про пункты /* A5.1 */ и /* A5.2 */, которые зададут ему ширину. Картинка должна быть в ширину равна исходной на макете (включая рамку), в высоту стараемся делать ее как можно меньше, но опять следим за стыками.

/* CS1.2 Шапка */
background: transparent url("картинка шапки") top center scroll no-repeat; - картинка шапки. Делается такой же ширины, как тело форума, если не выходит за него. Если шапка "большая", т.е. выходит за рамки тела форума, обрезается до края элемента, который отличается от фона. Сам же фон размножаем в первом пункте. Именно верхний фон в CS1.1 будет задавать фон под шапкой, так что не забудьте его замкнуть.
height: 307px; - высота изображения
width: 952px; - ширина изображения
margin-left: 2px; - двигаем шапку вправо (отрицательное значение подвинет ее влево), чтобы стыковать с телом форума. советую сначала настроить фон и тело, а потом уже двигать шапку.

/* CS1.3 Копирайт */
background: url("картинка копирайта") scroll center;  - картинка копирайта задается как и шапка, нижний фон в CS1.1 будет отвечать за фон под копирайтом.
width: 960px; - ширина изображения
height: 111px; - высота изображения
margin-left: 2px; - двигаем копирайт вправо (отрицательное значение подвинет влево), чтобы стыковать с телом форума. советую сначала настроить фон и тело, а потом уже двигать копирайт.

/* CS2 Форум */

/* CS2.1 Текст на форуме */
color: #060200; - цвет текста на всем форуме

/* CS2.2 Категории */
background: url("фон категории") no-repeat left; - фон категории, должен соответствовать ширине картинки тела форума.
height: 70px; - высота картинки
margin-left: 6px; - двигает картинку вправо (отрицательное - влево)
margin-top: 1px; - двигает картинку вниз (отрицательное - вверх)
text-align: center; - позиция текста
color: #212121; - цвет текста
font-size: 12px; - размер шрифта
здесь и далее все прочие преобразования текста и шрифта можно задать самостоятельно (смотри пункт 1 в первом сообщении темы).

/* CS2.3 Цитата*/
background-image: url(фон цитаты); - картинка цитаты (размножается автоматически, поэтому желательно картинку делать небольшую по размерам)
color: #060200; - цвет текста в цитате
border: solid; - рамка отображается
border-width: 0px 0px 0px 4px; - в примере задана левая рамка в 4 пикселя, другие рамки отображаться не будут (порядок значений такой: верх право низ лево)
border-color: #0A0F0E; - цвет рамки

/* Код */ и /* Форма ответа */ задаются по одному принципу
background-image: url(фон кода); - картинка
color: #060200; - цвет текста

/* CS2.4 Прокрутка */
::-webkit-scrollbar {width: 9px; height: 5px; background-color: #AAB8AD;} - задается ширина прокрутки, ширина горизонтальной прокрутки и цвет фона
::-webkit-scrollbar-thumb {background-color: #0A1716;} - цвет ползунка прокрутки
::-webkit-scrollbar-thumb:active {background: #CE621A;} - цвет при нажатии мышкой

/* выделенный текст */ - оформление текста при выделении его мышкой
background: #1C6259; - цвет фона
color: #C3CBC6; - цвет текста

/* CS2.5 Переадресация */ - в структуре дан простейший вариант переадресации, для людей, которые не делают ее отдельно, но вы всегда можете настроить ее как пожелаете
#pun-redirect задает фон всей страницы
#pun-redirect .main-title задает фон и стиль заголовка, обычно стиль шрифта наследуется от категорий

/* CS2.6 Профиль */ - приведен простейший вариант оформления профиля, все прочие коды будут даны в следующем сообщении
/* Фон */
text-align: center; - расположение текста в профиле
background: url(верхний фон) top center no-repeat, url(нижний фон) bottom center no-repeat, url(основной фон) repeat-y; верхний и нижний фоны не размножаются никак, поэтому высота и ширина должны соответствовать тем, что есть на макете. основной фон профиля размножается только по вертикали, т.е. картинка должна соответствовать в ширину значению ниже (обрезается строго по краям рамки, не заходя на общий фон тела), а высота должна быть как можно меньше.
width: 200px; - ширина всего профиля
margin-top: -20px; - отступ вверх (положительное - вниз)
padding-top: 1px; - отступ текста профиля от верхнего края (двигает текст вниз, отрицательное - вверх)
margin-left: 9px; - отступ вправо (отрицательное - влево)

/* меняем ссылку ника */
  color: #899B8D !important; - задает цвет ссылки ника в обычном состоянии
  font: 12px 'Calibri'; - устанавливает размер шрифта и название

li.pa-author a:hover, li.pa-author a:focus, li.pa-author a:active {
  color: #AAB8AD !important; - цвет ссылки при наведении курсора

/* CS2.7 Форумы */ - дан простейший вариант оформления
/* описание форумов */
font-size: 12px; - размер шрифта
padding-left: 3px; - отступ слева
color: #362F1B; - цвет текста
кроме того, можно задать width (ширину) окна, text-align (выравнивание текста) и прочие параметры шрифта и текста

/* название форумов */
font-size: 12px; - размер шрифта
тут же задаются и все прочие параметры шрифта и текста

/* CS2.8 Окна, кнопки и прочее */
/* Окно репутации */ - отвечает за окно, которое выскакивает, когда мы изменяем репутацию (где можно написать свой комментарий), и подобные ему
color: #060200; - цвет текста
background: url(фон) repeat; - фон внутри него

/* Настройки кнопок "отправить", "посмотреть" и др. */ - отвечает за кнопки "отправить" и "посмотреть"
  background: #FFFFFF; - фон
  color: #7e7e7e; - цвет текста
  border: solid #c4c4c4 1px !important; - рамка

  #pun-main .formsubmit input:hover - кнопки при наведении курсора

/* Настройки выпадающих списков */ - настройка выпадающих списков
background-color: #CFCFCF; - фон
color: #002C1D; - цвет текста

/* Окна в форме ответа */ - выпадающие окна в форме ответа вроде шрифта, его размера и т.д.
  background: url(фон) repeat; - фон
  color: #7e7e7e; - цвет текста
  border: solid #c4c4c4 1px !important; - рамка

/* Линия разделитель */ - настройка линии разделителя [hr], цвет прописывается два раза для разных браузеров
  color: #1C6258; - цвет линии
  background-color: #1C6258; - цвет линии

/* CS4 Ссылки */

в данном разделе всегда первый код задает обычное состоянии ссылки, а второй - при наведении курсора.
/* CS4.1 Обычные ссылки*/ - стиль всех ссылок на форуме
/* CS4.2 Ссылки в меню навигации */ - форум, участники и т.д.
/* CS4.3 Пользовательские ссылки */ - активные темы, новые сообщения, темы без ответов и т.д.

/* CS5 Иконки сообщений */
/* Старые */ - задает не только иконки старых сообщений, но и стиль всех иконок в целом, далее ставятся только картинки
float: left; - расположение иконок, если поставить right, то иконки окажутся справа от описания форумов
width: 47px; - ширина изображений
height: 35px; - высота изображений
background-image: url(старые); - самой изображение
margin-left: 5px; - подвинет вправо (отрицательно - влево)
margin-top: 0px; - подвинет вниз (отрицательное - вверх)
margin-right: 5px; - подвинет текст описания от иконки направо

0

4

Дополнительные селекторы
находятся либо в первом окне стиля (структуры), либо прописываются дополнительно
здесь прописаны все возможные варианты

п.1 Главная страница

• Убирает слово награды из меню

#pun-navlinks #navawards {
  display: none;}


• Привет, Гость! Войдите или зарегистрируйтесь

/* D5.2 */
#pun-status .container {...}


• Название вашего форума строчкой ниже

/* D5.5 */
#pun-crumbs1 p.container {...}


• Строка "форум тем сообщений последнее сообщение" (под категориями)

.punbb th {
background: transparent url("фон");
color: #цвет;}


• Картинка в статистику

#pun-stats ul.container {
  background: url(картинка) no-repeat;
  padding-left: 10px;
  padding-bottom: 20px;}


• Название вашего форума внизу

/* D8.7 */
#pun-crumbs2 .container {...}


• Строка "Рейтинг форумов | Создать форум бесплатно © 2007–2014 «Quadro.Boards» LLC" и подобные

/* D8.4 */
#pun-about .container {...}


п.2 Профиль
.pa-author {...} - ник
.pa-title {...} - статус
.pa-avatar {...} - аватар
.pa-posts {...} - сообщений
.pa-reputation {...} - репутация
.pa-ip {...} - ip
.pa-online {...} - активен

п.3 Прочее

• Полоска, разграничивающая пост и подпись

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


• Полоса между постами

/* C3.1 */
.punbb .post .container {
border-style: none none solid none;
  border-width: 2px;
  border-color: #000000;
  padding-bottom: 1px;}

0

5

Основные дополнительные скрипты

- Замена форум, участники и т.д на картинки
- Стрелки вверх-вниз
- Своя картинка в каждую категорию
- Пиар-вход
- Выделить код

Любой объект в шапке
в цвета нужно дописать блок (вместо dop1 можно использовать любое название на латинице) и задать все его значения (в т.ч. здесь удобно прописать отображение текста, шрифта и т.д.)

#dop1 {
display: block;
position: absolute;
margin-top: 236px;
margin-left: 15px;}

margin-top: 236px; - отступ сверху (двигает блок вниз)
margin-left: 15px; - отступ слева (двигает блок вправо)

в html-вверх размещаем наш блок

<div id="dop1">
здесь любая ваша информация
</div>


количество подобных блоков не ограничено, главное - для каждого задавать свое название

0


Вы здесь » Futura: каталог аниме форумов » Дизайны и верстка » Структура для дизайна или делаем свой стиль (CSS)


Рейтинг форумов | Создать форум бесплатно © 2007–2017 «QuadroSystems» LLC