/*Стили для кнопки "Наверх" - начало*/
#dvr-toTop {
    width:50px;                             /*Ширина кнопки*/
    height: 50px;                           /*высота кнопки*/
    border-radius: 5px;                     /*Тут понятно*/
    background: rgba(0, 0, 0, 0.7);   /*цвет кнопки и степень её прозрачности*/ 
    position: fixed;                        /*Фиксируем её на одном месте*/
    bottom: 10px;                           /* отступ кнопки от нижнего края страницы*/
    right: 10px;                            /* отступ кнопки от правого края страницы*/
    cursor: pointer;                        /*Тут понятно*/
    display: none;                          /*Вначале кнопка скрыта, как она проклевывается пока не понял, а момент её проклёвывания задается в соответстыующем коде 'javascript'*/      
    z-index: 9999;
}

.toTop-text {                 
    font-family: verdana;                   /*Тип шрифта текста на кнопке*/
    font-size: 11px;                        /*Размер шрифта текста на кнопке*/
    text-align: center;                     /*Выравниваем текст на кнопке по центру*/
    padding-top: 38px;                      /*Задаём отступ сверху для текста кнопки*/
    color: #777;                            /*Задаём цвет шрифта для текста кнопки*/
    display: none;                          /*ВНИМАНИЕ - делаем надпись невидимой, и если она понадобиться, то убираем это свойство */
}

.fa-angle-double-up {                       /*Задаём класс двойных стрелок для шрифта 'Font Awesome'*/
    color: rgba(147, 143, 140, 1);           /*Задаём цвет двойных стрелок для шрифта 'Font Awesome' и степень их прозрачности*/
    font-size: 24px !important;             /*Далее и до конца - все понятно*/
    position: absolute;
    top: 12px;
    left: 17px;
}
/*Стили для кнопки "Наверх" - конец*/


/*Стили для слайд-шоу на главной странице - начало*/
/*Пока некоторые свойства скрыл, что бы слайдшоу развернулось на весь экран*/
.slideshow {
    /*border: 3px solid #191718;
    margin: 0 20px;
    padding: 20px;
    background: #2b2b2b;
    border-radius: 10px;*/
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(225, 225, 225, 0.15) inset, 0 0 2px rgba(225, 225, 225, 0.1) inset;
}
/*Стили для слайд-шоу на главной странице - конец*/



/*----------------------------- button-03 - начало -------------------------------*/
.color-default-03 {                   /*Стили для кнопки по умолчанию*/
    background-color: #1b1b1b;    
    border-radius: 5px;    
    position: absolute;    
    display: block;
    margin: 20px 0;	
}

.color-hover-03 {               /*Стили для кнопки при наведении на неё курсора*/       
    background-color: #3d8cb3;  /*изначально ширина кнопки равна нулю, т.е её не видно на экране, а постепенное изменение ширины и появление красной кнопки прописано в файле 'myscript.js'*/
    border-radius: 5px;
    background-image: linear-gradient(#4396bf, #3f91b9 45%, #35799a);
    background-repeat: no-repeat;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 -1px 0 rgba(0, 0, 0, 0.18) inset;    
    display: block;
    position: absolute;   
}

.text-button-03 {			/*Стили для текста кнопки*/ 
    font: 14px Arial, sans-serif;
    color: #b2afa8;    
    text-shadow: 0px 0px 2px #000;
	padding: 10px 20px;
    position: relative;    /* Важный момент - без этого свойства текст при наведении крсора уходит на задний план */
}


#kraft-76 {                 /*В этот блок обвёрнут весь модуль, который выводит слайдшоу, включая текст и кнопку просмотра фотогорафии и всё это является обычным материалом*/
    padding-bottom: 40px;
    text-align: center;     /*Выравниваем модуль с текстом и слайдшоу по центру*/
}

#kraft-76 p {               /*Задаём стили для теста, заключённого в параграфы*/
    text-align: justify;
    margin: 0;
    padding: 0;
    text-indent: 30px;
}

#kraft-76 > .main-button-03 {           /*Пытаемся отравнять кнопку*/
    display: inline-block;
    margin-left: -16%;    
}
/*----------------------------- button-03 - конец -------------------------------*/



/*Стили для кнопки слайдшоу на главной странице - начало*/
.position-main-all-view {
    margin-bottom: 20px;
}


