#form1 {
background:url(calc.png) no-repeat #EBF6FF bottom right;
padding-top:10px;
}

#form1 table {
margin:0 auto;
text-align:center;
width: 200px;
}

#form1 td {
padding:5px 0;
text-align: center;
border: none;
vertical-align: middle;}



/* SELECT */

.styled-select {
    width: 198px;
    overflow: hidden;
    height: 32px;
	padding: 0;
	border: 1px solid #CCC;
	border-bottom-color: #B3B3B3;
	border-radius: 4px;
	background: #F5F5F5;
	background: -webkit-linear-gradient(#FFF, #E6E6E6);
	background:         linear-gradient(#FFF, #E6E6E6);
	box-shadow: inset 1px -1px #F1F1F1, inset -1px 0 #F1F1F1, 0 1px 2px rgba(0,0,0,.1);
}

.styled-select:hover {
	background: #E6E6E6;
	background: -webkit-linear-gradient(#F6F6F6, #E6E6E6);
	background:         linear-gradient(#F6F6F6, #E6E6E6);
}

.styled-select select {
   width: 215px;
	font: 14px/32px Arial, sans-serif;
   color: #333;
   border:  none;
   background: #F5F5F5;
   background: -webkit-linear-gradient(#FFF, #E6E6E6);
   background: linear-gradient(#FFF, #E6E6E6);
   background: url('arrow_select.png') no-repeat 163px 0px;
   top: 0px; 
   padding: 0px 56px 5px 5px; margin: 0px; left: 0px; height: 100%;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}
.styled-select select:hover {
	background: #E6E6E6;
	background: -webkit-linear-gradient(#F6F6F6, #E6E6E6);
	background:         linear-gradient(#F6F6F6, #E6E6E6);
	background: url('arrow_select.png') no-repeat 163px -32px;
	}
	
/* CAUTION: IE hackery ahead */
select::-ms-expand { 
    display: none; /* remove default arrow on ie10 and ie11 */
}
/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background:none\9;
        padding: 5px\9;
    } 
}
	
#form1 .short {width: 95px; margin: auto;}
#form1 .short select {padding-left:10px; width: 112px; margin: auto; background: url('arrow_select.png') no-repeat 60px 0px;}
#form1 .short select:hover{width: 112px; margin: auto; background: url('arrow_select.png') no-repeat 60px -32px;}
#form1 .short option {padding-left:10px;}

#form1 option {
	background:#fff; 
	min-height: 18px;
	padding: 5px 10px;
	margin-top: 1px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	white-space: nowrap;
	color: #231F20;
	text-shadow: none;
	}
	
/* NUMBER */	

.styled-number {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	padding: 0;
}

.styled-number input {
	box-sizing: border-box;
	width: 98px;
	height:33px;
	margin: 0;
	padding: 8px 9px;
	border: 1px solid #CCC;
	border-bottom-color: #B3B3B3;
	border-radius: 4px;
	outline: none;
	background: #FFF;
	font: 14px Arial, sans-serif;
	color: #333;
	text-align: center; /* для Opera Presto */
	-moz-appearance: textfield;
}

.styled-number__field input::-webkit-inner-spin-button,
.styled-number__field input::-webkit-outer-spin-button {
	margin: 0; /* в каких-то браузерах присутствует отступ */
	-webkit-appearance: none;
}

/* RADIO BUTTON & CHECKBOX --- http://dimox.name/custom-checkboxes-and-radio-buttons-using-css-only/ --- */

.styled-radio, .styled-check {
  vertical-align: top;
  width: 17px;
  height: 17px;
  margin: 0 3px 0 0;
}
.styled-radio + label, .styled-check + label {
  cursor: pointer;
}
.styled-radio:not(checked), .styled-check:not(checked) {
  position: absolute;
  opacity: 0;
}
.styled-radio:not(checked) + label, .styled-check:not(checked) + label {
  position: relative;
  padding: 0 0 0 28px;
}

.styled-radio:checked + label:after, .styled-check:checked + label:after {
  opacity: 1;
}

/* RADIO */

.styled-radio:not(checked) + label:before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #C3C3C3;
  border-radius: 50%;
	background: #F5F5F5;
	background: -webkit-linear-gradient(#FFF, #E6E6E6);
	background:         linear-gradient(#FFF, #E6E6E6);
	box-shadow: 0 1px 1px rgba(0,0,0,.05), inset -1px -1px #FFF, inset 1px -1px #FFF;
}

.styled-radio:not(checked) + label:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #518CBD;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.5);
  opacity: 0;
  transition: all .2s;
}

.styled-radio:disabled + label:before {
	opacity: .55;
}

.styled-radio:disabled + label:after {
	opacity: 0;
}

.radio-right {float:right; padding-right: 5px; line-height:2em;}
.radio-left {float:left; margin-left: 8px; line-height:2.3em;}

/* CHECK */

.styled-check:not(checked) + label:before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 19px;
  height: 19px;
  border: 1px solid #C3C3C3;
  border-radius: 3px;
	background: #F5F5F5;
	background: -webkit-linear-gradient(#FFF, #E6E6E6);
	background:         linear-gradient(#FFF, #E6E6E6);
	box-shadow: 0 1px 1px rgba(0,0,0,.05), inset -1px -1px #FFF, inset 1px -1px #FFF;
}

.styled-check:checked + label:after {
  /*content: '✓';
  color: #518CBD;
  font-size: 25px;
  font-weight:bold;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
  position: absolute;
  top: -7px;
  left: 3px;
    transition: all .2s;*/
  content:'';
  width: 13px;
  height: 13px;
  top: 3px;
  left: 4px;
  border-radius: 1px;
  background: #518CBD;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.5);
  position: absolute;
    transition: all .2s;
}

#form1 input[type="button"] {
margin:10px auto;
padding: 8px 68px;
background:#2A608C;
border: none;
border-radius:3px;
color:#fff;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
}

#form1 table td:nth-of-type(2){float:right;}

.zag {background:#D5E9FA;}

.textblack {text-align:center; text-transform: uppercase;}
.textblack i {text-transform: none;}


#result {
background:#b4df5b;
padding:4px;
font-size: 17px;
line-height: 22px;
text-align: center;
}