/**
 * @package portal
 */

/**
 * Колоночная сетка
 *
 * @subpackage grid
 */

/**
 * Контейнеры колонок
 *
 * Сначала нужно определить сколько колонок будет использоваться в сетке.
 * Известно, что ширина фиксированных областей должна быть равна 240px,
 * следовательно в эту ширину должно вписываться какое-либо количество колонок
 * без отступов по краям. Сразу видно, что можно взять 5 колонок по 40px с
 * расстояниями между ними 10px, что даст в итоге 240px (5 * 40px + 4 * 10px).
 * Т.к. фиксированные области могут быть слева, справа, одновременно справа
 * и слева, а могут и не быть будем использовать 20-колоночную сетку
 * (4 * 5 колонок). Остаётся расчитать:
 *
 * 1 Сетку без фиксированных областей (20 резиновых колонок)
 * 2 Сетку с одной фиксированной колонкой (15 резиновых колонок + 5 фиксированных)
 * 3 Сетку с двумя фиксированными колонками (10 резиновых + 10 фиксированных)
 *
 * Для минимизации CSS, удобства позиционирования, удобства задания глобальных
 * отступов и обхода непонимания Оперой десятичных дробей в размерах и маргинах
 * используем следующий метод: уменьшим свободное пространство контейнеров так,
 * чтобы в него помещалось 5 колонок, причём сделаем это с помощью правого
 * паддинга, равного 100% - <ширина необходимого пространства>, в следствие
 * чего ширина одной колонки с отступом будет равна 20% (100% / 5 колонок).
 * Отступ равен 20% ширины одной колонки (10px / 50px * 100%) но т.к. маргины
 * рассчитываются исходя из ширины родителя, то отступ относительно родителя
 * будет равен 4%. Т.к. 4% — не очень красивая цифра, сделаем так, чтобы
 * ширина свободного пространства была равен ширине не 5 колонок, а 4.
 * Следовательно ширина колонки вместе с отступом будет равна 25%, 5% из которых
 * — это отступ.
 *
 * В итоге получится так, что у нас правый край крайнего правого контейнера не
 * будет совпадать с правым краем контейнера и будет отличаться на 5% из-за
 * отступа. У нас возможны 4 вариант:
 *
 * 1 Отступ от края должен быть справа (когда фиксированная область справа)
 * 2 Отступ от края должен быть слева (когда фиксированная область слева)
 * 3 Отступ от края должен быть с обеих сторон (когда фиксированные области с
 *   обеихсторон)
 * 4 Отступов от края нет (когда нет фиксированных областей)
 *
 * Таким образом расстояние между резиновой и фиксированными областями будет
 * резиновым.
 *
 * Изначально у нас сразу имеется правый отступ.
 *
 * Чтобы компенсировать правый отступ и получить 4 вариант необходимо увеличить
 * ширину свободного пространства контейнера на размер отступа распределённый
 * по всем колонкам, т.е. если у нас 20 колонок, то мы должны ширину свободного
 * пространства разделить на 20 и взять от неё 20% (размер отступа относительно
 * ширины колонки) — это и будет распределённая величина отступа, которую нам
 * необходимо прибавить к ширине свободного пространства, т.е. вычесть из правого
 * паддинга
 *
 * Чтобы получить левый отступ, нам необходимо сдвинуть свободное пространство
 * вправо, но оставить его ширину неизменной. Чтобы получить размер сдвига
 * нужно узнать размер отступа колонки относителбно ширины родителя контейнера
 * (именно от него мы расчитываем ширину свободного пространства), для этого
 * нужно ширину свободного пространства разделить на 100 и умножить на размер
 * оступа относительно контейнера
 *
 * Чтобы сделать отступы с обеих сторон, необходимо сдвинуть свободное
 * пространство вправо и при этом уменьшить его ширину на величину равную
 * компенсации правого отступа
 *
 * Формулы расчёта:
 *
 * ширина с правым отступом = 100% / (количество колонок / 4 колонки)
 *
 * компенсация отступа = (ширина с правым отступом / количество колонок) *
 *                       размер отступа относительно ширины колонки
 *
 * левый отступ = (ширина с правым отступом / 100%) * размер оступа
 *                                                    относительно контейнера
 *
 * @section containers
 */