/*Пока всё что прописано в классах '.main-all-view' и '.main-all-view:hover' не используется*/
/*Это использовалось в качестве кнопки 'Посмотреть все виды' в слайдшоу на главной странице */
/*Сейчас там другая кнопка, стили которой расположены чуть ниже, это 'button-03-1'*/
/*Для того что бы вернуть всё обратно, следует в модуле 'Слайд-шоу на главной странице (roksprocket)', в атрибуте 'title' во всех пяти позициях слайдшоу прописать следующий код*/
/*<div class="position-main-all-view">Кабинет руководителя - набор мебели ЛОРД<br /><br /><a class="main-all-view" href="http://3dstudiomax.ru/index.php/portfolio">Посмотеть все виды</a></div>*/
/*а так же не забыть убрать все что касается стилей CSS и JQUERY для 'button-03-1', впрочем можно и не убирать, просто это останеться не востребованным*/
.main-all-view {
    font-size: 14px;
    padding: 10px 15px !important;
    border-radius: 5px;
    background-color: #3d8cb3;
    background-image: linear-gradient(#4396bf, #3f91b9 45%, #35799a);
    background-repeat: no-repeat;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 -1px 0 rgba(0, 0, 0, 0.18) inset;
    color: #ffffff;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);

}

.main-all-view:hover {
    background-color: #3f90b8;
    background-image: linear-gradient(#3c8bb1, #4094bd 45%, #3882a6);
    background-repeat: no-repeat;
    color: #ffffff !important;
}

/*-- button-03-1 начало--*/
.color-default-03-1 {                   /*Стили для кнопки по умолчанию*/    
    background-color: rgba(0, 0, 0, 0.35);    
    border-radius: 5px;    
    /*position: absolute;*/
    display: inline-block;    	
}

.color-hover-03-1 {           /*Стили для кнопки при наведении на неё курсора*/   
    background-color: #f54fff;	/*изначально ширина кнопки равна нулю, т.е её не видно на экране, а постепенное изменение ширины и появление красной кнопки прописано в файле 'myscript.js'*/
    border-radius: 5px;   
    position: absolute;
}

.text-button-03-1 {			/*Стили для текста кнопки*/ 
    font: 14px Arial, sans-serif;
    color: #aaa;
	padding: 10px 20px;
    position: relative;    /* Важный момент - без этого свойства текст при наведении крсора уходит на задний план */    
}
/*-- button-03-1 конец--*/
/*Стили для кнопки слайдшоу на главной странице - конец*/



/*Стили для формы контактов - начало*/
.contact h2, .contact h3 {      /*все что было в загаловке 'h2' я скрыл стандартными средствами joomla*/
    color: #b2afa8;
}

.contact h3 {
    text-align: center;
}
/*Стили для формы контактов - конец*/



/*Стили для модуля 'Меню блога' - начало*/
.categories-module {
    list-style: none;
    margin: 0;
}
/*Стили для модуля 'Меню блога' - конец*/



/*Стили для модуля 'Последние статьи' - начало*/
.latestnews {
    list-style: none;
    margin: 0;
}

.latestnews li {    
    margin: 0 0 7px 0;
}
/*Стили для модуля 'Последние статьи' - конец*/


/*Стили для модуля 'Архив' - начало*/
.archive-module {
    list-style: none;
    margin: 0;
}
/*Стили для модуля 'Архив' - конец*/


/*Заголовки в сайд-баре - начало*/
#rt-sidebar-a .module-surround .module-title h2 {
    margin: 0;
    padding: 0 0 10px 0;
    color: #b2afa8;
    text-align: center;
}
/*Заголовки в сайд-баре - конец*/


/*стили футера - начало*/
.footer {
    text-align: center;
    padding-bottom: 20px;
}
/*стили футера - конец*/


/*стили для изображения вступительного текста материала - начало*/
.component-content article .img-intro-none {
    text-align: center;
    margin-bottom: 12px;    
}

/*.component-content article .img-intro-none img {
    margin: 10px 0;
    border-radius: 10px;
    box-shadow: 0 0 10px 5px #000000;
}*/
/*стили для изображения вступительного текста материала - конец*/


/*стили для изображения текста материала в начале статьи - начало*/
.img-fulltext-none {
    text-align: center;
}

.img-fulltext-none img {
    margin: 10px 0;
   /* border-radius: 10px;
    box-shadow: 0 0 10px 5px #000000;*/
}
/*стили для изображения текста материала в начале статьи - конец*/



/*стили для текста на главной странице 'ВЫ ЗДЕСЬ В ПЕРВЫЙ РАЗ?' - начало*/
#mymessage-home {     
    text-align: center;
    margin: -20px 0;   
}

