body, html {
    height: 100%;
}

body {
    background-color: #7777cc;
    margin: 0;
    font-size:150%; /* =16px */
    align-content: center;
}

h2{
    font-size: 6vmin;
    margin: 1% auto;
}
h3{
    font-size: 4vmin;
    margin: 1% auto;
}
header {
max-width: 960px;
    height: 10%;
    /*max-height: 50px; Хедер 50рх*/
    background-color: #bbbbbb;
    margin: 0 auto 0 ; /*Сайт по центру екрана */
}

header img {
    height:100%;
    float: left;
    margin: 2px;
}
/*
h3{
    display: inline-block;
    float: left;
    font-size: 2rem;
}
*/
.wraper {
    max-width: 960px;
    background-color: #529214;
    margin: 0 auto 0 ; /*Сайт по центру екрана */
    height:     auto;       /* These two lines were the key. */
    min-height: 85%;

}

main {
    max-width: 960px;
    background-color: #e6e6e6;
    margin: 0 auto 0 ; /*Сайт по центру екрана */
    height: 100%;
}


footer {
    max-width: 960px;
    background-color: #4cb6ea;
    margin: 0 auto 0 ; /*Сайт по центру екрана */
    height: 5%;
    font-size: 50%;
    /*max-height: 30px;  Футер 30рх*/
}
input:active{

}

