/*Зададим начальные отступы между элементами шаблона и значение полей вокруг
содержимого элементов.*/

* {margin:0;

padding:0;}

/*Общие значения для заголовков всех уровней на сайте*/

h1, h2, h3, h4, h5, h6,

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover

h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6
a:visited

{ font-weight: normal;

font-style: normal;

text-decoration: none;}

/*Оформление всех ссылок на сайте*/

a { text-decoration: underline;

color:#004f64;}

/*Непосещенные ссылки*/

a:link { color: #004f64;}

/*Посещенные ссылки*/

a:visited{ color:#3b98b0;}

/*Ссылка при наведении*/

a:hover{ text-decoration: none;

color: #fe1919;}

/*Оформление заголовков 1 уровня*/

h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover{

font-size:22px;

color: #3b98b0;

text-align:left;

margin-bottom:5px;}

/*Оформление заголовков 2 уровня*/

h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover{

font-size:20px;

color: #004f64;

text-align:left;

border-bottom:1px solid #a7a6aa;

margin-bottom:5px;}

/*Оформление заголовков 3 уровня*/

h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover{

font-size: 18px;

color: #30b2cf;

text-align:left;}

/*Оформление заголовков 4-6 уровня. Заголовки этих уровней используются редко,
но если вы хотите, то можете расписать оформление каждого уровня отдельно.*/

h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover,h5, h5 a, h5 a:link, h5 a:visited,
h5 a:hover,h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover{

font-size:16px;

color: #3b98b0;

text-align:left;}

/*Оформление изображений на сайте. Картинка как ссылка.*/

a img {border: none;}

/*Картинка в тексте. Далее, в статьях мы зададим один отступ, а в модулях
другой.*/

p img {margin:0;}

/*Оформление абзацев в тексте.*/

p {margin: 0 0 10px 0;}

/*Теперь можно приступать к оформлению блоков. Чтобы сделать задний план нашей
веб-странички, я нарисовала в Фотошопе градиент, вырезала из него сверху вниз
полоску шириной 2px и сохранила в файле body_bg.png . Файл положила в папку
images нашего шаблона.

В коде прописала повтор изображения по оси Х. Все это делается для того, чтобы
уменьшить графические файлы и оптимизировать шаблон. В результате страницы сайта
будут быстрее загружаться. Градиент помещается на фон обязательно. Задаем также
параметры рабочего шрифта контента сайта.*/

body {
  margin:0 auto;
  padding:0;
  font:14px Arial, Helvetica, sans-serif ;
  line-height:1.3;
  color:#000;
  text-align:left;
  background-color:#e7e5e5;
  background-image: url('../images/body_bg.png');
  background-repeat:repeat-x;
}

  /*Определяем размер и цвет фона странички*/

#page {
  width:1024px;
  margin:auto;
  background-color:#fff;
  overflow:hidden;
}

/*Размер блока top , где размещается логотип и поиск по сайту*/

#top{
  height:65px;
  width:100%;
  margin:0;
}

/*Для оформления блока logo я сделала картинку logo.jpg с логотипом размером
600х60 и сделала ее фоном. Файл положила в папку images нашего шаблона.*/

#logo {
  height:65px;
  width: 674px;
  float: left;
  /*background-image: url('../images/Chasovnya_pingvin.jpg');*/
}

/*В блоке logo у нас еще выводиться название сайта. В файле index.php мы
поставили название в теги H1, это важно для оптимизации. У нас выше было
прописано оформление заголовков первого уровня, но для блока logo сделаем свое,
особое оформление. Тем более, что надо еще правильно сориентировать название
сайта в блоке.*/

#logo h1{
  font:bold 24px Arial, Helvetica, sans-serif small-caps;
  font-style:italic;
  text-align:center;
  color:#004f64;
  padding:15px 0 0 100px;
  border:none;
}

/*Оформление блока поиска по сайту user1*/

#user1 {
  height:65px;
  width: 350px;
  float: left;
  background-color:#ffffff
}