#mymessage-home a {
    padding: 7px;    
    display: block;
}

/*button-08*/
.hidden-08 {                        /*некоторые параметры этого свойства являются настраиваемыми, их нужно подгонять под размер шрифта текста данной кнопки*/
    width: 240px;                   /*ширина блока - НАСТРАИВАЕМЫЙ ПАРАМЕТР, ЕГО РАЗМЕР МОЖЕТ МЕНЯТЬСЯ И ДОЛЖЕН ПОДГОНЯТЬСЯ ПОД РАЗМЕР ТЕКСТА КНОПКИ*/
    height: 24px;                   /*высота блока - НАСТРАИВАЕМЫЙ ПАРАМЕТР, ЕГО РАЗМЕР МОЖЕТ МЕНЯТЬСЯ И ДОЛЖЕН ПОДГОНЯТЬСЯ ПОД РАЗМЕР ТЕКСТА КНОПКИ*/
    padding: 11px 0 7px 14px;     /*НАСТРАИВАЕМЫЙ ПАРАМЕТР, ЗДЕСЬ ВЕЛИЧИНЫ ОТСТУПОВ ВЛИЯЮТ НА РАЗМЕР ОРЕОЛА СОЗДАВАЕМОГО ВОКРУГ КНОПКИ, НА ТОТ СЛУЧАЙ, ЕСЛИ ФОН КНОПКИ БУДЕТ
                                      НЕ ПРОЗРАЧНЫЙ - УВЕЛИЧИВАЕТ РАЗМЕР КНОПКИ, ДОБАВЛЯЯ СООТВЕТСТВУЮЩИЕ ПОЛЯ К ЗАДАННЫМ ПАРАМЕТРАМ 'width' и 'height'*/
    /*background: #191919;*/            /*ФОН КНОПКИ - НЕОБЯЗАТЕЛЬНЫЙ ПАРАМЕТР, ЕСЛИ ЕГО НЕ ЗАДАТЬ, ТО ФОН КНОПКИ БУДЕТ ПРОЗРАЧНЫМ*/
    /*border: 1px solid #000;*/         /*ОКАНТОВКА КНОПКИ - ПОМОГАЕТ В ПРОЦЕССЕ ПОДГОНКИ ПАРАМЕТРОВ 'width' и 'height' ПОД РАЗМЕР КНОПКИ,  НЕОБЯЗАТЕЛЬНЫЙ ПАРАМЕТР*/
    border-radius: 5px;             /*элемент дизайна, ни на что не влияет*/
    overflow: hidden;               /*скрываем всё что будет выходить за размеры этого блока*/
    display: inline-block;          /*Делаем так что бы размеры кнопки не занимали всю строку*/          
    position: relative;             /*без этого свойства 'overflow: hidden' не сработает*/
    top: 5px;                       /*Корректируем положение данного  блока на экране*/
    left: -6px;
}

.text1-button-08 {    
    font: bold 16px Arial, sans-serif;
    color: #4396bf;
    position: absolute; 
}

.text2-button-08 { 
    font: bold 16px Arial, sans-serif;  /*Тип шрифта для текста кнопки должен быть такими же как и в 'text1-button-08'*/
    position: absolute;
    color: #4396bf;    
}
/*стили для текста на главной странице 'ВЫ ЗДЕСЬ В ПЕРВЫЙ РАЗ?' - конец*/



/*стили для моего сообщения в 'сайдбаре А' на главной странице БЛОГА- начало*/
#mymessage-sidbar-a {
    text-align: justify;
    color: #b2afa8;
    text-shadow: 2px 2px 2px #000;
}

#mymessage-sidbar-a span{   /*стиль для фразы ВНИМАНИЕ!*/
    font-size: 18px;
    text-align: center;
    display: block;
    margin-bottom: -11px;   
    border-bottom: 1px solid #b2afa8;
}
/*стили для моего сообщения в 'сайдбаре А' на главной странице БЛОГА - конец*/