.grid-20, .grid-20-left, .grid-20-right, .grid-20-both,
.grid-15, .grid-15-left, .grid-15-right, .grid-15-both,
.grid-10, .grid-10-left, .grid-10-right, .grid-10-both,
.grid-5, .grid-5-left, .grid-5-right, .grid-5-both,
.page-grid, .page-grid-wrap {
	position: relative;
}

.grid-20 {
	margin-right: 79.8%;
}

.grid-20-left {
	margin-right: 79%;
	margin-left: 1%;
}

.grid-20-right {
	margin-right: 80%;
}

.grid-20-both {
	margin-right: 79.2%;
	margin-left: 1%;
}

.grid-15 {
	margin-right: 72.98%;
}

.grid-15-left {
	margin-right: 72.01%;
	margin-left: 1.33%;
}

.grid-15-right {
	margin-right: 73.34%;
}

.grid-15-both {
	margin-right: 72.37%;
	margin-left: 1.33%;
}

.grid-10 {
	margin-right: 59.2%;
}

.grid-10-left {
	margin-right: 58%;
	margin-left: 2%;
}

.grid-10-right {
	margin-right: 60%;
}

.grid-10-both {
	margin-right: 58.9%;
	margin-left: 2%;
}

.grid-5 {
	margin-right: 16.8%;
}

.grid-5-left {
	margin-right: 16%;
	margin-left: 4%;
}

.grid-5-right {
	margin-right: 20%;
}

.grid-5-both {
	margin-right: 19.2%;
	margin-left: 4%;
}

/**
* @section cols
*/
.col-1, .col-2, .col-3, .col-4, .col-5,
.col-6, .col-7, .col-8, .col-9, .col-10,
.col-11, .col-12, .col-13, .col-14, .col-15,
.col-16, .col-17, .col-18, .col-19, .col-20,
.page-col-1-span-5, .page-col-1-span-10, .page-col-1-span-15, .page-col-1-span-20,
.page-col-6-span-5, .page-col-6-span-10, .page-col-6-span-15, .page-col-11-span-5,
.page-col-11-span-10, .page-col-16-span-5 {
	position: relative;
/**
 * display: inline применённый к плавающему блоку помогает избавиться
 * от двойных границ
 * Нормальные браузеры это никак не затрагивает, т.к. по спецификации
 * элементы с float не принимают значения display отличные от none
 * Но если вдруг захочется убрать float у одного из таких элементов,
 * то надо не забыть ему вернуть display: block
 *
 * @bugfix Двойное увеличение границ у плавающих блоков в IE<=7
 * @affected IE6, IE7
 */
 display: inline;
 float: left;
}

.col-1 { left: 0; }
.col-2 { left: 25%; }
.col-3 { left: 50%; }
.col-4 { left: 75%; }
.col-5 { left: 100%; }
.col-6 { left: 125%; }
.col-7 { left: 150%; }
.col-8 { left: 175%; }
.col-9 { left: 200%; }
.col-10 { left: 225%; }
.col-11 { left: 250%; }
.col-12 { left: 275%; }
.col-13 { left: 300%; }
.col-14 { left: 325%; }
.col-15 { left: 350%; }
.col-16 { left: 375%; }
.col-17 { left: 400%; }
.col-18 { left: 425%; }
.col-19 { left: 450%; }
.col-20 { left: 475%; }

/**
* @section spans
*/
.span-1 { margin-right: -20%; width: 20%; }
.span-2 { margin-right: -45%; width: 45%; }
.span-3 { margin-right: -70%; width: 70%; }
.span-4 { margin-right: -95%; width: 95%; }
.span-5 { margin-right: -120%; width: 120%; }
.span-6 { margin-right: -145%; width: 145%; }
.span-7 { margin-right: -170%; width: 170%; }
.span-8 { margin-right: -195%; width: 195%; }
.span-9 { margin-right: -220%; width: 220%; }
.span-10 { margin-right: -245%; width: 245%; }
.span-11 { margin-right: -270%; width: 270%; }
.span-12 { margin-right: -295%; width: 295%; }
.span-13 { margin-right: -320%; width: 320%; }
.span-14 { margin-right: -345%; width: 345%; }
.span-15 { margin-right: -370%; width: 370%; }
.span-16 { margin-right: -395%; width: 395%; }
.span-17 { margin-right: -420%; width: 420%; }
.span-18 { margin-right: -445%; width: 445%; }
.span-19 { margin-right: -470%; width: 470%; }
.span-20 { margin-right: -495%; width: 495%; }