/*В блоке user1 предусмотрена позиция user1 для вывода модуля поиска сайту.

Небольшое отступление. За оформление модулей в шаблонах Joomla отвечает класс
.moduletable. Можно создавать различные стили оформления модулей, добавляя к
классу суффикс класса модуля. Не забудьте при создании модуля в админпанели
прописать в параметре «Суффикс CSS-класса модуля» нужный вам суффикс, в
противном случае модуль будет иметь оформление, которое прописано для класса
.moduletable в файле template.css.

При создании модуля «поиск по сайту» задайте ему суффикс _poisk .

Оформление модуля*/

.moduletable_poisk {
  background-color:#fff;
}

/*Чтобы окно поиска было совсем симпатичным, я сделала картинку с изображением
лупы search.png. Файл положила в папку images нашего шаблона. В коде вставила
картинку в блок user1. Далее необходимо ее позиционировать и задать стиль шрифта
в окошке.*/

#user1 input {
  background-image: url('../images/Chasovnya_pingvin.jpg') no-repeat;
  height:25px;
  width:245px;
  font:12px Arial, Helvetica, sans-serif;
  margin:15px 0 0 80px;
  font-style:italic;
  border:3px double #3b98b0;
}

/*Еще один нюанс, который стоит отметить при создании модуля поиска. Системный
PHP-код Joomla 2.5 и 3.0 как-то коряво выводит поиск по сайту, поэтому мы
воспользуется возможностью переопределить ядро Joomla и сделать красивый поиск.
Для этого создаем в корневой папке шаблона папку html и помещаем в нее папку
mod_search, которая содержит файл default.php для переопределения вывода модуля
поиска. Я взяла папку mod_search из шаблона atomic.

ВНИМАНИЕ:В файле templateDetails.xml обязательно пропишите созданную папку html
вот такой строкой кода <folder>html</folder>*/

/*Оформление блока вывода горизонтального меню «user2».*/

#user2 {
  width: 100%;
  clear:both;
}

/*Оформление горизонтального меню мы разберем на следующем уроке. Чтобы проще
было работать с кодом, я решила сделать таблицы стилей для меню в отдельном
файле menu.css. А пока продолжим работать с файлом template.css.

Изначально я решила блок «header» сделать универсальным и предусмотрела в нем
позицию для вывода модулей «header». В этой позиции можно вывести какой-нибудь
ротатор изображений или с помощью модуля с произвольным HTML кодом просто
вывести изображение, любой высоты, при этом ширина должна быть всегда 950рх
(ширина страницы). Это изображение можно сделать кликабельным, а также с
легкостью его менять.*/

#header { width:100%;}

/*Если вы решили выводить шапку сайта в модуле «HTML-код», то при создании
модуля задайте ему суффикс _header.

Оформление модуля с суффиксом _header , выводимым в позиции header.*/

.moduletable_header {margin-bottom:0px;}

/*Позиционирование изображений в модуле.*/

.moduletable_header img {margin:0;}

.moduletable_header p {margin:0;}

/*В блоке user3 предусмотрена позиция для вывода модулей user3.*/

#user3 {width: 100%;}

/*У самого блока нет оформления как такового, а вот модули выводимые в нем могут
иметь даже очень оригинальный вид.

Изначально я предполагала вывод в этой позиции замечательного модуля
представления контента News Show Pro GK4. Но для Joomla 3.0 этого расширения еще
нет, поэтому я решила вывести в позиции user3 модуль «Навигатор сайта».

Однако с этим модулем повторяется та же история, что и с поиском: системный
PHP-код Joomla 2.5 и 3.0 некорректно выводит навигацию. Поэтому переопределяем
ядро Joomla и в  папку html нашего шаблона, копируем папку mod_breadcrumbs  с
файлом default.php ( все прочие файлы из этой папки надо удалить) из шаблона
beez.

Создаем модуль навигации и задаем ему суффикс _nav .*/