/*стили для моего сообщения в 'сайдбаре А' на страницах '3D графика', 'WEB практика', 'Видеоуроки' - начало*/
#mymessage-sidbar-a-3d span{
    font-size: 18px;
    color: #b2afa8;
    text-align: center;
    display: block;
    margin: 0;
    text-shadow: 2px 2px 2px #000;
}
/*стили для моего сообщения в 'сайдбаре А' на страницах '3D графика', 'WEB практика', 'Видеоуроки' - конец*/




/*Стили для меню расположенного в 'sidebar-a' - начало*/
.myMenuHome {           /*стиль для меню расположенного на главной странице*/
    margin: 20px;       /*Задаём отступы что бы меню не прилипало к блоку с материалами сайта*/
}

.myMenuBlog {           /*стиль для меню БЛОГА*/
    margin: 20px;       /*Задаём отступы что бы меню не прилипало к блоку с материалами сайта*/
}
/*Стили для меню расположенного в 'sidebar-a' - конец*/


/*Выделяем ключевое слово найденное в поиске вот этим светом - начало*/
.result-text > .highlight {
    color: #e823d8;
}
/*Выделяем ключевое слово найденное в поиске вот этим светом - конец*/





/*-----------------------------------Страница демонстрирующая красивые кнопки - начало----------------------------------------------*/
/*----------------------------- button-01 -------------------------------*/
.niceButton-myhref-01 {
    text-decoration: none;      /*убираем подчеркивание на ссылке*/
    border: none;               /*убираем след от клика по кнопке*/
    outline: none;              /*убираем след от клика по кнопке*/
    display: inline-block;      /*Делаем так что бы размеры кнопки не занимали всю строку*/
}

.niceButton-color-button-01 {
    background: #2c7ffb;        /*Устанавливаем цвет фона кнопки*/
    border-radius: 5px;         /*Радиус скругления углов кнопки*/
    position: relative;         /*Задаём возможность регулировки изображения '3D' по высоте и ширине кнопки*/
}