/**
* Размеры блоков для основной разметки.
* Зависят от класса у body, чтобы управлять внешним видом всех
* основных колонок на странице в одном месте.
*
* Для экономии опишем только основные. Т.к. IE6 не поддерживает
* .множественные.классы придётся склеить имена классов
*
* @section main
*/

/**
* Контейнеры
*
* @see containers
* @subsection containers
*/
.page-grid {
	margin-right: 79.8%;
}

.page-fixed-left .page-grid {
	margin-right: 72.01%;
	margin-left: 1.33%;
}

.page-fixed-left .page-grid-wrap {
	margin-left: 240px;
}

.page-fixed-right .page-grid {
	margin-right: 73.34%;
}

.page-fixed-right .page-grid-wrap {
	margin-right: 240px;
	margin-bottom: 20px;
}

.page-fixed-both .page-grid {
	margin-right: 58.9%;
	margin-left: 2%;
}

.page-fixed-both .page-grid-wrap {
	margin: 0 240px;
}

.page-fixed-right .page-grid-wrap_w-fluid {
	margin-right: 20%;
}

/**
* Положение резиновых блоков
*
* @see cols
* @subsection fluidBlocksPositions
*/
.page-col-1-span-5, .page-col-1-span-10, .page-col-1-span-15, .page-col-1-span-20 {
	left: 0;
}

.page-col-6-span-5, .page-col-6-span-10, .page-col-6-span-15 {
	left: 125%;
}

.page-fixed-left .page-col-6-span-5, .page-fixed-both .page-col-6-span-5,
.page-fixed-left .page-col-6-span-10, .page-fixed-both .page-col-6-span-10,
.page-fixed-left .page-col-6-span-15, .page-fixed-both .page-col-6-span-15 {
	left: 0;
}

.page-col-11-span-5, .page-col-11-span-10 {
	left: 250%;
}

.page-fixed-left .page-col-11-span-5, .page-fixed-both .page-col-11-span-5,
.page-fixed-left .page-col-11-span-10, .page-fixed-both .page-col-11-span-10 {
	left: 125%;
}

.page-col-16-span-5 {
	left: 375%;
}

.page-fixed-left .page-col-16-span-5, .page-fixed-both .page-col-16-span-5 {
	left: 250%;
}

/**
* Размеры резиновых блоков
*
* @see spans
* @subsection fluidBlocksSizes
*/
.page-col-1-span-5, .page-col-6-span-5, .page-col-11-span-5, .page-col-16-span-5 {
	margin-right: -120%;
	width: 120%;
}

.page-col-1-span-10, .page-col-6-span-10, .page-col-11-span-10 {
	margin-right: -245%;
	width: 245%;
}

.page-col-1-span-9, .page-col-6-span-9, .page-col-11-span-9 {
	position: relative;
	left: 250%;
	display: inline;
	float: left;
	margin-right: -215%;
	width: 215%;
	/*background: #fef;*/
}

.page-col-1-span-15, .page-col-6-span-15 {
	margin-right: -370%;
	width: 370%;
}

/**
* Размеры и положение фиксированных блоков
*
* @see spans
* @see cols
* @subsection fixedBlocks
*/
.page-fixed-left .page-col-1-span-5, .page-fixed-both .page-col-1-span-5 {
	left: -5%;
	margin-left: -240px;
	width: 240px;
}

.page-fixed-right .page-col-16-span-5, .page-fixed-both .page-col-16-span-5 {
	width: 240px;
}

.b-fluid-fixed__global {
}

.b-fluid-fixed__fluid {
	margin-right: 250px;
}

.b-fluid-fixed__fixed {
	float: right;
	width: 240px;
}