﻿body {
    color: rgb(245, 245, 245);
    font-family: 'lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background-size: auto;
    background-color: #a7e4ff;
    background-image: linear-gradient(to top, #a7e4ff, #0035b6);
    background-size: contain;
    background-repeat: space;
    background-position: center, top;
}

center {
    /* явное задание позиционирования приводит к игнорированию z-index подвала (и вообще всех эл-тов без такого позиционирования) */
    /* position: relative; */
    width: 100%;
    height: fit-content;
    height: -moz-fit-content;
    /* margin: 0, auto, 65px, auto; */
}

center>a {
    vertical-align: middle;
    height: 100%;
    margin-top: 40%;
    /*display: block;*/
}

a iframe {
    background-color: rgba(0, 0, 0, 0.00);
    border-radius: 5px;
    width: 98px;
    height: 125px;
}

form {
    margin: auto;
    padding: 10px 20px 100px 20px;
    max-width: min-content;
    width: -moz-min-content;
    background-color: rgba(035, 035, 035, 0.85);
    border-radius: 5mm;
}

/* Цвет ссылки - оранжевый при наведении - костыль, т.к. почему-то не работает */
form a {
    /* color: rgb(0, 148, 243);*/
    color: rgb(136, 204, 254);
}

a:hover {
    color: #ff6a00;
}

form a:active {
    color: Yellow;
}

.doc-links ul li a {
    vertical-align: text-bottom;
    font-size: small;
    margin-top: 5px;
}

.footer-link {
    text-shadow: 1px 1px 1px Orange;
    color: rgb(16, 49, 222);
    font-size: small;
}

.footer-link,
footer a {
    text-shadow: 1px 1px 1px Orange;
    color: rgb(16, 49, 222);
    font-size: small;
}

footer a:hover {
    color: Maroon;
    text-shadow: 1px 1px 1px Yellow;
    font-size: small;
}

footer a:active {
    color: Black;
    text-shadow: none;
    font-size: small;
}

footer {
    font-size: small;
    vertical-align: bottom;
    text-shadow: 1px 1px 1px Black;
}

.layout-table {
    margin: auto;
}

.layout-table~div {
    /* поднимаем подвал-рекламу хостинга на высоту моего подвала; стиль будет применён ко всем эл-там DIV идущих ниже основной таблицы разметки, если у них тот 
			же самый родитель, что и у этой таблицы */
    /* TODO: похоже единственный метод избавитиься здесь от хардкодов, это перейти на JS document.ready */
    bottom: 69px !important;
}

/* Эффект подсветки картинок при наведении, код взят отсюда: http://dbmast.ru/effekt-prozrachnosti-dlya-izobrazhenij-pri-navedenii-s-pomoshhyu-css3 */
/*
        .intransparet-object {
            -moz-transition: all 0.4s; 
            -webkit-transition: all 0.4s;  
            -ms-transition: all 0.4s;  
            -o-transition: all 0.4s;  
            transition: all 0.4s; 
            opacity:1;          
            filter:alpha(opacity=100);
        }
        .intransparet-object:hover {
            opacity:0.5;            
            filter:alpha(opacity=50);
        }
        */
.transparet-object,
.image-link-container img {
    transition: all 0.4s;
    opacity: 0.75;
    /* Для совместимости с IE8 */
    filter: alpha(opacity=50);
}

.transparet-object:hover,
.image-link-container img:hover {
    -moz-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    opacity: 1;
    /* Для совместимости с IE8 */
    filter: alpha(opacity=100);
    color: #ff6a00;
}

/*
		.image-link-container img:hover {
			transform: scale(1.5, 1.5);
			z-index : 10;
			transition: z-index 10s ease 0.5s;
		}
		*/
/*		
		.image-link-container img:hover + a {
			transform: scale(0.5, 0.5);
		}
		*/
.spoiler_title {
    font-size: small;
}

.spoiler-content {
    /*display: none;*/
}

.spoiler-switch {
    border-radius: 5px 5px;
    border-style: solid;
    border-color: rgb(100, 100, 100);
    cursor: pointer;
}

/* Это правило покажет содержимое любого спойлера находящееся ниже отмеченного скрытого чекбокса любого спойлера в том же контейнере */
.spoiler-switch:checked~.spoiler-content {
    pointer-events: all;
    /* К сожалению, только хардкод здесь приводит к плавному развороту спойлера. Если же поставить 100%, то содержимое будет появляться резко */
    max-height: 700px;
    opacity: 100;
    transition: max-height 0.5s ease 0.2s, opacity 0.5s ease-out 0.2s;
}

/* Это правило скроет содержимое любого спойлера находящееся ниже выключателя любого спойлера в том же контейнере */
.spoiler-switch~.spoiler-content {
    pointer-events: none;
    /*cursor: default;*/
    max-height: 0;
    opacity: 0;
    transition: max-height 0.5s ease 0.2s, opacity 0.5s ease-out 0.2s;
}

.comments {
    color: rgb(204, 204, 204);
    text-align: justify;
    font-size: smaller;
    text-indent: 20px;
}

.transparet-object a {
    color: White;
}

.iframe-links figure {
    margin: auto;
}

.iframe-links td {
    width: 120px;
}

.news-widget {
    width: 50%;
    vertical-align: top;
    text-align: center;
}

small a {
    color: rgb(204, 204, 204);
}