/** HTML5/CSS3, EDGE/CHROME                              *** SignaPhoto.css ***

 ******************************************************************************
 *           Определить стили ландшафтной версии "Подписать фотографию"       *
 ******************************************************************************

                                                     Автор:       Труфанов В.Е.
                                                     Дата создания:  03.06.2021
 Copyright © 2021 tve                                Посл.изменение: 21.01.2022
*/
html{font-family:'Anonymous Pro',monospace;font-size:16px;}

/* Содержим поля в ширине блока (кроме margin) */
* {box-sizing:border-box;} 
/* Выравниваем базовую линию блока по базовой линии родителя */
html, body,
a, abbr, acronym, address, article, aside, audio, b, big, blockquote,button, 
canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, 
em, embed,  
fieldset, figcaption, figure, footer, form, 
h1, h2, h3, h4, h5, h6, header, hgroup, i, iframe, img, ins, kbd, 
label, legend, li, mark, menu, nav, 
object, ol, output, p, pre, q, ruby, 
s, samp, section, small, span, strike, strong, sub, summary, sup, 
table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video 
{
	margin:0;
	padding:0;
	border:0;
	vertical-align:baseline;
}
/* Снимаем умалчиваемый стили браузеров при фокусировании на поле ввода */
*:focus {outline:none;} 
/* Все секции представляем, как блоки */
article, aside, details, div, figcaption, figure, footer, header, hgroup, 
menu, nav, section 
{
	display:block;
}
/* Нумеруем списки арабскими числами (1,2,3,4,...) */
ol 
{ 
	list-style:decimal;
}
/* Ставим маркер в виде квадрата в маркированных списках */
ul 
{
	list-style:square;
}
body
{
   /*background:red;*/
   width:100%;
   height:100%;
   /*font-size:1rem;*/
   background-image: url(images/bg_page.png);
}

#All, #Lead, #View, #Proba, #Photo, #Stamp
{background:transparent;}

/*
#All{background:yellow;}
#Lead{background:aqua;}
#View{background:lightyellow;}
#Proba{background:khaki;}
#Photo{background:linen;}
#Stamp{background:gainsboro;} 
*/

@font-face{font-family:Pompadur; src:url(Fonts/Lobster/Lobster-Regular.ttf);}
#ViewTuneIn,#btnTune{font-family:Pompadur;}

/* Стилизуем кнопки */
.navButtons {height:50px; width:50px;}
.navButtons
{
   border:1px gray solid;
   overflow:hidden;
   display:block;  
   -moz-box-shadow:5px 5px 7px rgba(3,33,33,.7);  
   -webkit-box-shadow: 5px 5px 7px rgba(3,33,33,.7);  
   box-shadow: 5px 5px 7px rgba(3,33,33,.7);  
   -moz-border-radius:4px;
   -webkit-border-radius:4px;
   border-radius:4px;
}
.navButtons:hover
{
   border:2px solid black;
   background-color:#fff;
}
.hiddenInput
{  
   overflow: hidden;
   display:block;  
   height:0px;  
   width:0px;  
}                      
/* Прячем разметочные объекты для загрузки файла изображения и штампа */ 
#InfoLead, #StampLead, #StampDo, #TuneIn {width:0;height:0;padding:0;margin:0;}
#my_hidden_file,#my_hidden_load,
#my_shidden_file,#my_shidden_load,#my_Stamp_Do,#my_Tune_In,#my_Tune_Submit,#my_Home
{font-size:0;width:0;border-style:none;background-color:transparent;} 

/* Форматируем радиокнопки, переключатель, поля ввода в настройках */
.Infield
{
   font-weight: 600;
   background-color: #E1EDEB;
   color: black;
   text-align: right;
   height: 2rem;
   width: 3.8rem;
   margin: .6rem auto;
   border: 2px solid #4AB9F2;
   border-radius: 5px;
}
.checkbox-label 
{
   display: block;
   background: #E1EDEB; 
   border-radius: 2rem;
   position: relative;
   box-shadow: 0 0 0 2px #dddddd;
}
.checkbox-label .on 
{
   display: block;
   position: absolute;
   z-index: 0;
   left: 0;
   opacity: 1;
   min-width: 30rem;
   line-height: 2rem;
   opacity: 0;
   color: #13bf11;
}
.checkbox-label .off 
{
   display: block;
   position: absolute;
   z-index: 0;
   right: 4.2rem;
   text-align: right;
   opacity: 1;
   min-width: 30rem;
   line-height: 2rem;
   opacity: 1;
   color: #bbbbbb;
}
.checkbox-label:before 
{
   content: '';
   display: block;
   position: absolute;
   z-index: 1;
   top: 0;
   left: 0;
   border-radius: 2rem;
   height: 2rem;
   width: 2rem;
   background: linear-gradient(to right, LightYellow, Goldenrod);
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2), 0 0 0 2px #dddddd;
}
.checkbox, .checkbox.blue, .checkboxctrl
{
   position: absolute;
   left: -500rem
}
.checkbox:checked + .checkbox-label 
{
   background: #13bf11;
   box-shadow: 0 0 0 2px #13bf11;
}
.checkbox.blue:checked + .checkbox-label 
{
  background: #1fc1c8;
  box-shadow: 0 0 0 2px #1fc1c8;
}

.checkbox:checked + .checkbox-label .on,
.checkbox.blue:checked + .checkbox-label .on 
{
   left: 4.4rem;
   opacity: 1;
}
.checkbox:checked + .checkbox-label .off 
{
   right: 0;
   opacity: 0;
}
.checkbox:checked + .checkbox-label:before 
{
   left: 30px;
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2), 0 0 0 2px #13bf11;
}
.checkbox.blue + .checkbox-label .on 
{
  color: #1fc1c8;
}
.checkbox.blue:checked + .checkbox-label .off 
{
  right: 0px;
  opacity: 0;
}
.checkbox.blue:checked + .checkbox-label:before 
{
  left: 30px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2), 0 0 0 2px #1fc1c8;
}
#btnTune 
{
  border: none;
  background: transparent;
  padding: 0 .4rem;
  line-height:2.6rem;
  position: relative;
  color: #3E4651;
  cursor: pointer;
  word-spacing:.3rem;
}
#btnTune:before 
{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 48%;
  height:2.4rem;
  background: transparent;
  border: 2px solid #4AB9F2;
  border-radius: 5px;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
#btnTune:hover:after 
{
  opacity: 0;
  background: transparent;
}
#btnTune:hover 
{
  color: #fff;
  background: linear-gradient(to right, LightYellow, Goldenrod);
  border-radius: 5px;
  -webkit-transition: 0.3s linear;
  transition: 0.3s linear;
  /*box-shadow: 0 10px 90px -2px rgba(0, 0, 0, 0.2);*/
  box-shadow: 4px 4px 2rem #4AB9F2;
}
#btnTune:hover:before 
{
  width: 98%;
  background: transparent;
  border: 0;
}

/*
 *********************************************************** SignaPhoto.css ***
*/