body {
/*  background-color:#EF4023; */
  background-color: #D6D6D6; 
  font-family: 'Helvetica', 'Arial', sans-serif;
}

#main_section {
  text-align: center;
}

#header {
  color:  #666666;
  margin: 1px auto;
  padding: 10px;
}

label {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size:  medium;
  color:black;
  border-style:none;
  padding: 6px;
}

table.tbl_func {
  font-size: medium;
 	width: 450px;
  border: 0px solid gray;
  margin: auto;
	 padding: 0px;
  border-spacing: 0px;
  border-width: 0px;
}

td.tbl_td_left {
  text-align:right;
  width: 180px;
}

td.tbl_td_right {
  text-align:left;
}

p.response_msg {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size:larger;
  color:#666666;
  text-align:center;
  width: 400px;
  margin:auto;
  background-color:#FFFFFF;
  border-radius: 8px;
  border: 1px solid gray;
  padding: 10px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

#formchg {
  background-color:#FFFFCC;
  border-radius: 8px;
  border: 1px solid gray;
  padding: 10px;
  width: 600px;
  margin:auto;
  height: 330px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  position: relative;
}

#logoheaderimg {
	height: 96px;
	margin: 20px auto;
	position: static;
}

/*
#arrowrightimg {
	height: 48px;
	position: absolute;
	top: 18px;
	left: 428px;
	visibility:visible;
}

#arrowleftimg {
	height: 48px;
	position: absolute;
	top: 18px;
	left: 125px;
	visibility:visible;
}
*/

#keyrightimg {
	height: 110px;
	position: absolute;
	top: 10px;
	left: 430px;
	visibility:visible;
}

#keyleftimg {
	height: 110px;
	position: absolute;
	top: 10px;
	left: 70px;
	visibility:visible;
}

#keyrectoinput {
  font-size: medium;
  text-align:center;
  padding: 3px;
  border: 1px solid gray;
  border-radius: 3px;
 margin: 0px 0px 0px 5px; 
}

#keyversoinput {
  font-size: medium;
  text-align:center;
  padding: 3px;
  border: 1px solid gray;
  border-radius: 3px;
  margin: 0px 0px 0px 5px; 
}

#function2call{
  font-size: medium;
  text-align:center;
  padding: 3px;
  border: 1px solid gray;
  border-radius: 3px;
  margin: 0px 0px 0px 5px;
  width: 450px;
  visibility: hidden;
}

#button2go {
  font-size:  medium;
 	height: 32px;
 	width: 166px;
  background-color:  #666666;
  color:   #FFFFFF;
  border-radius: 6px;
  border: 1px solid gray;
  padding:3px;
  margin: 0px 0px 0px 0px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  visibility: hidden;
}

#button2go:hover {
  background-color:   #C0C0C0;
  color:    #333333;
}

#button2back {
  font-size:  medium;
 	height: 32px;
 	width: 166px;
  background-color:  #666666;
  color:   #FFFFFF;
  border-radius: 6px;
  border: 1px solid gray;
  padding:3px;
  margin: 0px 0px 0px 0px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  visibility: visible;
}
#button2back:hover {
  background-color:   #C0C0C0;
  color:    #333333;
}


#wish {
  font-size: medium;
  text-align:center;
  color:  #363636;
  visibility: hidden;
}

#user_info_value{
  font-size: medium;
  text-align:left;
  padding: 3px;
  border: 1px solid gray;
  border-radius: 3px;
  margin: 0px 0px 0px 5px;
  visibility: hidden;
  /* min-width: 246px;*/
}

#func_param_1{
  font-size: medium;
  text-align:left;
  padding: 3px;
  border: 1px solid gray;
  border-radius: 3px;
  margin: 0px 0px 0px 5px;
  visibility: hidden;
  width: 100px;
}

#func_param_2{
  font-size: medium;
  text-align:left;
  padding: 3px;
  border: 1px solid gray;
  border-radius: 3px;
  margin: 0px 0px 0px 5px;
  visibility: hidden;
  width: 100px;
}

#icon_msg{
	height: 48px;
	visibility:visible;
}

#arrowleftimg {
    position: absolute;
    top: 40px;
    left: 100px;
    width: 192px;
    height: 192px;
    margin: 0 0 0 0;
    -webkit-animation: 2000ms steps(6,start) infinite reverse sl_rot_arrow; /* for old browser: Safari, Chrome, Opera */
    -moz-animation: 2000ms steps(6,start) infinite reverse sl_rot_arrow; /* for old browser: Firefox */
    -o-animation: 2000ms steps(6,start) infinite reverse sl_rot_arrow; /* for old browser: Opera 12.0 */
    animation: 2000ms steps(6,start) infinite reverse sl_rot_arrow;
    visibility: visible;
}
@-webkit-keyframes sl_rot_arrow { 0%,50% { -webkit-transform: rotate(40deg); } }  /* for old browser: Safari, Chrome, Opera */
@-moz-keyframes sl_rot_arrow { 0%,50% { -moz-transform: rotate(40deg); } } /* for old browser: Firefox */
@-o-keyframes sl_rot_arrow { 0%,50% { -o-transform: rotate(40deg); } } /* for old browser: Opera */
@keyframes sl_rot_arrow { 0%,50% { transform: rotate(40deg); } }

#arrowrightimg {
    position: absolute;
    top: 40px;
    left: 330px;
    width: 192px;
    height: 192px;
    margin: 0 0 0 0;
    -webkit-animation: 2000ms steps(6,start) 1s infinite reverse rl_rot_arrow; /* for old browser: Safari, Chrome, Opera */
    -moz-animation: 2000ms steps(6,start) 1s infinite reverse rl_rot_arrow; /* for old browser: Firefox */
    -o-animation: 2000ms steps(6,start) 1s infinite reverse rl_rot_arrow; /* for old browser: Opera 12.0 */
    animation: 2000ms steps(6,start) 1s infinite reverse rl_rot_arrow;
    visibility: visible;
}
@-webkit-keyframes rl_rot_arrow { 0%,50% { -webkit-transform: rotate(-40deg); } }  /* for old browser: Safari, Chrome, Opera */
@-moz-keyframes rl_rot_arrow { 0%,50% { -moz-transform: rotate(-40deg); } } /* for old browser: Firefox */
@-o-keyframes rl_rot_arrow { 0%,50% { -o-transform: rotate(-40deg); } } /* for old browser: Opera */
@keyframes rl_rot_arrow { 0%,50% { transform: rotate(-40deg); } }



#img_rotate {
    position: absolute;
    top: 75%;
    left: 45%;
    width: 64px;
    height: 64px;
    margin: 0 0 0 0;
    -webkit-animation:spin 1s linear infinite; /* for old browser: Safari, Chrome, Opera */
    -moz-animation:spin 1s linear infinite; /* for old browser: Firefox */
    -o-animation:spin 1s linear infinite; /* for old browser: Opera 12.0 */
    animation:spin 1s linear infinite;
    visibility: hidden;
}
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }  /* for old browser: Safari, Chrome, Opera */
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } /* for old browser: Firefox */
@-o-keyframes spin { 100% { -o-transform: rotate(360deg); } } /* for old browser: Opera */
@keyframes spin { 100% { transform: rotate(360deg); } }