.moduletable_nav {
  font-style:italic;
  padding:5px;
  margin:0;
  background-color:#e7e5e5;
}

/*Если вы будете создавать шаблон для Joomla 2.5, то в позиции user3 можно
вывести модуль представления контента News Show Pro GK4. Тогда стоит прописать в
файле template.css, код отвечающий за оформление этого модуля, но это мы сделаем
на следующих уроках.

Оформление левой и правой колонок сайта. В предыдущем уроке, для наглядности мы
прописывали им фон, теперь его надо убрать.*/

#left {
  float:left;
  width:210px;
}

#rigth {
  float:left;
  width:210px;
}

/*Далее будем оформлять блок контента. Внимательно разберитесь, из чего
складывается ширина страницы. Если вы будете вносить изменения в ширину блоков
колонок или контента, то необходимо учитывать, что ширина страницы фиксированная
950 px. Ошибка в подсчетах может привести к тому, что поползет вся разметка. Мне
уже писали такие умельцы – поменяли ширину страницы, разметка поползла, а они не
знают, что делать. Считать правильно – вот, что делать!

В левой и правой колонках выводятся модули, ширина контента условно 60%. Считаем
1024 -210-210 -5-5(отступы от края блока контента до текста слева и
справа)=594рх.*/

#content60 {
  float:left;
  width:594px;
  padding: 0 5px 0 5px;
}

/*Модули выводятся или в левой или правой колонке , ширина контента условно 80%.
Считаем 1024 -210 -5-5(отступы от края блока контента до текста слева и
справа)=794рх.*/

#content80 {
  float:left;
  width:794px;
  padding: 0 5px 0 5px;
}

/*Обе колонки отключены, ширина контента условно 100%. Считаем 1024 -5-5
(отступы
от края блока контента до текста слева и справа)=1014рх.*/

#content100 {
  float:left;
  width:1014px;
  padding: 0 5px 0 5px;
}

/*Оформление текста статей.*/

#content60, #content80, #content100 {
  text-align:justify;
  margin-top:5px;
}

/*Оформление списков в тексте статей. Я сделала картинку блоков blok.gif. Файл
положила в папку images нашего шаблона.*/

#content60 ul li,#content80 ul li,#content100 ul li{
  *background: url('../images/blok.gif') no-repeat;
  padding: 0 0 0 12px;
  margin:5px;
  list-style:none;
}

/*Оформление отступов у картинок при размещении их в текстах статей.*/

#content60 p img,#content80 p img ,#content100 p img {
  padding:5px;
}

/*Оформление различных кнопок на сайте.*/

.button,input.button,button.validate {
  background:#fe1919;
  color:#fff;
  margin:2px;
  padding:2px 10px 2px 10px;
  cursor:pointer;
}

/*Зададим общий стиль оформления модулей. Если суффикс модуля не определен, то
оформление будет задаваться классом .moduletable*/

.moduletable {
  font:12px Arial, Helvetica, sans-serif;
  color:#000;
  line-height:1.5;
  text-align:left;
  padding:0px;
  margin:2px;
  border:2px solid #e7e5e5;
}

/*Оформление заголовка модуля.*/

.moduletable h3{
  font: bold 12px Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  text-align:left;
  padding:5px 0 5px 5px;
  color:#fe1919;
  background-color:#e7e5e5;
}

/*Оформление абзацев модуля.*/

.moduletable p {padding:5px;}

/*Оформление картинок в тексте модуля.*/

.moduletable img {margin:2px;}

/*Оформление списков в модуле.*/

.moduletable ul li{
  /*background: url('../images/blok.gif') no-repeat;*/
  padding: 0 0 0 12px;
  margin:5px;
  list-style:none;
}

/*В заключение разберемся с оформлением подвала сайта.*/

#footer {
  width:100%;
  clear:both;
  background-color:#82b5bf;
}

/*При создании модуля «HTML-код» со сведениями об авторских правах задайте
модулю суффикс _foot*/

.moduletable_foot {
  text-align:center;
  padding:5px 0 0 5px;
}