.niceButton-img-button-01 {     /*Устанавливаем стили для изображения '3D'*/
    width: 22px;                /*ширина изображения '3D'*/             
    height: 22px;               /*высота изображения '3D'*/
    background-image: url(http://3dstudiomax.ru/images/dvr/demo/niceButton/logo-3D-2.png);/*ссылка на изображение '3D'*/  
    position: absolute;         /*точное позиционирование изображения '3D'*/
    top: 7px;                   /*позиционирование по высоте*/
    left: 7px;                  /*позиционирование по ширине*/
}

.niceButton-text-button-01 {           /*стили для текста кнопки*/
    font: 14px Arial, sans-serif;
    padding: 10px 20px 10px 35px;
    color: #ccc;
}

.niceButton-text-button-01 span{       /*стили для текста кнопки обвернутого в тег <span></span>*/
    color: #fff;
    font-weight: bold;
}



/*----------------------------- button-02 -------------------------------*/
/*Здесь 'JavaScript' не нужен*/
.niceButton-myhref-02 {
    text-decoration: none;      /*убираем подчеркивание на ссылке*/
    border: none;               /*убираем след от клика по кнопке*/
    outline: none;              /*убираем след от клика по кнопке*/
    display: inline-block;      /*делаем так что бы размеры кнопки не занимали всю строку*/
}

.niceButton-color-default-02 {
    background: #2c7ffb;        /*Устанавливаем цвет фона кнопки*/
    border-radius: 5px;         /*радиус скругления углов кнопки*/
    transition: 0.4s;           /*время перехода от состояния 'hover' в обычное состояние*/
}

.niceButton-text-button-02 {    /*стили для текста кнопки*/
    font: 14px Arial, sans-serif;
    padding: 10px 24px;
    color: #ff0;
    transition: 0.4s;           /*время перехода от состояния 'hover' в обычное состояние*/
}

.niceButton-text-button-02::before {    /*устанавливаем стили для шрифта 'Font Awesome'*/
    content: "\f0e0";                   /*помещаем на кнопку конверт*/
    font-family: FontAwesome;           /*в качестве конверта используем шрифт 'Font Awesome'*/
    color: #ff0;                        /*цвет конверта по умолчанию*/
    font-size: 14px;                    /*размер конверта*/
    margin-right: 7px;                  /*положение конверта относительно текста по горизонтали*/
    transition: 0.4s;                   /*время перехода от состояния 'hover' в обычное состояние*/  
}

.niceButton-text-button-02:hover {     /*цвет текста кнопки при наведении на неё мыши*/
    color: #fff;
    transition: 0.4s;
}

.niceButton-color-default-02:hover {   /*цвет фона кнопки при наведении на неё мыши*/
    background: #BB162B;
    transition: 0.4s;   
}

.niceButton-text-button-02:hover::before { /*цвет конверта при наведении на него мыши*/
    color: #fff;
    transition: 0.4s;
}

/*----------------------------- button-03 -------------------------------*/
.niceButton-color-default-03 {  /*стили для кнопки по умолчанию*/
    background-color: #2c7ffb;
    border-radius: 5px;
    position: absolute;
    display: block;	
}

.niceButton-color-hover-03 {    /*Стили для кнопки при наведении на неё курсора*/   
    background-color: #f00;	/*изначально ширина кнопки равна нулю, т.е её не видно на экране, а постепенное изменение ширины и появление красной кнопки прописано в файле 'myscript.js'*/
    border-radius: 5px;   
    position: absolute;   
    display: block;
}

.niceButton-text-button-03 {			/*Стили для текста кнопки*/ 
    font: 14px Arial, sans-serif;
    color: #ffff00;
	padding: 10px 35px;
    position: relative;    /* Важный момент - без этого свойства текст при наведении крсора уходит на задний план */
}

/*----------------------------- button-04 -------------------------------*/
.niceButton-color-default-04 {                   /*Стили для кнопки по умолчанию*/    
    background-color: #2c7ffb;    
    border-radius: 5px;    
    position: absolute;
    display: block;	
}

.niceButton-color-hover-04 {           /*Стили для кнопки при наведении на неё курсора*/   
    background-color: #f00;	/*изначально ширина кнопки равна нулю, т.е её не видно на экране, а постепенное изменение ширины и появление кнопки прописано в файле 'myscript.js'*/
    border-radius: 5px;   
    position: absolute;   
    display: block;
}

.niceButton-text-button-04 {			/*Стили для текста кнопки*/ 
    font: 14px Arial, sans-serif;
    color: #ffff00;
	padding: 10px 24px;
    position: relative;    /* Важный момент - без этого свойства текст при наведении крсора уходит на задний план */
}

/*----------------------------- button-05 -------------------------------*/
.niceButton-color-default-05 {                   /*Стили для кнопки по умолчанию*/    
    background-color: #2c7ffb;    
    border-radius: 5px;    
    position: absolute;
    display: block;	
}

.niceButton-color-hover-05 {           /*Стили для кнопки при наведении на неё курсора*/   
    background-color: #f00;	/*изначально ширина кнопки равна нулю, т.е её не видно на экране, а постепенное изменение ширины и появление красной кнопки прописано в файле 'myscript.js'*/
    border-radius: 5px;   
    position: absolute;   
    display: block;
}

.niceButton-text-button-05 {			/*Стили для текста кнопки*/ 
    font: 14px Arial, sans-serif;
    color: #ffff00;
	padding: 10px 38px;
    position: relative;    /* Важный момент - без этого свойства текст при наведении крсора уходит на задний план */
}


/*----------------------------- button-06 -------------------------------*/
.niceButton-color-default-06 {                   /*Стили для кнопки по умолчанию*/    
    background-color: #2c7ffb;    
    border-radius: 5px;    
    position: absolute;
    display: block;	
}

.niceButton-color-hover-06 {           /*Стили для кнопки при наведении на неё курсора*/   
    background-color: #f00;	/*изначально ширина кнопки равна нулю, т.е её не видно на экране, а постепенное изменение ширины и появление кнопки прописано в файле 'myscript.js'*/
    border-radius: 5px;   
    position: absolute;   
    display: block;
}

.niceButton-text-button-06 {			/*Стили для текста кнопки*/ 
    font: 14px Arial, sans-serif;
    color: #ffff00;
	padding: 10px 33px;
    position: relative;    /* Важный момент - без этого свойства текст при наведении крсора уходит на задний план */
}

/*----------------------------- button-07 -------------------------------*/
.niceButton-color-default-07 {                   /*Стили для кнопки по умолчанию*/    
    background-color: #2c7ffb;    
    border-radius: 5px;    
    position: absolute;
    display: block;	
}

.niceButton-hidden-07 {                /*Контейнер ограничичивающий видимость увеличивающегося круга своими размерами */
    position: relative;   
    overflow: hidden;
}

.niceButton-circle-07 {                    /*Это тот самый круг, который и делает анимацию расползаясь по экрану*/
    width: 0px;                 /*В нормальном состоянии размеры разлетающегося круга равны нулю, а при наведении курсора мыши на кнопку (class="color-default-07") начинается процесс описанный в файле 'myscript.js'*/
    height: 0px;
    border-radius: 0px;         /*В нормальном состоянии ' border-radius' равен нулю, при наведении курсора этот параметр меняется см. файл 'myscript.js'*/
    background-color: #1E3DB9;     /*Цвет расплывающегося по кнопке куруга*/
    opacity: 0.3;               /*Параметр 'opacity' при наведении курсора на малиновую кнопку так же меняется см. файл 'myscript.js'*/
    position: absolute;
}


.niceButton-text-button-07 {			/*Стили для текста кнопки*/ 
    font: 14px Arial, sans-serif;
    color: #ffff00;
	padding: 10px 28px;
    /*position: relative;*/    /* Важный момент - без этого свойства текст при наведении крсора уходит на задний план */
}


/*----------------------------- button-08 -------------------------------*/
.niceButton-fon-button-08 a{
    border: none;           /*Нужно, иначе остается след от клика по кнопке*/
    outline: none;          /*Нужно, иначе остается след от клика по кнопке*/     
}

.niceButton-hidden-08 {                        /*некоторые параметры этого свойства являются настраиваемыми, их нужно подгонять под размер шрифта текста данной кнопки*/
    width: 110px;                   /*ширина блока - НАСТРАИВАЕМЫЙ ПАРАМЕТР, ЕГО РАЗМЕР МОЖЕТ МЕНЯТЬСЯ И ДОЛЖЕН ПОДГОНЯТЬСЯ ПОД РАЗМЕР ТЕКСТА КНОПКИ*/
    height: 20px;                   /*высота блока - НАСТРАИВАЕМЫЙ ПАРАМЕТР, ЕГО РАЗМЕР МОЖЕТ МЕНЯТЬСЯ И ДОЛЖЕН ПОДГОНЯТЬСЯ ПОД РАЗМЕР ТЕКСТА КНОПКИ*/
    padding: 10px 27px 8px 27px;     /*НАСТРАИВАЕМЫЙ ПАРАМЕТР, ЗДЕСЬ ВЕЛИЧИНЫ ОТСТУПОВ ВЛИЯЮТ НА РАЗМЕР ОРЕОЛА СОЗДАВАЕМОГО ВОКРУГ КНОПКИ, НА ТОТ СЛУЧАЙ, ЕСЛИ ФОН КНОПКИ БУДЕТ
                                      НЕ ПРОЗРАЧНЫЙ - УВЕЛИЧИВАЕТ РАЗМЕР КНОПКИ, ДОБАВЛЯЯ СООТВЕТСТВУЮЩИЕ ПОЛЯ К ЗАДАННЫМ ПАРАМЕТРАМ 'width' и 'height'*/
    background: #2c7ffb;            /*ФОН КНОПКИ - НЕОБЯЗАТЕЛЬНЫЙ ПАРАМЕТР, ЕСЛИ ЕГО НЕ ЗАДАТЬ, ТО ФОН КНОПКИ БУДЕТ ПРОЗРАЧНЫМ*/
    /*border: 1px solid #000;*/     /*ОКАНТОВКА КНОПКИ - ПОМОГАЕТ В ПРОЦЕССЕ ПОДГОНКИ ПАРАМЕТРОВ 'width' и 'height' ПОД РАЗМЕР КНОПКИ,  НЕОБЯЗАТЕЛЬНЫЙ ПАРАМЕТР*/
    border-radius: 5px;             /*элемент дизайна, ни на что не влияет*/
    overflow: hidden;               /*скрываем всё что будет выходить за размеры этого блока*/
    display: inline-block;          /*Делаем так что бы размеры кнопки не занимали всю строку*/          
    position: relative;             /*без этого свойства 'overflow: hidden' не сработает*/
    /*top: 5px;*/                   /*корректируем положение данного  блока на экране, если это потребуется*/
}

.niceButton-text1-button-08 {    
    font: 14px Arial, sans-serif;
    color: #ffff00;
    position: absolute; 
}

.niceButton-text2-button-08 { 
    font: 14px Arial, sans-serif; /*Тип шрифта (к примеру: font: bold 14px Arial, sans-serif) для текста кнопки должен быть такими же как и в 'text1-button-08' и он автоматически настраивается в файле 'myscript.js'*/
    position: absolute;
    color: #fff;    
}
/*-------------------------- button-08 - конец---------------------------*/

.clear {
    clear: both;
}

.niceButtonMain {
    height: 120px;    
}

.niceButton-btn-main01 {   
    padding-bottom: 22px;    
}

.niceButton-btn-main02 {    
    padding-bottom: 60px;   
}

.niceButton-btn-main03 {    
    padding-bottom: 60px;    
}

.niceButton-btn-main04 {    
    padding-bottom: 60px;    
}

.niceButton-1 {
    width: 200px;
    height: 100px;
   position: relative;
   top: 0;
   left: 0px;
}

.niceButton-2 {
    width: 200px;
    height: 100px;
    position: relative;
    top: -100px;
    left: 200px;
}

.niceButton-3 {
    width: 200px;
    height: 100px;
   position: relative;
   top: -200px;
   left: 400px;
}

.niceButton-4 {
    width: 200px;
    height: 100px;
   position: relative;
   top: -300px;
   left: 600px;
}

.niceButtonPost {
    width: 95%;
}

xmp, pre {
    -moz-tab-size: 4;
    color: #777;
    background: #f5f2f0 none repeat scroll 0 0;
    border: 1px solid #e8e8e8;
    border-radius: 3px;
    clear: both;
    font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;
    font-size: 15px;
    margin-bottom: 20px;
    overflow: auto;
    overflow-wrap: normal;
    padding: 20px;    
    text-shadow: 0 1px white;
    white-space: pre;
    width: 100%;
    word-break: normal;
    word-spacing: normal;
}
/*-----------------------------------Страница демонстрирующая красивые кнопки - конец----------------------------------------------*/



/*--------Отключаем всё ненужное в комментариях - начало-----------*/
#idc-container .idc-postnav-list li {
    display: none !important;         /*Отключаем картинки-ссылки на логины*/
}