button,input[type=submit],[type=reset] {
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2c54b8);
    background-image: -moz-linear-gradient(top, #3498db, #2c54b8);
    background-image: -ms-linear-gradient(top, #3498db, #2c54b8);
    background-image: -o-linear-gradient(top, #3498db, #2c54b8);
    background-image: linear-gradient(to bottom, #3498db, #2c54b8);
    -webkit-border-radius: 15;
    -moz-border-radius: 15;
    border-radius: 15px;
    font-family: Arial;
    color: #ffffff;
    font-size: 4vmin;
    padding: 1%;
    text-decoration: none;
    margin:2%;
    /* width: 80%;
    margin: 0 10% 0 10%; */
    cursor: pointer;
}
input:hover [type=submit] {
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
    text-decoration: none;
}
.input {
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2c54b8);
    background-image: -moz-linear-gradient(top, #3498db, #2c54b8);
    background-image: -ms-linear-gradient(top, #3498db, #2c54b8);
    background-image: -o-linear-gradient(top, #3498db, #2c54b8);
    background-image: linear-gradient(to bottom, #3498db, #2c54b8);
    -webkit-border-radius: 15;
    -moz-border-radius: 15;
    border-radius: 15px;
    font-family: Arial;
    color: #ffffff;
    font-size: 6vmin;
    padding: 3%;
    text-decoration: none;
    width: 80%;
    margin: 0 10% 0 10%;
    cursor: pointer;
}

.input:hover {
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
    text-decoration: none;
}

#calc_page{
    max-width: 960px;
    /*background-color: #529214; */
    margin: 0 auto 0 ; /*Сайт по центру екрана */
    height:     auto;       /* These two lines were the key. */
    min-height: 85%;

    background: url(main.gif);
    background-repeat: no-repeat;
    background-size: 75% 100%;
    background-color: #e6e6e6;

    position: relative;
}

#log_form {
    position: absolute;
    top:45%;
    left:45%;
    height: 100px;
    width: 30%;
    background-color: #888888;
    border-radius: 25px;
}

#log_form input {
    height: 5%;
    width: 30%;
}
/* форма вводу відпрацьваних днів в табель*/
#accrual_form {
    position: absolute;
    top:5%;
    left:15%;
    height: 90%;
    width: 70%;
    background-color: #888888;
    border-radius: 25px;
}

#accrual_form input {
    height: 15%;
    width: 60%;
    font-size: 3vh;
    margin-bottom: 2vmin;
}
#accrual_form input[type=submit] {
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2c54b8);
    background-image: -moz-linear-gradient(top, #3498db, #2c54b8);
    background-image: -ms-linear-gradient(top, #3498db, #2c54b8);
    background-image: -o-linear-gradient(top, #3498db, #2c54b8);
    background-image: linear-gradient(to bottom, #3498db, #2c54b8);
    -webkit-border-radius: 15;
    -moz-border-radius: 15;
    border-radius: 15px;
    font-family: Arial;
    color: #ffffff;
    font-size: 6vmin;
    padding: 3%;
    text-decoration: none;
    width: 80%;
    margin: 0 10% 0 10%;
    cursor: pointer;
}
#accrual_form #input_block {
    position: relative;
    left:5%;
    display:inline-block;
    width:90%;
    height: 10vmin;
    float: left;

}
#accrual_form #input_label {
    position: relative;
    font-size: 3vh;
    float: left;
    width: 20%;
}
#accrual_form #input_block input {
    position: relative;
    left:20%;
    width: 60%;
    height: 40%;
    float: left;
    font-size: 4vmin;
}
/*подложка фоновая*/
#substrate {
    max-width: 960px;
    margin: 0 auto 0 ; /*Сайт по центру екрана */
    height:     auto;       /* These two lines were the key. */
    min-height: 85%;
    background-color: #e6e6e6;


    position: relative;
    text-align: center;
}
#substrate table {
    text-align: center;
    margin: 0 auto; /*Сайт по центру екрана */
    width: 90%;
    border-collapse:collapse
}
#substrate table input{
    font-size: 5vmin; /* 3% of min width or height */
    margin: 1%;
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2c54b8);
    background-image: -moz-linear-gradient(top, #3498db, #2c54b8);
    background-image: -ms-linear-gradient(top, #3498db, #2c54b8);
    background-image: -o-linear-gradient(top, #3498db, #2c54b8);
    background-image: linear-gradient(to bottom, #3498db, #2c54b8);
    -webkit-border-radius: 15;
    -moz-border-radius: 15;
    border-radius: 15px;
    font-family: Arial;
    color: #ffffff;

    padding: 1%;
    text-decoration: none;
    cursor: pointer;
    float: left;
   /* height: 10%;
    width: 30%;

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    background: rgba(255,255,255,1);
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 47%, rgba(240,240,240,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(247,247,247,1)), color-stop(100%, rgba(240,240,240,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 47%, rgba(240,240,240,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 47%, rgba(240,240,240,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 47%, rgba(240,240,240,1) 100%);
    background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 47%, rgba(240,240,240,1) 100%);
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f0', GradientType=1 );*/
}
#substrate table #lr_border {
    border-left: 1px solid #8a8a8a;
    border-right:1px solid #8a8a8a;
}

.rozgornut {
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2c54b8);
    background-image: -moz-linear-gradient(top, #3498db, #2c54b8);
    background-image: -ms-linear-gradient(top, #3498db, #2c54b8);
    background-image: -o-linear-gradient(top, #3498db, #2c54b8);
    background-image: linear-gradient(to bottom, #3498db, #2c54b8);
    -webkit-border-radius: 15;
    -moz-border-radius: 15;
    border-radius: 15px;
    font-family: Arial;
    color: #ffffff;
    font-size: 4vmin;
    padding: 1%;
    text-decoration: none;
    cursor: pointer;
}
.rozgornut:hover {
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
    text-decoration: none;
}


#one {
    background-color: #FFFF99;
}

#main_menu_form{
    position: absolute;
    top:10%;
    left:10%;
    height: 80%;
    width: 80%;
    background-color: #888888;
    border-radius: 25px;
    text-align: center;
}

#main_menu_form input[type=button] {
    font-size: 6vmin; /* 3% of min width or height */
    /* margin: 2% auto; */
    height: 15%;
    width: 60%;
    background: #F7F7F7;
    background-image: -webkit-linear-gradient(top, #F7F7F7, #F0F0F0);
    background-image: -moz-linear-gradient(top, #F7F7F7, #F0F0F0);
    background-image: -ms-linear-gradient(top, #F7F7F7, #F0F0F0);
    background-image: -o-linear-gradient(top, #F7F7F7, #F0F0F0);
    background-image: linear-gradient(to bottom, #F7F7F7, #F0F0F0);
    -webkit-border-radius: 15;
    -moz-border-radius: 15;
    border-radius: 15px;
    font-family: Arial;
    border: solid #1f628d 1px;
    text-decoration: none;
    cursor: pointer;
  /*  -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    cursor: pointer;
    background: rgba(255,255,255,1);
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 47%, rgba(240,240,240,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(247,247,247,1)), color-stop(100%, rgba(240,240,240,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 47%, rgba(240,240,240,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 47%, rgba(240,240,240,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 47%, rgba(240,240,240,1) 100%);
    background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 47%, rgba(240,240,240,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f0', GradientType=1 );
    */
}
#main_menu_form input[type=button]:hover{
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
    text-decoration: none;
}
#main_menu_form a {
    font-size: 4vmin;
    margin: 3vmin auto 7vmin auto ;
}
#get_money_form {
    position: absolute;
    top:5%;
    left:15%;
    height: 90%;
    width: 70%;
    background-color: #888888;
    border-radius: 25px;
    text-align: center;
}
#get_money_form input{
    font-size: 3vw; /* 3% of viewport width */
    margin: 2%;
    height: 10%;
    width: 60%;
}
#get_money_form input[type=submit] {
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2c54b8);
    background-image: -moz-linear-gradient(top, #3498db, #2c54b8);
    background-image: -ms-linear-gradient(top, #3498db, #2c54b8);
    background-image: -o-linear-gradient(top, #3498db, #2c54b8);
    background-image: linear-gradient(to bottom, #3498db, #2c54b8);
    -webkit-border-radius: 15;
    -moz-border-radius: 15;
    border-radius: 15px;
    font-family: Arial;
    color: #ffffff;
    font-size: 5vmin;
    padding: 3%;
    text-decoration: none;
    width: 60%;
    height: 10%;
    cursor: pointer;
}
#input_block {
    position: relative;
    left:5%;
    display:inline-block;
    width:90%;
    height: 15%;
    float: left;
}
#input_label {
    position: relative;
    font-size: 3vh;
    float: left;
    width: 20%;
}
#input_block input {
    position: relative;
    left:20%;
    width: 60%;
    height: 40%;
    float: left;
}
/*таблица полученных денег*/
#get_money_table{
    font-size: 4vmin;
}
#get_money_table #year_line{
    background-color: #8a8a8a;
}
#get_money_table #header_line{
    font-weight: bold; background-color: #99CC66; border:1px solid red
}
#get_money_table #header_line td {
    border:1px solid #7d8e8f;
}
#get_money_table #lr_border {
    border-left: 1px solid #8a8a8a;
    border-right:1px solid #8a8a8a;
}
/*таблица высчитанных денег*/
#checkoff_money_table{
    font-size: 4vmin;
}
#checkoff_money_table #year_line{
    background-color: #8a8a8a;
}
#checkoff_money_table #header_line{
    font-weight: bold; background-color: #99CC66; border:1px solid red
}
#checkoff_money_table #header_line td {
    border:1px solid #7d8e8f;
}

/* registration button*/
@-webkit-keyframes blink_reg_btn {
    0% { color: #FFA430; }
    50% { color: #ffffff; }
    100% { color: #FFA430; }
}

@keyframes blink_reg_btn {
    0% { color: #FFA430; }
    50% { color: #ffffff; }
    100% { color: #FFA430; }
}

.registration_button {
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2c54b8);
    background-image: -moz-linear-gradient(top, #3498db, #2c54b8);
    background-image: -ms-linear-gradient(top, #3498db, #2c54b8);
    background-image: -o-linear-gradient(top, #3498db, #2c54b8);
    background-image: linear-gradient(to bottom, #3498db, #2c54b8);
    -webkit-border-radius: 15;
    -moz-border-radius: 15;
    border-radius: 15px;
    font-family: Arial;
    color: #ffffff;
    font-size: 6vmin;
    padding: 3%;
    text-decoration: none;
    width: 80%;
    margin: 0 10% 0 10%;
    cursor: pointer;
    -webkit-animation: blink_reg_btn 3s linear infinite;
    animation: blink_reg_btn 3s linear infinite;

}

.registration_button:hover {
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
    text-decoration: none;
}
/* css for Menu*/

/* end */