﻿body 
{
     background-color: #eaeaea;
     font-family: Arial, Helvetica, sans-serif ;
     font-weight: lighter;
     font-size: medium;
     border: 0px solid gray; /*для точного видения блоков, в финальной версии установить 0px*/
     padding: 0px 0px 0px 0px;
 }

h1,h2,h3 /* Заголовок 1,2,3 в одном стиле */
{
    color: #ff6a00;
    font-family: 'Segoe UI, Tahoma, Geneva, Verdana, sans-serif';
    border: 0px solid gray; /*для точного видения блоков, в финальной версии установить 0px*/
    padding: 0px 20px 0px 5px;
    font-size: xx-large;
    text-align: left;
   /*text-decoration: underline; */
}
h2 /* Заголовок 2 */
{
    font-size: x-large;
   /*text-decoration: underline; */
}
h3{
    color: black;
    font-size: large;
}

p
{
    color: #808080;
    border: 0px solid gray; /*для точного видения блоков, в финальной версии установить 0px*/
    padding: 0px 20px 0px 5px;
}
hLogo1, hLogo2
{
    font-family: 'Segoe UI, Tahoma, Geneva, Verdana, sans-serif';
    font-size: xx-large;
    color: #808080;
    /*padding: 0px 0px 0px 0px;*/
    /*font-weight: bold;*/
    /*font-stretch: ultra-expanded; /*растяжение*/
}

hLogo2
{
    font-size: small;
}
.right{
    text-align: right;
}

/*
p_h 
{
    color: black;
    padding: 0px 20px 0px 5px;
}/*
/* таблицы */
table
{
    width: 100%;
    border-collapse: collapse;          /* Убираем двойные линии между ячейками */
    border-spacing: 2px;
    border-width: 1px;  
    background-color: #cfddcf;
    text-align: left;
}
.col1
{
    width: 70%; /* Ширина ячейки таблицы*/
}
td, th {
    padding: 4px;                           /* Поля в ячейках */
    border: 1px solid #999;             /* Граница между ячейками */
    text-align: center; /* Выравнивание по центру */
   }
thead {
    background: #8EA9DB;                   /* Цвет фона строки заголовка */
    color: black;                        /* Цвет текста */
}

table.logo
{
    width: 100%;
    background-image: linear-gradient( DeepSkyBlue, rgb(191, 247, 255));
    /*background-image: linear-gradient(Aqua, DodgerBlue);*/
}
td.logo{
    padding: 10px;
    border: none;
    text-align: left;
}

/* end таблицы */

/*
p_maps{
    border: 5px solid gray;
    padding: 0px 0px 0px 0px;    
}
*/

 /* примеры */


/* Привязка к классам элемента выполняется при помощи знака . (точка) */
.imp /* класс IMP может быть применен к любому тегу */
{
    color: #FFF;
    background-color: #FF0000;
    border: 1px solid gray;
    text-align: center;
    width: 400px;
    margin: auto;
}
/* класс OUTER привязан только к тегу DIV*/
div.outer 
{
    border: 2px solid green;
}

div.inner
{
     border: 1px solid red;
     margin: auto;
     width: 200px;
     text-align: center;
}

/* Привязка к ID элементов выполняется при помощи знака # */
#help_vis /* # - идентификатор */
{
    text-decoration: line-through;
    visibility: visible;
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid white;
    color: #FFF;
    background-color: #FF0000;
    width: 300px;
    height: 150px;
    text-align: center;
}

#help_invis
{
    text-decoration: line-through;
    visibility: hidden;
}

#block1, #block2, #block3 /* через запятую указываются классы (ид, теги)
                            с одинаковыми свойствами */
{
    width: 100px;
    height: 500px;
    border: 1px solid green;    
}



/* относительное позиционирование запоминает нормальное положение 
    блока и смещает блок относительно этого положения */
/*#block2 
{
    position: relative;
    top: 25px;
    left: 50px;   
} */

/* Абсолютное позиционирование удаляет блок из стандартного потока 
    блоков и размещает его с абсолютными координатами (или в %) */
/*#block2
{
    position: absolute;
    top: 50%;
    left: 50%;   
}*/

/* фиксированное положение - определяет положение на ЭКРАНЕ, перемещается вместе с прокруткой  */
/*
#block2
{
    position: fixed;
    top: 20px;
    right: 0px;
    height: auto;
    width: 120px;
    text-align: right;
    background-color: #ff6a00;
}
*/

/*
#content
{
    width: 80%;

    margin: auto;
    background: #F5F5DC;
    color: #000;
    position: relative;
}

#header
{
    height: 50px;
    background: #A52A2A;
    color: #fff;    
}

#col1
{
    position: absolute;
    top: 50px;
    right: 0px;
    width: 50%;
    height: 300px;
    background: #00BFFF;
    color: #fff;   	
}

#col2
{
    width: 50%;
    height: 250px;
    background: #50C878;
    color: #fff;   	
    position: absolute;
    top: 50px;
    left: 0px;
}

#footer
{
    background: #A52A2A;
    height: 50px;
    position: absolute;
    top: 400px;
    left: 0px;
    width: 100%;
}
*/
/*
#content
{
    width: 500px;
    ~height: 300px;
    margin: auto;
    background: #F5F5DC;
    color: #000;
    position: relative;
}

#header, #footer
{
    height: 50px;
    background: #A52A2A;
    color: #fff;
}

#col1
{
    width: 150px;
    height: 300px;
    background: #00BFFF;
    color: #fff; 
    float: left;
    margin: 15px 0px 10px 10px;
}

#col2
{
    width: 200px;
    height: 300px;
    background: #50C878;
    color: #fff; 
    float: right;
    margin: 15px 10px 10px 0px ;
    
}

#clr
{
    clear: both;
}
*/

/* налерея в продукции  */
#page { text-align: center;  }
#thumbs { padding-top: 10px; overflow: hidden; }
#thumbs img, #largeImage {
    border: 1px solid gray;
    padding: 4px;
    background-color: white;
    cursor: pointer;
}
#thumbs img {
    /*float: left;*/
    margin-right: 6px;
}
/* описание временно отключил. если появяться то включу.
#description {
    background: black;
    color: white;
    position: absolute;
    bottom: 0;
    padding: 10px 20px;
    width: 525px;
    margin: 5px;
}
*/
#panel { position: relative; }