.idc-postnav-label {
    display: none !important;        /*Отключаем надпись 'Комментировать, как Гость, или войти:'*/ 
}

.idc-foot {
    display: none !important;       /*Отключаем линию подчёркивания в самом низу*/
}

#idc-container-parent #idc-container {
position: relative;
padding-top: 50px;     /*Опускаем форму комментарие на 50px ниже контента статьи (рекомендация по настройке CSS стилей - взята на офиц. сайте)*/
}
/*--------Отключаем всё ненужное в комментариях - конец-----------*/



/*В статье "Каустика в Vray" миниатюры слайд-шоу (от дополнения ROKBOX) были не того размера и здесь я их привёл к нужной ширине и высоте*/
#caustics img {
    width: 250px;
    height: 187px;
}







                                /*1199px*/
@media screen and (max-width:1199px),only screen and (max-device-width:1199px) {

.text1-button-08, .text2-button-08 {    /*Корректируем текст расположенный в 'sidebar-a' на главной странице (ВЫ ЗДЕСЬ В ПЕРВЫЙ РАЗ?) и (ЖМИТЕ, НЕ СТЕСНЯЙТЕСЬ!)*/
    font: bold 12px Arial, sans-serif;
}

.hidden-08 {      /*Корректируем размеры контейнера расположенного в 'sidebar-a' на главной странице и в ктором расположены тексты (ВЫ ЗДЕСЬ В ПЕРВЫЙ РАЗ?) и (ЖМИТЕ, НЕ СТЕСНЯЙТЕСЬ!)*/
    width: 180px;
    height: 20px;
}


/*корректируем страницу отображения материалов с красивыми кнопками - начало*/
.niceButtonMain {   
    height: 330px;    
}

.niceButton-3 {
    width: 200px;
    height: 100px;
   position: relative;
   top: 0;
   left: 0;
}

.niceButton-4 {
    width: 200px;
    height: 100px;
   position: relative;
   top: -100px;
   left: 200px;
}
/*корректируем страницу отображения материалов с красивыми кнопками - конец*/


.niceButtonPost {   /*корректируем размеры описания уроков с красивыми кнопками в тегах <xmp></xmp>*/
    width: 94%;
}

}




                                /*959px*/
@media screen and (max-width:959px),only screen and (max-device-width:959px) {

.text1-button-08, .text2-button-08 {    
    font: bold 10px Arial, sans-serif;    /*Корректируем текст расположенный в 'sidebar-a' на главной странице (ВЫ ЗДЕСЬ В ПЕРВЫЙ РАЗ?) и (ЖМИТЕ, НЕ СТЕСНЯЙТЕСЬ!)*/
    left: 0px;    
}

.hidden-08 {      /*Корректируем размеры контейнера расположенного в 'sidebar-a' на главной странице и в ктором расположены тексты (ВЫ ЗДЕСЬ В ПЕРВЫЙ РАЗ?) и (ЖМИТЕ, НЕ СТЕСНЯЙТЕСЬ!)*/
    width: 135px;
    height: 20px;
}

#kraft-76 > .main-button-03 {           /*корректируем положение кнопки, которая является ссылкой на фото в галлереи 'kraft-76'*/    
    margin-left: -22%;    
}

.niceButtonPost {   /*корректируем размеры описания уроков с красивыми кнопками в тегах <xmp></xmp>*/
    width: 93%;
}



}






                                /*767px*/
@media screen and (max-width:767px),only screen and (max-device-width:767px) {

.rt-block {
    margin: 10px;   /*Корректируем отступ верхней части самого первого блока в 'sidebar-a'*/
}

.text1-button-08, .text2-button-08 {    /*Корректируем текст расположенный в 'sidebar-a' на главной странице (ВЫ ЗДЕСЬ В ПЕРВЫЙ РАЗ?) и (ЖМИТЕ, НЕ СТЕСНЯЙТЕСЬ!)*/
    font: bold 16px Arial, sans-serif;
    left: 10px;
}

.hidden-08 {      /*Корректируем размеры контейнера расположенного в 'sidebar-a' на главной странице и в ктором расположены тексты (ВЫ ЗДЕСЬ В ПЕРВЫЙ РАЗ?) и (ЖМИТЕ, НЕ СТЕСНЯЙТЕСЬ!)*/
    width: 230px;
    height: 24px;
}

#kraft-76 > .main-button-03 {           /*корректируем положение кнопки, которая является ссылкой на фото в галлереи 'kraft-76'*/    
    margin-left: -37%;    
}

.niceButtonPost {   /*корректируем размеры описания уроков с красивыми кнопками в тегах <xmp></xmp>*/
    width: 91%;
}


}







                                /*480px*/
@media screen and (max-width:480px),only screen and (max-device-width:480px) {



#kraft-76 > .main-button-03 {           /*корректируем положение кнопки, которая является ссылкой на фото в галлереи 'kraft-76'*/    
    margin-left: -45%;    
}


/*корректируем страницу отображения материалов с красивыми кнопками - начало*/
.niceButtonMain {   
    height: 480px;    
}

.niceButton-2 {
    width: 200px;
    height: 100px;
    position: relative;
    top: 20px;
    left: 0;
}

.niceButton-3 {
    width: 200px;
    height: 100px;
   position: relative;
   top: 40px;
   left: 0;
}

.niceButton-4 {
    width: 200px;
    height: 100px;
   position: relative;
   top: 60px;
   left: 0;
}
/*корректируем страницу отображения материалов с красивыми кнопками - конец*/

.niceButtonPost {   /*корректируем размеры описания уроков с красивыми кнопками в тегах <xmp></xmp>*/
    width: 88%;
}



}








                                /*300px*/
@media screen and (max-width:300px),only screen and (max-device-width:300px) {

.text1-button-08, .text2-button-08 {    
    font: bold 10px Arial, sans-serif;    /*Корректируем текст расположенный в 'sidebar-a' на главной странице (ВЫ ЗДЕСЬ В ПЕРВЫЙ РАЗ?) и (ЖМИТЕ, НЕ СТЕСНЯЙТЕСЬ!)*/
    left: 0px;    
}

.hidden-08 {      /*Корректируем размеры контейнера расположенного в 'sidebar-a' на главной странице и в ктором расположены тексты (ВЫ ЗДЕСЬ В ПЕРВЫЙ РАЗ?) и (ЖМИТЕ, НЕ СТЕСНЯЙТЕСЬ!)*/
    width: 135px;
    height: 20px;
}

#kraft-76 > .main-button-03 {           /*корректируем положение кнопки, которая является ссылкой на фото в галлереи 'kraft-76'*/    
    margin-left: -62%;    
}

.niceButtonPost {   /*корректируем размеры описания уроков с красивыми кнопками в тегах <xmp></xmp>*/
    width: 83%;
}


}